:root{--bg:#0f1220;--bg-soft:#171b2e;--card:#1c2138;--card-2:#232a49;--text:#eef1fb;--muted:#9aa3c7;--line:#2e3660;--accent:#7c5cff;--accent-2:#22d3ee;--x:#ff7a90;--o:#4dc3ff;--ok:#34d399;--warn:#fbbf24;--err:#fb7185;--radius:14px}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:radial-gradient(1200px 800px at 80% -10%, #26305e 0%, transparent 60%), radial-gradient(900px 700px at -10% 110%, #1b2a4a 0%, transparent 55%), var(--bg);color:var(--text);min-height:100vh;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.shell{max-width:1080px;margin:0 auto;padding:28px 20px 60px}h1{letter-spacing:-.02em;margin:0;font-size:1.7rem;line-height:1.2}h2{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin:0 0 12px;font-size:.78rem;font-weight:700}.logo{align-items:center;gap:12px;margin-bottom:22px;display:flex}.logo .mark{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#fff;border-radius:12px;flex-shrink:0;place-items:center;width:44px;height:44px;font-size:1.25rem;font-weight:800;display:grid}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px}label{color:var(--muted);margin-bottom:6px;font-size:.85rem;display:block}input{background:var(--bg-soft);width:100%;color:var(--text);border:1px solid var(--line);border-radius:10px;outline:none;padding:10px 12px;font-size:.95rem}input:focus{border-color:var(--accent)}input:disabled{opacity:.55}button{cursor:pointer;color:#fff;background:linear-gradient(135deg, var(--accent), #5b3df0);border:1px solid #0000;border-radius:10px;padding:10px 16px;font-size:.95rem;font-weight:600;transition:transform 60ms,filter .15s}button:hover:not(:disabled){filter:brightness(1.12)}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.45;cursor:not-allowed}button.ghost{background:var(--card-2);border-color:var(--line);color:var(--text)}button.small{padding:7px 12px;font-size:.85rem}.mt{margin-top:12px}.row{align-items:center;gap:10px;display:flex}.col{flex-direction:column;gap:10px;display:flex}.muted{color:var(--muted);margin:4px 0 0}.small{font-size:.82rem}.notices{min-height:1.2em;margin:10px 0 0;font-size:.88rem}.notice-error{color:var(--err)}.notice-ok{color:var(--ok)}.layout{grid-template-columns:400px 1fr;align-items:start;gap:18px;display:grid}@media (width<=880px){.layout{grid-template-columns:1fr}}.wait-list{flex-direction:column;gap:10px;display:flex}.wait-item{background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;display:flex}.wait-item .title{font-weight:700}.wait-item .meta{color:var(--muted);font-size:.85rem}.pulse{animation:1.6s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.45}}.game-head{justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px;display:flex}.back-link{color:var(--muted);white-space:nowrap;font-size:.9rem;text-decoration:none}.back-link:hover{color:var(--text)}.players{gap:14px;margin-bottom:16px;display:flex}@media (width<=560px){.players{flex-direction:column}}.player-chip{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);flex:1;align-items:center;gap:12px;padding:12px 16px;display:flex}.player-chip .role{border-radius:10px;flex-shrink:0;place-items:center;width:36px;height:36px;font-size:1.2rem;font-weight:800;display:grid}.player-chip .role.x{color:var(--x);background:color-mix(in srgb, var(--x) 15%, transparent)}.player-chip .role.o{color:var(--o);background:color-mix(in srgb, var(--o) 15%, transparent)}.player-chip .who{font-weight:700}.player-chip .tag{color:var(--muted);font-size:.75rem}.game-body{grid-template-columns:minmax(0,430px) minmax(0,1fr);align-items:stretch;gap:18px;display:grid}@media (width<=880px){.game-body{grid-template-columns:1fr}}.board{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.cell{aspect-ratio:1;background:var(--bg-soft);border:1px solid var(--line);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text);border-radius:12px;place-items:center;padding:0;font-size:clamp(2rem,6vw,3.2rem);font-weight:800;transition:background .12s;display:grid}.cell:hover:not(:disabled){background:var(--card-2)}.cell:disabled{cursor:default}.cell.x{color:var(--x)}.cell.o{color:var(--o)}.cell.win{background:color-mix(in srgb, var(--accent) 28%, var(--bg-soft));border-color:var(--accent)}.status-line{text-align:center;margin-top:14px;font-size:1rem;font-weight:600}.status-line .you{color:var(--ok)}.result{text-align:center;margin-top:14px;font-size:1.25rem;font-weight:800}.chat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);flex-direction:column;min-height:420px;display:flex;overflow:hidden}.chat-head{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.chat-head .title{font-weight:700}.badge{letter-spacing:.02em;border-radius:999px;padding:3px 10px;font-size:.72rem;font-weight:700}.badge.ok{color:var(--ok);background:color-mix(in srgb, var(--ok) 15%, transparent)}.badge.pending{color:var(--warn);background:color-mix(in srgb, var(--warn) 15%, transparent)}.badge.off{color:var(--muted);background:var(--card-2)}.badge.err{color:var(--err);background:color-mix(in srgb, var(--err) 15%, transparent)}.chat-log{flex-direction:column;flex:1;gap:8px;min-height:280px;max-height:430px;padding:14px;display:flex;overflow-y:auto}.msg{overflow-wrap:break-word;border-radius:12px;max-width:78%;padding:8px 12px;font-size:.92rem;line-height:1.35}.msg .from{color:var(--muted);margin-bottom:2px;font-size:.7rem}.msg.them{background:var(--bg-soft);border:1px solid var(--line);align-self:flex-start}.msg.own{background:linear-gradient(135deg, var(--accent), #5b3df0);align-self:flex-end}.msg.own .from{color:#ffffffb8}.chat-empty{color:var(--muted);text-align:center;max-width:300px;margin:auto;padding:0 12px;font-size:.88rem}.chat-status{text-align:center;background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;max-width:330px;margin:auto;padding:12px 14px;font-size:.88rem;line-height:1.5}.chat-status p{color:var(--muted);margin:8px 0 0}.chat-status strong{font-size:.92rem;display:block}.chat-status.failed{border-color:color-mix(in srgb, var(--warn) 45%, var(--line))}.chat-status.failed strong{color:var(--warn)}.chat-status .game-ok{color:var(--text);opacity:.85}.chat-status button{margin-top:10px}.chat-form{border-top:1px solid var(--line);gap:8px;padding:12px;display:flex}