.doom-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  overflow: hidden;
  perspective: 1000px;
  visibility: hidden;
}

.doom-overlay.active {
  pointer-events: all;
  visibility: visible;
}

.doom-hell-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 120%, #ff4400 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, #ff0044 0%, transparent 40%),
    radial-gradient(ellipse at 80% 90%, #ff2200 0%, transparent 45%),
    linear-gradient(180deg, #000 0%, #1a0000 30%, #330000 60%, #000 100%);
  opacity: 0;
  transform: scale(1.2);
}

.doom-overlay.active .doom-hell-bg {
  animation: hellBgIn 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes hellBgIn {
  0% { opacity: 0; transform: scale(1.5) rotateX(10deg); }
  30% { opacity: 1; }
  100% { opacity: 1; transform: scale(1) rotateX(0deg); }
}

.doom-fire {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background:
    linear-gradient(180deg, transparent 0%, rgba(255, 68, 0, 0.3) 30%, rgba(255, 34, 0, 0.6) 60%, #ff4400 100%);
  opacity: 0;
  filter: blur(20px);
}

.doom-overlay.active .doom-fire {
  animation: fireRise 1.5s 0.2s ease-out forwards, firePulse 0.15s 0.5s ease-in-out infinite;
}

@keyframes fireRise {
  0% { opacity: 0; height: 0%; filter: blur(40px); }
  100% { opacity: 1; height: 40%; filter: blur(20px); }
}

@keyframes firePulse {
  0%, 100% { filter: blur(20px) brightness(1); }
  50% { filter: blur(25px) brightness(1.3); }
}

.doom-melt {
  position: absolute;
  inset: 0;
  display: flex;
}

.doom-bar {
  flex: 1;
  background: linear-gradient(180deg,
    #ff4400 0%,
    #cc0000 10%,
    #880000 25%,
    #440000 40%,
    #220000 60%,
    #110000 80%,
    #000 100%
  );
  transform: translateY(-100%);
  box-shadow:
    0 0 30px rgba(255, 68, 0, 0.8),
    inset 0 0 20px rgba(255, 0, 0, 0.5);
}

.doom-overlay.active .doom-bar {
  animation: doomMelt 0.6s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

@keyframes doomMelt {
  0% { transform: translateY(-100%) scaleY(1); }
  20% { transform: translateY(-80%) scaleY(1.1); }
  100% { transform: translateY(0) scaleY(1); }
}

.doom-bar:nth-child(1) { animation-delay: 0.00s; }
.doom-bar:nth-child(2) { animation-delay: 0.12s; }
.doom-bar:nth-child(3) { animation-delay: 0.03s; }
.doom-bar:nth-child(4) { animation-delay: 0.18s; }
.doom-bar:nth-child(5) { animation-delay: 0.06s; }
.doom-bar:nth-child(6) { animation-delay: 0.22s; }
.doom-bar:nth-child(7) { animation-delay: 0.01s; }
.doom-bar:nth-child(8) { animation-delay: 0.15s; }
.doom-bar:nth-child(9) { animation-delay: 0.08s; }
.doom-bar:nth-child(10) { animation-delay: 0.19s; }
.doom-bar:nth-child(11) { animation-delay: 0.04s; }
.doom-bar:nth-child(12) { animation-delay: 0.14s; }
.doom-bar:nth-child(13) { animation-delay: 0.02s; }
.doom-bar:nth-child(14) { animation-delay: 0.20s; }
.doom-bar:nth-child(15) { animation-delay: 0.07s; }
.doom-bar:nth-child(16) { animation-delay: 0.16s; }
.doom-bar:nth-child(17) { animation-delay: 0.05s; }
.doom-bar:nth-child(18) { animation-delay: 0.21s; }
.doom-bar:nth-child(19) { animation-delay: 0.09s; }
.doom-bar:nth-child(20) { animation-delay: 0.13s; }
.doom-bar:nth-child(21) { animation-delay: 0.00s; }
.doom-bar:nth-child(22) { animation-delay: 0.17s; }
.doom-bar:nth-child(23) { animation-delay: 0.04s; }
.doom-bar:nth-child(24) { animation-delay: 0.11s; }
.doom-bar:nth-child(25) { animation-delay: 0.08s; }
.doom-bar:nth-child(26) { animation-delay: 0.23s; }
.doom-bar:nth-child(27) { animation-delay: 0.02s; }
.doom-bar:nth-child(28) { animation-delay: 0.19s; }
.doom-bar:nth-child(29) { animation-delay: 0.06s; }
.doom-bar:nth-child(30) { animation-delay: 0.10s; }

.doom-blood {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
}

.doom-drip {
  width: 8px;
  background: linear-gradient(180deg, #8B0000 0%, #cc0000 50%, #ff0000 100%);
  height: 0;
  border-radius: 0 0 50% 50%;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
  transform-origin: top;
}

.doom-overlay.active .doom-drip {
  animation: bloodDrip 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes bloodDrip {
  0% { height: 0; }
  100% { height: 120%; }
}

.doom-drip:nth-child(1) { animation-delay: 0.3s; animation-duration: 1.8s; }
.doom-drip:nth-child(2) { animation-delay: 0.5s; animation-duration: 2.2s; }
.doom-drip:nth-child(3) { animation-delay: 0.2s; animation-duration: 1.6s; }
.doom-drip:nth-child(4) { animation-delay: 0.7s; animation-duration: 2.0s; }
.doom-drip:nth-child(5) { animation-delay: 0.4s; animation-duration: 1.9s; }
.doom-drip:nth-child(6) { animation-delay: 0.6s; animation-duration: 2.3s; }
.doom-drip:nth-child(7) { animation-delay: 0.35s; animation-duration: 1.7s; }
.doom-drip:nth-child(8) { animation-delay: 0.55s; animation-duration: 2.1s; }

.doom-chromatic {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.doom-chromatic::before,
.doom-chromatic::after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
}

.doom-chromatic::before {
  background: linear-gradient(90deg, rgba(255, 0, 0, 0.3) 0%, transparent 50%, rgba(0, 255, 255, 0.3) 100%);
  mix-blend-mode: screen;
}

.doom-chromatic::after {
  background: linear-gradient(90deg, rgba(0, 255, 255, 0.2) 0%, transparent 50%, rgba(255, 0, 0, 0.2) 100%);
  mix-blend-mode: multiply;
}

.doom-overlay.active .doom-chromatic {
  animation: chromaticPulse 0.1s ease-in-out infinite, chromaticFade 1s forwards;
}

@keyframes chromaticPulse {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

@keyframes chromaticFade {
  0% { opacity: 1; }
  50% { opacity: 0.8; }
  100% { opacity: 0.3; }
}

.doom-tear {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  opacity: 0;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

.doom-overlay.active .doom-tear {
  animation: screenTear 0.05s steps(1) infinite;
}

@keyframes screenTear {
  0% { opacity: 0; top: 20%; transform: translateX(-10px); }
  10% { opacity: 1; top: 45%; transform: translateX(5px); }
  20% { opacity: 0; top: 70%; transform: translateX(-8px); }
  30% { opacity: 1; top: 30%; transform: translateX(12px); }
  40% { opacity: 0; top: 80%; transform: translateX(-5px); }
  50% { opacity: 1; top: 15%; transform: translateX(8px); }
  60% { opacity: 0; top: 55%; transform: translateX(-15px); }
  70% { opacity: 1; top: 90%; transform: translateX(3px); }
  80% { opacity: 0; top: 40%; transform: translateX(-7px); }
  90% { opacity: 1; top: 65%; transform: translateX(10px); }
  100% { opacity: 0; top: 25%; transform: translateX(-12px); }
}

.doom-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.4) 2px,
    rgba(0, 0, 0, 0.4) 4px
  );
  opacity: 0;
  pointer-events: none;
}

.doom-overlay.active .doom-scanlines {
  animation: scanlinesFade 0.5s 0.3s forwards, scanlineFlicker 0.03s 0.3s steps(1) infinite;
}

@keyframes scanlinesFade {
  to { opacity: 1; }
}

@keyframes scanlineFlicker {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; }
}

.doom-glitch {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #ff0000 0%, #880000 50%, #ff0000 100%);
  opacity: 0;
  mix-blend-mode: overlay;
}

.doom-overlay.active .doom-glitch {
  animation: doomGlitch 1.5s ease-out forwards;
}

@keyframes doomGlitch {
  0% { opacity: 0; transform: none; }
  2% { opacity: 1; transform: translateX(-20px) skewX(-5deg); }
  4% { opacity: 0; transform: translateX(15px) skewX(3deg); }
  6% { opacity: 0.8; transform: translateX(-10px) skewX(-2deg); }
  8% { opacity: 0; transform: none; }
  20% { opacity: 0; }
  22% { opacity: 0.6; transform: translateX(8px) skewX(4deg); clip-path: inset(20% 0 60% 0); }
  24% { opacity: 0; transform: none; clip-path: none; }
  40% { opacity: 0; }
  41% { opacity: 0.4; transform: translateX(-5px); clip-path: inset(40% 0 30% 0); }
  43% { opacity: 0; transform: none; clip-path: none; }
  60% { opacity: 0; }
  61% { opacity: 0.3; transform: translateX(3px) skewX(-1deg); }
  62% { opacity: 0; transform: none; }
  100% { opacity: 0; }
}

.doom-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, #ffffff 0%, #ff4400 30%, #ff0000 60%, transparent 80%);
  opacity: 0;
}

.doom-overlay.active .doom-flash {
  animation: doomFlash 0.2s ease-out, doomFlash2 0.15s 0.4s ease-out;
}

@keyframes doomFlash {
  0% { opacity: 1; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(1.5); }
}

@keyframes doomFlash2 {
  0% { opacity: 0.6; }
  100% { opacity: 0; }
}

.doom-invert {
  position: absolute;
  inset: 0;
  background: #fff;
  mix-blend-mode: difference;
  opacity: 0;
}

.doom-overlay.active .doom-invert {
  animation: invertFlash 0.08s 0.05s steps(1) 3;
}

@keyframes invertFlash {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.doom-crt {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  background: radial-gradient(ellipse at center, transparent 0%, transparent 70%, rgba(0, 0, 0, 0.4) 100%);
  opacity: 0;
  border-radius: 50% / 10%;
}

.doom-overlay.active .doom-crt {
  animation: crtBulge 0.8s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes crtBulge {
  0% { opacity: 0; transform: scale(1.3); }
  100% { opacity: 1; transform: scale(1); }
}

.doom-noise {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0;
  mix-blend-mode: overlay;
}

.doom-overlay.active .doom-noise {
  animation: doomNoise 0.05s steps(3) infinite, noiseFadeIn 0.5s forwards;
}

@keyframes doomNoise {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-30%, -30%); }
  66% { transform: translate(30%, -15%); }
  100% { transform: translate(-15%, 30%); }
}

@keyframes noiseFadeIn {
  0% { opacity: 0; }
  100% { opacity: 0.15; }
}

.doom-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 0%, transparent 30%, rgba(0, 0, 0, 0.95) 100%);
  opacity: 0;
}

.doom-overlay.active .doom-vignette {
  animation: vignetteIn 0.8s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes vignetteIn {
  0% { opacity: 0; transform: scale(2); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes pentagramIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0) rotate(-180deg);
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
}

@keyframes pentagramDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes eyeOpen {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scaleY(0);
  }
  60% {
    transform: translate(-50%, -50%) scaleY(1.2);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scaleY(1);
  }
}

@keyframes eyeLook {
  0%, 100% { transform: translate(-50%, -50%); }
  25% { transform: translate(-70%, -40%); }
  50% { transform: translate(-30%, -60%); }
  75% { transform: translate(-60%, -50%); }
}

@keyframes textGlitch {
  0%, 100% { clip-path: inset(0 0 95% 0); transform: translateX(0); }
  10% { clip-path: inset(20% 0 60% 0); transform: translateX(-3px); }
  20% { clip-path: inset(50% 0 30% 0); transform: translateX(3px); }
  30% { clip-path: inset(10% 0 80% 0); transform: translateX(-2px); }
  40% { clip-path: inset(70% 0 10% 0); transform: translateX(2px); }
  50% { clip-path: inset(40% 0 40% 0); transform: translateX(-4px); }
  60% { clip-path: inset(80% 0 5% 0); transform: translateX(4px); }
  70% { clip-path: inset(5% 0 90% 0); transform: translateX(-1px); }
  80% { clip-path: inset(60% 0 20% 0); transform: translateX(1px); }
  90% { clip-path: inset(30% 0 50% 0); transform: translateX(-2px); }
}

@keyframes doomTextIn {
  0% {
    opacity: 0;
    transform: scale(5) rotateX(90deg);
    filter: blur(30px) drop-shadow(0 0 20px #ff0000);
  }
  50% {
    filter: blur(5px) drop-shadow(0 0 60px #ff0000);
  }
  80% {
    transform: scale(0.95) rotateX(-5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotateX(0deg);
    filter: blur(0) drop-shadow(0 0 20px #ff0000);
  }
}

@keyframes textPulse {
  0%, 100% {
    text-shadow:
      0 0 10px #ff0000,
      0 0 20px #ff0000,
      0 0 40px #ff0000,
      0 0 80px #880000,
      8px 8px 0 #000,
      -4px -4px 0 #660000;
  }
  50% {
    text-shadow:
      0 0 20px #ff0000,
      0 0 40px #ff0000,
      0 0 60px #ff0000,
      0 0 120px #ff4400,
      8px 8px 0 #000,
      -4px -4px 0 #660000;
  }
}

@keyframes subtitleIn {
  0% { opacity: 0; letter-spacing: 2em; }
  100% { opacity: 1; letter-spacing: 0.5em; }
}

@keyframes subtitleFlicker {
  0%, 90%, 100% { opacity: 1; }
  92%, 94%, 96% { opacity: 0.5; }
}

.doom-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.doom-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #ff4400;
  border-radius: 50%;
  box-shadow: 0 0 6px #ff0000;
  opacity: 0;
}

.doom-overlay.active .doom-particle {
  animation: particleFloat 3s ease-out forwards;
}

@keyframes particleFloat {
  0% {
    opacity: 0;
    transform: translateY(100vh) scale(0);
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: translateY(-20vh) scale(1);
  }
}

.doom-shake {
  animation: doomShake 0.6s ease-out;
}

@keyframes doomShake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  10% { transform: translate(-10px, 5px) rotate(-1deg); }
  20% { transform: translate(8px, -8px) rotate(1deg); }
  30% { transform: translate(-6px, 4px) rotate(-0.5deg); }
  40% { transform: translate(6px, -5px) rotate(0.5deg); }
  50% { transform: translate(-4px, 6px) rotate(-0.3deg); }
  60% { transform: translate(4px, -4px) rotate(0.3deg); }
  70% { transform: translate(-3px, 3px) rotate(-0.2deg); }
  80% { transform: translate(3px, -2px) rotate(0.2deg); }
  90% { transform: translate(-2px, 2px) rotate(-0.1deg); }
}

.doom-warp {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at center, transparent 0%, transparent 30%, #000 70%);
}

.doom-overlay.active .doom-warp {
  animation: warpIn 1s 0.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes warpIn {
  0% {
    opacity: 0;
    transform: scale(3);
    filter: blur(50px);
  }
  50% {
    opacity: 1;
    filter: blur(20px);
  }
  100% {
    opacity: 0.8;
    transform: scale(1);
    filter: blur(0);
  }
}

.doom-webgl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 100;
  pointer-events: none;
}

.doom-overlay.webgl-active .doom-webgl {
  animation: webglFadeIn 1s ease-out forwards;
}

@keyframes webglFadeIn {
  0% {
    opacity: 0;
    filter: blur(20px) brightness(2);
  }
  100% {
    opacity: 1;
    filter: blur(0) brightness(1);
  }
}

@keyframes textFadeOut {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

@keyframes pentagramFadeOut {
  0% { opacity: 0.6; }
  100% { opacity: 0; }
}

@keyframes eyeFadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.doom-overlay.webgl-active .doom-melt,
.doom-overlay.webgl-active .doom-blood,
.doom-overlay.webgl-active .doom-particles,
.doom-overlay.webgl-active .doom-hell-bg,
.doom-overlay.webgl-active .doom-fire,
.doom-overlay.webgl-active .doom-warp,
.doom-overlay.webgl-active .doom-chromatic,
.doom-overlay.webgl-active .doom-glitch,
.doom-overlay.webgl-active .doom-crt,
.doom-overlay.webgl-active .doom-invert,
.doom-overlay.webgl-active .doom-flash,
.doom-overlay.webgl-active .doom-tear {
  animation: layerFadeOut 1s ease-out forwards;
}

.doom-overlay.webgl-active .doom-scanlines,
.doom-overlay.webgl-active .doom-noise,
.doom-overlay.webgl-active .doom-vignette {
  z-index: 102;
}

@keyframes layerFadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.doom-close-hint {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Courier New', monospace;
  font-size: 14px;
  color: #ff4400;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  opacity: 0;
  text-shadow: 0 0 10px #ff0000;
  z-index: 101;
}

.doom-overlay.webgl-active .doom-close-hint {
  animation: hintFadeIn 0.5s 1s ease-out forwards, subtitleFlicker 0.1s 1.5s steps(1) infinite;
}

@keyframes hintFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.doom-hellglow {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 150px;
  background: linear-gradient(0deg, rgba(255, 68, 0, 0.15) 0%, rgba(139, 0, 0, 0.08) 40%, transparent 100%);
  pointer-events: none;
  z-index: 99998;
  opacity: 0;
  transition: opacity 2s ease-out;
}

.doom-hellglow.active {
  opacity: 1;
  animation: hellglowPulse 4s ease-in-out infinite;
}

@keyframes hellglowPulse {
  0%, 100% {
    opacity: 1;
    filter: brightness(1);
  }
  50% {
    opacity: 0.7;
    filter: brightness(1.2);
  }
}