:root {
  --ink: #0b0612;
  --card: rgba(24, 12, 38, 0.82);
  --orange: #ff8a1f;
  --orange-deep: #d9570b;
  --purple: #8e5cf7;
  --text: #f4ecff;
  --muted: #b9a8d4;
  --danger: #ff7a7a;
  --serif: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh; /* excludes the mobile browser toolbar */
  display: grid;
  place-items: center;
  padding: max(1.25rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
  overflow-x: hidden;
  color: var(--text);
  font: 1.05rem/1.5 var(--serif);
  background: radial-gradient(ellipse at 50% 0%, #2a1346 0%, #140a24 45%, var(--ink) 100%) fixed;
}

h1 {
  margin: 0.25rem 0 0.5rem;
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  line-height: 1.1;
  color: var(--orange);
  text-shadow: 0 0 18px rgba(255, 138, 31, 0.55);
}

p { margin: 0.5rem 0; }
strong { color: #ffd199; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.whisper { color: var(--muted); font-style: italic; }
[hidden] { display: none !important; }

/* ---------- Scene ---------- */
.scene { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }

.moon {
  position: absolute; top: 6vh; right: 10vw; width: clamp(70px, 16vw, 130px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff7de, #f1d58a 60%, #c9a85a);
  box-shadow: 0 0 60px 20px rgba(255, 233, 160, 0.35);
}

.fog {
  position: absolute; left: -50%; width: 200%; height: 55%;
  background:
    radial-gradient(ellipse 30% 40% at 20% 60%, rgba(214, 200, 240, 0.30), transparent 70%),
    radial-gradient(ellipse 25% 35% at 55% 50%, rgba(214, 200, 240, 0.26), transparent 70%),
    radial-gradient(ellipse 30% 45% at 85% 65%, rgba(214, 200, 240, 0.30), transparent 70%);
  filter: blur(22px);
  animation: drift 55s linear infinite;
}
.fog-1 { bottom: -5%; }
.fog-2 { bottom: 12%; opacity: 0.7; animation-duration: 80s; animation-direction: reverse; }
.fog-3 { bottom: 30%; opacity: 0.45; animation-duration: 110s; }

@keyframes drift { to { transform: translateX(50%); } }

.trees { position: absolute; bottom: 0; left: 0; width: 100%; height: 22vh; fill: #05020a; }

.bat { position: absolute; width: 46px; fill: #05020a; animation: fly 16s linear infinite; }
.bat-1 { top: 14vh; animation-delay: -2s; }
.bat-2 { top: 28vh; width: 34px; animation-duration: 22s; animation-delay: -11s; }
.bat-3 { top: 8vh; width: 28px; animation-duration: 27s; animation-delay: -18s; }

@keyframes fly {
  0%   { transform: translate(-80px, 0) scaleY(1); }
  25%  { transform: translate(28vw, 30px) scaleY(0.6); }
  50%  { transform: translate(55vw, -20px) scaleY(1); }
  75%  { transform: translate(80vw, 24px) scaleY(0.6); }
  100% { transform: translate(110vw, -10px) scaleY(1); }
}

/* ---------- Card & controls ---------- */
.card {
  position: relative; width: min(100%, 26rem); padding: 1.75rem 1.5rem; text-align: center;
  background: var(--card); border: 1px solid rgba(142, 92, 247, 0.4); border-radius: 1.25rem;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.6), 0 0 40px rgba(142, 92, 247, 0.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.screen { position: relative; animation: rise 0.5s ease-out both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

.big-emoji { font-size: 3.5rem; line-height: 1; filter: drop-shadow(0 0 14px rgba(255, 138, 31, 0.6)); }

.toggle { display: grid; grid-template-columns: 1fr 1fr; margin: 1.1rem 0 0.75rem; border: 1px solid rgba(142, 92, 247, 0.5); border-radius: 999px; overflow: hidden; }
.step { margin: 1rem 0 0; font-weight: bold; color: var(--orange); text-align: left; }
.toggle label img { width: 1.5rem; height: 1.5rem; margin-right: 0.35rem; vertical-align: -0.35em; border-radius: 22%; }
.prize-logo { display: block; width: 4.5rem; height: 4.5rem; margin: 0.5rem auto 0; border-radius: 22%; box-shadow: 0 0 22px rgba(125, 255, 165, 0.45); animation: pop-in 0.7s 0.15s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.step + .toggle { margin-top: 0.4rem; }
.toggle input { position: absolute; opacity: 0; }
.toggle label { padding: 0.75rem 0.5rem; touch-action: manipulation; cursor: pointer; color: var(--muted); transition: background 0.2s, color 0.2s; }
.toggle input:checked + label { background: var(--purple); color: #fff; }
.toggle input:focus-visible + label { outline: 3px solid var(--orange); outline-offset: -3px; }

input[type="email"], input[type="text"] {
  width: 100%; -webkit-appearance: none; appearance: none;
  font-size: 16px; /* anything smaller makes iOS Safari zoom the page on focus */ padding: 0.8rem 1rem; font: inherit; color: var(--text);
  background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(142, 92, 247, 0.5); border-radius: 0.75rem;
}
input:focus-visible { outline: 3px solid var(--orange); outline-offset: 1px; }

.hint { font-size: 0.88rem; color: var(--muted); }
.error { color: var(--danger); font-weight: bold; }

.btn {
  width: 100%; min-height: 48px; margin-top: 0.75rem; padding: 0.85rem 1rem; touch-action: manipulation; -webkit-appearance: none; font: bold 1.1rem var(--serif); color: #1b0a00;
  background: linear-gradient(180deg, #ffab4d, var(--orange-deep)); border: 0; border-radius: 0.75rem; cursor: pointer;
  box-shadow: 0 4px 0 #8a3504, 0 0 22px rgba(255, 138, 31, 0.4); transition: transform 0.1s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #8a3504; }
.btn:disabled { opacity: 0.6; cursor: wait; }
.btn:focus-visible, .pumpkin-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- Pumpkin loot box ---------- */
.pumpkin-btn { touch-action: manipulation; -webkit-appearance: none; display: block; width: 78%; margin: 0.5rem auto 0; padding: 0; background: none; border: 0; cursor: pointer; }
.pumpkin { width: 100%; overflow: visible; animation: bob 2.4s ease-in-out infinite; }
.pumpkin .glow { fill: rgba(255, 138, 31, 0.28); filter: blur(14px); }
.pumpkin .lobe { fill: #f07a14; stroke: #a8480a; stroke-width: 3; }
.pumpkin .lobe.mid { fill: #ff9028; }
.pumpkin .stem { fill: #4a6b22; stroke: #2c4410; stroke-width: 3; }
.pumpkin .face { fill: #2a1000; transition: fill 0.3s; }

@keyframes bob { 50% { transform: translateY(-8px) rotate(-1.5deg); } }

.pumpkin-btn.shaking .pumpkin { animation: shake 0.12s linear infinite; }
.pumpkin-btn.shaking .face { fill: #ffe27a; filter: drop-shadow(0 0 8px #ffb300); }
.pumpkin-btn.shaking .glow { animation: pulse 0.5s ease-in infinite alternate; }
.pumpkin-btn.exploding .pumpkin { animation: pop 0.45s ease-in forwards; }

@keyframes shake {
  0% { transform: translate(-3px, 0) rotate(-3deg); }
  50% { transform: translate(3px, -2px) rotate(3deg); }
  100% { transform: translate(-3px, 2px) rotate(-3deg); }
}
@keyframes pulse { to { fill: rgba(255, 220, 90, 0.7); } }
@keyframes pop { 60% { transform: scale(1.35); filter: brightness(2); } 100% { transform: scale(1.7); opacity: 0; } }

.burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.particle {
  position: absolute; font-size: 1.8rem; animation: fling 1.4s cubic-bezier(0.1, 0.7, 0.4, 1) forwards;
}
@keyframes fling {
  from { transform: translate(0, 0) scale(0.4) rotate(0); opacity: 1; }
  to   { transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(var(--spin)); opacity: 0; }
}

/* ---------- Result ---------- */
.result .big-emoji { font-size: 4.5rem; animation: pop-in 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes pop-in { from { transform: scale(0) rotate(-30deg); } }

.result.treat h1 { color: #7dffa5; text-shadow: 0 0 22px rgba(125, 255, 165, 0.6); }
.result.trick h1 { color: var(--purple); text-shadow: 0 0 22px rgba(142, 92, 247, 0.7); }

.code {
  display: block; margin: 1rem 0 0.25rem; padding: 0.8rem; font: bold 1.2rem ui-monospace, monospace; letter-spacing: 0.06em;
  color: #7dffa5; background: rgba(0, 0, 0, 0.45); border: 2px dashed #7dffa5; border-radius: 0.75rem; word-break: break-all; -webkit-user-select: all; user-select: all;
}
.disclaimer { margin-top: 1rem; padding: 0.6rem 0.8rem; font-size: 0.9rem; color: var(--muted); background: rgba(0, 0, 0, 0.3); border-radius: 0.6rem; }
.joke-setup { font-size: 1.2rem; font-style: italic; }
.joke-punchline { margin-top: 0.75rem; font-size: 1.3rem; font-weight: bold; color: #ffd199; animation: rise 0.6s ease-out both; }

@media (max-width: 380px) {
  .card { padding: 1.25rem 1rem; }
  .pumpkin-btn { width: 88%; }
  .particle { font-size: 1.4rem; }
}

@media (max-height: 520px) and (orientation: landscape) {
  body { place-items: start center; }
  .big-emoji { font-size: 2.5rem; }
  .pumpkin-btn { width: 40%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .fog, .bat { animation: none !important; }
}