/* 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. The race HUD, charge card, tray, token chip and the virtual
   controls step aside; the back link, bag and pause stay reachable. */
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-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 {
  display: none !important;
}