:root {
  --bg-dark: #1b1030;
  --bg-darker: #120a22;
  --orange: #ff7a00;
  --purple: #9b59b6;
  --card-bg: #251640;
  --text: #f4f0ff;
  --text-dim: #b7a9d9;
  --correct: #2fb6a1;
  --wrong: #e0456f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Fredoka', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg-darker);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-x: hidden;
}

/* ---------- Animated Halloween sky background ---------- */
.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: radial-gradient(circle at top, var(--bg-dark), var(--bg-darker));
}

.stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 10% 20%, #fff, transparent),
    radial-gradient(2px 2px at 25% 65%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 40% 15%, #fff, transparent),
    radial-gradient(2px 2px at 60% 40%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 75% 70%, #fff, transparent),
    radial-gradient(2px 2px at 85% 25%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 92% 55%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 15% 85%, #fff, transparent),
    radial-gradient(2px 2px at 50% 85%, #fff, transparent);
  opacity: 0.5;
  animation: starTwinkle 4s ease-in-out infinite alternate;
}
@keyframes starTwinkle {
  0% { opacity: 0.3; }
  100% { opacity: 0.85; }
}

.moon {
  position: absolute;
  top: 8%;
  right: 10%;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fffef2, #f4e9c1 60%, #e8d99a 100%);
  box-shadow: 0 0 60px 18px rgba(244, 233, 193, 0.35);
}
/* On phones Ela sits top-center with her sigh puff to the right; a top-right moon read as
   her speech bubble. Move it to the top-left corner, smaller. */
@media (max-width: 760px) {
  .moon {
    top: 3%;
    right: auto;
    left: 6%;
    width: 64px;
    height: 64px;
    box-shadow: 0 0 40px 12px rgba(244, 233, 193, 0.3);
  }
}

.cloud {
  position: absolute;
  width: 220px;
  height: 60px;
  background: var(--bg-darker);
  border-radius: 50px;
  opacity: 0.9;
  filter: blur(1px);
}
.cloud::before, .cloud::after {
  content: "";
  position: absolute;
  background: var(--bg-darker);
  border-radius: 50%;
}
.cloud::before { width: 90px; height: 90px; top: -40px; left: 20px; }
.cloud::after { width: 70px; height: 70px; top: -28px; left: 110px; }

.cloud-1 { top: 12%; left: -260px; animation: driftRight 38s linear infinite; }
.cloud-2 { top: 20%; left: -320px; animation: driftRight 52s linear infinite 8s; opacity: 0.7; transform: scale(0.8); }

@keyframes driftRight {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 300px)); }
}

/* Ghost: bobs and drifts across a slice of sky, then hides for the rest of a long cycle */
.ghost {
  position: absolute;
  top: 60%;
  left: -8%;
  width: 38px;
  height: 42px;
  opacity: 0;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
  animation: ghostDrift 32s ease-in-out infinite;
}
.ghost-inner {
  display: block;
  transform-origin: top center;
  animation: ghostIdle 2.4s ease-in-out infinite;
}
@keyframes ghostIdle {
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  25%  { transform: translateY(-5px) rotate(-4deg) scale(1.02); }
  50%  { transform: translateY(0) rotate(0deg) scale(1); }
  75%  { transform: translateY(-5px) rotate(4deg) scale(1.02); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}
/* Wibbly hem: 4 scallops bob independently, staggered, for a wave ripple across the tail */
.hem-scallop {
  transform-box: fill-box;
  transform-origin: top center;
  animation: hemWibble 1.6s ease-in-out infinite;
}
.hem-2 { animation-delay: 0.15s; }
.hem-3 { animation-delay: 0.3s; }
.hem-4 { animation-delay: 0.45s; }
@keyframes hemWibble {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.15); }
}

/* Changing face: 3 expressions crossfade on a loop */
.face { opacity: 0; animation: faceCycle 6s infinite; }
.face-1 { animation-delay: 0s; }
.face-2 { animation-delay: -2s; }
.face-3 { animation-delay: -4s; }
@keyframes faceCycle {
  0%, 27%  { opacity: 1; }
  33%, 100% { opacity: 0; }
}

.ghost-shadow {
  position: absolute;
  top: calc(60% + 40px);
  left: -8%;
  width: 26px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0,0,0,0.35);
  filter: blur(2px);
  opacity: 0;
  animation: ghostShadowPulse 32s ease-in-out infinite;
}
@keyframes ghostDrift {
  0%   { transform: translate(0, 0); opacity: 0; }
  4%   { opacity: 0.85; }
  20%  { transform: translate(22vw, -18px); }
  38%  { transform: translate(45vw, 0); }
  56%  { transform: translate(68vw, -18px); opacity: 0.85; }
  64%  { opacity: 0; }
  100% { opacity: 0; transform: translate(68vw, -18px); }
}
@keyframes ghostShadowPulse {
  0%   { transform: translateX(0) scale(1); opacity: 0; }
  4%   { opacity: 0.4; }
  20%  { transform: translateX(22vw) scale(0.6); }
  38%  { transform: translateX(45vw) scale(1); }
  56%  { transform: translateX(68vw) scale(0.6); opacity: 0.4; }
  64%  { opacity: 0; }
  100% { opacity: 0; transform: translateX(68vw) scale(0.6); }
}

/* Spider: dangles on a thread, drops down and retracts, hidden most of the cycle */
.spider-wrap {
  position: absolute;
  top: 0;
  left: 16%;
  width: 20px;
}
.spider-drop {
  position: relative;
  animation: spiderDrop 22s ease-in-out infinite;
}
.spider-thread {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 70px;
  background: rgba(244,240,255,0.3);
  transform: translateX(-50%);
}
.spider-body {
  position: absolute;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.3));
}
@keyframes spiderDrop {
  0%, 68%  { transform: translateY(-90px); }
  78%      { transform: translateY(0); }
  90%      { transform: translateY(0); }
  100%     { transform: translateY(-90px); }
}

/* Cauldron goo + bubbles (haunted house cauldron room) */
.goo-blob, .goo-surface { animation: gooBubble 2.6s ease-in-out infinite; transform-origin: bottom center; }
.goo-blob-2 { animation-duration: 3.1s; animation-delay: 0.3s; }
.goo-blob-3 { animation-duration: 2.2s; animation-delay: 0.6s; }
@keyframes gooBubble {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-4px) scale(1.06); }
}
.cauldron-bubble { animation: bubbleRise 2.8s ease-in infinite; }
.bubble-2 { animation-duration: 2.3s; animation-delay: 0.7s; }
.bubble-3 { animation-duration: 3.2s; animation-delay: 1.4s; }
@keyframes bubbleRise {
  0%   { transform: translateY(0); opacity: 0; }
  15%  { opacity: 0.9; }
  80%  { opacity: 0.5; }
  100% { transform: translateY(-38px); opacity: 0; }
}

/* Countdown to campaign start */
.countdown {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 10px;
}
.countdown-unit { display: flex; flex-direction: column; align-items: center; }
.countdown-unit span {
  font-family: 'Jolly Lodger', cursive;
  font-size: 2.3rem;
  color: var(--orange);
  text-shadow: 0 0 10px rgba(255,122,0,0.6);
  line-height: 1;
}
.countdown-unit small {
  color: var(--text-dim);
  font-size: 0.7rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Bat swarm: JS drives each bat to randomized waypoints (see initBatSwarm in app.js),
   darting with asymmetric wing beats (not a symmetric butterfly flutter) */
.bat-swarm {
  position: absolute;
  inset: 0;
}
.bat-shape {
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 32px;
  opacity: 0;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.3));
}
/* Reference sprite: 35x80px, 4 frames stacked vertically (20px each), displayed at 1.6x.
   Used as a mask (not background-image) so the silhouette can be recolored lighter :
   the source PNG is near-black and was vanishing against the dark sky. */
.bat-inner {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #9a8bd6;
  -webkit-mask-image: url('assets/icons/bats-sprite.png');
  mask-image: url('assets/icons/bats-sprite.png');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 56px 128px;
  mask-size: 56px 128px;
  animation: batFrameStep 0.5s steps(4) infinite, batJitter 0.4s ease-in-out infinite;
}
@keyframes batFrameStep {
  from { -webkit-mask-position-y: 0; mask-position-y: 0; }
  to   { -webkit-mask-position-y: -128px; mask-position-y: -128px; }
}
@keyframes batJitter {
  0%   { transform: translateY(0) rotate(0deg); }
  25%  { transform: translateY(-3px) rotate(-3deg); }
  50%  { transform: translateY(1px) rotate(2deg); }
  75%  { transform: translateY(-2px) rotate(-2deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
#app { position: relative; z-index: 1; width: 100%; max-width: 900px; }

/* Start screen: art stands beside the card. Before the campaign opens it's bored Ela
   (.waiting-art); once open it's the whole crew, gathered behind the card's edge (.crew-art). */
.start-layout {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
}
.card-stage { position: relative; flex: 0 1 480px; }
.start-layout .start-card { margin: 0; position: relative; z-index: 1; }
.waiting-art { display: none; }

/* Open campaign, narrower screens: the crew group peeks over the top of the card */
#screen-start:not(.waiting) .start-layout { flex-direction: column; align-items: center; }
.crew-art {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 0 -36px;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.5));
}
.card-stage { width: 100%; max-width: 480px; }
.waiting .crew-art, .waiting .crew-surround { display: none; }

/* Open campaign, wide screens: the crew surrounds the card. Back row stands higher and
   smaller (further away), front row lower and bigger; the two nearest stand just behind
   the card's edges. Positions are measured from the card's sides and bottom. */
.crew-surround { display: none; }
@media (min-width: 1200px) {
  .crew-art { display: none; }
  .crew-surround { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .crew-member {
    position: absolute;
    height: 300px;
    width: auto;
    filter: drop-shadow(0 14px 20px rgba(0,0,0,0.45));
  }
  .crew-member.back { height: 250px; filter: drop-shadow(0 10px 16px rgba(0,0,0,0.4)) brightness(0.88); }
  /* left side */
  .l1 { right: calc(100% + 170px); bottom: 120px; }
  .l2 { right: calc(100% + 40px);  bottom: 140px; }
  .l3 { right: calc(100% + 230px); bottom: -10px; }
  .l4 { right: calc(100% + 105px); bottom: -24px; }
  .l5 { right: calc(100% - 40px);  bottom: -34px; height: 320px; }
  /* right side */
  .r1 { left: calc(100% + 165px);  bottom: 90px; }
  .r2 { left: calc(100% + 50px);   bottom: 130px; }
  .r3 { left: calc(100% + 150px);  bottom: -18px; }
  .r4 { left: calc(100% - 40px);   bottom: -34px; height: 320px; }
}
@media (max-width: 760px) {
  .waiting .start-layout { flex-direction: column; align-items: center; }
  .waiting .card-stage { width: 100%; }
}
.waiting .waiting-art {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
  margin-right: -24px; /* broom tucks slightly behind the card edge */
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.5));
  animation: waitingSway 6s ease-in-out infinite;
  transform-origin: 50% 100%;
}
@keyframes waitingSway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-1.2deg); }
}
@media (max-width: 760px) {
  .waiting .waiting-art { width: 190px; margin: 0 0 -28px; position: relative; z-index: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .waiting .waiting-art { animation: none; }
}

.screen { display: none; }
.screen.active { display: block; }

.card {
  background: var(--card-bg);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  max-width: 480px;
  margin: 0 auto;
}

h1 {
  margin: 0 0 14px;
  font-family: 'Jolly Lodger', cursive;
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 1.05;
  letter-spacing: 0.5px;
  color: var(--orange);
  text-shadow: 0 0 14px rgba(255,122,0,0.45);
  text-align: center;
}
h2 { margin: 0 0 12px; text-align: center; }

.tagline { text-align: center; color: var(--text-dim); margin-bottom: 24px; }
.returning-line { display: none; }
#screen-start.returning .tagline { display: none; }
#screen-start.returning .tagline.returning-line { display: block; }
.curse-line { display: block; margin-top: 6px; color: var(--text); letter-spacing: 0.5px; }

.not-open { text-align: center; margin-bottom: 8px; }
.not-open.hidden { display: none; }
.not-open p { margin: 0 0 4px; }
.opens-on { color: var(--orange); font-weight: 700; }

.btn-primary.hidden { display: none; }

/* Waiting screen: rank means nothing before the first game, so "Remind me" takes its place */
.waiting .rank-badge { display: none; }
#btn-remind {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 1.1rem;
}
.btn-icon { flex-shrink: 0; transform-origin: 50% 10%; }
#btn-remind:hover .btn-icon { animation: bellRing 0.6s ease-in-out; }
@keyframes bellRing {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(14deg); }
  50% { transform: rotate(-10deg); }
  75% { transform: rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) {
  #btn-remind:hover .btn-icon { animation: none; }
}
.remind-options { margin-top: 6px; }
.remind-options.hidden { display: none; }
.remind-hint { color: var(--text-dim); font-size: 0.9rem; margin: 8px 0 0 !important; }
.remind-options .btn-secondary {
  display: block;
  text-align: center;
  text-decoration: none;
  font-family: inherit;
}


.btn-primary, .btn-secondary {
  font-family: inherit; /* buttons don't inherit the body font by default */
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 10px;
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s, background 0.15s;
}

.btn-primary {
  background: var(--orange);
  color: #1b1030;
}
.btn-primary:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(255,122,0,0.3); }
.btn-primary:active { transform: translateY(0) scale(0.98); }

.btn-secondary {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--text);
}
.btn-secondary:hover { background: rgba(255,255,255,0.08); transform: translateY(-2px); }
.btn-secondary:active { transform: translateY(0) scale(0.98); }

.rank-badge {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.rank-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rank-color, var(--orange));
  box-shadow: 0 6px 14px rgba(0,0,0,0.35);
  overflow: hidden;
}
.rank-icon img {
  width: 70%;
  height: 70%;
  object-fit: contain;
}
.rank-info { flex: 1; min-width: 0; text-align: left; display: flex; flex-direction: column; }
.rank-info #current-rank,
.rank-info #end-rank {
  font-size: 1.05rem;
  color: var(--orange);
  font-weight: 700;
}
.rank-sub { font-size: 0.78rem; color: var(--text-dim); }
.rank-bar {
  margin-top: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.rank-bar-fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: var(--rank-color, var(--orange));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.rank-up-banner {
  text-align: center;
  font-weight: 800;
  color: #1b1030;
  background: linear-gradient(90deg, #ffd166, var(--orange));
  padding: 10px;
  border-radius: 12px;
  margin-bottom: 4px;
  animation: rankUpGlow 1s ease-in-out infinite alternate;
}
.rank-up-banner.hidden { display: none; }
@keyframes rankUpGlow {
  from { box-shadow: 0 0 0 rgba(255,122,0,0); }
  to   { box-shadow: 0 0 22px rgba(255,122,0,0.6); }
}

.topbar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 8px 14px;
  border-radius: 14px;
  background: rgba(18,10,34,0.8); /* keeps stats readable over the moon on phones */
  border: 1px solid rgba(255,255,255,0.06);
  position: relative;
  z-index: 3;
}
.stat { text-align: center; }
.stat span { display: block; font-size: 1.3rem; font-weight: 700; }
.stat small { color: var(--text-dim); font-size: 0.75rem; }

/* ---------- Door stage: each question is a neighbor's front door ---------- */
/* Mobile-first: door on top, question card below. Desktop: door left, card right. */
.quiz-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.door-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 150px; /* small on phones so the answers stay above the fold */
}
.house-label {
  font-family: 'Jolly Lodger', cursive;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--char-color, var(--orange));
  text-shadow: 0 0 12px rgba(0,0,0,0.6);
  margin-bottom: 8px;
  text-align: center;
}

/* Doorway: trim in the neighbor's color, warm light inside */
.doorway {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 7;
  border: 10px solid var(--char-color, var(--orange));
  border-bottom-width: 0;
  border-radius: 14px 14px 0 0;
  background: radial-gradient(ellipse at 50% 35%, #ffcf7a 0%, #b5651d 45%, #3a1d0b 100%);
  box-shadow: 0 0 40px rgba(0,0,0,0.5), inset 0 0 30px rgba(0,0,0,0.6);
  perspective: 900px;
  overflow: visible;
}
.doorway::after { /* doorstep */
  content: "";
  position: absolute;
  left: -18px;
  right: -18px;
  bottom: -12px;
  height: 12px;
  border-radius: 4px;
  background: #3a2a52;
  box-shadow: 0 6px 14px rgba(0,0,0,0.5);
}
.doorway-inside {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
  z-index: 1;
}
.doorway-inside .char-glow {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 90%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--char-color, var(--orange)) 0%, transparent 70%);
  opacity: 0.5;
  filter: blur(8px);
}
.char-art {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  transform: translateX(-50%);
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.5));
}
/* Small greeting lean as the door opens */
.door-open .char-art { animation: charGreet 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.15s; }
@keyframes charGreet {
  0%, 100% { transform: translateX(-50%) rotate(0); }
  45% { transform: translateX(-50%) translateY(-4px) rotate(-2.5deg); }
}

/* The door itself, hinged on the left, swings inward */
.door {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  border-radius: 4px 4px 0 0;
  z-index: 2;
  transform-origin: left center;
  transform: rotateY(0deg);
  transition: transform 0.55s cubic-bezier(0.3, 0.7, 0.3, 1), filter 0.55s ease, z-index 0s;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.25), transparent 12%, transparent 88%, rgba(0,0,0,0.25)),
    linear-gradient(color-mix(in srgb, var(--char-color, var(--orange)) 55%, #1b1030), color-mix(in srgb, var(--char-color, var(--orange)) 35%, #120a22));
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.25);
}
/* Drops behind the neighbor a beat into the swing, once it's no longer covering them */
.door-open .door {
  transform: rotateY(72deg);
  filter: brightness(0.55);
  z-index: 0;
  transition: transform 0.55s cubic-bezier(0.3, 0.7, 0.3, 1), filter 0.55s ease, z-index 0s 0.12s;
}

/* Warm light spills onto the step when the door opens */
.doorway::before {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  top: 100%;
  height: 48px;
  margin-top: 12px;
  background: linear-gradient(rgba(255,196,110,0.35), transparent);
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.door-open .doorway::before { opacity: 1; }
.door-stage.boss .doorway::before { background: linear-gradient(rgba(93,251,132,0.3), transparent); }

/* Walking to the next house */
.door-stage.leaving { animation: walkOut 0.3s ease-in forwards; }
.door-stage.arriving { animation: walkIn 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes walkOut { to { transform: translateX(-40px); opacity: 0; } }
@keyframes walkIn { from { transform: translateX(40px); opacity: 0; } }
.door-panel {
  position: absolute;
  left: 16%;
  right: 16%;
  border-radius: 6px;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,0.12), inset -2px -2px 0 rgba(0,0,0,0.3);
}
.door-panel-top { top: 9%; height: 32%; }
.door-panel-bottom { top: 50%; height: 42%; }
.door-knocker {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 22px;
  height: 22px;
  transform: translateX(-50%);
  border: 4px solid #e8c45a;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
  transform-origin: 50% 0;
}
.door-knob {
  position: absolute;
  right: 12%;
  top: 56%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e8c45a;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.door-deco { /* costume clue hung on the door, like a wreath */
  position: absolute;
  left: 50%;
  top: 17%;
  transform: translateX(-50%);
  font-size: 1.8rem;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
}

/* Doorbell houses: a bell button on the frame instead of a knocker on the door */
.door-bell { display: none; }
.has-bell .door-knocker { display: none; }
.has-bell .door-bell {
  display: block;
  position: absolute;
  right: -10px;
  top: 52%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e8c45a;
  border: 3px solid #6b4f12;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  transform: translateX(50%);
  z-index: 2;
}
.ringing .door-bell { animation: bellPress 1.2s ease-out; }
@keyframes bellPress {
  0%   { box-shadow: 0 2px 4px rgba(0,0,0,0.5); transform: translateX(50%) scale(1); }
  10%  { transform: translateX(50%) scale(0.8); }
  25%  { box-shadow: 0 0 14px 4px rgba(255,209,102,0.7); transform: translateX(50%) scale(1); }
  100% { box-shadow: 0 2px 4px rgba(0,0,0,0.5); }
}

/* Haunted house door opens slowly, to match the long squeak */
.door-stage.boss.door-open .door { transition-duration: 1.4s, 1.4s, 0s; transition-delay: 0s, 0s, 0.3s; }

/* Knock: door shakes, knocker swings */
.knocking .door { animation: doorKnock 0.5s ease-out; }
.knocking .door-knocker { animation: knockerSwing 0.5s ease-out; }
@keyframes doorKnock {
  0%, 100% { transform: rotateY(0deg) translateX(0); }
  15%, 48%, 81% { transform: rotateY(0deg) translateX(2px); }
  30%, 63%, 96% { transform: rotateY(0deg) translateX(-1px); }
}
@keyframes knockerSwing {
  0%, 100% { transform: translateX(-50%) rotate(0); }
  15%, 48%, 81% { transform: translateX(-50%) rotateX(40deg); }
}

.char-name-tag {
  margin-top: 18px;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--char-color, var(--orange));
  color: #1b1030;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 6px 14px rgba(0,0,0,0.35);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.25s ease 0.2s;
}
.door-open .char-name-tag { opacity: 1; }

.quiz-card.card { width: 100%; margin: 0; }


@media (min-width: 700px) {
  .quiz-stage {
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    gap: 36px;
  }
  .door-stage { flex: 0 0 240px; max-width: 240px; }
  .quiz-card.card { flex: 1 1 auto; max-width: 480px; }
}

/* Haunted house (boss): crooked frame, cold green light, dark door */
.door-stage.boss { --char-color: #3ddc5c; }
.door-stage.boss .doorway {
  transform: rotate(-1.5deg);
  border-color: #2a3a2a;
  background: radial-gradient(ellipse at 50% 35%, #a6ffb8 0%, #2f8f45 45%, #0b1f10 100%);
  box-shadow: 0 0 50px rgba(61,220,92,0.35), inset 0 0 30px rgba(0,0,0,0.6);
}
.door-stage.boss .door {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.35), transparent 12%, transparent 88%, rgba(0,0,0,0.35)),
    linear-gradient(#26203a, #120a22);
}
.door-stage.boss .house-label { color: #5dfb84; }
/* Nobody is at the haunted door: no name under it (kept in place so the house doesn't jump) */
.door-stage.boss .char-name-tag { visibility: hidden; }

/* Treat / trick reactions on the character in the doorway (kept subtle; no bounce overshoot) */
.reacting-correct .char-art { animation: charHop 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.reacting-wrong .char-art { animation: charGiggle 0.6s ease-in-out; }
@keyframes charHop {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(-10px); }
}
@keyframes charGiggle {
  0%, 100% { transform: translateX(-50%) rotate(0); }
  25% { transform: translateX(-50%) rotate(-3deg); }
  75% { transform: translateX(-50%) rotate(3deg); }
}

/* Each neighbor reacts their own way (move comes from REACTIONS in data.js), then the door
   closes. These override the two generic moves above. */
.door-stage[data-react] .char-art { transform-origin: 50% 100%; }
.door-stage[data-react="cheer"]  .char-art { animation: rCheer 1s cubic-bezier(0.22, 1, 0.36, 1); }
.door-stage[data-react="bounce"] .char-art { animation: rBounce 1.2s ease-out; }
.door-stage[data-react="pump"]   .char-art { animation: rPump 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.door-stage[data-react="sway"]   .char-art { animation: rSway 1.4s ease-in-out; }
.door-stage[data-react="nod"]    .char-art { animation: rNod 0.9s ease-in-out; }
.door-stage[data-react="howl"]   .char-art { animation: rHowl 1.4s ease-in-out; }
.door-stage[data-react="laugh"]  .char-art { animation: rLaugh 1.2s ease-in-out; }
.door-stage[data-react="lean"]   .char-art { animation: rLean 1.6s ease-in-out forwards; }
.door-stage[data-react="tilt"]   .char-art { animation: rTilt 1.4s ease-in-out forwards; }
.door-stage[data-react="duck"]   .char-art { animation: rDuck 1.4s ease-in-out forwards; }
.door-stage[data-react="shrug"]  .char-art { animation: rShrug 1.1s ease-in-out; }
.door-stage[data-react="shake"]  .char-art { animation: rShake 0.9s ease-in-out; }
.door-stage[data-react="droop"]  .char-art { animation: rDroop 1.5s ease-in-out forwards; }
/* Right answers */
@keyframes rCheer { /* two happy hops */
  0%, 45%, 100% { transform: translateX(-50%) translateY(0); }
  22% { transform: translateX(-50%) translateY(-12px) rotate(-2deg); }
  70% { transform: translateX(-50%) translateY(-8px) rotate(2deg); }
}
@keyframes rBounce { /* a small kid who can't stand still */
  0%, 25%, 50%, 75%, 100% { transform: translateX(-50%) translateY(0); }
  12% { transform: translateX(-50%) translateY(-10px); }
  37% { transform: translateX(-50%) translateY(-8px); }
  62% { transform: translateX(-50%) translateY(-6px); }
  87% { transform: translateX(-50%) translateY(-3px); }
}
@keyframes rPump { /* one sharp "yes!" */
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  30% { transform: translateX(-50%) translateY(-14px) scale(1.04); }
  55% { transform: translateX(-50%) translateY(0) scale(0.99, 1.01); }
}
@keyframes rSway { /* quietly pleased */
  0%, 100% { transform: translateX(-50%) rotate(0); }
  30% { transform: translateX(-50%) rotate(-2.5deg); }
  70% { transform: translateX(-50%) rotate(2.5deg); }
}
@keyframes rNod { /* a cool, grudging nod */
  0%, 100% { transform: translateX(-50%) translateY(0); }
  30% { transform: translateX(-50%) translateY(5px) rotate(1.5deg); }
  55% { transform: translateX(-50%) translateY(0); }
  75% { transform: translateX(-50%) translateY(3px) rotate(1deg); }
}
@keyframes rHowl { /* leans back at the moon */
  0%, 100% { transform: translateX(-50%) rotate(0); }
  35%, 70% { transform: translateX(-50%) translateY(-4px) rotate(-6deg); }
}
/* Wrong answers */
@keyframes rLaugh { /* shoulders shaking */
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(0); }
  10%, 30%, 50%, 70% { transform: translateX(-50%) translateY(-4px) rotate(-1.5deg); }
  20%, 40%, 60%, 80% { transform: translateX(-50%) translateY(0) rotate(1.5deg); }
}
@keyframes rLean { /* leans in to comfort, and stays there */
  0% { transform: translateX(-50%) scale(1); }
  40%, 100% { transform: translateX(-50%) scale(1.05) rotate(2deg); }
}
@keyframes rTilt { /* puzzled head tilt */
  0% { transform: translateX(-50%) rotate(0); }
  30% { transform: translateX(-50%) rotate(-5deg); }
  60%, 100% { transform: translateX(-50%) rotate(4deg); }
}
@keyframes rDuck { /* shy: sinks a little behind the doorstep */
  0% { transform: translateX(-50%) translateY(0); }
  35%, 100% { transform: translateX(-50%) translateY(9%) rotate(-2deg); }
}
@keyframes rShrug { /* dry "eh" */
  0%, 100% { transform: translateX(-50%) translateY(0); }
  35%, 55% { transform: translateX(-50%) translateY(-5px) scale(1.01, 0.99); }
}
@keyframes rShake { /* "nope, again" */
  0%, 100% { transform: translateX(-50%) translateX(0); }
  20%, 60% { transform: translateX(-50%) translateX(-5px) rotate(-1.5deg); }
  40%, 80% { transform: translateX(-50%) translateX(5px) rotate(1.5deg); }
}
@keyframes rDroop { /* feels bad for you */
  0% { transform: translateX(-50%) translateY(0) rotate(0); }
  45%, 100% { transform: translateX(-50%) translateY(4%) rotate(3deg) scale(1, 0.98); }
}

/* With a reaction drawing: crouch in the old pose (windup), spring up into the new drawing
   (posePop), then keep moving in it until the door closes. */
.door-stage[data-react="windup"] .char-art { animation: poseWindup 0.17s ease-in forwards; }
.door-stage[data-react^="pose-"] .char-art { animation: posePop 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.door-stage[data-react="pose-clap"] .char-art {
  animation: posePop 0.4s cubic-bezier(0.22, 1, 0.36, 1), poseClap 0.56s ease-in-out 0.4s infinite;
}
.door-stage[data-react="pose-laugh"] .char-art {
  animation: posePop 0.4s cubic-bezier(0.22, 1, 0.36, 1), poseLaugh 0.3s ease-in-out 0.4s infinite;
}
.door-stage[data-react="pose-hop"] .char-art {
  animation: posePop 0.4s cubic-bezier(0.22, 1, 0.36, 1), poseHop 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.4s infinite;
}
.door-stage[data-react="pose-sway"] .char-art {
  animation: posePop 0.4s cubic-bezier(0.22, 1, 0.36, 1), poseSway 1.1s ease-in-out 0.4s infinite;
}
.door-stage[data-react="pose-howl"] .char-art {
  animation: posePop 0.4s cubic-bezier(0.22, 1, 0.36, 1), poseHowl 1.6s ease-in-out 0.4s infinite;
}
.door-stage[data-react="pose-soft"] .char-art {
  animation: posePop 0.4s cubic-bezier(0.22, 1, 0.36, 1), poseSoft 1.8s ease-in-out 0.4s infinite;
}
.door-stage[data-react="pose-wag"] .char-art {
  animation: posePop 0.4s cubic-bezier(0.22, 1, 0.36, 1), poseWag 0.5s ease-in-out 0.4s infinite;
}
@keyframes poseWag { /* smug "ah-ah-ah": a small, quick tick from side to side */
  0%, 100% { transform: translateX(-50%) rotate(-1.6deg); }
  50% { transform: translateX(-50%) rotate(1.6deg); }
}
@keyframes poseHop { /* can't keep their feet on the ground */
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1.01, 0.99); }
  45% { transform: translateX(-50%) translateY(-11px) scale(0.99, 1.02); }
}
@keyframes poseSway { /* pleased, rocking side to side */
  0%, 100% { transform: translateX(-50%) rotate(-2deg); }
  50% { transform: translateX(-50%) rotate(2deg); }
}
@keyframes poseHowl { /* one long howl, stretching up into it */
  0%, 100% { transform: translateX(-50%) rotate(0) scale(1); }
  50% { transform: translateX(-50%) translateY(-5px) rotate(-3deg) scale(0.99, 1.03); }
}
@keyframes poseSoft { /* quiet reactions: just breathing, leaning in a little */
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.012, 1.02); }
}
@keyframes poseWindup {
  to { transform: translateX(-50%) scale(1.03, 0.93); }
}
@keyframes posePop {
  0% { transform: translateX(-50%) scale(1.03, 0.93); }
  45% { transform: translateX(-50%) translateY(-10px) scale(0.98, 1.05); }
  100% { transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes poseClap { /* slow, pointed applause: a small squeeze on each clap */
  0%, 60%, 100% { transform: translateX(-50%) rotate(0) scale(1); }
  30% { transform: translateX(-50%) translateY(2px) rotate(-1deg) scale(0.985, 1.01); }
}
@keyframes poseLaugh { /* whole body shaking with it, leaning back */
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-1.5deg); }
  50% { transform: translateX(-50%) translateY(-6px) rotate(-3deg); }
}

/* Treat flying into the bag counter (driven by the Web Animations API in flyTreat) */
.flying-treat {
  position: fixed;
  z-index: 50;
  font-size: 2.2rem;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.stat-bag.bag-bump { animation: bagBump 0.35s ease-out; }
@keyframes bagBump {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.25); }
}

/* Wrong answer: treat counter shakes and flashes red, "-1" floats up from it */
.stat-bag.bag-lost { animation: bagLost 0.5s ease-in-out; }
@keyframes bagLost {
  0%, 100% { transform: translateX(0); color: inherit; }
  20% { transform: translateX(-5px); color: var(--wrong); }
  40% { transform: translateX(5px); color: var(--wrong); }
  60% { transform: translateX(-3px); color: var(--wrong); }
  80% { transform: translateX(2px); }
}
.minus-one {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--wrong);
  animation: minusFloat 1.1s ease-out forwards;
}
@keyframes minusFloat {
  from { transform: translate(-20%, 0); opacity: 1; }
  to   { transform: translate(-20%, -28px); opacity: 0; }
}

/* While the door opens the card just says "Knock, knock..."; the question comes as they open it */
.knock-line { color: var(--text-dim); text-align: center; margin: 6px 0; font-size: 1.05rem; }
.knock-line.hidden, .prompt.hidden, .options.hidden { display: none; }
.door-open ~ .quiz-card .prompt, .quiz-card .prompt:not(.hidden), .quiz-card .options:not(.hidden) { animation: askIn 0.3s ease-out; }
@keyframes askIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .door, .char-art, .char-name-tag, .doorway::before { transition: none; }
  .door-open .char-art, .door-stage.leaving, .door-stage.arriving { animation: none; }
  .knocking .door, .knocking .door-knocker,
  .reacting-correct .char-art, .reacting-wrong .char-art,
  .door-stage[data-react] .char-art,
  .stat-bag.bag-lost, .minus-one, .quiz-card .prompt, .quiz-card .options { animation: none; }
}

/* ---------- Tonight's night sign (start screen) + background street ---------- */
.street-block { margin: 6px 0 4px; }
.street-block.hidden { display: none; }
.street-sign {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
}
.street-sign span {
  font-family: 'Jolly Lodger', cursive;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--text);
  letter-spacing: 0.5px;
}
.street-sign small { color: var(--orange); font-weight: 600; margin-top: 2px; }

.night-picker {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin: 4px 0 12px;
}
.night-picker.hidden { display: none; }
.archive .rank-badge, .archive .rank-up-banner { display: none !important; }
.night-chip {
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 4px 2px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: var(--bg-darker);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.night-chip span { font-family: 'Jolly Lodger', cursive; font-size: 1.3rem; line-height: 1; }
.night-chip small { font-size: 0.7rem; color: var(--text-dim); margin-top: 2px; }
.night-chip:hover { border-color: var(--orange); }
.night-chip[aria-pressed="true"] { border-color: var(--orange); background: rgba(255,122,0,0.18); }
.night-chip:focus-visible { outline: 2px solid #ffd166; outline-offset: 2px; }
.street-status { color: var(--text-dim); text-align: center; font-size: 0.92rem; margin: 0; }

/* Background neighborhood: a distant row of house silhouettes along the bottom of the sky.
   Quiet by design: flat shapes barely lighter than the sky, all one size (they're all the same
   distance away), muted doors. Only lit windows and the next house's glow catch the eye. */
.bg-street {
  --silhouette: #1e1336;
  --silhouette-deep: #191030;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
  padding: 0 3vw 10px;
  pointer-events: none;
}
.bg-street::after { /* ground */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  background: var(--silhouette);
}
.house {
  position: relative;
  z-index: 1;
  width: clamp(26px, 4.2vw, 64px);
  flex: 0 0 auto;
}
.house svg { display: block; width: 100%; height: auto; }
.house-boss { width: clamp(32px, 5.2vw, 80px); }
/* Next house: faint, uneven candle flicker in the windows */
.window-flicker { animation: windowFlicker 5s ease-in-out infinite; }
@keyframes windowFlicker {
  0%, 100% { opacity: 0.28; }
  30% { opacity: 0.42; }
  45% { opacity: 0.33; }
  70% { opacity: 0.45; }
}
/* Trees stand between the houses and a step behind them */
.street-tree {
  position: relative;
  z-index: 0;
  width: clamp(34px, 5.5vw, 84px);
  margin: 0 calc(clamp(34px, 5.5vw, 84px) * -0.35);
  flex: 0 0 auto;
}
.street-tree svg { display: block; width: 100%; height: auto; }

/* End-screen haul: tonight's treats and tricks tumble in */
.end-haul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  font-size: clamp(1.2rem, 6.5vw, 1.7rem);
  margin: 4px 0 8px;
}
.haul-item {
  display: inline-block;
  animation: haulDrop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i) * 70ms);
}
@keyframes haulDrop {
  from { transform: translateY(-24px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .window-flicker, .haul-item { animation: none; }
}

.prompt { font-size: 1.05rem; line-height: 1.5; margin-bottom: 20px; }

.options { display: flex; flex-direction: column; gap: 10px; }

.option-btn {
  text-align: left;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.15);
  background: var(--bg-darker);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.option-btn:hover:not(:disabled) {
  border-color: var(--orange);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.3);
}
.option-btn:active:not(:disabled) { transform: translateY(0) scale(0.98); }
.option-btn.correct { background: rgba(47,182,161,0.25); border-color: var(--correct); animation: popIn 0.3s ease; }
.option-btn.wrong { background: rgba(224,69,111,0.25); border-color: var(--wrong); }
.option-btn:disabled { cursor: default; }
@keyframes popIn {
  0% { transform: scale(1); }
  40% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* ---------- Boss question styling (final slot) ---------- */
.quiz-card.boss {
  border-color: rgba(196,61,120,0.6);
  box-shadow: 0 0 40px rgba(196,61,120,0.45), 0 20px 60px rgba(0,0,0,0.4);
}
.door-stage.boss .char-glow {
  opacity: 0.85;
  animation: bossGlowPulse 1.6s ease-in-out infinite;
}
@keyframes bossGlowPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.12); }
}

.feedback { margin-top: 18px; }
.feedback.hidden { display: none; }
#feedback-title { font-weight: 700; margin-bottom: 6px; }
#feedback-why { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 6px; }

.end-card p { color: var(--text-dim); text-align: center; }
.rank-result { color: var(--orange) !important; font-weight: 700; font-size: 1.1rem; }

.signin-nudge { margin-top: 18px; }
.signin-nudge.hidden { display: none; }
.signin-nudge p { margin-bottom: 8px; }

.share-box { margin-top: 18px; }
.share-box textarea {
  width: 100%;
  resize: none;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.15);
  background: var(--bg-darker);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  margin-bottom: 8px;
}


/* ---------- Friend challenges ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.waiting .btn-challenge-start { display: none; }
/* No rank, rank-up or sign-in nudge in a friend challenge; the night stat is hidden in JS */
.challenge-mode .rank-badge, .challenge-mode .rank-up-banner, .challenge-mode #end-signin-nudge { display: none !important; }

.create-card, .challenge-card { text-align: center; }
.create-card { max-width: 520px; text-align: left; }
.create-card h2 { text-align: center; }
.create-intro, .challenge-sub { color: var(--text-dim); text-align: center; margin: 0 0 16px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field span { font-size: 0.85rem; color: var(--text-dim); }
.create-card input, .create-card textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--bg-darker);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 10px 12px;
  resize: vertical;
}
.create-card input:focus-visible, .create-card textarea:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.create-card [aria-invalid="true"] { border-color: var(--wrong); box-shadow: 0 0 0 2px rgba(224,69,111,0.35); }

.cq {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 12px 14px 14px;
  margin: 0 0 12px;
  background: rgba(255,255,255,0.03);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cq legend {
  font-family: 'Jolly Lodger', cursive;
  font-size: 1.25rem;
  color: var(--orange);
  padding: 0 6px;
}
.cq-answer { display: flex; gap: 8px; }
.tf-pill { flex: 1; position: relative; cursor: pointer; }
.tf-pill input { position: absolute; opacity: 0; pointer-events: none; }
.tf-pill span {
  display: block;
  text-align: center;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  font-weight: 700;
  transition: background 0.15s, border-color 0.15s;
}
.tf-pill input:checked + span { background: rgba(255,122,0,0.2); border-color: var(--orange); color: var(--text); }
.tf-pill input:focus-visible + span { outline: 2px solid #ffd166; outline-offset: 2px; }
.cq-answer:has([aria-invalid="true"]) .tf-pill span { border-color: var(--wrong); }
.cq-remove {
  align-self: flex-end;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--text-dim);
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
  text-decoration: underline;
}
.cq-remove:hover { color: var(--text); }
.create-error {
  color: #ffb3c4;
  background: rgba(224,69,111,0.15);
  border: 1px solid rgba(224,69,111,0.5);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 10px 0 0;
}
.create-ready { text-align: center; font-weight: 700; margin: 0 0 10px; }
.create-link { font-size: 0.85rem !important; color: var(--text-dim) !important; }
.btn-row { display: flex; gap: 8px; }
.btn-row > * { flex: 1; }
.link-row { display: flex; justify-content: center; gap: 20px; margin-top: 14px; }
.text-link {
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-dim);
  background: none;
  border: 0;
  padding: 6px 2px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.text-link:hover { color: var(--text); }
.text-link:focus-visible { outline: 2px solid #ffd166; outline-offset: 2px; border-radius: 4px; }

/* ---------- Mute button (every screen) ---------- */
.mute-btn {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: 12px;
  z-index: 60;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(18,10,34,0.8);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.mute-btn:hover { background: rgba(42,28,71,0.95); }
.mute-btn:focus-visible { outline: 2px solid #ffd166; outline-offset: 2px; }
.mute-btn .icon-muted { display: none; }
.mute-btn.is-muted { color: var(--text-dim); }
.mute-btn.is-muted .icon-sound { display: none; }
.mute-btn.is-muted .icon-muted { display: block; }
/* Phones: leave room so the button never sits on top of the quiz stats */
@media (max-width: 760px) {
  #app { padding-top: 44px; }
}

/* Challenge intro: the crew gathers around the card, like the start screen */
#screen-challenge .start-layout { flex-direction: column; align-items: center; }
#screen-challenge .challenge-card { position: relative; z-index: 1; margin: 0; }
.challenge-kicker { color: var(--orange); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.5px; margin: 0 0 6px; }
.challenge-title {
  font-family: 'Jolly Lodger', cursive;
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 1.05;
  color: var(--orange);
  text-shadow: 0 0 14px rgba(255,122,0,0.45);
  margin: 0 0 10px;
}

/* Phones: the name appears once, as a lit nameplate on top of the door frame
   (the tag under the doorway is dropped to save height) */
@media (max-width: 699px) {
  .char-name-tag { display: none; }
  .house-label {
    position: relative;
    z-index: 3;
    margin-bottom: -12px;
    padding: 3px 12px 2px;
    border-radius: 8px;
    font-size: 1.25rem;
    color: #1b1030;
    background: var(--char-color, var(--orange));
    text-shadow: none;
    box-shadow: 0 0 14px color-mix(in srgb, var(--char-color, var(--orange)) 55%, transparent), 0 4px 10px rgba(0,0,0,0.45);
  }
  .door-stage.boss .house-label { color: #0b1f10; }
}

/* "Who asks?" button on each challenge question */
.cq-asker {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 0.9rem;
  text-align: left;
  color: var(--text-dim);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  cursor: pointer;
}
.cq-asker:hover { border-color: var(--orange); }
.cq-asker:focus-visible { outline: 2px solid #ffd166; outline-offset: 2px; }
.cq-asker strong { color: var(--text); }
.cq-asker img { width: 34px; height: 34px; object-fit: cover; object-position: top; border-radius: 50%; background: rgba(255,255,255,0.08); }
.cq-asker-surprise { width: 34px; height: 34px; display: grid; place-items: center; font-size: 1.2rem; border-radius: 50%; background: rgba(255,255,255,0.08); }
.cq-asker-change { margin-left: auto; color: var(--orange); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Picker popup */
.asker-dialog {
  width: min(460px, calc(100vw - 32px));
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  background: var(--card-bg);
  color: var(--text);
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
}
.asker-dialog::backdrop { background: rgba(8,4,16,0.7); }
.asker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.asker-head h3 { margin: 0; font-family: 'Jolly Lodger', cursive; font-weight: 400; font-size: 1.7rem; color: var(--orange); }
.asker-close {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15); background: none; color: var(--text);
  font-size: 1rem; cursor: pointer;
}
.asker-close:focus-visible { outline: 2px solid #ffd166; outline-offset: 2px; }
.asker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.asker-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px 6px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-darker);
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
}
.asker-option img {
  width: 64px; height: 64px; object-fit: cover; object-position: top;
  border-radius: 50%;
  background: color-mix(in srgb, var(--char-color) 30%, transparent);
}
.asker-surprise { width: 64px; height: 64px; display: grid; place-items: center; font-size: 2rem; border-radius: 50%; background: rgba(255,122,0,0.2); }
.asker-option:hover { border-color: color-mix(in srgb, var(--char-color) 60%, transparent); }
.asker-option[aria-pressed="true"] { border-color: var(--char-color); background: color-mix(in srgb, var(--char-color) 18%, var(--bg-darker)); }
.asker-option:focus-visible { outline: 2px solid #ffd166; outline-offset: 2px; }

/* ---------- End screen ---------- */
.end-card { text-align: center; }
.end-title {
  font-family: 'Jolly Lodger', cursive;
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 1.05;
  color: var(--orange);
  text-shadow: 0 0 14px rgba(255,122,0,0.45);
  margin: 0 0 12px;
}
.end-result { margin: 0 0 16px; }
.end-big {
  margin: 0;
  font-family: 'Jolly Lodger', cursive;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--text);
}
.end-breakdown { margin: 4px 0 0; color: var(--text-dim) !important; }
/* After tonight's street (start screen): candy row, then the next-street countdown */
.tonight-haul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  font-size: 1.7rem;
  margin: 2px 0 4px;
}
.tonight-haul[hidden] { display: none; }
.start-next { margin: 14px 0 4px; text-align: center; }
.start-next[hidden] { display: none; }
.start-next-label { margin: 0 0 6px; font-size: 0.85rem; color: var(--text-dim); }
.start-next .countdown { margin-top: 0; }

/* Button with a small second line, e.g. "Dare to go again?" / "(just for fun)" */
.btn-sub { display: block; font-size: 0.78rem; font-weight: 600; opacity: 0.75; margin-top: 2px; }
.share-group {
  margin-top: 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  overflow: hidden;
}
.share-preview {
  margin: 0;
  padding: 12px 14px;
  text-align: left;
}
.share-preview figcaption { font-size: 0.75rem; color: var(--text-dim); margin-bottom: 4px; }
.share-preview p { white-space: pre-line; margin: 0; color: var(--text) !important; text-align: left !important; font-size: 0.92rem; line-height: 1.45; overflow-wrap: anywhere; }

/* Share button: attached to the bottom of the message block */
.share-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 13px;
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-radius: 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  background: var(--orange);
  color: #1b1030;
  cursor: pointer;
}
/* Score picture above the message; Share and Save picture side by side under it */
/* Only the neighbor's strip of the picture shows (the score is already on the screen);
   the whole picture opens in .card-dialog */
.share-peek {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: none;
  cursor: zoom-in;
}
.share-peek[hidden] { display: none; }
.share-peek img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1080 / 405;
  object-fit: cover;
  object-position: 50% 24.6%; /* rows 232-637 of 1350: under the title, above the score panel */
}
.share-peek-hint {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(18,10,34,0.8);
  color: var(--text);
  font-family: 'Fredoka', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
}
.share-peek:hover .share-peek-hint { background: var(--orange); color: #1b1030; }
.share-peek:focus-visible { outline: 2px solid #ffd166; outline-offset: 2px; }

.card-dialog {
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: none;
  overflow: visible;
}
.card-dialog::backdrop { background: rgba(8,4,16,0.85); }
.card-dialog img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(92vw, 540px);
  max-height: 76vh;
  margin: 0 auto;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.card-dialog-actions { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.card-dialog-actions a { width: auto; margin-top: 0; padding: 10px 16px; text-align: center; text-decoration: none; }
.card-dialog-actions a[hidden] { display: none; }
/* End screen: how the player did against the friend whose score link they opened */
.end-card .end-rival { margin: 8px 0 0; color: var(--orange); font-weight: 700; }
.end-rival[hidden] { display: none; }
/* Start screen, opened from a friend's score link: their score, as the thing to beat */
#screen-start.dared .tagline.returning-line { color: var(--text); font-weight: 600; }
.card-dialog .asker-close { position: absolute; top: 8px; right: 8px; background: rgba(18,10,34,0.8); }
.share-actions { display: flex; }
.share-actions .share-btn { flex: 1; }
.share-actions .share-save {
  flex: 0 0 auto;
  width: auto;
  padding-inline: 16px;
  border-left: 1px solid rgba(255,255,255,0.1);
  text-decoration: none;
}
.share-save[hidden] { display: none; }
.share-btn:hover { filter: brightness(1.1); }
.share-btn:focus-visible { outline: 2px solid #ffd166; outline-offset: -3px; }
.share-btn.is-secondary { background: transparent; color: var(--text); }
.share-btn.is-secondary:hover { background: rgba(255,255,255,0.06); filter: none; }

/* Rank bubble above the bar (end screen) */
.rank-bar-wrap { position: relative; margin-top: 32px; }
.rank-bar-wrap .rank-bar { margin-top: 0; }
.rank-tip {
  position: absolute;
  bottom: calc(100% + 7px);
  left: var(--tip-x, 50%);
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--rank-color, var(--orange));
  color: #1b1030;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
/* Small arrow on the bar itself, pointing at where the fill ends (the bubble may be nudged
   sideways to stay inside the badge, the arrow never is) */
.rank-bar-wrap::before {
  content: "";
  position: absolute;
  bottom: calc(100% - 2px);
  left: var(--arrow-x, 50%);
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--rank-color, var(--orange));
}
.rank-tip:empty { display: none; }

/* Quiz: the answer they didn't pick folds away */
.option-btn.dismissed { display: none; }

/* End screen rhythm: title / score (+ sign-in) / rank / share / links, 22px apart */
.end-card .end-result { margin: 22px 0 0; }
.end-card .rank-up-banner { margin: 22px 0 0; }
.end-rank-row {
  margin-top: 22px;
  padding: 0;
  background: none;
  border: 0;
}
.end-rank-row .rank-icon { width: 44px; height: 44px; }
.end-card .share-group { margin-top: 22px; }
.end-card .share-preview figcaption { display: none; }
.end-card .link-row { margin-top: 16px; }

.street-sign small:empty { display: none; }
.tonight-haul { margin: 4px 0 0; }

/* Tutorela's logo: top-left of every screen, a quiet pill that matches the mute button.
   Not sticky: it scrolls away with the page, so it never slides over the characters. */
.brand-mark {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 12px;
  z-index: 2;
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(18,10,34,0.8); /* stays readable over the moon on phones */
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.brand-mark img { display: block; width: 86px; height: auto; }
/* Phones: the moon lives in the top-left corner, so the logo moves to the top center */
@media (max-width: 760px) {
  .brand-mark { left: 50%; transform: translateX(-50%); }
}
.brand-mark:hover { opacity: 1; }
.brand-mark:focus-visible { opacity: 1; outline: 2px solid #ffd166; outline-offset: 2px; }
/* The start screen, the challenge intro and the end screen carry the full credit in their card instead */
body:has(#screen-start.active) .brand-mark,
body:has(#screen-challenge.active) .brand-mark,
body:has(#screen-end.active) .brand-mark { display: none; }
/* "A Halloween game by TUTORELA, The US tutoring marketplace": at the bottom of those three
   cards. The whole block links to tutorela.com. */
.brand-credit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.1);
  text-decoration: none;
  color: var(--text-dim);
  font-size: 0.8rem;
  line-height: 1.2;
}
.brand-logo { display: block; width: 104px; height: auto; }
.brand-desc { color: var(--text); font-weight: 500; }
.brand-credit:hover .brand-desc { text-decoration: underline; }
.brand-credit:focus-visible { outline: 2px solid #ffd166; outline-offset: 4px; border-radius: 6px; }

/* ---------- Haunted house: snatched inside, cauldron room, potions ---------- */

/* The haunted door opens onto darkness: no neighbor, just two blinking eyes */
.boss-eyes { display: none; }
.door-stage.boss .char-art, .door-stage.boss .char-glow { display: none; }
.door-stage.boss .doorway { background: radial-gradient(ellipse at 50% 40%, #12301a 0%, #07040d 70%); }
.door-stage.boss .boss-eyes {
  display: flex;
  gap: 14px;
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translateX(-50%);
}
.boss-eyes span {
  width: 16px;
  height: 9px;
  border-radius: 50%;
  background: #b6ff7a;
  box-shadow: 0 0 10px 3px rgba(93,251,132,0.7);
  opacity: 0;
}
.door-stage.boss.door-open .boss-eyes span { animation: eyesBlink 1.6s ease-in-out 0.25s forwards; }
@keyframes eyesBlink {
  0% { opacity: 0; transform: scaleY(0.2); }
  20%, 45% { opacity: 1; transform: scaleY(1); }
  52% { transform: scaleY(0.1); }
  60%, 100% { opacity: 1; transform: scaleY(1); }
}

/* The snatch: the view lunges into the doorway, shakes, and goes black */
#screen-quiz.snatching .door-stage { animation: snatchZoom 0.6s cubic-bezier(0.5, 0, 0.75, 0) forwards; z-index: 30; }
#screen-quiz.snatching .quiz-card { transition: opacity 0.2s ease; opacity: 0; visibility: hidden; }
@keyframes snatchZoom {
  0% { transform: scale(1) translateX(0); }
  15% { transform: scale(1.06) translateX(-4px); }
  30% { transform: scale(1.12) translateX(4px); }
  100% { transform: scale(4) translateX(0); opacity: 0.6; }
}
.snatch-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 42%, rgba(61,220,92,0.22) 0%, #05020a 55%);
  transition: opacity 0.5s ease-out;
}
.snatch-overlay.on { opacity: 1; transition: opacity 0.45s ease-in; }
/* Smoke puff on the way out */
.snatch-overlay.puff {
  opacity: 1;
  background: radial-gradient(circle at 50% 50%, rgba(170,255,190,0.55) 0%, rgba(61,220,92,0.35) 30%, rgba(5,2,10,0.92) 70%);
  transition: opacity 0.3s ease-in;
}

/* Cauldron room replaces the door stage */
.cauldron-wrap { display: none; }
#screen-quiz.in-cauldron .door-stage { display: none; }
#screen-quiz.in-cauldron .cauldron-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 340px;
  animation: roomIn 0.5s ease-out;
}
@keyframes roomIn { from { opacity: 0; transform: scale(1.06); } }
.cauldron-label { --char-color: #5dfb84; color: #5dfb84; }
.cauldron-stage {
  position: relative;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 4 / 5;
  margin-top: -8px;
}
@media (min-width: 700px) {
  #screen-quiz.in-cauldron .cauldron-wrap { flex: 0 0 340px; }
  .cauldron-stage { max-width: 280px; }
}
@media (max-width: 699px) {
  .cauldron-label { color: #0b1f10; }
  /* smaller scene on phones so the potions fit on screen under the question */
  .cauldron-stage { max-width: 190px; }
}

/* The question, brewed: a cloud of the cauldron's own green vapor, fed by the steam below.
   The outline is a rounded body plus puffs along its edges; each puff swells and shrinks at its
   own pace, so the cloud keeps slowly changing shape instead of being a static bubble. */
.brew-cloud {
  position: relative;
  z-index: 3;
  width: 100%;
  margin: 48px 0 26px; /* puffs breathe up to ~36px above the body; keep clear of the nameplate */
  padding: 14px 22px;
  border-radius: 30px;
  background: #b4f6c4;
  color: #0f2a16;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  text-align: center;
  filter: drop-shadow(0 0 14px rgba(93,251,132,0.55)); /* glows around body and puffs as one shape */
}
.brew-cloud p { margin: 0; position: relative; z-index: 1; }
.brew-cloud .puff {
  position: absolute;
  z-index: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #b4f6c4;
  animation: puffBreathe 4s ease-in-out infinite;
}
.brew-cloud .p1 { width: 20%; left: 6%;  top: -22px; animation-duration: 3.6s; }
.brew-cloud .p2 { width: 25%; left: 30%; top: -30px; animation-duration: 4.4s; animation-delay: -1s; }
.brew-cloud .p3 { width: 20%; left: 60%; top: -22px; animation-duration: 3.9s; animation-delay: -2s; }
.brew-cloud .p4 { width: 14%; right: -3%; top: 18%;  animation-duration: 4.8s; animation-delay: -0.5s; }
.brew-cloud .p5 { width: 17%; right: 14%; bottom: -18px; animation-duration: 4.1s; animation-delay: -1.6s; }
.brew-cloud .p6 { width: 19%; left: 24%; bottom: -20px; animation-duration: 5s; animation-delay: -2.4s; }
.brew-cloud .p7 { width: 13%; left: -3%; top: 26%;  animation-duration: 3.7s; animation-delay: -3s; }
@keyframes puffBreathe {
  0%, 100% { transform: scale(1) translate(0, 0); }
  35% { transform: scale(1.12) translate(2%, -3%); }
  70% { transform: scale(0.92) translate(-2%, 2%); }
}
#screen-quiz.in-cauldron .brew-cloud { opacity: 0; }
#screen-quiz.in-cauldron:not(.card-wait) .brew-cloud {
  animation:
    cloudRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    cloudDrift 5s ease-in-out 0.7s infinite;
}
@keyframes cloudRise {
  from { opacity: 0; transform: translateY(60px) scale(0.6); }
  to { opacity: 1; transform: none; }
}
@keyframes cloudDrift {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(3px, -4px); }
  66% { transform: translate(-3px, -2px); }
}


/* Inside: no sky, moon or street; a dark stone wall lit green from the cauldron */
.sky::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  background:
    radial-gradient(ellipse at 50% 75%, rgba(61,220,92,0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,0.75) 100%),
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(0,0,0,0.35) 38px 41px),
    repeating-linear-gradient(90deg, transparent 0 78px, rgba(0,0,0,0.3) 78px 81px),
    linear-gradient(#1a1424, #120d1a);
}
body.indoors .sky::after { opacity: 1; }
body.indoors .moon, body.indoors .stars, body.indoors .cloud, body.indoors .bg-street,
body.indoors .ghost, body.indoors .ghost-shadow, body.indoors .bat-swarm, body.indoors .spider-wrap { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  #screen-quiz.in-cauldron .cauldron-wrap { animation: none; }
  #screen-quiz.in-cauldron:not(.card-wait) .brew-cloud { animation: none; opacity: 1; }
  .brew-cloud .puff { animation: none; }
}

.cauldron-room-glow {
  position: absolute;
  left: 50%;
  bottom: 18%;
  width: 120%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(61,220,92,0.35) 0%, transparent 60%);
  filter: blur(8px);
  animation: cauldronGlow 2.4s ease-in-out infinite;
}
@keyframes cauldronGlow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
/* Ela stands behind the pot, lit green from below */
.cauldron-ela {
  position: absolute;
  left: 50%;
  bottom: 33%;
  width: 64%;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  animation: elaStir 2.2s ease-in-out infinite;
}
/* She stirs: a gentle sway around her waist, hidden behind the cauldron rim */
@keyframes elaStir {
  0%, 100% { transform: translateX(-52%) rotate(-2.5deg); }
  50% { transform: translateX(-48%) rotate(2.5deg); }
}
.big-cauldron { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; }
.big-cauldron { z-index: 2; }
/* Steam rising out of the pot in two columns (either side of Ela), up into the question cloud */
.cauldron-steam { position: absolute; left: 0; right: 0; bottom: 40%; top: -34px; z-index: 0; pointer-events: none; }
.cauldron-steam span {
  position: absolute;
  bottom: 0;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(140,255,170,0.55), rgba(61,220,92,0.15) 55%, transparent 72%);
  filter: blur(5px);
  animation: steamRise 2.6s ease-in infinite;
}
.cauldron-steam span:nth-child(odd) { left: 2%; }
.cauldron-steam span:nth-child(even) { right: 2%; }
.cauldron-steam span:nth-child(3), .cauldron-steam span:nth-child(4) { animation-delay: 0.85s; }
.cauldron-steam span:nth-child(5), .cauldron-steam span:nth-child(6) { animation-delay: 1.7s; }
@keyframes steamRise {
  0% { transform: translateY(0) scale(0.5); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-260%) scale(1.3); opacity: 0.2; }
}
.cauldron-ela { z-index: 1; }
/* Potions: two bottles with paper tags */
.options.potions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
/* stay hidden until Ela asks (the layout rule above must not override hiding) */
.options.potions.hidden { display: none; }
.potion-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px 8px;
  font-family: inherit;
  color: inherit;
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, opacity 0.3s;
}
.potion-btn:hover:not(:disabled) { transform: translateY(-3px); border-color: rgba(93,251,132,0.6); }
.potion-btn:focus-visible { outline: 2px solid #ffd166; outline-offset: 2px; }
.potion-bottle { width: 46px; height: 62px; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.45)); }
.potion-btn:hover:not(:disabled) .potion-bottle { animation: potionWobble 0.5s ease-in-out; }
@keyframes potionWobble { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
.potion-tag {
  display: block;
  width: 100%;
  padding: 7px 8px;
  border-radius: 6px;
  background: #efe3c4;
  color: #2a1c10;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  transform: rotate(-1.5deg);
  box-shadow: 0 3px 8px rgba(0,0,0,0.35);
}
.potion-1 .potion-tag { transform: rotate(1.5deg); }
.potion-btn:disabled { cursor: default; }
/* After choosing: the other potion fades out (keeping the layout), the chosen one is "poured" */
.potion-btn.dismissed { display: flex; opacity: 0; pointer-events: none; }
.potion-btn.poured .potion-bottle { opacity: 0.25; }
.potion-btn.correct { border-color: var(--correct); background: rgba(47,182,161,0.15); }
.potion-btn.wrong { border-color: var(--wrong); background: rgba(224,69,111,0.15); }
.flying-potion { position: fixed; z-index: 50; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  #screen-quiz.snatching .door-stage, #screen-quiz.in-cauldron .cauldron-stage,
  .cauldron-room-glow, .cauldron-ela, .cauldron-steam span, .door-stage.boss.door-open .boss-eyes span,
  .potion-btn:hover .potion-bottle, .brew-candy { animation: none; }
  .door-stage.boss .boss-eyes span { opacity: 1; }
}

/* Haunted house: the card stays hidden from the snatch until the cauldron room is fully in view */
#screen-quiz.card-wait .quiz-card { opacity: 0; visibility: hidden; }
#screen-quiz.card-wait .brew-cloud { visibility: hidden; }
#screen-quiz.in-cauldron .quiz-card { transition: opacity 0.35s ease; }

/* ---------- Haunted house: the big poof and the result ---------- */
/* A cloud bursting out of the cauldron (at --px/--py) until it covers the screen, then clearing */
.poof {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  opacity: 0;
  clip-path: circle(0 at var(--px, 50%) var(--py, 50%));
}
/* Deep, smoky greens (not glowing): a hint of gold for right, murky for wrong */
.poof-right {
  background:
    radial-gradient(circle at var(--px) var(--py), rgb(150,196,120) 0%, rgb(86,152,92) 30%, rgb(40,94,52) 62%, rgb(16,40,23) 100%);
}
.poof-wrong {
  background:
    radial-gradient(circle at var(--px) var(--py), rgb(98,136,92) 0%, rgb(52,94,58) 32%, rgb(24,52,29) 65%, rgb(9,22,12) 100%);
}
.poof.grow {
  opacity: 1;
  clip-path: circle(150% at var(--px, 50%) var(--py, 50%));
  transition: clip-path 0.45s cubic-bezier(0.3, 0, 0.2, 1);
}
/* Clearing: the vapor thins out from the middle and drifts apart (a widening hole, blur, fade) */
@property --hole {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
.poof.grow.clear {
  --hole: 150%;
  opacity: 0;
  filter: blur(10px);
  transform: scale(1.06);
  -webkit-mask-image: radial-gradient(circle at var(--px, 50%) var(--py, 50%), transparent calc(var(--hole) - 30%), #000 var(--hole));
  mask-image: radial-gradient(circle at var(--px, 50%) var(--py, 50%), transparent calc(var(--hole) - 30%), #000 var(--hole));
  transition: --hole 0.5s cubic-bezier(0.4, 0, 0.6, 1), opacity 0.5s ease-in, filter 0.5s ease-out, transform 0.5s ease-out;
}
.poof.grow:not(.clear) {
  -webkit-mask-image: radial-gradient(circle at var(--px, 50%) var(--py, 50%), transparent calc(var(--hole) - 30%), #000 var(--hole));
  mask-image: radial-gradient(circle at var(--px, 50%) var(--py, 50%), transparent calc(var(--hole) - 30%), #000 var(--hole));
}

/* After the poof: Ela, the cauldron and the cloud are gone */
#screen-quiz.brewed .brew-cloud, #screen-quiz.brewed .cauldron-stage { display: none; }
.brew-result {
  display: flex;
  justify-content: center;
  margin: 18px 0 6px;
}
.brew-result[hidden] { display: none; }
/* Side by side on wide screens: the candy sits level with the middle of the card, not its foot */
@media (min-width: 700px) {
  #screen-quiz.brewed .quiz-stage { align-items: center; }
  #screen-quiz.brewed .brew-result { margin: 18px 0; }
}
.brew-candy {
  font-size: 5.5rem;
  line-height: 1;
  filter: drop-shadow(0 0 18px rgba(255,209,102,0.8)) drop-shadow(0 0 40px rgba(93,251,132,0.5));
  animation: candyPop 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both, candyFloat 3s ease-in-out 0.8s infinite;
}
@keyframes candyPop {
  from { transform: scale(0.2) rotate(-30deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes candyFloat {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-8px) rotate(4deg); }
}

/* "Remind me" under tomorrow's countdown: quieter than "Dare to go again?" */
.btn-remind-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  margin-top: 10px;
  padding: 8px 16px;
  font-size: 0.9rem;
}
.start-next .remind-options { text-align: left; }

/* ---------- Halloween notice pop-up ---------- */
.notice-dialog {
  width: min(360px, calc(100vw - 40px));
  padding: 26px 24px 22px;
  border: 1px solid rgba(255,122,0,0.45);
  border-radius: 20px;
  background: radial-gradient(circle at 50% 0%, #3a1f52 0%, var(--card-bg) 60%);
  color: var(--text);
  text-align: center;
  box-shadow: 0 0 40px rgba(255,122,0,0.25), 0 24px 60px rgba(0,0,0,0.6);
}
.notice-dialog[open] { animation: noticeIn 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes noticeIn { from { opacity: 0; transform: translateY(16px) scale(0.94); } }
.notice-dialog::backdrop { background: rgba(8,4,16,0.65); }
.notice-emoji { margin: 0; font-size: 3rem; line-height: 1; }
.notice-title {
  margin: 10px 0 6px;
  font-family: 'Jolly Lodger', cursive;
  font-weight: 400;
  font-size: 2.3rem;
  line-height: 1.05;
  color: var(--orange);
  text-shadow: 0 0 14px rgba(255,122,0,0.45);
}
.notice-text { margin: 0 0 6px; color: var(--text-dim); line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .notice-dialog[open] { animation: none; } }

/* ---------- Closed test version (body.preview, set by app.js only in the test build) ---------- */
.test-note {
  margin: 12px 0;
  padding: 9px 12px;
  border: 1px dashed rgba(255,209,102,0.55);
  border-radius: 12px;
  background: rgba(255,209,102,0.08);
  color: #ffd166;
  font-size: 0.86rem;
  line-height: 1.4;
  text-align: center;
}
/* Nothing in the test can send or save its link or picture */
.preview #btn-end-share, .preview .share-save, .preview .card-dialog-actions,
.preview #create-link, .preview #create-result .btn-row { display: none !important; }