.pwa-notice { position: fixed; z-index: 110; top: max(8px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); margin: auto; max-width: 650px; padding: 10px 14px; border: 1px solid #b48c53; border-radius: 10px; background: #251b15; color: #fff3df; font: 14px/1.5 -apple-system, BlinkMacSystemFont, sans-serif; box-shadow: 0 4px 20px #0004; }
.pwa-notice[hidden] { display: none; }
.pwa-notice button:focus-visible { outline: 3px solid #fff3df; outline-offset: 3px; }
body:not(.draw-page) { padding-top: max(32px, env(safe-area-inset-top)); padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); padding-bottom: max(60px, env(safe-area-inset-bottom)); }
.scene-control { touch-action: manipulation; }
.pwa-notice button { min-height: 44px; margin-left: 12px; padding: 8px 12px; border: 1px solid #e8c483; border-radius: 6px; background: #e8c483; color: #251b15; font: inherit; cursor: pointer; }
.pwa-rotate { display: none; }
body.draw-page { --view-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)); --view-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); display: grid; place-items: center; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.draw-page .stage { width: min(var(--view-width), calc(var(--view-height) * 4 / 3)); height: min(calc(var(--view-width) * 3 / 4), var(--view-height)); margin: 0; }
.draw-page .draw-login { overflow-y: auto; padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
.draw-page .history-panel { width: min(calc(var(--view-width) * .9), calc(var(--view-height) * 1.2)); }
.draw-page .scene-control::after { content: ''; position: absolute; min-width: 44px; min-height: 44px; width: 100%; height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); }
body.page-hidden *, body.page-hidden *::before, body.page-hidden *::after { animation-play-state: paused !important; }
@media (max-width: 960px) {
  .draw-page .sound-button, .draw-page .history-button, .draw-page .draw-logout { bottom: max(2.279%, 24px); }
  .draw-page .sound-button { right: max(7.471%, 76px); }
  .draw-page .history-button { right: max(1.807%, 24px); }
  .draw-page .draw-logout { left: max(1.807%, 24px); }
}
@media (max-width: 600px) and (orientation: portrait) {
  .pwa-rotate { position: fixed; z-index: 90; bottom: max(12px, env(safe-area-inset-bottom)); left: 16px; right: 16px; display: block; padding: 12px; border-radius: 8px; background: #251b15; color: #fff3df; text-align: center; font: 14px/1.5 sans-serif; }
}