:root {
  --bg: #FFF0E6; --panel: #FFFFFF; --panel-2: #FFF7F0; --ink: #3A2A4D; --muted: #6E5E80; --line: #F0D9CC;
  --accent: #6B4BD8; --accent-ink: #FFFFFF; --accent-soft: #EFE6FF; --accent-deep: #4B32A6;
  --gold: #C9850A; --gold-star: #F5B82E; --mint: #1E9E7E; --danger: #D9482B; --coral: #FF9F6B;
  --sky1: #FFC9A8; --sky-mid: #F9BFC4; --sky2: #D9C2FF; --hud: rgba(255,255,255,.8);
  --sky-isle: rgba(196,128,170,.30); --sky-bank: #FFFFFF; --sky-bank-near: #FFF7FA; --sky-bank-op: .5; --sky-bank-near-op: .7; --sky-star: #FFF4E0; --stars: 0; --birds: .5; --sky-bird: #8A5A8C;
  --sun: radial-gradient(circle at 84% 16%, rgba(255,243,196,.95) 0, rgba(255,212,121,.55) 5%, rgba(255,212,121,0) 24%);
  --glow1: #FFD9C2; --glow2: #E6DBFF;
  --code: #2E2447; --code-bar: #3A2D5C; --code-line: #45376B; --code-ink: #F3E9FF; --code-dim: #75688F; --code-com: #8F82A8; --code-chip: #45376B;
  --shadow: 0 10px 24px rgba(107,75,216,.10), 0 2px 6px rgba(58,42,77,.06);
  --vm-grass: #CDEBB4; --vm-grass2: #B5DD97; --vm-river: #8DCFF5; --vm-rock: #B7AEC8; --vm-tree: #4CA86A; --vm-path: #C9A06E;
  --ui: "Rubik", "Segoe UI", system-ui, sans-serif;
  --display: "Unbounded", "Rubik", "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "Consolas", "Menlo", monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1B1530; --panel: #271F45; --panel-2: #2F2755; --ink: #FBEFE6; --muted: #BDB0D6; --line: #3A3162;
    --accent: #A996FF; --accent-ink: #1B1530; --accent-soft: #3A2F70; --accent-deep: #6B58C9;
    --gold: #FFC83D; --gold-star: #FFC83D; --mint: #3FD3B5; --danger: #FF7456; --coral: #FFA877;
    --sky1: #2A1B4F; --sky-mid: #4A2560; --sky2: #6A2F66; --hud: rgba(39,31,69,.82);
    --sky-isle: rgba(22,14,46,.42); --sky-bank: #9A70C2; --sky-bank-near: #A982CC; --sky-bank-op: .18; --sky-bank-near-op: .24; --sky-star: #FFF4E0; --stars: 1; --birds: 0; --sky-bird: #8A5A8C;
    --sun: radial-gradient(circle at 84% 16%, rgba(255,240,220,.9) 0, rgba(255,240,220,.28) 3%, rgba(255,240,220,0) 11%);
    --glow1: rgba(255,168,119,.12); --glow2: rgba(169,150,255,.14);
    --code: #150F29; --code-bar: #211A3F; --code-line: #3A3162; --code-ink: #F3E9FF; --code-dim: #6F638F; --code-com: #8F82A8; --code-chip: #3A3162;
    --shadow: 0 10px 24px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.2);
    --vm-grass: #24402F; --vm-grass2: #2B4D39; --vm-river: #2D5C85; --vm-rock: #4F4878; --vm-tree: #2F7A4C; --vm-path: #C9B68E;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1B1530; --panel: #271F45; --panel-2: #2F2755; --ink: #FBEFE6; --muted: #BDB0D6; --line: #3A3162;
  --accent: #A996FF; --accent-ink: #1B1530; --accent-soft: #3A2F70; --accent-deep: #6B58C9;
  --gold: #FFC83D; --gold-star: #FFC83D; --mint: #3FD3B5; --danger: #FF7456; --coral: #FFA877;
  --sky1: #2A1B4F; --sky-mid: #4A2560; --sky2: #6A2F66; --hud: rgba(39,31,69,.82);
  --sky-isle: rgba(22,14,46,.42); --sky-bank: #9A70C2; --sky-bank-near: #A982CC; --sky-bank-op: .18; --sky-bank-near-op: .24; --sky-star: #FFF4E0; --stars: 1; --birds: 0; --sky-bird: #8A5A8C;
  --sun: radial-gradient(circle at 84% 16%, rgba(255,240,220,.9) 0, rgba(255,240,220,.28) 3%, rgba(255,240,220,0) 11%);
  --glow1: rgba(255,168,119,.12); --glow2: rgba(169,150,255,.14);
  --code: #150F29; --code-bar: #211A3F; --code-line: #3A3162; --code-ink: #F3E9FF; --code-dim: #6F638F; --code-com: #8F82A8; --code-chip: #3A3162;
  --shadow: 0 10px 24px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.2);
  --vm-grass: #24402F; --vm-grass2: #2B4D39; --vm-river: #2D5C85; --vm-rock: #4F4878; --vm-tree: #2F7A4C; --vm-path: #C9B68E;
  color-scheme: dark;
}
:root { box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
*, *::before, *::after { box-sizing: inherit; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); height: 100%; }
body { margin: 0; height: 100%; background: radial-gradient(900px 500px at 88% -10%, var(--glow1), transparent 70%), radial-gradient(800px 600px at -5% 105%, var(--glow2), transparent 70%), var(--bg); background-attachment: fixed; color: var(--ink); font: 15px/1.5 var(--ui); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.app { display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); height: 100%; }
.app > *, .tabs { min-width: 0; }

/* Шапка */
.top { display: flex; align-items: center; gap: 20px; padding: 12px 18px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-right: auto; }
.brand h1 { margin: 0; font: 700 21px/1.1 var(--display); letter-spacing: -.01em; }
.brand p { margin: 0; color: var(--muted); font-size: 14px; }
.lesson-pick select { font: 500 14px var(--ui); color: var(--ink); background: var(--panel); border: 1.5px solid var(--line); border-radius: 999px; padding: 6px 12px; max-width: 100%; }
.lesson-pick select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Кнопка «Карта долины» вместо списка уроков */
.map-btn { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; border: 1.5px solid var(--line); background: var(--panel); color: var(--ink);
  border-radius: 999px; padding: 5px 14px 5px 6px; font-size: 14px; text-align: left; }
.map-btn:hover { border-color: var(--accent); }
.map-btn .mb-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); flex: none; }
.map-btn .mb-ico svg { width: 17px; height: 17px; }
.map-btn .mb-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-btn .mb-text span { color: var(--muted); }
.map-btn .mb-stars { color: var(--gold); font-weight: 600; white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab { transition: transform .12s, box-shadow .12s, border-color .12s; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--panel); }
.tab .num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--panel-2); font: 700 13px var(--display); }
.tab .nm { font-weight: 500; }
.tab:hover { transform: translateY(-1px); }
.tab.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 35%, transparent); }
.tab.active .num { background: var(--accent); color: var(--accent-ink); }
/* Разминка (задание из прошлого урока) и задание со звёздочкой */
.tab.warm { border-style: dashed; padding-right: 6px; gap: 4px; }
.tab.warm .num { background: color-mix(in srgb, var(--mint) 18%, var(--panel)); color: var(--mint); font-size: 15px; }
.tab.warm.active .num { background: var(--mint); color: #fff; }
.tab .tick { color: var(--mint); font-weight: 700; }
.tab.hwmark .num { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent); } /* задано на дом */
.tab.bonus { border-color: color-mix(in srgb, var(--gold-star) 70%, var(--line)); }
.tab.bonus .num { background: var(--gold-star); color: #5A3A00; font-size: 14px; }
.tab.bonus.active { background: color-mix(in srgb, var(--gold-star) 18%, var(--panel)); border-color: var(--gold-star); }
.res-stars i.warm { color: var(--mint); }
/* Задания в консоли Python: вкладки с ›_ и номером */
.tab.py { padding-right: 10px; gap: 4px; border-color: color-mix(in srgb, #FFD166 55%, var(--line)); }
.tab.py .num { background: var(--code); color: #FFD166; font: 700 12px var(--mono); }
.tab.py.active { background: color-mix(in srgb, #FFD166 16%, var(--panel)); border-color: #E0AE2C; }
.tab.py.active .num { background: #FFD166; color: var(--code); }
.tab.py .nm { font: 600 13px var(--mono); }
.res-stars i.py { color: var(--code); font: 700 34px var(--mono); background: #FFD166; border-radius: 14px; padding: 2px 10px; display: inline-block; }
.hw-check.py { font-family: var(--mono); font-size: 12.5px; }
/* Испытание Сбоя: вкладки испытаний и счёт в карточке результата */
.tab.exam { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.tab.exam .num { background: color-mix(in srgb, var(--danger) 14%, var(--panel)); color: var(--danger); }
.tab.exam.active { background: color-mix(in srgb, var(--danger) 10%, var(--panel)); border-color: var(--danger); }
.tab.exam.active .num { background: var(--danger); color: #fff; }
.res-stars i.exam { display: inline-block; padding: 4px 14px; border-radius: 14px; background: var(--danger); color: #fff; font: 700 30px var(--display); }
.bonus-btn { border-color: var(--gold-star); }
.stars i { font-style: normal; color: var(--line); font-size: 13px; letter-spacing: -1px; }
.stars i.on { color: var(--gold-star); }

/* Основная сетка */
main { display: grid; grid-template-columns: minmax(360px, 470px) 1fr; gap: 14px; padding: 0 14px 14px; min-height: 0; }
main > * { min-width: 0; }
.code-pane { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto; padding-right: 2px; }

.task { background: var(--panel); border-radius: 22px; padding: 18px 20px; box-shadow: var(--shadow); }
.task .num-line { color: var(--muted); font-size: 13px; margin: 0 0 2px; }
.task h2 { margin: 0 0 8px; font: 700 20px/1.2 var(--display); }
.task .goal { margin: 0 0 10px; max-width: 60ch; }
.task .new { margin: 0 0 12px; padding: 8px 12px; background: var(--panel-2); border-radius: 10px; font-size: 14px; }
.task .new b { font-weight: 600; color: var(--accent); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font: 600 13px var(--mono); padding: 5px 10px; border-radius: 8px; border: 1.5px dashed var(--line); background: transparent; color: var(--gold); }
.chip:hover { border-style: solid; border-color: var(--gold); }

/* Редактор */
.editor { background: var(--code); border-radius: 22px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--code-line); flex-shrink: 0; }
.ed-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: var(--code-bar); color: #B7A6D6; font-size: 13px; }
.ed-bar .file { font-family: var(--mono); }
.ed-tools { display: inline-flex; align-items: center; gap: 6px; }
#bigBtn { font-weight: 700; padding: 2px 8px; border: 1px solid var(--code-line); }
#bigBtn[aria-pressed="true"] { color: var(--code); background: #FFD166; border-color: #FFD166; }
.ed-bar button { background: none; border: 0; color: #B7A6D6; padding: 2px 4px; font-size: 13px; border-radius: 6px; }
.ed-bar button:hover { color: #fff; }
.ed-scroll { overflow: auto; height: clamp(200px, 30vh, 340px); }
.ed-inner { display: inline-flex; min-width: 100%; min-height: 100%; }
.gutter { padding: 12px 8px 12px 12px; text-align: right; color: var(--code-dim); font: 15px/24px var(--mono); user-select: none; min-width: 42px; }
.gutter span { display: block; }
.gutter span.on.run { color: #FFD166; }
.gutter span.on.err { color: #FF8A70; }
.ed-code { position: relative; display: grid; flex: 1; }
.ed-code pre, .ed-code textarea {
  grid-area: 1 / 1; margin: 0; padding: 12px 18px 12px 10px; border: 0;
  font: 15px/24px var(--mono); white-space: pre; tab-size: 4; letter-spacing: 0;
  background: transparent; color: var(--code-ink);
}
.ed-code pre { position: relative; z-index: 1; pointer-events: none; min-width: max-content; }
.ed-code textarea { z-index: 2; color: transparent; caret-color: #FFD166; resize: none; overflow: hidden; outline: none; width: 100%; height: 100%; }
.ed-code textarea::selection { background: rgba(140,123,255,.35); color: transparent; }
.editor:focus-within { box-shadow: inset 0 0 0 2px #8C7BFF; }
.band { position: absolute; left: 0; right: 0; height: 24px; z-index: 0; transition: top .08s linear; }
.band.run { background: rgba(255,209,102,.16); box-shadow: inset 3px 0 0 #FFD166; }
.band.err { background: rgba(255,116,86,.2); box-shadow: inset 3px 0 0 #FF7456; }
/* Панель «Переменные» под редактором */
.vars { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 14px; background: var(--code-bar); color: #C9CDF2; font: 13px/1.4 var(--mono); flex-shrink: 0; }
.vars[hidden] { display: none; }
.vars-cap { font: 600 12px var(--ui); color: #B7A6D6; margin-right: 2px; }
.vars-none { color: #6B7099; font-family: var(--ui); font-size: 12px; }
.vars-sep { flex: 1; min-width: 8px; }
.var { padding: 2px 8px; border-radius: 7px; background: var(--code-chip); white-space: nowrap; }
.var b { color: #FFD166; font-weight: 600; }
.var.loc b { color: #8FD3FF; }
.var.bit { background: transparent; box-shadow: inset 0 0 0 1px #3A4078; }
.var.bit b { color: #7FE0C8; }
.var.changed { animation: varFlash .9s ease; }
@keyframes varFlash { 0% { background: #FFD166; color: #3A2A4D; } 100% { background: var(--code-chip); } }
@media (prefers-reduced-motion: reduce) { .var.changed { animation: none; box-shadow: inset 0 0 0 1px #FFD166; } }
.t-kw { color: #FF8FB1; font-weight: 600; }
.t-hero { color: #FFD166; }
.t-fn { color: #8FD3FF; }
.t-num { color: #7FE0C8; }
.t-str { color: #B8F28B; }
.t-com { color: var(--code-com); font-style: italic; }
body.is-running .ed-code textarea { cursor: default; }

/* Управление */
.controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn { border: 0; border-radius: 14px; padding: 10px 16px; font-weight: 600; transition: transform .09s, box-shadow .09s, filter .15s; }
.btn.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 86%, #fff), var(--accent)); color: var(--accent-ink); padding: 10px 22px; font-size: 16px;
  box-shadow: 0 4px 0 var(--accent-deep), 0 10px 18px color-mix(in srgb, var(--accent) 28%, transparent); }
.btn.primary:not(:disabled):active { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-deep); }
.btn.primary:not(:disabled):hover { filter: brightness(1.08); }
.btn.secondary { background: var(--panel); border: 1.5px solid var(--line); }
.btn.secondary:not(:disabled):active { transform: translateY(1px); }
.btn.ghost { background: transparent; border: 1.5px solid transparent; color: var(--muted); }
.speed { display: flex; align-items: center; gap: 8px; margin-left: auto; color: var(--muted); font-size: 13px; }
.speed input { width: 90px; accent-color: var(--accent); }
.speed output { min-width: 34px; font-variant-numeric: tabular-nums; }

/* Консоль */
.out { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 10px 12px; min-height: 90px; max-height: 210px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.msg { padding: 6px 10px; border-radius: 10px; }
.msg.info { color: var(--muted); padding-left: 0; }
.msg.map { color: var(--muted); font-weight: 600; font-size: 13px; padding: 2px 0 0; }
.msg.ok { background: color-mix(in srgb, var(--mint) 14%, transparent); color: var(--ink); }
.msg.err { background: color-mix(in srgb, var(--danger) 13%, transparent); border-left: 3px solid var(--danger); }
.msg.tip { background: color-mix(in srgb, var(--gold-star) 18%, transparent); }
.msg.print { font-family: var(--mono); font-size: 13px; background: var(--panel-2); }
.msg .ln { margin-right: 8px; border: 0; background: var(--danger); color: #fff; border-radius: 6px; padding: 1px 7px; font-size: 12px; font-weight: 600; }

/* Подсказки */
.hints { display: flex; flex-direction: column; gap: 8px; }
.hints-row { display: flex; gap: 8px; flex-wrap: wrap; }
.hint { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; }
.hint .cap { display: block; font-weight: 600; font-size: 13px; color: var(--accent); margin-bottom: 4px; }
.hint.sol .cap { color: var(--gold); }
.hint pre { margin: 0; font: 13px/1.6 var(--mono); white-space: pre-wrap; }

/* Мир */
.world { position: relative; min-height: 0; border-radius: 28px; overflow: hidden; box-shadow: var(--shadow);
  background: var(--sun), linear-gradient(180deg, var(--sky1), var(--sky-mid) 45%, var(--sky2)); }
#stage { position: absolute; inset: 0; z-index: 1; }
/* Небо за 3D (paintSky в app.js): звёзды ночью, дальние островки, облачные гряды внизу, птицы днём. Под сценой Сбоя (::before) */
.world { isolation: isolate; }
.world::before { z-index: 1; }
.sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sky svg { display: block; width: 100%; height: 100%; }
.sky-stars { fill: var(--sky-star); opacity: var(--stars); transition: opacity .6s; }
.sky-stars .tw { animation: twinkle 3.6s ease-in-out infinite; }
.sky-isles { fill: var(--sky-isle); }
.sky-banks { fill: var(--sky-bank); opacity: var(--sky-bank-op); }
.sky-banks.near { fill: var(--sky-bank-near); opacity: var(--sky-bank-near-op); }
.sky-birds { fill: none; stroke: var(--sky-bird); stroke-width: 2.2; stroke-linecap: round; opacity: var(--birds); }
.sky .bob { animation: skyBob 9s ease-in-out infinite; }
.sky .bob.b2 { animation-duration: 11s; animation-delay: -4s; }
.sky .bob.b3 { animation-duration: 7s; animation-delay: -2s; }
.sky .drift { animation: skyDrift 40s ease-in-out infinite alternate; }
.sky .drift.d2 { animation-duration: 52s; animation-direction: alternate-reverse; }
.sky .drift.d3 { animation-duration: 34s; }
.sky .fly { animation: skyFly 46s linear infinite; animation-delay: -12s; }
@keyframes twinkle { 50% { opacity: .25; } }
@keyframes skyBob { 50% { transform: translateY(-10px); } }
@keyframes skyDrift { to { transform: translateX(60px); } }
@keyframes skyFly { from { transform: translate(-80px, 170px); } to { transform: translate(1300px, 110px); } }
.world.py .sky { display: none; }
body.lite .sky * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .sky * { animation: none !important; } }
#stage canvas { display: block; touch-action: pan-y; cursor: grab; }
#stage canvas:active { cursor: grabbing; }
.hud { position: absolute; display: flex; gap: 8px; align-items: center; z-index: 3; }
.hud.tl { top: 14px; left: 14px; }
.hud.tr { top: 14px; right: 14px; }
.hud.bl { bottom: 14px; left: 14px; }
/* «Угадай»: подсказка над картой, кнопка в режиме выбора, курсор-прицел */
.hud.tc { top: 64px; left: 14px; right: 14px; justify-content: center; pointer-events: none; }
.hud.tc > * { pointer-events: auto; }
.guess-box { font-weight: 600; font-size: 14px; gap: 10px; box-shadow: 0 6px 20px rgba(18,20,43,.18); }
.guess-btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
#stage.picking.over-opt { cursor: pointer; }
.guess-opts { display: flex; gap: 6px; }
.guess-opt { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; padding: 0; background: var(--opt, #6a55ea); color: #fff;
  font: 700 16px var(--display); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(18,20,43,.25); transition: transform .12s; }
.guess-opt:hover { transform: scale(1.12); }
.hud-box { background: var(--hud); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 14px; padding: 6px 10px; display: flex; align-items: center; gap: 8px; }
.hud-btn { background: var(--hud); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 0; border-radius: 12px; padding: 8px 12px; font-size: 14px; font-weight: 500; }
.icon-btn { display: grid; place-items: center; padding: 6px; width: 36px; height: 36px; color: var(--ink); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn[aria-pressed="false"] { color: var(--muted); }
.map-label { font-weight: 600; font-size: 14px; }
.dots { display: flex; gap: 6px; }
.dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); background: var(--panel); font: 700 12px var(--display); display: grid; place-items: center; padding: 0; color: var(--muted); }
.dot.cur { border-color: var(--accent); color: var(--ink); }
.dot.active { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.dot.ok { background: var(--mint); border-color: var(--mint); color: #fff; }
.dot.fail { background: var(--danger); border-color: var(--danger); color: #fff; }
.coins { font-weight: 600; }
@media (max-width: 560px) { .coins .c-word { display: none; } } /* на телефоне просто «2 из 3» */
.coins::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--gold-star); margin-right: 8px; vertical-align: -1px; box-shadow: inset 0 0 0 2px rgba(0,0,0,.12); }

.bubble { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .15s;
  background: #fff; color: #3A2A4D; font: 600 14px/1.2 var(--ui); padding: 7px 12px; border-radius: 14px; white-space: nowrap; box-shadow: 0 6px 18px rgba(20,20,60,.18); border: 2px solid #fff; }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -8px; margin-left: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: inherit; }
.bubble.show { opacity: 1; }
.bubble.yes { border-color: #3FD3B5; }
.bubble.no { border-color: #B9BEDD; }
.bubble.bad { background: #FF6B4A; border-color: #FF6B4A; color: #fff; }

.result { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 20px; background: rgba(18,20,43,.28); }
.result[hidden] { display: none; }
.res-card { background: var(--panel); border-radius: 22px; padding: 22px 26px; width: min(380px, 100%); box-shadow: 0 20px 50px rgba(18,20,43,.3); }
.res-stars { font-size: 40px; line-height: 1; margin-bottom: 8px; }
.res-stars i { font-style: normal; color: var(--line); }
.res-stars i.on { color: var(--gold-star); display: inline-block; animation: starPop .6s cubic-bezier(.3,1.5,.5,1) both; text-shadow: 0 0 18px color-mix(in srgb, var(--gold-star) 55%, transparent); }
.res-stars i.on:nth-child(2) { animation-delay: .14s; }
.res-stars i.on:nth-child(3) { animation-delay: .28s; }
@keyframes starPop { 0% { transform: scale(0) rotate(-40deg); opacity: 0; } 60% { transform: scale(1.35) rotate(8deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .res-stars i.on { animation: none; } }
.res-card h3 { margin: 0 0 10px; font: 700 18px/1.25 var(--display); }
.res-card ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.res-card li { color: var(--muted); padding-left: 24px; position: relative; }
.res-card li::before { content: "–"; position: absolute; left: 6px; }
.res-card li.on { color: var(--ink); }
.res-card li.on::before { content: "✓"; color: var(--mint); font-weight: 700; left: 4px; }
.res-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.res-level { margin: -2px 0 12px; padding: 8px 12px; border-radius: 12px; background: var(--accent-soft); font-weight: 600; font-size: 14px; }

/* Герой: уровень в шапке (открывает страницу героя) и снаряжение */
.hero-badge { position: relative; display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 999px; padding: 4px 12px 4px 4px; font-size: 14px; }
.hero-badge.new::after { content: ""; position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--panel); } /* новое достижение */
.hero-badge:hover { border-color: var(--accent); }
.hb-lvl { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 700 13px var(--display); }
.hb-text { white-space: nowrap; }
.hb-text span { color: var(--muted); }
.hb-bar { width: 56px; height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.hb-bar i { display: block; height: 100%; width: 0; background: var(--gold-star); border-radius: 3px; transition: width .4s; }
.gear-close { border: 0; background: transparent; color: var(--muted); font-size: 24px; line-height: 1; padding: 0 4px; }
.gear-sub { margin: 6px 0 12px; color: var(--muted); font-size: 14px; }
.gear-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.gear-item { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px;
  border: 1.5px solid var(--line); background: var(--panel); color: var(--ink); font-size: 14px; text-align: left; }
.gear-item[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 22%, transparent); }
.gear-item:disabled { color: var(--muted); border-style: dashed; }
.gear-head { grid-column: 1 / -1; margin: 8px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.gear-head:first-child { margin-top: 0; }
.gi-state { font-size: 12px; color: var(--muted); white-space: nowrap; }
.gear-item[aria-pressed="true"] .gi-state { color: var(--accent); font-weight: 600; }

/* Сюжет: реплика персонажа поверх мира */
.talk { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 7; display: flex; justify-content: center; }
.talk-card { display: flex; gap: 14px; align-items: flex-start; width: min(620px, 100%); background: var(--panel); border-radius: 20px; padding: 16px 18px; box-shadow: 0 20px 50px rgba(18,20,43,.3); }
.talk-face { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: #fff; font: 700 22px var(--display); }
.talk-name { margin: 0 0 4px; color: var(--muted); font-size: 14px; font-weight: 600; }
.talk-text { margin: 0 0 12px; font-size: 17px; line-height: 1.45; }
.talk-actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 900px) {
  html, body { height: auto; }
  .app { height: auto; }
  main { grid-template-columns: 1fr; }
  .world { order: -1; height: 52vh; min-height: 300px; }
  .code-pane { overflow: visible; }
  .ed-code pre, .ed-code textarea, .gutter { font-size: 16px; }
  .top { padding: 10px 14px; }
  .speed { margin-left: 0; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 2px; }
  .tab { flex-shrink: 0; }
  .hud.tr { top: auto; bottom: 14px; right: 14px; }
  .hud.tl { left: 10px; top: 10px; }
  .hud.bl { left: 10px; bottom: 14px; }
  .hud.tr { max-width: calc(100% - 110px); flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; } /* не наезжать на монеты */
  .hud-btn { padding: 6px 10px; font-size: 13px; }
  .hud-box { padding: 5px 8px; }
  .guess-box { font-size: 13px; }
  .guess-opt { width: 30px; height: 30px; font-size: 14px; border-width: 2px; }
}
/* узкий мир рядом с кодом (планшет боком): кнопки справа не наезжают на номера карт */
@media (min-width: 901px) and (max-width: 1100px) {
  .map-label { display: none; }
  .hud-btn { padding: 6px 10px; font-size: 13px; }
  .hud.tr { max-width: calc(100% - 150px); flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
}
/* Заставка */
.splash { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px;
  padding-top: calc(24px + env(safe-area-inset-top, 0px)); padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  background: var(--sun), linear-gradient(180deg, var(--sky1), var(--sky-mid) 45%, var(--sky2)); transition: opacity .35s, visibility .35s; }
.splash.hide { opacity: 0; visibility: hidden; }
.splash-inner { text-align: center; max-width: 560px; }
.splash-kicker { font: 600 13px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.splash h2 { margin: 0 0 12px; font: 700 clamp(34px, 8vw, 64px)/1.02 var(--display); letter-spacing: -.02em; }
.splash p.lead { margin: 0 auto 34px; color: var(--muted); font-size: 17px; max-width: 40ch; }
.splash-btn { font: 600 18px var(--mono); background: var(--code); color: var(--code-ink); border: 0; border-radius: 14px; padding: 14px 22px; box-shadow: 0 12px 30px rgba(23,26,54,.25); }
.splash-btn .p { color: #FFD166; margin-right: 10px; }
.splash-btn .cur { display: inline-block; width: .6em; height: 1.1em; vertical-align: -3px; margin-left: 4px; background: #FFD166; animation: blink 1s steps(1) infinite; }
.splash-btn .touch { display: none; }
/* узкий телефон: реплики компактнее, чтобы мир и сцена оставались видны */
@media (max-width: 560px) {
  .talk { left: 8px; right: 8px; bottom: 8px; }
  .talk-card { gap: 10px; padding: 12px 14px; border-radius: 16px; }
  .talk-face { width: 36px; height: 36px; font-size: 16px; }
  .talk-name { font-size: 13px; margin-bottom: 2px; }
  .talk-text { font-size: 15px; line-height: 1.4; margin-bottom: 8px; }
  .talk-actions { flex-wrap: nowrap; }
  .talk-actions .btn { padding: 7px 14px; font-size: 14px; }
}
/* узкий телефон: вопрос сверху, варианты под ним */
@media (max-width: 480px) {
  .guess-box { flex-wrap: wrap; justify-content: center; row-gap: 6px; }
  .guess-box > span:first-child { flex-basis: 100%; text-align: center; }
}
@media (hover: none) { .splash-btn .desk { display: none; } .splash-btn .touch { display: inline; } }
@keyframes blink { 50% { opacity: 0; } }
/* Сцена конца пролога: небо темнеет (storm), мир на миг «сбоит» (glitch) */
.world::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .9s ease;
  background: radial-gradient(120% 90% at 70% 8%, #6a1f6e 0%, #2a1c52 52%, #120f2a 100%); }
.world.storm::before { opacity: .94; }
.world::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: repeating-linear-gradient(0deg, rgba(255,43,214,.18) 0 2px, transparent 2px 6px); }
.world.glitch::after { animation: scan .7s steps(3) 1; }
.world.glitch #stage canvas { animation: glitch .7s steps(1) 1; }
@keyframes scan { 0% { opacity: .9; transform: translateY(0); } 50% { opacity: .55; transform: translateY(-3px); } 100% { opacity: 0; } }
@keyframes glitch {
  0% { transform: none; filter: none; }
  15% { transform: translate(-8px, 2px) skewX(-4deg); filter: hue-rotate(70deg) saturate(1.8); }
  30% { transform: translate(6px, -3px); filter: hue-rotate(-60deg) contrast(1.4); }
  45% { transform: translate(-3px, 0) skewX(3deg); filter: invert(.15) hue-rotate(140deg); }
  60% { transform: translate(4px, 2px); filter: saturate(2.2); }
  75% { transform: translate(-2px, -1px); filter: hue-rotate(40deg); }
  100% { transform: none; filter: none; }
}
/* Реплики Великого Сбоя «сбоят»: тёмная карточка, цветной сдвиг текста, дрожащий значок */
.talk.sboy .talk-card { background: #14132B; color: #F3EAFF; box-shadow: 0 0 0 1.5px #FF2BD6, 0 20px 50px rgba(0,0,0,.5); }
.talk.sboy .talk-name { color: #FF8FE6; }
.talk.sboy .talk-text { text-shadow: 1.5px 0 rgba(255,43,214,.65), -1.5px 0 rgba(43,240,255,.65); }
.talk.sboy .talk-face { box-shadow: 0 0 0 3px #FF2BD6, 0 0 18px #FF2BD6; animation: jitter .25s steps(2) infinite; }
.talk.sboy .btn.ghost { color: #C9B8FF; }
@keyframes jitter { 50% { transform: translate(1px, -1px) rotate(-4deg); } }

/* Режим показа (?show): только мир и код, крупно — для записи ролика на Авито */
.reel-cap, .reel-toast { display: none; }
body.show-mode .top, body.show-mode .task, body.show-mode .controls, body.show-mode .out, body.show-mode .hints,
body.show-mode .ed-bar button, body.show-mode .hud.tl, body.show-mode .hud.tr, body.show-mode #guessHud { display: none !important; }
body.show-mode .app { grid-template-rows: 1fr; height: 100vh; }
body.show-mode main { padding-top: 14px; grid-template-columns: minmax(380px, 38%) 1fr; }
body.show-mode .code-pane { overflow: hidden; }
body.show-mode .editor { flex: 1; display: flex; flex-direction: column; min-height: 0; }
body.show-mode .ed-scroll { flex: 1; height: auto; }
body.show-mode .ed-code pre, body.show-mode .ed-code textarea, body.show-mode .gutter { font-size: 20px; line-height: 32px; }
body.show-mode .band { height: 32px; }
body.show-mode .reel-cap { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 16px 20px; }
.reel-cap.in { animation: capIn .5s cubic-bezier(.2,.9,.3,1.1); }
.reel-lesson { display: inline-block; margin: 0 0 8px; padding: 4px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent);
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.reel-cap h2 { margin: 0 0 4px; font: 700 26px/1.15 var(--display); }
.reel-what { margin: 0; font-size: 17px; color: var(--muted); }
body.show-mode .reel-toast:not([hidden]) { display: block; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); z-index: 4; white-space: nowrap;
  padding: 10px 20px; border-radius: 14px; background: var(--hud); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font: 700 18px var(--ui); box-shadow: 0 8px 24px rgba(18,20,43,.18); }
.reel-toast.in { animation: toastIn .45s ease; }
.reel-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; background: #FFD166; vertical-align: -.18em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes capIn { from { transform: translateY(-10px); opacity: 0; } }
@keyframes toastIn { from { transform: translate(-50%, -10px); opacity: 0; } }
.reel { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; color: #fff; transition: opacity .6s ease;
  background: radial-gradient(120% 80% at 50% 0%, #4b2fa8 0%, #241a58 45%, #110d2c 100%); }
.reel[hidden] { display: none; }
.reel.out { opacity: 0; }
.reel-card { text-align: center; max-width: 920px; animation: rise .6s cubic-bezier(.2,.9,.3,1.1); }
.reel-hero { position: relative; width: clamp(160px, 22vmin, 240px); aspect-ratio: 1; margin: 0 auto 12px; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(140,123,255,.5) 0 40%, rgba(140,123,255,0) 70%); }
.reel-kicker { margin: 0; font-weight: 700; font-size: clamp(14px, 1.8vw, 18px); letter-spacing: .14em; text-transform: uppercase; color: #FFD166; }
.reel-name { margin: 10px 0 16px; font: 700 clamp(42px, 8vw, 96px)/1 var(--display); letter-spacing: -.01em;
  background: linear-gradient(90deg, #fff, #c9b8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.reel-lead { margin: 0 auto; max-width: 32ch; font-size: clamp(18px, 2.5vw, 28px); line-height: 1.35; color: #DCD7FF; }
.reel-lead:empty { display: none; }
.reel-lines { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 8px; font-size: clamp(17px, 2.2vw, 24px); color: #DCD7FF; }
.reel-cta { display: inline-block; margin: 26px 0 0; padding: 14px 26px; border-radius: 999px; background: #FFD166; color: #3A2A4D;
  font-weight: 700; font-size: clamp(17px, 2.2vw, 24px); box-shadow: 0 10px 30px rgba(255,209,102,.3); }
.reel-hint { position: absolute; left: 0; right: 0; bottom: 22px; margin: 0; text-align: center; font-size: 14px; color: rgba(255,255,255,.5); }
/* вертикальное видео (окно уже, чем выше): мир сверху, код снизу */
@media (max-aspect-ratio: 4/5) {
  body.show-mode main { grid-template-columns: 1fr; grid-template-rows: 60% 1fr; }
  body.show-mode .world { order: -1; height: auto; min-height: 0; }
  body.show-mode .ed-code pre, body.show-mode .ed-code textarea, body.show-mode .gutter { font-size: 22px; line-height: 34px; }
  body.show-mode .band { height: 34px; }
  body.show-mode .reel-cap { padding: 12px 16px; }
  body.show-mode .reel-cap h2 { font-size: 22px; }
}

/* Карта долины: края по урокам на тропе; «Бит здесь», пройденные края с галочкой, дальние — в тумане */
.valley { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; padding: 20px 16px; overflow-y: auto;
  background: rgba(46,36,71,.52); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade .25s ease; }
.valley[hidden] { display: none; }
.valley-card { position: relative; flex: none; margin: auto 0; width: min(1080px, 100%); background: var(--panel); border-radius: 32px; padding: 22px 24px 24px;
  box-shadow: 0 30px 80px rgba(18,20,43,.45); animation: rise .4s cubic-bezier(.2,.9,.3,1.15); }
.valley-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.valley-head h2 { margin: 0; font: 700 26px/1.15 var(--display); }
.valley-head p { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.valley-map { position: relative; aspect-ratio: 1000 / 625; border-radius: 24px; overflow: hidden;
  background: var(--sun), linear-gradient(180deg, color-mix(in srgb, var(--sky1) 75%, transparent), transparent 58%), var(--vm-grass); }
.valley-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vnode { position: absolute; transform: translate(-50%, -30px); display: flex; flex-direction: column; align-items: center; gap: 2px; width: 150px;
  padding: 0; border: 0; background: none; color: var(--ink); text-align: center; cursor: pointer; }
.vn-icon { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--panel); color: var(--accent);
  border: 2px solid var(--line); box-shadow: 0 6px 0 color-mix(in srgb, var(--line) 70%, #8a6a5a), 0 12px 18px rgba(58,42,77,.18); transition: transform .15s; }
.vn-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vnode:hover .vn-icon, .vnode:focus-visible .vn-icon { transform: scale(1.08); }
.vnode:focus-visible { outline: none; }
.vnode:focus-visible .vn-icon { box-shadow: 0 0 0 4px var(--accent), 0 8px 18px rgba(58,42,77,.25); }
.vn-name { margin-top: 6px; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--panel) 88%, transparent); font-weight: 700; font-size: 14px; line-height: 1.25; }
.vn-sub { font-size: 12px; color: var(--muted); background: color-mix(in srgb, var(--panel) 75%, transparent); padding: 0 8px; border-radius: 999px; }
.vn-stars { font-size: 12px; font-weight: 600; color: var(--gold); background: color-mix(in srgb, var(--panel) 75%, transparent); padding: 0 8px; border-radius: 999px; }
.vn-done { position: absolute; right: -4px; top: -4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--mint); color: #fff; font-size: 13px; font-weight: 700; }
.vnode.done .vn-icon { color: #fff; border-color: transparent; background: linear-gradient(180deg, color-mix(in srgb, var(--mint) 70%, #fff), var(--mint)); box-shadow: 0 6px 0 color-mix(in srgb, var(--mint) 60%, #000), 0 12px 18px color-mix(in srgb, var(--mint) 30%, transparent); }
.vnode.done .vn-done { background: #fff; color: var(--mint); }
.vnode.current .vn-icon { color: var(--accent-ink); border-color: transparent; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 86%, #fff), var(--accent)); box-shadow: 0 6px 0 var(--accent-deep), 0 0 0 9px color-mix(in srgb, var(--accent) 28%, transparent), 0 12px 18px rgba(58,42,77,.25); animation: here 1.8s ease-in-out infinite; }
.vn-here { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 3px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 700; }
.vn-here::after { content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: var(--accent); }
.vnode.fog .vn-icon { color: var(--muted); filter: grayscale(1); opacity: .75; }
.vnode.fog .vn-name, .vnode.fog .vn-sub { opacity: .7; }
.vnode.fog .vn-icon::before { content: ""; position: absolute; inset: -16px -26px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sky2) 80%, #fff), transparent); pointer-events: none; z-index: -1; }
@keyframes here { 50% { box-shadow: 0 6px 0 var(--accent-deep), 0 0 0 15px color-mix(in srgb, var(--accent) 10%, transparent), 0 12px 18px rgba(58,42,77,.25); } }
/* узкий экран: карта превращается в вертикальную тропу */
@media (max-width: 700px) {
  .valley { padding: 10px; }
  .valley-card { padding: 18px 14px; border-radius: 22px; }
  .valley-map { aspect-ratio: auto; padding: 20px 8px 8px; display: flex; flex-direction: column; gap: 22px; background: linear-gradient(180deg, var(--vm-grass), var(--vm-grass2)); }
  .valley-map::before { content: ""; position: absolute; left: 50%; top: 40px; bottom: 40px; border-left: 3px dashed var(--vm-path); opacity: .6; }
  .valley-art { display: none; }
  .vnode { position: relative; left: auto !important; top: auto !important; transform: none; width: auto; flex-direction: row; gap: 10px; align-self: flex-start; margin-left: 4%; text-align: left; }
  .vnode:nth-child(odd) { align-self: flex-end; margin-right: 4%; flex-direction: row-reverse; text-align: right; }
  .vn-icon { width: 52px; height: 52px; flex: none; }
  .vn-label { display: flex; flex-direction: column; gap: 2px; }
  .vnode:nth-child(odd) .vn-label { align-items: flex-end; }
  .vnode .vn-label { align-items: flex-start; }
  .vn-name { margin-top: 0; }
  .vn-here { top: -24px; }
}
@media (min-width: 701px) { .vn-label { display: contents; } }

.valley-tools { display: flex; align-items: center; gap: 8px; flex: none; }
/* Свой уровень: редактор карты */
.lvl-card { width: min(880px, 100%); }
.lvl-bar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.lvl-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.lvl-tool { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 5px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--panel); color: var(--ink); font-size: 14px; }
.lvl-tool[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.lvl-tool .sw { width: 24px; height: 24px; border-radius: 7px; }
.lvl-size { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.lvl-size span + button { margin-left: 2px; }
.lvl-size span:not(:first-child) { margin-left: 10px; }
.lvl-size button { width: 30px; height: 30px; border-radius: 9px; border: 1.5px solid var(--line); background: var(--panel); color: var(--ink); font-size: 16px; line-height: 1; }
.lvl-size output { min-width: 22px; text-align: center; font-weight: 700; color: var(--ink); }
.lvl-grid { --cs: min(46px, calc((100vw - 110px) / var(--w))); display: grid; grid-template-columns: repeat(var(--w), var(--cs)); gap: 3px; justify-content: center;
  padding: 14px; border-radius: 18px; background: #3A3F5E; touch-action: none; user-select: none; -webkit-user-select: none; }
.sw, .lc { position: relative; display: grid; place-items: center; border: 0; padding: 0; }
.lc { width: var(--cs); height: var(--cs); border-radius: 7px; cursor: crosshair; }
.lc:focus-visible { outline: 3px solid #FFD166; outline-offset: 1px; z-index: 1; }
.t-wall { background: #585D80; }
.t-floor, .t-coin, .t-start, .t-flag { background: #86D06F; }
.t-lava { background: #FF7A2E; box-shadow: inset 0 0 0 3px #E8551A; }
.t-coin::after { content: ""; width: 46%; height: 46%; border-radius: 50%; background: #F5B82E; box-shadow: inset 0 0 0 2px #C98A0B; }
.t-start { color: #4B36D0; font: 700 calc(var(--cs, 24px) * .55)/1 var(--ui); }
.t-flag svg { width: 62%; height: 62%; }
.lvl-name { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 14px; color: var(--muted); }
.lvl-name input { flex: 1; max-width: 360px; font: 500 15px var(--ui); color: var(--ink); background: var(--panel-2); border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.lvl-status { margin: 10px 0 0; min-height: 1.5em; font-size: 14px; }
.lvl-status.ok { color: var(--mint); }
.lvl-status.bad { color: var(--danger); }
.lvl-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.lvl-url { display: block; width: 100%; margin-top: 12px; font: 13px var(--mono); padding: 9px 12px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--panel-2); color: var(--ink); }
.lvl-url[hidden] { display: none; }
.tab.custom .num { background: color-mix(in srgb, var(--accent) 18%, var(--panel)); color: var(--accent); }
@media (max-width: 700px) {
  .valley-tools .btn { padding: 7px 10px; font-size: 13px; }
  .lvl-grid { --cs: min(40px, calc((100vw - 64px) / var(--w))); padding: 8px; gap: 2px; }
}

/* Домашка: полоска над заданием у ученика и окно «Задать домашку» у репетитора */
.hw { background: var(--panel); border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 16px; padding: 10px 12px; flex-shrink: 0; }
.hw[hidden] { display: none; }
.hw.done { border-color: var(--mint); background: color-mix(in srgb, var(--mint) 10%, var(--panel)); }
.hw-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; }
.hw-head b { font-weight: 700; }
.hw-head span { color: var(--muted); }
.hw.done .hw-head b { color: var(--mint); }
.hw-x { margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 20px; line-height: 1; padding: 0 4px; }
.hw-list { display: flex; flex-wrap: wrap; gap: 6px; }
.hw-item { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--panel); color: var(--ink); font-size: 13px; }
.hw-item i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--panel-2); font: 700 11px var(--display); font-style: normal; color: var(--muted); }
.hw-item.ok i { background: var(--mint); color: #fff; }
.hw-item.cur { border-color: var(--accent); background: var(--accent-soft); }
.hw-card { width: min(760px, 100%); }
.hw-lessons { display: grid; gap: 10px; max-height: min(46vh, 420px); overflow-y: auto; padding-right: 4px; }
.hw-lesson { border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.hw-lesson-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-weight: 700; font-size: 14px; }
.hw-lesson-head .hw-quick { margin-left: auto; display: flex; gap: 6px; }
.hw-quick button { border: 1.5px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; }
.hw-quick button:hover { color: var(--accent); border-color: var(--accent); }
.hw-tasks { display: flex; flex-wrap: wrap; gap: 6px; }
.hw-check { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1.5px solid var(--line); font-size: 13px; cursor: pointer; }
.hw-check:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.hw-check input { accent-color: var(--accent); margin: 0; }
.hw-sum { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.hw-field { display: grid; gap: 4px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.hw-field input, .hw-field textarea { width: 100%; font: 13px/1.45 var(--mono); padding: 8px 10px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--panel-2); color: var(--ink); resize: none; }

/* Итог пролога: карточка для ученика и родителя, её удобно показать или сфотографировать экран */
body.recap-open { overflow: hidden; }
.recap { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; padding: 20px 16px; overflow-y: auto;
  background: rgba(46,36,71,.52); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade .25s ease; }
.recap[hidden] { display: none; }
.recap-card { position: relative; flex: none; margin: auto 0; /* по центру, а если не влезает — с начала, с прокруткой */
  width: min(820px, 100%); background: var(--panel); color: var(--ink); border-radius: 28px; padding: 28px 30px 22px;
  box-shadow: 0 30px 80px rgba(18,20,43,.45); overflow: hidden; animation: rise .4s cubic-bezier(.2,.9,.3,1.15); }
.recap-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: linear-gradient(90deg, var(--accent), var(--coral), var(--gold-star), var(--mint)); }
.recap-top { display: flex; gap: 24px; align-items: center; justify-content: space-between; }
.recap-kicker { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.recap-head h2 { margin: 0; font: 700 clamp(26px, 4.2vw, 38px)/1.1 var(--display); letter-spacing: -.01em; }
.recap-lead { margin: 6px 0 0; font-size: 15px; color: var(--muted); max-width: 44ch; }
.recap-gear { display: inline-block; margin: 10px 0 0; padding: 5px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 13px; }
.recap-gear:empty { display: none; }
.recap-hero { position: relative; flex: none; width: 148px; height: 148px; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, var(--accent-soft) 0 58%, var(--panel-2) 72%); }
.recap-canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.recap-lvl { position: absolute; right: 2px; bottom: 6px; z-index: 1; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font: 700 17px var(--display); box-shadow: 0 0 0 4px var(--panel); }
.recap-stats { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.recap-stats li { background: var(--panel-2); border-radius: 16px; padding: 10px 14px; display: flex; flex-direction: column; gap: 3px; }
.recap-stats b { font: 700 26px/1.05 var(--display); }
.recap-stats b small { font-size: 14px; color: var(--muted); }
.recap-stats span { font-size: 13px; line-height: 1.3; color: var(--muted); }
.recap h3 { margin: 16px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.recap-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 0 26px; }
.recap-tasks { list-style: none; margin: 0; padding: 0; counter-reset: task; }
.recap-tasks li { counter-increment: task; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--line); font-size: 15px; }
.recap-tasks li > span:first-child::before { content: counter(task); display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 10px;
  border-radius: 50%; background: var(--mint); color: #fff; font: 700 11px var(--display); vertical-align: 1px; }
.recap-tasks .stars i { font-size: 16px; }
.recap-cmds { display: flex; flex-wrap: wrap; gap: 5px; }
.recap-cmds code { font: 600 12.5px var(--mono); padding: 4px 8px; border-radius: 8px; background: var(--panel-2); color: var(--gold); }
.recap-code { margin: 0; padding: 12px 16px; border-radius: 16px; background: var(--code); color: #E8EAFF; font: 14px/1.65 var(--mono);
  overflow-x: auto; box-shadow: inset 0 0 0 1px var(--code-line); }
.recap-next p { margin: 0; font-size: 15px; max-width: 70ch; }
.recap-path { list-style: none; margin: 14px 0 0; padding: 0; display: flex; position: relative; }
.recap-path::before { content: ""; position: absolute; left: 6%; right: 6%; top: 15px; height: 3px;
  background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 13px); }
.recap-path li { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.recap-path i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--panel); border: 2px solid var(--line);
  color: var(--muted); font: 700 13px var(--display); font-style: normal; }
.recap-path li.done i { background: var(--mint); border-color: var(--mint); color: #fff; }
.recap-path li.end i { background: var(--gold-star); border-color: var(--gold-star); color: #5A3A00; box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold-star) 25%, transparent); }
.recap-path svg { width: 18px; height: 18px; }
.recap-path span { font-size: 12px; line-height: 1.2; color: var(--muted); text-align: center; overflow-wrap: anywhere; }
.recap-path li.done span, .recap-path li.end span { color: var(--ink); font-weight: 600; }
.recap-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
@keyframes rise { from { transform: translateY(24px) scale(.97); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
@media (max-width: 720px) {
  .recap { place-items: start center; padding: 12px; }
  .recap-card { padding: 24px 18px 18px; border-radius: 22px; }
  .recap-top { gap: 14px; align-items: flex-start; }
  .recap-hero { width: 104px; height: 104px; }
  .recap-lvl { width: 34px; height: 34px; font-size: 14px; bottom: 2px; }
  .recap-lead { font-size: 15px; }
  .recap-stats { grid-template-columns: 1fr 1fr; }
  .recap-stats b { font-size: 24px; }
  .recap-grid { grid-template-columns: 1fr; }
  .recap-path span { font-size: 10px; }
}
@media (max-width: 480px) {
  .recap-path li:not(:first-child):not(:last-child) span { display: none; }
  .recap-path li:first-child span, .recap-path li:last-child span { position: absolute; top: 38px; white-space: nowrap; }
  .recap-path li:first-child span { left: 0; } .recap-path li:last-child span { right: 0; }
  .recap-path { padding-bottom: 20px; }
  .recap-actions .btn { flex: 1 1 auto; }
}

/* Страница героя: остров с Битом, звание, темы курса, достижения. По ссылке — только смотреть */
.hp { position: fixed; inset: 0; z-index: 42; display: flex; flex-direction: column; align-items: center; padding: 20px 16px; overflow-y: auto;
  background: rgba(46,36,71,.52); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade .25s ease; }
.hp.over { z-index: 60; } /* по ссылке — поверх заставки */
.hp[hidden] { display: none; }
.hp-card { position: relative; flex: none; margin: auto 0; width: min(1000px, 100%); background: var(--panel); color: var(--ink); border-radius: 32px;
  padding: 24px 26px 22px; box-shadow: 0 30px 80px rgba(46,36,71,.45); overflow: hidden; animation: rise .4s cubic-bezier(.2,.9,.3,1.15); }
.hp-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: linear-gradient(90deg, var(--accent), #FF6B8B, var(--gold-star), var(--mint)); }
.hp-close { position: absolute; top: 16px; right: 16px; z-index: 2; }
.hp-top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.hp-stage { position: relative; min-height: 360px; border-radius: 26px; overflow: hidden; touch-action: pan-y; cursor: grab;
  background: radial-gradient(120% 80% at 50% 100%, color-mix(in srgb, var(--sky2) 90%, #fff) 0 30%, transparent 70%), var(--sun), linear-gradient(180deg, var(--sky1), var(--sky-mid) 45%, var(--sky2)); }
.hp-stage:active { cursor: grabbing; }
.hp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hp-lvl { position: absolute; left: 14px; top: 14px; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font: 700 19px var(--display); box-shadow: 0 0 0 4px color-mix(in srgb, var(--panel) 70%, transparent); pointer-events: none; }
.hp-place { position: absolute; left: 14px; bottom: 14px; z-index: 1; padding: 6px 12px; border-radius: 999px; background: var(--hud);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-weight: 600; font-size: 13px; pointer-events: none; }
.hp-head { min-width: 0; display: flex; flex-direction: column; }
.hp-kicker { margin: 4px 36px 6px 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hp-head h2 { margin: 0; font: 700 clamp(26px, 3.6vw, 36px)/1.1 var(--display); letter-spacing: -.01em; }
.hp-rank { margin: 6px 0 0; font-size: 18px; }
.hp-rank b { color: var(--accent); }
.hp-title { color: var(--gold); font-weight: 600; }
.hp-name { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.hp-level { margin-top: 14px; padding: 12px 14px; border-radius: 18px; background: var(--panel-2); }
.hp-level-line { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; font-size: 14px; }
.hp-level-line span:last-child { color: var(--gold); }
.hp-bar { height: 10px; border-radius: 999px; background: var(--line); margin: 8px 0; overflow: hidden; }
.hp-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--coral), var(--accent)); }
.hp-next { margin: 0; font-size: 13px; color: var(--muted); }
.hp-stats { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hp-stats li { background: var(--panel-2); border-radius: 14px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hp-stats b { font: 700 22px/1.1 var(--display); }
.hp-stats b small { font-size: 13px; color: var(--muted); }
.hp-stats span { font-size: 12px; line-height: 1.25; color: var(--muted); }
.hp-shared-note { margin: 16px 0 0; padding: 10px 14px; border-radius: 14px; background: var(--accent-soft); font-size: 14px; }
.hp-sec h3 { margin: 20px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.hp-count { color: var(--accent); margin-left: 4px; }
.hp-tip { margin: -2px 0 10px; font-size: 13px; color: var(--muted); }
.hp-topics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.hp-topic { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "ico main" "ico prog"; gap: 4px 10px; align-items: center;
  padding: 8px 12px 8px 8px; border-radius: 14px; border: 1.5px solid var(--line); }
.hp-t-ico { grid-area: ico; position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--panel-2); color: var(--muted); }
.hp-t-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hp-t-ico i { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%; background: var(--mint); color: #fff;
  font: 700 11px/18px var(--ui); font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--panel); }
.hp-topic.done .hp-t-ico { background: color-mix(in srgb, var(--mint) 16%, var(--panel)); color: var(--mint); }
.hp-topic.now { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.hp-topic.now .hp-t-ico { background: var(--accent-soft); color: var(--accent); }
.hp-t-main { grid-area: main; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.hp-t-main b { font-weight: 700; }
.hp-t-main span { font-size: 12px; color: var(--muted); }
.hp-t-prog { grid-area: prog; display: flex; align-items: center; gap: 8px; min-width: 0; }
.hp-t-prog code { flex: none; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 12px var(--mono); color: var(--gold); background: var(--panel-2); padding: 1px 6px; border-radius: 6px; }
.hp-t-bar { flex: 1; min-width: 30px; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.hp-t-bar i { display: block; height: 100%; border-radius: inherit; background: var(--mint); }
.hp-topic.now .hp-t-bar i { background: var(--accent); }
.hp-t-num { font-size: 12px; color: var(--muted); white-space: nowrap; }
.hp-ach { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.hp-ach li { min-width: 0; }
.hp-a { width: 100%; height: 100%; display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 14px; border: 1.5px solid var(--line);
  background: var(--panel); color: var(--ink); text-align: left; }
button.hp-a:hover { border-color: var(--accent); }
.hp-a.title { border-color: var(--gold-star); background: color-mix(in srgb, var(--gold-star) 12%, var(--panel)); }
.hp-medal { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; box-shadow: inset 0 -3px 0 rgba(0,0,0,.16); }
.hp-medal svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hp-a:not(.done) .hp-medal { background: var(--panel-2); color: var(--muted); box-shadow: inset 0 0 0 2px var(--line); }
.hp-a.done .hue-violet { background: linear-gradient(145deg, #A496FF, #6B4BD8); }
.hp-a.done .hue-mint { background: linear-gradient(145deg, #5BE3C6, #11917A); }
.hp-a.done .hue-gold { background: linear-gradient(145deg, #FFD76A, #D9960F); }
.hp-a.done .hue-coral { background: linear-gradient(145deg, #FFA27A, #E4572E); }
.hp-a.done .hue-sky { background: linear-gradient(145deg, #8FD0FF, #3C83E0); }
.hp-a.done .hue-pink { background: linear-gradient(145deg, #FF9ACF, #D63A8C); }
.hp-a-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; line-height: 1.3; }
.hp-a-text > span { font-size: 12px; color: var(--muted); }
.hp-a:not(.done) .hp-a-text b { color: var(--muted); }
.hp-a-prog { display: block; height: 5px; margin-top: 5px; border-radius: 999px; background: var(--line); overflow: hidden; }
.hp-a-prog i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.hp-a-text .hp-a-state { font-weight: 600; }
.hp-a.done .hp-a-state { color: var(--mint); }
.hp-a.title .hp-a-state { color: var(--gold); }
.hp-gear { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-bottom: 0; }
/* Вкладки справа от острова; лавка и снаряжение прокручиваются внутри, чтобы остров оставался рядом */
.hp-tabs { display: flex; gap: 4px; margin: 14px 0 10px; padding: 4px; border-radius: 14px; background: var(--panel-2); }
.hp-tabs [role="tab"] { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 0; border-radius: 10px; padding: 7px 8px;
  background: transparent; color: var(--muted); font-weight: 600; font-size: 14px; white-space: nowrap; }
.hp-tabs [role="tab"][aria-selected="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: 0 3px 0 var(--accent-deep); }
.hp-gem-n { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; color: #1C7FB5; }
:root[data-theme="dark"] .hp-gem-n { color: #7FE0FF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hp-gem-n { color: #7FE0FF; } }
.gem { width: 1.05em; height: 1.05em; flex: none; vertical-align: -.15em; }
.hp-panel[hidden] { display: none; }
.hp-scroll { max-height: 292px; overflow-y: auto; padding-right: 4px; overscroll-behavior: contain; }
.hp-panel .hp-tip { margin: 0 0 10px; }
.hp-panel .hp-level { margin-top: 0; }
.hp-gems { position: absolute; right: 14px; top: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: var(--hud); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font: 700 16px var(--display); pointer-events: none; }
.hp-gems .gem { width: 20px; height: 20px; }
.hp-try { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 6px 6px 6px 12px;
  border-radius: 16px; background: var(--panel); box-shadow: 0 10px 30px rgba(18,20,43,.25); }
.hp-try[hidden] { display: none; }
.hp-try-text { display: flex; flex-direction: column; min-width: 0; font-size: 13px; line-height: 1.25; }
.hp-try-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-try-text span { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); font-weight: 600; }
.hp-try .btn { padding: 8px 14px; font-size: 14px; }
.hp-try .gear-close { font-size: 20px; }
.hp-stage:has(.hp-try:not([hidden])) .hp-place { display: none; } /* примерка вместо подписи края */
.hp-shop { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.hp-shop li { min-width: 0; }
.hp-si { width: 100%; height: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--panel); color: var(--ink); text-align: left; }
.hp-si:hover { border-color: var(--accent); }
.hp-si.try { border-color: var(--accent); background: var(--accent-soft); }
.hp-si.on { border-color: var(--mint); background: color-mix(in srgb, var(--mint) 12%, var(--panel)); }
.si-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--panel-2); color: var(--accent); }
.si-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.si-sw { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.si-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.si-text b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-text span { font-size: 11px; color: var(--muted); }
.si-state { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; color: #1C7FB5; }
.hp-si.dear .si-state { color: var(--muted); }
.hp-si.own .si-state { color: var(--mint); font-weight: 600; font-size: 12px; }
.hp-shop-msg { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--mint); }
.hp-shop-msg:empty { display: none; }
.hp-share { padding: 4px 16px 16px; margin-top: 16px; border-radius: 18px; background: var(--panel-2); }
.hp-share h3 { margin-top: 14px; }
.hp-share .hw-field input, .hp-share .hw-field textarea { background: var(--panel); }
.hp-share .hw-field input#hpNameInput { font: 15px var(--ui); }
@media (max-width: 760px) {
  .hp { padding: 12px; }
  .hp-card { padding: 52px 16px 18px; border-radius: 22px; } /* крестик — над островом, не на кристаллах */
  .hp-close { top: 12px; right: 12px; }
  .hp-top { grid-template-columns: 1fr; gap: 16px; }
  .hp-stage { min-height: 280px; }
  .hp-topics { grid-template-columns: 1fr; }
  .hp-scroll { max-height: none; overflow: visible; padding-right: 0; }
}
@media (max-width: 440px) {
  .hp-stats { grid-template-columns: 1fr 1fr; }
  .hp-ach { grid-template-columns: 1fr; }
  .hp-shop { grid-template-columns: minmax(0, 1fr); }
  .hp-tabs [role="tab"] { font-size: 13px; padding: 7px 4px; }
  .hp-actions .btn { flex: 1 1 auto; }
}

/* Мост к Python: консоль вместо мира, карточка «у Бита → в Python», пример ввода и вывода в задании */
.world.py #stage, .world.py .hud, .world.py .bubble { display: none; }
.pyw { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; gap: 12px; padding: 16px; overflow-y: auto; }
.pyw[hidden] { display: none; }
.bridge { flex: none; background: var(--panel); border-radius: 18px; padding: 14px 16px; box-shadow: 0 8px 24px rgba(18,20,43,.08); }
.bridge h3 { margin: 0 0 4px; font: 700 16px/1.3 var(--display); }
.bridge > p { margin: 0 0 10px; font-size: 14px; color: var(--muted); max-width: 75ch; }
.br-cols { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: stretch; }
.br-col { display: flex; flex-direction: column; min-width: 0; }
.br-cap { display: block; margin-bottom: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.br-code { flex: 1; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--code); color: #E8EAFF; font: 13px/1.6 var(--mono); overflow-x: auto; white-space: pre; }
.br-arrow { align-self: center; font-size: 22px; font-weight: 700; color: var(--accent); }
.tutor { margin-top: 10px; font-size: 14px; }
.tutor summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.tutor ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.pyc { flex: 1 0 220px; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #0F1229;
  box-shadow: 0 12px 30px rgba(18,20,43,.25), inset 0 0 0 1px var(--code-line); }
.pyc-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--code-bar); color: #B7A6D6; font: 600 13px var(--mono); }
.pyc-dots { display: inline-flex; gap: 5px; }
.pyc-dots i { width: 10px; height: 10px; border-radius: 50%; background: #FF6B6B; }
.pyc-dots i:nth-child(2) { background: #FFD166; }
.pyc-dots i:nth-child(3) { background: #3FD3B5; }
.pyc-out { flex: 1; min-height: 160px; margin: 0; padding: 12px 16px; color: #E8EAFF; font: 15px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; overflow-y: auto; }
.pyc-hello, .pyc-end { color: #6E75A8; }
.pyc-typed { color: #FFD166; }
.pyc-err { color: #FF8A70; }
.pyc-in { font: inherit; color: #FFD166; background: rgba(255,255,255,.07); border: 0; border-bottom: 2px solid #FFD166; border-radius: 4px 4px 0 0;
  outline: none; padding: 0 6px; width: 18ch; max-width: 100%; }
.pyc-in::placeholder { color: #6E75A8; }
.py-sample { margin-top: 12px; }
.py-sample .cap { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ps-io { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.ps-io > div { flex: 1 1 120px; min-width: 0; }
.ps-io b { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.ps-io pre { margin: 2px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); font: 13px/1.5 var(--mono); max-height: 10em; overflow: auto; }
.ps-more { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
@media (max-width: 900px) { /* на телефоне и планшете консоль — обычным потоком, без прокрутки внутри мира */
  .world.py { height: auto; }
  .world.py .pyw { position: static; overflow: visible; }
}
@media (max-width: 560px) {
  .br-cols { grid-template-columns: minmax(0, 1fr); }
  .br-arrow { transform: rotate(90deg); justify-self: center; line-height: 1; }
  .pyw { padding: 10px; }
}
/* Крупный шрифт (кнопка A+): для демонстрации экрана на занятии */
body.big .ed-code pre, body.big .ed-code textarea, body.big .gutter { font-size: 19px; line-height: 30px; }
body.big .task h2 { font-size: 24px; }
body.big .task .goal { font-size: 18px; }
body.big .task .new, body.big .msg, body.big .vars, body.big .hint pre, body.big .ps-io pre { font-size: 16px; }
body.big .chip { font-size: 15px; }
body.big .pyc-out { font-size: 19px; }
body.big .br-code { font-size: 15px; }

/* Испытание Сбоя: полоска над заданием, окно старта и карточка итога для родителя */
.trial-bar { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; flex-shrink: 0; padding: 10px 12px; border-radius: 16px;
  background: #1F1A33; color: #F2EEFF; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--danger) 60%, transparent); }
.trial-bar[hidden] { display: none; }
.tb-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--danger); color: #fff; flex: none; }
.tb-ico svg, .tc-badge svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tb-text { display: flex; flex-direction: column; line-height: 1.25; flex: 1 1 auto; white-space: nowrap; }
.tb-text b { font: 700 15px var(--display); }
.tb-note { font-size: 12px; color: #FFB8A6; }
.tb-btns { display: flex; gap: 6px; margin-left: auto; flex: none; }
.trial-bar .btn { padding: 7px 12px; font-size: 14px; }
.trial-bar .btn.secondary { background: transparent; color: #F2EEFF; border-color: #4A4270; }
.trial-bar .btn.ghost { color: #C9C2EE; }
.recap.over { z-index: 60; } /* по ссылке — поверх заставки */
.trial-card { width: min(760px, 100%); }
.trial-card::before { background: linear-gradient(90deg, var(--danger), #FF6BB3, var(--accent)); }
.tr-close { position: absolute; top: 16px; right: 16px; z-index: 2; }
.tc-head { display: flex; gap: 16px; align-items: flex-start; padding-right: 30px; }
.tc-badge { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: #1F1A33; color: #FF8A70;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 20%, transparent); }
.tc-badge svg { width: 28px; height: 28px; }
.tc-topics, .tr-topics { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tc-topics li, .tr-topics li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: var(--panel-2); }
.tc-topics i, .tr-topics i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--panel);
  border: 2px solid var(--line); color: var(--muted); font: 700 12px var(--display); font-style: normal; }
.tc-t, .tt-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.tc-t b, .tt-t b { font-weight: 600; }
.tc-t span, .tt-t span { font-size: 12.5px; color: var(--muted); }
.tc-s, .tt-s { flex: none; font-size: 13px; font-weight: 600; color: var(--muted); text-align: right; }
.tc-topics li.ready .tc-s { color: var(--mint); }
.tc-topics li.done i, .tr-topics li.ok i { background: var(--mint); border-color: var(--mint); color: #fff; }
.tr-topics li.first i { background: var(--gold-star); border-color: var(--gold-star); color: #5A3A00; }
.tc-topics li.done .tc-s, .tr-topics li.ok .tt-s { color: var(--mint); }
.tr-topics li.first .tt-s { color: var(--gold); }
.tr-topics li.miss .tt-s { color: var(--danger); }
.tc-topics li.ahead, .tr-topics li.ahead { background: transparent; border: 1.5px dashed var(--line); }
.tc-topics li.tc-note { background: none; padding: 4px 2px 0; font-size: 13px; color: var(--muted); }
.tc-warn { margin: 14px 0 0; padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--gold-star) 18%, transparent); font-size: 14px; }
.tc-tutor { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
/* столбики попыток: высота — сколько из 6, подпись — дата */
.tr-hist { display: flex; align-items: flex-end; gap: 10px; min-height: 92px; padding: 6px 2px 0; overflow-x: auto; }
.th-col { flex: 0 0 auto; width: 48px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.th-n { font: 700 14px var(--display); color: var(--muted); }
.th-bar { position: relative; width: 26px; height: 64px; border-radius: 8px; background: var(--panel-2); overflow: hidden; }
.th-bar i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 8px; background: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.th-d { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.th-col.cur .th-n { color: var(--ink); }
.th-col.cur .th-bar i { background: linear-gradient(180deg, var(--gold-star), var(--danger)); }
.tr-hist.big .th-col { width: 58px; }
.tr-hist.big .th-bar { width: 32px; height: 84px; }
.tr-top { display: flex; align-items: center; gap: 20px; padding-right: 30px; }
.tr-ring { flex: none; width: 128px; height: 128px; }
.tr-ring svg { width: 100%; height: 100%; display: block; }
.tr-ring .rs { fill: none; stroke-width: 13; stroke-linecap: round; }
.tr-ring .rs.first { stroke: var(--gold-star); }
.tr-ring .rs.ok { stroke: var(--mint); }
.tr-ring .rs.miss { stroke: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.tr-ring .rs.ahead { stroke: var(--line); opacity: .6; }
.tr-ring text { font: 700 34px var(--display); fill: var(--ink); }
.tr-ring tspan { font-size: 17px; fill: var(--muted); }
.tr-head h2 { margin: 0; font: 700 clamp(30px, 5vw, 42px)/1.05 var(--display); }
.tr-name { margin: 6px 0 0; color: var(--muted); }
.tr-sum { margin: 12px 0 0; font-size: 15px; }
.tr-delta { margin: 8px 0 0; font-size: 15px; font-weight: 600; }
.trial-open { border-color: color-mix(in srgb, var(--danger) 55%, var(--line)); color: var(--danger); }
.hp-trial-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hp-trial-actions[hidden] { display: none; }
@media (max-width: 560px) {
  .tr-top { flex-direction: column; align-items: flex-start; gap: 10px; }
  .tr-ring { width: 104px; height: 104px; }
  .tc-head { flex-direction: column; gap: 10px; }
  .tc-topics li, .tr-topics li { flex-wrap: wrap; row-gap: 2px; }
  .tc-s, .tt-s { flex-basis: 100%; padding-left: 38px; text-align: left; font-size: 12px; }
  .tc-topics li.tc-note { flex-wrap: nowrap; }
}

/* Грамота: окно с предпросмотром листа, имя и подпись, печать и картинка */
.cert-card { width: min(980px, 100%); }
.cert-card::before { background: linear-gradient(90deg, #E0532F, #FF6BB3, var(--accent)); }
.cert-head { padding-right: 30px; }
.cert-head h2 { margin: 0; font: 700 clamp(26px, 4.2vw, 36px)/1.1 var(--display); }
.cert-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cert-kind { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 14px; border-radius: 14px; text-align: left;
  border: 1.5px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; cursor: pointer; }
.cert-kind b { font-size: 14px; }
.cert-kind span { font-size: 12px; color: var(--muted); }
.cert-kind.active { border-color: var(--accent); background: var(--accent-soft); }
.cert-kind:disabled { cursor: default; border-style: dashed; opacity: .65; }
.cert-paper { margin-top: 14px; border-radius: 12px; overflow: hidden; background: #FFFDF8; box-shadow: 0 10px 30px rgba(18,20,43,.18), 0 0 0 1px var(--line); }
.cert-paper canvas { display: block; width: 100%; height: auto; }
.cert-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.cert-fields input { font-family: var(--ui); font-size: 15px; }
.hp-certs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.hp-cert { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; text-align: left;
  border: 1.5px dashed var(--line); background: transparent; color: var(--ink); font: inherit; }
.hp-cert.on { border-style: solid; border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--panel-2); cursor: pointer; }
.hp-cert.on:hover { border-color: var(--accent); }
.hp-cert:disabled { color: var(--muted); }
.hc-seal { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font: 700 15px var(--display);
  border: 2px solid var(--line); color: var(--muted); }
.hp-cert.on .hc-seal { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 0 3px var(--panel-2), 0 0 0 5px color-mix(in srgb, var(--gold-star) 70%, transparent); }
.hc-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.hc-text b { font-size: 14px; }
.hc-text span { font-size: 12.5px; color: var(--muted); }
@media (max-width: 560px) {
  .cert-kinds { flex-wrap: nowrap; gap: 6px; }
  .cert-kind { flex: 1 1 0; min-width: 0; padding: 7px 10px; }
  .cert-kind b { font-size: 13px; line-height: 1.2; }
  .cert-kind span { display: none; }
  .cert-fields { grid-template-columns: 1fr; }
  .cert-paper { border-radius: 8px; }
}
/* Сообщения родителям: поля для имён и готовые тексты с кнопкой «Скопировать» */
.msg-card { width: min(860px, 100%); }
.msg-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 12px; align-items: end; }
.msg-fields input { font-family: var(--ui); font-size: 14px; }
.msg-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; counter-reset: msg; }
.msg-item { counter-increment: msg; border: 1.5px solid var(--line); border-radius: 18px; padding: 12px 14px; background: var(--panel-2); }
.msg-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.msg-top b::before { content: counter(msg) ". "; color: var(--accent); }
.msg-top span { font-size: 13px; color: var(--muted); }
.msg-item textarea { display: block; width: 100%; margin-top: 8px; font: 14px/1.5 var(--ui); padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--panel); color: var(--ink); resize: vertical; overflow: hidden; }
.msg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; }
.msg-actions .hw-sum { margin: 0; }
.msg-more { margin-top: 14px; }
.msg-more a { color: var(--accent); font-weight: 600; }
@media (max-width: 700px) { .msg-fields { grid-template-columns: 1fr; } }
/* Кадры для Авито (?shots): галерея постеров поверх игры */
.shots { position: fixed; inset: 0; z-index: 70; overflow-y: auto; padding: 24px clamp(16px, 4vw, 48px) 48px; background: var(--bg); color: var(--ink); }
.shots[hidden] { display: none; }
.shots-head { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: flex-end; justify-content: space-between; }
.shots-head h2 { margin: 0; font: 700 clamp(26px, 4vw, 38px)/1.1 var(--display); }
.shots-head .recap-lead { max-width: 62ch; }
.shots-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.shots-size { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--panel-2); border: 1.5px solid var(--line); }
.shots-size button { border: 0; background: transparent; color: var(--muted); font: 600 14px var(--ui); padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.shots-size button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.shots-status { margin: 16px 0; color: var(--muted); }
.shots-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 22px; }
.shot { background: var(--panel); border-radius: 18px; padding: 10px; box-shadow: 0 10px 30px rgba(18,20,43,.12), 0 0 0 1px var(--line); }
.shot canvas { display: block; width: 100%; height: auto; border-radius: 10px; }
.shot-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 4px 2px; font-size: 14px; }
.shot-bar b { color: var(--accent); }
body.shots-mode { overflow: hidden; }
/* Печать: на листе A4 альбомом — только сама грамота */
@media print {
  @page { size: A4 landscape; margin: 0; }
  :root:has(body.cert-open) { padding: 0; }
  body.cert-open { height: auto; overflow: visible; background: #fff; }
  body.cert-open > :not(#cert) { display: none !important; }
  body.cert-open #cert { position: static; display: block; padding: 0; overflow: visible; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; animation: none; }
  body.cert-open .cert-card { width: auto; margin: 0; padding: 0; border-radius: 0; box-shadow: none; background: none; animation: none; overflow: visible; }
  body.cert-open .cert-card::before, body.cert-open .cert-card > :not(.cert-paper) { display: none !important; }
  body.cert-open .cert-paper { margin: 0; border-radius: 0; box-shadow: none; }
  body.cert-open .cert-paper canvas { width: 297mm; height: 209mm; }
}

@media (prefers-reduced-motion: reduce) {
  .band { transition: none; }
  .splash-btn .cur { animation: none; }
  .recap, .recap-card, .talk.sboy .talk-face, .valley, .valley-card, .vnode.current .vn-icon, .hp, .hp-card { animation: none; }
  .world::before { transition: none; }
}

/* Кристаллы летят к кнопке героя */
.gem-fly { position: fixed; z-index: 200; width: 28px; height: 28px; pointer-events: none; filter: drop-shadow(0 0 8px rgba(127,224,255,.85)); }
.gem-fly svg { width: 100%; height: 100%; display: block; }
.hero-badge.gem-pulse { animation: gemPulse .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes gemPulse { 40% { transform: scale(1.12); } }

/* Плашка тестирования: полоска над всеми экранами. Страница начинается под ней, карточки во весь экран — тоже.
   В ролике для Авито (?show) и при печати её нет */
:root { --beta-h: 26px; padding-top: calc(env(safe-area-inset-top, 0px) + var(--beta-h)); }
.beta { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: center; gap: 8px;
  height: calc(env(safe-area-inset-top, 0px) + var(--beta-h)); padding: env(safe-area-inset-top, 0px) 12px 0;
  background: color-mix(in srgb, var(--gold-star) 30%, var(--panel)); border-bottom: 1px solid color-mix(in srgb, var(--gold-star) 55%, var(--line));
  color: var(--ink); font: 500 12.5px/1 var(--ui); white-space: nowrap; overflow: hidden; pointer-events: none; }
.beta i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .beta { background: var(--panel-2); } }
:root[data-theme="dark"] .beta { background: var(--panel-2); }
.splash, .reel, .valley, .recap, .hp, .shots { top: calc(env(safe-area-inset-top, 0px) + var(--beta-h)); }
:root:has(body.show-mode) { --beta-h: 0px; }
body.show-mode .beta { display: none; }
@media print { :root { --beta-h: 0px; } .beta { display: none; } }

/* Лёгкая графика: без размытия, лишних теней и бесконечных анимаций */
body.lite * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.lite .valley, body.lite .hp, body.lite .recap, body.lite .recap-card, body.lite .valley-card, body.lite .hp-card { animation: none; }
body.lite .vnode.current .vn-icon, body.lite .res-stars i.on { animation: none; }
body.lite .btn.primary, body.lite .task, body.lite .world { box-shadow: none; }

/* Сцена Сбоя: цветной сдвиг, шум и тёмные углы */
.world::before { background: radial-gradient(120% 90% at 70% 8%, #6a1f6e 0%, #2a1c52 52%, #120f2a 100%), radial-gradient(closest-side, transparent 55%, rgba(0,0,0,.55)); background-blend-mode: normal; }
.world::after { background:
  repeating-linear-gradient(0deg, rgba(255,43,214,.18) 0 2px, transparent 2px 6px),
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); }
@keyframes glitch {
  0% { transform: none; filter: none; }
  15% { transform: translate(-8px, 2px) skewX(-4deg); filter: drop-shadow(6px 0 0 rgba(255,43,214,.8)) drop-shadow(-6px 0 0 rgba(43,240,255,.8)) saturate(1.6); }
  30% { transform: translate(6px, -3px); filter: drop-shadow(-5px 0 0 rgba(255,43,214,.8)) drop-shadow(5px 0 0 rgba(43,240,255,.8)) contrast(1.4); clip-path: inset(0 0 55% 0); }
  38% { clip-path: inset(40% 0 0 0); transform: translate(-10px, 0); }
  45% { transform: translate(-3px, 0) skewX(3deg); filter: invert(.12) hue-rotate(140deg); clip-path: none; }
  60% { transform: translate(4px, 2px); filter: drop-shadow(4px 0 0 rgba(255,43,214,.7)) drop-shadow(-4px 0 0 rgba(43,240,255,.7)) saturate(2.2); }
  75% { transform: translate(-2px, -1px); filter: hue-rotate(40deg); }
  100% { transform: none; filter: none; clip-path: none; }
}