@font-face {
  font-family: 'Howest Rounded';
  src: url('assets/howest-rounded-bold.woff') format('woff');
  font-weight: 700;
  font-display: swap;
}

:root { color-scheme: dark; --background: #101820; --text: #fff; --muted: #e0e5eb; --blue: #44C5F8; --yellow: #ffff00; }
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  background: var(--background);
  color: var(--text);
  font-family: Arial, sans-serif;
  transition: background-color .35s, color .35s;
}
.backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.scene-spooky { opacity: 0; transition: opacity 240ms ease-in-out 50ms; }
.backdrop::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, #07101ac2 0%, #07101a73 65%, #07101a8c 100%); transition: opacity 240ms ease-in-out 50ms; }
.rain { position: absolute; inset: 0; z-index: 1; overflow: hidden; opacity: 0; transition: opacity 350ms ease; }
.rain::before, .rain::after {
  content: '';
  position: absolute;
  inset: -360px min(-40vw, -50vh);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cg fill='none' stroke='%23d8edff' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M18 12v19M76 54v27M128 9v15M182 73v22M243 31v30M318 96v18M43 145v24M106 196v17M156 131v31M218 174v20M277 139v16M344 205v27M12 270v17M72 320v25M135 258v23M194 298v15M254 246v28M304 324v20'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 360px 360px;
  opacity: .35;
  animation: rain-fall 950ms linear infinite paused;
}
.rain::after { background-size: 270px 270px; background-position: 93px 127px; opacity: .65; animation-name: rain-fall-near; animation-duration: 600ms; }
.lightning { position: absolute; inset: 0; z-index: 1; opacity: 0; background: radial-gradient(ellipse at 18% 0%, #eff7ff, transparent 65%), radial-gradient(ellipse at 80% 5%, #d9edff, transparent 70%), #c6dfff99; }
.lightning svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; filter: drop-shadow(0 0 7px #b9dcff) drop-shadow(0 0 18px #fff); }
.lightning path { vector-effect: non-scaling-stroke; }
.zombie-lane { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.zombie-walker { position: absolute; left: 100%; bottom: 10px; bottom: max(10px, env(safe-area-inset-bottom)); width: clamp(110px, 15vw, 180px); height: auto; overflow: visible; animation: zombie-cross 28s linear infinite; }
.zombie-body { animation: zombie-shuffle 1.2s ease-in-out infinite; }
.zombie-leg { transform-box: view-box; transform-origin: 92px 165px; animation: zombie-step 1.2s ease-in-out infinite; }
.zombie-leg-back { animation-delay: -.6s; }
.zombie-arm { transform-box: view-box; transform-origin: 78px 108px; animation: zombie-reach 1.2s ease-in-out infinite; }
.zombie-arm-back { animation-delay: -.6s; }
.zombie-head { transform-box: view-box; transform-origin: 82px 80px; animation: zombie-nod 1.2s ease-in-out infinite; }
.zombie-shadow { transform-box: fill-box; transform-origin: center; animation: zombie-shadow 1.2s ease-in-out infinite; }
@keyframes zombie-cross { from { transform: translateX(0); } to { transform: translateX(calc(-100vw - 100%)); } }
@keyframes zombie-shuffle { 0%, 50%, 100% { transform: translateY(0); } 25%, 75% { transform: translateY(-3px); } }
@keyframes zombie-step { 0%, 100% { transform: rotate(-17deg); } 50% { transform: rotate(17deg); } }
@keyframes zombie-reach { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(7deg); } }
@keyframes zombie-nod { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(-3deg); } }
@keyframes zombie-shadow { 0%, 50%, 100% { transform: scaleX(1); opacity: .3; } 25%, 75% { transform: scaleX(.9); opacity: .23; } }
@media (max-width: 600px) { .zombie-walker { animation-duration: 18s; } }
main { position: relative; z-index: 1; width: min(100%, 420px); text-align: center; }
.brand { display: inline-block; margin-bottom: 36px; }
.brand:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; }
.logo { display: block; width: 126px; height: auto; filter: brightness(0) invert(1); }
h1 { margin: 0; font: 700 clamp(28px, 8.5vw, 48px)/1.1 'Howest Rounded', Arial, sans-serif; white-space: nowrap; text-shadow: 0 2px 16px #0006; transition: color 900ms ease-in-out, text-shadow 900ms ease-in-out; }
.event-details { display: flex; flex-direction: column; gap: 8px; margin: 24px 0 16px; font-size: 17px; line-height: 1.5; }
.costume-prize { margin: 0 0 24px; font-size: 17px; line-height: 1.5; color: var(--yellow); }
.actions + .party-info { margin-top: 28px; }
.party-info { padding: 24px; border: 1px solid #44c5f855; border-radius: 16px; background: #101820e6; text-align: left; font-size: 15px; line-height: 1.6; }
.party-info h2 { margin: 20px 0 6px; color: var(--blue); font: 700 19px/1.3 'Howest Rounded', Arial, sans-serif; }
.party-info h2:first-child { margin-top: 0; }
.party-info p { margin: 0; }
.party-info ul { margin: 0; padding-left: 20px; }
.actions { display: flex; justify-content: center; gap: 12px; }
.button { display: flex; justify-content: center; align-items: center; width: 134px; min-height: 48px; padding: 12px 16px; border: 2px solid var(--blue); border-radius: 100px; font: 700 16px 'Howest Rounded', Arial, sans-serif; text-decoration: none; white-space: nowrap; user-select: none; -webkit-tap-highlight-color: transparent; }
.yes-button { background: var(--yellow); border-color: var(--yellow); color: #1c1d1e; cursor: pointer; }
.yes-button:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.no-slot { width: 134px; min-height: 48px; }
.no-button { background: var(--background); color: var(--text); touch-action: none; cursor: default; z-index: 2; }
.no-button.escaped { position: fixed; }
/* Small native cursors: SVG, PNG fallback, then the system cursor. */
html, body, .no-button {
  cursor: url('assets/ghost-cursor.svg') 16 3, url('assets/ghost-cursor.png') 16 3, default;
}
a, .yes-button {
  cursor: url('assets/ghost-cursor.svg') 16 3, url('assets/ghost-cursor.png') 16 3, pointer;
}
.credit { margin: 30px 0 0; font-size: 12px; color: var(--muted); }
.credit strong { color: var(--text); }
.status { position: absolute; top: 100%; width: 100%; margin: 16px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
body.spooky { --background: #0c0c0e; }
.spooky .scene-spooky { opacity: 1; }
.spooky .backdrop::after { opacity: .45; }
.spooky .rain { opacity: .8; }
.spooky .rain::before, .spooky .rain::after { animation-play-state: running; }
.spooky h1 { text-shadow: 0 0 32px #ffffff4d; animation: haunt 2.4s ease-in-out infinite alternate; }
@keyframes rain-fall { from { transform: skewX(-12deg) translateY(0); } to { transform: skewX(-12deg) translateY(360px); } }
@keyframes rain-fall-near { from { transform: skewX(-12deg) translateY(0); } to { transform: skewX(-12deg) translateY(270px); } }
@keyframes haunt { to { text-shadow: 0 0 50px #ffffff80; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .rain, .zombie-lane { display: none; } }