@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;
  }

  /* Pequeño borde superior (blanco translúcido) + esquinas redondeadas SOLO cuando
     hay ad confirmado, para enmarcar el creativo dentro de la barra. El botón de
     cerrar lo hará GAM más adelante (aquí no, para no chocar con Luckia). */
  .match-ad-anchor:has([data-ad-state="filled"]) .feeberse-ad-anchor {
    border-top: 1.5px solid #ffffff70;
    border-radius: 6px;
    overflow: hidden;
  }

  /* DEMO (<img>): a todo el ancho del host, alto derivado del aspect-ratio
     980×250 (sin CLS: el <img> trae width/height intrínsecos). */
  .feeberse-ad-anchor img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* PROD (GPT, <iframe>): un iframe NO escala como una imagen — dibuja el creativo
     a su tamaño NATIVO, así que con `width:100%` se corta (980×250) o deja hueco
     (320×50). Lo encajamos con `transform: scale()` para llenar el ancho: el host
     `clientWidth / ancho_nativo` da el factor y la altura escalada de la caja, que
     el controller `match-ad-anchor` publica en --anchor-ad-scale / --anchor-ad-box-h.
     El factor reduce el 980×250 (~0.4x) y agranda el 320×50 (>1x) → ambos al 100%. */
  .feeberse-ad-anchor:has(iframe) {
    /* `block` (no flex): el iframe de 980px arranca pegado a la izquierda y el
       `scale()` con origen top-left lo reduce justo a [0, ancho_host], encajado.
       Con flex+centrado el origen del scale caería fuera y descolocaría. */
    display: block;
    overflow: hidden;
    height: var(--anchor-ad-box-h, auto);
  }

  .feeberse-ad-anchor iframe {
    display: block;
    width: var(--anchor-ad-native-w, 980px);
    height: var(--anchor-ad-native-h, 250px);
    transform-origin: top left;
    transform: scale(var(--anchor-ad-scale, 1));
  }

  .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 `<img>`/`<iframe>`. Razón: GPT puede inyectar un
     iframe vacío aunque NO haya relleno, así que `:has(iframe)` daba un falso
     positivo y dejaba la barra (con su hueco) pintada sin anuncio. La señal
     fiable es `slotRenderEnded.isEmpty` (→ data-ad-state). */

  /* ── LIFT condicional (size-agnóstico) ──
     La altura real de la barra la mide el controller `match-ad-anchor` (JS,
     ResizeObserver) y la publica en `--match-anchor-ad-h` a nivel <body>:
       - `.match-content` (match-detail.css) la suma a su padding-bottom → sube el
         contenido por encima de la barra.
       - el FAB del chat (match-chat.css) la suma a su `bottom` → sube con la barra.
     Así vale para CUALQUIER creativo (980×250 demo hoy, 320×50 prod) sin tocar el
     CSS. Sin ad la barra colapsa (regla `:has` de arriba) → offsetHeight 0 → var 0
     → todo en su sitio normal (sin hueco fantasma). */
}