/* ═══════════════════════════════════════════════════════════
   MOBILE.CSS — TAO3C V50-Mob — App-Native Design
   Portrait-first, tactile, immersive
   Loaded LAST — overrides all desktop CSS
   ═══════════════════════════════════════════════════════════ */

/* ── Z-INDEX MAP ──
   0       : #board3d, #canvas
   500     : #hands (card tray)
   600     : #status (thin bottom bar)
   650     : #autoControls3H (compact bottom-right)
   700     : #cardDesc (floating tooltip — hidden by default)
   800     : #cardActions (play/cancel)
   900     : #turnInfo, #comboInfo, #modeIndicator, #zombieContagionHUD
   1000    : #v35ProHUD (top bar — hidden on mobile)
   1100    : #fxTopMenu (compact top-right)
   1500    : #v35TowerMiniUI
   2000    : #checkInfo, #bigCardFX
   5000    : #startMenu
   6000    : #pauseMenu
   40000   : #towerBar (tower bottom bar)
   50000   : #drasahUI, #subterfugeChoiceUI (modals)
   60000   : #mobPauseBtn, #fullscreenBtn, #mobOverviewBtn (always accessible)
── */

/* ═══ RESET & BASE ═══ */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: #050510;
  color: #e8e4f0;
}

/* ═══ CANVAS / BOARD — full bleed ═══ */
#board3d {
  position: fixed !important;
  top: 0 !important; left: 0 !important;
  width: 100vw !important; height: 100vh !important;
  z-index: 0 !important;
  inset: auto !important;
}
#canvas {
  width: 100% !important; height: 100% !important;
  display: block !important;
  touch-action: none !important;
  z-index: 0 !important;
}

/* ═══ SAFE AREA (notch / Dynamic Island) ═══ */
@supports (padding-top: env(safe-area-inset-top)) {
  #mobPauseBtn, #fullscreenBtn { top: calc(6px + env(safe-area-inset-top)) !important; }
  #fxTopMenu { top: calc(4px + env(safe-area-inset-top)) !important; }
  #status { padding-bottom: calc(4px + env(safe-area-inset-bottom)) !important; }
}

/* ═══════════════════════════════════════════════════════
   TOP BAR — Compact glass pill buttons
   ═══════════════════════════════════════════════════════ */

/* Hide the full desktop HUD bar */
#v35ProHUD {
  display: none !important;
}

/* Hide camera status on mobile — info not needed, z-index conflict */
#cameraStatus {
  display: none !important;
}

/* Hide debug overlay on mobile */
#debugOverlay {
  display: none !important;
}

/* Compact top-right controls */
#fxTopMenu {
  position: fixed !important;
  top: 4px !important; right: 6px !important;
  left: auto !important; bottom: auto !important;
  z-index: 1100 !important;
  padding: 3px 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: rgba(8,4,20,0.65) !important;
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  transform: none !important;
  width: auto !important;
  max-width: 200px !important;
}
#fxTopMenu label { display: none !important; }
#fxTopMenu select {
  font-size: 11px !important;
  padding: 4px 6px !important;
  max-width: 70px !important;
  min-height: 28px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.06) !important;
  color: #ccc !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}
#musicPlayer {
  display: flex !important;
  gap: 2px !important;
}
#musicPlayer button {
  padding: 4px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.06) !important;
  border: none !important;
  color: #ddd !important;
}
#musicPlayer button:active {
  background: rgba(100,68,204,0.4) !important;
}

/* ═══ MOBILE CONTROL BUTTONS (top-left glass pills) ═══ */
#mobPauseBtn {
  position: fixed !important;
  top: 6px !important; left: 6px !important;
  z-index: 60000 !important;
  width: 36px !important; height: 36px !important;
  min-width: 36px !important; min-height: 36px !important;
  border-radius: 12px !important;
  font-size: 18px !important;
  display: flex !important;
  align-items: center !important; justify-content: center !important;
  padding: 0 !important;
  background: rgba(8,4,20,0.65) !important;
  backdrop-filter: blur(12px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.4) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #e0e0e0 !important;
}
#mobPauseBtn:active { background: rgba(100,68,204,0.5) !important; transform: scale(0.9); }

#fullscreenBtn {
  position: fixed !important;
  top: 6px !important; left: 46px !important;
  z-index: 60000 !important;
  width: 36px !important; height: 36px !important;
  min-width: 36px; min-height: 36px;
  border-radius: 12px !important;
  font-size: 16px !important;
  display: flex !important;
  align-items: center; justify-content: center;
  padding: 0 !important;
  background: rgba(8,4,20,0.65) !important;
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #e0e0e0 !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#fullscreenBtn:active { background: rgba(100,68,204,0.5) !important; transform: scale(0.9); }

/* ═══ TURN / MODE INFO — floating pills ═══ */
#turnInfo {
  position: fixed !important;
  top: 6px !important; left: 50% !important;
  right: auto !important; bottom: auto !important;
  transform: translateX(-50%) !important;
  font-size: 11px !important;
  padding: 4px 12px !important;
  z-index: 900 !important;
  background: rgba(8,4,20,0.6) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  color: #d0ccdd !important;
  white-space: nowrap !important;
}
#comboInfo {
  position: fixed !important;
  top: 38px !important; left: 50% !important;
  right: auto !important; bottom: auto !important;
  transform: translateX(-50%) !important;
  font-size: 11px !important;
  z-index: 900 !important;
}
#modeIndicator {
  position: fixed !important;
  top: 38px !important; left: 50% !important;
  right: auto !important; bottom: auto !important;
  transform: translateX(-50%) !important;
  font-size: 11px !important;
  z-index: 900 !important;
  background: rgba(8,4,20,0.6) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 8px !important;
  padding: 3px 10px !important;
}

/* ═══════════════════════════════════════════════════════
   BOTTOM — Card Tray (the core mobile UX)
   ═══════════════════════════════════════════════════════ */

/* Status bar — thin, elegant */
#status {
  position: fixed !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  top: auto !important;
  width: 100% !important; max-width: 100% !important;
  padding: 5px 12px !important;
  font-size: 11px !important;
  text-align: center !important;
  z-index: 600 !important;
  background: linear-gradient(180deg, rgba(5,3,15,0.0), rgba(5,3,15,0.92) 30%) !important;
  min-height: 28px !important;
  display: flex !important;
  align-items: center !important; justify-content: center !important;
  transform: none !important;
  border-radius: 0 !important;
  border: none !important;
  color: rgba(220,215,235,0.7) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
  letter-spacing: 0.02em !important;
}

/* Card hand tray — flush bottom-left with slim gutter */
#hands {
  position: fixed !important;
  bottom: 4px !important;
  left: 4px !important;
  right: auto !important;
  top: auto !important;
  width: auto !important;
  max-width: 68vw !important;
  height: auto !important;
  max-height: 96px !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: flex-end !important;
  gap: 0 !important;
  padding: 0 !important;
  z-index: 500 !important;
  pointer-events: none !important;
  border: none !important;
  border-left: none !important;
  border-bottom: none !important;
  background: none !important;
  transform: none !important;
  overflow: visible !important;
}

/* Hide opponent hand panel on mobile */
#hands .handPanel:nth-child(2) {
  display: none !important;
}

/* Player hand panel — fully transparent so the 3D scene shows through.
   Cards themselves keep their own borders/shadows so they remain readable. */
#hands .handPanel {
  position: relative !important;
  top: auto !important; right: auto !important;
  bottom: auto !important; left: auto !important;
  width: auto !important;
  max-width: 68vw !important;
  pointer-events: auto !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  padding: 2px 4px 2px 2px !important;
  border: none !important;
  box-shadow: none !important;
}

/* Hand title — subtle label */
#hands .handTitle {
  font-size: 8px !important;
  margin-bottom: 4px !important;
  opacity: 0.5;
  text-align: left !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: rgba(200,190,220,0.6) !important;
}

/* Card grid — horizontal scroll */
#hands .handGrid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 2px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 65vw !important;
  justify-content: flex-start !important;
  padding: 0 !important;
}
#hands .handGrid::-webkit-scrollbar { display: none; }

/* ═══ CARDS — Rich, tappable, with glow ═══ */
/* Use #hands .cardItem to match ui_fixes.css specificity */
#hands .cardItem,
.cardItem, [class*="cardItem"] {
  min-width: 46px !important;
  max-width: 54px !important;
  width: 50px !important;
  height: 68px !important;
  padding: 2px !important;
  font-size: 9px !important;
  border-radius: 10px !important;
  cursor: pointer;
  flex-shrink: 0 !important;
  touch-action: manipulation !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  overflow: hidden !important;
}
#hands .cardItem img,
.cardItem img, [class*="cardItem"] img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}
/* No hover effect on mobile */
#hands .cardItem:hover,
.cardItem:hover, [class*="cardItem"]:hover {
  transform: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}
/* Tap feedback */
#hands .cardItem:active,
.cardItem:active, [class*="cardItem"]:active {
  transform: translateY(-6px) scale(1.08) !important;
  box-shadow: 0 8px 24px rgba(100,68,204,0.5), 0 0 12px rgba(100,68,204,0.3) !important;
  transition: transform 0.08s ease !important;
  z-index: 10 !important;
}

/* ═══ CARD DESCRIPTION — compact floating tooltip ═══ */
/* Double selector for max specificity over ui_fixes.css */
body #cardDesc,
#cardDesc {
  position: fixed !important;
  bottom: 134px !important;
  right: 6px !important;
  left: auto !important; top: auto !important;
  transform: none !important;
  width: 58vw !important;
  max-width: 230px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 78px !important;
  overflow-y: auto !important;
  z-index: 700 !important;
  padding: 5px 10px 6px 12px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-left: 2px solid var(--stage-border, rgba(255,255,255,0.18)) !important;
  box-shadow: none !important;
  color: rgba(235,230,255,0.72) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85) !important;
  opacity: 0.82 !important;
}
/* Hidden by default — only visible when a card is selected */
body #cardDesc:not(.v56-active),
#cardDesc:not(.v56-active) {
  display: none !important;
}
body #cardDesc .descTitle, #cardDesc .descTitle {
  color: var(--stage-fg, #e8e2ff) !important;
  font-family: 'Orbitron','Rajdhani','Impact',sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-bottom: 3px !important;
  opacity: 0.85 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9) !important;
}
body #cardDesc .descBody, #cardDesc .descBody {
  color: rgba(230,225,245,0.78) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85) !important;
}

/* ═══ CARD ACTIONS — floating buttons (only visible when .active) ═══ */
#cardActions:not(.active) {
  display: none !important;
}
#cardActions.active {
  position: fixed !important;
  bottom: 30px !important;
  right: 4px !important;
  left: auto !important; top: auto !important;
  transform: none !important;
  display: flex !important;
  gap: 4px !important;
  z-index: 800 !important;
  width: auto !important; height: auto !important;
  flex-direction: row !important;
  align-items: center !important; justify-content: center !important;
}
#cardActions .btn, #cardPlayBtn, #cardCancelBtn {
  padding: 5px 14px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  border-radius: 14px !important;
  min-height: 30px !important;
  min-width: 70px !important;
  touch-action: manipulation !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18) !important;
  cursor: pointer !important;
}
#cardPlayBtn {
  background: rgba(60,40,140,0.6) !important;
  color: rgba(200,215,255,0.9) !important;
}
#cardCancelBtn {
  background: rgba(8,4,20,0.5) !important;
  color: rgba(200,190,220,0.6) !important;
}

/* ═══════════════════════════════════════════════════════
   START MENU — Full-screen app launcher
   ═══════════════════════════════════════════════════════ */
#startMenu {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important; max-width: 100% !important;
  height: 100% !important; max-height: 100% !important;
  display: none !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 24px 20px !important;
  background: linear-gradient(170deg, rgba(8,4,20,0.98) 0%, rgba(15,8,35,0.98) 50%, rgba(8,4,20,0.98) 100%) !important;
  z-index: 5000 !important;
  overflow-y: auto !important;
  border-radius: 0 !important; border: none !important;
  transform: none !important; left: 0 !important; top: 0 !important;
}
#startMenu.visible { display: flex !important; }

#startMenu h2 {
  font-size: 22px !important;
  margin-bottom: 4px !important;
  color: #d4c8f0 !important;
  font-weight: 300 !important;
  letter-spacing: 0.08em !important;
}

#startMenu select {
  width: 100% !important;
  max-width: 300px !important;
  padding: 12px 14px !important;
  font-size: 15px !important;
  border-radius: 14px !important;
  min-height: 48px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #d0ccdd !important;
  backdrop-filter: blur(8px) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

#startMenu button#newBtn {
  width: 100% !important;
  max-width: 300px !important;
  background: linear-gradient(135deg, #6644cc, #4422aa) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 17px !important;
  padding: 15px !important;
  margin-top: 10px !important;
  border: none !important;
  border-radius: 16px !important;
  min-height: 52px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  box-shadow: 0 6px 24px rgba(100,68,204,0.35) !important;
}
#startMenu button#newBtn:active {
  transform: scale(0.97) !important;
  box-shadow: 0 2px 12px rgba(100,68,204,0.4) !important;
}

#startMenu button#reportBtn { display: none !important; }
#reportOverlay { display: none !important; }

/* ═══ PAUSE MENU — full overlay ═══ */
#pauseMenu, [id*="pauseMenu"] {
  position: fixed !important;
  inset: 0 !important;
  z-index: 6000 !important;
  width: 100% !important; height: 100% !important;
}
#pauseMenu button, [id*="pauseMenu"] button {
  padding: 12px 18px !important;
  font-size: 14px !important;
  min-height: 44px !important;
  min-width: 180px !important;
  touch-action: manipulation !important;
  border-radius: 12px !important;
}
#pauseMenuPanel {
  max-height: 100vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 20px !important;
}

/* ═══ CHECK / ECHEC — top center alert ═══ */
#checkInfo {
  position: fixed !important;
  top: 6% !important; left: 50% !important;
  right: auto !important; bottom: auto !important;
  transform: translate(-50%, 0) !important;
  font-size: 20px !important;
  padding: 14px 24px !important;
  z-index: 2000 !important;
  border-radius: 16px !important;
  background: rgba(200,40,40,0.85) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 0 40px rgba(200,40,40,0.3) !important;
  font-weight: 700 !important;
}

/* ═══ BIG CARD FX ═══ */
#bigCardFX {
  position: fixed !important;
  top: 28% !important; left: 22% !important;
  right: auto !important; bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2000 !important;
  width: 38vw !important;
  height: 26vh !important;
  max-width: 170px !important;
  max-height: 230px !important;
}

/* ═══ AUTO-SELECT BAR ═══ */
#autoSelectBar, [id*="autoSelect"] {
  position: fixed !important;
  bottom: 28px !important;
  left: 50% !important;
  right: auto !important; top: auto !important;
  transform: translateX(-50%) !important;
  z-index: 100 !important;
  font-size: 10px !important;
}
#autoSelectBar button {
  padding: 6px 10px !important;
  min-height: 32px !important; min-width: 40px !important;
  font-size: 11px !important;
  touch-action: manipulation !important;
  border-radius: 10px !important;
}

/* ═══ AUTO CONTROLS (Capture/Carte/Smart) — compact bottom-right ═══ */
#autoControls3H {
  position: fixed !important;
  bottom: 2px !important;
  right: 4px !important;
  left: auto !important; top: auto !important;
  z-index: 650 !important;
  gap: 3px !important;
  transform: none !important;
  opacity: 0.6 !important;
}
#autoControls3H:active { opacity: 1 !important; }
#autoControls3H button {
  padding: 3px 8px !important;
  font-size: 9px !important;
  min-height: 24px !important;
  border-radius: 12px !important;
  background: rgba(8,4,20,0.5) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  color: rgba(200,190,220,0.6) !important;
  backdrop-filter: blur(6px) !important;
}
#autoStatus3H { font-size: 8px !important; display: none !important; }

/* ═══ TOGGLE CARDS BUTTON ═══ */
#toggleCardsBtn {
  position: fixed !important;
  bottom: 6px !important;
  left: 6px !important;
  z-index: 800 !important;
  width: 40px !important; height: 40px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(168,85,247,0.4) !important;
  background: rgba(10,6,25,0.85) !important;
  color: #fff !important;
  font-size: 18px !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4) !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s !important;
  -webkit-tap-highlight-color: transparent;
}
#toggleCardsBtn:active { transform: scale(0.9); }

#hands.collapsed,
#cardDesc.collapsed {
  display: none !important;
}

/* ═══ CAMERA/PLAY MODE TOGGLE — bottom-right, just left of smart buttons ═══
   #autoControls3H lives at bottom:2px right:4px and is ~165px wide. The
   camera button is anchored to its left edge with right:175px so the user
   can reach mode toggle + zoom in/out without moving their thumb far. */
#camToggleBtn {
  position: fixed !important;
  bottom: 4px !important;
  right: 235px !important;
  left: auto !important; top: auto !important;
  z-index: 800 !important;
  width: 34px !important; height: 34px !important;
  border-radius: 10px !important;
  border: 1.5px solid rgba(168,85,247,0.45) !important;
  background: rgba(10,6,25,0.85) !important;
  color: #fff !important;
  font-size: 17px !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4), 0 0 0 1px rgba(168,85,247,0.15) inset !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s !important;
  -webkit-tap-highlight-color: transparent;
}
#camToggleBtn:active { transform: scale(0.9); }
#camToggleBtn.playMode {
  border-color: rgba(102,255,170,0.55) !important;
  box-shadow: 0 2px 14px rgba(102,255,170,0.35), 0 0 0 1px rgba(102,255,170,0.25) inset !important;
  background: rgba(8,22,18,0.88) !important;
}
#camToggleBtn.freeMode {
  border-color: rgba(255,210,80,0.6) !important;
  box-shadow: 0 2px 14px rgba(255,200,80,0.35), 0 0 0 1px rgba(255,210,80,0.25) inset !important;
  background: rgba(28,20,4,0.88) !important;
}

/* ═══ ZOOM IN/OUT BUTTONS — inline next to the camera toggle ═══ */
#camZoomInBtn,
#camZoomOutBtn {
  position: fixed !important;
  bottom: 4px !important;
  left: auto !important; top: auto !important;
  z-index: 800 !important;
  width: 34px !important; height: 34px !important;
  border-radius: 10px !important;
  border: 1.5px solid rgba(120,180,255,0.45) !important;
  background: rgba(6,12,25,0.85) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4), 0 0 0 1px rgba(120,180,255,0.15) inset !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.12s ease, box-shadow 0.2s !important;
  -webkit-tap-highlight-color: transparent;
  line-height: 1 !important;
}
#camZoomInBtn,
#camZoomOutBtn { display: none !important; }
#camZoomInBtn:active,
#camZoomOutBtn:active { transform: scale(0.88); }

body.freeCamMode #camZoomInBtn,
body.freeCamMode #camZoomOutBtn {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ═══ PORTRAIT PHONE — lift hand tray above status bar ═══
   Status bar sits flush bottom (bottom:0, ~28px). Cards at bottom:4 were
   getting their lower edge masked. Push hands up to 36px so the cards
   clear the status gradient cleanly. */
@media (max-width: 480px) and (orientation: portrait) {
  #hands {
    bottom: 36px !important;
  }

  /* Piece Picker competes with cards horizontally in portrait (both would
     need >450px combined). Hide it — cards are primary, picker is aux.
     Users can still tap pieces directly on the 3D board. */
  #piecePicker {
    display: none !important;
  }

  /* Auto controls sit inside status bar — pull them slightly right so
     they don't sit on top of any trailing status text */
  #autoControls3H {
    right: 4px !important;
  }

  /* fxTopMenu was at right:6 and overlapped #recBtn (at right:10, 44x44).
     Push it left of #recBtn with extra gap. */
  #fxTopMenu {
    right: 62px !important;
  }
}

/* ═══ FREE CAMERA MODE — HUD cards / mini pieces transparent ═══ */
body.freeCamMode #hands,
body.freeCamMode #cardDesc,
body.freeCamMode #cardActions,
body.freeCamMode #piecePicker,
body.freeCamMode #radialMenu,
body.freeCamMode #radialConfirmBar,
body.freeCamMode #autoControls3H,
body.freeCamMode #status {
  opacity: 0.18 !important;
  pointer-events: none !important;
  transition: opacity 250ms ease !important;
}
body.freeCamMode #camToggleBtn,
body.freeCamMode #toggleCardsBtn,
body.freeCamMode #mobPauseBtn,
body.freeCamMode #fullscreenBtn,
body.freeCamMode #fxTopMenu {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ═══ CAMERA OVERVIEW BUTTON — top-right pill ═══ */
#mobOverviewBtn {
  position: fixed !important;
  top: 6px !important;
  right: 48px !important;
  z-index: 60000 !important;
  width: 36px !important; height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(8,4,20,0.5) !important;
  color: rgba(200,190,220,0.8) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#mobOverviewBtn.active {
  background: rgba(60,40,140,0.6) !important;
  border-color: rgba(120,100,200,0.3) !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════
   UNIFIED MODE HUD ANCHOR
   Every mode-specific HUD (bomb thermo, zombie contagion, auragon
   energy, tower radio, chat attack, manoir, totem, donjon, magnet,
   castle, domination, commander, queen HP, etc.) is pinned to the
   SAME spot so the layout doesn't jump between modes. Top-left,
   just under the top status row, fits cleanly above #toggleCardsBtn
   (bottom-left) and never collides with the smart buttons.
   The JS sets inline `top/right/left/transform` per HUD; the
   `!important` rule below wins because inline styles without
   !important lose to !important CSS.
   ═══════════════════════════════════════════════════════════════════ */
#bombThermoHUD,
#zombieContagionHUD,
#auragonEnergyHUD,
#towerRadioHUD,
#chatAttackHUD,
#manoirInventoryHUD,
#totemHUD,
#donjonHUD,
#magnetHUD,
#castleHUD,
#dominationHUD,
#commanderHUD,
#queenHPHUD,
#hurricaneCompass,
#totemScoreSplash {
  position: fixed !important;
  top: 46px !important;
  right: 6px !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 900 !important;
  max-width: 60vw !important;
  font-size: 11px !important;
  padding: 5px 10px !important;
  background: rgba(8,4,20,0.65) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(225,220,240,0.92) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.35) !important;
  pointer-events: auto !important;
  text-align: right !important;
}

/* ═══ TOWER MINI UI ═══ */
#v35TowerMiniUI {
  position: fixed !important;
  bottom: 150px !important; right: 6px !important;
  left: auto !important; top: auto !important;
  font-size: 10px !important;
  z-index: 1500 !important;
  max-width: 140px !important;
  width: auto !important;
  background: rgba(8,4,20,0.6) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}

/* ═══ POPUP OVERLAYS (Drasah, Subterfuge, etc.) ═══ */
#drasahUI, #subterfugeChoiceUI, [id*="drasah"], [id*="subterfuge"] {
  position: fixed !important;
  inset: 0 !important;
  z-index: 50000 !important;
  padding: 20px !important;
  width: 100% !important; height: 100% !important;
}

/* ═══════════════════════════════════════════════════════
   LANDSCAPE MODE
   ═══════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 500px) {
  #hands {
    bottom: 4px !important;
    left: 4px !important;
    max-height: 75px !important;
    padding: 0 !important;
  }
  #hands .cardItem,
  .cardItem, [class*="cardItem"] {
    min-width: 36px !important;
    width: 40px !important;
    height: 52px !important;
  }
  #status {
    padding: 3px 8px !important;
    font-size: 10px !important;
    min-height: 22px !important;
  }
  #turnInfo { top: 2px !important; font-size: 10px !important; padding: 2px 8px !important; }
  #fxTopMenu { top: 2px !important; padding: 2px 4px !important; }
  #cardDesc { bottom: 100px !important; max-height: 70px !important; }
  #cardActions { bottom: 78px !important; }
  #mobPauseBtn, #fullscreenBtn { width: 30px !important; height: 30px !important; font-size: 14px !important; }
  #autoControls3H { bottom: 0px !important; }
}

/* Wider landscape */
@media (orientation: landscape) and (min-height: 500px) and (max-height: 700px) {
  #hands { bottom: 4px !important; max-height: 90px !important; }
  .cardItem, [class*="cardItem"] { height: 58px !important; }
}

/* ═══ VERY SMALL SCREENS (iPhone SE, 320-360px) ═══ */
@media (max-width: 360px) {
  #startMenu select, #startMenu button#newBtn {
    font-size: 14px !important;
    padding: 11px !important;
    max-width: 260px !important;
  }
  #hands .cardItem,
  .cardItem, [class*="cardItem"] {
    min-width: 38px !important;
    width: 42px !important;
    height: 56px !important;
  }
  #hands .handGrid { max-width: 40vw !important; }
  #cardDesc { width: 92vw !important; max-width: 280px !important; }
  #v35TowerMiniUI { max-width: 120px !important; }
  #fxTopMenu { max-width: 160px !important; }
  #fxTopMenu select { max-width: 60px !important; font-size: 10px !important; }
}

/* ═══ TABLET (768px+) ═══ */
@media (min-width: 768px) {
  #startMenu { padding: 40px !important; }
  #startMenu select, #startMenu button#newBtn { max-width: 380px !important; }
  #hands { max-height: 140px !important; bottom: 6px !important; left: 6px !important; }
  #hands .handGrid { max-width: 32vw !important; }
  #hands .cardItem,
  .cardItem, [class*="cardItem"] {
    min-width: 56px !important;
    width: 60px !important;
    height: 80px !important;
    border-radius: 12px !important;
  }
  #fxTopMenu { padding: 4px 10px !important; gap: 6px !important; }
  #fxTopMenu select { max-width: 90px !important; font-size: 12px !important; }
  #cardDesc { max-width: 380px !important; max-height: 120px !important; }
  #v35TowerMiniUI { max-width: 180px !important; }
  #cardActions .btn, #cardPlayBtn, #cardCancelBtn {
    padding: 12px 32px !important;
    font-size: 15px !important;
    min-width: 110px !important;
  }
  #autoControls3H { opacity: 0.8 !important; }
  #autoControls3H button { padding: 4px 12px !important; font-size: 10px !important; }
}

/* ═══ ANIMATIONS ═══ */
@keyframes mobPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}
.mob-pulse { animation: mobPulse 1.5s infinite; }

/* ═══════════════════════════════════════════════════════════════════
   LOW-TIER PERFORMANCE MODE — body.lowFx
   Set automatically by three_setup.js when gpuTier === 'low' OR when
   the runtime FPS monitor downgrades the device. Strips every effect
   that costs the mobile compositor measurable time per frame:
   • backdrop-filter (the single biggest GPU sink on Mali-G5x / Adreno 6xx)
   • box-shadows with large blur radii
   • transitions on HUD elements
   • will-change hints that pin layers nobody scrolls
   ═══════════════════════════════════════════════════════════════════ */
body.lowFx #fxTopMenu,
body.lowFx #mobPauseBtn,
body.lowFx #fullscreenBtn,
body.lowFx #status,
body.lowFx #turnInfo,
body.lowFx #modeIndicator,
body.lowFx #cardDesc,
body.lowFx #cardActions,
body.lowFx #hands,
body.lowFx .handPanel,
body.lowFx #toggleCardsBtn,
body.lowFx #camToggleBtn,
body.lowFx #autoControls3H,
body.lowFx #autoControls3H button,
body.lowFx #bombThermoHUD,
body.lowFx #zombieContagionHUD,
body.lowFx #auragonEnergyHUD,
body.lowFx #towerRadioHUD,
body.lowFx #chatAttackHUD,
body.lowFx #manoirInventoryHUD,
body.lowFx #totemHUD,
body.lowFx #donjonHUD,
body.lowFx #magnetHUD,
body.lowFx #castleHUD,
body.lowFx #dominationHUD,
body.lowFx #commanderHUD,
body.lowFx #queenHPHUD,
body.lowFx #v35TowerMiniUI {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  transition: none !important;
  will-change: auto !important;
}
/* Compensate the loss of the blurred glass with slightly more opaque
   backgrounds so the panels stay readable on busy boards. */
body.lowFx #fxTopMenu,
body.lowFx #mobPauseBtn,
body.lowFx #fullscreenBtn,
body.lowFx #cardDesc,
body.lowFx #turnInfo,
body.lowFx #bombThermoHUD,
body.lowFx #zombieContagionHUD,
body.lowFx #auragonEnergyHUD,
body.lowFx #towerRadioHUD,
body.lowFx #chatAttackHUD,
body.lowFx #manoirInventoryHUD,
body.lowFx #totemHUD,
body.lowFx #donjonHUD,
body.lowFx #magnetHUD,
body.lowFx #castleHUD,
body.lowFx #dominationHUD,
body.lowFx #commanderHUD,
body.lowFx #queenHPHUD {
  background: rgba(8,4,20,0.86) !important;
}
/* Disable cosmetic CSS keyframe animations that don't carry game state */
body.lowFx .mob-pulse,
body.lowFx [class*="pulse"],
body.lowFx [class*="glow"] {
  animation: none !important;
}

@keyframes mobSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.mob-slide-up { animation: mobSlideUp 0.3s ease-out; }