/* Page base styles — moved out of index.html (hardening v1) so the CSP needs no 'unsafe-inline' for style-src. */
html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: #000; overflow: hidden;
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; }
#camerafeed { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#status { position: fixed; left: 0; right: 0; top: env(safe-area-inset-top, 0); z-index: 20;
  padding: 8px 12px; color: #fff; font-size: 14px; text-align: center;
  background: rgba(0,0,0,0.45); pointer-events: none; }
#caption { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(64px + env(safe-area-inset-bottom, 0));
  z-index: 22; display: none; max-width: min(92vw, 720px); box-sizing: border-box; padding: 10px 16px;
  border-radius: 12px; background: rgba(10, 20, 35, 0.72); color: #fff; font-size: 16px; line-height: 1.35;
  text-align: center; pointer-events: none; }
.btn { position: fixed; z-index: 25; display: none; font-size: 16px; padding: 10px 22px;
  border-radius: 22px; border: 0; background: #f2b134; color: #0d2340; font-weight: 700; }
#audiobtn { bottom: calc(16px + env(safe-area-inset-bottom, 0)); left: 50%; transform: translateX(-50%); }
#replay { bottom: calc(16px + env(safe-area-inset-bottom, 0)); left: 12px; font-size: 13px; padding: 7px 14px; opacity: 0.85; }
#credit { position: fixed; right: 6px; bottom: calc(4px + env(safe-area-inset-bottom, 0)); z-index: 20;
  color: rgba(255,255,255,0.6); font-size: 10px; pointer-events: none; }
#credit a { color: inherit; pointer-events: auto; }
#debug { position: fixed; left: 8px; right: 8px; top: 40px; z-index: 26; display: none; color: #fff;
  background: rgba(0,0,0,0.6); padding: 6px 10px; border-radius: 8px; font: 12px ui-monospace, monospace; }
#debug input { width: calc(100% - 110px); vertical-align: middle; }
#dbgcues { margin-top: 4px; opacity: 0.85; white-space: normal; }