/* Стили типов заданий (ведёт исполнитель «Задания», см. CONTRACT.md → «Кто какие файлы ведёт»).
   Правила: зона касания ≥ 72×72 px, между зонами ≥ 16 px; без анимации, если ctx.reducedMotion (.is-rm)
   или в системе включено «уменьшить движение» (это уже есть в styles.css). */

/* --- общее --- */
/* корень задания — ячейка сетки .stage-task: min-width 0, иначе широкое содержимое растягивает колонку за экран */
.lp, .ct, .np, .dm, .sq, .tr { min-width: 0; max-width: 100%; }
.is-rm, .is-rm * { animation: none !important; transition: none !important; }
.task-label { font-size: 40px; font-weight: 700; line-height: 1.05; }
.task-label.is-long { font-size: 28px; }
.task-dots { display: block; width: 92px; color: var(--c-ink); }
.task-dots svg { display: block; width: 100%; height: auto; }
.task-ear-mini { display: grid; place-items: center; }
.task-ear-mini svg { width: 56px; height: 56px; }

/* кнопка «послушать ещё раз» */
.task-ear { width: 104px; height: 104px; border-radius: 50%; border: 3px solid var(--c-ink); background: var(--c-card); box-shadow: 0 6px 0 var(--c-ink); display: grid; place-items: center; padding: 0; color: var(--c-ink); touch-action: manipulation; }
.task-ear svg { width: 62px; height: 62px; }
.task-ear:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--c-ink); }
.task-ear.is-on { background: #fff1c9; animation: ear-on .7s infinite alternate ease-in-out; }
@keyframes ear-on { to { box-shadow: 0 6px 0 var(--c-ink), 0 0 0 10px rgba(239, 132, 51, .25); } }

/* вариант, который герой сейчас называет вслух (tap-choice, listen-pick): тёплая рамка, как у звучащего уха;
   не зелёная — зелёным отмечен верный ответ. Пульсирует только рамка: карточка не сдвигается, промежуток 16 px
   до соседей не съедается. Без анимации (.is-rm, «уменьшить движение») — только рамка. */
.choice.is-reading { position: relative; z-index: 1; border-color: #c4621c; background: #fff1c9;
  outline: 6px solid #e8711f; outline-offset: 3px; animation: reading .55s infinite alternate ease-in-out; }
@keyframes reading { to { outline-offset: 7px; } }
.is-rm .choice.is-reading { background: var(--c-card); }
@media (prefers-reduced-motion: reduce) {
  .choice.is-reading { background: var(--c-card); }
}

/* --- listen-pick --- */
.lp { display: grid; justify-items: center; gap: 24px; width: min(860px, 100%); }
.lp-choices .choice img { max-height: 140px; }

/* --- count-tap --- */
.ct { display: grid; justify-items: center; align-content: center; gap: 32px; width: min(920px, 100%); }
.ct-field { --obj: 116px; display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; max-width: calc(var(--cols) * (var(--obj) + 26px)); }
.ct-obj { position: relative; width: var(--obj); height: var(--obj); padding: 4px; border: 0; border-radius: 50%; background: none; transform: translate(var(--dx), var(--dy)); touch-action: manipulation; }
.ct-obj > img, .ct-berry, .ct-berry svg { display: block; width: 100%; height: 100%; pointer-events: none; }
.ct-obj > img, .ct-berry { transform: rotate(var(--rot)); }
.ct-obj > img { object-fit: contain; }
.ct-mark { position: absolute; right: -8px; top: -8px; min-width: 42px; height: 42px; padding: 0 6px; border-radius: 21px; background: var(--c-ink); color: #fff; font-size: 24px; font-weight: 700; display: none; place-items: center; box-shadow: 0 0 0 3px #fff; z-index: 2; }
.ct-obj.is-counted .ct-mark { display: grid; }
.ct-obj.is-counted::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 4px solid var(--c-ok); pointer-events: none; z-index: 1; }
.ct-obj.is-lit { background: #fff1c9; box-shadow: 0 0 0 6px var(--c-accent); }
.ct-obj.is-wrong > img, .ct-obj.is-wrong > .ct-berry { animation: ct-nope .5s; }
@keyframes ct-nope {
  30% { transform: rotate(calc(var(--rot) - 14deg)); }
  70% { transform: rotate(calc(var(--rot) + 14deg)); }
}
.ct-choices { width: min(560px, 100%); }
.ct-choices .choice { min-height: 112px; }

/* --- number-path: дорожка из одинаковых кочек слева направо --- */
.np { width: 100%; display: grid; place-items: center; }
.np-track { --np-cell: 88px; display: grid; grid-template-columns: repeat(var(--np-cols, 10), var(--np-cell)); column-gap: 16px; row-gap: calc(var(--np-cell) * .72); padding-top: calc(var(--np-cell) * .66); isolation: isolate; }
.np-bump { position: relative; width: var(--np-cell); height: var(--np-cell); padding: 0; border: 3px solid var(--c-ink); border-radius: 50% 50% 44% 44% / 58% 58% 42% 42%; background: radial-gradient(ellipse at 50% 30%, #c4e08c 0%, #a2c964 55%, #86b04a 100%); box-shadow: 0 6px 0 var(--c-ink); display: grid; place-items: center; touch-action: manipulation; }
.np-bump:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--c-ink); }
/* мостик-тропинка к соседней кочке в ряду (не часть зоны касания) */
.np-bump:not(.is-row-end)::after { content: ''; position: absolute; left: 100%; top: 50%; width: 16px; height: 14px; margin-left: 3px; transform: translateY(-50%); background: #d9b77a; border-block: 3px solid var(--c-ink); pointer-events: none; z-index: -1; }
.np-num { font-size: calc(var(--np-cell) * .42); font-weight: 700; color: var(--c-ink); line-height: 1; pointer-events: none; }
/* поворот дорожки между рядами (number-path.js drawTurns): та же тропинка, что мостики, — под кочками */
.np-track { position: relative; }
.np-turns { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: -1; pointer-events: none; }
.np-turns-svg { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; }
.np-turn-edge, .np-turn-road { fill: none; stroke-linejoin: round; }
.np-turn-edge { stroke: var(--c-ink); stroke-width: 20px; }
.np-turn-road { stroke: #d9b77a; stroke-width: 14px; }
.np-bump.is-visited { background: radial-gradient(ellipse at 50% 30%, #fbe3a1 0%, #f3cf72 60%, #e5b94f 100%); }
.np-bump.is-next { box-shadow: 0 6px 0 var(--c-ink), 0 0 0 6px rgba(239, 132, 51, .55); animation: np-next .8s infinite alternate ease-in-out; }
@keyframes np-next { to { box-shadow: 0 6px 0 var(--c-ink), 0 0 0 9px rgba(239, 132, 51, .45); } }
.np-bump.is-answer { box-shadow: 0 6px 0 var(--c-ink), 0 0 0 7px var(--c-ok); }
.np-bump.is-right { background: var(--c-ok); }
.np-bump.is-right .np-num { color: #fff; }
.np-bump.is-wrong { animation: nope .5s; border-color: var(--c-oops); }
.np-hero { position: absolute; left: 50%; bottom: 80%; width: calc(var(--np-cell) * .62); height: calc(var(--np-cell) * .62); transform: translateX(-50%); pointer-events: none; z-index: 2; }
.np-hero .hero-body { display: block; width: 100%; height: 100%; border: 3px solid var(--c-ink); }
.np-hero.is-wrong { animation: np-hero-nope .5s; }
@keyframes np-hero-nope { 25% { transform: translate(-50%, -14px); } 50% { transform: translate(-50%, 0); } 75% { transform: translate(-50%, -7px); } }

/* --- drag-match: пары слева и справа --- */
.dm { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 280px); justify-content: center; align-items: center; column-gap: clamp(40px, 10vw, 150px); width: 100%; }
.dm-col { display: grid; gap: 18px; }
.dm-card { position: relative; min-height: 112px; min-width: var(--tap); padding: 10px 14px; display: flex; align-items: center; justify-content: center; gap: 12px; background: var(--c-card); border: 3px solid var(--c-ink); box-shadow: 0 6px 0 var(--c-ink); color: var(--c-ink); touch-action: none; }
.dm-card img { height: 76px; width: auto; max-width: 100%; pointer-events: none; }
.dm-card .task-dots { width: 84px; }
.dm-card .task-dots:has(svg[viewBox="0 0 120 58"]) { width: 120px; }
.dm-from { cursor: grab; }
.dm-from.is-dragging { z-index: 20; cursor: grabbing; box-shadow: 0 16px 26px rgba(31, 43, 61, .3); }
.dm-from.is-returning { transition: transform .3s ease-out; }
.dm-card.is-picked { outline: 5px solid var(--c-accent); outline-offset: 4px; }
.dm-card.is-wrong { animation: nope .5s; border-color: var(--c-oops); }
.dm-from.is-done { visibility: hidden; }
.dm-to.is-matched { border-color: var(--c-ok); background: #eaf6ee; box-shadow: 0 6px 0 #2b7347; }
.dm-to.is-shown { border-style: dashed; }
.dm-got { display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 4px 10px; background: var(--c-ok); color: #fff; }
.dm-got .task-label { font-size: 30px; }
.dm-got .task-ear-mini svg { width: 36px; height: 36px; }
.dm-got .task-dots { width: 56px; color: #fff; }
.dm-got img { height: 44px; }

/* --- sequence: окошки сверху, карточки снизу --- */
.sq { --card: 150px; --gap: 40px; display: grid; justify-items: center; align-content: center; gap: 48px; width: 100%; }
.sq-row { display: flex; align-items: center; justify-content: center; gap: var(--gap); min-height: var(--card); }
.sq-slots { gap: 0; }
/* окошки и стрелки видны на любом фоне (пёстрые гора и пещера давали контраст рамки 1,0–1,4:1, аудит 1108, п. 39):
   рамка — чернилами, окошко — бумагой, стрелка — чернилами на бумажном кружке */
.sq-arrow { width: var(--gap); display: grid; place-items: center; color: var(--c-ink); }
.sq-arrow svg { width: min(32px, 100%); height: auto; padding: 3px; background: var(--c-card); border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(34, 48, 74, .35); }
.sq-slot { position: relative; width: var(--card); height: var(--card); border: 3px dashed var(--c-ink); background: rgba(255, 250, 240, .9); }
.sq-slot.is-next { border-color: var(--c-accent); background: #fff1e0; animation: sq-next .8s infinite alternate ease-in-out; }
@keyframes sq-next { to { box-shadow: 0 0 0 8px rgba(239, 132, 51, .3); } }
.sq-slot.is-filled { border-color: transparent; background: none; }
.sq-card { position: relative; width: var(--card); height: var(--card); padding: 8px; background: var(--c-card); border: 3px solid var(--c-ink); box-shadow: 0 6px 0 var(--c-ink); display: grid; place-items: center; color: var(--c-ink); touch-action: none; }
.sq-card img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.sq-card .task-label { font-size: calc(var(--card) * .32); }
.sq-card.is-dragging { z-index: 20; box-shadow: 0 16px 26px rgba(31, 43, 61, .3); }
.sq-card.is-returning { transition: transform .3s ease-out; }
.sq-card.is-wrong { animation: nope .5s; border-color: var(--c-oops); }
.sq-slot > .sq-card { position: absolute; inset: -3px; width: auto; height: auto; }
.sq-card.is-placed { border-color: var(--c-ok); box-shadow: 0 6px 0 #2b7347; }
.sq-card.is-shown { border-style: dashed; }

/* --- trace: холст обводки --- */
.tr { width: 100%; height: 100%; min-height: 0; display: grid; place-items: center; }
.tr-canvas { display: block; background: var(--c-card); border: 3px solid var(--c-ink); box-shadow: 0 6px 0 var(--c-ink); touch-action: none; cursor: crosshair; }

@media (max-width: 700px) {
  .task-ear { width: 88px; height: 88px; }
  .task-ear svg { width: 54px; height: 54px; }
  .task-label { font-size: 32px; }
  .task-label.is-long { font-size: 22px; }
  .lp { gap: 18px; }
  .lp-choices[data-count="4"] { --n: 2; }
  .lp-choices, .ct-choices { gap: 16px; } /* в styles.css на телефоне у .choices 14 px — меньше правила 16 px */
  .lp-choices .choice img { max-height: 90px; }
  .np-track { row-gap: calc(var(--np-cell) * .5); padding-top: calc(var(--np-cell) * .5); }
  .ct { gap: 24px; }
  .ct-field { --obj: 80px; gap: 26px; }
  .ct-mark { min-width: 34px; width: auto; height: 34px; padding: 0 6px; border-radius: 17px; font-size: 20px; right: -6px; top: -6px; }
  .ct-choices .choice { min-height: 96px; }
  .dm { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; }
  .dm-col { gap: 16px; }
  .dm-card { min-height: 96px; padding: 8px; }
  .dm-card img { height: 60px; }
  .dm-card .task-dots { width: 72px; }
  .dm-card .task-dots:has(svg[viewBox="0 0 120 58"]) { width: 100px; }
  .dm-to.is-matched { gap: 8px; }
  .dm-to.is-matched .task-dots { width: 56px; }
  .dm-to.is-matched img { height: 48px; }
  .dm-got { padding: 4px 6px; }
  .dm-got .task-label { font-size: 24px; }
  .sq { gap: 36px; }
}
/* фишка-герой на дорожке — картинка героя, стоит над числом своей кочки: низ фишки (--np-lift от низа кочки)
   не ниже верха цифры (цифра .42 клетки по центру — её верх на ~0.69), высота --np-hero клетки, шире 1.1 клетки
   не бывает (яйцо Пыха широкое — ужимаем, стоит по низу). Ряды и верх дорожки раздвинуты ровно на столько,
   на сколько фишка выше кочки (+ тень кочки ряда выше и зазор): фишка не налезает на ряд выше.
   Клетку и --np-hero (1…0,65) подбирает number-path.js по высоте места: вся дорожка внутри сцены. */
.np.has-img .np-track { --np-lift: .73; --np-hero: 1; --np-over: calc(var(--np-cell) * (var(--np-lift) + var(--np-hero) - 1));
  row-gap: calc(var(--np-over) + 12px); padding-top: calc(var(--np-over) + 4px);
  margin-top: calc(-1 * min(var(--np-over), var(--np-room, 1000px))); }
  /* по центру — кочки, а не кочки с местом под фишку: дорожка выше на over/2, дальше от героев внизу;
     но не больше запаса по высоте (--np-room из number-path.js) — иначе фишка первого ряда залезает под облачко */
.np-hero.np-hero-img { width: auto; max-width: calc(var(--np-cell) * 1.1); height: calc(var(--np-cell) * var(--np-hero)); bottom: calc(var(--np-lift) * 100%);
  object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 2px 0 rgba(34, 48, 74, .2)); }
/* дорожка не влезла под облачко даже с кочками 72 px: пустую во время задания строку кнопок отдаём дорожке */
.stage:has(.np.is-tight) > .stage-controls:empty { min-height: 0; }
/* не влезла и так (телефон 320 px, 1–20 на узком экране): дорожка прокручивается, кочки не меньше 72 px */
.np.is-scroll { align-self: stretch; min-height: 0; overflow-y: auto; align-items: start; overscroll-behavior: contain;
  height: 100cqh; }   /* ровно в месте задания: строка сетки auto росла по дорожке, и нижние кочки уходили под героев */
.np.is-scroll .np-track { margin-bottom: 8px; }

/* --- подгонка под высоту места (аудит 1108, пункты 0 и 21) ---
   Место задания .stage-task — контейнер размера (styles.css): 100cqh — его высота, 100cqw — ширина. Под героями
   теперь своя полоса, и место бывает низким (телефон боком — 340 px, планшет с длинной репликой — 450 px).
   Карточки ужимаются по высоте места, но не меньше 72 px (CONTRACT, правило 4); где места хватает — прежние размеры.
   Без поддержки @container (Safari до 16) — прежние размеры. */
/* drag-match: n пар столбиком — n карточек и n − 1 промежутков */
.dm { --dm-n: 4; --dm-gap: 18px; --dm-max: 112px; --dm-img: 76px;
  --dm-card: clamp(72px, calc((100cqh - (var(--dm-n) - 1) * var(--dm-gap) - 6px) / var(--dm-n)), var(--dm-max)); }
.dm[data-count="2"] { --dm-n: 2; } .dm[data-count="3"] { --dm-n: 3; }
.dm-col { gap: var(--dm-gap); }
.dm-card { min-height: var(--dm-card); }
.dm-card img { height: clamp(36px, calc(var(--dm-card) - 32px), var(--dm-img)); }
/* sequence: окошки и карточки — две строки; --card по ширине ставит sequence.js, по высоте ограничиваем здесь */
.sq { --sq-gap: 48px; --sq-c: max(72px, min(var(--card), calc((100cqh - var(--sq-gap) - 16px) / 2))); gap: var(--sq-gap); }
.sq-row { min-height: var(--sq-c); }
.sq-slot, .sq-card { width: var(--sq-c); height: var(--sq-c); }
.sq-card .task-label { font-size: calc(var(--sq-c) * .32); }
/* count-tap: до 5 предметов — один ряд, больше — два; под ними — строка ответа (резерв, пока она скрыта).
   Это запасной расчёт (браузер без round()); точный — ниже, в @supports: ряды по факту ширины места */
.ct { --ct-rows: 1; --ct-gap: 32px; --ct-ask: 112px; --ct-gap-max: 32px; --ct-ask-max: 112px; gap: var(--ct-gap); }
.ct:where(:has(.ct-field > :nth-child(6))) { --ct-rows: 2; }   /* :where — вес как у .ct: точный расчёт ниже его перекрывает */
.ct-field { --obj: clamp(72px, min(calc((100cqh - var(--ct-gap) - var(--ct-ask) - (var(--ct-rows) - 1) * 26px - 16px) / var(--ct-rows)),
  calc(100cqw / var(--cols, 5) - 26px)), var(--ct-max, 116px)); }
.ct-choices .choice { min-height: var(--ct-ask); }
@media (max-width: 700px) {
  .dm { --dm-gap: 16px; --dm-max: 96px; --dm-img: 60px; }
  .sq { --sq-gap: 36px; }
  .ct { --ct-gap: 24px; --ct-ask: 96px; --ct-gap-max: 24px; --ct-ask-max: 96px; }
  .ct-field { --ct-max: 80px; }
}
/* низкое место: промежутки меньше (между зонами касания — не меньше 16 px), карточки выбора и ухо ниже */
@container (max-height: 520px) { .dm { --dm-gap: 16px; } .dm-card { padding-block: 4px; } }
@container (max-height: 420px) {
  .sq { --sq-gap: 28px; }
  .ct { --ct-gap: 16px; --ct-ask: 96px; --ct-gap-max: 16px; --ct-ask-max: 96px; }
  .choice { min-height: 104px; padding: 10px; }
  .choice img, .lp-choices .choice img { max-height: 104px; }
  .lp { gap: 14px; }
  .lp > .task-ear { width: 88px; height: 88px; }
  .lp > .task-ear svg { width: 54px; height: 54px; }
}
/* низкое и не узкое место (телефон боком): четыре варианта — в ряд, а не 2 × 2 (нижний ряд уходил за край) */
@container (max-height: 420px) and (min-width: 380px) { .lp-choices[data-count="4"], .choices[data-count="4"] { --n: 4; } }
@container (max-height: 300px) {
  .choice { min-height: 96px; }
  .choice img, .lp-choices .choice img { max-height: 80px; }
  .choice-label, .choice .task-label { font-size: 30px; }
}

/* count-tap, точный расчёт (аудит 1108, п. 0 и 21; замечание скептика: на 320–420 px ширины 10 предметов вставали
   в 3–4 ряда, а расчёт выше считал два — строка ответов уходила за низ окна и на головы героев). Ряды — по факту:
   --ct-n — сколько предметов; --ct-c0 — сколько в ряд задумано (как --cols в count-tap.js: до 5 — все, больше —
   половина); --ct-fit — сколько встанет в ширину места при 72 px и промежутке 26 px; --ct-c — меньшее из них;
   --ct-rows — n / c с округлением вверх. Высота: сперва всё по минимуму (предметы 72, промежутки 16, ответы 72,
   запас 16); что осталось — ответам (до --ct-ask-max), промежутку до строки ответов (до --ct-gap-max), промежуткам
   между предметами (до 26 px), остальное — предметам. Беспорядок (--dx/--dy из count-tap.js, ±5 px) — не больше
   (промежуток − 16) / 2: между зонами касания всегда ≥ 16 px. Строка ответов в расчёте с самого начала, пока
   она скрыта, — предметы не ужимаются, когда она появится. */
.ct { --ct-n: 1; --ct-c0: 1; --ct-fit: 5; }
.ct:has(> .ct-field > :nth-child(2)) { --ct-n: 2; --ct-c0: 2; }
.ct:has(> .ct-field > :nth-child(3)) { --ct-n: 3; --ct-c0: 3; }
.ct:has(> .ct-field > :nth-child(4)) { --ct-n: 4; --ct-c0: 4; }
.ct:has(> .ct-field > :nth-child(5)) { --ct-n: 5; --ct-c0: 5; }
.ct:has(> .ct-field > :nth-child(6)) { --ct-n: 6; --ct-c0: 3; }
.ct:has(> .ct-field > :nth-child(7)) { --ct-n: 7; --ct-c0: 4; }
.ct:has(> .ct-field > :nth-child(8)) { --ct-n: 8; --ct-c0: 4; }
.ct:has(> .ct-field > :nth-child(9)) { --ct-n: 9; --ct-c0: 5; }
.ct:has(> .ct-field > :nth-child(10)) { --ct-n: 10; --ct-c0: 5; }
/* в ряд при 72 px и 26 px: 5 — от 464 px, 4 — от 366, 3 — от 268, 2 — от 170 */
@container (max-width: 463.9px) { .ct { --ct-fit: 4; } }
@container (max-width: 365.9px) { .ct { --ct-fit: 3; } }
@container (max-width: 267.9px) { .ct { --ct-fit: 2; } }
@container (max-width: 169.9px) { .ct { --ct-fit: 1; } }
@supports (width: round(up, 1.5px, 1px)) {
  .ct { --ct-c: min(var(--ct-c0), var(--ct-fit)); --ct-rows: round(up, var(--ct-n) / var(--ct-c), 1);
    --ct-spare: calc(100cqh - var(--ct-rows) * 88px - 88px);   /* rows·72 + (rows − 1)·16 + 16 + 72 + 16 */
    --ct-ask: clamp(72px, calc(72px + var(--ct-spare)), var(--ct-ask-max));
    --ct-gap: clamp(16px, calc(16px + var(--ct-spare) - (var(--ct-ask) - 72px)), var(--ct-gap-max));
    --ct-g: clamp(16px, calc(16px + (var(--ct-spare) - (var(--ct-ask) - 72px) - (var(--ct-gap) - 16px)) / max(1, var(--ct-rows) - 1)), 26px); }
  .ct-field { gap: var(--ct-g); max-width: calc(var(--ct-c) * (var(--obj) + var(--ct-g)));
    --obj: clamp(72px, min(calc((100cqh - var(--ct-gap) - var(--ct-ask) - (var(--ct-rows) - 1) * var(--ct-g) - 16px) / var(--ct-rows)),
      calc((min(920px, 100cqw) + var(--ct-g)) / var(--ct-c) - var(--ct-g) - 1px)), var(--ct-max, 116px)); }
  /* вторая фаза (посчитаны все, видна строка ответов): предметы больше не для касания — на тесном месте (телефон
     в книжной, 10 предметов в 4 ряда, длинная подсказка в облачке) они ужимаются до 44 px, чтобы ответы не ушли
     за край и на головы героев; где место есть, размер тот же, что в первой фазе. Запас здесь — только тень
     ответов (6 px), а не 16: телефон боком (667×375, 10 предметов в 3 ряда) остаётся при 72 px */
  .ct:has(> .ct-choices:not([hidden])) > .ct-field {
    --obj: clamp(44px, min(calc((100cqh - var(--ct-gap) - var(--ct-ask) - (var(--ct-rows) - 1) * var(--ct-g) - 6px) / var(--ct-rows)),
      calc((min(920px, 100cqw) + var(--ct-g)) / var(--ct-c) - var(--ct-g) - 1px)), var(--ct-max, 116px)); }
  .ct-obj { --ct-j: calc((var(--ct-g) - 16px) / 2);
    transform: translate(clamp(calc(-1 * var(--ct-j)), var(--dx), var(--ct-j)), clamp(calc(-1 * var(--ct-j)), var(--dy), var(--ct-j))); }
  /* цифра счёта — по размеру предмета: 42 px при 116 (как было), 34 при 80 (телефон, как было), меньше — на ужатых */
  .ct-mark { --mk: clamp(24px, calc(var(--obj) * .42), 42px); min-width: var(--mk); height: var(--mk); border-radius: calc(var(--mk) / 2);
    font-size: calc(var(--mk) * .57); right: calc(var(--mk) / -5); top: calc(var(--mk) / -5); }
  /* ответы бывают и 72 px: цифра и поля — по высоте карточки */
  .ct-choices .choice { padding-block: 4px; }
  .ct-choices .choice-label { font-size: min(40px, calc(var(--ct-ask) * .42)); }
}
@media (max-width: 700px) { @supports (width: round(up, 1.5px, 1px)) { .ct-choices .choice-label { font-size: min(30px, calc(var(--ct-ask) * .42)); } } }

/* listen-pick по высоте места (замечание скептика: фаза подсказки). На телефоне в книжной длинная подсказка в облачке
   ужимает место, а карточки 2 × 2 с картинками оставались по 130 px — нижний ряд вставал на головы героев (360×640,
   ew-11). Высота карточки — из места: ухо, промежуток, ряды через 16 px, тень и запас; не меньше 72 px и не больше
   прежнего (--lp-min — прежняя min-height, --lp-img — прежний предел картинки: 140 / 90 / 104 / 80 px).
   --lp-rows — столько рядов, сколько даёт --n у .lp-choices (телефон: четыре — 2 × 2; низкое широкое место — в ряд) */
.lp { --lp-ear: 104px; --lp-gap: 24px; --lp-rows: 1; --lp-img: 140px; --lp-min: 150px; gap: var(--lp-gap);
  --lp-card: max(72px, calc((100cqh - var(--lp-ear) - var(--lp-gap) - (var(--lp-rows) - 1) * 16px - 14px) / var(--lp-rows)));
  --lp-pad: clamp(6px, calc((var(--lp-card) - 72px) / 4), 14px); }
@media (max-width: 700px) {
  .lp { --lp-ear: 88px; --lp-gap: 18px; --lp-img: 90px; --lp-min: 110px; }
  .lp:has(> .lp-choices[data-count="4"]) { --lp-rows: 2; }
}
@container (max-height: 420px) { .lp { --lp-ear: 88px; --lp-gap: 14px; --lp-img: 104px; --lp-min: 104px; } }
@container (max-height: 420px) and (min-width: 380px) { .lp:has(> .lp-choices[data-count="4"]) { --lp-rows: 1; } }
@container (max-height: 300px) { .lp { --lp-img: 80px; --lp-min: 96px; } }
.lp-choices .choice { min-height: min(var(--lp-min), var(--lp-card)); padding-block: var(--lp-pad); }
.lp-choices .choice img { max-height: min(var(--lp-img), calc(var(--lp-card) - 2 * var(--lp-pad) - 6px)); }

/* колокол над последней кочкой дорожки (number-path, p.bell): висит над кочкой справа сверху, касаний не перехватывает */
.np-bell { position: absolute; right: -26%; top: -50%; width: 60%; aspect-ratio: 40 / 44; pointer-events: none; z-index: 3;
  transform-origin: 50% 8%; filter: drop-shadow(0 2px 0 rgba(34, 48, 74, .25)); }
.np-bell svg { display: block; width: 100%; height: 100%; }