/* Self-hosted display font (no CDN): vendored latin subsets, swap so text is
   never invisible while the files load. */
@font-face {
  font-family: "Rajdhani";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("vendor/fonts/rajdhani-600-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Rajdhani";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("vendor/fonts/rajdhani-700-latin.woff2") format("woff2");
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #05060a; }
body { font-family: "Rajdhani", "Segoe UI", system-ui, sans-serif; color: #e8edf2; user-select: none; -webkit-user-select: none; }

#game-container { position: fixed; inset: 0; }
#game-canvas { display: block; width: 100%; height: 100%; }

.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 5; }

#crosshair { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; transform: translate(-50%, -50%);
  transition: opacity 0.12s ease, transform 0.12s ease; }
#crosshair.ads { opacity: 0.25; transform: translate(-50%, -50%) scale(0.55); }
.ch { position: absolute; background: rgba(255,255,255,0.95);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.85), 0 0 5px rgba(0,0,0,0.9); }
.ch-t, .ch-b { left: 50%; width: 3px; height: 8px; transform: translateX(-50%); }
.ch-l, .ch-r { top: 50%; height: 3px; width: 8px; transform: translateY(-50%); }
.ch-t { top: 0; } .ch-b { bottom: 0; } .ch-l { left: 0; } .ch-r { right: 0; }

#score { position: absolute; top: 14px; left: 18px; font-size: 26px; font-weight: 700; letter-spacing: 1px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.9); }
#score-val { color: #a8c8ff; }

#wave-indicator { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); font-size: 18px;
  font-weight: 700; letter-spacing: 2px; color: #ff6b5e; text-shadow: 0 2px 6px rgba(0,0,0,0.9); }

#health { position: absolute; bottom: 22px; left: 18px; display: flex; align-items: center; gap: 12px; }
#health-bar { width: 220px; height: 18px; border: 2px solid rgba(255,255,255,0.25); border-radius: 3px;
  background: rgba(0,0,0,0.45); overflow: hidden; }
#health-fill { height: 100%; width: 100%; background: linear-gradient(90deg,#46b4ff,#8fd6ff);
  transition: width 0.15s ease, background 0.2s; }
#health-text { font-size: 18px; font-weight: 700; text-shadow: 0 2px 6px rgba(0,0,0,0.9); }

#ammo { position: absolute; bottom: 20px; right: 22px; text-align: right; text-shadow: 0 2px 6px rgba(0,0,0,0.9); }
#ammo-name { color: #7fb2ff; font-size: 16px; font-weight: 700; letter-spacing: 2px; }
#ammo-counts { font-size: 34px; font-weight: 700; line-height: 1; }
#ammo-counts .reload-key { color: #7fb2ff; font-size: 26px; }
#ammo-reserve { font-size: 14px; color: #9aa6b2; }

#center-msg { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); text-align: center;
  font-size: 40px; font-weight: 700; letter-spacing: 3px; text-shadow: 0 3px 14px rgba(0,0,0,0.95);
  opacity: 0; transition: opacity 0.3s; color: #fff; }
#center-msg.show { opacity: 1; }

#hitmarker { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%,-50%) rotate(45deg);
  opacity: 0; }
#hitmarker.show { opacity: 1; animation: hm 0.18s ease-out; }
#hitmarker::before, #hitmarker::after { content: ""; position: absolute; background: var(--c, #ff5b5b); }
#hitmarker::before { left: 50%; top: 0; width: var(--w, 2px); height: 100%; transform: translateX(-50%); }
#hitmarker::after { top: 50%; left: 0; height: var(--w, 2px); width: 100%; transform: translateY(-50%); }
@keyframes hm { from { opacity: 1; transform: translate(-50%,-50%) rotate(45deg) scale(1.4);} to { opacity: 0; } }
/* Kill-confirm: thicker, bigger, snappier pop (COD-style elimination marker) */
#hitmarker.kill.show { animation: hmk 0.32s cubic-bezier(.2,.9,.3,1); filter: drop-shadow(0 0 5px var(--c)); }
@keyframes hmk { 0% { opacity: 1; transform: translate(-50%,-50%) rotate(45deg) scale(2.0);}
  55% { opacity: 1; transform: translate(-50%,-50%) rotate(45deg) scale(1.15);} 100% { opacity: 0; } }

#damage-vignette { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 160px 60px rgba(200,0,0,0.7); transition: opacity 0.12s; }
#flash-overlay { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 15;
  background: #ffffff; }

/* ---------- Overlays ---------- */
.overlay { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: radial-gradient(ellipse at center, rgba(10,12,20,0.72), rgba(3,4,8,0.95)); backdrop-filter: blur(2px); }
.panel { text-align: center; padding: 40px 54px; margin: auto; max-width: 94vw; border: 1px solid rgba(127,178,255,0.25);
  border-radius: 14px; background: rgba(10,14,22,0.6); box-shadow: 0 20px 80px rgba(0,0,0,0.6); }
.panel h1 { font-size: 56px; font-weight: 800; letter-spacing: 6px; color: #fff;
  text-shadow: 0 0 24px rgba(127,178,255,0.55); }
.panel h2 { font-size: 22px; letter-spacing: 4px; color: #ff6b5e; margin-top: 6px; }
.tagline { color: #9aa6b2; margin-top: 14px; font-size: 16px; letter-spacing: 1px; }
.best { margin-top: 18px; color: #ffd34d; font-weight: 700; letter-spacing: 1px; }
.score-line { margin-top: 16px; font-size: 24px; } .score-line span { color: #ffd34d; font-weight: 700; }
.best-line { margin-top: 6px; color: #ffd34d; font-weight: 700; }
#end-sub { margin-top: 10px; color: #9aa6b2; letter-spacing: 1px; }

/* End-of-run stat strip (kills / accuracy / waves survived) */
.end-stats { display: flex; justify-content: center; gap: 34px; margin-top: 18px; }
.end-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.end-stat-val { font-size: 26px; font-weight: 700; color: #a8c8ff; }
.end-stat-label { font-size: 12px; letter-spacing: 2px; color: #9aa6b2; }

/* Pause screen: run recap + controls reminder */
.pause-stats { margin-top: 12px; font-size: 18px; letter-spacing: 1px; color: #cfe0ff; }
.pause-stats span { color: #a8c8ff; font-weight: 700; }
.pause-help { margin-top: 20px; font-size: 13px; letter-spacing: 0.5px; color: #9aa6b2; }
.pause-help b { color: #cfe0ff; }

button { margin-top: 26px; padding: 14px 40px; font-family: inherit; font-size: 20px; font-weight: 700;
  letter-spacing: 2px; color: #06121f; background: linear-gradient(90deg,#7fb2ff,#a8c8ff); border: none;
  border-radius: 8px; cursor: pointer; pointer-events: auto; transition: transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 6px 24px rgba(127,178,255,0.35); }
button:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(127,178,255,0.5); }
button:active { transform: translateY(0); }

.controls-help { margin-top: 22px; display: grid; grid-template-columns: repeat(3,auto); gap: 8px 22px;
  justify-content: center; color: #9aa6b2; font-size: 14px; }
.controls-help b { color: #cfe0ff; }

/* ---------- Minimap ---------- */
#minimap { transition: opacity 0.2s; }
@media (max-width: 560px) {
  #minimap { width: 110px !important; height: 110px !important; top: 10px !important; right: 10px !important; }
}
body.is-touch #minimap { top: 10px !important; right: 10px !important; width: 110px !important; height: 110px !important; }

/* ---------- Touch / mobile controls ---------- */
#touch-ui { position: absolute; inset: 0; z-index: 15; display: none; pointer-events: none;
  touch-action: none; user-select: none; -webkit-user-select: none; }
#touch-ui * { -webkit-tap-highlight-color: transparent; }

#look-pad { position: absolute; inset: 0; z-index: 1; pointer-events: auto; touch-action: none; }

#joystick { position: absolute; left: 26px; bottom: 26px; width: 138px; height: 138px;
  transform: scale(var(--hud-scale, 1)); transform-origin: bottom left;
  z-index: 3; border-radius: 50%; pointer-events: auto; touch-action: none;
  background: radial-gradient(circle, rgba(127,178,255,0.10), rgba(10,14,22,0.30));
  border: 2px solid rgba(127,178,255,0.35); box-shadow: 0 4px 24px rgba(0,0,0,0.4); }
#joy-knob { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px;
  transform: translate(-50%,-50%); border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #cfe0ff, #7fb2ff);
  box-shadow: 0 3px 14px rgba(0,0,0,0.5); }

/* Thumb cluster anchored to the bottom-right: FIRE sits in the corner with ADS
   beside it; JUMP/RELOAD/CROUCH within easy reach; small utilities (SWAP/NADE/
   FLASH) along the top of the cluster. Right-thumb friendly on phones. */
/* Minimalist layout: one row of tiny utility buttons up top, then only the
   three combat-critical buttons (JUMP / ADS / FIRE) at thumb height. */
#touch-buttons { position: absolute; right: 16px; bottom: 14px; z-index: 3;
  transform: scale(var(--hud-scale, 1)); transform-origin: bottom right;
  display: grid; gap: 8px; pointer-events: none;
  justify-items: center; align-items: end;
  grid-template-columns: repeat(5, auto);
  grid-template-areas:
    "swap nade flash reload crouch"
    ".    .    jump  ads    fire"; }
#t-swap { grid-area: swap; } #t-nade { grid-area: nade; } #t-flash { grid-area: flash; }
#t-reload { grid-area: reload; } #t-jump { grid-area: jump; } #t-crouch { grid-area: crouch; }
#t-ads { grid-area: ads; } #t-fire { grid-area: fire; }
.t-btn { pointer-events: auto; touch-action: none; margin: 0; padding: 0; font-family: inherit; font-weight: 800;
  letter-spacing: 0.5px; color: #eaf2ff; border: 1.5px solid rgba(127,178,255,0.4);
  background: rgba(20,28,42,0.42); border-radius: 50%; box-shadow: 0 4px 18px rgba(0,0,0,0.4);
  transition: transform 0.06s, background 0.1s, opacity 0.1s; display: flex; align-items: center; justify-content: center; }
.t-btn:active { transform: scale(0.9); background: rgba(127,178,255,0.4); opacity: 1; }
.t-mini { width: 44px; height: 44px; font-size: 9px; opacity: 0.5; position: relative;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
/* Secondary buttons idle at 50% opacity (PUBG/CoDM convention) and snap to
   full opacity on press via .t-btn:active. 44px meets the touch-target floor. */
.t-mini::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; }
.t-badge { position: absolute; top: -4px; right: -4px; min-width: 14px; height: 14px;
  border-radius: 7px; background: rgba(127,178,255,0.85); color: #0a0e16;
  font-size: 9px; font-weight: 800; display: flex; align-items: center;
  justify-content: center; padding: 0 3px; }
.t-small { width: 54px; height: 54px; font-size: 10px; opacity: 0.7; }
.t-fire { width: 86px; height: 86px; font-size: 15px; color: #fff;
  border-color: rgba(255,107,94,0.6); background: rgba(120,30,26,0.5); }
.t-fire:active { background: rgba(255,107,94,0.45); }

/* Left-side second FIRE button (dual-fire layout: CoDM/PUBG/Standoff 2) —
   mirrored across from the joystick so the left thumb can shoot too. The
   position tracks --hud-scale so it never collides with the scaled joystick. */
#t-fire-left { position: absolute; z-index: 3; width: 76px; height: 76px; font-size: 13px;
  left: calc(176px * var(--hud-scale, 1)); bottom: 120px; opacity: 0.85;
  transform: scale(var(--hud-scale, 1)); transform-origin: bottom left; }
#t-fire-left:active { transform: scale(calc(var(--hud-scale, 1) * 0.9)); }

/* Touch PAUSE — small, top bar, left of the fullscreen toggle; same pause
   path as Esc on desktop. */
#t-pause { position: absolute; top: 10px; right: 230px; z-index: 16;
  width: 44px; height: 38px; border-radius: 9px; font-size: 14px;
  letter-spacing: 2px; opacity: 0.8; }

/* Hide the [R] reload hint on touch where it's not relevant */
body.is-touch .reload-key { display: none; }

@media (max-width: 560px) {
  #joystick { width: 120px; height: 120px; left: 16px; bottom: 16px; }
  #joy-knob { width: 52px; height: 52px; }
  #touch-buttons { right: 12px; bottom: 12px; gap: 6px;
    /* Narrow screens: restack the minis into two short rows so the 44px
       targets never reach across into the joystick. */
    grid-template-columns: repeat(3, auto);
    grid-template-areas:
      "swap   nade   flash"
      "reload crouch ."
      "jump   ads    fire"; }
  .t-mini { width: 44px; height: 44px; font-size: 8px; }
  .t-mini::after { inset: -2px; }
  .t-small { width: 48px; height: 48px; font-size: 9px; }
  .t-fire { width: 74px; height: 74px; font-size: 13px; }
  /* Portrait: the mini row reaches far left, so the second FIRE sits directly
     ABOVE the joystick instead of beside it (keeps zero overlaps). */
  #t-fire-left { width: 64px; height: 64px; font-size: 11px;
    left: 24px; bottom: calc(16px + 134px * var(--hud-scale, 1)); }
  .controls-help { grid-template-columns: repeat(2,auto); }
  .panel { padding: 28px 30px; }
  .panel h1 { font-size: 40px; }
}

/* Short screens (landscape phones): compact panels so menus/settings fit
   without clipping — combined with .overlay scrolling as a safety net. */
@media (max-height: 500px) {
  .overlay { padding: 14px 0; }
  .panel { padding: 16px 28px; }
  .panel h1 { font-size: 30px; letter-spacing: 4px; }
  .panel h2 { font-size: 16px; letter-spacing: 3px; }
  .tagline { margin-top: 8px; font-size: 13px; }
  .controls-help { margin-top: 12px; gap: 5px 16px; font-size: 12px; }
  .best { margin-top: 10px; font-size: 13px; }
  #arena-select { margin: 4px 0 8px; }
  .panel > button { padding: 11px 30px; font-size: 16px; margin-top: 10px; }
  .panel > .btn-secondary { margin-top: 10px; padding: 9px 24px; font-size: 14px; }
  .set-row { margin-top: 10px; }
  #set-back { margin-top: 16px; }
}

/* On touch, dock a COMPACT ammo readout low at the bottom-centre (out of the
   look area and clear of the joystick / fire cluster). */
body.is-touch #ammo { right: auto; left: 50%; transform: translateX(-50%);
  bottom: 6px; text-align: center; line-height: 1.05; }
body.is-touch #ammo-name { font-size: 11px; letter-spacing: 1px; }
body.is-touch #ammo-counts { font-size: 22px; }
body.is-touch #ammo-reserve { font-size: 10px; }
/* Grenade / flashbang counts sit inline so the block stays short. */
/* Minimalist touch HUD: grenade/flash counts live on their buttons, not in the
   ammo block, and the health bar docks above the ammo readout at bottom-centre
   (clear of the joystick and the button cluster). */
body.is-touch #ammo-nade, body.is-touch #ammo-flash { display: none; }
body.is-touch #ammo-reserve { display: none; }
body.is-touch #health { left: 50%; transform: translateX(-50%); bottom: 52px; gap: 8px; }
body.is-touch #health-bar { width: 150px; height: 12px; }
body.is-touch #health-text { font-size: 12px; }
/* Very small phones: slimmer health bar, nudged left of centre so it clears
   the JUMP button. */
@media (max-width: 700px) {
  body.is-touch #health { left: 44%; }
  body.is-touch #health-bar { width: 104px; height: 10px; }
  body.is-touch #health-text { font-size: 10px; }
}
body.is-touch #score { font-size: 20px; }
@media (max-width: 560px) {
  body.is-touch #ammo-counts { font-size: 20px; }
}

/* ---------- Landscape-only prompt (touch) ----------
   The game is designed for landscape; in portrait the HUD and button cluster
   collide. On touch devices a full-screen prompt covers everything (Game.js
   also auto-pauses a live run). Desktop is never affected. */
#rotate-overlay { display: none; position: absolute; inset: 0; z-index: 60;
  align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(ellipse at center, rgba(10,12,20,0.92), rgba(3,4,8,0.99)); }
.rotate-card h2 { font-size: 24px; letter-spacing: 4px; color: #fff; margin-top: 14px; }
.rotate-card p { color: #9aa6b2; margin-top: 8px; letter-spacing: 1px; }
.rotate-icon { font-size: 56px; display: inline-block; animation: rotateHint 1.8s ease-in-out infinite; }
@keyframes rotateHint { 0%, 25% { transform: rotate(0deg); } 60%, 100% { transform: rotate(90deg); } }
@media (orientation: portrait) {
  body.is-touch #rotate-overlay { display: flex; }
}

/* Touch-only settings rows (aim assist / auto-fire) are hidden on desktop. */
.set-row.touch-setting { display: none; }
body.is-touch .set-row.touch-setting { display: grid; }

/* Touch-only elements are hidden unless the device is touch-enabled. */
.touch-only { display: none; }
body.is-touch .touch-only { display: block; }

/* In-game fullscreen toggle: small, unobtrusive, just left of the minimap. */
#fs-toggle { position: absolute; top: 12px; right: 128px;
  z-index: 16; width: 38px; height: 34px; border-radius: 9px; font-size: 17px;
  line-height: 1; color: #eaf2ff; border: 2px solid rgba(127,178,255,0.4);
  background: rgba(20,28,42,0.5); box-shadow: 0 3px 12px rgba(0,0,0,0.4);
  pointer-events: auto; touch-action: manipulation; }
#fs-toggle:active { background: rgba(127,178,255,0.4); }
#fs-toggle svg { display: block; margin: 0 auto; }

/* Build-version stamp: faint, bottom-right corner, confirms the deployed build. */
#build-tag { position: absolute; right: 8px; bottom: 6px; z-index: 30;
  font-size: 10px; letter-spacing: 0.5px; color: rgba(180,196,220,0.45);
  pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
body.is-touch #build-tag { bottom: 2px; right: 6px; font-size: 9px; }

/* ---------- Leaderboard + daily challenge ---------- */
#daily-tag { position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  padding: 4px 14px; border: 1px solid rgba(255,211,77,0.5); border-radius: 6px;
  color: #ffd34d; font-size: 13px; font-weight: 700; letter-spacing: 2px;
  background: rgba(20,18,6,0.55); }
#lb-tabs { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.lb-tab { margin-top: 0; padding: 8px 16px; font-size: 13px; letter-spacing: 1px;
  color: #9aa6b2; background: rgba(20,28,42,0.7); border: 1px solid rgba(127,178,255,0.25);
  border-radius: 6px; box-shadow: none; }
.lb-tab.active { color: #06121f; background: linear-gradient(90deg,#7fb2ff,#a8c8ff); }
#lb-list { margin-top: 16px; min-height: 200px; width: min(420px, 84vw); text-align: left; }
.lb-row { display: grid; grid-template-columns: 32px 1fr 52px 90px; gap: 10px;
  padding: 6px 10px; align-items: baseline; border-bottom: 1px solid rgba(127,178,255,0.12);
  font-size: 15px; letter-spacing: 1px; }
.lb-rank { color: #7fb2ff; font-weight: 700; }
.lb-name { color: #e8f1ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-wave { color: #9aa6b2; font-size: 13px; text-align: right; }
.lb-score { color: #ffd34d; font-weight: 700; text-align: right; }
.lb-empty { padding: 40px 0; text-align: center; color: #9aa6b2; letter-spacing: 1px; }
#lb-submit { margin-top: 16px; display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
#lb-name { padding: 10px 14px; font-family: inherit; font-size: 15px; letter-spacing: 1px;
  color: #e8f1ff; background: rgba(20,28,42,0.7); border: 1px solid rgba(127,178,255,0.4);
  border-radius: 6px; outline: none; width: 180px; pointer-events: auto; }
#lb-name:focus { border-color: #7fb2ff; }
#lb-submit .btn-secondary { margin-top: 0; padding: 10px 20px; font-size: 14px; }
#lb-submit-status { color: #9aa6b2; font-size: 13px; letter-spacing: 1px; min-width: 90px; }

/* ---------- Meta-progression (achievements / loadout / mutators) ---------- */
#mutator-tag { position: absolute; top: 44px; left: 50%; transform: translateX(-50%);
  padding: 4px 14px; border: 1px solid rgba(255,107,94,0.5); border-radius: 6px;
  color: #ff8a7a; font-size: 12px; font-weight: 700; letter-spacing: 2px;
  background: rgba(24,8,6,0.55); }
#end-mutnote { margin-top: 12px; color: #ff8a7a; font-size: 13px; letter-spacing: 1px; }
#progression .panel { max-height: 92vh; overflow-y: auto; }
#prog-list { margin-top: 14px; width: min(460px, 86vw); text-align: left; }
.ach-row { padding: 10px 12px; border-bottom: 1px solid rgba(127,178,255,0.12); }
.ach-head { display: flex; justify-content: space-between; align-items: baseline; }
.ach-name { color: #e8f1ff; font-weight: 700; letter-spacing: 1px; font-size: 15px; }
.ach-row.done .ach-name { color: #8fe28a; }
.ach-progress { color: #9aa6b2; font-size: 13px; }
.ach-desc { color: #9aa6b2; font-size: 13px; margin-top: 2px; }
.ach-bar { height: 6px; margin-top: 6px; border-radius: 3px; overflow: hidden;
  background: rgba(127,178,255,0.12); border: 1px solid rgba(127,178,255,0.18); }
.ach-fill { height: 100%; background: linear-gradient(90deg,#7fb2ff,#a8c8ff); }
.ach-row.done .ach-fill { background: linear-gradient(90deg,#5fbf5a,#8fe28a); }
.ach-reward { color: #ffd34d; font-size: 12px; letter-spacing: 1px; margin-top: 5px; }
#prog-controls { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap;
  margin-top: 16px; width: min(460px, 86vw); }
.prog-group { text-align: left; }
.prog-group-title { color: #7fb2ff; font-size: 13px; font-weight: 700; letter-spacing: 2px; margin-bottom: 6px; }
.prog-warn { color: #9aa6b2; font-weight: 400; letter-spacing: 1px; font-size: 11px; }
.prog-toggle { display: flex; justify-content: space-between; align-items: center; gap: 14px;
  width: 200px; margin-top: 8px; padding: 8px 12px; font-size: 13px; letter-spacing: 1px;
  color: #cfe0ff; background: rgba(20,28,42,0.7); border: 1px solid rgba(127,178,255,0.25);
  border-radius: 6px; box-shadow: none; }
.prog-toggle.active { background: rgba(70,120,70,0.85); color: #d6ffd0; box-shadow: 0 0 14px rgba(80,200,90,0.4); }
.prog-toggle.locked { opacity: 0.45; cursor: not-allowed; }
.prog-toggle-state { font-size: 12px; color: #9aa6b2; }
.prog-toggle.active .prog-toggle-state { color: #d6ffd0; }
#ach-toasts { position: fixed; top: 70px; right: 18px; z-index: 70; display: flex;
  flex-direction: column; gap: 8px; pointer-events: none; }
.ach-toast { display: flex; flex-direction: column; padding: 10px 16px; min-width: 220px;
  border: 1px solid rgba(255,211,77,0.55); border-radius: 8px; background: rgba(24,20,6,0.85);
  transform: translateX(30px); opacity: 0; transition: transform 0.4s ease, opacity 0.4s ease; }
.ach-toast.show { transform: translateX(0); opacity: 1; }
.ach-toast-title { color: #ffd34d; font-size: 11px; font-weight: 700; letter-spacing: 2px; }
.ach-toast-name { color: #fff; font-size: 16px; font-weight: 800; letter-spacing: 1px; margin-top: 2px; }
.ach-toast-reward { color: #9aa6b2; font-size: 12px; letter-spacing: 1px; margin-top: 2px; }

/* ---------- Settings panel ---------- */
.btn-secondary { background: rgba(20,28,42,0.7); color: #cfe0ff;
  border: 1px solid rgba(127,178,255,0.4); box-shadow: none; margin-top: 14px;
  font-size: 16px; padding: 11px 30px; }
.btn-secondary:hover { background: rgba(40,54,78,0.8); box-shadow: 0 6px 20px rgba(0,0,0,0.4); }
.btn-secondary.active { background: rgba(70,120,70,0.85); color: #d6ffd0; box-shadow: 0 0 18px rgba(80,200,90,0.5); }

.settings-panel { min-width: 360px; max-width: 92vw; }
.settings-panel h2 { color: #7fb2ff; margin-bottom: 8px; }
.set-row { display: grid; grid-template-columns: 130px 1fr 56px; align-items: center;
  gap: 12px; margin-top: 18px; text-align: left; }
.set-row label { color: #9aa6b2; font-size: 14px; letter-spacing: 1px; }
.set-row input[type=range] { width: 100%; -webkit-appearance: none; appearance: none;
  height: 24px; background: transparent; cursor: pointer; pointer-events: auto; touch-action: auto; }
.set-row input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px;
  background: rgba(127,178,255,0.35); }
.set-row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px;
  margin-top: -9px; border-radius: 50%; background: #7fb2ff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.55), 0 0 0 2px rgba(6,18,31,0.7); }
.set-row input[type=range]::-moz-range-track { height: 4px; border-radius: 2px;
  background: rgba(127,178,255,0.35); }
.set-row input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border: none;
  border-radius: 50%; background: #7fb2ff; box-shadow: 0 2px 6px rgba(0,0,0,0.55); }
.set-val { color: #cfe0ff; font-size: 14px; font-weight: 700; text-align: right; }
.set-seg { display: flex; gap: 8px; grid-column: 2 / 4; }
.set-seg button { margin: 0; padding: 8px 0; flex: 1; font-size: 14px; letter-spacing: 1px;
  background: rgba(20,28,42,0.8); color: #9aa6b2; border: 1px solid rgba(127,178,255,0.3);
  box-shadow: none; }
.set-seg button.active { background: linear-gradient(90deg,#7fb2ff,#a8c8ff); color: #06121f; }
#set-back { margin-top: 26px; }
@media (max-width: 560px) {
  .set-row { grid-template-columns: 96px 1fr 48px; gap: 8px; }
  .settings-panel { min-width: 0; width: 92vw; }
}

/* ---------- Stamina bar (under the health bar) ---------- */
#stamina-bar { position: absolute; left: 0; bottom: -9px; width: 220px; height: 5px;
  border: 1px solid rgba(255,255,255,0.18); border-radius: 3px; background: rgba(0,0,0,0.45);
  overflow: hidden; opacity: 0.85; transition: opacity 0.25s; }
#stamina-fill { height: 100%; width: 100%; background: linear-gradient(90deg,#46b4ff,#8fd6ff);
  transition: width 0.08s linear; }
#stamina-bar.full { opacity: 0.35; }
#stamina-bar.exhausted #stamina-fill { background: linear-gradient(90deg,#e3a341,#f5cf6b); }
body.is-touch #stamina-bar { width: 180px; }

/* ---------- Floating damage numbers ---------- */
#dmg-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 6; }
.dmg-num { position: absolute; transform: translate(-50%,-50%); font-weight: 800;
  font-size: 22px; color: #fff; text-shadow: 0 2px 5px rgba(0,0,0,0.95); will-change: transform, opacity;
  letter-spacing: 0.5px; }
.dmg-num.hs { color: #ffd34d; font-size: 28px; }

/* ---------- Combo indicator ---------- */
#combo { position: absolute; top: 78px; left: 50%; transform: translateX(-50%);
  font-weight: 800; font-size: 22px; letter-spacing: 1px; color: #a8c8ff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9); opacity: 0; transition: opacity 0.2s; pointer-events: none; z-index: 7; }
#combo.show { opacity: 1; }
#combo .combo-x { color: #7fb2ff; font-size: 26px; }
#combo .combo-mult { color: #9aa6b2; font-size: 15px; font-weight: 700; }
#combo.pop { animation: comboPop 0.25s ease; }
@keyframes comboPop { 0% { transform: translateX(-50%) scale(1.35); } 100% { transform: translateX(-50%) scale(1); } }
body.is-touch #combo { top: 64px; font-size: 18px; }

/* ---------- Boss health bar ---------- */
#boss-bar { position: absolute; top: 54px; left: 50%; transform: translateX(-50%);
  width: min(560px, 80vw); text-align: center; opacity: 0; pointer-events: none;
  transition: opacity 0.3s; z-index: 7; }
#boss-bar.show { opacity: 1; }
#boss-name { font-weight: 800; letter-spacing: 3px; font-size: 17px; color: #ff5a48;
  text-shadow: 0 2px 8px rgba(0,0,0,0.95); margin-bottom: 4px; }
#boss-track { height: 14px; border: 2px solid rgba(255,90,72,0.55); border-radius: 4px;
  background: rgba(0,0,0,0.55); overflow: hidden; box-shadow: 0 0 14px rgba(255,40,30,0.35); }
#boss-fill { height: 100%; width: 100%; background: linear-gradient(90deg,#b81022,#ff4533,#ff7a3c);
  transition: width 0.12s linear; }
body.is-touch #boss-name { font-size: 14px; }

/* ---------- Grenade counter ---------- */
#ammo-nade { font-size: 13px; color: #9aa6b2; opacity: 0.92; margin-top: 1px; }
#ammo-nade .reload-key { color: #7fb2ff; }

/* ---------- Arena selector (menu) ---------- */
#arena-select { display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 6px 0 14px; font-size: 15px; letter-spacing: 1px; color: #cfe0f5; }
#arena-select #arena-name { color: #ffb347; font-weight: 700; }
.arena-arrow { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18);
  color: #cfe0f5; width: 52px; height: 42px; border-radius: 8px; cursor: pointer; font-size: 18px;
  line-height: 1; padding: 0; transition: background 0.15s, border-color 0.15s; }
.arena-arrow:hover { background: rgba(255,179,71,0.18); border-color: #ffb347; }

/* ---------- Upgrade shop ---------- */
#shop { overflow-y: auto; padding: 16px 0; align-items: flex-start; }
#shop .shop-panel { max-width: 560px; width: 92%; margin: auto; padding: 22px 30px; }
#shop .shop-panel h1 { font-size: 38px; letter-spacing: 4px; margin-bottom: 2px; }
#shop .shop-panel h2 { font-size: 15px; margin: 4px 0; }
.shop-bank { font-size: 15px; letter-spacing: 1px; color: #cfe0f5; margin: 2px 0 10px; }
#shop-score { color: #ffd23f; font-weight: 700; }
#shop-grid { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.shop-card { display: flex; align-items: center; gap: 13px; text-align: left;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 9px; padding: 9px 14px; cursor: pointer; color: #e7eefc;
  transition: background 0.13s, border-color 0.13s, transform 0.08s; width: 100%; }
.shop-card .shop-ic { font-size: 24px; width: 30px; text-align: center; flex: none; }
.shop-info { flex: 1; }
.shop-name { font-size: 15px; font-weight: 700; letter-spacing: 0.5px; }
.shop-lv { color: #6cd07f; font-size: 12px; font-weight: 600; margin-left: 6px; }
.shop-desc { font-size: 12.5px; color: #9fb0c8; margin-top: 2px; }
.shop-cost { font-size: 16px; font-weight: 700; color: #ffd23f; min-width: 56px; text-align: right; flex: none; }
.shop-card.afford:hover { background: rgba(108,208,127,0.16); border-color: #6cd07f; transform: translateY(-1px); }
.shop-card.locked { opacity: 0.5; cursor: not-allowed; }
.shop-card.locked .shop-cost { color: #ff7a7a; }
.shop-card.maxed { opacity: 0.65; cursor: default; border-color: rgba(108,208,127,0.4); }
.shop-card.maxed .shop-cost { color: #6cd07f; }
#shop-deploy { width: 100%; }
.shop-hint { font-size: 12px; color: #8595ad; margin-top: 11px; }
@media (max-width: 560px) {
  .shop-card .shop-desc { font-size: 11.5px; }
  .shop-card { padding: 9px 11px; gap: 10px; }
}