@font-face {
  font-family: "Winston Black";
  src: url("fonts/winston-black.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Intro";
  src: url("fonts/ofont.ru_Intro.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
* {
  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;
}

html::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  /* Свойство, которое ломает логику авто-замены цветов */
  mix-blend-mode: screen;
  z-index: -999;
  pointer-events: none;
}

/* --- Глобальные переменные и сброс стилей --- */
:root {
  color-scheme: light;
  --bg-top: #485cab;
  --bg-bottom: #4154a2;
  --panel-color: rgba(35, 39, 42, 0.5);
  --primary-text: #ffffff;
  --secondary-text: #b9bbbe;
  --accent-color: #7289da;
  --green-color: #3aa758;
  --border-color: #42464d;
  --xp-bar-bg: #232a;
  --xp-bar-fill: #5865f2;
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  font-family: "Intro", cursive, sans-serif;
  background-image: none;
  color: var(--primary-text);
  touch-action: manipulation;
}

.background-gradient {
  /* [ИЗМЕНЕНО] Позиционируемся абсолютно относительно .game-container */
  position: absolute;
  top: 0;
  left: 0;
  /* [ИЗМЕНЕНО] Растягиваемся на 100% родителя (.game-container), а не окна */
  width: 100%;
  height: 100%;

  /* [ИЗМЕНЕНО] z-index теперь должен быть ниже контента игры, но выше фона контейнера */
  z-index: -1;

  transition: opacity 0.8s ease-in-out;
}

#bg-2 {
  opacity: 0;
}

/* ================================== */
/* ==== Анимация падающих лапок ==== */
/* ================================== */
#paws-container {
  /* [ИЗМЕНЕНО] Позиционируемся абсолютно относительно .game-container */
  position: absolute;
  top: 0;
  left: 0;
  /* [ИЗМЕНЕНО] Растягиваемся на 100% родителя (.game-container) */
  width: 100%;
  height: 100%;

  pointer-events: none;
  /* [ИЗМЕНЕНО] z-index 0 - между фоном (-1) и контентом (1) */
  z-index: 0;

  /* [НОВОЕ] Скрываем все лапки, которые могут вылезти за пределы */
  overflow: hidden;
}

.paw-falling {
  position: absolute;
  top: -20%; /* Начинаем чуть выше, чтобы большие лапы не появлялись на экране */
  background-color: var(--paw-color);
  -webkit-mask-image: url("images/pets.png");
  mask-image: url("images/pets.png");
  mask-size: contain;
  mask-repeat: no-repeat;
  opacity: 0.2;
  /* filter: blur(0.1cqw); */
  transform: rotate(var(--paw-rotation));
}

.paw-falling.is-hidden {
  display: none;
}

/* [НОВОЕ] Класс, который запускает анимацию */
.paw-falling.is-animating {
  animation-name: fall;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fall {
  to {
    /* Падаем за нижний край экрана и делаем еще один оборот */
    transform: translateY(140vh) rotate(720deg);
  }
}

/* ========================= */
/* ==== Общая структура ==== */
/* ========================= */
.game-container {
  container-type: inline-size;
  container-name: game;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100dvh;
}

body.proportional-mode {
  display: grid;
  place-items: center;
  height: 100dvh;
  background-color: #1a1a1a;
}

.proportional-mode .game-container {
  border-radius: 1cqw;
}

.top-bar,
#experience-bar,
.main-area,
#sunburst-container {
  position: relative; /* Убеждаемся, что position задано */
  z-index: 1;
}
/* Лучи должны быть поверх лапок, но под котом */
#sunburst-container {
  z-index: 2;
}
.click-effect {
  z-index: 100; /* Эффект клика всегда наверху */
}

/* ======================= */
/* ==== ВЕРХНИЙ БЛОК ==== */
/* ======================= */
.top-bar {
  height: 7cqw; /* 120px */
  background-color: #63a598;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1.56cqw; /* 30px */
  flex-shrink: 0;
}

.click-power-box {
  display: flex;
  flex-direction: column;

  /* [ИЗМЕНЕНО] Выравниваем дочерние элементы по левому краю */
  align-items: flex-start;

  gap: 0.5cqw;
  min-width: 7.81cqw;
}

/* [НОВОЕ] Стили для блока престижа в шапке */
.prestige-info-header {
  display: flex;
  align-items: center;
  gap: 0.4cqw;
  font-size: 1.8cqw;
  font-weight: bold;
  color: white;
  text-shadow: 0 0 0.26cqw #333333;
}
.prestige-info-header img {
  /* [ИЗМЕНЕНО] Увеличиваем иконку пропорционально тексту */
  height: 3cqw;
}
.prestige-info-header small {
  /* [ИЗМЕНЕНО] Увеличиваем и делаем менее прозрачным */
  font-size: 0.9em;
  opacity: 0.9;
}

.info-box {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  min-width: 7.81cqw; /* 150px */
}

.info-box-label {
  display: none;
}

.info-box-value {
  font-size: 1.8cqw; /* ~34.5px, adjusted from 2em */
  font-weight: bold;
  color: var(--primary-text);
  display: flex;
  align-items: center;
  gap: 0.42cqw; /* 8px */
}
.score-box {
  align-items: center;
}

.score-box h1 {
  font-size: 3.65cqw; /* ~70px, adjusted from 4em */
  margin: 0;
  color: var(--primary-text);
  display: flex;
  align-items: center;
  gap: 0.78cqw; /* 15px */
}

.score-box small {
  font-size: 1.3cqw; /* ~25px, adjusted from 1.5em */
  color: var(--primary-text);
  display: flex;
  align-items: center;
  gap: 0.42cqw; /* 8px */
}

.actions-box {
  display: flex;
  gap: 0.78cqw; /* 15px */
  min-width: 7.81cqw; /* 150px */
  justify-content: flex-end;
  align-items: center;
}

.action-button {
  position: relative;
  padding: 0.52cqw 1.04cqw;
  border-radius: 0.42cqw;
  border: none;
  cursor: pointer;
  font-weight: bold;
  font-size: 0.83cqw;
  font-family: "Winston Black", cursive, sans-serif;
  transition: transform 0.2s ease-out;
  border-radius: 0.42cqw;
  border: 0.1cqw solid #000000;
}

.action-button:not(:disabled):hover {
  transform: scale(1.05);
}
.action-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Копируем тень, как у кнопок магазина */
  box-shadow: 0 0.21cqw 0.31cqw rgba(0, 0, 0, 0.3);
  /* Копируем скругление */
  border-radius: 0.42cqw;

  /* Начальное состояние */
  opacity: 1;

  /* Анимируем только быстрые свойства */
  transition: box-shadow 0.2s ease-out;

  /* Помещаем тень позади кнопки */
  z-index: -1;
}
.action-button:not(:disabled):hover::before {
  /* Делаем тень больше и заметнее, чтобы создать эффект "приподнятия" */
  box-shadow: 0 0.4cqw 0.8cqw rgba(0, 0, 0, 0.4);
}

#reward-button.reward-style {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5cqw;
  background-color: var(--green-color);
  color: white;
  padding: 0.4cqw 0.8cqw;
  text-shadow: 0 0.1cqw 0.1cqw rgba(0, 0, 0, 0.4);
  line-height: 1.1;
  padding: 0.35cqw 0.75cqw;

  text-shadow: 0 0.1cqw 0.1cqw rgba(0, 0, 0, 0.4);
  line-height: 1.1;
  visibility: hidden; /* Скрываем по умолчанию */
}

.reward-icon {
  height: 2cqw;
  width: auto;
}

.reward-text-container {
  display: flex; /* <-- Это заставит его управлять своими дочерними элементами */
  flex-direction: column; /* <-- Это поставит span'ы друг под другом */
  align-items: flex-start; /* Выравниваем текст по левому краю внутри этого блока */
  line-height: 1.1; /* Управляем межстрочным интервалом */
}

/* Стили для самого текста остаются без изменений */
.reward-main-text {
  font-size: 1cqw;
  font-weight: bold;
  letter-spacing: 0.05cqw;
}
.reward-sub-text {
  font-size: 0.9cqw;
  opacity: 0.9;
  letter-spacing: 0.07cqw;
}

.icon-button {
  width: 3.1cqw; /* ~60px */
  height: 3.1cqw;
  padding: 0.5cqw; /* ~10px */
  background-color: var(--secondary-text);
  box-sizing: border-box;
  padding: 0.4cqw;
}
.icon-button img {
  width: 100%;
  height: 100%;
}

.header-coin-icon {
  width: 1.46cqw; /* 28px */
  height: 1.46cqw; /* 28px */
}

.header-coin-icon-large {
  width: 2.92cqw; /* 56px */
  height: 2.92cqw; /* 56px */
  filter: drop-shadow(
    0.1cqw 0.1cqw 0.16cqw rgba(0, 0, 0, 0.3)
  ); /* 2px 2px 3px */
}

.info-box-value,
.score-box h1,
.score-box small,
#cat-name {
  text-shadow: 0 0 0.26cqw #333333; /* 5px */
}

.shop-item-name,
.shop-item-line {
  text-shadow: 0 0 0.21cqw #333333; /* 4px */
}

/* ================================ */
/* ==== ПРОГРЕСС-БАР ОПЫТА ==== */
/* ================================ */
#experience-bar {
  width: 100%;
  height: 0.42cqw; /* 8px */
  background-color: var(--xp-bar-bg);
  flex-shrink: 0;
  overflow: hidden;
}
#experience-progress {
  width: 0%;
  height: 100%;
  background-color: white;
  border-radius: 0 0.21cqw 0.21cqw 0; /* 4px */
  transition: width 0.3s ease-in-out;
}

/* ======================= */
/* ==== НИЖНИЙ БЛОК ==== */
/* ======================= */
.main-area {
  flex-grow: 1;
  display: flex;
  overflow: hidden;
  z-index: 1;
}

/* ============================= */
/* ==== МАГАЗИН УЛУЧШЕНИЙ ==== */
/* ============================= */
.shop-panel {
  width: 21.88cqw;
  padding: 1.56cqw;
  flex-shrink: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 0;
  position: relative;
  z-index: 10;
}

.shop-item {
  width: 100%;
  padding: 0.52cqw;
  position: relative;
  padding-top: 0.52cqw;
  padding-bottom: 0.52cqw;
  padding-left: 4.2cqw;
  padding-right: 1.3cqw;
  min-height: 6.61cqw;
  background-color: #768fee;
  background-image: linear-gradient(
    115deg,
    transparent 40%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 60%
  );
  background-size: 300% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  color: var(--primary-text);
  border: 0.1cqw solid #000000;
  border-radius: 0.42cqw;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.78cqw;
  font-family: "Intro", cursive, sans-serif;
  overflow: visible;

  /* [КЛЮЧЕВОЕ ИСПРАВЛЕНИЕ] ЕДИНЫЙ TRANSITION ДЛЯ TRANSFORM */
  transition: transform 0.2s ease-out;
}

.shop-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0.21cqw 0.31cqw rgba(0, 0, 0, 0.3);
  border-radius: 0.42cqw;
  transition: box-shadow 0.2s ease-out;
  z-index: -1;
}

/* --- СОСТОЯНИЯ КНОПКИ --- */

.shop-item:not(:disabled):hover {
  transform: scale(1.03) translateY(-0.2cqw);
}

.shop-item:not(:disabled):hover::before {
  box-shadow: 0 0.4cqw 0.8cqw rgba(0, 0, 0, 0.4);
}

.shop-item:not(:disabled):active {
  /* Просто меняем transform, transition уже задан в .shop-item */
  transform: scale(0.98);
}

.shop-item:disabled {
  cursor: not-allowed;
  /* opacity: 0.7; */
  filter: none;
  /* [ИСПРАВЛЕНО] Убираем тень и для псевдоэлемента */
}
.shop-item:disabled::before {
  box-shadow: none;
}

/* --- ДОЧЕРНИЕ ЭЛЕМЕНТЫ --- */

.shop-item-icon {
  width: 5.21cqw;
  height: 5.21cqw;
  position: absolute;
  left: -0.36cqw;
  top: 50%;
  transform: translateY(-50%);
  object-fit: contain;
  z-index: 3;
  filter: drop-shadow(0.16cqw 0.16cqw 0.26cqw rgba(0, 0, 0, 0.5));
}

.shop-item-info {
  flex-grow: 1;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.36cqw;
  align-self: flex-start;
}

.shop-item-name {
  font-weight: bold;
  font-size: 1.4cqw;
}

.shop-item-line {
  display: flex;
  align-items: center;
  font-size: 1cqw;
  color: var(--primary-text);
}

.coin-icon {
  width: 1.15cqw;
  height: 1.15cqw;
  margin-right: 0.42cqw;
}

.shop-item-count {
  font-size: 2.9cqw;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.5);
  /* width: 3.12cqw; */
  text-align: center;
  flex-shrink: 0;
}

.shop-item-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0.31cqw;
  width: 0%;
  background-color: #ffc107;
  z-index: 1;
  transition: width 0.2s ease-out;
  border-radius: 0 0 0.31cqw 0.31cqw;
}

/* --- АНИМАЦИИ ПОКУПКИ --- */

/* [УДАЛЕНО] .shop-item-shine больше не существует, эта анимация не нужна */
/* @keyframes shine-effect { ... } */

@keyframes shine-effect-bg {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}

.shop-item.is-purchased {
  animation: shine-effect-bg 0.6s ease-out;
}

/* ============================ */
/* ==== ЗОНА С КОТОМ ==== */
/* ============================ */
.cat-zone {
  flex-grow: 1;
  display: flex; /* Остается flex-контейнером */
  padding: 1.04cqw; /* 20px */
  position: relative;
  /* Убираем внутреннее выравнивание отсюда, оно переедет в .cat-display */
}

.cat-display {
  width: 100%; /* Занимаем всю ширину .cat-zone */
  height: 100%; /* И всю высоту */
  display: flex;
  flex-direction: column;
  /* [КЛЮЧЕВОЕ ИЗМЕНЕНИЕ] Распределяем пространство: */
  justify-content: space-between; /* Расталкивает дочерние элементы к краям (верх/низ) */
  align-items: center; /* Центрируем по горизонтали */
  gap: 0.52cqw; /* 10px */
}

#sunburst-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 45cqw; /* Контейнер для лучей, делаем его большим */
  height: 45cqw;
  transform: translate(-50%, -50%); /* Центрируем */
  z-index: 2;
  pointer-events: none;
}

.sunburst-ray {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 22cqw;
  height: 1.5cqw;

  background: linear-gradient(
    to right,
    rgba(255, 255, 240, 0.6) 0%,
    rgba(255, 255, 240, 0.1) 80%,
    transparent 100%
  );

  transform-origin: 0% 50%;

  /* [НОВОЕ] Добавляем фильтр размытия */
  filter: blur(0.2cqw); /* ~6px. Можете поиграть с этим значением */

  animation: breathe-ray 12s ease-in-out infinite alternate;
}

/* [ПЕРЕРАБОТАНО] Оптимизированная анимация "дыхания" */
@keyframes breathe-ray {
  from {
    opacity: 0.2;
    /* [ИЗМЕНЕНО] Вместо width/height используем scale.
       Делаем луч короче (scaleX(0.8)) и тоньше (scaleY(0.7)) */
    transform: rotate(var(--base-angle)) translateX(-0.5cqw) scale(0.5, 0.6);
  }
  to {
    opacity: 0.7;
    /* [ИЗМЕНЕНО] Делаем луч длиннее (scaleX(1.2)) и толще (scaleY(1.3)) */
    transform: rotate(calc(var(--base-angle) + 15deg)) translateX(0)
      scale(1.1, 1.5);
  }
}

#cat-image {
  position: relative;
  /* [ИЗМЕНЕНО] Делаем кота значительно больше */
  max-width: 26cqw; /* 450px */
  width: 100%;
  height: auto;
  cursor: pointer;
  transition: transform 0.1s ease;
  -webkit-user-drag: none;
  z-index: 3;
  transform-origin: bottom center;
  pointer-events: none;
  animation: cat-breathing 3s ease-in-out infinite;
}
#cat-image.is-squishing {
  /* [ИЗМЕНЕНО] Анимация сжатия теперь тоже через keyframes,
     чтобы она корректно "перебивала" анимацию дыхания */
  animation: cat-squish 0.2s ease-out;
}
@keyframes cat-squish {
  from {
    transform: scaleY(0.9) scaleX(1.05);
  }
  to {
    transform: scaleY(1) scaleX(1);
  }
}
@keyframes cat-breathing {
  0% {
    transform: scaleY(1) scaleX(1);
  }
  50% {
    /* Немного сжимается по вертикали и расширяется по горизонтали */
    transform: scaleY(0.98) scaleX(1.01);
  }
  100% {
    transform: scaleY(1) scaleX(1);
  }
}

/* [НОВОЕ] Контейнер для имени и стрелок */
.cat-name-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5cqw; /* 25px */
  width: 100%;
}
.hidden {
  display: none !important; /* !important для надежности */
}
.name-button-wrapper {
  /* [КЛЮЧЕВОЕ] Задаем фиксированные размеры, чтобы он НЕ СХЛОПЫВАЛСЯ */
  width: 21cqw;
  height: 2.5cqw; /* Та же высота, что и у h2/button */

  /* Используем flex для центрирования того, что внутри */
  display: flex;
  justify-content: center;
  align-items: center;
}

#cat-name {
  margin: 0;
  font-size: 2.5cqw; /* ~48px, увеличили */
  color: var(--primary-text);
  text-shadow: 0 0 0.26cqw #333333;
  width: 21cqw;
  text-align: center;
}

/* [ПЕРЕРАБОТАНО] Делаем стрелки-треугольники с помощью border */
.cat-nav-button {
  width: 0;
  height: 0;
  background: none;
  border-style: solid;
  border-color: transparent; /* Все стороны прозрачные по умолчанию */
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s ease;
  filter: drop-shadow(0 0 0.1cqw #000);
}
.cat-nav-button:hover {
  transform: scale(1.15);
}
/* Треугольник влево */
.cat-nav-button.prev {
  border-width: 1.6cqw 2.6cqw 1.6cqw 0; /* ~30px 50px ... */
  border-right-color: #94c7e2;
}
.cat-nav-button.next {
  border-width: 1.6cqw 0 1.6cqw 2.6cqw;
  border-left-color: #94c7e2;
}

/* [НОВОЕ] Стили для шкалы прогресса разблокировки */
#next-cat-progress-bar {
  width: 26cqw; /* 500px */
  height: 2.1cqw; /* 40px */
  background-color: rgba(0, 0, 0, 0.4);
  border: 0.1cqw solid #000; /* 2px */
  border-radius: 1cqw; /* 20px */
  margin-top: 0.8cqw; /* 15px */
  position: relative;
  overflow: hidden;
  display: none; /* По умолчанию скрыт */
}
#next-cat-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: var(--green-color);
  border-radius: 1cqw;
  transition: width 0.3s ease-out;
}
#next-cat-progress-text {
  position: relative;
  z-index: 2;
  line-height: 2.1cqw; /* 40px, центрируем текст по вертикали */
  text-align: center;
  width: 100%;
  display: block;
  font-size: 1.1cqw; /* 21px */
  color: white;
  text-shadow: 0 0 0.26cqw #000;
}
#next-cat-progress-text .coin-icon,
#next-cat-progress-text .coin-icon-small {
  width: 1.5em; /* Размер зависит от размера шрифта, это хорошо */
  height: 1.5em;

  /* [ИЗМЕНЕНО] Устанавливаем правильное выравнивание */
  vertical-align: top;

  /* [ИЗМЕНЕНО] Убираем отрицательный margin, он больше не нужен */
  /* margin: 0 0.1em; */

  /* [НОВОЕ] Небольшой сдвиг вниз для идеального центрирования (опционально) */
  position: relative;
  top: 0.15em;
}

#next-cat-progress-text .prestige-icon-small {
  width: 3em; /* Размер зависит от размера шрифта, это хорошо */
  height: 3em;
  vertical-align: top;
  position: relative;
  top: -0.5em;
}
.cat-image-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  transform-origin: bottom center;
}

/* [НОВОЕ] Класс-модификатор для силуэта кота */
.cat-image-container.is-locked .cat-image {
  filter: brightness(0) grayscale(1) opacity(1);
}

/* [НОВОЕ] Оверлей с замком */
#cat-lock-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none; /* Скрыт по умолчанию */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  z-index: 4;
}
.cat-image-container.is-locked #cat-lock-overlay {
  display: flex; /* Показываем, если кот заблокирован */
}
#lock-icon {
  width: 6.25cqw; /* 120px */
  height: 6.25cqw;
}
#unlock-prompt-text {
  font-size: 1.3cqw; /* ~25px */
  color: white;
  text-shadow: 0 0 0.26cqw #000;
  margin-top: 0.52cqw; /* 10px */
  transition: color 0.2s ease; /* Для анимации смены цвета */
}

/* [НОВОЕ] Анимация дрожания при ошибке */
@keyframes shake-error {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-5px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(5px);
  }
}
.is-shaking {
  animation: shake-error 0.5s ease-in-out;
  color: #ff4d4d !important; /* Ярко-красный */
}

/* --- Управление именем и кнопкой "Купить" --- */
#buy-cat-button {
  /* display: none; */
  padding: 0.52cqw 2.1cqw; /* 10px 40px */
  font-size: 1.8cqw; /* ~34.5px */
  font-family: "Intro", cursive, sans-serif;
  color: white;
  background-color: var(--green-color);
  border: 0.1cqw solid #000;
  border-radius: 0.8cqw; /* 15px */
  cursor: pointer;
  box-shadow: 0 0.21cqw 0.31cqw rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
  width: 21cqw;
  box-sizing: border-box;
}
#buy-cat-button:hover {
  transform: scale(1.05);
}

/* --- Стили для заблокированного магазина --- */

/* [НОВОЕ] Класс-модификатор для затемненной кнопки */
.shop-item.is-locked {
  background-color: #3e4466; /* Более темный оттенок основного цвета */
  filter: brightness(0.6);
}

/* [НОВОЕ] Делаем иконку силуэтом */
.shop-item.is-locked .shop-item-icon {
  filter: brightness(0) grayscale(1) opacity(0.9);
}

.click-effect {
  position: absolute;
  left: var(--start-x);
  top: var(--start-y);
  transform: translate(-50%, -50%);

  color: white;
  font-size: 2cqw;
  font-weight: bold;
  pointer-events: none;
  z-index: 5;
  text-shadow: 0 0 0.26cqw #000;
}

@keyframes fly-and-hide {
  from {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    visibility: visible;
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.4, 1);
  }
  99% {
    transform: var(--fly-end-transform);
    opacity: 0;
    visibility: visible;
    animation-timing-function: cubic-bezier(0.6, 0, 0.7, 0.3);
  }
  100% {
    /* В самом конце делаем элемент невидимым и некликабельным */
    transform: var(--fly-end-transform);
    opacity: 0;
    visibility: hidden;
  }
}

.click-effect.is-hidden {
  display: none;
}

.click-effect.is-animating {
  animation: fly-and-hide 1.2s forwards;
}

.click-effect-coin {
  width: 1em;
  height: 1em;
  vertical-align: text-bottom;
  margin-left: 0.1em;
}

/* ================================= */
/* ==== Модальное окно настроек ==== */
/* ================================= */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Полупрозрачный черный фон */
  z-index: 1000; /* Выше всего остального */
  display: flex;
  justify-content: center;
  align-items: center;

  /* Анимация появления */
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

.modal-overlay.is-hidden {
  opacity: 0;
  pointer-events: none; /* Нельзя кликнуть на невидимое окно */
}

.modal-content {
  background-color: #4a4e56;
  padding: 2.1cqw; /* ~40px */
  border-radius: 0.8cqw; /* 15px */
  border: 0.1cqw solid #000; /* 2px */
  box-shadow: 0 0.52cqw 1.56cqw rgba(0, 0, 0, 0.5); /* 0 10px 30px */
  width: 90%;
  max-width: 26cqw; /* ~500px */

  /* Анимация "вылета" */
  transform: scale(1);
  transition: transform 0.3s ease-in-out;
}

.modal-overlay.is-hidden .modal-content {
  transform: scale(0.9);
}

.modal-content h2 {
  margin-top: 0;
  text-align: center;
  font-size: 2.1cqw; /* 40px */
  text-shadow: 0 0 0.26cqw #333333;
}

.setting-item {
  margin-bottom: 1.56cqw; /* 30px */
}
.setting-item label {
  display: block;
  margin-bottom: 0.52cqw; /* 10px */
  font-size: 1.3cqw; /* 25px */
}

/* Стилизация ползунка громкости */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.8cqw; /* 15px */
  background: #2c2f33;
  border-radius: 0.4cqw; /* 8px */
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.56cqw; /* 30px */
  height: 1.56cqw;
  background: var(--accent-color);
  border-radius: 50%;
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 1.56cqw;
  height: 1.56cqw;
  background: var(--accent-color);
  border-radius: 50%;
  cursor: pointer;
}

/* Кнопки в модальном окне */
.modal-actions {
  display: flex;
  justify-content: space-between;
  gap: 1cqw; /* 20px */
  margin-top: 2.1cqw; /* 40px */
}

.modal-button {
  flex-grow: 1;
  padding: 0.8cqw; /* 15px */
  font-size: 1.3cqw; /* 25px */
  font-family: "Intro", cursive, sans-serif;
  color: white;
  background-color: var(--accent-color);
  border: 0.1cqw solid #000;
  border-radius: 0.52cqw; /* 10px */
  cursor: pointer;
  transition: transform 0.2s ease;
}
.modal-button:hover {
  transform: scale(1.05);
}

.modal-button.danger {
  background-color: #f04747;
}

.item-slot {
  position: absolute;
  /* Размеры и позицию мы подберем на глаз */
  width: 15cqw;
  height: 15cqw;
  /* border: 1px dashed white; /* Временно для отладки */
  pointer-events: none; /* Чтобы не мешали кликать */
  z-index: 1; /* Под котом, но над лучами */
  opacity: 0.6;
}

.item-slot::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Можно добавить фон, если нужно, или оставить прозрачным */
  /* background-color: rgba(255,255,255,0.1); */
  /* border-radius: 50%; */
}

/* [ИЗМЕНЕНО] Анимируем псевдоэлемент, а не сам слот */
.item-slot.is-animated::before {
  animation: slot-squash 0.4s ease-out;
}

/* Расставляем слоты по кругу */
#slot-food {
  top: 40%;
  left: 5%;
  /* transform: translateY(-50%); */
}

/* Слот 2: Верхний левый угол, 45 градусов (для "Лакомства") */
#slot-treat {
  top: 10%;
  left: 17%;
}

/* Слот 3: Прямо сверху (для "Игрушки") */
#slot-toy {
  top: 5%;
  left: 40%;
}

/* Слот 4: Верхний правый угол, 45 градусов (для "Лотка") */
#slot-litter {
  top: 17%;
  right: 20%;
}

/* Слот 5: Справа (для "Ошейника") */
#slot-collar {
  top: 42%;
  right: 10%;
}

/* Стили для одного предмета внутри слота */
.cat-item-visual {
  position: absolute;
  width: 4cqw;
  height: 4cqw;
  background-size: contain;
  background-repeat: no-repeat;
  display: none;
}
.cat-item-visual.is-visible {
  display: block;
}

.income-effect {
  position: absolute;
  left: var(--start-x);
  top: var(--start-y);
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.8cqw;
  font-weight: bold;
  pointer-events: none;
  text-shadow: 0 0 0.2cqw #000;
  white-space: nowrap;
}

/* [ПЕРЕРАБОТАНО] Новая анимация "пульсации" */
@keyframes income-pulse {
  0% {
    /* Начинаем чуть меньше и полностью видимыми */
    transform: translateY(0) scale(0.9);
    opacity: 1;
  }
  20% {
    /* "Вырастаем" до максимального размера */
    transform: translateY(-2cqw) scale(1.2);
    opacity: 1;
  }
  100% {
    /* Улетаем вверх, уменьшаемся и исчезаем */
    transform: translateY(-8cqw) scale(0.7);
    opacity: 0;
  }
}

@keyframes slot-squash {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.05, 0.9);
  }
  60% {
    transform: scale(0.95, 1.05);
  }
  100% {
    transform: scale(1);
  }
}

.item-slot.is-animated {
  animation: slot-squash 0.4s ease-out;
}

/* #particles-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 102;
} */
#particles-container,
#click-effects-container,
#income-effects-container {
  position: absolute; /* Теперь относительно .game-container */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}
#click-effects-container {
  z-index: 100;
}
#particles-container {
  z-index: 101;
}

.particle-star {
  position: fixed;
  /* Используем SVG-звездочку, которую можно перекрасить */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  display: none;
  left: 0;
  top: 0;
  filter: saturate(0) brightness(2);
}
.particle-star.is-animating {
  display: block;
  animation-name: particle-burst-final;
  animation-fill-mode: forwards;
}

@keyframes particle-burst-final {
  0% {
    /* Начальная трансформация (задается из JS) */
    transform: var(--start-transform);
    opacity: 1;
  }
  100% {
    /* Конечная трансформация (задается из JS) */
    transform: var(--end-transform);
    opacity: 0;
  }
}

@keyframes particle-burst {
  0% {
    transform: translate(var(--start-x), var(--start-y)) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--end-x), var(--end-y)) scale(0);
    opacity: 0;
  }
}

.level-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: white;
  text-shadow: 0 0 0.26cqw #000;
}
#level-text {
  font-size: 1.1cqw;
}
.yarn-info {
  display: flex;
  align-items: center;
  gap: 0.3cqw;
  font-size: 1.5cqw;
}
.yarn-info img {
  width: 1.5cqw;
  height: 1.5cqw;
}

@keyframes level-up-flash {
  0% {
    /* Начальный цвет */
    background-color: #63a598;
  }
  30% {
    /* Пик вспышки - ярко-белый */
    background-color: #ffffff;
  }
  100% {
    /* Возвращаемся к обычному цвету */
    background-color: #63a598;
  }
}

/* Класс-триггер для запуска анимации на шапке */
.top-bar.is-leveling-up {
  animation: level-up-flash 0.8s ease-in-out;
}

.bonus-active-text {
  color: #dc5274 !important;
  animation: pulse-bonus 0.8s infinite alternate;
}

@keyframes pulse-bonus {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}

/* ======================================= */
/* ==== Панель престиж-улучшений ==== */
/* ======================================= */

#prestige-panel {
  position: absolute;
  /* [КЛЮЧЕВОЕ] Начинается ТОЧНО там, где заканчивается кнопка */
  top: calc(6.25cqw + 0.42cqw + 1.56cqw + 4.2cqw);
  right: 1.56cqw;
  /* bottom: 1.56cqw; */
  width: 24cqw;
  height: auto;
  max-height: calc(100% - (6.25cqw + 0.42cqw + 1.56cqw + 4.2cqw) - 1.56cqw);

  background-color: #6f2bee;
  border: 0.1cqw solid #000;
  /* [КЛЮЧЕВОЕ] Убираем ВЕРХНЮЮ рамку */
  border-top: none;
  /* [КЛЮЧЕВОЕ] Скругляем только НИЖНИЕ углы */
  border-radius: 0 0 0.8cqw 0.8cqw;
  box-shadow: -0.2cqw 0.2cqw 0.8cqw rgba(0, 0, 0, 0.4);

  z-index: 102;
  display: flex;
  flex-direction: column;
  /* padding: 0.8cqw; */
  /* padding-top: 0; */
  box-sizing: border-box;

  /* Анимация схлопывания */
  transform-origin: top;
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
  transform: scaleY(1);
}
#prestige-panel.is-closed {
  transform: scaleY(0);
  opacity: 0;
  pointer-events: none;
}

/* --- Кнопка-заголовок --- */
#prestige-panel-toggle {
  position: absolute;
  top: calc(6.25cqw + 0.42cqw + 1.56cqw);
  right: 1.56cqw;
  width: 24cqw;
  height: 4.2cqw; /* Фиксированная высота */

  background-color: #6f2bee;
  border: 0.1cqw solid #000;
  border-radius: 0.8cqw;
  transition: border-bottom-left-radius 0.4s ease-in-out,
    border-bottom-right-radius 0.4s ease-in-out;
  /* border-radius: 0.8cqw 0.8cqw 0 0; */
  /* [КЛЮЧЕВОЕ] Убираем НИЖНЮЮ рамку, чтобы она не создавала зазор */
  border-bottom: none;

  z-index: 51;
  display: flex;
  align-items: center;
  padding: 0.8cqw;
  box-sizing: border-box;
  cursor: pointer;
  color: white;
}
#prestige-panel-toggle.is-attached {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
#prestige-panel-toggle.is-open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  transition-delay: 0s; /* Убираем задержку при открытии */
}
.toggle-text {
  font-size: 1.3cqw;
  text-shadow: 0 0 0.2cqw #000;
  margin-right: auto; /* Отодвигает баланс и стрелку вправо */
}
.yarn-balance {
  display: flex;
  align-items: center;
  border-radius: 0.4cqw;
  margin-right: 0.8cqw;
  font-size: 1.5cqw;
}
.yarn-balance img {
  height: 2.5cqw;
  margin-right: 0.3cqw;
}

/* --- Иконка стрелка/крестик (CSS-only) --- */
.toggle-icon {
  width: 1.5cqw;
  height: 1.5cqw;
  margin-right: 0.8cqw;

  /* [НОВОЕ] Плавный поворот */
  transition: transform 0.4s ease-in-out;
}

/* [НОВОЕ] Поворачиваем иконку, когда панель открыта */
#prestige-panel-toggle.is-open .toggle-icon {
  transform: rotate(180deg);
}

/* --- Список улучшений (контейнер для скролла) --- */
#prestige-shop-list {
  display: flex;
  flex-direction: column;
  gap: 0.8cqw;

  /* [ИЗМЕНЕНО] Убираем padding отсюда */
  padding: 0.8cqw;

  overflow-y: auto;
  overflow-x: hidden; /* Скролл появляется, если контент не влезает */

  /* [НОВОЕ] Заставляем список растягиваться на все доступное место */
  flex-grow: 1;
  /* padding: 0 0.5cqw; */
}

/* --- Кнопка улучшения --- */
.prestige-item {
  width: 100%;
  background-color: #852cc1;
  border: 0.1cqw solid #000;
  border-radius: 0.42cqw;

  padding: 0.8cqw; /* Увеличим общий отступ */
  padding-left: 4.5cqw;

  min-height: 4.2cqw;
  position: relative;
  display: flex; /* Остается flex для вертикального центрирования */
  align-items: center;
  color: white;
  font-family: "Intro", cursive, sans-serif;
  transition: transform 0.2s ease-out;
}
.prestige-item:not(:disabled):hover {
  transform: scale(1.03); /* Увеличение при наведении */
}
.prestige-item:disabled {
  cursor: not-allowed;
}
@keyframes shake-cost {
  0%,
  100% {
    transform: scale(1);
    color: white;
  }
  50% {
    transform: scale(1.1);
    color: #ff4d4d;
  } /* Красный цвет */
}

.prestige-item-cost.is-shaking {
  animation: shake-error 0.4s ease-in-out;
}

/* --- Элементы внутри кнопки --- */
.prestige-item-icon {
  position: absolute;
  height: 5cqw;
  width: 5cqw;
  left: -1.1cqw;
  top: 50%;
  transform: translateY(-50%);
  filter: drop-shadow(0.1cqw 0.1cqw 0.2cqw rgba(0, 0, 0, 0.5));
}
.prestige-item-info {
  /* [ИЗМЕНЕНО] Убираем flex-grow, позиционирование теперь ручное */
  width: 100%; /* Занимает всю доступную ширину внутри padding'ов */
  display: flex;
  flex-direction: column;
  gap: 0.2cqw;
  margin-top: -0.7cqw;
}
.prestige-item-name {
  font-size: 1cqw;
  /* [НОВОЕ] Позволяем тексту переноситься, если он ОЧЕНЬ длинный */
  white-space: normal;
  text-align: left; /* Явное выравнивание по левому краю */
  display: flex;
  align-items: center;
  gap: 0.2cqw;
}
.prestige-item-cost {
  display: flex;
  align-items: center;
  gap: 0.3cqw;
  font-size: 1.1cqw;
}
.yarn-icon-small {
  height: 1.6cqw;
  vertical-align: -0.15em;
}
.prestige-item-bonus {
  position: absolute;
  right: 0.8cqw;
  /* [ИЗМЕНЕНО] Центрируем по вертикали */
  top: 70%;
  transform: translateY(-50%);

  font-size: 1.7cqw;
  opacity: 0.7;

  /* [НОВОЕ] Задаем минимальную ширину, чтобы он не "прыгал" */
  min-width: 3.5cqw;
  text-align: right;
}
.prestige-item-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0.31cqw;
  width: 0%; /* JS будет управлять этим */
  background-color: white;
  border-radius: 0 0 0.2cqw 0.2cqw;
  transition: width 0.2s ease-out;
}

#income-effects-container {
  z-index: 40;
}

.income-effect.is-hidden {
  display: none;
}
.income-effect.is-animating {
  display: block; /* Делаем видимым перед анимацией */
  animation: income-pulse 2.5s ease-out forwards;
}

/* --- Бонусные монеты при левел-апе --- */
.bonus-coin {
  position: absolute;
  top: 110%;
  left: 0; /* JS будет управлять этим */

  width: 5cqw; /* Фиксированный размер в пикселях */
  height: 5cqw;
  background-image: url("images/coin.png");
  background-size: contain;
  background-repeat: no-repeat;
  /* filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4)); */
  pointer-events: auto;
  cursor: pointer;

  border-radius: 50%;
  display: none;
  z-index: 200; /* Выше почти всего, но ниже модального окна */
  transition: box-shadow 0.3s ease-out;
  will-change: top;
}

.bonus-coin:hover {
  box-shadow: 0 0 25px 8px rgba(255, 255, 255, 0.8);
}

.bonus-coin.is-animating {
  display: block;
  /* Анимация полета */
  animation-name: float-up;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

/* Анимация "всплытия" как воздушный шарик */
@keyframes float-up {
  to {
    /* Анимируем top до точки за верхним краем */
    top: -10%;
  }
}

/* Анимация "лопания" при клике */
@keyframes coin-pop {
  from {
    transform: scale(1.2);
    opacity: 1;
  }
  to {
    transform: scale(1.8);
    opacity: 0;
  }
}
.bonus-coin.is-popped {
  animation: coin-pop 0.3s ease-out forwards;
  pointer-events: none; /* Больше нельзя кликнуть */
}

.reward-effect {
  position: fixed;
  color: white;
  font-size: 2cqw;
  font-family: "Intro", cursive, sans-serif;
  text-shadow: 0 0 8px #000;
  pointer-events: none;
  z-index: 200; /* Выше всего */
  transform: translate(-50%, -50%);
  animation: fade-out-static 1.5s ease-out forwards;
}

@keyframes fade-out-static {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -120%) scale(1.1); /* Легкий подъем */
  }
}

@keyframes cat-slide-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    /* Уезжает в сторону. Направление задается из JS. */
    transform: translateX(var(--slide-direction));
  }
}

@keyframes cat-slide-in {
  from {
    opacity: 0;
    transform: translateX(calc(var(--slide-direction) * -1));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Классы-триггеры для запуска анимаций на .cat-image-container */
.cat-image-container.slide-out {
  animation: cat-slide-out 0.2s ease-in-out forwards;
}

.cat-image-container.slide-in {
  /* transform-origin больше не так важен, но можно оставить */
  /* transform-origin: bottom center; */
  /* [ИЗМЕНЕНО] Убираем сложную кривую и возвращаем стандартную ease-out */
  animation: cat-slide-in 0.2s ease-out forwards;
}

#prestige-button {
  position: absolute;
  /* Позиционируем под кнопкой улучшений */
  /* top кнопки улучшений + высота кнопки улучшений + отступ */
  top: calc(6.25cqw + 0.42cqw + 1.56cqw + 5cqw);
  right: 1.56cqw;
  z-index: 25;

  width: 14cqw;
  padding: 0.5cqw;
  box-sizing: border-box; /* Чтобы padding не влиял на ширину */

  background-color: #5336b9; /* Основной цвет */
  color: white;
  border: 0.1cqw solid #000;
  border-radius: 0.8cqw;

  font-family: "Intro", cursive, sans-serif;
  cursor: pointer;

  display: flex;
  align-items: center;
  gap: 0.8cqw;

  /* Плавные переходы для hover-эффекта и смены цвета */
  transition: transform 0.2s ease-out, background-color 0.3s ease-out,
    filter 0.3s ease-out;
}

/* --- Состояния кнопки --- */

#prestige-button:not(:disabled):hover {
  transform: scale(1.03);
}

/* --- Элементы внутри кнопки --- */

.prestige-button-icon {
  height: 3cqw;
  width: 3cqw;
  flex-shrink: 0; /* Иконка не сжимается */
}

.prestige-button-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  /* Чтобы текст не вылезал, если он длинный */
  overflow: hidden;
}

.prestige-button-text span {
  font-size: 1.5cqw;
  font-weight: bold;
  text-shadow: 0 0 0.2cqw #000;
}

.prestige-button-text small {
  font-size: 0.9cqw;
  display: flex;
  align-items: center;
  gap: 0.2cqw; /* Отступ между текстом и иконкой в строке */
  opacity: 0.9;
}
.coin-icon-small {
  /* [ИЗМЕНЕНО] Уменьшаем размер */
  height: 2cqw;

  /* vertical-align: -1cqw; */
  vertical-align: middle;
}
.prestige-icon-small {
  height: 3cqw;
  vertical-align: middle;
}

/* Стили для маленьких иконок внутри текста (переиспользуем .coin-icon-small) */
.prestige-button-text .coin-icon-small {
  height: 1em;
  vertical-align: -0.1em;
}

.cat-display.is-locked.prestige-locked #buy-cat-button {
  display: none;
}
/* И показываем имя, т.к. кнопки нет */
.cat-display.is-locked.prestige-locked #cat-name {
  display: block;
}

/* В файле style.css */

/* --- Анимация "доступности" покупки (НОВАЯ ВЕРСИЯ) --- */

@keyframes horizontal-glow {
  0% {
    /* Начинаем с нулевой ширины (невидим) */
    width: 0%;
    opacity: 0.7;
  }
  50% {
    /* Разрастаемся до полной ширины */
    width: 30%;
    opacity: 1;
  }
  100% {
    /* Снова "схлопываемся" до нуля */
    width: 0%;
    opacity: 0;
  }
}

/* Псевдоэлемент, который будет нашим свечением */
.shop-item::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;

  width: 0; /* Начальная ширина */
  height: 100%;

  /* [КЛЮЧЕВОЕ] Горизонтальный градиент от белого к прозрачному */
  background: linear-gradient(
    to left,
    /* Направление градиента - справа налево */ rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );

  border-radius: 0 0.42cqw 0.42cqw 0;
  pointer-events: none;
  z-index: 1; /* Выше фона, но под текстом */
}

/* Класс-триггер для запуска анимации */
.shop-item.just-became-available::after {
  animation: horizontal-glow 0.5s ease-in-out;
}

#reset-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-color: white; /* Цвет "вспышки" */

  /* По умолчанию полностью прозрачный и некликабельный */
  opacity: 0;
  pointer-events: none;

  z-index: 999; /* Выше всего, кроме модального окна */

  /* Плавный переход для opacity */
  transition: opacity 0.4s ease-in-out;
}

/* Класс, который делает шторку видимой */
#reset-overlay.is-active {
  opacity: 1;
}

#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #2c2f33; /* Темный фон */
  z-index: 9999; /* Выше АБСОЛЮТНО всего */

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

  /* Плавное исчезновение */
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

#loading-screen.is-hidden {
  opacity: 0;
  pointer-events: none; /* Не мешает кликать после исчезновения */
}

.loading-text {
  font-family: "Intro", cursive, sans-serif;
  font-size: 24px;
  color: white;
}

/* Простой CSS-спиннер */
.loading-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}