/* «Сказка на ночь» (js/ui/story.js): экран сказки, ступени приглушения, цели касаний, тёмная фаза, выход
   взрослого; на карте — кнопка-месяц и карточка «Остров спит до утра». Света как можно меньше: тёмный индиго,
   тёплые янтарные пятна, затемнение — чёрным слоем по opacity (без анимации filter). Движутся только transform
   и opacity. При «Уменьшить движение» и «Спокойных героях» (data-calm) — мгновенные ступени, без переходов; кольцо
   удержания (выход, месяц) идёт свои 2 с и тогда: это индикатор, а не движение — полное кольцо значит «можно отпускать».
   Ночного гнезда пока нет: art/home/nest.webp под индиговым слоем (появится nest-night.webp — меняется одна строка). */

:root {
  --story-night: #070b14;       /* фон экрана сказки: почти чёрный индиго */
  --story-indigo: #1b2340;
  --story-amber: #f3c77a;       /* свет фонарика */
  --story-moon: #f6e3b8;        /* месяц на карте */
  --story-target: #1d2742;      /* цель касания: тёмная плитка */
  --story-target-line: #3a4870;
}

/* ---------- экран ---------- */
.story { position: fixed; inset: 0; z-index: 60; overflow: hidden; background: var(--story-night); color: #c9d2e6;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; }
.story img { -webkit-user-drag: none; pointer-events: none; }

/* сцена: гнездо и статичный индиговый слой поверх (вместо ночной картинки) */
.story-scene { position: absolute; inset: 0; background: #2b3a55 url("../art/home/nest.webp") center / cover no-repeat; }
.story-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#1b2340d0, #0b1020f0); pointer-events: none; }
.story-scene > * { position: absolute; z-index: 1; }

/* Пых посреди гнезда; закрытые глаза — вставка поверх картинки той же стадии (как .hero-eyes в life.css) */
.story-pyh { left: 50%; bottom: max(14vh, 64px); transform: translateX(-50%); line-height: 0; }   /* лежит «в кровати»: одеяло укроет низ */
.story-pyh-img { display: block; height: clamp(150px, 34vh, 300px); width: auto; }
.story-eyes { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; }
.story-pyh.is-asleep .story-eyes { opacity: 1; }

/* Сова: маленькая, справа сверху, приглушена — она не спит, но и не зовёт */
.story-sova { right: max(16px, env(safe-area-inset-right)); top: max(14px, env(safe-area-inset-top)); height: clamp(64px, 13vh, 116px); width: auto; opacity: .55; }

/* ---------- цели касаний (≥ 160 px, без «верно/неверно») ---------- */
.story-picks { left: 50%; top: max(13vh, 84px); transform: translateX(-50%); width: min(520px, calc(100% - 32px));
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; transition: opacity .8s ease; }
.story-picks.is-gone { opacity: 0; pointer-events: none; }
.story-pick { min-width: 160px; min-height: 160px; width: 160px; height: 160px; padding: 0; display: grid; place-items: center;
  background: var(--story-target); border: 2px solid var(--story-target-line); touch-action: manipulation; cursor: pointer; }
.story-pick-img { width: 120px; height: 120px; object-fit: contain; }
.story-pick.is-picked { border-color: var(--story-amber); }
.story-pick:focus-visible, .story-lamp:focus-visible, .story-blanket:focus-visible { outline: 3px solid var(--story-amber); outline-offset: 3px; }

/* одеяло: целью касания служит весь блок — нижние 46 % сцены (≥ 160 px на любом экране, касание чуть выше края
   тоже засчитано). Само одеяло — лоскуты приглушённой охры и индиго в ::before: спрятано → выглядывает →
   наползает на Пыха (голова остаётся над краем) */
.story-blanket { left: 0; right: 0; bottom: 0; height: 46%; padding: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
.story-blanket::before { content: ""; position: absolute; inset: 0 -2%; border: 3px solid #7a6238; border-bottom: 0; border-radius: 34px 34px 0 0; pointer-events: none;
  transform: translateY(100%); transition: transform 1.2s ease-out;
  background-color: #33405f;
  background-image:
    repeating-linear-gradient(90deg, rgba(150, 118, 62, .55) 0 56px, transparent 56px 112px),
    repeating-linear-gradient(0deg, rgba(150, 118, 62, .45) 0 56px, transparent 56px 112px),
    repeating-linear-gradient(45deg, rgba(27, 35, 64, .35) 0 6px, transparent 6px 12px); }
.story-blanket.is-ready::before { transform: translateY(70%); }
.story-blanket.is-on::before { transform: translateY(34%); }   /* голова Пыха над краем на всех экранах */
.story-pyh[data-stage="egg"] ~ .story-blanket.is-on::before { transform: translateY(50%); }   /* у яйца окошко с мордочкой ниже */

/* фонарик: тёплое пятно света вокруг; погашен — свет уходит за 3 с */
.story-lamp { right: max(16px, env(safe-area-inset-right)); top: 34%; width: 160px; height: 160px; min-width: 160px; min-height: 160px;
  padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; touch-action: manipulation; }
.story-lamp::before { content: ""; position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(#f3c77a66, transparent 65%);
  transition: opacity 3s ease; pointer-events: none; }
.story-lamp.is-off::before { opacity: 0; }
.story-lamp-img { position: relative; width: 120px; height: auto; transition: opacity 3s ease; }
.story-lamp.is-off .story-lamp-img { opacity: .55; }

/* ---------- приглушение: чёрный слой ступенями ---------- */
.story-dim { position: absolute; inset: 0; z-index: 2; background: #000; opacity: 0; pointer-events: none; transition: opacity 1.5s ease; }
.story[data-dim="1"] .story-dim { opacity: .4; }    /* яркость 60 % */
.story[data-dim="2"] .story-dim { opacity: .7; }    /* 30 % */
.story[data-dim="3"] .story-dim { opacity: .9; }    /* 10 % */
.story[data-dim="4"] .story-dim { opacity: 1; }
.story[data-peek] .story-dim { opacity: .95; }      /* касание после конца: спящий Пых на ≈ 5 % */

/* тёмная фаза: сцены нет совсем (её и в DOM нет) — светится только почти невидимый месяц выхода */
.story[data-phase="dark"] .story-scene, .story[data-phase="over"] .story-scene { display: none; }

/* после конца: спящий Пых под чёрным слоем */
.story-asleep { position: absolute; inset: 0; z-index: 1; }
.story-asleep .story-pyh { position: absolute; }

/* ---------- кольцо удержания (SVG в .story-exit и .story-moon): stroke-dashoffset за 2 с — работает и на старом
   Safari без @property. Окружность r = 18 → длина 113,1 ---------- */
.story-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; overflow: visible; }
.story-ring circle { fill: none; stroke: rgba(246, 227, 184, .38); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 113.1; stroke-dashoffset: 113.1; opacity: 0; }
/* правило сильнее общего «без переходов» ниже (специфичность выше, тоже !important): кольцо идёт 2 с всегда */
.story .is-holding > .story-ring circle, .story-moon.is-holding > .story-ring circle {
  stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset 2s linear !important; }

/* ---------- выход взрослого: месяц в углу, удержание 2 с заполняет кольцо ---------- */
.story-exit { position: absolute; z-index: 3; left: max(10px, env(safe-area-inset-left)); top: max(10px, env(safe-area-inset-top));
  width: 72px; height: 72px; padding: 0; border: 0; border-radius: 50%; background: none; display: grid; place-items: center;
  touch-action: none; cursor: pointer; }
.story-exit-img { width: 44px; height: auto; opacity: .16; }
.story[data-phase="dark"] .story-exit-img, .story[data-phase="over"] .story-exit-img { opacity: .08; }
.story-exit .story-ring { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
.story-exit:focus-visible { outline: 2px solid rgba(246, 227, 184, .3); outline-offset: -2px; }

/* текст реплики — только для экранного диктора (облачка в сказке нет нигде) */
.story-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* «Уменьшить движение» и «Спокойные герои»: ступени мгновенно, одеяло сразу, свет гаснет сразу */
.story[data-calm] *, .story[data-calm] *::before, .story[data-calm] *::after { transition: none !important; animation: none !important; }

/* ---------- карта: кнопка-месяц (в .map-top-end) ---------- */
.story-moon { position: relative; width: 56px; height: 56px; min-width: 56px; padding: 0; border: 0; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; background: #24324a; box-shadow: 0 0 0 3px rgba(246, 227, 184, .28), 0 0 18px rgba(246, 227, 184, .55);
  touch-action: none; -webkit-touch-callout: none; cursor: pointer; }
.story-moon img { width: 38px; height: auto; pointer-events: none; -webkit-user-drag: none; }
.story-moon .story-ring { inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); }
.story-moon .story-ring circle { stroke: #24324a; stroke-width: 2.6; }   /* карта светлая: кольцо тёмное, как сам месяц */
.story-moon.is-armed { box-shadow: 0 0 0 3px var(--story-moon), 0 0 22px var(--story-moon); }
.story-moon:focus-visible { outline: 3px solid var(--story-moon); outline-offset: 3px; }

/* карточка «Остров спит до утра»: тот же ночной .sleep-card (parent.css), чуть темнее — остров спит целиком */
.sleep-card.story-night { background-color: #1d2840; }
.sleep-card.story-night::after { background: #1d2840; }
.story-night { cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .story *, .story *::before, .story *::after { transition: none !important; animation: none !important; }
}
:root[data-motion="off"] .story-night .sleep-z { animation: none; }

@media (max-width: 700px) {
  .story-pyh { bottom: max(16vh, 64px); }
  .story-pyh-img { height: clamp(130px, 28vh, 240px); }
  .story-picks { top: max(11vh, 76px); }
  .story-lamp { top: 30%; }
  .map-top-end .story-moon { width: 48px; height: 48px; min-width: 48px; }
  .map-top-end .story-moon img { width: 32px; }
}
/* телефон: месяц не влезает в одну строку с подписью Пыха, «0+» и «Для взрослых» (на 360 px шапка вылезала бы за
   экран) — группа справа переносится на вторую строку. Без :has (старый браузер) — как было */
@media (max-width: 480px) {
  .map-top:has(.story-moon) { flex-wrap: wrap; row-gap: 8px; }
  .map-top:has(.story-moon) .map-top-end { margin-left: auto; }
}
/* низкий экран (телефон лёжа): цели не налезают на Пыха */
@media (max-height: 520px) {
  .story-picks { top: 12px; }
  .story-pyh-img { height: 34vh; }
}