@layer layout {
  .app {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--ancho-panel);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "cabecera cabecera"
      "zocalo   zocalo"
      "juego    panel";
    gap: var(--espacio-4);
    max-inline-size: var(--ancho-pagina);
    min-block-size: 100svh;
    margin-inline: auto;
    padding: var(--espacio-3);
  }

  .cabecera {
    grid-area: cabecera;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
    padding-block-start: var(--espacio-3);
  }

  /* El tablero mide sus celdas con cqi respecto a este contenedor */
  .juego {
    grid-area: juego;
    container: juego / inline-size;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espacio-3);
  }

  .panel {
    grid-area: panel;
    container: panel / inline-size;
    align-self: start;
  }

  /* Banda de azulejo bajo la cabecera, de lado a lado de la página */
  .zocalo {
    grid-area: zocalo;
    display: block;
    inline-size: 100%;
    block-size: clamp(6rem, 11vw, 10rem);
    object-fit: cover;
    object-position: 50% 60%;
  }

  /* Con menos ancho, el panel dejaría al juego sin sitio para el marcador */
  @media (width < 48rem) {
    .app {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto auto auto 1fr;
      grid-template-areas:
        "cabecera"
        "zocalo"
        "juego"
        "panel";
    }

    .panel {
      justify-self: center;
      inline-size: min(100%, var(--medida-caja));
    }

    /* A sangre y más baja, para que el tablero siga en la primera pantalla */
    .zocalo {
      inline-size: calc(100% + 2 * var(--espacio-3));
      block-size: 4.5rem;
      margin-inline: calc(-1 * var(--espacio-3));
    }
  }
}