/* SөйлеуLab — оформление раздела 6 «Логопедические приключения / Логопедиялық саяхаттар».
   Использует цвета и размеры из css/style.css; здесь — только то, чего нет в других разделах:
   карточки приключений, карта с маршрутом, раскладывание, дыхание, артикуляция, история по порядку, сигналы. */

/* ---------- Список приключений ---------- */
.av-head { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 1.2rem; align-items: center; margin: 0 0 1.25rem; padding: clamp(1rem, 3vw, 1.5rem); border-radius: var(--r-xl); background: linear-gradient(180deg, #FFF1E2, #FFF8EC); box-shadow: var(--shadow); }
.av-head__art { display: block; aspect-ratio: 3 / 2; border-radius: 22px; overflow: hidden; }
.av-head__art > svg { width: 100%; height: 100%; display: block; }
.av-title { font-size: clamp(1.6rem, 3.6vw, 2.3rem); }
.av-lead { margin: .55rem 0 0; color: var(--ink-2); font-weight: 600; max-width: 62ch; }
.av-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.2vw, 1.6rem); margin-bottom: 1.5rem; }
.av-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: var(--ink);
  background: var(--paper); border-radius: 28px; overflow: hidden; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 4px rgba(30, 58, 64, .05), 0 18px 34px -22px rgba(30, 58, 64, .38);
  transition: transform .28s cubic-bezier(.2, .8, .3, 1.15), box-shadow .28s ease;
  animation: avIn .45s ease both; animation-delay: calc(var(--i, 0) * 70ms);
}
@media (hover: hover) { .av-card.is-ready:hover { transform: translateY(-6px); box-shadow: 0 4px 8px rgba(30, 58, 64, .06), 0 28px 44px -24px rgba(30, 58, 64, .45); } }
.av-card.is-ready:active { transform: translateY(-1px) scale(.98); transition-duration: .08s; }
.av-card.is-soon { cursor: default; }
.av-card.is-soon .av-card__art { filter: saturate(.55); opacity: .8; }
.av-card__art { position: relative; display: block; aspect-ratio: 5 / 3; overflow: hidden; background: var(--tone, var(--mint)); }
.av-card__art > svg { width: 100%; height: 100%; display: block; }
.av-card__medal { position: absolute; right: 10px; top: 8px; width: 64px; filter: drop-shadow(0 8px 10px rgba(30, 58, 64, .3)); animation: pop .5s cubic-bezier(.3, 1.4, .5, 1); }
.av-card__medal > svg { width: 100%; height: auto; }
.av-card__body { display: flex; flex-direction: column; gap: .35rem; flex: 1; padding: 1rem 1.2rem 1.2rem; }
.av-card__title { font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; line-height: 1.2; }
.av-card__theme { flex: 1; color: var(--ink-2); line-height: 1.38; }
.av-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; }
.av-card__prog .stars { display: inline-flex; gap: 2px; }
.av-card__prog .st svg { width: 16px; height: 16px; }
.av-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .65rem; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); font-weight: 800; font-size: .88rem; color: var(--ink-2); white-space: nowrap; }
.av-chip .snd { font-size: .95rem; }
.av-chip--theme { white-space: normal; }

/* ---------- Карта приключения ---------- */
.av-map { position: relative; margin-bottom: 1.25rem; padding: clamp(.85rem, 2.5vw, 1.4rem); border-radius: var(--r-xl); background: linear-gradient(180deg, var(--tone, var(--mint)), #FFFFFF 70%); box-shadow: var(--shadow); }
.av-map__head { display: flex; align-items: flex-end; gap: 1rem; margin-bottom: .9rem; }
.av-host-btn { flex: none; width: 128px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.av-host-btn .wm-fox { width: 100%; height: auto; display: block; }
.av-host-btn.is-hop { animation: wmHop .6s ease; }
.av-map__txt { flex: 1; min-width: 0; }
.av-map__title { margin-bottom: .35rem; }
.av-map__theme { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .6rem; }
.av-map__bubble { max-width: 640px; }
.av-route { position: relative; width: 100%; aspect-ratio: 1000 / 560; border-radius: 26px; overflow: hidden; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .8), 0 10px 26px -18px rgba(30, 58, 64, .5); }
.av-route__bg { position: absolute; inset: 0; }
.av-route__bg > svg { width: 100%; height: 100%; display: block; }
.av-route__road { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.av-route__bg--tall, .av-route__road--tall { display: none; }
.av-mapmill { animation: wmSpin 9s linear infinite; transform-box: fill-box; transform-origin: center; }
.av-stop {
  position: absolute; left: var(--x); top: var(--y); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .25rem;
  width: 130px; margin: -40px 0 0 -65px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink); -webkit-tap-highlight-color: transparent;
}
.av-stop__disc {
  position: relative; display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: var(--paper);
  box-shadow: 0 0 0 5px var(--paper), 0 0 0 9px var(--teal-soft-2), 0 14px 22px -10px rgba(30, 58, 64, .55);
  transition: transform .2s cubic-bezier(.2, .8, .3, 1.3), box-shadow .2s ease;
}
.av-stop__disc .wm-pic { width: 66px; height: 66px; }
.av-stop__num {
  position: absolute; left: -10px; top: -8px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--teal); color: var(--paper); font-family: var(--f-display); font-weight: 700; font-size: .95rem; box-shadow: 0 0 0 3px var(--paper);
}
.av-stop__star { position: absolute; right: -10px; top: -8px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--star); color: var(--paper); box-shadow: 0 0 0 3px var(--paper); animation: pop .4s cubic-bezier(.3, 1.4, .5, 1); }
.av-stop__star .ui-ico { width: 20px; height: 20px; }
.av-stop__name { max-width: 130px; padding: .2rem .6rem; border-radius: 12px; background: rgba(255, 255, 255, .94); box-shadow: 0 6px 12px -8px rgba(30, 58, 64, .5); font-weight: 800; font-size: .86rem; line-height: 1.15; text-align: center; }
.av-stop.is-done .av-stop__disc { box-shadow: 0 0 0 5px var(--paper), 0 0 0 9px var(--star), 0 14px 22px -10px rgba(30, 58, 64, .55); }
.av-stop.is-next .av-stop__disc { animation: avNext 1.6s ease-in-out infinite; }
@media (hover: hover) { .av-stop:hover .av-stop__disc { transform: translateY(-4px) scale(1.06); } }
.av-stop:active .av-stop__disc, .av-stop.is-go .av-stop__disc { transform: scale(.94); }
.av-stop:focus-visible { outline: none; }
.av-stop:focus-visible .av-stop__disc { box-shadow: 0 0 0 5px var(--paper), 0 0 0 9px var(--teal), 0 14px 22px -10px rgba(30, 58, 64, .55); }
.av-map__go { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1rem; margin-top: 1rem; }
.av-map__prog { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; color: var(--ink-2); }
.av-map__prog .stars { display: inline-flex; gap: 3px; }
.av-map__prog .st svg { width: 22px; height: 22px; }
.av-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: .7rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.av-li { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .55rem .8rem; border: 0; border-radius: 20px; background: var(--paper); box-shadow: var(--shadow); font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.av-li__num { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--teal-soft); color: var(--teal-2); font-family: var(--f-display); font-weight: 700; }
.av-li__pic { flex: none; width: 48px; height: 48px; }
.av-li__pic .wm-pic { width: 100%; height: 100%; }
.av-li__txt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.av-li__txt span { font-size: .88rem; font-weight: 600; color: var(--ink-2); }
.av-li__ok { flex: none; color: var(--star); }
.av-li__ok .ui-ico { width: 24px; height: 24px; }
.av-li.is-done .av-li__num { background: var(--star); color: var(--paper); }
@media (hover: hover) { .av-li:hover { transform: translateY(-2px); } }

/* ---------- Остановка ---------- */
.av-guide__host { width: 84px; }
.av-game { min-height: 220px; }
.av-round { animation: avIn .35s ease both; }
.av-choose .wm-opts--3 { grid-template-columns: repeat(3, minmax(0, 210px)); }

/* Раскладывание */
.av-sort { display: grid; gap: 1rem; }
.av-tray { display: flex; flex-wrap: wrap; justify-content: center; min-height: 0; }
.av-tray .wm-item { flex: 0 0 auto; width: clamp(64px, calc((100% - 4.9rem) / 8), 112px); }
.av-tray--n9 .wm-item { width: clamp(60px, calc((100% - 5.6rem) / 9), 104px); }
.av-tray.is-empty { display: none; }
.av-item .cap, .av-card-item .cap { font-size: .78rem; }
.av-bins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.av-sort--3 .av-bins { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.av-sort--5 .av-bins { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.av-bin {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .2rem; min-width: 0; padding: .55rem .45rem .6rem;
  border-radius: 24px; background: var(--paper); box-shadow: inset 0 0 0 3px var(--line); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: box-shadow .2s ease, transform .2s ease, background-color .2s ease;
}
.av-bins.is-active .av-bin { box-shadow: inset 0 0 0 3px var(--teal-soft-2); }
.av-bin.is-over { background: var(--teal-soft); box-shadow: inset 0 0 0 4px var(--teal); transform: scale(1.03); }
.av-bin.is-hint { box-shadow: inset 0 0 0 4px var(--star); animation: wmHint .8s ease-in-out infinite; }
.av-bin.is-ok { animation: hit .45s ease; }
.av-bin.is-shake { animation: shake .45s ease; }
.av-bin__art { display: block; width: 100%; max-width: 190px; }
.av-bin__art > svg { width: 100%; height: auto; display: block; }
.av-bin__pic { display: block; width: 100%; max-width: 120px; }
.av-bin__pic .wm-pic { width: 100%; height: auto; display: block; }
.av-bin__dots { display: flex; gap: 7px; margin-top: -.1rem; }
.av-bin__dots i { width: 18px; height: 18px; border-radius: 50%; background: var(--teal); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15); }
.av-bin__name { font-weight: 800; font-size: .95rem; line-height: 1.15; text-align: center; }
.av-bin__name.cap { display: none; }
.show-captions .av-bin__name.cap { display: block; }
.av-sort--syl .av-bin__name { display: none; }
.av-bin__got { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; min-height: 34px; }
.av-got { display: block; width: 34px; height: 34px; animation: pop .3s ease; }
.av-got .wm-pic { display: block; width: 100%; height: 100%; }
.av-sort--pics .av-bin { padding-top: .35rem; }
.av-sort--pics .av-got { width: 48px; height: 48px; }
.av-bin--pen .av-bin__got { position: absolute; left: 8%; right: 8%; top: 18%; justify-content: center; align-items: flex-end; min-height: 0; pointer-events: none; }
.av-bin--pen .av-got { width: 46px; height: 46px; margin: 0 -4px; }
.av-sayit__pics .wm-sayit__pic { width: min(240px, 60vw); }
.av-sayit__pics--2 .wm-sayit__pic { width: min(200px, 40vw); }
.av-sayit__pics--3 .wm-sayit__pic { width: min(170px, 28vw); }
.av-sayit__pics--4 .wm-sayit__pic { width: min(150px, 21vw); padding: .4rem; border-radius: 20px; }
.av-claps { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); display: flex; gap: 3px; pointer-events: none; }
.av-claps i { padding: .05rem .4rem; border-radius: 8px; background: var(--star); color: var(--ink); font-style: normal; font-weight: 800; font-size: .8rem; animation: pop .25s ease; white-space: nowrap; }
.av-syl { color: var(--teal-2); letter-spacing: .02em; }

/* Дыхание */
.av-breath { display: grid; justify-items: center; gap: .7rem; }
.av-breath__art { width: min(240px, 60vw); --spin: 1.6s; }
.av-breath__art > svg { width: 100%; height: auto; display: block; }
.av-rotor { transform-box: fill-box; transform-origin: center; }
.av-breath__art.is-blowing .av-rotor { animation: wmSpin var(--spin) linear infinite; }
.av-wind { opacity: 0; transition: opacity .3s ease; }
.av-breath__art.is-blowing .av-wind { opacity: 1; animation: avWind 1s ease-in-out infinite; }
.av-breath__art.is-win > svg { filter: drop-shadow(0 0 12px rgba(255, 210, 90, .9)); }
.av-breath__reps { display: flex; gap: 8px; }
.av-breath__reps i { width: 18px; height: 18px; border-radius: 50%; background: var(--star-off); transition: background-color .3s ease, transform .3s ease; }
.av-breath__reps i.on { background: var(--star); transform: scale(1.2); }
.av-hold {
  position: relative; display: grid; place-items: center; width: 132px; height: 132px; padding: 0; border: 0; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #3FB5A9, var(--teal)); color: var(--paper); cursor: pointer;
  box-shadow: 0 16px 26px -14px var(--teal-2); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease;
}
.av-hold.is-on { transform: scale(.94); }
.av-hold.is-hint { animation: wmHint .8s ease-in-out infinite; }
.av-hold__ring { position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); transform: rotate(-90deg); }
.av-hold__track { fill: none; stroke: var(--teal-soft); stroke-width: 7; }
.av-hold__fill { fill: none; stroke: var(--star); stroke-width: 7; stroke-linecap: round; opacity: 0; }
.av-hold.is-on .av-hold__fill { opacity: 1; }
.av-hold__in { position: relative; display: grid; justify-items: center; gap: .1rem; font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; pointer-events: none; }
.av-hold__in .ui-ico { width: 34px; height: 34px; }
.av-breath__note { display: flex; gap: .45rem; max-width: 520px; margin: .2rem 0 0; font-size: .88rem; font-weight: 600; color: var(--ink-2); line-height: 1.4; }
.av-breath__note .ui-ico { flex: none; width: 20px; height: 20px; }

/* Артикуляционное упражнение */
.av-warm { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 1.1rem; align-items: center; max-width: 760px; margin: 0 auto; }
.av-warm__art { padding: .5rem; border-radius: 28px; background: var(--paper); box-shadow: var(--shadow); }
.av-warm__art > svg { width: 100%; height: auto; display: block; }
.av-warm__body { display: grid; gap: .6rem; }
.av-warm__name { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 1.35rem; }
.av-warm__child { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.45; }
.av-warm__btns { display: flex; flex-wrap: wrap; gap: .6rem; }
.av-warm__btns .ui-ico { width: 22px; height: 22px; }
.av-warm__adult { padding: .55rem .7rem; border-radius: 16px; background: var(--cream); }
.av-count { display: flex; gap: 6px; }
.av-count i { width: 22px; height: 22px; border-radius: 50%; background: var(--star-off); transition: background-color .25s ease, transform .25s ease; }
.av-count i.on { background: var(--teal); transform: scale(1.12); }

/* История по порядку */
.av-order { display: grid; gap: .9rem; max-width: 760px; margin: 0 auto; }
.av-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.av-slot { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 22px; background: var(--cream); box-shadow: inset 0 0 0 3px var(--line); cursor: pointer; transition: box-shadow .2s ease, background-color .2s ease; }
.av-slot.is-over { background: var(--teal-soft); box-shadow: inset 0 0 0 4px var(--teal); }
.av-slot.is-hint { box-shadow: inset 0 0 0 4px var(--star); animation: wmHint .8s ease-in-out infinite; }
.av-slot.is-shake { animation: shake .45s ease; }
.av-slot.is-ok { box-shadow: inset 0 0 0 4px var(--teal); background: var(--mint); }
.av-slot__num { position: absolute; left: 8px; top: 6px; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--paper); color: var(--teal-2); font-family: var(--f-display); font-weight: 700; box-shadow: 0 4px 8px -5px rgba(30, 58, 64, .5); }
.av-slot .av-card-item { width: 92%; height: 92%; animation: pop .25s ease; }
.av-card-item { padding: .15rem; }
.av-card-item .wm-item__pic { max-width: none; }
.av-tray--cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.av-order__how { margin: 0; text-align: center; font-size: .9rem; font-weight: 600; color: var(--ink-2); }
.av-story { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.av-story__card { position: relative; display: flex; flex-direction: column; gap: .35rem; width: 100%; height: 100%; padding: .4rem .4rem .6rem; border: 0; border-radius: 22px; background: var(--paper); box-shadow: var(--shadow); font: inherit; color: var(--ink); cursor: pointer; text-align: left; }
.av-story__num { position: absolute; left: 10px; top: 8px; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--teal); color: var(--paper); font-family: var(--f-display); font-weight: 700; }
.av-story__pic .wm-pic { width: 100%; height: auto; display: block; }
.av-story__txt { font-weight: 700; font-size: .92rem; line-height: 1.3; padding: 0 .2rem; }
.av-retell { margin-top: .2rem; }
.av-scene { border-radius: 16px; }

/* Сигналы */
.av-beep { display: grid; justify-items: center; gap: 1rem; }
.av-beep__play .ui-ico { width: 24px; height: 24px; }
/* Голос животного: кнопка «Послушать ещё раз» над картинками */
.av-snd { display: flex; justify-content: center; margin: 0 0 1rem; }
.av-snd__play { min-height: 66px; padding-inline: 1.4rem; border-radius: 22px; }
.av-snd__play[hidden] { display: none; }
.av-snd__play.is-tap { animation: hit .4s ease; }
.av-beep__lamps { display: flex; gap: 10px; }
.av-beep__lamp { width: 26px; height: 26px; border-radius: 50%; background: var(--star-off); transition: background-color .15s ease, box-shadow .15s ease; }
.av-beep__lamp.is-on { background: var(--star); box-shadow: 0 0 0 6px rgba(255, 194, 61, .3); }
.av-panel { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 16px; background: linear-gradient(180deg, #3B4B6B, #26314A); }
.av-lamps { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 80%; }
.av-lamp { width: 22px; height: 22px; border-radius: 50%; background: #FFD45C; box-shadow: 0 0 10px rgba(255, 212, 92, .8); }
.av-lamps--big .av-lamp { width: 26px; height: 26px; }

/* Итог */
.av-done__host { width: 120px; margin: 0 auto -.4rem; }
.av-done__host > svg { width: 100%; height: auto; }
.av-done__stars { display: flex; justify-content: center; margin: .3rem 0 .8rem; }
.av-done__stars .stars { display: inline-flex; gap: 4px; }
.av-done__stars .st svg { width: 26px; height: 26px; }
.av-done__medal { display: grid; justify-items: center; gap: .2rem; font-weight: 800; color: var(--ink-2); }
.av-done--big .done__title { font-size: 1.25rem; }
.av-ptheme { margin: -.2rem 0 .5rem; }

@keyframes avIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes avNext { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes avWind { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }

@media (prefers-reduced-motion: reduce) {
  .av-card, .av-round, .av-mapmill, .av-stop.is-next .av-stop__disc, .av-breath__art.is-blowing .av-rotor { animation: none !important; }
}

/* ---------- Планшет и телефон ---------- */
@media (max-width: 900px) {
  .av-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .av-tray .wm-item, .av-tray--n9 .wm-item { width: calc((100% - 2.4rem) / 5); }
}
@media (max-width: 700px) {
  .av-head { grid-template-columns: 120px minmax(0, 1fr); }
  .av-map__head { align-items: center; }
  .av-host-btn { width: 96px; }
  .av-route { aspect-ratio: 400 / 640; max-width: 480px; margin: 0 auto; }
  .av-route__bg--wide, .av-route__road--wide { display: none; }
  .av-route__bg--tall, .av-route__road--tall { display: block; }
  .av-stop { left: var(--mx); top: var(--my); width: 110px; margin: -34px 0 0 -55px; }
  .av-stop__disc { width: 68px; height: 68px; }
  .av-stop__disc .wm-pic { width: 56px; height: 56px; }
  .av-stop__name { font-size: .8rem; max-width: 118px; }
  .av-sort--5 .av-bins { display: flex; flex-wrap: wrap; justify-content: center; }
  .av-sort--5 .av-bin { width: calc((100% - 1.8rem) / 3); }
  .av-warm { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .av-warm__art { width: min(220px, 70%); }
  .av-warm__btns, .av-count { justify-content: center; }
  .av-warm__adult { text-align: left; }
  .av-story { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .av-cards { grid-template-columns: minmax(0, 1fr); }
  .av-head { grid-template-columns: minmax(0, 1fr); }
  .av-head__art { display: none; }
  .av-guide__host { width: 64px; }
  .av-tray { padding: .55rem; gap: .45rem; }
  .av-tray .wm-item, .av-tray--n9 .wm-item { width: calc((100% - 1.35rem) / 4); }
  .av-bins { gap: .55rem; }
  .av-bin { border-radius: 18px; padding: .4rem .3rem .45rem; }
  .av-bin__name { font-size: .82rem; }
  .av-bin__dots i { width: 14px; height: 14px; }
  .av-sort--5 .av-bin { width: calc((100% - 1.1rem) / 3); }
  .av-got { width: 26px; height: 26px; }
  .av-bin--pen .av-got, .av-sort--pics .av-got { width: 32px; height: 32px; }
  .av-choose .wm-opts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .av-slots { gap: .45rem; }
  .av-slot { border-radius: 16px; }
  .av-slot__num { width: 22px; height: 22px; font-size: .8rem; left: 4px; top: 4px; }
  .av-tray--cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .av-hold { width: 116px; height: 116px; }
  .av-map__go { justify-content: center; }
}
.av-done__medal > svg { width: 92px; height: auto; }

/* ---------- «Полёт в космос» ---------- */
.av-bin--pod .av-got { width: 44px; height: 44px; }
.av-breathpic--rocket .av-flame { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(calc(.35 + var(--p, 0) * 1.25)); transition: transform .12s linear; }
.av-breathpic--rocket .av-smoke { transform-box: fill-box; transform-origin: 50% 100%; opacity: calc(var(--p, 0) * 1.1); transform: scale(calc(.6 + var(--p, 0) * .5)); }
.av-breathpic--rocket .av-rk { transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.av-breath__art.is-blowing .av-breathpic--rocket .av-rk { animation: avShake .12s linear infinite; }
.av-breath__art.is-win .av-breathpic--rocket .av-rk { animation: none; transform: translateY(-16px); }
.av-lamps--groups { gap: 16px; }
.av-lampgroup { display: flex; gap: 6px; }
.av-twinkle { animation: homeTw 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes avShake { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1.5px); } }
@media (prefers-reduced-motion: reduce) { .av-twinkle, .av-breath__art.is-blowing .av-breathpic--rocket .av-rk { animation: none !important; } }

/* ---------- «Колобок / Бауырсақ» ---------- */
.av-bin--stump .av-bin__got { position: absolute; left: 14%; right: 14%; top: 10%; justify-content: center; align-items: flex-end; min-height: 0; pointer-events: none; }
.av-bin--stump .av-got { width: 44px; height: 44px; margin: 0 -5px; }
.av-breathpic--bun .av-steam { opacity: calc(1 - var(--p, 0)); transition: opacity .15s linear; }
.av-breathpic--bun .av-bun--cool { opacity: 0; transition: opacity .3s ease; }
.av-breath__art.is-win .av-breathpic--bun .av-bun--cool { opacity: 1; }
.av-breath__art.is-win .av-breathpic--bun .av-bun--hot { opacity: 0; }
.av-breath__art.is-win .av-breathpic--bun .av-steam { opacity: 0; }

/* Запомни по порядку */
.av-seq { display: grid; justify-items: center; gap: 1rem; }
.av-seq__slots { display: flex; justify-content: center; gap: .7rem; }
.av-seqslot { position: relative; display: grid; place-items: center; width: clamp(78px, 16vw, 120px); aspect-ratio: 1; border-radius: 22px; background: var(--cream); box-shadow: inset 0 0 0 3px var(--line); }
.av-seqslot.is-full { background: var(--mint); box-shadow: inset 0 0 0 3px var(--teal-soft-2); }
.av-seqslot__pic { display: block; width: 86%; animation: pop .3s cubic-bezier(.3, 1.4, .5, 1); }
.av-seqslot__pic .wm-pic { display: block; width: 100%; height: auto; }
.av-seq .av-choose { width: 100%; }
.av-seq .wm-opts--4 { grid-template-columns: repeat(4, minmax(0, 170px)); }
.av-seq .wm-opts--5 { grid-template-columns: repeat(5, minmax(0, 150px)); justify-content: center; }
.av-opt.is-used { opacity: .3; transform: scale(.9); pointer-events: none; }
.av-seq__adult { max-width: 560px; padding: .5rem .7rem; border-radius: 14px; background: var(--cream); }
.av-ear { display: inline-flex; vertical-align: middle; color: var(--teal); }
.av-ear .ui-ico { width: 26px; height: 26px; }
@media (max-width: 560px) {
  .av-seq .wm-opts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
  .av-seq .wm-opts--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .35rem; }
  .av-bin--stump .av-got { width: 28px; height: 28px; }
}
.av-tray--cards .wm-item { width: calc((100% - 1.8rem) / 4); max-width: 200px; }
.av-lamps--groups { gap: 26px; }
.av-lampgroup { gap: 7px; }
@media (max-width: 560px) {
  .av-tray--cards .wm-item { width: calc((100% - 1.35rem) / 4); }
  .av-lamps--groups { gap: 14px; }
  .av-lampgroup { gap: 4px; }
  .av-lamps--big .av-lamp { width: 18px; height: 18px; }
}
@media (max-width: 560px) { .av-lvlarea { display: none; } }