/* Экраны старта: этап 7 редизайна, группа 1 (05.10.2026).
 * 01-B «Дом с историями», 02-C «Стартовая платформа», 03-C «Внутренний компас»,
 * 04-A «Доска полугодия». Макеты — docs/design/screen-selection-2026-10-04/{01-menu/B,
 * 02-class/C, 03-values/C, 04-plan/A}.png, контракт оболочки — shell-contract.md.
 * Подключён после shell.css. Цвета и рамки — токены Pixel Life (DESIGN.md); бумага
 * листов целей — «Warm Paper» (--text) с тёмными чернилами (--primary-ink). */

:root { --primary-hover: #ffd28d; }

/* ---------- общее: фон экрана и тихая заглушка ---------- */
.card.start-screen { padding: 0; background: none; border: 0; border-image: none; }
.screen-backdrop { position: absolute; inset: 0; z-index: -1; margin: 0; background: var(--art-bg); }
.screen-backdrop .art-frame { height: 100%; aspect-ratio: auto; }
.screen-backdrop .art-image { object-fit: cover; object-position: center 60%; }
/* Затемнение сверху и снизу: текст поверх иллюстрации держит контраст при любом фоне. */
.screen-backdrop::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(9, 21, 38, .9) 0%, rgba(9, 21, 38, .45) 30%, rgba(9, 21, 38, .25) 58%, rgba(9, 21, 38, .92) 100%);
}
.art-ph-quiet {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(170, 187, 208, .04) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(170, 187, 208, .04) 0 1px, transparent 1px 24px),
    radial-gradient(120% 80% at 50% 100%, #1d3350 0%, #12233a 45%, #0d1b2e 100%);
}
.art-figure .art-ph-quiet { background: none; }
.start-head { display: grid; gap: 10px; }
.start-head .kicker { margin: 0; color: var(--muted); }
.start-head h2 { margin: 0; text-wrap: balance; }
.start-lead { margin: 0; max-width: 62ch; font-size: 16px; line-height: 1.55; color: var(--text); }

/* Значки 16 × 16 крупнее в плитках экранов старта. */
.menu-icon .icon, .value-icon .icon, .value-slot .icon, .compass-tile .icon { width: 24px; height: 24px; vertical-align: middle; }

/* ---------- 01-B · главное меню ---------- */
.menu-screen.menu-home { display: block; min-height: 0; }
.menu-home-wrap {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "bar" "stage" "actions" "meta";
}
.menu-topbar {
  grid-area: bar; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 0 0 12px; border-bottom: 1px solid var(--edge);
}
.menu-topbar .game-brand { order: 0; width: auto; font-size: 26px; line-height: 1.1; }
.menu-topbar .topbar-actions { order: 1; margin-left: auto; }
.menu-topbar .topbar-button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 8px 14px;
  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;
}
.menu-topbar .topbar-button:hover:not(:disabled) { background: var(--choice-hover); border-image-source: url("assets/pixel-frame-amber.svg"); }
.menu-topbar .topbar-button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.menu-hero {
  grid-area: stage; z-index: 1; align-self: start; max-width: 620px;
  margin-top: 16px; padding: clamp(28px, 4vw, 56px) clamp(20px, 3.4vw, 48px) 24px;
}
.menu-hero h1 { margin: 0 0 18px; font: 700 clamp(48px, 5.2vw, 82px)/.98 var(--display); color: var(--text); text-wrap: balance; }
.menu-hero h1 span { color: var(--green); }
.menu-hero h1:focus-visible { outline: 2px dashed var(--accent); outline-offset: 4px; }
.menu-hero h1:focus:not(:focus-visible) { outline: none; }
.menu-hero .tagline { margin: 0; font-family: var(--display); font-size: clamp(22px, 2vw, 30px); line-height: 1.25; color: #b9cce6; }
.menu-art { grid-area: stage; margin-top: 16px; border: 1px solid var(--edge); }
.menu-art .art-frame { aspect-ratio: auto !important; height: clamp(380px, 60vh, 640px); }
.menu-art .art-image { object-fit: cover; object-position: center 45%; }
/* Слева под заголовком иллюстрация уходит в тень: заголовок читается на любом кадре. */
.menu-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(9, 21, 38, .94) 0%, rgba(9, 21, 38, .7) 28%, rgba(9, 21, 38, 0) 56%);
}
.menu-actions {
  grid-area: actions; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px; padding: 24px 0 4px;
}
.menu-home .menu-actions button.menu-action {
  display: flex; align-items: center; gap: 16px; width: 100%; max-width: none; min-height: 84px; margin: 0;
  padding: 14px 22px; color: var(--text); background: var(--panel); text-align: left;
  border: 4px solid var(--edge); border-image: url("assets/pixel-frame.svg") 4 / 4px / 0 stretch;
  font: 600 24px/1.15 var(--display); transition: background-color 160ms ease-out;
}
.menu-home .menu-actions button.menu-action:hover:not(:disabled) { background: var(--choice-hover); border-image-source: url("assets/pixel-frame-amber.svg"); }
.menu-home .menu-actions button.menu-action.primary {
  color: var(--primary-ink); background: var(--accent); border-image-source: url("assets/pixel-frame-amber.svg");
}
.menu-home .menu-actions button.menu-action.primary:hover { background: var(--primary-hover); }
.menu-icon { display: grid; place-items: center; flex: none; width: 28px; }
.menu-label { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.menu-sub { font: 400 13px/1.3 "Segoe UI", system-ui, sans-serif; color: var(--muted); }
.menu-action.primary .menu-sub { color: var(--primary-ink); }
.menu-meta { grid-area: meta; display: flex; align-items: center; gap: 16px; margin: 18px 0 0; color: var(--muted); font-size: 13px; }
.menu-meta::before, .menu-meta::after { content: ""; flex: 1; height: 1px; background: var(--edge); }
@media (prefers-reduced-motion: reduce) { .menu-home .menu-actions button.menu-action { transition: none; } }

/* ---------- 02-C · исходный опыт ---------- */
.class-stage {
  position: relative; isolation: isolate; display: grid; grid-template-rows: auto 1fr;
  min-height: clamp(560px, 72vh, 760px); overflow: hidden; border: 1px solid var(--edge); background: var(--art-bg);
}
.class-head { justify-items: center; padding: 28px 24px 4px; text-align: center; }
.class-head h2 { font-size: clamp(30px, 3vw, 46px); }
.class-head .start-lead { text-align: center; }
.class-head .gender-switch { margin: 6px 0 0; text-align: center; }
.class-head .gender-options { background: rgba(19, 34, 56, .92); }
.class-options {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-self: end; align-items: end;
  padding: 8px 24px 22px;
}
.class-option { position: relative; display: grid; justify-items: center; gap: 8px; min-width: 0; }
/* Радиокнопка накрывает всю фигуру с подписью: выбор касанием, мышью и стрелками. */
.class-radio { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.class-pick { display: grid; justify-items: center; gap: 10px; width: 100%; min-width: 0; }
.class-fig { display: block; width: 100%; height: clamp(230px, 40vh, 400px); }
.class-fig .art { height: 100%; background: none; }
.class-fig .art-frame { height: 100%; aspect-ratio: auto !important; background: none; overflow: visible; }
.class-fig .art-image {
  object-fit: contain; object-position: center bottom; filter: brightness(.68) saturate(.8);
  transition: filter 180ms ease-out, transform 180ms ease-out;
}
.class-option:hover .class-fig .art-image { filter: brightness(.88) saturate(.92); }
/* Выбранная фигура в ступенчатом контуре лампы, как в макете. */
.class-option:has(.class-radio:checked) .class-fig .art-image {
  filter: drop-shadow(2px 0 0 var(--accent)) drop-shadow(-2px 0 0 var(--accent)) drop-shadow(0 2px 0 var(--accent)) drop-shadow(0 -2px 0 var(--accent));
  transform: translateY(-4px);
}
.class-name {
  display: grid; place-items: center; width: 100%; min-height: 52px; padding: 8px 10px; text-align: center;
  color: var(--text); background: rgba(19, 34, 56, .95); font: 600 20px/1.15 var(--display);
  border: 4px solid var(--edge); border-image: url("assets/pixel-frame.svg") 4 / 4px / 0 stretch;
  overflow-wrap: anywhere; hyphens: auto;
}
.class-option:hover .class-name { border-image-source: url("assets/pixel-frame-amber.svg"); }
.class-option:has(.class-radio:checked) .class-name { color: var(--primary-ink); background: var(--accent); border-image-source: url("assets/pixel-frame-amber.svg"); }
.class-option:has(.class-radio:focus-visible) .class-name { outline: 3px solid var(--accent); outline-offset: 3px; }
.class-shift { min-height: 2.7em; color: var(--muted); font-size: 13px; line-height: 1.35; text-align: center; font-variant-numeric: tabular-nums; }
.class-option:has(.class-radio:checked) .class-shift { color: var(--text); }
.class-facts { display: none; }

/* Шесть стартовых значений: подпись, клетки, число, отличие профессии. */
.class-params { display: grid; gap: 6px; }
.cp-row { display: grid; grid-template-columns: 8.5em minmax(64px, 1fr) 2.2em 2.8em; align-items: center; gap: 10px; font-size: 13px; }
.cp-label { color: var(--text); }
.cp-label.identity { color: var(--identity); }
.cp-val { font: 600 15px/1 "Segoe UI", system-ui, sans-serif; text-align: right; font-variant-numeric: tabular-nums; }
.cp-delta { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cp-delta.is-up { color: var(--green); }
.cp-delta.is-down { color: var(--sig-danger); }
.cp-caption { margin: 0 0 8px; color: var(--muted); font-size: 12px; }
.cells { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px; height: 9px; }
.cell { background: #0e1424; }
.cell.is-on { background: var(--identity); }
.cell.is-on.is-green { background: var(--green); }
.cell.is-on.is-yellow { background: var(--yellow); }
.cell.is-on.is-red { background: var(--red); }

.class-detail {
  display: grid; grid-template-columns: 120px minmax(0, 1.25fr) minmax(300px, 1fr) auto; align-items: center; gap: 18px 26px;
  margin-top: 16px; padding: 20px 24px; background: var(--panel);
  border: 4px solid var(--edge); border-image: url("assets/pixel-frame.svg") 4 / 4px / 0 stretch;
}
.class-detail-body { display: contents; }
.class-face { width: 120px; height: 120px; overflow: hidden; background: var(--panel2); border: 1px solid var(--edge); }
.class-face .art, .class-face .art-frame { height: 100%; aspect-ratio: auto !important; background: none; }
.class-face .art-image { object-fit: cover; object-position: 50% 0; }
.class-detail-name { margin: 0 0 8px; font: 600 30px/1.1 var(--display); color: var(--accent); }
.class-detail-facts, .class-facts-text { display: grid; gap: 7px; margin: 0; font-size: 14px; line-height: 1.45; }
.cf-flavor { display: block; font-size: 16px; }
.cf-line { display: grid; grid-template-columns: 7.6em minmax(0, 1fr); gap: 10px; align-items: baseline; }
.cf-tag { color: var(--muted); font-size: 12px; font-weight: 600; }
.cf-trait .cf-tag { color: var(--green); }
.cf-limit .cf-tag { color: var(--sig-warn); }
.cf-text strong { font-weight: 600; }
.cf-note { display: block; color: var(--muted); font-size: 13px; }
.cf-warn { color: var(--sig-warn); }
.class-confirm { display: grid; gap: 8px; justify-items: end; }
.class-picked { display: none; margin: 0; font-size: 14px; color: var(--muted); }
.class-picked strong { color: var(--text); }
.class-confirm button.choice { margin: 0; white-space: nowrap; font-size: 17px; padding: 14px 22px; }
@media (prefers-reduced-motion: reduce) { .class-fig .art-image { transition: none; } }

/* ---------- 03-C · ценности ---------- */
.card.values-screen {
  position: relative; isolation: isolate; padding: clamp(16px, 3vw, 40px);
  border: 1px solid var(--edge); background: var(--art-bg);
}
.values-panel {
  display: grid; gap: 20px; max-width: 1140px; margin: 0 auto; padding: 28px 32px 32px; background: rgba(19, 34, 56, .96);
  border: 4px solid var(--edge); border-image: url("assets/pixel-frame.svg") 4 / 4px / 0 stretch;
}
.values-head h2 { font-size: clamp(28px, 2.6vw, 40px); }
.values-rule { padding: 14px 18px; background: var(--panel2); border: 1px solid rgba(199, 181, 230, .45); }
.values-rule-title { margin: 0 0 6px; font: 600 16px/1.3 "Segoe UI", system-ui, sans-serif; color: var(--identity); }
.values-rule-list { display: grid; gap: 4px; margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.5; }
.values-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 28px; align-items: start; }
.values-list { display: grid; gap: 10px; }
.card button.value-choice {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; margin: 0;
  padding: 12px 48px 12px 12px; text-align: left;
}
.card button.value-choice::before { left: auto; right: 14px; top: 14px; }
.value-icon { display: grid; place-items: center; width: 44px; height: 44px; color: var(--identity); background: var(--bg); border: 1px solid var(--edge); }
.value-choice[aria-pressed="true"] .value-icon { color: var(--primary-ink); background: var(--identity); border-color: var(--identity); }
.value-main { display: grid; gap: 3px; min-width: 0; }
.value-main strong { font-size: 17px; line-height: 1.3; }
.value-protects { color: var(--identity); font-size: 13px; line-height: 1.4; }
.value-text { color: var(--muted); font-size: 14px; line-height: 1.45; font-weight: 400; }
.values-side { display: grid; gap: 18px; position: sticky; top: 16px; }
.values-compass { position: relative; width: min(100%, 340px); aspect-ratio: 1; margin: 0 auto; }
.values-compass::before {
  content: ""; position: absolute; inset: 15%; border: 1px dashed rgba(199, 181, 230, .4); border-radius: 50%;
}
.compass-hub {
  position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; transform: translate(-50%, -50%);
  display: grid; place-items: center; overflow: hidden; background: var(--panel2); border: 2px solid var(--identity);
}
.compass-hub .portrait { width: 100%; height: 100%; border: 0; }
.compass-tile {
  position: absolute; display: grid; justify-items: center; gap: 4px; width: 104px; padding: 8px 6px;
  transform: translate(-50%, -50%); color: var(--text); background: var(--panel2); cursor: pointer;
  border: 4px solid var(--edge); border-image: url("assets/pixel-frame.svg") 4 / 4px / 0 stretch;
  font-size: 13px; font-weight: 600; line-height: 1.2; text-align: center;
  transition: background-color 180ms ease-out, color 180ms ease-out;
}
.compass-tile .icon { color: var(--identity); }
.compass-tile.is-on { color: var(--primary-ink); background: var(--identity); border-image-source: url("assets/pixel-frame-amber.svg"); }
.compass-tile.is-on .icon { color: var(--primary-ink); }
.compass-tile[data-tile="honesty"] { left: 50%; top: 11%; }
.compass-tile[data-tile="people"] { left: 87%; top: 38%; }
.compass-tile[data-tile="word"] { left: 73%; top: 84%; }
.compass-tile[data-tile="craft"] { left: 27%; top: 84%; }
.compass-tile[data-tile="freedom"] { left: 13%; top: 38%; }
.values-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.value-slot {
  display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px 12px;
  color: var(--muted); border: 2px dashed var(--edge); font-size: 14px; line-height: 1.25;
}
.value-slot.is-filled { color: var(--text); background: rgba(199, 181, 230, .14); border: 2px solid var(--identity); animation: slot-in 180ms ease-out both; }
.value-slot.is-filled .icon { color: var(--identity); }
@keyframes slot-in { from { opacity: .3; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.values-actions { display: grid; gap: 10px; }
.values-actions .values-count { margin: 0; color: var(--text); font-size: 15px; font-weight: 600; }
.values-actions button.choice { margin: 0; }
@media (prefers-reduced-motion: reduce) { .value-slot.is-filled { animation: none; } .compass-tile { transition: none; } }

/* ---------- 04-A · доска полугодия ---------- */
.card.plan-screen {
  position: relative; isolation: isolate; display: grid; gap: 18px; padding: clamp(16px, 3vw, 40px);
  border: 1px solid var(--edge); background: var(--art-bg);
}
.plan-board {
  display: grid; gap: 18px; width: 100%; max-width: 1240px; margin: 0 auto; padding: 26px 30px 30px;
  background: rgba(19, 34, 56, .96); border: 4px solid var(--edge); border-image: url("assets/pixel-frame.svg") 4 / 4px / 0 stretch;
}
.plan-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 28px; align-items: start; }
.plan-head > * { grid-column: 1; margin: 0; }
.plan-head .kicker { margin: 0; }
.plan-head h2 { margin: 0; font-size: clamp(28px, 2.8vw, 42px); }
.plan-head p.flavor { margin: 4px 0 0; max-width: 70ch; }
.plan-head .plan-note { max-width: 70ch; color: var(--muted); }
.plan-head .plan-horizon { grid-column: 2; grid-row: 1 / span 3; }
.plan-horizon { display: grid; gap: 8px; min-width: 240px; padding: 12px 16px; background: var(--panel2); border: 1px solid var(--edge); }
.ph-label { color: var(--muted); font-size: 12px; }
.ph-line { display: flex; align-items: center; gap: 10px; }
.ph-dot { font: 600 15px/1 "Segoe UI", system-ui, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ph-track { flex: 1; min-width: 36px; height: 4px; background: repeating-linear-gradient(90deg, var(--accent) 0 8px, transparent 8px 12px); }
.plan-horizon.is-year .ph-track { background: repeating-linear-gradient(90deg, var(--identity) 0 8px, transparent 8px 12px); }
.plan-pinned { display: flex; flex-wrap: wrap; gap: 10px; }
.plan-pinned .plan-note { margin: 0; padding: 10px 12px; background: var(--panel2); border: 1px solid var(--edge); color: var(--text); }
.plan-pinned .plan-company { border-left: 3px solid var(--identity); }
.plan-pinned .plan-half-goal.is-assigned { border-style: dashed; }
.plan-board .plan-guide { margin: 0; }
.plan-sheets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; padding-top: 6px; }

.goal-sheet {
  position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 24px 20px 18px;
  color: var(--primary-ink); background: var(--text);
  border: 4px solid var(--edge); border-image: url("assets/pixel-frame.svg") 4 / 4px / 0 stretch;
  transition: transform 160ms ease-out;
}
/* Кнопка на листе: квадратный «гвоздик» по тегу; личная цель — сиреневый, амбициозная — лампа. */
.goal-sheet::before {
  content: ""; position: absolute; top: -9px; left: 50%; width: 14px; height: 14px; transform: translateX(-50%);
  background: var(--green); border: 2px solid var(--primary-ink);
}
.goal-sheet.is-ambitious::before { background: var(--accent); }
.goal-sheet.is-personal::before { background: var(--identity); }
.goal-sheet:hover { transform: translateY(-2px); border-image-source: url("assets/pixel-frame-amber.svg"); }
.goal-sheet:has(.gs-pick:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; border-image-source: url("assets/pixel-frame-amber.svg"); }
.gs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.goal-sheet .goal-chip { padding: 2px 10px; font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--primary-ink); background: var(--green); border: 0; }
.goal-sheet.is-personal .chip-tag { background: var(--identity); }
.goal-sheet .goal-chip.chip-ambitious { color: var(--primary-ink); background: var(--accent); }
.goal-sheet .goal-chip.chip-assigned { background: var(--sig-assigned); }
/* Заголовок цели системным шрифтом: в Pixelify цифры «5» и «2» читаются как «S» и «8». */
.gs-title { margin: 0; font: 700 20px/1.25 "Segoe UI", system-ui, sans-serif; text-wrap: balance; overflow-wrap: anywhere; }
.gs-pick {
  display: inline; margin: 0; padding: 0; color: inherit; background: none; border: 0; font: inherit; text-align: left; cursor: pointer;
}
.gs-pick::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.gs-pick:focus-visible { outline: none; }
.gs-body { display: grid; gap: 10px; flex: 1; align-content: start; }
.gs-block { display: grid; gap: 4px; padding-top: 10px; border-top: 1px dashed rgba(23, 33, 50, .35); }
.gs-label { margin: 0; color: rgba(23, 33, 50, .8); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.gs-text { margin: 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.gs-list { display: grid; gap: 3px; margin: 0; padding-left: 16px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.gs-target { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 2px 0; font-size: 14px; font-weight: 700; }
.goal-sheet .goal-meter { margin: 0; }
.goal-sheet .goal-cell { border-color: var(--primary-ink); background: transparent; }
.goal-sheet .goal-cell.is-on { background: var(--green); }
.gs-role { font-weight: 500; }
.gs-more { position: relative; z-index: 2; font-size: 14px; }
.gs-more summary {
  display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.gs-more summary:focus-visible { outline: 2px dashed var(--primary-ink); outline-offset: 2px; }
.gs-more .gs-list { padding: 4px 0 6px 16px; }
.gs-take {
  display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 10px 14px;
  color: var(--text); background: var(--primary-ink); font-size: 15px; font-weight: 600;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}
.goal-sheet:hover .gs-take, .goal-sheet:has(.gs-pick:focus-visible) .gs-take { color: var(--primary-ink); background: var(--accent); }
.card.plan-screen > .shell-rail {
  width: 100%; max-width: 1240px; margin: 0 auto; padding: 16px 18px; background: var(--panel);
  border: 4px solid var(--edge); border-image: url("assets/pixel-frame.svg") 4 / 4px / 0 stretch;
}
.card.plan-screen > .challenge-panel, .plan-board > .challenge-panel { margin: 0; }
@media (prefers-reduced-motion: reduce) { .goal-sheet, .gs-take { transition: none; } .goal-sheet:hover { transform: none; } }

/* ---------- ширины ---------- */
@media (max-width: 1180px) {
  .class-detail { grid-template-columns: 104px minmax(0, 1fr) minmax(280px, 1fr); }
  .class-face { width: 104px; height: 104px; }
  .class-confirm { grid-column: 1 / -1; }
  .class-name { font-size: 18px; }
  .plan-sheets { gap: 16px; }
}
@media (max-width: 980px) {
  .plan-sheets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .values-body { grid-template-columns: minmax(0, 1fr); }
  .values-compass { display: none; }
  .values-side { position: static; }
}
@media (max-width: 900px) {
  .class-options { gap: 8px; padding: 8px 14px 18px; }
  .class-name { font-size: 16px; min-height: 48px; padding: 6px; }
  .class-shift { font-size: 12px; }
  .class-detail { grid-template-columns: 88px minmax(0, 1fr); }
  .class-face { width: 88px; height: 88px; }
  .class-detail-params { grid-column: 1 / -1; }
  .plan-head { grid-template-columns: minmax(0, 1fr); }
  .plan-head .plan-horizon { grid-column: 1; grid-row: auto; justify-self: start; }
}
@media (max-width: 760px) {
  /* Меню: заголовок и продолжение первыми, интерьер ниже (screen-specs 01-B, «Телефон»). */
  .menu-home-wrap { grid-template-areas: "bar" "head" "actions" "art" "meta"; }
  .menu-hero { grid-area: head; margin: 0; padding: 26px 0 6px; max-width: none; }
  .menu-hero h1 { font-size: clamp(44px, 12vw, 64px); }
  .menu-hero .tagline { font-size: 22px; }
  .menu-art { grid-area: art; margin: 20px -16px 0; border-left: 0; border-right: 0; }
  .menu-art .art-frame { height: clamp(200px, 58vw, 360px); }
  .menu-art::after { display: none; }
  .menu-actions { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 18px; }
  .menu-home .menu-actions button.menu-action { min-height: 64px; font-size: 22px; padding: 12px 18px; }

  /* Профессии вертикально, сведения рядом с названием без наведения. */
  .class-stage { display: block; min-height: 0; border: 0; margin: 0 -16px; }
  .class-head { padding: 22px 16px 14px; }
  .class-head h2 { font-size: 30px; }
  .class-options { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 0 16px 16px; }
  .class-option {
    grid-template-columns: 76px minmax(0, 1fr); justify-items: stretch; align-items: start; gap: 6px 14px; padding: 12px;
    background: rgba(19, 34, 56, .96); border: 4px solid var(--edge); border-image: url("assets/pixel-frame.svg") 4 / 4px / 0 stretch;
  }
  .class-option:has(.class-radio:checked) { border-image-source: url("assets/pixel-frame-amber.svg"); background: var(--panel2); }
  .class-option:has(.class-radio:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
  .class-option:has(.class-radio:focus-visible) .class-name { outline: none; }
  .class-pick { display: contents; }
  .class-fig { grid-column: 1; grid-row: 1 / span 2; width: 76px; height: 168px; }
  .class-name {
    grid-column: 2; grid-row: 1; justify-items: start; min-height: 0; padding: 0; text-align: left;
    background: none; border: 0; border-image: none; font-size: 22px;
  }
  .class-option:has(.class-radio:checked) .class-name { color: var(--accent); background: none; }
  .class-shift { display: none; }
  .class-facts { display: grid; gap: 10px; grid-column: 2; grid-row: 2; min-width: 0; }
  .class-params.is-compact .cp-row { grid-template-columns: minmax(0, 7.5em) minmax(40px, 1fr) 2em 2.4em; gap: 6px; font-size: 12px; }
  .class-params.is-compact .cp-val { font-size: 14px; }
  .class-facts-text { font-size: 13px; }
  .class-facts-text .cf-flavor { font-size: 14px; }
  .class-facts-text .cf-line { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* Полоса подробностей становится нижней панелью подтверждения. */
  .class-detail {
    position: sticky; bottom: 0; z-index: 5; grid-template-columns: minmax(0, 1fr); margin: 12px -16px 0; padding: 12px 16px;
  }
  .class-face, .class-detail-text, .class-detail-params { display: none; }
  .class-confirm { grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-items: stretch; }
  .class-picked { display: block; }
  .class-confirm button.choice { white-space: normal; padding: 12px 16px; }

  .card.values-screen { padding: 0; border: 0; margin: 0 -16px; }
  .values-panel { padding: 20px 16px 24px; border-left: 0; border-right: 0; }
  .values-head h2 { font-size: 28px; }
  .card button.value-choice { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 12px 44px 12px 10px; }
  .value-icon { width: 36px; height: 36px; }

  .card.plan-screen { padding: 0; border: 0; margin: 0 -16px; gap: 14px; }
  .plan-board { padding: 20px 16px 24px; border-left: 0; border-right: 0; }
  .plan-head h2 { font-size: 28px; }
  .plan-sheets { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .card.plan-screen > .shell-rail { margin: 0 auto; }
}
@media (max-width: 480px) {
  .plan-horizon { min-width: 0; }
  .ph-line { flex-wrap: wrap; }
  .ph-dot { white-space: normal; }
  .menu-topbar .topbar-actions .topbar-button > span { display: none; }
  .menu-topbar .topbar-button { padding: 8px 12px; min-width: 44px; justify-content: center; }
  .values-slots { grid-template-columns: minmax(0, 1fr); }
  .cp-row { grid-template-columns: 7em minmax(40px, 1fr) 2em 2.4em; gap: 6px; }
}
@media (max-width: 360px) {
  .menu-art, .class-stage, .card.values-screen, .card.plan-screen, .class-detail { margin-left: -12px; margin-right: -12px; }
  .class-option { grid-template-columns: 60px minmax(0, 1fr); }
  .class-fig { width: 60px; height: 140px; }
}

/* Текст 200%: длинные слова переносятся внутри колонки, страница не уезжает вбок (R18). */
.class-name, .cf-text, .cf-note, .value-main, .values-rule, .gs-title, .gs-text, .gs-list, .plan-note, .ph-dot, .menu-label { overflow-wrap: anywhere; }