:root{font-family:Tahoma,"Noto Sans Thai",sans-serif;color:#fff;background:#69b9e8;--navy:#173858;--yellow:#ffd756}*{box-sizing:border-box}body{margin:0;min-height:100dvh;overflow:hidden}button{font:inherit}.start,.game,.win{width:100vw;height:100dvh;background:linear-gradient(#5cb9e833,#fff0),url('assets/lowpoly-village.png') center/cover;position:relative}.start{display:flex;align-items:center;justify-content:center;gap:clamp(30px,7vw,100px);padding:5vw}.intro{max-width:700px;background:#173858e8;border:5px solid #fff;border-radius:38px;padding:clamp(24px,4vw,52px);box-shadow:0 15px 0 #0b2238}.intro>b{color:var(--yellow);font-size:clamp(18px,2vw,28px)}h1{font-size:clamp(49px,6vw,92px);line-height:1;margin:.16em 0;text-shadow:0 7px #734695}.intro p{font-size:clamp(19px,2vw,28px)}button{border:0;border-radius:18px;padding:13px 25px;background:linear-gradient(#ffec78,#ffb52b);color:#173858;font-weight:900;box-shadow:0 7px 0 #9b5d00;cursor:pointer}button:active{transform:translateY(4px);box-shadow:0 3px 0 #9b5d00}.hero-cloud,.cloud{--cloud:#f8f6ff;position:relative;background:var(--cloud);border:5px solid #fff;box-shadow:0 10px 0 color-mix(in srgb,var(--cloud) 58%,#173858),0 14px 22px #17385855}.hero-cloud{width:min(30vw,380px);height:190px;border-radius:100px;display:grid;place-items:center;color:#173858;font-size:90px;font-weight:900}.hero-cloud:before,.hero-cloud:after,.cloud:before,.cloud:after{content:"";position:absolute;background:var(--cloud);border-radius:50%;border:inherit;z-index:0}.hero-cloud:before{width:150px;height:150px;left:48px;top:-65px}.hero-cloud:after{width:125px;height:125px;right:48px;top:-48px}.hero-cloud span,.cloud span{position:relative;z-index:2}.sound{position:fixed;z-index:40;right:18px;bottom:18px;width:58px;height:58px;padding:0;border:3px solid #fff;border-radius:50%;background:#173858;color:#fff;box-shadow:0 6px 0 #0b2238;font-size:25px}.game{overflow:hidden}.hud{position:absolute;z-index:25;top:15px;left:15px;right:15px;height:68px;display:flex;align-items:center;justify-content:space-between;gap:15px;background:#173858eb;border:3px solid #fff;border-radius:22px;padding:8px 18px}.bar{height:18px;flex:1;max-width:560px;border:2px solid #fff;border-radius:20px;background:#365c78;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,#72eff2,#ffd756,#ff7961);transition:.4s}.next{display:flex;align-items:center;gap:8px}.next strong{display:grid;place-items:center;width:48px;height:48px;background:#ffd756;color:#173858;border:3px solid #fff;border-radius:50%;font-size:25px}.restart{padding:7px 12px;box-shadow:0 4px 0 #9b5d00}.skyfield{position:absolute;z-index:10;left:3%;right:3%;top:95px;bottom:30%}.cell{position:absolute;width:15%;height:30%;display:grid;place-items:center}.cloud{--cloud:#f8f6ff;width:clamp(105px,10vw,158px);height:clamp(62px,6vw,88px);border-radius:55px;padding:0;color:#173858;font-size:clamp(28px,3vw,45px);font-weight:900;animation:float 3s ease-in-out infinite;animation-delay:var(--delay)}.cloud:before{width:54%;aspect-ratio:1;left:8%;top:-42%;border:0}.cloud:after{width:45%;aspect-ratio:1;right:10%;top:-30%;border:0}.cloud.c0{--cloud:#ff3b30;color:#fff}.cloud.c1{--cloud:#1677ff;color:#fff}.cloud.c2{--cloud:#ffd500;color:#173858}.cloud.c3{--cloud:#ff6b00;color:#fff}.cloud.c4{--cloud:#00b84a;color:#fff}.cloud.c5{--cloud:#7b3ff2;color:#fff}.cloud.c6{--cloud:#00b8d9;color:#fff}.cloud.c7{--cloud:#ff2d95;color:#fff}.cloud.c8{--cloud:#f5c400;color:#173858}.cloud.c9{--cloud:#3d5afe;color:#fff}.cloud:hover{transform:scale(1.08)}.cloud.correct{animation:poof .45s forwards;pointer-events:none}.cloud.wrong{animation:shake .35s}.message{position:absolute;z-index:20;left:50%;bottom:25%;transform:translateX(-50%);min-width:min(620px,80vw);text-align:center;background:#173858e8;border:3px solid #fff;border-radius:20px;padding:10px 24px;font-weight:900;color:#c6fff1}.win{display:grid;place-items:center;text-align:center}.win>div{background:#173858ed;border:5px solid #fff;border-radius:38px;padding:45px;box-shadow:0 16px 0 #0b2238}.win h1{margin:.15em}.celebrate{font-size:85px}@keyframes float{50%{transform:translateY(-10px)}}@keyframes poof{60%{transform:scale(1.25);opacity:.8}100%{transform:scale(.2);opacity:0}}@keyframes shake{25%{transform:translateX(-10px) rotate(-3deg)}75%{transform:translateX(10px) rotate(3deg)}}@media(max-aspect-ratio:4/3){body{overflow:auto}.start{height:auto;min-height:100dvh;flex-direction:column}.hero-cloud{width:min(65vw,350px)}.game{min-height:1200px;height:auto}.skyfield{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(5,1fr);bottom:20%;height:900px;gap:12px}.cell{position:relative!important;left:auto!important;top:auto!important;width:auto;height:auto}.message{bottom:12%}.hud{height:auto;flex-wrap:wrap}}@media(max-height:650px) and (orientation:landscape){.hud{top:6px;height:55px}.skyfield{top:70px;bottom:27%;gap:5px}.cloud{width:105px;height:58px;font-size:27px}.message{bottom:21%;padding:5px}.sound{width:48px;height:48px}}