
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700;800&display=swap');
:root{--navy:#0f1326;--ink:#171b33;--blue:#00add1;--cream:#fff8f0;--gold:#ffc06b;--orange:#ff7a21;--pumpkin:#ff8e2b;--plum:#4b2559;--moon:#fff0c9;--leaf1:#cc6d1e;--leaf2:#d9972f;--leaf3:#9b4e24;--ghost:#eef8ff;--card:#ffffff;--soft:#f5f0ff;--line:#e7d8ef}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans',system-ui,sans-serif}button,input,select{font:inherit}a{color:inherit}.wrap{max-width:1140px;padding:0 24px;margin:auto}.hero{background:radial-gradient(circle at 14% 16%,#5c2c6f 0,transparent 20%),radial-gradient(circle at 82% 18%,#2b3b67 0,transparent 24%),linear-gradient(145deg,#120f22,#191a38 45%,#24162d 100%);color:white;overflow:hidden;position:relative}.hero:after{content:'🎃';position:absolute;left:4%;bottom:4%;font-size:4.5rem;opacity:.16;transform:rotate(-8deg)}.top{display:flex;justify-content:space-between;align-items:center;padding-top:20px;gap:18px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none}.cv{border:1.5px solid var(--blue);border-radius:9px;width:53px;height:53px;display:grid;place-items:center;font:bold 26px Georgia,serif;color:white}.word{font:700 26px Georgia,serif;letter-spacing:1.5px}.sub{color:var(--blue);font-size:10px;letter-spacing:5px;font-weight:800}.tag{border:1px solid #ffffff45;border-radius:50px;padding:9px 15px;font-weight:700;font-size:12px;background:linear-gradient(90deg,#ff8e2b22,#ffffff10)}.intro{padding:66px 0 40px;text-align:center}.eyebrow{letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-size:13px;font-weight:800;text-shadow:0 0 10px #00000018}.intro h1{font:800 clamp(44px,7.2vw,94px)/1.02 'Playfair Display',Georgia,serif;margin:15px auto;max-width:960px;letter-spacing:-2px}.intro h1 em{font-style:normal;color:var(--gold)}.lead{font-size:19px;line-height:1.65;max-width:780px;margin:20px auto 28px;color:#e6edf7}.pills{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.pill{border:1px solid #ffffff40;border-radius:22px;padding:9px 15px;font-size:13px;background:linear-gradient(180deg,#ffffff10,#ff8e2b10)}.pill b{color:#8ce9f7}.experience{padding:0 0 64px}.gamecard{background:linear-gradient(180deg,#fffdfb 0,#fff 100%);color:var(--navy);max-width:980px;margin:auto;border-radius:25px;padding:26px;box-shadow:0 28px 80px #0005;border:1px solid #ffffff30}.gameheader{display:flex;justify-content:space-between;align-items:center;gap:20px}.gameheader h2{font:700 clamp(23px,4vw,34px) 'Playfair Display';margin:0}.small{font-size:13px;color:#607082}.playgrid{display:grid;grid-template-columns:1fr 1.15fr;gap:18px;margin:20px 0 12px}.panel{background:linear-gradient(180deg,#fffdf9,#f8f3ff);border:1px solid #eadcf0;border-radius:20px;padding:16px;position:relative;overflow:hidden}.panel:before{content:'🎃';position:absolute;right:14px;top:12px;font-size:22px;opacity:.12}.panel h3{font:700 21px 'Playfair Display';margin:0 0 6px}.panel .micro{font-size:12px;color:#637588;line-height:1.5;margin-bottom:10px}.pond{height:300px;position:relative;overflow:hidden;border-radius:18px;background:linear-gradient(#6ab3c8 0%,#2e92b4 34%,#134f6a 100%);border:7px solid #d7eff4;box-shadow:inset 0 15px 35px #0d416658}.pond:after{content:'🕸️';position:absolute;left:10px;top:8px;font-size:24px;opacity:.45}.pond:before,.pond:after{content:'';position:absolute;height:30px;width:120%;left:-10%;border-radius:50%;border-top:3px solid #bcebf566;top:38%;animation:swell 3s linear infinite}.pond:after{top:72%;animation-delay:-1.4s}.apple{position:absolute;display:grid;place-items:center;width:81px;height:81px;border:0;border-radius:50%;font-size:43px;background:radial-gradient(circle at 30% 25%,#ffbb83,#ec5e39 65%,#a62e32);box-shadow:inset -8px -9px 0 #a12b2b44,0 6px 13px #02394c8a;cursor:pointer;animation:bob 2.4s ease-in-out infinite;transition:filter .2s, transform .2s}.apple:hover,.shakebtn:hover{filter:brightness(1.08);transform:translateY(-1px) scale(1.03)}.apple:focus-visible,.treeapple:focus-visible,.shakebtn:focus-visible{outline:4px solid #ffe788;outline-offset:4px}.apple:nth-child(1){top:16%;left:14%;animation-delay:-.3s}.apple:nth-child(2){top:57%;left:32%;animation-delay:-1.2s}.apple:nth-child(3){top:19%;right:25%;animation-delay:-.9s}.apple:nth-child(4){top:57%;right:10%;animation-delay:-1.9s}.apple:disabled,.treeapple:disabled,.shakebtn:disabled{cursor:default;opacity:.75}.ripple{position:absolute;width:80px;height:18px;border:2px solid #c4f1fa90;border-radius:50%;pointer-events:none}.r1{left:14%;top:43%}.r2{left:32%;top:85%}.r3{right:25%;top:47%}.r4{right:10%;top:85%}.treezone{min-height:300px;display:flex;flex-direction:column;gap:6px;justify-content:space-between}.treewrap{position:relative;height:350px;flex-shrink:0;background:radial-gradient(ellipse at 50% 90%,#b37d3d33,transparent 65%),linear-gradient(180deg,#281b33 0,#3b2540 38%,#5a3928 100%);border-radius:18px;overflow:hidden;border:1px solid #5d4260}.treewrap:before{content:'✦';position:absolute;left:14%;top:14%;font-size:14px;color:#fff8;letter-spacing:14px}.treewrap:after{content:'👻';position:absolute;right:16px;top:8px;font-size:22px;opacity:.28}.ground{position:absolute;left:-5%;right:-5%;bottom:-30px;height:90px;border-radius:50%;background:linear-gradient(180deg,#ca9154,#8c4d26)}.canopy{position:absolute;left:50%;top:8px;width:min(100%,380px);height:320px;transform:translateX(-50%);transform-origin:50% 95%;filter:drop-shadow(0 5px 4px #160e1830);z-index:2;pointer-events:none}.canopy.shake{animation:shakeTree .75s ease}.treeapple{position:absolute;left:50%;top:159px;transform:translateX(26px);width:46px;height:46px;border:none;border-radius:50%;background:radial-gradient(circle at 30% 25%,#ffbb83,#ec5e39 65%,#a62e32);box-shadow:inset -5px -6px 0 #a12b2b44,0 4px 9px #02394c40;cursor:pointer;z-index:3}.stem{position:absolute;width:4px;height:14px;background:#6f4a24;left:50%;top:151px;transform:translateX(42px) rotate(6deg);z-index:3;border-radius:3px}.leafpiece{position:absolute;width:12px;height:8px;background:#4e7c2d;border-radius:100% 0 100% 0;left:50%;top:156px;transform:translateX(48px) rotate(-18deg);z-index:3}.falling{animation:dropApple 1.15s cubic-bezier(.22,.65,.2,1) forwards!important}.shower{position:absolute;inset:0;z-index:4;pointer-events:none}.shower svg{position:absolute;width:24px;height:32px;opacity:0;animation:leafFloat 1.4s ease forwards}.treecontrols{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.shakebtn{border:0;border-radius:10px;padding:14px 16px;background:linear-gradient(180deg,#ff9639,#f26c18);color:#fff;font-weight:800;cursor:pointer;box-shadow:0 8px 16px #f26c1830}.instructions{text-align:center;font-weight:700}.instructions span{display:block;font-size:13px;color:#607082;font-weight:400;margin-top:5px}.result{display:none;background:#fef5df;border:1px solid #edcb91;padding:24px;border-radius:16px;text-align:center;margin:14px 0 0}.result.show{display:block;animation:pop .4s ease-out}@keyframes pop{0%{transform:scale(.95);opacity:0}100%{transform:scale(1);opacity:1}}.result h3{font:700 27px 'Playfair Display';margin:8px 0}.result p{line-height:1.55;margin:10px auto;max-width:700px}.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:9px;border:0;cursor:pointer;text-decoration:none;font-weight:800;padding:15px 22px;line-height:1.3;transition:transform .2s,filter .2s}.btn:hover{transform:translateY(-2px);filter:brightness(1.04)}.primary{background:var(--blue);color:#001d2c}.dark{background:var(--navy);color:white}.secondary{background:#fff;border:1px solid #ccd4da;color:var(--navy)}.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px}.note{font-size:12px;line-height:1.5;color:#64758a}.banner{background:linear-gradient(90deg,#fff0c9,#ffd7a0,#ffe7cb);border-top:1px solid #edd39b;border-bottom:1px solid #edd39b;text-align:center;padding:15px 20px;font-weight:800;color:#594227}.section{padding:68px 0}.center{text-align:center}.section h2{font:700 clamp(30px,4vw,46px) 'Playfair Display';line-height:1.16;margin:8px 0 14px}.sectionlead{font-size:16px;color:#5b6675;max-width:730px;margin:0 auto 28px;line-height:1.6}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.bonus{background:#fff;border:1px solid #f0e2d8;border-radius:17px;padding:24px;box-shadow:0 6px 24px #1929390a}.bonus:nth-child(odd){background:linear-gradient(180deg,#fff,#fff8f1)}.bonus:nth-child(even){background:linear-gradient(180deg,#fff,#fbf5ff)}.bonus .emoji{font-size:36px}.bonus h3{font:700 21px 'Playfair Display';margin:10px 0}.bonus p{color:#5b6675;font-size:14px;line-height:1.6;margin:0}.bonus small{display:block;color:#8a5e2f;margin-top:8px;font-weight:700}.milestones{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}.milestone{background:#fff;border:1px solid #e9ddc8;border-radius:16px;padding:18px;box-shadow:0 6px 24px #1929390a}.milestone .num{font-size:32px;font-weight:800;color:#bf6f28}.milestone h3{font:700 19px 'Playfair Display';margin:6px 0 8px}.offers{background:linear-gradient(180deg,#f7eef8 0,#eff7f8 100%)}.offergrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.offer{border:1px solid #d7d6ea;padding:28px;border-radius:18px;background:white;box-shadow:0 8px 22px #20193a08}.offer h3{font:700 26px 'Playfair Display';margin:0}.offer .cost{font-size:37px;font-weight:800;margin:12px 0;color:#007c9f}.offer ul{padding-left:20px;line-height:1.8;color:#516173;min-height:140px}.offer a{width:100%}.formsection{background:linear-gradient(145deg,#15152f,#24183a 55%,#10243a);color:white}.formbox{max-width:700px;margin:26px auto 0;padding:25px;border-radius:18px;background:#fff;color:var(--ink)}.fields{display:grid;grid-template-columns:1fr 1fr;gap:13px}.field{display:flex;flex-direction:column;gap:7px;font-weight:700;font-size:13px}.field input,.field select{width:100%;padding:13px;border:1px solid #bac6d0;border-radius:8px;color:#10203b;background:white}.field.full{grid-column:1/-1}.field input:focus,.field select:focus{outline:3px solid #89d9e8}.checkbox{display:flex;gap:9px;align-items:flex-start;margin:16px 0;font-size:13px;color:#4f6172;line-height:1.4}.checkbox input{margin-top:3px}.footer{padding:25px;text-align:center;background:#071323;color:#c5d5df;font-size:13px}.footer a{color:#86e2f0}.sr{position:absolute;left:-9999px}.emphasis{color:#bf6f28;font-weight:800}.tiny{font-size:11px;color:#7a8797}.spookyline{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;font-size:22px;opacity:.9;margin:8px 0 0}.spookyline span{filter:drop-shadow(0 2px 4px #0002)}.haunt{display:inline-block;color:var(--pumpkin)}.jacko{display:inline-block;transform:translateY(1px)}
@keyframes bob{0%,100%{translate:0 0;rotate:-4deg}50%{translate:0 13px;rotate:5deg}}
@keyframes swell{50%{transform:translateX(-5%)}}
@keyframes shakeTree{0%,100%{transform:translateX(-50%) rotate(0)}20%{transform:translateX(-50%) rotate(-3deg)}40%{transform:translateX(-50%) rotate(2.8deg)}60%{transform:translateX(-50%) rotate(-2deg)}80%{transform:translateX(-50%) rotate(1.4deg)}}
@keyframes dropApple{0%{transform:translate(26px,0) rotate(0)}55%{transform:translate(60px,105px) rotate(20deg);opacity:1}100%{transform:translate(78px,205px) rotate(66deg);opacity:0}}
@keyframes leafFloat{0%{transform:translateY(0) rotate(0);opacity:0}15%{opacity:1}100%{transform:translateY(200px) translateX(var(--drift,0)) rotate(var(--spin,0deg));opacity:0}}
@media(max-width:900px){.playgrid{grid-template-columns:1fr}.treezone{min-height:auto}}
@media(max-width:700px){.top{align-items:start}.top .tag{font-size:10px;padding:7px 9px}.intro{padding:47px 0 28px}.intro h1{letter-spacing:-1px}.gamecard{padding:13px}.pond{height:270px}.apple{width:65px;height:65px;font-size:34px}.grid,.offergrid,.milestones{grid-template-columns:1fr}.fields{grid-template-columns:1fr}.field.full{grid-column:auto}.section{padding:45px 0}.gameheader{display:block}.offer ul{min-height:0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important}}

/* Keep keyboard navigation and decorative layers clear of the game controls. */
.hero:before,.hero:after,.pond:before,.pond:after,.ripple{pointer-events:none}
.pondapple{z-index:1}
a:focus-visible,button:focus-visible{outline:3px solid #bf6f28;outline-offset:4px}
.skip-link{position:absolute;left:16px;top:-80px;z-index:10;background:#fff8f0;color:#171b33;padding:12px 18px;border-radius:8px}
.skip-link:focus{top:16px}
@media(max-width:420px){.wrap{padding:0 16px}.word{font-size:20px}.sub{letter-spacing:3px}.top{flex-wrap:wrap}.apple{width:56px;height:56px;font-size:30px}.gamecard{border-radius:18px}.panel{padding:12px}.offer{padding:22px}}

/* Give empty apples a distinct, readable result without a prize treatment. */
.result[data-outcome="no-bonus"]{background:#f2f5f7;border-color:#c5d1d9}

/* A passing cloud softens the moon's changing phase. */
.moon-scene{position:absolute;right:4%;top:205px;width:120px;height:120px;pointer-events:none;isolation:isolate}
.phase-moon{display:block;width:100%;height:100%;filter:drop-shadow(0 0 12px #fff0c925)}
.moon-shadow{animation:moonPhase 14s ease-in-out infinite}
.moon-cloud{position:absolute;left:-25%;top:44%;width:150%;height:34%;border-radius:50%;background:radial-gradient(ellipse at 30% 60%,#c5c9dc99,transparent 60%),radial-gradient(ellipse at 60% 40%,#dce0eb99,transparent 65%),radial-gradient(ellipse at 80% 70%,#aeb8ce88,transparent 65%);filter:blur(6px);animation:moonCloud 14s ease-in-out infinite;opacity:0}
@keyframes moonPhase{0%,12%,100%{transform:translateX(0)}43%,62%{transform:translateX(100px)}}
@keyframes moonCloud{0%,8%{transform:translateX(-90px);opacity:0}25%,40%{opacity:.8}50%{transform:translateX(90px);opacity:0}58%{transform:translateX(-90px);opacity:0}75%,90%{opacity:.7}100%{transform:translateX(90px);opacity:0}}
/* Two painted faces on a hanging Halloween sign. */
.sign-wrap{margin:30px auto;text-align:center;max-width:340px;padding-top:24px}
.halloween-sign{display:block;position:relative;width:100%;height:290px;padding:0;border:0;background:transparent;cursor:pointer;perspective:900px;border-radius:16px;color:var(--cream);-webkit-tap-highlight-color:transparent}
.halloween-sign:before{content:'';position:absolute;width:55%;height:45px;left:22.5%;top:-23px;border:2px solid #ba9362;border-bottom:0;border-radius:50% 50% 0 0;pointer-events:none}
.sign-board{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.7,.25,1)}
.halloween-sign .sign-board{transform:rotateY(var(--sign-turn,0deg))}
.sign-face{visibility:hidden;transition:visibility 0s .4s;-webkit-backface-visibility:hidden}
.halloween-sign[aria-pressed="false"] .sign-front,.halloween-sign[aria-pressed="true"] .sign-back{visibility:visible}
.sign-face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;border:2px solid #d7964d;border-radius:16px;backface-visibility:hidden;background:repeating-linear-gradient(0deg,#ffffff03 0 2px,transparent 2px 9px),linear-gradient(115deg,#57321f,#2e2024);box-shadow:inset 0 0 0 6px #261b2270,0 12px 24px #070e232e}
.sign-back{transform:rotateY(180deg);background:repeating-linear-gradient(0deg,#ffffff08 0 2px,transparent 2px 9px),linear-gradient(115deg,#b95f25,#7b381f);border-color:#ffc06b}
.sign-word{font:800 clamp(48px,8vw,64px)/1 'Playfair Display',Georgia,serif;color:var(--gold)}
.sign-kicker{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.sign-detail,.sign-hint{font-size:12px;color:#edd8c2}
.sign-detail{max-width:30ch;padding:0 16px;line-height:1.45;text-align:center}
.sign-detail strong{color:var(--gold)}
.sign-back .sign-detail,.sign-back .sign-detail strong{color:var(--cream)}
.sign-hint{margin:14px 0 0}
/* Jack-o'-lanterns pop up as each side of the sign comes into view. */
.jack{display:block;width:96px;height:80px;overflow:visible}
.jack-glow{filter:drop-shadow(0 0 4px #ffb43a)}
.jack-scary .jack-glow{animation:jackFlicker 2.4s ease-in-out infinite}
.halloween-sign.has-flipped[aria-pressed="false"] .jack-scary{animation:jackLunge .6s .4s cubic-bezier(.2,1.4,.4,1) both}
.halloween-sign[aria-pressed="true"] .jack-happy{animation:jackBounce .7s .4s cubic-bezier(.2,1.5,.4,1) both}
@keyframes jackLunge{0%{opacity:0;transform:scale(.3) rotate(-12deg)}60%{transform:scale(1.25) rotate(6deg)}100%{opacity:1;transform:none}}
@keyframes jackBounce{0%{opacity:0;transform:translateY(24px) scale(.6)}60%{opacity:1;transform:translateY(-8px) scale(1.08)}100%{transform:none}}
@keyframes jackFlicker{0%,100%{opacity:1}45%{opacity:.75}50%{opacity:1}53%{opacity:.6}}
.halloween-sign:hover .sign-word{color:#fff0c9}
.halloween-sign:focus-visible{outline:3px solid var(--gold);outline-offset:7px}
@media(max-width:700px){.moon-scene{top:225px;right:1%;width:70px;height:70px;opacity:.7}.intro{position:relative}.sign-wrap{max-width:300px}}
@media(prefers-reduced-motion:reduce){.moon-shadow{transform:translateX(100px)}.moon-cloud{animation:none;transform:translateX(18px);opacity:.5}.sign-board,.sign-face{transition:none}.jack,.jack-glow{animation:none!important}}

/* Keep the apple attached to its branch when hovered. */
.treeapple:hover{filter:brightness(1.08);transform:translateX(26px) scale(1.03)}
.brandlogo{display:block;width:clamp(150px,22vw,210px);height:auto;background:#fff;border-radius:12px;padding:8px 12px;box-shadow:0 8px 24px #0004}.brand:focus-visible{outline:3px solid #ffe788;outline-offset:4px;border-radius:12px}main .brandlogo{margin:0 auto 8px;width:clamp(180px,40vw,240px)}.footlogo{display:inline-block;width:170px;height:auto;background:#fff;border-radius:10px;padding:7px 11px;margin-bottom:14px}

/* Bobbing bucket: the pond view zooms out to reveal the whole tub after an apple is chosen. */
.pondview{--bucket-zoom:.68;position:relative;height:300px;overflow:hidden;border-radius:18px;background:repeating-linear-gradient(90deg,#3b2417 0 46px,#2c1a10 46px 48px),#3b2417}
.pondview .pond{position:absolute;inset:0;height:auto;z-index:1;transition:border-color .9s ease}
.bucket{position:absolute;inset:0;transform-origin:50% 50%;transition:transform .9s cubic-bezier(.3,.7,.2,1)}
.tub{position:absolute;inset:-30px;border-radius:52px;background:repeating-conic-gradient(from 0deg,#a0622f 0 5deg,#8a5126 5deg 9.4deg,#6b3b1b 9.4deg 10deg);box-shadow:0 18px 30px #0009,inset 0 0 0 4px #5b5a60,inset 0 0 0 7px #2f2e33}
.hoop{position:absolute;inset:11px;border-radius:42px;border:4px solid #3e3d43;box-shadow:0 0 0 1px #8b8a92aa}
.tub:before,.tub:after{content:'';position:absolute;top:50%;width:24px;height:64px;margin-top:-32px;border:6px solid #47464c;border-radius:32px 0 0 32px;border-right:0}
.tub:before{left:-24px}
.tub:after{right:-24px;transform:scaleX(-1)}
.bucketprop{position:absolute;font-size:26px;opacity:0;transform:scale(.6);transition:opacity .5s ease .45s,transform .5s ease .45s;pointer-events:none}
.bp1{left:8px;bottom:6px}.bp2{right:10px;top:6px;font-size:20px}.bp3{left:12px;top:8px;font-size:18px}.bp4{right:10px;bottom:8px;font-size:22px}
.pondview.zoomed .bucket{transform:scale(var(--bucket-zoom))}
.pondview.zoomed .pond{border-color:#4a2a14}
.pondview.zoomed .bucketprop{opacity:.9;transform:none}
@media(max-width:700px){.pondview{height:270px;--bucket-zoom:.6}}
@media(prefers-reduced-motion:reduce){.bucket,.pondview .pond,.bucketprop{transition:none}}
