/**
 * Колесо желаний: комната, круг, огонёк в ступице, переключатель ступеней.
 *
 * ПАРТИЯ ЗАБИРАЕТ ЭКРАН ЦЕЛИКОМ, как у шашек и напёрстков. Обычным экраном
 * каркаса круг быть не может: сверху полоса, снизу пилюля навигации, и то, что
 * остаётся, это щель, в которой колесу негде быть круглым. Полосу и пилюлю
 * снимает nav.js по спискам СТРАНИЦЫ и БЕЗ_ВЕРХА, а высоту забирает inset: 0.
 *
 * СЛОИ ПОДНИМАЮТСЯ ПОИМЁННО, а не «все, кроме задника». Правило вида
 * `.wh > :not(.wh__комната)` накрыло бы и то, что приходит в экран снаружи:
 * монета из coin.js вешается прямо сюда накладкой, и такое правило сделало бы
 * её обычным блоком в конце колонки. У напёрстков этот капкан уже сработал.
 *
 * РАЗМЕРЫ БЕРУТСЯ ТОКЕНАМИ, А НЕ ЧИСЛАМИ. Первая версия этого файла мерила всё
 * своими числами: пилюли в 999, кегль в 12px, серый в #a1a1aa. На телефоне
 * рядом с приложением это сразу видно, потому что владелец 25.08 решил ровно
 * наоборот: орган управления это прямоугольник с мягким углом (--r-ctl), а не
 * круглый торец. Одно число на всех живёт в css/tokens.css, и брать его надо
 * оттуда, иначе у нас снова будет пять почти одинаковых отступов.
 *
 * ПЕРЕКЛЮЧАТЕЛЬ СТУПЕНЕЙ ЭТО ОБЩИЙ ЧИП. Своей пилюли у колеса нет: `.chip` из
 * frame.css уже знает и высоту, и радиус, и золотой пузырь под выбранным. Здесь
 * остаётся только то, чего у общего чипа быть не может: три штуки в ряд поровну.
 *
 * ДЕСКТОП ЭТО НЕ «ШИРЕ». Круг растёт до предела и остаётся кругом посреди
 * экрана: колесо во всю ширину монитора это не крупнее, это просто далеко.
 * Задник при этом тянется на весь экран и там, и там: он фон, а не картинка в
 * колонке.
 */

.wh {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow: hidden;
}

/* ---------- задник ---------- */

/* Свечной задник из приложения (assets/art/games/wheel_bg.webp), поверх него
   тёплая лужа в цвете ступени и затемнение, чтобы круг и подписи не тонули в
   боке. Три слоя ровно как в `_backdrop`, и порядок тот же: картинка ниже
   всех. `cover` тянет её на любой экран, от узкого телефона до монитора. */
.wh__komnata {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--c-bg);
  background-image:
    radial-gradient(circle at 50% 52%,
      rgba(10, 6, 6, .2) 40%, rgba(10, 6, 6, .8) 100%),
    radial-gradient(circle at 50% 51%,
      color-mix(in srgb, var(--tsvet-zhara, var(--c-heat-2)) 18%, transparent) 0%,
      transparent 70%),
    url('/next/images/wheel/bg.webp');
  background-size: cover, cover, cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image var(--m-standard) var(--m-ease);
}

.wh__verkh,
.wh__stupeni,
.wh__niz { position: relative; z-index: 1; }

/* ---------- верх ---------- */

.wh__verkh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: max(var(--s-3), env(safe-area-inset-top)) var(--s-4) 0;
}

.wh__proba {
  font: 600 var(--t-label-s) var(--f-mono);
  letter-spacing: var(--tr-label-s);
  text-transform: uppercase;
  color: var(--c-gold);
  text-align: right;
}

.wh__proba:empty { display: none; }

/* ---------- переключатель ступеней ---------- */

.wh__stupeni {
  display: flex;
  gap: var(--s-2);
  width: 100%;
  max-width: 560px;
  margin: var(--s-3) auto 0;
  padding: 0 var(--s-4);
}

/* Единственное, чего общий чип не знает: их трое и они делят ширину поровну.
   Всё остальное (34 высоты, --r-ctl, золотой пузырь под выбранным) приходит
   из .chip и меняться здесь не должно. */
.wh__stupenj {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
}

/* Точка у запертой ступени. НЕ замок: проба в три оборота на бою есть, и
   рисовать запрет там, где его нет, значит врать раньше времени. */
.wh__zamok {
  margin-left: var(--s-1);
  color: var(--c-gold);
}
.chip[aria-pressed="true"] .wh__zamok { color: var(--c-on-gold); }

/* ---------- круг ---------- */

/* КРУГ УСТУПАЕТ, А НЕ ВЫТАЛКИВАЕТ. min-height: 0 обязателен: без него флекс не
   даёт колонке сжаться ниже содержимого, и на невысоком телефоне кнопка уезжает
   за нижний край. Ровно это уже случилось у напёрстков. */
/* Круг САМ И ЕСТЬ КНОПКА, как в приложении: там весь квадрат с колесом обёрнут
   в GestureDetector, и крутят, тыкая в колесо, а не только в кнопку внизу. */
.wh__krug {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: var(--s-2) var(--s-2) 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.wh__krug[aria-disabled="true"] { cursor: default; }

.wh__krug canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: manipulation;
}

/* Огонёк в ступице. Ставится скриптом по числам от рисующего, поэтому здесь
   только вид: своего размера и своего места у него нет. */
.wh__ogonj {
  position: absolute;
  transform: translate(-50%, -50%) scale(var(--ogonj-masshtab, 1));
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 0 10px rgba(212, 175, 55, .55));
}

/* Дыхание, пока колесо стоит: это единственное на экране, что говорит «нажми».
   Как только колесо пошло, огонёк замирает, потому что смотрят уже на колесо
   (правило приложения: ничто не движется, если на это никто не смотрит). */
@media (prefers-reduced-motion: no-preference) {
  .wh__ogonj--dyishit { animation: wh-dyikh 1500ms var(--m-ease) infinite; }
}
@keyframes wh-dyikh {
  0%, 100% { transform: translate(-50%, -50%) scale(.92); }
  50%      { transform: translate(-50%, -50%) scale(1.04); }
}

/* ---------- низ ---------- */

.wh__niz {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 var(--s-4) max(var(--s-4), env(safe-area-inset-bottom));
}

.wh__podskazka {
  /* Место держим всегда: иначе кнопка подпрыгивает, когда подсказка исчезает. */
  min-height: 34px;
  margin: 0 0 var(--s-2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: 400 var(--t-body-m) var(--f-sans);
  color: var(--c-muted);
}

.wh__knopka { min-height: 52px; }
.wh__knopka .btn { width: 100%; }

/* Имя того, чей оборот, цветом его места: он синий, она розовая, как везде во
   внутрянке. Чистый цвет игрока на золоте не читается, поэтому берётся не он
   сам, а его смесь с тем, чем на золоте пишут (--c-on-gold): оттенок остаётся
   узнаваемым, а контраст становится кнопочным. Своего цвета не заводим. */
.wh__imya {
  color: color-mix(in srgb, var(--tsvet-khoda, var(--c-player-1)) 45%, var(--c-on-gold));
  font-weight: 700;
}

/* ---------- шторка задания ---------- */

.wh-itog {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.wh-itog__sektor { margin: var(--s-3) 0 var(--s-1); }

.wh-itog__shapka {
  margin: 0 0 var(--s-2);
  font: 600 var(--t-title-l) var(--f-serif);
  color: var(--c-gold);
}

.wh-itog__tekst {
  margin: 0;
  font: 400 var(--t-body-l) var(--f-sans);
  color: var(--c-text);
}

/* Объяснение, почему задание ушло второму: сектор оказался не для того, кто
   крутил. Тише задания и мельче, это сноска, а не заголовок. */
.wh-itog__ushlo {
  margin: var(--s-2) 0 0;
  font: 400 var(--t-body-s) var(--f-sans);
  color: var(--c-gold);
}

.wh-itog__kto {
  margin: var(--s-3) 0 0;
  font: 600 var(--t-label-s) var(--f-mono);
  letter-spacing: var(--tr-label-s);
  text-transform: uppercase;
  color: var(--c-muted);
}

.wh-itog__knopki {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-5);
}

/* ---------- десктоп ---------- */

@media (min-width: 1024px) {
  /**
   * НА ШИРОКОМ ЗАДНИК ТОЖЕ ВО ВЕСЬ ЭКРАН.
   *
   * Экран носит класс `.screen`, а тот на широком обрезан до 1240 и поставлен
   * по середине (`max-width: var(--кол); margin-inline: auto`). Правило это
   * общее и правильное для списков, но на экране, который лежит `fixed` во
   * весь монитор, оно означает вот что: комната обрывается справа, и дальше
   * идёт чёрное ничто. Ровно это владелец и увидел.
   *
   * Снимаем предел и берём всё, что осталось от бокового рельса каркаса.
   * Ширина рельса приходит переменной, а не числом: два числа в двух местах
   * разъедутся на первом же изменении. У шашек этот же дефект чинили 29.08
   * этой же строкой, и держать два разных ответа на один вопрос незачем.
   */
  .wh {
    inset: 0 0 0 var(--kolonka, 264px);
    /* ВСЕ ТРИ, а не только предел. У `.screen` кроме `max-width` стоит ещё и
       `width: 100%`, и он один способен всё вернуть: ширина снова становится
       во весь монитор, а левый край уже отодвинут под рельс, и комната
       уезжает за правый край ровно на ширину рельса. Ширину рельса берём
       переменной: на 1440 и 1920 она уже не 264, а 288 и 320. */
    width: auto;
    max-width: none;
    margin: 0;
  }

  /* Колонка шире, но круг всё равно круг: канва квадратная по короткой
     стороне, и разгонять ширину дальше значит только отодвигать края. Задник
     в эту колонку НЕ входит: он лежит на всём, что осталось от рельса. */
  .wh__verkh,
  .wh__stupeni,
  .wh__krug,
  .wh__niz { max-width: 720px; margin-inline: auto; }

  .wh__podskazka { font: 400 var(--t-body-l) var(--f-sans); }

  .wh__knopka .btn {
    width: auto;
    min-width: 300px;
    display: block;
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wh__komnata { transition: none; }
}

/* ---------- объёмное колесо (26.09.2026) ---------- */

/* Лежит ровно в коробке плоского: огонёк ставится по тем же отступам. */
.wh__krug canvas.wh__3d {
  position: absolute;
  /* Размеры явно: холст заменяемый элемент, и при auto он берёт свои 300 на
     150, а не растягивается по отступам. */
  left: var(--s-2);
  top: var(--s-2);
  width: calc(100% - var(--s-2) * 2);
  height: calc(100% - var(--s-2));
}
/* Плоское прячется, но место держит: по нему считается положение огонька. */
.wh--3d #whKholst,
.wh--zhdyot3d #whKholst,
.wh--zhdyot3d .wh__ogonj { visibility: hidden; }
/* Объём проявляется, а не выскакивает. */
.wh__krug canvas.wh__3d { opacity: 0; transition: opacity 420ms var(--m-ease); }
.wh--3d .wh__krug canvas.wh__3d { opacity: 1; }
/* Огонёк над объёмным холстом: холст добавлен позже и иначе лёг бы сверху. */
.wh--3d .wh__ogonj { z-index: 1; }

.wh-zvuk {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  z-index: 2;
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
  border: 1px solid var(--c-border-strong);
  background: var(--c-surface-high);
  color: var(--c-text);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.wh-zvuk[aria-pressed="true"] { color: var(--c-muted); }
/* display:grid выше перебивает атрибут hidden: кнопка висела, пока объём грузился. */
.wh-zvuk[hidden] { display: none; }