:root {
  --bg-color: #ffffff;
  --text-color: #111111;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

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

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.6s ease, color 0.6s ease;
  /* font-family: -apple-system, 'Inter', BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; */
  font-family: 'Playfair Display', Georgia, serif;
  /* font-family: 'Space Grotesk', Georgia, serif; */
  /* font-family: 'Bebas Neue', sans-serif; */
  /* letter-spacing: 2px; */
  /* text-transform: uppercase; */
  /* line-height: 1.4; */
}

body[data-time="day"] {
  --bg-color: #cfd8e3;
  --text-color: #111111;
}

body[data-time="night"] {
  --bg-color: #0b0b0f;
  --text-color: #eeeeee;
}

/* Основная структура сцены */
.scene {
  display: none;
  position: relative;
  height: 100vh;
  overflow: hidden;
  padding: 40px 40px 80px 40px; /* Увеличиваем нижний padding для кнопок */
  box-sizing: border-box;
  text-align: center;
}

.scene.active {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
}

/* Заголовок и подзаголовок */
.scene > h2 {
  font-size: clamp(35px, 6vw, 46px);
  margin: 10px 0 5px 0;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.5px;
  flex-shrink: 0; /* Не сжимается */
}

.scene > p {
  font-size: clamp(18px, 3vw, 24px);
  margin: 0 0 20px 0;
  text-align: center;
  opacity: 0.8;
  font-weight: 400;
  line-height: 1.4;
  flex-shrink: 0; /* Не сжимается */
}

/* Основной контейнер для контента - теперь занимает все свободное пространство */
.scene-content-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1; /* Занимает всё доступное пространство  */
  min-height: 0; /* Важно для flex */
  overflow: hidden;
}

/* Контейнер для медиа и текста */
.scene-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  min-height: 0;
}

/* Кнопки - всегда внизу */
.scene-buttons {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 20px;
  z-index: 10;
}

/* Особые стили для начальной сцены */
#intro .scene-content-container {
  position: relative;
}

#intro .intro-logo {
  max-width: min(400px, 40vw);
  max-height: min(440px, 45vh);
  width: auto;
  height: auto;
  border-radius: 15%;
  opacity: 0.9;
  /* Вместо filter: drop-shadow используем box-shadow */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
  transition: opacity 0.4s ease, transform 0.4s ease;
  /* Добавляем background для прозрачных PNG */
  background-color: transparent;
  /* Для Chrome на iOS */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  /* Отключаем фильтры, если они есть */
  filter: none;
}

/* Когда начальная сцена активирована (начат рассказ) */
#intro.started .intro-logo {
  display: none;
}

#intro.started .scene-content {
  display: flex;
}

/* Скрываем контент в начальной сцене до начала рассказа */
#intro:not(.started) .scene-content {
  display: none;
}

/* Кнопка */
button {
  font-family: 'Playfair Display', Georgia, serif;
  appearance: none;
  border: none;
  outline: none;
  padding: clamp(12px, 2vw, 14px) clamp(24px, 3vw, 28px);
  border-radius: 999px;
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 500;
  letter-spacing: 0.3px;
  background: rgba(255, 255, 255, 0.85);
  color: #111;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12),
    inset 0 -1px 0 rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.3s ease,
    opacity 0.3s ease;
  flex-shrink: 0;
}

button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.7);
}

button:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15),
    inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

body[data-time="night"] button {
  background: rgba(30, 30, 35, 0.85);
  color: #f0f0f0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

/* Эффекты */
main {
  position: relative;
  z-index: 1;
}

#particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 1s ease;
}

/* Видео, фото, текст в сцене */
.scene-step {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(50px, 8vw, 150px);
  width: 100%;
  max-width: 1800px; /* ← ДОБАВИТЬ ЭТО */
  /* margin: 50px auto 0 auto; */
  height: 100%; /* ← ДОБАВИТЬ ЭТО */
  max-height: 70vh; /* ← ДОБАВИТЬ ЭТО */
}


.scene-step.no-media {
  display: flex;
  justify-content: center;
  align-items: center;
}

.scene-step.no-media .text-column {
  max-width: 900px;
  text-align: center;
  padding: 0;
  width: auto;
  margin: 0 auto;
}

/* Контейнер для медиа */

.media-column {
  position: relative;
  flex-shrink: 0;
  width: 420px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

.media-column img {
  max-width: min(500px, 50vw);
  max-height: 55vh;
  object-fit: cover;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  border-radius: 12px;
}

.media-column video {
  width: 100%;
  max-width: 380px;
  max-height: 55vh;
  object-fit: cover;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  border-radius: 12px;
  background-color: #000;
}

video:fullscreen,
video:-webkit-full-screen {
  object-fit: contain !important;
}

.text-column {
  flex: 1;
  max-width: 650px;
  min-width: 500px;
  font-size: 32px;
  line-height: 1.8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  /* Фиксируем позицию */
  position: relative;
  left: 0;
  margin-left: 0;
  /* Запрещаем изменение ширины */
  width: 650px;
  flex-shrink: 0;
}

.text-content-container {
  width: 100%;
  height: auto;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  /* Запрещаем изменение размеров */
  box-sizing: border-box;
}

.text-column p {
  animation: textFadeIn 0.6s ease both;
  margin: 0;
  padding: 0;
  width: 100%;
  line-height: 1.6;
}

.text-column button {
  position: static; /* Возвращаем в поток */
  margin-top: 20px;
  align-self: flex-start; /* Выравниваем по левому краю текста */
}

.text-column button[hidden] {
  visibility: hidden;
  opacity: 0;
}

.text-content {
  width: 100%;
  /* Фиксированная высота для текстового блока */
  min-height: 120px;
  display: flex;
  align-items: center;
}

.text-content-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.text-inner {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  /* Гарантируем, что текст не будет влиять на размеры */
  overflow: hidden;
}

@keyframes textFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Полноэкранный режим для видео */
:fullscreen video,
:-webkit-full-screen video {
  object-fit: contain !important;
  background: #000 !important;
}

/* Финальные титры */
#final {
  justify-content: center;
  align-items: center;
  /* padding: 40px; */
  padding: 0 !important;
}

#final .scene-content-container,
#final .credits {
  margin: 0;
  padding: 0;
}

#final .scene-content-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.credits {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.credits-content {
  text-align: center;
  font-size: clamp(24px, 4vw, 30px);
  line-height: 2;
  animation: credits-roll 80s linear forwards;
  /* font-family: 'Inter', sans-serif; */
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.4;
  width: 100%;
}

.credits-content,
.credits-content * {
  cursor: default; /* или auto */
  user-select: none;
}


.credits-content h2 {
  margin-bottom: 40px;
  font-size: clamp(32px, 5vw, 42px);
}

.credits-content .spacer {
  height: 80px;
}

@keyframes credits-roll {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(calc(-100% - 100vh));
  }
}

/* Стили для футера титров (по умолчанию - в строку) */
.footer-credits {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
  font-size: inherit;
}

/* Добавляем разделитель " • " между элементами (кроме последнего) */
.footer-credits span:not(:last-child)::after {
  content: " •";
  margin-left: 0.3em;
  white-space: nowrap;
}

/* Финальное фото */
.final-photo-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.9);
  opacity: 0;
  transition: opacity 2s ease-in-out;
  z-index: 10;
}

.final-photo-container.show {
  opacity: 1;
}

#final-photo {
  max-width: 80%;
  max-height: 70%;
  border-radius: 15px;
  box-shadow: 0 0 40px rgba(255, 165, 0, 0.5);
  margin-bottom: 40px;
  transform: scale(0.95);
  transition: transform 1s ease;
}

.final-photo-container.show #final-photo {
  transform: scale(1);
}

/* Круглое видео из Telegram */
.circle-video-wrapper {
  position: relative;
  display: inline-block;
  width: min(350px, 40vw);
  height: min(350px, 40vw);
}

.circle-video-wrapper:fullscreen video,
.circle-video-wrapper:-webkit-full-screen video {
  object-fit: contain !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
}

.media-column video.circle-video:fullscreen,
.media-column video.circle-video:-webkit-full-screen {
  border-radius: 0 !important;
  object-fit: contain !important;
  box-shadow: none !important;
  
}

.media-column video.circle-video {
  width: 100% !important;
  height: 100% !important;
  max-width: min(350px, 40vw) !important;
  max-height: min(350px, 40vw) !important;
  border-radius: 50%;
  object-fit: cover !important;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3) !important;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Когда видео в полноэкранном режиме, обертка должна быть квадратной */
:fullscreen .circle-video-wrapper {
  border-radius: 0 !important;
  overflow: visible !important;
}

:-webkit-full-screen .circle-video-wrapper {
  border-radius: 0 !important;
  overflow: visible !important;
}

/* Индикатор воспроизведения/паузы */
.circle-video-wrapper::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease, background-color 0.3s ease;
  pointer-events: none;
  z-index: 2;
}

.circle-video-wrapper:hover::before {
  opacity: 0.7;
  content: "⏸";
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 26px;
}

.circle-video-wrapper:not(.video-paused):hover::before {
  opacity: 0.7;
  content: "⏸";
}

.circle-video-wrapper.video-paused:hover::before {
  opacity: 0.9;
  content: "▶";
  background: rgba(0, 0, 0, 0.9);
}

.media-column video.circle-video:hover {
  transform: scale(1.02);
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);
}

.media-column video.circle-video:active {
  transform: scale(0.98);
}

/*--------------Звук------------------*/


.sound-control {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 10px 14px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

body[data-time="night"] .sound-control {
  background: rgba(30, 30, 35, 0.85);
}


/* Кнопка звука */
#sound-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;  /* прозрачный фон — наследуется от .sound-control */
  border: none;
  cursor: pointer;
  color: #000;              /* цвет иконки в дневной теме */
}

#sound-toggle .sound-icon {
  width: 20px;
  height: 20px;
  display: block;
}

/* Ночная тема – иконка белая */
body[data-time="night"] #sound-toggle {
  color: #fff;
}

/* Состояние "muted" – иконка становится светлее */
#sound-toggle.muted .sound-icon {
  opacity: 0.5;              /* можно также использовать filter: brightness(0.7); */
}

#sound-volume {
  width: 80px;
  cursor: pointer;
}

/* === ПОЛЗУНОК ГРОМКОСТИ – кастомный (серый thumb, чёрный прогресс) === */
#sound-volume {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;           /* как в вашем коде */
  height: 6px;           /* жирнее, чем было */
  background: transparent;
  outline: none;
}

/* === WebKit (Chrome, Safari, Opera) === */
#sound-volume::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  background: linear-gradient(to right, #000, #000) 0/ var(--sx, 0) 100% no-repeat #ddd;
  border-radius: 3px;
}

#sound-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: #000000;                /* серый */
  border: 2px solid white;          /* белая обводка */
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  margin-top: -5px;                 /* центрирование по треку */
  cursor: pointer;
}

/* === Firefox === */
#sound-volume::-moz-range-track {
  width: 100%;
  height: 6px;
  background: #ddd;
  border-radius: 3px;
}

#sound-volume::-moz-range-progress {
  height: 6px;
  background: #000;
  border-radius: 3px;
}

#sound-volume::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #000000;
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  cursor: pointer;
}

/* === Internet Explorer / Edge (старые версии) === */
#sound-volume::-ms-track {
  height: 6px;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
#sound-volume::-ms-fill-lower {
  background: #000;
  border-radius: 3px;
}
#sound-volume::-ms-fill-upper {
  background: #ddd;
  border-radius: 3px;
}
#sound-volume::-ms-thumb {
  width: 16px;
  height: 16px;
  background: #000000;
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  cursor: pointer;
}

/* === НОЧНАЯ ТЕМА: инвертированные цвета ползунка громкости === */
body[data-time="night"] #sound-volume::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #505050, #505050) 0/ var(--sx, 0) 100% no-repeat #000;
}

body[data-time="night"] #sound-volume::-webkit-slider-thumb {
  background: #505050;
  border-color: white;
}

body[data-time="night"] #sound-volume::-moz-range-track {
  background: #000;
}

body[data-time="night"] #sound-volume::-moz-range-progress {
  background: #505050;
}

body[data-time="night"] #sound-volume::-moz-range-thumb {
  background: #505050;
  border-color: white;
}

body[data-time="night"] #sound-volume::-ms-fill-lower {
  background: #505050; /* заполненная часть */
}

body[data-time="night"] #sound-volume::-ms-fill-upper {
  background: #000;    /* пустая часть */
}

body[data-time="night"] #sound-volume::-ms-thumb {
  background: #505050;
  border-color: white;
}



/*------------ ПОЛНОЭКРАННЫЙ РЕЖИМ -------------- */

/* Полноэкранный режим для обычных видео внутри media-column */
.media-column video:fullscreen,
.media-column video:-webkit-full-screen {
  object-fit: contain !important;
}

/* Дополнительная страховка для случаев, когда fullscreen установлен на родителе */
.media-column:fullscreen video,
.media-column:-webkit-full-screen video {
  object-fit: contain !important;
}


/* ---------------------КУРСОР---------------- */

/* Глобально для всех элементов */
* {
  cursor: default;      /* Стрелка везде */
  user-select: none;    /* Запрет выделения */
}

/* Исключения для кнопок и ссылок */
button,
a,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"] {
  cursor: pointer;      /* На кнопках — рука */
  /* user-select можно оставить none (текст кнопки не выделяется) */
}


/* ===== АДАПТАЦИЯ ПОД ПЛАНШЕТЫ (до 1024px) ===== */
@media (max-width: 1024px) {

  .sound-control {
    display: none;
  }
  
  .scene-step {
    gap: 40px; /* уменьшаем расстояние между колонками */
  }

  .text-column {
    max-width: 500px;
    min-width: 300px;
    width: auto;
    font-size: 28px;
  }

  .media-column {
    width: 350px;
  }

  .media-column img,
  .media-column video {
    max-width: 100%;
    max-height: 45vh;
  }

  .scene > h2 {
    font-size: clamp(35px, 6vw, 46px)
  }

  .scene > p {
    font-size: clamp(16px, 2.5vw, 20px);
  }
}

/* Уведомление при входе на сайте */

/* Уведомление о включении звука */
.sound-notification {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: white;
  border-radius: 16px;
  padding: 16px 20px;
  z-index: 1000;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  transform: translateY(calc(100% + 20px));
  transition: transform 0.3s ease;
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.1);
}

.sound-notification.show {
  transform: translateY(0);
}

.notification-content p {
  margin: 0 0 15px 0;
  font-size: 16px;
  line-height: 1.5;
  font-family: 'Playfair Display', serif;
}

#close-notification {
  background: white;
  color: black;
  border: none;
  border-radius: 30px;
  padding: 8px 25px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  font-family: 'Playfair Display', serif;
}

#close-notification:hover {
  background: #f0f0f0;
}

body[data-time="night"] .sound-notification {
  background: rgba(30, 30, 35, 0.95);
  border-color: rgba(255,255,255,0.2);
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
  .sound-notification {
    bottom: 10px;
    left: 10px;
    right: 10px;
    padding: 14px 16px;
  }
  .notification-content p {
    font-size: 15px;
  }
}



/* ===== ТЕЛЕФОНЫ (до 768px) ===== */

/* Скрываем подпись под круглым видео на экранах шире 768px (десктопы) */
@media (min-width: 769px) {
  .video-caption {
    display: none;
  }
}


@media (max-width: 768px) {

  :root {
    --vh: 1vh;
  }

  .scene.active,
  .scene,
  body,
  html {
    height: calc(var(--vh, 1vh) * 100);
    max-height: calc(var(--vh, 1vh) * 100);
    overflow-y: hidden;
  }

  .scene {
    padding: 0px 15px 80px 15px;
  }

  .scene.active {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }

  .scene > h2 {
    font-size: clamp(30px, 7vw, 34px);
  }

  .scene > p {
    font-size: clamp(16px, 5vw, 18px);
    margin: 0 0 10px 0;
  }

  
  .scene-content-container {
    flex: 1;                      
    display: flex;
    flex-direction: column;
    justify-content: flex-start;  
    align-items: stretch;
    overflow: visible;            
  }

  
  .scene-content {
    display: flex;
    flex-direction: column;       
    justify-content: flex-start;      
    align-items: center;
    flex: 1;                      
    min-height: 0;

  }

  .scene-step {
    flex-direction: column;
    gap: 25px;
    height: auto;             
    margin: 0;                   

    margin-top: 15px;
  }

  .scene-step.no-media {
    height: 100%;              
    margin-top: 0;               
    justify-content: center;     
    align-items: center;
  }
  

  .scene-step.text-center .text-column {
    text-align: center;
  }



  .media-column {
    width: 100%;
    flex: none;
    display: flex;
    justify-content: center;
    padding: 0 5px;
  }

  .media-column img {
    max-width: 90%;
    max-height: 35vh;
    object-fit: cover;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  }

  .media-column video {
    max-width: 60%;
    max-height: 35vh;
    object-fit: cover;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  }

  .circle-video-wrapper::before {
    display: none !important;
  }
  .circle-video-wrapper:hover::before,
  .circle-video-wrapper.video-paused:hover::before {
    display: none !important;
  }

  .video-caption {
    text-align: center;
    font-size: 12px;
    color: var(--text-color);
    opacity: 0.7;
    margin-top: 8px;
    width: 100%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.4;
    padding: 0 10px;
    box-sizing: border-box;
  }

  .media-column.has-caption {
    flex-direction: column;   
    gap: 10px;                
  }


  .text-column {
    width: 100%;
    max-width: 100%;
    flex: none;
    font-size: clamp(16px, 4.5vw, 19px);
    text-align: justify;
    padding: 0 10px;
    box-sizing: border-box;
  }

  .text-inner {
    max-height: 100%;
    overflow-y: auto;
    padding-right: 5px; /* небольшой отступ для скролла */
  }

  .scene-buttons {
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 0;
  }

  .scene-buttons button {
    padding: 12px 24px;
    font-size: clamp(18px, 2vw, 21px);
  }


  #intro .intro-logo {
    max-width: 80vw;
    max-height: 35vh;
  }


  .sound-control {
    top: 10px;
    right: 10px;
    padding: 4px 8px;
    gap: 5px;
  }

  #sound-toggle {
    width: 28px;
    height: 28px;
  }

  #sound-toggle .sound-icon {
    width: 16px;
    height: 16px;
  }

  #sound-volume {
    width: 50px;
  }

  .credits-content {
    font-size: clamp(20px, 6vw, 26px);
    line-height: 1.6;
  }

  .credits-content h2 {
    font-size: clamp(24px, 7vw, 32px);
  }

  #intro:not(.started) .scene-content-container {
    flex: 1;
    max-height: 40vh;
    margin: 15px 0;
    padding: 100px 0;
  }

  #intro:not(.started) .intro-logo {
    max-height: 45vh;
    margin: 0 auto;
  }

  #intro > h2 {
    font-size: clamp(36px, 5vw, 40px); 
    margin: 0 0 8px 0;                   
  }

  #intro > p {
    font-size: clamp(18px, 3vw, 20px); 
    margin: 0 0 12px 0;
  }

  .footer-credits {
    flex-direction: column;
    gap: 0.2em;
  }
  
  /* Убираем разделители */
  .footer-credits span:not(:last-child)::after {
    content: none;
  }
}

/* Фикс для Chrome на iOS */
@supports (-webkit-touch-callout: none) {
  .intro-logo {
    /* Отключаем проблемные свойства */
    -webkit-filter: none !important;
    filter: none !important;
    /* Используем box-shadow вместо drop-shadow */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
  }
  
  /* Общий фикс для всех изображений с тенью */
  img {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}