/*
 * vjs-sexu — Video.js skin in the Sexu design system.
 * Source of truth: design_handoff_videojs_skin (variants 1h "Center Transport" + 1i idle/banners/VAST,
 * Player Sponsor, Player Fallback). Values below are the handoff's, verbatim — treat them as final.
 *
 * Scope: everything is keyed on .vjs-sexu (the <video> element class the widget emits for
 * skin='sexu') or .player-block--sexu-skin (the page wrapper for the out-of-player pieces:
 * placeholder, banner square, title strip, sponsor plate). Other brands and the embed pages keep
 * vjs-luxmty and never match a rule from this file.
 *
 * PERFORMANCE CONTRACT (README "Performance на слабых устройствах"): backdrop-filter is a
 * progressive enhancement ONLY. The base below ships opaque fills sized to the same contrast;
 * the @supports block at the end swaps fills — and ONLY fills — on capable desktops. Geometry
 * must be identical in both modes (Player Fallback.dc.html is the reference).
 *
 * Mobile column = player-width breakpoints (vjs-layout-* classes, configured to small<=599 in
 * videojs-player.js), not the viewport — except the out-of-player pieces, which use the site's
 * 639px media query since they live outside the player element.
 */

/* ---------------------------------------------------------------- tokens */
.video-js.vjs-sexu {
    --sx-accent: #ffd632;
    --sx-ink: #222;
    --sx-track: #ffffff26;
    --sx-buffer: #ffffff3d;
    --sx-time: #ffffffc4;
    --sx-time-dim: #ffffff8a;
    /* opaque no-blur bases; the glass block at the end overrides them */
    --sx-glass-sq: rgba(20, 18, 20, .78);   /* corner buttons, volume track */
    --sx-glass-rw: rgba(24, 22, 24, .82);   /* +-15s transport circles */
    --sx-plate: #151317;                    /* title strip, sponsor plate */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-family: 'Averta Std', Arial, Helvetica, sans-serif;
    color: #fff;
    background-color: #161717;
}

/* Red is banned inside the player: neutralise the luxmty :root accents in our subtree. */
.video-js.vjs-sexu,
.player-block--sexu-skin {
    --secondary-color: 0 0% 13%;
}

/* ------------------------------------------------- kill unused vanilla UI */
.vjs-sexu .vjs-remaining-time,
.vjs-sexu .vjs-time-divider,
.vjs-sexu .vjs-playback-rate,
.vjs-sexu .vjs-picture-in-picture-control,
.vjs-sexu .vjs-audio-button,
.vjs-sexu .vjs-subs-caps-button,
.vjs-sexu .vjs-captions-button,
.vjs-sexu .vjs-subtitles-button,
.vjs-sexu .vjs-chapters-button,
.vjs-sexu .vjs-descriptions-button,
.vjs-sexu .vjs-quality-menu-wrapper,
.vjs-sexu .vjs-quality-selector,
.vjs-sexu .vjs-skip-backward-10, .vjs-sexu .vjs-skip-forward-10,
.vjs-sexu .vjs-skip-backward-5,  .vjs-sexu .vjs-skip-forward-5,
.vjs-sexu .vjs-skip-backward-30, .vjs-sexu .vjs-skip-forward-30,
.vjs-sexu .vjs-skip-backward-undefined, .vjs-sexu .vjs-skip-forward-undefined,
.vjs-sexu .vjs-play-control,
.vjs-sexu > .vjs-big-play-button,
.vjs-sexu .vjs-mouse-display,
.vjs-sexu .vast-skip-button,
.vjs-sexu .vast-remaining-time,
.vjs-sexu .vast-remaining-time-icon {
    display: none !important;
}

/* Icon font glyphs are replaced with inline SVGs (README: no icon fonts — the font blocks the
   first paint of the controls). The skin JS injects the SVGs; hide every glyph in our subtree. */
.vjs-sexu .vjs-control .vjs-icon-placeholder:before {
    content: none !important;
}

/* ---------------------------------------------------- control bar = layer */
/* The bar is not a bar: it becomes a full-frame layer whose children are pinned to the frame
   edges. The frame keeps its full 16:9 height — nothing is stacked under the video. */
.vjs-sexu .vjs-control-bar {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    background: none;
    pointer-events: none;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none;
}
.vjs-sexu .vjs-control-bar > * {
    pointer-events: auto;
}

/* ------------------------------------------------------------- auto-hide */
/* 2.5s of stillness (inactivityTimeout, set in videojs-player.js) hides everything except the
   3px progress line. transform/opacity only, 180ms ease-out per the handoff. */
.vjs-sexu .vjs-volume-panel,
.vjs-sexu .vjs-fullscreen-control,
.vjs-sexu .sxp-transport,
.vjs-sexu .sxp-times {
    transition: opacity 180ms ease-out, transform 180ms ease-out;
}
.vjs-sexu.vjs-user-inactive.vjs-playing .vjs-volume-panel,
.vjs-sexu.vjs-user-inactive.vjs-playing .vjs-fullscreen-control {
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
}
.vjs-sexu.vjs-user-inactive.vjs-playing .sxp-transport {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.98);
    pointer-events: none;
}
.vjs-sexu.vjs-user-inactive.vjs-playing .sxp-times {
    opacity: 0;
    transform: translateY(4px);
}

/* --------------------------------------------------------- corner buttons */
.vjs-sexu .vjs-volume-panel {
    position: absolute;
    left: 18px;
    top: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
    height: auto;
}
.vjs-sexu .vjs-mute-control {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 7px;
    background: var(--sx-glass-sq);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.vjs-sexu .vjs-fullscreen-control {
    position: absolute;
    right: 18px;
    top: 16px;
    width: 40px;
    height: 40px;
    border-radius: 7px;
    background: var(--sx-glass-sq);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.vjs-sexu .vjs-mute-control:hover,
.vjs-sexu .vjs-fullscreen-control:hover {
    background: rgba(20, 18, 20, .66);
}
/* the skin JS injects .sxp-ico svgs; state classes pick the right one */
.vjs-sexu .sxp-ico { display: none; }
.vjs-sexu .vjs-mute-control .sxp-ico--vol,
.vjs-sexu.vjs-fullscreen .vjs-fullscreen-control .sxp-ico--fsexit,
.vjs-sexu:not(.vjs-fullscreen) .vjs-fullscreen-control .sxp-ico--fs {
    display: block;
}
.vjs-sexu .vjs-mute-control.vjs-vol-0 .sxp-ico--vol { display: none; }
.vjs-sexu .vjs-mute-control.vjs-vol-0 .sxp-ico--muted { display: block; }

/* volume slider: 96x4, always visible on desktop layouts, gone on mobile ones.
 *
 * The selector list mirrors vanilla video-js.css one-for-one on purpose (QA: "полоска
 * куда-то проваливается"). Vanilla keeps the slider collapsed to 1x1 and grows it to
 * 5em x 3em on .vjs-hover / :active / :focus / .vjs-slider-active — those rules carry FOUR
 * classes, so a plain `.vjs-sexu .vjs-volume-control.vjs-volume-horizontal` (three) lost
 * every hover and every drag: the bar jumped 96x4 -> 50x30 under the cursor and back through
 * a 1s width transition. Prefixing each vanilla variant with .vjs-sexu outranks it and the
 * geometry stays put in all states. */
.vjs-sexu .vjs-volume-control.vjs-volume-horizontal,
.vjs-sexu .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal,
.vjs-sexu .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal,
.vjs-sexu .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
.vjs-sexu .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal,
.vjs-sexu .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal,
.vjs-sexu .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-horizontal,
.vjs-sexu .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal {
    position: relative;
    width: 96px;
    height: 4px;
    min-width: 96px;
    visibility: visible;
    opacity: 1;
    transition: none;
    margin: 0;
    left: 0;
}
/* the panel itself: vanilla animates it 4em -> 10em on hover (`transition: width 1s`), which
   dragged the whole row sideways while the slider was being used */
.vjs-sexu .vjs-volume-panel,
.vjs-sexu .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover,
.vjs-sexu .vjs-volume-panel.vjs-volume-panel-horizontal:active,
.vjs-sexu .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active {
    width: auto;
    transition: opacity 180ms ease-out, transform 180ms ease-out;
}
.vjs-sexu .vjs-volume-bar.vjs-slider-horizontal {
    width: 96px;
    height: 4px;
    margin: 0;
    border-radius: 2px;
    background: var(--sx-glass-sq);
}
.vjs-sexu .vjs-volume-level {
    background: #fff;
    border-radius: 2px;
    height: 4px;
}
.vjs-sexu .vjs-volume-level:before {
    content: '';
    position: absolute;
    right: -5.5px;
    top: 50%;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #fff;
    transform: translateY(-50%);
    font-size: 0; /* neutralise the vanilla glyph box */
}

/* -------------------------------------------------------- center transport */
.vjs-sexu .sxp-transport {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 26px;
    z-index: 2;
}
.vjs-sexu .sxp-rw,
.vjs-sexu .sxp-ff {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: var(--sx-glass-rw);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    cursor: pointer;
    color: #fff;
}
.vjs-sexu .sxp-rw:hover,
.vjs-sexu .sxp-ff:hover {
    background: rgba(24, 22, 24, .7);
}
.vjs-sexu .sxp-play {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: var(--sx-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    cursor: pointer;
}
.vjs-sexu .sxp-play:hover { filter: brightness(.94); }
.vjs-sexu .sxp-play .sxp-ico--pause { display: none; }
.vjs-sexu .sxp-play .sxp-ico--play { display: block; }
.vjs-sexu.vjs-playing .sxp-play .sxp-ico--pause { display: block; }
.vjs-sexu.vjs-playing .sxp-play .sxp-ico--play { display: none; }
/* the frame is the tap surface before the first play; transport appears with the player */
.vjs-sexu.vjs-ad-playing .sxp-transport { display: none; }

/* --------------------------------------------------------------- timeline */
.vjs-sexu .vjs-progress-control {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    padding: 0 18px 10px;
}
.vjs-sexu .sxp-times {
    display: flex;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--sx-time);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 5px rgba(0, 0, 0, .7);
    line-height: 1.2;
    pointer-events: none;
}
.vjs-sexu .sxp-times .vjs-current-time,
.vjs-sexu .sxp-times .vjs-duration {
    position: static;
    display: block;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    font-size: 12px;
    line-height: 1.2;
}
.vjs-sexu .sxp-times .vjs-duration {
    color: var(--sx-time-dim);
}
.vjs-sexu .sxp-times .vjs-duration .vjs-duration-display:before {
    content: '/ ';
}
.vjs-sexu .vjs-progress-holder {
    height: 3px;
    margin: 0;
    background: var(--sx-track);
    transition: height 120ms ease-out;
}
.vjs-sexu .vjs-progress-control:hover .vjs-progress-holder,
.vjs-sexu.vjs-scrubbing .vjs-progress-holder {
    height: 5px;
    font-size: inherit; /* vanilla scales tooltips via font-size bumps; keep ours fixed */
}
.vjs-sexu .vjs-load-progress,
.vjs-sexu .vjs-load-progress div {
    background: var(--sx-buffer);
}
.vjs-sexu .vjs-play-progress {
    background: var(--sx-accent);
}
/* scrub handle: 13px accent dot, only under the cursor/finger */
.vjs-sexu .vjs-play-progress:before {
    content: '';
    position: absolute;
    right: -6.5px;
    top: 50%;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--sx-accent);
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 120ms ease-out;
    font-size: 0;
}
.vjs-sexu .vjs-progress-control:hover .vjs-play-progress:before,
.vjs-sexu.vjs-scrubbing .vjs-play-progress:before {
    opacity: 1;
}
/* timecode bubble while dragging */
.vjs-sexu .vjs-play-progress .vjs-time-tooltip {
    display: none;
    background: var(--sx-accent);
    color: var(--sx-ink);
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    padding: 4px 9px;
    border-radius: 7px;
    top: auto;
    bottom: 14px;
    line-height: 1.2;
}
.vjs-sexu.vjs-scrubbing .vjs-play-progress .vjs-time-tooltip {
    display: block;
}
/* the regular timeline makes no sense while a VAST creative owns the frame */
.vjs-sexu.vjs-ad-playing .vjs-progress-control { display: none; }

/* ------------------------------------------------------- double-tap hints */
.sxp-taphint {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 52%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 214, 50, .16);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease-out;
    z-index: 3;
}
.sxp-taphint--fwd { right: 0; border-radius: 220px 0 0 220px; padding-left: 18px; }
.sxp-taphint--back { left: 0; border-radius: 0 220px 220px 0; padding-right: 18px; }
.sxp-taphint.is-on { opacity: 1; }
.sxp-taphint__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.sxp-taphint__label {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

/* ------------------------------------------------------------ VAST overlay */
.sxp-ad {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 4;
    font-family: 'Averta Std', Arial, Helvetica, sans-serif;
}
.sxp-ad__head {
    position: absolute;
    left: 16px;
    top: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sxp-ad__chip {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #222;
    background: #ffd632;
    padding: 3px 8px;
    border-radius: 3px;
}
.sxp-ad__time {
    font-size: 12px;
    font-weight: 700;
    color: #ffffffcf;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 5px rgba(0, 0, 0, .6);
}
/* .vjs-sexu prefix is load-bearing, not decoration: vanilla's `.video-js button` reset
   (0,1,1) declares font-size/line-height: inherit, so a bare `.sxp-skip` (0,1,0) lost the
   type ramp and the capsule rendered at the player's 10px base — QA: "Skip кнопка мелкая".
   Every text-bearing skin button inside .video-js needs the prefix for the same reason. */
.vjs-sexu .sxp-skip {
    position: absolute;
    right: 16px;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #ffffff24;
    background: rgba(6, 5, 7, .72);
    color: #ffffffc4;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 700;
    white-space: nowrap;
    padding: 10px 16px;
    border-radius: 7px;
    pointer-events: auto;
    cursor: default;
}
.sxp-skip__ring { position: relative; width: 24px; height: 24px; flex: none; }
.sxp-skip__ring svg { display: block; }
.sxp-skip__arc {
    animation: sxp-skip-arc 5s linear forwards;
}
@keyframes sxp-skip-arc {
    from { stroke-dashoffset: 62.8; }
    to   { stroke-dashoffset: 0; }
}
.sxp-skip__n {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}
.sxp-skip__go { display: none; }
/* skippable: same geometry and radius, only fills and content swap — the button must not jump */
.sxp-skip.is-skippable {
    background: #ffd632;
    border-color: #ffd632;
    color: #222;
    cursor: pointer;
    gap: 9px;
    padding: 11px 18px;
}
.sxp-skip.is-skippable:hover { filter: brightness(.94); }
.sxp-skip.is-skippable .sxp-skip__ring { display: none; }
.sxp-skip.is-skippable .sxp-skip__go { display: block; }
.sxp-ad__bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: #ffffff26;
    overflow: hidden;
}
.sxp-ad__fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: #ffd632;
    transform-origin: 0 50%;
    transform: scaleX(0); /* scaleX, not width: no layout on every timeupdate */
}
/* corners are meaningless while the creative owns the frame */
.vjs-sexu.vjs-ad-playing .vjs-volume-panel,
.vjs-sexu.vjs-ad-playing .vjs-fullscreen-control {
    display: none;
}

/* ---------------------------------------------------------------- spinner */
/* Vanilla's spinner is a 50px grey-blue ring with white arcs, and its fade keyframes
   animate the arc back to grey-blue every cycle — that is the "красно-серый кружок от
   старого скина" QA reported. Same geometry, skin palette: translucent white ring, accent
   arcs, and OUR keyframes (vjs-spinner-fade would drag the grey back in mid-animation). */
.vjs-sexu .vjs-loading-spinner {
    width: 46px;
    height: 46px;
    border: 3px solid #ffffff26;
    opacity: 1;
}
.vjs-sexu .vjs-loading-spinner:before,
.vjs-sexu .vjs-loading-spinner:after {
    border-color: transparent;
    border-top-color: #ffd632;
}
.vjs-sexu.vjs-seeking .vjs-loading-spinner:before,
.vjs-sexu.vjs-waiting .vjs-loading-spinner:before,
.vjs-sexu.vjs-seeking .vjs-loading-spinner:after,
.vjs-sexu.vjs-waiting .vjs-loading-spinner:after {
    border-top-color: #ffd632;
    animation: vjs-spinner-spin 1.1s cubic-bezier(.6, .2, 0, .8) infinite,
               sxp-spinner-fade 1.1s linear infinite;
}
.vjs-sexu.vjs-seeking .vjs-loading-spinner:after,
.vjs-sexu.vjs-waiting .vjs-loading-spinner:after {
    animation-delay: 0s, .44s;
}
@keyframes sxp-spinner-fade {
    0%   { border-top-color: #ffd63259; }
    20%  { border-top-color: #ffd63259; }
    35%  { border-top-color: #ffd632; }
    60%  { border-top-color: #ffd632; }
    100% { border-top-color: #ffd63259; }
}

/* =================================================================== */
/* Out-of-player pieces, scoped to the page wrapper                     */
/* =================================================================== */

/* The page-level custom loader (videojs-player.js ensureCustomLoader) ships the legacy
   brand palette — white ring with two dark-red arcs. Under the skin it must read as the
   skin's own spinner: translucent white ring, single accent arc. Same element geometry
   and animation, only the paint changes. */
.player-block--sexu-skin .video-loader__spinner {
    border: 3px solid #ffffff26;
    border-top-color: #ffd632;
}


/* ------------------------------------------------------------- idle frame */
.player-block--sexu-skin .video-placeholder picture:after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(6, 5, 7, .22);
}
.player-block--sexu-skin .video-placeholder .vjs-big-play-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 92px;
    height: 92px;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: #ffd632;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
    cursor: pointer;
    z-index: 3;
}
.player-block--sexu-skin .video-placeholder .vjs-big-play-button:hover { filter: brightness(.94); }
.player-block--sexu-skin .video-placeholder .vjs-big-play-button .vjs-icon-placeholder {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 17px 0 17px 27px;
    border-color: transparent transparent transparent #222;
    margin-left: 7px;
}
.player-block--sexu-skin .video-placeholder .vjs-big-play-button .vjs-icon-placeholder:before {
    content: none;
}
.player-block--sexu-skin .sxp-idle-duration {
    position: absolute;
    right: 12px;
    bottom: 12px;
    background: rgba(6, 5, 7, .78);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 3px 8px;
    border-radius: 3px;
    z-index: 3;
    pointer-events: none;
}

/* ------------------------------------------------------------ title strip */
/* The legacy in-frame overlay (title + date + emoji rating) would render the title a second
   time next to the strip (QA P1). Plain display:none, NOT !important: video-view.js toggles
   this element with inline styles on play/pause, and an empty inline value must keep falling
   back to this rule. */
.player-block--sexu-skin .player-block__info {
    display: none;
}
.player-block--sexu-skin .sxp-ptb {
    background: var(--sxp-plate, #151317);
    border-top: 1px solid #ffffff14;
    color: #fff;
    font-family: 'Averta Std', Arial, Helvetica, sans-serif;
    transition: opacity 180ms ease-out, transform 180ms ease-out;
}
.player-block--sexu-skin .sxp-ptb.is-off {
    display: none;
}
/* The whole row opens the panel, not just the chevron (QA: "не выводится описание под
   плеером на мобиле" — on a phone the 22px chevron sits at the screen edge and is simply
   missed; the handoff also demands >=44x44 tap targets). The chevron keeps its own button
   for keyboard and screen readers; the row is the fat target around it. */
.player-block--sexu-skin .sxp-ptb__row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    min-height: 47px;
    box-sizing: border-box;
    cursor: pointer;
}
.player-block--sexu-skin .sxp-ptb__title {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    /* it is the page h1 now — kill the UA heading box */
    margin: 0;
    padding: 0;
    line-height: inherit;
}
.player-block--sexu-skin .sxp-ptb.is-expanded .sxp-ptb__title {
    white-space: normal;
    line-height: 1.35;
    text-wrap: pretty;
}
.player-block--sexu-skin .sxp-ptb__meta {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: none;
    font-size: 12px;
    font-weight: 700;
    color: #ffffffa8;
}
.player-block--sexu-skin .sxp-ptb__chip {
    color: #222;
    background: #ffd632;
    padding: 2px 7px;
    border-radius: 3px;
}
.player-block--sexu-skin .sxp-ptb__toggle {
    flex: none;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: #ffffff14;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}
/* 44px tap target around the visually 26px control */
.player-block--sexu-skin .sxp-ptb__toggle:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}
.player-block--sexu-skin .sxp-ptb__toggle svg { transition: transform 180ms ease-out; }
.player-block--sexu-skin .sxp-ptb.is-expanded .sxp-ptb__toggle svg { transform: rotate(180deg); }
.player-block--sexu-skin .sxp-ptb__body {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.player-block--sexu-skin .sxp-ptb__body[hidden] { display: none; }
.player-block--sexu-skin .sxp-ptb__date {
    font-size: 13px;
    line-height: 1.6;
    color: #ffffffb0;
    max-width: 640px;
    text-wrap: pretty;
}
.player-block--sexu-skin .sxp-ptb__tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.player-block--sexu-skin .sxp-ptb__tag {
    font-size: 12px;
    font-weight: 700;
    color: #ffd632;
    border: 1px solid #ffd63259;
    padding: 4px 10px;
    border-radius: 7px;
    text-decoration: none;
}
.player-block--sexu-skin .sxp-ptb__tag:hover { border-color: #ffd632; color: #ffd632; }

/* ---------------------------------------------------------- banner square */
.player-block--sexu-skin .player-block__square,
.player-block--sexu-skin .player-block__item > div.player-block__square {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0;
    bottom: 0;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    transform: none !important;
    margin: 0 !important;
    background: rgba(10, 8, 10, .62);
    display: flex;
    flex-direction: column;
    /* flex-wrap/align-content are NOT redundant: the theme's `.player-block__item >
       div.player-block__square` (0,2,2) ships `flex-wrap: wrap; align-content: flex-start`.
       Combined with our column direction that turned the creative row into a wrapped column
       LINE, and align-content then packed that line against the left edge — the ad stack sat
       flush left over a 974px frame while align-items kept centring inside the line only
       (QA: "In Video Banner не по центру"). Our matching selector below is (0,3,2), so no
       !important is needed here. */
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: center;
    gap: 16px;
    z-index: 4;
}
/* No creative arrived: take the whole overlay out, not just its height.
 *
 * The global `.spot-flat` rule releases *height* (`height: 0 !important`), which does nothing
 * here — the rule above pins `height: auto !important` at a higher specificity, and the box is
 * absolutely positioned over the frame anyway. So a plain visitor on a no-fill kept looking at a
 * dark layer over the poster (QA), while an ad-blocker user did not: `.spot-off` is
 * `display: none !important` globally, and only the flat path runs without blocker evidence.
 *
 * Both selectors carry .spot-flat so this beats the (0,3,2) `display: flex` above; no !important,
 * deliberately — video-view.js toggles this element with inline styles on play/pause, and on
 * pause it writes an EMPTY inline value, which must fall back to whatever CSS says now. That is
 * what keeps an empty overlay from coming back every time the viewer pauses.
 *
 * The trade-off is deliberate and one-way: an SDK does not render into a display:none placement,
 * so a creative that would have landed after the grace is lost rather than shown late. That is
 * the same bargain the blocker path already makes in production (`.spot-off` is
 * display:none !important globally), the window is narrow (a fill either arrives in the first
 * seconds or not at all), and by then the viewer has usually pressed play — at which point
 * video-view.js hides the overlay anyway. Chosen over an invisible-but-present box (opacity:0),
 * which would let a late creative render where nobody can see it and still count an impression. */
.player-block--sexu-skin .player-block__square.spot-flat,
.player-block--sexu-skin .player-block__item > div.player-block__square.spot-flat {
    display: none;
}

/* Three classes on purpose: the theme's `.player-block__item>div.player-block__square>div`
   forces width:auto!important onto every square child at (0,2,2) — this selector is (0,3,0)
   and its width is also !important, so specificity decides in our favour. */
.player-block--sexu-skin .player-block__square > .sxp-adbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 616px !important;
    max-width: calc(100% - 20px);
}
.player-block--sexu-skin .sxp-adbar__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #ffffffa8;
    background: rgba(18, 16, 19, .7);
    padding: 3px 8px;
    border-radius: 3px;
}
.player-block--sexu-skin .sxp-adbar__close {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: #ffd632;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: none;
    position: relative;
}
.player-block--sexu-skin .sxp-adbar__close:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}
.player-block--sexu-skin .sxp-adbar__close:hover { filter: brightness(.94); }
.player-block--sexu-skin .player-square-lg {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
}
.player-block--sexu-skin .player-square-sm { display: none; }
.player-block--sexu-skin #closeplay {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    /* !important against the theme's width:auto!important square-child stretcher */
    width: 240px !important;
    height: 42px !important;
    margin: 0;
    padding: 0;
    border: 0; /* it is a real <button> now (keyboard operable), drop the UA chrome */
    flex: none;
    border-radius: 7px;
    background: #ffd632;
    color: #222;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Averta Std', Arial, Helvetica, sans-serif;
    cursor: pointer;
    position: static;
}
.player-block--sexu-skin #closeplay:hover { filter: brightness(.94); }

/* -------------------------------------------------------------- sponsor */
.player-block--sexu-skin .sxp-sponsor {
    position: absolute;
    left: 18px;
    bottom: 56px;
    z-index: 5;
    font-family: 'Averta Std', Arial, Helvetica, sans-serif;
    max-width: 420px;
}
/* the theme stretches every div child of the item to 100%x100% (!important) — the plate must
   keep its content size; (0,3,0) + !important outranks the (0,2,1) stretcher */
.player-block--sexu-skin .player-block__item > .sxp-sponsor {
    width: auto !important;
    height: auto !important;
}
.player-block--sexu-skin .sxp-sponsor[hidden] { display: none; }
.player-block--sexu-skin .sxp-sponsor__card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--sxp-plate, #151317);
    border: 1px solid #ffffff1f;
    border-radius: 7px;
    padding: 12px 14px;
    opacity: 1;
    transform: translateX(0);
    transition: transform 240ms cubic-bezier(.2, .7, .3, 1), opacity 240ms cubic-bezier(.2, .7, .3, 1);
}
.player-block--sexu-skin .sxp-sponsor.is-entering .sxp-sponsor__card {
    opacity: 0;
    transform: translateX(-12px);
}
.player-block--sexu-skin .sxp-sponsor__logo {
    width: 44px;
    height: 44px;
    border-radius: 7px;
    background: #ffd632;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    font-size: 17px;
    font-weight: 700;
    color: #222;
}
.player-block--sexu-skin .sxp-sponsor__col {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.player-block--sexu-skin .sxp-sponsor__kicker {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
    color: #ffffff85;
}
.player-block--sexu-skin .sxp-sponsor__link {
    font-size: 15px;
    font-weight: 700;
    color: #ffd632;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}
.player-block--sexu-skin .sxp-sponsor__link:hover { color: #ffd632; filter: brightness(.94); }
.player-block--sexu-skin .sxp-sponsor__close {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: #ffffff14;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: none;
    position: relative;
}
.player-block--sexu-skin .sxp-sponsor__close:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}
.player-block--sexu-skin .sxp-sponsor__tag {
    display: none;
    align-items: center;
    gap: 9px;
    height: 34px;
    padding: 7px 11px;
    box-sizing: border-box;
    border: 1px solid #ffffff1f;
    border-radius: 7px;
    background: var(--sxp-plate, #151317);
    cursor: pointer;
    color: #ffffffc4;
    font-family: inherit;
}
.player-block--sexu-skin .sxp-sponsor__logo--sm {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    font-size: 9px;
}
.player-block--sexu-skin .sxp-sponsor__tagname {
    font-size: 12px;
    font-weight: 700;
    color: #ffffffc4;
}
.player-block--sexu-skin .sxp-sponsor.is-collapsed .sxp-sponsor__card { display: none; }
.player-block--sexu-skin .sxp-sponsor.is-collapsed .sxp-sponsor__tag { display: flex; }

/* ------------------------------------------------------------ focus rings */
.vjs-sexu button:focus-visible,
.vjs-sexu .vjs-control:focus-visible,
.player-block--sexu-skin .sxp-ptb__toggle:focus-visible,
.player-block--sexu-skin .sxp-ptb__tag:focus-visible,
.player-block--sexu-skin .sxp-adbar__close:focus-visible,
.player-block--sexu-skin #closeplay:focus-visible,
.player-block--sexu-skin .sxp-sponsor__link:focus-visible,
.player-block--sexu-skin .sxp-sponsor__close:focus-visible,
.player-block--sexu-skin .sxp-sponsor__tag:focus-visible,
.player-block--sexu-skin .video-placeholder .vjs-big-play-button:focus-visible {
    outline: 2px solid #ffd632;
    outline-offset: 2px;
}

/* ============================================================ mobile column */
/* Inside the player: by PLAYER width (vjs-layout-*, small = <=599px, set in videojs-player.js). */
.vjs-sexu.vjs-layout-small .vjs-volume-panel { left: 10px; top: 9px; }
.vjs-sexu.vjs-layout-small .vjs-volume-control.vjs-volume-horizontal { display: none; }
.vjs-sexu.vjs-layout-small .vjs-mute-control,
.vjs-sexu.vjs-layout-small .vjs-fullscreen-control { width: 36px; height: 36px; }
.vjs-sexu.vjs-layout-small .vjs-fullscreen-control { right: 10px; top: 9px; }
/* 44px tap targets around the visually 36px corners */
.vjs-sexu.vjs-layout-small .vjs-mute-control:after,
.vjs-sexu.vjs-layout-small .vjs-fullscreen-control:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}
.vjs-sexu.vjs-layout-small .sxp-transport { gap: 18px; }
.vjs-sexu.vjs-layout-small .sxp-rw,
.vjs-sexu.vjs-layout-small .sxp-ff { width: 46px; height: 46px; }
.vjs-sexu.vjs-layout-small .sxp-play { width: 62px; height: 62px; }
.vjs-sexu.vjs-layout-small .sxp-rw svg,
.vjs-sexu.vjs-layout-small .sxp-ff svg { width: 18px; height: 18px; }
.vjs-sexu.vjs-layout-small .sxp-play svg { width: 26px; height: 26px; }
.vjs-sexu.vjs-layout-small .vjs-progress-control { padding: 0 10px 8px; gap: 5px; }
.vjs-sexu.vjs-layout-small .vjs-play-progress:before { width: 11px; height: 11px; right: -5.5px; }
.vjs-sexu.vjs-layout-small .vjs-play-progress .vjs-time-tooltip { font-size: 12px; }
.vjs-sexu.vjs-layout-small .sxp-ad__head { left: 10px; top: 9px; gap: 6px; }
.vjs-sexu.vjs-layout-small .sxp-ad__chip { font-size: 10px; padding: 2px 7px; }
.vjs-sexu.vjs-layout-small .sxp-ad__time { font-size: 11px; }
.vjs-sexu.vjs-layout-small .sxp-skip { right: 10px; bottom: 12px; font-size: 12px; padding: 8px 12px; gap: 8px; }
.vjs-sexu.vjs-layout-small .sxp-skip.is-skippable { padding: 9px 14px; gap: 7px; }
.vjs-sexu.vjs-layout-small .sxp-skip__ring { width: 20px; height: 20px; }
.vjs-sexu.vjs-layout-small .sxp-skip__ring svg { width: 20px; height: 20px; }
.vjs-sexu.vjs-layout-small .sxp-skip__n { font-size: 9px; }
/* tiny/x-small inherit the small column */
.vjs-sexu.vjs-layout-x-small .vjs-volume-panel, .vjs-sexu.vjs-layout-tiny .vjs-volume-panel { left: 10px; top: 9px; }
.vjs-sexu.vjs-layout-x-small .vjs-volume-control.vjs-volume-horizontal, .vjs-sexu.vjs-layout-tiny .vjs-volume-control.vjs-volume-horizontal { display: none; }
.vjs-sexu.vjs-layout-x-small .vjs-mute-control, .vjs-sexu.vjs-layout-tiny .vjs-mute-control,
.vjs-sexu.vjs-layout-x-small .vjs-fullscreen-control, .vjs-sexu.vjs-layout-tiny .vjs-fullscreen-control { width: 36px; height: 36px; }
.vjs-sexu.vjs-layout-x-small .vjs-fullscreen-control, .vjs-sexu.vjs-layout-tiny .vjs-fullscreen-control { right: 10px; top: 9px; }
.vjs-sexu.vjs-layout-x-small .sxp-transport, .vjs-sexu.vjs-layout-tiny .sxp-transport { gap: 18px; }
.vjs-sexu.vjs-layout-x-small .sxp-rw, .vjs-sexu.vjs-layout-tiny .sxp-rw,
.vjs-sexu.vjs-layout-x-small .sxp-ff, .vjs-sexu.vjs-layout-tiny .sxp-ff { width: 46px; height: 46px; }
.vjs-sexu.vjs-layout-x-small .sxp-play, .vjs-sexu.vjs-layout-tiny .sxp-play { width: 62px; height: 62px; }
/* display:flex is load-bearing, not a repeat of the base rule: vanilla ships
   `.video-js.vjs-layout-x-small .vjs-progress-control { display: none }` (same for tiny) at the
   SAME (0,3,0) specificity as the skin's base `.vjs-sexu .vjs-progress-control` — but the base
   rule never re-declared display for these layouts, so on a 320px viewport the whole timeline
   (track, .sxp-times inside it, scrubbing) simply vanished (QA major). The skin's timeline is
   3px and fits any width — vanilla hid it to free control-bar space we don't use anyway. */
.vjs-sexu.vjs-layout-x-small .vjs-progress-control, .vjs-sexu.vjs-layout-tiny .vjs-progress-control {
    display: flex;
    padding: 0 10px 8px;
    gap: 5px;
}
/* the 44px tap halo must exist on EVERY narrow column: at 320px viewport video.js is in
   vjs-layout-x-small, where the small-only rule left the corners at bare 36px (QA P2) */
.vjs-sexu.vjs-layout-x-small .vjs-mute-control:after, .vjs-sexu.vjs-layout-tiny .vjs-mute-control:after,
.vjs-sexu.vjs-layout-x-small .vjs-fullscreen-control:after, .vjs-sexu.vjs-layout-tiny .vjs-fullscreen-control:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

/* Out-of-player pieces: the site's own 639px mobile breakpoint. */
@media (max-width: 639px) {
    .player-block--sexu-skin .video-placeholder .vjs-big-play-button { width: 62px; height: 62px; }
    .player-block--sexu-skin .video-placeholder .vjs-big-play-button .vjs-icon-placeholder {
        border-width: 12px 0 12px 19px;
        margin-left: 5px;
    }
    .player-block--sexu-skin .sxp-idle-duration { right: 9px; bottom: 9px; font-size: 12px; padding: 2px 7px; }

    .player-block--sexu-skin .sxp-ptb__row { padding: 8px 11px; gap: 9px; min-height: 39px; }
    .player-block--sexu-skin .sxp-ptb__title { font-size: 13px; }
    .player-block--sexu-skin .sxp-ptb__meta { gap: 6px; font-size: 11px; }
    .player-block--sexu-skin .sxp-ptb__chip { padding: 1px 5px; }
    .player-block--sexu-skin .sxp-ptb__toggle { width: 22px; height: 22px; }
    .player-block--sexu-skin .sxp-ptb__body { padding: 0 11px 12px; gap: 10px; }

    /* mobile banner state: one 300x100, Ad chip inside the creative, no Close & Play */
    .player-block--sexu-skin .player-block__square { gap: 12px; }
    .player-block--sexu-skin .player-square-lg { display: none; }
    .player-block--sexu-skin .player-square-sm {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    .player-block--sexu-skin .player-square-sm:before {
        content: 'Ad';
        position: absolute;
        left: 6px;
        top: 6px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .8px;
        text-transform: uppercase;
        color: #ffffffc4;
        background: rgba(18, 16, 19, .72);
        padding: 1px 6px;
        border-radius: 3px;
        z-index: 1;
        pointer-events: none;
    }
    .player-block--sexu-skin #closeplay { display: none; }
    /* ONE Ad marker on mobile, and it is the chip inside the creative (handoff §3: «маркер Ad —
       абсолютный чип внутри креатива»). The shared label above the slot stayed visible next to it,
       so a phone showed the word twice (QA). The row keeps only the close X, pushed to the right
       edge of the 300px column where it sat before. */
    .player-block--sexu-skin .player-block__square > .sxp-adbar {
        width: 300px !important;
        max-width: calc(100% - 20px);
        justify-content: flex-end;
    }
    .player-block--sexu-skin .sxp-adbar__label { display: none; }
    .player-block--sexu-skin .sxp-adbar__close { width: 20px; height: 20px; }

    .player-block--sexu-skin .sxp-sponsor { left: 10px; right: 10px; bottom: 44px; max-width: none; }
    .player-block--sexu-skin .sxp-sponsor__card { gap: 10px; padding: 8px 10px; }
    .player-block--sexu-skin .sxp-sponsor__logo { width: 32px; height: 32px; border-radius: 5px; font-size: 13px; }
    .player-block--sexu-skin .sxp-sponsor__logo--sm { width: 18px; height: 18px; border-radius: 4px; font-size: 8px; }
    .player-block--sexu-skin .sxp-sponsor__kicker { font-size: 9px; }
    .player-block--sexu-skin .sxp-sponsor__link { font-size: 13px; }
    .player-block--sexu-skin .sxp-sponsor__close { width: 22px; height: 22px; }
    .player-block--sexu-skin .sxp-sponsor__col { flex: 1; }
    .player-block--sexu-skin .sxp-sponsor__tag { height: 30px; padding: 6px 9px; gap: 7px; }
    .player-block--sexu-skin .sxp-sponsor__tagname { font-size: 11px; }
}

/* ------------------------------------------------------------ motion prefs */
@media (prefers-reduced-motion: reduce) {
    .vjs-sexu .vjs-volume-panel,
    .vjs-sexu .vjs-fullscreen-control,
    .vjs-sexu .sxp-transport,
    .vjs-sexu .sxp-times,
    .player-block--sexu-skin .sxp-ptb,
    .player-block--sexu-skin .sxp-sponsor__card,
    .sxp-taphint {
        transition: none;
    }
    .player-block--sexu-skin .sxp-sponsor.is-entering .sxp-sponsor__card {
        opacity: 1;
        transform: none;
    }
}

/* ============================================================= glass mode */
/* Progressive enhancement ONLY (README, mandatory): capable desktops swap the opaque bases for
   translucent fills + blur. Nothing else changes — Player Fallback.dc.html is the parity
   reference, and the geometry must match it pixel for pixel. */
@supports (backdrop-filter: blur(12px)) {
    @media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
        .video-js.vjs-sexu {
            --sx-glass-sq: rgba(20, 18, 20, .46);
            --sx-glass-rw: rgba(24, 22, 24, .52);
        }
        .vjs-sexu .vjs-mute-control,
        .vjs-sexu .vjs-fullscreen-control {
            backdrop-filter: blur(12px);
        }
        .vjs-sexu .sxp-rw,
        .vjs-sexu .sxp-ff {
            backdrop-filter: blur(6px);
        }
        .player-block--sexu-skin .sxp-ptb {
            background: rgba(18, 16, 19, .92);
            backdrop-filter: blur(18px);
        }
        .player-block--sexu-skin .sxp-sponsor__card {
            background: rgba(18, 16, 19, .86);
            backdrop-filter: blur(18px);
        }
        .player-block--sexu-skin .sxp-sponsor__tag {
            background: rgba(18, 16, 19, .86);
            backdrop-filter: blur(18px);
        }
    }
}