@layer components {
/* ═══════════════════════════════════════════════════════════════════
Match ad anchor — banner fijo (sticky inferior) de la vista de partido.
Barra BAJA full-width que sirve el creativo 980×250 (leaderboard plano):
a todo el ancho del móvil queda ~95–122 px de alto. Reusa el controller de
ads (ad-demo / ad-slot, mismo que el home) pero con host propio
`.feeberse-ad-anchor` para NO heredar el min-height:100px ni el mobile-hide
del slot in-feed. Aquí: el chrome de la barra fija + el lift condicional del
match cuando hay ad. Mobile-only (inventario 980×250 mobile-first + campaña
propia directa).
═══════════════════════════════════════════════════════════════════ */
.match-ad-anchor {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 55; /* bajo el FAB del chat (60) */
display: flex;
justify-content: center;
align-items: center;
/* SIN chrome por defecto: barra invisible y de alto 0 mientras no haya un ad
confirmado. Clave para GPT: el slot interno NO está en display:none vía
CSS (lo gestiona GPT con collapseEmptyDivs), así que puede pedir/rellenar
el ad; aquí solo evitamos pintar la barra hasta que el fill llega. */
}
/* Ad confirmado → pinta la barra. La señal es `data-ad-state="filled"` en el
host (slotRenderEnded en GPT; ad-demo en demo): mismo contrato que el
in-feed. ~6px arriba/abajo + safe-area (notch); el alto real lo da el
creativo. */
.match-ad-anchor:has([data-ad-state="filled"]) {
padding: 6px var(--space-2) calc(6px + env(safe-area-inset-bottom, 0px));
background: var(--color-surface);
border-top: 1px solid var(--color-border-subtle);
}
/* Slot vacío (sin fill de GAM / no +18 / país no soportado) → barra fuera del
layout (sin hueco ni borde fantasma). El controller mide offsetHeight 0 →
`--match-anchor-ad-h` 0 → ni lift del contenido ni del FAB. */
.match-ad-anchor:has([data-ad-state="empty"]) {
display: none;
}
/* Mobile-only: el inventario es mobile-first + campaña propia directa → se
oculta solo en desktop por ancho. NO usar `.has-desktop-shell` (flag
server-side que el body pinta también en móvil) — ocultaría la barra en su
único sitio válido. */
@media (width >= 1024px) {
.match-ad-anchor {
display: none;
}
}
/* Host del creativo dentro de la barra. Full-width en móvil; capado a 480px en
tablet para que el leaderboard no se vuelva gigante (≈122px alto al cap). */
.feeberse-ad-anchor {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 480px;
margin: 0 auto;
}
/* El creativo (img demo / iframe GPT) a todo el ancho del host, alto derivado
del aspect-ratio 980×250 (sin CLS: el ![]()
trae width/height intrínsecos). */
.feeberse-ad-anchor img,
.feeberse-ad-anchor iframe {
display: block;
width: 100%;
height: auto;
}
.feeberse-ad-anchor .feeberse-ad-demo__link,
.feeberse-ad-anchor .feeberse-ad-demo__img {
display: block;
width: 100%;
line-height: 0;
}
/* NOTA: el colapso de la barra lo decide ahora `data-ad-state` (reglas de
arriba), NO la presencia de `![]()
`/`