* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #8a8a8a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #eaf6ff;
}

#back-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 30;
  background: rgba(6, 14, 22, 0.65);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  color: #eaf6ff;
  text-decoration: none;
}

#back-link:hover {
  background: rgba(6, 14, 22, 0.85);
}

/* Above absolutely everything else on this page (back-link at 30 is the previous highest) — this
   is the very first thing shown, before the game or even the mode-select menu underneath it. */
#loading-screen {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #04121c;
  transition: opacity 0.5s ease;
}

#loading-screen.loaded {
  opacity: 0;
  pointer-events: none;
}

#loading-banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A faint zoom-in over the full loading duration gives the splash a little life instead of
     sitting on a completely static image. */
  animation: loading-banner-zoom 3s ease-out forwards;
}

@keyframes loading-banner-zoom {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}

/* Flat, fairly strong darkening across the WHOLE image rather than just a bottom gradient — on a
   narrow/portrait viewport, object-fit: cover crops down to roughly the image's own vertical
   center, which is exactly where its baked-in "FIGHT FOR GLORY" title text sits, so the overlay
   title/bar/tip need to stay legible no matter where on the image they end up, not just at a
   bottom edge that assumed a wide/landscape crop. */
#loading-scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 12, 20, 0.55);
}

#loading-content {
  position: relative;
  z-index: 1;
  width: min(480px, 90vw);
  padding: 1rem 1.25rem;
  text-align: center;
  background: rgba(4, 12, 20, 0.55);
  border-radius: 14px;
  backdrop-filter: blur(6px);
}

#loading-title {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  margin-bottom: 0.9rem;
}

#loading-bar-wrap {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

#loading-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #e74c3c, #3b9dff);
  transition: width 0.15s linear;
}

#loading-tip {
  margin-top: 0.8rem;
  font-size: 0.9rem;
  color: #cfe3f2;
  min-height: 1.2rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

#map {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.hidden {
  display: none !important;
}

#crosshair {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--crosshair-color, rgba(255, 255, 255, 0.85));
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  z-index: 10;
  transition: transform 0.15s, background 0.15s;
}

/* Outline crosshair style: a ring around the center dot, same color, drawn via ::after so it
   doesn't interfere with the dot's own hit/headshot flash animation. */
#crosshair.outline::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid var(--crosshair-color, rgba(255, 255, 255, 0.85));
  opacity: 0.8;
}

#crosshair.hit {
  background: #ffd54f;
  transform: scale(1.8);
}

#crosshair.headshot {
  background: #ff5252;
  transform: scale(2.4);
}

/* Found by the Block Battle client-correctness audit: a fire attempt during the weapon's own
   cooldown gave no feedback at all -- same gap already found and fixed in firefight.js/
   webswing.js this session. */
#crosshair.denied {
  background: #ff4646;
  transform: scale(1.4);
}

#kill-counter {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 10;
  background: rgba(6, 14, 22, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
}

#wave-counter {
  position: fixed;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: rgba(6, 14, 22, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
}

#wave-banner {
  position: fixed;
  top: 22%;
  left: 0;
  right: 0;
  z-index: 12;
  text-align: center;
  font-size: 2.4rem;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  opacity: 0;
}

#wave-banner.show {
  animation: wave-banner 1.8s ease-out forwards;
}

@keyframes wave-banner {
  0% { opacity: 0; transform: scale(0.8); }
  12% { opacity: 1; transform: scale(1.05); }
  25% { transform: scale(1); }
  75% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

#weapon-hud {
  position: fixed;
  right: 0.9rem;
  bottom: 1.1rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}

#weapon-name {
  font-size: 1.05rem;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

#ammo-count {
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.9;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

#reload-wrap {
  width: 130px;
  height: 8px;
  border-radius: 999px;
  background: rgba(6, 14, 22, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.25);
  overflow: hidden;
}

#reload-fill {
  height: 100%;
  width: 100%;
  background: #4caf50;
  border-radius: 999px;
}

#upgrade-btn {
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #eaf6ff;
  background: rgba(6, 14, 22, 0.65);
  cursor: pointer;
}

#upgrade-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

#upgrade-btn:not(:disabled) {
  background: #2fb6ac;
  color: #04211e;
  border-color: rgba(255, 255, 255, 0.4);
}

#save-btn {
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #eaf6ff;
  background: rgba(6, 14, 22, 0.65);
  cursor: pointer;
}

#save-btn:hover {
  background: rgba(6, 14, 22, 0.85);
}

#health-wrap {
  position: fixed;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  height: 14px;
  border-radius: 999px;
  background: rgba(6, 14, 22, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.25);
  overflow: hidden;
  z-index: 10;
}

#health-fill {
  height: 100%;
  width: 100%;
  background: #4caf50;
  border-radius: 999px;
  transition: width 0.2s, background 0.2s;
}

#damage-flash {
  position: fixed;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255, 0, 0, 0) 45%, rgba(200, 0, 0, 0.7) 100%);
  opacity: 0;
}

/* Sniper scope: circular view with hairlines while right-click is held.
   z-index 9 keeps the crosshair (10) visible as the center dot. */
#scope-overlay {
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 31%, rgba(0, 0, 0, 0.92) 40%);
}

#scope-overlay::before,
#scope-overlay::after {
  content: '';
  position: absolute;
  background: rgba(0, 0, 0, 0.55);
}

#scope-overlay::before {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
}

#scope-overlay::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
}

#death {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  background: rgba(90, 0, 0, 0.5);
  cursor: pointer;
  text-align: center;
}

#death-title {
  font-size: 3rem;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

#death-stats {
  font-size: 1.15rem;
  font-weight: 600;
}

#death-best {
  font-size: 0.95rem;
  opacity: 0.85;
}

#death-best:empty {
  display: none;
}

#death-record {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffd54f;
}

#death-sub {
  font-size: 1rem;
  opacity: 0.9;
}

#hint {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: rgba(6, 14, 22, 0.45);
  backdrop-filter: blur(3px);
  cursor: pointer;
  text-align: center;
}

#hint-name {
  font-size: 3.4rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.6);
}

#hint-title {
  font-size: 2.2rem;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

#hint-controls {
  background: rgba(6, 14, 22, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 0.8rem 1.4rem;
  font-size: 0.95rem;
  line-height: 1.9;
}

/* Mode select sits above the hint (20) and death (25) screens, under the back link (30). */
#mode-select {
  position: fixed;
  inset: 0;
  z-index: 26;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* `safe center`, not plain `center`: with 6 solo modes + Online Play now stacked here, this
     panel can be taller than short/laptop viewports. Plain `center` on an overflowing flex
     container clips whatever's centered "off the top" with no way to scroll up to it — `safe`
     falls back to start-alignment once it overflows, so combined with overflow-y below, every
     mode button and the coin/shop footer stay reachable by scrolling instead of getting cut off. */
  justify-content: safe center;
  overflow-y: auto;
  gap: 1rem;
  padding: 1.5rem 0; /* breathing room top/bottom once this is scrolling */
  background: rgba(6, 14, 22, 0.72);
  backdrop-filter: blur(4px);
  text-align: center;
}

#mode-banner {
  width: min(560px, 90vw);
  max-width: 100%;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  /* Slight inset so the banner reads as a card sitting on #mode-select's own translucent
     background rather than a flat edge-to-edge image. */
  border: 1px solid rgba(255, 255, 255, 0.15);
}

#mode-sub {
  font-size: 1.05rem;
  opacity: 0.9;
}

#mode-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: min(340px, 86vw);
}

.mode-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  padding: 0.8rem 1.2rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #eaf6ff;
  background: rgba(6, 14, 22, 0.65);
  cursor: pointer;
}

.mode-btn span {
  font-size: 0.8rem;
  font-weight: 500;
  opacity: 0.8;
}

.mode-btn:hover:not(:disabled) {
  background: #2fb6ac;
  color: #04211e;
  border-color: rgba(255, 255, 255, 0.4);
}

.mode-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

#mode-select-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 0.3rem;
}

#mode-select-coins {
  font-size: 1rem;
  font-weight: 800;
  color: #ffd54f;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

#view-weapons-btn {
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  padding: 0.55rem 1rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #eaf6ff;
  background: rgba(6, 14, 22, 0.65);
  cursor: pointer;
}

#view-weapons-btn:hover {
  background: #2fb6ac;
  color: #04211e;
  border-color: rgba(255, 255, 255, 0.4);
}

#view-skins-btn,
#settings-btn,
#bb-leaderboard-btn {
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  padding: 0.55rem 1rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #eaf6ff;
  background: rgba(6, 14, 22, 0.65);
  cursor: pointer;
}

#view-skins-btn:hover,
#settings-btn:hover,
#bb-leaderboard-btn:hover {
  background: #2fb6ac;
  color: #04211e;
  border-color: rgba(255, 255, 255, 0.4);
}

#mode-select-shards {
  font-size: 0.85rem;
  font-weight: 700;
  color: #9fe0ff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Same "solid near-black, sits above everything" overlay treatment as #weapon-shop, sharing its
   z-index — opened from the same mode-select footer, never both at once. */
#settings-panel {
  position: fixed;
  inset: 0;
  z-index: 28;
  display: flex;
  flex-direction: column;
  background: rgba(4, 4, 6, 0.97);
  color: #eaf6ff;
}

#settings-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

#settings-title {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

#settings-close-btn {
  margin-left: auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #eaf6ff;
  font-size: 1rem;
  cursor: pointer;
}
#settings-close-btn:hover { background: rgba(255, 255, 255, 0.18); }

#settings-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.4rem 1.2rem 2rem;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.settings-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: #2fb6ac;
  cursor: pointer;
}

.settings-row input[type="range"] {
  flex: 1;
  accent-color: #2fb6ac;
  cursor: pointer;
}

#setting-fov-value {
  min-width: 2.4em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.settings-choice-group {
  display: flex;
  gap: 0.4rem;
}

.settings-choice-btn {
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #eaf6ff;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
}
.settings-choice-btn:hover { background: rgba(255, 255, 255, 0.14); }
.settings-choice-btn.active {
  background: #2fb6ac;
  color: #04211e;
  border-color: rgba(255, 255, 255, 0.4);
}

.settings-swatch-group {
  display: flex;
  gap: 0.5rem;
}

/* Same "solid near-black, full-screen" overlay treatment as #settings-panel, one z-index lower
   since it's opened FROM mode-select (28) rather than alongside settings/shop. */
#bb-leaderboard-overlay {
  position: fixed;
  inset: 0;
  z-index: 27;
  display: flex;
  flex-direction: column;
  background: rgba(4, 4, 6, 0.97);
  color: #eaf6ff;
}

#bb-leaderboard-overlay .panel-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

#bb-leaderboard-overlay .panel-header h2 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

#bb-leaderboard-close-btn {
  margin-left: auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #eaf6ff;
  font-size: 1rem;
  cursor: pointer;
}
#bb-leaderboard-close-btn:hover { background: rgba(255, 255, 255, 0.18); }

#bb-leaderboard-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 1rem 1.2rem 0;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
}

/* Same toggle-group look as .settings-choice-btn, one size down (8 tabs need to fit). */
.bb-lb-tab {
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #eaf6ff;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
}
.bb-lb-tab:hover { background: rgba(255, 255, 255, 0.14); }
.bb-lb-tab.active {
  background: #2fb6ac;
  color: #04211e;
  border-color: rgba(255, 255, 255, 0.4);
}

#bb-leaderboard-list {
  list-style: none;
  margin: 0 auto;
  padding: 1rem 1.2rem 2rem;
  max-width: 480px;
  width: 100%;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

#bb-leaderboard-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 0.5rem 0.8rem;
  font-size: 0.9rem;
}

#bb-leaderboard-list .score {
  color: #9fe0ff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.settings-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--swatch);
  border: 2px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  padding: 0;
}
.settings-swatch.active {
  border-color: #ffffff;
  box-shadow: 0 0 0 2px rgba(47, 182, 172, 0.8);
}

/* The shop: same "solid near-black, sits above everything" treatment as #loadout, one z-index
   higher since it can be opened from mode-select and needs to cover it fully. */
#weapon-shop {
  position: fixed;
  inset: 0;
  z-index: 28;
  display: flex;
  flex-direction: column;
  background: rgba(4, 4, 6, 0.97);
  color: #eaf6ff;
}

#weapon-shop-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

#weapon-shop-title {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

#weapon-shop-coins {
  margin-left: auto;
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffd54f;
}

#weapon-shop-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #eaf6ff;
  font-size: 1rem;
  cursor: pointer;
}
#weapon-shop-close-btn:hover { background: rgba(255, 255, 255, 0.18); }

/* Added once the shop grew past a few hundred weapons — the archetype tabs alone were no longer
   a fast way to find one specific gun. Typing here switches renderWeaponShopGrid into a flat
   cross-archetype filter and hides the (now-irrelevant) tab row; clearing it goes back to normal
   tabbed browsing. See the weapon-shop-search input listener in blockbattle.js. */
#weapon-shop-search {
  flex-shrink: 0;
  margin: 0.8rem 1.2rem 0;
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #eaf6ff;
  font-size: 0.9rem;
}
#weapon-shop-search::placeholder { color: rgba(234, 246, 255, 0.5); }
#weapon-shop-search:focus { outline: none; border-color: #2fb6ac; background: rgba(255, 255, 255, 0.1); }

#weapon-shop-tabs {
  display: flex;
  gap: 0.5rem;
  padding: 0.8rem 1.2rem;
  overflow-x: auto;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.weapon-shop-tab {
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #eaf6ff;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  white-space: nowrap;
}

.weapon-shop-tab:hover { background: rgba(255, 255, 255, 0.14); }

.weapon-shop-tab.active {
  background: #2fb6ac;
  color: #04211e;
  border-color: rgba(255, 255, 255, 0.4);
}

#weapon-shop-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.9rem;
  padding: 1rem 1.2rem 1.6rem;
  align-content: start;
}

.weapon-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border-radius: 14px;
  padding: 0.9rem 0.8rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--tier-color, rgba(255, 255, 255, 0.2));
}

.weapon-card-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.weapon-card-icon { font-size: 1.7rem; }

.weapon-card-name {
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.15;
}

.weapon-card-tier {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  background: var(--tier-color, #888);
  color: #04211e;
  flex-shrink: 0;
}

.weapon-card-stats {
  font-size: 0.72rem;
  color: rgba(234, 246, 255, 0.75);
  line-height: 1.5;
}

.weapon-card-action {
  margin-top: auto;
  border: none;
  border-radius: 10px;
  padding: 0.5rem;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

.weapon-card-action.buy { background: #ffd54f; color: #3a2a00; }
.weapon-card-action.buy:hover { background: #ffdf7a; }
.weapon-card-action.buy:disabled { background: rgba(255, 255, 255, 0.12); color: rgba(234, 246, 255, 0.4); cursor: default; }
/* Armed by a first click, needs a second deliberate click to actually spend coins — see
   renderWeaponShopGrid's purchase handler. Warm/orange reads as "are you sure", distinct from the
   normal yellow buy state. */
.weapon-card-action.buy.confirming { background: #ff7043; color: #2a0f00; }
.weapon-card-action.buy.confirming:hover { background: #ff8a5c; }
.weapon-card-action.owned { background: rgba(47, 182, 172, 0.25); color: #6fe0d3; cursor: default; }

/* Skin Shop — identical structure/treatment to #weapon-shop above (same overlay, header, coin
   readout, close button, card grid), just without the archetype tabs since all nine skins fit one
   screen without needing to be split into browsable categories. */
#skin-shop {
  position: fixed;
  inset: 0;
  z-index: 28;
  display: flex;
  flex-direction: column;
  background: rgba(4, 4, 6, 0.97);
  color: #eaf6ff;
}

#skin-shop-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

#skin-shop-title {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

#skin-shop-coins {
  margin-left: auto;
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffd54f;
}

#skin-shop-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #eaf6ff;
  font-size: 1rem;
  cursor: pointer;
}
#skin-shop-close-btn:hover { background: rgba(255, 255, 255, 0.18); }

#skin-shop-sub {
  padding: 0.7rem 1.2rem 0;
  font-size: 0.78rem;
  color: rgba(234, 246, 255, 0.6);
  flex-shrink: 0;
}

/* Same treatment as #weapon-shop-search — added for the same reason once the skin list grew past
   a few dozen entries with no tabs to narrow it down at all. */
#skin-shop-search {
  flex-shrink: 0;
  margin: 0.6rem 1.2rem 0;
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #eaf6ff;
  font-size: 0.9rem;
}
#skin-shop-search::placeholder { color: rgba(234, 246, 255, 0.5); }
#skin-shop-search:focus { outline: none; border-color: #2fb6ac; background: rgba(255, 255, 255, 0.1); }

#skin-shop-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.9rem;
  padding: 1rem 1.2rem 1.6rem;
  align-content: start;
}

.skin-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: 14px;
  padding: 0.9rem 0.8rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.skin-card-swatch {
  width: 100%;
  aspect-ratio: 5 / 3;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.skin-card-name {
  font-size: 0.88rem;
  font-weight: 800;
}

.skin-card-action {
  margin-top: auto;
  border: none;
  border-radius: 10px;
  padding: 0.5rem;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

.skin-card-action.buy { background: #ffd54f; color: #3a2a00; }
.skin-card-action.buy:hover { background: #ffdf7a; }
.skin-card-action.buy:disabled { background: rgba(255, 255, 255, 0.12); color: rgba(234, 246, 255, 0.4); cursor: default; }
.skin-card-action.buy.confirming { background: #ff7043; color: #2a0f00; }
.skin-card-action.buy.confirming:hover { background: #ff8a5c; }
.skin-card-action.equip { background: rgba(255, 255, 255, 0.14); color: #eaf6ff; }
.skin-card-action.equip:hover { background: rgba(255, 255, 255, 0.24); }
.skin-card-action.equipped { background: rgba(47, 182, 172, 0.25); color: #6fe0d3; cursor: default; }

/* ---- Avatar shop (400 numbered avatars) ---- */
/* Same "solid near-black, full-screen" shape as #skin-shop, one z-index lower since it's opened
   from the same mode-select footer and the two are never open at once. */
#avatar-shop {
  position: fixed;
  inset: 0;
  z-index: 28;
  display: flex;
  flex-direction: column;
  background: rgba(4, 4, 6, 0.97);
  color: #eaf6ff;
}

#avatar-shop-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

#avatar-shop-title {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

#avatar-shop-coins {
  margin-left: auto;
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffd54f;
}

#avatar-shop-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #eaf6ff;
  font-size: 1rem;
  cursor: pointer;
}
#avatar-shop-close-btn:hover { background: rgba(255, 255, 255, 0.18); }

#avatar-shop-sub {
  padding: 0.7rem 1.2rem 0;
  font-size: 0.78rem;
  color: rgba(234, 246, 255, 0.6);
  flex-shrink: 0;
}

#avatar-shop-search {
  flex-shrink: 0;
  margin: 0.6rem 1.2rem 0;
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #eaf6ff;
  font-size: 0.9rem;
}
#avatar-shop-search::placeholder { color: rgba(234, 246, 255, 0.5); }
#avatar-shop-search:focus { outline: none; border-color: #2fb6ac; background: rgba(255, 255, 255, 0.1); }

/* Denser than #skin-shop-grid — 400 small numbered badges rather than 49 named swatches. */
#avatar-shop-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 0.6rem;
  padding: 1rem 1.2rem 1.6rem;
  align-content: start;
}

.avatar-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  border-radius: 12px;
  padding: 0.5rem 0.4rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Holds a canvas-drawn mini character portrait (see drawAvatarThumbnail) — a rounded square now,
   not a circle, since it frames a head+torso+arms figure rather than a plain color badge. */
.avatar-card-swatch {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}
.avatar-card-canvas {
  width: 100%;
  height: 100%;
}

/* The last 50 (351-400) — a fiery, pulsing "empowered" ring, matching the glowing top tier in the
   reference poster art (the canvas itself also draws a soft radial glow behind the figure — see
   drawAvatarThumbnail). Legendary cards also get a brighter border on the whole card, not just the
   swatch, so the tier reads even at a glance while scrolling past. */
.avatar-card.legendary {
  border-color: rgba(255, 200, 80, 0.5);
}
.avatar-card.legendary .avatar-card-swatch {
  border-color: #ffd54f;
  animation: avatar-legendary-glow 1.8s ease-in-out infinite;
}
@keyframes avatar-legendary-glow {
  0%, 100% { box-shadow: 0 0 8px 2px rgba(255, 160, 40, 0.55); }
  50% { box-shadow: 0 0 16px 6px rgba(255, 80, 40, 0.75); }
}

.avatar-card-number {
  font-size: 0.7rem;
  font-weight: 800;
  color: rgba(234, 246, 255, 0.7);
}

.avatar-card-action {
  width: 100%;
  margin-top: auto;
  border: none;
  border-radius: 8px;
  padding: 0.35rem;
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
}
.avatar-card-action.buy { background: #ffd54f; color: #3a2a00; }
.avatar-card-action.buy:hover { background: #ffdf7a; }
.avatar-card-action.buy:disabled { background: rgba(255, 255, 255, 0.12); color: rgba(234, 246, 255, 0.4); cursor: default; }
.avatar-card-action.buy.confirming { background: #ff7043; color: #2a0f00; }
.avatar-card-action.buy.confirming:hover { background: #ff8a5c; }
.avatar-card-action.equip { background: rgba(255, 255, 255, 0.14); color: #eaf6ff; }
.avatar-card-action.equip:hover { background: rgba(255, 255, 255, 0.24); }
.avatar-card-action.equipped { background: rgba(47, 182, 172, 0.25); color: #6fe0d3; cursor: default; }

/* Same "solid near-black, sits above everything" treatment as #weapon-shop — shown the instant
   online mode starts (before any duel/match popup could possibly be relevant yet), so it doesn't
   need a higher z-index than the shop/players panel it shares one with. */
#map-vote {
  position: fixed;
  inset: 0;
  z-index: 28;
  display: flex;
  flex-direction: column;
  background: rgba(4, 4, 6, 0.97);
  color: #eaf6ff;
}

#map-vote-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

#map-vote-title {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

#map-vote-timer {
  margin-left: auto;
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffd54f;
  font-variant-numeric: tabular-nums;
}

/* Same treatment as #skin-shop-search/#weapon-shop-search — added for the same reason once the
   map list grew large enough (206) that scrolling by eye stopped being practical, especially
   against the 10s vote window. */
#map-vote-search {
  flex-shrink: 0;
  margin: 0.6rem 1.2rem 0;
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #eaf6ff;
  font-size: 0.9rem;
}
#map-vote-search::placeholder { color: rgba(234, 246, 255, 0.5); }
#map-vote-search:focus { outline: none; border-color: #2fb6ac; background: rgba(255, 255, 255, 0.1); }

#map-vote-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.9rem;
  padding: 1rem 1.2rem 1.6rem;
  align-content: start;
}

.map-vote-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  border-radius: 14px;
  padding: 1rem 0.8rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #eaf6ff;
  cursor: pointer;
  text-align: center;
}
.map-vote-card:hover { background: rgba(255, 255, 255, 0.1); }
.map-vote-card.picked { background: rgba(47, 182, 172, 0.22); border-color: #2fb6ac; }

.map-vote-icon { font-size: 2rem; }

.map-vote-name {
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.2;
}

.map-vote-count {
  font-size: 0.74rem;
  color: rgba(234, 246, 255, 0.7);
}
.map-vote-card.picked .map-vote-count { color: #6fe0d3; font-weight: 700; }

/* Sits above everything else in-game (hint 20, death 25, mode-select 26) — it can be triggered
   from either of the first two (a fresh unlock mid-round, or picking a loadout before a new
   life) and needs to fully cover whichever is currently showing underneath. Solid near-black,
   deliberately more opaque than its semi-transparent siblings — a genuine "black box" you pick
   from, not just another tinted-glass menu. */
#loadout {
  position: fixed;
  inset: 0;
  z-index: 27;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Same overflow fix as #mode-select, and more urgent here: this picker shows every weapon
     you've ever bought from the shop (up to ~250 tiles at the shop's current size) and opens on
     every single respawn/death, not just once from the mode-select screen — without this, a
     player who owns more than a screenful of guns would find the loadout picker unusable well
     before they'd bought anywhere near the full shop. */
  justify-content: safe center;
  overflow-y: auto;
  gap: 1.2rem;
  padding: 1.5rem 0;
  background: rgba(4, 4, 6, 0.94);
  text-align: center;
}

#loadout-title {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  flex-shrink: 0;
}

#loadout-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  width: min(560px, 90vw);
  flex-shrink: 0;
}

.loadout-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 108px;
  padding: 0.9rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  color: #eaf6ff;
}

.loadout-tile:hover {
  background: #2fb6ac;
  color: #04211e;
  border-color: rgba(255, 255, 255, 0.4);
}

.loadout-icon {
  font-size: 2.4rem;
}

.loadout-name {
  font-size: 0.85rem;
  font-weight: 700;
}

/* ---- Online lobby ---- */
#lobby-hud {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#lobby-code-label {
  padding: 0.4rem 0.7rem;
  border-radius: 10px;
  background: rgba(6, 14, 22, 0.65);
  color: #9fe8c9;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

#lobby-hud button {
  padding: 0.5rem 0.9rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(6, 14, 22, 0.65);
  color: #eaf6ff;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}

#lobby-hud button:hover {
  background: #2fb6ac;
  color: #04211e;
}

#lobby-players-panel {
  position: fixed;
  inset: 0;
  z-index: 28;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: rgba(6, 14, 22, 0.85);
  backdrop-filter: blur(4px);
}

#lobby-players-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #eaf6ff;
}

#lobby-players-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(340px, 88vw);
  max-height: 50vh;
  overflow-y: auto;
}

#lobby-players-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.55rem 0.9rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  color: #eaf6ff;
  font-size: 0.9rem;
}

#lobby-players-list .lobby-player-challenge-btn {
  padding: 0.35rem 0.7rem;
  border-radius: 8px;
  border: none;
  background: #2fb6ac;
  color: #04211e;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
}

#lobby-players-list .lobby-player-challenge-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

#lobby-players-close-btn {
  padding: 0.5rem 1.4rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #eaf6ff;
  cursor: pointer;
}

#challenge-popup {
  position: fixed;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 29;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.4rem;
  border-radius: 14px;
  background: rgba(6, 14, 22, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #eaf6ff;
  text-align: center;
}

#challenge-buttons {
  display: flex;
  gap: 0.6rem;
}

#challenge-buttons button {
  padding: 0.45rem 1rem;
  border-radius: 8px;
  border: none;
  font-weight: 700;
  cursor: pointer;
}

#challenge-accept-btn {
  background: #2fb6ac;
  color: #04211e;
}

#challenge-decline-btn {
  background: rgba(255, 255, 255, 0.12);
  color: #eaf6ff;
}

#duel-hud {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 15;
  width: 200px;
  text-align: right;
}

#duel-opponent-name {
  font-weight: 700;
  color: #eaf6ff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  margin-bottom: 0.2rem;
}

#duel-round-score {
  font-size: 0.75rem;
  font-weight: 700;
  color: #ffd54f;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  margin-bottom: 0.3rem;
}

/* Same "big centered toast" treatment as #duel-result/#match-result, one z-index lower — a round
   win/loss is a smaller beat than the full match ending, so it shouldn't visually outrank it. */
#duel-round-banner, #match-round-banner {
  position: fixed;
  top: 33%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 28;
  font-size: 1.5rem;
  font-weight: 800;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.7);
  color: #eaf6ff;
  text-align: center;
}

#duel-opponent-health-wrap {
  height: 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

#duel-opponent-health-fill {
  height: 100%;
  width: 100%;
  background: #f44336;
  transition: width 0.15s;
}

#duel-result {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 29;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  text-align: center;
}

#duel-result-text {
  font-size: 2.2rem;
  font-weight: 900;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.7);
  color: #eaf6ff;
}

/* Only shown when the last opponent is still known (see endDuel's own lastDuelOpponentId check). */
#duel-rematch-btn {
  font-size: 1rem;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #34e89e, #3b9dff);
  color: #04121c;
  font-weight: 700;
  cursor: pointer;
  pointer-events: auto;
}
#duel-rematch-btn:hover { filter: brightness(1.1); }

#match-hud {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 15;
  width: 220px;
  padding: 0.6rem 0.7rem;
  border-radius: 12px;
  background: rgba(6, 14, 22, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

#match-hud-title {
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: #eaf6ff;
  text-align: center;
  margin-bottom: 0.4rem;
  opacity: 0.85;
}

#match-hud-round-score {
  font-size: 0.72rem;
  font-weight: 700;
  color: #ffd54f;
  text-align: center;
  margin-bottom: 0.4rem;
}

.match-hud-roster {
  list-style: none;
  padding: 0;
  margin: 0 0 0.4rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.match-hud-roster:last-child { margin-bottom: 0; }

.match-hud-roster li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: #eaf6ff;
}

.match-hud-roster .match-hud-name {
  flex: 0 0 auto;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-hud-roster .match-hud-health-wrap {
  flex: 1;
  height: 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.match-hud-roster .match-hud-health-fill {
  height: 100%;
  transition: width 0.15s;
}

.match-hud-roster.match-hud-enemies .match-hud-health-fill { background: #f44336; }
.match-hud-roster.match-hud-teammates .match-hud-health-fill { background: #4caf50; }

.match-hud-roster li.eliminated { opacity: 0.4; text-decoration: line-through; }

#match-result {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 29;
  font-size: 2.2rem;
  font-weight: 900;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.7);
  color: #eaf6ff;
  text-align: center;
}

#match-eliminated-banner {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  background: rgba(90, 10, 10, 0.75);
  color: #ffe2e2;
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
}

/* A soft vignette over the 3D view (under the HUD) pulls focus to the center. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(ellipse at center, transparent 58%, rgba(15, 25, 35, 0.35) 100%);
}

/* ---- Touch controls ---- */
/* Same layering trick as firefight.css's own touch controls: the outer container ignores pointer
   events entirely so an empty-area touch passes straight through to the canvas underneath (for
   look-drag), while each individual control opts back in with pointer-events:auto. Sits above the
   HUD (10) but below every overlay (hint 20 and up) so an overlay showing naturally blocks touches
   from reaching these controls underneath it, exactly like it already blocks mouse/keyboard input. */
#touch-controls {
  position: fixed;
  inset: 0;
  z-index: 12;
  pointer-events: none;
}

#touch-controls.hidden {
  display: none;
}

#touch-joystick {
  position: absolute;
  left: 18px;
  bottom: 18px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.25);
  pointer-events: auto;
  touch-action: none;
}

#touch-joystick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.55);
}

.touch-btn {
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.25);
  color: #eaf6ff;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  padding: 0;
  pointer-events: auto;
}

.touch-btn:active {
  background: rgba(255, 255, 255, 0.3);
}

#touch-crouch { left: 18px; bottom: 140px; }
#touch-jump { left: 96px; bottom: 140px; }
#touch-knife { right: 18px; bottom: 190px; }
/* Found by the Fight for Glory client-correctness audit: the 1/2 quick-swap hotkeys (switch
   directly to any already-unlocked gun, not just the next upgrade rung) had no touch equivalent —
   a touch player who upgraded past an earlier gun had no way back to it. Stacked above
   touch-knife on the same right-edge column, same 50px rhythm as the crouch/jump row below it. */
#touch-weapon-swap { right: 18px; bottom: 260px; }

#touch-fire-buttons {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none; /* only its own children opt back in — same trick as the outer container */
}

#touch-fire {
  position: static;
  width: 76px;
  height: 76px;
  background: rgba(255, 90, 60, 0.3);
  border-color: rgba(255, 90, 60, 0.6);
}

#touch-scope {
  position: static;
}

/* Dimmed rather than hidden while the current weapon can't scope (see updateTouchScopeAvailability
   in blockbattle.js) — same "don't jump the layout around on every weapon swap" reasoning as
   firefight.css's #touch-aim.unavailable. */
#touch-scope.unavailable {
  opacity: 0.35;
}

#death-mode-btn {
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #eaf6ff;
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
}

#death-mode-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}