:root{font-family:'Trebuchet MS',ui-rounded,system-ui,sans-serif;color:#24345c;background:#e9f6ff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:radial-gradient(circle at 8% 13%,#fff1a6 0 5px,transparent 6px),radial-gradient(circle at 87% 24%,#ffa0c9 0 4px,transparent 5px),radial-gradient(circle at 17% 67%,#9edee3 0 5px,transparent 6px),radial-gradient(circle at 91% 83%,#baadfa 0 4px,transparent 5px),linear-gradient(165deg,#f0e9ff 0%,#e8f7ff 36%,#fff4d5 100%);background-attachment:fixed;min-height:100vh}
button{transition:transform .13s ease,box-shadow .13s ease,filter .13s ease}
button:active{transform:translateY(3px) scale(.985);filter:saturate(1.12)}
button:focus-visible{outline:4px solid #f9824f;outline-offset:3px}
header{background:#fffef9;color:#352373;border-bottom:4px solid #f2d7ff;box-shadow:0 6px 0 #a6a0d62e;padding:12px 16px;min-height:66px}
header button,header strong{color:#3d2c84}
header button:first-child{display:flex;align-items:center;text-align:left;gap:5px;font-size:17px;line-height:1.02}
header button:first-child strong{max-width:180px;display:block}
header button:last-child{background:#ffdf70;color:#352373;border:2px solid #dba849;border-radius:16px;box-shadow:0 3px 0 #c38f3d;padding:9px 11px;white-space:nowrap}
main{max-width:820px;padding:17px 15px 110px}
.hero{position:relative;isolation:isolate;overflow:hidden;background-color:#392878;background-image:linear-gradient(180deg,transparent 0%,transparent 34%,#483394 64%,#392878 100%),url('hud-world.webp');background-size:100% 100%,auto 62%;background-position:center center,center top;background-repeat:no-repeat;border:5px solid #fff;box-shadow:0 12px 0 #6650a6,0 21px 27px #48357440;border-radius:32px;min-height:405px;padding:9px 20px 20px;margin:3px 0 26px;color:white}
.hero:before,.hero:after{content:'';position:absolute;border-radius:50%;z-index:-1;filter:blur(1px)}
.hero:before{width:15px;height:15px;background:#ffe980;top:22px;left:17px;box-shadow:40px 33px 0 #ffa1c5,270px 55px 0 #ffe980}
.hero:after{width:10px;height:10px;background:#fff;right:28px;top:170px;box-shadow:-280px -55px 0 #fff}
.hero .mascotButton{height:228px;width:222px;margin:-2px auto -13px;overflow:visible;filter:drop-shadow(0 8px 6px #27204866);animation:mascotFloat 3.6s ease-in-out infinite}
.hero .mascotButton img{object-fit:contain}
.hero h1{color:#fff;font-size:clamp(32px,8vw,43px);font-weight:950;letter-spacing:-1.5px;text-shadow:0 3px 0 #241b62;margin:0 0 4px}
.hero p{color:#fff6d9;font-size:16px;line-height:1.35;font-weight:800;max-width:330px;margin:0 auto}
.hero .mascotHello{background:#fff2a4;color:#392873;border:2px solid white;box-shadow:0 4px 0 #b59055;padding:10px 18px;margin:11px auto}
.hero .ageChip{background:#fff;color:#46318e;margin-top:9px;border:2px solid #d5cbff}
.sectionKicker{color:#5c3e94;font-size:13px;font-weight:950;letter-spacing:1.3px;margin:16px 6px 11px}
.featureDeck{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-bottom:27px}
.featureDeck>button{position:relative;min-width:0;min-height:125px;margin:0;padding:18px 14px;text-align:left;display:block;border:3px solid white;border-radius:24px;box-shadow:0 6px 0 #3444782d,0 11px 18px #34447816;color:#253253;overflow:hidden;font-size:20px;font-weight:950;line-height:1.1}
.featureDeck>button span,.featureDeck>button small,.featureDeck>button strong{display:block;font-size:14px;font-weight:850;line-height:1.25;margin-top:7px;color:inherit;float:none}
.featureDeck>button:after{content:'✦';position:absolute;right:13px;top:8px;color:#ffffffba;font-size:25px;pointer-events:none}
.featureDeck .dailyHero{grid-column:span 2;min-height:126px;background:linear-gradient(125deg,#ff7455,#f63f80);color:#fff;box-shadow:0 6px 0 #bf4371,0 11px 18px #bd4b7c33}
.featureDeck .dailyHero span{margin:0;font-size:22px;line-height:1.2}.featureDeck .dailyHero span b{font-size:22px}.featureDeck .dailyHero small{font-size:14px}.featureDeck .dailyHero strong{font-size:15px;text-align:right;color:#fff7af}
.featureDeck .creativeHero{background:linear-gradient(135deg,#fba9e5,#e0b5ff);color:#46246b}
.featureDeck .playHero{background:linear-gradient(130deg,#ffbd59,#ff8854);color:#53301c}
.featureDeck .foundationHero{background:linear-gradient(125deg,#ffe784,#ffc753);color:#513c18}
.featureDeck .discoveryHero{background:linear-gradient(125deg,#a6edfa,#91c9ff);color:#183c69}
.featureDeck .skillHero{grid-column:span 2;min-height:88px;background:linear-gradient(110deg,#8becce,#55d7a8);color:#164b43}
.featureDeck .skillHero span{margin-top:5px}
.exploreTitle{font-size:24px;margin:0 4px 15px;text-align:left;color:#402b7e}
.grid{gap:14px}
.tile{position:relative;min-height:103px;border:3px solid #fff;border-radius:23px;padding:13px 15px;box-shadow:0 6px 0 #5960902c,0 11px 19px #4f638a23;background-image:linear-gradient(130deg,#ffffff30,transparent 67%);overflow:hidden}
.tile:before{content:'';position:absolute;width:95px;height:95px;border-radius:50%;right:-42px;top:-39px;background:#ffffff4c}
.tile .icon{height:65px;width:65px;flex:none;display:grid;place-items:center;font-size:37px;background:#ffffffb8;border:2px solid #fff;border-radius:19px;transform:rotate(-6deg);box-shadow:0 4px 0 #4b477529}
.tile .icon .sprite,.tile .icon .tileColorArt{height:58px;width:58px;display:block}
.tile .icon .tileColorArt{background-repeat:no-repeat;background-size:200% 200%;background-position:0 0}
.tile b{font-size:18px;line-height:1.1;display:block}.tile small{font-size:14px;line-height:1.25}.tile .chev{position:relative;color:#3c3176;font-weight:950}
h2{font-weight:950;letter-spacing:-.8px;color:#423080;text-shadow:0 2px #fff;font-size:30px}
.hint{color:#42547b;line-height:1.45}
.panel,.rhymePanel,.storyGroups section,.paletteBox{border:3px solid #fff;border-radius:27px;background:#fffefa;box-shadow:0 8px 0 #927bb64d,0 13px 21px #634e9b23}
.panel{padding:20px 17px;margin-bottom:22px}
.primary{background:#6842c6;box-shadow:0 5px 0 #422484;border:2px solid #ffffff80;border-radius:17px;min-height:54px}
.primary.soft{background:#e7e4ff;color:#433294;box-shadow:0 4px 0 #bbb1e9}
.listen{background:#ddf8ea;color:#105a53;border:2px solid #7bdbbe;border-radius:16px;box-shadow:0 4px 0 #67b99e}
.score{background:#fff3bd;border-radius:999px;padding:8px 13px;display:table;margin:8px auto 15px;color:#673a78;font-weight:900}
.feedback{color:#483288;line-height:1.4}
.fact{background:#fff2c4;border:2px dashed #edbc69}
.featuredArt{border-radius:23px;background:radial-gradient(circle,#fff9e9 30%,#d9f4ff 78%);border:3px solid #dbbffb}
.gameGrid button,.creativeCards button,.dayTile,.colorGallery button,.foundationGrid button,.skillGrid button,.songGrid button,.discoveryCategories button,.discoveryList button{border:3px solid #fff;box-shadow:0 6px 0 #59609033,0 10px 18px #5960901b;border-radius:22px}
.gameGrid button{min-height:134px}.gameGrid button span{font-size:42px}.gameGrid button b{font-size:17px}
.creativeCards button{min-height:170px}.creativeCards span{font-size:43px}
.playWelcome,.creativeWelcome{border:4px solid #fff;box-shadow:0 7px 0 #7b65b755,0 14px 18px #7b65b722}
.playWelcome{background:linear-gradient(120deg,#ffe08a,#ffbb7a)}.creativeWelcome{background:linear-gradient(120deg,#ffc2e4,#d6c0ff)}
.sceneStage{box-shadow:0 7px 0 #64539a66;border-width:5px}
canvas{border:5px solid #fff;box-shadow:0 7px 0 #8375b85c,0 13px 18px #8375b827;border-radius:24px}
.rhymeTabs button,.storyPicks button,.animalPicker button,.scenePicker button{box-shadow:0 4px 0 #61538a2e}
.extraAnswers button,.matchOptions button,.soundChoices button,.storyChoices button,.skillAnswers button,.discoveryAnswers button{border:2px solid #fff;box-shadow:0 4px 0 #6866ac47;border-radius:17px;min-height:55px}
.bottomNav{position:fixed;z-index:10;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,820px);display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:#fffefa;padding:8px 8px max(8px,env(safe-area-inset-bottom));border:3px solid #e4d5ff;border-bottom:0;border-radius:22px 22px 0 0;box-shadow:0 -6px 22px #30255833}
.bottomNav button{background:transparent;color:#594781;border-radius:16px;padding:5px 3px;font-size:12px;font-weight:850;min-height:51px}.bottomNav button span{display:block;font-size:22px;line-height:1.05;margin-bottom:2px}
body[data-page='home'] .bottomNav .navHome,body[data-page='playZone'] .bottomNav .navPlay,body[data-page='gameQuiz'] .bottomNav .navPlay,body[data-page='creative'] .bottomNav .navCreate,body[data-page='animals'] .bottomNav .navAnimals{background:#eee1ff;color:#42278d;box-shadow:inset 0 -3px 0 #c6a6f4}
@keyframes mascotFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1deg)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:380px){.featureDeck>button{font-size:18px;padding:15px 11px}.hero{min-height:395px}.hero .mascotButton{height:214px}.tile{padding:12px}.tile .icon{width:57px;height:57px;font-size:32px}.tile .icon .sprite,.tile .icon .tileColorArt{width:52px;height:52px}}
@media(min-width:620px){.featureDeck{grid-template-columns:repeat(4,minmax(0,1fr))}.featureDeck .dailyHero{grid-column:span 4}.featureDeck .skillHero{grid-column:span 4}.hero{min-height:425px}.hero .mascotButton{height:235px;width:235px}.tile{min-height:115px}}