/* _content/Ombredan/Pages/BoardCard.razor.rz.scp.css */
.board-card[b-yf7102k6hk] {
    width: 10vw;
    aspect-ratio: 9 / 14;
    background-color: black;
    border: 1px solid #000;
    border-radius: 0.2vw;
    will-change: transform;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: transform 0.2s ease, border 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.player-board .board-card[b-yf7102k6hk] {
    transform: rotateX(-70deg) translateY(-10vw);
}

    .player-board .board-card:hover[b-yf7102k6hk],
    .player-board .board-card.hover-can-attack:hover[b-yf7102k6hk],
    .player-board .board-card.hover-can-be-target:hover[b-yf7102k6hk] {
        transform: rotateX(-70deg) translateY(-12vw) scale(1.1);
    }

    .player-board .board-card.hover-can-be-target:hover[b-yf7102k6hk] {
        border: 1px solid #00cc55;
        box-shadow: 0 0 0.6vw 0.3vw rgba(0, 200, 100, 0.35);
    }

    .player-board .board-card.hover-can-attack:hover[b-yf7102k6hk] {
        border: 1px solid #00aaff;
        box-shadow: 0 0 0.6vw 0.3vw rgba(0, 170, 255, 0.35);
    }

    .player-board .board-card.hover-cannot-be-target:hover[b-yf7102k6hk] {
        border: 2px solid red;
        cursor: not-allowed;
    }

.opponent-board .board-card[b-yf7102k6hk] {
    width: 10.5vw;
    aspect-ratio: 9 / 14;
    transform: rotateX(-70deg) translateY(-14vw);
}

    .opponent-board .board-card:hover[b-yf7102k6hk],
    .opponent-board .board-card.hover-can-attack:hover[b-yf7102k6hk],
    .opponent-board .board-card.hover-can-be-target:hover[b-yf7102k6hk] {
        transform: rotateX(-70deg) translateY(-16vw) scale(1.2);
    }

    .opponent-board .board-card.hover-can-be-target:hover[b-yf7102k6hk] {
        border: 1px solid #00cc55;
        box-shadow: 0 0 0.6vw 0.3vw rgba(0, 200, 100, 0.35);
    }

    .opponent-board .board-card.hover-can-attack:hover[b-yf7102k6hk] {
        border: 1px solid #00aaff;
        box-shadow: 0 0 0.6vw 0.3vw rgba(0, 170, 255, 0.35);
    }

    .opponent-board .board-card.hover-cannot-be-target:hover[b-yf7102k6hk] {
        border: 2px solid red;
        cursor: not-allowed;
    }

.board-card.selected-card[b-yf7102k6hk] {
    transform: rotateX(-70deg) translateY(-10vw) scale(1.1);
    border: 1px solid #ffcc00;
    box-shadow: 0 0 0.6vw 0.3vw rgba(255, 204, 0, 0.4);
    z-index: 10;
}

.board-card.no-hover:hover[b-yf7102k6hk],
.board-card.no-hover.hover-can-attack:hover[b-yf7102k6hk],
.board-card.no-hover.hover-can-be-target:hover[b-yf7102k6hk] {
    transform: rotateX(-70deg) translateY(-10vw) scale(1.1);
    border: 1px solid #ffcc00;
    box-shadow: 0 0 0.6vw 0.3vw rgba(255, 204, 0, 0.4);
    z-index: 10;
}


.g-card-shadow[b-yf7102k6hk] {
    position: absolute;
    width: 6vw;
    height: 9vw;
    background: rgba(0, 0, 0, 0.4);
    filter: blur(0.8vw);
    transform: rotateX(79deg) translateZ(-11vw) translateX(1vw) translateY(-8.5vw) rotateZ(-5deg) translateX(-3.5vw) skewX(13deg);
    transform-origin: top center;
    z-index: -1;
    clip-path: polygon( 0% 0%, 100% 10%, 100% 100%, 0% 90% );
}

.side-top[b-yf7102k6hk] {
    position: absolute;
    width: 0.3vw;
    height: 5.5vw;
    background: #5e5e5e;
    transform: rotateY(90deg) rotateX(90deg) translateX(0.15vw);
    transform-origin: top;
}

.side-left[b-yf7102k6hk] {
    position: absolute;
    width: 0.3vw;
    height: 95%;
    background: linear-gradient(#5e5e5e, #000000);
    right: -7px;
    top: 5px;
    transform: rotateY(90deg);
    transform-origin: left;
}

.side-right[b-yf7102k6hk] {
    position: absolute;
    width: 0.3vw;
    height: 95%;
    background: linear-gradient(#5e5e5e, #000000);
    left: 0;
    top: 5px;
    transform: rotateY(90deg);
    transform-origin: left;
}

.side-back[b-yf7102k6hk] {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(#5e5e5e, #000000);
    border: 1px solid #000;
    border-radius: 0.5vw;
    transform: translateZ(-0.3vw);
}



.g-card-body[b-yf7102k6hk] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    box-sizing: border-box;
    border-radius: 0.3vw;
    background: linear-gradient(145deg, #2d2b28, #1c1a18);
    box-shadow: inset 0 0 0.6vw #000, inset 0 0 1vw #111, inset 0 0 0.4vw #333;
    border: 0.25vw solid transparent;
    overflow: hidden;
}

    .g-card-body[b-yf7102k6hk]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        box-sizing: border-box;
        border-top: 0.25vw solid #534e4b;
        border-left: 0.25vw solid #645a56;
        border-radius: 0.3vw;
        z-index: 3;
    }

    .g-card-body[b-yf7102k6hk]::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        box-sizing: border-box;
        border-bottom: 0.25vw solid #2e2824;
        border-right: 0.25vw solid #191513;
        border-radius: 0.3vw;
        z-index: 3;
    }

.g-inner-shadow[b-yf7102k6hk] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    border-radius: 0.3vw;
    z-index: 1;
    box-shadow: inset 0 0 0.6vw #000, inset 0 0 1vw #111, inset 0 0 0.4vw #333;
}



.g-card-template[b-yf7102k6hk] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
}

.g-card-art[b-yf7102k6hk] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    max-height: none;
    z-index: 0;
}

.g-card-header[b-yf7102k6hk] {
    position: absolute;
    width: 100%;
    bottom: 1vh;
    height: 0.5vw;
}

    .g-card-header.rare[b-yf7102k6hk] {
        background-color: #0629ff;
        box-shadow: 0 0 0.5vw rgba(6, 41, 255, 0.6);
    }

    .g-card-header.epic[b-yf7102k6hk] {
        background-color: #8000c0;
        box-shadow: 0 0 0.5vw rgba(128, 0, 192, 0.6);
    }

    .g-card-header.character[b-yf7102k6hk] {
        background-color: #ff902d;
        box-shadow: 0 0 0.5vw rgba(255, 144, 45, 0.6);
    }



.g-card-attack[b-yf7102k6hk],
.g-card-health[b-yf7102k6hk],
.g-card-class[b-yf7102k6hk] {
    position: absolute;
    z-index: 20;
    width: 3vw;
    height: 3vw;
    pointer-events: none;
    transform: translateZ(0.5vw);
}

.g-card-attack[b-yf7102k6hk] {
    left: -0.7vw;
    bottom: -0.7vw;
}

.g-card-health[b-yf7102k6hk] {
    right: -0.7vw;
    bottom: -0.7vw;
}

.g-card-class[b-yf7102k6hk] {
    right: -0.7vw;
    top: -0.7vw;
    width: 2.7vw;
    height: 2.7vw;
}

.class-icon[b-yf7102k6hk] {
    position: absolute;
    top: 17%;
    left: 17%;
    width: 65%;
}

.opponent-board .g-card-attack[b-yf7102k6hk],
.opponent-board .g-card-health[b-yf7102k6hk] {
    width: 3.5vw;
    height: 3.5vw;
}


.circle-frame[b-yf7102k6hk] {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .circle-frame[b-yf7102k6hk]::before {
        content: "";
        position: absolute;
        top: 1px;
        left: 1px;
        width: 100%;
        height: 100%;
        pointer-events: none;
        box-sizing: border-box;
        border-top: 3px solid #534e4b;
        border-left: 3px solid #645a56;
        border-radius: 50%;
        z-index: 3;
    }

    .circle-frame[b-yf7102k6hk]::after {
        content: "";
        position: absolute;
        top: 1px;
        left: 1px;
        width: 100%;
        height: 100%;
        pointer-events: none;
        box-sizing: border-box;
        border-bottom: 3px solid #2e2824;
        border-right: 3px solid #191513;
        border-radius: 50%;
        z-index: 3;
    }

.circle-fill[b-yf7102k6hk] {
    position: absolute;
    top: 0.15vw;
    left: 0.15vw;
    width: calc(100% - 0.3vw);
    height: calc(100% - 0.3vw);
    border-radius: 50%;
    border: 2px solid black;
    z-index: 0;
    box-shadow: inset 0 0 0.4vw rgba(0, 0, 0, 0.7), inset 0 0 1vw rgba(17, 17, 17, 0.6), inset 0 0 0.4vw rgba(51, 51, 51, 0.6), 0.15vw -0.3vw 0.3vw rgba(0, 0, 0, 0.7);
}


.circle-text[b-yf7102k6hk] {
    position: relative;
    z-index: 1;
    font-size: 1.8vw;
    font-weight: bold;
    color: #fff6b5;
    text-shadow: -0.05vw -0.07vw 0 #000, 0.07vw -0.07vw 0 #000, -0.07vw 0.07vw 0 #000, 0.07vw 0.07vw 0 #000;
}

.opponent-board .circle-text[b-yf7102k6hk] {
    font-size: 2vw;
}

.circle-text.text-damage[b-yf7102k6hk] {
    color: #ff4c4c;
}

.circle-text.text-bonus[b-yf7102k6hk] {
    color: #35cf00;
    font-size: 2.3vw;
}


.g-card-health .circle-fill[b-yf7102k6hk] {
    background: linear-gradient(#391b16, #55281e);
}

.g-card-class .circle-fill[b-yf7102k6hk] {
    background: linear-gradient(#c1a580, #af956f);
    box-shadow: inset 0 0 0.1vw rgba(0, 0, 0, 0.2), inset 0 0 1vw rgba(17, 17, 17, 0.2), inset 0 0 0.2vw rgba(51, 51, 51, 0.2), 0.1vw -0.2vw 0.2vw rgba(0, 0, 0, 0.1);
}


.g-card-class .circle-frame[b-yf7102k6hk] {
    width: 90%;
    height: 90%;
}


.class-mage[b-yf7102k6hk] {
    background: linear-gradient(#1e2a70, #2645a1);
}

.class-warior[b-yf7102k6hk] {
    background: linear-gradient(#1d5c2f, #2d8e49);
}

.class-heal[b-yf7102k6hk] {
    background: linear-gradient(#ffffff, #eeeeee);
}

.class-defender[b-yf7102k6hk] {
    background: linear-gradient(#c2a200, #e8d041);
}

.class-anti-mage[b-yf7102k6hk] {
    background: linear-gradient(#281d28, #542653);
}

.magic-shield[b-yf7102k6hk] {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    border-radius: 50%;
    background: radial-gradient( circle at 30% 30%, rgba(0, 255, 255, 0.06), rgba(0, 200, 255, 0.03), rgba(0, 200, 255, 0.01), transparent 90% );
    box-shadow: 0 0 0.6vw 0.15vw rgba(0, 255, 255, 0.6), 0 0 1.2vw 0.3vw rgba(0, 255, 255, 0.12), inset 0 0 0.7vw rgba(0, 255, 255, 0.25);
    transform: translateZ(1vw);
    pointer-events: none;
    z-index: 5;
    animation: shieldPulse-b-yf7102k6hk 3s ease-in-out infinite;
}

@keyframes shieldPulse-b-yf7102k6hk {
    0%, 100% {
        transform: scale(1) translateZ(1vw);
        box-shadow: 0 0 0.6vw 0.15vw rgba(0, 255, 255, 0.2), 0 0 1.2vw 0.3vw rgba(0, 255, 255, 0.12), inset 0 0 0.7vw rgba(0, 255, 255, 0.25);
    }

    50% {
        transform: scale(1.01) translateZ(1vw);
        box-shadow: 0 0 0.9vw 0.25vw rgba(0, 255, 255, 0.3), 0 0 1.6vw 0.45vw rgba(0, 255, 255, 0.18), inset 0 0 0.9vw rgba(0, 255, 255, 0.3);
    }
}



.g-card-icons[b-yf7102k6hk] {
    position: absolute;
    top: -3.5%;
    left: -5%;
    display: flex;
    gap: 0.2vw;
    justify-content: start;
    align-items: center;
    z-index: 15;
    pointer-events: none;
    transform: translateZ(0.5vw);
}

.g-card-icon[b-yf7102k6hk] {
    width: 2.2vw;
    height: 2.2vw;
    border-radius: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 0 0.1vw #000);
    border: 2px solid #6d6d21;
}

.poison-mask[b-yf7102k6hk] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 55%;
    pointer-events: none;
    z-index: 4;
    overflow: hidden;
    border-top-left-radius: 6vw;
    border-top-right-radius: 6vw;
}

    .poison-mask[b-yf7102k6hk]::before {
        content: "";
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(ellipse at center bottom, rgba(0, 255, 100, 0.15) 0%, rgba(0, 180, 60, 0.25) 50%, transparent 90%);
        animation: poisonPulse-b-yf7102k6hk 3.2s ease-in-out infinite;
        mix-blend-mode: screen;
        backdrop-filter: blur(0.4vw);
    }

    .poison-mask[b-yf7102k6hk]::after {
        content: "";
        position: absolute;
        top: 5%;
        left: 50%;
        width: 1vw;
        height: 1vw;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(0, 255, 100, 0.4) 20%, rgba(0, 255, 100, 0.1) 70%, transparent 100%);
        animation: poisonDrop-b-yf7102k6hk 2.8s infinite ease-in-out;
        transform: translateX(-100%);
    }


@keyframes poisonPulse-b-yf7102k6hk {
    0%, 100% {
        opacity: 0.4;
        transform: scaleY(1);
    }

    50% {
        opacity: 0.7;
        transform: scaleY(1.04);
    }
}

@keyframes poisonDrop-b-yf7102k6hk {
    0% {
        transform: translateX(-50%) translateY(0) scale(1);
        opacity: 0.6;
    }

    70% {
        transform: translateX(-50%) translateY(6vw) scale(0.8);
        opacity: 0.15;
    }

    100% {
        transform: translateX(-50%) translateY(8vw) scale(0.6);
        opacity: 0;
    }
}




.silence-mask[b-yf7102k6hk] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;
    overflow: hidden;
    transform: translateZ(2vw);
    width: 110%;
    left: -5%;
}

    /* Центральная магическая печать — теперь четче */
    .silence-mask[b-yf7102k6hk]::before {
        content: "";
        position: absolute;
        top: 45%;
        left: 50%;
        width: 7vw;
        height: 7vw;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: radial-gradient(circle, rgba(160, 100, 255, 0.5) 20%, rgba(100, 60, 200, 0.2) 60%, transparent 85%), repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.1) 0deg 10deg, transparent 10deg 20deg);
        animation: silenceSealPulse-b-yf7102k6hk 3s ease-in-out infinite;
        box-shadow: 0 0 0.5vw rgba(190, 130, 255, 0.35), inset 0 0 0.2vw rgba(255, 255, 255, 0.3), 0 0 0.8vw rgba(120, 60, 255, 0.15);
    }

    /* Тонкие бегущие диагональные полосы */
    .silence-mask[b-yf7102k6hk]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient( -25deg, transparent, transparent 3vw, rgba(160, 80, 255, 0.3) 3vw, rgba(100, 50, 200, 0.3) 1.8vw, transparent 5vw );
        animation: silenceFlow-b-yf7102k6hk 6s linear infinite;
        opacity: 0.7;
    }


@keyframes silenceSealPulse-b-yf7102k6hk {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.95;
    }
}

@keyframes silenceFlow-b-yf7102k6hk {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 10vw 10vw;
    }
}



.stun-mask[b-yf7102k6hk] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;
    overflow: hidden;
    background-color: rgba(168,195,255,0.1);
}

    /* Волна 1 */
    .stun-mask[b-yf7102k6hk]::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0.4vw;
        height: 0.4vw;
        border: 0.1vw solid rgba(120, 220, 255, 0.6); /* ← плотнее */
        border-radius: 50%;
        transform: translate(-50%, -50%) translateZ(2vw) translateY(-2vw);
        animation: ripple-b-yf7102k6hk 3.2s ease-out infinite;
        opacity: 0.8; /* ← менее прозрачный */
        box-shadow: 0 0 0.4vw rgba(120, 220, 255, 0.3); /* ← ярче */
    }

    /* Волна 2 */
    .stun-mask[b-yf7102k6hk]::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0.4vw;
        height: 0.4vw;
        border: 0.1vw solid rgba(100, 200, 255, 0.5); /* ← плотнее */
        border-radius: 50%;
        transform: translate(-50%, -50%) translateX(-2vw);
        animation: ripple-b-yf7102k6hk 3.2s ease-out infinite;
        animation-delay: 1.6s;
        opacity: 0.7; /* ← меньше прозрачности */
        box-shadow: 0 0 0.3vw rgba(100, 200, 255, 0.2); /* ← ярче */
    }

@keyframes ripple-b-yf7102k6hk {
    0% {
        width: 0.4vw;
        height: 0.4vw;
        opacity: 0.9; /* ← тоже выше */
    }

    100% {
        width: 8vw;
        height: 8vw;
        opacity: 0;
    }
}

.stealth-mask[b-yf7102k6hk] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;
    overflow: hidden;
    background-color: rgba(0,0,0,0.5);
    mix-blend-mode: multiply;
}






.rage-mask[b-yf7102k6hk] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;
    border-radius: 0.3vw;
    overflow: hidden;
}

    .rage-mask[b-yf7102k6hk]::before {
        content: "";
        position: absolute;
        top: 30%;
        left: 42%;
        width: 0.12vw;
        height: 9vw;
        background: rgba(220, 20, 20, 0.85);
        clip-path: polygon(51% 0%, 90% 100%, 10% 100%);
        transform: rotate(183deg);
        border-radius: 0.1vw;
        box-shadow: none;
    }

    .rage-mask[b-yf7102k6hk]::after {
        content: "";
        position: absolute;
        top: 33%;
        left: 34%;
        width: 0.2vw;
        height: 7.3vw;
        background: rgba(200, 15, 15, 0.7);
        clip-path: polygon(50% 0%, 85% 100%, 15% 100%);
        transform: rotate(184deg);
        border-radius: 0.1vw;
        box-shadow: none;
    }

.rage-mask[b-yf7102k6hk] {
    top: -6%;
    background: linear-gradient(40deg, transparent 45%, rgba(180, 10, 10, 0.7) 45%, rgba(180, 10, 10, 0.7) 55%, transparent 55%), linear-gradient(30deg, transparent 40%, rgba(210, 20, 20, 0.8) 40%, rgba(210, 20, 20, 0.8) 60%, transparent 60%);
    background-repeat: no-repeat;
    background-position: 52% 50%, 61% 48%;
    background-size: 0.12vw 75vw, 0.1vw 39.8vw;
    transform: rotate(45deg) translateZ(1vw);
}

.taunt-mask[b-yf7102k6hk] {
    position: absolute;
    pointer-events: none;
    z-index: 6;
    border-radius: 50%;
    --target-size: 9vw;
    width: var(--target-size);
    height: var(--target-size);
    top: 50%;
    left: 50%;
    background: radial-gradient(circle, rgba(102, 10, 10, 0.3) 5.5%, rgba(0, 0, 0, 0.6) 15%, rgba(0, 0, 0, 0.6) 50.5%, rgba(102, 10, 10, 0.3) 47%, rgba(102, 10, 10, 0.3) 56.5%, rgba(0, 0, 0, 0.6) 56%, rgba(0, 0, 0, 0.6) 61.5%, rgba(102, 10, 10, 0.3) 64%, transparent 100%), linear-gradient(90deg, transparent 45%, rgba(102, 10, 10, 0.7) 45%, rgba(102, 10, 10, 0.7) 55%, transparent 55%), linear-gradient(0deg, transparent 45%, rgba(102, 10, 10, 0.7) 45%, rgba(102, 10, 10, 0.7) 55%, transparent 55%);
    animation: tauntPulse 3.5s ease-in-out infinite;
    transform: translate(-50%, -50%) translateZ(1vw);
    opacity: 0.8;
}

.attack-icon[b-yf7102k6hk] {
    position: absolute;
    top: -40%;
    left: 50%;
    transform: translateX(-50%) scale(1);
    width: 30%;
    height: auto;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 20;
    opacity: 0;
    filter: drop-shadow(0 0 0.4vw rgba(255, 255, 0, 0.8));
    will-change: transform, filter, opacity;
}

.attack-icon-show[b-yf7102k6hk] {
    opacity: 1 !important;
    animation: attack-icon-pulse-b-yf7102k6hk 0.6s ease-in-out infinite alternate;
}

@keyframes attack-icon-pulse-b-yf7102k6hk {
    0% {
        transform: translateX(-50%) scale(1.1) rotate(-3deg);
        filter: drop-shadow(0 0 0.6vw rgba(255, 220, 0, 0.8)) drop-shadow(0 0 1vw rgba(255, 255, 0, 0.4));
    }

    100% {
        transform: translateX(-50%) scale(1.5) rotate(6deg);
        filter: drop-shadow(0 0 1vw rgba(255, 255, 150, 1)) drop-shadow(0 0 1.5vw rgba(255, 255, 100, 0.9));
    }
}

.damage-mask[b-yf7102k6hk] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max-content;
    height: auto;
    pointer-events: none;
    z-index: 999;
    transform: translate(-50%, -50%) translateZ(3%);
    font-size: 4vw;
    font-weight: 900;
    color: red;
    text-shadow: 0 0 1vw #000, 0 0 0.5vw #ff0000;
    opacity: 0;
    scale: 1;
}

    .damage-mask.floating-damage[b-yf7102k6hk] {
        animation: damage-float-b-yf7102k6hk 0.5s ease-out forwards;
        opacity: 1;
    }

@keyframes damage-float-b-yf7102k6hk {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
        filter: drop-shadow(0 0 0.5vw #ff0000);
    }

    30% {
        opacity: 1;
        transform: translate(-50%, -60%) scale(1.4);
        filter: drop-shadow(0 0 1vw #ff0000);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -110%) scale(1);
        filter: drop-shadow(0 0 0vw #000);
    }
}


.heal-mask[b-yf7102k6hk] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max-content;
    height: auto;
    pointer-events: none;
    z-index: 999;
    transform: translate(-50%, -50%) translateZ(3%);
    font-size: 4vw;
    font-weight: 900;
    color: #00ff88;
    text-shadow: 0 0 1vw #003300, 0 0 0.5vw #00ff88;
    opacity: 0;
    scale: 1;
}

    .heal-mask.floating-heal[b-yf7102k6hk] {
        animation: heal-float-b-yf7102k6hk 0.5s ease-out forwards;
        opacity: 1;
    }

@keyframes heal-float-b-yf7102k6hk {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
        filter: drop-shadow(0 0 0.5vw #00ff88);
    }

    30% {
        opacity: 1;
        transform: translate(-50%, -60%) scale(1.4);
        filter: drop-shadow(0 0 1vw #00ff88);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -110%) scale(1);
        filter: drop-shadow(0 0 0vw #003300);
    }
}
/* _content/Ombredan/Pages/Game.razor.rz.scp.css */
.g-content[b-punlcoepxy] {
    perspective: 1000px;
    overflow: hidden;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.camera[b-punlcoepxy] {
    transform-style: preserve-3d;
    will-change: transform;
}

.game-board[b-punlcoepxy] {
    transform-style: preserve-3d;
    transform: rotateX(63deg) translateY(-40vw);
    width: 100vw;
    height: 100vw;
    background: linear-gradient(#332211, #554433);
    border: 0.1vw solid #000;
    z-index: 0;
    background-image: url('images/board.png');
    background-size: cover;
    background-position: center;
}

    .game-board[b-punlcoepxy]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 5vw;
        background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.6)), url('images/board.png');
        transform: rotateX(90deg);
        transform-origin: bottom;
        background-size: cover;
        background-position: top center;
    }

.board-card-row[b-punlcoepxy] {
    position: absolute;
    display: flex;
    gap: 2vw;
    transform-style: preserve-3d;
}

.player-board[b-punlcoepxy] {
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
}

.opponent-board[b-punlcoepxy] {
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
}

.player-name[b-punlcoepxy] {
    position: absolute;
    z-index: 10;
    font-size: 1.2rem;
    color: #ccc;
    padding: 0.5rem 1rem;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 0.4rem;
    pointer-events: none;
}

.opponent-name[b-punlcoepxy] {
    top: 1rem;
    left: 1rem;
}

.self-name[b-punlcoepxy] {
    bottom: 1rem;
    left: 1rem;
}



.hand[b-punlcoepxy] {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) rotateX(-60deg) translateY(-60%) scale(0.7);
    display: flex;
    justify-content: center;
    gap: 1vw;
    transform-origin: center;
}

.hand-card[b-punlcoepxy] {
    transform: translateX(var(--shiftX, 0%));
    transform-origin: bottom center;
    transition: transform 0.3s ease;
    pointer-events: auto;
    z-index: 1;
}

    .hand-card:hover[b-punlcoepxy] {
        transform: translateX(var(--shiftX, 0%)) translateY(-40%) scale(1.3);
        z-index: 1000;
    }

    .hand-card.selected-hand-card[b-punlcoepxy] {
        transform: translateX(var(--shiftX, 0%)) translateY(-40%) scale(1.3);
        z-index: 1000;
        border: 1px solid #ffcc00;
        box-shadow: 0 0 0.6vw 0.3vw rgba(255, 204, 0, 0.4);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }




.projectile[b-punlcoepxy] {
    position: absolute;
    width: 1.5vw;
    height: 1.5vw;
    background: radial-gradient(white, blue);
    border-radius: 50%;
    z-index: 9999;
    pointer-events: none;
}

.floating-text[b-punlcoepxy] {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    font-weight: bold;
    font-size: 1.2vw;
    animation: floatUp-b-punlcoepxy 1s ease-out;
    pointer-events: none;
}

    .floating-text.damage[b-punlcoepxy] {
        color: red;
    }

    .floating-text.heal[b-punlcoepxy] {
        color: lightgreen;
    }

@keyframes floatUp-b-punlcoepxy {
    from {
        transform: translate(-50%, 0);
        opacity: 1;
    }

    to {
        transform: translate(-50%, -2vw);
        opacity: 0;
    }
}

.preview-container[b-punlcoepxy] {
    position: absolute;
    top: 40%;
    left: 5%;
    transform: translateY(-50%);
    z-index: 9999;
    pointer-events: none;
    animation: fade-in-b-punlcoepxy 0.3s ease-in-out;
}

@keyframes fade-in-b-punlcoepxy {
    from {
        opacity: 0;
        transform: translateY(-60%);
    }

    to {
        opacity: 1;
        transform: translateY(-50%);
    }
}

.board-card-wrapper[b-punlcoepxy] {
    display: contents;
}







.player-info[b-punlcoepxy] {
    position: absolute;
    right: -10%;
    bottom: -7%;
    width: 42vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1vw;
    z-index: 10000;
    transform: scale(0.7);
}

.hero-frame[b-punlcoepxy] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.hero-art[b-punlcoepxy] {
    position: absolute;
    top: 4%;
    left: 0;
    width: 100%;
    height: 85%;
    object-fit: contain;
}

.hero-overlay[b-punlcoepxy] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.turn-points-frame[b-punlcoepxy] {
    position: relative;
    width: 100%;
    height: 2.7vw;
    background-image: url(images/turn-points-frame.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: -1.2em;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -1;
}

.turn-points-inner[b-punlcoepxy] {
    display: flex;
}

.turn-point[b-punlcoepxy] {
    background-image: url(images/soul-point.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 1.2em;
    height: 1.2em;
}

.souls-bank-frame[b-punlcoepxy] {
    width: 8em;
    height: 8em;
    margin-top: -6em;
    margin-left: -17em;
    background: none;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s ease;
    transform-origin: right center;
}

.souls-bank-img[b-punlcoepxy] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 0.2em rgba(0, 0, 0, 0.5));
    pointer-events: none;
}


.end-turn-frame[b-punlcoepxy] {
    width: 9em;
    height: 9em;
    margin-top: -9em;
    margin-left: 7em;
    margin-right: -10em;
    background: none;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s ease;
    transform-origin: left center;
}

.end-turn-img[b-punlcoepxy] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 0.2em rgba(0, 0, 0, 0.5));
    pointer-events: none;
}
.souls-bank-frame[b-punlcoepxy],
.end-turn-frame[b-punlcoepxy] {
    transition: transform 0.2s ease;
    transform-origin: center;
    position: relative;
}

    .end-turn-frame.normal:hover[b-punlcoepxy] {
        transform: scale(1.02);
        filter: drop-shadow(0 0 0.2em rgba(255, 217, 0, 0.5)) drop-shadow(0 0 1px rgb(255, 255, 120));
    }
    /* === АКТИВНОЕ СОСТОЯНИЕ === */
    .souls-bank-frame.active[b-punlcoepxy] {
        cursor: pointer;
        filter: drop-shadow(0 0 1px rgb(0, 210, 255)) brightness(1.3);
    }
    .end-turn-frame.active[b-punlcoepxy] {
        cursor: pointer;
        filter: drop-shadow(0 0 1px rgb(255, 255, 120)) brightness(1.3);
    }

        /* === HOVER работает только на активных === */
    .souls-bank-frame.active:hover[b-punlcoepxy] {
        transform: scale(1.02);
        filter: drop-shadow(0 0 0.2em rgba(0, 174, 255, 0.5)) drop-shadow(0 0 1px rgb(0, 210, 255)) brightness(1.3);
    }

    .end-turn-frame.active:hover[b-punlcoepxy] {
        transform: scale(1.02);
        filter: drop-shadow(0 0 0.2em rgba(255, 217, 0, 0.5)) drop-shadow(0 0 1px rgb(255, 255, 120)) brightness(1.3);
    }

    /* === ПОЛУАКТИВНОЕ СОСТОЯНИЕ === */
    .end-turn-frame.normal[b-punlcoepxy] {
        filter: none;
        cursor: pointer;
    }

    /* === НЕАКТИВНОЕ СОСТОЯНИЕ === */
    .souls-bank-frame.inactive[b-punlcoepxy],
    .end-turn-frame.disabled[b-punlcoepxy],
    .souls-bank-frame.disabled[b-punlcoepxy] {
        filter: brightness(0.4);
        cursor: default;
        pointer-events: none;
    }

.souls-cost[b-punlcoepxy] {
    position: absolute;
    top: 1%;
    left: 49%;
    transform: translateX(-50%);
    color: #00cfff;
    font-size: 1.5em;
    font-weight: bold;
    text-shadow: 0 0 1px #9dedff, 0 0 3px #7a7a7a, 0 0 3px #b4b4b4, 0 0 3px #000000;
    pointer-events: none;
    user-select: none;
}

.hero-name[b-punlcoepxy] {
    position: absolute;
    bottom: 7.5%;
    left: 50%;
    transform: translateX(-50%);
    color: #dfdabd;
    font-size: 1.3em;
    font-weight: 600;
    letter-spacing: 0.05em;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.turn-points-value[b-punlcoepxy] {
    position: absolute;
    bottom: -1.2em;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5em;
    font-weight: 600;
    color: #e8dca7;
    pointer-events: none;
    user-select: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.turn-banner[b-punlcoepxy] {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5em;
    font-weight: bold;
    color: #f8e58c;
    text-shadow: 0 0 4px #000;
    background: rgba(0, 0, 0, 0.7);
    padding: 0.5em 1.5em;
    border-radius: 10px;
    z-index: 99999;
    pointer-events: none;
    user-select: none;
    border: 2px solid #f8e58c;

}
/* _content/Ombredan/Pages/HeroCard.razor.rz.scp.css */
.hero-card[b-9j06lzuqhp] {
    width: 10vw;
    aspect-ratio: 9 / 14;
    background-color: black;
    border: 1px solid #000;
    border-radius: 0.2vw;
    will-change: transform;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: transform 0.2s ease, border 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

    .hero-card:hover[b-9j06lzuqhp] {
        transform: scale(1.1);
    }


.selected-card[b-9j06lzuqhp] {
    transform: scale(1.1);
    border: 1px solid #ffcc00;
    box-shadow: 0 0 0.6vw 0.3vw rgba(255, 204, 0, 0.4);
}

.side-top[b-9j06lzuqhp] {
    position: absolute;
    width: 0.3vw;
    height: 5.5vw;
    background: #5e5e5e;
    transform: rotateY(90deg) rotateX(90deg) translateX(0.15vw);
    transform-origin: top;
}

.side-left[b-9j06lzuqhp] {
    position: absolute;
    width: 0.3vw;
    height: 95%;
    background: linear-gradient(#5e5e5e, #000000);
    right: -7px;
    top: 5px;
    transform: rotateY(90deg);
    transform-origin: left;
}

.side-right[b-9j06lzuqhp] {
    position: absolute;
    width: 0.3vw;
    height: 95%;
    background: linear-gradient(#5e5e5e, #000000);
    left: 0;
    top: 5px;
    transform: rotateY(90deg);
    transform-origin: left;
}

.side-back[b-9j06lzuqhp] {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(#5e5e5e, #000000);
    border: 1px solid #000;
    border-radius: 0.5vw;
    transform: translateZ(-0.3vw);
}

.g-card-body[b-9j06lzuqhp] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    box-sizing: border-box;
    border-radius: 0.3vw;
    background: linear-gradient(145deg, #2d2b28, #1c1a18);
    box-shadow: inset 0 0 0.6vw #000, inset 0 0 1vw #111, inset 0 0 0.4vw #333;
    border: 0.25vw solid transparent;
    overflow: hidden;
}

    .g-card-body[b-9j06lzuqhp]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        box-sizing: border-box;
        border-top: 0.25vw solid #534e4b;
        border-left: 0.25vw solid #645a56;
        border-radius: 0.3vw;
        z-index: 3;
    }

    .g-card-body[b-9j06lzuqhp]::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        box-sizing: border-box;
        border-bottom: 0.25vw solid #2e2824;
        border-right: 0.25vw solid #191513;
        border-radius: 0.3vw;
        z-index: 3;
    }

.g-inner-shadow[b-9j06lzuqhp] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    border-radius: 0.3vw;
    z-index: 1;
    box-shadow: inset 0 0 0.6vw #000, inset 0 0 1vw #111, inset 0 0 0.4vw #333;
}


.g-card-art[b-9j06lzuqhp] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    max-height: none;
    z-index: 0;
}

.hero-name[b-9j06lzuqhp]{

}
/* _content/Ombredan/Pages/MinionCard.razor.rz.scp.css */


.hand-card-minion[b-b11dakl962] {
    width: 10vw;
    aspect-ratio: 9 / 14;
    position: relative;
}

.background-template[b-b11dakl962] {
    position: relative;
    width: 100%;
    height: 100%;
    background: url(images/hand-card-minion-template.png);
    background-size: 100% 100%;
    border-radius: 0.5em;
}

.name-background-template[b-b11dakl962] {
    display: none;
    position: absolute;
    bottom: 27%;
    left: 0;
    width: 100%;
    height: 15%;
    background: url(images/hand-card-name-template.png);
    background-size: 100% 100%;
    z-index: 1;
}

.description-background-template[b-b11dakl962] {
    position: absolute;
    bottom: 12%;
    left: 3%;
    width: 94%;
    height: 31%;
    background: url(images/hand-card-description-template.png);
    background-size: 100% 100%;
    z-index: 0;
}

.circle[b-b11dakl962] {
    position: absolute;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}


.level-background-template[b-b11dakl962] {
    width: 24%;
    aspect-ratio: 1 / 1;
    top: -2%;
    left: -4%;
    background-image: url(images/hand-card-level-template.png);
}

.class-background-template[b-b11dakl962] {
    width: 24%;
    aspect-ratio: 1 / 1;
    top: -2%;
    right: -4%;
    background-image: url(images/hand-card-level-template.png);
}

.health-background-template[b-b11dakl962] {
    width: 28%;
    aspect-ratio: 1 / 1;
    bottom: -2%;
    right: -5%;
    background-image: url(images/hand-card-health-template.png);
}

.attack-background-template[b-b11dakl962] {
    width: 28%;
    aspect-ratio: 1 / 1;
    bottom: -2%;
    left: -5%;
    background-image: url(images/hand-card-attack-template.png);
}

.art[b-b11dakl962] {
    position: absolute;
    top: 5%;
    left: 0;
    width: 100%;
    height: calc(80%);
    object-fit: cover;
    object-position: top center;
}

.rarity[b-b11dakl962] {
    width: 100%;
    height: 3%;
    z-index: 0;
    position: absolute;
    bottom: 0;
}

    .rarity.rare[b-b11dakl962] {
        background-color: #0629ff;
        box-shadow: 0 0 0.5vw rgba(6, 41, 255, 0.6);
    }

    .rarity.epic[b-b11dakl962] {
        background-color: #8000c0;
        box-shadow: 0 0 0.5vw rgba(128, 0, 192, 0.6);
    }

    .rarity.character[b-b11dakl962] {
        background-color: #ff902d;
        box-shadow: 0 0 0.5vw rgba(255, 144, 45, 0.6);
    }

.card-name[b-b11dakl962] {
    position: absolute;
    top: 14%;
    font-size: 1.5em;
    font-weight: bold;
    color: #d8d3b4;
    text-align: center;
    text-shadow: 0 0 0.2em black;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-top-name[b-b11dakl962] {
    position: absolute;
    top: 3%;
    font-size: 14px;
    font-weight: bold;
    color: #d8d3b4;
    text-align: center;
    text-shadow: 0 0 0.2em black;
    width: 60%;
    left: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-description[b-b11dakl962] {
    font-size: 16px;
    color: #000000;
    text-align: center;
    padding: 7px;
    padding-top: 10px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-shadow: 0 0 0.15em #353535;
    line-height: 15px;
}

.circle-value[b-b11dakl962] {
    position: absolute;
    font-size: 1.8vw;
    font-weight: bold;
    color: #fff6b5;
    text-shadow: -0.05vw -0.07vw 0 #000, 0.07vw -0.07vw 0 #000, -0.07vw 0.07vw 0 #000, 0.07vw 0.07vw 0 #000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    z-index: 2;
    top: -3%;
}

    .circle-value.level[b-b11dakl962] {
        font-size: 1.7vw;
        color: #000000;
        text-shadow: 0 0 0.1em #b8b8b8;
    }

.card-bottom-name[b-b11dakl962] {
    position: absolute;
    bottom: 4%;
    font-size: 16px;
    font-weight: bold;
    color: #b6b9c6;
    text-align: center;
    text-shadow: 0 0 0.2em black;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.class-icon[b-b11dakl962] {
    position: absolute;
    top: 17%;
    left: 17%;
    width: 65%;
}

.class-attack-bacground[b-b11dakl962] {
    position: absolute;
    border-radius: 50%;
    width: 73%;
    aspect-ratio: 1 / 1;
    bottom: 13%;
    left: 14%;
    background-color: red;
    background: linear-gradient(#1d5c2f, #2d8e49);
    box-shadow: inset 0 0 0.4vw rgba(0, 0, 0, 0.7), inset 0 0 1vw rgba(17, 17, 17, 0.6), inset 0 0 0.4vw rgba(51, 51, 51, 0.6), 0.15vw -0.3vw 0.3vw rgba(0, 0, 0, 0.7);
}
    .class-attack-bacground.class-mage[b-b11dakl962] {
        background: linear-gradient(#1e2a70, #2645a1);
    }

    .class-attack-bacground.class-warior[b-b11dakl962] {
        background: linear-gradient(#1d5c2f, #2d8e49);
    }

    .class-attack-bacground.class-heal[b-b11dakl962] {
        background: linear-gradient(#ffffff, #eeeeee);
    }

    .class-attack-bacground.class-defender[b-b11dakl962] {
        background: linear-gradient(#c2a200, #e8d041);
    }

    .class-attack-bacground.class-anti-mage[b-b11dakl962] {
        background: linear-gradient(#281d28, #542653);
    }
/* _content/Ombredan/Pages/SpellCard.razor.rz.scp.css */


.hand-card-spell[b-ayanwh0tin] {
    width: 10vw;
    aspect-ratio: 9 / 14;
    position: relative;
}

.background-template[b-ayanwh0tin] {
    position: relative;
    width: 100%;
    height: 100%;
    background: url(images/hand-card-spell-template.png);
    background-size: 100% 100%;
    border-radius: 0.5em;
}


.circle[b-ayanwh0tin] {
    position: absolute;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}


.level-background-template[b-ayanwh0tin] {
    width: 24%;
    aspect-ratio: 1 / 1;
    top: -2%;
    left: -4%;
    background-image: url(images/hand-card-level-template.png);
}

.art[b-ayanwh0tin] {
    position: absolute;
    top: 11%;
    left: 0;
    width: 100%;
    height: calc(60%);
    object-fit: cover;
    object-position: top center;
}

.rarity[b-ayanwh0tin] {
    width: 93%;
    left: 4%;
    height: 2%;
    z-index: 0;
    position: absolute;
    bottom: 9px;
}

    .rarity.rare[b-ayanwh0tin] {
        background-color: #0629ff;
        box-shadow: 0 0 0.5vw rgba(6, 41, 255, 0.6);
    }

    .rarity.epic[b-ayanwh0tin] {
        background-color: #8000c0;
        box-shadow: 0 0 0.5vw rgba(128, 0, 192, 0.6);
    }

    .rarity.character[b-ayanwh0tin] {
        background-color: #ff902d;
        box-shadow: 0 0 0.5vw rgba(255, 144, 45, 0.6);
    }

.card-top-name[b-ayanwh0tin] {
    position: absolute;
    top: 3%;
    font-size: 17px;
    font-weight: bold;
    color: #d8d3b4;
    text-align: center;
    text-shadow: 0 0 0.2em black;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-description[b-ayanwh0tin] {
    position: absolute;
    bottom: -8%;
    left: 0;
    font-size: 16px;
    color: #000000;
    text-align: center;
    padding: 7px;
    padding-top: 10px;
    width: 100%;
    height: 50%;
    box-sizing: border-box;
    overflow: hidden;
    text-shadow: 0 0 0.15em #353535;
    line-height: 15px;
}

.circle-value[b-ayanwh0tin] {
    position: absolute;
    font-size: 1.8vw;
    font-weight: bold;
    color: #fff6b5;
    text-shadow: -0.05vw -0.07vw 0 #000, 0.07vw -0.07vw 0 #000, -0.07vw 0.07vw 0 #000, 0.07vw 0.07vw 0 #000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    z-index: 2;
    top: -3%;
}

    .circle-value.level[b-ayanwh0tin] {
        font-size: 1.7vw;
        color: #000000;
        text-shadow: 0 0 0.1em #b8b8b8;
    }

.card-bottom-name[b-ayanwh0tin] {
    position: absolute;
    bottom: 4%;
    font-size: 16px;
    font-weight: bold;
    color: #d8d3b4;
    text-align: center;
    text-shadow: 0 0 0.2em black;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}