:root{--fg: #eef2fb;--muted: #9aa4bf;--cyan: #2de2ff;--mag: #ff4fb2;--cyan-glow: rgba(45, 226, 255, .78);--mag-glow: rgba(255, 79, 178, .78);--glass: rgba(255, 255, 255, .045);--glass-edge: rgba(255, 255, 255, .12);--page: radial-gradient(110% 80% at 12% -12%, #191d46 0%, transparent 55%), radial-gradient(120% 80% at 90% 112%, #3a123f 0%, transparent 52%), #06070f;--page-solid: #0b0d1a;--ink: #06070f;--slide: .26s cubic-bezier(.2, .8, .2, 1);--space: clamp(12px, 2.4dvh, 22px);--board: max( 168px, min( 84vw, 380px, calc(100dvh - 306px - 4 * var(--space) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) ) );color-scheme:dark}@media (prefers-color-scheme: light){:root{--fg: #141830;--muted: #5a6480;--cyan: #0891b2;--mag: #d61f7a;--cyan-glow: rgba(8, 145, 178, .45);--mag-glow: rgba(214, 31, 122, .45);--glass: rgba(20, 24, 48, .035);--glass-edge: rgba(20, 24, 48, .12);--page: radial-gradient(110% 80% at 12% -12%, #dbeafe 0%, transparent 55%), radial-gradient(120% 80% at 90% 112%, #fce7f3 0%, transparent 52%), #f4f6fb;--page-solid: #ffffff;--ink: #ffffff;color-scheme:light}.wash__layer--cyan{background:radial-gradient(130% 70% at 50% 110%,rgba(8,145,178,.24),transparent 70%)}.wash__layer--magenta{background:radial-gradient(130% 70% at 50% -10%,rgba(214,31,122,.22),transparent 70%)}.board{box-shadow:0 18px 44px #1e285029,inset 0 1px #fff9}.cell{border-color:#1418301a;background:#14183008}.cell--win{border-color:#14183073}}@media (prefers-color-scheme: light) and (hover: hover){.cell--open:hover{background:#14183012}.btn:hover{background-color:#1418300f}.seg__opt:not([aria-checked=true]):hover{background-color:#1418300f}}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Chakra Petch,system-ui,-apple-system,sans-serif;color:var(--fg);background:var(--page);-webkit-tap-highlight-color:transparent}.wash{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}.wash__layer{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .45s ease}.wash__layer--cyan{background:radial-gradient(130% 70% at 50% 110%,rgba(45,226,255,.34),transparent 70%)}.wash__layer--magenta{background:radial-gradient(130% 70% at 50% -10%,rgba(255,79,178,.34),transparent 70%)}body[data-turn=cyan] .wash__layer--cyan,body[data-turn=magenta] .wash__layer--magenta{opacity:1}body[data-turn=draw] .wash__layer{opacity:.8}#app{position:relative;min-height:100dvh}.game{position:relative;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space);overflow:clip;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));text-align:center}.top{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;height:118px}.wordmark{font-family:Monoton,system-ui;font-size:clamp(22px,7vw,36px);line-height:1;color:var(--cyan);text-shadow:0 0 10px var(--cyan-glow),0 0 24px var(--cyan-glow)}.wordmark .b{color:var(--mag);text-shadow:0 0 10px var(--mag-glow),0 0 24px var(--mag-glow)}body[data-over=true] .wordmark{font-size:clamp(14px,4.2vw,20px);opacity:.5;transition:font-size .3s ease,opacity .3s ease}.status{margin:0;line-height:1.3;font-size:15px;font-weight:600;letter-spacing:.06em;color:var(--fg)}.status-sub{margin:0;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.status-sub:empty{display:none}.status--declare{--glow-a: var(--cyan-glow);--glow-b: var(--cyan-glow);font-family:Monoton,system-ui;font-weight:400;font-size:clamp(24px,8.5vw,40px);line-height:1.15;text-transform:uppercase;filter:drop-shadow(0 0 6px var(--glow-a)) drop-shadow(0 0 16px var(--glow-b));animation:breathe 2.4s ease-in-out infinite}body[data-turn=cyan] .status--declare{color:var(--cyan)}body[data-turn=magenta] .status--declare{--glow-a: var(--mag-glow);--glow-b: var(--mag-glow);color:var(--mag)}body[data-turn=draw] .status--declare{--glow-a: var(--cyan-glow);--glow-b: var(--mag-glow);color:transparent;background:linear-gradient(90deg,var(--cyan),var(--mag));-webkit-background-clip:text;background-clip:text}.tray{display:flex;align-items:center;gap:12px;padding:8px 16px;border-radius:999px;border:1px solid transparent;opacity:.55;transition:opacity .3s ease,border-color .3s ease}.tray--active{opacity:1}.tray--cyan.tray--active{border-color:#2de2ff66}.tray--magenta.tray--active{border-color:#ff4fb266}.tray__discs{display:flex;gap:8px}.tray__disc{width:22px;height:22px;overflow:visible;filter:drop-shadow(0 0 4px currentColor);transition:opacity .25s ease,transform .25s ease,filter .25s ease}.tray__disc.is-spent{opacity:.16;filter:none;transform:scale(.8)}.tray__label{min-width:5.5em;text-align:left;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.tray__undo{padding:2px 8px;border-radius:999px;border:1px solid var(--glass-edge);background:var(--glass);font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.08em;color:var(--fg);white-space:nowrap}.tray__undo.is-spent{color:var(--muted);opacity:.5}.tray--cyan .tray__undo.is-armed{color:var(--cyan);border-color:#2de2ffa6;box-shadow:0 0 10px var(--cyan-glow)}.tray--magenta .tray__undo.is-armed{color:var(--mag);border-color:#ff4fb2a6;box-shadow:0 0 10px var(--mag-glow)}.board-wrap{position:relative;isolation:isolate}.echo{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none}.echo__ring{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:22px;border:2px solid;opacity:0;animation:echo 2.4s ease-out infinite both}.echo__ring--cyan{border-color:var(--cyan);box-shadow:0 0 18px var(--cyan-glow),inset 0 0 12px var(--cyan-glow)}.echo__ring--magenta{border-color:var(--mag);box-shadow:0 0 18px var(--mag-glow),inset 0 0 12px var(--mag-glow)}.board{width:var(--board);aspect-ratio:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:10px;padding:10px;border-radius:22px;background:var(--glass);border:1px solid var(--glass-edge);box-shadow:0 24px 60px #00000073,inset 0 1px #ffffff0f;transition:box-shadow .4s ease,border-color .4s ease}body[data-over=true][data-turn=cyan] .board{border-color:#2de2ff99;box-shadow:0 0 40px #2de2ff59}body[data-over=true][data-turn=magenta] .board{border-color:#ff4fb299;box-shadow:0 0 40px #ff4fb259}.cell{position:relative;display:grid;place-items:center;min-width:44px;min-height:44px;padding:0;border:1px solid rgba(255,255,255,.07);border-radius:16px;background:#ffffff08;color:inherit;font:inherit;cursor:default}.cell:focus-visible{outline:2px solid var(--fg);outline-offset:2px}.cell:disabled{cursor:default}.cell--selectable,.cell--open,.cell--target{cursor:pointer}@media (hover: hover){.cell--open:hover{background:#ffffff14}}.cell--target:after{content:"";width:26%;aspect-ratio:1;border-radius:50%;animation:pulse 1.1s ease-in-out infinite}body[data-turn=cyan] .cell--target:after{background:var(--cyan);box-shadow:0 0 14px var(--cyan-glow)}body[data-turn=magenta] .cell--target:after{background:var(--mag);box-shadow:0 0 14px var(--mag-glow)}.cell--dim .disc{opacity:.3;box-shadow:none}.cell--win{border-color:#ffffff80}.cell--nudge{animation:nudge .26s ease}.cue{position:absolute;left:50%;bottom:-14px;transform:translate(-50%,8px);width:max-content;max-width:min(88vw,340px);padding:10px 16px;border-radius:14px;border:1px solid var(--glass-edge);background:var(--page-solid);background:color-mix(in srgb,var(--page-solid) 88%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 10px 30px #0006,0 0 20px var(--cyan-glow);color:var(--fg);font-size:13px;line-height:1.4;letter-spacing:.02em;text-align:center;pointer-events:none;z-index:5;opacity:0;transition:opacity .26s ease,transform .26s ease}.cue[hidden]{display:none}.cue--in{opacity:1;transform:translate(-50%)}body[data-over=true] .cell{border-color:transparent;background:transparent}body[data-over=true][data-turn=cyan] .cell--win{border-color:var(--cyan);box-shadow:inset 0 0 0 2px var(--cyan),0 0 22px var(--cyan-glow)}body[data-over=true][data-turn=magenta] .cell--win{border-color:var(--mag);box-shadow:inset 0 0 0 2px var(--mag),0 0 22px var(--mag-glow)}body[data-over=true] .tray{visibility:hidden}.disc{display:block}.disc--cyan{color:var(--cyan)}.disc--magenta{color:var(--mag)}.disc line,.disc circle{fill:none;stroke:currentColor;stroke-width:15;stroke-linecap:round}.cell .disc{width:66%;aspect-ratio:1;overflow:visible;filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 12px currentColor);transition:filter .2s ease,opacity .3s ease}.cell--selected .disc{transform:scale(1.08);filter:drop-shadow(0 0 6px currentColor) drop-shadow(0 0 16px currentColor)}body[data-turn=cyan] .cell--selected{border-color:var(--cyan);box-shadow:inset 0 0 0 2px var(--cyan),0 0 18px var(--cyan-glow)}body[data-turn=magenta] .cell--selected{border-color:var(--mag);box-shadow:inset 0 0 0 2px var(--mag),0 0 18px var(--mag-glow)}.cell--win .disc{filter:drop-shadow(0 0 8px currentColor) drop-shadow(0 0 20px currentColor)}.cell--dim .disc{opacity:.3;filter:none}.disc--pop{animation:pop .22s cubic-bezier(.2,.9,.3,1.3)}.cell .disc--slide{position:relative;z-index:1;transition:transform var(--slide),filter .2s ease,opacity .3s ease}.confetti{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:100;pointer-events:none}.bottom{display:flex;flex-direction:column;align-items:center;gap:10px}.bottom__actions{display:flex;align-items:center;gap:12px}.endstats{margin:0;white-space:nowrap;font-size:clamp(10px,3.2vw,13px);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-variant-numeric:tabular-nums;color:var(--muted)}.endstats:empty{display:none}.stat-c{color:var(--cyan);text-shadow:0 0 10px var(--cyan-glow)}.stat-m{color:var(--mag);text-shadow:0 0 10px var(--mag-glow)}.btn{min-height:44px;padding:0 22px;border-radius:999px;border:1px solid var(--glass-edge);background:var(--glass);color:var(--fg);font:inherit;font-weight:600;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;cursor:pointer}@media (hover: hover){.btn:hover{background-color:#ffffff1a}.setup__start:hover,body[data-over=true] .btn:not(.btn--ghost):hover{filter:brightness(1.08)}}.btn:active{transform:scale(.97)}.btn--ghost{background:transparent}.btn:disabled{opacity:.35;cursor:default}.btn:disabled:active{transform:none}[data-action=playagain],body[data-over=true] [data-action=restart]{display:none}body[data-over=true] [data-action=playagain]{display:inline-block}body[data-over=true] [data-action=undo],body[data-mode=ai] [data-action=undo],body[data-mode=ai] .tray__undo{display:none}[data-action=undo]{position:relative;overflow:hidden}[data-action=undo][data-arm]{border-color:transparent;color:var(--ink)}[data-action=undo][data-arm=cyan]{background:var(--cyan);box-shadow:0 0 18px var(--cyan-glow)}[data-action=undo][data-arm=magenta]{background:var(--mag);box-shadow:0 0 18px var(--mag-glow)}[data-action=undo][data-arm]:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);transform:translate(-120%);animation:shimmer 2.4s ease-in-out infinite;pointer-events:none}body[data-over=true] .btn:not(.btn--ghost){border-color:transparent;background-origin:border-box;color:var(--ink);animation:invite 1.6s ease-in-out infinite}body[data-over=true][data-turn=cyan] .btn:not(.btn--ghost){background-image:linear-gradient(var(--cyan),var(--cyan));box-shadow:0 0 22px var(--cyan-glow)}body[data-over=true][data-turn=magenta] .btn:not(.btn--ghost){background-image:linear-gradient(var(--mag),var(--mag));box-shadow:0 0 22px var(--mag-glow)}body[data-over=true][data-turn=draw] .btn:not(.btn--ghost){background-image:linear-gradient(90deg,var(--cyan),var(--mag));box-shadow:-8px 0 22px var(--cyan-glow),8px 0 22px var(--mag-glow)}.btn:focus-visible{outline:2px solid var(--fg);outline-offset:2px}.setup{position:relative;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(16px,3.6dvh,30px);padding:max(20px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));text-align:center}.setup__tag{margin:0;max-width:22em;color:var(--muted);font-size:14px;letter-spacing:.06em}.setup__form{display:flex;flex-direction:column;gap:clamp(16px,3dvh,26px);width:min(92vw,360px)}.setup__ai{display:flex;flex-direction:column;gap:clamp(16px,3dvh,26px)}.setup__ai[hidden]{display:none}.opt{display:flex;flex-direction:column;gap:12px}.opt__label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.seg{display:flex;gap:8px}.seg__opt{flex:1;min-height:46px;padding:0 8px;border-radius:14px;border:1px solid var(--glass-edge);background:var(--glass);color:var(--fg);font:inherit;font-weight:600;letter-spacing:.03em;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease}@media (hover: hover){.seg__opt:not([aria-checked=true]):hover{background-color:#ffffff17}}.seg__opt:focus-visible{outline:2px solid var(--fg);outline-offset:2px}.seg__opt[aria-checked=true]{border-color:var(--fg);background:#ffffff1a;box-shadow:inset 0 0 0 1px var(--fg)}.seg__opt[data-value=cyan][aria-checked=true]{color:var(--cyan);border-color:var(--cyan);background:#2de2ff1f;box-shadow:inset 0 0 0 1px var(--cyan),0 0 14px var(--cyan-glow)}.seg__opt[data-value=magenta][aria-checked=true]{color:var(--mag);border-color:var(--mag);background:#ff4fb21f;box-shadow:inset 0 0 0 1px var(--mag),0 0 14px var(--mag-glow)}.setup__start{margin-top:4px;min-height:50px;border-color:transparent;background-origin:border-box;background-image:linear-gradient(90deg,var(--cyan),var(--mag));color:var(--ink);box-shadow:0 0 22px #2de2ff47,0 0 22px #ff4fb247}@keyframes pulse{0%,to{transform:scale(.75);opacity:.45}50%{transform:scale(1);opacity:.95}}@keyframes pop{0%{transform:scale(.3);opacity:0}}@keyframes echo{0%{transform:scale(1);opacity:.95}50%,to{transform:scale(1.35);opacity:0}}@keyframes breathe{50%{filter:drop-shadow(0 0 10px var(--glow-a)) drop-shadow(0 0 28px var(--glow-b))}}@keyframes invite{50%{transform:scale(1.05)}}@keyframes shimmer{to{transform:translate(120%)}}@keyframes nudge{25%{transform:translate(-4px)}75%{transform:translate(4px)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}}