/* Плеер видеоуроков Amazon Relay: кадр 16:9 и управление поверх кадра, как в обычных
   видеоплеерах. Во время просмотра панель прячется, на паузе видна всегда.
   Логика — js/relay-player.js, кадр рисует js/relay-motion.js. */

.player { --chrome:170px; max-width:min(1320px, calc((100dvh - var(--chrome)) * 16 / 9)); margin:0 auto; scroll-margin-top:74px; }
.pbox { position:relative;
    --vp-btn:40px; --vp-ico:24px; --vp-pad:12px; --vp-padb:6px; --vp-fs:14px;
    --vp-h:calc(var(--vp-btn) + 22px + var(--vp-padb)); }
.stage { position:relative; width:100%; aspect-ratio:16/9; background:#080d18; border:1px solid rgba(255,255,255,.10); border-radius:18px; overflow:hidden; --u:11px; }
.stage .rm-canvas { cursor:default; }

/* полный экран: настоящий (Fullscreen API) или «ненастоящий» там, где его нет (iPhone) */
.pbox:fullscreen, .pbox.fsfake { background:var(--lt-c-000000, #000); display:flex; align-items:center; justify-content:center; max-width:none;
    --vp-btn:48px; --vp-ico:28px; --vp-pad:20px; --vp-padb:12px; --vp-fs:15px; }
.pbox.fsfake { position:fixed; inset:0; z-index:9999; }
.pbox:fullscreen .stage, .pbox.fsfake .stage { width:100vw; height:100dvh; max-width:none; aspect-ratio:auto; border-radius:0; border:none; }
/* вертикальный телефон: плеер разворачиваем боком, чтобы кадр занял весь экран */
.pbox.rot { position:fixed; inset:auto; top:50%; left:50%; width:100dvh; height:100vw; transform:translate(-50%,-50%) rotate(90deg); transform-origin:center; }
.pbox.rot .stage { width:100%; height:100%; }

/* заставка и кнопка старта */
.poster { position:absolute; inset:0; z-index:10; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(var(--u)*1.6); background:linear-gradient(160deg,#0a1120,#0e1830); cursor:pointer; }
.poster.hide { display:none; }
.poster .pt { font-size:calc(var(--u)*3.4); font-weight:900; text-align:center; line-height:1.15; }
.poster .ps { font-size:calc(var(--u)*1.5); color:var(--text-muted); }
.bigplay { width:calc(var(--u)*7); height:calc(var(--u)*7); border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--amz)); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 calc(var(--u)*.8) calc(var(--u)*3) rgba(6,182,212,.35); transition:transform .2s; }
.bigplay svg { width:calc(var(--u)*2.6); height:calc(var(--u)*2.6); fill:#fff; margin-left:calc(var(--u)*.3); }

/* субтитры: в кадре над панелью, подложка по строкам, как в обычных плеерах;
   на узком экране — текстом под кадром */
.subs { position:absolute; left:0; right:0; bottom:calc(var(--u)*2.4); padding:0 9%; text-align:center; text-wrap:balance; z-index:6; pointer-events:none; transition:bottom .25s ease; }
.pbox:not(.vp-pre):not(.vp-hide) .stage > .subs { bottom:calc(var(--vp-h) + 6px); }
.subs.off { display:none; }
.subs .stx { background:rgba(8,11,20,.74); padding:.1em .42em; border-radius:.24em; -webkit-box-decoration-break:clone; box-decoration-break:clone;
    font-size:max(13px, calc(var(--u)*1.5)); line-height:1.52; color:#fff; font-weight:500; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.subs.below { position:static; padding:0; margin-top:10px; text-align:left; }
.subs.below .stx { display:block; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-left:3px solid var(--amz); border-radius:12px; padding:11px 14px; font-size:15px; line-height:1.55; color:var(--text-secondary); text-shadow:none; }

/* ===== управление поверх кадра ===== */
.vp { position:absolute; inset:0; z-index:20; pointer-events:none; color:#fff; font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; }
.pbox.vp-pre .vp { display:none; }
.vp-hit { position:absolute; inset:0; pointer-events:auto; cursor:pointer; touch-action:manipulation; }
.pbox.vp-hide .vp-hit { cursor:none; }
.pbox.fsfake .vp-hit { touch-action:none; }
.vp-fx { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.vp-scrim { position:absolute; left:0; right:0; bottom:0; height:calc(var(--vp-h) + 70px); pointer-events:none;
    background:linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.42) 50%, rgba(0,0,0,0)); transition:opacity .25s; }
.vp-bar { position:absolute; left:0; right:0; bottom:0; padding:0 var(--vp-pad) var(--vp-padb); pointer-events:auto; transition:opacity .25s; }
.pbox.vp-hide .vp-scrim, .pbox.vp-hide .vp-bar { opacity:0; }
.pbox.vp-hide .vp-bar { pointer-events:none; }

/* полоса перемотки: тонкая, под курсором толще; пропуски между главами, подсказка с временем и главой */
.vp-track { position:relative; height:22px; margin:0 2px; display:flex; align-items:center; cursor:pointer; touch-action:none; outline:none; }
.vp-rail { position:relative; flex:1; height:4px; border-radius:3px; background:rgba(255,255,255,.24); transition:height .12s; }
.vp-buf, .vp-hov, .vp-fill { position:absolute; left:0; top:0; bottom:0; width:0; border-radius:inherit; }
.vp-buf { background:rgba(255,255,255,.26); }
.vp-hov { background:rgba(255,255,255,.3); opacity:0; }
.vp-fill { background:linear-gradient(90deg,var(--primary),var(--amz)); }
.vp-gap { position:absolute; top:-1px; bottom:-1px; width:3px; margin-left:-1.5px; background:rgba(0,0,0,.6); }
.vp-knob { position:absolute; top:50%; left:0; width:15px; height:15px; margin:-7.5px 0 0 -7.5px; border-radius:50%; background:#fff; box-shadow:0 0 0 4px rgba(255,153,0,.35), 0 1px 4px rgba(0,0,0,.5); transform:scale(0); transition:transform .12s; }
.vp-tip { position:absolute; bottom:24px; left:0; transform:translateX(-50%); max-width:260px; padding:6px 10px; border-radius:9px; background:rgba(11,15,26,.94); border:1px solid rgba(255,255,255,.14); box-shadow:0 6px 20px rgba(0,0,0,.45);
    font-size:12.5px; font-weight:600; line-height:1.3; text-align:center; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .12s; }
.vp-tip b { display:block; font:700 14px ui-monospace,Menlo,Consolas,monospace; color:#fff; }
.vp-tip span { display:block; color:rgba(255,255,255,.72); overflow:hidden; text-overflow:ellipsis; }
.vp.drag .vp-rail { height:7px; }
.vp.drag .vp-knob, .vp-track:focus-visible .vp-knob, .pbox.vp-touch .vp-knob { transform:scale(1); }
.vp.tip .vp-hov { opacity:1; }
.vp.tip .vp-tip, .vp.drag .vp-tip { opacity:1; }
.vp-track:focus-visible .vp-rail { box-shadow:0 0 0 2px var(--amz); }

/* ряд кнопок */
.vp-row { display:flex; align-items:center; gap:2px; height:var(--vp-btn); }
.vp-btn { position:relative; flex:0 0 auto; width:var(--vp-btn); height:var(--vp-btn); display:flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:10px; background:transparent; color:#fff; cursor:pointer; opacity:.94; transition:background .15s, opacity .15s; }
.vp-btn:focus-visible { outline:2px solid var(--lt-l-ff9900, var(--amz)); outline-offset:1px; }
.vp-btn svg { width:var(--vp-ico); height:var(--vp-ico); fill:currentColor; display:block; }
.vp-btn svg text { font:800 7.4px Inter,sans-serif; fill:currentColor; }
.vp-rate { width:auto; min-width:var(--vp-btn); padding:0 9px; font:800 var(--vp-fs) Inter,sans-serif; letter-spacing:.01em; }
.vp-cc.off { opacity:.55; }
.vp-cc:not(.off)::after { content:''; position:absolute; left:28%; right:28%; bottom:calc(var(--vp-btn) * .14); height:3px; border-radius:2px; background:var(--amz); }
.vp-time { flex:0 0 auto; margin:0 6px 0 8px; white-space:nowrap; font:600 var(--vp-fs) ui-monospace,Menlo,Consolas,monospace; font-variant-numeric:tabular-nums; color:rgba(255,255,255,.95); }
.vp-time i { font-style:normal; color:rgba(255,255,255,.62); }
.vp-chap { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--vp-fs); font-weight:600; color:rgba(255,255,255,.82); }
.vp-chap:not(:empty)::before { content:'·'; margin-right:8px; color:rgba(255,255,255,.5); }
.vp-sp { flex:1 1 auto; min-width:6px; }
.vp-vol { display:flex; align-items:center; flex:0 0 auto; }
.vp-vol input { width:0; margin:0; opacity:0; accent-color:var(--amz); cursor:pointer; transition:width .2s, opacity .2s, margin .2s; }
.vp-vol:focus-within input { width:78px; margin:0 8px 0 2px; opacity:1; }

/* большая кнопка на паузе, отклик на нажатие, перемотка двойным касанием, ожидание звука */
.vp-big { position:absolute; left:50%; top:50%; width:78px; height:78px; margin:-39px 0 0 -39px; border:0; border-radius:50%; padding:0; display:flex; align-items:center; justify-content:center;
    background:rgba(8,13,24,.66); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28), 0 10px 30px rgba(0,0,0,.35);
    color:#fff; cursor:pointer; opacity:0; transform:scale(.85); pointer-events:none; transition:opacity .2s, transform .2s, background .2s; }
.vp-big svg { width:38px; height:38px; fill:currentColor; }
.vp-big svg.pl { margin-left:4px; }
.pbox.vp-paused:not(.vp-hide) .vp-big { opacity:1; transform:none; pointer-events:auto; }
.vp.drag .vp-big { opacity:0 !important; pointer-events:none !important; }
.vp-big:focus-visible { outline:2px solid var(--lt-l-ff9900, var(--amz)); outline-offset:3px; }
.vp-flash { position:absolute; left:50%; top:50%; width:66px; height:66px; margin:-33px 0 0 -33px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--lt-c-00000080, rgba(0,0,0,.5)); color:var(--lt-i-ffffff, #fff); pointer-events:none; opacity:0; }
.vp-flash svg { width:32px; height:32px; fill:currentColor; }
.vp-flash.t { width:auto; height:auto; margin:0; padding:10px 16px; border-radius:99px; transform:translate(-50%,-50%); font:800 16px Inter,sans-serif; white-space:nowrap; }
.vp-flash.t.l { left:20%; } .vp-flash.t.r { left:80%; }
.vp-spin { position:absolute; left:50%; top:50%; width:52px; height:52px; margin:-26px 0 0 -26px; border-radius:50%; border:4px solid rgba(255,255,255,.22); border-top-color:#fff; opacity:0; pointer-events:none; animation:vpSpin .8s linear infinite; transition:opacity .2s; }
.pbox.vp-wait .vp-spin { opacity:1; transition-delay:.35s; }
@keyframes vpSpin { to { transform:rotate(360deg); } }

/* наведение — только там, где есть мышь: на телефоне :hover «залипает» после касания */
@media (hover:hover) {
    .bigplay:hover { transform:scale(1.06); }
    .vp-btn:hover { background:rgba(255,255,255,.13); opacity:1; }
    .vp-track:hover .vp-rail { height:7px; }
    .vp-track:hover .vp-knob { transform:scale(1); }
    .vp-vol:hover input { width:78px; margin:0 8px 0 2px; opacity:1; }
    .vp-big:hover { background:linear-gradient(135deg,var(--primary),var(--amz)); }
}

/* узкий плеер: сначала прячем главу и громкость, потом кнопки перемотки */
.pbox.vp-s .vp-vol input { display:none; }
.pbox.vp-xs { --vp-btn:38px; --vp-ico:22px; --vp-pad:6px; --vp-padb:2px; --vp-fs:13px; }
.pbox.vp-xs .vp-chap, .pbox.vp-xs .vp-vol, .pbox.vp-xs .vp-skip { display:none; }
.pbox.vp-xs .vp-time { margin:0 4px; }
.pbox.vp-xs .vp-big { width:62px; height:62px; margin:-31px 0 0 -31px; }
.pbox.vp-xs .vp-big svg { width:30px; height:30px; }
@media (pointer:coarse) { .vp-vol input { display:none; } }

@media (max-width:900px) {
    .player { --chrome:210px; }
    .subs .stx { font-size:14px; }
}
@media (prefers-reduced-motion:reduce) { .vp *, .subs { transition:none !important; } }