/* Find the Tab: Haunted Edition (Halloween 2026).
   A first pass layered over Nebojsa's style.css. Everything Halloween lives in this file,
   so the creative can be swapped wholesale without touching the game. */

body.haunted {
  background-color: #07050b;
  background-image:
    radial-gradient(rgba(244, 241, 236, .06) 1.1px, transparent 1.4px),
    radial-gradient(120% 90% at 50% 120%, rgba(255, 133, 17, .10), transparent 60%);
  background-size: 9px 9px, 100% 100%;
}

/* the moon, top right, behind everything */
body.haunted::before {
  content: ''; position: fixed; z-index: 0; pointer-events: none;
  top: -12vmin; right: -10vmin; width: 46vmin; height: 46vmin; border-radius: 50%;
  background: radial-gradient(circle at 42% 40%, rgba(244, 241, 236, .16), rgba(244, 241, 236, .05) 46%, transparent 70%);
  box-shadow: 0 0 160px 40px rgba(232, 10, 222, .05);
}

/* low fog drifting across the bottom of the screen */
.fog { position: fixed; inset: auto 0 0 0; height: 42vh; z-index: 1; pointer-events: none; overflow: hidden; opacity: .55; }
.fog i {
  position: absolute; bottom: -10vh; left: -50%; width: 200%; height: 60vh;
  background:
    radial-gradient(40% 50% at 20% 60%, rgba(244, 241, 236, .07), transparent 70%),
    radial-gradient(35% 45% at 55% 70%, rgba(244, 241, 236, .06), transparent 70%),
    radial-gradient(30% 40% at 85% 55%, rgba(244, 241, 236, .05), transparent 70%);
  filter: blur(18px);
  animation: drift 38s linear infinite;
}
.fog i + i { bottom: -18vh; animation-duration: 61s; animation-direction: reverse; opacity: .7; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(25%); } }

.haunted .stage { z-index: 2; }

/* the start, end and fail screens let the night through: moonlight top right, a pumpkin haze below */
.haunted .screen {
  background:
    radial-gradient(55% 45% at 88% 0%, rgba(244, 241, 236, .08), transparent 70%),
    radial-gradient(90% 55% at 50% 118%, rgba(255, 133, 17, .16), transparent 70%),
    rgba(7, 5, 11, .86);
}

/* a cobweb in the browser's corner, and a flicker now and then, like a bad bulb */
.haunted .browser::after {
  content: ''; position: absolute; top: -1px; right: -1px; width: 92px; height: 92px; pointer-events: none; opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 92' fill='none' stroke='%23f4f1ec' stroke-width='.8'%3E%3Cpath d='M92 0 30 62M92 0 58 70M92 0 80 82M92 0 14 34M92 0 4 10'/%3E%3Cpath d='M74 6q-6 10 2 16q8-6 14 2M54 10q-6 18 10 28q14-10 26 6M34 14q-4 26 22 42q22-14 36 14M18 22q0 34 34 50'/%3E%3C/svg%3E") no-repeat top right / contain;
}
.haunted .browser:not(.shake) { animation: flicker 11s steps(1, end) infinite; }
@keyframes flicker { 0%, 91%, 93%, 95%, 100% { filter: none; } 92%, 94% { filter: brightness(.55); } }

/* Halloween accents: pumpkin orange next to the brand pink */
.haunted .kicker b { color: var(--orange); }
.haunted a.btn { text-decoration: none; color: #fff; }
.haunted .tease { margin-top: 10px; font-size: 13px; color: var(--orange); opacity: .85; }
.haunted .persona-t { text-shadow: 0 0 24px rgba(232, 10, 222, .35); }

@media (prefers-reduced-motion: reduce) {
  .fog i, .haunted .browser:not(.shake) { animation: none; }
}