/* Solo dentro del portal (?portal=1): el tablero se adapta al alto y ancho disponibles (4×6 cartas). */
html.portal-embed, html.portal-embed body { height: 100%; }
html.portal-embed body { display: flex; flex-direction: column; overflow: hidden; }
html.portal-embed .header { flex: 0 0 auto; margin: 0; padding: 6px 10px; }
html.portal-embed .header h1 { font-size: 18px; line-height: 1.2; }
html.portal-embed .header p { display: none; }
html.portal-embed .stats { flex: 0 0 auto; margin: 6px auto; font-size: 15px; }
html.portal-embed #game { flex: 1 1 0; min-height: 0; container-type: size; display: flex; align-items: center; justify-content: center; }
html.portal-embed .grid {
  --gap: 8px;
  --pad: 8px;
  /* lado de carta: lo que permita el ancho (4 columnas) o el alto (6 filas) */
  --cs: max(40px, min(calc((100cqw - 3 * var(--gap) - 2 * var(--pad)) / 4), calc((100cqh - 5 * var(--gap) - 2 * var(--pad)) / 6)));
  max-width: none; margin: 0; padding: var(--pad); gap: var(--gap);
  grid-template-columns: repeat(4, var(--cs));
  grid-auto-rows: var(--cs);
}
html.portal-embed .card, html.portal-embed .back, html.portal-embed .front { width: var(--cs); height: var(--cs); }
html.portal-embed .win-message { padding: 24px; max-width: 90%; max-height: 90%; overflow: auto; }
html.portal-embed .win-message h2 { font-size: 28px; margin-bottom: 12px; }

/* Espacio apaisado (notebooks, celular horizontal): 6 columnas × 4 filas aprovechan mejor el ancho */
@container (min-aspect-ratio: 6/5) {
  html.portal-embed .grid {
    --cs: max(40px, min(calc((100cqw - 5 * var(--gap) - 2 * var(--pad)) / 6), calc((100cqh - 3 * var(--gap) - 2 * var(--pad)) / 4)));
    grid-template-columns: repeat(6, var(--cs));
  }
}
/* Altura muy escasa: se oculta el título interno (el nombre del juego ya está en la barra del portal) */
@media (max-height: 480px) {
  html.portal-embed .header { display: none; }
  html.portal-embed .stats { margin: 4px auto; }
}