/* ═══════════════════════════════════════════════════════════════════
   overrides.css — исправления под требования Яндекс Игр
   п. 1.10.1 (обрезка) · 1.10.3 (перекрытия) · 1.15 (читаемость) · 1.8 (тач)
   Подключается ПОСЛЕ styles.css, поэтому переопределяет его.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Читаемость: ни одного кегля меньше 11px ────────────────────────
   Список сгенерирован автоматическим сканом styles.css (67 правил).
   Это закрывает замечание модерации «Трудночитаемый текст» (п. 1.15). */

.archive-method-card small,
.archive-method-card button,
.reward-pagination,
.vn-brand small {
  font-size: 11px !important;
}

.memory-spine,
.memory-spine small,
.vn-stats,
.dialogue-footer {
  font-size: 11px !important;
}

.choice-kicker,
.vn-footer,
.vn-footer button,
.history-panel p b {
  font-size: 11px !important;
}

.save-slot small,
.save-slot span,
.save-actions button,.empty-slot button,
.settings-panel output {
  font-size: 11px !important;
}

.save-toast,
.phone-status,
.phone-evidence,
.phone-evidence strong {
  font-size: 11px !important;
}

.phone-tabs button,
.phone-call-list span,
.phone-map small,
.microtask-actions button {
  font-size: 11px !important;
}

.paper-folio,
.archive-folio-mark,
.content-warning-accept,
.vn-scene-meta {
  font-size: 11px !important;
}

.replay-map-actions button,
.cloud-sync-panel small,
.cloud-sync-actions button,
.phone-device-status {
  font-size: 11px !important;
}

.phone-app-kicker,
.phone-app-tabs button,
.phone-thread-label,
.phone-message b {
  font-size: 11px !important;
}

.phone-message small,
.vn-brand,
.choice-archive-head,
.main-menu-title-row p {
  font-size: 11px !important;
}

.main-menu-footnote,
.settings-tutorial-replay,
.tutorial-kicker,
.tutorial-actions button {
  font-size: 11px !important;
}

.phone-more-menu button,
.phone-device-info b,
.phone-conversation-prompt,
.phone-thread-complete {
  font-size: 11px !important;
}

.timed-choice-status,
.completion-progress b,
.completion-actions button,
.archive-tabs button {
  font-size: 11px !important;
}

.archive-dossier span,.archive-dossier small,
.archive-entry small,.archive-detail small,
.archive-detail button,
.compact-reward-collection .reward-progress-summary span {
  font-size: 11px !important;
}

.archive-collection-guide b,
.compact-reward-card small,
.compact-reward-actions button,.compact-reward-actions .reward-card-status,
.startup-loading-kicker {
  font-size: 11px !important;
}

.startup-loading-progress b,
.scene-transition-chapter:after,
.source-discovery-toast,
.cosmetic-theme-actions button,.quiet-archive-card button {
  font-size: 11px !important;
}

.reward-progress-summary span,
.reward-card-status,
.completion-card[data-completion-seal]:not([data-completion-seal=default]):after {
  font-size: 11px !important;
}


/* Декоративные кикеры и служебные подписи — 11px и плотнее, но разборчиво */
.choice-kicker,
.tutorial-kicker,
.startup-loading-kicker,
.phone-app-kicker,
.archive-folio-mark {
  font-size: 11px !important;
  letter-spacing: .16em !important;
  line-height: 1.35 !important;
}

/* ── 2. Контраст: текст должен читаться, а не угадываться ───────────── */

.dialogue-footer { color: #4a3327 !important; }

.paper-folio { color: #5c362d !important; }

.cloud-sync-panel small { color: #b9a79c !important; }

.phone-message small { color: #b6a49d !important; }

.phone-thread-label { color: #bd9a9e !important; }

.main-menu-footnote { color: #c0aca5 !important; }

.phone-app-tabs button { color: #bfa9a1 !important; }

.vn-footer { color: #c3b4a8 !important; }


/* На светлой диалоговой панели тёмный текст, в «внутреннем голосе» — светлый */
.dialogue-panel:not(.inner-voice) .dialogue-footer { color: #4a3327 !important; }
.dialogue-panel.inner-voice .dialogue-footer { color: #d8bfb4 !important; }

/* ── 3. п. 1.10.1 — текст не обрезается ────────────────────────────────
   .dialogue-panel имел height в px + overflow:hidden, из-за чего длинные
   реплики (до 234 символов) обрезались на экранах ≤360px. */
.dialogue-panel {
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  /* Нижний край диалога всегда выше зоны кнопок на --vn-gap (см. раздел 4). */
  bottom: calc(var(--vn-foot, 54px) + var(--vn-gap, 10px) + env(safe-area-inset-bottom, 0px)) !important;
  max-height: calc(100dvh - var(--vn-hud, 104px) - var(--vn-foot, 54px)
                   - var(--vn-gap, 10px) * 2 - env(safe-area-inset-bottom, 0px)) !important;
}
.dialogue-panel p {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #a33b4b66 transparent;
}
.dialogue-panel p::-webkit-scrollbar { width: 4px; }
.dialogue-panel p::-webkit-scrollbar-thumb { background: #a33b4b66; border-radius: 2px; }

/* Метасцена больше не режется до 42px — переносим на две строки */
.vn-scene-meta {
  max-width: min(46vw, 220px) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 4. п. 1.10.3 — элементы не накладываются ──────────────────────────
   Корень проблемы: HUD висел в фиксированных px (top:128px / top:145px),
   а диалоговое окно и футер — от bottom. На коротких экранах зоны
   сталкивались: замер показал пересечение края диалога и футера
   на 2–10 px на экранах 320×568, 360×640 и 844×390.
   Здесь нижние зоны считаются от одной и той же высоты футера,
   поэтому зазор между ними гарантирован при любой высоте экрана. */
:root {
  --vn-hud: 104px;      /* шапка + строка статов */
  --vn-foot-h: 44px;    /* высота строки кнопок управления */
  --vn-foot-gap: 10px;  /* отступ кнопок от нижнего края */
  --vn-foot: calc(var(--vn-foot-h) + var(--vn-foot-gap));
  --vn-gap: 10px;       /* гарантированный зазор между зонами */
}

.vn-character { bottom: 15% !important; }

.vn-footer {
  inset: auto clamp(10px, 2.4vw, 38px) calc(var(--vn-foot-gap) + env(safe-area-inset-bottom)) !important;
  gap: 10px;
  min-height: var(--vn-foot-h) !important;
}
.vn-footer button { min-height: var(--vn-foot-h) !important; }

.vn-header {
  inset: 0 0 auto !important;
  padding: max(12px, env(safe-area-inset-top)) clamp(10px, 2.4vw, 38px) 10px !important;
  gap: 8px !important;
}
/* Подпись сцены и кнопки инструментов сидели в одном ряду и перекрывались
   на узких экранах (замер: 31 px на 390×844). Теперь подпись — гибкий
   элемент с многоточием, а кнопки не сжимаются. */
.vn-tools { flex: 0 0 auto !important; }
.vn-scene-meta {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  position: static !important;
  max-width: min(42vw, 260px) !important;
  /* Переносим, а не режем многоточием: «СПАЛЬНЯ · 07:14» должно читаться целиком. */
  overflow: visible !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  text-align: right !important;
  line-height: 1.25 !important;
}

.vn-stats,
.memory-spine {
  max-height: calc(100dvh - var(--vn-hud) - var(--vn-foot) - 140px) !important;
}
.memory-spine {
  overflow: visible !important;
  width: auto !important;
  min-width: 44px !important;
  max-width: 56px !important;
}
.vn-stats { overflow: hidden !important; }
.vn-stats { top: calc(var(--vn-hud) - 12px) !important; }
.memory-spine { top: calc(var(--vn-hud) + 4px) !important; }

/* «Хребет памяти» — декоративная шкала глав (opacity .58). На экранах, где
   для неё не остаётся места, она ложилась на диалог. Скрываем; та же
   информация доступна в панели «Карта следов». */
@media (max-height: 760px) { .memory-spine { display: none !important; } }

/* Короткие экраны (альбом на телефоне, маленькие окна): HUD убираем,
   чтобы гарантированно не было наложений. Статы — декоративные
   (opacity .34–.58), сюжет от их скрытия не страдает. */
@media (max-height: 520px) {
  .vn-stats { display: none !important; }
  .vn-character { max-height: 62% !important; }
}

/* ── 4b. ГЛАВНОЕ МЕНЮ (п. 1.10.1) ──────────────────────────────────────
   Замер до правки:
     320×568 — 698 px контента в 546 px, срезано 152 px;
               кнопки уходили за нижний край на 87 px, сноска — на 174 px.
     640×360 — срезано 245 px (альбом).
   Причина: .main-menu-panel { overflow: hidden } при фиксированной высоте
   контента и центрировании оверлея по вертикали.
   Решение: панель тянется по контенту, оверлей при необходимости
   прокручивается СИЛАМИ ИГРЫ (п. 1.10.2 это допускает), а на коротких
   экранах меню перестраивается в компактную сетку — прокрутка не нужна. */
.main-menu-overlay {
  /* Прокрутку держит сама панель, а не оверлей: у оверлея фон намеренно
     выведен за края (inset:-2% + scale), и его прокрутка выглядела бы багом. */
  overflow: hidden !important;
  align-items: flex-start !important;
  padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)) !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.main-menu-overlay::-webkit-scrollbar { display: none; }
.main-menu-panel {
  height: auto !important;
  width: min(520px, 100%) !important;
  margin: auto !important;
  /* Страховка: если на каком-то экране контент всё же выше вьюпорта,
     прокрутится панель силами игры (п. 1.10.2 это допускает), а не страница. */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: calc(100dvh - max(10px, env(safe-area-inset-top)) - max(10px, env(safe-area-inset-bottom))) !important;
  scrollbar-width: none;
}
.main-menu-panel::-webkit-scrollbar { display: none; }
/* Кнопки в две колонки вместо пяти рядов — экономия 126 px по высоте. */
@media (max-height: 720px), (max-width: 430px) {
  .main-menu-panel { padding: 14px 13px !important; }
  .main-menu-title-row { margin: 2px 0 10px !important; gap: 10px !important; }
  .main-menu-title-row h1 { font-size: clamp(22px, 6.4vw, 30px) !important; }
  .main-menu-seal { width: 34px !important; height: 34px !important; font-size: 18px !important; }
  .main-menu-intro { margin: 10px 0 12px !important; font-size: 16px !important; line-height: 1.22 !important; }
  .main-menu-actions { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  .main-menu-actions .main-menu-primary { grid-column: 1 / -1 !important; }
  .main-menu-actions button {
    min-height: 44px !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
    letter-spacing: .04em !important;
  }
  .main-menu-footnote { margin-top: 12px !important; padding-top: 10px !important; gap: 8px !important; }
  .archive-folio-mark { margin-bottom: 4px !important; }
}
/* Совсем короткие экраны (альбом на телефоне) — ещё плотнее. */
@media (max-height: 480px) {
  .main-menu-intro { display: none !important; }
  .main-menu-title-row h1 { font-size: 21px !important; }
  .main-menu-actions button { min-height: 40px !important; padding: 6px 9px !important; }
  .main-menu-footnote { margin-top: 8px !important; padding-top: 6px !important; }
}

/* ── 4c. ВЫБОР ВАРИАНТОВ: не уходит под футер (1.10.1) и остаётся в
   нижней половине экрана — управление одной рукой (п. 1.10.4). */
.choice-stack {
  top: auto !important;
  bottom: calc(var(--vn-foot) + env(safe-area-inset-bottom) + var(--vn-gap)) !important;
  transform: none !important;
  width: min(420px, 92vw) !important;
  max-height: calc(100dvh - var(--vn-hud) - var(--vn-foot) - 40px) !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.choice-button { min-height: 46px !important; }
.choice-archive-head { flex: none !important; }

/* ── 5. Десктоп: окно тянется до краёв, без наложений (п. 1.6.2.1, 1.10.3) */
@media (min-width: 761px) {
  .dialogue-panel {
    left: 0 !important;
    right: 0 !important;
    margin-inline: auto !important;
    width: min(1100px, calc(100% - 8%)) !important;
  }
  .vn-stats { right: clamp(18px, 2.6vw, 46px) !important; }
  .memory-spine { left: clamp(15px, 2.6vw, 46px) !important; }
}

/* Очень широкие окна: не растягиваем диалог на весь экран */
@media (min-width: 1600px) {
  .dialogue-panel { max-width: 1180px !important; }
}

/* ── 6. Ориентация и поворот экрана (п. 1.6.1.3, 1.10) ───────────────── */
@media (orientation: landscape) and (max-height: 620px) {
  .vn-stats, .memory-spine { display: none !important; }
  .dialogue-panel {
    bottom: calc(var(--vn-foot) + var(--vn-gap)) !important;
    max-height: calc(100dvh - 96px - var(--vn-foot) - var(--vn-gap)) !important;
    padding-top: 16px !important;
    padding-bottom: 14px !important;
  }
  .vn-character { max-height: 70% !important; bottom: 12% !important; }
}

/* ── 7. Тач-таргеты ≥44px (п. 1.8) ───────────────────────────────────── */
.phone-more-menu button,
.archive-tabs button,
.phone-app-tabs button,
.phone-tabs button,
.compact-reward-actions button,
.archive-detail button,
.cloud-sync-actions button,
.completion-actions button,
.tutorial-actions button,
.replay-map-actions button,
.save-actions button,
.empty-slot button,
.microtask-actions button,
.cosmetic-theme-actions button,
.quiet-archive-card button,
.archive-method-card button,
.settings-tutorial-replay {
  min-height: 44px !important;
  min-width: 44px !important;
}

/* ── 8. Панели не вылезают за экран (п. 1.10.1) ──────────────────────── */
.overlay-panel { padding: max(10px, env(safe-area-inset-top)) 4vw max(10px, env(safe-area-inset-bottom)) !important; }
.saves-panel,
.archive-store-panel,
.compact-archive-store-panel,
.content-warning-panel,
.startup-loading-panel,
.diary-panel,
.settings-panel,
.history-panel,
.microtask-panel,
.cloud-sync-panel {
  max-height: calc(100dvh - 20px) !important;
  max-width: calc(100vw - 16px) !important;
}
.saves-panel, .archive-store-panel, .compact-archive-store-panel { overflow-y: auto !important; }

/* Телефон Алисы в альбоме: не выше экрана */
@media (orientation: landscape) {
  .phone-device-shell {
    height: min(560px, calc(100dvh - 1.5rem)) !important;
    max-height: calc(100dvh - 1.5rem) !important;
    width: min(330px, 46vw) !important;
  }
}

/* ── 9. Нет выделения и контекстного меню (п. 1.6.1.8, 1.6.2.7) ──────── */
.vn-shell, .overlay-panel, .dialogue-panel, .choice-button {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* ── 10. Перенесено из инлайн-<style> в index.html ───────────────────── */
@media (max-width: 720px) {
  .vn-character-dialogue {
    bottom: 21.5% !important;
    filter: drop-shadow(0 14px 22px rgba(0,0,0,.38)) drop-shadow(0 7px 4px rgba(0,0,0,.34)) !important;
  }
}
@media (orientation: landscape) and (max-height: 620px) {
  .vn-character-dialogue { bottom: 14% !important; max-height: 66% !important; }
}

/* ── 11. Доступность: уважаем prefers-reduced-motion ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── 12. Фокус виден с клавиатуры (п. 1.6.2.4) ───────────────────────── */
:focus-visible { outline: 2px solid #e0b4ad !important; outline-offset: 2px !important; }

/* ── 13. Компоновка сцены (правка по скрину): герои стоят на полу,
   диалог — широкая нижняя панель в %/vh (закрывает пустоты под героями),
   выбор — по центру свободной зоны, не перекрывает диалог и HUD. ─────── */
/* Герои больше не «летают»: прижаты к нижней кромке сцены. */
.vn-character, .vn-character-dialogue { bottom: 0 !important; }
.vn-character { max-height: 90% !important; }

/* Диалоговая панель — широкая нижняя плита, размеры в %/vh, не в px. */
.dialogue-panel {
  left: 3% !important;
  right: 3% !important;
  width: auto !important;
  max-width: none !important;
  min-height: 24vh !important;
  bottom: calc(var(--vn-foot) + var(--vn-gap) + env(safe-area-inset-bottom, 0px)) !important;
  padding: 2.6vh 6% 2.4vh 4.5% !important;
}

/* Окно выбора — центр свободной зоны (между HUD и диалогом), в %/vh. */
.choice-stack {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  bottom: auto !important;
  width: min(520px, 40%) !important;
  max-height: 36vh !important;
  overflow-y: auto !important;
}

/* В режиме выбора герои разъезжаются к краям и приглушаются,
   освобождая середину под окно выбора (не перекрывает персонажей). */
.choice-mode .vn-character { opacity: .6; }
.choice-mode .vn-character.left,
.choice-mode .vn-character-dialogue.left { left: -8% !important; right: auto !important; }
.choice-mode .vn-character.right,
.choice-mode .vn-character-dialogue.right { right: -8% !important; left: auto !important; }
.choice-mode .vn-character.center { opacity: .45; }

/* Убрано по просьбе: кнопка «Открыть дополнительную архивную запись»
   (безклассовая кнопка в .replay-map-actions; new-game и rating не трогаем). */
.replay-map-actions button:not(.replay-map-rating):not(.replay-map-new-game) { display: none !important; }

@media (max-width: 760px) {
  .dialogue-panel { left: 2.5% !important; right: 2.5% !important; min-height: 26vh !important; }
  .choice-stack { width: min(560px, 88vw) !important; max-height: 38vh !important; }
  /* Портрет: двум героям и широкому выбору на 390px места не хватает физически.
     В режиме выбора персонажи скрываются — решение принимается по тексту,
     окно выбора остаётся широким и никого не перекрывает. */
  .choice-mode .vn-character { display: none !important; }
  /* На узком экране окно выбора и диалог не умещаются одновременно —
     в режиме выбора диалог скрывается, решение принимает окно выбора. */
  .choice-mode .dialogue-panel { display: none !important; }
}

/* Низкие экраны (альбом): та же коллизия выбор/диалог — скрываем диалог в выборе. */
@media (max-height: 620px) {
  .choice-mode .dialogue-panel { display: none !important; }
}

/* ── 14. п. 5.1.3 — название игры видно ВНУТРИ игры на всех экранах ─────
   Причина замечания модерации: styles.css скрывал плашку названия
   (`.vn-brand{display:none}` при ≤560px и `.vn-brand span{display:none}`
   при ≤720px). На мобильных скриншотах название игры в интерфейсе
   отсутствовало, из-за чего оно не совпадало с названием черновика.
   Возвращаем локализованное название во всех раскладках.
   Шапка на узких экранах перестроена в два ряда:
     ряд 1 — название игры + подпись сцены,
     ряд 2 — кнопки инструментов (тач-таргеты ≥40px, п. 1.8). */
.vn-brand { display: flex !important; }
.vn-brand span { display: block !important; }

@media (max-width: 720px) {
  .vn-brand { font-size: 10px !important; gap: 8px !important; }
  .vn-brand img { width: 26px !important; height: 26px !important; }
  .vn-brand small { font-size: 11px !important; letter-spacing: .18em !important; }
}

@media (max-width: 560px) {
  .vn-header {
    flex-wrap: wrap !important;
    align-items: center !important;
    row-gap: 6px !important;
    column-gap: 8px !important;
    padding: max(8px, env(safe-area-inset-top)) 10px 6px !important;
  }
  /* Название игры — первым, самое заметное в шапке. */
  .vn-brand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    order: 1 !important;
    gap: 6px !important;
    font-size: 11px !important;
    letter-spacing: .08em !important;
    line-height: 1.15 !important;
  }
  .vn-brand img { width: 22px !important; height: 22px !important; flex: 0 0 auto !important; }
  .vn-brand span { min-width: 0 !important; overflow-wrap: anywhere !important; }
  /* «ДЕЛО 01» уже есть в подписи сцены — в плашке названия не дублируем. */
  .vn-brand small { display: none !important; }

  .vn-scene-meta {
    order: 2 !important;
    flex: 0 0 auto !important;
    max-width: 42vw !important;
    text-align: right !important;
    font-size: 11px !important;
  }
  /* Инструменты — отдельным рядом во всю ширину: помещаются 7 кнопок ≥40px. */
  .vn-tools {
    order: 3 !important;
    flex: 1 0 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 2px !important;
    margin-left: 0 !important;
  }
  .vn-tools button {
    width: auto !important;
    min-width: 40px !important;
    min-height: 40px !important;
    flex: 1 1 0 !important;
  }
  .vn-tools svg { width: 17px !important; height: 17px !important; }

  /* Шапка стала выше на один ряд — сдвигаем зоны под ней. */
  :root { --vn-hud: 124px; }
}

@media (max-width: 360px) {
  /* На самых узких экранах подпись сцены уступает место названию игры. */
  .vn-scene-meta { max-width: 34vw !important; font-size: 11px !important; }
  .vn-brand { font-size: 10px !important; }
}

/* Альбом на телефоне: шапка остаётся одним рядом, название не прячем. */
@media (orientation: landscape) and (max-height: 620px) {
  .vn-header { flex-wrap: nowrap !important; padding-top: 8px !important; padding-bottom: 6px !important; }
  .vn-brand { flex: 0 1 auto !important; font-size: 10px !important; order: 0 !important; }
  .vn-tools { flex: 0 0 auto !important; order: 2 !important; margin-left: auto !important; }
  .vn-scene-meta { order: 1 !important; }
  :root { --vn-hud: 88px; }
}

/* ── 15. п. 1.10.3 / 1.10.1 — декор диалога не перекрывает реплику ──────
   Замер: бокс текста <p> пересекался с «АРХИВ · NN» (.paper-folio) и
   печатью (.dialogue-seal) на 320×568, 360×640, 412×915, 768×1024,
   844×390 и 1024×768 — последняя строка реплики читалась поверх декора.
   Десктоп: резервируем под декор место отступами.
   Мобильный/альбом: декор скрываем, текст получает всю ширину панели. */
@media (min-width: 761px) {
  .dialogue-panel p {
    margin-right: 64px !important;
    margin-bottom: 18px !important;
  }
}
@media (max-width: 760px), (max-height: 620px) {
  .dialogue-panel .paper-folio,
  .dialogue-panel .dialogue-seal { display: none !important; }
  .dialogue-panel p { margin-right: 0 !important; margin-bottom: 4px !important; }
}

/* ═════════════════════════════════════════════════════════════════════════
   16. МОБИЛЬНАЯ КОМПОНОВКА: компактный диалог + расстановка героев
   ─────────────────────────────────────────────────────────────────────────
   Замеры ДО (390×844, портрет):
     · панель диалога всегда 26vh (219px) — даже на реплику в одну строку
       уходило до ~80% пустого места, героев панель перекрывала по грудь;
     · двое героев по 230px на экране 390px: пересечение 39px по центру,
       оба спрайта обрезаны краями экрана (x = −16 и 405 при ширине 390).

   Решение:
     1) Панель занимает ровно столько, сколько нужно тексту: минимум —
        две строки, максимум 34vh, дальше внутренняя прокрутка <p>.
        Средняя реплика экономит 60–110px высоты.
     2) Герои стоят на ФИКСИРОВАННОЙ сцене (bottom зафиксирован), размер
        ограничен, чтобы спрайт не занимал весь экран и не «прыгал» при
        изменении высоты панели (подробности в inline-комменте ниже).
     3) Пара героев больше не пересекается: говорящий (is-speaking)
        крупнее и ярче, второй (is-muted) приглушён и уже. Классы
        проставлены в main.js (поле cast/isSpeaking/isMuted в ga).
   Десктоп (>760px) этой секцией не затрагивается. */
@media (max-width: 760px) and (orientation: portrait) {
  :root {
    --vn-gh: 26vh;                          /* фиксированная высота панели — стабильный верх */
    /* Верх кромки панели, выраженный как отступ ОТ НИЗА контейнера
       (= линия футера + высота панели). Низ героя привязываем к нему. */
    --vn-feet: calc(var(--vn-foot) + var(--vn-gap)
                    + env(safe-area-inset-bottom, 0px) + var(--vn-gh));
  }

  /* ── Панель фиксированной высоты, чтобы её ВЕРХ был неподвижным якорем ── */
  .dialogue-panel {
    height: var(--vn-gh) !important;
    min-height: var(--vn-gh) !important;
    max-height: var(--vn-gh) !important;
    padding: 13px 5% 12px 4.6% !important;    /* печать на мобильном скрыта — правый отступ меньше */
  }
  .dialogue-panel p {
    line-height: 1.32 !important;             /* было 1.16 — тесно для кириллицы */
    min-height: auto !important;
  }
  .speaker-name { margin-bottom: 6px !important; }

  /* ── Герои: низ привязан к ВЕРХНЕЙ КРОМКЕ диалогового окна ──
     Низ спрайта (ноги) стоит ровно на верхней кромке панели: герой опирается
     на диалоговое окно, а не «парит» над сценой и не проваливается за панель.
     Панель имеет фиксированную высоту → её верх неподвижен → герои не прыгают
     между репликами. Голова всегда выше панели (кап по высоте). */
  .vn-character,
  .vn-character-dialogue {
    bottom: calc(var(--vn-feet) - 4px) !important;   /* -4px — чтобы подошва чуть пряталась за кромкой */
    max-height: min(34vh,
                    calc(100dvh - var(--vn-hud) - 48px)) !important;
    max-width: 54% !important;
    transform: none !important;               /* отмена scale(.82) и старого увода за край */
    transition: opacity .3s ease, filter .3s ease,
                max-width .3s ease, max-height .3s ease;
  }
  .vn-character-dialogue.center { transform: translateX(-50%) !important; }
  .vn-character-dialogue.left   { left: -3% !important;  right: auto !important; }
  .vn-character-dialogue.right  { right: -3% !important; left: auto  !important; }

  /* ── Пара: говорящий крупнее и ярче, слушающий тише и уже ── */
  .vn-character-dialogue.duo               { max-width: 42% !important; }
  .vn-character-dialogue.duo.is-speaking   { max-width: 45% !important; z-index: 2; }
  .vn-character-dialogue.duo.is-muted      { max-width: 39% !important; opacity: .6;
    filter: brightness(.8) saturate(.9) drop-shadow(0 10px 16px rgba(0,0,0,.38)) !important; }
  .vn-character-dialogue.is-muted:not(.duo) { opacity: .78; }

  /* Драматическая поза Виктора — чуть приподнят над кромкой */
  .vn-character-dialogue.victor-firm-action {
    bottom: calc(var(--vn-feet) + 24px) !important;
  }
}

/* Альбом на телефоне: низ героя также привязан к верху диалоговой панели,
   панель фиксированной высоты — герои стоят на месте. */
@media (orientation: landscape) and (max-height: 620px) {
  :root {
    --vn-gh: 40vh;
    /* Верх кромки панели как отступ ОТ НИЗА контейнера. */
    --vn-feet: calc(var(--vn-foot) + var(--vn-gap)
                    + env(safe-area-inset-bottom, 0px) + var(--vn-gh));
  }
  .dialogue-panel {
    height: var(--vn-gh) !important;
    min-height: var(--vn-gh) !important;
    max-height: var(--vn-gh) !important;
    padding-top: 12px !important;
    padding-bottom: 11px !important;
  }
  .dialogue-panel p { line-height: 1.3 !important; min-height: auto !important; }
  .vn-character,
  .vn-character-dialogue {
    bottom: calc(var(--vn-feet) - 4px) !important;
    max-height: 44% !important;
    max-width: 58% !important;
    transform: none !important;
  }
}