/* Игры урока: «Печать или пламя» (Да/Нет), «Фонарики», «Ларец», «Мост», «Бусы» (собери предложение). Всё под .scq.
   Сцена — один выдержанный вид (ночной школьный двор) и от темы страницы не зависит. */

.scq-host { container-type: inline-size; width: 100%; }

.scq {
  --ink: #3b1a10;                       /* тёмно-коричневый: текст и мелкие контуры */
  --edge: rgba(59, 26, 16, .42);        /* кромка панелей и кнопок — тонкая, не тушью (редизайн 12.10.2026) */
  --paper: #fff1d0;
  --cream: #fff6e3;
  --fire: #e8452c;  --fire-dk: #9c2413;
  --jade: #17a07b;  --jade-dk: #0c6b52;
  --gold: #ffc83d;
  --lock: #f5a623;  --lock-dk: #a86a0a;
  --red: #b3122f;
  --soft: #6b4a3a;
  --zh-display: "ZCOOL KuaiLe", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --zh-text: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Hiragino Sans GB", sans-serif;
  --py: "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans", sans-serif;
  --imp: 17cqh;                         /* сторона оттиска печати */

  position: relative; display: block; width: 100%;
  aspect-ratio: 16 / 9.6; min-height: 420px;
  max-height: min(700px, calc(100vh - 24px)); max-height: min(700px, calc(100dvh - 24px));
  container: scq / size;
  overflow: hidden; border-radius: 22px; isolation: isolate; outline: none;
  background: #091129; color: var(--cream);
  font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 700; line-height: 1.25;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
@container (max-width: 640px) { .scq { aspect-ratio: 10 / 16.4; min-height: 500px; border-radius: 18px; } .scq[data-kind="mc"] { aspect-ratio: 10 / 19; min-height: 560px; } }   /* «Фонарики» в портрете выше: два ряда овальных фонариков */

.scq *, .scq *::before, .scq *::after { box-sizing: border-box; }
.scq [hidden] { display: none !important; }
.scq button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
.scq button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.scq-zh { font-family: var(--zh-text); }
.scq-nw { white-space: nowrap; }
.scq-zhd { font-family: var(--zh-display); font-style: normal; font-weight: 400; }
.scq-py { font-family: var(--py); font-style: normal; font-weight: 600; }
.scq-world { position: absolute; inset: 0; }

/* ── фон ── */
.scq-bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, #091129 0%, #10244e 44%, #1f3f76 76%, #2f548d 100%); }
.scq-bg i, .scq-bg svg { position: absolute; display: block; }
.scq-stars { inset: 0 0 45% 0; background-image:
    radial-gradient(circle at 7% 22%, #fff 0 1.2px, transparent 1.8px), radial-gradient(circle at 19% 61%, #ffe9b5 0 1px, transparent 1.6px),
    radial-gradient(circle at 31% 12%, #fff 0 1px, transparent 1.6px), radial-gradient(circle at 44% 38%, #fff 0 1.3px, transparent 1.9px),
    radial-gradient(circle at 58% 9%, #ffe9b5 0 1px, transparent 1.6px), radial-gradient(circle at 66% 47%, #fff 0 1px, transparent 1.6px),
    radial-gradient(circle at 91% 58%, #fff 0 1.2px, transparent 1.8px), radial-gradient(circle at 96% 14%, #fff 0 1px, transparent 1.6px);
  animation: scq-twinkle 5s ease-in-out infinite alternate; }
.scq-moon { right: 8%; top: 14%; width: 23cqmin; aspect-ratio: 1; border-radius: 50%; background: #ffe7ad;
  box-shadow: 0 0 0 3.2cqmin rgba(255, 231, 173, .1), 0 0 0 7.5cqmin rgba(255, 231, 173, .055); }
.scq-beam { top: -4%; left: -4%; width: 50%; height: 112%; background: rgba(255, 236, 190, .05); clip-path: polygon(0 0, 16% 0, 100% 100%, 46% 100%); }
.scq-beam.r { left: auto; right: -4%; transform: scaleX(-1); }
.scq-roofs { left: 0; bottom: 17.5%; width: 100%; height: 36%; }
.scq-ground { left: 0; right: 0; bottom: 0; height: 18%; border-top: .6cqmin solid #2f2447; background-color: #171129;
  background-image: radial-gradient(ellipse 22% 60% at 16% 38%, rgba(255, 170, 80, .22), transparent 70%), radial-gradient(ellipse 20% 60% at 87% 38%, rgba(255, 220, 150, .16), transparent 70%); }
.scq-fly { left: var(--x); top: var(--y); width: .9cqmin; height: .9cqmin; min-width: 3px; min-height: 3px; border-radius: 50%; opacity: 0;
  background: #ffdc7a; box-shadow: 0 0 1.4cqmin .3cqmin rgba(255, 210, 100, .55); animation: scq-fly var(--d) ease-in-out var(--dl) infinite alternate; }

/* ── верхняя строка: серия, фонарики, жемчуг ── */
.scq-hud { position: absolute; z-index: 1; left: 0; right: 0; top: 0; padding: 2.6cqh 2.2cqw 0; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: start; column-gap: 1.2cqw; font-size: clamp(13px, 2.9cqh, 18px); }
.scq-streak { grid-column: 1; justify-self: start; display: inline-flex; align-items: center; gap: .3em; padding: .22em .7em .22em .45em;
  border-radius: 99px; border: 1.5px solid var(--edge); background: #ff8a1f; color: var(--ink); font-weight: 800; }
.scq-streak svg { width: 1em; height: 1.25em; }
.scq-right { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: .5em; }
.scq-score { display: inline-flex; align-items: center; gap: .4em; padding: .22em .75em .22em .3em; border-radius: 99px; border: 1.5px solid var(--edge);
  background: rgba(9, 17, 41, .72); font-weight: 800; font-variant-numeric: tabular-nums; }
.scq-coin-ico { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.18em; }   /* та же монета, что includes/coin.html */
.scq-pearl { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; }   /* монета в HUD (имя класса историческое) */
.scq-pearl svg { width: 100%; height: 100%; }
.scq-snd { width: 2.1em; height: 2.1em; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--edge); background: rgba(9, 17, 41, .72); }
.scq-snd svg { width: 1.15em; height: 1.15em; }
.scq-snd[aria-pressed="false"] .scq-snd-on, .scq-snd[aria-pressed="true"] .scq-snd-off { display: none; }

/* Фонарики-прогресс — ровно как вариант D, который выбрал владелец 12.10 («смотрятся не очень» → «сделай точно так же,
   как в варианте D»): прямая верёвка, на ней плоская золотая крышка без обводки, под ней гладкий овал 1:1.09 без рёбер и
   кисти, заливка без градиентов. Незажжённый — светлая бумага #e9d6b0 с прозрачностью .7, текущий — #f3e3c2 с золотой
   обводкой вместо тёмной, верный — оранжевый #ff7a3c с тонким кольцом-ореолом вокруг (::after), ошибка — сланец #3d4258.
   Шаг между фонариками — 1.25 их ширины. Верёвка — во всю ширину сцены и провисает (.scq-rope, SVG от layoutRope() в
   движке; владелец 12.10: «ленту во всю длину, чтобы было похоже на реальную»), фонарики сдвинуты под её кривую (top). */
.scq-lans { --ls: clamp(20px, 5.4cqh, 34px); grid-column: 2; position: relative; display: flex; justify-content: center; gap: calc(var(--ls) * 1.25); padding-top: calc(var(--ls) * .25); }
.scq-rope { position: absolute; z-index: 0; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }   /* верёвка во всю ширину — кривую ставит layoutRope() в движке */
.scq-lan { position: relative; top: 0; flex: none; width: var(--ls); height: calc(var(--ls) * 1.09); box-sizing: border-box; border-radius: 50%; border: 2px solid #3b1a10; background: #e9d6b0;
  transform-origin: 50% calc(var(--ls) * -.15); animation: scq-sway 3.4s ease-in-out calc(var(--i) * -.41s) infinite alternate; transition: background-color .25s, border-color .25s, opacity .25s; }
.scq-lan::before { content: ""; position: absolute; left: 50%; top: calc(var(--ls) * -.17); width: calc(var(--ls) * .55); height: calc(var(--ls) * .2); margin-left: calc(var(--ls) * -.275); background: #d9982f; }
.scq-lan::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--ls) * 1.55); height: calc(var(--ls) * 1.55); margin: calc(var(--ls) * -.775) 0 0 calc(var(--ls) * -.775); box-sizing: border-box; border-radius: 50%; border: 2px solid #ffb45a; opacity: 0; transition: opacity .3s; pointer-events: none; }
.scq-lan[data-s="off"] { opacity: .7; }
.scq-lan[data-s="now"] { background: #f3e3c2; border: 2.5px solid #ffd166; }
.scq-lan[data-s="on"] { background: #ff7a3c; }
.scq-lan[data-s="on"]::after { opacity: .35; }
.scq-lan[data-s="miss"] { background: #3d4258; border-color: #22263a; }

/* ── герои: точка опоры — середина стоп ── */
.scq-actor { position: absolute; z-index: 3; left: var(--x); bottom: var(--b); width: 0; height: var(--h); pointer-events: none; transform-origin: 0 100%;
  transition: opacity .3s, bottom .45s cubic-bezier(.34, 1.56, .64, 1); }
.scq-actor::before { content: ""; position: absolute; left: 0; bottom: calc(var(--h) * -.018); width: calc(var(--h) * .46); height: calc(var(--h) * .07);
  margin-left: calc(var(--h) * -.23); border-radius: 50%; background: rgba(4, 6, 20, .42); }
.scq-actor-in { position: absolute; left: 0; bottom: 0; width: 0; height: 100%; transform-origin: 0 100%; animation: scq-breathe 3.7s ease-in-out infinite; }
.scq-guest .scq-actor-in { animation-duration: 4.3s; animation-delay: -1.3s; }
.scq-guest .scq-actor-in.is-tense { animation: scq-tremble .11s linear infinite; }
.scq-pose { position: absolute; left: 0; bottom: 0; height: 100%; aspect-ratio: var(--r); transform: translateX(calc(var(--px) * -1%)); visibility: hidden; }
.scq-pose.is-on { visibility: visible; }
.scq-pose img { display: block; width: 100%; height: 100%; max-width: none; -webkit-user-drag: none; }
.scq-mouth { position: absolute; left: var(--mx); top: var(--my); width: 0; height: 0; }
.scq[data-debug] .scq-pose.is-on .scq-mouth { width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #f0f; }
.scq-dragon { --x: 16%; --b: 6.5%; --h: 64cqh; }
.scq-guest { --x: 87%; --b: 6.5%; --h: 57cqh; }
.scq-dragon.is-acting { z-index: 6; }
.scq[data-phase="load"] .scq-actor { opacity: 0; }

.scq-bubble { position: absolute; left: 0; bottom: 101%; transform: translateX(-42%); padding: .4em .8em; border-radius: 14px; border: 1.5px solid var(--edge);
  background: #fff; color: #16161a; text-align: center; white-space: nowrap; font-size: clamp(11px, 2.4cqh, 15px); opacity: 0; transition: opacity .25s; }
.scq-bubble b { display: block; font: 400 1.45em/1.15 var(--zh-display); }
.scq-bubble small { display: block; font-size: .85em; font-weight: 600; color: #5a5a66; }
.scq-bubble::after { content: ""; position: absolute; left: 44%; top: 100%; border: 7px solid transparent; border-top-color: var(--ink); }
.scq[data-phase="intro"] .scq-bubble { opacity: 1; }

.scq-emote { position: absolute; left: 0; bottom: 97%; width: calc(var(--h) * .2); aspect-ratio: 1; margin-left: calc(var(--h) * -.1); display: grid; place-items: center;
  border-radius: 50%; border: 1.5px solid var(--edge); background: #fff; color: var(--ink); font-size: calc(var(--h) * .13); font-weight: 800; line-height: 1; opacity: 0; }

/* ── свиток ── */
.scq-scrollwrap { position: absolute; z-index: 4; left: 26%; width: 48%; top: 17%; height: 43%; touch-action: pan-y; cursor: grab; animation: scq-float 4.6s ease-in-out infinite alternate; }
.scq-scrollwrap.is-drag { cursor: grabbing; }
.scq-scroll { --burn: -20%; position: absolute; inset: 0; transform-origin: 50% 60%; }
.scq-scroll.is-nudge { animation: scq-nudge 1.1s ease-in-out 1.8s 2; }
.scq-scroll.is-burning { -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--burn) - 3%), #000 calc(var(--burn) + .5%)); mask-image: linear-gradient(90deg, transparent calc(var(--burn) - 3%), #000 calc(var(--burn) + .5%)); }
.scq-scroll.is-false { filter: grayscale(.75) brightness(.86); }
.scq-paper { position: absolute; inset: 7% 3%; display: grid; place-items: center; padding: 9% 8% 8%; overflow: hidden; background: var(--paper);
  border: 1.5px solid var(--edge); border-radius: 5px; box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 7px rgba(190, 120, 40, .45); }
.scq-scroll.is-gold .scq-paper { box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 9px var(--gold);
  background: linear-gradient(115deg, #fff1d0 0 38%, #fffbe8 46%, #fff1d0 54% 100%) 0 0 / 300% 100%; animation: scq-sheen 2.2s linear infinite; }
.scq-scroll.is-gold .scq-tag { color: #b9770a; }
.scq-scroll.is-true .scq-paper { box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 9px var(--gold), 0 0 0 4px rgba(255, 200, 61, .45), 0 0 34px 6px rgba(255, 200, 61, .55); }
.scq-roll { position: absolute; top: 0; bottom: 0; width: max(5%, 16px); border: 1.5px solid var(--edge); border-radius: 9px; background: linear-gradient(90deg, #6b3118 0 22%, #a6582c 22% 60%, #7d3d1e 60%); }
.scq-roll.l { left: 0; } .scq-roll.r { right: 0; }
.scq-roll::before, .scq-roll::after { content: ""; position: absolute; left: 50%; width: 64%; height: 6%; margin-left: -32%; background: #e9b23c; border: 1.5px solid var(--edge); border-radius: 4px; }
.scq-roll::before { top: -5%; } .scq-roll::after { bottom: -5%; }
.scq-tag { position: absolute; left: 0; right: 0; top: 7%; text-align: center; font-size: clamp(9px, 1.9cqh, 12px); letter-spacing: .09em; text-transform: uppercase; font-weight: 800; color: #a3743a; }
.scq-q { margin: 0; max-width: 100%; text-align: center; text-wrap: balance; color: var(--ink); font-weight: 800; font-size: clamp(16px, 2.35cqw, 27px); line-height: 1.32; }
.scq-q .scq-zh { font-size: 1.22em; font-weight: 700; color: var(--red); }
.scq-hint { position: absolute; left: 0; right: 0; bottom: 5.5%; text-align: center; font-size: clamp(10px, 1.9cqh, 13px); font-weight: 600; color: #a3743a; }
.scq-peek { position: absolute; top: 9%; padding: .12em .5em; border: 3px solid currentColor; border-radius: 10px; background: rgba(255, 255, 255, .92);
  font-size: clamp(13px, 2.9cqh, 21px); font-weight: 800; opacity: 0; pointer-events: none; }
.scq-peek.yes { left: 6%; color: var(--jade-dk); transform: rotate(-9deg); }
.scq-peek.no { right: 6%; color: #b3261a; transform: rotate(9deg); }
.scq-imprint { position: absolute; right: 4.5%; bottom: 7%; width: var(--imp); height: var(--imp); display: grid; place-items: center; border: calc(var(--imp) * .075) solid currentColor;
  border-radius: 13%; color: #d22b2b; font: 400 calc(var(--imp) * .68)/1 var(--zh-display); transform: rotate(-8deg); opacity: 0; mix-blend-mode: multiply; pointer-events: none; }
.scq-imprint b { font-weight: 400; transform: translateY(-3%); }
.scq-imprint.is-on { opacity: .92; }
.scq-imprint.is-gold { color: #e09a00; mix-blend-mode: normal; opacity: 1; background: rgba(255, 244, 200, .85); box-shadow: 0 0 0 3px rgba(255, 200, 61, .45), 0 0 22px 4px rgba(255, 200, 61, .8); }
.scq-char { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, #26100a var(--burn), rgba(92, 40, 12, .85) calc(var(--burn) + 5%), rgba(214, 120, 30, 0) calc(var(--burn) + 17%)); }
.scq-scroll.is-burning .scq-char { opacity: 1; }
.scq-shield { position: absolute; inset: 4.5% 1.2%; border-radius: 10px; border: 4px solid var(--gold); opacity: 0; pointer-events: none;
  box-shadow: 0 0 0 5px rgba(255, 200, 61, .35), 0 0 46px 12px rgba(255, 200, 61, .75), inset 0 0 30px rgba(255, 230, 150, .7);
  background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, .7) 50%, transparent 68%) 120% 0 / 260% 100% no-repeat; }

.scq-edge { position: absolute; z-index: 2; top: 0; bottom: 0; width: 34%; opacity: 0; pointer-events: none; }
.scq-edge.l { left: 0; background: linear-gradient(90deg, rgba(255, 96, 40, .55), transparent); }
.scq-edge.r { right: 0; background: linear-gradient(270deg, rgba(40, 200, 150, .5), transparent); }
.scq-dim { position: absolute; z-index: 2; inset: 0; opacity: 0; pointer-events: none; transition: opacity .25s;
  background: radial-gradient(ellipse 62% 58% at 50% 40%, rgba(3, 6, 20, .1) 0%, rgba(3, 6, 20, .82) 100%); }
.scq[data-phase="lock"] .scq-dim, .scq[data-phase="act"] .scq-dim { opacity: 1; }

.scq-seal { position: absolute; z-index: 6; left: 0; top: 0; width: 80px; opacity: 0; pointer-events: none; transform-origin: 50% 93%; }
.scq-seal svg { display: block; width: 100%; height: auto; overflow: visible; }
.scq-seal-in { transform-origin: 50% 93%; }
.scq-seal.is-hover .scq-seal-in { animation: scq-wobble .2s ease-in-out infinite alternate; }

.scq-plus { position: absolute; z-index: 9; margin: -.6em 0 0 -1em; font-size: clamp(20px, 5.2cqh, 36px); font-weight: 800; color: var(--gold); pointer-events: none;
  text-shadow: 0 2px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink), 2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink); }

/* ── две плашки ответа ── */
.scq-ctrl { position: absolute; z-index: 5; left: 0; right: 0; bottom: 8.5%; display: flex; justify-content: center; gap: 3cqw; transition: opacity .2s; }
.scq-ctrl.is-off { opacity: 0; pointer-events: none; }
.scq-btn { --c: var(--fire); --c2: var(--fire-dk); position: relative; display: flex; align-items: center; gap: .55em; min-width: 23cqw; padding: .5em .9em .55em .7em; text-align: left;
  border: 1.5px solid var(--edge); border-radius: 18px; background: var(--c); color: #fff8e6; font-size: clamp(16px, 2.8cqw, 30px); font-weight: 800; line-height: 1.05;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 .14em 0 0 var(--c2), 0 .5em 1em -.4em rgba(0, 0, 0, .55); transition: transform .08s, box-shadow .08s, background-color .15s, opacity .2s, filter .2s; }
.scq-btn.yes { --c: var(--jade); --c2: var(--jade-dk); }
.scq-btn:hover, .scq-btn.is-peek { filter: brightness(1.09); }
.scq-btn:active, .scq-btn.is-down { transform: translateY(.1em); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 .04em 0 0 var(--c2), 0 .3em .6em -.3em rgba(0, 0, 0, .5); }
.scq-btn:disabled { cursor: default; }
.scq-btn svg { flex: none; width: 1.5em; height: 1.9em; }
.scq-btn-t { display: grid; gap: .18em; }
.scq-btn-t small { font-size: .56em; font-weight: 700; white-space: nowrap; }
.scq-btn-t small .scq-zhd { font-size: 1.55em; }
.scq-btn kbd { margin-left: auto; padding: .15em .45em; border-radius: 6px; border: 2px solid rgba(255, 255, 255, .55); font: 700 .5em/1.2 Manrope, system-ui, sans-serif; opacity: .85; }
@media not ((hover: hover) and (pointer: fine)) { .scq-btn kbd { display: none; } }
.scq-btn.is-dim { opacity: .45; filter: saturate(.5); }
.scq-btn.is-lock { --c: var(--lock); --c2: var(--lock-dk); color: var(--ink); animation: scq-lockpulse .3s ease-in-out infinite alternate; }
.scq-btn.is-lock kbd { border-color: rgba(59, 26, 16, .5); }
.scq-btn.is-right { --c: #14b87a; --c2: #0a7a50; }
.scq-btn.is-wrong { --c: #7d8499; --c2: #4f566b; }

/* ── слова Лун-луна после ответа ── */
.scq-verdict { --vw: min(56cqw, 600px); position: absolute; z-index: 8; left: 53%; bottom: 5%; width: var(--vw); margin-left: calc(var(--vw) / -2); display: grid;
  grid-template-columns: auto 1fr auto; align-items: center; gap: .3em 1em; padding: .85em 1em .9em; background: var(--cream); color: var(--ink);
  border: 1.5px solid var(--edge); border-radius: 20px; box-shadow: 0 14px 30px -12px rgba(4, 6, 20, .6); font-size: clamp(13px, 1.8cqw, 17px); font-weight: 600; line-height: 1.35; }
.scq-verdict::before { content: ""; position: absolute; right: 100%; top: 38%; border: 9px solid transparent; border-right-color: var(--ink); }
.scq-v-ico { width: 2.5em; height: 2.5em; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--edge); color: #fff; background: #7d8499; }
.scq-verdict.ok .scq-v-ico { background: #14b87a; }
.scq-v-ico svg { width: 1.35em; height: 1.35em; }
.scq-v-zh { font-weight: 800; }
.scq-v-zh b { margin-right: .3em; font: 400 1.75em/1 var(--zh-display); color: var(--red); vertical-align: -.08em; }
.scq-verdict.ok .scq-v-zh b { color: #0c8a5c; }
.scq-v-txt { margin-top: .2em; }
.scq-v-txt strong { font-weight: 800; }
.scq-v-txt .scq-zh { font-size: 1.12em; font-weight: 700; }

.scq-next, .scq-go, .scq-again, .scq-done { position: relative; overflow: hidden; padding: .7em 1.3em; border-radius: 13px; border: 1.5px solid var(--edge); background: #e11d48; color: #fff;
  font-weight: 800; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 0 #9f1239, 0 8px 18px -8px rgba(225, 29, 72, .55); transition: transform .08s, box-shadow .08s, filter .15s; }
.scq-next:hover, .scq-go:hover, .scq-again:hover, .scq-done:hover { filter: brightness(1.08); }
.scq-next:active, .scq-go:active, .scq-again:active, .scq-done:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 0 #9f1239; }
.scq-next i { position: absolute; left: 0; bottom: 0; width: 0; height: 5px; background: rgba(255, 255, 255, .85); }
.scq-again.is-ghost { background: var(--cream); color: var(--ink); box-shadow: inset 0 1px 0 #fff, 0 2px 0 #c9a970, 0 8px 16px -10px rgba(0, 0, 0, .4); }

/* ── заставка и итог ── */
.scq-intro, .scq-result { position: absolute; z-index: 10; background: var(--cream); color: var(--ink); border: 1.5px solid var(--edge); border-radius: 26px;
  box-shadow: 0 8px 0 rgba(4, 6, 20, .45); font-size: clamp(13px, 1.8cqw, 17px); }
.scq-intro { left: 28%; right: 28%; top: 15%; bottom: 8%; display: grid; place-content: center; justify-items: center; gap: 1.5cqh; padding: 2cqh 2.5cqw; text-align: center; }
.scq-eyebrow { margin: 0; font-size: .76em; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #a3743a; }
.scq-title { margin: 0; font-size: clamp(46px, 15cqh, 100px); line-height: 1; color: var(--red); }
.scq-sub { margin: 0; font-size: 1.05em; font-weight: 700; color: var(--soft); }
.scq-rules { margin: .5em 0 .3em; padding: 0; list-style: none; display: grid; gap: .6em; text-align: left; font-weight: 700; }
.scq-rules li { display: flex; align-items: center; gap: .7em; }
.scq-rules svg { flex: none; width: 1.7em; height: 2.1em; }
.scq-rules .scq-zhd { font-size: 1.4em; line-height: 1; color: var(--jade-dk); }
.scq-go { font-size: 1.15em; padding: .7em 2.2em; }

.scq-result { left: 24%; right: 24%; top: 12%; bottom: 4%; display: flex; flex-direction: column; gap: 1.5cqh; padding: 2.2cqh 2.2cqw 2.6cqh; }
.scq-r-head { text-align: center; font-weight: 700; color: var(--soft); }
.scq-r-head b { display: block; font-size: clamp(32px, 9cqh, 58px); line-height: 1.05; color: var(--red); }
.scq-r-head p { margin: .3em 0 0; font-size: .9em; }
.scq-r-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1cqw; text-align: center; }
.scq-r-stats div { padding: .45em .3em .5em; border-radius: 12px; background: #ffe9bd; }
.scq-r-stats b { display: block; font-size: 1.55em; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.scq-r-stats b small { font-size: .55em; font-weight: 700; }
.scq-r-stats span { font-size: .78em; font-weight: 700; color: var(--soft); }
.scq-r-list { flex: 1; min-height: 0; overflow-y: auto; margin: 0; padding: 0 2px 16px 0; list-style: none; display: grid; align-content: start; gap: .35em; -webkit-user-select: text; user-select: text;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 18px), transparent); mask-image: linear-gradient(#000 calc(100% - 18px), transparent); }
.scq-r-list li { display: grid; grid-template-columns: auto 1fr auto; gap: .6em; align-items: start; padding: .45em .6em; border-radius: 10px; background: #fffaf0; font-size: .9em; font-weight: 600; line-height: 1.3; }
.scq-r-list li > i { width: 1.4em; height: 1.4em; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #14b87a; }
.scq-r-list li.no > i { background: #c23a3a; }
.scq-r-list li > i svg { width: .85em; height: .85em; }
.scq-r-list .scq-zh { font-weight: 700; color: var(--red); }
.scq-r-list small { display: block; margin-top: .15em; font-size: .92em; font-weight: 500; color: var(--soft); }
.scq-r-list small .scq-zh { color: inherit; }
.scq-r-list em { padding-top: .1em; font-style: normal; font-size: .8em; font-weight: 800; color: #8a6a4a; white-space: nowrap; }
.scq-r-btns { display: flex; flex-wrap: wrap; gap: .8em; justify-content: center; }
.scq-r-perfect { margin: 0; text-align: center; font-weight: 800; color: #b9770a; }
.scq-r-perfect .scq-zhd { margin-right: .35em; font-size: 1.4em; color: var(--red); }
.scq-r-pearls { margin: 0; text-align: center; font-size: .9em; font-weight: 700; color: var(--soft); }
.scq-r-game { margin: 0; text-align: center; font-size: .9em; font-weight: 700; color: var(--soft); }   /* «За эту игру — N», когда счётчик сцены продолжает счёт урока */

/* ── лавка: подсказка за жемчуг, наряд Лун-луна, украшения сцены ── */
.scq-hintbtn { height: 2.1em; padding: 0 .65em; display: inline-flex; align-items: center; gap: .25em; border-radius: 99px; border: 1.5px solid var(--edge); background: var(--gold); color: var(--ink); font-weight: 800; font-size: .85em; white-space: nowrap; }
.scq-hintbtn:disabled { opacity: .6; cursor: default; }
/* Гирлянда (лавка; владелец 11.10: «верни, но в виде красивых огоньков»): .scq-lights строит движок при классе
   scq-deco-garland — лампочки висят на той же верёвке, что фонарики-прогресс, только по краям (12.10: между фонариками
   мешались); left/top каждой лампочки ставит layoutRope(); четыре тёплых цвета, мерцают по очереди только прозрачностью
   (никаких transform — прежние вымпелы с покачиванием владелец назвал кривыми); под HUD (вставляется перед .scq-hud) */
.scq-lights { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.scq-bulb { position: absolute;
  width: 7px; height: 10px; margin-left: -3.5px; border-radius: 50% 50% 55% 55% / 45% 45% 60% 60%; background: var(--c);
  box-shadow: 0 0 6px 2px var(--c), 0 0 16px 5px color-mix(in srgb, var(--c) 45%, transparent);
  animation: scq-twinkle 2.3s ease-in-out calc(var(--i) * -.41s) infinite alternate; }
.scq-bulb::before { content: ""; position: absolute; left: 50%; top: -4px; width: 3px; height: 5px; margin-left: -1.5px; background: #3b2a1a; border-radius: 1px; }
.scq-bulb:nth-child(4n+1) { --c: #fff0b3; } .scq-bulb:nth-child(4n+2) { --c: #ff6a5b; } .scq-bulb:nth-child(4n+3) { --c: #ffd166; } .scq-bulb:nth-child(4n+4) { --c: #7fe3c4; }
@keyframes scq-twinkle { from { opacity: .4; } to { opacity: 1; } }
/* Нефритовый свиток (лавка; владелец 11.10: «валики заметнее»): валики шире, с резьбой и бликом, свечение; золотые
   навершия крупнее; у бумаги нефритовая кайма с золотой нитью (золотой и верный свиток свою кайму сохраняют —
   у их правил специфичность выше) */
.scq-deco-jade_scroll .scq-roll { width: max(6.5%, 22px); border-radius: 11px;
  background:
    repeating-linear-gradient(-55deg, rgba(255, 255, 255, 0) 0 5px, rgba(255, 255, 255, .14) 5px 7px),
    linear-gradient(90deg, #156b50 0 18%, #2fa883 30% 48%, #8fe0c2 54%, #2fa883 62%, #156b50 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18), 0 0 18px 2px rgba(47, 168, 131, .55); }
.scq-deco-jade_scroll .scq-roll::before, .scq-deco-jade_scroll .scq-roll::after { width: 92%; margin-left: -46%; height: 8%; border-radius: 6px;
  background: linear-gradient(180deg, #fff1b3, #ffc83d 45%, #c99212); box-shadow: 0 0 10px rgba(255, 200, 61, .75); }
.scq-deco-jade_scroll .scq-roll::before { top: -7%; } .scq-deco-jade_scroll .scq-roll::after { bottom: -7%; }
.scq-deco-jade_scroll .scq-paper { box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 8px #2fa883, inset 0 0 0 10px rgba(255, 200, 61, .7); }

.scq-fx { position: absolute; z-index: 20; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ── «⚡ быстрее» и «Фонарики»: варианты ответа на верёвке ── */
.scq-fast { width: 2.1em; height: 2.1em; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--edge); background: rgba(9, 17, 41, .72); color: var(--cream); }
.scq-fast svg { width: 1.1em; height: 1.1em; }
.scq-fast[aria-pressed="true"] { background: var(--gold); color: var(--ink); }
.scq[data-kind="mc"] .scq-dragon { --x: 14%; }
.scq[data-kind="mc"] .scq-scrollwrap { cursor: default; }
.scq-lts { position: absolute; z-index: 5; left: 20%; right: 20%; bottom: 6%; display: flex; justify-content: center; align-items: flex-start; gap: 2.4cqw; transition: opacity .2s; }
.scq-lts.is-off { opacity: 0; pointer-events: none; }
/* Фонарик «Варианты ответов» (владелец 12.10: «чтобы реально похожи на фонарики», потом «более похожими на оригинал»):
   тот же фонарик, что фонарики-прогресс .scq-lan из его HTML, только крупнее — вытянутый овал 1:1.08 с обводкой тушью,
   плоская золотая крышка с обводкой сверху, узкий воротник снизу, широкие тёмные рёбра, тёплое свечение изнутри и тень по
   бокам, золотая нить с узлом и красной кистью. Слова не ломаются посреди (overflow-wrap: normal) — кегль подбирает
   fitLanterns() в движке по настоящей ширине текста (Range), пока текст не влезет в контентную область и в 62% высоты
   овала (в этой полосе ширина эллипса ≥ 78% — углы текста внутри линии); не влезло при 10 px — перенос по буквам. */
.scq-lt { --c: #d8232a; --c2: #8a0b20; --cap: #d9982f; --cap2: #a8731a; position: relative; flex: 1 1 0; min-width: 0; max-width: 18cqw; display: flex; flex-direction: column; align-items: center; padding: 0; border: 0; background: none;
  color: #fff8ea; transform-origin: 50% 0; animation: scq-sway 3.6s ease-in-out calc(var(--i) * -.55s) infinite alternate; transition: opacity .2s, filter .2s; }
.scq-lt::before { content: ""; position: absolute; left: -1.3cqw; right: -1.3cqw; top: 0; border-top: 3px solid #7a4a2a; }
.scq-lt-str { display: block; width: 2px; height: 2.4cqh; min-height: 9px; background: var(--cap); }
.scq-lt-cap { display: block; width: 52%; height: 2.3cqh; min-height: 10px; box-sizing: border-box; border: 1.5px solid var(--edge); border-radius: 3px; background: var(--cap) linear-gradient(180deg, rgba(255, 255, 255, .3), transparent 55%, rgba(0, 0, 0, .2)); }
.scq-lt-cap.b { width: 38%; height: 1.5cqh; min-height: 7px; border-radius: 0 0 3px 3px; }
.scq-lt-body { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1.08; padding: .55em .9em; border: 1.5px solid var(--edge); border-radius: 48% / 46%;
  background-color: var(--c);
  background-image:
    repeating-linear-gradient(90deg, transparent 0 12%, rgba(40, 0, 8, .22) 12% 15.5%, transparent 15.5% 25%),
    linear-gradient(90deg, rgba(60, 0, 12, .5), rgba(60, 0, 12, .08) 26%, transparent 42%, transparent 58%, rgba(60, 0, 12, .08) 74%, rgba(60, 0, 12, .5)),
    radial-gradient(ellipse 58% 52% at 50% 46%, rgba(255, 170, 90, .5), rgba(255, 140, 80, .14) 55%, transparent 78%),
    linear-gradient(180deg, rgba(255, 255, 255, .14), transparent 24%, transparent 70%, rgba(0, 0, 0, .28));
  font-size: clamp(13px, 1.9cqw, 22px); font-weight: 800; line-height: 1.15; text-align: center; overflow-wrap: normal; word-break: normal; text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .12), 0 0 22px rgba(255, 110, 60, .35); transition: background-color .2s, box-shadow .3s, filter .15s, transform .1s; }
.scq-lt-t { display: block; min-width: 0; max-width: 100%; }   /* min-width: 0 — иначе grid-элемент не уже самого длинного слова и max-width не работает */
.scq-lt-t .scq-zh { font-size: 1.25em; font-weight: 700; }
.scq-lt kbd { position: absolute; left: .55em; top: .6em; padding: .1em .4em; border-radius: 5px; border: 2px solid rgba(255, 255, 255, .55); font: 700 .5em/1.2 Manrope, system-ui, sans-serif; opacity: .8; }
@media not ((hover: hover) and (pointer: fine)) { .scq-lt kbd { display: none; } }
.scq-lt-tas { position: relative; display: block; width: 2px; height: 2.4cqh; min-height: 8px; background: var(--cap); }
.scq-lt-tas::before { content: ""; position: absolute; left: 50%; top: 100%; width: 10px; height: 7px; margin-left: -5px; box-sizing: border-box; border: 1.5px solid var(--ink); border-radius: 2px; background: var(--cap); }
.scq-lt-tas::after { content: ""; position: absolute; left: 50%; top: calc(100% + 6px); width: 14px; height: 2.6cqh; min-height: 11px; margin-left: -7px; border-radius: 0 0 5px 5px; background: repeating-linear-gradient(90deg, #d2372f 0 2px, #9c1c22 2px 3px); box-shadow: inset 0 3px 0 var(--cap2); }
.scq-lt:hover .scq-lt-body { filter: brightness(1.12); transform: scale(1.03); }
.scq-lt:disabled { cursor: default; }
.scq-lt:disabled:hover .scq-lt-body { filter: none; transform: none; }
.scq-lt.is-dim { opacity: .4; filter: saturate(.4); }
.scq-lt.is-pick .scq-lt-body { --c: var(--lock); --c2: var(--lock-dk); color: var(--ink); background-image: none; text-shadow: none; animation: scq-lockpulse .3s ease-in-out infinite alternate; }
.scq-lt.is-lit { opacity: 1; filter: none; }
.scq-lt.is-lit .scq-lt-body { --c: #ff5a36; --c2: #b9770a; color: var(--ink); text-shadow: none; animation: none;
  background-image: repeating-linear-gradient(90deg, transparent 0 12%, rgba(120, 30, 0, .14) 12% 15.5%, transparent 15.5% 25%), radial-gradient(ellipse 60% 55% at 50% 45%, #ffd27a, rgba(255, 190, 90, .5) 50%, transparent 78%);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .08), 0 0 0 4px rgba(255, 190, 80, .25), 0 0 34px 8px rgba(255, 170, 60, .7); }
.scq-lt.is-ash .scq-lt-body { --c: #2f2a33; --c2: #1a171d; color: #8b8492; background-image: none; text-shadow: none; animation: none; filter: grayscale(.5); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .2); }

/* ── «Ларец»: свиток выше, ларец на земле посередине, таблички со словами (или поле ввода) внизу ── */
.scq[data-kind="detail"] .scq-scrollwrap { top: 13%; height: 30%; cursor: default; }
.scq[data-kind="detail"] .scq-dragon { --x: 14%; }
.scq-box { position: absolute; z-index: 4; left: 40%; width: 20%; top: 47%; aspect-ratio: 1.45; perspective: 700px; pointer-events: none; }
.scq-box-in { position: absolute; inset: 0; transform-style: preserve-3d; }
.scq-box-body { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; z-index: 2; border: 1.5px solid var(--edge); border-radius: 10% / 16%;
  background: linear-gradient(#a61e32, #7d0f24); box-shadow: inset 0 -.4em 0 rgba(0, 0, 0, .25), inset 0 2px 0 rgba(255, 255, 255, .12), 0 10px 22px rgba(0, 0, 0, .4); }
.scq-box-body::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12%; background: linear-gradient(#ffe38a, #d9982f); }
.scq-box-body::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 11%; margin-left: -5.5%; background: linear-gradient(90deg, #d9982f, #ffe38a, #d9982f); }
.scq-box-lid { position: absolute; left: 0; right: 0; top: 0; height: 46%; z-index: 3; border: 1.5px solid var(--edge); border-radius: 45% 45% 8% 8% / 80% 80% 12% 12%;
  background: linear-gradient(#c8102e, #9c1a2c); transform-origin: 50% 100%; box-shadow: inset 0 -.3em 0 rgba(0, 0, 0, .2), inset 0 2px 0 rgba(255, 255, 255, .12); }
.scq-box-lid::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: linear-gradient(#ffe38a, #d9982f); }
.scq-box-lid::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 11%; margin-left: -5.5%; background: linear-gradient(90deg, #d9982f, #ffe38a, #d9982f); border-radius: 40% 40% 0 0; }
.scq-box-lock { position: absolute; left: 50%; top: 38%; width: 15%; aspect-ratio: .85; margin-left: -7.5%; z-index: 4; border: 1.5px solid var(--edge); border-radius: 22%;
  background: linear-gradient(#ffe38a, #d9982f); transition: opacity .3s; }
.scq-box-lock::after { content: ""; position: absolute; left: 50%; top: 28%; width: 30%; aspect-ratio: 1; margin-left: -15%; border-radius: 50%; background: var(--ink); }
.scq-box-lock.is-jam { background: linear-gradient(#ff8a8a, #c23a3a); }
.scq-box-lock.is-open { opacity: 0; }
.scq-box-glow { position: absolute; left: 8%; right: 8%; top: 2%; height: 64%; z-index: 1; border-radius: 50%; opacity: 0; transition: opacity .4s;
  background: radial-gradient(closest-side, rgba(255, 227, 138, .95), rgba(255, 227, 138, 0)); }
.scq-box-rays { position: absolute; left: 50%; top: 40%; width: 230%; aspect-ratio: 1; z-index: 0; border-radius: 50%; opacity: 0; transition: opacity .5s;
  transform: translate(-50%, -50%); background: repeating-conic-gradient(rgba(255, 227, 138, .22) 0 9deg, rgba(255, 227, 138, 0) 9deg 24deg);
  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 100%); mask: radial-gradient(closest-side, #000 20%, transparent 100%); animation: scq-rays 14s linear infinite; }
.scq-box-in.is-open .scq-box-glow, .scq-box-in.is-open .scq-box-rays { opacity: 1; }
.scq-box-word { position: absolute; left: 50%; top: 30%; z-index: 6; padding: .25em .7em .3em; border: 1.5px solid var(--edge); border-radius: 12px; white-space: nowrap; text-align: center;
  background: linear-gradient(#fff6c9, #ffd98a); color: var(--ink); opacity: 0; transform: translate(-50%, 30%) scale(.3); font-size: clamp(14px, 2cqw, 24px);
  box-shadow: 0 0 0 3px rgba(255, 200, 61, .5), 0 0 24px 6px rgba(255, 200, 61, .6); }
.scq-box-word .scq-pl-hz, .scq-box-word .scq-pl-hz .scq-zh { display: block; font-size: 1.5em; font-weight: 700; color: var(--red); }
.scq-box-word .scq-pl-hz .scq-zh { display: inline; font-size: 1em; }
.scq-box-word .scq-pl-py { display: block; font-size: .72em; color: var(--soft); }
.scq-pls { position: absolute; z-index: 5; left: 26%; right: 26%; bottom: 7%; display: flex; justify-content: center; align-items: stretch; gap: 1.8cqw; transition: opacity .2s; }
.scq-pls.is-off, .scq-type.is-off { opacity: 0; pointer-events: none; }
.scq-pl { --c: #2a8c6f; --c2: #16604a; position: relative; flex: 1 1 0; min-width: 0; max-width: 15cqw; padding: 0; border: 0; background: none; color: #fff6e3; transition: opacity .2s, filter .2s; }
.scq-pl-in { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1em; width: 100%; height: 100%; min-height: 13cqh; padding: .55em .5em .5em;
  border: 1.5px solid var(--edge); border-radius: 14px; background: linear-gradient(170deg, #35a283, var(--c) 55%, #1f7a5e); font-size: clamp(13px, 1.9cqw, 22px); line-height: 1.15; text-align: center; overflow-wrap: anywhere;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .08), inset 0 -.3em 0 rgba(0, 0, 0, .2), 0 .25em 0 var(--c2); transition: background-color .2s, box-shadow .3s, filter .15s, transform .1s; }
.scq-pl-in::before { content: ""; position: absolute; left: 50%; top: -3px; width: 10px; height: 11px; margin-left: -5px; border-radius: 0 0 5px 5px; background: #d2372f; }
.scq-pl-hz { font-weight: 700; font-size: 1.35em; }
.scq-pl-hz .scq-zh { color: #fff6c9; }
.scq-pl-py { font-family: var(--py); font-weight: 600; font-size: .72em; opacity: .85; }
.scq-pl kbd { position: absolute; left: .5em; top: .45em; padding: .1em .4em; border-radius: 5px; border: 2px solid rgba(255, 255, 255, .5); font: 700 .5em/1.2 Manrope, system-ui, sans-serif; opacity: .8; }
@media not ((hover: hover) and (pointer: fine)) { .scq-pl kbd { display: none; } }
.scq-pl:hover .scq-pl-in { filter: brightness(1.1); transform: translateY(-3px); }
.scq-pl:disabled { cursor: default; }
.scq-pl:disabled:hover .scq-pl-in { filter: none; transform: none; }
.scq-pl.is-dim { opacity: .4; filter: saturate(.4); }
.scq-pl.is-pick .scq-pl-in { background: var(--lock); --c2: var(--lock-dk); color: var(--ink); animation: scq-lockpulse .3s ease-in-out infinite alternate; }
.scq-pl.is-pick .scq-pl-hz .scq-zh { color: var(--ink); }
.scq-pl.is-wrong .scq-pl-in { --c2: #2b2530; background: linear-gradient(#5a5260, #3a343f); color: #b4aebd; animation: none; }
.scq-pl.is-wrong .scq-pl-hz .scq-zh { color: #d7d2dd; }
.scq-pl.is-right { opacity: 1; filter: none; }
.scq-pl.is-right .scq-pl-in { --c2: #b9770a; background: linear-gradient(#ffe38a, #ffb21e); color: var(--ink); animation: none;
  box-shadow: 0 0 0 4px rgba(255, 200, 61, .45), 0 0 30px 6px rgba(255, 170, 60, .7), 0 .25em 0 var(--c2); }
.scq-pl.is-right .scq-pl-hz .scq-zh { color: var(--red); }
.scq-pl-fly { pointer-events: none; }
.scq-pl-fly .scq-pl-in { min-height: 0; }
.scq-type { position: absolute; z-index: 5; left: 25%; right: 25%; bottom: 8.5%; display: flex; gap: 1cqw; transition: opacity .2s; }
.scq-type-in { flex: 1; min-width: 0; padding: .45em .9em; border: 1.5px solid var(--edge); border-radius: 14px; background: var(--cream); color: var(--ink);
  font: 700 clamp(16px, 2.2cqw, 24px) / 1.2 var(--zh-text); -webkit-user-select: text; user-select: text; box-shadow: inset 0 3px 0 rgba(0, 0, 0, .08); }
.scq-type-in:focus { outline: 3px solid var(--gold); outline-offset: 2px; }
.scq-type-in::placeholder { color: #a3743a; font-weight: 600; font-size: .8em; font-family: Manrope, system-ui, sans-serif; }
.scq-type-go { padding: .45em 1.2em; border: 1.5px solid var(--edge); border-radius: 14px; background: var(--jade); color: #fff8e6; font-weight: 800; white-space: nowrap;
  font-size: clamp(14px, 1.9cqw, 20px); box-shadow: 0 .25em 0 var(--jade-dk); transition: transform .08s, box-shadow .08s; }
.scq-type-go:active { transform: translateY(.15em); box-shadow: 0 .1em 0 var(--jade-dk); }
.scq-type-go:disabled, .scq-type-in:disabled { opacity: .75; cursor: default; }
.scq-type.is-right .scq-type-in { border-color: #0c8a5c; box-shadow: 0 0 0 3px rgba(20, 184, 122, .4); }
.scq-type.is-wrong .scq-type-in { border-color: #c23a3a; box-shadow: 0 0 0 3px rgba(194, 58, 58, .35); text-decoration: line-through; }

/* ── «Мост»: пропуск в предложении на свитке, река с мостом без доски, банк досок-слов внизу ── */
.scq[data-kind="fill"] .scq-scrollwrap { top: 13%; height: 30%; cursor: default; }
.scq[data-kind="fill"] .scq-dragon { --x: 14%; }
.scq-gap { display: inline-block; min-width: 2.4em; margin: 0 .15em; padding: 0 .3em; border: 2px dashed #a3743a; border-radius: 8px; line-height: 1.25; text-align: center; color: var(--red); vertical-align: baseline;
  transition: border-color .2s, background-color .2s; }
.scq-gap:empty::after { content: "\00a0"; }
.scq-gap.is-ok { border-style: solid; border-color: #d9982f; background: rgba(255, 227, 138, .6); }
.scq-gap.is-bad { border-style: solid; border-color: #c23a3a; background: rgba(194, 58, 58, .12); color: #c23a3a; text-decoration: line-through; }
.scq-river { position: absolute; z-index: 2; left: 24%; right: 24%; top: 47%; height: 19%; border-radius: 14px; overflow: hidden; }
.scq-water { position: absolute; inset: 0; background: linear-gradient(180deg, #1a3a6e, #0f2650 60%, #0b1b3a); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .08); }
.scq-water::before { content: ""; position: absolute; inset: 0; opacity: .7; background: repeating-linear-gradient(180deg, transparent 0 14px, rgba(255, 255, 255, .07) 14px 16px); animation: scq-ripple 4s linear infinite; }
.scq-water::after { content: ""; position: absolute; right: 16%; top: 8%; width: 24%; height: 70%; background: radial-gradient(ellipse at center, rgba(255, 231, 173, .35), transparent 70%); }
.scq-bridge { position: absolute; left: 3%; right: 3%; top: 24%; height: 36%; display: flex; align-items: stretch; gap: 2px; }
.scq-post { flex: 0 0 4%; border: 1.5px solid var(--edge); border-radius: 4px; background: #6b3118; }
.scq-plank { flex: 1 1 0; min-width: 0; display: grid; place-items: center; border: 1.5px solid var(--edge); border-radius: 5px; overflow: hidden;
  background: linear-gradient(#a6582c, #7d3d1e); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25); color: var(--ink); font-size: clamp(11px, 1.5cqw, 17px); font-weight: 700; }
.scq-plank.is-gap { background: rgba(5, 10, 30, .55); border-style: dashed; border-color: #d9982f; box-shadow: none; }
.scq-plank.is-filled { background: linear-gradient(#ffe38a, #ffb21e); box-shadow: 0 0 0 3px rgba(255, 200, 61, .4), 0 0 20px 4px rgba(255, 170, 60, .6); }
.scq-plank b { font-weight: 700; white-space: nowrap; }
.scq-bank { position: absolute; z-index: 5; left: 24%; right: 24%; bottom: 7%; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2cqh 1.4cqw; transition: opacity .2s; }
.scq-bank.is-off { opacity: 0; pointer-events: none; }
.scq-wd { --c2: #5a2a12; position: relative; flex: 0 1 auto; min-width: 7.5cqw; padding: .45em 1em .5em; border: 1.5px solid var(--edge); border-radius: 10px; color: #fff6c9;
  background: linear-gradient(#a6582c, #7d3d1e); font-size: clamp(14px, 1.9cqw, 22px); font-weight: 800; line-height: 1.15; text-align: center;
  box-shadow: inset 0 -.25em 0 rgba(0, 0, 0, .25), 0 .25em 0 var(--c2); transition: transform .1s, filter .15s, opacity .2s; }
.scq-wd::before, .scq-wd::after { content: ""; position: absolute; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--ink); opacity: .7; }
.scq-wd::before { left: 6px; } .scq-wd::after { right: 6px; }
.scq-wd .scq-zh { font-size: 1.2em; }
.scq-wd kbd { position: absolute; left: .45em; top: -.55em; padding: .05em .35em; border-radius: 5px; border: 1.5px solid var(--edge); background: var(--cream); color: var(--ink); font: 700 .5em/1.2 Manrope, system-ui, sans-serif; }
@media not ((hover: hover) and (pointer: fine)) { .scq-wd kbd { display: none; } }
.scq-wd:hover { filter: brightness(1.1); transform: translateY(-3px); }
.scq-wd:disabled { cursor: default; }
.scq-wd:disabled:hover { filter: none; transform: none; }
.scq-wd.is-pick { --c2: var(--lock-dk); background: var(--lock); color: var(--ink); animation: scq-lockpulse .3s ease-in-out infinite alternate; }
.scq-wd.is-pick .scq-zh, .scq-wd.is-right .scq-zh { color: var(--ink); }
.scq-wd.is-wrong { --c2: #2b1010; background: linear-gradient(#7a3a3a, #4a1f1f); color: #e3b5b5; animation: none; }
.scq-wd.is-right { --c2: #b9770a; background: linear-gradient(#ffe38a, #ffb21e); color: var(--ink); animation: none; box-shadow: 0 0 0 4px rgba(255, 200, 61, .45), 0 0 26px 6px rgba(255, 170, 60, .7), 0 .25em 0 var(--c2); }
.scq-wd.is-used { opacity: .35; filter: saturate(.3); }
.scq-wd-fly { pointer-events: none; display: grid; place-items: center; }
.scq-wd-fly kbd { display: none; }
.scq-sink-mask { position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; pointer-events: none; z-index: 3; }   /* «под водой»: тонущая доска ниже линии воды не видна */
.scq-r-list .scq-fillw { padding: 0 .2em; border-radius: 4px; background: rgba(255, 227, 138, .7); color: var(--red); font-weight: 700; }

/* ── «Бусы»: нить с бусинами на свитке, лоток бусин-слов внизу ── */
.scq[data-kind="beads"] .scq-scrollwrap { top: 12%; height: 38%; cursor: default; }
.scq[data-kind="beads"] .scq-dragon { --x: 14%; }
.scq[data-kind="beads"] .scq-q { width: 100%; max-width: none; }
.scq-cord { position: relative; display: block; min-height: 2.8em; padding: .3em .5em; }
.scq-cord::before { content: ""; position: absolute; left: 1%; right: 1%; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: #b3122f; }
.scq-cord.is-snap::before { right: 50%; transform-origin: left center; animation: scq-cord-snap-l .6s cubic-bezier(.2, .8, .3, 1) forwards; }   /* разрыв: половинки отскакивают и провисают */
.scq-cord.is-snap::after { content: ""; position: absolute; left: 50%; right: 1%; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: #b3122f;
  transform-origin: right center; animation: scq-cord-snap-r .6s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes scq-cord-snap-l { 0% { transform: scaleX(1); } 25% { transform: scaleX(1.04) rotate(-1.5deg); } 100% { transform: scaleX(.58) rotate(5deg); } }
@keyframes scq-cord-snap-r { 0% { transform: scaleX(1); } 25% { transform: scaleX(1.04) rotate(1.5deg); } 100% { transform: scaleX(.58) rotate(-5deg); } }
@media (prefers-reduced-motion: reduce) { .scq-cord.is-snap::before, .scq-cord.is-snap::after { animation: none; transform: scaleX(.58); } }
.scq-cord.is-tied::before { background: #d9982f; box-shadow: 0 0 8px rgba(255, 200, 61, .7); }
.scq-cord.is-tied::after { content: "❀"; position: absolute; right: -.25em; top: 50%; transform: translateY(-52%); font-size: 1.1em; line-height: 1; color: #d9982f; }
.scq-strung { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .3em .35em; min-height: 2.2em; }
.scq-bead { --c: #2a8c6f; --c2: #16604a; position: relative; display: inline-grid; place-items: center; min-width: 2.4em; padding: .32em .75em .38em; border: 1.5px solid var(--edge); border-radius: 999px;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .5), transparent 44%), var(--c); color: #fff6e3; font-size: 1em; font-weight: 800; line-height: 1.1; white-space: nowrap;
  box-shadow: inset 0 -.2em 0 rgba(0, 0, 0, .2), 0 .18em 0 var(--c2); transition: transform .1s, filter .15s, opacity .2s, background-color .2s; }
.scq-bead.c1 { --c: #e8452c; --c2: #9c2413; }
.scq-bead.c2 { --c: #f0a500; --c2: #a86a0a; color: var(--ink); }
.scq-bead.c3 { --c: #5b7fd6; --c2: #2f4f9e; }
.scq-bead .scq-zh { font-size: 1.15em; font-weight: 700; }
.scq-bead kbd { position: absolute; left: -.35em; top: -.65em; padding: .05em .35em; border-radius: 5px; border: 1.5px solid var(--edge); background: var(--cream); color: var(--ink); font: 700 .5em/1.2 Manrope, system-ui, sans-serif; }
@media not ((hover: hover) and (pointer: fine)) { .scq-bead kbd { display: none; } }
.scq-bead:hover { filter: brightness(1.1); transform: translateY(-2px); }
.scq-bead:disabled { cursor: default; }
.scq-bead:disabled:hover { filter: none; transform: none; }
.scq-bead.is-out, .scq-bead.is-ghost { visibility: hidden; }
.scq-strung .scq-bead { font-size: .92em; }
.scq-strung .scq-bead kbd { display: none; }
.scq-bead.is-lit, .scq-bead.is-fix { --c: #ffd98a; --c2: #b9770a; color: var(--ink); box-shadow: 0 0 0 3px rgba(255, 200, 61, .4), 0 0 16px 3px rgba(255, 170, 60, .6), 0 .18em 0 var(--c2); }
.scq-bead.is-bad { --c: #6b6470; --c2: #3a343f; color: #d7d2dd; filter: saturate(.3); }
.scq-bead-fly { pointer-events: none; }
.scq-bead-fly kbd { display: none; }
.scq-ans { color: var(--red); font-weight: 800; }
.scq-tray { position: absolute; z-index: 5; left: 20%; right: 20%; bottom: 7%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.4cqh 1.1cqw; font-size: clamp(14px, 1.9cqw, 22px); transition: opacity .2s; }
.scq-tray.is-off { opacity: 0; pointer-events: none; }
.scq-check { position: absolute; z-index: 2; left: 50%; bottom: 4%; transform: translateX(-50%); padding: .4em 1.3em .45em; border: 1.5px solid var(--edge); border-radius: 12px; background: var(--jade); color: #fff8e6;
  font-weight: 800; font-size: clamp(13px, 1.7cqw, 18px); white-space: nowrap; box-shadow: 0 .22em 0 var(--jade-dk); transition: filter .15s; }
.scq-check:hover { filter: brightness(1.08); }
.scq-r-list small .scq-zh { color: inherit; }

/* ── телефон: всё в столбик ── */
@container scq (orientation: portrait) {
  .scq-world { --imp: 11.5cqh; }
  .scq-hud { grid-template-columns: 1fr 1fr; row-gap: 1.3cqh; padding: 1.8cqh 3.5cqw 0; font-size: clamp(13px, 3.9cqw, 17px); }
  .scq-streak { grid-row: 1; }
  .scq-right { grid-column: 2; grid-row: 1; }
  .scq-lans { --ls: clamp(18px, 6.6cqw, 28px); grid-column: 1 / -1; grid-row: 2; }
  .scq-moon { top: 16%; right: 6%; }
  .scq-dragon { --x: 21%; --b: 15.5%; --h: 34cqh; }
  .scq-guest { --x: 80%; --b: 15.5%; --h: 30cqh; }
  .scq[data-phase="load"] .scq-actor, .scq[data-phase="intro"] .scq-actor { --b: 3.5%; }
  .scq-bubble { display: none; }
  .scq-scrollwrap { left: 4%; width: 92%; top: 15%; height: 33%; }
  .scq-q { font-size: clamp(15px, 4.9cqw, 21px); }
  .scq-ctrl { left: 4%; right: 4%; bottom: 2.6%; }
  .scq-btn { flex: 1; min-width: 0; padding: .55em .6em .6em; border-radius: 16px; font-size: clamp(16px, 5.4cqw, 22px); }
  .scq-verdict { left: 4%; right: 4%; bottom: 2.6%; width: auto; margin-left: 0; grid-template-columns: auto 1fr; font-size: clamp(13px, 3.8cqw, 16px); }
  .scq-verdict::before { right: auto; left: 12%; top: auto; bottom: 100%; border-right-color: transparent; border-bottom-color: var(--ink); }
  .scq-next { grid-column: 1 / -1; }
  .scq-intro, .scq-result { font-size: clamp(13px, 3.9cqw, 16px); }
  .scq-intro { left: 5%; right: 5%; top: 14%; bottom: 40.5%; gap: 1.1cqh; padding: 1.4cqh 4cqw; }
  .scq-title { font-size: clamp(44px, 16cqw, 70px); }
  .scq-rules { margin: .2em 0 .1em; gap: .35em; }
  .scq-result { left: 4%; right: 4%; top: 12.5%; bottom: 2.5%; padding: 1.8cqh 3.5cqw 2cqh; gap: 1.2cqh; }
  .scq-r-stats { gap: 2cqw; }
  .scq-lts { left: 4%; right: 4%; bottom: 3%; display: grid; grid-template-columns: 1fr 1fr; justify-items: center; gap: 1.5cqh 2cqw; }   /* владелец 12.10: «в мобильной версии не плющи» — те же овалы 2×2 */
  .scq-lt { max-width: none; width: 38cqw; }
  .scq-lt::before { left: -4cqw; right: -4cqw; }
  .scq-lt-str { height: 1.3cqh; min-height: 6px; }
  .scq-lt-cap { height: 1.4cqh; min-height: 8px; }
  .scq-lt-cap.b { height: 1cqh; min-height: 5px; }
  .scq-lt-body { aspect-ratio: 1 / 1.06; padding: .5em .8em; font-size: clamp(14px, 4.6cqw, 18px); }
  .scq-lt-tas { height: 1.2cqh; min-height: 6px; }
  .scq-lt-tas::after { height: 1.4cqh; min-height: 8px; }
  .scq[data-kind="mc"] .scq-scrollwrap { top: 11%; height: 20%; }
  .scq[data-kind="mc"] .scq-dragon { --x: 10%; --b: 57.5%; --h: 11cqh; }   /* два ряда овальных фонариков занимают низ — Лун-лун маленький слева над ними */
  .scq[data-kind="mc"] .scq-guest { display: none; }
  .scq[data-kind="mc"][data-phase="load"] .scq-guest, .scq[data-kind="mc"][data-phase="intro"] .scq-guest, .scq[data-kind="mc"][data-phase="result"] .scq-guest { display: block; }
  .scq[data-kind="mc"][data-phase="load"] .scq-actor, .scq[data-kind="mc"][data-phase="intro"] .scq-actor, .scq[data-kind="mc"][data-phase="result"] .scq-actor { --b: 3.5%; }
  .scq[data-kind="mc"][data-phase="load"] .scq-dragon, .scq[data-kind="mc"][data-phase="intro"] .scq-dragon, .scq[data-kind="mc"][data-phase="result"] .scq-dragon { --x: 21%; --h: 34cqh; }
  .scq[data-kind="detail"] .scq-scrollwrap { top: 14%; height: 25%; }
  .scq[data-kind="detail"] .scq-dragon { --x: 24%; --b: 31%; --h: 26cqh; }
  .scq[data-kind="detail"] .scq-guest { display: none; }
  .scq[data-kind="detail"][data-phase="load"] .scq-guest, .scq[data-kind="detail"][data-phase="intro"] .scq-guest, .scq[data-kind="detail"][data-phase="result"] .scq-guest { display: block; }
  .scq[data-kind="detail"][data-phase="load"] .scq-actor, .scq[data-kind="detail"][data-phase="intro"] .scq-actor { --b: 3.5%; }
  .scq-box { left: 54%; width: 40%; top: auto; bottom: 31%; }
  .scq-pls { left: 4%; right: 4%; bottom: 2.6%; display: grid; grid-template-columns: 1fr 1fr; gap: 1cqh 3cqw; }
  .scq-pl { max-width: none; }
  .scq-pl-in { min-height: 6.5cqh; padding: .4em .5em; font-size: clamp(14px, 4.2cqw, 20px); }
  .scq-type { left: 4%; right: 4%; bottom: 2.6%; }
  .scq-type-in { font-size: clamp(16px, 5cqw, 22px); }
  .scq-type-go { font-size: clamp(14px, 4.2cqw, 18px); padding: .45em .9em; }
  .scq[data-kind="fill"] .scq-scrollwrap { top: 13%; height: 23%; }
  .scq[data-kind="fill"] .scq-dragon { --x: 15%; --b: 40%; --h: 20cqh; }
  .scq[data-kind="fill"] .scq-guest { --x: 85%; --b: 40%; --h: 17cqh; }
  .scq[data-kind="fill"][data-phase="load"] .scq-actor, .scq[data-kind="fill"][data-phase="intro"] .scq-actor { --b: 3.5%; }
  .scq-river { left: 19%; right: 19%; top: 44%; height: 15%; }
  .scq-bridge { left: 2%; right: 2%; }
  .scq-plank:nth-child(2), .scq-plank:nth-child(8) { display: none; }
  .scq-plank.is-gap, .scq-plank.is-filled { flex: 1.8 1 0; font-size: clamp(11px, 3.4cqw, 15px); }
  .scq-bank { left: 4%; right: 4%; bottom: 2.6%; gap: 1.2cqh 2.5cqw; }
  .scq-wd { min-width: 27cqw; padding: .4em .8em .45em; font-size: clamp(14px, 4.2cqw, 19px); }
  .scq-wd kbd { display: none; }
  .scq[data-kind="beads"] .scq-scrollwrap { top: 12%; height: 33%; }
  .scq[data-kind="beads"] .scq-dragon { --x: 30%; --b: 36%; --h: 20cqh; }
  .scq[data-kind="beads"] .scq-guest { --x: 73%; --b: 36%; --h: 17cqh; }
  .scq[data-kind="beads"][data-phase="load"] .scq-actor, .scq[data-kind="beads"][data-phase="intro"] .scq-actor { --b: 3.5%; }
  .scq-tray { left: 4%; right: 4%; bottom: 2.6%; gap: 1cqh 2cqw; font-size: clamp(14px, 4.2cqw, 19px); }
  .scq-check { bottom: 3%; font-size: clamp(13px, 3.8cqw, 16px); }
}

@keyframes scq-sway { from { transform: rotate(-3.5deg); } to { transform: rotate(3.5deg); } }
@keyframes scq-rays { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes scq-ripple { from { background-position: 0 0; } to { background-position: 0 16px; } }
@keyframes scq-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, .982); } }
@keyframes scq-float { from { transform: translateY(-.5cqh); } to { transform: translateY(.5cqh); } }
@keyframes scq-twinkle { from { opacity: .45; } to { opacity: .9; } }
@keyframes scq-fly { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: .9; } 80% { opacity: .7; } 100% { transform: translate(var(--tx), var(--ty)); opacity: 0; } }
@keyframes scq-lockpulse { from { filter: brightness(1); } to { filter: brightness(1.22); } }
@keyframes scq-wobble { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes scq-sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes scq-tremble { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
@keyframes scq-nudge { 0%, 100% { transform: none; } 30% { transform: translateX(-12px) rotate(-2.5deg); } 70% { transform: translateX(12px) rotate(2.5deg); } }

@media (prefers-reduced-motion: reduce) {
  .scq-stars, .scq-fly, .scq-lan, .scq-lt, .scq-box-rays, .scq-water::before, .scq-actor-in, .scq-scrollwrap, .scq-scroll.is-nudge, .scq-bulb { animation: none !important; }
}