.game-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.stage-wrap,
.screenshot-tools {
  width: min(100vw - 28px, calc((100vh - 104px) * 1.6));
  width: min(100vw - 28px, calc((100dvh - 104px) * 1.6));
  flex-shrink: 0;
}

.screenshot-tools {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 48px;
}

#screenshotButton {
  min-height: 44px;
  border-color: rgba(241, 209, 138, .58);
  color: #fff0bd;
  white-space: nowrap;
}

#screenshotButton:focus-visible {
  outline: 3px solid #ffdc76;
  outline-offset: 3px;
}

#screenshotStatus {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.game-shell:fullscreen {
  width: 100vw;
  height: 100dvh;
  background: #07151e;
}

@media (max-width: 760px), (max-height: 600px) {
  .game-shell .stage-wrap,
  .screenshot-tools {
    width: min(100vw - 16px, calc((100vh - 100px) * 1.6));
    width: min(100vw - 16px, calc((100dvh - 100px) * 1.6));
  }

  .game-shell .stage-wrap.is-title {
    width: calc(100vw - 16px);
    height: calc(100vh - 100px);
    height: calc(100dvh - 100px);
  }

  .game-shell:has(.stage-wrap.is-title) .screenshot-tools {
    width: calc(100vw - 16px);
  }

  .screenshot-tools { gap: 8px; }
  #screenshotButton { padding: 9px 12px; font-size: 12px; }
  #screenshotStatus { font-size: 11px; }
}