/* Monster Overture standalone page. Site palette (base.css): #08070a bg, #f67508 accent, #67e8f9 cyan. */
html, body { margin: 0; height: 100%; background: #08070a; color: #e2ddd7; overflow: hidden; overscroll-behavior: none; }
body { font: 14px system-ui, sans-serif; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; }
#stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#screen { image-rendering: pixelated; image-rendering: crisp-edges; background: #000; display: block; }
#pad { display: none; }
body.touch #stage { bottom: 0; }
body.touch #pad { display: block; position: fixed; inset: 0; pointer-events: none; }
#pad button {
  pointer-events: auto; position: absolute; width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(243,238,233,.35);
  background: rgba(24,20,28,.45); color: rgba(243,238,233,.8); font: bold 20px system-ui, sans-serif; touch-action: none; padding: 0;
}
#pad button.on { background: rgba(246,117,8,.55); border-color: #f67508; }
#pad .dpad { position: absolute; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); width: 200px; height: 140px; }
#pad .b-left { left: 0; bottom: 20px; } #pad .b-right { left: 136px; bottom: 20px; } #pad .b-down { left: 68px; bottom: 0; } #pad .b-up { left: 68px; bottom: 72px; width: 56px; height: 56px; opacity: .7; }
#pad .acts { position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); width: 160px; height: 140px; }
#pad .b-jump { right: 0; bottom: 30px; width: 76px; height: 76px; border-color: rgba(246,117,8,.8); }
#pad .b-act { right: 86px; bottom: 0; }
#pad .b-pause { top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); width: 44px; height: 44px; font-size: 14px; }