:root{--console-purple:#5631c5;--console-deep:#3d229e;--console-sky:#20c3ee;--console-lime:#75d538}
html,body{min-height:100%;overscroll-behavior:none}
body{background:#4f2bb8;color:#fff;background-image:radial-gradient(circle at 18% 35%,#8058e744 0 2px,transparent 3px),radial-gradient(circle at 75% 66%,#9a75ef33 0 3px,transparent 4px),linear-gradient(145deg,#6039cb,#4425a7 68%,#351c8d);background-size:38px 38px,52px 52px,auto}
.sky-decor{display:block;position:fixed;z-index:-1;inset:0 0 auto;height:122px;background:linear-gradient(#19bde9 0 62%,#75d538 63% 86%,#4bad25 87%);overflow:hidden}
.sky-decor:before{content:"☁️   ☁️       ☁️";position:absolute;inset:6px 4% auto;color:#fff;font-size:27px;letter-spacing:15vw;white-space:nowrap;filter:drop-shadow(0 3px 0 #ffffff55)}
.sky-decor:after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:28px;background:radial-gradient(ellipse at 4% 0,#4bad25 0 17px,transparent 18px) 0 0/92px 28px repeat-x}
.topbar{height:88px;max-width:none;padding:8px 26px;color:#fff;position:sticky;top:0;background:linear-gradient(180deg,#19bde9 0 64%,#75d538 65% 84%,#4bad25 85%);box-shadow:0 5px 0 #351c8d;z-index:30}
.brand{color:#fff;font-size:24px;text-shadow:0 3px 0 #277220;gap:8px}
.brand-mascot{width:58px;height:58px;display:grid;place-items:center;background:#fff;border:5px solid #ffd84d;border-radius:50%;font-size:34px;box-shadow:0 5px 0 #e39625;animation:mascotBounce 2.3s ease-in-out infinite}
.console-mode-tabs{position:absolute;left:50%;top:14px;transform:translateX(-50%);display:flex;align-items:end;gap:9px}
.console-mode-tabs button{border:0;border-radius:18px 18px 10px 10px;background:#fff;color:#5336ac;min-width:96px;padding:8px 15px 7px;font-weight:900;box-shadow:0 5px 0 #d8b848;transition:.2s}
.console-mode-tabs button span{font-size:21px}.console-mode-tabs button.active{background:#fff36c;transform:translateY(4px);box-shadow:0 3px 0 #d78b21}
.top-actions{gap:8px}.pill,.avatar-btn,.music-toggle,.orientation-toggle{border:3px solid #fff;background:#ffffffdf;box-shadow:0 5px 0 #2c8c32,0 7px 16px #16577033}
.orientation-toggle{height:46px;border-radius:16px;padding:2px 9px;display:flex;align-items:center;gap:4px;color:#5133b3;font-weight:900}.orientation-toggle span{font-size:21px}.orientation-toggle small{font-size:9px}
main{max-width:none;padding:20px 32px 20px}
.hero{min-height:122px;height:122px;padding:15px 28px;margin:0 auto 12px;max-width:1180px;border-radius:24px;background:linear-gradient(110deg,#ff5e9f,#ff9460 48%,#ffd45d);border:4px solid #fff;box-shadow:0 8px 0 #301887,0 13px 32px #28116c66}
.hero-video,.hero-video-shade{display:none}.hero:before{background-image:radial-gradient(#fff7 2px,transparent 3px);background-size:25px 25px}.hero-copy{display:grid;grid-template-columns:minmax(260px,1fr) 310px;grid-template-rows:auto auto;align-items:center;column-gap:24px;width:100%}.hero .eyebrow{grid-column:1;font-size:10px}.hero h1{grid-column:1;font-size:30px;margin:2px 0}.hero p{grid-column:1;margin:0;font-size:12px}.daily-card{grid-column:2;grid-row:1/3;background:#fff3;color:#fff;border:2px solid #fff7;padding:8px 11px}.hero-world{position:absolute;right:0;inset-block:0;width:250px;opacity:.42;pointer-events:none}.hero-world .sun,.hero-world .cloud{display:none}.island{transform:scale(.56);right:-30px;bottom:13px}
.learning-section{max-width:1180px;margin:auto;padding:0}
.library-nav{position:sticky;top:89px;z-index:15;display:flex;gap:9px;overflow-x:auto;padding:9px 2px 12px;scrollbar-width:none;background:linear-gradient(#5631c5 70%,transparent)}
.library-nav::-webkit-scrollbar{display:none}.library-nav button{border:3px solid #fff;border-radius:99px;background:#724bdd;color:#fff;padding:8px 16px;white-space:nowrap;font-weight:900;box-shadow:0 5px 0 #301887}.library-nav button.active{background:#ffe34f;color:#513095;box-shadow:0 5px 0 #d98d25}
.console-library{display:flex;flex-direction:column;gap:12px}.library-row{scroll-margin-top:145px;background:#ffffff0a;border:1px solid #ffffff19;border-radius:25px;padding:10px 13px 16px;box-shadow:inset 0 1px 0 #ffffff1f}
.library-heading{display:flex;align-items:center;gap:8px;height:34px;padding:0 4px}.library-heading>span{font-size:22px}.library-heading h2{font-family:"Baloo 2";font-size:20px;margin:0;color:#fff;text-shadow:0 3px 0 #2e167f}.library-heading i{height:3px;flex:1;border-radius:99px;background:linear-gradient(90deg,#ffffff6b,transparent)}
.library-row .game-grid{display:flex;gap:14px;overflow-x:auto;padding:5px 3px 12px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#ffe34f #321a88}
.library-row .game-grid::-webkit-scrollbar{height:7px}.library-row .game-grid::-webkit-scrollbar-thumb{background:#ffe34f;border-radius:9px}
.library-row .game-card{scroll-snap-align:start;flex:0 0 210px;min-height:128px;height:128px;padding:9px 11px;display:grid;grid-template-columns:72px 1fr;grid-template-rows:1fr auto;gap:3px 9px;text-align:left;align-items:center;border:4px solid #fff;border-radius:24px;background:linear-gradient(150deg,color-mix(in srgb,var(--accent),white 23%),var(--accent));box-shadow:0 7px 0 color-mix(in srgb,var(--accent),#251269 45%),0 10px 18px #21105f55;color:#fff;overflow:hidden}
.library-row .game-card:before{width:90px;height:90px;background:#fff3}.library-row .game-card:after{color:#fff;font-size:20px;right:12px;top:8px}.library-row .game-card:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:0 10px 0 color-mix(in srgb,var(--accent),#251269 45%),0 14px 20px #21105f55}.library-row .game-icon{grid-column:1;grid-row:1/3;width:70px;height:70px;flex-basis:auto;border-radius:21px;background:#fff;color:var(--accent);font-size:27px;box-shadow:inset 0 -6px 0 #eee,0 5px 0 #0002}
.library-row .game-info{grid-column:2;grid-row:1;align-items:flex-start;z-index:1}.library-row .game-info strong{font-size:16px;line-height:1;text-shadow:0 2px 0 #0003}.library-row .game-info small{font-size:9px;color:#fff;min-height:0;opacity:.94;-webkit-line-clamp:2}.library-row .card-stars{grid-column:2;grid-row:2;margin:0;color:#fff56e;background:#2b176c55;font-size:11px;width:max-content}.library-row .play-arrow{right:8px;bottom:8px;width:24px;height:24px;color:var(--accent);font-size:19px}.library-row .level-number{top:6px;right:8px;color:#fff9}.library-row .age-badge{top:5px;left:5px;background:#ff527c;border-width:2px}
.reward-banner{max-width:1180px;margin:18px auto 22px;background:linear-gradient(110deg,#ffda4e,#ff9b42);border:4px solid #fff;box-shadow:0 8px 0 #301887;color:#54300b}
.reward-banner .eyebrow{color:#843c00}.mobile-nav{background:#4e2bb8;border-color:#ffffff38}.mobile-nav button{color:#d8cbff}.mobile-nav .active{color:#ffeb58}
.modal{z-index:70;background:#24125bc9}.game-modal-card{width:min(98vw,1180px);background:linear-gradient(145deg,#e7e4ff,#fff 55%,#d9fbf1);border:5px solid #fff;box-shadow:0 0 0 5px #6b50e6,0 22px 60px #17094799}
.game-modal-card:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 8% 12%,#ffdd6177 0 3px,transparent 4px),radial-gradient(circle at 93% 82%,#6be7d477 0 4px,transparent 5px);background-size:42px 42px,55px 55px;border-radius:inherit}
.game-modal-card #gameStage{position:relative}.question-box{box-shadow:0 7px 0 #d8d0ed;border:2px solid #fff}.close-btn{z-index:8;width:48px;height:48px;background:#fff;border:3px solid #e0d8f3;box-shadow:0 5px 0 #bcb1da}
.rotate-coach{position:fixed;inset:0;z-index:20000;background:linear-gradient(145deg,#4d29b8e8,#1cb7dce8);display:none;place-items:center;padding:20px}.rotate-coach.show{display:grid}.rotate-card{width:min(92vw,390px);background:#fff;color:#3d2e71;border:5px solid #ffe65b;border-radius:30px;padding:24px;text-align:center;box-shadow:0 10px 0 #28157c,0 25px 55px #160a5d88;display:flex;flex-direction:column;align-items:center;gap:8px}.rotate-mascot{font-size:66px;animation:rotatePhone 1.8s ease-in-out infinite}.rotate-card strong{font-family:"Baloo 2";font-size:24px;line-height:1.1}.rotate-card small{color:#746a94}.rotate-card .primary-btn{margin-top:8px}.rotate-skip{border:0;background:transparent;color:#745fc2;font-weight:900;padding:8px}
@keyframes mascotBounce{50%{transform:translateY(-5px) rotate(5deg)}}@keyframes rotatePhone{50%{transform:rotate(90deg) scale(1.08)}}
@media(orientation:landscape) and (max-height:650px){
  body{padding-bottom:0}.topbar{height:70px;padding:4px 18px}.brand-mascot{width:47px;height:47px;font-size:28px;border-width:3px}.brand{font-size:19px}.console-mode-tabs{top:7px}.console-mode-tabs button{min-width:82px;padding:5px 11px}.top-actions .pill,.top-actions .avatar-btn,.top-actions .music-toggle{height:40px}.orientation-toggle{height:40px}.library-nav{top:70px}.hero{height:102px;min-height:102px;padding:10px 22px}.hero h1{font-size:25px}.hero-copy{grid-template-columns:1fr 280px}.learning-section{padding-top:0}.library-row .game-card{flex-basis:190px;height:115px;min-height:115px}.library-row .game-icon{width:62px;height:62px}.mobile-nav{display:none}.modal{padding:0}.game-modal-card{width:100vw;height:100dvh;max-width:none;max-height:none!important;border-radius:0;border-width:0;padding:10px 24px;box-shadow:none}.game-modal-card .close-btn{position:fixed;right:13px;top:10px}.question-box{max-width:840px}
}
@media(orientation:portrait) and (max-width:700px){
  .topbar{height:68px;padding:5px 10px}.brand-mascot{width:45px;height:45px;font-size:27px}.brand span:last-child{display:none}.console-mode-tabs{display:none}.orientation-toggle small{display:none}.orientation-toggle{width:40px;padding:2px;justify-content:center}.top-actions{gap:4px}.top-actions .pill{padding:7px}.hero{height:180px;min-height:180px;padding:18px}.hero-copy{display:block}.hero h1{font-size:29px}.daily-card{margin-top:10px}.hero-world{display:none}.library-nav{top:68px}.library-row .game-card{flex-basis:176px;height:148px;min-height:148px;display:flex;text-align:center}.library-row .game-icon{width:64px;height:64px}.library-row .game-info{align-items:center}.library-row .game-info small{display:none}.library-row .card-stars{margin-top:auto}.reward-banner{margin-bottom:82px}
}
@media(prefers-reduced-motion:reduce){.brand-mascot,.rotate-mascot{animation:none}}