/* ============================================================
   «Последний приют» — детектив-нуар / визуальная новелла
   Палитра снята с кадра: тёплый свет лампы, копоть, тёмное дерево.
   ============================================================ */
:root {
  --bg:        #0b0906;
  --bg-2:      #120e0a;
  --panel:     #171009;   /* тёмное дерево / кожа */
  --panel-2:   #201811;
  --panel-3:   #2a2016;
  --edge:      #382a1c;   /* границы, как тёмный багет */
  --edge-soft: #241b12;

  --amber:     #e0a24a;   /* свет лампы */
  --amber-hi:  #f2c778;
  --amber-dim: #a9772f;

  --text:      #ece0c8;   /* пергамент */
  --muted:     #9c8b6f;
  --muted-2:   #6f6046;

  --user:      #3a2c1c;
  --danger:    #c6413a;
  --thread:    #c62733;

  --lead:      #c69a3b;   /* зацепка — жёлтый, слова, могут врать */
  --lead-hi:   #f2c778;
  --fact:      #4fb477;   /* факт — зелёный, подтверждено */
  --fact-hi:   #86e6ab;
  --disputed:  #8a7d63;   /* опровергнуто — блёклое */

  --radius: 12px;
  --serif: Georgia, "Times New Roman", "PT Serif", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* Прячем полосы прокрутки во всём UI — скроллить по-прежнему можно, просто баров не видно */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
}

body {
  /* тёплая виньетка — запасной фон, если картинки персонажа ещё нет */
  background:
    radial-gradient(120% 120% at 50% -10%, #1a130c 0%, #0b0906 60%, #060402 100%);
}

/* Фон всего UI — портрет активного персонажа, слегка размытый и приглушённый.
   Сильное размытие делают уже сами панели (backdrop-filter), как матовое стекло. */
.app-bg {
  position: fixed;
  inset: -40px;                 /* с запасом, чтобы не светились размытые края */
  z-index: -1;
  background-image: var(--stage-img, none);
  background-size: cover;
  background-position: center 18%;
  filter: blur(12px) brightness(0.62) saturate(0.95);
  transform: scale(1.08);
  transition: background-image 0.4s ease;
}
.app-bg::after {   /* лёгкое затемнение по краям, чтобы фон не спорил с UI */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(130% 120% at 50% 28%, rgba(15,10,6,0.10), rgba(5,3,2,0.72) 96%);
}

.layout {
  display: flex;
  height: 100vh;
  max-width: 1560px;
  margin: 0 auto;
  gap: 0;
  box-shadow: 0 0 120px rgba(0,0,0,0.7);
}

/* Тонкая киношная зернистость поверх панелей */
.stage-grain,
.chars::after,
.clues::after {
  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)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ---------- Левая панель: свидетели ---------- */
.chars {
  position: relative;
  width: 232px;
  flex: 0 0 232px;
  background:
    linear-gradient(180deg, rgba(16,11,7,0.30), rgba(9,6,4,0.42));
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  border-right: 1px solid rgba(224,162,74,0.12);
  box-shadow: inset 0 1px 0 rgba(255,230,190,0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chars::after {
  content: "";
  position: absolute; inset: 0;
  opacity: 0.04; pointer-events: none;
  mix-blend-mode: overlay;
}
.chars-head {
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--edge-soft);
}
.chars-title {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--amber-dim);
}
.chars-list {
  list-style: none;
  margin: 0;
  padding: 10px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 1;
}
/* angry-mode: Лариса «не отпускает» — ростер погашен; клик по нему перехватывает
   JS-гвард в selectEntity и показывает подсказку, что уйти сейчас нельзя. */
.chars.roster-locked .chars-list {
  opacity: 0.35;
  filter: grayscale(0.6);
  transition: opacity 0.3s ease, filter 0.3s ease;
}
.chars.roster-locked .char-item,
.chars.roster-locked .loc-item { cursor: not-allowed; }
.char-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
  user-select: none;
}
.char-item:hover { background: rgba(224,162,74,0.06); }
.char-item.active {
  background: linear-gradient(180deg, rgba(224,162,74,0.14), rgba(224,162,74,0.05));
  border-color: rgba(224,162,74,0.4);
}
.char-avatar {
  width: 42px; height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  background-color: #140d08;
  background-size: cover;
  background-position: center 18%;
  border: 1px solid var(--edge);
  filter: grayscale(0.35) brightness(0.9) contrast(1.05);
  transition: filter 0.2s ease;
}
.char-item:hover .char-avatar { filter: grayscale(0.15) brightness(1); }
.char-item.active .char-avatar {
  border-color: var(--amber);
  box-shadow: 0 0 14px rgba(224,162,74,0.35);
  filter: grayscale(0) brightness(1);
}
.char-meta { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.char-name {
  font-family: var(--serif); font-size: 15px; font-weight: 600; letter-spacing: 0.3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.char-role {
  font-size: 11.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
/* «???» — личность ещё не выяснена */
.char-name.unknown { color: var(--muted); letter-spacing: 2px; opacity: 0.8; }
.char-role.unknown { color: var(--muted-2); letter-spacing: 2px; opacity: 0.7; }

/* ---------- Центр: приложение ---------- */
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  flex: 1;
  min-width: 0;
  background: transparent;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(224,162,74,0.1);
  background: linear-gradient(180deg, rgba(14,9,5,0.26), rgba(9,6,4,0.16));
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand .logo { font-size: 20px; filter: sepia(0.4); }
.brand h1 {
  font-family: var(--serif);
  font-size: 18px; margin: 0; font-weight: 600;
  letter-spacing: 1px;
  color: var(--text);
  text-shadow: 0 1px 0 #000;
}
.topbar-actions { display: flex; align-items: center; gap: 6px; }

.icon-btn {
  background: transparent;
  border: none;
  color: var(--amber);
  font-size: 19px;
  cursor: pointer;
  opacity: 0.85;
  line-height: 1;
}
.icon-btn:hover { opacity: 1; text-shadow: 0 0 10px rgba(224,162,74,0.5); }
.icon-btn.muted { opacity: 0.3; color: var(--muted); }
.icon-btn:disabled { opacity: 0.25; cursor: default; text-shadow: none; }
.icon-btn.active { opacity: 1; text-shadow: 0 0 10px rgba(224,162,74,0.55); }
.speed-btn { font-size: 15px; font-weight: 700; letter-spacing: -0.5px; }
.speed-btn.active { color: var(--danger); opacity: 1; text-shadow: 0 0 10px rgba(224,162,74,0.55); }

.settings {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(14,9,5,0.34);
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  border-bottom: 1px solid rgba(224,162,74,0.1);
}
.settings.hidden { display: none; }
.settings label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px; color: var(--muted);
}
.settings label.row { flex-direction: row; align-items: center; gap: 8px; color: var(--text); }
.settings input[type="text"], .settings select {
  background: rgba(10,7,4,0.5);
  border: 1px solid var(--edge);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  min-width: 200px;
}

/* ---------- Сцена визуальной новеллы ---------- */
.stage {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: #000;
}
.stage-bg {
  position: absolute;
  inset: 0;
  background-image: var(--stage-img, none);
  background-size: cover;
  background-position: center 22%;
  transform: scale(1.04);
  transition: opacity 0.5s ease;
  animation: kenburns 40s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1.04) translate(0, 0); }
  to   { transform: scale(1.12) translate(-1.5%, -1.5%); }
}
/* затемнение снизу под текстовое окно + общий нуар */
.stage::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,5,3,0.55) 0%, rgba(8,5,3,0) 22%),
    linear-gradient(0deg, rgba(6,4,2,0.92) 2%, rgba(6,4,2,0.5) 26%, rgba(6,4,2,0) 52%);
  pointer-events: none;
  z-index: 1;
}
.stage-vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
  box-shadow: inset 0 0 220px 40px rgba(0,0,0,0.85);
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,0.5) 100%);
}
.stage-grain {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0.06;
  mix-blend-mode: overlay;
  animation: grain 0.6s steps(2) infinite;
}
@keyframes grain { to { transform: translate(-4%, 3%); } }

/* Диалоговое окно */
.vn-box {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: min(860px, calc(100% - 44px));
  z-index: 4;
  background:
    linear-gradient(180deg, rgba(20,14,9,0.82), rgba(12,8,5,0.92));
  border: 1px solid rgba(224,162,74,0.28);
  border-radius: 14px;
  padding: 26px 26px 20px;
  backdrop-filter: blur(3px);
  box-shadow:
    0 18px 50px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,220,160,0.08);
}
.vn-nameplate {
  position: absolute;
  top: -16px;
  left: 22px;
  padding: 5px 18px;
  background: linear-gradient(180deg, #2a1d10, #171009);
  border: 1px solid rgba(224,162,74,0.5);
  border-radius: 8px;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--amber-hi);
  box-shadow: 0 6px 16px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,220,160,0.12);
}
.vn-ask {
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
  margin: 4px 0 10px;
  min-height: 0;
}
.vn-ask:not(:empty)::before { content: "❝ "; color: var(--amber-dim); }
.vn-ask:not(:empty)::after { content: " ❞"; color: var(--amber-dim); }
.vn-text {
  font-family: var(--serif);
  font-size: clamp(17px, 2.1vw, 22px);
  line-height: 1.55;
  color: var(--text);
  min-height: 1.6em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  white-space: pre-wrap;
}
.vn-text.speaking { }
/* Кнопка «пропустить озвучку» — под репликой персонажа */
.vn-skip {
  display: block;
  margin: 14px 0 0 auto;
  padding: 7px 15px;
  border: 1px solid rgba(224,162,74,0.4);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(224,162,74,0.14), rgba(224,162,74,0.05));
  color: var(--amber);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.2s ease;
}
.vn-skip:hover {
  background: linear-gradient(180deg, rgba(224,162,74,0.24), rgba(224,162,74,0.10));
  border-color: rgba(224,162,74,0.6);
}
.vn-skip.hidden { display: none; }
.vn-typing span {
  display: inline-block;
  width: 7px; height: 7px;
  margin: 0 3px;
  background: var(--amber);
  border-radius: 50%;
  animation: blink 1.2s infinite both;
}
.vn-typing span:nth-child(2) { animation-delay: 0.2s; }
.vn-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%,80%,100%{opacity:0.2} 40%{opacity:1} }

/* ---------- Статус ---------- */
.status {
  min-height: 20px;
  padding: 6px 18px 0;
  font-size: 12px;
  color: var(--muted);
  background: rgba(9,6,4,0.16);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.status.error { color: var(--danger); }

/* ---------- Композер ---------- */
.composer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 18px 18px;
  border-top: 1px solid rgba(224,162,74,0.1);
  background: linear-gradient(0deg, rgba(14,9,5,0.32), rgba(9,6,4,0.18));
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
}
textarea#input {
  flex: 1;
  resize: none;
  max-height: 140px;
  background: rgba(10,7,4,0.5);
  border: 1px solid var(--edge);
  color: var(--text);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  line-height: 1.4;
}
textarea#input::placeholder { color: var(--muted-2); }
textarea#input:focus { outline: none; border-color: var(--amber-dim); box-shadow: 0 0 0 2px rgba(224,162,74,0.15); }

.mic-btn, .send-btn, .stop-btn {
  border: none;
  border-radius: 50%;
  width: 46px; height: 46px;
  flex: 0 0 auto;
  cursor: pointer;
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
.mic-btn { background: var(--panel-3); color: var(--text); border: 1px solid var(--edge); }
.mic-btn.listening { background: var(--danger); color: #fff; animation: pulse 1.2s infinite; }
.send-btn {
  background: linear-gradient(180deg, var(--amber), var(--amber-dim));
  color: #1a1108;
  box-shadow: 0 4px 12px rgba(224,162,74,0.3);
}
.send-btn:hover { filter: brightness(1.1); }
.stop-btn { background: var(--danger); color: #fff; }

.hidden { display: none !important; }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(198,65,58,0.6); }
  70% { box-shadow: 0 0 0 12px rgba(198,65,58,0); }
  100% { box-shadow: 0 0 0 0 rgba(198,65,58,0); }
}

/* ---------- Правая панель: досье ---------- */
.clues {
  position: relative;
  width: 336px;
  flex: 0 0 336px;
  background:
    linear-gradient(180deg, rgba(16,11,7,0.30), rgba(9,6,4,0.42));
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  border-left: 1px solid rgba(224,162,74,0.12);
  box-shadow: inset 0 1px 0 rgba(255,230,190,0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.clues::after {
  content: "";
  position: absolute; inset: 0;
  opacity: 0.04; pointer-events: none;
  mix-blend-mode: overlay;
}
.clues-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--edge-soft);
  z-index: 1;
}
.clues-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--amber-dim);
}
.clues-head-right { display: flex; align-items: center; gap: 10px; }

/* Заметная кнопка открытия доски — прижата к низу панели досье как оверлей */
.board-open-btn {
  flex: 0 0 auto;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  margin: 10px 12px 14px;
  padding: 13px 16px;
  border: 1px solid rgba(224,162,74,0.55);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(224,162,74,0.20), rgba(224,162,74,0.08));
  box-shadow: 0 6px 20px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,230,190,0.12);
  color: var(--amber);
  cursor: pointer;
  text-align: left;
  animation: boardPulse 2.6s ease-in-out infinite;
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.board-open-btn:hover {
  background: linear-gradient(180deg, rgba(224,162,74,0.30), rgba(224,162,74,0.14));
  box-shadow: 0 8px 26px rgba(0,0,0,0.55), 0 0 0 1px rgba(224,162,74,0.4), inset 0 1px 0 rgba(255,230,190,0.18);
  transform: translateY(-1px);
}
.board-open-btn:active { transform: translateY(0); }
.board-open-ico { grid-row: 1 / 3; font-size: 26px; line-height: 1; opacity: 0.95; }
.board-open-txt {
  font-family: var(--serif);
  font-size: 15.5px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--amber);
}
.board-open-sub { font-size: 11.5px; color: var(--muted); letter-spacing: 0.3px; }
@keyframes boardPulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,230,190,0.12); }
  50%      { box-shadow: 0 6px 20px rgba(0,0,0,0.45), 0 0 16px rgba(224,162,74,0.35), inset 0 1px 0 rgba(255,230,190,0.12); }
}
.board-open-btn.opened { animation: none; } /* мигает только до первого открытия доски */
@media (prefers-reduced-motion: reduce) { .board-open-btn { animation: none; } }
.clues-count {
  background: linear-gradient(180deg, var(--amber), var(--amber-dim));
  color: #1a1108;
  font-size: 13px; font-weight: 700;
  min-width: 24px; text-align: center;
  padding: 2px 8px; border-radius: 20px;
}
.clues-list {
  list-style: none;
  margin: 0;
  padding: 14px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1;
}
/* Улика = тёмная карточка дела с красным корешком */
.clue-item {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: linear-gradient(180deg, #211a12, #191309);
  color: var(--text);
  border: 1px solid var(--edge);
  border-radius: 6px;
  padding: 11px 13px 11px 15px;
  font-size: 13.5px;
  line-height: 1.45;
  box-shadow: 0 3px 8px rgba(0,0,0,0.35);
  animation: clueIn 0.4s ease both;
  cursor: grab;
  touch-action: none;
}
.clue-item::before { /* красная папка-корешок слева (приглушённый) */
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: #7d2420;
  border-radius: 6px 0 0 6px;
}
.clue-item:hover { border-color: var(--edge-soft); background: linear-gradient(180deg, #251d13, #1c150b); }
.clue-item:active { cursor: grabbing; }
.clue-grip { margin-top: 1px; color: var(--muted-2); font-size: 12px; line-height: 1; flex: 0 0 auto; }
.clue-dot {
  margin-top: 5px;
  width: 7px; height: 7px; flex: 0 0 auto;
  border-radius: 50%;
  background: #9c3b34;
  box-shadow: 0 0 5px rgba(156,59,52,0.5);
}
.clue-text { color: var(--muted); }
.clue-item.dragging {
  opacity: 0.97;
  box-shadow: 0 14px 32px rgba(0,0,0,0.6);
  border-color: var(--amber-dim);
  transform: rotate(-0.6deg);
}
.clue-item.clue-new {
  border-color: rgba(224,162,74,0.5);
  box-shadow: 0 0 0 1px rgba(224,162,74,0.4), 0 0 16px rgba(224,162,74,0.3), 0 3px 8px rgba(0,0,0,0.35);
  animation: cluePulse 1.4s ease;
}
@keyframes clueIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cluePulse {
  0% { box-shadow: 0 0 0 3px rgba(224,162,74,0.7), 0 0 34px rgba(224,162,74,0.7), 0 4px 10px rgba(0,0,0,0.45); }
  100% { box-shadow: 0 0 0 2px rgba(224,162,74,0.0), 0 0 22px rgba(224,162,74,0.0), 0 4px 10px rgba(0,0,0,0.45); }
}
.clues-empty {
  padding: 24px 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  font-style: italic;
  z-index: 1;
}

/* ---------- Интро ---------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 1.1s ease;
}
.intro.fade-out { opacity: 0; pointer-events: none; }
.intro-img {
  position: absolute;
  inset: 0;
  background-image: url("images/intro.png");
  background-repeat: no-repeat;
  background-position: 0% 50%;   /* старт — левый край; JS плавно ведёт к правому */
  background-size: auto 120%;    /* JS уточнит масштаб, чтобы не было полос */
  animation: introFadeIn 1.2s ease both;
}
@keyframes introFadeIn { from { opacity: 0; } to { opacity: 1; } }
.intro-start {
  position: absolute;
  bottom: 11%;
  left: 0; right: 0;
  text-align: center;
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: 3px;
  color: var(--amber-hi);
  text-shadow: 0 2px 10px #000;
  animation: introPulse 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes introPulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }
.intro-skip {
  position: absolute;
  bottom: 24px;
  right: 26px;
  background: rgba(20,14,9,0.6);
  color: var(--muted);
  border: 1px solid var(--edge);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.intro-skip:hover { color: var(--text); border-color: var(--amber-dim); }

/* ---------- Эпичное появление новой улики ---------- */
.fact-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  pointer-events: none;
}
.fact-overlay.active { display: block; }
.fact-card {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(680px, 82vw);
  transform: translate(-50%, -50%) scale(0.2) rotate(-4deg);
  opacity: 0;
  transform-origin: center center;
  background: linear-gradient(160deg, #efe4c8, #d9c9a6);
  color: #241c10;
  border: 1px solid var(--amber);
  border-radius: 8px;
  padding: 40px 44px;
  box-shadow: 0 0 0 1px rgba(224,162,74,0.5), 0 30px 80px rgba(0,0,0,0.7),
              0 0 120px rgba(224,162,74,0.3);
  will-change: transform, opacity;
}
.fact-card.in {
  transition: transform 0.55s cubic-bezier(.18,.9,.28,1.2), opacity 0.35s ease;
  transform: translate(-50%, -50%) scale(1) rotate(-1.2deg);
  opacity: 1;
  animation: factGlow 1.4s ease-in-out infinite alternate;
}
.fact-card.fly {
  transition: transform 0.75s cubic-bezier(.7,0,.25,1), opacity 0.75s ease;
  animation: none;
}
.fact-label {
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--thread);
  font-weight: 700;
  margin-bottom: 14px;
}
.fact-body {
  font-family: var(--serif);
  font-size: clamp(22px, 3.6vw, 36px);
  line-height: 1.28;
  font-weight: 700;
  color: #201810;
}
@keyframes factGlow {
  from { box-shadow: 0 0 0 1px rgba(224,162,74,0.4), 0 30px 80px rgba(0,0,0,0.7), 0 0 90px rgba(224,162,74,0.25); }
  to   { box-shadow: 0 0 0 2px rgba(224,162,74,0.8), 0 30px 80px rgba(0,0,0,0.7), 0 0 160px rgba(224,162,74,0.5); }
}

/* ---------- Пробковая доска следователя ---------- */
.board-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: transparent;
}
/* Фон доски = размытый, затемнённый портрет активного персонажа (как везде) */
.board-overlay::before {
  content: "";
  position: absolute;
  inset: -40px;
  z-index: 0;
  background-image: var(--stage-img, none);
  background-size: cover;
  background-position: center 18%;
  filter: blur(16px) brightness(0.4) saturate(0.9);
  transform: scale(1.08);
}
.board-overlay::after {   /* нуар-виньетка поверх фото */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 30%, rgba(10,6,3,0.30), rgba(4,2,1,0.82) 100%);
}
.board-topbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: linear-gradient(180deg, rgba(20,14,9,0.55), rgba(9,6,4,0.4));
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  border-bottom: 1px solid rgba(224,162,74,0.14);
  box-shadow: 0 4px 18px rgba(0,0,0,0.45);
  z-index: 3;
}
.board-title {
  font-family: var(--serif);
  font-size: 18px; font-weight: 700;
  letter-spacing: 1px;
  color: #f3e2c7;
}
.board-hint { font-size: 12px; color: #b39d7d; flex: 1; }
.board-close {
  background: rgba(224,162,74,0.10);
  color: #f3e2c7;
  border: 1px solid rgba(224,162,74,0.35);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.board-close:hover { background: rgba(224,162,74,0.2); border-color: var(--amber-dim); }
/* Полотно доски = тёмное матовое стекло поверх портрета */
.board {
  position: relative;
  z-index: 1;
  flex: 1;
  overflow: hidden;
  background-color: rgba(12,8,5,0.44);
  background-image: radial-gradient(rgba(224,162,74,0.05) 1px, transparent 1.4px);
  background-size: 22px 22px;
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  box-shadow: inset 0 0 200px rgba(0,0,0,0.6);
}
.board-threads {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}
.board-threads line {
  stroke: var(--thread);
  stroke-width: 2.4;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4));
  pointer-events: stroke;
  cursor: pointer;
}
.board-threads line:hover { stroke: #ff5765; stroke-width: 3.4; }
.board-cards { position: absolute; inset: 0; z-index: 2; }
.note {
  position: absolute;
  width: 210px;
  background: #fdf6df;
  color: #2a2213;
  font-size: 13.5px;
  line-height: 1.4;
  padding: 26px 14px 14px;
  border-radius: 3px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
  cursor: grab;
  user-select: none;
  touch-action: none;
  will-change: transform;
}
.note { transition: transform 0.14s ease, box-shadow 0.14s ease; }
.note:nth-child(odd)  { transform: rotate(-1.6deg); }
.note:nth-child(even) { transform: rotate(1.4deg); }
/* при перетаскивании карточка чуть увеличивается и выпрямляется — «взяли в руку» */
.note.dragging { cursor: grabbing; transform: scale(1.08); box-shadow: 0 26px 48px rgba(0,0,0,0.6); z-index: 30 !important; }
.note-pin {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8189, #c62733 60%, #8f141d);
  box-shadow: 0 3px 5px rgba(0,0,0,0.5), inset 0 -2px 3px rgba(0,0,0,0.35), inset 0 2px 2px rgba(255,255,255,0.5);
  cursor: crosshair;
  z-index: 5;
}
.note-pin:hover { transform: translateX(-50%) scale(1.15); }
.note.linking .note-pin {
  box-shadow: 0 0 0 4px rgba(255,220,90,0.75), 0 3px 5px rgba(0,0,0,0.5);
  animation: pinPulse 1s ease infinite;
}
@keyframes pinPulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(255,220,90,0.55), 0 3px 5px rgba(0,0,0,0.5); }
  50%     { box-shadow: 0 0 0 7px rgba(255,220,90,0.15), 0 3px 5px rgba(0,0,0,0.5); }
}
.board.is-linking .note-pin { cursor: crosshair; }
.board.is-linking .note:not(.linking) { outline: 1px dashed rgba(198,39,51,0.6); outline-offset: 3px; }

/* ---------- Адаптив ---------- */
@media (max-width: 980px) {
  .layout { flex-direction: column; height: auto; min-height: 100vh; }
  .app { height: 66vh; }
  .chars { width: auto; flex: 0 0 auto; border-right: none; border-bottom: 1px solid var(--edge-soft); }
  .chars-list { flex-direction: row; overflow-x: auto; }
  .char-item { flex: 0 0 auto; }
  .char-role { display: none; }
  .clues { width: auto; flex: 1 1 auto; border-left: none; border-top: 1px solid var(--edge-soft); }
}

/* ============================================================
   ЧАСЫ / ДЕДЛАЙН
   ============================================================ */
.clock {
  display: flex; flex-direction: column; align-items: center;
  margin-left: auto; margin-right: 6px;
  padding: 3px 12px;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: linear-gradient(180deg, #171009, #0f0a06);
  min-width: 74px;
  line-height: 1;
  transition: border-color 0.5s, box-shadow 0.5s;
}
.clock-time {
  font-family: var(--serif);
  font-size: 20px; font-weight: 700; letter-spacing: 1px;
  color: var(--amber-hi);
  font-variant-numeric: tabular-nums;
}
.clock-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); margin-top: 3px; }
.clock.warn  { border-color: rgba(198,65,58,0.5); box-shadow: 0 0 14px rgba(198,65,58,0.25); }
.clock.warn .clock-time { color: #ef8f6a; }
.clock.dawn  { border-color: rgba(224,162,74,0.7); box-shadow: 0 0 18px rgba(224,162,74,0.35); animation: clockPulse 1.6s ease infinite; }
.clock.dawn .clock-time { color: var(--amber-hi); }
@keyframes clockPulse { 0%,100% { box-shadow: 0 0 10px rgba(224,162,74,0.2); } 50% { box-shadow: 0 0 22px rgba(224,162,74,0.5); } }

/* ============================================================
   ЗАЦЕПКА vs ФАКТ — цвета точек/пинов и бейджи
   ============================================================ */
/* правая панель */
.clue-item.is-fact::before     { background: var(--fact); }
.clue-item.is-disputed         { opacity: 0.62; }
.clue-item.is-disputed .clue-text { text-decoration: line-through; text-decoration-color: rgba(198,65,58,0.6); }
.clue-dot.dot-lead { background: var(--lead); box-shadow: 0 0 5px rgba(198,154,59,0.55); }
.clue-dot.dot-fact { background: var(--fact); box-shadow: 0 0 7px rgba(79,180,119,0.7); }
.clue-dot.dot-disputed { background: var(--disputed); box-shadow: none; }
.clue-badge {
  flex: 0 0 auto; align-self: flex-start; margin-top: 2px;
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.6px;
  padding: 2px 6px; border-radius: 999px; font-weight: 700;
}
.badge-lead { color: #e9c26b; background: rgba(198,154,59,0.14); border: 1px solid rgba(198,154,59,0.4); }
.badge-fact { color: var(--fact-hi); background: rgba(79,180,119,0.16); border: 1px solid rgba(79,180,119,0.5); }
.clue-src { display: block; font-size: 10.5px; color: var(--muted-2); margin-top: 3px; font-style: italic; }

/* доска: пины по типу */
.note.note-fact .note-pin {
  background: radial-gradient(circle at 35% 30%, var(--fact-hi), var(--fact) 60%, #2f7a4f);
}
.note.note-disputed { opacity: 0.72; }
.note.note-disputed .note-body { text-decoration: line-through; text-decoration-color: rgba(198,65,58,0.55); }
.note-tag {
  position: absolute; top: 4px; right: 6px;
  font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 800;
  padding: 1px 5px; border-radius: 999px;
}
.note-tag.t-lead { color: #7a5a12; background: #f0d283; }
.note-tag.t-fact { color: #1c5236; background: #8fe6b1; }
.note-src { display: block; margin-top: 6px; font-size: 10px; color: #6a5c3f; font-style: italic; }

/* свидетель как приёмник предъявления */
.char-item.present-target {
  background: rgba(224,162,74,0.16) !important;
  box-shadow: inset 0 0 0 1px var(--amber-dim), 0 0 18px rgba(224,162,74,0.25);
}
.char-item.present-target .char-avatar { border-color: var(--amber); filter: none; }

/* ============================================================
   ФОРМА ОБВИНЕНИЯ (внутри доски)
   ============================================================ */
.accuse {
  flex: 0 0 auto; z-index: 3;
  border-top: 1px solid var(--edge);
  background: linear-gradient(180deg, rgba(20,14,9,0.92), rgba(11,8,5,0.96));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 12px 20px 14px;
}
.accuse-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; }
.accuse-title { font-family: var(--serif); font-size: 16px; color: var(--amber-hi); letter-spacing: 0.4px; }
.accuse-hint { font-size: 11.5px; color: var(--muted); }
.accuse-hint b { color: var(--fact-hi); }
.accuse-slots { display: flex; gap: 12px; flex-wrap: wrap; }
.acc-slot {
  flex: 1 1 160px; min-width: 150px; min-height: 62px;
  border: 1px dashed var(--edge); border-radius: 8px;
  background: rgba(0,0,0,0.25);
  padding: 8px 10px;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  cursor: default;
}
.acc-slot-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--amber-dim); margin-bottom: 5px; }
.acc-slot-val { font-size: 12.5px; color: var(--text); line-height: 1.35; min-height: 17px; }
.acc-slot-val.empty { color: var(--muted-2); font-style: italic; }
.acc-slot.filled { border-style: solid; border-color: rgba(79,180,119,0.5); background: rgba(79,180,119,0.08); }
.acc-slot.filled .acc-slot-val { cursor: pointer; }
.acc-slot.drop-ok  { border-color: var(--fact); box-shadow: 0 0 0 2px rgba(79,180,119,0.35), 0 0 18px rgba(79,180,119,0.3); background: rgba(79,180,119,0.14); }
.acc-slot.drop-bad { border-color: var(--danger); box-shadow: 0 0 0 2px rgba(198,65,58,0.4); background: rgba(198,65,58,0.12); animation: slotShake 0.35s; }
@keyframes slotShake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-4px);} 75%{transform:translateX(4px);} }
.accuse-foot { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.accuse-result { font-size: 13px; color: var(--text); flex: 1; line-height: 1.4; }
.accuse-result .ok { color: var(--fact-hi); font-weight: 700; }
.accuse-result .bad { color: #ef8f6a; font-weight: 700; }
.accuse-btn {
  flex: 0 0 auto;
  background: linear-gradient(180deg, var(--danger), #8f2a26);
  color: #fff; border: 1px solid #7d2420; border-radius: 10px;
  padding: 10px 20px; font-size: 14px; font-weight: 700; cursor: pointer;
  font-family: var(--serif); letter-spacing: 0.5px;
}
.accuse-btn:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.4); }
.accuse-btn:not(:disabled):hover { filter: brightness(1.12); }

/* ============================================================
   ФИНАЛ / ВЕРДИКТ
   ============================================================ */
.finale {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4,3,2,0.86);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 24px;
}
.finale.hidden { display: none; }
.finale-box {
  max-width: 760px; width: 100%; max-height: 86vh; overflow-y: auto;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--edge); border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(224,162,74,0.1);
  padding: 30px 34px;
  animation: clueIn 0.5s ease both;
}
.finale-title { font-family: var(--serif); font-size: 26px; color: var(--amber-hi); margin-bottom: 16px; letter-spacing: 0.5px; }
.finale-title.win  { color: var(--fact-hi); }
.finale-title.lose { color: #ef8f6a; }
.finale-body { font-size: 14px; line-height: 1.6; color: var(--text); white-space: pre-wrap; }
.finale-body h1, .finale-body h2, .finale-body h3 { font-family: var(--serif); color: var(--amber); margin: 16px 0 8px; }
.finale-actions { display: flex; gap: 12px; margin-top: 24px; }
.finale-btn {
  background: var(--panel-3); color: var(--text); border: 1px solid var(--edge);
  border-radius: 10px; padding: 10px 20px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.finale-btn:hover { border-color: var(--amber-dim); }
.finale-btn-2 { background: transparent; color: var(--muted); }

/* корпус карточки-зацепки: текст + подпись источника */
.clue-body { flex: 1 1 auto; min-width: 0; }

/* карточка продвижения зацепки в ФАКТ — зелёная */
.fact-card.is-fact { border-color: var(--fact); background: linear-gradient(160deg, #dff0e4, #bfe3cd); box-shadow: 0 0 0 1px rgba(79,180,119,0.5), 0 30px 80px rgba(0,0,0,0.7), 0 0 120px rgba(79,180,119,0.3); }
.fact-card.is-fact .fact-label { color: #2f7a4f; }

/* Параллакс-обёртка портрета: её сдвигает мышь, а кен-бёрнс живёт на .stage-bg внутри */
.stage-parallax {
  position: absolute; inset: 0;
  transform: translate(0, 0);
  transition: transform 0.32s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

/* «Призрак» перетаскиваемой зацепки — летит за курсором поверх всего */
.clue-ghost {
  position: fixed !important;
  z-index: 600;
  margin: 0 !important;
  pointer-events: none;
  opacity: 0.95;
  transform: rotate(-2deg) scale(1.07);
  box-shadow: 0 22px 46px rgba(0,0,0,0.62);
  animation: none !important;
}
/* оригинал во время перетаскивания — бледный плейсхолдер на своём месте */
.clue-item.dragging { opacity: 0.32; box-shadow: none; transform: none; border-style: dashed; }

/* Центральная сцена как приёмник предъявления улики (перетащить карточку в диалог) */
.stage.present-target { box-shadow: inset 0 0 0 2px var(--amber), inset 0 0 60px rgba(224,162,74,0.3); cursor: copy; }
.stage.present-target::after {
  content: "Предъявить улику";
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 6; padding: 5px 14px; border-radius: 999px;
  background: rgba(224,162,74,0.9); color: #201810; font-size: 12px; font-weight: 700;
  letter-spacing: 0.4px; pointer-events: none;
}

/* Запрет выделения текста — чтобы при перетаскивании не подсвечивалось синим.
   Поля ввода остаются выделяемыми. */
body { -webkit-user-select: none; -moz-user-select: none; user-select: none; }
input, textarea { -webkit-user-select: text; -moz-user-select: text; user-select: text; }

/* ---------- Левая панель: две секции (свидетели + локации) ---------- */
.chars { overflow-y: auto; }
.chars-list { flex: 0 0 auto; }
.chars-head-sub { margin-top: 4px; }
.locs-list { padding-bottom: 12px; }

.loc-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
  user-select: none;
}
.loc-item:hover { background: rgba(224,162,74,0.06); }
.loc-item.active {
  background: linear-gradient(180deg, rgba(224,162,74,0.14), rgba(224,162,74,0.05));
  border-color: rgba(224,162,74,0.4);
}
.loc-avatar {
  width: 42px; height: 42px; flex: 0 0 auto;
  border-radius: 10px;
  background: radial-gradient(circle at 50% 40%, #1c140c, #0a0705 80%);
  border: 1px solid var(--edge);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; filter: grayscale(0.3) opacity(0.85);
}
.loc-item.active .loc-avatar { border-color: var(--amber); box-shadow: 0 0 12px rgba(224,162,74,0.3); filter: none; }

/* «Подсмотреть картинку»: курсор на сцене, но не на диалоговом окне —
   весь UI поверх изображения плавно исчезает, открывая локацию/персонажа. */
.vn-box { transition: opacity 0.45s ease, transform 0.45s ease; }
.stage-vignette, .stage-grain { transition: opacity 0.6s ease; }
.stage.peek .vn-box {
  opacity: 0;
  transform: translateX(-50%) translateY(16px);
  pointer-events: none;
}
.stage.peek .stage-vignette { opacity: 0.25; }
.stage.peek .stage-grain { opacity: 0; }

/* Миниатюра локации с фото в левой панели */
.loc-avatar.has-img {
  background-size: cover; background-position: center 35%;
  font-size: 0; filter: grayscale(0.35) brightness(0.9) contrast(1.05);
}
.loc-item:hover .loc-avatar.has-img { filter: grayscale(0.15) brightness(1); }
.loc-item.active .loc-avatar.has-img { filter: none; }

/* ============================================================
   «Моменты» — слом рутины (психологический нуар).
   FX-слой поверх сцены + застывший взгляд.
   ============================================================ */
.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 45; }
.fx-dark { position: absolute; inset: 0; opacity: 0; background: #05040a; }

/* flicker — свет судорожно гаснет и вспыхивает */
@keyframes fxFlick {
  0%,100% { opacity: 0; }
  6% { opacity: 0.94; } 11% { opacity: 0.08; } 17% { opacity: 0.88; }
  23% { opacity: 0.02; } 38% { opacity: 0.96; } 52% { opacity: 0.2; }
  63% { opacity: 0.92; } 78% { opacity: 0.35; } 90% { opacity: 0.8; }
}
.fx-dark.flicker { animation: fxFlick 1.6s ease-in-out forwards; }
/* непрерывное мигание — крутится, пока не сменится сцена (концовка с инопланетянами) */
.fx-dark.flicker-loop { animation: fxFlick 1.2s ease-in-out infinite; }

/* stare — персонаж застывает и молча смотрит в упор */
.stage-bg { transition: filter 0.5s ease; }
.stage.staring .stage-bg { filter: grayscale(0.7) brightness(0.6) contrast(1.12); }
.stage.staring .stage-vignette { opacity: 1; transition: opacity 0.6s ease; }
.stage.staring .vn-box { opacity: 0.55; transition: opacity 0.6s ease; }

@media (prefers-reduced-motion: reduce) {
  .fx-dark.flicker { animation-duration: 0.01s; }
}

/* ============================================================
   Нож — особый подбираемый предмет: карточка другого (кровавого) цвета
   ============================================================ */
.clue-item.is-knife::before { background: #c0424a; }
.clue-item.is-knife {
  background: linear-gradient(100deg, rgba(120,28,32,0.30), rgba(60,14,18,0.12));
  border-color: rgba(192,66,74,0.55);
  box-shadow: 0 0 0 1px rgba(192,66,74,0.28), 0 0 18px rgba(192,66,74,0.16);
}
.clue-item.is-knife .clue-text { color: #ffe3df; }
.clue-dot.dot-knife { background: #c0424a; box-shadow: 0 0 8px rgba(192,66,74,0.85); }
.badge-knife { color: #ffd7d2; background: rgba(192,66,74,0.22); border: 1px solid rgba(192,66,74,0.65); }

/* ============================================================
   Схватка «нож» (--duel-k: 0 → 1). БЕЗ контраста: Лариса «наезжает» на
   игрока (зум), портрет всё сильнее трясёт, в центре мигает предупреждение.
   ============================================================ */
.duel-overlay {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 120% at 50% 50%, transparent 22%, rgba(120,0,0,0.75) 100%);
  transition: opacity 0.15s linear;
}
html.duel .duel-overlay {
  opacity: calc(0.06 + var(--duel-k, 0) * 0.34); /* лёгкая красная рамка по краям, центр чистый */
  animation: duelPulse 0.9s ease-in-out infinite;
}
@keyframes duelPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); } }

/* Лариса приближается: зум растёт с --duel-k (перебивает параллакс). Приближение вдвое
   медленнее (0.35). Зум НЕ к центру, а к ЛИЦУ — transform-origin в верхнюю треть кадра. */
html.duel #stageParallax {
  transform: scale(calc(1.04 + var(--duel-k, 0) * 0.35)) !important;
  transform-origin: 50% 30% !important;
  transition: transform 0.12s linear;
}
html.duel .stage-bg { animation: none !important; } /* замораживаем кен-бёрнс, движется только наезд */

/* Мигание НА ВЕСЬ ЭКРАН (чёрный слой). Глубина завязана на --duel-k: у дальнего подхода почти
   не видно, у самого лица — бешеный стробоскоп на весь экран. */
html.duel #fxDark { animation: duelScreenFlicker 0.11s linear infinite; }
@keyframes duelScreenFlicker {
  0%, 100% { opacity: 0; }
  50%      { opacity: calc(var(--duel-k, 0) * 0.92); }
}

/* Мигающая надпись в центре — «Лариса достала нож, идёт к вам» */
.duel-warn {
  position: fixed; inset: 0; z-index: 62;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; text-align: center; padding: 0 28px;
  font-family: var(--serif); font-weight: 700; line-height: 1.25;
  font-size: clamp(15px, 2.3vw, 23px);
  color: #ff3b30;
  text-shadow: 0 2px 14px rgba(0,0,0,0.9), 0 0 26px rgba(198,39,45,0.8);
  animation: duelWarnBlink 0.62s steps(1, end) infinite;
}
.duel-warn.hidden { display: none; }
@keyframes duelWarnBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0.12; } }

/* ============================================================
   Вспышка получения урона — детектив убит
   ============================================================ */
.damage-fx {
  position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 120% at 50% 50%, rgba(190,0,0,0.20) 0%, rgba(140,0,0,0.9) 100%);
}
.damage-fx.hit { animation: damageHit 0.9s ease-out forwards; }
@keyframes damageHit { 0% { opacity: 0; } 8% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html.duel .duel-overlay { animation: none; }
}

/* ============================================================
   КОНЦОВКИ: полноэкранная картинка 4:3, медленный вертикальный
   параллакс (снизу вверх ~30с и обратно), заполняя весь экран.
   ============================================================ */
.ending { position: fixed; inset: 0; z-index: 300; background: #000; overflow: hidden; }
.ending.hidden { display: none; }
.ending-img {
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  background-size: cover;                 /* 4:3 в широкий экран → есть вертикальный запас для панорамы */
  background-position: center 100%;       /* старт — низ картинки */
  animation: endingPan 30s ease-in-out infinite alternate;
  will-change: background-position, opacity;
  opacity: 0;                             /* старт — полная тьма */
  transition: opacity 7s ease;            /* проявление из тьмы за 7с */
}
.ending.reveal .ending-img { opacity: 1; }
@keyframes endingPan {
  from { background-position: center 100%; } /* низ */
  to   { background-position: center 0%; }   /* верх */
}
.ending-restart {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 301; padding: 12px 26px; border-radius: 999px; cursor: pointer;
  font-size: 14px; font-weight: 600; letter-spacing: 0.3px;
  color: #f4ead2; background: rgba(20,16,12,0.72);
  border: 1px solid rgba(224,162,74,0.5);
  backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;       /* прячем, пока картинка не проявится */
  transition: background 0.2s ease, transform 0.1s ease, opacity 2s ease;
}
.ending.reveal .ending-restart { opacity: 1; pointer-events: auto; transition: background 0.2s ease, transform 0.1s ease, opacity 2s ease 5s; }
.ending-restart:hover { background: rgba(46,34,18,0.9); }
.ending-restart:active { transform: translateX(-50%) scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .ending-img { animation: none; background-position: center; transition: opacity 1.5s ease; }
}