:root{--ink:#253e4d;--purple:#7353b4;--muted:#6d8393;--line:#dae7ee}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:'Trebuchet MS',Arial,sans-serif;background-color:#eaf6fc;background-image:linear-gradient(#bad9e64d 1px,transparent 1px),linear-gradient(90deg,#bad9e64d 1px,transparent 1px);background-size:28px 28px}button,select{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible,a:focus-visible{outline:4px solid #f3aa28;outline-offset:4px}header{max-width:1190px;padding:22px 30px 12px;margin:auto;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#2c5264;font-weight:bold;font-size:17px}.brand small{display:block;color:#7794a4;font-size:9px;margin-top:6px;letter-spacing:1.6px}.brand-icon{font-size:28px;transform:rotate(-7deg);color:#fff;background:#f7b632;box-shadow:0 4px 0 #d59824;border:3px solid #fff;border-radius:12px;padding:6px 10px;text-shadow:1px 2px #cc8215}.brand-icon span{color:#6551ab;display:inline-block;transform:translateY(-6px);text-shadow:none}.help{border:2px solid #d0e2eb;background:#fff;color:#4a6b7e;font-size:12px;font-weight:bold;display:flex;align-items:center;gap:9px;padding:9px 13px;border-radius:12px;box-shadow:0 3px 0 #caddE8}.help span{background:#fce3a2;border-radius:50%;padding:3px 7px;color:#84601e}main{max-width:1120px;margin:auto;padding:0 24px}.heading{text-align:center;margin:10px auto 25px;position:relative}.eyebrow{font-size:10px;letter-spacing:2.6px;color:#5f8da4;font-weight:bold}h1{font-size:clamp(39px,5.5vw,66px);letter-spacing:-3px;margin:12px 0 13px;line-height:1.3}.title-word{display:inline-block;white-space:nowrap}h1 i{font-style:normal;display:inline-block;color:#ed8c40;text-shadow:0 3px 0 #fff,0 5px 0 #db874039;transform:rotate(-5deg)}h1 i:nth-child(2n){color:#7557bd;transform:rotate(5deg) translateY(-3px)}h1 i:nth-child(3n){color:#2eab99;transform:rotate(-3deg)}h1 i:nth-child(4n){color:#ee798c;transform:rotate(5deg)}h1 i:nth-child(5n){color:#3592cc;transform:rotate(-5deg)}h1 .title-word+span{margin-left:9px}.heading p{color:#668899;font-size:14px;margin:0}.game{border-radius:24px;background:#fffdf7;border:4px solid #fff;box-shadow:0 7px 0 #c4dce7,0 18px 35px #40678318;overflow:hidden}.toolbar{padding:13px 25px;display:flex;align-items:center;justify-content:space-between;gap:14px;background:white;border-bottom:2px dashed #e3eaf0}.toolbar label{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:1px;color:#7893a0;font-weight:bold}select{border:2px solid #d3e5ee;background:#f2f9fd;color:#345a71;border-radius:10px;padding:9px 30px 9px 12px;font-size:14px;max-width:240px;font-weight:bold}.score{font-size:13px;color:#698494;display:flex;gap:8px;align-items:center}.score strong{color:#a77314;background:#fff0bb;border:2px solid #f7d578;border-radius:10px;padding:6px 14px;font-size:18px}.score>span{font-size:24px}.icon-btn{font-size:11px;border:1px solid #dfE9ee;background:#f2f7f9;color:#6a8796;border-radius:9px;padding:8px 11px}.sky{height:220px;background:linear-gradient(#d9f1fc,#edf9fe);position:relative;overflow:hidden;display:flex;align-items:center;padding:28px 34px}.sky:before{content:'';position:absolute;bottom:-49px;left:-2%;width:104%;height:75px;background:#c1dfa1;border-radius:50% 60% 0 0}.sky:after{content:'';position:absolute;bottom:-64px;left:20%;width:100%;height:78px;background:#afd58d;border-radius:50% 50% 0 0}.sky-copy{z-index:3;position:relative}.pill{display:inline-block;font-size:11px;color:#8b5c20;background:#ffdf7b;border:2px solid white;padding:6px 14px;border-radius:8px;font-weight:bold;letter-spacing:.6px;transform:rotate(-3deg);box-shadow:0 2px 0 #deb65f}h2{font-size:29px;letter-spacing:-.8px;margin:14px 0 10px;line-height:1.15;color:#31556c}.sky-copy p{font-size:13px;color:#4b8293;margin:0;background:#ffffffb0;border-radius:10px;display:inline-block;padding:6px 10px;font-weight:bold}.school-supplies{height:193px;position:absolute;right:19px;bottom:4px;width:255px;z-index:2}.sky-doodle{position:absolute;right:28%;top:0;width:160px;height:160px;opacity:.9}.balloons{height:220px;width:280px;position:absolute;right:215px;bottom:0;z-index:2;pointer-events:none}.balloon{position:absolute;width:40px;height:51px;background:var(--balloon);border:1px solid #00000009;border-radius:50% 50% 47% 47%;bottom:var(--y);left:var(--x);transform:rotate(var(--rot));box-shadow:inset -5px -5px 0 #00000008;transition:transform 1.1s ease-in,opacity 1.1s}.balloon:before{content:'';position:absolute;left:8px;top:8px;width:9px;height:16px;background:#ffffff70;border-radius:50%;transform:rotate(22deg)}.balloon:after{content:'';position:absolute;width:1px;height:115px;background:#7596a26b;left:20px;top:51px;transform-origin:top;transform:rotate(-6deg)}.balloon .knot{position:absolute;top:48px;left:16px;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:6px solid var(--balloon)}.balloon.gone{transform:translateY(-310px) rotate(25deg);opacity:0}.play-area{padding:24px 28px 23px;background-image:repeating-linear-gradient(transparent 0,transparent 30px,#d9e3ed45 31px,transparent 32px);position:relative}.keyboard-label{display:flex;justify-content:space-between;font-size:11px;letter-spacing:1px;color:#8a7b65;margin-bottom:15px;font-weight:bold}.keyboard-label>span:first-child{background:#ffdf7b;padding:7px 12px;transform:rotate(-1deg);border-radius:3px}.key-note{letter-spacing:0;font-weight:normal;color:#9c9588;padding-top:7px}.keyboard{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:auto;max-width:960px}.key{flex:0 0 49px;min-height:48px;border:2px solid #b8d9e8;border-bottom:5px solid #8ebbd0;border-radius:11px;background:#e3f2fb;color:#377794;font-size:20px;font-weight:bold;transition:transform .13s,background .13s}.key:nth-child(4n+2){background:#eee5fb;color:#8060ab;border-color:#d5c6ed;border-bottom-color:#b59bda}.key:nth-child(4n+3){background:#e6f3dc;color:#65854a;border-color:#c7dfb2;border-bottom-color:#9fbe83}.key:nth-child(4n){background:#fff0c4;color:#a37c29;border-color:#efda9c;border-bottom-color:#d5b96b}.key:hover:not(:disabled){transform:translateY(-4px);filter:brightness(1.025);box-shadow:0 4px 0 #00000009}.key:active:not(:disabled){transform:translateY(2px)}.key.correct{background:#58b99d;color:#fff;border-color:#3aa48a;border-bottom-color:#2b8c73}.key.wrong{background:#f0ece5;color:#c3bcb0;border-color:#dfdad0;border-bottom-color:#d1cabd;text-decoration:line-through}.key:disabled{cursor:default}.board-label{font-size:10px;font-weight:bold;letter-spacing:3px;color:#7f786b;text-align:center;margin:25px 0 8px}.word-box{padding:27px 12px;min-height:118px;display:flex;align-items:center;justify-content:center;background:#315e58;border:8px solid #ddae70;border-bottom-color:#c58d52;border-radius:12px;box-shadow:inset 0 0 0 2px #244c48,0 4px 0 #b6824d26;position:relative}.word-box:after{content:'';position:absolute;width:32px;height:5px;background:#fff2d6;border-radius:2px;bottom:2px;right:30px;transform:rotate(-2deg)}.word{display:flex;justify-content:center;gap:14px 20px;flex-wrap:wrap;max-width:100%}.word-part{display:flex;gap:5px;flex-wrap:nowrap}.tile{width:var(--tile-width,44px);height:52px;border:2px solid #f9f0d2;border-bottom:4px solid #dacb9c;background:#fffbe9;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:var(--tile-font,29px);font-weight:bold;color:#315e58;position:relative;box-shadow:0 3px 0 #173a3026}.tile:empty:after{content:'';width:13px;height:3px;background:#d5cba8;position:absolute;bottom:11px;border-radius:2px}.tile.revealed{animation:pop .25s ease;background:#fff3ac;border-color:#e9d87a}.tile.missed{color:#be645f;background:#ffe8dc;border-color:#f0ba9d}.feedback{min-height:50px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:13px;color:#8d8a7b;padding:12px 0 3px}.feedback.win{color:#299876;font-size:20px;font-weight:bold}.feedback.lose{color:#b26d62;font-size:15px}.actions{display:flex;align-items:center;justify-content:space-between;margin-top:6px;gap:12px}.actions>span{font-size:11px;color:#a69e8f}.primary{border:2px solid #d99a20;border-bottom:5px solid #c58c1c;border-radius:12px;background:#ffc74d;color:#674712;padding:12px 23px;font-weight:bold;font-size:14px;box-shadow:0 3px 0 #d69c1b14}.primary:hover{background:#ffd46b;transform:translateY(-1px)}.primary span{padding-left:18px}.bottom-note{display:flex;justify-content:center;gap:30px;margin:25px 0 20px;color:#6d94a5;font-size:11px;font-weight:bold}footer{text-align:center;color:#8ca7b4;font-size:10px;padding:0 0 23px}footer span{margin:0 8px}.decoration{position:absolute;font-size:63px;opacity:.85;pointer-events:none;z-index:-1}.pencil{left:2%;top:270px;transform:rotate(-25deg)}.book{right:1%;top:430px;transform:rotate(15deg)}dialog{border:5px solid #fff;border-radius:23px;max-width:470px;width:calc(100% - 36px);padding:30px;color:var(--ink);background:#fffbee;box-shadow:0 20px 90px #203a524d}dialog::backdrop{background:#1b3f5688;backdrop-filter:blur(5px)}.close{position:absolute;right:14px;top:10px;background:none;border:none;font-size:28px;color:#95866a}.modal-emoji{font-size:40px}dialog h2{font-size:27px}dialog ol{padding-left:21px;line-height:1.6;font-size:14px}dialog li{margin:10px 0}dialog p{font-size:12px;line-height:1.6;color:#95876d}dialog .primary{width:100%;margin-top:10px}#confetti{pointer-events:none;position:fixed;inset:0;overflow:hidden;z-index:50}.confetti{position:absolute;top:-20px;width:10px;height:15px;background:var(--color);left:var(--left);animation:fall 2.3s ease-in var(--delay) forwards}@keyframes fall{to{transform:translateY(110vh) rotate(650deg)}}@keyframes pop{50%{transform:scale(1.13)}}
@media(max-width:950px){.school-supplies{width:190px;height:155px;right:4px}.balloons{right:155px;transform:scale(.92);transform-origin:bottom right}.sky h2{font-size:26px}.sky-doodle{right:25%;width:110px;height:110px}.key{flex-basis:45px}.sky{padding-left:25px}}@media(max-width:750px){main{padding:0 12px}header{padding:17px 16px 10px}.brand{font-size:13px;gap:9px}.brand small{font-size:7px;letter-spacing:1px}.brand-icon{font-size:23px;padding:6px 8px}.heading{margin:14px 0 20px}.heading p{font-size:12px;padding:0 15px}.eyebrow{font-size:8px;letter-spacing:1.8px}.toolbar{padding:12px;gap:8px;flex-wrap:wrap}.toolbar label{gap:6px;font-size:9px}select{font-size:12px;padding:8px;max-width:185px}.score{font-size:10px;margin-left:auto;gap:5px}.score>span{font-size:17px}.score strong{font-size:15px;padding:5px 9px}.icon-btn{font-size:10px;padding:7px 9px}.sky{padding:17px 17px 28px;height:220px;align-items:flex-start}.sky h2{font-size:22px;margin-top:17px}.sky-copy{max-width:57%}.sky-copy p{font-size:10px;position:relative;z-index:4}.balloons{right:0;bottom:12px;transform:scale(.64);transform-origin:bottom right}.school-supplies{right:130px;bottom:0;width:125px;height:100px;opacity:1}.sky-doodle{width:93px;height:93px;right:7px;top:0}.play-area{padding:20px 12px}.key{flex-basis:39px;min-height:45px;font-size:17px;border-radius:9px}.keyboard{gap:6px}.key-note{display:none}.keyboard-label{font-size:10px}.tile{height:42px}.word-part{gap:4px}.word{gap:12px}.word-box{padding:22px 4px;border-width:6px;min-height:105px}.board-label{margin-top:23px}.bottom-note{gap:12px;flex-wrap:wrap;font-size:10px;padding:0 16px}.actions>span{max-width:150px;line-height:1.5}.primary{padding:11px 14px;font-size:12px}.help{font-size:10px;padding:8px}.help span{display:none}.feedback{font-size:12px;min-height:55px}.feedback.win{font-size:17px}}@media(max-width:390px){h1{font-size:38px;letter-spacing:-2px}.heading p{font-size:11px}.key{flex-basis:35px;min-height:42px}.tile{height:36px}.sky h2{font-size:20px}.school-supplies{right:117px;width:115px}.balloons{transform:scale(.59)}.score{font-size:9px}select{max-width:160px}.icon-btn{margin-left:auto}.sky-copy{max-width:62%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}