/* ── Video player shared styles ── */
#gate{max-width:500px;margin:40px auto;text-align:center;padding:30px 20px}
#gate h2{font-size:1.15rem;margin-bottom:14px}
#gate p{line-height:1.7;margin-bottom:10px;font-size:0.95rem;color:var(--text-muted)}
#gate .btn{display:inline-block;background:#1c1c1c;color:#fff;border:none;padding:14px 36px;font-size:0.85rem;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;border-radius:3px;margin:16px 8px 0;text-decoration:none;transition:background 0.2s}
#gate .btn:hover{background:#333}
#gate .warn{color:#c00;font-size:0.85rem}
.timer-bar{position:fixed;top:64px;left:0;right:0;height:3px;background:#333;z-index:99}
.timer-bar .fill{height:100%;background:#4c4;transition:width 1s linear}
.timer-bar .fill.warn{background:#e0a020}
.timer-bar .fill.danger{background:#d04040}
.video-page{max-width:1000px;margin:0 auto;padding:20px 24px 60px}
.shaka-box{background:#000;border-radius:6px;overflow:hidden;margin-top:16px;position:relative;aspect-ratio:16/9}
.shaka-box video{width:100%;height:100%;display:block;object-fit:contain}
/* Hide native browser video controls */
video::-webkit-media-controls{display:none!important}
video::-webkit-media-controls-panel{display:none!important}
video::-webkit-media-controls-play-button{display:none!important}
video::-webkit-media-controls-start-playback-button{display:none!important}
video::-webkit-media-controls-enclosure{display:none!important}
#err{display:none;background:var(--bg-card);border:1px solid #5c1c1c;color:#e07070;padding:14px 20px;border-radius:4px;margin:16px 0;font-size:0.9rem}
.film-selector{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;justify-content:center}
.film-card{background:var(--bg-card);border:1px solid var(--border-dim);border-radius:6px;padding:16px 20px;cursor:pointer;min-width:180px;text-align:center;transition:border-color 0.2s,background 0.2s}
.film-card:hover{border-color:#888;background:var(--bg-hover)}
.film-card b{display:block;margin-bottom:6px}
.film-status{font-size:0.8rem;line-height:1.5}
.film-status.ok{color:#4a4}
.film-status.warn{color:#d08400}
.film-status.danger{color:#d04040}
.film-status.muted{color:#888}
/* Ensure film cards inside #gate use orange, not overridden by #gate .warn */
#gate .film-status.warn{color:#d08400}
#gate .film-status.danger{color:#d04040}

/* ── Info bar under player ── */
#info-bar{margin-top:8px;font-size:0.82rem}
.info-report-btn{display:inline-block;background:rgba(220,60,60,0.15);border:1px solid rgba(220,60,60,0.35);color:#e07070;padding:3px 10px;border-radius:4px;font-size:0.75rem;text-decoration:none;white-space:nowrap;transition:background 0.15s}
.info-report-btn:hover{background:rgba(220,60,60,0.25);color:#f08080}
.info-line{padding:3px 0;line-height:1.6}
.info-line.info-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.info-line b{color:var(--text)}
.info-line b.warn{color:#d08400}
.info-line b.danger{color:#d04040}
.info-line.muted{color:var(--text-muted)}
.info-line a{color:var(--text-muted)}
.info-line a:hover{color:var(--text)}
.info-line.expired{color:#d04040;font-weight:bold}
.info-sep{border:none;border-top:1px solid var(--border-dim);margin:8px 0}
.info-tips-label{font-size:0.75rem;color:var(--text-muted);margin-bottom:4px}
.info-tips{list-style:none;padding:0;margin:0}
.info-tips li{font-size:0.72rem;color:var(--text-muted);padding:2px 0;line-height:1.5}
.info-tips li::before{content:'• ';color:#666}