/* === Светлая тема uchi-like === */
:root {
  --bg: #eef2fb;            /* мягкий голубоватый фон */
  --bg-accent: #e3e9f7;     /* волны/полоски */
  --card: #ffffff;
  --fg: #1c2340;
  --fg-dim: #6b7299;
  --primary: #7c5cff;       /* фиолетовый — главный */
  --primary-soft: #ede9ff;
  --primary-hover: #6a4dff;
  --accent: #5cd6ff;        /* голубой — подсказки */
  --accent-soft: #e0f6ff;
  --ok: #34c759;
  --ok-soft: #dff8e3;
  --bad: #ff6b6b;
  --bad-soft: #ffe1e1;
  --warn: #ffb547;
  --warn-soft: #fff2dc;
  --border: #e3e6f1;
  --shadow-sm: 0 2px 6px rgba(28, 35, 64, 0.06);
  --shadow-md: 0 8px 24px rgba(28, 35, 64, 0.08);
  --shadow-lg: 0 16px 50px rgba(28, 35, 64, 0.12);
  --radius: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;

  /* === Типографика (DUSHA → Принцип 14 «тёплый тон») === */
  /* Заголовки: Rubik — скруглённые углы, дружелюбный но взрослый */
  --font-heading: 'Rubik', system-ui, -apple-system, sans-serif;
  /* Текст: Nunito — округлая тёплая кириллица, читается в длинных условиях */
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Числа/координаты/матрицы: JetBrains Mono — точечный 0, различимые 1/l/I */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* Свитки игровых сцен: Lora italic — тёплый книжный курсив с крепкой кириллицей */
  --font-serif: 'Lora', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background:
    radial-gradient(1200px 600px at 20% -10%, var(--primary-soft) 0%, transparent 50%),
    radial-gradient(900px 500px at 100% 100%, var(--accent-soft) 0%, transparent 50%),
    var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  font-feature-settings: 'kern' 1, 'liga' 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* === Шапка — миниатюрная, чтобы не воровать внимание === */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  background: transparent;
  z-index: 5;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  font-weight: 800;
  color: #fff;
  font-size: 18px;
  box-shadow: var(--shadow-sm);
}
.brand-name { font-family: var(--font-heading); font-weight: 600; color: var(--fg); }

.topbar-spacer { flex: 1; }

/* === XP-индикатор справа в топбаре (DUSHA → Принцип 23a) === */
.xp-indicator {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  font: 700 15px var(--font-mono);
  color: var(--primary);
  user-select: none;
  cursor: default;
}
.xp-indicator .xp-icon { display: inline-flex; }
.xp-indicator .xp-num { min-width: 18px; text-align: right; transition: transform 0.2s ease; }
.xp-indicator.bump .xp-num { transform: scale(1.18); color: var(--ok); }

.xp-toast {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-4px, -50%);
  font: 800 13px var(--font-mono);
  color: var(--ok);
  background: var(--ok-soft);
  padding: 3px 9px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  white-space: nowrap;
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.9s;
}
.xp-toast.fly {
  transform: translate(-110%, -180%);
  opacity: 1;
}

/* Прогресс — крупные мягкие точки */
.progress {
  display: flex; gap: 10px;
  flex: 0 1 auto;
}
.progress .dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: #d8ddee;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}
.progress .dot:hover { transform: scale(1.15); }
.progress .dot.active {
  background: var(--primary);
  width: 30px;
  border-radius: 999px;
  box-shadow: 0 0 0 5px var(--primary-soft);
}
.progress .dot.done {
  background: var(--ok);
}

/* === Главная сцена — одна центрированная карточка === */
.stage {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 16px 24px 24px;
  overflow: auto;
  position: relative;
}

/* Карточка-урок */
.card {
  width: min(820px, 100%);
  background: var(--card);
  border-radius: var(--radius);
  padding: 38px 42px 32px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  animation: cardIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.card.wide { width: min(1100px, 100%); }

@keyframes cardIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Класс .stagger-children — для контейнеров ВНУТРИ шага, где элементы
   действительно нужны поочерёдно (например, серия результатов вычисления). */
.stagger-children > * {
  opacity: 0;
  transform: translateY(8px);
  animation: staggerIn 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
.stagger-children > *:nth-child(2) { animation-delay: 350ms; }
.stagger-children > *:nth-child(3) { animation-delay: 700ms; }
.stagger-children > *:nth-child(4) { animation-delay: 1050ms; }
.stagger-children > *:nth-child(5) { animation-delay: 1400ms; }
.stagger-children > *:nth-child(6) { animation-delay: 1750ms; }

@keyframes staggerIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Заголовок микро-шага */
.micro-head {
  display: flex; align-items: center; gap: 12px;
  color: var(--fg-dim);
  font-size: 15px;
  font-weight: 600;
}
.micro-head .step-num {
  display: inline-grid; place-items: center;
  min-width: 32px; height: 32px;
  padding: 0 10px;
  background: var(--primary-soft);
  color: var(--primary);
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
}

.card h1 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.25;
}
.card h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  color: var(--primary);
}
.card p {
  margin: 0;
  color: var(--fg);
  font-size: 17px;
  line-height: 1.6;
}
.card p.muted { color: var(--fg-dim); }
.card p.lead {
  font-size: 19px;
  color: var(--fg);
}

/* === Группа «имя = матрица» (DUSHA → Принцип 21) === */
.matrix-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 auto;
}
.matrix-name {
  font: 700 32px var(--font-mono);
  font-variant-numeric: tabular-nums slashed-zero;
  color: var(--fg);
  letter-spacing: -0.5px;
  padding-bottom: 4px;
}

/* === Матричный view: внешний контейнер + SVG-overlay для линий === */
.matrix-view-outer {
  position: relative;
  display: inline-block;
  align-self: center;
  /* Отступы оставляют место для axis-pin (28px сверху для col-меток, 28px слева для row-меток).
     См. DUSHA → Принцип 20 «Сам проверяй». */
  margin: 8px 0 8px 0;
  padding: 32px 0 0 32px;
}
.matrix-view-svg {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  overflow: visible;
}
.matrix-view {
  display: inline-grid;
  gap: 8px;
  padding: 0;
  background: transparent;
  border-radius: var(--radius-md);
  font: 700 28px var(--font-mono);
}
.matrix-view .cell {
  width: 72px; height: 72px;
  display: grid; place-items: center;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fafbff;
  color: var(--fg);
  cursor: default;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.matrix-view .cell.row-hi {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.matrix-view .cell.col-hi {
  background: var(--warn-soft);
  border-color: var(--warn);
}
.matrix-view .cell.both-hi {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(124, 92, 255, 0.25);
}
.matrix-view .cell.active {
  background: var(--ok-soft);
  border-color: var(--ok);
  color: var(--ok);
  transform: scale(1.12);
}

/* === Появляющиеся подписи у краёв матрицы (DUSHA → step-02 без линий-крест) === */
.axis-pin {
  position: absolute;
  font: 800 18px var(--font-mono);
  opacity: 0;
  transition:
    opacity 0.5s cubic-bezier(0.2, 0.8, 0.3, 1),
    transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1);
  pointer-events: none;
  user-select: none;
}
.axis-pin.row {
  color: var(--accent);
  transform: translate(-12px, -50%);
}
.axis-pin.row.show {
  opacity: 1;
  transform: translate(0, -50%);
}
.axis-pin.col {
  color: var(--warn);
  transform: translate(-50%, -12px);
}
.axis-pin.col.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* === Подписи строк (слева) и столбцов (сверху) === */
.matrix-view .axis-label {
  display: grid;
  place-items: center;
  font: 700 14px var(--font-mono);
  color: var(--fg-dim);
  letter-spacing: 0.5px;
  min-width: 22px;
  min-height: 22px;
}
.matrix-view .axis-label.row-label {
  color: var(--accent);
  padding-right: 4px;
}
.matrix-view .axis-label.col-label {
  color: var(--warn);
  padding-bottom: 4px;
}
.matrix-view .axis-label.corner { /* пустой угловой квадрат */ }

/* === Choice tiles — большие округлые кнопки === */
.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 4px;
  justify-content: center;
}
.choice {
  min-width: 110px;
  padding: 18px 28px;
  background: #fafbff;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  font: 700 20px var(--font-mono);
  color: var(--fg);
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.choice:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(124, 92, 255, 0.15);
}
.choice:active { transform: translateY(0); }
.choice.correct {
  background: var(--ok-soft);
  border-color: var(--ok);
  color: var(--ok);
  animation: pulseOk 0.5s ease-out;
}
@keyframes pulseOk {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.4); }
  50%  { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(52, 199, 89, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); }
}
.choice.wrong {
  background: var(--bad-soft);
  border-color: var(--bad);
  color: var(--bad);
  animation: shake 0.5s cubic-bezier(.36,.07,.19,.97);
}
@keyframes shake {
  10%, 90% { transform: translateX(-3px); }
  20%, 80% { transform: translateX(5px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}
.choice:disabled { opacity: 0.5; cursor: not-allowed; }

/* === Подсказки === */
.hint-box {
  margin-top: 8px;
  padding: 16px 18px;
  background: var(--accent-soft);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 15px;
  color: var(--fg);
  line-height: 1.55;
  animation: cardIn 0.3s ease-out;
}
.hint-box.ok {
  background: var(--ok-soft);
  border-left-color: var(--ok);
}
.hint-box.bad {
  background: var(--bad-soft);
  border-left-color: var(--bad);
}

/* === Похвала/подсказка — короткая реплика СНИЗУ (не «сверху», не AI-баннер) === */
.celebrate-toast {
  position: fixed;
  bottom: 26px;
  top: auto;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--ok);
  color: #fff;
  padding: 11px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 10px 26px rgba(52, 199, 89, 0.30);
  z-index: 100;
  display: flex; align-items: center; gap: 9px;
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1.3), opacity 0.3s;
}
.celebrate-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
/* Мягкое «не совсем» — тёплый янтарь, не красная ошибка (ободрение, не наказание) */
.celebrate-toast.nudge {
  background: linear-gradient(180deg, #ffc266, #f5a531);
  box-shadow: 0 12px 30px rgba(245, 165, 49, 0.35);
}
.celebrate-toast .emoji { font-size: 24px; }

/* Пояснение к ошибке — тост В СТИЛЕ ПРОЕКТА (пергамент/латунь, как кнопки), снизу по центру.
   Показывается только когда у ошибки есть содержательный текст-подсказка (см. nudge()). */
.scene-hint {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(60px);
  background: #fdf6dc; color: #6b4e1f; border: 2px solid #b88f3c; border-radius: 12px;
  padding: 10px 20px; text-align: center; max-width: min(520px, 86vw);
  font: 700 14px var(--font-serif, 'Lora', Georgia, serif); letter-spacing: .2px;
  box-shadow: 0 4px 0 rgba(124, 92, 42, .30), 0 12px 26px rgba(40, 30, 12, .18);
  z-index: 100; opacity: 0; transition: transform .35s cubic-bezier(.2, .8, .3, 1.2), opacity .3s;
}
.scene-hint.show { transform: translateX(-50%) translateY(0); opacity: 1; }
/* Пергамент остаётся, меняется только акцентная рамка/тень — верно (зелёный) / неверно (красный) */
.scene-hint.ok  { border-color: #34c759; box-shadow: 0 4px 0 rgba(28,120,60,.28), 0 12px 26px rgba(40,30,12,.18); }
.scene-hint.bad { border-color: #e05656; box-shadow: 0 4px 0 rgba(150,40,40,.28), 0 12px 26px rgba(40,30,12,.18); }

/* === Нижняя панель === */
.navbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 28px;
  background: transparent;
}
.step-label {
  flex: 1; text-align: center;
  color: var(--fg-dim);
  font-size: 14px;
  font-weight: 500;
}

/* === Кнопки нижней панели === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 2px solid transparent;
  background: #fff;
  color: var(--fg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  box-shadow: var(--shadow-sm);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-primary {
  background: var(--primary);
  color: #fff;
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary {
  background: #fff;
  border-color: var(--border);
  color: var(--fg);
}
.btn-ghost { background: transparent; box-shadow: none; }
.btn-ghost:hover { background: rgba(124, 92, 255, 0.08); box-shadow: none; }

/* === Пресет-чипы (готовые движения) === */
.presets {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}
.preset {
  padding: 10px 16px;
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: var(--fg);
  transition: all 0.15s ease;
  box-shadow: var(--shadow-sm);
}
.preset:hover {
  color: var(--primary);
  border-color: var(--primary);
  transform: translateY(-1px);
}

/* === Пульт ввода (2×2) — крупный, мягкий === */
.matrix-pad {
  display: inline-grid;
  gap: 10px;
  padding: 18px;
  background: #fafbff;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
}
.matrix-pad input {
  width: 80px;
  height: 60px;
  text-align: center;
  font: 700 22px var(--font-mono);
  background: #fff;
  border: 2px solid var(--border);
  color: var(--fg);
  border-radius: var(--radius-sm);
  outline: none;
  transition: all 0.15s ease;
  -moz-appearance: textfield;
}
.matrix-pad input::-webkit-outer-spin-button,
.matrix-pad input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.matrix-pad input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 5px var(--primary-soft);
}
.matrix-pad .label {
  font-size: 12px;
  color: var(--fg-dim);
  text-align: center;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 600;
}

/* === 3D-хост — для шагов с 3D === */
.scene-host {
  width: 100%;
  height: 360px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background:
    radial-gradient(800px 400px at 50% 0%, #ffffff 0%, transparent 70%),
    linear-gradient(180deg, #f5f7ff 0%, #eaf0fb 100%);
  border: 1px solid var(--border);
}
.scene-host canvas { display: block; }
.scene-host-compact { height: 200px; }

/* === Ряд «формула + пульт» под 3D-сценой === */
.controls-row {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0;
}
.formula-wrap {
  display: grid;
  place-items: center;
  min-width: 160px;
  padding: 4px 12px;
}
.pad-host {
  display: grid;
  place-items: center;
}

/* === Компактная вариация карточки для шагов с тяжёлой сценой === */
.card.compact {
  padding: 22px 32px 18px;
  gap: 10px;
}
.card.compact h1 { font-size: 24px; }
.card.compact p.lead { font-size: 16px; }
.card.compact .matrix-pad { padding: 12px; gap: 8px; }
.card.compact .matrix-pad input { width: 60px; height: 48px; font-size: 18px; }
.card.compact .matrix-pad .label { font-size: 10px; }
.card.compact .hint-box { padding: 10px 14px; font-size: 13px; }
.card.compact .presets { gap: 6px; }
.card.compact .preset { padding: 7px 12px; font-size: 13px; }

/* === Иконка внутри пресет-чипа === */
.preset {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.preset svg {
  color: var(--fg-dim);
  transition: color 0.15s ease;
}
.preset:hover svg { color: var(--primary); }

/* === Картиночные карты для шага 5 === */
.image-task {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
.image-card {
  background: #fafbff;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.image-card canvas {
  background: #fff;
  border-radius: var(--radius-sm);
  max-width: 100%;
  height: auto;
}
.image-card .tag {
  font-size: 13px;
  color: var(--fg-dim);
  font-weight: 600;
}
.image-card .score {
  font: 800 26px var(--font-mono);
  color: var(--primary);
}

/* === Карточка-игра: full-bleed SVG, никаких HTML-кнопок снаружи (DUSHA → Принцип 28) === */
.card.card-game {
  width: min(1080px, 100%);
  padding: 0;
  overflow: hidden;
  min-height: auto;
  gap: 0;
}
.portal-scene-host {
  width: 100%;
  display: block;
  line-height: 0;
}

/* === Интерьерные комнаты Башни (tower-room.js) === */
.room-host { width: 100%; display: block; line-height: 0; }
.tower-room { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.tower-room .scroll-text {
  font: italic 500 15px/1.5 var(--font-serif);
  color: #3a2e1c; text-align: center; padding: 4px 10px;
}
.tower-room .scroll-text b { color: #1c2340; font-style: normal; }
.tower-room .hud-rune circle { transition: fill 0.4s ease; }
.tower-room .hud-rune.active circle { fill: #7c5cff; filter: drop-shadow(0 0 6px #a98fff); }
.tower-room .hud-rune.done circle { fill: #34c759; }
.tower-room .raven { transform-box: fill-box; transform-origin: 10px 5px; }
.tower-room .raven.caw { animation: ravenCaw 0.4s ease-out 2; }
.tower-room .caw-mark { animation: cawMarkOut 0.8s ease-out forwards; }
.tower-room .step-trigger { cursor: pointer; }
.tower-room .step-trigger.active { animation: stepTriggerPulse 1.8s ease-in-out infinite; }
.tower-room .cell-pulse { animation: targetReady 1s ease-in-out infinite; }
.tower-room .trace-label { animation: trailFadeIn 0.4s ease-out; }
/* tap-плитки размера (Распознавание) */
.tower-room .size-tile { cursor: pointer; }
.tower-room .size-tile .tile-bg { transition: fill 0.15s ease, stroke 0.15s ease; }
.tower-room .size-tile.correct .tile-bg { fill: #dff8e3; stroke: #34c759; stroke-width: 3; }
.tower-room .size-tile.wrong .tile-bg { fill: #ffe1e1; stroke: #ff6b6b; stroke-width: 3; }
/* НЕ анимируем саму группу-плитку transform'ом: у неё transform="translate(...)",
   CSS-анимация его перетирает и плитка улетает в (0,0) (DUSHA П32). Дрожание — только фон-обводка. */
/* Картотека: каретки и подсветка ячейки (Принцип 31) */
.tower-room .carriage { cursor: grab; }
.tower-room .carriage:active { cursor: grabbing; }
.tower-room .cf-cell { transition: fill 0.18s ease, stroke 0.18s ease; }
.tower-room .cf-cell.lit { fill: #ede9ff; stroke: #7c5cff; stroke-width: 2.5; }
.tower-room .cf-cell.found { fill: #dff8e3; stroke: #34c759; stroke-width: 3; }
/* Мастерская: барабаны пульта + пресеты */
.tower-room .drum-btn { cursor: pointer; }
.tower-room .preset-token { cursor: pointer; }
.tower-room .preset-token:active { opacity: 0.8; }
/* Два портала: кнопки порядка + печать ≠ */
.tower-room .order-btn { cursor: pointer; }
.tower-room .order-btn:active { opacity: 0.85; }
.tower-room .neq-stamp { animation: bouncy 0.7s cubic-bezier(0.2, 0.8, 0.2, 1.3); transform-box: fill-box; transform-origin: center; }
/* Финал: сундук */
.tower-room .chest-latch { cursor: pointer; }
.tower-room .chest-latch.active, .tower-room .chest-latch { animation: stepTriggerPulse 1.8s ease-in-out infinite; }
.tower-room .chest-glow { transition: opacity 0.6s ease; }
.tower-room .chest-glow-on { animation: crystalAura 2.4s ease-in-out infinite; }
.tower-room .finish-shard { animation: finishShard 1.1s cubic-bezier(0.2, 0.8, 0.3, 1) forwards; }
@keyframes finishShard {
  0% { transform: translate(0, 0) scale(0.5); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1) rotate(40deg); opacity: 0; }
}

/* === Сцена «Башня Архимага» — Monument Valley × Юный техник === */
.portal-scene {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  --sky-top: #fff6e3;
  --sky-bottom: #fce6c2;
  --body-glow: #fff7d8;
  transition: --sky-top 700ms ease, --sky-bottom 700ms ease;
}
/* Фон body тоже меняется по фазе — синхронизированный CSS-variable */
body { transition: background 700ms ease; }
body.phase-portal-1 { background: radial-gradient(1200px 600px at 30% 0%, #ffe9c2, transparent 60%), #f5ebd6; }
body.phase-portal-2 { background: radial-gradient(1200px 600px at 50% 10%, #cfe7ff, transparent 60%), #ece7d4; }
body.phase-portal-3 { background: radial-gradient(1400px 700px at 60% 20%, #e3d9ff, transparent 60%), #ebe6d3; }
body.phase-portal-4 { background: radial-gradient(1400px 700px at 70% 30%, #d8f3df, transparent 60%), #ece6cf; }
body.phase-portal-5 { background: radial-gradient(1400px 700px at 50% 40%, #ffd9b8, transparent 60%), #e6dcc1; }

/* === СКВОЗНОЕ ВОСХОЖДЕНИЕ ПО БАШНЕ: фон/небо меняются ОТ ШАГА К ШАГУ ===
   data-lstep ставит lesson-engine. Эти правила идут ПОСЛЕ phase-portal,
   поэтому задают сквозной backdrop, а --sky-top/--sky-bottom питают и стены
   комнаты (tower-room roomWall), и небо портала. Путь: рассвет → день → сумрак → закат. */
body[data-lstep] { transition: background 800ms ease; }
/* у каждого шага: фон страницы + небо сцены (--sky) + ТОН СТЕН (--wall) + НЕБО В ОКНЕ (--win).
   Путь снизу вверх: рассвет → утро → день → высь → сумрак портала → закат на вершине. */
body[data-lstep="0"] { --sky-top:#fde6cb; --sky-bottom:#f4d6ab; --wall-top:#efe3c8; --wall-bottom:#ddca9c; --win-top:#ffd9c2; --win-bottom:#f3b58f; background: radial-gradient(1200px 620px at 28% 2%, #ffe6bd, transparent 62%), #f3e2c4; }
body[data-lstep="1"] { --sky-top:#fdf1d6; --sky-bottom:#ece1bf; --wall-top:#f1e8cf; --wall-bottom:#e0d0a3; --win-top:#ffe9c2; --win-bottom:#bcd4ee; background: radial-gradient(1200px 640px at 40% 4%, #fff0cf, transparent 62%), #ece2c8; }
body[data-lstep="2"] { --sky-top:#eef4ef; --sky-bottom:#d6e6ee; --wall-top:#ece9d6; --wall-bottom:#d7cba6; --win-top:#cfe6ff; --win-bottom:#8fb6e6; background: radial-gradient(1300px 660px at 52% 8%, #d8ecff, transparent 62%), #e4ebe6; }
body[data-lstep="3"] { --sky-top:#e7eefb; --sky-bottom:#cfe0f2; --wall-top:#e8e6d6; --wall-bottom:#d2c8a6; --win-top:#bcd8ff; --win-bottom:#7aa0d8; background: radial-gradient(1300px 680px at 60% 12%, #d3e2fb, transparent 62%), #e2e8f0; }
body[data-lstep="4"] { --sky-top:#e9dffb; --sky-bottom:#c4c1ec; --wall-top:#e6dff0; --wall-bottom:#cdc2e0; --win-top:#d9c2ff; --win-bottom:#9a86c8; background: radial-gradient(1400px 700px at 66% 18%, #e0d6ff, transparent 62%), #e4def0; }
body[data-lstep="5"] { --sky-top:#ded4f2; --sky-bottom:#bcb7e2; --wall-top:#e3dcee; --wall-bottom:#c9bfdd; --win-top:#cbb6ee; --win-bottom:#8f7ec0; background: radial-gradient(1400px 700px at 58% 22%, #d6cbff, transparent 62%), #ddd6ea; }
body[data-lstep="6"] { --sky-top:#ffe1bd; --sky-bottom:#f7bb8c; --wall-top:#f3e2c2; --wall-bottom:#e6c79a; --win-top:#ffcf9a; --win-bottom:#f59e6a; background: radial-gradient(1500px 740px at 50% 34%, #ffd6a6, transparent 62%), #f0d6b6; }
body[data-lstep="7"] { --sky-top:#ffdcb0; --sky-bottom:#f6ad7e; --wall-top:#f4e0bb; --wall-bottom:#e9c393; --win-top:#ffc78c; --win-bottom:#ef8f5e; background: radial-gradient(1600px 760px at 50% 40%, #ffcf98, transparent 62%), #f1d0aa; }

/* === 5 фаз неба ВНУТРИ сцены через --sky-top/--sky-bottom === */
.portal-scene.phase-1 { --sky-top: #fff6e3; --sky-bottom: #fce6c2; }  /* рассвет */
.portal-scene.phase-2 { --sky-top: #f8efd5; --sky-bottom: #e0eaf8; }  /* утро */
.portal-scene.phase-3 { --sky-top: #e9dffb; --sky-bottom: #c2d6f0; }  /* процесс */
.portal-scene.phase-4 { --sky-top: #d8f3df; --sky-bottom: #efe5c6; }  /* катарсис */
.portal-scene.phase-5 { --sky-top: #ffd9b8; --sky-bottom: #fce6c2; }  /* закат */

/* === Свиток (вопрос внутри мира) === */
.portal-scene .scroll-text {
  font: italic 500 14px/1.5 var(--font-serif);
  color: #3a2e1c;
  text-align: center;
  padding: 4px 10px;
}
.portal-scene .scroll-text b { color: #1c2340; }
.portal-scene .scroll-text i { color: #7c5cff; font-style: italic; }

/* === Руны-прогресс на карнизе === */
.portal-scene .hud-rune circle {
  transition: fill 0.4s ease, transform 0.4s ease;
}
.portal-scene .hud-rune.active circle {
  fill: #7c5cff;
  filter: drop-shadow(0 0 6px #a98fff);
}
.portal-scene .hud-rune.done circle {
  fill: #34c759;
}

/* === Рогатка 2.5D (Angry-Birds-механика). ИНВАРИАНТ: на группах с SVG transform
   НЕ ставим CSS transform (перетрёт позицию) — только filter/opacity. === */
.portal-scene .crystal-aura {
  animation: crystalAura 2.8s ease-in-out infinite;
}
@keyframes crystalAura {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.6; }
}
.portal-scene .crystal-aura.snap-pulse { animation: snapAura 0.2s ease-out; }
@keyframes snapAura { 0% { opacity: 0.8; } 100% { opacity: 0.5; } }
.portal-scene .crystal-body.awake { animation: crystalAwake 1.6s ease-in-out infinite; }
@keyframes crystalAwake {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 0 #5cd6ff); }
  50%      { filter: brightness(1.12) drop-shadow(0 0 14px #5cd6ff); }
}
.portal-scene .crystal-body.charged { filter: brightness(1.12) drop-shadow(0 0 16px #5cd6ff); }
.portal-scene .crystal-glint { animation: sparkleTwinkle 2.4s ease-in-out infinite; }
@keyframes sparkleTwinkle { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.9; } }
.portal-scene .crystal-result { filter: drop-shadow(0 0 10px #ffb547); }
.portal-scene .sling-hit { cursor: grab; }
.portal-scene .sling-hit:active { cursor: grabbing; }
.portal-scene .sling-rubber path { transition: fill 0.15s ease; }
.portal-scene .sling-horns-front { transition: opacity 0.25s ease; }
.portal-scene .target-ring.ready circle { stroke: #34c759; }
.portal-scene .target-ring.ready { animation: targetReady 1s ease-in-out infinite; }
@keyframes targetReady { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .portal-scene .crystal-aura, .portal-scene .crystal-body.awake,
  .portal-scene .crystal-glint, .portal-scene .target-ring.ready { animation: none; }
}

/* === Руна-активатор на ступени (для перехода) === */
/* ВАЖНО: ни на каких SVG-группах НЕ переопределяем transform через CSS.
   SVG-атрибут transform="translate(...)" задаёт позицию — если применить
   CSS transform: scale(...), позиция слетит в (0,0). Используем только
   filter и opacity для hover-эффектов на группах со SVG-translate. */
.portal-scene .step-trigger {
  opacity: 0.4;
  transition: opacity 0.4s ease, filter 0.25s ease;
  cursor: default;
}
.portal-scene .step-trigger.active {
  opacity: 1;
  cursor: pointer;
  animation: stepTriggerPulse 1.8s ease-in-out infinite;
}
.portal-scene .step-trigger:not(.active) .step-trigger-cta { opacity: 0.3; }
@keyframes stepTriggerPulse {
  0%, 100% { filter: drop-shadow(0 0 4px #7c5cff); }
  50%      { filter: drop-shadow(0 0 16px #a98fff); }
}

/* === Портал-астролябия === */
.portal-scene .portal { transform-box: fill-box; }
.portal-scene .membrane-pattern {
  transform-box: fill-box; transform-origin: center;
  animation: membraneSpin 28s linear infinite;
}
@keyframes membraneSpin { to { transform: rotate(-360deg); } }
.portal-scene .drum {
  transition: transform 0.25s ease;
}
.portal-scene .drum.glow rect:first-of-type {
  fill: #ffe6a8;
  filter: drop-shadow(0 0 8px #ffb547);
}
.portal-scene .drum.glow .drum-num { fill: #d97a06; }
.portal-scene .drum-up, .portal-scene .drum-down { cursor: pointer; }

/* === Обелиск (мишень) === */
.portal-scene .obelisk { transform-box: fill-box; transform-origin: center; }
.portal-scene .obelisk.hit { animation: obeliskShake 0.7s cubic-bezier(.36,.07,.19,.97); }
@keyframes obeliskShake {
  10%, 90% { transform: translate(-2px, 0); }
  20%, 80% { transform: translate(3px, 0); }
  30%, 50%, 70% { transform: translate(-4px, 0); }
  40%, 60% { transform: translate(4px, 0); }
}

/* === Раскачивание башни при попадании === */
.portal-scene.tower-sway .tower {
  animation: towerSway 0.7s ease-in-out;
  transform-box: fill-box; transform-origin: bottom center;
}
@keyframes towerSway {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(0.6deg); }
  50%  { transform: rotate(-0.4deg); }
  75%  { transform: rotate(0.3deg); }
  100% { transform: rotate(0deg); }
}

/* === Пыль кольцами при попадании === */
.portal-scene .dust-ring {
  animation: dustRingOut 0.9s ease-out forwards;
  transform-box: fill-box; transform-origin: center;
}
@keyframes dustRingOut {
  0%   { transform: scale(1); opacity: 0.7; stroke-width: 2; }
  100% { transform: scale(7); opacity: 0; stroke-width: 0.5; }
}

/* === Ворона + восклицание === */
.portal-scene .raven { transform-box: fill-box; transform-origin: 10px 5px; }
.portal-scene .raven.caw { animation: ravenCaw 0.4s ease-out 2; }
@keyframes ravenCaw {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50%      { transform: rotate(-10deg) translateY(-2px); }
}
.portal-scene .caw-mark {
  animation: cawMarkOut 0.8s ease-out forwards;
}
@keyframes cawMarkOut {
  0%   { opacity: 0; transform: translateY(0); }
  30%  { opacity: 1; transform: translateY(-8px); }
  100% { opacity: 0; transform: translateY(-22px); }
}

/* === Зелёная волна успеха === */
.portal-scene .success-wave {
  animation: successWaveOut 1.1s ease-out forwards;
  transform-box: fill-box; transform-origin: center;
}
@keyframes successWaveOut {
  0%   { transform: scale(1); opacity: 0.85; }
  100% { transform: scale(40); opacity: 0; stroke-width: 1; }
}

/* === Светлячки в декоре === */
.portal-scene .firefly {
  animation: fireflyFloat 8s ease-in-out infinite;
  transform-box: fill-box; transform-origin: center;
}
@keyframes fireflyFloat {
  0%, 100% { opacity: 0.3; transform: translate(0, 0); }
  25%      { opacity: 0.9; transform: translate(8px, -10px); }
  50%      { opacity: 0.5; transform: translate(14px, 4px); }
  75%      { opacity: 0.9; transform: translate(4px, 6px); }
}

/* === След стрелы и призраки === */
.portal-scene .trail {
  animation: trailFadeIn 0.4s ease-out;
}
@keyframes trailFadeIn { from { opacity: 0; } to { opacity: 0.6; } }
.portal-scene .arrow-ghost { animation: ghostFade 0.7s ease-out forwards; }
@keyframes ghostFade {
  0%   { opacity: 0.5; }
  100% { opacity: 0; transform-origin: center; }
}
.portal-scene .flying-arrow.stuck {
  animation: arrowJiggle 0.5s cubic-bezier(.36,.07,.19,.97);
}
@keyframes arrowJiggle {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  25%      { transform: rotate(2deg) translateX(1px); }
  50%      { transform: rotate(-2deg) translateX(-1px); }
  75%      { transform: rotate(1deg) translateX(0.5px); }
}

/* === Плиты-ответы — без hover-выделения (DUSHA → Принцип 32) === */
.portal-scene .answer-plate { cursor: pointer; }
.portal-scene .answer-plate.correct {
  filter: drop-shadow(0 0 14px #34c759);
  animation: plateCorrectGlow 0.6s ease-out infinite alternate;
}
@keyframes plateCorrectGlow {
  0%   { filter: drop-shadow(0 0 8px #34c759); }
  100% { filter: drop-shadow(0 0 18px #34c759); }
}
.portal-scene .answer-plate.wrong .stone-plate-path {
  animation: plateWrongShake 0.5s cubic-bezier(.36,.07,.19,.97);
}
@keyframes plateWrongShake {
  10%, 90% { transform: translateX(-3px); }
  20%, 80% { transform: translateX(5px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

/* === Координатная дощечка: появляется с плавным увеличением (Принцип 28/29) === */
.portal-scene .coord-board {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: boardAppear 0.5s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes boardAppear {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: scale(1); }
}
/* Стрела-снаряд и древко плавно следуют за курсором */
.portal-scene .aim-arrow,
.portal-scene .aim-line { transition: none; }
.portal-scene .aim-hit { cursor: grab; }
.portal-scene .aim-hit:active { cursor: grabbing; }

/* === Рычаг (5/5) === */
.portal-scene .lever-handle { cursor: grab; transition: transform 0.18s ease; }
.portal-scene .lever-handle:active { cursor: grabbing; }

/* === Арка-выход (финал) — без transform-overwrite === */
.portal-scene .exit-arch-group {
  cursor: pointer;
  opacity: 0;
  animation: exitArchAppear 0.6s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes exitArchAppear {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Кристалл. SVG-атрибут transform=translate(100,195) на группе перезаписывается
   CSS-transform целиком, поэтому включаем translate в каждый keyframe. */
.portal-scene .crystal-group {
  animation: crystalPulse 2.8s ease-in-out infinite;
}
.portal-scene .crystal-group.charging {
  animation: crystalCharge 1.5s ease-in-out;
}
.portal-scene .crystal-glow {
  animation: crystalGlow 2.8s ease-in-out infinite;
}
@keyframes crystalPulse {
  0%, 100% { transform: translate(100px, 195px) scale(1); }
  50%      { transform: translate(100px, 195px) scale(1.05); }
}
@keyframes crystalCharge {
  0%   { transform: translate(100px, 195px) scale(1); }
  50%  { transform: translate(100px, 195px) scale(1.18); filter: brightness(1.3); }
  100% { transform: translate(100px, 195px) scale(1); }
}
@keyframes crystalGlow {
  0%, 100% { opacity: 0.18; }
  50%      { opacity: 0.38; }
}

/* Портал. ring-outer — круг, вращать бессмысленно (визуально неотличимо).
   .attention — мигаем толщиной + drop-shadow без transform. */
.portal-scene .ring-outer.attention {
  animation: ringAttention 0.8s ease-out 3;
}
@keyframes ringAttention {
  0%, 100% { stroke-width: 7; filter: none; }
  50%      { stroke-width: 11; filter: drop-shadow(0 0 12px #7c5cff); }
}

/* Узор мембраны (спицы) — вращаем вокруг центра группы через fill-box */
.portal-scene .membrane-pattern {
  transform-box: fill-box;
  transform-origin: center;
  animation: patternSpin 22s linear infinite;
}
@keyframes patternSpin { to { transform: rotate(-360deg); } }

/* Аура — пульсация opacity, без transform чтобы не съезжать */
.portal-scene .ring-aura {
  animation: auraBreath 4s ease-in-out infinite;
}
@keyframes auraBreath {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 0.45; }
}

/* Руны: тлеют, при .glow — вспышка жёлтым */
.portal-scene .rune {
  transition: transform 0.3s ease;
}
.portal-scene .rune .rune-bg {
  transition: stroke 0.3s ease, fill 0.3s ease;
}
.portal-scene .rune .rune-num {
  transition: fill 0.3s ease;
}
.portal-scene .rune.glow .rune-bg {
  stroke: #ffb547;
  fill: #fff8e6;
  filter: drop-shadow(0 0 10px rgba(255, 181, 71, 0.8));
}
.portal-scene .rune.glow .rune-num {
  fill: #d97a06;
}
.portal-scene .rune.glow {
  transform-box: fill-box;
  transform-origin: center;
}

/* Парящие искры. transform-box не нужен — анимируем translate, а не rotate */
.portal-scene .spark {
  animation: sparkFloat 4.5s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes sparkFloat {
  0%, 100% { opacity: 0.3; transform: translate(0, 0); }
  50%      { opacity: 0.95; transform: translate(0, -8px); }
}

/* Волна на мембране — анимируем атрибут r через SMIL невозможно из CSS,
   поэтому делаем через scale на circle с fill-box. */
.portal-scene .ripple {
  transform-box: fill-box;
  transform-origin: center;
  animation: rippleOut 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes rippleOut {
  0%   { transform: scale(1);   opacity: 0.85; }
  100% { transform: scale(9);   opacity: 0; }
}

/* Вспышка на мишени */
.portal-scene .target-flash {
  transform-box: fill-box;
  transform-origin: center;
  animation: targetFlash 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes targetFlash {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(7); opacity: 0; }
}

/* Кнопка мини-механики лука */
.bow-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 999px;
  font: 700 16px var(--font-heading);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  box-shadow: 0 8px 20px rgba(124, 92, 255, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}
.bow-control:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(124, 92, 255, 0.45); }
.bow-control.holding {
  background: var(--warn);
  transform: scale(1.03);
  box-shadow: 0 6px 18px rgba(255, 181, 71, 0.5);
}
.bow-hint {
  margin-top: 8px;
  font-size: 13px;
  color: var(--fg-dim);
  text-align: center;
}

/* === Финал === */
.finish {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 18px;
  padding: 24px;
}
.finish .emoji,
.finish .finish-icon {
  font-size: 96px;
  animation: bouncy 0.7s cubic-bezier(0.2, 0.8, 0.2, 1.3);
}
.finish .finish-icon svg {
  display: block;
  margin: 0 auto;
}
.celebrate-toast .emoji svg {
  display: block;
}
@keyframes bouncy {
  0% { transform: scale(0) rotate(-20deg); }
  60% { transform: scale(1.2) rotate(8deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.finish h1 { font-size: 38px; }

/* === Утилиты === */
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 14px; }
.center { text-align: center; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--fg-dim); }
.small { font-size: 14px; }

/* === KaTeX === */
.katex { font-size: 1.15em !important; color: var(--fg) !important; }
.katex .mord { color: var(--fg); }

/* === Микро-прогресс точки внутри шага (1/5, 2/5, ...) === */
.micro-progress {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 4px;
}
.micro-progress .pip {
  width: 24px; height: 6px;
  background: #d8ddee;
  border-radius: 999px;
  transition: all 0.25s ease;
}
.micro-progress .pip.done { background: var(--ok); }
.micro-progress .pip.active {
  background: var(--primary);
  width: 36px;
}

/* ============================================================
   ОБОЛОЧКА ПЛАТФОРМЫ (appbar + роутер экранов) — PLATFORM §4
   ============================================================ */
.appbar { display: flex; align-items: center; gap: 18px; padding: 12px 24px; z-index: 6; }
.appbar .brand-mark {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff; font: 700 18px var(--font-serif); box-shadow: var(--shadow-sm);
}
.appbar .brand-name { font-family: var(--font-heading); font-weight: 700; color: var(--fg); }
.appnav { display: flex; gap: 6px; }
.appnav-btn {
  font: 600 14px var(--font-heading); border: none; background: transparent;
  color: #7a6f57; padding: 8px 16px; border-radius: 999px; cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s;
}
.appnav-btn:hover { background: rgba(124, 92, 255, .09); color: var(--fg); }
.appnav-btn.active { background: #fff; color: var(--primary); box-shadow: var(--shadow-sm); }
.appbar-right { margin-left: auto; display: flex; align-items: center; }

.app-screen { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; overflow: hidden; }

/* Экран урока: сцена на весь экран, без хром-баров (иммерсия) */
.lesson-screen { flex: 1; display: flex; flex-direction: column; min-height: 0;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.lesson-screen.immersive { position: relative; }
/* Ничего в уроке не выделяется мышью — это игра, а не текстовая страница */
.lesson-screen * { user-select: none !important; -webkit-user-select: none !important; }
.lesson-screen .stage { flex: 1; }

/* В уроке прячем глобальный appbar — урок занимает весь экран, не выглядит «сайтом» */
body.in-lesson .appbar { display: none; }

/* Диегетический выход на карту — небольшая «деревянная табличка» в углу сцены */
.lesson-exit {
  position: absolute; top: 14px; left: 16px; z-index: 20;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 10px; cursor: pointer;
  background: #fdf6dc; color: #6b4e1f; border: 2px solid #b88f3c;
  font: 700 13px var(--font-serif, 'Lora', Georgia, serif); letter-spacing: .3px;
  box-shadow: 0 3px 0 rgba(124, 92, 42, .35); opacity: .9; transition: opacity .15s, transform .12s;
}
.lesson-exit:hover { opacity: 1; transform: translateY(-1px); }

/* Нижняя панель навигации урока — в стиле мира (пергамент/латунь), не «сайтовая» */
.lesson-foot { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 18px 14px; }
.lesson-pill {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 8px 16px; border-radius: 10px;
  background: #fdf6dc; color: #6b4e1f; border: 2px solid #b88f3c;
  font: 700 13px var(--font-serif, 'Lora', Georgia, serif); letter-spacing: .3px;
  box-shadow: 0 3px 0 rgba(124, 92, 42, .30); transition: opacity .15s, transform .12s, background .15s;
}
.lesson-pill:hover:not(:disabled) { transform: translateY(-1px); background: #fffaf0; }
.lesson-pill:disabled { opacity: .4; cursor: default; box-shadow: none; }

/* Подтверждение «Начать заново» — пергаментный модал по центру сцены */
.lesson-confirm { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center;
  background: rgba(40, 30, 12, .28); backdrop-filter: blur(1.5px); }
.lc-box { width: min(420px, 86%); background: #fdf6dc; border: 2.5px solid #b88f3c; border-radius: 16px;
  padding: 22px 24px 18px; box-shadow: 0 18px 50px rgba(40, 30, 12, .35); text-align: center; }
.lc-title { font: 800 19px var(--font-serif, 'Lora', Georgia, serif); color: #6b4e1f; margin-bottom: 8px; }
.lc-text { font: 500 14px/1.5 var(--font-body); color: #5a4a2a; margin: 0 0 18px; }
.lc-text b { color: #6b4e1f; }
.lc-actions { display: flex; gap: 10px; justify-content: center; }
.lc-yes { background: #7c5cff; color: #fff; border-color: #5b3fd6; box-shadow: 0 3px 0 rgba(60,40,160,.35); }
.lc-yes:hover { background: #8c6dff; }
.lesson-done {
  position: absolute; left: 50%; bottom: 88px; transform: translate(-50%, 20px); opacity: 0;
  transition: opacity .5s, transform .5s cubic-bezier(.2, .8, .3, 1.2);
  background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; border: none;
  padding: 14px 28px; border-radius: 999px; font: 700 16px var(--font-heading); cursor: pointer;
  box-shadow: 0 12px 30px rgba(124, 92, 255, .4); z-index: 20;
}
.lesson-done.show { opacity: 1; transform: translate(-50%, 0); }

/* Заглушка будущего урока */
.lesson-soon { flex: 1; display: grid; place-items: center; padding: 24px; overflow: auto; }
.soon-card { text-align: center; max-width: 480px; }
.soon-rune { font: 700 56px var(--font-serif); color: var(--primary); opacity: .5; line-height: 1; }
.soon-sub { color: #7a6f57; font-size: 15px; }

/* Контейнер экранов карты/кабинета/лавки заполняет область и скроллится сам */
.app-screen > .screen-fill { flex: 1; min-height: 0; overflow: auto; width: 100%; }

/* ============================================================
   DESIGN v2 — fullscreen «инженерная тетрадь», уход от ИИ-пастели.
   Клетка вместо пастельных радиалов, чернильные линии вместо мягких
   теней, флэт вместо градиентов. Семантические цвета ролей не трогаем.
   ============================================================ */
:root{
  --paper:#f5f5ee;        /* бумага в клетку */
  --ink:#1b2438;          /* чернила (структура) */
  --ink-dim:#5b6478;
  --line:#cfd2c6;         /* линия клетки/границы */
  --line-bold:#1b2438;
}
/* фуллскрин-фон в клетку (перебивает старые радиальные градиенты) */
body{
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(27,36,56,.055) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(27,36,56,.055) 31px 32px),
    var(--paper) !important;
}
/* топбар — плоский, с чернильной линией снизу, без парения */
.appbar{ background:#fff; border-bottom:2px solid var(--ink); padding:10px 22px; gap:22px; }
.appbar .brand-mark{ background:var(--ink); border-radius:6px; box-shadow:none; font:700 18px var(--font-mono); }
.appbar .brand-name{ font-weight:700; letter-spacing:-.3px; }
.appnav-btn{ border-radius:6px; color:var(--ink-dim); }
.appnav-btn:hover{ background:#eef0e8; color:var(--ink); }
.appnav-btn.active{ background:var(--ink); color:#fff; box-shadow:none; }
.xp-indicator{ border:2px solid var(--ink); box-shadow:none; border-radius:8px; background:#fff; color:var(--ink); }
.app-screen{ overflow:hidden; }