/* Базовый сброс */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
html { font-size: var(--baseFontSize); }
body { background: #000; color: #fff; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

body {
  overflow: hidden; /* чтобы не появлялся “лишний низ” из-за прокрутки */
}

:root{
  /* =========================================================
     ГЛОБАЛЬНАЯ БАЗА ИНТЕРФЕЙСА
     Править здесь, если весь UI кажется слишком мелким/крупным.
     --uiScale и --baseFontSize рассчитываются в JS.
     ========================================================= */
  --uiScale: 2;
  --baseFontPx: 16px;
  --baseFontSize: calc(var(--baseFontPx) * var(--uiScale));

  /*
     БЫСТРАЯ РУЧНАЯ НАСТРОЙКА ПОД ЭКРАН:
     1) Если весь интерфейс мелкий/крупный — правьте UI_FONT_SCALE в engine.js.
     2) Если тесная верхняя панель — правьте --topbar-* и --control-*.
     3) Если узкое окно диалога — правьте --dialog-* и --name-*.
     4) Если мелкие варианты выбора — правьте --choices-* и --choice-*.
  */

  /* Настройки из story.js */

  --topSpacing: 500px;
  --bottomSpacing: 800px;

  --blurStrength: 50px;
  --blurBrightness: 0.9;
  --blurOpacity: 0.95;


  /* Технические переменные сцены: задаются JS и/или сценарием */
  --uiBottomOffset: calc(0.875rem + env(safe-area-inset-bottom, 0px));
  --topSpacing: 0px;
  --bottomSpacing: 0px;

  /* Базовые токены интерфейса */
  --ui-font-base: 1rem;
  --ui-space: 1rem;
  --ui-radius: 1rem;
  --ui-border-width: 1px;
  --ui-control-min-height: 2.5rem;
  --ui-touch-min-height: 3rem;

  /* =========================================================
     ВЕРХНЯЯ ПАНЕЛЬ
     Править здесь, если topbar тесная, кнопки панели мелкие,
     а слайдер слишком короткий.
     ========================================================= */
  --topbar-font-size: 1.16rem;
  --topbar-padding-y: 0.78rem;
  --topbar-padding-x: 0.78rem;
  --topbar-gap: 0.80rem;
  --topbar-title-size: 0.85em;
  --topbar-control-gap: 0.75rem;
  --topbar-slider-width: 4.00rem;
  --topbar-slider-height: 1.55rem;
  --topbar-slider-track-height: 0.32rem;
  --topbar-slider-thumb-size: 1.05rem;

  /* =========================================================
     ОБЫЧНЫЕ КНОПКИ / КОНТРОЛЫ
     Править здесь, если кнопки в панели или модалках кажутся
     слишком узкими, низкими или слабо читаемыми.
     ========================================================= */
  --control-font-size: 0.85em; /* считает через коэффициент 1.16 от .topbar поэтому финальный размер будет больше */
  --control-padding-y: 0.72em;
  --control-padding-x: 1.12em;
  --control-radius: 0.78em;
  --control-border-width: 1px;
  --control-min-height: 2.85em;

  /* =========================================================
     ДИАЛОГОВОЕ ОКНО
     Править здесь, если текст нормальный, а само окно кажется
     слишком тесным, низким или близким к краям.
     ========================================================= */
  --dialog-font-size: 1rem;
  --dialog-side-offset: 1.00rem;
  --dialog-padding: 0.92em;
  --dialog-radius: 1.05em;
  --dialog-text-line-height: 1.4;
  --dialog-text-min-height: 1.8em;
  --dialog-hint-gap: 0.50em;
  --dialog-padding-bottom-no-hint: 0.80em;
  --dialog-padding-bottom-with-hint: 0.65em;
  --dialog-name-padding-top: 0.60em;
  --dialog-no-name-padding-top: 1.10em;
  --dialog-bottom-gap: 0.6rem;

  /* =========================================================
     ИМЯ ПЕРСОНАЖА
     Править здесь, если поле имени слишком маленькое,
     узкое или с недостаточным "воздухом".
     ========================================================= */
  --name-font-size: 0.98em;
  --name-padding-y: 0.46em;
  --name-padding-x: 0.96em;
  --name-radius: 0.68em;
  --name-margin-bottom: 0.55em;
  --name-min-height: 1.9em;

  /* =========================================================
     ВАРИАНТЫ ВЫБОРА
     Править здесь, если кнопки выбора выглядят низкими,
     тесными или прилипшими друг к другу.
     ========================================================= */
  --choices-side-offset: 1.00rem;
  --choices-top-offset: 1.00rem;
  --choices-gap: 0.85rem;
  --choice-font-size: 1.02em;
  --choice-padding-y: 1.00em;
  --choice-padding-x: 1.15em;
  --choice-radius: 0.95em;
  --choice-min-height: 3.6em;

  /* =========================================================
     МОДАЛКИ / МИНИ-ИГРЫ / СТАТИСТИКА
     Править здесь, если полноэкранные панели выглядят слишком
     тесными или наоборот слишком раздутыми.
     ========================================================= */
  --modal-padding: 0.90rem;
  --modal-gap: 0.80rem;
  --modal-radius: 1.00rem;
  --modal-frame-max-width: 900px;
  --modal-frame-max-height: 1600px;
  --stats-header-gap: 0.65rem;
  --stats-title-size: 1.05rem;
  --stats-body-font-size: 1rem;
  --stats-key-size: 0.75rem;
  --stats-value-size: 0.95rem;

  /* =========================================================
     КОРРЕКЦИЯ ДЛЯ УЗКИХ/НЕБОЛЬШИХ ЭКРАНОВ
     Править здесь, если на маленьких экранах UI всё ещё выглядит
     слишком тесным или крупным.
     ========================================================= */
  --compact-topbar-padding-y: 0.35rem;
  --compact-topbar-padding-x: 0.45rem;
  --compact-topbar-slider-width: 4.25rem;
  --compact-topbar-slider-height: 1.05rem;
  --compact-control-padding-y: 0.40em;
  --compact-control-padding-x: 0.55em;
  --compact-control-radius: 0.50em;
  --compact-control-font-size: 0.78em;
  --compact-dialog-side-offset: 0.40rem;
  --compact-dialog-padding: 0.55em;
  --compact-choices-side-offset: 0.40rem;
  --compact-choices-gap: 0.40rem;
  --compact-choice-padding-y: 0.55em;
  --compact-choice-padding-x: 0.65em;
  --compact-choice-font-size: 0.88em;

  /* =========================================================
     НАСТРОЙКИ ГРАФА MERMAID
     ========================================================= */
  --graph-bg: #ffffff;
  --graph-padding: 1rem;
  --graph-label-color: #000000;
  --graph-label-font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  
  /* Настройки для текста над линиями */
  --graph-edgeLabel-bg: #ffffff;
  --graph-edgeLabel-border: 1px solid #999;
  --graph-edgeLabel-radius: 8px;  /* Увеличено для скругления */
  --graph-edgeLabel-padding: 4px 10px;  /* Увеличено для лучшего вида */
  --graph-edgeLabel-font-size: 11px;
  --graph-edgeLabel-color: #000000;
  
  /* Настройки для узлов (общие) */
  --graph-node-fill: #fff3e0;
  --graph-node-stroke: #666;
  --graph-node-stroke-width: 1px;
  --graph-node-radius: 12px;  /* ДОБАВЛЕНО: скругление углов узлов */
  
  /* Настройки для стартовых узлов */
  --graph-node-start-fill: #e1f5e1;
  --graph-node-start-stroke: #00ff00;
  --graph-node-start-stroke-width: 2px;
  --graph-node-start-radius: 15px;  /* ДОБАВЛЕНО: скругление для стартовых */
  
  /* Настройки для недостижимых узлов */
  --graph-node-unreachable-fill: #ffebee;
  --graph-node-unreachable-stroke: #ff0000;
  --graph-node-unreachable-stroke-dasharray: 5 5;
  --graph-node-unreachable-stroke-width: 2px;
  --graph-node-unreachable-radius: 12px;  /* ДОБАВЛЕНО: скругление для недостижимых */
  
  /* Настройки для финальных узлов */
  --graph-node-final-fill: #f3e5f5;
  --graph-node-final-stroke: #9c27b0;
  --graph-node-final-stroke-width: 2px;
  --graph-node-final-radius: 14px;  /* ДОБАВЛЕНО: скругление для финальных */
  
  /* Фон контейнера графа */
  --graph-container-bg: #1a1a1a;

  --char-shadow-y: 0.75rem;
  --char-shadow-blur: 1.5rem;
  --char-shadow-color: rgba(0,0,0,0.55);

}

/* Контейнер приложения */
.app {
  position: relative;
  width: 100%;
  
  height: 100vh;   /* fallback */
  height: 100svh;  /* стабильная высота на мобильных (Safari/Chrome) */
  height: 100dvh;  /* динамическая высота: учитывает панели браузера */

  overflow: hidden;
  user-select: none;
}

/* Фон: растягиваем на весь экран, центрируем, crop по краям */
.bg {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--topSpacing);
  bottom: var(--bottomSpacing);
  width: 100%;
  height: calc(100% - var(--topSpacing) - var(--bottomSpacing));
  object-fit: cover;
  object-position: center;
  z-index: 2;
}

/* Персонаж */
.char {
  position: absolute;
  left: 50%;
  bottom: var(--bottomSpacing); /* поднимаем над нижним отступом */
  transform: translateX(-50%);
  width: auto; /* ширина автоматически подстроится под высоту */
  height: auto; /* высота будет задана через JS */
  /* max-width и max-height не использовать, управляется через JS */
  object-fit: contain;      /* персонажа обычно не режем */
  object-position: center bottom;
  filter: drop-shadow(0 var(--char-shadow-y) var(--char-shadow-blur) var(--char-shadow-color));
  z-index: 3; /* ВЫШЕ всего */
  pointer-events: none; /* чтобы клики проходили сквозь персонажа */
}



/* Затемнение/оверлей */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 4; /* ВЫШЕ персонажа если нужно */
}

/* Верхняя панель */
.topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: var(--topbar-padding-y) var(--topbar-padding-x);
  gap: var(--topbar-gap);
  font-size: var(--topbar-font-size);

  background: linear-gradient(to bottom, rgba(0,0,0,0.65), rgba(0,0,0,0));
  z-index: 20;
}

.title {
  font-weight: 700;
  font-size: var(--topbar-title-size);
  opacity: 0.9;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--topbar-control-gap);
  flex-wrap: wrap;
  z-index: 10;
}

/* Кнопки */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-min-height);
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: var(--control-border-width) solid rgba(255,255,255,0.18);
  border-radius: var(--control-radius);
  padding: var(--control-padding-y) var(--control-padding-x);
  font-size: var(--control-font-size);
  line-height: 1.1;
}

.icon-btn .btn-icon {
  display: inline-block;
  line-height: 1;
  transform: scale(1.8);
  transform-origin: center;
}


/* Слайдер громкости */
.slider {
  width: var(--topbar-slider-width);
  height: var(--topbar-slider-height);
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  padding: 0;
  margin: 0;
}

/* Трек */
.slider::-webkit-slider-runnable-track {
  height: var(--topbar-slider-track-height);
  border-radius: 999px;
  background: rgba(255,255,255,0.28);
}

.slider::-moz-range-track {
  height: var(--topbar-slider-track-height);
  border-radius: 999px;
  background: rgba(255,255,255,0.28);
  border: none;
}

/* Бегунок */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--topbar-slider-thumb-size);
  height: var(--topbar-slider-thumb-size);
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.25);
  margin-top: calc((var(--topbar-slider-track-height) - var(--topbar-slider-thumb-size)) / 2);
}

.slider::-moz-range-thumb {
  width: var(--topbar-slider-thumb-size);
  height: var(--topbar-slider-thumb-size);
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.25);
}



/* Диалог */
.dialog {
  position: absolute;
  left: var(--dialog-side-offset);
  right: var(--dialog-side-offset);
  bottom: calc(var(--uiBottomOffset) + var(--bottomSpacing) + var(--dialog-bottom-gap));
  padding: var(--dialog-padding);
  border-radius: var(--dialog-radius);
  background: rgba(0,0,0,0.60);
  border: var(--ui-border-width) solid rgba(255,255,255,0.14);
  backdrop-filter: blur(4px);
  outline: none;
  font-size: var(--dialog-font-size);
  z-index: 10;
  transition: padding-bottom 0.2s ease;
}

/* Диалог без подсказки */
.dialog.no-hint {
   padding-bottom: var(--dialog-padding-bottom-no-hint);
}

/* Диалог с подсказкой - добавляем место для hint */
.dialog.has-hint {
  padding-bottom: var(--dialog-padding-bottom-with-hint);
}

/* Когда показан выбор — диалог скрываем целиком */
.dialog.hiddenByChoices {
  display: none !important;
}

/* Имя персонажа - ОСТАВЛЯЕМ rem, так как должно быть фиксировано относительно базового */
.name {
  display: inline-block;
  min-height: var(--name-min-height);
  padding: var(--name-padding-y) var(--name-padding-x);
  border-radius: var(--name-radius);
  background: rgba(255,255,255,0.10);
  border: var(--ui-border-width) solid rgba(255,255,255,0.12);
  margin-bottom: var(--name-margin-bottom);
  font-weight: 700;
  font-size: var(--name-font-size);
  line-height: 1.2;
}

.text {
  font-size: 1em;
  line-height: var(--dialog-text-line-height);
  min-height: var(--dialog-text-min-height);
  white-space: pre-wrap;
}

.hint {
  margin-top: var(--dialog-hint-gap);
  font-size: 0.7em;
  opacity: 0.65;
  display: none;
  transition: opacity 0.2s ease;
}

/* Когда hint видим, добавляем отступ */
.hint[style*="display: block"] {
  margin-top: var(--dialog-hint-gap);
}

/* =========================================================
   ВЫБОР: панель, заголовок и кнопки
   ========================================================= */

.choices {
  position: absolute;
  left: var(--choices-side-offset);
  right: var(--choices-side-offset);
  bottom: calc(var(--bottomSpacing) + var(--dialog-bottom-gap));
  z-index: 30;
}

.choicePanel {
  display: flex;
  flex-direction: column;
  gap: var(--choices-gap);
  padding: 0.95em;
  border-radius: calc(var(--choice-radius) + 0.2em);
  background: rgba(0,0,0,0.40);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.choiceTitle {
  text-align: center;
  font-size: 0.92em;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.92;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

.choiceList {
  display: flex;
  flex-direction: column;
  gap: var(--choices-gap);
}

.choiceBtn {
  display: flex;
  align-items: center;
  gap: 0.7em;
  width: 100%;
  min-height: var(--choice-min-height);
  padding: var(--choice-padding-y) var(--choice-padding-x);

  font: inherit;
  font-size: var(--choice-font-size);
  line-height: 1.35;
  text-align: left;
  color: #fff;

  background: rgba(0,0,0,0.40);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--choice-radius);

  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.choiceBtn:hover,
.choiceBtn:focus-visible {
  background: rgba(0,0,0,0.40);
  border-color: rgba(255,255,255,0.32);
  transform: translateY(-1px);
  outline: none;
}

.choiceNum {
  flex: 0 0 auto;
  min-width: 1.8em;
  font-weight: 700;
  opacity: 0.95;
}

.choiceLabel {
  flex: 1 1 auto;
  min-width: 0;
}


/* Модалка мини-игры */
.gameModal {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--modal-padding);
  z-index: 60;
  touch-action: none;
}

.gameFrame,
.gameControls,
#btnCloseGame {
  touch-action: auto;
}

.gameFrameWrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--modal-gap);
}

.gameFrame {
  width: 100%;
  flex: 1;
  border: var(--ui-border-width) solid rgba(255,255,255,0.18);
  border-radius: var(--modal-radius);
  background: #111;
}

.gameControls {
  display: flex;
  justify-content: flex-end;
}

/* Утилиты */
.hidden { display: none !important; }

/* Для очень узких/высоких окон можно чуть уменьшить текст */
@media (max-aspect-ratio: 9/16) {
  .text { font-size: 0.97em; }
  .choices { bottom: calc(var(--uiBottomOffset) + var(--bottomSpacing) + var(--dialog-bottom-gap)); }
}

/* ===== Панель статистики ===== */

.statsPanel {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding: var(--modal-padding); */
  z-index: 50;
}

.statsCard {
  width: calc(100% - 4rem);  /* Отступы 2rem с каждой стороны */
  height: calc(100% - 4rem); /* Отступы 2rem сверху и снизу */
  /* max-width: var(--modal-frame-max-width); */  /* Закомментируйте или удалите */
  /* max-height: var(--modal-frame-max-height); */ /* Закомментируйте или удалите */
  border-radius: calc(var(--modal-radius) + 0.1rem);
  background: rgba(0,0,0,0.70);
  border: var(--ui-border-width) solid rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.statsHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--stats-header-gap);
  padding: var(--modal-padding);
  border-bottom: var(--ui-border-width) solid rgba(255,255,255,0.12);
}

.statsTitle {
  font-weight: 800;
  font-size: var(--stats-title-size);
}

.statsBody {

  flex: 1;
  width: 100%;

  padding: calc(var(--modal-padding) + 0.1rem);

  overflow: auto;
  resize: none;

  background: rgba(0,0,0,0.6);
  border: none;
  outline: none;

  color: #fff;
  font-size: var(--stats-body-font-size);
  line-height: 1.4;

  font-family: Consolas, monospace;
}

/* небольшая “табличная” разметка строк */
.statsLine {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.statsKey {
  opacity: 0.75;
  font-size: var(--stats-key-size);
}

.statsVal {
  font-weight: 700;
  font-size: var(--stats-value-size);
  margin-top: 2px;
}

.title {
  display: none;
}

/* Медиа-запрос для мобильных устройств
   Здесь не задаём новые случайные размеры, а только
   слегка поджимаем те же токены системы. */
@media (max-width: 600px) {
  :root {
    --topbar-padding-y: var(--compact-topbar-padding-y);
    --topbar-padding-x: var(--compact-topbar-padding-x);
    --topbar-slider-width: var(--compact-topbar-slider-width);
    --topbar-slider-height: var(--compact-topbar-slider-height);

    --control-padding-y: var(--compact-control-padding-y);
    --control-padding-x: var(--compact-control-padding-x);
    --control-radius: var(--compact-control-radius);
    --control-font-size: var(--compact-control-font-size);

    --dialog-side-offset: var(--compact-dialog-side-offset);
    --dialog-padding: var(--compact-dialog-padding);

    --choices-side-offset: var(--compact-choices-side-offset);
    --choices-gap: var(--compact-choices-gap);

    --choice-padding-y: var(--compact-choice-padding-y);
    --choice-padding-x: var(--compact-choice-padding-x);
    --choice-font-size: var(--compact-choice-font-size);
  }
}

/* Контейнер для размытого фона */
.blur-bg-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* ПОДНЯЛИ: между stage и bg */
  overflow: hidden;
  pointer-events: none;
  background: #000; /* черный фон на всякий случай */
}

.blur-bg-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover; /* растягиваем на всю высоту */
  object-position: center;
  filter: blur(var(--blurStrength)) brightness(var(--blurBrightness));
  opacity: var(--blurOpacity);
  transform: scale(1.2); /* увеличиваем чтобы скрыть края */
}

/* Сцена */
.stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  background: transparent;
}

/*
   Сценические отступы из story.js / метаданных сцены.
   Здесь руками обычно править не нужно: они приходят из top_spacing/bottom_spacing.
*/
.choices {
  bottom: calc(var(--uiBottomOffset) + var(--bottomSpacing) + var(--dialog-bottom-gap));
}

.topbar {
  top: var(--topSpacing); /* Верхнюю панель поднимаем вместе со сценой */
}

/* Для очень узких экранов */
@media (max-aspect-ratio: 9/16) {
  .choices { 
    bottom: calc(var(--uiBottomOffset) + var(--bottomSpacing) + var(--dialog-bottom-gap)); 
    z-index: 10;
  }
}

/* Состояния диалога: отдельные токены для ручной правки */
.dialog.has-name {
  padding-top: var(--dialog-name-padding-top);
}

.dialog.no-name {
  padding-top: var(--dialog-no-name-padding-top);
}







/* Добавьте в engine.css */

.statsViewContainer {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: rgba(0,0,0,0.6);
}

.statsBody, .graphContainer {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: auto;
  transition: opacity 0.3s ease;
}

.graphContainer {
  background: #1a1a1a;
  padding: 0; /* Убираем padding, так как теперь внутри будет wrapper */
}

.graphControls {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem var(--modal-padding) var(--modal-padding);
  border-top: var(--ui-border-width) solid rgba(255,255,255,0.12);
  justify-content: flex-end;
}


/* Адаптация для мобильных */
@media (max-width: 600px) {
  .graphControls {
    flex-wrap: wrap;
  }
  
  .graphControls .btn {
    flex: 1 1 auto;
  }

  .statsCard {
    width: calc(100% - 2rem);  /* Отступы 1rem с каждой стороны */
    height: calc(100% - 2rem); /* Отступы 1rem сверху и снизу */
  } 
}

/* Замените существующие стили для Mermaid на эти */

/* График на белом фоне */
.graphContainer .mermaid {
  background: var(--graph-bg) !important;
}

/* Базовые стили для всех элементов */
.graphContainer .mermaid .label {
  color: var(--graph-label-color) !important;
  font-family: var(--graph-label-font) !important;
}

.graphContainer .mermaid .label text {
  fill: var(--graph-label-color) !important;
}

/* Стили для текста над линиями */
.graphContainer .mermaid .edgeLabel {
  background: var(--graph-edgeLabel-bg) !important;
  
  border-radius: var(--graph-edgeLabel-radius) !important;
  padding: var(--graph-edgeLabel-padding) !important;
  font-size: var(--graph-edgeLabel-font-size) !important;
  color: var(--graph-edgeLabel-color) !important;
  font-weight: normal !important;
  box-shadow: none !important;
  line-height: 1.2 !important;
}

.graphContainer .mermaid .edgeLabel span {
  color: var(--graph-edgeLabel-color) !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Убираем лишние фоновые элементы */
.graphContainer .mermaid .edgeLabel rect {
  fill: var(--graph-edgeLabel-bg) !important;
  stroke: #999 !important;
  stroke-width: 1px !important;
}

.graphContainer .mermaid .edgeLabel foreignObject {
  overflow: visible !important;
}

/* Стили для узлов (общие) */
.graphContainer .mermaid .node rect,
.graphContainer .mermaid .node circle,
.graphContainer .mermaid .node polygon {
  fill: var(--graph-node-fill) !important;
  stroke: var(--graph-node-stroke) !important;
  stroke-width: var(--graph-node-stroke-width) !important;
  rx: var(--graph-node-radius) !important;  /* ДОБАВЛЕНО: скругление по горизонтали */
  ry: var(--graph-node-radius) !important;  /* ДОБАВЛЕНО: скругление по вертикали */
}

/* Стартовые узлы */
.graphContainer .mermaid .node.start rect {
  fill: var(--graph-node-start-fill) !important;
  stroke: var(--graph-node-start-stroke) !important;
  stroke-width: var(--graph-node-start-stroke-width) !important;
  rx: var(--graph-node-start-radius) !important;
  ry: var(--graph-node-start-radius) !important;
}

/* Недостижимые узлы */
.graphContainer .mermaid .node.unreachable rect {
  fill: var(--graph-node-unreachable-fill) !important;
  stroke: var(--graph-node-unreachable-stroke) !important;
  stroke-dasharray: var(--graph-node-unreachable-stroke-dasharray) !important;
  stroke-width: var(--graph-node-unreachable-stroke-width) !important;
  rx: var(--graph-node-unreachable-radius) !important;
  ry: var(--graph-node-unreachable-radius) !important;
}

/* Финальные узлы */
.graphContainer .mermaid .node.final rect {
  fill: var(--graph-node-final-fill) !important;
  stroke: var(--graph-node-final-stroke) !important;
  stroke-width: var(--graph-node-final-stroke-width) !important;
  rx: var(--graph-node-final-radius) !important;
  ry: var(--graph-node-final-radius) !important;
}

/* Фон контейнера графа */
.graphContainer {
  background: var(--graph-container-bg);
  padding: var(--graph-padding);
}

.graphContainer.panning {
  cursor: grabbing;
}

/* Wrapper для panzoom */
.panzoom-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  touch-action: none;
}

/* Контент для панорамирования */
.panzoom-content {
  transform-origin: 0 0;
  width: fit-content;
  height: fit-content;
  min-width: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Контейнер для mermaid графа с внутренним padding */
.mermaid-wrapper {
  display: inline-block;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  margin: auto;
}

/* Панель управления масштабом */
.graph-zoom-controls {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  gap: 8px;
  z-index: 100;
  background: rgba(0,0,0,0.7);
  padding: 8px;
  border-radius: 40px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.2);
}

.graph-zoom-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  color: white;
  border: 1px solid rgba(255,255,255,0.3);
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.graph-zoom-btn:hover {
  background: rgba(255,255,255,0.3);
  transform: scale(1.1);
}

.graph-zoom-btn:active {
  transform: scale(0.95);
}

.graph-zoom-reset {
  width: auto;
  padding: 0 15px;
  border-radius: 40px;
  font-size: 14px;
}

/* Индикатор масштаба */
.graph-zoom-level {
  color: white;
  font-size: 14px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.1);
  border-radius: 40px;
  margin-right: 5px;
}



/* Улучшенные стили для изображений в графе Mermaid */

.graphContainer .mermaid .node div {
  overflow: visible !important;
  position: relative !important;
}

/* Сами изображения */
.graphContainer .mermaid .node img {
  display: inline-block !important;  /* Вместо block, чтобы быть в строке */
  width: 80px !important;
  height: 120px !important;
  object-fit: cover !important;
  background-color: #f0f0f0 !important;
  border-radius: 4px !important;
  border: 1px solid #ccc !important;
  transition: transform 0.2s ease !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  margin: 0 !important;  /* Убираем отступы */
  vertical-align: middle !important; /* Выравнивание по вертикали */
  position: relative !important;  /* Для правильного наложения */
  z-index: 1 !important;
  cursor: zoom-in !important;

  /* Убираем любые ограничения */
  max-width: none !important;
  max-height: none !important;
}

.graphContainer .mermaid .node img:hover {
  transform: scale(3) !important;
  z-index: 1000 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
}

/* Статистика узла */
.graphContainer .mermaid .node-stats {
  line-height: 1.4 !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  text-align: center !important;
}

/* Контейнер узла Mermaid - должен допускать перекрытие */
.graphContainer .mermaid .node {
  overflow: visible !important;  /* Разрешаем выход за границы */
  z-index: auto !important;
}

/* Увеличенное состояние */
.graphContainer .mermaid .node img.zoomed {
  transform: scale(3) !important;
  z-index: 9999 !important;  /* Очень высокий z-index, чтобы быть поверх всего */
  box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
  position: relative !important;
  cursor: zoom-out !important;
}

/* Все возможные обертки внутри узла */
.graphContainer .mermaid .node * {
  overflow: visible !important;
}

/* Контейнер для изображений в узле - переопределяем все возможные уровни */
.graphContainer .mermaid .node td,
.graphContainer .mermaid .node span,
.graphContainer .mermaid .node foreignObject,
.graphContainer .mermaid .node > * {
  overflow: visible !important;
  position: relative !important;
  z-index: auto !important;
}

/* Увеличенное состояние - перекрывает всё */
.graphContainer .mermaid .node img.zoomed,
.graphContainer .mermaid .node img:hover {
  transform: scale(3) !important;
  
  
  box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
  position: relative !important;
  cursor: zoom-out !important;
  
  /* Убираем возможные ограничения родителя */
  isolation: isolate !important;
}

/* Специально для Mermaid foreignObject */
.graphContainer .mermaid foreignObject {
  overflow: visible !important;
}

.graphContainer .mermaid foreignObject * {
  overflow: visible !important;
}

/* Для мобильных устройств уменьшаем количество колонок */
@media (max-width: 600px) {
  .bg-images-container {
    grid-template-columns: repeat(3, minmax(40px, 1fr));
  }
}

/* Контейнер для изображений - только один раз! */
.bg-images-container {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 2px !important;
  margin: 4px auto !important;
  background-color: rgba(255,255,255,0.3) !important;
  border-radius: 6px !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  border: none !important;            /* Убираем контур */
}

/* Миниатюры - только один раз! */
.bg-thumbnail {
  width: 40px !important;
  height: 40px !important;
  object-fit: cover !important;
  background-color: #f0f0f0 !important;
  border-radius: 8px !important;     /* Увеличено скругление углов */
  border: none !important;            /* Убираем серый контур */
  transition: transform 0.2s ease !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  cursor: zoom-in !important;
  flex-shrink: 0 !important;
  padding: 2px !important;           /* Добавляем внутренний отступ */
  box-sizing: border-box !important;  /* Чтобы padding не увеличивал размер */
}


/* Отключаем конфликтующие стили для изображений в узлах */
.graphContainer .mermaid .node img {
  all: unset !important; /* Сбрасываем все предыдущие стили */
  display: inline-block !important;
  width: 40px !important;
  height: 40px !important;
  object-fit: cover !important;
  background-color: #f0f0f0 !important;
  border-radius: 8px !important;     /* Увеличено скругление углов */
  border: none !important;            /* Убираем серый контур */
  transition: transform 0.2s ease !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  margin: 0 1px !important;
  vertical-align: middle !important;
  cursor: zoom-in !important;
}

.graphContainer .mermaid .node img:hover {
  transform: scale(3.5) !important;
  z-index: 9999 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
  cursor: zoom-out !important;
}





/* Контейнер для эмоций персонажа */
.char-emotions-container {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 2px !important;
  margin-top: 4px !important;
  background-color: transparent !important;
  border-radius: 8px !important;
  padding: 2px !important;
}

/* Миниатюры эмоций */
.char-emotion-thumbnail {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain !important;
  background-color: #f0f0f0 !important;
  border-radius: 8px !important;
  border: none !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  transition: transform 0.2s ease !important;
  cursor: zoom-in !important;
  flex-shrink: 0 !important;
}

.char-emotion-thumbnail:hover {
  transform: scale(3.5) !important;
  z-index: 9999 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
  cursor: zoom-out !important;
}



/* Увеличенные миниатюры для фонов */
.bg-thumbnail.large {
  width: 50px !important;
  height: 50px !important;
}







/* =========================================================
   УНИФИЦИРОВАННЫЕ СЕРЫЕ ТОНА ДЛЯ ГРАФА
   Светло-серый для фона, темно-серый для контура
   ========================================================= */

/* Общий класс для группы персонажей */
.characters-group > rect {
  fill: #e0e0e0 !important;        /* Светло-серый фон */
  stroke: #808080 !important;       /* Темно-серый контур */
  stroke-width: 2px !important;
}

.characters-group .label {
  color: #333333 !important;        /* Темно-серый текст */
}

/* Класс для узлов персонажей */
.character-node > rect {
  fill: #d0d0d0 !important;        /* Светло-серый фон (чуть темнее группы) */
  stroke: #808080 !important;       /* Темно-серый контур */
  stroke-width: 1px !important;
}

.character-node .label {
  color: #333333 !important;        /* Темно-серый текст */
}

/* Класс для группы фонов */
.backgrounds-group > rect {
  fill: #c0c0c0 !important;        /* Средне-серый фон */
  stroke: #606060 !important;       /* Темно-серый контур */
  stroke-width: 2px !important;
}

.backgrounds-group .label {
  color: #333333 !important;        /* Темно-серый текст */
}

/* Класс для группы игр */
.games-group > rect {
  fill: #c0c0c0 !important;
  stroke: #606060 !important;
  stroke-width: 2px !important;
}

.games-group .label {
  color: #333333 !important;
}

.games-list-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin: 6px auto 0 !important;
  padding: 6px 8px !important;
  background-color: rgba(220,220,220,0.3) !important;
  border-radius: 8px !important;
  min-width: 160px !important;
}

.game-list-item {
  padding: 3px 8px !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,0.55) !important;
  border: 1px solid rgba(96,96,96,0.25) !important;
  color: #333333 !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  text-align: left !important;
  white-space: nowrap !important;
}

.game-list-empty {
  color: #555555 !important;
  font-size: 12px !important;
  font-style: italic !important;
  text-align: center !important;
}

/* Контейнер для эмоций персонажа */
.char-emotions-container {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 6px !important;
  padding: 4px !important;
  background-color: rgba(200,200,200,0.2) !important;
  border-radius: 8px !important;
}

/* Миниатюры эмоций */
.char-emotion-thumbnail {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain !important;
  background-color: #f0f0f0 !important;
  border-radius: 6px !important;
  border: 1px solid #a0a0a0 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  cursor: zoom-in !important;
}

.char-emotion-thumbnail:hover {
  transform: scale(3.5) !important;
  z-index: 9999 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
  border: 1px solid #606060 !important;
  cursor: zoom-out !important;
}

/* Контейнер для фонов */
.bg-images-container {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 6px auto !important;
  padding: 6px !important;
  background-color: rgba(220,220,220,0.3) !important;
  border-radius: 8px !important;
}

/* Миниатюры фонов (обычные) */
.bg-thumbnail {
  width: 40px !important;
  height: 40px !important;
  object-fit: cover !important;
  background-color: #e8e8e8 !important;
  border-radius: 6px !important;
  border: 1px solid #a0a0a0 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  cursor: zoom-in !important;
}

/* Увеличенные миниатюры для фонов */
.bg-thumbnail.large {
  width: 50px !important;
  height: 50px !important;
}

.bg-thumbnail:hover {
  transform: scale(3.5) !important;
  z-index: 9999 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
  border: 1px solid #606060 !important;
  cursor: zoom-out !important;
}

/* Стили для текста в узлах */
.characters-group .label span,
.character-node .label span,
.backgrounds-group .label span,
.games-group .label span {
  color: #333333 !important;
  font-weight: 500 !important;
}

.characters-group .label b,
.character-node .label b,
.backgrounds-group .label b,
.games-group .label b {
  color: #222222 !important;
  font-weight: 700 !important;
}

.characters-group .label i,
.character-node .label i,
.backgrounds-group .label i,
.games-group .label i {
  color: #444444 !important;
  font-style: italic !important;
}