/* ✨ Мифические карты (mythic_ui.js). Подача «Бордо»: глубокое вино, гранат и малиновый блик
   с отливом розового золота и шампанского. Арт ничем не перекрывается — переливается только рамка:
   медленно вращающийся градиент бордо + редкий блик шампанского, бегущий по краю.
   Отличие от лимиток: Epic — аметист/циан, Legendary — золото, мифик — бордо. */
:root {
    --myth-wine: #3d0614; --myth-bord: #6e0f26; --myth-garnet: #9e1c3d; --myth-crimson: #c9374f;
    --myth-rose: #e9a3a3; --myth-champ: #f3d9b1; --myth-gold: #d6b07a;
    /* старые имена токенов (на них ссылаются фильтры и чипы) */
    --myth-a: #c9374f; --myth-b: #f3d9b1; --myth-c: #d6b07a;
    /* переливающаяся рамка: бордо → гранат → розовое золото → шампанское → малиновый → бордо */
    --myth-iris: #4a0818, #9e1c3d, #e9a3a3, #f6e3c4, #c9374f, #6e0f26, #4a0818;
    --myth-frame: linear-gradient(135deg, #f6e3c4 0%, #c9374f 18%, #4a0818 38%, #e9a3a3 55%, #9e1c3d 72%, #3d0614 86%, #f3d9b1 100%);
    /* металлический текст: шампанское с розовым золотом */
    --myth-metal: linear-gradient(90deg, #d6b07a, #f6e3c4, #fff7ea, #e9a3a3, #d6b07a, #f6e3c4);
}
@property --myth-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes mythFrame { to { --myth-ang: 360deg; } }
@keyframes mythShift { to { background-position: 200% 50%; } }

/* ═══ Карта в списках (коллекция, маркет, профиль…): .is-mythic + слой .myth-fx (mythic_ui.js) ═══
   Производительность (телефоны): всё постоянное движение — только transform/opacity (считает GPU, без
   перерисовки). Рамка и блик — неподвижная маска-кольцо, внутри которой вращается (transform) большой
   conic-градиент. Анимация угла градиента (--myth-ang), box-shadow, фона текста, filter/backdrop-filter
   перерисовывают карту каждый кадр — в постоянных эффектах их нет. */
@keyframes mythSpin { to { transform: rotate(360deg); } }
.is-mythic { box-shadow: 0 0 0 1px rgba(246, 227, 196, .5), 0 0 16px 2px rgba(201, 55, 79, .6); }
.myth-fx { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 6; }
.myth-ring, .myth-sheen {
    position: absolute; inset: 0; border-radius: inherit; padding: 2px; overflow: hidden;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
}
/* градиент с запасом (inset −50%): при повороте всегда закрывает кольцо карты 2:3 */
.myth-ring::before, .myth-sheen::before {
    content: ''; position: absolute; inset: -50%;
    will-change: transform; backface-visibility: hidden;
}
.myth-ring::before { background: conic-gradient(var(--myth-iris)); animation: mythSpin 9s linear infinite; }
/* блик шампанского, пробегающий по краю (только по рамке, арт не трогает) */
.myth-sheen::before {
    background: conic-gradient(transparent 0deg 296deg, rgba(255, 236, 210, 0) 306deg, rgba(255, 236, 210, .55) 322deg, rgba(255, 250, 240, 1) 334deg, rgba(255, 236, 210, .55) 346deg, rgba(255, 236, 210, 0) 358deg, transparent 360deg);
    animation: mythSpin 3.2s cubic-bezier(.55, 0, .45, 1) infinite;
}
.myth-tag {
    position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 7;
    padding: 2px 8px; border-radius: 999px; pointer-events: none; white-space: nowrap;
    font: 900 8.5px/1.25 'Outfit', system-ui, sans-serif; letter-spacing: 1px;
    background: linear-gradient(180deg, #5a0b1f, #2a040d); border: 1px solid rgba(246, 227, 196, .75);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, .15);
}
.myth-tag > b {
    background: var(--myth-metal) 0 50% / 200% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
/* карточки, у которых свечение редкости задано с !important (Legendary в коллекции, сетах, маркете):
   анимация его не перебьёт — ставим статичное бордо, движение даёт блик по рамке */
:is(#_, html) :is(.anime-card, #cards-grid .anime-card, #set-binder-grid .anime-card, #character-details-versions .anime-card).is-mythic {
    border-color: #6e0f26 !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .5), 0 0 0 1px rgba(246, 227, 196, .35), 0 0 18px 2px rgba(201, 55, 79, .55) !important;
}
.anime-card.is-mythic .myth-ring, .anime-card.is-mythic .myth-sheen { padding: 3px; }
/* подпись редкости внутри карточки — обычная плашка (без трюков с background-clip: у некоторых
   карточек свои !important на цвет текста, и вместо надписи оставался голый градиент) */
:is(#_, html) .is-mythic :is(.card-rarity, .fav-card-rarity) {
    background: linear-gradient(180deg, #6e0f26, #3d0614) !important;
    border: 1px solid rgba(246, 227, 196, .6) !important;
    color: #f6e3c4 !important; -webkit-text-fill-color: #f6e3c4 !important;
    text-shadow: 0 0 6px rgba(201, 55, 79, .8) !important;
    animation: none !important; filter: none !important;
}
html.ui-lite .myth-ring::before { animation: none; }
html.ui-lite .is-mythic { box-shadow: 0 0 0 1px rgba(246, 227, 196, .5), 0 0 10px rgba(201, 55, 79, .5); }
html.ui-lite .myth-sheen { display: none; }
@media (prefers-reduced-motion: reduce) { .myth-ring::before { animation: none !important; } .myth-sheen { display: none; } }

/* живой арт (окно карты, хаб) */
.myth-live-box { position: relative; overflow: hidden; }
video.myth-live { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; z-index: 1; pointer-events: none; background: transparent; }
.myth-live-box > .card-glare-sweep, .myth-live-box > .myth-tag { z-index: 7; }
.myth-play {
    position: absolute; right: 8px; bottom: 8px; z-index: 8;
    padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(246, 227, 196, 0.6);
    background: rgba(42, 4, 13, 0.9); color: #f6e3c4; cursor: pointer;
    font: 800 12px/1 'Outfit', system-ui, sans-serif; letter-spacing: 0.3px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);   /* без backdrop-filter: поверх видео он пересчитывался каждый кадр */
}
.myth-play:active { transform: scale(0.94); }

/* ═══ Полноэкранный просмотр (#pfx-cv) ═══ */
/* Углы: у обычной карты рамка 2px (border), и внутренний край закруглён на 18px, а кольцо и видео —
   на 20px (inherit) → кольцо срезалось на углах. У мифика border нет — кольцо и есть край, все радиусы 20px.
   Видео дополнительно обрезаем clip-path: WebKit (iOS/Telegram) не обрезает видео по overflow+radius
   повёрнутого/наклонённого родителя, и квадратные углы ролика вылезали поверх рамки. */
.pfx-cv.is-myth .pfx-cv-card { --myth-r: 20px; border: 0; border-radius: var(--myth-r); background: #000; overflow: hidden; isolation: isolate; box-shadow: 0 24px 60px rgba(0, 0, 0, .7), 0 0 60px 4px rgba(201, 55, 79, .5); }
.pfx-cv-card > .myth-fx { z-index: 4; border-radius: var(--myth-r, 20px); }
.pfx-cv-card > .myth-fx :is(.myth-ring, .myth-sheen) { padding: 3px; }
html.ui-lite .pfx-cv.is-myth .pfx-cv-card { box-shadow: 0 24px 60px rgba(0, 0, 0, .7), 0 0 50px rgba(201, 55, 79, .45); }
/* Сначала карта 2:3 с артом (как в списке), затем разворот в форму видео (mythic_ui.js unfold/fitVideo).
   Горизонтальное видео: карта ложится набок (.myth-turn), вспышка (.myth-flash), на её месте —
   горизонтальный экран с видео. Центрирование — отдельным свойством translate, а не transform:
   transform карты перезаписывает наклон из ui_fx.js (tilt, !important). */
.pfx-cv.is-myth { --myth-ease: cubic-bezier(0.65, 0, 0.25, 1); --myth-t: 640ms; }
.pfx-cv.is-myth .pfx-cv-card > img { opacity: 1; transition: opacity 260ms ease; }
video.myth-full {
    position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; background: #000;
    border-radius: var(--myth-r, 20px); clip-path: inset(0 round var(--myth-r, 20px)); -webkit-clip-path: inset(0 round var(--myth-r, 20px));
    opacity: 0; transition: opacity 380ms ease 80ms;
}
.pfx-cv.is-myth .pfx-cv-card > img { border-radius: var(--myth-r); }
.pfx-cv.myth-on .pfx-cv-card > img { opacity: 0; }
.pfx-cv.myth-on video.myth-full { opacity: 1; }
.pfx-cv.myth-fix .pfx-cv-wrap {
    max-height: none; max-width: none; aspect-ratio: auto;
    transition: width var(--myth-t) var(--myth-ease), height var(--myth-t) var(--myth-ease);
}
.pfx-cv.myth-fix .pfx-cv-card {
    position: absolute; left: 50%; top: 50%; aspect-ratio: auto; max-height: none;
    translate: -50% -50%;
    transform: rotate(0deg) scale(1);
    transition: width var(--myth-t) var(--myth-ease), height var(--myth-t) var(--myth-ease), transform 460ms cubic-bezier(0.5, 0, 0.3, 1);
}
.pfx-cv.myth-fix.myth-turn .pfx-cv-card { transform: rotate(90deg) scale(var(--myth-turn-s, 0.92)); }
@supports not (translate: 0) {
    .pfx-cv.myth-fix .pfx-cv-card { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
    .pfx-cv.myth-fix.myth-turn .pfx-cv-card { transform: translate(-50%, -50%) rotate(90deg) scale(var(--myth-turn-s, 0.92)); }
}
.myth-flash {
    position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; border-radius: inherit;
    background: radial-gradient(circle at 50% 50%, #fff7ea 0%, rgba(246, 227, 196, .9) 30%, rgba(201, 55, 79, .7) 60%, rgba(61, 6, 20, .6));
    transition: opacity 480ms ease;
}
.pfx-cv.myth-flashing .myth-flash { opacity: 1; transition: opacity 170ms ease-in; }
.pfx-cv.is-myth .pfx-cv-info { max-height: 45vh; transition: max-height var(--myth-t) var(--myth-ease), opacity 300ms ease; }
.pfx-cv.myth-on.myth-big .pfx-cv-info { max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; }
.pfx-cv.myth-pre .pfx-cv-wrap, .pfx-cv.myth-pre .pfx-cv-card, .pfx-cv.myth-pre .pfx-cv-info,
.pfx-cv.myth-instant .pfx-cv-wrap, .pfx-cv.myth-instant .pfx-cv-card, .pfx-cv.myth-instant .pfx-cv-info,
.pfx-cv.myth-instant .pfx-cv-card > img, .pfx-cv.myth-instant video.myth-full { transition: none !important; }
.myth-ctrl { position: absolute; left: 50%; bottom: -50px; transform: translateX(-50%); display: flex; gap: 10px; z-index: 5; opacity: 0; transition: opacity 300ms ease 500ms; }
.pfx-cv.myth-on .myth-ctrl { opacity: 1; }
.myth-ctrl button {
    width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
    border: 1px solid rgba(246, 227, 196, 0.5); background: rgba(42, 4, 13, 0.85); color: #fff; font-size: 18px; line-height: 1;
}
.myth-ctrl button:active { transform: scale(0.92); }
.pfx-cv-chip.is-myth { color: #f6e3c4; border: 1px solid rgba(246, 227, 196, .65); background: linear-gradient(180deg, #6e0f26, #3d0614); }
.pfx-cv-chip.is-myth > b { background: var(--myth-metal) 0 50% / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* старый экран гачи (до UI v3) */
.gacha-rarity-banner.mythic {
    background: linear-gradient(180deg, #6e0f26, #3d0614) !important;
    color: #f6e3c4 !important; -webkit-text-fill-color: #f6e3c4 !important; border-color: rgba(246, 227, 196, .7) !important;
}
.gacha-fx-flash.active.mythic { background: radial-gradient(circle, #fff7ea 0%, rgba(246, 227, 196, .6) 25%, rgba(201, 55, 79, .35) 55%, transparent 80%) !important; }
.gacha-fx-godrays.active.mythic { filter: sepia(1) hue-rotate(-30deg) saturate(2.4); }
.gacha-fx-shockwave.active.mythic { border-color: #f6e3c4 !important; box-shadow: 0 0 40px #c9374f, 0 0 80px #6e0f26 !important; }
.booster-foil-pack.upcoming-mythic { filter: drop-shadow(0 0 22px rgba(201, 55, 79, .85)); }

/* шансы паков, фильтры редкости */
.ui-gx-odds-legend .r-m, .myth-odds { color: #e9a3a3; font-weight: 900; }
.ui-fchip.r-m { color: #e9a3a3; border-color: rgba(201, 55, 79, 0.55); }
.ui-fchip.r-m.active { color: #f6e3c4; border-color: rgba(246, 227, 196, .6); background: linear-gradient(180deg, #9e1c3d, #4a0818); }
.rarity-dropdown-item[data-rarity="Mythic"], .showcase-rarity-btn[data-rarity="Mythic"] { color: #e9a3a3; }

/* ═══ Гранатовая россыпь вместо звёздочек лимитки ═══
   Блёстки лимиток (ui_fx.css, --lim-spark) у мифика — огранённые гранаты с бликом шампанского.
   Вокруг большой карты (хаб, просмотр) они не вращаются, как звёзды, а мягко всплывают и гаснут,
   как искры над свечой; круглые точки — тёплые винные искорки. */
:root {
    --lim-gem-myth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='.3' y2='1'%3E%3Cstop offset='0' stop-color='%23e8607a'/%3E%3Cstop offset='.5' stop-color='%239e1c3d'/%3E%3Cstop offset='1' stop-color='%233d0614'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M5 3h10l4 5-9 11L1 8z' fill='url(%23b)' stroke='%23f6e3c4' stroke-width='.9' stroke-linejoin='round'/%3E%3Cpath d='M1 8h18M5 3l2.5 5L10 3l2.5 5L15 3M7.5 8L10 19l2.5-11' fill='none' stroke='%23f6e3c4' stroke-opacity='.6' stroke-width='.6' stroke-linejoin='round'/%3E%3Cpath d='M5.6 3.7h3.3L7.4 7.2z' fill='%23fff7ea' fill-opacity='.9'/%3E%3C/svg%3E");
}
:is(.card-hub-hero:has(.is-mythic), .pfx-cv.is-myth) .lim-sparkles > i {
    filter: drop-shadow(0 0 4px rgba(201, 55, 79, .9));   /* один фильтр: двойной на каждой частице тормозил */
    animation-name: mythGemFloat;
}
:is(.card-hub-hero:has(.is-mythic), .pfx-cv.is-myth) .lim-sparkles > i.dot {
    background: radial-gradient(circle, #fff7ea 0%, rgba(233, 163, 163, .95) 30%, rgba(201, 55, 79, .7) 55%, transparent 72%);
    filter: none;
}
@keyframes mythGemFloat {
    0%, 100% { opacity: 0; transform: translateY(8px) scale(.55); }
    30%      { opacity: 1; transform: translateY(0) scale(1); }
    60%      { opacity: .85; transform: translateY(-7px) scale(.92); }
    85%      { opacity: 0; transform: translateY(-14px) scale(.7); }
}
html.ui-lite :is(.card-hub-hero:has(.is-mythic), .pfx-cv.is-myth) .lim-sparkles > i { animation: none; opacity: .8; transform: none; }
/* Карта развернулась в видео (просмотр, .myth-on) — частицы, блик наклона и подсветка кромки
   уходят: заходили на видео и мешали смотреть. Остаётся только рамка. */
.pfx-cv.is-myth .lim-sparkles, .pfx-cv.is-myth #pfx-cv-card > .tilt-glare, .pfx-cv.is-myth .lim-holo .lh-edge { transition: opacity 300ms ease; }
.pfx-cv.myth-on .lim-sparkles, .pfx-cv.myth-on #pfx-cv-card > .tilt-glare, .pfx-cv.myth-on .lim-holo .lh-edge { opacity: 0 !important; }
.pfx-cv.myth-on .lim-sparkles > i { animation-play-state: paused; }

/* ═══ Лимитная мифическая: эффекты лимитки (ui_fx.css) в палитре бордо ═══
   Рамку рисует ui_fx (::after / .lh-frame) — переливом бордо; своё кольцо .myth-ring у лимиток скрыто (иначе двойная). */
:root {
    --lim-star-myth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff7ea'/%3E%3Cstop offset='.45' stop-color='%23e9a3a3'/%3E%3Cstop offset='1' stop-color='%239e1c3d'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12 1.6l3.15 6.55 7.2.95-5.27 5 1.37 7.15L12 17.85l-6.45 3.4 1.37-7.15-5.27-5 7.2-.95z' fill='url(%23g)' stroke='%233d0614' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M12 5.2l1.9 4 .1.2 4.3.6-3.1 2.9' fill='none' stroke='%23fff' stroke-opacity='.8' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
}
:is(#_, html) :is(.anime-card.is-limited.is-mythic, .ui-mk-tile.is-lim:has(.is-mythic), .pfx-tc.is-lim.is-mythic, .fav-card-slot.is-lim.is-mythic,
    .main-waifu-img-container.is-lim.is-mythic, #modal-card-visual.is-mythic, .card-hub-hero:has(.is-mythic) > .lim-sparkles,
    .pfx-cv.is-myth #pfx-cv-card, .pfx-cv.is-myth .lim-sparkles, #market-detail-card-visual:has(.is-mythic), .ui-gx-card.is-myth, .ui-gx-mini.is-myth) {
    --lim-glow: 201, 55, 79;
    --lim-frame: var(--myth-frame);
    --lim-star: var(--lim-star-myth);
    --lim-spark: var(--lim-gem-myth);   /* вместо четырёхлучевых звёзд — огранённые гранаты */
    --lim-dur: 4.2s;
}
:is(#_, html) :is(.is-mythic, .is-myth, .ui-mk-tile:has(.is-mythic), #market-detail-card-visual:has(.is-mythic)) .star-shimmer-limited,
:is(#_, html) #card-modal:has(#modal-card-visual.is-mythic) #modal-quality-stars .star-shimmer-limited {
    --lim-star: var(--lim-star-myth); --lim-glow: 201, 55, 79;
}
:is(.anime-card.is-limited, .pfx-tc.is-lim, .fav-card-slot.is-lim, .main-waifu-img-container.is-lim, .lim-hub, .ui-mk-tile.is-lim) .myth-ring,
.pfx-cv.is-lim .myth-ring { display: none; }
:is(#_, html) :is(.anime-card.is-limited.is-mythic.lim-live, .ui-mk-tile.is-lim.lim-live:has(.is-mythic), .pfx-tc.is-lim.is-mythic.lim-live .pfx-tc-img,
    .fav-card-slot.is-lim.is-mythic.lim-live, .main-waifu-img-container.is-lim.is-mythic.lim-live)::after,
#modal-card-visual.is-mythic .lim-holo .lh-frame, .pfx-cv.is-myth .lim-holo .lh-frame {
    background: conic-gradient(from 200deg, var(--myth-iris)) !important;
    animation: none !important;   /* анимация угла градиента = перерисовка каждый кадр; движение даёт блик .myth-sheen */
}
html.ui-lite :is(.anime-card, .ui-mk-tile, .pfx-tc, .fav-card-slot, .main-waifu-img-container)::after,
html.ui-lite .lim-holo .lh-frame { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .lim-holo .lh-frame, .is-mythic::after { animation: none !important; } }

/* ═══ Открытие пака (ui_v3.js, сцена #ui-gx) — своя постановка мифика ═══
   1) .pre-3 — карта притворяется легендарной (золото);
   2) .myth-twist — «перелом»: свет гаснет, рубашка трескается винным светом, рамка
      переливается бордо, к карте стягиваются искры шампанского и граната (.ui-gx-conv);
   3) удар — вспышка шампанского во весь экран → гранат, три кольца, лучи бордо, фонтан искр,
      падающие искры (.ui-gx-rain), карта влетает крупнее и оседает;
   4) пока карта на экране — винное сияние (.ui-gx-aurora) и дышащий ореол. */
.ui-gx.is-myth { --c: 201, 55, 79; }
.ui-gx-card.is-myth { --rc: 201, 55, 79; }
.ui-gx-card.is-myth .ui-gx-front { background: conic-gradient(from var(--myth-ang), var(--myth-iris)) !important; animation: mythFrame 6s linear infinite; }
.ui-gx-card.is-myth .ui-gx-front > :is(.ui-gx-q, .ui-gx-new, .ui-gx-cap, .ui-gx-myth, .ui-gx-lim) { z-index: 2; }
.ui-gx-front > video.ui-gx-vid {
    position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px);
    object-fit: cover; object-position: center top; border-radius: 11px; display: block;
    opacity: 0; transition: opacity 400ms ease; pointer-events: none;
}
.ui-gx-front > video.ui-gx-vid.on { opacity: 1; }
.ui-gx-myth {
    position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); z-index: 2;
    padding: 3px 10px; border-radius: 8px; white-space: nowrap;
    font-size: 11px; font-weight: 900; letter-spacing: .14em; line-height: 1.2;
    background: linear-gradient(180deg, #5a0b1f, #2a040d); border: 1px solid rgba(246, 227, 196, .8);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.ui-gx-myth > b { background: var(--myth-metal) 0 50% / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: mythShift 3s linear infinite; }
.ui-gx-front .ui-gx-lim.is-myth { color: #f6e3c4; border-color: #f6e3c4; }
.ui-gx-front:has(.ui-gx-lim) .ui-gx-myth { bottom: 92px; }

/* баннер «✦ МИФИЧЕСКАЯ ✦» — крупнее легендарного: тёмное вино, металлический текст шампанского */
.ui-gx.is-myth .ui-gx-banner > span {
    padding: 9px 22px; font-size: 16px; letter-spacing: .26em;
    background: linear-gradient(180deg, #6e0f26, #2a040d); color: #f6e3c4; border: 1.5px solid rgba(246, 227, 196, .85);
    box-shadow: 0 0 24px rgba(201, 55, 79, .6), 0 0 60px rgba(110, 15, 38, .55), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.ui-gx.is-myth .ui-gx-banner > span > b { background: var(--myth-metal) 0 50% / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: mythShift 2.6s linear infinite; }
.ui-gx.is-myth .ui-gx-banner.go { animation: uiGxMythBanner 900ms cubic-bezier(.2, 1.6, .4, 1) forwards; }
@keyframes uiGxMythBanner {
    0% { transform: translateX(-50%) translateY(30px) scale(.3); opacity: 0; }
    60% { transform: translateX(-50%) translateY(-4px) scale(1.12); opacity: 1; }
    100% { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}

/* 2) перелом */
.ui-gx.myth-twist .ui-gx-bg::after { opacity: .96; transition-duration: 220ms; }
.ui-gx.myth-twist .ui-gx-tint, .ui-gx.myth-twist .ui-gx-embers { opacity: 0 !important; }
.ui-gx.myth-twist .ui-gx-edge {
    box-shadow: none; inset: -4px; border-radius: 18px; padding: 4px;
    background: conic-gradient(from var(--myth-ang), var(--myth-iris));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    filter: drop-shadow(0 0 10px rgba(201, 55, 79, .95)) drop-shadow(0 0 24px rgba(110, 15, 38, .9));
    animation: mythFrame 900ms linear infinite !important; opacity: 1;
}
.ui-gx.myth-twist .ui-gx-back .ui-gx-pk-cracks > b {
    background: linear-gradient(180deg, #fff7ea, #f6e3c4, #c9374f, #6e0f26) !important;
    box-shadow: 0 0 10px #f6e3c4, 0 0 20px rgba(201, 55, 79, .95) !important;
    opacity: 1; transform: rotate(var(--a)) scaleY(1.25);
}
.ui-gx.myth-twist:not(.is-lite) .ui-gx-card { animation: uiGxMythGlitch 320ms steps(1) infinite; }
@keyframes uiGxMythGlitch {
    0% { transform: translate(0, 0); filter: drop-shadow(-3px 0 0 rgba(201, 55, 79, .85)) drop-shadow(3px 0 0 rgba(246, 227, 196, .6)); }
    25% { transform: translate(-3px, 1px) rotate(-.8deg); filter: drop-shadow(3px 0 0 rgba(201, 55, 79, .85)) drop-shadow(-3px 0 0 rgba(246, 227, 196, .6)); }
    50% { transform: translate(2px, -2px) scale(1.02); filter: drop-shadow(-4px 1px 0 rgba(158, 28, 61, .9)) drop-shadow(4px -1px 0 rgba(233, 163, 163, .7)); }
    75% { transform: translate(-1px, 2px) rotate(.8deg); filter: drop-shadow(2px 0 0 rgba(110, 15, 38, .9)) drop-shadow(-2px 0 0 rgba(246, 227, 196, .6)); }
}
.ui-gx.myth-twist:not(.is-lite) .ui-gx-cam { transform: scale(1.14); transition-duration: 1200ms; }
/* искры, стягивающиеся к карте */
.ui-gx-conv { position: absolute; left: 50%; top: 46%; width: 0; height: 0; z-index: 26; pointer-events: none; }
.ui-gx-conv > i {
    position: absolute; left: 0; top: 0; width: 12px; height: 12px;
    background: var(--pc, #f3d9b1);
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    filter: drop-shadow(0 0 4px var(--pc, #f3d9b1));
    opacity: 0;
    animation: uiGxConv var(--d) cubic-bezier(.6, 0, .9, .4) var(--w) forwards;
}
@keyframes uiGxConv {
    0% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(var(--s)) rotate(0deg); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(.2) rotate(540deg); opacity: 0; }
}

/* 3) удар */
.ui-gx-flash.is-myth { background: radial-gradient(circle at 50% 44%, #fff7ea 0%, #fff7ea 20%, rgba(246, 227, 196, .92) 32%, rgba(233, 163, 163, .75) 44%, rgba(201, 55, 79, .6) 58%, rgba(110, 15, 38, .45) 72%, rgba(61, 6, 20, 0) 88%); }
.ui-gx-flash.is-myth.pop-x { animation: uiGxFlashX 1500ms cubic-bezier(.2, .6, .3, 1); }
@keyframes uiGxFlashX { 0% { opacity: 0; transform: scale(.6); } 8%, 26% { opacity: 1; transform: scale(1.4); } 100% { opacity: 0; transform: scale(1.6); } }
.ui-gx.is-myth .ui-gx-ring {
    border: 4px solid transparent;
    background: conic-gradient(from var(--myth-ang), var(--myth-iris)) border-box;
    -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    box-shadow: none; filter: drop-shadow(0 0 10px rgba(201, 55, 79, .9));
}
.ui-gx-ring.r3 { z-index: 25; }
.ui-gx-ring.r3.go { animation: uiGxRing3 1100ms var(--ease-out) 240ms both; }
@keyframes uiGxRing3 { 0% { transform: translate(-50%, -50%) scale(.2); opacity: .95; } 100% { transform: translate(-50%, -50%) scale(4); opacity: 0; } }
.ui-gx.is-myth .ui-gx-rays {
    background: repeating-conic-gradient(from 0deg,
        rgba(201, 55, 79, 0) 0deg 5deg, rgba(201, 55, 79, .34) 8deg 11deg, rgba(201, 55, 79, 0) 14deg 19deg,
        rgba(246, 227, 196, .22) 21deg 23deg, rgba(246, 227, 196, 0) 25deg 30deg);
    -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .85) 18%, transparent 52%);
            mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .85) 18%, transparent 52%);
}
.ui-gx.is-myth.show-rays:not(.is-lite) .ui-gx-rays { animation: uiGxSpin 16s linear infinite; }
.ui-gx-parts > i.h { background: radial-gradient(circle, #fff 0 25%, var(--pc) 45%, transparent 72%); }
.ui-gx-parts > i.s.h { background: linear-gradient(135deg, #fff7ea, var(--pc)); }
.ui-gx.myth-hit:not(.is-lite) .ui-gx-card { animation: uiGxMythHit 900ms cubic-bezier(.2, 1.5, .35, 1); }
@keyframes uiGxMythHit { 0% { transform: scale(.82); } 35% { transform: scale(1.16); } 100% { transform: scale(1); } }
.ui-gx.myth-hit:not(.is-lite) .ui-gx-scene { animation: uiGxShakeX 820ms linear; }
@keyframes uiGxShakeX {
    0%, 100% { transform: none; } 6% { transform: translate(-14px, 8px) rotate(-1deg); } 14% { transform: translate(12px, -9px) rotate(1deg); }
    24% { transform: translate(-10px, -6px) rotate(-.6deg); } 34% { transform: translate(9px, 6px); } 46% { transform: translate(-6px, 3px); }
    60% { transform: translate(4px, -3px); } 76% { transform: translate(-2px, 2px); } 90% { transform: translate(1px, -1px); }
}
/* падающие искры */
.ui-gx-rain { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.ui-gx-rain > i {
    position: absolute; top: -20px; left: var(--l); width: 9px; height: 9px;
    background: #fff7ea; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
    filter: drop-shadow(0 0 5px var(--pc)) drop-shadow(0 0 2px var(--pc));
    transform: scale(var(--s));
    animation: uiGxRain var(--d) linear var(--w) infinite;
}
@keyframes uiGxRain {
    0% { transform: translate3d(0, 0, 0) scale(var(--s)) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: translate3d(var(--dx), 110vh, 0) scale(var(--s)) rotate(360deg); opacity: 0; }
}
/* 4) сияние и ореол, пока карта на экране */
.ui-gx-aurora {
    /* видимая часть — круг ≈45vmax: слой не больше нужного (огромная текстура на телефоне — лишняя память),
       вращение — transform, маска радиальная и при повороте не меняется */
    position: absolute; left: 50%; top: 42%; width: 96vmax; height: 96vmax; margin: -48vmax 0 0 -48vmax;
    will-change: transform, opacity;
    background: conic-gradient(rgba(110, 15, 38, .45), rgba(201, 55, 79, .32), rgba(246, 227, 196, .16), rgba(158, 28, 61, .4), rgba(61, 6, 20, .5), rgba(233, 163, 163, .18), rgba(110, 15, 38, .45));
    -webkit-mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0, 0, 0, .6) 37.5%, transparent 94%);
            mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0, 0, 0, .6) 37.5%, transparent 94%);
    opacity: 0; transition: opacity 700ms ease; pointer-events: none;
}
.ui-gx.is-myth.is-flipped .ui-gx-aurora { opacity: 1; animation: mythSpin 14s linear infinite; }
.ui-gx.is-lite .ui-gx-aurora { animation: none !important; }
.ui-gx.is-myth.is-flipped .ui-gx-card.is-myth .ui-gx-aura {
    background: radial-gradient(closest-side, rgba(201, 55, 79, .75), rgba(110, 15, 38, .45) 55%, transparent);
    opacity: 1; animation: uiGxAura 3s ease-in-out infinite;
}
.ui-gx.is-summary .ui-gx-aurora, .ui-gx.is-summary .ui-gx-rain, .ui-gx.is-summary .ui-gx-conv { display: none; }

/* итоги */
.ui-gx-chip.r-Mythic { color: #f6e3c4; border: 1px solid rgba(246, 227, 196, .7); background: linear-gradient(180deg, #6e0f26, #3d0614); }
.ui-gx-chip.r-Mythic > b, .ui-gx-mini u.myth > b { background: var(--myth-metal) 0 50% / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.ui-gx-mini u.myth { background: linear-gradient(180deg, #6e0f26, #3d0614) !important; border: 1px solid rgba(246, 227, 196, .8); color: #f6e3c4; }
.ui-gx-mini.is-myth {
    padding: 3px;
    background: conic-gradient(from 200deg, var(--myth-iris));   /* итоги висят на экране — без постоянной перерисовки */
    box-shadow: 0 0 0 1px rgba(246, 227, 196, .5), 0 0 16px 2px rgba(201, 55, 79, .6);
    animation: uiGxDeal 460ms var(--ease-spring) calc(var(--i) * 55ms) both;
}
.ui-gx.is-lite .ui-gx-mini.is-myth { animation: uiGxDeal 460ms var(--ease-spring) calc(var(--i) * 55ms) both; box-shadow: 0 0 16px rgba(201, 55, 79, .6); }
html.ui-lite :is(.ui-gx-card.is-myth .ui-gx-front, .ui-gx.is-myth .ui-gx-banner > span > b, .ui-gx-myth > b) { animation: none; }