/* public/player/scene-player.css — control bar of the narrated HTML videos (CLEAR Navigator v2.20).
   Same design as the narrated tour (demo/demo.css): dark panel, gradient play button,
   one segment per scene. All classes start with sp- so a video page's own styles never clash. */
.sp-ctl{--sp-panel:#1f252d;--sp-line:#2e3640;--sp-tx:#e9edf2;--sp-mut:#9aa5b1;--sp-grad:linear-gradient(120deg,#7F77DD,#DA6E26);
  flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:8px 16px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--sp-line);background:var(--sp-panel);color:var(--sp-tx);position:relative;z-index:20;
  font-family:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased}
.sp-ctl button{font-family:inherit;cursor:pointer}
.sp-ctl button:focus-visible,.sp-big:focus-visible{outline:2.5px solid #8fb5e3;outline-offset:2px}
.sp-cb{flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:0;background:transparent;color:var(--sp-tx);display:flex;align-items:center;justify-content:center;padding:0}
.sp-cb:hover{background:rgba(255,255,255,.08)}
.sp-cb[hidden]{display:none}
.sp-cb svg{width:20px;height:20px;max-width:none}
.sp-play{background:var(--sp-grad)}
.sp-play:hover{background:var(--sp-grad);opacity:.92}
.sp-ctl .sp-i-pause{display:none}
.sp-ctl[data-state="playing"] .sp-i-play{display:none}
.sp-ctl[data-state="playing"] .sp-i-pause{display:block}
.sp-bar{flex:1;display:flex;gap:3px;min-width:0;margin:0 6px}
.sp-seg{flex:1 1 0;min-width:0;background:transparent;border:0;padding:6px 0 2px;text-align:left;color:var(--sp-mut)}
.sp-seg i{display:block;height:5px;border-radius:3px;background:#39424d;overflow:hidden;position:relative}
.sp-seg i b{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--sp-grad);border-radius:3px}
.sp-seg span{display:block;font-size:10.5px;font-weight:600;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-seg.cur span{color:#fff}
.sp-seg:hover i{background:#4a5461}
.sp-time{flex:0 0 auto;font-size:11.5px;color:var(--sp-mut);font-variant-numeric:tabular-nums;min-width:74px;text-align:right}
.sp-voice .sp-i-voff,.sp-voice.off .sp-i-von{display:none}
.sp-voice.off .sp-i-voff{display:block}
.sp-cb.off{color:var(--sp-mut)}

/* big play button over the stage (paused, ready, ended) */
.sp-big{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;border:0;padding:0;
  background:linear-gradient(120deg,#7F77DD,#DA6E26);color:#fff;display:none;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 10px 34px rgba(0,0,0,.3);z-index:30}
.sp-big svg{margin-left:4px;width:34px;height:34px;max-width:none}
[data-sp="paused"]>.sp-big,[data-sp="ended"]>.sp-big{display:flex}
.sp-credit{position:absolute;left:0;right:0;bottom:10px;margin:0;text-align:center;font-size:11px!important;line-height:1.4;color:#8b95a1;z-index:30;pointer-events:none}
.sp-credit[hidden]{display:none}

@media (max-width:760px){
  .sp-seg span{display:none}
  .sp-seg{padding:10px 0}
  .sp-ctl{padding:6px 10px calc(8px + env(safe-area-inset-bottom));gap:2px}
  .sp-time{min-width:0;font-size:11px}
}