/* ========== 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: 35px;
    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;
    }
}

/* 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)
     * Esto cubre 900-1080px de alto (estándar) y escala bien en 2K/4K.
     *
     * 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) .main-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) .main-footer {
        padding-left: 195px;
        padding-right: 195px;
    }

    /* Los ads quitan 350px al ancho disponible; reducimos el padding del game-container
       de 30px a 15px por lado (ahorra 30px) para que las tablas anchas no hagan scroll. */
    body:has(.ad-lateral) .game-container {
        padding: 15px;
    }

    /* Con 1090px disponibles y minmax(140px) se necesitan 8×140=1120px → una carta
       se queda sola en segunda fila expandida. Reducimos a 120px para que quepan las 8. */
    body:has(.ad-lateral) .game-links {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        max-width: none;
    }

    .ad-lateral {
        display: block;
    }
}

/* En pantallas 1440-1919px (monitores medianos, ej. 14") el banner queda en su mínimo
   de 240px, dejando ~28px de hueco extra. 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 suficiente para anuncios de 300px,
   lo que desbloquea los formatos 300×250 y 300×600 (mayor CPM). */
@media (min-width: 1920px) {
    .ad-lateral {
        top: calc(max(290px, calc(20vh + 85px)) + var(--lang-banner-h, 0px));
    }

    .ad-lateral {
        width: 300px;
    }

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

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

    body:has(.ad-lateral) .main-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;
    }
}