:root{
  --bg:#0b1020; --bg2:#0e1430; --card:#121932; --ink:#e8ecff; --muted:#aab3d9;
  --line:#233055; --accent:#6ea8fe; --ok:#22c55e; --warn:#f59e0b; --danger:#ef4444;
  --pad:12px; --radius:16px;

  --blur: 6px;
  --panel-alpha: .92;
  --bar-alpha: .85;
  --shadow: 0 8px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}

html,body{
  margin:0; height:100%;
  background:linear-gradient(180deg,var(--bg),var(--bg2)); color:var(--ink);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  overscroll-behavior:none;
  overflow:hidden; /* no page scroll */
}

/* Rotate overlay */
.rotate{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:linear-gradient(180deg,var(--bg),var(--bg2)); z-index:1000;
  text-align:center; padding:24px;
}
.rotate .box{
  background:rgba(18,25,50,.93); border:1px solid var(--line); border-radius:14px; padding:16px 18px;
  max-width:360px; box-shadow: var(--shadow);
}
.rotate .title{ font-weight:700; margin-bottom:6px }
@media (orientation:portrait){ .rotate{display:flex} }

/* Stage wrapper */
.stage-wrap{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
}
.stage{
  position:relative; border-radius:14px; border:1px solid var(--line);
  overflow:hidden; background:#0b1020; box-shadow: var(--shadow);
}
canvas{display:block; touch-action:manipulation}

/* HUD root */
.hud{position:absolute; inset:0; pointer-events:none}
.hud *{pointer-events:auto}

/* Top bar (Menu • Turn • Timer • Wind) */
.topbar{
  position:absolute; left:10px; right:10px; top:10px;
  display:flex; gap:10px; align-items:center; justify-content:space-between;
  background:rgba(18,25,50,var(--bar-alpha)); backdrop-filter: blur(var(--blur));
  border:1px solid var(--line); border-radius:999px; padding:6px 10px; z-index:35;
  font-size:14px;
}
.topbar .left, .topbar .mid, .topbar .right{display:flex; align-items:center; gap:10px}
.chip{
  padding:4px 10px; border:1px solid var(--line); border-radius:999px; background:#0f1633;
}
.small{color:var(--muted);font-size:12px}
.timer{background:#0f203d}

/* Tiny inline wind meter */
.meter{position:relative; width:120px; height:8px; background:#1a2346; border-radius:99px; overflow:hidden}
.meter .left,.meter .right{position:absolute; top:0; height:100%}
.meter .left{right:50%; background:#6ea8fe;}
.meter .right{left:50%; background:#ef4444;}
.meter .mid{position:absolute; left:50%; top:-2px; bottom:-2px; width:2px; background:#27335f; transform:translateX(-1px); border-radius:99px}

/* Bottom dock */
.dock{
  position:absolute; left:10px; right:10px; bottom:10px;
  display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
  background:rgba(18,25,50,var(--bar-alpha)); backdrop-filter: blur(var(--blur));
  border:1px solid var(--line); border-radius:16px; padding:10px;
}
.btn{
  appearance:none; border:1px solid var(--line); background:var(--accent); color:#081225;
  font-weight:700; border-radius:12px; padding:10px 14px; cursor:pointer
}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:#141c3a; color:var(--ink)}
.btn.alt{background:#a78bfa; color:#081225}
.top-btn{padding:6px 12px}

/* Weapon picker */
.weaponBadge{
  border:1px solid var(--line); background:#0f1633; color:var(--ink);
  padding:8px 12px; border-radius:999px; cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:8px; min-width:150px
}
.weaponMenu{
  position:absolute; bottom:58px; left:0;
  background:rgba(18,25,50,.95); border:1px solid var(--line); border-radius:12px; padding:6px;
  display:none; flex-direction:column; gap:6px; z-index:40; min-width:210px
}
.weaponMenu .opt{
  padding:8px 10px; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  border:1px solid transparent; gap:10px
}
.weaponMenu .opt:hover{ background:#0f1633; border-color:#2a3560; }
.weaponMenu .opt.active{ background:#a78bfa; color:#081225; border-color:#a78bfa; }
.ammoPips{font-size:12px;color:var(--muted)}
.fuseChip{
  border:1px solid var(--line); padding:2px 6px; border-radius:999px; font-size:12px; background:#141c3a; cursor:pointer; margin-left:6px;
}

/* Fire + charge bar */
.fireWrap{position:relative; display:flex; align-items:center; justify-content:center}
.fireBtn{ width:100%; min-height:44px; }
.chargeBar{
  position:absolute; left:10px; right:10px; bottom:6px; height:3px;
  background:linear-gradient(90deg,#22c55e,#f59e0b,#ef4444);
  width:0%; border-radius:99px; transition:width .06s linear; pointer-events:none;
}

/* Zoom */
.zoomRow{display:flex; gap:8px}
.zoomRow .btn{min-width:44px}

/* Keyboard help chip */
.kbhelp{
  position:absolute; right:12px; bottom:86px; opacity:.85; display:none;
}

/* Menu panel */
.menuPanel{
  position:absolute; top:60px; left:50%; transform:translateX(-50%);
  width:min(92%,760px);
  background:rgba(10,14,30,var(--panel-alpha)); border:1px solid var(--line);
  border-radius:16px; padding:14px; display:none; z-index:50;
  max-height:calc(100vh - 90px); overflow:auto; -webkit-overflow-scrolling:touch;
}
.menuGrid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.menuRow{display:flex; align-items:center; justify-content:space-between; gap:10px}
.menuRow > * {font-size:14px}
.sel, .txt{
  appearance:none; background:#0f1633; color:#e8ecff; border:1px solid var(--line); border-radius:10px; padding:8px 10px;
}
.chk{
  accent-color:#6ea8fe; width:16px; height:16px; vertical-align:middle; margin-right:6px;
}
label{ cursor:pointer; }
.miniPreview{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#0b1020}
.miniBar{display:flex; gap:8px; margin-top:8px; align-items:center}
.miniBtn{padding:6px 10px; border:1px solid var(--line); background:#141c3a; border-radius:8px; cursor:pointer}
.menuActions{display:flex; gap:10px; justify-content:flex-end; margin-top:12px}

/* Winner banner */
.banner{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center; z-index:60;
  background:rgba(0,0,0,.35); backdrop-filter:blur(4px)
}
.card{
  background:rgba(18,25,50,.95); border:1px solid var(--line); border-radius:16px; padding:18px; min-width:280px; text-align:center;
  box-shadow: var(--shadow);
}
.winTxt{font-weight:800;font-size:18px;margin-bottom:6px}
.stats{color:var(--muted); font-size:13px; margin:8px 0 12px}
.card .actions .btn{margin:0 6px}

/* Nameplates (HP only) */
.nameplate{
  position:absolute; transform:translate(-50%, -100%); background:rgba(18,25,50,.9); border:1px solid var(--line);
  padding:2px 8px; border-radius:999px; font-size:12px; pointer-events:none
}

/* Mobile joystick (hidden by default; JS toggles visibility) */
.joystick{
  position:absolute; left:16px; bottom:84px; width:120px; height:120px; z-index:45;
  pointer-events:none; opacity:0; transform:translateZ(0);
}
.joystick .ring{
  position:absolute; inset:0; border-radius:50%;
  background:rgba(18,25,50,.35); border:1px solid var(--line); backdrop-filter:blur(2px);
}
.joystick .stick{
  position:absolute; left:50%; top:50%; width:56px; height:56px; margin-left:-28px; margin-top:-28px;
  border-radius:50%; background:rgba(110,168,254,.85); border:1px solid rgba(255,255,255,.25);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}

/* Utility states the JS will toggle */
.is-touch .joystick{opacity:1; pointer-events:auto}
.hidden{display:none!important}

/* Responsive tweaks */
@media (max-width:840px){
  .menuGrid{grid-template-columns:1fr}
}
@media (max-width:700px){
  .topbar{font-size:13px}
  .chip{padding:4px 8px}
  .weaponBadge{min-width:0}
  .joystick{left:12px; bottom:78px; width:108px; height:108px}
  .joystick .stick{width:50px;height:50px;margin-left:-25px;margin-top:-25px}
}