:root{--page-bg: #141c30;--panel-bg: #1c2740;--panel-edge: #2c3a5e;--ink: #e8ecf5;--ink-dim: #9aa6c2;--accent: #ffd75e;--cmd-bg: #263354;--cmd-bg-hover: #31406a;--board-bg: #1d2b45;--board-grid: rgba(255, 255, 255, .13);--board-frame: #0f1730}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--page-bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,sans-serif}button{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}.game-screen{min-height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.layout-narrow{--cell: min(calc((100vw - 16px) / 9), calc((100dvh - 130px) / 20.2));--rcell: calc(var(--cell) * .42)}.layout-wide{--cell: min(calc((100vw - 80px) / 30.5), calc((100dvh - 110px) / 16.6));--rcell: calc(var(--cell) * .45)}.game-header{height:44px;flex:none;display:flex;align-items:center;gap:12px;padding:0 12px}.layout-narrow .game-header{flex-wrap:wrap;height:auto;min-height:44px;padding-top:4px;padding-bottom:4px;row-gap:4px}.layout-narrow .header-actions{flex-wrap:wrap;row-gap:4px}.game-title{font-weight:700;letter-spacing:.04em}.game-mode{color:var(--ink-dim);font-size:.85rem;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-actions{display:flex;gap:6px}.game-body{flex:1;display:flex;align-items:center;justify-content:center;gap:calc(var(--cell) * .4);min-height:0}.layout-narrow .game-body{flex-direction:column;gap:calc(var(--cell) * .25)}.board-column{display:flex;flex-direction:column;align-items:center;min-width:0}.cmd{background:var(--cmd-bg);border:1px solid var(--panel-edge);border-radius:8px;color:var(--ink);padding:.45em .9em;cursor:pointer;white-space:nowrap}.cmd:hover:not(:disabled){background:var(--cmd-bg-hover)}.cmd:disabled{opacity:.45;cursor:default}.cmd.primary{background:#2f6bd8;border-color:#4c86e8;font-weight:600}.cmd.primary:hover:not(:disabled){background:#3b78e4}.cmd.subtle{background:transparent}.cmd.replay{background:#2f6bd8;border-color:#4c86e8;font-weight:600}.band{width:calc(var(--cell) * 9);max-width:100%;min-height:calc(var(--cell) * 3 + 3.55em);flex:none;display:flex;flex-direction:column}.band.thinking{align-items:center;justify-content:center}.thinking-message{font-size:1.05rem;color:var(--ink);animation:thinking-pulse 1.4s ease-in-out infinite}@keyframes thinking-pulse{0%,to{opacity:1}50%{opacity:.45}}.band-banner{height:1.75em;flex:none;display:flex;align-items:center;justify-content:center}.turn-banner{font-weight:600;white-space:nowrap}.turn-banner:before{content:"●";margin-right:.45em}.turn-blue:before{color:#4f8ef7}.turn-white:before{color:#dfe6f2}.end-panel{display:flex;align-items:center;justify-content:center;gap:10px;width:100%}.end-text{font-weight:600;font-size:.85rem;line-height:1.15;text-align:center}.end-panel .cmd{flex:none;padding:.3em .7em}.band-main{min-height:calc(var(--cell) * 3 + .2em);flex:none;display:flex;align-items:center;justify-content:center;gap:calc(var(--cell) * .35)}.band-preview{width:calc(var(--cell) * 3);height:calc(var(--cell) * 3);flex:none;display:flex;align-items:center;justify-content:center;border-radius:10px}.band-preview.armed{cursor:pointer}.band-spin{display:flex;align-items:center;justify-content:center}.band-placeholder{color:var(--ink-dim);font-size:.8rem;text-align:center;padding:0 8px}.band-commands{display:flex;flex-direction:column;gap:6px;flex:none}.band-message{height:1.6em;flex:none;display:flex;align-items:center;justify-content:center;color:#f2b8c4;font-size:.9rem;text-align:center}.board-zone{display:flex;flex-direction:column;align-items:stretch;width:calc(var(--cell) * 9);max-width:100%}.aim-strip{height:calc(var(--cell) * .95);flex:none;display:flex}.arrow-zone{flex:1;background:var(--cmd-bg);border:1px solid var(--panel-edge);border-radius:6px;margin:0 1px;color:var(--ink);font-size:calc(var(--cell) * .4);cursor:pointer;padding:0}.arrow-zone:hover{background:var(--cmd-bg-hover)}.board-holder{position:relative}.board-frame{width:calc(var(--cell) * 9);border:4px solid var(--board-frame);border-radius:8px;background:var(--board-frame);outline:none}.board-frame.aiming{cursor:pointer}.board-svg{display:block;width:100%;height:auto;border-radius:4px}.board-bg{fill:var(--board-bg)}.board-grid line{stroke:var(--board-grid);stroke-width:.02}.win-path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}.win-path.outline{stroke:#0b1226;stroke-opacity:.85;stroke-width:.17}.win-path.core{stroke:#ffe27a;stroke-width:.09}.win-path.draw{stroke-dashoffset:1;animation-name:winpath-draw;animation-timing-function:linear;animation-fill-mode:forwards}@keyframes winpath-draw{to{stroke-dashoffset:0}}.hint-pulse{animation:hint-pulse .9s ease-in-out infinite alternate}@keyframes hint-pulse{0%{opacity:.65}to{opacity:1}}.ai-highlight{animation:hint-pulse .55s ease-in-out infinite alternate}.sparks-layer{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:3}.burst{position:absolute;width:0;height:0}.spark{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#ffd75e;box-shadow:0 0 6px 1px #ffd75ecc;opacity:0;animation:spark-fly 1.15s ease-out both}.spark:nth-child(3n){background:#fff3c4;box-shadow:0 0 6px 1px #fff3c4cc}.spark:nth-child(4n){background:#7fb2ff;box-shadow:0 0 6px 1px #7fb2ffcc}@keyframes spark-fly{0%{opacity:1;transform:rotate(var(--a)) translate(0) scale(1)}to{opacity:0;transform:rotate(var(--a)) translate(var(--d)) scale(.3)}}.reserve{position:relative;border-radius:10px;padding:2px 6px 4px;background:var(--panel-bg);border:1px solid var(--panel-edge);transition:opacity .2s;--fcell: calc(var(--rcell) * var(--fit, 1))}.layout-wide .reserve{max-width:calc((100vw - var(--cell) * 9.8 - 80px) / 2)}.layout-narrow .reserve{max-width:calc(100vw - 12px)}.reserve.inactive{opacity:.55}.reserve-heading{margin:2px 0 0;font-size:.78rem;font-weight:600;color:var(--ink-dim);display:flex;align-items:center;gap:6px;min-height:1.4em}.reserve-indicator{color:var(--accent);width:1em;display:inline-block}.reserve-row{display:flex;justify-content:center;align-items:flex-end;padding:calc(var(--rcell) * .15) 0}.shape-slot{display:flex;align-items:flex-end}.exemplar{background:transparent;border:none;border-radius:8px;padding:calc(var(--rcell) * .3) calc(var(--fcell) * .12);min-height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer}.shape-slot .exemplar:first-child{padding-left:calc(var(--fcell) * .42)}.shape-slot .exemplar:last-child{padding-right:calc(var(--fcell) * .42)}.exemplar:disabled{cursor:default}.exemplar:not(:disabled):hover{background:#ffffff12}.exemplar.hinted{animation:hinted-pulse .9s ease-in-out infinite alternate;box-shadow:0 0 0 2px var(--accent)}@keyframes hinted-pulse{0%{box-shadow:0 0 0 2px #ffd75e66}to{box-shadow:0 0 10px 3px #ffd75ee6}}.reserve-figure{display:block}.rules-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#080c18a6;display:flex;align-items:center;justify-content:center;z-index:10;padding:16px}.rules-dialog{background:var(--panel-bg);border:1px solid var(--panel-edge);border-radius:12px;max-width:34em;max-height:80dvh;overflow:auto;padding:20px 24px}.rules-dialog h2{margin-top:0;font-size:1.15rem}.rules-dialog li{margin-bottom:.6em;line-height:1.45}.start-screen{min-height:100dvh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.start-bg{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;opacity:.5}.start-illustration{width:min(78vmin,460px);height:auto}.illustration-frame{fill:var(--board-frame)}.illustration-bg{fill:var(--board-bg)}.illustration-grid line{stroke:var(--board-grid);stroke-width:.02}.illustration-falling{animation:illus-drop 3.2s ease-in-out infinite}@keyframes illus-drop{0%,to{transform:translateY(0)}50%{transform:translateY(.35px)}}.start-card{position:relative;z-index:1;background:#141c30e0;border:1px solid var(--panel-edge);border-radius:16px;padding:28px 32px 18px;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:min(92vw,26em);text-align:center}.start-title{margin:0;font-size:2.4rem;letter-spacing:.06em}.start-tagline{margin:0;color:var(--ink-dim)}.start-actions{display:flex;flex-direction:column;gap:12px;width:100%}.ai-block{display:flex;flex-direction:column;gap:8px;border:1px solid var(--panel-edge);border-radius:12px;padding:12px}.ai-block-title{font-size:.85rem;color:var(--ink-dim)}.level-group{display:flex;gap:6px;justify-content:center}.cmd.level{flex:1;padding:.4em .5em}.cmd.level.checked{background:#2f6bd8;border-color:#4c86e8}.start-footer{margin-top:4px;font-size:.8rem}.start-footer a{color:var(--ink-dim)}@media (max-height: 540px){.game-header{height:36px;min-height:36px;padding-top:2px;padding-bottom:2px}.band-banner{height:1.4em;font-size:.9rem}.band-commands{gap:4px}.band-commands .cmd{font-size:.78rem;padding:.14em .5em}.band-message{height:1.3em;font-size:.8rem}}@media (prefers-reduced-motion: reduce){.thinking-message,.hint-pulse,.ai-highlight,.exemplar.hinted,.illustration-falling{animation:none}.win-path.draw{animation:none;stroke-dashoffset:0}}.link-error{position:fixed;top:max(8px,env(safe-area-inset-top));left:50%;transform:translate(-50%);z-index:30;max-width:min(92vw,520px);padding:10px 16px;border-radius:10px;background:#5a2230;color:#ffd9df;border:1px solid #a44a5c;font-size:.9rem;text-align:center}