/*
 * Shared styles for every video page: the player around the stage, the
 * storyboard bar, background effects and icon styles. A piece only styles
 * its own scenes. Theme colours and fonts arrive as CSS variables from
 * reel.js (--bg, --text, --accent, --font-head ...), and --u is 1% of the
 * stage's short side, so layouts scale across 16:9, 9:16, 1:1 and 4:5.
 */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #0b0b0b; }
body {
  font-family: var(--font-body), system-ui, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
svg { display: block; }

/* ---------- player ---------- */
#player {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
}
#frame {
  position: relative;
  width: calc(var(--W) * var(--s) * 1px);
  height: calc(var(--H) * var(--s) * 1px);
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .07);
  cursor: pointer;
  touch-action: pan-y;
}
#viewport {
  position: absolute; left: 0; top: 0;
  width: calc(var(--W) * 1px);
  height: calc(var(--H) * 1px);
  transform: scale(var(--s));
  transform-origin: 0 0;
  overflow: hidden;
  background: var(--bg);
}
#stage { position: absolute; inset: 0; overflow: hidden; background: var(--bg); }
#stage > .scene { position: absolute; inset: 0; z-index: 1; }

/* ---------- controls under the frame (viewer only) ---------- */
#chrome {
  width: calc(var(--W) * var(--s) * 1px);
  font: 500 12px/1.4 "Segoe UI", system-ui, sans-serif;
  color: #9a9a9a;
  user-select: none;
}
#track { position: relative; height: 18px; cursor: pointer; }
#track::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 3px; border-radius: 2px; background: #2a2a2a; }
#fill { position: absolute; left: 0; top: 8px; height: 3px; border-radius: 2px; background: #e8e8e8; width: 0; }
#track .tick { position: absolute; top: 4px; width: 2px; height: 11px; border-radius: 1px; background: #555; }
#track .keytick { position: absolute; top: 3px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #e0b84a; box-shadow: 0 0 0 2px #0b0b0b; }
#meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; }
#meta .left, #meta .right { display: flex; align-items: center; gap: 14px; }
#meta b { color: #e8e8e8; font-weight: 600; }
.btn {
  border: 1px solid #333; background: #161616; color: #ddd;
  border-radius: 999px; padding: 4px 12px; font: inherit; cursor: pointer;
}
.btn.on { background: #e8e8e8; color: #111; border-color: #e8e8e8; }

/* ---------- storyboard (key frames as slides) ---------- */
#board { display: none; margin-top: 10px; }
html.board #board { display: block; }
html.board #track, html.board #meta .playonly { display: none; }
#boardTitle { font-size: 15px; color: #f0f0f0; font-weight: 600; }
#boardNote { margin-top: 4px; color: #b0b0b0; font-size: 13px; min-height: 18px; }
#dots { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
#dots button {
  min-width: 30px; height: 26px; border-radius: 7px;
  border: 1px solid #333; background: #161616; color: #bbb;
  font: 600 12px "Segoe UI", system-ui, sans-serif; cursor: pointer;
}
#dots button.on { background: #e0b84a; color: #111; border-color: #e0b84a; }
#boardBadge {
  position: absolute; left: 14px; top: 14px; z-index: 50;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, .65); color: #f0d78a;
  font: 600 12px "Segoe UI", system-ui, sans-serif; letter-spacing: .04em;
  display: none; pointer-events: none;
}
html.board #boardBadge { display: block; }

/* capture modes: the bare stage at 1:1 (render) or fitted with no chrome (embed) */
html.render #player, html.embed #player { display: block; }
html.render #frame, html.embed #frame { border-radius: 0; box-shadow: none; cursor: default; }
html.render #chrome, html.embed #chrome, html.render #boardBadge, html.embed #boardBadge { display: none !important; }
html.embed body { background: transparent; }

/* ---------- background effects (data-bg / data-grain on <html>) ----------
   Designed at full strength; --bgk (background strength: subtle .45, medium
   .75, strong 1) scales the whole layer. --glow1 / --glow2 default to the
   accents; a palette can set softer tints (Bold Pop's accent is black). */
.bgfx { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: var(--bgk, .75); }
[data-bg="glow"] .bgfx {
  background:
    radial-gradient(60% 55% at var(--gx1, 18%) var(--gy1, 18%), color-mix(in srgb, var(--glow1) 42%, transparent), transparent 70%),
    radial-gradient(55% 50% at var(--gx2, 82%) var(--gy2, 85%), color-mix(in srgb, var(--glow2) 36%, transparent), transparent 70%);
}
[data-bg="gradient"] .bgfx {
  background:
    radial-gradient(75% 65% at var(--gx2, 88%) var(--gy2, 105%), color-mix(in srgb, var(--glow2) 55%, transparent), transparent 72%),
    radial-gradient(65% 60% at var(--gx1, 4%) var(--gy1, -6%), color-mix(in srgb, var(--glow1) 38%, transparent), transparent 70%),
    linear-gradient(160deg, var(--bg) 0%, var(--bg2) 100%);
}
[data-bg="grid"] .bgfx {
  background-image:
    linear-gradient(color-mix(in srgb, var(--text) 16%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text) 16%, transparent) 1px, transparent 1px);
  background-size: calc(var(--u) * 8) calc(var(--u) * 8);
  background-position: var(--gridx, 0) var(--gridy, 0);
  -webkit-mask-image: radial-gradient(75% 70% at 50% 50%, #000 25%, transparent 100%);
  mask-image: radial-gradient(75% 70% at 50% 50%, #000 25%, transparent 100%);
}
/* Film grain sits above the scenes, like real film. Zero-mean speckle: light
   specks and dark specks from the same noise, so it reads on dark and light
   looks alike without lifting the blacks. */
.grainfx {
  position: absolute; inset: -80px; z-index: 25; pointer-events: none; display: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 4 0 0 0 -2.05' result='w'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -4 0 0 0 1.95' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='w'/%3E%3CfeMergeNode in='b'/%3E%3C/feMerge%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  opacity: calc(.1 + var(--bgk, .75) * .36); /* subtle .26 · medium .37 · strong .46 */
  transform: translate(var(--grx, 0), var(--gry, 0));
}
[data-grain="on"] .grainfx { display: block; }

/* ---------- icons (data-icons on <html>, or per icon) ---------- */
.ic { display: inline-grid; place-items: center; width: 1em; height: 1em; flex: none; color: var(--accent); }
.ic svg { width: 100%; height: 100%; }
.ic-duotone { background: color-mix(in srgb, var(--accent) 16%, transparent); border-radius: 30%; padding: .2em; }
.ic-badge { background: var(--accent); color: var(--bg); border-radius: 28%; padding: .22em; }
.ic-outline { border: max(1.5px, .05em) solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 50%; padding: .22em; }

/* ---------- text helpers ---------- */
/* the mask around each word: generous room for descenders (g, y, p), accents
   and italic overhang; the negative margins keep the layout unchanged */
.wm { display: inline-block; overflow: hidden; vertical-align: top; padding: .16em .12em .3em; margin: -.16em -.12em -.3em; }
.wi { display: inline-block; will-change: auto; }

/* ---------- text tweaks panel (viewer only) ---------- */
#tweak { display: none; position: fixed; right: 16px; top: 16px; bottom: 16px; width: 272px; overflow: auto; padding: 14px;
  background: #141414; border: 1px solid #2a2a2a; border-radius: 12px; color: #ccc; font: 500 12px/1.45 "Segoe UI", system-ui, sans-serif; z-index: 60; }
html.textmode #tweak { display: block; }
html.textmode #player { padding-right: 300px; }
html.textmode #frame { cursor: text; }
#tweak .tw-h { color: #f0f0f0; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
#tweak #twHint { color: #999; margin-bottom: 10px; }
#tweak #twWhat { color: #f0d78a; font-weight: 600; margin-bottom: 10px; word-break: break-word; }
#tweak label { display: flex; justify-content: space-between; margin-top: 8px; color: #aaa; }
#tweak label b { color: #eee; font-weight: 600; }
#tweak input[type=range] { width: 100%; accent-color: #e0b84a; margin: 6px 0 4px; }
#tweak .tw-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
#tweak .btn { padding: 4px 10px; }
#tweak #twList { margin: 12px 0 6px; border-top: 1px solid #2a2a2a; padding-top: 10px; }
#tweak #twList pre { white-space: pre-wrap; font: 11px/1.5 Consolas, monospace; color: #bbb; margin-top: 6px; }
#tweak #twMsg { color: #9fd3a8; min-height: 16px; }
.tw-sel { outline: 3px dashed #e0b84a !important; outline-offset: 6px; }