body.bodycam-playing #game {
  filter: saturate(.42) sepia(.16) contrast(.9) brightness(1.07);
}

body.bodycam-playing #death {
  position: fixed;
  z-index: 73;
  inset: auto 0 max(7vh, 3rem);
  background: none;
  backdrop-filter: none;
  pointer-events: none;
  animation: none;
}

body.bodycam-playing #death h2 {
  margin: 0;
  font-size: clamp(64px, 9vw, 110px);
}

body.bodycam-playing #respawn-count { display: none; }

.bodycam-overlay {
  position: fixed;
  inset: 0;
  z-index: 72;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .28rem;
  padding: max(1.5rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right));
  pointer-events: none;
  color: #e8e4d2;
  font: 500 clamp(.7rem, 1.1vw, .88rem)/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .045em;
  text-shadow: 0 1px 3px #171713;
}

.bodycam-overlay[hidden] { display: none; }
.bodycam-heading { display: flex; align-items: center; gap: 1.2rem; }
.bodycam-heading strong { font-size: 1.05em; font-weight: 600; letter-spacing: .15em; }
.bodycam-rec { color: #ee7664; }
.bodycam-source { margin-top: auto; align-self: flex-start; opacity: .8; font-size: .8em; }
.bodycam-overlay::before,
.bodycam-overlay::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.bodycam-overlay::before {
  background: repeating-linear-gradient(0deg, #1c1b160b 0 1px, transparent 1px 4px), radial-gradient(ellipse at center, transparent 45%, #211e1929);
}
.bodycam-overlay::after {
  opacity: .075;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch' seed='19'/%3E%3C/filter%3E%3Cpath fill='%237c7565' filter='url(%23grain)' d='M0 0h160v160H0z'/%3E%3C/svg%3E");
}

@media (max-width: 600px) {
  .bodycam-overlay { padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)); }
}

@media (prefers-reduced-motion: reduce) {
  .bodycam-overlay::after { display: none; }
}
