@import url('./fonts/fonts.css');
:root{color-scheme:dark;--cream:#fff0cd;--ink:#35251a;--gold:#f5c779;--wood:#52351f;--mint:#9cdfbb;font:16px 'DM Sans',sans-serif;background:#102622;color:var(--cream)}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input,select{font:inherit}button{cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #a5f1d2;outline-offset:5px}button{transition:filter .2s,transform .2s}button:hover:not(:disabled){filter:brightness(1.14)}button:active:not(:disabled){transform:scale(.97)}button[hidden],*[hidden]{display:none!important}#world{width:100vw;height:100dvh;min-height:360px;position:relative;overflow:hidden}#viewport{width:100%;height:100%;overflow:auto hidden;scrollbar-width:none;overscroll-behavior-x:contain}#viewport::-webkit-scrollbar{display:none}#stage{width:max(100vw,150dvh);height:max(100dvh,66.667vw);min-height:360px;position:relative;overflow:hidden;transform-origin:24% 48%;transition:filter .35s}#backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;user-select:none;pointer-events:none}#stage::after{content:'';position:absolute;inset:0;background:linear-gradient(#0612124d,transparent 20%,transparent 76%,#06121275);pointer-events:none;z-index:4}.hud{position:absolute;left:0;right:0;top:0;padding:25px 30px;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none;z-index:10}.hud h1{font:500 clamp(30px,4vw,60px)/1 Fredoka,sans-serif;color:#ffedc5;text-shadow:0 3px 1px #37271c,0 3px 20px #000,0 1px 35px #000;letter-spacing:1px;margin:0;transform:rotate(-4deg)}.tools{display:flex;gap:12px;pointer-events:auto}.round{border-radius:50%;height:51px;width:51px;border:2px solid #a8875c;background:radial-gradient(circle at 35% 20%,#594a38,#231f19);box-shadow:0 3px 0 #171912,0 5px 20px #0006;color:#ffe5b1;font-size:28px}.round.small{height:44px;width:44px;font-size:24px}.bottom-hud{position:absolute;bottom:22px;left:28px;right:28px;display:flex;justify-content:space-between;align-items:center;gap:15px;pointer-events:none;z-index:10}.bottom-hud button{pointer-events:auto}.bottom-hud #worldHint{font:400 18px Fredoka,sans-serif;text-shadow:0 2px 4px #000,0 0 16px #000;flex:1;text-align:center}.wood-button,.world-label{background:linear-gradient(100deg,#805530,#aa7542 45%,#8b5b32);border:1px solid #c39c63;box-shadow:0 4px 0 #412b1d,0 6px 12px #0004;color:#fff0d3;font:500 19px Fredoka,sans-serif;border-radius:4px;padding:12px 19px;text-shadow:0 1px 2px #3a2217}.hotspot{position:absolute;border:0;background:transparent;z-index:5;border-radius:35%;padding:0;display:flex;justify-content:center;align-items:flex-end;isolation:isolate}.hotspot::before{content:'';inset:0;position:absolute;border-radius:40%;box-shadow:inset 0 0 45px #fbc96700;transition:box-shadow .3s,background .3s}.hotspot:hover::before,.hotspot:focus-visible::before{box-shadow:inset 0 0 45px #ffd77435,0 0 35px #f9d78330;background:#f9d5820b}.world-label{white-space:nowrap;font-size:clamp(15px,1.45vw,23px);padding:7px 14px;position:relative;transform:rotate(-4deg);pointer-events:none;margin-bottom:-5px;transition:transform .2s}.hotspot:hover .world-label{transform:rotate(0deg) translateY(-5px)}.hotspot.secret .world-label{opacity:0}.hotspot.secret:hover .world-label,.hotspot.secret:focus-visible .world-label{opacity:1}.hotspot.door{border-radius:45% 45% 10% 10%}.hotspot.door:hover{background:radial-gradient(ellipse,#ffda6b50,transparent 70%)}.character{position:absolute;left:43%;top:18%;width:34%;height:67%;z-index:6;transform-origin:50% 91%;animation:breathe 5.5s ease-in-out infinite;pointer-events:none}.character button{border:0;background:none;padding:0;width:100%;height:100%;position:relative;pointer-events:auto;filter:drop-shadow(0 16px 10px #0a140d88)}.character img{height:100%;max-width:100%;object-fit:contain;user-select:none;pointer-events:none}.character.house{left:51%;top:40%;width:20%;height:37%}.character.dancing{animation:wiggle .55s ease-in-out 8}.character.jumping{animation:jump .35s ease-in-out 4}.character.sleeping{animation:breathe 8s ease-in-out infinite;filter:brightness(.75)}#hat{position:absolute;top:-4%;left:50%;transform:translateX(-50%) rotate(-9deg);font-size:clamp(55px,8vw,145px);line-height:1;pointer-events:none}.house #hat{font-size:clamp(45px,4vw,85px)}.speech{position:absolute;left:35%;top:18%;max-width:240px;background:#fff0d4;color:#4a3220;padding:20px 25px;font:400 22px/1.2 Fredoka,sans-serif;border-radius:43% 42% 42% 7%;box-shadow:0 6px 15px #0003;z-index:7;transform:rotate(-4deg);pointer-events:none}.speech.house{left:59%;top:33%;font-size:19px;max-width:230px;padding:17px 20px}.speech.quiet{opacity:0;transition:opacity 1s}#atmosphere,#sparks{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}.firefly{position:absolute;width:5px;height:5px;border-radius:50%;background:#ffe19b;box-shadow:0 0 7px 3px #ffd76aaa,0 0 23px 6px #eabd3940;animation:drift var(--duration,8s) ease-in-out infinite alternate;animation-delay:var(--delay,0s)}.glow{position:absolute;border-radius:50%;background:radial-gradient(ellipse,#ffd05b66,transparent 68%);mix-blend-mode:screen;animation:glow 3.5s ease-in-out infinite alternate}.steam{position:absolute;border-radius:50%;width:2%;height:5%;background:radial-gradient(ellipse,#d6f3cc70,transparent 65%);filter:blur(4px);animation:steam 3s ease-out infinite}.loose-sock{position:absolute;left:36%;top:20%;font-size:40px;animation:floatSock 6s ease-in-out infinite}.spark{position:absolute;animation:spark 1.6s ease-out forwards;font-size:24px}.ripple{position:absolute;border:2px solid #ffd995;border-radius:50%;animation:ripple 1s ease-out forwards;width:40px;height:40px}#soundInvite{position:absolute;bottom:77px;left:50%;transform:translateX(-50%);z-index:12;border:1px solid #d4ae73;background:#1a2b23ed;border-radius:28px;padding:4px;display:flex;box-shadow:0 6px 22px #0006;white-space:nowrap}#soundInvite button{border:0;background:none;padding:11px 15px;font-size:14px}#dismissSound{font-size:20px!important;border-left:1px solid #ab9d7733!important}#toast{position:absolute;top:100px;left:50%;transform:translate(-50%,-10px);opacity:0;padding:13px 22px;border:1px solid #b29762;background:#253a2cf2;border-radius:30px;z-index:50;pointer-events:none;transition:opacity .3s,transform .3s;text-align:center;max-width:90vw;font-size:15px}#toast.show{opacity:1;transform:translate(-50%,0)}#transition{position:absolute;inset:0;z-index:60;background:#091512;opacity:0;pointer-events:none;transition:opacity .4s}.travelling #transition{opacity:1;pointer-events:auto}.travelling #stage{filter:brightness(.4)}
dialog{width:min(620px,calc(100vw - 30px));max-height:calc(100dvh - 42px);overflow:auto;border:2px solid #a38653;border-radius:24px;background:radial-gradient(ellipse at top,#fcf0d3,#ecddba);color:var(--ink);padding:23px 28px 28px;box-shadow:0 20px 100px #0009;color-scheme:light}dialog::backdrop{background:#041511b5;backdrop-filter:blur(5px)}dialog.wide{width:min(780px,calc(100vw - 24px))}.dialog-bar{display:flex;align-items:center;justify-content:space-between;gap:12px}.dialog-bar>span{font-size:11px;letter-spacing:1.5px;color:#7b6545;font-weight:700}.dialog-bar button{background:#ddc59c;border:0;border-radius:50%;height:37px;min-width:37px;font-size:27px;color:#523b22}h2{font:500 34px/1.1 Fredoka,sans-serif;margin:12px 0 15px}h3{font:500 23px/1.2 Fredoka,sans-serif;margin:10px 0}p{font-size:16px;line-height:1.6;margin:10px 0 20px;color:#6a5539}.action{border:1px solid #8a7348;border-radius:13px;background:#f8ebce;color:#513a23;padding:13px 18px;font-weight:600;min-height:47px}.action.primary{background:#36563c;border-color:#345338;color:#fff3d6}.action.accent{background:#925830;color:#fff0cc}.button-row{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 5px}.button-row .action{flex:1}.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.tile{background:#fffae6;border:1px solid #caba93;border-radius:15px;color:#563c23;padding:15px 8px;min-height:85px;font-size:15px}.tile>span{display:block;font-size:33px;margin-bottom:7px}.tile[aria-pressed=true]{background:#cddc9d;border:2px solid #5f7839}.recipe{margin:18px 0;padding:16px;background:#e1d3b0;border:1px dashed #a18f65;border-radius:12px;text-align:center;min-height:59px;font-size:17px}.feedback{padding:15px 18px;background:#d4dfb5;border-radius:12px;font:400 21px/1.35 Fredoka,sans-serif;margin:15px 0}.note{font-size:13px;color:#816e4b}.book{background:#fff4d5;box-shadow:inset 12px 0 13px #a0864330;border-left:5px solid #8d6943;border-radius:4px 16px 16px 4px;padding:20px 25px;margin:18px 0}.book p{font-size:19px;line-height:1.65}.book .scene-symbol{font-size:42px}.choices{display:grid;gap:10px;margin-top:17px}.choices button{text-align:left}.dress-preview{height:200px;position:relative;background:radial-gradient(ellipse,#879858,#38523b);border-radius:16px;text-align:center;padding:10px}.dress-preview img{height:100%;width:auto}.dress-preview .preview-hat{position:absolute;left:50%;top:0;transform:translateX(-50%);font-size:65px}.drawing-tools{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:12px}.colour{width:36px;height:36px;border:2px solid #9f8e6c;border-radius:50%;background:var(--paint)}.colour[aria-pressed=true]{outline:3px solid #395a42;outline-offset:2px}#doodle{width:100%;height:auto;aspect-ratio:3/2;background:#fffef6;display:block;border-radius:7px;box-shadow:0 4px 15px #5a432a25;touch-action:none;cursor:crosshair}input[type=range]{accent-color:#466a42;max-width:150px}#sockField{height:265px;position:relative;background:linear-gradient(#3a574c,#20382d);border-radius:16px;overflow:hidden}.falling-sock{position:absolute;top:-65px;font-size:43px;border:0;background:none;padding:6px;animation:sockFall var(--fall-time,5s) linear forwards;filter:drop-shadow(0 3px 3px #0004)}.sock-target{font:500 23px Fredoka,sans-serif;display:flex;align-items:center;justify-content:space-between;padding:12px 0}.sock-target strong{color:#486c32}#sockResult{min-height:25px}.score{font-size:15px}.instrument-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.instrument{border:1px solid #a88f61;border-radius:13px;background:#fff6da;color:#583c26;padding:20px 6px;font-size:14px}.instrument span{display:block;font-size:34px;margin-bottom:10px}.instrument.playing{background:#b9d79d;transform:translateY(3px)}.beat-row{display:flex;flex-wrap:wrap;gap:6px;min-height:40px;margin:16px 0}.beat{border-radius:8px;background:#d3bc94;padding:6px 9px;font-size:20px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid #beac8b}.settings-row label{display:flex;align-items:center;gap:9px}.settings-row input[type=checkbox]{width:20px;height:20px;accent-color:#3f663d}.settings-row input[type=range]{width:120px}.settings-row small{font-size:13px}.patches{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.patch{border:1px dashed #a99b77;border-radius:15px;padding:14px;text-align:center;color:#968970;font-size:14px}.patch span{font-size:28px;display:block;margin-bottom:7px;filter:grayscale(1)}.patch.earned{background:#e6d69e;color:#5b4125;border-style:solid}.patch.earned span{filter:none}.original{max-width:100%;max-height:45vh;object-fit:contain;display:block;margin:auto}.dream-scene{position:relative;border-radius:18px;min-height:160px;padding:28px;background:radial-gradient(ellipse,#354b67,#1a263a);color:#fff1cd;text-align:center;font:400 24px/1.5 Fredoka,sans-serif}.dream-scene .dream-icons{font-size:48px;display:block;margin-bottom:10px;animation:breathe 5s infinite}.location-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.location-list .action{text-align:left}.hidden-door{font-size:60px;display:block;text-align:center;margin:18px}.mini-stars{display:flex;justify-content:center;gap:18px;margin:15px}.symbol-key{font-size:31px;border:2px solid #bca571;background:#fcf4d8;border-radius:14px;width:67px;height:67px}.symbol-key.correct{background:#b9d392;border-color:#527943}.status-message{min-height:28px}.reduced-motion *, .reduced-motion *::before,.reduced-motion *::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}
@keyframes breathe{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-5px) rotate(.7deg)}}@keyframes wiggle{25%{transform:rotate(-9deg) translateX(-10px)}75%{transform:rotate(9deg) translateX(10px)}}@keyframes jump{50%{transform:translateY(-25px) scale(1.035,.97)}}@keyframes drift{0%{transform:translate(0,0);opacity:.15}45%{opacity:.85}100%{transform:translate(35px,-50px);opacity:.3}}@keyframes glow{0%{opacity:.4;transform:scale(.96)}100%{opacity:.9;transform:scale(1.07)}}@keyframes steam{0%{opacity:0;transform:translateY(0) scale(.5)}40%{opacity:.65}100%{opacity:0;transform:translateY(-70px) scale(2)}}@keyframes floatSock{0%,100%{transform:translate(0,0) rotate(-18deg)}50%{transform:translate(35px,-35px) rotate(20deg)}}@keyframes spark{to{transform:translate(var(--dx,25px),-100px) rotate(35deg);opacity:0}}@keyframes ripple{to{transform:scale(4);opacity:0}}@keyframes sockFall{to{top:290px;transform:rotate(20deg)}}
@media(min-aspect-ratio:3/2){#stage{margin-top:calc((100dvh - 66.667vw)/2)}}@media(max-width:700px){.hud{padding:20px 18px}.hud h1{font-size:35px;max-width:65%;line-height:1.1}.round{width:43px;height:43px;font-size:24px}.tools{gap:8px}.bottom-hud{left:16px;right:16px;bottom:17px;gap:10px}.bottom-hud #worldHint{font-size:15px}.wood-button{font-size:15px;padding:11px 12px}.speech{font-size:20px;width:220px;left:35%;top:20%}.speech.house{font-size:18px}dialog{padding:19px 18px 22px}h2{font-size:29px}.tiles{gap:8px}.tile{padding:12px 5px;font-size:14px}.instrument-grid{grid-template-columns:repeat(2,1fr)}.world-label{font-size:18px}.patches{grid-template-columns:repeat(2,1fr)}.settings-row{gap:8px}.settings-row input[type=range]{width:100px}#soundInvite{bottom:75px}.character{width:34%}.book{padding:17px}.book p{font-size:18px}.dialog-bar>span{font-size:10px}.location-list{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.sign-text{position:absolute;z-index:6;pointer-events:none;color:#382313;font:500 clamp(16px,1.7vw,26px)/1.05 Fredoka,sans-serif;text-shadow:0 1px 0 #deb78488;white-space:nowrap}.house-title{max-width:260px;line-height:1.02!important;font-size:clamp(27px,3vw,44px)!important;color:#372214!important;text-shadow:0 1px 1px #edce9e!important;margin:3px 0 0 8px!important}.hotspot.door .world-label{font-size:16px;opacity:0;transform:translateY(15px)}.hotspot.door:hover .world-label,.hotspot.door:focus-visible .world-label{opacity:1}.character.house{left:51%;top:42%;width:20%;height:34%}
@media(max-width:700px){.sign-text{font-size:22px}.house-title{color:#ffedc5!important;text-shadow:0 3px 10px #000!important;font-size:31px!important;max-width:230px}}
.door-swing{position:absolute;left:20.2%;top:35%;width:7%;height:23.1%;border-radius:48% 48% 4% 4%;background-image:url('assets/woodland.webp');z-index:4;pointer-events:none;transform-origin:left center;transition:transform .65s ease,filter .6s}.opening .door-swing{transform:perspective(700px) rotateY(-76deg);filter:brightness(.7)}.opening .hotspot.door{background:radial-gradient(ellipse,#fff2bdce,#ffe19650 60%,transparent 75%)}
@media(max-width:700px){.speech,.speech.house{position:fixed;top:95px;left:18px;width:210px;font-size:19px;max-width:55vw;padding:17px 20px;z-index:8}}