/* A moonlit question portal in the established After Hours Arcade palette. */
.question-box{color-scheme:dark;--question-paper:#0b1123;--question-ink:#f3f5ff;--question-soft:#b9c4e0;--question-control:#101829;--question-bubble:#171c35;--question-accent:#ff9ee3;--question-action:#ff656c;--question-action-ink:#070c18;max-width:860px;margin:64px auto 36px;padding:28px 34px 24px;background:var(--question-paper);color:var(--question-ink);border:1px solid #9c875d;border-radius:12px;box-shadow:0 14px 34px #0004;position:relative}
.question-box:before{content:"";position:absolute;inset:0;background:url('../assets/world-2.webp') center/cover no-repeat;opacity:.11;border-radius:inherit;pointer-events:none}.question-box>*{position:relative}.question-box-intro{max-width:680px;margin:0 auto 22px}.question-greeting{display:flex;align-items:center;justify-content:center;gap:18px;margin:-9px 0 10px}.question-greeting h2{position:relative;margin:0;background:var(--question-bubble);color:var(--question-accent);border:1px solid #8e7d58;padding:14px 21px;border-radius:9px;font-size:31px;line-height:1.1;letter-spacing:-.025em;box-shadow:0 5px 12px #35234712}.question-greeting h2:before{content:"";position:absolute;left:-9px;top:23px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:10px solid var(--question-bubble)}
.question-box-intro>p{font-size:15px;line-height:1.6;text-align:center;color:var(--question-soft)}.question-box-intro .question-purpose{font-size:12px;margin-top:7px;color:var(--question-soft)}
.question-buddy{position:relative;flex:0 0 112px;width:112px;height:136px;padding:0;background:transparent;border:0;border-radius:12px;color:var(--question-ink);transform-origin:50% 90%;animation:buddy-wander 19s ease-in-out infinite}.buddy-sprite{display:block;width:100%;height:100%;background:url('../assets/buddy-idle.webp') center/contain no-repeat;filter:drop-shadow(0 5px 5px #4a326b22);animation:buddy-3d-idle 12s steps(1,end) infinite}.buddy-hello{position:absolute;bottom:94%;left:7px;white-space:nowrap;font-size:12px;line-height:1.4;color:#070c18;background:#ff9ee3;padding:6px 10px;border-radius:10px;opacity:0;pointer-events:none}.question-buddy.is-waving .buddy-sprite{animation:buddy-3d-wave .4s steps(1,end) 4}.is-waving .buddy-hello{opacity:1}
.question-box form{display:grid;grid-template-columns:1fr;gap:8px;max-width:680px;margin:0 auto}.question-box label{font-size:14px;font-weight:750;color:var(--question-ink);margin-top:6px}.question-box select,.question-box textarea{font:inherit;color:var(--question-ink);background:var(--question-control);border:1px solid #697899;border-radius:8px;caret-color:var(--question-accent);max-width:100%}.question-box select{width:230px;min-height:43px;padding:9px 12px;margin-bottom:4px}.question-box textarea{width:100%;min-height:118px;padding:14px 15px;resize:vertical;line-height:1.55;font-size:15px}.question-box textarea::placeholder{color:var(--question-soft);opacity:1}.question-box .counter{justify-self:end;font:11px var(--mono);color:var(--question-soft)}
.question-box .form-note{font-size:12px;line-height:1.55;color:var(--question-soft);margin:0!important}.question-box .delivery-note{font-size:11px}.question-box .btn{justify-self:center;min-height:46px;border:1px solid var(--question-action);border-radius:9px;padding:12px 27px;margin-top:8px;background:var(--question-action);color:var(--question-action-ink);font-weight:750;font-size:15px}.question-box .btn:hover{background:#ff8187;color:#070c18}.question-box .btn:disabled{cursor:not-allowed;opacity:.55}.question-box input:disabled,.question-box select:disabled,.question-box textarea:disabled{opacity:.7}.question-box .form-status{font-size:13px;font-weight:650;line-height:1.5;color:var(--question-ink);text-align:center;min-height:0;margin:3px 0}.question-box :focus-visible{outline:3px solid #ff9ee3;outline-offset:4px}
@keyframes buddy-3d-idle{0%,43%,47%,70%,84%,100%{background-image:url('../assets/buddy-idle.webp')}44%,46%{background-image:url('../assets/buddy-blink.webp')}71%,83%{background-image:url('../assets/buddy-stars.webp')}}
@keyframes buddy-3d-hover{0%,100%{background-image:url('../assets/buddy-idle.webp')}40%,65%{background-image:url('../assets/buddy-blink.webp')}}
@keyframes buddy-3d-wave{0%,100%{background-image:url('../assets/buddy-wave-a.webp')}50%{background-image:url('../assets/buddy-wave-b.webp')}}
@keyframes buddy-wander{0%,62%,70%,81%,89%,100%{transform:translateY(0) rotate(0) scale(1)}64%{transform:translateY(3px) scale(1.04,.94)}66.5%{transform:translateY(-18px) rotate(-4deg) scale(.98,1.02)}68%{transform:translateY(2px) scale(1.04,.95)}84%{transform:rotate(-5deg)}87%{transform:rotate(4deg)}}
.question-buddy.is-waving,.question-buddy:focus-visible{animation:none;transform:none}
@media(hover:hover){.question-buddy:hover{animation:none;transform:none}.question-buddy:hover .buddy-sprite{animation:buddy-3d-hover .5s steps(1,end) 2}.question-buddy.is-waving:hover .buddy-sprite{animation:buddy-3d-wave .4s steps(1,end) 4}}
@media(max-width:639px){.question-box{padding:20px 18px;border-radius:12px;margin-top:42px}.question-greeting{gap:10px}.question-buddy{flex-basis:91px;width:91px;height:115px}.question-greeting h2{font-size:27px;padding:13px 16px}.question-box-intro>p{font-size:14px}.question-box select{width:100%}.question-box textarea{min-height:136px;font-size:14px}.question-box .btn{width:100%;justify-self:stretch}.question-box .delivery-note{font-size:12px}}
@media(prefers-reduced-motion:reduce){.question-buddy{animation:none!important;transform:none!important}.question-buddy .buddy-sprite{animation:none!important;background-image:url('../assets/buddy-idle.webp')!important;filter:none}}


/* A wink before the greeting wave. */
@keyframes buddy-3d-wave{0%,24%{background-image:url('../assets/buddy-wink.webp')}25%,74%,100%{background-image:url('../assets/buddy-wave-a.webp')}50%,99%{background-image:url('../assets/buddy-wave-b.webp')}}

/* Compact help card with room for a seated companion. */
.question-box{max-width:620px;margin:44px auto 28px;padding:18px 22px}
.question-box-intro{margin-bottom:12px}
.question-greeting{gap:12px;margin:0 0 6px}
.question-greeting h2{font-size:21px;line-height:1.25;padding:12px 15px;max-width:370px}
.question-box-intro>p{font-size:13px;margin:6px 0}
.question-box-intro .question-purpose{font-size:11px;margin-top:4px}
.question-box form{gap:5px}
.question-box label{font-size:12px;margin-top:3px}
.question-box select{min-height:36px;padding:6px 9px;font-size:13px}
.question-box textarea{min-height:82px;padding:10px 12px;font-size:13px}
.question-box .form-note{font-size:10px}
.question-box .btn{min-height:40px;padding:9px 20px;margin-top:5px;font-size:13px}
@media(max-width:639px){.question-box{padding:16px}.question-greeting h2{font-size:18px;padding:10px 12px}.question-box textarea{min-height:88px}.question-buddy{flex-basis:90px;width:90px;height:110px}}

/* Seated, settled movement: no hopping or rapidly swapping wave poses. */
.question-buddy{animation:buddy-breathe 6s ease-in-out infinite;transform-origin:50% 85%}
.question-buddy .buddy-sprite,.question-buddy:hover .buddy-sprite{animation:none;background-image:url('../assets/buddy-idle.webp')}
.question-buddy.is-waving .buddy-sprite,.question-buddy.is-waving:hover .buddy-sprite{animation:buddy-gentle-wink 1.7s steps(1,end) 1}
.buddy-hello{transition:opacity .22s ease}
@keyframes buddy-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
@keyframes buddy-gentle-wink{0%,13%,30%,100%{background-image:url('../assets/buddy-idle.webp')}14%,29%{background-image:url('../assets/buddy-wink.webp')}}
.question-box{isolation:isolate;border-color:#448e99;box-shadow:0 14px 34px #0005,0 0 24px #35ddd518;overflow:visible}
.question-box:before{background-position:50% 50%;opacity:.16;animation:forest-light 14s ease-in-out infinite alternate}
.question-box:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 15% 15%,#39e9cf20,transparent 55%),radial-gradient(ellipse at 90% 85%,#76acff18,transparent 50%);animation:forest-shimmer 9s ease-in-out infinite alternate}
.question-box>.question-woodland{position:absolute;inset:-20px -34px;pointer-events:none;z-index:2;background:url('../assets/question-forest-frame.webp') center/100% 100% no-repeat}
.question-firefly{position:absolute;left:4%;top:16%;width:3px;height:3px;border-radius:50%;background:#e6ff9b;box-shadow:0 0 5px 2px #bbff6266,0 0 12px #5dffd155;animation:firefly-drift 8s ease-in-out infinite;opacity:.7}
.question-firefly:nth-child(2){left:8%;top:38%;animation-delay:-2s;animation-duration:11s}
.question-firefly:nth-child(3){left:3%;top:64%;animation-delay:-5s}
.question-firefly:nth-child(4){left:7%;top:88%;animation-delay:-7s;animation-duration:10s}
.question-firefly:nth-child(5){left:94%;top:12%;animation-delay:-3s}
.question-firefly:nth-child(6){left:97%;top:33%;animation-delay:-6s;animation-duration:12s}
.question-firefly:nth-child(7){left:93%;top:56%;animation-delay:-1s}
.question-firefly:nth-child(8){left:96%;top:82%;animation-delay:-4s;animation-duration:9s}
.question-firefly:nth-child(9){left:15%;top:3%;animation-delay:-6s;animation-duration:13s}
.question-firefly:nth-child(10){left:84%;top:96%;animation-delay:-2s;animation-duration:10s}
.question-box textarea,.question-box select{background:#0d1729ed;border-color:#4f8091;transition:border-color .2s ease,box-shadow .2s ease}
.question-box textarea:focus,.question-box select:focus{border-color:#8de9e3;box-shadow:0 0 15px #51ddd324}
.question-greeting h2{border-color:#4f808f;background:#111e30ed;box-shadow:0 4px 18px #0003}
@keyframes forest-light{0%{opacity:.12;filter:brightness(.9)}100%{opacity:.22;filter:brightness(1.18)}}
@keyframes forest-shimmer{0%{opacity:.35}100%{opacity:.9}}
@keyframes firefly-drift{0%,100%{transform:translate(0,0);opacity:.25}30%{transform:translate(7px,-12px);opacity:.9}65%{transform:translate(-5px,-20px);opacity:.45}}
@media(max-width:639px){.question-box{margin-left:12px;margin-right:12px}.question-box>.question-woodland{inset:-12px -18px}.question-firefly{width:2px;height:2px}}
@media(prefers-reduced-motion:reduce){.question-buddy,.question-buddy .buddy-sprite,.question-box:before,.question-box:after,.question-firefly{animation:none!important}.buddy-hello{transition:none}.question-firefly{opacity:.55}}
.question-box>.question-woodland{inset:-20px -65px;z-index:0}
.question-box>.question-box-intro,.question-box>form{position:relative;z-index:1}
@media(max-width:639px){.question-box>.question-woodland{inset:-12px -30px}}

/* Blendy stays planted; only the raised arm waves on a deliberate tap. */
.question-buddy,.question-buddy:hover,.question-buddy.is-waving{animation:none;transform:none}
.question-buddy .buddy-sprite,.question-buddy:hover .buddy-sprite{animation:none}
.buddy-arm{display:none;position:absolute;inset:0;background:url('../assets/buddy-wave-a.webp') center/contain no-repeat;clip-path:polygon(68% 40%,100% 40%,100% 73%,68% 73%);transform-origin:73% 61%;pointer-events:none}
.question-buddy.is-waving .buddy-sprite,.question-buddy.is-waving:hover .buddy-sprite{animation:none;background-image:url('../assets/buddy-wave-a.webp');clip-path:polygon(0 0,100% 0,100% 40%,68% 40%,68% 73%,100% 73%,100% 100%,0 100%)}
.question-buddy.is-waving .buddy-arm{display:block;animation:blendy-hand-wave .65s ease-in-out 3}
@keyframes blendy-hand-wave{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-13deg)}}
/* No rectangular outer frame: two offset trees enclose a soft forest clearing. */
.question-box{border:0;background:transparent;box-shadow:none;padding-top:26px;padding-bottom:28px}
.question-box:before{inset:-20px -25px;border-radius:0;background-size:125% 125%;background-position:40% 45%;opacity:.4;filter:none;mask-image:radial-gradient(ellipse at 49% 49%,#000 45%,#000b 65%,transparent 76%);animation:forest-pan 22s ease-in-out infinite alternate}
.question-box:after{inset:-12px -18px;z-index:0;border-radius:0;background:linear-gradient(115deg,transparent 15%,#70e5d200 30%,#70e5d22a 43%,#8fe9f018 48%,transparent 61%);background-size:220% 100%;mask-image:radial-gradient(ellipse,#000 40%,transparent 73%);animation:forest-rays 12s ease-in-out infinite alternate}
.question-box>.question-woodland{inset:-26px -60px;background:none;z-index:0}
.question-woodland:before,.question-woodland:after{content:"";position:absolute;pointer-events:none;background:url('../assets/question-forest-frame.webp') center/100% 100% no-repeat}
.question-woodland:before{inset:-8px 0 4px -8px;clip-path:inset(0 66% 0 0);transform:rotate(-4deg);mask-image:linear-gradient(transparent,#000 7%,#000 89%,transparent)}
.question-woodland:after{inset:22px -6px -18px 0;clip-path:inset(0 0 0 65%);transform:rotate(5deg);mask-image:linear-gradient(transparent,#000 9%,#000 93%,transparent)}
.question-greeting h2{background:#0d1b2ce8}
.question-box form{background:#091424b8;border-radius:12px;padding:12px}
@keyframes forest-pan{0%{background-position:35% 40%;opacity:.31}100%{background-position:63% 62%;opacity:.46}}
@keyframes forest-rays{0%{background-position:0% 50%;opacity:.3}100%{background-position:100% 50%;opacity:.85}}
@media(max-width:639px){.question-box>.question-woodland{inset:-20px -22px}.question-box:before{inset:-16px -8px}.question-box form{padding:8px}.question-woodland:before{transform:rotate(-2deg)}.question-woodland:after{transform:rotate(2deg)}}
@media(prefers-reduced-motion:reduce){.question-buddy.is-waving .buddy-arm,.question-box:before,.question-box:after{animation:none!important}.question-box:before{opacity:.35}.question-buddy.is-waving .buddy-sprite{clip-path:none;background-image:url('../assets/buddy-idle.webp')!important}.question-buddy.is-waving .buddy-arm{display:none}}

/* Page-edge trees sit behind the restored card, rather than framing its sides. */
.question-grove{position:relative;isolation:isolate;width:100vw;left:50%;margin-left:-50vw;padding:48px 24px 66px;overflow:hidden;overflow:clip}
.question-grove .question-box{position:relative;z-index:1;width:min(620px,100%);margin:0 auto;padding:18px 22px 24px;border:1px solid #52818e;border-radius:12px;background:#0b1123;box-shadow:0 16px 40px #0006}
.question-grove .question-box:before{inset:0;border-radius:inherit;mask-image:none;background-size:125% 125%;opacity:.2;animation:forest-pan 22s ease-in-out infinite alternate}
.question-grove .question-box:after{inset:0;border-radius:inherit;mask-image:none}
.question-grove .question-box form{background:transparent;padding:0}
.question-grove>.question-woodland{position:absolute;inset:0;pointer-events:none;z-index:0}
.question-grove>.question-woodland:before,.question-grove>.question-woodland:after{clip-path:none;mask-image:none;background:url('../assets/question-edge-branch.webp') center/contain no-repeat;width:65%;max-width:900px;height:560px;inset:auto}
.question-grove>.question-woodland:before{left:-170px;top:-80px;transform:rotate(18deg)}
.question-grove>.question-woodland:after{right:-190px;bottom:-100px;transform:scaleX(-1) rotate(-14deg);width:60%;height:470px}
.question-grove .question-firefly{z-index:1}
.question-grove .question-firefly:nth-child(1){left:4%;top:13%}
.question-grove .question-firefly:nth-child(2){left:13%;top:24%}
.question-grove .question-firefly:nth-child(3){left:20%;top:32%}
.question-grove .question-firefly:nth-child(4){left:8%;top:37%}
.question-grove .question-firefly:nth-child(5){left:92%;top:69%}
.question-grove .question-firefly:nth-child(6){left:83%;top:79%}
.question-grove .question-firefly:nth-child(7){left:96%;top:86%}
.question-grove .question-firefly:nth-child(8){left:78%;top:89%}
.question-grove .question-firefly:nth-child(9){left:16%;top:19%}
.question-grove .question-firefly:nth-child(10){left:88%;top:92%}
/* No arm animation or body motion; just one brief blink when clicked. */
.question-buddy,.question-buddy:hover,.question-buddy.is-waving{animation:none!important;transform:none!important}
.question-buddy .buddy-sprite,.question-buddy:hover .buddy-sprite{clip-path:none;background-image:url('../assets/buddy-idle.webp');animation:none}
.question-buddy.is-waving .buddy-sprite,.question-buddy.is-waving:hover .buddy-sprite{clip-path:none;animation:blendy-click-blink 2.4s steps(1,end) 1;background-image:url('../assets/buddy-idle.webp')}
@keyframes blendy-click-blink{0%,7%,17%,100%{background-image:url('../assets/buddy-idle.webp')}8%,16%{background-image:url('../assets/buddy-blink.webp')}}
@media(max-width:639px){.question-grove{padding:42px 22px 50px}.question-grove .question-box{padding:16px}.question-grove>.question-woodland:before{width:100%;height:320px;left:-160px;top:-60px}.question-grove>.question-woodland:after{width:100%;height:280px;right:-150px;bottom:-75px}}
@media(prefers-reduced-motion:reduce){.question-grove .question-box:before,.question-grove .question-box:after,.question-buddy.is-waving .buddy-sprite{animation:none!important}}
.question-grove{width:calc(100vw - 20px);margin-left:calc(-50vw + 10px)}

/* Continuous page scenery, tucked behind the introduction above the card. */
.question-grove{margin-top:-94px;padding-top:142px;overflow:visible;z-index:0}
.question-grove>.question-woodland{overflow:hidden;overflow:clip;inset:0;mask-image:linear-gradient(transparent,#000 13%,#000 92%,transparent)}
.question-grove>.question-woodland:before{left:-12%;top:-100px;width:124%;max-width:none;height:660px;transform:rotate(-13deg);background-size:100% 100%;opacity:.78}
.question-grove>.question-woodland:after{right:-14%;bottom:-160px;width:126%;max-width:none;height:600px;transform:scaleX(-1) rotate(9deg);background-size:100% 100%;opacity:.85}
.question-grove .question-firefly{width:4px;height:4px;background:#fff5bb;box-shadow:0 0 4px 2px #fff8c9aa,0 0 12px 5px #dfff6577,0 0 25px 9px #a6ffc82b;animation-name:firefly-lantern;opacity:.85}
.question-grove .question-firefly:nth-child(3n){width:3px;height:3px;background:#d8ffb1}
@keyframes firefly-lantern{0%,100%{transform:translate(0,0);opacity:.45}32%{transform:translate(10px,-16px);opacity:1}68%{transform:translate(-8px,-27px);opacity:.65}}
@media(max-width:639px){.question-grove{margin-top:-66px;padding-top:108px}.question-grove>.question-woodland:before{left:-30%;top:-20px;width:160%;height:390px}.question-grove>.question-woodland:after{right:-35%;bottom:-60px;width:170%;height:340px}.question-grove .question-firefly{width:3px;height:3px}}
@media(prefers-reduced-motion:reduce){.question-grove .question-firefly{animation:none!important;opacity:.7}}