/* ============================================================
   Stage = the exportable canvas (real export pixels).
   The viewport centers it and JS scales it to fit the screen.
   ============================================================ */

.player {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 120% at 50% 0%, #1b232c 0%, #0d1217 70%);
}

.stage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(var(--fit, 1));
  transform-origin: center center;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  /* default 4:5 */
  width: 1080px;
  height: 1350px;
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, .8);
}
.stage.r-4-5  { width: 1080px; height: 1350px; }
.stage.r-1-1  { width: 1080px; height: 1080px; }
.stage.r-9-16 { width: 1080px; height: 1920px; }

/* slides stack on top of each other */
.slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .42s ease, visibility 0s linear .42s;
}
.slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .42s ease, visibility 0s;
}

/* ---------------- Timeline ticks (preview only) ---------------- */
.timeline {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 30;
}
.timeline .tick {
  width: 54px;
  height: 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .22);
  overflow: hidden;
}
.timeline .tick > i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--green-bright);
  border-radius: inherit;
}
.timeline .tick.done > i { width: 100%; }
.timeline .tick.active > i {
  width: 100%;
  transition: width var(--slide-ms, 4000ms) linear;
}

/* ---------------- Controls (not exported) ---------------- */
.controls {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  padding: 12px 18px;
  background: #0b0f14;
  border-top: 1px solid #1c242d;
  color: #cdd6df;
  font-size: 13px;
}
.ctl-group { display: flex; align-items: center; gap: 8px; }
.ctl-label { color: #6f7c89; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.ctl {
  appearance: none;
  border: 1px solid #2a333d;
  background: #151b22;
  color: #cdd6df;
  border-radius: 9px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  transition: background .15s, border-color .15s, color .15s;
}
.ctl:hover { background: #1d242d; border-color: #3a4753; }
.ctl.is-on { background: var(--green); border-color: var(--green); color: #fff; }
.ctl-check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.ctl-check input { accent-color: var(--green-bright); }
.ctl-dots { display: inline-flex; gap: 7px; margin-left: 6px; }
.ctl-dots .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #333d47; cursor: pointer; border: 0; padding: 0;
}
.ctl-dots .dot.is-on { background: var(--green-bright); }

/* ---------------- Clean mode: hide everything but the stage --- */
body.clean .controls,
body.clean .timeline { display: none; }
body.clean .viewport { background: #000; }

/* ---------------- Capture mode: pin stage at 0,0, scale 1 -------
   Used for deterministic export/screenshots — set the browser
   window to the exact ratio size and the stage fills it 1:1. */
body.capture { background: #000; }
body.capture .controls,
body.capture .timeline { display: none; }
body.capture .viewport {
  position: static;
  display: block;
  overflow: visible;
  height: auto;
}
body.capture .stage {
  position: static;
  transform: none !important;
}