*{box-sizing:border-box}html,body,#root{margin:0;height:100%;overflow:hidden;background:#0b1120;color:#e6ecff;font-family:system-ui,-apple-system,Segoe UI,sans-serif}.app{display:flex;flex-direction:column;height:100%}.hud-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px}.turn-indicator{display:flex;align-items:center;gap:8px;font-size:.95rem}.turn-indicator.winner{font-weight:700}.token-icon{display:block}.score-panel{display:flex;align-items:center;gap:5px;padding:8px 14px;border-radius:12px;border:1px solid #33415e;background:linear-gradient(180deg,#1d2849,#131c33);box-shadow:inset 0 1px #e6ecff17,0 3px 8px #00000059;transition:box-shadow .25s ease,border-color .25s ease;animation:score-panel-in .5s cubic-bezier(.34,1.56,.64,1) both}.hud-top .score-panel:nth-child(2){animation-delay:.14s}@keyframes score-panel-in{0%{opacity:0;transform:translateY(-18px) scale(.7)}to{opacity:1;transform:none}}.score-panel.pulse-a{animation:score-panel-pulse-a .55s cubic-bezier(.34,1.56,.64,1)}.score-panel.pulse-b{animation:score-panel-pulse-b .55s cubic-bezier(.34,1.56,.64,1)}@keyframes score-panel-pulse-a{0%{transform:scale(1)}35%{transform:scale(1.18)}70%{transform:scale(.96)}to{transform:scale(1)}}@keyframes score-panel-pulse-b{0%{transform:scale(1)}35%{transform:scale(1.18)}70%{transform:scale(.96)}to{transform:scale(1)}}.pip.just-filled{animation:pip-pop .55s cubic-bezier(.34,1.56,.64,1)}@keyframes pip-pop{0%{transform:scale(0)}60%{transform:scale(1.9)}to{transform:scale(1)}}.score-panel.active.yellow{border-color:#f5c5428c;box-shadow:inset 0 1px #e6ecff17,0 0 16px #f5c54259}.score-panel.active.red{border-color:#e4574c8c;box-shadow:inset 0 1px #e6ecff17,0 0 16px #e4574c59}.score-panel .token-icon{margin-right:3px}.pip{width:9px;height:9px;border-radius:50%;border:1px solid #33415e}.pip.filled.yellow{background:#f5c542;border-color:#f5c542}.pip.filled.red{background:#e4574c;border-color:#e4574c}.board-stage{flex:1;min-height:0;position:relative}.board-stage canvas{display:block;position:absolute;top:0;right:0;bottom:0;left:0}.hud-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px}.hud-buttons{display:flex;gap:10px}button{min-height:44px;min-width:72px;padding:0 18px;border:1px solid #33415e;border-radius:10px;background:#1a2440;color:#e6ecff;font-size:.95rem;cursor:pointer}button:active{background:#25325a}.icon-button{min-width:44px;width:44px;padding:0;display:inline-flex;align-items:center;justify-content:center}.icon-button img,.icon-button svg{width:22px;height:22px;display:block}.hud-left{display:flex;align-items:center}.powerup-tray{display:flex;gap:10px}.powerup-button{position:relative;color:#e6ecff;overflow:visible}.powerup-button:disabled{opacity:.35;cursor:default}.powerup-button.armed{border-color:#f5c542;background:#3a3522;box-shadow:0 0 10px #f5c54259}.powerup-button .powerup-icon{width:34px;height:34px;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3));pointer-events:none}.powerup-button .powerup-icon.row-clear{width:37px}.powerup-button .powerup-icon.col-clear{height:38px}.powerup-count{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;border-radius:9px;background:#33415e;font-size:.7rem;font-weight:700;line-height:17px;text-align:center}.minimap-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#040812a6;z-index:10}.minimap-panel{background:#131c33;border:1px solid #33415e;border-radius:12px;padding:12px;max-width:calc(100vw - 24px)}.minimap-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;font-size:.85rem;color:#8fa1c7}.minimap-panel canvas{display:block;max-width:100%;border-radius:6px;touch-action:none;cursor:crosshair}.turn-banner-track{position:fixed;top:18%;left:0;right:0;display:flex;justify-content:center;pointer-events:none;z-index:5}.turn-banner{display:flex;align-items:center;gap:10px;padding:10px 22px;border-radius:999px;background:#131c33;border:1px solid #33415e;font-size:1.05rem;font-weight:700;animation:turn-banner 1.9s cubic-bezier(.4,0,.6,1) both}.turn-banner.persistent{animation:turn-banner-in .45s cubic-bezier(.34,1.56,.64,1) both,turn-banner-pulse 2.2s ease-in-out .45s infinite}@keyframes turn-banner-in{0%{transform:translate(-60vw) scale(.7);opacity:0}60%{transform:translate(3vw) scale(1.06)}to{transform:translate(0) scale(1);opacity:1}}@keyframes turn-banner-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.045)}}.turn-banner.yellow{box-shadow:0 0 18px #f5c54259}.turn-banner.red{box-shadow:0 0 18px #e4574c59}.attack-banner-track{position:fixed;top:30%;left:0;right:0;display:flex;justify-content:center;pointer-events:none;z-index:6}.attack-banner{display:flex;align-items:center;gap:10px;padding:10px 24px;border-radius:999px;border:1px solid #ff9078;background:#3b1620;color:#ffe8df;font-size:1.15rem;font-weight:800;box-shadow:0 0 24px #e4574c73,0 8px 22px #0000006b;animation:attack-banner 1.6s cubic-bezier(.34,1.56,.64,1) both}@keyframes turn-banner{0%{transform:translate(-60vw) scale(.7);opacity:0}13%{transform:translate(3vw) scale(1.06);opacity:1}18%{transform:translate(-.8vw) scale(.99)}22%{transform:translate(0) scale(1)}85%{transform:translate(0) scale(1);opacity:1}89%{transform:translate(-2vw) scale(1.04)}to{transform:translate(60vw) scale(.8);opacity:0}}@keyframes attack-banner{0%{transform:translateY(-22px) scale(.35);opacity:0}13%{transform:translateY(4px) scale(1.12);opacity:1}20%{transform:translateY(0) scale(1)}83%{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(-18px) scale(.72);opacity:0}}.win-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:8}.quit-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#040812a6;z-index:10}.quit-dialog{display:flex;flex-direction:column;align-items:center;gap:4px;background:#131c33;border:1px solid #33415e;border-radius:12px;padding:22px 28px;width:min(320px,calc(100vw - 24px));text-align:center;animation:quit-dialog-in .42s cubic-bezier(.34,1.56,.64,1) both}@keyframes quit-dialog-in{0%{transform:translateY(14px) scale(.8);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.quit-message{margin:0;font-size:1.15rem;font-weight:700}.quit-detail{margin:0;font-size:.9rem;color:#8b97b8}.quit-buttons{display:flex;gap:10px;margin-top:18px}.quit-confirm{min-height:44px;padding:0 22px;border-radius:14px;border:1px solid rgba(228,87,76,.55);background:#e4574c24;font-size:.98rem;font-weight:700}.quit-confirm:hover{background:#e4574c42}.quit-cancel{min-height:44px;padding:0 22px;border-radius:14px;border:1px solid #4a5d8a;background:#25325a;font-size:.98rem;font-weight:700}.quit-cancel:hover{background:#2e3d6e}.win-fireworks{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.win-content{position:relative;display:flex;flex-direction:column;align-items:center;gap:28px}.play-again{pointer-events:auto;min-height:56px;padding:0 36px;border-radius:18px;border:1px solid #4a5d8a;background:#25325a;font-size:1.15rem;font-weight:700;animation:play-again-in .45s cubic-bezier(.34,1.56,.64,1) 1s both}.play-again:hover{background:#2e3d6e}.back-to-title{pointer-events:auto;min-height:44px;padding:0 26px;border-radius:14px;font-size:.98rem;animation:play-again-in .45s cubic-bezier(.34,1.56,.64,1) 1.15s both}@keyframes play-again-in{0%{transform:translateY(36px) scale(.5);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.win-title{position:relative;font-size:clamp(2.6rem,9vw,5rem);font-weight:800;letter-spacing:.02em;animation:win-title-in .55s cubic-bezier(.34,1.56,.64,1) both}.win-title.yellow{color:#f5c542;text-shadow:0 0 28px rgba(245,197,66,.55),0 4px 18px rgba(0,0,0,.6)}.win-title.red{color:#e4574c;text-shadow:0 0 28px rgba(228,87,76,.55),0 4px 18px rgba(0,0,0,.6)}.win-title.draw{color:#e6ecff;text-shadow:0 0 28px rgba(143,161,199,.55),0 4px 18px rgba(0,0,0,.6)}@keyframes win-title-in{0%{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}.option-button{flex:1;min-height:38px;min-width:0;padding:0 10px;font-size:.88rem}.option-button.selected{border-color:#f5c542;background:#3a3522}.splash-screen{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#000;z-index:20;transition:opacity .45s ease}.splash-screen.leaving{opacity:0;pointer-events:none}.splash-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px;text-align:center;animation:splash-in .6s ease both}@keyframes splash-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.splash-title{margin:0;font-family:Bungee,system-ui,-apple-system,Segoe UI,sans-serif;font-size:clamp(1.6rem,6vw,2.6rem);font-weight:400;letter-spacing:2px;color:#e6ecff}.splash-title-infinite{font-family:"Exo 2",system-ui,-apple-system,Segoe UI,sans-serif;font-style:italic;font-weight:600;color:#2df7ff}.splash-author{margin:0;font-size:1.05rem;color:#aab6d4}.splash-purpose{margin:0;font-size:.9rem;color:#6d7a99}.splash-start{margin-top:26px;min-height:54px;padding:0 52px;border-radius:16px;border:1px solid #4a5d8a;background:#25325a;font-size:1.1rem;font-weight:700;box-shadow:0 0 22px #2df7ff2e,0 8px 20px #0006}.splash-start:hover{background:#2e3d6e}.splash-attribution{margin:28px 0 0;font-size:.72rem;line-height:1.5;color:#4d5878}.title-screen{position:relative;height:100%}.title-stage{position:absolute;top:0;right:0;bottom:0;left:0}.title-stage canvas{display:block;position:absolute;top:0;right:0;bottom:0;left:0}.title-menu{position:absolute;left:0;right:0;bottom:max(7vh,env(safe-area-inset-bottom,0px) + 24px);display:flex;flex-direction:column;align-items:center;gap:14px;transition:opacity .3s ease}.title-menu.leaving{opacity:0;pointer-events:none}.title-menu>*{animation:title-menu-in .45s cubic-bezier(.34,1.56,.64,1) both}.title-menu>*:nth-child(2){animation-delay:.08s}.title-menu>*:nth-child(3){animation-delay:.16s}@keyframes title-menu-in{0%{transform:translateY(28px) scale(.7);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.title-settings{position:absolute;top:12px;right:12px}.settings-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#040812a6;z-index:10}.settings-panel{background:#131c33;border:1px solid #33415e;border-radius:12px;padding:16px;width:min(340px,calc(100vw - 24px));animation:spring-in .42s cubic-bezier(.34,1.56,.64,1) both}@keyframes spring-in{0%{transform:scale(.55);opacity:0}to{transform:scale(1);opacity:1}}.settings-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;font-size:1rem;font-weight:600}.settings-row{display:flex;flex-direction:column;gap:10px;font-size:.9rem}.settings-label{display:flex;align-items:center;justify-content:space-between;color:#8fa1c7}.settings-value{color:#e6ecff;font-variant-numeric:tabular-nums}.settings-row input[type=range]{width:100%;accent-color:#f5c542;cursor:pointer}.title-play{min-height:54px;padding:0 38px;border-radius:16px;border:1px solid #4a5d8a;background:#25325a;font-size:1.1rem;font-weight:700;box-shadow:0 0 22px #2df7ff2e,0 8px 20px #0006}.title-play:hover{background:#2e3d6e}.title-difficulty{display:flex;gap:8px;width:min(280px,80vw)}.title-two-player{font-size:.98rem}