html, body { background: #0b1824 !important; overscroll-behavior: none; }
#browser-tools {
  position: fixed; z-index: 10; left: 50%; transform: translateX(-50%);
  bottom: max(8px, env(safe-area-inset-bottom)); display: flex; gap: 8px;
  font: 14px system-ui, sans-serif;
}
#browser-tools button, #display-help button {
  min-height: 44px; padding: 8px 16px; border: 1px solid #47606b; border-radius: 12px;
  background: #1b303ddd; color: #e3e9df; font: inherit; cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
#browser-tools button:focus-visible, #display-help button:focus-visible { outline: 2px solid #e0c98e; outline-offset: 3px; }
#browser-tools button:disabled { opacity: .65; cursor: default; }
#display-help {
  position: fixed; inset: 0; z-index: 20; max-width: min(460px, calc(100vw - 64px));
  max-height: calc(100dvh - 64px); overflow: auto; padding: 24px; margin: auto;
  color: #e3e9df; border: 1px solid #47606b; border-radius: 18px; background: #132733;
  font: 16px/1.7 system-ui, sans-serif; touch-action: pan-y;
}
#display-help::backdrop { background: #06101bd9; }
#display-help h2 { margin: 0 0 12px; font-size: 22px; }
#display-help .display-note { font-size: 13px; color: #a6b9b8; }
#display-help button { margin: 8px 8px 0 0; }
#landscape-tip {
  position: fixed; z-index: 5; left: 16px; right: 16px; top: max(12%, env(safe-area-inset-top));
  color: #c9d7d5; text-align: center; font: 15px system-ui, sans-serif; pointer-events: none; display: none;
}
@media (orientation: portrait) and (max-width: 900px) { #landscape-tip { display: block; } }
@media (max-height: 450px) { #browser-tools { font-size: 12px; } #browser-tools button { padding: 5px 12px; } }