@font-face{font-family:Nunito;src:url('./assets/nunito.ttf') format('truetype');font-weight:900;font-display:swap}
:root{color-scheme:light;--ink:#12346a;--cream:#fff9e5;--gold:#ffce36;--teal:#17c9b3;--navy:#12346a;font-family:Nunito,system-ui,sans-serif;color:var(--ink)}
*{box-sizing:border-box}body{margin:0;min-width:280px;min-height:100dvh;background:#a8e5ff;isolation:isolate}button,a{-webkit-tap-highlight-color:transparent}button,a{font:inherit}button{cursor:pointer}button:disabled{cursor:default}[hidden]{display:none!important}a{color:inherit}.world{position:fixed;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(231,251,255,.72),rgba(240,253,255,.08) 56%,rgba(208,247,255,0)),url('./assets/world.webp') center/cover no-repeat}.world:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#d9f5ff77,transparent 70%)}
.topbar{max-width:1280px;margin:auto;padding:max(18px,env(safe-area-inset-top)) 32px 0;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{width:210px;height:auto;display:block}.small-button,.light-button,.gold-button{min-height:52px;border-radius:20px;padding:12px 22px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;text-align:center;border:2px solid transparent;line-height:1.2}.small-button{background:#fffaf0;color:#16427b;border-color:#fff;box-shadow:0 5px 0 #1776be}.light-button{background:linear-gradient(#9effe1,#38dfbc);color:#104c54;box-shadow:0 6px 0 #098b8b;border-color:#effff5}.gold-button{background:linear-gradient(#fff6a1,#ffce28 65%,#ffb61c);border-color:#fff9ba;color:#173b78;box-shadow:0 7px 0 #d78b08,0 12px 20px #0865b13b}.gold-button:active,.light-button:active{transform:translateY(3px);box-shadow:0 2px 0 #90702b}button:focus-visible,a:focus-visible{outline:4px solid #ff4d9b;outline-offset:5px}
main{max-width:1220px;margin:20px auto 0;padding:0 32px;display:grid;grid-template-columns:1fr minmax(420px,520px);align-items:center;gap:65px}.story{padding-top:12px}.collection{width:220px;height:auto;display:block;margin:0 0 10px -18px}h1{font-size:clamp(38px,4.7vw,65px);line-height:1.05;letter-spacing:-1.7px;margin:0;max-width:620px;color:#123b7c;text-shadow:0 3px 0 #fff,2px 0 #fff,-2px 0 #fff,0 -2px #fff}h1 span{color:#137ab8}.intro{font-size:22px;line-height:1.45;color:#153d6d;margin:20px 0}.companion{display:flex;align-items:center;gap:15px;max-width:480px}.loopi{height:260px;width:auto;filter:drop-shadow(0 14px 8px #11649c33)}#speech{font-size:21px;line-height:1.4;margin:0;max-width:260px}
.play-area{position:relative;border-radius:38px;background:linear-gradient(155deg,#159ee7,#0870d0 58%,#084db1);border:4px solid #fff8bd;box-shadow:0 12px 0 #07549f,0 24px 38px #166bb43b,inset 0 0 0 5px #63d9ff;padding:19px 16px 24px;overflow:visible}.progress{color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:18px;gap:8px}.lights{display:flex;gap:8px}.lights i{width:20px;height:20px;background:#1667b9;border:2px solid #d8f9ff;border-radius:5px;transform:rotate(45deg);box-shadow:inset 0 2px 4px #034b9c}.lights i.found{background:var(--gold);border-color:#fff7c0;box-shadow:0 0 16px #ffce6a}
.board{width:100%;aspect-ratio:1;position:relative;margin:2px auto 0;max-width:450px}#scene{display:block;width:100%;height:100%;border-radius:22px;touch-action:manipulation}.tiles{position:absolute;inset:0}.tile{position:absolute;display:block;border:0;border-radius:13px;background:transparent;padding:0;touch-action:manipulation;outline:3px solid transparent;outline-offset:1px}.tile:focus-visible{outline-color:#80ffe7;background:#9df5ec18}.piece{display:none}.start-label,.door-label{position:absolute;top:12%;font-size:14px;color:#103c75;text-shadow:0 1px 0 #fff,1px 0 #fff,-1px 0 #fff,0 -1px #fff;pointer-events:none}.start-label{left:2%;top:21%}.door-label{right:0;top:13%}.tile.hinting{outline-color:#fff5ac;box-shadow:0 0 23px #ffe294}
.flat #scene{display:none}.flat .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:30px 9px}.flat .tile{position:relative!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important;border:2px solid #9bb5b4;background:linear-gradient(150deg,#477483,#203955);box-shadow:0 6px 0 #07172e}.flat .piece{display:block;position:absolute;inset:8px;border-radius:8px;transition:transform .25s ease}.pipe{position:absolute;left:41%;top:0;width:18%;height:50%;background:#e5bb62;transform-origin:50% 100%;border-radius:8px}.hub{position:absolute;width:22%;height:22%;left:39%;top:39%;background:#e5bb62;border-radius:50%}.flat .tile.reached .pipe,.flat .tile.reached .hub{background:#fff29c;box-shadow:0 0 14px #ffe09b}.flat .start-label,.flat .door-label{top:1%;left:10px}.flat .door-label{left:auto;right:10px}
.welcome{text-align:center;position:absolute;left:16px;right:16px;bottom:24px;border-radius:25px;background:#fffdf1;box-shadow:0 -8px 24px #0864ad26;border:3px solid #fff; color:#123d76;padding:20px 15px}h2{font-size:31px;line-height:1.15;margin:0 0 10px}.welcome p{font-size:18px;line-height:1.4;max-width:360px;margin:0 auto 18px;color:#285e83}.welcome .gold-button{width:100%;max-width:320px;min-height:62px;font-size:23px}.game-controls{color:#fff;text-align:center;margin-top:-12px;padding:0 10px}#status{min-height:45px;margin:0 0 8px;font-size:18px;line-height:1.35}.button-row{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}.button-row button{min-width:130px}.finish{color:#fff;text-align:center;padding:20px 16px 6px;position:relative}.finish p{font-size:19px;line-height:1.5;margin:0 0 18px}.finish strong{color:#fff2a2}.finish .gold-button,.finish .light-button{width:100%;margin:0 0 13px;min-height:62px;font-size:22px}.next-copy{color:#e2faff;font-size:17px!important}.text-button{color:#fff5bd;background:none;border:0;text-decoration:underline;min-height:48px;padding:10px}.spark{position:absolute;left:50%;top:-12px;width:18px;height:18px;transform:rotate(45deg);background:#fff0a5;box-shadow:0 0 40px 14px #ffcd6f55}.won .board{height:160px;aspect-ratio:auto;overflow:hidden;opacity:1;pointer-events:none}.won #scene,.won .tiles{margin-top:-120px}.won .start-label,.won .door-label{display:none}
footer{max-width:1220px;margin:34px auto 0;text-align:center;padding:0 24px max(24px,env(safe-area-inset-bottom));font-size:14px;color:#164f7a}footer p{margin:6px}footer a{display:inline-block;padding:10px}.no-script{background:#fff7dd;color:#172849;padding:24px;text-align:center}
@media(max-width:900px){main{gap:26px;grid-template-columns:1fr minmax(350px,1fr);padding:0 22px}.loopi{height:210px}#speech{font-size:18px}.brand{width:190px}.collection{width:190px}h1{font-size:44px}.intro{font-size:20px}}
@media(max-width:700px){.topbar{padding:14px 16px 0;gap:10px}.brand{width:170px}.small-button{padding:10px 14px;font-size:15px;min-height:48px;border-radius:17px}main{display:flex;flex-direction:column;gap:14px;padding:0 12px;margin:12px auto 0;max-width:520px}.story{width:100%;padding:0 8px}.collection{width:140px;margin:0 0 4px -10px}h1{font-size:39px;letter-spacing:-1px}.intro{font-size:18px;margin:12px 0}.companion{position:relative;min-height:112px;gap:12px;padding:0 6px}.loopi{height:126px}#speech{font-size:17px;max-width:270px}.play-area{width:100%;padding:16px 8px 20px;border-radius:29px;box-shadow:0 9px 0 #07549f,0 18px 30px #1768b13b}.progress{padding:0 10px;font-size:16px}.lights i{width:17px;height:17px}.lights{gap:7px}.welcome{margin-top:-10px;padding:0 12px 4px}.welcome h2{font-size:28px}.welcome p{font-size:17px}.game-controls{margin-top:-5px}#status{font-size:17px}.finish{padding:15px 12px 0}.finish h2{font-size:28px}.finish p{font-size:18px}.finish .gold-button,.finish .light-button{font-size:20px}footer{margin-top:26px}.start-label,.door-label{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:700px){.story .collection{display:none}.companion{min-height:95px}.loopi{height:105px}.play-area{display:flex;flex-direction:column}.welcome{position:static;order:-1;padding:10px 12px 20px;box-shadow:none;background:transparent}.board{order:1}.progress{order:0}.game-controls{order:2}.finish{order:3}.playing .story h1,.playing .story .intro{display:none}.playing .companion{min-height:54px;max-width:none}.playing .loopi{height:78px}.playing #speech{font-size:15px;max-width:350px}.playing main{margin-top:8px;gap:8px}.playing .brand{width:150px}.playing .topbar{padding-top:max(8px,env(safe-area-inset-top))}.playing .game-controls .button-row{gap:8px}.playing .game-controls .button-row button{min-width:115px}}

/* Bright Wonderbolt toy finish. The genuine artwork and all game rules remain unchanged. */
.brand{filter:drop-shadow(0 2px 1px #ffffffd9)}
.topbar{padding-top:max(14px,env(safe-area-inset-top))}.collection{width:190px;margin-bottom:4px}main{gap:42px;margin-top:12px}
.companion{gap:8px}#speech{background:#fffffff0;border:2px solid #fff;border-radius:24px;padding:17px 18px;color:#164372;box-shadow:0 6px 0 #6ecde24d}
.play-area .welcome{bottom:20px}.welcome .gold-button{border-radius:22px}.board{isolation:isolate}.tile.hinting{outline-color:#ffef6b;box-shadow:0 0 0 4px #ff9d22,0 0 25px #fff5a2}
.tile:focus-visible{outline-color:#ff4d9b;background:#ffffff15}
.flat .tile{background:linear-gradient(145deg,color-mix(in srgb,var(--tile) 60%,white),var(--tile));border:3px solid #fff;box-shadow:0 7px 0 color-mix(in srgb,var(--tile) 70%,#11468c);border-radius:18px}
.flat .tile:nth-child(9n+1){--tile:#1ac7f2}.flat .tile:nth-child(9n+2){--tile:#ff68ae}.flat .tile:nth-child(9n+3){--tile:#ffc73d}.flat .tile:nth-child(9n+4){--tile:#86d856}.flat .tile:nth-child(9n+5){--tile:#ad89f2}.flat .tile:nth-child(9n+6){--tile:#21d4b5}.flat .tile:nth-child(9n+7){--tile:#ff895a}.flat .tile:nth-child(9n+8){--tile:#63adff}.flat .tile:nth-child(9n+9){--tile:#f67fce}
.flat .pipe,.flat .hub{background:#ffd338;box-shadow:0 0 0 2px #23517c,inset 0 3px 3px #fff5b0}.flat .tile.reached .pipe,.flat .tile.reached .hub{background:#fff1a0;box-shadow:0 0 0 2px #23517c,0 0 14px #fff2a5}
@media(max-width:700px){main{gap:14px}.collection{width:140px}#speech{padding:11px 13px;font-size:16px;border-radius:20px}.playing .companion{min-height:80px}.playing #speech{font-size:15px}.play-area .welcome{color:#fff;background:transparent;border:0}.welcome p{color:#fff}.welcome h2{color:#fff}.board{max-width:450px}.flat .tiles{gap:9px;padding:30px 9px}.playing .loopi{height:78px}}
@media(prefers-reduced-transparency:reduce){#speech,.welcome{background:#fffdf1}.world{background-color:#c4f1ff}}

.intro{text-shadow:0 1px 0 #fff,1px 0 #fff,-1px 0 #fff}

/* A short threshold reveal, paid off by the existing free WB10 story card. */
.finish .ending-eyebrow{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#fff0a4;margin:0 0 12px}
.story-door{position:relative;width:156px;height:162px;margin:0 auto 18px;overflow:hidden;border:5px solid #ffe490;border-radius:76px 76px 14px 14px;background:#61d8ff;box-shadow:0 0 0 4px #c98d16,0 0 38px #fff4aa80}
.door-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 65%,#fffde2 0 15%,#ffed8f 32%,#79e4ff 70%)}
.door-half{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(140deg,#2578cf,#173b91);border:3px solid #ffdc69;transition:transform 1.8s cubic-bezier(.2,.7,.2,1)}
.door-half.left{left:0;transform-origin:left}.door-half.right{right:0;transform-origin:right}
.won .door-half.left{animation:door-left 2.4s ease-out both}.won .door-half.right{animation:door-right 2.4s ease-out both}
.door-star{position:absolute;left:calc(50% - 12px);top:58px;width:24px;height:24px;background:#fff9c6;clip-path:polygon(50% 0,62% 36%,100% 50%,62% 64%,50% 100%,38% 64%,0 50%,38% 36%);filter:drop-shadow(0 0 10px #fff)}
.finish .ending-line{font-size:18px}.won .ending-line.second{animation:story-arrive .7s 1.1s both}.story-continue{gap:12px}.story-continue span{font-size:1.3em}.finish .next-copy{font-size:14px!important;line-height:1.45;max-width:350px;margin:3px auto 17px}.finish .text-button{display:block;margin:0 auto}.won .board{height:70px}.won #scene,.won .tiles{margin-top:-170px}
@keyframes door-left{from{transform:perspective(400px) rotateY(0)}to{transform:perspective(400px) rotateY(-48deg)}}
@keyframes door-right{from{transform:perspective(400px) rotateY(0)}to{transform:perspective(400px) rotateY(48deg)}}
@keyframes story-arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.embedded body{min-height:0;padding-bottom:20px}.embedded .topbar{max-width:1150px;padding:12px 24px 0;justify-content:flex-end}.embedded .topbar>a,.embedded .story .collection,.embedded .story h1,.embedded .story .intro,.embedded footer{display:none}.embedded main{margin:0 auto;grid-template-columns:minmax(180px,1fr) minmax(330px,490px);gap:24px;padding:0 28px 24px;max-width:1060px}.embedded .story{padding:0}.embedded .companion{flex-direction:column;max-width:330px;margin:auto}.embedded .loopi{height:300px}.embedded #speech{font-size:20px;max-width:320px}.embedded .play-area{margin-top:8px}.embedded .story-door{height:140px;width:138px}.embedded .finish{padding-top:12px}
@media(max-width:700px){.embedded .topbar{padding:8px 14px 0}.embedded main{display:flex;padding:0 10px 18px;gap:10px}.embedded .companion{flex-direction:row;max-width:470px;min-height:90px;gap:4px}.embedded .loopi{height:100px}.embedded #speech{font-size:15px;padding:10px 12px}.embedded .play-area{margin:0}.embedded .finish h2{font-size:27px}.embedded .finish .gold-button{font-size:18px}.story-door{height:135px;width:130px}.finish .ending-line{font-size:17px}}
@media(prefers-reduced-motion:reduce){.door-half.left{transform:perspective(400px) rotateY(-48deg)}.door-half.right{transform:perspective(400px) rotateY(48deg)}}

/* The solved board gives way to the story doorway. */
.won .board{display:none}

/* Nine-object hopping: clear touch controls and bright toy objects. */
.hop-board{touch-action:none;cursor:grab}.hop-board:active{cursor:grabbing}.hop-board:focus-visible{outline:4px solid #ffdc62;outline-offset:3px}.hop-meter{width:100px;height:13px;border:2px solid #fff8c9;border-radius:10px;overflow:hidden;background:#174e9d;flex-shrink:0}.hop-meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#fff0a2,#ffcf32);transition:width .25s}.next-object{position:absolute;right:12px;bottom:24px;background:#fff9e8;color:#164474;border:2px solid white;box-shadow:0 4px 0 #054f9b;border-radius:15px;padding:7px 13px;font-size:14px;pointer-events:none}.swipe-cue{position:absolute;left:18px;bottom:24px;display:flex;align-items:center;gap:8px;font-size:14px;color:white;pointer-events:none}.swipe-cue span{width:15px;height:32px;border:2px solid #fff9b8;border-radius:12px;position:relative}.swipe-cue span:after{content:'';position:absolute;left:3px;top:4px;width:5px;height:11px;border-radius:5px;background:#ffde63}.hop-distance{display:flex;align-items:center;justify-content:center;gap:10px;color:#fff8d0;font-size:13px;margin:0 auto 15px;max-width:360px}.hop-distance input{width:140px;min-width:60px;accent-color:#ffd342;min-height:34px}.game-controls .gold-button{min-width:145px}.hop-board+#welcome p{font-size:17px}.hop-board #scene{touch-action:none}.hop-bubble-fact{font-size:20px}.hop-bubble-fact strong{display:block;color:#126291;margin-bottom:7px;font-size:1.14em}#flat-scene{display:none;position:absolute;inset:0;overflow:hidden}.flat #flat-scene{display:block}.flat-object{position:absolute;top:54%;width:105px;height:80px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 15px 4px #054c7d55)}.flat-object.current{left:10%}.flat-object.next{right:7%}.flat-object svg{width:100%;height:100%;overflow:visible}#flat-loopi{position:absolute;width:75px;height:auto;left:14%;top:32%;filter:drop-shadow(0 8px 4px #16427355);transform-origin:50% 70%}.falling #flat-loopi{opacity:.6}.won #game-controls{display:none}.embedded .hop-bubble-fact{font-size:19px}@media(max-width:700px){.hop-board{max-width:450px}.next-object{font-size:12px;bottom:18px;padding:6px 10px}.swipe-cue{font-size:12px;left:13px;bottom:18px}.hop-distance{font-size:12px;gap:7px}.hop-distance input{width:115px}.hop-bubble-fact,.embedded .hop-bubble-fact{font-size:15px}.hop-bubble-fact strong{font-size:17px}.flat-object{width:85px;height:65px}#flat-loopi{width:60px}.hop-board+#welcome p{font-size:16px}}

/* R2: the game is a bright little world, with the action taking the foreground. */
.world{background-image:linear-gradient(105deg,#edfbf9ed,#e7f6ffcf),url('./assets/world.webp')}
.play-area{background:linear-gradient(145deg,#e7fbff,#c3efff);border:3px solid #fffdf0;box-shadow:0 8px 0 #75c8dc,0 18px 32px #2b7d9c24,inset 0 0 0 4px #9ee3ee;padding:16px 10px 22px}
.progress{color:#174977;font-size:16px}.hop-meter{background:#b1dce6;border-color:#fff}.hop-meter i{background:linear-gradient(90deg,#f7d94b,#ffae4b)}
.board{background:linear-gradient(#83dfff 0%,#c5f2ff 48%,#86e7de 100%);border-radius:27px;overflow:hidden;box-shadow:inset 0 0 0 2px #ffffffad;margin-top:12px}
.game-controls{color:#19486c;margin-top:10px}#status{font-size:16px;min-height:42px;max-width:400px;margin:0 auto 6px}.hop-distance{color:#255879;margin-bottom:7px}.swipe-cue{color:#174977;background:#fff9e7e8;padding:7px 10px;border-radius:14px;bottom:13px}.swipe-cue span{border-color:#3384a7}.next-object{bottom:13px;right:10px;border:0;box-shadow:none;font-size:12px}.gold-button,.light-button{border-radius:18px}.game-controls .button-row{gap:12px}.game-controls .button-row button{min-height:50px}.game-controls .small-button{box-shadow:0 4px 0 #afdce5;border-color:#fff}
.welcome{box-shadow:0 5px 0 #b7e6ed;background:#fffdf5}.welcome p,.welcome h2{color:#19486c}.finish{color:#174977}.finish strong{color:#8d3e85}.finish .next-copy{color:#426581!important}.finish .ending-eyebrow{color:#386c86}.finish .text-button{color:#225781}
.embedded main{max-width:1040px;grid-template-columns:minmax(190px,1fr) minmax(360px,520px);gap:28px}.embedded .loopi{height:260px}.embedded .companion{max-width:340px}.embedded #speech{background:#fffffff5;box-shadow:0 5px 0 #b5e7e5;line-height:1.45;font-size:20px}.embedded .play-area{margin-top:0}.embedded .topbar{padding-bottom:8px}
@media(max-width:700px){main{max-width:490px}.playing .topbar{padding-bottom:0}.playing .story{padding:0 6px}.playing .companion{min-height:84px;align-items:center}.playing .loopi{height:90px}.playing #speech{padding:11px 14px;line-height:1.4;font-size:15px}.play-area{border-radius:25px;padding:13px 8px 16px}.board{margin-top:10px;border-radius:23px}.playing .play-area{box-shadow:0 6px 0 #75c8dc,0 14px 24px #2b7d9c1d}.embedded main{padding:0 8px 15px;gap:10px}.embedded .loopi{height:84px}.embedded .companion{min-height:80px}.embedded #speech{font-size:15px;line-height:1.4}.progress{font-size:14px;padding:0 7px}.game-controls #status{font-size:14px;min-height:38px}.hop-distance{margin-bottom:6px}.game-controls .button-row button{font-size:16px;min-height:47px}.welcome{background:transparent;box-shadow:none}.welcome p,.welcome h2{color:#19486c}.swipe-cue{font-size:11px}.next-object{font-size:11px}}

/* The mystery has a visual event and a real playable answer. */
.secret-map{width:min(260px,75%);height:175px;border:5px solid #d99b31;border-radius:16px;background:linear-gradient(150deg,#fff5bc,#ffdb74);box-shadow:0 0 32px #ffd75e88,inset 0 0 0 6px #fff0b8;transform:perspective(700px) rotateX(8deg);overflow:visible}
.won .secret-map{animation:map-unfold 1.1s cubic-bezier(.2,.8,.2,1) both}
.secret-map .door-glow{inset:15%;border-radius:50%;background:#fff3a7;filter:blur(15px)}
.map-path{position:absolute;inset:25px 35px;border:5px dashed #c18b39;border-radius:35% 55% 40% 60%;transform:rotate(-12deg)}
.map-flower{position:absolute;right:25px;top:22px;font-size:65px;line-height:1;color:#ff5b9b;filter:drop-shadow(0 3px 0 #dd9c29);animation:flower-appear 2s ease both}
.map-footprints{position:absolute;left:28px;bottom:35px;letter-spacing:14px;color:#278c96;font-size:25px;transform:rotate(-20deg);animation:flower-appear 2.7s ease both}
.payoff-map{display:grid;place-items:center;background:linear-gradient(160deg,#a7f4df,#78dce9);border-color:#f7bd50}
.found-breatho{height:180px;max-width:100%;object-fit:contain;position:relative;z-index:2;filter:drop-shadow(0 7px 5px #146f7a33);animation:breatho-arrival 1.2s ease both}
.after-nine .progress{background:#e4fff5}.after-nine .next-copy{color:#174e66}
@keyframes map-unfold{from{opacity:0;transform:perspective(700px) rotateX(80deg) scale(.25)}to{opacity:1;transform:perspective(700px) rotateX(8deg) scale(1)}}
@keyframes flower-appear{0%,45%{opacity:0;transform:scale(.3)}100%{opacity:1;transform:scale(1)}}
@keyframes breatho-arrival{from{opacity:0;transform:translateY(30px) scale(.6)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.won .secret-map,.map-flower,.map-footprints,.found-breatho{animation:none}}