/* Deck runtime — stage, scaling, letterbox, HUD.
   Slides themselves are styled inline with the BM design tokens (tokens.css). */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #0b0b0d;           /* letterbox rails */
  overflow: hidden;
}

/* The stage fills the viewport and centers the fixed-size deck. */
#stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The deck is authored at a fixed 1920×1080 and scaled to fit via JS. */
#deck {
  position: relative;
  width: 1920px;
  height: 1080px;
  transform-origin: center center;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
}

/* Each slide is a full 1920×1080 surface. Only the active one is shown.
   `position` and box metrics use !important because several slides set their
   own `position:relative` inline (to anchor absolutely-positioned children);
   without !important those slides fall into normal flow and render off-screen.
   `position:absolute` still establishes a containing block for those children. */
#deck > section {
  position: absolute !important;
  inset: 0 !important;
  width: 1920px !important;
  height: 1080px !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#deck > section.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Heads-up display: slide counter + hint, bottom-right. Hidden in fullscreen-clean. */
#hud {
  position: fixed;
  right: 22px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: "Onest", system-ui, sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 8px 16px;
  backdrop-filter: blur(6px);
  user-select: none;
  transition: opacity 0.4s ease;
  z-index: 50;
}

#hud .counter { color: rgba(255, 255, 255, 0.85); font-variant-numeric: tabular-nums; }
#hud .label { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hud kbd {
  font-family: inherit;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  padding: 2px 7px;
}

body.idle #hud { opacity: 0; }

/* Progress bar across the very top. */
#progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: #EA580C;
  width: 0;
  transition: width 0.3s ease;
  z-index: 50;
}