/* Stickman video player (js/sv-player.js): our own controls on top of a plain <video>, no browser controls. */
.svp { --svp-accent: #21c17e; --svp-accent-2: #10794f; position: relative; display: block; background: #000; overflow: hidden; outline: none;
       color: #fff; font: 500 13px/1 'Roboto', 'Poppins', system-ui, sans-serif; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.svp video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.svp.svp-idle { cursor: none; }
/* svp-fill: the player covers its whole stage (a vertical video sits in the middle of a full-width player, over
   whatever backdrop the stage draws) so the controls run the full width */
.svp.svp-fill { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; }
.svp.svp-fill video { position: absolute; inset: 0; background: transparent; }
.svp:focus-visible { box-shadow: inset 0 0 0 3px var(--svp-accent); }

/* shade under the controls */
.svp-shade { position: absolute; inset: auto 0 0 0; height: 140px; pointer-events: none; opacity: 0; transition: opacity .25s;
             background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.28) 55%, transparent); }
.svp-top { position: absolute; inset: 0 0 auto 0; padding: 14px 16px 30px; pointer-events: none; opacity: 0; transition: opacity .25s;
           background: linear-gradient(to bottom, rgba(0,0,0,.55), transparent); font-size: 15px; font-weight: 500;
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svp.svp-show .svp-shade, .svp.svp-show .svp-top, .svp.svp-paused .svp-shade { opacity: 1; }
.svp.svp-fs .svp-top.svp-has { opacity: 0; }
.svp.svp-fs.svp-show .svp-top.svp-has { opacity: 1; }
.svp-top:not(.svp-has) { display: none; }

/* big centre button */
.svp-big { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border: 0; border-radius: 50%; cursor: pointer;
           background: rgba(16,121,79,.92); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.35);
           transition: transform .18s ease, opacity .2s, background .15s; }
.svp-big:hover { background: var(--svp-accent-2); transform: scale(1.06); }
.svp-big svg { width: 34px; height: 34px; margin-left: 4px; }
.svp:not(.svp-paused) .svp-big, .svp.svp-waiting .svp-big { opacity: 0; pointer-events: none; transform: scale(.8); }

/* quick feedback in the middle (play, pause, +10, volume) */
.svp-flash { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(0,0,0,.5);
             display: grid; place-items: center; opacity: 0; pointer-events: none; }
.svp-flash svg { width: 30px; height: 30px; }
.svp-flash.go { animation: svpFlash .55s ease-out; }
@keyframes svpFlash { 0% { opacity: 1; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.35); } }
.svp-skip { position: absolute; top: 50%; margin-top: -26px; padding: 0 16px; height: 52px; border-radius: 26px; background: rgba(0,0,0,.5);
            display: flex; align-items: center; gap: 6px; font-size: 14px; opacity: 0; pointer-events: none; }
.svp-skip.l { left: 12%; } .svp-skip.r { right: 12%; }
.svp-skip.go { animation: svpFlash .6s ease-out; }

/* loading ring */
.svp-spin { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; pointer-events: none;
            border: 4px solid rgba(255,255,255,.18); border-top-color: var(--svp-accent); opacity: 0; transition: opacity .2s; animation: svpSpin .8s linear infinite; }
.svp.svp-waiting .svp-spin { opacity: 1; }
@keyframes svpSpin { to { transform: rotate(360deg); } }

/* the control bar */
.svp-bar { position: absolute; inset: auto 0 0 0; padding: 0 12px 8px; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
.svp.svp-show .svp-bar, .svp.svp-paused .svp-bar { opacity: 1; transform: none; }
.svp-row { display: flex; align-items: center; gap: 2px; height: 44px; }
.svp-btn { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; flex: none; }
.svp-btn:hover { background: rgba(255,255,255,.14); }
.svp-btn:focus-visible { outline: 2px solid var(--svp-accent); outline-offset: 0; }
.svp-btn svg { width: 24px; height: 24px; }
.svp-time { padding: 0 8px; font-variant-numeric: tabular-nums; white-space: nowrap; color: rgba(255,255,255,.92); }
.svp-sp { flex: 1; }
.svp-rate { padding: 0 8px; height: 24px; border-radius: 12px; background: rgba(255,255,255,.18); display: none; align-items: center; font-size: 12px; }
.svp-rate.on { display: inline-flex; }

/* volume: a slider that opens beside the speaker */
.svp-vol { display: flex; align-items: center; }
.svp-vol input { width: 0; opacity: 0; transition: width .2s, opacity .2s; margin: 0; }
.svp-vol:hover input, .svp-vol:focus-within input { width: 72px; opacity: 1; margin: 0 6px 0 2px; }
.svp input[type=range] { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px; cursor: pointer;
                         background: linear-gradient(to right, #fff var(--v, 100%), rgba(255,255,255,.3) var(--v, 100%)); }
.svp input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; }
.svp input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; }

/* the progress track */
.svp-track { position: relative; height: 18px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.svp-rail { position: relative; width: 100%; height: 4px; border-radius: 2px; background: rgba(255,255,255,.22); transition: height .12s; }
.svp-track:hover .svp-rail, .svp-track.drag .svp-rail { height: 6px; }
.svp-buf, .svp-hov, .svp-done { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; transform-origin: left; transform: scaleX(0); width: 100%; }
.svp-buf { background: rgba(255,255,255,.35); }
.svp-hov { background: rgba(255,255,255,.4); opacity: 0; }
.svp-track:hover .svp-hov { opacity: 1; }
.svp-done { background: linear-gradient(90deg, var(--svp-accent-2), var(--svp-accent)); }
.svp-knob { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--svp-accent);
            box-shadow: 0 0 0 3px rgba(33,193,126,.25); transform: scale(0); transition: transform .12s; }
.svp-track:hover .svp-knob, .svp-track.drag .svp-knob, .svp-track:focus-visible .svp-knob { transform: scale(1); }
.svp-track:focus-visible { outline: none; }
.svp-track:focus-visible .svp-rail { box-shadow: 0 0 0 2px var(--svp-accent); }
.svp-tip { position: absolute; bottom: 22px; left: 0; padding: 4px 8px; border-radius: 6px; background: rgba(15,15,15,.9); font-size: 12px; font-variant-numeric: tabular-nums;
           transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity .12s; white-space: nowrap; }
.svp-track:hover .svp-tip, .svp-track.drag .svp-tip { opacity: 1; }

/* settings menu */
.svp-menu { position: absolute; right: 12px; bottom: 58px; min-width: 220px; padding: 8px 0; border-radius: 12px; background: rgba(28,28,28,.94);
            backdrop-filter: blur(8px); box-shadow: 0 10px 40px rgba(0,0,0,.4); font-size: 14px; display: none; }
.svp-menu.open { display: block; animation: svpMenu .14s ease-out; }
@keyframes svpMenu { from { opacity: 0; transform: translateY(6px); } }
.svp-menu button { width: 100%; height: 40px; padding: 0 16px; border: 0; background: transparent; color: #fff; font: inherit; display: flex; align-items: center; gap: 12px; cursor: pointer; text-align: left; }
.svp-menu button:hover, .svp-menu button:focus-visible { background: rgba(255,255,255,.1); outline: none; }
.svp-menu button svg { width: 20px; height: 20px; flex: none; }
.svp-menu .v { margin-left: auto; color: rgba(255,255,255,.7); }
.svp-menu .head { color: rgba(255,255,255,.7); }
.svp-menu .ok { margin-left: auto; color: var(--svp-accent); }
.svp-sw { margin-left: auto; width: 34px; height: 18px; border-radius: 9px; background: rgba(255,255,255,.3); position: relative; transition: background .15s; }
.svp-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s; }
.svp-sw.on { background: var(--svp-accent-2); }
.svp-sw.on::after { transform: translateX(16px); }
.svp-toast { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); padding: 8px 14px; border-radius: 8px; background: rgba(15,15,15,.9); font-size: 13px;
             opacity: 0; transition: opacity .2s; pointer-events: none; }
.svp-toast.on { opacity: 1; }

/* fullscreen */
.svp.svp-fs { width: 100% !important; height: 100% !important; max-width: none !important; aspect-ratio: auto !important; border-radius: 0 !important; }

/* phones: bigger touch targets, no hover-only volume slider */
@media (hover: none) {
  .svp-vol input { display: none; }
  .svp-knob { transform: scale(1); }
}
@media (max-width: 480px) {
  .svp-btn { width: 36px; height: 36px; }
  .svp-big { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
}
@media (prefers-reduced-motion: reduce) {
  .svp-shade, .svp-top, .svp-bar, .svp-big, .svp-knob { transition: none; }
  .svp-flash.go, .svp-skip.go, .svp-menu.open { animation: none; }
}