/* Overlay VERSUS — montado em document.body (scripts/compararClash.js) */

html.comparar-clash-active,
html.comparar-clash-active body {
    overflow: hidden !important;
}

.comparar-clash {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 2147483647 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    pointer-events: all !important;
    isolation: isolate;
    opacity: 1;
}

.comparar-clash.is-slam {
    animation: comparar-overlay-in 0.25s ease-out both;
}

.comparar-clash.is-ready {
    animation: comparar-overlay-out 0.45s ease-in forwards;
}

.comparar-clash-veil {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 50% 42%, rgba(224, 4, 63, 0.55) 0%, transparent 48%),
        linear-gradient(160deg, #12060a 0%, #050608 55%, #0a0610 100%);
    opacity: 0.97;
    transition: opacity 0.4s ease, background 0.4s ease;
}

.comparar-clash.is-loading .comparar-clash-veil {
    background:
        radial-gradient(circle at 50% 40%, rgba(224, 4, 63, 0.38) 0%, transparent 52%),
        linear-gradient(160deg, #0e070b 0%, #050608 60%, #08060e 100%);
}

.comparar-clash-flash {
    position: absolute;
    inset: -15%;
    z-index: 1;
    background:
        radial-gradient(circle at center,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(249, 155, 29, 0.75) 14%,
            rgba(224, 4, 63, 0.35) 32%,
            transparent 58%);
    animation: comparar-flash 1.8s ease-out forwards;
    pointer-events: none;
}

.comparar-clash-shock {
    position: absolute;
    left: 50%;
    top: 48%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border-radius: 50%;
    border: 4px solid rgba(255, 220, 120, 0.95);
    box-shadow:
        0 0 30px rgba(249, 155, 29, 0.9),
        0 0 80px rgba(224, 4, 63, 0.7);
    animation: comparar-shock 1.8s cubic-bezier(0.12, 0.85, 0.2, 1) forwards;
    pointer-events: none;
    z-index: 2;
}

.comparar-clash-impact {
    position: absolute;
    left: 50%;
    top: 48%;
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0%, rgba(249, 155, 29, 0.55) 35%, transparent 70%);
    animation: comparar-impact 1.8s ease-out forwards;
    pointer-events: none;
    z-index: 2;
}

.comparar-clash-stage {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(12px, 3vw, 28px);
    padding: clamp(20px, 4vw, 48px);
    pointer-events: none;
    transition: transform 0.45s ease;
}

.comparar-clash.is-slam .comparar-clash-stage {
    animation: comparar-stage-shake 1.8s ease-in-out forwards;
}

.comparar-clash-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-width: clamp(120px, 18vw, 180px);
}

.comparar-clash-name {
    position: relative;
    z-index: 3;
    font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
    font-size: clamp(1.85rem, 6.5vw, 4.2rem);
    font-weight: 900;
    letter-spacing: 0.03em;
    line-height: 1.05;
    color: #fff;
    text-transform: uppercase;
    text-shadow:
        0 0 12px rgba(249, 155, 29, 0.85),
        0 0 40px rgba(224, 4, 63, 0.65),
        0 8px 32px rgba(0, 0, 0, 0.9),
        3px 3px 0 rgba(0, 0, 0, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 42vw;
    transition: font-size 0.45s ease, opacity 0.35s ease, transform 0.45s ease;
}

.comparar-clash.is-loading .comparar-clash-name {
    font-size: clamp(1.15rem, 3.8vw, 2.1rem);
    opacity: 0.92;
}

.comparar-clash-left {
    text-align: right;
    justify-self: end;
}

.comparar-clash-right {
    text-align: left;
    justify-self: start;
}

.comparar-clash.is-slam .comparar-clash-left {
    animation: comparar-slide-left 1.8s cubic-bezier(0.12, 0.9, 0.2, 1) forwards;
}

.comparar-clash.is-slam .comparar-clash-right {
    animation: comparar-slide-right 1.8s cubic-bezier(0.12, 0.9, 0.2, 1) forwards;
}

.comparar-clash-badge {
    position: relative;
    z-index: 4;
    width: clamp(110px, 16vw, 158px);
    height: clamp(110px, 16vw, 158px);
    border-radius: 50%;
    background: linear-gradient(145deg, #ff3b6b, #e0043f 52%, #7a0026);
    color: #fff;
    font-weight: 900;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 0 10px rgba(224, 4, 63, 0.35),
        0 0 0 22px rgba(249, 155, 29, 0.18),
        0 22px 60px rgba(224, 4, 63, 0.85),
        inset 0 -10px 24px rgba(0, 0, 0, 0.35);
    transition: width 0.4s ease, height 0.4s ease, box-shadow 0.4s ease;
}

.comparar-clash.is-slam .comparar-clash-badge {
    animation: comparar-badge-pop 1.8s cubic-bezier(0.12, 1.4, 0.28, 1) forwards;
}

.comparar-clash.is-loading .comparar-clash-badge {
    width: clamp(88px, 12vw, 112px);
    height: clamp(88px, 12vw, 112px);
    animation: comparar-badge-breathe 1.35s ease-in-out infinite;
    box-shadow:
        0 0 0 8px rgba(224, 4, 63, 0.3),
        0 0 0 18px rgba(249, 155, 29, 0.12),
        0 16px 40px rgba(224, 4, 63, 0.65),
        inset 0 -8px 18px rgba(0, 0, 0, 0.35);
}

.comparar-clash-badge span {
    font-size: clamp(1.9rem, 4.5vw, 2.8rem);
    font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
    text-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
    transition: font-size 0.35s ease;
}

.comparar-clash.is-loading .comparar-clash-badge span {
    font-size: clamp(1.4rem, 3.5vw, 1.9rem);
}

.comparar-clash-status {
    margin: 0;
    min-height: 1.35em;
    max-width: min(70vw, 360px);
    text-align: center;
    color: rgba(255, 230, 210, 0.88);
    font-size: clamp(0.85rem, 2.2vw, 1.05rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.comparar-clash.is-loading .comparar-clash-status,
.comparar-clash.is-ready .comparar-clash-status {
    opacity: 1;
    transform: none;
}

.comparar-clash.is-loading .comparar-clash-status::after {
    content: "";
    display: inline-block;
    width: 1.1em;
    text-align: left;
    animation: comparar-ellipsis 1.2s steps(4, end) infinite;
}

@keyframes comparar-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes comparar-overlay-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes comparar-badge-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

@keyframes comparar-ellipsis {
    0% { content: ""; }
    25% { content: "."; }
    50% { content: ".."; }
    75% { content: "..."; }
}

@keyframes comparar-slide-left {
    0% { transform: translateX(-70vw) scale(0.75) rotate(-6deg); opacity: 0; }
    38% { transform: translateX(-10vw) scale(1.08) rotate(-1deg); opacity: 1; }
    50% { transform: translateX(2vw) scale(1.18) rotate(1deg); opacity: 1; }
    62% { transform: translateX(-1vw) scale(1) rotate(0); opacity: 1; }
    100% { transform: none; opacity: 1; }
}

@keyframes comparar-slide-right {
    0% { transform: translateX(70vw) scale(0.75) rotate(6deg); opacity: 0; }
    38% { transform: translateX(10vw) scale(1.08) rotate(1deg); opacity: 1; }
    50% { transform: translateX(-2vw) scale(1.18) rotate(-1deg); opacity: 1; }
    62% { transform: translateX(1vw) scale(1) rotate(0); opacity: 1; }
    100% { transform: none; opacity: 1; }
}

@keyframes comparar-badge-pop {
    0% { transform: scale(0.05) rotate(-40deg); opacity: 0; }
    36% { transform: scale(0.35) rotate(-12deg); opacity: 0.35; }
    50% { transform: scale(1.45) rotate(12deg); opacity: 1; }
    62% { transform: scale(0.9) rotate(-4deg); opacity: 1; }
    72% { transform: scale(1.08) rotate(2deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes comparar-flash {
    0%, 46% { opacity: 0; transform: scale(0.5); }
    52% { opacity: 1; transform: scale(1.1); }
    68% { opacity: 0.45; }
    100% { opacity: 0; transform: scale(1.55); }
}

@keyframes comparar-shock {
    0%, 48% { transform: scale(0.15); opacity: 0; }
    52% { transform: scale(0.55); opacity: 1; }
    100% { transform: scale(36); opacity: 0; }
}

@keyframes comparar-impact {
    0%, 48% { transform: scale(0.2); opacity: 0; }
    52% { transform: scale(1); opacity: 1; }
    70% { transform: scale(2.4); opacity: 0.35; }
    100% { transform: scale(3.2); opacity: 0; }
}

@keyframes comparar-stage-shake {
    0%, 48%, 100% { transform: translate(0, 0); }
    52% { transform: translate(-14px, 6px); }
    56% { transform: translate(16px, -8px); }
    60% { transform: translate(-12px, 5px); }
    64% { transform: translate(10px, -4px); }
    70% { transform: translate(-4px, 2px); }
    76% { transform: translate(0, 0); }
}

@media (max-width: 700px) {
    .comparar-clash-stage {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 22px;
        padding-block: 10vh;
    }

    .comparar-clash-left,
    .comparar-clash-right {
        text-align: center;
        justify-self: center;
        max-width: 92vw;
        font-size: clamp(1.5rem, 9vw, 2.4rem);
    }

    .comparar-clash.is-loading .comparar-clash-name {
        font-size: clamp(1.05rem, 6vw, 1.45rem);
    }

    .comparar-clash-center {
        order: -1;
    }
}