@import"https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito:wght@700;800;900&display=swap";:root{font-family:Nunito,sans-serif;color:#3b2d5e;background:#ffc968}*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer}.app{--ink:#3b2d5e;--pink:#ff5e95;min-height:100dvh;max-width:500px;margin:auto;position:relative;overflow:hidden;background:#fff3c9;box-shadow:0 0 50px #9c6d4b55}.confetti-bg{position:absolute;inset:0;color:#ffcf63;opacity:.5;font-size:25px;letter-spacing:17vw;line-height:190px;pointer-events:none}.home,.game,.book{position:relative;z-index:1;min-height:100dvh}.home{display:flex;flex-direction:column;align-items:center;padding:17px 20px}.home header,.book header,.game-header{width:100%;display:flex;justify-content:space-between;align-items:center}.home header span{font-weight:900;letter-spacing:2px;font-size:13px;color:#c76f80}.home header button,.sound,.back{border:0;width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:0 4px #e4cda7;font-size:21px}.home-cloud{position:absolute;font-size:130px;top:10%;left:27%;opacity:.8;filter:drop-shadow(0 10px 0 #f9daab)}.home-toot{position:relative;margin-top:5vh;font-size:78px;transform:rotate(-25deg);animation:wobble 2s infinite}.tiny{position:relative;margin:7px 0 0;font-size:12px;letter-spacing:2px;color:#df8091;font-weight:900}.home h1{position:relative;font-family:"Baloo 2";font-size:clamp(65px,17vw,93px);line-height:.79;text-align:center;color:#5541ac;letter-spacing:-3px;margin:13px 0 0;text-shadow:0 7px 0 #d3c3eb}.home h1 b{color:#ff5e95}.zh{font-size:19px;font-weight:900;color:#79669c;margin:17px 0}.home-friends{width:100%;margin-top:auto;display:flex;align-items:end;justify-content:center}.home-friends span{width:32%;aspect-ratio:1;display:grid;place-items:center;background:#fff;border:5px solid #fff;border-radius:42%;font-size:clamp(57px,16vw,82px);box-shadow:0 8px #e8cba1;animation:bob 2s infinite}.home-friends span:nth-child(2){background:#fbd9ed;animation-delay:.3s;transform:translateY(-15px)}.home-friends span:nth-child(3){animation-delay:.6s}.primary{border:0;border-radius:22px;background:#ff5e95;color:#fff;min-height:69px;width:min(100%,320px);font:800 30px "Baloo 2";box-shadow:0 8px #db3d75,0 15px 20px #efb69c;margin-top:25px}.primary:active{transform:translateY(5px);box-shadow:0 3px #db3d75}.primary span{margin-left:12px;font-size:21px}.book-link{border:0;background:none;color:#7e5ba8;font-weight:900;margin-top:16px;min-height:42px}.book-link b{border-radius:30px;background:#e4d2f6;padding:4px 7px}.footer{font-size:11px;letter-spacing:1px;color:#aa8e8e;font-weight:900;margin:auto 0 2px}.game{display:flex;flex-direction:column;padding:12px 12px 14px}.back{font-size:30px;line-height:1;color:#725cad}.level,.stars{background:#fff;border-radius:50px;min-width:79px;padding:9px 11px;text-align:center;box-shadow:0 4px #ebd3ac;font-weight:900;font-size:13px}.level{color:#8f68ac}.stars{color:#d69829}.stage{position:relative;flex:none;height:210px;background:linear-gradient(#9ce3ff 0 61%,#7cda80 61% 100%);border:6px solid #fff;border-radius:30px;overflow:hidden;box-shadow:0 7px #e4cda7;margin-top:14px;text-align:center}.stage:after{content:"";position:absolute;left:-10%;bottom:-53px;width:120%;height:95px;border-radius:50%;background:#65c86f}.stage-title{position:relative;z-index:2;background:#fff5d5;border-radius:0 0 15px 15px;display:inline-block;padding:4px 13px;font-size:10px;letter-spacing:1.7px;font-weight:900;color:#829d5e}.trees{position:absolute;bottom:12px;left:0;width:100%;display:flex;justify-content:space-between;font-size:67px;z-index:1}.trees span{font-size:28px;align-self:flex-end}.event-cloud{position:absolute;z-index:3;inset:30px 0 0;display:flex;align-items:center;justify-content:center;flex-direction:column;animation:cloudpop 2.1s forwards}.event-cloud .puff{position:absolute;font-size:130px;filter:drop-shadow(0 0 16px var(--puff));opacity:.8}.event-cloud span{position:relative;font-size:47px}.event-cloud strong{position:relative;font:800 39px "Baloo 2";color:#fff;text-shadow:3px 4px 0 #7753a5;transform:rotate(-8deg)}.mystery-cloud{position:absolute;z-index:2;left:43%;top:51px;font-size:64px;opacity:.8}.mystery-cloud span{position:absolute;left:30px;top:11px;font:800 33px "Baloo 2";color:#7159a8}.clue-panel{position:absolute;z-index:4;left:50%;bottom:7px;transform:translate(-50%);display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;background:#fff;border:3px solid #ffd68b;border-radius:18px;padding:5px 12px;box-shadow:0 4px #e5b965;font-size:13px}.clue-dot,.color-dot{display:inline-block;width:22px;height:22px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 2px #876e9b44}.clue-emoji{font-size:21px}.prompt{text-align:center;font:800 23px "Baloo 2";color:#7353b3;margin:15px 0 8px;line-height:1}.suspects{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;align-content:center;flex:1;max-height:410px}.suspects.count-3 .suspect:last-child{grid-column:1/-1;width:calc(50% - 5px);justify-self:center}.suspects.count-5{grid-template-columns:repeat(3,1fr)}.suspects.count-5 .suspect:nth-child(4){grid-column:1/2;margin-left:40%}.suspects.count-5 .suspect:nth-child(5){grid-column:2/4;width:50%;margin-left:16%}.suspect{position:relative;border:5px solid white;border-radius:26px;background:#f8dbb2;box-shadow:0 6px #dcb88f;min-height:133px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:3px}.suspect:nth-child(3n+1){background:#f5cae4}.suspect:nth-child(3n+2){background:#c8e5f5}.suspect.selected{border-color:#ff6e9d;transform:translateY(-5px);box-shadow:0 11px #e39ab2}.suspect.wrong{animation:shake .35s}.suspect.winner{animation:jump .5s infinite alternate}.suspect .face{font-size:clamp(50px,14vw,72px);line-height:1}.suspect b{font:800 16px "Baloo 2";line-height:1;color:#62467a}.bubble-reaction{position:absolute;right:3px;top:0;font-size:21px;animation:bob 1.6s infinite}.attributes{display:flex;align-items:center;gap:5px;background:#fffefa;border-radius:30px;padding:1px 8px;min-height:28px;font-size:18px;box-shadow:0 2px #dec7b1}.attributes .color-dot{width:18px;height:18px}.bottom{position:relative;min-height:86px;display:flex;align-items:center;justify-content:center}.wait-text{font-weight:900;color:#a081a3;letter-spacing:1px;font-size:12px;text-align:center;padding-right:43px}.sound{position:absolute;right:0;bottom:0;width:39px;height:39px;font-size:18px}.inspect,.result{width:100%;margin-right:46px;background:#fff;border:3px solid #ffd68b;box-shadow:0 5px #e5b965;border-radius:19px;min-height:70px;display:flex;align-items:center;gap:7px;padding:7px}.inspect-face{font-size:31px}.inspect div{min-width:0;flex:1}.inspect strong,.inspect small{display:block;white-space:nowrap}.inspect strong{font:800 21px "Baloo 2";line-height:1;color:#7656ac}.inspect small{font-size:10px;color:#a17989;font-weight:900}.inspect small i{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:middle}.inspect button,.result button{border:0;border-radius:12px;background:#ff6094;color:#fff;padding:9px;font-size:12px;font-weight:900;min-height:43px}.inspect.oops{background:#fff0ec}.result{display:block;text-align:center;padding:3px}.result-emoji{font-size:21px}.result strong{display:block;font:800 19px "Baloo 2";color:#7552ae;line-height:1}.result span{font-size:11px;font-weight:900;color:#d79721}.result button{min-height:32px;padding:5px 14px;margin-left:7px}.book{padding:15px 19px;text-align:center}.book header span{font-size:12px;color:#bc7085;letter-spacing:1px;font-weight:900}.book header div{width:44px}.book-icon{font-size:65px;margin-top:22px}.book h2{font:800 42px "Baloo 2";line-height:1;color:#6347aa;margin:0}.book p{font-size:12px;letter-spacing:1.3px;color:#df7896;font-weight:900}.book-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:20px 0}.book-item{height:95px;background:#fff;border:3px dashed #e8cfaa;border-radius:20px;display:grid;place-content:center;color:#aa9aab}.book-item.found{border-style:solid;box-shadow:0 4px #e8cfaa;color:#6c5394}.book-item span{font-size:32px}.book-item b{font:800 16px "Baloo 2"}.book .primary{font-size:23px;min-height:58px;margin-top:5px}@keyframes bob{50%{transform:translateY(-7px)}}@keyframes wobble{50%{transform:rotate(12deg) scale(1.1)}}@keyframes cloudpop{0%{transform:scale(.1);opacity:0}18%{transform:scale(1.16);opacity:1}40%{transform:scale(1)}82%{opacity:1}to{transform:scale(1.3);opacity:0}}@keyframes shake{25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}@keyframes jump{to{transform:translateY(-8px) rotate(4deg)}}@media(max-height:800px){.home-toot{font-size:65px;margin-top:2vh}.home h1{font-size:67px}.home-friends span{font-size:60px}.primary{min-height:62px;margin-top:16px}.home-cloud{font-size:105px}.stage{height:170px}.suspect{min-height:105px}.suspect .face{font-size:49px}.prompt{margin:11px 0 4px}.suspects{max-height:350px}.book-link{margin-top:7px}}@media(max-height:660px){.stage{height:135px}.trees{font-size:45px}.mystery-cloud{top:27px;font-size:48px}.suspect{min-height:83px}.suspect .face{font-size:39px}.attributes{font-size:15px;min-height:21px}.prompt{font-size:19px}.bottom{min-height:75px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}.character-art,.cloud-art{display:inline-block;flex:none;background-repeat:no-repeat;vertical-align:middle}.character-art{width:83px;height:91px;background-image:url(/assets/characters-atlas.png);background-size:400% 300%}.cloud-art{width:43px;height:36px;background-image:url(/assets/clouds-atlas.png);background-size:500% 200%}.home-cloud-art{width:215px;height:92px;margin-top:5vh;filter:drop-shadow(0 7px 0 #f1d6a4);animation:wobble 3s ease-in-out infinite}.home-friends span{overflow:hidden}.home-friends .character-art{width:100%;height:100%;background-size:400% 300%}.suspect .character-art{width:75px;height:74px}.suspect .attributes .cloud-art{width:29px;height:24px}.event-cloud .cloud-art{width:225px;height:132px;filter:drop-shadow(0 10px 7px #6c4b7155)}.event-cloud strong{margin-top:-10px}.mystery-cloud{left:50%;top:40px;transform:translate(-50%);opacity:.6}.mystery-cloud .cloud-art{width:105px;height:67px;filter:grayscale(1)}.mystery-cloud span{left:43px;top:12px}.clue-panel .cloud-art{width:33px;height:28px}.inspect-face .character-art{width:42px;height:48px}.inspect small .cloud-art{width:25px;height:18px}.result-emoji .cloud-art{width:43px;height:34px}.book-cloud{width:150px;height:95px;margin-top:22px}.book-item .cloud-art{width:75px;height:54px}.book-item .unknown{font:800 30px "Baloo 2"}@media(max-height:800px){.home-cloud-art{height:75px;margin-top:2vh}.suspect .character-art{height:57px;width:68px}.event-cloud .cloud-art{height:102px;width:190px}}@media(max-height:660px){.suspect .character-art{height:40px;width:52px}.suspect .attributes .cloud-art{width:23px;height:18px}.event-cloud .cloud-art{height:80px;width:150px}}.home-friends>span{width:32%;aspect-ratio:1;display:grid;place-items:center;background:#fff;border:5px solid #fff;border-radius:42%;box-shadow:0 8px #e8cba1;animation:bob 2s infinite}.home-friends>span:nth-child(2){background:#fbd9ed;animation-delay:.3s;transform:translateY(-15px)}.home-friends>span:nth-child(3){animation-delay:.6s}.home-friends>span .character-art{display:block;width:100%;height:100%;background-image:url(/assets/characters-atlas.png);background-size:400% 300%;background-repeat:no-repeat}.count-3 .suspect{min-height:155px}.count-3 .suspect .character-art{width:105px;height:96px}@media(max-height:660px){.count-3 .suspect{min-height:105px}.count-3 .suspect .character-art{width:67px;height:60px}}.character-art{aspect-ratio:917/1286;height:auto;width:68px;background-size:400% 300%}.home-friends>span .character-art{width:73%;height:auto;aspect-ratio:917/1286}.suspect .character-art{width:66px;height:auto}.count-3 .suspect{min-height:170px}.count-3 .suspect .character-art{width:82px;height:auto}.inspect-face .character-art{width:35px;height:auto}.count-5 .suspect .character-art{width:54px;height:auto}@media(max-height:800px){.count-3 .suspect{min-height:152px}.count-3 .suspect .character-art{width:74px;height:auto}.suspect .character-art{width:59px;height:auto}.count-5 .suspect .character-art{width:48px;height:auto}}@media(max-height:660px){.count-3 .suspect{min-height:110px}.count-3 .suspect .character-art{width:51px;height:auto}.suspect .character-art{width:43px;height:auto}.count-5 .suspect .character-art{width:38px;height:auto}}