/* Uni Derby video player: pixel panel, 9-slice art buttons, a track of art pixels. No autoplay. */
.dv{padding:16px}
.dv-screen{position:relative;aspect-ratio:16/9;background:var(--ink);border:4px solid var(--ink);cursor:pointer}
.dv-screen video{display:block;width:100%;height:100%;object-fit:contain;background:var(--ink)}
.dv-big{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);min-width:220px}
.dv-big:active:not(:disabled){transform:translate(-50%,calc(-50% + 4px))}
.dv-bar{display:flex;align-items:center;gap:12px;margin-top:12px}
.dv-b{height:48px;min-width:96px;font-size:25px}
.dv-b.on{border-image-source:url(/assets/art/ui/btn-gold.png)}
.dv-track{position:relative;flex:1;height:24px;background:var(--lilac);border:4px solid var(--ink);cursor:pointer;touch-action:none}
.dv-buf{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--mid)}
.dv-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--gold)}
.dv-knob{position:absolute;top:-10px;width:16px;height:36px;margin-left:-8px;left:0;background:var(--white);border:4px solid var(--ink)}
.dv-track:focus-visible{outline:4px solid var(--gold-2);outline-offset:2px}
.dv-time{min-width:120px;text-align:center;white-space:nowrap}
.dv-note{margin-top:10px;color:var(--ink)}
.dv:fullscreen{display:flex;flex-direction:column;justify-content:center;background:var(--ink);border:0;padding:16px}
.dv:fullscreen .dv-screen{flex:1;aspect-ratio:auto}
.dv:fullscreen .dv-note{display:none}
@media (max-width:639px){
  .dv{padding:8px}
  .dv-bar{flex-wrap:wrap;gap:8px}
  .dv-track{order:-1;flex:1 1 100%}
  .dv-time{min-width:0;margin-right:auto}
  .dv-b{min-width:0;height:44px;padding:0 4px}
  .dv-big{min-width:160px;height:64px;font-size:39px}
}
.dv-sec{margin-top:32px}.dv-h{font-size:39px;-webkit-text-stroke:6px var(--ink)}