/* ===== ГЛОБАЛЬНАЯ АДАПТИВНОСТЬ ДЛЯ ВСЕХ СТРАНИЦ ===== */

/* Общие правила для любых контейнеров */
@media (max-width: 768px) {
  /* Для планшетов и маленьких ноутбуков */
  .container, .wrapper, .block-content {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

@media (max-width: 480px) {
  /* Для телефонов */
  body {
    font-size: 16px !important;
  }

  /* Любые блоки, которые используют эти классы */
  .timer-wrapper-canvas,
  .player-wrapper,
  .media-container,
  .service-block {
    padding: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Заголовки */
  h1, .timer-title-canvas, .service-title {
    font-size: 24px !important;
  }
  h2, .subtitle, .service-subtitle {
    font-size: 18px !important;
  }

  /* Кнопки (если у вас есть общий класс кнопок) */
  .btn, .btn-start-canvas, .service-button {
    font-size: 22px !important;
    padding: 12px 24px !important;
    width: 90% !important;
    max-width: 300px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }

  /* Информационные панели */
  .timer-info-canvas,
  .info-panel,
  .service-status {
    font-size: 14px !important;
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Прогресс-бары, точки, индикаторы */
  .fish-dot,
  .progress-dot,
  .status-indicator {
    width: 10px !important;
    height: 10px !important;
  }

  /* Таймеры, цифровые индикаторы */
  .time-left-canvas,
  .digital-display,
  .countdown {
    font-size: 18px !important;
    padding: 4px 14px !important;
    min-width: 60px !important;
  }

  /* Изображения внутри блоков */
  .timer-title-canvas img,
  .media-icon,
  .service-icon {
    width: 36px !important;
    height: 36px !important;
  }

  /* Любые внешние рамки или обводки */
  .aquarium-outer,
  .media-frame,
  .service-card {
    padding: 4px !important;
  }

  /* Отключаем излишние hover-эффекты на сенсорных экранах */
  .btn-start-canvas:hover,
  .service-button:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* Активные состояния (нажатие) оставляем */
  .btn-start-canvas:active,
  .service-button:active {
    transform: translateY(4px) !important;
  }

  /* Модальные окна и оверлеи */
  .celebrate-box-canvas,
  .modal-content,
  .popup {
    max-width: 90% !important;
    padding: 30px 20px !important;
  }

  .celebrate-box-canvas .big-fish,
  .modal-icon {
    font-size: 48px !important;
  }

  .celebrate-box-canvas h2,
  .modal-title {
    font-size: 26px !important;
  }

  .celebrate-box-canvas .sub,
  .modal-text {
    font-size: 16px !important;
  }
}

/* Для очень маленьких экранов (iPhone SE, старые Android) */
@media (max-width: 380px) {
  .timer-title-canvas,
  .service-header {
    font-size: 20px !important;
  }
  .timer-title-canvas img,
  .media-icon {
    width: 28px !important;
    height: 28px !important;
  }
  .btn-start-canvas,
  .service-button {
    font-size: 18px !important;
    padding: 10px 16px !important;
  }
  .aquarium-outer,
  .media-frame {
    padding: 3px !important;
  }
  .fish-dot,
  .progress-dot {
    width: 8px !important;
    height: 8px !important;
  }
}