/* ═══════════════════════════════════════════════════════════════════════════
   engine.css — the video forge's look.

   Everything is driven by tokens on :root so a fork can re-skin a whole film by
   overriding a handful of custom properties (see films/<slug>/theme.css).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Stage geometry — the film is authored against a fixed 1920×1080 canvas and
     scaled to fit, so layout never reflows between preview and MP4 render. */
  --stage-w: 1920;
  --stage-h: 1080;

  /* Palette */
  --bg: #07090d;
  --bg-2: #0d1118;
  --ink: #eef2f7;
  --ink-dim: #9aa6b6;
  --ink-faint: #5c6675;
  --rule: rgba(255, 255, 255, 0.11);

  --accent: #ff9500;      /* HODL orange, from hodl2013.com's theme-color */
  --accent-2: #4da3ff;
  --good: #35d07f;
  --bad: #ff4d4d;

  /* Retro desktop chrome */
  --xp-bar: linear-gradient(180deg, #2b6ddb 0%, #1a4fb0 48%, #1746a4 100%);
  --xp-face: #ece9d8;
  --xp-ink: #101010;

  --font-ui: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --font-mono: "JetBrains Mono", "DejaVu Sans Mono", "Liberation Mono", ui-monospace, monospace;
  --font-display: "Segoe UI", Tahoma, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000;
  color: var(--ink);
  font-family: var(--font-ui);
  overflow: hidden;
}

/* ─── Viewport & stage ──────────────────────────────────────────────────── */

.viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #000;
}

/* The stage is exactly 1920×1080 and is scaled by JS to fit the viewport.
   All scene layout is authored in these coordinates.
   It is positioned at the viewport's centre point and pulled back by half its own size, rather
   than centred by flex/grid: an item LARGER than its container (which this is, before scaling)
   does not reliably centre that way, and on a phone the stage ended up almost entirely
   off-screen. translate(-50%,-50%) is exact at every viewport size. */
.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--stage-w) * 1px);
  height: calc(var(--stage-h) * 1px);
  transform-origin: center center;
  background: var(--bg);
  overflow: hidden;
  will-change: transform;
}

/* The camera wrapper: zoom/pan live here so scenes never have to know about them. */
.camera {
  position: absolute;
  inset: 0;
  transform-origin: center center;
  will-change: transform;
}

.scene {
  position: absolute;
  inset: 0;
  display: grid;
  /* A DEFINITE column. With `place-items: center` the column was auto-sized, so any child using
     width:100% or 1fr tracks (the meme wall, the browser frame, the forum window, the timeline)
     resolved against max-content and collapsed to a fraction of the frame. */
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: center;
  padding: 96px 120px;
  will-change: opacity;
}

/* Film grain + vignette sit above everything for a filmic feel. */
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(0, 0, 0, 0.72) 100%);
}

/* Drawn by the player in a fixed layer ABOVE .camera, so camera moves never crop it. */
.source-layer {
  position: absolute;
  left: 120px;
  right: 120px;
  bottom: 96px;   /* clears the transport bar when the chrome is visible */
  z-index: 6;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  max-width: 70%;
  /* NO transition here. Opacity is driven per-frame from the timeline; a CSS transition would
     make the rendered frame depend on wall-clock time and break frame-exact MP4 rendering. */
}

/* ─── 1. title ──────────────────────────────────────────────────────────── */

.scene-title .tc-inner { max-width: 1400px; text-align: center; }
.scene-title.align-left .tc-inner { text-align: left; justify-self: start; }
.tc-kicker {
  font-family: var(--font-mono);
  font-size: 26px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 30px;
}
.tc-title {
  font-family: var(--font-display);
  font-size: 122px;
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.028em;
  margin: 0;
}
.tc-sub {
  font-size: 40px;
  line-height: 1.38;
  color: var(--ink-dim);
  margin: 34px auto 0;
  max-width: 1100px;
  font-weight: 300;
}
.tc-note {
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--ink-faint);
  margin-top: 34px;
}

/* ─── 2. crt ────────────────────────────────────────────────────────────── */

.scene-crt { background: linear-gradient(180deg, #05070c, #0a0f18); }
.crt-glass { position: absolute; inset: 0; }
.crt-rain { position: absolute; inset: 0; width: 100%; height: 100%; }
.crt-monitor {
  position: relative;
  width: 1080px;
  height: 740px;
  border-radius: 26px;
  background: #15181d;
  border: 16px solid #23262c;
  box-shadow: 0 60px 120px rgba(0, 0, 0, 0.75);
  display: grid;
  place-items: center;
  padding: 26px;
}
.crt-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #04120a;
  border-radius: 10px;
  overflow: hidden;
  transform-origin: center center;
  display: grid;
  place-items: center;
}
.crt-scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,0.42) 0 2px, transparent 2px 4px);
  pointer-events: none;
}
.crt-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 46%, rgba(0,0,0,0.75) 100%);
  pointer-events: none;
}
.crt-text {
  font-family: var(--font-mono);
  font-size: 38px;
  line-height: 1.6;
  color: #7dffb0;
  text-shadow: 0 0 14px rgba(110, 255, 170, 0.55);
  padding: 0 60px;
  text-align: center;
  max-width: 100%;
}

/* ─── 3. desktop ────────────────────────────────────────────────────────── */

.scene-desktop {
  background: #245edb center/cover no-repeat;
  padding: 0;
  display: block;
}
.dt-icons {
  position: absolute; top: 60px; left: 40px;
  display: grid; gap: 30px; width: 130px;
}
.dt-icon { text-align: center; color: #fff; font-size: 16px; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.dt-icon img, .dt-icon-blank {
  width: 62px; height: 62px; object-fit: contain; margin: 0 auto 8px; display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
}
.dt-icon-blank { background: rgba(255,255,255,0.22); border-radius: 8px; }
.dt-windows { position: absolute; inset: 0; }
.dt-windows .win { position: absolute; }
.dt-taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
  background: var(--xp-bar);
  display: flex; align-items: center; gap: 14px; padding: 0 14px;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.4);
}
.dt-start {
  background: linear-gradient(180deg, #5eb84a, #3f9a30);
  color: #fff; font-weight: 700; font-style: italic;
  padding: 8px 26px 8px 18px; border-radius: 0 12px 12px 0; font-size: 22px;
}
.dt-tasks { display: flex; gap: 8px; flex: 1; }
.dt-task {
  background: rgba(255,255,255,0.18); color: #fff; font-size: 16px;
  padding: 7px 16px; border-radius: 3px; max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dt-clock { color: #fff; font-size: 17px; }

/* Window chrome, shared by desktop + forum */
.win {
  background: var(--xp-face);
  color: var(--xp-ink);
  border: 1px solid #0a246a;
  border-radius: 8px 8px 3px 3px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  will-change: transform, opacity;
}
.win-bar {
  background: var(--xp-bar);
  color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px 8px 14px;
  font-size: 19px; font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.win-buttons { display: flex; gap: 5px; }
.win-btn {
  width: 26px; height: 22px; display: grid; place-items: center;
  background: #2f6fd8; border: 1px solid rgba(255,255,255,0.5); border-radius: 3px;
  font-style: normal; font-size: 14px;
}
.win-btn.close { background: #d4502f; }
.win-body { padding: 22px 26px; }
.win-img { width: 100%; display: block; }
.win-text { font-size: 19px; line-height: 1.5; }

/* ─── 4. forum ──────────────────────────────────────────────────────────── */

.scene-forum { padding: 70px 120px; }
.scene-forum .win { width: 100%; max-width: 1480px; }
.fm-crumb {
  font-size: 17px; color: #26489c; border-bottom: 1px solid #c9c4ae;
  padding-bottom: 10px; margin-bottom: 16px;
}
.fm-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.fm-title {
  font-size: 40px; font-weight: 700; color: #16233f; letter-spacing: -0.01em;
  min-height: 52px;
}
.fm-meta { font-size: 16px; color: #6a6552; white-space: nowrap; }
.fm-post { display: grid; grid-template-columns: 220px 1fr; gap: 26px; margin-top: 18px; }
.fm-author {
  border-right: 1px solid #c9c4ae; padding-right: 20px;
  font-size: 18px; color: #2b3a55; display: grid; gap: 5px; align-content: start;
}
.fm-author span { font-size: 15px; color: #7a7562; }
.fm-body {
  font-family: var(--font-mono);
  font-size: 20px; line-height: 1.62; white-space: pre-wrap;
  color: #14181f; min-height: 120px;
}
.fm-replies { margin-top: 22px; display: grid; gap: 10px; }
.fm-reply {
  display: flex; gap: 14px; align-items: baseline;
  background: #f6f4ea; border-left: 4px solid var(--accent);
  padding: 12px 18px; font-size: 21px;
}
.fm-reply strong { color: #2b3a55; }
.fm-reply-text { font-weight: 700; }
.fm-reply-time { color: #8a8470; font-size: 16px; font-style: normal; margin-left: auto; }
.fm-stats { display: flex; gap: 48px; margin-top: 26px; padding-top: 18px; border-top: 1px solid #c9c4ae; }
.fm-stat { display: grid; }
.fm-stat b { font-size: 40px; color: #16233f; font-variant-numeric: tabular-nums; }
.fm-stat span { font-size: 16px; color: #7a7562; text-transform: uppercase; letter-spacing: 0.1em; }

/* ─── 5. chart ──────────────────────────────────────────────────────────── */

.scene-chart { align-content: center; }
.ch-top { position: absolute; top: 96px; left: 120px; right: 120px; }
.ch-headline { font-size: 46px; font-weight: 700; letter-spacing: -0.02em; }
.ch-value {
  font-family: var(--font-mono); font-size: 76px; font-weight: 700; margin-top: 10px;
  font-variant-numeric: tabular-nums; color: var(--good);
}
.ch-value.down { color: var(--bad); }
.ch-plot { position: relative; width: 100%; max-width: 1560px; margin-top: 120px; }
.ch-svg { width: 100%; height: 480px; display: block; overflow: visible; }
.ch-grid line { stroke: var(--rule); stroke-width: 1; }
.ch-line { stroke: var(--bad); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.ch-area { fill: url(#chGrad); fill-opacity: 0.16; }
.scene-chart .ch-area { fill: var(--bad); }
.ch-dot { fill: #fff; stroke: var(--bad); stroke-width: 4; }
.ch-marker { position: absolute; top: 0; bottom: 0; transform: translateX(-50%); }
.ch-marker-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--rule); left: 50%; }
.ch-marker-label {
  position: absolute; bottom: -46px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 19px; color: var(--ink-dim); white-space: nowrap;
}
/* Markers near either edge would otherwise run off the stage. */
.ch-marker.at-start .ch-marker-label { left: 0; transform: none; text-align: left; }
.ch-marker.at-end .ch-marker-label { left: auto; right: 0; transform: none; text-align: right; }

/* ─── 6. quote ──────────────────────────────────────────────────────────── */

.scene-quote .q-inner { max-width: 1500px; text-align: center; }
.q-text {
  font-size: 62px; line-height: 1.3; font-weight: 300; margin: 0;
  letter-spacing: -0.018em;
}
.q-text mark {
  background: linear-gradient(var(--accent), var(--accent)) left bottom / 0% 100% no-repeat;
  color: inherit; padding: 0 6px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.q-cite {
  display: block; margin-top: 44px; font-style: normal;
  font-family: var(--font-mono); font-size: 25px; color: var(--accent);
  letter-spacing: 0.06em;
}
.q-sub { margin-top: 16px; font-size: 21px; color: var(--ink-faint); }

/* ─── 7. grid ───────────────────────────────────────────────────────────── */

.scene-grid { align-content: center; }
.gr-wall { display: grid; gap: 18px; width: 100%; max-width: 1640px; }
.gr-item { aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: var(--bg-2); }
.gr-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gr-caption { margin-top: 40px; font-size: 32px; color: var(--ink-dim); text-align: center; }

/* ─── 8. notifications ──────────────────────────────────────────────────── */

.scene-notifications { align-content: start; justify-items: end; padding-top: 110px; }
.nt-headline {
  position: absolute; left: 120px; top: 180px; max-width: 700px;
  font-size: 58px; font-weight: 700; line-height: 1.16; letter-spacing: -0.024em;
}
.nt-stack { display: grid; gap: 12px; width: 620px; max-height: 760px; align-content: start; }
.nt-toast {
  background: rgba(20, 25, 34, 0.94);
  border: 1px solid var(--rule); border-left: 4px solid var(--accent);
  border-radius: 10px; padding: 16px 20px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
}
.nt-app {
  font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.nt-title { font-size: 22px; font-weight: 600; }
.nt-text { font-size: 18px; color: var(--ink-dim); margin-top: 5px; line-height: 1.4; }
.nt-counter {
  position: absolute; left: 120px; bottom: 200px;
  display: grid; gap: 6px;
}
.nt-counter b {
  font-family: var(--font-mono); font-size: 92px; color: var(--accent);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.nt-counter span { font-size: 22px; color: var(--ink-dim); }

/* ─── 9. network ────────────────────────────────────────────────────────── */

.scene-network { padding: 0; }
.nw-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.nw-nodes circle { fill: var(--accent); }
.nw-edges line { stroke: var(--accent-2); stroke-width: 1.4; }
.nw-overlay {
  position: relative; z-index: 2; text-align: center; max-width: 1300px;
  /* Needs to be genuinely opaque at the centre or the nodes read through the type. */
  background: radial-gradient(ellipse at center, rgba(7,9,13,0.97) 0%, rgba(7,9,13,0.92) 52%, transparent 80%);
  padding: 90px 70px;
}
.nw-headline { font-size: 82px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; }
.nw-label { margin-top: 28px; font-size: 30px; color: var(--ink-dim); line-height: 1.45; }

/* ─── 10. cycle ─────────────────────────────────────────────────────────── */

.scene-cycle { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; justify-items: stretch; }
.cy-side { justify-self: start; max-width: 640px; }
.cy-headline { font-size: 60px; font-weight: 800; line-height: 1.1; letter-spacing: -0.028em; }
.cy-note { margin-top: 28px; font-size: 26px; line-height: 1.5; color: var(--ink-dim); }
.cy-plot { justify-self: center; width: 100%; display: grid; justify-items: center; }
.cy-svg { width: min(100%, 780px); height: auto; aspect-ratio: 1; }
.cy-node circle { fill: rgba(255, 255, 255, 0.05); stroke: var(--accent); stroke-width: 2; }
.cy-node text { fill: var(--ink); font-size: 21px; font-family: var(--font-ui); }
.cy-arc { stroke: var(--accent); stroke-width: 2.5; }
.cy-svg marker path { fill: var(--accent); }
.cy-svg.tone-bad .cy-node circle,
.cy-svg.tone-bad .cy-arc { stroke: var(--bad); }
.cy-svg.tone-bad marker path { fill: var(--bad); }

/* ─── 11. timeline ──────────────────────────────────────────────────────── */

.scene-timeline { align-content: center; }
.tl-headline { position: absolute; top: 120px; left: 120px; font-size: 54px; font-weight: 800; letter-spacing: -0.024em; }
.tl-viewport { width: 100%; overflow: hidden; padding: 60px 0; }
.tl-rail { display: flex; gap: 60px; position: relative; transition: none; will-change: transform; }
.tl-line {
  position: absolute; left: 0; right: 0; top: 10px; height: 2px;
  background: var(--rule); transform-origin: left center;
}
.tl-item { min-width: 320px; max-width: 320px; position: relative; padding-top: 42px; }
.tl-dot {
  position: absolute; top: 3px; left: 0; width: 16px; height: 16px;
  border-radius: 50%; background: var(--accent);
}
.tl-date { font-family: var(--font-mono); font-size: 20px; color: var(--accent); margin-bottom: 10px; }
.tl-title { font-size: 27px; font-weight: 700; line-height: 1.25; }
.tl-text { font-size: 19px; color: var(--ink-dim); margin-top: 10px; line-height: 1.45; }

/* ─── 12. stats ─────────────────────────────────────────────────────────── */

.scene-stats { align-content: center; }
.st-headline { font-size: 54px; font-weight: 800; margin-bottom: 70px; text-align: center; letter-spacing: -0.024em; }
.st-grid { display: grid; gap: 60px; width: 100%; max-width: 1600px; }
.st-item { text-align: center; }
.st-value {
  font-family: var(--font-mono); font-size: 86px; font-weight: 700;
  color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1.05;
  overflow-wrap: break-word;
}
/* Word values ("June 19, 2011", "Sr. Member") need to be smaller than a bare number or they
   wrap and collide with their neighbours. Set by the scene from the value's length. */
.st-value.st-text { font-size: 58px; }
.st-value.st-text-long { font-size: 44px; }
.st-label { font-size: 23px; color: var(--ink-dim); margin-top: 16px; line-height: 1.35; }
.st-note { font-size: 17px; color: var(--ink-faint); margin-top: 8px; }

/* ─── 13. browser ───────────────────────────────────────────────────────── */

.scene-browser { align-content: center; }
.br-headline { font-size: 46px; font-weight: 700; margin-bottom: 36px; text-align: center; }
.br-frame {
  width: 100%; max-width: 1500px; border-radius: 12px; overflow: hidden;
  background: #1b1f27; border: 1px solid var(--rule);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
}
.br-bar { display: flex; align-items: center; gap: 18px; padding: 12px 18px; background: #23282f; }
.br-dots { display: flex; gap: 8px; }
.br-dots i { width: 13px; height: 13px; border-radius: 50%; background: #4a515b; display: block; }
.br-url {
  flex: 1; background: #12161c; border-radius: 6px; padding: 8px 16px;
  font-family: var(--font-mono); font-size: 18px; color: var(--ink-dim);
}
.br-view { aspect-ratio: 16 / 9; overflow: hidden; background: #0b0e13; display: grid; place-items: center; }
.br-shot { width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform; }
.br-blank { color: var(--ink-faint); font-family: var(--font-mono); font-size: 24px; }
.br-caption { margin-top: 26px; margin-bottom: 40px; font-size: 26px; color: var(--ink-dim); text-align: center; max-width: 1300px; }

/* ─── 14. profile ───────────────────────────────────────────────────────── */

.scene-profile { align-content: center; }
.pf-headline { font-size: 44px; font-weight: 700; margin-bottom: 40px; text-align: center; }
.pf-card {
  width: 860px; background: var(--bg-2); border: 1px solid var(--rule);
  border-radius: 18px; overflow: hidden; position: relative;
  box-shadow: 0 34px 80px rgba(0,0,0,0.6);
}
.pf-banner { height: 190px; background: linear-gradient(120deg, var(--accent), #b35c00); }
.pf-avatar {
  width: 148px; height: 148px; border-radius: 50%; object-fit: cover;
  border: 6px solid var(--bg-2); position: absolute; top: 118px; left: 40px;
}
.pf-avatar-blank { background: #2a3140; }
.pf-meta { padding: 90px 40px 36px; }
.pf-name { font-size: 40px; font-weight: 800; display: flex; align-items: center; gap: 12px; }
.pf-badge { font-style: normal; font-size: 26px; }
.pf-handle { font-size: 26px; color: var(--ink-faint); margin-top: 4px; }
.pf-bio { font-size: 25px; line-height: 1.5; margin-top: 22px; white-space: pre-line; }
.pf-joined { font-size: 20px; color: var(--ink-faint); margin-top: 18px; }
.pf-stats { display: flex; gap: 40px; margin-top: 26px; }
.pf-stat b { font-size: 27px; }
.pf-stat span { font-size: 20px; color: var(--ink-faint); margin-left: 8px; }

/* ─── 15. posts ─────────────────────────────────────────────────────────── */

.scene-posts { align-content: center; }
.po-headline { font-size: 50px; font-weight: 800; margin-bottom: 50px; text-align: center; letter-spacing: -0.022em; }
.po-wrap { display: grid; gap: 26px; width: 100%; max-width: 1560px; }
.po-card {
  background: var(--bg-2); border: 1px solid var(--rule); border-radius: 16px;
  padding: 28px 32px;
}
.po-head { display: flex; gap: 12px; align-items: baseline; margin-bottom: 14px; flex-wrap: wrap; }
.po-head b { font-size: 24px; }
.po-head span { font-size: 21px; color: var(--ink-faint); }
.po-head em { font-size: 18px; color: var(--ink-faint); font-style: normal; margin-left: auto; }
.po-text { font-size: 25px; line-height: 1.5; white-space: pre-wrap; }

/* ─── missing scene type ────────────────────────────────────────────────── */

.scene-missing { background: #2a1010; }
.missing-inner { text-align: center; font-family: var(--font-mono); }
.missing-inner h2 { color: var(--bad); font-size: 40px; }
.missing-inner p { color: var(--ink-dim); font-size: 22px; max-width: 1100px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Player chrome
   ═══════════════════════════════════════════════════════════════════════════ */

.chrome {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 18px 26px 22px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85) 42%);
  transition: opacity 0.35s ease, transform 0.35s ease;
  font-family: var(--font-ui);
}
.chrome.hidden { opacity: 0; transform: translateY(14px); pointer-events: none; }
body.render-mode .chrome, body.render-mode .cc { display: none !important; }

.scrub {
  position: relative; height: 26px; cursor: pointer; display: flex; align-items: center;
}
.scrub-track { position: absolute; left: 0; right: 0; height: 6px; background: rgba(255,255,255,0.2); border-radius: 3px; }
.scrub-fill { position: absolute; left: 0; height: 6px; background: var(--accent); border-radius: 3px; width: 0; }
.scrub-head {
  position: absolute; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transform: translateX(-50%); left: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.scrub-chapter {
  position: absolute; top: 50%; width: 2px; height: 14px; margin-top: -7px;
  background: rgba(255,255,255,0.55);
}

.controls { display: flex; align-items: center; gap: 14px; margin-top: 12px; color: var(--ink); }
.ctrl {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16);
  color: var(--ink); border-radius: 9px; padding: 9px 14px; cursor: pointer;
  font-size: 15px; line-height: 1; font-family: inherit;
}
.ctrl:hover { background: rgba(255,255,255,0.19); }
.ctrl[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #101010; }
.ctrl-play { min-width: 54px; font-size: 17px; }
.time { font-family: var(--font-mono); font-size: 15px; color: var(--ink-dim); min-width: 106px; }
.chapter-now { font-size: 15px; color: var(--ink-dim); margin-left: 6px; }
.spacer { flex: 1; }

/* Chapter menu */
.chapters {
  position: fixed; right: 26px; bottom: 96px; z-index: 60;
  width: 420px; max-height: 62vh; overflow-y: auto;
  background: rgba(10, 13, 18, 0.97); border: 1px solid var(--rule);
  border-radius: 14px; padding: 10px; display: none;
  box-shadow: 0 24px 70px rgba(0,0,0,0.7);
}
.chapters.open { display: block; }
.chapter-item {
  display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: baseline;
  padding: 12px 14px; border-radius: 9px; cursor: pointer; color: var(--ink);
  border: 0; background: none; width: 100%; text-align: left; font-family: inherit;
}
.chapter-item:hover { background: rgba(255,255,255,0.08); }
.chapter-item.active { background: rgba(255, 149, 0, 0.16); }
.chapter-item time { font-family: var(--font-mono); font-size: 14px; color: var(--ink-faint); }
.chapter-item b { font-size: 17px; font-weight: 600; display: block; }
.chapter-item small { font-size: 14px; color: var(--ink-faint); }

/* Captions */
.cc {
  position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%);
  z-index: 40; max-width: 74%; text-align: center;
  font-size: 27px; line-height: 1.42;
  background: rgba(0,0,0,0.76); padding: 12px 24px; border-radius: 10px;
  pointer-events: none; display: none;
}
.cc.on { display: block; }

/* Poster / start overlay */
.poster {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  background: radial-gradient(ellipse at center, #10151d, #04060a);
  text-align: center; padding: 40px;
}
.poster.gone { display: none; }
.poster h1 { font-size: 72px; margin: 0 0 14px; letter-spacing: -0.03em; }
.poster p { font-size: 24px; color: var(--ink-dim); margin: 0 0 40px; max-width: 760px; }
.poster button {
  background: var(--accent); color: #12130f; border: 0; border-radius: 999px;
  padding: 18px 46px; font-size: 21px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.poster small { display: block; margin-top: 26px; color: var(--ink-faint); font-size: 16px; }

/* ─── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .chrome { padding: 12px 14px 16px; }
  .controls { gap: 8px; flex-wrap: nowrap; }
  .ctrl { padding: 8px 11px; font-size: 13px; }
  .time { min-width: 92px; font-size: 13px; }
  .chapter-now { display: none; }
  .chapters { right: 10px; left: 10px; width: auto; }
  .cc { font-size: 15px; bottom: 116px; max-width: 94%; padding: 8px 14px; line-height: 1.35; }
  .poster h1 { font-size: 40px; }
  .poster p { font-size: 17px; }
}

/* Phones: keep the transport on one row. "Chapters" becomes a glyph — the full menu is
   unchanged, only its button label shrinks. */
@media (max-width: 480px) {
  .controls { gap: 6px; }
  .ctrl { padding: 8px 9px; font-size: 12px; }
  .time { min-width: 78px; font-size: 12px; }
  .ctrl-chapters { font-size: 0; }
  .ctrl-chapters::before { content: "\2630"; font-size: 15px; }
}

/* Respect reduced motion: the film still plays, but camera moves are disabled
   (handled in player.js) and grain/flicker are stilled. */
@media (prefers-reduced-motion: reduce) {
  .grain { display: none; }
}

/* ─── 16. anime — illustrated tableaux ──────────────────────────────────── */

.scene-anime { padding: 0; display: block; }
.an-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* A colour grade over the illustration: cool shadows, slight vignette, so the
   flat SVG reads as a lit frame rather than a diagram. */
.an-grade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 34% 55%, rgba(0,0,0,0) 46%, rgba(0,0,0,0.42) 100%),
    linear-gradient(180deg, rgba(10,18,32,0.16), rgba(0,0,0,0.12));
}

/* Typed establishing label, lower-left. */
.an-place {
  position: absolute; left: 110px; bottom: 190px;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: 34px; letter-spacing: 0.08em;
  color: #e9f1fb; text-shadow: 0 2px 18px rgba(0,0,0,0.9);
}
.an-dot {
  width: 12px; height: 12px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 16px var(--accent); flex: none;
}
.an-caret { font-style: normal; color: var(--accent); }

/* Hard timestamp. */
.an-stamp {
  position: absolute; left: 110px; bottom: 120px;
  font-family: var(--font-mono); font-size: 26px; letter-spacing: 0.16em;
  color: var(--accent); text-shadow: 0 2px 14px rgba(0,0,0,0.9);
  transform-origin: left center;
}

/* Closing line of on-screen text. */
.an-line {
  position: absolute; right: 110px; bottom: 150px; max-width: 46%;
  text-align: right; font-size: 40px; line-height: 1.32; font-weight: 300;
  color: #eef4fc; text-shadow: 0 2px 22px rgba(0,0,0,0.95);
}

@media (max-width: 900px) {
  .an-place { font-size: 26px; left: 70px; bottom: 210px; }
  .an-stamp { font-size: 20px; left: 70px; bottom: 150px; }
  .an-line { font-size: 30px; right: 70px; max-width: 60%; }
}

/* ─── Aspect-ratio framing ──────────────────────────────────────────────── */

/* .frame is the visible picture. The stage inside it is scaled to cover (for the
   cropping ratios) or contain (for Fit), so one authored 1920×1080 film yields a
   landscape cut, a vertical cut and a square cut with no re-layout. */
.frame {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 30px 90px rgba(0, 0, 0, 0.6);
}

.ratio-menu {
  position: fixed; right: 26px; bottom: 96px; z-index: 60;
  background: rgba(10, 13, 18, 0.97); border: 1px solid var(--rule);
  border-radius: 14px; padding: 8px; display: none;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7);
}
.ratio-menu.open { display: block; }
.ratio-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 14px; border: 0; background: none; color: var(--ink);
  border-radius: 9px; cursor: pointer; font-family: inherit; font-size: 15px;
}
.ratio-item:hover { background: rgba(255, 255, 255, 0.08); }
.ratio-item.active { background: rgba(255, 149, 0, 0.16); }
.ratio-box {
  border: 2px solid var(--ink-dim); border-radius: 3px; flex: none; display: block;
}
.ratio-box[data-r="fit"], .ratio-box[data-r="16:9"] { width: 26px; height: 15px; }
.ratio-box[data-r="9:16"] { width: 15px; height: 26px; }
.ratio-box[data-r="1:1"]  { width: 21px; height: 21px; }
.ratio-box[data-r="fill"] { width: 26px; height: 20px; border-style: dashed; }
.ratio-item.active .ratio-box { border-color: var(--accent); }

/* ─── Short mode ────────────────────────────────────────────────────────── */

.short-title {
  position: fixed; left: 50%; top: 22px; transform: translateX(-50%);
  z-index: 45; display: none;
  font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-dim);
  background: rgba(0, 0, 0, 0.6); padding: 8px 18px; border-radius: 999px;
  border: 1px solid var(--rule); pointer-events: none;
}
body.short-mode .short-title { display: block; }
body.short-mode .ctrl-shorts { background: var(--accent); border-color: var(--accent); color: #101010; }

.ctrl-shorts { text-decoration: none; display: inline-block; }

@media (max-width: 480px) {
  .ctrl-ratio, .ctrl-shorts { font-size: 11px; padding: 8px 8px; }
  .ratio-menu { right: 10px; left: 10px; }
}

/* Marks the ratios that are centre-crops of the 16:9 cut rather than purpose-built layouts. */
.ratio-preview {
  margin-left: auto; font-style: normal; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint);
  border: 1px solid var(--rule); border-radius: 999px; padding: 2px 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Feedback mode — only present when the player is opened with a review token.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Never let any of this reach an MP4 render. The module is not even loaded in render mode;
   this is the backstop. */
body.render-mode .fb-panel,
body.render-mode .fb-pins { display: none !important; }

.ctrl-feedback[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #101010; }

/* ─── Panel ─────────────────────────────────────────────────────────────── */

/* Docked left, so it never collides with .chapters / .ratio-menu, which share the right slot. */
.fb-panel {
  /* Above .poster (80), because feedback mode dismisses the poster and must not end up
     behind it if the panel is opened by keyboard before playback starts. */
  position: fixed; left: 26px; bottom: 96px; z-index: 90;
  width: 420px; max-height: 72vh; overflow-y: auto;
  background: rgba(10, 13, 18, 0.97);
  border: 1px solid var(--rule); border-radius: 14px;
  padding: 16px; display: none;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7);
  font-family: var(--font-ui); color: var(--ink);
}
.fb-panel.open { display: block; }

.fb-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.fb-head strong { font-size: 17px; }
.fb-who {
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint);
  border: 1px solid var(--rule); border-radius: 999px; padding: 3px 9px;
}
.fb-close {
  margin-left: auto; background: none; border: 0; color: var(--ink-dim);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.fb-close:hover { color: var(--ink); }

/* The live playhead context — what this note will be attached to. */
.fb-where {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint);
  margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--rule);
}
.fb-where b { color: var(--accent); font-size: 13px; }

.fb-text {
  width: 100%; resize: vertical; min-height: 86px;
  background: rgba(255, 255, 255, 0.05); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 9px;
  padding: 10px 12px; font: inherit; font-size: 14px; line-height: 1.45;
}
.fb-text:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.fb-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.fb-row.fb-actions { margin-top: 14px; }

.fb-name {
  flex: 1; min-width: 150px;
  background: rgba(255, 255, 255, 0.05); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 9px;
  padding: 8px 11px; font: inherit; font-size: 13px;
}
.fb-name:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.fb-count { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }

.fb-pin-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #101010; }

.fb-pin-info {
  flex: 1; min-width: 100%;
  font-size: 12px; color: var(--ink-dim); line-height: 1.5;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
}
.fb-pin-info em { color: var(--ink-faint); font-style: italic; }
.fb-drop {
  background: none; border: 0; color: var(--bad); cursor: pointer;
  font: inherit; font-size: 12px; text-decoration: underline; padding: 0;
}

.fb-submit { background: var(--accent); border-color: var(--accent); color: #101010; font-weight: 650; }
.fb-submit:disabled { opacity: 0.4; cursor: not-allowed; }
.fb-submit:disabled:hover { background: var(--accent); }

.fb-quota {
  margin-left: auto; text-align: right;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint);
}
.fb-quota em { display: block; font-style: normal; color: var(--bad); }

.fb-status { margin-top: 10px; font-size: 13px; color: var(--ink-dim); min-height: 18px; }

.fb-list { margin-top: 14px; }
.fb-list-head {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px;
}
.fb-item {
  display: flex; gap: 10px; align-items: baseline; width: 100%;
  background: rgba(255, 255, 255, 0.04); border: 0; border-radius: 8px;
  padding: 8px 10px; margin-bottom: 6px; cursor: pointer;
  color: var(--ink-dim); font: inherit; font-size: 12px; text-align: left;
}
.fb-item:hover { background: rgba(255, 255, 255, 0.09); }
.fb-item time { font-family: var(--font-mono); color: var(--accent); flex: none; }
.fb-item span { flex: 1; }
.fb-tag {
  flex: none; font-style: normal; font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint);
  border: 1px solid var(--rule); border-radius: 999px; padding: 2px 7px;
}

/* ─── Pins on the picture ───────────────────────────────────────────────── */

.fb-pins {
  position: absolute; inset: 0; z-index: 9;
  pointer-events: none;   /* only becomes clickable while pinning */
}
body.fb-pinning .fb-pins { pointer-events: auto; cursor: crosshair; }
body.fb-pinning .frame { cursor: crosshair; }

.fb-pin {
  position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-radius: 50%; background: var(--accent);
  border: 3px solid #101010;
  box-shadow: 0 0 0 2px var(--accent), 0 4px 14px rgba(0, 0, 0, 0.6);
}
/* A ring that draws attention without hiding what is underneath. */
.fb-pin::after {
  content: ''; position: absolute; inset: -14px;
  border: 2px solid var(--accent); border-radius: 50%; opacity: 0.55;
}
.fb-pin-replay { background: var(--accent-2); box-shadow: 0 0 0 2px var(--accent-2), 0 4px 14px rgba(0,0,0,0.6); }
.fb-pin-replay::after { border-color: var(--accent-2); }

@media (max-width: 900px) {
  .fb-panel { left: 10px; right: 10px; width: auto; bottom: 92px; max-height: 60vh; padding: 12px; }
  .fb-quota { margin-left: 0; text-align: left; width: 100%; }
}