@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&display=swap');
:root{--safe-top:env(safe-area-inset-top);--safe-bottom:env(safe-area-inset-bottom);--navy:#06245a;--blue:#0868e8;--green:#15b84f;--grass:#1fc85d;--gold:#ffb31a;--ink:#071b3f}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:Nunito,system-ui,sans-serif;background:#06245a;color:var(--ink)}button{font-family:inherit;border:0;cursor:pointer}button:active{transform:scale(.97)}
.screen{height:100dvh;width:100vw;overflow:hidden;position:relative;padding-top:var(--safe-top);display:flex;flex-direction:column;background:#0b74eb}
.home{background:linear-gradient(#0b8cff 0%,#49bdff 28%,#4ed36b 63%,#138f43 100%)}
.cloud{position:absolute;background:white;border-radius:999px;opacity:.85;filter:blur(.1px)}.c1{width:110px;height:36px;left:18px;top:84px}.c1:before{content:"";position:absolute;width:48px;height:48px;border-radius:50%;left:22px;top:-24px;background:white}.c1:after{content:"";position:absolute;width:42px;height:42px;border-radius:50%;left:62px;top:-18px;background:white}.c2{width:145px;height:44px;right:-25px;top:128px}.c2:before{content:"";position:absolute;width:62px;height:62px;border-radius:50%;left:28px;top:-32px;background:white}.c2:after{content:"";position:absolute;width:58px;height:58px;border-radius:50%;left:77px;top:-25px;background:white}
.stadium{position:absolute;left:0;right:0;top:178px;height:150px;background:radial-gradient(ellipse at center,#395fc4 0%,#16478f 45%,transparent 70%);opacity:.75}.goalbg{position:absolute;left:50%;top:235px;width:170px;height:82px;transform:translateX(-50%);border:7px solid rgba(255,255,255,.82);border-bottom:0;border-radius:6px}
.top{z-index:3;display:flex;justify-content:space-between;align-items:center;padding:12px 15px 2px;flex-shrink:0}.logo{display:flex;align-items:center;gap:8px;color:white;text-shadow:0 3px 0 #082c66;font-weight:900;font-size:25px;line-height:.86;letter-spacing:-1px}.logoShield{width:58px;height:58px;border:4px solid white;border-radius:16px 16px 22px 22px;background:linear-gradient(#0b6bea,#083e96);display:grid;place-items:center;box-shadow:0 4px 0 #06245a;font-size:27px}.pill{display:flex;align-items:center;gap:6px;background:#fff8d7;border:3px solid #ffe07a;color:#654000;border-radius:999px;padding:8px 13px;font-size:17px;font-weight:900;box-shadow:0 5px 0 #eda713;white-space:nowrap}
.hero{z-index:2;position:relative;height:266px;flex-shrink:0}.kid{position:absolute;left:32px;bottom:2px;width:165px;height:230px;filter:drop-shadow(0 10px 12px rgba(0,0,0,.23));animation:float 3s ease-in-out infinite}.bubble{position:absolute;right:24px;top:80px;background:white;border:4px solid #1469dc;border-radius:24px;padding:18px 16px;width:178px;text-align:center;color:#081d4a;font-size:17px;font-weight:900;line-height:1.15;box-shadow:0 7px 0 rgba(8,54,140,.25)}.bubble:after{content:"";position:absolute;left:-18px;bottom:30px;border-top:12px solid transparent;border-bottom:12px solid transparent;border-right:18px solid white}
.main{z-index:4;flex:1;min-height:0;padding:0 13px calc(78px + var(--safe-bottom));display:flex;flex-direction:column;gap:10px}.featureRow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}.feature{height:105px;border-radius:24px;color:white;background:linear-gradient(150deg,var(--a),var(--b));box-shadow:0 7px 0 var(--s),0 10px 22px rgba(0,0,0,.22);border:3px solid rgba(255,255,255,.5);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.feature .ico{font-size:39px;filter:drop-shadow(0 4px 2px rgba(0,0,0,.25))}.feature .t{font-size:16px;font-weight:900;margin-top:4px}.feature .sub{font-size:12px;font-weight:900;opacity:.92}
.zonePanel{flex:1;min-height:0;background:linear-gradient(#fff,#eef7ff);border-radius:28px;padding:13px;border:3px solid rgba(255,255,255,.85);box-shadow:0 10px 30px rgba(0,0,0,.24)}.zoneTitle{margin:0 auto 12px;background:#06245a;color:white;border-radius:999px;width:max-content;padding:7px 18px;font-size:16px;font-weight:900;box-shadow:0 4px 0 #031331;letter-spacing:.5px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.zone{height:86px;border-radius:18px;color:white;background:linear-gradient(145deg,var(--a),var(--b));box-shadow:0 6px 0 var(--s);border:3px solid rgba(255,255,255,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.zone:after{content:"";position:absolute;right:6px;top:6px;width:14px;height:14px;border-radius:50%;background:#5ee65e;border:2px solid white}.zone .ico{font-size:30px}.zone .txt{font-size:12px;font-weight:900;margin-top:4px}
.nav{z-index:10;position:fixed;left:0;right:0;bottom:0;padding:7px 18px calc(7px + var(--safe-bottom));height:calc(70px + var(--safe-bottom));background:#06245a;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;border-radius:24px 24px 0 0;box-shadow:0 -6px 24px rgba(0,0,0,.25)}.nav button{background:transparent;color:#91a5cb;font-weight:900;font-size:11px;border-radius:14px}.nav button span{display:block;font-size:24px}.nav .active{color:#d9ff57}
.quiz{background:#06245a;padding:calc(12px + var(--safe-top)) 12px calc(12px + var(--safe-bottom))}.qwrap{height:100%;border-radius:28px;background:#092c70;display:flex;flex-direction:column;overflow:hidden;border:3px solid rgba(255,255,255,.07)}.qhead{padding:12px;display:flex;align-items:center;gap:11px;color:white}.back{width:42px;height:42px;border-radius:15px;background:#0b4aa8;color:white;font-size:24px;box-shadow:0 4px 0 #041a43}.qicon{width:43px;height:43px;border-radius:13px;background:#1169e8;display:grid;place-items:center;font-size:26px;border:2px solid #5aa7ff}.qtitle{font-size:18px;font-weight:900}.qsub{font-size:12px;opacity:.86}.progress{margin:0 14px 8px;height:18px;border-radius:99px;background:#052052;box-shadow:inset 0 3px 4px rgba(0,0,0,.25)}.bar{height:100%;width:44%;border-radius:99px;background:linear-gradient(#62e864,#18b84c)}.tags{display:flex;padding:0 14px 10px;justify-content:space-between}.tag{border-radius:999px;padding:7px 13px;font-size:13px;font-weight:900;color:white;background:#0b8d39}.tag.fire{background:#0b397b;color:#ffc84b}
.qbody{flex:1;min-height:0;overflow:auto;padding:0 12px 12px}.scene{background:white;border-radius:20px 20px 0 0;overflow:hidden}.sceneTop{display:flex;gap:10px;align-items:center;padding:10px 12px;background:linear-gradient(135deg,#0b62e0,#066bf6);color:white}.face{width:56px;height:56px}.sceneTitle{font-size:22px;font-weight:900}.sceneSub{font-size:15px;font-weight:900;opacity:.9}.pitch{height:236px;position:relative;overflow:hidden;background:repeating-linear-gradient(90deg,#29bd57 0 52px,#1aa64c 52px 104px)}.pitch:before{content:"";position:absolute;inset:16px;border:4px solid rgba(255,255,255,.75);border-radius:8px}.pen{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:120px;height:116px;border:4px solid rgba(255,255,255,.75)}.goal{position:absolute;right:55px;top:15px;width:120px;height:35px;border:5px solid white;border-bottom:0}.legend{position:absolute;left:14px;bottom:13px;background:rgba(5,70,23,.65);color:white;border-radius:10px;padding:6px 9px;font-size:12px;font-weight:900}.player,.opp,.ball{position:absolute;z-index:2;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center}.player,.opp{width:43px;height:43px;color:white;font-weight:900;border:3px solid white;box-shadow:0 4px 8px rgba(0,0,0,.25)}.player{background:#1374e8}.opp{background:#e73838}.ball{width:28px;height:28px;background:white;border:2px solid #ddd;font-size:13px}.question{background:white;text-align:center;font-size:20px;font-weight:900;padding:13px}.answers{background:white;padding:0 12px 12px;display:flex;flex-direction:column;gap:8px}.answer{min-height:48px;background:#f9fafb;border:2px solid #d7dde6;border-radius:13px;text-align:left;padding:8px 12px;font-size:15px;font-weight:900;color:#14284b;box-shadow:0 3px 0 #cbd3df;display:flex;gap:10px;align-items:center}.letter{width:32px;height:32px;border-radius:50%;background:#1169e8;color:white;display:grid;place-items:center;font-weight:900}.answer.correct{background:#e9ffe9;border-color:#5bd56b}.tip{margin-top:8px;background:#edffed;border:2px solid #84db84;border-radius:13px;padding:10px 12px;font-size:13px;font-weight:900}.next{margin:12px auto 0;display:block;width:80%;height:56px;border-radius:20px;background:linear-gradient(#28d35c,#0c9f36);color:white;font-size:24px;font-weight:900;box-shadow:0 6px 0 #06651f}
.result{background:radial-gradient(circle at center,#164aa1 0,#061b46 70%);padding:calc(20px + var(--safe-top)) 18px calc(20px + var(--safe-bottom));align-items:center;justify-content:center}.stadiumLights{position:absolute;inset:0;background:radial-gradient(circle at 10% 12%,rgba(255,255,255,.9),transparent 12%),radial-gradient(circle at 90% 12%,rgba(255,255,255,.9),transparent 12%);opacity:.8}.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}.confetti span{position:absolute;top:-20px;font-size:22px;animation:fall 1.8s linear infinite}.resultCard{z-index:2;width:100%;max-width:360px;background:#063782;border-radius:30px;text-align:center;color:white;padding:26px 18px;box-shadow:0 10px 0 #032052,0 18px 40px rgba(0,0,0,.3)}.bigTrophy{font-size:82px}.brill{font-size:40px;font-weight:900;letter-spacing:1px}.scoreBox{background:white;color:#14284b;border-radius:18px;padding:18px;margin:16px 0}.scoreGrid{display:grid;grid-template-columns:1fr 1fr;gap:5px}.scoreNum{font-size:42px;font-weight:900}.bigStars{font-size:48px;letter-spacing:4px;margin-top:8px}.resultKid{position:absolute;left:12px;bottom:12px;width:135px;z-index:2}
.coming{background:radial-gradient(circle at 50% 28%,#7c3aed,#3b1689 70%);align-items:center;justify-content:center;padding:calc(20px + var(--safe-top)) 20px calc(20px + var(--safe-bottom));color:#35146a}.soonCard{width:100%;max-width:350px;border-radius:34px;background:white;text-align:center;padding:35px 22px;box-shadow:0 12px 0 rgba(0,0,0,.18);z-index:2}.musicBadge{margin:-65px auto 8px;width:95px;height:95px;border-radius:24px;background:linear-gradient(#ff6aaa,#dc2e79);display:grid;place-items:center;font-size:58px;color:white;box-shadow:0 7px 0 #a41555}.soonTitle{font-size:42px;font-weight:900;color:#6d28d9}.cone{font-size:82px}.sign{display:inline-block;background:#ffc83d;border:5px solid #8b4b00;border-radius:10px;padding:9px 12px;font-size:24px;font-weight:900;transform:rotate(-2deg);color:#3b2500}.soonText{font-size:16px;font-weight:900;color:#172554;margin:16px 0}.purpleBtn{background:linear-gradient(#8b5cf6,#6d28d9);color:white;border-radius:18px;padding:15px 28px;font-size:20px;font-weight:900;box-shadow:0 5px 0 #4c1d95}
.toast{position:fixed;z-index:30;top:calc(72px + var(--safe-top));left:50%;transform:translateX(-50%);background:#071b3f;color:white;border-radius:18px;padding:12px 18px;font-weight:900;white-space:nowrap}
@keyframes float{50%{transform:translateY(-8px)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}@media(max-height:760px){.hero{height:238px}.kid{width:142px;height:205px}.bubble{top:62px;right:20px;font-size:15px;width:165px}.feature{height:92px}.zone{height:73px}.zone .ico{font-size:25px}.pitch{height:190px}.sceneTitle{font-size:19px}.answer{min-height:43px}.qbody{padding-bottom:16px}}@media(max-width:370px){.logoText{font-size:21px}.logoShield{width:50px;height:50px}.pill{font-size:15px}.grid{gap:7px}.zone{border-radius:15px}.zone .txt{font-size:10px}}