/* Tapatoki - HUD design system.
   Tokens first, components second. Every control shares the same glass
   language: one control height, one radius scale, one type scale, one
   spacing grid (8 px). Nothing is styled ad hoc. */

:root {
  /* color */
  --ink: #eef0f4;
  --ink-dim: rgba(255, 255, 255, 0.58);
  --ink-faint: rgba(255, 255, 255, 0.38);
  --glass: rgba(255, 255, 255, 0.09);
  --glass-strong: rgba(255, 255, 255, 0.14);
  --line: rgba(255, 255, 255, 0.14);
  --gold: #ffc850;
  --gold-dim: rgba(255, 200, 80, 0.85);
  --danger: #ff4a52;
  --white-glow: rgba(255, 255, 255, 0.28);
  /* shape */
  --r-pill: 999px;
  --r-card: 14px;
  /* control heights */
  --h-ctl: 40px;
  --h-cta: 52px;
  /* type scale */
  --t-micro: 8px;
  --t-tiny: 10px;
  --t-small: 12px;
  --t-body: 14px;
  --t-title: 17px;
  --t-num: 24px;
  --t-hero: 32px;
  /* spacing grid */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --track: 0.14em;
  --track-wide: 0.3em;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  /* solid color UNDER the gradient: overscroll/rubber-band areas and any
     region the gradient image does not paint stay dark, never white */
  background: #050507 radial-gradient(120% 120% at 50% 35%, #0c0c12 0%, #050507 55%, #000 100%);
  color: var(--ink);
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#field { position: fixed; inset: 0; touch-action: none; }
/* no pinch-zoom anywhere: iOS ignores maximum-scale, the page must refuse
   the gesture itself or a two-finger touch zooms the arena away */
html, body {
  touch-action: pan-x pan-y;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

button { touch-action: manipulation; font-family: inherit; }

/* ---------- shared component classes (applied via ids below) ---------- */

/* glass pill: the ONE surface style for every control */
#homeBtn, #soundBtn, #musicBtn, #helpBtn, #inviteMini, #ammoWrap, #skills .skill, #lobbyList .game, #newTeamsBtn {
  background: var(--glass);
  border: 1px solid var(--line);
}

/* primary action: solid white pill */
#inviteBtn, #againBtn, #newGameBtn, #lobbyList .game button {
  appearance: none;
  border: none;
  border-radius: var(--r-pill);
  background: #fff;
  color: #000;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* ---------- top HUD ---------- */

#hud {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: calc(var(--s3) + max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px)) var(--s4) var(--s3);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s4);
  pointer-events: none;
  background: linear-gradient(rgba(8, 8, 12, 0.75), rgba(8, 8, 12, 0));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#hudLeft {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  min-width: 0;
}

#playerName {
  font-size: var(--t-body);
  font-weight: 700;
  letter-spacing: 0.05em;
  pointer-events: auto;
  cursor: pointer;
  width: fit-content;
}
#playerName:active { opacity: 0.6; }

#xpBar {
  width: 128px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
#xpBar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gold-dim), rgba(255, 240, 160, 0.95));
  transition: width 0.4s;
}

#status {
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--ink-dim);
  letter-spacing: 0.02em;
  max-width: 30ch;
  pointer-events: auto;
}

/* mini leaderboard */
#board { display: flex; flex-direction: column; gap: var(--s1); }
#board .row {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-tiny);
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  max-width: 168px;
}
#board .row .bdot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
/* teams: swap sides so a real group can sit together */
#sideBtn {
  position: absolute;
  /* under the room tag, never on it: at the old offset the pill sat exactly
     behind the room name and read as an empty button (2026-08-01) */
  top: calc(var(--s3) + 26px + max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  appearance: none;
  pointer-events: auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--glass);
  color: var(--ink-dim);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: var(--track-wide);
  white-space: nowrap;
}
#sideBtn:active { background: var(--glass-strong); color: var(--ink); }
/* this sheet has NO generic .hidden rule - every element declares its own.
   Without this line the button stayed on screen in a solo game, empty,
   because only its text is set in teams mode (2026-08-01) */
#sideBtn.hidden { display: none; }
#sideBtn.no { color: var(--bad); }

/* teams: the board is split into the two sides, because a colour per
   player says nothing about who is with whom */
#board .bteam {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: var(--track-wide);
  color: var(--ink-faint);
  margin: var(--s2) 0 2px;
}
#board .bteam:first-child { margin-top: 0; }
#board .row .bname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#board .row .bkd { margin-left: auto; opacity: 0.75; }
#board .row .crown { color: var(--gold); }
#board .row em {
  font-style: normal;
  font-size: var(--t-micro);
  font-weight: 700;
  color: var(--gold-dim);
}

/* score: top-right, the one number that matters */
#hudRight {
  display: flex;
  flex-direction: column;
  /* pin every row to the RIGHT edge: the hint pill changes width with
     its text, and a centered column made the score/ammo slide with it */
  align-items: flex-end;
  gap: 2px;
}
#score {
  font-size: var(--t-num);
  font-weight: 200;
  letter-spacing: 0.18em;
  margin-right: -0.18em; /* cancel trailing tracking for optical centering */
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px var(--white-glow);
  white-space: nowrap;
}
#scoreLabel {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  color: var(--ink-faint);
}
/* room name: centered in the top bar - visible, out of everyone's way */
#roomTag {
  text-indent: var(--track-wide);
  position: absolute;
  left: 50%;
  top: calc(var(--s3) + 4px + max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px));
  transform: translateX(-50%);
  font-size: var(--t-tiny);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  color: var(--ink);
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
  max-width: 40vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

/* ---------- bottom bar: sound + ammo, one aligned control group ---------- */

#bottomBar {
  position: fixed;
  left: var(--s4);
  right: max(var(--s4), env(safe-area-inset-right));
  bottom: calc(var(--s5) + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)) + var(--tg-content-safe-area-inset-bottom, 0px));
  display: flex;
  /* when the line is too narrow the hint wraps to its own row ABOVE */
  flex-wrap: wrap-reverse;
  align-items: center;
  gap: var(--s2);
  row-gap: var(--s2);
  pointer-events: none;
}
/* NOVA button occupies the right end of the bottom line */
body.has-nova #bottomBar { padding-right: 88px; }

#homeBtn, #soundBtn, #musicBtn, #helpBtn, #inviteMini, #chatBtn {
  pointer-events: auto;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--h-ctl);
  height: var(--h-ctl);
  border-radius: 50%;
  color: var(--ink-dim);
  transition: background 0.2s, color 0.2s;
}
#homeBtn svg { width: 17px; height: 17px; }
#homeBtn:active { background: var(--glass-strong); }
#inviteMini svg { width: 17px; height: 17px; }
#inviteMini:active { background: var(--glass-strong); }
#inviteMini { animation: uiBreathe 3.6s ease-in-out infinite 0.5s; }
#soundBtn svg { width: 17px; height: 17px; }
#soundBtn .icon-off { display: none; }
#soundBtn.off .icon-on { display: none; }
#soundBtn.off .icon-off { display: block; }
#soundBtn.off { color: var(--ink-faint); background: transparent; }
#soundBtn:active { background: var(--glass-strong); }

#ammoWrap {
  display: flex;
  align-items: center;
  gap: var(--s2);
  height: var(--h-ctl);
  padding: 0 var(--s4);
  border-radius: var(--r-pill);
  /* lives in the top-right HUD column, under the hint pill */
  margin-top: var(--s2);
}
#ammo { display: flex; gap: 7px; align-items: center; }
#ammo .num {
  font-size: var(--t-body);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
}
/* each round is a tiny BULLET - the exact silhouette of the AMMO loot
   icon: round nose, straight body, wider casing rim at the base */
#ammo .blt {
  position: relative;
  width: 6px; height: 10px;
  margin-bottom: 3px;
  border-radius: 3px 3px 0.5px 0.5px;
  background: rgba(255, 255, 255, 0.16);
  transition: background 0.25s, box-shadow 0.25s;
}
#ammo .blt::after {
  content: '';
  position: absolute;
  left: -1px;
  top: calc(100% + 0.5px);
  width: 8px;
  height: 2.6px;
  border-radius: 0.5px;
  background: inherit;
  box-shadow: inherit;
}
#ammo .blt.spent { animation: dotSpend 0.4s ease; }
@keyframes dotSpend {
  0% { background: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, 1); transform: scale(1.6); }
  100% { background: rgba(255, 255, 255, 0.16); box-shadow: none; transform: scale(1); }
}
#ammo .blt.on {
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
}
#ammoLabel { display: none; }
#ammoWrap.empty { animation: ammoEmpty 0.35s ease; }
@keyframes ammoEmpty {
  0%, 100% { border-color: var(--line); transform: translateX(0); }
  25% { border-color: rgba(255, 74, 82, 0.9); transform: translateX(-3px); }
  50% { border-color: rgba(255, 74, 82, 0.9); }
  75% { border-color: rgba(255, 74, 82, 0.9); transform: translateX(3px); }
}
#ammoLabel {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  color: var(--ink-faint);
}

/* ---------- skills: one row of chips above the hint ---------- */

/* skills live IN the bottom bar, right after ammo: square 40x40 chips.
   One flex row = nothing can ever overlap. */
#skills {
  display: flex;
  gap: var(--s2);
  pointer-events: none;
}
#skills .skill {
  /* the row itself stays transparent so the arena keeps the empty space,
     but every chip in it must be pressable - without this the skills read
     as buttons and behave as scenery */
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: var(--h-ctl);
  height: var(--h-ctl);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
#skills .skill svg { width: 13px; height: 13px; flex: none; z-index: 1; }
#skills .skill b { font-size: var(--t-micro); font-weight: 700; z-index: 1; }
#skills .skill i {
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  background: currentColor;
  opacity: 0.9;
}
#skills .vision { color: #7dc4ff; }
#skills .sun { color: #ff9a3d; }
#skills .swift { color: #7dffa0; }
#skills .aim { color: #62e6e0; }
#skills .frenzy { color: #ff5a8a; }
#ammo .num.frenzy { color: #ff5a8a; text-shadow: 0 0 10px rgba(255, 90, 138, 0.9); animation: uiBreathe 0.6s ease-in-out infinite; }
#skills .ghost { color: #c9b3ff; }
#skills .power { color: var(--gold); }
#skills .armor { color: #78beff; }

/* ---------- NOVA: the strike button ---------- */

#novaBtn {
  position: fixed;
  right: max(var(--s4), env(safe-area-inset-right));
  /* center-aligned with the 40px bottom line (button is 60px tall) */
  bottom: calc(var(--s5) - 10px + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)) + var(--tg-content-safe-area-inset-bottom, 0px));
  width: 60px;
  height: 60px;
  border-radius: 50%;
  appearance: none;
  border: 1.5px solid rgba(255, 200, 80, 0.5);
  background: rgba(255, 200, 80, 0.12);
  color: var(--gold-dim);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
#novaBtn svg { width: 19px; height: 19px; }
#novaBtn b { font-size: var(--t-micro); font-weight: 700; }
#novaBtn.hidden { display: none; }
#novaBtn.ready {
  background: var(--gold);
  color: #201400;
  box-shadow: 0 0 30px rgba(255, 200, 80, 0.6);
  animation: novaPulse 1.2s ease-in-out infinite;
}
#novaBtn:active { transform: scale(0.92); }
#novaBtn.deny { animation: novaDeny 0.3s ease; }
@keyframes novaDeny {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
@keyframes novaPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(255, 200, 80, 0.45); }
  50%      { box-shadow: 0 0 40px rgba(255, 200, 80, 0.8); }
}

/* ---------- hint ---------- */

/* hint: right-aligned, just above the NOVA corner */
#hint {
  /* floats centered ABOVE the field square; top is set from JS to track
     the field geometry (same idea as the countdown) */
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  padding: var(--s1) var(--s3);
  border-radius: var(--r-pill);
  background: var(--glass);
  border: 1px solid var(--line);
  text-align: center;
  text-indent: var(--track-wide);
  font-size: var(--t-tiny);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  white-space: nowrap;
  color: var(--ink-dim);
  pointer-events: none;
  transition: color 0.2s;
  text-align: right;
}
#hint.hidden { display: none; }
#hint.danger { border-color: rgba(255, 74, 82, 0.5); }
#hint.danger {
  color: var(--danger);
  text-shadow: 0 0 16px rgba(255, 60, 70, 0.6);
  animation: dangerPulse 0.9s ease-in-out infinite;
}
@keyframes dangerPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* ---------- waiting: QR + invite ---------- */

#qr {
  position: fixed;
  left: 50%;
  /* the QR + INVITE group is centered as ONE block on the screen */
  top: calc(50% - 112px);
  transform: translateX(-50%);
  width: 148px;
  height: 148px;
  border-radius: var(--r-card);
  box-shadow: 0 0 30px var(--white-glow);
  image-rendering: pixelated;
}
#qr.hidden { display: none; }

#inviteBtn {
  position: fixed;
  left: 50%;
  top: calc(50% + 60px);
  transform: translateX(-50%);
  height: var(--h-cta);
  padding: 0 48px;
  font-size: var(--t-title);
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  box-shadow: 0 0 34px rgba(255, 255, 255, 0.3);
  animation: invitePulse 2s ease-in-out infinite;
  transition: transform 0.15s cubic-bezier(0.2, 0.9, 0.3, 1);
}
#inviteBtn:active { transform: translateX(-50%) scale(0.94); }
#inviteBtn.hidden { display: none; }
@keyframes invitePulse {
  0%, 100% { box-shadow: 0 0 22px rgba(255, 255, 255, 0.22); }
  50%      { box-shadow: 0 0 44px rgba(255, 255, 255, 0.45); }
}

/* ---------- overlay: death ---------- */

#overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 4, 6, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s5);
  animation: overlayIn 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
}
#overlay.hidden { display: none; }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }

#overlayText {
  font-size: clamp(26px, 7vw, 40px);
  font-weight: 100;
  letter-spacing: 0.3em;
  margin-left: 0.3em;
  animation: titleIn 0.5s cubic-bezier(0.2, 0.9, 0.3, 1);
}
#overlayText.win  { color: #fff; text-shadow: 0 0 34px rgba(255, 255, 255, 0.6); }
#overlayText.lose { color: var(--danger); text-shadow: 0 0 34px rgba(255, 60, 70, 0.55); }
@keyframes titleIn {
  from { opacity: 0; transform: scale(1.18); }
  to   { opacity: 1; transform: scale(1); }
}

/* match podium: three clean medal rows */
#podium {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  min-width: min(78vw, 320px);
}
#podium .prow {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s4);
  border-radius: var(--r-card);
  background: var(--glass);
  border: 1px solid var(--line);
  font-size: var(--t-body);
  font-variant-numeric: tabular-nums;
}
#podium .prow .medal { font-weight: 800; width: 1.4em; }
#podium .prow:nth-child(1) .medal { color: var(--gold); }
#podium .prow:nth-child(2) .medal { color: #c9d2e0; }
#podium .prow:nth-child(3) .medal { color: #c98d5a; }
#podium .prow .pname { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#podium .prow .pk { margin-left: auto; color: var(--ink-dim); }
#podium .prow.me { border-color: rgba(255, 200, 80, 0.6); box-shadow: 0 0 18px rgba(255, 200, 80, 0.15); }
#podium.hidden { display: none; }
#nextMatch {
  font-size: var(--t-tiny);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  margin-left: var(--track-wide);
  color: var(--ink-faint);
  animation: uiBreathe 1.6s ease-in-out infinite;
}
#nextMatch.hidden { display: none; }

#overlayScore { white-space: pre-line; text-align: center; }
#overlayScore {
  font-size: var(--t-small);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  line-height: 1.9;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  max-width: 84vw;
  margin: 0 auto;
}

#againBtn {
  height: var(--h-cta);
  padding: 0 44px;
  font-size: var(--t-title);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
  transition: transform 0.15s cubic-bezier(0.2, 0.9, 0.3, 1);
}
#againBtn:active { transform: scale(0.94); }

/* ---------- lobby ---------- */

body.lobby #hud, body.lobby #hint, body.lobby #bottomBar, body.lobby #skills { display: none; }

#lobby {
  position: fixed; inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(7vh + env(safe-area-inset-top)) 20px calc(var(--s5) + env(safe-area-inset-bottom));
  gap: var(--s4);
  /* the lobby grew (missions, legends): IT scrolls, the game never does */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* every lobby column sits on the SAME grid width */
#lobbyMissions, #lobbyList, #lobbyTop, #lobbyTopDay {
  width: min(86vw, 420px);
  flex-shrink: 0;
}
#lobby.hidden { display: none; }
/* the install card is fixed at the bottom: without room to scroll past it,
   it would sit on top of NEW GAME - the one button that must never be
   covered */
body.install-pop #lobby { padding-bottom: calc(var(--s5) + env(safe-area-inset-bottom) + 84px); }

#lobbyLogo {
  width: min(74vw, 440px);
  animation: logoBreathe 4.2s ease-in-out infinite;
}
@keyframes logoBreathe {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.12)); }
  50%      { filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.28)); }
}
#lobbyTop, #lobbyTopDay {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}
#lobbyTop .trow, #lobbyTopDay .trow {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  padding: var(--s1) var(--s3);
  font-size: var(--t-small);
  color: var(--ink-dim);
}
#lobbyTop .trow .trank, #lobbyTopDay .trow .trank { width: 1.4em; color: var(--ink-faint); font-weight: 700; }
#lobbyTop .trow .tname, #lobbyTopDay .trow .tname { font-weight: 700; color: var(--ink); }
#lobbyTop .trow .tlv, #lobbyTopDay .trow .tlv { font-size: var(--t-micro); color: var(--gold-dim); font-weight: 700; }
#lobbyTop .trow .tkd, #lobbyTopDay .trow .tkd { margin-left: auto; font-variant-numeric: tabular-nums; }
#lobbyTop.hidden, #lobbySub2.hidden { display: none; }
#lobbySubD.hidden, #lobbyTopDay.hidden { display: none; }
#lobbySub2, #lobbySubD {
  text-indent: var(--track-wide);
  font-size: var(--t-tiny);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  color: var(--ink-faint);
  margin-top: var(--s2);
}

#lobbyHello {
  text-indent: 0.06em;
  font-size: var(--t-body);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin-top: calc(-1 * var(--s2));
}
#lobbyHello i {
  text-indent: var(--track-wide);
  display: block;
  font-style: normal;
  font-size: var(--t-tiny);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  color: var(--gold-dim);
  margin-top: var(--s1);
  text-align: center;
}
#lobbyHello.hidden { display: none; }
/* the way into the aura picker: a quiet chip under your own name */
#lobbyHello .gearOpen {
  display: inline-block;
  margin-top: var(--s1);
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  font-size: var(--t-tiny);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  color: var(--ink-dim);
  cursor: pointer;
}
#lobbyHello .gearOpen.on {
  color: var(--gold);
  border-color: var(--gold-dim);
}

#lobbyMissions {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}
#lobbyMissions .mrow {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-card);
  background: var(--glass);
  border: 1px solid var(--line);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
}
#lobbyMissions .mrow.done { opacity: 0.55; }
#lobbyMissions .mrow .ml { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lobbyMissions .mrow .mp { margin-left: auto; color: var(--ink-dim); }
#lobbyMissions .mrow .mx { color: var(--gold-dim); font-weight: 700; }
#lobbyMissions.hidden, #lobbySubM.hidden { display: none; }
#lobbySubG {
  text-indent: var(--track-wide);
  font-size: var(--t-tiny);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  color: var(--ink-faint);
  margin-top: var(--s2);
}
#lobbyGear {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s2);
  width: min(86vw, 420px);
  flex-shrink: 0;
}
#lobbyGear .gchip {
  appearance: none;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: var(--t-tiny);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  padding: var(--s2) var(--s3);
  cursor: pointer;
}
#lobbyGear .gchip.cur { border-color: rgba(255, 200, 80, 0.7); color: var(--gold); }
#lobbyGear .gchip.lock { opacity: 0.4; cursor: default; }
#lobbyGear .gchip i {
  font-style: normal;
  color: var(--ink-faint);
  font-weight: 600;
}
#lobbySubG.hidden, #lobbyGear.hidden { display: none; }
#lobbySubM {
  text-indent: var(--track-wide);
  font-size: var(--t-tiny);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  color: var(--ink-faint);
  margin-top: var(--s2);
}
#lobbyList .game.hot {
  border-color: rgba(255, 200, 80, 0.6);
  animation: hotCall 1.6s ease-in-out infinite;
}
@keyframes hotCall {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 200, 80, 0); }
  50% { box-shadow: 0 0 22px rgba(255, 200, 80, 0.35); }
}

/* account row: quiet text-buttons under the CTAs */
#lobbyAuth {
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
  gap: var(--s4);
  margin-top: var(--s2);
}
#lobbyAuth button {
  appearance: none;
  background: none;
  border: none;
  color: var(--ink-faint);
  font-size: var(--t-tiny);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  cursor: pointer;
  padding: var(--s2);
}
#lobbyAuth button:active { color: var(--ink); }
#langSel {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-faint);
  font-size: var(--t-tiny);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  padding: var(--s2) var(--s4);
  cursor: pointer;
}
#langSel:focus { outline: none; color: var(--ink); }
#langSel option { background: #0a0a10; color: var(--ink); }
#linkCodeBox {
  font-size: var(--t-num);
  font-weight: 700;
  letter-spacing: 0.4em;
  margin-left: 0.4em;
  color: var(--gold);
  text-shadow: 0 0 16px rgba(255, 200, 80, 0.5);
}
#linkCodeBox i {
  display: block;
  font-style: normal;
  font-size: var(--t-tiny);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  margin-left: 0;
  color: var(--ink-faint);
  text-align: center;
  margin-top: var(--s1);
}
#linkCodeBox.hidden { display: none; }
#tgLoginBox { min-height: 0; }

#lobbySub {
  text-indent: var(--track-wide);
  font-size: var(--t-tiny);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  color: var(--ink-faint);
  margin-top: var(--s2);
}

#lobbyList {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
#lobbyList .game {
  display: flex;
  align-items: center;
  gap: var(--s3);
  border-radius: var(--r-card);
  padding: var(--s3) var(--s4);
  font-size: var(--t-small);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#lobbyList .game:active { background: rgba(255, 255, 255, 0.06); }
#lobbyList .game .gname { font-weight: 700; letter-spacing: 0.06em; }
#lobbyList .game .gflag { margin-right: 6px; font-size: 14px; }
#lobbyList .game .gmode {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--track);
  color: var(--gold-dim);
}
#lobbyList .game .gcount {
  margin-left: auto;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
#lobbyList .game button {
  height: 32px;
  padding: 0 18px;
  font-size: var(--t-tiny);
}
#lobbyList .empty {
  text-align: center;
  font-size: var(--t-small);
  color: var(--ink-faint);
  padding: var(--s4) 0;
}

#lobbyBtns { display: flex; gap: var(--s3); margin-top: var(--s2); }
#lobbyBtns button {
  height: var(--h-cta);
  padding: 0 26px;
  border-radius: var(--r-pill);
  font-size: var(--t-body);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
}
#newGameBtn { box-shadow: 0 0 26px var(--white-glow); }
#newTeamsBtn { appearance: none; color: var(--ink); }

/* server away: a calm full-screen promise instead of a dead page */
#reconnect {
  position: fixed;
  inset: 0;
  background: rgba(4, 4, 6, 0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  z-index: 60;
}
#reconnect.hidden { display: none; }
#reconnect b {
  font-size: clamp(20px, 6vw, 34px);
  font-weight: 200;
  letter-spacing: 0.28em;
  margin-left: 0.28em;
  color: var(--ink);
  text-shadow: 0 0 24px rgba(255, 255, 255, 0.35);
  animation: uiBreathe 2.2s ease-in-out infinite;
  text-align: center;
}
#reconnect i {
  font-style: normal;
  font-size: var(--t-tiny);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  color: var(--ink-faint);
  animation: uiBreathe 1.4s ease-in-out infinite 0.4s;
}

/* event banner: KILL / DOUBLE KILL / LEVEL UP - the game SHOUTS */
#banner {
  position: fixed;
  left: 0; right: 0;
  top: 30%;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 45;
}
#banner.hidden { display: none; }
#banner b {
  font-size: min(6.5vw, 34px);
  font-weight: 800;
  letter-spacing: 0.18em;
  margin-right: -0.18em;
  color: var(--gold);
  text-shadow: 0 0 24px rgba(255, 200, 80, 0.75), 0 0 70px rgba(255, 200, 80, 0.35);
  animation: bannerPop 1.15s ease both;
  text-align: center;
  max-width: 92vw;
}
#banner b.t3 { font-size: min(8vw, 42px); }
#banner b.t4 {
  font-size: min(9.5vw, 52px);
  color: #fff;
  text-shadow: 0 0 26px rgba(255, 255, 255, 0.9), 0 0 80px rgba(255, 200, 80, 0.6);
}
#banner b.loot { color: var(--ink); text-shadow: 0 0 20px rgba(255, 255, 255, 0.5); font-size: min(5vw, 22px); }
@keyframes bannerPop {
  0% { transform: scale(1.9); opacity: 0; }
  14% { transform: scale(1); opacity: 1; }
  78% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.94); opacity: 0; }
}
/* XP numbers flying home + the bar flashing on arrival */
.xpfly {
  position: fixed;
  font-size: 13px;
  font-weight: 800;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(255, 200, 80, 0.8);
  pointer-events: none;
  z-index: 46;
  transition: transform 0.7s cubic-bezier(0.5, -0.2, 0.7, 1), opacity 0.7s;
}
#xpBar.flash i { animation: xpFlash 0.5s ease; }
@keyframes xpFlash {
  0% { box-shadow: 0 0 0 rgba(255, 200, 80, 0); }
  40% { box-shadow: 0 0 18px rgba(255, 220, 120, 1); filter: brightness(2); }
  100% { box-shadow: 0 0 0 rgba(255, 200, 80, 0); filter: brightness(1); }
}

/* countdown: 3-2-1-GO in the center when a rival enters */
#countdown {
  position: fixed;
  /* geometry is set from JS to match the FIELD square, not the viewport */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  /* the arena visibly sleeps through 3-2-1, and GO wakes it (synced with
     the iOS shutter, 2026-08-02) */
  background: rgba(3, 4, 8, 0.42);
  border-radius: 20px;
  z-index: 40;
}
#countdown.hidden { display: none; }
#cdBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
}
#cdTip {
  font-style: normal;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  margin-left: var(--track-wide);
  color: var(--ink-dim);
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.35);
  animation: cdPop 0.7s ease both;
  white-space: nowrap;
}
#countdown b {
  font-size: min(26vw, 130px);
  font-weight: 200;
  letter-spacing: 0.12em;
  margin-left: 0.12em;
  color: var(--ink);
  text-shadow: 0 0 40px rgba(255, 255, 255, 0.55), 0 0 90px rgba(255, 255, 255, 0.25);
  animation: cdPop 0.7s ease both;
}
#countdown b.go {
  color: var(--gold);
  text-shadow: 0 0 40px rgba(255, 200, 80, 0.7), 0 0 110px rgba(255, 200, 80, 0.35);
}
/* a WORD on the last beat, not a digit: digit sizing made ВПЕРЁД! span
   the whole screen (130px per glyph). Words get a word-sized type. */
#countdown b.word {
  font-size: min(13vw, 64px);
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-left: 0.2em;
  white-space: nowrap;
}
@keyframes cdPop {
  /* the digit STAYS until the next beat replaces it: timers drift on
     weak phones, and a digit that dissolved early left silence+beeps */
  0% { transform: scale(1.7); opacity: 0; }
  16% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.96); opacity: 1; }
}

/* ---------- otherworldly breathing: every glass organ slowly pulses,
   each family on its own phase so the interface feels alive ---------- */

@keyframes uiBreathe {
  0%, 100% {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 10px rgba(159, 176, 224, 0.05);
  }
  50% {
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 0 22px rgba(159, 176, 224, 0.16);
  }
}
#soundBtn { animation: uiBreathe 3.6s ease-in-out infinite; }
#homeBtn { animation: uiBreathe 3.6s ease-in-out infinite 0.35s; }
#ammoWrap { animation: uiBreathe 3.6s ease-in-out infinite 0.7s; }
#skills .skill { animation: uiBreathe 3.6s ease-in-out infinite 1.3s; }
#lobbyList .game { animation: uiBreathe 4s ease-in-out infinite; }
#novaBtn:not(.ready) { animation: uiBreathe 3.2s ease-in-out infinite 0.4s; }

@keyframes scoreBreathe {
  0%, 100% { text-shadow: 0 0 14px rgba(255, 255, 255, 0.2); }
  50%      { text-shadow: 0 0 30px rgba(255, 255, 255, 0.5); }
}
#score { animation: scoreBreathe 3.4s ease-in-out infinite; }

@keyframes xpFlow {
  0%   { filter: brightness(0.9); }
  50%  { filter: brightness(1.35); }
  100% { filter: brightness(0.9); }
}
#xpBar i { animation: xpFlow 3s ease-in-out infinite; }

@keyframes qrBreathe {
  0%, 100% { box-shadow: 0 0 22px rgba(255, 255, 255, 0.2); }
  50%      { box-shadow: 0 0 40px rgba(255, 255, 255, 0.38); }
}
#qr { animation: qrBreathe 3s ease-in-out infinite; }
#invitePromo {
  position: fixed;
  left: 50%;
  top: calc(50% + 128px);
  transform: translateX(-50%);
  font-size: var(--t-tiny);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  text-align: center;
  color: var(--gold-dim);
  text-shadow: 0 0 12px rgba(255, 200, 80, 0.35);
  max-width: 92vw;
  text-align: center;
  line-height: 1.6;
  pointer-events: none;
  animation: uiBreathe 2.4s ease-in-out infinite;
}
#invitePromo.hidden { display: none; }

@keyframes dotBreathe {
  0%, 100% { box-shadow: 0 0 6px rgba(255, 255, 255, 0.7); }
  50%      { box-shadow: 0 0 12px rgba(255, 255, 255, 1); }
}
#ammo .dot.spent { animation: dotSpend 0.4s ease; }
@keyframes dotSpend {
  0% { background: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, 1); transform: scale(1.6); }
  100% { background: rgba(255, 255, 255, 0.16); box-shadow: none; transform: scale(1); }
}
#ammo .dot.on { animation: dotBreathe 2.6s ease-in-out infinite; }

/* ---------- responsive ---------- */

@media (max-width: 600px) {
  #score { font-size: 20px; }
  #status { font-size: var(--t-tiny); max-width: 24ch; }
  #inviteBtn { padding: 0 40px; font-size: var(--t-body); }
}

@media (min-width: 1100px) {
  #status { font-size: 13px; }
  #score { font-size: 28px; }
}

@media (hover: hover) {
  #soundBtn:hover { background: var(--glass-strong); }
  #inviteBtn:hover { box-shadow: 0 0 54px rgba(255, 255, 255, 0.5); }
  #againBtn:hover, #newGameBtn:hover { box-shadow: 0 0 40px rgba(255, 255, 255, 0.35); }
}

/* asset attribution: CC-BY art requires a visible credit */
#credits {
  margin-top: var(--s4);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: rgba(200, 207, 220, 0.28);
  text-align: center;
  max-width: min(86vw, 420px);
  line-height: 1.6;
}

/* --- connection warning: the player must know the pipe is the problem --- */
#netWarn {
  /* Bottom of the screen, above the icon row: the top belongs to the
     hints, and a warning that covers them trades one problem for two. */
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 86px);
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(40, 12, 12, 0.82);
  border: 1px solid rgba(255, 90, 90, 0.35);
  backdrop-filter: blur(6px);
  pointer-events: none;
  max-width: 86vw;
  text-align: center;
}
#netWarn b {
  font-size: var(--t-tiny);
  font-weight: 800;
  letter-spacing: var(--track-wide);
  color: #ff8f8f;
}
#netWarn i {
  font-style: normal;
  font-size: var(--t-tiny);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.6);
}
#netWarn.hidden { display: none; }

/* --- telegram: chat next to the in-game icons, channel in the lobby --- */
#chatBtn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink-dim);
  -webkit-tap-highlight-color: transparent;
}
#chatBtn svg { width: 20px; height: 20px; }
#chatBtn:active { background: rgba(255, 255, 255, 0.12); }
#tgChannel {
  display: block;
  margin: var(--s3) auto 0;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(92, 168, 255, 0.35);
  background: rgba(38, 96, 160, 0.16);
  color: #8fc4ff;
  font-size: var(--t-tiny);
  font-weight: 800;
  letter-spacing: var(--track-wide);
  text-decoration: none;
  text-align: center;
  width: fit-content;
}

/* never on the front page: there is no game to be lagging there */
body.lobby #netWarn { display: none; }

/* --- music: play/pause next to the speaker --- */
#musicBtn svg { width: 15px; height: 15px; }
#musicBtn .icon-pause { display: none; }
body.music-on #musicBtn .icon-play { display: none; }
body.music-on #musicBtn .icon-pause { display: block; }
/* playing: the icon lights up, the button itself stays one of the family.
   It used to be a white disc with an orange glyph - it had fallen out of
   the shared button rule entirely and painted itself. */
body.music-on #musicBtn { color: var(--ink); }
#musicBtn.empty { opacity: 0.35; }

/* --- volume: a slider that lives on the speaker button --- */
#volPop {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
  z-index: 42;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(16, 16, 22, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
}
#volPop.hidden { display: none; }
#volRange {
  appearance: none;
  width: 46vw;
  max-width: 220px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  outline: none;
}
#volRange::-webkit-slider-thumb {
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ink);
  border: none;
}
#volRange::-moz-range-thumb {
  width: 18px; height: 18px; border: none; border-radius: 50%; background: var(--ink);
}

/* --- help panel: the rules, one screen, readable in the dark --- */
#helpPanel {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(4, 4, 8, 0.86);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px 18px;
}
#helpPanel.hidden { display: none; }
#helpCard {
  width: min(520px, 100%);
  max-height: 100%;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  background: rgba(14, 14, 20, 0.96);
  padding: 22px 22px 18px;
  text-align: left;
}
#helpCard b {
  display: block;
  text-align: center;
  font-size: var(--t-body);
  font-weight: 800;
  letter-spacing: var(--track-wide);
  color: var(--ink);
  margin-bottom: 16px;
}
#helpCard p {
  margin: 0 0 11px;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-dim);
}
#helpCard p.teams {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--gold);
}
#helpCard #helpClose {
  appearance: none;
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 13px;
  border: none;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font: inherit;
  font-size: var(--t-small);
  font-weight: 800;
  letter-spacing: var(--track-wide);
}
/* the glyph needs its own size like every other icon here: without it the
   svg stretched to the whole button and the round clip ate the question
   mark, leaving an empty circle in the bar */
#helpBtn svg { width: 17px; height: 17px; }
#helpBtn:active { background: var(--glass-strong); }
#helpBtn { pointer-events: auto; }

/* --- install chip on the front page --- */
#installBtn {
  appearance: none;
  display: block;
  margin: var(--s3) auto 0;
  padding: 12px 26px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-tiny);
  font-weight: 800;
  letter-spacing: var(--track-wide);
  width: fit-content;
}
#installBtn.hidden { display: none; }

/* --- install prompt: a bottom card on the front page. The chip alone sits
   at the very end of a scrolling lobby, so most players never scrolled to
   it (user report 2026-08-02: "where is the webapp?"). This one comes to
   them, once, and can be dismissed. --- */
#installPop {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--s3));
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: min(420px, calc(100vw - 2 * var(--s4)));
  padding: 10px var(--s3) 10px 10px;
  border-radius: var(--r-card);
  background: rgba(14, 14, 20, 0.94);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
  animation: installRise 0.32s ease-out;
}
@keyframes installRise {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
#installIcon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  flex: 0 0 auto;
}
#installTxt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
#installTitle {
  font-size: var(--t-small);
  font-weight: 800;
  /* tight tracking on purpose: the card is narrow and the title has to hold
     one line next to the icon and the button */
  letter-spacing: 0.04em;
  color: var(--ink);
}
#installWhy {
  font-style: normal;
  font-size: var(--t-tiny);
  letter-spacing: 0.03em;
  color: var(--ink-dim);
  line-height: 1.35;
}
#installGo {
  appearance: none;
  flex: 0 0 auto;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #0c0c12;
  font: inherit;
  font-size: var(--t-tiny);
  font-weight: 800;
  letter-spacing: var(--track);
}
#installGo:active { opacity: 0.75; }
#installLater {
  appearance: none;
  position: absolute;
  top: -9px;
  right: -9px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(30, 30, 38, 0.98);
  color: var(--ink-faint);
  font: inherit;
  font-size: 15px;
  line-height: 1;
}
#installPop.hidden { display: none; }

/* --- the region switch: two worlds, the current one lit --- */
#srvRow { display: flex; gap: 10px; justify-content: center; }
#srvRow a {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: var(--t-tiny);
  font-weight: 800;
  letter-spacing: var(--track);
  color: var(--ink-dim);
  background: var(--glass);
  text-decoration: none;
}
#srvRow a.here { color: #0c0c12; background: var(--ink); }

/* while the death lesson is on screen the ARENA still owns the touch:
   a tap enters the game and dismisses the lesson (REMATCH etc. keep
   pointer events in the match-end state, which never sets .peek) */
#overlay.peek { pointer-events: none; }

/* --- the dry-fire shout: short, red, dead centre --- */
#noAmmo {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 46;
  pointer-events: none;
  font-size: var(--t-title);
  font-weight: 800;
  letter-spacing: var(--track-wide);
  margin-left: var(--track-wide);
  color: var(--danger);
  text-shadow: 0 0 18px rgba(255, 74, 82, 0.6);
  animation: cdPop 0.75s ease both;
  white-space: nowrap;
}
#noAmmo.hidden { display: none; }