@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@700&family=Nunito:wght@500;600;700;800&display=swap');
:root{--green:#0f766e;--green-dark:#155e59;--mint:#dff3ec;--gold:#d9a62e;--ink:#253536;--muted:#667675;--paper:#fffdf7;--wrong:#b84343;--right:#167653}
*{box-sizing:border-box}
body{position:relative;margin:0;min-height:100vh;padding:32px 18px;overflow-x:hidden;background:radial-gradient(circle at 18% 12%,#b592e755 0 2px,transparent 3px),radial-gradient(circle at 79% 20%,#fff8d966 0 1.5px,transparent 2.5px),radial-gradient(circle at 90% 65%,#dbc8ff55 0 2px,transparent 3px),linear-gradient(145deg,#211340 0%,#53348a 48%,#9763b5 100%);background-size:170px 170px,230px 230px,290px 290px,auto;color:var(--ink);font-family:"Nunito",system-ui,sans-serif}
body::before{content:"";position:fixed;z-index:0;top:55px;right:8vw;width:150px;height:150px;border-radius:50%;background:#ffe9a6;box-shadow:0 0 45px #ffe8a87a,0 0 100px #d8b6ff44}
body::after{content:"";position:fixed;z-index:0;top:25px;right:5.8vw;width:148px;height:148px;border-radius:50%;background:#39215f}
.quiz-shell{position:relative;z-index:1;width:min(820px,100%);margin:auto}.hero{text-align:center;margin-bottom:24px}.eyebrow{margin:0;color:var(--green);font-size:.76rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase}.hero h1{margin:5px 0 2px;color:#fff7dc;text-shadow:0 3px 18px #16082699;font:700 clamp(2.2rem,7vw,4.3rem)/1.05 "Amiri",serif}.hero>p:last-child{margin:0;color:#eee2ff}
.journey{margin-bottom:20px;padding:15px 22px 20px;border:1px solid #dbc9ff55;border-radius:20px;background:#fff9;box-shadow:0 8px 25px #1d10373d}.journey-labels{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:var(--muted);font-size:.73rem;font-weight:800;text-transform:uppercase}.journey-labels strong{color:var(--green);font-size:.82rem}.track{position:relative;height:125px;overflow:hidden;border-radius:16px;background:linear-gradient(#2d2058 0 64%,#15152d 65%);box-shadow:inset 0 0 30px #100a25}.track.danger{animation:dangerFlash .25s 3}.night-stars{position:absolute;inset:8px 12px auto;color:#fff4b8;font-size:.8rem;letter-spacing:.65em;white-space:nowrap;opacity:.8;animation:twinkle 2s ease-in-out infinite alternate}.mountains{position:absolute;inset:auto 0 34px;height:54px;opacity:.7;background:linear-gradient(135deg,transparent 0 48%,#49366b 49% 66%,transparent 67%) 0 0/130px 100%,linear-gradient(45deg,transparent 0 48%,#34275a 49% 66%,transparent 67%) 60px 0/170px 100%}.track-fill{position:absolute;z-index:2;left:0;bottom:0;width:0;height:5px;background:linear-gradient(90deg,#42c99d,#ffe16b);transition:width .7s ease}.ground-segment{position:absolute;z-index:3;bottom:8px;height:23px;border-top:5px solid #68a76d;border-radius:5px 5px 2px 2px;background:linear-gradient(#66513f,#382d2f);box-shadow:0 5px 8px #08071399}.ground-segment::after{content:"";position:absolute;inset:7px 4px 3px;background:repeating-linear-gradient(115deg,transparent 0 14px,#8b725744 15px 17px)}.ground-one{left:0;width:23%}.ground-two{left:29%;width:20%}.ground-three{left:55%;width:19%}.ground-four{left:81%;width:19%}.lava{position:absolute;z-index:2;bottom:5px;height:18px;overflow:hidden;border-radius:50%;background:#ff5722;box-shadow:0 0 14px #ff5722,0 -4px 18px #ffb224}.lava-one{left:23%;width:6%}.lava-two{left:74%;width:7%}.lava i{position:relative;display:inline-block;width:9px;height:9px;margin:4px 1px;border-radius:50%;background:#ffe05c;animation:bubble .8s ease-in-out infinite alternate}.lava i:nth-child(2){animation-delay:.25s}.lava i:nth-child(3){animation-delay:.5s}.floating-rock{position:absolute;z-index:3;bottom:19px;width:25px;height:12px;border-radius:50%;background:#705b52;box-shadow:0 4px 0 #32282b}.rock-one{left:50.5%;animation:floatRock 1.8s ease-in-out infinite}.rock-two{left:77%;bottom:38px;animation:floatRock 1.8s .6s ease-in-out infinite}.finish{position:absolute;z-index:7;right:5px;top:15px;display:grid;width:37px;height:37px;place-items:center;border-radius:50%;color:#4a3473;background:#fff1a8;box-shadow:0 0 22px #fff0a8;font-size:1.35rem}.traveller{position:absolute;z-index:8;left:0;bottom:28px;width:34px;height:58px;translate:-42% 0;transition:left .7s cubic-bezier(.4,0,.2,1);filter:drop-shadow(0 5px 3px #080713aa)}.traveller.jumping{animation:journeyJump .72s ease-in-out}.traveller.celebrating{animation:joyJump 1.05s ease-in-out}.traveller.falling{animation:fallIntoLava 1.05s ease-in forwards}.head{position:absolute;left:10px;top:8px;width:15px;height:16px;border-radius:8px;background:#c99164}.kufi{position:absolute;z-index:2;left:8px;top:3px;width:19px;height:10px;border:2px solid #d8d8ce;border-radius:8px 8px 3px 3px;background:#fff}.arms{position:absolute;z-index:-1;left:2px;top:26px;width:30px;height:5px;border-left:10px solid #f8f5e8;border-right:10px solid #f8f5e8;transform-origin:center}.kamis{position:absolute;left:5px;top:22px;width:25px;height:30px;border-radius:7px 7px 4px 4px;background:#f8f5e8;border:2px solid #d4d9cb;clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}.feet{position:absolute;left:9px;top:51px;width:17px;height:6px;border-left:5px solid #6e533d;border-right:5px solid #6e533d}.traveller.jumping .feet{animation:runningFeet .22s linear infinite alternate}.traveller.celebrating .arms{animation:happyArms .22s alternate infinite}.lava-splash{position:absolute;z-index:9;bottom:9px;left:0;width:44px;height:25px;translate:-50% 0;opacity:0;pointer-events:none}.lava-splash.splashing{animation:splashShow .7s .48s ease-out}.lava-splash i{position:absolute;bottom:0;left:17px;width:11px;height:11px;border-radius:50%;background:#ffcf3f;box-shadow:0 0 9px #ff5b20}.lava-splash i:nth-child(1){--sx:-18px}.lava-splash i:nth-child(2){--sx:0px}.lava-splash i:nth-child(3){--sx:18px}.lava-splash.splashing i{animation:splashDrop .55s .48s ease-out}.primary-button:disabled,.next-button:disabled{opacity:.55;cursor:wait}@keyframes journeyJump{0%,100%{translate:-42% 0;rotate:0}45%{translate:-42% -47px;rotate:5deg}70%{translate:-42% -22px;rotate:-3deg}}@keyframes joyJump{0%,100%{translate:-42% 0;scale:1}20%,65%{translate:-42% -34px;scale:1.08}40%,85%{translate:-42% 0;scale:1}50%{rotate:-8deg}75%{rotate:8deg}}@keyframes happyArms{to{transform:translateY(-8px) rotate(15deg)}}@keyframes fallIntoLava{0%{translate:-42% 0;rotate:0;opacity:1}35%{translate:20% -36px;rotate:65deg}75%{translate:55% 35px;rotate:190deg;opacity:1}100%{translate:55% 78px;rotate:260deg;opacity:0}}@keyframes splashShow{0%,100%{opacity:0}20%,70%{opacity:1}}@keyframes splashDrop{50%{transform:translate(var(--sx),-22px) scale(.7)}100%{transform:translate(calc(var(--sx) * 1.3),4px) scale(.2)}}@keyframes dangerFlash{50%{box-shadow:inset 0 0 45px #ff381dbb}}@keyframes runningFeet{to{transform:skewX(28deg)}}@keyframes bubble{to{transform:translateY(-7px);opacity:.5}}@keyframes floatRock{50%{transform:translateY(-5px)}}@keyframes twinkle{to{opacity:.35}}
.quiz-card,.result-card{padding:clamp(22px,5vw,42px);border:1px solid #806c3f26;border-radius:26px;background:var(--paper);box-shadow:0 18px 50px #3551481b,0 5px 0 #b1965530}.question-top{display:flex;align-items:center;gap:12px;margin-bottom:18px}.number{display:grid;width:44px;height:44px;place-items:center;border-radius:13px;color:#fff;background:var(--green);font-weight:800}.category{color:var(--gold);font-size:.76rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.quiz-card h2{margin:0 0 24px;font-size:clamp(1.3rem,4vw,1.75rem);line-height:1.35}.answers{display:grid;gap:11px}.answer{position:relative;display:flex;align-items:center;gap:13px;width:100%;padding:15px 16px;border:2px solid #dce4dd;border-radius:14px;background:#fff;cursor:pointer;transition:border .15s,background .15s,transform .15s}.answer:hover{transform:translateX(3px);border-color:#73aa98}.answer input{position:absolute;opacity:0}.letter{display:grid;flex:0 0 32px;height:32px;place-items:center;border-radius:9px;background:#edf2ed;color:var(--green);font-weight:800}.answer:has(input:checked){border-color:var(--green);background:#effaf5}.answer:has(input:checked) .letter{color:#fff;background:var(--green)}.answer.correct{border-color:var(--right);background:#e8f7ef}.answer.wrong{border-color:var(--wrong);background:#fff0ee}.answer.locked{cursor:default;pointer-events:none}.primary-button,.next-button,.secondary-button{margin-top:20px;padding:14px 21px;border:0;border-radius:12px;font:800 .98rem "Nunito";cursor:pointer}.primary-button,.next-button{color:#fff;background:var(--green);box-shadow:0 5px 0 var(--green-dark)}.secondary-button{color:var(--green);background:var(--mint)}.choose-warning{min-height:20px;margin:8px 0 -10px;color:var(--wrong);font-size:.86rem;font-weight:700}.feedback{margin-top:22px;padding:18px;border-radius:16px;background:#eef7f2}.feedback.incorrect{background:#fff1ed}.feedback strong{font-size:1.12rem}.feedback p{margin:5px 0 0;color:#526462;line-height:1.5}.next-button{margin-top:14px}.result-card{text-align:center}.result-icon{display:grid;width:78px;height:78px;margin:0 auto 18px;place-items:center;border-radius:50%;color:#fff;background:var(--gold);font-size:2.5rem;box-shadow:0 7px 0 #a8751f}.result-card h2{margin:7px 0 5px;font:700 2.5rem "Amiri"}.result-score{margin:0;color:var(--green);font-size:1.5rem;font-weight:800}.result-card>p:last-of-type{max-width:540px;margin:12px auto;color:var(--muted);line-height:1.6}.result-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}footer{padding:20px 10px 0;text-align:center;color:#73817e;font-size:.76rem}[hidden]{display:none!important}
@keyframes splashDrop{50%{transform:translate(var(--sx),-22px) scale(.7)}100%{transform:translate(var(--sx),4px) scale(.2)}}
.hero .eyebrow{color:#ffe3a0}footer{color:#e5d9f5}
@media(max-width:560px){body{padding:18px 10px}body::before{top:38px;right:-25px;width:105px;height:105px}body::after{top:18px;right:-8px;width:103px;height:103px}.hero h1{font-size:2.6rem}.hero>p:last-child{max-width:290px;margin-inline:auto}.journey{padding-inline:15px}.quiz-card,.result-card{border-radius:20px}.answer{padding:12px}.traveller{scale:.85;transform-origin:bottom}.result-actions button{width:100%;margin-top:10px}}