/* Плеер экскурсии — один на все страницы.
 *
 * Главная мысль: тот же прямоугольник — то ролик, где голос ведёт по
 * интерфейсу, то живой стенд в том же состоянии. Переход между режимами не
 * уводит со страницы и не теряет место в рассказе.
 *
 * Живой стенд ВСЕГДА разворачивается на весь экран: интерфейс задуман
 * полноэкранным, и в окошке на треть экрана по нему ничего не понять.
 */
.stage { position: relative; border-radius: var(--rad); overflow: hidden; background: #000;
  aspect-ratio: 16/9; box-shadow: var(--shadow); border: 1px solid var(--line) }
.stage video, .stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block }
.stage iframe { background: #fff }
/* пока идёт ролик — стенд скрыт, и наоборот: место одно */
.stage[data-mode="live"] video { visibility: hidden }
.stage[data-mode="tour"] iframe { visibility: hidden; pointer-events: none }
/* на весь экран рамки и скругления ни к чему */
.stage:fullscreen { border: 0; border-radius: 0; aspect-ratio: auto; width: 100vw; height: 100vh }
.stage:fullscreen video { object-fit: contain }

/* большая кнопка запуска поверх постера */
.stage .start { position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,.12), rgba(0,0,0,.6)); border: 0; color: var(--ink);
  font: 600 17px/1 var(--sans); z-index: 4 }
.stage .start i { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); box-shadow: 0 22px 50px -18px rgba(0,209,193,.8) }
.stage .start i svg { width: 38px; height: 38px; fill: var(--on-accent); margin-left: 5px }
.stage.started .start, .stage[data-mode="live"] .start { display: none }

/* титры поверх ролика — тем же стилем, что в студии */
.stage .subs { position: absolute; left: 0; right: 0; bottom: 76px; display: flex; justify-content: center;
  padding: 0 6%; pointer-events: none; z-index: 3; transition: bottom .18s var(--ease) }
.stage.idle .subs { bottom: 34px }
.stage .subs > div { display: flex; flex-wrap: wrap; gap: 0 .5em; justify-content: center;
  font: 800 clamp(15px, 2.1vw, 30px)/1.22 var(--sans); letter-spacing: -.015em }
.stage .subs span { color: #0b0f16; padding: 2px 0; border-radius: 8px;
  -webkit-text-stroke: 6px #fff; paint-order: stroke fill }
.stage .subs span.on { background: #FFD400; padding: 2px .34em; -webkit-text-stroke: 0 }
.stage[data-mode="live"] .subs, .stage .subs.off { display: none }

/* ── Панель плеера: как в обычном плеере, внизу поверх кадра ───────────── */
.stage .ctl { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 34px 14px 10px;
  background: linear-gradient(transparent, rgba(4,10,9,.82) 42%);
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  opacity: 1; transition: opacity .2s var(--ease) }
.stage.idle .ctl { opacity: 0; pointer-events: none }
.stage[data-mode="live"] .ctl, .stage:not(.started) .ctl { display: none }
.stage .ctl button { background: none; border: 0; color: #fff; cursor: pointer; padding: 6px;
  display: grid; place-items: center; border-radius: 8px; line-height: 0 }
.stage .ctl button:hover { background: rgba(255,255,255,.14) }
.stage .ctl svg { width: 22px; height: 22px; fill: currentColor }
/* portal.css задаёт svg{display:block} и перебивает атрибут hidden —
   без этой строки в кнопке видно обе иконки разом */
.stage .ctl svg[hidden] { display: none }
.stage .ctl .time { font: 500 13px/1 var(--mono); color: #dfeceb; white-space: nowrap }
.stage .ctl .seek { flex: 1; position: relative; height: 20px; cursor: pointer; min-width: 60px }
.stage .ctl .seek .rail { position: absolute; left: 0; right: 0; top: 8px; height: 4px; border-radius: 99px;
  background: rgba(255,255,255,.26) }
.stage .ctl .seek .fill { position: absolute; left: 0; top: 8px; height: 4px; border-radius: 99px; background: var(--accent); width: 0 }
.stage .ctl .seek .dot { position: absolute; top: 4px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.6); left: 0 }
.stage .ctl .seek b { position: absolute; top: 6px; width: 2px; height: 8px; background: rgba(255,255,255,.6) }
.stage .ctl .vol { width: 74px; height: 4px; accent-color: var(--accent); cursor: pointer }
.stage .ctl .cc { font: 700 11px/1 var(--sans); letter-spacing: .04em; border: 1.5px solid rgba(255,255,255,.55);
  border-radius: 5px; padding: 3px 5px }
.stage .ctl .cc.on { background: #fff; color: #06100F; border-color: #fff }
.stage .ctl .cc[hidden] { display: none }
/* Кнопка «Дай потрогаю» живёт в двух местах, но никогда одновременно:
   в окне видна большая кнопка под видео, а в полноэкранном режиме её не
   видно — там работает кнопка в панели. Иначе два одинаковых призыва подряд. */
.stage .ctl .touch-min { display: none; background: var(--accent); color: var(--on-accent); font: 700 13px/1 var(--sans);
  padding: 9px 13px; border-radius: 9px; white-space: nowrap }
.stage:fullscreen .ctl .touch-min { display: inline-flex; align-items: center }
.stage .ctl .touch-min:hover { background: var(--accent); filter: brightness(1.08) }

/* Полоса возврата: над стендом, а НЕ поверх него. Раньше она висела
   absolute поверх интерфейса и накрывала его верхние полсотни пикселей —
   нельзя было ни закрыть окно ассистента, ни попасть в строку поиска.
   Теперь стенд начинается под полосой: та же высота вычитается у iframe. */
.stage { --lbh: 56px }
.stage .livebar { position: absolute; left: 0; right: 0; top: 0; z-index: 6; display: none;
  height: var(--lbh); box-sizing: border-box;
  align-items: center; gap: 14px; padding: 10px 14px;
  background: #06100F; border-bottom: 1px solid rgba(140,210,205,.16); color: #dfeceb;
  font: 500 14px/1.4 var(--sans) }
.stage[data-mode="live"] .livebar { display: flex }
.stage[data-mode="live"] iframe { top: var(--lbh); height: calc(100% - var(--lbh)) }
.stage .livebar .back { background: var(--accent); color: var(--on-accent); border: 0; border-radius: 10px;
  padding: 9px 15px; font: 700 14px/1 var(--sans); cursor: pointer; white-space: nowrap }

/* строка под сценой: подсказка и кнопка «дай потрогаю» */
.under { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap }
.under .hint { color: var(--muted); font: 500 14px/1.5 var(--sans); flex: 1; min-width: 200px }
.btn-touch { background: var(--accent); color: var(--on-accent); border: 0; border-radius: 12px;
  padding: 13px 20px; font: 700 15px/1 var(--sans); cursor: pointer; white-space: nowrap;
  box-shadow: 0 18px 40px -20px rgba(0,209,193,.9) }
.btn-touch:hover { filter: brightness(1.06) }

/* Всплывающий таймкод над полосой — как в любом плеере: без него нужный
   момент ищется только тыканьем наугад. */
.stage .ctl .seek .tip { position: absolute; bottom: 22px; transform: translateX(-50%);
  background: rgba(4,10,9,.92); color: #fff; font: 600 12px/1 var(--mono);
  padding: 5px 7px; border-radius: 6px; pointer-events: none; white-space: nowrap }
.stage .ctl .seek .tip[hidden] { display: none }

/* Досмотрел ролик — самое время потрогать систему. Подсказка живёт внутри
   сцены и указывает вниз-вправо: там кнопка и в окне (под кадром), и в
   полноэкранном режиме (в панели плеера). */
.stage .endhint { position: absolute; right: 26px; bottom: 88px; z-index: 6;
  display: flex; align-items: center; gap: 14px; pointer-events: none;
  animation: endhint-in .4s var(--ease) both }
.stage .endhint[hidden], .stage[data-mode="live"] .endhint { display: none }
.stage .endhint span { font: 700 clamp(14px, 1.4vw, 19px)/1.35 var(--sans); color: #fff; text-align: right;
  text-shadow: 0 2px 16px rgba(0,0,0,.85) }
.stage .endhint svg { width: 30px; height: 50px; flex: none; fill: none;
  stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.6)); animation: endhint-nudge 1.4s ease-in-out infinite }
@keyframes endhint-in { from { opacity: 0; transform: translateY(-8px) } to { opacity: 1; transform: none } }
@keyframes endhint-nudge { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(7px) } }
@media (max-width: 620px) { .stage .endhint { right: 14px; bottom: 76px } }

/* На телефоне в полосе возврата помещается только кнопка: пояснение про
   вымышленные данные там занимает три строки и съедает полстенда. */
@media (max-width: 700px) {
  .stage { --lbh: 52px }
  .stage .livebar span { display: none }
  .stage .livebar .back { font-size: 13px; padding: 8px 12px }
}

/* ── Телефон: в панель помещается не всё ────────────────────────────────
   На узком экране кнопки просто уезжали за край — не было ни пуска, ни
   разворота. Оставляем то, без чего плеер не плеер: пуск, полосу, звук,
   субтитры и полный экран. Ползунок громкости и «стоп» на телефоне не
   нужны: громкость там регулируют кнопками устройства, а вернуться в
   начало можно полосой. */
@media (max-width: 700px) {
  .stage .ctl { gap: 6px; padding: 30px 8px 8px }
  .stage .ctl button { padding: 7px }
  .stage .ctl .vol,
  .stage .ctl [data-el="stop"],
  .stage .ctl [data-el="tdur"] { display: none }
  .stage .ctl .time { font-size: 12px }
  .stage .ctl .cc { padding: 4px 5px }
  .stage .endhint span { font-size: 13px }
  .stage .endhint svg { width: 24px; height: 40px }
}

/* Запасной полный экран для телефонов, где настоящий недоступен.
   Сцена растягивается на весь вьюпорт, страница под ней не скроллится. */
.stage.cover {
  position: fixed; inset: 0; z-index: 200; width: 100vw; height: 100dvh;
  border-radius: 0; aspect-ratio: auto; max-height: none;
}
body.stage-cover { overflow: hidden }
.stage.cover .ctl .touch-min { display: inline-flex; align-items: center }

/* Переход «ролик → живая система»: мгновенная подмена читается как сбой —
   кадр моргнул, и вдруг другой экран. Здесь система разворачивается: кадр
   уходит вглубь, стенд выезжает поверх него. */
.stage iframe { transform-origin: center; }
.stage[data-mode=live] iframe { animation: live-in .42s cubic-bezier(.2,.7,.25,1) both }
.stage[data-mode=live] video { animation: tour-out .3s ease both }
@keyframes live-in {
  from { opacity: 0; transform: scale(1.06) translateY(10px) }
  to { opacity: 1; transform: none }
}
@keyframes tour-out {
  from { opacity: 1; transform: none }
  to { opacity: 0; transform: scale(.97) }
}
/* полоса возврата приезжает следом, а не одновременно с системой */
.stage[data-mode=live] .livebar { animation: bar-in .3s .18s ease both }
@keyframes bar-in { from { opacity: 0; transform: translateY(-8px) } to { opacity: 1; transform: none } }