/*!
 * mv-player.css — фирменные контролы видео МирВЧ.
 * Все классы с префиксом mvp-, чтобы не задеть стили страницы.
 * Без !important: переопределять что-либо чужое здесь не нужно.
 *
 * Палитра бренда:
 *   фон видео    #1B0F2B      золото CTA  linear-gradient(180deg,#EAC976,#C5912C)
 *   золото линий #BC8F40      аметист     #6A4A9C
 *   текст        #F3ECDD      приглушённый rgba(243,236,221,.6)
 */

.mvp-root {
    position: relative;
    display: block;
    width: 100%;
    background: #1B0F2B;
    border-radius: 18px;
    overflow: hidden;
    font-family: 'PT Sans', sans-serif;
    color: #F3ECDD;
    /* тень тёплая, коричнево-фиолетовая — не серая */
    box-shadow: 0 14px 34px rgba(43, 24, 18, .34), 0 2px 10px rgba(106, 74, 156, .22);
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.mvp-root:focus-visible {
    outline: 2px solid #BC8F40;
    outline-offset: 3px;
}

/* Пропорция кадра. padding-hack — запасной путь для браузеров без aspect-ratio. */
.mvp-stage {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #1B0F2B;
}

@supports (aspect-ratio: 16 / 9) {
    .mvp-stage {
        padding-top: 0;
        aspect-ratio: 16 / 9;
    }
}

.mvp-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: #1B0F2B;
    outline: none;
}

/* ------------------------------------------------------------- постер и старт */

.mvp-poster {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #1B0F2B;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease;
}

.mvp-root.mvp-idle .mvp-poster {
    opacity: 1;
    visibility: visible;
}

/* Затемнение под постером: по нему читается заголовок и кнопка. */
.mvp-poster::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, rgba(27, 15, 43, .18) 0%, rgba(27, 15, 43, .62) 100%);
}

.mvp-title {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 16px 20px 30px;
    background: linear-gradient(180deg, rgba(27, 15, 43, .72), rgba(27, 15, 43, 0));
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
    color: #F3ECDD;
    text-shadow: 0 2px 8px rgba(27, 15, 43, .8);
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
}

.mvp-root.mvp-idle .mvp-title {
    opacity: 1;
}

.mvp-big {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 78px;
    height: 78px;
    margin: -39px 0 0 -39px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(180deg, #EAC976, #C5912C);
    color: #1B0F2B;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(43, 24, 18, .45), 0 0 0 1px rgba(188, 143, 64, .55);
    transition: transform .18s ease, box-shadow .18s ease;
    opacity: 0;
    visibility: hidden;
}

.mvp-root.mvp-idle .mvp-big {
    opacity: 1;
    visibility: visible;
}

.mvp-big:hover,
.mvp-big:focus-visible {
    transform: scale(1.06);
    box-shadow: 0 14px 32px rgba(43, 24, 18, .5), 0 0 0 2px #BC8F40;
}

.mvp-big:focus-visible {
    outline: none;
}

.mvp-big .mvp-i {
    width: 40px;
    height: 40px;
    margin-left: 3px; /* оптическая компенсация треугольника */
}

/* ------------------------------------------------------------------ крутилка */

.mvp-spin {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    display: none;
    pointer-events: none;
}

.mvp-spin.mvp-on {
    display: block;
}

.mvp-root.mvp-idle .mvp-spin {
    display: none; /* до старта крутилка не нужна — там кнопка */
}

.mvp-spin-ring {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid rgba(243, 236, 221, .2);
    border-top-color: #EAC976;
    animation: mvp-turn .9s linear infinite;
}

@keyframes mvp-turn {
    to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------- ошибка */

.mvp-error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    max-width: 84%;
    padding: 14px 20px;
    border: 1px solid rgba(188, 143, 64, .5);
    border-radius: 12px;
    background: rgba(27, 15, 43, .92);
    color: #F3ECDD;
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(43, 24, 18, .45);
}

.mvp-error.mvp-on {
    display: block;
}

/* --------------------------------------------------- зоны двойного тапа */

.mvp-tap {
    position: absolute;
    top: 0;
    bottom: 56px; /* нижнюю полосу оставляем панели */
    width: 44%;
    display: none;
}

.mvp-tap-l { left: 0; }
.mvp-tap-r { right: 0; }

/* Зоны нужны только там, где есть касание: на мыши они бы съели клики. */
@media (pointer: coarse) {
    .mvp-tap { display: block; }
}

.mvp-seekhint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(27, 15, 43, .85);
    border: 1px solid rgba(188, 143, 64, .45);
    color: #F3ECDD;
    font-size: 15px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

.mvp-seekhint.mvp-on {
    opacity: 1;
}

/* ------------------------------------------------------------ нижняя панель */

.mvp-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 30px 12px 10px;
    /* подложка градиентом, без резкой плашки */
    background: linear-gradient(180deg, rgba(27, 15, 43, 0), rgba(27, 15, 43, .85));
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
}

.mvp-root.mvp-ui .mvp-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mvp-root.mvp-idle .mvp-panel {
    opacity: 0;
    visibility: hidden; /* до старта панель не показываем совсем */
}

.mvp-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    min-width: 38px;
    padding: 0;
    margin: 0 2px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #F3ECDD;
    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
}

.mvp-btn:hover {
    background: rgba(106, 74, 156, .38);
    color: #EAC976;
}

.mvp-btn:focus-visible {
    outline: 2px solid #BC8F40;
    outline-offset: 1px;
}

.mvp-btn .mvp-i {
    width: 20px;
    height: 20px;
    fill: currentColor;
    display: block;
}

.mvp-play .mvp-i {
    width: 22px;
    height: 22px;
}

/* ------------------------------------------------------------------- шкала */

.mvp-bar {
    position: relative;
    flex: 1 1 auto;
    height: 30px;
    margin: 0 8px;
    display: flex;
    align-items: center;
    cursor: pointer;
    touch-action: none; /* иначе протяжка уедет в скролл страницы */
    outline: none;
}

.mvp-bar:focus-visible {
    outline: 2px solid #BC8F40;
    outline-offset: 2px;
    border-radius: 6px;
}

.mvp-track,
.mvp-buf,
.mvp-fill {
    position: absolute;
    left: 0;
    top: 50%;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 3px;
    pointer-events: none;
}

.mvp-track {
    right: 0;
    background: rgba(243, 236, 221, .15);
}

.mvp-buf {
    width: 0;
    background: rgba(243, 236, 221, .25);
}

.mvp-fill {
    width: 0;
    background: linear-gradient(180deg, #EAC976, #C5912C);
}

.mvp-knob {
    position: absolute;
    top: 50%;
    left: 0;
    width: 13px;
    height: 13px;
    margin: -6.5px 0 0 -6.5px;
    border-radius: 50%;
    background: linear-gradient(180deg, #EAC976, #C5912C);
    box-shadow: 0 2px 8px rgba(43, 24, 18, .55);
    pointer-events: none;
    opacity: 0;
    transition: opacity .16s ease, transform .16s ease;
}

.mvp-bar:hover .mvp-knob,
.mvp-bar:focus-visible .mvp-knob,
.mvp-root.mvp-drag .mvp-knob {
    opacity: 1;
}

.mvp-root.mvp-drag .mvp-knob {
    transform: scale(1.15);
}

.mvp-bar:hover .mvp-track,
.mvp-bar:hover .mvp-buf,
.mvp-bar:hover .mvp-fill,
.mvp-root.mvp-drag .mvp-track,
.mvp-root.mvp-drag .mvp-buf,
.mvp-root.mvp-drag .mvp-fill {
    height: 7px;
    margin-top: -3.5px;
}

/* -------------------------------------------------------------------- время */

.mvp-time {
    flex: 0 0 auto;
    padding: 0 8px;
    font-size: 13px;
    line-height: 1;
    color: rgba(243, 236, 221, .82);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- громкость */

.mvp-vol {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.mvp-volrange {
    width: 68px;
    height: 20px;
    margin: 0 6px 0 2px;
    padding: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.mvp-volrange:focus-visible {
    outline: 2px solid #BC8F40;
    outline-offset: 2px;
    border-radius: 6px;
}

.mvp-volrange::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: rgba(243, 236, 221, .25);
}

.mvp-volrange::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    margin-top: -4px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(180deg, #EAC976, #C5912C);
    box-shadow: 0 2px 6px rgba(43, 24, 18, .5);
}

.mvp-volrange::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: rgba(243, 236, 221, .25);
}

.mvp-volrange::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(180deg, #EAC976, #C5912C);
}

/* ----------------------------------------------------------------- скорость */

.mvp-rate {
    position: relative;
    flex: 0 0 auto;
}

.mvp-ratebtn {
    width: auto;
    min-width: 46px;
    padding: 0 10px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.mvp-ratemenu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    min-width: 92px;
    padding: 6px;
    border: 1px solid rgba(188, 143, 64, .45);
    border-radius: 12px;
    background: rgba(27, 15, 43, .96);
    box-shadow: 0 12px 28px rgba(43, 24, 18, .5);
    display: none;
    z-index: 3;
}

.mvp-root.mvp-menu .mvp-ratemenu:not(.mvp-qualmenu) {
    display: block;
}

/* Меню качества живёт в тех же стилях, что и скорость (обёртка mvp-rate) */
.mvp-root.mvp-qmenu .mvp-qualmenu {
    display: block;
}

/* Вотермарка: правый нижний угол — там, где в наших роликах стоит логотип.
   Не привязана к показу панели: пропадать вместе с контролями ей незачем. */
.mvp-wm {
    position: absolute;
    right: 16px;
    bottom: 54px;
    z-index: 4;
    pointer-events: none;
    /* Меньше и бледнее (владелец 19.09.2026): тонкая строка номера ученика,
       а не штамп; итоговую яркость задаёт вызывающий код через inline opacity */
    font: 400 10px/1 'PT Sans', sans-serif;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .45);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    opacity: .85;
}

.mvp-wm:empty {
    display: none;
}

.mvp-rateitem {
    display: block;
    width: 100%;
    min-height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #F3ECDD;
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: background-color .14s ease, color .14s ease;
}

.mvp-rateitem:hover {
    background: rgba(106, 74, 156, .45);
    color: #EAC976;
}

.mvp-rateitem:focus-visible {
    outline: 2px solid #BC8F40;
    outline-offset: -2px;
}

.mvp-rateitem[aria-checked="true"] {
    color: #EAC976;
    background: rgba(188, 143, 64, .18);
}

/* ------------------------------------------------------------- полный экран */

.mvp-root.mvp-fs {
    border-radius: 0;
    width: 100%;
    height: 100%;
    box-shadow: none;
}

.mvp-root.mvp-fs .mvp-stage {
    height: 100%;
    padding-top: 0;
    aspect-ratio: auto;
}

.mvp-root.mvp-fs .mvp-video {
    object-fit: contain;
}

/* -------------------------------------------------------------- телефоны */

@media (max-width: 640px) {
    .mvp-root {
        border-radius: 14px;
    }

    .mvp-panel {
        padding: 26px 6px 8px;
    }

    /* На телефоне регулятор громкости бесполезен — громкость там аппаратная. */
    .mvp-volrange {
        display: none;
    }

    .mvp-time {
        padding: 0 4px;
        font-size: 12px;
    }

    .mvp-big {
        width: 64px;
        height: 64px;
        margin: -32px 0 0 -32px;
    }

    .mvp-big .mvp-i {
        width: 32px;
        height: 32px;
    }

    .mvp-title {
        font-size: 15px;
        padding: 12px 14px 26px;
    }
}

/* Палец — не курсор: цель нажатия не меньше 44px. */
@media (pointer: coarse) {
    .mvp-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    .mvp-ratebtn {
        width: auto;
        min-width: 52px;
    }

    .mvp-bar {
        height: 44px;
    }

    .mvp-rateitem {
        min-height: 44px;
        line-height: 44px;
    }

    .mvp-knob {
        opacity: 1; /* без наведения показать ползунок больше нечем */
    }
}

/* ------------------------------------------------- уважение к настройкам ОС */

@media (prefers-reduced-motion: reduce) {
    .mvp-panel,
    .mvp-poster,
    .mvp-title,
    .mvp-big,
    .mvp-knob,
    .mvp-btn,
    .mvp-seekhint,
    .mvp-rateitem {
        transition: none;
    }

    .mvp-big:hover,
    .mvp-big:focus-visible,
    .mvp-root.mvp-drag .mvp-knob {
        transform: none;
    }

    .mvp-spin-ring {
        animation-duration: 2.4s; /* совсем убрать нельзя: это единственный признак загрузки */
    }
}