/* =====================================================================
   Косметика профиля Syndicate Dota — рамки аватара и фоны карточек.
   Все анимации рамок/фонов живут ЗДЕСЬ (отдельный файл), чтобы не пухла
   разметка страницы. Классы:
     рамка  — .cos-avatar.cos-frame-<id>  (обёртка вокруг <img>)
     фон    — .cos-card-bg.cos-bg-<id>     (на .player-card)
   id синхронизированы с COSMETIC_FRAMES / COSMETIC_BACKGROUNDS в
   SyndicateDota.py и с каталогом, который отдаёт /api/dota/profile.
   ===================================================================== */

/* ---------- Аватар-компонент (общий для состава и редактора) ---------- */
.cos-avatar {
    --cos-size: 80px;
    position: relative;
    width: var(--cos-size);
    height: var(--cos-size);
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.cos-avatar img {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #000;
    display: block;
    border: 3px solid var(--bg-dark, #0d0d10);
    box-sizing: border-box;
}

.cos-avatar .cos-fx {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

/* ====================== РАМКА: ПЛАМЯ (fire) ========================== */
.cos-frame-fire img {
    border: 2px solid #1c0d04;
    box-shadow: inset 0 0 9px rgba(0, 0, 0, 0.65);
}

/* вращающееся тело огня */
.cos-frame-fire::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    z-index: 0;
    background: conic-gradient(from 0deg,
            #ff2d00, #ff8a00, #ffd200, #ff7b00,
            #ff2d00, #ff9d00, #ffe070, #ff5e00, #ff2d00);
    filter: blur(5px) saturate(1.25);
    animation: cosSpin 3.4s linear infinite;
}

/* мерцающее свечение */
.cos-frame-fire::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    z-index: 2;
    box-shadow:
        0 0 10px 2px rgba(255, 80, 0, 0.85),
        0 0 22px 6px rgba(255, 150, 0, 0.55),
        0 0 40px 13px rgba(255, 60, 0, 0.28);
    animation: cosFlicker 1.4s ease-in-out infinite alternate;
}

/* языки пламени (вращаются в обратную сторону) */
.cos-frame-fire .cos-fx {
    inset: -7px;
    background: conic-gradient(from 0deg,
            transparent 0 5deg, rgba(255, 205, 70, 0.95) 5deg 9deg,
            transparent 9deg 17deg, rgba(255, 130, 20, 0.9) 17deg 20deg,
            transparent 20deg 30deg);
    -webkit-mask: radial-gradient(circle, transparent 55%, #000 60%);
    mask: radial-gradient(circle, transparent 55%, #000 60%);
    filter: blur(1.6px);
    opacity: 0.75;
    animation: cosSpin 2.1s linear infinite reverse;
}

/* ====================== РАМКА: АВРОРА (aurora) ====================== */
.cos-frame-aurora img {
    border: 2px solid #0a0f1c;
}

.cos-frame-aurora::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    z-index: 0;
    background: conic-gradient(from 0deg,
            #00ffd5, #4d7bff, #b14dff, #ff4dd2, #4dffa6, #00ffd5);
    filter: blur(5px) saturate(1.3);
    animation: cosSpin 6s linear infinite;
}

.cos-frame-aurora::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    z-index: 2;
    box-shadow:
        0 0 14px 2px rgba(90, 160, 255, 0.6),
        0 0 28px 7px rgba(180, 80, 255, 0.4);
    animation: cosFlicker 3.4s ease-in-out infinite alternate;
}

/* ====================== РАМКА: ЗОЛОТО (gold) ======================= */
.cos-frame-gold img {
    border: 2px solid #2a200a;
}

.cos-frame-gold::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    z-index: 0;
    background: conic-gradient(from 0deg,
            #8a6508, #ffe9a0, #b8860b, #fff3c4, #b8860b, #ffd86b, #8a6508);
    animation: cosSpin 7s linear infinite;
}

.cos-frame-gold::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 11px 1px rgba(255, 200, 80, 0.5);
}

/* none — стандартная рамка, доп. слоёв нет */

/* ===================================================================
   ФОНЫ КАРТОЧЕК — применяются на .player-card (+ .cos-card-bg)
   =================================================================== */
.cos-card-bg {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* контент карточки — выше фоновых слоёв */
.cos-card-bg>* {
    position: relative;
    z-index: 1;
}

/* «прозрачим» штатные подложки, чтобы был виден косметический фон */
.cos-card-bg .card-header,
.cos-card-bg .card-body {
    background: transparent !important;
}

/* читаемость текста на любом фоне */
.cos-card-bg .player-name,
.cos-card-bg .player-id,
.cos-card-bg .stat-label,
.cos-card-bg .stat-val {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.cos-card-bg::before,
.cos-card-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* ---------------- Фон: НОЧНОЕ НЕБО (starry) ---------------- */
.cos-bg-starry {
    background: radial-gradient(130% 100% at 50% 0%, #16213e 0%, #0a0e1a 65%, #05070d 100%);
}

.cos-bg-starry::before {
    background-image:
        radial-gradient(1.6px 1.6px at 20% 30%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 70% 18%, #cfe3ff, transparent),
        radial-gradient(1.6px 1.6px at 40% 68%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 85% 58%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 55% 44%, #bcd4ff, transparent),
        radial-gradient(1.6px 1.6px at 12% 82%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 90% 86%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 32% 12%, #fff, transparent);
    background-repeat: no-repeat;
    animation: cosTwinkle 3.2s ease-in-out infinite;
}

.cos-bg-starry::after {
    background-image:
        radial-gradient(1.3px 1.3px at 25% 55%, #fff, transparent),
        radial-gradient(1.7px 1.7px at 65% 78%, #e9f0ff, transparent),
        radial-gradient(1.2px 1.2px at 80% 34%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 45% 90%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 15% 42%, #fff, transparent),
        radial-gradient(60% 42% at 78% 14%, rgba(80, 120, 255, 0.14), transparent 70%);
    background-repeat: no-repeat;
    animation: cosTwinkle 2.4s ease-in-out infinite alternate;
    animation-delay: 0.8s;
}

/* ---------------- Фон: УГЛИ (ember) ---------------- */
.cos-bg-ember {
    background: radial-gradient(120% 100% at 50% 115%, #5a1605 0%, #2a0a06 55%, #140605 100%);
}

.cos-bg-ember::before {
    background-image:
        radial-gradient(2px 2px at 20% 95%, rgba(255, 140, 40, 0.95), transparent),
        radial-gradient(1.6px 1.6px at 60% 98%, rgba(255, 90, 20, 0.85), transparent),
        radial-gradient(2px 2px at 80% 92%, rgba(255, 170, 60, 0.95), transparent),
        radial-gradient(1.6px 1.6px at 40% 96%, rgba(255, 110, 30, 0.85), transparent),
        radial-gradient(1.6px 1.6px at 30% 99%, rgba(255, 150, 50, 0.8), transparent);
    background-repeat: no-repeat;
    animation: cosEmberRise 4.2s linear infinite;
}

.cos-bg-ember::after {
    background: radial-gradient(80% 50% at 50% 120%, rgba(255, 90, 20, 0.22), transparent 70%);
    animation: cosFlicker 2.6s ease-in-out infinite alternate;
}

/* ---------------- Фон: ТУМАННОСТЬ (nebula) ---------------- */
.cos-bg-nebula {
    background:
        radial-gradient(80% 60% at 25% 22%, rgba(120, 80, 220, 0.38), transparent 60%),
        radial-gradient(70% 60% at 82% 72%, rgba(40, 120, 200, 0.36), transparent 60%),
        linear-gradient(160deg, #1a1233 0%, #0c0a1a 100%);
}

.cos-bg-nebula::before {
    background-image:
        radial-gradient(1.5px 1.5px at 30% 30%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 70% 40%, #d8c8ff, transparent),
        radial-gradient(1.5px 1.5px at 50% 75%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 85% 20%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 15% 60%, #cfe0ff, transparent);
    background-repeat: no-repeat;
    animation: cosTwinkle 3.6s ease-in-out infinite;
}

.cos-bg-nebula::after {
    background:
        radial-gradient(50% 40% at 30% 25%, rgba(150, 90, 255, 0.16), transparent 70%),
        radial-gradient(50% 40% at 80% 75%, rgba(60, 150, 255, 0.16), transparent 70%);
    animation: cosDrift 9s ease-in-out infinite alternate;
}

/* ==================================================================
   НАБОР 2 — премиальные рамки (ПРОЦЕДУРНЫЙ SVG) и фоны.
   SVG генерится в cosmetics.js и кладётся внутрь .cos-fx; здесь — стили
   и анимации его элементов. Без conic-масок — чёткая векторная графика.
   ================================================================== */

/* общий слой SVG-рамки */
.cos-svg {
    position: absolute;
    inset: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    overflow: visible;
    pointer-events: none;
    z-index: 1;
}

/* ===================== РАМКА: ГРОЗА (storm) ===================== */
.cos-frame-storm img { border: 2px solid #0a1326; box-shadow: inset 0 0 9px rgba(0, 0, 0, 0.6); }
.cos-frame-storm::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 10px 1px rgba(90, 150, 255, 0.55), 0 0 20px 5px rgba(70, 120, 255, 0.3);
    animation: stHalo 2.6s steps(1, end) infinite;
}
.cos-svg-storm .st-core { fill: none; stroke: #233a66; stroke-width: 3; opacity: 0.45; }
.cos-svg-storm .st-glow { fill: none; stroke: #3a78ff; stroke-width: 5.5; opacity: 0.3; }
.cos-svg-storm .st-bolt {
    fill: none;
    stroke: #eaf4ff;
    stroke-width: 1.7;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 13 87;
}
.cos-svg-storm .st-bolt-a { animation: stRun 1.2s linear infinite, stFlick 2.3s steps(1, end) infinite; }
.cos-svg-storm .st-bolt-b {
    stroke: #9cc4ff;
    stroke-width: 1.2;
    opacity: 0.85;
    animation: stRun 1.2s linear infinite reverse;
    animation-delay: -0.55s;
}

/* ===================== РАМКА: ЯД (poison) ====================== */
.cos-frame-poison img { border: 2px solid #0c1f0c; }
.cos-frame-poison::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 12px 2px rgba(120, 255, 40, 0.6), 0 0 22px 6px rgba(80, 200, 20, 0.4);
    animation: cosFlicker 2.4s ease-in-out infinite alternate;
}
.cos-svg-poison .ps-ring { fill: none; stroke: #9bff3a; stroke-width: 4; opacity: 0.28; }
.cos-svg-poison .ps-ring2 {
    fill: none;
    stroke: #d6ff7a;
    stroke-width: 1.6;
    opacity: 0.85;
    stroke-dasharray: 9 6;
    transform-box: fill-box;
    transform-origin: center;
    animation: cosSpin 7s linear infinite;
}
.cos-svg-poison .ps-bubble {
    fill: rgba(190, 255, 90, 0.85);
    stroke: #eaffc4;
    stroke-width: 0.4;
    transform-box: fill-box;
    transform-origin: center;
    animation: psBubble 3.4s ease-in infinite;
}

/* ===================== РАМКА: МОРОЗ (frost) ==================== */
.cos-frame-frost img { border: 2px solid #15324a; }
.cos-frame-frost::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 12px 2px rgba(160, 220, 255, 0.55), 0 0 22px 6px rgba(200, 240, 255, 0.35);
    animation: cosShimmer 4s ease-in-out infinite alternate;
}
.cos-svg-frost .fr-ring { fill: none; stroke: #cfeeff; stroke-width: 2; opacity: 0.55; }
.cos-svg-frost .fr-icicle {
    fill: url(#frGrad);
    stroke: #eaf7ff;
    stroke-width: 0.4;
    animation: frIce 2.6s ease-in-out infinite;
}
.cos-svg-frost .fr-flake { fill: none; stroke: #eaf7ff; stroke-width: 1.4; stroke-linecap: round; }
.cos-svg-frost .fr-flake-spin {
    transform-box: fill-box;
    transform-origin: center;
    animation: frSpin 9s linear infinite, frTwinkle 3s ease-in-out infinite;
}

/* =================== РАМКА: КИБЕРПАНК (cyber) ================= */
.cos-frame-cyber img { border: 2px solid #1a0033; }
.cos-frame-cyber::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 10px 1px rgba(255, 43, 214, 0.5), 0 0 18px 5px rgba(0, 234, 255, 0.4);
    animation: cyGlitch 3.4s steps(1, end) infinite;
}
.cos-svg-cyber { animation: cyShift 3.4s steps(1, end) infinite; }
.cos-svg-cyber .cy-ring {
    fill: none; stroke: #00eaff; stroke-width: 1.4; opacity: 0.85; stroke-dasharray: 6 4;
    transform-box: fill-box; transform-origin: center; animation: cosSpin 6s linear infinite;
}
.cos-svg-cyber .cy-ring2 {
    fill: none; stroke: #ff2bd6; stroke-width: 1; opacity: 0.7; stroke-dasharray: 2 6;
    transform-box: fill-box; transform-origin: center; animation: cosSpin 4s linear infinite reverse;
}
.cos-svg-cyber .cy-scan {
    fill: none; stroke: #aef6ff; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 15 85;
    transform-box: fill-box; transform-origin: center; animation: cosSpin 1.7s linear infinite;
}
.cos-svg-cyber .cy-tick { stroke: #00eaff; stroke-width: 1; opacity: 0.5; }
.cos-svg-cyber .cy-bracket { fill: none; stroke: #ff2bd6; stroke-width: 1.6; stroke-linecap: round; }

/* ===================== РАМКА: БЕЗДНА (abyss) ===================== */
.cos-frame-abyss img {
    border: 2px solid #07030b;
    box-shadow:
        inset 0 0 14px rgba(2, 0, 7, 0.9),
        0 0 0 1px rgba(190, 116, 255, 0.22);
}
.cos-frame-abyss::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    z-index: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(5, 1, 10, 0.98) 42%, transparent 49%),
        conic-gradient(from 0deg, #09030f, #3c1364, #a76bff, #1b0828, #7d43d8, #f0b2ff, #09030f);
    filter: blur(5px) saturate(1.3);
    animation: abPortal 8.5s linear infinite;
}
.cos-frame-abyss::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    z-index: 2;
    box-shadow:
        0 0 10px 1px rgba(228, 177, 255, 0.75),
        0 0 28px 7px rgba(123, 47, 220, 0.62),
        0 0 58px 16px rgba(13, 2, 28, 0.78);
    animation: abPulse 3.6s ease-in-out infinite;
}
.cos-svg-abyss {
    inset: -18px;
    width: calc(100% + 36px);
    height: calc(100% + 36px);
    filter:
        drop-shadow(0 0 7px rgba(126, 54, 224, 0.72))
        drop-shadow(0 0 15px rgba(31, 4, 58, 0.95));
}
.cos-svg-abyss .ab-void { fill: url(#abVoid); opacity: 0.64; }
.cos-svg-abyss .ab-ring {
    fill: none;
    transform-box: fill-box;
    transform-origin: center;
}
.cos-svg-abyss .ab-ring-a {
    stroke: #e9c1ff;
    stroke-width: 1.4;
    opacity: 0.78;
    stroke-dasharray: 14 10 3 11;
    animation: cosSpin 14s linear infinite;
}
.cos-svg-abyss .ab-ring-b {
    stroke: #6c36c6;
    stroke-width: 5.8;
    opacity: 0.26;
    stroke-dasharray: 28 14;
    animation: cosSpin 9s linear infinite reverse;
}
.cos-svg-abyss .ab-rift {
    fill: none;
    stroke: rgba(242, 209, 255, 0.72);
    stroke-width: 1.1;
    stroke-dasharray: 4 8;
    transform-box: fill-box;
    transform-origin: center;
    animation: abRift 3.6s ease-in-out infinite;
}
.cos-svg-abyss .ab-orbit {
    fill: none;
    stroke-linecap: round;
    transform-box: fill-box;
    transform-origin: center;
}
.cos-svg-abyss .ab-orbit-a {
    stroke: rgba(226, 183, 255, 0.2);
    stroke-width: 1;
    stroke-dasharray: 2 10;
    animation: cosSpin 10s linear infinite;
}
.cos-svg-abyss .ab-orbit-b {
    stroke: rgba(125, 65, 232, 0.25);
    stroke-width: 2.2;
    stroke-dasharray: 14 18;
    animation: cosSpin 7s linear infinite reverse;
}
.cos-svg-abyss .ab-orb {
    transform-box: view-box;
    transform-origin: 50px 50px;
    animation: abOrbOrbit 5.8s linear infinite;
}
.cos-svg-abyss .ab-orb-halo {
    fill: rgba(119, 54, 230, 0.22);
    filter: drop-shadow(0 0 8px rgba(162, 89, 255, 0.95));
    animation: abOrbPulse 2.6s ease-in-out infinite;
}
.cos-svg-abyss .ab-orb-core {
    fill: url(#abOrb);
    stroke: rgba(238, 204, 255, 0.78);
    stroke-width: 0.6;
    filter:
        drop-shadow(0 0 4px rgba(221, 176, 255, 0.9))
        drop-shadow(0 0 11px rgba(102, 45, 219, 0.8));
}
.cos-svg-abyss .ab-orb-1,
.cos-svg-abyss .ab-orb-4,
.cos-svg-abyss .ab-orb-7 {
    animation-duration: 7.4s;
    animation-direction: reverse;
}
.cos-svg-abyss .ab-orb-5,
.cos-svg-abyss .ab-orb-8 {
    opacity: 0.74;
}

/* ---------------- Фон: ГРОЗА (storm) — тёмное небо + молния ------- */
.cos-card-bg.cos-bg-storm {
    background:
        radial-gradient(70% 50% at 32% 16%, rgba(70, 100, 185, 0.45), transparent 65%),
        radial-gradient(60% 50% at 82% 26%, rgba(45, 65, 140, 0.4), transparent 65%),
        linear-gradient(180deg, #0c1430 0%, #070c1e 55%, #04060f 100%);
}
.cos-bg-storm::before {
    /* ветвистый раскат молнии (тонкое белое ядро + синее свечение) + вспышка неба */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M44 0 L49 13 L42 23 L51 34 L45 47 L54 60 L47 73 L55 86 L49 100 M51 34 L60 40 L69 38 L79 45 L88 49 L96 53 M45 47 L37 55 L41 67 L33 79 M54 60 L63 66 L70 64 M42 23 L34 28 L29 38' stroke='%23a9ccff' stroke-width='3.4' opacity='0.5'/%3E%3Cpath d='M44 0 L49 13 L42 23 L51 34 L45 47 L54 60 L47 73 L55 86 L49 100 M51 34 L60 40 L69 38 L79 45 L88 49 L96 53 M45 47 L37 55 L41 67 L33 79 M54 60 L63 66 L70 64 M42 23 L34 28 L29 38' stroke='%23ffffff' stroke-width='1.1'/%3E%3C/g%3E%3C/svg%3E") 52% 0% / auto 100% no-repeat,
        radial-gradient(85% 65% at 46% 0%, rgba(180, 210, 255, 0.55), transparent 72%);
    opacity: 0;
    animation: stStrike 4.6s ease-out infinite;
}
.cos-bg-storm::after {
    /* статичная атмосфера: лёгкое затемнение снизу (без движущихся полос) */
    background: radial-gradient(100% 70% at 50% 100%, rgba(0, 0, 0, 0.35), transparent 72%);
}

/* ---------------- Фон: БОЛОТО (poison) ---------------- */
.cos-bg-poison {
    background:
        radial-gradient(90% 70% at 30% 20%, rgba(80, 200, 40, 0.42), transparent 60%),
        radial-gradient(80% 70% at 75% 80%, rgba(150, 255, 40, 0.32), transparent 60%),
        linear-gradient(160deg, #0f2410 0%, #06120a 100%);
}
.cos-bg-poison::before {
    background-image:
        radial-gradient(3px 3px at 20% 90%, rgba(180, 255, 80, 0.95), transparent),
        radial-gradient(2px 2px at 55% 95%, rgba(140, 255, 40, 0.9), transparent),
        radial-gradient(3.5px 3.5px at 80% 88%, rgba(200, 255, 120, 0.95), transparent),
        radial-gradient(2px 2px at 40% 92%, rgba(150, 255, 60, 0.85), transparent),
        radial-gradient(2.5px 2.5px at 68% 99%, rgba(170, 255, 70, 0.9), transparent);
    background-repeat: no-repeat;
    animation: cosEmberRise 5s linear infinite;
}
.cos-bg-poison::after {
    background:
        radial-gradient(60% 50% at 25% 35%, rgba(120, 255, 40, 0.22), transparent 70%),
        radial-gradient(55% 45% at 80% 60%, rgba(80, 220, 20, 0.2), transparent 70%);
    animation: cosDrift 8s ease-in-out infinite alternate;
}

/* ---------------- Фон: МЕТЕЛЬ (frost) — снег + сосульки + блеск ----
   Селектор составной (.cos-card-bg.cos-bg-frost), чтобы базовый фон с
   сосульками не перебивался правилом `.player-card { background }` из
   основного <style> (оно грузится после cosmetics.css). */
.cos-card-bg.cos-bg-frost {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23a9dcff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='120' height='3' fill='url(%23g)'/%3E%3Cpolygon fill='url(%23g)' points='3,0 13,0 8,12'/%3E%3Cpolygon fill='url(%23g)' points='15,0 25,0 20,8'/%3E%3Cpolygon fill='url(%23g)' points='28,0 38,0 33,13'/%3E%3Cpolygon fill='url(%23g)' points='41,0 51,0 46,9'/%3E%3Cpolygon fill='url(%23g)' points='54,0 64,0 59,12'/%3E%3Cpolygon fill='url(%23g)' points='67,0 77,0 72,8'/%3E%3Cpolygon fill='url(%23g)' points='80,0 90,0 85,12'/%3E%3Cpolygon fill='url(%23g)' points='93,0 103,0 98,10'/%3E%3Cpolygon fill='url(%23g)' points='106,0 116,0 111,13'/%3E%3C/svg%3E") top / 100% 18px repeat-x,
        radial-gradient(120% 80% at 50% 0%, #3f6e95 0%, #1b3650 55%, #0c1a2a 100%);
}
.cos-bg-frost::before {
    background-image:
        radial-gradient(2px 2px at 15% 12%, #fff, transparent),
        radial-gradient(1.6px 1.6px at 38% 24%, #eaf6ff, transparent),
        radial-gradient(2px 2px at 68% 16%, #fff, transparent),
        radial-gradient(1.6px 1.6px at 85% 30%, #fff, transparent),
        radial-gradient(2px 2px at 52% 8%, #dff1ff, transparent),
        radial-gradient(1.6px 1.6px at 25% 42%, #fff, transparent),
        radial-gradient(2px 2px at 60% 38%, #fff, transparent),
        radial-gradient(1.6px 1.6px at 8% 30%, #eaf6ff, transparent),
        radial-gradient(2px 2px at 92% 18%, #fff, transparent);
    background-repeat: no-repeat;
    animation: cosSnow 5s linear infinite;
}
.cos-bg-frost::after {
    background: linear-gradient(115deg, transparent 38%, rgba(220, 245, 255, 0.22) 50%, transparent 60%);
    background-size: 250% 100%;
    animation: cosFrostSweep 5s ease-in-out infinite;
}

/* ---------------- Фон: КИБЕРСЕТКА (cyber) — чистые неоновые переливы -- */
.cos-card-bg.cos-bg-cyber {
    background:
        radial-gradient(75% 60% at 18% 18%, rgba(255, 43, 214, 0.5), transparent 62%),
        radial-gradient(75% 60% at 82% 82%, rgba(0, 234, 255, 0.5), transparent 62%),
        linear-gradient(135deg, #2a0a45 0%, #120a3a 45%, #08122e 100%);
    background-size: 180% 180%, 180% 180%, 100% 100%;
    animation: cyHue 10s ease-in-out infinite alternate;
}
.cos-bg-cyber::before {
    /* мягкие дрейфующие неоновые пятна */
    background:
        radial-gradient(50% 42% at 62% 30%, rgba(150, 60, 255, 0.4), transparent 65%),
        radial-gradient(46% 40% at 30% 72%, rgba(0, 210, 255, 0.34), transparent 65%);
    animation: cosDrift 9s ease-in-out infinite alternate;
}

/* ---------------- Фон: БЕЗДНА (abyss) — тёмно-сиреневый премиальный разлом -- */
.cos-card-bg.cos-bg-abyss {
    background:
        radial-gradient(120% 95% at 56% 22%, rgba(58, 26, 108, 0.55), transparent 60%),
        radial-gradient(90% 80% at 50% 120%, rgba(0, 0, 0, 0.85), transparent 60%),
        linear-gradient(160deg, #0a0414 0%, #120824 50%, #050109 100%);
    border-color: rgba(173, 100, 255, 0.34);
    box-shadow:
        0 0 0 1px rgba(205, 156, 255, 0.09) inset,
        0 18px 44px rgba(4, 1, 10, 0.64);
}
.cos-bg-abyss::before {
    /* медленно вращающаяся спиральная туманность + орбитальная россыпь звёзд */
    background:
        radial-gradient(1.6px 1.6px at 18% 30%, rgba(233, 205, 255, 0.9), transparent),
        radial-gradient(1.3px 1.3px at 70% 22%, rgba(190, 140, 255, 0.8), transparent),
        radial-gradient(1.4px 1.4px at 40% 74%, rgba(244, 218, 255, 0.75), transparent),
        radial-gradient(1.2px 1.2px at 86% 60%, rgba(200, 160, 255, 0.7), transparent),
        radial-gradient(1.1px 1.1px at 30% 50%, rgba(220, 190, 255, 0.65), transparent),
        radial-gradient(1.3px 1.3px at 62% 82%, rgba(210, 170, 255, 0.6), transparent),
        conic-gradient(from 0deg at 56% 40%,
            rgba(138, 70, 230, 0) 0deg, rgba(150, 80, 240, 0.22) 45deg,
            rgba(70, 30, 140, 0) 120deg, rgba(180, 120, 255, 0.16) 200deg,
            rgba(60, 24, 120, 0) 270deg, rgba(150, 80, 240, 0.22) 330deg,
            rgba(138, 70, 230, 0) 360deg),
        radial-gradient(55% 45% at 56% 40%, rgba(120, 60, 210, 0.22), transparent 72%);
    transform-origin: 56% 40%;
    animation: abSwirl 52s linear infinite, abNebulaBreathe 9s ease-in-out infinite;
}
.cos-bg-abyss::after {
    /* поле чёрных дыр со светящимися ободами — дышит, покачивается, мерцает цветом */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90'%3E%3Cdefs%3E%3CradialGradient id='h'%3E%3Cstop offset='0.52' stop-color='%238a46e6' stop-opacity='0'/%3E%3Cstop offset='0.78' stop-color='%237a3ad0' stop-opacity='0.5'/%3E%3Cstop offset='0.9' stop-color='%23c9a6ff' stop-opacity='0.9'/%3E%3Cstop offset='1' stop-color='%23c9a6ff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='h2'%3E%3Cstop offset='0.58' stop-color='%237a3ad0' stop-opacity='0'/%3E%3Cstop offset='0.84' stop-color='%236a32c0' stop-opacity='0.45'/%3E%3Cstop offset='0.95' stop-color='%23b88cff' stop-opacity='0.75'/%3E%3Cstop offset='1' stop-color='%23b88cff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg%3E%3Ccircle cx='26' cy='24' r='10' fill='url(%23h2)'/%3E%3Ccircle cx='26' cy='24' r='6' fill='%23050012'/%3E%3Ccircle cx='128' cy='30' r='11' fill='url(%23h2)'/%3E%3Ccircle cx='128' cy='30' r='7' fill='%23050012'/%3E%3Ccircle cx='58' cy='66' r='8' fill='url(%23h2)'/%3E%3Ccircle cx='58' cy='66' r='5' fill='%23050012'/%3E%3Ccircle cx='114' cy='68' r='7' fill='url(%23h2)'/%3E%3Ccircle cx='114' cy='68' r='4' fill='%23050012'/%3E%3Ccircle cx='16' cy='58' r='6' fill='url(%23h2)'/%3E%3Ccircle cx='16' cy='58' r='3.5' fill='%23050012'/%3E%3Ccircle cx='150' cy='40' r='5' fill='url(%23h2)'/%3E%3Ccircle cx='150' cy='40' r='3' fill='%23050012'/%3E%3C/g%3E%3Ccircle cx='88' cy='34' r='19' fill='url(%23h)'/%3E%3Ccircle cx='88' cy='34' r='12.5' fill='%23030010'/%3E%3Cpath d='M76.3 27.3 A13.5 13.5 0 0 1 94.8 22.3' fill='none' stroke='%23e3c4ff' stroke-width='1.5' stroke-linecap='round' opacity='0.85'/%3E%3C/svg%3E") center / cover no-repeat;
    animation: abAbyssPulse 7s ease-in-out infinite;
}

/* ==================================================================
   НАБОР 3 — «Природа», «Святой», «Кровавый» (рамки SVG + фоны).
   ================================================================== */

/* ===================== РАМКА: ПРИРОДА (nature) ==================== */
.cos-frame-nature img { border: 2px solid #10260f; }
.cos-frame-nature::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    z-index: 0;
    background: conic-gradient(from 0deg,
            #2e6b24, #7ac95e, #3d8a2f, #9fe07a, #35772a, #7ac95e, #2e6b24);
    filter: blur(5px) saturate(1.15);
    animation: cosSpin 11s linear infinite;
}
.cos-frame-nature::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 12px 2px rgba(130, 220, 95, 0.5), 0 0 24px 6px rgba(70, 160, 50, 0.3);
    animation: cosShimmer 4.5s ease-in-out infinite alternate;
}
.cos-svg-nature .nt-ring { fill: none; stroke: #4f9b3f; stroke-width: 4; opacity: 0.3; }
.cos-svg-nature .nt-vine-ring {
    fill: none;
    stroke: #a5e88a;
    stroke-width: 1.5;
    opacity: 0.8;
    stroke-dasharray: 10 5 3 7;
    transform-box: fill-box;
    transform-origin: center;
    animation: cosSpin 13s linear infinite;
}
/* «ветерок» — светлые дуги, бегущие по кругу */
.cos-svg-nature .nt-wind {
    fill: none;
    stroke: rgba(225, 255, 210, 0.65);
    stroke-width: 1.1;
    stroke-linecap: round;
    stroke-dasharray: 16 84;
}
.cos-svg-nature .nt-wind-a { animation: ntWind 3.2s linear infinite; }
.cos-svg-nature .nt-wind-b {
    stroke: rgba(190, 245, 170, 0.45);
    stroke-dasharray: 10 90;
    animation: ntWind 4.4s linear infinite reverse;
}
/* листья: внешняя группа кружит вокруг аватара, внутренняя порхает */
.cos-svg-nature .nt-orbit {
    transform-box: view-box;
    transform-origin: 50px 50px;
    animation: cosSpin 16s linear infinite;
}
.cos-svg-nature .nt-orbit-1,
.cos-svg-nature .nt-orbit-4,
.cos-svg-nature .nt-orbit-6 { animation-duration: 21s; animation-direction: reverse; }
.cos-svg-nature .nt-flutter {
    transform-box: fill-box;
    transform-origin: center;
    animation: ntFlutter 2.8s ease-in-out infinite alternate;
}
.cos-svg-nature .nt-leaf {
    fill: url(#ntLeaf);
    stroke: #eaffdb;
    stroke-width: 0.35;
    filter: drop-shadow(0 0 2px rgba(120, 220, 90, 0.6));
}
.cos-svg-nature .nt-vein { fill: none; stroke: rgba(30, 80, 20, 0.55); stroke-width: 0.5; }

/* ====================== РАМКА: СВЯТОЙ (holy) ====================== */
.cos-frame-holy img { border: 2px solid #4a3a12; }
/* «святящийся фон» — тёплое сияние позади аватара */
.cos-frame-holy::before {
    content: '';
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    z-index: 0;
    background: radial-gradient(circle,
            rgba(255, 246, 210, 0.95) 28%,
            rgba(255, 224, 140, 0.45) 55%,
            transparent 72%);
    filter: blur(6px);
    animation: hlBreathe 3.4s ease-in-out infinite;
}
.cos-frame-holy::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    z-index: 2;
    box-shadow:
        0 0 12px 3px rgba(255, 238, 175, 0.75),
        0 0 28px 9px rgba(255, 210, 110, 0.45);
    animation: cosFlicker 2.9s ease-in-out infinite alternate;
}
/* SVG повыше обычного — над головой должно хватить места нимбу */
.cos-svg-holy {
    inset: -16px;
    width: calc(100% + 32px);
    height: calc(100% + 32px);
}
.cos-svg-holy .hl-ray {
    stroke: rgba(255, 238, 170, 0.85);
    stroke-width: 1.1;
    stroke-linecap: round;
    animation: cosTwinkle 2.6s ease-in-out infinite;
}
.cos-svg-holy .hl-spark {
    fill: none;
    stroke: #fff6d8;
    stroke-width: 0.9;
    stroke-linecap: round;
    filter: drop-shadow(0 0 2.5px rgba(255, 236, 160, 0.95));
    animation: cosTwinkle 2.2s ease-in-out infinite;
}
.cos-svg-holy .hl-halo-wrap {
    transform-box: view-box;
    transform-origin: 50px 5px;
    animation: hlHalo 3.6s ease-in-out infinite;
    filter:
        drop-shadow(0 0 4px rgba(255, 240, 180, 0.95))
        drop-shadow(0 0 11px rgba(255, 205, 90, 0.75));
}
.cos-svg-holy .hl-halo-glow { fill: none; stroke: rgba(255, 214, 110, 0.4); stroke-width: 4.5; }
.cos-svg-holy .hl-halo { fill: none; stroke: #ffe9a0; stroke-width: 2.4; }
.cos-svg-holy .hl-halo-inner { fill: none; stroke: #fffbe8; stroke-width: 1; opacity: 0.95; }

/* ===================== РАМКА: КРОВАВЫЙ (blood) ==================== */
.cos-frame-blood img {
    border: 2px solid #2b0505;
    box-shadow: inset 0 0 12px rgba(60, 0, 0, 0.8);
}
.cos-frame-blood::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    z-index: 0;
    background: conic-gradient(from 0deg,
            #5e0808, #a01212, #4a0505, #8c0f0f, #600909, #a01212, #5e0808);
    filter: blur(4px) saturate(1.2);
    animation: cosSpin 14s linear infinite;
}
.cos-frame-blood::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    z-index: 2;
    box-shadow:
        0 0 12px 2px rgba(190, 25, 25, 0.55),
        0 0 26px 8px rgba(120, 0, 0, 0.4);
    animation: cosFlicker 2.3s ease-in-out infinite alternate;
}
.cos-svg-blood .bl-ring { fill: none; stroke: #7d0e0e; stroke-width: 3.4; opacity: 0.55; }
.cos-svg-blood .bl-ring2 {
    fill: none;
    stroke: #c22323;
    stroke-width: 1.2;
    opacity: 0.7;
    stroke-dasharray: 22 9;
    transform-box: fill-box;
    transform-origin: center;
    animation: cosSpin 17s linear infinite;
}
/* потёки: медленно «дышат», вытягиваясь вниз */
.cos-svg-blood .bl-drip {
    fill: url(#blGrad);
    stroke: rgba(255, 120, 120, 0.35);
    stroke-width: 0.3;
    transform-box: fill-box;
    transform-origin: center top;
    animation: blStretch 2.8s ease-in-out infinite;
}
/* капли: срываются и падают строго вниз */
.cos-svg-blood .bl-drop {
    fill: #a01212;
    stroke: rgba(255, 140, 140, 0.4);
    stroke-width: 0.25;
    transform-box: fill-box;
    transform-origin: center;
    filter: drop-shadow(0 0 1.5px rgba(160, 10, 10, 0.8));
    animation: blDrop 2.4s ease-in infinite;
}

/* ---------------- Фон: ПРИРОДА (nature) — ветер и листья ---------- */
.cos-card-bg.cos-bg-nature {
    background:
        radial-gradient(90% 70% at 22% 14%, rgba(70, 170, 75, 0.4), transparent 60%),
        radial-gradient(80% 65% at 80% 88%, rgba(130, 210, 90, 0.28), transparent 60%),
        linear-gradient(160deg, #142a10 0%, #0a1607 100%);
}
.cos-bg-nature::before {
    /* два слоя листьев, дрейфующих по диагонали (бесшовные тайлы 160px) */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cpath d='M20 30 q9 -11 20 0 q-9 11 -20 0' fill='%237ac95e' opacity='.9'/%3E%3Cpath d='M92 12 q7 -9 16 0 q-7 9 -16 0' fill='%23a8e08a' opacity='.75' transform='rotate(40 100 12)'/%3E%3Cpath d='M128 72 q9 -11 20 0 q-9 11 -20 0' fill='%235da344' opacity='.85' transform='rotate(-28 138 72)'/%3E%3Cpath d='M48 104 q7 -9 16 0 q-7 9 -16 0' fill='%2390d872' opacity='.7' transform='rotate(66 56 104)'/%3E%3Cpath d='M108 132 q8 -10 18 0 q-8 10 -18 0' fill='%23b9f09a' opacity='.8' transform='rotate(14 117 132)'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cpath d='M60 40 q6 -8 14 0 q-6 8 -14 0' fill='%2368b84f' opacity='.55' transform='rotate(-50 67 40)'%3E%3C/path%3E%3Cpath d='M130 20 q5 -7 12 0 q-5 7 -12 0' fill='%2394dd76' opacity='.5' transform='rotate(24 136 20)'/%3E%3Cpath d='M24 96 q6 -8 14 0 q-6 8 -14 0' fill='%23aae98c' opacity='.5' transform='rotate(80 31 96)'/%3E%3Cpath d='M96 120 q5 -7 12 0 q-5 7 -12 0' fill='%2377c95c' opacity='.55' transform='rotate(-15 102 120)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 160px 160px, 160px 160px;
    animation: ntLeavesDrift 11s linear infinite;
}
.cos-bg-nature::after {
    /* порыв ветра — светлая диагональная волна */
    background: linear-gradient(105deg, transparent 40%, rgba(215, 255, 195, 0.14) 50%, transparent 60%);
    background-size: 250% 100%;
    animation: cosFrostSweep 6s ease-in-out infinite;
}

/* ---------------- Фон: СВЯТОЙ (holy) — сияние и божественные лучи -- */
.cos-card-bg.cos-bg-holy {
    background:
        radial-gradient(130% 95% at 50% -12%, rgba(255, 243, 200, 0.6) 0%, rgba(255, 216, 120, 0.22) 42%, transparent 70%),
        linear-gradient(180deg, #33270f 0%, #1b1305 55%, #0d0902 100%);
}
.cos-bg-holy::before {
    /* веер божественных лучей из-за верхнего края, мягко покачивается */
    inset: -45%;
    background: repeating-conic-gradient(from 168deg at 50% 0%,
            rgba(255, 238, 170, 0.3) 0deg 5deg,
            rgba(255, 238, 170, 0) 5deg 17deg);
    -webkit-mask: linear-gradient(rgba(0, 0, 0, 0.95), transparent 78%);
    mask: linear-gradient(rgba(0, 0, 0, 0.95), transparent 78%);
    transform-origin: 50% 0%;
    animation: hlRays 9s ease-in-out infinite alternate;
}
.cos-bg-holy::after {
    /* золотая пыль + пульс общего сияния */
    background-image:
        radial-gradient(1.8px 1.8px at 22% 30%, #fff4cf, transparent),
        radial-gradient(1.3px 1.3px at 64% 22%, #ffe9ad, transparent),
        radial-gradient(1.7px 1.7px at 84% 44%, #fff4cf, transparent),
        radial-gradient(1.3px 1.3px at 40% 56%, #ffe9ad, transparent),
        radial-gradient(1.6px 1.6px at 12% 68%, #fff4cf, transparent),
        radial-gradient(1.3px 1.3px at 74% 76%, #ffe9ad, transparent),
        radial-gradient(65% 45% at 50% 0%, rgba(255, 232, 150, 0.28), transparent 70%);
    background-repeat: no-repeat;
    animation: cosTwinkle 3.4s ease-in-out infinite;
}

/* ---------------- Фон: КРОВАВЫЙ (blood) — стекающая кровь ----------
   Составной селектор — базовый фон с потёками не должен перебиваться
   правилом `.player-card { background }` (грузится после cosmetics.css). */
.cos-card-bg.cos-bg-blood {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 22' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23a01212'/%3E%3Cstop offset='1' stop-color='%234d0505'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='120' height='4' fill='url(%23g)'/%3E%3Cpath d='M4 0 h9 q0 11 -4.5 15 q-4.5 -4 -4.5 -15' fill='url(%23g)'/%3E%3Cpath d='M20 0 h7 q0 7 -3.5 10 q-3.5 -3 -3.5 -10' fill='url(%23g)'/%3E%3Cpath d='M33 0 h10 q0 15 -5 19 q-5 -4 -5 -19' fill='url(%23g)'/%3E%3Cpath d='M50 0 h7 q0 8 -3.5 11 q-3.5 -3 -3.5 -11' fill='url(%23g)'/%3E%3Cpath d='M63 0 h9 q0 12 -4.5 16 q-4.5 -4 -4.5 -16' fill='url(%23g)'/%3E%3Cpath d='M79 0 h7 q0 6 -3.5 9 q-3.5 -3 -3.5 -9' fill='url(%23g)'/%3E%3Cpath d='M92 0 h9 q0 13 -4.5 17 q-4.5 -4 -4.5 -17' fill='url(%23g)'/%3E%3Cpath d='M108 0 h8 q0 9 -4 12 q-4 -3 -4 -12' fill='url(%23g)'/%3E%3C/svg%3E") top / 100% 24px repeat-x,
        radial-gradient(120% 85% at 50% 0%, #4a0808 0%, #260404 55%, #120202 100%);
}
.cos-bg-blood::before {
    /* срывающиеся капли, падающие вниз */
    background-image:
        radial-gradient(2.4px 3.4px at 9% 6%, rgba(190, 30, 30, 0.95), transparent),
        radial-gradient(2px 3px at 30% 12%, rgba(160, 18, 18, 0.9), transparent),
        radial-gradient(2.6px 3.6px at 51% 8%, rgba(200, 40, 40, 0.95), transparent),
        radial-gradient(2px 3px at 70% 14%, rgba(160, 18, 18, 0.9), transparent),
        radial-gradient(2.4px 3.4px at 88% 7%, rgba(185, 28, 28, 0.9), transparent);
    background-repeat: no-repeat;
    animation: blFall 3.2s linear infinite;
}
.cos-bg-blood::after {
    /* влажный блик и пульсирующая багровая вуаль */
    background:
        linear-gradient(115deg, transparent 42%, rgba(255, 90, 90, 0.1) 50%, transparent 58%),
        radial-gradient(85% 60% at 50% 108%, rgba(120, 8, 8, 0.35), transparent 70%);
    background-size: 250% 100%, 100% 100%;
    animation: blGlisten 5.5s ease-in-out infinite;
}

/* ============================ Keyframes ============================= */
@keyframes cosSpin {
    to { transform: rotate(360deg); }
}

@keyframes cosFlicker {
    0%   { opacity: 0.78; transform: scale(1); }
    50%  { opacity: 1;    transform: scale(1.03); }
    100% { opacity: 0.85; transform: scale(0.99); }
}

@keyframes cosTwinkle {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 1; }
}

@keyframes cosEmberRise {
    0%   { transform: translateY(0);     opacity: 0.15; }
    35%  { opacity: 1; }
    100% { transform: translateY(-70px); opacity: 0; }
}

@keyframes cosDrift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(6px, -6px, 0) scale(1.06); }
}

@keyframes cosShimmer {
    0%, 100% { opacity: 0.7; filter: brightness(1); }
    50%      { opacity: 1;   filter: brightness(1.25); }
}

/* --- ГРОЗА: бегущая искра, мерцание, вспышка неба + молния --- */
@keyframes stRun { to { stroke-dashoffset: -100; } }

@keyframes stFlick {
    0%, 100% { opacity: 1; }
    8%  { opacity: 0.25; }
    10% { opacity: 1; }
    55% { opacity: 0.4; }
    57% { opacity: 1; }
    75% { opacity: 0.2; }
    77% { opacity: 1; }
}

@keyframes stHalo {
    0%, 100% { opacity: 0.5; }
    9%  { opacity: 1; }
    11% { opacity: 0.5; }
    56% { opacity: 1; }
    58% { opacity: 0.5; }
}

@keyframes stStrike {
    0%, 14%, 100% { opacity: 0; }
    5%  { opacity: 1; }
    7%  { opacity: 0.15; }
    9%  { opacity: 0.9; }
    12% { opacity: 0; }
    60% { opacity: 0; }
    64% { opacity: 1; }
    66% { opacity: 0.2; }
    68% { opacity: 0.85; }
    71% { opacity: 0; }
}

/* --- ЯД: пузыри всплывают --- */
@keyframes psBubble {
    0%   { transform: translateY(6px) scale(0.5);  opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: translateY(-34px) scale(1.1); opacity: 0; }
}

/* --- МОРОЗ: снег, вращение снежинок, блеск, мерцание сосулек --- */
@keyframes cosSnow {
    0%   { transform: translateY(-14px); opacity: 0.3; }
    50%  { opacity: 1; }
    100% { transform: translateY(36px);  opacity: 0.2; }
}

@keyframes cosFrostSweep {
    0%, 100% { background-position: -60% 0; }
    50%      { background-position: 160% 0; }
}

@keyframes frSpin { to { transform: rotate(360deg); } }

@keyframes frTwinkle {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
}

@keyframes frIce {
    0%, 100% { opacity: 0.8; }
    50%      { opacity: 1; }
}

/* --- КИБЕРПАНК: глитч, сдвиг, бегущая перспективная сетка --- */
@keyframes cyGlitch {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
    52% { opacity: 0.5; }
    54% { opacity: 0.9; }
    80% { opacity: 1; }
    82% { opacity: 0.55; }
}

@keyframes cyShift {
    0%, 49%, 55%, 100% { transform: translateX(0); }
    50% { transform: translateX(0.8px); }
    52% { transform: translateX(-0.8px); }
}

@keyframes cyHue {
    0%   { background-position: 0% 50%, 100% 50%, 0 0; }
    100% { background-position: 100% 50%, 0% 50%, 0 0; }
}

/* --- БЕЗДНА: пульсирующий разлом, щупальца и глубокий фон --- */
@keyframes abPortal {
    0%   { transform: rotate(0deg) scale(1); filter: blur(4px) saturate(1.2); }
    50%  { transform: rotate(180deg) scale(1.06); filter: blur(5px) saturate(1.55); }
    100% { transform: rotate(360deg) scale(1); filter: blur(4px) saturate(1.2); }
}

@keyframes abPulse {
    0%, 100% { opacity: 0.72; transform: scale(0.98); }
    45%      { opacity: 1; transform: scale(1.04); }
    70%      { opacity: 0.86; transform: scale(1.01); }
}

@keyframes abOrbOrbit {
    to { transform: rotate(360deg); }
}

@keyframes abOrbPulse {
    0%, 100% { opacity: 0.36; transform: scale(0.84); }
    50%      { opacity: 0.95; transform: scale(1.24); }
}

@keyframes abRift {
    0%, 100% { opacity: 0.35; transform: rotate(0deg) scale(0.94); }
    50%      { opacity: 0.9; transform: rotate(120deg) scale(1.08); }
}

@keyframes abAbyssPulse {
    0%, 100% { opacity: 0.88; transform: scale(1) rotate(-2deg);    filter: hue-rotate(0deg) brightness(1); }
    50%      { opacity: 1;    transform: scale(1.045) rotate(2deg); filter: hue-rotate(26deg) brightness(1.18); }
}

@keyframes abSwirl {
    0%   { transform: rotate(0deg) scale(1.7); }
    100% { transform: rotate(360deg) scale(1.7); }
}

@keyframes abNebulaBreathe {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 0.95; }
}

/* --- ПРИРОДА: бегущий ветер, порхание листьев, дрейф листвы фона --- */
@keyframes ntWind { to { stroke-dashoffset: -100; } }

@keyframes ntFlutter {
    0%   { transform: rotate(-16deg) scale(0.95); }
    100% { transform: rotate(18deg) scale(1.12); }
}

@keyframes ntLeavesDrift {
    from { background-position: 0 0, 40px 20px; }
    to   { background-position: -160px 160px, -120px 180px; }
}

/* --- СВЯТОЙ: дыхание сияния, парение нимба, покачивание лучей --- */
@keyframes hlBreathe {
    0%, 100% { opacity: 0.6;  transform: scale(0.97); }
    50%      { opacity: 1;    transform: scale(1.05); }
}

@keyframes hlHalo {
    0%, 100% { transform: translateY(0);      filter: brightness(1); }
    50%      { transform: translateY(-1.8px); filter: brightness(1.35); }
}

@keyframes hlRays {
    0%   { transform: rotate(-4deg); opacity: 0.65; }
    50%  { transform: rotate(0deg);  opacity: 1; }
    100% { transform: rotate(4deg);  opacity: 0.75; }
}

/* --- КРОВАВЫЙ: потёки тянутся, капли падают, блик и вуаль --- */
@keyframes blStretch {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(1.28); }
}

@keyframes blDrop {
    0%   { transform: translateY(0) scale(0.5);   opacity: 0; }
    18%  { transform: translateY(2px) scale(1);   opacity: 1; }
    85%  { opacity: 0.9; }
    100% { transform: translateY(24px) scale(1.05); opacity: 0; }
}

@keyframes blFall {
    0%   { transform: translateY(-4px); opacity: 0; }
    18%  { opacity: 1; }
    100% { transform: translateY(74px); opacity: 0; }
}

@keyframes blGlisten {
    0%, 100% { background-position: -60% 0, 0 0; opacity: 0.8; }
    50%      { background-position: 160% 0, 0 0; opacity: 1; }
}

/* уважение к prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .cos-avatar::before,
    .cos-avatar::after,
    .cos-avatar .cos-fx,
    .cos-svg,
    .cos-svg *,
    .cos-card-bg::before,
    .cos-card-bg::after {
        animation: none !important;
    }
}