/* ═══════════════════════════════════════════════════════════════════════
   REPRODUCTOR — el marco que envuelve al iframe del juego.
   Sólo se carga en /juegos/<slug>.
   ═══════════════════════════════════════════════════════════════════════ */

@layer pages {
  .player {
    display: flex;
    flex-direction: column;
    border: var(--border);
    border-radius: var(--radius-lg);
    background: var(--void);
    overflow: hidden;
    box-shadow: var(--shadow-l);
  }

  .player__frame {
    position: relative;
    width: 100%;
    height: var(--player-h, min(calc(100svh - 12rem), 44rem));
    min-height: 22rem;
    background: var(--void);
    /* Un juego pesado no debe repintar el resto de la página. */
    contain: strict;
  }

  .player__frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }

  /* ── Pantalla de arranque ────────────────────────────────────────────
     El juego NO se carga hasta que la persona pulsa "jugar": la portada
     abre al instante y no gastamos datos de nadie sin permiso. */
  .player__splash {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: var(--space-m);
    text-align: center;
    overflow: hidden;
  }
  .player__splash-art {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
    filter: saturate(0.75) blur(6px);
    transform: scale(1.1);
  }

  /* Velo sobre la portada: sin él, el título del juego compite con el
     título dibujado dentro de la propia imagen. */
  .player__splash::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      radial-gradient(60% 55% at 50% 50%, var(--void) 20%, transparent 100%),
      linear-gradient(0deg, var(--void), transparent 65%);
  }

  .player__splash-body {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: var(--space-xs);
    max-width: 30rem;
  }
  .player__splash-body h2 {
    font-size: var(--step-4);
  }
  .player__hint {
    display: flex;
    align-items: center;
    gap: 0.45em;
    color: var(--bone-3);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.06em;
  }
  .player__hint .ico {
    color: var(--mercury);
  }

  /* ── Barra de carga ──────────────────────────────────────────────── */
  .player__loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--space-2xs);
    background: var(--void);
    color: var(--bone-3);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
  }
  .player__loading .ico {
    --ico-size: 1.8rem;
    color: var(--sodium);
    animation: spin 1s linear infinite;
  }
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .player__loading .ico {
      animation-duration: 3s;
    }
  }

  /* ── Barra de herramientas ───────────────────────────────────────── */
  .player__bar {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    padding: var(--space-3xs) var(--space-2xs);
    border-top: var(--border);
    background: var(--pitch);
  }
  .player__bar .icon-btn {
    width: 2.25rem;
    height: 2.25rem;
  }
  .player__name {
    display: flex;
    align-items: center;
    gap: 0.45em;
    min-width: 0;
    margin-inline-end: auto;
    padding-inline: var(--space-2xs);
    color: var(--bone-2);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .player__name .ico {
    color: var(--mercury);
  }
  @media (width < 34rem) {
    .player__name span {
      display: none;
    }
  }

  /* ── Pantalla completa ───────────────────────────────────────────── */
  .player:fullscreen {
    border: 0;
    border-radius: 0;
    height: 100svh;
    background: var(--void);
  }
  .player:fullscreen .player__frame {
    height: 100%;
    flex: 1;
  }

  /* ── Aviso de girar el dispositivo ───────────────────────────────── */
  .player__rotate {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
    place-content: center;
    justify-items: center;
    gap: var(--space-2xs);
    padding: var(--space-m);
    background: var(--scrim);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--bone-2);
    text-align: center;
  }
  .player__rotate .ico {
    --ico-size: 2.5rem;
    color: var(--sodium);
  }
  @media (orientation: portrait) and (width < 52rem) {
    .player[data-orientation="landscape"][data-state="playing"] .player__rotate {
      display: grid;
    }
  }

  /* En móvil el juego ocupa lo máximo posible sin tapar la barra. */
  @media (width < 52rem) {
    .player {
      border-inline: 0;
      border-radius: 0;
      margin-inline: calc(var(--space-s) * -1);
    }
    .player__frame {
      height: var(--player-h, calc(100svh - var(--header-h) - 3rem));
      min-height: 20rem;
    }
  }
}