/* Shared base + player UI for PiP promo films (/promo/4 onwards).
   Each film sets --page (letterbox colour), --ui-bg, --ui-fg and --accent. */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body { background: var(--page, #0b131c); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

.viewport { position: fixed; inset: 0; overflow: hidden; }
.stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; contain: strict; }
.viewport.portrait .stage { box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .45); }
.render .stage { box-shadow: none !important; }
.layer, .scene { position: absolute; inset: 0; }
.scene { visibility: hidden; }
.w, .ch, .wd { display: inline-block; will-change: transform; }
.wd { white-space: nowrap; }

.sound-pill, .ui, .replay { font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; }
.sound-pill {
  position: absolute; right: 18px; top: 18px; z-index: 20;
  display: flex; align-items: center; gap: 10px; padding: 12px 20px 12px 16px;
  border-radius: 999px; background: var(--ui-bg, rgba(8, 14, 22, .75)); color: var(--ui-fg, #fff);
  backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .18);
  font-size: 15px; font-weight: 600; transition: opacity .3s, transform .3s;
}
.sound-pill svg, .ui-btn svg, .replay svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sound-pill svg path:first-child, .ui-btn svg path:first-child { fill: currentColor; }
.sound-pill.hide { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.ui {
  position: absolute; left: 50%; bottom: 16px; z-index: 20;
  width: min(640px, calc(100% - 32px)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; padding: 8px 14px;
  border-radius: 999px; background: var(--ui-bg, rgba(8, 14, 22, .75)); color: var(--ui-fg, #fff);
  backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .14); transition: opacity .4s;
}
.ui.idle { opacity: 0; }
.ui-btn { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; }
.ui-btn:hover { background: rgba(255, 255, 255, .12); }
.ui-btn:focus-visible, .bar-ui:focus-visible, .sound-pill:focus-visible, .replay:focus-visible { outline: 2px solid var(--accent, #9dc395); outline-offset: 2px; }
.ui-btn .i-play { display: none; fill: currentColor; stroke: none; }
.ui-btn .i-pause { fill: currentColor; stroke: none; }
.paused .ui-btn .i-play { display: block; }
.paused .ui-btn .i-pause { display: none; }
#btn-sound .x { display: none; }
#btn-sound[aria-pressed="false"] .w1, #btn-sound[aria-pressed="false"] .w2 { display: none; }
#btn-sound[aria-pressed="false"] .x { display: block; }
.bar-ui { position: relative; flex: 1; height: 26px; cursor: pointer; }
.bar-ui::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .25); }
.fill { position: absolute; left: 0; top: 11px; height: 4px; border-radius: 4px; background: var(--accent, #9dc395); width: 0; }
.tc { flex: none; font-size: 13px; font-variant-numeric: tabular-nums; opacity: .78; min-width: 80px; text-align: right; }
.replay {
  position: absolute; left: 18px; top: 18px; z-index: 20;
  display: none; align-items: center; gap: 10px; padding: 12px 20px 12px 16px;
  border-radius: 999px; background: var(--accent, #9dc395); color: #14202e; font-size: 15px; font-weight: 700;
}
.ended .replay { display: flex; }
.cta { pointer-events: none; }
.ended .cta { pointer-events: auto; }
.render .sound-pill, .render .ui, .render .replay { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 480px) { .tc { display: none; } }