/* The page behind a game is dark, so a frame laid out before a rotation settles never shows a white slab. */
html { background-color: #04080f; }
/* Void Arcade — shared mobile HUD contract.
 *
 * One stylesheet, linked by every game AFTER its inline <style>, so a HUD
 * fix here reaches shipped games. Activated by body.va-mobile-hud-ready,
 * which shared-game-layout.js adds while the mobile layout is active
 * (mobile-controls.js adds it too, as a belt-and-braces for the load race).
 *
 * Geometry comes from the safe-zone vars shared-game-layout.js publishes:
 *   --va-safe-top/right/bottom/left = max(letterbox inset, env(safe-area-inset-*))
 * Every anchored HUD element is `calc(var(--va-safe-*) + <one token>)`, so
 * the notch, the home bar and a letterboxed canvas are handled once.
 *
 * Layout (mobile, landscape):
 *   top-left      #ui (score / supercharge)          #ui
 *   top-right     bag  ← token chip ← active powerups (mobile-controls.js)
 *   under the bag #chargeUi (canonical vertical card, same as desktop)
 *   bottom-left   free (desktop tray is hidden on mobile)
 *   bottom-right  game-specific stats (per game)
 * Portrait (body.va-portrait-mode): charge card becomes a horizontal bar
 * bottom-left; score scales up.
 *
 * Per-game overrides go in the game file *after* this link, and should
 * nudge, not re-implement.
 */

:root {
  --va-hud-margin: 18px;             /* distance from the safe edge to #ui / #tokenUi */
  --va-hud-corner-top: 14px;         /* top of the bag / chip row (mobile-controls.js) */
  --va-hud-corner-size: 52px;        /* bag button size (mobile-controls.js) */
  --va-hud-charge-gap: 12px;         /* gap between the bag row and the charge card */
  --va-hud-charge-right: 16px;
}

/* ─── Desktop charge stack ───────────────────────────────────────────── */
/* shared-game-layout.js keeps #chargeUi below #ui on desktop and adds this
   class when a vertical powerup tray leaves no room for the full card. */
#chargeUi.va-charge-compact { padding: 8px 8px 9px !important; gap: 4px !important; }
#chargeUi.va-charge-compact .charge-bar-container,
#chargeUi.va-charge-compact .charge-bar { height: 40px !important; }
#chargeUi.va-charge-compact #chargeCount { font-size: 13px !important; }

/* ─── Container + canvas ─────────────────────────────────────────────── */
/* Container fills the viewport so the canvas can be cover-scaled and HUD
   elements anchor to the screen edges. No transform: getBoundingClientRect()
   on the canvas stays reliable for touch handlers. */
body.va-mobile-hud-ready #gameContainer {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  transform: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #04080f;
}
body.va-mobile-hud-ready #gameContainer #gameCanvas {
  position: absolute !important;
}

/* ─── Score / status (top-left) ──────────────────────────────────────── */
body.va-mobile-hud-ready #ui {
  position: absolute !important;
  top: calc(var(--va-safe-top, 0px) + var(--va-signin-offset, 0px) + var(--va-hud-margin)) !important;
  left: calc(var(--va-safe-left, 0px) + var(--va-hud-margin)) !important;
  right: auto !important;
  bottom: auto !important;
  font-size: 11px !important;
  z-index: 20;
}
body.va-mobile-hud-ready #ui #score {
  font-size: 28px !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
body.va-mobile-hud-ready #ui #superChargeLabel {
  font-size: 9px !important;
  letter-spacing: 0.2em;
  margin-top: 8px !important;
}
body.va-mobile-hud-ready #ui #superChargeTimer {
  font-size: 28px !important;
  margin-top: 2px !important;
}
/* Small "Score" / "SUPER CHARGE" labels are too dim at 11px on a phone. */
body.va-mobile-hud-ready #ui .ui-score-label,
body.va-mobile-hud-ready #ui #superChargeLabel {
  color: rgba(216, 232, 255, 0.92) !important;
  font-size: 12px !important;
}

/* ─── Charge meter (under the bag, right column) ─────────────────────── */
/* Same vertical card as desktop. It hangs directly below the top-right bag
   row, so it can never collide with the bag or the token chip regardless of
   viewport height (the old `bottom: 176px` did, on 375–390px-tall phones). */
body.va-mobile-hud-ready #chargeUi {
  position: fixed !important;
  top: calc(var(--va-safe-top, 0px) + var(--va-hud-corner-top) + var(--va-hud-corner-size) + var(--va-hud-charge-gap)) !important;
  right: calc(var(--va-safe-right, 0px) + var(--va-hud-charge-right)) !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 22;
}
body.va-mobile-hud-ready #chargeUi .charge-label {
  font-size: 9px !important;
}
/* Canonical bar on mobile (some older games use a 160px desktop bar). */
body.va-mobile-hud-ready:not(.va-portrait-mode) #chargeUi .charge-bar-container,
body.va-mobile-hud-ready:not(.va-portrait-mode) #chargeUi .charge-bar {
  height: 88px !important;
  width: 14px !important;
}
body.va-mobile-hud-ready #chargeCount {
  font-size: 16px;
  min-width: 56px;
}

/* Short landscape phones (≤ 430px tall): the bag row (66px) + card + two
   stacked 84px virtual buttons don't fit in one right-hand column, so the
   card goes compact — same shape, shorter bar. */
@media (max-height: 430px) {
  :root { --va-hud-charge-gap: 8px; }
  body.va-mobile-hud-ready:not(.va-portrait-mode) #chargeUi { padding: 8px 8px 9px !important; gap: 4px !important; }
  body.va-mobile-hud-ready:not(.va-portrait-mode) #chargeUi .charge-bar-container,
  body.va-mobile-hud-ready:not(.va-portrait-mode) #chargeUi .charge-bar { height: 40px !important; }
  body.va-mobile-hud-ready:not(.va-portrait-mode) #chargeCount { font-size: 14px !important; }
}

/* ─── Portrait variant ───────────────────────────────────────────────── */
/* Horizontal bar bottom-left of the visible canvas window. Bottom-left is the
   desktop tray's slot, but the tray is hidden on mobile. */
body.va-mobile-hud-ready.va-portrait-mode #chargeUi {
  position: fixed !important;
  top: auto !important;
  right: auto !important;
  left: calc(var(--va-safe-left, 0px) + var(--va-hud-margin)) !important;
  bottom: calc(var(--va-safe-bottom, 0px) + 22px) !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 14px !important;
  background: rgba(10, 18, 32, 0.62) !important;
  border: 1px solid rgba(125, 211, 252, 0.3) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(6px);
  z-index: 22;
}
body.va-mobile-hud-ready.va-portrait-mode #chargeUi .charge-label {
  font-size: clamp(11px, 2.6vw, 14px) !important;
  letter-spacing: 0.18em !important;
  order: 1;
}
body.va-mobile-hud-ready.va-portrait-mode #chargeUi .charge-bar-container {
  width: clamp(120px, 32vw, 180px) !important;
  height: 12px !important;
  border-radius: 999px !important;
  order: 2;
  position: relative;
  overflow: hidden;
}
body.va-mobile-hud-ready.va-portrait-mode #chargeUi .charge-bar-fill {
  width: 0 !important;
  height: 100% !important;
  transition: width 0.18s ease;
}
body.va-mobile-hud-ready.va-portrait-mode #chargeCount {
  font-size: clamp(14px, 3.4vw, 18px) !important;
  min-width: 50px !important;
  order: 3;
}
body.va-mobile-hud-ready.va-portrait-mode #ui {
  font-size: clamp(12px, 3vw, 16px) !important;
}
body.va-mobile-hud-ready.va-portrait-mode #ui #score {
  font-size: clamp(34px, 9vw, 48px) !important;
}
body.va-mobile-hud-ready.va-portrait-mode #ui #superChargeLabel {
  font-size: clamp(10px, 2.4vw, 13px) !important;
}
body.va-mobile-hud-ready.va-portrait-mode #ui #superChargeTimer {
  font-size: clamp(28px, 7vw, 38px) !important;
}

/* ─── Token UI + tray ────────────────────────────────────────────────── */
/* mobile-controls.js renders its own #va-mobile-token-chip and active-powerup
   rail at the top-right, so the desktop #tokenUi and #powerupTray are hidden
   on mobile — otherwise two token displays stack in the corner. */
body.va-mobile-hud-ready #gameContainer #tokenUi {
  display: none !important;
}
body.va-mobile-hud-ready #powerupTray,
body.va-mobile-hud-ready .powerup-tooltip {
  display: none !important;
}

/* ─── Screens ────────────────────────────────────────────────────────── */
/* Start / game-over screens sit above the in-game HUD; shared-start-screen.js
   toggles va-body-start / va-body-game-over on <body>. */
body.va-mobile-hud-ready #startScreen,
body.va-mobile-hud-ready #gameOverScreen {
  z-index: 40 !important;
}
body.va-mobile-hud-ready.va-body-start #ui,
body.va-mobile-hud-ready.va-body-game-over #ui {
  opacity: 0 !important;
  pointer-events: none;
}
/* The charge meter is gameplay-only on every viewport. */
body.va-body-start #chargeUi,
body.va-body-game-over #chargeUi {
  display: none !important;
}

/* Show the start-screen H1 on mobile. The base CSS keeps `.start-title` at
   opacity 0 so desktop can use the floating #inGameTitle behind the start
   screen's blur; on mobile #startScreen is above #inGameTitle, so the H1 is
   the title. shared-start-screen.css owns the typography. */
body.va-mobile-hud-ready .start-title,
body.va-mobile-hud-ready #startScreen h1 {
  opacity: 1 !important;
  pointer-events: auto;
}
body.va-mobile-hud-ready #inGameTitle {
  display: none !important;
}

/* ─── Back arrow ─────────────────────────────────────────────────────── */
body.va-mobile-hud-ready .back-link {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 4px 12px 8px !important;
  top: calc(var(--va-safe-top, 0px) + 14px);
  left: calc(var(--va-safe-left, 0px) + 14px);
}
body.va-mobile-hud-ready .back-arrow {
  line-height: 0.85 !important;
  display: inline-flex;
  align-items: center;
}

/* ─── In-game menus ───────────────────────────────────────────────────
   A game with its own menu screens (track select, hangar, level map) adds
   `va-game-menu` to <body> while a menu is up and removes it when play
   resumes. Everything that belongs to a RUN steps aside — the race HUD,
   charge card, tray, token chip, the bag and the virtual controls. Only the
   back link and pause stay reachable.

   The bag and token chip used to stay up in menus on the theory that they
   were always-available account UI. In practice they read as leftover race
   furniture sitting on top of a menu screen, so they are run-only now.

   Score milestone and combo popups go too: they outlive the run that earned
   them by a second or two, which is long enough to land on a results screen
   or a menu that opens the moment the run ends. The floating in-game title
   goes with them: a menu draws its own heading, and the ribbon landed on top
   of it. */
body.va-game-menu #inGameTitle,
body.va-game-menu .milestone-popup,
body.va-game-menu .combo-popup,
body.va-game-menu #ui,
body.va-game-menu #chargeUi,
body.va-game-menu #powerupTray,
body.va-game-menu #activePowerUps,
body.va-game-menu #va-mobile-active-powerups,
body.va-game-menu #va-pu-btn,
body.va-game-menu #va-pause-btn,
body.va-game-menu #va-mobile-token-chip,
body.va-game-menu #va-joystick-zone,
body.va-game-menu #va-joystick-base,
body.va-game-menu #va-tap-zone,
body.va-game-menu #va-shoot-zone,
body.va-game-menu .va-btn,
body.va-game-menu .va-axis {
  display: none !important;
}

/* Same reasoning on the start and game-over screens: neither is a run. */
body.va-body-start #va-pu-btn,
body.va-body-start #va-pause-btn,
body.va-body-start #va-mobile-token-chip,
body.va-body-game-over #va-pu-btn,
body.va-body-game-over #va-pause-btn,
body.va-body-game-over #va-mobile-token-chip {
  display: none !important;
}


/* ─── Mobile: no backdrop-filter over the canvas ──────────────────────────
   Every HUD element with `backdrop-filter: blur()` sits on top of a canvas
   that repaints at 60fps, so the compositor has to re-blur the region behind
   it on EVERY frame. On a phone GPU that alone drops a game to single-digit
   fps — the canvas draw was never the bottleneck. This held Ion Racers at
   3fps with the bag, both action buttons and the back link all blurring at
   once, and it is the reason draw-call optimisation did nothing.

   The chrome keeps its look via a slightly more opaque tint; the game itself
   loses nothing. Applies to every game that carries the shared mobile HUD. */
body.va-mobile-hud-ready .va-btn,
body.va-mobile-hud-ready #va-pu-btn,
body.va-mobile-hud-ready #va-pu-picker,
body.va-mobile-hud-ready #va-mobile-token-chip,
body.va-mobile-hud-ready #chargeUi,
body.va-mobile-hud-ready .back-link,
body.va-mobile-hud-ready #powerupTray,
body.va-mobile-hud-ready .how-to-play,
body.va-mobile-hud-ready #startScreen,
body.va-mobile-hud-ready #gameOverScreen {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* And a blanket rule, because the list above is only ever as complete as the
   last person who added a HUD element: the joystick base (#va-joystick-base,
   blur 4px, on screen the whole time you steer) was missing from it and held
   Ion Racers at single-digit fps on phones while every canvas optimisation
   changed nothing. On a phone, nothing in a game page blurs what is behind it. */
body.va-mobile-hud-ready *, body.va-mobile-hud-ready *::before, body.va-mobile-hud-ready *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.va-mobile-hud-ready #va-joystick-base { background: rgba(10, 14, 28, 0.55) !important; }
body.va-mobile-hud-ready .va-pu-card { background: rgba(10, 14, 28, 0.92) !important; }
body.va-mobile-hud-ready .va-btn      { background: rgba(10, 14, 28, 0.86) !important; }
body.va-mobile-hud-ready .va-axis     { background: rgba(10, 14, 28, 0.86) !important; }
body.va-mobile-hud-ready #va-pu-btn   { background: rgba(10, 14, 28, 0.90) !important; }
body.va-mobile-hud-ready .back-link   { background: rgba(10, 13, 18, 0.80) !important; }