/* ======================================================================
   Видеопрокат «Последний сеанс». Тема задаётся атрибутом data-era на <html>:
   rental (полка проката) | silent | universal | sixties | seventies | eighties.
   Каждая эпоха переопределяет только токены — компоненты общие.
   ====================================================================== */
:root {
  --bg: #0e0c12;
  --panel: #1b1722;
  --paper: #f2ede4;
  --dim: #9d95a8;
  --accent: #e8322b;
  --accent2: #29d1c4;
  --on-accent: #fff;
  --blood: #e8322b;
  --line: rgba(242, 237, 228, .16);
  --head: 'Oswald', 'PT Sans', Arial, sans-serif;
  --body: 'PT Sans', Arial, sans-serif;
  --osd: 'Press Start 2P', 'PT Sans', monospace;
  --head-transform: uppercase;
  --head-shadow: 2px 2px 0 var(--accent);
  --clip: none;
  --clip2: none;
  --grain: .07;
  --scan: .35;
  --ground: radial-gradient(120% 50% at 50% -10%, rgba(232, 50, 43, .18), transparent 60%);
  color-scheme: dark;
}

[data-era="silent"] {
  --bg: #0c0a07; --panel: #16120c; --paper: #ebe1c8; --dim: #a99c80;
  --accent: #a8814a; --accent2: #ebe1c8; --on-accent: #16120c; --blood: #a3282a;
  --line: rgba(235, 225, 200, .22);
  --head: 'Underdog', 'Old Standard TT', Georgia, serif;
  --body: 'Old Standard TT', Georgia, serif;
  --head-transform: none;
  --head-shadow: 3px 3px 0 #a3282a;
  --clip: polygon(1.5% 4%, 99% 0, 100% 93%, 3% 100%);
  --clip2: polygon(0 0, 97% 6%, 100% 100%, 2% 95%);
  --grain: .14; --scan: 0;
  --ground: radial-gradient(120% 60% at 50% -10%, rgba(168, 129, 74, .2), transparent 60%),
            repeating-linear-gradient(115deg, transparent 0 46px, rgba(235, 225, 200, .025) 46px 48px);
}
[data-era="universal"] {
  --bg: #06090a; --panel: #0f1517; --paper: #dfe7e2; --dim: #8ea39a;
  --accent: #7ee08f; --accent2: #b6f5c0; --on-accent: #06090a; --blood: #b3262d;
  --line: rgba(126, 224, 143, .22);
  --head: 'Ruslan Display', 'Old Standard TT', Georgia, serif;
  --body: 'Old Standard TT', Georgia, serif;
  --head-transform: none;
  --head-shadow: 0 0 14px rgba(126, 224, 143, .55);
  --clip: polygon(0 3%, 100% 0, 100% 97%, 0 100%);
  --clip2: var(--clip);
  --grain: .12; --scan: 0;
  --ground: radial-gradient(90% 50% at 50% 0%, rgba(126, 224, 143, .14), transparent 65%);
}
[data-era="sixties"] {
  --bg: #000; --panel: #111; --paper: #fff; --dim: #9a9a9a;
  --accent: #fff; --accent2: #fff; --on-accent: #000; --blood: #d01f26;
  --line: rgba(255, 255, 255, .25);
  --head: 'Oswald', Arial, sans-serif;
  --head-shadow: none;
  --grain: .1; --scan: 0;
  --ground: repeating-linear-gradient(0deg, transparent 0 34px, rgba(255, 255, 255, .045) 34px 40px);
}
[data-era="seventies"] {
  --bg: #0d0705; --panel: #1d120c; --paper: #f4e6c8; --dim: #b39a7b;
  --accent: #f07a1a; --accent2: #ffb35c; --on-accent: #1d120c; --blood: #c3241d;
  --line: rgba(244, 230, 200, .2);
  --head: 'Playfair Display', 'Old Standard TT', Georgia, serif;
  --head-transform: none;
  --head-shadow: 0 0 18px rgba(240, 122, 26, .5);
  --grain: .11; --scan: 0;
  --ground: radial-gradient(100% 55% at 50% 110%, rgba(240, 122, 26, .16), transparent 65%);
}
[data-era="eighties"] {
  --bg: #07060d; --panel: #141024; --paper: #f4f0ff; --dim: #9b93b8;
  --accent: #ff2d7a; --accent2: #2de2e6; --on-accent: #fff; --blood: #ff2d55;
  --line: rgba(45, 226, 230, .22);
  --head: 'Oswald', Arial, sans-serif;
  --head-shadow: -2px 0 0 #2de2e6, 2px 0 0 #ff2d7a;
  --grain: .05; --scan: .5;
  --ground: linear-gradient(180deg, rgba(255, 45, 122, .12), transparent 40%),
            repeating-linear-gradient(90deg, transparent 0 39px, rgba(45, 226, 230, .05) 39px 40px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--paper);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.4;
  overscroll-behavior: none;
}
body {
  background: var(--ground), var(--bg);
  user-select: none;
  -webkit-user-select: none;
  transition: background-color .4s;
}
button { font: inherit; color: inherit; }

/* ---------- плёнка и кинескоп ---------- */
.grain {
  position: fixed; inset: -50%; pointer-events: none; z-index: 50;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .95  0 0 0 0 .85  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain .6s steps(5) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-6%, 4%); }
  40% { transform: translate(5%, -7%); }
  60% { transform: translate(-3%, 8%); }
  80% { transform: translate(7%, 2%); }
}
.scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 51;
  opacity: var(--scan);
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .35) 0 1px, transparent 1px 3px);
}
.scanlines::after {
  content: ''; position: absolute; left: 0; right: 0; height: 60px;
  background: linear-gradient(transparent, rgba(255, 255, 255, .05), transparent);
  animation: tracking 7s linear infinite;
}
@keyframes tracking { from { top: -60px; } to { top: 100%; } }
.vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 49;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .7) 100%);
  animation: flicker 4s infinite;
}
@keyframes flicker {
  0%, 100% { opacity: 1; }
  47% { opacity: .92; }
  49% { opacity: 1; }
  73% { opacity: .95; }
}
@media (prefers-reduced-motion: reduce) {
  .grain, .vignette, .scanlines::after { animation: none; }
}

/* ---------- раскладка ---------- */
#app { position: relative; z-index: 1; }
.screen {
  min-height: 100dvh;
  padding: calc(18px + env(safe-area-inset-top)) 16px calc(120px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 16px;
  animation: iris .45s ease-out;
}
.screen.center { justify-content: center; }
@keyframes iris {
  from { clip-path: circle(0% at 50% 50%); }
  to { clip-path: circle(150% at 50% 50%); }
}
.loading {
  min-height: 100dvh; display: grid; place-items: center;
  font-family: var(--osd); font-size: 18px; color: var(--accent2);
  animation: flicker 1s infinite;
}

/* ---------- типографика ---------- */
.title {
  font-family: var(--head); font-weight: 700;
  font-size: clamp(30px, 9vw, 44px); line-height: 1.02;
  text-transform: var(--head-transform);
  margin: 0;
  text-shadow: var(--head-shadow);
}
.title small {
  display: block; font-family: var(--osd); font-weight: 400;
  font-size: 10px; letter-spacing: .1em; line-height: 1.8;
  color: var(--accent2); text-shadow: none; text-transform: uppercase;
}
.osd { font-family: var(--osd); font-size: 10px; line-height: 1.7; letter-spacing: .05em; color: var(--accent2); text-transform: uppercase; }
.muted { color: var(--dim); }
.score-big { font-family: var(--head); font-weight: 700; font-size: 64px; line-height: 1; text-shadow: var(--head-shadow); }

/* ---------- карточка (в немом кино — интертитр) ---------- */
.card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  padding: 22px 18px;
  font-size: 18px; line-height: 1.45;
  clip-path: var(--clip);
}
.card h2 {
  font-family: var(--head); font-weight: 700; font-size: 28px; line-height: 1.1;
  text-transform: var(--head-transform);
  margin: 0 0 10px; text-shadow: var(--head-shadow);
}
.card p { margin: .5em 0; }
.card .era { margin-bottom: 8px; }
[data-era="silent"] .card {
  border: 3px double var(--paper); text-align: center; padding: 34px 20px; transform: rotate(-1deg);
}
[data-era="silent"] .card::before, [data-era="silent"] .card::after {
  content: '❦'; position: absolute; left: 50%; transform: translateX(-50%); color: var(--accent); font-size: 20px;
}
[data-era="silent"] .card::before { top: 6px; }
[data-era="silent"] .card::after { bottom: 6px; transform: translateX(-50%) rotate(180deg); }
[data-era="sixties"] .card { border: 0; border-top: 6px solid var(--paper); border-bottom: 6px solid var(--paper); }
[data-era="eighties"] .card, [data-era="rental"] .card { border-radius: 4px; box-shadow: 0 0 0 1px var(--line), 0 0 24px rgba(255, 45, 122, .12); }
.tap { cursor: pointer; }
.tap-next { text-align: center; color: var(--dim); font-style: italic; animation: flicker 2s infinite; }

/* ---------- кнопки ---------- */
.btn {
  display: block; width: 100%; border: 0; cursor: pointer;
  padding: 16px 20px;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--head); font-weight: 700; font-size: 21px; letter-spacing: .04em;
  text-transform: var(--head-transform);
  clip-path: var(--clip2);
  transition: transform .1s;
}
.btn:active { transform: scale(.97); }
.btn.alt { background: var(--paper); color: var(--bg); }
.btn.ghost { background: transparent; color: var(--dim); font-family: var(--body); font-weight: 400; font-size: 16px; padding: 10px; text-transform: none; }
.btn[disabled] { opacity: .5; }
[data-era="silent"] .btn { background: var(--paper); color: var(--panel); }
[data-era="silent"] .btn.ghost { background: transparent; color: var(--dim); }
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 65%, transparent);
  display: grid; gap: 4px;
}

/* ---------- полка проката ---------- */
.hud { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--dim); font-size: 15px; }
.hud b { color: var(--paper); font-family: var(--head); font-size: 24px; }
.shelf { display: flex; flex-direction: column; gap: 8px; }
.tape {
  --spine: #333; --spine-ink: #fff;
  display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px;
  width: 100%; min-height: 62px; padding: 6px 12px 6px 0;
  border: 0; text-align: left; cursor: pointer;
  background: linear-gradient(90deg, var(--spine) 0 52px, #17141c 52px);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 2px 0 #000;
}
.tape .emb { width: 52px; height: 50px; display: grid; place-items: center; color: var(--spine-ink); }
.tape .emb svg { width: 30px; height: 30px; }
.tape .t-title, .tape .t-sub { display: block; }
.tape .t-title { font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 17px; line-height: 1.15; color: #f2ede4; }
.tape .t-sub { font-size: 13px; color: #9d95a8; font-style: italic; line-height: 1.25; }
.tape .chip { font-family: var(--osd); font-size: 9px; padding: 6px 7px; border-radius: 2px; white-space: nowrap; }
.chip.play { background: #e8322b; color: #fff; }
.chip.quiz { background: #ffd23f; color: #111; }
.chip.done { background: transparent; color: #f2ede4; font-size: 12px; }
.chip.soon { color: #6d6578; }
.tape.empty { background: repeating-linear-gradient(135deg, #15121a 0 10px, #19151f 10px 20px); }
.tape.empty .emb { color: #4d4657; font-family: 'Oswald', sans-serif; font-size: 26px; }
.tape.soon { opacity: .45; }
.tape[data-era="silent"] { --spine: #a8814a; --spine-ink: #16120c; }
.tape[data-era="universal"] { --spine: #2f6b3a; --spine-ink: #b6f5c0; }
.tape[data-era="sixties"] { --spine: #f2f2f2; --spine-ink: #000; }
.tape[data-era="seventies"] { --spine: #f07a1a; --spine-ink: #1d120c; }
.tape[data-era="eighties"] { --spine: #ff2d7a; --spine-ink: #fff; }

.vcr {
  display: grid; gap: 4px; width: 100%; padding: 16px; border: 0; cursor: pointer; text-align: center;
  background: linear-gradient(#26222d, #15121a); border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 3px 0 #000;
  color: var(--paper);
}
.vcr .slot { height: 8px; margin: 0 18%; background: #000; border-radius: 2px; box-shadow: inset 0 2px 3px rgba(255, 255, 255, .08); }
.vcr .label { font-family: var(--head); font-size: 20px; text-transform: uppercase; }
.vcr.locked { opacity: .55; }

/* ---------- символ и вопрос ---------- */
.reveal { display: grid; place-items: center; gap: 10px; text-align: center; }
.reveal .sym { width: 110px; height: 110px; color: var(--accent); filter: drop-shadow(0 0 12px var(--accent)); animation: reveal 1.1s ease-out; }
@keyframes reveal {
  0% { opacity: 0; transform: scale(2.2) rotate(-25deg); filter: blur(8px); }
  60% { opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
.options { display: grid; gap: 10px; }
.option {
  border: 1px solid var(--line); background: var(--panel); color: var(--paper);
  padding: 14px 16px; text-align: left; font-family: var(--body); font-size: 17px; cursor: pointer;
  clip-path: var(--clip2);
}
.option.right { background: #1f7a3a; border-color: #1f7a3a; color: #fff; }
.option.wrong { background: var(--blood); border-color: var(--blood); color: #fff; }
.option:disabled { cursor: default; }

/* ---------- тосты и модалки ---------- */
.toast {
  position: fixed; left: 16px; right: 16px; top: calc(16px + env(safe-area-inset-top)); z-index: 60;
  padding: 14px 16px; text-align: center;
  background: var(--paper); color: var(--bg); font-weight: 700;
  clip-path: var(--clip);
  animation: toast 2.6s forwards;
}
@keyframes toast {
  0% { transform: translateY(-140%); }
  10%, 85% { transform: translateY(0); }
  100% { transform: translateY(-140%); }
}
.modal { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .8); display: grid; place-items: center; padding: 16px; }
.modal .card { width: 100%; max-width: 420px; }
.modal input {
  width: 100%; margin: 12px 0; padding: 12px;
  background: var(--bg); color: var(--paper); border: 1px solid var(--line);
  font: inherit; font-size: 18px;
}

/* ---------- финал ---------- */
.ticket { text-align: center; }
.ticket .clock { font-family: var(--osd); font-size: 22px; color: var(--accent2); margin: 10px 0; }
.ticket .rec { font-family: var(--osd); font-size: 12px; color: var(--accent); animation: flicker 1s infinite; }
.chrono { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chrono li { display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; align-items: baseline; padding: 8px 10px; background: var(--panel); border-radius: 3px; }
.chrono .y { font-family: var(--osd); font-size: 11px; color: var(--accent2); }
.chrono .ok { color: #39d67a; }
.chrono .no { color: var(--blood); }

/* ======================================================================
   ИГРЫ — общий каркас
   ====================================================================== */
.game {
  position: fixed; inset: 0; z-index: 5;
  display: flex; flex-direction: column;
  padding: calc(12px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));
  touch-action: none; overflow: hidden;
}
.game-hud {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-family: var(--head); font-weight: 700; font-size: 19px; min-height: 32px;
  text-transform: var(--head-transform); position: relative; z-index: 3;
}
.game-hud .msg { color: var(--accent); text-align: right; }
.timer-bar { height: 4px; background: var(--line); margin: 8px 0; position: relative; z-index: 3; }
.timer-bar i { display: block; height: 100%; background: var(--accent); transform-origin: left; }
.stage { flex: 1; width: 100%; min-height: 0; }
.hint-line { text-align: center; color: var(--dim); font-size: 15px; position: relative; z-index: 3; }
.flash { position: absolute; inset: 0; pointer-events: none; z-index: 4; background: #fff; opacity: 0; transition: opacity .35s; }
.flash.on { opacity: .85; transition: none; }
.flash.red { background: var(--blood); }

/* --- «Калигари»: интертитр --- */
.g-titles .card { min-height: 160px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-content: center; justify-content: center; font-size: 22px; }
.g-titles .placed { animation: reveal .4s ease-out; }
.g-titles .blank { color: var(--line); }
.pieces { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-content: flex-start; padding-top: 24px; flex: 1; }
.piece {
  border: 0; cursor: pointer; padding: 12px 14px;
  background: var(--paper); color: var(--panel);
  font-family: var(--body); font-size: 19px;
  clip-path: polygon(0 8%, 12% 0, 30% 6%, 55% 0, 78% 7%, 100% 0, 97% 50%, 100% 92%, 70% 100%, 45% 94%, 20% 100%, 0 95%, 3% 50%);
}
.piece.shake { animation: shake .35s; background: var(--blood); color: #fff; }
@keyframes shake {
  20%, 60% { transform: translateX(-8px) rotate(-3deg); }
  40%, 80% { transform: translateX(8px) rotate(3deg); }
}

/* --- «Психо»: ключи мотеля --- */
.g-memory .grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 10px; padding: 10px 0; min-height: 0; }
.g-memory .mcard { perspective: 600px; border: 0; padding: 0; background: none; cursor: pointer; }
.g-memory .inner { position: relative; width: 100%; height: 100%; transition: transform .35s; transform-style: preserve-3d; }
.g-memory .mcard.open .inner { transform: rotateY(180deg); }
.g-memory .face, .g-memory .back {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: grid; place-items: center;
}
.g-memory .back { background: repeating-linear-gradient(0deg, #fff 0 10px, #000 10px 20px); border: 2px solid #fff; }
.g-memory .back b { background: #000; color: #fff; font-family: 'Oswald', sans-serif; font-size: 13px; padding: 4px 8px; letter-spacing: .12em; }
.g-memory .face { background: #e9e2cf; color: #111; transform: rotateY(180deg); border: 2px solid #fff; }
.g-memory .face svg { width: 80%; height: 80%; }
.g-memory .mcard.matched .face { background: #fff; outline: 3px solid var(--blood); outline-offset: -6px; }

/* --- «Ночь живых мертвецов»: окна фермы --- */
.g-notld .house {
  flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 14px;
  padding: 18px 14px; margin-top: 10px; min-height: 0;
  background: repeating-linear-gradient(0deg, #2a2a2a 0 16px, #222 16px 18px);
  border-top: 22px solid #111;
}
.g-notld .window {
  position: relative; border: 6px solid #d9d9d9; background: #050505; overflow: hidden; cursor: pointer; padding: 0;
}
.g-notld .window::before, .g-notld .window::after { content: ''; position: absolute; background: #d9d9d9; z-index: 2; }
.g-notld .window::before { left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; }
.g-notld .window::after { top: 50%; left: 0; right: 0; height: 4px; margin-top: -2px; }
.g-notld .hand { position: absolute; left: 10%; right: 10%; bottom: -100%; height: 95%; color: #b9c2b0; transition: bottom .18s ease-out; z-index: 1; }
.g-notld .window.up .hand { bottom: 0; }
.g-notld .hand svg { width: 100%; height: 100%; display: block; }
.g-notld .plank { position: absolute; left: -6%; right: -6%; height: 16%; background: #8a6a43; border: 1px solid #4a3620; z-index: 3; box-shadow: 0 2px 0 rgba(0,0,0,.5); }

/* --- «Изгоняющий дьявола»: распятие --- */
.g-exorcist .room { position: relative; flex: 1; min-height: 0; margin-top: 8px; overflow: hidden;
  background: radial-gradient(80% 60% at 50% 40%, #2b1d14, #0d0705); border: 1px solid var(--line); }
.g-exorcist .cross { position: absolute; width: 84px; height: 84px; margin: -42px 0 0 -42px; color: var(--paper); pointer-events: none; }
.g-exorcist .cross svg { width: 100%; height: 100%; filter: drop-shadow(0 0 10px rgba(244, 230, 200, .6)); }
.g-exorcist .cross.held svg { color: var(--accent2); filter: drop-shadow(0 0 18px var(--accent)); }
.g-exorcist .faith { height: 10px; background: var(--line); margin-top: 8px; }
.g-exorcist .faith i { display: block; height: 100%; width: 0; background: var(--accent); }

/* --- «Хэллоуин»: фонарь --- */
.g-flash { padding: 0; }
.g-flash .game-hud { padding: calc(12px + env(safe-area-inset-top)) 14px 0; }
.g-flash .room { position: absolute; inset: 0; width: 100%; height: 100%; }
.g-flash .darkness {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  --x: -300px; --y: -300px;
  background: radial-gradient(circle 120px at var(--x) var(--y), transparent 0, transparent 50%, rgba(4, 3, 2, .985) 100%);
}
.g-flash .targets {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; justify-content: center; gap: 10px;
  padding: 12px 12px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 70%, transparent);
}
.g-flash .target { display: flex; flex-direction: column; align-items: center; font-size: 13px; width: 90px; color: var(--paper); text-align: center; }
.g-flash .target svg { width: 34px; height: 34px; }
.g-flash .target.found { color: var(--accent); text-decoration: line-through; }
.g-flash .obj { color: #a8977a; }
.g-flash .obj.found { color: var(--accent); }

/* --- «Чужой»: датчик движения --- */
.g-alien { --crt: #7cff8a; color: var(--crt); }
.g-alien .game-hud, .g-alien .hint-line { color: var(--crt); font-family: var(--osd); font-size: 11px; }
.g-alien .stage { filter: drop-shadow(0 0 6px rgba(124, 255, 138, .6)); }

/* --- «Кошмар на улице Вязов»: не засыпай --- */
.g-elm .dream { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; margin-top: 8px;
  background: repeating-linear-gradient(90deg, #5c1016 0 22px, #1f4a26 22px 44px); border-radius: 6px; overflow: hidden; }
.g-elm .dream::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(7, 6, 13, .55), rgba(7, 6, 13, .95)); }
.g-elm .sleep { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 2; transition: opacity .3s; }
.g-elm .stim { position: relative; z-index: 1; width: 62%; aspect-ratio: 1; color: var(--paper); opacity: 0; transform: scale(.7); transition: opacity .1s, transform .15s; }
.g-elm .stim.on { opacity: 1; transform: scale(1); }
.g-elm .stim svg { width: 100%; height: 100%; }
.g-elm .stim.glove { color: #c9c3d9; filter: drop-shadow(0 0 16px var(--blood)); }
.g-elm .stim.coffee { color: #f4f0ff; filter: drop-shadow(0 0 14px var(--accent2)); }

/* --- «Молчание ягнят»: анаграммы --- */
.g-lambs .clue { font-style: italic; color: var(--dim); text-align: center; min-height: 3em; }
.g-lambs .word { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.g-lambs .word span { width: 34px; height: 44px; display: grid; place-items: center; border-bottom: 3px solid var(--line); font-family: var(--head); font-size: 26px; }
.g-lambs .word span.on { border-color: var(--accent2); }
.g-lambs .letters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding-top: 14px; }
.g-lambs .letter {
  width: 52px; height: 58px; border: 1px solid var(--line); background: var(--panel); cursor: pointer;
  font-family: var(--head); font-size: 26px; color: var(--paper); border-radius: 4px;
}
.g-lambs .letter.shake { animation: shake .35s; background: var(--blood); }
.g-lambs .glass { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center;
  background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .06) 0 2px, transparent 3px) 0 0 / 28px 28px; }

/* --- Финал: расставь кассеты --- */
.g-shelf .placed-list { display: grid; gap: 5px; margin: 8px 0; }
.g-shelf .slot { min-height: 30px; border: 1px dashed var(--line); border-radius: 3px; display: grid; grid-template-columns: 26px 1fr; align-items: center; padding: 0 8px; font-size: 14px; color: var(--dim); }
.g-shelf .slot.filled { border-style: solid; color: var(--paper); cursor: pointer; background: var(--panel); }
.g-shelf .slot b { font-family: var(--osd); font-size: 9px; color: var(--accent2); }
.g-shelf .pile { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 8px 0; }
.g-shelf .pile .tape { width: auto; min-height: 42px; grid-template-columns: 30px auto; padding: 4px 10px 4px 0; background: linear-gradient(90deg, var(--spine) 0 30px, #17141c 30px); }
.g-shelf .pile .tape .emb { width: 30px; height: 34px; }
.g-shelf .pile .tape .emb svg { width: 18px; height: 18px; }
.g-shelf .pile .tape .t-title { font-size: 14px; }
.g-shelf .scroll { flex: 1; overflow-y: auto; touch-action: pan-y; min-height: 0; }
.chip.done small { font-size: 9px; color: #9d95a8; margin-left: 4px; }

/* ======================================================================
   Новые варианты игр
   ====================================================================== */

/* --- «Калигари»: сомнамбула --- */
.g-sleep .stage { touch-action: none; }

/* --- «Психо»: книга регистрации --- */
.g-register .clue-card {
  margin: 8px 0; padding: 12px 14px; background: #fff; color: #000;
  font-family: 'Oswald', sans-serif; font-size: 16px; line-height: 1.35; border-left: 6px solid var(--blood);
}
.g-register .ledger {
  flex: 1; overflow-y: auto; touch-action: pan-y; min-height: 0;
  background: repeating-linear-gradient(#f3ecd8 0 43px, #b9c7d6 43px 44px); color: #1c2a5c;
  border: 1px solid #c9bfa5; box-shadow: inset 28px 0 0 rgba(208, 31, 38, .08);
}
.g-register .row {
  display: grid; grid-template-columns: 1.4fr 1.2fr 0.9fr 0.35fr; gap: 6px; align-items: center;
  width: 100%; min-height: 44px; padding: 4px 10px; border: 0; background: transparent; text-align: left; cursor: pointer;
}
.g-register .row.head { min-height: 44px; cursor: default; font-family: 'Oswald', sans-serif; font-size: 12px; color: #6a5a3a; text-transform: uppercase; letter-spacing: .08em; }
.g-register .hand { font-family: 'Caveat', cursive; font-size: 21px; line-height: 1.1; color: #1c2a5c; }
.g-register .row.crossed { opacity: .45; text-decoration: line-through; text-decoration-color: var(--blood); }
.g-register .row.found { background: rgba(31, 122, 58, .2); }

/* --- «Изгоняющий дьявола»: Риган --- */
.g-regan .bedroom { position: absolute; inset: 0; width: 100%; height: 100%; }
.g-regan .cross { z-index: 1; }

/* --- «Чужой»: вентиляция --- */
.g-vents .board { touch-action: none; }
.g-vents .tracker-row { display: grid; grid-template-columns: 130px 1fr; gap: 12px; align-items: center; padding-top: 8px; }
.g-vents .tracker { width: 130px; height: 130px; filter: drop-shadow(0 0 6px rgba(124, 255, 138, .5)); }
.g-vents .tracker-side { display: grid; gap: 10px; }
.g-vents .dist { font-size: 12px; color: #7cff8a; }
.g-vents .flame { background: #ff8a1e; color: #1d120c; font-size: 17px; padding: 12px; }
.g-vents .edge {
  position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  box-shadow: inset 0 0 60px 20px rgba(255, 30, 30, .55);
}

/* --- «Молчание ягнят»: подвал --- */
.g-basement .cellar { position: relative; flex: 1; min-height: 0; margin-top: 8px; background: #030303; overflow: hidden; border-radius: 4px; }
.g-basement .reveal-art { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .25s; }
.g-basement .muzzle { position: absolute; inset: 0; background: #fff2cc; opacity: 0; pointer-events: none; }
.g-basement .pulse {
  --size: 120px; --glow: .3;
  position: absolute; width: var(--size); height: var(--size); margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  border-radius: 50%; border: 3px solid rgba(244, 240, 255, var(--glow)); box-shadow: 0 0 18px rgba(255, 45, 85, calc(var(--glow) - .3));
  opacity: 0; pointer-events: none;
}
.g-basement .pulse.beat { animation: beat .45s ease-out; }
@keyframes beat { from { transform: scale(.3); opacity: .9; } to { transform: scale(1.1); opacity: 0; } }
.g-basement .aim {
  position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: conic-gradient(#ff2d55 calc(var(--a, 0) * 1turn), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 24px, #000 25px); mask: radial-gradient(circle, transparent 24px, #000 25px);
}
.g-basement .nv {
  position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .12s;
  background: radial-gradient(circle at 50% 60%, rgba(124, 255, 138, .45), rgba(10, 40, 14, .95) 70%),
              repeating-linear-gradient(0deg, rgba(0, 0, 0, .3) 0 1px, transparent 1px 3px);
}
.g-basement .nv-hands {
  position: absolute; left: 30%; right: 30%; bottom: 18%; height: 22%;
  background: radial-gradient(ellipse at 50% 100%, rgba(20, 60, 24, .95) 40%, transparent 41%);
}

/* --- «Молчание ягнят»: подвал v2 — шкала и кнопка --- */
.g-basement2 .heat { position: relative; height: 26px; margin-top: 10px; background: #15121c; border-radius: 13px; overflow: hidden; }
.g-basement2 .heat i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #3d6bd8; transition: width .12s, background .2s; }
.g-basement2 .heat span { position: relative; display: block; text-align: center; line-height: 26px; font-family: var(--osd); font-size: 10px; color: #fff; text-shadow: 0 1px 2px #000; }
.g-basement2 .fire { margin-top: 8px; background: var(--blood); color: #fff; }
.g-basement2 .cross-hair {
  position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; pointer-events: none;
  border: 2px solid rgba(255, 45, 85, .9); border-radius: 50%;
  background: linear-gradient(rgba(255, 45, 85, .9), rgba(255, 45, 85, .9)) center / 2px 60% no-repeat,
              linear-gradient(rgba(255, 45, 85, .9), rgba(255, 45, 85, .9)) center / 60% 2px no-repeat;
}
.g-basement2 .howto {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 4px; text-align: center;
  font-size: 18px; color: var(--paper); background: rgba(3, 3, 3, .85); cursor: pointer; z-index: 2;
}
.g-basement2 .howto p { margin: 4px 0; }

/* --- «Ночь живых мертвецов»: радио --- */
.g-radio { background: radial-gradient(80% 50% at 50% 30%, #2a2a2a, #050505); }
.g-radio .radio-set { flex: 0 0 auto; height: 40vh; }
.g-radio .broadcast {
  flex: 1; margin-top: 10px; padding: 14px; background: #0b0b0b; border: 1px solid #333;
  font-family: 'Courier New', monospace; font-size: 17px; line-height: 1.45; color: #e8e8e8; letter-spacing: .02em;
  word-break: break-word; overflow: hidden;
}
.g-radio.bang { animation: bang .16s; }
@keyframes bang { 30% { transform: translate(-4px, 2px); } 60% { transform: translate(3px, -2px); } }

/* --- «Хэллоуин»: бугимен --- */
.g-boogey { padding-left: 0; padding-right: 0; }
.g-boogey .game-hud, .g-boogey .hint-line { padding: 0 14px; }
.g-boogey .who { transition: transform .22s ease-out, opacity .25s; }

/* --- «Кошмар на улице Вязов»: считалка --- */
.g-rhyme .lyrics { min-height: 92px; margin: 10px 0; padding: 12px; text-align: center; font-family: var(--head); font-size: 26px; line-height: 1.3; }
.g-rhyme .lyrics .w { color: var(--dim); transition: color .1s; }
.g-rhyme .lyrics .w.now { color: var(--paper); text-shadow: var(--head-shadow); }
.g-rhyme .lyrics .w.perfect { color: var(--accent2); }
.g-rhyme .lyrics .w.good { color: var(--paper); }
.g-rhyme .lyrics .w.ok { color: #c9a24a; }
.g-rhyme .lyrics .w.miss { color: var(--blood); text-decoration: line-through; }

/* ======================================================================
   Кассета из нескольких игр
   ====================================================================== */
.game-list { margin: 6px 0 0; padding-left: 22px; font-family: var(--head); font-size: 20px; line-height: 1.5; }
.game-scores { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.game-scores li { display: flex; justify-content: space-between; padding: 10px 14px; background: var(--panel); border-left: 3px solid var(--accent); }
.game-scores b { font-family: var(--head); font-size: 20px; }

/* --- «Носферату»: рассвет --- */
.g-dawn .stage { touch-action: none; }

/* --- «Франкенштейн»: аномальный мозг --- */
.g-brains .lab { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center;
  background: radial-gradient(70% 50% at 50% 40%, rgba(126, 224, 143, .12), transparent 70%); }
.g-brains .table { position: absolute; left: 0; right: 0; top: calc(50% + 70px); height: 18px; background: #2a3436; border-top: 3px solid #3d4b4e; }
.g-brains .jars { position: relative; height: 180px; }
.g-brains .jar { position: absolute; left: 0; top: 10px; border: 0; padding: 0; background: none; cursor: pointer; }
.g-brains .jar-svg { width: 100%; height: auto; display: block; }
.g-brains .jar .label { transition: opacity .3s; }
.g-brains .jar.covered .label { opacity: 0; }
.g-brains .jar.right .jar-svg { filter: drop-shadow(0 0 12px #7ee08f); }
.g-brains .jar.wrong .jar-svg { filter: drop-shadow(0 0 12px #b3262d); }

/* --- «Изгоняющий дьявола»: доска Уиджа --- */
.g-ouija .board { flex: 0 0 auto; height: auto; max-height: 52vh; }
.g-ouija .lt.hit { fill: #1f7a3a; }
.g-ouija .lt.miss { fill: #b3262d; }
.g-ouija .answer { display: flex; justify-content: center; gap: 6px; margin: 14px 0; min-height: 48px; }
.g-ouija .answer span { width: 32px; height: 44px; display: grid; place-items: center; border-bottom: 3px solid var(--line);
  font-family: "Playfair Display", serif; font-weight: 900; font-size: 26px; }
.g-ouija .answer span.on { border-color: var(--accent); }

/* --- «Чужой»: самоуничтожение --- */
.g-destruct .crt { background: #020a04; border: 2px solid #1d3a22; border-radius: 10px; padding: 12px; margin: 8px 0; min-height: 110px;
  box-shadow: inset 0 0 30px rgba(124, 255, 138, .15); }
.g-destruct .crt-head { font-family: var(--osd); font-size: 8px; color: #3f8a4a; margin-bottom: 10px; }
.g-destruct .crt-text { font-family: var(--osd); font-size: 13px; line-height: 1.8; color: #7cff8a; white-space: pre-line; text-shadow: 0 0 6px rgba(124, 255, 138, .6); }
.g-destruct .panel { flex: 1; display: grid; grid-template-rows: auto auto 1fr; gap: 14px; padding: 14px; border-radius: 10px;
  background: repeating-linear-gradient(-45deg, #2a2a26 0 14px, #26261f 14px 28px); border: 2px solid #111; }
.g-destruct .toggles, .g-destruct .cyls { display: grid; gap: 10px; }
.g-destruct .toggles { grid-template-columns: repeat(4, 1fr); }
.g-destruct .cyls { grid-template-columns: repeat(3, 1fr); }
.g-destruct .toggle, .g-destruct .cyl {
  position: relative; height: 92px; border: 2px solid #111; border-radius: 6px; background: #3a3a33; cursor: pointer; padding: 0;
}
.g-destruct .toggle b, .g-destruct .cyl b { position: absolute; left: 0; right: 0; bottom: 6px; font-family: var(--osd); font-size: 12px; color: #f0c040; }
.g-destruct .toggle { height: 112px; }
/* Тумблер: ручка ездит по вертикальной прорези — вверх / вниз, как в командах «Матери». */
.g-destruct .toggle .track { position: absolute; left: 50%; top: 8px; width: 12px; height: 76px; margin-left: -6px;
  background: #0b0b0b; border-radius: 6px; box-shadow: inset 0 0 0 2px #000; }
.g-destruct .toggle .mark { position: absolute; left: 18px; font-style: normal; font-size: 10px; color: #8a8a7a; }
.g-destruct .toggle .mark.up { top: 2px; }
.g-destruct .toggle .mark.down { bottom: 2px; }
.g-destruct .toggle .knob { position: absolute; left: 50%; width: 30px; height: 18px; margin-left: -15px; top: 56px; border-radius: 4px;
  background: linear-gradient(#ddd, #888); box-shadow: 0 2px 0 #000, inset 0 0 0 1px #555; transition: top .12s, background .12s; }
.g-destruct .toggle.up .knob { top: 2px; background: linear-gradient(#b6f5c0, #4a8a55); }
.g-destruct .toggle.up .mark.up { color: #7cff8a; }
.g-destruct .cyl .rod { position: absolute; left: 50%; top: 18px; width: 30px; height: 40px; margin-left: -15px; border-radius: 6px;
  background: linear-gradient(90deg, #888, #ddd, #888); transition: transform .2s; }
.g-destruct .cyl.out .rod { transform: translateY(-14px) scaleY(1.25); background: linear-gradient(90deg, #4a8a55, #b6f5c0, #4a8a55); }
.g-destruct .big-red { border: 0; border-radius: 50%; width: 110px; height: 110px; justify-self: center; align-self: center; cursor: pointer;
  background: radial-gradient(circle at 40% 35%, #ff6a5a, #b3150c 60%, #6a0a05); color: #fff; font-family: var(--osd); font-size: 11px;
  box-shadow: 0 6px 0 #3a0503, 0 0 0 8px #111, 0 0 0 12px #f0c040; }
.g-destruct .big-red:active { transform: translateY(4px); box-shadow: 0 2px 0 #3a0503, 0 0 0 8px #111, 0 0 0 12px #f0c040; }
.g-destruct.armed .crt-text { color: #ff5a4a; animation: flicker .4s infinite; }

/* --- «Молчание ягнят»: мёртвая голова --- */
.g-moth .field { touch-action: none; }

/* --- Финал: полка VHS --- */
.g-shelf-vhs .vhs-shelf { margin-top: 6px; }
.g-shelf-vhs .timeline { display: flex; justify-content: space-between; font-family: var(--osd); font-size: 9px; color: var(--accent2); margin-bottom: 6px; }
.g-shelf-vhs .rack { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; height: 200px; padding: 6px 4px 0;
  background: linear-gradient(#2a1c10, #1a1109); border: 3px solid #4a3020; border-bottom: 0; }
.g-shelf-vhs .plank { height: 14px; background: linear-gradient(#7a5434, #4a3020); box-shadow: 0 4px 8px rgba(0, 0, 0, .6); }
.g-shelf-vhs .slot-empty { align-self: end; height: 186px; border: 1px dashed rgba(255, 255, 255, .15); border-radius: 2px;
  display: grid; place-items: end center; padding-bottom: 6px; font-family: var(--osd); font-size: 8px; color: rgba(255, 255, 255, .35); }
.g-shelf-vhs .spine { position: relative; align-self: end; height: 186px; padding: 0; border: 0; border-radius: 2px; cursor: pointer; overflow: hidden;
  background: #111; box-shadow: inset 0 0 0 1px #000, inset 3px 0 0 rgba(255, 255, 255, .06); }
.g-shelf-vhs .sp-top { position: absolute; left: 0; right: 0; top: 0; height: 18px; background: var(--c); }
.g-shelf-vhs .sp-label { position: absolute; left: 3px; right: 3px; top: 24px; bottom: 26px; background: #f2ede2; border-radius: 1px;
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.g-shelf-vhs .sp-title { writing-mode: vertical-rl; transform: rotate(180deg); font-family: "Oswald", sans-serif; font-weight: 700;
  font-size: 11px; line-height: 1; color: #111; white-space: nowrap; }
.g-shelf-vhs .sp-vhs { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-family: var(--osd); font-size: 6px; color: var(--c); }
.g-shelf-vhs .pile-title { margin: 10px 0 6px; }
.g-shelf-vhs .vhs-pile { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.g-shelf-vhs .cassette { position: relative; height: 72px; border: 0; border-radius: 4px; cursor: pointer; padding: 6px;
  background: linear-gradient(#1c1c1c, #0c0c0c); box-shadow: inset 0 0 0 1px #333, 0 2px 0 #000; display: grid; grid-template-rows: 22px 1fr; gap: 4px; }
.g-shelf-vhs .c-window { display: flex; justify-content: space-around; align-items: center; background: #050505; border-radius: 3px; border: 1px solid #333; }
.g-shelf-vhs .c-window i { width: 14px; height: 14px; border-radius: 50%; border: 3px dotted #777; }
.g-shelf-vhs .c-label { display: flex; align-items: center; gap: 6px; background: #f2ede2; border-left: 6px solid var(--c); border-radius: 2px; padding: 0 6px; overflow: hidden; }
.g-shelf-vhs .c-emb { width: 18px; height: 18px; color: #111; flex: none; }
.g-shelf-vhs .c-emb svg { width: 18px; height: 18px; }
.g-shelf-vhs .c-title { font-family: "Oswald", sans-serif; font-weight: 500; font-size: 12px; line-height: 1.05; color: #111; text-align: left; }
.g-ouija .lt { transform-box: fill-box; transform-origin: center; transition: fill .12s, transform .12s; }
.g-ouija .lt.lit { fill: #c0201a; transform: scale(1.5); filter: drop-shadow(0 0 4px #fff3c4) drop-shadow(0 0 8px #ffcf6a); }
.g-ouija .lt.hit { transform: scale(1.3); }