/* Приспособление к экрану.

   Главная забота — длинные словосочетания из папки 04. Одним значением
   шрифта тут не обойтись: то, что уместно для «Der Atem», разорвёт доску
   на фразе в десять слов. Поэтому размер вычисляется в двух слоях.

   Слой первый, здесь: clamp задаёт разумные пределы по ширине окна.
   Слой второй, в scripts/board.js: если текст всё равно не помещается
   в свою половину доски, скрипт уменьшает шрифт, пока не уместится.

   Скрытие переполненной области исправлением не считается: текст должен
   быть виден целиком, а не обрезан. */

.tekst {
  /* базовый предел; точное значение ставит скрипт через --razmer */
  font-size: var(--razmer, clamp(1.4rem, 3.4vw + 0.6rem, 3rem));
}

/* Чем длиннее материал, тем осторожнее пределы. Класс ставит скрипт
   по числу знаков, чтобы длинная фраза начинала с меньшего размера
   и скрипту оставалось меньше работы. */
.tekst.dlina-korotkaya { --predel: clamp(1.6rem, 4.2vw + 0.6rem, 3.4rem); }
.tekst.dlina-srednyaya { --predel: clamp(1.3rem, 2.8vw + 0.5rem, 2.4rem); }
.tekst.dlina-dlinnaya  { --predel: clamp(1.05rem, 1.9vw + 0.45rem, 1.8rem); }
.tekst.dlina-ochen     { --predel: clamp(0.95rem, 1.4vw + 0.4rem, 1.4rem); line-height: 1.3; }

/* ─── планшет ─── */
@media (max-width: 900px) {
  .obolochka { padding: 12px; }
  .logotip-razdel { display: none; }
  .podskazka { display: none; }
}

/* ─── телефон, портрет ─── */
@media (max-width: 640px) {
  .obolochka { padding: 8px; gap: 6px; }

  /* Шапка в ОДНУ строку. Раньше она разваливалась на четыре и съедала
     сорок процентов экрана: логотип, списки, значки, вкладки. Доске
     оставалось меньше половины, и слово плавало в пустоте. */
  .shapka { min-height: 0; flex-wrap: nowrap; gap: 6px; }
  .logotip { gap: 0; flex: 0 0 auto; }
  .logotip-imya { display: none; }      /* подпись уходит, карандаш остаётся */
  .logotip-znak { font-size: 20px; }
  .logotip-razdel { display: none; }

  .upravlenie { flex: 1 1 auto; gap: 5px; flex-wrap: nowrap; min-width: 0; }
  .vybor {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    height: 34px;
    padding: 0 22px 0 8px;
    font-size: 12px;
    background-position: right 6px center;
  }
  .knopka-shapki { min-width: 34px; height: 34px; padding: 0; }
  .knopka-shapki .podpis { display: none; }

  /* Вкладки узкой полосой, а не отдельным этажом */
  .vkladki { gap: 3px; }
  .vkladka { padding: 3px 9px; font-size: 12px; }
  .podskazka { display: none; }

  .rama { padding: 6px; border-radius: 12px; }
  .polovina { padding: 22px 12px 8px; }
  .metka { top: 7px; font-size: 10px; letter-spacing: .12em; }

  /* ── Пульт в два ряда, пять столбцов ──
     В одну строку он не помещался: восемь кнопок со счётчиком требуют
     около трёхсот пятидесяти точек, а на телефоне доступно триста сорок.
     Правый край обрезался, и стрелка «вперёд» уходила за экран.

     Разделение по смыслу: сверху звук и номер слова, снизу управление.
     Все кнопки на месте всегда — «знаю» и «не знаю» не появляются
     и не исчезают, иначе пульт прыгал бы при каждом раскрытии шторы. */
  .pult-ryad {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 7px 4px;
    padding: 9px 8px;
    border-radius: 22px;
    width: 100%;
    justify-items: center;
    align-items: center;
  }
  #zvuk-osnovnoy { grid-area: 1 / 1 / 2 / 2; }
  #schetchik     { grid-area: 1 / 2 / 2 / 5; }
  #zvuk-perevod  { grid-area: 1 / 5 / 2 / 6; }
  #nazad    { grid-area: 2 / 1 / 3 / 2; }
  #solnce   { grid-area: 2 / 2 / 3 / 3; }
  #znayu    { grid-area: 2 / 3 / 3 / 4; }
  #ne-znayu { grid-area: 2 / 4 / 3 / 5; }
  #vpered   { grid-area: 2 / 5 / 3 / 6; }

  .krugly { width: 44px; height: 44px; font-size: 15px; }
  .krugly.solnce { width: 46px; height: 46px; font-size: 20px; }
  .krugly.zvuk { width: 44px; padding: 0; height: 44px; font-size: 11px; gap: 2px; flex-direction: column; }
  .krugly.zvuk span { font-size: 9px; letter-spacing: .04em; }
  .schetchik { min-width: 0; width: 100%; height: 40px; font-size: 13px; padding: 0 6px; }

  .lenta i { width: 12px; height: 4px; }
}

/* Совсем узкие экраны */
@media (max-width: 380px) {
  .krugly, .krugly.zvuk { width: 40px; height: 40px; }
  .krugly.solnce { width: 42px; height: 42px; font-size: 18px; }
  .schetchik { height: 36px; font-size: 12px; }
  .vybor { font-size: 11px; padding: 0 20px 0 7px; }
  .vkladka { padding: 3px 7px; font-size: 11px; }
}

/* ─── телефон, альбом: высоты почти нет ─── */
@media (max-height: 500px) and (orientation: landscape) {
  .obolochka { padding: 8px; gap: 6px; }
  .shapka { min-height: 0; }
  .logotip-imya { font-size: 16px; }
  .vkladki { display: none; }
  .metka { top: 6px; font-size: 10px; }
  .polovina { padding: 20px 12px 6px; }
  .krugly { width: 36px; height: 36px; }
  .krugly.solnce { width: 42px; height: 42px; font-size: 18px; }
  .schetchik { height: 36px; }
  .lenta { display: none; }
}

/* Экраны с очень узкой шириной: пульт не должен вылезать за край */
@media (max-width: 380px) {
  .pult-ryad { gap: 4px; padding: 7px 8px; }
  .krugly { width: 36px; height: 36px; }
  .schetchik { min-width: 66px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}