/* Памятьвиль: тёмная тема в стиле печатной платы */
:root {
  --bg: #0d1210;
  --bg-2: #121a16;
  --panel: #17211c;
  --panel-2: #1d2a23;
  --line: #2a3b32;
  --text: #e6efe9;
  --muted: #9bb0a4;
  --copper: #e0a458;
  --copper-dim: #8a6436;
  --led: #5cf29a;
  --led-dim: #2f7a50;
  --red: #ff6b6b;
  --blue: #6cc7ff;
  --radius: 6px;
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--bg);
  /* «дорожки» платы на фоне */
  background-image:
    linear-gradient(90deg, rgba(224,164,88,.05) 1px, transparent 1px),
    linear-gradient(rgba(224,164,88,.05) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--text);
  font: 17px/1.6 var(--sans);
}

a { color: var(--copper); text-underline-offset: 3px; }
a:hover { color: #f3c27f; }

img, svg { max-width: 100%; }

.wrap { max-width: 900px; margin: 0 auto; padding: 0 16px; }

/* ---------- шапка ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  background: rgba(13,18,16,.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.top .wrap { display: flex; align-items: center; gap: 12px; min-height: 56px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-family: var(--mono); font-weight: 700; letter-spacing: .02em; }
.logo .px { width: 32px; height: 32px; }
.top nav { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.top nav a { color: var(--muted); text-decoration: none; font-size: 15px; padding: 6px 10px; border-radius: var(--radius); }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--text); background: var(--panel); }

/* ---------- типографика ---------- */
h1, h2, h3 { line-height: 1.2; margin: 1.6em 0 .5em; }
h1 { font-size: clamp(28px, 6vw, 44px); letter-spacing: -.01em; }
h2 { font-size: clamp(22px, 4.5vw, 30px); }
h3 { font-size: 20px; }
.kicker { font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--copper); margin: 0; }
.muted { color: var(--muted); }
code, kbd, .mono { font-family: var(--mono); }
code { background: var(--panel-2); padding: .1em .35em; border-radius: 4px; font-size: .92em; }

/* ---------- блоки ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin: 20px 0;
}
.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }

/* реплика Бита */
.bit-says {
  display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: start;
  margin: 24px 0;
}
.bit-says .px { width: 56px; height: 56px; }
.bit-says .bubble {
  position: relative;
  background: var(--panel-2);
  border: 1px solid var(--copper-dim);
  border-radius: var(--radius);
  padding: 12px 16px;
}
.bit-says .bubble::before {
  content: ""; position: absolute; left: -7px; top: 18px;
  width: 12px; height: 12px; background: var(--panel-2);
  border-left: 1px solid var(--copper-dim); border-bottom: 1px solid var(--copper-dim);
  transform: rotate(45deg);
}
.bit-says .who { font-family: var(--mono); font-size: 13px; color: var(--copper); display: block; margin-bottom: 2px; }

/* «Глубже» для старших */
details.deeper {
  border: 1px dashed var(--blue);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 20px 0;
}
details.deeper summary { cursor: pointer; color: var(--blue); font-weight: 600; }
details.deeper[open] summary { margin-bottom: 8px; }

/* мем урока */
.meme {
  margin: 24px auto; max-width: 420px;
  border: 3px solid #000; background: #000;
  font-family: Impact, "Arial Black", var(--sans);
  text-transform: uppercase; text-align: center; color: #fff;
  -webkit-text-stroke: 1px #000;
}
.meme .meme-top, .meme .meme-bottom { padding: 10px; font-size: 22px; line-height: 1.15; }
.meme .meme-pic { background: var(--bg-2); padding: 12px; display: grid; place-items: center; }
.meme .meme-pic .px { width: 140px; height: 140px; }

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px;
  font: 600 16px var(--sans); color: #1a1208;
  background: var(--copper); border: 0; border-radius: var(--radius);
  box-shadow: 0 3px 0 var(--copper-dim);
  cursor: pointer; text-decoration: none;
}
.btn:hover { background: #ebb46e; color: #1a1208; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--copper-dim); }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); box-shadow: none; }
.btn.ghost:hover { border-color: var(--copper); }
.btn:disabled { opacity: .5; cursor: default; }

/* ---------- главная ---------- */
.hero { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; padding: 32px 0 8px; }
.hero h1 { margin: 8px 0 12px; }
.hero .px-big, .hero .gif { width: 160px; height: 160px; justify-self: center; }
@media (min-width: 720px) {
  .hero { grid-template-columns: 1fr 200px; }
  .hero .px-big, .hero .gif { width: 200px; height: 200px; }
}

.months { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 0; list-style: none; }
@media (min-width: 640px) { .months { grid-template-columns: 1fr 1fr; } }
.month {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; position: relative;
}
.month .num { font-family: var(--mono); color: var(--copper); font-size: 13px; }
.month h3 { margin: 4px 0 8px; font-size: 18px; }
.month ol { margin: 0; padding-left: 0; list-style: none; font-size: 15px; }
.month li { display: flex; gap: 8px; padding: 3px 0; color: var(--muted); }
.month li .n { font-family: var(--mono); min-width: 2.2em; color: var(--led-dim); }
.month li a { color: var(--text); }
.month li.done .n { color: var(--led); }

.levels { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.levels li { font-family: var(--mono); font-size: 14px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.levels li b { color: var(--led); font-weight: 600; }

/* ---------- урок ---------- */
.lesson-head { padding: 28px 0 4px; }
.lesson-head h1 { margin: 6px 0 10px; }

.steps {
  display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 12px; margin: 0;
  list-style: none; scrollbar-width: thin;
}
.steps a {
  display: block; white-space: nowrap; font-size: 14px; text-decoration: none;
  padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted);
}
.steps a.game { border-color: var(--led-dim); color: var(--led); }
.steps a:hover { color: var(--text); border-color: var(--copper); }

.block-label {
  display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bg); background: var(--copper);
  padding: 2px 8px; border-radius: 3px;
}
.block-label.game { background: var(--led); }
.block-label.home { background: var(--blue); }
section.block { scroll-margin-top: 72px; padding-top: 8px; }

/* наглядная таблица разрядов */
.places { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin: 16px 0; font-family: var(--mono); text-align: center; }
.places .h { font-size: 12px; color: var(--muted); }
.places .v { font-size: 15px; color: var(--copper); }

/* ---------- переключатели-биты ---------- */
.bits { display: grid; grid-template-columns: repeat(var(--n, 8), 1fr); gap: 6px; margin: 12px 0; max-width: calc(var(--n, 8) * 64px); }
.bit {
  aspect-ratio: 1 / 1.25; min-height: 44px;
  display: grid; place-items: center;
  font: 700 clamp(18px, 5vw, 26px) var(--mono);
  color: var(--muted); background: var(--bg-2);
  border: 2px solid var(--line); border-radius: var(--radius);
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background .12s, color .12s, box-shadow .12s;
}
.bit[aria-pressed="true"] { color: #062014; background: var(--led); border-color: var(--led); box-shadow: 0 0 14px rgba(92,242,154,.45); }
.bit:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
.bit-weights { display: grid; grid-template-columns: repeat(var(--n, 8), 1fr); gap: 6px; max-width: calc(var(--n, 8) * 64px); font: 12px var(--mono); color: var(--muted); text-align: center; }

.readout { font-family: var(--mono); font-size: 20px; }
.readout b { color: var(--led); font-size: 28px; }

/* ---------- мини-игра ---------- */
.minigame {
  background: #0a0f0c; border: 2px solid var(--led-dim); border-radius: var(--radius);
  padding: 16px; margin: 20px 0;
}
.game-hud { display: flex; flex-wrap: wrap; gap: 8px 16px; font-family: var(--mono); font-size: 14px; color: var(--muted); margin-bottom: 12px; }
.game-hud b { color: var(--text); }
.game-hud .lives { color: var(--red); letter-spacing: 2px; }
.game-task { font-size: 18px; margin: 8px 0 4px; }
.game-task .target { font-family: var(--mono); font-size: 34px; color: var(--copper); display: block; margin-top: 4px; word-break: break-all; }
.game-timer { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin: 10px 0; }
.game-timer i { display: block; height: 100%; background: var(--led); transition: width .2s linear; }
.game-timer i.low { background: var(--red); }
.game-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.minigame input[type="text"], .minigame input[type="number"] {
  font: 22px var(--mono); width: 9em; max-width: 100%; min-height: 44px; padding: 6px 10px;
  color: var(--text); background: var(--bg-2); border: 2px solid var(--line); border-radius: var(--radius);
}
.minigame input:focus { outline: none; border-color: var(--copper); }
.game-msg { min-height: 1.6em; font-family: var(--mono); margin-top: 10px; }
.game-msg.ok { color: var(--led); }
.game-msg.bad { color: var(--red); }
.game-intro p { margin: 6px 0; }
.review { margin: 12px 0 0; padding-left: 20px; font-size: 15px; }
.review li { margin: 4px 0; }
.review .yours { color: var(--red); font-family: var(--mono); }
.review .right { color: var(--led); font-family: var(--mono); }

.shake { animation: shake .3s; }
@keyframes shake {
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.pop { animation: pop .35s; }
@keyframes pop {
  50% { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .shake, .pop { animation: none; }
}

/* ---------- ДЗ ---------- */
.hw-frame { width: 100%; min-height: 900px; border: 0; border-radius: var(--radius); background: #fff; }
.hw-off { border: 1px dashed var(--blue); border-radius: var(--radius); padding: 16px; color: var(--muted); }

/* ---------- офлайн ---------- */
.offline-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); margin-right: 6px; vertical-align: middle; }
.status-dot.on { background: var(--led); box-shadow: 0 0 8px var(--led); }

footer { border-top: 1px solid var(--line); margin-top: 48px; padding: 24px 0 40px; color: var(--muted); font-size: 14px; }

.px { image-rendering: pixelated; shape-rendering: crispEdges; display: block; }

/* ---------- варианты ответов, пары, сортировка ---------- */
.choices { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
@media (min-width: 560px) { .choices { grid-template-columns: 1fr 1fr; } }
.choice {
  min-height: 48px; padding: 10px 14px; text-align: left;
  font: 16px/1.3 var(--sans); color: var(--text);
  background: var(--bg-2); border: 2px solid var(--line); border-radius: var(--radius);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.choice:hover:not(:disabled) { border-color: var(--copper); }
.choice.sel { border-color: var(--copper); background: #2a2216; }
.choice.right { border-color: var(--led); background: #10301f; color: var(--led); }
.choice.wrong { border-color: var(--red); background: #3a1717; color: #ffd0d0; }
.choice:disabled { cursor: default; }
.choices.buckets { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.choices.buckets .choice { text-align: center; font-weight: 600; }

.match { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.match .col { display: grid; gap: 8px; align-content: start; }
.match .choice { font-size: 15px; }

.sort-card {
  margin-top: 12px; padding: 18px; text-align: center;
  font-size: 20px; background: var(--panel-2); border: 1px dashed var(--copper-dim); border-radius: var(--radius);
}
.sort-card .muted { display: block; font-size: 12px; margin-bottom: 4px; }

/* ---------- гифки ---------- */
.gif { image-rendering: pixelated; display: block; width: 96px; height: 96px; }
.gif.big { width: 192px; height: 192px; }
.game-intro-head { display: flex; gap: 14px; align-items: center; }
.game-intro-head h3 { margin: 6px 0 0; }
.bit-says .gif { width: 56px; height: 56px; }
.gif-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 16px 0; }

/* ---------- замок на теории ---------- */
[data-locked]:not(.unlocked), [data-stage]:not(.unlocked) { display: none; }
.lockbox {
  display: grid; gap: 12px; justify-items: center; text-align: center;
  background: var(--panel); border: 2px dashed var(--copper-dim); border-radius: var(--radius);
  padding: 24px 16px; margin: 20px 0;
}
.lockbox h2 { margin: 0; }
.lockbox form, .passform { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.lockbox input, .passform input {
  font: 18px var(--mono); min-height: 44px; padding: 6px 12px; width: 14em; max-width: 100%;
  color: var(--text); background: var(--bg-2); border: 2px solid var(--line); border-radius: var(--radius);
}
.lockbox input:focus, .passform input:focus { outline: none; border-color: var(--copper); }
.lockbox .err, .passform .err { color: var(--red); min-height: 1.4em; margin: 0; font-family: var(--mono); }
.lockbox.open { border-style: solid; border-color: var(--led-dim); padding: 12px 16px; }

/* ---------- таблицы в теории ---------- */
.table-wrap { overflow-x: auto; margin: 16px 0; }
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 420px; }
.tbl th, .tbl td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { font-family: var(--mono); font-size: 13px; color: var(--copper); font-weight: 600; }

/* ---------- лекции для учителя ---------- */
.lecture { font-size: 18px; line-height: 1.7; }
.lecture h2 { margin-top: 40px; padding-top: 12px; border-top: 1px solid var(--line); }
.lecture h3 { margin-top: 28px; }
.lecture .time { display: inline-block; font: 13px var(--mono); color: var(--copper); border: 1px solid var(--copper-dim); border-radius: 999px; padding: 2px 10px; margin-bottom: 6px; }
.lecture .do, .lecture .ask, .lecture .note {
  border-left: 4px solid var(--line); background: var(--panel); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 10px 14px; margin: 14px 0; font-size: 16px;
}
.lecture .do { border-color: var(--blue); }
.lecture .ask { border-color: var(--led); }
.lecture .note { border-color: var(--copper); }
.lecture .do::before, .lecture .ask::before, .lecture .note::before {
  display: block; font: 12px var(--mono); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px;
}
.lecture .do::before { content: "Сделайте"; color: var(--blue); }
.lecture .ask::before { content: "Спросите класс"; color: var(--led); }
.lecture .note::before { content: "Для вас"; color: var(--copper); }
.lecture .ask .ans { color: var(--muted); }
.toc { columns: 2 220px; font-size: 15px; }
.toc a { color: var(--muted); }

/* ---------- цепочка теория → игра ---------- */
.gate { display: grid; gap: 10px; justify-items: center; text-align: center; background: var(--panel); border: 2px dashed var(--copper-dim); border-radius: var(--radius); padding: 24px 16px; margin: 24px 0; }
.gate h2 { margin: 0; }
.gate p { margin: 0; max-width: 34em; }
.gate details { width: 100%; }
.gate summary { cursor: pointer; color: var(--copper); font-family: var(--mono); font-size: 14px; }
.gate .passform { margin-top: 10px; }
.passform .err { flex-basis: 100%; text-align: center; }
.steps a.locked { opacity: .45; }
.steps a.locked::after { content: " 🔒"; font-size: .8em; }
.game-next { margin: 12px 0 0; padding: 10px 14px; border-radius: var(--radius); background: var(--panel-2); border: 1px solid var(--led-dim); }

/* ==========================================================
   Комикс-серии (assets/js/story.js)
   Жёлтая рамка с растром отделяет комикс от текста урока.
   ========================================================== */
.story { margin: 20px 0 28px; }
.story [hidden] { display: none !important; }
.story.story-on {
  container: story / inline-size;
  position: relative; padding: 8px 8px 10px; color: #111;
  background-color: #ffd84a;
  background-image: radial-gradient(rgba(120,70,0,.22) 1.1px, transparent 1.6px);
  background-size: 7px 7px;
  border: 3px solid #000; border-radius: 4px; box-shadow: 5px 5px 0 #000;
}
.st-head { display: flex; align-items: center; gap: 8px; margin: 0 0 7px; min-width: 0; }
.st-badge {
  flex: none; font: 800 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: #ffd84a; background: #111; padding: 5px 8px; transform: rotate(-3deg);
}
.st-title {
  min-width: 0; font: 800 clamp(15px, 3.2cqw, 22px)/1.15 Impact, "Arial Black", var(--sans);
  text-transform: uppercase; letter-spacing: .02em; color: #111;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* сцена: ширина всегда 160 единиц, на узком экране кадр выше (4:3 или квадрат), чтобы влезли пузыри */
.st-stage {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; container-type: inline-size;
  background: #000; border: 3px solid #000; border-radius: 2px;
  cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}
@container story (max-width: 700px) { .st-stage { aspect-ratio: 4 / 3; } }
@container story (max-width: 520px) { .st-stage { aspect-ratio: 1 / 1; } }
.st-stage:focus { outline: none; }
.st-stage:focus-visible { outline: 3px solid #111; outline-offset: 3px; }
.st-world { --u: calc(100cqw / 320); position: absolute; inset: 0; transition: transform .7s cubic-bezier(.3,0,.2,1); }
.st-world.zoomed { transform: scale(1.3); }
.st-bg, .st-actors, .st-fx { position: absolute; inset: 0; }
.st-bg svg { display: block; width: 100%; height: 100%; max-width: none; shape-rendering: crispEdges; image-rendering: pixelated; }
.st-fx { pointer-events: none; overflow: hidden; z-index: 200; }
.st-vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 207;
  background: radial-gradient(ellipse at 50% 55%, transparent 58%, rgba(0,0,0,.42) 100%);
}

/* герои: стоят на линии земли фона, размер в единицах сцены */
.st-actor {
  position: absolute; z-index: 2;
  bottom: calc(var(--u) * var(--g, 14)); width: calc(var(--u) * var(--w, 48));
  transform: translateX(-50%); transform-origin: 50% 100%;
  transition: left .8s cubic-bezier(.45,0,.4,1), filter .3s, transform .3s;
}
.st-actor.no-tr { transition: none; }
.st-a-face { position: relative; height: calc(var(--u) * var(--h, 42)); transition: transform .28s steps(4); }
.st-a-face svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.st-shut { opacity: 0; animation: st-blinkf var(--blink, 4s) steps(1) infinite var(--blink-delay, 0s); }
.st-a-breathe { animation: st-breathe var(--breath, 3s) steps(2) infinite var(--breath-delay, 0s); }
.st-noart { width: 100%; height: 100%; background: var(--copper); }
.st-shadow {
  position: absolute; left: 6%; right: 6%; bottom: calc(var(--u) * -3); height: calc(var(--u) * 6);
  background: radial-gradient(closest-side, rgba(0,0,0,.75), rgba(0,0,0,0));
}
/* мягкое пятно света под героем: персонажи светлее фона и не теряются */
.st-pool {
  position: absolute; left: -40%; right: -40%; bottom: calc(var(--u) * -6); height: calc(var(--u) * 26);
  background: radial-gradient(closest-side, rgba(255,236,190,.16), rgba(255,236,190,0));
  pointer-events: none;
}
/* тонкий светлый ореол по контуру, чтобы тёмный контур спрайта не сливался с ночным фоном */
.st-a-idle { filter: drop-shadow(0 0 calc(var(--u) * 1) rgba(255,240,215,.38)); }
.st-tag {
  position: absolute; left: 50%; bottom: calc(100% + 5px); transform: translateX(-50%) scale(.8);
  font: 800 12px/1 var(--sans); white-space: nowrap; color: #111;
  background: var(--c, #e0a458); border: 2px solid #000; border-radius: 999px; padding: 3px 8px;
  opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none;
}
.st-actor.speaking { z-index: 5; transform: translateX(-50%) scale(1.07); }
.st-actor.speaking .st-tag { opacity: 1; transform: translateX(-50%) scale(1); }
.st-actor.speaking .st-a-idle { filter: drop-shadow(0 0 calc(var(--u) * 1) rgba(255,240,215,.5)) drop-shadow(0 0 calc(var(--u) * 3) var(--c, #ffe066)); }
.has-speaker .st-actor:not(.speaking) { filter: brightness(.7) saturate(.8); }
.has-speaker .st-actor:not(.speaking) .st-pool { opacity: .4; }
.st-actor.walking .st-a-idle { animation: st-walk .26s steps(2) infinite; }
.st-actor.talking .st-a-breathe { animation: st-talk .32s steps(2) infinite; }
.idle-float { animation: st-float 2.4s ease-in-out infinite; }
.act-jump { animation: st-jump .55s cubic-bezier(.3,0,.3,1); }
.act-shake { animation: st-ashake .45s steps(6); }
.act-bounce { animation: st-bounce .8s ease-out; }
.act-float { animation: st-afloat 1.6s ease-in-out; }
.act-spin { animation: st-aspin .6s steps(8); }
.act-pop { animation: st-pop .3s steps(3); }
@keyframes st-blinkf { 0%, 92% { opacity: 0; } 93%, 96% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes st-breathe { 50% { transform: translateY(calc(var(--u) * -1.2)); } }
@keyframes st-walk { 50% { transform: translateY(-6%); } }
@keyframes st-talk { 50% { transform: translateY(calc(var(--u) * -1.6)) scaleY(.97); } }
@keyframes st-float { 50% { transform: translateY(-10%); } }
@keyframes st-jump { 40% { transform: translateY(-45%); } 70% { transform: translateY(0) scaleY(.9); } }
@keyframes st-ashake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-8%); } 40%, 80% { transform: translateX(8%); } }
@keyframes st-bounce { 20% { transform: translateY(-25%); } 40% { transform: translateY(0) scaleY(.9); } 60% { transform: translateY(-12%); } 80% { transform: translateY(0); } }
@keyframes st-afloat { 50% { transform: translateY(-30%); } }
@keyframes st-aspin { to { transform: rotate(360deg); } }
@keyframes st-pop { 50% { transform: scale(1.15); } }

/* пузырь реплики и хвостик к говорящему */
.st-bubble {
  position: absolute; z-index: 215; left: 0; top: 0; box-sizing: border-box;
  padding: 7px 12px 8px; background: #fff; color: #111;
  font: 600 clamp(14px, 2.15cqw, 19px)/1.38 var(--sans);
  border: 2.5px solid #000; border-radius: 16px; box-shadow: 3px 3px 0 rgba(0,0,0,.55);
  cursor: pointer;
}
.st-bubble.voice { border-style: dashed; border-radius: 6px; background: #f3f0ff; }
.st-bname { display: block; margin-bottom: 1px; font: 800 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: #5b2a99; }
.st-tail { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 214; pointer-events: none; overflow: visible; }
.st-tail polygon { fill: #fff; stroke: #000; stroke-width: 2.5; stroke-linejoin: round; }

/* сверху: подпись рассказчика и табличка */
.st-top {
  position: absolute; top: 6px; left: 6px; right: 6px; z-index: 216;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none;
}
.st-caption {
  margin: 0; max-width: min(94%, 560px); padding: 6px 11px 7px;
  background: #ffe9a8; color: #1a1208; border: 2.5px solid #000; border-radius: 2px;
  font: italic 600 clamp(14px, 2.1cqw, 19px)/1.38 var(--sans); box-shadow: 3px 3px 0 rgba(0,0,0,.55);
}
.st-sign {
  align-self: center; max-width: 94%; padding: .3em .7em; text-align: center;
  font: 700 clamp(12px, 2.9cqw, 24px)/1.25 var(--mono); color: var(--led);
  background: rgba(5,12,8,.92); border: 2px solid var(--led-dim); box-shadow: 0 0 0 2px #050807, 0 0 18px rgba(92,242,154,.25);
  word-break: break-word;
}

/* подсветка, вспышка */
.st-mood, .st-flash { position: absolute; inset: 0; pointer-events: none; z-index: 205; }
.st-mood.mood-hot { background: linear-gradient(0deg, rgba(255,107,58,.28), rgba(255,107,58,0) 70%); animation: st-hot 1.6s ease-in-out infinite; }
.st-mood.mood-alarm { animation: st-alarm 1s steps(2) infinite; }
.st-mood.mood-dark { background: rgba(0,0,0,.55); }
.st-mood.mood-glitch { background: repeating-linear-gradient(0deg, rgba(190,80,255,.08) 0 3px, transparent 3px 7px); }
@keyframes st-hot { 50% { opacity: .55; } }
@keyframes st-alarm { 50% { background: rgba(255,60,60,.2); } }
.st-flash { background: #fff; opacity: 0; }
.st-flash.on { animation: st-flash .45s ease-out; }
.st-flash.on-soft { animation: st-flash-soft .8s ease-out; }
@keyframes st-flash { 0% { opacity: .9; } 100% { opacity: 0; } }
@keyframes st-flash-soft { 0% { opacity: .25; } 100% { opacity: 0; } }

/* обложка */
.st-cover {
  position: absolute; inset: 0; z-index: 230; display: grid; place-content: center; justify-items: center; gap: 8px;
  padding: 12px; text-align: center; background: rgba(0,0,0,.5);
}
.st-cover-title {
  margin: 0; color: #fff; font: 800 clamp(22px, 6cqw, 46px)/1.05 Impact, "Arial Black", var(--sans); text-transform: uppercase;
  -webkit-text-stroke: 1.5px #000; text-shadow: 3px 3px 0 #000;
}
.st-cover-sub { margin: 0 0 4px; font: 13px var(--mono); color: #ffe9a8; }
.st-cover .st-play { background: #ffd84a; color: #111; border: 3px solid #000; box-shadow: 3px 3px 0 #000; font-weight: 800; }
.st-cover .st-play:hover { background: #ffe680; }
.st-seen { margin: 0; font: 13px var(--mono); color: var(--led); }

/* кнопки под кадром */
.st-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.st-btn {
  min-height: 40px; padding: 6px 12px; font: 700 15px/1 var(--sans); color: #111;
  background: #fff; border: 2.5px solid #000; border-radius: 8px; box-shadow: 2px 2px 0 #000; cursor: pointer;
}
.st-btn:hover { background: #fff7d6; }
.st-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #000; }
.st-btn:focus-visible { outline: 3px solid #111; outline-offset: 2px; }
.st-btn:disabled { opacity: .4; cursor: default; }
.st-next { margin-left: auto; background: #111; color: #ffd84a; }
.st-snd { font-size: 13px; padding: 6px 10px; }
.st-snd.off { background: #e9e2cc; color: #555; }
.st-next:hover { background: #2a2a2a; }
.st-count { position: absolute; right: 6px; bottom: 6px; z-index: 220; font: 700 11px/1 var(--mono); color: #111; background: #ffd84a; border: 2px solid #000; padding: 3px 5px; pointer-events: none; }
.st-cover ~ .st-count, .story:not(.st-playing) .st-count { display: none; }
.st-hint { flex-basis: 100%; margin: 2px 0 0; font: 13px/1.35 var(--sans); color: rgba(0,0,0,.55); }
.st-bar.fresh .st-hint { color: #111; font-weight: 700; }
.st-bar.fresh .st-hint::before { content: "\25B8  "; animation: st-blinkk 1s steps(2) infinite; }
@container story (max-width: 420px) {
  .st-prev span, .st-snd-word { display: none; }
  .st-bar { gap: 5px; }
  .st-btn { padding: 6px 8px; font-size: 13px; }
  .st-actor .st-tag { font-size: 11px; padding: 2px 6px; }
}

/* частицы */
.st-p { position: absolute; top: -8%; pointer-events: none; }
.st-bitp { font: 700 clamp(10px, 2.6cqw, 20px) var(--mono); color: var(--led); text-shadow: 0 0 6px rgba(92,242,154,.7); animation: st-fall 2s linear forwards; opacity: 0; }
.st-conf { width: 1.4cqw; height: 1.4cqw; min-width: 5px; min-height: 5px; animation: st-confall 2.4s linear forwards; opacity: 0; }
.st-smoke { top: auto; width: 3cqw; height: 3cqw; min-width: 8px; min-height: 8px; background: #8f9a96; animation: st-rise 2.4s ease-out forwards; opacity: 0; }
@keyframes st-fall { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: .9; transform: translateY(82cqw); } }
@keyframes st-confall { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 1; transform: translate(var(--dx), 62cqw) rotate(540deg); } }
@keyframes st-rise { 0% { opacity: .85; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(var(--dx), -30cqw) scale(1.8); } }

/* эффекты сцены */
.st-stage.fx-shake { animation: st-shake .5s steps(8); }
@keyframes st-shake { 0%, 100% { transform: none; } 15% { transform: translate(-1.5%, 1%); } 30% { transform: translate(1.5%, -1%); } 45% { transform: translate(-1%, -1%); } 60% { transform: translate(1%, 1%); } 75% { transform: translate(-.5%, .5%); } }
.st-stage.fx-glitch .st-world { animation: st-glitch .7s steps(7); }
.st-stage.fx-glitch::after {
  content: ""; position: absolute; inset: 0; z-index: 206; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,0,90,.22) 0 4%, transparent 4% 9%, rgba(0,230,255,.18) 9% 11%, transparent 11% 19%);
  mix-blend-mode: screen; animation: st-scan .7s steps(5);
}
.st-stage.fx-tint::after { content: ""; position: absolute; inset: 0; z-index: 206; pointer-events: none; background: rgba(190,80,255,.18); animation: st-flash-soft .8s ease-out forwards; }
@keyframes st-glitch {
  0% { filter: drop-shadow(3px 0 0 rgba(255,0,80,.9)) drop-shadow(-3px 0 0 rgba(0,240,255,.9)); transform: translateX(-2%); clip-path: inset(10% 0 30% 0); }
  20% { transform: translateX(2%) skewX(-4deg); clip-path: inset(40% 0 5% 0); }
  40% { filter: drop-shadow(-4px 0 0 rgba(255,0,80,.9)) drop-shadow(4px 0 0 rgba(0,240,255,.9)); transform: translateX(-1%); clip-path: inset(0 0 60% 0); }
  60% { transform: translateX(1.5%) skewX(3deg); clip-path: inset(20% 0 20% 0); }
  80% { filter: drop-shadow(2px 0 0 rgba(255,0,80,.9)) drop-shadow(-2px 0 0 rgba(0,240,255,.9)); transform: none; clip-path: none; }
  100% { filter: none; transform: none; clip-path: none; }
}
@keyframes st-scan { 0% { transform: translateY(-20%); opacity: 1; } 100% { transform: translateY(20%); opacity: 0; } }

/* живой фон */
.st-twinkle { animation: st-blinkk 3s steps(2) infinite; }
.st-blink { animation: st-blinkk 2s steps(2) infinite; }
.st-blink-slow { animation: st-blinkk 1.6s steps(2) infinite; }
.st-shimmer { animation: st-shim 3s steps(3) infinite; }
.st-drift { animation: st-drift 50s linear infinite; }
.st-spin { transform-box: fill-box; transform-origin: center; animation: st-rot 1.2s steps(8) infinite; }
.st-spin.st-fast { animation-duration: .25s; }
.st-spin.st-slow { animation-duration: 2.4s; animation-timing-function: linear; }
.st-spin.st-rev { animation-direction: reverse; animation-duration: .5s; }
.st-wobble { animation-name: st-rot-wob; }
.st-jitter { animation: st-jit .3s steps(3) infinite; }
.st-heat { animation: st-heat 1.4s linear infinite; }
.st-glow { animation: st-glow 1.6s ease-in-out infinite; opacity: .35; }
@keyframes st-blinkk { 50% { opacity: .15; } }
@keyframes st-shim { 50% { opacity: .55; } }
@keyframes st-drift { from { transform: translateX(-260px); } to { transform: translateX(340px); } }
@keyframes st-rot { to { transform: rotate(360deg); } }
@keyframes st-rot-wob { 0% { transform: rotate(0) translate(0, 0); } 25% { transform: rotate(90deg) translate(1px, -1px); } 50% { transform: rotate(180deg) translate(-1px, 1px); } 100% { transform: rotate(360deg); } }
@keyframes st-jit { 33% { transform: translate(1px, 0); } 66% { transform: translate(-1px, 1px); } }
@keyframes st-heat { 0% { transform: translateY(12px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-12px); opacity: 0; } }
@keyframes st-glow { 50% { opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
  .story *, .story *::before, .story *::after { animation: none !important; transition: none !important; }
  .st-world.zoomed { transform: scale(1.2); }
  .st-shut { opacity: 0 !important; }
}

/* ---------- анимированные мемы и герои ---------- */
.meme .meme-gif { display: block; width: 100%; max-width: 384px; height: auto; image-rendering: pixelated; margin: 0 auto; }
.cast { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; padding: 0; list-style: none; }
.cast li { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; text-align: center; }
.cast .gif { margin: 0 auto 6px; }
.cast b { display: block; color: var(--copper); }
.cast span { font-size: 14px; color: var(--muted); }