/* Approved six-scene film, with accessible DOM headings and a 9:16 glass UI. */
.has-hero-film .film-caption {
  box-sizing:border-box;
  aspect-ratio:9/16;
  width:288px;
  height:auto;
  min-height:0;
  padding:20px;
  margin:0 0 16px auto;
  border-radius:28px;
  display:flex;
  flex-direction:column;
  background:linear-gradient(132deg,#bdddd62e,#102a3ae0 44%,#102a3ac7);
  box-shadow:0 18px 45px #0005,inset 0 1px #f4fff54d;
}
.has-hero-film .film-caption:after{content:'';height:3px;width:64px;border-radius:5px;background:#cddcd480;position:absolute;bottom:10px;left:50%;transform:translateX(-50%)}
.glass-statusbar{display:flex;justify-content:space-between;align-items:center;flex:none;font:8px/1 'DM Mono',monospace;color:#e6f0e9;margin:0 0 20px}
.glass-statusbar i{display:block;width:17px;height:8px;border:1px solid #cddcd499;border-radius:2px;position:relative;background:linear-gradient(90deg,#cddcd4 65%,transparent 65%)}
.glass-statusbar i:after{content:'';width:2px;height:4px;background:#cddcd4;position:absolute;right:-3px;top:1px}
.has-hero-film .glass-toolbar{flex:none;margin:0 0 24px;padding:0 0 17px;min-height:42px;display:flex;align-items:center}
.glass-toolbar img{width:136px;height:auto;display:block}
.has-hero-film .film-heading{font-size:24px;line-height:1.15;margin:0 0 15px;text-transform:none;flex:none}
.has-hero-film .film-screen{min-height:0;flex:1;font-size:13px;display:flex;flex-direction:column}
.has-hero-film .film-screen p{font:13px/1.5 'Inter Tight',sans-serif;margin:0 0 18px}
.glass-field{margin:7px 0 12px}
.glass-field strong{display:block;min-height:42px;margin-top:8px;padding:11px 12px;border:1px solid #cddcd447;border-radius:8px;background:#ffffff08;color:#eff2ee;font:15px/1.25 'Inter Tight',sans-serif;font-weight:500}
.glass-field strong:empty:after{content:'\00a0'}
.glass-notification{padding:13px;border:1px solid #cddcd43d;border-radius:10px;background:#cddcd41c;margin:6px 0 3px}
.glass-notification strong{display:block;font:13px/1.4 'Inter Tight',sans-serif;color:#eff2ee;margin-top:5px}
.glass-origin{padding:13px;border:1px solid #8bcdbd40;border-radius:9px;background:#8bcdbd15;margin-top:18px}
.glass-origin strong{display:block;font:15px/1.4 'Inter Tight',sans-serif;color:#eff2ee;margin-top:6px}
.has-hero-film .glass-action{padding:12px;border-radius:9px;background:#8bcdbd;color:#0b2028;font-size:13px;font-weight:600;margin-top:auto;min-height:42px;gap:5px}
.has-hero-film .glass-action b{color:#0b2028}
.has-hero-film .glass-code{margin:19px 0;gap:6px}
.has-hero-film .glass-code span{padding:13px 0;font-size:22px}
.has-hero-film .glass-name{font-size:27px;margin:7px 0 20px}
.has-hero-film .glass-status{font-size:10px;padding:11px 10px;margin-top:12px}
.has-hero-film .glass-label{font-size:8px}
.has-hero-film .glass-number{font-size:20px}
.vota-v5 .film-info{width:345px;right:30px;bottom:23px}
.vota-v5 .film-meta{margin-left:57px}
.vota-v5 .film-meter{left:57px}
.vota-v5 .film-controls{justify-content:flex-end}
.vota-v5 .film-controls .film-open{flex:1}
.vota-v5 .film-caption{width:288px;min-height:0}
.vota-v5 .hero-film[data-beat="0"] .film-caption,
.vota-v5 .hero-film[data-beat="7"] .film-caption{visibility:hidden}
.vota-v5 .film-footnote,.vota-v5 .film-mode{text-align:right;margin-left:auto}

/* V4 remains bounded: picture above, portrait UI and controls below it. */
.has-hero-film:not(.vota-v5) .hero-visual[data-film-host]{height:auto;min-height:0}
.has-hero-film:not(.vota-v5) .hero-film{position:relative;min-height:100%;height:100%}
.has-hero-film:not(.vota-v5) .film-media{aspect-ratio:16/9;flex:none}
.has-hero-film:not(.vota-v5) .film-info{display:grid;grid-template-columns:minmax(0,1fr) 225px;gap:14px 20px;padding:22px;align-content:center;flex:1}
.has-hero-film:not(.vota-v5) .film-caption{grid-column:2;grid-row:1/5;width:225px;min-height:0;margin:0;padding:16px;border-radius:22px}
.has-hero-film:not(.vota-v5) .film-meta{grid-column:1;grid-row:1;display:block;line-height:1.7;margin:0}
.has-hero-film:not(.vota-v5) .film-count{display:block;margin-top:12px;font-size:13px;color:#cddcd4}
.has-hero-film:not(.vota-v5) .film-controls{grid-column:1;grid-row:2;flex-wrap:wrap;justify-content:flex-start;align-content:center}
.has-hero-film:not(.vota-v5) .film-chapters{width:100%;gap:3px}
.has-hero-film:not(.vota-v5) .film-chapters button{width:clamp(24px,2.5vw,32px)}
.has-hero-film:not(.vota-v5) .film-mode{grid-column:1;grid-row:3;justify-self:start;align-self:end}
.has-hero-film:not(.vota-v5) .film-footnote{grid-column:1;grid-row:4;align-self:end;font-size:7px;line-height:1.8}
.has-hero-film:not(.vota-v5) .glass-statusbar{margin-bottom:12px}
.has-hero-film:not(.vota-v5) .glass-toolbar{min-height:31px;padding-bottom:10px;margin-bottom:15px}
.has-hero-film:not(.vota-v5) .glass-toolbar img{width:115px}
.has-hero-film:not(.vota-v5) .film-heading{font-size:19px;margin-bottom:11px}
.has-hero-film:not(.vota-v5) .film-screen p{font-size:11px;margin-bottom:10px}
.has-hero-film:not(.vota-v5) .glass-name{font-size:21px;margin:7px 0 10px}
.has-hero-film:not(.vota-v5) .glass-field{margin:4px 0 7px}
.has-hero-film:not(.vota-v5) .glass-field strong{min-height:33px;padding:8px;font-size:12px;margin-top:5px}
.has-hero-film:not(.vota-v5) .glass-status{font-size:8px;padding:8px;margin-top:8px}
.has-hero-film:not(.vota-v5) .glass-action{font-size:10px;min-height:33px;padding:9px}
.has-hero-film:not(.vota-v5) .glass-code{gap:4px;margin:12px 0}
.has-hero-film:not(.vota-v5) .glass-code span{font-size:18px;padding:10px 0}
.has-hero-film:not(.vota-v5) .glass-notification{padding:9px}
.has-hero-film:not(.vota-v5) .glass-notification strong{font-size:11px}
.has-hero-film:not(.vota-v5) .glass-origin{margin-top:10px;padding:9px}
.has-hero-film:not(.vota-v5) .glass-number{font-size:16px}
.site-versions{display:flex;justify-content:flex-end;align-items:center;gap:16px;padding:20px 0;border-top:1px solid var(--line);font:10px 'DM Mono',monospace;flex-wrap:wrap;color:#b7cbc3}
.site-versions a{padding:8px 10px;border:1px solid #cddcd433}
.site-versions a[aria-current="page"]{background:#cddcd4;color:#102a3a;border-color:#cddcd4}
@media(min-width:900px) and (max-width:1099px){
  .vota-v5 .film-info{width:315px;right:20px}
  .vota-v5 .film-caption{width:252px;padding:17px}
  .vota-v5 .film-meta{margin-left:63px}
  .vota-v5 .film-heading{font-size:22px}
  .vota-v5 .film-screen p{font-size:12px}
  .vota-v5 .glass-field strong{font-size:13px;min-height:36px;padding:9px}
  .vota-v5 .glass-toolbar{margin-bottom:16px}
  .has-hero-film:not(.vota-v5) .film-info{grid-template-columns:minmax(0,1fr) 210px;padding:16px;gap:12px}
  .has-hero-film:not(.vota-v5) .film-caption{width:210px;padding:14px}
}
@media(max-width:899px){
  .vota-v5 .film-info{width:auto;right:auto;bottom:auto;margin:220px 22px 25px}
  .vota-v5 .film-caption{width:min(288px,100%);margin:0 auto 18px}
  .vota-v5 .film-meta{margin-left:0}
  .vota-v5 .film-meter{left:0}
  .vota-v5 .hero-film[data-beat="0"] .film-caption,
  .vota-v5 .hero-film[data-beat="7"] .film-caption{display:none}
  .has-hero-film:not(.vota-v5) .film-info{display:flex;flex-direction:column;padding:22px;gap:16px}
  .has-hero-film:not(.vota-v5) .film-caption{width:225px;margin:auto;flex:none}
  .has-hero-film:not(.vota-v5) .film-meta{display:flex;justify-content:space-between;gap:16px;width:100%}
  .has-hero-film:not(.vota-v5) .film-count{margin:0;font-size:10px;white-space:nowrap}
  .has-hero-film:not(.vota-v5) .film-controls{width:100%;flex-wrap:nowrap}
  .has-hero-film:not(.vota-v5) .film-chapters{width:auto}
  .has-hero-film:not(.vota-v5) .film-footnote{align-self:flex-start;margin:0}
  .has-hero-film .film-chapters button{width:30px}
  .site-versions{justify-content:flex-start;gap:10px}
}
@media(max-width:420px){
  .vota-v5 .film-info{margin-inline:16px}
  .has-hero-film .film-controls{gap:4px}
  .has-hero-film .film-chapters button{width:26px;min-height:40px}
  .has-hero-film .film-open{font-size:8px;padding:8px}
}

/* Keep the bounded film inside the pinned viewport at its minimum desktop height. */
@media(min-width:1100px) and (min-height:780px){
 .hero-scrub-active.has-hero-film:not(.vota-v5) .film-media{max-height:calc(var(--hero-height) - 446px)}
}

/* Six chapters and a humanized final scene, with a full-frame humanized closing background. */
.has-hero-film .film-chapters{gap:3px}
.has-hero-film .film-chapters button{width:27px}
.vota-v5 .film-media:after{transition:opacity 1.6s ease}
.vota-v5.film-human-ending .film-media:after{opacity:1}
@media(min-width:900px){
 .vota-v5.film-human-ending .hero-description{max-width:300px;min-height:64px}
 .vota-v5.film-human-ending .hero-actions{gap:12px}
}
@media(max-width:420px){
 .has-hero-film .film-chapters button{width:22px}
}
@media(prefers-reduced-motion:reduce){.vota-v5 .film-media:after{transition:none}}
