html, body { margin: 0; height: 100%; background: #05080a; overflow: hidden; overscroll-behavior: none; }
body { color: #eef2f8; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#view, #hud { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; }
#hud { pointer-events: none; }
#pauseBtn {
  position: fixed; top: calc(env(safe-area-inset-top) + 10px); right: calc(env(safe-area-inset-right) + 10px);
  width: 44px; height: 44px; border-radius: 22px; border: 0; background: rgba(20, 28, 40, 0.35); color: rgba(230, 238, 250, 0.7);
  display: grid; place-items: center; cursor: pointer;
}
#pauseBtn svg { fill: currentColor; }
#pause { position: fixed; inset: 0; background: rgba(4, 7, 12, 0.72); display: grid; place-items: center; padding: 16px; backdrop-filter: blur(3px); }
#pause[hidden] { display: none; }
.sheet { width: min(360px, 100%); text-align: center; }
.sheet h1 { font: italic 600 34px Georgia, "Times New Roman", serif; margin: 0 0 4px; }
#night { margin: 0 0 18px; color: #a8b4c6; font-size: 13px; }
.sheet button { display: block; width: 100%; min-height: 46px; margin: 8px 0; border: 1px solid rgba(220, 230, 245, 0.18); border-radius: 12px;
  background: rgba(40, 52, 70, 0.6); color: #eef2f8; font: 16px system-ui, sans-serif; cursor: pointer; }
.sheet button:hover { background: rgba(60, 76, 100, 0.7); }
.sheet button.quiet { background: transparent; color: #a8b4c6; }
.help { color: #9aa6b8; font-size: 12.5px; text-align: left; margin-top: 16px; }