#hud-root{position:absolute;inset:0;z-index:30;pointer-events:none;}

#weapon-canvas{
  position:absolute;left:68%;bottom:0;transform:translateX(-50%);
  width:min(60vw,360px);height:min(60vw,360px);pointer-events:none;
  image-rendering:pixelated;
}

/* ── Touch controls: responsive grid ─────────────────────────────── */
#touch-controls{position:absolute;inset:0;}

/* Joystick / dpad — bottom-left */
.pad{
  position:absolute;
  left:clamp(16px, 4vw, 32px);
  bottom:clamp(16px, 4vh, 32px);
  width:clamp(90px, 18vw, 130px);
  height:clamp(90px, 18vw, 130px);
  border-radius:50%;
  background:rgba(255,255,255,.06);
  border:2px solid rgba(255,255,255,.18);
  pointer-events:auto;touch-action:none;
}
.pad .stick{
  position:absolute;width:40%;height:40%;border-radius:50%;
  background:rgba(255,138,61,.55);border:2px solid var(--accent);
  left:30%;top:30%;pointer-events:none;
}
.pad.dpad{border-radius:14px;background:transparent;border:none;}
.dpad-btn{
  position:absolute;width:38px;height:38px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);border-radius:8px;pointer-events:auto;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;touch-action:none;
}

/* Fire — bottom-right */
.fire-btn{
  position:absolute;
  right:clamp(16px, 5vw, 36px);
  bottom:clamp(16px, 4vh, 36px);
  width:clamp(64px, 16vw, 88px);
  height:clamp(64px, 16vw, 88px);
  border-radius:50%;
  background:rgba(255,84,112,.25);border:2px solid var(--danger);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:clamp(9px,2.5vw,12px);
  pointer-events:auto;touch-action:none;letter-spacing:.05em;
}
.fire-btn:active{background:rgba(255,84,112,.5);}

/* Jump — above fire */
.jump-btn{
  position:absolute;
  right:clamp(90px, 22vw, 130px);
  bottom:clamp(10px, 2.5vh, 24px);
  width:clamp(44px, 11vw, 60px);
  height:clamp(44px, 11vw, 60px);
  border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:clamp(8px,2vw,11px);
  pointer-events:auto;touch-action:none;
}

/* Grenade */
.grenade-btn{
  position:absolute;
  right:clamp(90px, 22vw, 130px);
  bottom:clamp(60px, 14vh, 90px);
  width:clamp(40px, 10vw, 52px);
  height:clamp(40px, 10vw, 52px);
  border-radius:50%;
  background:rgba(120,200,90,.2);border:1px solid rgba(120,200,90,.55);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:clamp(7px,1.8vw,10px);
  pointer-events:auto;touch-action:none;
}

/* Weapon switch */
.weapon-btn{
  position:absolute;
  right:clamp(16px, 5vw, 28px);
  bottom:clamp(90px, 20vh, 130px);
  width:clamp(40px, 10vw, 52px);
  height:clamp(40px, 10vw, 52px);
  border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:clamp(7px,1.8vw,10px);
  pointer-events:auto;touch-action:none;
}

/* ── Landscape: spread controls wider apart ───────────────────────── */
@media (orientation: landscape) {
  .pad{
    left:clamp(12px, 3vw, 24px);
    bottom:clamp(12px, 3vh, 24px);
    width:clamp(80px, 14vw, 110px);
    height:clamp(80px, 14vw, 110px);
  }
  .fire-btn{
    right:clamp(12px, 4vw, 28px);
    bottom:clamp(12px, 3vh, 24px);
    width:clamp(60px, 12vw, 80px);
    height:clamp(60px, 12vw, 80px);
  }
  .jump-btn{
    right:clamp(80px, 18vw, 110px);
    bottom:clamp(8px, 2vh, 16px);
  }
  .grenade-btn{
    right:clamp(80px, 18vw, 110px);
    bottom:clamp(50px, 11vh, 72px);
  }
  .weapon-btn{
    right:clamp(12px, 4vw, 24px);
    bottom:clamp(80px, 16vh, 100px);
  }
  /* weapon sprite smaller in landscape to not block view */
  #weapon-canvas{
    width:min(40vw, 300px);
    height:min(40vw, 300px);
  }
}

/* ── Crosshair ────────────────────────────────────────────────────── */
#crosshair{
  position:absolute;left:50%;top:50%;width:18px;height:18px;
  transform:translate(-50%,-50%);pointer-events:none;
}
#crosshair::before,#crosshair::after{content:'';position:absolute;background:rgba(255,255,255,.85);}
#crosshair::before{left:50%;top:0;width:2px;height:100%;margin-left:-1px;}
#crosshair::after{top:50%;left:0;height:2px;width:100%;margin-top:-1px;}
#crosshair.custom{width:28px;height:28px;background-size:contain;background-repeat:no-repeat;background-position:center;}
#crosshair.custom::before,#crosshair.custom::after{display:none;}
#hit-marker{position:absolute;left:50%;top:50%;color:var(--accent);font-weight:800;font-size:13px;transform:translate(-50%,-50%);opacity:0;pointer-events:none;}
#trigger-hint{
  position:absolute;left:50%;top:30%;transform:translate(-50%,0);
  background:rgba(0,0,0,.6);color:#fff;font-size:13px;font-weight:700;
  padding:8px 16px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .25s;
}

/* ── Damage flash ─────────────────────────────────────────────────── */
#damage-flash{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at center, rgba(255,30,60,0) 40%, rgba(255,30,60,.45) 100%);
  opacity:0;pointer-events:none;transition:opacity .15s;
}

/* ── HUD stats (top-left) ─────────────────────────────────────────── */
#hud-stats{position:absolute;left:14px;top:14px;display:flex;flex-direction:column;gap:6px;pointer-events:none;}
#health-wrap{
  position:relative;width:clamp(120px,30vw,180px);height:22px;border-radius:6px;
  background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.2);overflow:hidden;
}
#health-fill{position:absolute;inset:0;width:100%;background:linear-gradient(90deg,#ff5470,#ff8a3d);transition:width .15s;}
#health-text{
  position:relative;z-index:1;display:block;text-align:center;line-height:22px;
  font-size:12px;font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);
}
#score-wrap{
  background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.2);border-radius:6px;
  padding:4px 10px;font-size:12px;font-weight:700;color:#fff;width:fit-content;
}
#score-wrap span{color:var(--accent);}

/* ── Minimap (top-right, single-player only) ──────────────────────── */
#minimap-wrap{
  position:absolute;right:14px;top:14px;pointer-events:none;
  width:clamp(90px,22vw,120px);height:clamp(90px,22vw,120px);
}
#minimap-canvas{width:100%;height:100%;display:block;border-radius:50%;}

/* ── Ammo (bottom-right, above fire button) ───────────────────────── */
#ammo-wrap{
  position:absolute;
  right:clamp(100px, 24vw, 150px);
  bottom:clamp(16px, 4vh, 32px);
  display:flex;flex-direction:column;align-items:flex-end;
  gap:2px;pointer-events:none;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);
}
#weapon-name-text{font-size:clamp(9px,2vw,12px);font-weight:700;opacity:.85;letter-spacing:.04em;}
#ammo-text{font-size:clamp(18px,5vw,26px);font-weight:800;line-height:1;}
#grenade-wrap{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:700;opacity:.9;}

/* ── Game over ────────────────────────────────────────────────────── */
#game-over-overlay{
  position:absolute;inset:0;background:rgba(8,9,12,.88);z-index:60;
  background-size:cover;background-position:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  pointer-events:auto;color:#fff;
}
#game-over-overlay.has-bg{background-color:rgba(8,9,12,.55);background-blend-mode:multiply;}
#game-over-overlay h2{margin:0;font-size:24px;letter-spacing:.05em;color:var(--danger);text-shadow:0 2px 8px rgba(0,0,0,.8);}
#game-over-overlay p{margin:0;font-size:13px;color:var(--text-dim);text-shadow:0 1px 4px rgba(0,0,0,.8);}
#btn-restart{
  background:var(--accent);color:#1a0e02;border:none;border-radius:10px;
  padding:12px 26px;font-weight:800;font-size:13px;
}

/* ── Win screen ───────────────────────────────────────────────────── */
#win-overlay{
  position:absolute;inset:0;background:rgba(8,9,12,.88);z-index:60;
  background-size:cover;background-position:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  pointer-events:auto;color:#fff;
}
#win-overlay.has-bg{background-color:rgba(8,9,12,.45);background-blend-mode:multiply;}
#win-overlay h2{margin:0;font-size:26px;letter-spacing:.05em;color:#35e07a;text-shadow:0 2px 8px rgba(0,0,0,.8);}
#win-overlay p{margin:0;font-size:14px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.8);}
#win-overlay p span{color:var(--accent);font-weight:800;}
#btn-next-level{
  background:#35e07a;color:#06210f;border:none;border-radius:10px;
  padding:12px 26px;font-weight:800;font-size:13px;
}

/* Shared "Exit" button style used by both Game Over and Win overlays */
.btn-exit{
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35);
  border-radius:10px;padding:10px 24px;font-weight:700;font-size:12px;
}

/* Shared "Share" button style used by both Game Over and Win overlays */
.btn-share{
  background:#2b6bff;color:#fff;border:none;
  border-radius:10px;padding:10px 24px;font-weight:800;font-size:12px;
}

/* ── Bomb defuse mini-game ────────────────────────────────────────── */
/* Floating prompt shown while in range of an armed bomb */
#bomb-prompt{
  position:absolute;left:50%;top:40%;transform:translate(-50%,0);
  background:rgba(0,0,0,.65);color:#fff;font-size:13px;font-weight:700;
  padding:8px 16px;border-radius:8px;pointer-events:none;white-space:nowrap;
  text-shadow:0 1px 4px rgba(0,0,0,.8);
}
/* Purely informational overlay — pointer-events:none so it never blocks the
   joystick/d-pad/fire touch controls underneath, which is exactly what the
   player needs to use during this mini-game. */
#bomb-overlay{
  position:absolute;inset:0;z-index:61;pointer-events:none;
  display:flex;align-items:center;justify-content:center;color:#fff;
}
#bomb-box{
  width:min(420px,86vw);display:flex;flex-direction:column;gap:14px;align-items:center;
  background:rgba(8,9,12,.75);border:1px solid rgba(255,255,255,.15);
  border-radius:14px;padding:18px 20px;
}
#bomb-box h3{margin:0;color:var(--danger);letter-spacing:.08em;font-size:16px;text-shadow:0 2px 8px rgba(0,0,0,.8);}
#bomb-lane{
  position:relative;width:100%;height:54px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.2);border-radius:10px;overflow:hidden;
}
#bomb-hitzone{
  position:absolute;top:0;bottom:0;left:9%;width:18%;
  background:rgba(255,138,61,.22);border-left:2px solid var(--accent);border-right:2px solid var(--accent);
}
.bomb-arrow{
  position:absolute;top:50%;transform:translate(-50%,-50%);
  font-size:26px;font-weight:800;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.8);
  transition:color .12s, transform .12s;
}
.bomb-arrow.hit{color:#35e07a;transform:translate(-50%,-50%) scale(1.4);}
.bomb-arrow.miss{color:var(--danger);transform:translate(-50%,-50%) scale(0.6);}
#bomb-stats{display:flex;gap:20px;font-size:12px;font-weight:700;color:#cfd4de;}
#bomb-stats span span{color:var(--accent);}

/* ── Custom popup message (Trigger Zone "Show popup message") ──────── */
#message-overlay{
  position:absolute;inset:0;z-index:62;pointer-events:auto;
  background:rgba(8,9,12,.75);
  display:flex;align-items:center;justify-content:center;color:#fff;
}
#message-box{
  width:min(420px,86vw);max-height:80vh;overflow-y:auto;
  display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;
  background:rgba(20,22,28,.92);border:1px solid rgba(255,255,255,.15);
  border-radius:14px;padding:22px 24px;
}
#message-title{margin:0;font-size:17px;letter-spacing:.04em;color:var(--accent);text-shadow:0 2px 8px rgba(0,0,0,.8);}
#message-body{margin:0;font-size:13px;line-height:1.5;color:#e8eaef;white-space:pre-wrap;}
#btn-message-close{
  background:var(--accent);color:#1a0e02;border:none;border-radius:10px;
  padding:10px 26px;font-weight:800;font-size:13px;
}

/* ── Fullscreen main menu ─────────────────────────────────────────── */
#menu-overlay{
  position:absolute;inset:0;z-index:70;
  background:#0a0c10 center/cover no-repeat;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  color:#fff;pointer-events:auto;
}
#menu-overlay.has-bg::before{
  content:'';position:absolute;inset:0;background:rgba(8,9,12,.45);z-index:-1;
}
#menu-overlay h1{margin:0;font-size:26px;letter-spacing:.06em;text-shadow:0 2px 10px rgba(0,0,0,.8);}
#menu-overlay p{margin:0;max-width:300px;text-align:center;font-size:13px;color:#cfd4de;text-shadow:0 1px 4px rgba(0,0,0,.8);}
#btn-menu-play, #btn-menu-continue{
  background:var(--accent);color:#1a0e02;border:none;border-radius:10px;
  padding:14px 30px;font-weight:800;font-size:14px;
}
#btn-menu-continue{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);}

/* ══════════════════════════ DEATHMATCH MULTIPLAYER ══════════════════════════ */

#btn-menu-deathmatch{
  background:transparent;color:#fff;border:1px solid var(--accent);border-radius:10px;
  padding:12px 28px;font-weight:800;font-size:13px;
}

/* ── Lobby (home / host / waiting) ───────────────────────────────── */
#dm-lobby-overlay{
  position:absolute;inset:0;z-index:80;background:rgba(7,8,11,.94);
  display:flex;align-items:center;justify-content:center;
  pointer-events:auto;color:#fff;overflow-y:auto;padding:20px;
}
.dm-lobby-card{
  width:min(420px,92vw);max-height:92vh;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:20px;display:flex;flex-direction:column;gap:10px;
}
.dm-lobby-card h2{margin:0 0 4px;font-size:18px;letter-spacing:.04em;}
.dm-lobby-card .tiny{font-size:11px;color:var(--text-dim);}
.dm-lobby-card input[type="text"],.dm-lobby-card input[type="number"]{
  width:100%;background:var(--panel-2);color:#fff;border:1px solid var(--line);
  border-radius:8px;padding:9px 10px;font-size:13px;
}
.dm-lobby-card label{font-size:11px;color:var(--text-dim);display:block;margin-bottom:3px;}
.dm-field{margin-bottom:4px;}
.dm-field-inline{margin:6px 0;}
.dm-checkbox-label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#fff;cursor:pointer;}
.dm-checkbox-label input{width:16px;height:16px;accent-color:var(--accent);}
#dm-skin-picker{display:flex;gap:10px;margin:4px 0 6px;}
.dm-skin-option{
  width:56px;height:56px;border-radius:10px;border:2px solid var(--line);
  background:var(--panel-2) center/contain no-repeat;cursor:pointer;
}
.dm-skin-option.selected{border-color:var(--accent);box-shadow:0 0 0 2px rgba(255,138,61,.35);}
#dm-room-code{font-size:30px;font-weight:800;letter-spacing:.12em;color:var(--accent);}
#dm-mode-picker{display:flex;gap:8px;}
.dm-mode-option{
  flex:1;background:var(--panel-2);color:#fff;border:1px solid var(--line);
  border-radius:8px;padding:9px 6px;font-size:12px;font-weight:700;cursor:pointer;
}
.dm-mode-option.selected{border-color:var(--accent);box-shadow:0 0 0 2px rgba(255,138,61,.35);}
#dm-mode-warn{color:var(--danger);margin-top:4px;}
.dm-roster-row{display:flex;align-items:center;gap:8px;font-size:13px;padding:4px 0;border-bottom:1px solid var(--line);}
.dm-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none;}
#dm-home-error{color:var(--danger);font-size:12px;min-height:14px;}

/* ── In-match HUD extras ─────────────────────────────────────────── */
#dm-hud-extras{position:absolute;inset:0;}
#dm-timer{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.2);border-radius:8px;
  padding:5px 14px;font-size:16px;font-weight:800;color:#fff;letter-spacing:.04em;
}
#dm-scoreboard{
  position:absolute;top:14px;right:14px;width:min(42vw,170px);
  background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.2);border-radius:8px;
  padding:6px 10px;font-size:12px;font-weight:700;color:#fff;
}
.dm-score-row{display:flex;align-items:center;gap:6px;padding:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dm-score-row b{margin-left:auto;color:var(--accent);}
.dm-score-row.me{color:var(--accent);}
.dm-ctf-header{justify-content:space-between;font-size:13px;padding-bottom:4px;margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,.15);}
#dm-flag-status{
  position:absolute;top:88px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.55);color:#ffd76b;font-size:12px;font-weight:800;
  padding:6px 14px;border-radius:8px;white-space:nowrap;
}
#dm-killfeed{
  position:absolute;left:50%;top:54px;transform:translate(-50%,0);
  background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:700;
  padding:6px 14px;border-radius:8px;opacity:0;transition:opacity .3s;white-space:nowrap;
}

/* Quick Chat — mid-left edge, clear of the move-pad (bottom-left) and
   hud-stats (top-left). Tap the bubble icon to pop the callout list open. */
#dm-qc-wrap{
  position:absolute;
  left:clamp(10px, 3vw, 22px);
  top:50%;
  transform:translateY(-50%);
  pointer-events:auto;
}
#dm-qc-btn{
  width:clamp(56px, 14vw, 72px);
  height:clamp(56px, 14vw, 72px);
  border-radius:50%;
  background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.35);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(20px,5vw,26px);line-height:1;
  touch-action:manipulation;user-select:none;cursor:pointer;
  transition:background .1s,border-color .1s;
}
#dm-qc-btn:active{background:rgba(255,255,255,.2);}
#dm-qc-menu{
  position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:6px;
  background:rgba(0,0,0,.75);border:1px solid rgba(255,255,255,.2);border-radius:10px;
  padding:8px;min-width:150px;max-height:60vh;overflow-y:auto;
}
.dm-qc-option{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);color:#fff;
  border-radius:6px;padding:8px 10px;font-size:13px;font-weight:600;text-align:left;
  cursor:pointer;white-space:nowrap;
}
.dm-qc-option:active{background:rgba(255,255,255,.22);}

/* ── Respawn / death overlay ──────────────────────────────────────── */
#dm-dead-overlay{
  position:absolute;inset:0;background:rgba(40,5,8,.55);z-index:55;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:#fff;pointer-events:none;
}
#dm-dead-overlay h3{margin:0;color:var(--danger);font-size:20px;letter-spacing:.05em;}
#dm-dead-timer{font-size:30px;font-weight:800;}

/* ── End of match leaderboard ─────────────────────────────────────── */
#dm-end-overlay{
  position:absolute;inset:0;background:rgba(8,9,12,.92);z-index:85;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  pointer-events:auto;color:#fff;padding:20px;
}
#dm-end-overlay h2{margin:0;font-size:24px;letter-spacing:.05em;color:var(--accent);}
#dm-end-list{width:min(380px,92vw);max-height:50vh;overflow-y:auto;display:flex;flex-direction:column;gap:6px;}
.dm-end-row{
  display:flex;align-items:center;gap:8px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:13px;font-weight:700;
}
.dm-end-row.winner{border-color:var(--accent);background:rgba(255,138,61,.12);}
.dm-end-row.me{outline:1px solid rgba(255,255,255,.4);}
.dm-end-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dm-end-row b{color:var(--accent);}

/* ── Neon mode overlay glow effects ──────────────────────────────── */
body.neon-mode #game-over-overlay h2,
body.neon-mode #win-overlay h2 {
  text-shadow: var(--neon-glow), 0 2px 8px rgba(0,0,0,.8);
}
body.neon-mode #game-over-overlay,
body.neon-mode #win-overlay {
  box-shadow: inset 0 0 60px rgba(0,0,0,.5);
}
body.neon-mode #btn-restart,
body.neon-mode #btn-next-level,
body.neon-mode .btn-exit {
  box-shadow: var(--neon-glow);
}
body.neon-mode #score-wrap,
body.neon-mode #health-wrap {
  box-shadow: 0 0 6px var(--theme);
}
body.neon-mode #hit-marker {
  text-shadow: var(--neon-glow);
}