/* ==========================================================================
   PRIME CHAMPIONS · ANUNCIOS
   --------------------------------------------------------------------------
   Dos piezas, nada más:

     · La OFERTA de recompensa: la tarjeta que propone ver un anuncio a cambio
       de algo. Se distingue del resto de la interfaz —tiene su propio borde y
       su propio fondo— porque es importante que se lea como un trato, no como
       un botón más del juego.
     · El BLOQUE de banner, con su rótulo. El rótulo no es decoración: la
       publicidad tiene que poder distinguirse del contenido del juego, y si no
       se distingue, además de engañoso, incumple las políticas de AdSense.

   No hay estilos de intersticial porque no hay intersticiales.
   ========================================================================== */

/* ==========================================================================
   1 · OFERTA DE RECOMPENSA
   ========================================================================== */

.ofertaRevivir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(12px, 2.5vw, 24px);
    flex-wrap: wrap;
    width: min(560px, 100%);
    margin: clamp(18px, 3vw, 26px) auto 0;
    padding: clamp(16px, 2.6vw, 22px);
    border-radius: var(--pc-radio, 16px);
    background:
        radial-gradient(140% 180% at 0% 0%, color-mix(in srgb, var(--pc-oro) 16%, transparent), transparent 60%),
        var(--pc-superficie-2);
    border: 1px solid color-mix(in srgb, var(--pc-oro) 40%, transparent);
    box-shadow: var(--pc-sombra-2);
    text-align: left;
}

.ofertaRevivirTexto {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 240px;
}

.ofertaRevivirTexto b {
    font-size: 1rem;
    font-weight: 800;
    color: var(--pc-texto);
}

.ofertaRevivirTexto span {
    font-size: 0.84rem;
    line-height: 1.4;
    color: var(--pc-texto-suave);
}

.ofertaRevivir > button {
    flex: 0 0 auto;
    min-height: 46px;
    padding: 12px 22px !important;
    border-radius: var(--pc-radio-sm, 10px) !important;
    font-size: 0.92rem !important;
    white-space: nowrap;
}

/* El aviso de que el anuncio no cargó. Va debajo, sin desplazar el botón. */
.ofertaRevivirAviso {
    flex: 1 1 100%;
    margin: 4px 0 0;
    font-size: 0.8rem;
    color: var(--pc-aviso);
}

@media (max-width: 520px) {
    .ofertaRevivir { flex-direction: column; align-items: stretch; text-align: center; }

    /* `flex: 1 1 240px` mide el ancho mientras la tarjeta es una fila, pero al
       pasar a columna esos 240 px se convierten en ALTURA y abren un hueco
       enorme entre el texto y el botón. En vertical el bloque ocupa lo suyo. */
    .ofertaRevivirTexto { flex: 0 0 auto; align-items: center; }

    .ofertaRevivir > button { width: 100%; }
}

/* ==========================================================================
   2 · REINTENTOS EXTRA DEL DRAFT
   --------------------------------------------------------------------------
   Va dentro de la píldora de reintentos, así que hereda su escala. El dorado
   lo separa del botón violeta de "Cambiar equipos": son cosas distintas.
   ========================================================================== */

.btnRerollsExtra {
    padding: 5px 14px !important;
    font-size: 0.78rem !important;
    font-weight: 800;
    border: 1px solid color-mix(in srgb, var(--pc-oro) 55%, transparent) !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--pc-oro) 16%, transparent) !important;
    color: var(--pc-oro) !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background var(--pc-normal), transform var(--pc-rapido) var(--pc-salida);
}

.btnRerollsExtra:hover:not(:disabled) {
    background: color-mix(in srgb, var(--pc-oro) 26%, transparent) !important;
    transform: translateY(-1px);
}

.btnRerollsExtra:disabled { opacity: 0.6; cursor: progress; }

.btnRerollsExtra--falló {
    border-color: var(--pc-peligro) !important;
    color: var(--pc-peligro) !important;
    background: color-mix(in srgb, var(--pc-peligro) 14%, transparent) !important;
}

/* ==========================================================================
   3 · BLOQUE DE BANNER
   ========================================================================== */

.bloqueAnuncio {
    display: block;
    width: 100%;
    margin: clamp(18px, 3vw, 28px) auto;
    padding: 8px;
    border-radius: var(--pc-radio, 16px);
    background: var(--pc-superficie-2);
    border: 1px solid var(--pc-borde-suave);
    /* El bloque no reserva altura fija: si AdSense no devuelve nada, se queda
       en el alto del rótulo en vez de dejar un agujero en la pantalla. */
    overflow: hidden;
}

.bloqueAnuncioRotulo {
    display: block;
    margin-bottom: 6px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    color: var(--pc-texto-tenue);
}

.bloqueAnuncio ins { display: block; }

/* ==========================================================================
   4 · ANUNCIO SIMULADO (sólo pruebas)
   --------------------------------------------------------------------------
   Lo dibuja PrimeAnuncios.prueba(true) para poder recorrer el flujo del juego
   antes de que Google apruebe H5 Games Ads. No aparece nunca por su cuenta.
   ========================================================================== */

.anuncioSimulado {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(6, 4, 12, 0.88);
    backdrop-filter: blur(6px);
}

.anuncioSimuladoCaja {
    width: min(360px, 100%);
    padding: 28px 24px;
    border-radius: var(--pc-radio-lg, 22px);
    background: var(--pc-superficie);
    border: 1px dashed var(--pc-borde-fuerte);
    text-align: center;
}

.anuncioSimuladoRotulo {
    margin: 0 0 4px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pc-texto-tenue);
}

.anuncioSimuladoNombre {
    margin: 0 0 18px;
    font-size: 0.84rem;
    color: var(--pc-texto-suave);
}

.anuncioSimuladoReloj {
    margin: 0 0 20px;
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    color: var(--pc-oro);
    font-variant-numeric: tabular-nums;
}

.anuncioSimuladoCerrar {
    padding: 9px 16px;
    border-radius: var(--pc-radio-sm, 10px);
    background: transparent;
    border: 1px solid var(--pc-borde);
    color: var(--pc-texto-tenue);
    font-size: 0.82rem;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .btnRerollsExtra:hover:not(:disabled),
    .ofertaRevivir > button:hover { transform: none; }
}

/* ==========================================================================
   RIEL LATERAL — sólo en la sala de subasta
   --------------------------------------------------------------------------
   Vive en el margen muerto, fijo, FUERA del flujo. Es la única forma de que un
   anuncio conviva con una puja en vivo: si estuviera en el flujo y cargara
   tarde, movería los botones justo cuando alguien puja sobre la hora.

   Las cuentas: `.contenidoSocial` está topada a 1180px (prime-ui.css:521), así
   que el margen por lado es (100vw - 1180px) / 2. A 1600 son 210px y a 1920,
   370px. Por debajo de 1600 no entra un 160x600 con aire, así que no se dibuja
   —y como queda en display:none, el hueco mide 0 y anuncios.js ni lo pide.

   Va a la IZQUIERDA porque abajo a la derecha está el botón de recompensa.
   ========================================================================== */
.railAnuncio { display: none; }

@media (min-width: 1600px) {
    .railAnuncio {
        display: block;
        position: fixed;
        top: 50%;
        /* Centrado dentro del margen izquierdo: (margen - 160) / 2. */
        left: max(12px, calc((100vw - 1180px) / 4 - 80px));
        width: 160px;
        transform: translateY(-50%);
        z-index: 40;
    }

    .railAnuncio .bloqueAnuncio { margin: 0; }
}