@font-face{font-family:Roboto;src:url('assets/roboto-latin-ext.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Roboto;src:url('assets/roboto.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0303,U+0306-0307,U+0309-0328,U+032A-036F,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{color-scheme:light;--paper:#f5f2e9;--ink:#28213e;--purple:#6944db;--lime:#d7f879;--green:#a6ed5a;--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{background:#e5e1d9;color:var(--ink);font-family:Roboto,sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid var(--purple);outline-offset:4px}h1,h2,p{margin:0}svg{width:24px;height:24px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.svg-library{position:absolute;width:0;height:0;overflow:hidden}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.landing{position:fixed;inset:0;margin:auto;width:min(100%,480px);height:100%;height:100dvh;background:var(--paper);overflow:hidden;container-type:size;container-name:landing}
.screen{position:absolute;inset:0;padding:max(18px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));animation:arrive .45s var(--ease) both;min-width:0;min-height:0}
.intro{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(8px,2cqh,22px);text-align:center;padding-top:max(28px,4cqh,env(safe-area-inset-top));padding-bottom:max(28px,4cqh,env(safe-area-inset-bottom))}
h1{font-size:clamp(32px,min(13cqw,7cqh),56px);font-weight:850;line-height:1.08;letter-spacing:-1.7px}h1>span{color:var(--purple)}h1>.headline-top{color:var(--ink)}
.intro-bottom{display:grid;gap:clamp(12px,2.4cqh,24px);min-width:0}.intro-prompt{font-size:clamp(22px,min(8cqw,4.5cqh),34px);font-weight:850;line-height:1.12;letter-spacing:-.8px;color:var(--purple)}
.cta{display:flex;justify-content:center;align-items:center;gap:16px;min-height:56px;width:100%;padding:14px;border:0;border-radius:18px;background:var(--green);color:#213616;text-decoration:none;font:800 18px/1.2 Roboto,sans-serif;box-shadow:0 5px 0 #79ad3c;transition:background .2s;min-width:0}.cta>span{min-width:0}.cta svg{width:23px;height:23px}.cta:hover{background:#b8f879}.cta:active{background:#9ce34e}
.hero-art{position:relative;width:100%;height:100%;min-height:0;max-width:370px;margin:auto;isolation:isolate;container-type:size;--art:min(1cqw,1.15cqh)}
.mini-card,.main-card{position:absolute;border:1px solid #ffffff5c;box-shadow:0 13px 25px #2a174225;border-radius:calc(6 * var(--art))}.main-card{width:calc(44 * var(--art));height:calc(58 * var(--art));background:var(--purple);color:var(--paper);left:calc(50% - 22 * var(--art));top:calc(50% - 29 * var(--art));transform:rotate(-8deg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(5 * var(--art));padding:calc(5 * var(--art)) calc(2 * var(--art));box-shadow:inset 0 1px 1px #ffffff50,0 10px 0 -5px #4a2ca0,0 23px 36px #36225526}
.big-question{font:850 calc(42 * var(--art))/.85 Roboto,sans-serif;color:var(--lime);text-shadow:3px 4px 0 #3d2287}.card-bottom{display:flex;gap:calc(1.5 * var(--art))}.card-bottom i{width:calc(7 * var(--art));height:3px;border-radius:4px;background:#ffffff40}.card-bottom i:first-child{background:var(--lime)}
.mini-card{width:calc(38 * var(--art));height:calc(46 * var(--art));top:calc(50% - 22 * var(--art));display:grid;place-items:center}.mini-card svg{width:90%;height:90%}.card-space{background:#28213e;left:calc(50% - 47 * var(--art));transform:rotate(-23deg)}.card-nature{background:#eaada0;right:calc(50% - 47 * var(--art));transform:rotate(17deg)}
.orbit{position:absolute;border:1px solid #dcd6e4;border-radius:50%;width:calc(90 * var(--art));height:calc(64 * var(--art));left:calc(50% - 45 * var(--art));top:calc(50% - 32 * var(--art));transform:rotate(-15deg);z-index:-1}.orbit-two{transform:rotate(29deg);width:calc(80 * var(--art));height:calc(73 * var(--art));left:calc(50% - 40 * var(--art));top:calc(50% - 36 * var(--art))}
.art-spark{position:absolute;color:var(--purple);width:calc(9 * var(--art));height:calc(9 * var(--art))}.spark-one{top:calc(50% - 39 * var(--art));left:calc(50% - 44 * var(--art))}.spark-two{right:calc(50% - 43 * var(--art));bottom:calc(50% - 39 * var(--art));width:calc(6 * var(--art));height:calc(6 * var(--art))}.art-dot{position:absolute;border-radius:50%}.dot-one{width:7px;height:7px;background:#eea08c;left:calc(50% - 42 * var(--art));bottom:calc(50% - 35 * var(--art))}.dot-two{width:5px;height:5px;background:var(--purple);right:calc(50% - 45 * var(--art));top:calc(50% - 24 * var(--art))}
.quiz{display:grid;grid-template-rows:6px minmax(0,1fr) 4px;gap:clamp(10px,2.4cqh,22px)}.quiz-top{position:relative;display:flex;justify-content:center;align-items:center}.progress{display:flex;gap:9px}.progress span{display:block;width:36px;height:6px;border-radius:9px;background:#ded8e7}.progress .current{background:var(--purple)}.progress .correct{background:#6f9d3f}.progress .wrong{background:#df8c79}
#question-content{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,240px) auto auto auto;align-content:center;gap:clamp(12px,2.5cqh,22px);min-height:0;min-width:0}
.question-art{position:relative;width:100%;height:100%;min-height:0;display:grid;place-items:center;background:#e6e0f4;border-radius:22px;overflow:hidden}.question-art:before,.question-art:after{content:'';position:absolute;width:180px;height:180px;border:1px solid #ffffff60;border-radius:50%;transform:translate(60px,0)}.question-art:after{width:240px;height:240px}.question-art>svg{width:65%;height:80%;max-width:190px;max-height:190px;z-index:1}.question-art[data-visual=space]{background:#30284a}.question-art[data-visual=ocean]{background:#dceae6}.question-art[data-visual=nigeria]{background:#deeadc}
.nigeria-flag{display:flex;position:relative;width:clamp(80px,32cqw,145px);height:clamp(48px,20cqw,90px);max-height:65%;border-radius:5px;overflow:hidden;box-shadow:0 6px 0 #00000010,0 15px 25px #3526531a;transform:rotate(-6deg);z-index:1}.nigeria-flag i{width:33.333%;background:#159663}.nigeria-flag i:nth-child(2){background:#fff}.question-art .flag-star{position:absolute;right:15%;top:14%;width:24px;height:24px;color:#91b77d}
h2{font:800 29px/1.13 Roboto,sans-serif;letter-spacing:-.65px;outline:none}.quiz h2{font-size:clamp(20px,min(7.6cqw,4.2cqh),29px)}
.answers{display:grid;gap:clamp(8px,1.5cqh,12px);min-width:0}.answer{display:flex;align-items:center;text-align:left;gap:10px;width:100%;min-height:54px;padding:10px 12px;border:1.5px solid #ded9e4;border-radius:15px;background:#fffdf9;color:var(--ink);font-size:clamp(15px,4.4cqw,17px);line-height:1.2;transition:background .2s,border-color .2s;min-width:0}.answer:hover:enabled{border-color:var(--purple)}.answer-letter{display:grid;place-items:center;flex-shrink:0;width:28px;height:28px;border-radius:9px;background:#eeeaf4;color:#80758e;font-size:12px;font-weight:700}.answer-label{flex:1;min-width:0}.answer svg{width:18px;height:18px;visibility:hidden}.answer.correct{border-color:#759e45;background:#ecf4da}.answer.correct .answer-letter{color:#fff;background:#6c943d}.answer.wrong{border-color:#d48c7c;background:#f9e5df}.answer.wrong .answer-letter{background:#c97c6b;color:#fff}.answer.correct svg,.answer.wrong svg{visibility:visible}.answer:disabled{cursor:default;opacity:1}.answers.answered .answer:not(.correct):not(.wrong){opacity:.48}
.answer-countdown{height:4px;background:#e5dfed;border-radius:10px;overflow:hidden;opacity:0}.answer-countdown span{display:block;width:100%;height:100%;background:var(--purple);transform-origin:left}.answer-countdown.running{opacity:1}.answer-countdown.running span{animation:countdown var(--delay) linear forwards}
.result{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,260px) auto auto auto;gap:clamp(14px,2.8cqh,26px);align-content:center;text-align:center}.score-art{width:100%;height:100%;min-height:0;position:relative;max-width:280px;max-height:300px;align-self:center;justify-self:center;container-type:size;--score-size:min(72cqw,72cqh)}.score-disc{position:absolute;left:calc(50% - var(--score-size)/2);top:calc(50% - var(--score-size)/2);display:flex;flex-direction:column;justify-content:center;align-items:center;width:var(--score-size);height:var(--score-size);border-radius:50%;background:var(--lime);border:1px solid #c1db76;box-shadow:0 9px 0 #bfdc67,0 16px 30px #41311c12;transform:rotate(-8deg)}.score-disc strong{font:850 calc(var(--score-size)*.54)/.95 Roboto,sans-serif;letter-spacing:-3px}.score-disc span{font-size:max(10px,calc(var(--score-size)*.06));font-weight:800;letter-spacing:1px;margin-top:7px}.result-spark{position:absolute;left:4%;top:8%;width:18%;height:18%;color:var(--purple)}.result h2{font-size:clamp(25px,min(8.5cqw,4.8cqh),35px)}.result-copy{font-size:clamp(15px,4.5cqw,18px);line-height:1.45;color:#70667c}
.landing[data-screen=intro] .main-card{animation:float-main 3.8s ease-in-out infinite}.landing[data-screen=intro] .card-space{animation:float-space 4.4s ease-in-out infinite}.landing[data-screen=intro] .card-nature{animation:float-nature 4s ease-in-out infinite}.landing[data-screen=intro] .art-spark{animation:twinkle 2.5s ease-in-out infinite}.landing[data-screen=intro] .spark-two{animation-delay:1s}.landing[data-screen=intro] .cta{animation:cta-breathe 2.2s ease-in-out infinite}.landing[data-screen=quiz] .question-art>svg{animation:visual-float 3.4s ease-in-out infinite}.landing[data-screen=quiz] .nigeria-flag{animation:float-main 3.8s ease-in-out infinite}.landing[data-screen=result] .score-disc{animation:score-pop .8s var(--ease) both}.landing[data-screen=result] .result-spark{animation:twinkle 2.5s ease-in-out infinite}.landing[data-screen=result] .cta{animation:arrive .6s var(--ease) both,cta-breathe 2.2s .6s ease-in-out infinite}
@keyframes float-main{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-10px) rotate(-4deg)}}
@keyframes float-space{0%,100%{transform:translateY(0) rotate(-23deg)}50%{transform:translateY(7px) rotate(-28deg)}}
@keyframes float-nature{0%,100%{transform:translateY(0) rotate(17deg)}50%{transform:translateY(-9px) rotate(23deg)}}
@keyframes twinkle{0%,100%{transform:scale(.85) rotate(0deg);opacity:.55}50%{transform:scale(1.15) rotate(30deg);opacity:1}}
@keyframes cta-breathe{0%,100%{box-shadow:0 5px 0 #79ad3c,0 0 0 0 #a6ed5a00}50%{transform:scale(1.025);box-shadow:0 5px 0 #79ad3c,0 0 0 9px #a6ed5a35}}
@keyframes visual-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(4deg)}}
@keyframes score-pop{0%{opacity:0;transform:scale(.4) rotate(-25deg)}65%{opacity:1;transform:scale(1.1) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(-8deg)}}
@keyframes countdown{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:600px) and (min-height:600px){.landing{width:430px;height:min(900px,calc(100dvh - 32px));border-radius:28px;box-shadow:0 20px 80px #29203f15}}
@media(orientation:landscape) and (max-height:599px){.landing{width:100%;height:100dvh}}
@container landing (aspect-ratio > 1/1) and (max-height:599px){
 .screen{width:min(100%,620px);margin-inline:auto;padding:max(10px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}
 .intro{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:8px}.intro h1{font-size:clamp(28px,8cqh,40px);line-height:1.12}.hero-art{max-width:300px}.intro-bottom{gap:10px}.intro-prompt{font-size:clamp(20px,6cqh,26px)}.cta{min-height:44px;font-size:16px;padding:10px 14px}
 .quiz{grid-template-rows:6px minmax(0,1fr) 4px;gap:8px}#question-content{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(24px,1fr) auto auto auto;gap:8px}.question-art{border-radius:15px}.quiz h2{font-size:clamp(18px,5.4cqh,23px);line-height:1.15}.answers{gap:6px}.answer{min-height:36px;font-size:14px;padding:5px 10px;border-radius:10px}.answer-letter{width:23px;height:23px;font-size:11px}.answer svg{width:16px;height:16px}.nigeria-flag{width:90px;height:56px}
 .result{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto auto;gap:10px}.score-art{max-width:210px;max-height:190px}.result h2{font-size:clamp(21px,6.5cqh,28px)}.result-copy{font-size:14px;line-height:1.3}
}
@media(max-width:350px) and (orientation:portrait){.screen{padding-left:16px;padding-right:16px}.answer{font-size:14px;min-height:49px;padding:8px 10px}.answer-letter{width:25px;height:25px}.quiz h2{font-size:21px}.cta{font-size:16px;min-height:52px}.intro-prompt{font-size:25px}}
.question-timer{position:relative;justify-self:center;display:grid;place-items:center;width:66px;height:66px;margin-top:8px;border-radius:50%;background:#ece5fc;color:var(--purple);box-shadow:0 3px 12px #6944db15;--remaining:1;transition:color .3s,background .3s}
.question-timer>svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);stroke-width:4}.timer-track{stroke:currentColor;opacity:.12}.timer-ring{stroke:currentColor;stroke-dasharray:100;stroke-dashoffset:calc(100 - 100 * var(--remaining));transition:stroke-dashoffset .1s linear}.question-timer>strong{font-size:27px;font-weight:850;font-variant-numeric:tabular-nums;line-height:1}
.question-timer[data-urgency=soon]{color:#ba7a25;background:#faeedb}.question-timer[data-urgency=urgent],.question-timer[data-state=expired]{color:#c85449;background:#f9e2dd}.question-timer[data-state=running][data-urgency=urgent]{animation:timer-warning 1s ease-in-out infinite}.question-timer[data-state=answered]{opacity:.65}
.timeout-banner{position:absolute;inset:0;z-index:3;display:grid;place-items:center;text-align:center;padding:8px;background:#f5f2e9e8;color:#b34b40;font-size:clamp(18px,5cqw,25px);font-weight:800;animation:arrive .25s var(--ease) both}
@keyframes timer-warning{0%,100%{box-shadow:0 0 0 0 #c8544900}50%{box-shadow:0 0 0 5px #c8544920}}
@container landing (aspect-ratio > 1/1) and (max-height:599px){.question-timer{width:52px;height:52px;margin-top:4px}.question-timer>strong{font-size:22px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}