/* Background layers adapted from the supplied Hollow Event page. */
html,
body {
  background: #06081a !important;
  background-image: none !important;
}

.hollow-atmosphere {
  --abyss: #06081a;
  --eye: #ff3324;
  --eye-glow: rgba(255, 51, 36, .72);
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hollow-atmosphere .sky,
.hollow-atmosphere .fog,
.hollow-atmosphere .woods,
.hollow-atmosphere .vignette,
.hollow-atmosphere .grain {
  position: absolute;
  pointer-events: none;
}

.hollow-atmosphere .sky {
  inset: 0;
  transition: opacity 1.2s ease;
}

.hollow-atmosphere .sky--red {
  z-index: 0;
  background: radial-gradient(ellipse 85% 62% at 50% 64%, #e0190f 0%, #a10d0c 26%, #4a0911 52%, #12071a 78%, var(--abyss) 100%);
  animation: hollow-flicker 9s steps(1) infinite;
  opacity: 0;
}

/* The cool forest state shown in the supplied Hollow screenshot. */
.hollow-atmosphere .sky--cold {
  z-index: 0;
  background: radial-gradient(ellipse 75% 58% at 50% 66%, #233a8f 0%, #101b4e 34%, #070b24 64%, #030410 100%);
  opacity: 1;
}

.hollow-atmosphere .fog {
  left: -50%;
  right: -50%;
  bottom: 8vh;
  height: 60vh;
  z-index: 1;
  background:
    radial-gradient(ellipse 30% 40% at 30% 60%, rgba(255, 214, 200, .10), transparent 70%),
    radial-gradient(ellipse 26% 34% at 72% 55%, rgba(255, 214, 200, .08), transparent 70%);
  animation: hollow-drift 48s ease-in-out infinite alternate;
}

.hollow-atmosphere .fog--low {
  bottom: 0;
  height: 42vh;
  opacity: .85;
  animation-duration: 63s;
  animation-direction: alternate-reverse;
}

.hollow-atmosphere .woods {
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(170px, 38vh, 400px);
  z-index: 2;
  overflow: hidden;
}

.hollow-atmosphere .woods canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hollow-atmosphere .eyes {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  gap: 7px;
  transform: translate(-50%, -50%) scale(var(--s));
  opacity: 0;
  transition: opacity .9s ease var(--delay);
}

.hollow-atmosphere .eyes.on {
  opacity: 1;
}

.hollow-atmosphere .eye {
  position: relative;
  display: block;
  width: 7px;
  height: 3.6px;
  border-radius: 50%;
  background: var(--eye);
  box-shadow: 0 0 6px 1.5px var(--eye-glow);
  animation: hollow-blink var(--blink) var(--bd) infinite;
}

.hollow-atmosphere .eye:first-child {
  rotate: 14deg;
}

.hollow-atmosphere .eye:last-child {
  rotate: -14deg;
}

.hollow-atmosphere .eye::after {
  content: "";
  position: absolute;
  left: calc(50% - 1.2px + var(--px, 0px));
  top: calc(50% - 1.3px + var(--py, 0px));
  width: 2.4px;
  height: 2.6px;
  border-radius: 50%;
  background: #1b0204;
  transition: left .25s ease, top .25s ease;
}

.hollow-atmosphere .vignette {
  inset: 0;
  z-index: 4;
  background: radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, .7) 100%);
}

.hollow-atmosphere .grain {
  inset: 0;
  z-index: 6;
  opacity: .16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#root {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* Warm, candlelit accents that keep the imported layout and text intact. */
#root .iY {
  --color-primary: #c2410c;
  --color-primary-foreground: #fff7ed;
  --color-ring: #fb923c;
}

#root .iY .r.fW.C {
  background-color: rgba(255, 249, 241, .97);
  border: 1px solid rgba(234, 88, 12, .28);
  box-shadow:
    0 10px 32px rgba(5, 5, 18, .28),
    0 0 0 1px rgba(251, 146, 60, .08);
}

#root .iY > .i.x.rz.e.eJ > .f.q.r.eL.rv.is.iO.fG.iU.rk.iA {
  box-sizing: border-box;
  border: 1px solid rgba(234, 88, 12, .3);
  border-radius: 24px;
  background: rgba(255, 249, 241, .97);
  box-shadow: 0 12px 36px rgba(5, 5, 18, .3), 0 0 28px rgba(234, 88, 12, .12);
}

#root .iY h1,
#root .iY h2 {
  color: #642c1c;
}

#root .iY .iG {
  background-image: none !important;
  background-color: #c2410c !important;
  box-shadow: 0 0 18px rgba(234, 88, 12, .2);
}

#root .iY button.if {
  background-color: #fff8ef;
  border-color: #f1c7a3;
}

#root .iY button.fn {
  background-color: #fff0df;
  border-color: #ea580c;
  box-shadow: 0 0 0 2px rgba(234, 88, 12, .12), 0 8px 18px rgba(124, 45, 18, .13);
}

#root .iY button.fn .tp {
  background-color: #fed7aa;
}

#root .iY button.if:hover,
#root .iY button.fn:hover {
  border-color: #c2410c;
}

#root .iY .rO {
  background: linear-gradient(135deg, #f97316, #c2410c);
  box-shadow: 0 4px 12px rgba(154, 52, 18, .25);
}

#root .iY .iy button.if,
#root .iY .iy button.fn {
  position: relative;
}

#root .iY .iy button.if::before,
#root .iY .iy button.fn::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 27px;
  height: 27px;
  background: url("/halloween-corner-web.svg") center / contain no-repeat;
  opacity: .8;
  pointer-events: none;
}

#root .iY .iy button.if::after,
#root .iY .iy button.fn::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 30px;
  height: 28px;
  background: url("/halloween-corner-pumpkin.svg") center / contain no-repeat;
  pointer-events: none;
}

.halloween-decor {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.halloween-spider,
.halloween-pumpkin {
  position: absolute;
  overflow: visible;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .45));
}

.halloween-spider {
  top: 0;
  left: clamp(12px, 4vw, 54px);
  width: clamp(54px, 6vw, 84px);
  height: auto;
  transform-origin: 50% 0;
  animation: halloween-swing 5s ease-in-out infinite;
}

.halloween-pumpkin {
  top: 12px;
  right: clamp(14px, 5vw, 64px);
  width: clamp(60px, 7vw, 96px);
  height: auto;
  animation: halloween-float 4s ease-in-out infinite;
}

@keyframes halloween-swing {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(5deg); }
}

@keyframes halloween-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes hollow-flicker {
  0%, 100% { filter: none; }
  61% { filter: brightness(.7); }
  62% { filter: none; }
  64% { filter: brightness(.55); }
  65% { filter: none; }
  88% { filter: brightness(.82); }
  89% { filter: none; }
}

@keyframes hollow-drift {
  from { transform: translateX(-8%); }
  to { transform: translateX(8%); }
}

@keyframes hollow-blink {
  0%, 94%, 100% { transform: scaleY(1); }
  96.5% { transform: scaleY(.08); }
}

@media (prefers-reduced-motion: reduce) {
  .hollow-atmosphere .sky--red,
  .hollow-atmosphere .fog,
  .hollow-atmosphere .eye {
    animation: none;
  }

  .halloween-spider,
  .halloween-pumpkin {
    animation: none;
  }
}

@media (max-width: 600px) {
  .halloween-spider {
    left: 6px;
    width: 44px;
  }

  .halloween-pumpkin {
    top: 8px;
    right: auto;
    left: 48px;
    width: 48px;
  }
}