/* «Леший и Девица» — интерфейс новеллы.
   Тёплая тёмная сказка: плашка цвета морёного дуба, кремовый текст,
   тонкая «вышитая» золотистая кайма — всё на CSS, без картинок. */

:root {
  --bg: #120c08;
  --ink: #f4e8d2;
  --ink-soft: #d9c7a8;
  --ink-mute: #a8957a;
  --plate: rgba(24, 14, 8, 0.80);
  --plate-solid: #1d120b;
  --gold: #d4a861;
  --gold-soft: rgba(212, 168, 97, 0.42);
  --gold-faint: rgba(212, 168, 97, 0.16);
  --berry: #9e2f37;
  --berry-hi: #b93b44;
  --moss: #4f6b3a;
  --think: #d8a7a3;
  --radius: 16px;
  --gutter: 12px;
  --fade: 400ms;
  --font-text: "PT Serif", "Georgia", "Times New Roman", "Noto Serif", serif;
  --font-title: "Palatino Linotype", "Palatino", "Book Antiqua", "PT Serif Caption", "Georgia", serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 18px;
  line-height: 1.55;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; }
img { display: block; }

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

/* ---- Сцена ------------------------------------------------------------ */

.app {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--bg);
}

/* По бокам — тот же кадр, размытый и притемнённый. */
.backdrop { position: absolute; inset: 0; overflow: hidden; }
.backdrop__img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(24px) brightness(0.6) saturate(1.05);
  transform: scale(1.12);
}

.stage {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100vh;
  height: 100dvh;
  width: min(100vw, 100vh * 9 / 16);
  width: min(100vw, 100dvh * 9 / 16);
  overflow: hidden;
  background: var(--plate-solid);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.65);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.art { position: absolute; inset: 0; }
.art__layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--fade) ease;
}
.art__layer.is-on { opacity: 1; }

/* ---- Сцена диалога: фон локации + спрайты ------------------------------
   Включается с первой реплики персонажа в узлах со scene (см. engine.js).
   --sw/--sh — ширина/высота сцены. Спрайт (холст 2:3, фигура по колено) стоит
   на нижнем крае, срез колен/бёдер прячется под плашкой. Высота — min(0.8 высоты,
   1.75 ширины) сцены: макушки на 20–21 % от верха на 360–430 × 640–932 и на
   десктопе, ниже кнопки меню; на узких телефонах фигуры сильнее перекрываются,
   края холста чуть обрезаются (см. test/layout.test.mjs). --cx — центр фигуры в долях ширины сцены
   (холст шириной --h·2/3, фигура по его центру); left/height анимируются при
   входе/уходе персонажей. --k — нормировка роста образа (sprites/looks.mjs).
   Зеркалятся (.is-mirrored) только симметричные образы — решает check-story. */
.stage { --sw: min(100vw, 100vh * 9 / 16); --sh: 100vh; }
@supports (height: 100dvh) {
  .stage { --sw: min(100vw, 100dvh * 9 / 16); --sh: 100dvh; }
}
.scene {
  position: absolute; inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--fade) ease, visibility 0s linear var(--fade);
  pointer-events: none;
  --size: min(var(--sh) * 0.8, var(--sw) * 1.75);
}
.scene.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--fade) ease, visibility 0s;
}
.scene__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.sprite {
  --h: calc(var(--size) * var(--k, 1));
  --cx: 0.5;
  position: absolute;
  bottom: 0;
  left: calc(var(--sw) * var(--cx) - var(--h) / 3);
  z-index: 1;
  height: var(--h);
  width: auto;
  aspect-ratio: 2 / 3;
  opacity: 0;
  filter: brightness(0.62) saturate(0.8);
  transition: opacity 350ms ease, filter 250ms ease, translate 450ms cubic-bezier(0.2, 0.7, 0.2, 1), height 450ms ease, left 450ms ease;
}
.sprite--left { --cx: 0.25; translate: -35% 0; }
.sprite--right { --cx: 0.75; translate: 35% 0; }
.sprite--center { z-index: 0; translate: 0 8%; }
/* вдвоём с центральным: центр сдвигается на свободную сторону */
.scene:not(.has-left) .sprite--center { --cx: 0.36; }
.scene:not(.has-right) .sprite--center { --cx: 0.64; }
/* трое на сцене: все чуть меньше, крайние ближе к краям, центральный — позади */
.scene.is-trio { --size: min(var(--sh) * 0.77, var(--sw) * 1.68); }
.scene.is-trio .sprite--left { --cx: 0.21; }
.scene.is-trio .sprite--right { --cx: 0.79; }
.sprite.is-mirrored { scale: -1 1; }
/* приглушённые — темнее, но не прозрачные */
.sprite.is-in { opacity: 1; translate: 0 0; }
.sprite.is-in.is-speaking { filter: none; z-index: 2; }
/* продолжение / переход по главам: сцена встаёт сразу, без кроссфейда и въезда */
.scene.is-instant, .scene.is-instant .sprite { transition: none; }
/* пока картинки сцены декодируются, прежний экран не принимает нажатий */
.stage[data-loading] .screen--title, .stage[data-loading] .screen--ending { pointer-events: none; }

/* Мягкое затемнение снизу, чтобы плашка читалась на любом кадре. */
.stage::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
  background: linear-gradient(to top, rgba(10, 6, 3, 0.55), transparent);
  pointer-events: none;
}

.screen {
  position: absolute; inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding:
    calc(var(--gutter) + var(--safe-top))
    calc(var(--gutter) + var(--safe-right))
    calc(var(--gutter) + var(--safe-bottom))
    calc(var(--gutter) + var(--safe-left));
}

/* ---- Плашка ----------------------------------------------------------- */

.plate {
  position: relative;
  max-height: 62%;
  overflow-y: auto;
  padding: 18px 20px 20px;
  border-radius: var(--radius);
  background: var(--plate);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid var(--gold-soft);
  /* двойная кайма: тёмный зазор и тонкая золотая нить внутри */
  box-shadow:
    inset 0 0 0 3px rgba(18, 10, 5, 0.65),
    inset 0 0 0 4px var(--gold-faint),
    0 10px 30px rgba(0, 0, 0, 0.45);
  outline: none;
  scrollbar-width: thin;
}
/* ромбики-«стежки» по верхнему краю */
.plate::before {
  content: "";
  position: absolute;
  top: 7px; left: 50%;
  width: 64px; height: 6px;
  transform: translateX(-50%);
  background:
    radial-gradient(circle, var(--gold-soft) 1.6px, transparent 2px) 0 50% / 12px 6px repeat-x;
  opacity: 0.9;
  pointer-events: none;
}

.plate__who {
  display: inline-block;
  margin: 0 0 4px;
  padding-bottom: 1px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.86em;
  letter-spacing: 0.06em;
  font-variant: small-caps;
  color: var(--who, var(--gold));
  color: color-mix(in oklab, var(--who, var(--gold)) 70%, #fff4e0);
  border-bottom: 2px solid var(--who, var(--gold));
}
.plate__who.is-thought {
  font-family: var(--font-text);
  font-weight: 400;
  font-style: italic;
  font-variant: normal;
  letter-spacing: 0.02em;
  font-size: 0.78em;
  color: var(--think);
  border-bottom: 0;
  opacity: 0.85;
}

.plate__text {
  margin: 0;
  font-size: 1em;
  line-height: 1.6;
  color: var(--ink);
  text-wrap: pretty;
  min-height: 1.6em;
}
.plate.is-thought .plate__text { font-style: italic; color: #f0dcd2; }
.plate.is-narration .plate__text { color: var(--ink-soft); }
.ghost { color: transparent; }

.plate__next {
  position: absolute;
  right: 14px; bottom: 8px;
  width: 10px; height: 10px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  opacity: 0.8;
  animation: bob 1.4s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { translate: 0 0; opacity: 0.55; }
  50% { translate: 0 3px; opacity: 1; }
}

/* ---- Кнопки ----------------------------------------------------------- */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 10px 18px;
  border-radius: 14px;
  border: 1px solid var(--gold-soft);
  background: linear-gradient(to bottom, rgba(70, 44, 26, 0.92), rgba(44, 27, 16, 0.92));
  color: var(--ink);
  font-size: 1em;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 230, 190, 0.12), 0 3px 0 rgba(0, 0, 0, 0.35);
  transition: transform 80ms ease, background-color 150ms ease, border-color 150ms ease;
}
.btn:hover { border-color: var(--gold); }
.btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 230, 190, 0.1), 0 1px 0 rgba(0, 0, 0, 0.35); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn:focus-visible, .icon-btn:focus-visible, .segmented button:focus-visible, .album__cell:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.btn--primary {
  background: linear-gradient(to bottom, var(--berry-hi), var(--berry));
  border-color: rgba(255, 210, 160, 0.45);
  font-weight: 700;
}
.btn--quiet { background: rgba(30, 18, 10, 0.6); }
.btn--danger { border-color: rgba(201, 80, 80, 0.6); color: #f6d4cc; }

.btn-col { display: flex; flex-direction: column; gap: 10px; }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }
.slot:empty { display: none; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--gold-soft);
  background: rgba(24, 14, 8, 0.7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.menu-btn {
  position: absolute;
  top: calc(10px + var(--safe-top));
  right: calc(10px + var(--safe-right));
  z-index: 3;
}
.burger, .burger::before, .burger::after {
  display: block;
  width: 18px; height: 2px;
  border-radius: 1px;
  background: var(--ink);
}
.burger { position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -6px; }
.burger::after { top: 6px; }

/* Звук: слева от ☰ в игре и финале, в углу на титуле. Значок — inline SVG в разметке. */
.sound-btn {
  position: absolute;
  top: calc(10px + var(--safe-top));
  right: calc(10px + 44px + 8px + var(--safe-right));
  z-index: 3;
}
.stage[data-screen="title"] .sound-btn { right: calc(10px + var(--safe-right)); }
.sound-ico { width: 22px; height: 22px; }
.sound-ico path { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sound-ico .sound-ico__body { fill: var(--ink); }
.sound-btn[aria-pressed="true"] .sound-ico__off,
.sound-btn[aria-pressed="false"] .sound-ico__waves { display: none; }
.sound-btn[aria-pressed="false"] { color: var(--ink-mute); }
.sound-btn[aria-pressed="false"] .sound-ico path { stroke: var(--ink-mute); }
.sound-btn[aria-pressed="false"] .sound-ico .sound-ico__body { fill: var(--ink-mute); }

/* ---- Выборы ----------------------------------------------------------- */

.choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.choice {
  justify-content: flex-start;
  text-align: left;
  font-size: 0.95em;
}
.choice__num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--gold-soft);
  color: var(--gold);
  font-size: 0.75em;
  font-family: var(--font-title);
}

/* ---- Стартовый экран -------------------------------------------------- */

.screen--title {
  justify-content: space-between;
  background:
    linear-gradient(to bottom, rgba(10, 6, 3, 0.65), transparent 32%),
    linear-gradient(to top, rgba(10, 6, 3, 0.7), transparent 38%);
}
.title__head { text-align: center; padding-top: 6vh; padding-top: 6dvh; }
.title__name {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(34px, 10vw, 46px);
  line-height: 1.1;
  letter-spacing: 0.04em;
  font-variant: small-caps;
  color: #fbeed4;
  text-shadow: 0 2px 0 rgba(60, 25, 10, 0.8), 0 0 24px rgba(0, 0, 0, 0.7);
}
.title__and {
  display: block;
  font-style: italic;
  font-variant: normal;
  font-weight: 400;
  font-size: 0.55em;
  color: var(--gold);
}
.title__sub {
  margin: 8px 0 0;
  font-style: italic;
  color: var(--ink-soft);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}
.title__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(100%, 320px);
  margin: 0 auto 4vh;
  margin: 0 auto 4dvh;
}

/* ---- Финал ------------------------------------------------------------ */

/* Финал помещается в экран при любой высоте: эпилог прокручивается внутри
   плашки, кнопки — неподвижный низ плашки (2 колонки, «Вернуться к выбору» во всю ширину). */
.screen--ending { padding-top: calc(var(--gutter) + var(--safe-top) + 52px); }
.plate.plate--ending {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  overflow: hidden;
  text-align: center;
  padding: 22px 16px 14px;
}
.ending__scroll {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding: 0 4px;
  outline: none;
}
.ending__actions {
  flex: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--gold-faint);
}
.ending__actions .btn {
  min-height: 44px;
  padding: 6px 10px;
  font-size: 0.86em;
  line-height: 1.2;
}
.ending__actions .btn--wide { grid-column: 1 / -1; min-height: 48px; font-size: 1em; }
.ending__extra { display: contents; }
.ending__extra > .btn:only-child { grid-column: 1 / -1; }

.fork { flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; }
.fork .chapter__n { min-width: 0; }
.fork__words { font-size: 0.9em; font-style: italic; color: var(--ink-soft); }
.kicker {
  margin: 0;
  font-family: var(--font-title);
  font-variant: small-caps;
  letter-spacing: 0.14em;
  font-size: 0.8em;
  color: var(--gold);
}
.ending__title {
  margin: 2px 0 10px;
  font-family: var(--font-title);
  font-size: 1.6em;
  line-height: 1.2;
  font-weight: 700;
  color: #fbeed4;
}
.ending__epilogue { text-align: left; }
.ending__epilogue p { margin: 0 0 0.6em; color: var(--ink-soft); }
.ending__epilogue p.is-thought { font-style: italic; }
.ending__count {
  margin: 4px 0 10px;
  font-size: 0.8em;
  color: var(--ink-mute);
  font-style: italic;
}

/* ---- Меню ------------------------------------------------------------- */

.screen--menu, .screen--confirm {
  z-index: 5;
  justify-content: center;
  background: rgba(8, 5, 3, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.screen--confirm { z-index: 6; }

.sheet {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  border-radius: var(--radius);
  background: rgba(29, 18, 11, 0.96);
  border: 1px solid var(--gold-soft);
  box-shadow: inset 0 0 0 3px rgba(18, 10, 5, 0.65), inset 0 0 0 4px var(--gold-faint), 0 18px 50px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.sheet--small { padding: 20px; gap: 16px; }
.sheet__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--gold-faint);
}
.sheet__head .icon-btn { background: transparent; border-color: transparent; }
.sheet__title {
  flex: 1;
  margin: 0;
  padding-left: 8px;
  font-family: var(--font-title);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: 1.15em;
  color: var(--gold);
}
#menu-back:not([hidden]) + .sheet__title { padding-left: 0; }
.sheet__body {
  padding: 14px 16px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.panel-note { margin: 10px 0 0; font-size: 0.8em; color: var(--ink-mute); font-style: italic; }
#album-count { margin: 0 0 12px; }
.confirm__text { margin: 0; text-align: center; }

.chapters { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.chapters .btn { justify-content: flex-start; text-align: left; }
.chapter__n {
  flex: none;
  min-width: 2.4em;
  font-family: var(--font-title);
  color: var(--gold);
  font-size: 0.85em;
}
.chapter--locked {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 18px;
  border-radius: 14px;
  border: 1px dashed var(--gold-faint);
  color: var(--ink-mute);
}

.album {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.album__cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  cursor: default;
}
.album__frame {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--gold-soft);
  background: #160d07;
}
.album__frame img { width: 100%; height: 100%; object-fit: cover; }
/* силуэт ненайденного финала: тёмная фигурка девицы в арке */
.album__cell.is-locked .album__frame {
  border-style: dashed;
  border-color: var(--gold-faint);
  background:
    radial-gradient(ellipse 16% 9% at 50% 33%, #2c1d12 98%, transparent 100%),
    radial-gradient(ellipse 30% 34% at 50% 68%, #2c1d12 98%, transparent 100%),
    radial-gradient(ellipse 70% 60% at 50% 45%, #1f140c, #120b06);
}
.album__name { font-size: 0.72em; line-height: 1.25; color: var(--ink-soft); overflow-wrap: anywhere; }
.album__cell.is-locked .album__name { color: var(--ink-mute); letter-spacing: 0.2em; }
/* «В историю» (VK) под найденным финалом */
.album__extra:empty { display: none; }
.btn--small {
  min-height: 44px;
  padding: 4px 6px;
  border-radius: 10px;
  font-size: 0.72em;
}

/* ---- Ачивки -------------------------------------------------------------- */

.ach-grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 14px 10px;
}
.ach {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.ach__img { width: 96px; height: 96px; }
/* закрытая: тёмный силуэт медальона, без цвета и деталей */
.ach__img.is-locked {
  filter: brightness(0) opacity(0.5);
}
.ach__title {
  font-family: var(--font-title);
  font-size: 0.82em;
  line-height: 1.25;
  color: var(--gold);
  overflow-wrap: anywhere;
}
.ach__desc { font-size: 0.7em; line-height: 1.3; color: var(--ink-soft); }
.ach.is-locked .ach__title, .ach.is-locked .ach__desc { color: var(--ink-mute); letter-spacing: 0.2em; }
.ach__extra { width: 100%; margin-top: 2px; }
.ach__extra:empty { display: none; }
.ach__extra .btn { width: 100%; }

/* Тост «Ачивка: …»: под рядом кнопок, клики проходят насквозь */
.toast {
  position: absolute;
  top: calc(10px + 44px + 8px + var(--safe-top));
  left: 12px;
  right: 12px;
  margin-inline: auto;
  width: fit-content;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 6px;
  border-radius: 999px;
  background: rgba(29, 18, 11, 0.94);
  border: 1px solid var(--gold-soft);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  color: var(--ink);
  font-size: 0.85em;
  line-height: 1.3;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 250ms ease, transform 250ms ease;
}
.toast.is-on { opacity: 1; transform: none; }
.toast__img { width: 44px; height: 44px; flex: none; }
.toast__text b { color: var(--gold); font-weight: 400; font-family: var(--font-title); }

.history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.history li { font-size: 0.9em; line-height: 1.5; color: var(--ink-soft); }
.history .h-who {
  display: block;
  font-family: var(--font-title);
  font-variant: small-caps;
  font-weight: 700;
  font-size: 0.85em;
  letter-spacing: 0.05em;
  color: var(--who, var(--gold));
  color: color-mix(in oklab, var(--who, var(--gold)) 70%, #fff4e0);
}
.history .is-thought { font-style: italic; color: var(--think); }
.history .is-choice { color: var(--gold); font-style: italic; }
.history .is-choice::before { content: "→ "; }
.history .is-empty { color: var(--ink-mute); font-style: italic; }

.field-label {
  margin: 0 0 8px;
  font-size: 0.85em;
  font-weight: 400;
  color: var(--ink-mute);
}
.segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  margin-bottom: 18px;
  border-radius: 14px;
  border: 1px solid var(--gold-faint);
  background: rgba(10, 6, 3, 0.5);
}
.segmented--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.segmented button {
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.9em;
  cursor: pointer;
}
.segmented button[aria-pressed="true"] {
  background: linear-gradient(to bottom, var(--berry-hi), var(--berry));
  color: var(--ink);
  font-weight: 700;
}
#settings-extra { margin-bottom: 18px; }

/* Звук: строки каналов — название и переключатель, ниже ползунок громкости. */
.mix {
  display: grid;
  gap: 6px;
  padding: 4px 12px 8px;
  margin-bottom: 18px;
  border-radius: 14px;
  border: 1px solid var(--gold-faint);
  background: rgba(10, 6, 3, 0.5);
}
.mix-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name switch" "vol val";
  align-items: center;
  column-gap: 10px;
}
.mix-row + .mix-row { border-top: 1px solid var(--gold-faint); padding-top: 4px; }
.mix-name { grid-area: name; color: var(--ink-soft); font-size: 0.95em; }
.switch {
  grid-area: switch;
  position: relative;
  min-width: 44px;
  min-height: 44px;
  width: 56px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.switch::before {
  content: "";
  position: absolute; left: 4px; right: 4px; top: 50%;
  height: 26px; margin-top: -13px;
  border-radius: 13px;
  border: 1px solid var(--gold-soft);
  background: rgba(10, 6, 3, 0.7);
  transition: background var(--fade);
}
.switch::after {
  content: "";
  position: absolute; left: 8px; top: 50%;
  width: 20px; height: 20px; margin-top: -10px;
  border-radius: 50%;
  background: var(--ink-mute);
  transition: transform var(--fade), background var(--fade);
}
.switch[aria-checked="true"]::before { background: linear-gradient(to bottom, var(--berry-hi), var(--berry)); }
.switch[aria-checked="true"]::after { transform: translateX(20px); background: var(--ink); }
.switch:focus-visible, .mix-vol:focus-visible, .link-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 10px; }
.mix-vol {
  grid-area: vol;
  width: 100%;
  min-width: 0;
  height: 44px;
  margin: 0;
  accent-color: var(--berry-hi);
  cursor: pointer;
}
.mix-val { grid-area: val; min-width: 3ch; text-align: right; color: var(--ink-mute); font-size: 0.85em; font-variant-numeric: tabular-nums; }
.mix-row[data-on="false"] .mix-vol, .mix-row[data-on="false"] .mix-val { opacity: 0.45; }
.mix-row--switch { grid-template-areas: "name switch"; }
.mix-note { margin: -10px 0 18px; }
.link-btn {
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--gold);
  font: inherit;
  font-style: normal;
  text-decoration: underline;
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) { .switch::before, .switch::after { transition: none; } }

.noscript {
  position: absolute; left: 16px; right: 16px; bottom: 24px; z-index: 9;
  padding: 16px; border-radius: var(--radius);
  background: var(--plate-solid); text-align: center;
}

/* ---- Размеры ---------------------------------------------------------- */

@media (max-width: 370px) {
  html, body { font-size: 17px; }
  .plate { padding: 16px 16px 18px; }
}
@media (min-width: 400px) and (min-height: 760px) {
  html, body { font-size: 18.5px; }
}
@media (min-width: 700px) {
  html, body { font-size: 19px; }
  .stage { border-left: 1px solid var(--gold-faint); border-right: 1px solid var(--gold-faint); }
}
@media (max-height: 560px) {
  .plate { max-height: 72%; }
  .title__head { padding-top: 2vh; }
}

/* ---- Меньше движения -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .art__layer, .scene, .scene.is-on, .sprite { transition: none; }
  .plate__next { animation: none; opacity: 0.8; }
  .btn { transition: none; }
  .toast { transition: none; }
}