/* Сброс, подложка и общая типографика. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

/* Safari на iPhone сам увеличивает шрифт, когда телефон поворачивают вбок.
   Вёрстка на стекле от этого расползается, а размеры подобраны здесь. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--size-body);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Резинку прокрутки на iOS отключаем: она отрывает стеклянную шапку от
     края экрана и обнажает подложку. */
  overscroll-behavior-y: none;
}

/* Подложка под стеклом.
   Три размытых пятна на отдельном слое: они и есть то, что размывается
   стеклянными поверхностями. Слой фиксирован и не прокручивается — иначе
   при прокрутке под стеклом ехал бы цвет, и приложение «мерцало».
   Медленное дыхание пятен даёт стеклу жизнь, но настолько медленное, что
   заметить его можно, только присмотревшись. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--bg-base);
  pointer-events: none;
}

/* Узор темы — отдельным слоем поверх пятен и без размытия.
   Замешать его в пятна нельзя: они размыты на девяносто пикселей, и от
   лепестков осталась бы розовая муть. Слой держится еле заметным намеренно:
   узор, который бросается в глаза, через неделю начинает мешать читать. */
.backdrop {
  background-image: var(--bg-pattern, none);
}

.backdrop::before,
.backdrop::after,
.backdrop > span {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: var(--bg-blob-alpha);
  will-change: transform;
}

.backdrop::before {
  width: 70vmax;
  height: 70vmax;
  left: -22vmax;
  top: -26vmax;
  background: var(--bg-blob-1);
  animation: drift-a 34s var(--ease) infinite alternate;
}

.backdrop::after {
  width: 62vmax;
  height: 62vmax;
  right: -20vmax;
  top: 8vmax;
  background: var(--bg-blob-2);
  animation: drift-b 44s var(--ease) infinite alternate;
}

.backdrop > span {
  width: 56vmax;
  height: 56vmax;
  left: 18vmax;
  bottom: -30vmax;
  background: var(--bg-blob-3);
  animation: drift-c 52s var(--ease) infinite alternate;
}

@keyframes drift-a {
  to {
    transform: translate3d(12vmax, 8vmax, 0) scale(1.12);
  }
}
@keyframes drift-b {
  to {
    transform: translate3d(-10vmax, 12vmax, 0) scale(0.92);
  }
}
@keyframes drift-c {
  to {
    transform: translate3d(8vmax, -10vmax, 0) scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .backdrop::before,
  .backdrop::after,
  .backdrop > span {
    animation: none;
  }
}

h1,
h2,
h3,
h4,
p,
figure {
  margin: 0;
}

h1 {
  font-size: var(--size-hero);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
}

h2 {
  font-size: var(--size-title);
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 650;
}

h3 {
  font-size: var(--size-section);
  font-weight: 600;
  letter-spacing: -0.01em;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--accent-strong);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* Поля ввода на телефоне — не меньше 16 пикселей, и это не про читаемость.
   Safari на iPhone приближает страницу, когда палец попадает в поле с более
   мелким шрифтом, и обратно уже не отдаляет: после первого же ответа с
   клавиатуры приложение остаётся увеличенным и съехавшим вбок. Основной
   текст при этом остаётся 15-м: правило касается только полей. */
input,
select,
textarea {
  font-size: max(16px, var(--size-body));
}

/* Нажатие пальцем.

   -webkit-tap-highlight-color: серая вспышка поверх стекла на каждом касании
   выглядит как поломка, а не как отклик; свой отклик у кнопок есть.

   touch-action: manipulation отключает ожидание второго касания. Без него
   Safari держит паузу в треть секунды на случай двойного тапа — в игре на
   время это разница между «успел» и «не успел», а в наборе слов из шести
   пар набегает в секунды.

   Выделение и всплывающее меню по долгому нажатию выключены там, где текст
   нажимают, а не читают: плитки, кнопки, варианты ответа. В самих карточках
   выделение остаётся — оттуда слово копируют. */
a,
button,
label,
summary,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button,
[role="button"],
.match-tile,
.option {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

img {
  max-width: 100%;
  display: block;
}

/* Фокус виден всегда и везде: приложением пользуются с клавиатуры, а на
   стекле обычная браузерная рамка почти теряется. */
:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--accent-soft);
}

/* Полоса прокрутки — тонкая и полупрозрачная, чтобы не спорить со стеклом. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--glass-edge-strong) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--glass-edge-strong);
  border-radius: var(--radius-pill);
  border: 3px solid transparent;
  background-clip: content-box;
}

/* Служебное */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.muted {
  color: var(--text-muted);
}

.faint {
  color: var(--text-faint);
}

.caption {
  font-size: var(--size-caption);
  color: var(--text-muted);
}

.mono {
  font-family: var(--font-mono);
  font-variant-ligatures: none;
}

.nowrap {
  white-space: nowrap;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.stack-sm {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.row {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
}

.wrap {
  flex-wrap: wrap;
}

.grow {
  flex: 1 1 auto;
  min-width: 0;
}