/* ===========================================================================
   CyOku — video player skin
   ===========================================================================

   Loaded after video-js.css and 7_quality-selector.css, on the pages that
   actually carry a player. Nothing here changes player behaviour: the quality
   ladder (Auto plus each rendition), playback speed and captions all come from
   video.js and the quality-selector component. This only changes how they look.

   The reference is the player people already know how to use: controls that sit
   on a soft gradient rather than a solid strip, a large round play button, a
   progress bar that is thin until you reach for it, and menus big enough to hit
   on a phone.
   =========================================================================== */

.video-js {
    --cy-player-accent: #2DD4BF;
    --cy-player-h: 3.25rem;

    font-family: var(--cy-font, Inter, system-ui, sans-serif);
    border-radius: 12px;
    overflow: hidden;
    background-color: #05070C;
}

.video-js:focus-visible,
.video-js .vjs-tech:focus-visible { outline: 3px solid var(--cy-player-accent); outline-offset: 2px; }

/* ------------------------------------------------------------ Big play button

   A soft circle in the middle, not the default boxed rectangle. */

.video-js .vjs-big-play-button {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5rem;
    height: 5rem;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(8, 12, 22, .62);
    backdrop-filter: blur(6px) saturate(140%);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
    line-height: 5rem;
    transition: transform .18s ease, background-color .18s ease;
}

.video-js .vjs-big-play-button .vjs-icon-placeholder::before { font-size: 2.4rem; line-height: 5rem; }
.video-js:hover .vjs-big-play-button,
.video-js .vjs-big-play-button:focus {
    background: rgba(8, 12, 22, .78);
    transform: translate(-50%, -50%) scale(1.06);
}

/* --------------------------------------------------------------- Control bar

   Taller than the default, and sitting on a gradient so light video stays
   readable underneath without a hard black band across the picture. */

.video-js .vjs-control-bar {
    height: var(--cy-player-h);
    padding: 0 .5rem;
    align-items: center;
    background: linear-gradient(to top,
                rgba(3, 6, 12, .92) 0%,
                rgba(3, 6, 12, .72) 45%,
                rgba(3, 6, 12, 0) 100%);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

.video-js .vjs-control { width: 2.9rem; }
.video-js .vjs-button > .vjs-icon-placeholder::before { font-size: 1.35rem; line-height: var(--cy-player-h); }
.video-js .vjs-control:hover { color: var(--cy-player-accent); }

/* Fades out while playing and idle, back on the slightest movement. */
.video-js.vjs-user-inactive.vjs-playing .vjs-control-bar { opacity: 0; transition: opacity .4s ease; }
.video-js .vjs-control-bar { transition: opacity .2s ease; }

/* ------------------------------------------------------------- Progress bar

   Thin at rest so it does not fight the picture, thicker with a visible knob
   the moment the pointer is anywhere near it. */

.video-js .vjs-progress-control { align-items: center; min-width: 4rem; height: 100%; }

.video-js .vjs-progress-holder {
    height: .25rem;
    margin: 0 .35rem;
    border-radius: 99px;
    background: rgba(255, 255, 255, .28);
    transition: height .14s ease;
}

.video-js .vjs-progress-control:hover .vjs-progress-holder { height: .45rem; }

.video-js .vjs-play-progress {
    border-radius: 99px;
    background: var(--cy-player-accent);
}

.video-js .vjs-load-progress,
.video-js .vjs-load-progress div {
    border-radius: 99px;
    background: rgba(255, 255, 255, .34);
}

/* The scrubber knob: hidden until the bar is hovered. */
.video-js .vjs-play-progress::before {
    display: block;
    width: .85rem;
    height: .85rem;
    top: -.2rem;
    right: -.42rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
    content: "";
    opacity: 0;
    transition: opacity .14s ease;
}

.video-js .vjs-progress-control:hover .vjs-play-progress::before { opacity: 1; }

.video-js .vjs-time-tooltip,
.video-js .vjs-mouse-display .vjs-time-tooltip {
    padding: .25rem .45rem;
    border-radius: 6px;
    background: rgba(3, 6, 12, .92);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
}

/* ------------------------------------------------------------------- Time */

.video-js .vjs-time-control {
    display: flex;
    align-items: center;
    padding-inline: .25rem;
    min-width: 0;
    font-size: .82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: var(--cy-player-h);
}

.video-js .vjs-current-time,
.video-js .vjs-time-divider,
.video-js .vjs-duration { display: flex; }
.video-js .vjs-remaining-time { display: none; }

/* ----------------------------------------------------------------- Volume */

.video-js .vjs-volume-panel .vjs-volume-control { transition: width .2s ease, opacity .2s ease; }
.video-js .vjs-volume-bar { background: rgba(255, 255, 255, .28); border-radius: 99px; }
.video-js .vjs-volume-level { background: #fff; border-radius: 99px; }

/* ------------------------------------------------------------------ Menus

   Quality (Auto + each rendition), speed and captions. Rounded, translucent,
   and with rows big enough for a thumb. */

.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
    max-height: 17rem;
    padding: .3rem;
    border-radius: 12px;
    background: rgba(8, 12, 22, .94);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
    border: 1px solid rgba(255, 255, 255, .1);
}

.video-js .vjs-menu li.vjs-menu-item {
    padding: .55rem .8rem;
    border-radius: 8px;
    font-size: .84rem;
    font-weight: 600;
    text-transform: none;
    text-align: left;
}

.video-js .vjs-menu li.vjs-menu-item:hover,
.video-js .vjs-menu li.vjs-menu-item:focus {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

/* The chosen row gets a tick as well as a fill, so it is not colour alone. */
.video-js .vjs-menu li.vjs-menu-item.vjs-selected {
    background: rgba(45, 212, 191, .18);
    color: #fff;
}

.video-js .vjs-menu li.vjs-menu-item.vjs-selected::after {
    content: "\2713";
    float: right;
    margin-left: .6rem;
    color: var(--cy-player-accent);
    font-weight: 900;
}

.video-js .vjs-menu li.vjs-menu-title {
    padding: .45rem .8rem .3rem;
    color: #9FB4D2;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .09em;
}

/* Speed and quality read as words, not icons, so what they are set to is
   visible without opening them. */
.video-js .vjs-playback-rate .vjs-playback-rate-value {
    font-size: .82rem;
    font-weight: 800;
    line-height: var(--cy-player-h);
}

.video-js .vjs-playback-rate { width: 3.1rem; }

.video-js .vjs-cyoku-hls-quality-selector,
.video-js .vjs-quality-selector { width: auto; min-width: 3.4rem; }

/* A single-rendition source has no choice to offer, and until the master
   playlist is parsed the menu is empty — either way, do not show a control that
   does nothing. video.js adds vjs-hidden to a menu button with no items. */
.video-js .vjs-cyoku-hls-quality-selector.vjs-hidden,
.video-js .vjs-quality-selector.vjs-hidden { display: none; }

.video-js .vjs-cyoku-hls-quality-selector .vjs-icon-placeholder::before,
.video-js .vjs-quality-selector .vjs-icon-placeholder::before { font-size: 1.25rem; }

/* While a rendition change is in flight. */
.video-js.vjs-quality-changing .vjs-control-bar { opacity: 1; }

/* --------------------------------------------------------------- Loading */

.video-js .vjs-loading-spinner { border-color: rgba(255, 255, 255, .25); border-top-color: var(--cy-player-accent); }

/* ------------------------------------------------------------ Small screens

   Fewer, larger targets: on a phone the time readout and picture-in-picture are
   the first things worth giving up so play, progress, quality and fullscreen
   stay comfortably tappable. */

@media (max-width: 639.98px) {
    .video-js { --cy-player-h: 3rem; }
    .video-js .vjs-time-control,
    .video-js .vjs-time-divider,
    .video-js .vjs-picture-in-picture-control { display: none; }
    .video-js .vjs-control { width: 2.6rem; }
    .video-js .vjs-big-play-button { width: 4rem; height: 4rem; line-height: 4rem; }
    .video-js .vjs-big-play-button .vjs-icon-placeholder::before { font-size: 1.9rem; line-height: 4rem; }
    .video-js .vjs-menu li.vjs-menu-item { padding: .7rem .85rem; font-size: .88rem; }
}

@media (prefers-reduced-motion: reduce) {
    .video-js .vjs-big-play-button,
    .video-js .vjs-progress-holder,
    .video-js .vjs-control-bar { transition: none; }
    .video-js:hover .vjs-big-play-button { transform: translate(-50%, -50%); }
}