:root{--bg:#12131a;--surface:#1c1e28;--surface-2:#262938;--text:#eef0f6;--muted:#8a8fa3;--x:#ff6b6b;--o:#4dabf7;--accent:#ffd43b;--radius:14px;color:var(--text);background:var(--bg);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{background:var(--bg);min-height:100dvh;margin:0}button,input{font:inherit;color:inherit}button{cursor:pointer;border-radius:var(--radius);background:var(--surface-2);border:0;padding:.7rem 1.1rem;font-weight:600}button:disabled{cursor:default;opacity:.45}button.primary{background:var(--accent);color:#1a1a1a}button.link{color:var(--muted);background:0 0;padding:.25rem 0;font-weight:500}input{border:2px solid var(--surface-2);border-radius:var(--radius);background:var(--surface);outline:none;width:100%;padding:.7rem .9rem}input:focus{border-color:var(--accent)}.muted{color:var(--muted)}.app{max-width:480px;margin:0 auto;padding:2rem 16px}.home{flex-direction:column;gap:1.5rem;display:flex}.intro{text-align:center}.intro .title{margin-bottom:.75rem}.intro p{color:var(--muted);margin:0;font-size:1.05rem;line-height:1.55}.title .accent{color:var(--accent)}.game-list{flex-direction:column;gap:.75rem;margin:0;padding:0;list-style:none;display:flex}.game-card{border-radius:var(--radius);background:var(--surface);color:inherit;border:2px solid #0000;flex-direction:column;gap:.3rem;padding:1.1rem 1.2rem;text-decoration:none;transition:border-color .15s,background .15s;display:flex}.game-card:hover,.game-card:focus-visible{border-color:var(--accent);background:var(--surface-2);outline:none}.game-card strong{font-size:1.25rem}.game-card small{color:var(--muted)}.more{text-align:center;margin:0;font-size:.9rem}.lobby,.join-room,.notice{flex-direction:column;gap:1rem;display:flex}.back{color:var(--muted);align-self:flex-start;font-weight:500;text-decoration:none}.title{text-align:center;letter-spacing:-.02em;margin:1rem 0 1.5rem;font-size:clamp(2.4rem,11vw,3.4rem)}.title .x{color:var(--x)}.title .o{color:var(--o)}.field{color:var(--muted);flex-direction:column;gap:.4rem;font-size:.9rem;display:flex}.join{gap:.5rem;display:flex}.join input{text-transform:uppercase;letter-spacing:.3em;text-align:center;font-weight:700}.room{flex-direction:column;gap:1.25rem;display:flex}.room-header{justify-content:space-between;align-items:center;display:flex}.code{letter-spacing:.25em;background:0 0;flex-direction:column;align-items:flex-end;padding:0;font-size:1.6rem;font-weight:800;display:flex}.code small{letter-spacing:normal;color:var(--muted);font-size:.7rem;font-weight:500}.banner{border-radius:var(--radius);color:var(--accent);text-align:center;background:#5c3b00;margin:0;padding:.6rem 1rem}.seats{grid-template-columns:1fr auto 1fr;align-items:stretch;gap:.6rem;display:grid}.seat{border-radius:var(--radius);background:var(--surface);border:2px solid #0000;flex-direction:column;align-items:center;gap:.35rem;min-width:0;padding:.8rem .5rem;transition:border-color .2s;display:flex}.seat.x.turn{border-color:var(--x)}.seat.o.turn{border-color:var(--o)}.seat .mark{font-size:1.6rem;font-weight:800}.seat.x .mark{color:var(--x)}.seat.o .mark{color:var(--o)}.seat .name{text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:.35rem;max-width:100%;display:flex;overflow:hidden}.seat button{padding:.35rem .8rem;font-size:.85rem}.seat .score{font-size:1.4rem;font-weight:700}.dot{background:var(--muted);border-radius:50%;flex:none;width:.5rem;height:.5rem}.dot.online{background:#51cf66}.draws{color:var(--muted);flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:.8rem;font-size:.75rem;display:flex}.draws span{color:var(--text);font-size:1.1rem;font-weight:700}.status{text-align:center;min-height:1.5em;margin:0;font-size:1.2rem;font-weight:600}.board{aspect-ratio:1;grid-template-columns:repeat(3,1fr);gap:.5rem;display:grid}.cell{aspect-ratio:1;background:var(--surface);padding:0;font-size:clamp(2.5rem,16vw,4.5rem);font-weight:800;transition:background .15s,transform .1s}.cell:not(:disabled):hover{background:var(--surface-2)}.cell:not(:disabled):active{transform:scale(.96)}.cell:disabled{opacity:1}.cell.x{color:var(--x)}.cell.o{color:var(--o)}.cell.win{background:var(--surface-2);box-shadow:inset 0 0 0 3px var(--accent)}.room-footer{text-align:center;flex-direction:column;align-items:center;gap:.25rem;display:flex}.room-footer p{margin:0;font-size:.9rem}.notice{text-align:center;align-items:center;padding:2rem 0}