/* Transport controls drawn ON the video (watch page, search scene player).
   Markup: <div class="video-frame" data-vframe> <video/> <div class="vctl"> … </div> </div>
   video-controls.js sets data-vctl="off" on the frame while the video plays and nobody is touching it. */

.vctl {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .35rem;
    padding: .5rem .65rem .45rem;
    color: #fff;
    background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .82));
    pointer-events: none; /* the picture stays clickable; only the controls take clicks */
    opacity: 1;
    transition: opacity .2s ease;
}

    .vctl > * { pointer-events: auto; }

[data-vctl="off"] > .vctl { opacity: 0; }
    [data-vctl="off"] > .vctl * { pointer-events: none; }
[data-vctl="off"] video { cursor: none; }

.vctl-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .5rem;
}

.vctl-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
}

.vctl-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .vctl-btn svg { width: 20px; height: 20px; }
    .vctl-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .22); }
    .vctl-btn:active:not(:disabled) { transform: scale(.92); }
    .vctl-btn:disabled { opacity: .35; cursor: not-allowed; }
    .vctl-btn:focus-visible { outline: 3px solid #ffcc00; outline-offset: 1px; }

    .vctl-btn.play {
        width: 46px;
        height: 46px;
        font-size: 1.7rem;
        background: rgba(255, 255, 255, .95);
        color: #111;
    }

        .vctl-btn.play svg { width: 24px; height: 24px; }
        .vctl-btn.play:hover:not(:disabled) { background: #ffcc00; }

    .vctl-btn.small { width: 34px; height: 34px; font-size: 1rem; }

.vctl-time {
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-shadow: 0 1px 2px #000;
}

.vctl-side {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .4rem;
    min-width: 0;
}

/* Seek bar (filled by watch-player.js; ticks = marked lines). */
.vctl-seek {
    position: relative;
    height: 6px;
    margin: 0 .15rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .35);
    cursor: pointer;
    transition: height .12s ease;
}

    /* A taller invisible strip, so the thin bar is easy to hit. */
    .vctl-seek::before { content: ""; position: absolute; inset: -9px 0; }
    .vctl-seek:hover { height: 8px; }

.vctl-seek-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: #ffcc00;
}

.vctl-seek-ticks { position: absolute; inset: -3px 0; pointer-events: none; }

    .vctl-seek-ticks .tick {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 3px;
        margin-left: -1.5px;
        border-radius: 2px;
        background: #ff5a67;
    }

/* No video in the frame (a study pack): only previous / next, as arrows at the two sides. */
.vctl.nav-only { background: none; }

    .vctl.nav-only .vctl-buttons {
        position: absolute;
        inset: 0 .4rem;
        justify-content: space-between;
        pointer-events: none;
    }

    .vctl.nav-only .vctl-btn { pointer-events: auto; background: rgba(0, 0, 0, .6); }
        .vctl.nav-only .vctl-btn:hover:not(:disabled) { background: rgba(0, 0, 0, .8); }

/* Phones: the picture is small, so the buttons sit in its middle with full-size touch targets,
   and only the seek bar, the time and full screen stay along the bottom. */
@media (max-width: 575.98px) {
    .vctl:not(.nav-only) {
        padding: .4rem .5rem .35rem;
        background: linear-gradient(180deg, rgba(0, 0, 0, .32) 0, rgba(0, 0, 0, .32) 60%, rgba(0, 0, 0, .8));
    }

        .vctl:not(.nav-only) .vctl-buttons {
            position: absolute;
            left: 50%;
            top: 44%;
            width: max-content;
            transform: translate(-50%, -50%);
            gap: .5rem;
        }

    .vctl-row { grid-template-columns: 1fr auto; }

    .vctl-btn { width: 44px; height: 44px; font-size: 1.35rem; }
        .vctl-btn.play { width: 56px; height: 56px; font-size: 2rem; }
        .vctl-btn.small { width: 36px; height: 36px; font-size: 1rem; }

    .vctl-time { font-size: .76rem; }

    /* The middle play button replaces the big "tap to play" circle. */
    [data-vframe] > .tap-to-play { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .vctl, .vctl-seek { transition: none; }
    .vctl-btn:active:not(:disabled) { transform: none; }
}