* {
  box-sizing: border-box;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* --- ОСНОВНЫЕ СТИЛИ (Простая тема по умолчанию) --- */
body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #000; /* Цвет для черных полос */
  /* display: flex; */
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: monospace;
}

#game-world {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(var(--scale, 1));
  transform-origin: center center;

  background-color: #fff;
  overflow: hidden;
}

#pinwheel-container,
#dvd-container,
#rain-container,
#skywriter-container,
#powerup-spawn-area,
#lootbox-spawn-area {
  position: absolute; /* <-- ГЛАВНЫЙ ФИКС: НЕ fixed, а absolute */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* --- СЛОЙ 1: ФОНОВЫЙ СЛОЙ С АНИМАЦИЕЙ --- */
#dvd-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.bouncing-dvd {
  position: absolute;
  width: 80px;
  height: 42px;
  object-fit: contain;
  filter: grayscale(100%) brightness(0%);
  will-change: transform;
}

#dvd-container.technicolor-active .bouncing-dvd {
  /* 
     * Создаем 4 цветные тени, смещенные на 0px,
     * которые сливаются в одну цветную подложку.
     * --hue будет управлять цветом этой подложки.
    */
  filter: saturate(1) brightness(1) hue-rotate(var(--hue, 0deg));
}

#game-container {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.main-clicker-area button {
  width: 127px;
  height: 50px;
  /* padding: 10px 20px; */
  font-size: 1.2em;
  cursor: pointer;
  border: 1px solid #000;
  /* background-color: #fff; */
  color: #000;
  transition: all 0.3s ease;
  z-index: 4;
  position: relative;
  background: linear-gradient(
    to bottom,
    rgb(247, 247, 247),
    rgb(232, 232, 232)
  );
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1),
    inset 0 1px 1px rgba(255, 255, 255, 0.7);
}

#stimulation-counter,
.sps-counter {
  display: inline-block; /* Позволяет элементу иметь фон и отступы, но занимать ширину по контенту */
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 8px; /* Чуть меньше скругление для компактности */
  padding: 5px 12px; /* Внутренние отступы */
  margin: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Уникальные стили для основного счетчика */
#stimulation-counter {
  font-size: 1.5em;
  font-weight: normal;
}

/* Уникальные стили для счетчика С/с */
.sps-counter {
  font-size: 1.2em;
  font-weight: normal;
  height: auto;
}

/* ДОБАВЛЕНО: Универсальный класс для скрытия элементов */
.hidden {
  display: none !important;
}

.upgrades-container {
  margin-top: 30px;
  display: flex;
  gap: 15px;
  min-height: 110px;
  align-items: flex-end;
  z-index: 4;
  position: relative;
}

.upgrade-card {
  position: relative;

  /* ГЛАВНЫЙ ФИКС 1: Увеличиваем отступы, чтобы картинка не касалась рамки */
  /* padding: 1px; */

  border: 1px solid #000;
  background-color: #fff;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.2s ease;
  width: 90px;
  height: 90px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5; /* Убедитесь, что это значение правильное (должно быть >= 5) */

  /* ГЛАВНЫЙ ФИКС 2: Обрезаем картинку по форме кнопки (для "красивого" режима) */
  /* overflow: hidden; */
}

.upgrade-card:hover {
  transform: translateY(-5px);
  /* Сдвигаем вверх на 5 пикселей */
}

.upgrade-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #eee;
}

.upgrade-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.upgrade-card .icon-wrapper {
  width: 100%;
  height: 100%;
  /* padding: 1px; <-- Переносим padding сюда */
  box-sizing: border-box;

  /* ГЛАВНЫЙ ФИКС: Обрезаем только то, что внутри обертки */
  overflow: hidden;

  /* Скругляем углы обертки так же, как у карточки */
  border-radius: 11px; /* Чуть меньше, чем у родителя (12px), для аккуратности */

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Применяем стили к картинкам ВНУТРИ обертки */
.upgrade-card .icon-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.level-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #e60023;
  /* Красный цвет для контраста с черно-белым дизайном */
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
}

.tooltip {
  position: absolute;
  top: 115%;
  left: 50%;
  transform: translateX(-50%);

  background-color: #fff;
  color: #000;
  border: 1px solid #eee;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  padding: 10px;
  border-radius: 8px;
  width: 220px;
  text-align: left;

  opacity: 0;
  /* Подсказка по умолчанию полностью прозрачна */
  pointer-events: none;
  /* ... и не мешает кликам */
  transition: opacity 0.3s ease;
  /* Анимируем только прозрачность */

  z-index: 10002;
  font-size: 14px;
  /* <-- Увеличиваем текст */
}

.upgrade-card:hover .tooltip,
.achievement-icon.unlocked:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
}

.tooltip h4,
.tooltip p {
  margin: 0 0 5px;
}

.tooltip .cost {
  color: #000;
  /* <-- Делаем цену черной */
  font-weight: bold;
}
.flying-number,
.flying-number-simple {
  will-change: transform, opacity;
}

.flying-number-simple {
  position: fixed;
  color: #000;
  font-size: 1.5em;
  font-weight: bold;
  pointer-events: none;
  z-index: 7;
  /* Подключаем простую анимацию */
  animation: fly-up-and-fade 1s ease-out forwards;
}

.flying-number-simple.critical {
  /* Стиль для крита простой анимации */
  color: #ff9900;
  font-size: 2.2em;
  font-weight: 900;
}

@keyframes fly-up-and-fade {
  from {
    transform: translate(-50%, -50%);
    opacity: 1;
  }

  to {
    transform: translate(-50%, -150px);
    opacity: 0;
  }
}

.flying-number {
  position: absolute;
  color: #000;
  font-size: 1.5em;
  font-weight: bold;
  pointer-events: none;
  z-index: 7;
  transition: opacity 0.5s ease-out;
}

.flying-number.critical {
  color: #ff9900;
  /* Яркий оранжевый цвет */
  font-size: 2.2em;
  /* Делаем цифру заметно больше */
  font-weight: 900;
  /* И жирнее */
}

/* --- СЛОЙ 3: ПАНЕЛЬ ОТЛАДКИ (без изменений) --- */
.debug-panel {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.1);
  padding: 10px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 99999;
  opacity: 0;
  pointer-events: none; /* Делаем ее некликабельной, пока она невидима */
  transition: opacity 0.3s ease;
}
.debug-panel.visible {
  opacity: 1;
  pointer-events: auto; /* Делаем кликабельной */
}

.debug-panel button {
  border: 1px solid #999;
  background-color: #fff;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 5px;
  /* Убедимся, что и здесь простой шрифт */
}

.debug-panel button:hover {
  background-color: #eee;
}

.add-points-group {
  display: flex;
  gap: 5px;
}

.main-clicker-area button.upgraded-button {
  border-radius: 8px;
  /* Скругляем углы */
  transform: scale(1.1);
  /* Немного увеличиваем размер */
  border-color: #555;
  /* Делаем рамку чуть мягче */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  /* Добавляем легкую тень */
}

.main-clicker-area button.upgraded-button:active {
  transform: scale(1.05);
  /* Немного уменьшаем кнопку */
  box-shadow: none;
  /* Убираем тень для эффекта "вдавливания" */
}

.widget-container {
  position: fixed;
  z-index: 4;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Общая тень */
  transition: all 0.5s ease; /* Плавные переходы для всех изменений */
}
.widget-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.left-widgets-column {
  position: fixed;
  left: 0px;
  top: 30px; /* Начинается под новостной строкой */
  bottom: 10px; /* Заканчивается над краем экрана */

  display: flex;
  flex-direction: column; /* Элементы идут друг под другом */
  justify-content: space-between; /* Равномерно распределяются по высоте */
  align-items: flex-start; /* Выравниваются по левому краю */
  gap: 10px; /* Отступ между ними */

  pointer-events: none; /* Сам контейнер не кликабелен */
  z-index: 4;
}

/* Стили для дочерних виджетов внутри колонки */
.left-widgets-column .widget-container {
  position: static; /* <-- ВАЖНО: Убираем fixed, чтобы они подчинялись Flexbox */
  pointer-events: all; /* А вот сами виджеты - кликабельны */
  width: 240px;
  max-width: 30vw; /* Макс. ширина - 30% от ширины окна */
  aspect-ratio: 16 / 9; /* Всегда сохраняем пропорции 16:9 */
}

/* Уникальные стили для каждого виджета */
.subway-surfers-widget {
  bottom: 0px;
  right: 0px;
  width: 240px;
  height: 135px;
}

.soap-widget {
  bottom: 10px;
  left: 270px;
  width: 140px;
  height: 250px;
  box-shadow: none;
}

.news-ticker-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  /* Белый фон */
  color: #000;
  /* Черный текст */
  border-bottom: 1px solid #000;
  /* Простая рамка снизу */
  display: flex;
  /* Выстраиваем элементы в ряд */
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  z-index: 50;
}

/* Неподвижная плашка "НОВОСТИ" */
.news-ticker-label {
  background-color: #000;
  color: #fff;
  padding: 8px 15px;
  white-space: nowrap;
}

/* Контейнер для движущегося текста, который его "обрезает" */
.news-ticker-content {
  flex-grow: 1;
  /* Занимает все оставшееся место */
  overflow: hidden;
  /* Скрываем все, что выходит за рамки */
  white-space: nowrap;
}

/* Сам анимированный трек */
.news-ticker-track {
  display: inline-block;
  /* Важно для правильной работы анимации */
  padding-left: 100%;
  /* Начинаем за правым краем */
  /* Подключаем нашу анимацию */
  animation: scroll-left 200s linear infinite;
  /* Увеличили время для замедления */
}

/* Отдельный стиль для каждого новостного элемента */
.news-item {
  display: inline-block;
  /* Чтобы все новости были в одну строку */
  padding: 0 15px;
}

/* Разделитель-точка */
.news-bullet {
  color: #888;
  margin-left: 15px;
}

@keyframes scroll-left {
  from {
    transform: translateX(0);
    /* Начинаем с исходной позиции */
  }

  to {
    transform: translateX(-50%);
    /* Заканчиваем, когда первая копия полностью уедет */
  }
}

.lofi-container {
  position: absolute;
  bottom: -1%;
  /* Немного опускаем, чтобы выглядело лучше */
  right: 290px;
  width: 250px;
  /* Задаем размер */
  z-index: 4;
}

.lofi-container img {
  width: 100%;
  pointer-events: none;
}

/* Стили для плеера */
.music-player {
  position: absolute;
  /* bottom: 80%; */
  /* Появляется над картинкой */
  left: 50%;
  transform: translateX(-50%);

  background-color: #fff;
  border: 1px solid #000;
  padding: 8px;
  width: 180px;
  text-align: center;
  font-size: 14px;

  /* Скрываем по умолчанию */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Показываем плеер при наведении на весь контейнер */
.lofi-container:hover .music-player {
  opacity: 1;
  pointer-events: auto;
}

.track-name {
  margin-bottom: 8px;
}

.player-controls {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid #000;
  padding-top: 5px;
}

.player-controls button {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

.volume-slider {
  -webkit-appearance: none;
  /* Убираем стандартный вид в Chrome/Safari */
  appearance: none;
  width: 90%;
  /* Ширина относительно плеера */
  height: 5px;
  background: #ddd;
  outline: none;
  margin-top: 8px;
  cursor: pointer;
}

/* Стили для "бегунка" на ползунке */
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  background: #000;
  border-radius: 50%;
}

.volume-slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  background: #000;
  border-radius: 50%;
}

/* --- СТИЛИ ДЛЯ АНИМАЦИИ ДОЖДЯ --- */
.rain-container {
  position: fixed;
  top: -100px;
  /* Начинаем выше экрана */
  left: 0;
  width: 100%;
  height: calc(100% + 100px);
  /* Делаем выше экрана, чтобы капли успели появиться */
  pointer-events: none;
  z-index: 1;
  /* На самом заднем плане, даже за DVD */
  overflow: hidden;
}

/* Стиль для каждой отдельной капли */
.raindrop {
  position: absolute;
  bottom: 100%;
  width: 1px;
  height: 50px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  animation: rain-fall linear infinite;
}

/* Описание анимации падения */
@keyframes rain-fall {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(calc(100vh + 150px));
    /* Падаем через весь экран + запас */
  }
}

#pinwheel-container {
  /* --- ГЛАВНЫЙ ФИКС: Делаем его position: absolute --- */
  position: absolute;

  /* Центрируем его относительно #game-world */
  top: 50%;
  left: 50%;

  /* Используем единицы родителя (vw/vh здесь не подойдут) */
  /* Задаем огромный размер, чтобы лучи гарантированно покрывали весь мир */
  width: 200%;
  height: 200%;

  /* Смещаем его центр в центр родителя */
  transform: translate(-50%, -50%);

  z-index: 1;
  pointer-events: none;
  animation: spin 90s linear infinite;
}

/* 
 * Вся магия происходит здесь. Мы используем псевдо-элемент ::before,
 * чтобы нарисовать лучи внутри нашего контейнера.
*/
.pinwheel-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* 
     * СОЗДАЕМ РИСУНОК ЛУЧЕЙ С ПОМОЩЬЮ КОНИЧЕСКОГО ГРАДИЕНТА.
     * Он работает как круговая диаграмма. Мы просто чередуем
     * полупрозрачный серый цвет луча и полностью прозрачный цвет промежутка.
     * В вашем примере 24 луча (360 / 24 = 15 градусов на луч+промежуток).
    */
  background: repeating-conic-gradient(
    from 0deg,
    rgba(150, 150, 200, 0.15) 0deg 22.5deg,
    /* Лучи занимают половину сектора */ transparent 22.5deg 45deg
      /* Промежутки занимают вторую половину */
  );

  /* 
     * СОЗДАЕМ ЭФФЕКТ ЗАТУХАНИЯ ПО КРАЯМ С ПОМОЩЬЮ МАСКИ.
     * Мы накладываем радиальный градиент как маску:
     * центр маски полностью непрозрачный (white), а края - прозрачные.
    */
  mask-image: radial-gradient(
    circle at 50% 50%,
    white,
    white 50%,
    transparent 80%
  );
  -webkit-mask-image: radial-gradient(
    circle at 50% 50%,
    white,
    white 50%,
    transparent 80%
  );
}

/* Анимация вращения остается той же */
@keyframes spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.press-container {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  z-index: 4;
}
.press-container .video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: transparent;
  pointer-events: all;
}

.press-container video {
  width: 100%;
  display: block;
  pointer-events: none !important;
}

#press-video {
  pointer-events: none !important;
}

.press-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  z-index: 2;
}

.press-controls button {
  padding: 8px 16px;
  border: 1px solid #000;
  background: #fff;
  font-size: 16px;
  border-radius: 20px;
  cursor: pointer;
}

.press-reward-text {
  font-weight: bold;
  font-size: 16px;
  color: #2ecc71;
  /* Зеленый, чтобы показать доход */
}

/* --- СТИЛИ ДЛЯ СИСТЕМЫ ДОСТИЖЕНИЙ --- */

.achievements-btn-container {
  margin: 20px 0;
  display: flex;
  gap: 10px;
  position: relative; /* Убедись, что он позиционируется нормально */
  z-index: 10; /* Дай ему высокий z-index на всякий случай */
  opacity: 1;
}

/* Кнопка на главном экране */
.achievements-btn {
  position: relative;
  padding: 8px 20px;
  border: 1px solid #000;
  background: #fff;
  font-size: 16px;
  border-radius: 20px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.achievements-btn:hover {
  transform: scale(1.05);
}

.notification-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: #e60023;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
}

/* Модальное окно */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
}

.modal-content {
  background: #fff;
  padding: 20px;
  width: 90%;
  max-width: 800px;
  border: 1px solid #000;
  border-radius: 12px;
  max-height: none;
  overflow-y: visible;

  animation-duration: 0.3s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.modal-header h2 {
  margin: 0;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 2em;
  cursor: pointer;
}

.modal-overlay.open .modal-content {
  animation-name: modal-open;
}

.modal-overlay.closing .modal-content {
  animation-name: modal-close;
}

/* ДОБАВЛЕНО: Описание анимаций */
@keyframes modal-open {
  from {
    transform: scaleY(0);
    /* Начинаем как линия */
    opacity: 0;
  }

  to {
    transform: scaleY(1);
    /* Раскрываемся до полного размера */
    opacity: 1;
  }
}

@keyframes modal-close {
  from {
    transform: scaleY(1);
    opacity: 1;
  }

  to {
    transform: scaleY(0);
    opacity: 0;
  }
}

/* Сетка достижений */
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(7, auto);
  gap: 5px;
  justify-content: center;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
}

.achievement-icon {
  position: relative;
  width: 59px;
  height: 59px;
  padding: 0;
  border: 1px solid #ddd;
  box-sizing: border-box;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter 0.3s, opacity 0.3s;
}

.achievement-icon.unlocked {
  filter: none;
  opacity: 1;
}

.achievement-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.achievement-icon .tooltip {
  width: 250px;
  z-index: 10003;
}

.achievement-icon.unlocked:hover .tooltip {
  display: block;
}

/* Всплывающие уведомления ("тосты") */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10003;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast {
  background: #7a00cc;
  /* Фиолетовый фон */
  color: #fff;
  padding: 12px 24px;
  border-radius: 25px;
  /* Сильно скругленные углы */
  font-size: 16px;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  animation: slide-in-out 4s ease-in-out forwards;
}

@keyframes slide-in-out {
  0% {
    transform: translateX(110%);
    opacity: 0;
  }

  15% {
    transform: translateX(0);
    opacity: 1;
  }

  85% {
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    transform: translateX(110%);
    opacity: 0;
  }
}

#screen-time-modal .modal-content {
  width: 440px;
  max-width: 90vw;
  height: 444px;
  display: flex;
  flex-direction: column;
}

/* Список теперь будет занимать все доступное место и скроллиться */
#screen-time-list {
  flex-grow: 1;
  /* Разрешаем списку растягиваться */
  overflow-y: auto;
  /* Добавляем скролл, если контент не помещается */

  display: flex;
  flex-direction: column;
  gap: 20px;
  /* Отступ между элементами */
  padding-right: 10px;
  /* Место для скроллбара */
}

.screen-time-item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  /* Иконка(40px) | Инфо(все место) | Доход(авто) */
  align-items: center;
  gap: 15px;
}

.screen-time-item img {
  width: 40px;
  height: 40px;
}
.screen-time-item .icon-container {
  width: 40px;
  height: 40px;
  position: relative; /* Чтобы иконки накладывались друг на друга */
}
.screen-time-item .icon-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: contain;
}

.screen-time-item .icon-enhanced {
  display: none;
}
.screen-time-item .icon-simple {
  display: block;
}

.screen-time-info strong {
  font-size: 1.1em;
}

.screen-time-info .sps {
  font-size: 0.9em;
  color: #888;
}

.screen-time-total {
  font-weight: bold;
  font-size: 1.1em;
  text-align: right;
}

/* Стилизация прогресс-бара */
progress {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border: none;
  border-radius: 3px;
  display: block;
  margin-top: 5px;
}

/* Фон прогресс-бара */
progress::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 3px;
}

/* Заполнение прогресс-бара */
progress::-webkit-progress-value {
  background-color: #888;
  border-radius: 3px;
}

/* --- СТИЛИ ДЛЯ СИСТЕМЫ УРОВНЕЙ --- */
.level-system-container {
  position: fixed;
  top: 50px;
  /* Отступ от новостной строки (если она есть) */
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 400px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.xp-bar {
  width: 100%;
  height: 30px;
  background-color: #eee;
  border: 1px solid #000;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
}

.xp-bar-progress {
  width: 0%;
  /* Начальная ширина */
  height: 100%;
  background-color: #a0e880;
  /* Светло-зеленый */
  transition: width 0.3s ease;
}

.xp-bar-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  box-sizing: border-box;
  font-weight: bold;
  font-size: 14px;
}

#level-label {
  background-color: #80c060;
  /* Темнее, чем прогресс-бар */
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
}

.level-reward-btn {
  padding: 8px 16px;
  border: 1px solid #000;
  background: #37d80e;
  font-size: 16px;
  border-radius: 20px;
  cursor: pointer;
}

/* --- СТИЛИ ДЛЯ ПОДКАСТА --- */
.podcast-container {
  position: fixed;
  top: 30px;
  /* Тот же отступ, что и у системы уровней */
  right: 25%;
  /* Позиционируем на 1/4 от правого края */
  transform: translateX(50%);
  /* Точно центрируем иконку относительно этой точки */
  width: 60px;
  /* Задаем размер */
  z-index: 4;
}

.podcast-container img {
  width: 100%;
}

/* --- СТИЛИ ДЛЯ МАГАЗИНА ПРЕДМЕТОВ --- */

/* Стили для модального окна магазина */
#item-shop-modal .modal-content {
  /* Фон с текстурой дерева */
  background-color: #d2b48c;
  /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='10' viewBox='0 0 100 10'%3E%3Cg fill='%23c0a172' fill-opacity='0.4'%3E%3Cpolygon points='0 10 100 0 100 10 0 10'/%3E%3Cpolygon points='0 0 100 0 0 10'/%3E%3C/g%3E%3C/svg%3E"); */
  color: #4a2a12;
  padding-top: 15px;
}

.shop-header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.shop-header h2 {
  display: inline-block;
  background: linear-gradient(to bottom, #98fb98, #3cb371);
  color: white;
  padding: 10px 40px;
  border-radius: 25px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

/* Перемещаем кнопку закрытия внутрь шапки */
#item-shop-modal .modal-close-btn {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  color: #90ee90;
  text-shadow: 0 1px 1px #333;
}

.shop-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.shop-tab {
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid #a08d75;
  background: #f5deb3;
  font-family: monospace;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

.shop-tab.active {
  background: #fff;
  border-bottom-color: #fff;
}

.shop-items-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 2 колонки по умолчанию */
  gap: 15px;
  overflow-y: auto;
  flex-grow: 1;
  padding: 5px 15px 5px 5px;
}

@media (max-width: 600px) {
  .shop-items-grid {
    grid-template-columns: 1fr;
    /* 1 колонка на мобильных */
  }
}

.shop-item {
  background: #fff8f0;
  padding: 15px;
  border-radius: 12px;
  border: 2px solid transparent;
  transition: all 0.2s ease;

  display: flex;
  /* Используем Flexbox для гибкого выравнивания */
  align-items: center;
  /* Выравниваем все по вертикали */
  gap: 15px;
}

.shop-item.purchased {
  background-color: #e8f5e9;
  /* Светло-зеленый для купленных */
}

.shop-item.equipped {
  border-color: #2ecc71;
  box-shadow: 0 0 10px rgba(46, 204, 113, 0.7);
}

.shop-item img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  flex-shrink: 0;
  /* Запрещаем иконке сжиматься */
}

.shop-item .item-info {
  flex-grow: 1;
}

.item-info h4 {
  margin: 0 0 5px;
  font-size: 1.1em;
}

.item-info .cost {
  margin: 0;
  font-weight: bold;
}

.item-controls {
  flex-shrink: 0;
  /* Запрещаем кнопке сжиматься */
}

.shop-item button {
  padding: 6px 16px;
  border-radius: 15px;
  border: 1px solid; /* Убираем конкретный цвет, он будет зависеть от типа */
  color: white;
  font-weight: bold;
  cursor: pointer;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

.shop-item button:disabled {
  background: #ccc;
  border-color: #bbb;
  cursor: not-allowed;
  text-shadow: none;
  box-shadow: none;
}

.shop-item button.insufficient-funds {
  background: linear-gradient(to bottom, #999, #888);
  border-color: #777;
  cursor: not-allowed;
}

.shop-item .buy-btn {
  background: linear-gradient(to bottom, #62c462, #51a351);
  border-color: #498f49;
}

.shop-item .equip-btn {
  background: linear-gradient(to bottom, #5bc0de, #46b8da);
  border-color: #31b0d5;
}

.shop-item .unequip-btn {
  background: linear-gradient(to bottom, #ee5f5b, #da4f49);
  border-color: #bd362f;
}

.gem-counter {
  position: absolute;
  top: 50%;
  right: 45px; /* Чтобы не наезжать на кнопку закрытия */
  transform: translateY(-50%);

  background-color: rgba(255, 0, 255, 0.1);
  border: 1px solid rgba(255, 0, 255, 0.3);
  border-radius: 20px;
  padding: 5px 10px 5px 5px;

  display: flex;
  align-items: center;
  gap: 5px;
}
.gem-counter img {
  width: 20px;
  height: 20px;
}
.gem-counter span {
  font-weight: bold;
  font-size: 1.1em;
  color: #333;
}

/* ДОБАВЛЕНО: Стили для скрытого премиум-товара */
.shop-item.premium-locked {
  filter: grayscale(80%) brightness(50%);
  pointer-events: none;
}
.shop-item.premium-locked .cost::before {
  content: "???"; /* Скрываем цену */
  color: #888;
}
.shop-item.premium-locked button {
  visibility: hidden; /* Прячем кнопку */
}

/* --- СТИЛИ ДЛЯ ШЛЕЙФА КУРСОРА --- */
.effects-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;

  pointer-events: none;
  z-index: 99998;
}

/* --- СТИЛИ ДЛЯ ШАПКИ НА КНОПКЕ --- */
/* #game-container {
    position: relative;
} */

.button-hat-container {
  position: absolute; /* Позиционируем относительно .main-clicker-area */

  /* ГЛАВНЫЙ ФИКС: Точная позиция над кнопкой */
  top: 0; /* Начинаем от верха */
  left: 50%;
  transform: translate(-50%, -80%); /* Смещаем вверх на 80% своей высоты */

  z-index: 11; /* Выше кнопки (z-index: 10), но ниже модальных окон */
  pointer-events: none;

  /* Плавный переход для смены позиции */
  transition: all 0.3s ease;
}

.button-hat-container img {
  width: 100px;
  height: auto;
  object-fit: contain;
}
/* 
================================================================
--- УЛУЧШЕННЫЙ ДИЗАЙН ---
Когда JS добавит класс .theme-enhanced к body, эти стили активируются
================================================================
*/

body.theme-enhanced {
  /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; */
  background-color: #f0f2f5;
}

/* --- Улучшенные кнопки и карточки --- */
body.theme-enhanced .achievements-btn,
body.theme-enhanced .level-reward-btn,
body.theme-enhanced .press-controls button {
  /* 
    Здесь собраны все ОБЩИЕ стили, которые мы хотим применить
    ко всем этим кнопкам в "улучшенном" режиме.
  */
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  font-weight: bold;
  transition: transform 0.2s ease;
}

body.theme-enhanced .achievements-btn:hover,
body.theme-enhanced .level-reward-btn:hover,
body.theme-enhanced .press-controls button:hover {
  transform: scale(1.05);
}

/* 
  Шаг 2: Задаем уникальные ФОНЫ для каждой кнопки.
  Эти правила тоже сработают только при наличии `.theme-enhanced`.
*/

/* --- Кнопки достижений --- */
body.theme-enhanced #screen-time-btn {
  background: linear-gradient(to bottom, #555, #333);
}
body.theme-enhanced #achievements-btn {
  background: linear-gradient(#c327f7, #500fac);
}
/* Для кнопок с темным текстом мы переопределяем цвет */
body.theme-enhanced #item-shop-btn {
  color: #444;
  background: linear-gradient(
    180deg,
    #caff88 10%,
    #8cff00 30%,
    #8cff00 50%,
    #78d505 90%
  );
}
body.theme-enhanced #email-btn {
  color: #444;
  background: linear-gradient(180deg, #ffefee 50%, #ffb9b7);
}

/* --- Кнопка уровня --- */
body.theme-enhanced .level-reward-btn {
  background: #37d80e;
}

/* --- Кнопки пресса --- */
body.theme-enhanced #press-start-btn {
  background: linear-gradient(to bottom, #62c462, #51a351);
}
body.theme-enhanced #press-collect-btn {
  background: linear-gradient(to bottom, #f8d347, #f7c52a);
}

body.theme-enhanced .upgrade-card {
  border-radius: 12px;
  border-color: #ddd;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  border: none;
}

/* body.theme-enhanced .main-clicker-area button.upgraded-button {
    background-color: #2ecc71;
    color: white;
    border-color: #27ae60;
} */

/* --- Улучшенные визуальные эффекты --- */
body.theme-enhanced .flying-number {
  color: #2ecc71;
}

body.theme-enhanced .pinwheel-container::before {
  background: repeating-conic-gradient(
    from 0deg,
    rgba(100, 100, 255, 0.15) 0deg 22.5deg,
    transparent 22.5deg 45deg
  );
}

/* --- Улучшенная бегущая строка --- */
body.theme-enhanced .news-ticker-container {
  background-color: #111;
  color: #fff;
  border-bottom: none;
}

body.theme-enhanced .news-ticker-label {
  background-color: #fff;
  color: #000;
}

/* --- Улучшенная система уровней --- */
body.theme-enhanced .xp-bar {
  border: none;
  border-radius: 15px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

body.theme-enhanced #level-label {
  background-color: #60a040;
}

/* --- Улучшенное окно достижений --- */
body.theme-enhanced .modal-content {
  border-radius: 16px;
  border: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
}

body.theme-enhanced .modal-header h2,
body.theme-enhanced .modal-header span {
  color: white;
}

body.theme-enhanced .modal-close-btn {
  color: rgba(255, 255, 255, 0.7);
}

body.theme-enhanced .achievement-icon {
  border-color: rgba(255, 255, 255, 0.2);
}

body.theme-enhanced .achievement-icon.unlocked {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

body.theme-enhanced #screen-time-list {
  background-color: rgba(255, 255, 255, 0.9);
  /* Полупрозрачный белый */
  color: #333;
  /* Возвращаем темный текст для читаемости */
  border-radius: 12px;
  padding: 15px;
  margin-top: 10px;
}

body.theme-enhanced .tooltip {
  color: #333;
  /* Возвращаем черный цвет для читаемости */
}

/* --- Улучшенный плеер --- */
body.theme-enhanced .music-player {
  border-radius: 12px;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

body.theme-enhanced .screen-time-item .icon-container {
  border-radius: 8px; /* Вы можете подобрать значение, которое вам нравится */
  overflow: hidden; /* Обрезаем саму картинку по скругленным углам */
}

body.theme-enhanced .screen-time-item .icon-enhanced {
  display: block;
}
body.theme-enhanced .screen-time-item .icon-simple {
  display: none;
}

/* --- Стили для скинов основной кнопки --- */
.main-clicker-area {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px; /* Добавим отступ между кнопкой и счетчиками */
}

/* Скин "Google Sign-In" */
.main-clicker-area button.skin-google-signin {
  width: auto;
  /* Ширина по контенту */
  height: 50px;
  padding: 0 24px 0 16px;
  display: flex;
  align-items: center;
  gap: 20px;

  background: #fff;
  /* Белый фон */
  border-color: #ccc;
  border-radius: 25px;

  font-size: 1.1em;
  font-weight: normal;
  color: #444;
  font-family: "Roboto", sans-serif;

  /* Сбрасываем эффекты от .upgraded-button */
  transform: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.main-clicker-area button.skin-google-signin:active {
  background-color: #f8f8f8;
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.main-clicker-area button.skin-google-signin::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  background-image: url("assets/shop/google-g.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* --- Скин "Я не робот" --- */
.main-clicker-area button.skin-not-a-robot {
  width: 306px;
  height: 86px;
  background: #f9f9f9;
  border: 1px solid #d3d3d3;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

  font-family: "Roboto", sans-serif;
  font-size: 1.1em;
  color: #000;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* Выравниваем элементы по левому краю */
  gap: 15px;
  padding: 0 20px;

  /* Сбрасываем эффекты от .upgraded-button */
  transform: none;
}

/* Эффект нажатия */
.main-clicker-area button.skin-not-a-robot:active {
  transform: scale(0.98);
  /* Немного уменьшаем */
  box-shadow: none;
}

/* Создаем чекбокс */
.main-clicker-area button.skin-not-a-robot::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  border: 2px solid #c1c1c1;
  border-radius: 2px;
  background-color: #fff;

  /* Вставляем галочку как фоновое изображение, но делаем ее невидимой */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 8l4 4 8-8'/%3e%3c/svg%3e");
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: all 0.1s ease;
}

/* Когда кнопка НАЖАТА, чекбокс становится синим и галочка появляется */
.main-clicker-area button.skin-not-a-robot:active::before {
  background-color: #1a73e8;
  border-color: #1a73e8;
  opacity: 1;
}

/* Создаем логотип reCAPTCHA */
.main-clicker-area button.skin-not-a-robot::after {
  content: "";
  display: block;
  width: 58px;
  height: 58px;
  margin-left: auto;
  /* Прижимаем логотип к правому краю */
  background-image: url("assets/shop/recaptcha.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* --- Скин "Переключатель" --- */
.main-clicker-area button.skin-switch {
  width: 148px;
  height: 95px;

  /* Убираем все стандартные стили кнопки */
  border: none;
  background-color: transparent;
  box-shadow: none;
  padding: 0;

  /* Используем фоновое изображение для вида */
  background-image: url("assets/shop/switch-off.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  /* Сбрасываем эффекты от .upgraded-button */
  transform: none;
  transition: background-image 0.1s ease;
  /* Плавный переход не сработает для картинок, но оставим для порядка */
}

/* Когда у кнопки есть класс .is-on, меняем картинку */
.main-clicker-area button.skin-switch.is-on {
  background-image: url("assets/shop/switch-on.webp");
}

/* Убираем стандартный эффект нажатия, так как он не нужен */
.main-clicker-area button.skin-switch:active {
  transform: none;
  box-shadow: none;
}

/* --- Скин "Мое лицо" --- */
.main-clicker-area button.skin-my-face {
  width: 120px;
  height: 120px;
  border: none;
  background-color: transparent;
  box-shadow: none;
  padding: 0;

  /* ГЛАВНЫЙ ФИКС: Используем CSS-переменную для фона */
  background-image: var(--skin-background-image);

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  transform: none;
  transition: transform 0.1s ease;
}

.main-clicker-area button.skin-my-face:active {
  transform: scale(0.95);
}

/* --- СТИЛИ ДЛЯ ЛУТБОКСОВ (Новая версия) --- */
#lootbox-spawn-area {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 99;
}

.lootbox {
  position: absolute;
  width: 80px;
  cursor: pointer;
  pointer-events: all;
  animation: lootbox-appear 0.3s ease-out;
}

/* Когда сундук открыт, он становится некликабельным */
.lootbox.opened {
  pointer-events: none;
}

.lootbox img {
  width: 100%;
  display: block;
  /* Убираем лишние отступы */
}

/* Шкала времени */
.lootbox-timer {
  position: absolute;
  bottom: -15px;
  /* Отодвигаем чуть ниже */
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  /* Делаем чуть шире */
  height: 8px;
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid #fff;
  border-radius: 4px;
  overflow: hidden;
}

.lootbox-timer-progress {
  width: 100%;
  height: 100%;
  background-color: #ffd700;
  border-radius: 3px;
  transition: width 0.1s linear;
  /* Делаем убывание шкалы плавным */
}

/* Текст с наградой */
.lootbox-reward-text {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  font-size: 1.5em;
  font-weight: bold;
  color: #ffd700;
  text-shadow: 0 0 5px #000, 0 0 10px #000;
  white-space: nowrap;

  opacity: 0;
  /* Изначально невидим */
  transition: all 0.5s ease-out;
}

/* Когда сундук открыт, награда появляется и выезжает вверх */
.lootbox.opened .lootbox-reward-text {
  opacity: 1;
  transform: translate(-50%, -50px);
  /* Выезжает на 50px вверх */
}

/* Анимация исчезновения всего сундука */
.lootbox.disappearing {
  transition: opacity 0.5s ease-in;
  opacity: 0;
}

@keyframes lootbox-appear {
  from {
    transform: scale(0.5) rotate(-15deg);
    opacity: 0;
  }

  to {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* --- СТИЛИ ДЛЯ ФОНДОВОГО РЫНКА --- */
.stock-market-container {
  position: fixed;
  top: 200px;
  right: 15px;
  width: 290px;
  height: 245px;
  background-color: #1e1e1e;
  color: #fff;
  border-radius: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  z-index: 5;
}

.stock-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

#stock-selector {
  /* --- ГЛАВНЫЙ ФИКС: ЗАДАЕМ ЦВЕТ ТЕКСТА --- */
  color: white;

  /* --- УБИРАЕМ СТАНДАРТНЫЙ ВИД --- */
  -webkit-appearance: none; /* для Chrome/Safari */
  appearance: none; /* стандартное свойство */

  /* --- СТИЛИЗАЦИЯ ФОНА И ГРАНИЦ --- */
  background: none;
  border: none;
  border-radius: 5px; /* Небольшое скругление для красоты */

  /* --- СТИЛИЗАЦИЯ ТЕКСТА И РАЗМЕРОВ --- */
  font-size: 1.1em;
  font-weight: bold;
  padding-right: 20px; /* Оставляем место для нашей кастомной стрелки */
  cursor: pointer;

  /* --- ДОБАВЛЯЕМ СВОЮ СТРЕЛКУ --- */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.2rem center;
  background-size: 1em;
}

/* 
  (Опционально, но рекомендуется) 
  Стилизуем сами выпадающие опции для лучшей совместимости
*/
#stock-selector option {
  background-color: #1e1e1e; /* Тот же темный фон */
  color: white; /* Белый текст */
}

.stock-price {
  font-size: 1.1em;
  font-weight: bold;
}

.stock-price-container {
  display: flex;
  align-items: baseline; /* Выравниваем по базовой линии текста */
  gap: 8px;
}

/* Значок x2 */
.leverage-badge {
  background-color: #e74c3c; /* Красный цвет, т.к. это риск */
  color: white;
  font-size: 0.8em;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
}

.stock-chart-container {
  flex-grow: 1;
  position: relative;
}

#stock-chart {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.stock-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap; /* <-- РАЗРЕШАЕМ ПЕРЕНОС ЭЛЕМЕНТОВ */
  gap: 5px; /* Добавляем небольшой отступ между строками, если будет перенос */
}

.stock-portfolio .positive-value {
  color: #2ecc71;
}

.stock-portfolio .negative-value {
  color: #e74c3c;
}

.stock-controls button {
  padding: 8px 12px; /* Уменьшаем горизонтальные отступы */
  border: none;
  border-radius: 16px;
  font-weight: bold;
  cursor: pointer;
  flex-grow: 1; /* <-- РАЗРЕШАЕМ КНОПКАМ РАСТЯГИВАТЬСЯ */
  min-width: 80px; /* Задаем минимальную ширину */
}

#buy-share-btn {
  background-color: #2ecc71;
  color: #fff;
}

#sell-share-btn {
  background-color: #e74c3c;
  color: #fff;
}

.stock-controls button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- СТИЛИ ДЛЯ ВИКТОРИНЫ --- */
.quiz-container {
  position: fixed;
  bottom: 230px;
  right: 15px;
  width: 290px;
  background-color: #f7f7f7;
  border-radius: 12px;
  padding: 15px;
  box-sizing: border-box;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 7;
  /* Анимация появления */
  transform: translateY(-20px);
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.quiz-container:not(.hidden) {
  transform: translateY(0);
  opacity: 1;
}

.quiz-header {
  display: grid;
  /* Создаем 3 колонки: иконка(авто) | текст(все место) | таймер(авто) */
  grid-template-columns: auto 1fr auto;
  align-items: center;
  /* Выравниваем все по вертикали */
  gap: 10px;
  /* Отступ между элементами */
  margin-bottom: 15px;
}

.quiz-header img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.quiz-header p {
  margin: 0;
  font-weight: bold;
  font-size: 1.1em;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  /* Более "системный" шрифт */
}

#quiz-timer {
  width: 32px;
  height: 32px;
  border: 2px solid #e5e5e5;
  border-radius: 50%;
  /* Делаем круглым */

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

  font-weight: bold;
  font-size: 1em;
  color: #afafaf;
}

.quiz-answers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.quiz-answer-btn {
  padding: 12px;
  border: 1px solid #e5e5e5;
  background: #fff;
  border-radius: 8px;
  font-size: 0.9em;
  cursor: pointer;
}

/* Стили для результатов */
.quiz-answer-btn.correct {
  background-color: #d7ffb8;
  border-color: #58a700;
}

.quiz-answer-btn.wrong {
  background-color: #ffdfe0;
  border-color: #ea0027;
}

.quiz-reward-display {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2em;
  font-weight: bold;
  color: #2ecc71;
  text-shadow: 0 0 10px white;
  opacity: 0;
  /* Изначально невидим */
  transition: opacity 0.5s ease;
}

.quiz-container.content-hidden .quiz-header,
.quiz-container.content-hidden .quiz-answers {
  transition: opacity 0.5s ease;
  opacity: 0;
  pointer-events: none;
}

.quiz-result {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-in-out;
}

.quiz-result img {
  width: 90px;
  height: auto;
}

.quiz-result p {
  margin: 0;
  font-size: 1.8em;
  font-weight: bold;
  text-align: center;
}

/* Стили для текста награды и ошибки */
.quiz-result p.correct {
  color: #58a700; /* Зеленый */
}
.quiz-result p.wrong {
  color: #ea0027; /* Красный */
}

/* --- Логика переключения --- */

/* Когда на .quiz-container появляется класс .show-result... */
.quiz-container.show-result .quiz-header,
.quiz-container.show-result .quiz-answers {
  /* ... мы прячем вопросы и ответы ... */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-in-out;
}

.quiz-container.show-result .quiz-result {
  /* ... и показываем экран результата. */
  opacity: 1;
  pointer-events: all;
}

/* --- СТИЛИ ДЛЯ EMAIL-СИСТЕМЫ --- */

/* Уведомление о новом письме */
.email-notification {
  position: fixed;
  top: 120px;
  right: 15px;
  z-index: 99;
  /* Выше всех виджетов, но ниже интерфейса */

  width: 280px;
  height: 70px;

  background: rgba(240, 240, 240, 0.95);
  backdrop-filter: blur(10px);
  /* Эффект "матового стекла" */
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;

  display: flex;
  align-items: center;
  padding: 0 15px;
  gap: 15px;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;

  /* Анимация появления */
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.email-notification:not(.hidden) {
  opacity: 1;
  transform: translateX(0);
}

.email-notification.fading-out {
  opacity: 0;
  transform: translateX(110%);
}

.email-notification img {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  object-fit: contain;
}

.email-notification div {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Обрезаем слишком длинный текст */
}

.email-notification strong {
  font-weight: bold;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
}

.email-notification span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Добавляем "..." если текст не помещается */
  color: #555;
  font-size: 0.9em;
}

/* Почтовый клиент (модальное окно) */
#email-modal .modal-content {
  background: #f7f7f7;
  padding: 0;
  /* Убираем внутренние отступы, чтобы список был от края до края */
  height: 500px;
  max-height: 80vh;
  display: flex;
  /* Для переключения между видами */
  overflow: hidden;
  /* Важно, чтобы анимации работали внутри */
}

.email-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid #ddd;
  background: #fff;
}

.email-header h2 {
  margin: 0;
}

.email-list {
  overflow-y: auto;
  flex-grow: 1;
}

#email-list-view {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.email-list-item {
  padding: 10px 20px;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr; /* Одна колонка */
  gap: 2px;
}

.email-list-item.unread .from,
.email-list-item.unread .subject {
  font-weight: bold;
}
.email-list-item .from {
  font-size: 1.1em;
  color: #333;
}
.email-list-item .subject {
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Подвал в почтовом клиенте */
.email-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-top: 1px solid #ddd;
  background: #f0f0f0;
}

.email-list-item:hover {
  background-color: #eef;
}

.email-list-item.read {
  background-color: #fff;
  font-weight: normal;
}

.email-list-item strong {
  font-weight: bold;
}

.email-list-item .from {
  color: #666;
  text-align: right;
}

/* Окно чтения письма */
#email-read-view {
  display: flex;
  flex-direction: column;
  width: 100%;
}

#email-read-view .email-header {
  justify-content: flex-start;
  /* Кнопка "назад" слева */
}

#email-back-btn {
  background: none;
  border: none;
  font-size: 1.2em;
  font-weight: bold;
  cursor: pointer;
}

.email-content {
  padding: 20px;
  overflow-y: auto;
  flex-grow: 1;
  /* white-space: pre-wrap; */
  /* Сохраняет переносы строк из текста письма */
  line-height: 1.6;
}

.email-content .from-line {
  font-weight: bold;
  margin-bottom: 1em;
}

.email-content .body {
  margin-bottom: 2em;
}

.email-reply-btn {
  /* --- Логика позиционирования и размера --- */
  display: flex; /* <-- ВКЛЮЧАЕМ FLEXBOX. Это ключ к центрированию. */
  width: 100%;
  height: 50px;
  box-sizing: border-box;

  /* --- ГЛАВНЫЙ ФИКС: Центрирование --- */
  align-items: center; /* <-- Выравнивает текст ИДЕАЛЬНО по вертикали */
  justify-content: center; /* <-- Выравнивает текст ИДЕАЛЬНО по горизонтали */
  text-align: center; /* <-- Дополнительная гарантия для текста */

  /* --- Стилизация --- */
  padding: 0 15px; /* Горизонтальные отступы, чтобы длинный текст не прилипал к краям */
  font-family: "Inter Tight", sans-serif;
  font-size: 17px;
  font-weight: bold;
  color: #000;

  background: linear-gradient(0deg, #b6eaff, #dcf6ff);
  border: 1px solid #52a4c4;
  border-radius: 12px;

  cursor: pointer;
  transition: transform 0.1s;
}

.email-reply-btn:hover {
  transform: scale(1.03);
}
/* Эффект "вдавливания" при нажатии */
.email-reply-btn:active {
  transform: scale(1);
}

#email-modal .modal-content,
#email-modal .modal-content button {
  color: #333;
  /* Темно-серый цвет для всего текста */
}

#email-modal .modal-header h2 {
  color: #333;
}

#email-modal .modal-close-btn {
  color: #888;
}

#email-modal .email-list-item .from {
  color: #666;
}

.email-list-item.unread .from,
.email-list-item.unread .subject {
  font-weight: bold;
  color: #000; /* Делаем текст черным, а не серым */
}

.email-reply-btn.success {
  /* ГЛАВНЫЙ ФИКС: Заменяем цвет на градиент */
  background: linear-gradient(
    0deg,
    #58d68d,
    #abebc6
  ); /* Светло-зеленый градиент */
  border-color: #27ae60;
  color: white;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); /* Добавляем тень для белого текста */
}

.email-reply-btn.failure {
  /* ГЛАВНЫЙ ФИКС: Заменяем цвет на градиент */
  background: linear-gradient(
    0deg,
    #f1948a,
    #f5b7b1
  ); /* Светло-красный градиент */
  border-color: #c0392b;
  color: white;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); /* Добавляем тень для белого текста */
}
.email-reply-btn:disabled {
  cursor: not-allowed;
}

.email-actions {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gem-counter {
  position: absolute;
  top: 50%;
  right: 45px; /* Чтобы не наезжать на кнопку закрытия */
  transform: translateY(-50%);

  background-color: rgba(255, 255, 255, 0.705);
  border: 1px solid rgba(255, 0, 255, 0.3);
  border-radius: 20px;
  padding: 5px 10px 5px 5px;

  display: flex;
  align-items: center;
  gap: 5px;
}
.gem-counter img {
  width: 25px;
  height: 25px;
}
.gem-counter span {
  font-weight: bold;
  font-size: 1.2em;
  color: #4a2a12;
}

/* Стили для скрытого премиум-товара */
.shop-item.premium-locked {
  filter: grayscale(80%) brightness(50%);
  pointer-events: none; /* Делаем некликабельным */
}
.shop-item.premium-locked .cost {
  font-size: 0; /* Прячем оригинальную цену */
}
.shop-item.premium-locked .cost::before {
  content: "??? гемов"; /* Показываем заглушку */
  font-size: 1rem; /* Возвращаем видимый размер шрифта */
  color: #888;
}
.shop-item.premium-locked button {
  visibility: hidden; /* Прячем кнопку */
}

.gem-reward {
  display: inline-flex; /* <-- ВКЛЮЧАЕМ FLEXBOX */
  align-items: center; /* <-- ВЫРАВНИВАЕМ ВСЕ ПО ВЕРТИКАЛЬНОМУ ЦЕНТРУ */
  justify-content: center; /* Центрируем, если нужно */

  margin-top: 5px;
  color: #8a2be2;
  font-weight: bold;
}

/* Иконка гема в награде лутбокса */
.reward-gem-icon {
  width: 24px;
  height: 24px;
  /* vertical-align: middle; */
  margin-left: 5px;
  object-fit: contain;
}

#powerup-spawn-area {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Контейнер прозрачен для кликов */
  z-index: 99; /* Очень высокий слой, почти поверх всего */
}

.powerup {
  position: absolute;
  width: 60px;
  height: 60px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  pointer-events: all; /* А вот сами бонусы кликабельны */
  animation: fall-down linear;
}

@keyframes fall-down {
  from {
    transform: translateY(-100px);
  } /* Начинаем над экраном */
  to {
    transform: translateY(100vh);
  } /* Улетаем под экран */
}

/* --- СТИЛИ ДЛЯ "КРИТИЧЕСКОГО РЕЖИМА" --- */

/* Радужная анимация для лучей */
@keyframes rainbow-scroll {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

/* Применяем радужный эффект ТОЛЬКО к основной кнопке */
body.crit-mode-active #main-clicker-btn {
  background: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    cyan,
    blue,
    violet,
    red
  );
  background-size: 200% 200%;
  animation: rainbow-scroll 4s linear infinite;

  color: white;
  border-color: rgba(0, 0, 0, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* --- СТИЛИ ДЛЯ РЕКЛАМНОГО САМОЛЕТА --- */
#skywriter-container {
  width: auto;
  height: auto;
  position: absolute;
  top: 20%;
  left: 100%; /* Начинаем за правым краем */

  /* Анимируем только left */
  transition: left 20s linear;
  will-change: left;

  /* Покачивание остается */
  animation: plane-bobbing 4s ease-in-out infinite;

  /* Остальные стили */
  z-index: 6;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.skywriter-container.visible {
  opacity: 1;
}

#skywriter-container.active {
  left: -100%;
}

.skywriter-plane {
  width: 150px;
  height: 100px;
  background-image: url("assets/skywriter-plane.png");
  background-size: contain;
  background-repeat: no-repeat;
}

@keyframes plane-bobbing {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

.skywriter-banner {
  width: 600px;
  padding: 15px; /* Уменьшаем внутренние отступы */
  border: 2px solid #555;
  background-color: #f0f0f0; /* Базовый цвет, будет перезаписан JS */
  transition: background-color 0.5s ease; /* Плавная смена цвета */

  font-size: 1.3em; /* Делаем шрифт крупнее, так как шапки нет */
  font-weight: bold;
  color: #333;
  text-align: center;

  /* Подключаем анимацию покачивания */
  animation: banner-sway 3s ease-in-out infinite;
  transform-origin: left center; /* Точка "крепления" баннера к самолету */
}
@keyframes banner-sway {
  0% {
    transform: rotateZ(0deg) rotateY(0deg);
  }
  50% {
    transform: rotateZ(-2deg) rotateY(10deg);
  }
  100% {
    transform: rotateZ(0deg) rotateY(0deg);
  }
}
.skywriter-banner span {
  color: red;
}

body.fullscreen-subway .subway-surfers-widget {
  /* ...растягиваем виджет на весь экран и отправляем на самый задний фон */
  width: 100%;
  height: 100%;
  bottom: 0;
  right: 0;
  z-index: 0; /* <-- НИЖЕ, чем лучи */
  border: none;
  box-shadow: none;
}

/* --- СТИЛИ ДЛЯ ТАМАГОЧИ --- */
.tamagotchi-pen {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px; /* "Загон" высотой 150px */
  pointer-events: none; /* Сам загон не кликабелен */
  z-index: 7;
}

.chicken {
  position: absolute;
  bottom: 10px;
  width: 100px;
  height: 100px;
  background-size: contain; /* Теперь всегда contain */
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: all;
  cursor: default; /* Убираем курсор, чтобы не мешал кнопкам */
  transition: left 1s linear; /* Плавное движение */
}

.chicken.walk-frame-0 {
  background-image: url("assets/tamagotchi/chicken_walk_0.png");
}
.chicken.walk-frame-1 {
  background-image: url("assets/tamagotchi/chicken_walk_1.png");
}

/* Стили для отражения по горизонтали */
.chicken.walking-left {
  transform: scaleX(-1);
}
.chicken.walking-left .chicken-button {
  transform: translateX(-50%) scaleX(-1);
}

.chicken.hungry {
  background-image: url("assets/tamagotchi/chicken_stand.png");
}
.chicken.dead {
  background-image: url("assets/tamagotchi/chicken_dead.png");
}

.chicken-button {
  padding: 4px 10px;
  font-size: 14px;
  font-weight: bold;
  border: 1px solid #888;
  border-radius: 8px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  display: flex; /* Используем flex для выравнивания иконки и текста */
  align-items: center;
  gap: 5px;
  white-space: nowrap; /* Запрещаем перенос текста */
}
.chicken-button:hover {
  background-color: #f0f0f0;
}

.chicken-button img {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.button-container {
  position: absolute;
  bottom: 90px; /* Располагаем НАД курицей */
  left: 50%;
  transform: translateX(-50%);
  display: flex; /* Располагаем кнопки в ряд */
  gap: 8px; /* Отступ между кнопками */
  z-index: 1; /* Чтобы кнопки были над курицей */
}

.chicken-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #ccc;
  border-color: #aaa;
}

.chicken-button.ad-revive {
  background-color: #fff;
  border: 2px solid #ffd700; /* Яркая золотая рамка */
  color: #daa520; /* Темно-золотой цвет текста */
  font-weight: bold;
  padding: 3px 8px; /* Делаем отступы чуть меньше из-за толстой рамки */
}

.chicken-button.ad-revive:hover {
  background-color: #fff8e1; /* Легкий кремовый фон при наведении */
}

.tamagotchi-egg {
  position: absolute;
  bottom: 0px;
  width: 40px;
  height: 50px;
  background-image: url("assets/tamagotchi/egg.png");
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
  pointer-events: all;
}

/* Стили для текста с наградой */
.egg-reward-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Центрируем текст внутри яйца */

  font-size: 1.4em;
  font-weight: bold;
  color: #ffd700; /* Золотой цвет, как у лутбокса */
  text-shadow: 0 0 5px #000, 0 0 8px rgba(0, 0, 0, 0.7);
  white-space: nowrap;

  opacity: 0; /* Изначально текст невидимый */
  transition: all 0.5s ease-out; /* Плавный переход для появления и движения */
}

/* Когда мы добавляем класс .collected к яйцу, текст награды... */
.tamagotchi-egg.collected .egg-reward-text {
  opacity: 1; /* ... становится видимым ... */
  transform: translate(
    -50%,
    -150%
  ); /* ... и улетает вверх на 100% своей высоты */
}

/* Стиль для награды в виде гема */
.egg-reward-text.gem-reward {
  color: #8a2be2; /* Фиолетовый цвет для гемов */
}
.egg-reward-text.gem-reward .reward-gem-icon {
  width: 24px; /* Размер иконки гема */
  height: 24px;
  vertical-align: middle;
}

/* Анимация исчезновения для всего яйца (и текста внутри него) */
.tamagotchi-egg.disappearing {
  transition: opacity 0.5s ease-in;
  opacity: 0;
}

/* --- СТИЛИ ДЛЯ ТВИЧ-ЧАТА --- */
.twitch-chat-container {
  position: fixed;
  bottom: 0px;
  right: 0px;
  width: 260px;
  height: 265px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  z-index: 6;

  display: flex;
  flex-direction: column;
  font-family: "Inter Tight", sans-serif; /* Используем более читаемый шрифт */
}

.chat-header {
  padding: 8px;
  text-align: center;
  font-weight: bold;
  background-color: #e0e0e0;
  border-bottom: 1px solid #ccc;
}

.chat-messages {
  flex-grow: 1;
  overflow-y: auto; /* Скролл появится, если нужно, но мы будем им управлять */
  padding: 10px;
  font-size: 14px;
  scrollbar-width: none;
}
.chat-messages::-webkit-scrollbar {
  display: none;
}

.chat-message {
  margin-bottom: 8px;
  line-height: 1.4;
}

.chat-username {
  font-weight: bold;
  margin-right: 8px;
}

.chat-message img.emoji {
  width: 18px; /* Размер для "эмодзи" */
  height: 18px;
  vertical-align: middle; /* Выравниваем по центру текста */
  margin: 0 2px;
}

.upgrade-card .icon-enhanced {
  display: none;
}
.upgrade-card .icon-simple {
  display: block;
}

body.theme-enhanced .upgrade-card .icon-enhanced {
  display: block;
}
body.theme-enhanced .upgrade-card .icon-simple {
  display: none;
}

/* --- Скин "Большая красная кнопка" --- */
.main-clicker-area button.skin-easy-button {
  width: 150px; /* Сделаем чуть побольше для внушительности */
  height: 150px;

  /* Убираем все стандартные стили кнопки */
  border: none;
  background-color: transparent;
  box-shadow: none;
  padding: 0;

  /* Используем вашу картинку как фон */
  background-image: url("assets/shop/btn_red.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  /* Сбрасываем текст, так как он уже на картинке */
  color: transparent;
  font-size: 0;

  transform: none;
  transition: transform 0.1s ease;
}

.main-clicker-area button.skin-easy-button:active {
  transform: scale(0.95);
}

/* --- Скин "Светофор" --- */
.main-clicker-area button.skin-traffic-light {
  width: 120px;
  height: 120px;
  border-radius: 50%;

  border: 5px solid #333;
  background-color: #111;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

  /* Красный человечек по умолчанию */
  background-image: url("assets/shop/traffic-light-red.png");
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;

  /* Сбрасываем эффекты */
  transform: none;
  transition: all 0.1s ease;
}

/* При нажатии меняем на зеленого человечка */
.main-clicker-area button.skin-traffic-light:active {
  background-image: url("assets/shop/traffic-light-green.png");
  transform: scale(0.98);
}

:root {
  --cursor-default: auto;
  --cursor-pointer: pointer;
}

/* 2. Применяем базовый курсор к body */
body {
  cursor: var(--cursor-default);
}

/* 
 * 3. ГЛАВНЫЙ ФИКС: Создаем ОДНО, САМОЕ СИЛЬНОЕ правило для всех кликабельных элементов.
 * Мы перечисляем все типы кликабельных элементов, которые у нас есть.
 * !important гарантирует, что это правило "победит" любые другие.
*/
button,
.upgrade-card,
.shop-tab,
.achievement-icon,
.loot-box,
.modal-close-btn,
.email-list-item {
  cursor: var(--cursor-pointer) !important;
}

/* --- СТИЛИ ДЛЯ АНИМАЦИИ СБОРА БОНУСА --- */
.powerup.collected {
  animation: none; /* Отключаем анимацию падения, чтобы бонус замер на месте */

  /* Плавный переход для размера и прозрачности */
  transition: transform 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045),
    opacity 0.3s ease-out;
  /* cubic-bezier добавляет эффект "всасывания" - сначала чуть увеличивается, потом резко схлопывается */

  transform: scale(0); /* ГЛАВНЫЙ ФИКС: Уменьшаем до нуля */
  opacity: 0; /* Одновременно делаем прозрачным */
}

/* --- СТИЛИ ДЛЯ ТАЙМЕРОВ АКТИВНЫХ БОНУСОВ --- */
#powerup-timers-container {
  position: fixed;
  bottom: 160px; /* Над загоном тамагочи */
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.powerup-timer {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 5px 10px 5px 5px;
  border-radius: 20px;
  width: 150px;
  transition: opacity 0.3s ease;
}

.powerup-timer.removing {
  opacity: 0;
}

.powerup-timer img {
  width: 30px;
  height: 30px;
}

.timer-bar {
  flex-grow: 1;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  overflow: hidden;
}

.timer-bar-progress {
  width: 100%;
  height: 100%;
  background-color: #ffd700; /* Золотой цвет */
  border-radius: 5px;
  transition: width 0.1s linear; /* Плавное убывание */
}

#achievements-modal .modal-content {
  /* 
    Отменяем принудительную ширину и говорим блоку
    занять ровно столько места, сколько нужно его содержимому.
  */
  width: auto;

  /* 
    Мы убираем старый max-width в пикселях, но добавляем новый,
    чтобы на очень маленьких мобильных экранах окно не вылезало за края.
    90vw = 90% от ширины видимой области.
  */
  max-width: 90vw;

  /* 
    (Опционально) Можно добавить минимальную ширину, чтобы окно 
    не выглядело слишком узким, пока ачивок мало.
  */
  min-width: 300px;
}
#achievements-modal .modal-header h2 {
  margin-left: 20px;
}