:root{color-scheme:dark;font-family:system-ui,-apple-system,'Hiragino Sans',sans-serif;color:#f4f7ff;background:#11172b;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 50% 0,#233251 0,transparent 65%),#11172b}main{width:min(100%,460px);margin:auto;padding:24px 22px max(18px,env(safe-area-inset-bottom))}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.brand{display:flex;gap:10px;align-items:center;font-weight:850;font-size:19px;letter-spacing:1px}.brand b{color:#67e0cf}.brand small{display:block;font-weight:500;font-size:12px;letter-spacing:2px;color:#9baac4;margin-top:4px}.mark{color:#67e0cf;font-size:36px}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #fff;outline-offset:3px}.icon{border:1px solid #45516a;border-radius:50%;width:36px;height:36px;background:transparent;color:#c4d0e4}.scores{display:flex;justify-content:space-between;align-items:center}.scores span{display:block;color:#aebbd2;font-size:14px}.scores strong{font-size:48px;line-height:1.2;letter-spacing:-2px;font-variant-numeric:tabular-nums}.scores .best{text-align:right}.scores .best strong{font-size:28px;letter-spacing:-1px;color:#f5cf7c}.best span{color:#f5cf7c}.status{display:flex;justify-content:space-between;align-items:center;min-height:48px;font-size:14px;color:#b5c5dc}#combo{color:#67e0cf;font-weight:800}.board-wrap{position:relative}#board{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;background:#090f20;border:1px solid #35405a;border-radius:17px;padding:9px;box-shadow:0 12px 36px #05091455;touch-action:none}.cell{border:0;padding:0;aspect-ratio:1;border-radius:5px;background:#202b43;position:relative;min-width:0}.cell.filled,.mini.filled{background:var(--c);box-shadow:inset 0 3px 0 #ffffff42,inset 0 -3px 0 #00000022}.cell.preview{background:var(--c);opacity:.5;box-shadow:inset 0 0 0 2px #fff}.cell.bad{background:#d96172;opacity:.45}.cell.clearing{animation:clear .3s ease forwards}@keyframes clear{50%{background:#fff;transform:scale(1.09)}100%{transform:scale(.2);opacity:0}}.tray{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px;min-height:102px}.piece{height:100px;border:1px solid transparent;background:#1b253c;border-radius:13px;display:flex;justify-content:center;align-items:center;touch-action:none;transition:border-color .15s,background .15s}.piece.selected{border-color:#67e0cf;background:#213d4a;box-shadow:0 0 0 2px #67e0cf22}.piece.used{background:transparent;color:#54647f}.shape{display:grid;gap:3px;pointer-events:none}.mini{width:17px;height:17px;border-radius:3px}.hint{text-align:center;font-size:13px;color:#aebbd2;margin:14px 0 24px}footer{display:flex;justify-content:center;gap:14px}footer button{border:1px solid #3b4963;color:#c5d1e5;background:transparent;border-radius:10px;min-height:43px;padding:9px 17px;font-size:14px}.storage{font-size:12px;color:#8b9ab4;text-align:center;margin-top:20px}#burst{pointer-events:none;position:absolute;inset:0;display:flex;justify-content:center;align-items:center;font-weight:900;font-size:34px;color:#fff;text-shadow:0 3px 15px #000;opacity:0}#burst.show{animation:burst .9s ease both}@keyframes burst{0%{opacity:0;transform:scale(.7)}20%,70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-25px)}}dialog{width:min(90vw,370px);border:1px solid #45516a;border-radius:22px;background:#1b263e;color:#f4f7ff;padding:28px;box-shadow:0 25px 100px #0008}dialog::backdrop{background:#060b19b8;backdrop-filter:blur(6px)}dialog h2{font-size:25px;margin:0 0 18px}dialog p{line-height:1.8;font-size:15px;color:#c4d0e3}dialog button{width:100%;padding:14px;border:0;border-radius:12px;background:#67e0cf;color:#102b32;font-weight:750;margin-top:10px}dialog .secondary{background:transparent;color:#b5c5dc;border:1px solid #45516a}dialog .result{font-size:52px;color:#fff;font-weight:850;margin:10px 0}#ghost{position:fixed;pointer-events:none;z-index:9;display:none;opacity:.9}#ghost .mini{width:var(--size);height:var(--size)}@media(max-width:370px){main{padding:16px}.tray{margin-top:18px}.mini{width:14px;height:14px}#board{gap:4px}.scores strong{font-size:42px}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition:none!important}}
/* Charged arcade edition */
body{background:radial-gradient(ellipse at 15% 0,#283858 0,transparent 50%),radial-gradient(ellipse at 95% 60%,#242046 0,transparent 60%),#101629}main{padding-top:16px}header{margin-bottom:14px}.scores strong{font-size:40px}.charge{margin-top:15px;padding:12px 14px;border:1px solid #40536b;border-radius:14px;background:linear-gradient(120deg,#193744b0,#222943)}.charge-title{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:#a6f6e5}.charge-title strong{font-size:23px;color:#fff}.charge-title small{font-size:12px;font-weight:500;color:#adbbcf}.meter{position:relative;height:9px;border-radius:9px;background:#090f24;margin:7px 0 8px;overflow:hidden}.meter>div{height:100%;width:0;background:linear-gradient(90deg,#38bdaa,#a2f8c3);border-radius:9px;transition:width .45s ease}.meter.full>div{background:linear-gradient(90deg,#9b8eff,#ffc975);box-shadow:0 0 15px #a593ff}.meter i{position:absolute;top:0;width:2px;height:9px;background:#11172b88}#energyHint{display:block;font-size:12px;color:#aec4d6;line-height:1.5}.status{min-height:40px;font-size:13px}#board{border-color:#445c78;box-shadow:0 15px 50px #050b23aa,0 0 30px #6a7afa0a}.tray{margin-top:16px;min-height:76px;gap:8px}.piece{height:76px;background:#22304a}.hint{margin:10px 0 14px;min-height:20px}.powers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.power{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;border:1px solid #46526e;border-radius:14px;background:linear-gradient(155deg,#303e5b,#1b233b);color:#d1dbef;padding:10px 3px;min-height:113px;transition:transform .15s,box-shadow .2s}.power b{font-size:13px}.power-desc{font-size:12px;color:#b5c3d9}.power strong{font-size:13px;border-radius:20px;padding:3px 10px;background:#0b142b88}.power-icon{font-size:26px;line-height:1;font-weight:800}.power:disabled{opacity:.5;cursor:default}.power.ready{border-color:#77e4db;box-shadow:0 0 17px #5bddcd25}.power.ready strong{background:#79ebd2;color:#112b31}.power.bomb.ready{border-color:#fab480;box-shadow:0 0 17px #fab48025}.power.bomb.ready strong{background:#fab480}.power.cross.ready{border-color:#b7a0ff;box-shadow:0 0 18px #ac8aff33}.power.cross.ready strong{background:#c9b6ff}.power.armed{outline:2px solid #fff;outline-offset:2px;transform:translateY(-3px)}.power-note{font-size:12px;line-height:1.5;color:#b2c0d7;text-align:center;min-height:18px;margin:12px 0 16px}#cancelPower{display:block;margin:12px auto 0;background:#3e355c;color:#fff;border:1px solid #aa96d8;border-radius:8px;padding:9px 22px;font-size:14px}#cancelPower[hidden]{display:none}.cell.power-target{box-shadow:inset 0 0 0 2px #ffdba6;background:#8e684a}.cell.power-hit{animation:powerHit .48s ease forwards!important}#board.impact{animation:impact .35s ease}.storage{margin-top:14px}#burst{font-size:clamp(24px,7vw,34px);letter-spacing:1px}@keyframes powerHit{0%{filter:brightness(1)}30%{background:#fff;box-shadow:0 0 20px #ffdab8;transform:scale(1.12)}100%{opacity:0;transform:scale(.2) rotate(20deg)}}@keyframes impact{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}70%{transform:translateX(-2px)}}@media(max-width:370px){.power b{font-size:12px}.power-desc{font-size:12px}main{padding:12px}.charge{margin-top:10px}}@media(prefers-reduced-motion:reduce){#board.impact,.cell.power-hit{animation-duration:.01ms!important}}
/* Immediate input, lightweight independent effects. */
button{touch-action:manipulation}.piece,#board{touch-action:none}.power.unavailable{opacity:.55}.power:active:not(.unavailable){transform:scale(.97)}.power,.piece{transition:border-color .12s,background .12s}.power-note{min-height:36px}#ghost{left:0;top:0;will-change:transform}#burst.show{animation:none;opacity:1;transition:opacity .1s}#burst{font-size:26px}.cell-flash{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2}#board{box-shadow:0 8px 20px #050b2355}.power.ready,.power.bomb.ready,.power.cross.ready{box-shadow:none}.meter>div{transition:width .15s ease}dialog::backdrop{backdrop-filter:none}.power{min-height:104px}.power-note{margin:8px 0 12px}
/* One-screen play surface: the board absorbs changes in available height. */
html{height:100%;overflow:hidden}body{height:100%;min-height:0;overflow:hidden;overscroll-behavior:none}main{height:var(--app-height,100dvh);width:min(100%,460px);padding:max(6px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));display:grid;grid-template-rows:40px 36px 38px minmax(0,1fr) 72px 32px 58px;gap:6px;overflow:hidden}header{grid-row:1;margin:0;min-width:0}.brand{font-size:15px;letter-spacing:.3px;gap:6px}.brand small{display:none}.mark{font-size:27px}.game-actions{display:flex;gap:4px}.game-actions .icon{width:38px;height:38px;border-radius:10px;font-size:19px}.game-actions #sound[aria-pressed=true]{color:#67e0cf;border-color:#67e0cf}.scores{grid-row:2;gap:8px;min-width:0}.scores>div{display:flex;align-items:baseline;gap:8px}.scores span{font-size:12px}.scores strong{font-size:28px;letter-spacing:-1px;line-height:1.1}.scores .best strong{font-size:20px}#combo{font-size:12px;white-space:nowrap}.charge{grid-row:3;margin:0;padding:4px 10px;border-radius:9px;min-height:0}.charge-title{font-size:12px;line-height:17px}.charge-title strong{font-size:17px}.charge-title small{font-size:12px}.meter{height:5px;margin:4px 0 0}.meter i{height:5px}.status,#energyHint,.storage,.power-note,.power-desc,#cancelPower{display:none!important}.board-wrap{grid-row:4;width:100%;min-height:0;position:relative;overflow:visible}#board{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--board-size,100%);height:var(--board-size,100%);grid-template-rows:repeat(8,minmax(0,1fr));gap:4px;padding:7px;border-radius:13px;box-shadow:none}.cell{aspect-ratio:auto;min-height:0;border-radius:4px}.tray{grid-row:5;margin:0;min-height:0;height:100%;gap:8px}.piece{height:100%;min-height:0;border-radius:10px}.mini{width:14px;height:14px}.shape{gap:2px}.hint{grid-row:6;align-self:center;margin:0;min-height:0;font-size:12px;line-height:16px;text-align:center;max-height:32px;overflow:hidden}.powers{grid-row:7;height:100%;gap:7px}.power{min-height:0;height:100%;padding:5px 3px;display:grid;grid-template-columns:20px auto;grid-template-rows:20px 20px;justify-content:center;align-content:center;column-gap:4px;row-gap:1px;border-radius:10px}.power-icon{font-size:22px;grid-row:1 / 3;align-self:center}.power b{font-size:14px;white-space:nowrap;line-height:20px}.power strong{font-size:12px;padding:1px 8px;line-height:18px}.power.armed{transform:none}.power:active:not(.unavailable){transform:scale(.98)}#burst{font-size:24px}dialog{max-height:calc(var(--app-height,100dvh) - 24px);overflow-y:auto;overscroll-behavior:contain;padding:22px}dialog p{font-size:15px}dialog button{min-height:44px}@media(max-height:580px) and (orientation:portrait){main{grid-template-rows:36px 28px 34px minmax(0,1fr) 60px 28px 52px;gap:4px}.game-actions .icon{height:34px;width:34px}.scores strong{font-size:24px}.mini{height:11px;width:11px}.hint{font-size:12px;line-height:14px}.power b{font-size:13px}}@media(orientation:landscape) and (max-height:540px){main{width:min(100%,850px);grid-template-columns:minmax(180px,1fr) minmax(280px,1fr);grid-template-rows:40px 32px 38px minmax(62px,1fr) 32px 58px;column-gap:14px}.board-wrap{grid-column:1;grid-row:1 / 7}header,.scores,.charge,.tray,.hint,.powers{grid-column:2}header{grid-row:1}.scores{grid-row:2}.charge{grid-row:3}.tray{grid-row:4;max-height:85px;align-self:center}.hint{grid-row:5}.powers{grid-row:6}}
/* Undo shares the existing instruction row, preserving the one-screen layout. */
.hint-row{grid-row:6;display:flex;align-items:center;gap:8px;min-width:0;height:100%}.hint-row .hint{flex:1;min-width:0;text-align:left;font-size:12px;line-height:15px;max-height:30px}#undo{flex:none;min-width:70px;height:100%;border:1px solid #72cebd;border-radius:9px;background:#1e3c46;color:#adf1dd;font:inherit;font-size:13px;padding:0 9px}#undo:disabled{opacity:.35;border-color:#56657d;color:#b5c0d2}#undo:active:not(:disabled){background:#2c5560}@media(orientation:landscape) and (max-height:540px){.hint-row{grid-column:2;grid-row:5}}
/* Clear placement preview, independent from the moving ghost. */
#board .cell.preview{opacity:1;background:#63e6cb;box-shadow:inset 0 0 0 2px #f0fff9,0 0 8px #63e6cb99;z-index:1}#board .cell.bad{opacity:1;background:#8c344b;box-shadow:inset 0 0 0 2px #ff9aab}#ghost{opacity:.3}.hint-row .hint{color:#d2f7ed}
/* Six skills, with an always-visible effect and cost on each button. */
main{grid-template-rows:36px 30px 36px minmax(0,1fr) 64px 32px 126px;gap:5px}.powers{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:6px}.powers .power{display:flex;flex-direction:column;justify-content:center;gap:1px;padding:3px 1px;min-height:0;height:100%}.powers .power-icon{display:none}.powers .power b{font-size:13px;line-height:17px}.powers .power-desc{display:block!important;font-size:12px;line-height:16px;letter-spacing:-.45px;white-space:nowrap;color:#c5d3e7}.powers .power strong{font-size:12px;line-height:16px;padding:1px 10px}.color.ready{border-color:#f5a7d0}.color.ready strong{background:#f5a7d0}.mega.ready{border-color:#ffa579}.mega.ready strong{background:#ffa579}.nova.ready{border-color:#f6dc80}.nova.ready strong{background:#f6dc80}.charge-title strong{font-variant-numeric:tabular-nums}.charge-title>span{font-size:12px}.charge-title{gap:8px;white-space:nowrap}@media(max-width:350px){.powers .power-desc{font-size:12px;letter-spacing:-.9px}.powers .power b{font-size:12px}.charge-title>span{font-size:12px;letter-spacing:-.5px}}@media(max-height:580px) and (orientation:portrait){main{grid-template-rows:34px 26px 34px minmax(0,1fr) 56px 28px 120px;gap:4px}}@media(orientation:landscape) and (max-height:540px){main{grid-template-rows:36px 28px 34px minmax(52px,1fr) 28px 126px}.tray{min-height:0;max-height:70px}}
/* Countdown occupies the score row, preserving the one-screen controls. */
main{grid-template-rows:36px 42px 36px minmax(0,1fr) 64px 32px 126px}.scores{gap:5px}.scores>div{gap:4px}.scores strong{font-size:24px}.scores .best strong{font-size:18px}.scores>div{flex-wrap:wrap}.scores #combo{display:none}.mode-control{border:1px solid #526682;background:#1e3048;border-radius:9px;min-width:108px;height:42px;padding:2px 8px;text-align:center;color:#a4f4dd}.scores .mode-control span{display:block;font-size:12px;line-height:15px;color:inherit}.scores .mode-control strong{display:block;font-size:18px;line-height:21px;letter-spacing:0;font-variant-numeric:tabular-nums}.mode-control.urgent{background:#592a38;border-color:#ff8298;color:#ffd2d9}@media(max-height:580px) and (orientation:portrait){main{grid-template-rows:34px 42px 34px minmax(0,1fr) 56px 28px 120px}}@media(orientation:landscape) and (max-height:540px){main{grid-template-rows:36px 42px 34px minmax(52px,1fr) 28px 126px}}
.mission-hud{min-width:0;display:flex;flex-direction:column;gap:2px;padding-right:4px}.mission-hud strong{font-size:13px;line-height:17px;color:#eaf4ff;white-space:nowrap}.mission-hud span{font-size:12px;line-height:15px;color:#f7d88f;white-space:nowrap;letter-spacing:-.35px}#board::before{content:'';position:absolute;top:-3px;left:8px;right:8px;height:4px;border-radius:5px;background:linear-gradient(to right,#ffda75 var(--fever-progress,0%),#344259 var(--fever-progress,0%));pointer-events:none}#board.fever-active{border-color:#ffda75;box-shadow:0 0 0 2px #ffda7533}.scores .best{flex-direction:column;align-items:flex-end;gap:0}.scores #recordGap{font-size:12px;line-height:15px;white-space:nowrap;letter-spacing:-.6px}@media(max-width:370px){.game-actions{gap:2px}.game-actions .icon{width:32px;height:34px}.mission-hud strong{font-size:12px}.mission-hud span{font-size:12px;letter-spacing:-.6px}.scores .mode-control{min-width:100px;padding:2px 4px}.scores #recordGap{font-size:12px;letter-spacing:-1px}}
/* Fever show: bounded elements, transform/opacity animation, no input interception. */
main{position:relative;isolation:isolate}main::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 10% 30%,#df4bad55,transparent 65%),radial-gradient(ellipse at 95% 75%,#ffc14555,transparent 65%);opacity:0;transition:opacity .25s}.fever-on::before{opacity:1}.fever-on .mission-hud #feverText{color:#ffe897;font-size:15px;font-weight:900;letter-spacing:.3px;text-shadow:0 1px 8px #ff962866}.fever-on .scores #score{color:#ffe78a;text-shadow:0 0 12px #ffa73866;display:inline-block}.fever-on #board{border:2px solid #ffe795;box-shadow:0 0 0 3px #ff9d4540,0 0 22px #ed62ad35;background:#211b38}.fever-on #board .cell.filled{box-shadow:inset 0 2px 0 #ffffff90,inset 0 -2px 0 #0002}.fever-on #board .cell.preview{box-shadow:inset 0 0 0 2px #fff,0 0 8px #63e6cb99}.fever-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2;opacity:0;border-radius:12px}.fever-on .fever-fx{opacity:1}.fever-sweep{position:absolute;inset:-40%;background:linear-gradient(110deg,transparent 44%,#ffedb314 49%,#fff1be26 50%,transparent 56%);animation:feverSweep 2.8s linear infinite;animation-play-state:paused}.fever-spark{position:absolute;left:calc(3% + var(--lane)*13%);bottom:0;width:4px;height:12px;border-radius:3px;background:#ffe48b;opacity:0;animation:feverSpark 2.4s ease-out infinite;animation-delay:var(--delay);animation-play-state:paused}.fever-spark:nth-child(even){background:#f6a4ea;width:3px;height:8px}.fever-on:not(.fever-paused) .fever-sweep,.fever-on:not(.fever-paused) .fever-spark{animation-play-state:running}#feverIntro{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none;opacity:0;visibility:hidden}#feverIntro strong{font-size:clamp(32px,12vw,56px);font-weight:1000;font-style:italic;letter-spacing:3px;color:#ffe994;text-shadow:3px 3px 0 #9d3769,0 0 18px #361644}#feverIntro span{font-size:15px;font-weight:850;letter-spacing:2px;color:#fff1b9;background:#342445e8;padding:6px 12px;border-radius:8px}#feverIntro.enter{visibility:visible;animation:feverEntrance .85s ease-out both}.fever-on #burst{color:#ffedb6;font-size:22px;align-items:flex-end;padding-bottom:20px}#feverGain{position:absolute;right:15%;top:15%;z-index:4;font-weight:950;font-size:30px;color:#ffef9a;text-shadow:2px 2px 0 #76334f;opacity:0;pointer-events:none}#feverGain.show{opacity:1}.fever-on .power.ready{border-color:#ffd577}.fever-on #board::before{background:linear-gradient(to right,#fff2ae var(--fever-progress,0%),#624164 var(--fever-progress,0%));height:5px}@keyframes feverSweep{from{transform:translateX(-38%)}to{transform:translateX(38%)}}@keyframes feverSpark{0%{opacity:0;transform:translateY(0) rotate(-15deg)}18%{opacity:.75}100%{opacity:0;transform:translateY(-180px) rotate(45deg)}}@keyframes feverEntrance{0%{opacity:0;transform:scale(.6) rotate(-5deg)}25%{opacity:1;transform:scale(1.07) rotate(-2deg)}65%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.1)}}@media(prefers-reduced-motion:reduce){.fever-sweep,.fever-spark{animation:none!important;display:none}#feverIntro.enter{animation:none!important;opacity:1}main::before{transition:none}}
/* Glittering fever perimeter: fixed particles, no per-frame script work. */
.fever-glitter{position:absolute;inset:0;pointer-events:none}.fever-star{position:absolute;left:var(--sx);top:var(--sy);font-size:var(--ss);line-height:1;color:#fff3a0;text-shadow:0 0 5px #ffd76d,0 0 10px #ffb54480;opacity:0;animation:feverTwinkle var(--st) ease-in-out infinite;animation-delay:var(--sd);animation-play-state:paused}.fever-star:nth-child(3n){color:#ffd4f4;text-shadow:0 0 5px #ffb6ee,0 0 10px #e874da80}.fever-star:nth-child(4n){color:#dcffff;text-shadow:0 0 5px #afffff}.fever-star:nth-child(n+17){font-size:12px;text-shadow:none}.fever-on:not(.fever-paused) .fever-star{animation-play-state:running}.fever-on #board{border-color:#fff1b6;box-shadow:0 0 0 2px #ffdc7766,0 0 16px #f9c05260,0 0 28px #d866c135}.fever-on .fever-spark{height:6px;width:6px;background:#fff0a3;box-shadow:0 0 6px #ffdb6790}.fever-on .fever-spark:nth-child(even){height:4px;width:4px;background:#ffc1f0;box-shadow:0 0 6px #ffade390}.fever-on .fever-sweep{background:linear-gradient(110deg,transparent 43%,#ffe5a112 47%,#fff7d234 50%,#f5b6f21c 52%,transparent 57%)}.fever-on .mission-hud #feverText::after{content:' ✦';color:#fff0ac}.fever-on #feverIntro strong{color:#fff4ba;text-shadow:3px 3px 0 #a44380,0 0 14px #ffc565,0 0 24px #ffb05165}@keyframes feverTwinkle{0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-25deg)}35%{opacity:.95;transform:translate(-50%,-50%) scale(1.12) rotate(0deg)}65%{opacity:.55;transform:translate(-50%,-65%) scale(.7) rotate(25deg)}}@media(prefers-reduced-motion:reduce){.fever-star{animation:none!important;opacity:.6;transform:translate(-50%,-50%)}.fever-star:nth-child(n+9){display:none}}

/* Star blocks and non-blocking power effects */
.star-cell::after,.star-mini::after{content:'★';position:absolute;inset:0;display:grid;place-items:center;color:white;text-shadow:0 0 5px #f9c52d;font-size:clamp(12px,4vw,24px);pointer-events:none}.mini{position:relative}.star-mini::after{font-size:12px}
.power-fx{position:absolute;inset:0;pointer-events:none;z-index:8;overflow:hidden;border-radius:16px}
.fx-cross::before,.fx-cross::after{content:'';position:absolute;background:#fff;box-shadow:0 0 14px 8px #5fe6ff;animation:laser-shot .55s ease-out forwards}.fx-cross::before{left:0;right:0;top:var(--fx-y);height:5px}.fx-cross::after{top:0;bottom:0;left:var(--fx-x);width:5px}
.fx-bomb::after,.fx-mega::after{content:'';position:absolute;left:var(--fx-x);top:var(--fx-y);width:30px;height:30px;border:4px solid #ffd679;border-radius:50%;box-shadow:0 0 15px #ff9e38;animation:bomb-ring .6s ease-out forwards}.fx-mega::after{width:55px;height:55px;border-color:#ff91dd}
.fx-nova{background:radial-gradient(circle,#fff8d0aa,transparent 70%);animation:nova-wave .6s ease-out forwards}.fx-color{box-shadow:inset 0 0 35px #cd8bff;animation:laser-shot .6s forwards}
@keyframes laser-shot{0%{opacity:0}20%{opacity:1}100%{opacity:0}}@keyframes bomb-ring{from{transform:translate(-50%,-50%) scale(.2);opacity:1}to{transform:translate(-50%,-50%) scale(7);opacity:0}}@keyframes nova-wave{from{transform:scale(.25);opacity:1}to{transform:scale(1.5);opacity:0}}
.rank-tabs{display:flex;gap:8px}.rank-tabs button{flex:1;font-size:14px}#rankList{padding-left:30px;max-height:38dvh;overflow:auto;text-align:left}#rankList li{padding:12px 8px;border-bottom:1px solid #ffffff18}#rankList li strong{float:right;font-variant-numeric:tabular-nums}#rankList li span{display:inline-block;max-width:65%;overflow-wrap:anywhere}.rank-mine{background:#62d8c51a;color:#62d8c5}#rankName{width:100%;box-sizing:border-box;padding:12px;border:1px solid #657197;background:#11172b;color:white;border-radius:10px;font-size:16px}#rankForm label{display:block;margin:12px 0 8px;text-align:left;font-size:14px}.rank-caption,#rankForm p{font-size:12px}#dialog{max-height:90dvh;overflow:auto}.game-actions{gap:4px}
/* Three selected powers give the board more vertical space. Existing games keep six until restarted. */
.powers .power[hidden]{display:none!important}
main:has(.compact-three){grid-template-rows:36px 42px 36px minmax(0,1fr) 64px 32px 84px}
.powers.compact-three{grid-template-rows:1fr;gap:8px}
.powers.compact-three .power{min-height:0;padding:5px 2px}
.powers.compact-three .power b{font-size:14px}
.powers.compact-three .power-desc{font-size:12px;letter-spacing:-.3px}
.loadout-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
dialog .loadout-choices button{min-width:0;margin:0;padding:10px 7px;min-height:65px;text-align:left;background:#24314a;border:1px solid #51617d;color:#d6e1f1}
.loadout-choices button strong,.loadout-choices button span{display:block;line-height:1.35}
.loadout-choices button strong{font-size:13px}.loadout-choices button span{font-size:12px;color:#adbed4;margin-top:3px}
dialog .loadout-choices button.selected{border-color:#75e9d0;background:#244b55;color:white;box-shadow:inset 0 0 0 1px #75e9d0}
dialog .loadout-choices button.selected::before{content:'✓ ';color:#75e9d0}
dialog .loadout-count{font-size:13px;text-align:right;margin:7px 0}
dialog button:disabled{opacity:.45;cursor:not-allowed}
.result-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.result-stats span{padding:8px;border:1px solid #465773;border-radius:9px;font-size:12px;color:#c0d0e2}.result-stats strong{display:block;font-size:19px;color:#f5d685;margin-top:2px}
@media(max-height:580px) and (orientation:portrait){main:has(.compact-three){grid-template-rows:34px 42px 34px minmax(0,1fr) 56px 28px 76px;gap:4px}}
@media(orientation:landscape) and (max-height:540px){main:has(.compact-three){grid-template-rows:36px 42px 34px minmax(52px,1fr) 28px 84px}}
dialog .daily-start{background:#f6d787;color:#2d2440;line-height:1.25}dialog .daily-start small{font-size:12px;font-weight:600}
.rank-tabs button{min-width:0;padding:9px 4px}.rank-day{text-align:center;font-size:13px!important;color:#f6d787!important;margin:9px 0}
.rank-data{border-top:1px solid #ffffff27;margin-top:12px;padding:12px 0;text-align:left}.rank-data summary{cursor:pointer;font-size:14px;color:#cbd9ed;min-height:28px}.rank-data p{font-size:13px;line-height:1.6;margin:8px 0}.rank-data button{font-size:13px;min-height:44px}

/* Compact stage selector, separate from the play surface. */
dialog .stage-start{background:#8ab8ff;color:#152743}.stage-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.stage-choices button{min-width:0;margin:0;padding:10px 5px;text-align:left;font-size:13px;background:#263d59;color:#f4f7ff}.stage-choices button:disabled{opacity:.42}.mission-hud strong{overflow:hidden;text-overflow:ellipsis}@media(max-width:370px){.mission-hud strong{font-size:12px;letter-spacing:-.4px}}

.stage-mode .mission-hud span{white-space:normal;line-height:14px;color:#f7d88f}.stage-mode .mission-hud strong{font-size:12px}
main.stage-mode{grid-template-rows:48px 42px 36px minmax(0,1fr) 64px 32px 126px}.stage-mode .mission-hud span{white-space:normal;line-height:13px;overflow-wrap:anywhere}.stage-mode header{align-items:center}@media(max-height:580px) and (orientation:portrait){main.stage-mode{grid-template-rows:48px 42px 34px minmax(0,1fr) 56px 28px 120px}}@media(orientation:landscape) and (max-height:540px){main.stage-mode{grid-template-rows:48px 42px 34px minmax(52px,1fr) 28px 126px}}
.stage-pages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:10px 0}.stage-pages button{margin:0;padding:8px 1px;font-size:12px;background:#263d59;color:#d3e2fa}.stage-pages button.selected{background:#8ab8ff;color:#142740}.stage-choices{max-height:min(48vh,510px);overflow-y:auto;overscroll-behavior:contain;padding:2px 3px 10px}.stage-choices button{min-height:49px}
.stage-hint-box{padding:12px 14px;margin:12px 0;border:1px solid #58718c;border-radius:13px;background:#253651}.stage-hint-box strong{font-size:15px;color:#f5d685}.stage-hint-box p{font-size:14px;line-height:1.6;margin:7px 0}.stage-hint-box button[hidden]{display:none}
.stage-mode .cell.hint-shape,.stage-mode .cell.hint-shape.preview{opacity:1;background:color-mix(in srgb,var(--hint-color) 52%,#15263e);border:2px solid transparent;box-shadow:none;filter:drop-shadow(0 0 3px #f5d57c77);animation:hintOutlinePulse 1.5s ease-in-out infinite}
.stage-mode .cell.hint-edge-top{border-top-color:#fff0a9}.stage-mode .cell.hint-edge-right{border-right-color:#fff0a9}.stage-mode .cell.hint-edge-bottom{border-bottom-color:#fff0a9}.stage-mode .cell.hint-edge-left{border-left-color:#fff0a9}
.stage-mode .piece.hint-piece{border:2px solid #fff0a9;background:#36434f;box-shadow:0 0 0 2px #ffe57955}.stage-hint-box p{margin-bottom:4px}
@keyframes hintOutlinePulse{0%,100%{background:color-mix(in srgb,var(--hint-color) 42%,#15263e);filter:drop-shadow(0 0 2px #f5d57c55)}50%{background:color-mix(in srgb,var(--hint-color) 66%,#15263e);filter:drop-shadow(0 0 6px #f5d57cbb)}}@media(prefers-reduced-motion:reduce){.stage-mode .cell.hint-shape,.stage-mode .cell.hint-shape.preview{animation:none}}
#saveGame{flex:none;min-width:58px;height:100%;border:1px solid #8ab8ff;border-radius:9px;background:#213650;color:#d6e8ff;font:inherit;font-size:13px;padding:0 6px}#saveGame:disabled{opacity:.4}.hint-row #undo{min-width:64px;padding:0 6px}
main.stage-mode:not(.stage-power){grid-template-rows:48px 42px 0 minmax(0,1fr) 64px 34px 42px}.stage-mode:not(.stage-power) .charge,.stage-mode:not(.stage-power) #powers{display:none}.stage-mode.stage-power .powers{grid-template-columns:1fr}.stage-mode.stage-power #powerBomb{min-height:80px}
.stage-list-button[hidden]{display:none!important}.stage-mode .stage-list-button{display:block;grid-row:7;width:100%;height:100%;border:1px solid #8ab8ff;border-radius:10px;background:#203c5b;color:#e3eeff;font-size:14px;font-weight:700}.stage-mode.stage-power{grid-template-rows:48px 42px 36px minmax(0,1fr) 64px 34px 102px 40px}.stage-mode.stage-power .stage-list-button{grid-row:8}.stage-mode #board{width:calc(var(--board-size,100%) * .92);height:calc(var(--board-size,100%) * .92)}
@media(max-height:580px) and (orientation:portrait){main.stage-mode:not(.stage-power){grid-template-rows:48px 42px 0 minmax(0,1fr) 56px 34px 38px}main.stage-mode.stage-power{grid-template-rows:48px 42px 34px minmax(0,1fr) 56px 28px 100px 36px}}@media(orientation:landscape) and (max-height:540px){main.stage-mode:not(.stage-power){grid-template-rows:48px 42px 0 minmax(52px,1fr) 28px 34px 40px}main.stage-mode.stage-power{grid-template-rows:48px 42px 34px minmax(52px,1fr) 28px 34px 100px 36px}.stage-mode .stage-list-button{grid-column:2}main.stage-mode.stage-power .stage-list-button{grid-row:8}}
dialog:has(#stageChoices){padding:16px 18px;max-height:calc(var(--app-height,100dvh) - 16px)}dialog:has(#stageChoices) h2{font-size:21px;margin:0 0 5px}dialog:has(#stageChoices) p{font-size:13px;line-height:1.35;margin:4px 0 7px}.stage-pages{grid-template-columns:56px 1fr 56px;align-items:center;gap:7px;margin:7px 0}.stage-pages span{text-align:center;font-size:15px;font-weight:750;color:#dceaff}.stage-pages button{min-height:38px;font-size:13px;padding:4px}.stage-choices{max-height:none;overflow:visible;gap:5px;padding:0}.stage-choices button{min-height:43px;padding:6px 5px;font-size:12px;line-height:1.2}dialog:has(#stageChoices)>#dialogContent>button{min-height:40px;margin-top:7px;padding:8px}
/* Jewel finish: bright facets without washing out the empty cells or hint outlines. */
.cell.filled,.mini.filled{position:relative;isolation:isolate;background:linear-gradient(145deg,#ffffffbd 0%,#ffffff3a 8%,transparent 22%,transparent 60%,#020b2380 100%),radial-gradient(ellipse at 26% 18%,#ffffff79 0%,#ffffff1c 27%,transparent 54%),linear-gradient(32deg,transparent 36%,#ffffff54 49%,transparent 61%),var(--c);border:1px solid color-mix(in srgb,var(--c) 48%,white);box-shadow:inset 0 2px 1px #ffffffe0,inset 2px 0 2px #ffffff70,inset -2px -3px 3px #04122db3,0 1px 3px #020819bb,0 0 7px color-mix(in srgb,var(--c) 52%,transparent)}
.cell.filled::before,.mini.filled::before{content:'';position:absolute;inset:2px;border-radius:2px;pointer-events:none;clip-path:polygon(0 0,76% 0,49% 31%,29% 52%,0 72%);background:linear-gradient(135deg,#ffffffe0,#ffffff24 64%,transparent 90%);opacity:.62}
.cell.filled::after,.mini.filled::after{content:'';position:absolute;top:6%;left:8%;width:32%;height:32%;pointer-events:none;background:radial-gradient(circle at 35% 35%,#fff 0 8%,#ffffffd5 17%,#ffffff3d 36%,transparent 70%);filter:drop-shadow(0 0 3px #ffffffc7);opacity:1}
.mini.filled::before{inset:1px}.mini.filled::after{width:30%;height:30%}
.cell.star-cell.filled::after,.mini.star-mini.filled::after{content:'★';inset:0;width:auto;height:auto;display:grid;place-items:center;background:none;filter:none;opacity:1;color:#fff6c4;text-shadow:0 0 3px #fff,0 0 9px #ffe274;font-size:clamp(12px,4vw,24px)}.mini.star-mini.filled::after{font-size:12px}
.stage-mode .cell.hint-shape.filled::after{opacity:.55}
.gem-break-flash,.gem-shard{position:absolute;inset:1px;border-radius:3px;pointer-events:none;z-index:4;transform-origin:center;will-change:transform,opacity}
.gem-break-flash{background:radial-gradient(circle at 44% 35%,#fff 0%,color-mix(in srgb,var(--shard-color) 55%,white) 42%,transparent 77%);animation:gemCrack .2s ease-out both}
.gem-shard{background:linear-gradient(135deg,#ffffffeb 0%,color-mix(in srgb,var(--shard-color) 55%,white) 21%,var(--shard-color) 60%,#08142e 100%);box-shadow:inset 0 0 2px #fff,0 0 7px var(--shard-color);animation:gemShatter .5s cubic-bezier(.18,.7,.25,1) both}
.gem-shard.shard-0{clip-path:polygon(0 0,60% 0,45% 40%,0 68%)}.gem-shard.shard-1{clip-path:polygon(60% 0,100% 0,100% 70%,45% 40%)}.gem-shard.shard-2{clip-path:polygon(0 68%,45% 40%,100% 70%,100% 100%,0 100%)}
@keyframes gemCrack{0%{opacity:.8;transform:scale(.94)}100%{opacity:0;transform:scale(1.17)}}
@keyframes gemShatter{0%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}18%{opacity:1;transform:translate(0,0) rotate(0) scale(1.1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.43)}}
.line-clear-beam{position:absolute;pointer-events:none;z-index:6;overflow:visible;filter:drop-shadow(0 0 8px #79e9ff)}.line-clear-beam::before{content:'';position:absolute;border-radius:99px;background:linear-gradient(90deg,transparent,#9df5ff 18%,#fff 50%,#9df5ff 82%,transparent)}.line-clear-beam.horizontal::before{left:0;right:0;top:50%;height:8px;margin-top:-4px;animation:lineBeamX .55s ease-out both}.line-clear-beam.vertical::before{top:0;bottom:0;left:50%;width:8px;margin-left:-4px;background:linear-gradient(180deg,transparent,#9df5ff 18%,#fff 50%,#9df5ff 82%,transparent);animation:lineBeamY .55s ease-out both}.line-clear-beam.hot{filter:drop-shadow(0 0 12px #ffd976)}.line-clear-beam.hot::before{background:linear-gradient(90deg,transparent,#ffe49b 18%,#fff 50%,#ffe49b 82%,transparent)}.line-clear-beam.hot.vertical::before{background:linear-gradient(180deg,transparent,#ffe49b 18%,#fff 50%,#ffe49b 82%,transparent)}
@keyframes lineBeamX{0%{opacity:0;transform:scaleX(.05)}30%{opacity:1;transform:scaleX(1)}60%{opacity:.9;transform:scaleX(1.05)}100%{opacity:0;transform:scaleX(1.12)}}@keyframes lineBeamY{0%{opacity:0;transform:scaleY(.05)}30%{opacity:1;transform:scaleY(1)}60%{opacity:.9;transform:scaleY(1.05)}100%{opacity:0;transform:scaleY(1.12)}}
.stage-mode .power.hint-power{outline:2px solid #fff5b4;outline-offset:2px;box-shadow:0 0 0 5px #fbd66f44,0 0 18px #ffe99188;animation:hintPowerPulse 1.5s ease-in-out infinite}
@keyframes hintPowerPulse{50%{box-shadow:0 0 0 6px #fbd66f55,0 0 25px #ffe991aa}}
@media(prefers-reduced-motion:reduce){.stage-mode .power.hint-power{animation:none}.gem-break-flash,.gem-shard,.line-clear-beam{animation:none;display:none}}

/* Separate silhouette fitting mode; the existing line-clear game stays untouched. */
[hidden]{display:none!important}
#pictureSurface{position:relative;width:min(100%,460px);height:var(--app-height,100dvh);margin:auto;padding:12px 16px max(12px,env(safe-area-inset-bottom));display:grid;grid-template-rows:44px 54px minmax(0,1fr) 34px minmax(92px,136px) 40px 40px 40px;gap:6px;overflow:hidden;background:radial-gradient(ellipse at 50% 12%,#263a5a,#11172b 65%)}
#pictureSurface header{margin:0;display:flex;justify-content:space-between;align-items:center;gap:8px}#pictureSurface header strong{font-size:16px;color:#d9e9fb}#pictureSurface button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}#pictureSurface button:focus-visible{outline:3px solid white;outline-offset:2px}
#pictureBack,#pictureSelect,#pictureNext,#pictureHint,#pictureFailUndo,#pictureFailRetry,.picture-actions button{border:1px solid #6484a4;border-radius:10px;background:#203b58;color:#eaf4ff;min-height:40px;padding:5px 10px}#pictureBack{font-size:14px!important}#pictureNext{background:#62d8c5;color:#142b37;border:0;font-weight:850}
.picture-meta{display:flex;align-items:center;justify-content:space-between;gap:6px}.picture-meta h1{font-size:19px;margin:0;line-height:1.25}.picture-meta span{font-size:13px;color:#afc4dd;white-space:nowrap}
#pictureBoard{width:min(100%,44vh,390px);aspect-ratio:1;min-height:0;max-height:100%;justify-self:center;align-self:center;display:grid;grid-template-columns:repeat(8,1fr);gap:3px;padding:7px;border-radius:16px;background:#0b1326;border:1px solid #526481;box-shadow:0 12px 30px #04091666}
.picture-cell{position:relative;min-width:0;min-height:0;border:0;border-radius:5px;background:#141d31;touch-action:manipulation}.picture-cell.outside{opacity:.48}.picture-cell.target{background:#263d56;border:1px dashed #a8c5cfb0;box-shadow:inset 0 0 9px #c4e7ed15}.picture-cell.target:active{filter:brightness(1.5)}.picture-cell.placed{border:1px solid color-mix(in srgb,var(--c) 55%,white);background:linear-gradient(140deg,#ffffff8a,transparent 42%,#06193677 90%),var(--c);box-shadow:inset 0 2px 1px #ffffff94,0 0 5px color-mix(in srgb,var(--c) 45%,transparent)}.picture-cell.placed::after{content:'';position:absolute;left:10%;top:8%;width:23%;height:23%;background:radial-gradient(circle,#fff,transparent 70%);pointer-events:none}
#pictureStatus{margin:0;text-align:center;font-size:13px;line-height:1.3;color:#f5d685;align-self:center;overflow:hidden}
#pictureTray{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:5px;overflow:auto;align-content:start}.picture-piece{min-width:0;border:1px solid #516783;border-radius:10px;background:#1c304b;display:grid;place-items:center;padding:4px;touch-action:manipulation}.picture-piece.selected{border:2px solid #ffde84;background:#334d62;box-shadow:0 0 0 2px #ffde8444}.picture-piece.used{opacity:.35}.picture-shape{display:grid;gap:2px}.picture-shape i{display:block;width:clamp(8px,2.5vw,15px);height:clamp(8px,2.5vw,15px);border-radius:2px}.picture-shape i.on{background:linear-gradient(140deg,#ffffff8d,transparent 48%),var(--c);border:1px solid #ffffff75;box-shadow:0 0 3px var(--c)}
.picture-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.picture-actions button{font-size:13px;min-width:0;padding:4px}.picture-actions button:disabled{opacity:.35}#pictureSelect,#pictureNext,#pictureHint{width:100%;font-size:14px}#pictureHint{background:#51415f;border-color:#d5af74;color:#fff0cd;font-weight:750}#pictureHint:disabled{opacity:.5}#pictureChoices{position:absolute;z-index:12;inset:58px 12px 10px;border:1px solid #6d85a4;border-radius:14px;background:#13233bf5;padding:14px;overflow:auto;display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:56px;gap:9px;align-content:start;box-shadow:0 18px 65px #000a}#pictureChoices button{border:1px solid #6e8da9;border-radius:10px;background:#26405e;color:#fff;font-size:14px}#pictureChoices button:disabled{opacity:.45}.picture-complete #pictureBoard{animation:pictureCelebrate .65s ease-out}@keyframes pictureCelebrate{40%{box-shadow:0 0 30px #fbd570,0 12px 30px #04091666;transform:scale(1.025)}}
@media(max-height:680px){#pictureSurface{grid-template-rows:38px 42px minmax(0,1fr) 28px minmax(76px,110px) 34px 36px 36px;gap:4px}.picture-meta h1{font-size:16px}#pictureBoard{width:min(100%,39vh,360px)}.picture-shape i{width:11px;height:11px}}
@media(orientation:landscape) and (max-height:540px){#pictureSurface{width:100%;max-width:850px;grid-template-columns:minmax(220px,1fr) minmax(200px,1fr);grid-template-rows:36px 36px minmax(0,1fr) 32px 32px 32px;gap:4px 14px}#pictureSurface header{grid-column:1/3}.picture-meta{grid-column:2;grid-row:2}#pictureBoardWrap{grid-column:1;grid-row:2/7}#pictureStatus{grid-column:2;grid-row:3;align-self:start}#pictureTray{grid-column:2;grid-row:3;align-self:end;max-height:75%}.picture-actions{grid-column:2;grid-row:4}#pictureNext{grid-column:2;grid-row:5}#pictureSelect{grid-column:2;grid-row:6}}
@media(prefers-reduced-motion:reduce){.picture-complete #pictureBoard{animation:none}}

.picture-piece{touch-action:none;user-select:none}.picture-drag-ghost{position:fixed;left:0;top:0;z-index:50;pointer-events:none;display:none;opacity:.94;will-change:transform}.picture-drag-ghost .picture-shape{gap:var(--gap)!important}.picture-drag-ghost .picture-shape i{width:var(--size);height:var(--size);border-radius:5px}.picture-drag-ghost .picture-shape i.on{box-shadow:inset 0 2px 1px #ffffff94,0 0 10px var(--c)}.picture-cell.preview-ok{background:#60deba99;box-shadow:inset 0 0 0 2px #c4ffec,0 0 10px #70ffcc}.picture-cell.preview-no{background:#e35d7380}.picture-cell.hint-cell:not(.placed){background:#e8b96d7d;border:2px solid #ffe6a6;box-shadow:inset 0 0 10px #fff0aa88,0 0 8px #f5cb81;animation:pictureHintPulse 1.7s ease-in-out infinite}.picture-piece.hint-piece{border:2px solid #ffe09b;box-shadow:0 0 12px #f9ca73;animation:pictureHintPulse 1.7s ease-in-out infinite}@keyframes pictureHintPulse{50%{filter:brightness(1.35)}}

#pictureBoardWrap{container-type:size;display:grid;place-items:center;min-width:0;min-height:0}#pictureBoard{width:min(100cqw,100cqh,390px);height:min(100cqw,100cqh,390px);max-height:none;aspect-ratio:1}

#pictureFail{position:absolute;z-index:20;inset:0;display:grid;place-items:center;padding:18px;background:#061122c9;backdrop-filter:blur(4px)}.picture-fail-card{width:min(100%,350px);padding:22px;border:1px solid #7d97ad;border-radius:18px;background:#20334d;box-shadow:0 20px 50px #0009;text-align:center}.picture-fail-card h2{margin:0 0 10px;font-size:23px}.picture-fail-card p{line-height:1.6;color:#dfebfa;font-size:14px}.picture-fail-card button{display:block;width:100%;min-height:46px;margin-top:10px}#pictureFailUndo,#pictureFailRetry{background:#243c59}
.picture-drag-ghost .picture-shape i.on{background:linear-gradient(145deg,#ffffffd9 0%,#ffffff38 10%,transparent 38%,#06122f85 100%),radial-gradient(circle at 25% 18%,#ffffffa8,transparent 48%),var(--c);border:2px solid #ffffffe0;box-shadow:inset 0 3px 2px #ffffffb5,inset -2px -3px 3px #0915299c,0 0 10px var(--c),0 0 3px #fff}

.picture-cell.hint-cell:not(.placed){background:color-mix(in srgb,var(--hint-color) 52%,#15263e);border:2px solid transparent;box-shadow:none;filter:drop-shadow(0 0 3px #f5d57c77);animation:hintOutlinePulse 1.5s ease-in-out infinite}.picture-cell.hint-edge-top:not(.placed){border-top-color:#fff0a9}.picture-cell.hint-edge-right:not(.placed){border-right-color:#fff0a9}.picture-cell.hint-edge-bottom:not(.placed){border-bottom-color:#fff0a9}.picture-cell.hint-edge-left:not(.placed){border-left-color:#fff0a9}@media(prefers-reduced-motion:reduce){.picture-cell.hint-cell:not(.placed),.picture-piece.hint-piece{animation:none}}

/* Cut stone facets and a darker lower rim give both modes the same depth. */
.cell.filled,.mini.filled,.picture-cell.placed,.picture-shape i.on{background:linear-gradient(154deg,#ffffffec 0%,#ffffff65 7%,#ffffff13 24%,transparent 44%,#07132d55 75%,#020918b0 100%),radial-gradient(ellipse at 24% 16%,#ffffffb8 0%,#ffffff2e 31%,transparent 54%),linear-gradient(35deg,#050c1a44 0%,transparent 32%,#ffffff38 52%,transparent 65%),var(--c);border:1px solid color-mix(in srgb,var(--c) 38%,white);box-shadow:inset 0 3px 2px #ffffffe8,inset 3px 1px 2px #ffffff8a,inset -3px -4px 3px #05112bd1,0 3px 0 #071127,0 5px 5px #020713a8,0 0 7px color-mix(in srgb,var(--c) 56%,transparent)}
.picture-cell.placed::before,.picture-shape i.on::before{content:'';position:absolute;inset:2px;border-radius:2px;pointer-events:none;clip-path:polygon(0 0,77% 0,52% 29%,28% 54%,0 74%);background:linear-gradient(135deg,#ffffffe8,#ffffff22 70%,transparent);opacity:.7}.picture-shape i.on{position:relative;isolation:isolate}.picture-shape i.on::after{content:'';position:absolute;left:7%;top:5%;width:30%;height:30%;border-radius:50%;background:radial-gradient(circle,#fff,#ffffff7a 36%,transparent 70%);pointer-events:none}
.picture-drag-ghost .picture-shape i.on{border:2px solid #ffffffe9;box-shadow:inset 0 3px 2px #fff,inset -3px -4px 3px #05112bd1,0 3px 0 #071127,0 0 12px var(--c),0 0 4px white}

#pictureChoices{grid-template-rows:40px repeat(4,minmax(42px,1fr)) 42px;grid-auto-rows:auto;align-content:stretch;overflow:hidden}.picture-pages{grid-column:1/3;display:grid;grid-template-columns:58px 1fr 58px;gap:6px;align-items:center;text-align:center;font-size:14px;font-weight:750}.picture-pages button{height:38px}.picture-close-choice{grid-column:1/3;height:42px}

/* Selection screens: compact jewel cards with the next playable step in focus. */
dialog:has(.choice-hero){width:min(94vw,430px);padding:18px;max-height:calc(var(--app-height,100dvh) - 24px);background:radial-gradient(circle at 86% -4%,#45799c57,transparent 38%),linear-gradient(160deg,#223655,#111c33 75%);border-color:#759bb8;box-shadow:0 25px 95px #020816db,0 0 34px #6bcfca1e}
.choice-hero{position:relative;margin:-2px -2px 12px;padding:12px 14px 14px;border:1px solid #7cd2d967;border-radius:16px;background:radial-gradient(circle at 86% 8%,#b8f5da3a,transparent 35%),linear-gradient(130deg,#2d5270,#1d304d 70%);overflow:hidden}
.choice-hero::after{content:'✦';position:absolute;right:16px;top:11px;color:#ffe8a2;font-size:34px;text-shadow:0 0 18px #ffe8a2a0;pointer-events:none}
.choice-eyebrow{display:block;font-size:11px;font-weight:850;letter-spacing:2px;color:#a6f6e8}
dialog .choice-hero h2{position:relative;margin:3px 42px 2px 0;font-size:23px;line-height:1.25;color:#fff}
dialog .choice-hero p{margin:2px 35px 0 0;font-size:13px;color:#d5e8f4;line-height:1.35}
.choice-progress{height:6px;margin-top:12px;background:#0b1b32;border-radius:99px;overflow:hidden;border:1px solid #ffffff22}.choice-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#68dfd2,#f8db8b);box-shadow:0 0 10px #a2f7df}
dialog .choice-warning{border-left:3px solid #f4d48c;padding:5px 9px;margin:0 0 7px;background:#f5d88912;color:#fae7ba;font-size:12px;line-height:1.35}
dialog:has(#stageChoices) .stage-pages{margin:8px 0}.stage-pages button,.picture-pages button{border:1px solid #7ca4ba;background:#294867;color:#e9f6ff;border-radius:9px;font-weight:750}.stage-pages button:disabled,.picture-pages button:disabled{opacity:.4}.stage-pages span,.picture-pages span{color:#f7e0a3;font-variant-numeric:tabular-nums}
dialog:has(#stageChoices) .stage-choices{gap:7px}
dialog:has(#stageChoices) .stage-card{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:auto auto;gap:1px 6px;align-content:center;min-height:72px;padding:8px;border:1px solid #6786a4;border-radius:13px;background:linear-gradient(135deg,#2b4967,#1e304b);color:#edf7ff;text-align:left;box-shadow:inset 0 1px 0 #ffffff22,0 4px 10px #07102155;transition:transform .16s,border-color .16s,box-shadow .16s}
.stage-card-num{grid-column:1;grid-row:1/3;align-self:center;font-size:20px;font-weight:950;color:#a1d5e6;letter-spacing:-1px;font-variant-numeric:tabular-nums}.stage-card-info{grid-column:2;min-width:0}.stage-card-info strong{display:block;font-size:14px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stage-card-info small{display:block;font-size:11px;color:#a9bfd1;margin-top:2px}.stage-card-state{grid-column:2;font-size:11px;font-weight:800;color:#ffdc8b;white-space:nowrap}
dialog .stage-card.completed{border-color:#6acdb38c;background:linear-gradient(135deg,#275a61,#1d344c)}.stage-card.completed .stage-card-state{color:#ffe59b;letter-spacing:1px}.stage-card.next,.stage-card.current{border-color:#ffe0a0;background:radial-gradient(circle at 80% 0%,#efcf8560,transparent 60%),linear-gradient(135deg,#49636d,#2e415c);box-shadow:inset 0 1px 0 #ffffff80,0 0 0 1px #e8cb7c7a,0 0 19px #f3d6826b;animation:choiceGlow 2.4s ease-in-out infinite}.stage-card.next .stage-card-num,.stage-card.current .stage-card-num{color:#ffe8ac}.stage-card.locked{opacity:.64;filter:saturate(.45)}.stage-card:enabled:active,.picture-card:enabled:active,.mode-tile:active{transform:scale(.97)}
dialog .mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:8px}dialog .mode-tile{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;min-height:86px;margin:0;padding:9px 11px;text-align:left;color:#eff9ff;border:1px solid #79a6bd;border-radius:13px;background:linear-gradient(135deg,#2b4b68,#1e314e);box-shadow:inset 0 1px 0 #ffffff48,0 5px 12px #06112777;transition:transform .16s}.mode-tile .mode-icon{font-size:25px;line-height:1;color:#ffe4a1;text-shadow:0 0 10px #ffdf9380}.mode-tile strong{font-size:15px;line-height:1.2;margin:4px 0 2px}.mode-tile small{font-size:11px;line-height:1.2;color:#cee1ec}.mode-grid .stage-start{background:linear-gradient(140deg,#416c7d,#23465b);border-color:#a4efdd}.mode-grid .picture-start{background:linear-gradient(140deg,#645576,#33405d);border-color:#d1b5f0}.mode-grid .timed-start{background:linear-gradient(140deg,#69516a,#3b375c);border-color:#d9b9da}dialog .mode-daily{margin:0 0 10px;padding:8px 12px;min-height:48px;text-align:left;background:#344965;color:#fff;border:1px solid #7992b1;border-radius:11px;font-size:14px}dialog .mode-daily small{color:#cddbe8;font-weight:500;font-size:11px}.loadout-heading{font-size:13px;color:#e7d5a1;font-weight:750;margin:8px 0 6px}dialog:has(.mode-grid) .loadout-choices{gap:6px}dialog:has(.mode-grid) .loadout-choices button{min-height:48px;padding:6px 8px;border-radius:9px}dialog:has(.mode-grid) .loadout-choices button strong{font-size:12px}dialog:has(.mode-grid) .loadout-choices button span{font-size:11px;margin-top:1px}dialog:has(.mode-grid) .loadout-count{margin:3px 0 7px}dialog:has(.mode-grid)>#dialogContent>.secondary{min-height:40px;padding:8px;margin-top:7px}
#pictureChoices{inset:58px 10px 8px;padding:11px;gap:7px;background:radial-gradient(circle at 50% 0%,#335477,#13223a 68%);border-color:#8eb4ce;box-shadow:0 18px 65px #030917d9;grid-template-rows:38px repeat(4,minmax(62px,1fr)) 40px;overflow-y:auto}
#pictureChoices .picture-pages{gap:5px}.picture-pages span{font-size:13px;white-space:nowrap}.picture-pages button{height:36px;font-size:13px}
#pictureChoices .picture-card{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;min-width:0;min-height:0;padding:5px 3px;border:1px solid #698eaa;border-radius:13px;background:radial-gradient(circle at 50% 0%,#47708b66,transparent 65%),linear-gradient(160deg,#27425f,#1b304d);box-shadow:inset 0 1px 0 #ffffff3a,0 4px 10px #07102288;color:#effaff;transition:transform .16s}
.picture-card-icon{font-size:clamp(21px,4vh,32px);line-height:1.1;filter:drop-shadow(0 2px 6px #8be6e473)}.picture-card-info{display:flex;flex-direction:column;align-items:center;max-width:100%;line-height:1.15}.picture-card-info strong{font-size:14px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.picture-card-info small{font-size:11px;color:#b9cee1;margin-top:2px}.picture-card-state{font-size:11px;font-weight:800;color:#ffe0a2;line-height:1.15}
#pictureChoices .picture-card.completed{border-color:#71d5bc;background:linear-gradient(160deg,#2a5c64,#22354d)}#pictureChoices .picture-card.current{border-color:#ffe2a0;box-shadow:inset 0 1px 0 #ffffff8c,0 0 0 1px #ffe2a078,0 0 18px #ffd67d82;animation:choiceGlow 2.4s ease-in-out infinite}#pictureChoices .picture-card.locked{opacity:.55;filter:saturate(.45)}#pictureChoices .picture-close-choice{border-color:#9fcbd0;background:#274758;color:#ecfbff;font-weight:750;min-height:0}
@keyframes choiceGlow{50%{box-shadow:inset 0 1px 0 #ffffff8c,0 0 0 1px #ffe2a0,0 0 23px #ffdf95ad}}
@media(max-height:640px){dialog:has(.choice-hero){padding:12px}.choice-hero{padding:8px 11px;margin-bottom:7px}dialog .choice-hero h2{font-size:20px}.choice-progress{margin-top:7px}dialog:has(#stageChoices) .stage-card{min-height:58px;padding:5px 7px}.stage-card-info strong{font-size:12px}.stage-card-num{font-size:18px}dialog .mode-tile{min-height:69px;padding:6px 9px}.mode-tile .mode-icon{font-size:19px}#pictureChoices{gap:4px;padding:7px;grid-template-rows:36px repeat(4,minmax(54px,1fr)) 36px}.picture-card-icon{font-size:21px}.picture-card-info strong{font-size:12px}.picture-card-info small,.picture-card-state{font-size:10px}}
@media(prefers-reduced-motion:reduce){.stage-card.next,.stage-card.current,#pictureChoices .picture-card.current{animation:none}}

/* Keep longer Japanese stage names readable on narrow phones. */
.stage-card-info strong{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;line-height:1.18}
/* Make progress and return controls legible while playing. */
.stage-mode .mission-hud strong{font-size:14px;color:#f7fbff;text-shadow:0 0 8px #80d6ed44}.stage-mode .mission-hud span{font-size:12px;color:#ffdf9c;font-weight:750}.stage-mode .stage-list-button{background:linear-gradient(110deg,#294f6e,#23375a);border-color:#9dc6db;box-shadow:inset 0 1px 0 #ffffff49,0 0 10px #72cbd529}.stage-mode .stage-list-button:active{background:#456b86}
.picture-meta h1{color:#f9fbff;text-shadow:0 0 10px #a4ceff53}.picture-meta #pictureCount{padding:5px 8px;border:1px solid #8cb0c6;border-radius:99px;background:#2c4564;color:#ffe3a5;font-weight:800;font-variant-numeric:tabular-nums}#pictureSelect{background:linear-gradient(105deg,#315774,#344369);border-color:#a0c4d4;color:#f5faff;font-weight:750;box-shadow:inset 0 1px 0 #ffffff44}
@media(max-width:370px){.stage-mode .mission-hud strong{font-size:12px}.picture-meta #pictureCount{font-size:11px;padding:4px 6px}}

.picture-cell.placed{touch-action:none;user-select:none}.picture-cell.placed.drag-origin{opacity:.3;filter:saturate(.5)}.picture-cell.drag-origin.preview-ok{opacity:.45}
/* The selected fill power uses the second row without shrinking the board. */
.powers.compact-three:has(#powerFill:not([hidden])){grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
.powers #powerFill{grid-column:1/-1;flex-direction:row;gap:12px;background:linear-gradient(115deg,#26385d,#4c356b);border-color:#9177bf}
.powers #powerFill .power-icon{display:block;font-size:20px;color:#ffdf9e}
.powers #powerFill .power-desc{display:block!important}
.power.fill.ready{border-color:#ffe2a3;box-shadow:0 0 16px #ffc96b44}
.power.fill.ready strong{background:#ffe2a3;color:#30254c}
.fill-gem{position:absolute;inset:3px;z-index:4;pointer-events:none;border-radius:5px;background:linear-gradient(135deg,#fff9 0%,#fff3 27%,transparent 48%),linear-gradient(145deg,#fff8,var(--c) 40%,#141529);box-shadow:inset 0 1px 2px #fff,0 0 13px var(--c);opacity:0;animation:fillBoardGem 620ms var(--fill-delay) ease-in-out forwards}
@keyframes fillBoardGem{0%{opacity:0;transform:scale(.25) rotate(-18deg)}25%{opacity:1;transform:scale(1.1)}55%{opacity:1;transform:scale(1)}80%{opacity:1;filter:brightness(2.2);transform:scale(1.15)}100%{opacity:0;transform:scale(.12) rotate(28deg)}}
@media(prefers-reduced-motion:reduce){.fill-gem{animation:none;display:none}}
main:has(.compact-three):has(#powerFill:not([hidden])){grid-template-rows:36px 42px 36px minmax(0,1fr) 64px 32px 126px}
@media(max-height:580px) and (orientation:portrait){main:has(.compact-three):has(#powerFill:not([hidden])){grid-template-rows:34px 42px 34px minmax(0,1fr) 56px 28px 120px}}
@media(orientation:landscape) and (max-height:540px){main:has(.compact-three):has(#powerFill:not([hidden])){grid-template-rows:36px 42px 34px minmax(52px,1fr) 28px 126px}}
.hint-row #rotateBlock{flex:none;min-width:68px;height:100%;padding:0 7px;border:1px solid #d9bc84;border-radius:9px;background:#3c3652;color:#ffdfa4;font:inherit;font-size:13px;font-weight:750;touch-action:manipulation}
.hint-row #rotateBlock:disabled{opacity:.45}
.hint-row #rotateBlock[hidden]{display:none}
@media(max-width:370px){.hint-row #rotateBlock{min-width:58px;padding:0 4px;font-size:12px}.hint-row #undo{min-width:53px}.hint-row #saveGame{min-width:50px}}
.hint-row #moveLast{flex:none;min-width:49px;height:100%;padding:0 5px;border:1px solid #67dfc8;border-radius:9px;background:#1d4b50;color:#c7fff2;font:inherit;font-size:13px;font-weight:750;touch-action:manipulation}
.hint-row #moveLast[hidden]{display:none}
.hint-row #moveLast:disabled{opacity:.45}
#board .cell.filled.last-placed{box-shadow:inset 0 0 0 2px #d2fff2,0 0 9px #42d7bc88}
@media(max-width:370px){.hint-row{gap:4px}.hint-row #moveLast{min-width:42px;padding:0 3px;font-size:12px}}
#pictureBoard{gap:1px;background:#101c31}
#pictureBoard .picture-cell.outside{opacity:.32;background:#142137}
#pictureBoard .picture-cell.target:not(.placed){background:#31576b;border:2px solid transparent;box-shadow:inset 0 0 10px #a6e5e01f}
#pictureBoard .picture-cell.target.edge-top:not(.placed){border-top-color:transparent}
#pictureBoard .picture-cell.target.edge-right:not(.placed){border-right-color:transparent}
#pictureBoard .picture-cell.target.edge-bottom:not(.placed){border-bottom-color:transparent}
#pictureBoard .picture-cell.target.edge-left:not(.placed){border-left-color:transparent}
#pictureBoard .picture-cell.target.hint-edge-top:not(.placed){border-top-color:#fff0a9}
#pictureBoard .picture-cell.target.hint-edge-right:not(.placed){border-right-color:#fff0a9}
#pictureBoard .picture-cell.target.hint-edge-bottom:not(.placed){border-bottom-color:#fff0a9}
#pictureBoard .picture-cell.target.hint-edge-left:not(.placed){border-left-color:#fff0a9}
#pictureBoardWrap{position:relative}
#pictureBoard{position:relative;z-index:4;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(12,minmax(0,1fr));gap:0;background:transparent}
#pictureBoard .picture-cell.outside{opacity:.15;border-radius:0}
#pictureBoard .picture-cell.target:not(.placed){border-radius:0;background:radial-gradient(circle,#e5faff8c 0 1px,transparent 2px);box-shadow:none}
#pictureBoard .picture-cell.target.preview-ok,#pictureBoard .picture-cell.target.preview-no{border-radius:4px}
#pictureBoard .picture-cell.target.hint-cell:not(.placed){background:color-mix(in srgb,var(--hint-color) 52%,#15263e);filter:drop-shadow(0 0 3px #f5d57c77);animation:hintOutlinePulse 1.5s ease-in-out infinite}
#pictureBoard .picture-cell.target.preview-ok:not(.placed){background:#60deba99;box-shadow:inset 0 0 0 2px #c4ffec,0 0 10px #70ffcc}
#pictureBoard .picture-cell.target.preview-no:not(.placed){background:#e35d7380}
#pictureSubject{position:absolute;z-index:3;left:50%;top:50%;width:min(100cqw,100cqh,390px);height:min(100cqw,100cqh,390px);display:grid;place-items:center;transform:translate(-50%,-50%);color:#91d9e0;filter:drop-shadow(0 0 8px #71d6e0ab);pointer-events:none;user-select:none;transition:opacity .2s ease}
#pictureSubject svg{width:calc(100% - 16px);height:calc(100% - 16px);fill:currentColor}
.picture-shape i{width:clamp(6px,2vw,9px);height:clamp(6px,2vw,9px)}
#pictureReveal[hidden]{display:none}
#pictureReveal{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);width:min(100cqw,100cqh,390px);height:min(100cqw,100cqh,390px);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;overflow:hidden;border:1px solid #ffdca4;border-radius:17px;background:radial-gradient(circle at 50% 43%,#465a77f0,#152b43fa 66%,#0b1a32 100%);box-shadow:inset 0 0 35px #fff4cc2b,0 0 28px #f8cb8b66;color:#fff9e9;text-align:center;pointer-events:none;animation:pictureRevealIn .3s ease-out both}
#pictureReveal::before,#pictureReveal::after{content:'✧  ✦  ✧';position:absolute;left:0;right:0;color:#ffe2a2;font-size:30px;letter-spacing:32px;opacity:.7;animation:pictureTwinkle 1.3s ease-in-out infinite alternate}
#pictureReveal::before{top:11%}#pictureReveal::after{bottom:10%;animation-delay:.55s}
#pictureReveal .picture-reveal-spark{position:absolute;top:15%;right:15%;font-size:22px;color:#fff1af;animation:pictureTwinkle .8s ease-in-out infinite alternate}
#pictureRevealArt{position:relative;width:58%;aspect-ratio:1;filter:drop-shadow(0 0 18px #ffc771ac);will-change:transform}
#pictureRevealArt>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:picturePixelFade 1.2s ease-in .28s both}
#pictureRevealArt .picture-reveal-subject{position:absolute;inset:0;display:grid;place-items:center;font-size:min(47cqw,47cqh,175px);line-height:1;filter:drop-shadow(0 5px 10px #06152c);animation:pictureSubjectIn 1s ease-out .38s both}
#pictureRevealArt .picture-reveal-subject svg{width:85%;height:85%;fill:#ffdf9b}
#pictureReveal strong{font-size:clamp(17px,4.5vw,23px);line-height:1.2;text-shadow:0 2px 12px #030c25}
#pictureReveal>span:last-child{font-size:15px;font-weight:800;color:#ffe5a8}
.picture-revealing #pictureBoard{opacity:.17;filter:blur(2px)}
#pictureReveal[data-motion=hop] #pictureRevealArt{animation:pictureHop 1.2s ease-in-out infinite}
#pictureReveal[data-motion=fly] #pictureRevealArt{animation:pictureFly 1.6s ease-in-out infinite}
#pictureReveal[data-motion=swim] #pictureRevealArt{animation:pictureSwim 1.6s ease-in-out infinite}
#pictureReveal[data-motion=drive] #pictureRevealArt{animation:pictureDrive 1.4s ease-in-out infinite}
#pictureReveal[data-motion=launch] #pictureRevealArt{animation:pictureLaunch 1.6s ease-in infinite}
#pictureReveal[data-motion=grow] #pictureRevealArt{transform-origin:bottom center;animation:pictureGrow 1.6s ease-in-out infinite}
#pictureReveal[data-motion=rise] #pictureRevealArt{animation:pictureRise 1.6s ease-in-out infinite}
#pictureReveal[data-motion=shine] #pictureRevealArt{animation:pictureShine 1.6s ease-in-out infinite}
@keyframes pictureRevealIn{from{opacity:0;transform:translate(-50%,-50%) scale(.88)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes picturePixelFade{0%,35%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.14)}}
@keyframes pictureSubjectIn{0%{opacity:0;transform:scale(.62) rotate(-8deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes pictureTwinkle{to{opacity:1;filter:brightness(1.7);transform:scale(1.12)}}
@keyframes pictureHop{0%,100%{transform:translateY(7px) rotate(-3deg)}50%{transform:translateY(-19px) rotate(3deg)}}
@keyframes pictureFly{0%,100%{transform:translate(-8px,6px) rotate(-5deg)}50%{transform:translate(8px,-14px) rotate(5deg)}}
@keyframes pictureSwim{0%,100%{transform:translateX(-13px) rotate(-4deg)}50%{transform:translateX(13px) rotate(4deg)}}
@keyframes pictureDrive{0%{transform:translateX(-27px)}50%{transform:translateX(12px)}100%{transform:translateX(27px)}}
@keyframes pictureLaunch{0%{transform:translateY(24px) scale(.88)}60%{transform:translateY(-12px) scale(1)}100%{transform:translateY(-30px) scale(.92)}}
@keyframes pictureGrow{0%,100%{transform:scale(.87) rotate(-3deg)}50%{transform:scale(1.08) rotate(3deg)}}
@keyframes pictureRise{0%,100%{transform:translateY(9px) scale(.94)}50%{transform:translateY(-8px) scale(1.03)}}
@keyframes pictureShine{0%,100%{transform:rotate(-8deg) scale(.94)}50%{transform:rotate(8deg) scale(1.08)}}
@media(prefers-reduced-motion:reduce){#pictureReveal,#pictureReveal::before,#pictureReveal::after,#pictureReveal .picture-reveal-spark,#pictureRevealArt,#pictureRevealArt>svg,#pictureRevealArt .picture-reveal-subject{animation:none!important}#pictureRevealArt>svg{opacity:0}}
main.stage-mode:not(.stage-power){grid-template-rows:78px 42px 0 minmax(0,1fr) 64px 34px 42px}
main.stage-mode.stage-power{grid-template-rows:78px 42px 36px minmax(0,1fr) 64px 34px 102px 40px}
.stage-mode header{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:18px 18px minmax(0,1fr);align-items:start;column-gap:4px}
.stage-mode .mission-hud{display:contents}
.stage-mode .mission-hud strong{grid-column:1;grid-row:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:18px}
.stage-mode .mission-hud span{grid-column:1;grid-row:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:18px}
.stage-mode .game-actions{grid-column:2;grid-row:1/3}
.stage-mode #stageRule{grid-column:1/3;grid-row:3;align-self:center;display:block;max-height:39px;overflow:hidden;padding:3px 7px;border:1px solid #759fbd;border-radius:7px;background:#1c3855;color:#f3e2ad;font-size:12px;line-height:15px;font-weight:750}
@media(max-height:580px) and (orientation:portrait){main.stage-mode:not(.stage-power){grid-template-rows:78px 42px 0 minmax(0,1fr) 56px 34px 38px}main.stage-mode.stage-power{grid-template-rows:78px 42px 34px minmax(0,1fr) 56px 28px 100px 36px}}
@media(orientation:landscape) and (max-height:540px){main.stage-mode:not(.stage-power){grid-template-rows:78px 42px 0 minmax(52px,1fr) 28px 34px 40px}main.stage-mode.stage-power{grid-template-rows:78px 42px 34px minmax(52px,1fr) 28px 34px 100px 36px}}
/* The silhouette uses exactly the cells accepted by the puzzle board. */
#pictureSubject{color:#b9f4f4;filter:drop-shadow(0 0 3px #b7ffff) drop-shadow(0 0 13px #68e0e8);}
/* Time attack keeps five choices and all seven techniques visible without scrolling. */
.tray.five-pieces{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.tray.five-pieces .mini{width:9px;height:9px}
.tray.five-pieces .shape{gap:1px}
.powers.all-seven{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:4px}
.powers.all-seven .power{min-width:0;padding:2px 0;gap:0}
.powers.all-seven .power b{font-size:11px;line-height:15px}
.powers.all-seven .power-desc{display:none!important}
.powers.all-seven .power strong{font-size:11px;line-height:16px;padding:0 5px}
.powers.all-seven #powerFill{grid-column:auto;flex-direction:column;gap:0}
.powers.all-seven #powerFill .power-desc{display:none!important}
.powers.all-seven #powerFill .power-icon{display:none}
@media(max-width:350px){.powers.all-seven .power b{font-size:10px}.powers.all-seven .power strong{font-size:10px}}
#pictureSubject svg{fill:currentColor;stroke:#e4ffff;stroke-width:.65px;stroke-linejoin:round}
#pictureBoard .picture-cell.target:not(.placed){background:radial-gradient(circle,#ffffffca 0 1px,transparent 2px)}
#stageHintMore{flex:none;min-width:72px;height:100%;padding:0 5px;border:1px solid #f4d18d;border-radius:9px;background:#5d4661;color:#fff1bb;font:inherit;font-size:12px;font-weight:800}
.picture-actions:has(#pictureHintMore:not([hidden])){grid-template-columns:repeat(4,minmax(0,1fr))}
#pictureHintMore{background:#644c66;border-color:#ffe2a8;color:#fff0c4;font-weight:800}

#pictureSubject svg:has(polyline){stroke:none;filter:drop-shadow(0 0 2px #f1ffff)}

#pictureBoardWrap.vector-subject .picture-cell.target:not(.placed):not(.preview-ok):not(.preview-no):not(.hint-cell){background:transparent}
#pictureBoardWrap.vector-subject .picture-cell.placed{background:transparent;border:0;box-shadow:none;filter:none}
#pictureBoardWrap.vector-subject .picture-cell.placed::before,#pictureBoardWrap.vector-subject .picture-cell.placed::after{display:none}
#pictureBoardWrap.vector-subject .picture-cell.placed.drag-origin{background:transparent}
.picture-cut{display:block;width:min(calc(var(--cut-w)*10px),100%);height:auto;max-height:100%;fill:currentColor;stroke:none;overflow:visible;filter:drop-shadow(0 1px 2px #06182d) drop-shadow(0 0 3px currentColor)}
.picture-drag-ghost .picture-cut{width:100%;height:100%;max-height:none;filter:drop-shadow(0 2px 5px #06182d) drop-shadow(0 0 6px currentColor)}
#ghost{opacity:.76;filter:drop-shadow(0 3px 5px #050e24)}
#ghost .mini.filled{border:1px solid #f5fffc;box-shadow:inset 0 2px 1px #fff9,0 0 5px #a5ffee}
.picture-drag-ghost{opacity:.82}
#pictureBoard .picture-cell.target.preview-ok:not(.placed){box-shadow:inset 0 0 0 2px #e7fff4,0 0 12px #6affcf}
#pictureSubject .picture-placed-cut{filter:drop-shadow(0 0 3px currentColor)}
#pictureSubject .picture-vector-hint{color:#ffdc8a;fill:currentColor;opacity:.6;animation:pictureHintPulse 1.5s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){#pictureSubject .picture-vector-hint{animation:none}}
/* Each of the 100 boards and every loose piece share the same cell contour. */
#pictureSubject{filter:none}
#pictureSubject svg{stroke:none;filter:none}
#pictureSubject .picture-empty-outline{color:#87d4d8;fill:currentColor;stroke:none;opacity:.24;filter:drop-shadow(0 0 5px #6adfe6)}
#pictureSubject .picture-target-edge{fill:none;stroke:#d2ffff;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 2px #8beded)}
#pictureSubject .picture-placed-cut{stroke:none}
#pictureSubject .picture-placed-cut .picture-cut-edge{fill:none;stroke:#fff5d1;stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 2px currentColor)}
.picture-cut .picture-cut-fill{fill:currentColor;stroke:none}
.picture-cut .picture-cut-edge{fill:none;stroke:#fff5d1;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
#pictureSubject .picture-vector-hint .picture-cut-edge{fill:none;stroke:#fff;stroke-width:1.6}

#pictureSurface.cat-integrated{grid-template-columns:1fr;grid-template-rows:44px minmax(0,1fr) 42px 42px;gap:5px;padding:8px 10px max(8px,env(safe-area-inset-bottom))}
#pictureSurface.cat-integrated > :is(.picture-meta,#pictureBoardWrap,#pictureStatus,#pictureTray,.picture-actions,#pictureFail){display:none}
#pictureSurface.cat-integrated header{grid-column:1;grid-row:1}
#pictureSurface.cat-integrated #pictureCatFrame{grid-column:1;grid-row:2;width:100%;height:100%;border:0;border-radius:12px;background:#0d2340}
#pictureSurface.cat-integrated #pictureNext{grid-column:1;grid-row:3}
#pictureSurface.cat-integrated #pictureSelect{grid-column:1;grid-row:4}
.picture-card-icon{width:48px;height:clamp(24px,5vh,40px);display:block}.picture-card-icon img{width:100%;height:100%;object-fit:contain;display:block}

#pictureConfirm{position:absolute;z-index:30;inset:0;display:grid;place-items:center;padding:18px;background:#061122d8;backdrop-filter:blur(5px)}#pictureConfirm[hidden]{display:none!important}.picture-confirm-card{width:min(100%,350px);padding:22px;border:1px solid #a7c8cc;border-radius:18px;background:#203a55;box-shadow:0 20px 60px #000b;text-align:center}.picture-confirm-card h2{margin:0 0 9px;font-size:21px}.picture-confirm-card p{margin:0 0 16px;line-height:1.5;color:#d9e9f4;font-size:14px}.picture-confirm-card button{display:block;width:100%;min-height:45px;margin-top:9px;border-radius:10px;border:1px solid #8db4c2;background:#365a70;color:white}.picture-confirm-card #pictureConfirmCancel{background:#5b736e;border-color:#9cddd1;font-weight:800}

#pictureBoardWrap,#pictureBoard,.picture-cell,#pictureTray .picture-piece{touch-action:none;-webkit-user-select:none;user-select:none}

/* Keep puzzle gestures inside the game rather than browser zoom or page pan. */
#playSurface,#pictureSurface{touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none}html,body{overflow-x:hidden;overscroll-behavior:none}
/* The cut lines stay visible under unplaced pieces and match the snap slots. */
#pictureSubject .picture-slot-seams{fill:none;stroke:#f9e4b5;stroke-width:1.05;stroke-linecap:round;stroke-linejoin:round;opacity:.78}
.picture-drag-ghost .picture-cut{filter:drop-shadow(0 3px 3px #06182dcc)}
/* The game is a fixed play surface, not a vertically scrollable document. */
html{height:100%;overflow:hidden}
body{position:fixed;inset:0;width:100%;height:100%;min-height:0;overflow:hidden}
#board,.cell,.piece,#pictureBoard,.picture-piece{touch-action:none;-webkit-touch-callout:none}

/* Navigation uses visible destinations rather than unlabeled symbols. */
.game-actions{position:relative;display:flex;align-items:center;gap:5px;z-index:20}
.game-actions .nav-label,.game-actions summary{display:flex;align-items:center;justify-content:center;min-height:36px;padding:0 8px;border:1px solid #8aa9be;border-radius:8px;background:#25435a;color:#f1fbff;font-size:12px;font-weight:750;white-space:nowrap;cursor:pointer}
.game-actions .nav-label{background:#376a73;border-color:#9adfd3}
.game-actions summary{list-style:none}.game-actions summary::-webkit-details-marker{display:none}.game-actions summary::after{content:' ▾';margin-left:3px}
.game-menu-items{position:absolute;right:0;top:42px;width:206px;display:grid;gap:6px;padding:10px;background:#142b44;border:1px solid #9abccc;border-radius:12px;box-shadow:0 10px 30px #0009}
.game-menu-items button{min-height:44px;width:100%;padding:8px 12px;text-align:left;background:#2b475f;border:1px solid #668ca4;border-radius:7px;color:#f4fbff;font-size:14px;font-weight:650}
.game-actions summary:focus-visible,.game-actions button:focus-visible{outline:2px solid #ffdd8a;outline-offset:2px}
#pictureSurface.cat-integrated #pictureSelect{background:#376a73;border-color:#9adfd3;color:#f1fffb;font-weight:800}
#moveLast:not([hidden]){white-space:nowrap;min-width:52px}