/*
 * Общие стили страниц `/start` и `/checkpoint` (spec station-screen; design §9).
 * Корневая страница `/` (index.html) подключает их ради общего вида, её правила в конце файла.
 *
 * Разметка страницы:
 *
 *   <body>
 *     <main class="screen">
 *       <header class="field">…</header>      верхнее поле: время, лучший, индикаторы, подсказка
 *       <div class="cell"><div class="square"></div></div>
 *       <footer class="field">…</footer>      нижнее поле: кнопка «Сброс»
 *     </main>
 *   </body>
 *
 * В <head> страницы нужен <meta name="viewport"
 * content="width=device-width, initial-scale=1, user-scalable=no">.
 */

:root {
  /* Высота служебных полей фиксирована: квадрат не прыгает, когда текст в них появляется
     или исчезает. Верхнее поле вмещает индикаторы, время и строку лучшего результата на А. */
  --top-height: 9rem;
  --bottom-height: 5rem;

  /* Цвета квадрата по состояниям (spec start-station, checkpoint-station). */
  --blue: #1e88e5;
  --cyan: #00bcd4;
  --yellow: #fdd835;
  --green: #43a047;
  --red: #e53935;
  /* Серый индикатора связи на А: состояние неизвестно (spec station-link). */
  --grey: #757575;

  color-scheme: dark;
}

/* Касания не вызывают действий браузера: прокрутки, масштаба, выделения, меню долгого
   нажатия и обновления страницы жестом. Контекстное меню дополнительно гасит screen.js. */
html {
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: system-ui, sans-serif;
}

/* 100dvh учитывает адресную строку Chrome: страница не прокручивается при любой её высоте. */
body {
  height: 100dvh;
}

.screen {
  height: 100%;
  display: grid;
  grid-template-rows: var(--top-height) minmax(0, 1fr) var(--bottom-height);
}

.field {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Средняя ячейка — контейнер запросов размера: сторона квадрата — меньшая из её сторон.
   При изменении высоты окна (адресная строка) квадрат пересчитывается без скриптов. */
.cell {
  min-height: 0;
  container-type: size;
  display: grid;
  place-items: center;
}

.square {
  width: min(100cqw, 100cqh);
  height: min(100cqw, 100cqh);
  background: var(--blue);
}

/* Подсказка над квадратом Б, пока звук не разблокирован (checkpoint.js). Скрывается
   атрибутом hidden, поэтому свойство display здесь не задаётся. */
.hint {
  margin: 0 1rem;
  font-size: 1.25rem;
  line-height: 1.3;
  text-align: center;
}

/* Цвет квадрата — класс с именем цвета: на А по состоянию подхода (COLORS в run.js,
   start.js), на Б зелёный на время мигания (GREEN в checkpoint.js). */
.square.blue {
  background: var(--blue);
}

.square.cyan {
  background: var(--cyan);
}

.square.yellow {
  background: var(--yellow);
}

.square.green {
  background: var(--green);
}

.square.red {
  background: var(--red);
}

/* Верхнее поле А (start.html): индикаторы связи, время, строка лучшего результата.
   Высота каждой строки фиксирована и не зависит от текста: время не сдвигается, когда
   строка лучшего появляется или исчезает. */
.indicators {
  height: 1.5rem;
  display: flex;
  gap: 0.75rem;
}

/* Индикатор связи «А» или «Б» (Indicators в start.js): значок с буквой, цвет фона — класс
   green, red или grey (связь есть, связи нет, неизвестно). Размер от цвета не зависит,
   поэтому смена цвета ничего не сдвигает. До запуска скрипта индикатор серый. */
.indicator {
  width: 2.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  border-radius: 0.75rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  background: var(--grey);
}

.indicator.green {
  background: var(--green);
}

.indicator.red {
  background: var(--red);
}

.indicator.grey {
  background: var(--grey);
}

.time,
.best {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.time {
  height: 4.5rem;
  font-size: 4.5rem;
}

.best {
  height: 1.5rem;
  margin-top: 0.5rem;
  font-size: 1.5rem;
}

/* Кнопка «Сброс» в нижнем поле А. */
.reset {
  font: inherit;
  font-size: 1.5rem;
  padding: 0.75rem 3rem;
  color: #fff;
  background: #424242;
  border: 0;
  border-radius: 0.5rem;
}

.reset:active {
  background: #757575;
}

/* Альбомная ориентация: вместо интерфейса заглушка. Интерфейс только скрыт, скрипты
   и отрисовка продолжают работать, состояние сохраняется. */
body::after {
  content: "Поверните телефон";
  display: none;
}

@media (orientation: landscape) {
  .screen {
    display: none;
  }

  body::after {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
  }
}

/* Корневая страница `/` (index.html, spec hosting «Корневая страница»; design §9): две
   крупные ссылки на страницы телефонов, одна под другой. Это не страница телефона,
   требования station-screen к ней не относятся: заглушки альбомной ориентации нет
   (content: none сильнее body::after по специфичности), ссылки работают в любой ориентации. */
body.home::after {
  content: none;
}

.links {
  box-sizing: border-box;
  height: 100%;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

/* Ссылка выглядит как кнопка «Сброс», только крупнее: вся её площадь нажимается пальцем. */
.link {
  box-sizing: border-box;
  width: 100%;
  max-width: 24rem;
  padding: 1.5rem 1rem;
  font-size: 2rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: #424242;
  border-radius: 0.5rem;
}

.link:active {
  background: #757575;
}