/* El tablero usa una sola composición. Sus medidas dependen del espacio
   disponible, nunca de cambios de filas, columnas o del tamaño de los botones. */
@media (min-width: 701px) and (min-height: 501px) {
  .scene {
    width: min(1300px, calc(100vw - 24px), calc((100dvh - 24px) * 1.23));
  }
}
/* El escalado fijo pertenece solo a escritorio. En móvil se conservan
   íntegramente las reglas originales de styles.css, también en horizontal. */
@media (min-width: 701px) and (min-height: 501px), (min-width: 701px) and (pointer: fine) {
  .stage-content.show-home {
    container-type: size;
  }
  .stage-content.show-home .home-menu {
    position: absolute;
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    margin: 0;
    width: min(72cqw, 112cqh);
    height: auto;
    min-height: 0;
    aspect-ratio: 1448 / 1086;
    background-image: url('../public/assets/marco-recuadro-pc.webp');
    container-type: inline-size;
  }
  .home-menu .home-links {
    inset: 29% 8.5% 9%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, min-content);
    align-content: center;
    align-items: center;
    justify-items: center;
    column-gap: 3%;
    row-gap: 1.4cqw;
  }
  .home-menu .art-menu-button {
    width: 83%;
    max-width: none;
  }
  .home-menu .art-menu-button:nth-child(odd) { justify-self: end; }
  .home-menu .art-menu-button:nth-child(even) { justify-self: start; }
  .home-menu .art-menu-button img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
  }
}
/* Las ventanas de PC muy bajas también conservan el escenario proporcional. */
@media (min-width: 701px) and (pointer: fine) {
  .app-frame:has(.show-home) { display: grid; padding: 12px; }
  .scene:has(.show-home) {
    width: min(1300px, calc(100vw - 24px), calc((100dvh - 24px) * 1.23));
    height: auto; min-height: 0; aspect-ratio: 1.23;
  }
  .stage-content.show-home {
    position: absolute; inset: 0; height: 100%; min-height: 0; padding: 0;
  }
}
@media (min-width: 701px) and (pointer: fine) {
  .scene:has(.show-home) .scene-footer {
    position: absolute; left: 0; right: 0; top: auto; bottom: 1.6%;
    height: 14%; margin: 0; padding: 0;
  }
  .scene:has(.show-home) .footer-social {
    display: flex; width: 100%; height: 100%; gap: 4%;
  }
  .scene:has(.show-home) .social-preview { width: 19%; height: 100%; }
}