/* ======================
   Base / Reset
====================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: #000;
  color: #fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden; /* presentation is full-screen */
}

/* ======================
   Theme Tokens
====================== */
:root {
  --ctrl-bg: rgba(255,255,255,0.12);
  --ctrl-br: rgba(255,255,255,0.25);
  --ctrl-fg: #ffffff;
  --timer-track: rgba(255,255,255,0.25);
  --timer-fill: #ffffff;
}

/* Dark-UI (for bright slides) = darker controls for contrast */
.ui-dark {
  --ctrl-bg: rgba(0,0,0,0.55);
  --ctrl-br: rgba(0,0,0,0.7);
  --ctrl-fg: #ffffff;
  --timer-track: rgba(0,0,0,0.45);
  --timer-fill: #ffffff;
}

/* Light-UI (for dark slides) = lighter controls */
.ui-light {
  --ctrl-bg: rgba(255,255,255,0.12);
  --ctrl-br: rgba(255,255,255,0.25);
  --ctrl-fg: #ffffff;
  --timer-track: rgba(255,255,255,0.25);
  --timer-fill: #ffffff;
}

/* ======================
   Screens / Visibility
====================== */
.screen { position: fixed; inset: 0; display: flex; }
.screen-center { align-items: center; justify-content: center; }
.hidden { display: none !important; }

/* Position helpers you’re using in JSON */
.top-center    { top: 60px; left: 50%; transform: translateX(-50%); text-align: center; }
.bottom-center { bottom: 16px; left: 50%; transform: translateX(-50%); text-align: center; }

/* ======================
   Gate / Start Card
====================== */
.gate-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  width: min(92vw, 420px);
  padding: 24px;
  border-radius: 16px;
  text-align: center;
}
.gate-card h1 { font-size: clamp(22px, 4vw, 28px); margin-bottom: 8px; }
.gate-card p { opacity: 0.85; margin: 8px 0; }
.gate-card input,
.gate-card button {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 16px;
}
.gate-card input {
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: #fff;
  outline: none;
}
.gate-card button {
  border: none;
  background: #fff;
  color: #000;
  font-weight: 700;
  cursor: pointer;
}
.hint, .subhint { font-size: 12px; opacity: 0.7; margin-top: 10px; }

/* ======================
   Player / Stage
====================== */
#player { position: fixed; inset: 0; }
#stage  {
  position: absolute; inset: 0;
  background: #000;
  /* Ensures GPU compositing for smoother transitions */
  will-change: transform, opacity;
}

/* ======================
   Slides & Media Fit
====================== */
/* A slide is a full-canvas layer */
.slide {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: #000;
}

/* MEDIA FIT RULES:
   - Default to "contain" to avoid oversized images/videos.
   - Letterboxes/pillarboxes as needed, no cropping.
   - If you want edge-to-edge crops for a particular slide,
     add class ".cover" on that slide OR on its media. */
.media,
.slide > img,
.slide > video {
  position: absolute; inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;     /* <— fix: fit instead of huge */
  object-position: center;
  max-width: 100vw;
  max-height: 100vh;
  image-rendering: auto;
}

/* Opt-in: make a specific slide/media fill & crop like Instagram Reels */
.slide.cover .media,
.slide .media.cover,
.slide.cover > img,
.slide.cover > video {
  object-fit: cover;
}

/* In case images are inserted without .media class elsewhere */
img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ======================
   Overlays (Text on Slide)
====================== */
.overlay {
  position: absolute;
  max-width: min(92vw, 900px);
  padding: clamp(10px, 2.2vw, 22px);
  border-radius: 16px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.2));
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.overlay h2 { font-size: clamp(22px, 4.2vw, 44px); margin-bottom: 8px; }
.overlay p  { font-size: clamp(14px, 2.4vw, 20px); opacity: 0.92; }
.bottom-left  { left: 16px; bottom: 16px; }
.bottom-right { right: 16px; bottom: 16px; }
.top-left     { left: 16px; top: 60px; }
.top-right    { right: 16px; top: 60px; }
.center       { left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }

/* ======================
   Progress Segments
====================== */
#progress {
  position: absolute;
  top: env(safe-area-inset-top);
  left: 0; right: 0;
  display: flex; gap: 4px;
  padding: 10px;
  z-index: 20;
}
.progress-seg {
  flex: 1; height: 3px;
  background: var(--timer-track);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%; width: 0%;
  background: var(--timer-fill);
  transition: width linear;
}

/* ======================
   Reels-style Timer
====================== */
.timer {
  position: absolute; left: 0; right: 0;
  z-index: 25;
  padding: 10px 10px 0 10px;
}
.timer.bottom { bottom: calc(10px + env(safe-area-inset-bottom)); padding: 0 10px 10px 10px; }
.timer.top    { top: calc(8px + env(safe-area-inset-top)); }
.timer-track {
  width: 100%; height: 3px;
  background: var(--timer-track);
  border-radius: 999px;
  overflow: hidden;
}
.timer-fill {
  width: 0%; height: 100%;
  background: var(--timer-fill);
  transition: width linear;
}

/* ======================
   Tap Zones
====================== */
.nav-zone { position: absolute; top: 0; bottom: 0; z-index: 30; }
.nav-zone.left   { left: 0;        width: 33.334%; }
.nav-zone.center { left: 33.334%;  width: 33.334%; } /* pause-only zone */
.nav-zone.right  { right: 0;       width: 33.334%; }

/* ======================
   Controls (Top Center)
====================== */
.controls {
  position: absolute;
  top: calc(42px + env(safe-area-inset-top)); /* below timer */
  left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 8px;
  z-index: 40;
}
.controls.top-center { /* semantic hook */ }
.controls button {
  background: var(--ctrl-bg);
  color: var(--ctrl-fg);
  border: 1px solid var(--ctrl-br);
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.35);
  transition: transform 120ms ease, background-color 120ms ease;
}
.controls button:active { transform: translateY(1px) scale(0.98); }

/* ======================
   Accessibility Tweaks
====================== */
@media (prefers-reduced-motion: reduce) {
  .progress-fill, .timer-fill,
  .controls button { transition: none !important; }
}

/* Optional: prevent accidental selection */
#player, #stage, .slide, .nav-zone, .controls, .timer, #progress {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}