:root {
  /* light palette: misty rain-forest greens rather than a neutral mint.
     --muted is darker than the old #5e6e70 to hold AA contrast on the deeper --bg. */
  --bg: #ccd8d4;
  --bg-deep: #a9b8b4;
  --surface: rgba(238, 244, 241, .80);
  --surface-strong: #e4ebe7;
  --text: #172425;
  --muted: #4d5f60;
  --line: rgba(35, 64, 65, .18);
  --accent: #3d5d59;
  --accent-2: #6f8d84;
  --button-text: #f5f7f7;
  --shadow: 0 24px 70px rgba(28, 47, 48, .16);
  --radius: 22px;
  --header-h: 76px;

  --hero-title: clamp(64px, 6.2vw, 104px);
  --section-title: clamp(42px, 4vw, 68px);
  --card-title: clamp(26px, 2.1vw, 36px);
  --large-quote: clamp(34px, 3.2vw, 54px);
  --body-large: clamp(17px, 1.15vw, 20px);
  --body: 16px;
  --small: 13px;
}

@media (max-width: 720px) {
  :root {
    --hero-title: clamp(46px, 13vw, 62px);
    --section-title: clamp(34px, 10vw, 48px);
    --card-title: clamp(24px, 7vw, 30px);
    --large-quote: clamp(30px, 9vw, 42px);
    --body: 16px;
  }
}

html[data-theme="night"] {
  --bg: #090b0f;
  --bg-deep: #11151c;
  --surface: rgba(18, 20, 27, .74);
  --surface-strong: #171a21;
  --text: #eee9e8;
  --muted: #aaa5aa;
  --line: rgba(235, 226, 227, .14);
  --accent: #6d1524;
  --accent-2: #16213a;
  --button-text: #fff8f8;
  --shadow: 0 30px 100px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(ellipse 120% 55% at 18% -4%, rgba(255,255,255,.30), transparent 62%),
    radial-gradient(ellipse 85% 45% at 86% 14%, rgba(214,228,222,.42), transparent 66%),
    radial-gradient(ellipse 100% 40% at 50% 102%, rgba(112,136,130,.20), transparent 72%),
    linear-gradient(180deg, var(--bg), var(--bg-deep));
  color: var(--text);
  font-family: Inter, Arial, system-ui, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  transition: color .6s ease, background .6s ease;
}
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img { display: block; width: 100%; }
[hidden] { display: none !important; }

h1, h2, h3 {
  margin: 0 0 .6rem;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-wrap: balance;
}
h1 { font-size: var(--hero-title); }
h2 { font-size: var(--section-title); }
h3 { font-size: var(--card-title); }
p { margin: 0 0 1rem; }

.heroine-card h3, .vampire-card h3, .scenario-card h3,
.secret-cards h2, .story-chapter h3 { font-size: var(--card-title); }
.secret-quote p { font-size: var(--large-quote); }
.hero-copy, .section-heading > p:last-child { font-size: var(--body-large); }

.skip-link {
  position: fixed; left: 1rem; top: -5rem; z-index: 1000;
  padding: .75rem 1rem; background: var(--surface-strong); border-radius: 999px;
}
.skip-link:focus { top: 1rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: .75rem; font-weight: 600; }
.microcopy, .quiz-count { color: var(--muted); font-size: .86rem; }
.section-pad { padding: clamp(80px, 9vw, 100px) clamp(1rem, 5vw, 5rem); }
main section[id], main section { scroll-margin-top: 96px; }
.section-heading { max-width: 820px; margin-bottom: 1.75rem; }
.section-heading > p:last-child { max-width: 680px; color: var(--muted); }
.glass-card {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius);
}

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .82rem 1.25rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, background .25s ease, border-color .25s ease;
}
.button:hover { transform: translateY(-2px); }
.button.primary { color: var(--button-text); background: var(--accent); }
.button.ghost { background: rgba(255,255,255,.08); color: inherit; border-color: var(--line); }
.button-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.icon-button, .menu-toggle {
  min-height: 42px; border-radius: 999px; border: 1px solid var(--line); color: inherit;
  background: var(--surface); padding: .65rem .9rem; cursor: pointer;
}

.rain {
  position: fixed; inset: 0; pointer-events: none; z-index: 30; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fog { position: fixed; inset: auto -20vw; height: 45vh; pointer-events: none; z-index: 2; filter: blur(20px); opacity: .16; }
.fog-a { top: 15vh; background: radial-gradient(ellipse, rgba(230,240,240,.7), transparent 65%); animation: fog 18s ease-in-out infinite alternate; }
.fog-b { top: 55vh; background: radial-gradient(ellipse, rgba(180,196,196,.5), transparent 70%); animation: fog 26s ease-in-out infinite alternate-reverse; }
html[data-theme="night"] .fog { opacity: .08; }
@keyframes fog { from { transform: translateX(-6%); } to { transform: translateX(6%); } }

.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;
}
body.login-mode { overflow: hidden; height: 100dvh; }
.login-screen {
  height: 100dvh; min-height: 100dvh; max-height: 100dvh;
  display: flex; align-items: center; justify-content: flex-end;
  padding: clamp(1rem, 5vw, 5rem); position: relative; overflow: hidden;
}
@media (max-height: 700px) {
  body.login-mode { overflow-y: auto; height: auto; }
  .login-screen { height: auto; max-height: none; overflow-y: auto; padding-block: 1.5rem; }
}
/* 29% + no zoom: the four faces span 17%-59% of this portrait source, which at 16:10
   desktop is exactly the visible band — the old scale(1.03) shrank it and cut the
   back heroine's forehead. Do not re-add a zoom here without re-checking the crop. */
.login-backdrop {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(9,16,18,.32) 0%, rgba(9,16,18,.6) 45%, rgba(9,16,18,.86) 100%), url('/assets/light/light-gallery-forest-portrait.png') center 29% / cover;
}
.login-backdrop-mobile { display: none; }
.login-card {
  position: relative; z-index: 3; width: min(470px, calc(100vw - 32px)); height: auto;
  padding: 28px 32px; border-radius: var(--radius);
  background: rgba(14, 18, 20, .55); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow); color: #f4f1ee;
}
.login-card h1 { font-size: clamp(34px, 3.2vw, 56px); line-height: .96; text-wrap: balance; }
.login-card form { display: grid; gap: 14px; margin-top: 1.2rem; }
label { display: grid; gap: .45rem; font-size: .88rem; font-weight: 600; }
input, textarea, select {
  width: 100%; height: 52px; color: var(--text); background: rgba(255,255,255,.12); border: 1px solid var(--line);
  border-radius: 14px; padding: 0 1rem; outline: none;
}
input[type="checkbox"] {
  width: 20px; height: 20px; padding: 0; border-radius: 4px; accent-color: var(--accent-2); flex: none;
}
input[type="checkbox"]:focus { box-shadow: 0 0 0 3px rgba(111,141,132,.35); outline: none; }
.login-card input { color: #f4f1ee; background: rgba(255,255,255,.09); }
.login-card input::placeholder { color: rgba(244,241,238,.55); }
input:focus, textarea:focus, select:focus { border-color: var(--accent-2); box-shadow: 0 0 0 4px rgba(111,141,132,.15); }
.form-error { color: #e08b8f; min-height: 1.2em; font-size: .86rem; }
.login-card .button { height: 50px; min-height: 50px; white-space: nowrap; }
.login-card .button-row { margin-top: .2rem; flex-wrap: nowrap; }
@media (max-width: 420px) {
  .login-card .button-row { flex-direction: column; align-items: stretch; }
  .login-card .button-row .button { width: 100%; }
}
.concept-card {
  max-width: 780px; margin-inline: auto; text-align: center; padding: clamp(1.6rem, 4vw, 2.8rem);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.concept-sentence { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 1.15rem; color: var(--text); margin: .5rem 0 1.4rem; }
.text-link-alt {
  background: none; border: 0; color: var(--muted); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; font-size: .86rem; padding: .4rem 0; margin-top: 1.25rem;
}
.text-link-alt:hover { color: var(--text); }
.text-link {
  background: none; border: 0; color: rgba(244,241,238,.75); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; font-size: .84rem; padding: .4rem 0; margin-top: .6rem;
}
.text-link:hover { color: #f4f1ee; }

/* ---------- hidden moon (After Dark easter egg) ---------- */
.moon-trigger {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
  background: radial-gradient(circle at 35% 30%, #f4f1ec, #b9c2c6 55%, #7c868c 100%);
  color: #2b2f33; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; opacity: .8; transition: opacity .3s ease, transform .3s ease;
  box-shadow: 0 0 14px rgba(255,255,255,.18);
}
.moon-trigger svg { transform: scale(.85); }
.moon-trigger:hover { opacity: 1; transform: scale(1.08); }
html[data-theme="night"] .moon-trigger { display: none; }
@media (max-width: 720px) {
  .moon-trigger[hidden] { display: none; }
  .moon-trigger:not([hidden]) {
    position: fixed; right: 14px; bottom: 14px; z-index: 60;
  }
}
.moon-easter-egg {
  position: absolute; top: 10px; right: 10px; z-index: 2; width: 18px; height: 18px; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #f4f1ec, #9aa3a8 65%, transparent 100%);
  opacity: .5; transition: opacity .3s ease;
}
.moon-easter-egg:hover { opacity: .95; }

.site-header {
  position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: var(--header-h);
  padding: .75rem clamp(1rem, 3vw, 2.5rem); display: flex; align-items: center; gap: 1rem;
  background: linear-gradient(180deg, rgba(8,14,15,.7), transparent);
  color: #fff;
}
.site-header.scrolled { background: rgba(10,14,16,.74); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255,255,255,.12); }
.brand { text-decoration: none; display: grid; line-height: 1; margin-right: auto; }
.brand span { font-family: Georgia, "Times New Roman", serif; font-size: 1.5rem; font-weight: 700; letter-spacing: .08em; }
.brand small { font-size: .58rem; letter-spacing: .21em; margin-top: .2rem; }
.site-nav { display: flex; gap: 1.25rem; }
.site-nav a { text-decoration: none; font-size: .88rem; opacity: .86; }
.site-nav a:hover { opacity: 1; }
.header-actions { display: flex; gap: .6rem; align-items: center; }
.menu-toggle { display: none; color: #fff; background: rgba(0,0,0,.2); border-color: rgba(255,255,255,.18); }
.dark-entry { background: rgba(71, 9, 20, .78); color: #fff; }

.hero { min-height: min(88svh, 820px); position: relative; display: grid; align-items: end; overflow: hidden; }
.hero-media, .hero-media-mobile, .hero-shade { position: absolute; inset: 0; }
.hero-media, .hero-media-mobile {
  background-size: cover;
  background-position: center 46%;
  transform: scale(1.02);
  opacity: 0;
  transition: opacity .8s ease;
}
.hero-media.day-copy { filter: saturate(.55) brightness(1.08) contrast(.9); opacity: 1; }
.hero-media.night-copy { filter: saturate(.72) brightness(.9); }
html[data-theme="night"] .hero-media.day-copy { opacity: 0; }
html[data-theme="night"] .hero-media.night-copy { opacity: 1; display: block; }
.hero-media-mobile { display: none; }
.hero-shade { background: linear-gradient(90deg, rgba(6,13,15,.84), rgba(6,13,15,.18) 65%), linear-gradient(0deg, rgba(6,13,15,.72), transparent 55%); }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 140px rgba(0,0,0,.4); z-index: 2; }
html[data-theme="night"] .glass-card { box-shadow: 0 30px 90px rgba(109,21,36,.16), 0 2px 30px rgba(0,0,0,.4); border-color: rgba(235,226,227,.16); }
.hero-content { position: relative; z-index: 3; color: #f3f3f1; padding: calc(var(--header-h) + 5rem) clamp(1rem, 7vw, 7rem) clamp(6rem, 10vw, 9rem); max-width: 1100px; }
.hero-copy { max-width: 660px; font-size: clamp(1.05rem, 2vw, 1.35rem); }
.scroll-cue { position: absolute; right: 2rem; bottom: 2rem; z-index: 4; color: rgba(255,255,255,.65); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; writing-mode: vertical-rl; }

/* Светлая гостевая секция «Гость, дождь начался вовремя» — дневная.
   Раньше её скрывал только syncPersonalGreetingForTheme() внутри
   applyThemeSwap(), то есть исключительно во время перехода. При
   загрузке страницы сразу в Night (перезагрузка, восстановление вкладки,
   history) она оставалась видимой и становилась первым ночным экраном.
   Скрываем темой — тем же способом, что и остальные дневные блоки.
   В Light правило не действует, секция отображается как прежде. */
html[data-theme="night"] #personalGreeting { display: none; }

/* ---------- Light: the .hero section is After Dark only ----------
   Its day copy moved into .story-gateway below, which pairs that text with the
   Forks High frame instead of standing as a second text block. In night mode
   .hero is untouched; .story-gateway carries .day-copy and disappears there. */
html:not([data-theme="night"]) .hero { display: none; }

/* ---------- After Dark hero: split panel, no text over faces ---------- */
/* Обе колонки обязаны стоять в ОДНОЙ строке. Без явного grid-row
   разреженное авторазмещение уводило .hero-content во вторую строку:
   строка с изображением схлопывалась в 0px (справа оставалась пустая
   тёмная колонка), а текст переставал помещаться в первый экран. */
html[data-theme="night"] .hero {
  display: grid; grid-template-columns: 45% 55%; align-items: stretch;
  grid-template-rows: 1fr;
  height: auto; min-height: calc(100svh - var(--header-h));
}
html[data-theme="night"] .hero-media.night-copy {
  position: relative; inset: auto;
  grid-column: 2; grid-row: 1;
  opacity: 1; transform: none;
  min-height: 100%;
}
/* мягкое затемнение только со стороны текста, кадр не закрывается */
html[data-theme="night"] .hero-media.night-copy::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 13, 16, .92), rgba(10, 13, 16, .35) 22%, rgba(10, 13, 16, 0) 46%);
}
html[data-theme="night"] .hero-shade { display: none; }
html[data-theme="night"] .hero::after { box-shadow: inset 0 0 60px rgba(0,0,0,.2); }
html[data-theme="night"] .hero-content {
  grid-column: 1; grid-row: 1; position: relative; z-index: 3; max-width: none;
  background: #0a0d10; padding: clamp(2rem, 3.4vw, 3.6rem);
  display: flex; flex-direction: column; justify-content: center;
  min-width: 0;
}
/* Размер подобран по факту, а не по ориентиру: при 3.1vw заголовок даёт
   ровно 3 осмысленные строки на 1280 / 1440 / 1720 и не оставляет
   висящих «не», «что это», «просто». Более крупные кегли (3.6vw и выше)
   снова разбивали строку на одиночные слова. */
html[data-theme="night"] .hero-content h1 {
  font-size: clamp(40px, 3.1vw, 60px);
  line-height: 1.04;
  max-width: 18ch;
  text-wrap: balance;
}
html[data-theme="night"] .hero-content .hero-copy { max-width: 46ch; }
/* Иерархия действий: два решения ночи стоят в первой строке, возврат в
   Light уходит на отдельную строку как второстепенное действие. Раскладка
   задаётся контейнером — у самих кнопок никаких собственных отступов.
   flex-basis:100% гарантированно переносит третью кнопку на новую строку,
   max-content возвращает ей естественную ширину по левому краю группы. */
html[data-theme="night"] .hero-content .button-row {
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: 15px; row-gap: 18px;
}
html[data-theme="night"] .hero-content .button-row > #returnDayButton {
  flex-basis: 100%; max-width: max-content;
}
html[data-theme="night"] .scroll-cue { display: none; }

.heroine-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: start; }

.heroine-card { position: relative; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface-strong); overflow: hidden; }
html[data-theme="night"] .heroine-card { border-color: rgba(198,72,90,.32); background: #0e0a0c; }

.heroine-trigger {
  all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; position: relative;
}
.heroine-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: var(--radius); }

.heroine-media { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; display: block; }
.heroine-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s cubic-bezier(.2,.8,.2,1), filter .3s ease; }
.heroine-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(5,9,12,.82), rgba(5,9,12,.15) 42%, transparent 62%);
  pointer-events: none;
}
html[data-theme="night"] .heroine-media::after {
  background: linear-gradient(0deg, rgba(10,4,6,.88), rgba(10,4,6,.2) 46%, transparent 66%);
}
.heroine-trigger:hover .heroine-media img, .heroine-trigger:focus-visible .heroine-media img { transform: scale(1.02); }
.heroine-card[data-open="true"] .heroine-media img { transform: scale(1.015); filter: brightness(.92); }

.heroine-toggle-indicator {
  position: absolute; z-index: 3; top: .85rem; right: .85rem; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.45); pointer-events: none;
  transition: transform .28s ease, border-color .28s ease;
}
.heroine-toggle-indicator::before, .heroine-toggle-indicator::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.5px; background: #fff;
  transform: translate(-50%, -50%);
}
.heroine-toggle-indicator::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .28s ease; }
.heroine-card[data-open="true"] .heroine-toggle-indicator { transform: rotate(45deg); border-color: rgba(255,255,255,.75); }

.heroine-card-content {
  position: absolute; z-index: 2; left: 1rem; right: 1rem; bottom: 1rem; color: #fff; text-align: left; display: block;
}
.heroine-num { display: block; font-family: Georgia, "Times New Roman", serif; font-size: .78rem; letter-spacing: .1em; opacity: .8; }
.heroine-card-title { display: block; margin: .2rem 0 .15rem; font-family: Georgia, "Times New Roman", serif; line-height: 1.05; letter-spacing: -.02em; font-size: clamp(26px, 2.2vw, 42px); }
.heroine-archetype-short {
  display: block; font-size: .78rem; color: rgba(255,255,255,.78); margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.heroine-panel {
  max-height: 0; overflow: hidden;
  background: var(--surface); border-top: 0 solid var(--line);
  transition: max-height .32s cubic-bezier(.4,0,.2,1), border-top-width .32s ease;
}
html[data-theme="night"] .heroine-panel { background: #100c10; border-top-color: rgba(198,72,90,.28); }
.heroine-card[data-open="true"] .heroine-panel { border-top-width: 1px; }
.heroine-panel-inner { position: relative; padding: 22px clamp(20px, 3vw, 28px) 26px; }

.dossier-close {
  position: absolute; top: .75rem; right: .75rem; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent; color: inherit; cursor: pointer; line-height: 1;
}
.dossier-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.heroine-panel .heroine-panel-title { margin: 0 0 .2rem; font-size: clamp(28px, 2.4vw, 44px); }
.heroine-archetype { color: var(--muted); font-size: .82rem; margin: 0 0 .7rem; padding-right: 2rem; }
.heroine-stat-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.heroine-stat-chip {
  font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text);
  border: 1px solid var(--line); border-radius: 999px; padding: .3rem .65rem;
}
html[data-theme="night"] .heroine-stat-chip { border-color: rgba(198,72,90,.32); color: #eee9e8; }
.heroine-desc { font-size: 16px; margin-bottom: .8rem; }
.heroine-scale { margin-bottom: .9rem; }
.heroine-scale-label { display: flex; justify-content: space-between; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; }
.heroine-scale-track { height: 4px; border-radius: 99px; background: var(--line); overflow: hidden; }
.heroine-scale-fill { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
html[data-theme="night"] .heroine-scale-fill { background: linear-gradient(90deg, #6d1524, #b7a6a8); }

.quiz-section { position: relative; }
.quiz-card { max-width: clamp(920px, 62vw, 1180px); width: 100%; padding: clamp(1.3rem, 4vw, 2.4rem); scroll-margin-top: 96px; overflow-wrap: anywhere; }
.quiz-kicker { color: var(--muted); text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; }
.quiz-card h3 { font-size: clamp(28px, 3.2vw, 48px); margin: .3rem 0 .8rem; }
.quiz-description { color: var(--muted); max-width: 60ch; font-size: 1rem; }
.quiz-subnote { color: var(--muted); font-size: .84rem; margin-top: 1rem; }
.quiz-progress { height: 5px; background: var(--line); border-radius: 99px; overflow: hidden; margin-bottom: 1rem; }
.quiz-progress span { display: block; width: 0; height: 100%; background: var(--accent); transition: width .35s ease; }
.quiz-play-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.quiz-count { margin: 0; font-family: Georgia, "Times New Roman", serif; }
.quiz-label { margin: 0; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; }
.quiz-card #lightQuizQuestion, .quiz-card #adultQuizQuestion { outline: none; margin-top: .3rem; }
.quiz-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-top: 1.5rem; }
.quiz-option {
  text-align: left; color: inherit; background: rgba(255,255,255,.08); border: 1px solid var(--line);
  border-radius: 18px; padding: 1rem 1.1rem; cursor: pointer; font-size: clamp(16px, 1vw, 19px); min-height: 48px;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.quiz-option:hover:not(:disabled) { border-color: var(--accent-2); transform: translateX(4px); }
.quiz-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.quiz-option:disabled { cursor: default; opacity: .55; }
.quiz-option.is-selected { opacity: 1; background: var(--accent); color: var(--button-text); border-color: transparent; transform: translateX(4px); }
.quiz-back-button { margin-top: 1.2rem; min-height: 44px; }
.result-badge { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: .4rem .75rem; margin-bottom: 1rem; }
.result-field-label { display: block; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .15rem; }
.stat-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.stat-chip { display: flex; align-items: center; gap: .4rem; border: 1px solid var(--line); border-radius: 999px; padding: .35rem .8rem; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; }
.stat-chip strong { color: var(--accent-2); font-size: .8rem; }

.light-result-layout { display: grid; grid-template-columns: 44% 56%; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }
.light-result-media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; }
.light-result-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.adult-result-title { font-size: clamp(30px, 3.6vw, 52px); margin-bottom: .2rem; }
.adult-result-archetype { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; margin-bottom: 1rem; }
.adult-result-sub { font-size: 1.05rem; margin-bottom: 1.4rem; }
.adult-result-layout { display: grid; grid-template-columns: 42% 58%; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.adult-result-media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 4; }
.adult-result-image { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; border-radius: 0; }
.adult-result-block { margin-bottom: 1rem; }
.adult-result-heading { text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; color: var(--muted); margin: 0 0 .4rem; }
.adult-result-list { margin: 0; padding-left: 1.1rem; }
.adult-result-list li { margin-bottom: .3rem; }
.adult-result-quote { font-family: Georgia, "Times New Roman", serif; font-style: italic; margin-top: 1rem; }
.vampire-decision { margin-top: 1.2rem; }
.vampire-decision-status { font-size: .95rem; margin-bottom: .6rem; }
.button.is-done { opacity: .7; cursor: default; }

@media (max-width: 1050px) {
  .light-result-layout, .adult-result-layout { grid-template-columns: 1fr; }
  .light-result-media { aspect-ratio: 16 / 10; }
  .adult-result-media { max-width: 320px; margin-inline: auto; aspect-ratio: 3 / 4; }
  .quiz-options { grid-template-columns: 1fr; }
}

/* ---------- adult interactive story ---------- */
.story-card { max-width: 1320px; width: 100%; margin-inline: auto; scroll-margin-top: 96px; }
.story-start-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: clamp(1.3rem, 4vw, 2.4rem); text-align: center; }
.story-chapter-grid { display: grid; grid-template-columns: 58% 42%; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.story-chapter-grid.is-even { grid-template-columns: 42% 58%; }
.story-chapter-media { position: relative; min-height: 520px; max-height: 620px; order: 1; }
.story-chapter-grid.is-even .story-chapter-media { order: 2; }
.story-chapter-text { padding: clamp(1.4rem, 3vw, 2.4rem); display: flex; flex-direction: column; justify-content: center; order: 2; }
.story-chapter-grid.is-even .story-chapter-text { order: 1; }
.story-image { width: 100%; height: 100%; min-height: 520px; max-height: 620px; object-fit: cover; display: block; margin: 0; }
.story-kicker { color: var(--muted); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; margin-bottom: .3rem; }
.story-choices { display: grid; gap: .6rem; margin-top: 1rem; }
.story-choice { text-align: left; }
.story-response { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.story-response p { font-family: Georgia, "Times New Roman", serif; font-style: italic; }
.story-final-text { font-family: Georgia, "Times New Roman", serif; font-size: 1.2rem; font-style: italic; }

@media (max-width: 1050px) {
  .story-chapter-grid, .story-chapter-grid.is-even { grid-template-columns: 1fr; }
  .story-chapter-media, .story-chapter-grid.is-even .story-chapter-media { order: 1; min-height: 320px; }
  .story-chapter-text, .story-chapter-grid.is-even .story-chapter-text { order: 2; }
}

/* ---------- locked chapter (post-story bonus scene) ---------- */
.locked-chapter-card {
  max-width: 1320px; width: 100%; margin-inline: auto;
  display: grid; grid-template-columns: 56% 44%; align-items: stretch;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--surface);
}
.locked-chapter-media { position: relative; min-height: 420px; }
.locked-chapter-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(10,11,16,0) 68%, rgba(10,11,16,.55) 100%);
}
.locked-chapter-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.locked-chapter-placeholder {
  width: 100%; height: 100%; min-height: 420px; display: flex; align-items: center; justify-content: center;
  background: var(--surface-strong); color: var(--muted); text-align: center; padding: 2rem; font-size: .9rem;
}
.locked-chapter-text { padding: clamp(1.4rem, 3vw, 2.4rem); display: flex; flex-direction: column; justify-content: center; gap: .5rem; }
.locked-chapter-line { font-family: Georgia, "Times New Roman", serif; font-style: italic; }
.locked-chapter-final { color: var(--muted); font-style: italic; }
@media (max-width: 1050px) {
  .locked-chapter-card { grid-template-columns: 48% 52%; }
  .locked-chapter-media { min-height: 360px; }
}
@media (max-width: 720px) {
  .locked-chapter-card { grid-template-columns: 1fr; }
  .locked-chapter-media { aspect-ratio: 4 / 5; min-height: 0; }
  .locked-chapter-media::after { background: linear-gradient(180deg, rgba(10,11,16,0) 72%, rgba(10,11,16,.5) 100%); }
  #lockedChapterMedia img { object-position: 46% 16% !important; }
}

/* ---------- scene engine: light episodes + After Dark night chapters ---------- */

.scene-stack { display: grid; gap: clamp(32px, 4vw, 44px); }

.scene-card {
  position: relative; border: 1px solid var(--line); border-radius: clamp(24px, 2.5vw, 30px);
  overflow: hidden; background: var(--surface-strong);
}
.scene-card--image-left { display: grid; grid-template-columns: minmax(260px, 42%) 1fr; }
.scene-card--image-right { display: grid; grid-template-columns: 1fr minmax(260px, 42%); }
.scene-card--image-right .scene-media { order: 2; }
.scene-card--image-right .scene-body { order: 1; }
.scene-card--wide-top { display: grid; grid-template-columns: 1fr; }
.scene-card--wide-top .scene-media { aspect-ratio: 2 / 1; }
.scene-card--night { grid-template-columns: minmax(260px, 42%) 1fr; border-color: rgba(198,72,90,.32); background: #100c10; }

.scene-media { position: relative; overflow: hidden; min-height: 260px; }
.scene-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.scene-card--wide-top .scene-media { position: relative; min-height: 0; }
.scene-card--wide-top .scene-media img { position: absolute; }

.scene-body { padding: clamp(1.5rem, 3vw, 2.2rem); display: grid; gap: .5rem; align-content: start; }
.scene-number { font-family: Georgia, "Times New Roman", serif; font-size: 1.5rem; color: var(--muted); }
.scene-place { margin: 0; }
.scene-title { margin: .1rem 0 0; font-size: clamp(28px, 3vw, 48px); }
.scene-synopsis { color: var(--muted); margin: 0; max-width: 62ch; font-size: clamp(16px, 1vw, 18px); }
.scene-line-preview { font-family: Georgia, "Times New Roman", serif; font-style: italic; margin: 0; }
.scene-next-hint { margin: 0; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: #c98a98; }
.scene-trigger { justify-self: start; margin-top: .5rem; min-height: 42px; }

.scene-reveal { max-height: 0; overflow: hidden; transition: max-height .32s cubic-bezier(.4,0,.2,1); }
.scene-reveal-inner { padding-top: 1.4rem; }
.scene-intro, .scene-reading { max-width: 760px; }
.scene-continue { min-height: 40px; margin-top: .3rem; }
.scene-reading { margin-top: .3rem; }

.scene-p, .scene-line { font-size: clamp(18px, 1.1vw, 20px); line-height: 1.75; margin: 0 0 1.05em; }
.scene-line { font-family: Georgia, "Times New Roman", serif; font-style: italic; }
.scene-card--night .scene-p, .scene-card--night .scene-line { color: #e8e4e1; }

.scene-detail { font-size: .86rem; color: var(--muted); margin: .4rem 0 0; }
.scene-detail-label { text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; margin-right: .4rem; }
.scene-close { min-height: 40px; margin-top: 1rem; }

.scene-card--night .scene-place, .scene-card--night .scene-synopsis, .scene-card--night .scene-detail { color: #b9b2b6; }
.scene-card--night .scene-title, .scene-card--night .scene-line-preview { color: #e8e4e1; }
.scene-card--night .scene-reveal { border-top: 1px solid rgba(198,72,90,.28); background: #17111388; }

/* interactive clues */
.scene-clue { position: relative; margin: 1.1rem 0 1.4rem; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.scene-card--night .scene-clue { border-color: rgba(198,72,90,.28); background: #14101288; }
.clue-button { min-height: 40px; }
.clue-result { margin: .8rem 0 0; font-size: .88rem; color: var(--muted); min-height: 1.2em; }
.scene-card--night .clue-result { color: #b9b2b6; }

/* reveal container: takes no space and is inert until the clue is activated */
.clue-reveal {
  display: none; position: relative; overflow: hidden;
  aspect-ratio: 16 / 7; border-radius: calc(clamp(24px, 2.5vw, 30px) - 10px);
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s ease-out, transform .4s ease-out;
  margin-bottom: 16px; background: var(--surface-strong);
}
.scene-clue.is-revealed .clue-reveal { display: block; }
.clue-reveal.is-visible { opacity: 1; transform: translateY(0); }
.clue-reveal-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--reveal-focus, center); }
.clue-loading, .clue-error {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: .5rem .75rem;
  font-size: .78rem; text-align: center; color: #fff; background: rgba(5,6,10,.6);
}

.clue-effect { position: absolute; inset: 0; pointer-events: none; }

.clue-effect-fog { background: linear-gradient(135deg, rgba(255,255,255,.6), rgba(205,213,217,.4)); opacity: .9; transition: opacity .6s ease; }
.clue-fog.is-wiped .clue-effect-fog { opacity: 0; }

.clue-effect-zoom { border: 2px solid rgba(255,255,255,.5); }
.clue-zoom-tag {
  position: absolute; top: .6rem; left: .6rem; background: rgba(5,6,10,.6); color: #fff;
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; padding: .25rem .55rem; border-radius: 999px;
}

.clue-effect-flash { background: #f4f1ee; opacity: 0; }

.clue-effect-door {
  background: linear-gradient(90deg, rgba(244,238,225,.04) 0%, rgba(244,238,225,.04) 55%, rgba(244,238,225,.5) 78%, rgba(244,238,225,.04) 100%);
  transform: scaleX(.4); transform-origin: left center; transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.clue-door.is-open .clue-effect-door { transform: scaleX(1); }

.clue-reflection .clue-reveal { border: 1px solid rgba(255,255,255,.25); }
.clue-reflection .clue-reveal-img { filter: saturate(.92) brightness(.97); }

.clue-effect-dim { background: #05060a; opacity: 0; }

@media (max-width: 720px) {
  .clue-reveal { aspect-ratio: 16 / 10; }
  .clue-reveal-img { object-position: var(--reveal-focus-mobile, center); }
}

/* night progress */
.night-progress { list-style: none; display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; margin: 0 0 1.6rem; padding: 0; }
.night-progress-item { display: flex; align-items: center; gap: .5rem; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.night-progress-dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(235,226,227,.4); background: transparent; }
.night-progress-item.is-read .night-progress-dot { background: #c7c2c6; border-color: #c7c2c6; }
.night-progress-item.is-current .night-progress-dot { background: #a03146; border-color: #a03146; }
.night-progress-item.is-current { color: #e8e4e1; }

/* episode archive */
.archive-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 1rem; }
.archive-filter { min-height: 38px; padding: .4rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: .86rem; cursor: pointer; }
.archive-filter[aria-pressed="true"] { background: var(--accent); color: var(--button-text); border-color: transparent; }
.archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: .5rem; }
.archive-card { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface-strong); display: flex; flex-direction: column; }
.archive-poster { position: relative; aspect-ratio: 4 / 3; background: #0b0d10; overflow: hidden; }
.archive-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.archive-poster-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: rgba(255,255,255,.5); }
.archive-body { padding: 1rem 1.1rem 1.2rem; display: grid; gap: .3rem; }
.archive-number { font-family: Georgia, "Times New Roman", serif; color: var(--muted); font-size: .9rem; }
.archive-status { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; margin: 0; color: var(--muted); }
.archive-status-available { color: #3d6b52; }
.archive-status-after { color: #8a3f4d; }
.archive-status-secret { color: #8a6a2a; }
html[data-theme="night"] .archive-status-available { color: #7fb89a; }
html[data-theme="night"] .archive-status-after { color: #d99aa8; }
html[data-theme="night"] .archive-status-secret { color: #d9b45c; }
.archive-body h3 { margin: .1rem 0; font-size: 1.05rem; }
.archive-summary { color: var(--muted); font-size: .9rem; margin: 0 0 .5rem; }
.archive-open { min-height: 38px; justify-self: start; }
.archive-open[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.archive-empty { color: var(--muted); font-style: italic; }

@media (max-width: 720px) {
  .scene-card--image-left, .scene-card--image-right, .scene-card--wide-top, .scene-card--night { grid-template-columns: 1fr; }
  .scene-card--image-right .scene-media, .scene-card--image-right .scene-body { order: 0; }
  .scene-media { min-height: 0; aspect-ratio: 4 / 3; }
  .scene-title { font-size: clamp(28px, 9vw, 42px); }
  .scene-synopsis, .scene-p, .scene-line { font-size: 16px; }
  .scene-p, .scene-line { line-height: 1.72; }
  .archive-grid { grid-template-columns: 1fr; }
}

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(260px, 34vw); gap: 1rem; }
.gallery-item-wrap { position: relative; min-width: 0; }
.gallery-item { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; cursor: zoom-in; background: var(--surface-strong); }
.gallery-item-wrap > .gallery-item { position: absolute; inset: 0; }
.gallery-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.gallery-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,9,12,.72), transparent 46%); pointer-events: none; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, center); transition: transform .7s ease; display: block; }
.gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.03); }
.gallery-caption {
  position: absolute; z-index: 2; left: 1rem; right: 1rem; bottom: .9rem; color: #fff; text-align: left;
  font-family: Georgia, "Times New Roman", serif; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
}

/* ---------- light gallery: editorial grid ---------- */
.editorial-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto;
  grid-template-areas: "feature feature feature" "portrait scene-a scene-b";
  gap: 16px; max-width: 1320px; width: 100%; margin-inline: auto;
}
.editorial-grid .gallery-area-feature { grid-area: feature; aspect-ratio: 16 / 9; }
.editorial-grid .gallery-area-portrait { grid-area: portrait; aspect-ratio: 4 / 5; }
.editorial-grid .gallery-area-scene-a { grid-area: scene-a; aspect-ratio: 4 / 5; }
.editorial-grid .gallery-area-scene-b { grid-area: scene-b; aspect-ratio: 4 / 5; }

.lightbox { width: min(1100px, 94vw); max-height: 94vh; padding: 0; background: #08090b; color: white; border: 1px solid rgba(255,255,255,.18); border-radius: 22px; overflow: hidden; }
.lightbox::backdrop { background: rgba(0,0,0,.82); backdrop-filter: blur(10px); }
.lightbox img { max-height: 82vh; object-fit: contain; }
.lightbox p { padding: .8rem 1rem; margin: 0; }
.lightbox-indicator { padding: .8rem 1rem 0; font-size: .7rem; letter-spacing: .1em; color: rgba(255,255,255,.55); text-align: center; text-transform: uppercase; }
.lightbox-close { position: absolute; right: .75rem; top: .75rem; z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.55); color: white; font-size: 1.6rem; cursor: pointer; }
.lightbox-close:focus-visible, .lightbox-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.meme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; max-width: 1560px; margin-inline: auto; }
.meme-grid-more { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; margin-top: 1.1rem; }
.meme-archive-toggle { display: block; margin: 1.4rem auto 0; }
.meme-card { border-radius: 18px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; }
.meme-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.meme-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.meme-body { padding: 1.1rem 1.3rem 1.3rem; display: grid; gap: .45rem; align-content: start; }
.meme-label { color: var(--muted); }
.meme-main { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(20px, 2vw, 28px); line-height: 1.2; }
.meme-comment { margin: 0; color: var(--muted); font-size: .88rem; }

.meme-card-adult { background: #100c10; border-color: rgba(198,72,90,.32); transition: transform .25s ease; }
.meme-card-adult:hover { transform: translateY(-3px); }
.meme-card-adult .meme-label { color: #c7c2c6; }
.meme-card-adult .meme-main { color: #f2ece2; }
.meme-card-adult .meme-comment { color: #b9b2b6; }

.secret-tease { margin: 0 clamp(1rem, 5vw, 5rem); padding-inline: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; gap: 2rem; justify-content: space-between; align-items: center; }
.cta-section { min-height: min(56vh, 520px); position: relative; display: grid; align-items: center; overflow: hidden; }
.cta-media, .cta-shade { position: absolute; inset: 0; }
.cta-media { background-size: cover; background-position: center 45%; filter: brightness(.65) saturate(.7); }
.cta-media-plain { background: linear-gradient(135deg, var(--accent), var(--accent-2)); filter: none; }
.cta-shade { background: linear-gradient(90deg, rgba(5,7,10,.92), rgba(5,7,10,.18)); }
.cta-content { position: relative; z-index: 2; color: white; width: min(780px, 100%); padding: 4rem clamp(1rem, 7vw, 7rem); }

.order-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: clamp(1.2rem, 4vw, 2.4rem); }
.order-form fieldset { border: 1px solid var(--line); border-radius: 18px; padding: 1rem; display: grid; gap: .5rem; }
.order-form .check { display: flex; gap: .6rem; align-items: center; }
.order-form .check input { width: auto; }
.order-form .full { grid-column: 1 / -1; }
.hp-field { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.form-footer { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.form-footer p { max-width: 720px; color: var(--muted); margin: 0; }
.form-success { color: var(--accent-2) !important; font-weight: 600; }
.form-success.is-error { color: #e08b8f !important; }
.order-form [aria-invalid="true"] { border-color: #e08b8f; }
.form-inline-note { grid-column: 1 / -1; color: #a23a4a; font-size: .88rem; margin: -.4rem 0 0; }
.contacts { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-top: 1.5rem; }
.contacts a { text-decoration: none; border-bottom: 1px solid var(--line); }

.site-footer { padding: 2rem clamp(1rem, 5vw, 5rem); display: flex; gap: 2rem; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); }
.site-footer p { color: var(--muted); margin: .3rem 0 0; }

.age-dialog { width: min(600px, 92vw); border: 1px solid var(--line); border-radius: 28px; background: #11151a; color: #f3eeed; padding: 0; }
.age-dialog::backdrop { background: rgba(3,4,6,.78); backdrop-filter: blur(12px); }
.age-dialog form { padding: clamp(1.4rem, 4vw, 3rem); }

.toast { position: fixed; z-index: 300; bottom: 1rem; left: 50%; transform: translate(-50%, 130%); background: #101317; color: #fff; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: .75rem 1rem; transition: transform .35s ease; }
.toast.show { transform: translate(-50%, 0); }

.night-copy, .night-only { display: none; }
html[data-theme="night"] .day-copy { display: none; }
html[data-theme="night"] .night-copy { display: block; }
html[data-theme="night"] .night-only { display: inline-flex; }
html[data-theme="night"] .dark-entry { display: none; }

/* Согласие 21+ в форме заказа. `.order-form .check` (0,2,0) сильнее общего
   `.night-only` (0,1,0), поэтому строка оставалась видимой в светлой версии.
   Скрытие поднято до той же специфичности, ночное правило — выше него. */
.order-form .check.night-only { display: none; }
html[data-theme="night"] .order-form .check.night-only { display: inline-flex; }

.reveal { opacity: 1; transform: none; }
.reveal.js-pending { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.js-pending.is-visible { opacity: 1; transform: none; }

.secret-page { background: #090b0f; color: #eee9e8; }
.secret-shell { min-height: 100vh; }
.back-link { position: fixed; z-index: 20; top: 1rem; left: 1rem; text-decoration: none; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.16); padding: .7rem 1rem; border-radius: 999px; }
.secret-hero { min-height: min(64svh, 560px); position: relative; display: grid; align-items: end; }
.secret-hero-media, .secret-overlay { position: absolute; inset: 0; }
.secret-hero-media { background-size: cover; background-position: center 35%; }
.secret-overlay { background: linear-gradient(0deg, #090b0f 0, rgba(9,11,15,.15) 60%), linear-gradient(90deg, rgba(9,11,15,.9), transparent); }
.secret-content { position: relative; z-index: 2; padding: 8rem clamp(1rem, 7vw, 7rem); max-width: 850px; }
.secret-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.secret-cards article { padding: 1.5rem; }
.secret-quote { text-align: center; }
.secret-quote p { max-width: 950px; margin: auto; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 5vw, 5rem); line-height: 1; }

.nav-logout { display: none; }

@media (max-width: 1050px) {
  .site-nav { position: fixed; top: var(--header-h); left: 1rem; right: 1rem; display: none; flex-direction: column; padding: 1rem; border: 1px solid rgba(255,255,255,.15); border-radius: 20px; background: rgba(8,12,15,.93); backdrop-filter: blur(18px); }
  .site-nav.is-open { display: flex; }
  .menu-toggle { display: inline-flex; }
  .header-actions .icon-button { display: none; }
  .header-actions #logoutButton { display: none; }
  .nav-logout {
    display: block; width: 100%; text-align: left; margin-top: .5rem; padding-top: 1rem;
    border: 0; border-top: 1px solid rgba(255,255,255,.15); background: transparent; color: inherit;
    font-size: .88rem; cursor: pointer; min-height: 44px;
  }
  .heroine-grid { grid-template-columns: repeat(2, 1fr); }
  .secret-cards { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  :root { --header-h: 68px; --radius: 20px; }
  .section-pad { padding: clamp(52px, 14vw, 68px) 1rem; }
  .login-screen { align-items: center; justify-content: center; padding: 1.25rem; }
  .login-backdrop-desktop { display: none; }
  .login-backdrop-mobile {
    display: block;
    background: linear-gradient(0deg, rgba(9,16,18,.88) 10%, rgba(9,16,18,.35) 55%), url('/assets/light/light-gallery-baseball-jump.png') center 22% / cover;
  }
  .login-card { width: 100%; }
  .site-header { padding-inline: .75rem; }
  .brand small { display: none; }
  .header-actions { margin-left: auto; }
  .dark-entry { min-height: 40px; font-size: .76rem; padding-inline: .75rem; }
  .hero { min-height: 92svh; }
  .hero-media.day-copy, .hero-media.night-copy { display: none !important; }
  html:not([data-theme="night"]) .hero-media-mobile.day-copy { display: block; }
  html[data-theme="night"] .hero-media-mobile.night-copy { display: block; }
  .hero-content { padding: 8rem 1rem 4rem; }
  .scroll-cue { display: none; }
  html[data-theme="night"] .hero { display: block; height: auto; min-height: auto; }
  html[data-theme="night"] .hero-media-mobile.night-copy { position: relative; inset: auto; height: 46vh; opacity: 1; }
  html[data-theme="night"] .hero-shade, html[data-theme="night"] .hero::after { display: none; }
  html[data-theme="night"] .hero-content { padding: 1.5rem 1.25rem 2.5rem; background: #0a0d10; }
  /* 11vw разрывало заголовок на «Ночью никто / не / притворяется,».
     8.5vw убирает висящие слова на 360 / 390 / 430; на 320 отдельной
     строкой остаётся только финальное «атмосфера». */
  html[data-theme="night"] .hero-content h1 { font-size: clamp(30px, 8.5vw, 44px); max-width: none; }
  /* mobile: только расстояние; ширины кнопок остаются собственными */
  html[data-theme="night"] .hero-content .button-row { column-gap: 12px; row-gap: 12px; }
  .heroine-grid { display: grid; grid-template-columns: 1fr; gap: .9rem; }
  .heroine-card-title { font-size: clamp(24px, 7vw, 30px); }
  .heroine-panel .heroine-panel-title { font-size: clamp(24px, 7vw, 32px); }
  .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 60vh; }
  .editorial-grid {
    grid-template-columns: minmax(0, 1fr); gap: 14px;
    grid-template-areas: "feature" "portrait" "scene-a" "scene-b";
  }
  .editorial-grid .gallery-area-feature { aspect-ratio: 16 / 9; }
  .editorial-grid .gallery-area-portrait,
  .editorial-grid .gallery-area-scene-a,
  .editorial-grid .gallery-area-scene-b { aspect-ratio: 4 / 5; }
  .gallery-item img { object-position: var(--focus-mobile, var(--focus, center)); }
  .meme-grid, .meme-grid-more { grid-template-columns: 1fr; }
  .secret-tease { margin-inline: 1rem; flex-direction: column; align-items: flex-start; }
  .cta-section { min-height: 70vh; }
  .cta-content { padding-inline: 1rem; }
  .order-form { grid-template-columns: 1fr; }
  .order-form .full { grid-column: auto; }
  .site-footer { flex-direction: column; align-items: flex-start; }
  .login-card { color: #f4f5f4; }
}

/* ---------- new components: guest login extras ---------- */
.sound-check { display: flex; flex-direction: row; align-items: center; gap: .6rem; font-weight: 500; }
.sound-check input { width: auto; }
.full-width { width: 100%; margin-top: .75rem; }

/* ---------- personal greeting: cinematic prologue ---------- */
#main { padding-top: var(--header-h); }
.personal-greeting {
  position: relative; overflow: hidden;
  min-height: calc(100dvh - var(--header-h));
  margin-top: 0; padding-top: 0;
  display: flex; align-items: center;
}
.greeting-media, .greeting-media-mobile, .greeting-shade { position: absolute; inset: 0; }
.greeting-media { background-size: cover; background-position: center 25%; }
.greeting-media-mobile { display: none; }
.greeting-shade {
  background: linear-gradient(90deg, rgba(5,12,15,.96) 0%, rgba(5,12,15,.82) 32%, rgba(5,12,15,.28) 58%, rgba(5,12,15,0) 76%);
}
.greeting-content { position: relative; z-index: 3; color: #f3f3f1; max-width: 680px; padding: clamp(1.5rem, 6vw, 3rem) clamp(1.25rem, 6vw, 5rem); }
.greeting-content h2 { font-size: clamp(52px, 6vw, 104px); line-height: .94; margin: .3rem 0 .8rem; }
.greeting-content p { color: rgba(243,243,241,.85); }
.greeting-content .microcopy { max-width: 560px; color: rgba(243,243,241,.65); }

@media (max-width: 720px) {
  .greeting-media { display: none; }
  .greeting-media-mobile { display: block; background-size: cover; background-position: center 22%; }
  .greeting-shade { background: linear-gradient(0deg, rgba(5,12,15,.92) 20%, rgba(5,12,15,.3) 62%); }
  .greeting-content { padding: 1.5rem 1.25rem 2rem; max-width: none; }
  .greeting-content h2 { font-size: clamp(38px, 11vw, 56px); }
}

/* ---------- team choice (embedded in light quiz start screen) ---------- */
.quiz-team-label { font-size: .86rem; color: var(--muted); margin: 1rem 0 .5rem; }
.team-choice { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; }
.team-option {
  min-height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: inherit; padding: .55rem 1rem; font-size: .84rem; cursor: pointer;
}
.team-option.is-selected { background: var(--accent); color: var(--button-text); border-color: transparent; }

/* ---------- heroine extra copy ---------- */
.heroine-phrase {
  font-family: Georgia, "Times New Roman", serif; font-style: italic; color: var(--text); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}


/* ---------- vampire choice ---------- */
.vampire-reveal {
  margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line);
}
.vampire-reveal h3 { font-size: clamp(26px, 2.8vw, 40px); margin: .3rem 0 1.4rem; outline: none; }
.vampire-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.vampire-card {
  position: relative; display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface-strong); transition: border-color .25s ease, transform .25s ease;
}
.vampire-card-media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.vampire-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vampire-card-content { position: relative; padding: 1.1rem 1.2rem 1.3rem; display: grid; gap: .4rem; }
.vampire-archetype { margin: 0; color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; }
.vampire-line { margin: 0; font-size: .88rem; }
.vampire-stats { display: flex; gap: .6rem; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: .2rem 0; }
.vampire-phrase { margin: 0 0 .3rem; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: .86rem; }
.vampire-pick-button { min-height: 42px; justify-self: start; }
.vampire-home-badge {
  position: absolute; z-index: 2; top: .75rem; left: .75rem; background: rgba(8,10,14,.72); color: #e9e4e6;
  border: 1px solid rgba(235,226,227,.5); border-radius: 999px; padding: .3rem .7rem; font-size: .66rem;
  letter-spacing: .08em; text-transform: uppercase;
}
.vampire-card.is-picked { border-color: var(--accent); }
.vampire-card.is-confirmed { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.vampire-card.accent-a { border-top: 3px solid #8a94a6; }
.vampire-card.accent-a .vampire-archetype { color: #a9b3c2; }
.vampire-card.accent-b { border-top: 3px solid #3d5a8a; }
.vampire-card.accent-b .vampire-archetype { color: #6f8fc2; }
.vampire-card.accent-c { border-top: 3px solid #7a2f3a; }
.vampire-card.accent-c .vampire-archetype { color: #b96b78; }
.vampire-card.accent-d { border-top: 3px solid #2f5a3a; }
.vampire-card.accent-d .vampire-archetype { color: #7fae8f; }
.vampire-manual-confirm {
  margin-top: 1.2rem; padding: 1.2rem 1.4rem; border: 1px solid var(--line); border-radius: 18px; background: var(--surface);
}
.vampire-manual-label { margin: 0 0 .8rem; }

/* ---------- after-dark interactive path (shared) ---------- */
html[data-theme="night"] { --path-silver: #c9d1d4; --path-ivory: #f4ede4; }
.after-dark-path { --path-silver: #c9d1d4; --path-ivory: #f4ede4; }

.path-vampire-header { margin: 0 0 2.2rem; }
.path-header-ready, .path-header-pending {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .9rem 1.2rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
}
.path-header-ready img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.path-header-text { display: flex; flex-direction: column; gap: .1rem; }
.path-header-label { margin: 0; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.path-header-name { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.15rem; color: var(--path-ivory); }
.path-header-archetype { margin: 0; font-size: .85rem; color: var(--muted); }
.path-header-pending .path-header-text { max-width: 520px; }
.path-header-pending .path-header-label { color: var(--path-silver); font-size: .78rem; }
.path-header-ready .button, .path-header-pending .button { margin-left: auto; }

.path-indicator {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; list-style: none; margin: 0 0 2.6rem; padding: 0;
}
.path-indicator-step {
  display: inline-flex; align-items: center; gap: .5rem; background: none; border: none; color: var(--muted);
  font-size: .74rem; letter-spacing: .07em; padding: .3rem 0; cursor: default;
}
.path-indicator-step:not(:disabled) { cursor: pointer; color: var(--path-ivory); }
.path-indicator-dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--path-silver); flex: none; }
.path-indicator-step.is-done .path-indicator-dot { background: var(--path-silver); border-color: var(--path-silver); }
.path-indicator-step.is-current .path-indicator-dot { background: var(--accent); border-color: var(--accent); }
.path-indicator-step.is-current { color: var(--path-ivory); }
.path-indicator-step.is-future .path-indicator-dot { background: transparent; }
.path-indicator-step:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 4px; }

.path-step { padding: 1.6rem 0 2.2rem; border-top: 1px solid var(--line); transition: opacity .3s ease; }
.path-step:first-of-type { border-top: none; padding-top: 0; }
.path-step.is-locked { opacity: .5; pointer-events: none; }
.path-step-lock-note { margin: 0 0 1.2rem; font-style: italic; color: var(--muted); }
.path-step-label { margin: 0 0 .5rem; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--path-silver); }
.path-step-title { margin: 0 0 .7rem; font-size: clamp(40px, 4.8vw, 76px); line-height: 1.08; }
.path-step-desc { max-width: 640px; color: var(--muted); font-size: 17px; margin: 0 0 1.6rem; }
.path-step-result { margin: 1.2rem 0 0; font-style: italic; color: var(--path-ivory); }

/* ---------- step 01: temptations ---------- */
.temptations-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem; }
.temptation-card {
  position: relative; text-align: left; border-radius: 14px; border: 1px solid var(--line); background: var(--surface);
  color: inherit; padding: .9rem .9rem 1rem; cursor: pointer; display: flex; flex-direction: column; gap: .3rem;
  min-height: 150px; transition: border-color .2s ease;
}
.temptation-card.is-selected { border-color: var(--accent); }
.temptation-card:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.temptation-number { font-size: .7rem; color: var(--muted); letter-spacing: .05em; }
.temptation-symbol { font-size: 1.3rem; color: var(--path-silver); }
.temptation-order {
  position: absolute; top: .7rem; right: .7rem; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: var(--button-text); font-size: .72rem; display: flex; align-items: center; justify-content: center;
}
.temptation-title { font-size: clamp(15px, 1.4vw, 18px); font-weight: 600; margin-top: .2rem; }
.temptation-caption { font-size: .82rem; color: var(--muted); line-height: 1.4; }
.temptations-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.3rem; }
.temptations-counter { font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* ---------- step 02: tension ---------- */
.tension-widget {
  max-width: 1320px; width: 100%; margin-inline: auto; display: grid; grid-template-columns: 55% 45%;
  gap: clamp(1.5rem, 3vw, 3rem); align-items: center;
}
.tension-media { position: relative; max-width: 100%; }
.tension-widget img { width: 100%; border-radius: var(--radius); aspect-ratio: 4 / 5; max-height: 620px; object-fit: cover; transition: opacity .26s ease; }
.tension-widget img.is-fading { opacity: 0; }
.tension-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(244,237,228,.5); background: rgba(9,11,15,.55); color: var(--path-ivory); font-size: 1.2rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.tension-nav-prev { left: .8rem; }
.tension-nav-next { right: .8rem; }
.tension-controls { max-width: 560px; }
.tension-track { position: relative; padding: .6rem 0 1.1rem; outline: none; }
.tension-track-line { position: absolute; left: 4px; right: 4px; top: 16px; height: 1px; background: var(--line); }
.tension-track:focus-visible { outline: none; }
.tension-track:focus-visible .tension-dot.is-active { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.tension-dots { position: relative; display: flex; justify-content: space-between; }
.tension-dot {
  width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--path-silver); background: var(--bg);
  cursor: pointer; padding: 0;
  position: relative;
}
/* Сама точка остаётся 12/15px — размер, положение и линия трека не меняются.
   Пальцем в неё попасть было нельзя, поэтому область нажатия расширена
   невидимым псевдоэлементом: он вне потока и на раскладку не влияет.
   Тот же приём уже используется у .night-tension-dot в панели сцены. */
.tension-dot::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
}
.tension-dot.is-active { background: var(--accent); border-color: var(--accent); width: 15px; height: 15px; }
.tension-dot:focus-visible, .tension-nav:focus-visible, .scenario-pick-button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.tension-level-label { font-family: Georgia, "Times New Roman", serif; font-size: 1.5rem; margin: .3rem 0 .5rem; color: var(--path-ivory); }
.tension-scene { color: var(--muted); margin: 0 0 .7rem; }
.tension-phrase { font-family: Georgia, "Times New Roman", serif; font-style: italic; color: var(--path-silver); margin: 0 0 1.2rem; }

/* ---------- step 03: night scenario ---------- */
.scenario-fieldset { border: none; margin: 0; padding: 0; }
.scenario-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.scenario-card {
  display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface-strong); transition: border-color .2s ease;
}
.scenario-card.is-selected { border-color: var(--accent); }
.scenario-card-media { aspect-ratio: 16 / 11; overflow: hidden; }
.scenario-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scenario-card-content { padding: 1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: .35rem; }
.scenario-number { font-size: .7rem; color: var(--muted); }
.scenario-label { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--path-silver); margin: 0; }
.scenario-description { font-size: .9rem; margin: 0; }
.scenario-phrase { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: .86rem; color: var(--muted); margin: 0 0 .3rem; }
.scenario-pick-button { align-self: flex-start; min-height: 44px; }
.scenario-confirm-block {
  margin-top: 1.2rem; padding: 1.1rem 1.3rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
}
.scenario-confirm-label { margin: 0 0 .2rem; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.scenario-confirm-name { margin: 0 0 .8rem; font-family: Georgia, "Times New Roman", serif; font-size: 1.2rem; color: var(--path-ivory); }

/* ---------- step 04: red flag or aesthetic ---------- */
.redflag-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 1.6rem; align-items: start; }
.redflag-card-box {
  border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2.2rem); background: var(--surface);
}
.redflag-count { margin: 0 0 .8rem; font-size: .76rem; letter-spacing: .08em; color: var(--muted); }
.redflag-fact { font-family: Georgia, "Times New Roman", serif; font-size: clamp(22px, 2vw, 30px); margin: 0 0 .5rem; }
.redflag-comment { color: var(--muted); margin: 0 0 1.4rem; }
.redflag-buttons { display: flex; flex-wrap: wrap; gap: .7rem; }
.redflag-btn {
  flex: 1 1 200px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: inherit;
  padding: .9rem 1rem; cursor: pointer; font-size: .88rem; min-height: 48px;
}
.redflag-btn.is-selected { background: var(--accent); color: var(--button-text); border-color: transparent; }
.redflag-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.redflag-back-button { margin-top: 1.2rem; }
.redflag-decided-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.redflag-decided-item {
  width: 100%; text-align: left; background: none; border: 1px solid var(--line); border-radius: 10px; color: var(--muted);
  padding: .5rem .7rem; font-size: .76rem; cursor: pointer;
}
.redflag-decided-item:hover, .redflag-decided-item:focus-visible { color: var(--path-ivory); border-color: var(--path-silver); }
.redflag-final-summary { margin-top: 1.6rem; padding: 1.3rem 1.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.redflag-final-label { margin: 0; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.redflag-final-count { margin: .2rem 0 .5rem; font-family: Georgia, "Times New Roman", serif; font-size: 2rem; color: var(--path-ivory); }
.redflag-final-comment { margin: 0; color: var(--muted); }

/* ---------- final: night concept ---------- */
.path-concept { margin-top: 2.4rem; }
.path-concept-locked-button, #buildConceptButtonInline { min-height: 48px; }
.night-concept-card {
  display: grid; grid-template-columns: 44% 56%; gap: clamp(1.5rem, 3vw, 2.6rem); align-items: stretch;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface);
}
.night-concept-media { position: relative; min-height: 280px; }
.night-concept-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.night-concept-body { padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1.4rem, 3vw, 2.2rem) clamp(1.6rem, 3vw, 2.4rem) 0; display: flex; flex-direction: column; gap: .3rem; }
.night-concept-body h3 { font-size: clamp(30px, 3vw, 44px); margin: 0 0 .4rem; }
.night-concept-vampire { color: var(--path-silver); margin: 0 0 .6rem; }
.night-concept-phrase { font-family: Georgia, "Times New Roman", serif; font-style: italic; margin: .6rem 0; }
.night-concept-lounge-status { font-size: .84rem; color: var(--muted); margin: .2rem 0 1rem; }

/* ---------- adult memes ---------- */
.meme-grid-adult { grid-template-columns: repeat(3, 1fr); }
.meme-reactions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .2rem; }
.meme-reaction { border-radius: 999px; border: 1px solid var(--line); background: transparent; color: inherit; padding: .5rem .9rem; font-size: .76rem; cursor: pointer; min-height: 38px; }
.meme-reaction .count { color: var(--muted); }
.meme-reaction.is-active { background: var(--accent); color: var(--button-text); border-color: transparent; }
.meme-reaction.is-active .count { color: inherit; }
.meme-reaction:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.meme-card-adult .meme-reaction { border-color: rgba(198,72,90,.32); color: #f2ece2; }
.meme-card-adult .meme-reaction.is-active { background: #6d1524; border-color: transparent; color: #fff8f8; }
.meme-card-adult .meme-reaction:focus-visible { outline-color: #c76c7c; }

@media (max-width: 1050px) {
  .meme-grid-adult { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .meme-grid-adult { grid-template-columns: 1fr; }
}

/* ---------- adult quiz result / final summary ---------- */
.final-summary { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: .35rem .8rem; font-size: .78rem; color: var(--muted); background: var(--surface-strong); }

/* ---------- private lounge teaser ---------- */
#privateLoungeLabel { margin: 0 0 .3rem; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--path-silver, #c9d1d4); min-height: 1em; }
#privateLoungeStatus { color: var(--muted); font-size: .86rem; }
.lounge-key-wrap { display: flex; align-items: center; gap: .75rem; }
.silver-key {
  font-size: 1.5rem; display: inline-flex; color: #c9d1d4;
  text-shadow: 0 0 10px rgba(201,209,212,.7), 0 0 2px #fff;
  animation: key-glint 2.4s ease-in-out infinite;
}
@keyframes key-glint { 0%, 100% { opacity: .75; transform: rotate(-4deg); } 50% { opacity: 1; transform: rotate(4deg); } }
#privateLoungeLink.is-disabled { opacity: .45; pointer-events: none; cursor: not-allowed; }

/* ---------- sensual gallery (inside private archive) ---------- */
.gallery-door-section { max-width: 1480px; margin-inline: auto; }
.sensual-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sensual-grid .gallery-item { cursor: zoom-in; aspect-ratio: 4 / 5; }

@media (max-width: 1050px) {
  .sensual-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .sensual-grid { grid-template-columns: 1fr; }
}

/* ---------- lightbox nav + thumbs ---------- */
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.55); color: #fff; font-size: 1.8rem; cursor: pointer; line-height: 1;
}
.lightbox-prev { left: .75rem; }
.lightbox-next { right: .75rem; }
.lightbox-thumbs { display: flex; gap: .5rem; padding: .75rem 1rem 1rem; overflow-x: auto; }
.lightbox-thumb { flex: 0 0 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; cursor: pointer; background: none; }
.lightbox-thumb img { height: 100%; object-fit: cover; }
.lightbox-thumb.is-active { border-color: var(--accent-2); }

/* ---------- блокировка на время перехода ----------
   Страница не размывается, не масштабируется и не меняет прозрачность:
   её просто перекрывает непрозрачная красная масса. */
.is-transition-locked { pointer-events: none; }
/* height:100% сбрасывал прокрутку в начало — оставлен только запрет */
html.scroll-locked, html.scroll-locked body { overflow: hidden; }
/* пока идёт переход, браузер не должен сам подвинуть прокрутку из-за
   перекомпоновки скрываемых/раскрываемых секций: иначе восстановленная
   дневная позиция уезжает на десяток пикселей уже после ухода жидкости */
html.scroll-locked, html.scroll-locked body { overflow-anchor: none; }

/* ===================================================================
   ПЕРЕХОД: одна SVG-жидкость.
   Здесь только геометрия, цвет и типографика. Ни одного @keyframes:
   всё движение задаёт app.js через Web Animations API.
   =================================================================== */
.red-transition {
  position: fixed; inset: 0;
  z-index: 9999;
  overflow: hidden;
  pointer-events: none;
}
.red-transition.is-running { pointer-events: auto; }

.red-transition__liquid {
  position: absolute;
  /* Геометрия подобрана так, чтобы в закрытом положении низ массы
     уходил НИЖЕ низа экрана, а впадины волны — выше его верха.
     При bottom:-20vh/height:130vh снизу оставалась непокрытая полоса. */
  left: -5vw; bottom: -30vh;
  width: 110vw; height: 140vh;
  display: block;
  will-change: transform;
  transform: translate3d(0, 110%, 0);   /* стартовое положение: ниже экрана */
}

.red-transition__phrase {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  width: max-content; max-width: min(24ch, 84vw);
  color: #f3ebe4;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.2rem, 2.4vw, 2rem);
  line-height: 1.34; letter-spacing: .012em;
  text-align: center; text-wrap: balance;
  opacity: 0;
}

/* ---------- материал жидкости ----------
   Цвет и прозрачность каждого стопа градиента. Разметка задаёт только
   позиции стопов, поэтому оттенок правится здесь.

   Бордовое вино, а не алый и не чёрный. Прозрачность растёт к глубине:
   сквозь массу угадываются силуэты страницы, но читать текст нельзя.
   Общий opacity на SVG не ставится — он одинаково ослабил бы и светлую
   кромку, и глубину. */
#redLiquidGradient .rl-stop-0    { stop-color: #791c3b; stop-opacity: .84; }
/* широкий рассеянный винный блик у поверхности: ощущение влажной
   густой жидкости, без белой полосы и пластикового глянца */
#redLiquidGradient .rl-stop-glow { stop-color: #9a3552; stop-opacity: .47; }
#redLiquidGradient .rl-stop-1    { stop-color: #64152f; stop-opacity: .87; }
#redLiquidGradient .rl-stop-2    { stop-color: #501024; stop-opacity: .90; }
#redLiquidGradient .rl-stop-3    { stop-color: #3c0b1a; stop-opacity: .92; }
#redLiquidGradient .rl-stop-4    { stop-color: #2d0713; stop-opacity: .94; }

/* ---------- in-page private lounge overlay ---------- */
.lounge-overlay {
  position: fixed; inset: 0; z-index: 500; background: #08090c; color: #f1ece6;
  --lounge-wine: #6d1524; --lounge-silver: #c9d1d4; --lounge-ivory: #f1ece6;
}
.lounge-overlay[hidden] { display: none; }
.lounge-scroll { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.lounge-close {
  position: fixed; z-index: 520; top: 1rem; right: 1rem; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.55); color: #fff; font-size: 1.7rem; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.lounge-close:focus-visible { outline: 2px solid var(--lounge-silver, #c9d1d4); outline-offset: 2px; }
body.lounge-open { overflow: hidden; }
.back-link { cursor: pointer; }

/* ---------- lounge open animation (silver key / lock) ---------- */
.lounge-lock-anim {
  position: fixed; inset: 0; z-index: 530; display: flex; align-items: center; justify-content: center;
  background: #050608; opacity: 0; pointer-events: none;
}
.lounge-lock-anim.is-active { opacity: 1; pointer-events: all; animation: lounge-lock-fade 900ms ease forwards; }
.lounge-lock-key { color: var(--lounge-silver, #c9d1d4); display: inline-block; opacity: 0; }
.lounge-lock-anim.is-active .lounge-lock-key { animation: lounge-key-turn 900ms cubic-bezier(.6,0,.4,1) forwards; }
@keyframes lounge-lock-fade { 0% { opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lounge-key-turn {
  0% { opacity: 0; transform: rotate(-35deg) scale(.8); }
  30% { opacity: 1; transform: rotate(-35deg) scale(1); }
  70% { opacity: 1; transform: rotate(15deg) scale(1.05); }
  100% { opacity: 0; transform: rotate(25deg) scale(1.05); }
}
html.lounge-fade-transition .lounge-lock-anim,
html.lounge-fade-transition .lounge-overlay { transition: opacity .3s ease; }

/* ---------- lounge: shared section rhythm ---------- */
.lounge-section { padding: clamp(72px, 8vw, 104px) clamp(1rem, 5vw, 5rem); border-top: 1px solid rgba(241,236,230,.08); }
.lounge-section .eyebrow { color: var(--lounge-silver, #c9d1d4); }
.lounge-section h2 { font-size: clamp(34px, 4vw, 58px); margin: .3rem 0 1rem; line-height: 1.08; }
.lounge-section > p { max-width: 640px; color: rgba(241,236,230,.72); }

/* ---------- 1. hero ---------- */
.lounge-hero { position: relative; display: grid; grid-template-columns: 56% 44%; align-items: stretch; min-height: 0; }
.lounge-hero-media { position: relative; overflow: hidden; }
.lounge-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; min-height: 460px; }
.lounge-hero-content {
  padding: clamp(2rem, 4vw, 3.4rem); display: flex; flex-direction: column; justify-content: center; gap: .6rem;
  background: linear-gradient(180deg, rgba(8,9,12,.2), rgba(8,9,12,.55));
}
.lounge-hero-content h1 { font-size: clamp(42px, 5vw, 78px); margin: .2rem 0 .6rem; line-height: 1.05; }
.lounge-hero-personal { margin: .6rem 0 1.2rem; color: var(--lounge-silver, #c9d1d4); }
.lounge-hero-personal strong { color: var(--lounge-ivory, #f1ece6); font-family: Georgia, "Times New Roman", serif; font-size: 1.2rem; }

/* ---------- 2. envelopes ---------- */
/* Предметная пауза перед письмами. Пропорция совпадает с исходным кадром
   (1402×1122), поэтому кадр не обрезается ни на одной ширине. Радиус и
   рамка — те же, что у карточек конвертов рядом. */
.lounge-envelopes-media {
  margin: 1.6rem 0 0; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(241,236,230,.14);
}
.lounge-envelopes-media img { width: 100%; height: auto; display: block; }

.envelope-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.6rem; }
.envelope-card {
  position: relative; border: 1px solid rgba(241,236,230,.14); border-radius: 16px; padding: 1.2rem 1.3rem;
  background: rgba(255,255,255,.03); display: flex; flex-direction: column; gap: .4rem; transition: border-color .2s ease;
}
.envelope-card.is-read { border-color: var(--lounge-wine, #6d1524); }
.envelope-number { font-size: .72rem; letter-spacing: .08em; color: var(--lounge-silver, #c9d1d4); }
.envelope-card h3 { font-size: clamp(20px, 1.8vw, 26px); margin: 0; font-family: Georgia, "Times New Roman", serif; }
.envelope-status { font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--lounge-wine, #a23a4a); margin: 0; }
.envelope-preview { font-size: .9rem; color: rgba(241,236,230,.68); margin: 0 0 .4rem; }
.envelope-open-button { align-self: flex-start; min-height: 44px; }

/* ---------- 3. unsent message ---------- */
.lounge-message-meta { font-size: .95rem; color: rgba(241,236,230,.6); margin: 0 0 1.2rem; }
.lounge-message-text { max-width: 640px; font-family: Georgia, "Times New Roman", serif; font-size: 19px; line-height: 1.7; margin: 0 0 1.4rem; }
.lounge-message-archived-note { font-style: italic; color: var(--lounge-silver, #c9d1d4); margin: 0 0 1rem; }

/* ---------- 4. locked chapter ---------- */
.lounge-chapter-card { display: grid; grid-template-columns: 42% 58%; gap: clamp(1.4rem, 3vw, 2.6rem); align-items: center; margin-top: 1.4rem; }
.lounge-chapter-media { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; background: rgba(255,255,255,.04); }
.lounge-chapter-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.locked-chapter-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--lounge-silver, #c9d1d4); font-style: italic; margin: 0; }
.lounge-chapter-preview { max-width: 520px; color: rgba(241,236,230,.72); }
.lounge-chapter-status { color: var(--lounge-silver, #c9d1d4); font-style: italic; margin-top: 1rem; }

/* ---------- 5/6. archive door + gallery ---------- */
.lounge-archive-door p { margin-bottom: 1.4rem; }
.lounge-gallery { position: relative; padding-top: clamp(48px, 6vw, 72px); opacity: 1; transition: opacity .4s ease; }
.lounge-gallery.is-revealing { opacity: 0; }
.lounge-gallery[hidden] { display: none; }

/* ---------- 7. alternate ending ---------- */
.lounge-alt-ending { position: relative; }
.lounge-alt-line { font-family: Georgia, "Times New Roman", serif; font-style: italic; margin: .3rem 0; }

/* ---------- 8. final summary ---------- */
.lounge-summary #loungeSummaryContent p { margin: 0 0 .5rem; }
.lounge-summary .button-row { margin-top: 1.4rem; }
.secret-progress { text-align: center; padding: 0 1rem 2rem; color: var(--lounge-silver, #c9d1d4); font-style: italic; }
.lounge-return { text-align: center; padding-top: 0; }

/* ---------- hidden secrets embedded in the environment ---------- */
.lounge-secret-spot {
  position: absolute; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(201,209,212,.35);
  background: rgba(8,9,12,.4); color: rgba(201,209,212,.7); font-size: .8rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.lounge-secret-spot.is-found { color: var(--lounge-wine, #a23a4a); border-color: var(--lounge-wine, #a23a4a); }
.lounge-secret-spot:focus-visible { outline: 2px solid var(--lounge-silver, #c9d1d4); outline-offset: 2px; }
.lounge-hero-media .lounge-secret-spot { bottom: 1rem; right: 1rem; }
.envelope-card .lounge-secret-spot-corner { position: absolute; top: -.5rem; right: -.5rem; }
.lounge-secret-spot-inline { position: static; display: inline-flex; margin-left: .4rem; vertical-align: middle; }
.gallery-item .lounge-secret-spot-corner { top: .5rem; right: .5rem; }

/* ---------- reading panel (letters + locked chapter) ---------- */
.reading-panel {
  position: fixed; inset: 0; z-index: 540; background: rgba(6,7,9,.86); display: flex; align-items: flex-start;
  justify-content: center; overflow-y: auto; padding: clamp(1.2rem, 4vw, 4rem) 1rem;
}
.reading-panel[hidden] { display: none; }
.reading-panel-inner {
  position: relative; width: 100%; max-width: 820px; background: #14161b; border: 1px solid rgba(201,209,212,.18);
  border-radius: 20px; padding: clamp(18px, 3vw, 40px);
}
.reading-panel-close {
  position: absolute; top: .9rem; right: .9rem; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(241,236,230,.25); background: transparent; color: inherit; font-size: 1.4rem; cursor: pointer;
}
.reading-panel-status { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--lounge-wine, #a23a4a); margin: 0 0 .5rem; }
.reading-panel-inner h3 { font-size: clamp(28px, 3vw, 46px); margin: 0 0 1.2rem; font-family: Georgia, "Times New Roman", serif; outline: none; }
#readingPanelBody { font-size: 19px; line-height: 1.75; max-width: 66ch; }
#readingPanelBody p { margin: 0 0 1.1rem; }
body.reading-panel-open { overflow: hidden; }

@media (max-width: 1050px) {
  .envelope-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .lounge-hero { grid-template-columns: 1fr; }
  .lounge-hero-media img { min-height: 320px; }
  .lounge-chapter-card { grid-template-columns: 1fr; }
  .lounge-chapter-media { aspect-ratio: 16 / 10; }
}

@media (max-width: 720px) {
  .lounge-section { padding: clamp(48px, 12vw, 64px) 18px 20px; }
  .envelope-grid { grid-template-columns: 1fr; }
  .lounge-hero-content .button-row, .lounge-alt-ending .button-row, .lounge-summary .button-row { flex-direction: column; align-items: stretch; }
  .reading-panel-inner { padding: 18px 20px; }
  #readingPanelBody { font-size: 16px; line-height: 1.65; }
  .reading-panel-inner h3 { font-size: clamp(26px, 6vw, 34px); }
}

@media (max-width: 1050px) {
  .vampire-grid { grid-template-columns: repeat(2, 1fr); }
  .scenario-grid { grid-template-columns: repeat(2, 1fr); }
  .temptations-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .redflag-layout { grid-template-columns: 1fr; }
  .redflag-decided-list { flex-direction: row; flex-wrap: wrap; }
  .redflag-decided-item { width: auto; }
}

@media (max-width: 720px) {
  .vampire-grid { grid-template-columns: 1fr; }
  .scenario-grid { grid-template-columns: 1fr; }
  .lightbox-nav { width: 40px; height: 40px; font-size: 1.4rem; }

  .temptations-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .temptation-card { min-height: 130px; }

  .tension-widget { grid-template-columns: 1fr; }
  .tension-media { max-width: 340px; margin-inline: auto; }
  .tension-controls { max-width: 100%; }

  .night-concept-card { grid-template-columns: 1fr; }
  .night-concept-media { min-height: 260px; }
  .night-concept-body { padding: 1.4rem; }
}

@media (max-width: 480px) {
  .temptations-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rain, .fog { display: none; }
  .reveal { opacity: 1; transform: none; }
}

/* ===================================================================
   LIGHT-MODE ATMOSPHERE LAYER
   Everything below is scoped to html:not([data-theme="night"]) so the
   After Dark palette stays byte-for-byte as it was. Visual only — no
   markup, copy, ordering or behaviour depends on any of these rules.
   =================================================================== */

/* --- fine grain over the page background only ---
   z-index:-1 keeps it above the body background but under all in-flow
   content, so text never sits on top of the texture. */
html:not([data-theme="night"]) body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .28; mix-blend-mode: multiply;
  background-image: url('/assets/light/light-grain.svg');
  background-size: 140px 140px;
}

/* --- light hero: dissolve into the page instead of a flat slab ---
   Translucent so the grain above shows through, and fading to
   transparent at the bottom removes the old hero -> intro step. */
html:not([data-theme="night"]) .hero {
  background: linear-gradient(180deg,
    rgba(228,235,231,.97) 0%,
    rgba(228,235,231,.62) 58%,
    rgba(228,235,231,0) 100%);
}

/* The greeting block no longer carries a cropped background portrait: it now
   holds the approved group frame as an in-flow <picture>. Its geometry rules
   live in the "FIRST LIGHT SCREEN" section at the end of this file. */

/* The old light seam gradient washed the bottom of the frame out (it faded the
   photo into --surface-strong over the last 88-200px, greying the path, dresses
   and the lower half of the house). The greeting now ends on the photograph. */
html:not([data-theme="night"]) .personal-greeting::after { content: none; }

/* --- order form: dark brand card instead of bare system controls --- */
html:not([data-theme="night"]) .order-form {
  background: linear-gradient(168deg, rgba(19,28,29,.95), rgba(11,18,19,.97));
  border-color: rgba(233,240,237,.14);
  box-shadow: 0 34px 90px rgba(10,22,22,.32);
  color: #e9f0ec;
}
html:not([data-theme="night"]) .order-form label,
html:not([data-theme="night"]) .order-form legend { color: #dde7e2; }
html:not([data-theme="night"]) .order-form fieldset {
  border-color: rgba(233,240,237,.16);
  background: rgba(255,255,255,.03);
}
html:not([data-theme="night"]) .order-form input,
html:not([data-theme="night"]) .order-form textarea,
html:not([data-theme="night"]) .order-form select {
  color: #f2f6f4;
  background: rgba(255,255,255,.06);
  border-color: rgba(233,240,237,.18);
}
html:not([data-theme="night"]) .order-form ::placeholder { color: rgba(226,236,232,.42); }
html:not([data-theme="night"]) .order-form input:focus,
html:not([data-theme="night"]) .order-form textarea:focus,
html:not([data-theme="night"]) .order-form select:focus {
  border-color: var(--accent-2);
  background: rgba(255,255,255,.09);
  box-shadow: 0 0 0 4px rgba(111,141,132,.22);
}
/* the option popup is OS-drawn, so it needs its own light pairing */
html:not([data-theme="night"]) .order-form select option { color: #16211f; background: #e7edea; }
html:not([data-theme="night"]) .order-form .form-footer p { color: rgba(221,231,226,.72); }
html:not([data-theme="night"]) .order-form .form-success { color: #9ec6b7 !important; }
html:not([data-theme="night"]) .order-form .form-success.is-error { color: #f0a6aa !important; }
html:not([data-theme="night"]) .form-inline-note { color: #f0a6aa; }
html:not([data-theme="night"]) .order-form .button.primary { background: var(--accent-2); color: #0b1614; }
html:not([data-theme="night"]) .order-form [aria-invalid="true"] { border-color: #f0a6aa; }

/* --- native date field brought into the palette --- */
html:not([data-theme="night"]) .order-form input[type="date"] { color: rgba(242,246,244,.78); }
html:not([data-theme="night"]) .order-form input[type="date"]:focus { color: #f2f6f4; }
html:not([data-theme="night"]) .order-form input[type="date"]::-webkit-datetime-edit { color: inherit; }
html:not([data-theme="night"]) .order-form input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1); opacity: .5; cursor: pointer; transition: opacity .2s ease;
}
html:not([data-theme="night"]) .order-form input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: .9; }

/* --- checkboxes: brand accent, rounded, instead of the system control ---
   The 20px sizing has to win over `.order-form .check input { width: auto }`,
   which is why these selectors are qualified rather than bare. */
html:not([data-theme="night"]) input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; min-width: 20px; flex: none;
  margin: 0; padding: 0;
  border: 1px solid rgba(233,240,237,.42);
  border-radius: 6px;
  background: rgba(255,255,255,.08);
  display: inline-grid; place-content: center;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
html:not([data-theme="night"]) input[type="checkbox"]::before {
  content: ""; width: 11px; height: 11px;
  background: #0c1614;
  transform: scale(0); transition: transform .16s ease-in-out;
  clip-path: polygon(14% 46%, 0 60%, 40% 100%, 100% 22%, 86% 8%, 38% 70%);
}
html:not([data-theme="night"]) input[type="checkbox"]:checked {
  background: var(--accent-2); border-color: var(--accent-2);
}
html:not([data-theme="night"]) input[type="checkbox"]:checked::before { transform: scale(1); }
html:not([data-theme="night"]) input[type="checkbox"]:hover { border-color: rgba(233,240,237,.7); }
html:not([data-theme="night"]) input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent-2); outline-offset: 2px;
}

/* --- sound button: the two states have to read apart at a glance ---
   Previously both states inherited the header's white text on the pale
   --surface pill, so "Звук включён" looked disabled. */
html:not([data-theme="night"]) .sound-toggle-button {
  font-weight: 600;
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}
/* The pill is desktop-only: `.header-actions .icon-button` is display:none below
   1051px, so the flex layout has to stay behind the same breakpoint or it would
   out-specify that rule and resurrect the button on phones. */
@media (min-width: 1051px) {
  html:not([data-theme="night"]) .sound-toggle-button {
    display: inline-flex; align-items: center; gap: .45rem;
  }
}
html:not([data-theme="night"]) .sound-toggle-button::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: currentColor; opacity: .4;
  transition: opacity .22s ease, box-shadow .22s ease;
}
/* Alphas eased down a step so the pill does not read as the heaviest object on
   a header that is now mostly transparent. Colours and states are unchanged. */
html:not([data-theme="night"]) .sound-toggle-button[aria-pressed="false"] {
  background: rgba(10,17,19,.44); color: #e7eeea; border-color: rgba(231,238,234,.3);
}
html:not([data-theme="night"]) .sound-toggle-button[aria-pressed="false"]:hover {
  background: rgba(10,17,19,.66); border-color: rgba(231,238,234,.5);
}
/* Active state is a deeper muted grey-green that belongs to the glass header,
   not a pale mint fill. The lit green dot carries the on/off signal. */
html:not([data-theme="night"]) .sound-toggle-button[aria-pressed="true"] {
  background: rgba(34,58,54,.70); color: #eaf2ee; border-color: rgba(150,196,178,.44);
}
html:not([data-theme="night"]) .sound-toggle-button[aria-pressed="true"]::before {
  opacity: 1; background: #7fc9a6; box-shadow: 0 0 0 3px rgba(127,201,166,.20);
}

/* --- final light CTA: fog + rain instead of a flat green fill --- */
html:not([data-theme="night"]) .cta-media-plain {
  background:
    radial-gradient(ellipse 80% 60% at 18% 0%, rgba(233,241,236,.20), transparent 62%),
    radial-gradient(ellipse 70% 55% at 88% 100%, rgba(8,20,18,.34), transparent 66%),
    linear-gradient(135deg, var(--accent), var(--accent-2));
}
html:not([data-theme="night"]) .cta-media-plain::before,
html:not([data-theme="night"]) .cta-media-plain::after {
  content: ""; position: absolute; pointer-events: none;
}
html:not([data-theme="night"]) .cta-media-plain::before {
  inset: -12% -6%;
  background-image: repeating-linear-gradient(101deg,
    rgba(255,255,255,0) 0 9px,
    rgba(255,255,255,.055) 9px 10px,
    rgba(255,255,255,0) 10px 20px);
  animation: cta-rain-drift 9s linear infinite alternate;
}
html:not([data-theme="night"]) .cta-media-plain::after {
  inset: 0; opacity: .16; mix-blend-mode: overlay;
  background-image: url('/assets/light/light-grain.svg');
  background-size: 160px 160px;
}
@keyframes cta-rain-drift {
  from { transform: translate3d(0, -3%, 0); }
  to   { transform: translate3d(0, 3%, 0); }
}

/* ===================================================================
   FIRST LIGHT SCREEN — approved group frame in .personal-greeting
   This is the block the visitor sees first after logging in ("Гость,
   дождь начался вовремя"). The frame lives here and nowhere else; the
   editorial .hero below keeps its own text-only treatment.

   The image is never cropped: `height:auto` renders the full frame at
   every width, so "all four heroines visible" is a geometric guarantee
   rather than a tuned background-position that could drift.
     desktop 1672x941 (16:9)  -> block height = width / 1.777
     mobile  1122x1402 (4:5)  -> block height = width * 1.249 + copy

   Measured on the source file: the heroines' bodies start at 40.5% of
   the frame width and their skin at 45.2%, so the copy column is capped
   at 38% and the scrim is fully transparent by 46%.
   =================================================================== */
/* --- the header rides on top of the frame instead of standing above it ---
   #main carries `padding-top: var(--header-h)` so ordinary sections clear the
   fixed header. That padding was exactly the pale strip above the photograph:
   the greeting started 76px down and the page background showed through. The
   first screen opts out of it and pays for the clearance from the inside. */
html:not([data-theme="night"]) #main { padding-top: 0; }

/* --- header as dark glass over the photograph, never a solid bar --- */
/* One continuous pane across the full width. The previous vertical gradient
   read as two halves (pale on the left over the mist, near-black on the right
   over the lodge), so the tint now runs horizontally and stays within a narrow
   alpha range.
   The alphas below are deliberately low: at .46/.56 with blur(16px) the pane
   averaged the photograph into one flat grey strip and the overlay stopped
   reading as an overlay. At .22/.34 with blur(8px) the firs, the sky and the
   lodge stay recognisable through the glass. */
html:not([data-theme="night"]) .site-header {
  background: linear-gradient(90deg, rgba(10,20,22,.22), rgba(8,14,16,.34));
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  border-bottom: 0;
  box-shadow: none;
}
/* The bottom edge dissolves instead of ending on a rule: a hairline border was
   the single strongest cue that this is a separate panel. */
html:not([data-theme="night"]) .site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 14px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(9,16,18,.26), rgba(9,16,18,0));
}
/* Away from the first screen the pane may carry its own weight for legibility. */
html:not([data-theme="night"]) .site-header.scrolled {
  background: rgba(10,17,19,.78);
  backdrop-filter: blur(12px) saturate(110%);
  -webkit-backdrop-filter: blur(12px) saturate(110%);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
html:not([data-theme="night"]) .site-header.scrolled::after {
  background: linear-gradient(180deg, rgba(9,16,18,.42), rgba(9,16,18,0));
}
/* The pane no longer carries the letters — the left third of the frame is pale
   sky, so the type needs its own tight halo instead of a wider soft glow. */
html:not([data-theme="night"]) .site-header .brand,
html:not([data-theme="night"]) .site-nav a {
  color: #f4f7f5;
  text-shadow: 0 1px 2px rgba(4,12,13,.9), 0 2px 12px rgba(4,12,13,.6);
}
html:not([data-theme="night"]) .site-nav a:hover {
  background: rgba(255,255,255,.10); border-radius: 999px;
}
html:not([data-theme="night"]) .site-header #logoutButton {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
  color: #f2f6f4;
}
html:not([data-theme="night"]) .site-header #logoutButton:hover {
  background: rgba(255,255,255,.16);
}

/* --- phones: the strip over the portrait has to be as short as it can be ---
   The full-width navigation already collapses into `#siteNav` below 1051px, so
   only the bar itself is left: brand plus the menu button. At 68px it reached
   the heroines' eyes on a 390px screen; 50px keeps it in the trees above them.
   Scoped to the light theme so the After Dark header keeps its own metrics. */
@media (max-width: 768px) {
  html:not([data-theme="night"]) { --header-h: 50px; }
  html:not([data-theme="night"]) .site-header {
    padding: .25rem .75rem;
  }
  html:not([data-theme="night"]) .site-header::after { bottom: -10px; height: 10px; }
  html:not([data-theme="night"]) .brand span { font-size: 1.05rem; letter-spacing: .06em; }
  html:not([data-theme="night"]) .brand small { display: none; }
  html:not([data-theme="night"]) .menu-toggle {
    min-height: 34px; padding: .3rem .7rem; font-size: .78rem;
    background: rgba(10,17,19,.42); border-color: rgba(255,255,255,.22); color: #f4f7f5;
  }
}

html:not([data-theme="night"]) .personal-greeting {
  min-height: 0;                 /* height now comes from the in-flow image */
  display: block;
  background: #0a1416;           /* so nothing pale can show around the frame */
}
html:not([data-theme="night"]) .greeting-photo { display: block; }
html:not([data-theme="night"]) .greeting-photo img {
  display: block; width: 100%; height: auto;
  /* the source is a deliberately misty frame; this restores depth in the
     house, firs, hair and coats without touching hue or composition */
  filter: contrast(1.06) saturate(1.05) brightness(.97);
}

/* --- frame on top, copy underneath, never over the faces ---
   Used below 1200px. The overlay needs the frame to be taller than the copy
   plus the header, and the frame height is locked to the width by the 16:9
   source: at 1024px it is only 568px tall while this copy block measures
   565px, so an overlay there would push the heading under the navigation. */
@media (max-width: 1199.98px) {
  html:not([data-theme="night"]) .greeting-shade { display: none; }
  html:not([data-theme="night"]) .greeting-content {
    position: relative; z-index: 3;
    max-width: none;
    background: linear-gradient(180deg, rgba(10,20,22,.92) 0%, #0a1416 14%);
    padding: clamp(1.5rem, 6vw, 2.25rem) clamp(1.25rem, 5vw, 2rem) clamp(1.75rem, 7vw, 2.5rem);
  }
  html:not([data-theme="night"]) .greeting-content h2 { font-size: clamp(38px, 11vw, 56px); }
}

/* --- wide desktop: copy sits in the misty free zone on the left of the frame ---
   1200px is the point where the 16:9 frame (width / 1.777) finally clears the
   header plus the full copy block with room to breathe. */
@media (min-width: 1200px) {
  html:not([data-theme="night"]) .personal-greeting { display: grid; }
  html:not([data-theme="night"]) .greeting-photo { grid-area: 1 / 1; }
  /* Local scrim under the copy only. Measured on the source: bodies start at
     40.5% of the frame width and skin at 45.2%, so the ramp is down to ~0.08
     before the first heroine and fully clear by 54%. No white veil anywhere. */
  html:not([data-theme="night"]) .greeting-shade {
    grid-area: 1 / 1; position: relative; inset: auto; z-index: 1;
    background: linear-gradient(90deg,
      rgba(10,24,25,.78) 0%,
      rgba(14,32,32,.64) 20%,
      rgba(18,38,38,.34) 34%,
      rgba(18,38,38,.10) 44%,
      rgba(18,38,38,0) 54%);
  }
  html:not([data-theme="night"]) .greeting-content {
    grid-area: 1 / 1; z-index: 3;
    align-self: center;
    width: min(33%, 560px);
    max-width: none;
    /* header height plus air, so the copy can never sit under the navigation
       even when the frame is short */
    padding-top: calc(var(--header-h) + 1rem);
    padding-bottom: clamp(1rem, 3vw, 2.5rem);
    padding-inline: clamp(1rem, 3.2vw, 3.5rem) .75rem;
  }
  /* Sized to the free zone rather than the viewport: at the 900px breakpoint
     that column is only ~290px wide. */
  html:not([data-theme="night"]) .greeting-content h2 {
    font-size: clamp(30px, 3.1vw, 60px);
  }
}

/* --- copy legibility comes from the scrim, not from heavy shadows --- */
html:not([data-theme="night"]) .greeting-content p { color: rgba(244,247,245,.92); }
html:not([data-theme="night"]) .greeting-content .microcopy { color: rgba(244,247,245,.78); }
html:not([data-theme="night"]) .greeting-content h2 { text-shadow: 0 2px 18px rgba(5,14,14,.45); }

/* ===================================================================
   STORY GATEWAY — one editorial spread instead of two text blocks
   Replaces the light `.hero` remark and the old `.intro` section. All
   sizing below is scoped to this block; nothing here changes page-wide
   typography. Hidden in After Dark through its .day-copy class.
   =================================================================== */
.story-gateway {
  display: grid;
  /* fr, not %: percentage tracks ignore the gap, so 55% + 45% + gap overflowed
     and the browser shrank both columns below the intended split. */
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
  padding: clamp(72px, 6vw, 96px) clamp(1rem, 5vw, 5rem);
}
.story-gateway-copy > * { margin-left: 0; margin-right: 0; }
.story-gateway .eyebrow { font-size: 13px; color: var(--muted); margin: 0 0 .7rem; }
.story-gateway h1 {
  margin: 0 0 1.1rem;
  font-size: clamp(34px, 3.6vw, 58px);
  line-height: 1.06;
  /* 15ch broke this line into four short fragments; 19ch holds it at two or
     three confident lines across the desktop range. */
  max-width: 19ch;
  text-wrap: pretty;
}
.story-gateway-lead {
  margin: 0 0 1.6rem;
  font-size: clamp(17px, 1.2vw, 19px);
  line-height: 1.6;
  max-width: 46ch;
  color: var(--muted);
}
.story-gateway .button { font-size: 16px; }

/* --- the frame: an opened archive card, not a bordered picture --- */
.story-gateway-frame {
  position: relative;
  margin: 0;
  width: min(100%, 560px);
  justify-self: end;
  border-radius: 18px;
  overflow: hidden;
  /* depth comes from a soft lift, not a slab shadow */
  box-shadow: 0 24px 60px rgba(24, 40, 40, .18);
  /* the 1.2deg tilt is what makes it read as a laid-down archive print
     rather than a stock hero image */
  transform: rotate(-1.2deg);
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.story-gateway-frame img {
  display: block; width: 100%; height: auto;   /* 1023x1537 kept exactly */
  transition: transform .6s cubic-bezier(.22,.61,.36,1), filter .5s ease;
}
.story-gateway-frame:hover { transform: rotate(-.5deg); }
.story-gateway-frame:hover img { transform: scale(1.012); filter: saturate(1.04) brightness(1.02); }

/* a slow band of light drifting across the wet glass and asphalt */
.story-gateway-frame::before {
  content: ""; position: absolute; inset: -20% -40%; z-index: 1; pointer-events: none;
  background: linear-gradient(104deg, transparent 42%, rgba(226,238,236,.10) 50%, transparent 58%);
  animation: gateway-sheen 11s ease-in-out infinite alternate;
}
@keyframes gateway-sheen {
  from { transform: translate3d(-12%, 0, 0); }
  to   { transform: translate3d(12%, 0, 0); }
}

/* --- caption on the lower edge: the faces sit between 29% and 46% of the
       frame, so this band never reaches them --- */
.story-gateway-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: grid; gap: .3rem;
  padding: 2.6rem 1.15rem 1.05rem;
  background: linear-gradient(180deg, rgba(8,16,18,0) 0%, rgba(8,16,18,.58) 46%, rgba(8,16,18,.82) 100%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: #eef4f1;
  transition: opacity .4s ease;
  opacity: .93;
}
.story-gateway-frame:hover .story-gateway-caption { opacity: 1; }
.story-gateway-archive {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(238,244,241,.72);
}
.story-gateway-note {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(15px, 1.1vw, 18px); line-height: 1.25;
  text-shadow: 0 1px 10px rgba(5,14,14,.5);
}

@media (prefers-reduced-motion: reduce) {
  .story-gateway-frame, .story-gateway-frame img { transition: none; }
  .story-gateway-frame::before { animation: none; }
}

/* --- mobile: copy, then buttons, then the frame at full width --- */
@media (max-width: 900px) {
  .story-gateway {
    grid-template-columns: 1fr;
    row-gap: clamp(1.75rem, 6vw, 2.5rem);
    padding: clamp(48px, 11vw, 72px) clamp(1rem, 5vw, 2rem);
  }
  .story-gateway h1 { font-size: clamp(34px, 9vw, 42px); max-width: none; }
  .story-gateway-lead { font-size: clamp(16px, 4.4vw, 18px); max-width: none; }
  .story-gateway-frame {
    width: 100%; justify-self: stretch;
    transform: none;            /* a tilt at full bleed just clips the corners */
  }
  .story-gateway-frame:hover { transform: none; }
  .story-gateway-caption { padding: 2.2rem 1rem .95rem; }
}

/* ===================================================================
   Тизер библиотеки — компактный блок между героинями и квизом.
   Собственного графического ассета нет: полка собрана из пяти уже
   утверждённых обложек, лежащих в /assets/library/.
   =================================================================== */
.library-teaser { padding-block: clamp(48px, 6vw, 72px); }
.library-teaser-inner {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.library-teaser-text { display: grid; gap: .75rem; justify-items: start; }
.library-teaser-text h2 { margin: 0; font-size: clamp(30px, 3vw, 46px); line-height: 1.08; }
.library-teaser-text p:not(.eyebrow) { margin: 0; color: var(--muted); max-width: 34ch; }
.library-teaser-text .eyebrow { margin: 0; color: var(--accent); }
.library-teaser-text .button { margin-top: .5rem; }

/* полка: обложки внахлёст, лёгкий веер */
.library-teaser-shelf {
  display: flex; justify-content: center; align-items: flex-end;
  padding-inline: 2.5rem;
}
.library-teaser-shelf img {
  width: clamp(78px, 9vw, 124px); height: auto;
  border-radius: 6px; border: 1px solid var(--line);
  box-shadow: 0 12px 28px rgba(28, 47, 48, .18);
  background: var(--surface-strong);
  transition: transform .35s ease;
}
.library-teaser-shelf img + img { margin-left: clamp(-42px, -3.4vw, -26px); }
.library-teaser-shelf img:nth-child(1) { transform: rotate(-6deg); }
.library-teaser-shelf img:nth-child(2) { transform: rotate(-3deg); }
.library-teaser-shelf img:nth-child(3) { transform: rotate(0deg); z-index: 2; }
.library-teaser-shelf img:nth-child(4) { transform: rotate(3deg); }
.library-teaser-shelf img:nth-child(5) { transform: rotate(6deg); }
.library-teaser-inner:hover .library-teaser-shelf img:nth-child(1) { transform: rotate(-9deg) translateY(-4px); }
.library-teaser-inner:hover .library-teaser-shelf img:nth-child(5) { transform: rotate(9deg) translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
  .library-teaser-shelf img { transition: none; }
  .library-teaser-inner:hover .library-teaser-shelf img { transform: none; }
}

@media (max-width: 900px) {
  .library-teaser-inner { grid-template-columns: 1fr; }
  .library-teaser-text { justify-items: center; text-align: center; }
  .library-teaser-text p:not(.eyebrow) { max-width: none; }
  .library-teaser-shelf { padding-inline: 1rem; order: -1; }
  .library-teaser-shelf img { width: clamp(62px, 17vw, 96px); }
  .library-teaser-shelf img + img { margin-left: -22px; }
}

/* ===================================================================
   ЭТАП 7B — точечная доводка After Dark.
   Всё ограничено html[data-theme="night"]: Light принят и не меняется.
   Тексты, изображения, порядок разделов и переход не затрагиваются.
   =================================================================== */

/* --- 1. Ритм секций ---
   Было 100px сверху и снизу, между соседними секциями копилось 200px
   при ориентире 72–112px. 56+56 = 112px. */
html[data-theme="night"] .section-pad { padding-top: 56px; padding-bottom: 56px; }
html[data-theme="night"] .section-heading { margin-bottom: 32px; }
/* CTA прижимается к тому, что запускает, а не висит над пустотой */
html[data-theme="night"] .path-concept { margin-top: 32px; }

/* --- 2. Три уровня заголовков ---
   Иерархия была перевёрнута: .path-step-title (h3) 69px оказывался
   крупнее заголовка секции 57.6px и почти догонял hero 72px. */

/* уровень 2 — заголовок крупной секции */
html[data-theme="night"] .section-heading h2 {
  font-size: clamp(34px, 3.4vw, 50px);
  line-height: 1.06;
  max-width: 19ch;
  text-wrap: balance;
}
html[data-theme="night"] .section-heading > p { max-width: 60ch; }

/* уровень 3 — заголовок внутреннего блока, карточки или сцены */
html[data-theme="night"] .path-step-title {
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.12;
  max-width: 22ch;
  text-wrap: balance;
}
html[data-theme="night"] .scenario-card h3,
html[data-theme="night"] .temptation-card h3,
html[data-theme="night"] .scene-card h3 {
  font-size: clamp(21px, 1.9vw, 28px);
  line-height: 1.16;
}

/* --- 3. Контраст ---
   Мелкие подписи были на .65 — на почти чёрном фоне это уже угадывание. */
html[data-theme="night"] .section-heading > p,
html[data-theme="night"] .path-step > p { color: rgba(244, 240, 238, .84); }
html[data-theme="night"] .microcopy,
html[data-theme="night"] .path-step-hint { color: rgba(244, 240, 238, .72); }
html[data-theme="night"] .eyebrow { opacity: .92; letter-spacing: .16em; }

/* --- 4. Карточки сцен: ровные высоты и единое кадрирование --- */
html[data-theme="night"] .scenario-grid { align-items: stretch; gap: 24px; }
html[data-theme="night"] .scenario-card {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid rgba(150, 84, 96, .3);
}
html[data-theme="night"] .scenario-card-media {
  aspect-ratio: 4 / 3; height: auto; flex: none;   /* одинаковый кадр у всех */
}
html[data-theme="night"] .scenario-card-media img { width: 100%; height: 100%; object-fit: cover; }
html[data-theme="night"] .scenario-card-content {
  flex: 1; display: flex; flex-direction: column; gap: .55rem;
}
html[data-theme="night"] .scenario-card-content .button { margin-top: auto; }

/* --- 5. Пустая колонка в блоке красных флагов ---
   .redflag-decided-list с нулевой высотой держала колонку 220px. */
html[data-theme="night"] .redflag-layout:has(.redflag-decided-list:empty) {
  grid-template-columns: 1fr;
}

/* --- 6. Квиз: карточки перестают сливаться с фоном --- */
html[data-theme="night"] .quiz-card,
html[data-theme="night"] .temptation-card {
  border: 1px solid rgba(150, 84, 96, .3);
  transition: border-color .22s ease, background-color .22s ease;
}
html[data-theme="night"] .quiz-card:hover,
html[data-theme="night"] .temptation-card:hover { border-color: rgba(198, 72, 90, .6); }
html[data-theme="night"] .temptation-card:focus-visible,
html[data-theme="night"] .quiz-card:focus-within {
  outline: 2px solid rgba(198, 72, 90, .85); outline-offset: 2px;
}
html[data-theme="night"] .temptation-card[aria-pressed="true"],
html[data-theme="night"] .temptation-card.is-active {
  border-color: rgba(198, 72, 90, .8); background: rgba(90, 16, 30, .34);
}
/* номера читаются, но не кричат */
html[data-theme="night"] .temptation-card .eyebrow,
html[data-theme="night"] .redflag-card-box .eyebrow { opacity: .8; }

/* --- 7. Кнопки: второстепенное действие перестаёт быть серым тегом --- */
html[data-theme="night"] .button.ghost {
  border-color: rgba(198, 72, 90, .42);
  background: rgba(40, 10, 18, .4);
  color: #f2e9ea;
}
html[data-theme="night"] .button.ghost:hover {
  border-color: rgba(198, 72, 90, .78); background: rgba(90, 16, 30, .44);
}
html[data-theme="night"] .button:focus-visible {
  outline: 2px solid rgba(198, 72, 90, .9); outline-offset: 3px;
}

/* --- 8. Night header: читаемость и разделение зон --- */
html[data-theme="night"] .site-nav a { opacity: .94; }
html[data-theme="night"] .site-nav a:hover { opacity: 1; }
html[data-theme="night"] .site-nav { gap: 1.4rem; }
html[data-theme="night"] .header-actions { gap: .7rem; }
html[data-theme="night"] .header-actions #logoutButton { position: relative; margin-left: .45rem; }
html[data-theme="night"] .header-actions #logoutButton::before {
  content: ''; position: absolute; left: -.5rem; top: 50%; transform: translateY(-50%);
  width: 1px; height: 20px; background: rgba(255, 255, 255, .18);
}

/* --- mobile --- */
@media (max-width: 700px) {
  html[data-theme="night"] .section-pad { padding-top: 32px; padding-bottom: 32px; }
  html[data-theme="night"] .section-heading h2 { max-width: none; }
  html[data-theme="night"] .path-step-title { max-width: none; }
  html[data-theme="night"] .scenario-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ===================================================================
   ЭТАП 7C — открытая ночная глава под рядом карточек сценариев.
   Продолжение After Dark, а не модальное окно: без белой карточки,
   без множества мелких рамок, ширина в пределах текущего контейнера.
   Всё ограничено Night-темой и собственными классами сцены: правила
   .hero, #afterDarkHero, #personalGreeting, .button-row ночного hero,
   red-transition и отступы 7B не затрагиваются.
   =================================================================== */

/* Две кнопки карточки — разные действия, разный вес.
   «Выбрать сцену» остаётся основным действием маршрута и не трогается,
   «Открыть сцену» — тише и компактнее: это предпросмотр. */
html[data-theme="night"] .scenario-card-actions {
  margin-top: auto; display: flex; flex-wrap: wrap;
  gap: 11px; max-width: 100%; min-width: 0;
}
html[data-theme="night"] .scenario-card-actions .button {
  margin-top: 0; max-width: 100%; min-width: 0;
}
html[data-theme="night"] .scenario-open-button {
  font-size: 14px;
  padding: .5rem .95rem;
  border-color: rgba(150, 84, 96, .42);
  background: rgba(28, 12, 18, .34);
  color: rgba(244, 240, 238, .88);
}
html[data-theme="night"] .scenario-open-button:hover {
  border-color: rgba(198, 72, 90, .7);
  background: rgba(74, 14, 26, .38);
  color: #f2e9ea;
}

/* активная карточка: спокойная винная граница, без свечения,
   без изменения размера — сетка не ломается */
html[data-theme="night"] .scenario-card.is-open {
  border-color: rgba(198, 72, 90, .72);
  background: rgba(74, 14, 26, .26);
}

/* host пустой, пока панель скрыта, и не должен создавать отступ */
html[data-theme="night"] .night-scene-host { min-width: 0; }

html[data-theme="night"] .night-scene {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: center;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin-top: 28px;
  padding: clamp(1.1rem, 2.4vw, 1.9rem);
  border: 1px solid rgba(150, 84, 96, .34);
  border-radius: 4px;
  background:
    linear-gradient(140deg, rgba(74, 14, 26, .34), rgba(14, 12, 15, .5));
  scroll-margin-top: 96px;
}
html[data-theme="night"] .night-scene[hidden] { display: none; }

/* уровень напряжения меняет только атмосферу уже существующего кадра:
   кадрирование, глубину винного слоя и силу света */
html[data-theme="night"] .night-scene { --scene-zoom: 1; --scene-wine: .5; --scene-dim: .84; }
html[data-theme="night"] .night-scene[data-tension="2"] { --scene-zoom: 1.05; --scene-wine: .56; --scene-dim: .88; }
html[data-theme="night"] .night-scene[data-tension="3"] { --scene-zoom: 1.10; --scene-wine: .62; --scene-dim: .92; }
html[data-theme="night"] .night-scene[data-tension="4"] { --scene-zoom: 1.15; --scene-wine: .68; --scene-dim: .96; }
html[data-theme="night"] .night-scene[data-tension="5"] { --scene-zoom: 1.20; --scene-wine: .76; --scene-dim: 1; }

html[data-theme="night"] .night-scene-media {
  position: relative; overflow: hidden; border-radius: 3px;
  aspect-ratio: 4 / 3;
  min-width: 0; width: 100%;
}
html[data-theme="night"] .night-scene-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(var(--scene-zoom));
  filter: brightness(var(--scene-dim));
  transition: transform .45s ease, filter .45s ease;
}
html[data-theme="night"] .night-scene-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(12, 10, 12, .1), rgba(74, 14, 26, var(--scene-wine)));
  transition: background .45s ease;
}

html[data-theme="night"] .night-scene-body {
  display: flex; flex-direction: column; gap: .75rem;
  min-width: 0;
}
html[data-theme="night"] .night-scene-label { opacity: .8; margin: 0; }
html[data-theme="night"] .night-scene-title {
  margin: 0; font-size: clamp(24px, 2.3vw, 34px); line-height: 1.1;
  max-width: 20ch; text-wrap: balance;
}
html[data-theme="night"] .night-scene-text {
  margin: 0; max-width: 52ch; color: rgba(244, 240, 238, .86);
}
html[data-theme="night"] .night-scene-phrase {
  margin: 0; color: rgba(244, 240, 238, .72); font-style: italic; max-width: 46ch;
}

/* --- компактный контрол напряжения --- */
html[data-theme="night"] .night-tension {
  margin-top: .35rem; padding-top: .9rem;
  border-top: 1px solid rgba(150, 84, 96, .28);
  min-width: 0;
}
html[data-theme="night"] .night-tension-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem;
  justify-content: space-between; margin-bottom: .7rem;
}
html[data-theme="night"] .night-tension-caption {
  text-transform: uppercase; letter-spacing: .16em; font-size: 12px;
  color: rgba(244, 240, 238, .7);
}
html[data-theme="night"] .night-tension-value {
  font-size: 15px; color: #f2e9ea;
  min-width: 0; overflow-wrap: anywhere;
}
html[data-theme="night"] .night-tension-track {
  position: relative; display: flex; align-items: center;
  min-height: 44px; padding: 0 2px; cursor: pointer;
  width: 100%; min-width: 0; box-sizing: border-box;
}
html[data-theme="night"] .night-tension-track:focus-visible {
  outline: 2px solid rgba(198, 72, 90, .9); outline-offset: 4px; border-radius: 3px;
}
html[data-theme="night"] .night-tension-line {
  position: absolute; left: 2px; right: 2px; top: 50%; height: 1px;
  background: rgba(150, 84, 96, .38);
}

html[data-theme="night"] .night-tension-dots {
  position: relative; display: flex; justify-content: space-between;
  width: 100%; min-width: 0; z-index: 1;
}
/* область нажатия остаётся крупной, но точки сжимаются раньше,
   чем начинают расширять viewport на 320px */
html[data-theme="night"] .night-tension-dot {
  flex: 0 1 44px; width: 44px; min-width: 34px; height: 44px;
  padding: 0; border: 0; background: none;
  cursor: pointer; position: relative;
}
html[data-theme="night"] .night-tension-dot::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid rgba(198, 72, 90, .6);
  background: rgba(20, 12, 15, .9);
  transition: background-color .22s ease, border-color .22s ease;
}
html[data-theme="night"] .night-tension-dot:hover::after { border-color: rgba(198, 72, 90, .9); }
html[data-theme="night"] .night-tension-dot.is-active::after {
  background: rgba(198, 72, 90, .95); border-color: rgba(198, 72, 90, .95);
}
html[data-theme="night"] .night-tension-dot:focus-visible {
  outline: 2px solid rgba(198, 72, 90, .9); outline-offset: -6px; border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="night"] .night-scene-media img,
  html[data-theme="night"] .night-scene-veil { transition: none; }
}

/* --- mobile: одна колонка --- */
@media (max-width: 900px) {
  html[data-theme="night"] .night-scene {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}
@media (max-width: 700px) {
  html[data-theme="night"] .night-scene {
    margin-top: 20px; scroll-margin-top: 76px; gap: 1.1rem;
  }
  html[data-theme="night"] .night-scene-media { aspect-ratio: 3 / 2; }
  html[data-theme="night"] .night-scene-title { max-width: none; }
  html[data-theme="night"] .night-scene-text,
  html[data-theme="night"] .night-scene-phrase { max-width: none; font-size: 15px; }
  /* обе кнопки карточки одной колонкой, одинаковой доступной ширины */
  html[data-theme="night"] .scenario-card-actions { flex-direction: column; align-items: stretch; }
  html[data-theme="night"] .scenario-card-actions .button { width: 100%; }
}
/* 320px: подпись уровня уходит на свою строку и ничего не распирает */
@media (max-width: 360px) {
  html[data-theme="night"] .night-tension-head { flex-direction: column; align-items: flex-start; gap: .3rem; }
  html[data-theme="night"] .night-tension-dot { flex: 1 1 0; width: auto; min-width: 0; }
}

/* ===================================================================
   ЭТАП 8B — киноархив: состояния карточек и архивный вид lightbox.
   Ничего за пределами #archive и #lightbox не затрагивается.
   =================================================================== */

/* Эпизоды в Night меняют палитру, но сохраняют свои раскладки.
   Два класса дают большую специфичность, чем одиночный
   .scene-card--night выше по файлу, поэтому колонки не схлопываются. */
.scene-card--night.scene-card--image-left { grid-template-columns: minmax(260px, 42%) 1fr; }
.scene-card--night.scene-card--image-right { grid-template-columns: 1fr minmax(260px, 42%); }
.scene-card--night.scene-card--wide-top { grid-template-columns: 1fr; }
@media (max-width: 720px) {
  .scene-card--night.scene-card--image-left,
  .scene-card--night.scene-card--image-right,
  .scene-card--night.scene-card--wide-top { grid-template-columns: 1fr; }
}

/* --- карточки сетки: hover и клавиатура --- */
.archive-card {
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.archive-card:hover {
  transform: translateY(-2px);
  border-color: rgba(35, 64, 65, .34);
  box-shadow: 0 10px 24px rgba(23, 36, 37, .12);
}
html[data-theme="night"] .archive-card:hover {
  transform: translateY(-2px);
  border-color: rgba(150, 84, 96, .5);
  background: #1d2029;
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .archive-card, .archive-card:hover { transition: none; transform: none; }
}

.archive-filter { transition: border-color .2s ease, color .2s ease, background-color .2s ease; }
.archive-filter:hover { border-color: rgba(35, 64, 65, .38); color: var(--text); }
html[data-theme="night"] .archive-filter:hover { border-color: rgba(150, 84, 96, .55); color: #f2e9ea; }
.archive-open:hover { border-color: rgba(35, 64, 65, .38); }
html[data-theme="night"] .archive-open:hover { border-color: rgba(198, 72, 90, .6); }

/* Контур не обрезается overflow карточки и не меняет размеры сетки */
.archive-card:focus-within { outline: 2px solid rgba(35, 64, 65, .55); outline-offset: 2px; }
.archive-filter:focus-visible,
.archive-open:focus-visible { outline: 2px solid rgba(35, 64, 65, .7); outline-offset: 3px; }
html[data-theme="night"] .archive-card:focus-within { outline-color: rgba(198, 72, 90, .8); }
html[data-theme="night"] .archive-filter:focus-visible,
html[data-theme="night"] .archive-open:focus-visible { outline-color: rgba(198, 72, 90, .9); }

/* --- архивный вид общего lightbox --- */
/* .lightbox p задаёт общий padding .8rem 1rem — у архивных строк он
   ужимается по вертикали, чтобы три строки подряд не растягивали диалог. */
.lightbox-status {
  padding: .7rem 1rem 0; margin: 0;
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.lightbox-title {
  padding: .25rem 1rem 0; margin: 0;
  font-size: clamp(18px, 2vw, 24px); line-height: 1.2;
  color: #fff; max-width: 46ch; text-wrap: balance;
}
/* архивная подпись идёт сразу под заголовком */
.lightbox-status:not([hidden]) ~ #lightboxCaption { padding-top: .35rem; }
.lightbox-goto {
  display: inline-flex; margin: 0 1rem 1rem; max-width: calc(100% - 2rem);
}

@media (max-width: 720px) {
  .lightbox-title { font-size: 17px; }
  .lightbox-goto { display: flex; justify-content: center; margin-inline: 1rem; }
}