/* ─── Семейная RPG (вкладка «Профиль»): герой-карандаш, гонка месяца, стена
   достижений; поп-карточка анлока + конфетти. Рисованные подложки карточек —
   skTabbar.mount (data-pencil, как весь профиль), прогресс-полоски — общий
   drawProfileBars (data-bar-fill). Анимации только transform/opacity (§1);
   конфетти не создаётся вовсе под prefers-reduced-motion и body.light-fx
   (гейт в rpg.js). */

/* Аватар-круг 96 + лампа-бейдж уровня, класс + экипировка, XP-полоса — по
   чертёжу 06·3, живут в css/profile.css (.hava/.ph/.lvl/.clsrow/.gi/.xpw).
   Здесь остаются гонка, стена достижений и поп-карточка анлока. */
/* эмодзи-иконки плиток характеристик (⚡💪✓🔥 — рисованных глифов для них нет) */
#profile .stat .em{ width:30px; flex:0 0 auto; font-size:1.35rem; line-height:1;
  text-align:center; }

/* ── гонка месяца (чертёж 06·3): строка 40 — корона-маркер у лидера, ava32,
   имя 64, трек 12 со штриховкой-прогрессом (h-hach) + ghost-остаток, XP Caveat
   17. Недельный мостик и прошлый чемпион сохранены, перерисованы без эмодзи
   (👑 → line/marker-корона). Месяц ушёл в заголовок карты (#rpg-race-mon). ── */
#rpg-race .rpg-week{ display:flex; gap:8px; align-items:baseline; flex-wrap:wrap;
  font-size:12px; color:var(--graphite-soft); margin-bottom:10px; }
#rpg-race .rpg-week b{ font-family:'Caveat',cursive; font-weight:700;
  font-size:15px; color:var(--pencil); }
#rpg-race .rpg-week i{ font-style:normal; color:var(--pencil-faint); }
#rpg-race .rr{ display:flex; align-items:center; gap:8px; height:40px; position:relative; }
#rpg-race .crw{ position:absolute; left:2px; top:-4px; width:20px; height:13px;
  transform:rotate(-10deg); pointer-events:none; }
#rpg-race .crw path{ fill:var(--marker); stroke:var(--amber); stroke-width:1.5;
  stroke-linejoin:round; }
#rpg-race .ava32{ width:32px; height:32px; flex:none; border-radius:50%;
  background:var(--paper2); position:relative; display:flex; align-items:center;
  justify-content:center; font-family:'Caveat',cursive; font-weight:700; font-size:13px;
  color:var(--graphite); text-transform:capitalize; }
#rpg-race .ava32::before{ content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px solid var(--graphite); border-radius:50%; filter:url(#squiggle); }
#rpg-race .rnm{ width:64px; flex:0 0 auto; font-size:15px; color:var(--graphite);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#rpg-race .rtrack{ flex:1; position:relative; height:12px; }
#rpg-race .rfill{ position:absolute; left:0; top:0; bottom:0; border-radius:3px;
  border:2px solid var(--graphite); transition:width .5s cubic-bezier(.3,1,.4,1);
  background-image:repeating-linear-gradient(-45deg,
    transparent 0 4.5px, rgba(62,142,90,.35) 4.5px 6px); }
#rpg-race .rrest{ position:absolute; right:0; top:0; bottom:0; border-radius:3px;
  border:1.5px dashed var(--pencil-faint); }
#rpg-race .rxp{ flex:0 0 auto; width:44px; text-align:right; font-family:'Caveat',cursive;
  font-weight:700; font-size:17px; color:var(--graphite); }
#rpg-race .ava32.soft, #rpg-race .rnm.soft, #rpg-race .rxp.soft{ color:var(--pencil); }
#rpg-race .ava32.soft::before{ border-color:var(--pencil); }
#rpg-race .rpg-prev{ margin-top:12px; font-size:12px; color:var(--graphite);
  display:flex; align-items:center; gap:6px; }
#rpg-race .rpg-prev .crw2{ width:18px; height:12px; flex:none; transform:rotate(-8deg); }
#rpg-race .rpg-prev .crw2 path{ fill:var(--marker); stroke:var(--amber); stroke-width:1.5;
  stroke-linejoin:round; }
#rpg-race .rpg-prev.soft{ color:var(--pencil); }
#rpg-race .rpg-empty{ font-size:14px; color:var(--pencil); }
/* реальный аватар в строке гонки (avatarEl — фото/инициалы) вместо инициалов */
#rpg-race .rr > .ava{ width:32px; height:32px; flex:none; font-size:.9rem;
  box-shadow:inset -1px -1px 0 rgba(0,0,0,.12); }
/* вся карта гонки — тап-цель (openRaceModal); инфо-глиф — аффорданс тапа.
   #profile #pc-race (2 id) перебивает #profile [data-pencil]>*{position:relative} */
#profile #pc-race{ cursor:pointer; }
#profile #pc-race .rpg-info{ position:absolute; top:16px; right:16px; width:24px; height:24px;
  display:grid; place-items:center; color:var(--pencil); background:none; border:none;
  cursor:pointer; padding:0; z-index:2; transition:transform .09s ease, color .12s; }
#profile #pc-race .rpg-info svg{ width:22px; height:22px; }
#profile #pc-race:hover .rpg-info{ color:var(--graphite); }
#profile #pc-race .rpg-info:active{ transform:scale(.9); }
#profile #pc-race .rpg-info:focus-visible{ outline:3px solid var(--ink-blue);
  outline-offset:2px; border-radius:50%; }
/* подпись-подвал: одно предложение про соревнование, под строками (пунктир сверху) */
#pc-race .rpg-race-foot{ font-size:12px; color:var(--pencil); line-height:1.35;
  margin-top:10px; padding-top:10px; border-top:1.4px dashed var(--pencil-faint); }
/* месяц в заголовке карты «гонка месяца» (наполняет renderRPG) */
#profile #pc-race h3 .race-mon{ font-size:15px; color:var(--pencil); }
/* счётчик «N / 20» в заголовке карты «достижения» (наполняет renderRPG) */
#profile #pc-ach h3 .ach-cnt{ font-size:15px; color:var(--pencil); }

/* ── компакт достижений (чертёж 06·3): ряд бейджей-кружков 48 — полученные
   маркером, цели ghost + зелёное кольцо прогресса; внутри — авторский арт-глиф.
   Контур ::before + filter:url(#squiggle) (гейт light-fx/reduced-motion). ── */
#rpg-ach .badges{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:2px; }
#rpg-ach .abdg{ width:48px; height:48px; flex:none; border-radius:50%; position:relative;
  background:none; border:none; padding:0; cursor:pointer; display:grid; place-items:center;
  transition:transform .12s ease; }
#rpg-ach .abdg::before{ content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:50%; filter:url(#squiggle); }
#rpg-ach .abdg.on{ background:var(--marker); }
/* ghost-цель: обводку целиком даёт кольцо (пунктир-трек + прогресс), ::before не
   рисуем — иначе два круга на разных радиусах разъезжаются */
#rpg-ach .abdg.gh::before{ display:none; }
#rpg-ach .abdg .ic{ width:30px; height:30px; }
#rpg-ach .abdg .ic svg{ width:100%; height:100%; overflow:visible; }
#rpg-ach .abdg:hover{ transform:translateY(-2px); }
#rpg-ach .abdg:focus-visible{ outline:3px solid var(--ink-blue); outline-offset:2px;
  border-radius:50%; }
/* кольцо цели (ghost): пунктирный трек + зелёная дуга прогресса (pathLength=100,
   старт сверху) на ОДНОМ круге r=22 — прогресс идёт точно по пунктиру */
#rpg-ach .abdg .ring{ position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; transform:rotate(-90deg); overflow:visible; }
#rpg-ach .abdg .ring .rtrack{ fill:none; stroke:var(--pencil); stroke-width:1.5;
  stroke-dasharray:2.2 3.6; stroke-linecap:round; }
#rpg-ach .abdg .ring .rprog{ fill:none; stroke:var(--green); stroke-width:2.5;
  stroke-linecap:round; }

/* ── стена достижений (внутри #pc-ach) ── */
#rpg-ach .rpg-aic{ width:40px; height:40px; flex:0 0 auto; }
#rpg-ach .rpg-aic svg{ width:100%; height:100%; overflow:visible; }
#rpg-ach .rpg-rib{ font-style:normal; font-size:.62rem; color:#fff; padding:1px 8px;
  border-radius:8px 10px 8px 9px; margin-left:6px; display:inline-block;
  transform:rotate(-2deg); vertical-align:2px; }
#rpg-ach .rpg-rib.rare{ background:var(--ink-blue); }
#rpg-ach .rpg-rib.epic{ background:var(--amber); }
#rpg-ach .rpg-rib.legend{ background:var(--graphite); }
#rpg-ach .rpg-ad{ font-size:.8rem; color:var(--pencil); margin-top:3px; }
/* строка-цель — теперь кнопка (модалка ачивки, openAchModal): сброс дефолтов
   button, раскладку даёт общий #profile .arow (flex) */
#rpg-ach .rpg-arow{ background:none; border:none; padding:0; width:100%;
  font:inherit; color:inherit; text-align:left; cursor:pointer;
  transition:transform .12s ease; }
#rpg-ach .rpg-arow:hover{ transform:translateX(2px); }
#rpg-ach .rpg-arow:focus-visible{ outline:3px solid var(--ink-blue);
  outline-offset:2px; border-radius:10px; }

/* ── модалка ачивки (контент в .skm-body, каркас — css/modal.css) ── */
.skm-body .achm{ text-align:center; }
.skm-body .achm .bd{ display:block; width:96px; height:96px; margin:2px auto 6px; }
.skm-body .achm .bd svg{ width:100%; height:100%; overflow:visible; }
.skm-body .achm .meta{ display:flex; gap:8px; justify-content:center;
  align-items:center; flex-wrap:wrap; margin-bottom:6px; }
.skm-body .achm .meta .rpg-rib{ display:inline-block; font-style:normal;
  font-size:.68rem; padding:2px 8px; border-radius:8px 10px 8px 9px; color:#fff;
  transform:rotate(-2deg); }
.skm-body .achm .meta .rpg-rib.rare{ background:var(--ink-blue); }
.skm-body .achm .meta .rpg-rib.epic{ background:var(--amber); }
.skm-body .achm .meta .rpg-rib.legend{ background:var(--graphite); }
.skm-body .achm .got{ color:var(--pencil); font-size:.9rem; }
.skm-body .achm .d{ margin:0 0 10px; line-height:1.4; }
.skm-body .achm .prog .n{ display:block; text-align:right; font-size:.85rem;
  color:var(--pencil); margin-bottom:3px; }
.skm-body .achm .prog .bar{ height:10px; }
/* ── модалка характеристики (openStatModal): иконка, значение, пояснение ── */
.skm-body .statm{ text-align:center; }
.skm-body .statm .ic{ display:block; width:auto; font-size:2.6rem; line-height:1;
  margin:2px 0 6px; }
.skm-body .statm .v{ font-family:'Caveat',cursive; font-weight:700; font-size:1.8rem;
  line-height:1; margin-bottom:8px; }
.skm-body .statm .d{ margin:0; line-height:1.45; }
/* ── модалка «гонка месяца» (openRaceModal): описание + статы по каждому члену ── */
.skm-body .racem{ text-align:left; }
.skm-body .racem-about{ font-size:.9rem; line-height:1.45; color:var(--graphite-soft); margin:0 0 10px; }
.skm-body .racem-row{ display:flex; align-items:center; gap:12px; padding:9px 0; }
.skm-body .racem-row + .racem-row{ border-top:1.4px dashed var(--pencil-faint); }
.skm-body .racem-ava{ flex:none; width:40px; height:40px; }
.skm-body .racem-ava .ava{ width:40px; height:40px; font-size:1.05rem;
  box-shadow:inset -1px -1px 0 rgba(0,0,0,.12); }
.skm-body .racem-info{ flex:1; min-width:0; }
.skm-body .racem-nm{ font-family:'Caveat',cursive; font-weight:700; font-size:1.15rem;
  color:var(--graphite); line-height:1.1; }
.skm-body .racem-nm .crw{ width:20px; height:13px; vertical-align:-1px; transform:rotate(-10deg); }
.skm-body .racem-nm .crw path{ fill:var(--marker); stroke:var(--amber); stroke-width:1.5; stroke-linejoin:round; }
/* полоса ∝ очкам месяца — видно, кто сколько набрал, с одного взгляда */
.skm-body .racem-track{ display:block; position:relative; height:12px; margin:5px 0 4px; }
.skm-body .racem-fill{ position:absolute; left:0; top:0; bottom:0; border-radius:3px;
  border:2px solid var(--graphite); background-image:repeating-linear-gradient(-45deg,
    transparent 0 4.5px, rgba(62,142,90,.35) 4.5px 6px); }
.skm-body .racem-st{ font-size:.82rem; color:var(--graphite-soft); margin-top:2px; }
.skm-body .racem-st.soft{ color:var(--pencil); }
#rpg-ach .rpg-sec{ font-family:'Caveat',cursive; font-weight:700; font-size:1.15rem;
  color:var(--pencil); margin:14px 0 6px; }
#rpg-ach .rpg-stamps{ display:flex; gap:12px; flex-wrap:wrap; }
#rpg-ach .rpg-stamps.compact{ margin-top:2px; }
#rpg-ach .rpg-stamp .rpct{ display:block; font-size:.62rem; color:var(--pencil);
  margin-top:1px; }
#rpg-ach .rpg-wall-btn{ display:block; margin:14px auto 2px; padding:7px 16px;
  font-family:'Neucha',cursive; font-size:.88rem; color:var(--pencil);
  background:none; border:1.6px dashed var(--pencil-faint);
  border-radius:var(--r-pill); cursor:pointer; }
#rpg-ach .rpg-wall-btn:hover{ color:var(--graphite); border-color:var(--pencil);
  background:var(--marker); }
#rpg-ach .rpg-wall-btn:focus-visible{ outline:3px solid var(--ink-blue);
  outline-offset:2px; }
#rpg-ach .rpg-stamp{ width:76px; text-align:center; background:none; border:none;
  padding:0; cursor:pointer; font-family:'Neucha',cursive; transition:transform .14s; }
#rpg-ach .rpg-stamp:hover{ transform:translateY(-3px) rotate(-2deg); }
#rpg-ach .rpg-stamp:focus-visible{ outline:3px solid var(--ink-blue);
  outline-offset:3px; border-radius:12px; }
#rpg-ach .rpg-stamp .bd{ display:block; width:56px; height:56px; margin:0 auto; }
#rpg-ach .rpg-stamp .bd svg{ width:100%; height:100%; overflow:visible; }
#rpg-ach .rpg-stamp .sn{ display:block; font-family:'Caveat',cursive; font-weight:700;
  font-size:.8rem; line-height:.95; margin-top:4px; color:var(--graphite); }
#rpg-ach .rpg-secret{ margin-top:12px; font-size:.85rem; color:var(--pencil);
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
#rpg-ach .rpg-secret .q{ width:30px; height:30px; border:1.6px dashed var(--pencil-faint);
  border-radius:50%; display:inline-grid; place-items:center;
  font-family:'Caveat',cursive; font-weight:700; color:var(--pencil-faint); }

/* ── поп-карточка анлока (fixed, поверх всего) ── */
.rpg-pop{ position:fixed; left:50%; top:calc(14px + var(--safe-top)); z-index:1200;
  transform:translateX(-50%) translateY(-140px); width:min(340px,92vw);
  background:#FFFDF6; padding:12px 14px; border:2.4px solid var(--graphite);
  border-radius:18px 22px 16px 20px; box-shadow:6px 8px 0 rgba(44,42,38,.2);
  display:flex; gap:12px; align-items:center;
  transition:transform .45s cubic-bezier(.3,1.3,.4,1); pointer-events:none; }
.rpg-pop.show{ transform:translateX(-50%) translateY(0); }
.rpg-pop .bic{ width:58px; height:58px; flex:0 0 auto; }
.rpg-pop .bic svg{ width:100%; height:100%; overflow:visible; }
.rpg-pop.show .bic{ animation:rpg-stampin .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes rpg-stampin{ 0%{ transform:scale(2) rotate(12deg); opacity:0; }
  100%{ transform:scale(1) rotate(0); opacity:1; } }
.rpg-pop .tx{ flex:1; min-width:0; }
.rpg-pop .k{ font-size:.62rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--pencil); }
.rpg-pop .k.rare{ color:var(--ink-blue); }
.rpg-pop .k.epic{ color:var(--amber); }
.rpg-pop .k.legend{ color:var(--graphite); background:var(--marker);
  padding:0 6px; border-radius:6px; }
.rpg-pop .an{ font-family:'Caveat',cursive; font-weight:700; font-size:1.3rem;
  line-height:1; color:var(--graphite); }
.rpg-pop .ad{ font-size:.78rem; color:var(--graphite-soft); }

/* ── конфетти (создаётся только вне reduced-motion/light-fx) ── */
.rpg-cfw{ position:fixed; inset:0; pointer-events:none; z-index:1190; overflow:hidden; }
.rpg-cfw i{ position:absolute; width:9px; height:13px; top:-16px;
  animation:rpg-cff 1.6s ease-in forwards; }
@keyframes rpg-cff{ to{ transform:translateY(105vh) rotate(540deg); } }

/* мобильный масштаб: штампы стены ужимаются (герой/бейдж/класс/XP — по чертёжу
   06·3 те же 96/24 и на телефоне, css/profile.css) */
@media (max-width:639px){
  #rpg-ach .rpg-stamps{ gap:9px; }
  #rpg-ach .rpg-stamp{ width:64px; }
  #rpg-ach .rpg-stamp .bd{ width:46px; height:46px; }
}
@media (prefers-reduced-motion:reduce){
  .rpg-pop{ transition:none; }
  .rpg-pop.show .bic{ animation:none; }
  #rpg-race .rfill{ transition:none; }
}