*{box-sizing:border-box}body{margin:0;background:#211928;color:#fff0d2;font-family:system-ui,sans-serif;min-height:100svh;display:flex;justify-content:center}button{font:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}main{width:min(100%,510px);padding:20px 16px 16px;text-align:center}header small{color:#efb984;text-transform:uppercase;letter-spacing:3px;font-size:11px;font-weight:800}h1{font: bold clamp(25px,7vw,34px) Georgia,serif;margin:7px 0} .subtitle{font-size:14px;color:#ddc6c1;margin:0 0 16px}.stats{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin-bottom:12px}.pill{border:1px solid #715146;border-radius:25px;padding:7px 12px;background:#32232d}.sound{color:#ffdfb1;cursor:pointer}.house{position:relative;border:5px solid #805348;border-radius:100px 100px 22px 22px;background:repeating-linear-gradient(90deg,#533646 0,#533646 37px,#583a49 38px,#583a49 40px);box-shadow:0 12px 40px #100c1580,inset 0 0 40px #241723;overflow:hidden}.house:after{content:'';position:absolute;bottom:0;left:0;width:100%;height:28%;background:repeating-linear-gradient(0deg,#6d443a 0,#6d443a 32px,#57372e 33px,#57372e 35px);border-top:5px solid #986046;pointer-events:none}.window{position:absolute;top:14px;left:calc(50% - 36px);width:72px;height:88px;background:#29283e;border:6px solid #b57753;border-radius:40px 40px 4px 4px;box-shadow:0 0 25px #eab46825}.window:before{content:'☾';position:absolute;color:#ffda8e;font-size:40px;left:9px;top:-4px}.window:after{content:'';position:absolute;left:28px;top:0;height:100%;border-left:4px solid #b57753}.web{position:absolute;top:0;right:0;width:110px;height:120px;opacity:.7;z-index:2}.spider{position:absolute;top:37px;left:26px;width:36px;height:70px;z-index:2;transform-origin:50% 0;animation:sway 5s ease-in-out infinite}@keyframes sway{50%{transform:rotate(9deg)}}#board{position:relative;z-index:3;height:clamp(360px,55svh,450px);margin:87px 17px 16px}.character{position:absolute;width:46%;height:31%;padding:0;border:0;background:transparent;color:#ffe5c3;left:0;top:0;transition:left 1.1s cubic-bezier(.45,0,.2,1),top 1.1s cubic-bezier(.45,0,.2,1);cursor:pointer;display:flex;align-items:center;flex-direction:column;justify-content:flex-end;border-radius:20px}.character[aria-disabled=true]{cursor:default}.character:focus-visible{outline:3px dashed #ffe0a1;outline-offset:2px}.character .art{height:calc(100% - 25px);width:100%;overflow:visible;filter:drop-shadow(0 7px 3px #20121b55)}.figure{transform-origin:60px 110px;transform:translateY(7px) scaleY(.87);transition:transform .2s}.character.active .figure{transform:translateY(-6px) scaleY(1.06)}.halo{opacity:0;transition:opacity .15s}.character.active .halo{opacity:1}.character.active .name{background:#ffdb96;color:#382234}.name{font-size:13px;font-weight:700;line-height:22px;border-radius:14px;padding:0 10px;background:#32222fb8;white-space:nowrap}.character.wrong{animation:shake .3s}@keyframes shake{25%,75%{translate:-5px}50%{translate:5px}}.message{min-height:65px;margin:16px 0 4px}#status{font-weight:800;font-size:20px;color:#ffdc9a;margin:0}#hint{font-size:14px;color:#ddc6c1;margin:5px 0}.progress{display:flex;justify-content:center;gap:6px;min-height:12px;margin:9px 0;flex-wrap:wrap}.dot{width:8px;height:8px;background:#78535c;border-radius:50%}.dot.done{background:#ffcb7f}.actions{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}.actions button{border-radius:14px;border:1px solid #956448;padding:12px 18px;font-weight:800;background:#ffc879;color:#38262d;cursor:pointer}.actions button.secondary{background:#3c2b37;color:#ffe0b3}.actions button:disabled{opacity:.45;cursor:default}footer{font-size:12px;color:#bda5ad;margin:14px 0 0;line-height:1.6}@media all{:root[data-motion="reduce"] .spider{animation:none}:root[data-motion="reduce"] .character{transition-duration:.01s}:root[data-motion="reduce"] .figure{transition:none}}@media(max-height:730px){main{padding-top:12px}.subtitle{margin-bottom:10px}#board{height:340px;margin-top:75px}.message{margin-top:10px}footer{margin-top:9px}}

/* A circle of friends, with room for a candy spell in the middle. */
.house:after{height:calc(100% - 115px);background:repeating-linear-gradient(0deg,transparent 0,transparent 48px,#452c3040 49px,#452c3040 51px),repeating-linear-gradient(100deg,#80543f 0,#80543f 78px,#754b3d 79px,#754b3d 81px);border-top:6px solid #a77651}
.spider{left:auto;right:26px;top:48px}
#board{height:clamp(420px,57svh,500px);margin:93px 12px 10px}
.character{width:25%;height:29%;justify-content:center}
.character .art{height:100%;width:100%;overflow:visible}
.figure{transform:translateY(0) scaleY(1.1)}
.character.active .figure{transform:translateY(-7px) scaleY(1.16)}
.character.active .halo{opacity:.32}
#cauldron{position:absolute;left:36%;top:41%;width:28%;height:25%;pointer-events:none;filter:drop-shadow(0 6px 6px #21172460);z-index:2;overflow:visible}
#cauldron.brewing{animation:brew .7s ease-in-out}
@keyframes brew{30%{transform:scale(1.08) rotate(-3deg)}60%{transform:scale(1.05) rotate(3deg)}}
.spell-ring{position:absolute;left:6%;top:26%;width:88%;height:61%;border:2px dashed #ffd59640;border-radius:50%;pointer-events:none;transform:rotate(-7deg);box-shadow:inset 0 0 35px #ffd5960d}
.candy-meter{font-size:13px;color:#f3c798;margin:10px 0 0;min-height:18px}
@media(max-height:730px){#board{height:390px;margin-top:88px}}
@media all{:root[data-motion="reduce"] #cauldron.brewing{animation:none}}

.flying-sweet{position:absolute;left:50%;top:49%;width:23px;height:18px;pointer-events:none;z-index:12;animation:candy-flight 1s ease-in-out both}
@keyframes candy-flight{0%{transform:translate(-50%,-50%) scale(.6);opacity:1}45%{transform:translate(calc(var(--dx)*.45),calc(var(--dy)*.45 - 30px)) rotate(100deg) scale(1.2);opacity:1}85%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(240deg) scale(.5);opacity:0}}
.character.energized .art{filter:drop-shadow(0 0 12px #ffe899)}
.character.energized .figure{animation:happy-hop .55s ease-in-out 2}
@keyframes happy-hop{50%{transform:translateY(-13px) scaleY(1.12)}}
@media all{:root[data-motion="reduce"] .flying-sweet{animation:gentle-gift 1s linear both;left:var(--target-x);top:var(--target-y)}:root[data-motion="reduce"] .character.energized .figure{animation:none}@keyframes gentle-gift{0%,100%{opacity:0}50%{opacity:1}}}

header{position:relative;margin:0 0 18px;padding:0 40px}
h1{font-size:clamp(25px,6.5vw,34px)}
#restart{position:absolute;right:0;top:50%;transform:translateY(-50%);width:40px;height:44px;border:0;background:transparent;color:#dfb99d;font-size:27px;cursor:pointer;border-radius:12px}
#restart:hover{background:#ffffff0a;color:#fff0d2}
#restart:focus-visible{outline:2px solid #ffdc9a}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.progress{margin:14px 0 10px}
.actions{margin-bottom:12px}
.house[data-phase="idle"]{cursor:pointer}
.house[data-phase="input"] .spell-ring{border-color:#ffdf9b88;box-shadow:inset 0 0 35px #ffd59620}
.house[data-phase="mistake"]{border-color:#b47781}
.actions button.needs-replay{box-shadow:0 0 0 2px #efbe87;color:#ffe2aa}
#replay{width:52px;height:48px;padding:10px;display:grid;place-items:center}

.eyes{transform-box:fill-box;transform-origin:center}
.character.blinking .eyes{animation:little-blink .3s ease-in-out}
@keyframes little-blink{0%,100%{transform:scaleY(1)}45%,65%{transform:scaleY(.12)}}
.idle-motion{transform-origin:60px 110px}
.character.fidgeting .idle-motion{animation:waiting-twitch .8s ease-in-out}
@keyframes waiting-twitch{0%,100%{transform:rotate(0)}30%{transform:rotate(-2deg) translateX(-1px)}55%{transform:rotate(1.5deg)}75%{transform:rotate(-.7deg)}}
#cauldron{filter:drop-shadow(0 6px 6px #21172460) drop-shadow(0 0 var(--glow-radius,0px) rgb(255 194 92 / var(--glow-alpha,0)));transition:filter .7s ease}
.pot-energy{transform-origin:80px 140px}
#cauldron.charged .pot-energy{animation:charged-pot var(--pot-period,3s) ease-in-out infinite}
@keyframes charged-pot{0%,65%,100%{transform:rotate(0) translateX(0)}72%,86%{transform:rotate(calc(-1 * var(--pot-tilt))) translateX(calc(-1 * var(--pot-shift)))}79%,93%{transform:rotate(var(--pot-tilt)) translateX(var(--pot-shift))}}
@media all{:root[data-motion="reduce"] .character.blinking .eyes,:root[data-motion="reduce"] .character.fidgeting .idle-motion,:root[data-motion="reduce"] #cauldron.charged .pot-energy{animation:none}}

.window{overflow:hidden}.lightning{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.window.storm .lightning{animation:little-lightning .8s ease-out}.window.storm{animation:window-glow .8s ease-out}
@keyframes little-lightning{0%{opacity:0}10%,30%{opacity:1}65%{opacity:.5}100%{opacity:0}}
@keyframes window-glow{0%,100%{box-shadow:0 0 25px #eab46825}12%,30%{box-shadow:0 0 30px 8px #ffe4a5a0}65%{box-shadow:0 0 24px 4px #ffe4a550}}
#bonus-candies{position:absolute;top:12px;left:calc(50% - 53px);width:106px;display:flex;gap:5px;z-index:5;pointer-events:none}
.bonus-sweet{width:32px;height:23px;filter:drop-shadow(0 0 5px #ffd68c);transition:opacity .55s,transform .55s;animation:hover-candy 2.8s ease-in-out infinite}
.bonus-sweet:nth-child(2){animation-delay:-.9s}.bonus-sweet:nth-child(3){animation-delay:-1.8s}.bonus-sweet.gone{opacity:0;animation:none;transform:translateY(-9px) scale(.5)}
@keyframes hover-candy{50%{translate:0 3px}}
#bat{position:absolute;top:40px;left:-70px;width:58px;height:40px;z-index:5;pointer-events:none;opacity:0}
#bat.flying{animation:bat-cross 3.7s linear both}#bat.flying .bat-wings{transform-origin:50px 30px;animation:flap .23s ease-in-out infinite alternate}
@keyframes bat-cross{0%{left:-70px;top:45px;opacity:1}45%{top:18px}100%{left:105%;top:58px;opacity:1}}
@keyframes flap{to{transform:scaleY(.45)}}
@media all{:root[data-motion="reduce"] .bonus-sweet,:root[data-motion="reduce"] #bat.flying .bat-wings{animation:none}:root[data-motion="reduce"] .window.storm .lightning{animation:none;opacity:.45}:root[data-motion="reduce"] .window.storm{animation:none}:root[data-motion="reduce"] #bat.flying{animation:none;left:18px;opacity:1}}

.bonus-sweet.collecting{animation:into-cauldron .7s var(--arrival-delay,0s) ease-in both;translate:0 0}
@keyframes into-cauldron{0%{transform:translate(0,0) scale(1);opacity:1}75%{opacity:1}100%{transform:translate(var(--land-x),var(--land-y)) rotate(150deg) scale(.35);opacity:0}}
@media all{:root[data-motion="reduce"] .bonus-sweet.collecting{animation:quiet-collection .7s ease-in both}@keyframes quiet-collection{to{opacity:0}}}

/* The night unfolds around the original game. */
[hidden]{display:none!important}
.window{width:82px;height:82px;left:clamp(20px,8%,38px);top:16px;border:0;isolation:isolate;z-index:1}
.window:before{content:none}
.window:after{content:'';position:absolute;inset:0;width:auto;height:auto;border:6px solid #b57753;border-radius:inherit;background:linear-gradient(to right,transparent calc(50% - 2px),#b57753 calc(50% - 2px),#b57753 calc(50% + 2px),transparent calc(50% + 2px));z-index:3;pointer-events:none}
.window .lightning{z-index:1}
#moon{z-index:0;position:absolute;left:8px;top:5px;width:65px;height:65px;overflow:visible;transition:filter 1.2s}
#moon.full{filter:drop-shadow(0 0 10px #ffe2a1)}
#moon.full .moon-disc{animation:moon-welcome 1.6s ease-in-out 2;transform-origin:25px 25px}
@keyframes moon-welcome{50%{transform:scale(1.08)}}
#moon-face{opacity:0;transition:opacity 1s}#moon.full #moon-face{opacity:1}
#moon.blowing #moon-face{transform:scale(.94,1.05);transform-origin:center}
#bonus-candies{left:calc(50% - 53px);top:12px;width:106px;gap:5px}.bonus-sweet{width:32px}
#web-candies{opacity:1}.spider.rewarded{animation:spider-dance .5s ease-in-out 3}
@keyframes spider-dance{50%{transform:translateY(7px) rotate(-6deg)}}
.character .art{transition:opacity .85s,transform 1.05s}
.character.sleepy .eyes{transform:scaleY(.12)}
.character.sleepy .idle-motion{animation:sleepy-wave 1s ease-in-out}
@keyframes sleepy-wave{30%{transform:rotate(-5deg)}65%{transform:rotate(5deg)}}
.sleepy-bubble{opacity:0}.character.sleepy .sleepy-bubble{opacity:1}
.character.departing .art{opacity:0;transform:translate(260px,35px) rotate(9deg)}
.character.arriving .art{opacity:0;transform:translate(-170px,0)}
.character.asleep{opacity:0;visibility:hidden;pointer-events:none}
.house.quiet #board{opacity:.55}.house.quiet .spider,.house.quiet .pot-energy{animation:none}
#board{transition:opacity 2s}.house.quiet{box-shadow:0 12px 40px #100c1580,inset 0 0 70px #21152b}
#cat{position:absolute;bottom:4px;left:-110px;width:102px;height:78px;z-index:9;pointer-events:none;opacity:0}
#cat.walking{animation:cat-stroll 7s linear both}
#cat.walking .cat-legs{transform-origin:65px 65px;animation:cat-steps .34s ease-in-out infinite alternate}
#cat.arching .cat-body{transform-origin:65px 62px;animation:cat-arch 1.4s ease-in-out}
@keyframes cat-stroll{0%{left:-110px;opacity:1}38%,62%{left:40%;opacity:1}100%{left:110%;opacity:1}}
@keyframes cat-steps{to{transform:skewX(9deg)}}
@keyframes cat-arch{30%,65%{transform:scaleY(1.4) translateY(-2px)}}
.moon-kiss,.world-gift{position:absolute;pointer-events:none;z-index:14;width:24px;height:24px;animation:world-flight 1.15s ease-in-out both}
@keyframes world-flight{0%{transform:translate(0,0) scale(.5);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.75);opacity:0}}
#night-end{padding:12px 8px 24px;text-align:center}#night-end h2{font:700 25px Georgia,serif;color:#ffdf9a;margin:8px 0}#night-end p{margin:9px 0 16px;color:#e4cbbf}
#play-again{font:700 16px system-ui;padding:13px 25px;border-radius:15px;background:#ffd08a;color:#392638;border:1px solid #bf8b5c;cursor:pointer;min-height:48px}
@media all{:root[data-motion="reduce"] #moon.full .moon-disc,:root[data-motion="reduce"] .spider.rewarded,:root[data-motion="reduce"] .character.sleepy .idle-motion,:root[data-motion="reduce"] #cat.walking .cat-legs,:root[data-motion="reduce"] #cat.arching .cat-body{animation:none}:root[data-motion="reduce"] .character .art,:root[data-motion="reduce"] #board{transition:none}:root[data-motion="reduce"] .character.departing .art,:root[data-motion="reduce"] .character.arriving .art{transform:none}:root[data-motion="reduce"] #cat.walking{animation:none;left:10px;opacity:1}:root[data-motion="reduce"] .moon-kiss,:root[data-motion="reduce"] .world-gift{animation:quiet-collection 1s ease-out both;transform:none}}
.web{opacity:1}.web>g:first-child{opacity:.7}#web-candies{filter:drop-shadow(0 0 2px #ffd799)}
.spider{width:40px;height:75px;right:24px;top:43px}

/* Scenery never intercepts character taps, including while crossing a greeting. */
#cat,#bat,#moth,#mouse,#snail,#cat *,#bat *,#moth *,#mouse *,#snail *{pointer-events:none}
.character .art{pointer-events:none}