/* v2 «один экран» — компактная оболочка, листы раскрытия и экраны основного цикла. * * Спецификация — docs/design/v2-one-screen/spec.md. Подключён последним и меняет только то, * что нужно, чтобы экран помещался в окно: 1440 × 900 и 390 × 844 без прокрутки страницы. * #app.v2 — все экраны v2: компактная верхняя строка, метка версии, листы; * #app.v2-fit — фазы, уже сверстанные под окно (FIT_PHASES в app.js: фокус и события). * Остальные фазы пока в прежней компоновке и прокручиваются: их делают этапы 2 и 3. * Цвета и рамки — токены Pixel Life (DESIGN.md), новых цветовых ролей нет. Анимации нет: * интерфейсные переходы прежних экранов в v2 сняты (решение автора к v2). */ :root { --v2-bar: 60px; --v2-pad: 14px; } /* ---------- без движения ---------- */ #app.v2 *, #app.v2 *::before, #app.v2 *::after { animation: none !important; transition: none !important; } /* ---------- метка версии ---------- */ .topbar-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; } .version-tag, .version-text { display: inline-flex; align-items: center; min-height: 28px; margin: 0; padding: 2px 8px; color: var(--primary-ink); background: var(--identity); border: 0; font: 700 12px/1.2 "Segoe UI", system-ui, sans-serif; letter-spacing: 0; } /* Кнопка-метка: видимая плашка 28 px, область нажатия 44 px. */ button.version-tag { min-height: 44px; padding: 0; background: none; cursor: pointer; } button.version-tag:hover .version-text { background: #d9cdee; } button.version-tag:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } /* ---------- верхняя строка игровых экранов ---------- */ #app.v2.game-screen { padding: 0 0 12px; } #app.v2.game-screen.shell > .game-topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: var(--v2-bar); padding: 8px 0; border-bottom: 1px solid var(--edge); } #app.v2 .topbar-lead { flex: 0 1 auto; flex-wrap: wrap; min-width: 0; gap: 4px 14px; } #app.v2 .game-topbar .game-brand { font-size: 22px; white-space: nowrap; } #app.v2 .topbar-quarter { padding-left: 14px; } #app.v2 .topbar-actions { order: 2; flex: none; margin-left: auto; display: flex; align-items: center; gap: 6px; } #app.v2 .game-topbar .topbar-button, #app.v2 .game-topbar .people-toggle, #app.v2 .game-topbar .status-toggle { display: inline-flex; align-items: center; gap: 8px; width: auto; min-height: 44px; margin: 0; padding: 8px 12px; color: var(--text); background: var(--panel); border: 4px solid var(--edge); border-image: url("assets/pixel-frame.svg") 4 / 4px / 0 stretch; font: 600 14px/1.2 "Segoe UI", system-ui, sans-serif; cursor: pointer; text-align: left; } #app.v2 .game-topbar .status-toggle:hover, #app.v2 .game-topbar .people-toggle:hover, #app.v2 .game-topbar .topbar-button:hover { background: var(--choice-hover); border-image-source: url("assets/pixel-frame-amber.svg"); } #app.v2 .game-topbar .status-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } #app.v2 .game-topbar .sheet[data-open="true"] > .sheet-toggle, #app.v2 .status-toggle[aria-expanded="true"] { background: var(--choice-hover); border-image-source: url("assets/pixel-frame-amber.svg"); } .toggle-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; color: var(--primary-ink); background: var(--sig-warn); font: 700 12px/1 "Segoe UI", system-ui, sans-serif; } #app.v2 .game-topbar .people-panel { margin: 0; } /* Полоса шести параметров — в той же строке (шире 1280 px) или второй строкой. */ #app.v2 .game-topbar > .hud { order: 3; flex: 1 1 100%; min-width: 0; margin: 0; padding: 0; background: none; border: 0; border-image: none; } #app.v2 .game-topbar > .hud .hud-params { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px 14px; } #app.v2 .game-topbar > .hud .bar-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: baseline; gap: 3px 6px; margin: 0; font-size: 12px; } #app.v2 .hud .bar-row .label { grid-column: 1 / -1; grid-row: 1; color: var(--text); white-space: nowrap; overflow-wrap: normal; font-size: 12px; } #app.v2 .hud .bar-row .label.identity { color: var(--identity); } #app.v2 .hud .bar-row .val { grid-column: 2; grid-row: 2; align-self: center; font: 600 13px/1 "Segoe UI", system-ui, sans-serif; font-variant-numeric: tabular-nums; } #app.v2 .hud .bar-row .track { position: relative; grid-column: 1; grid-row: 2; align-self: center; height: 7px; border-radius: 0; background: #0e1424; } #app.v2 .hud.hud-compact .bar-row .track { grid-column: 1 / -1; } #app.v2 .hud .bar-row .track::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), var(--bg) calc(10% - 2px) 10%); } .lbl-short { display: none; } /* Заметка под шкалой — в листе «Статус»; в полосе — пометка «!», текст остаётся для скринридера. */ #app.v2 .hud .bar-row .bar-note { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } #app.v2 .hud .bar-row .bar-mark { position: absolute; right: 0; top: 0; color: var(--sig-warn); font: 700 12px/1.2 "Segoe UI", system-ui, sans-serif; } #app.v2 .hud.hud-compact .bar-row .label { grid-row: 1; } @media (min-width: 1280px) { #app.v2 .game-topbar > .hud { order: 1; flex: 1 1 480px; } } /* Узкая полоса в строке оболочки: короткие подписи, полные — для скринридера. */ #app.v2 .game-topbar > .hud { container-type: inline-size; } @container (max-width: 760px) { #app.v2 .hud .lbl-full { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } #app.v2 .hud .lbl-short { display: inline; } } /* ---------- листы раскрытия (prototype/sheet.js) ---------- */ #app.v2 .sheet-body, .sheet-body { position: fixed; z-index: 40; top: calc(var(--v2-bar) + 8px); right: 16px; bottom: 16px; left: auto; width: min(500px, calc(100vw - 32px)); max-height: none; margin: 0; padding: 0; display: flex; flex-direction: column; color: var(--text); background: var(--panel); border: 4px solid var(--edge); border-image: url("assets/pixel-frame-amber.svg") 4 / 4px / 0 stretch; font-size: 15px; line-height: 1.5; text-align: left; } #app.v2 .sheet-body[hidden], .sheet-body[hidden] { display: none; } #app.v2 .sheet-head, #app.v2 .people-panel .people-sheet-head { position: static; display: flex; flex: none; justify-content: space-between; align-items: flex-start; gap: 12px; margin: 0; padding: 14px 16px 12px 18px; background: var(--panel); border-bottom: 1px solid var(--edge); } .sheet-titles { min-width: 0; } #app.v2 .sheet-title { margin: 0; font: 600 26px/1.1 var(--display); color: var(--text); } .sheet-title:focus { outline: none; } .sheet-title:focus-visible { outline: 2px dashed var(--accent); outline-offset: 4px; } #app.v2 .sheet-sub { margin: 4px 0 0; color: var(--muted); font-size: 14px; } #app.v2 .sheet-close { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 44px; margin: 0; padding: 8px 12px; color: var(--text); background: var(--panel2); border: 1px solid var(--edge); font: 600 14px/1.2 "Segoe UI", system-ui, sans-serif; cursor: pointer; } #app.v2 .sheet-close:hover { border-color: var(--accent); } #app.v2 .sheet-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .sheet-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 18px 20px; } .sheet-backdrop { position: fixed; inset: 0; z-index: 39; background: rgba(5, 11, 22, .66); } .sheet-backdrop[hidden] { display: none; } @media (max-width: 760px) { #app.v2 .sheet-body, .sheet-body { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 85vh; max-height: 85dvh; } #app.v2 .sheet-title { font-size: 22px; } } /* Содержимое листов. */ .sheet-content > * + * { margin-top: 14px; } .sheet-content .shell-rail { display: grid; gap: 12px; font-size: 14px; } .sheet-content .signals { margin: 0; } .sheet-content .sig { margin: 6px 0 0; } .sheet-content .challenge-panel { margin: 0; } .sheet-content .challenge-panel > summary { pointer-events: none; } .sheet-content .challenge-panel > summary .challenge-toggle { display: none; } .sheet-content .challenge-body { grid-template-columns: minmax(0, 1fr); } .status-notes-list { display: grid; gap: 6px; margin: 0; padding: 0 0 0 12px; border-left: 2px solid var(--sig-warn); list-style: none; font-size: 14px; } #app.v2 .sheet-link { display: inline-flex; align-items: center; gap: 8px; width: auto; margin-top: 16px; } .about-lead { font-size: 15px; } .about-demo, .sheet-content .checkpoint-note { color: var(--muted); font-size: 14px; } .sheet-content .devbar { padding: 8px 0; } .sheet-content .devpanel { white-space: pre-wrap; font-size: 12px; overflow-wrap: anywhere; } .cons-answer { margin: 0; font-weight: 600; font-size: 16px; } .sheet-content .answer-cons { padding: 0; border: 0; font-size: 14px; } .sheet-content .cons-pick { width: 100%; } .cons-locked { color: var(--sig-warn); } .recover-rule { color: var(--muted); } /* «Люди» в общем листе: поля прежней панели. */ #app.v2 .people-panel[data-open="true"] .people-body { animation: none; } #app.v2 .people-body .sheet-content { padding-top: 4px; } /* ---------- окно без прокрутки ---------- */ #app.v2-fit { height: 100vh; height: 100dvh; padding: 0 0 12px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); row-gap: 0; align-items: stretch; } #app.v2-fit > * { grid-column: 1; min-width: 0; } #app.v2-fit > .game-topbar { grid-row: 1; } #app.v2-fit > .system-note { grid-row: 2; margin: 8px 0 0; } #app.v2-fit > .card { grid-row: 3; min-height: 0; margin-top: 12px; } #app.v2-fit > .sheet { position: static; grid-row: 1; width: 0; height: 0; margin: 0; padding: 0; border: 0; } /* Кадр вписан в свою область целиком: ширина = min(ширина, высота × пропорция). */ #app.v2-fit .split-art, #app.v2-fit .stage-art, #app.v2-fit .focus-map, #app.v2-fit .focus-preview { container-type: size; min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center; background: none; overflow: visible; } #app.v2-fit .split-art > .art, #app.v2-fit .stage-art > .art, #app.v2-fit .focus-map > .art, #app.v2-fit .focus-preview > .art { position: static; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; background: none; } #app.v2-fit .split-art .art-frame, #app.v2-fit .stage-art .art-frame, #app.v2-fit .focus-map .art-frame, #app.v2-fit .focus-preview .art-frame { flex: none; width: min(100cqw, calc(100cqh * var(--ar, 1.5))); height: auto; max-height: none; aspect-ratio: var(--ar, 1.5) !important; } #app.v2-fit .split-art .art-caption, #app.v2-fit .stage-art .art-caption, #app.v2-fit .focus-preview .art-caption { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Область текста: если не помещается, прокручивается только она. */ #app.v2-fit [data-v2-scroll] { min-height: 0; overflow-y: auto; overscroll-behavior: contain; } #app.v2-fit [data-v2-scroll]:focus-visible { outline: 2px dashed var(--accent); outline-offset: 2px; } /* Общие размеры текста карточек в окне. */ #app.v2-fit .card .kicker { margin-bottom: 6px; font-size: 13px; } #app.v2-fit .card h2 { margin-bottom: 8px; font-size: clamp(26px, 2.4vw, 34px); } #app.v2-fit .card p.flavor { margin: 0; font-size: 16px; line-height: 1.55; } #app.v2-fit .story-mood { margin: 8px 0 0; font-size: 14px; } #app.v2-fit .event-tags { margin: 0 0 6px; } /* ---------- ответы: текст и компактная строка «Последствий» ---------- */ #app.v2 .answers { gap: 8px; } /* Кнопка «Подробнее» — отдельной колонкой справа на всю высоту ответа: строка «Последствий» не ждёт её 44 px, ответ ниже. */ #app.v2 .answer { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "btn more" "line more"; align-content: start; } #app.v2 .answer > button.answer-button { grid-area: btn; } #app.v2 .answer > .answer-foot { display: contents; } #app.v2 .answer .answer-line { grid-area: line; padding: 3px 0 8px 14px; } #app.v2 .answer .answer-more { grid-area: more; align-self: center; margin: 6px 8px 6px 0; } #app.v2 .answer > button.answer-button { min-height: 40px; padding: 9px 14px 2px; font-size: 15px; line-height: 1.35; } #app.v2 .answer .choice-marks { margin-bottom: 3px; } #app.v2 .answer .choice-marks .class-badge, #app.v2 .answer .choice-marks .goal-mark { margin-bottom: 0; font-size: 11px; } #app.v2 .answer .lock { margin-top: 3px; font-size: 12px; } .answer-foot { display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding: 4px 8px 8px 14px; } .answer-line { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; min-width: 0; font-size: 12px; line-height: 1.5; } .answer-line .cons-chip { padding: 0 5px; } .line-cost { color: var(--text); font-size: 13px; } .cons-values-chip { color: var(--identity); } .cons-goal-chip, .cons-practice-chip { color: var(--green); } .cons-risk-chip { color: var(--sig-warn); border-style: dashed !important; white-space: normal !important; } .cons-risk-chip.cons-risk-danger { color: var(--sig-danger); border-style: solid !important; } .answer-line .cons-none { font-size: 14px; line-height: 1.2; } .answer-more { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; min-width: 44px; margin: 0; padding: 2px 8px; color: var(--muted); background: var(--panel); border: 1px solid var(--edge); font: 600 12px/1.2 "Segoe UI", system-ui, sans-serif; cursor: pointer; } .answer-more:hover { color: var(--text); border-color: var(--accent); } .answer-more:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .more-count { color: var(--accent); } .more-count-narrow { display: none; } .answer-more .more-icon { display: none; color: var(--accent); } .answer.is-locked .answer-line { opacity: .75; } /* Полоса ответов личной сцены и кризиса: столбцы одной высоты. */ #app.v2 .stage-personal .answer-cons, #app.v2 .stage-crisis .answer-cons { padding: 0; } /* ---------- отклик решения: одна строка, подробности в листе ---------- */ #app.v2 .choice-feedback.is-compact { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title more" "label more" "deltas more"; align-items: center; gap: 0 10px; margin: 0 0 8px; padding: 6px 10px; font-size: 13px; line-height: 1.35; } #app.v2 .choice-feedback.is-compact.has-outcome { grid-template-columns: 66px minmax(0, 1fr) auto; grid-template-areas: "art title more" "art label more" "art deltas more"; } #app.v2 .choice-feedback.is-compact > .feedback-art { grid-area: art; grid-column: auto; grid-row: auto; width: 66px; max-width: none; margin: 0; } #app.v2 .choice-feedback.is-compact > :not(.feedback-art) { grid-column: auto; } #app.v2 .choice-feedback.is-compact > .feedback-title { grid-area: title; } #app.v2 .choice-feedback.is-compact > .feedback-label { grid-area: label; } #app.v2 .choice-feedback.is-compact > .feedback-deltas { grid-area: deltas; } #app.v2 .choice-feedback.is-compact > .feedback-more { grid-area: more; } #app.v2 .choice-feedback.is-compact .feedback-art .art-caption { display: none; } #app.v2 .choice-feedback.is-compact .feedback-title { grid-area: title; font-size: 13px; } #app.v2 .choice-feedback.is-compact .feedback-label { grid-area: label; margin: 1px 0; font-size: 14px; } #app.v2 .choice-feedback.is-compact .feedback-deltas { grid-area: deltas; gap: 2px 10px; } #app.v2 .choice-feedback.is-compact .feedback-delta, #app.v2 .choice-feedback.is-compact .feedback-zero { font-size: 12px; } #app.v2 .choice-feedback.is-compact .echo-lines, #app.v2 .choice-feedback.is-compact .feedback-auto-note { display: none; } .feedback-more { grid-area: more; position: relative; z-index: 1; min-height: 44px; min-width: 44px; margin: 0; padding: 2px 10px; color: var(--text); background: var(--panel); border: 1px solid var(--edge); font: 600 12px/1.2 "Segoe UI", system-ui, sans-serif; cursor: pointer; } .feedback-more:hover { border-color: var(--accent); } .feedback-more:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .sheet-content .choice-feedback.is-full { margin: 0; } .sheet-content .choice-feedback .feedback-art { margin: 0 0 10px; } .sheet-content .echo-lines { margin: 10px 0 0; padding: 0 0 0 16px; font-size: 14px; } #app.v2-fit .feedback-slot .choice-feedback { margin-top: 0; } /* ---------- 05 · Фокус ---------- */ .focus-notes { display: grid; gap: 4px; max-height: 4.5em; font-size: 14px; line-height: 1.45; } .focus-notes > * { margin: 0; } .focus-notes .flavor { font-size: 14px !important; line-height: 1.45 !important; } .focus-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 12px; background: var(--panel2); border: 1px solid var(--edge); font-size: 13px; line-height: 1.4; } .focus-goal { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0; } .focus-status .sig-chips { flex: 0 1 auto; } .focus-goal .status-label { color: var(--muted); } .focus-goal .goal-meter { margin: 0; } .sig-chips { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; padding: 0; list-style: none; } .sig-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 1px 8px 1px 6px; font-size: 12px; line-height: 1.5; background: var(--panel); border: 1px solid var(--edge); } .sig-chip .sig-icon { font-weight: 700; } .sig-chip-attention { color: var(--sig-warn); border-style: dashed; border-color: var(--sig-warn); } .sig-chip-danger { color: var(--sig-danger); border-width: 1px 1px 1px 4px; border-color: var(--sig-danger); } .sig-chip-assigned { color: var(--sig-assigned); border: 3px double var(--sig-assigned); } .sig-chip-counter { color: var(--text); border-color: var(--muted); } #app.v2 .focus-status-more { justify-self: start; width: auto; min-height: 44px; margin: 0; padding: 2px 10px; font-size: 12px; font-weight: 600; border: 1px solid var(--edge); border-image: none; background: var(--panel); } #app.v2 .skills-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin: 0; padding: 6px 12px; text-align: left; } .skills-btn-mark { color: var(--accent); } .skills-btn-text { display: grid; gap: 1px; min-width: 0; } .skills-btn-text strong { font-size: 14px; } .skills-btn-sub { color: var(--muted); font-size: 12px; font-weight: 400; overflow-wrap: anywhere; } .recover-note { color: var(--muted); } @media (min-width: 761px) { #app.v2-fit .card.focus-screen { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(400px, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 0; height: 100%; padding: 0; background: none; border: 0; border-image: none; } #app.v2-fit .focus-screen .split-art { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 10px; padding: 0 16px 0 0; container-type: normal; } #app.v2-fit .focus-screen .split-art { align-items: stretch; } #app.v2-fit .focus-map { flex: 39 1 0; width: 100%; } #app.v2-fit .focus-preview { flex: 61 1 0; width: 100%; position: static; margin: 0; } #app.v2-fit .focus-screen .split-head { grid-column: 2; grid-row: 1; padding: 12px 20px 4px; } #app.v2-fit .focus-screen .split-head h2 { margin-bottom: 6px; } #app.v2-fit .focus-screen .split-side { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: 7px; min-height: 0; padding: 4px 20px 12px; } #app.v2-fit .focus-screen .split-side > .focus-status { order: 1; } #app.v2-fit .focus-screen .focus-list { order: 2; gap: 4px; } #app.v2-fit .focus-screen .split-side > .skills-btn { order: 3; } } #app.v2-fit .focus-list .focus-choice { grid-template-columns: 78px 28px minmax(0, 1fr); gap: 0 10px; padding: 3px 10px 3px 3px; min-height: 0; } #app.v2-fit .focus-choice .art-thumb { width: 78px; } #app.v2-fit .focus-num { width: 28px; height: 28px; font-size: 14px; } #app.v2-fit .focus-title { font-size: 15px; } #app.v2-fit .focus-choice .hint { margin-top: 0; font-size: 12px; line-height: 1.35; } /* ---------- 06 · Рабочая ситуация ---------- */ @media (min-width: 761px) { #app.v2-fit .card.screen-split.event-screen { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(420px, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 100%; padding: 0; background: none; border: 0; border-image: none; } #app.v2-fit .event-screen .split-art { grid-column: 1; grid-row: 1 / span 2; padding-right: 16px; border-right: 2px solid var(--accent); } #app.v2-fit .event-screen.story-card .split-art { border-right-color: var(--green); } #app.v2-fit .event-screen .split-head { grid-column: 2; grid-row: 1; padding: 16px 22px 4px; } #app.v2-fit .event-screen .split-side { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 4px 22px 16px; } #app.v2-fit .event-screen .split-side > .challenge-rule, #app.v2-fit .event-screen .split-side > .deltas, #app.v2-fit .event-screen .split-side > .sig-inline { flex: none; margin: 0; } #app.v2-fit .event-text { flex: 0 1 auto; min-height: 3.2em; } #app.v2-fit .event-screen .split-side > .feedback-slot, #app.v2-fit .event-screen .split-side > .answers { flex: none; } } /* ---------- 07–10 · общие части этапов ---------- */ #app.v2-fit .card.event-stage { height: 100%; gap: 0; background: var(--panel); } #app.v2-fit .stage-head { padding: 14px 22px 4px; } #app.v2-fit .stage-head .kicker { margin-bottom: 4px; } #app.v2-fit .stage-head h2 { margin: 0 0 4px; font-size: clamp(26px, 2.4vw, 34px); } #app.v2-fit .stage-sub { font-size: 13px; } #app.v2-fit .stage-body { padding: 0; background: none; } #app.v2-fit .stage-text { padding: 4px 22px 0; } #app.v2-fit .stage-text > * + * { margin-top: 8px; } #app.v2-fit .stage-choices { padding: 8px 22px 14px; } #app.v2-fit .stage-meta { padding: 0 22px; gap: 8px; } #app.v2-fit .stage-art { background: var(--art-bg); } #app.v2-fit .stage-art .art-frame { max-height: none; } #app.v2-fit .stage-text .stage-meta { padding: 0; gap: 8px; background: none; } #app.v2-fit .stage-text .news-fact .news-source { font-size: 14px; } #app.v2-fit .stage-text .challenge-rule { margin: 0; } #app.v2-fit .stage-text .deltas { margin: 0; } #app.v2-fit .stage-text .cast-person .portrait { width: 32px; height: 32px; } #app.v2-fit .stage-text .cast-list { gap: 6px 14px; } #app.v2-fit .stage-text .stage-label { margin-bottom: 4px; } /* 07 · сюжет: кнопка «Ход истории» с клетками двенадцати глав. */ .story-strip { padding: 2px 22px 0; } .story-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; width: 100%; min-height: 44px; margin: 0; padding: 6px 10px; color: var(--text); background: var(--panel2); border: 1px solid var(--edge); text-align: left; cursor: pointer; font: 600 13px/1.3 "Segoe UI", system-ui, sans-serif; } .story-toggle:hover { border-color: var(--green); } .story-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .story-cells-mini { display: inline-flex; gap: 3px; flex: 0 1 auto; } .story-cells-mini .story-cell { flex: none; width: 12px; height: 10px; } .story-cells-mini .story-cell.is-now { outline-width: 1px; outline-offset: 1px; } .story-toggle-more { margin-left: auto; color: var(--muted); font-weight: 400; font-size: 12px; } .sheet-content .story-meta { display: grid; gap: 16px; padding: 0; background: none; } .sheet-content .story-acts { grid-template-columns: minmax(0, 1fr); gap: 8px; } /* 08 · личная сцена: кнопка обещаний у собеседника. */ .promises-toggle { justify-self: start; width: auto; min-height: 44px; margin: 6px 0 0; padding: 2px 10px; color: var(--accent); background: var(--panel); border: 1px dashed var(--accent); font: 600 12px/1.2 "Segoe UI", system-ui, sans-serif; cursor: pointer; } .promises-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .sheet-content .talk-promises { margin: 0; } /* 10 · кризис: сигналы плашками. */ #app.v2-fit .crisis-signals .sig-chips { margin-top: 2px; } @media (min-width: 761px) { /* 07 · сюжет: кадр сверху, глава под ним — слева заголовок и текст, справа ответы. */ #app.v2-fit .card.event-stage.stage-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, .9fr); grid-template-rows: minmax(160px, 1fr) auto auto auto; grid-template-areas: "art art" "head choices" "strip choices" "text choices"; } #app.v2-fit .stage-story > .stage-art { grid-area: art; border-bottom: 4px solid var(--green); } #app.v2-fit .stage-story > .stage-head { grid-area: head; border-top: 0; text-align: left; padding-top: 12px; } #app.v2-fit .stage-story .stage-head .event-tags { justify-content: flex-start; } #app.v2-fit .stage-story > .story-strip { grid-area: strip; } #app.v2-fit .stage-story > .stage-body { display: contents; } #app.v2-fit .stage-story .stage-text { grid-area: text; max-height: 22vh; padding-bottom: 14px; } #app.v2-fit .stage-story .stage-choices { grid-area: choices; padding-top: 12px; border-left: 1px solid var(--edge); } /* 08 · личная сцена: кадр слева, собеседник и реплика справа, ответы полосой внизу. */ #app.v2-fit .card.event-stage.stage-personal { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(360px, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "art head" "art who" "art talk" "body body"; } #app.v2-fit .stage-personal > .stage-art { grid-area: art; border-right: 2px solid var(--accent); } #app.v2-fit .stage-personal > .stage-head { grid-area: head; } #app.v2-fit .stage-personal > .talk-who { grid-area: who; padding: 4px 22px 10px; } #app.v2-fit .stage-personal > .stage-talk { grid-area: talk; align-self: start; max-height: 100%; padding: 4px 22px 12px; } #app.v2-fit .stage-personal > .stage-body { grid-area: body; border-top: 1px solid var(--edge); } #app.v2-fit .stage-personal .answers { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } /* 09 · новости: кадр сверху, полоса выпуска, слева заголовок и факт, справа ответы. */ #app.v2-fit .card.event-stage.stage-news { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, 1fr); grid-template-rows: minmax(160px, 1fr) auto auto auto; grid-template-areas: "art art" "bar bar" "head choices" "text choices"; } #app.v2-fit .stage-news > .stage-art { grid-area: art; } #app.v2-fit .stage-news > .stage-bar { grid-area: bar; padding: 8px 22px; } #app.v2-fit .stage-news > .stage-head { grid-area: head; padding-top: 12px; } #app.v2-fit .stage-news > .stage-body { display: contents; } #app.v2-fit .stage-news .stage-text { grid-area: text; max-height: 24vh; padding-bottom: 14px; } #app.v2-fit .stage-news .stage-choices { grid-area: choices; padding-top: 12px; border-left: 1px solid var(--edge); } #app.v2-fit .bar-date { font-size: 16px; } /* 10 · кризис: кадр сверху, заголовок и текст слева, причина и счётчик справа, решения полосой. */ #app.v2-fit .card.event-stage.stage-crisis { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); grid-template-rows: minmax(160px, 1fr) auto auto; grid-template-areas: "art art" "head meta" "body body"; } #app.v2-fit .stage-crisis > .stage-art { grid-area: art; } #app.v2-fit .stage-crisis > .stage-head { grid-area: head; padding-top: 12px; } #app.v2-fit .stage-crisis .stage-head h2 { font-size: clamp(30px, 3vw, 44px); line-height: 1.1; margin-bottom: 6px; } #app.v2-fit .stage-crisis > .stage-meta { grid-area: meta; margin: 12px 22px 6px 0; padding: 2px 0 2px 18px; gap: 8px; background: none; } #app.v2-fit .stage-crisis > .stage-body { grid-area: body; } #app.v2-fit .stage-crisis .crisis-n { font-size: 48px; } #app.v2-fit .stage-crisis .crisis-count { font-size: 30px; } #app.v2-fit .stage-crisis .crisis-cause-text { font-size: 16px; } #app.v2-fit .stage-crisis .answers { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } } /* ---------- телефон ---------- */ @media (max-width: 760px) { #app.v2.game-screen.shell > .game-topbar { gap: 6px 8px; padding: 6px 0 8px; min-height: 0; } #app.v2 .topbar-lead { flex: 0 1 auto; width: auto; min-width: 0; gap: 8px; justify-content: flex-start; } #app.v2 .game-topbar .game-brand { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } #app.v2 .topbar-quarter { padding-left: 8px; } #app.v2 .tq-main { font-size: 15px; } #app.v2 .tq-sub { font-size: 11px; } #app.v2 .topbar-actions { gap: 4px; } #app.v2 .topbar-actions .toggle-label, #app.v2 .people-toggle-icon { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } #app.v2 .game-topbar .topbar-button, #app.v2 .game-topbar .people-toggle, #app.v2 .game-topbar .status-toggle { justify-content: center; gap: 4px; min-width: 44px; padding: 6px 8px; } #app.v2 .game-topbar > .hud .hud-params { gap: 0 6px; } #app.v2 .hud .bar-row { gap: 2px 4px; } #app.v2 .hud .bar-row .label { font-size: 11px; } #app.v2 .hud .bar-row .val { font-size: 12px; } #app.v2 .hud .bar-row .track { height: 5px; } #app.v2 .lbl-full { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } #app.v2 .lbl-short { display: inline; } #app.v2-fit > .card { margin-top: 8px; } #app.v2-fit .card.screen-split, #app.v2-fit .card.event-stage { display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 0; background: var(--panel); } #app.v2-fit .card .kicker { font-size: 12px; margin-bottom: 2px; } #app.v2-fit .card h2, #app.v2-fit .stage-head h2 { font-size: 22px; margin-bottom: 2px; } #app.v2-fit .card p.flavor { font-size: 15px; line-height: 1.5; } #app.v2-fit .split-head, #app.v2-fit .stage-head { flex: none; padding: 10px 12px 6px !important; background: var(--panel); } #app.v2-fit .split-art, #app.v2-fit .stage-art { flex: 1 1 0; min-height: 96px; max-height: 42vh; max-height: 42dvh; margin: 0; padding: 0 !important; border: 0 !important; background: var(--art-bg); } #app.v2-fit .split-side { display: flex; flex-direction: column; gap: 8px; flex: 0 1 auto; min-height: 0; padding: 8px 12px 10px !important; } #app.v2-fit .event-text { flex: 0 1 auto; min-height: 4.4em; } #app.v2-fit .stage-body { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; } #app.v2-fit .stage-text { flex: 0 1 auto; min-height: 4.4em; padding: 8px 12px 0; } #app.v2-fit .stage-choices { flex: none; padding: 8px 12px 10px; } #app.v2-fit .stage-meta, #app.v2-fit .story-strip { flex: none; padding: 6px 12px 0; } #app.v2-fit .stage-bar { flex: none; padding: 6px 12px; gap: 4px 10px; font-size: 13px; } #app.v2-fit .bar-date { font-size: 14px; } #app.v2-fit .answer > button.answer-button { padding: 8px 12px 1px; font-size: 14px; } #app.v2-fit .answer .answer-line { padding: 2px 0 6px 12px; } #app.v2-fit .answer .answer-more { margin: 4px 6px 4px 0; } #app.v2-fit .answers { gap: 6px; } /* Кнопка «Подробнее» на телефоне — значок и счётчик, имя кнопки — в aria-label. */ #app.v2-fit .answer-more .more-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } #app.v2-fit .answer-more .more-icon { display: inline-block; } /* Значки класса и цели — в строку с текстом ответа. */ #app.v2-fit .answer .choice-marks { display: inline; margin: 0; } #app.v2-fit .answer .choice-marks .class-badge, #app.v2-fit .answer .choice-marks .goal-mark { margin: 0 4px 2px 0; padding: 0 4px; } #app.v2-fit .answer .answer-text { display: inline; } #app.v2-fit .answer .lock { display: flex; } /* Цена словами на телефоне — в листе «Подробнее»: счётчик на кнопке её учитывает. */ #app.v2-fit .answer-line .line-cost { display: none; } #app.v2-fit .more-count-wide { display: none; } #app.v2-fit .more-count-narrow { display: inline; } #app.v2 .tq-grade { display: none; } /* 05 · фокус: заголовок, напоминания, карта, цель и сигналы, пять фокусов, навыки. */ #app.v2-fit .focus-screen .split-art { flex: 1 1 0; min-height: 84px; max-height: 26vh; display: flex; padding: 0 !important; } #app.v2-fit .focus-screen .split-art { align-items: stretch; } #app.v2-fit .focus-map { flex: 1 1 0; width: 100%; } #app.v2-fit .focus-preview { display: none; } #app.v2-fit .focus-screen .split-side { flex: none; gap: 6px; } #app.v2-fit .focus-notes { max-height: 4.4em; font-size: 13px; } #app.v2-fit .focus-status { padding: 6px 8px; gap: 4px; font-size: 12px; } #app.v2-fit .focus-status .goal-meter { display: none; } #app.v2-fit .focus-goal-personal { display: none; } #app.v2-fit .focus-list .focus-choice { position: relative; grid-template-columns: 66px minmax(0, 1fr); gap: 0 10px; padding: 4px 8px 4px 4px; align-items: center; } #app.v2-fit .focus-choice .art-thumb { width: 66px; } #app.v2-fit .focus-choice .focus-num { position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; font-size: 12px; background: var(--bg); } #app.v2-fit .focus-title { font-size: 14px; line-height: 1.25; } #app.v2-fit .focus-choice .hint { font-size: 11px; line-height: 1.3; } #app.v2-fit .focus-text { display: block; } #app.v2-fit .focus-title { display: block; } #app.v2-fit .focus-choice .hint { display: inline; } #app.v2-fit .focus-choice .goal-hint::before { content: " · "; } #app.v2-fit .focus-choice .recover-note { display: none; } #app.v2-fit .focus-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } #app.v2-fit .focus-status .focus-goal { flex: 1 1 200px; } #app.v2-fit .focus-status-more { display: none; } #app.v2-fit .stage-personal .promises-toggle { margin-top: 2px; } #app.v2-fit .focus-status .sig-chip .sig-chip-level { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } #app.v2-fit .focus-screen .split-head { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; } #app.v2-fit .focus-screen .split-head h2 { font-size: 19px; } #app.v2-fit .focus-notes { flex: 0 1 auto; min-height: 2.9em; } #app.v2-fit .skills-btn-sub .skills-levels { display: none; } #app.v2-fit .focus-list { gap: 4px; } #app.v2-fit .skills-btn { min-height: 44px; padding: 4px 10px; } #app.v2-fit .skills-btn-sub { font-size: 11px; } #app.v2-fit .art-marker-num { width: 24px; height: 24px; font-size: 13px; } /* 07–10 на телефоне: заголовок → кадр → состав и счётчик → текст → ответы. */ #app.v2-fit .stage-personal .talk-who { flex: none; padding: 6px 12px 0; gap: 10px; } #app.v2-fit .stage-personal .talk-who .portrait { width: 44px; height: 44px; } #app.v2-fit .stage-personal .talk-who .person-name { font-size: 18px; } #app.v2-fit .stage-personal .talk-who .person-word { font-size: 13px; } #app.v2-fit .stage-personal .talk-who .partner-mood, #app.v2-fit .stage-personal .talk-who .rel-scale { margin-top: 2px; } #app.v2-fit .stage-personal .stage-talk { flex: 0 1 auto; min-height: 4.4em; padding: 8px 12px 0; } #app.v2-fit .stage-personal .talk-text { padding: 10px 12px; } #app.v2-fit .stage-personal .talk-text::before { display: none; } #app.v2-fit .stage-personal .stage-body { flex: none; } #app.v2-fit .stage-personal .answers, #app.v2-fit .stage-crisis .answers { grid-template-columns: minmax(0, 1fr); } #app.v2-fit .stage-crisis .stage-meta { order: 3; flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; padding: 6px 12px 0 12px; border: 0; } #app.v2-fit .stage-crisis .stage-head { order: 1; } #app.v2-fit .stage-crisis .stage-art { order: 2; } #app.v2-fit .stage-crisis .stage-body { order: 4; } #app.v2-fit .stage-crisis .stage-head h2 { font-size: 26px; } #app.v2-fit .stage-crisis .stage-head .flavor { font-size: 14px; } #app.v2-fit .stage-crisis .crisis-cause { display: flex; gap: 6px; align-items: baseline; } #app.v2-fit .stage-crisis .crisis-cause .stage-label { margin: 0; } #app.v2-fit .stage-crisis .crisis-n { font-size: 30px; } #app.v2-fit .stage-crisis .crisis-count { font-size: 22px; white-space: nowrap; } #app.v2-fit .stage-crisis .crisis-counter { display: flex; align-items: center; gap: 8px; } #app.v2-fit .stage-crisis .crisis-counter .sig-inline { margin: 0; padding: 2px 6px; font-size: 12px; } #app.v2-fit .stage-crisis .crisis-signals .stage-label { display: none; } } /* ===================================================================== * Этап 2: 01 меню, 02 профессия, 03 ценности, 04 планирование, 11 ревью, 12 итоги, 13 финал. * Те же правила окна: страница не прокручивается, вторичное — в листе «Подробнее» (detail). * ===================================================================== */ /* Кнопка листа подробностей: тихая, рамка в одну линию, область нажатия 44 px. */ .detail-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; min-height: 44px; margin: 0; padding: 4px 12px; color: var(--text); background: var(--panel); border: 1px solid var(--edge); font: 600 13px/1.2 "Segoe UI", system-ui, sans-serif; cursor: pointer; text-align: center; } .detail-btn:hover { border-color: var(--accent); } .detail-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .sheet-content .sheet-facts { display: grid; gap: 10px; margin: 0; font-size: 15px; line-height: 1.5; } .sheet-content .sheet-facts .cf-line { grid-template-columns: minmax(0, 1fr); gap: 2px; } .sheet-content .gs-block { padding-top: 10px; border-top: 1px dashed var(--edge); } .sheet-content .gs-label { color: var(--muted); } .sheet-content .gs-list, .sheet-content .gs-text { font-size: 15px; } .sheet-content .gs-target .goal-cell { border-color: var(--muted); } /* Сообщение над экраном (?new=1, seed) — одной строкой, место окна дорогое. */ #app.v2 .system-note { padding: 6px 12px; gap: 4px; } #app.v2 .system-note .notice { font-size: 13px; line-height: 1.35; } /* ---------- 01 · главное меню ---------- */ #app.v2-menu { display: flex; flex-direction: column; height: 100vh; height: 100dvh; padding-bottom: 12px; } #app.v2-menu > .system-note { flex: none; margin: 0 0 8px; } #app.v2-menu > .menu-home-wrap { flex: 1 1 auto; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto auto; } #app.v2-menu .menu-art { min-height: 0; display: flex; } #app.v2-menu .menu-art .art-frame { flex: 1; height: auto; min-height: 0; } #app.v2-menu .menu-hero { min-height: 0; } #app.v2-menu .menu-actions { padding-top: 16px; } #app.v2-menu .menu-meta { margin-top: 10px; } /* ---------- 02 · исходный опыт ---------- */ #app.v2-fit .card.class-screen { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; height: 100%; } #app.v2-fit .class-stage { min-height: 0; grid-template-rows: auto minmax(0, 1fr); } #app.v2-fit .class-head { gap: 6px; padding: 14px 24px 0; } #app.v2-fit .class-head h2 { font-size: clamp(26px, 2.6vw, 38px); } #app.v2-fit .class-head .start-lead { font-size: 15px; line-height: 1.45; } #app.v2-fit .class-head .gender-switch { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; } #app.v2-fit .class-head .gender-legend { float: left; margin: 0; padding: 0; } #app.v2-fit .class-options { min-height: 0; height: 100%; align-items: stretch; padding: 6px 24px 14px; } #app.v2-fit .class-option { grid-template-rows: minmax(0, 1fr) auto; min-height: 0; align-content: stretch; gap: 6px; } #app.v2-fit .class-pick { grid-template-rows: minmax(0, 1fr) auto; height: 100%; min-height: 0; gap: 8px; } #app.v2-fit .class-fig { height: 100%; min-height: 0; } #app.v2-fit .class-name { min-height: 46px; font-size: 18px; } #app.v2-fit .class-shift { min-height: 0; } #app.v2-fit .class-detail { grid-template-columns: 88px minmax(0, 1.3fr) minmax(260px, 1fr) auto; gap: 10px 22px; margin: 0; padding: 12px 20px; } #app.v2-fit .class-face { width: 88px; height: 88px; } #app.v2-fit .class-detail-name { margin: 0 0 6px; font-size: 24px; } #app.v2-fit .class-detail-facts { gap: 5px; font-size: 13px; line-height: 1.4; } #app.v2-fit .class-detail-facts .cf-flavor { font-size: 14px; } #app.v2-fit .class-detail .cf-note { display: none; } #app.v2-fit .class-detail .class-params { gap: 4px; } #app.v2-fit .class-detail .cp-row { font-size: 12px; } #app.v2-fit .class-detail .cp-caption { margin-bottom: 4px; } #app.v2-fit .class-confirm { gap: 8px; justify-items: stretch; } #app.v2-fit .class-confirm button.choice { padding: 12px 18px; font-size: 16px; } /* Сдвиги под именем профессии стоят на иллюстрации: тёмная подложка держит контраст на любом кадре. */ #app.v2-fit .class-shift { min-height: 0; justify-self: center; padding: 1px 6px; background: rgba(9, 21, 38, .86); } @media (max-width: 760px) { /* 01 · меню: заголовок, срок забега, «Продолжить», «Новая игра», пара «Сохранения | Как играть», дом на остаток. */ #app.v2-menu > .menu-home-wrap { grid-template-areas: "bar" "head" "meta" "actions" "art"; grid-template-rows: auto auto auto auto minmax(0, 1fr); } #app.v2-menu .menu-hero { padding: 14px 0 0; } #app.v2-menu .menu-hero h1 { margin-bottom: 8px; font-size: clamp(36px, 10vw, 52px); } #app.v2-menu .menu-hero .tagline { font-size: 20px; } #app.v2-menu .menu-meta { margin: 8px 0 0; } #app.v2-menu .menu-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-top: 12px; } #app.v2-menu .menu-actions > .menu-action { grid-column: 1 / -1; } #app.v2-menu .menu-actions > [data-saves], #app.v2-menu .menu-actions > [data-help] { grid-column: auto; } #app.v2-menu.menu-home .menu-actions button.menu-action { min-height: 56px; padding: 8px 14px; gap: 12px; font-size: 20px; } #app.v2-menu.menu-home .menu-actions [data-saves], #app.v2-menu.menu-home .menu-actions [data-help] { font-size: 17px; padding: 8px 10px; gap: 8px; } #app.v2-menu .menu-actions [data-saves] .menu-sub { display: none; } #app.v2-menu .menu-art { margin: 12px 0 0; } #app.v2-menu .menu-art .art-frame { height: auto; } /* 02 · профессия: шапка, пять строк-профессий, полоса выбранной. */ #app.v2-fit .card.class-screen { gap: 0; margin-top: 4px; } #app.v2-fit .class-stage { display: flex; flex-direction: column; margin: 0; border: 0; } #app.v2-fit .class-head { flex: none; gap: 4px; padding: 6px 0 8px; } #app.v2-fit .class-head .kicker { font-size: 12px; } #app.v2-fit .class-head h2 { font-size: 22px; } #app.v2-fit .class-head .start-lead { font-size: 13px; line-height: 1.4; } #app.v2-fit .class-head .gender-legend { font-size: 12px; } #app.v2-fit .class-options { flex: 0 1 auto; height: auto; gap: 6px; padding: 0; } #app.v2-fit .class-option { grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 0 12px; padding: 4px 10px 4px 4px; } #app.v2-fit .class-pick { display: contents; } #app.v2-fit .class-fig { grid-column: 1; grid-row: 1 / span 2; width: 44px; height: 52px; overflow: hidden; } #app.v2-fit .class-fig .art-image { object-fit: cover; object-position: 50% 0; transform: none !important; } #app.v2-fit .class-name { grid-column: 2; grid-row: 1; min-height: 0; font-size: 18px; } #app.v2-fit .class-shift { display: block; grid-column: 2; grid-row: 2; min-height: 0; text-align: left; font-size: 12px; color: var(--muted); } #app.v2-fit .class-option .class-facts { display: none; } #app.v2-fit .class-detail { position: static; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 8px 0 0; padding: 8px 10px; } #app.v2-fit .class-detail-text { display: block; } #app.v2-fit .class-detail-name, #app.v2-fit .class-detail-facts .cf-flavor { display: none; } #app.v2-fit .class-detail-facts { font-size: 12px; gap: 3px; } #app.v2-fit .class-detail-facts .cf-line { grid-template-columns: minmax(0, 1fr); gap: 0; } #app.v2-fit .class-detail-facts .cf-tag { display: inline; margin-right: 6px; } #app.v2-fit .class-detail-facts .cf-line { display: block; } /* Шесть стартовых значений одной строкой: короткая подпись, число и отличие профессии. */ #app.v2-fit .class-detail-params { display: block; } #app.v2-fit .class-detail-params .cp-caption { display: none; } #app.v2-fit .class-detail .class-params { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; } #app.v2-fit .class-detail .cp-row { grid-template-columns: auto; grid-template-rows: auto auto; justify-items: start; gap: 0; font-size: 11px; } #app.v2-fit .class-detail .cp-row .cells { display: none; } #app.v2-fit .class-detail .cp-val { font-size: 14px; } #app.v2-fit .class-detail .cp-delta { font-size: 11px; } #app.v2-fit .class-confirm { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; } #app.v2-fit .class-picked { display: none; } #app.v2-fit .class-confirm button.choice { white-space: normal; padding: 10px 14px; font-size: 16px; } } @media (max-width: 760px) { #app.v2-menu.menu-home .menu-actions [data-saves], #app.v2-menu.menu-home .menu-actions [data-help] { font-size: 15px; padding: 8px; } #app.v2-menu .menu-actions [data-saves] .menu-label, #app.v2-menu .menu-actions [data-help] .menu-label { overflow-wrap: normal; } #app.v2-menu .menu-actions [data-saves] .menu-icon, #app.v2-menu .menu-actions [data-help] .menu-icon { width: 22px; } #app.v2-fit .class-detail .cp-row { grid-template-columns: auto minmax(0, 1fr); column-gap: 3px; align-items: baseline; } #app.v2-fit .class-detail .cp-label { grid-column: 1 / -1; } } /* ---------- 03 · ценности ---------- */ #app.v2-fit .card.values-screen { display: flex; min-height: 0; height: 100%; padding: 16px 24px; } #app.v2-fit .values-panel { flex: 1; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 14px; width: 100%; min-height: 0; max-width: 1180px; padding: 18px 28px 18px; } #app.v2-fit .values-head { gap: 6px; grid-template-columns: minmax(0, 1fr) auto; align-items: end; } #app.v2-fit .values-head > * { grid-column: 1; } #app.v2-fit .values-head h2 { font-size: clamp(24px, 2.2vw, 32px); } #app.v2-fit .values-head .values-rule-btn { grid-column: 2; grid-row: 2 / span 2; align-self: end; } #app.v2-fit .values-rule { display: none; } #app.v2-fit .values-body { min-height: 0; gap: 24px; align-items: stretch; } #app.v2-fit .values-list { gap: 8px; align-content: start; } .value-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: stretch; } #app.v2-fit .card button.value-choice { padding: 9px 44px 9px 10px; gap: 12px; } #app.v2-fit .card button.value-choice::before { top: 10px; } #app.v2-fit .value-main { gap: 2px; } #app.v2-fit .value-main strong { font-size: 16px; } #app.v2-fit .value-text { font-size: 13px; line-height: 1.4; } #app.v2-fit .value-about { display: none; min-width: 44px; padding: 4px; font-size: 16px; } #app.v2-fit .values-side { position: static; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 12px; min-height: 0; } #app.v2-fit .values-compass { width: auto; height: 100%; max-height: 330px; min-height: 0; aspect-ratio: 1; justify-self: center; } #app.v2-fit .values-actions { gap: 8px; } #app.v2-fit .values-actions button.choice { padding: 11px 16px; } #app.v2-fit .values-slots .value-slot { min-height: 44px; } .sheet-content .values-rule-list, .sheet-content .value-sheet-text { margin: 0; font-size: 15px; line-height: 1.5; } .sheet-content .values-rule-list { display: grid; gap: 8px; padding-left: 18px; } @media (max-width: 760px) { #app.v2-fit .card.values-screen { margin: 4px 0 0; padding: 0; } #app.v2-fit .values-panel { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-left: 4px solid var(--edge); border-right: 4px solid var(--edge); } #app.v2-fit .values-head { grid-template-columns: minmax(0, 1fr); gap: 4px; } #app.v2-fit .values-head .kicker { font-size: 12px; } #app.v2-fit .values-head h2 { font-size: 21px; } #app.v2-fit .values-head .start-lead { font-size: 13px; line-height: 1.4; } #app.v2-fit .values-head .values-rule-btn { grid-column: 1; grid-row: auto; justify-self: start; min-height: 40px; } #app.v2-fit .values-body { display: flex; flex-direction: column; gap: 8px; min-height: 0; } #app.v2-fit .values-list { gap: 5px; } #app.v2-fit .card button.value-choice { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 6px 40px 6px 8px; } #app.v2-fit .card button.value-choice::before { top: 8px; right: 10px; } #app.v2-fit .value-icon { width: 30px; height: 30px; } #app.v2-fit .value-icon .icon { width: 18px; height: 18px; } #app.v2-fit .value-main strong { font-size: 15px; } #app.v2-fit .value-protects { font-size: 12px; line-height: 1.35; } #app.v2-fit .value-text { display: none; } #app.v2-fit .value-about { display: inline-flex; } #app.v2-fit .values-side { display: block; } #app.v2-fit .values-slots { display: none; } #app.v2-fit .values-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 8px; } #app.v2-fit .values-actions .values-count { grid-column: 1 / -1; font-size: 14px; } #app.v2-fit .values-actions button.choice { padding: 10px 10px; font-size: 15px; } #app.v2-fit .values-actions [data-values-back] { grid-row: 2; grid-column: 1; } #app.v2-fit .values-actions [data-values-next] { grid-row: 2; grid-column: 2; } } /* ---------- 04 · планирование ---------- */ #app.v2-fit .card.plan-screen { display: flex; min-height: 0; height: 100%; padding: 12px 20px; gap: 0; } #app.v2-fit .plan-board { flex: 1; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 10px; min-height: 0; max-width: 1280px; padding: 14px 22px 16px; } #app.v2-fit .plan-board > .plan-guide { display: none; } #app.v2-fit .plan-head { gap: 4px 24px; } #app.v2-fit .plan-head h2 { font-size: clamp(24px, 2.2vw, 32px); } #app.v2-fit .plan-head p.flavor { margin: 2px 0 0; font-size: 15px; line-height: 1.45; max-width: 80ch; } #app.v2-fit .plan-head .plan-note { font-size: 13px; } #app.v2-fit .plan-head .plan-horizon { grid-row: 1 / span 2; padding: 8px 12px; gap: 4px; min-width: 220px; } #app.v2-fit .plan-head .plan-guide-btn { grid-column: 2; grid-row: 3 / span 2; align-self: end; justify-self: stretch; } .plan-guide-btn.is-first { color: var(--primary-ink); background: var(--accent); border-color: var(--accent); } .plan-guide-btn.is-first:hover { background: var(--primary-hover, #ffd28d); } #app.v2-fit .plan-pinned { gap: 8px; } #app.v2-fit .plan-pinned .plan-note { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 6px 10px; font-size: 13px; } #app.v2-fit .plan-sheets { min-height: 0; gap: 16px; padding-top: 8px; align-items: stretch; } #app.v2-fit .goal-sheet { gap: 8px; min-height: 0; padding: 16px 16px 12px; } #app.v2-fit .goal-sheet > .gs-body { display: none; } #app.v2-fit .gs-title { font-size: 18px; } .gs-face { display: grid; gap: 6px; flex: 1; align-content: start; } .gs-face .gs-text { font-size: 14px; line-height: 1.4; } .gs-face .gs-target { margin: 0; } .gs-face-when { color: rgba(23, 33, 50, .8); font-weight: 500; font-size: 13px; } .gs-face-how { color: rgba(23, 33, 50, .85); } .goal-sheet .gs-more-btn { position: relative; z-index: 2; justify-self: start; align-self: flex-start; min-height: 40px; padding: 2px 0; color: var(--primary-ink); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; font-size: 14px; } .goal-sheet .gs-more-btn:hover { color: #000; } .goal-sheet .gs-more-btn:focus-visible { outline: 2px dashed var(--primary-ink); outline-offset: 2px; } #app.v2-fit .gs-take { min-height: 40px; padding: 8px 12px; } /* Личная цель года: шесть листов в две строки, «Зачем» — в листе подробностей. */ #app.v2-fit .plan-sheets.is-many { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding-top: 6px; } #app.v2-fit .plan-sheets.is-many .goal-sheet { padding: 12px 14px 10px; gap: 6px; } #app.v2-fit .plan-sheets.is-many .gs-face-why { display: none; } #app.v2-fit .plan-sheets.is-many .gs-title { font-size: 17px; } #app.v2-fit .plan-sheets.is-many .gs-more-btn { position: absolute; z-index: 2; right: 14px; bottom: 8px; } #app.v2-fit .plan-sheets.is-many .gs-take { margin-right: 170px; } .sheet-content .gs-sheet { display: grid; gap: 10px; } .sheet-content .plan-guide-list { margin: 0; padding-left: 18px; font-size: 15px; } .sheet-content .plan-guide-list li { margin: 0 0 8px; } /* Цель полугодия на широком экране: места хватает на всю справку листа, как в 0.1. */ @media (min-width: 1200px) and (min-height: 820px) { #app.v2-fit .plan-sheets:not(.is-many) .goal-sheet > .gs-body { display: grid; gap: 6px; } #app.v2-fit .plan-sheets:not(.is-many) .gs-face { display: none; } #app.v2-fit .plan-sheets:not(.is-many) .gs-block { padding-top: 6px; gap: 2px; } #app.v2-fit .plan-sheets:not(.is-many) .gs-text, #app.v2-fit .plan-sheets:not(.is-many) .gs-list { font-size: 13px; line-height: 1.4; } #app.v2-fit .plan-sheets:not(.is-many) .gs-label { font-size: 11px; } #app.v2-fit .plan-sheets.is-many .gs-face-why { display: block; font-size: 13px; } } @media (max-width: 760px) { #app.v2-fit .card.plan-screen { margin-top: 4px; padding: 0; } #app.v2-fit .plan-board { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 10px; border-left: 4px solid var(--edge); border-right: 4px solid var(--edge); } #app.v2-fit .plan-head { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; gap: 3px; } #app.v2-fit .plan-head .kicker { font-size: 12px; } #app.v2-fit .plan-head h2 { font-size: 20px; } #app.v2-fit .plan-head .plan-horizon { order: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-width: 0; padding: 2px 0; background: none; border: 0; } #app.v2-fit .plan-head .ph-label { font-size: 12px; } #app.v2-fit .plan-head .ph-dot { font-size: 13px; } #app.v2-fit .plan-head .ph-track { min-width: 24px; width: 32px; flex: none; } #app.v2-fit .plan-head p.flavor { order: 3; flex: 0 1 auto; min-height: 2.8em; font-size: 13px; line-height: 1.4; } #app.v2-fit .plan-head .plan-note { display: none; } #app.v2-fit .plan-head .plan-guide-btn { order: 4; align-self: flex-start; min-height: 40px; } #app.v2-fit .plan-pinned { flex: none; gap: 4px; } #app.v2-fit .plan-pinned .plan-note { padding: 3px 8px; font-size: 12px; line-height: 1.35; } #app.v2-fit .plan-pinned .goal-meter { display: none; } #app.v2-fit .plan-sheets, #app.v2-fit .plan-sheets.is-many { flex: none; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 6px; padding-top: 4px; } #app.v2-fit .goal-sheet, #app.v2-fit .plan-sheets.is-many .goal-sheet { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 1px; align-items: center; padding: 6px 6px 6px 10px; } #app.v2-fit .goal-sheet::before { display: none; } #app.v2-fit .goal-sheet .gs-chips { display: contents; } #app.v2-fit .goal-sheet .goal-chip { display: none; } #app.v2-fit .goal-sheet .goal-chip.chip-ambitious { display: inline-block; } #app.v2-fit .gs-title, #app.v2-fit .plan-sheets.is-many .gs-title { grid-column: 1; grid-row: 1; font-size: 15px; line-height: 1.25; } #app.v2-fit .goal-sheet .gs-face { grid-column: 1; grid-row: 2; gap: 0; } #app.v2-fit .goal-sheet .gs-face-why, #app.v2-fit .goal-sheet .gs-face-how { display: none !important; } #app.v2-fit .goal-sheet .gs-target { font-size: 12px; gap: 2px 8px; } #app.v2-fit .goal-sheet .gs-face-when { font-size: 12px; } #app.v2-fit .goal-sheet .gs-more-btn, #app.v2-fit .plan-sheets.is-many .gs-more-btn { position: relative; right: auto; bottom: auto; grid-column: 2; grid-row: 1 / span 2; min-width: 44px; min-height: 44px; padding: 0 6px; font-size: 12px; } #app.v2-fit .goal-sheet .gs-take { display: none; } /* Амбициозная — плашкой в строке заголовка. */ #app.v2-fit .goal-sheet .goal-chip.chip-ambitious { position: absolute; right: 8px; top: -9px; padding: 0 6px; font-size: 11px; line-height: 1.4; } #app.v2-fit .goal-sheet .goal-chip.chip-assigned { display: inline-block; position: absolute; right: 8px; top: -9px; padding: 0 6px; font-size: 11px; } } @media (max-width: 760px) { /* Цель полугодия: три листа — места хватает на «Зачем» и «Двигают фокусы». */ #app.v2-fit .plan-sheets:not(.is-many) .goal-sheet .gs-face-how, #app.v2-fit .plan-sheets:not(.is-many) .goal-sheet .gs-face-why { display: block !important; font-size: 12px; line-height: 1.35; } #app.v2-fit .plan-sheets:not(.is-many) .goal-sheet .gs-face-why { order: -1; } #app.v2-fit .goal-sheet .gs-more-tail { display: none; } #app.v2-fit .plan-head > * { flex: none; } #app.v2-fit .plan-head > p.flavor { flex: 0 1 auto; } #app.v2-fit .plan-sheets:not(.is-many) .goal-sheet .gs-face { gap: 2px; } #app.v2-fit .plan-sheets:not(.is-many) .goal-sheet { grid-template-rows: auto auto; align-items: start; } } /* ---------- 11 · перф-ревью ---------- */ #app.v2-fit .card.review-stage { display: flex; min-height: 0; height: 100%; padding: 10px 20px 12px; } #app.v2-fit .review-panel { flex: 1; display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 1240px; min-height: 0; } #app.v2-fit .review-panel > * { flex: none; } #app.v2-fit .review-head { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 2px 20px; padding: 10px 18px; text-align: left; } #app.v2-fit .review-head .kicker { grid-column: 1; margin: 0; font-size: 13px; } #app.v2-fit .review-head h2 { grid-column: 1; font-size: clamp(24px, 2.2vw, 32px); text-wrap: pretty; } #app.v2-fit .review-head .review-steps { grid-column: 2; grid-row: 1 / span 2; margin: 0; gap: 6px 24px; flex-wrap: nowrap; } #app.v2-fit .review-stage .review-step { padding: 4px 10px; font-size: 13px; white-space: nowrap; } #app.v2-fit .review-stage .review-step + .review-step::after { left: -19px; } #app.v2-fit .review-stage .review-goal { justify-self: auto; align-self: center; padding: 6px 14px; font-size: 14px; } #app.v2-fit .review-notes { padding: 6px 14px; font-size: 14px; } #app.v2-fit .review-reviewers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 8px 14px; } #app.v2-fit .review-reviewers .stage-label { margin: 0; } #app.v2-fit .review-reviewers .cast-list { gap: 6px 18px; } #app.v2-fit .review-reviewers .portrait { width: 40px; height: 40px; } #app.v2-fit .review-hint { margin: 0; font-size: 13px; } /* Голоса: один ряд карточек, цитата целиком; при нехватке места прокручивается только ряд. */ #app.v2-fit .review-voices:not(.is-compact) { flex: 0 1 auto; min-height: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px; align-content: start; } #app.v2-fit .review-voice, #app.v2-fit .review-quotes li.review-voice { grid-template-columns: 48px minmax(0, 1fr); gap: 2px 10px; padding: 10px 12px; } #app.v2-fit .review-voice .portrait { width: 48px; height: 48px; } #app.v2-fit .voice-name { font-size: 19px; } #app.v2-fit .voice-role { font-size: 12px; } #app.v2-fit .voice-tag { font-size: 11px; } #app.v2-fit .review-voice .quote-text { margin-top: 4px; font-size: 14px; line-height: 1.45; } #app.v2-fit .review-voice .quote-text::before { height: 14px; font-size: 30px; } #app.v2-fit .review-voices.is-compact { display: flex; justify-content: flex-end; } #app.v2-fit .review-stage .review-rating { gap: 6px 18px; padding: 8px 18px; font-size: 14px; } #app.v2-fit .rating-icon { width: 40px; height: 40px; } #app.v2-fit .rating-icon .icon { width: 22px; height: 22px; } #app.v2-fit .review-stage .rating-badge { font-size: clamp(22px, 2vw, 28px); } #app.v2-fit .rating-side { gap: 2px; padding-left: 18px; } #app.v2-fit .rating-goal .review-rating-label { font-size: 12px; } /* На шагах ответа кнопка «Отзывы коллег» встаёт в строку оценки. */ #app.v2-fit .review-panel:has(.review-voices.is-compact) { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr); align-content: stretch; } #app.v2-fit .review-panel:has(.review-voices.is-compact) > * { grid-column: 1 / -1; } #app.v2-fit .review-panel:has(.review-voices.is-compact) > .review-rating { grid-column: 1; grid-row: 2; } #app.v2-fit .review-panel:has(.review-voices.is-compact) > .review-voices { grid-column: 2; grid-row: 2; align-self: stretch; } #app.v2-fit .review-panel:has(.review-voices.is-compact) > .review-notes { display: none; } #app.v2-fit .review-voices-btn { height: 100%; min-height: 44px; padding: 6px 16px; background: rgba(19, 34, 56, .97); } #app.v2-fit .review-voices-btn .icon { width: 18px; height: 18px; } #app.v2-fit .review-body { flex: 1 1 auto; min-height: 0; gap: 12px; } #app.v2-fit .has-moment .review-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, 1fr); align-items: stretch; } #app.v2-fit .review-moment { container-type: size; min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center; background: none; position: static; } #app.v2-fit .review-moment > .art { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; margin: 0; background: none; } #app.v2-fit .review-moment .art-frame { flex: none; width: min(100cqw, calc(100cqh * var(--ar, 1.5))); height: auto; aspect-ratio: var(--ar, 1.5) !important; } #app.v2-fit .review-moment .art-caption { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } #app.v2-fit .review-talk { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 12px 16px; } #app.v2-fit .review-talk > * { flex: none; } #app.v2-fit .review-talk > [data-v2-scroll] { flex: 0 1 auto; min-height: 3em; } #app.v2-fit .review-talk .flavor { margin: 0; font-size: 15px; line-height: 1.5; } #app.v2-fit .review-common { margin: 0; padding: 6px 10px; } #app.v2-fit .review-common .cons-title { margin: 0 0 2px; font-size: 12px; } .sheet-content .sheet-voices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } .sheet-content .sheet-voices > .review-quotes { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .sheet-content .review-voice { grid-template-columns: 48px minmax(0, 1fr); gap: 2px 10px; padding: 10px 12px; background: var(--panel2); } .sheet-content .review-voice .portrait { width: 48px; height: 48px; } .sheet-content .voice-name { font-size: 19px; } .sheet-content .review-voice .quote-text { margin-top: 4px; font-size: 15px; } #app.v2-fit .review-stage:not(.has-moment) .review-body { flex: 0 1 auto; } @media (max-width: 760px) { #app.v2-fit .card.review-stage { margin-top: 4px; padding: 0; } #app.v2-fit .review-panel { gap: 6px; } #app.v2-fit .review-head { grid-template-columns: minmax(0, 1fr); padding: 6px 10px 8px; gap: 2px; border-width: 2px; } #app.v2-fit .review-head .kicker { font-size: 12px; } #app.v2-fit .review-head h2 { font-size: 20px; } #app.v2-fit .review-head .review-steps { grid-column: 1; grid-row: auto; justify-content: flex-start; gap: 4px 16px; flex-wrap: wrap; margin-top: 4px; } #app.v2-fit .review-stage .review-step { padding: 1px 6px; font-size: 12px; border-width: 1px; } #app.v2-fit .review-stage .review-step + .review-step::after { left: -13px; font-size: 12px; } #app.v2-fit .review-stage .review-goal { padding: 4px 10px; font-size: 12px; gap: 2px 8px; border-width: 1px; } #app.v2-fit .review-goal-label { font-size: 12px; } #app.v2-fit .review-notes { padding: 4px 10px; font-size: 12px; } #app.v2-fit .review-reviewers { padding: 6px 10px; gap: 4px; } #app.v2-fit .review-reviewers > .stage-label { flex: 1 1 100%; font-size: 12px; } #app.v2-fit .review-reviewers .cast-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); gap: 4px; width: 100%; } #app.v2-fit .review-reviewers .cast-person { display: grid; justify-items: center; gap: 2px; text-align: center; } #app.v2-fit .review-reviewers .portrait { width: 36px; height: 36px; } #app.v2-fit .review-reviewers .cast-name { font-size: 12px; } #app.v2-fit .review-reviewers .cast-role { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } #app.v2-fit .review-hint { display: none; } #app.v2-fit .review-stage .review-rating { grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; padding: 6px 10px; } #app.v2-fit .rating-icon { width: 32px; height: 32px; } #app.v2-fit .review-stage .rating-badge { font-size: 20px; } #app.v2-fit .review-rating-label { font-size: 12px; } #app.v2-fit .rating-side { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 12px; padding: 4px 0 0; font-size: 12px; } #app.v2-fit .rating-goal { display: block; } #app.v2-fit .rating-goal .review-rating-label { margin-right: 4px; } #app.v2-fit .review-voices:not(.is-compact) { grid-template-columns: minmax(0, 1fr); gap: 6px; } #app.v2-fit .review-voice, #app.v2-fit .review-quotes li.review-voice { grid-template-columns: 36px minmax(0, 1fr); padding: 6px 8px; } #app.v2-fit .review-voice .portrait { width: 36px; height: 36px; } #app.v2-fit .voice-name { font-size: 16px; } #app.v2-fit .review-voice .quote-text { grid-column: 2; margin: 0; font-size: 13px; } #app.v2-fit .review-voice .quote-text::before { display: none; } #app.v2-fit .review-voices-btn { padding: 4px 10px; font-size: 12px; } #app.v2-fit .review-voices-btn span { max-width: 6em; } #app.v2-fit .has-moment .review-body { display: flex; flex-direction: column; gap: 0; } #app.v2-fit .review-moment { flex: 1 1 0; min-height: 90px; max-height: 30vh; max-height: 30dvh; background: var(--art-bg); } #app.v2-fit .review-talk { flex: 0 1 auto; padding: 8px 10px; gap: 6px; } #app.v2-fit .review-talk .flavor { font-size: 13px; line-height: 1.45; } #app.v2-fit .review-talk > [data-v2-scroll] { min-height: 2.9em; } #app.v2-fit .review-talk .answers { gap: 6px; } } @media (max-width: 760px) { /* Шаг отзывов на телефоне: главное — голоса и оценка, кадр переговорной уходит. */ #app.v2-fit .step-feedback .review-moment { display: none; } #app.v2-fit .step-feedback .review-voices:not(.is-compact) { flex: 1 1 auto; min-height: 120px; } #app.v2-fit .review-stage.step-feedback:not(.has-moment) .review-body, #app.v2-fit .step-feedback .review-body, #app.v2-fit .step-feedback .review-talk { flex: none; } } /* ---------- 12 · итоги квартала ---------- */ #app.v2-fit .card.summary-stage { height: 100%; min-height: 0; gap: 10px 20px; grid-template-columns: minmax(0, 1fr) minmax(360px, 400px); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "head side" "reel side" "story side"; } #app.v2-fit .summary-stage > .summary-head { grid-area: head; justify-items: start; gap: 2px; padding: 4px 0 0; text-align: left; } #app.v2-fit .summary-head .kicker { font-size: 13px; } #app.v2-fit .summary-head h2 { font-size: clamp(26px, 2.4vw, 34px); } #app.v2-fit .summary-stage > .summary-reel { grid-area: reel; min-height: 0; display: flex; } #app.v2-fit .summary-stage > .summary-story { grid-area: story; min-height: 0; } #app.v2-fit .summary-stage > .summary-side { grid-area: side; position: static; min-height: 0; gap: 10px; align-content: stretch; grid-template-rows: auto auto minmax(0, 1fr) auto; } /* Лента: три кадра 3:2 в ряд, высота ленты — остаток окна. */ #app.v2-fit .reel-list { flex: 1; min-height: 0; container-type: size; display: flex; justify-content: center; align-items: stretch; max-width: none; } #app.v2-fit .reel-frame { flex: 0 1 auto; width: min(calc(100cqw / 3), calc((100cqh - 30px) * 1.5)); grid-template-rows: minmax(0, 1fr) auto; } #app.v2-fit .reel-2 .reel-frame { width: min(calc(100cqw / 2), calc((100cqh - 30px) * 1.5)); } #app.v2-fit .reel-1 .reel-frame { width: min(100cqw, calc((100cqh - 30px) * 1.5)); } #app.v2-fit .reel-title { padding: 4px 10px 6px; font-size: 12px; line-height: 1.3; } #app.v2-fit .summary-story { gap: 8px; } #app.v2-fit .summary-story .qblock { padding: 10px 16px; font-size: 14px; line-height: 1.45; } #app.v2-fit .summary-story .qblock-title { margin: 0 0 4px; font-size: 20px; } #app.v2-fit .summary-story .qs-changes-title { margin: 6px 0 2px; font-size: 13px; } #app.v2-fit .summary-story .qs-choices { margin: 0; padding-left: 18px; } #app.v2-fit .summary-story > .qblock-main { max-height: 30vh; } #app.v2-fit .summary-story > .summary-more { display: none; } #app.v2-fit .summary-story > .qblock-outlook { padding: 8px 16px; } #app.v2-fit .summary-story > .qblock-outlook .qblock-title { font-size: 17px; } #app.v2-fit .outlook-list { gap: 2px; font-size: 13px; } #app.v2-fit .summary-more-btn { justify-self: start; } #app.v2-fit .summary-more-btn .more-count { margin-left: 2px; padding: 0 5px; color: var(--primary-ink); background: var(--accent); } #app.v2-fit .summary-changes, #app.v2-fit .summary-goals { padding: 10px 16px; } #app.v2-fit .summary-side-title { margin: 0 0 4px; font-size: 20px; } #app.v2-fit .summary-stage table.summary { font-size: 14px; } #app.v2-fit .summary-stage table.summary th, #app.v2-fit .summary-stage table.summary td { padding: 5px 6px; } #app.v2-fit .summary-stage table.summary td.summary-arrow { font-size: 18px; } #app.v2-fit .summary-goals { min-height: 0; overflow: visible; } #app.v2-fit .summary-goal { gap: 1px; margin: 0 0 6px; font-size: 13px; } #app.v2-fit .summary-side .summary-closing { padding: 8px 12px; font-size: 14px; } #app.v2-fit .summary-next { gap: 6px; align-self: end; } #app.v2-fit .calendar-page { padding: 2px; font-size: 15px; } #app.v2-fit .summary-next button.summary-continue { min-height: 52px; } #app.v2-fit .summary-next button.summary-continue strong { font-size: 22px; } .sheet-content .qblock, .sheet-content .risk-changes, .sheet-content .stale-note, .sheet-content .notes { margin: 0; padding: 10px 0 0; font-size: 15px; line-height: 1.5; border-top: 1px solid var(--edge); background: none; } .sheet-content .qblock-title { margin: 0 0 4px; font: 600 20px/1.2 var(--display); } .sheet-content .qblock p { margin: 0 0 4px; } #app.v2-fit .reel-list { align-items: center; background: none; border: 0; border-image: none; } #app.v2-fit .reel-frame { align-self: center; grid-template-rows: auto auto; } #app.v2-fit .reel-frame .art-frame { width: 100%; } #app.v2-fit .summary-stage > .summary-side { display: flex; flex-direction: column; } #app.v2-fit .summary-stage > .summary-side > * { flex: none; } #app.v2-fit .summary-stage > .summary-side > .summary-next { margin-top: auto; } @media (max-width: 760px) { /* 12 · телефон: заголовок, лента (кадры листаются внутри), главное, таблица, действия. */ #app.v2-fit .card.summary-stage { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; } #app.v2-fit .card.summary-stage > * { flex: none; } #app.v2-fit .summary-head h2 { font-size: 22px; } #app.v2-fit .summary-head .kicker { font-size: 12px; } #app.v2-fit .summary-stage > .summary-reel { flex: 1 1 0; min-height: 100px; max-height: 30vh; max-height: 30dvh; } #app.v2-fit .reel-list { justify-content: flex-start; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; } #app.v2-fit .reel-frame, #app.v2-fit .reel-2 .reel-frame, #app.v2-fit .reel-1 .reel-frame { flex: none; width: min(calc(100cqw - 48px), calc((100cqh - 26px) * 1.5)); scroll-snap-align: start; } #app.v2-fit .reel-title { padding: 2px 8px 4px; } #app.v2-fit .summary-stage > .summary-story { flex: 0 1 auto; display: flex; flex-direction: column; gap: 6px; min-height: 0; } #app.v2-fit .summary-story > * { flex: none; } #app.v2-fit .summary-story > .qblock-main { flex: 0 1 auto; min-height: 4em; max-height: none; padding: 6px 10px; font-size: 13px; } #app.v2-fit .summary-story .qblock-title { font-size: 17px; } #app.v2-fit .summary-story > .qblock-outlook { display: none; } #app.v2-fit .summary-story > .feedback-slot .choice-feedback { margin: 0; } #app.v2-fit .summary-stage > .summary-side { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; align-items: stretch; } #app.v2-fit .summary-side > .summary-changes { grid-column: 1 / -1; padding: 4px 10px; } #app.v2-fit .summary-side > .summary-goals, #app.v2-fit .summary-side .summary-closing { display: none; } #app.v2-fit .summary-changes .summary-side-title { display: none; } /* Шесть параметров компактно: «было → стало» и стрелка в две колонки по три строки. */ #app.v2-fit .summary-stage table.summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; font-size: 13px; } #app.v2-fit .summary-stage table.summary tbody { display: contents; } #app.v2-fit .summary-stage table.summary tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 1.8em; align-items: baseline; gap: 4px; border-bottom: 1px solid var(--edge); } #app.v2-fit .summary-stage table.summary th, #app.v2-fit .summary-stage table.summary td { padding: 3px 0; border: 0; } #app.v2-fit .summary-stage table.summary td.summary-arrow { width: auto; font-size: 15px; } #app.v2-fit .summary-param { font-weight: 600; } #app.v2-fit .summary-stage > .summary-side > .summary-next { grid-column: 1 / -1; margin: 0; grid-template-columns: auto minmax(0, 1fr); } #app.v2-fit .summary-next .summary-more-btn { padding: 4px 10px; } #app.v2-fit .calendar-page { display: none; } #app.v2-fit .summary-next button.summary-continue { min-height: 48px; padding: 8px 14px; } #app.v2-fit .summary-next button.summary-continue strong { font-size: 18px; } } #app.v2-fit .summary-next .summary-more-btn { justify-self: stretch; } #app.v2-fit .review-voices.is-compact > .review-details { display: none; } /* ---------- 13 · финал ---------- */ #app.v2-fit .card.ending.ending-stage { height: 100%; min-height: 0; grid-template-columns: minmax(380px, .85fr) minmax(0, 1.15fr); grid-template-rows: minmax(0, 1fr); align-items: stretch; } #app.v2-fit .ending-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 16px 24px 14px; border-right: 2px solid var(--edge); } #app.v2-fit .ending-side > * { flex: none; } #app.v2-fit .ending-stage .ending-intro { gap: 4px; } #app.v2-fit .ending-stage .ending-period { font-size: 14px; } #app.v2-fit .ending-stage h1 { font-size: clamp(30px, 2.8vw, 44px); } #app.v2-fit .ending-stage .ending-intro .flavor { margin: 2px 0 0; font-size: 15px; line-height: 1.45; } #app.v2-fit .ending-early { padding: 4px 10px; font-size: 13px; } #app.v2-fit .ending-narrative { flex: 0 1 auto; min-height: 0; } #app.v2-fit .ending-fate .fate-details { display: block; } #app.v2-fit .ending-fate .fate-more { display: none; } #app.v2-fit .fate-summary { width: 100%; margin: 0; padding: 8px 0; gap: 12px; grid-template-columns: 40px minmax(0, 1fr) 16px; color: var(--text); background: none; border: 0; text-align: left; font: inherit; } #app.v2-fit .fate-summary:hover .fate-title { color: var(--accent); } #app.v2-fit .fate-icon { width: 40px; height: 40px; } #app.v2-fit .fate-icon .icon { width: 18px; height: 18px; } #app.v2-fit .fate-title { font-size: 16px; } #app.v2-fit .fate-text { font-size: 13px; line-height: 1.4; } #app.v2-fit .ending-stage .ending-restart { min-height: 50px; } #app.v2-fit .ending-stage .ending-restart strong { font-size: 22px; } #app.v2-fit .ending-sheets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } #app.v2-fit .ending-more-btn { justify-content: flex-start; text-align: left; } #app.v2-fit .ending-side > .ending-more { display: none; } #app.v2-fit .ending-art { display: flex; flex-direction: column; min-height: 0; padding: 0; } #app.v2-fit .ending-art > .ending-memories, #app.v2-fit .ending-art > .dilemma-memories { display: none; } #app.v2-fit .ending-scene { flex: 1; container-type: size; min-height: 0; display: flex; align-items: center; justify-content: center; } #app.v2-fit .ending-scene > .art { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; margin: 0; background: none; } #app.v2-fit .ending-scene .art-frame { flex: none; width: min(100cqw, calc(100cqh * var(--ar, 1.5))); height: auto; aspect-ratio: var(--ar, 1.5) !important; } #app.v2-fit .ending-scene .art-caption { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .sheet-content .fate-sheet { display: grid; gap: 10px; padding: 0; font-size: 15px; } .sheet-content .fate-sheet .fate-lead { font-weight: 600; } .sheet-content .ending-axes { display: grid; gap: 8px; margin: 0; } .sheet-content .ending-axes dt { color: var(--muted); font-size: 13px; } .sheet-content .ending-axes dd { margin: 0; } .sheet-content .ending-memories h2, .sheet-content .ending-history h2 { font-size: 20px; } .sheet-content .dilemma-memories > summary { pointer-events: none; list-style: none; font-weight: 600; } @media (max-width: 1000px) { #app.v2-fit .card.ending.ending-stage { display: flex; flex-direction: column; gap: 0; } #app.v2-fit .ending-side, #app.v2-fit .ending-art { display: contents; } #app.v2-fit .ending-stage > * { flex: none; } #app.v2-fit .ending-stage .ending-intro { order: 1; padding: 8px 12px 6px; } #app.v2-fit .ending-stage .ending-scene { order: 2; flex: 1 1 0; min-height: 100px; } #app.v2-fit .ending-stage .ending-narrative { order: 3; padding: 0 12px; } #app.v2-fit .ending-stage .ending-restart { order: 4; margin: 6px 12px 0; width: calc(100% - 24px); } #app.v2-fit .ending-stage .ending-sheets { order: 5; padding: 6px 12px 0; background: none; } } @media (max-width: 760px) { #app.v2-fit .card.ending.ending-stage { margin-top: 4px; } #app.v2-fit .ending-stage h1 { font-size: 26px; } #app.v2-fit .ending-stage .ending-period { font-size: 12px; } #app.v2-fit .ending-stage .ending-intro .flavor { font-size: 13px; line-height: 1.4; } #app.v2-fit .fate-summary { padding: 4px 0; gap: 8px; grid-template-columns: 30px minmax(0, 1fr) 12px; } #app.v2-fit .fate-icon { width: 30px; height: 30px; border-width: 2px; } #app.v2-fit .fate-icon .icon { width: 14px; height: 14px; } #app.v2-fit .fate-title { font-size: 14px; } #app.v2-fit .fate-text { font-size: 12px; line-height: 1.35; } #app.v2-fit .fate-summary::after { width: 7px; height: 7px; border-width: 2px; } #app.v2-fit .ending-stage .ending-restart { min-height: 46px; } #app.v2-fit .ending-stage .ending-restart strong { font-size: 19px; } #app.v2-fit .ending-sheets { gap: 4px; } #app.v2-fit .ending-more-btn { min-height: 40px; padding: 2px 8px; font-size: 12px; } } @media (max-width: 760px) { /* Финал: период забега в верхней строке не сталкивает «Меню» на вторую строку. */ #app.v2.phase-ended .topbar-quarter .tq-main { font-size: 13px; line-height: 1.25; } #app.v2.phase-ended .topbar-quarter { padding-left: 8px; } #app.v2-fit .ending-stage .ending-narrative { flex: none; } #app.v2-fit .ending-stage .ending-scene { min-height: 72px; } } @media (max-width: 760px) { /* Лента на телефоне: подпись поверх низа кадра, кадр занимает всю высоту ленты. */ #app.v2-fit .reel-list { overflow-y: auto; } #app.v2-fit .reel-frame, #app.v2-fit .reel-2 .reel-frame, #app.v2-fit .reel-1 .reel-frame { position: relative; width: min(calc(100cqw - 48px), calc(100cqh * 1.5)); } #app.v2-fit .reel-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 8px 3px; font-size: 11px; line-height: 1.25; color: var(--text); background: linear-gradient(180deg, rgba(9, 21, 38, 0) 0%, rgba(9, 21, 38, .88) 45%); } #app.v2-fit .summary-stage > .summary-reel { min-height: 90px; } } @media (max-width: 760px) { #app.v2-fit .summary-stage > .summary-reel { min-height: 76px; } } /* ---------- этап 1, пересмотр прокрутки внутри карточки (решения координатора) ---------- */ .news-with-btn { display: none; } .story-mood-sheet { margin: 0; color: var(--muted); } @media (min-width: 761px) { .sheet-content .story-mood-sheet { display: none; } } @media (max-width: 760px) { /* 09: «На связи» — кнопкой в полосе выпуска, портреты в листе. */ #app.v2-fit .stage-news .news-with { display: none; } #app.v2-fit .stage-news .news-with-btn { display: inline-flex; min-height: 44px; margin: -9px 0 -9px auto; padding: 0 8px; font-size: 12px; background: none; border: 0; } #app.v2-fit .stage-news .news-with-btn > span { padding: 3px 6px; border: 1px solid var(--edge); background: var(--panel2); } #app.v2-fit .stage-news .news-with-btn .icon { width: 14px; height: 14px; } /* 07: строка о настроении в «Окошке» — в листе «История „Окошка“». */ #app.v2-fit .stage-story .stage-text .story-mood { display: none; } /* 05: строка «Руководитель назначил цель…» повторяет строку цели над фокусами («Цель (назначена) · 0 из N»). */ #app.v2-fit .focus-notes .plan-note { display: none; } } @media (max-width: 760px) { #app.v2-fit .stage-news .stage-bar { flex-wrap: nowrap; } #app.v2-fit .stage-news .news-with-btn > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } } #app.v2-fit .reel-list { min-width: 0; } #app.v2-fit .reel-list:focus-visible { outline: 2px dashed var(--accent); outline-offset: 2px; } @media (max-width: 760px) { #app.v2-fit .summary-stage > .summary-side > .summary-next { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } #app.v2-fit .summary-next button.summary-continue strong { overflow-wrap: anywhere; } } #app.v2.phase-ended .topbar-brand { flex: none; } .detail-btn { overflow-wrap: anywhere; min-width: 0; } /* Запас на крупный текст и промежуточные окна (spec §1.7): если содержимое экрана этапа 2 не помещается в свою область, прокручивается область, а не наезжает на соседей. */ #app.v2-menu > .menu-home-wrap { overflow: auto; } #app.v2-fit .class-stage { overflow: auto; } #app.v2-fit .values-panel, #app.v2-fit .values-list { overflow: auto; } #app.v2-fit .plan-board, #app.v2-fit .plan-sheets { overflow: auto; } #app.v2-fit .review-panel, #app.v2-fit .review-talk { overflow: auto; } #app.v2-fit .summary-stage > .summary-story, #app.v2-fit .summary-stage > .summary-side { overflow: auto; } #app.v2-fit .ending-side { overflow: auto; } @media (max-width: 1000px) { #app.v2-fit .card.ending.ending-stage { overflow: auto; } } @media (max-width: 760px) { #app.v2-fit .card.summary-stage, #app.v2-fit .card.plan-screen { overflow: auto; } } #app.v2-fit .class-head .gender-option { min-height: 46px; } /* Финал: период забега в верхней строке переносится под бренд и не сталкивает «Меню» вниз. */ #app.v2.phase-ended .topbar-lead { flex: 1 1 0; flex-wrap: wrap; min-width: 0; } @media (max-width: 1000px) { #app.v2-fit .ending-stage .ending-narrative { align-self: stretch; } } @media (max-width: 760px) { #app.v2-fit .class-shift { justify-self: start; padding: 0; background: none; } } /* ========================================================================== Этап 3: 15 «Навыки и задания», 16 «Как играть», 17 «Сохранения», 18 «Система». ========================================================================== */ /* ---------- 15 · навыки и задания в листе ---------- */ /* Заголовок листа уже называет панель и класс: заголовок раскрытия и рамка панели внутри листа не повторяются. Дорожки — одной колонкой, плотнее, чем в 0.1. */ #sheet-skills .challenge-panel { container-type: inline-size; margin: 0; background: none; border: 0; border-image: none; } #sheet-skills .challenge-panel > summary { display: none; } #sheet-skills .challenge-body { gap: 12px; padding: 0; } #sheet-skills .challenge-lanes { gap: 8px; } #sheet-skills .challenge-panel .challenge-weakness, .fate-sheet .challenge-panel .challenge-weakness { font-size: 14px; line-height: 1.45; } :is(#sheet-skills, .fate-sheet) .challenge-panel .challenge-skills { gap: 6px; } /* Дорожка навыка — одна строка: значок, название и клетки, справа уровень и сколько до порога. Колонка справа остаётся и в узком листе телефона (в 0.1 она уходила под клетки). */ :is(#sheet-skills, .fate-sheet) .skill-lane { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 2px 10px; padding: 7px 10px; } :is(#sheet-skills, .fate-sheet) .skill-icon .icon { width: 22px; height: 22px; } :is(#sheet-skills, .fate-sheet) .challenge-panel .skill-name { margin-bottom: 4px; font-size: 15px; } :is(#sheet-skills, .fate-sheet) .skill-cells { gap: 4px; } :is(#sheet-skills, .fate-sheet) .skill-cell { width: 18px; height: 18px; } :is(#sheet-skills, .fate-sheet) .skill-meta { grid-column: 3; display: grid; justify-items: end; gap: 0; text-align: right; } :is(#sheet-skills, .fate-sheet) .skill-level { font-size: 17px; } :is(#sheet-skills, .fate-sheet) .challenge-panel .skill-need, :is(#sheet-skills, .fate-sheet) .skill-state { font-size: 12px; } :is(#sheet-skills, .fate-sheet) .challenge-tip { padding: 6px 10px; font-size: 13px; } :is(#sheet-skills, .fate-sheet) .challenge-next { gap: 8px 12px; padding: 10px 12px; } :is(#sheet-skills, .fate-sheet) .challenge-next-title { font-size: 15px; } #sheet-skills .task-prop { width: 64px; } #sheet-skills .challenge-next > .challenge-task { font-size: 15px; } /* Название задания рядом с предметом, а не под ним (в 0.1 :only-of-type растягивал строку под картинку). */ .challenge-next > .task-prop + .challenge-task { grid-column: 1; } #sheet-skills .task-cond { font-size: 13px; line-height: 1.4; } #sheet-skills .recover-rule { margin-top: 10px; font-size: 13px; } .fate-sheet .task-history .challenge-task { padding: 6px 8px; font-size: 13px; } /* Финал: история заданий в листе «Карьера» — панель раскрыта, заголовок раскрытия — подзаголовок. */ .sheet-content .fate-sheet .challenge-panel > summary { min-height: 0; padding: 8px 12px; } .sheet-content .fate-sheet .challenge-panel .challenge-name { font-size: 20px; } .sheet-content .fate-sheet .challenge-body { padding: 0 12px 12px; } /* ---------- 16–18 · подстраницы меню и системный экран в окне ---------- */ /* Высота окна: строка с брендом и «Меню», сцена на остаток. Если содержимое не помещается (текст 200 %, промежуточные окна), прокручивается сцена, страница стоит. */ #app.v2-sub { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0; padding-bottom: 12px; } #app.v2-sub > .system-note { flex: none; margin: 0 0 8px; } #app.v2-sub > .menu-sub-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } #app.v2-sub .menu-topbar { flex: none; padding-bottom: 10px; } #app.v2-sub .menu-sub-stage { flex: 1 1 auto; min-height: 0; margin-top: 12px; padding: clamp(16px, 2.2vw, 32px); overflow: auto; overscroll-behavior: contain; } #app.v2-sub .menu-sub-stage > .card { max-height: none; } #app.v2-sub .card.confirm-panel { padding: 28px; } /* ---------- 16 · как играть: заголовок строкой, пять окон в ряд, правило и «В меню» ---------- */ #app.v2-sub.menu-sub-help .menu-sub-stage { align-items: center; } #app.v2-sub .card.help-panel { grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 2.4vh, 24px); max-width: 1360px; } #app.v2-sub .help-intro { grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 6px 36px; align-self: start; max-width: none; } #app.v2-sub .help-intro h1 { grid-row: 1 / span 2; font-size: clamp(40px, 4vw, 64px); } #app.v2-sub .help-lead { font-size: clamp(17px, 1.4vw, 21px); } #app.v2-sub .help-sub { max-width: 72ch; font-size: 14px; line-height: 1.5; } #app.v2-sub .help-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 26px; } #app.v2-sub .help-step, #app.v2-sub .help-step:nth-child(4), #app.v2-sub .help-step:nth-child(5) { grid-column: auto; } #app.v2-sub .help-step-head { padding: 6px 8px; gap: 10px; } #app.v2-sub .help-num { width: 32px; height: 32px; font-size: 18px; } #app.v2-sub .help-panel .help-step-title { font-size: 17px; } #app.v2-sub .help-step-text { padding-top: 8px; font-size: 14px; line-height: 1.45; } #app.v2-sub .help-step:not(:last-child)::after { content: ""; display: block; position: absolute; top: calc(44px + 18%); right: -21px; width: 16px; height: 14px; background: var(--muted); clip-path: polygon(0 40%, 60% 40%, 60% 0, 100% 50%, 60% 100%, 60% 60%, 0 60%); } #app.v2-sub .help-step:hover { transform: none; } #app.v2-sub .help-foot { grid-column: 1; } #app.v2-sub .help-save { padding: 12px 16px; font-size: 14px; } /* ---------- 17 · сохранения: две колонки, «В меню» в шапке ---------- */ #app.v2-sub .card.saves-panel { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head back" "grid grid"; align-items: center; gap: 14px 24px; max-width: 1100px; padding: 22px 26px; } #app.v2-sub .saves-head { grid-area: head; } #app.v2-sub .saves-grid { grid-area: grid; } #app.v2-sub .saves-panel .saves-back { grid-area: back; justify-self: end; min-width: 160px; } #app.v2-sub .saves-slot, #app.v2-sub .saves-import { gap: 10px; padding: 18px 22px; } #app.v2-sub .saves-panel .saves-col-title { font-size: 20px; } #app.v2-sub .slot-card { display: grid; gap: 10px; } #app.v2-sub .saves-thumb .art-frame { height: clamp(96px, 24vh, 230px); aspect-ratio: auto !important; } #app.v2-sub .saves-thumb .art-image { object-fit: cover; } #app.v2-sub .slot-where { font-size: 17px; } #app.v2-sub .slot-note { font-size: 13px; line-height: 1.45; } #app.v2-sub .saves-more { display: flex; flex-wrap: wrap; gap: 8px; } #app.v2-sub .import-drop { gap: 10px; padding: 14px; } #app.v2-sub .import-drop-icon .icon { width: 30px; height: 30px; } #app.v2-sub .saves-json { min-height: 76px; } #app.v2-sub .import-confirm { gap: 8px; padding: 12px 14px; } #app.v2-sub .saves-panel .import-confirm h3 { font-size: 18px; } .sheet-content .saves-json-sheet { min-height: min(520px, 55vh); resize: vertical; } .sheet-content .load-error-code-full { font: 13px/1.5 ui-monospace, "SFMono-Regular", Menlo, monospace; overflow-wrap: anywhere; } /* ---------- 18 · ошибка загрузки, плашки записи и конфликта, новая версия ---------- */ #app.v2-sub.system-screen .menu-sub-stage { align-items: center; } #app.v2-sub .card.load-error { gap: 12px; padding: 26px 30px; } #app.v2-sub .load-error-icon .icon { width: 56px; height: 56px; } #app.v2-sub .load-error .load-error-more { justify-self: start; } /* Ошибка записи и конфликт вкладок: одна строка над экраном — причина, действия рядом. */ #app.v2 .system-note.is-storage { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 6px 10px; } #app.v2 .system-note.is-storage .system-note-title { flex: none; font-size: 15px; } #app.v2 .system-note.is-storage .notice { flex: 1 1 320px; min-width: 0; font-size: 13px; line-height: 1.35; } #app.v2 .system-note.is-storage .system-note-actions { flex: none; gap: 6px; margin-left: auto; } #app.v2 .system-note-actions button.choice { min-height: 40px; padding: 6px 12px; font-size: 14px; } #app.v2 .system-note .lbl-narrow { display: none; } #app.v2 .system-note .system-note-more { display: none; } /* Новая версия: тонкая полоса в одну строку внизу окна (правка автора 07.10). Экран отдаёт ей место снизу и ничего под ней не прячет; через несколько секунд или по «Позже» полоса сворачивается в значок «Обновить» в верхней строке (.update-chip). */ #update-note { top: auto; bottom: 12px; left: auto; right: max(28px, calc((100vw - 1504px) / 2)); transform: none; display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; width: auto; max-width: calc(100% - 56px); padding: 4px 6px 4px 12px; animation: none; box-shadow: none; border-width: 2px; border-image-width: 2px; } #update-note .update-icon { flex: none; width: 20px; height: 20px; } #update-note p { flex: 0 1 auto; min-width: 0; font-size: 14px; line-height: 1.3; } #update-note p strong { display: inline; font-size: 14px; } #update-note .update-actions { flex: none; flex-wrap: nowrap; gap: 6px; } #update-note .update-actions button.choice { min-width: 0; min-height: 40px; padding: 4px 14px; font-size: 15px; } @media (max-width: 1100px) { #update-note .update-detail { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } body.has-update #app.v2-fit, body.has-update #app.v2-menu, body.has-update #app.v2-sub { padding-bottom: calc(var(--update-h, 52px) + 18px); } /* Свёрнутая полоса: значок рядом с меткой версии. Видимая плашка 28 px, область нажатия 44 px. */ button.update-chip { display: inline-flex; align-items: center; gap: 6px; width: auto; min-height: 44px; margin: 0; padding: 0 10px; color: var(--accent); background: var(--panel); border: 2px solid var(--accent); border-radius: 0; font: 700 13px/1.2 "Segoe UI", system-ui, sans-serif; cursor: pointer; } button.update-chip .icon { width: 16px; height: 16px; } button.update-chip:hover { background: #213348; } button.update-chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } button.update-chip:disabled { opacity: .6; cursor: default; } @media (max-width: 760px) { /* Строка подстраниц меню: метка версии и «Меню»; бренд — для скринридера, как в игре. */ #app.v2-sub .menu-topbar { gap: 6px 8px; padding-bottom: 8px; } #app.v2-sub .menu-sub-stage { margin: 8px -16px 0; padding: 12px 16px; align-items: start; } #app.v2-sub .menu-sub-stage > .card { padding: 14px 14px 16px; } #app.v2-sub.menu-sub-help .menu-sub-stage { padding: 10px 12px; } /* 16: список окон, кадр 72 px слева, номер и название над подписью. */ #app.v2-sub .card.help-panel { gap: 10px; padding: 0; } #app.v2-sub .help-intro { grid-template-columns: minmax(0, 1fr); gap: 4px; } #app.v2-sub .help-intro h1 { grid-row: auto; font-size: 30px; } #app.v2-sub .help-lead { font-size: 15px; line-height: 1.35; } #app.v2-sub .help-sub { font-size: 12.5px; line-height: 1.4; } #app.v2-sub .help-steps { grid-template-columns: minmax(0, 1fr); gap: 5px; } #app.v2-sub .help-step { grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: start; padding: 5px 8px 5px 5px; background: rgba(19, 34, 56, .97); border: 1px solid var(--edge); } #app.v2-sub .help-step::after { display: none !important; } #app.v2-sub .help-step-head { grid-column: 2; grid-row: 1; gap: 6px; padding: 0; background: none; border: 0; } #app.v2-sub .help-num { width: 20px; height: 20px; font-size: 12px; } #app.v2-sub .help-panel .help-step-title { font-size: 14px; } #app.v2-sub .help-window { grid-column: 1; grid-row: 1 / span 2; width: 72px; border: 1px solid var(--edge); } #app.v2-sub .help-step-text { grid-column: 2; grid-row: 2; padding: 1px 0 0; font-size: 12.5px; line-height: 1.35; text-shadow: none; } #app.v2-sub .help-foot { display: grid; gap: 8px; } #app.v2-sub .help-save { gap: 10px; padding: 7px 10px; font-size: 12.5px; line-height: 1.4; } #app.v2-sub .help-save-icon { padding-right: 10px; } #app.v2-sub .help-save-icon .icon { width: 20px; height: 20px; } #app.v2-sub .help-foot button.choice { min-height: 46px; padding: 10px; font-size: 17px; } /* 17: кадр слота 72 px слева от места забега, пояснение — в листе «Как это работает». */ #app.v2-sub .card.saves-panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "grid" "back"; gap: 10px; } #app.v2-sub .saves-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; } #app.v2-sub .saves-panel h1 { font-size: 28px; } #app.v2-sub .saves-lead { font-size: 13px; } #app.v2-sub .saves-slot, #app.v2-sub .saves-import { gap: 8px; padding: 10px; } #app.v2-sub .saves-panel .saves-col-title { font-size: 17px; } #app.v2-sub .slot-card { grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 10px; } #app.v2-sub .saves-thumb .art-frame { height: 48px; } #app.v2-sub .slot-where { font-size: 15px; } #app.v2-sub .slot-note { display: none; } #app.v2-sub .saves-slot > button.choice { min-height: 46px; padding: 8px; font-size: 16px; } #app.v2-sub .saves-more > .detail-btn { flex: 1 1 0; } #app.v2-sub .import-drop { gap: 8px; padding: 10px; } #app.v2-sub .import-drop-icon { display: none; } #app.v2-sub .saves-json { min-height: 56px; font-size: 12px; } #app.v2-sub .import-status.is-bad { padding: 6px 10px; font-size: 13px; } #app.v2-sub .saves-import.is-confirming .import-drop { display: none; } #app.v2-sub .import-confirm .confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } #app.v2-sub .saves-panel .saves-back { justify-self: stretch; min-height: 46px; } /* 18 */ #app.v2-sub .card.load-error { gap: 10px; padding: 18px 16px; } #app.v2-sub .load-error-icon .icon { width: 44px; height: 44px; } #app.v2 .system-note.is-storage { gap: 4px 8px; padding: 6px 8px; } #app.v2 .system-note.is-storage .notice { display: none; } #app.v2 .system-note.is-storage .system-note-actions { flex: 1 1 100%; margin-left: 0; } #app.v2 .system-note .lbl-wide { display: none; } #app.v2 .system-note .lbl-narrow { display: inline; } #app.v2 .system-note .system-note-more { display: inline-flex; margin-left: auto; } #app.v2 .system-note-actions button.choice { min-height: 44px; padding: 6px 10px; } #app.v2 .system-note.is-storage .system-note-title { font-size: 14px; } /* Плашка записи занимает ~80 px: вводная планирования ужимается до строки и прокручивается сама, кнопка «Как выполнить цель» и листы целей остаются на месте. */ #app.v2-fit:has(> .system-note.is-storage) .plan-head p.flavor { min-height: 1.4em; } /* Телефон: полоса во всю ширину, заголовок и две кнопки в одну строку, без значка. Кадр события держит свою нижнюю границу: место полосе отдаёт текст события, он прокручивается сам. */ #update-note { left: 6px; right: 6px; bottom: 6px; max-width: none; gap: 6px; padding: 3px 3px 3px 8px; } #update-note .update-icon { display: none; } #update-note p { flex: 1 1 auto; font-size: 13px; } #update-note p strong { font-size: 13px; } #update-note .update-actions { gap: 4px; } #update-note .update-actions button.choice { min-height: 36px; padding: 4px 8px; font-size: 14px; } body.has-update #app.v2-fit, body.has-update #app.v2-menu, body.has-update #app.v2-sub { padding-bottom: calc(var(--update-h, 46px) + 8px); } /* Значок в строке телефона: только картинка, имя кнопки в aria-label. */ button.update-chip { min-width: 44px; justify-content: center; padding: 0 8px; } button.update-chip .update-chip-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } @media (max-width: 360px) { #app.v2-sub .menu-sub-stage { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; } } /* Загрузка: три точки стоят, без мигания (в v2 анимации нет). */ .boot-dots span { animation: none !important; opacity: 1; } .boot-dots span:nth-child(2) { opacity: .6; } .boot-dots span:nth-child(3) { opacity: .3; } /* ---------- приёмка этапа 3: запас на тяжёлые шаги настоящего забега ---------- Маршрут от меню до финала (tools/v2_acceptance.js) нашёл шаги, которых нет в каталоге: событие после ответа с четырьмя ответами, сюжетная глава с отзывом решения, шаг ревью с откликом под голосами, фокус с пятью сигналами и памятью ревью. */ /* Фокус: заголовок в одну строку на компьютере — колонке фокусов достаётся строка. */ #app.v2-fit .focus-screen .split-head h2 { font-size: clamp(24px, 1.95vw, 28px); } /* Ревью: при нехватке места сначала ужимается ряд голосов (он прокручивается сам), отклик и ответы стоят. */ #app.v2-fit .review-voices:not(.is-compact) { flex-shrink: 50; } @media (max-width: 760px) { /* Отклик на телефоне: что выбрано и стрелки под ним; заголовок «Решение принято» — для скринридера. Текст не обрезается (проверка «текст 200 %»). Целиком отклик в листе «Что изменилось». */ #app.v2 .choice-feedback.is-compact { grid-template-areas: "label more" "deltas more"; padding: 4px 8px; } #app.v2 .choice-feedback.is-compact.has-outcome { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "art label more" "art deltas more"; } #app.v2 .choice-feedback.is-compact > .feedback-art { width: 44px; } #app.v2 .choice-feedback.is-compact > .feedback-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } #app.v2 .choice-feedback.is-compact .feedback-label { margin: 0; font-size: 13px; line-height: 1.3; } #app.v2 .choice-feedback.is-compact .feedback-more { padding: 2px 8px; } /* «Ход истории»: подпись и клетки глав одной строкой; «Кто в сцене и что решено» — для скринридера. */ #app.v2-fit .story-toggle { flex-wrap: nowrap; gap: 8px; padding: 4px 10px; font-size: 12px; } #app.v2-fit .story-toggle .story-toggle-text { flex: 0 1 auto; min-width: 0; } #app.v2-fit .story-toggle .story-cells-mini { gap: 2px; } #app.v2-fit .story-toggle .story-cells-mini .story-cell { width: 8px; height: 10px; } #app.v2-fit .story-toggle .story-toggle-more { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Карта фокуса уступает место до 64 px (было 84). */ #app.v2-fit .split-art, #app.v2-fit .stage-art { min-height: 56px; } #app.v2-fit .focus-screen .split-art { min-height: 64px; } #app.v2-fit .event-screen .split-side { gap: 6px; } #app.v2-fit .feedback-slot .choice-feedback.is-compact { margin-bottom: 0; } /* Кадр события на телефоне (правка автора 07.10): сначала треть карточки, при нехватке места сперва ужимается текст события до двух строк и прокручивается сам, потом кадр. Нижняя граница — 80 px (9,5 % высоты окна на телефоне поменьше): лица ещё различимы, и самые тяжёлые шаги настоящего забега (глава «Окошка» с плашкой решения и четырьмя ответами) помещаются. В каталоге состояний кадр не меньше 108 px. Ответы стоят на месте, страница не прокручивается. Текст и ответы становятся прямыми детьми карточки (display: contents у обёртки), чтобы колонка распределяла место между кадром и текстом в одном проходе. У кризиса порядок областей задан order, его обёртка остаётся. */ #app.v2-fit .card.event-screen > .split-side, #app.v2-fit .card.event-stage:not(.stage-crisis) > .stage-body { display: contents; } #app.v2-fit .card.event-screen > .split-side > * { flex: none; margin: 6px 12px 0; } #app.v2-fit .card.event-screen > .split-side > :first-child { margin-top: 8px; } #app.v2-fit .card.event-screen > .split-side > :last-child { margin-bottom: 10px; } #app.v2-fit .card.event-screen > .split-art, #app.v2-fit .card.event-stage:not(.stage-crisis) > .stage-art { flex: 1 1 calc((100vh - 120px) / 3); flex-basis: calc((100dvh - 120px) / 3); min-height: min(80px, 9.5vh); } #app.v2-fit .card.event-screen .event-text, #app.v2-fit .card.event-stage .stage-text, #app.v2-fit .card.stage-personal .stage-talk { flex: 0 1000 auto; min-height: 3em; } /* Пока над экраном висит системная плашка (сброс по ?new=1, ошибка записи, конфликт вкладок), кадр может уступить ей ещё, до прежних 56 px: плашка временная, ответы важнее. */ #app.v2-fit:has(> .system-note) .card.event-screen > .split-art, #app.v2-fit:has(> .system-note) .card.event-stage:not(.stage-crisis) > .stage-art { min-height: 56px; } }