*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:linear-gradient(160deg,#eaf6ff,#f8fbff 45%,#e8f2ff);color:#17324d}.shell{width:min(680px,100%);margin:auto;padding:28px 18px 40px}.hero{text-align:center;margin-bottom:18px}.hero h1{font-size:clamp(2.2rem,8vw,4rem);margin:.1em 0}.hero p{margin:.4rem auto;max-width:540px}.eyebrow{font-size:.78rem;letter-spacing:.18em;color:#1473e6;font-weight:800}.panel{background:#fff;border:1px solid #d9ebfb;border-radius:22px;padding:22px;box-shadow:0 16px 45px #2e5f8f18}.hidden{display:none}label{display:grid;gap:7px;font-weight:700}input,button{font:inherit;border-radius:12px;border:1px solid #bcd6ed;padding:13px 14px}input{width:100%;background:#fafdff;color:#17324d;outline:none}input:focus{border-color:#1473e6;box-shadow:0 0 0 3px #1473e622}button{cursor:pointer;background:#edf6ff;color:#17324d;font-weight:750}.primary{background:#1473e6;color:#fff;border-color:#1473e6}.actions,.joinRow{display:flex;gap:10px;margin-top:14px}.joinRow input{flex:1;text-transform:uppercase;letter-spacing:.1em}.note,.muted{color:#667d91}.roomBar,.players{display:flex;justify-content:space-between;align-items:center;gap:12px}.roomBar strong{display:block;font-size:1.45rem;letter-spacing:.14em}.players{margin:18px 0}.player{flex:1;display:flex;align-items:center;gap:10px;background:#f5faff;border:1px solid #dbeaf7;padding:12px;border-radius:14px}.player b{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#e2f0ff;font-size:1.25rem}.player.active{outline:2px solid #1473e6}.status{text-align:center;font-weight:800;min-height:24px}.board{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px auto;max-width:420px}.cell{aspect-ratio:1;border:0;background:#eef7ff;font-size:clamp(2.5rem,12vw,5rem);font-weight:900;color:#1473e6}.cell.o{color:#e65c47}.cell:disabled{cursor:default;opacity:1}footer{text-align:center;margin-top:20px;color:#6d8194;font-size:.9rem}footer a{color:#1473e6}.error{color:#b42318}@media(max-width:520px){.actions,.joinRow,.players{flex-direction:column}.actions button,.joinRow button{width:100%}.shell{padding:18px 12px}.panel{padding:16px}}