/* Player styles. The stage is always dark; the bar and the explore panel follow the page tokens from site.css. */
[hidden] { display: none !important; }
.player { margin: 16px 0; }
#stagewrap { position: relative; width: 100%; aspect-ratio: 16/9; background: var(--stage); border-radius: 10px; overflow: hidden; }
#stage { width: 100%; height: 100%; display: block; }
#stage:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
#caption { position: absolute; left: 4%; right: 4%; bottom: 4%; text-align: center; font-size: clamp(13px, 2.4vw, 28px); line-height: 1.35; padding: 8px 14px; background: rgba(8,11,20,.78); color: #e6ecff; border-radius: 8px; }
#caption:empty { display: none; }
#bigplay { position: absolute; inset: 0; width: 100%; display: flex; align-items: center; justify-content: center; background: rgba(8,11,20,.45); border: 0; border-radius: 0; padding: 0; cursor: pointer; }
#bigplay span { width: clamp(56px, 12vw, 88px); height: clamp(56px, 12vw, 88px); border-radius: 50%; background: #4fd1c5; display: flex; align-items: center; justify-content: center; }
#bigplay svg { width: 40%; height: 40%; fill: #06201d; margin-left: 6%; }
#bigplay:focus-visible span { outline: 3px solid #fff; outline-offset: 3px; }
#bar { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
#seek { flex: 1 1 160px; min-width: 120px; accent-color: var(--accent); touch-action: pan-y; height: 28px; }
#time { color: var(--dim); font-variant-numeric: tabular-nums; min-width: 5.5em; }
#scene { color: var(--dim); }
#motionnote { color: var(--dim); margin: 8px 0 0; font-size: .95em; }
#explore { margin-top: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
#explore .row { display: flex; gap: 14px 18px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
#explore label { color: var(--dim); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#explore input[type=range] { accent-color: var(--accent); width: 180px; max-width: 100%; height: 28px; touch-action: pan-y; }
#explore input[type=text] { font: inherit; color: var(--text); background: var(--stage); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; width: 130px; max-width: 100%; }
#explore .val { color: var(--text); font-variant-numeric: tabular-nums; min-width: 2em; display: inline-block; }
#hint { color: var(--dim); margin: 4px 0 0; }
@media (max-width: 560px) {
  #bar button { flex: 1 1 auto; }
  #time, #scene { min-width: 0; }
  #explore input[type=range] { width: 100%; }
  #explore label { width: 100%; }
}
body.render .site-header, body.render h1, body.render .crumbs, body.render .site-footer, body.render .ep-text, body.render #bar, body.render #caption,
body.render #bigplay, body.render #explore, body.render #motionnote { display: none !important; }
body.render main { max-width: none; padding: 0; margin: 0; }
body.render .player { margin: 0; }
body.render #stagewrap { width: 1280px; height: 720px; border-radius: 0; }