* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #26392f; color: #fff5dd; }
body { display: grid; place-items: center; font-family: system-ui, sans-serif; overscroll-behavior: none; }
main { width: min(100vw, 48dvh); min-width: min(100vw, 320px); max-width: 560px; height: 100vh; height: 100dvh; position: relative; background: #d6dfce; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; }
#error { position: absolute; inset: 20% 1rem auto; padding: 1rem; background: #26392f; line-height: 1.6; }
dialog { max-width: 90vw; max-height: 92dvh; padding: .65rem; background: #26392f; border: 1px solid #78917f; color: #fff5dd; }
dialog::backdrop { background: #101711d9; }
dialog img { display: block; max-width: 80vw; max-height: 75dvh; margin: .5rem auto; }
dialog button { margin: .2rem; }
@media (pointer: coarse) and (orientation: portrait) { main { width: 100vw; } }

@media (orientation: landscape) {
  main {
    width: 100vw;
    max-width: none;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
}