/* Scoped player surfaces do not change the surrounding site layout. */
[data-film-slot] { scroll-margin-top: 100px; }
.film-player { width: 100%; color: #f5f2e9; background: #141915; border: 1px solid #476153; border-radius: 8px; overflow: hidden; }
.film-player[hidden], .film-player [hidden] { display: none !important; }
.film-player-bar { display: flex; align-items: center; gap: 16px; justify-content: space-between; padding: 12px 16px; }
.film-player .film-player-title { color: #f5f2e9; font-size: 15px; font-weight: 600; margin: 0; }
.film-viewport { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #101311; }
.film-canvas, .film-player-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.film-canvas { touch-action: none; cursor: grab; }
.film-canvas:active { cursor: grabbing; }
.film-player-poster { pointer-events: none; z-index: 1; }
.film-player button { appearance: none; font: inherit; font-size: 13px; font-weight: 600; color: #fff; background: #263d31; border: 1px solid #729681; border-radius: 4px; padding: 10px 14px; min-width: 48px; min-height: 48px; cursor: pointer; }
.film-player button:disabled { opacity: .65; cursor: wait; }
.film-player button:hover { background: #315540; }
.film-player button:focus-visible, .film-player input:focus-visible, .film-canvas:focus-visible { outline: 3px solid #b5ebc9; outline-offset: -3px; }
.film-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 0 16px 12px; }
.film-seek-label { display: flex; align-items: center; gap: 8px; flex: 1 1 200px; color: #eee9dc; font-size: 12px; }
.film-player .film-seek { width: 100%; min-width: 96px; min-height: 48px; margin: 0; accent-color: #b5ebc9; cursor: pointer; }
.film-time { color: #f5f2e9; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.film-player .film-instructions, .film-player .film-status { color: #eee9dc; font-size: 13px; line-height: 1.6; margin: 0; padding: 10px 16px; }
.film-player .film-status:empty { padding: 0; }
.film-player .film-credit { color: #c8d0c9; font-size: 10px; margin: 0; padding: 12px 16px; }
.film-dialog { position: fixed; inset: 0; padding: 0; margin: auto; border: 0; width: min(1100px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 24px); overflow: auto; background: #141915; color: #fff; border-radius: 8px; }
.film-dialog::backdrop { background: rgb(0 0 0 / .84); }
.film-dialog .film-viewport { max-height: 64dvh; }
.film-route-main { max-width: 1100px; margin: 140px auto 60px; padding: 0 24px; }
.film-route-main h1 { max-width: 780px; }
.film-route-main > p { max-width: 700px; margin: 20px 0; }
.film-route-poster { position: relative; display: block; margin-top: 32px; color: white; border-radius: 8px; overflow: hidden; background: #151d17; }
.film-route-poster[hidden] { display: none; }
.film-route-poster img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.film-route-poster span { position: absolute; bottom: 24px; left: 24px; background: #0a6e5f; padding: 14px 22px; border-radius: 4px; font-weight: 600; }
.film-route-footer { padding: 20px 24px 40px; max-width: 1100px; margin: auto; font-size: 13px; }
.film-route-footer a { color: var(--teal); text-decoration: underline; }
@media (max-width: 767px) {
  .film-dialog { inset: 0; margin: 0; width: 100%; height: 100dvh; max-height: none; border-radius: 0; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .film-dialog .film-player { min-height: 100%; border: 0; border-radius: 0; }
  .film-dialog .film-viewport { aspect-ratio: 4 / 3; max-height: 52dvh; }
  .film-player-bar, .film-controls { padding-left: 12px; padding-right: 12px; }
  .film-seek-label { flex-basis: 55%; }
  .film-player button { padding: 10px 12px; }
  .film-route-main { margin-top: 118px; padding: 0 16px; }
  .film-route-poster span { left: 12px; bottom: 12px; padding: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) { .film-player *, .film-dialog { scroll-behavior: auto; transition: none; animation: none; } }