/* =========================================
   BLOQUE GENERAL
========================================= */
.siege-winners-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    gap: 40px;
}

.siege-winner-card {
    position: relative;
    min-height: 520px;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(120, 170, 255, 0.16);
    background: linear-gradient(180deg, rgba(8,16,30,0.88) 0%, rgba(5,10,22,0.96) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 18px 45px rgba(0,0,0,0.35);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    isolation: isolate;
}

/* Fondo de imagen */
.siege-winner-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.22;
    transform: scale(1.02);
    z-index: 0;
    transition: transform .6s ease, opacity .35s ease;
}

/* Overlay oscuro para legibilidad */
.siege-winner-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 50% 18%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 18%, transparent 42%),
        linear-gradient(to bottom, rgba(8,12,22,0.25) 0%, rgba(6,10,18,0.58) 38%, rgba(3,6,12,0.90) 100%);
}

/* Fondos específicos */
.siege-winner-card.castle-siege::before {
    background-image: url('../img/background.jpg');
}

.siege-winner-card.arka-war::before {
    background-image: url('../img/arka-war-bg.jpg');
}

/* Glow base */
.siege-winner-glow {
    position: absolute;
    inset: -20%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.55;
    filter: blur(34px);
    transition: opacity .35s ease, transform .35s ease;
}

/* Glow por tipo */
.castle-siege .siege-winner-glow {
    background: radial-gradient(circle at 50% 28%, rgba(255, 196, 72, 0.18), transparent 48%);
}

.arka-war .siege-winner-glow {
    background: radial-gradient(circle at 50% 28%, rgba(147, 189, 255, 0.18), transparent 48%);
}

/* Partículas/luz sutil */
.siege-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.55;
    background:
        radial-gradient(circle at 20% 16%, rgba(255,255,255,0.08) 0 2px, transparent 3px),
        radial-gradient(circle at 78% 20%, rgba(255,255,255,0.06) 0 2px, transparent 3px),
        radial-gradient(circle at 62% 12%, rgba(255,255,255,0.05) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 35% 24%, rgba(255,255,255,0.05) 0 1.5px, transparent 2.5px);
    animation: siegeFloat 8s linear infinite;
}

@keyframes siegeFloat {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(8px); }
    100% { transform: translateY(0); }
}

/* =========================================
   CONTENIDO
========================================= */
.siege-winner-content {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 520px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 52px 36px 44px;
    text-align: center;
}

.siege-winner-icon {
    font-size: 58px;
    line-height: 1;
    margin-bottom: 22px;
    filter: drop-shadow(0 0 18px rgba(255,255,255,0.08));
}

.siege-winner-label {
    margin: 0 0 18px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #d8ad61;
}

.siege-winner-name {
    margin: 0 0 18px;
    font-size: 56px;
    line-height: 1;
    font-weight: 500;
    color: #f4f1eb;
    text-transform: uppercase;
    text-shadow: 0 4px 24px rgba(0,0,0,0.34);
}

.siege-winner-text {
    margin: 0;
    max-width: 460px;
    font-size: 17px;
    line-height: 1.7;
    color: rgba(236, 240, 248, 0.86);
}

/* =========================================
   ESTADOS: ACTIVO / VACÍO
========================================= */
.siege-winner-card.is-active {
    border-color: rgba(90, 182, 255, 0.30);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 22px 54px rgba(0,0,0,0.40),
        0 0 26px rgba(62, 133, 255, 0.10);
}

.siege-winner-card.is-active .siege-winner-name {
    color: #ffffff;
    text-shadow:
        0 0 18px rgba(255,255,255,0.10),
        0 0 32px rgba(90, 140, 255, 0.12);
}

.siege-winner-card.is-empty {
    border-color: rgba(255,255,255,0.08);
}

.siege-winner-card.is-empty .siege-winner-name {
    color: #f1ede7;
    opacity: 0.96;
}

.siege-winner-card.is-empty::before {
    opacity: 0.12;
    filter: grayscale(20%);
}

/* =========================================
   HOVER
========================================= */
.siege-winner-card:hover {
    transform: translateY(-6px);
    border-color: rgba(135, 204, 255, 0.34);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 26px 60px rgba(0,0,0,0.46),
        0 0 34px rgba(80, 150, 255, 0.14);
}

.siege-winner-card:hover::before {
    opacity: 0.28;
    transform: scale(1.05);
}

.siege-winner-card:hover .siege-winner-glow {
    opacity: 0.78;
    transform: scale(1.04);
}

.siege-winner-card:hover .siege-winner-icon {
    transform: scale(1.04);
    transition: transform .35s ease;
}

/* =========================================
   RESPONSIVE
========================================= */
@media screen and (max-width: 980px) {
    .siege-winners-grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .siege-winner-card,
    .siege-winner-content {
        min-height: 440px;
    }

    .siege-winner-name {
        font-size: 42px;
    }

    .siege-winner-text {
        font-size: 16px;
    }
}

@media screen and (max-width: 640px) {
    .siege-winner-content {
        padding: 42px 22px 32px;
    }

    .siege-winner-icon {
        font-size: 48px;
        margin-bottom: 18px;
    }

    .siege-winner-label {
        font-size: 13px;
        letter-spacing: 3px;
    }

    .siege-winner-name {
        font-size: 34px;
    }

    .siege-winner-text {
        font-size: 15px;
        line-height: 1.6;
    }
}