:root{
  --bg:#0b1020;
  --panel:#111933cc;
  --accent:#7dd3fc;
  --ink:#e5e7eb;
  --muted:#9ca3af;
  --good:#34d399;
  --bad:#f87171;
}

*{box-sizing:border-box}
body,html{height:100%}
body{margin:0; color:var(--ink); font:16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial;
  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%);}

.bg{min-height:100vh}

.hud{position:sticky; top:0; display:flex; align-items:center; gap:.6rem; padding:.6rem 1rem;
  background: linear-gradient(180deg, #0b1020dd, #0b102000); backdrop-filter: blur(6px); border-bottom:1px solid #ffffff1a; z-index:10}

.center{display:grid; place-items:center; min-height:100vh}
.card{background:var(--panel); border:1px solid #ffffff21; border-radius:.9rem; padding:1rem; box-shadow:0 12px 36px #0009}
.content{max-width:1100px; margin:1rem auto; padding:0 1rem}

.row{display:flex; align-items:center}
.grow{flex:1}
.gap{gap:.5rem}
.between{justify-content:space-between}

.btn{appearance:none; border:1px solid #ffffff22; color:var(--ink); background:var(--panel); padding:.5rem .8rem; border-radius:.7rem; cursor:pointer; box-shadow: 0 6px 18px #0005 inset, 0 0 0 1px #0006;}
.btn.primary{background: linear-gradient(180deg, #0e2741cc, #0d1f36cc); border-color:#5eead41a; box-shadow:0 0 0 1px #6ee7b7aa inset, 0 10px 30px #0008}
.badge{font-size:.85rem; padding:.1rem .5rem; border-radius:.5rem; border:1px solid #ffffff2a; color:#b3e1ff; background:#0b345533}

.rooms{display:grid; gap:.5rem}
.room{display:flex; align-items:center; justify-content:space-between; padding:.5rem .7rem; border-radius:.6rem; background:#0d1a30; border:1px solid #ffffff1a}

.grid{display:grid; grid-template-columns: repeat(10, 28px); grid-auto-rows:28px; gap:2px; background:#0a1224; padding:10px; border-radius:12px; box-shadow: inset 0 0 0 1px #ffffff10, inset 0 0 40px #00d4ff10;}
.grid .cell{background: linear-gradient(180deg, #0f2244, #0e1b36); border-radius:6px; display:grid; place-items:center; color:#9ef3d0; font-weight:700; cursor:pointer}
.grid .cell.miss::after{content:""; width:44%; height:44%; border-radius:50%; background:radial-gradient(circle, #a5b4fc 0, #94a3b8 50%, transparent 60%); opacity:.7}
.grid .cell.hit{background: linear-gradient(180deg, #163537, #0f2526); box-shadow: inset 0 0 0 1px #34d39966, inset 0 0 30px #34d39955}

.game-grid{display:grid; grid-template-columns:1fr 320px; gap:1rem}
@media (max-width: 900px){ .game-grid{grid-template-columns:1fr} }

.chat{display:flex; flex-direction:column; gap:.6rem}
.chat-list{height:420px; overflow:auto; padding:.5rem; background:#0a1224; border-radius:.6rem; border:1px solid #ffffff1a}
.msg{margin:.25rem 0; display:flex; gap:.4rem}
.msg.you{justify-content:flex-end}
.msg .bubble{max-width:82%; padding:.4rem .6rem; border-radius:.7rem; background:#13233e; border:1px solid #ffffff18}
.msg.you .bubble{background:#0f2e53; border-color:#4dc2ff55}
.msg .meta{font-size:.7rem; color:#9fb4ff; margin-top:.1rem}
.typing{font-size:.85rem; color:#a5b4fc}
.input{flex:1; min-width:0; border-radius:.6rem; border:1px solid #ffffff22; background:#0b1224; color:var(--ink); padding:.5rem .6rem}
.hidden{display:none}