/* ============================================================
   GEIZER Shorts · плавающий мини-плеер слева, над кнопкой квиза
   Только подпись + звук + листание. Ничего лишнего.
   ============================================================ */

.shw{position:fixed;left:22px;bottom:92px;z-index:205;width:158px;
  opacity:0;visibility:hidden;transform:translateY(12px) scale(.94);
  transition:opacity .35s,visibility .35s,transform .35s cubic-bezier(.3,1.3,.4,1),width .3s ease}
.shw.is-on{opacity:1;visibility:visible;transform:none}
/* крупный режим — «немного увеличить, чтобы было чётче видно». Растёт вверх и вправо
   (плеер прижат к низу и левому краю). Высоту кадра держит aspect-ratio, поэтому
   меняем только ширину. Ограничение по высоте экрана — чтобы не уезжал за верх. */
.shw.is-big{width:min(240px,26vw,calc((100vh - 150px) * 9 / 16))}

/* Подпись. Плеер висит поверх произвольного контента, поэтому у неё своя
   подложка — без неё текст тонет на светлых секциях. */
.shw-cap{display:flex;align-items:center;gap:7px;width:fit-content;margin-bottom:7px;
  padding:6px 10px;border-radius:999px;border:1px solid rgba(120,180,255,.28);
  background:rgba(5,15,34,.82);backdrop-filter:blur(10px)}
.shw-cap i{width:6px;height:6px;border-radius:50%;background:#41c2ff;box-shadow:0 0 8px #41c2ff;animation:shwBlink 2.2s infinite}
@keyframes shwBlink{50%{opacity:.35}}
.shw-cap b{color:#cfe2f7;font:800 9px/1 Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.shw-cap button{width:18px;height:18px;border:0;border-radius:5px;background:transparent;padding:0;
  display:grid;place-items:center;color:#7f95b4;cursor:pointer;transition:.2s}
.shw-cap button:hover{background:rgba(255,255,255,.1);color:#fff}
.shw-size{margin-left:auto}        /* прижимает пару кнопок вправо */
.shw-close{font:400 14px/1 Arial,sans-serif}
.shw-size svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.shw-size .shw-ic-shrink{display:none}
.shw-size[aria-pressed="true"] .shw-ic-grow{display:none}
.shw-size[aria-pressed="true"] .shw-ic-shrink{display:block}
.shw-size[aria-pressed="true"]{color:#41c2ff}

/* Плеер.
   ВАЖНО: внутри кадра нет ни одного backdrop-filter. Размытие подложки поверх
   играющего видео заставляет GPU пересчитывать блюр на каждом кадре — пять таких
   слоёв (звук, микшер, пауза, две стрелки) роняли плеер в заметные подлагивания.
   Вместо блюра — плотный полупрозрачный фон, визуально почти то же самое.
   contain изолирует перерисовку кадра от остальной страницы. */
.shw-frame{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#050f22;
  border:1px solid rgba(80,163,238,.32);box-shadow:0 26px 60px -18px rgba(0,6,22,.95);
  contain:paint}
.shw-frame iframe,
.shw-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:cover;background:#050f22}
.shw-loader{position:absolute;inset:0;z-index:2;display:none;place-items:center;background:#050f22}
.shw-frame.is-loading .shw-loader{display:grid}
.shw-loader i{width:20px;height:20px;border-radius:50%;border:2px solid rgba(65,194,255,.25);border-top-color:#41c2ff;animation:shwSpin .8s linear infinite}
@keyframes shwSpin{to{transform:rotate(360deg)}}

/* звук: кнопка + микшер, который выезжает вниз при наведении */
.shw-sound{position:absolute;z-index:5;right:7px;top:7px;display:flex;flex-direction:column;align-items:center}
.shw-mute{width:28px;height:28px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;border:1px solid rgba(120,180,255,.3);background:rgba(5,15,34,.92);
  color:#dff0ff;transition:.22s}

/* Микшер. order:2 — визуально под кнопкой, но в разметке идёт первым,
   чтобы фокус с клавиатуры приходил на кнопку раньше ползунка. */
.shw-vol{order:2;overflow:hidden;height:0;opacity:0;margin-top:0;
  transition:height .24s,opacity .18s,margin-top .24s}
.shw-sound:hover .shw-vol,
.shw-sound:focus-within .shw-vol{height:92px;opacity:1;margin-top:6px}

.shw-range{-webkit-appearance:none;appearance:none;writing-mode:vertical-lr;direction:rtl;
  width:22px;height:92px;margin:0;padding:6px 0;cursor:pointer;border-radius:999px;
  border:1px solid rgba(120,180,255,.3);background:rgba(5,15,34,.95)}
/* Chrome не умеет красить пройденную часть дорожки — рисуем её градиентом
   по переменной --v, которую выставляет скрипт при каждом изменении громкости */
.shw-range::-webkit-slider-runnable-track{width:3px;border-radius:999px;
  background:linear-gradient(to top,#41c2ff calc(var(--v,.7) * 100%),rgba(190,220,255,.28) 0)}
.shw-range::-moz-range-track{width:3px;border-radius:999px;background:rgba(190,220,255,.28)}
.shw-range::-moz-range-progress{width:3px;border-radius:999px;background:#41c2ff}
.shw-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:11px;height:11px;border-radius:50%;
  border:0;background:#fff;box-shadow:0 0 0 3px rgba(8,134,255,.45);margin-left:-4px}
.shw-range::-moz-range-thumb{width:11px;height:11px;border-radius:50%;border:0;background:#fff;
  box-shadow:0 0 0 3px rgba(8,134,255,.45)}
.shw-range:focus-visible{outline:2px solid #41c2ff;outline-offset:2px}
/* звук выключен — микшер приглушаем, чтобы не спорил с иконкой */
.shw.is-muted .shw-range{opacity:.5}
/* на VK-эмбеде звуком управлять нельзя — не показываем то, что не работает */
.shw.is-vk .shw-sound{display:none}
.shw-mute:hover{background:#0886ff;border-color:transparent;color:#fff}
.shw-mute svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.shw-mute .shw-on{display:none}
.shw-mute[aria-pressed="false"] .shw-off{display:none}
.shw-mute[aria-pressed="false"] .shw-on{display:block}
.shw-mute[aria-pressed="false"]{background:#0886ff;border-color:transparent;color:#fff}

/* листание — стрелки поверх, появляются при наведении */
.shw-nav{position:absolute;z-index:4;left:50%;transform:translateX(-50%);width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;border:1px solid rgba(120,180,255,.3);
  background:rgba(5,15,34,.92);color:#dff0ff;opacity:0;transition:.22s}
.shw:hover .shw-nav{opacity:1}
.shw-nav:hover{background:#0886ff;border-color:transparent}
.shw-nav svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.shw-up{top:42px}
.shw-down{bottom:48px}   /* выше полосы перемотки, иначе перекрывают друг друга */

/* пауза: кнопка по центру кадра — при наведении, а на паузе видна всегда */
.shw-play{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(120,180,255,.3);background:rgba(5,15,34,.86);
  color:#eaf4ff;opacity:0;transition:opacity .22s,background .22s,transform .22s}
.shw:hover .shw-play,
.shw.is-paused .shw-play{opacity:1}
.shw-play:hover{background:#0886ff;border-color:transparent;transform:translate(-50%,-50%) scale(1.06)}
.shw-play svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.shw-play .shw-ic-play{fill:currentColor;stroke:none;margin-left:2px}
.shw-play .shw-ic-play{display:none}
.shw.is-paused .shw-play .shw-ic-pause{display:none}
.shw.is-paused .shw-play .shw-ic-play{display:block}

/* перемотка: тонкая полоса над счётчиком, толстеет при наведении на плеер */
.shw-seek{position:absolute;z-index:5;left:7px;right:7px;bottom:26px;width:auto;height:14px;margin:0;
  -webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
.shw-seek::-webkit-slider-runnable-track{height:3px;border-radius:999px;
  background:linear-gradient(to right,#41c2ff calc(var(--p,0) * 100%),rgba(220,235,255,.3) 0);
  transition:height .18s}
.shw-seek::-moz-range-track{height:3px;border-radius:999px;background:rgba(220,235,255,.3)}
.shw-seek::-moz-range-progress{height:3px;border-radius:999px;background:#41c2ff}
.shw-seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:9px;height:9px;border-radius:50%;
  border:0;background:#fff;box-shadow:0 0 0 3px rgba(8,134,255,.45);margin-top:-3px;
  opacity:0;transition:opacity .18s}
.shw-seek::-moz-range-thumb{width:9px;height:9px;border-radius:50%;border:0;background:#fff;
  box-shadow:0 0 0 3px rgba(8,134,255,.45);opacity:0;transition:opacity .18s}
.shw:hover .shw-seek::-webkit-slider-thumb{opacity:1}
.shw:hover .shw-seek::-moz-range-thumb{opacity:1}
.shw:hover .shw-seek::-webkit-slider-runnable-track{height:4px}
.shw-seek:focus-visible{outline:2px solid #41c2ff;outline-offset:2px;border-radius:999px}
/* на VK-эмбеде ни паузы, ни перемотки у нас нет */
.shw.is-vk .shw-play,
.shw.is-vk .shw-seek{display:none}

.shw-count{position:absolute;z-index:4;left:7px;bottom:7px;padding:3px 7px;border-radius:999px;
  background:rgba(5,15,34,.75);color:#9db8d8;font:700 8px/1 Arial,sans-serif;pointer-events:none}
.shw-count b{color:#fff}

/* полоски-индикаторы сверху, как в сторис */
.shw-bars{position:absolute;z-index:4;left:7px;right:40px;top:7px;display:flex;gap:2px;pointer-events:none}
.shw-bars i{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.25);transition:.3s}
.shw-bars i.on{background:#41c2ff;box-shadow:0 0 6px rgba(65,194,255,.9)}

/* свёрнутое состояние */
.shw.is-min .shw-frame{display:none}
.shw.is-min{width:auto}
.shw.is-min .shw-cap{padding:8px 12px;margin:0;border-color:rgba(120,180,255,.35);
  background:linear-gradient(120deg,rgba(10,32,68,.96),rgba(6,20,44,.96));cursor:pointer}

@media (max-width:900px){ .shw{display:none} }   /* на мобильном не мешаем — там мало места */
@media (prefers-reduced-motion:reduce){.shw-cap i{animation:none}}

/* ============================================================
   Телефон · пункт «Шортс» в меню и просмотр во весь экран

   Плавающий плеер под 901 px не показывается — он занял бы четверть
   экрана поверх текста. Ролики переехали в меню отдельным пунктом.
   ============================================================ */
.hub-shorts{display:none}
@media(max-width:900px){
  .hub-shorts{
    display:flex;align-items:center;gap:10px;width:100%;
    padding:0;border:0;background:transparent;color:inherit;
    font:inherit;text-align:left;cursor:pointer
  }
  /* Точка того же цвета, что и «в эфире» у плеера на десктопе:
     пункт читается как живой контент, а не как ещё одна ссылка. */
  .hub-shorts i{
    flex:0 0 auto;width:7px;height:7px;border-radius:50%;
    background:#41c2ff;box-shadow:0 0 8px #41c2ff
  }
}

.shm{
  width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;
  margin:0;padding:0;border:0;background:#030c1c;overflow:hidden
}
.shm::backdrop{background:#030c1c}
.shm-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;background:#030c1c
}
.shm-close{
  position:absolute;z-index:3;right:12px;top:12px;width:42px;height:42px;
  border:0;border-radius:50%;background:rgba(8,24,50,.72);color:#fff;
  font:400 26px/1 Arial,sans-serif;cursor:pointer
}
/* Панель перелистывания над нативными кнопками плеера, иначе она
   накрывает полосу перемотки и промахнуться проще, чем попасть. */
.shm-bar{
  position:absolute;z-index:3;left:0;right:0;bottom:78px;
  display:flex;align-items:center;justify-content:center;gap:18px;
  pointer-events:none
}
.shm-bar button{
  pointer-events:auto;width:46px;height:46px;border:0;border-radius:50%;
  background:rgba(8,24,50,.72);color:#fff;font:400 26px/1 Arial,sans-serif;cursor:pointer
}
.shm-count{
  pointer-events:none;padding:6px 12px;border-radius:999px;
  background:rgba(8,24,50,.72);color:#cfe2f7;
  font:800 12px/1 Arial,sans-serif;font-variant-numeric:tabular-nums
}
.shm-close:focus-visible,.shm-bar button:focus-visible{outline:2px solid #45bbff;outline-offset:2px}