/* The player shared by the films in examples/: the theater around the 16:9 stage, the transport, the score
   drawer. A film brings its own stylesheet for what is inside #frame and can recolour the chrome through the
   --ui-* properties. */
:root {
  --theater: #0c0b09;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --ui-fg: #F1ECE1;       /* the played part of the bar, the knob, the play button, the clock */
  --ui-ink: #16130F;      /* the icon on the play button */
  --ui-hot: #F0421C;      /* the knob's ring, the drawer's title, the score line that is playing */
  --ui-accent: #FFB81C;   /* focus rings, switched-on buttons, the drawer's times */
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--theater); color: #d9d3c6; font-family: var(--mono); }
body { overflow: hidden; }
#theater { height: 100%; display: flex; align-items: center; justify-content: center; padding: 10px 14px; transition: padding .25s; }
#deck { --chrome: 118px; width: min(100%, calc((100vh - var(--chrome)) * 16 / 9)); width: min(100%, calc((100dvh - var(--chrome)) * 16 / 9)); flex: none; }   /* vh first: a browser without dvh keeps it */

/* the 16:9 stage; #frame is a fixed 1920x1080 world scaled to fit (--k set from JS) */
#stage { position: relative; width: 100%; aspect-ratio: 16 / 9; cursor: pointer; overflow: hidden; border-radius: 4px; box-shadow: 0 30px 80px #000a, 0 0 0 1px #ffffff10; flex: none; }
#frame { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; transform: scale(var(--k, .5)); overflow: hidden; }

/* ── the player ───────────────────────────────────────────────────────────── */
#player { margin-top: 8px; user-select: none; }
#scrub { position: relative; height: 22px; cursor: pointer; touch-action: none; outline: none; }
#scrub .chapters { position: absolute; left: 0; right: 0; top: 8px; height: 5px; display: flex; background: #2b2823; border-radius: 3px; overflow: hidden; transition: top .12s, height .12s; }
#scrub:hover .chapters, #scrub.drag .chapters, #scrub:focus-visible .chapters { top: 6px; height: 9px; }
#scrub .chapters i { display: block; height: 100%; border-right: 2px solid var(--theater); position: relative; z-index: 2; }
#scrub .chapters i:last-child { border-right: 0; }
#scrub .played { will-change: transform; position: absolute; left: 0; right: 0; top: 8px; height: 5px; transform-origin: 0 50%; transform: scaleX(0); background: var(--ui-fg); border-radius: 3px; transition: top .12s, height .12s; z-index: 1; }
#scrub:hover .played, #scrub.drag .played, #scrub:focus-visible .played { top: 6px; height: 9px; }
#scrub .head { will-change: transform; position: absolute; inset: 0; pointer-events: none; z-index: 3; }   /* moves the knob by its own width: 100% = the bar */
#scrub .knob { position: absolute; left: -7px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--ui-fg); box-shadow: 0 0 0 3px var(--ui-hot); scale: 0; transition: scale .12s; }
#scrub:hover .knob, #scrub.drag .knob, #scrub:focus-visible .knob { scale: 1; }
#scrub .tip { position: absolute; bottom: 26px; left: 0; padding: 4px 8px; background: #000c; border-radius: 4px; font-size: 12px; white-space: pre; opacity: 0; pointer-events: none; transition: opacity .12s; }
#scrub:hover .tip { opacity: 1; }
#controls { display: flex; align-items: center; gap: 2px; padding-top: 2px; }
#controls button { flex: none; appearance: none; border: 0; background: transparent; color: #cfc9bc; width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; font: 600 13px var(--mono); }
#controls button:hover { background: #ffffff14; color: #fff; }
#controls button:focus-visible, #scrub:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
#controls button.main { background: var(--ui-fg); color: var(--ui-ink); width: 42px; height: 42px; border-radius: 50%; margin: 0 4px; }
#controls button.main:hover { background: #fff; }
#controls button.txt { width: auto; padding: 0 10px; }
#controls button.on { color: var(--ui-accent); }
#time { font: 500 14px var(--mono); margin-left: 10px; color: var(--ui-fg); white-space: nowrap; }
#time em { font-style: normal; opacity: .5; }
#chap { white-space: nowrap; margin-left: 14px; font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .55; }
.grow { flex: 1; }
/* The keys hint reads at about 6:1 on the night (WCAG AA 4.5): .38 was 3.3. */
#hint { margin: 6px 0 0; text-align: center; font: 12px var(--mono); opacity: .6; letter-spacing: .04em; }
kbd { font: inherit; padding: 0 5px; border: 1px solid #ffffff30; border-radius: 3px; margin: 0 2px; }

/* the score drawer */
#source { position: fixed; right: 0; top: 0; bottom: 0; width: 400px; padding: 22px 22px 40px; overflow: auto; background: #141210; border-left: 1px solid #ffffff14; transform: translateX(100%); transition: transform .25s; font-size: 13px; line-height: 1.5; z-index: 5; }
body.source-open #source { transform: none; }
body.source-open #theater { padding-right: 420px; }
#source .close { position: sticky; top: 0; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; margin: -10px -10px -28px auto; border: 0; border-radius: 8px; background: #141210; color: #cfc9bc; cursor: pointer; }
#source .close:hover { background: #ffffff14; color: #fff; }
#source .close:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
#source h2 { margin: 0 0 8px; font: 600 12px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ui-hot); }
#source .lede { margin: 0 0 16px; opacity: .7; }
#source ol { list-style: none; margin: 0; padding: 0; }
#source li { display: flex; gap: 12px; padding: 7px 8px 7px 10px; border-left: 2px solid transparent; cursor: pointer; opacity: .55; }
#source li:hover { opacity: .9; background: #ffffff08; }
#source li.now { opacity: 1; border-left-color: var(--ui-hot); background: #ffffff0c; }
#source time { flex: none; width: 44px; color: var(--ui-accent); font-variant-numeric: tabular-nums; }
#source time small { opacity: .6; }
@media (max-width: 900px) { body.source-open #theater { padding-right: 14px; } #source { width: min(92vw, 400px); } }
/* a phone: the frame stays as large as it can be, the controls keep only what a thumb needs */
@media (max-width: 640px) {
  #theater { padding: 8px; }
  #deck { --chrome: 96px; }
  #controls [data-a=prev], #controls [data-a=next], #controls [data-a=back], #controls [data-a=fwd], #controls [data-a=loop], #chap, #hint { display: none; }
  #controls button.main { margin-left: 0; }
}
@media (hover: none) { #hint { display: none; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:root {
  --paper: #F1ECE1;
  --ink: #16130F;
  --vermilion: #F0421C;
  --cobalt: #1E44FF;
  --saffron: #FFB81C;
  --sky: #8FA3FF;
  /* the fills as printed on this paper (the colour times the paper), so no blend mode is needed */
  --pv: #E33D19; --pc: #1C3FE1; --ps: #F1AA19; --psky: #8797E1;
}
/* The film only: the stage, the transport and the score drawer are in player.css (shared with DECK). */

#stage { background: var(--paper); }
#frame { background: #0c0b09; }
#scene, #paper, #tint, #wash, #lens, #cam, #hud, #vhs, #grain { position: absolute; left: 0; top: 0; }
#scene, #lens { width: 100%; height: 100%; }
#lens { overflow: hidden; }   /* the film's lens: the split-channel look is applied to what the camera sees, not to the whole world */
#paper { width: 100%; height: 100%; background: var(--paper); }
#cam { width: 5760px; height: 2160px; transform-origin: 0 0; will-change: transform; }
#cam > svg, #cam > .layer { position: absolute; left: 0; top: 0; }
svg { display: block; overflow: visible; }
.layer { width: 5760px; height: 2160px; pointer-events: none; }
#tint { width: 100%; height: 100%; pointer-events: none; opacity: 0; background: #FFCB70; }
#wash { width: 100%; height: 100%; pointer-events: none; opacity: 0; background: #F7E2B4; }
#grain { width: 2200px; height: 1400px; left: -140px; top: -160px; pointer-events: none; opacity: .5; background-size: 256px 256px; will-change: transform; }
#hud { width: 100%; height: 100%; pointer-events: none; font-family: var(--mono); color: var(--ink); }
#vhs { width: 100%; height: 100%; pointer-events: none; overflow: hidden; }

#veil { position: absolute; inset: 0; display: grid; place-items: center; background: var(--paper); color: #16130f88; font-size: 14px; letter-spacing: .12em; transition: opacity .3s; }
#veil.gone { opacity: 0; pointer-events: none; }

/* the ink */
.ink { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; stroke-width: 9; stroke-dasharray: 1 2; }
.pop { transform-box: fill-box; transform-origin: 50% 50%; }
.hud-t { position: absolute; font: 500 26px/1 var(--mono); letter-spacing: .06em; white-space: pre; }

.osd { font-size: 44px; font-weight: 700; letter-spacing: .04em; color: var(--ink); text-shadow: 2px 0 var(--paper), -2px 0 var(--paper), 0 2px var(--paper), 0 -2px var(--paper), 4px 4px 0 #0002; }