/* FUSE HUD placeholder styles (S8, ADR-0012) — pending /ux-design.
   Hand-authored (NOT part of the Sass/Rake pipeline) so the placeholder
   can be replaced wholesale by the UX pass without touching main.scss.
   Only rules the HUDController contract requires live here: layout
   removal, tabular figures, the scaleX fill track, reduced motion. */

.hud-panel {
  margin: 10px 0;
  font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
  color: #776e65;
}

/* Layout REMOVAL, not visual hiding (hud.md Core Rule 4 / TR-hud-011). */
.hud-hidden { display: none; }

/* xM readout never jitters as digits change (TR-hud-012). */
.tabular-nums { font-variant-numeric: tabular-nums; font-weight: bold; }

/* Fill is transform: scaleX() on a fixed-width track — NEVER width/height
   (ADR-0012 promotion review 2026-07-14: hottest DOM write in the game;
   scaleX stays compositor-only per ADR-0003's Layer-1 rule). */
.multiplier-bar-track {
  width: 100%;
  height: 8px;
  margin-top: 4px;
  background: #bbada0;
  border-radius: 3px;
  overflow: hidden;
}
#multiplier-bar {
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.1s linear, background-color 0.12s linear;
  background: #eee4da;
}

/* Reduced motion: instant steps, no easing (TR-hud-014, ADR-0011 read). */
.hud-reduced-motion #multiplier-bar { transition: none; }

/* Tier colours T0-T4 — PROVISIONAL values pending the S8/S9 tier-boundary
   sign-off (ADR-0006 flags the tier config as provisional). */
#multiplier-bar.tier-0 { background: #eee4da; }
#multiplier-bar.tier-1 { background: #f2b179; }
#multiplier-bar.tier-2 { background: #f59563; }
#multiplier-bar.tier-3 { background: #f65e3b; }
#multiplier-bar.tier-4 { background: #edc22e; }

#heat-strip-container {
  margin-top: 6px;
  font-weight: bold;
  letter-spacing: 0.5px;
}
#heat-strip-name { margin-left: 8px; }

/* Mode toggle (story hud-006) — ≥44px touch targets
   (technical-preferences.md); placeholder visuals pending /ux-design. */
#mode-toggle { margin-bottom: 8px; }
.mode-toggle-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 10px 18px;
  border: 2px solid #bbada0;
  border-radius: 4px;
  background: #eee4da;
  color: #776e65;
  font-weight: bold;
  cursor: pointer;
}
.mode-toggle-btn + .mode-toggle-btn { margin-left: 6px; }
.mode-toggle-btn.mode-toggle-active {
  background: #8f7a66;
  border-color: #8f7a66;
  color: #f9f6f2;
}

/* Mid-run switch confirm modal (overlay-base instance) — layout-removed
   via .hud-hidden when closed, like every other HUD region. */
#mode-switch-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(238, 228, 218, 0.85);
  z-index: 100;
}
.mode-switch-dialog {
  max-width: 320px;
  margin: 30vh auto 0;
  padding: 20px;
  background: #faf8ef;
  border-radius: 6px;
  text-align: center;
  color: #776e65;
  font-weight: bold;
}
.mode-switch-dialog button {
  min-height: 44px;
  min-width: 44px;
  margin: 8px 4px 0;
  padding: 10px 16px;
  border: 0;
  border-radius: 3px;
  background: #8f7a66;
  color: #f9f6f2;
  font-weight: bold;
  cursor: pointer;
}