main {
  max-width: none;
  position: relative;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  justify-content: center;
  align-items: center;
}
header, .hud, .stage-wrap, .message, .touch-guide {
  width: min(100%, calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--chrome-height)) * 13 / 11));
}
main { --chrome-height: 231px; }
header, .hud { flex: none; }
.hud { align-items: center; box-shadow: none; min-height: 46px; }
#pause { position: static; width: 44px; height: 40px; flex: none; }
.stage-wrap { flex: none; }
#arena { width: 100%; height: auto; max-height: none; border: 0; box-shadow: none; }
.sideart { display: none; }
#start-game { position: absolute; z-index: 20; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 12px; }
.message, .touch-guide { text-align: center; min-height: 31px; }
.touch-guide { color: #fff3d5; font-size: 12px; padding: 4px 8px; }
#result-panel.visible { top: 36%; }
#next { top: 62%; bottom: auto; }
#pause-menu button { min-height: 44px; font-size: 16px; }
@media (max-height: 520px) {
  main { --chrome-height: 120px; }
  header, .market-backdrop, .market-foreground, .message { display: none; }
  .touch-guide { min-height: 22px; }
}