@layer components {
  /* Age gate 18+ — bloqueante: el <dialog> MISMO es el bottom-sheet.
     Patrón canónico Feeberse (cf. per-match-player-modal): anclado abajo
     (inset: auto 0 0), slide translateY(100%) → 0 con `.is-open`, y el
     ::backdrop nativo del top-layer bloquea clicks detrás + atrapa el foco.
     Sustituye al antiguo .age-gate-backdrop hermano (eliminado: estaba fuera
     del controller y nunca se mostraba). El scroll-lock lo gestiona
     dismissable.js. El <dialog> cerrado ya es display:none → sin FOUC. */
  .age-gate {
    padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
    border: 0;
    margin: 0;
    background: rgb(17 22 29 / 98%);
    border-top: 1px solid rgb(255 255 255 / 8%);
    border-radius: 22px 22px 0 0;
    color: #fff;
    font-family: var(--font-body, Manrope, sans-serif);

    /* Anclado abajo — override del centrado por defecto de <dialog>:modal */
    inset: auto 0 0;
    width: 100%;
    max-width: 100%;
    max-height: 90vh;
    overflow-y: auto;

    /* No scrollbar chrome inside the modal — scroll still works */
    scrollbar-width: none;
    -ms-overflow-style: none;
    transform: translateY(100%);
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .age-gate::-webkit-scrollbar {
    display: none;
  }

  .age-gate.is-open {
    transform: translateY(0);
  }

  /* Backdrop dim en sincronía con el slide del sheet. */
  .age-gate::backdrop {
    background: rgb(0 0 0 / 0%);
    backdrop-filter: blur(0);
    transition:
      background 280ms ease-out,
      backdrop-filter 280ms ease-out;
  }

  .age-gate.is-open::backdrop {
    background: rgb(0 0 0 / 70%);
    backdrop-filter: blur(4px);
  }

  @media (prefers-reduced-motion: reduce) {
    .age-gate,
    .age-gate::backdrop {
      transition: none;
    }
  }

  /* Sin anillo de foco por defecto: showModal() enfoca el primer botón y
     dejaba un outline visible al abrir. */
  .age-gate :focus-visible {
    outline: none;
  }

  .age-gate__inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 420px;
    margin: 0 auto;
    text-align: center;
  }

  .age-gate__badge {
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgb(255 255 255 / 4%);
    border: 1px solid rgb(255 255 255 / 12%);
    color: var(--color-accent, #00a572);
    font-weight: 700;
    font-size: 17px;
    font-family: var(--font-heading, Oswald, sans-serif);
  }

  .age-gate__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
  }

  .age-gate__actions {
    display: flex;
    gap: 12px;
  }

  .age-gate__btn {
    flex: 1;
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: 13px 18px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 160ms ease;
    font-family: inherit;
  }

  /* Sí — primario verde (acción afirmativa de elegibilidad). */
  .age-gate__btn--yes {
    background: var(--color-accent, #00a572);
    color: #000;
  }

  .age-gate__btn--yes:hover {
    background: #00c084;
  }

  /* No — gris neutro; no entierra la opción afirmativa, pero queda claramente
     secundaria (no es un dark pattern: ambas a un toque, mismo tamaño). */
  .age-gate__btn--no {
    background: rgb(255 255 255 / 10%);
    color: #fff;
  }

  .age-gate__btn--no:hover {
    background: rgb(255 255 255 / 16%);
  }

  .age-gate__note {
    margin: 0;
    font-size: 11px;
    color: rgb(255 255 255 / 50%);
  }
}