/* Стили типов заданий (ведёт исполнитель «Задания», см. 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; }
.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; }
.sq-arrow { width: var(--gap); display: grid; place-items: center; color: rgba(31, 43, 61, .45); }
.sq-arrow svg { width: min(28px, 80%); height: auto; }
.sq-slot { position: relative; width: var(--card); height: var(--card); border: 3px dashed rgba(31, 43, 61, .4); background: rgba(255, 255, 255, .55); }
.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-hero.np-hero-img { width: auto; height: calc(var(--np-cell) * 1.15); bottom: 62%; filter: drop-shadow(0 2px 0 rgba(34, 48, 74, .2)); }