/* Standalone styles for halloween.html. Geometry is shared with the jar orbit. */
.haunt-v2 {
  --cream: #fff9f0;
  --copper: #aa642d;
  --ink: #493725;
  --paper: #f7f3eb;
  --pot-width: clamp(340px, 42vw, 528px);
  --jar-width: 189.6px;
  --jar-height: 285.6px;
  --jar-glass-haze: .12;
  --orbit-step: 196.8;
  --orbit-angle: .43;
  --orbit-depth: 116;
  position: relative;
  width: auto;
  max-width: none;
  min-height: 100vh;
  margin-inline: calc(50% - 50vw);
  padding: 0 0 64px;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, sans-serif;
}
.haunt-v2 *, .haunt-v2 *::before, .haunt-v2 *::after { box-sizing: border-box; }
.haunt-v2 [hidden] { display: none !important; }
.haunt-v2 button { font: inherit; cursor: pointer; }
.haunt-v2 button:disabled { cursor: default; }
.haunt-v2 button:focus-visible, .haunt-v2 a:focus-visible, .haunt-v2 [tabindex]:focus-visible { outline: 3px solid #e8b56c; outline-offset: 4px; }

/* Banner and instructions. */
.haunt-season-banner { position: relative; display: grid; grid-template-areas: "banner"; height: clamp(360px, 33.333vw, 620px); isolation: isolate; overflow: hidden; background: #f4eee3; }
.haunt-season-banner > img { grid-area: banner; display: block; width: 100%; height: 100%; object-fit: cover; }
.haunt-v2-hero-inner { grid-area: banner; z-index: 1; align-self: center; width: min(100%, 1400px); margin: auto; padding: 28px clamp(22px, 4vw, 60px); text-align: left; }
.haunt-v2 .haunt-heading { max-width: 47%; margin: 0; text-align: left; }
.haunt-v2 .haunt-heading h1 { margin: 0 0 12px; color: var(--ink); font: 400 clamp(36px, 3.8vw, 54px)/1.08 Georgia, serif; letter-spacing: -.04em; }
.haunt-v2 .haunt-heading h1 em { color: #a9602d; font-weight: 400; letter-spacing: -.055em; }
.haunt-heading > p { max-width: 450px; margin: 0 0 18px; color: #594a3a; font: 15px/1.45 Arial, sans-serif; }
.haunt-v2-enter { display: inline-flex; align-items: center; justify-content: space-between; gap: 25px; min-width: 230px; padding: 12px 17px; border: 1px solid var(--copper); border-radius: 5px; background: var(--copper); color: #fff !important; text-decoration: none !important; font: 700 14px/1 Arial, sans-serif; transition: background .2s; }
.haunt-v2-enter:hover { background: #8e4c23; }
.haunt-v2-enter span { font-size: 21px; }
.haunt-v2-ritual { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 max(26px, calc((100vw - 1280px) / 2)); background: #fffaf3; border-block: 1px solid #e6d8c9; }
.haunt-v2-ritual > div { display: grid; grid-template-columns: 40px 1fr; column-gap: 13px; align-content: center; min-height: 72px; padding: 11px clamp(13px, 2.2vw, 36px); border-right: 1px solid #ded0c1; }
.haunt-v2-ritual > div:last-child { border: 0; }
.haunt-v2-ritual span { grid-row: span 2; align-self: center; color: #ad642e; font: italic 27px Georgia, serif; }
.haunt-v2-ritual strong { color: #303b40; font: 700 14px/1.25 Arial, sans-serif; }
.haunt-v2-ritual small { margin-top: 5px; color: #6e706e; font: 12px/1.25 Arial, sans-serif; }
.haunt-v2-brewroom { padding: 26px clamp(16px, 4vw, 60px) 0; }
.haunt-section-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid #cdb7a0; }
.haunt-v2 .haunt-section-head h2 { margin: 0; color: var(--ink); font: 400 24px/1.2 Georgia, serif; letter-spacing: -.025em; }
.haunt-section-head > span { color: #6d665f; font: 12px/1.35 Arial, sans-serif; text-align: right; }

/* Previous blends. */
.haunt-spellbook { position: relative; max-width: 1280px; margin: 0 auto 30px; padding: 18px; border: 1px solid #e1d2bf; border-radius: 12px; background: #fffaf3; }
.haunt-saved-list { display: flex; gap: 12px; overflow-x: auto; padding: 3px 3px 10px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #ba8b5e #ede0cf; }
.haunt-saved-card { display: flex; flex: 0 0 164px; flex-direction: column; gap: 5px; min-width: 0; padding: 9px; border: 1px solid #dacfc2; border-radius: 7px; background: #fffdfa; color: #303b40; text-align: left; scroll-snap-align: start; }
.haunt-saved-card:hover { background: #fff6ed; border-color: var(--copper); }
.haunt-saved-card img, .haunt-saved-placeholder { width: 100%; height: 72px; object-fit: cover; border-radius: 4px; }
.haunt-saved-placeholder { display: grid; place-items: center; background: radial-gradient(circle, #76547c, #3c2946); color: #f5c481; font-size: 40px; }
.haunt-saved-card strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 34px; font: 600 13px/1.3 Arial, sans-serif; }
.haunt-saved-card span, .haunt-saved-card small { color: #766c64; font: 11px/1.3 Arial, sans-serif; }
.haunt-saved-empty { flex: 1; min-width: 0; margin: 0; padding: 14px; border: 1px dashed #c7b9a9; border-radius: 6px; background: #fbf5eb; color: #57483e; font: 14px/1.5 Arial, sans-serif; }
.haunt-load-more { display: block; margin: 12px auto 0; padding: 8px 16px; border: 1px solid var(--copper); border-radius: 5px; background: var(--copper); color: #fff; font-size: 12px; }
.haunt-load-more:hover { background: #8b4c26; }
.haunt-load-more:disabled { opacity: .5; }

/* Shared scene. The pot is layer 40; each jar's depth is set by JavaScript. */
.haunt-orbit-scene { position: relative; width: 100%; max-width: 1280px; margin: auto; isolation: isolate; overflow: hidden; border: 1px solid #a47750; border-radius: 20px; background: radial-gradient(ellipse at 50% 32%, #73513b, #3d2d28 78%); box-shadow: 0 12px 30px #795b3226, inset 0 0 0 5px #3d2d28, inset 0 0 0 6px #d5a36b44; }
.haunt-workbench { position: relative; width: 100%; padding: 94px 24px 24px; color: #fff6e7; text-align: center; }
.haunt-autumn-accent { display: none; }
.haunt-cauldron-stage { position: relative; z-index: 40; width: min(var(--pot-width), 100%); aspect-ratio: 330 / 283; margin: 0 auto 88px; pointer-events: none; }
.haunt-cauldron { position: relative; width: 330px; height: 283px; transform: scale(var(--cauldron-scale, 1.6)); transform-origin: top left; }
.haunt-v2-cauldron-image { position: absolute; z-index: 1; top: 9px; left: 0; width: 100%; height: auto; filter: drop-shadow(0 18px 15px #0b080bd9); }
.haunt-rim-back, .haunt-cauldron-front { display: none; }
.haunt-potion { position: absolute; z-index: 2; top: 48px; left: 22%; right: 22%; height: 28px; border-radius: 50%; background: radial-gradient(ellipse at 45% 38%, #eec179, #b66a2e 61%, #75401e); box-shadow: 0 0 17px #eeae6577, inset 0 0 8px #fff3bb; opacity: .94; }
/* Transparent image effects rise from the tea, underneath the stirring spoon. */
.haunt-cauldron-effects { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.haunt-cauldron-effects img { position: absolute; display: block; object-fit: contain; opacity: 0; pointer-events: none; }
.haunt-steam { top: -31px; width: 60px; height: 96px; transform-origin: center bottom; animation: haunt-steam-rise var(--steam-duration, 5s) ease-in-out infinite; }
.steam-one { left: 28%; width: 52px; height: 83px; top: -18px; --steam-duration: 5.4s; animation-delay: -1.8s; }
.steam-two { left: 38%; width: 58px; height: 93px; top: -28px; --steam-duration: 6.2s; animation-delay: -3.7s; }
.steam-three { left: 48%; --steam-duration: 5s; animation-delay: -.4s; }
.steam-four { left: 57%; width: 50px; height: 80px; top: -15px; --steam-duration: 5.8s; animation-delay: -2.6s; }
.steam-five { left: 64%; width: 44px; height: 70px; top: -5px; --steam-duration: 6.6s; animation-delay: -4.9s; }
.haunt-fairy-dust { top: 19px; width: 78px; height: 65px; }
.dust-one { left: 28%; --dust-drift: -14px; animation-delay: -.7s !important; }
.dust-two { left: 51%; --dust-drift: 18px; animation-delay: -2.2s !important; }
.haunt-sparkle { top: 44px; width: 16px; height: 16px; }
.sparkle-one { left: 33%; --sparkle-drift: -9px; animation-delay: -.3s !important; }
.sparkle-two { left: 47%; top: 36px; width: 12px; height: 12px; --sparkle-drift: 6px; animation-delay: -1.4s !important; }
.sparkle-three { left: 59%; --sparkle-drift: 12px; animation-delay: -2.5s !important; }
.sparkle-four { left: 66%; top: 38px; width: 10px; height: 10px; --sparkle-drift: 7px; animation-delay: -1.9s !important; }
/* The spoon pivots at its submerged tip; the whole tip follows an oval. */
.haunt-stir-wrap { position: absolute; z-index: 5; left: 50%; top: -24px; width: 12px; height: 88px; transform: translateX(-50%); opacity: 0; }
.haunt-stir-stick { position: absolute; inset: 0; border: 1px solid #66412a; border-radius: 6px 6px 5px 5px; background: linear-gradient(90deg, #513421, #be925e 34%, #91613d 65%, #513421); box-shadow: inset 1px 0 1px #edc58b66; transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(#000 0 90%, transparent 100%); mask-image: linear-gradient(#000 0 90%, transparent 100%); }
.haunt-stir-stick::before { content: ""; position: absolute; left: 1px; right: 1px; top: 1px; height: 4px; border-radius: 50%; background: #cda06d; }
/* Ingredient orbit. Transparent buttons leave only the jar and its label visible. */
.haunt-shelf { position: absolute; inset: 0 0 auto; height: calc(var(--pot-width) * .86 + 180px); }
.haunt-shelf .haunt-section-head { position: absolute; left: 24px; right: 24px; top: 22px; margin: 0; padding: 0; border: 0; }
.haunt-v2 .haunt-shelf h2 { color: #fff0d7; font-size: 25px; }
.haunt-shelf-tools { display: flex; align-items: center; gap: 16px; }
.haunt-shelf-tools > span { max-width: 260px; color: #e8c9a2; font: 12px/1.35 Arial, sans-serif; text-align: right; }
.haunt-shelf-arrows { display: flex; gap: 6px; }
.haunt-shelf-arrows button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid #dbb984; border-radius: 50%; background: #fff4e2; color: #8b572c; font: 18px Arial, sans-serif; }
.haunt-shelf-arrows button:hover { background: #f2e0c9; }
.haunt-jars { position: absolute; top: 72px; left: 0; right: 0; height: calc(var(--pot-width) * .86 + 125px); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
.haunt-jars::-webkit-scrollbar { display: none; }
.haunt-orbit-track { position: relative; height: 100%; min-width: 100%; }
.haunt-jar { position: absolute; display: flex; flex-direction: column; align-items: center; width: var(--jar-width); height: var(--jar-height); min-width: 0; margin: 0; padding: 6px 6px 9px; border: 0; border-radius: 0; background: none; color: #fff6e7; text-align: center; transform-origin: center; will-change: transform, opacity; }
.haunt-jar:disabled { cursor: default; }
.haunt-jar-glass { position: relative; display: grid; place-items: center; flex: 1; min-height: 0; width: 65%; margin: 12px auto 7px; border: 2px solid #c7c4bb; border-radius: 9px 9px 15px 15px; background: linear-gradient(100deg, #f8f6e840, #a9c4b026 20%, #e8f4e437 45%, #657b7040 80%, #fff8dc5c); box-shadow: inset 3px 0 6px #ffffff5c, inset -3px 0 5px #17222044, 0 5px 8px #0b080a55; }
.haunt-jar-glass::before { content: ""; position: absolute; top: -11px; left: -8px; width: calc(100% + 16px); height: 11px; border: 1px solid #5c3224; border-radius: 3px 3px 1px 1px; background: linear-gradient(#e7af78, #9b5732 55%, #6e3d28); box-shadow: 0 2px 3px #130b0b8a; }
/* A light glass treatment, confined to the body so lids and labels stay crisp.
   Reflections remain visible when backdrop filtering is unavailable. */
.haunt-jar-glass::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: linear-gradient(100deg, #ffffff24, transparent 9%, #ffffff14 14%, transparent 24%, transparent 76%, #ffffff18 91%, #3825170a), rgb(255 255 255 / var(--jar-glass-haze)); box-shadow: inset 1px 0 1px #ffffff3d, inset -1px 0 1px #ffffff26, inset 0 -1px 2px #ffffff1a; -webkit-backdrop-filter: blur(.6px) saturate(1.04); backdrop-filter: blur(.6px) saturate(1.04); pointer-events: none; }
.haunt-jar-illustrated .haunt-jar-glass { width: 100%; margin: 0 auto 6px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.haunt-jar-illustrated .haunt-jar-glass::before { display: none; }
.haunt-jar-illustrated .haunt-jar-glass::after { inset: auto; top: 55%; left: 50%; width: 60%; aspect-ratio: .84; max-height: 78%; border-radius: 3px 3px 9px 9px; transform: translate(-50%, -50%); }
.haunt-jar-art { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 7px 4px #100a0c8c); }
.haunt-jar-icon { width: min(44px, 70%); height: auto; max-height: 55%; fill: none; stroke: #edc785; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.haunt-jar-icon .fill { fill: #edc785; stroke: none; }
.haunt-jar-illustrated .haunt-jar-icon { position: absolute; width: 36px; height: 36px; opacity: 0; }
.haunt-jar-name { position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: 100%; min-height: 36px; padding: 4px; border: 1px solid #9b7352; border-radius: 3px; background: #f4e7cc; box-shadow: 0 2px 4px #140b0a80; color: #342723; font: 700 12px/1.15 Georgia, serif; overflow-wrap: anywhere; }
.haunt-jar-flavor { flex: none; width: 100%; min-height: 28px; margin-top: 5px; color: #edcfaa; font: 11px/1.25 Arial, sans-serif; }
.haunt-jar.chosen .haunt-jar-name { background: #ffd58f; border-color: #e5b569; }
.haunt-jar.chosen .haunt-jar-glass, .haunt-jar:hover:not(:disabled) .haunt-jar-glass { filter: drop-shadow(0 0 7px #efbe7780); }
.haunt-shelf.is-locked .haunt-jars { pointer-events: none; }
.haunt-shelf-lock { position: absolute; z-index: 90; top: calc(var(--pot-width) * .86 + 25px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: min(90%, 360px); padding: 12px 16px; border: 1px solid #c98848; border-radius: 8px; background: #fff1dc; box-shadow: 0 8px 25px #39251255; color: #503918; pointer-events: none; }
.haunt-lock-mark { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 50%; background: #e2b077; font-size: 20px; }
.haunt-shelf-lock strong { display: block; font-size: 15px; }
.haunt-shelf-lock span:last-child { display: block; margin-top: 3px; font: 12px/1.35 Arial, sans-serif; }

/* Selected ingredients and generation feedback. */
.haunt-cauldron-caption, .haunt-v2-progress, .haunt-selections, .haunt-v2-tea-note, .haunt-status, .haunt-reset { position: relative; z-index: 80; }
.haunt-cauldron-caption { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0 0 10px; font-size: 16px; }
.haunt-cauldron-caption span { padding: 5px 7px; border: 1px solid #c38e61; border-radius: 99px; color: #f4c688; font: 700 12px/1 Arial, sans-serif; white-space: nowrap; }
.haunt-v2-progress { display: flex; gap: 7px; width: 230px; margin: 10px auto 14px; }
.haunt-v2-progress i { flex: 1; height: 4px; background: #796154; transition: background .4s; }
.haunt-v2[data-ingredient-count="1"] .haunt-v2-progress i:first-child, .haunt-v2[data-ingredient-count="2"] .haunt-v2-progress i:nth-child(-n+2), .haunt-v2[data-ingredient-count="3"] .haunt-v2-progress i { background: #f1bf78; box-shadow: 0 0 9px #f1bf78; }
.haunt-selections { display: flex; justify-content: center; gap: 8px; max-width: 400px; padding: 0; margin: 0 auto; list-style: none; }
.haunt-selections li { display: grid; place-items: center; flex: 1; min-width: 0; min-height: 112px; padding: 6px; border: 1px dashed #b39173; border-radius: 5px; font: 12px/1.2 Arial, sans-serif; overflow-wrap: anywhere; }
.haunt-selections li.filled { background: #805734; border-style: solid; border-color: #e1b77a; }
.haunt-selected-ingredient { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 98px; min-height: 98px; padding: 4px 2px; border: 0; border-radius: 3px; background: transparent; color: inherit; }
.haunt-selection-preview { display: block; flex: 0 0 60px; width: 54px; height: 60px; }
.haunt-selection-preview .haunt-jar-glass { width: 44px; height: 56px; min-height: 0; margin: 4px auto 0; }
.haunt-selection-preview .haunt-jar-glass::before { top: -6px; height: 6px; left: -4px; width: calc(100% + 8px); }
.haunt-jar-illustrated .haunt-selection-preview .haunt-jar-glass { width: 100%; height: 100%; margin: 0; }
.haunt-selection-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font: 11px/1.2 Arial, sans-serif; }
.haunt-selection-remove { position: absolute; right: 0; top: 0; color: #f4d5a8; font: 17px/1 Arial, sans-serif; }
.haunt-selected-ingredient:hover:not(:disabled) { background: #fff1d810; }
.haunt-selections .is-arriving .haunt-selection-preview { visibility: hidden; }
.haunt-v2 .haunt-flying-jar { position: fixed; z-index: 9999; margin: 0; transform-origin: center; visibility: visible; opacity: 1; pointer-events: none; }
.haunt-v2-tea-note { display: block; margin: 11px 0 0; color: #efcfa5; font: 700 9px/1.3 Arial, sans-serif; letter-spacing: .1em; }
.haunt-v2-tea-note span { margin: 0 5px; color: #f5c879; }
.haunt-status { min-height: 36px; max-width: 370px; margin: 12px auto 6px; font: 13px/1.4 Arial, sans-serif; }
.haunt-reset { padding: 7px 16px; margin: 0; border: 1px solid #c79b71; border-radius: 5px; background: transparent; color: #fff4e5; font-size: 12px; }
.haunt-reset:hover:not(:disabled) { background: #704b36; }
.haunt-reset:disabled { opacity: .5; }
.haunt-brewing-badge { position: relative; z-index: 80; display: flex; visibility: hidden; align-items: center; justify-content: center; gap: 10px; width: max-content; max-width: 100%; margin: 0 auto 12px; padding: 7px 13px; border: 1px solid #e2b077; border-radius: 99px; background: #936034; color: #fff8e9; box-shadow: 0 0 18px #efa75f66; font: 700 10px/1 Arial, sans-serif; letter-spacing: .13em; }
.haunt-brewing-dots { display: flex; gap: 3px; }
.haunt-brewing-dots i { width: 5px; height: 5px; border-radius: 50%; background: #fff5d8; }
.is-brewing .haunt-brewing-badge { visibility: visible; }
:is(.is-brewing, .is-stir-preview) .haunt-stir-wrap { opacity: 1; animation: haunt-stir-orbit 3.2s linear infinite; }
:is(.is-brewing, .is-stir-preview) .haunt-stir-stick { animation: haunt-stir-sweep 3.2s cubic-bezier(.42, 0, .58, 1) infinite; }
:is(.is-brewing, .is-stir-preview) .haunt-potion { animation: haunt-amber-brew .43s ease-in-out infinite alternate; }
:is(.is-brewing, .is-stir-preview) .haunt-potion::before { content: ""; position: absolute; inset: 3px 10%; border: 4px solid #fff0b9; border-radius: 50%; animation: haunt-ripple .55s ease-out infinite; }
:is(.is-brewing, .is-stir-preview) .haunt-cauldron-stage { animation: haunt-rattle .2s linear infinite alternate; }
:is(.is-brewing, .is-stir-preview) .haunt-steam { animation-duration: calc(var(--steam-duration, 5s) * .76); }
:is(.is-brewing, .is-stir-preview) .haunt-fairy-dust { animation: haunt-dust-rise 3.6s ease-out infinite; }
:is(.is-brewing, .is-stir-preview) .haunt-sparkle { animation: haunt-sparkle-rise 3s ease-in-out infinite; }
.is-brewing .haunt-brewing-dots i { animation: haunt-dot .65s ease-in-out infinite alternate; }
.is-brewing .haunt-brewing-dots i:nth-child(2) { animation-delay: .2s; }
.is-brewing .haunt-brewing-dots i:nth-child(3) { animation-delay: .4s; }
.haunt-v2[data-ingredient-count="1"] .haunt-potion { animation: haunt-simmer 1.15s ease-in-out infinite alternate; }
.haunt-v2[data-ingredient-count="2"]:not(.is-brewing) .haunt-potion { animation: haunt-simmer .64s ease-in-out infinite alternate; }
.haunt-v2[data-ingredient-count="2"]:not(.is-brewing) .haunt-cauldron-stage { animation: haunt-gentle-rattle .8s ease-in-out infinite alternate; }

.haunt-v2[data-ingredient-count]:not([data-ingredient-count="0"]):not(.is-brewing):not(.is-stir-preview) .sparkle-one,
.haunt-v2[data-ingredient-count]:not([data-ingredient-count="0"]):not(.is-brewing):not(.is-stir-preview) .sparkle-two { animation: haunt-sparkle-rise 4.5s ease-in-out infinite; }

/* Image failure fallback; the actual photographed cauldron remains preferred. */
.haunt-cauldron-fallback .haunt-v2-cauldron-image { display: none; }
.haunt-cauldron-fallback .haunt-rim-back { display: block; position: absolute; z-index: 1; top: 38px; left: 12%; right: 12%; height: 58px; border: 8px solid #171615; border-radius: 50%; background: #171615; }
.haunt-cauldron-fallback .haunt-cauldron-front { display: grid; place-items: center; position: absolute; z-index: 4; top: 66px; left: 10%; right: 10%; height: 170px; border: 8px solid #171615; border-radius: 16px 16px 90px 90px; background: linear-gradient(110deg, #282624, #151414 65%, #37312a); box-shadow: inset 0 -14px #24211e; }
.haunt-cauldron-front::before, .haunt-cauldron-front::after { content: ""; position: absolute; top: 14px; width: 26px; height: 38px; border: 8px solid #171615; border-radius: 50%; }
.haunt-cauldron-front::before { left: -32px; }
.haunt-cauldron-front::after { right: -32px; }
.haunt-cauldron-moon { color: #d9a96b; font-size: 48px; }

/* Result and cart. */
.haunt-result { position: relative; display: grid; grid-template-columns: minmax(0, 450px) minmax(0, 1fr); gap: 45px; max-width: 1050px; margin: 35px auto 0; padding: 24px; border-radius: 8px; background: #fffaf3; box-shadow: 0 18px 45px #654c3226; color: #302138; }
.haunt-result-art { display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; min-height: 300px; overflow: hidden; border-radius: 5px; background: #fffaf3; }
/* Match the photographed sample tin and lid perspective on the birthday page. */
.haunt-result-tin { position: relative; width: 100%; max-width: 500px; aspect-ratio: 5 / 4; background: url('/images5/birthday_tin_retina.jpg') center / 100% 100% no-repeat; mix-blend-mode: multiply; }
.haunt-result-tin-lid { position: absolute; left: 7.5%; top: 16.625%; width: 80%; height: 62.5%; transform: perspective(600px) rotate(9deg) rotateY(355deg) rotateX(354deg) skewX(3deg) skewY(1deg); transform-origin: center; border-radius: 12.5% / 20%; overflow: hidden; }
.haunt-result-tin-lid .haunt-result-label { display: block; width: 100%; height: 100%; object-fit: cover; }
.haunt-result-tin-lid::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 2px #49372555; background: linear-gradient(125deg, #ffffff12, transparent 45%, #00000008); pointer-events: none; }
.haunt-package-caption { margin: 0 12px 18px; color: #79674f; text-align: center; }
.haunt-result-copy { padding: 10px 15px 10px 0; }
.haunt-eyebrow { color: #9b5e37; font: 700 11px Arial, sans-serif; letter-spacing: .24em; }
.haunt-result-copy h2 { margin: 10px 0 15px; color: #303b40; font: 400 clamp(30px, 3.5vw, 45px)/1.1 Georgia, serif; }
.haunt-result-copy p { line-height: 1.55; }
.haunt-result-copy h3 { margin: 25px 0 14px; color: #684525; font: 400 22px/1.2 Georgia, serif; }
.haunt-result-copy .haunt-recipe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.haunt-recipe-card { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px; border: 1px solid #e7d8c3; border-radius: 12px; background: #fffdf8; }
.haunt-recipe-photo { position: relative; flex: 0 0 54px; width: 54px; height: 54px; overflow: hidden; border-radius: 50%; background: #eee6d8; }
.haunt-recipe-photo svg { position: absolute; inset: 12px; width: 30px; height: 30px; fill: none; stroke: #967249; stroke-width: 2; }
.haunt-recipe-photo img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; }
.haunt-recipe-details { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.haunt-recipe-details strong { color: #493725; font: 600 12px/1.35 Arial, sans-serif; overflow-wrap: anywhere; }
.haunt-recipe-proportion { color: #856643; font: 11px/1.35 Arial, sans-serif; }
.haunt-cart-status { margin: 12px 0 0; color: #684525; font: 12px/1.4 Arial, sans-serif; }
@media (min-width: 701px) and (max-width: 950px), (max-width: 380px) {
  .haunt-result-copy .haunt-recipe { grid-template-columns: 1fr; }
}
.haunt-claim { padding: 14px 24px; border: 0; border-radius: 5px; background: var(--copper); color: #fff; font-weight: 700; }
.haunt-claim:hover:not(:disabled) { background: #8b4c26; }
.haunt-claim:disabled { opacity: .6; }
.haunt-size-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
.haunt-size-claim { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 0; padding: 16px 5px 13px; overflow: hidden; border: 1px solid #a86635; border-radius: 16px 16px 7px 7px; background: radial-gradient(ellipse at 50% 0, #62422f 0, #2d242c 70%); box-shadow: inset 0 0 0 3px #f9b3610a, 0 4px 10px #30213814; color: #fff0d6; font: 600 13px/1.2 Arial, sans-serif; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.haunt-cart-icon { width: 29px; height: 29px; fill: none; stroke: #ffb363; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px #f8983833); }
.haunt-cart-icon .fill { fill: currentColor; }
.haunt-size-claim strong { color: #ffd398; font: 400 28px/1 Georgia, serif; }
.haunt-size-claim [data-cart-label] { width: calc(100% - 8px); margin-top: 3px; padding: 8px 2px; border-top: 1px solid #d28e4c66; color: #ffe9c9; font-size: 11px; font-weight: 600; }
.haunt-size-claim:hover:not(:disabled) { transform: translateY(-3px); border-color: #f7aa59; background: radial-gradient(ellipse at 50% 0, #89512c 0, #382936 75%); color: #fff0d6; box-shadow: 0 7px 18px #6d35132b, 0 0 15px #ed9b4926; }
.haunt-size-claim:active:not(:disabled) { transform: translateY(0); }
.haunt-size-claim:focus-visible { outline: 3px solid #aa642d; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .haunt-size-claim { transition: none; }
  .haunt-size-claim:hover:not(:disabled) { transform: none; }
}
.haunt-package-caption { font: 12px/1.4 Arial, sans-serif; }
.haunt-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
#ingredientFlight { position: fixed; inset: 0; pointer-events: none; z-index: 9999; }
.haunt-flying-icon { position: fixed; fill: none; stroke: #f7d59a; stroke-width: 3.2; filter: drop-shadow(0 0 6px #f8c771); }

@keyframes haunt-steam-rise {
  0% { transform: translate(0, 9px) scale(.82, .9); opacity: 0; }
  28% { opacity: .34; }
  60% { transform: translate(5px, -9px) scale(1.06, 1.08); opacity: .24; }
  100% { transform: translate(-7px, -27px) scale(1.22, 1.16); opacity: 0; }
}
@keyframes haunt-dust-rise {
  0% { transform: translate(0, 8px) scale(.65); opacity: 0; }
  25% { opacity: .75; }
  65% { opacity: .4; }
  100% { transform: translate(var(--dust-drift), -46px) scale(1.15); opacity: 0; }
}
@keyframes haunt-sparkle-rise {
  0% { transform: translate(0, 0) scale(.25) rotate(-12deg); opacity: 0; }
  25% { opacity: .85; }
  50% { transform: translate(calc(var(--sparkle-drift) * .5), -18px) scale(1) rotate(8deg); opacity: .55; }
  100% { transform: translate(var(--sparkle-drift), -42px) scale(.35) rotate(20deg); opacity: 0; }
}
@keyframes haunt-simmer { from { transform: scaleY(.92); filter: brightness(.94); } to { transform: scaleY(1.08); filter: brightness(1.16); } }
@keyframes haunt-amber-brew { from { transform: scale(.96, .86); background: #aa5e27; box-shadow: 0 0 15px #eaa35d; } to { transform: scale(1.06, 1.18); background: #f2b96d; box-shadow: 0 0 32px #fbd095; } }
@keyframes haunt-rattle { from { transform: translateX(-2px) rotate(-1deg); } to { transform: translateX(2px) rotate(1deg); } }
@keyframes haunt-gentle-rattle { from { transform: translateX(-1px); } to { transform: translateX(1px); } }
@keyframes haunt-ripple { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
@keyframes haunt-dot { to { transform: translateY(-4px); opacity: .45; } }
@keyframes haunt-stir-orbit {
  0%, 100% { transform: translate(-50%, -7px); }
  12.5% { transform: translate(calc(-50% + 30px), -5px); }
  25% { transform: translate(calc(-50% + 43px), 0); }
  37.5% { transform: translate(calc(-50% + 30px), 5px); }
  50% { transform: translate(-50%, 7px); }
  62.5% { transform: translate(calc(-50% - 30px), 5px); }
  75% { transform: translate(calc(-50% - 43px), 0); }
  87.5% { transform: translate(calc(-50% - 30px), -5px); }
}
@keyframes haunt-stir-sweep {
  0%, 100% { transform: rotate(-8deg); }
  25% { transform: rotate(12deg); }
  50% { transform: rotate(8deg); }
  75% { transform: rotate(-12deg); }
}

@media (max-width: 900px) {
  .haunt-season-banner { height: 400px; }
  .haunt-season-banner > img { object-position: 75% center; }
  .haunt-season-banner::after { content: ""; grid-area: banner; z-index: 0; background: linear-gradient(90deg, #f8f2e8f5, #f8f2e8ed 42%, #f8f2e860 78%, transparent); }
  .haunt-v2 .haunt-heading { max-width: 62%; }
  .haunt-v2 .haunt-heading h1 { font-size: 38px; }
}
@media (max-width: 760px) {
  .haunt-v2-ritual { display: none; }
}
@media (max-width: 650px) {
  .haunt-v2 { --pot-width: min(380px, calc(100vw - 56px)); --jar-width: 134.4px; --jar-height: 220.8px; --orbit-step: 144; --orbit-angle: .88; --orbit-depth: 88; }
  .haunt-season-banner { height: 420px; }
  .haunt-season-banner > img { object-position: 85% center; }
  .haunt-season-banner::after { background: linear-gradient(90deg, #f8f2e8f5, #f8f2e8e8 62%, #f8f2e8a6); }
  .haunt-v2-hero-inner { padding: 24px 22px; }
  .haunt-v2 .haunt-heading { max-width: 390px; }
  .haunt-v2 .haunt-heading h1 { font-size: 36px; }
  .haunt-heading > p { max-width: 360px; font-size: 14px; }
  .haunt-v2-brewroom { padding-top: 18px; }
  .haunt-spellbook { padding: 13px; margin-bottom: 22px; }
  .haunt-spellbook .haunt-section-head > span { display: none; }
  .haunt-saved-card { flex-basis: 146px; }
  .haunt-orbit-scene { border-radius: 14px; }
  .haunt-workbench { padding: 110px 14px 20px; }
  .haunt-cauldron-stage { margin-bottom: 100px; }
  .haunt-shelf .haunt-section-head { top: 18px; left: 16px; right: 16px; align-items: flex-start; }
  .haunt-v2 .haunt-shelf h2 { max-width: 155px; font-size: 21px; }
  .haunt-shelf-tools { flex-direction: column; align-items: flex-end; gap: 6px; }
  .haunt-shelf-tools > span { max-width: 135px; font-size: 10px; }
  .haunt-jars { top: 90px; }
  .haunt-jar { padding: 5px 4px 8px; }
  .haunt-jar-name { min-height: 29px; padding: 3px 2px; font-size: 10px; }
  .haunt-jar-flavor { min-height: 23px; font-size: 9px; }
  .haunt-shelf-lock { max-width: 270px; }
  .haunt-selections { gap: 5px; }
  .haunt-selections li { min-height: 108px; padding: 5px; font-size: 11px; }
  .haunt-result { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
  .haunt-result-copy { padding: 5px 8px 10px; }
}
@media (max-width: 390px) {
  .haunt-v2 { --jar-width: 115.2px; --jar-height: 208.8px; }
  .haunt-jar-name { font-size: 9px; }
  .haunt-jar-flavor { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .haunt-v2 *, .haunt-v2 *::before, .haunt-v2 *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .haunt-cauldron-effects .haunt-steam { opacity: .2; }
}

/* The idle ghost sits beside a real jar without intercepting input. */
.haunt-mischief-ghost { position: absolute; z-index: 5; top: -20px; left: calc(50% + 12px); width: 78px; height: 100px; pointer-events: none; animation: haunt-ghost-visit 6.5s ease-in-out both; filter: drop-shadow(0 0 12px #cdeee65c); }
.haunt-ghost-art { display: block; width: 100%; height: 88px; object-fit: contain; }
.haunt-ghost-oops { position: absolute; top: -12px; left: 14px; padding: 4px 8px; border-radius: 9px 9px 9px 0; background: #fff3d9; color: #63422e; font: 700 12px/1.2 Arial, sans-serif; opacity: 0; }
.haunt-mischief-ghost.is-caught { animation: haunt-ghost-retreat .5s ease-in both; }
.is-caught .haunt-ghost-oops { opacity: 1; }
@keyframes haunt-ghost-visit {
  0% { opacity: 0; transform: translate(12px, 24px) scale(.8); }
  18% { opacity: 1; transform: translate(0, 0) rotate(-6deg); }
  40% { opacity: 1; transform: translate(-3px, -10px) rotate(-6deg); }
  62% { opacity: 1; transform: translate(0, -13px) rotate(5deg); }
  82% { opacity: 1; transform: translate(0, 0); }
  100% { opacity: 0; transform: translate(18px, 20px) scale(.85); }
}
@keyframes haunt-ghost-retreat {
  0%, 35% { opacity: 1; transform: translate(0, -5px) rotate(8deg); }
  100% { opacity: 0; transform: translate(20px, -28px) scale(.7); }
}
@media (prefers-reduced-motion: reduce) {
  .haunt-mischief-ghost { display: none; }
}