/* main.css */

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

:root {
  /* переменные, которые подхватывает iOS Safari и WebView */
  --safe-top:    env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}

/* Общие стили */
body {
  font-family: 'Montserrat', sans-serif;
  background: url('/static/images/backgrounds/bg1.webp') no-repeat center center;
  background-size: cover;
  overflow-x: hidden;
  color: #fff;
  margin: 0;
  padding-top:    var(--safe-top);
  padding-bottom: var(--safe-bottom);
}

.narration-inline {
  font-style: italic;
  color: #dbd172;
  opacity: 0.97;
  white-space: nowrap;   /* <-- вот эта строка! */
  text-shadow: 0 1px 3px #000b;
}



html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

#game {
  width: 100vw;
  /* вместо 100vh — реальное «окно» minus тул-бар Telegram: */
  height: calc(var(--vh) * 100);
  position: relative;
}

/* 1) родительская зона */
.action-area {
  position: relative;  /* <— обязательно */
  top: 0;
  left: 0;
  width: 100%;
  height: 75vh;       /* уже у вас было */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 2) сама модалка внутри action-area */
.modal {
  display: none;              /* открываем скриптом */
  position: absolute;         /* <— был fixed, стал absolute */
  top: 0;                     /* прижатая к action-area */
  left: 0;
  transform: none;            /* убрали translateX */
  width: 100%;                /* заливает всю зону */
  height: 100%;               /* тож заливает всю зону */
  max-height: 100%;

  background: url('/static/images/backgrounds/modal.webp') no-repeat center center;
  background-size: 100% 100%;
  border-radius: 0;
  padding: 0;
  z-index: 1000;                /* чуть выше action-icons */
  overflow: hidden;
}

/* 3) контент внутри модалки */
.modal-content {
  position: absolute;
  top: 5%;
  left: 0;
  width: 100%;
  height: 90%;
  box-sizing: border-box;
  padding: 0 9vw; /* только боковые паддинги */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center; /* Центрирует контент по горизонтали */
  justify-content: flex-start; /* Контент сверху вниз */
}


/* 4) крестик */
.modal-close {
  position: absolute;
  top: 5%;                    /* 2% от высоты модалки */
  right: 15%;                  /* 2% от ширины модалки */
  width: 4vh;                 /* пусть остается vh для размера */
  height: 4vh;
  background: url('/static/images/icons/crossicon.webp') no-repeat center center;
  background-size: contain;
  border: none;
  cursor: pointer;
  z-index: 20;
  color: transparent;
  font-size: 0;
  line-height: 0;
}
.modal-close:hover { opacity: 0.8; }


/* Контейнер для 6 иконок (2 колонки, 3 строки) */
.action-icons-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 40px;
  padding: 20px;
  margin-top: 60px;  /* ← вот это сместит только иконки */
}
.action-icons-grid .icon {
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  padding: 2px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.action-icons-grid .icon:hover {
  background-color: rgba(0, 0, 0, 0.9);
}
.action-icons-grid .icon img {
  width: 96px;
  height: 96px;
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 4px #aaa);
}
.action-icons-grid .icon span {
  display: block;
  margin-top: 5px;
  font-size: 18px;
}

/* Панель игрока (нижние 25% экрана) */
.player-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 25vh;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 10px 20px;
  display: flex;
  align-items: center;
}

.player-info {
  display: flex;
  width: 100%;
  align-items: center;
}

.player-left {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.player-portrait-container {
  position: relative;
  width: 80px;
  height: 80px;
  margin-bottom: 5px;
}
.player-portrait {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.player-health-bar {
  position: relative;
  width: 80px;
  height: 12px;
  background-color: #555;
  border-radius: 5px;
  overflow: hidden;
  margin: 0 auto;
}
#playerHealthFill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #e74c3c;
  width: 100%;
  border-radius: 5px;
  transition: width 0.3s ease;
}
#playerHealthText {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  font-size: 10px;
  color: #fff;
  line-height: 12px;
  pointer-events: none;
}

.player-right {
  flex: 1;
  padding-left: 20px;
}
.level-coins {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 16px;
}
.xp-bar {
  position: relative;
  width: 100%;
  height: 12px;
  background-color: #555;
  border-radius: 5px;
  overflow: hidden;
  margin-top: 5px;
}
#xpProgressFill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #4caf50;
  width: 0%;
  border-radius: 5px;
  transition: width 0.3s ease;
}
#xpProgressText {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  font-size: 10px;
  color: #fff;
  line-height: 12px;
  pointer-events: none;
}
.player-attributes div {
  font-size: 14px;
  margin-top: 5px;
}
 
#enemy-selection-container {
  position: relative;
  min-height: 240px; /* это страховка для мобилки, чтобы не схлопывалось при 1 враге */
}


/* Скрытый контейнер боя */
.battle-container.hidden {
  display: none;
}

/* Основной контейнер боя — полный размер родителя, всё по центру */
.battle-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;               /* высота по содержимому */
  display: flex;
  flex-direction: column;
  align-items: center;        /* элементы по горизонтали */
  justify-content: center;    /* элементы по вертикали */
  gap: 1.5rem;                /* пространство между блоками */
  text-align: center;
}

/* Контейнер изображения врага */
.enemy-image-container {
  width: 180px;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  position: relative;
  margin: 0;                  /* уже центрируем flex-контейнером выше */
}

/* Само изображение */
.enemy-image-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.enemy-health {
  position: relative;
  width: 100%;
  height: 20px;
  background-color: #555;
  margin: 5px auto;
  border-radius: 10px;
  overflow: hidden;

  /* новая обводка */
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-sizing: border-box;
}

#enemyHealthBar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* градиент от #B22222 к чуть более тёмному */
  background: linear-gradient(90deg, #B22222, #8B1A1A);
  border-radius: 10px;
}


/* Текст поверх полосы здоровья */
.enemy-health::after {
  content: attr(data-hp);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #000;
  pointer-events: none;
}

/* Блок с опциями атаки — три кнопки по центру */
#battleModal .attack-options {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  column-gap: 0 !important;
  justify-items: center !important;
  align-items: center !important;
  width: 100%;
  margin: 0;                  /* убираем старые отступы */
}

/* Сбрасываем у кнопок всё лишнее */
#battleModal .attack-options .attack-button {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  transition: transform 0.2s ease !important;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.8));
  transition: filter 0.2s ease, transform 0.2s ease;
}

/* Размер иконок атак */
#battleModal .attack-options .attack-button img {
  width: 3rem !important;
  height: 3rem !important;
  object-fit: contain !important;
  display: block !important;
}

/* Индивидуальное позиционирование по ячейкам */
#battleModal .attack-options .attack-button:first-child {
  justify-self: end !important;
}
#battleModal .attack-options .attack-button:nth-child(2) {
  justify-self: center !important;
}
#battleModal .attack-options .attack-button:last-child {
  justify-self: start !important;
}

/* Hover-эффект «парения» */
#battleModal .attack-options .attack-button:hover {
  filter: drop-shadow(0 0 10px rgba(255,255,255,1));
  transform: scale(1.1) !important;
}


/* сбрасываем всё лишнее */
.damage-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translate(0, 0);
  opacity: 0;

  font-size: 32px;
  font-weight: bold;
  color: #ff0000;
  /* вместо обводки — светящийся эффект */
  text-shadow: 0 0 8px #fff;

  /* здесь только объявляем, что трансформ и прозрачность анимируются */
  transition:
    transform 0.5s ease-out,
    opacity  0.5s ease-out;
}



/* Уведомления — правая нижняя область 50%×16% */
#notifications-container {
  position: fixed;
  right: 20px;
  bottom: 5px;
  width: 40vw;        /* зона по горизонтали: 50% от ширины окна */
  height: 13vh;       /* зона по вертикали: 16% от высоты окна */
  padding: 4px;       /* внутренние отступы */
  box-sizing: border-box;
  overflow-y: auto;   /* появляется скролл, если уведомлений больше места */
  z-index: 3000;
 
  
}

/* Одно уведомление */
.notification {
  background-color: rgba(138, 15, 15, 0.7);
  padding: 6px 12px;
  margin-bottom: 6px;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #fff;
}

/* Текст (максимум 2 строки) */
.notification p {
  margin: 0;
  font-size: 12px;
  line-height: 1.2em;
  max-height: 3.6em;   /* ровно две строки */
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* Кнопка закрыть */
.notification .close-btn {
  background: none;
  border: none;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

/* Рамки для предметов по редкости */
.inventory-item.common, .slot.common {
  border: 1px solid grey;
}
.inventory-item.uncommon, .slot.uncommon {
  border: 1px solid green;
}
.inventory-item.rare, .slot.rare {
  border: 1px solid blue;
}
.inventory-item.epic, .slot.epic {
  border: 1px solid purple;
}
.inventory-item.legendary, .slot.legendary {
  border: 1px solid orange;
}

/* Level Up Modal */
#levelUpModal .modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 95%;
  margin: 0 auto;
  padding: 30px;
  padding-left: calc(30px + 3%);
}

#levelUpModal h2.modal-header {
  font-size: 16px;
  margin-bottom: 20px;
}

#levelUpModal p {
  font-size: 14px;
  margin-bottom: 20px;
}

.level-up-options {
  display: flex;
  gap: 15px;
  margin-top: 10px; /* чуть отступить от текста */
}

.level-up-button {
  /* ширина от 50px до 100px, но преимущественно 8vw */
  width:  clamp(80px, 9vw, 100px);
  /* высота = 1.2× ширины: тоже адаптивно, от 60px до 120px */
  height: clamp(84px, 9.45vw, 105px);

  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
}

.level-up-button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

/* Опционально: эффект при наведении */
.level-up-button:hover img {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}




/* --- Chat modal: по центру, умный wrap (1–3 в ряд, далее wrap) --- */
#chatModal .modal-content {
  position: relative;
}

#chatModal .npc-selection {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-wrap: wrap;               /* будем переключаться между wrap и nowrap на лету */
  justify-content: center;       /* центрируем карточки */
  gap: 10px;                     /* расстояние между ними */
  padding: 0;
  margin: 0;
}

#chatModal .modal-header {
  margin-top: 3vh;
}
/* Короткий класс, который запрещает wrap (будет добавляться JS-ом) */
#chatModal .npc-selection.no-wrap {
  flex-wrap: nowrap;
}

/* Сама карточка */
#chatModal .npc-selection .npc {
  flex: 0 0 auto;                /* не растягиваемся, не ужимаемся */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px;                   /* фиксированная ширина */
  cursor: pointer;
  position: relative;
}

/* Картинка 1:1, привязанная к верху */
#chatModal .npc-selection .npc img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top;
  border-radius: 5px;
  background: #111;
}

/* Подпись под карточкой, две строки, полупрозрачный фон */
#chatModal .npc-selection .npc small {
  margin-top: 4px;
  line-height: 1.2em;
  font-size: 10px;
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  padding: 2px 4px;
  box-sizing: border-box;
  max-height: 2.4em;             /* ровно две строки */
  overflow: hidden;
}

/* Hover: зелёный outline поверх всего */
#chatModal .npc-selection .npc:hover {
  outline: 2px solid #4caf50;
  outline-offset: -2px;
}

.dialogue-container.hidden {
  display: none;
}
.dialogue-container {
  text-align: center;
  margin-top: 20px;
  position: relative;
}
.dialogue-portrait {
  width: 120px;
  height: 120px;
  margin: 0 auto 10px auto;
  border-radius: 10px;
  background-color: #444;
  background-size: cover;
  background-position: center center;
}
.dialogue-text-bubble {
  background-color: rgba(0,0,0,0.6);
  border-radius: 10px;
  padding: 15px;
  margin: 0 auto;
  width: 80%;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.next-dialogue-btn {
  margin-top: 15px;
  background-color: #2980b9;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
}
.next-dialogue-btn:hover {
  background-color: #1f5a7e;
}

#questRewardModal .modal-content,
#battleDropModal .modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 240px;
  max-width: 95vw;
  min-height: 200px;
  max-height: 85vh;
  background: transparent;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
  margin: 0;
  overflow: visible;
  font-size: 20px;
  margin-bottom: 20px;
}


/* Окно взаимодействия с NPC */
.npc-interaction-container.hidden {
  display: none;
}
.npc-interaction-container {
  text-align: center;
  margin-top: 20px;
}
.npc-portrait-large {
  width: 120px;
  height: 120px;
  margin: 0 auto 10px auto;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
}
.npc-name {
  font-size: 18px;
  margin-bottom: 15px;
  font-weight: bold;
}
/* Вертикальные кнопки */
.npc-interaction-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
  align-items: center;
}
.npc-interaction-options button {
  width: 200px;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 8px;
  border: none;
  background-color: #444;
  color: #fff;
  transition: background-color 0.2s;
}
.npc-interaction-options button:hover {
  background-color: #555;
}
/* Кнопка Назад */
#chatBackToSelection {
  margin-top: 10px;
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 8px;
  border: none;
  background-color: #888;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s;
}

/* Ветвящийся диалог – те же стили для вариантов */
.talk-answers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}
.talk-answers button {
  width: 200px;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 8px;
  border: none;
  background-color: #444;
  color: #fff;
  transition: background-color 0.2s;
}
.talk-answers button:hover {
  background-color: #555;
}

/* Прячем элемент при классе .hidden */
.hidden {
  display: none !important;
}

.menu-toggle, #returnIcon {
  position: absolute;
  top: 10px;
  width: 60px;
  height: 60px;
  background: rgba(0,0,0,0.6);
  border-radius: 5px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999;
}
.menu-toggle { left: 10px; }
#returnIcon { right: 10px; }
.menu-toggle img,
#returnIcon img {
  width: 90%;
  height: 90%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
#returnIcon img { transform: scaleX(-1); }

#soundToggle.icon-toggle {
  position: absolute;
  top: 78px;         /* чуть ниже меню */
  left: 10px;        /* такой же левый отступ, как у гамбургера, или чуть больше */
  width: 40px;
  height: 40px;
  background: rgba(0,0,0,0.64);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.17);
  cursor: pointer;
  transition: background 0.18s;
}

#soundToggle img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 4px #aaa);
  transition: filter 0.2s;
}

.portal-glow {
  /* Белая контурная аура всегда */
  box-shadow:
    0 0 10px 3px #fff,
    0 0 0 0 #fff;
  animation: portal-glow-pulse 2.0s ease-in-out infinite;
}

@keyframes portal-glow-pulse {
  0% {
    box-shadow:
      0 0 14px 3px #fff,
      0 0 0 0 #fff;
    filter: brightness(1.05);
  }
  40% {
    box-shadow:
      0 0 14px 3px #fff,
      0 0 48px 13px #fff8;
    filter: brightness(1.18);
  }
  100% {
    box-shadow:
      0 0 14px 3px #fff,
      0 0 0 0 #fff;
    filter: brightness(1.05);
  }
}




.npc-gallery-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  justify-items: center;
}
.npc-gallery-container img.gallery-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid #444;
  border-radius: 5px;
}

/* Кнопки VN‑диалога */
.vn-btn {
  display: inline-block;
  margin: 8px 6px;
  padding: 10px 22px;
  font-size: 18px;
  border: none;
  border-radius: 8px;
  background-color: #1e8dd4;
  color: #fff;
  cursor: pointer;
  transition: background-color .2s;
}
.vn-btn:hover { background-color: #156aa0; }


/* Диалоговые портреты на 15% меньше */
.dialogue-portrait,
.npc-portrait-large {
  width: 102px !important;  /* 120px * 0.85 */
  height: 102px !important;
}

/* Немного отступа под диалог, чтобы не перекрывать кнопку */
.dialogue-text-bubble {
  margin-bottom: 20px;
}

/* Делаем контейнер-анкёр относительным */
.tutorial-anchor {
  position: relative;
}

/* Уменьшенные паддинги и шрифт, подсказка более компактная */
.tutorial-hint {
  position: absolute;
  background: rgba(138, 15, 15, 0.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.2;
  z-index: 20000;

  /* вот добавляем белую рамку */
  border: 1px solid #fff;
}


/* СПРАВА ОТ ЭЛЕМЕНТА — стрелка смотрит вправо */
.tutorial-hint--right {
  top: 50%;
  left: 100%;
  /* убираем вертикальный центр, опускаем подсказку вниз на ~6px */
  transform: translate(8px, -6px);
}
.tutorial-hint--right::after {
  content: '';
  position: absolute;
  top: 0;       /* стрелка остаётся сверху блока */
  left: -14px;
  transform: translateY(0); /* уводим стрелку обратно на середину хоста */
  border: 6px solid transparent;
  border-right-color: #fff;
}

/* СЛЕВА ОТ ЭЛЕМЕНТА — стрелка смотрит влево */
.tutorial-hint--left {
  top: 50%;
  right: 100%;
  transform: translate(-8px, -6px);
}
.tutorial-hint--left::after {
  content: '';
  position: absolute;
  top: 0;
  right: -14px;
  transform: translateY(0);
  border: 6px solid transparent;
  border-left-color: #fff;
}

/* ВНИЗУ ЭЛЕМЕНТА — подсказка находится под хостом, стрелка смотрит вверх */
.tutorial-hint--below {
  top: 100%;
  left: 50%;
  /* смещаем подсказку чуть вниз, чтобы стрелка оставалась на самом верху блока */
  transform: translate(-50%, 20px);
}
.tutorial-hint--below::after {
  content: '';
  position: absolute;
  top: -14px;  /* стрелка «врезается» в самый верх блока */
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: #fff;
}

/* НАД ЭЛЕМЕНТОМ — подсказка над хостом, стрелка смотрит вниз */
.tutorial-hint--above {
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -10px);
}
.tutorial-hint--above::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #fff;
}

/* ====== Общие стили для любого слайдера ====== */
.gallery-slider {
  position: relative;
  max-width: 100vw;
  margin: auto;
}

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2em;
  border: none;
  color: white;
  cursor: pointer;
  padding: 15px;
  z-index: 100;
}

.slider-arrow.left  { left: 0; }
.slider-arrow.right { right: 0; }

.slides-container {
  position: relative;
  height: 90vh;           /* ↑ bump up to 90% of viewport height */
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide {
  max-height: 90vh;       /* constrain to 90vh so it never overflows */
  max-width: 90vw;        /* keep within 90% of viewport width */
  object-fit: contain;

}



/* большая кнопка «Назад» — по центру сверху */
#npcGalleryModal #galleryBackBtn {
  position: absolute;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 50px;
  background: url('/static/images/icons/backbutton.webp') no-repeat center center;
  background-size: contain;
  border: none;
  cursor: pointer;
  z-index: 12002;
}




/* Кнопка для монологов и центр-сообщений */
.ui-button {
  padding: 8px 16px;           /* удобная «цепкость» для пальца */
  font-size: 16px;             /* читаемый текст */
  border-radius: 6px;          /* чуть скруглённая */
  background-color: #4caf50;   /* синий фон, как у диалогов */
  color: #fff;
  border: none;
  cursor: pointer;
  align-self: center;          /* центрируем по горизонтали в flex-контейнере */
  /* отключаем растягивание: */
  flex: 0 0 auto;
  margin-top: 10px;
  transition: background-color .2s;
}
.ui-button:hover {
  background-color: #388e3c; 
}

/* Блокируем абсолютно всё внутри #game */
.tutorial-lock,
.tutorial-lock * {
  pointer-events: none !important;
}

/* А вот эту кнопку и всё её потомки — разрешаем */
.tutorial-lock .highlighted,
.tutorial-lock .highlighted * {
  pointer-events: auto !important;
}


/* ==== Кнопки-иконки talk/gallery/back ==== */
.icon-btn {
  display: block;        /* чтобы можно было задать width */
  width: 180px;          /* желаемая ширина */
  height: 50px;          /* сохраняет пропорции 950×390 */
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

/* Убираем серый фон у кнопки «Назад» */
#chatBackToSelection {
  background: none !important;
  border: none;
  padding: 0;
}


/* Оверлей */
.gallery-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 12001;
}

/* Кнопка «Назад» */
.gallery-back-btn {
  position: absolute;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 50px;
  background: url('/static/images/icons/backbutton1.webp') no-repeat center center;
  background-size: contain;
  border: none;
  cursor: pointer;
  z-index: 12001;
}

/* Слайдер */
.gallery-slider {
  position: relative;
  max-width: 100vw;
  margin: auto;
}

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2em;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 15px;
  z-index: 12002;
}

.slider-arrow.left  { left: 0; }
.slider-arrow.right { right: 0; }

.slides-container {
  position: relative;
  height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

/* 0) Контейнер chatIcon должен быть relative */
#chatIcon {
  position: relative;
}
#battleIcon {
  position: relative;
}
/* Анимация «плавного парения» */
@keyframes pulse-glow {
  0%, 100% {
    filter: drop-shadow(0 0 16px #ffe07a) drop-shadow(0 0 36px #fff8b0);
  }
  50% {
    filter: drop-shadow(0 0 32px #ffe07a) drop-shadow(0 0 54px #fff8b0);
  }
}
@keyframes float {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(0, 5px); }
}

/* Стили для бейджа */
#chatNotification, #fightNotification, #doneNotification {
  position: absolute;
  top: -12px;
  left: -12px;
  width: 58px;
  height: 58px;
  object-fit: contain;
  pointer-events: none;
  z-index: 10;
  filter: drop-shadow(0 0 18px #ffe07a) drop-shadow(0 0 38px #fff8b0);
  animation: pulse-glow 1.5s ease-in-out infinite, float 2s ease-in-out infinite;
}
#portalReturnBadge {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 48px;
  height: 48px;
  background: url('/static/images/icons/doneicon.webp') no-repeat center center;
  background-size: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: #ffe07a;
  pointer-events: none;
  z-index: 12;
  filter: drop-shadow(0 0 16px #ffe07a) drop-shadow(0 0 32px #fff8b0);
  animation: pulse-glow 1.5s ease-in-out infinite, float 2s ease-in-out infinite;
}
.portal-badge.hidden { display: none !important; }

/* Класс скрытия */
.hidden {
  display: none !important;
}

#heroCharacter,
#npcCharacter {
  position: absolute;
  bottom: 0;
  width: 300px;
  height: 400px;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 14000;
  transition: transform 0.5s ease;
}
/* стартовые позиции — за экраном слева и справа */
#heroCharacter { left: 50%; transform: translateX(-500px); }
#npcCharacter  { left: 50%; transform: translateX(500px); }

/* --------------- Portal Modal Styles --------------- */
#portalModal .modal-content {
  position: relative;
  padding: 20px 0 80px; /* увеличили нижний паддинг под большую кнопку */
}

#portalModal .modal-header {
  text-align: center;
  color: #fff;
  margin: 0;
  font-size: 20px;
  padding-bottom: 8px;
}

/* переносим карусель чуть ниже заголовка */
.portal-options {
  position: absolute;
  top: 20%;             /* раньше было ~60px, теперь ниже */
  left: 50%;
  transform: translateX(-50%);
  width: 75%;
  height: 300px;         /* под 150×225 + подписи */
  overflow: hidden;
}

/* сам свайпер */
.world-scroll {
  display: flex;
  gap: 12px;
  height: 100%;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  padding-left:  calc((100% - 150px) / 2); /* Центрируем первый */
  padding-right: calc((100% - 150px) / 2); /* Центрируем последний */
  -ms-overflow-style: none; /* IE/Edge */
  scrollbar-width: none;    /* Firefox */
}
.world-scroll::-webkit-scrollbar,
.world-scroll::-webkit-scrollbar {
  display: none;
}
/* Элементы остаются прежними */
.world-item {
  flex: 0 0 auto;
  width: 150px;
  text-align: center;
  scroll-snap-align: center;
  transform: scale(0.8);
  transition: transform 0.3s ease;
  cursor: pointer;
}
.world-item.active { transform: scale(1); }
.world-item.disabled { opacity: 0.4; cursor: default; }

.world-thumb {
  width: 150px;
  height: 225px;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.world-label {
  margin-top: 6px;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}

/* --------------- Back Button --------------- */
#portalBackBtn {
  position: absolute;
  bottom: -8%;
  left: 50%;
  transform: translateX(-50%);
  width: 144px;    /* в 3 раза больше 48px */
  height: 144px;
  background: url('/static/images/icons/backbutton.webp') no-repeat center center;
  background-size: contain;
  border: none;
  cursor: pointer;
  z-index: 10;
}


/* ———————————————————————————————————————— */
/* 1) Центрируем контент модалки и фиксируем крестик */
/* ———————————————————————————————————————— */

#questsModalContent {
  width: 70%;
  margin: 0 auto;
  box-sizing: border-box;
  color: #fff;
  font-family: inherit;
}

.zone-header {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  margin: 16px 0 6px 0;
  color: #fff;
  justify-content: flex-start;
  gap: 8px;
  user-select: none;
}
.zone-header .zone-toggle {
  margin-left: 8px;
  font-size: 20px;
  transition: transform 0.2s;
  font-family: inherit;
  font-weight: 700;
}
.zone-header .zone-toggle.rotated {
  transform: rotate(180deg);
}
.zone-content {
  display: none;
  padding-left: 24px; /* табуляция для контента */
}

.zone-content.open { display: block; }

.quest-item {
  margin-bottom: 14px;
  color: #fff;
  font-size: 15px;
  text-align: left;
}

#questsModal .modal-header {
  margin-top: 3vh;
}

.quest-title {
  font-weight: 500;
  margin-bottom: 2px;
  color: #fff;
}

.quest-activity {
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: left;
  color: #fff;
}

.quest-bar {
  width: 220px;
  height: 18px;
  background: #252525;
  border-radius: 6px;
  margin: 2px 0 8px 0;
  position: relative;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #fff;
}
.quest-bar-fill {
  height: 100%;
  background: #4e4e4e;
  border-radius: 6px;
  transition: width 0.25s;
  position: absolute;
  left: 0; top: 0;
}
.quest-bar-text {
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  font-size: 13px;
  color: #fff;
  font-weight: 400;
  z-index: 1;
}