:root{--navy-0: #071320;--navy-1: #0a1c2e;--navy-2: #10293f;--line: #1d3a52;--foam: #58d6c6;--foam-dim: #2f7d78;--signal: #ff7a3c;--signal-soft: #f4a259;--sunk: #d1394b;--ink: #dce8f2;--muted: #7f99ac;--mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;--display: "Georgia", "Iowan Old Style", "Times New Roman", serif}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--ink);font-family:var(--mono);background:radial-gradient(1200px 600px at 70% -10%,rgba(88,214,198,.08),transparent),linear-gradient(160deg,var(--navy-1),var(--navy-0));background-attachment:fixed}.app{max-width:1000px;margin:0 auto;padding:1.2rem 1.2rem 3rem}.topbar{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:.7rem}.brand{font-family:var(--display);font-size:2rem;letter-spacing:.14em;text-transform:uppercase;margin:0;font-weight:700}.brand span{color:var(--signal)}.conn{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;padding:.2rem .6rem;border:1px solid var(--line);border-radius:999px}.conn.on{color:var(--foam);border-color:var(--foam-dim)}.conn.off{color:var(--muted)}.stage{margin-top:1.6rem}.panel{background:linear-gradient(180deg,#10293fb3,#0a1c2eb3);border:1px solid var(--line);border-radius:10px;padding:1.5rem;box-shadow:0 20px 60px -30px #000c}h2{font-family:var(--display);letter-spacing:.08em;text-transform:uppercase;margin-top:0}.muted{color:var(--muted)}.lede{font-size:1.05rem;line-height:1.6;color:var(--ink)}button{font-family:var(--mono);font-size:.85rem;letter-spacing:.06em;color:var(--ink);background:var(--navy-2);border:1px solid var(--line);border-radius:6px;padding:.55rem .9rem;cursor:pointer;transition:all .14s ease-out}button:hover:not(:disabled){border-color:var(--foam-dim);color:var(--foam)}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:var(--signal);border-color:var(--signal);color:#221007;font-weight:700}button.primary:hover:not(:disabled){background:var(--signal-soft);border-color:var(--signal-soft);color:#221007}button.big{font-size:1.05rem;padding:.9rem 1.6rem}.landing-actions{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-top:1.5rem}.or{color:var(--muted);letter-spacing:.3em;text-transform:uppercase;font-size:.75rem}.join-form{display:flex;gap:.5rem}input{font-family:var(--mono);letter-spacing:.25em;text-transform:uppercase;background:var(--navy-0);border:1px solid var(--line);border-radius:6px;color:var(--ink);padding:.55rem .8rem;font-size:1rem;width:11rem;text-align:center}input:focus{outline:none;border-color:var(--foam-dim)}.sharebar{margin:0 0 1.2rem}.sharebar-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.room-code{font-size:1.6rem;letter-spacing:.35em;color:var(--foam);background:var(--navy-0);padding:.3rem .9rem;border:1px dashed var(--foam-dim);border-radius:6px}.grid{display:inline-flex;flex-direction:column;gap:3px;-webkit-user-select:none;user-select:none}.grid-row{display:flex;gap:3px;align-items:center}.grid-rownum,.grid-colhead{width:1.4rem;text-align:center;color:var(--muted);font-size:.7rem}.grid-colhead{width:2rem}.cell{width:2rem;height:2rem;padding:0;border-radius:3px;border:1px solid var(--line);background:#1f5a602e;color:var(--ink);font-size:.95rem;display:flex;align-items:center;justify-content:center;transition:background .12s,transform 80ms}.cell:disabled{cursor:default;opacity:1}.cell.water{background:#1f5a6029}.cell.ship{background:#48607a;border-color:#5c7690}.cell.aim:hover{background:#ff7a3c59;transform:scale(1.06);cursor:crosshair}.cell.hit{background:#ff7a3c47;color:var(--signal);border-color:var(--signal)}.cell.sunk{background:#d1394b66;color:#ffd7dc;border-color:var(--sunk)}.cell.miss{color:var(--muted)}.placement-body{display:flex;gap:2rem;flex-wrap:wrap;margin-top:1rem}.tray{display:flex;flex-direction:column;gap:.8rem;min-width:15rem}.tray-ships{display:flex;flex-direction:column;gap:.4rem}.ship-chip{display:flex;justify-content:space-between;align-items:center;text-transform:capitalize}.ship-chip.active{border-color:var(--signal);color:var(--signal)}.ship-chip.done{color:var(--foam);border-color:var(--foam-dim)}.ship-chip.done.active{color:var(--signal);border-color:var(--signal)}.ship-len{letter-spacing:.15em;color:var(--foam-dim)}.tray-controls{display:flex;flex-wrap:wrap;gap:.4rem}.ready-btn{margin-top:.5rem}.turn-banner{text-align:center;padding:.7rem;border-radius:6px;letter-spacing:.1em;text-transform:uppercase;font-size:.85rem;margin-bottom:1.2rem;border:1px solid var(--line)}.turn-banner.you{color:var(--signal);border-color:var(--signal);background:#ff7a3c1a}.turn-banner.them{color:var(--muted)}.boards{display:flex;gap:2.5rem;flex-wrap:wrap;justify-content:center}.board-wrap h3{font-family:var(--display);letter-spacing:.1em;text-transform:uppercase;font-size:.9rem;color:var(--muted);margin:0 0 .6rem}.result{text-align:center}.result h2{font-size:2.4rem}.result h2.victory{color:var(--foam)}.result h2.defeat{color:var(--sunk)}.toast{margin-top:1rem;background:#d1394b26;border:1px solid var(--sunk);color:#ffd7dc;padding:.7rem 1rem;border-radius:6px;display:flex;align-items:center;justify-content:space-between;gap:.6rem}.toast.notice{background:#58d6c61f;border-color:var(--foam-dim);color:var(--foam)}.toast-x{background:transparent;border:none;color:inherit;font-size:1.2rem;line-height:1;padding:0 .3rem;cursor:pointer}.countdown{font-variant-numeric:tabular-nums;padding:.1rem .5rem;border:1px solid var(--line);border-radius:999px;color:var(--foam);font-size:.85rem}.countdown.low{color:var(--signal);border-color:var(--signal)}.placement-head{display:flex;align-items:center;gap:.8rem;justify-content:space-between}.turn-banner{display:flex;align-items:center;justify-content:center;gap:.8rem}button:focus-visible,input:focus-visible,.cell:focus-visible{outline:2px solid var(--foam);outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.spinner{width:2rem;height:2rem;margin:1rem 0;border:3px solid var(--line);border-top-color:var(--foam);border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.foot{margin-top:2rem;text-align:center;color:var(--muted);font-size:.72rem;letter-spacing:.15em}