/*
 * OpenVibe player (player.js): the network's one look for <video>. Colours follow the site's theme (--accent, the
 * live red); everything else is the player's own, so it looks the same on every OpenVibe site.
 */
.ov-player {
    --ovp-accent: var(--accent, #3b82f6);
    --ovp-fg: #fff;
    --ovp-muted: rgba(255, 255, 255, 0.72);
    --ovp-track: rgba(255, 255, 255, 0.24);
    --ovp-buffer: rgba(255, 255, 255, 0.38);
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: var(--ovp-bg, #000);
    color: var(--ovp-fg);
    border-radius: inherit;
    overflow: hidden;
    font: 600 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    isolation: isolate;
}
.ov-player:focus-visible { box-shadow: 0 0 0 2px var(--ovp-accent) inset; }
.ov-player .ov-player-video { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; background: transparent; opacity: 0; transition: opacity 0.35s ease; }
/* Loading in layers (player.js): the average colour (--ovp-bg), a tiny preview blurred, the poster, then the first frame. */
.ov-player.has-frame .ov-player-video, .ov-player:not(.has-thumb):not(.has-poster) .ov-player-video { opacity: 1; }
.ov-player-placeholder, .ov-player-poster { position: absolute; inset: 0; z-index: 0; background: center / contain no-repeat; pointer-events: none; }
.ov-player-placeholder { background-size: cover; filter: blur(18px) saturate(1.2); transform: scale(1.12); opacity: 0.9; }
.ov-player-poster { opacity: 0; transition: opacity 0.35s ease; }
.ov-player.has-poster .ov-player-poster { opacity: 1; }
.ov-player.has-frame .ov-player-placeholder, .ov-player.has-poster .ov-player-placeholder { opacity: 0; transition: opacity 0.5s ease; }
/* An audio-only recording (no picture track; plan R4, 2026-11-01): the streamer's face over a soft blur of it, never a
   black box. The video element stays (it plays the sound) but shows nothing; the controls sit above as always. A sound
   file has no picture size, so the player keeps the 16:9 a video would have (the browser's default is 150 px tall). */
.ov-player-audio { position: absolute; inset: 0; z-index: 1; display: none; place-items: center; overflow: hidden; background: var(--ovp-bg, #0b1220); pointer-events: none; }
.ov-player.is-audio .ov-player-audio { display: grid; }
.ov-player.is-audio { aspect-ratio: 16 / 9; }
.ov-player.is-audio .ov-player-video { position: absolute; inset: 0; height: 100%; opacity: 0 !important; }
.ov-player-audio-bg { position: absolute; inset: -15%; width: 130%; height: 130%; object-fit: cover; filter: blur(28px) saturate(1.15); opacity: .5; }
.ov-player-audio-face { position: relative; width: clamp(72px, 22%, 168px); aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px rgb(255 255 255 / .12), 0 12px 32px rgb(0 0 0 / .4); }
.ov-player-audio-glyph { position: relative; display: grid; place-items: center; width: clamp(64px, 16%, 112px); aspect-ratio: 1; border-radius: 50%; background: rgb(255 255 255 / .1); color: #fff; }
.ov-player-audio-glyph svg { width: 44%; height: 44%; }
.ov-player-audio-tag { position: absolute; top: 12px; right: 12px; padding: 4px 10px; border-radius: 999px; background: rgb(0 0 0 / .55); color: #fff; font: 600 12px/1.4 system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: .02em; }

/* Ambient glow (data-ov-ambient): the picture, blurred, behind and around the player. */
.ov-player-host { position: relative; isolation: isolate; }
.ov-player-host > .ov-player { z-index: 1; }
.ov-player-ambient { position: absolute; inset: -4% -3%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 0.8s ease; transform: translateZ(0); }
.ov-player-ambient.is-on { opacity: 0.62; }
:root[data-theme-mode="light"] .ov-player-ambient.is-on { opacity: 0.38; }
.ov-player-ambient canvas { position: absolute; inset: 0; width: 100%; height: 100%; filter: blur(48px) saturate(1.5); opacity: 0; transition: opacity 1.1s ease; border-radius: 24px; }
.ov-player-ambient canvas.is-front { opacity: 1; }
.ov-player.is-idle { cursor: none; }

/* The bar: a soft gradient from the bottom; hidden while playing and idle. */
.ov-player-bar {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
    padding: 44px 10px 6px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.62) 42%, rgba(0, 0, 0, 0.22) 75%, transparent 100%);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;   /* the gradient is backdrop: only the controls take the pointer */
}
.ov-player-bar > * { pointer-events: auto; }
.ov-player.is-idle .ov-player-bar, .ov-player.is-idle .ov-player-bar > * { opacity: 0; pointer-events: none; }
.ov-player.is-idle .ov-player-bar { transform: translateY(6px); }

/* Scrubber: buffered, played and a thumb in the theme's accent; the time under the pointer above it. */
.ov-player-scrub { position: relative; height: 16px; display: flex; align-items: center; cursor: pointer; touch-action: none; outline: none; }
.ov-player-track { position: relative; width: 100%; height: 4px; border-radius: 2px; background: var(--ovp-track); transition: height 0.12s; }
.ov-player-scrub:hover .ov-player-track, .ov-player.is-scrubbing .ov-player-track, .ov-player-scrub:focus-visible .ov-player-track { height: 6px; }
.ov-player-buffered, .ov-player-played { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; width: 0; }
.ov-player-buffered { background: var(--ovp-buffer); }
.ov-player-played { background: var(--ovp-accent); }
.ov-player-played::after {
    content: ''; position: absolute; right: -6px; top: 50%;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--ovp-accent); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    transform: translateY(-50%) scale(0); transition: transform 0.12s;
}
.ov-player-scrub:hover .ov-player-played::after, .ov-player.is-scrubbing .ov-player-played::after,
.ov-player-scrub:focus-visible .ov-player-played::after { transform: translateY(-50%) scale(1); }
.ov-player-scrub:focus-visible .ov-player-track { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); }
.ov-player-hover {
    position: absolute; bottom: 18px; transform: translateX(-50%);
    padding: 4px 7px; border-radius: 6px; background: rgba(0, 0, 0, 0.85);
    font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity 0.1s;
}
.ov-player-scrub:hover .ov-player-hover, .ov-player.is-scrubbing .ov-player-hover { opacity: 1; }

/* The row of controls. */
.ov-player-row { display: flex; align-items: center; gap: 2px; margin-top: 2px; }
.ov-player-spacer { flex: 1; }
.ov-player-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 6px;
    background: none; border: 0; border-radius: 8px;
    color: var(--ovp-fg); font: inherit; cursor: pointer;
    opacity: 0.92; transition: background 0.15s, opacity 0.15s;
}
.ov-player-btn:hover { opacity: 1; background: rgba(255, 255, 255, 0.14); }
.ov-player-btn:active { transform: scale(0.9); }
.ov-player-btn { transition: background 0.15s, opacity 0.15s, transform 0.08s ease; }
.ov-player-btn svg { width: 24px; height: 24px; }
.ov-player-btn svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
.ov-player-btn:focus-visible { outline: 2px solid var(--ovp-accent); outline-offset: 1px; opacity: 1; }
.ov-player-btn[hidden] { display: none; }
.ov-player-cc.is-on { color: var(--ovp-accent); }
.ov-player-cc.is-on svg { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ovp-accent) 60%, transparent)); }
/* Audio description: the two letters are the icon; on, it carries the same accent as captions. */
.ov-player-ad { min-width: 40px; font: 700 12.5px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: 0.02em; }
.ov-player-ad.is-on { color: var(--ovp-accent); background: color-mix(in srgb, var(--ovp-accent) 18%, transparent); }
.ov-player-speed { font-size: 12.5px; font-variant-numeric: tabular-nums; min-width: 44px; }
.ov-player-time { padding: 0 8px; color: rgba(255, 255, 255, 0.86); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }

/* Volume: the slider opens beside the button on hover or focus. */
.ov-player-volume { display: flex; align-items: center; }
.ov-player-volume-slider {
    -webkit-appearance: none; appearance: none;
    width: 0; height: 22px; margin: 0; padding: 0; opacity: 0;
    background: transparent; cursor: pointer;
    transition: width 0.2s ease, opacity 0.2s ease, margin 0.2s ease;
    --ovp-fill: 100%;
}
.ov-player-volume:hover .ov-player-volume-slider, .ov-player-volume-slider:focus-visible, .ov-player-volume:focus-within .ov-player-volume-slider {
    width: 76px; opacity: 1; margin: 0 6px 0 2px;
}
.ov-player-volume-slider::-webkit-slider-runnable-track {
    height: 4px; border-radius: 2px;
    background: linear-gradient(to right, #fff var(--ovp-fill), var(--ovp-track) var(--ovp-fill));
}
.ov-player-volume-slider::-moz-range-track { height: 4px; border-radius: 2px; background: var(--ovp-track); }
.ov-player-volume-slider::-moz-range-progress { height: 4px; border-radius: 2px; background: #fff; }
.ov-player-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; margin-top: -4px;
    width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0;
}
.ov-player-volume-slider::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; }

/* Playing muted (autoplay): one tap brings the sound in. */
.ov-player-unmute {
    position: absolute; left: 12px; top: 12px; z-index: 5;
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px;
    border: 0; border-radius: 999px; background: rgba(0, 0, 0, 0.66); color: #fff;
    font: 650 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; cursor: pointer;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
    animation: ov-player-pop 0.3s ease-out both;
}
.ov-player-unmute svg { width: 18px; height: 18px; }
.ov-player-unmute:hover, .ov-player-unmute:focus-visible { background: var(--ovp-accent); outline: none; }
.ov-player-unmute[hidden] { display: none; }
@keyframes ov-player-pop { from { opacity: 0; transform: translateY(-4px) scale(0.96); } }

/* A seek or a volume level, shown for a moment (double tap, keys). */
.ov-player-flash {
    position: absolute; left: 50%; top: 50%; z-index: 4; transform: translate(-50%, -50%) scale(0.9);
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 16px; min-width: 76px;
    border-radius: 18px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 13px; font-variant-numeric: tabular-nums;
    opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease;
}
.ov-player-flash.is-left { left: 22%; }
.ov-player-flash.is-right { left: 78%; }
.ov-player-flash.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ov-player-flash svg { width: 30px; height: 30px; }

/* Paused before the first play, or ended: one large button in the middle. */
.ov-player-big {
    position: absolute; left: 50%; top: 50%; z-index: 4;   /* above the bar on small players */
    width: 68px; height: 68px; border-radius: 50%;
    transform: translate(-50%, -50%);
    background: color-mix(in srgb, var(--ovp-accent) 88%, transparent);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), 0 0 0 6px color-mix(in srgb, var(--ovp-accent) 22%, transparent);
    opacity: 1;
    transition: transform 0.15s ease, background 0.15s ease, opacity 0.2s ease;
}
.ov-player-big:active { transform: translate(-50%, -50%) scale(0.94); }
.ov-player-big svg { width: 32px; height: 32px; }
.ov-player-big:hover { background: var(--ovp-accent); transform: translate(-50%, -50%) scale(1.06); }
.ov-player:not(.is-start):not(.is-ended) .ov-player-big { opacity: 0; pointer-events: none; }

/* Buffering: three dots hopping in turn over the picture (nothing spins). */
.ov-player-spinner { position: relative; display: inline-block; width: 8px; height: 8px; margin: 0 14px; border: 0; border-radius: 50%; background: #fff; animation: ov-player-hop 1s ease-in-out .15s infinite; }
.ov-player-spinner::before, .ov-player-spinner::after { content: ''; position: absolute; top: 0; width: 8px; height: 8px; border-radius: 50%; background: inherit; animation: ov-player-hop 1s ease-in-out infinite; }
.ov-player-spinner::before { left: -14px; } .ov-player-spinner::after { left: 14px; animation-delay: .3s; }
@keyframes ov-player-hop { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-5px); opacity: 1; } }
.ov-player-spinner { position: absolute; left: 50%; top: 50%; z-index: 2; margin: -4px 0 0 -4px; display: none; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .5)); }
.ov-player.is-waiting:not(.is-paused) .ov-player-spinner { display: block; }
html[data-ov-motion=off] .ov-player-spinner,html[data-ov-motion=off] .ov-player-spinner::before,html[data-ov-motion=off] .ov-player-spinner::after{opacity: .8}
/* Touch screens: the slider shows, finger-sized, wherever the page can set the volume (.can-volume: Android). An iPhone
   leaves volume to its own buttons, so there the mute button stays alone. */
@media (hover: none) {
    .ov-player-volume-slider { display: none; }
    .ov-player.can-volume .ov-player-volume-slider { display: block; width: 84px; height: 36px; opacity: 1; margin: 0 8px 0 0; }
    .ov-player.can-volume .ov-player-volume-slider::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -7px; }
    .ov-player.can-volume .ov-player-volume-slider::-moz-range-thumb { width: 18px; height: 18px; }
}
@media (hover: none) and (max-width: 360px) { .ov-player.can-volume .ov-player-volume-slider { width: 64px; } }
/* No sound track: no slider, a dimmed speaker that says so when tapped. */
.ov-player.is-silent .ov-player-volume-slider { display: none; }
.ov-player.is-silent .ov-player-mute { opacity: 0.55; }

.ov-player-message:empty { display: none; }
.ov-player-message {
    position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%);
    padding: 10px 14px; border-radius: 10px; background: rgba(0, 0, 0, 0.8); font-weight: 500;
}

/* Captions sit above the bar while it shows. */
.ov-player .ov-player-video::cue { background: rgba(0, 0, 0, 0.72); color: #fff; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* An audio description cue: shown over the picture, in its own band above the controls, while it is spoken. */
.ov-player-ad-line {
    position: absolute; left: 50%; bottom: 70px; z-index: 3; transform: translateX(-50%);
    max-width: min(86%, 720px); padding: 6px 12px; border-radius: 8px;
    background: rgba(0, 0, 0, 0.72); color: #fff; text-align: center;
    font: 500 13px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); pointer-events: none;
    opacity: 0; transition: opacity 0.15s ease;
}
.ov-player-ad-line:not(:empty) { opacity: 1; }
@media (max-width: 520px) { .ov-player-ad-line { bottom: 58px; font-size: 12px; } }

/* Small players and phones: fewer, larger targets. */
@media (max-width: 520px) {
    .ov-player-speed, .ov-player-pip { display: none; }
    .ov-player-btn { min-width: 40px; height: 40px; }
    .ov-player-unmute { left: 8px; top: 8px; padding: 7px 12px 7px 9px; }
    .ov-player-time { padding: 0 4px; font-size: 12px; }
    .ov-player-big { width: 60px; height: 60px; }
}

/* One control bar across OpenVibe (11-09, with Live's: the owner asked for buttons "better sized and centred"): 40 px
   square buttons (44 on a touch screen) with the icon centred at 22 px; readouts as glass chips. */
.ov-player-btn { width: 40px; min-width: 40px; height: 40px; padding: 0; border-radius: 12px; display: inline-grid; place-items: center; }
.ov-player-btn svg { width: 22px; height: 22px; display: block; }
@media (pointer: coarse) { .ov-player-btn { width: 44px; min-width: 44px; height: 44px; } }
.ov-player-time { height: 28px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Phones (ask 288): one row that never runs off the screen. Last in the file, because the bar's sizing block above
   would otherwise win over the phone rules: speed and picture-in-picture step out, the volume slider is shorter, under
   380 px the mute button stands alone (a phone's own buttons set the volume) and under 360 px the time shows the
   position alone (the scrubber has the length). Measured at 390 px: play, mute, slider, time, captions, fullscreen fit.
@media (max-width: 520px) {
    .ov-player-speed, .ov-player-pip { display: none; }
    .ov-player-time { padding: 0 8px; font-size: 12px; }
    .ov-player.can-volume .ov-player-volume-slider { width: 64px; margin-right: 2px; }
}
@media (max-width: 380px) { .ov-player.can-volume .ov-player-volume-slider { display: none; } }
@media (max-width: 360px) { .ov-player-dur { display: none; } }