/* ═══════════════════════════════════════════════════════════
   ARCANEA — HOME HERO
   ═══════════════════════════════════════════════════════════ */

/* Wrapper crece dentro de .home-page-hero (flex column, 100vh) */
.home-hero-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1520px;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 3vw, 3.5rem);
}

/* Grid de dos columnas que ocupa todo el espacio disponible */
.home-hero-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: clamp(2rem, 4vw, 5.5rem);
    align-items: center;
    padding: clamp(1.5rem, 2.5vh, 3rem) 0 clamp(1.5rem, 2vh, 2.5rem);
    min-height: 0;
}

/* Columna izquierda: distribuye top vs bottom verticalmente */
.home-hero-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: clamp(1.0rem, 2vh, 1.8rem);
}

/* Grupo superior: badge + título + descripción */
.home-hero-top { }

/* Grupo inferior: status + cabezas + IP + features */
.home-hero-bottom {
    display: flex;
    flex-direction: column;
}

/* Columna derecha: slider ocupa todo el alto */
.home-hero-right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* ══════════════════════════════
   MINI BADGE
══════════════════════════════ */
.home-mini-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0.30rem 0.85rem 0.30rem 0.60rem;
    font-family: var(--ov-font-display);
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #e0b84f;
    background: rgba(196, 155, 56, 0.09);
    border: 1px solid rgba(196, 155, 56, 0.28);
    border-left: 3px solid #e0b84f;
    border-radius: 0 2px 2px 0;
}
.home-mini-badge i { font-size: 0.80rem; opacity: 0.78; }

/* ══════════════════════════════
   TÍTULO — Cinzel Decorative (mágico / místico)
══════════════════════════════ */
.home-title {
    margin: 0 0 1rem;
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
    font-size: clamp(1.85rem, 4.0vw, 3.75rem);
    font-weight: 900;
    line-height: 1.10;
    letter-spacing: 0.03em;
    background: linear-gradient(
        162deg,
        #b8860b  0%,
        #d4a017 10%,
        #e0b84f 22%,
        #ffe87a 42%,
        #ffd700 56%,
        #e0b84f 70%,
        #c49b38 84%,
        #b8860b 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter:
        drop-shadow(0 0 55px rgba(196, 155, 56, 0.52))
        drop-shadow(0 2px 0   rgba(40, 18, 0, 0.95))
        drop-shadow(0 5px 14px rgba(4, 2, 12, 0.72))
        drop-shadow(0 -1px 0  rgba(255, 248, 160, 0.16));
}

/* ══════════════════════════════
   DESCRIPCIÓN
══════════════════════════════ */
.home-desc {
    margin: 0;
    font-family: 'Noto Sans', sans-serif;
    font-size: 0.96rem;
    line-height: 1.78;
    font-weight: 400;
    color: rgba(210, 203, 228, 0.82);
}

/* ══════════════════════════════
   REGLA CON ESTADO CENTRADO
══════════════════════════════ */
.home-rule-wrap {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0 0 0.80rem;
}
.home-rule-line {
    flex: 1;
    height: 1px;
}
.home-rule-line--left {
    background: linear-gradient(270deg, rgba(196,155,56,0.48) 0%, transparent 100%);
}
.home-rule-line--right {
    background: linear-gradient(90deg, rgba(196,155,56,0.48) 0%, transparent 100%);
}
.home-status-center {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.26rem 0.85rem;
    background: rgba(196, 155, 56, 0.06);
    border: 1px solid rgba(196, 155, 56, 0.40);
    border-radius: 999px;
    font-family: var(--ov-font-display);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(240, 228, 170, 0.92);
}
.home-status-center--offline {
    background: rgba(248, 113, 113, 0.07);
    border-color: rgba(248, 113, 113, 0.30);
    color: #f87171;
}
.home-status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e0b84f;
    flex-shrink: 0;
    animation: pulse-gold 2.4s ease-in-out infinite;
}
.home-status-dot--offline {
    background: #f87171;
    animation: none;
}
@keyframes pulse-gold {
    0%, 100% { box-shadow: 0 0 0 0   rgba(196, 155, 56, 0.65); transform: scale(1);    }
    50%       { box-shadow: 0 0 0 5px rgba(196, 155, 56, 0);   transform: scale(1.18); }
}

/* ══════════════════════════════
   CABEZAS DE JUGADORES
══════════════════════════════ */
.home-players-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 1.0rem;
    min-height: 36px;
}
.home-players-empty {
    font-size: 0.67rem;
    opacity: 0.30;
    font-style: italic;
    letter-spacing: 0.04em;
}
.player-head-wrap {
    display: inline-flex;
    border-radius: 4px;
    transition: transform 0.15s ease;
}
.player-head-wrap:hover {
    transform: translateY(-3px) scale(1.18);
    z-index: 2;
    position: relative;
}
.player-head {
    border-radius: 3px;
    image-rendering: pixelated;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.65));
    display: block;
}
.player-head--lg { width: 32px; height: 32px; }
.player-head-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.11);
    font-size: 0.60rem;
    font-weight: 700;
    color: rgba(255,255,255,0.42);
}

/* ══════════════════════════════
   BOTONES DE ACCIÓN (2 columnas)
══════════════════════════════ */

.home-action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.50rem;
    margin: 0 0 1.1rem;
}

.home-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.58rem 0.75rem;
    font-family: var(--ov-font-display);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.home-action-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.10);
}

/* Botón dorado — Copiar IP */
.home-action-btn--gold {
    color: #171412;
    background: linear-gradient(180deg, #ffd972 0%, #e0b84f 100%);
    border-color: rgba(255, 237, 163, 0.55);
    box-shadow: inset 0 -3px 0 rgba(100, 72, 20, 0.55);
}
.home-action-btn--gold:hover {
    box-shadow: inset 0 -3px 0 rgba(100, 72, 20, 0.55), 0 4px 16px rgba(224, 184, 79, 0.28);
}
.home-action-btn--gold.copied {
    color: #031208;
    background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%);
    border-color: rgba(74, 222, 128, 0.55);
    box-shadow: inset 0 -3px 0 rgba(0, 60, 20, 0.55);
}

/* Botón Discord — colores nativos */
.home-action-btn--discord {
    color: #fff;
    background: linear-gradient(180deg, #7289da 0%, #5865f2 100%);
    border-color: rgba(114, 137, 218, 0.45);
    box-shadow: inset 0 -3px 0 rgba(20, 28, 120, 0.60);
}
.home-action-btn--discord:hover {
    box-shadow: inset 0 -3px 0 rgba(20, 28, 120, 0.60), 0 4px 16px rgba(88, 101, 242, 0.35);
}


/* ══════════════════════════════
   NEWS CARD
══════════════════════════════ */
.home-news-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1;
    width: 100%;
    min-height: clamp(260px, 36vh, 460px);
    overflow: hidden;
    text-decoration: none;
    box-shadow:
        0 0 0 1px  rgba(196,155,56,0.70),
        0 0 0 5px  rgba(6,3,14,0.88),
        0 0 0 6px  rgba(140,100,30,0.38),
        0 28px 64px rgba(4,2,12,0.72),
        0 0 52px   rgba(196,155,56,0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.home-news-card:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow:
        0 0 0 1px  rgba(224,184,79,0.90),
        0 0 0 5px  rgba(6,3,14,0.88),
        0 0 0 6px  rgba(196,155,56,0.55),
        0 36px 76px rgba(4,2,12,0.78),
        0 0 68px   rgba(224,184,79,0.14);
}
.home-news-img {
    position: absolute;
    inset: 0;
    background-image: var(--news-img, none);
    background-size: cover;
    background-position: center;
    background-color: rgba(8,4,20,0.96);
    transition: transform 0.35s ease;
}
.home-news-card:hover .home-news-img { transform: scale(1.05); }
.home-news-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(4,2,12,0.96) 0%, rgba(4,2,12,0.68) 38%, rgba(4,2,12,0.18) 68%, transparent 100%);
}
.home-news-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 3;
    background: linear-gradient(90deg, #6b4e14 0%, #c49b38 28%, #ffe87a 50%, #c49b38 72%, #6b4e14 100%);
}
.home-news-body {
    position: relative;
    z-index: 2;
    padding: 1.4rem 1.4rem 1.6rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}
.home-news-title {
    margin: 0;
    font-family: var(--ov-font-display);
    font-size: clamp(0.88rem, 1.7vw, 1.08rem);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.25;
}
.home-news-desc {
    margin: 0;
    font-family: 'Noto Sans', sans-serif;
    font-size: 0.80rem;
    color: rgba(210,204,228,0.72);
    line-height: 1.52;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.home-news-date {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    margin-top: 0.1rem;
    font-family: var(--ov-font-display);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(196,155,56,0.68);
}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width: 1199.98px) {
    .home-hero-grid { grid-template-columns: 7fr 5fr; gap: clamp(1.5rem, 3vw, 3.5rem); }
}

@media (max-width: 991.98px) {
    .home-hero-grid {
        grid-template-columns: 1fr;
        align-items: start;
        padding: 2rem 0 2.5rem;
        gap: 2rem;
    }
    .home-hero-left  { justify-content: flex-start; gap: 0; }
    .home-hero-right { height: auto; }
    .home-news-card  { min-height: 240px; max-width: 540px; margin: 0 auto; width: 100%; }
    .home-title      { font-size: clamp(1.65rem, 6.5vw, 2.6rem); }
}

@media (max-width: 767.98px) {
    .home-hero-wrap  { padding: 0 1rem; }
    .home-title      { font-size: clamp(1.3rem, 7.5vw, 1.9rem); }
    .home-desc       { font-size: 0.91rem; }
    .home-ip-bar     { flex-wrap: wrap; }
    .home-ip-addr    { width: 100%; flex: unset; order: -1; margin-bottom: 0.28rem; }
    .home-news-card  { min-height: 200px; }
}