/* Vintage Horror VHS & PSX Filters */
.vignette-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at center, transparent 35%, rgba(0, 0, 0, 0.75) 80%, rgba(0, 0, 0, 0.95) 100%);
}

.noise-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.12;
  background-image: repeating-radial-gradient(#fff 0 0.0001%, #000 0 0.0002%);
  background-size: 150px 150px;
  animation: noiseJitter 0.2s steps(4) infinite;
}

@keyframes noiseJitter {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-1%, 1%); }
  50% { transform: translate(1%, -1%); }
  75% { transform: translate(-1%, -1%); }
  100% { transform: translate(0, 0); }
}

.sanity-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(circle at center, rgba(185, 28, 28, 0) 30%, rgba(185, 28, 28, 0.45) 85%, rgba(127, 29, 29, 0.8) 100%);
  mix-blend-mode: multiply;
}

.sanity-overlay.danger {
  opacity: 0.85;
  animation: pulseDanger 1.2s ease-in-out infinite;
}

@keyframes pulseDanger {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.85; }
}

/* Glitch Title text */
.glitch-text {
  position: relative;
  text-shadow: 2px 2px 0px rgba(220, 38, 38, 0.7), -2px -2px 0px rgba(59, 130, 246, 0.6);
}

/* Jumpscare Monster Face stylized silhouette */
.monster-face-canvas {
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at 50% 50%, #150000 0%, #000 75%);
  position: relative;
  overflow: hidden;
}

.monster-face-canvas::before,
.monster-face-canvas::after {
  content: '';
  position: absolute;
  top: 40%;
  width: 24px;
  height: 12px;
  background: #fff;
  box-shadow: 0 0 35px 15px #f00, 0 0 70px 30px #f00;
  border-radius: 50%;
  animation: eyeJitter 0.08s infinite alternate;
}

.monster-face-canvas::before {
  left: 42%;
}

.monster-face-canvas::after {
  right: 42%;
}

@keyframes eyeJitter {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.4) translate(-4px, 3px); }
}

/* Difficulty Selector Buttons */
.diff-btn {
  user-select: none;
  cursor: pointer;
}

.diff-btn.active {
  border-color: rgba(16, 185, 129, 0.9) !important;
  background-color: rgba(6, 78, 59, 0.65) !important;
  color: #6ee7b7 !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.25);
}

.diff-btn:active {
  transform: scale(0.97);
}

/* Utility to completely remove inactive overlays from hit-testing */
.screen-modal.hidden {
  display: none !important;
}

#hud.hidden {
  display: none !important;
}