/* =============================================================
   ЭКРАНЫ. Подключается ПОСЛЕ styles.css.

   Почему отдельным файлом: styles.css скопирован из рабочей версии
   байт в байт, и вид на компьютере обязан остаться пиксель в пиксель.
   Всё, что касается телефона и планшета, лежит здесь и не смешано
   с основным оформлением.

   В исходных стилях было только одно правило — портретный телефон.
   То есть ровно тот режим, который по методике НЕ рабочий.
   Ландшафт телефона и планшет не были описаны вовсе.

   Порядок разделов:
     1. Высота экрана на мобильных браузерах
     2. Телефон лёжа — основной рабочий режим
     3. Очень низкий экран
     4. Планшет лёжа
     5. Планшет стоя
     6. Большой монитор
     7. Прицеливание пальцем и отключение подсветки при касании
   ============================================================= */


/* ---------------------------------------------------------------
   1. ВЫСОТА ЭКРАНА НА МОБИЛЬНЫХ

   body в основных стилях задан как height: 100vh. На телефонах
   в 100vh входит адресная строка браузера, поэтому низ страницы
   уезжает под неё, а при overflow: hidden просто отрезается —
   пульт становится недоступен. Динамическая единица это лечит.
   --------------------------------------------------------------- */
@supports (height: 100dvh) {
    body { height: 100dvh; }
}


/* ---------------------------------------------------------------
   2. ТЕЛЕФОН ЛЁЖА — ОСНОВНОЙ РАБОЧИЙ РЕЖИМ

   Условие по ВЫСОТЕ, а не по ширине: у телефона лёжа ширина бывает
   и 740, и 930 точек, а высота всегда мала. Ловим именно её.

   Бюджет по высоте примерно такой:
       шапка      34
       вкладки    24
       доска      остальное
       пульт      46
       точки       8
   --------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 520px) {

    .app-container {
        padding: 6px 12px;
        padding-bottom: calc(6px + var(--safe-area-bottom));
        max-height: none;
    }

    .app-header { height: 34px; margin-bottom: 4px; }
    .logo-icon  { font-size: 1rem; }
    .logo-title { font-size: 1rem; }
    .logo-sub   { font-size: 0.7rem; }

    .premium-select   { height: 28px; font-size: 0.72rem; padding: 0 8px; }
    .theme-toggle-btn { width: 28px; height: 28px; font-size: 13px; }

    .app-tabs { margin-bottom: 4px; }
    .tab-link { padding: 3px 9px; font-size: 0.68rem; }

    .slate-board-container { margin-bottom: 8px; }
    .slate-wooden-frame    { padding: 7px; border-width: 2px; border-radius: 12px; }

    .board-text    { font-size: 1.65rem; }
    .board-subtext { font-size: 1rem; }
    .board-badge   { font-size: 0.5rem; }

    .curtain-lock-icon { font-size: 1.2rem; }
    .curtain-prompt    { font-size: 0.9rem; }

    .control-pill { gap: 4px; padding: 4px 8px; max-width: 100%; }

    .fav-btn, .nav-btn, .score-btn { width: 38px; height: 38px; }
    .fav-btn  { font-size: 0.58rem; }
    .solar-btn { width: 44px; height: 44px; border-radius: 22px; }
    .solar-icon { font-size: 1.1rem; }

    .index-display-container { height: 38px; }
    .index-input { font-size: 0.68rem; width: 58px; }

    .progress-bar-wrapper { margin-top: 4px; }
    .progress-dots { gap: 3px; }
    .progress-dot  { width: 5px; height: 5px; }
}


/* ---------------------------------------------------------------
   3. ОЧЕНЬ НИЗКИЙ ЭКРАН

   Старые телефоны лёжа и окно браузера с открытой адресной строкой.
   Здесь доска важнее навигации: вкладки убираем, на статистику
   можно зайти с компьютера.
   --------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 380px) {
    .app-tabs { display: none; }

    .app-header { height: 30px; margin-bottom: 3px; }
    .board-text { font-size: 1.4rem; }

    .fav-btn, .nav-btn, .score-btn { width: 34px; height: 34px; }
    .solar-btn { width: 40px; height: 40px; border-radius: 20px; }
}


/* ---------------------------------------------------------------
   4. ПЛАНШЕТ ЛЁЖА

   Самый удобный режим: доска крупная, пульт не жмётся.
   Ничего не сжимаем, наоборот — даём доске больше воздуха.
   --------------------------------------------------------------- */
@media (orientation: landscape) and (min-height: 521px) and (max-width: 1280px) {
    .board-text    { font-size: 2.6rem; }
    .board-subtext { font-size: 1.4rem; }

    .fav-btn, .nav-btn, .score-btn { width: 52px; height: 52px; }
    .solar-btn { width: 64px; height: 64px; border-radius: 32px; }
}


/* ---------------------------------------------------------------
   5. ПЛАНШЕТ СТОЯ

   Портрет по методике не рабочий режим, но ученик всё равно
   повернёт устройство. Экран не должен разваливаться.
   Существующее правило в styles.css ловит только ширину до 768,
   то есть телефон. Планшет шире и туда не попадал.
   --------------------------------------------------------------- */
@media (orientation: portrait) and (min-width: 600px) {
    .app-container { padding: 14px; }

    .app-header { flex-direction: row; height: 48px; }
    .navigation-controls { width: auto; }

    .board-text    { font-size: 2.8rem; }
    .board-subtext { font-size: 1.5rem; }

    .slate-board-container { margin-bottom: 16px; }
}


/* ---------------------------------------------------------------
   6. БОЛЬШОЙ МОНИТОР

   Доска ограничена 1366 на 768 и стоит по центру. Ничего не тянем:
   растянутая на весь монитор доска читается хуже, а размер шрифта
   и так подобран автором.
   Здесь только чуть больше воздуха вокруг.
   --------------------------------------------------------------- */
@media (min-width: 1600px) {
    .app-container { padding: 24px; }
}


/* ---------------------------------------------------------------
   7. ПАЛЕЦ, А НЕ МЫШЬ

   На сенсорных экранах наведение залипает: браузер оставляет
   состояние hover после касания, и кнопка выглядит нажатой.
   Плюс минимальный размер цели по пальцу.
   --------------------------------------------------------------- */
@media (hover: none) {
    .pill-btn:hover,
    .tab-link:hover,
    .theme-toggle-btn:hover { background: inherit; }

    .pill-btn:active { transform: scale(0.94); }

    /* Шторы — главная область касания, увеличиваем отклик. */
    .slate-curtain { -webkit-tap-highlight-color: transparent; }
}