/* ========== ADS ========== */

/* Banner top móvil (320×100) — encima del h1, oculto en escritorio */
.ad-mobile-top-wrap {
    display: none;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    margin-top: 35px;
    text-align: center;
    box-sizing: border-box;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.ad-mobile-top-wrap ins {
    display: inline-block !important;
    max-width: 100% !important;
    margin: 0 auto;
}

@media (max-width: 1039px) {
    .ad-mobile-top-wrap {
        display: block;
        height: 100px;
        max-height: 100px !important;
        overflow: hidden !important;
    }
}

@media (max-width: 600px) {
    .subtitle-container {
        padding-top: 10px;
    }
}

/* Banner entre cards (320×100) — oculto en escritorio */
.ad-mobile-cards-wrap {
    display: none;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    margin-top: 0;
    margin-bottom: 0;
    text-align: center;
    box-sizing: border-box;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.ad-mobile-cards-wrap ins {
    display: inline-block !important;
    max-width: 100% !important;
    margin: 0 auto;
}

@media (max-width: 1039px) {
    .ad-mobile-cards-wrap {
        display: block;
        height: 100px;
        max-height: 100px !important;
        overflow: hidden !important;
    }
}

/* Reducir el gutter vertical del row en la columna del anuncio */
.ad-card-break {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0rem;
    margin-bottom: 0rem;
}

@media (max-width: 767px) {
    .ad-card-break {
        margin-bottom: 35px;
    }
}

/* En escritorio el anuncio está oculto; eliminar la columna entera evita
   el hueco fantasma que añade el gy-md-5 del row */
@media (min-width: 1040px) {
    .ad-card-break {
        display: none;
    }
}

/* Banner inferior — todas las páginas, móvil y escritorio */
.ad-banner-inferior {
    display: block;
    width: 100%;
    max-width: 970px;
    margin: 1.5rem auto 1.5rem;
    padding: 0 1rem;
    min-height: 120px;
    text-align: center;
    box-sizing: border-box;
    align-self: center;
}

.ad-banner-inferior ins {
    display: block !important;
    margin: 0 auto;
}

/* Laterales — siempre tienen posicionamiento fijo, solo visibles en escritorio ancho */
.ad-lateral {
    display: none;
    position: fixed;
    /*
     * top debe quedar siempre POR DEBAJO del nav-bar.
     * Header = max(240px, 20vh) banner + 60px margin-bottom
     * Nav-bar sale 22px bajo el header, botón ~28px alto → ~50px extra
     * Total seguro: max(350px, 20vh + 110px)
     *
     * Sin height ni overflow: AdSense renderiza el formato completo (160×600).
     * Lo que supere el viewport queda oculto por el navegador, no recortado por CSS,
     * manteniendo el viewability score alto y desbloqueando CPM máximo.
     */
    top: calc(max(350px, calc(20vh + 110px)) + var(--lang-banner-h, 0px));
    width: 160px;
    z-index: 50;
}

.ad-lateral-izq {
    left: 5px;
}

.ad-lateral-der {
    right: 5px;
}

@media (min-width: 1440px) {

    /* El body cede espacio lateral para los ads */
    body:has(.ad-lateral) {
        padding-left: 175px;
        padding-right: 175px;
    }

    /* Header y footer rompen el padding para seguir siendo full-width */
    body:has(.ad-lateral) header,
    body:has(.ad-lateral) .wn-footer {
        margin-left: -175px;
        margin-right: -175px;
        width: calc(100% + 350px);
        box-sizing: border-box;
    }

    /* El footer recupera el espacio para que su contenido no quede bajo los ads */
    body:has(.ad-lateral) .wn-footer {
        padding-left: 195px;
        padding-right: 195px;
    }

    /* Los ads quitan 350px al ancho disponible; reducimos el padding del game-container */
    body:has(.ad-lateral) .game-container {
        padding: 15px;
    }

    body:has(.ad-lateral) .game-links {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        max-width: none;
    }

    /* Con 350px menos de ancho, minmax(380px) solo cabe 2 columnas. Bajamos a 320px
       para que 3×320 + 2×30px gap = 1020px quepan en los ~1090px disponibles. */
    body:has(.ad-lateral) .game-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }

    .ad-lateral {
        display: block;
    }
}

/* En pantallas 1440-1919px (monitores medianos) reducimos top para pegarlo más al nav */
@media (min-width: 1440px) and (max-width: 1919px) {
    .ad-lateral {
        top: calc(max(275px, calc(20vh + 85px)) + var(--lang-banner-h, 0px));
    }
}

/* En pantallas ≥1920px hay margen para anuncios de 300px (mayor CPM) */
@media (min-width: 1920px) {
    .ad-lateral {
        top: calc(max(290px, calc(20vh + 85px)) + var(--lang-banner-h, 0px));
        width: 300px;
    }

    body:has(.ad-lateral) {
        padding-left: 315px;
        padding-right: 315px;
    }

    body:has(.ad-lateral) header,
    body:has(.ad-lateral) .wn-footer {
        margin-left: -315px;
        margin-right: -315px;
        width: calc(100% + 630px);
    }

    body:has(.ad-lateral) .wn-footer {
        padding-left: 335px;
        padding-right: 335px;
    }
}

/* =========================================
   ANUNCIOS LATERALES MEDIANOS (1040–1439px)
   ========================================= */
.ad-side-game {
    display: none;
    position: fixed;
    top: max(275px, calc(20vh + 85px));
    width: 160px;
    z-index: 50;
}

.ad-side-game-izq {
    left: 5px;
}

.ad-side-game-der {
    right: 5px;
}

@media (min-width: 1040px) and (max-width: 1439px) {
    .ad-side-game {
        display: block;
    }

    .info-game {
        max-width: 950px;
        margin-left: auto;
        margin-right: auto;
    }
}