/* Keep mobile browsers from automatically zooming into small form fields. */
@media (pointer: coarse) {
  html body input,
  html body textarea,
  html body select,
  html body [contenteditable="true"] {
    font-size: max(16px, 1rem) !important;
  }
}

#zaddyAttackOverlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 0, 140, 0.7), rgba(0, 0, 0, 0.2) 46%, rgba(0, 0, 0, 0.88) 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 8px);
  opacity: 0;
}

#zaddyAttackOverlay.zaddy-attack-live {
  display: flex;
  animation: zaddyAttackArrival 5.6s ease-in-out forwards;
}

#zaddyAttackOverlay.zaddy-attack-red {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 0, 0, 0.82), rgba(72, 0, 0, 0.36) 45%, rgba(0, 0, 0, 0.92) 100%),
    repeating-linear-gradient(0deg, rgba(255, 0, 0, 0.12) 0 2px, transparent 2px 9px);
}

#zaddyAttackOverlay.zaddy-attack-deepfried {
  background:
    radial-gradient(circle at 50% 42%, rgba(70, 0, 0, 0.78), rgba(18, 8, 0, 0.75) 42%, rgba(0, 0, 0, 0.98) 100%),
    repeating-linear-gradient(0deg, rgba(255, 80, 0, 0.08) 0 1px, rgba(0, 0, 0, 0.18) 1px 6px);
}

#zaddyAttackOverlay::before,
#zaddyAttackOverlay::after {
  content: "";
  position: absolute;
  inset: -8%;
  pointer-events: none;
}

#zaddyAttackOverlay::before {
  background:
    repeating-linear-gradient(90deg, rgba(0, 220, 255, 0.15) 0 2px, transparent 2px 17px),
    repeating-linear-gradient(0deg, transparent 0 12px, rgba(255, 0, 90, 0.12) 12px 15px);
  background-position: 0 0, 0 0;
  mix-blend-mode: screen;
  animation: zaddyAttackStatic 0.42s steps(2, end) infinite;
}

#zaddyAttackOverlay::after {
  background: radial-gradient(circle, transparent 0 42%, rgba(0, 0, 0, 0.65) 76%);
  animation: zaddyAttackVignette 5.6s ease-in-out forwards;
}

.zaddyAttackImage {
  position: relative;
  z-index: 2;
  width: min(72vw, 520px);
  max-height: 82vh;
  object-fit: contain;
  filter: saturate(2.1) contrast(1.35) hue-rotate(8deg) drop-shadow(0 0 28px rgba(0, 225, 255, 0.8));
  transform-origin: 50% 48%;
  animation: zaddyAttackImage 5.6s cubic-bezier(.19, 1, .22, 1) forwards;
}

.zaddyAttackGhost {
  position: absolute;
  z-index: 1;
  width: min(72vw, 520px);
  max-height: 82vh;
  object-fit: contain;
  opacity: 0.45;
  filter: hue-rotate(150deg) saturate(2.4) blur(1px);
  transform: translate(-18px, 12px) scale(1.04);
  animation: zaddyAttackGhost 0.55s steps(2, end) infinite;
}

.zaddyAttackText {
  position: absolute;
  z-index: 3;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%) skew(-10deg);
  color: rgba(255, 255, 255, 0.62);
  font: 900 clamp(3rem, 13vw, 9rem) Impact, "Arial Black", sans-serif;
  letter-spacing: -0.08em;
  text-transform: uppercase;
  text-shadow:
    5px 0 rgba(0, 225, 255, 0.85),
    -5px 0 rgba(255, 0, 130, 0.85),
    0 0 22px rgba(255, 255, 255, 0.85);
  animation: zaddyAttackText 5.6s steps(4, end) forwards;
}

.zaddyAttackWarning {
  position: absolute;
  z-index: 3;
  bottom: 9vh;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.35em 0.7em;
  color: #001014;
  background: rgba(0, 238, 255, 0.74);
  border: 2px solid rgba(255, 255, 255, 0.72);
  font: 900 clamp(1rem, 3vw, 1.6rem) "Courier New", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 0 24px rgba(255, 0, 130, 0.72);
  animation: zaddyAttackWarning 5.6s steps(3, end) forwards;
}

.zaddy-attack-red .zaddyAttackImage {
  filter: saturate(2.9) contrast(1.55) hue-rotate(132deg) drop-shadow(0 0 34px rgba(255, 0, 0, 0.95));
}

.zaddy-attack-red .zaddyAttackGhost {
  opacity: 0.58;
  filter: hue-rotate(122deg) saturate(3.3) contrast(1.45) blur(1.4px);
}

.zaddy-attack-red .zaddyAttackText {
  color: rgba(255, 230, 230, 0.7);
  text-shadow:
    7px 0 rgba(255, 0, 0, 0.95),
    -7px 0 rgba(80, 0, 0, 0.95),
    0 0 28px rgba(255, 0, 0, 0.9);
}

.zaddy-attack-red .zaddyAttackWarning {
  color: #fff2f2;
  background: rgba(120, 0, 0, 0.86);
  box-shadow: 0 0 30px rgba(255, 0, 0, 0.82);
}

.zaddy-attack-deepfried .zaddyAttackImage {
  opacity: 0.92;
  filter: saturate(5.2) contrast(2.65) brightness(0.48) sepia(0.85) hue-rotate(-30deg) drop-shadow(0 0 40px rgba(0, 0, 0, 1));
}

.zaddy-attack-deepfried .zaddyAttackGhost {
  opacity: 0.72;
  filter: saturate(5) contrast(3) brightness(0.32) sepia(1) blur(2.4px);
  mix-blend-mode: multiply;
}

.zaddy-attack-deepfried .zaddyAttackText {
  color: rgba(34, 0, 0, 0.86);
  text-shadow:
    8px 0 rgba(255, 80, 0, 0.75),
    -8px 0 rgba(0, 0, 0, 1),
    0 0 36px rgba(0, 0, 0, 1);
}

.zaddy-attack-deepfried .zaddyAttackWarning {
  color: #180000;
  background: rgba(255, 80, 0, 0.72);
  border-color: rgba(40, 0, 0, 0.95);
  box-shadow: 0 0 44px rgba(0, 0, 0, 1);
}

@keyframes zaddyAttackArrival {
  0% { opacity: 0; transform: scale(1.18) rotate(0deg); }
  9% { opacity: 1; transform: scale(1.02) rotate(-0.5deg); }
  16% { transform: scale(1.04) rotate(0.5deg); }
  52% { opacity: 1; transform: scale(1) rotate(-0.2deg); }
  78% { opacity: 0.96; transform: scale(1.08) rotate(0.4deg); }
  100% { opacity: 0; transform: scale(0.88) rotate(-1deg); }
}

@keyframes zaddyAttackImage {
  0% { transform: translateY(30vh) scale(0.35) rotate(10deg); opacity: 0; }
  12% { transform: translateY(0) scale(1.08) rotate(-5deg); opacity: 1; }
  22% { transform: translate(-18px, 8px) scale(1.15) rotate(3deg); }
  34% { transform: translate(13px, -10px) scale(1.07) rotate(-2deg); }
  50% { transform: translate(-7px, 3px) scale(1.16) rotate(1deg); }
  70% { transform: translate(9px, -6px) scale(1.08) rotate(-4deg); }
  100% { transform: translateY(-22vh) scale(0.42) rotate(-14deg); opacity: 0; }
}

@keyframes zaddyAttackGhost {
  0%, 100% { transform: translate(-18px, 12px) scale(1.04); }
  50% { transform: translate(22px, -14px) scale(1.09); }
}

@keyframes zaddyAttackStatic {
  0%, 100% { transform: translate(0, 0); background-position: 0 0, 0 0; opacity: 0.8; }
  50% { transform: translate(-18px, 10px); background-position: 8px 0, 0 -12px; opacity: 0.48; }
}

@keyframes zaddyAttackText {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8) skew(-10deg); }
  14% { opacity: 0.88; transform: translate(-50%, -50%) scale(1.03) skew(-10deg); }
  70% { opacity: 0.66; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.25) skew(-18deg); }
}

@keyframes zaddyAttackWarning {
  0%, 12% { opacity: 0; }
  18%, 80% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes zaddyAttackVignette {
  0% { opacity: 0; }
  15%, 82% { opacity: 1; }
  100% { opacity: 0; }
}

@media (max-width: 700px) {
  .zaddyAttackImage,
  .zaddyAttackGhost {
    width: 88vw;
  }

  .zaddyAttackWarning {
    width: 82vw;
    text-align: center;
  }
}