/* ============================================================
   SpiderHero v1 — стили живого Человека-паука (SVG-кукла)
   Костюмы = CSS-переменные на .spidey--{id}
   Анимации = keyframes по [data-anim] на .spidey
   ============================================================ */

/* ---------- контейнеры ---------- */
.spidey-wrap {
  --sp-size: 150px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  line-height: 0;
}
.spidey-wrap::before { /* свечение костюма за спиной */
  content: '';
  position: absolute;
  inset: -12% -20%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--sp-glow, rgba(225, 29, 46, .35)), transparent 72%);
  opacity: .8;
  z-index: 0;
  transition: background .5s ease;
}
.spidey {
  position: relative;
  z-index: 1;
  width: var(--sp-size);
  height: auto;
  overflow: visible;
  display: block;
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .45));
}

/* базовая форма деталей */
.sp-fill {
  stroke: rgba(0, 0, 0, .28);
  stroke-width: 1.6px;
  stroke-linejoin: round;
}
/* базовая раскраска костюма (костюмы переопределяют переменными) */
.spidey .sp-torso-body, .spidey .sp-head-body, .spidey .sp-arm-body, .spidey .sp-glove { fill: var(--sp-1); }
.spidey .sp-leg-body, .spidey .sp-belt { fill: var(--sp-2); }
.spidey .sp-boot { fill: var(--sp-accent); }
.sp-shadow { fill: rgba(0, 0, 0, .42); }
.sp-weblines path,
.sp-weblines line { fill: none; stroke: var(--sp-web); stroke-width: 1.4; stroke-linecap: round; }
.sp-emblem circle { fill: var(--sp-emblem); }
.sp-emblem-legs line { stroke: var(--sp-emblem); stroke-width: 2.1; stroke-linecap: round; }
.sp-eye {
  fill: var(--sp-eye);
  stroke: var(--sp-eye-b);
  stroke-width: 3.6;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: 50% 62%;
}

/* шарниры (transform-box: view-box => координаты viewBox) */
.sp-part, .sp-figure, .sp-head, .sp-arm, .sp-leg { transform-box: view-box; }
.sp-figure { transform-origin: 110px 282px; }
.sp-head    { transform-origin: 110px 116px; }
.sp-arm-l   { transform-origin: 82px 128px; }
.sp-arm-r   { transform-origin: 138px 128px; }
.sp-leg-l   { transform-origin: 99px 180px; }
.sp-leg-r   { transform-origin: 121px 180px; }

/* мигание глаз — всегда */
.spidey .sp-eye { animation: sp-blink 5.2s infinite; }
@keyframes sp-blink {
  0%, 91%, 97%, 100% { transform: scaleY(1); }
  93%, 95%           { transform: scaleY(.1); }
}

/* ---------- IDLE: дыхание + лёгкое покачивание головы ---------- */
.spidey[data-anim="idle"] .sp-figure { animation: sp-breathe 2.9s ease-in-out infinite; }
.spidey[data-anim="idle"] .sp-head   { animation: sp-sway 4.1s ease-in-out infinite; }
.spidey[data-anim="idle"] .sp-arm-l  { animation: sp-armidle-l 3.4s ease-in-out infinite; }
.spidey[data-anim="idle"] .sp-arm-r  { animation: sp-armidle-r 3.4s ease-in-out infinite; }
@keyframes sp-breathe {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50%      { transform: translateY(-5px) scaleY(1.012); }
}
@keyframes sp-sway {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-3.4deg); }
}
@keyframes sp-armidle-l {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-5.5deg); }
}
@keyframes sp-armidle-r {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(5.5deg); }
}

/* ---------- WAVE: машет правой рукой ---------- */
.spidey[data-anim="wave"] .sp-arm-r { animation: sp-wave 1.45s ease-in-out 1; }
@keyframes sp-wave {
  0%   { transform: rotate(4deg); }
  28%  { transform: rotate(-128deg); }
  44%  { transform: rotate(-100deg); }
  60%  { transform: rotate(-130deg); }
  76%  { transform: rotate(-102deg); }
  100% { transform: rotate(4deg); }
}

/* ---------- CHEER: прыжок радости, обе руки вверх ---------- */
.spidey[data-anim="cheer"] .sp-figure { animation: sp-jump .74s cubic-bezier(.34, .06, .2, .97) 2; }
.spidey[data-anim="cheer"] .sp-arm-l  { animation: sp-cheer-l .5s ease-out forwards; }
.spidey[data-anim="cheer"] .sp-arm-r  { animation: sp-cheer-r .5s ease-out forwards; }
.spidey[data-anim="cheer"] .sp-leg-l  { animation: sp-cheerleg-l .74s ease-in-out 2; }
.spidey[data-anim="cheer"] .sp-leg-r  { animation: sp-cheerleg-r .74s ease-in-out 2; }
@keyframes sp-jump {
  0%   { transform: translateY(0) scaleY(1); }
  18%  { transform: translateY(4px) scaleY(.94); }
  46%  { transform: translateY(-34px) scaleY(1.04); }
  78%  { transform: translateY(0) scaleY(1); }
  88%  { transform: translateY(3px) scaleY(.95); }
  100% { transform: translateY(0) scaleY(1); }
}
@keyframes sp-cheer-l { to { transform: rotate(148deg); } }
@keyframes sp-cheer-r { to { transform: rotate(-148deg); } }
@keyframes sp-cheerleg-l { 46% { transform: rotate(-16deg); } 0%, 100% { transform: rotate(0); } }
@keyframes sp-cheerleg-r { 46% { transform: rotate(16deg); } 0%, 100% { transform: rotate(0); } }

/* ---------- SAD: повесил голову, руки опустил ---------- */
.spidey[data-anim="sad"] .sp-figure { animation: sp-sag .55s ease-out forwards; }
.spidey[data-anim="sad"] .sp-head   { animation: sp-sadhead .55s ease-out forwards; }
.spidey[data-anim="sad"] .sp-arm-l  { animation: sp-sadarml .55s ease-out forwards; }
.spidey[data-anim="sad"] .sp-arm-r  { animation: sp-sadarmr .55s ease-out forwards; }
@keyframes sp-sag     { to { transform: translateY(6px) scaleY(.965); } }
@keyframes sp-sadhead { to { transform: rotate(11deg) translateY(2px); } }
@keyframes sp-sadarml { to { transform: rotate(16deg); } }
@keyframes sp-sadarmr { to { transform: rotate(-16deg); } }

/* ---------- POINT: указывает на доску/ученика ---------- */
.spidey[data-anim="point"] .sp-arm-r { animation: sp-point .5s cubic-bezier(.34, 1.4, .5, 1) forwards; }
.spidey[data-anim="point"] .sp-head  { animation: sp-pointhead .5s ease-out forwards; }
@keyframes sp-point    { to { transform: rotate(-62deg); } }
@keyframes sp-pointhead { to { transform: rotate(-7deg); } }

/* ---------- SWING: маятник на паутине (для декора/оверлеев) ---------- */
.spidey[data-anim="swing"] .sp-figure { transform-origin: 110px 8px; animation: sp-pend 1.7s ease-in-out infinite; }
@keyframes sp-pend {
  0%, 100% { transform: rotate(13deg); }
  50%      { transform: rotate(-13deg); }
}

/* ---------- THINK: думает — рука к подбородку ---------- */
.spidey[data-anim="think"] .sp-arm-r  { animation: sp-thinkarm .55s ease-out forwards; }
.spidey[data-anim="think"] .sp-head   { animation: sp-thinkhead .55s ease-out forwards; }
.spidey[data-anim="think"] .sp-figure { animation: sp-thinkbody .55s ease-out forwards; }
@keyframes sp-thinkarm  { to { transform: rotate(-128deg); } }
@keyframes sp-thinkhead { to { transform: rotate(-9deg) translateY(2px); } }
@keyframes sp-thinkbody { to { transform: rotate(1.4deg); } }

/* ---------- LOOK: оглядывается по сторонам ---------- */
.spidey[data-anim="look"] .sp-head  { animation: sp-look 2.1s ease-in-out 1; }
.spidey[data-anim="look"] .sp-arm-l { animation: sp-armidle-l 3.4s ease-in-out infinite; }
.spidey[data-anim="look"] .sp-arm-r { animation: sp-armidle-r 3.4s ease-in-out infinite; }
@keyframes sp-look {
  0%   { transform: rotate(0); }
  26%  { transform: rotate(16deg); }
  52%  { transform: rotate(-14deg); }
  78%  { transform: rotate(7deg); }
  100% { transform: rotate(0); }
}

/* ---------- КОСТЮМЫ (CSS-переменные) ---------- */
/* Классика: красно-синий */
.spidey--classic {
  --sp-1: #e11d2e;            /* красный: торс/голова/руки */
  --sp-2: #2347a8;            /* синий: ноги/пояс */
  --sp-accent: #e11d2e;       /* боты */
  --sp-web: rgba(15, 15, 25, .42);
  --sp-eye: #ffffff;
  --sp-eye-b: #14141c;
  --sp-emblem: #14141c;
  --sp-glow: rgba(225, 29, 46, .34);
}
.spidey--classic .sp-leg-body, .spidey--classic .sp-belt { fill: var(--sp-2); }
.spidey--classic .sp-boot { fill: var(--sp-accent); }

/* Майлз: чёрный + красные акценты */
.spidey--miles {
  --sp-1: #16161f;
  --sp-2: #16161f;
  --sp-accent: #d21f3c;
  --sp-web: rgba(255, 255, 255, .26);
  --sp-eye: #ffffff;
  --sp-eye-b: #d21f3c;
  --sp-emblem: #d21f3c;
  --sp-glow: rgba(210, 31, 60, .38);
}
.spidey--miles .sp-leg-body, .spidey--miles .sp-belt { fill: var(--sp-2); }
.spidey--miles .sp-boot, .spidey--miles .sp-glove { fill: var(--sp-accent); }

/* Симбиот: чёрный + белая паутина */
.spidey--black {
  --sp-1: #101016;
  --sp-2: #101016;
  --sp-accent: #101016;
  --sp-web: rgba(255, 255, 255, .82);
  --sp-eye: #ffffff;
  --sp-eye-b: #000000;
  --sp-emblem: #ffffff;
  --sp-glow: rgba(255, 255, 255, .26);
}
.spidey--black .sp-fill { stroke: rgba(255, 255, 255, .25); }

/* Гвен: белый капюшон + чёрный + розовое */
.spidey--gwen {
  --sp-1: #eef0f6;
  --sp-2: #17171f;
  --sp-accent: #ec4899;
  --sp-web: rgba(23, 23, 31, .34);
  --sp-eye: #ffffff;
  --sp-eye-b: #17171f;
  --sp-emblem: #17171f;
  --sp-glow: rgba(236, 72, 153, .35);
}
.spidey--gwen .sp-leg-body, .spidey--gwen .sp-belt { fill: var(--sp-2); }
.spidey--gwen .sp-boot { fill: var(--sp-accent); }
.spidey--gwen .sp-fill { stroke: rgba(23, 23, 31, .3); }

/* Железный: красно-золотой */
.spidey--iron {
  --sp-1: #c11515;
  --sp-2: #d9a514;
  --sp-accent: #d9a514;
  --sp-web: rgba(255, 213, 79, .5);
  --sp-eye: #ffe9a8;
  --sp-eye-b: #5b0f0f;
  --sp-emblem: #ffd76a;
  --sp-glow: rgba(255, 196, 60, .4);
}

/* Веном: чёрный + огромный белый паук */
.spidey--venom {
  --sp-1: #0b0b10;
  --sp-2: #0b0b10;
  --sp-accent: #0b0b10;
  --sp-web: rgba(255, 255, 255, .55);
  --sp-eye: #f4f6ff;
  --sp-eye-b: #000000;
  --sp-emblem: #ffffff;
  --sp-glow: rgba(160, 160, 255, .22);
}
.spidey--venom .sp-fill { stroke: rgba(255, 255, 255, .2); }
.spidey--venom .sp-emblem {
  transform-box: view-box;
  transform-origin: 110px 146px;
  transform: scale(1.8);
}
.spidey--venom .sp-eye { stroke-width: 2.6; }

/* 2099: тёмно-индиго + красные глаза */
.spidey--s2099 {
  --sp-1: #27305e;
  --sp-2: #171d3d;
  --sp-accent: #b3122c;
  --sp-web: rgba(140, 160, 255, .35);
  --sp-eye: #ff4034;
  --sp-eye-b: #12081e;
  --sp-emblem: #b3122c;
  --sp-glow: rgba(90, 110, 255, .35);
}
.spidey--s2099 .sp-boot { fill: var(--sp-accent); }

/* Ноир: чёрно-белая растровая Оттала (сепия) */
.spidey--noir {
  --sp-1: #2b2b31;
  --sp-2: #1a1a20;
  --sp-accent: #55452e;
  --sp-web: rgba(230, 220, 200, .4);
  --sp-eye: #f2ead8;
  --sp-eye-b: #0d0d10;
  --sp-emblem: #0d0d10;
  --sp-glow: rgba(205, 180, 130, .28);
}
.spidey--noir .spidey { filter: sepia(.28) contrast(1.05) drop-shadow(0 12px 16px rgba(0, 0, 0, .5)); }

/* ---------- СТАРТОВЫЙ ЭКРАН: подиум героя ---------- */
.sp-hero-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 2px 0 10px;
}
.sp-hero-stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  --sp-size: 138px;
  min-height: calc(138px * 300 / 220);
}
.sp-hero-stage .spidey-wrap { --sp-size: 138px; }
/* крыша-подиум */
.sp-hero-stage::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 200px;
  height: 12px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(0, 0, 0, .55));
  box-shadow: 0 8px 18px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .22);
  pointer-events: none;
}
.sp-suit-btn {
  pointer-events: auto;
  font-size: .82rem;
  padding: 7px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.sp-suit-pop { animation: sp-suitpop .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes sp-suitpop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* ---------- КЛАСС-РЕЖИМ: МИНИ-БРИГАДА героев в сайдбаре ---------- */
.cr-mini-crew {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 5px 2px;
  padding: 4px 0 2px;
}
.cr-mini-m {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  background: none; border: 0; padding: 3px 1px 0;
  cursor: pointer; font: inherit; -webkit-tap-highlight-color: transparent;
  position: relative;
  border-radius: 10px;
  transition: transform .18s ease;
}
.cr-mini-m:hover { transform: translateY(-3px); }
.cr-mini-m:focus-visible { outline: 2px solid rgba(255, 209, 84, .9); outline-offset: 2px; }
.cr-mini-m .spidey-wrap { --sp-size: 76px; }
.cr-mini-m .spidey-wrap::before { inset: -6% -14%; opacity: .55; }
.cr-mini-m.leader::before {
  content: '👑';
  position: absolute; top: -8px; left: 50%;
  font-size: 13px; z-index: 4; pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5));
  animation: crCrownBob 2.6s ease-in-out infinite;
}
@keyframes crCrownBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-2.5px); }
}
.cr-mini-nm {
  max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .62rem; font-weight: 700; color: rgba(255, 255, 255, .85);
  line-height: 1.3; pointer-events: none;
}
/* >6 учеников: компактнее; >12: имена скрыты, только герои */
.cr-mini-crowd .cr-mini-m .spidey-wrap { --sp-size: 60px; }
.cr-mini-crowd .cr-mini-nm { max-width: 64px; font-size: .56rem; }
.cr-mini-huge .cr-mini-nm { display: none; }
.cr-mini-huge .cr-mini-m .spidey-wrap { --sp-size: 48px; }
.cr-mini-empty {
  color: rgba(255, 255, 255, .5); font-size: .74rem; text-align: center;
  padding: 8px 6px; border: 1.5px dashed var(--glass-border, rgba(255, 255, 255, .16));
  border-radius: 10px;
}
/* питомец рядом с мини-героем — ПРОПОРЦИОНАЛЬНО фигурке,
   не накрывает её и не наезжает на соседей (Task 22) */
.cr-mini-m .sp-pet { min-width: 0; width: 34%; right: -12%; bottom: -2%; }
@media (max-width: 640px) {
  .cr-mini-m .spidey-wrap { --sp-size: 56px; }
  .cr-mini-crowd .cr-mini-m .spidey-wrap { --sp-size: 46px; }
  .cr-mini-huge .cr-mini-m .spidey-wrap { --sp-size: 40px; }
}
/* на невысоких десктопах бригада компактнее, но заметно крупнее прежней */
@media (max-height: 800px) and (min-width: 981px) {
  .cr-mini-m .spidey-wrap { --sp-size: 58px; }
  .cr-mini-crowd .cr-mini-m .spidey-wrap { --sp-size: 48px; }
  .cr-mini-huge .cr-mini-m .spidey-wrap { --sp-size: 42px; }
}

/* ---------- ФИНАЛ: герой на пьедестале ---------- */
.crf-hero {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: -6px 0 2px;
  --sp-size: 120px;
  min-height: calc(120px * 300 / 220);
}
.crf-hero .spidey-wrap { --sp-size: 120px; }

/* ---------- АДАПТИВ ---------- */
@media (max-width: 640px) {
  .sp-hero-stage, .sp-hero-stage .spidey-wrap { --sp-size: 112px; }
  .sp-hero-stage { min-height: calc(112px * 300 / 220); }
  .sp-hero-stage::after { width: 160px; }
  .crf-hero, .crf-hero .spidey-wrap { --sp-size: 96px; }
  .crf-hero { min-height: calc(96px * 300 / 220); }
}
@media (max-height: 760px) {
  .sp-hero-stage, .sp-hero-stage .spidey-wrap { --sp-size: 108px; }
  .sp-hero-stage { min-height: calc(108px * 300 / 220); }
}
@media (max-height: 680px) {
  .sp-hero-stage, .sp-hero-stage .spidey-wrap { --sp-size: 88px; }
  .sp-hero-stage { min-height: calc(88px * 300 / 220); }
}

/* ---------- ДОСТУПНОСТЬ ---------- */
@media (prefers-reduced-motion: reduce) {
  .spidey, .spidey .sp-part, .spidey .sp-figure, .spidey .sp-head,
  .spidey .sp-arm, .spidey .sp-leg, .spidey .sp-eye { animation: none !important; }
}

/* ---------- АКСЕССУАРЫ: показывается один по data-item ---------- */
.sp-item { display: none; }
.spidey-wrap[data-item="cap"]     .sp-item-cap,
.spidey-wrap[data-item="crown"]   .sp-item-crown,
.spidey-wrap[data-item="tophat"]  .sp-item-tophat,
.spidey-wrap[data-item="glasses"] .sp-item-glasses,
.spidey-wrap[data-item="scarf"]   .sp-item-scarf,
.spidey-wrap[data-item="phones"]  .sp-item-phones { display: block; }
.sp-it { stroke: rgba(0, 0, 0, .3); stroke-width: 1.6px; stroke-linejoin: round; }
.sp-cap-top { fill: #d21f3c; }
.sp-cap-visor { fill: #a3122c; }
.sp-cap-dot { fill: #f5f5f7; }
.sp-crown { fill: #f5c542; stroke: #8a5a12; }
.sp-crown-gem { fill: #e11d2e; stroke: #8a5a12; stroke-width: 1; }
.sp-tophat-tube { fill: #17171f; }
.sp-tophat-brim { fill: #17171f; }
.sp-tophat-band { fill: #d21f3c; }
.sp-glass-lens { fill: rgba(190, 230, 255, .42); stroke: #17171f; stroke-width: 3.4; }
.sp-glass-rim { stroke: #17171f; stroke-width: 3.4; stroke-linecap: round; }
.sp-scarf-main { fill: #d21f3c; }
.sp-scarf-tail { fill: #a3122c; }
.sp-phones-band { fill: none; stroke: #17171f; stroke-width: 8; stroke-linecap: round; }
.sp-phones-cup { fill: #17171f; }
.sp-phones-pad { fill: #3d4152; }

/* ---------- МЕЛКИЕ ГЕРОИ (чипы/строки отметок/магазин): без свечения и тени ---------- */
.cr-chip-av .spidey-wrap::before, .cr-st-av .spidey-wrap::before,
.cr-shop-prev .spidey-wrap::before, .cr-shop-tab-av .spidey-wrap::before { display: none; }
/* питомцы возле ОЧЕНЬ мелких героев (вкладки магазина 26px, строки 34px,
   чипы 28px, тропа) — мелкий компаньон СБоку, а не поверх фигурки (Task 22) */
.cr-shop-tab-av .sp-pet, .cr-st-av .sp-pet, .cr-chip-av .sp-pet,
.sp-j-member .sp-pet {
  min-width: 0; width: 46%;
  right: -11%; bottom: -2%;
  filter: none;
}
.cr-chip-av .spidey, .cr-st-av .spidey { filter: none; }
.cr-chip-av .spidey-wrap { --sp-size: 28px; }
.cr-st-av .spidey-wrap { --sp-size: 34px; }
.cr-shop-prev .spidey-wrap { --sp-size: 64px; }
/* вкладки учеников в магазине — ОЧЕНЬ КРУПНЫЕ герои (Task 24: 44→68px, было 26px) */
.cr-shop-tab-av .spidey-wrap { --sp-size: 68px; }
@media (max-width: 640px) {
  .cr-st-av .spidey-wrap { --sp-size: 30px; }
  .cr-chip-av .spidey-wrap { --sp-size: 24px; }
  .cr-shop-tab-av .spidey-wrap { --sp-size: 48px; }
}

/* ============================================================
   БРИГАДА ГЕРОЕВ (Task 20): несколько КРУПНЫХ фигурок — по одной
   на ученика, в его скине и с купленным аксессуаром.
   Клик по герою на старте = смена стартового скина.
   ============================================================ */
.sp-hero-stage.sp-crew,
.crf-hero.sp-crew {
  flex-wrap: wrap;
  gap: 0 10px;
  row-gap: 16px;
  padding: 0 8px 12px;
  min-height: 0;
  align-items: flex-end;
}
.crf-hero.sp-crew { margin: 0 0 8px; }
.sp-hero-stage.sp-crew::after { width: min(94%, 680px); }
.sp-crew-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: 0;
  padding: 0 2px;
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease;
}
div.sp-crew-member { cursor: default; } /* на финале герои не кликаются */
.sp-crew-member:hover { transform: translateY(-4px); }
.sp-crew-member:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .75);
  outline-offset: 3px;
  border-radius: 12px;
}
.sp-crew-member .spidey-wrap { --sp-size: var(--crew-size, 110px); }
.sp-crew-slot { display: block; line-height: 0; }
.sp-crew-name {
  max-width: calc(var(--crew-size, 110px) + 18px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .95);
  background: rgba(10, 14, 30, .6);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  padding: 1px 8px;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.sp-hero-stage.sp-crew-scroll,
.crf-hero.sp-crew-scroll {
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  scrollbar-width: thin;
}
.sp-hero-stage.sp-crew-scroll .sp-crew-name,
.crf-hero.sp-crew-scroll .sp-crew-name { display: none; }

/* подсказка под бригадой + скрытие кнопки маскота */
.sp-hero-hint {
  font-size: .74rem;
  color: rgba(255, 255, 255, .78);
  text-align: center;
  padding: 0 12px;
  min-height: 1.1em;
}
.sp-suit-btn[hidden] { display: none; }

@media (max-width: 640px) {
  .sp-crew-member .spidey-wrap { --sp-size: calc(var(--crew-size, 110px) * .82); }
  .sp-hero-stage.sp-crew, .crf-hero.sp-crew { gap: 0 4px; row-gap: 10px; padding: 0 2px 8px; }
  .sp-crew-name { font-size: .56rem; padding: 1px 6px; }
}

/* ============================================================
   TASK 21: WALK (шаг на тропе главного меню)
   ============================================================ */
.spidey[data-anim="walk"] .sp-figure { animation: sp-walk-bob .52s ease-in-out infinite alternate; }
.spidey[data-anim="walk"] .sp-leg-l  { animation: sp-walk-legl .52s ease-in-out infinite alternate; }
.spidey[data-anim="walk"] .sp-leg-r  { animation: sp-walk-legr .52s ease-in-out infinite alternate; }
.spidey[data-anim="walk"] .sp-arm-l  { animation: sp-walk-arml .52s ease-in-out infinite alternate; }
.spidey[data-anim="walk"] .sp-arm-r  { animation: sp-walk-armr .52s ease-in-out infinite alternate; }
.spidey[data-anim="walk"] .sp-head   { animation: sp-walk-head 1.04s ease-in-out infinite; }
@keyframes sp-walk-legl { from { transform: rotate(17deg); } to { transform: rotate(-17deg); } }
@keyframes sp-walk-legr { from { transform: rotate(-17deg); } to { transform: rotate(17deg); } }
@keyframes sp-walk-arml { from { transform: rotate(-13deg); } to { transform: rotate(13deg); } }
@keyframes sp-walk-armr { from { transform: rotate(13deg); } to { transform: rotate(-13deg); } }
@keyframes sp-walk-bob  { from { transform: translateY(0) } to { transform: translateY(-4px) } }
@keyframes sp-walk-head { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-2.6deg); } }

/* ============================================================
   TASK 21: ПИТОМЦЫ (живут рядом с героем, справа внизу)
   ============================================================ */
.sp-pet {
  position: absolute;
  right: -13%;
  bottom: -1%;
  width: 42%;
  min-width: 24px;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45));
  line-height: 0;
}
.sp-pet-big { right: -6%; bottom: 4%; width: 52%; }
.sp-petsvg { width: 100%; height: auto; display: block; overflow: visible; }

/* --- Паучок на нитке: покачивается, лапки подёргиваются --- */
.sp-pet--pet-spider .spp-spider { animation: spPetSway 2.7s ease-in-out infinite; transform-origin: 32px 18px; }
.sp-pet--pet-spider .spp-thread { stroke: rgba(255, 255, 255, .68); stroke-width: 1.6; animation: spThreadPulse 2.7s ease-in-out infinite; }
.sp-pet--pet-spider .spp-leg  { animation: spPetTwitch 1.9s ease-in-out infinite; }
.sp-pet--pet-spider .spp-leg:nth-of-type(2n) { animation-delay: .5s; }
.sp-pet--pet-spider .spp-body, .sp-pet--pet-spider .spp-head { fill: #e11d2e; stroke: rgba(0, 0, 0, .3); stroke-width: 1.4; }
.sp-pet--pet-spider .spp-eye { fill: #fff; stroke: rgba(0, 0, 0, .25); stroke-width: .8; }
@keyframes spPetSway { 0%, 100% { transform: rotate(7deg); } 50% { transform: rotate(-7deg); } }
@keyframes spPetTwitch { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(9deg); } }
@keyframes spThreadPulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* --- Дрон-помощник: парит, винты крутятся --- */
.sp-pet--pet-drone { animation: spPetHover 1.75s ease-in-out infinite; }
.sp-pet--pet-drone .spd-rotor { animation: spRotorSpin .2s linear infinite; transform-box: fill-box; transform-origin: center; }
.sp-pet--pet-drone .spd-arm { stroke: #5a647e; stroke-width: 3; stroke-linecap: round; }
.sp-pet--pet-drone .spd-rotor ellipse { fill: rgba(205, 216, 240, .85); }
.sp-pet--pet-drone .spd-body { fill: #97a0b8; stroke: rgba(0, 0, 0, .32); stroke-width: 1.4; }
.sp-pet--pet-drone .spd-stripe { fill: #e11d2e; }
.sp-pet--pet-drone .spd-lens { fill: #171c2c; stroke: #0a0e1c; stroke-width: 1.2; }
.sp-pet--pet-drone .spd-glint { fill: #7ef0ff; }
.sp-pet--pet-drone .spd-skids line { stroke: #5a647e; stroke-width: 2.4; stroke-linecap: round; }
@keyframes spRotorSpin { to { transform: rotate(360deg); } }
@keyframes spPetHover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15%); } }

/* --- Симбиот-пёс: хвост виляет, тело дышит --- */
.sp-pet--pet-pup .sp2-dog { animation: spPupBreathe 2.3s ease-in-out infinite; }
.sp-pet--pet-pup .sp2-tail { stroke: #14161f; stroke-width: 5.5; stroke-linecap: round; animation: spTailWag .5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 0% 100%; }
.sp-pet--pet-pup .sp2-body, .sp-pet--pet-pup .sp2-head, .sp-pet--pet-pup .sp2-leg, .sp-pet--pet-pup .sp2-ear { fill: #14161f; stroke: rgba(255, 255, 255, .14); stroke-width: 1; }
.sp-pet--pet-pup .sp2-eye { fill: #f4f6ff; }
.sp-pet--pet-pup .sp2-jaw { stroke: rgba(255, 255, 255, .5); stroke-width: 1.6; stroke-linecap: round; }
@keyframes spTailWag { from { transform: rotate(-16deg); } to { transform: rotate(20deg); } }
@keyframes spPupBreathe { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-1.5px) scaleY(1.03); } }

/* --- Состояния питомца: радость / грусть --- */
.sp-pet[data-anim="happy"] { animation: spPetHappy .6s ease-in-out infinite; }
.sp-pet--pet-drone[data-anim="happy"] { animation: spPetHappyDrone .6s ease-in-out infinite; }
.sp-pet[data-anim="sad"] { animation: spPetSad 1.5s ease-in-out infinite; }
@keyframes spPetHappy { 0%, 100% { transform: translateY(0) scale(1); } 32% { transform: translateY(-26%) scale(1.1); } 58% { transform: translateY(0) scale(.93); } }
@keyframes spPetHappyDrone { 0%, 100% { transform: translateY(0) } 32% { transform: translateY(-34%) rotate(6deg) } 62% { transform: translateY(-4%) rotate(-4deg) } }
@keyframes spPetSad { 0%, 100% { transform: translateY(14%) rotate(4deg) } 50% { transform: translateY(18%) rotate(-3deg) } }

/* ============================================================
   TASK 21: ЗДАНИЯ (карта + тропа) — ночной Нью-Йорк
   ============================================================ */
.sp-bld { width: 100%; height: auto; display: block; overflow: visible; }
.sp-bld .sb-main { fill: #232c4e; stroke: rgba(255, 255, 255, .16); stroke-width: 1; }
.sp-bld .sb-deck { fill: #2c3658; stroke: rgba(255, 255, 255, .16); stroke-width: 1; }
.sp-bld .sb-win { fill: #ffd15b; animation: spWinGlow 3.4s ease-in-out infinite; }
.sp-bld .sb-win.dim { fill: #8fa0c8; opacity: .5; animation-delay: 1.7s; }
.sp-bld .sb-ant, .sp-bld .sb-mast { stroke: #8fa0c8; stroke-width: 2.6; stroke-linecap: round; }
.sp-bld .sb-beacon { fill: #e11d2e; animation: spBeacon 1.7s ease-in-out infinite; }
.sp-bld .sb-lamp { fill: #ffd15b; animation: spWinGlow 2.2s ease-in-out infinite; }
.sp-bld .sb-web path, .sp-bld .sb-web line { stroke: rgba(255, 255, 255, .55); stroke-width: 1.3; fill: none; stroke-linecap: round; }
.sp-bld .sb-tree { fill: #2fa84f; }
.sp-bld .sb-tree.sm { fill: #37b95a; }
.sp-bld .sb-trunk { fill: #6b4a2b; }
.sp-bld .sb-bush { fill: #256f3b; }
.sp-bld .sb-ground { stroke: rgba(255, 255, 255, .22); stroke-width: 2.4; stroke-linecap: round; }
.sp-bld .sb-cable, .sp-bld .sb-hang { stroke: rgba(255, 255, 255, .45); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.sp-bld .sb-ring { stroke: rgba(255, 255, 255, .3); stroke-width: 2; }
.sp-bld .sb-door { fill: #10162c; stroke: rgba(255, 255, 255, .2); stroke-width: 1; }
@keyframes spWinGlow { 0%, 100% { opacity: .95; } 50% { opacity: .4; } }
@keyframes spBeacon { 0%, 100% { opacity: 1; } 50% { opacity: .12; } }

/* ============================================================
   TASK 21: ТРОПА ГЛАВНОГО МЕНЮ — бригада идёт от этапа к этапу
   ============================================================ */
.sp-journey {
  position: relative;
  height: 132px;
  margin: 2px 0 10px;
  border-radius: 16px;
  background:
    radial-gradient(300px 90px at 20% 0%, rgba(46, 74, 158, .28), transparent 70%),
    radial-gradient(320px 90px at 82% 0%, rgba(225, 29, 46, .14), transparent 70%),
    linear-gradient(180deg, rgba(10, 16, 38, .55), rgba(10, 16, 38, .12));
  border: 1.5px solid var(--glass-border, rgba(255, 255, 255, .14));
  overflow: hidden;
}
.sp-j-path { position: absolute; inset: 0; width: 100%; height: 100%; }
.sp-j-path path { stroke: rgba(255, 255, 255, .3); stroke-width: 1.6; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.sp-j-path .sp-j-path2 { stroke: rgba(225, 29, 46, .28); stroke-dasharray: 2 9; animation: spJDash 9s linear infinite; }
@keyframes spJDash { to { stroke-dashoffset: -110; } }
.sp-j-stop {
  position: absolute;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.sp-j-stop .sp-bld { height: 72px; width: auto; max-width: 100px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .4)); }
.sp-j-stop-nm {
  font-size: .56rem; font-weight: 800; letter-spacing: .04em;
  color: rgba(255, 255, 255, .88);
  background: rgba(10, 14, 30, .62);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px; padding: 0 7px;
  white-space: nowrap;
}
.sp-j-crew {
  position: absolute;
  bottom: 24px; left: 0;
  display: flex; align-items: flex-end;
  animation: spJourneyWalk 36s linear infinite;
  will-change: left, opacity;
}
.sp-j-member { display: block; line-height: 0; margin-right: -7px; }
.sp-j-member .spidey-wrap { --sp-size: 54px; }
.sp-j-member .spidey-wrap::before { inset: -8% -16%; opacity: .55; }
.sp-j-more {
  align-self: center;
  margin-left: 6px;
  font-size: .68rem; font-weight: 900;
  color: #ffd15b;
  background: rgba(10, 14, 30, .7);
  border: 1.5px solid rgba(255, 209, 84, .5);
  border-radius: 999px; padding: 2px 9px;
  line-height: 1.4;
}
/* маршрут: шаг → пауза у этапа → шаг … (паузы совпадают с позициями зданий) */
@keyframes spJourneyWalk {
  0%   { left: -7%;  opacity: 0; }
  2%   { opacity: 1; }
  7%   { left: 6%;  }
  13%  { left: 6%;  }
  19%  { left: 27%; }
  25%  { left: 27%; }
  31%  { left: 48%; }
  37%  { left: 48%; }
  43%  { left: 69%; }
  49%  { left: 69%; }
  55%  { left: 90%; }
  61%  { left: 90%; }
  68%  { left: 108%; opacity: 1; }
  70%  { left: 108%; opacity: 0; }
  100% { left: 108%; opacity: 0; }
}
@media (max-width: 640px) {
  .sp-journey { height: 104px; border-radius: 13px; }
  .sp-j-stop { bottom: 20px; }
  .sp-j-stop .sp-bld { height: 52px; }
  .sp-j-stop-nm { font-size: .48rem; padding: 0 5px; }
  .sp-j-crew { bottom: 18px; }
  .sp-j-member .spidey-wrap { --sp-size: 40px; }
  .sp-j-member { margin-right: -5px; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-j-crew { animation: none !important; left: 38% !important; opacity: 1 !important; }
  .sp-j-path .sp-j-path2 { animation: none; }
  .sp-pet, .sp-pet .sp-petsvg, .sp-pet--pet-drone, .sp-pet--pet-pup .sp2-dog,
  .sp-pet--pet-pup .sp2-tail, .sp-pet--pet-spider .spp-spider { animation: none !important; }
  .sp-bld .sb-win, .sp-bld .sb-beacon, .sp-bld .sb-lamp { animation: none; }
}