@font-face {
  font-family: "Pixelify Sans";
  src: url("assets/pixelify-sans.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --bg: #091526;
  --panel: #132238;
  --panel2: #1b2d43;
  --text: #f1eee4;
  --muted: #aabbd0;
  --green: #a3c49c;
  --yellow: #f2ba62;
  --red: #df7975;
  --accent: #f2ba62;
  --identity: #c7b5e6;
  /* Контраст текста сигналов проверяет danger_signals_test.js. */
  --sig-danger: #e08a8a;
  --sig-warn: #f0b955;
  --sig-assigned: #b9bec9;
  --panel-raised: #27384e;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 "Segoe UI", system-ui, sans-serif;
  /* При увеличенном тексте слово, которое не помещается в строку, переносится,
     а не выталкивает экран вбок (R18, масштаб текста 200% на 390 px). */
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

#app { width: 100%; max-width: 640px; padding: 16px 16px 48px; }

/* Баннер демоверсии: шапка страницы, один абзац для участника плейтеста.
   Приглушён намеренно — это рамка вокруг игры, а не часть её экрана. */
#demo-note {
  width: 100%;
  max-width: 640px;
  padding: 12px 16px;
  border-bottom: 1px solid #2a2d36;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.hud {
  background: var(--panel);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
}
.hud-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  color: var(--muted);
}
.hud-top .grade { color: var(--accent); font-weight: 600; }
/* Эмодзи-счётчики в верхней строке заменены плашками в полосе сигналов (§4.4) */

.bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 3px 0; }
.bar-row .label { width: 128px; color: var(--muted); white-space: nowrap; }
.bar-row .label.identity { color: var(--identity); }
.bar-row .track {
  flex: 1; height: 10px; background: #0e1013; border-radius: 5px; overflow: hidden;
}
.bar-row .fill { height: 100%; border-radius: 5px;  }
.bar-row .val { width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
/* Заметка под баром (§4.6): цена, которая уже действует. Часть строки бара —
   переносится на вторую строку и выравнивается под шкалой. */
.bar-row .bar-note {
  flex-basis: 100%; margin-left: 136px; margin-top: -1px; margin-bottom: 3px;
  color: var(--muted); font-size: 12px; line-height: 1.35;
}

/* ---------- полоса сигналов опасности (§4, §8) ----------
   Уровень читается словом и значком; цвет и стиль рамки — вторичные признаки:
   Внимание — пунктир, Опасно — толстая сплошная, Назначено — двойная. */
.signals { list-style: none; margin: 10px 0 0; padding: 0; }
.sig {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 6px 0; padding: 6px 10px;
  background: var(--panel2); border-radius: 6px;
  border-left: 3px dashed var(--sig-warn);
  font-size: 13px; line-height: 1.4;
}
.sig-icon {
  flex: 0 0 auto; min-width: 22px; text-align: center;
  font-weight: 700; font-variant-numeric: tabular-nums; color: var(--sig-warn);
}
.sig-body { flex: 1 1 auto; min-width: 0; }
.sig-head { display: block; }
.sig-title { color: var(--text); font-weight: 600; }
.sig-level { color: var(--sig-warn); font-weight: 700; }
.sig-sep { color: var(--muted); }
.sig-text { display: block; color: var(--text); }
.sig-hint { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }

.sig-danger { border-left: 5px solid var(--sig-danger); }
.sig-danger .sig-icon, .sig-danger .sig-level { color: var(--sig-danger); }
.sig-assigned { border-left: 5px double var(--sig-assigned); background: var(--panel-raised); }
.sig-assigned .sig-icon, .sig-assigned .sig-level { color: var(--sig-assigned); }
.sig-counter { border-left: 3px solid var(--muted); }
.sig-counter .sig-icon { color: var(--muted); }
.sig-inline { margin: 4px 0 10px; font-family: "Segoe UI", system-ui, sans-serif; }

.card {
  background: var(--panel);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 14px;
}
.card h2 { font-size: 20px; margin-bottom: 10px; }
.card .kicker {
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin-bottom: 6px;
}
.card p.flavor { margin-bottom: 14px; }

button.choice {
  display: block; width: 100%; text-align: left;
  background: var(--panel2); color: var(--text);
  border: 1px solid #333845; border-radius: 8px;
  padding: 10px 14px; margin: 8px 0;
  font: inherit; cursor: pointer;
}
button.choice:hover:not(:disabled) { border-color: var(--accent); }
button.choice:focus-visible, .devbar:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px; border-color: var(--accent);
}
/* Заголовок карточки принимает фокус после каждого рендера (§8.4) */
.card h1:focus-visible, .card h2:focus-visible {
  outline: 2px dashed var(--accent); outline-offset: 4px;
}
.card h1:focus:not(:focus-visible), .card h2:focus:not(:focus-visible) { outline: none; }
button.choice:disabled { opacity: .45; cursor: not-allowed; }
button.choice .lock {
  display: block; font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 12px; color: var(--yellow);
}
button.choice .hint {
  display: block; font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 12px; color: var(--muted);
}

/* Пары «параметр — значение» приходят из renderDeltas() соседними span'ами без
   пробельных узлов между ними, а каждая пара держится строкой целиком. Без
   переноса между парами строка в узком окне оказывалась неразрывной целиком и
   растягивала страницу вбок (на 386 px — до 515 px при четырёх дельтах).
   Флексовая строка с переносом даёт разрыв там, где его нет в разметке; пара
   при этом остаётся неразрывной, как и была. Отступ между парами — column-gap,
   а не margin у span: у последней пары в строке хвостового отступа быть не должно. */
.deltas {
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 13px; margin: 8px 0 2px;
  display: flex; flex-wrap: wrap; column-gap: 10px; row-gap: 2px;
}
.deltas span { white-space: nowrap; }
.d-up { color: var(--green); }
/* Для отрицательных дельт используем контрастный текстовый красный. */
.d-down { color: var(--sig-danger); }

table.summary { width: 100%; border-collapse: collapse; font-family: "Segoe UI", system-ui, sans-serif; font-size: 14px; }
/* Ширину таблицы задаёт самое длинное слово: в ячейках оно тоже переносится. */
table.summary :is(th, td) { overflow-wrap: anywhere; }
table.summary td { padding: 4px 6px; border-bottom: 1px solid #2b2f38; }
table.summary td.num { text-align: right; font-variant-numeric: tabular-nums; }

.notes { color: var(--yellow); font-family: "Segoe UI", system-ui, sans-serif; font-size: 13px; margin-top: 10px; }

/* ---------- итоги квартала: риски и примечания ---------- */
.risk-changes { margin-top: 16px; font-family: "Segoe UI", system-ui, sans-serif; }
.risk-changes .kicker { margin-bottom: 8px; }
.risk-changes .signals { margin-top: 0; }
.risk-sub {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 10px 0 4px;
}
.risk-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.risk-list li { padding: 2px 0 2px 12px; border-left: 2px solid #333845; margin: 3px 0; }
.border-line {
  margin: 8px 0 0; padding: 8px 10px; font-size: 13px; line-height: 1.45;
  color: var(--text); background: var(--panel-raised); border-radius: 6px;
}
/* Пометка §4.9 — сообщение о прошлом, вне сигналов и вне блока рисков */
.stale-note { margin-top: 12px; font-family: "Segoe UI", system-ui, sans-serif; }
.stale-note .kicker { margin-bottom: 2px; }
.stale-note p { color: var(--muted); font-size: 13px; line-height: 1.4; }

/* Сообщение о судьбе сохранения (было инлайном в app.js, T02) */
.notice {
  margin: 12px 0 16px; padding: 10px 12px;
  border-left: 3px solid var(--yellow);
  background: rgba(216, 161, 58, .12);
  font-family: "Segoe UI", system-ui, sans-serif; font-size: 14px; line-height: 1.4;
}
.muted { color: var(--muted); }
/* ---------- экран финала (T04) ---------- */
.ending h1 { font-size: 26px; margin-bottom: 8px; }
.ending ul { margin: 10px 0 0 20px; }
/* На финале кикер работает заголовком раздела и повторяется пять раз подряд.
   Без отступа сверху каждый следующий прилипал к предыдущему блоку. */
.ending .kicker:not(:first-child) { margin-top: 20px; }
/* Таблица финала двухколоночная: имя и число. Без ширины первая колонка
   растягивалась на всё свободное место (table.summary писалась под четыре). */
.ending table.summary td:first-child { width: 60%; }
/* Три списка финала идут подряд и отличались только шапкой. Развожу их стилем
   полосы слева — он читается без цвета (§8.1), оттенок приглушённый и служит
   различением раздела, а не оценкой: вывод делает игрок (Pillar 4). */
.ending ul.flag-list { list-style: none; margin: 8px 0 0; padding: 0; }
.ending ul.flag-list li {
  margin: 4px 0; padding: 3px 0 3px 10px;
  border-left: 3px solid #3a4050;
}
.ending ul.flag-costs li { border-left-style: solid; border-left-color: #7d6a52; }
.ending ul.flag-gains li { border-left: 5px double #5f7d68; }
.ending ul.flag-marks li { border-left-style: dotted; border-left-color: #59606e; }

.devbar {
  font-family: "Segoe UI", system-ui, sans-serif; font-size: 12px;
  color: var(--muted); margin-top: 20px; cursor: pointer; user-select: none;
}
.devpanel {
  font-family: ui-monospace, monospace; font-size: 12px;
  background: #0e1013; border-radius: 8px; padding: 10px; margin-top: 6px;
  white-space: pre-wrap; color: var(--muted);
}

/* ---------- узкий экран (~400 px, §8.5) ---------- */
@media (max-width: 480px) {
  #app { padding: 12px 12px 40px; }
  #demo-note { padding: 10px 12px; font-size: 13px; }
  .card { padding: 16px 14px; }
  .bar-row .label { width: 96px; white-space: normal; }
  .bar-row .bar-note { margin-left: 104px; }
  .sig { padding: 6px 8px; }
}
@media (max-width: 360px) {
  .bar-row .bar-note { margin-left: 0; }
}

/* ---------- уважение к «поменьше движения» (§8.6) ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .bar-row .fill { transition: none; }
}

/* Pixel Life: the approved world uses square, stepped edges and warm pixel art. */
:root { --edge: #43566d; --display: "Pixelify Sans", sans-serif; }
body { padding: 0 28px; }
#app { max-width: 1504px; padding: 20px 0 36px; }
#demo-note { order: 2; max-width: 1448px; padding: 18px 0 24px; border-top: 1px solid var(--edge); border-bottom: 0; font-size: 12px; }
.menu-screen { position: relative; display: grid; grid-template-columns: minmax(360px, .85fr) minmax(0, 1.3fr); min-height: min(850px, 90svh); align-items: stretch; }
.menu-screen .notice { grid-column: 1 / -1; z-index: 1; }
.card, .hud { border: 1px solid var(--edge); border-radius: 0; margin: 0; }
.card { padding: 28px; min-width: 0; }
.card h1, .card h2 { font-family: var(--display); font-weight: 600; line-height: 1.1; text-wrap: balance; }
.card h2 { font-size: 34px; margin-bottom: 22px; }
.card .kicker { letter-spacing: 0; text-transform: none; font-size: 13px; margin-bottom: 12px; }
.menu-copy { z-index: 1; padding: 48px 32px 40px 12px; border: 0; background: var(--bg); align-self: center; }
.menu-copy h1 { font-size: clamp(48px, 5.2vw, 82px); line-height: .98; margin-bottom: 24px; font-weight: 700; }
.menu-copy h1 span { color: var(--green); }
.tagline { font-family: var(--display); font-size: clamp(22px, 2vw, 30px); line-height: 1.25; color: #b9cce6; margin-bottom: 44px; }
.menu-copy .choice { max-width: 440px; font-family: var(--display); font-size: 28px; text-align: center; padding: 12px 20px; margin: 12px 0; }
button.choice { border-radius: 0; border: 1px solid var(--edge); padding: 14px 16px; margin: 12px 0 0; min-height: 48px; line-height: 1.4; position: relative; }
button.choice:hover:not(:disabled) { background: #263b50; border-color: var(--accent); }
button.choice:active:not(:disabled) { transform: translateY(1px); }
button.choice.primary, button[data-next], button[data-restart] { background: var(--accent); color: #172132; border: 3px double #5d4327; font-weight: 600; }
button.choice.primary:hover, button[data-next]:hover, button[data-restart]:hover { background: #ffd28d; }
button.choice .hint { margin-top: 5px; font-size: 13px; }
/* Ценности героя: отмеченная карточка — рамка и галочка цвета «Я», не только цвет. */
button.value-choice { padding-left: 48px; }
button.value-choice::before { content: ""; position: absolute; left: 16px; top: 16px; width: 18px; height: 18px; border: 2px solid var(--edge); background: var(--bg); }
button.value-choice[aria-pressed="true"] { border-color: var(--identity); box-shadow: inset 0 0 0 2px var(--identity); }
button.value-choice[aria-pressed="true"]::before { content: "✓"; content: "✓" / ""; border-color: var(--identity); background: var(--identity); color: #172132; font: 700 14px/18px sans-serif; text-align: center; }
button.value-choice[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
button.value-choice[aria-disabled="true"]:hover { background: transparent; border-color: var(--edge); }
.values-count { margin: 14px 0 0; color: var(--muted); font-size: 14px; }
.values-line { margin: 2px 0 8px 0; color: var(--identity); font-size: 13px; }
.menu-meta { margin-top: 36px; color: var(--muted); font-size: 13px; }
.save-note { font-size: 13px; color: var(--muted); margin: 10px 0 20px; }
.how-to { padding-left: 24px; }
.how-to li { margin: 12px 0; }
.pixel-scene { position: relative; overflow: hidden; min-width: 0; background: #10213a; border: 1px solid var(--edge); }
.pixel-scene img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% center; image-rendering: auto; }
.hero-scene { min-height: 700px; border: 0; }
.hero-scene img { position: absolute; inset: 0; }
.window-light { position: absolute; left: 15%; top: 18%; width: 4px; height: 6px; background: #ffd17c; animation: city-light 8s steps(1, end) infinite; pointer-events: none; }
@keyframes city-light { 0%, 67%, 100% { opacity: .15; } 12%, 60% { opacity: .85; } }
.game-screen { display: grid; grid-template-columns: 290px minmax(0, 1fr) minmax(240px, .7fr); gap: 22px; align-items: start; }
.game-topbar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; min-width: 0; padding-bottom: 14px; border-bottom: 1px solid var(--edge); }
.game-topbar .choice { width: auto; min-height: 44px; margin: 0; padding: 8px 16px; }
.game-brand { font-family: var(--display); font-size: 26px; color: var(--green); }
.game-screen > .notice { grid-column: 1 / -1; margin: 0; }
.game-screen > .hud { grid-column: 1; padding: 18px; }
.game-screen > .card { grid-column: 2; }
.game-screen > .pixel-scene { grid-column: 3; height: 620px; }
.game-screen.phase-class, .game-screen.phase-ended { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.game-screen.phase-class > .card, .game-screen.phase-ended > .card { grid-column: 1; }
.game-screen.phase-class > .pixel-scene, .game-screen.phase-ended > .pixel-scene { grid-column: 2; }
.hud-top { display: block; padding-bottom: 14px; border-bottom: 1px solid var(--edge); }
.hud-top .grade { display: block; margin-top: 6px; font-family: var(--display); font-size: 26px; }
.bar-row { display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 6px 8px; margin: 14px 0; }
.bar-row .label { width: auto; grid-column: 1; white-space: normal; color: var(--text); }
.bar-row .val { grid-column: 2; grid-row: 1; width: auto; }
.bar-row .track { grid-column: 1 / -1; grid-row: 2; width: 100%; border-radius: 0; height: 8px; }
.bar-row .fill { border-radius: 0; }
.bar-row .bar-note { grid-column: 1 / -1; margin: 0; }
.sig, .border-line, .devpanel { border-radius: 0; }
.signals { margin-top: 22px; }
.sig { padding: 10px 8px; }
.card p.flavor { font-size: 17px; line-height: 1.65; margin-bottom: 24px; }
table.summary { margin: 20px 0; font-size: 15px; }
table.summary td { padding: 12px 4px; border-bottom-color: var(--edge); }
.ending h1 { font-size: 40px; }
.checkpoint-note, .devbar, .devpanel { grid-column: 1 / -1; }
.checkpoint-note { color: var(--muted); font-size: 12px; margin-top: 0; }
.devbar { justify-self: start; border: 0; padding: 10px 0; background: none; min-height: 44px; margin: 0; text-align: left; }
@media (max-width: 1180px) {
  body { padding: 0 20px; }
  .game-screen { grid-template-columns: 250px minmax(0, 1fr); gap: 18px; }
  .game-screen > .pixel-scene { grid-column: 2; height: 220px; }
  .game-screen > .hud { grid-row: 2 / span 2; }
  .game-screen > .notice ~ .hud { grid-row: 3 / span 2; }
  .game-screen.phase-class > .pixel-scene, .game-screen.phase-ended > .pixel-scene { height: 620px; }
  .hero-scene { min-height: 660px; }
}
@media (max-width: 760px) {
  body { padding: 0 16px; }
  #app { padding-top: 12px; }
  .menu-screen { grid-template-columns: minmax(0, 1fr); }
  .menu-copy { padding: 24px 8px 28px; background: transparent; }
  .menu-copy h1 { font-size: clamp(48px, 10vw, 68px); }
  .menu-copy .choice { max-width: none; }
  .tagline { margin-bottom: 26px; font-size: 24px; }
  .hero-scene { min-height: 300px; height: 300px; margin: 0 -16px; }
  .hero-scene img { object-position: center 38%; }
  .menu-meta { margin-top: 24px; }
  .game-screen, .game-screen.phase-class, .game-screen.phase-ended { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .game-screen > .hud, .game-screen > .card, .game-screen > .pixel-scene,
  .game-screen.phase-class > .card, .game-screen.phase-ended > .card,
  .game-screen.phase-class > .pixel-scene, .game-screen.phase-ended > .pixel-scene { grid-column: 1; grid-row: auto; }
  .game-screen > .notice ~ .hud { grid-row: auto; }
  .game-screen > .hud { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; padding: 14px; }
  .hud-top { grid-column: 1 / -1; display: flex; margin: 0; padding-bottom: 8px; }
  .hud-top .grade { font-size: 22px; margin: 0; }
  .bar-row { margin: 0; font-size: 12px; }
  .hud .signals { grid-column: 1 / -1; margin-top: 4px; }
  .card { padding: 22px; }
  .card h2 { font-size: 30px; }
  .game-screen > .pixel-scene, .game-screen.phase-class > .pixel-scene, .game-screen.phase-ended > .pixel-scene { height: 240px; }
  .pixel-scene img { object-position: center 35%; }
  .game-brand { font-size: 22px; }
}
@media (max-width: 480px) {
  #app { padding: 12px 0 28px; }
  #demo-note { padding: 18px 0; }
  .card { padding: 18px 16px; }
  .bar-row .label { width: auto; }
  .bar-row .bar-note { margin-left: 0; }
  table.summary { font-size: 13px; }
  table.summary td { padding: 10px 3px; }
  .ending h1 { font-size: 32px; }
}
@media (max-width: 360px) {
  body { padding: 0 12px; }
  .game-brand { font-size: 18px; }
  .menu-copy h1 { font-size: 45px; }
  .game-screen > .hud { column-gap: 12px; }
}

.character-name { font-family: var(--display); font-size: 24px; color: var(--text); margin: 16px 0; }
@media (max-width: 760px) { .character-name { grid-column: 1 / -1; margin: 0; font-size: 20px; } }

/* Nine-slice geometric frames keep the pixel steps crisp at any button width. */
.card:not(.menu-copy), .hud, button.choice {
  border: 4px solid var(--edge);
  border-image: url("assets/pixel-frame.svg") 4 / 4px / 0 stretch;
}
button.choice:hover:not(:disabled), button.choice.primary, button[data-next], button[data-restart] {
  border-image-source: url("assets/pixel-frame-amber.svg");
}
.card h1, .card h2 { scroll-margin-top: 20px; }
@media (max-width: 360px) { .hero-scene { margin-left: -12px; margin-right: -12px; } }

/* ---------- S09: рабочий интерфейс сюжетного слоя (STORY-DESIGN §17.4) ----------
   Оформление простое, на токенах Pixel Life; полировку делает V02.
   Скрытые числа передаются словами, уровень читается текстом, цвет вторичен. */
.class-trait { margin: -6px 0 14px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.class-trait .class-badge { margin-right: 6px; }
.class-trait-title { color: var(--text); font-weight: 600; margin-right: 4px; }
.class-trait-text { display: block; margin-top: 3px; }
.class-badge, .goal-mark, .event-tag {
  display: inline-block; padding: 1px 6px; margin: 0 6px 4px 0;
  font-family: "Segoe UI", system-ui, sans-serif; font-size: 12px; line-height: 1.5;
  border: 1px solid var(--edge); background: var(--panel-raised); color: var(--text);
}
.class-badge, .tag-class { border-color: var(--identity); color: var(--identity); }
.goal-mark { border-color: var(--green); color: var(--green); }
.choice-marks { display: block; margin-bottom: 2px; }
.event-tags { margin: -4px 0 10px; }
.tag-arc { border-style: dashed; }
.tag-partner { border-color: var(--yellow); color: var(--yellow); }
.tag-health { border-color: var(--sig-danger); color: var(--sig-danger); }

.status-line { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--edge); font-size: 13px; line-height: 1.4; }
.status-item { display: flex; flex-wrap: wrap; gap: 0 6px; margin: 4px 0; }
.status-label { color: var(--muted); }
.status-label::after { content: ":"; }
.status-value { color: var(--text); overflow-wrap: anywhere; }
.cond-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; }
.cond-chip { display: inline-flex; gap: 5px; align-items: baseline; padding: 2px 7px; border: 1px dashed var(--sig-warn); background: var(--panel2); }
.cond-icon { color: var(--sig-warn); font-weight: 700; }

.people-panel { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--edge); font-size: 13px; line-height: 1.4; }
.people-toggle {
  display: block; width: 100%; min-height: 44px; padding: 8px 0; text-align: left;
  background: none; border: 0; color: var(--text); font: 600 15px/1.3 var(--display); cursor: pointer;
}
.people-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.people-body[hidden] { display: none; }
.partner-block { padding: 8px 10px; margin: 4px 0 10px; background: var(--panel2); border-left: 3px solid var(--yellow); }
.person-name { font-weight: 600; color: var(--text); }
.person-word { color: var(--text); }
.person-note { color: var(--muted); margin-top: 4px; }
.promise-list { list-style: none; margin: 6px 0 0; padding: 0; color: var(--muted); }
.promise-list li { margin: 3px 0; }
.people-list { list-style: none; margin: 0; padding: 0; }
.people-list .person { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; padding: 5px 0; border-bottom: 1px solid var(--edge); }
.people-list .person-role { grid-column: 1; grid-row: 2; color: var(--muted); font-size: 12px; }
.people-list .person-word { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.rel-warm .person-word, .rel-ally .person-word { color: var(--green); }
.rel-cold .person-word, .rel-conflict .person-word { color: var(--sig-danger); }
.rel-ally .person-word, .rel-conflict .person-word { font-weight: 700; }

.story-card { border-image-source: url("assets/pixel-frame-amber.svg"); }
.card .kicker-story { color: var(--yellow); }
.story-mood { margin: -12px 0 18px; color: var(--muted); font-style: italic; }
.plan-note, .review-goal, .review-note { margin: 0 0 12px; font-size: 15px; line-height: 1.5; }
.plan-note, .review-note { color: var(--muted); }
.review-quotes { list-style: none; margin: 0 0 12px; padding: 0; }
.review-quotes li { margin: 6px 0; padding: 4px 0 4px 12px; border-left: 3px solid var(--edge); }
.review-quotes .quote-up { border-left: 5px double var(--green); }
.review-quotes .quote-down { border-left-style: dotted; border-left-color: var(--sig-danger); }
.review-rating { margin: 0 0 14px; font-size: 17px; }
.review-rating-label { color: var(--muted); }
.rating-exceeds { color: var(--green); }
.rating-below { color: var(--sig-danger); }

.qblock { margin: 16px 0 0; padding: 10px 12px; background: var(--panel2); font-size: 14px; line-height: 1.5; }
.qblock-title { margin-bottom: 4px; font: 600 16px/1.3 var(--display); color: var(--text); }
.qblock p { margin: 2px 0; }
.qblock-checkin { border-left: 5px solid var(--yellow); }
.checkin-verdict { font-size: 16px; }
.pace-far_behind strong { color: var(--sig-danger); }
.pace-on_track strong { color: var(--green); }

.echo-lines { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; line-height: 1.45; }
.echo-lines li { padding-left: 12px; border-left: 2px solid var(--edge); margin: 3px 0; overflow-wrap: anywhere; }

.ending-axes { margin: 8px 0 0; }
.ending-axes .axis { padding: 8px 0; border-bottom: 1px solid var(--edge); }
.ending-axes dt { font-family: var(--display); font-size: 17px; color: var(--green); }
.ending-axes dd { margin: 2px 0 0; line-height: 1.5; }
.ending-trait { margin-top: 12px; color: var(--muted); font-size: 14px; }

@media (max-width: 760px) {
  .hud .class-trait, .hud .status-line, .hud .people-panel { grid-column: 1 / -1; }
  .class-trait { margin: 0; }
  .status-line, .people-panel { margin-top: 4px; }
}

/* ---------- V02: Pixel Life для экранов сюжетного слоя ----------
   Портреты, панель «Люди», строка состояния, планирование, ревью, итоги и финал.
   Уровни читаются словом; цвет, клетки и стиль рамки — вторичные признаки. */

/* Портрет V01: квадрат 128 → 32/48/64 CSS px, фон задаёт интерфейс. Без файла — буква имени. */
.portrait {
  position: relative; flex: 0 0 auto; display: inline-block; overflow: hidden;
  width: 48px; height: 48px; background: var(--panel-raised); border: 2px solid var(--edge);
}
.portrait-sm { width: 32px; height: 32px; border-width: 1px; }
.portrait-lg { width: 64px; height: 64px; }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.portrait-initial {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 600 22px/1 var(--display); color: var(--muted);
  background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(170, 187, 208, .07) 6px 8px);
}
.portrait-sm .portrait-initial { font-size: 15px; }
.portrait-lg .portrait-initial { font-size: 28px; }
.portrait[data-state="image"] .portrait-initial { visibility: hidden; }
.portrait .portrait-blink { visibility: hidden; }
.portrait.is-blinking .portrait-blink { visibility: visible; }
.portrait.is-blinking .portrait-open { visibility: hidden; }
.person-gone .portrait, .partner-block.is-gone .portrait { filter: grayscale(1) brightness(.72); opacity: .75; }

/* Панель «Люди» */
.people-toggle { display: flex; align-items: center; gap: 8px; }
.people-toggle-icon { display: inline-block; width: 12px; color: var(--accent); }
.people-sheet-head { display: none; }
.people-close {
  min-height: 44px; padding: 8px 14px; border: 1px solid var(--edge); background: var(--panel2);
  color: var(--text); font: 13px/1.3 "Segoe UI", system-ui, sans-serif; cursor: pointer;
}
.people-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.partner-block { display: flex; gap: 10px; align-items: flex-start; padding: 10px; }
.partner-text { min-width: 0; }
.partner-block .person-name { font-family: var(--display); font-size: 16px; }
.people-list .person, .people-list .person-gone {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px;
  align-items: center; padding: 8px 0; border-bottom: 1px solid var(--edge);
}
.people-list .portrait { grid-column: 1; grid-row: 1 / span 2; }
.people-list .person-name { grid-column: 2; grid-row: 1; }
.people-list .person-role { grid-column: 2; grid-row: 2; color: var(--muted); font-size: 12px; }
.people-list .person-word { grid-column: 3; grid-row: 1; align-self: end; text-align: right; }
.rel-scale { grid-column: 3; grid-row: 2; display: flex; gap: 2px; justify-content: flex-end; align-self: start; }
.rel-step { width: 7px; height: 7px; border: 1px solid var(--edge); background: var(--panel2); }
.rel-step.is-on { background: var(--text); border-color: var(--text); }
.rel-warm .rel-step.is-on, .rel-ally .rel-step.is-on { background: var(--green); border-color: var(--green); }
.rel-cold .rel-step.is-on, .rel-conflict .rel-step.is-on { background: var(--sig-danger); border-color: var(--sig-danger); }
.people-sub { margin: 14px 0 2px; color: var(--muted); font-size: 12px; }
.people-gone .person-gone { color: var(--muted); }
.people-gone .person-name { color: var(--muted); font-weight: 600; }

/* Строка состояния: цель клетками, подушка словами, состояния плашками */
.status-item .goal-meter { flex-basis: 100%; }
.goal-meter { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.goal-cell { width: 10px; height: 10px; border: 1px solid var(--edge); background: var(--panel2); }
.goal-cell.is-on { background: var(--green); border-color: var(--green); }
.goal-cell.is-over { border-style: dashed; }
.goal-cell.is-over.is-on { background: var(--yellow); border-color: var(--yellow); }
.status-item.is-empty .status-value { color: var(--sig-warn); font-weight: 600; }

/* Планирование */
.goal-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.goal-chip {
  display: inline-block; padding: 2px 8px; font-size: 12px; line-height: 1.5;
  border: 1px solid var(--edge); background: var(--panel); color: var(--muted);
}
.goal-chip.chip-ambitious { border-color: var(--yellow); color: var(--yellow); font-weight: 600; }
button.choice:hover:not(:disabled) .goal-chip { background: var(--panel2); }
.plan-company { padding: 10px 12px; background: var(--panel2); border-left: 3px solid var(--identity); color: var(--text); }
.plan-company .goal-meter { margin-top: 8px; }

/* Ревью */
.review-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: -10px 0 18px; padding: 0; counter-reset: review-step; }
.review-step {
  padding: 3px 9px; font-size: 12px; line-height: 1.5; color: var(--muted);
  border: 1px dashed var(--edge); counter-increment: review-step;
}
.review-step::before { content: counter(review-step) ". "; }
.review-step.is-done { color: var(--text); border-style: solid; }
.review-step.is-done::before { content: "✓ "; color: var(--green); }
.review-step.is-current { color: var(--primary-ink, #172132); background: var(--accent); border: 1px solid var(--accent); font-weight: 600; }
.review-goal .goal-meter { margin-top: 8px; }
.review-quotes li { display: flex; gap: 10px; align-items: flex-start; }
.review-quotes .quote-text { min-width: 0; }
.review-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.rating-badge {
  display: inline-block; padding: 4px 12px; font: 600 20px/1.2 var(--display);
  border: 3px solid var(--edge); background: var(--panel2); color: var(--text);
}
.rating-badge.rating-exceeds { border: 5px double var(--green); color: var(--green); }
.rating-badge.rating-below { border: 3px dotted var(--sig-danger); color: var(--sig-danger); }

/* Сюжетная карточка: рамка лампы и кикер с отметкой истории */
.card .kicker-story::before { content: "◆ "; }
.story-mood { padding-left: 12px; border-left: 2px solid var(--yellow); }

/* Итоги квартала: сначала история, затем блоки систем, затем полная таблица */
.summary-card h2 { margin-bottom: 14px; }
.quarter-story { margin: 0 0 6px; }
.qs-focus { margin: 0 0 8px; color: var(--muted); font-size: 14px; }
.qs-lead { margin: 0 0 8px; font-size: 17px; line-height: 1.6; }
.qs-fact { margin: 0 0 4px; font-size: 15px; line-height: 1.5; }
.qs-change-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0 4px; }
.qs-changes { padding: 10px 12px; background: var(--panel2); }
.qs-gains { border-left: 5px double var(--green); }
.qs-costs { border-left: 3px dotted var(--sig-danger); }
.qs-changes ul { list-style: none; margin: 0; padding: 0; font-size: 15px; font-variant-numeric: tabular-nums; }
.qs-changes-title { margin: 14px 0 6px; font: 600 15px/1.3 var(--display); color: var(--text); }
.qs-changes .qs-changes-title { margin-top: 0; }
.qs-choices { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.5; }
.qs-choices li { margin: 3px 0; overflow-wrap: anywhere; }
.qblock { border-left: 3px solid var(--edge); }
.qblock-story { border-left-color: var(--yellow); }
.qblock-people { border-left-color: var(--green); }
.qblock-partner { border-left: 3px double var(--yellow); }
.qblock-health { border-left: 3px dashed var(--sig-danger); }
.qblock-money { border-left-color: var(--identity); }
.qblock-review { border-left: 5px solid var(--accent); }
.qblock-outlook { border-left: 3px dashed var(--sig-warn); }
.summary-table-title { margin: 22px 0 -10px; color: var(--muted); font-size: 13px; }
.summary-closing { margin-top: 16px; color: var(--text); font-weight: 600; }

/* Финал: шесть осей плитками */
.ending-axes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.ending-axes .axis { padding: 12px 14px; background: var(--panel2); border-bottom: 0; border-left: 4px solid var(--green); }
.ending-axes .axis-partner { border-left: 4px double var(--yellow); }
.ending-axes .axis-health { border-left-style: dashed; border-left-color: var(--sig-danger); }
.ending-axes .axis-company { border-left-color: var(--accent); }

@media (max-width: 760px) {
  /* На телефоне «Люди» — выдвижной лист снизу: список не раздвигает HUD. */
  .people-panel[data-modal="true"] .people-backdrop {
    position: fixed; z-index: 29; inset: 0; background: rgba(9, 21, 38, .72);
  }
  .people-panel[data-open="true"] .people-body {
    position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; max-height: 78vh; overflow-y: auto; overscroll-behavior: contain;
    padding: 0 16px 20px; background: var(--panel); border: 4px solid var(--edge);
    border-image: url("assets/pixel-frame-amber.svg") 4 / 4px / 0 stretch; border-bottom: 0;
    animation: people-sheet 220ms ease-out both;
  }
  .people-panel[data-open="true"] .people-sheet-head {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 1; padding: 10px 0; background: var(--panel); border-bottom: 1px solid var(--edge);
  }
  .people-sheet-title { font: 600 22px/1.1 var(--display); }
  .review-steps { margin-top: -6px; }
  .rating-badge { font-size: 18px; }
}
@keyframes people-sheet { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (max-width: 360px) {
  .people-list .person, .people-list .person-gone { grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 8px; }
  .people-list .portrait { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .people-panel .people-body { animation: none; } }

/* U06: подсказка первого планирования */
.plan-guide { margin: 0 0 16px; padding: 12px 14px; background: var(--panel2); border-left: 4px solid var(--accent); font-size: 15px; line-height: 1.5; }
.plan-guide-title { cursor: pointer; font: 600 18px/1.3 var(--display); }
.plan-guide summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.plan-guide-list { margin: 10px 0 0; padding-left: 20px; }
.plan-guide-list li { margin: 8px 0; }
.goal-movers { display: block; margin-top: 6px; }

/* U09/U10: подробности доступны после главного решения и исхода истории. */
.review-details, .ending > details { margin: 16px 0; border-top: 1px solid var(--edge); }
.review-details > summary, .ending > details > summary {
  padding: 12px 0; min-height: 44px; cursor: pointer; color: var(--accent); font-weight: 600;
}
.review-details > summary:focus-visible, .ending > details > summary:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}
.review-details .review-quotes { margin-top: 8px; }
.game-screen.phase-ended { grid-template-columns: minmax(0, 1fr); }
.ending-opening { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 20px 28px; }
.ending-intro { grid-column: 1; }
.ending-intro h1 { margin-bottom: 14px; }
.ending-scene-slot { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
.ending-scene-slot .gameplay-scene { height: auto; margin: 0; isolation: isolate; }
.ending-narrative { grid-column: 1; align-self: start; }
.ending-narrative p { margin: 0 0 12px; }
.ending-people { color: var(--muted); }
.ending-restart { max-width: 460px; margin-top: 20px; }
.ending-history h2 { font-size: 28px; margin: 16px 0 8px; }
.ending-history ul { padding-left: 20px; }
.ending-numbers caption { text-align: left; color: var(--muted); margin-bottom: 8px; }
/* R13: биография забега — решение, дата и последствие у конкретного человека. */
.ending-period { margin-bottom: 6px; }
.ending-memories { margin: 24px 0 8px; }
.ending-memories h2 { font-size: 28px; margin: 0 0 10px; }
.memory-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.memory { padding: 12px 14px; background: var(--panel2); border-left: 4px dotted var(--edge); line-height: 1.5; overflow-wrap: anywhere; }
.memory-kept { border-left: 5px double var(--green); }
.memory-lost { border-left: 4px solid #b58a6a; }
.memory-open { border-left: 4px dashed var(--accent); }
.memory-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 0 0 4px; }
.memory-meta strong { font-family: var(--display); font-size: 17px; color: var(--text); }
.memory-tone { color: var(--muted); font-size: 14px; }
.memory-chain { margin: 0 0 6px; color: var(--muted); font-size: 14px; }
.memory-step { display: inline; }
.memory-when { color: var(--accent); margin-right: 6px; white-space: nowrap; }
.memory-arrow { margin: 0 6px; }
.memory-text { margin: 0; }
.ending-ledger { margin-top: 14px; font-size: 15px; line-height: 1.55; }
.ending-ledger p { margin: 0 0 6px; }
@media (max-width: 760px) {
  .ending-opening { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 16px; }
  .ending-intro, .ending-narrative, .ending-scene-slot { grid-column: 1; grid-row: auto; }
  .ending-axes { grid-template-columns: minmax(0, 1fr); }
}
.challenge-panel { margin: 16px 0; padding: 12px; border: 1px solid var(--edge); background: var(--panel2); }
.challenge-title { cursor: pointer; color: var(--accent); font-weight: 600; line-height: 1.5; }
.challenge-weakness, .challenge-task, .challenge-rule, .news-source { margin: 12px 0; line-height: 1.6; }
.challenge-skills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0; list-style: none; }
.challenge-skills .hint { display: block; margin-top: 4px; }
.skill-gap { color: var(--accent); }
.skill-ready, .practice-hint { color: var(--green); }
.challenge-rule { color: var(--accent); font-size: 13px; }
.news-source { font-size: 13px; color: var(--muted); }
.news-source a { color: var(--accent); text-underline-offset: 3px; }
@media (max-width: 540px) { .challenge-skills { grid-template-columns: 1fr; gap: 8px; } }

/* R15: экран повторной загрузки */
.load-error-code { font-size: 13px; overflow-wrap: anywhere; margin-top: 12px; }
.load-error { max-width: 720px; margin: 24px auto; }
.load-error h1 { margin-bottom: 12px; }

/* R17: плашка о новой версии поверх игры */
#update-note {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 20;
  width: min(560px, calc(100% - 32px)); padding: 14px 16px;
  background: var(--panel); border: 1px solid var(--accent); border-radius: 10px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
}
#update-note[hidden] { display: none; }
#update-note p { flex: 1 1 260px; }
#update-note button.choice { width: auto; margin: 0; }

/* R18: увеличенный текст (200%) не выталкивает страницу вбок. Перенос внутри слова
   включается, только когда слово не помещается в строку; при обычном кегле вид прежний.
   Исключение — заголовок меню до 360 px: «Сохранения» в 45 px на несколько пикселей
   шире текстовой колонки и раньше заходил в поле карточки; перенос буквы на новую
   строку выглядел бы хуже. */
.card h1, .card h2, .choice { overflow-wrap: break-word; }
@media (max-width: 360px) { .menu-copy h1 { overflow-wrap: normal; } }
.menu-copy input[type="file"] { max-width: 100%; }
/* Навыки: три колонки, пока колонка вмещает «Коммуникация:» (8em), иначе две.
   Раньше на 761–1000 px соседние названия навыков наезжали друг на друга. */
.challenge-skills { grid-template-columns: repeat(auto-fit, minmax(max(8em, calc((100% - 24px) / 3)), 1fr)); }
.challenge-skills li { min-width: 0; overflow-wrap: break-word; }
@media (max-width: 540px) { .challenge-skills { grid-template-columns: 1fr; } }
.qs-change-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(150px, 9em)), 1fr)); }
.qs-changes li { overflow-wrap: break-word; }
/* Шкалы HUD: колонка значения растёт вместе с текстом и не наезжает на название */
.bar-row { grid-template-columns: minmax(0, 1fr) minmax(28px, auto); }
.bar-row .label { overflow-wrap: break-word; }