:root{
  --bg:#0b1020; --panel:#111933cc; --ink:#e5e7eb; --accent:#7dd3fc; --bad:#f87171; --good:#34d399;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; color:var(--ink); background: radial-gradient(1200px 800px at 20% 10%, #101735 0%, #0b1020 55%, #070a16 100%), radial-gradient(800px 600px at 80% 80%, #0c1228 0%, #0b1020 60%, #070a16 100%); font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto}
.container{max-width:960px;margin:0 auto;padding:24px}
.hud{display:flex;gap:.6rem;align-items:center;padding:12px 16px;background:linear-gradient(180deg,#0b1020bb 0,#0b102000);position:sticky;top:0;backdrop-filter:blur(6px);z-index:5}
.btn{appearance:none;border:1px solid #ffffff22;background:var(--panel);color:var(--ink);padding:.6rem .9rem;border-radius:.7rem;cursor:pointer}
.btn.primary{background:linear-gradient(180deg,#0e2741cc,#0d1f36cc);box-shadow:0 0 0 1px #6ee7b7aa inset,0 10px 30px #0008}
.grid{display:grid;gap:10px}
.card{background:var(--panel);border:1px solid #ffffff21;border-radius:12px;padding:16px;box-shadow:0 12px 36px #0009}
h1,h2,h3{margin:.4rem 0 1rem}
.rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.room{display:flex;justify-content:space-between;align-items:center}
.badge{font-size:.8rem;padding:.15rem .5rem;border-radius:.5rem;border:1px solid #ffffff1a;color:#b3e1ff;background:#0b345533}
.top-actions{display:flex;gap:.5rem;align-items:center;justify-content:space-between;margin-bottom:12px}
.share{display:flex;gap:.5rem;align-items:center}
.whatsapp{display:inline-flex;align-items:center;gap:.3rem;border:1px solid #25D36655;padding:.5rem .7rem;border-radius:.6rem;background:#0e1a30;color:#b9ffe0;text-decoration:none}
.status{position:fixed;top:10px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid #ffffff22;border-radius:999px;padding:.35rem .8rem;font-weight:600}
.boards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.board{background:#0a1224;border:1px solid #ffffff18;border-radius:12px;padding:10px}
.board h3{margin:0 0 8px 0;font-size:1rem}
.grid10{display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);gap:2px}
.cell{background:linear-gradient(180deg,#0f2244,#0e1b36);border-radius:4px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;font-size:12px;user-select:none;cursor:pointer}
.cell.ship{background:linear-gradient(180deg,#182a3d,#152435);box-shadow:inset 0 0 0 1px #6ee7b733,inset 0 0 24px #5eead420}
.cell.miss::after{content:'';width:40%;height:40%;background:radial-gradient(circle,#a5b4fc 0,#94a3b8 50%,transparent 60%);border-radius:50%}
.cell.hit{background:linear-gradient(180deg,#163537,#0f2526);box-shadow:inset 0 0 0 1px #34d39966,inset 0 0 30px #34d39955}
.toolbar{display:flex;gap:.5rem;align-items:center;margin:10px 0 16px 0}
.small{font-size:.85rem;opacity:.85}
.center{display:grid;place-items:center;height:calc(100vh - 120px)}
.title{display:flex;align-items:center;gap:.6rem;font-weight:700;letter-spacing:.3px}
.menu-buttons{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center}
a.btn{text-decoration:none}
.toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:#0a1a2e;border:1px solid #6ee7b744;color:#c8e9ff;padding:.6rem .9rem;border-radius:.6rem;box-shadow:0 20px 60px #000c;opacity:0;pointer-events:none;transition:opacity .25s ease}
.toast.show{opacity:1}
.turn{font-weight:700}
.online{color:#9ef3d0}
.offline{color:#fca5a5}