/**
 * Плинко желаний: комната, доска во весь рост, низ с кнопкой.
 *
 * УСТРОЕНО КАК КОЛЕСО (wheel.css), и по тем же причинам: игра забирает экран
 * целиком, полосу и пилюлю снимает nav.js по спискам СТРАНИЦЫ и БЕЗ_ВЕРХА,
 * страницу под слоем запирает класс `во-весь-рост`, который ставит сам экран.
 *
 * ВЫСОТА ЯВНО. `inset: 0` на iPhone меряется по большому вьюпорту, и низ с
 * кнопкой уезжал бы под панель браузера; `100svh` это видимая часть.
 *
 * ХОЛСТ ПОД КНОПКАМИ, а не между ними: автомат стоит в комнате во весь экран,
 * камера сама центрует его в том, что между кнопками (`о.поля` в
 * plinko-3d.js).
 *
 * ПАЛЕЦ НА ДОСКЕ ЦЕЛИТСЯ, а не листает: у холста `touch-action: none`.
 */

.pk {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100svh;
  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;
}

/*
 * ЗАДНИКА-КАРТИНКИ НЕТ. Сияние нарисовано в самой сцене и идёт под кнопками
 * до краёв экрана; ни с какой другой игрой не делится: владелец 04.10.2026
 * «один и тот же задник нельзя на разных играх». Цвет ниже только на время
 * загрузки (фон приложения, --c-bg).
 */
.pk { background: var(--c-bg); }

/* Холст во весь экран под кнопками. Кнопки лежат поверх и пропускают палец к
   доске везде, кроме самих себя. */
.pk__doska {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.pk__verkh,
.pk__niz {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}
.pk__verkh > *,
.pk__niz .btn { pointer-events: auto; }

.pk__verkh {
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: max(var(--s-3), env(safe-area-inset-top)) var(--s-4) var(--s-5);
  /* Сияние идёт под кнопками до края: подложка только чтобы кнопки читались. */
  background: linear-gradient(180deg, rgba(10, 6, 6, .45), rgba(10, 6, 6, 0));
}

/* Остаток бесплатных бросков: как строка пробных оборотов у колеса (`.wh__проба`). */
.pk__broski {
  flex: 1;
  min-width: 0;
  margin: 0;
  font: 600 var(--t-label-s) var(--f-mono);
  letter-spacing: var(--tr-label-s);
  text-transform: uppercase;
  color: var(--c-gold);
  text-align: center;
}
.pk__broski:empty { visibility: hidden; }

.pk-zvuk {
  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;
}
.pk-zvuk[aria-pressed="true"] { color: var(--c-muted); }
/* display:grid перебивает атрибут hidden: кнопка висела бы, пока доска грузится. */
.pk-zvuk[hidden] { display: none; }


.pk__kholst {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  opacity: 0;
  transition: opacity 420ms var(--m-ease);
  -webkit-tap-highlight-color: transparent;
  cursor: crosshair;
}
.pk--gotovo .pk__kholst { opacity: 1; }

.pk__zhdyom {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--s-4);
}

.pk__niz {
  bottom: 0;
  padding: var(--s-2) var(--s-4) max(var(--s-4), env(safe-area-inset-bottom));
  background: linear-gradient(0deg, rgba(10, 6, 6, .72) 30%, rgba(10, 6, 6, 0));
}
.pk__niz > * { max-width: 560px; margin-inline: auto; }

.pk__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-s) var(--f-sans);
  color: var(--c-muted);
}

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

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

/* ---------- шторки ---------- */

.pk-zamok { text-align: center; }
.pk-zamok__tekst {
  margin: var(--s-2) 0 0;
  font: 400 var(--t-body-l) var(--f-sans);
  color: var(--c-text);
}

/* ---------- настройки: план на вечер ---------- */

/* «Случайно» первой и во всю ширину карты: одно касание собирает вечер. */
.pk-sluchayno {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  background: var(--c-surface-high);
  border: 1px solid var(--c-border-strong);
  color: var(--c-text);
}
.pk-sluchayno svg { color: var(--c-gold); flex: none; }

/*
 * Отклик «Случайно» (владелец: «непонятно, нажалась она или нет»): кубик
 * катится, кнопка вспыхивает золотом, новые пилюли выскакивают по очереди.
 * Классы ставит экран после перерисовки: прежняя кнопка к этому времени уже
 * заменена, и `:active` на ней не успевает показаться.
 */
.pk-sluchayno--broshen { animation: pk-vspyishka 650ms var(--m-ease); }
.pk-sluchayno--broshen svg { animation: pk-kubik 520ms var(--m-ease); }
.pk-novaya { animation: pk-vyiskok 420ms var(--m-ease) both; }
@keyframes pk-vspyishka {
  0% { border-color: var(--c-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-gold) 40%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-gold) 0%, transparent); }
}
@keyframes pk-kubik {
  from { transform: rotate(-200deg) scale(1.25); }
  to { transform: rotate(0) scale(1); }
}
@keyframes pk-vyiskok {
  0% { transform: scale(.86); filter: brightness(1.6); }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); filter: none; }
}

/* Каталог: счёт, строка «уже девять» и все категории одним списком. */
.pk-katalog { margin-top: var(--s-5); }
/* Строка счёта и есть ручка списка: стрелка вниз, раскрыт значит стрелка вверх. */
.pk-schyot {
  width: 100%;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--c-text);
  font: 600 var(--t-label-l) var(--f-sans);
  text-align: left;
  cursor: pointer;
}
.pk-schyot svg { flex: none; color: var(--c-muted); transition: transform var(--m-micro) var(--m-ease); }
.pk-schyot[aria-expanded="true"] svg { transform: rotate(180deg); }
.pk-spisok { padding-top: var(--s-2); }
.pk-polno {
  margin: 0 0 var(--s-2);
  font: 400 var(--t-body-s) var(--f-sans);
  color: var(--c-warn);
}
/* Девять уже взято: невзятые гаснут, но нажимаются и говорят почему нельзя. */
.pk-katalog--polno .choice__opt[aria-pressed="false"] { opacity: 0.45; }

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

@media (min-width: 1024px) {
  /* Слой во весь монитор справа от колонки разделов, как у колеса: у `.screen`
     на широком предел ширины и поля, их снимаем все три. */
  .pk {
    inset: 0 0 0 var(--kolonka, 264px);
    width: auto;
    max-width: none;
    margin: 0;
  }
  .pk__niz > * { max-width: 720px; margin-inline: auto; }

  .pk__podskazka { font: 400 var(--t-body-m) var(--f-sans); }
  .pk__knopka .btn {
    width: auto;
    min-width: 300px;
    display: block;
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pk__kholst { transition: none; }
  /* Без движения остаётся только вспышка кнопки. */
  .pk-sluchayno--broshen svg,
  .pk-novaya { animation: none; }
}