/* «Неоновая слобода» — ночная тушь, старая бумага, киноварь, глушёное золото. */

:root {
  --ink: #0e131b;
  --ink-raise: #151c27;
  --line: #232c3a;
  --paper: #eae3d0;
  --paper-dim: #8b93a2;
  --cinnabar: #d93b27;
  --gold: #c9a45c;
  --display: 'Unbounded', system-ui, sans-serif;
  --serif: 'PT Serif', Georgia, serif;
  --mono: 'PT Mono', ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--serif);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) 0 max(20px, env(safe-area-inset-bottom));
}

@media (min-width: 560px) {
  .app { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}

/* ── шапка */
.hud {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 18px 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  border-bottom: 1px solid var(--line);
}

.hud-title { color: var(--gold); }

.hud-endings {
  font: inherit;
  letter-spacing: inherit;
  color: var(--paper-dim);
  background: none;
  border: none;
  border-bottom: 1px dotted var(--paper-dim);
  padding: 0 0 1px;
  cursor: pointer;
}
.hud-endings:active { color: var(--paper); }

/* ── сцена */
.scene {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 18px;
}

.scene.enter { animation: sceneIn 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.scene.leave { animation: sceneOut 0.18s ease-in both; }

@keyframes sceneIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sceneOut { to { opacity: 0; transform: translateY(-6px); } }

/* иллюстрация: экран старого телевизора */
.pic {
  position: relative;
  margin: 16px 0 0;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(120% 90% at 50% 40%, #1a2433 0%, #10151e 70%);
  border: 1px solid var(--line);
  overflow: hidden;
}

.pic img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.pic img.loaded { opacity: 1; }

/* скан-линии и виньетка поверх */
.pic::after {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(8, 12, 18, 0.14) 0 1px, transparent 1px 3px),
    radial-gradient(115% 100% at 50% 45%, transparent 62%, rgba(8, 11, 17, 0.55) 100%);
  pointer-events: none;
}

/* ── текст */
.eyebrow {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.eyebrow.is-ending { color: var(--cinnabar); }

.scene-title {
  margin-top: 6px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gold);
}

.scene-text {
  margin-top: 12px;
  font-size: 16.5px;
  line-height: 1.58;
  color: var(--paper);
}

/* ── действия: буквицы А Б В Г */
.choices {
  list-style: none;
  margin-top: auto;
  padding: 22px 0 4px;
  display: grid;
  gap: 9px;
}

.choice {
  display: flex;
  align-items: stretch;
  width: 100%;
  text-align: left;
  background: var(--ink-raise);
  border: 1px solid var(--line);
  color: var(--paper);
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.35;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s ease, transform 0.08s ease;
}

.choice-letter {
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  background: var(--cinnabar);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
}

.choice-text { padding: 12px 14px; align-self: center; }

.choice:active { transform: translateY(1px); border-color: var(--cinnabar); }
@media (hover: hover) {
  .choice:hover { border-color: var(--cinnabar); }
}
.choice:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.choice[disabled] { opacity: 0.6; pointer-events: none; }

/* вариант для финала: одинокие действия из золота */
.choice.gilded .choice-letter { background: var(--gold); }

/* ── модалка картотеки */
.modal {
  position: fixed; inset: 0;
  background: rgba(6, 9, 14, 0.82);
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 10;
}
.modal[hidden] { display: none; }

.modal-card {
  width: 100%;
  max-width: 400px;
  max-height: 80dvh;
  overflow-y: auto;
  background: var(--ink-raise);
  border: 1px solid var(--line);
  padding: 22px 20px;
}

.modal-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

.modal-title {
  margin-top: 6px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 17px;
  text-transform: uppercase;
  color: var(--gold);
}

.endings-list {
  list-style: none;
  margin-top: 16px;
  display: grid;
  gap: 8px;
  font-size: 15px;
}

.endings-list li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 1px dotted var(--line);
}

.endings-list .num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--paper-dim);
  flex: 0 0 18px;
}

.endings-list .found { color: var(--paper); }
.endings-list .unknown { color: var(--paper-dim); letter-spacing: 0.3em; }

.modal-close {
  margin-top: 20px;
  width: 100%;
  padding: 11px;
  background: none;
  border: 1px solid var(--line);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.modal-close:active { border-color: var(--cinnabar); }

@media (prefers-reduced-motion: reduce) {
  .scene.enter, .scene.leave { animation: none; }
  .pic img { transition: none; }
}