: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 win-glow{0%,to{box-shadow:0 0 3px color-mix(in srgb,currentColor 45%,transparent),inset 0 0 3px color-mix(in srgb,currentColor 30%,transparent)}50%{box-shadow:0 0 9px color-mix(in srgb,currentColor 55%,transparent),inset 0 0 5px color-mix(in srgb,currentColor 35%,transparent)}}@keyframes status-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%,to{content:"..."}}@keyframes radar{0%{transform:scale(.3);opacity:1}to{transform:scale(1.6);opacity:0}}@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}.ornament{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px auto 0;max-width:360px}.ornament__line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--accent));opacity:.7}.ornament__line:last-child{background:linear-gradient(90deg,var(--accent),transparent)}.ornament__gem{width:7px;height:7px;transform:rotate(45deg);border:1px solid var(--x);box-shadow:0 0 6px var(--x)}.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}.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}.field input[aria-invalid=true]{border-color:#ff4d6d}.field__error{color:#ff7a93;font-size:.8rem}.btn--primary{border-color:var(--x);background:#ff2bd61f}.btn--primary:hover,.btn--primary:focus-visible{box-shadow:0 0 12px var(--x)}.btn--lg{padding:14px 48px;font-size:1.15rem;letter-spacing:.2em;text-transform:uppercase}.turn{display:flex;flex-direction:column;gap:10px}.turn__players{--gap: 6px;position:relative;display:flex;flex-direction:column;gap:var(--gap)}.turn__glider{position:absolute;left:0;right:0;top:0;height:calc((100% - var(--gap)) / 2);border:1px solid var(--c, var(--line));border-radius:6px;box-shadow:0 0 10px color-mix(in srgb,var(--c, transparent) 35%,transparent),inset 0 0 14px color-mix(in srgb,var(--c, transparent) 12%,transparent);pointer-events:none;transition:transform .5s cubic-bezier(.65,0,.35,1),border-color .5s,box-shadow .5s,opacity .3s}.turn__players--X .turn__glider{--c: var(--x);transform:translateY(0)}.turn__players--O .turn__glider{--c: var(--o);transform:translateY(calc(100% + var(--gap)))}.turn__players--none .turn__glider{opacity:0}.chip{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;opacity:.5;transition:opacity .5s ease,border-color .5s ease}.chip--X{--c: var(--x)}.chip--O{--c: var(--o)}.chip__mark{color:var(--c);font-weight:700;text-shadow:0 0 6px var(--c);width:1ch}.chip__name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chip__tag{color:var(--muted);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase}.chip--active,.chip--won{opacity:1;border-color:transparent}.status{margin:0;min-height:1.4em;font-size:1.05rem;letter-spacing:.06em;color:var(--text)}.status__text{display:inline-block;animation:status-in .4s ease-out}.status--done{color:#fff;text-shadow:0 0 6px color-mix(in srgb,var(--x) 60%,transparent)}.dots:after{content:"";display:inline-block;width:1.5em;text-align:left;animation:dots 1.2s steps(4,end) infinite}.controls__hint{align-self:center;text-align:center;font-size:.85rem}.controls__actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.home{display:flex;flex-direction:column;align-items:center;gap:28px}.hero{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:560px}.hero__field{width:100%;max-width:420px}.hero__field input{text-align:center;font-size:1.05rem}.hero__field .field__label{text-align:center;color:var(--muted)}.hero__field .field__error{text-align:center}.hero__actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}.hero__actions .btn--lg{padding:14px 12px}@media (max-width: 520px){.hero__actions{grid-template-columns:1fr}}.rules{width:100%;color:var(--muted)}.rules summary{cursor:pointer;text-align:center;letter-spacing:.15em}.rules summary:hover{color:var(--text)}.rules ul{margin:12px 0 0;padding-left:20px;line-height:1.6}.home__panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;width:100%;max-width:820px}@media (max-width: 720px){.home__panels{grid-template-columns:1fr}}.recent{list-style:none;margin:0;padding:0;font-size:.9rem}.recent li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line)}.searching{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:460px;margin:0 auto;text-align:center}.searching p{margin:0}.searching .setup__actions{width:100%}.setup__actions{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px}.radar{width:72px;height:72px;border-radius:50%;border:1px solid var(--o);box-shadow:0 0 12px color-mix(in srgb,var(--o) 40%,transparent);position:relative}.radar:before,.radar:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:1px solid var(--accent);animation:radar 2.4s ease-out infinite}.radar:after{animation-delay:1.2s}.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}.board{transition:box-shadow .5s ease,border-color .5s ease}.board--waiting{border-color:var(--line);box-shadow:0 0 10px #b026ff26,inset 0 0 30px #000000e6}.board--waiting .cell:not(.cell--X):not(.cell--O){cursor:wait}.cell{transition:background-color .5s ease,border-color .3s ease}.board--waiting .cell:not(.cell--X):not(.cell--O){background:#10041a}.cell--last{border-color:color-mix(in srgb,currentColor 70%,transparent);box-shadow:inset 0 0 6px color-mix(in srgb,currentColor 45%,transparent)}.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:win-glow 2.4s ease-in-out infinite;background:#1c0626;border-color:color-mix(in srgb,currentColor 50%,transparent);text-shadow:0 0 4px currentColor}.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,.status__text,.radar:before,.radar:after{animation:none}.turn__glider,.chip,.board,.cell{transition:none}}