/* СГЕНЕРИРОВАНО tools/gen_mythic_opal.py из mythic.css — не править вручную.
   «Мифик» (анимированная карта, .is-anim): копии правил mythic.css с бордо → палитра «Опал». */
.is-anim {
    --myth-wine: #1e1b4b; --myth-bord: #4c3f99; --myth-garnet: #6366f1; --myth-crimson: #67e8f9;
    --myth-rose: #c4b5fd; --myth-champ: #e0f2fe; --myth-gold: #a5f3fc;
    
    --myth-a: #67e8f9; --myth-b: #e0f2fe; --myth-c: #a5f3fc;
    
    --myth-iris: #312e81, #6366f1, #c4b5fd, #f5f3ff, #67e8f9, #4c3f99, #312e81;
    --myth-frame: linear-gradient(135deg, #f5f3ff 0%, #67e8f9 18%, #312e81 38%, #c4b5fd 55%, #6366f1 72%, #1e1b4b 86%, #e0f2fe 100%);
    
    --myth-metal: linear-gradient(90deg, #a5f3fc, #f5f3ff, #f5fbff, #c4b5fd, #a5f3fc, #f5f3ff);
}
.is-mythic.is-anim { box-shadow: 0 0 0 1px rgba(245, 243, 255, .5), 0 0 16px 2px rgba(103, 232, 249, .6); }
.is-anim .myth-sheen::before, .myth-sheen.is-anim::before {
    background: conic-gradient(transparent 0deg 296deg, rgba(224, 242, 254, 0) 306deg, rgba(224, 242, 254, .55) 322deg, rgba(245, 251, 255, 1) 334deg, rgba(224, 242, 254, .55) 346deg, rgba(224, 242, 254, 0) 358deg, transparent 360deg);
    animation: mythSpin 3.2s cubic-bezier(.55, 0, .45, 1) infinite;
}
.is-anim .myth-tag, .myth-tag.is-anim {
    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, #312e81, #1e1b4b); border: 1px solid rgba(245, 243, 255, .75);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, .15);
}
:is(#_, html) :is(.anime-card, #cards-grid .anime-card, #set-binder-grid .anime-card, #character-details-versions .anime-card).is-mythic.is-anim {
    border-color: #4c3f99 !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .5), 0 0 0 1px rgba(245, 243, 255, .35), 0 0 18px 2px rgba(103, 232, 249, .55) !important;
}
:is(#_, html) .is-mythic.is-anim :is(.card-rarity, .fav-card-rarity) {
    background: linear-gradient(180deg, #4c3f99, #1e1b4b) !important;
    border: 1px solid rgba(245, 243, 255, .6) !important;
    color: #f5f3ff !important; -webkit-text-fill-color: #f5f3ff !important;
    text-shadow: 0 0 6px rgba(103, 232, 249, .8) !important;
    animation: none !important; filter: none !important;
}
html.ui-lite .is-mythic.is-anim { box-shadow: 0 0 0 1px rgba(245, 243, 255, .5), 0 0 10px rgba(103, 232, 249, .5); }
.is-anim .myth-play, .myth-play.is-anim {
    position: absolute; right: 8px; bottom: 8px; z-index: 8;
    padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(245, 243, 255, 0.6);
    background: rgba(42, 4, 13, 0.9); color: #f5f3ff; 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);   
}
.pfx-cv.is-myth.is-anim .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(103, 232, 249, .5); }
html.ui-lite .pfx-cv.is-myth.is-anim .pfx-cv-card { box-shadow: 0 24px 60px rgba(0, 0, 0, .7), 0 0 50px rgba(103, 232, 249, .45); }
.is-anim .myth-flash, .myth-flash.is-anim {
    position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; border-radius: inherit;
    background: radial-gradient(circle at 50% 50%, #f5fbff 0%, rgba(245, 243, 255, .9) 30%, rgba(103, 232, 249, .7) 60%, rgba(30, 27, 75, .6));
    transition: opacity 480ms ease;
}
.is-anim .myth-ctrl button, .myth-ctrl button.is-anim {
    width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
    border: 1px solid rgba(245, 243, 255, 0.5); background: rgba(42, 4, 13, 0.85); color: #fff; font-size: 18px; line-height: 1;
}
.pfx-cv-chip.is-myth.is-anim { color: #f5f3ff; border: 1px solid rgba(245, 243, 255, .65); background: linear-gradient(180deg, #4c3f99, #1e1b4b); }
.gacha-rarity-banner.mythic.is-anim {
    background: linear-gradient(180deg, #4c3f99, #1e1b4b) !important;
    color: #f5f3ff !important; -webkit-text-fill-color: #f5f3ff !important; border-color: rgba(245, 243, 255, .7) !important;
}
.gacha-fx-flash.active.mythic.is-anim { background: radial-gradient(circle, #f5fbff 0%, rgba(245, 243, 255, .6) 25%, rgba(103, 232, 249, .35) 55%, transparent 80%) !important; }
.gacha-fx-shockwave.active.mythic.is-anim { border-color: #f5f3ff !important; box-shadow: 0 0 40px #67e8f9, 0 0 80px #4c3f99 !important; }
.booster-foil-pack.upcoming-mythic.is-anim { filter: drop-shadow(0 0 22px rgba(103, 232, 249, .85)); }
.ui-gx-odds-legend .r-m.is-anim, .is-anim .myth-odds, .myth-odds.is-anim { color: #c4b5fd; font-weight: 900; }
.ui-fchip.r-m.is-anim { color: #c4b5fd; border-color: rgba(103, 232, 249, 0.55); }
.ui-fchip.r-m.is-anim.active { color: #f5f3ff; border-color: rgba(245, 243, 255, .6); background: linear-gradient(180deg, #6366f1, #312e81); }
.is-anim .rarity-dropdown-item[data-rarity="Mythic"], .rarity-dropdown-item[data-rarity="Mythic"].is-anim, .is-anim .showcase-rarity-btn[data-rarity="Mythic"], .showcase-rarity-btn[data-rarity="Mythic"].is-anim { color: #c4b5fd; }
.is-anim {
    --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='%236366f1'/%3E%3Cstop offset='1' stop-color='%231e1b4b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M5 3h10l4 5-9 11L1 8z' fill='url(%23b)' stroke='%23f5f3ff' 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='%23f5f3ff' stroke-opacity='.6' stroke-width='.6' stroke-linejoin='round'/%3E%3Cpath d='M5.6 3.7h3.3L7.4 7.2z' fill='%23f5fbff' fill-opacity='.9'/%3E%3C/svg%3E");
}
:is(.card-hub-hero:has(.is-mythic.is-anim), .pfx-cv.is-myth.is-anim) .lim-sparkles > i {
    filter: drop-shadow(0 0 4px rgba(103, 232, 249, .9));   
    animation-name: mythGemFloat;
}
:is(.card-hub-hero:has(.is-mythic.is-anim), .pfx-cv.is-myth.is-anim) .lim-sparkles > i.dot {
    background: radial-gradient(circle, #f5fbff 0%, rgba(196, 181, 253, .95) 30%, rgba(103, 232, 249, .7) 55%, transparent 72%);
    filter: none;
}
.is-anim {
    --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='%23f5fbff'/%3E%3Cstop offset='.45' stop-color='%23c4b5fd'/%3E%3Cstop offset='1' stop-color='%236366f1'/%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='%231e1b4b' 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.is-anim, .ui-mk-tile.is-lim:has(.is-mythic.is-anim), .pfx-tc.is-lim.is-mythic.is-anim, .fav-card-slot.is-lim.is-mythic.is-anim,
    .main-waifu-img-container.is-lim.is-mythic.is-anim, #modal-card-visual.is-mythic.is-anim, .card-hub-hero:has(.is-mythic.is-anim) > .lim-sparkles,
    .pfx-cv.is-myth.is-anim #pfx-cv-card, .pfx-cv.is-myth.is-anim .lim-sparkles, #market-detail-card-visual:has(.is-mythic.is-anim), .ui-gx-card.is-myth.is-anim, .ui-gx-mini.is-myth.is-anim) {
    --lim-glow: 103, 232, 249;
    --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-anim, .is-myth.is-anim, .ui-mk-tile:has(.is-mythic.is-anim), #market-detail-card-visual:has(.is-mythic.is-anim)) .star-shimmer-limited, :is(#_, html) #card-modal:has(#modal-card-visual.is-mythic.is-anim) #modal-quality-stars .star-shimmer-limited {
    --lim-star: var(--lim-star-myth); --lim-glow: 103, 232, 249;
}
.ui-gx.is-myth.is-anim { --c: 103, 232, 249; }
.ui-gx-card.is-myth.is-anim { --rc: 103, 232, 249; }
.is-anim .ui-gx-myth, .ui-gx-myth.is-anim {
    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, #312e81, #1e1b4b); border: 1px solid rgba(245, 243, 255, .8);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.ui-gx-front .ui-gx-lim.is-myth.is-anim { color: #f5f3ff; border-color: #f5f3ff; }
.ui-gx.is-myth.is-anim .ui-gx-banner > span {
    padding: 9px 22px; font-size: 16px; letter-spacing: .26em;
    background: linear-gradient(180deg, #4c3f99, #1e1b4b); color: #f5f3ff; border: 1.5px solid rgba(245, 243, 255, .85);
    box-shadow: 0 0 24px rgba(103, 232, 249, .6), 0 0 60px rgba(76, 63, 153, .55), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.is-anim .ui-gx.myth-twist .ui-gx-edge, .ui-gx.myth-twist .ui-gx-edge.is-anim {
    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(103, 232, 249, .95)) drop-shadow(0 0 24px rgba(76, 63, 153, .9));
    animation: mythFrame 900ms linear infinite !important; opacity: 1;
}
.is-anim .ui-gx.myth-twist .ui-gx-back .ui-gx-pk-cracks > b, .ui-gx.myth-twist .ui-gx-back .ui-gx-pk-cracks > b.is-anim {
    background: linear-gradient(180deg, #f5fbff, #f5f3ff, #67e8f9, #4c3f99) !important;
    box-shadow: 0 0 10px #f5f3ff, 0 0 20px rgba(103, 232, 249, .95) !important;
    opacity: 1; transform: rotate(var(--a)) scaleY(1.25);
}
.is-anim .ui-gx.myth-twist:not(.is-lite) .ui-gx-card, .ui-gx.myth-twist:not(.is-lite) .ui-gx-card.is-anim { animation: uiGxMythGlitchOpal 320ms steps(1) infinite; }
@keyframes uiGxMythGlitchOpal {
    0% { transform: translate(0, 0); filter: drop-shadow(-3px 0 0 rgba(103, 232, 249, .85)) drop-shadow(3px 0 0 rgba(245, 243, 255, .6)); }
    25% { transform: translate(-3px, 1px) rotate(-.8deg); filter: drop-shadow(3px 0 0 rgba(103, 232, 249, .85)) drop-shadow(-3px 0 0 rgba(245, 243, 255, .6)); }
    50% { transform: translate(2px, -2px) scale(1.02); filter: drop-shadow(-4px 1px 0 rgba(99, 102, 241, .9)) drop-shadow(4px -1px 0 rgba(196, 181, 253, .7)); }
    75% { transform: translate(-1px, 2px) rotate(.8deg); filter: drop-shadow(2px 0 0 rgba(76, 63, 153, .9)) drop-shadow(-2px 0 0 rgba(245, 243, 255, .6)); }
}
.is-anim .ui-gx-conv > i, .ui-gx-conv > i.is-anim {
    position: absolute; left: 0; top: 0; width: 12px; height: 12px;
    background: var(--pc, #e0f2fe);
    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, #e0f2fe));
    opacity: 0;
    animation: uiGxConv var(--d) cubic-bezier(.6, 0, .9, .4) var(--w) forwards;
}
.ui-gx-flash.is-myth.is-anim { background: radial-gradient(circle at 50% 44%, #f5fbff 0%, #f5fbff 20%, rgba(245, 243, 255, .92) 32%, rgba(196, 181, 253, .75) 44%, rgba(103, 232, 249, .6) 58%, rgba(76, 63, 153, .45) 72%, rgba(30, 27, 75, 0) 88%); }
.ui-gx.is-myth.is-anim .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(103, 232, 249, .9));
}
.ui-gx.is-myth.is-anim .ui-gx-rays {
    background: repeating-conic-gradient(from 0deg,
        rgba(103, 232, 249, 0) 0deg 5deg, rgba(103, 232, 249, .34) 8deg 11deg, rgba(103, 232, 249, 0) 14deg 19deg,
        rgba(245, 243, 255, .22) 21deg 23deg, rgba(245, 243, 255, 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%);
}
.is-anim .ui-gx-parts > i.s.h, .ui-gx-parts > i.s.h.is-anim { background: linear-gradient(135deg, #f5fbff, var(--pc)); }
.is-anim .ui-gx-rain > i, .ui-gx-rain > i.is-anim {
    position: absolute; top: -20px; left: var(--l); width: 9px; height: 9px;
    background: #f5fbff; 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;
}
.is-anim .ui-gx-aurora, .ui-gx-aurora.is-anim {
    
    position: absolute; left: 50%; top: 42%; width: 96vmax; height: 96vmax; margin: -48vmax 0 0 -48vmax;
    will-change: transform, opacity;
    background: conic-gradient(rgba(76, 63, 153, .45), rgba(103, 232, 249, .32), rgba(245, 243, 255, .16), rgba(99, 102, 241, .4), rgba(30, 27, 75, .5), rgba(196, 181, 253, .18), rgba(76, 63, 153, .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-anim.is-flipped .ui-gx-card.is-myth.is-anim .ui-gx-aura {
    background: radial-gradient(closest-side, rgba(103, 232, 249, .75), rgba(76, 63, 153, .45) 55%, transparent);
    opacity: 1; animation: uiGxAura 3s ease-in-out infinite;
}
.ui-gx-chip.r-Mythic.is-anim { color: #f5f3ff; border: 1px solid rgba(245, 243, 255, .7); background: linear-gradient(180deg, #4c3f99, #1e1b4b); }
.ui-gx-mini u.myth.is-anim { background: linear-gradient(180deg, #4c3f99, #1e1b4b) !important; border: 1px solid rgba(245, 243, 255, .8); color: #f5f3ff; }
.ui-gx-mini.is-myth.is-anim {
    padding: 3px;
    background: conic-gradient(from 200deg, var(--myth-iris));   
    box-shadow: 0 0 0 1px rgba(245, 243, 255, .5), 0 0 16px 2px rgba(103, 232, 249, .6);
    animation: uiGxDeal 460ms var(--ease-spring) calc(var(--i) * 55ms) both;
}
.ui-gx.is-lite .ui-gx-mini.is-myth.is-anim { animation: uiGxDeal 460ms var(--ease-spring) calc(var(--i) * 55ms) both; box-shadow: 0 0 16px rgba(103, 232, 249, .6); }