/* ============================================================
   mobile.css — мобильные медиа-запросы SEGABIT.
   Вынесено из styles.css без изменений (Вариант 1).
   Использует CSS-переменные из styles.css (:root).
   Подключать ПОСЛЕ styles.css и shop.css — каскад сохраняется.
   Блок @media (pointer: coarse) намеренно ОСТАВЛЕН в styles.css
   (это тип ввода, а не размер экрана).
   ============================================================ */

      /* ПРИОРИТЕТНОЕ ЦЕНТРИРОВАНИЕ НА МОБИЛЬНЫХ ЭКРАНАХ.
         Вынесено из вложенности: раньше сидело внутри min-width:1024,
         поэтому условие max-width:1023 не срабатывало никогда. */
      @media (max-width: 1023px) {
        .panel--center {
          order: -1; /* Помещает центральную клик-зону в самый верх на смартфонах */
        }
      }

      /* На узких экранах боковые надписи прячем, чтобы не лезли на окно */
      @media (max-width: 720px) {
        .sync-hud { display: none; }
      }

      @media (max-width: 600px) {
        .rules-btn { width: 40px; height: 40px; right: 0.9rem; bottom: 0.9rem; font-size: 1.25rem; }
      }

      @media (max-width: 1023px) {
        /* На узких экранах бейдж уезжает в строку по центру — версия следует за ним в потоке */
        .game-version {
          position: static;
          transform: none;
          margin: 0.3rem auto 0 auto;
          text-align: center;
        }
      }

      @media (max-width: 1023px) {
        .author-badge {
          margin: 1rem auto 0 auto;
          flex-direction: row;
          align-items: center;
          gap: 0.5rem;
          padding: 0.3rem 0.6rem;
        }
        .author-badge__title {
          margin-bottom: 0;
        }
        /* Сдвигаем сетку чуть ниже на мобилках, чтобы подпись не накладывалась на боковые панели */
        .game-layout {
          padding-top: 3.5rem;
        }
      }

      /* ============================================================
         МОБИЛЬНАЯ ПОЛИРОВКА (смартфоны, портрет). Порог 600px.
         Десктоп (>=1024px) и средние экраны не затрагиваются.
         Все правки — только сужение/сжатие, структура не меняется.
         ============================================================ */
      @media (max-width: 600px) {
        :root {
          --panel-pad: 0.6rem;
          --center-col-w: 100%;
        }
        .game-layout {
          gap: 0.8rem;
          padding: 0.7rem;
          padding-top: 0.5rem; /* п6: звание прижато к верху экрана на телефоне */
        }

        /* Клик-зона: фикс-ширины -> резина, чтобы не выпирала на узком экране */
        .click-btn-wrap {
          width: min(260px, 78vw);
          height: min(320px, 96vw);
          margin: 0.4rem 0 0.1rem 0;
        }
        .click-btn {
          width: min(200px, 60vw);
          height: min(200px, 60vw);
        }
        .center-halo {
          width: min(440px, 96vw) !important;
        }

        /* Счёт и датчики: ужать, чтобы крупное число не ломало строку */
        .score-value { font-size: clamp(1.7rem, 11vw, 2.5rem); }

        /* Ряд тумблеров: одна строка, сжатый шрифт (по выбору владельца) */
        .top-controls-row {
          gap: 0.25rem;
          flex-wrap: nowrap;
        }
        .archive-btn-mini, .audio-control-mini {
          font-size: 0.46rem;
          padding: 0.3rem 0.2rem;
          gap: 0.2rem;
          letter-spacing: 0.01em;
        }
        /* На телефоне вертикальный слайдер прячем — управление звуком уедет в меню настроек (будущий мобильный заход) */
        .volume-wrap { display: none; }

        /* Строка звания: длинные названия не должны ломать макет */
        .rank-strip__name { font-size: clamp(0.72rem, 4vw, 1.1rem); }
        .rank-strip__bar { width: 86%; }

        /* Модалки: больше места под контент, меньше внутренние поля */
        .sync-modal { padding: 24px 18px; width: 94%; }
        .sync-modal__title { font-size: clamp(1.2rem, 6.5vw, 1.65rem); }
        .archive-modal { padding: 1.1rem; width: 96%; max-height: 88vh; }

        /* Панели магазина: компактнее заголовки */
        .panel__label { font-size: 0.62rem; }
        .buy-mode-btn { padding: 0.2rem 0.35rem; font-size: 0.62rem; }
      }