*{box-sizing:border-box}body{color:#e5e7eb;background:#0f172a;margin:0;font-family:system-ui,Arial,sans-serif}.screen{place-items:center;min-height:100vh;padding:24px;display:grid}.card{text-align:center;background:#111827;border:1px solid #334155;border-radius:20px;width:min(100%,520px);padding:32px;box-shadow:0 20px 60px #00000059}h1{margin-top:0;font-size:2.2rem}p{color:#cbd5e1;line-height:1.5}.actions{gap:12px;margin:28px 0 18px;display:grid}button{cursor:pointer;color:#082f49;background:#38bdf8;border:0;border-radius:12px;padding:14px 18px;font-size:1rem;font-weight:700}button:hover{background:#7dd3fc}.small{color:#94a3b8;font-size:.9rem}.game-code{color:#e0f2fe;letter-spacing:.2em;background:#020617;border:1px solid #38bdf8;border-radius:14px;margin:24px auto;padding:18px;font-size:2rem;font-weight:800}.text-input{text-align:center;text-transform:uppercase;color:#e5e7eb;background:#020617;border:1px solid #334155;border-radius:12px;width:100%;padding:14px;font-size:1.2rem}.secondary{color:#e5e7eb;background:#334155}.secondary:hover{background:#475569}.wide{width:min(100%,760px)}.board{grid-template-columns:repeat(10,1fr);gap:4px;margin-top:24px;display:grid}.cell{aspect-ratio:1;background:#0f172a;border:1px solid #334155;border-radius:6px}.placement-panel{gap:12px;margin-top:20px;display:grid}.cell.ship{background:#38bdf8;border-color:#7dd3fc}
