/* ═══════════════════════════════════════════════════════════════════════
   COMPONENTES — piezas reutilizables en todo el sitio.
   ═══════════════════════════════════════════════════════════════════════ */

@layer components {
  /* ── Botones ─────────────────────────────────────────────────────── */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    padding: 0.7em 1.35em;
    border: 1px solid var(--edge-hi);
    border-radius: var(--radius);
    background: var(--pitch);
    color: var(--bone);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--step-1);
    letter-spacing: 0.07em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    transition:
      background var(--dur-fast),
      border-color var(--dur-fast),
      color var(--dur-fast),
      transform var(--dur-fast),
      box-shadow var(--dur);
  }
  .btn:hover {
    border-color: var(--sodium);
    color: var(--sodium);
  }
  .btn:active {
    transform: translateY(1px);
  }

  .btn--primary {
    background: var(--sodium);
    border-color: var(--sodium);
    color: var(--void);
    box-shadow: var(--glow-sodium);
  }
  .btn--primary:hover {
    background: var(--sodium-hi);
    border-color: var(--sodium-hi);
    color: var(--void);
  }

  .btn--ghost {
    background: transparent;
    border-color: var(--edge);
  }

  .btn--small {
    padding: 0.55em 0.95em;
    font-size: var(--step-0);
  }
  .btn--block {
    width: 100%;
  }

  /* Botón sólo icono (cabecera, reproductor). */
  .icon-btn {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--bone-2);
    transition:
      color var(--dur-fast),
      background var(--dur-fast),
      border-color var(--dur-fast);
  }
  .icon-btn:hover {
    background: var(--pitch);
    border-color: var(--edge);
    color: var(--sodium);
  }
  .icon-btn[aria-pressed="true"] {
    color: var(--sodium);
    border-color: var(--sodium-line);
    background: var(--sodium-soft);
  }

  /* El botón del menú sólo existe cuando la navegación se pliega. */
  .icon-btn.nav-toggle {
    display: none;
  }
  @media (width < 52rem) {
    .icon-btn.nav-toggle {
      display: grid;
    }
  }

  /* ── Etiquetas, insignias y chips ────────────────────────────────── */
  .tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.28em 0.6em;
    border: 1px solid var(--edge);
    border-radius: var(--radius);
    background: color-mix(in oklab, var(--void) 55%, transparent);
    color: var(--bone-2);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .tag--hot {
    border-color: color-mix(in oklab, var(--blood) 55%, transparent);
    color: color-mix(in oklab, var(--blood) 70%, var(--bone));
  }
  .tag--new {
    border-color: var(--sodium-line);
    color: var(--sodium);
  }
  .tag--safe {
    border-color: color-mix(in oklab, var(--mercury) 45%, transparent);
    color: var(--mercury);
  }

  /* Filtros del catálogo: chips seleccionables. */
  .chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs);
  }
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.45em 0.8em;
    border: 1px solid var(--edge);
    border-radius: var(--radius);
    background: var(--pitch);
    color: var(--bone-2);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition:
      color var(--dur-fast),
      border-color var(--dur-fast),
      background var(--dur-fast);
  }
  .chip:hover {
    color: var(--bone);
    border-color: var(--edge-hi);
  }
  .chip[aria-pressed="true"] {
    background: var(--sodium-soft);
    border-color: var(--sodium-line);
    color: var(--sodium);
  }
  .chip .ico {
    --ico-size: 1.05em;
  }

  /* ── Buscador ────────────────────────────────────────────────────── */
  .searchbox {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    max-width: 22rem;
  }
  .searchbox .ico {
    position: absolute;
    left: 0.7rem;
    color: var(--bone-3);
    pointer-events: none;
  }
  .searchbox input {
    width: 100%;
    padding: 0.6rem 2.2rem 0.6rem 2.4rem;
    border: 1px solid var(--edge);
    border-radius: var(--radius);
    background: var(--void);
    color: var(--bone);
    font-family: var(--font-mono);
    font-size: var(--step-0);
    transition: border-color var(--dur-fast);
  }
  .searchbox input::placeholder {
    color: var(--bone-3);
  }
  .searchbox input:focus {
    border-color: var(--sodium-line);
    outline-offset: 1px;
  }
  .searchbox__clear {
    position: absolute;
    right: 0.35rem;
    width: 1.8rem;
    height: 1.8rem;
  }
  .searchbox--wide {
    max-width: none;
  }

  /* ── Tarjeta de juego ────────────────────────────────────────────── */
  .card {
    position: relative;
    display: flex;
    border: var(--border);
    border-radius: var(--radius-lg);
    background: var(--felt);
    overflow: hidden;
    transition:
      border-color var(--dur),
      transform var(--dur) var(--ease-out),
      box-shadow var(--dur);
  }
  .card:hover,
  .card:focus-within {
    border-color: var(--sodium-line);
    transform: translateY(-3px);
    box-shadow: var(--shadow-m);
  }

  .card__link {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  /* Un único destino de foco por tarjeta; el resto es decorativo. */
  .card__link:focus-visible {
    outline-offset: -2px;
  }

  /* 16:9 en todo el sitio: las portadas se dibujan a 640x360 y así ninguna
     tarjeta recorta el título del juego. */
  .card__art {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--void);
    overflow: hidden;
  }
  .card__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .card:hover .card__art img {
    transform: scale(1.045);
  }

  /* Placa "JUGAR" que sube al pasar el puntero. */
  .card__play {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    padding: 0.5em;
    background: color-mix(in oklab, var(--sodium) 92%, transparent);
    color: var(--void);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: var(--step-0);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    transform: translateY(101%);
    transition: transform var(--dur) var(--ease-out);
  }
  .card:hover .card__play,
  .card:focus-within .card__play {
    transform: none;
  }
  @media (hover: none) {
    .card__play {
      display: none;
    }
  }

  /* Abajo a la izquierda: arriba compiten con el título dibujado en la
     propia portada. Al pasar el puntero, la placa "JUGAR" las tapa, que es
     justo lo que queremos que se lea en ese momento. */
  .card__badges {
    position: absolute;
    bottom: var(--space-2xs);
    left: var(--space-2xs);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs);
  }
  .card__badges .tag {
    background: color-mix(in oklab, var(--void) 82%, transparent);
    backdrop-filter: blur(6px);
  }

  .card__body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: var(--space-2xs) var(--space-xs) var(--space-xs);
  }
  .card__title {
    font-size: var(--step-1);
    line-height: 1;
  }
  .card:hover .card__title {
    color: var(--sodium);
  }
  .card__meta {
    display: flex;
    align-items: center;
    gap: 0.4em;
    color: var(--bone-3);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.05em;
  }
  .card__meta .ico {
    --ico-size: 0.95em;
  }

  /* Variante ancha para el juego destacado. */
  .card--feature {
    grid-column: 1 / -1;
  }
  .card--feature .card__link {
    flex-direction: row;
    align-items: stretch;
  }
  .card--feature .card__art {
    flex: 1 1 55%;
    aspect-ratio: 16 / 9;
  }
  /* La tarjeta destacada estira la portada para igualar la altura del texto.
     "contain" evita que recorte el título del juego; el fondo es negro, así
     que las bandas no se ven. */
  .card--feature .card__art img {
    object-fit: contain;
  }
  .card--feature .card__body {
    flex: 1 1 45%;
    justify-content: center;
    gap: var(--space-2xs);
    padding: var(--space-m);
  }
  .card--feature .card__title {
    font-size: var(--step-3);
  }
  .card--feature .card__desc {
    color: var(--bone-2);
    font-size: var(--step-0);
  }
  @media (width < 52rem) {
    .card--feature .card__link {
      flex-direction: column;
    }
    .card--feature .card__body {
      padding: var(--space-s);
    }
  }

  /* ── Estados vacíos y avisos ─────────────────────────────────────── */
  .empty {
    display: grid;
    justify-items: center;
    gap: var(--space-2xs);
    padding: var(--space-xl) var(--space-s);
    border: 1px dashed var(--edge);
    border-radius: var(--radius-lg);
    color: var(--bone-3);
    text-align: center;
  }
  .empty .ico {
    --ico-size: 2.5rem;
    color: var(--edge-hi);
  }
  .empty h3 {
    color: var(--bone-2);
  }

  .notice {
    display: flex;
    align-items: start;
    gap: var(--space-2xs);
    padding: var(--space-xs) var(--space-s);
    border: var(--border);
    border-left: 3px solid var(--sodium);
    border-radius: var(--radius);
    background: var(--pitch);
    color: var(--bone-2);
    font-size: var(--step--1);
  }
  .notice .ico {
    flex: none;
    color: var(--sodium);
  }

  /* ── Franja de confianza ─────────────────────────────────────────── */
  .trust {
    display: grid;
    gap: var(--space-s);
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    padding: var(--space-m);
    border-block: var(--border);
    background: color-mix(in oklab, var(--void) 60%, transparent);
  }
  .trust__item {
    display: flex;
    align-items: start;
    gap: var(--space-2xs);
  }
  .trust__item .ico {
    --ico-size: 1.4rem;
    flex: none;
    color: var(--mercury);
  }
  .trust__item h4 {
    font-size: var(--step-0);
    letter-spacing: 0.06em;
  }
  .trust__item p {
    color: var(--bone-3);
    font-size: var(--step--1);
    line-height: 1.45;
  }

  /* ── Avisos flotantes ────────────────────────────────────────────── */
  .toasts {
    position: fixed;
    inset-block-end: var(--space-s);
    inset-inline: var(--space-s);
    z-index: var(--z-toast);
    display: grid;
    justify-items: center;
    gap: var(--space-2xs);
    pointer-events: none;
  }
  .toast {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    max-width: min(30rem, 100%);
    padding: var(--space-2xs) var(--space-s);
    border: 1px solid var(--edge-hi);
    border-radius: var(--radius);
    background: var(--pitch);
    box-shadow: var(--shadow-l);
    font-size: var(--step--1);
    animation: toast-in var(--dur) var(--ease-spring);
  }
  .toast .ico {
    color: var(--sodium);
    flex: none;
  }
  @keyframes toast-in {
    from {
      opacity: 0;
      transform: translateY(0.75rem);
    }
  }
}