@import "https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito+Sans:wght@600;700;800;900&display=swap";:root{--ink:#282353;--cream:#fffaf0;--pink:#ff5f98;--orange:#ff8a4c;--yellow:#ffd84d;--purple:#7657e8;--aqua:#39c6c1;--line:#332d65}*{box-sizing:border-box}html{background:var(--cream);min-height:100%}body{color:var(--ink);background:var(--cream);margin:0;font-family:Nunito Sans,Arial,sans-serif}button,input{font:inherit}button{color:inherit}main{background:radial-gradient(circle at 20% 10%,#ffd84d38,#0000 22rem),radial-gradient(circle at 90%,#39c6c12e,#0000 28rem),linear-gradient(#28235309 1px,#0000 1px) 0 0/32px 32px,linear-gradient(90deg,#28235309 1px,#0000 1px) 0 0/32px 32px;min-height:100vh;position:relative;overflow:hidden}.shape{border:3px solid var(--ink);opacity:.12;pointer-events:none;position:absolute;transform:rotate(18deg)}.shapeOne{border-radius:16px;width:54px;height:54px;top:20%;right:8%}.shapeTwo{border-radius:50%;width:38px;height:38px;bottom:16%;left:3%}.topbar{z-index:2;border-bottom:3px solid var(--ink);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#fffaf0e6;justify-content:space-between;align-items:center;padding:22px 6vw;display:flex;position:relative}.brand{color:var(--ink);align-items:center;gap:11px;text-decoration:none;display:flex}.brand>span{border:3px solid var(--ink);background:var(--yellow);width:48px;height:48px;box-shadow:4px 4px 0 var(--ink);border-radius:14px;place-items:center;font:700 38px/1 "Baloo 2";display:grid}.brand strong{text-transform:uppercase;letter-spacing:.03em;font:700 17px/.95 "Baloo 2"}.headerRight{align-items:center;gap:18px;display:flex}.timer{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);background:#fff;border-radius:14px;align-items:center;gap:7px;padding:6px 7px 6px 10px;display:flex}.timer.running{background:#ecfff6}.timer.finished{background:#ffe3ec}.timer label{align-items:center;gap:5px;display:flex}.timer label>span{font-size:19px}.timer select{color:var(--ink);cursor:pointer;background:0 0;border:0;outline:none;font-size:12px;font-weight:900}.timer strong{text-align:center;letter-spacing:.03em;min-width:58px;font:700 21px/1 "Baloo 2"}.timer button{border:2px solid var(--ink);border-radius:9px;place-items:center;width:30px;height:30px;padding:0;display:grid}.timerPlay{background:var(--yellow)}.timerReset{background:#eee9ff}.miniStickers{letter-spacing:.1em;align-items:center;gap:8px;font-size:11px;font-weight:900;display:flex}.miniStickers i{border:2px solid var(--ink);color:#aaa2c1;background:#ebe5d9;border-radius:50%;place-items:center;width:34px;height:34px;font-style:normal;display:grid}.miniStickers i.earned{color:inherit;background:#fff}.timeUpBanner{z-index:20;border:3px solid var(--ink);background:var(--yellow);width:min(390px,100% - 32px);box-shadow:7px 7px 0 var(--ink);border-radius:16px;align-items:center;gap:12px;padding:14px 16px;animation:.3s pop;display:flex;position:fixed;top:94px;left:50%;transform:translate(-50%)}.timeUpBanner>span{font-size:32px}.timeUpBanner div{margin-right:auto;display:grid}.timeUpBanner b{font:700 20px "Baloo 2"}.timeUpBanner small{letter-spacing:0}.timeUpBanner button{border:2px solid var(--ink);background:#fff;border-radius:9px;padding:8px 11px}.setup{z-index:1;grid-template-columns:minmax(360px,.9fr) minmax(520px,1.1fr);align-items:center;gap:4vw;max-width:1420px;min-height:calc(100vh - 154px);margin:auto;padding:52px 6vw 64px;display:grid;position:relative}.setupCopy{position:relative}.kicker{border:2px solid var(--ink);background:var(--aqua);color:#fff;box-shadow:3px 3px 0 var(--ink);letter-spacing:.12em;border-radius:999px;padding:9px 14px;font-size:12px;font-weight:900;display:inline-block}h1{letter-spacing:-.035em;margin:22px 0 20px;font:700 clamp(44px,5.4vw,78px)/.98 "Baloo 2"}h1 em{color:var(--pink);-webkit-text-decoration:underline wavy var(--yellow) 5px;text-decoration:underline wavy var(--yellow) 5px;text-underline-offset:8px;font-style:normal}.setupCopy>p{max-width:62%;margin:0;font-size:18px;line-height:1.5}.heroMascot{aspect-ratio:1;border:3px solid var(--ink);width:min(47%,250px);box-shadow:8px 8px 0 var(--ink);isolation:isolate;background:linear-gradient(145deg,#fff3b3,#ffe3ed);border-radius:50%;position:absolute;bottom:-2%;right:-3%}.heroMascot:before{content:"";z-index:-1;border:2px dashed #28235340;border-radius:50%;position:absolute;inset:12%}.heroMascot img{z-index:2;filter:drop-shadow(0 10px 8px #28235338);width:126%;max-width:none;position:absolute;bottom:-3%;left:50%;transform:translate(-50%)}.heroMascot>b{z-index:3;border:2px solid var(--ink);background:var(--yellow);box-shadow:3px 3px 0 var(--ink);text-align:center;border-radius:12px;padding:7px 12px;font:800 14px/1.05 "Baloo 2";position:absolute;bottom:1px;right:-12px;transform:rotate(-5deg)}.orbit{z-index:4;border:2px solid var(--ink);width:35px;height:35px;box-shadow:3px 3px 0 var(--ink);background:#fff;border-radius:11px;place-items:center;font:800 21px/1 "Baloo 2";display:grid;position:absolute}.orbitOne{color:var(--pink);top:4%;left:-7%;transform:rotate(-10deg)}.orbitTwo{background:var(--aqua);color:#fff;top:-7%;right:10%;transform:rotate(8deg)}.orbitThree{background:var(--purple);color:#fff;top:37%;right:-7%;transform:rotate(12deg)}.tip{border:2px dashed var(--purple);background:#eee9ff;border-radius:14px;align-items:center;gap:13px;max-width:58%;margin-top:24px;padding:13px 15px;display:flex}.tip>span{font-size:28px}.tip b{color:var(--purple)}.pickerCard,.questionCard,.rewardCard{border:3px solid var(--ink);box-shadow:9px 9px 0 var(--ink);background:#fff;border-radius:22px}.pickerCard{padding:26px;position:relative;overflow:hidden}.pickerCard:after{content:"";border:3px solid var(--ink);background:var(--yellow);opacity:.45;border-radius:50%;width:120px;height:120px;position:absolute;top:-58px;right:-54px}.pickerTop{justify-content:space-between;align-items:end;margin-bottom:20px;display:flex}small{letter-spacing:.14em;font-size:11px;font-weight:900}h2{margin:4px 0 0;font:700 30px/1.1 "Baloo 2"}.pickerTop>span{color:var(--purple);background:#eee9ff;border-radius:999px;padding:7px 11px;font-size:13px;font-weight:900}.tableGrid{grid-template-columns:repeat(4,1fr);gap:11px;display:grid}.tableGrid label{border:2px solid var(--ink);cursor:pointer;-webkit-user-select:none;user-select:none;background:#f4f1eb;border-radius:14px;place-items:center;min-height:92px;padding:8px;transition:all .15s;display:grid;position:relative}.tableGrid label:hover{transform:translateY(-3px)}.tableGrid label.checked{box-shadow:4px 4px 0 var(--ink);transform:translate(-2px,-2px)}.tableGrid input{opacity:0;pointer-events:none;position:absolute}.tableGrid strong{font:700 34px/1 "Baloo 2"}.tableGrid small{opacity:.7;letter-spacing:0}.checkmark{border:2px solid var(--ink);background:#fff;border-radius:50%;width:20px;height:20px;font-size:12px;font-weight:900;display:none;position:absolute;top:7px;right:8px}.checked .checkmark{place-items:center;display:grid}.pink.checked{background:#ffb2cc}.orange.checked{background:#ffc29c}.yellow.checked{background:#ffe783}.lime.checked{background:#d5ef82}.mint.checked{background:#aeeacb}.aqua.checked{background:#97e8e4}.blue.checked{background:#acd8ff}.violet.checked{background:#c8b9ff}.purple.checked{background:#e1b7f5}.rose.checked{background:#ffaebe}.coral.checked{background:#ffb09c}.gold.checked{background:#ffd76f}.pickerActions{align-items:center;gap:13px;margin-top:22px;display:flex}button{cursor:pointer;border:0;font-weight:900}.textButton{color:var(--purple);background:0 0;padding:9px 4px;text-decoration:underline}.startButton,.answerRow button,.stickerModal button{border:2px solid var(--ink);background:var(--pink);color:#fff;min-height:52px;box-shadow:4px 4px 0 var(--ink);border-radius:12px;padding:0 20px}.startButton{margin-left:auto}.startButton:disabled{opacity:.4;cursor:not-allowed}.startButton span,.answerRow button span{margin-left:14px}footer{z-index:1;border-top:3px solid var(--ink);background:var(--ink);color:#fff;letter-spacing:.14em;justify-content:space-between;padding:18px 6vw;font-size:11px;font-weight:900;display:flex;position:relative}.game{z-index:1;max-width:1320px;min-height:calc(100vh - 154px);margin:auto;padding:30px 6vw 52px;position:relative}.scoreBar{align-items:center;gap:12px;margin-bottom:24px;display:flex}.backButton{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);background:#fff;border-radius:10px;margin-right:auto;padding:11px 14px}.scoreItem{border:2px solid var(--ink);text-align:center;background:#fff;border-radius:12px;min-width:90px;padding:9px 16px}.scoreItem small{color:var(--purple);display:block}.scoreItem strong{font:700 24px "Baloo 2"}.gameGrid{grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);gap:24px;display:grid}.questionCard{padding:28px;transition:all .2s}.questionCard.right{background:#edfff4;box-shadow:9px 9px #3ead71}.questionCard.wrong{box-shadow:9px 9px 0 var(--pink);background:#fff0f3}.questionMeta{letter-spacing:.12em;justify-content:space-between;font-size:11px;font-weight:900;display:flex}.questionMeta span:first-child{color:var(--pink)}.equation{justify-content:center;align-items:center;gap:24px;padding:58px 10px 48px;display:flex}.equation b{border:3px solid var(--ink);background:var(--yellow);width:112px;height:112px;box-shadow:6px 6px 0 var(--ink);border-radius:24px;place-items:center;font:700 55px "Baloo 2";display:grid}.equation b:nth-of-type(2){background:#aeeacb}.equation .mystery{color:var(--purple);background:#eee9ff;border-style:dashed}.equation i{font:700 42px "Baloo 2"}.questionCard form{max-width:550px;margin:auto}.questionCard form>label{margin-bottom:8px;font-size:13px;font-weight:900;display:block}.answerRow{grid-template-columns:1fr auto;gap:11px;display:grid}.answerRow input{border:3px solid var(--ink);min-width:0;height:62px;color:var(--ink);background:#fff;border-radius:13px;outline:none;padding:0 20px;font:700 28px "Baloo 2"}.answerRow input:focus{box-shadow:0 0 0 5px #7657e833}.answerRow button{min-width:130px}.answerFeedback{background:#f4f1eb;border-radius:11px;max-width:550px;min-height:52px;margin:15px auto 0;padding:13px 15px;line-height:1.4}.right .answerFeedback{color:#1f7448;background:#c9f5d9}.wrong .answerFeedback{color:#a12f54;background:#ffd5df}.rewardCard{background:#fff8d9;align-self:start;padding:24px}.rewardTop{justify-content:space-between;align-items:center;display:flex}.stickerPreview{border:2px dashed var(--ink);background:#fff;border-radius:50%;place-items:center;width:74px;height:74px;font-size:46px;display:grid}.progressTrack{border:2px solid var(--ink);background:#fff;border-radius:999px;height:19px;margin-top:24px;overflow:hidden}.progressTrack i{background:linear-gradient(90deg,var(--pink),var(--orange),var(--yellow));height:100%;transition:width .35s;display:block}.progressNumbers{justify-content:space-between;margin-top:7px;font-size:12px;font-weight:900;display:flex}.collection{border-top:2px dashed #2823534d;margin-top:27px;padding-top:22px}.collection>div{grid-template-columns:repeat(4,1fr);gap:9px;margin-top:12px;display:grid}.collection span{aspect-ratio:1;border:2px solid var(--ink);color:#9b93ac;background:#e5dfd3;border-radius:12px;place-items:center;font-size:20px;font-weight:900;display:grid}.collection span.unlocked{background:#fff;font-size:27px}.stickerModal{z-index:10;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#282353a6;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.stickerModal>div{border:3px solid var(--ink);width:min(400px,100%);box-shadow:10px 10px 0 var(--ink);text-align:center;background:#fff;border-radius:24px;padding:30px;animation:.3s pop}.stickerModal small{color:var(--pink)}.bigSticker{filter:drop-shadow(5px 7px #28235326);margin:12px 0;font-size:100px;display:block}.stickerModal p{font-size:17px}@keyframes pop{0%{opacity:0;transform:scale(.65)rotate(-5deg)}}@media (width>=951px){main:has(.setup){grid-template-rows:auto minmax(0,1fr) auto;height:100svh;min-height:0;display:grid}main:has(.setup) .setup{width:100%;height:100%;min-height:0;padding-top:clamp(20px,4vh,42px);padding-bottom:clamp(20px,4vh,42px)}main:has(.setup) .pickerCard{padding:clamp(18px,2.5vh,24px)}main:has(.setup) .pickerTop{margin-bottom:clamp(10px,1.8vh,17px)}main:has(.setup) .tableGrid{gap:clamp(7px,1.2vh,10px)}main:has(.setup) .tableGrid label{min-height:clamp(60px,9.5vh,86px)}main:has(.setup) .pickerActions{margin-top:clamp(12px,2vh,19px)}}@media (width>=951px) and (height<=820px){.topbar{padding-top:13px;padding-bottom:13px}main:has(.setup) .setup{gap:3.5vw}main:has(.setup) h1{margin:13px 0 11px;font-size:clamp(38px,4.4vw,61px)}main:has(.setup) .setupCopy>p{font-size:17px;line-height:1.4}main:has(.setup) .tip{margin-top:17px;padding:11px 14px}main:has(.setup) .heroMascot{width:min(43%,205px)}main:has(.setup) .heroMascot>b{font-size:12px}main:has(.setup) .tableGrid strong{font-size:29px}main:has(.setup) .tableGrid small{font-size:10px}main:has(.setup) footer{padding-top:11px;padding-bottom:11px}}@media (width>=951px) and (width<=1150px){main:has(.setup) .setup{grid-template-columns:minmax(300px,.82fr) minmax(470px,1.18fr);gap:3vw;padding-left:3vw;padding-right:3vw}main:has(.setup) .heroMascot{width:min(42%,180px);right:-1%}main:has(.setup) .heroMascot>b{display:none}}@media (width<=950px){.setup{grid-template-columns:1fr;padding-top:34px}.setupCopy{text-align:center}.setupCopy>p,.tip{max-width:590px;margin-left:auto;margin-right:auto}.heroMascot{width:min(260px,65vw);margin:30px auto 22px;position:relative;bottom:auto;right:auto}h1{font-size:clamp(42px,10vw,70px)}.gameGrid{grid-template-columns:1fr}}@media (width<=650px){.topbar{padding:15px 5vw}.headerRight{gap:8px}.miniStickers{display:none}.timer{gap:4px;padding-left:7px}.timer label>span{display:none}.timer strong{min-width:51px;font-size:18px}.timer button{width:27px;height:27px}.setup{padding:32px 5vw 48px}.pickerCard{padding:17px}.tableGrid{grid-template-columns:repeat(3,1fr);gap:8px}.pickerActions{flex-wrap:wrap}.startButton{width:100%;margin:4px 0 0}.game{padding:22px 5vw 42px}.scoreBar{grid-template-columns:repeat(3,1fr);display:grid}.backButton{grid-column:1/-1;width:100%;margin:0}.scoreItem{min-width:0;padding:8px 4px}.questionCard{padding:18px}.questionMeta{gap:12px}.equation{gap:10px;padding:42px 0 34px}.equation b{border-radius:17px;width:72px;height:72px;font-size:38px}.equation i{font-size:28px}.answerRow{grid-template-columns:1fr}footer{text-align:center;flex-direction:column;gap:8px}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
