/* =========================================================
   films.css: the Chalk Talk film frame (shared by the story and the Chalk Talk page)
   ========================================================= */
/* ---------- The film frame ---------- */
.film { position: relative; border-radius: 14px; overflow: hidden; background: #000; border: 1px solid var(--line); box-shadow: 0 30px 70px -25px rgba(0,0,0,.95); }
.film-a { aspect-ratio: 1350 / 1620; }
.film-b, .film-c { aspect-ratio: 4 / 5; }
.film .scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.film .pk, .caps p { visibility: hidden; }
.bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.12); z-index: 5; }
.bar i { display: block; height: 100%; width: 100%; background: var(--amber); transform: scaleX(0); transform-origin: 0 50%; }
.caps { position: absolute; z-index: 4; }
.caps p { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; }
.film-ctrl { display: flex; gap: 8px; margin-top: 10px; }
.film-ctrl button { font: 700 .72rem/1 var(--cond); letter-spacing: .2em; text-transform: uppercase; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); }
.film-ctrl button:hover { border-color: var(--amber); color: var(--amber); }

/* A: TV replay */
.a-bug { position: absolute; z-index: 4; left: 12px; top: 12px; font: 700 .7rem/1 var(--cond); letter-spacing: .24em; text-transform: uppercase; background: var(--red); color: #fff; padding: 6px 9px 5px; border-radius: 2px; }
.a-bug::before { content: "◀◀ "; letter-spacing: 0; }
.a-comm { position: absolute; z-index: 4; left: 12px; bottom: 74px; display: flex; align-items: center; gap: 8px; }
.a-comm svg { width: 52px; height: 52px; border-radius: 50%; background: #16131f; border: 2px solid var(--amber); padding: 3px; }
.a-comm span { font: 800 1rem/1 var(--display); text-transform: uppercase; text-shadow: 0 2px 8px rgba(0,0,0,.9); }
.a-comm small { font: 600 .62rem/1 var(--cond); letter-spacing: .2em; color: var(--amber); }
.a-caps { left: 12px; right: 12px; bottom: 16px; height: 50px; }
.a-caps p {
  display: flex; align-items: center; height: 50px; padding: 0 14px 0 16px; border-left: 6px solid var(--amber);
  background: linear-gradient(90deg, rgba(7,8,13,.95), rgba(7,8,13,.82)); font: 700 clamp(.95rem, 2.4vw, 1.15rem)/1.1 var(--cond); letter-spacing: .04em; text-transform: uppercase;
}


/* A+B mix */
.film-ab { aspect-ratio: 3 / 4; }
.ab-chip { position: absolute; z-index: 4; left: 12px; top: 12px; font: 700 .7rem/1 var(--cond); letter-spacing: .24em; text-transform: uppercase; background: var(--amber); color: #111; padding: 6px 9px 5px; border-radius: 2px; }

/* In the A+B films, Rubble's badge sits top-right so the bottom stays clear for the marker labels */
.film-ab .a-comm { top: 12px; right: 12px; left: auto; bottom: auto; flex-direction: row-reverse; text-align: right; }