/* Reusable film player. Scoped separately from the approved Game Development player. */
.film-player { position:relative; min-width:0; background:#030407; border:1px solid #49445f; }
.film-player [hidden] { display:none !important; }
.film-video-stage { position:relative; min-width:0; }
.film-player video { display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:contain; background:#030407; }
.film-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; width:100%; height:100%; padding:0; border:0; background:linear-gradient(180deg,#07050f60,#090612c9); color:#fff; font:700 16px Inter,Arial,sans-serif; cursor:pointer; box-shadow:inset 0 0 80px #06030a50; }
.film-play-chip { display:inline-flex; align-items:center; gap:12px; padding:18px 28px; border:1px solid #bbafff; background:#1c153bbb; box-shadow:6px 6px 0 #7561ff30; }
.film-play svg { width:23px; height:23px; fill:currentColor; }
.film-play:hover .film-play-chip { background:#7565ff; }
.film-play:disabled { cursor:wait; }
.film-buffering { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); padding:8px 12px; color:#d3ceff; background:#10101de8; font-size:12px; text-align:center; pointer-events:none; }
.film-controls { padding:16px 20px 13px; border-top:1px solid #3b3556; background:linear-gradient(110deg,#17132b,#0d0c16); }
.film-timeline-meta { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:3px; }
.film-time { display:flex; gap:8px; color:#f3f0ff; font:11px/1.5 Consolas,monospace; font-variant-numeric:tabular-nums; }
.film-time-divider,.film-duration { color:#a5a0bd; }
.film-quality { color:#a29ac9; font:9px/1.5 Consolas,monospace; letter-spacing:.12em; text-align:right; }
.film-quality > span { padding:0 6px; color:#8c7aff; }
.film-range { --fill:0%; appearance:none; -webkit-appearance:none; display:block; min-width:0; height:24px; margin:0; padding:0; border:0; background:transparent; cursor:pointer; accent-color:#9382ff; }
.film-range::-webkit-slider-runnable-track { height:4px; border-radius:0; background:linear-gradient(to right,#a495ff 0%,#7460ff var(--fill),#39334f var(--fill),#39334f 100%); }
.film-range::-moz-range-track { height:4px; border-radius:0; background:linear-gradient(to right,#a495ff 0%,#7460ff var(--fill),#39334f var(--fill),#39334f 100%); }
.film-range::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:10px; height:12px; margin-top:-4px; border:1px solid #dcd6ff; border-radius:1px; background:#a89aff; box-shadow:0 0 9px #8067ff50; }
.film-range::-moz-range-thumb { width:8px; height:10px; border:1px solid #dcd6ff; border-radius:1px; background:#a89aff; box-shadow:0 0 9px #8067ff50; }
.film-range:disabled { cursor:default; opacity:.5; }
.film-range:focus-visible { outline:2px solid #b9aaff; outline-offset:1px; }
.film-seek { width:100%; }
.film-control-row { display:flex; align-items:center; gap:14px; margin-top:7px; }
.film-control { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-width:40px; min-height:40px; padding:8px; border:1px solid transparent; background:transparent; color:#dfd9ff; font:600 11px/1.3 Inter,Arial,sans-serif; cursor:pointer; }
.film-control:hover { border-color:#76669e; background:#8b71ff1a; color:#fff; }
.film-control:disabled { cursor:wait; opacity:.6; }
.film-control svg { width:20px; height:20px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:square; stroke-linejoin:miter; }
.film-toggle { justify-content:flex-start; padding-left:0; }
.film-toggle svg { fill:currentColor; stroke:none; }
.film-toggle .icon-pause,.film-mute .icon-silent { display:none; }
.film-toggle.is-playing .icon-play,.film-mute.is-muted .icon-sound { display:none; }
.film-toggle.is-playing .icon-pause,.film-mute.is-muted .icon-silent { display:block; }
.film-restart { white-space:nowrap; }
.film-audio { display:flex; align-items:center; gap:3px; margin-left:auto; }
.film-volume { width:85px; --fill:100%; }
.film-fullscreen { border-left:1px solid #3e3658; margin-left:3px; }
.film-player:fullscreen { display:flex; flex-direction:column; width:100%; height:100%; padding:0; border:0; background:#030407; }
.film-player:fullscreen .film-video-stage { display:flex; align-items:center; flex:1; min-height:0; }
.film-player:fullscreen video { height:100%; max-height:100%; aspect-ratio:auto; }
.film-player:fullscreen .film-controls { flex-shrink:0; width:100%; box-sizing:border-box; padding-bottom:max(13px,env(safe-area-inset-bottom)); }
.film-player :is(a,button,video):focus-visible { outline:2px solid #a99fff; outline-offset:5px; }
.film-video-note { color:#a9a5bc; margin:14px 0 0; font-size:12px; line-height:1.7; }
.film-video-error { color:#ffa6b5; font-size:14px; line-height:1.6; padding:0 16px; }
.film-video-error a { color:inherit; text-decoration:underline; }
@media (max-width:700px) {
  .film-play { font-size:14px; }
  .film-play-chip { padding:12px 20px; }
  .film-controls { padding:11px 12px 9px; }
  .film-control-row { gap:5px; margin-top:3px; }
  .film-control { min-width:40px; min-height:44px; }
  .film-volume { width:60px; height:32px; }
  .film-quality { font-size:8px; letter-spacing:.04em; }
  .film-toggle > span,.film-restart > span { display:none; }
}
@media (max-width:400px) {
  .film-control-row { gap:2px; }
  .film-control { flex-shrink:0; }
  .film-audio { flex:1; min-width:0; max-width:110px; }
  .film-volume { flex:1; width:100%; min-width:0; }
}