@import "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Nunito:wght@600;700;800;900&display=swap";:root{color:#24213d;font-synthesis:none;--purple:#6848ed;--purple-dark:#4c31c6;--yellow:#ffd84d;--pink:#ff6fae;--blue:#63c9f5;--green:#68d391;--paper:#fffefa;--ink:#24213d;--muted:#716e85;--border:#ddd7ca;background:#fff9ed;font-family:Atkinson Hyperlegible,system-ui,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;overflow-x:hidden}button{font:inherit}button:focus-visible{outline:4px solid var(--yellow);outline-offset:4px}.app{isolation:isolate;min-height:100vh;position:relative;overflow:hidden}.header{justify-content:space-between;align-items:center;width:min(1180px,100% - 40px);height:88px;margin:auto;display:flex}.logo{color:var(--ink);cursor:pointer;background:0 0;border:0;align-items:center;gap:12px;padding:0;display:flex}.logo>span{background:var(--purple);color:#fff;border-radius:15px 15px 15px 4px;place-items:center;width:45px;height:45px;font:900 28px/1 Nunito;display:grid;transform:rotate(-4deg)}.logo strong{letter-spacing:-.03em;font:900 20px Nunito}.star-counter{background:#fff;border:2px solid #e5dfd3;border-radius:999px;align-items:center;gap:8px;padding:8px 15px;font:800 20px Nunito;display:flex}.blob{z-index:-1;filter:blur(1px);opacity:.55;border-radius:50%;position:absolute}.blob--one{background:#e2d8ff;width:460px;height:460px;top:-280px;right:-120px}.blob--two{background:#d9f6ff;width:340px;height:340px;bottom:-210px;left:-130px}.welcome{grid-template-columns:1fr 1fr;align-items:center;gap:70px;width:min(1180px,100% - 40px);min-height:calc(100vh - 155px);margin:auto;padding:40px 0 80px;display:grid}.overline{color:var(--purple);letter-spacing:.13em;text-transform:uppercase;margin:0 0 18px;font:900 13px Nunito}.welcome h1,.results h1{letter-spacing:-.065em;margin:0;font:900 clamp(58px,7vw,94px)/.9 Nunito}.welcome h1 span{color:var(--purple)}.intro{max-width:550px;color:var(--muted);margin:30px 0;font-size:21px;line-height:1.5}.primary-button,.secondary-button{cursor:pointer;border:0;border-radius:18px;min-height:58px;padding:0 28px;font:900 18px Nunito;transition:transform .16s,box-shadow .16s,background .16s}.primary-button{color:#fff;background:var(--purple);box-shadow:0 7px 0 var(--purple-dark);justify-content:center;align-items:center;gap:35px;display:inline-flex}.primary-button:hover{box-shadow:0 10px 0 var(--purple-dark);transform:translateY(-3px)}.primary-button:active{box-shadow:0 3px 0 var(--purple-dark);transform:translateY(4px)}.secondary-button{border:2px solid var(--border);color:var(--ink);background:#fff}.helper{color:var(--muted);margin:25px 0 0;font-size:14px}.planet-scene{place-items:center;min-height:500px;display:grid;position:relative}.planet{border:7px solid var(--ink);background:var(--yellow);border-radius:50%;place-items:center;width:310px;height:310px;font-size:118px;display:grid;position:relative;box-shadow:inset -28px -25px #ff974473,0 18px #24213d1f}.planet:before,.planet:after{content:"";background:#f4b73e;border-radius:50%;position:absolute}.planet:before{width:38px;height:38px;top:50px;left:55px}.planet:after{width:55px;height:26px;bottom:45px;right:45px;transform:rotate(-20deg)}.planet-ring{z-index:-1;border:18px solid var(--pink);border-radius:50%;position:absolute;inset:110px -80px;transform:rotate(-15deg)}.orbit{border:2px dashed #bbb0da;border-radius:50%;animation:14s linear infinite orbit;position:absolute;inset:30px}.orbit span{font-size:35px;position:absolute;top:30px;left:32px}.orbit--two{animation-duration:18s;animation-direction:reverse;inset:80px -20px}.orbit--two span{inset:auto 75px 4px auto;transform:rotate(20deg)}.floating{border:4px solid var(--ink);width:58px;height:58px;box-shadow:5px 6px 0 var(--ink);place-items:center;font:900 28px Nunito;display:grid;position:absolute}.floating--one{background:var(--blue);border-radius:50%;top:80px;left:25px;transform:rotate(-10deg)}.floating--two{background:var(--green);border-radius:16px;top:85px;right:15px;transform:rotate(10deg)}.floating--three{background:var(--pink);color:#fff;border-radius:50% 50% 8px;bottom:60px;right:20px}.game{width:min(900px,100% - 40px);margin:auto;padding:16px 0 70px}.progress-row{color:var(--muted);grid-template-columns:auto 1fr;align-items:center;gap:20px;margin:12px 4px 24px;font-weight:700;display:grid}.progress-track{background:#e8e2d7;border-radius:999px;height:14px;overflow:hidden}.progress-track div{border-radius:inherit;background:linear-gradient(90deg,var(--purple),var(--pink));height:100%;transition:width .35s}.question-card{border:3px solid var(--ink);background:var(--paper);box-shadow:9px 10px 0 var(--ink);text-align:center;border-radius:32px;padding:30px 48px 34px;position:relative}.question-top{justify-content:space-between;align-items:center;display:flex}.category{color:var(--purple-dark);text-transform:uppercase;letter-spacing:.08em;background:#eee8ff;border-radius:999px;padding:8px 14px;font:900 13px Nunito}.listen-button{color:var(--muted);cursor:pointer;background:0 0;border:0;font-weight:700}.listen-button:hover{color:var(--purple)}.question-emoji{background:#fff0b5;border-radius:38% 62% 55% 45%;place-items:center;width:112px;height:112px;margin:8px auto 10px;font-size:68px;display:grid;transform:rotate(-3deg)}.question-card h1{letter-spacing:-.045em;max-width:720px;margin:0 auto 24px;font:900 clamp(31px,5vw,48px)/1.08 Nunito}.answers{grid-template-columns:repeat(3,1fr);gap:13px;display:grid}.answer{border:2px solid var(--border);min-height:86px;color:var(--ink);text-align:left;cursor:pointer;background:#fff;border-radius:19px;grid-template-columns:40px 1fr auto;align-items:center;gap:10px;padding:12px 15px;transition:transform .15s,border-color .15s,box-shadow .15s;display:grid}.answer:hover:not(:disabled){border-color:var(--purple);transform:translateY(-4px);box-shadow:0 5px #d9d0ff}.answer:disabled{color:var(--ink);opacity:1;cursor:default}.answer-letter{background:#f1eee7;border-radius:12px;place-items:center;width:36px;height:36px;font:900 17px Nunito;display:grid}.answer strong{font:800 18px Nunito}.answer-mark{font-size:28px;font-weight:900}.answer--correct{background:#def7e9;border-color:#258957}.answer--correct .answer-letter{color:#fff;background:#258957}.answer--wrong{background:#ffe5ed;border-color:#dc466f}.answer--wrong .answer-letter{color:#fff;background:#dc466f}.feedback{text-align:left;border:2px solid;border-radius:19px;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin-top:16px;padding:14px 18px;animation:.25s both pop;display:grid}.feedback--correct{background:#ddf7e9;border-color:#59bd85}.feedback--try{background:#fff1bf;border-color:#e7bd35}.feedback-icon{font-size:32px}.feedback strong{font:900 19px Nunito}.feedback p{margin:3px 0 0;line-height:1.3}.auto-advance{gap:5px;padding:8px;display:flex}.auto-advance i{background:var(--ink);border-radius:50%;width:8px;height:8px;animation:.7s infinite alternate waiting}.auto-advance i:nth-child(2){animation-delay:.16s}.auto-advance i:nth-child(3){animation-delay:.32s}.results{text-align:center;flex-direction:column;justify-content:center;align-items:center;width:min(780px,100% - 40px);min-height:calc(100vh - 150px);margin:auto;padding:45px 0 80px;display:flex;position:relative}.result-emoji{filter:drop-shadow(0 10px #24213d1f);font-size:100px;animation:.7s both bounce}.results h1{max-width:720px;font-size:clamp(48px,8vw,78px)}.results>p:not(.overline){max-width:520px;color:var(--muted);margin:22px auto;font-size:20px}.score-card{border:3px solid var(--ink);background:var(--yellow);box-shadow:7px 8px 0 var(--ink);border-radius:27px;margin:12px 0 30px;padding:20px 55px}.score-card span{text-transform:uppercase;letter-spacing:.08em;font:800 13px Nunito;display:block}.score-card strong{font:900 63px/1 Nunito;display:block}.score-card small{font-size:28px}.result-actions{gap:13px;display:flex}.confetti i{background:var(--pink);border-radius:4px;width:14px;height:25px;animation:3s ease-in-out infinite float;position:absolute}.confetti i:first-child{top:24%;left:5%}.confetti i:nth-child(2){background:var(--blue);animation-delay:-1s;top:70%;left:15%}.confetti i:nth-child(3){background:var(--yellow);animation-delay:-.5s;top:30%;right:8%}.confetti i:nth-child(4){background:var(--green);animation-delay:-1.5s;top:75%;right:18%}.confetti i:nth-child(5){background:var(--purple);top:12%;left:30%}.confetti i:nth-child(6){background:var(--pink);animation-delay:-2s;top:10%;right:32%}footer{width:min(1180px,100% - 40px);height:65px;color:var(--muted);justify-content:space-between;align-items:center;margin:auto;font-size:13px;display:flex}.screen-enter{animation:.35s both enter}@keyframes enter{0%{opacity:0;transform:translateY(12px)}}@keyframes pop{0%{opacity:0;transform:scale(.96)}}@keyframes orbit{to{transform:rotate(360deg)}}@keyframes bounce{0%{transform:scale(.4)rotate(-12deg)}70%{transform:scale(1.12)rotate(5deg)}to{transform:scale(1)}}@keyframes float{50%{transform:translateY(-18px)rotate(35deg)}}@keyframes waiting{to{opacity:.25;transform:translateY(-4px)}}@media (width<=760px){.header{height:72px}.logo strong{font-size:17px}.welcome{text-align:center;grid-template-columns:1fr;gap:15px;padding-top:35px}.welcome h1{font-size:clamp(54px,16vw,76px)}.intro{margin:25px auto}.planet-scene{min-height:380px}.planet{width:230px;height:230px;font-size:88px}.planet-ring{border-width:14px;inset:85px -55px}.orbit{inset:10px}.orbit--two{inset:50px -10px}.floating{width:48px;height:48px;font-size:22px}.question-card{box-shadow:6px 7px 0 var(--ink);border-radius:25px;padding:25px 18px 28px}.question-emoji{width:100px;height:100px;font-size:60px}.answers{grid-template-columns:1fr}.answer{min-height:67px}.feedback{grid-template-columns:auto 1fr;align-items:start}.auto-advance{grid-column:1/-1;justify-content:center;padding:2px}.progress-row{grid-template-columns:1fr;gap:8px}.result-actions{flex-direction:column;width:100%}.result-actions button{width:100%}.listen-button span{display:none}}@media (width<=390px){.logo strong{display:none}.question-card h1{font-size:29px}.game{width:calc(100% - 24px)}.question-top{align-items:flex-start}.results{width:calc(100% - 28px)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
