/* The game viewport is sized from both available width and viewport height. */
.game-section {
  overflow: clip;
}

.game-shell {
  width: min(100%, calc((100svh - 230px) * 16 / 9), 1920px);
  height: auto;
  aspect-ratio: 16 / 9;
  max-width: none;
  contain: layout paint;
}

.game-shell iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

@media (max-width: 850px) {
  .game-shell {
    aspect-ratio: 16 / 9;
  }
}

@media (orientation: landscape) and (max-width: 1024px) and (max-height: 600px) {
  .game-section {
    position: relative;
    min-height: 100svh;
    padding: 0;
    scroll-margin-top: 0;
  }

  .game-section .section-head {
    position: absolute;
    z-index: 8;
    top: max(6px, env(safe-area-inset-top));
    right: max(6px, env(safe-area-inset-right));
    left: max(6px, env(safe-area-inset-left));
    width: auto;
    margin: 0;
    pointer-events: none;
  }

  .game-section .section-head > div:first-child,
  .game-section .play-note {
    display: none;
  }

  .game-tools {
    width: auto;
    margin-inline-start: auto;
    pointer-events: auto;
    opacity: .82;
  }

  .game-tools .outline {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 6px 10px;
    border-color: #9b7747;
    background: rgba(13, 10, 7, .86);
    font-size: 12px;
    backdrop-filter: blur(6px);
  }

  .game-shell {
    width: 100%;
    height: 100svh;
    max-width: none;
    aspect-ratio: auto;
    border: 0;
    box-shadow: none;
  }
}

@media (orientation: portrait) and (max-width: 760px) {
  .game-shell {
    width: 100%;
    max-height: min(56.25vw, 320px);
  }
}