:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#111827;background:#fff;--blue:#2563eb;--blue-dark:#1d4ed8;--blue-light:#eff6ff;--border:#dbe1ea;--muted:#6b7280;--danger:#dc2626}*{box-sizing:border-box}body{margin:0;background:#fff}button,input{font:inherit}button{cursor:pointer}.page{min-height:100vh;background:#fff}.topbar{width:min(980px,calc(100% - 32px));height:68px;margin:auto;display:flex;align-items:center;border-bottom:1px solid #eef1f5}.brand{border:0;background:none;font-weight:750;font-size:18px;color:#111827;padding:6px 0}.content{width:min(980px,calc(100% - 32px));margin:auto}.hero{max-width:620px;margin:auto;padding:125px 0 60px;text-align:center}.eyebrow{color:var(--blue);font-size:11px;font-weight:800;letter-spacing:.12em;margin-bottom:10px}h1{font-size:clamp(40px,7vw,64px);line-height:1;letter-spacing:-.05em;margin:0 0 18px}h2{font-size:28px;letter-spacing:-.025em;margin:0 0 8px}.muted{color:var(--muted);line-height:1.55}.actions{display:grid;gap:12px;max-width:360px;margin:34px auto}.primary,.secondary{min-height:46px;border-radius:8px;padding:0 18px;font-weight:700}.primary{color:#fff;background:var(--blue);border:1px solid var(--blue)}.primary:hover{background:var(--blue-dark)}.secondary{color:#1f2937;background:#fff;border:1px solid var(--border)}.secondary:hover{background:#f9fafb}.large{min-height:52px}.full{width:100%}.card{border:1px solid var(--border);border-radius:12px;background:#fff;padding:28px;margin:65px auto}.narrow{max-width:440px}.center{text-align:center}.back{border:0;background:none;color:var(--blue);font-weight:700;padding:0 0 24px}label{display:block;font-size:14px;font-weight:700;margin:24px 0 8px}input{width:100%;height:48px;border:1px solid var(--border);border-radius:8px;padding:0 13px;outline:none;margin-bottom:12px;text-transform:uppercase}input:focus{border-color:var(--blue)}.hint{font-size:12px;color:var(--muted)}.error{color:var(--danger);min-height:20px;margin:12px 0 0}.spinner{width:32px;height:32px;border:3px solid #e5e7eb;border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite;margin:4px auto 24px}@keyframes spin{to{transform:rotate(360deg)}}.game-layout{width:min(620px,calc(100% - 32px));margin:auto;padding:45px 0}.game-card{border:1px solid var(--border);border-radius:14px;padding:24px;background:#fff}.game-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.game-header h1{font-size:28px;margin:0}.status{color:var(--blue);background:var(--blue-light);border-radius:999px;padding:7px 11px;font-size:13px;font-weight:800;white-space:nowrap}.players{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:24px 0 18px}.player{border:1px solid var(--border);border-radius:8px;padding:10px 12px;display:flex;gap:8px;align-items:center;font-weight:800}.dot{width:8px;height:8px;border-radius:50%;background:#d1d5db}.player.connected .dot{background:var(--blue)}.board{width:min(500px,100%);margin:20px auto;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.cell{aspect-ratio:1;border:1px solid #cfd6e0;background:#fff;border-radius:8px;font-size:clamp(48px,12vw,84px);font-weight:700;color:var(--blue)}.cell:hover:not(:disabled){background:var(--blue-light);border-color:#93b4f8}.cell.winning{background:var(--blue-light);border-color:var(--blue)}.game-message{min-height:24px;text-align:center;font-weight:700;margin:14px 0}.game-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.hidden{display:none!important}@media(max-width:560px){.hero{padding-top:85px}.game-card{padding:16px}.game-header{flex-direction:column}.status{align-self:flex-start}}