.film-player{display:flex;flex-direction:column;gap:12px;padding:20px;background:#17251d;min-width:0}
.hero-stage{position:relative;flex:1;min-height:0;touch-action:pan-y}
.film-player .hero-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:0;box-shadow:none;background:#17251d}
.film-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;color:white}
.film-toolbar[hidden]{display:none}
.film-toolbar button,.film-download{min-height:44px;border:1px solid #829087;border-radius:22px;padding:9px 12px;background:transparent;color:white;font:14px/1.2 Arial,sans-serif;cursor:pointer;text-decoration:none}
.film-toolbar button:hover,.film-download:hover{background:#344f3c}
.film-counter{font:14px Arial,sans-serif;min-width:42px;text-align:center}
.film-thumbnails{display:flex;gap:8px;overflow-x:auto;flex-shrink:0;padding:4px;scrollbar-width:thin}
.film-thumbnails button{flex:0 0 48px;padding:2px;background:transparent;border:2px solid transparent;border-radius:5px;cursor:pointer}
.film-thumbnails button[aria-current=true]{border-color:#f1d5ad}
.film-player .film-thumbnails img{display:block;width:40px;height:65px;object-fit:cover;border-radius:2px}
.film-player button:focus-visible,.film-download:focus-visible{outline:3px solid #f1d5ad;outline-offset:2px}
.film-feedback{margin:0;color:white;font-size:14px;text-align:center}
.film-feedback:empty{display:none}
.film-share-url{width:100%;font-size:14px}
@media(min-width:801px){.film-player{height:calc(100svh - 68px);min-height:650px}}
@media(max-width:800px){.film-player{height:auto;max-height:none;aspect-ratio:auto;padding:16px;min-height:0}.hero-stage{flex:none;height:min(65svh,155vw)}.film-toolbar{gap:6px}}
/* Desktop only: a close-fitting muddy yellow frame for every film. */
@media(min-width:801px){
  .film-player{--film-height:min(68svh,calc(100svh - 160px));height:auto;min-height:0;width:min(420px,calc(100% - 32px));padding:0;margin:0 auto 24px;position:relative;top:0;align-self:start;background:transparent;overflow:visible}
  .hero-stage{flex:none;width:min(100%,calc(var(--film-height) * var(--film-ratio,0.56206) + 16px));max-width:100%;margin:0 auto;border:8px solid #b49a50;box-sizing:border-box;background:#b49a50}
  .film-player .hero-stage video{position:static;display:block;width:100%;height:auto;max-width:100%;max-height:var(--film-height);background:transparent}
  .film-toolbar,.film-feedback{color:#24211e}
  .film-toolbar button,.film-download{color:#24211e;border-color:#b49a50}
  .film-toolbar button:hover,.film-download:hover{background:#e6d9af}
  .film-thumbnails button[aria-current=true]{border-color:#b49a50}
  .film-player button:focus-visible,.film-download:focus-visible{outline-color:#6e2638}
}