:root{--bg: #050007;--bg-panel: rgba(18, 4, 24, .85);--line: #2a0f35;--text: #e9dcf5;--muted: #8d7a9e;--x: #ff2bd6;--o: #00f0ff;--accent: #b026ff;--cell: clamp(18px, 5.4vw, 34px);color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at top,rgba(176,38,255,.18),transparent 60%),radial-gradient(ellipse at bottom,rgba(0,240,255,.08),transparent 60%),var(--bg);color:var(--text);font-family:Share Tech Mono,ui-monospace,monospace}@keyframes flicker{0%,18%,22%,25%,53%,57%,to{text-shadow:0 0 4px #fff,0 0 10px var(--x),0 0 22px var(--x),0 0 44px var(--accent);opacity:1}20%,24%,55%{text-shadow:none;opacity:.75}}@keyframes pulse{0%,to{box-shadow:0 0 6px currentColor,inset 0 0 6px currentColor}50%{box-shadow:0 0 18px currentColor,0 0 32px currentColor,inset 0 0 10px currentColor}}@keyframes appear{0%{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}.app{max-width:1200px;margin:0 auto;padding:24px 16px 40px}.header{text-align:center;margin-bottom:24px}.title{margin:0;font-family:Pirata One,Share Tech Mono,serif;font-weight:400;font-size:clamp(2.2rem,7vw,4.2rem);letter-spacing:.04em;color:#ffe9fb;animation:flicker 4s infinite alternate}.subtitle{margin:4px 0 0;color:var(--muted);letter-spacing:.3em;text-transform:uppercase;font-size:.8rem}.layout{display:grid;grid-template-columns:minmax(200px,240px) auto minmax(200px,240px);gap:24px;justify-content:center;align-items:start}@media (max-width: 1120px){.layout{grid-template-columns:1fr;justify-items:center}.panel{width:100%;max-width:560px}}.panel{background:var(--bg-panel);border:1px solid var(--line);border-radius:10px;padding:16px;box-shadow:0 0 24px #b026ff1f}.panel__title{margin:0 0 12px;font-family:Pirata One,serif;font-weight:400;font-size:1.6rem;color:var(--o);text-shadow:0 0 8px var(--o)}.controls{display:flex;flex-direction:column;gap:12px}.modes{display:grid;grid-template-columns:1fr 1fr;gap:8px}.btn{font:inherit;padding:10px 12px;border-radius:6px;border:1px solid var(--accent);background:transparent;color:var(--text);cursor:pointer;letter-spacing:.1em;transition:box-shadow .2s,background .2s}.btn:hover,.btn:focus-visible{box-shadow:0 0 12px var(--accent);outline:none}.btn--active{background:#b026ff40;box-shadow:0 0 14px var(--accent)}.btn--ghost{border-color:var(--o)}.btn--ghost:hover{box-shadow:0 0 12px var(--o)}.field{display:flex;flex-direction:column;gap:4px}.field__label{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase}.field__label--x{color:var(--x)}.field__label--o{color:var(--o)}.field input{font:inherit;padding:8px 10px;background:#0c0211;border:1px solid var(--line);border-radius:6px;color:var(--text)}.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 10px var(--accent)}.field input:disabled{opacity:.6}.status{margin:4px 0;min-height:2.6em;color:var(--text)}.status--done{color:#fff;text-shadow:0 0 8px var(--x),0 0 16px var(--accent)}.board{display:grid;grid-template-columns:repeat(var(--size),var(--cell));grid-auto-rows:var(--cell);gap:2px;padding:8px;background:#0a0210;border:1px solid var(--accent);border-radius:8px;box-shadow:0 0 20px #b026ff59,inset 0 0 30px #000000e6}.cell{font:inherit;font-size:calc(var(--cell) * .62);font-weight:700;line-height:1;padding:0;background:#14051d;border:1px solid #3a1550;border-radius:3px;color:var(--text);cursor:pointer}.cell:enabled:hover{border-color:var(--accent);box-shadow:inset 0 0 8px var(--accent)}.cell:disabled{cursor:default}.cell--X{color:var(--x);text-shadow:0 0 6px var(--x),0 0 12px var(--x);animation:appear .15s ease-out}.cell--O{color:var(--o);text-shadow:0 0 6px var(--o),0 0 12px var(--o);animation:appear .15s ease-out}.cell--win{animation:pulse 1.1s ease-in-out infinite;background:#22062e}.leaderboard{width:100%;border-collapse:collapse;font-size:.9rem}.leaderboard th,.leaderboard td{padding:6px 4px;text-align:left;border-bottom:1px solid var(--line)}.leaderboard th{color:var(--muted);font-weight:400}.leaderboard tbody tr:first-child td{color:var(--x);text-shadow:0 0 6px var(--x)}.muted{color:var(--muted)}.footer{margin-top:32px;text-align:center;color:var(--muted);font-size:.75rem;letter-spacing:.2em}@media (prefers-reduced-motion: reduce){.title,.cell--win,.cell--X,.cell--O{animation:none}}