/* Плеер Voxidub — «студийный»: круглая янтарная кнопка по центру кадра и
   полупрозрачная панель поверх низа, время моноширинным шрифтом, как тайм-код
   редактора. Состояние приходит data-атрибутами от js/video-player.js.

   Корень растягивается по обёртке страницы: рамку, скругление и отступы задаёт
   страница своей обёрткой, плеер только заполняет её. Высоту до загрузки
   держит пропорция 16:9, чтобы раскладка не прыгала. */

.vx-vp{position:relative;width:100%;aspect-ratio:16/9;background:var(--warm-950);overflow:hidden;
  border-radius:inherit;outline:none;color:#fff;user-select:none;-webkit-user-select:none;
  --vp-played:0%;--vp-buffered:0%;--vp-tip:0%}
.vx-vp:focus-visible{box-shadow:var(--ring)}
.vx-vp__video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#000}

/* Полный экран: пропорцию диктует экран, а не кадр. */
.vx-vp[data-fs="true"]{aspect-ratio:auto;width:100vw;height:100vh;border-radius:0}

/* ——— большая кнопка: до первого запуска и после конца ——— */
.vx-vp__big{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;
  border:1px solid rgba(0,0,0,.35);background:var(--accent);color:#23170a;cursor:pointer;display:flex;
  align-items:center;justify-content:center;box-shadow:var(--inset-top-strong),var(--shadow-accent);
  transition:transform .15s var(--ease-out),opacity .2s var(--ease-out),filter .15s}
.vx-vp__big:hover{filter:brightness(1.08);transform:scale(1.05)}
.vx-vp__big:active{transform:scale(.97)}
.vx-vp:not([data-state="idle"]):not([data-state="ended"]) .vx-vp__big{opacity:0;pointer-events:none;transform:scale(.85)}

/* ——— панель ——— */
.vx-vp__bar{position:absolute;left:0;right:0;bottom:0;padding:28px 12px 8px;
  background:linear-gradient(to top,rgba(12,9,6,.85),rgba(12,9,6,.55) 55%,transparent);
  transition:opacity .25s var(--ease-out),transform .25s var(--ease-out)}
/* До первого запуска панель не нужна: там одна большая кнопка и обложка. */
.vx-vp[data-state="idle"] .vx-vp__bar,
.vx-vp[data-idle="true"] .vx-vp__bar{opacity:0;transform:translateY(8px);pointer-events:none}
.vx-vp[data-idle="true"]{cursor:none}

.vx-vp__row{display:flex;align-items:center;gap:4px}
.vx-vp__gap{flex:1}

.vx-vp__btn{height:34px;min-width:34px;padding:0 6px;border:0;border-radius:var(--radius-sm);background:transparent;
  color:rgba(255,255,255,.92);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s}
.vx-vp__btn:hover{background:rgba(255,255,255,.12);color:#fff}
.vx-vp__btn:focus-visible{outline:none;box-shadow:var(--ring)}
.vx-vp__btn--text{font:var(--type-mono-s);font-variant-numeric:tabular-nums;min-width:44px}

.vx-vp__time{font:var(--type-mono-s);font-variant-numeric:tabular-nums;color:rgba(255,255,255,.85);
  padding:0 6px;white-space:nowrap}
.vx-vp__cur{color:var(--amber-300)}

/* Иконки обоих состояний нарисованы заранее — видимую выбирает атрибут. */
.vx-vp .vx-vp__i-pause,
.vx-vp .vx-vp__i-muted,
.vx-vp .vx-vp__i-min{display:none}
.vx-vp[data-state="playing"] .vx-vp__i-play{display:none}
.vx-vp[data-state="playing"] .vx-vp__i-pause{display:block}
.vx-vp[data-muted="true"] .vx-vp__i-sound{display:none}
.vx-vp[data-muted="true"] .vx-vp__i-muted{display:block}
.vx-vp[data-fs="true"] .vx-vp__i-max{display:none}
.vx-vp[data-fs="true"] .vx-vp__i-min{display:block}

/* ——— перемотка ——— */
.vx-vp__seek{position:relative;height:18px;display:flex;align-items:center;cursor:pointer;touch-action:none;margin:0 4px 2px}
.vx-vp__track{position:relative;width:100%;height:4px;border-radius:var(--radius-pill);background:rgba(255,255,255,.22);
  transition:height .15s var(--ease-out)}
.vx-vp__buffered,.vx-vp__played{position:absolute;left:0;top:0;bottom:0;border-radius:inherit}
.vx-vp__buffered{width:var(--vp-buffered);background:rgba(255,255,255,.3)}
.vx-vp__played{width:var(--vp-played);background:var(--accent)}
.vx-vp__knob{position:absolute;top:50%;left:var(--vp-played);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  background:var(--amber-200);box-shadow:0 0 0 3px rgba(245,173,69,.25);transform:scale(0);transition:transform .15s var(--ease-out)}
.vx-vp__seek:hover .vx-vp__track,
.vx-vp[data-drag="true"] .vx-vp__track{height:6px}
.vx-vp__seek:hover .vx-vp__knob,
.vx-vp[data-drag="true"] .vx-vp__knob{transform:scale(1)}

/* Время под курсором — над полосой. */
.vx-vp__tip{position:absolute;bottom:20px;left:var(--vp-tip);transform:translateX(-50%);padding:2px 6px;
  border-radius:var(--radius-xs);background:rgba(12,9,6,.9);font:var(--type-mono-s);font-variant-numeric:tabular-nums;
  color:#fff;pointer-events:none;opacity:0;transition:opacity .12s}
.vx-vp__seek:hover .vx-vp__tip,
.vx-vp[data-drag="true"] .vx-vp__tip{opacity:1}

/* ——— громкость ——— */
.vx-vp__vol{display:inline-flex;align-items:center}
.vx-vp__range{--vp-vol:100%;width:0;opacity:0;height:4px;margin:0;cursor:pointer;appearance:none;-webkit-appearance:none;
  border-radius:var(--radius-pill);
  background:linear-gradient(to right,var(--accent) var(--vp-vol),rgba(255,255,255,.25) var(--vp-vol));
  transition:width .2s var(--ease-out),opacity .2s var(--ease-out),margin .2s}
.vx-vp__vol:hover .vx-vp__range,
.vx-vp__range:focus-visible{width:72px;opacity:1;margin:0 6px 0 2px}
.vx-vp__range::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--amber-200);border:0}
.vx-vp__range::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--amber-200);border:0}

/* ——— скорость ——— */
.vx-vp__speed{position:relative}
.vx-vp__menu{position:absolute;right:0;bottom:40px;display:none;flex-direction:column;padding:4px;min-width:80px;
  border-radius:var(--radius-md);background:rgba(20,15,10,.96);border:1px solid rgba(255,255,255,.1);box-shadow:var(--shadow-3)}
.vx-vp[data-menu="true"] .vx-vp__menu{display:flex}
.vx-vp__rate{border:0;background:transparent;color:rgba(255,255,255,.85);font:var(--type-mono-s);text-align:left;
  padding:6px 10px;border-radius:var(--radius-sm);cursor:pointer}
.vx-vp__rate:hover{background:rgba(255,255,255,.1);color:#fff}
.vx-vp__rate[aria-checked="true"]{color:var(--amber-300)}

/* ——— узко: телефон или врезка в админке ——— */
@container (max-width:420px){
  .vx-vp__range{display:none}
  .vx-vp__big{width:56px;height:56px;margin:-28px 0 0 -28px}
}
.vx-vp{container-type:inline-size}
@media (hover:none){
  /* Касание не наводит: ползунок громкости на телефоне не открыть, а звук там
     правят кнопками самого телефона. */
  .vx-vp__range{display:none}
}