/* Стиль «тёплый пиксельный офис» (docs/ui.md): экран — стол продюсера. Сверху стена с окнами (шкала ходов),
   плитки и карточки — бумага на деревянном столе, рамки толстые, тени ступенчатые. Приложения внутри
   (почта, таблица, Steam) похожи на настоящие. Все цвета, размеры шрифта и отступы — токены на :root.
   Сейчас только светлая тема (тёмная — задача в GitHub Issues). */
:root {
  /* шрифты: пиксельный — только название игры и заголовки экранов (от 24px); всё остальное — обычный, чтобы читалось быстро */
  --font: "Golos Text", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-px: "Handjet", "Golos Text", sans-serif;  /* пиксельный, но читаемый (автор, 2026-10-23: Tiny5 — слишком пиксельный) */
  /* шкала размеров: 12 — микро (номера на шкале), 14 — подписи, 16 — интерфейс, 18 — текст, 24 — заголовки, 32 — крупные цифры, 40 — финал */
  --ui-scale: 0.8;
  --fs-12: 12px; --fs-14: 14px; --fs-16: 16px; --fs-18: 18px; --fs-24: 24px; --fs-32: 32px; --fs-40: 40px;
  /* отступы: 4 · 8 · 16 · 24 */
  --sp-4: 4px; --sp-8: 8px; --sp-16: 16px; --sp-24: 24px;
  /* пиксельные рамки и тени */
  --edge-w: 3px;
  --px-shadow: 0 5px 0 var(--wood-2);
  /* стол и стена */
  --wall: #34405a; --wall-2: #4c5a7a; --wall-edge: #222a3c; --on-wall: #f6ead2; --on-wall-muted: #cfd7ea;
  --wood: #8a5a3c; --wood-2: #6e452d; --on-wood: #fbf3e4; --on-wood-muted: #ecd9bd;
  --edge: #4a3020; --card: #fff6e3; --card-2: #fffdf7; --pin: #c45a4a; --sun: #f2b84b;
  --bg: var(--wood);
  --surface: #ffffff;
  --surface-2: #f6f1e8;
  --ink: #2f2620;
  --muted: #6f5d50;
  --line: #d9c7a8;
  --accent: #33639e;
  --act-go: #2e8b4e; --act-stop: #b33a2c;  /* кнопки «за» и «против» (#172): только в особых случаях — за/против, плюс/минус */
  --accent-soft: #e2ebf5;
  --on-accent: #ffffff;
  --bar: var(--wall);
  --on-bar: var(--on-wall);
  --on-bar-muted: var(--on-wall-muted);
  --track: #eadcc2;
  --plus: #2f7d3f;
  --plus-soft: #dcf0e3;
  --minus: #b0322a;
  --minus-soft: #f8e0dc;
  --warn: #8a5d00;       /* статус «внимание» — жёлтый светофора (#87, #88), текст: 5,4:1 на --card; не путать с --sun — цветом выбора */
  --warn-soft: #f8ebc4;
  --warn-bar: #d4a017;   /* заливка полоски «внимание» — ярче текста, чтобы читалась как жёлтая */
  --dev: #3f74b8;
  --marketing: #7350a5;  /* тот же фиолетовый, что год продаж на шкале: год продаж — тоже маркетинг (автор, #176) */
  --release: #7350a5;
  --later: #7d7d22;
  --quiz: #a93a72;
  --finish: #b0322a;
  --xl: #1d6b40;
  --xl-soft: #e3f1e8;
  /* «pitch.pdf» (#414, пачка c5): ярлык — красный PDF, но приглушённый, чтобы не тянул внимание; окно — как просмотрщик PDF в браузере */
  --pdf: #a65d55; --pdf-viewer: #525659; --pdf-bar: #323639; --pdf-grid: #dfe6ee;  /* клетка бумаги под наброском обложки в pitch.pdf */
  --overlay: rgba(14, 18, 22, .6);
  --art-b: #bcc6d1;
  --paper: #f4f0e6;
  --paper-ink: #2b2620;
  --bubble-in: #eef1f5;
  --bubble-out: #2f63a8;
  --on-bubble-out: #ffffff;
  --badge: #e0412f;
  /* значки рабочего стола (#153): узнаваемые цвета программ, без логотипов */
  --app-mail: #1d6ec7; --app-chat-a: #25d366; --app-chat-b: #2aa1da; --app-zoom: #2d8cff; --app-team: #6b5cf6; --dsn-bg: #313338; --dsn-side: #2b2d31; --dsn-rail: #1e1f22; --dsn-ink: #dbdee1; --dsn-muted: #949ba4; --dsn-line: #4e5058; --dsn-mine: #3b3f73; --dsn-plus: #3ba55d; --dsn-minus: #ed4245; --dsn-sel: #404249; --dsn-name: #c9a0ff; --substack: #ff6719; --ig-bg: #071822; --ig-bar: #0f8f7c; --ig-track: rgba(7, 24, 34, .08); --dsn-link: #00a8fc; --dsn-reply: #383a40; --dsn-srv: #e0883a; --shine: rgba(255, 255, 255, .55); --desk-hover: rgba(255, 255, 255, .18); --desk-label-shadow: rgba(0, 0, 0, .7);  /* кружок непрочитанного на ярлыках рабочего стола (#153) — как в почтовых приложениях, не статус */
  --shadow: 0 2px 0 rgba(40, 24, 14, .12), 0 8px 18px rgba(40, 24, 14, .18);
  /* Steam и Steamworks выглядят одинаково в обеих темах — это узнаваемый «чужой» интерфейс внутри игры */
  --call-bg: #1f2329; --call-tile: #2c323b; --call-ink: #e9edf2; --call-muted: #9aa3ae; --call-live: #e0463a; --call-talk: #3fbf6a; --sticky: #fbe9a0;  /* липкий листок (оценка из питча, пачка 34) */
  --share-pub: #7d8597; --share-angel: #a99bc4; --share-you: #33639e; --share-studio: #3f9a5a;  /* «Куда ушли деньги» на финале: чужие доли приглушены */
  --model-1: #7350a5; --model-2: #b0489e; --model-3: #2a9d8f; --model-4: #c9802a;  /* модели ИИ на прямой денег (финал): у каждой свой цвет */
  --steam-price: #a4d007;  /* зелёный цены Steam — суммы на карточке итога */
  --steam-bg: #1b2838;
  --steam-bg2: #2a475e;
  --steam-ink: #c6d4df;
  --steam-muted: #8f98a0;
  --steam-accent: #66c0f4;
  --steam-btn: #214b6b;
  --steam-tag: #2f4f68;
  --laptop: #2b2f36;
  --laptop-edge: #5a6070;
  --ink-sign: #1f3f8f;
  /* кассеты в меню музыки (#263): корешок коробки — тёмный пластик, бумажный вкладыш, надпись маркером; полосы — 5 цветов кассет (и у кассеты, что летит к кнопке) */
  --tape-case: #2b2624; --tape-paper: #f3e4bd; --tape-ink: #2a2730; --tape-muted: #6e5f4c;
  --tape-1: #e2a33a; --tape-2: #2f8f86; --tape-3: #7a56a8; --tape-4: #d9662e; --tape-5: #c23f4b;
  /* у каждого корешка своё оформление (#263, .tape-s-*): */
  /* сетка — чёрный пластик в красную клетку, жёлтая пиксельная надпись; ретро — коричневый торец с полосами 70-х; градиент — глубокий бирюзовый (джаз) */
  --tape-grid-bg: #141214; --tape-grid-line: #4d1b22; --tape-grid-ink: #ffd23f;
  --tape-retro-brown: #6b3519; --tape-jazz-deep: #0d3440;
  /* самодельная — листок из тетради в линейку, синяя шариковая ручка, красное поле (Overtime Mix, автор: «словно сам записал и ручкой подписал») */
  /* цвета, вынесенные из компонентов (#83, долг stylecheck) */
  --close: #d23c32; --close-hover: #a82a22;   /* крестик закрытия окна (автор: крупнее, в красном квадратике) — не статус */
  --mac-light-off: #ddd6c4; --mac-light-off-2: #d3d8c9;   /* жёлтый и зелёный «светофора» в строке меню ноутбука — почти серые, неактивные (#204) */
  --on-color: #ffffff;   /* текст на цветной заливке (кнопки дорожек, обложки, аватары, Steam) */
  --key-face: #f4f1ea; --key-edge: #b9ad9a;   /* клавиши-подсказки и номера вариантов */
  --shade-55: rgba(0,0,0,.55); --shade-50: rgba(0,0,0,.5); --shade-45: rgba(0,0,0,.45); --shade-12: rgba(0,0,0,.12);   /* тени текста и окон */
  --on-wall-plus: #9fe0ad; --on-wall-minus: #f2a59b;   /* плюс и минус на тёмной стене (карточка итога) */
  --cv-black: #0e0e14; --cv-pink: #ff8ad8; --cv-red: #e05a4a; --cv-cyan: #7af0ff; --cv-green: #7ad36a;   /* цвета названия на обложке */
  --steam-bar: #171a21; --steam-bar-ink: #dcdedf; --steam-edge: #000000; --steam-media-ink: rgba(255,255,255,.85);
  --steam-accent-20: rgba(102,192,244,.2); --steam-accent-15: rgba(102,192,244,.15); --steam-accent-05: rgba(102,192,244,.05);
  --notch: #0b0d10; --notch-ring: #1d2026; --notch-glow: rgba(90,140,200,.45);   /* камера ноутбука */
  --mail-blue: #1a6fe0; --mail-tl-r: #ff5f57; --mail-tl-y: #febc2e; --mail-tl-g: #28c840; --mail-ava-a: #a9b1bc; --mail-ava-b: #858e9a;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* масштаб интерфейса (#56): при 100% в браузере — как раньше при 80% (MacBook Air, решение автора) */
html { zoom: var(--ui-scale); }
body { isolation: isolate;  /* свой слой: холст стола (z-index: -1) — всегда над фоном body, даже если расширение тёмной темы красит html и body */ margin: 0; min-width: calc(1430px / var(--ui-scale));  /* меньше — в шапке переносится название игры, шкала сжимается */ background: var(--bg); color: var(--on-wood); font: var(--fs-18)/1.45 var(--font); }
/* всё, что лежит на «бумаге» и в окнах, — тёмным текстом */
.card, .stat, .notice, .modal-box, .sheet, .laptop-screen, .option { color: var(--ink); }
button { font: inherit; cursor: pointer; color: inherit; }
a { color: var(--accent); font-weight: 600; }
main > h1, main > .hint, main > p { color: var(--on-wood); }
main > .hint { color: var(--on-wood-muted); }
main > .hint b { color: var(--on-wood); }
main > .hint a { color: var(--sun); }
h1 { font: 700 var(--fs-40)/1.1 var(--font-px); letter-spacing: .01em; margin: var(--sp-16) 0 var(--sp-8); text-wrap: balance; }
h2 { font: 800 var(--fs-24)/1.25 var(--font); margin: 0; text-wrap: balance; }
p { margin: 0; }
.muted { color: var(--muted); font-size: var(--fs-16); }
.label { font-size: var(--fs-14); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.hint { color: var(--muted); margin: 6px 0 16px; max-width: 70ch; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- шапка ---------- */
/* стена офиса во всю ширину: шапка и шкала ходов (окна) */
.topbar { display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, 1192px) minmax(max-content, 1fr); align-items: center; column-gap: var(--sp-24); padding: var(--sp-8) var(--sp-24); background: var(--bar); color: var(--on-bar); border-bottom: 4px solid var(--wall-edge); position: sticky; top: 0; z-index: 25; }  /* шапка на месте, страница прокручивается под ней (автор, 26.10); окна, ноутбук и конфетти — выше (35–37) */  /* одна полоса (автор): слева название и ход, в центре шкала прежней ширины, справа стадия, меню и музыка */
.hdr-left { grid-column: 1; display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.hdr-right { grid-column: 3; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-8); min-width: 0; text-align: right; }
.hdr-btns { display: flex; align-items: center; gap: var(--sp-8); }
.brand { font: 700 var(--fs-32) var(--font-px); letter-spacing: .01em; }
.turn-info { color: var(--on-bar-muted); min-width: 0; font-size: var(--fs-16); display: flex; flex-direction: column; }
.ti-game { color: var(--on-bar); white-space: nowrap; }  /* какую игру делаем (#414): название и жанр под логотипом */
.ti-turn { font-size: var(--fs-14); white-space: nowrap; }
.ghost { background: transparent; border: 2px solid var(--on-bar-muted); color: var(--on-bar); padding: 6px 12px; border-radius: 0; font-size: var(--fs-16); }
/* музыка в шапке (#134): кнопка-переключатель и короткий выбор под ней — бумага игры */
.music { position: relative; }
.music-menu { position: absolute; right: 0; top: calc(100% + var(--sp-8)); z-index: 30; background: var(--card); border: var(--edge-w) solid var(--edge); box-shadow: var(--px-shadow); padding: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-4); width: 440px; color: var(--ink); }
.music-menu button { display: flex; align-items: center; gap: var(--sp-8); text-align: left; background: transparent; border: 2px solid transparent; padding: 6px 8px; font-size: var(--fs-16); color: var(--ink); }
.music-menu button:hover, .music-menu button:focus-visible { border-color: var(--sun); }
.mm-dot { width: 12px; height: 12px; border: 2px solid var(--edge); border-radius: 50%; flex: none; }
.music-menu [aria-checked="true"] .mm-dot { background: var(--sun); }
.mm-note { margin: var(--sp-4) 0 0; font-size: var(--fs-14); color: var(--muted); }
/* треки — корешки кассетных коробок на полке (#263), у каждой свой: фон и узор (.tape-s-*), шрифт крупной надписи (.tape-f-*), плашка каталога
   (.tape-badge) и торец с катушками (.tape-end) — у каждого стиля на своём месте; выбранная выдвинута с полки и обведена --sun, катушки крутятся */
.tape-shelf { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-4) 0 var(--sp-4) 14px; }
.music-menu button.tape { display: flex; align-items: stretch; gap: 0; padding: 0; height: 64px; overflow: hidden; background: var(--tape-case); border: 2px solid var(--tape-case); box-shadow: 2px 2px 0 var(--shade-45); color: var(--tape-paper); transition: transform .15s ease-out; }
.music-menu button.tape:hover, .music-menu button.tape:focus-visible { border-color: var(--sun); }
.tape-c1 { --tape-band: var(--tape-1); } .tape-c2 { --tape-band: var(--tape-2); } .tape-c3 { --tape-band: var(--tape-3); } .tape-c4 { --tape-band: var(--tape-4); } .tape-c5 { --tape-band: var(--tape-5); }
.tape-badge { flex: none; display: flex; align-items: center; justify-content: center; width: 52px; font: 800 var(--fs-12)/1.1 var(--font); letter-spacing: .06em; text-align: center; }
.tape-label { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 4px 12px 6px; }
.tape-title { font-size: 24px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tape-sub { display: flex; align-items: baseline; gap: var(--sp-8); min-width: 0; }
.tape-name { font-size: var(--fs-14); font-weight: 600; line-height: 1.2; white-space: nowrap; }
.tape-small { font-size: var(--fs-12); font-weight: 700; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.tape-end { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0 10px; }
.tape-reels { display: flex; gap: 5px; }
.tape-reels i { width: 16px; height: 16px; border-radius: 50%; border: 4px solid var(--tape-paper); border-top-color: var(--tape-band); }
.tape-year { font-size: var(--fs-12); font-weight: 700; letter-spacing: .06em; }
/* шрифты надписи — только уже загруженные */
.tape-f-italic .tape-title { font-family: "Poppins", var(--font); font-weight: 700; font-style: italic; letter-spacing: -.01em; }
.tape-f-script .tape-title { font: 400 20px/1.7 "Homemade Apple", "Segoe Script", cursive; word-spacing: .2em; }
.tape-f-pixel .tape-title { font-family: var(--font-px); font-size: 30px; line-height: 1; letter-spacing: .04em; }
.tape-f-outline .tape-title { font-family: var(--font); font-weight: 800; font-size: 26px; text-transform: uppercase; letter-spacing: .08em; color: transparent; -webkit-text-stroke: 1.5px var(--tape-paper); }
/* ретро: бумажный вкладыш от руки, торец слева — три полосы и коричневый пластик, плашка справа — кружок */
.music-menu button.tape-s-retro { background: var(--tape-paper); color: var(--tape-ink); }
.tape-s-retro .tape-end { order: -1; padding-left: 30px; background: linear-gradient(90deg, var(--tape-1) 0 7px, var(--tape-4) 7px 14px, var(--tape-retro-brown) 14px 21px, var(--tape-case) 21px); color: var(--tape-paper); }
.tape-s-retro .tape-title { color: var(--tape-ink); }
.tape-s-retro .tape-sub { color: var(--tape-muted); }
.tape-s-retro .tape-badge { order: 2; align-self: center; margin-right: 10px; width: 44px; height: 44px; border-radius: 50%; background: var(--tape-retro-brown); color: var(--tape-paper); }
/* сетка: чёрный пластик в клетку, пиксельная надпись с цветной тенью, плашка — цветной торец справа, надпись поперёк */
.music-menu button.tape-s-grid { background-color: var(--tape-grid-bg); background-image: linear-gradient(var(--tape-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--tape-grid-line) 1px, transparent 1px); background-size: 12px 12px; }
.tape-s-grid .tape-title { color: var(--tape-grid-ink); text-shadow: 3px 3px 0 var(--tape-band); }
.tape-s-grid .tape-badge { order: 2; width: 30px; background: var(--tape-band); color: var(--on-color); writing-mode: vertical-rl; transform: rotate(180deg); }
/* градиент: глубокий бирюзовый в цвет кассеты и золото, курсив с тенью, торец слева, плашка — светлый ярлык справа */
.music-menu button.tape-s-gradient { background: linear-gradient(100deg, var(--tape-jazz-deep) 0 30%, var(--tape-band) 72%, var(--tape-1)); }
.tape-s-gradient .tape-title { color: var(--tape-paper); text-shadow: 2px 2px 0 var(--tape-jazz-deep); }
.tape-s-gradient .tape-end { order: -1; background: var(--shade-45); }
.tape-s-gradient .tape-badge { order: 2; align-self: center; width: auto; height: 24px; margin-right: 10px; padding: 0 6px; background: var(--tape-paper); color: var(--tape-jazz-deep); }
/* полосы (главная тема): тёмный корпус, контурная надпись, плашка — квадрат цвета кассеты слева, торец — косые полосы */
.tape-s-stripe .tape-badge { background: var(--tape-band); color: var(--on-color); }
.tape-s-stripe .tape-small { color: var(--tape-band); opacity: 1; }
.tape-s-stripe .tape-end { padding: 0 12px 0 34px; background: repeating-linear-gradient(135deg, var(--tape-band) 0 6px, var(--tape-case) 6px 12px) left / 24px 100% no-repeat; }
.music-menu button.tape[aria-checked="true"] { transform: translateX(-14px); outline: 3px solid var(--sun); outline-offset: 0; box-shadow: 4px 4px 0 var(--shade-45); }
.music-menu button.tape[aria-checked="true"] .tape-reels i { animation: tape-spin 1.6s linear infinite; }
@keyframes tape-spin { to { transform: rotate(360deg); } }
/* играет — видно всегда (автор): у играющей кассеты крутятся катушки, и у каждой обложки своё движение */
.tape-s-retro[aria-checked="true"] .tape-badge { animation: tape-spin 4s linear infinite; }  /* круглая наклейка крутится, как пластинка */
.music-menu button.tape-s-grid[aria-checked="true"] { animation: tape-grid 1.2s linear infinite; }  /* клетка бежит */
@keyframes tape-grid { to { background-position: 12px 0, 12px 0; } }
.music-menu button.tape-s-gradient[aria-checked="true"] { background-size: 200% 100%; animation: tape-shine 4s ease-in-out infinite alternate; }  /* переливается */
@keyframes tape-shine { from { background-position: 0 0; } to { background-position: 100% 0; } }
.tape-s-stripe[aria-checked="true"] .tape-end { animation: tape-stripe .8s linear infinite; }  /* полосы торца бегут */
@keyframes tape-stripe { to { background-position: 0 17px; } }
@media (prefers-reduced-motion: reduce) { .music-menu button.tape { transition: none; } .music-menu button.tape[aria-checked="true"], .music-menu button.tape[aria-checked="true"] * { animation: none !important; } }

.timeline { grid-column: 2; min-width: 0; display: flex; align-items: center; gap: var(--sp-16); }  /* шкала — центральная колонка шапки; ширина та же, что была (1192 px) */
.stats { max-width: 1240px; margin: 0 auto; padding: var(--sp-16) var(--sp-24) 0; }
.timeline:empty, .stats:empty { display: none; }

/* ---------- показатели ---------- */
.stats { display: flex; gap: 10px; flex-wrap: nowrap; }
/* показатели всегда в один ряд: деньги шире (там ссылки на файлы), мораль чуть шире остальных (значение словом) */
.stats > .stat { flex: 1 1 0; min-width: 0; }  /* все плитки одной ширины (автор): текст переносится, плитка растёт вниз */
.stat { background: var(--card); border: var(--edge-w) solid var(--edge); border-radius: 0; padding: var(--sp-8) var(--sp-16); min-width: 140px; box-shadow: var(--px-shadow); }
.stat .k { font-size: var(--fs-14); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.stat .v { font-size: var(--fs-24); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; }
.stat .bar { height: 10px; background: var(--track); border: 2px solid var(--edge); border-radius: 0; margin-top: var(--sp-4); overflow: hidden; }
.stat .bar i { display: block; height: 100%; background: var(--plus); }
.stat.bad .v { color: var(--minus); }
.hint-sm { font-size: var(--fs-14); color: var(--muted); margin-top: 2px; }
.money-tile { position: relative; }
.money-sub { font-size: var(--fs-14); color: var(--muted); }
/* что изменилось за прошедший период — на самих плитках */
.tile-d { font-size: var(--fs-14); font-weight: 700; font-variant-numeric: tabular-nums; }
.tile-d.pos { color: var(--plus); }
.tile-d.neg { color: var(--minus); }
.xl { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; background: var(--xl); color: var(--on-color); border-radius: 3px; font-size: var(--fs-14); font-weight: 800; text-decoration: none; }
.pulse { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--xl); } 50% { box-shadow: 0 0 0 6px transparent; } }

/* ---------- таблицы-«файлы» ---------- */
.sheet { background: var(--surface); border: 2px solid var(--xl); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); }
.sheet-title { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--xl); color: var(--on-color); font-size: var(--fs-14); font-weight: 700; }
.sheet-title .xl { background: var(--surface); color: var(--xl); }
.sheet-close { margin-left: auto; background: transparent; border: 0; color: var(--on-color); font-size: var(--fs-24); line-height: 1; }
.fx { display: flex; gap: 8px; align-items: center; padding: 4px 10px; border-bottom: 1px solid var(--line); font-size: var(--fs-14); color: var(--muted); }
.fx span { font-style: italic; font-weight: 700; }
.fx code { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--ink); overflow-x: auto; white-space: nowrap; }
.sheet-scroll { overflow-x: auto; }
.ledger .sheet-scroll { max-height: 320px; overflow-y: auto; }
.sheet table { border-collapse: collapse; width: 100%; font-size: var(--fs-14); }
.sheet th, .sheet td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; }
.sheet thead th { background: var(--surface-2); color: var(--muted); font-weight: 600; text-align: center; font-size: var(--fs-14); position: sticky; top: 0; }
.sheet tbody th { background: var(--surface-2); color: var(--muted); font-weight: 500; width: 32px; text-align: center; font-size: var(--fs-14); }
.sheet td.n { font-variant-numeric: tabular-nums; text-align: right; font-weight: 700; white-space: nowrap; }
.sheet td.c { color: var(--muted); font-size: var(--fs-14); }
.sheet td.neg { color: var(--minus); }
.sheet td.pos { color: var(--plus); }
.sheet tr.good td.n { color: var(--plus); background: var(--plus-soft); }
.sheet tr.bad td.n { color: var(--minus); background: var(--minus-soft); }
.sheet tr.warn td.n { color: var(--warn); background: var(--warn-soft); }
/* вкладки листов — внизу, как в Excel, но крупными кнопками с цифрой клавиши: их видно и ясно, что нажимаются (#368) */
.tabs { display: flex; gap: 4px; padding: 0 8px 6px; background: var(--surface-2); border-top: 1px solid var(--line); }
.tab { display: inline-flex; align-items: center; border: 1px solid var(--line); border-top: 0; background: var(--surface-2); padding: 8px 16px; font-size: var(--fs-16); border-radius: 0 0 8px 8px; color: var(--ink); cursor: pointer; }
.tab:hover { background: var(--surface); }
.tab.on { background: var(--surface); font-weight: 700; border-top: 3px solid var(--xl); }
.wl-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; padding: 10px; }
.chart-title { font-size: var(--fs-14); font-weight: 700; color: var(--muted); margin-top: 4px; }
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .tick { fill: var(--muted); font-size: var(--fs-12); }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 2; }
.chart .area { fill: var(--accent-soft); }
.chart .dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.chart .bar { fill: var(--accent); }
.chart .hit { fill: transparent; }
.chart g:hover .bar { fill: var(--ink); }

/* ---------- экраны ---------- */
main { padding: 8px 24px 16px; max-width: 1240px; margin: 0 auto; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); align-items: stretch; }
.card.pick > .primary:last-child, .card.pick > .sign { margin-top: auto; }
.grid > * { min-width: 0; }
.card { background: var(--card); border: var(--edge-w) solid var(--edge); border-radius: 0; padding: var(--sp-16); display: flex; flex-direction: column; gap: var(--sp-8); box-shadow: var(--px-shadow); min-width: 0; }
.card.pick { transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.card.pick:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--wood-2); }
.card-head { display: flex; gap: 12px; align-items: center; }
.line { font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: var(--fs-14); background: var(--surface-2); }
.chip.cut { text-decoration: line-through; color: var(--muted); }
.chip.broken { border-color: var(--minus); color: var(--minus); }
.chip.done { border-color: var(--plus); color: var(--plus); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: var(--fs-16); }
.kv b { font-weight: 700; }
.pitch { font-style: italic; }
.members, .past { margin: 4px 0 0; padding: 0; list-style: none; font-size: var(--fs-16); display: flex; flex-direction: column; gap: 6px; }
.past { list-style: disc; padding-left: 18px; }
.members li { display: flex; gap: 8px; align-items: flex-start; }
.avatar { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--art-b); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--fs-14); }
/* Ряд выбора студии. Система: сетка 160px + текст; шаг отступов 8 (8/16/24);
   шрифт — 24 (названия), 17 (текст), 14 (подписи и метаданные). */
/* Выбор студии (#404): одна студия — письмо-оффер на листе А4, справа внизу жёлтый листок Анны со скрепкой, кнопки под листом */
.studio-one { display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); }
.offer-sheet-wrap { position: relative; }
.studio-one { overflow-x: clip; }  /* отложенный лист уезжает за край — без горизонтальной прокрутки */
/* стопка (пачка d26u): листы под верхним — пока есть просьбы; верхний снимают и откладывают вправо-вверх, следующий встаёт на место */
.offer-stack { position: relative; }
.offer-stack > .offer-sheet-wrap { z-index: 2; }
.os-under { position: absolute; inset: 0; background: var(--card-2); border: 1px solid var(--line); box-shadow: var(--px-shadow); }
.os-under:nth-child(1) { transform: translate(14px, 12px) rotate(2.4deg); }
.os-under:nth-child(2) { transform: translate(7px, 6px) rotate(1.2deg); }
.offer-sheet-wrap.os-next { position: absolute; inset: 0; z-index: 1; animation: sheet-settle .45s cubic-bezier(.2, .8, .3, 1) .15s both; }
.offer-sheet-wrap.os-away { animation: sheet-away .5s cubic-bezier(.55, 0, .75, .2) forwards; pointer-events: none; }
@keyframes sheet-settle { from { transform: translate(7px, 6px) rotate(1.2deg); } to { transform: none; } }
@keyframes sheet-away { 0% { transform: none; opacity: 1; } 20% { transform: translate(8px, -14px) rotate(2deg); } 75% { opacity: 1; } 100% { transform: translate(420px, -150px) rotate(14deg); opacity: 0; } }  /* непрозрачный почти весь путь — тексты листов не наслаиваются */
.offer-sheet { box-sizing: border-box; width: 540px; aspect-ratio: 1 / 1.414; display: flex; flex-direction: column; gap: var(--sp-8); padding: 40px 42px 32px; background: var(--card-2); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--px-shadow); font-size: var(--fs-16); line-height: 1.45; }
.offer-sheet p { margin: 0; }
.os-head { display: flex; align-items: center; gap: var(--sp-16); padding-bottom: var(--sp-8); border-bottom: 2px solid var(--ink); }
.os-logo .art-logo { width: 48px; height: 48px; image-rendering: pixelated; }
.os-head b { display: block; font-size: var(--fs-18); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.os-head span { color: var(--muted); font-size: var(--fs-14); }
.os-title { margin: var(--sp-16) 0 0; font: 800 var(--fs-24)/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; }
.os-sub { color: var(--muted); font-size: var(--fs-14); margin-bottom: var(--sp-8) !important; }
.os-terms { border-collapse: collapse; margin: var(--sp-8) 0; }
.os-terms th, .os-label { color: var(--muted); font: 700 var(--fs-12)/1.6 var(--font); letter-spacing: .06em; text-transform: uppercase; text-align: left; white-space: nowrap; }
.os-terms th { vertical-align: top; padding: 3px var(--sp-16) 3px 0; }
.os-terms td { padding: 2px 0; }
.os-demo { font-size: var(--fs-18); font-weight: 700; line-height: 1.35; text-wrap: balance; }
.os-sign { margin-top: auto; display: flex; flex-direction: column; color: var(--muted); font-size: var(--fs-14); }
.os-ink { font: 400 24px/1.8 "Homemade Apple", "Segoe Script", cursive; color: var(--ink-sign); }  /* подпись латиницей: шрифт без кириллицы */
.anna-note { position: absolute; right: -110px; bottom: 96px; width: 210px; padding: 28px 16px 10px; background: var(--sticky); color: var(--ink); font: italic var(--fs-16)/1.4 var(--font); transform: rotate(3deg); box-shadow: var(--px-shadow); }
.anna-note span { display: block; text-align: right; margin-top: var(--sp-4); }
.anna-note .clip { position: absolute; top: -14px; left: 26px; width: 12px; height: 34px; border: 3px solid var(--muted); border-radius: 8px; }
.sr-foot { display: flex; flex-wrap: wrap; gap: var(--sp-16); align-items: center; justify-content: center; max-width: 760px; }
.sr-foot .sr-flip { white-space: nowrap; }
.sr-foot .primary { flex: none; }
.sr-foot .sr-flip .key-cap { margin-right: var(--sp-8); }
.sr-foot.busy button:disabled { opacity: 1; cursor: default; }  /* 0,7 с смены листа: кнопки не нажимаются, но и не тускнеют */
.sr-last { flex-basis: 100%; text-align: center; color: var(--on-wood); font-style: italic; }  /* строка Анны — над кнопками, когда просьбы кончились */
/* «Попросить у Анны другую студию»: кубик — два оборота, «×N» сгорает огоньком, потом лист переворачивается (#404, автор) */
.sr-n { display: inline-block; }
.sr-flip.rolling .dice { animation: dice-roll .55s cubic-bezier(.2, .8, .3, 1); }
.sr-flip.rolling .sr-n { animation: count-burn .35s ease-in .3s forwards; }  /* сгорает к концу движения — новый «×N» приходит с новым листом */
@keyframes dice-roll { to { transform: rotate(360deg); } }
@keyframes count-burn { 30% { color: var(--sun); text-shadow: 0 0 6px var(--sun), 0 -2px 8px var(--pin); } 100% { opacity: 0; transform: translateY(-8px) scale(1.3); filter: blur(2px); color: var(--sun); } }

.primary { background: var(--accent); color: var(--on-accent); border: var(--edge-w) solid var(--edge); border-radius: 0; box-shadow: 0 4px 0 var(--edge); padding: 10px 18px; font-weight: 800; letter-spacing: .02em; }
.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge); }
.primary:hover { filter: brightness(1.08); }
.big-btn { font-size: var(--fs-18); padding: 14px 24px; }

/* ---------- иллюстрации-заглушки (слоты: docs/art.md) ---------- */
.art { border-radius: 8px; overflow: hidden; position: relative; }
.art-scene { aspect-ratio: 16 / 7; max-width: 100%; display: flex; align-items: center; justify-content: center; }
.art-scene span { background: var(--surface); color: var(--muted); font-size: var(--fs-14); padding: 2px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: .08em; }
.art-person { aspect-ratio: 16 / 7; max-width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.art-news { aspect-ratio: 16 / 7; max-width: 100%; background: var(--paper); color: var(--paper-ink); padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.np-head { font-variant: small-caps; font-family: Georgia, "Times New Roman", serif; font-weight: 900; font-size: var(--fs-18); letter-spacing: .06em; border-bottom: 3px double var(--paper-ink); text-align: center; padding-bottom: 4px; }
.art-news .px-news { width: 100%; height: auto; aspect-ratio: 48 / 30; } /* полоса газеты пиксель-артом (#72) */
.art-logo { width: 56px; height: 56px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--on-color); font-weight: 900; font-size: var(--fs-16); border-radius: 0; border: var(--edge-w) solid var(--edge); }

/* ---------- события: карточка + варианты-карточки ---------- */
.notices { margin: 10px 0 12px; }
.notice { background: var(--surface); border: 1px dashed var(--line); border-radius: 8px; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.notice .t { font-weight: 800; }
.notice p { margin: 0; }
/* Письма и уведомления одного хода стоят рядом, в один ряд. */
.notices { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 12px; align-items: start; }
.notice.email { display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); background: var(--surface); }
/* строка окна почтового клиента: три кружка «светофора» и название */
.email-chrome { display: flex; align-items: center; gap: 6px; padding: 5px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: var(--fs-14); color: var(--muted); }
.email-chrome i { width: 10px; height: 10px; border-radius: 50%; background: var(--mail-tl-r); }
.email-chrome i:nth-child(2) { background: var(--mail-tl-y); }
.email-chrome i:nth-child(3) { background: var(--mail-tl-g); }
.email-chrome span { margin-left: 8px; }
.email-head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 10px 16px 8px; border-bottom: 1px solid var(--line); }
.email-ava { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--mail-ava-a), var(--mail-ava-b)); color: var(--on-color); font-weight: 700; font-size: var(--fs-16); }
.email-meta { min-width: 0; font-size: var(--fs-16); }
.email-from { display: flex; align-items: center; gap: 6px; }
.email-unread { width: 8px; height: 8px; border-radius: 50%; background: var(--mail-blue); flex: none; }
.email-subj { font-weight: 700; font-size: var(--fs-16); margin-top: 1px; }
.email-to, .email-date { color: var(--muted); font-size: var(--fs-14); }
.email-body { padding: 8px 16px 12px 64px; display: flex; flex-direction: column; gap: 8px; }
.email-body p { margin: 0; }
/* условия договора в письме продюсера издателя (#309) — списком «что — сколько», чтобы смотреть по диагонали */
.email-terms { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 0; border-top: 1px solid var(--line); }
.email-terms dt, .email-terms dd { margin: 0; padding: 6px 0; border-bottom: 1px solid var(--line); }
.email-terms dt { color: var(--muted); padding-right: var(--sp-16); }
.email-terms dd { font-weight: 700; }
/* баннер рассылки InvestGame (#187): фирменный тёмно-синий фон сайта и их логотип */
.ig-banner { background: var(--ig-bg); padding: var(--sp-16) var(--sp-24); border-radius: 6px; }
.ig-banner img { display: block; height: 28px; width: auto; }
.ig-bars { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr) auto; gap: var(--sp-8) var(--sp-16); align-items: center; }  /* письмо InvestGame (#396): полоски */
.ig-l { min-width: 0; }
.ig-l b, .ig-l small { display: block; }
.ig-l small, .ig-tiles small { color: var(--muted); font-size: var(--fs-12); }
.ig-track { height: 14px; background: var(--ig-track); border-radius: 3px; }
.ig-track i { display: block; height: 100%; background: var(--ig-bar); border-radius: 3px; }
.ig-v { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ig-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
.ig-tiles > div { border: 1px solid var(--line); border-radius: 6px; padding: var(--sp-8); }
.ig-tiles b, .ig-tiles small { display: block; }
.email-body a { color: var(--mail-blue); }
.email-body blockquote { margin: 0; padding-left: 10px; border-left: 2px solid var(--mail-blue); color: var(--mail-blue); }
.email-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.email-sign { color: var(--muted); font-size: var(--fs-14); line-height: 1.35; }
/* пуш-уведомления: сводка студии, Steamworks, календарь */
.notice.push { border: 1px solid var(--line); border-radius: 12px; align-items: center; flex-wrap: nowrap; gap: 10px; box-shadow: var(--shadow); padding: 6px 12px; }
.push-icon { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-weight: 900; font-size: var(--fs-16); background: var(--surface-2); color: var(--ink); }
.push.report .push-icon { background: var(--accent); color: var(--on-accent); }
.push.cal .push-icon { background: var(--minus); color: var(--on-color); }
/* уведомление — одна строка: приложение, заголовок, текст, изменения */
.push-body { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.push-app { font-size: var(--fs-14); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.event-meta { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.channel { font-size: var(--fs-14); color: var(--muted); }
.deltas { display: flex; flex-wrap: wrap; gap: 6px; }
.d { font-size: var(--fs-14); padding: 2px 8px; border-radius: 4px; background: var(--surface-2); font-weight: 600; }
.d.plus { color: var(--plus); background: var(--plus-soft); }
.d.minus { color: var(--minus); background: var(--minus-soft); }

.events { --slot: calc((100% - 2 * var(--sp-16)) / 3); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-16); align-items: stretch;  /* все карточки ряда — одной высоты: открытая не становится ниже соседней рубашки (автор, 26.10; было: своей высоты, пачка d26f) */
  /* ряд из трёх слотов шире плиток — до 1420px (решение автора, #39) */
  width: 1420px; position: relative; left: 50%; transform: translateX(-50%); }
.events > * { flex: 0 0 var(--slot); }
.events > * { min-width: 0; }
.event { gap: var(--sp-16); position: relative; }
/* булавка, которой карточка приколота к столу */
.event::before { content: ''; position: absolute; top: -11px; left: 50%; width: 26px; height: 14px; background: var(--pin); border: var(--edge-w) solid var(--edge); }
.event-head { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: center; }
.event-art .art { aspect-ratio: 4 / 3; width: 112px; }
.event-art .art-scene span { display: none; }
.event-art .art-news { padding: 6px; gap: 4px; }
.event-art .np-head { font-size: var(--fs-12); border-bottom-width: 2px; padding-bottom: 2px; white-space: nowrap; letter-spacing: 0; } /* название газеты — в одну строку, чтобы полосе осталось место */
.event-art .art-news .px-news { flex: 1; min-height: 0; height: 100%; aspect-ratio: auto; } /* в карточке события полоса газеты занимает всё место под шапкой */
.event-title { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.event-text { font-size: var(--fs-18); }
.event .tag { align-self: flex-start; font-size: var(--fs-14); text-transform: uppercase; letter-spacing: .08em; color: var(--on-color); padding: 3px 9px; border-radius: 4px; font-weight: 800; }
.event.dev .tag { background: var(--dev); }
.event.marketing .tag { background: var(--marketing); }
.event.release .tag { background: var(--release); }
.event.finish .tag { background: var(--finish); }
.options { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); margin-top: auto; } /* столбиком во всю ширину карточки (#39) */
.options.resolved { display: block; }
.option { display: flex; flex-direction: column; gap: 6px; text-align: left; background: var(--card-2); border: var(--edge-w) solid var(--edge); border-radius: 0; box-shadow: 0 4px 0 var(--line); padding: 10px 12px; min-height: 100%; transition: transform .12s ease, box-shadow .12s ease; }
.option-label { font-weight: 700; font-size: var(--fs-16); line-height: 1.3; flex: 1; }
.option:hover, .option:focus-visible { transform: translateY(-3px); box-shadow: 0 7px 0 var(--sun); outline: none; }
.option:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.cost { align-self: flex-start; font-size: var(--fs-14); font-weight: 800; padding: 2px 8px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.cost.minus { color: var(--minus); background: var(--minus-soft); }
.cost.plus { color: var(--plus); background: var(--plus-soft); }
.outcome { display: flex; flex-direction: column; gap: 8px; }
.chosen { background: var(--accent-soft); border-left: 4px solid var(--accent); padding: 8px 12px; border-radius: 4px; font-weight: 800; }

/* ---------- офферы издателей и подпись ---------- */
.offer .kv { font-size: var(--fs-16); }
.sign { display: flex; flex-direction: column; gap: 2px; background: var(--paper); color: var(--paper-ink); border: 1px dashed var(--line); border-radius: 8px; padding: 10px 14px 8px; text-align: left; }
.sign:hover, .sign:focus-visible { border-style: solid; border-color: var(--accent); outline: none; }
.sign-line { display: block; height: 48px; border-bottom: 2px solid var(--paper-ink); position: relative; } /* подпись — над линией; не обрезается полем и лежит поверх всего (#65) */
.sign-ink { position: absolute; z-index: 3; pointer-events: none; left: 8px; bottom: -8px; font: 400 36px/1.4 "Homemade Apple", "Segoe Script", cursive; color: var(--ink-sign); white-space: nowrap; clip-path: inset(-50% 100% -50% -20px); visibility: hidden; }  /* до подписания не видно ни следа (#109) */
/* пасхалка: подпись продюсера — «Pong72», дань одной из первых видеоигр (docs/world.md, «Пасхалки для своих») */
.sign.signed .sign-ink { visibility: visible; animation: write 1s ease-out forwards; }
@keyframes write { to { clip-path: inset(-50% -40px -50% -20px); } }  /* маска шире буквы: завитки шрифта выходят за рамку и не должны обрезаться */
.sign-label { font-size: var(--fs-14); text-transform: uppercase; letter-spacing: .08em; }

/* ---------- ноутбук продюсера (файлы) ---------- */
.laptop-overlay { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: safe center; justify-content: safe center; overflow: auto; padding: 25px 16px; z-index: 37; }  /* по центру экрана по обеим осям (автор: на весь экран ноутбук прижимался к верху); не влезает — от верха, с отступом 20 px экрана (×0,8) */
/* ноутбук «смотрит на нас» в пропорциях экрана MacBook Air (автор, вариант В): крышка во всю высоту окна — 83 px экрана остаются
   на отступ сверху и основание; ширина = высота × 1,54 (без vw — раскладка не зависит от ширины окна), не больше 1737 px
   (1390 px экрана — помещается в минимальную ширину страницы). vh при zoom — экранные, поэтому делим на масштаб */
.laptop { --lap-h: min(calc((100vh - 83px) / var(--ui-scale)), 900px);  /* потолок 900 (#257, баг автора): на весь экран ноутбук рос по высоте окна и вылезал вправо */ width: calc(var(--lap-h) * 1.54); flex: none; display: flex; flex-direction: column; align-items: center; }
/* размер экрана не зависит от содержимого: длинная таблица прокручивается внутри */
/* ноутбук прямо на странице (до партии: чат названия, звонки) — те же пропорции, но под заголовком: целиком на первом экране */
#app .laptop { --lap-h: min(calc((100vh - 124px) / var(--ui-scale)), 900px); }   /* во всю высоту под шапкой: заголовок экрана — в строке меню, текст — полосой внутри (#202) */
#app:has(> .laptop) > h1 { display: none; }
#app:has(> .laptop) { padding-top: var(--sp-16); min-height: calc(100vh / var(--ui-scale) - 64px); display: flex; flex-direction: column; justify-content: center; }  /* ноутбук до партии — по центру экрана под шапкой (57 px и запас на округление масштаба) по обеим осям (автор); не влезает — страница прокручивается */
#app > .laptop { margin-inline: calc((100% - var(--lap-h) * 1.54) / 2); }  /* ноутбук шире колонки страницы — выступает поровну в обе стороны, а не только вправо */
.laptop-lid { position: relative; width: 100%; height: var(--lap-h); background: var(--laptop); border: 2px solid var(--laptop-edge); border-radius: 18px 18px 6px 6px; padding: 14px; box-shadow: 0 20px 60px var(--shade-50); display: flex; }
.laptop-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 84px; height: 32px; background: var(--laptop); border-radius: 0 0 10px 10px; z-index: 3; display: flex; justify-content: center; padding-top: 6px; }
.laptop-notch i { width: 8px; height: 8px; border-radius: 50%; background: var(--notch); box-shadow: 0 0 0 2px var(--notch-ring), inset 2px 2px 0 var(--notch-glow); }
.laptop-screen { background: var(--surface); border-radius: 6px; overflow: hidden; width: 100%; font-size: var(--fs-16); display: flex; flex-direction: column; min-width: 0; }
.mac-bar { flex: none; display: flex; align-items: center; gap: 16px; height: 26px; padding: 0 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: var(--fs-14); color: var(--ink); white-space: nowrap; overflow: hidden; }
.mac-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
/* «светофор» macOS слева (#204, автор): закрывает только красный; жёлтый и зелёный почти серые — видно, что кликается один красный */
.mac-lights { display: inline-flex; gap: 6px; align-items: center; }
.mac-light { display: block; width: 12px; height: 12px; border-radius: 50%; padding: 0; border: 0; background: var(--mac-light-off); }
.mac-light + .mac-light + .mac-light { background: var(--mac-light-off-2); }
.mac-light-close { background: var(--close); cursor: pointer; }
.mac-light-close:hover, .mac-light-close:focus-visible { background: var(--close-hover); }
.mac-right { margin-left: var(--sp-16); color: var(--muted); font-variant-numeric: tabular-nums; }
/* заголовок экрана до партии и короткая памятка клавиш — в строке меню ноутбука (#202) */
.mac-title { color: var(--muted); font-weight: 700; }
/* без входа (#420): «☁ не в облаке» перед батареей — только мышкой, открывает «☰ Меню» → «Войти» */
.mac-cloud { flex: none; margin-left: var(--sp-16); padding: 0 var(--sp-8); border: 0; border-radius: 4px; background: transparent; color: var(--accent); font: inherit; cursor: pointer; }
.mac-cloud:hover { background: var(--line); }
.mac-keys { margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-16); color: var(--muted); }
.mac-keys .kl-row { display: inline-flex; align-items: center; gap: var(--sp-4); background: none; border: 0; padding: 0; font: inherit; color: inherit; }
.mac-keys .kl-btn { cursor: pointer; }
.mac-keys .kl-btn:hover { color: var(--ink); }
.mac-keys .key-cap { margin: 0; height: 18px; padding: 0 6px; box-shadow: 0 2px 0 var(--key-edge); }
body.laptop-open .key-legend { visibility: hidden; }   /* пока открыт ноутбук, клавиши — в его строке меню */
.laptop-view { flex: 1; overflow: auto; min-height: 0; display: flex; flex-direction: column; }
/* таблица занимает весь экран: прокручивается только тело, вкладки листов — внизу экрана, как в Excel */
.laptop .sheet { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.laptop .sheet-body { flex: 1; min-height: 0; overflow: auto; }
.laptop .sheet .tabs { flex: none; border-top: 1px solid var(--line); }
.laptop .ledger .sheet-scroll { max-height: none; overflow: visible; }
.laptop .sheet-title { position: sticky; top: 0; z-index: 2; }
.laptop-base { width: 108%; max-width: calc(100% + 40px); height: 16px; background: linear-gradient(180deg, var(--laptop-edge), var(--laptop)); border-radius: 0 0 14px 14px; display: flex; justify-content: center; }
.laptop-base span { width: 120px; height: 6px; background: var(--laptop); border-radius: 0 0 6px 6px; }
.laptop .sheet { border: 0; border-radius: 0; box-shadow: none; }
.laptop .sheet table { font-size: var(--fs-16); }
.laptop .sheet td.c { font-size: var(--fs-14); }
.laptop .sheet-body { padding: 4px 0; }
.laptop .chart-title { font-size: var(--fs-16); }
.steamworks { background: var(--steam-bg); color: var(--steam-ink); min-height: 100%; }
.sw-logo { font-weight: 900; letter-spacing: .12em; color: var(--steam-accent); font-size: var(--fs-14); }
.steamworks .chart-title { color: var(--steam-muted); }
.steamworks .chart .grid { stroke: var(--steam-bg2); }
.steamworks .chart .tick { fill: var(--steam-muted); }
.steamworks .chart .line { stroke: var(--steam-accent); }
.steamworks .chart .area { fill: var(--steam-accent-15); }
.steamworks .chart .dot { fill: var(--steam-accent); stroke: var(--steam-bg); }
.steamworks .chart .bar { fill: var(--steam-accent); }
.steamworks table { color: var(--steam-ink); width: 100%; border-collapse: collapse; font-size: var(--fs-16); }
.steamworks th, .steamworks td { border: 1px solid var(--steam-bg2); padding: 4px 8px; }
.steamworks thead th, .steamworks tbody th { background: var(--steam-bg2); color: var(--steam-muted); font-weight: 600; }
.steamworks td.n { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- страница магазина Steam (упрощённо) ---------- */
.modal-box.steam-store { background: linear-gradient(180deg, var(--steam-bg2), var(--steam-bg) 40%); color: var(--steam-ink); border-color: var(--steam-edge); max-width: 900px; padding: 0 0 16px; gap: 10px; }
.ss-bar { display: flex; gap: 22px; padding: 10px 18px; background: var(--steam-bar); font-size: var(--fs-14); font-weight: 700; letter-spacing: .06em; color: var(--steam-bar-ink); flex-wrap: wrap; }
.ss-crumbs { padding: 0 18px; font-size: var(--fs-14); color: var(--steam-muted); }
.ss-title { padding: 0 18px; color: var(--on-color); font-size: var(--fs-32); font-weight: 400; }
.ss-main { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; padding: 0 18px; }
.ss-media { aspect-ratio: 16 / 9; max-width: 100%; border-radius: 2px; display: flex; align-items: center; justify-content: center; color: var(--steam-media-ink); font-size: var(--fs-32); font-weight: 900; text-shadow: 0 2px 8px var(--shade-50); }
.ss-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ss-capsule { aspect-ratio: 460 / 215; max-width: 100%; display: flex; align-items: flex-end; padding: 8px; color: var(--on-color); font-weight: 900; text-shadow: 0 1px 4px var(--shade-50); }
.ss-desc { font-size: var(--fs-14); color: var(--steam-ink); }
.ss-meta { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: var(--fs-14); }
.ss-meta span { color: var(--steam-muted); }
.ss-meta b { font-weight: 400; color: var(--steam-ink); }
.ss-meta .ss-link { color: var(--steam-accent); }
.ss-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ss-tags span { background: var(--steam-tag); color: var(--steam-accent); font-size: var(--fs-14); padding: 2px 7px; border-radius: 2px; }
.ss-buy { margin: 4px 18px 0; background: linear-gradient(90deg, var(--steam-accent-20), var(--steam-accent-05)); border-radius: 4px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.ss-buy > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ss-buy b { color: var(--on-color); font-size: var(--fs-18); font-weight: 400; }
.ss-buy span { font-size: var(--fs-14); color: var(--steam-ink); }
.primary.ss-wish { background: var(--steam-btn); color: var(--steam-accent); border: 0; box-shadow: none; border-radius: 2px; font-weight: 500; letter-spacing: 0; }
.primary.ss-wish:hover { background: var(--steam-accent); color: var(--on-color); }

/* ---------- мессенджер ---------- */
.chat { gap: 10px; border-color: var(--quiz); }
.chat-head { display: flex; gap: 10px; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.chat-head .avatar { width: 40px; height: 40px; background: var(--quiz); color: var(--on-color); }
.chat-log { display: flex; flex-direction: column; gap: 8px; }
.bubble { max-width: 85%; padding: 8px 12px; border-radius: 14px; font-size: var(--fs-16); line-height: 1.35; border: 0; text-align: left; }
.bubble.in { align-self: flex-start; background: var(--bubble-in); border-bottom-left-radius: 4px; }
.bubble.out { align-self: flex-end; background: var(--bubble-out); color: var(--on-bubble-out); border-bottom-right-radius: 4px; }
.chat-replies { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
/* ссылка в тексте реплики чата, по которой идёт дальше (экран названия → Bridge, автор): ссылка, а не кнопка, но заметная — голубая, с бликом и цифрой */
.chat-link { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: var(--sp-4); margin-left: var(--sp-4); padding: 0 var(--sp-4); background: none; border: 0; font: inherit; font-weight: 700; color: var(--dsn-link); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; vertical-align: baseline; }
.chat-link:hover, .chat-link:focus-visible { text-decoration-thickness: 2px; filter: brightness(1.15); }
.chat-link .opt-no { margin-right: 0; text-decoration: none; }
.chat-replies:empty { display: none; }   /* после ответа (вариантов больше нет) — без пустой полосы с линией */
.bubble.reply { background: var(--surface); border: 2px solid var(--bubble-out); color: var(--ink); border-bottom-right-radius: 4px; }
.bubble.reply:hover, .bubble.reply:focus-visible { background: var(--bubble-out); color: var(--on-bubble-out); outline: none; }

/* кнопка хода — в потоке экрана, сразу под карточками, по центру (#98; раньше — в правом нижнем углу, #55) */
.next { display: flex; flex-wrap: wrap; justify-content: center; margin-top: var(--sp-24); }
.next .primary:disabled { pointer-events: none; background: var(--wall-2); color: var(--on-wall-muted); cursor: default; box-shadow: 0 4px 0 var(--edge); }
/* появление карточки и «решено» (#40) */
.appear { animation: card-in .35s ease-out both; }
.events > .appear:nth-child(2) { animation-delay: .08s; } .events > .appear:nth-child(3) { animation-delay: .16s; }
@keyframes card-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.just-done { animation: card-done .6s ease-out; }
@keyframes card-done { 0% { box-shadow: 0 0 0 0 var(--sun), var(--px-shadow); } 40% { box-shadow: 0 0 0 6px var(--sun), var(--px-shadow); } 100% { box-shadow: var(--px-shadow); } }

/* ---------- окна ---------- */
.modal { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: safe center; justify-content: safe center; overflow: auto; padding: 16px; z-index: 35; }
.modal-box { background: var(--card); color: var(--ink); border-radius: 0; padding: 20px; max-width: 660px; width: 100%; display: flex; flex-direction: column; gap: 12px; max-height: 100%; overflow-y: auto; border: var(--edge-w) solid var(--edge); box-shadow: 0 6px 0 var(--edge); }
.stage-desc { font-size: var(--fs-16); }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 36; }

@media (prefers-reduced-motion: reduce) {
  .pulse, .appear, .just-done { animation: none; }
  .sign.signed .sign-ink { animation: none; clip-path: none; }
  .card.pick { transition: none; }
  .option { transition: none; }
}

/* ---------- цена на релизе: ползунок в кабинете Steamworks ---------- */
.price-slider { border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.ps-head { display: flex; gap: 12px; align-items: baseline; color: var(--steam-muted); font-size: var(--fs-14); }
.ps-value { font-size: var(--fs-40); font-weight: 800; color: var(--on-color); font-variant-numeric: tabular-nums; }
.price-slider input[type=range] { width: 100%; accent-color: var(--steam-accent); height: 28px; }
/* крупная ручка ползунка (#252): поверх родной — значок ⟷, видно, что цену двигают */
.ps-track { position: relative; }
.ps-track input[type=range] { -webkit-appearance: none; appearance: none; height: 34px; background: transparent; cursor: pointer; }
.ps-track input[type=range]::-webkit-slider-runnable-track { height: 8px; background: var(--steam-bg2); border-radius: 4px; }
.ps-track input[type=range]::-moz-range-track { height: 8px; background: var(--steam-bg2); border-radius: 4px; }
.ps-track input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 30px; margin-top: -11px; border-radius: 6px; background: var(--steam-accent); border: 2px solid var(--on-color); }
.ps-track input[type=range]::-moz-range-thumb { width: 34px; height: 30px; border-radius: 6px; background: var(--steam-accent); border: 2px solid var(--on-color); }
.ps-grip { position: absolute; top: 50%; left: calc(17px + (100% - 34px) * var(--p, 0)); transform: translate(-50%, -50%); pointer-events: none; font: 800 var(--fs-18) var(--font); color: var(--steam-bg); }
.ps-refs { font-size: var(--fs-14); color: var(--steam-muted); }
.ps-refs b { color: var(--steam-ink); font-variant-numeric: tabular-nums; }
.ps-presets { display: flex; gap: var(--sp-8); flex-wrap: wrap; }
.ps-preset { font: 700 var(--fs-14) var(--font); color: var(--steam-ink); background: transparent; border: 2px solid var(--steam-accent); padding: 4px 10px; cursor: pointer; font-variant-numeric: tabular-nums; }
.ps-preset.on { background: var(--steam-accent); color: var(--steam-bg); }
/* окно YES / NO у мыши (#252) */
.ps-confirm { position: fixed; z-index: 60; background: var(--steam-bg); color: var(--on-color); border: 2px solid var(--steam-accent); padding: var(--sp-8) 12px; display: flex; flex-direction: column; gap: var(--sp-8); box-shadow: var(--px-shadow); font: var(--fs-16) var(--font); }
.ps-confirm-btns { display: flex; gap: var(--sp-8); }
.theme-ask { margin: var(--sp-8) 0 var(--sp-8) var(--sp-24); padding: var(--sp-8) var(--sp-16); border: var(--edge-w) solid var(--edge); background: var(--card); display: flex; flex-direction: column; gap: var(--sp-8); }  /* вопрос перед выбором главной темы (пачка d26e) */
.theme-ask-btns { display: flex; gap: var(--sp-8); }
.ps-confirm button { font: 800 var(--fs-14) var(--font); padding: 4px 14px; cursor: pointer; border: 2px solid var(--steam-accent); }
.ps-confirm .ps-yes { background: var(--steam-accent); color: var(--steam-bg); }
.ps-confirm .ps-no { background: transparent; color: var(--steam-ink); }
.ps-marks { display: flex; justify-content: space-between; font-size: var(--fs-14); color: var(--steam-muted); font-variant-numeric: tabular-nums; }
.price-slider .primary { align-self: flex-start; }

/* ---------- окно оценок прессы после релиза ---------- */
.rev-sites { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }  /* карточки сайтов — всегда одной высоты (#104) */
.rev-site { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--surface-2); display: flex; flex-direction: column; gap: 4px; }
.rev-score { font-size: var(--fs-24); font-weight: 800; font-variant-numeric: tabular-nums; }
.rev-sub { font-size: var(--fs-14); color: var(--muted); }
.rev-quote { font-size: var(--fs-16); color: var(--muted); font-style: italic; }

/* предупреждение на варианте: после него прогноз в таблице станет «не хватает до дедлайна» */
.warn-chip { font-size: var(--fs-14); font-weight: 700; color: var(--minus); background: var(--minus-soft); border-radius: 6px; padding: 2px 8px; align-self: flex-start; }
.option.warned { border-color: var(--minus); }
.option.blocked { opacity: .55; cursor: not-allowed; }

/* сравнение оффера с оценкой студии из питча */
.offer .kv b.pos { color: var(--plus); }
.offer .kv b.neg { color: var(--minus); }

/* созвон издателя на экране офферов (#8) и диалоги в мессенджере (#3) */
.chat.dialog .bubble .deltas { margin-top: var(--sp-4); }
.chat.dialog .outcome { align-self: stretch; text-align: left; }

/* вердикт «успеваем или нет» на плитке готовности (#37) */
.verdict { margin-top: var(--sp-4); font-size: var(--fs-14); font-weight: 700; padding: 2px 6px; align-self: flex-start; display: inline-block; }
.verdict.bad { color: var(--minus); background: var(--minus-soft); }
.verdict.ok { color: var(--plus); background: var(--plus-soft); }

/* номер варианта: кандидату проще сказать вслух «беру второй» (#35) */
/* номер — как клавиша клавиатуры (#66): светлая клавиша с нижней гранью; при нажатии (мышью или клавишей) «вдавливается» */
.opt-no { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; margin-right: var(--sp-8); background: var(--key-face); color: var(--ink); border: 1px solid var(--key-edge); border-radius: 4px; box-shadow: 0 3px 0 var(--key-edge); font: 700 var(--fs-14)/1 var(--font); vertical-align: 3px; transition: transform .08s, box-shadow .08s; }
.key-cap { display: inline-grid; place-items: center; height: 22px; padding: 0 8px; margin-left: var(--sp-8); vertical-align: 2px; background: var(--key-face); color: var(--ink); border: 1px solid var(--key-edge); border-radius: 4px; box-shadow: 0 3px 0 var(--key-edge); font: 600 var(--fs-12)/1 var(--font); letter-spacing: .02em; }
.pressed .key-cap { transform: translateY(3px); box-shadow: 0 0 0 var(--key-edge); }
.pressed .opt-no, .pressed.opt-no { transform: translateY(3px); box-shadow: 0 0 0 var(--key-edge); }
.option.pressed, .bubble.reply.pressed, .seg button.pressed, .primary.pressed, .sign.pressed, .br-btn.pressed, .home-game.pressed { transform: translateY(3px); filter: brightness(.96); }
h2 .opt-no { vertical-align: 4px; }
.bubble .opt-no { background: var(--surface); }

/* офферы строками во всю ширину: слева издатель и созвон, справа условия в две колонки, подпись над значением (#36) */
.of-v { font-size: var(--fs-18); font-weight: 800; }
.of-s { font-size: var(--fs-14); }
.of-s .pos { color: var(--plus); font-weight: 600; } .of-s .neg { color: var(--minus); font-weight: 600; } .of-s .cap { color: var(--muted); }

/* ---------- мессенджер: смесь узнаваемого Telegram и WhatsApp (#42) — «реальное приложение», не бумага ---------- */
:root { --msg-bg: #efe7dc; --msg-dot: #e2d6c4; --msg-head: #f6f6f6; --msg-in: #ffffff; --msg-out: #dcf8c6; --msg-ink: #111b21; --msg-muted: #667781; --msg-tick: #34b7f1; --msg-accent: #2b8be6; --msg-line: #c9cfd4; --msg-line-soft: #dfe3e6; }
.card.chat { background: var(--msg-head); border: 1px solid var(--msg-line); border-radius: 12px; box-shadow: var(--shadow); padding: 0; gap: 0; overflow: hidden; color: var(--msg-ink); }
.card.chat::before { display: none; }
.chat .chat-head { padding: var(--sp-8) var(--sp-16); border-bottom: 1px solid var(--msg-line-soft); background: var(--msg-head); }
.chat .chat-head .muted { color: var(--msg-muted); font-size: var(--fs-14); }
.chat .chat-head .avatar { background: var(--msg-accent); color: var(--on-color); }
.chat .chat-log { background: radial-gradient(var(--msg-dot) 1.5px, transparent 1.6px) 0 0 / 18px 18px, var(--msg-bg); padding: var(--sp-16); gap: 6px; }
.chat .chat-replies { background: var(--msg-head); padding: var(--sp-8) var(--sp-16) var(--sp-16); gap: 6px; align-items: stretch; }
.chat .bubble { position: relative; font-size: var(--fs-16); border-radius: 10px; box-shadow: 0 1px 0 var(--shade-12); }
.chat .bubble.in { background: var(--msg-in); border-top-left-radius: 0; color: var(--msg-ink); }
.chat .bubble.out { background: var(--msg-out); border-top-right-radius: 0; color: var(--msg-ink); }
.chat .bubble.in::before, .chat .bubble.out::before { content: ''; position: absolute; top: 0; width: 8px; height: 10px; }
.chat .bubble.in::before { left: -7px; background: linear-gradient(225deg, var(--msg-in) 50%, transparent 50%); }
.chat .bubble.out::before { right: -7px; background: linear-gradient(135deg, var(--msg-out) 50%, transparent 50%); }
.chat .bubble.out::after { content: '✓✓'; margin-left: var(--sp-8); font-size: var(--fs-12); color: var(--msg-tick); letter-spacing: -2px; }
/* варианты ответа — кнопки быстрого ответа под перепиской */
.chat .bubble.reply { max-width: none; background: var(--surface); color: var(--msg-accent); border: 1px solid var(--msg-accent); border-radius: 8px; font-weight: 600; box-shadow: none; text-align: left; }
.chat .bubble.reply:hover, .chat .bubble.reply:focus-visible { background: var(--msg-accent); color: var(--on-color); }
.chat .outcome { background: var(--surface); border-radius: 8px; padding: var(--sp-8) var(--sp-16); }

/* смена периода (#49): клетка шкалы месяцев вспыхивает солнцем, рядом всплывает месяц */
@keyframes tl-flash { 0% { background: var(--sun); color: var(--ink); box-shadow: 0 0 0 0 var(--sun); } 50% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: none; } }
.month-pop { align-self: flex-end; margin-left: var(--sp-16); background: var(--card); color: var(--ink); border: var(--edge-w) solid var(--edge); padding: 2px var(--sp-8); font-weight: 700; animation: month-pop 1.6s ease-out forwards; }
@keyframes month-pop { 0% { opacity: 0; transform: translateY(-4px); } 15% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mt-cell.flash, .month-pop { animation: none; } .month-pop { display: none; } }

/* плашка «тот же месяц» (#45) */
.pause-bar { background: var(--sun); color: var(--ink); font-weight: 700; padding: 6px var(--sp-16); border: var(--edge-w) solid var(--edge); margin-bottom: var(--sp-16); box-shadow: var(--px-shadow); }

/* финишная прямая одним экраном (#43, #44) */
.events > .finish-plan { flex-basis: min(1100px, 100%); }
.fp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--sp-16); align-items: start; }
.fp-list { display: flex; flex-direction: column; gap: var(--sp-8); }
.fp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-16); align-items: center;  /* кнопки — всегда в колонке справа (#125) */ border: 2px solid var(--edge); background: var(--card-2); padding: var(--sp-8) var(--sp-16); }
.fp-row.tail { border-style: dashed; }
.fp-row .cap { display: block; font-size: var(--fs-14); color: var(--muted); }
.seg { display: inline-flex; border: 2px solid var(--edge); }
.seg button { border: 0; border-left: 1px solid var(--edge); background: var(--card-2); padding: 4px 10px; font-size: var(--fs-14); }
.seg button:first-child { border-left: 0; }
.seg button.on { background: var(--sun); font-weight: 700; }
.fp-delay { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--sp-8); }
.fp-delay input { width: 100%; accent-color: var(--accent); }
.fp-delay .mail-mini { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: var(--sp-8) var(--sp-16); font-size: var(--fs-16); }
.fp-sum { position: sticky; top: var(--sp-16); border: 2px solid var(--edge); background: var(--card-2); padding: var(--sp-16); display: flex; flex-direction: column; gap: 6px; }
.fp-sum .k { font-size: var(--fs-14); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.fp-sum .neg { color: var(--minus); font-weight: 600; } .fp-sum .pos { color: var(--plus); font-weight: 600; } .fp-sum .cap { color: var(--muted); font-size: var(--fs-14); }

/* твои условия на карточке студии (#46) */
/* «Тебе предлагают» — записка от студии, приколотая к ряду (#83): бумага игры, а не цвет статуса */


/* ---------- Bridge — «реальное приложение» (#48): цвета, шрифт и форма платформы ---------- */
:root { --bridge-bg: #f0f2f4; --bridge-panel: #ffffff; --bridge-ink: #192436; --bridge-muted: #6f7888; --bridge-accent: #056ef7; --bridge-line: #d1d5db; --bridge-logo: #414a7d; --bridge-chip: #f4f4f5; --bridge-chip-2: #e6e7ea; --bridge-req: #f56c6c; --bridge-faint: #a8abb2; --bridge-ink-2: #4b5563; --bridge-shadow: rgba(25,36,54,.08); --bridge-shadow-2: rgba(25,36,54,.12); }
.bridge { background: var(--bridge-bg); padding: var(--sp-16); font-family: "Poppins", var(--font); color: var(--bridge-ink); max-width: 760px; margin: 0 auto; }  /* форма — страница сайта в браузере ноутбука (#86) */ /* компактнее, в размерах игры (#64) */
.br-modal { background: var(--bridge-panel); border-radius: 16px; padding: var(--sp-16) var(--sp-24); display: flex; flex-direction: column; gap: var(--sp-4); box-shadow: 0 8px 24px var(--bridge-shadow-2); }
.br-top { display: flex; justify-content: space-between; align-items: center; }
.br-logo { height: 44px; width: auto; display: block; } /* настоящий логотип Bridge (#71) */
.br-x { color: var(--bridge-muted); }
.br-title { font-size: var(--fs-18); font-weight: 600; margin-bottom: var(--sp-4); }
.br-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-16); }
.br-field.wide { grid-column: 1 / -1; }
.br-l { font-size: var(--fs-14); font-weight: 500; color: var(--bridge-muted); margin-bottom: 2px; }
.br-l i { color: var(--bridge-req); font-style: normal; }
/* поля питча уже заполнены командой и не меняются (#364): серый фон без рамки ввода, замок справа, курсор обычный — как поле только для чтения */
.br-in { position: relative; border: 1px solid var(--bridge-chip); background: var(--bridge-chip); color: var(--bridge-muted); border-radius: 4px; padding: 6px 34px 6px 12px; font-size: var(--fs-16); display: flex; gap: 6px; flex-wrap: wrap; min-height: 36px; align-items: center; cursor: default; user-select: none; }
.br-in .br-chip { background: var(--bridge-chip-2); color: var(--bridge-muted); }  /* теги серее поля, не белые: тоже «нельзя менять» (автор) */
.br-lock { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--bridge-faint); }
.br-chip { background: var(--bridge-chip); color: var(--bridge-ink-2); border-radius: 20px; padding: 2px 10px; font-size: var(--fs-14); }
.br-foot { display: flex; justify-content: flex-end; gap: var(--sp-16); align-items: center; margin-top: var(--sp-8); }
.br-btn { background: var(--bridge-accent); color: var(--on-color); border: 0; border-radius: 30px; padding: 10px 24px; font: 500 var(--fs-16) "Poppins", var(--font); }
.br-btn:hover { filter: brightness(1.08); }
.br-btn:disabled { opacity: .7; cursor: progress; }

/* событие, пришедшее письмом (#20): строка почтового клиента сверху, варианты ответа — без «Ответить:» (автор) */
.card.event.mail .email-chrome { margin: calc(-1 * var(--sp-16)) calc(-1 * var(--sp-16)) 0; }

/* активная карточка для выбора клавишами (#51) */
.active-card { outline: calc(var(--edge-w) * 2) solid var(--sun); outline-offset: 4px; translate: 0 -4px; box-shadow: 0 9px 0 var(--wood-2); transition: translate .15s ease-out; }  /* #140: толстая рамка цвета выбора, блок приподнят */
.active-card.key-hop { animation: key-hop .45s ease-out 1; }  /* при переключении Tab — подпрыгивает и остаётся приподнятым */
@keyframes key-hop { 0% { translate: 0 0; } 35% { translate: 0 -12px; } 100% { translate: 0 -4px; } }
@media (prefers-reduced-motion: reduce) { .active-card { translate: none; transition: none; } .active-card.key-hop { animation: none; } }

/* первый экран: выбор игры — PC работает, мобильная f2p — анонс «soon» */
.home-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-24); margin-top: var(--sp-24); }
.home-game { text-align: left; cursor: pointer; font: inherit; color: var(--ink); gap: var(--sp-8); }
.home-game h2 { font-size: var(--fs-32); }
.home-game p { font-size: var(--fs-18); }
.home-game .primary { align-self: flex-start; margin-top: var(--sp-8); }
.home-game:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 8px 0 var(--wood-2); }
.home-kicker { font-size: var(--fs-14); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.home-game.soon { opacity: .6; cursor: not-allowed; }
.soon-chip { align-self: flex-start; background: var(--wall); color: var(--on-wall); font-weight: 800; padding: 4px 12px; text-transform: uppercase; letter-spacing: .08em; }

/* подтверждение «Новой партии» */
.modal-actions { display: flex; gap: var(--sp-16); flex-wrap: wrap; }
.ghost-dark { background: transparent; border: 2px solid var(--edge); padding: 10px 18px; font-weight: 700; color: var(--ink); }

/* пиксель-арт из частей (#7, #11): SVG растягивается на место картинки, клетки остаются чёткими */
.px-art { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.art-person, .art-scene, .art-logo { background: var(--card-2); }
.art-person .px-art { aspect-ratio: 1; height: 100%; width: auto; margin: 0 auto; }
.art-logo { padding: 0; overflow: hidden; border: var(--edge-w) solid var(--edge); }
.avatar.portrait, .email-ava.portrait { padding: 0; overflow: hidden; background: none; border-radius: 6px; }
.avatar.portrait .px-art, .email-ava.portrait .px-art { width: 100%; height: 100%; }


/* первый экран: название и крючок (#62) */
.home-title { margin-bottom: var(--sp-4); }
.home-head { display: flex; align-items: baseline; gap: var(--sp-16); margin-bottom: var(--sp-8); }
.home-head .home-title { margin-bottom: 0; }
.home-studio { color: var(--on-wood-muted); font-size: var(--fs-16); letter-spacing: .04em; }  /* кто делает игру — сразу после названия (автор) */
.home-hook { color: var(--on-wood-muted); font-size: var(--fs-18); margin: 0 0 var(--sp-4); }

/* созвон издателя — окно видеозвонка (#67): фиксированная высота, чтобы карточка не прыгала по ходу разговора */
.vcall { height: 760px; display: flex; flex-direction: column; background: var(--call-bg); color: var(--call-ink); border: var(--edge-w) solid var(--edge); }
.vc-bar { display: flex; gap: var(--sp-16); align-items: center; padding: 6px var(--sp-16); font-size: var(--fs-16); color: var(--call-muted); }
.vc-bar > span:nth-child(2) { flex: 1; color: var(--call-ink); font-weight: 600; }
.vc-live { color: var(--call-ink); font-weight: 700; }
.vc-live::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--call-live); margin-right: 6px; }
.vcall.ended .vc-live::before { background: var(--call-muted); }
.vc-clock { font-variant-numeric: tabular-nums; }
.vc-stage { position: relative; height: 150px; flex: none; margin: 0 var(--sp-8); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding-top: 32px; }
.vc-tile { position: relative; background: var(--call-tile); border-radius: 6px; overflow: hidden; border: 2px solid transparent; display: flex; align-items: flex-end; justify-content: center; }
.vc-tile.speaking { border-color: var(--call-talk); }
.vc-sil { width: 70%; height: auto; fill: var(--call-muted); opacity: .55; }
.vc-name { position: absolute; left: 6px; bottom: 6px; background: var(--shade-55); color: var(--call-ink); font-size: var(--fs-14); padding: 1px 6px; border-radius: 4px; }
.vc-mood { position: absolute; left: 8px; top: 8px; background: var(--shade-55); color: var(--call-ink); font-size: var(--fs-14); font-weight: 600; padding: 2px 8px; border-radius: 4px; }
.vc-cc { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: var(--sp-8) var(--sp-16); font-size: var(--fs-18); line-height: 1.45; }
.cc-line b { color: var(--call-muted); font-weight: 700; }
.cc-line.me b { color: var(--call-talk); }
.cc-line.sum { margin-top: var(--sp-8); padding-top: var(--sp-8); border-top: 1px solid var(--call-muted); }  /* итог звонка — после прощания, отдельной строкой (автор) */
.vcall .chat-replies { flex: none; align-items: stretch; padding: 0 var(--sp-8) var(--sp-8); gap: 6px; }
.vc-reply { display: flex; gap: var(--sp-8); align-items: flex-start; text-align: left; font: inherit; font-size: var(--fs-18); background: var(--card-2); color: var(--ink); border: 2px solid var(--accent); border-radius: 6px; padding: 6px 10px; cursor: pointer; }
.vc-reply:hover, .vc-reply:focus-visible { background: var(--accent-soft); outline: none; }
.vc-reply.pressed { transform: translateY(3px); filter: brightness(.96); }
.vc-tools { flex: none; display: flex; justify-content: center; gap: var(--sp-8); padding: 6px; background: var(--call-tile); }
.vc-btn { font-size: var(--fs-14); color: var(--call-muted); border: 1px solid var(--call-muted); border-radius: 4px; padding: 2px 8px; }

/* term sheet — бланк с самого начала; строки заполняются по ответам, подпись прижата к низу (#67) */
/* Выбор издателя (#405): три term sheet рядом — фирменные бланки издателей на листах А4; блок шире обычного, памятка клавиш справа */
#app:has(> .offers-cols) { max-width: 1550px; }
#app:has(> .offers-cols) > .key-legend { left: calc(100% + var(--sp-8)); width: 130px; }
.pitch-line { display: inline-block; margin: 0 0 var(--sp-24); padding: 6px 12px; background: var(--sticky); color: var(--ink) !important; font-size: var(--fs-16); box-shadow: var(--px-shadow); }  /* что просили в питче — заметной строкой (автор) */
.offers-cols { display: flex; gap: var(--sp-24); align-items: stretch; }
.ts-doc { flex: 1 1 0; min-width: 0; aspect-ratio: 1 / 1.414; display: flex; flex-direction: column; padding: 0; overflow: hidden; background: var(--card-2); }
.ts-band { display: flex; align-items: center; gap: var(--sp-16); padding: var(--sp-16) var(--sp-24); background: var(--pub); color: var(--on-color); }  /* шапка бланка — цвет издателя */
.ts-band .art-logo { width: 44px; height: 44px; }
.ts-band b { display: block; font-size: var(--fs-18); line-height: 1.2; }
.ts-band span { font-size: var(--fs-14); opacity: .85; }
.term-sheet { flex: 1; display: flex; flex-direction: column; gap: var(--sp-8); color: var(--paper-ink); padding: var(--sp-16) var(--sp-24) var(--sp-24); }
.ts-head { font-size: var(--fs-18); font-weight: 800; text-transform: uppercase; letter-spacing: .14em; }
.ts-table { width: 100%; border-collapse: collapse; }
.ts-table tr { border-bottom: 1px solid var(--line); }
.ts-table th { width: 32%; padding: var(--sp-8) var(--sp-8) var(--sp-8) 0; text-align: left; vertical-align: top; color: var(--muted); font-size: var(--fs-12); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.ts-table td { padding: var(--sp-8) 0; }
.ts-table .of-v { font-size: var(--fs-16); }
.term-sheet .sign { margin-top: auto; }
.ts-by { margin: 0; color: var(--muted); font-size: var(--fs-12); }
.offer.declined .ts-band, .offer.declined .term-sheet > :not(.ts-stamp) { opacity: .55; filter: grayscale(1); }

/* памятка про клавиши (#69): в поле слева от колонки, приглушённо, без рамки; видна всегда, только на экране хода.
   Стоит на уровне карточек (absolute без top — на своём месте по вертикали). Где поля нет — скрыта, карточки не сдвигаются. */
main { position: relative; }
.stats { position: relative; }
#app { position: relative; }
#app > .key-legend { top: calc(var(--sp-8) + var(--sp-16) + 6px); }  /* вровень с заголовком экрана, а не вплотную к шапке */
.stats > .key-legend { top: var(--sp-16); left: calc(100% + var(--sp-16) * 4); }  /* справа от плиток, вровень с их верхом (автор: слева — рабочий стол); подложка не заходит на плитки */
.key-legend { position: absolute; top: 0; left: calc(100% + var(--sp-16) * 4); width: 160px; display: flex; flex-direction: column; gap: var(--sp-8); color: var(--on-wood-muted); opacity: .85; font-size: var(--fs-14); line-height: 1.3; }
.key-legend > .kl-row { display: inline-flex; align-items: center; }
.key-legend .kl-btn { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.key-legend .kl-btn:hover { color: var(--on-wood); }
.key-legend .kl-btn:hover .key-cap { box-shadow: 0 0 0 3px var(--shine), 0 0 10px var(--sun); }  /* наведение — клавиша светится (автор) */
.key-legend .key-cap { margin: 0 var(--sp-8) 0 0; flex: none; }

/* справка о Bridge справа от формы (#71): по-русски, значки и «Curated by» — с лендинга bridge.gdcy.eu */
.br-about { background: var(--bridge-panel); border-radius: 16px; padding: var(--sp-16) var(--sp-24); display: flex; flex-direction: column; gap: var(--sp-8); font-family: var(--font); font-size: var(--fs-16); line-height: 1.45; box-shadow: 0 8px 24px var(--bridge-shadow); }
.br-about-title { font: 600 var(--fs-18) "Poppins", var(--font); }
.br-lead { margin: 0; }
.br-curated { display: flex; align-items: center; gap: var(--sp-8); border-top: 1px solid var(--bridge-line); padding-top: var(--sp-8); color: var(--bridge-muted); font-size: var(--fs-14); flex-wrap: wrap; }
.br-curated img { width: auto; object-fit: contain; }
.br-curated a:nth-of-type(1) img { height: 28px; }  /* пропорции как на лендинге: Narwhal широкий, GDCy почти квадратный — у него высота больше */
.br-curated a:nth-of-type(2) img { height: 36px; }
.brand-icon { height: 1em; width: 1em; vertical-align: -.12em; margin-right: .25em; border-radius: 3px; }

/* «Люди против ИИ» (#74): кнопка на первом экране и экран сравнения на демо-данных */
/* приглашение подписаться (#137): бумага игры, узнаваемый оранжевый Substack на кнопке и знак слева от заголовка */
.sub-logo { width: 14px; height: 16px; flex: none; vertical-align: -2px; margin-right: 3px; }
.bench-back { margin-bottom: var(--sp-16); }
.rate-head { gap: var(--sp-24); }  /* экран рейтинга: «← В главное меню», чуть дальше — две вкладки (у вкладок между собой — обычный зазор) */
.rate-head .bench-back { margin-bottom: 0; }
.ext-substack { color: var(--ink); font-weight: 700; }  /* «Substack» в плашках новостей — цветом и логотипом (пачка 89) */
.news-plaque { margin: 0 auto var(--sp-16); }  /* по центру экрана (автор) */
.news-plaque .primary { white-space: nowrap; flex: none; }
.bench-card { margin-bottom: var(--sp-16); }
.bh-h { fill: var(--accent); background: var(--accent); }
.bh-a { fill: var(--marketing); background: var(--marketing); }
.bench-chart { width: 100%; max-width: 900px; height: auto; display: block; }
.bench-chart .bh-grid { stroke: var(--line); stroke-width: 1; }
.bench-chart text { fill: var(--muted); font-size: var(--fs-12); font-family: var(--font); }
.bench-chart .bh-x { text-anchor: middle; }
.bench-chart .bh-y { text-anchor: end; }

/* конструктор капсулы (#75): обложка = пиксельная картинка + надпись настоящим текстом стилем шрифта */
.events > .cover-card { flex-basis: 100%; }
.gcover { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--wall); container-type: inline-size; }
.gcover .px-cover { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.px-cover { object-fit: contain; }   /* капсула — картинкой PNG (#186), целиком, как SVG с meet */
.cv-title { position: absolute; left: 4%; right: 4%; top: 5%; text-align: center; line-height: 1.05; font-size: 15cqw; word-break: break-word; }
.cv-usp { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 1px; padding: 4% 5%; background: var(--shade-55); color: var(--card); font-size: 6cqw; line-height: 1.2; }
.cvf-pixel { font-family: var(--font-px); font-size: 16cqw; }
.cvf-serif { font: italic 700 15cqw/1.05 Georgia, "Times New Roman", serif; }
.cvf-neon { font: 700 15cqw/1.05 "Trebuchet MS", var(--font); text-shadow: 0 0 2cqw currentColor; }
.cvf-drip { font: 700 16cqw/1 Impact, "Arial Black", sans-serif; letter-spacing: .02em; }
.cvf-hand { font: 700 15cqw/1.05 "Comic Sans MS", "Segoe Print", cursive; }
.cvf-stencil { font: 900 14cqw/1.05 "Arial Black", var(--font); letter-spacing: .04em; text-transform: uppercase; }
.cvf-round { font: 800 15cqw/1.05 var(--font); }
.cvf-italic { font: italic 900 15cqw/1.05 var(--font); transform: skew(-8deg); }
.cvf-mono { font: 700 12cqw/1.1 "Courier New", monospace; }
.cvf-thin { font: 300 7cqw/1.1 Helvetica, Arial, sans-serif; text-align: right; }
.cvc-cream { color: var(--card); text-shadow: 0 2px 0 var(--paper-ink), 0 0 3px var(--paper-ink); }
.cvc-gold { color: var(--sun); text-shadow: 0 2px 0 var(--edge), 0 0 3px var(--paper-ink); }
.cvc-red { color: var(--cv-red); text-shadow: 0 2px 0 var(--cv-black); }
.cvc-cyan { color: var(--cv-cyan); }
.cvc-pink { color: var(--cv-pink); }
.cvc-white { color: var(--on-color); text-shadow: 0 1px 0 var(--paper-ink); }
.cvc-green { color: var(--cv-green); text-shadow: 0 1px 0 var(--cv-black); }
.cv-body { display: grid; grid-template-columns: calc(5 * 130px + 4 * var(--sp-8)) minmax(0, 1fr);  /* слева — варианты ровно по ширине пяти превью, капсула справа (#114) забирает остальное: без пустой полосы между ними */ gap: var(--sp-24); align-items: start; }
.cv-layer { margin-bottom: var(--sp-16); }
.cv-label { font-size: var(--fs-14); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: var(--sp-8); }
.cv-opts { display: grid; grid-template-columns: repeat(5, minmax(0, 130px)); gap: var(--sp-8); }
.cv-opt { display: flex; flex-direction: column; gap: 4px; align-items: stretch; padding: 4px; border: 2px solid var(--line); background: var(--card-2); cursor: pointer; font: inherit; font-size: var(--fs-14); color: var(--ink); text-align: center; line-height: 1.25; }
.cv-opt.on { border-color: var(--edge); background: var(--sun); }  /* выбор — цветом выбора (как .seg button.on), не статусом «плюс» (#83) */
.cv-opt:hover { border-color: var(--accent); }
.cv-opt { position: relative; }
.cv-opt > .opt-no { position: absolute; top: var(--sp-8); left: var(--sp-8); z-index: 1; }  /* цифра — в углу картинки, подпись не переносится */
.cover-card .opt-no { display: none; }  /* цифры — только у активного слоя (Tab), пачка П2 */
.cover-card .active-card .opt-no { display: inline-grid; }
.cv-usps { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.cv-chip { font: inherit; font-size: var(--fs-16); padding: 6px 12px; border: 2px solid var(--line); background: var(--card-2); color: var(--ink); cursor: pointer; }
.cv-chip.on { border-color: var(--edge); background: var(--sun); font-weight: 700; }
.cv-chip:disabled { opacity: .45; cursor: default; }
.cv-out { display: flex; flex-direction: column; gap: var(--sp-8); position: sticky; top: var(--sp-16); }
.cv-cap { font-size: var(--fs-14); color: var(--muted); }
.cover-big { width: 240px; border: var(--edge-w) solid var(--edge); }
.cover-big.gcover-h { width: 100%; }
.cover-steam { width: 100%; max-width: 180px; }
.cv-brief { background: var(--card-2); border: 1px solid var(--line); padding: var(--sp-8) var(--sp-16); margin: 0 0 var(--sp-16); font-size: var(--fs-16); line-height: 1.5; }
.fp-sum .primary:disabled { opacity: .5; cursor: default; box-shadow: none; } /* «Решено» до выбора во всех строках (#77) */

/* влияние прессы на продажи (#78): по каждому изданию и итог */
.rev-eff { margin-top: auto; padding-top: var(--sp-8);  /* влияние прижато к низу — на одном уровне во всех карточках (#104) */ font-weight: 700; font-size: var(--fs-16); color: var(--muted); }
.rev-eff.pos, .rev-total.pos { color: var(--plus); }
.rev-eff.neg, .rev-total.neg { color: var(--minus); }
.rev-total { font-weight: 800; font-size: var(--fs-18); margin: var(--sp-16) 0; }

/* светофор плиток (#87, #88): полоски и деньги — красный / жёлтый / зелёный по значению; число и слова остаются */
.stat .bar.bar-bad i { background: var(--minus); }
.stat .bar.bar-warn i { background: var(--warn-bar); }
.stat .bar.bar-ok i { background: var(--plus); }
.verdict.warn { color: var(--warn); background: var(--warn-soft); }
.money-tile .v.money-bad, .money-sub.money-bad { color: var(--minus); }
.money-tile .v.money-warn, .money-sub.money-warn { color: var(--warn); }
.money-tile .v.money-ok, .money-sub.money-ok { color: var(--plus); }

/* анимация изменившихся плиток (#85, #148): число докручивается, рядом с ним всплывает крупная дельта и держится ~2 с; без вспышки рамки */
.stat { position: relative; }
.tile-pop { position: absolute; font-size: var(--fs-18); font-weight: 800; padding: 0 var(--sp-8); border: 2px solid currentColor; background: var(--card); pointer-events: none; white-space: nowrap; animation: tile-pop 2.2s ease-out forwards; }
.tile-pop.pos { color: var(--plus); background: var(--plus-soft); }
.tile-pop.neg { color: var(--minus); background: var(--minus-soft); }
@keyframes tile-pop { 0% { opacity: 0; transform: translateY(6px) scale(.9); } 10% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .tile-pop { animation: none; display: none; } }
/* смена зоны (#418, пачки c3–c4): рамка цвета зоны и ярлык до конца хода; в момент перехода и при наведении — движение
   «с характером»: красная вздрагивает, жёлтая покачивается, зелёная подпрыгивает; ярлык «выпрыгивает» */
.stat.zmark.z-bad { border-color: var(--minus); box-shadow: 0 0 0 3px var(--minus-soft), var(--px-shadow); }
.stat.zmark.z-warn { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft), var(--px-shadow); }
.stat.zmark.z-ok { border-color: var(--plus); box-shadow: 0 0 0 3px var(--plus-soft), var(--px-shadow); }
.zone-tag { position: absolute; top: -12px; right: var(--sp-8); padding: 2px var(--sp-8); color: var(--on-color); font: 800 var(--fs-12)/1.3 var(--font); white-space: nowrap; pointer-events: none; }
.stat.z-bad > .zone-tag { background: var(--minus); } .stat.z-warn > .zone-tag { background: var(--warn); } .stat.z-ok > .zone-tag { background: var(--plus); }
@keyframes zone-shake { 0%, 100% { transform: none; } 15% { transform: translateX(-5px); } 30% { transform: translateX(5px); } 45% { transform: translateX(-4px); } 60% { transform: translateX(3px); } 75% { transform: translateX(-1px); } }
@keyframes zone-sway { 0%, 100% { transform: none; } 30% { transform: rotate(-1.5deg); } 65% { transform: rotate(1.5deg); } }
@keyframes zone-hop { 0%, 100% { transform: none; } 35% { transform: translateY(-10px); } 60% { transform: none; } 78% { transform: translateY(-4px); } }
@keyframes zone-tag-pop { 0% { opacity: 0; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: none; } }
.stat.zplay.z-bad { animation: zone-shake .5s ease-out; } .stat.zplay.z-warn { animation: zone-sway .7s ease-in-out; } .stat.zplay.z-ok { animation: zone-hop .7s ease-out; }
.stat.zplay > .zone-tag { animation: zone-tag-pop .45s ease-out .1s both; }
@media (prefers-reduced-motion: reduce) { .stat.zplay, .stat.zplay > .zone-tag { animation: none; } }

/* Bridge в браузере ноутбука на столе (#86): тот же ноутбук, что у таблицы, — постоянный размер, страница прокручивается внутри */
.desk-laptop { margin: 0 auto; }
.br-browser { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--bridge-bg); }
.br-urlbar { flex: none; display: flex; align-items: center; gap: var(--sp-16); padding: 6px var(--sp-16); background: var(--surface-2); border-bottom: 1px solid var(--bridge-line); font-size: var(--fs-14); color: var(--bridge-muted); }
.br-url { flex: 1; background: var(--bridge-panel); border: 1px solid var(--bridge-line); border-radius: 99px; padding: 2px var(--sp-16); color: var(--bridge-ink); }
a.br-url { text-decoration: underline; }
.br-open { flex: none; border: 1px solid var(--bridge-line); border-radius: 99px; padding: 2px var(--sp-16); color: var(--bridge-ink); background: var(--bridge-panel); text-decoration: none; }
.br-logo-link { display: inline-flex; cursor: pointer; }  /* логотип на «О Bridge» — ссылка на настоящий сайт (автор) */
.br-open:hover, a.br-url:hover { border-color: var(--bridge-ink); }  /* ссылка на настоящий Bridge (пачка d26e) */
.br-page { flex: 1; min-height: 0; overflow: auto; padding: var(--sp-16) var(--sp-24); font-family: "Poppins", var(--font); color: var(--bridge-ink); }
.br-site-page { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-16); }
.br-site-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16); flex-wrap: wrap; }
.br-about-h { font: 600 var(--fs-24) "Poppins", var(--font); }
.br-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: stretch; }
.br-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-16); }
.br-steps li { display: grid; grid-template-columns: 28px 36px 1fr; gap: var(--sp-8); align-items: start; font-family: var(--font); font-size: var(--fs-16); line-height: 1.45; }
.br-step-no { font: 600 var(--fs-18) "Poppins", var(--font); color: var(--bridge-accent); }
.br-steps img { width: 36px; height: 36px; object-fit: contain; }
.br-about .br-btn { align-self: flex-start; margin-top: auto; }

/* горизонтальная капсула (#114): собирается в конструкторе; название слева сверху, герой справа, фичи — полосой снизу слева */
.gcover-h { aspect-ratio: 85 / 48; }
.gcover-h .cv-title { left: 4%; right: auto; width: 56%; top: 7%; text-align: left; font-size: 8cqw; }
.gcover-h .cv-usp { right: auto; width: 56%; font-size: 3.2cqw; padding: 2.5% 4%; }
.cover-wide-main { width: 100%; }

/* карточка «Деньги закончились» (#91): куда уйдут деньги и что останется — нейтральной строкой; цена варианта — красной плашкой */
.fin-summary { margin: 0; padding: var(--sp-8) var(--sp-16); background: var(--card-2); border: 1px solid var(--line); font-size: var(--fs-16); }

/* экран издателя (#96): как устроен выбор, что дальше, отказ, памятка клавиш */
/* «Звонки» без звонка (пачка 34): недавние созвоны партии */
.zoom-recent { flex: 1; background: var(--call-bg); color: var(--call-ink); display: flex; flex-direction: column; }
.zr-head { padding: var(--sp-16) var(--sp-16) var(--sp-8); color: var(--call-muted); font-size: var(--fs-14); }
.zr-row { display: flex; justify-content: space-between; gap: var(--sp-16); margin: 0 var(--sp-16); padding: var(--sp-8) 0; border-top: 1px solid var(--call-tile); }
.zr-what, .zr-date { color: var(--call-muted); }
.zr-date { white-space: nowrap; }
.zoom-recent .vc-live::before { background: var(--call-muted); }
/* отказ (#365, #405): бланк приглушён, поверх — синяя печать PASSED (автор: не красным — красный читается как угроза) */
.term-sheet { position: relative; }
.ts-stamp { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%) rotate(-12deg); padding: 4px 22px; border: 5px double currentColor; border-radius: 8px; color: var(--accent); font: 800 var(--fs-40)/1 var(--font); letter-spacing: .14em; text-transform: uppercase; pointer-events: none; }
.term-sheet .sign:not(.signed) { outline: var(--edge-w) solid var(--sun); outline-offset: 2px; }

/* начало партии (#94): строка «Люди против ИИ» на первом экране и письмо рекрутера с целью */
.intro-letter .email-body p { margin: 0 0 var(--sp-8); }
.intro-goals, .intro-steps { margin: 0 0 var(--sp-8); padding-left: var(--sp-24); display: flex; flex-direction: column; gap: var(--sp-4); }

/* всё решено (#98): кнопка хода обведена цветом выбора и один раз «подпрыгивает» */
.next .primary.go-ready { outline: var(--edge-w) solid var(--sun); outline-offset: 3px; }  /* снаружи ступеньки: тень не закрывает низ кольца (#112) */
.next .primary.go-pop { animation: go-pop .9s ease-out 1; }
@keyframes go-pop { 0% { transform: translateY(0) scale(1); } 25% { transform: translateY(-8px) scale(1.06); } 45% { transform: translateY(0) scale(1); } 65% { transform: translateY(-4px) scale(1.03); } 100% { transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .next .primary.go-pop { animation: none; } }

/* карточки ряда — одной высоты (#100): ряд тянется по самой высокой; переписка в чате заполняет остаток и прокручивается внутри */
.events > .card.chat { display: flex; flex-direction: column; }
.events > .card.chat .chat-log { flex: 1; min-height: 0; max-height: 520px; overflow-y: auto; }

/* шкала месяцев партии в шапке (#99, #102, #110): клетка — месяц; над полосой — флажки с подписью точно над своей клеткой */
.mt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mt-flags { position: relative; height: 36px; }
.mt-flags.rows2 { height: 62px; }
/* флажок (#117): подпись сверху, под ней видна ножка до самой клетки; клетка метки обведена цветом флажка */
.mt-flag { position: absolute; bottom: 0; width: 3px; background: var(--on-wall); transform: translateX(-50%); }
.mt-flag.row0 { height: 36px; z-index: 2; }
.mt-flag.row1 { height: 62px; z-index: 1; }
.mt-flag-text { position: absolute; bottom: 12px; left: 0; transform: translateX(-50%); white-space: nowrap; padding: 1px 6px; font-size: var(--fs-14); font-weight: 700; background: var(--wall-2); color: var(--on-wall); border: 1px solid var(--wall-edge); }
.mt-flag.row1 .mt-flag-text { bottom: 38px; }
.mt-flag.edge-l .mt-flag-text { transform: none; left: -1px; }
.mt-flag.edge-r .mt-flag-text { transform: translateX(-100%); left: 2px; }
.mt-flag.now { background: var(--sun); }
.mt-flag.now .mt-flag-text { background: var(--sun); color: var(--ink); border-color: var(--sun); }
.mt-flag.end { background: var(--release); }
.mt-flag.end .mt-flag-text { background: var(--release); color: var(--on-color); border-color: var(--release); }
.mt-cell.mark-release { border-color: var(--on-wall); }
.mt-cell.mark-end { border-color: var(--release); }
.mt-bar { display: flex; gap: 2px; height: 18px; }
.mt-cell { flex: 1; min-width: 0; background: var(--wall-2); border: 2px solid var(--wall-edge); }
.mt-cell.dev.done { background: var(--dev); }
.mt-cell.post.done { background: var(--release); }
.mt-cell.now { background: var(--card); border-color: var(--sun); }
.mt-cell.flash { animation: tl-flash 1.6s ease-out; }


/* финишная прямая (#103): почему не успеваем, крупный процент строки, аутсорс без денег */
.fp-why { margin: 0; font-size: var(--fs-18); font-style: italic; }
.fp-closes { font-size: var(--fs-18); margin-left: var(--sp-8); }
.fp-short { color: var(--minus); font-weight: 700; }
.seg button:disabled { color: var(--muted); background: var(--surface-2); cursor: not-allowed; text-decoration: line-through; }

/* финал (#106): откуда деньги на счету и из чего «Ты заработал» */
.ladder .kv b { text-align: right; font-variant-numeric: tabular-nums; }
.ladder .kv b.pos { color: var(--plus); }
.ladder .kv b.neg { color: var(--minus); }
.ladder .ladder-total { border-top: 2px solid var(--edge); padding-top: var(--sp-4); font-weight: 800; color: var(--ink); }

/* рейтинг моделей и людей (#107): простые горизонтальные полосы, лучший сверху; люди — основным синим, модели — цветом ИИ */
.rk-h { font-size: var(--fs-18); margin: 0 0 var(--sp-8); }
.rk { display: flex; flex-direction: column; gap: 6px; }
.rk-row { display: grid; grid-template-columns: 24px 170px 1fr 104px; gap: var(--sp-8); align-items: center; font-size: var(--fs-16); }
.rk-place { font-weight: 800; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.rk-name { white-space: nowrap; display: flex; flex-direction: column; line-height: 1.2; }
.rk-games { font-size: var(--fs-12); color: var(--muted); font-weight: 400; }
.bench-boards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
.bench-chart.bench-scatter { max-width: none; }
.bench-note { color: var(--muted); font-size: var(--fs-14); margin: 0 0 var(--sp-8); }
.bench-scatter .bh-grid { stroke: var(--line); }
.bench-scatter .sc-lbl { fill: var(--ink); font-size: 14px; font-weight: 600; }
.bench-scatter .sc-pt.human .sc-lbl { font-weight: 800; }
.bench-scatter circle { stroke: var(--card); stroke-width: 2; }
.bench-scatter .sc-ylbl { text-anchor: middle; }
.rk-row.human .rk-name { font-weight: 800; }
.rk-track { height: 16px; background: var(--track); }
.rk-track i { display: block; height: 100%; background: var(--marketing); }
.rk-row.human .rk-track i { background: var(--accent); }
.rk-v { text-align: right; font-variant-numeric: tabular-nums; }

/* страница Steam (#115): под главной капсулой — полоса «скриншотов», чтобы слева не было пустоты */
.ss-left { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ss-shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ss-shot { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; background: var(--steam-bar); border: 1px solid var(--steam-edge); }

/* плитки с полоской (#119): над полоской — постоянное место (заголовок, значение до двух строк, строка изменения),
   поэтому полоски готовности, качества и морали всегда на одной высоте */
.stat-top { min-height: 98px; }

/* маркетинг из бюджета издателя (#123): не деньги студии — нейтральной плашкой цвета маркетинга, не статусом */
.cost.mkt, .d.mkt { background: var(--card-2); color: var(--marketing); border: 1px solid var(--marketing); }

/* окно Steam (#131): записка от CMO — на столе справа от окна, бумага игры, ничего не закрывает */
.ss-wrap { display: flex; align-items: flex-start; gap: var(--sp-16); max-width: 1180px; width: 100%; max-height: 100%; justify-content: center; }
.ss-wrap > .modal-box { flex: 1 1 auto; min-width: 0; }
.ss-note { flex: none; width: 230px; margin-top: var(--sp-24); background: var(--card); color: var(--ink); border: var(--edge-w) solid var(--edge); box-shadow: var(--px-shadow); padding: var(--sp-8) var(--sp-16); font-size: var(--fs-16); line-height: 1.45; }
.ss-note::before { content: ''; display: block; width: 14px; height: 14px; background: var(--pin); margin: -18px auto 6px; }
.ss-note-from { font-weight: 800; margin-bottom: 4px; }

/* финал (#132): без «За кулисами» и «Хроники» — «Подробные цифры» шире и по центру, пары «что — сколько» в две колонки */
.final-details { margin: 0 0 var(--sp-24); }
/* #161: подписка и «откуда деньги» — на той же сетке, что итог и правая колонка */
.final-ladders { display: grid; grid-template-columns: 560px minmax(0, 1fr); gap: var(--sp-24); align-items: start; margin-bottom: var(--sp-24); }

/* ---------- рабочий стол продюсера (#153): ярлыки как на рабочем столе Mac — значок и подпись, лежат на «столе» слева ---------- */
.desk { position: absolute; z-index: 20; top: 150px; left: max(var(--sp-16), calc(50% - 710px - 180px)); width: 120px; display: flex; flex-direction: column; gap: var(--sp-16); }  /* левее ряда карточек хода (до 1420px, #39); не закреплена — уезжает со страницей */
/* с рабочим столом ряд карточек оставляет слева и справа место под колонку ярлыков */
body.has-desk .events { width: 1420px; }
.desk-apps { display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); }
.desk-app { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 110px; background: transparent; border: 0; border-radius: 6px; padding: 6px 4px; color: var(--on-color); }
.desk-app:hover, .desk-app:focus-visible { background: var(--desk-hover); }
.desk-ic { position: relative; flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 12px; box-shadow: 0 2px 4px var(--desk-label-shadow); }
.desk-name { font-size: var(--fs-12); font-weight: 600; line-height: 1.25; text-align: center; text-shadow: 0 1px 2px var(--desk-label-shadow); }
.desk-mail .desk-ic { background: var(--app-mail); }
.desk-chat .desk-ic { background: linear-gradient(135deg, var(--app-chat-a), var(--app-chat-b)); }
.desk-sheet .desk-ic { background: var(--xl); }
.desk-pitch .desk-ic { background: var(--pdf); }
.desk-pdf { color: var(--on-color); font: 800 var(--fs-14)/1 var(--font); letter-spacing: .04em; }
.desk-calendar .desk-ic { background: var(--on-color); }
.desk-cal { display: flex; flex-direction: column; width: 40px; text-align: center; }
.desk-cal b { background: var(--badge); color: var(--on-color); font-size: var(--fs-12); line-height: 14px; border-radius: 4px 4px 0 0; }
.desk-cal i { font: 800 var(--fs-24)/28px var(--font); font-style: normal; color: var(--ink); }
.desk-badge { position: absolute; top: -6px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--badge); color: var(--on-color); font-size: var(--fs-12); line-height: 16px; text-align: center; border: 2px solid var(--on-color); }
.app { display: flex; flex-direction: column; height: 100%; background: var(--surface); color: var(--ink); }
.app-split { display: grid; grid-template-columns: 300px minmax(0, 1fr); flex: 1; min-height: 0; }
.app-list { border-right: 1px solid var(--line); overflow-y: auto; }
.app-row { display: grid; width: 100%; text-align: left; gap: 2px; padding: var(--sp-8) var(--sp-16); background: transparent; border: 0; border-bottom: 1px solid var(--line); font-size: var(--fs-14); color: var(--ink); }
.app-row span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-row i { color: var(--muted); font-style: normal; font-size: var(--fs-12); }
.app-row.on { background: var(--surface-2); }
.app-row.unread b::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: 1px; }
.app-view { overflow-y: auto; padding: var(--sp-16); }
.app-view .notice.email { box-shadow: none; }
.app-empty { padding: var(--sp-16); color: var(--muted); }
/* календарь (#154): текущий месяц сеткой 4 × 7 без чисел; число и событие — только у отмеченных дней */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto repeat(4, minmax(0, 1fr)); gap: 4px; flex: 1; min-height: 0; }  /* сетка до низа ноутбука (автор) */
.calapp .app-view { display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; box-sizing: border-box; }
.cal-wd { font-size: var(--fs-12); font-weight: 700; color: var(--muted); text-align: center; padding-bottom: 4px; }
.cal-day { min-height: 88px; border: 1px solid var(--line); background: var(--card-2); padding: 4px 6px; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-12); line-height: 1.3; }
.cal-day.on { background: var(--card); border: 2px solid var(--edge); }
/* месяц звонков (#399): по одной встрече с каждым — издатели, ангелы, фонды; после звонка — «прошла» / «отменилась» */
.cal-month { grid-template-rows: auto repeat(4, minmax(0, 1fr)); }
.cm-day { min-height: 0; overflow: hidden; }
.cal-busy .cm-call { height: 16px; min-height: 16px; display: flex; align-items: center; padding-left: 4px; }  /* месяц звонков: встреча — полоска с ☎ (пачка d26l) */
.cal-day.on .cal-busy .cm-call { position: static; margin-top: 3px; }  /* в дне с подписью места мало — полоски друг под другом, не по времени: не наползают */
.cal-busy .cm-call em { font-style: normal; font-size: var(--fs-12); line-height: 1; color: var(--on-color); }
.cal-busy i.cm-off, .cm-swatch { background: repeating-linear-gradient(135deg, var(--muted) 0 2px, var(--card-2) 2px 5px); box-shadow: inset 0 0 0 1px var(--line); }  /* отменилась — штриховкой (i.cm-off — сильнее цвета .cbN ниже) */
.cm-swatch { display: inline-block; width: 22px; height: 10px; margin-right: 6px; vertical-align: middle; border-radius: 2px; }
.cm-legend { margin-left: var(--sp-16); font-size: var(--fs-12); font-weight: 600; color: var(--muted); }
.cm-next { justify-content: flex-start; margin-top: var(--sp-16); }
.cal-day b { font-size: var(--fs-14); }
.cal-day span { overflow-wrap: anywhere; }
.cal-day i { font-style: normal; margin-right: 3px; color: var(--muted); }
.cal-mile b { color: var(--badge); }
.cal-rival i { color: var(--marketing); }
.cal-game i { color: var(--quiz); }
.cal-bday i { color: var(--badge); }
/* под шкалой месяцев (#149): старт партии слева, скобка «год продаж · LiveOps» над месяцами после релиза */
.mt-under { position: relative; height: 18px; margin-top: 3px; font-size: var(--fs-12); color: var(--on-bar-muted); }
.mt-start { position: absolute; left: 0; top: 2px; }
.mt-post { position: absolute; right: 0; top: 0; display: flex; justify-content: space-between; gap: var(--sp-8); padding: 2px var(--sp-4) 0; border: 2px solid var(--release); border-bottom: 0; color: var(--on-bar); white-space: nowrap; }
.share-note { margin: 0; color: var(--on-wood-muted); font-size: var(--fs-14); white-space: pre-line; }
/* таблица скачана из письма бухгалтера — ярлык появляется на столе (#153) */
.desk-new { animation: desk-new .7s ease-out 1; }
@keyframes desk-new { 0% { opacity: 0; transform: translateY(-24px) scale(.6); } 60% { opacity: 1; transform: translateY(4px) scale(1.08); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .desk-new { animation: none; } }
/* вложение в письме: файл и «Скачать» */
.mail-att { display: flex; align-items: center; gap: var(--sp-8); margin-top: var(--sp-16); padding: var(--sp-8) var(--sp-16); border: 1px solid var(--line); background: var(--surface-2); font-size: var(--fs-14); }
.mail-att .primary { margin-left: auto; padding: 6px 16px; font-size: var(--fs-14); }
.mail-att-done { margin-left: auto; color: var(--muted); }
.mail-att + .mail-att { margin-top: var(--sp-8); }
.pdf-ic { display: inline-flex; height: 18px; padding: 0 4px; align-items: center; background: var(--pdf); color: var(--on-color); border-radius: 3px; font-size: var(--fs-12); font-weight: 800; }
/* окно просмотра «pitch.pdf» (#414): тёмная полоса просмотрщика и одна страница; закрыть — Esc, крестик или клик мимо */
.pdf-view { width: 760px; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; background: var(--pdf-viewer); box-shadow: var(--shadow); }
.pdf-bar { display: flex; align-items: center; gap: var(--sp-8); padding: var(--sp-8) var(--sp-16); background: var(--pdf-bar); color: var(--on-color); font-size: var(--fs-14); }
.pdf-pages { margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-8); }
.pdf-close { background: transparent; border: 0; color: var(--on-color); font-size: var(--fs-24); line-height: 1; padding: 0 var(--sp-4); }
/* метка у вырезанной фичи (#414, пачка c6): серая, как статус в трекере задач, шрифтом игры — не рукописная */
.pdf-note { display: inline-block; margin-left: var(--sp-8); padding: 0 var(--sp-8); background: var(--track); color: var(--muted); font: 700 var(--fs-12)/1.6 var(--font); border-radius: 3px; vertical-align: middle; }
/* pitch.pdf — три слайда 16:9 (решение автора 01.11): миниатюры слева, слайд справа; цвет жанра — полоса слева и подписи (--pd-genre) */
.pdf-deck { width: 940px; --pd-genre: var(--muted); }
/* на ноутбуке (#426): «Просмотр» во весь экран, миниатюры слева, слайд занимает остальное (масштаб — fitPitch) */
.laptop-view > .pdf-view { width: 100%; max-width: none; max-height: none; flex: 1; min-height: 0; box-shadow: none; }
.laptop-view > .pdf-view .pdf-deck-body { flex: 1; min-height: 0; overflow: hidden; align-items: stretch; padding: var(--sp-16); }
.laptop-view > .pdf-view .pdf-thumbs { align-content: start; overflow-y: auto; }
.laptop-view > .pdf-view .pdf-slides { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pdf-no { opacity: .7; font-variant-numeric: tabular-nums; }
.pdf-nav { display: inline-flex; align-items: center; gap: var(--sp-4); background: transparent; border: 1px solid var(--muted); color: var(--on-color); font: inherit; padding: 1px var(--sp-8); cursor: pointer; }
.pdf-nav .key-cap { margin: 0; height: 18px; padding: 0 5px; }
.pdf-nav:disabled { opacity: .35; cursor: default; }
.pdf-deck-body { display: flex; gap: var(--sp-16); padding: var(--sp-24); overflow: auto; align-items: flex-start; }
.pdf-thumbs { display: grid; gap: var(--sp-8); flex: none; }
.pdf-thumb { width: 132px; height: 75px; padding: 0; border: 0; background: var(--surface); overflow: hidden; cursor: pointer; outline: 2px solid transparent; outline-offset: 2px; }
.pdf-thumb.on { outline-color: var(--sun); }
.pdf-thumb-in { display: block; zoom: .1834;  /* 132 / 720 */ pointer-events: none; }
.pd-slide { position: relative; width: 720px; height: 405px; box-sizing: border-box; padding: var(--sp-24) var(--sp-24) 40px 40px; background: var(--surface); color: var(--ink); overflow: hidden; box-shadow: var(--shadow); border-left: 10px solid var(--pd-genre); font-size: var(--fs-14); }
.pdf-thumb .pd-slide { box-shadow: none; }
.pd-kicker { font: 800 var(--fs-12)/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--pd-genre); }
.pd-h { margin: var(--sp-4) 0 var(--sp-16); font: 700 var(--fs-32)/1 var(--font-px); }
.pd-foot { position: absolute; left: 40px; right: var(--sp-24); bottom: 12px; display: flex; justify-content: space-between; font-size: var(--fs-12); color: var(--muted); }
.pd-s1 { display: flex; align-items: center; gap: var(--sp-24); }
.pd-c1 { flex: 1; min-width: 0; }
.pd-title { margin: var(--sp-4) 0 var(--sp-8); font: 700 56px/.95 var(--font-px); word-break: break-word; }
.pd-line { margin: 0; color: var(--muted); font-size: var(--fs-16); line-height: 1.4; }
.pd-sketch { position: relative; width: 330px; flex: none; aspect-ratio: 85 / 48; background: var(--surface) repeating-linear-gradient(0deg, var(--pdf-grid) 0 1px, transparent 1px 12px), repeating-linear-gradient(90deg, var(--pdf-grid) 0 1px, transparent 1px 12px); }
.pd-sketch .px-art { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; filter: url(#pd-pencil); mix-blend-mode: multiply; opacity: .8; }
.pd-defs { position: absolute; width: 0; height: 0; }
.pd-sticky { position: absolute; right: -8px; top: -10px; background: var(--sticky); color: var(--ink); font-size: var(--fs-12); padding: 3px var(--sp-8); transform: rotate(4deg); box-shadow: var(--shadow); }
.pd-row { display: flex; gap: var(--sp-24); align-items: flex-start; }
.pd-col { flex: 1; min-width: 0; display: grid; gap: var(--sp-8); }
.pd-mini { font: 800 var(--fs-12)/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--pd-genre); }
.pd-comps { display: flex; align-items: center; gap: var(--sp-8); flex: none; padding-top: var(--sp-8); }
.pd-comps > b { font: 700 var(--fs-32)/1 var(--font-px); color: var(--pd-genre); }
.pd-box { width: 120px; height: 160px; display: grid; place-items: center; text-align: center; padding: var(--sp-8); box-sizing: border-box; border: 2px solid var(--ink); background: var(--surface-2); box-shadow: 4px 4px 0 var(--pd-genre); font: 700 var(--fs-16)/1.2 var(--font); }
.pd-box:first-child { transform: rotate(-3deg); } .pd-box:last-child { transform: rotate(2deg); }
.pd-mood { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.pd-mood > div { aspect-ratio: 85 / 48; overflow: hidden; }
.pd-mood .px-art { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.pd-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-4) var(--sp-8); margin: var(--sp-8) 0 0; font-size: var(--fs-14); }
.pd-dl dt { font-weight: 700; } .pd-dl dd { margin: 0; }
.pd-feats { margin: 0; padding-left: var(--sp-16); font-size: var(--fs-14); line-height: 1.45; }
.pd-feats .cut s { color: var(--muted); }
.pd-gantt { display: grid; grid-template-columns: max-content 1fr; gap: 3px var(--sp-8); align-items: center; font-size: var(--fs-12); }
.pd-gantt > i { position: relative; height: 10px; background: var(--surface-2); }
.pd-gantt > i > b { position: absolute; top: 0; bottom: 0; background: var(--pd-genre); }
.pd-gantt > i > u { position: absolute; top: -1px; width: 10px; height: 10px; margin-left: -5px; background: var(--sun); border: 1px solid var(--edge); transform: rotate(45deg); }
.pd-axis { grid-column: 2; display: flex; justify-content: space-between; color: var(--muted); font-size: var(--fs-12); }
.pd-team { display: flex; gap: var(--sp-8); flex-wrap: wrap; }
.pd-team > div { width: 64px; text-align: center; font-size: var(--fs-12); line-height: 1.2; display: grid; justify-items: center; }
.pd-team svg, .pd-team img { width: 40px; height: 40px; image-rendering: pixelated; }
.pd-team span { color: var(--muted); }
.pd-ask { font-size: var(--fs-14); }

.sheet td.proj-v { white-space: normal; }
/* новое письмо (#153, решение автора): ярлык Почты с кружком коротко трясётся, как значок на телефоне; уведомлений в углу нет */
.desk-shake .desk-ic { animation: desk-shake .9s ease-in-out 2; }
@keyframes desk-shake { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-9deg); } 30% { transform: rotate(8deg); } 45% { transform: rotate(-6deg); } 60% { transform: rotate(5deg); } 75% { transform: rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .desk-shake .desk-ic { animation: none; } }
/* ответ на вопрос — в этом приложении (#416): ярлык подпрыгивает, пока вопрос без ответа */
.desk-ask .desk-ic { animation: desk-hop 1.4s ease-in-out infinite; }
@keyframes desk-hop { 0%, 55%, 100% { transform: translateY(0); } 20% { transform: translateY(-7px); } 35% { transform: translateY(0); } 45% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .desk-ask .desk-ic { animation: none; } }
.next-note { flex-basis: 100%; margin: var(--sp-8) 0 0; text-align: center; color: var(--on-wood); font-size: var(--fs-16); font-weight: 700; }
/* решения хода в приложениях — не карточками (автор): письмо с вариантами ответа под текстом, переписка — окно мессенджера */
.email-replies { display: flex; flex-direction: column; gap: var(--sp-8); margin-top: var(--sp-16); }
/* Мессенджер (автор: «превратить, а не перенести»): правая часть — само окно переписки на всю высоту — шапка собеседника,
   лента сообщений в точку, варианты ответа внизу, как подсказки над полем ввода; без рамки, скругления и тени */
.chatapp .app-view { padding: 0; display: flex; flex-direction: column; }
.chatapp .app-view > [data-slotview] { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chatapp .chat.msgr { flex: 1; display: flex; flex-direction: column; gap: 0; padding: 0; min-height: 100%; border: 0; border-radius: 0; box-shadow: none; max-width: none; background: var(--msg-head); color: var(--msg-ink); }
.chatapp .chat.msgr .chat-log { flex: 1; }
.chatapp .chat.msgr .chat-replies { position: sticky; bottom: 0; border-top: 1px solid var(--msg-line-soft); }
.chatapp .chat.msgr .chat-head { position: sticky; top: 0; z-index: 1; }
/* записка CMO у окна Steam (автор): прилетает и прикалывается к столу, потом покачивается и подсвечивается — чтобы её точно заметили */
.ss-note { transform-origin: 50% 0; animation: note-in .7s .5s both cubic-bezier(.2, .9, .3, 1.3), note-swing 1.6s 1.2s 2 ease-in-out, note-glow 1.2s 1.2s 3; }
@keyframes note-in { 0% { opacity: 0; transform: translate(60px, -40px) rotate(14deg) scale(.7); } 100% { opacity: 1; transform: rotate(-2deg); } }
@keyframes note-swing { 0%, 100% { transform: rotate(-2deg); } 30% { transform: rotate(3deg); } 60% { transform: rotate(-4deg); } }
@keyframes note-glow { 0%, 100% { box-shadow: var(--px-shadow); } 50% { box-shadow: 0 0 0 6px var(--sun), var(--px-shadow); } }
@media (prefers-reduced-motion: reduce) { .ss-note { animation: none; transform: rotate(-2deg); } }
/* Звонки (автор: «ярлык типа Zoom»): синий ярлык с камерой; окно звонка — как созвон с издателем, на всю правую часть приложения */
.desk-zoom .desk-ic { background: var(--app-zoom); }
.zoomapp .app-view { padding: 0; display: flex; flex-direction: column; }
.zoomapp .vcall { flex: 1; height: auto; min-height: 100%; border: 0; }
.zoom-stage { height: auto; padding-top: 0; margin: var(--sp-8); }
.vc-photo { align-items: center; }
.vc-photo > :first-child { height: 92%; width: auto; image-rendering: pixelated; }
.vc-more { flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--call-muted); font-size: var(--fs-14); }
.vc-more b { font-size: var(--fs-24); color: var(--call-ink); }
.muted-chat { font-weight: 400; color: var(--muted); }  /* чат команды на беззвучном (автор): уведомления только когда спрашивают тебя */
/* занятые слоты звонков в Календаре (автор: «у продюсера постоянно много звонков») — серые полоски без названий, внизу дня */
.cal-busy { position: relative; flex: 1; min-height: 0; margin-top: 4px; }  /* шкала дня 7:30–20:30 */
.cal-busy i { position: absolute; left: 2px; right: 2px; min-height: 7px; border-radius: 3px; }
.cal-busy .cb0 { background: var(--app-zoom); } .cal-busy .cb1 { background: var(--app-chat-a); } .cal-busy .cb2 { background: var(--marketing); } .cal-busy .cb3 { background: var(--quiz); }
/* лица в списках Почты, Мессенджера и Звонков (#157, автор): портрет слева от строки, у организаций — буква */
.app-row:has(.row-ava) { grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; }
.app-row > .row-ava { grid-row: 1 / span 3; width: 34px; height: 34px; align-self: start; }
.app-row:has(.row-ava) > :not(.row-ava) { grid-column: 2; }
/* вложение ждёт скачивания (автор: сразу понятно, чего от нас хотят): рамка вложения пульсирует цветом выбора, стрелка в кнопке «прыгает» вниз */
.mail-att.waiting { border-color: var(--sun); box-shadow: 0 0 0 3px var(--sun); }
.att-dl { display: inline-flex; align-items: center; gap: var(--sp-8); }
.att-dl .opt-no { margin-right: 0; }  /* отступ — gap кнопки */
.dl-arrow { display: inline-block; font-weight: 800; animation: dl-bob 1s ease-in-out infinite; }
@keyframes dl-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .dl-arrow { animation: none; } }
/* БЛИК — общий приём «сделай это» (автор: базовый для подобных случаев): одна широкая полоса света проходит по элементу
   (или сразу по группе кнопок), пока игрок не сделал первое действие; снимается вместе с классом. Применение: варианты ответа
   на созвонах с издателями до первого ответа, «Скачать» у вложения в письме. reduced-motion — без блика */
.cta-shine { position: relative; overflow: hidden; isolation: isolate; }
.cta-shine::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent 30%, var(--shine) 50%, transparent 70%); transform: translateX(-120%); animation: cta-shine 2.6s ease-in-out infinite; }
@keyframes cta-shine { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .cta-shine::after { animation: none; display: none; } }
/* письмо в Почте — сама область чтения, а не окно в окне (баг, автор): без рамки окна и «светофора» */
.mailapp .email-chrome { display: none; }
.mailapp .notice.email { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.mac-close { margin-left: var(--sp-8); }  /* вид крестика — общий, ниже: .mac-close, .sheet-close, … */
.cal-title { margin: 0 0 var(--sp-8); font-size: var(--fs-16); }
.cal-day.on .cal-busy i { min-height: 3px; }  /* в дне с событием места меньше — встречи тоньше, но не наползают друг на друга */
.tc-row { display: flex; align-items: flex-start; gap: var(--sp-8); }
.tc-row > .bubble { min-width: 0; }
.tc-ava { flex: none; width: 24px; height: 24px; border-radius: 4px; overflow: hidden; margin-top: 2px; }
.tc-ava .px-art { width: 100%; height: 100%; }
.tc-fill.cb0 { background: var(--app-zoom); } .tc-fill.cb1 { background: var(--app-chat-a); } .tc-fill.cb2 { background: var(--marketing); } .tc-fill.cb3 { background: var(--quiz); }
/* точка непрочитанного (автор): чуть крупнее и переливается — по ней проходит блик; reduced-motion — просто точка */
.app-row.unread b::before, .email-unread { width: 11px; height: 11px; background: linear-gradient(110deg, var(--mail-blue) 35%, var(--shine) 50%, var(--mail-blue) 65%) 0 0 / 300% 100%; animation: dot-shine 2.2s linear infinite; }
.app-row.unread b::before { vertical-align: 0; }
@keyframes dot-shine { from { background-position: 100% 0; } to { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .app-row.unread b::before, .email-unread { animation: none; background: var(--mail-blue); } }
/* блик без обрезки (для элементов, из которых что-то выходит за край — поле подписи): полоса света бежит по фону, а не поверх */
.cta-glint { background-image: linear-gradient(105deg, transparent 35%, var(--shine) 50%, transparent 65%); background-size: 300% 100%; background-repeat: no-repeat; animation: cta-glint 2.6s ease-in-out infinite; }
.sign.signed.cta-glint { animation: none; background-image: none; }
@keyframes cta-glint { 0% { background-position: 130% 0; } 55%, 100% { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) { .cta-glint { animation: none; background-image: none; } }
/* подзаголовок экрана: один блик при входе (#165, плейтест: подзаголовки не читают) */
.shine-once { position: relative; overflow: clip; overflow-clip-margin: 10px; }  /* запас: приподнятый при наведении вариант не срезается сверху (автор) */
.shine-once::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 30%, var(--shine) 50%, transparent 70%); transform: translateX(-120%); animation: cta-shine 1.6s .4s ease-in-out 1 both; }
@media (prefers-reduced-motion: reduce) { .shine-once::after { display: none; } }
/* лист питча в PDF (#166): вместо обложки, которой ещё нет */
.pdf-pitch { position: relative; width: 120px; aspect-ratio: 3 / 4; background: var(--card); border: var(--edge-w) solid var(--edge); box-shadow: var(--px-shadow); padding: 10px 8px; box-sizing: border-box; display: flex; flex-direction: column; gap: 5px; }
.pdf-pitch::after { content: ''; position: absolute; right: calc(-1 * var(--edge-w)); top: calc(-1 * var(--edge-w)); width: 20px; height: 20px; background: var(--wood); clip-path: polygon(0 0, 100% 100%, 0 100%); }
.pdf-frame { overflow: hidden; border: 1px solid var(--line); }
.pdf-frame .px-art { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.pdf-pitch > i { display: block; height: 5px; background: var(--track); }
.pdf-pitch > i:nth-of-type(2) { width: 80%; } .pdf-pitch > i:nth-of-type(3) { width: 55%; }
.pdf-pitch > b { position: absolute; left: 8px; bottom: 8px; background: var(--badge); color: var(--on-color); font: 800 var(--fs-12) var(--font); padding: 1px 5px; }
.pdf-pitch.big { width: 160px; }
.sr-foot .sr-flip { color: var(--ink); background: var(--card); }
.sr-foot .sr-flip:disabled { opacity: .5; cursor: default; }
/* хлебные крошки до начала партии (#168) */
.crumbs { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-8); font-size: var(--fs-14); color: var(--on-bar-muted); }  /* не похожи на кнопки (#172): без рамок */
.crumb { padding: 4px 2px; border-bottom: 3px solid transparent; }
.crumb.done { color: var(--on-bar); text-decoration: line-through; }  /* пройденный этап зачёркнут (автор) */
.crumb.now { color: var(--sun); border-bottom-color: var(--sun); font-weight: 700; }
.crumb.lit { animation: crumb-lit .9s ease-out 1; }
@keyframes crumb-lit { 0% { transform: scale(.8); opacity: .3; } 50% { transform: scale(1.15); opacity: 1; } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .crumb.lit { animation: none; } }
/* карта страны (#164) */
.key-legend .kl-title { display: block; font-size: var(--fs-12); letter-spacing: .08em; text-transform: uppercase; color: var(--on-wood-muted); margin-bottom: var(--sp-4); }
/* встречи в Календаре оживают под мышкой (автор: приятный эффект) */
.cal-busy i { transition: transform .15s ease-out, filter .15s ease-out, box-shadow .15s ease-out; cursor: default; }
.cal-busy i:hover { transform: translateY(-1px) scale(1.04); filter: brightness(1.15); box-shadow: 0 2px 0 var(--shade-12); z-index: 1; }
@media (prefers-reduced-motion: reduce) { .cal-busy i { transition: none; } .cal-busy i:hover { transform: none; } }
/* Кнопки отличаются от информации (#172, автор): кнопки — синие (обычный выбор, навигация), зелёные и красные — за/против;
   всё информационное не похоже на кнопку */
.ghost { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ghost:hover { filter: brightness(1.1); }
.ghost-dark { border-color: var(--accent); color: var(--accent); }
.ghost-dark:hover { background: var(--accent-soft); }
.option { border-color: var(--accent); }
.option .opt-no { border-color: var(--accent); color: var(--accent); }
.option:hover, .option:focus-visible { background: var(--accent-soft); }
.cv-chip { border-color: var(--accent); color: var(--accent); }
.cv-chip.on { color: var(--ink); }
.seg button { color: var(--accent); }
.primary.go { background: var(--act-go); }
.primary.stop { background: var(--act-stop); }
.chip { border: 0; border-radius: 0; background: transparent; padding: 0 var(--sp-8) 0 0; }
.chip::before { content: '•'; margin-right: 6px; color: var(--muted); }
/* созвоны по одному (#171): перебивка с входящим звонком, звонок на весь экран, красная трубка */
#app { --inc-h: min(calc((100vh - 380px) / var(--ui-scale)), calc(100vh / var(--ui-scale) - 420px), 700px); }  /* неделя звонков: высота ноутбука — общая для текста и ноутбука; второе ограничение — при масштабе больше 1 (текст крупнее), иначе на 1920×1080 календарь вылезал вниз */
.incoming { width: calc(var(--inc-h) * 1.54); max-width: 100%; margin: 0 auto;  /* текст — ровно по ширине ноутбука под ним, строк меньше (автор) */ display: flex; flex-direction: column; gap: var(--sp-8); color: var(--on-wood); font-size: var(--fs-18); }
.incoming p { margin: 0; }
/* ярлык «Звонки» на экране недели звонков (автор): тот же, что на рабочем столе, — значок и красный кружок с числом звонков;
   только мышкой, без цифры; трясётся без остановки, чтобы притягивать внимание, при входе по нему один раз проходит блик */
.incoming-app { position: relative; align-self: flex-start; margin-top: var(--sp-16); }
.incoming-app.desk-shake .desk-ic { animation: desk-shake .9s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .incoming-app.desk-shake .desk-ic { animation: none; } }
.hangup { display: inline-flex; align-items: center; gap: var(--sp-8); background: var(--act-stop); color: var(--on-color); border: 0; border-radius: 20px; padding: 6px 16px; font-weight: 700; }
.hangup.off { opacity: .35; padding: 6px 14px; }
/* подпись мышкой (#175): бледная карандашная «Pong72» показывает, где расписаться; рисуют синими чернилами; прогресс под полем */
.sign:not(.sign-waiting) .sign-ink { visibility: visible; color: var(--muted); opacity: .22; font-style: italic; animation: ghost-write 3.2s ease-in-out infinite; }  /* бледная подсказка: «кто-то» расписывается по кругу (автор) */
@keyframes ghost-write { 0% { clip-path: inset(-50% 100% -50% -20px); opacity: .22; } 60% { clip-path: inset(-50% -40px -50% -20px); opacity: .22; } 85% { clip-path: inset(-50% -40px -50% -20px); opacity: .22; } 100% { clip-path: inset(-50% -40px -50% -20px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sign:not(.sign-waiting) .sign-ink { animation: none; } }
.sign.drawing .sign-ink, .sign.signed .sign-ink { visibility: hidden; animation: none; }
.sign-pad { position: absolute; inset: -6px 0 -6px 0; width: 100%; height: calc(100% + 12px); cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M3 25l2-7L19 4l5 5L10 23z' fill='%23f2e6c9' stroke='%23241a12' stroke-width='2'/%3E%3Cpath d='M3 25l2-7 5 5z' fill='%23241a12'/%3E%3C/svg%3E") 3 25, crosshair;  /* ручка, а не прицел (автор) */ touch-action: none; z-index: 4; }
.sign-prog { display: inline-block; vertical-align: middle; width: 80px; height: 6px; margin: 0 var(--sp-8); background: var(--track); }
.sign-prog i { display: block; height: 100%; width: 0; background: var(--ink-sign); transition: width .1s linear; }
.sign.sign-ok .sign-prog i { background: var(--act-go); }
.sign-pct { font-variant-numeric: tabular-nums; }
/* панель звонка — значки, как в Zoom; красная трубка; камера ноутбука; батарея (#180) */
.vc-tools { align-items: center; gap: var(--sp-16); }
.vc-ic { display: inline-flex; align-items: center; gap: 4px; color: var(--call-muted); }
.vc-ic small { font-size: var(--fs-12); }
.laptop-notch i.cam-on::after { content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--act-go); margin: 1px 0 0 12px; box-shadow: 0 0 6px var(--act-go); }
.batt { display: inline-block; position: relative; width: 20px; height: 10px; border: 1.5px solid currentColor; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.batt::after { content: ''; position: absolute; right: -4px; top: 2px; width: 2px; height: 4px; background: currentColor; }
.batt i { position: absolute; left: 1px; top: 1px; bottom: 1px; width: 80%; background: currentColor; }
/* анимации внимания (#173) */
/* нажатие клавиши — заметно (автор): клавиша вдавливается, вспыхивает жёлтым ореолом, по ней проходит блик; ~0,7 с */
.opt-no.key-pressed, .key-cap.key-pressed { position: relative; overflow: hidden; animation: key-pressed .7s ease-out 1; }
.opt-no.key-pressed::after, .key-cap.key-pressed::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 25%, var(--shine) 50%, transparent 75%); transform: translateX(-120%); animation: cta-shine .7s ease-out 1; }
@keyframes key-pressed {
  0% { transform: none; }
  18% { transform: translateY(3px) scale(.9); box-shadow: none; background: var(--sun); }
  45% { transform: translateY(1px) scale(1.08); box-shadow: 0 0 0 4px var(--shine), 0 0 16px 6px var(--sun); background: var(--sun); }
  100% { transform: none; }
}
.next-note.note-shake { animation: desk-shake .9s ease-in-out 1; }
.active-card { animation: ring-glow 4s ease-out infinite; }
@keyframes ring-glow { 0%, 20%, 100% { box-shadow: 0 9px 0 var(--wood-2); } 8% { box-shadow: 0 0 0 calc(var(--edge-w) * 2 + 10px) var(--shine), 0 9px 0 var(--wood-2); } }
@media (prefers-reduced-motion: reduce) { .active-card { animation: none; } .opt-no.key-pressed, .key-cap.key-pressed, .next-note.note-shake { animation: none; } }
.active-card:not([style*="position"]) { position: relative; }
.key-legend .fs-ic { margin-right: 6px; vertical-align: -2px; }
.modal-box .fs-key { color: var(--muted); font-size: var(--fs-14); }  /* строка про F в «Играть на весь экран?» */
/* значок ⛶ на «На весь экран» дышит: уголки плавно расходятся наружу и возвращаются */
.modal-box [data-yes] .fs-ic { overflow: visible; }
.modal-box [data-yes] .fs-ic path { animation: fs-breathe 1.6s ease-in-out infinite; }
.modal-box [data-yes] .fs-ic path:nth-child(1) { --fx: -1.5px; --fy: -1.5px; }
.modal-box [data-yes] .fs-ic path:nth-child(2) { --fx: 1.5px; --fy: -1.5px; }
.modal-box [data-yes] .fs-ic path:nth-child(3) { --fx: 1.5px; --fy: 1.5px; }
.modal-box [data-yes] .fs-ic path:nth-child(4) { --fx: -1.5px; --fy: 1.5px; }
@keyframes fs-breathe { 50% { transform: translate(var(--fx), var(--fy)); } }
@media (prefers-reduced-motion: reduce) { .modal-box [data-yes] .fs-ic path { animation: none; } }
.modal-actions .fs-ic { width: 16px; height: 16px; margin-right: var(--sp-8); vertical-align: -2px; }  /* «⛶» на «На весь экран» — между цифрой и надписью (автор) */
/* Steam: крестик; письмо-отчёт с обложкой (#181) */
.steam-store { position: relative; }
.ss-close { position: absolute; right: 10px; top: 6px; z-index: 2; }
.report-cover { max-width: 420px; margin-bottom: var(--sp-8); }
.report-cover .pdf-pitch { width: 140px; }
/* карточки рубашкой вверх (#176): рубашка цветом дорожки; открытая переворачивается; полоса дорожки сверху лицевой стороны */
.card-back { align-self: stretch; flex: 0 0 var(--slot); align-items: center; justify-content: center; gap: var(--sp-8); min-height: 320px; color: var(--on-color); background: repeating-linear-gradient(45deg, var(--dev) 0 14px, color-mix(in srgb, var(--dev) 80%, var(--card)) 14px 18px); }
.card-back.marketing { background: repeating-linear-gradient(45deg, var(--marketing) 0 14px, color-mix(in srgb, var(--marketing) 80%, var(--card)) 14px 18px); }
.card-back.release { background: repeating-linear-gradient(45deg, var(--release) 0 14px, color-mix(in srgb, var(--release) 80%, var(--card)) 14px 18px); }
.card-back .cb-tag { font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: var(--fs-24); text-shadow: 0 2px 0 var(--ink); }  /* написано прямо на рубашке, без плашек (автор) */
.card-back .cb-note { font-size: var(--fs-16); font-weight: 700; text-shadow: 0 1px 0 var(--ink); }
.card.event { border-top: 6px solid var(--dev); }
.card.event.marketing { border-top-color: var(--marketing); }
.card.event.release { border-top-color: var(--release); }
.card.event.finish { border-top-color: var(--finish); }
.flip-open { animation: flip-open .55s ease-out 1; position: relative; }
.flip-open::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: var(--dev); animation: flip-cover .55s steps(1, end) 1 forwards; }
.flip-open.marketing::after { background: var(--marketing); }
.flip-open.release::after { background: var(--release); }
@keyframes flip-open { 0% { transform: perspective(1200px) rotateY(0); } 50% { transform: perspective(1200px) rotateY(90deg); } 100% { transform: none; } }
@keyframes flip-cover { 0% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .flip-open { animation: none; } .flip-open::after { display: none; } }
/* повод заглянуть (#178): ярлык мягко светится весь ход */
.sr-left { margin-left: var(--sp-8); padding: 1px 8px; border-radius: 999px; background: var(--card-2); color: var(--ink); font-size: var(--fs-14); font-weight: 700; }  /* счётчик просьб к Анне — не клавиша */
/* созвоны с издателями — в окне «Звонков» на ноутбуке, как в игре; календарь недели под входящим звонком (автор) */
#app .incoming + .laptop { margin-top: var(--sp-24); --lap-h: var(--inc-h); }  /* неделя звонков: ноутбук с календарём меньше — они тут не главные, календарь виден целиком (автор) */
.incoming a { color: var(--sun); }  /* синие ссылки на дереве не читаются (автор) */
.mt-cell.mark-release:not(.now) { background: var(--release); border-color: var(--release); }  /* ячейка релиза — уже фиолетовая, как год продаж (автор) */
.key-legend .kl-btn .key-cap { position: relative; overflow: hidden; }
.key-legend .kl-btn:hover .key-cap::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 30%, var(--shine) 50%, transparent 70%); transform: translateX(-120%); animation: cta-shine 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .key-legend .kl-btn:hover .key-cap::after { animation: none; } }
.sr-flip .dice { vertical-align: -4px; margin-left: var(--sp-4); }  /* кубик — после надписи, перед «×N» (автор) */
.key-legend .kl-hit { animation: kl-hit .9s ease-out 1; }  /* строка памятки вспыхивает при нажатии (автор) */
@keyframes kl-hit { 0%, 100% { color: inherit; } 20%, 50% { color: var(--sun); text-shadow: 0 0 8px var(--sun); } }
@media (prefers-reduced-motion: reduce) { .key-legend .kl-hit { animation: none; } }
.zoomapp > .app-view { height: 100%; }  /* без списка звонков — разговор на всё окно */
/* окна приложений (автор: А2, М-Б, П-Б) — Звонки, Мессенджер и Почта открываются окном поверх рабочего стола,
   одинаково везде: на ходу, в чате названия, на созвонах с издателями */
.laptop-view:has(> .zoomapp, > .chatapp, > .mailapp) { background: linear-gradient(160deg, var(--dev), var(--release)); align-items: center; justify-content: center; overflow: hidden; }
.laptop-view > .zoomapp, .laptop-view > .chatapp, .laptop-view > .mailapp { height: 92%; flex: none; border-radius: 10px; overflow: hidden; box-shadow: 0 18px 40px var(--overlay); }
.laptop-view > .zoomapp { width: 760px; }
.laptop-view > .chatapp { width: 900px; }
.laptop-view > .mailapp { width: 980px; }
/* Звонки А2: плитки узкой полосой 88 px, портрет по высоте плитки — больше места под разговор */
.zoomapp .zoom-stage .vc-tile { height: 88px; }  /* портреты — для атмосферы, главное — субтитры (автор): плитки низкие */
.zoomapp .vc-tile .px-art, .zoomapp .vc-tile > svg:not(.vc-sil) { height: 100%; width: auto; max-width: 100%; display: block; margin: 0 auto; }
/* Мессенджер М-Б: список 240 px, аватарки крупнее (44 px в списке, 36 px в ленте) */
.chatapp .app-split { grid-template-columns: 240px minmax(0, 1fr); }
.chatapp .app-row:has(.row-ava) { grid-template-columns: 44px minmax(0, 1fr); }
.chatapp .app-row > .row-ava { width: 44px; height: 44px; }
.chatapp .app-row b { font-size: var(--fs-16); }
.chatapp .tc-ava { width: 36px; height: 36px; }
/* Почта П-Б: список шире (420 px), портреты 48 px, тема письма крупнее; письмо — узкой колонкой для чтения */
.mailapp .app-split { grid-template-columns: 420px minmax(0, 1fr); }
.mailapp .app-row:has(.row-ava) { grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; padding: 12px 16px; }
.mailapp .app-row > .row-ava { width: 48px; height: 48px; }
.mailapp .app-row b { font-size: 15px; }
.mailapp .app-row span { font-size: var(--fs-16); font-weight: 700; color: var(--ink); white-space: normal; }
/* прочитанное письмо или переписка (и выполнено действие — скачана таблица, выбран ответ) — без жирного, как в почте и мессенджерах (автор) */
.mailapp .app-row:not(.unread) b, .mailapp .app-row:not(.unread) span, .chatapp:not(.teamapp) .app-row:not(.unread) b { font-weight: 400; }
.chatapp .chat.msgr { flex: 1 0 auto; }  /* не сжимается до высоты окна — шапка чата остаётся сверху при прокрутке */
.zoomapp .zoom-stage:has(.vc-more) .vc-tile { height: 72px; }  /* таунхолл — два ряда, плитки ниже */
/* живой стол (#185): холст под интерфейсом, пиксели крупные; уезжает вместе со страницей */
.desk-bg { position: absolute; left: 0; top: 0; z-index: -1; image-rendering: pixelated; pointer-events: none; }
body.has-desk main { padding-bottom: 120px; }  /* стол заканчивается на первом экране, ниже — пол; снизу немного места под полом (#185) */
.laptop-view > .app.app-full { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }  /* окно приложения, развёрнутое на весь экран (письмо рекрутера) */
.app-full .intro-letter { max-width: 820px; margin: 0 auto; width: 100%; }
/* Dissonance (автор) — приложение команды по мотивам Discord: столбик серверов, каналы и личка, тёмная переписка */
.desk-team .desk-ic { background: var(--app-team); }
.teamapp { display: flex; flex-direction: row; background: var(--dsn-bg); color: var(--dsn-ink); }
.teamapp > .app-split { flex: 1; min-width: 0; grid-template-columns: 210px minmax(0, 1fr); }
.dsn-rail { flex: none; width: 58px; background: var(--dsn-rail); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0; }
.dsn-rail .dsn-home { width: 42px; height: 42px; border-radius: 50%; background: var(--app-team); display: grid; place-items: center; overflow: hidden; }
.dsn-rail .dsn-home svg { width: 34px; height: 34px; }
.dsn-rail .dsn-srv { width: 42px; height: 42px; border-radius: 14px; background: var(--dsn-srv); color: var(--on-color); display: grid; place-items: center; font-weight: 800; font-size: var(--fs-14); }
.teamapp .app-list { background: var(--dsn-side); border-right: 0; padding: 0 6px 8px; }
.teamapp .dsn-guild { padding: 12px 8px; font-weight: 800; color: var(--on-color); border-bottom: 1px solid var(--dsn-rail); margin: 0 -6px 4px; padding-left: 14px; }
.teamapp .dsn-cat { font-size: var(--fs-12); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--dsn-muted); margin: 10px 8px 3px; }
.teamapp .app-row { border: 0; border-radius: 4px; color: var(--dsn-muted); padding: 6px 8px; }
.teamapp .app-row b { color: inherit; font-size: var(--fs-14); }
.teamapp .app-row span, .teamapp .app-row i { color: var(--dsn-muted); }
.teamapp .app-row.on { background: var(--dsn-sel); color: var(--on-color); }
.teamapp .app-row.unread { color: var(--on-color); }
.teamapp .app-row.dsn-ch { grid-template-columns: 18px minmax(0, 1fr); column-gap: 6px; }
.teamapp .app-row.dsn-ch > .dsn-hash { grid-row: 1 / span 3; font-size: 20px; line-height: 1; color: var(--dsn-muted); }
.teamapp .app-row.dsn-ch > :not(.dsn-hash) { grid-column: 2; }
.teamapp .muted-chat { color: var(--dsn-muted); font-weight: 400; }
.teamapp .app-view { background: var(--dsn-bg); }
.teamapp .chat.msgr { background: var(--dsn-bg); color: var(--dsn-ink); }
.teamapp .chat.msgr .chat-head { background: var(--dsn-bg); border-bottom: 1px solid var(--dsn-rail); color: var(--on-color); }
.teamapp .chat.msgr .chat-head .muted { color: var(--dsn-muted); }
.teamapp .chat-log { background: var(--dsn-bg); background-image: none; }
.teamapp .bubble.in { background: transparent; box-shadow: none; color: var(--dsn-ink); padding: 0; max-width: none; }
.teamapp .bubble.in::before { display: none; }
.teamapp .bubble.out::before { content: 'Ты'; display: block; position: static; width: auto; height: auto; background: none; border: 0; color: var(--sun); font-weight: 700; }  /* свои сообщения в личке — с ником, как в Discord */
.teamapp .bubble.in b { display: block; color: var(--dsn-name); }
.teamapp .bubble.out { align-self: flex-start; background: transparent; box-shadow: none; color: var(--dsn-ink); padding: 0 0 0 34px; margin-left: 0; position: relative; }
.teamapp .bubble.out::after { display: none; }
.teamapp .chat-replies { background: var(--dsn-bg); border-top: 1px solid var(--dsn-rail); }
.teamapp .bubble.reply { background: var(--dsn-reply); color: var(--on-color); border-color: var(--dsn-reply); }
.teamapp .tc-row { gap: 10px; }
/* реакции и ответы в #general (#374, пачка 48): реакции под сообщением, твоя подсвечена; панель — при наведении, только мышкой */
.tc-row { position: relative; }
.tc-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tc-reacts:empty { display: none; }
.tc-react { display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; border-radius: 9px; font-size: var(--fs-12); line-height: 20px; background: var(--dsn-side); border: 1px solid var(--dsn-sel); color: var(--dsn-ink); }
.tc-react.mine { background: var(--dsn-mine); border-color: var(--app-team); }
.tc-rbar { position: absolute; right: 6px; top: 0; display: none; gap: 2px; background: var(--dsn-side); border: 1px solid var(--dsn-sel); border-radius: 6px; padding: 2px 4px; box-shadow: var(--shadow); z-index: 2; }
.tc-row:hover .tc-rbar, .tc-rbar:focus-within { display: flex; }
.tc-rbar button { border: 0; background: none; padding: 2px 4px; border-radius: 4px; font-size: var(--fs-16); line-height: 1; cursor: pointer; }
.tc-rbar button:hover { background: var(--dsn-sel); }
.tc-re { display: flex; align-items: center; gap: 6px; margin: 0 0 -6px 14px; padding: 0; border: 0; background: none; color: var(--dsn-muted); font: var(--fs-12)/1.3 var(--font); cursor: pointer; text-align: left; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; }
.tc-re b { color: var(--dsn-ink); font-weight: 600; }
.tc-re:hover { color: var(--dsn-ink); }
.tc-re-curve { flex: none; width: 18px; height: 9px; margin-top: 7px; border-left: 2px solid var(--dsn-muted); border-top: 2px solid var(--dsn-muted); border-radius: 6px 0 0 0; }
.tc-flash { animation: tc-flash 1.2s ease-out 1; }
@keyframes tc-flash { from { background: var(--dsn-mine); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .tc-flash { animation: none; outline: 2px solid var(--app-team); } }
/* полоса NEW над непрочитанным в #general (#366), как в Discord: тонкая линия цветом кружка непрочитанного и метка справа */
.tc-new { display: flex; align-items: center; gap: var(--sp-8); margin: 4px 0; color: var(--badge); font-size: var(--fs-12); font-weight: 700; letter-spacing: .06em; }
.tc-new::before { content: ''; flex: 1; height: 1px; background: currentColor; }
.tc-new span { padding: 0 6px; border-radius: 4px; background: var(--badge); color: var(--on-color); }
/* итог решения в #general — разделитель ленты (#367, пачка 44): над линией что вышло (серым, 14 px), под ней цифры по центру линии,
   16 px: плюс — зелёный, минус — красный, светлее обычных — на тёмном фоне Dissonance */
.tc-div { display: grid; gap: 4px; justify-items: center; text-align: center; margin: 4px 0; }
.tc-div-t { color: var(--dsn-muted); font-size: var(--fs-14); max-width: 90%; }
.tc-div-l { display: flex; align-items: center; gap: 10px; width: 100%; }
.tc-div-l::before, .tc-div-l::after { content: ''; flex: 1; height: 1px; background: var(--dsn-line); }
.tc-div-l .deltas { display: flex; gap: 6px 14px; flex-wrap: wrap; justify-content: center; margin: 0; }
.tc-div-l .d { background: none; border: 0; padding: 0; font-size: var(--fs-16); font-weight: 700; color: var(--dsn-muted); }
.tc-div-l .d.plus { color: var(--dsn-plus); }
.tc-div-l .d.minus { color: var(--dsn-minus); }
.teamapp .tc-ava { border-radius: 50%; }
.tc-ava-me { background: var(--sun); }
.teamapp .tc-me .bubble.in b { color: var(--sun); }
/* карта — на ноутбуке поверх экрана, как страница в браузере (автор): ноутбук того же размера, что в партии */
#music.snd-hint { position: relative; overflow: hidden; animation: snd-glow 1.2s 2s ease-in-out 1; }
#music.snd-hint::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 25%, var(--shine) 45%, var(--shine) 55%, transparent 75%); transform: translateX(-130%); animation: snd-shine 1.2s 2s ease-in-out 1 both; }
@keyframes snd-shine { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
@keyframes snd-glow { 0%, 100% { box-shadow: 0 0 0 0 var(--sun); } 45% { box-shadow: 0 0 0 4px var(--sun), 0 0 14px var(--sun); } }
@media (prefers-reduced-motion: reduce) { #music.snd-hint, #music.snd-hint::after { animation: none; } #music.snd-hint::after { display: none; } }
/* крестик закрытия — везде один: красный квадратик 28 px с белым «×» (автор: «трудно быстро попасть») */
.mac-close, .sheet-close, .ss-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 4px; background: var(--close); color: var(--on-color); font-size: 26px; font-weight: 700; line-height: 1; cursor: pointer; }
.mac-close:hover, .mac-close:focus-visible, .sheet-close:hover, .sheet-close:focus-visible, .ss-close:hover, .ss-close:focus-visible { background: var(--close-hover); color: var(--on-color); }
.mac-close { width: 26px; height: 26px; font-size: 22px; }   /* во всю строку меню ноутбука (26 px) */
#app .laptop .mac-close, #app .laptop .mac-lights { display: none; }   /* ноутбук на странице до партии закрыть нельзя — крестик не показываем (автор: не манит нажать) */
.email-replies.cta-shine { overflow: clip; overflow-clip-margin: 10px; }   /* приподнятый при наведении вариант с тенью не срезается (как у .shine-once) */


/* «Меня слышно?» (#248): связь шалит — картинка собеседника замирает и пикселится, у звука — подпись «нет звука» */
.vc-glitch-video svg, .vc-glitch-both svg, .vc-glitch-video img, .vc-glitch-both img, .vc-glitch-video canvas, .vc-glitch-both canvas { filter: blur(2px) contrast(1.6) saturate(.4); }
.vc-glitch-note { position: absolute; top: 4px; left: 4px; z-index: 2; font: 700 var(--fs-12) var(--font); color: var(--on-accent); background: var(--overlay); padding: 1px 6px; }
@media (prefers-reduced-motion: no-preference) { .vc-glitch-video, .vc-glitch-both { animation: vc-stutter .6s steps(2) 3; } }
@keyframes vc-stutter { 50% { transform: translateX(2px); } }

/* Ответ числом (#249): поле и «Отправить» вместо вариантов — в письме и в чате */
.ask-input { display: flex; gap: var(--sp-8); align-items: center; flex-wrap: wrap; }
.ask-input label { display: flex; align-items: center; gap: 4px; font: 700 var(--fs-16) var(--font); color: var(--ink); }
.ask-send { display: inline-flex; align-items: center; font: 700 var(--fs-16) var(--font); padding: 6px 12px; color: var(--on-accent); background: var(--accent); border: 2px solid var(--edge); cursor: pointer; }
.ask-send[hidden] { display: none; }
.ask-input input::placeholder { color: var(--muted); }
.ask-input input { width: 160px; font: var(--fs-16) var(--font); padding: 6px 8px; border: 2px solid var(--edge); background: var(--card-2); color: var(--ink); font-variant-numeric: tabular-nums; }

/* «Чем решения отличаются» (#193): пары полосок люди / модели, у партии — «ты: да / нет» */
.bench-behaviour { margin-bottom: var(--sp-24); }
.bv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-16) var(--sp-24); }
.bv-label { font-weight: 700; display: flex; justify-content: space-between; gap: var(--sp-8); margin-bottom: 4px; }
.bv-you { font-size: var(--fs-14); padding: 0 var(--sp-8); border: 2px solid var(--edge); }
.bv-you.yes { background: var(--accent-soft); }
.bv-bar { display: grid; grid-template-columns: 64px minmax(0, 1fr) 48px; align-items: center; gap: var(--sp-8); font-size: var(--fs-14); }
.bv-bar i { display: block; height: 10px; }
.bv-bar.h i { background: var(--accent); }  /* как люди на точечной диаграмме */
.bv-bar.a i { background: var(--marketing); }  /* как модели */
.bv-bar b { text-align: right; font-variant-numeric: tabular-nums; }

/* страница игрового сайта в карточке (#250): браузер, шапка сайта, материал об игре */
.art-site { background: var(--card-2); border: 2px solid var(--edge); display: flex; flex-direction: column; overflow: hidden; color: var(--ink); text-align: left; margin: 0 0 var(--sp-8); }
.site-bar { display: flex; align-items: center; gap: 4px; padding: 3px 6px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: var(--fs-12); color: var(--muted); }
.site-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.site-bar span { margin-left: 6px; padding: 0 6px; background: var(--surface); border: 1px solid var(--line); }
.site-head { display: flex; align-items: baseline; gap: var(--sp-8); padding: 4px 8px; background: var(--wall); color: var(--on-wall); }
.site-head b { font: 700 var(--fs-14) var(--font-px); }
.site-head span { font-size: var(--fs-12); color: var(--on-wall-muted); }
.site-body { display: flex; gap: var(--sp-8); padding: 6px 8px; align-items: flex-start; }
.site-body .cover-site { width: 64px; flex: none; }
.site-text { min-width: 0; font-size: var(--fs-14); line-height: 1.35; }
.site-h { font-weight: 800; font-size: var(--fs-16); margin-bottom: 2px; }
.site-text p { margin: 0 0 4px; }
.site-lines i { display: block; height: 5px; margin: 3px 0; background: var(--line); }
.site-lines i:nth-child(2) { width: 80%; } .site-lines i:nth-child(3) { width: 55%; }

/* главная тема (#239): три файла в письме — ▶ и название; выбранная кассета улетает к кнопке музыки (5 видов) */
.theme-file { display: flex; gap: var(--sp-8); align-items: stretch; }
.theme-file .option { flex: 1; }
.theme-play { width: 44px; flex: none; font: 700 var(--fs-18) var(--font); color: var(--on-accent); background: var(--accent); border: 2px solid var(--edge); cursor: pointer; }
.theme-by { font-size: var(--fs-14); color: var(--muted); }
.fly-cover { position: fixed; z-index: 70; width: 120px; height: 120px; border: 4px solid var(--edge); box-shadow: 0 6px 0 var(--edge); background: var(--edge); }  /* обложка выбранной главной темы летит к Musify (автор) */
.fly-cover > * { display: block; width: 100%; height: 100%; }
#music.snd-now { position: relative; overflow: hidden; animation: snd-glow 1.2s ease-in-out 1; }
#music.snd-now::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 25%, var(--shine) 45%, var(--shine) 55%, transparent 75%); transform: translateX(-130%); animation: snd-shine 1.2s ease-in-out 1 both; }

/* записка на столе, когда окно уже 1430 px (#257): изнутри мира — бумажка, как остальные вещи на столе */
.narrow-note { position: fixed; left: var(--sp-16); bottom: var(--sp-16); z-index: 45; max-width: 220px; padding: var(--sp-8) 12px; background: var(--sun); color: var(--ink); border: var(--edge-w) solid var(--edge); box-shadow: var(--px-shadow); font: 700 var(--fs-16) var(--font); transform: rotate(-2deg); }

/* кадры игры студии (#238): сцена из частей капсулы во всю ширину кадра и интерфейс игры поверх по жанру */
.game-shot { position: relative; background-repeat: repeat-x; background-size: auto 100%; background-position: center; image-rendering: pixelated; overflow: hidden; }
.game-shot .hud { position: absolute; inset: 0; pointer-events: none; }
.hud i { position: absolute; display: block; font-style: normal; }
.hud-hp { left: 6%; top: 8%; width: 30%; height: 7%; background: linear-gradient(90deg, var(--pin) 60%, var(--wall-edge) 60%); border: 1px solid var(--on-wall); }
.hud-map { right: 5%; top: 8%; width: 18%; aspect-ratio: 1; border: 1px solid var(--on-wall); background: var(--overlay); }
.hud-res { left: 5%; top: 6%; width: 50%; height: 9%; background: var(--overlay); border: 1px solid var(--on-wall); }
.hud-clock { right: 6%; top: 8%; width: 14%; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--on-wall); background: var(--overlay); }
.hud-bar { left: 25%; right: 25%; bottom: 6%; height: 12%; border: 1px solid var(--on-wall); background: var(--overlay); }
.hud-dialog { left: 6%; right: 6%; bottom: 6%; height: 24%; border: 1px solid var(--on-wall); background: var(--overlay); }
.hud-score { right: 5%; top: 6%; font: 10px var(--font-px); color: var(--on-wall); }

/* название трека над кнопкой музыки, пока играет (автор) */
.music { position: relative; display: flex; align-items: center; gap: var(--sp-8); }

/* финишная прямая: расчёт столбиком в «Если так» (пачка 32) */
.fp-calc { display: flex; flex-direction: column; gap: 2px; margin: var(--sp-4) 0 var(--sp-8); }
.fp-calc > div:not(.cap) { display: flex; justify-content: space-between; gap: var(--sp-8); }
.fp-calc > div > span { min-width: 0; }
.fp-calc b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.fp-total { border-top: 2px solid var(--edge); padding-top: var(--sp-4); margin-top: var(--sp-4); }

/* партия открыта в другой вкладке (#412): служебный экран поверх всего — меню, окон, ноутбука, истории и читов; щелчок мимо ничего не закрывает */
.tab-taken { position: fixed; inset: 0; z-index: 90; background: var(--overlay); display: flex; align-items: center; justify-content: center; padding: var(--sp-16); }
.tab-taken .modal-box { max-width: 520px; }

/* главное меню с незаконченной партией (#135, пачка 38): карточка PC-игры — не кнопка, внутри «Продолжить» и «Новая партия» */
.home-game.has-save { cursor: default; }
.home-game.has-save:hover { transform: none; box-shadow: var(--px-shadow); }
.home-save { color: var(--muted); }
/* без входа (#420): под «Продолжить» — «Сохранено только в этом браузере · войти»; «войти» — ссылкой, только мышкой */
.home-cloud { margin: var(--sp-8) 0 0; color: var(--muted); }
.home-cloud-in { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.home-pick .home-cloud { color: var(--glass-muted); }
.home-btns { display: flex; align-items: stretch; gap: var(--sp-16); flex-wrap: nowrap; margin-top: var(--sp-8); }  /* две кнопки — всегда в одну строку и одной высоты (автор) */
.home-btns .alt { background: var(--card-2); color: var(--ink); }
.home-btns > button { box-sizing: border-box; height: 52px; align-self: auto; display: inline-flex; align-items: center; }  /* обе кнопки одной высоты, при любой рамке (автор) */

/* вход (#135): логотипы Google и LinkedIn на кнопках входа — в меню (пачка 77), письме CTO и на финале */
.login-logo { display: block; width: 18px; height: 18px; }
/* ссылка «Privacy» (#135, автор): в строке названия игры, мелко — шапка не растёт, ничего не заслоняет; на всех экранах */
.brand-row { display: flex; align-items: baseline; gap: var(--sp-8); min-width: 0; }
.brand, .hdr-btns button { white-space: nowrap; }  /* в шапке ничего не переносится: место берётся у шкалы ходов посередине (вход и Privacy, #135) */

/* версия игры (автор): мелко в правом нижнем углу, поверх всего, но не ловит клики и не спорит с интерфейсом */
.app-ver { position: fixed; right: max(8px, env(safe-area-inset-right, 0px)); bottom: max(4px, env(safe-area-inset-bottom, 0px)); z-index: 50; font: var(--fs-12)/1 var(--font); color: var(--on-wood-muted); opacity: .45; pointer-events: none; user-select: none; }
/* кнопки входа в письме CTO и на финале (#313): как у настоящих сервисов входа — светлые, с логотипом; только мышкой */
.mail-login { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-top: var(--sp-8); }
.mail-login button { display: inline-flex; align-items: center; gap: var(--sp-8); padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: var(--fs-14) var(--font); cursor: pointer; }
.mail-login button:hover { background: var(--surface-2); }

/* Финал вкладками (#373, #341, пачка 60): «Итог» — одна крупная карточка по центру, остальное — во вкладках */
.final-tabs { display: flex; gap: var(--sp-8); margin-bottom: var(--sp-16); }
/* вкладки видны на любом столе (автор: на тёмном столе цвета стены терялись): все — бумага с рамкой; закрытые — темнее и ниже, открытая — светлая, приподнята */
.final-tab { position: relative; display: inline-flex; align-items: center; gap: var(--sp-8); padding: 10px 18px; font-size: var(--fs-18); font-weight: 800; background: var(--accent); color: var(--on-accent); border: var(--edge-w) solid var(--edge); border-radius: 0; box-shadow: 0 4px 0 var(--edge); }  /* закрытые — как главные кнопки (пачка d26e: вкладки не замечали) */
.ft-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--badge); box-shadow: 0 0 0 2px var(--on-accent); }  /* ещё не смотрел — как непрочитанное; внутри вкладки: у края её обрезал бы блик */
.final-next-row { display: flex; justify-content: center; margin-top: var(--sp-24); }
.final-tab.on { background: var(--card); color: var(--ink); border-color: var(--edge); box-shadow: 0 4px 0 var(--edge), 0 0 0 3px var(--sun); transform: none; }
/* блик по вкладкам, когда финал открылся (автор): один раз, от 1 к 4 */
.final-tabs.tabs-shine .final-tab { position: relative; overflow: hidden; isolation: isolate; }
.final-tabs.tabs-shine .final-tab::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent 25%, var(--shine) 42%, var(--sun) 50%, var(--shine) 58%, transparent 75%); opacity: .85; transform: translateX(-120%); animation: tab-shine .6s ease-in-out .4s both; }  /* на светлой бумаге белый не виден — с золотом */
.final-tabs.tabs-shine .final-tab:nth-child(2)::after { animation-delay: .65s; }
.final-tabs.tabs-shine .final-tab:nth-child(3)::after { animation-delay: .9s; }
.final-tabs.tabs-shine .final-tab:nth-child(4)::after { animation-delay: 1.15s; }
@keyframes tab-shine { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .final-tabs.tabs-shine .final-tab::after { display: none; } }
.final-main { display: flex; flex-direction: row; justify-content: center; align-items: flex-start; gap: var(--sp-24); min-width: 0; }
.share-actions { position: relative; display: flex; flex-direction: column; flex-wrap: wrap; align-items: stretch; gap: var(--sp-8); width: 240px; }
.share-open { display: inline-flex; align-items: center; gap: var(--sp-8); }
.share-menu { position: absolute; top: 56px; left: 0; z-index: 20; display: flex; flex-direction: column; gap: var(--sp-4); background: var(--card); border: var(--edge-w) solid var(--edge); box-shadow: var(--px-shadow); padding: var(--sp-8); white-space: nowrap; }
.share-menu button { background: transparent; border: 2px solid transparent; padding: 6px 10px; text-align: left; color: var(--ink); font-size: var(--fs-16); }
.share-menu button:hover { border-color: var(--edge); }
.final-money .final-ladders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.money-strip { margin-bottom: var(--sp-24); }
.ms-bar { display: flex; height: 28px; border: 2px solid var(--edge); }
.ms-bar i, .ms-legend i { display: block; }
.ms-legend { display: flex; flex-wrap: wrap; gap: var(--sp-24); font-size: var(--fs-16); }
.ms-legend span { display: inline-flex; align-items: center; gap: var(--sp-8); }
.ms-legend i { width: 14px; height: 14px; }
.ms-pub { background: var(--share-pub); } .ms-angel { background: var(--share-angel); } .ms-you { background: var(--share-you); } .ms-studio { background: var(--share-studio); }
.ms-bar i, .ms-legend span { transition: opacity .15s; cursor: default; }
.ms-dim { opacity: .3; }
.ms-legend span:not(.ms-dim)[data-ms] { font-weight: 400; }
.final-money .final-details .kv { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); column-gap: var(--sp-24); }
.dist-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-24); }
.dist-chart { max-width: none; }
.final-ai .dist-row { margin-bottom: var(--sp-16); }
.final-ai .bench-behaviour { margin-bottom: var(--sp-16); }
.rank-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--sp-16); }
.rank-card { width: 880px; align-items: stretch; }
.rank-by { display: flex; gap: var(--sp-8); }
.rank-by button { padding: 6px 12px; background: transparent; border: 2px solid var(--edge); color: var(--ink); font-size: var(--fs-16); }
.rank-by button.on { background: var(--sun); font-weight: 800; }
.rank-place { font: 800 var(--fs-40)/1.1 var(--font); text-align: right; font-variant-numeric: tabular-nums; }
.rank-place span { font-size: var(--fs-24); color: var(--muted); font-weight: 700; }
.rank-list > div { display: grid; grid-template-columns: 80px 290px minmax(0, 1fr) 140px; align-items: center; gap: var(--sp-8); height: 32px; padding: 3px var(--sp-8); line-height: 1.4; font-variant-numeric: tabular-nums; }
.rank-list > div > :last-child { text-align: right; }
.rank-list .rk-me { background: var(--accent-soft); border: 2px solid var(--edge); }

/* «Итог» (пачка 62): карточка — холст 1080×1350 (drawCard), на экране уменьшен до 520×650; кнопки — справа */
.card-cv { width: 520px; height: 650px; display: block; box-shadow: 0 6px 0 var(--wall-edge); flex: none; }
.final-head { display: flex; align-items: center; gap: var(--sp-24); margin: var(--sp-8) 0 var(--sp-16); }
.final-head .final-tabs { margin: 0; }
/* подписка на финале — одной строкой над вкладками-содержимым (пачка 61) */
/* общий рейтинг: люди — синим, модели — фиолетовым (как на графиках) */
.rank-list .rk-man b { color: var(--accent); } .rank-list .rk-ai b { color: var(--marketing); }
.rank-near { max-height: 214px; overflow-y: auto; }
.rank-all { max-height: 460px; overflow-y: auto; }  /* экран рейтинга (пачка d26e): весь список, твоя строка — посередине */
.home-rank { cursor: default; }
.home-rank:hover:not(:disabled) { transform: none; box-shadow: var(--px-shadow); }
.home-pick .home-rank:hover { transform: none; }
.home-rank h2 { font-size: var(--fs-24); }  /* заголовок карточки рейтинга — в две строки, мельче, чем у сценариев (автор) */
.hr-mine { font-weight: 800; }
.hr-list { display: flex; flex-direction: column; gap: 2px; margin: var(--sp-8) 0; }  /* топ-10 на главном целиком, без прокрутки (автор) */
.hr-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: var(--sp-8); font-size: var(--fs-16); }
.hr-row > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-row.ai b { color: var(--marketing); }
.rank-headrow { display: flex; justify-content: space-between; align-items: center; }
.rk-gap { display: flex; align-items: center; padding: 0 var(--sp-8); justify-content: space-between; color: var(--muted); font-size: var(--fs-14); height: 28px; border-top: 2px dashed var(--line); border-bottom: 2px dashed var(--line); }
.rank-list .rk-top b { text-decoration: underline var(--sun) 3px; }
.rank-list > div > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* призыв войти в рейтинге (автор 2026-10-23): заметной плашкой над рейтингом */
.rank-login { width: 880px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16); padding: var(--sp-16); background: var(--sun); border: var(--edge-w) solid var(--edge); box-shadow: var(--px-shadow); color: var(--ink); font-size: var(--fs-18); }
.rank-login span { font-size: var(--fs-16); }
.rank-save-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rank-save-t .rank-note { font-size: var(--fs-14); font-weight: 400; color: var(--muted); }
.rank-save .rank-login-go { display: flex; gap: var(--sp-8); align-items: center; }
.rank-save.done { justify-content: center; }
.rank-list > .rk-stats { display: flex; height: auto; align-items: center; justify-content: space-between; gap: var(--sp-16); margin: 2px 0 4px; padding: var(--sp-8) var(--sp-16); background: var(--sun); border: 2px solid var(--edge); color: var(--ink); font-size: var(--fs-14); }
.rank-list > .rk-stats > * { white-space: normal; overflow: visible; }
.rank-list > .rk-stats .primary { flex: none; }
.rank-list > .rk-stats.done { justify-content: center; }
.rank-list .rk-unsaved { color: var(--minus); }
.rank-login-go { position: relative; flex: none; }
.rank-login-go .primary { display: inline-flex; align-items: center; gap: var(--sp-8); }
.rank-login-go .primary svg, .rank-login-go .primary img { width: 20px; height: 20px; }
.rank-login-menu { position: absolute; right: 0; top: calc(100% + var(--sp-8)); z-index: 20; background: var(--card); border: var(--edge-w) solid var(--edge); box-shadow: var(--px-shadow); padding: var(--sp-8); }
.rank-login-menu { width: max-content; }
.rank-login-menu .mail-login { margin: 0; flex-direction: column; }
.rank-login-menu .mail-login button { white-space: nowrap; }


/* прямая денег (автор 2026-10-23): точки на одной оси, подсказка по наведению, подписи моделей — строкой */
.ln-wrap { position: relative; }
.dist-chart .ln-axis { stroke: var(--edge); stroke-width: 3; }
.dist-chart .ln-tick { stroke: var(--edge); stroke-width: 2; }
.dist-chart .ln-dot { stroke: var(--card); stroke-width: 2; cursor: default; }
.dist-chart .ln-you { fill: var(--pin); stroke: var(--edge); stroke-width: 3; }
.bench-chart .ln-you-t { fill: var(--pin); font-size: 15px; font-weight: 800; }
.ln-m1 { fill: var(--model-1); background: var(--model-1); } .ln-m2 { fill: var(--model-2); background: var(--model-2); }
.ln-m3 { fill: var(--model-3); background: var(--model-3); } .ln-m4 { fill: var(--model-4); background: var(--model-4); }
.ln-keys { display: flex; flex-wrap: wrap; gap: 4px var(--sp-16); font-size: var(--fs-14); }
.ln-keys span { display: inline-flex; align-items: center; gap: 6px; } .ln-keys i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.ln-tip { position: absolute; transform: translate(-50%, -100%); background: var(--ink); color: var(--card); font-size: var(--fs-14); font-weight: 700; padding: 4px 8px; white-space: nowrap; pointer-events: none; }

/* «Твои решения» (пачка 63): «канат» между людьми и ИИ, точка — ты */
.rope { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-16); margin: var(--sp-16) 0 var(--sp-8); font-size: var(--fs-24); }
.rope-h { color: var(--accent); } .rope-a { color: var(--marketing); }
.rope-track { position: relative; height: 14px; background: linear-gradient(90deg, var(--accent), var(--line) 50%, var(--marketing)); }
.rope-you { position: absolute; top: 50%; width: 32px; height: 32px; border-radius: 50%; background: var(--pin); border: 4px solid var(--edge); transform: translate(-50%, -50%); }
.rope-say { margin: 0; text-align: center; font-size: var(--fs-24); font-weight: 700; }

/* читы для теста (#387, js/cheats.js): только с диска и на claude.ai — номер версии ловит щелчки; плашка «Ё читы» — внизу справа, над номером версии, панель — над ней */
.cheats-ok .app-ver { pointer-events: auto; }
.cheat-badge { position: fixed; z-index: 60; right: var(--sp-24); bottom: max(4px, env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: var(--sp-8); padding: 4px var(--sp-8); font: 700 var(--fs-14)/1.2 var(--font); color: var(--ink); background: var(--sun); border: 2px solid var(--edge); cursor: pointer; }
.cheat-panel { position: fixed; z-index: 60; right: var(--sp-24); width: 380px; background: var(--card); color: var(--ink); border: 3px solid var(--edge); box-shadow: 0 6px 0 var(--edge); padding: var(--sp-16); display: flex; flex-direction: column; gap: 6px; }
.cheat-row { display: flex; align-items: center; gap: var(--sp-8); font: var(--fs-16)/1.3 var(--font); color: var(--ink); background: none; border: 0; padding: 4px 0; text-align: left; cursor: pointer; }
.cheat-row input { width: 80px; font: inherit; padding: 2px 6px; border: 2px solid var(--edge); background: var(--card-2); color: var(--ink); }
.cheat-note { margin: 4px 0; font-size: var(--fs-14); color: var(--muted); }

/* предыстория (#335, пачки 65–68): выбор истории и сцены — тёмная сцена, как на странице истории автора */
:root { --story-bg: #14111a; --story-frame: #0b0a10; --story-card: #1b1724; --story-ink: #f4ede1; --story-muted: #a79fb2; --story-line: #2c2636; --story-note: #fff3c4; --story-spark: #ffe2b0; --story-shade: rgba(14, 10, 20, .62); --story-glow: rgba(255, 190, 110, .32); }
.story-wrap { position: fixed; inset: var(--story-top, 0px) 0 0 0; background: var(--story-bg); overflow: auto; display: flex; align-items: center; justify-content: center; padding: var(--sp-24) 200px; }  /* выбор пролога — как сцены истории (пачка d26m): тёмный экран во всю высоту под шапкой, по бокам — место под памятку */
#app:has(> .story-wrap) > .key-legend { position: fixed; z-index: 1; top: calc(var(--story-top, 0px) + var(--sp-24)); left: auto; right: var(--sp-24); width: 136px; white-space: nowrap; color: var(--story-muted); }  /* памятка — над тёмным экраном, вверху справа, как в истории */
.story-pick { color: var(--story-ink); width: 100%; max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-16); }
.story-pick h1 { color: var(--story-ink); margin: 0; }
.story-note { align-self: flex-start; margin: 0; max-width: 560px; padding: var(--sp-8) var(--sp-16); background: var(--story-note); color: var(--ink); font: italic 500 var(--fs-18)/1.4 var(--font); transform: rotate(-1deg); box-shadow: 0 3px 0 var(--edge); }
.story-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-24); }
.story-card { display: flex; flex-direction: column; }
.story-cover { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; image-rendering: pixelated; border: var(--edge-w) solid var(--edge); background: var(--story-frame); }  /* рамка — как у кадра сцены */
.story-stub { display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(135deg, var(--story-card) 0 10px, var(--story-bg) 10px 20px); }
.story-stub .soon-chip { align-self: center; border-radius: 4px; }
.story-body { padding: var(--sp-16) 0 0; display: flex; flex-direction: column; gap: var(--sp-16); align-items: flex-start; }
.story-pick .story-cap { width: auto; min-height: 0; }
.story-kicker { margin-bottom: calc(-1 * var(--sp-8)); font-size: var(--fs-14); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sun); }  /* «Скоро» — как у мобильной игры в меню */
.story-card.draft .story-cover, .story-card.draft .story-cap { opacity: .7; }
.story-card.draft .story-cap b { color: var(--story-muted); }
.story-skip-row { display: flex; justify-content: flex-end; }
.story-skip-row .key-cap, .story-btns .key-cap { margin-right: var(--sp-8); }
.story-stage { --story-w: min(100% - 304px, calc((100vh / var(--ui-scale) - var(--story-top, 0px) - 215px) * 16 / 9));  /* кадр во всю высоту окна, под ним — подпись и «Дальше»; по бокам — место под памятку (136 + отступ); vh при zoom — экранные, делим на масштаб (#257) */ position: fixed; inset: var(--story-top, 0px) 0 0 0; z-index: 40; background: var(--story-bg); color: var(--story-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-16); padding: var(--sp-24); }
.story-stage > .key-legend { top: var(--sp-24); left: auto; right: var(--sp-24); width: 136px; white-space: nowrap; color: var(--story-muted); }  /* памятка во время истории — вверху справа, как на остальных экранах (автор); «Дальше» — под кадром */
.story-stage > .key-legend .kl-title { color: var(--story-muted); }
.story-stage > .key-legend .kl-btn:hover { color: var(--story-ink); }
.story-frame { position: relative; width: var(--story-w); aspect-ratio: 16 / 9; background: var(--story-frame); overflow: hidden; border: var(--edge-w) solid var(--edge); }
.story-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.story-glow { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(55% 55% at 30% 30%, var(--story-glow), transparent 70%); animation: story-breathe 5s ease-in-out infinite; }
@keyframes story-breathe { 0%, 100% { opacity: .3; } 50% { opacity: .7; } }
.story-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.story-year { position: absolute; top: 14px; right: 16px; padding: 6px 10px; background: var(--story-shade); color: var(--story-ink); font: 600 var(--fs-14)/1 var(--font); letter-spacing: .08em; }
.story-cap { width: var(--story-w); min-height: 4.6em; margin: 0; font-size: var(--fs-18); line-height: 1.55; }
.story-cap b { color: var(--sun); }
.story-bar { width: var(--story-w); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-16); }
.story-dots { display: flex; gap: var(--sp-8); }
.story-dot { padding: var(--sp-8) 0; background: none; border: 0; cursor: default; }  /* полоска кадра; уже виденный — нажимается (#424) */
.story-dot.seen { cursor: pointer; }
.story-dot.seen:hover i { background: var(--story-ink); }
.story-dots i { display: block; width: 28px; height: 4px; background: var(--story-line); }
.story-dots i.on { background: var(--sun); }
.story-btns { display: flex; gap: var(--sp-8); }
.story-btns [data-back]:disabled { opacity: .35; cursor: default; }  /* на первом кадре «Назад» видна, но неактивна (#424) */
@media (prefers-reduced-motion: reduce) { .story-glow { animation: none; } }
.story-pick .ghost-dark, .story-stage .ghost-dark { color: var(--story-muted); border-color: var(--story-line); }

/* меню как в играх (#388, пачка 69): панель как главное меню в версии Гриши (g/preview-v24, .home-panel) — тёмная, на всю высоту,
   правый край скошен на 23% высоты (≈13°), по скосу — розовая полоса; выезжает слева поверх экрана, щелчок мимо — уезжает */
:root { --pnl-dark: #1c2232; --pnl-dark-ink: #eef0f6; --pnl-dark-muted: #a6aec4; --pnl-dark-line: rgba(238, 240, 246, .16); --pnl-accent-dark: #ff6f9c; --pnl-shade: rgba(10, 12, 20, .45); }
/* «сейчас играет» слева от «Меню» (автор, #388): знак Musify, эквалайзер, название трека (не шире 180 px — шапка не прыгает);
   щелчок — меню на Musify */
#music { display: inline-flex; align-items: center; justify-content: center; align-self: stretch; gap: var(--sp-8); max-width: 220px; padding: 4px 10px 4px 6px; background: var(--mz-bg); color: var(--mz-muted); border: 1px solid var(--mz-line); border-radius: 999px; font: 600 var(--fs-14)/1 var(--font); cursor: pointer; }
#music.on { color: var(--mz-ink); }
#music:not(.on) .mz-logo { filter: saturate(.35); opacity: .8; }
#music .mz-eq { height: 12px; }
#music .np-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#music:hover, #music:focus-visible { border-color: var(--mz-accent); }
#restart .key-cap, #fs-btn .key-cap { margin-left: var(--sp-8); }
#restart .key-cap + .key-cap { margin-left: var(--sp-4); }  /* M и Esc рядом (пачка d26v) */
#fs-btn { display: inline-flex; align-items: center; font-size: var(--fs-18); }  /* ⛶ на весь экран (пачка d26h) */
#fs-btn[hidden] { display: none; }
.gm { position: fixed; inset: 0; z-index: 70; }
.gm-shade { position: absolute; inset: 0; background: var(--pnl-shade); opacity: 0; transition: opacity .3s; }
.gm.open .gm-shade { opacity: 1; }
.gm-panel { --sk: calc(23vh / var(--ui-scale)); position: absolute; top: 0; bottom: 0; left: 0; width: max(600px, calc(42vw / var(--ui-scale))); background: var(--pnl-accent-dark); clip-path: polygon(0 0, 100% 0, calc(100% - var(--sk)) 100%, 0 100%); transform: translateX(-105%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.gm.open .gm-panel { transform: none; }
.gm-inner { position: absolute; inset: 0 4px 0 0; background: var(--pnl-dark); color: var(--pnl-dark-ink); clip-path: polygon(0 0, 100% 0, calc(100% - var(--sk)) 100%, 0 100%); display: flex; flex-direction: column; justify-content: flex-start; padding: calc(26vh / var(--ui-scale)) calc(var(--sk) * .7 + 32px) 72px 72px; overflow-y: auto; }  /* от одной верхней точки: «Назад» — там же, где «Закрыть» (автор) */
.gm-kicker { color: var(--pnl-dark-muted); font: 600 var(--fs-12)/1 var(--font); letter-spacing: .24em; text-transform: uppercase; }
.gm-kicker::after { content: ''; display: block; width: 40px; height: 2px; margin: var(--sp-16) 0 var(--sp-24); background: var(--pnl-accent-dark); }
.gm-items { display: flex; flex-direction: column; border-top: 1px solid var(--pnl-dark-line); }
.gm-logos { display: inline-flex; gap: 6px; align-items: center; }  /* у «Войти» — логотипы Google и LinkedIn (автор) */
.gm-item { position: relative; display: flex; align-items: center; gap: var(--sp-16); width: 100%; padding: 14px 0; background: transparent; border: 0; border-bottom: 1px solid var(--pnl-dark-line); color: var(--pnl-dark-ink); font: 500 var(--fs-24)/1.25 var(--font); text-align: left; cursor: pointer; transition: color .15s, padding-left .15s; }
.gm-item::before { content: ''; position: absolute; left: 2px; top: 50%; width: 4px; height: 24px; translate: 0 -50%; background: var(--pnl-accent-dark); opacity: 0; transition: opacity .15s; }
.gm-item.sel, .gm-item:hover, .gm-item:focus-visible { color: var(--pnl-accent-dark); padding-left: 12px; outline: none; }
.gm-item.sel::before, .gm-item:hover::before, .gm-item:focus-visible::before { opacity: 1; }
.gm-no { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; border: 1px solid currentColor; border-radius: 3px; background: transparent; color: inherit; box-shadow: none; font: 500 var(--fs-14)/1 var(--font); }
.gm-switch { position: relative; margin-left: auto; width: 40px; height: 22px; flex: none; border: 2px solid var(--pnl-dark-muted); border-radius: 11px; transition: background .15s, border-color .15s; }  /* тумблер «На весь экран» */
.gm-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--pnl-dark-muted); transition: transform .15s, background .15s; }
.gm-switch.on { background: var(--pnl-accent-dark); border-color: var(--pnl-accent-dark); }
.gm-switch.on::after { transform: translateX(18px); background: var(--pnl-dark); }
.gm-privacy { position: absolute; left: 72px; bottom: 32px; color: var(--pnl-dark-muted); font-size: var(--fs-12); }  /* в самом низу панели (автор) */
.gm-privacy:hover { color: var(--pnl-dark-ink); }
.gm-vol { display: flex; align-items: center; gap: var(--sp-16); font-size: var(--fs-18); margin-bottom: var(--sp-16); }
.gm-vol input { width: 220px; accent-color: var(--pnl-accent-dark); }
.gm-deck .music-menu { position: static; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .gm-panel, .gm-shade { transition: none; } }

/* «Musify» (#331) — компактное окно из версии Гриши (g/preview-v24) в меню «Музыка и громкость» (#388); токены — его */
:root {
  --mz-bg: #121212; --mz-side: #000000; --mz-panel: #181818; --mz-row: #2a2a2a; --mz-ink: #ffffff; --mz-muted: #a7a7a7; --mz-line: #2f2f2f;
  --mz-accent: #ff5c7a; --mz-accent-2: #ffb03b; --mz-accent-3: #8a5cff; --mz-hero: #5b2346; --mz-hero-2: #2a1626; --mz-track: #4d4d4d;
  --cov-night-1: #1b1f4a; --cov-night-2: #3a2d6e; --cov-night-3: #f6c768; --cov-night-4: #0c0e24;
  --cov-cafe-1: #f1d7b0; --cov-cafe-2: #b9784a; --cov-cafe-3: #5a3420; --cov-cafe-4: #fff6e8;
  --cov-crunch-1: #0d0a14; --cov-crunch-2: #ff3d6e; --cov-crunch-3: #ffd23f; --cov-crunch-4: #3df0ff;
  --cov-jazz-1: #0d3440; --cov-jazz-2: #2f8f86; --cov-jazz-3: #e2a33a; --cov-jazz-4: #f3e4bd;
  /* обложки мелодий главной темы — у каждой своя сцена (автор: одинаковые были страшные) */
  --cov-rise-1: #2b1d3a; --cov-rise-2: #e8743b; --cov-rise-3: #ffd76a; --cov-rise-4: #4a2328; --cov-rise-5: #7a3a2c;
  --cov-storm-1: #141a26; --cov-storm-2: #3a4a66; --cov-storm-3: #e8f0ff; --cov-storm-4: #07090e; --cov-storm-5: #6c7fa3;
  --cov-home-1: #18213d; --cov-home-2: #3d2f4c; --cov-home-3: #ffc45e; --cov-home-4: #c9d4e8; --cov-home-5: #8a5a3c;
  --cov-letter-1: #24304a; --cov-letter-2: #6b4a33; --cov-letter-3: #f1e6cf; --cov-letter-4: #c0453a; --cov-letter-5: #ffe2a0;
  --cov-run-1: #ff8a5c; --cov-run-2: #5b2a6e; --cov-run-3: #2a2233; --cov-run-4: #3ec1d3; --cov-run-5: #ffe9b0;
  --cov-quest-1: #120c1f; --cov-quest-2: #4b2a7a; --cov-quest-3: #7ef0c8; --cov-quest-4: #3a3352; --cov-quest-5: #ff9a3c;
  --cov-1: #e2a33a; --cov-2: #2f8f86; --cov-3: #7a56a8; --cov-4: #d9662e; --cov-5: #c23f4b; --cov-dark: #15131a; --cov-glare: rgba(255,255,255,.35); --cov-shade: rgba(0,0,0,.35);
}
.mz-cover { display: block; flex: none; border-radius: 4px; }
.mz-cover.mz-px { image-rendering: pixelated; border-radius: 0; }   /* обложки «Musify» — пиксельной сеткой (#357) */
.mz-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.mz-eq i { width: 3px; height: 100%; border-radius: 1px; background: var(--mz-accent); transform-origin: bottom; animation: mz-eq .9s ease-in-out infinite; }
.mz-eq i:nth-child(2) { animation-delay: -.25s; } .mz-eq i:nth-child(3) { animation-delay: -.5s; } .mz-eq i:nth-child(4) { animation-delay: -.7s; }
@keyframes mz-eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .mz-eq i { animation: none; } .mz-eq i:nth-child(odd) { transform: scaleY(.6); } }
.mz-tt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.mz-tt b, .mz-tt small { max-width: 100%;  /* в меню колонка прижата влево (align-items: flex-start) — без этого длинное название вылезает на время */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-tt b { font-weight: 600; font-size: var(--fs-16); color: var(--mz-ink); }
.mz-tt small { font-size: var(--fs-14); color: var(--mz-muted); }
.mz-brand { display: flex; align-items: center; gap: 10px; font-size: var(--fs-24); font-weight: 800; letter-spacing: -.02em; }
.mz-play { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--mz-ink); color: var(--mz-side); cursor: pointer; transition: transform .1s; }
#music-menu .mz-play { color: var(--mz-side); }
.mz-play:hover { transform: scale(1.07); }
.mz-list { display: flex; flex-direction: column; padding: 0 18px 18px; }
.mz-len { text-align: right; }
.mz-row { width: 100%; padding: 6px 10px; border: 0; border-radius: 6px; background: none; text-align: left; cursor: pointer; }
.mz-row:hover, .mz-row:focus-visible { background: var(--mz-row); }
.mz-row.on .mz-tt b { color: var(--mz-accent); }
.mz-no { display: flex; justify-content: center; color: var(--mz-muted); font-variant-numeric: tabular-nums; }
.mz-thumb { width: 40px; height: 40px; }
.mz-len { color: var(--mz-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.mz-player { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); align-items: center; gap: 16px; padding: 6px 8px 2px; }
.mz-now { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mz-now-cv { width: 52px; height: 52px; box-shadow: 0 4px 10px var(--shade-50); }
.mz-ctl { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.mz-btns { display: flex; align-items: center; gap: 22px; }
.mz-skip { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; color: var(--mz-muted); cursor: pointer; }
.mz-skip:hover, .mz-skip:focus-visible { color: var(--mz-ink); }
.mz-prog { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 560px; color: var(--mz-muted); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.mz-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--mz-track); overflow: hidden; }
.mz-bar i { display: block; height: 100%; border-radius: 2px; background: var(--mz-ink); transition: width .9s linear; }
#music-menu.mz-menu { width: 420px; padding: 12px; border: 0; border-radius: 10px; background: var(--mz-bg); color: var(--mz-ink); box-shadow: 0 16px 40px var(--shade-55); gap: 8px; }
.mz-mini { display: flex; flex-direction: column; gap: 10px; }
.mz-mini .mz-brand { font-size: var(--fs-18); }
.mz-mini .mz-brand span { margin-left: auto; font-size: var(--fs-14); font-weight: 600; color: var(--mz-muted); }
.mz-mini .mz-list { padding: 0; max-height: 182px; overflow-y: auto; }  /* видно три трека целиком и половину четвёртого — понятно, что дальше прокрутка (автор); строка — 52px */
#music-menu .mz-row { display: grid; grid-template-columns: 24px 40px minmax(0, 1fr) 44px; align-items: center; gap: 12px; padding: 6px 8px; border: 0; color: var(--mz-ink); font-size: var(--fs-14); }
#music-menu .mz-row:hover, #music-menu .mz-row:focus-visible { background: var(--mz-row); border: 0; }
#music-menu .mz-skip, #music-menu .mz-play { border: 0; padding: 0; }
#music-menu .mz-skip { color: var(--mz-muted); }
#music-menu .mz-skip:hover { color: var(--mz-ink); }
#music-menu .mz-player { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); padding: 8px 4px 0; border-top: 1px solid var(--mz-line); }
#music-menu .mz-now-cv { width: 40px; height: 40px; }
#music-menu .mm-note { color: var(--mz-accent-2); }
#music-menu .mz-play { background: var(--mz-ink); justify-content: center; align-items: center; }  /* значок ▶ / ❚❚ — по центру круга: кнопки в меню — flex, без этого значок прижимался влево (автор) */
#music-menu .mz-tt { align-items: flex-start; text-align: left; }
/* логотип — круглый знак с полосками звука (у Гриши — пиксельный значок дока) */
.mz-logo { display: inline-flex; align-items: center; justify-content: center; gap: 2px; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--mz-accent-3), var(--mz-accent) 55%, var(--mz-accent-2)); }
.mz-logo i { width: 3px; height: 40%; border-radius: 1px; background: var(--mz-ink); }
.mz-logo i:nth-child(2) { height: 60%; }
.gm-deck #music-menu.mz-menu { position: static; width: 100%; max-width: 460px; box-shadow: none; }

.gm-items + .gm-vol { margin-top: var(--sp-24); }

/* схема меню — одна, «лампа» (автор, #421): значения токенами в :root, подставляются в общие --pnl-* */
:root { --pnl-lamp-dark: #1f2236; --pnl-lamp-dark-ink: #f1ede4; --pnl-lamp-dark-muted: #a9a9bd; --pnl-lamp-dark-line: rgba(241, 237, 228, .15); --pnl-lamp-accent-dark: #f2b84b; --pnl-lamp-shade: rgba(10, 10, 25, .45); }
.gm[data-style="lamp"] { --pnl-dark: var(--pnl-lamp-dark); --pnl-dark-ink: var(--pnl-lamp-dark-ink); --pnl-dark-muted: var(--pnl-lamp-dark-muted); --pnl-dark-line: var(--pnl-lamp-dark-line); --pnl-accent-dark: var(--pnl-lamp-accent-dark); --pnl-shade: var(--pnl-lamp-shade); }

/* Главное меню — «тёмное стекло» (пачка 77): карточки и полоса «Люди против ИИ» — полупрозрачные тёмные панели с размытием,
   сцена просвечивает; текст светлый, «Продолжить» / «Играть» — солнцем, «Новая партия» — контуром */
:root { --glass-btn: rgba(255, 246, 227, .14); --glass-btn-hover: rgba(255, 246, 227, .22); --glass-bg: rgba(20, 14, 12, .58); --glass-bg-soft: rgba(20, 14, 12, .38); --glass-line: rgba(255, 246, 227, .16); --glass-ink: #fff6e3; --glass-muted: rgba(255, 246, 227, .72); --glass-shadow: rgba(0, 0, 0, .35); }
.home-pick .home-game { background: var(--glass-bg); color: var(--glass-ink); border: 1px solid var(--glass-line); border-radius: 10px; box-shadow: 0 8px 24px var(--glass-shadow); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.home-pick .home-game.soon { background: var(--glass-bg-soft); opacity: .75; }
.home-pick .home-game .home-kicker { color: var(--sun); }
.home-pick .home-game.soon .home-kicker, .home-pick .home-save { color: var(--glass-muted); }
.home-pick .home-game:hover:not(:disabled), .home-pick .home-game.has-save:hover { transform: none; box-shadow: 0 8px 24px var(--glass-shadow); border-color: var(--glass-muted); }
.home-pick .home-game.has-save:hover { border-color: var(--glass-line); }
.home-pick .primary { border-radius: 6px; }
.home-pick .primary:not(.alt) { background: var(--sun); color: var(--ink); border-color: var(--sun); box-shadow: none; }
.home-pick .primary.alt { background: var(--glass-btn); color: var(--glass-ink); border: 2px solid var(--glass-muted); box-shadow: none; }  /* лёгкая полупрозрачная заливка: прозрачная кнопка терялась на фоне (автор) */
.home-pick .home-game:hover .primary.alt, .home-pick .primary.alt:hover { background: var(--glass-btn-hover); }
.home-pick .soon-chip { border-radius: 4px; }

/* вход в меню (пачка 77): кнопки Google и LinkedIn — те же, что в письме CTO; профиль — буква в кружке, имя, чем вошёл и почта */
.gm-login .mail-login { flex-direction: column; align-items: stretch; margin: var(--sp-16) 0 0; max-width: 340px; }
.gm-note { color: var(--pnl-dark-muted); font-size: var(--fs-14); line-height: 1.5; max-width: 40ch; margin: var(--sp-16) 0 0; }
.gm-profile { display: flex; align-items: center; gap: var(--sp-16); margin-top: var(--sp-24); }
.gm-profile b { display: block; font-size: var(--fs-18); }
.gm-profile span:not(.gm-ava) { color: var(--pnl-dark-muted); font-size: var(--fs-14); }
.gm-ava { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--pnl-accent-dark); color: var(--pnl-dark); font: 800 var(--fs-24)/1 var(--font); }
.gm-items-low { margin-top: var(--sp-16); }

/* вопрос «Выйти?» строкой под пунктом меню (пачка 78): полоса акцента слева, лёгкая заливка акцентом; 1 Выйти, 2 Остаться (Esc) */
.gm-ask { border-left: 3px solid var(--pnl-accent-dark); background: color-mix(in srgb, var(--pnl-accent-dark) 14%, transparent); padding: var(--sp-16); margin: 0 0 var(--sp-8); }
.gm-ask b { display: block; font-size: var(--fs-18); }
.gm-ask p { margin: var(--sp-4) 0 var(--sp-16); color: var(--pnl-dark-muted); font-size: var(--fs-14); line-height: 1.5; max-width: 40ch; }
.gm-ask-btns { display: flex; gap: var(--sp-24); }
.gm-ask-btns button { display: inline-flex; align-items: center; gap: var(--sp-8); padding: 0; background: transparent; border: 0; color: var(--pnl-dark-ink); font: 600 var(--fs-18)/1 var(--font); cursor: pointer; }
.gm-ask-btns .gm-ask-yes { color: var(--pnl-accent-dark); }
.gm-ask-btns .key-cap { margin-left: var(--sp-4); }
.gm-inner.asking .gm-items .gm-key-esc { visibility: hidden; }  /* пока открыт вопрос, Esc — «Остаться», а не «Закрыть» / «Назад» */