/* ===================================================================
   Первый экран и правки кругов v102 … v106 — один файл.

   Р-221 · Четыре надстройки слиты в одну. До этого круга поверх
   site.css лежали site-v102.css, site-v103.css, site-v104.css и
   site-v105.css. Один и тот же отбор (.discovery-head h1, .discovery-facts,
   .discovery-brief, .discovery-card) переопределялся в них по четыре раза,
   и действующее значение приходилось собирать чтением четырёх файлов.
   Здесь у каждого отбора одно объявление — то, которое доходит до экрана.
   =================================================================== */

/* ---------- Общий вертикальный ритм секций (круг v105) -------- */
:root {
  --section-space: clamp(64px, 7vh, 92px);
  /* Р-230 · Одна мера смены позиции: первый экран, «Практика», «Отличия».
     620 мс — вдвое медленнее прежнего и на волос ниже порога 0,75 с, за
     которым шаг начинает чувствоваться ожиданием (довод круга v85). */
  --change-motion: 620ms;
  /* Р-303 · Одна световая полоса на весь первый экран. Круг проходa 8,4 с:
     сам проход 5,4 с остался прежней длины, а тишина между проходами убавлена
     вдвое — было 6,2 с, стало 3,0 с. Ширина полосы 300 px одинакова для
     заголовка, баннера и обеих панелей. */
  --sheen-cycle: 17.5s;
  /* Р-357 · Лента: 148 + 92 + 240 + 92 + 148 = 720 px. Наклон 42,5° — золотой
     угол 137,5° от вертикали. Ход луча 1400 px в каждую сторону от середины
     предмета. Шаг задержки 1,88 с собирает три предмета в один блик. */
  --sheen-band: 720px;
  --sheen-tilt: 42.5deg;
  --sheen-run: 1400px;
  --sheen-step: 1.88s;
}
.hero { min-height: 0; padding: var(--section-space) 0; }
.demo-game, .author { padding: var(--section-space) 0; }
.extra-guide, .position-lab { padding-block: var(--section-space); }

/* Пункт меню приводит секцию в одно место (круг v104). */
section[id] { scroll-margin-top: 96px; }

/* ======================= ПЕРВЫЙ ЭКРАН ============================== */

/* Р-243 · Материал первого экрана взят у порталов «Участия»: почти чёрная
   подложка, цветной кант и свечение вокруг него. Прежде панели были залиты
   средним синим на синем фоне — отсюда «плоско и мрачно». Изумруд здесь не
   случайный: это цвет тёмных полей доски, портала `Vote` и верного ответа
   в самом тесте. */
.discovery-hero {
  --discovery-motion: var(--change-motion);
  --disc-accent: #63E69A;
  --disc-panel: radial-gradient(circle at 50% 0, rgba(99, 230, 154, .13), transparent 44%),
                rgba(13, 27, 47, .86);
  --disc-panel-edge: color-mix(in srgb, var(--disc-accent) 46%, transparent);
  --disc-inset: rgba(8, 18, 32, .72);
  --disc-inset-edge: rgba(255, 255, 255, .13);
  /* Р-262 · Между шапкой меню и карточкой заголовка есть воздух. Секция
     начиналась на 64 px, а шапка высотой 69 px стоит поверх: верхние 5 px
     карточки уходили под её кант, и два канта срастались в один. */
  /* Р-295 · Воздух над заголовком убавлен с 27 до 15 px: карточка встаёт ближе
     к разделительной черте меню, и первый экран становится ниже на 12 px.
     Меньше брать нельзя — канты снова срастутся. */
  /* Р-307 · Воздух убавлен до 8 px, нижний отступ секции — до 28 px. Экран
     автора даёт 790 px под шапкой, и панели с доской обязаны влезать целиком.
     Восемь пикселей канты ещё держат врозь: у черты меню и у карточки разный
     цвет, и полоса фона между ними видна. */
  padding: 77px 0 28px;
  background:
    radial-gradient(circle at 50% 4%, rgba(99, 230, 154, .1), transparent 40%),
    radial-gradient(circle at 50% 62%, rgba(255, 210, 77, .04), transparent 46%),
    #0E1720;
}
/* Р-277 · Обёртка первого экрана шириной ровно с ряд колонок: 340 + 488 + 340
   и два зазора по 34. Прежде обёртка давала 1180 px, а ряд занимал 1236 px и
   вылезал за её края — карточка заголовка сидела внутри и оказывалась уже
   панелей под ней. Теперь оба предмета меряются одним числом. */
/* Р-308 · Ряд сужен: панели 322 px вместо 340, доска 476 вместо 488. Обёртка
   меряется тем же числом — 322 + 476 + 322 и два зазора по 34 дают 1188 px,
   и карточка заголовка встаёт ровно по ширине ряда под ней. */
.discovery-wrap { width: min(1188px, calc(100% - 40px)); max-width: none; }

/* ---- Р-216 · Заголовок и три факта — одна карточка, а не две ленты --
   Прежде шли подряд три полосы во всю ширину: заголовок, факты, золотой
   баннер. Заголовок и факты собраны в одну карточку с общим кантом:
   полос стало две, высота первого экрана убавилась. */
/* Р-244 · Карточка шапки шириной с ряд колонок под ней: было 1080 px при
   1208 px у ряда «панель · доска · панель», и верх выглядел уже низа.
   Перелив идёт по всей карточке, а не только по строке заголовка. */
/* Р-263 · Подложка карточки заголовка изумрудная. Графит круга v109 автор
   назвал мраком: тёмно-серое на тёмно-синем не даёт цвета, только тень. Изумруд
   на первом экране уже есть — тёмные поля доски, кант панелей, верный ответ, —
   и здесь он собирает верх экрана в один цвет с ними. Кант держит не одна
   волосяная линия: подложка сама светлее фона на две ступени. */
.discovery-head {
  position: relative;
  overflow: hidden;
  max-width: none;
  margin: 0 auto 12px;
  padding: 0;
  border: 1px solid rgba(99, 230, 154, .5);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0, rgba(99, 230, 154, .2), transparent 62%),
    linear-gradient(180deg, #21453F 0%, #163029 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 0 0 1px rgba(99, 230, 154, .12),
    0 16px 38px rgba(4, 12, 23, .46),
    0 0 28px rgba(99, 230, 154, .1);
  text-align: center;
}
.discovery-head::after {
  --sheen-tint: rgba(255, 226, 140, .42);
  z-index: 0;
}
.discovery-head h1, .discovery-facts { position: relative; z-index: 1 }

/* Р-217 · Заголовок в цвете сайта. Зелёно-синяя лента круга v104 снята:
   такого перехода нет больше нигде, и он читался как чужой. Карточка
   взяла индиговый сатин пломбы — тот же, что у карточки поверх доски. */
.discovery-head h1 {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 10px 40px 9px;
  border: 0;
  border-radius: 0;
  background: none;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 2.9vw, 2.7rem);
  font-weight: 680;
  letter-spacing: -.035em;
  line-height: 1.05;
  white-space: nowrap;
}
/* Р-296 · Темп световой полосы один на весь первый экран: заголовок и обе
   панели идут по 12 с. Прежде панели шли вдвое медленнее заголовка (36 с), и
   три полосы жили каждая своей жизнью. Пауза между проходами убавлена вдвое:
   было 12,2 с тишины на круге в 18 с, стало 6,2 с. Сам проход остался прежней
   длины — торопить свет автор запретил. */
/* Р-303 · Полоса одна на весь экран: один и тот же блик проходит по левой
   панели, баннеру и правой панели, а не живёт своей жизнью у каждого предмета.
   Р-357 · Блик перестал быть заливкой и стал предметом. Угол градиента живёт
   в прямоугольнике во всю высоту окна: числом он был верным, а на низком
   предмете от косой полосы виден кусок в 40 px — глаз читал его отвесом, и
   автор трижды сказал, что блик идёт вертикально. Теперь слой полос
   поворачивается `rotate`, и угол держится ровно, каким бы ни был рост
   предмета: на баннере 74 px и на панели 550 px он один и тот же.

   Числа по золотому сечению, φ = 1,618:
   ось полос — золотой угол 137,5° от вертикали, отчего наклон к вертикали
   выходит 42,5°, верх полосы правее низа;
   средняя полоса 240 px, боковые по 148 px (240 ÷ φ), обе равной ширины,
   разрывы между ними по 92 px (240 ÷ φ², малая часть сечения);
   вся лента — 720 px.

   Один блик собран задержками: панели и баннер стоят на расстоянии 430 px
   друг от друга, скорость 229 px/с, значит шаг задержки — 1,88 с. Свет
   загорается слева, потом в баннере, потом справа, как и шёл бы один луч. */
.discovery-head::after,
.discovery-brief::after,
.discovery-card::after,
.board-brand::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--sheen-band);
  height: 1400px;
  background-image: linear-gradient(90deg,
    transparent 0%,
    var(--sheen-tint, rgba(255, 255, 255, .2)) 10.28%,
    transparent 20.56%,
    transparent 33.33%,
    var(--sheen-tint, rgba(255, 255, 255, .2)) 50%,
    transparent 66.67%,
    transparent 79.44%,
    var(--sheen-tint, rgba(255, 255, 255, .2)) 89.72%,
    transparent 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: translate(-50%, -50%) rotate(var(--sheen-tilt)) translateX(calc(-1 * var(--sheen-run)));
  animation: sheen-pass var(--sheen-cycle) linear infinite;
  pointer-events: none;
}
/* Слой полос выходит за края предмета, поэтому сам предмет обязан обрезать
   лишнее по своей форме. */
.discovery-head,
.discovery-brief,
.discovery-card,
.board-brand { overflow: hidden; }
.discovery-brief::after { animation-delay: 0s }
.board-brand::before { animation-delay: var(--sheen-step) }
.discovery-card::after { animation-delay: calc(var(--sheen-step) * 2) }
@keyframes sheen-pass {
  0%, 30% { transform: translate(-50%, -50%) rotate(var(--sheen-tilt)) translateX(calc(-1 * var(--sheen-run))) }
  100%    { transform: translate(-50%, -50%) rotate(var(--sheen-tilt)) translateX(var(--sheen-run)) }
}

/* Р-263 · Черта между заголовком и фактами в цвет канта, а полоса фактов на
   ступень темнее заголовка. Прежде оба этажа были одного тона, и карточка
   читалась одним пятном с овалами внутри. */
.discovery-facts {
  display: grid;
  max-width: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid rgba(99, 230, 154, .42);
  border-radius: 0;
  background: rgba(9, 30, 26, .58);
  list-style: none;
}
.discovery-facts li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 7px 14px 8px;
  border: 0;
  border-radius: 0;
  background: none;
  clip-path: none;
  text-align: center;
}
.discovery-facts li + li { border-left: 1px solid rgba(99, 230, 154, .22); }
/* Р-226 · Плашки фактов голубые, а не золотые: золото на первом экране
   принадлежит имени игры и главному действию (С8). */
/* Р-297 · Три плашки набраны одинаково. Прежде правая была светлее двух
   левых: в одной строке выходило два способа набора, и синие плашки читались
   объёмнее плоского заголовка над ними. Взят вид правой — он и был верным. */
/* Р-278 · Плашки плоские. Объём у них спорил с плоским заголовком рядом: два
   способа рисовать в одном прямоугольнике. Блик по карточке остаётся — он
   признак жизни и стоит здесь по просьбе автора. */
.discovery-facts strong {
  display: table;
  margin: 0 auto;
  padding: 5px 15px;
  border: 1px solid rgba(87, 199, 255, .34);
  border-radius: 999px;
  background: rgba(8, 18, 32, .7);
  border-color: var(--spark-mark);
  /* Р-313 · Буквы в трёх плашках белые. Голубой `#CDEBFF` вместе со свечением
     вокруг плашки читался размытым — автор так и сказал. Голубым остаются кант
     и свет: цвет плашки называет предмет, а слова обязаны читаться. */
  color: #FFFFFF;
  /* Р-323 · Свет вокруг плашек снят, кант приглушён. Голубое свечение в
     16 px делало три плашки самым ярким предметом карточки: главный
     заголовок над ними набран плоским белым без обводок и в споре за
     внимание проигрывал. Форма овала осталась — она держит ряд из трёх, —
     а света у неё больше нет. */
  box-shadow: none;
  border-color: rgba(87, 199, 255, .3);
  font-size: .92rem;
  font-weight: 800;
}
.discovery-facts span {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: .84rem;
  font-weight: 650;
  line-height: 1.35;
}

/* ---- Р-220 · Золотой баннер над доской сохранён и сжат ---------------
   Автор просил оставить над доской золотой баннер с названием игры. В
   полном росте он вместе с шапкой съедал экран, поэтому здесь баннер
   идёт в росте надзаголовка: те же золото, кант и внутренняя рамка,
   высота 104 → 74 px. Полный рост остался в секции «34 хода». */
/* Р-256 · Баннер живёт в средней колонке и потому меряется её шириной, а не
   своей: доска и баннер всегда одной ширины, что бы ни случилось с сеткой. */
.discovery-brand {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-height: 66px;
  margin: 0 0 10px;
  padding: 8px 20px 7px;
  gap: 3px;
}
.discovery-brand .board-brand-name { font-size: clamp(1.6rem, 2.3vw, 2.12rem); }
.discovery-brand .board-brand-subtitle { font-size: clamp(.6rem, .76vw, .7rem); }
.discovery-brand::after { inset: 6px; border-radius: 10px; }

/* ---- Р-219 · Левая панель, доска и правая панель одной высоты -------
   Прежде панелям задавали 330 px при доске в 500 px, и под каждой
   висела пустота в треть их роста. Теперь высоту задаёт колонка доски,
   а панели тянутся за ней. */
.discovery-shell {
  display: grid;
  grid-template-columns: 322px 476px 322px;
  gap: 34px;
  justify-content: center;
  align-items: stretch;
}
/* Р-264 · При смене задачи растворяется только позиция: фигуры, лучи и
   подсветка полей хода. Рамка доски, поля, буквы с цифрами и метка очереди
   хода стоят на месте — меняется то, что вправду меняется. Прежде гасла вся
   доска целиком, и глазу казалось, что подменили инструмент, а не задачу.
   Список ходов гаснет по-прежнему: там меняется каждая строка. */
.discovery-board .pieces,
.discovery-board .rays,
.discovery-options { transition: opacity var(--change-motion) ease }
/* Р-281 · Подсветка полей хода переехала сюда из удалённого слоя круга v100:
   исходное поле синее, конечное оранжевое (С14). */
.discovery-board .sq.is-from { box-shadow: inset 0 0 0 5px var(--move-origin) }
.discovery-board .sq.is-to { box-shadow: inset 0 0 0 5px var(--move-destination) }
.discovery-board .sq.is-from,
.discovery-board .sq.is-to { transition: box-shadow var(--change-motion) ease }
.discovery-shell.is-changing .discovery-board .pieces,
.discovery-shell.is-changing .discovery-board .rays,
.discovery-shell.is-changing .discovery-options { opacity: 0 }
.discovery-shell.is-changing .discovery-board .sq.is-from,
.discovery-shell.is-changing .discovery-board .sq.is-to { box-shadow: none }

/* Р-278 · Тот же блик, слабее, идёт по обеим панелям: наверху одна живая
   поверхность, а не полированная плита между двумя матовыми. */
/* Р-296 · Темп общий с заголовком — 12 с. */
.discovery-brief,
.discovery-card {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 322px;
  height: auto;
  min-height: 0;
  align-self: stretch;
  padding: 17px 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  background: var(--disc-panel);
  box-shadow:
    inset 4px 0 0 0 var(--disc-accent),
    0 14px 30px rgba(5, 11, 22, .34);
  animation: discovery-panel-breath 7s var(--ease) infinite both;
}
.discovery-brief::after,
.discovery-card::after {
  --sheen-tint: rgba(214, 255, 232, .16);
  z-index: 0;
}
/* Р-303 · Свет по золотому баннеру идёт той же полосой и в том же темпе.
   Прежде у него был свой круг в 14 с — четвёртая скорость на экране. */
.board-brand::before { --sheen-tint: rgba(255, 255, 255, .34) }
.discovery-brief > *,
.discovery-card > * { position: relative; z-index: 1 }

/* Один медленный вдох на обе панели разом: экран дышит как одно целое, а не
   мигает двумя предметами. Тот же приём, что у порталов «Участия» (Р-199). */
@keyframes discovery-panel-breath {
  0%, 100% {
    border-color: rgba(255, 255, 255, .12);
    box-shadow: inset 4px 0 0 0 var(--disc-accent), 0 14px 30px rgba(5, 11, 22, .34);
  }
  50% {
    border-color: color-mix(in srgb, var(--disc-accent) 44%, transparent);
    box-shadow:
      inset 4px 0 0 0 var(--disc-accent),
      0 16px 36px rgba(5, 11, 22, .38),
      0 0 22px color-mix(in srgb, var(--disc-accent) 24%, transparent);
  }
}

/* ------------------------- левая панель ---------------------------- */
/* Р-236 · Панель ростом с доску, и свободное место раскладывается поровну
   между блоками. Прежде оно копилось одной дырой у нижнего края. */
/* Р-309 · Свободное место левой панели уходит внутрь пунктов задания, а не
   копится дырой перед блоком открытий. Прежде `space-between` собирал остаток
   в один зазор в 43 px, и блок открытий стоял оторванным от условия. Приём тот
   же, что в правой панели (Р-298): промежутки закреплены, растут строки. */
.discovery-brief { display: flex; flex-direction: column; justify-content: flex-start; gap: 12px; }
.discovery-brief-copy { display: grid; grid-template-rows: auto auto 1fr; gap: 8px; flex: 1 1 auto; min-height: 0; }
.discovery-brief-copy br { display: none }
/* Р-245 · Задание из четырёх коротких строк вместо одного абзаца: гость
   ориентируется быстрее, а слово «тест» задаёт формат — у задачи есть верный
   ответ. */
/* Р-251 · Слово «Тест» стоит на плашке: одноцветная строка отдавала скукой. */
.discovery-brief-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font: 850 .72rem/1.2 var(--font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
}
/* Р-279 · Слово «Тест» белое. Изумруд стоял в сорока пикселях от изумрудного
   канта панели, и два одинаковых цвета рядом спорили. Золото занято правилами
   (С8), голубой — термином `Spark Move` (Р-241): ярлыку остаётся белый. */
.discovery-brief-eyebrow b {
  padding: 4px 11px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 999px;
  background: rgba(8, 18, 32, .7);
  color: #FFFFFF;
  font-weight: 850;
}
.discovery-brief-eyebrow span { color: rgba(255, 255, 255, .72); font-weight: 800 }
.discovery-brief-title {
  margin: 0 0 4px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.14rem;
  font-weight: 700;
  line-height: 1.28;
}
.discovery-brief-list {
  display: grid;
  grid-auto-rows: 1fr;
  align-content: stretch;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Р-256 · Внутренние поля списка и строк открытий убавлены на 24 px в сумме:
   ровно на столько левая панель была выше колонки доски и свисала под её
   нижний кант. Резать содержание не пришлось. */
.discovery-brief-list li {
  position: relative;
  display: flex;
  align-items: center;
  padding: 7px 11px 7px 28px;
  border: 1px solid var(--disc-inset-edge);
  border-radius: 11px;
  background: var(--disc-inset);
  color: var(--text);
  font-size: .93rem;
  font-weight: 600;
  line-height: 1.4;
}
.discovery-brief-list li::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--spark-mark);
  transform: translateY(-50%) rotate(45deg);
}
.discovery-brief-line { display: block; width: 100% }
/* Р-257 · Ромб у всех трёх пунктов один. Изумрудный ромб у третьего пункта
   снят: три строки — одна мысль, и делить её цветом значит объявить третью
   строку другим предметом. */

.discovery-brief-foot {
  padding: 10px 12px;
  border: 1px solid var(--disc-inset-edge);
  border-radius: 12px;
  background: var(--disc-inset);
}
/* Р-310 · Заголовок блока разведён по цветам и по строкам. Имя собственное
   `Spark Moves` — золото, как всюду на сайте (Р-241); «Открытые типы» — белое.
   Голубой отсюда снят: он значит термин `Spark Move`, а не слово «открытые».
   Имя стоит отдельной строкой, поэтому строка перестала переноситься
   посередине названия. */
.discovery-step {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 9px;
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.discovery-step > span { line-height: 1.3 }
.discovery-step-label { color: #FFFFFF }
.discovery-step-name { display: block; color: var(--gold) }
.discovery-step b { color: var(--text); font-size: .82rem; letter-spacing: .04em; white-space: nowrap }
/* Р-227 · Список открытий. Прежде здесь стояли строка «Задача N из 4» и
   безымянная полоса прогресса: они говорили, сколько шагов пройдено, но ничего
   не давали. Список говорит то же самое и вдобавок выдаёт имя механики в тот
   миг, когда гость её нашёл. Имена до ответа закрыты: иначе награда за верный
   выбор обесценивается. */
.discovery-found {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.discovery-found li {
  display: grid;
  grid-template-columns: 14px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 26px;
  padding: 0 2px;
}
.discovery-found-mark { color: rgba(142, 197, 255, .38); font-size: .7rem; line-height: 1 }
.discovery-found-name {
  color: var(--text);
  font-family: var(--font-display);
  font-size: .98rem;
  font-weight: 700;
}
.discovery-found li:not(.is-open) .discovery-found-name::before {
  content: "";
  display: block;
  width: 108px;
  height: 2px;
  border-radius: 2px;
  background: rgba(142, 197, 255, .26);
}
.discovery-found li.is-open .discovery-found-mark { color: #63E69A }
.discovery-found li.is-current .discovery-found-mark {
  color: var(--spark-mark);
  animation: discovery-found-wait 2.4s ease-in-out infinite;
}
@keyframes discovery-found-wait { 0%,100% { opacity: .45 } 50% { opacity: 1 } }
/* Р-260 · Вспышка разгорается, держится и только потом гаснет. Прежде она
   гасла с первого мига за 1,1 с, и заметить её удавалось лишь тому, кто уже
   смотрел на список. Теперь 0,35 с на разгорание, 1,2 с на удержание, 0,9 с на
   угасание — 2,45 с всего, и окно итога выходит на 1,55 с, посреди удержания. */
.discovery-found li.is-lit { animation: discovery-found-lit 2450ms var(--ease) 1 }
@keyframes discovery-found-lit {
  0%   { background: transparent; box-shadow: 0 0 0 1px transparent }
  14%  { background: rgba(99, 230, 154, .3); box-shadow: 0 0 0 1px rgba(99, 230, 154, .55), 0 0 16px rgba(99, 230, 154, .3) }
  63%  { background: rgba(99, 230, 154, .3); box-shadow: 0 0 0 1px rgba(99, 230, 154, .55), 0 0 16px rgba(99, 230, 154, .3) }
  100% { background: transparent; box-shadow: 0 0 0 1px transparent }
}
.discovery-found li { border-radius: 8px }

/* ------------------------- правая панель --------------------------- */
/* Р-342 · У левой панели та же шапка, что у правой: тот же шрифт, тот же
   кегль, белые буквы и волосяная черта под ними. Прежде строка «Тест из 4
   задач» шла мелкими прописными и от списка под собой отделена ничем не была
   — автор просил её выделить. Прописные и разрядка сняты: в правой панели их
   нет, а две шапки обязаны быть одной. */
.discovery-brief-eyebrow {
  display: block;
  margin: 0 0 8px;
  padding: 0 0 9px;
  border-bottom: 1px solid var(--disc-panel-edge);
  color: var(--text);
  font: 700 1.14rem/1.25 var(--font-display);
  letter-spacing: normal;
  text-transform: none;
}

.discovery-card { display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; }
/* Р-341 · Пройденный тест назван в заголовке правой панели. Ромб изумрудный:
   этим цветом на первом экране помечено «открыто». */
.discovery-card h2.is-done { display: flex; align-items: center; gap: 9px }
.discovery-done-mark { color: #63E69A; font-size: .8em; font-style: normal }
.discovery-card h2 {
  display: block;
  margin: 0 0 8px;
  padding: 0 0 9px;
  border: 0;
  border-bottom: 1px solid var(--disc-panel-edge);
  border-radius: 0;
  background: none;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.14rem;
  font-weight: 700;
  line-height: 1.25;
}
/* Р-298 · Свободное место панели уходит внутрь пунктов, а не в промежутки
   между ними. Прежде (Р-272) высота была твёрдой в 88 px, а остаток копился
   дырами по 30–40 px: три пункта висели в пустоте. Зазор закреплён на 12 px,
   пункт растёт от 88 px и выше. */
/* Р-311 · Пункты выбора убавлены с 88 до 76 px, зазор с 12 до 10. Панель обязана
   влезать в экран автора целиком, и три пункта — самое дорогое место в ней. */
/* Р-324 · Свободная высота панели уходит в рост пунктов, а не в промежутки.
   Потолок в 84 px оставлял остаток между пунктами: `space-between` разводил
   три плашки по краям, и между ними стояли дыры. Строки взяли `1fr` — весь
   остаток забирают сами пункты, зазор закреплён на 10 px. */
.discovery-options { display: grid; grid-template-rows: repeat(3, minmax(76px, 1fr)); align-content: stretch; gap: 10px; flex: 1 1 auto; min-height: 0 }
/* Р-246 · У пунктов выбора появился объём: верхний блик, нижняя внутренняя
   тень и падающая тень. Плоские плашки автор назвал примитивными. */
.discovery-option {
  display: grid;
  grid-template-columns: 19px 1fr;
  align-items: center;
  gap: 11px;
  min-height: 76px;
  padding: 9px 13px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  background: linear-gradient(180deg, #16283A 0%, #0E1A28 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 -10px 18px rgba(0, 0, 0, .3),
    0 6px 14px rgba(0, 0, 0, .34);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.03rem;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* Р-325 · Оживление при наведении принадлежит только доступному пункту.
   Прежде подъём и светлый кант работали и на заблокированной плашке: гость
   вёл по ней мышью, плашка отзывалась, а нажатие ничего не давало. */
.discovery-option:not(:has(input:disabled)):hover {
  border-color: color-mix(in srgb, var(--disc-accent) 60%, transparent);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -10px 18px rgba(0, 0, 0, .3),
    0 10px 20px rgba(0, 0, 0, .4);
}
/* Р-218 · Кружок выбора — капля: свет сверху слева, тень снизу справа,
   без обводки цветом букв. Не выбрана — голубая, выбрана — золотая. */
.discovery-option input {
  appearance: none;
  width: 17px;
  height: 17px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 31% 27%, #fff 0 9%, var(--ray-bright) 12%, var(--ray) 42%, var(--ray-dim) 76%);
  box-shadow: inset -2px -3px 4px rgba(5,16,34,.35), 0 2px 5px rgba(0,0,0,.42);
}
.discovery-option input:checked {
  background: radial-gradient(circle at 31% 27%, var(--gold-bright) 0 9%, var(--gold-light) 12%, var(--gold) 43%, var(--gold-deep) 78%);
  box-shadow: inset -2px -3px 4px rgba(91,57,0,.3), 0 0 0 2px rgba(255,210,77,.22), 0 3px 7px rgba(0,0,0,.46);
}
.discovery-option:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px }
.discovery-option:has(input:checked) {
  border-color: var(--gold);
  background: linear-gradient(180deg, #2A3A46 0%, #1B2530 100%);
  color: var(--gold-light);
}
/* Р-225 · Разбор ответа виден в списке. Оба правила разбора лежали слабее
   правила выбранного пункта и до экрана не доходили: верный и обычный ход
   после ответа выглядели одинаково золотыми. Отбор усилен, и разбор снова
   работает — верный ход зелёный, обычный шахматный ход в цвете
   предупреждения. */
/* Р-280 · Верный ответ помечен голубым кантом и полосой слева, заливки нет.
   Изумрудная заливка на 300×104 давала слишком много цвета одним пятном.
   Голубой на сайте значит «это из новых правил» (Р-241), а верный ответ здесь
   всегда Spark Move: цвет называет не «правильно», а «вот оно». Изумруд
   остался списку открытий, где значит «открыто». */
.discovery-options .discovery-option.is-right {
  border-color: var(--spark-mark);
  background: linear-gradient(180deg, #16283A 0%, #0E1A28 100%);
  box-shadow:
    inset 5px 0 0 0 var(--spark-mark),
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 18px rgba(87,199,255,.22);
  color: var(--text);
}
/* Р-276 · Выбранный шахматный ход гаснет и уходит в серый: промах видно и в
   списке, а не только в окне. */
.discovery-options .discovery-option.is-ordinary {
  border-color: rgba(255, 255, 255, .26);
  background: linear-gradient(180deg, #232A33 0%, #171C23 100%);
  box-shadow: inset 5px 0 0 0 rgba(255, 255, 255, .3);
  color: rgba(255, 255, 255, .6);
}
.discovery-options .discovery-option.is-ordinary input:checked {
  background: radial-gradient(circle at 31% 27%, #E7EDF5 0 9%, #C2CCD8 12%, #8D9AA9 43%, #5C6773 78%);
  box-shadow: inset -2px -3px 4px rgba(20,26,34,.35), 0 3px 7px rgba(0,0,0,.46);
}
/* Р-326 · Заблокированный пункт виден заблокированным. После верного ответа
   скрипт гасит все три переключателя, но на экране это было сказано только у
   двух: у верного ходa (голубой кант) и у испробованного (серый). Третий
   пункт стоял в исходном виде и звал нажать себя. Теперь у него плоская
   плашка без объёма, буквы и капля приглушены, курсор обычный: три пункта
   разом объявляют, что задача закрыта. */
.discovery-option:has(input:disabled) { cursor: default }
.discovery-option:has(input:disabled):not(.is-right):not(.is-ordinary) {
  border-color: rgba(255, 255, 255, .07);
  background: linear-gradient(180deg, #131B25 0%, #0B1119 100%);
  box-shadow: none;
  color: rgba(255, 255, 255, .38);
}
.discovery-option:has(input:disabled):not(.is-right):not(.is-ordinary) input {
  background: radial-gradient(circle at 31% 27%, #6E7A88 0 9%, #56616E 12%, #3C454F 42%, #2A323B 76%);
  box-shadow: none;
}
.discovery-loading { margin: 0; color: var(--text); font-size: .9rem }
/* Р-224 · Обе панели устроены одинаково: содержание сверху, якорь у нижнего
   края. Слева якорь — счётчик задач, справа — строка подсказки и кнопка
   перехода. Пустота в панелях одна и та же, а не разная. */
/* Р-314 · Строка разбора ответа перестала тащить чужой нижний отступ. Правило
   `.panel p` давало ей 16 px снизу и было сильнее собственного `margin: 0`:
   под строкой копилась пустота, которую автор и увидел между пунктами теста и
   кнопками. Отбор усилен именем панели. */
/* Р-329 · Строка перестала держать место под подсказку: подсказка ушла в
   окно над доской. Строка осталась одному случаю — сообщению о том, что
   модуль правил не поднялся. Пустая она высоты не занимает. */
.discovery-card .discovery-feedback {
  min-height: 0;
  margin: 0;
  color: var(--text);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.4;
}
/* Р-356 · Тон `hint` строки разбора снят вместе с подсказкой: она ушла в
   окно над доской (Р-329), и этот тон строке больше никто не ставит. */
/* Р-248 · Место кнопки перехода занято с самого начала. Прежде она возникала
   после закрытия окна, и весь список ходов рывком уезжал вверх. */
/* Р-299 · Внизу панели две кнопки в столбик, одной ширины и одной высоты, с
   зазором 10 px: подсказка сверху, переход снизу. Обе стоят всегда, поэтому
   низ панели закреплён и при смене задачи стоит на месте.
   Цвета разведены по роли: переход — золотая кнопка, главное действие экрана
   (С8); подсказка — голубая, цвет инструмента, которым набраны ромбы
   надзаголовков. Прежде подсказка была почти в цвет панели и терялась. */
/* Р-312 · Подсказка стала залитой кнопкой. Прозрачная голубая плёнка круга
   v113 (Р-299) на тёмной панели читалась тёмным на тёмном — за это автор
   ругал дважды. Теперь заливка светлее панели на несколько ступеней, буквы
   белые, кант светло-голубой: контраст букв к фону кнопки выше семи. Голубой
   род цвета сохранён — подсказка остаётся инструментом, золото остаётся
   кнопке перехода, главному действию экрана (С8). */
.discovery-help {
  width: 100%;
  min-height: 44px;
  margin: 0;
  border: 1px solid #7FD6FF;
  border-radius: 11px;
  background: linear-gradient(180deg, #4EB6F2 0%, #2A7FC4 52%, #1B5E9B 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    0 4px 0 #123F69,
    0 8px 16px rgba(0, 0, 0, .28);
  color: #FFFFFF;
  font-size: .94rem;
  font-weight: 800;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .38);
}
.discovery-help:hover:enabled,
.discovery-help:focus-visible:enabled {
  border-color: #A9E4FF;
  background: linear-gradient(180deg, #63C4F8 0%, #3690D4 52%, #2470AF 100%);
  color: #FFFFFF;
}
.discovery-help:active:enabled { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 2px 0 #123F69, 0 4px 9px rgba(0,0,0,.24) }
.discovery-help:disabled { opacity: .4; cursor: default }
.discovery-next { width: 100%; min-height: 44px; margin: 0 }
/* Р-330 · Кольцо задач полосками. Четыре полоски — четыре задачи; решённая
   горит изумрудом, как строка «открыто» в списке слева, текущая — золотом,
   цветом главного действия экрана, которое её и двигает (С8). Полоски стоят
   под самой кнопкой перехода: причина и следствие рядом. */
.discovery-ring {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}
.discovery-ring li {
  height: 4px;
  border-radius: 2px;
  background: rgba(142, 197, 255, .22);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.discovery-ring li.is-done { background: rgba(99, 230, 154, .58) }
/* Р-339 · Текущая полоска белая. Золотой она стояла прямо под золотой
   кнопкой и читалась её дублем. Белый на сайте свободен от значений и потому
   говорит просто «вы здесь»; изумруд остаётся решённой задаче, голубой
   волосок — нетронутой.
   Р-359 · Одного цвета мало: четыре полоски одного роста, и белая среди
   изумрудных читалась как «ещё одна решённая» — автор принял её за сбой счёта.
   Теперь над текущей стоит каретка 7 px, сама полоска выросла с 4 до 6 px и
   получила светлый ободок. Треугольник значит «вы здесь» однозначно и стоит
   всего 5 px высоты — первый экран кончается на 789 px из 790. */
.discovery-ring { padding-top: 8px }
.discovery-ring li.is-current {
  height: 6px;
  background: #F4FAFF;
  box-shadow: 0 0 0 1px rgba(244, 250, 255, .45), 0 0 10px rgba(244, 250, 255, .4);
}
.discovery-ring li.is-current::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 3px;
  border: 4px solid transparent;
  border-top: 5px solid #F4FAFF;
  border-bottom: 0;
  transform: translateX(-50%);
}
.discovery-ring li { position: relative }
/* Р-340 · Полоски кольца стали кнопками: с них гость идёт к любой задаче.
   Это плата за то, что золотая кнопка после четвёртого открытия уходит вниз
   по сайту — возможность вернуться к позиции теста осталась. */
.discovery-ring li { padding: 0 }
.discovery-ring button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: none;
  cursor: pointer;
}
.discovery-ring li:hover { background: rgba(142, 197, 255, .5) }
.discovery-ring li.is-done:hover { background: rgba(99, 230, 154, .8) }
.discovery-ring li.is-current:hover { background: #FFFFFF }
.discovery-ring button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px }
/* Зазор между кнопками — 10 px, он же общий зазор панели. */
.discovery-help + .discovery-next { margin-top: 0 }

.discovery-game-name { color: var(--gold); font-weight: 850; white-space: nowrap }
.discovery-spark-name { color: var(--spark-mark); font-weight: 850; white-space: nowrap }

/* ------------------------- доска и метка фазы ----------------------- */
/* Р-269 · Завеса окна лежит на всей средней колонке — вместе со слитком. */
.discovery-board-column { position: relative }
.discovery-board-wrap { position: relative; margin-top: 0 }
/* Р-287 · Доска в общем виде сайта: внешний пустой контур, за ним контур той
   же толщины с разметкой, и в нём поле. Так устроена доска «Партии», она и
   принята за основной вид. Ряд колонок остаётся прежним: контур занимает свои
   18 px внутри 488 px, поле убавляется на 36 px. */
.discovery-board-frame {
  box-sizing: border-box;
  width: 100%;
  padding: 18px;
  border: 1px solid var(--border-light);
  border-radius: calc(var(--radius) * 1.6);
  background: rgba(10, 14, 18, .74);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .36);
}
/* Р-237 · Метка очереди хода стоит внутри доски, в левом верхнем углу.
   Р-287 · Метка сдвинута на толщину внешнего контура.
   Р-337 · Вид, размер и место метки заданы одним правилом на весь сайт —
   `.board-phase` в конце `site.css`. Здесь остаётся только слой: окно итога
   лежит выше метки, а метка выше доски. */
.discovery-phase { z-index: 7 }

/* -------------- карточка итога поверх доски — вид пломбы ------------ */
.discovery-result {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(9, 16, 27, .58);
  backdrop-filter: blur(2.5px);
  opacity: 0;
  transform: scale(.985);
  transition: opacity var(--change-motion) ease, transform var(--change-motion) ease;
}
.discovery-result[hidden] { display: none }
.discovery-result.is-visible { opacity: 1; transform: scale(1) }
/* Р-253 · Окно получило свет, а не узор. Автор верно заметил, что ромбовая
   текстура появилась бы на сайте впервые и только здесь. Взяты приёмы, которые
   на сайте уже есть: верхний радиальный свет порталов и внутренняя белая
   волосяная линия. */
.discovery-result-box {
  position: relative;
  width: min(100%, 460px);
  padding: 22px 23px;
  border: 1px solid var(--seal-edge);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 226, 140, .16), transparent 62%),
    var(--seal-face);
  box-shadow: var(--seal-lift), inset 0 0 0 1px rgba(255, 255, 255, .07);
  color: var(--seal-text);
  text-align: center;
}
/* Р-238 · Состояние показывает надстрочная метка, а заголовок во всех трёх
   окнах остаётся белым: вид пломбы на сайте один (Р-159), и красить заголовок
   в три разных цвета значило бы развести его на три пломбы. */
/* Р-247 · Метка состояния стоит на плашке, а не висит строкой в воздухе.
   Кант плашки и есть цвет состояния; заголовок во всех окнах белый (Р-159).
   Оранжевый снят: он спорил со всей страницей. «Шахматный ход» помечен белым
   — голубой на сайте означает «это из новых правил», и здесь смысл обратный. */
/* Р-265 · Похвала крупнее пояснения. Прежде «Верно» шло в 0,7 rem, а строка под
   ним в 1,45 rem: за успех гость получал самую мелкую надпись в окне. Теперь
   метка состояния — главное слово окна, кант толще и свет сильнее. */
/* Р-327 · Три метки окна собраны в один предмет: залитая плашка, тёмные
   буквы, один рост и одно поле. Прежде «Верно» было тёмным на тёмном с
   зелёным кантом, «Мимо» — бледной серой плёнкой, «Тест пройден» — светлым
   изумрудом, и три окна первого экрана говорили тремя разными способами.
   Цвет плашки называет исход, буквы на ней читаются всегда: изумруд —
   открытие, белый свет — обычный шахматный ход (Р-247), голубой — подсказка,
   цвет инструмента (Р-312). Золото в окне остаётся кнопке (С8). */
.discovery-result-eyebrow {
  display: inline-block;
  margin: 0 0 12px;
  padding: 9px 22px;
  border: 0;
  border-radius: 999px;
  background: #F4FAFF;
  color: #0E1826;
  /* Тёмный волосок по краю и тень под плашкой: на индиговом сатине окна
     светлая метка без края читалась плёнкой, а не предметом. */
  box-shadow: inset 0 0 0 2px rgba(6, 14, 26, .3), 0 8px 20px rgba(4, 10, 20, .5);
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.discovery-result-eyebrow:empty { display: none }
.discovery-result-eyebrow[data-tone="right"] {
  background: #63E69A;
  color: #06281A;
  box-shadow: inset 0 0 0 2px rgba(6, 14, 26, .3), 0 8px 20px rgba(4, 10, 20, .5), 0 0 26px rgba(99, 230, 154, .34);
}
/* Р-300 · «Мимо» — светлое пятно в тёмном окне: промах читается мгновенно.
   Р-327 · Плёнка `#E8EDF3` выцветала на индиговом сатине окна — автор назвал
   её бледной. Взят чистый свет сайта `#F4FAFF`, буквы почти чёрные, рост
   такой же, как у «Верно»: приглушать промах поводов нет. */
/* Р-338 · «Мимо» согрето жжёной умброй.
   Р-358 · Умбра оказалась чужой: коричневого на сайте больше нигде нет, и
   автор назвал её выбивающейся. Взят сиреневый — он в палитре уже стоит: им
   помечен активатор в «Партии» и третий факт «Автора». Заливка `#8B6CFF`,
   буквы `#140A2E`, кант вдвое толще прежнего — 2 px `#C6B4FF`. Тёмные буквы
   на сиреневом дают контраст около семи, и плашка читается предметом. */
.discovery-result-eyebrow[data-tone="ordinary"] {
  background: #8B6CFF;
  border: 2px solid #C6B4FF;
  color: #140A2E;
  box-shadow: 0 8px 20px rgba(4, 10, 20, .5), 0 0 26px rgba(139, 108, 255, .3);
}
/* Р-301 · «Тест пройден» — светлый изумруд без золотого канта. Золото в окне
   остаётся одной кнопке, а изумруд здесь на месте: им же в списке слева
   помечено «открыто», и тест как раз про открытия. */
.discovery-result-eyebrow[data-tone="done"] {
  background: #9BF3C4;
  color: #0E2A1E;
  box-shadow: inset 0 0 0 2px rgba(6, 14, 26, .3), 0 8px 20px rgba(4, 10, 20, .5), 0 0 26px rgba(99, 230, 154, .3);
}
/* Р-328 · Подсказка выходит окном над доской, поэтому у окна появилась
   четвёртая метка. Голубой — цвет инструмента: им набрана сама кнопка
   подсказки (Р-312) и ромбы надзаголовков. */
.discovery-result-eyebrow[data-tone="tip"] {
  background: #7FD6FF;
  color: #06202E;
  box-shadow: inset 0 0 0 2px rgba(6, 14, 26, .3), 0 8px 20px rgba(4, 10, 20, .5), 0 0 26px rgba(87, 199, 255, .3);
}
.discovery-result-box strong:empty { display: none }
.discovery-result-box strong {
  display: block;
  color: var(--seal-text);
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.25;
}
/* Р-241 · Имена в окнах: игра и её число — золотом, термин — голубым. */
.discovery-result-box .term-game { color: var(--gold); font-weight: 800 }
.discovery-result-box .term-spark { color: var(--spark-mark); font-weight: 800 }
.discovery-result-box p { margin: 8px 0 0; color: var(--seal-text-dim); font-size: .95rem; font-weight: 600; line-height: 1.45 }
/* Р-269 · Кнопка окна стоит по низу и сужена до ширины слов: во всю ширину
   окна она спорила со слитком количеством золота. */
.discovery-result-actions {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
}
.discovery-result-actions > .btn { flex: 0 0 auto }
/* Р-286 · Правила второй кнопки окна сняты вместе с самой кнопкой: в окне
   осталось одно действие. */
.discovery-result-box .btn.primary {
  overflow: visible;
  width: auto;
  min-width: 0;
  padding-inline: 26px;
  white-space: nowrap;
  min-height: 43px;
  margin-top: 0;
  border-color: var(--seal-action-edge);
  background: var(--seal-action-face);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -8px 14px rgba(140, 90, 0, .26),
    0 8px 18px rgba(0, 0, 0, .38);
  color: var(--seal-action-text);
  font-size: 1.02rem;
  font-weight: 800;
}
.discovery-result.is-finish .discovery-result-box { padding: 22px 23px }
/* Р-270 · Красный крестик снят: он молчал о том, что сделает. Его работу
   взяла подписанная кнопка «Смотреть доску». Красного на сайте больше нет. */
/* Р-232 · Указатель вниз один. Прежде их выходило три: два шеврона этой
   метки и стрелка `↓` из старого правила site.css, которое здесь и гасится. */
.discovery-result .discovery-result-box .btn::after { content: none }
/* Р-266 · Кнопка итога сложена столбиком: слово по центру, под ним указатель.
   Прежде кнопка была строкой — слова прижимались влево, а знак вставал по
   середине, и подпись со знаком расходились. Указатель широкий и плоский, как
   у полосы загрузки: треугольник основанием вверх, углом вниз. Ширина
   основания — 0,382 от ширины кнопки, меньшая часть золотого сечения. */
.discovery-result.is-finish .discovery-result-box .btn.primary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding-block: 13px 11px;
}

/* ====================== ПРАКТИКА · АНАЛИЗ ========================== */
/* Плавная смена примера вместо рывка (круг v104). */
.position-lab .position-lab-board,
.position-lab .lab-analysis-score,
.position-lab .lab-analysis-io { transition: opacity var(--change-motion) ease }
.position-lab.is-analysis-switching .position-lab-board,
.position-lab.is-analysis-switching .lab-analysis-score,
.position-lab.is-analysis-switching .lab-analysis-io { opacity: 0 }
/* Правая панель кончается там же, где ряд кнопок под доской: высоту
   меряет скрипт и кладёт в --analysis-panel-height (круг v104). */
.position-lab[data-active-mode="analysis"] .position-lab-panel {
  box-sizing: border-box;
  height: var(--analysis-panel-height, 650px);
  min-height: var(--analysis-panel-height, 650px);
}
#lab-analysis-pane:not([hidden]) { height: 100%; grid-template-rows: 210px minmax(0, 1fr) }
#lab-analysis-pane .lab-analysis-workspace,
#lab-analysis-pane .lab-analysis-score,
#lab-analysis-pane .lab-example-list { height: 100%; min-height: 0; max-height: none }
#lab-analysis-pane .lab-analysis-workspace { grid-template-columns: minmax(250px, 1.45fr) minmax(280px, 1fr) }
#lab-analysis-pane .lab-score-head,
#lab-analysis-pane .lab-score-row { grid-template-columns: 34px minmax(100px, 1fr) minmax(100px, 1fr) }
#lab-analysis-pane .lab-score-head span,
#lab-analysis-pane .lab-score-row > span { padding-inline: 6px }

/* =========================== УЗКИЙ ЭКРАН =========================== */
@media (max-width: 1160px) {
  .discovery-shell { grid-template-columns: 322px minmax(360px, 476px); gap: 26px }
  .discovery-card { grid-column: 1 / -1; width: 476px; max-width: 100%; height: auto; justify-self: center }
}
@media (max-width: 640px) {
  :root { --section-space: clamp(48px, 6vh, 68px) }
  section[id] { scroll-margin-top: 126px }
  .discovery-hero { padding: 108px 0 44px }
  .discovery-head h1 { padding-inline: 22px; font-size: clamp(1.85rem, 8.4vw, 2.4rem); white-space: normal }
  .discovery-facts { grid-template-columns: 1fr }
  .discovery-facts li + li { border-left: 0; border-top: 1px solid rgba(142,197,255,.22) }
  .discovery-shell { grid-template-columns: 1fr }
  .discovery-brief, .discovery-card { width: 100%; height: auto; min-height: 0 }
  .discovery-result { padding: 12px }
  .position-lab[data-active-mode="analysis"] .position-lab-panel { height: auto; min-height: 0 }
  #lab-analysis-pane:not([hidden]) { display: block; height: auto }
  #lab-analysis-pane .lab-analysis-workspace,
  #lab-analysis-pane .lab-analysis-score,
  #lab-analysis-pane .lab-example-list { height: auto; min-height: 220px; max-height: 330px }
}
@media (max-width: 620px) {
  #lab-analysis-pane .lab-analysis-workspace { grid-template-columns: 1fr }
}
@media (prefers-reduced-motion: reduce) {
  .discovery-head::after,
  .discovery-brief::after,
  .discovery-card::after,
  .board-brand::before { display: none; animation: none }
  .discovery-result,
  .position-lab .position-lab-board,
  .position-lab .lab-analysis-score,
  .position-lab .lab-analysis-io { transition: none }
}

/* ===================== ШАПКА САЙТА ================================= */
/* Р-255 · Лозунг звучал тише пунктов меню, хотя он и есть обещание проекта.
   Ступень крупнее, начертание плотнее, ромб между словами — голубой по общему
   правилу ромбов (С26). */
.top .brand-slogan {
  color: var(--gold);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .12em;
}
.top .brand-slogan i { color: var(--spark-mark); font-size: .58rem }

/* ==================================================================== v118
   Practice · наборы задач.

   Р-368 · Панель задач сузилась. Прежняя ширина 560…700 px принадлежит
   редактору и разбору: там живёт строка FEN и список примеров. У задачи в
   панели стоит одна нотация, и лишние 260 px читались пустотой. Новая мера —
   500 px — та же мера, что у колонки доски: в неё входит верхняя лента
   «Tactical puzzle · Puzzle 11 of 11 · Stage 4 of 4» и два органа управления
   в ряд. Пара стоит по середине секции, доска и панель равны по ширине.
   ==================================================================== */
.position-lab[data-active-mode="puzzle"] .position-lab-shell {
  grid-template-columns: minmax(460px, 500px) 500px;
  justify-content: center;
}

/* Пане́ль задачи — колонка: верхняя часть растёт сверху, органы управления и
   полоски набора стоят внизу и не двигаются при смене задачи (Р-335). */
/* Панель задачи кончается там же, где ряд кнопок под доской, — тем же
   замером, что и панель разбора (круг v104). Прежняя мера 650 px опускала её
   на 60 px ниже доски. */
.position-lab[data-active-mode="puzzle"] .position-lab-panel {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: var(--analysis-panel-height, 650px);
  min-height: var(--analysis-panel-height, 650px);
}
/* Отбор с `:not([hidden])` обязателен: правило по одному `id` сильнее
   служебного `[hidden]`, и скрытая панель задачи осталась бы на экране рядом
   с редактором. Тот же приём стоит у панели разбора. */
#lab-puzzle-pane:not([hidden]) { display: flex; flex-direction: column; flex: 1; min-height: 0 }

/* Нотация задачи растёт и сжимается сама — правило правлено на месте, в
   `site.css`, у отбора `.position-lab-panel:has(#lab-puzzle-pane…)`. */

/* Верхняя лента задачи. Имя раздела золотом, счёт задачи белым, этап голубым.
   Пустое слово об этапе места не занимает: у набора Normal этап один. */
.lab-task-meta span:nth-child(2) { margin-left: auto; color: #FFFFFF }
.lab-task-meta span:empty { display: none }

/* Р-369 · Переключатель набора. Голубой на сайте значит «инструмент»
   (Р-312, Р-328), и выбранный набор берёт этот цвет. Золото остаётся правилам
   игры и главному действию (С8). */
.lab-puzzle-levels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 12px;
}
.lab-puzzle-levels button {
  padding: 9px 10px;
  border: 1px solid rgba(87, 199, 255, .38);
  border-radius: 10px;
  background: linear-gradient(135deg, #19365b, #122744);
  color: #FFFFFF;
  font: 800 .82rem/1.1 var(--font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.lab-puzzle-levels button.is-active {
  border-color: #57C7FF;
  background: linear-gradient(135deg, #57C7FF, #2E9FE0);
  color: #0B1B2E;
}

/* Органы управления задачи: два в ряд, ширина делится поровну. */
#lab-puzzle-pane .lab-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
#lab-puzzle-pane .lab-actions .btn { padding: 12px 10px; font-size: .84rem }
.lab-puzzle-share { margin-top: 8px }

/* Р-368 · Кнопка перехода — единственное золото панели, во всю её ширину.
   Под ней стоят полоски набора: причина и следствие рядом, как на первом
   экране. */
.lab-puzzle-next { width: 100%; margin-top: 10px }
.lab-puzzle-ring {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}
/* Р-371 · Задача с промахом или показанным решением помечена сиреневым —
   тем же цветом, что плашка «Мимо» первого экрана (Р-358). */
.lab-puzzle-ring li.is-missed { background: rgba(139, 108, 255, .72) }
.lab-puzzle-ring li.is-missed:hover { background: rgba(139, 108, 255, .95) }

/* На узком экране колонки складываются в одну, и панель больше не обязана
   кончаться там же, где ряд кнопок под доской: высоту ей задаёт содержание, а
   запись держит свою меру. Тот же приём стоит у панели разбора. */
@media (max-width: 1240px) {
  .position-lab[data-active-mode="puzzle"] .position-lab-shell { grid-template-columns: minmax(0, 1fr) }
  .position-lab[data-active-mode="puzzle"] .position-lab-panel { height: auto; min-height: 0 }
  .position-lab .position-lab-panel:has(#lab-puzzle-pane:not([hidden])) .lab-score {
    flex: none;
    height: 260px;
    min-height: 260px;
  }
}

/* ====================================================================
   Круг v119
   ==================================================================== */

/* Р-379 · Полоса прокрутки взяла вид сайта. Прежде её рисовал браузер: серая
   системная полоса стояла в правой панели «Позиции», в записи «Партии», в
   нотации и списке примеров «Практики» — везде чужим предметом. Голубой на
   сайте значит «это данные, это разбор» (Р-346, Р-363), и полоса взяла его:
   ползунок голубой, дорожка — тот же индиго, что у полей ввода. Правило одно
   на все прокручиваемые области страницы. */
.explorer-groups,
.lab-score-body,
.demo-notation,
.lab-analysis-score,
#lab-analysis-pane .lab-example-list,
#lab-analysis-pgn,
.difference-rail {
  scrollbar-width: thin;
  scrollbar-color: rgba(87, 199, 255, .55) rgba(9, 21, 38, .55);
}
.explorer-groups::-webkit-scrollbar,
.lab-score-body::-webkit-scrollbar,
.demo-notation::-webkit-scrollbar,
.lab-analysis-score::-webkit-scrollbar,
#lab-analysis-pane .lab-example-list::-webkit-scrollbar,
#lab-analysis-pgn::-webkit-scrollbar,
.difference-rail::-webkit-scrollbar { width: 10px; height: 10px }
.explorer-groups::-webkit-scrollbar-track,
.lab-score-body::-webkit-scrollbar-track,
.demo-notation::-webkit-scrollbar-track,
.lab-analysis-score::-webkit-scrollbar-track,
#lab-analysis-pane .lab-example-list::-webkit-scrollbar-track,
#lab-analysis-pgn::-webkit-scrollbar-track,
.difference-rail::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(9, 21, 38, .55);
}
.explorer-groups::-webkit-scrollbar-thumb,
.lab-score-body::-webkit-scrollbar-thumb,
.demo-notation::-webkit-scrollbar-thumb,
.lab-analysis-score::-webkit-scrollbar-thumb,
#lab-analysis-pane .lab-example-list::-webkit-scrollbar-thumb,
#lab-analysis-pgn::-webkit-scrollbar-thumb,
.difference-rail::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: rgba(87, 199, 255, .55);
  background-clip: padding-box;
}
.explorer-groups::-webkit-scrollbar-button,
.lab-score-body::-webkit-scrollbar-button,
.demo-notation::-webkit-scrollbar-button,
.lab-analysis-score::-webkit-scrollbar-button,
#lab-analysis-pane .lab-example-list::-webkit-scrollbar-button,
#lab-analysis-pgn::-webkit-scrollbar-button,
.difference-rail::-webkit-scrollbar-button { display: none; width: 0; height: 0 }
.explorer-groups::-webkit-scrollbar-thumb:hover,
.lab-score-body::-webkit-scrollbar-thumb:hover,
.demo-notation::-webkit-scrollbar-thumb:hover,
.lab-analysis-score::-webkit-scrollbar-thumb:hover,
#lab-analysis-pane .lab-example-list::-webkit-scrollbar-thumb:hover,
#lab-analysis-pgn::-webkit-scrollbar-thumb:hover,
.difference-rail::-webkit-scrollbar-thumb:hover {
  background: rgba(87, 199, 255, .9);
  background-clip: padding-box;
}

/* Р-380 · Прокрутка правой панели «Позиции» начинается ниже заголовка. Прежде
   прокручивалась вся панель целиком, и строка «Available moves · Pawn d2»
   уезжала вверх вместе со списком: гость терял имя фигуры, ходы которой
   читает. Заголовок стоит на месте всегда, движется только список групп. */
@media (min-width: 981px) {
  .explorer { max-height: var(--player-row, none); overflow: hidden }
  .explorer .explorer-groups {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
  }
}

/* Р-381 · Примечания «Правил» ушли от белого. Белым в секции набраны и пункты
   разбора, и определение механики — примечание сливалось с ними и переставало
   читаться отдельным предметом. Буквы взяли голубой `#9DD5FF` (тот же, что у
   данных на сайте), заливка стала на ступень глубже, а точки пунктов — золотые,
   заодно с чертой слева: у примечания один цвет-хозяин вместо двух. */
.extra-rule-note {
  border: 1px solid rgba(157, 213, 255, .16);
  border-left: 3px solid #FFD24D;
  background: rgba(9, 21, 38, .55);
  color: #9DD5FF;
}
.extra-rule-note li { color: #9DD5FF }
.extra-rule-note li::marker { color: #FFD24D }

/* Р-382 · Первая плитка полосы стояла выше остальных. Причина в выравнивании
   сетки: у полосок разный рост — 6 px у текущей, 4 px у прочих, — и без явного
   правила ряд равнял первую по своему верху, а остальные по низу. Автор принял
   поднятую изумрудную плитку за сбой счёта. Теперь все плитки стоят на одной
   нижней черте, а текущая растёт вверх. */
.discovery-ring { align-items: end }

/* Р-377 · Полоса набора «Практики»: десять мест всегда. Плитка держит одну
   ширину в обоих наборах, номер текущей задачи стоит над ней, а вышедшее за
   левый край окна названо многоточием. */
.lab-puzzle-ring {
  grid-auto-flow: row;
  grid-template-columns: repeat(10, 1fr);
  grid-auto-columns: auto;
  align-items: end;
  padding-top: 20px;
}
/* Каретка первого экрана здесь не нужна: место «вы здесь» называет номер. */
.lab-puzzle-ring li.is-current::after { content: none }
.lab-puzzle-ring .ring-number {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 5px;
  color: #F4FAFF;
  font: 800 12px/1 var(--font-sans);
  transform: translateX(-50%);
}
.lab-puzzle-ring li.is-gap {
  overflow: visible;
  background: none;
}
.lab-puzzle-ring li.is-gap:hover { background: none }
.lab-puzzle-ring li.is-gap button {
  position: absolute;
  inset: -9px 0 -5px;
  color: rgba(157, 213, 255, .75);
  font: 800 15px/1 var(--font-sans);
}
.lab-puzzle-ring li.is-gap button:hover { color: #F4FAFF }

/* Р-378 · Набор задач выбирается зависимыми кнопками. Прежде это была пара
   вкладок внутри вкладки — второй уровень одного приёма, и гость читал их как
   ещё один переход раздела. Теперь пара стоит в одной обойме, у каждой кнопки
   точка выбора: видно, что берётся один из двух наборов. */
.lab-puzzle-levels {
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(87, 199, 255, .3);
  border-radius: 13px;
  background: rgba(9, 21, 38, .55);
}
.lab-puzzle-levels button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #CDE3F5;
}
.lab-puzzle-levels button::before {
  content: "";
  box-sizing: border-box;
  width: 13px;
  height: 13px;
  border: 2px solid rgba(157, 213, 255, .55);
  border-radius: 50%;
}
.lab-puzzle-levels button:hover { background: rgba(87, 199, 255, .12); color: #FFFFFF }
.lab-puzzle-levels button.is-active {
  background: linear-gradient(135deg, #57C7FF, #2E9FE0);
  color: #0B1B2E;
}
.lab-puzzle-levels button.is-active::before {
  border-color: #0B1B2E;
  background: radial-gradient(circle at 50% 50%, #0B1B2E 0 3.2px, transparent 3.4px);
}

/* Р-383 · «Практика» встала одним столбцом. Вкладки шли во всю ширину секции,
   а рабочая область под ними была уже и стояла по середине: доска висела
   правее своих вкладок, и на каждой вкладке — по-разному. Теперь вкладки и
   рабочая область одной меры, доска держит 500 px и одно место во всех трёх
   вкладках, а правой панели убавлено: запись задачи и нотация разбора в 700 px
   расходились пустотой. */
@media (min-width: 1241px) {
  .position-lab .lab-mode { max-width: 1132px }
  .position-lab .position-lab-shell,
  .position-lab[data-active-mode="puzzle"] .position-lab-shell {
    width: min(100%, 1132px);
    margin-inline: auto;
    grid-template-columns: 500px minmax(0, 600px);
    gap: 32px;
    justify-content: start;
    align-items: start;
  }

  /* Р-384 · Редактор доски: набор фигур стоит одним столбцом справа от доски.
     Прежде он лежал двумя рядами — над доской и под ней, — и доска съезжала
     вниз относительно правой панели, а под панелью оставалось пустое поле.
     Столбец занял ширину, отнятую у панели: доска осталась той же меры и на
     том же месте, что во вкладках задачи и разбора. Панель равняется по росту
     колонки доски. */
  .position-lab[data-active-mode="edit"] .position-lab-shell {
    grid-template-columns: 618px minmax(0, 482px);
  }
  /* Доска в этой вкладке ровно 500 px — столько же взяла и панель: их верх и
     низ стоят на одной черте. Мера записана числом, а не растяжкой: растяжка
     тянула колонку доски вслед за панелью и наоборот. */
  .position-lab[data-active-mode="edit"] .position-lab-panel {
    align-self: start;
    height: auto;
    min-height: 500px;
  }
  .position-lab[data-active-mode="edit"] .position-lab-board-column {
    display: grid;
    grid-template-columns: 500px auto;
    grid-template-rows: auto auto 1fr auto auto;
    column-gap: 14px;
    align-items: start;
  }
  .position-lab[data-active-mode="edit"] .lab-board-frame { grid-column: 1; grid-row: 1 / span 3 }
  .position-lab[data-active-mode="edit"] .lab-board-key { grid-column: 1; grid-row: 4 }
  .position-lab[data-active-mode="edit"] .lab-transport { grid-column: 1; grid-row: 5 }
  .position-lab[data-active-mode="edit"] .lab-editor-piece-dock.is-black { grid-column: 2; grid-row: 1 }
  .position-lab[data-active-mode="edit"] .lab-editor-piece-dock.is-white { grid-column: 2; grid-row: 2 }
  .position-lab[data-active-mode="edit"] .lab-editor-piece-dock {
    box-sizing: border-box;
    width: 104px;
    margin: 0;
    padding: 8px;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    border-radius: 12px;
  }
  .position-lab[data-active-mode="edit"] .lab-editor-piece-dock.is-white { margin-top: 10px }
  .position-lab[data-active-mode="edit"] .lab-editor-piece-dock .lab-piece-row {
    grid-template-columns: repeat(2, 40px);
    gap: 8px;
  }
  /* Рука и ластик стоят один раз — под белым набором. Две одинаковые пары в
     одном столбце читались бы повтором. */
  .position-lab[data-active-mode="edit"] .lab-editor-piece-dock.is-black .lab-editor-tools { display: none }
  .position-lab[data-active-mode="edit"] .lab-editor-piece-dock .lab-editor-tools {
    grid-template-columns: repeat(2, 40px);
    gap: 8px;
    margin: 0;
  }
  .position-lab[data-active-mode="edit"] .lab-editor-piece-dock .lab-piece-row button,
  .position-lab[data-active-mode="edit"] .lab-editor-piece-dock .lab-editor-tools button {
    min-height: 40px;
  }
  .position-lab[data-active-mode="edit"] .lab-editor-piece-dock .lab-piece-row img {
    width: 30px;
    height: 30px;
  }
}

/* Р-385 · Кнопка под доской «Позиции» перестала вздрагивать. Она выходит из
   вступления и в тот же миг меняет своё состояние: доступная кнопка светлее
   гашёной на 18 %, и перемена шла одним кадром — вспышкой. Теперь состояние
   меняется той же плавностью, что и всё на сайте (С25). */
.hero-demo-controls .player-action {
  transition: opacity 240ms var(--ease), background 240ms var(--ease), box-shadow 240ms var(--ease);
}

/* Р-386 · Запись хода во вступлении подписана как пример: гость волен выбрать
   другую фигуру и другой ход, а карточка показывает частный случай. */
.board-intro-san::before { content: 'example move' }

/* ====================================================================
   Круг v120
   ==================================================================== */

/* Р-387 · Приговор пункта выбора сказан цветом и знаком разом. Прежде верный
   ход помечался голубым кантом, а промах гас в серый: исход читался вяло, и
   автор попросил красное и зелёное. Одного цвета мало — пара «красный и
   зелёный» неразличима примерно у 8 % мужчин, поэтому рядом с цветом стоит
   знак: галочка у верного, крестик у промаха. Смысл держится при любом зрении.
   Место под знак взято из высоты плашки: 76 → 64 px. */
.discovery-options { grid-template-rows: repeat(3, minmax(64px, 1fr)) }
.discovery-option {
  grid-template-columns: 19px 1fr auto;
  min-height: 64px;
}

/* И-2 · Пункт выбора получил потолок в 80 px. Р-324 отдаёт свободную высоту
   панели самим пунктам, и при нынешней высоте первого экрана каждый из трёх
   дорастал до 98 px — автор назвал их великоватыми. Остаток теперь собирается
   под тройкой, одним местом: дыр между пунктами, из-за которых Р-324 и
   появилось, так же нет. Пол в 64 px от Р-387 стоит на месте: знак исхода
   живёт в нём. */
.discovery-options { grid-template-rows: repeat(3, minmax(64px, 80px)); align-content: start }
.discovery-option-mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid transparent;
  border-radius: 50%;
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.discovery-options .discovery-option.is-right {
  border-color: #3FBF7F;
  background: linear-gradient(180deg, #16283A 0%, #0E1A28 100%);
  box-shadow:
    inset 5px 0 0 0 #3FBF7F,
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 18px rgba(63, 191, 127, .22);
  color: var(--text);
}
.discovery-options .discovery-option.is-right .discovery-option-mark {
  border-color: #3FBF7F;
  background: rgba(63, 191, 127, .16);
  color: #8FF0BD;
  opacity: 1;
}
.discovery-options .discovery-option.is-right .discovery-option-mark::before { content: "✓" }
/* Р-387 · Промах красный. Красный на сайте был один и стоял у крестика
   закрытия окна; теперь у него второе значение — промах, и оно того же рода:
   «это отменено». Заливка плашки остаётся тёмной, цвет живёт в канте, полосе
   и знаке — большого красного пятна на первом экране быть должно поменьше. */
.discovery-options .discovery-option.is-ordinary {
  border-color: #D9463C;
  background: linear-gradient(180deg, #241820 0%, #150E12 100%);
  box-shadow:
    inset 5px 0 0 0 #D9463C,
    inset 0 1px 0 rgba(255,255,255,.1);
  color: rgba(255, 255, 255, .74);
}
.discovery-options .discovery-option.is-ordinary .discovery-option-mark {
  border-color: #D9463C;
  background: rgba(217, 70, 60, .18);
  color: #FFB3AC;
  opacity: 1;
}
.discovery-options .discovery-option.is-ordinary .discovery-option-mark::before { content: "✕" }
.discovery-options .discovery-option.is-ordinary input:checked {
  background: radial-gradient(circle at 31% 27%, #FFD9D5 0 9%, #F5A79F 12%, #D9463C 43%, #8E241D 78%);
  box-shadow: inset -2px -3px 4px rgba(20,26,34,.35), 0 3px 7px rgba(0,0,0,.46);
}

/* Р-388 · Запертая панель гаснет заодно с кнопками: пока окно стоит на доске,
   правая панель прямо объявляет, что ждёт закрытия окна. */
.discovery-shell.is-panel-locked .discovery-card { opacity: .72 }
.discovery-shell .discovery-card { transition: opacity var(--dur) var(--ease) }

/* Р-389 · Знаки над полосой набора «Практики»: галочка у решённой задачи,
   крестик у задачи с промахом. Номер задачи снят — знак важнее номера. Мера
   знака взята у пагинации Lichess: круг 18 px. */
.lab-puzzle-ring { padding-top: 24px }
.lab-puzzle-ring .ring-badge {
  position: absolute;
  bottom: 100%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-bottom: 4px;
  border: 1px solid transparent;
  border-radius: 50%;
  font: 900 11px/1 var(--font-sans);
  transform: translateX(-50%);
}
.lab-puzzle-ring .ring-badge.is-solved {
  border-color: #3FBF7F;
  background: rgba(63, 191, 127, .2);
  color: #8FF0BD;
}
.lab-puzzle-ring .ring-badge.is-failed {
  border-color: #D9463C;
  background: rgba(217, 70, 60, .22);
  color: #FFB3AC;
}
/* Р-389 · Задача с промахом красная — тот же красный, что у пункта первого
   экрана. Сиреневый освобождён. */
.lab-puzzle-ring li.is-missed { background: rgba(217, 70, 60, .8) }
.lab-puzzle-ring li.is-missed:hover { background: #D9463C }
/* Каретка возвращается текущей задаче: номера над плиткой больше нет. */
.lab-puzzle-ring li.is-current::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 3px;
  border: 4px solid transparent;
  border-top: 5px solid #F4FAFF;
  border-bottom: 0;
  transform: translateX(-50%);
}
/* У задачи со знаком каретка молчит: два предмета в одном месте спорят. */
.lab-puzzle-ring li.is-current.is-done::after,
.lab-puzzle-ring li.is-current.is-missed::after { content: none }

/* ====================== СЕМЕЙСТВА КНОПОК v120 ======================= */
/* Р-390 · Пять семейств кнопок, каждое на своём тоне.
   1 — золото `#FFD24D`: главное действие блока, одно на панель (С8).
   2 — медь: выбор набора задач, единственная тёплая пара после золота.
   3 — бирюза `#25A29E`: «унести с собой» — все кнопки Copy.
   4 — синий `#3977CA`: «принести извне» — все кнопки Paste.
   5 — голубой контур: инструмент над доской.
   Прежде третье, четвёртое и пятое семейства делили одну заливку `#19365B`,
   а фон панели — `#2E3D53`: кнопки были темнее и синее фона, и разделения
   почти выходило. */

/* Семейство 3 · «унести с собой». Кнопки Copy набора задач берут тот же вид,
   что Copy в редакторе и в разборе. */
.position-lab #lab-puzzle-copy-fen,
.position-lab #lab-puzzle-copy-pgn {
  border: 1px solid #36AAA6;
  background: linear-gradient(180deg, #25A29E 0%, #187D7D 52%, #0D575F 100%);
  color: #FFFFFF;
  font-weight: 850;
  text-shadow: 0 1px 1px rgba(0,0,0,.42);
}

/* Семейство 5 · инструмент над доской. Яркий кант в 2 px отделяет кнопку от
   фона сильнее любой заливки и держит её тише золота. Число цветов на панели
   от этого остаётся прежним. */
.position-lab #position-lab-solution,
.position-lab #position-lab-retry,
.position-lab #lab-start-position,
.position-lab #lab-clear-board {
  border: 2px solid #57C7FF;
  background: rgba(87, 199, 255, .12);
  color: #DCF0FF;
  font-weight: 800;
}
.position-lab #position-lab-solution:hover:enabled,
.position-lab #position-lab-retry:hover:enabled,
.position-lab #lab-start-position:hover:enabled,
.position-lab #lab-clear-board:hover:enabled {
  background: rgba(87, 199, 255, .22);
  color: #FFFFFF;
}
.position-lab #position-lab-solution:disabled {
  border-color: rgba(87, 199, 255, .3);
  background: rgba(87, 199, 255, .05);
  color: rgba(220, 240, 255, .5);
}

/* Р-391 · Семейство 2 · медь. Выбор набора — единственная тёплая пара панели.
   Прежде невыбранная кнопка стояла прозрачной на обойме `rgba(9,21,38,.55)` и
   от фона почти отличалась. Медь глуше золота и уходит в оранжевый, поэтому
   золото у кнопки перехода внизу остаётся одно на панели. */
.lab-puzzle-levels {
  border-color: rgba(122, 90, 46, .55);
  background: rgba(31, 22, 10, .6);
}
.position-lab .lab-puzzle-levels button {
  border: 1px solid #7A5A2E;
  background: #4A3418;
  color: #F0DCBC;
}
.lab-puzzle-levels button::before { border-color: rgba(240, 220, 188, .6) }
.position-lab .lab-puzzle-levels button:hover {
  background: #5C4220;
  color: #FFFFFF;
}
.position-lab .lab-puzzle-levels button.is-active {
  border-color: #F2B45E;
  background: linear-gradient(180deg, #E0912F 0%, #A85F14 100%);
  color: #2A1B06;
}
.lab-puzzle-levels button.is-active::before {
  border-color: #2A1B06;
  background: radial-gradient(circle at 50% 50%, #2A1B06 0 3.2px, transparent 3.4px);
}

/* Р-392 · Строка сообщений «Практики» получила три вида: успех, промах,
   сообщение. Прежде она была белой на почти прозрачном поле, и показанное
   решение читалось так же, как решённая задача. У каждого вида полоса слева
   в 3 px, своя заливка и свой цвет букв; контраст к фону панели выше семи. */
.position-lab .lab-status {
  padding: 9px 12px;
  border-radius: 9px;
  border-left: 3px solid transparent;
  font-weight: 700;
}
.position-lab .lab-task-feedback.is-success,
.position-lab .lab-status.is-success {
  border: 0;
  border-left: 3px solid #3FBF7F;
  background: rgba(63, 191, 127, .14);
  color: #8FF0BD;
}
.position-lab .lab-task-feedback.is-error,
.position-lab .lab-status.is-error {
  border: 0;
  border-left: 3px solid #D9463C;
  background: rgba(217, 70, 60, .16);
  color: #FFB3AC;
}
.position-lab .lab-task-feedback.is-neutral,
.position-lab .lab-status.is-neutral {
  border: 0;
  border-left: 3px solid #57C7FF;
  background: rgba(87, 199, 255, .12);
  color: #CDE9FF;
}

/* Р-393 · Столбец редактора доски собран по слову автора: пара инструментов
   сверху, чёрные фигуры, белые фигуры, пара инструментов снизу. В каждой
   группе левый ряд — король, ферзь, ладья; правый — слон, конь, пешка. Рука
   дотягивается до обеих групп с любого конца столбца.
   Поле иконки взяло светлое поле нашей доски: на доске обе стороны рисуются
   именно так и обе читаются — чёрная заливкой, белая своим тёмным контуром.
   Прежде поле было `#263A52`, и чёрная фигура пропадала на тёмном рядом с
   тёмным фоном столбца. */
@media (min-width: 1241px) {
  .position-lab[data-active-mode="edit"] .lab-editor-piece-dock {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  /* У чёрного набора пара инструментов встаёт над фигурами: это верх столбца. */
  .position-lab[data-active-mode="edit"] .lab-editor-piece-dock.is-black { flex-direction: column-reverse }
  .position-lab[data-active-mode="edit"] .lab-editor-piece-dock.is-black .lab-editor-tools { display: grid }
  .position-lab[data-active-mode="edit"] .lab-editor-piece-dock .lab-piece-row {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(2, 40px);
    grid-template-rows: repeat(3, auto);
    gap: 8px;
  }
  .position-lab[data-active-mode="edit"] .lab-editor-piece-dock .lab-editor-tools {
    grid-template-columns: repeat(2, 40px);
    gap: 8px;
    margin: 0;
  }
}
.position-lab .lab-piece-row button {
  border: 1px solid rgba(0, 0, 0, .4);
  background: #E9DDB4;
}
.position-lab .lab-piece-row button:hover { background: #F4EBCC }
.position-lab .lab-piece-row button.is-active {
  border: 2px solid #FFD24D;
  background: #F4EBCC;
  box-shadow: 0 0 0 1px rgba(255, 210, 77, .4), 0 0 14px rgba(255, 210, 77, .45);
}
.position-lab .lab-editor-tools button {
  border: 1px solid rgba(157, 213, 255, .35);
  background: #2F4763;
  color: #F7FAFF;
}
.position-lab .lab-editor-tools button:hover { background: #3B587A }
.position-lab .lab-editor-tools button.is-active {
  border: 2px solid #FFD24D;
  background: #3B587A;
  box-shadow: 0 0 0 1px rgba(255, 210, 77, .4), 0 0 14px rgba(255, 210, 77, .45);
}

/* Р-387 · Капля переключателя у верного хода зелёная: цвет пункта един от
   канта до капли. Прежде она оставалась золотой и спорила с зелёным. */
.discovery-options .discovery-option.is-right input:checked {
  background: radial-gradient(circle at 31% 27%, #DFFFEC 0 9%, #A6F0C6 12%, #3FBF7F 43%, #1C6E48 78%);
  box-shadow: inset -2px -3px 4px rgba(20,26,34,.35), 0 3px 7px rgba(0,0,0,.46);
}

/* ====================================================================
   Круг v121
   ==================================================================== */

/* Р-394 · Гамбургер перестал уезжать к середине раскрытого меню. Шапка —
   переносимая строка, и при `align-content: stretch` первая строка растягивалась
   на всю высоту раскрытого списка: кнопка, равняемая по середине своей строки,
   вставала посреди пунктов. Строка берёт свою меру, и кнопка стоит в шапке. */
@media (max-width: 1260px) {
  .top .wrap { align-content: start }
  /* Меню занимает свою строку целиком: прежде оно делило строку с кнопкой,
     строка вырастала до высоты списка, и кнопка вставала по её середине. */
  .top nav { flex: 0 0 100% }
  /* Имя игры со слоганом уступает место кнопке в первой строке. */
  .top .brand { flex: 1 1 0; min-width: 0 }
  .navtoggle { align-self: center }
}

/* Р-395 · Имя раздела в ленте задачи взяло сиреневый. Золото ушло кнопке
   перехода и главному действию (С8), и второе золото в той же панели читалось
   его дублем. Сиреневый освободился в круге v120: промах стал красным. */
.lab-task-meta span:first-child { color: #B9A2FF }

/* Р-396 · Выбор набора задач набран заново. Медь оказалась глухой и мутной:
   две коричневых плашки разной глубины автор отверг. Выбранный набор берёт
   светлое поле доски `#E9DDB4` — тот же цвет, что у полей набора фигур в
   редакторе, — и тёмные буквы на нём читаются лучше всего. Невыбранный стоит
   на сланце, светлее панели на две ступени. Круглые точки сняты: светлое
   пятно среди тёмного и само говорит, что выбрано. */
.lab-puzzle-levels {
  border-color: rgba(157, 213, 255, .22);
  background: rgba(9, 21, 38, .55);
}
.lab-puzzle-levels button::before { content: none }
.position-lab .lab-puzzle-levels button {
  border: 1px solid rgba(157, 213, 255, .3);
  background: linear-gradient(180deg, #3B506B 0%, #2B3C52 100%);
  color: #D7E6F5;
}
.position-lab .lab-puzzle-levels button:hover {
  background: linear-gradient(180deg, #47607F 0%, #33475F 100%);
  color: #FFFFFF;
}
.position-lab .lab-puzzle-levels button.is-active {
  border-color: #FFF7E2;
  background: linear-gradient(180deg, #FFF7E2 0%, #F2E7C2 55%, #E2D5A8 100%);
  color: #1E2A38;
  /* Общий объём панели гасит светлую заливку внутренней тенью — здесь она
     заменена своей, светлой: иначе кремовое поле уходит в оливковое. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -2px 0 rgba(120, 100, 60, .28),
    0 3px 0 rgba(4, 13, 26, .6),
    0 7px 14px rgba(0, 0, 0, .2);
}

/* Р-397 · Инструменты над доской получили заливку и объём. Один кант их от
   фона панели отделял слабо: цвет заливки почти совпадал с фоном, и кнопка
   читалась рамкой. Заливка взята стальная с голубым кантом — семейство
   инструмента остаётся при своём цвете, а объём собран тем же приёмом, что у
   Copy и Paste (Р-139): верхний блик, нижний уступ, падающая тень. */
.position-lab #position-lab-solution,
.position-lab #position-lab-retry,
.position-lab #lab-start-position,
.position-lab #lab-clear-board {
  border: 1px solid #57C7FF;
  background: linear-gradient(180deg, #38769C 0%, #275B7E 52%, #17415C 100%);
  color: #FFFFFF;
  font-weight: 850;
  text-shadow: 0 1px 1px rgba(0,0,0,.42);
  box-shadow:
    inset 0 1px rgba(255,255,255,.32),
    0 4px 0 #0E2C41,
    0 8px 16px rgba(0,0,0,.24);
}
.position-lab #position-lab-solution:hover:enabled,
.position-lab #position-lab-retry:hover,
.position-lab #lab-start-position:hover,
.position-lab #lab-clear-board:hover {
  background: linear-gradient(180deg, #418AB6 0%, #2E6C94 52%, #1B4E6E 100%);
  color: #FFFFFF;
}
.position-lab #position-lab-solution:active:enabled,
.position-lab #position-lab-retry:active,
.position-lab #lab-start-position:active,
.position-lab #lab-clear-board:active {
  box-shadow: inset 0 1px rgba(255,255,255,.2), 0 2px 0 #0E2C41, 0 4px 9px rgba(0,0,0,.2);
}
.position-lab #position-lab-solution:disabled {
  border-color: rgba(87, 199, 255, .35);
  background: linear-gradient(180deg, #27455B 0%, #1D3648 100%);
  color: rgba(220, 240, 255, .55);
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 1px 3px rgba(0,0,0,.16);
}

/* Р-398 · Объём золотых кнопок один на весь сайт. Прежде золото стояло плоским
   пятном с мягким свечением, и автор назвал его кантом. Приём тот же, что у
   Copy и Paste: светлый блик по верхнему краю, тёмный уступ по нижнему,
   падающая тень. Пульсирующее свечение снято — оно спорило с постоянным
   объёмом и мешало читать край кнопки. */
.btn.primary,
.position-lab #lab-analyse-position,
.hero-demo-controls .player-action,
.board-intro-card .player-action,
#demo-start-play,
.lab-seal small {
  border: 1px solid #FFE9A8;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 -3px 0 rgba(122, 78, 6, .34),
    0 4px 0 #8A5E12,
    0 10px 20px rgba(0, 0, 0, .3),
    0 0 22px rgba(255, 210, 77, .22);
  animation: none;
}
.btn.primary:hover,
.position-lab #lab-analyse-position:hover,
.hero-demo-controls .player-action:hover:enabled,
.board-intro-card .player-action:hover,
#demo-start-play:hover,
.lab-seal:hover small {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .78),
    inset 0 -3px 0 rgba(122, 78, 6, .3),
    0 5px 0 #8A5E12,
    0 12px 24px rgba(0, 0, 0, .34),
    0 0 26px rgba(255, 210, 77, .3);
}
.btn.primary:active,
.position-lab #lab-analyse-position:active,
.hero-demo-controls .player-action:active:enabled,
.board-intro-card .player-action:active,
#demo-start-play:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 1px 0 #8A5E12,
    0 4px 9px rgba(0, 0, 0, .24);
}
.btn.primary:disabled {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 3px rgba(0,0,0,.18);
  transform: none;
}

/* Р-399 · Сообщения «Практики» встали на глубокую заливку. Прежде заливка была
   лишь оттенком того же цвета, что и буквы, и строка сливалась сама с собой.
   Приём взят у пунктов первого экрана: тёмное поле, яркий кант слева, светлые
   буквы. Один язык у двух секций (С21). */
.position-lab .lab-task-feedback.is-success,
.position-lab .lab-status.is-success {
  border: 1px solid rgba(63, 191, 127, .45);
  border-left: 3px solid #3FBF7F;
  background: linear-gradient(180deg, #10281F 0%, #0A1A15 100%);
  color: #8FF0BD;
}
.position-lab .lab-task-feedback.is-error,
.position-lab .lab-status.is-error {
  border: 1px solid rgba(217, 70, 60, .45);
  border-left: 3px solid #D9463C;
  background: linear-gradient(180deg, #2A1417 0%, #170B0D 100%);
  color: #FFB3AC;
}
.position-lab .lab-task-feedback.is-neutral,
.position-lab .lab-status.is-neutral {
  border: 1px solid rgba(87, 199, 255, .4);
  border-left: 3px solid #57C7FF;
  background: linear-gradient(180deg, #0F2233 0%, #091722 100%);
  color: #CDE9FF;
}

/* Р-400 · При смене примера в разборе растворяется только сменяемое: поле FEN,
   поле PGN и запись ходов. Подписи, кнопки Copy и Paste, шапка записи и список
   примеров стоят на месте — они от смены примера ничем не меняются. */
.position-lab .lab-analysis-score,
.position-lab .lab-analysis-io { transition: none }
.position-lab #lab-analysis-fen,
.position-lab #lab-analysis-pgn,
.position-lab #lab-analysis-notation { transition: opacity var(--change-motion) ease }
.position-lab.is-analysis-switching .lab-analysis-score,
.position-lab.is-analysis-switching .lab-analysis-io { opacity: 1 }
.position-lab.is-analysis-switching #lab-analysis-fen,
.position-lab.is-analysis-switching #lab-analysis-pgn,
.position-lab.is-analysis-switching #lab-analysis-notation { opacity: 0 }

/* ====================================================================
   Круг v122
   ==================================================================== */

/* Р-404 · Пока завеса вступления держит органы управления, собственная
   плавность кнопки молчит. Состояние ей ставят до показа, и первый кадр
   появления обязан совпасть со всеми последующими. */
.player-body.is-revealing-controls:not(.reveal-action) .hero-demo-controls .player-action {
  transition: none;
}

/* Р-402 · Уход и появление содержимого — две меры на весь сайт, между ними
   паузы нет. Панель «Правил» гаснет до нуля за 220 мс, содержимое подменяется
   на дне, обратное появление занимает 260 мс. Прежде панель гасла лишь до
   `0.25`, а подмена ждала 620 мс: 350 мс на экране стояло старое содержимое, и
   перемена читалась рывком. */
.extra-rule-panel {
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}
.extra-rule-panel.is-changing {
  opacity: 0;
  transform: translateX(6px);
  transition-duration: 220ms;
}

/* Р-403 · Тот же приём в «Практике»: доска, поля записи, запись ходов и строка
   сообщения. Прежде путь знал только список примеров, а «My analysis»,
   «Next puzzle» и переход из редактора меняли позицию рывком. */
.position-lab .position-lab-board,
.position-lab #lab-analysis-fen,
.position-lab #lab-analysis-pgn,
.position-lab #lab-analysis-notation,
.position-lab #position-lab-notation,
.position-lab .lab-task-feedback {
  transition: opacity 260ms var(--ease);
}
.position-lab.is-analysis-switching .position-lab-board,
.position-lab.is-analysis-switching #lab-analysis-fen,
.position-lab.is-analysis-switching #lab-analysis-pgn,
.position-lab.is-analysis-switching #lab-analysis-notation,
.position-lab.is-analysis-switching #position-lab-notation,
.position-lab.is-analysis-switching .lab-task-feedback {
  opacity: 0;
  transition-duration: 220ms;
}

/* Смена вкладок «Практики» берёт те же две меры. */
.position-lab-shell.is-mode-leaving {
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}
.position-lab-shell.is-mode-entering {
  animation: lab-mode-v76-in 260ms var(--ease) both;
}

/* Р-405 · Лента задачи встала на светлое поле — то же, что у выбранной кнопки
   набора в прошлом круге. Тёмные буквы на светлом читаются лучше всего, а
   панель получила ясную шапку. */
.position-lab .lab-task-meta {
  border-color: rgba(0, 0, 0, .2);
  background: linear-gradient(180deg, #FFF7E2 0%, #E2D5A8 100%);
  color: #3E5064;
}
.position-lab .lab-task-meta span:first-child { color: #1E2A38 }
.position-lab .lab-task-meta span:nth-child(2) { color: #3E5064 }

/* Р-406 · Набор задач стал сиреневым. Светлое поле ушло ленте, и пара кнопок
   взяла свободный цвет сайта: сиреневым набрано имя раздела в ленте, и оно же
   осталось от прежней метки промаха. Белые буквы на сиреневом дают контраст
   около семи. */
.lab-puzzle-levels {
  border-color: rgba(169, 139, 255, .3);
  background: rgba(24, 18, 46, .6);
}
.position-lab .lab-puzzle-levels button {
  border: 1px solid rgba(169, 139, 255, .45);
  background: linear-gradient(180deg, #3A2F63 0%, #2A2149 100%);
  color: #DCD2FF;
}
.position-lab .lab-puzzle-levels button:hover {
  background: linear-gradient(180deg, #493C7C 0%, #352A5C 100%);
  color: #FFFFFF;
}
.position-lab .lab-puzzle-levels button.is-active {
  border-color: #C6B4FF;
  background: linear-gradient(180deg, #8B6CFF 0%, #6A4CD8 100%);
  color: #FFFFFF;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 -2px 0 rgba(28, 16, 68, .4),
    0 3px 0 rgba(4, 13, 26, .6),
    0 7px 14px rgba(0, 0, 0, .2);
}

/* Р-407 · Поле сообщения стоит всегда. Прежде пустое поле пряталось, и низ
   панели дёргался при каждом сообщении, а под записью зияла пустота. */
.position-lab .lab-task-feedback:empty {
  visibility: visible;
  border: 1px solid rgba(157, 213, 255, .14);
  border-left: 3px solid rgba(157, 213, 255, .28);
  background: rgba(9, 21, 38, .38);
}

/* Р-408 · Значки редактора нарисованы линией, как фигуры. Прежде их рисовал
   системный шрифт смайликов, и рядом с доской они выглядели из чужого набора.
   Снятие фигуры помечено красным: красный на сайте значит «отменено». */
.lab-tool-icon {
  width: 22px;
  height: 22px;
  display: block;
}
.position-lab .lab-editor-tools button { color: #E9F3FF }
.position-lab .lab-editor-tools [data-tool="trash"] { color: #FF8B82 }
.position-lab .lab-editor-tools [data-tool="trash"]:hover { color: #FFB3AC }
.position-lab .lab-editor-tools [data-tool="trash"].is-active {
  border-color: #D9463C;
  background: #3A2126;
  color: #FFB3AC;
  box-shadow: 0 0 0 1px rgba(217, 70, 60, .4), 0 0 14px rgba(217, 70, 60, .4);
}

/* ====================================================================
   Круг v123
   ==================================================================== */

/* Р-414 · Кнопка под доской «Позиции» перестала вздрагивать в конце появления.
   Покадровый замер показал: после показа у кнопки не меняются ни рамка, ни
   цвет, ни подпись, ни состояние — вздрагивал не предмет, а его отрисовка.
   Очередь вступления гасит и проявляет группу прозрачностью; на время плавности
   браузер уносит её на собственный слой, а в конце возвращает обратно, и буквы,
   стоящие на дробной позиции (778.375 px при окне 1920×790), перерисовываются с
   другим сглаживанием и сдвигом до пикселя. Слой закреплён за группой навсегда,
   поэтому отрисовка до плавности, во время неё и после — одна и та же. Прежние
   подходы Р-385 и Р-404 искали причину в состоянии кнопки, а она лежала в
   отрисовке. Правило берёт всю очередь вступления: гаснут и проявляются эти
   четыре предмета одинаково. */
.player-body .board-phase,
.player-body .explorer-legend,
.player-body .explorer-handle,
.player-body .hero-demo-controls {
  will-change: opacity;
}

/* Р-417 · Слово вкладки «Практики» остаётся целым на узком экране. Прежде
   `overflow-wrap: anywhere` разрешал перенос внутри слова, а `min-width: 0`
   позволял гибкой строке сжать колонку уже самого слова: испанское `Analizar`
   ломалось на «Anali» и «zar». Причина глубже: узкие правила писаны отбором
   `.lab-mode button` (0,1,1), а мера вкладок приходит из `.position-lab
   .lab-mode button` (0,2,1) — она сильнее и держала настольный кегль .95rem с
   полями 22 px даже при окне 430 px. Правило написано тем же отбором, поэтому
   до экрана доходит: кегль и поля уменьшены, наименьшая ширина считается по
   самому длинному слову. Длинная подпись по-прежнему переносится между
   словами. */
@media (max-width: 620px) {
  .position-lab .lab-mode button {
    min-width: auto;
    padding: 11px 9px;
    font-size: .8rem;
    line-height: 1.18;
    overflow-wrap: break-word;
  }
}

/* Р-419 · Имя игры в заголовке «Участия» держится одной строкой. Заголовок
   вырос до «Take part in the development of Solomachev Chess» (Р-418), и
   перенос резал имя: слово `Chess` уходило на свою строку одно. Класс имени
   один на все четыре языка — русская разметка `data-ru` и подстановка
   испанского и бразильского в `i18n.js` зовут его так же. */
#support-title .support-title-name { white-space: nowrap; }

/* И-3 · Пометка случая рядом с именем правила. Имя `Shift` у простого переноса
   и у переноса через батарею одно: правило одно, случай особый.
   И-6 · Пометка идёт в круглых скобках голубым, имя правила остаётся белым.
   И-7 · Кегль пометки равен кеглю имени: мельче она ломала строку заголовка.
   Прежний овал спорил с именем: два предмета в одной строке заголовка.
   Скобки ставятся стилем, поэтому ключом словаря остаётся одно слово. */
.extra-rule-tile strong .rule-tile-mark,
.rule-title-mark {
  display: inline;
  margin-left: 7px;
  padding: 0;
  border: 0;
  color: #9DD5FF;
  /* Свойства перечислены порознь: сокращённая запись `font` с `inherit`
     вместо имени шрифта целиком недействительна, и кегль оставался
     браузерным для `small` — на шестую часть мельче имени. */
  font-family: inherit;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .01em;
  text-transform: lowercase;
  vertical-align: baseline;
}
.extra-rule-tile strong .rule-tile-mark::before,
.rule-title-mark::before { content: '('; }
.extra-rule-tile strong .rule-tile-mark::after,
.rule-title-mark::after { content: ')'; }

/* ============ И-6 · Первый экран: панели по бокам доски ================== */

/* Панели опущены под золотой баннер. Верх панели встаёт вровень с верхом
   доски, низ — вровень с её низом: доска и две панели читаются одной строкой.
   Прежде панели начинались вровень с верхом баннера и свисали под доску на
   76 px. Отступ равен росту баннера (66 px) и его нижнему зазору (10 px),
   поэтому баннер закреплён по высоте: иначе отступ и доска разойдутся. */
.discovery-brand { height: 66px; min-height: 66px; }
.discovery-shell .discovery-brief,
.discovery-shell .discovery-card {
  margin-top: 76px;
  align-self: stretch;
}

/* Шапка левой панели того же кегля, что и шапка правой. Р-342 задал ей
   1.14rem, а `.panel p { font-size: 15px }` перебивал по весу селектора, и
   строка «Тест из 2 задач» шла мельче заголовка «Выберите один из трёх
   ходов» — две шапки рядом спорили. */
.discovery-brief .discovery-brief-eyebrow { font-size: 1.14rem; }

/* Пункты задания сжаты до своего содержания. После снятия двух задач вся
   свободная высота панели уходила им, и каждый вырастал до 80 px. Потолок
   60 px, остаток расходится по промежуткам ровно. */
.discovery-brief-list {
  grid-auto-rows: minmax(0, 60px);
  align-content: space-between;
}
.discovery-brief-list li { padding: 6px 11px 6px 28px; }

/* Заголовок блока открытий стоит одной строкой: имя слева, счёт справа. */
.discovery-brief-foot .discovery-step { align-items: baseline; margin: 0 0 8px; }
.discovery-brief-foot .discovery-step-name { display: inline; }

/* Пустая строка отзыва правой панели места больше не занимает. Прежде она
   стояла нулевой высоты между двумя зазорами по 10 px, и между списком ходов
   и кнопкой «Подсказка» висела дыра в 20 px. */
.discovery-card .discovery-feedback:empty { display: none; }

/* Кнопки выбора хода встают под высоту левой панели. Прежний пол в 76 px
   держал правую панель выше доски на 13 px, и обе панели свисали под её
   нижний кант. Пол 70 px: остаток высоты по-прежнему уходит в рост кнопок. */
.discovery-card .discovery-options { grid-template-rows: repeat(3, minmax(70px, 1fr)); }

/* Ниже 1160 px правая панель уходит под доску во всю ширину, а левая встаёт
   рядом с доской одна: отступ под баннер там теряет смысл, и обе панели
   возвращаются к росту по содержанию. */
@media (max-width: 1160px) {
  .discovery-shell .discovery-brief,
  .discovery-shell .discovery-card { margin-top: 0; }
  .discovery-brief-list { grid-auto-rows: minmax(0, 1fr); }
  .discovery-card .discovery-options { grid-template-rows: repeat(3, minmax(64px, 1fr)); }
}

/* ============ И-7 · Редактор доски ====================================== */

/* Значок внутри кнопки стоял блоком в кнопке-блоке: слева, без выключки по
   середине. Крестик снятия фигуры и указатель уезжали левее центра. */
.position-lab .lab-editor-tools button,
.position-lab .lab-piece-row button {
  display: grid;
  place-items: center;
  padding: 0;
}
.position-lab .lab-tool-icon { margin: 0; }

@media (min-width: 1241px) {
  /* Наборы фигур крупнее и стоят по середине доски: до белых и до чёрных
     тянуться одинаково. Зазор до доски равен зазору до правой панели.
     Ширина под наборы взята у правой панели — в режиме редактора она стоит
     наполовину пустой. */
  .position-lab[data-active-mode="edit"] .position-lab-shell {
    /* 656 = доска 500 + зазор 32 + набор 124: правый край набора совпадает с
       правым краем колонки, и зазор до правой панели равен зазору до доски. */
    grid-template-columns: minmax(500px, 656px) minmax(360px, 1fr);
  }
  .position-lab[data-active-mode="edit"] .position-lab-board-column {
    position: relative;
  }
  .position-lab[data-active-mode="edit"] .lab-editor-piece-dock {
    position: absolute;
    right: 0;
    box-sizing: border-box;
    width: 124px;
    margin: 0;
    padding: 8px;
    gap: 8px;
  }
  /* Оба набора лежат в одной области сетки: у вынутого из потока предмета
     проценты считаются от его области, и порознь середина у них расходилась. */
  .position-lab[data-active-mode="edit"] .lab-editor-piece-dock.is-black,
  .position-lab[data-active-mode="edit"] .lab-editor-piece-dock.is-white { grid-area: 1 / 2 / -1 / 3; }
  /* Оба набора отсчитываются от середины доски и расходятся от неё на 6 px.
     Поля обнулены обоим: у чёрного набора сверху стояло 10 px из общего
     правила, и пара уезжала вниз. Сдвиг `transform` здесь бессилен — его
     перебивает появление вкладки собственной анимацией. */
  .position-lab[data-active-mode="edit"] .lab-editor-piece-dock.is-black {
    top: auto;
    bottom: calc(50% + 6px);
    margin: 0;
  }
  .position-lab[data-active-mode="edit"] .lab-editor-piece-dock.is-white {
    top: calc(50% + 6px);
    bottom: auto;
    margin: 0;
  }
  .position-lab[data-active-mode="edit"] .lab-editor-piece-dock .lab-piece-row,
  .position-lab[data-active-mode="edit"] .lab-editor-piece-dock .lab-editor-tools {
    grid-template-columns: repeat(2, 50px);
    gap: 8px;
  }
  .position-lab[data-active-mode="edit"] .lab-editor-piece-dock .lab-piece-row button,
  .position-lab[data-active-mode="edit"] .lab-editor-piece-dock .lab-editor-tools button {
    min-height: 50px;
  }
  .position-lab[data-active-mode="edit"] .lab-editor-piece-dock .lab-piece-row img {
    width: 42px;
    height: 42px;
  }
  .position-lab[data-active-mode="edit"] .lab-editor-piece-dock .lab-tool-icon {
    width: 28px;
    height: 28px;
  }
}