/* ============================================================
   ПОЛНОЧЬ — Mini App · «полночный нуар-будуар»
   Тёплый почти-чёрный · огонёк-янтарь · винный жар · самоцвет=премиум
   ============================================================ */

:root{
  /* фон / поверхности — ЧЁРНО-КРАСНАЯ палитра (редизайн 2026-06-11 под маскота; было тёпло-янтарное hue 34-42) */
  --bg:        oklch(0.135 0.016 22);
  --bg-deep:   oklch(0.105 0.014 20);
  --surface:   oklch(0.190 0.022 22);
  --surface-2: oklch(0.240 0.027 23);
  --surface-3: oklch(0.285 0.030 24);
  --line:      oklch(0.42 0.025 24 / 0.32);
  --line-soft: oklch(0.42 0.025 24 / 0.16);

  /* текст (тёпло-белый с лёгким красным подтоном) */
  --text:      oklch(0.945 0.010 30);
  --text-dim:  oklch(0.74 0.020 28);
  --text-mute: oklch(0.56 0.022 26);

  /* главный акцент: АЛЫЙ (было янтарь-зажигалка) */
  --amber:      oklch(0.470 0.170 25);
  --amber-bright: oklch(0.680 0.180 23);   /* светлый красный для ТЕКСТА/иконок на тёмном */
  --amber-deep: oklch(0.340 0.130 23);
  --ember:      oklch(0.420 0.160 27);

  /* винный жар (18+ / горячее) — глубже, чтобы отличался от алого акцента */
  --wine:       oklch(0.450 0.165 16);
  --wine-bright:oklch(0.560 0.190 18);

  /* валюты */
  --c-crystal:  oklch(0.770 0.135 332);  /* холодный самоцвет — премиум */
  --c-crystal-2:oklch(0.840 0.120 338);
  --c-energy:   oklch(0.840 0.128 88);   /* медовое золото — лампа */
  --c-spark:    oklch(0.660 0.195 36);   /* уголёк (чуть краснее под новую палитру) */

  --good: oklch(0.80 0.15 150);

  /* радиусы — РЕДИЗАЙН: твёрдые углы 7-8px (формула «искушение+минимализм», не квадрат/не пилюли).
     --r-pill=8px: бывшие пилюли получают твёрдые углы; прогресс-бары высотой <16px всё равно скругляются полностью */
  --r-xs:5px; --r-sm:7px; --r:8px; --r-lg:10px; --r-xl:14px; --r-pill:8px;

  /* редизайн-токены: лёгкая тёплая рамка товаров + цвет шёпота маскота */
  --rose-line: oklch(0.60 0.105 25 / 0.42);
  --whisper:   oklch(0.625 0.105 25);

  /* тени + свечения */
  --sh-1: 0 1px 2px oklch(0 0 0/.5), 0 4px 14px oklch(0 0 0/.36);
  --sh-2: 0 8px 24px oklch(0 0 0/.46), 0 24px 60px oklch(0 0 0/.5);
  --glow-amber: 0 0 0 1px oklch(0.66 0.18 27/.3), 0 8px 30px oklch(0.55 0.19 26/.45);
  --glow-crystal: 0 0 0 1px oklch(0.8 0.12 332/.3), 0 8px 30px oklch(0.74 0.14 332/.4);

  /* шрифты — РЕДИЗАЙН: Cormorant («плавный курсив» заголовков, согласован в мокапе H1) */
  --font-display: 'Cormorant', Georgia, serif;
  --font: 'Golos Text', system-ui, -apple-system, sans-serif;

  /* easing */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-2: cubic-bezier(.16,1,.3,1);

  /* безопасные зоны TG */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* полный верхний инсет: max(чёлка устройства, JS-сумма, TG-инжект safe+content) — чтобы контент не лез под TG-пилюли в фуллскрине */
  --top-inset: max(var(--safe-t), var(--cv-top, 0px), calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)));
  --topbar-h: 52px;
  --tabbar-h: 64px;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; height:100%}
body{
  font-family:var(--font);
  background:radial-gradient(110% 80% at 50% -8%, oklch(0.185 0.035 24), var(--bg-deep) 60%) fixed, var(--bg);
  color:var(--text);
  font-size:15px; line-height:1.5;
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* филь­мовая зернистость */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
button{font-family:inherit; color:inherit; border:none; background:none; cursor:pointer}
[hidden]{display:none !important}
h1,h2,h3{margin:0; font-weight:400}

/* ── РЕДИЗАЙН: типографика искушения ──
   Заголовки = Cormorant ITALIC 600 (плавный курсив, мокап H1); дисплейные ЧИСЛА — Cormorant прямой 600 */
.gate__title,.hero__title,.shop__h1,.catalog__h1,.wheel-screen h1,.sheet__title,.sub__h2,.sub__active-t,
.detail__title,.rail__title,.mini__t,.ncard__t,.popup__t,.promo__title,.pf__name,.achd__name,.ach-scr__h,
.shop__offer-t,.card__name,.cv-card__nm,.empty-art__t,.eyebrow{font-style:italic; font-weight:600}
.stat__v,.achd__num,.ach-scr__count,.cpack__n,.card__mono,.pf__initial,.ach-prev__more-n,.cos-demo__f{font-weight:600}
/* шёпот маскота — голос бренда («— я знала, что ты не устоишь…») */
.whisper{font-family:var(--font-display); font-style:italic; font-weight:500; font-size:16px; line-height:1.4;
  color:var(--whisper); text-align:center; margin:10px 0 0; letter-spacing:.01em}
.whisper--left{text-align:left}
/* прячем скроллбары/индикаторы прокрутки на всех вебвью (у части iOS-устройств они видны при скролле) */
*{ scrollbar-width:none; -ms-overflow-style:none }
::-webkit-scrollbar{ width:0; height:0; display:none; -webkit-appearance:none; background:transparent }
::-webkit-scrollbar-thumb{ background:transparent }

/* ============ КНОПКИ ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; font-size:15px; letter-spacing:.01em;
  padding:13px 22px; border-radius:var(--r-pill);
  transition:transform .18s var(--ease), box-shadow .25s var(--ease), filter .2s;
  will-change:transform;
}
.btn:active{transform:scale(.96)}
.btn--block{width:100%}
.btn--sm{padding:9px 15px; font-size:13.5px}
.btn--primary{
  color:oklch(0.94 0.018 26);
  /* ЭТАЛОН редизайна: глубокий тёмно-красный градиент кнопки оффера (#933028→#5e1b16) + светлая кромка (мокап H1) */
  background:linear-gradient(160deg, oklch(0.47 0.165 26), oklch(0.34 0.13 23) 55%, oklch(0.27 0.10 21));
  box-shadow:inset 0 0 0 1px oklch(0.64 0.135 25/.55), 0 10px 26px oklch(0.3 0.13 22/.5);
}
.btn--wine{ color:var(--text); background:linear-gradient(150deg, var(--wine-bright), var(--wine)); box-shadow:0 8px 26px oklch(0.5 0.17 18/.45) }
.btn--crystal{ color:oklch(0.2 0.05 332); background:linear-gradient(150deg, var(--c-crystal-2), var(--c-crystal)); box-shadow:var(--glow-crystal) }
.btn--crystal .ic{ fill:oklch(0.27 0.11 332) }  /* тёмный алмаз — виден на розовой кнопке */
.btn--ghost{ background:oklch(0.30 0.026 23/.38); color:var(--text); box-shadow:inset 0 0 0 1px var(--line) }
.btn--ghost:active{background:oklch(0.34 0.026 23/.5)}

/* инлайн-стоимость валютой */
.cost{display:inline-flex; align-items:center; gap:5px; font-weight:700; font-variant-numeric:tabular-nums}
.coin{width:16px; height:16px; border-radius:50%; display:inline-block; flex:none; position:relative; vertical-align:-3px}
.coin--crystal{background:radial-gradient(circle at 35% 30%, var(--c-crystal-2), var(--c-crystal)); box-shadow:0 0 8px oklch(0.74 0.14 332/.5); clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%)}
.coin--energy{background:radial-gradient(circle at 35% 30%, oklch(.95 .08 90), var(--c-energy)); box-shadow:0 0 8px oklch(0.84 0.13 88/.5)}
.coin--energy::before{content:""; position:absolute; inset:3px; background:var(--bg-deep); clip-path:polygon(58% 0,30% 52%,50% 52%,42% 100%,75% 42%,52% 42%); opacity:.85}
.coin--spark{background:radial-gradient(circle at 35% 30%, oklch(.9 .12 60), var(--c-spark)); box-shadow:0 0 10px oklch(0.69 0.18 44/.6); border-radius:50% 50% 50% 0; transform:rotate(45deg)}

/* ============ 18+ ГЕЙТ ============ */
.gate{position:fixed; inset:0; z-index:200; background:linear-gradient(180deg, #090808 0%, #090808 34%, var(--bg-deep) 62%);   /* верх = цвет кромки gate.webp: арт «цельный доверху» (фидбэк) */ display:grid; place-items:center; padding:32px; text-align:center; overflow:hidden}
.gate__glow{display:none}   /* красноватое свечение засвечивало зону над артом (фидбэк) */
/* маскот встречает на гейте (spots4/gate/v24): арт верхней половиной, низ растворяется в фон под текст */
.gate__art{position:absolute; top:6vh; left:0; width:100%; height:56%; object-fit:cover; object-position:center 0%; pointer-events:none}
.gate__shade{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, transparent 15%, transparent 32%, oklch(0.105 0.014 20/.88) 53%, var(--bg-deep) 62%)}
.gate__inner{position:relative; max-width:340px; margin-top:34vh; animation:rise .8s var(--ease) both}
.gate__mark{display:inline-block; font-weight:800; font-size:13px; letter-spacing:.15em; color:var(--ember); border:1.5px solid oklch(0.58 0.17 26/.5); border-radius:var(--r-pill); padding:5px 13px; margin-bottom:24px}
.gate__title{font-family:var(--font-display); font-size:62px; line-height:1; letter-spacing:.01em; color:var(--text); text-shadow:0 4px 40px oklch(0.58 0.16 25/.45)}
.gate__tag{color:var(--amber-bright); font-size:14px; letter-spacing:.04em; margin:12px 0 28px}
.gate__warn{color:var(--text-dim); font-size:13.5px; line-height:1.6; margin:0 0 30px}
.gate__enter{width:100%; padding:15px}
.gate__no{display:block; margin:14px auto 0; color:var(--text-mute); font-size:13.5px; padding:8px}
.gate__fine{color:var(--text-mute); font-size:11.5px; margin-top:22px; line-height:1.5}
.gate--deny .gate__title{font-size:34px}

/* ============ ШЕЛЛ ============ */
.app{height:100%; display:flex; flex-direction:column; width:100%; max-width:min(100%, 640px); margin:0 auto; position:relative;
  background:linear-gradient(var(--bg), var(--bg-deep))}
/* свечной жар: тёплое красное свечение снизу, ЖИВОЕ — медленно дышит как пламя (полумрак будуара, формула п.6) */
.app::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; transform-origin:50% 100%;
  background:radial-gradient(130% 42% at 50% 104%, oklch(0.215 0.075 25/.85), transparent 70%);
  animation:candle 6.5s ease-in-out infinite}
@keyframes candle{0%,100%{opacity:.78; transform:scaleY(1)}38%{opacity:1; transform:scaleY(1.05)}62%{opacity:.88}80%{opacity:.97}}
.app > *{position:relative}   /* контент поверх слоя свечи */
.ic{display:inline-block; vertical-align:middle; flex:none}
.cic{display:inline-block; vertical-align:middle; object-fit:contain; flex:none}   /* растровая валютная иконка (webp, глянец) */
.cic--inline{vertical-align:-3px}
/* широкий экран (десктоп-TG): аппа в центре, тёплый бэкдроп по бокам, сетки гибкие */
@media (min-width:680px){
  .app{box-shadow:0 0 0 1px var(--line-soft), 0 40px 120px oklch(0 0 0/.55)}
  .hero{height:clamp(380px, 50vh, 500px)}
  .hooks,.rail__head,.catalog__grid,.chips,.shop__sec,.shop__offer,.stat-grid,.ach-grid,.rail__scroll{max-width:600px; margin-left:auto; margin-right:auto}
  .detail__sec,.wheel-screen{max-width:600px; margin-left:auto; margin-right:auto}
}

.topbar{
  position:relative; z-index:20; flex:none;
  height:calc(var(--topbar-h) + var(--top-inset)); padding:var(--top-inset) 12px 0;
  display:flex; align-items:center; gap:8px;
  background:linear-gradient(var(--bg-deep), oklch(0.13 0.016 22/.4) 70%, transparent);
}
.wallet{
  display:flex; align-items:center; gap:6px;
  padding:6px 9px; border-radius:var(--r-sm);
  background:none; box-shadow:none;   /* редизайн: валюты без пилюль-коробок (минимализм мокапа) */
  font-weight:700; font-size:13.5px; font-variant-numeric:tabular-nums;
  transition:transform .15s var(--ease)}
.wallet:active{transform:scale(.94)}
.wallet__ico{width:19px; height:19px; flex:none; object-fit:contain}
.wallet__ico--crystal{background:radial-gradient(circle at 35% 30%, var(--c-crystal-2), var(--c-crystal)); box-shadow:0 0 9px oklch(0.74 0.14 332/.55); clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%)}
.wallet__ico--energy{position:relative; background:radial-gradient(circle at 35% 30%, oklch(.95 .08 90), var(--c-energy)); box-shadow:0 0 9px oklch(0.84 0.13 88/.5); border-radius:50%}
.wallet__ico--energy::before{content:""; position:absolute; inset:3px; background:var(--bg-deep); clip-path:polygon(58% 0,30% 52%,50% 52%,42% 100%,75% 42%,52% 42%)}
.wallet__ico--spark{background:radial-gradient(circle at 35% 30%, oklch(.9 .12 60), var(--c-spark)); box-shadow:0 0 10px oklch(0.69 0.18 44/.6); border-radius:50% 50% 50% 0; transform:rotate(45deg)}
.wallet__ico--spark{margin:0 1px}
.wallet__plus{color:var(--amber-bright); font-weight:800; margin-left:1px; font-size:15px; line-height:1}
.wallet__sub{font-size:10.5px; color:var(--text-mute); font-weight:600; margin-left:1px}
.wallet__sub.is-ready{color:var(--amber-bright); font-weight:800}   /* «Забрать» — зовёт собрать энергию */
.topbar__gear{margin-left:auto; color:var(--text-mute); width:34px; height:34px; display:grid; place-items:center; border-radius:50%}
.topbar__gear:active{color:var(--text); background:oklch(0.3 0.02 45/.4)}

.view{flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; padding-bottom:24px}
.view::before{content:""; display:block; height:4px}
.screen{animation:fade .35s var(--ease) both}
.screen-pad{padding:0 16px}

/* ============ НИЖНЯЯ НАВИГАЦИЯ ============ */
.tabbar{
  flex:none; z-index:20;
  height:calc(var(--tabbar-h) + var(--safe-b)); padding-bottom:var(--safe-b);
  display:grid; grid-template-columns:repeat(5,1fr); align-items:center;
  background:linear-gradient(transparent, var(--bg-deep) 32%);
  box-shadow:inset 0 1px 0 var(--line-soft);
}
.tab{display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--text-mute); font-size:10.5px; font-weight:600; padding-top:6px; transition:color .2s}
.tab__i{width:23px; height:23px; display:block; transition:transform .25s var(--ease)}
.tab.is-active{color:var(--amber-bright)}
.tab.is-active .tab__i{transform:translateY(-1px)}
.tab--center{position:relative}
.tab__fab{
  width:50px; height:50px; margin-top:-22px; border-radius:50%;
  display:grid; place-items:center; color:oklch(0.96 0.012 28);
  background:linear-gradient(150deg, var(--amber), var(--ember));
  box-shadow:var(--glow-amber), 0 6px 18px oklch(0 0 0/.5);
  transition:transform .25s var(--ease)}
.tab__fab svg{width:25px; height:25px; display:block}
.tab--center.is-active{color:var(--amber-bright)}
.tab--center.is-active .tab__fab{transform:scale(1.06)}

/* ============ ГЛАВНАЯ — HERO ============ */
/* редизайн: full-bleed без коробки, низ растворяется в фон (арт-доминанта) */
.hero{position:relative; margin:-4px 0 0; border-radius:0; overflow:hidden; box-shadow:none; height:clamp(380px, 56vh, 540px)}
.poster{position:absolute; inset:0}
.poster::before{content:""; position:absolute; inset:0;
  background:
    radial-gradient(130% 75% at 72% 12%, oklch(0.5 0.14 var(--hue,45)/.85), transparent 55%),
    radial-gradient(80% 60% at 18% 90%, oklch(0.32 0.12 calc(var(--hue,45) + 20)/.7), transparent 60%),
    linear-gradient(155deg, oklch(0.26 0.06 var(--hue,45)), oklch(0.12 0.03 var(--hue,45)))}
.poster::after{content:""; position:absolute; inset:0; opacity:.5; mix-blend-mode:soft-light;
  background:repeating-linear-gradient(115deg, transparent 0 9px, oklch(1 0 0/.04) 9px 10px)}
.poster.has-img{background-size:cover; background-position:center; background-repeat:no-repeat}
.poster.has-img::before{opacity:.3; mix-blend-mode:soft-light}
.poster.has-img::after{opacity:.22}
.hero__scrim{position:absolute; inset:0; background:linear-gradient(transparent 30%, oklch(0.105 0.016 22/.55) 60%, var(--bg-deep) 99%)}
.hero__body{position:absolute; left:0; right:0; bottom:0; padding:22px 22px 20px}
.hero__kicker{display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--amber-bright); margin-bottom:10px}
.tag18{font-size:10px; font-weight:800; letter-spacing:.06em; color:var(--ember); border:1px solid oklch(0.58 0.17 26/.55); border-radius:5px; padding:1px 5px}
.hero__title{font-family:var(--font-display); font-size:50px; line-height:.94; letter-spacing:.01em; text-shadow:0 3px 30px oklch(0 0 0/.6)}
.hero__body .whisper{margin:7px 0 0}
.hero__genres{position:absolute; top:14px; right:14px; z-index:3; font-size:11px; font-weight:600; letter-spacing:.05em; color:var(--text); padding:6px 12px; border-radius:var(--r-pill); background:oklch(0.1 0.015 40/.5); backdrop-filter:blur(6px); box-shadow:inset 0 0 0 1px oklch(1 0 0/.1)}
.dot{width:3px; height:3px; border-radius:50%; background:var(--text-mute)}
.hero__cta{display:flex; gap:10px; margin-top:16px}
.hero__cta .btn--primary{flex:1}

/* ============ РЯД ХУКОВ ============ */
.hooks{display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px; padding:16px 16px 4px}
.hook{position:relative; border-radius:var(--r); padding:13px 11px 11px; background:linear-gradient(180deg, oklch(0.205 0.030 23), oklch(0.165 0.024 22)); box-shadow:inset 0 0 0 1px oklch(0.52 0.07 24/.28); text-align:left; overflow:hidden; transition:transform .15s var(--ease)}
.hook:active{transform:scale(.96)}
.hook__ic{width:26px; height:26px; margin-bottom:8px}
.hook__t{font-size:12px; font-weight:700; line-height:1.15}
.hook__s{font-size:10.5px; color:var(--text-mute); margin-top:2px; font-variant-numeric:tabular-nums}
.hook--offer{background:linear-gradient(155deg, oklch(0.32 0.13 20), oklch(0.2 0.06 22)); box-shadow:inset 0 0 0 1px oklch(0.6 0.18 20/.4)}
.hook--offer .hook__s{color:var(--wine-bright); font-weight:700}
.hook__badge{position:absolute; top:7px; right:7px; min-width:16px; height:16px; padding:0 4px; border-radius:var(--r-pill); background:var(--ember); color:#fff; font-size:10px; font-weight:800; display:grid; place-items:center; box-shadow:0 0 10px oklch(0.58 0.17 26/.7)}
.pulse{animation:pulse 1.8s var(--ease) infinite}

/* ============ СЕЗОННЫЙ ПРОПУСК (полоса) ============ */

/* ============ ГОРИЗОНТАЛЬНЫЙ РЯД (каталог-превью) ============ */
.rail{margin-top:22px}
.rail__head{display:flex; align-items:baseline; padding:0 16px 12px}
.rail__title{font-family:var(--font-display); font-size:27px}
.rail__more{margin-left:auto; font-size:12.5px; color:var(--amber-bright); font-weight:600}
.rail__scroll{display:flex; gap:12px; padding:0 16px; overflow-x:auto; scroll-snap-type:x mandatory}
.mini{flex:none; width:128px; scroll-snap-align:start}
.mini__poster{position:relative; aspect-ratio:3/4; border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-1)}
.mini__poster::after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px oklch(0.62 0.10 25/.24); pointer-events:none; z-index:2}
.mini__poster .hero__scrim{background:linear-gradient(transparent 45%, var(--bg-deep))}
.mini__cap{position:absolute; left:10px; right:10px; bottom:9px}
.mini__t{font-family:var(--font-display); font-size:18px; line-height:1.05}
.mini__tag{font-size:10px; color:var(--text-dim); margin-top:3px}
.mini.is-soon .mini__poster{filter:saturate(.5) brightness(.7)}
.mini.is-soon .mini__poster::after{content:"СКОРО"; position:absolute; inset:0; display:grid; place-items:center; font-weight:800; font-size:12px; letter-spacing:.18em; color:var(--text); background:oklch(0.1 0.02 40/.35); backdrop-filter:blur(2px)}

/* ============ КАТАЛОГ ============ */
.catalog__head{padding:8px 16px 16px}
.catalog__h1{font-family:var(--font-display); font-size:38px}
.catalog__sub{font-family:var(--font-display); font-style:italic; font-weight:500; color:var(--whisper); font-size:15.5px; margin-top:3px}
.chips{display:flex; gap:8px; padding:0 16px 18px; overflow-x:auto}
.chip{flex:none; padding:7px 14px; border-radius:var(--r-pill); font-size:12.5px; font-weight:600; color:var(--text-dim); background:oklch(0.225 0.028 23/.65); box-shadow:inset 0 0 0 1px var(--line-soft)}
.chip.is-on{color:oklch(0.96 0.012 28); background:linear-gradient(150deg,var(--amber),var(--amber-deep))}
.catalog__grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:14px; padding:0 16px}
.ncard{position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1); aspect-ratio:3/4.3; transition:transform .18s var(--ease)}
/* лёгкая тёплая рамка постера (витрина-товар, формула п.3) — поверх арта */
.ncard::after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px oklch(0.62 0.10 25/.26); pointer-events:none; z-index:2}
.ncard:active{transform:scale(.97)}
.ncard__body{position:absolute; left:0; right:0; bottom:0; padding:14px 14px 13px}
.ncard__t{font-family:var(--font-display); font-size:23px; line-height:1; text-shadow:0 2px 16px oklch(0 0 0/.6)}
.ncard__tags{display:flex; gap:5px; margin-top:8px; flex-wrap:wrap}
.minitag{font-size:10px; color:var(--text-dim); background:oklch(0.2 0.025 22/.7); padding:2px 7px; border-radius:var(--r-pill)}
.ncard--soon{filter:saturate(.45)}
.ncard--soon .poster{filter:brightness(.62)}
.ncard__soon{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:oklch(0.1 0.02 40/.4); backdrop-filter:blur(3px)}
.ncard__lock{width:34px; height:34px; color:var(--text-dim)}
.ncard__soonlbl{font-weight:800; font-size:12px; letter-spacing:.2em; color:var(--text)}
.ncard__notify{display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700; color:var(--amber-bright); padding:7px 14px; border-radius:var(--r-pill); box-shadow:inset 0 0 0 1px oklch(0.60 0.105 25/.4); transition:background .2s, box-shadow .2s}
.ncard__notify.is-on{background:oklch(0.45 0.14 24/.30); box-shadow:inset 0 0 0 1px oklch(0.60 0.105 25/.6)}
.ncard__notify .ic{margin-left:-2px}
.catalog__empty{grid-column:1 / -1; text-align:center; color:var(--text-mute); font-size:13px; padding:42px 0}

/* ============ СТРАНИЦА НОВЕЛЛЫ ============ */
.detail__hero{position:relative; height:clamp(320px, 46vh, 460px)}
/* .detail__back убрана: «назад» — нативная TG-кнопка (фидбек 2026-06-12) */
.detail__body{position:absolute; left:0; right:0; bottom:0; padding:0 18px 18px}
.detail__title{font-family:var(--font-display); font-size:44px; line-height:1; text-shadow:0 3px 26px oklch(0 0 0/.6)}
.detail__sec{padding:20px 18px 0}
.detail__lead{color:var(--text-dim); font-size:14.5px; line-height:1.65}
.detail__tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:11px}
/* прогресс чтения на детальной (заход РИДЕР) */
.detail__prog{display:flex; align-items:center; gap:12px; margin:0 0 12px}
.detail__progbar{flex:1; height:4px; border-radius:var(--r-pill); background:oklch(0.22 0.02 24); overflow:hidden}
.detail__progbar i{display:block; height:100%; background:linear-gradient(90deg, var(--amber), var(--amber-bright)); box-shadow:0 0 8px var(--amber-bright)}
.detail__proglbl{flex:none; font-size:12px; color:var(--text-dim)}
/* редизайн: секции — Cormorant italic вместо капс-надбровий (мокап «Кристаллы») + угасающая тёплая линия */
.eyebrow{font-family:var(--font-display); font-size:25px; letter-spacing:.012em; text-transform:none; color:var(--text); margin:26px 0 12px; line-height:1.1;
  display:flex; align-items:center; gap:12px}
.eyebrow::after{content:""; flex:1; height:1px; margin-top:3px; background:linear-gradient(90deg, var(--rose-line), transparent 85%)}
.coll-head .eyebrow{flex:1; margin-right:12px}
/* разделитель-пика (хвост маскота, умеренная атрибутика): линии сходятся к спейду по центру */
.tailrule{display:flex; align-items:center; gap:11px; margin:26px 16px 2px; pointer-events:none}
.tailrule::before,.tailrule::after{content:""; flex:1; height:1px}
.tailrule::before{background:linear-gradient(90deg, transparent 10%, var(--rose-line))}
.tailrule::after{background:linear-gradient(90deg, var(--rose-line), transparent 90%)}
.tailrule svg{flex:none; opacity:.75}
/* ── ЧИБИ-МАСКОТ: живые виньетки (сидит на кромках блоков, выглядывает у заголовков) ── */
.chibi{pointer-events:none; user-select:none; -webkit-user-drag:none; filter:drop-shadow(0 4px 10px oklch(0 0 0/.45))}
.subwrap{position:relative}
.chibi--sub{position:absolute; top:0; right:50px; width:64px; transform:translateY(calc(-100% + 10px)); z-index:4}   /* мокап юзера: ступни на кромке карточки, чиби целиком над ней */
.catalog__head{position:relative}
/* выглядывает из-за правого края с наклоном: голова на уровне заголовка, ноги уходят за край (пример.png юзера) */
.chibi--cat{position:absolute; right:-32px; top:14px; width:100px; transform:rotate(-40deg); z-index:3}   /* ниже (из-под шапки) + докручен по фидбэку */
/* ── чиби-споты (финальный набор после вердиктов юзера) ── */
.chibi--daily{position:absolute; top:12px; right:18px; width:66px; z-index:3}   /* с подарком возле заголовка; 66px — шторка стала короче без стрик-блока, 82px нависал на сетку (фидбек) */
.sub__tiers{position:relative}   /* чиби с тарифа убран (фидбэк: перегруз с артом); после оплаты — chibi--sub сверху карточки */
.wheel-actions{position:relative}
.stat-grid{position:relative}
.chibi--stats{position:absolute; top:0; right:19px; width:64px; transform:translateY(calc(-100% + 10px)); z-index:3}   /* мокап юзера: ступни на кромке правой плитки */   /* сидит на правой стат-плитке */

/* ============ ПРОФИЛЬ ============ */
.pf__head{display:flex; flex-direction:column; align-items:center; text-align:center; padding:30px 18px 4px}   /* верхний запас: орбита-пины (отриц. top) не режутся верхом .view */
.pf__avwrap{position:relative; width:96px; height:96px; margin-bottom:14px}
.pf__avatar{position:absolute; inset:0; width:96px; height:96px; background:none; border:none; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .12s var(--ease)}
.pf__avatar:active{transform:scale(.96)}
@property --p{syntax:'<percentage>'; inherits:false; initial-value:0%}
.pf__ring{position:absolute; inset:-6px; border-radius:50%; background:conic-gradient(var(--amber) var(--p,65%), oklch(0.3 0.02 45/.5) 0); animation:ringFill .9s var(--ease-2) both}
@keyframes ringFill{from{--p:0%}}
.pf__ring::after{content:""; position:absolute; inset:4px; border-radius:50%; background:var(--bg)}
.pf__face{position:absolute; inset:4px; border-radius:50%; overflow:hidden; background:oklch(0.22 0.035 35); box-shadow:inset 0 0 0 2px oklch(0.60 0.105 25/.3); display:grid; place-items:center; font-family:var(--font-display); font-size:36px; color:var(--text)}   /* вплотную к прогресс-кольцу (без зазора, фидбэк) */
/* косметика «Рога» (ассет партнёра, разделён на 2): рожки ЗА фоткой (DOM до .pf__face), торчат по бокам макушки */
.pf__avatar--framed .pf__face{box-shadow:inset 0 0 0 2px oklch(0.55 0.19 23), 0 0 20px oklch(0.5 0.18 24/.55)}
.pf__horns{position:absolute; left:50%; top:-25.3px; transform:translateX(-50%); width:84.5%; pointer-events:none; filter:drop-shadow(0 2px 5px oklch(0 0 0/.4))}   /* цельная пара ЗА фоткой (DOM до .pf__face); торчат, скрыта только нижняя часть (мокап юзера) */
.pf__photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 20%}
.pf__initial{position:relative; z-index:1; font-family:var(--font-display)}
.pf__cam{position:absolute; right:-1px; bottom:-1px; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; z-index:4;
  background:linear-gradient(150deg,var(--amber),var(--amber-deep)); box-shadow:0 3px 9px oklch(0 0 0/.5), inset 0 1px 0 oklch(1 0 0/.25)}
.pf__cam .ic{width:13px; height:13px; stroke:oklch(0.97 0 0); stroke-width:1.9}   /* белая, как все иконки (была тёмная на красном — фидбек) */
/* орбита закреплённых достижений вокруг аватара */
.pf__orbit{position:absolute; width:32px; height:32px; border-radius:9px; overflow:hidden; box-sizing:border-box; z-index:5; cursor:pointer; -webkit-tap-highlight-color:transparent; padding:0;
  border:2px solid color-mix(in oklab, var(--ac, oklch(0.8 0.12 72)) 78%, transparent); box-shadow:0 3px 8px oklch(0 0 0/.45)}
.pf__orbit__img{width:100%; height:100%; object-fit:cover; display:block}
.pf__orbit--0{top:-12px; left:-20px; animation:pinIn .34s var(--ease-2) both, orbitF 4.6s ease-in-out infinite .34s}
.pf__orbit--1{top:-12px; right:-20px; animation:pinIn .34s var(--ease-2) .06s both, orbitF 4.6s ease-in-out infinite .4s}
.pf__orbit--2{top:33px; left:-29px; animation:pinIn .34s var(--ease-2) .12s both, orbitF 5.2s ease-in-out infinite .46s}
.pf__orbit--3{top:33px; right:-29px; animation:pinIn .34s var(--ease-2) .18s both, orbitF 5.6s ease-in-out infinite .52s}
.pf__orbit--solo{top:-14px; left:50%; margin-left:-15px; animation:pinIn .34s var(--ease-2) both, orbitF 4.8s ease-in-out infinite .34s}
@keyframes orbitF{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes pinIn{0%{transform:scale(0) rotate(-40deg); opacity:0}60%{transform:scale(1.15) rotate(6deg); opacity:1}100%{transform:scale(1) rotate(0)}}
.pf__id{display:flex; align-items:center; gap:8px; max-width:88vw}
.pf__name{font-family:var(--font-display); font-size:31px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.pf__rename{flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:var(--text-mute); box-shadow:inset 0 0 0 1px var(--line-soft); -webkit-tap-highlight-color:transparent; transition:transform .12s var(--ease),color .2s}
.pf__rename:active{transform:scale(.9); color:var(--amber-bright)}
.pf__rank{margin-top:4px; font-size:12.5px; color:var(--text-dim); letter-spacing:.02em; max-width:92vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pf__vip{display:inline-flex; align-items:center; gap:6px; margin-top:9px; font-size:11.5px; font-weight:700; letter-spacing:.05em; color:var(--amber-bright); padding:4px 12px; border-radius:var(--r-pill); box-shadow:inset 0 0 0 1px oklch(0.60 0.105 25/.4)}
.pf__vip[data-buy]{cursor:pointer; position:relative; overflow:hidden}
.pf__vip[data-buy]::after{content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 32%, oklch(1 0 0/.16) 50%, transparent 68%); transform:translateX(-130%); animation:vipSweep 3.6s ease-in-out 1.2s infinite}
@keyframes vipSweep{0%,74%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:11px; padding:0 16px}
.stat{padding:10px 16px 12px; border-radius:var(--r); background:linear-gradient(180deg, oklch(0.198 0.032 23), oklch(0.158 0.025 22)); box-shadow:inset 0 0 0 1px oklch(0.52 0.07 24/.28)}
.stat__v{font-family:var(--font-display); font-size:34px; color:var(--amber-bright)}
.stat__l{font-size:12.5px; color:var(--text-dim); margin-top:3px}   /* пояснение мельче: главный — красный показатель (фидбек) */
.seg-link{font-size:13px; color:var(--amber-bright); font-weight:600; -webkit-tap-highlight-color:transparent; transition:opacity .15s}
.seg-link:active{opacity:.55}
/* достижения — сетка-витрина (без бокового скролла), тап → шторка с условиями */
.ach-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px 9px; padding:0 16px}
.ach2{display:flex; flex-direction:column; align-items:center; gap:6px; background:none; -webkit-tap-highlight-color:transparent; transition:transform .12s var(--ease)}
.ach2:active{transform:scale(.92)}
.ach2__med{width:54px; height:54px; border-radius:15px; overflow:hidden; box-sizing:border-box; border:2px solid var(--line); box-shadow:0 2px 7px oklch(0 0 0/.4)}
.ach2__img{width:100%; height:100%; object-fit:cover; display:block}
.ach2.is-on .ach2__med{border-color:color-mix(in oklab, var(--ac) 82%, transparent); box-shadow:0 0 13px color-mix(in oklab, var(--ac) 42%, transparent), 0 2px 7px oklch(0 0 0/.4)}
.ach2.is-off .ach2__img{filter:grayscale(.92) brightness(.42)}
.ach2.is-off .ach2__l{opacity:.62}
.ach2{position:relative}
/* витрина-превью достижений в профиле */
.ach-prog{height:5px; border-radius:99px; background:oklch(1 0 0/.07); overflow:hidden; margin:2px 0 12px}
.ach-prog > i{display:block; height:100%; width:100%; transform-origin:left; transform:scaleX(var(--pct, 0)); border-radius:99px; background:linear-gradient(90deg, var(--amber-deep), var(--amber)); animation:achProg .9s var(--ease-2) .25s both}   /* scaleX (GPU) вместо width — без jank/5fps */
@keyframes achProg{from{transform:scaleX(0)}}
.ach-prev{display:grid; grid-template-columns:repeat(5, 1fr); gap:14px 9px}
.ach-prev__hint{font-size:12px; color:var(--text-mute); margin:-4px 0 11px}
.ach-prev__more{display:flex; flex-direction:column; align-items:center; gap:6px; background:none; -webkit-tap-highlight-color:transparent; transition:transform .12s var(--ease)}
.ach-prev__more:active{transform:scale(.92)}
.ach-prev__more-n{width:54px; height:54px; border-radius:15px; display:grid; place-items:center; font-family:var(--font-display); font-size:17px; color:var(--amber-bright); background:oklch(1 0 0/.03); box-shadow:inset 0 0 0 1.5px color-mix(in oklab, var(--amber) 38%, transparent)}
/* экран достижений (push) — назад через нативную TG-кнопку, без своей */
.ach-scr__h{font-family:var(--font-display); font-size:28px}
.ach-scr__head{display:flex; flex-direction:column; gap:9px; padding-top:14px}
.ach-scr__count{font-family:var(--font-display); font-size:34px; line-height:1; color:var(--text)}
.ach-scr__count b{color:var(--amber-bright)}
.ach-scr__count span{font-size:20px; color:var(--text-mute)}
.ach-prog--lg{height:7px; margin:0}
.ach-scr__rar{display:flex; flex-wrap:wrap; gap:13px; font-size:12px; color:var(--text-dim)}
.ach-rar{display:inline-flex; align-items:center; gap:5px}
.ach-rar__dot{width:8px; height:8px; border-radius:50%}
.ach-scr__scope{margin:14px 16px 4px}
.ach-scr__body .ach-grid{margin-top:14px}
.ach2__l{font-size:10.5px; line-height:1.2; color:var(--text-dim); text-align:center; max-width:60px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:calc(1.2em * 2)}   /* 2 строки макс + фикс высота ряда (длинные имена не прыгают) */
/* шторка имени / аватар-пикер / достижения */
.name-input{width:100%; padding:14px 16px; border-radius:var(--r); background:var(--surface); color:var(--text); font-size:16px; font-family:inherit; box-shadow:inset 0 0 0 1px var(--line-soft); outline:none; transition:box-shadow .2s}
.name-input::placeholder{color:var(--text-mute)}
.name-input:focus{box-shadow:inset 0 0 0 1.5px var(--amber)}
.name-input.err{box-shadow:inset 0 0 0 1.6px oklch(0.62 0.21 25)}
.name-input.shake{animation:nameShake .4s}
@keyframes nameShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.av-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0 12px}
.av-pick{display:flex; flex-direction:column; gap:6px; padding:0; background:none; -webkit-tap-highlight-color:transparent; transition:transform .12s var(--ease)}
.av-pick:active{transform:scale(.95)}
.av-pick img{width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center 16%; border-radius:12px; box-shadow:inset 0 0 0 1px var(--line-soft)}
.av-pick span{font-size:12px; color:var(--text-dim); display:flex; align-items:center; justify-content:center; gap:4px}
.av-pick--rar img{box-shadow:inset 0 0 0 2px var(--rc), 0 0 14px color-mix(in oklab,var(--rc) 42%, transparent)}
.av-pick--rar.sel img{box-shadow:inset 0 0 0 2.5px var(--rc), 0 0 22px color-mix(in oklab,var(--rc) 68%, transparent)}
.av-pick--rar.sel span{color:var(--text)}
/* кроп аватарки — кружок + перетаскивание фото */
.crop{ width:min(64vw,240px); height:min(64vw,240px); margin:16px auto 14px; border-radius:50%; overflow:hidden; position:relative; touch-action:none; cursor:grab;
  box-shadow:inset 0 0 0 3px var(--rc), 0 0 0 5px var(--surface), 0 0 24px color-mix(in oklab, var(--rc) 42%, transparent) }
.crop.grabbing{ cursor:grabbing }
.crop__img{ width:100%; height:100%; object-fit:cover; pointer-events:none; user-select:none; -webkit-user-drag:none }
.ach-list{display:flex; flex-direction:column; gap:8px; margin:14px 0 6px; max-height:60vh; overflow-y:auto}
.ach-li{display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:var(--r); background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-soft)}
.ach-li.is-off{opacity:.52}
.ach-li.focus{box-shadow:inset 0 0 0 1.5px var(--amber)}
.ach-li.pulse{animation:achPulse .85s var(--ease)}
@keyframes achPulse{0%{box-shadow:inset 0 0 0 1.5px var(--amber)}45%{box-shadow:inset 0 0 0 2px var(--amber), 0 0 16px oklch(0.60 0.105 25/.45)}100%{box-shadow:inset 0 0 0 1.5px var(--amber)}}
.ach-li__med{flex:none; width:48px; height:48px; border-radius:13px; overflow:hidden; box-sizing:border-box; border:2px solid var(--line)}
.ach-li.is-on .ach-li__med{border-color:color-mix(in oklab, var(--ac) 82%, transparent); box-shadow:0 0 11px color-mix(in oklab, var(--ac) 38%, transparent)}
.ach-li.is-off .ach-li__med .ach2__img{filter:grayscale(.92) brightness(.42)}
.ach-li__txt{display:flex; flex-direction:column; gap:2px; flex:1; min-width:0}
.ach-li__txt b{font-size:14px; font-weight:700}
.ach-li__rar{font-size:10px; font-weight:600; color:var(--ac); letter-spacing:.03em; margin-left:3px}
.ach-li.is-off .ach-li__rar{color:var(--text-mute)}
.ach-li__txt i{font-size:11.5px; color:var(--text-mute); font-style:normal}
.ach-pin{flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:var(--text-mute); box-shadow:inset 0 0 0 1px var(--line-soft); -webkit-tap-highlight-color:transparent; transition:transform .12s var(--ease)}
.ach-pin.on{color:var(--amber-bright); box-shadow:inset 0 0 0 1.5px oklch(0.60 0.105 25/.5); background:oklch(0.45 0.14 25/.18)}
.ach-pin .ic{stroke:currentColor}
.ach-pin:active{transform:scale(.9)}
/* ── детальная карточка достижения (за что / когда / порядковый номер) ── */
.achd-pop{position:fixed; inset:0; z-index:140; display:grid; place-items:center; padding:22px}
.achd{position:relative; z-index:1; width:min(86vw,338px); max-height:88vh; overflow-y:auto; border-radius:14px; padding:26px 22px 18px; text-align:center;
  background:linear-gradient(oklch(0.17 0.022 23), oklch(0.10 0.014 22)); box-shadow:0 24px 64px oklch(0 0 0/.62), inset 0 0 0 1px oklch(1 0 0/.06); animation:achdIn .42s var(--ease-2) both}
@keyframes achdIn{0%{opacity:0; transform:scale(.9) translateY(16px)}100%{opacity:1; transform:scale(1) translateY(0)}}
.achd__glow{position:absolute; top:-6%; left:50%; width:240px; height:240px; transform:translateX(-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, color-mix(in oklab, var(--ag, var(--ac)) 42%, transparent), transparent 64%); animation:achdGlow 3s ease-in-out infinite}
@keyframes achdGlow{0%,100%{opacity:.4; transform:translateX(-50%) scale(1)}50%{opacity:.7; transform:translateX(-50%) scale(1.1)}}
.achd__badge{position:relative; width:120px; height:120px; margin:0 auto 14px; border-radius:26px; overflow:hidden; box-sizing:border-box;
  border:3px solid color-mix(in oklab, var(--ac) 82%, transparent); box-shadow:0 0 28px color-mix(in oklab, var(--ac) 48%, transparent), 0 8px 22px oklch(0 0 0/.5); animation:achdBadge .56s var(--ease-2) .08s both}
@keyframes achdBadge{0%{opacity:0; transform:scale(.45) rotate(-12deg)}62%{transform:scale(1.08) rotate(3deg)}100%{opacity:1; transform:scale(1) rotate(0)}}
.achd__badge img{width:100%; height:100%; object-fit:cover; display:block}
.achd__badge.locked{border-color:color-mix(in oklab, var(--ac) 28%, oklch(0.3 0.01 45))}
.achd__badge.locked img{filter:grayscale(.92) brightness(.4)}
.achd__shine{position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg, transparent 38%, oklch(1 0 0/.42) 50%, transparent 62%); transform:translateX(-130%); animation:achdShine .85s var(--ease) .55s forwards}
@keyframes achdShine{to{transform:translateX(130%)}}
.achd__name{font-family:var(--font-display); font-size:25px; margin-top:2px}
.achd__rar{font-size:11px; font-weight:700; color:var(--ac); letter-spacing:.09em; text-transform:uppercase; margin-top:3px}
.achd__num{font-family:var(--font-display); font-size:60px; color:color-mix(in oklab, var(--ag, var(--ac)) 80%, white); margin-top:15px; line-height:1; letter-spacing:-.01em; font-variant-numeric:tabular-nums; filter:drop-shadow(0 0 20px color-mix(in oklab, var(--ag, var(--ac)) 50%, transparent))}
.achd__sub{font-size:12.5px; color:var(--text-dim); margin-top:7px; padding:0 8px}
.achd__sub b{color:var(--text); font-weight:700}
.achd__rows{margin-top:18px; display:flex; flex-direction:column; border-radius:14px; overflow:hidden; box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--ac) 16%, var(--line-soft)); text-align:left; background:linear-gradient(color-mix(in oklab, var(--ac) 6%, oklch(1 0 0/.02)), oklch(1 0 0/.012))}
.achd__row{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 14px}
.achd__row + .achd__row{border-top:1px solid color-mix(in oklab, var(--ac) 12%, var(--line-soft))}
.achd__k{font-size:12.5px; color:var(--text-mute); flex:none}
.achd__v{font-size:13px; color:var(--text); text-align:right}
.achd__lockrow{display:inline-flex; align-items:center; gap:7px; margin-top:14px; font-size:13px; color:var(--text-mute)}
.achd__lockrow .ic{width:14px; height:14px}
.achd__wear{display:flex; align-items:center; justify-content:center; gap:7px; margin-top:16px}
.achd__wear .ic{width:17px; height:17px}
.achd__wear.on{background:transparent; color:var(--text); box-shadow:inset 0 0 0 1.5px color-mix(in oklab, var(--amber) 55%, transparent)}   /* «Снять» = вторичный вид */
.ach-li__swap{flex:none; display:grid; place-items:center; width:34px; height:34px; color:var(--text-mute); background:none; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .12s var(--ease),color .15s}
.ach-li__swap:active{transform:scale(.85); color:var(--text)}
.swap-equip{margin-top:6px}
.swap-equip[disabled]{opacity:.4; pointer-events:none}
.set-evrow{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:2px 0 4px}
.set-test{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 14px; border-radius:var(--r); box-shadow:inset 0 0 0 1px var(--line-soft); font-size:12.5px; color:var(--text-dim)}
.set-test b{color:var(--amber-bright)}
.set-test__btns{display:flex; gap:6px; flex:none}
.set-test__b{width:42px; height:34px; border-radius:10px; background:oklch(1 0 0/.05); color:var(--text); font-weight:700; font-size:16px; box-shadow:inset 0 0 0 1px var(--line-soft); -webkit-tap-highlight-color:transparent; cursor:pointer; transition:transform .12s var(--ease)}
.set-test__b:active{transform:scale(.9)}
/* тост «Достижение получено» — баннер снизу, как в играх (очередь, тап = скрыть) */
.achtoast{position:fixed; left:50%; bottom:calc(var(--tabbar-h) + var(--safe-b) + 16px); transform:translateX(-50%); z-index:170; display:flex; align-items:center; gap:11px; padding:9px 17px 9px 9px; border-radius:15px; background:var(--surface-3); box-shadow:var(--sh-2), inset 0 0 0 1px color-mix(in oklab, var(--ac) 32%, transparent); max-width:90%; cursor:pointer; -webkit-tap-highlight-color:transparent; animation:achtIn .42s var(--ease-2) both}
.achtoast.out{animation:achtOut .24s var(--ease) forwards}
@keyframes achtIn{0%{opacity:0; transform:translate(-50%,20px)}100%{opacity:1; transform:translate(-50%,0)}}
@keyframes achtOut{to{opacity:0; transform:translate(-50%,12px)}}
.achtoast__med{flex:none; width:42px; height:42px; border-radius:11px; overflow:hidden; box-sizing:border-box; border:2px solid color-mix(in oklab, var(--ac) 78%, transparent); box-shadow:0 0 10px color-mix(in oklab, var(--ac) 42%, transparent)}
.achtoast__med img{width:100%; height:100%; object-fit:cover; display:block}
.achtoast__txt{display:flex; flex-direction:column; gap:1px; min-width:0}
.achtoast__txt b{font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--amber-bright)}
.achtoast__txt i{font-family:var(--font-display); font-size:16px; font-style:normal; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ach-li__swap .ic{width:16px; height:16px}
.achd__close{margin-top:18px}
.achd__wear + .achd__close{margin-top:10px}
/* ── ЭКСКЛЮЗИВНАЯ редкость (бета-тест): анимир. красный конический градиент-обводка («переливается» вращением). У остальных редкостей обводка статичная. Правила ПОСЛЕ is-on — чтобы перекрыть их border/box-shadow. ── */
@property --achxA { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes achxSpin { to { --achxA: 360deg; } }
.ach2.is-exclusive .ach2__med,
.ach-li.is-exclusive .ach-li__med,
.achd__badge.is-exclusive {
  border-color: transparent;
  background: conic-gradient(from var(--achxA), #2A0A12, #6E1426, #B22240, #E0506E, #F29BB0, #FBE0E6, #F29BB0, #E0506E, #B22240, #6E1426, #2A0A12) border-box;
}
.ach2.is-exclusive .ach2__med { animation: achxSpin 4s linear infinite; box-shadow: 0 0 15px color-mix(in oklab, #E0506E 52%, transparent), 0 2px 7px oklch(0 0 0/.4) }
.ach-li.is-exclusive .ach-li__med { animation: achxSpin 4s linear infinite; box-shadow: 0 0 12px color-mix(in oklab, #E0506E 48%, transparent) }
.achd__badge.is-exclusive { animation: achdBadge .56s var(--ease-2) .08s both, achxSpin 4s linear infinite; box-shadow: 0 0 32px color-mix(in oklab, #E0506E 55%, transparent), 0 8px 22px oklch(0 0 0/.5) }
/* орбита-пин: статичный градиент-ринг (не трогаем animation, иначе ломается float pinIn/orbitF) */
.pf__orbit.is-exclusive { border-color: transparent; background: linear-gradient(135deg, #6E1426, #B22240, #E0506E, #F29BB0, #E0506E, #B22240) border-box; box-shadow: 0 0 12px color-mix(in oklab, #E0506E 55%, transparent), 0 3px 8px oklch(0 0 0/.45) }
/* ЗАКРЫТЫЙ эксклюзив — гасим яркую градиент-обводку до уровня остальных locked (не светится ярче) */
.ach2.is-off.is-exclusive .ach2__med, .ach-li.is-off.is-exclusive .ach-li__med { background:none; border-color:var(--line); animation:none; box-shadow:0 2px 7px oklch(0 0 0/.4) }
.achd__badge.locked.is-exclusive { background:none; animation:achdBadge .56s var(--ease-2) .08s both; border-color:color-mix(in oklab, var(--ac) 28%, oklch(0.3 0.01 45)); box-shadow:0 8px 22px oklch(0 0 0/.5) }
/* одинокий последний элемент сетки repeat(5) (напр. 11-й эксклюзив) → центрировать отдельной строкой как спотлайт */

/* ============ МАГАЗИН ============ */
.shop__h1{font-family:var(--font-display); font-size:38px; padding:8px 16px 0; line-height:1}
.shop__whisper{padding:0 17px; margin:2px 0 0; text-align:left}
.shop__offer{margin:14px 16px 6px; border-radius:var(--r-lg); overflow:hidden; position:relative; box-shadow:var(--sh-2)}
.shop__offer .poster::before{background:radial-gradient(120% 80% at 80% 10%, oklch(0.5 0.15 18/.68), transparent 58%), linear-gradient(150deg, oklch(0.27 0.085 18), oklch(0.14 0.04 20))}
/* арт оффера (партнёр, 1432x1011: тёмный верх под текст, маскот снизу-справа) — блок подогнан ПОД фото */
.shop__offer{aspect-ratio:1432/1011}
.shop__offer-art{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.shop__offer-body{position:absolute; inset:0; padding:3px 18px 11px; display:flex; flex-direction:column; align-items:flex-start}   /* текст выше, низ ниже — воздух между ними */
/* состав набора: компактная колонка-список слева (не «базарные плюсы»), вверху чтобы не лезть на лицо */
.shop__offer-list{display:flex; flex-direction:column; gap:3px; margin-top:3px; font-size:12px; font-weight:600; color:var(--text-dim)}
.shop__offer-list > div{display:flex; align-items:center; gap:7px; text-shadow:0 1px 6px oklch(0 0 0/.85)}
.shop__offer-list span{white-space:nowrap}
.shop__offer-pk{height:15px; width:auto; filter:drop-shadow(0 0 3px oklch(0 0 0/.6))}
/* таймер с ценой — внизу, прямо над кнопкой */
.shop__offer .shop__offer-tm{margin-top:auto; margin-bottom:7px; align-self:flex-start}   /* специфичнее базового .shop__timer{margin-top:13px} — иначе auto-прижим вниз не работает */
.shop__offer-cta{margin-top:0}   /* обычная pill-кнопка; вниз её прижимает margin-top:auto таймера */
/* цвета под чёрно-красный арт (база wine розовила): глубокий тёмно-красный, плавный градиент */
.shop__offer-cta.btn--wine{background:linear-gradient(150deg, oklch(0.46 0.17 26), oklch(0.33 0.13 23) 55%, oklch(0.26 0.1 21)); box-shadow:0 8px 24px oklch(0.3 0.13 22/.55)}
.shop__offer .shop__offer-tm{background:oklch(0.13 0.035 18/.62); box-shadow:inset 0 0 0 1px oklch(0.42 0.12 22/.5)}
.shop__offer .shop__offer-tm b{color:oklch(0.62 0.2 27)}
.shop__offer .shop__offer-tm b.offer-clock{color:var(--text)}   /* таймер скидки — нейтрально-белый (фидбек: без текста, по часам и цене всё понятно) */
.shop__offer-lbl{font-size:11px; font-weight:800; letter-spacing:.14em; color:var(--wine-bright)}
.shop__offer-t{font-family:var(--font-display); font-size:27px; margin:0; line-height:1.15; text-shadow:0 1px 8px oklch(0 0 0/.75)}
.shop__offer-d{font-size:12.5px; color:var(--text-dim); text-shadow:0 1px 6px oklch(0 0 0/.8)}
.shop__timer{display:inline-flex; align-items:center; gap:7px; margin-top:13px; padding:8px 13px; border-radius:var(--r-pill); background:oklch(0.12 0.02 20/.5); font-variant-numeric:tabular-nums; font-weight:700; font-size:14px; box-shadow:inset 0 0 0 1px oklch(0.6 0.18 20/.35)}
.shop__timer b{color:var(--wine-bright)}
.shop__sec{padding:22px 16px 0}
.eyebrow--accent{color:var(--amber-bright)}
.eyebrow__hint{font-family:var(--font); font-style:normal; font-size:10.5px; font-weight:600; letter-spacing:.02em; color:var(--text-mute); text-transform:none; margin-left:7px; vertical-align:3px}
.bundle-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; align-items:start}
.bundle{position:relative; border-radius:var(--r); padding:13px 9px 11px; text-align:center; overflow:hidden; transition:transform .15s var(--ease);
  background:linear-gradient(180deg, oklch(0.19 0.045 330), oklch(0.145 0.035 327));   /* низ — та же сливовая гамма, что витрина, но СИЛЬНО темнее */
  box-shadow:inset 0 0 0 1px oklch(0.62 0.075 330/.45)}   /* лёгкая рамка товара — «совсем без рамки выглядит плохо» */
.bundle:active{transform:scale(.96)}
.bundle--best:active{transform:translateY(-7px) scale(.97)}
/* светлая витрина ЗАПОЛНЯЕТ всю арт-зону плитки до краёв (фидбэк: без «рамки в рамке» и тёмных полей вокруг).
   Кристаллы: светлый слой + фиолетовый арт поверх. Паки карт: только светлый слой, пак (альфа) прямо на нём */
.bundle__artbox{display:block; margin:-13px -9px 0; padding:10px 10px 8px; border-radius:var(--r) var(--r) 0 0}   /* фон = фон плитки (верх и низ не отличаются, фидбэк) */
.bundle__art{display:block; width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px; box-shadow:0 4px 14px oklch(0 0 0/.35)}
.bundle__amt{font-weight:800; font-size:16px; font-variant-numeric:tabular-nums; display:flex; align-items:center; justify-content:center; gap:5px; margin-top:7px}
.bundle__buy{margin-top:9px; font-weight:800; font-size:13px; padding:8px 4px; border-radius:var(--r-pill); background:oklch(0.27 0.05 330/.55); box-shadow:inset 0 0 0 1px oklch(0.55 0.07 332/.3)}
.bundle--best{background:linear-gradient(160deg, oklch(0.3 0.06 332/.5), oklch(0.155 0.04 328)); box-shadow:var(--glow-crystal), 0 0 0 1.5px oklch(0.77 0.135 332/.5); transform:translateY(-7px)}
.bundle--best .bundle__buy{background:linear-gradient(150deg,var(--c-crystal-2),var(--c-crystal)); color:oklch(0.2 0.05 332)}

/* ── ЕДИНЫЙ флаг-бейдж (верх-центр) — один стиль для тарифов И паков во всём магазине ── */
.flag{position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:3; font-size:9px; font-weight:800; letter-spacing:.04em; padding:3px 11px; border-radius:0 0 9px 9px; white-space:nowrap; box-shadow:0 2px 8px oklch(0 0 0/.45)}
.flag--hit{background:linear-gradient(90deg,var(--amber),var(--amber-deep)); color:oklch(0.96 0.012 28)}
.flag--max{background:linear-gradient(90deg,var(--c-crystal),var(--c-crystal-2)); color:oklch(0.2 0.05 332)}
.flag--x2{background:linear-gradient(90deg,var(--amber),var(--ember)); color:oklch(0.96 0.012 28)}

/* ── ПАКИ КАРТ в магазине: светлая витрина на всю арт-зону, пак (альфа) прямо на ней ── */
.cpack{position:relative; margin:-13px -9px 0; aspect-ratio:1/1; display:grid; place-items:center; border-radius:var(--r) var(--r) 0 0}   /* фон = фон плитки */
.cpack::before{content:""; height:86%; aspect-ratio:709/1100;
  background:url("../img/icons/pack-back.webp?3") center/100% 100% no-repeat;
  filter:drop-shadow(0 5px 12px oklch(0 0 0/.5))}
.cpack__n{position:absolute; left:50%; top:78%; transform:translate(-50%,-50%); font-family:var(--font-display); font-size:19px; color:oklch(0.93 0.06 90);
  text-shadow:0 1px 4px oklch(0 0 0/.85), 0 0 12px oklch(0 0 0/.7)}
/* ── распаковка ПРЕМИУМ: СВОБОДНЫЙ рез любой линией (кромка = линия юзера), арт пака, искры, 3D-отлёт крышки ── */
.tear{position:relative; width:min(76vw, 295px); aspect-ratio:709/1100; touch-action:none; cursor:grab; -webkit-tap-highlight-color:transparent; perspective:700px}   /* крупный пак (дофамин, фидбэк) */
/* аспект 709/1100 = ФИНАЛ-арт партнёра «пак финал.png» (тримнут по альфе, 760x1179, аспект совпал со старым 0.6446); при замене обновить тут и в .cpack::before */
.tear__glow{position:absolute; inset:-24%; pointer-events:none; filter:blur(12px); animation:breathe 3.4s ease-in-out infinite;
  background:radial-gradient(50% 50% at 50% 46%, oklch(0.5 0.12 332/.35), transparent 70%)}
.tear__piece{position:absolute; inset:0; backface-visibility:hidden;
  background:url("../img/icons/pack-back.webp?3") center/100% 100% no-repeat}
.tear__piece--body{filter:drop-shadow(0 12px 24px oklch(0 0 0/.55))}   /* тень по альфе арта (на одном слое — иначе двоится) */
.tear__piece--top{will-change:transform}
.tear .cpack__n{position:absolute; left:50%; top:84%; transform:translate(-50%,-50%); font-size:30px; color:oklch(0.93 0.06 90);
  text-shadow:0 1px 4px oklch(0 0 0/.85), 0 0 14px oklch(0 0 0/.7)}
.tear__svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible}
.tear__perf{fill:none; stroke:oklch(0.92 0.07 90/.65); stroke-width:1.7; stroke-dasharray:3.2 3.2; vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 3px oklch(0 0 0/.8))}
.tear__cutglow{fill:none; stroke:oklch(0.9 0.12 80/.6); stroke-width:7; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; filter:blur(3px)}
.tear__cutln{fill:none; stroke:oklch(0.97 0.05 90); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 6px oklch(0.92 0.12 85/.95))}
.tear__tip{position:absolute; width:16px; height:16px; border-radius:50%; transform:translate(-50%,-50%); opacity:0; pointer-events:none; z-index:6;
  background:radial-gradient(circle, #fff 0 18%, oklch(0.93 0.1 88/.55) 40%, transparent 70%); box-shadow:0 0 14px 5px oklch(0.93 0.11 85/.75)}
.tear-spark{position:absolute; width:3px; height:3px; border-radius:50%; z-index:6; pointer-events:none;
  background:oklch(0.96 0.08 88); box-shadow:0 0 7px oklch(0.9 0.13 80); animation:tspark .62s ease-out forwards}
@keyframes tspark{to{transform:translate(var(--sx), var(--sy)); opacity:0}}
.cpack__hint{position:absolute; bottom:-38px; left:50%; transform:translateX(-50%); white-space:nowrap; font-family:var(--font-display); font-style:italic; font-weight:500; font-size:15.5px; color:var(--whisper); animation:hintBlink 1.8s ease-in-out infinite; pointer-events:none}
@keyframes hintBlink{0%,100%{opacity:.55}50%{opacity:1}}
/* срез: «лезвие» гаснет взрывом, glow-линия вспыхивает и гаснет, крышка (по форме реза юзера) отлетает в 3D */
.tear.is-cut{cursor:default}
.tear.is-cut .tear__perf, .tear.is-cut .tear__cutln, .tear.is-cut .cpack__hint{opacity:0; transition:opacity .18s}
.tear.is-cut .tear__cutglow{animation:glowBurst .55s var(--ease-2) forwards}
@keyframes glowBurst{0%{opacity:1}45%{opacity:1}100%{opacity:0}}
.tear.is-cut .tear__tip{animation:tipBurst .45s var(--ease-2) forwards}
@keyframes tipBurst{0%{transform:translate(-50%,-50%) scale(1); opacity:1}100%{transform:translate(-50%,-50%) scale(5); opacity:0}}
.tear.is-cut .tear__piece--top{animation:tearOff3d .68s var(--ease-2) forwards}
@keyframes tearOff3d{
  0%{transform:none}
  30%{transform:rotateX(-46deg) translateY(-16px); opacity:1}
  100%{transform:translate3d(-26px,-150px,46px) rotateX(-82deg) rotate(-12deg); opacity:0}}
.tear.is-cut .tear__piece--body{animation:bodyJolt .5s var(--ease-2)}
@keyframes bodyJolt{0%{transform:none}35%{transform:translateY(4px) scale(1.014)}100%{transform:none}}

/* ── счётчик гарантии легендарки (pity) ── */
.pity{margin-top:11px}
.pity__bar{height:5px; border-radius:var(--r-pill); background:oklch(0.3 0.02 45/.6); overflow:hidden}
.pity__bar i{display:block; height:100%; border-radius:inherit; transform-origin:left; background:linear-gradient(90deg, oklch(0.62 0.16 70), oklch(0.80 0.15 80)); box-shadow:0 0 10px oklch(0.8 0.15 80/.55); transition:transform .5s var(--ease)}
.pity__t{margin-top:6px; font-size:11px; color:var(--text-mute); text-align:center}
.pity__t b{color:oklch(0.85 0.13 82); font-variant-numeric:tabular-nums}

/* ── распаковка пака (полноэкранный оверлей в #popup-root) ── */
.packrev{position:relative; z-index:1; width:min(92vw, 480px); display:flex; flex-direction:column; align-items:center; gap:14px; padding:10px 0 4px}
.packrev .confetti{top:34%}
.packrev__flash{position:absolute; inset:-30%; pointer-events:none; background:radial-gradient(circle at 50% 36%, oklch(0.95 0.07 85/.9), transparent 55%); animation:prFlash .7s var(--ease-2) both}
@keyframes prFlash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
.packrev__grid{display:grid; gap:9px; width:100%; justify-content:center}
.packrev__grid--one{grid-template-columns:min(56vw, 215px)}
.packrev__grid--three{grid-template-columns:repeat(3, 1fr); max-width:min(88vw, 420px)}
.packrev__grid--ten{grid-template-columns:repeat(5, 1fr); max-width:min(92vw, 460px)}
.packrev__card{opacity:0; transform:translateY(16px) scale(.9); animation:prCard .5s var(--ease-2) var(--pd) both}
.packrev__card.is-top .card{box-shadow:0 0 22px oklch(0.78 0.14 320/.55)}
@keyframes prCard{to{opacity:1; transform:none}}
.packrev__pity{font-size:11.5px; color:var(--text-mute)}

/* ── стопка выдачи по одной (тап/свайп уводит верхнюю карту) ──
   КРУПНАЯ карта (дофамин, фидбэк юзера); все карты в DOM сразу grid-стеком (арты предзагружены), видна только .cur */
.pstack{position:relative; display:grid; width:min(80vw, 310px); margin-top:4px; touch-action:none; cursor:pointer}
/* рубашки колоды: реально ДВИЖУТСЯ (слот-1 → фронт, слот-2 → слот-1) с плавным transition; позы ставит JS инлайном */
/* «ТИНДЕР»-стопка: рубашек НЕТ — сзади края РЕАЛЬНЫХ следующих карт; позы ставит JS (layout), движение = transition */
.pstack__card{grid-area:1/1; visibility:hidden; transition:transform .3s var(--ease-2), opacity .3s var(--ease-2)}
.pstack__card .card{width:100%}
.pstack__card.cur.is-rare{filter:drop-shadow(0 0 18px var(--rc)); animation:rarePulse 1.5s ease-in-out .25s infinite}
@keyframes rarePulse{0%,100%{filter:drop-shadow(0 0 14px var(--rc))}50%{filter:drop-shadow(0 0 32px var(--rc))}}
/* драг: карта липнет к пальцу (transition off; пульс глушит JS инлайном — иначе его fill перебивает палец) */
.pstack__card.drag{transition:none !important; cursor:grabbing}
.pstack__cnt{font-variant-numeric:tabular-nums; font-weight:700; font-size:14px; color:var(--text-dim)}
.pstack__hint{font-family:var(--font-display); font-style:italic; font-weight:500; font-size:14.5px; color:var(--whisper); animation:hintBlink 1.8s ease-in-out infinite}
.packrev__pity b{color:oklch(0.85 0.13 82)}
.packrev__ok{max-width:280px}

/* ── «Ложа» — статус за траты ── */
.lodge{padding:14px 16px; border-radius:var(--r); background:linear-gradient(150deg, oklch(0.26 0.055 24/.5), var(--surface)); box-shadow:inset 0 0 0 1px oklch(0.60 0.105 25/.22)}
.lodge__head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.lodge__t{font-weight:700; font-size:14.5px; display:inline-flex; align-items:center; gap:7px}
.lodge__amt{font-size:11px; color:var(--text-mute); font-variant-numeric:tabular-nums}
.lodge__bar{height:5px; border-radius:var(--r-pill); background:oklch(0.3 0.02 45/.6); overflow:hidden}
.lodge__bar i{display:block; height:100%; border-radius:inherit; transform-origin:left; background:linear-gradient(90deg,var(--amber-deep),var(--amber)); box-shadow:0 0 10px oklch(0.55 0.15 25/.5); transition:transform .5s var(--ease)}
.lodge__next{margin-top:8px; font-size:11.5px; color:var(--text-dim); line-height:1.45}

.product{display:flex; align-items:center; gap:14px; padding:16px; border-radius:var(--r); background:linear-gradient(180deg, oklch(0.198 0.032 23), oklch(0.158 0.025 22)); box-shadow:inset 0 0 0 1px oklch(0.52 0.07 24/.28); margin-bottom:11px}
.product__ic{width:48px; height:48px; flex:none; border-radius:10px; display:grid; place-items:center; font-size:26px; background:radial-gradient(circle at 40% 30%, oklch(0.30 0.07 24/.8), oklch(0.20 0.04 22)); box-shadow:inset 0 0 0 1px oklch(0.55 0.10 25/.3)}
.product__main{flex:1; min-width:0}
.product__t{font-weight:700; font-size:15px}
.product__d{font-size:12px; color:var(--text-mute); margin-top:2px; line-height:1.4}
.product.is-owned{opacity:.82}
.product__owned{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:800; color:var(--good); padding:5px 11px; border-radius:var(--r-pill); background:oklch(0.6 0.13 150/.14); box-shadow:inset 0 0 0 1px oklch(0.6 0.13 150/.4); white-space:nowrap}
.shop__demo{text-align:center; color:var(--text-mute); font-size:11px; line-height:1.5; margin:14px 16px 0}
.product--vip{background:linear-gradient(150deg, oklch(0.28 0.07 24/.6), var(--surface)); box-shadow:inset 0 0 0 1px oklch(0.60 0.105 25/.3)}
/* косметика «Рога»: живое превью — мини-аватар с рожками маскота (img/icons/horns.webp, ассет партнёра) */
.product--cos{background:linear-gradient(150deg, oklch(0.26 0.08 22/.4), var(--surface))}
.cos-demo{position:relative; width:50px; height:50px; flex:none; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-size:21px; color:var(--amber-bright);
  background:radial-gradient(circle at 38% 28%, var(--surface-3), var(--surface-2)); box-shadow:inset 0 0 0 2px oklch(0.52 0.18 23), 0 0 14px oklch(0.5 0.18 24/.45)}
.cos-demo__f{position:relative; z-index:1}
.cos-demo__h{position:absolute; left:50%; top:-10px; transform:translateX(-50%); width:78%; z-index:2; pointer-events:none; filter:drop-shadow(0 2px 4px oklch(0 0 0/.5))}
/* ── заглушка под арт (выглядит намеренно: рамка + иконка + метка «арт») ── */
.art-slot{position:relative; display:grid; place-items:center; align-content:center; gap:5px; border-radius:var(--r-sm); overflow:hidden; color:var(--text-mute);
  background:radial-gradient(120% 100% at 50% 0%, var(--surface-3), var(--surface-2)); box-shadow:inset 0 0 0 1px var(--line-soft)}
.art-slot::before{content:""; position:absolute; inset:0; background:repeating-linear-gradient(135deg, transparent 0 9px, oklch(0.5 0.02 50/.04) 9px 10px); pointer-events:none}
.art-slot__lbl{font-size:11px; font-weight:600; letter-spacing:.02em}
.art-slot__tag{position:absolute; top:6px; right:7px; font-size:7.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--text-mute); opacity:.65; padding:2px 5px; border-radius:var(--r-pill); box-shadow:inset 0 0 0 1px var(--line-soft); background:oklch(0.18 0.02 40/.5)}
.art-slot--hero{aspect-ratio:16/7.4; border-radius:0}
.art-slot--hero::after{content:""; position:absolute; inset:auto 0 0 0; height:42%; background:linear-gradient(transparent, oklch(0.16 0.02 40/.55)); pointer-events:none}   /* затемнение нижней трети под текст */
/* слот ЗАПОЛНЕН реальным артом (маскот в hero подписки): рамка/штриховка прочь, картинка cover */
.art-slot--filled{box-shadow:none; background:oklch(0.12 0.02 330)}
.art-slot--filled::before{display:none}
.art-slot__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}

/* ── ПОДПИСКА (герой магазина) · корень = .submem (НЕ .sub — конфликт с подзаголовком колеса `.wheel-screen .sub`) ──
   РЕДИЗАЙН v2: арт + вся инфа в ОДНОМ блоке с лёгкой рамкой (фидбэк: «арт отдельно — хуже, было лучше в обводке»);
   арт растворяется в тело карточки, заголовок Cormorant italic поверх */
.submem{position:relative; margin:14px 16px 8px; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(180deg, oklch(0.205 0.038 23), oklch(0.148 0.025 21)); box-shadow:var(--sh-2)}
/* рамка ПОВЕРХ арта (inset-shadow самого блока арт перекрыл бы) */
.submem::after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px var(--rose-line); pointer-events:none; z-index:3}
.sub__herowrap{position:relative; margin-bottom:2px}
/* растворение арта в тело карточки градиент-маской (без внутренних коробок) */
.sub__herowrap .art-slot--hero{aspect-ratio:16/8.8;
  -webkit-mask-image:linear-gradient(180deg, #000 52%, oklch(0 0 0/.55) 76%, transparent 99%);
  mask-image:linear-gradient(180deg, #000 52%, oklch(0 0 0/.55) 76%, transparent 99%)}
.sub__herowrap .art-slot--hero::after{display:none}
.sub__herocap{position:absolute; left:16px; right:16px; bottom:-4px; pointer-events:none}
.sub__kick{font-size:12.5px; color:var(--text-dim); letter-spacing:.04em; margin-top:2px; text-shadow:0 1px 8px oklch(0 0 0/.7)}
.sub__body{padding:14px 16px 16px}
.sub__body .eyebrow{margin-top:0}
.sub__h2{font-family:var(--font-display); font-size:37px; line-height:.98; margin:0; text-shadow:0 2px 20px oklch(0 0 0/.75)}
.sub__perks{list-style:none; padding:0; margin:0 0 16px; display:grid; gap:9px}
.perk{display:flex; align-items:center; gap:11px; font-size:13.5px; line-height:1.35; color:var(--text)}
.perk__ic{width:28px; height:28px; flex:none; border-radius:8px; display:grid; place-items:center;
  background:radial-gradient(circle at 38% 28%, oklch(0.40 0.10 25/.40), oklch(0.26 0.06 23/.5)); box-shadow:inset 0 0 0 1px oklch(0.60 0.105 25/.3)}
.perk > span:last-child{flex:1; min-width:0}   /* flex ТОЛЬКО на текст; иначе .perk span ловил и плитку-иконку (тоже span) и раздувал её */
.sub__tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:12px; align-items:start}
.subtier{position:relative; display:flex; flex-direction:column; align-items:center; gap:1px; padding:18px 6px 12px; border-radius:var(--r); text-align:center; cursor:pointer;
  background:oklch(0.200 0.030 24/.75); box-shadow:inset 0 0 0 1px var(--line-soft); transition:transform .16s var(--ease), box-shadow .2s, background .2s}
.subtier:active{transform:scale(.97)}
.subtier--pop{box-shadow:inset 0 0 0 1px oklch(0.60 0.105 25/.32)}
.subtier__label{font-size:11.5px; color:var(--text-dim); margin-top:6px}
.subtier__price{font-weight:800; font-size:22px; font-variant-numeric:tabular-nums; letter-spacing:-.01em; margin-top:1px}
.subtier__price i{font-style:normal; font-size:12px; font-weight:700; color:var(--text-dim); margin-left:1px}
.subtier__welcome{margin-top:7px; padding-top:7px; width:100%; justify-content:center; border-top:1px solid var(--line-soft); font-size:10.5px; font-weight:800; color:var(--c-crystal-2); font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:3px; white-space:nowrap}
.subtier.is-sel{background:linear-gradient(160deg, oklch(0.325 0.10 24/.7), oklch(0.205 0.04 23/.9)); box-shadow:0 0 0 1.5px oklch(0.585 0.15 25), 0 8px 22px oklch(0.4 0.14 24/.4); transform:translateY(-2px)}
.sub__value{display:flex; align-items:center; gap:5px; flex-wrap:wrap; justify-content:center; text-align:center; font-size:12px; color:var(--text-dim); line-height:1.4; margin:0 0 13px; padding:9px 12px; border-radius:var(--r-sm); background:oklch(0.27 0.045 332/.22); box-shadow:inset 0 0 0 1px oklch(0.77 0.12 332/.22)}
.sub__cta{padding:15px}
.sub__note{text-align:center; font-size:11px; color:var(--text-mute); margin:10px 0 0}
/* активная подписка — премиум-ощущение «уже у тебя» (перки в обычном цвете, срок акцентом); коробка остаётся, но в красном */
.submem--active{padding:16px; margin:14px 16px 8px; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(165deg, oklch(0.245 0.06 24/.6), var(--surface)); box-shadow:var(--sh-2), inset 0 0 0 1px var(--rose-line)}
.sub__active-head{display:flex; align-items:center; gap:13px; margin-bottom:15px}
.sub__crown{width:48px; height:48px; flex:none; border-radius:14px; display:grid; place-items:center;
  background:radial-gradient(circle at 40% 30%, oklch(0.42 0.12 25/.65), oklch(0.22 0.05 23)); box-shadow:inset 0 0 0 1px oklch(0.60 0.105 25/.4)}
.sub__active-t{font-family:var(--font-display); font-size:25px; line-height:1.1}
.sub__active-s{font-size:12.5px; color:var(--text-dim); margin-top:3px}
.sub__active-s b{color:var(--amber-bright); font-weight:700}
.sub__extend{margin-top:16px; padding-top:16px; border-top:1px solid var(--line-soft)}
.sub__extend-h{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute); margin-bottom:12px}

/* ============ КОЛЕСО ФОРТУНЫ ============ */
.wheel-screen{display:flex; flex-direction:column; align-items:center; padding:6px 16px 0; min-height:100%}
.wheel-screen h1{font-family:var(--font-display); font-size:36px; margin-top:8px}
.wheel-screen .sub{font-family:var(--font-display); font-style:italic; font-weight:500; color:var(--whisper); font-size:15.5px; margin:5px 0 8px; text-align:center}
.wheel-wrap{position:relative; width:min(82vw, 340px); aspect-ratio:1; margin:112px 0 14px}   /* +отступ сверху: голова чиби-указателя не лезет на подзаголовок (фидбэк) */
.wheel-glow{position:absolute; inset:-12%; border-radius:50%; background:radial-gradient(circle, oklch(0.55 0.16 25/.34), transparent 65%); filter:blur(14px); animation:breathe 3.5s ease-in-out infinite}
.wheel{position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 5px oklch(0.15 0.03 23), 0 0 0 8px oklch(0.56 0.145 25), 0 0 0 12px oklch(0.24 0.06 23), 0 0 0 13px oklch(0.70 0.14 25/.5), 0 0 32px oklch(0.50 0.16 25/.5), var(--sh-2)}
.wheel svg{width:100%; height:100%; display:block; border-radius:50%}
.wheel__seg-lbl{font-family:var(--font); font-size:13px; font-weight:800; fill:oklch(0.985 0.015 85); stroke:oklch(0.15 0.03 40/.6); stroke-width:0.5; paint-order:stroke fill; letter-spacing:-.02em}
.wheel__seg-lbl.is-jack{fill:oklch(0.95 0.04 340); font-size:15px}
.wheel-hub{position:absolute; top:50%; left:50%; width:46px; height:46px; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle at 42% 38%, oklch(0.27 0.026 42), oklch(0.12 0.016 34)); box-shadow:0 3px 11px oklch(0 0 0/.5), 0 0 22px oklch(0.50 0.14 25/.45); display:grid; place-items:center; z-index:3; pointer-events:none}
.wheel-hub svg{width:30px; height:30px; display:block}
/* чиби-указатель по мокапу юзера (пример-указатель.png); точка выпадения смещается в JS (WHEEL_PHI) под кончик пальца */
.wheel-pointer{display:none}
.chibi--pointer{position:absolute; top:-109px; left:96px; width:145px; z-index:4; pointer-events:none}   /* template-match мокапа: scale 1.5, рука на клиньях */
.wheel-actions{display:flex; gap:11px; width:100%; max-width:340px; margin-top:6px}
.spin-note{max-width:340px; margin:11px auto 0; padding:0 14px; text-align:center; font-size:11.5px; color:var(--c-crystal-2); line-height:1.45}
.spin{flex:1; padding:13px; gap:6px; font-size:14px}
.wheel-actions .btn--ghost{box-shadow:inset 0 0 0 1px var(--rose-line); background:oklch(0.25 0.05 23/.5)}
.wheel-note{font-size:11.5px; color:var(--text-mute); margin-top:16px; text-align:center; line-height:1.5; max-width:300px}
.wheel-odds{width:100%; max-width:360px; margin:18px 0 10px}
.wheel-odds__h{font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute); text-align:center; margin-bottom:11px}
.odds-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:7px 8px}
.odd{display:flex; align-items:center; justify-content:space-between; gap:5px; font-size:11.5px; padding:6px 8px; border-radius:var(--r-sm); background:oklch(0.22 0.022 40/.5); box-shadow:inset 0 0 0 1px var(--line-soft)}
/* тени иконок в шансах ГАСИМ: при rAF-крутке колеса фильтры пересчитываются каждый кадр → жёсткая пульсация (фидбэк) */
.odd .ic, .odd .cic, .odd img, .odd svg{filter:none !important}
.odd span{display:inline-flex; align-items:center; gap:4px; font-weight:600}
.odd b{color:var(--amber-bright); font-variant-numeric:tabular-nums}
.odd.is-jack{background:linear-gradient(150deg, oklch(0.30 0.06 332/.5), var(--surface)); box-shadow:inset 0 0 0 1.5px oklch(0.7 0.13 332/.55)}
.odd.is-jack b{color:var(--c-crystal-2)}
.wheel--spinning{filter:saturate(1.15)}

/* ============ НИЖНИЕ ШТОРКИ ============ */
.sheet{position:fixed; inset:0; z-index:100; display:flex; align-items:flex-end; justify-content:center}
.sheet--top{z-index:160}   /* свап-шит поверх карточки-попапа (.achd-pop z:140) */
.sheet__bd{position:absolute; inset:0; background:oklch(0.06 0.01 40/.62); backdrop-filter:blur(3px); animation:fade .3s ease both}
.sheet__panel{position:relative; width:100%; max-width:520px; max-height:92vh; overflow-y:auto; background:linear-gradient(var(--surface), var(--bg)); border-radius:var(--r-xl) var(--r-xl) 0 0; box-shadow:0 -10px 40px oklch(0 0 0/.5); padding:8px 18px calc(24px + var(--safe-b)); animation:sheetUp .42s var(--ease-2) both}
.sheet__grab{width:38px; height:4px; border-radius:var(--r-pill); background:var(--line); margin:6px auto 16px}
.sheet__title{font-family:var(--font-display); font-size:29px; text-align:center}
.sheet__sub{text-align:center; color:var(--text-mute); font-size:13px; margin:6px 0 18px}

/* «Сегодня» / WELCOME7 (бывш. дейлик; сетка ячеек переиспользована приветственным календарём) */
.daily__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-bottom:18px}
.dcell{position:relative; border-radius:var(--r-sm); padding:12px 6px 10px; text-align:center; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-soft)}
.dcell:nth-child(7){grid-column:span 1}
.dcell:last-child{grid-column:span 4; background:linear-gradient(150deg, oklch(0.3 0.06 332/.5), var(--surface)); box-shadow:inset 0 0 0 1px oklch(0.7 0.12 332/.4)}
.dcell__d{font-size:10px; color:var(--text-mute); font-weight:600}
.dcell__r{font-size:24px; margin:5px 0 3px}
.dcell__a{font-size:11px; font-weight:700; font-variant-numeric:tabular-nums}
.dcell__duo{display:flex; justify-content:center; align-items:center; gap:22px; margin:7px 0 3px}   /* составная награда дня 7: кристалл «90» + пак «пак» */
.dcell__duo span{display:flex; align-items:center; gap:6px}
.dcell__duo i{font-style:normal; font-size:12px; font-weight:800; font-variant-numeric:tabular-nums}
.dcell.is-claimed{opacity:.5}
.dcell.is-claimed::after{content:"✓"; position:absolute; top:6px; right:8px; color:var(--good); font-weight:800}
.dcell.is-today{box-shadow:0 0 0 1.5px var(--amber), var(--glow-amber); transform:translateY(-2px)}

/* хаб «Сегодня» (v2: агрегатор ежедневных кранов после конца WELCOME7 — слот дейлика не умирает и не становится замком) */
.today__rows{display:flex; flex-direction:column; gap:8px; margin-bottom:6px}
.today__row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-radius:var(--r-sm); background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-soft); font-size:13px; color:var(--text); text-align:left}
.today__row span{display:flex; align-items:center; gap:8px}
.today__row b{color:var(--amber-bright); font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap}
.today__row[disabled]{opacity:.55}
.today__row--note b{color:var(--text-mute)}

/* календарь подписки — шторка в формате «Подарков недели» (скользящая неделя; тон потери НЕЙТРАЛЬНЫЙ — без крестов) */
.daily__grid--cal .dcell:last-child{grid-column:auto; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-soft)}   /* без жирного спана последней ячейки (это просто день недели) */
.dcell--cal.is-missed{opacity:.32}
.dcell--cal.is-pre{opacity:.22}
.dcell--cal.is-locked{opacity:.4}
.dcell--cal.is-locked::after{content:"🔒"; position:absolute; top:4px; right:6px; font-size:9px; filter:grayscale(1); opacity:.8}
.dcell--cal.is-future{opacity:.78}
.dcell--cal.is-grace{box-shadow:inset 0 0 0 1.2px oklch(0.6 0.12 25/.7)}

/* пейволл H-сцены */
.paywall__art{position:relative; aspect-ratio:16/10; border-radius:var(--r-lg); overflow:hidden; margin:6px 0 16px; box-shadow:var(--sh-2)}
.paywall__art .poster::before{background:radial-gradient(110% 90% at 70% 20%, oklch(0.45 0.16 18/.85), transparent 55%), linear-gradient(150deg, oklch(0.26 0.08 18), oklch(0.12 0.03 20))}
.paywall__lock{position:absolute; inset:0; display:grid; place-items:center; backdrop-filter:blur(7px); background:oklch(0.1 0.02 30/.25)}
.paywall__lock svg{width:40px; height:40px; color:var(--text)}
.paywall__tone{display:inline-flex; align-self:center; gap:7px; align-items:center; font-size:12px; color:var(--amber-bright); margin-bottom:14px; font-style:italic; text-align:center; line-height:1.4}
.paywall__opts{display:flex; flex-direction:column; gap:10px}

/* ============ POPUP НАГРАДЫ ============ */
.popup{position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:32px}
.popup__bd{position:absolute; inset:0; background:oklch(0.04 0.008 40/.93); -webkit-backdrop-filter:blur(17px) saturate(.78); backdrop-filter:blur(17px) saturate(.78); animation:fade .3s ease both}
.popup__card{position:relative; text-align:center; width:min(86vw,320px); padding:18px 22px 20px;
  background:linear-gradient(180deg, oklch(0.185 0.026 23), oklch(0.125 0.018 22));
  border:1px solid oklch(1 0 0/.08); border-radius:14px;
  box-shadow:0 24px 64px oklch(0 0 0/.62), inset 0 1px 0 oklch(1 0 0/.06);
  animation:pop .55s var(--ease-2) both}
.popup__card.has-rar{ border-color:color-mix(in oklab, var(--rc) 42%, oklch(1 0 0/.08));
  box-shadow:0 24px 64px oklch(0 0 0/.62), 0 0 48px color-mix(in oklab, var(--rc) 30%, transparent), inset 0 1px 0 oklch(1 0 0/.1) }
.popup__burst{min-height:206px; margin:0 auto 6px; display:grid; place-items:center; font-size:64px; position:relative; overflow:visible}
.popup__ic{position:relative; z-index:2; filter:drop-shadow(0 5px 14px oklch(0 0 0/.5)) drop-shadow(0 0 18px oklch(0.85 0.1 72/.34))}
.popup__ic svg{display:block}
.confetti{position:absolute; left:50%; top:50%; width:0; height:0; z-index:1; pointer-events:none}
.cf{position:absolute; left:0; top:0; opacity:0; will-change:transform, opacity; animation:cfb 1.2s var(--ease-2) var(--d) both}
@keyframes cfb{
  0%{opacity:0; transform:translate(0,0) rotate(var(--r0)) scale(.3)}
  14%{opacity:1}
  66%{opacity:1; transform:translate(var(--dx), var(--dy)) rotate(var(--r1)) scale(1)}
  100%{opacity:0; transform:translate(var(--dx), calc(var(--dy) + 46px)) rotate(var(--r1)) scale(.85)}
}
.popup__t{font-family:var(--font-display); font-size:31px; margin-top:4px}
.popup__d{color:var(--text-dim); font-size:14px; margin:8px 0 20px}
.popup__t:empty{display:none}
.popup__d:empty{margin:0 0 14px}
/* выигрыш колеса: чиби ДЕРЖИТ выбитую валюту (готовые ФШ-вырезки юзера; арт = ЧТО, кнопка = СКОЛЬКО) */
.spinrw__chibi{height:180px; display:block; margin:0 auto; transform:translateX(-15px)}   /* центр по НОГАМ персонажа (вытянутая рука уводила bbox-центр вправо) — замер по альфе */
/* промо-попап новой новеллы (показ 1 раз) */
.promo{position:relative; width:min(88vw,340px); border-radius:14px; overflow:hidden;
  background:linear-gradient(180deg, oklch(0.185 0.026 23), oklch(0.125 0.018 22));
  border:1px solid oklch(1 0 0/.08); box-shadow:0 24px 64px oklch(0 0 0/.62), inset 0 1px 0 oklch(1 0 0/.06);
  animation:pop .55s var(--ease-2) both}
.promo__cover{position:relative; height:198px}
.promo__scrim{position:absolute; inset:0; background:linear-gradient(transparent 36%, oklch(0.14 0.016 36/.62) 78%, oklch(0.125 0.015 36) 100%)}
.promo__badge{position:absolute; top:14px; left:14px; display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--amber-bright); background:oklch(0.12 0.02 40/.55); backdrop-filter:blur(6px); padding:5px 11px 5px 9px; border-radius:var(--r-pill); box-shadow:inset 0 0 0 1px oklch(0.60 0.105 25/.4)}
.promo__body{position:relative; padding:6px 22px 20px; text-align:center}
.promo__title{font-family:var(--font-display); font-size:31px; line-height:1.06}
.promo__text{color:var(--text-dim); font-size:13.5px; line-height:1.5; margin:9px 0 18px}
.promo__cta{display:flex; flex-direction:column; gap:10px}

/* ════ КАРТОЧКИ ПЕРСОНАЖЕЙ ════ */
.card-sizer{ width:164px; margin:0 auto; filter:drop-shadow(0 12px 24px oklch(0 0 0/.55)) }
.popup__burst .card-sizer{ animation:cardLand .62s var(--ease-2) both, cardFloat 3.2s ease-in-out .62s infinite }
@keyframes cardLand{ 0%{opacity:0; transform:translateY(-24px) scale(.85)} 55%{opacity:1; transform:translateY(0) scale(1.06)} 76%{transform:scale(.98)} 100%{transform:scale(1)} }
@keyframes cardFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.card{ position:relative; width:100%; aspect-ratio:3/4; border-radius:13px; overflow:hidden;
  background:linear-gradient(165deg, oklch(0.24 0.055 var(--chue,250)), oklch(0.1 0.02 var(--chue,250)));
  border:1.5px solid var(--rcol, oklch(0.5 0.02 250));
  box-shadow:0 4px 14px oklch(0 0 0/.42), inset 0 0 20px oklch(0 0 0/.32);
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none }
.card--common{ --rcol:oklch(0.71 0.035 255) }
.card--rare{ --rcol:oklch(0.62 0.16 235); box-shadow:0 4px 14px oklch(0 0 0/.42), 0 0 13px oklch(0.62 0.16 235/.32), inset 0 0 20px oklch(0 0 0/.32) }
.card--epic{ --rcol:oklch(0.6 0.2 320); box-shadow:0 4px 16px oklch(0 0 0/.42), 0 0 17px oklch(0.6 0.2 320/.42), inset 0 0 20px oklch(0 0 0/.32) }
.card--legendary{ --rcol:oklch(0.8 0.15 80); box-shadow:0 4px 18px oklch(0 0 0/.46), 0 0 22px oklch(0.82 0.15 82/.5), inset 0 0 20px oklch(0 0 0/.32) }
.card__art{ position:absolute; inset:0; display:grid; place-items:center }
.card__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top }
.card__scrim{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, oklch(0.055 0.01 40/.82), oklch(0.055 0.01 40/.5) 30%, oklch(0.055 0.01 40/.15) 60%, transparent 80%) }
.card__mono{ font-family:var(--font-display); font-size:46px; line-height:1; filter:drop-shadow(0 0 13px currentColor) drop-shadow(0 2px 6px oklch(0 0 0/.5)) }
.card__mono--ghost{ color:oklch(0.56 0.02 250); opacity:.5; font-size:40px; filter:none }
.card--ghost{ border-style:dashed; border-color:oklch(0.46 0.02 250/.55) }
.card__rar{ position:absolute; top:6px; left:0; right:0; text-align:center; font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; text-shadow:0 1px 3px #000 }
.card__name{ position:absolute; bottom:7px; left:0; right:0; text-align:center; font-family:var(--font-display); font-size:17px; color:#fff; text-shadow:0 1px 5px #000, 0 0 2px #000 }
.card__count{ position:absolute; top:5px; right:6px; min-width:17px; text-align:center; background:oklch(0.1 0.01 40/.82); border:1px solid var(--rcol); border-radius:8px; font-size:10px; font-weight:800; padding:1px 4px; color:#fff }
.card__fav{ position:absolute; top:4px; left:5px; line-height:0 }
.card--locked{ background:repeating-linear-gradient(135deg, oklch(0.15 0.005 250), oklch(0.15 0.005 250) 9px, oklch(0.12 0.005 250) 9px, oklch(0.12 0.005 250) 18px); border:1.5px dashed oklch(0.4 0.012 250) }
.card__art--q{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--font-display); font-size:46px; color:oklch(0.46 0.02 250) }
.card--locked .card__name{ color:oklch(0.45 0.02 250) }

/* ── просмотрщик карты (Romance Club-стиль: карта в рамке + полный экран) ── */
.cardview{ position:fixed; inset:0; z-index:90; background:#0a0809; overflow:hidden; animation:cvIn .34s var(--ease-2); touch-action:pan-y }
.cardview.closing{ animation:cvOut .22s var(--ease) forwards }
@keyframes cvIn{ from{opacity:0; transform:scale(1.05)} to{opacity:1; transform:scale(1)} }
@keyframes cvOut{ from{opacity:1; transform:scale(1)} to{opacity:0; transform:scale(.97)} }
/* блюр-фон из арта */
.cardview__bg{ position:absolute; inset:-50px; z-index:0; background-position:center; background-size:cover; background-repeat:no-repeat;
  filter:blur(56px) brightness(.16) saturate(.55); transform:scale(1.2); transition:opacity .35s }
.cardview__bg::after{ content:''; position:absolute; inset:50px;
  background:radial-gradient(92% 72% at 50% 30%, color-mix(in oklab, var(--rc) 24%, transparent), transparent 66%), radial-gradient(120% 95% at 50% 26%, transparent, oklch(0.03 0.008 38/.82)) }
/* common: серый --rc даёт невидимую ауру — подмешиваем прохладный тон для премиум-ощущения */
.cardview.card--common .cardview__bg::after{ background:radial-gradient(92% 72% at 50% 30%, oklch(0.66 0.04 250/.18), transparent 64%), radial-gradient(120% 95% at 50% 26%, transparent, oklch(0.03 0.008 38/.82)) }
/* колода (перелистывание карт) */
.cardview__deck{ position:absolute; left:0; right:0; z-index:2; top:calc(var(--top-inset) + 52px); bottom:236px; padding:0 20px;
  display:grid; place-items:center; perspective:1500px; transition:opacity .16s linear }
.cv-card{ grid-area:1/1; position:relative; width:min(100%, 330px); max-height:100%; aspect-ratio:3/4; border-radius:20px; overflow:hidden; justify-self:center; align-self:center;
  border:2.5px solid color-mix(in oklab, var(--rc) 52%, oklch(1 0 0/.5));
  box-shadow:0 20px 52px oklch(0 0 0/.6), 0 0 36px color-mix(in oklab, var(--rc) 42%, transparent); backface-visibility:hidden;
  transition:transform .46s var(--ease), opacity .42s var(--ease), border-radius .3s, border-color .3s, box-shadow .3s }
.cv-card__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top }
.cv-card__nm{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:30px 16px 13px; text-align:center;
  font-family:var(--font-display); font-size:22px; color:#fff; text-shadow:0 1px 6px #000, 0 0 4px #000;
  background:linear-gradient(transparent, oklch(0.02 0.006 38/.55) 45%, oklch(0.02 0.006 38/.9)) }
/* common: серый --rc сливается — даём осязаемую серебристую кромку */
.cardview.card--common .cv-card{ border-color:oklch(0.62 0.012 250/.72);
  box-shadow:0 20px 52px oklch(0 0 0/.6), 0 0 22px oklch(0.7 0.012 250/.16), inset 0 0 0 1px oklch(1 0 0/.07) }
/* idle-блик на топ-редкостях (внутри рамки) */
.cardview.card--epic .cv-card.on::before, .cardview.card--legendary .cv-card.on::before{ content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(105deg, transparent 43%, oklch(1 0 0/.16) 50%, transparent 57%); transform:translateX(-130%); animation:cvGlare 6s ease-in-out 1.2s infinite }
@keyframes cvGlare{ 0%{transform:translateX(-130%)} 17%,100%{transform:translateX(130%)} }
/* флип-перелистывание */
.cv-card.in-m{ opacity:0; transform:scale(.92) }
.cv-card.in-r{ opacity:0; transform:translateX(72%) rotateY(-30deg) scale(.78) }
.cv-card.in-l{ opacity:0; transform:translateX(-72%) rotateY(30deg) scale(.78) }
.cv-card.on{ opacity:1; transform:translateX(0) rotateY(0) scale(1) }
.cv-card.out-l{ opacity:0; transform:translateX(-72%) rotateY(30deg) scale(.78) }
.cv-card.out-r{ opacity:0; transform:translateX(72%) rotateY(-30deg) scale(.78) }
/* ── АПГРЕЙД: полноэкранная кинематографичная секвенция (вдох→коллапс→ВЗРЫВ→ревил→оседание) ── */
.cv-reveal-glow{ position:absolute; inset:-2px; border-radius:20px; z-index:4; pointer-events:none; opacity:0;
  box-shadow:0 0 0 2px var(--rc), 0 0 46px 12px color-mix(in oklab, var(--rc) 72%, transparent); animation:cvRevealGlow .6s var(--ease) }
@keyframes cvRevealGlow{ 0%{opacity:0; transform:scale(1)} 40%{opacity:1; transform:scale(1.04)} 100%{opacity:0; transform:scale(1)} }
/* во время апгрейда: прячем панель/чип, гасим фон, поднимаем карту над дим-слоем */
.cardview.cv-upgrading .cardview__panel, .cardview.cv-upgrading .cardview__rar{ opacity:0; transition:opacity .22s var(--ease) }
.cardview.cv-upgrading .cardview__deck{ z-index:6 }
.cardview.cv-upgrading .cardview__bg{ filter:blur(56px) brightness(.05) saturate(.4); transition:filter .42s var(--ease) }
/* герой: коллапс → слэм → оседание (slam-overshoot через spring-кубик) */
.cv-card.cv-up-card{ transition:transform .45s var(--ease), filter .45s var(--ease); transform:scale(.87); filter:brightness(.5) saturate(.42) }
.cv-card.cv-up-card.cv-up-slam{ transition:transform .2s cubic-bezier(.18,1.5,.4,1), filter .18s var(--ease); transform:scale(1.12); filter:brightness(1.18) saturate(1.06) }
.up-t3 .cv-card.cv-up-card.cv-up-slam{ transform:scale(1.14) translateY(-26px) }
.cv-card.cv-up-card.cv-up-rest{ transition:transform .42s var(--ease), filter .42s var(--ease); transform:scale(1); filter:none }
.up-t3 .cv-card.cv-up-card.cv-up-rest{ transform:scale(1) translateY(0) }
/* слои сцены */
.cv-up-back{ position:absolute; inset:0; z-index:4; pointer-events:none; transition:opacity .3s var(--ease);
  background:radial-gradient(120% 92% at 50% 45%, transparent 26%, oklch(0.02 0.006 40/.93) 100%); animation:upDim .42s var(--ease) }
@keyframes upDim{ from{ opacity:0 } to{ opacity:1 } }
.cv-up-front{ position:absolute; inset:0; z-index:12; pointer-events:none; transition:opacity .3s var(--ease) }
/* conic-лучи (за картой) */
.cv-up-rays{ position:absolute; left:50%; top:45%; width:150vmax; aspect-ratio:1; transform:translate(-50%,-50%) scale(0); opacity:0; mix-blend-mode:screen;
  background:conic-gradient(from 0deg,
    color-mix(in oklab,var(--rc) 80%,white), transparent 3deg 27deg, color-mix(in oklab,var(--rc) 80%,white) 30deg, transparent 33deg 57deg,
    color-mix(in oklab,var(--rc) 80%,white) 60deg, transparent 63deg 87deg, color-mix(in oklab,var(--rc) 80%,white) 90deg, transparent 93deg 117deg,
    color-mix(in oklab,var(--rc) 80%,white) 120deg, transparent 123deg 147deg, color-mix(in oklab,var(--rc) 80%,white) 150deg, transparent 153deg 177deg,
    color-mix(in oklab,var(--rc) 80%,white) 180deg, transparent 183deg 207deg, color-mix(in oklab,var(--rc) 80%,white) 210deg, transparent 213deg 237deg,
    color-mix(in oklab,var(--rc) 80%,white) 240deg, transparent 243deg 267deg, color-mix(in oklab,var(--rc) 80%,white) 270deg, transparent 273deg 297deg,
    color-mix(in oklab,var(--rc) 80%,white) 300deg, transparent 303deg 327deg, color-mix(in oklab,var(--rc) 80%,white) 330deg, transparent 333deg 357deg);
  -webkit-mask:radial-gradient(closest-side, transparent 13%, #000 19%, #000 58%, transparent 80%);
  mask:radial-gradient(closest-side, transparent 13%, #000 19%, #000 58%, transparent 80%) }
.cv-up-back.go .cv-up-rays{ animation:upRays var(--rdur,.9s) var(--ease) forwards }
@keyframes upRays{ 0%{opacity:0; transform:translate(-50%,-50%) scale(0) rotate(0)} 28%{opacity:.85} 100%{opacity:0; transform:translate(-50%,-50%) scale(1.5) rotate(22deg)} }
/* экранная вспышка */
.cv-up-flash{ position:absolute; left:50%; top:45%; width:62vmax; aspect-ratio:1; transform:translate(-50%,-50%) scale(.2); opacity:0; mix-blend-mode:screen;
  background:radial-gradient(circle, oklch(1 0 0/.98) 0%, color-mix(in oklab,var(--rc) 82%,white) 24%, transparent 60%) }
.cv-up-front.go .cv-up-flash{ animation:upFlash .42s var(--ease) forwards }
@keyframes upFlash{ 0%{opacity:0; transform:translate(-50%,-50%) scale(.2)} 32%{opacity:1} 100%{opacity:0; transform:translate(-50%,-50%) scale(var(--fscale,1.8))} }
/* частицы-выброс */
.cv-up-burst{ position:absolute; left:50%; top:45% }
.cv-up-burst i{ position:absolute; left:0; top:0; border-radius:1px; background:var(--rc); box-shadow:0 0 6px var(--rc); opacity:0; animation:upSpark var(--d,.7s) var(--ease) var(--dl,0s) forwards }
@keyframes upSpark{ 0%{opacity:0; transform:translate(0,0) scale(.4)} 12%{opacity:1} 100%{opacity:0; transform:translate(var(--dx),var(--dy)) rotate(var(--r1)) scale(1)} }
/* золотой дождь сверху (legendary) */
.cv-up-rain{ position:absolute; inset:0 }
.cv-up-rain i{ position:absolute; top:-7%; border-radius:1px; background:var(--rc); box-shadow:0 0 7px var(--rc); opacity:0; animation:upRain var(--d,1.1s) linear var(--dl,0s) forwards }
@keyframes upRain{ 0%{opacity:0; transform:translateY(0)} 12%{opacity:1} 90%{opacity:1} 100%{opacity:0; transform:translateY(78vh)} }
/* моты антиципации (всасываются к карте) */
.cv-up-motes i{ position:absolute; left:50%; top:45%; width:5px; height:5px; border-radius:50%; background:var(--rc); box-shadow:0 0 7px var(--rc); opacity:0; animation:upMote var(--d,.55s) var(--ease) var(--dl,0s) forwards }
@keyframes upMote{ 0%{opacity:0; transform:translate(var(--dx),var(--dy)) scale(.6)} 45%{opacity:.95} 100%{opacity:0; transform:translate(0,0) scale(.2)} }
/* god-ray столб (legendary — «второй акт»/вознесение) */
.cv-up-pillar{ position:absolute; left:50%; top:-22%; width:44vw; height:152%; transform:translateX(-50%) scaleY(0); transform-origin:top center; opacity:0; mix-blend-mode:screen;
  background:linear-gradient(180deg, color-mix(in oklab,var(--rc) 72%,transparent), transparent 72%) }
.cv-up-front.go .cv-up-pillar{ animation:upPillar 1.15s var(--ease) forwards }
@keyframes upPillar{ 0%{opacity:0; transform:translateX(-50%) scaleY(0)} 40%{opacity:.72} 100%{opacity:0; transform:translateX(-50%) scaleY(1)} }
@media (prefers-reduced-motion: reduce){
  .cv-card.cv-up-card, .cv-card.cv-up-card.cv-up-slam, .cv-card.cv-up-card.cv-up-rest{ transition:none; transform:none; filter:none }
  .cv-up-back, .cv-up-front, .cv-up-rays, .cv-up-flash, .cv-up-burst i, .cv-up-rain i, .cv-up-motes i, .cv-up-pillar, .cv-reveal-glow{ animation:none }
  .cardview.cv-upgrading .cardview__bg{ transition:none }
}
.cv-locked{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px; color:var(--text-mute);
  background:repeating-linear-gradient(135deg, oklch(0.15 0.006 40), oklch(0.15 0.006 40) 11px, oklch(0.12 0.006 40) 11px, oklch(0.12 0.006 40) 22px) }
.cv-locked span{ font-family:var(--font-display); font-size:58px; color:oklch(0.4 0.02 250) }
.cv-locked b{ font-size:12.5px; font-weight:600; text-align:center; padding:0 14px }
/* вспышка трансформации при апгрейде */
.cardview__flash{ position:absolute; inset:0; z-index:7; pointer-events:none; opacity:0;
  background:radial-gradient(circle at 50% 42%, #fff, oklch(0.92 0.12 88) 55%, transparent 78%) }
.cardview__flash.go{ animation:cvFlash .5s var(--ease) }
@keyframes cvFlash{ 0%{opacity:0; transform:scale(.55)} 26%{opacity:.95; transform:scale(1)} 100%{opacity:0; transform:scale(1.18)} }
/* редкость СПРАВА (свой крестик убран — закрытие через нативную TG-кнопку «назад») */
.cardview__rar{ position:absolute; top:calc(8px + var(--top-inset)); right:13px; z-index:8;
  display:flex; align-items:center; gap:6px; padding:6px 13px 6px 9px; border-radius:11px;
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#fff;
  background:linear-gradient(oklch(0.18 0.02 40/.97), oklch(0.1 0.014 38/.97));
  border:1px solid color-mix(in oklab, var(--rc) 62%, oklch(1 0 0/.08));
  box-shadow:0 2px 11px oklch(0 0 0/.55), 0 0 16px color-mix(in oklab, var(--rc) 38%, transparent), inset 0 1px 0 oklch(1 0 0/.12) }
.cardview__rar.pop{ animation:cvRarPop .4s var(--ease-2) }
@keyframes cvRarPop{ 0%{transform:scale(.78); opacity:.4} 60%{transform:scale(1.1)} 100%{transform:scale(1)} }
.cardview__rar .ic{ flex:none }
.cardview__rar{ transition:opacity .25s var(--ease) }
/* нижняя панель + кнопка «Полный экран» */
.cardview__panel{ position:absolute; left:0; right:0; bottom:0; z-index:5; padding:16px 13px calc(15px + var(--safe-b));
  background:linear-gradient(transparent, oklch(0.05 0.01 38/.55) 22%, oklch(0.04 0.008 38/.97) 62%);
  animation:cvPanelUp .44s var(--ease-2) .05s both; transition:opacity .3s, transform .35s var(--ease-2) }
@keyframes cvPanelUp{ from{transform:translateY(106%)} to{transform:translateY(0)} }
.cv-fs{ display:flex; align-items:center; justify-content:center; gap:7px; margin:0 auto 14px; padding:10px 22px; border:none; border-radius:13px; cursor:pointer;
  font-weight:700; font-size:13px; color:oklch(0.94 0.018 26); background:linear-gradient(165deg, oklch(0.48 0.165 26), oklch(0.31 0.12 22)); box-shadow:inset 0 0 0 1px oklch(0.64 0.135 25/.5), 0 4px 14px oklch(0 0 0/.5) }
.cv-fs .ic{ width:15px; height:15px }
/* ── режим «Полный экран» ── */
.cardview--fs .cardview__deck{ top:0; bottom:0; padding:0 }
.cardview--fs .cv-card{ width:100%; height:100%; aspect-ratio:auto; border-radius:0; border-color:transparent; box-shadow:none }
.cardview--fs .cardview__bg{ opacity:0 }
.cardview--fs .cardview__panel{ opacity:0; pointer-events:none; transform:translateY(60px) }
/* в полном экране — ТОЛЬКО арт: редкость, крестик, имя убираем (тап/свайп-вниз = выход) */
.cardview--fs .cardview__rar, .cardview--fs .cv-card__nm{ opacity:0; pointer-events:none }
.cardview__act{ min-height:46px }
.cvhint{ text-align:center; font-size:11.5px; color:var(--text-mute); line-height:46px }
.cvtabs{ display:flex; gap:8px; align-items:stretch; margin-top:4px }
.cvtab{ flex:1; display:flex; flex-direction:column; gap:4px; align-items:center; justify-content:center; padding:14px 2px; border-radius:12px; cursor:pointer; color:var(--text);
  background:linear-gradient(color-mix(in oklab, var(--tc) 15%, oklch(0.17 0.014 40/.72)), oklch(0.12 0.01 40/.72));
  border:1.5px solid color-mix(in oklab, var(--tc) 42%, transparent);
  transition:transform .2s var(--ease-2), box-shadow .2s, border-color .2s, background .2s }
.cvtab.sel{ transform:translateY(-7px); border-color:var(--tc);
  background:linear-gradient(color-mix(in oklab, var(--tc) 32%, oklch(0.2 0.02 40/.88)), oklch(0.14 0.012 40/.88));
  box-shadow:0 0 16px color-mix(in oklab, var(--tc) 55%, transparent), 0 7px 16px oklch(0 0 0/.55) }
.cvtab__c{ font-size:16px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; color:#fff }
.cvtab__l{ font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--text-mute); line-height:1.05 }
.cvtab.ready .cvtab__c{ color:oklch(0.85 0.17 145) }
.cvtab.ready .cvtab__l{ color:oklch(0.8 0.16 145) }
.cvtab.lock{ opacity:.4 }
/* кнопка апгрейда — ЭТАЛОН-КРАСНАЯ (редизайн) + цветная кромка целевой редкости; дышит + редкий блик-зов */
.cvup{ position:relative; overflow:hidden; display:block; width:100%; padding:13px; margin-bottom:11px; border:none; border-radius:10px; cursor:pointer;
  font-weight:800; font-size:14px; letter-spacing:.01em; color:oklch(0.94 0.018 26);
  background:linear-gradient(165deg, oklch(0.48 0.165 26), oklch(0.31 0.12 22));
  animation:cvBreathBtn 2.2s ease-in-out infinite }
.cvup::after{ content:''; position:absolute; top:0; left:0; width:38%; height:100%; pointer-events:none;
  background:linear-gradient(105deg, transparent, oklch(1 0 0/.6), transparent); transform:translateX(-280%); animation:cvSweep 3.6s ease-in-out infinite }
@keyframes cvBreathBtn{ 0%,100%{box-shadow:0 0 0 1.5px color-mix(in oklab, var(--uc) 72%, transparent), 0 0 16px oklch(0.52 0.15 25/.5), 0 5px 14px oklch(0 0 0/.5); transform:scale(1)} 50%{box-shadow:0 0 0 1.5px color-mix(in oklab, var(--uc) 88%, transparent), 0 0 30px oklch(0.55 0.16 25/.7), 0 5px 14px oklch(0 0 0/.5); transform:scale(1.022)} }
@keyframes cvSweep{ 0%,70%{transform:translateX(-280%)} 85%,100%{transform:translateX(380%)} }
.cv-trophy{ display:flex; align-items:center; justify-content:center; gap:7px; min-height:46px; font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--amber-bright) }
.cv-trophy .ic{ filter:drop-shadow(0 0 7px oklch(0.55 0.15 25/.6)) }
.cv-locked-cta{ margin-top:18px; padding:10px 22px; border:1px solid oklch(1 0 0/.16); border-radius:11px; background:oklch(0.2 0.02 40/.7); color:var(--text); font-weight:700; font-size:12.5px; cursor:pointer; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px) }
@media (prefers-reduced-motion: reduce){
  .cvup, .cvup::after, .cardview .cv-card.on::before,
  .cardview__flash.go, .popup__burst .card-sizer, .cardview__panel, .cardview__rar.pop, .cardview{ animation:none }
  .cv-card{ transition:opacity .16s linear } }

.coll-head{ display:flex; align-items:baseline; justify-content:space-between }
.coll-hint{ font-size:11px; color:var(--text-mute) }
.rar-stats{ display:flex; flex-direction:column; gap:5px; padding:2px 16px 0 }
.rar-stat{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-dim) }
.rar-stat b{ margin-left:auto; color:var(--text); font-variant-numeric:tabular-nums }
.rar-dot{ width:9px; height:9px; border-radius:50%; flex:none }
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:11px; padding:11px 16px 4px }
.card-cell{ cursor:pointer; transition:transform .15s var(--ease); position:relative }
.card-cell:active{ transform:scale(.95) }
.card-cell--sm{ width:60px; flex:none }
.card-cell--sm .card__rar{ display:none }   /* в шторке редкость и так подписана справа — ярлык на мини-карте лишний */
.char-rar{ display:flex; align-items:center; gap:13px; padding:9px 2px; border-bottom:1px solid oklch(1 0 0/.06) }
.char-rar__r{ display:flex; flex-direction:column; gap:5px; align-items:flex-start }
.char-rar__r b{ font-size:14px }
.fuse-need{ font-size:11px; color:var(--text-mute) }
.btn--sm{ padding:6px 12px; font-size:12px; width:auto; min-height:0 }
.seg{ display:inline-flex; background:oklch(0.16 0.012 40); border:1px solid oklch(1 0 0/.06); border-radius:9px; padding:2px; gap:2px }
.seg__b{ font-size:11.5px; font-weight:700; color:var(--text-mute); padding:5px 12px; border-radius:7px; transition:background .18s, color .18s }
.seg__b.is-active{ background:linear-gradient(150deg, var(--amber), var(--ember)); color:oklch(0.96 0.012 28) }
.coll-sub{ font-size:11px; color:var(--text-dim); padding:9px 16px 3px; display:flex; align-items:center; gap:5px }
/* попап «не хватает кристаллов»: арт-шапка маскота + CTA в магазин */
.popup__card--nocry{padding-top:0; overflow:hidden}
.nocry__art{display:block; margin:0 -22px 14px; width:calc(100% + 44px); aspect-ratio:16/10.5; object-fit:cover; object-position:center 8%}
.nocry__later{display:block; margin:10px auto 0; color:var(--text-mute); font-size:13px; padding:6px 14px}
/* пустое состояние с артом маскота (вместо сухого текста) */
.empty-art{position:relative; border-radius:var(--r); overflow:hidden; margin:6px 0; box-shadow:inset 0 0 0 1px var(--line-soft)}
.empty-art img{display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:center 14%}
.empty-art::after{content:""; position:absolute; inset:auto 0 0 0; height:62%; background:linear-gradient(transparent, oklch(0.105 0.014 20/.92)); pointer-events:none}
.empty-art__t{position:absolute; left:16px; right:16px; bottom:32px; font-family:var(--font-display); font-size:20px; z-index:1; text-shadow:0 1px 6px oklch(0 0 0/.8)}
.empty-art__h{position:absolute; left:16px; right:16px; bottom:13px; font-size:12px; color:var(--text-dim); z-index:1; text-shadow:0 1px 5px oklch(0 0 0/.8)}
.coll-empty{ text-align:center; color:var(--text-mute); font-size:13px; padding:22px 24px }
.card-cell--card{ position:relative }
.card-grid--fav .card-cell{ touch-action:none }
/* кликабельная зона сердца ~38px (прозрачная подушка вокруг иконки 20px) — легко попасть */
.card-star{ position:absolute; top:0; left:0; width:38px; height:38px; padding:5px 0 0 6px; display:flex; align-items:flex-start; justify-content:flex-start; z-index:3; border:0; background:none; line-height:0; cursor:pointer; -webkit-tap-highlight-color:transparent }
.card-star .ic{ filter:drop-shadow(0 1px 3px oklch(0 0 0/.85)); transition:transform .12s }
.card-star:active .ic{ transform:scale(.82) }
.card-cell.dragging{ z-index:50; opacity:.96; box-shadow:0 14px 30px oklch(0 0 0/.6); transition:none }
.cell-inner{ position:relative }
/* live-реордер: соседи плавно уезжают на новые слоты */
.card-grid--fav.is-reordering .card-cell{ transition:transform .2s cubic-bezier(.2,.7,.2,1) }
.card-grid--fav.is-reordering .card-cell.dragging{ transition:none }
/* мягкий джигл — на внутренний слой (не конфликтует со сдвигом), вразнобой */
@keyframes jiggle{ 0%,100%{ transform:rotate(-.75deg) } 50%{ transform:rotate(.75deg) } }
.card-grid--fav.is-reordering .card-cell:not(.dragging) .cell-inner{ animation:jiggle .34s ease-in-out infinite }
.card-grid--fav.is-reordering .card-cell:nth-child(even):not(.dragging) .cell-inner{ animation-delay:-.17s }

/* ============ ТОСТ ============ */
.toast{position:fixed; left:50%; bottom:calc(var(--tabbar-h) + var(--safe-b) + 16px); transform:translateX(-50%); z-index:130;
  background:linear-gradient(180deg, oklch(0.255 0.045 23), oklch(0.185 0.032 22)); color:var(--text); font-size:13.5px; font-weight:600;
  padding:11px 16px; border-radius:var(--r); box-shadow:var(--sh-2), inset 0 0 0 1px var(--rose-line); animation:toast 2.6s var(--ease) both; display:flex; align-items:center; gap:8px;
  white-space:nowrap; max-width:calc(100% - 16px)}   /* одна строка без переноса (фидбэк): блок тянется по тексту */
/* тост голосом маскота (текст начинается с «—») — авто-курсив Cormorant */
.toast--w{font-family:var(--font-display); font-style:italic; font-weight:500; font-size:15.5px; color:oklch(0.78 0.08 25)}

/* ============ АНИМАЦИИ ============ */
/* кен-бёрнс: медленный наезд камеры на hero-арты (кинематографичность; transform — GPU) */
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.05)}}
.hero .poster.has-img{animation:kenburns 16s ease-in-out infinite alternate}
.sub__herowrap .art-slot__img{animation:kenburns 16s ease-in-out infinite alternate}
/* дыхание главной CTA — мягкий пульс свечения (только подписка и гейт, не все кнопки) */
@keyframes breathGlow{
  0%,100%{box-shadow:inset 0 0 0 1px oklch(0.64 0.135 25/.55), 0 10px 26px oklch(0.3 0.13 22/.5)}
  50%{box-shadow:inset 0 0 0 1px oklch(0.70 0.15 25/.75), 0 10px 34px oklch(0.38 0.15 23/.65), 0 0 24px oklch(0.45 0.16 24/.35)}}
.btn--breath{animation:breathGlow 3.2s ease-in-out infinite}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:none}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes pop{from{opacity:0; transform:scale(.8)}to{opacity:1; transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes sheen{0%{transform:translateX(-60%)}100%{transform:translateX(160%)}}
@keyframes pulse{0%,100%{box-shadow:0 0 10px oklch(0.58 0.17 26/.7)}50%{box-shadow:0 0 16px oklch(0.58 0.17 26/1)}}
@keyframes breathe{0%,100%{opacity:.65; transform:scale(.98)}50%{opacity:1; transform:scale(1.03)}}
@keyframes toast{0%{opacity:0; transform:translate(-50%,12px)}10%,88%{opacity:1; transform:translate(-50%,0)}100%{opacity:0; transform:translate(-50%,-6px)}}
.stagger>*{animation:rise .5s var(--ease) both}
.stagger>*:nth-child(1){animation-delay:.02s}
.stagger>*:nth-child(2){animation-delay:.08s}
.stagger>*:nth-child(3){animation-delay:.14s}
.stagger>*:nth-child(4){animation-delay:.2s}
.stagger>*:nth-child(5){animation-delay:.26s}
.stagger>*:nth-child(6){animation-delay:.32s}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important; transition-duration:.05s !important}
}

/* «Locked True Name»: шёпот под «???» во вьювере карты (имя раскрывается чтением) */
.cv-card__nm i.cv-ltn{display:block; font-family:var(--font-display); font-style:italic; font-size:13.5px; color:var(--text-dim); margin-top:3px; font-weight:400; letter-spacing:.01em}