@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800;900&display=swap');
:root{color-scheme:light;--ink:#163d52;--teal:#087f8c;--deep:#075866;--pink:#eb4d8b;--yellow:#ffd879;--paper:#fff;--soft:#edf9fa;--line:#d3e9ec;--shadow:0 8px 24px #11596d0d;font-family:Nunito,system-ui,sans-serif;color:var(--ink);font-size:16px}
*{box-sizing:border-box}body{margin:0;background:#e6f6f7;background-image:radial-gradient(#a1d9de50 1px,transparent 1px);background-size:20px 20px}button{font:inherit;font-weight:800;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:inherit}button:focus-visible{outline:3px solid #b64bc2;outline-offset:4px}button:disabled{cursor:default}button:hover:not(:disabled){filter:brightness(1.02);transform:translateY(-1px)}button:active:not(:disabled){transform:scale(.97)}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:Fredoka,Nunito,system-ui,sans-serif;font-weight:600}button{transition:transform .15s,box-shadow .15s}.app{max-width:1280px;margin:auto;padding:24px 34px 14px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:15px}.brand{display:flex;align-items:center;gap:13px}.brand-mark{background:var(--teal);color:var(--yellow);width:54px;height:54px;display:grid;place-items:center;font-size:41px;border-radius:18px;box-shadow:0 4px 0 var(--deep);line-height:1}.brand h1{font-size:clamp(1.3rem,2.35vw,1.9rem);line-height:1.15}.brand h1 span{color:var(--teal)}.brand p{font-size:.93rem;font-weight:700;margin-top:4px;color:#467081}.header-actions{display:flex;gap:10px;align-items:center}.star-counter{display:flex;align-items:center;gap:7px;background:#fff7da;border:2px solid #f9dea0;padding:7px 14px;border-radius:30px;font-size:1.3rem}.star-counter>span{color:#bd7500}.star-counter small{font-size:.88rem;color:#8a672f}.icon-button{border:2px solid var(--line);background:#fff;border-radius:50%;width:44px;height:44px;font-size:1.18rem}.adventure-nav{margin:24px 0 22px;display:flex;gap:20px;align-items:center}.levels{display:flex;gap:7px;flex:1;align-items:center}.level-chip{flex:1;min-width:0;border:2px solid transparent;border-radius:16px;background:#ffffffb8;padding:9px 7px;display:flex;align-items:center;gap:9px;text-align:left;color:#5b7e88}.level-chip .level-number{flex-shrink:0;display:grid;place-items:center;width:33px;height:33px;border-radius:50%;background:#dceff0;font-size:1rem}.level-chip .level-name{font-size:.83rem;line-height:1.15}.level-chip.active{background:#fff;border-color:var(--teal);color:var(--deep);box-shadow:0 4px 0 #b5dfe2}.level-chip.active .level-number{background:var(--teal);color:white}.level-chip.completed .level-number{background:var(--yellow);color:#80600c}.free-play{border:2px solid #ebadd0;background:#ffe9f4;color:#a63771;padding:12px 16px;border-radius:15px;white-space:nowrap;font-size:.94rem}.free-play.active{background:#b63b7a;border-color:#b63b7a;color:white}main{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:26px;align-items:start}.mirror-panel{background:white;border-radius:26px;padding:17px;box-shadow:var(--shadow);border:1px solid #d7ecee}.mirror-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 4px 13px}.pill{font-size:.75rem;font-weight:900;background:#dff5f1;color:var(--teal);padding:6px 10px;border-radius:9px;letter-spacing:.05em}.mirror-name{font-family:Fredoka,sans-serif;font-size:1.02rem;color:#567884}.small-button{background:#fff;border:0;font-size:.82rem;padding:8px;color:#5d7c84}.mirror{position:relative;overflow:hidden;aspect-ratio:720/760;background:radial-gradient(ellipse at 50% 38%,#f3fffb 10%,#ceeeeb 58%,#aed9e0 100%);border-radius:190px 190px 20px 20px;border:7px solid #a7d9dc;box-shadow:inset 0 0 0 2px white;max-height:570px}.mirror:before{content:'';position:absolute;inset:9px;border:1px solid #fff9;border-radius:inherit;pointer-events:none;z-index:2}#portrait{width:100%;height:100%;display:block;position:relative;z-index:1;touch-action:manipulation}.mirror-sparkles{position:absolute;inset:0;pointer-events:none;z-index:0;color:#fff;font-size:28px}.mirror-sparkles span{position:absolute}.mirror-sparkles span:nth-child(1){left:16%;top:21%}.mirror-sparkles span:nth-child(2){right:14%;top:32%;font-size:42px}.mirror-sparkles span:nth-child(3){left:9%;top:56%}.mirror-sparkles span:nth-child(4){right:12%;top:72%}.touch-targets{position:absolute;inset:0;z-index:4;pointer-events:none}.target{position:absolute;background:#fff2;border:2px dashed #c346a1;border-radius:50%;pointer-events:auto;min-width:42px;min-height:42px;transform:translate(-50%,-50%);padding:0;box-shadow:0 0 0 5px #fff4;animation:breathe 1.8s ease-in-out infinite}.target:hover:not(:disabled){transform:translate(-50%,-50%) scale(1.1)}.target:active:not(:disabled){transform:translate(-50%,-50%) scale(.97)}.target-label{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);border-radius:10px;white-space:nowrap;background:white;padding:3px 9px;font-size:.75rem;color:#994977;box-shadow:0 2px 5px #225d7d20}.target.nail{min-width:40px;min-height:44px;border-radius:14px}.name-tag{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);background:#ffffffec;z-index:3;border-radius:18px;padding:8px 15px;font-size:.78rem;font-weight:700;white-space:nowrap;box-shadow:0 4px 0 #adcfd3}.name-tag strong{font-family:Fredoka;font-size:1rem;color:var(--teal)}.name-tag span{color:var(--pink);font-size:1.1rem;margin-left:6px}.tap-hint{text-align:center;font-size:.93rem;font-weight:800;padding:13px 5px 7px;min-height:49px;color:#446b7b}.tap-hint span{margin-right:5px}.stage-actions{display:flex;justify-content:center;gap:9px;margin-top:5px}.soft-button{border:1px solid var(--line);background:var(--soft);border-radius:12px;padding:10px 13px;font-size:.86rem;min-height:44px}.soft-button[aria-pressed=true]{background:#ffe7f3;border-color:#ec90ba}.vanity{display:flex;flex-direction:column;gap:17px}.challenge{background:white;border-radius:24px;box-shadow:var(--shadow);border:1px solid var(--line);padding:22px}.challenge-heading{display:flex;gap:13px;align-items:center}.challenge-icon{font-size:2rem;background:#fff0f6;display:grid;place-items:center;width:55px;height:55px;border-radius:18px;flex-shrink:0}.eyebrow{font-size:.73rem;font-weight:900;letter-spacing:.09em;color:var(--teal);margin-bottom:5px}h2{font-size:1.55rem;line-height:1.1}.read-button{margin-left:auto;align-self:start;background:var(--soft);border:0;border-radius:50%;width:39px;height:39px;font-size:1.1rem;flex-shrink:0}.challenge>p{font-size:.94rem;margin-top:14px;line-height:1.5;color:#51717f}.tasks{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:9px}.tasks li{display:flex;align-items:center;gap:9px;font-size:.92rem;font-weight:800;line-height:1.3}.task-circle{width:23px;height:23px;border:2px solid #c3dde2;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-size:.8rem;color:white}.tasks li.done{color:var(--teal)}.tasks li.done .task-circle{background:var(--teal);border-color:var(--teal)}.reward-preview{margin-top:16px;padding-top:12px;border-top:1px dashed var(--line);display:flex;justify-content:space-between;font-size:.8rem;font-weight:800;color:#76909a}.reward-preview span{color:#d39a19;font-size:1.18rem;letter-spacing:.1em}.tool-tray{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}.tabs{display:grid;grid-template-columns:repeat(4,1fr);background:#f1f8f9;padding:7px;gap:4px}.tab{background:transparent;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 3px;border-radius:14px;min-height:64px;font-size:.76rem;gap:3px;color:#527681}.tab>span{font-size:1.5rem;line-height:1.2}.tab[aria-selected=true]{background:white;color:#ad3572;box-shadow:0 2px 8px #215c7114}.palette-area{padding:20px}.palette-heading{display:flex;justify-content:space-between;gap:7px;align-items:center;margin-bottom:17px}.palette-heading h3{font-size:1.12rem}.palette-heading>span{font-size:.77rem;background:#fff0f6;color:#a04070;font-weight:800;padding:5px 9px;border-radius:8px;max-width:45%;text-align:right}.options{display:grid;grid-template-columns:repeat(6,1fr);gap:11px}.swatch{border:3px solid #fff;outline:2px solid #e3edef;border-radius:50%;aspect-ratio:1;min-width:36px;padding:0;position:relative;background:var(--swatch);box-shadow:inset 0 -5px 0 #0000000e}.swatch.selected{outline:3px solid var(--teal);box-shadow:0 0 0 6px #dcf0ef}.swatch.selected:after{content:'✓';color:white;position:absolute;inset:0;display:grid;place-items:center;text-shadow:0 1px 3px #3339;font-size:1.1rem}.swatch::before{content:'';position:absolute;left:20%;top:16%;width:24%;height:12%;border-radius:20px;background:#ffffff70}.choice{border:2px solid var(--line);border-radius:15px;background:#f8fcfc;min-height:74px;padding:7px 4px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;font-size:.82rem}.choice>span{font-size:1.9rem}.choice.selected{border-color:var(--teal);background:#e6f6f3;box-shadow:0 3px 0 #c1e8e4}.options.choices{grid-template-columns:repeat(3,1fr);gap:9px}.tool-note{font-size:.82rem;color:#658493;margin-top:19px;text-align:center;line-height:1.4}.extra-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:17px}.mini-choice{border:1px solid var(--line);border-radius:10px;padding:7px 10px;background:#f4fbfb;font-size:.79rem;min-height:40px}.mini-choice.selected{border:2px solid var(--teal);background:#e1f2ef}.finish-button{background:var(--teal);border:0;border-bottom:5px solid var(--deep);border-radius:17px;color:white;padding:15px 20px;font-family:Fredoka;font-size:1.15rem;display:flex;justify-content:center;align-items:center;gap:14px;min-height:56px;font-weight:600}.finish-button span{color:#ffe4a0;font-size:1.3rem}.finish-button:disabled{background:#b6d7dc;border-color:#9cc4ca;color:#537f8a}.finish-hint{font-size:.8rem;font-weight:700;text-align:center;color:#5a7e89;margin-top:-7px;min-height:20px}footer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:16px 5px 0;font-size:.8rem;color:#688994;font-weight:800}footer button{border:0;background:transparent;font-size:.86rem;padding:8px}.loading-art{position:absolute;top:40%;left:0;right:0;text-align:center;z-index:3;font-family:Fredoka;font-size:1.2rem;color:var(--deep);padding:15px}.loading-art.hidden{display:none}.modal{border:0;border-radius:30px;padding:0;width:min(450px,calc(100% - 30px));max-height:90vh;box-shadow:0 25px 90px #073c6850;color:var(--ink)}.modal::backdrop{background:#083e5799;backdrop-filter:blur(5px)}.modal-body{padding:30px;text-align:center}.modal-art{font-size:3rem;display:block;margin-bottom:14px}.modal h2{font-size:1.8rem}.modal p:not(.eyebrow){margin:15px 0;font-weight:700;line-height:1.6;color:#547581}.modal .finish-button{width:100%;margin-top:18px}.modal .soft-button{margin-top:12px;width:100%}.big-stars{color:#dba224;font-size:2.2rem;letter-spacing:.09em;margin:15px 0 4px}.modal canvas{max-width:180px;width:100%;border-radius:80px 80px 15px 15px;background:#daf4ef}.kind-note{background:#fff4d4;padding:12px;border-radius:15px}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--deep);color:white;padding:12px 20px;border-radius:16px;font-size:.93rem;font-weight:800;z-index:30;max-width:90%;text-align:center;transition:opacity .2s,transform .2s}.toast.visible{opacity:1;transform:translate(-50%,0)}.spark{position:absolute;z-index:7;color:#fff5a3;font-size:25px;pointer-events:none;animation:sparkle .85s forwards}.confetti{position:fixed;z-index:60;pointer-events:none;top:-30px;width:9px;height:15px;border-radius:2px;animation:fall 2.5s ease-in forwards}.gallery-modal{width:min(650px,calc(100% - 30px))}#gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.saved-look{background:#e9f9f6;border:1px solid var(--line);border-radius:15px;padding:5px}.saved-look img{width:100%;border-radius:12px}.saved-look p{font-size:.77rem!important;line-height:1.3!important;margin:5px 0!important}.empty-gallery{grid-column:1/-1;padding:25px 10px;font-weight:700;color:#5e8390}
@keyframes breathe{50%{box-shadow:0 0 0 9px #fff2}}@keyframes sparkle{to{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(100deg)}}@keyframes fall{to{transform:translate(var(--drift),105vh) rotate(400deg);opacity:.4}}
@media(min-width:1100px){.mirror{max-height:550px}.app{padding-top:27px}.challenge{padding:20px 23px}.vanity{gap:16px}.options{gap:15px}}
@media(max-width:1000px){.app{padding:20px}.level-chip{justify-content:center}.level-name{display:none}.adventure-nav{gap:12px}.mirror-name{font-size:.89rem}main{gap:18px}.challenge{padding:17px}.palette-area{padding:17px}.options{gap:8px}h2{font-size:1.3rem}.brand h1{font-size:1.5rem}.brand p{font-size:.82rem}.mirror-panel{padding:12px}.challenge-icon{width:47px;height:47px;font-size:1.8rem}.eyebrow{font-size:.69rem}}
@media(max-width:690px){.app{padding:15px 12px 12px}.brand-mark{width:42px;height:42px;font-size:33px;border-radius:14px}.brand{gap:9px}.brand h1{font-size:1.18rem;max-width:200px}.brand h1 span{display:block}.brand p{font-size:.75rem}.header-actions{gap:6px}.star-counter{padding:6px 9px;font-size:1rem;gap:4px}.star-counter small{font-size:.7rem}.icon-button{width:36px;height:36px;font-size:.95rem}#help-btn{display:none}.adventure-nav{gap:8px;margin:19px 0 15px}.levels{gap:4px}.level-chip{padding:5px 0;border-radius:12px}.level-chip .level-number{width:27px;height:27px;font-size:.9rem}.free-play{font-size:.75rem;padding:11px 8px}main{grid-template-columns:1fr;gap:16px}.mirror-panel{padding:11px}.mirror-top{padding-bottom:9px}.mirror{max-height:430px;max-width:410px;margin:auto;border-width:5px}.mirror-name{font-size:1rem}.tap-hint{padding-top:10px;font-size:.87rem;min-height:35px}.stage-actions{margin-top:3px}.vanity{gap:12px}.challenge{padding:17px}.challenge-heading h2{font-size:1.4rem}.challenge>p{margin-top:10px}.tasks{margin-top:11px;gap:8px}.reward-preview{margin-top:12px;padding-top:9px}.tabs{grid-template-columns:repeat(8,1fr);padding:6px 3px;gap:0}.tab{font-size:.68rem;padding:7px 1px;min-height:60px}.tab>span{font-size:1.3rem}.palette-area{padding:19px}.options{grid-template-columns:repeat(6,1fr);gap:13px}.swatch{max-width:62px;width:100%;justify-self:center}.tool-note{margin-top:16px}.options.choices{grid-template-columns:repeat(3,1fr)}.finish-button{font-size:1.1rem}.finish-hint{margin-top:-4px}footer{font-size:.73rem;padding-top:10px}footer button{font-size:.8rem}.target-label{font-size:.7rem}.name-tag{font-size:.72rem}.modal-body{padding:24px}#gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.map-button{border:2px solid #a7d7db;background:white;border-radius:14px;padding:12px 14px;white-space:nowrap;font-size:.9rem}.task-link{border:0;background:transparent;text-align:left;padding:2px 0;line-height:1.35;font-size:.91rem;font-weight:800;min-height:30px;flex:1}.done .task-link{color:var(--teal)}.goal-colour{width:17px;height:17px;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 3px #d6e7e9;flex-shrink:0}.hair-dot{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:middle;margin-right:5px}.pattern-strip{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.82rem;font-weight:800;margin-top:16px}.pattern-strip span{display:grid;place-items:center;width:28px;height:32px;border-radius:10px;color:white;text-shadow:0 1px 3px #0007}.map-modal{width:min(700px,calc(100% - 30px))}.map-world{border-radius:20px;text-align:left;background:#edf9f8;padding:15px;margin-top:14px}.map-world:nth-child(2){background:#fff0f8}.map-world:nth-child(3){background:#fff7dd}.map-world:nth-child(4){background:#edf0ff}.map-world h3{font-size:1.15rem;margin-bottom:13px}.map-world>div{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.map-level{background:#fff;border:2px solid #d9e7eb;border-bottom-width:4px;border-radius:16px;padding:10px 8px;text-align:center;display:flex;flex-direction:column;gap:7px;align-items:center;min-height:122px}.map-level>span{font-size:1.7rem}.map-level b{font-family:Fredoka;font-weight:500;font-size:.94rem}.map-level small{font-size:.74rem;color:#698992}.map-level.complete{border-color:#c9ac49}.map-level.complete small{color:#a77a12;letter-spacing:.08em}.map-level:disabled{opacity:.7;background:#f8fafb;color:#70828c}#memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin:20px 0}.memory-card{background:var(--teal);color:#ffe1a5;border:2px solid var(--deep);border-bottom-width:5px;border-radius:15px;aspect-ratio:1;font-size:1.8rem}.memory-card.flipped{background:var(--card-colour);border-color:#fff;color:white;box-shadow:0 0 0 2px #d3e7ea;text-shadow:0 1px 2px #0004}.memory-card.matched{opacity:.76}.choice:disabled{opacity:.55}.mirror-panel{position:relative}.vanity .challenge{min-height:246px}.levels .level-chip .level-name{display:block}.mirror-panel .target-label{pointer-events:none}
.tool-tray{order:1}.challenge{order:2}.vanity>.finish-button{order:3}.finish-hint{order:4}.tabs{grid-template-columns:repeat(8,1fr)}.tab{font-size:.8rem;min-height:69px}.tab>span{font-size:1.6rem}.mirror{max-height:500px}.options{gap:12px}.palette-area{padding:20px}.tool-note{margin-top:15px}.tool-tray .choice{min-height:68px}
@media(max-width:1000px){.levels .level-chip .level-name{display:none}.map-button{font-size:.8rem;padding:12px 9px}.adventure-nav{gap:10px}.vanity .challenge{min-height:236px}}
@media(max-width:690px){.map-button{font-size:.78rem;padding:11px 9px}.levels .level-chip{min-width:35px}.adventure-nav{gap:8px}.map-world{padding:12px}.map-world>div{gap:6px}.map-level{padding:10px 4px}.map-level b{font-size:.82rem}.map-level small{font-size:.75rem}.map-level>span{font-size:1.5rem}.target.nail{min-width:35px;min-height:38px}footer{flex-wrap:wrap;justify-content:center}footer>div{display:flex;gap:15px}.vanity .challenge{min-height:unset}.tab{font-size:.75rem}.brand p{font-size:.8rem}}