body.filming .hud-frame,
body.filming .hud-help,
body.filming .crosshair,
body.filming .hint,
body.filming .notice,
body.filming .area-title,
body.filming .topline,
body.filming .settings-toggle,
body.filming .ed-toggle,
body.filming .pixel-hands-idle,
body.filming .pixel-hand-idle-right,
body.filming .pixel-held-rig { display: none !important; }
body.filming #world { cursor: none; }

.film-panel {
  display: none;
  position: fixed;
  z-index: 8;
  top: 18px;
  left: 18px;
  max-width: min(420px, calc(100vw - 36px));
  padding: 12px 16px;
  color: #d7c7a8;
  background: #08090dd9;
  border: 1px solid #a58a6055;
  box-shadow: 0 8px 30px #0009;
  pointer-events: none;
  font: 11px/1.65 Arial, sans-serif;
  letter-spacing: .04em;
  text-shadow: 0 1px 4px #000;
}
body.filming:not(.film-clean) .film-panel { display: grid; gap: 5px; }
.film-panel b { color: #e7d0a3; font: 16px Georgia, serif; letter-spacing: .18em; }
.film-panel .film-status { color: #e9e0ce; font-variant-numeric: tabular-nums; }
.film-panel small { color: #aaa394; font: inherit; font-size: 10px; }

.film-letterbox { display: none; position: fixed; inset: 0; z-index: 7; pointer-events: none; }
body.filming.film-bars .film-letterbox { display: block; }
.film-letterbox::before, .film-letterbox::after {
  content: ''; position: absolute; left: 0; right: 0; height: 8.5vh; background: #030305;
}
.film-letterbox::before { top: 0; }
.film-letterbox::after { bottom: 0; }