:root{
  --bg:#000;
  --panel:#100d17;
  --panel2:#171120;
  --panel3:#21172c;
  --stroke:rgba(255,235,202,.13);
  --stroke-strong:rgba(255,214,145,.25);
  --text:#fffaf1;
  --muted:#a89dae;
  --gold:#f5c96b;
  --gold-2:#ffdf9a;
  --pink:#ff5d9e;
  --violet:#9b7bff;
  --emerald:#62e7a4;
  --red:#ff6278;
  --shadow:0 32px 100px rgba(0,0,0,.56);
  --radius:30px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{min-height:100%;background:var(--bg)}
body{margin:0;min-height:100dvh;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);overflow-x:hidden;font-weight:700}
button{font:inherit;color:inherit}
button:focus-visible{outline:3px solid rgba(245,201,107,.72);outline-offset:3px}
[hidden]{display:none!important}
::selection{background:rgba(245,201,107,.28);color:#fff}

.world{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:#000}
.world__wash{position:absolute;inset:-18%;background-repeat:no-repeat}
.world__wash--cool{
  background:
    radial-gradient(ellipse 56% 50% at 6% 8%, rgba(46,118,196,.7), transparent 70%),
    radial-gradient(ellipse 52% 58% at 96% 92%, rgba(24,72,150,.55), transparent 72%),
    radial-gradient(ellipse 34% 30% at 42% 48%, rgba(80,150,205,.22), transparent 74%);
  animation:washDrift 22s ease-in-out infinite alternate;
}
.world__wash--soft{
  background:
    radial-gradient(ellipse 44% 40% at 88% 6%, rgba(90,176,196,.34), transparent 70%),
    radial-gradient(ellipse 50% 44% at 8% 94%, rgba(56,132,188,.4), transparent 70%),
    radial-gradient(ellipse 28% 34% at 62% 58%, rgba(160,205,228,.2), transparent 72%);
  animation:washDrift 28s ease-in-out infinite alternate-reverse, washBreathe 16s ease-in-out infinite;
}
.world canvas{position:relative;z-index:1;width:100%;height:100%;display:block}
@keyframes washDrift{from{transform:translate3d(-2.5%,-1.5%,0) scale(1)}to{transform:translate3d(3%,2.4%,0) scale(1.08)}}
@keyframes washBreathe{0%,100%{opacity:.55}50%{opacity:1}}

.app{min-height:100dvh;position:relative;z-index:1;display:grid;place-items:start center}
.shell{width:min(100%,620px);min-height:100dvh;padding:max(16px,env(safe-area-inset-top)) 18px max(30px,env(safe-area-inset-bottom));position:relative}
.shell::before{content:"";position:absolute;inset:0 3px auto;height:190px;border-radius:0 0 90px 90px;background:radial-gradient(circle at 50% 0,rgba(245,201,107,.06),transparent 72%);pointer-events:none}

.topbar{height:60px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;position:relative;z-index:3}
.brand{border:0;background:transparent;padding:0;display:flex;align-items:center;gap:10px;cursor:pointer;text-align:left}
.brand__badge{width:43px;height:43px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#271a33,#120e18);border:1px solid rgba(255,218,151,.24);box-shadow:inset 0 1px rgba(255,255,255,.08),0 13px 30px rgba(0,0,0,.32),0 0 28px rgba(245,201,107,.06)}
.brand__badge svg{width:25px;fill:var(--gold);filter:drop-shadow(0 4px 9px rgba(245,201,107,.24))}
.brand__badge circle{fill:#0b0811}
.brand__copy{display:flex;flex-direction:column;line-height:1}
.brand__copy small{font-size:7.5px;letter-spacing:.2em;color:#8e8293;margin-bottom:4px}
.brand__copy strong{font-size:17px;letter-spacing:.09em;font-weight:950}
.topbar__actions{display:flex;align-items:center;gap:9px}
.wallet,.icon-button{height:43px;border:1px solid rgba(255,232,198,.12);background:linear-gradient(180deg,rgba(31,23,40,.82),rgba(14,11,19,.86));border-radius:14px;box-shadow:inset 0 1px rgba(255,255,255,.05),0 10px 28px rgba(0,0,0,.22)}
.wallet{display:flex;align-items:center;gap:7px;padding:0 12px 0 8px}
.wallet img{width:29px;height:29px;filter:drop-shadow(0 6px 10px rgba(41,216,145,.24))}
.wallet span{min-width:18px;text-align:right;font-size:16px;font-weight:950;color:#effff9}
.icon-button{width:43px;display:grid;place-items:center;cursor:pointer;color:#b7abbc}
.icon-button:hover{border-color:rgba(245,201,107,.26);color:#f4deae}
.icon-button svg{width:21px;fill:currentColor}.sound-off{display:none}.icon-button.is-muted .sound-on{display:none}.icon-button.is-muted .sound-off{display:block}

.intro{animation:stageIn .58s cubic-bezier(.2,.8,.2,1)}
.intro__hero{height:432px;position:relative;border-radius:34px;overflow:hidden;border:1px solid rgba(255,224,173,.19);box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.1),0 0 0 1px rgba(0,0,0,.3);background:#0e0a15;transform-style:preserve-3d;transition:transform .18s ease}
.intro__hero::before{content:"";position:absolute;inset:11px;border:1px solid rgba(255,221,164,.12);border-radius:25px;z-index:4;pointer-events:none}
.intro__hero::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(115deg,rgba(255,224,169,.06),transparent 28%,transparent 72%,rgba(155,123,255,.06))}
.intro__hero>img{width:100%;height:100%;object-fit:cover;transform:scale(1.045);filter:saturate(.84) contrast(1.08) brightness(.82) hue-rotate(10deg)}
.intro__vignette{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,6,14,.03),rgba(10,6,14,.25) 42%,rgba(7,5,10,.96) 100%),linear-gradient(103deg,rgba(8,5,12,.77),rgba(8,5,12,.08) 68%),radial-gradient(circle at 74% 18%,rgba(155,123,255,.12),transparent 35%)}
.intro__shine{position:absolute;z-index:2;width:46%;height:170%;top:-50%;left:-70%;background:linear-gradient(110deg,transparent,rgba(255,235,193,.12),transparent);transform:rotate(9deg);animation:heroShine 6.2s ease-in-out infinite}
.intro__badge{position:absolute;z-index:5;left:20px;top:20px;height:32px;padding:0 12px;border-radius:999px;display:flex;align-items:center;gap:7px;background:rgba(13,9,18,.68);backdrop-filter:blur(16px);border:1px solid rgba(255,221,160,.19);font-size:8.5px;letter-spacing:.15em;color:#f2debb;box-shadow:0 10px 28px rgba(0,0,0,.2)}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(245,201,107,.5);animation:pulse 1.9s infinite}
.intro__copy{position:absolute;left:22px;right:22px;bottom:82px;z-index:5}
.eyebrow{display:block;color:var(--gold);font-size:9px;letter-spacing:.18em;font-weight:900;text-transform:uppercase;margin-bottom:9px}
.intro__copy h1{font-family:Impact,"Arial Black",system-ui,sans-serif;font-size:clamp(43px,11vw,64px);line-height:.91;margin:0;letter-spacing:.018em;text-transform:uppercase;text-shadow:0 8px 34px rgba(0,0,0,.48);font-weight:900}
.intro__copy h1 em{font-style:normal;background:linear-gradient(90deg,#ffe7a3 0%,#f4c362 35%,#ff74aa 73%,#a987ff 100%);background-clip:text;-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 4px 18px rgba(245,201,107,.12))}
.intro__copy p{font-size:12.5px;color:#d1c6d1;margin:13px 0 0;font-weight:650;max-width:420px}
.glass-pill{backdrop-filter:blur(18px);background:linear-gradient(180deg,rgba(26,18,33,.78),rgba(11,8,15,.72));border:1px solid rgba(255,226,174,.18);box-shadow:inset 0 1px rgba(255,255,255,.07),0 10px 26px rgba(0,0,0,.24)}
.intro__reward{position:absolute;left:20px;bottom:18px;height:52px;border-radius:17px;padding:0 15px 0 8px;display:flex;align-items:center;gap:9px;z-index:5}
.intro__reward img{width:39px;filter:drop-shadow(0 5px 12px rgba(33,211,140,.3))}
.intro__reward span{display:flex;flex-direction:column;line-height:1.02}.intro__reward small{font-size:7px;letter-spacing:.15em;color:#918594;margin-bottom:4px}.intro__reward strong{font-size:19px;color:#fff8e8;font-weight:950}

.intro__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:12px 0}
.stat-card{height:74px;border:1px solid rgba(255,232,198,.11);border-radius:20px;background:linear-gradient(180deg,rgba(30,22,39,.8),rgba(13,10,18,.86));display:flex;align-items:center;gap:9px;padding:0 10px;box-shadow:inset 0 1px rgba(255,255,255,.045),0 10px 30px rgba(0,0,0,.13);position:relative;overflow:hidden}
.stat-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(245,201,107,.28),transparent)}
.stat-card__icon{width:35px;height:35px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;background:rgba(245,201,107,.075);border:1px solid rgba(245,201,107,.16);font-size:13px;font-weight:950;color:var(--gold-2)}
.stat-card__icon--timer{color:#ff8ab7;background:rgba(255,93,158,.07);border-color:rgba(255,93,158,.14)}
.stat-card__icon--gem{padding:3px;background:rgba(74,221,158,.07);border-color:rgba(74,221,158,.14)}
.stat-card__icon--gem img{width:29px;height:29px}
.stat-card>span:last-child{display:flex;flex-direction:column;min-width:0}.stat-card small{font-size:7px;letter-spacing:.14em;color:#847889;margin-bottom:3px}.stat-card strong{font-size:11px;white-space:nowrap;color:#eee6ed}

.primary-button{width:100%;height:64px;border:1px solid rgba(255,238,204,.44);border-radius:20px;background:linear-gradient(180deg,#ffe39b 0%,#f2c463 49%,#dca246 100%);color:#26190b;display:flex;align-items:center;justify-content:center;gap:14px;font-size:14px;letter-spacing:.095em;font-weight:950;cursor:pointer;position:relative;overflow:hidden;box-shadow:0 18px 42px rgba(206,145,55,.18),inset 0 2px rgba(255,255,255,.48),inset 0 -3px rgba(112,69,17,.22),0 1px 0 #ffefc0;transition:transform .15s ease,filter .15s ease}
.primary-button::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 12%,rgba(255,255,255,.46) 44%,transparent 68%);transform:translateX(-135%);transition:transform .68s ease}.primary-button:hover{filter:brightness(1.05)}.primary-button:hover::before{transform:translateX(135%)}.primary-button:active{transform:translateY(2px) scale(.995)}
.primary-button__arrow{width:32px;height:32px;border-radius:10px;background:rgba(70,43,8,.13);display:grid;place-items:center;font-size:19px}
.primary-button--claim{background:linear-gradient(180deg,#fff0b5 0%,#f4ca70 42%,#e5aa47 100%);box-shadow:0 20px 48px rgba(224,166,71,.22),inset 0 2px rgba(255,255,255,.62),inset 0 -3px rgba(108,67,17,.24)}
.intro__note{text-align:center;color:#776d7c;font-size:9px;margin:10px 0 0;letter-spacing:.035em}

.quiz{animation:stageIn .46s ease}
.quiz__hud{display:grid;grid-template-columns:1fr 1fr 56px;gap:9px;align-items:center;margin-top:2px}
.question-counter,.streak{height:56px;border:1px solid rgba(255,232,198,.11);border-radius:18px;background:linear-gradient(180deg,rgba(29,22,38,.82),rgba(13,10,18,.86));padding:8px 13px;display:flex;align-items:center;justify-content:space-between;box-shadow:inset 0 1px rgba(255,255,255,.045),0 10px 24px rgba(0,0,0,.12)}
.question-counter small,.streak small{font-size:8px;letter-spacing:.14em;color:#837786}.question-counter strong,.streak strong{font-size:19px;font-weight:950}.question-counter i{font-style:normal;color:#675b6d;margin:0 4px;font-size:12px}.question-counter strong span:last-child{color:#928696}.streak strong{color:#e8dfe8}.streak.is-hot strong{color:var(--gold);text-shadow:0 0 18px rgba(245,201,107,.22)}
.timer{width:56px;height:56px;position:relative;display:grid;place-items:center;filter:drop-shadow(0 8px 18px rgba(0,0,0,.15))}.timer svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}.timer circle{fill:none;stroke-width:4}.timer__track{stroke:rgba(255,255,255,.07)}.timer__ring{stroke:url(#timerGlow);stroke-linecap:round;stroke-dasharray:125.66;stroke-dashoffset:0;transition:stroke .2s;filter:drop-shadow(0 0 4px rgba(94,176,255,.45))}.timer span{font-size:15px;font-weight:950;color:#e7f3ff}.timer.is-urgent .timer__ring{stroke:var(--red);filter:drop-shadow(0 0 5px rgba(255,98,120,.35))}.timer.is-urgent span{color:#ff8fa0;animation:urgent .7s infinite alternate}
.progress{height:19px;position:relative;margin:14px 2px 16px}.progress::before{content:"";position:absolute;left:4px;right:4px;top:7px;height:4px;border-radius:99px;background:rgba(255,255,255,.055)}.progress__fill{position:absolute;left:4px;top:7px;height:4px;width:0;border-radius:99px;background:linear-gradient(90deg,#2f6ea8,#8ec8ff,#f7fbff,#5eb0ff,#2f6ea8);background-size:220% 100%;animation:progressShine 2.8s linear infinite;box-shadow:0 0 14px rgba(94,176,255,.22);transition:width .45s cubic-bezier(.2,.8,.2,1)}.progress__nodes{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center}.progress__nodes i{width:8px;height:8px;border-radius:50%;background:#2a2131;border:2px solid #4b3c55;box-sizing:border-box;transition:.35s}.progress__nodes i.done{background:#5eb0ff;border-color:#d4ebff;box-shadow:0 0 10px rgba(94,176,255,.28)}.progress__nodes i.current{background:#f4f8ff;border-color:#5eb0ff;box-shadow:0 0 16px rgba(94,176,255,.35);transform:scale(1.45);z-index:1}

.question-card{border:1px solid rgba(255,229,188,.15);border-radius:30px;overflow:hidden;background:linear-gradient(180deg,rgba(26,19,35,.95),rgba(12,9,17,.96));box-shadow:0 26px 76px rgba(0,0,0,.36),inset 0 1px rgba(255,255,255,.055);transform-origin:center;position:relative}.question-card::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.018)}.question-card.is-entering{animation:cardIn .42s cubic-bezier(.2,.8,.2,1)}.question-card.is-leaving{animation:cardOut .23s ease forwards}
.question-card__media{height:218px;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 45%,rgba(155,123,255,.18),transparent 58%),linear-gradient(145deg,#261831,#100c17)}
.question-card__media::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,transparent 55%,rgba(9,6,12,.6) 100%);pointer-events:none}
.question-card__media::after{content:"";position:absolute;inset:0;z-index:3;box-shadow:inset 0 -50px 55px -38px rgba(6,4,9,.94),inset 0 1px rgba(255,255,255,.05);pointer-events:none}
.question-card__media img.media-photo{width:100%;height:100%;object-fit:cover;display:block;animation:mediaZoom 10s linear both;filter:saturate(.92) contrast(1.04)}
.question-card__media img.media-photo.contain{object-fit:contain;background:#f4f2f6;padding:4px}
.question-card__media img.media-photo.cutout{object-fit:contain;padding:7px 14px 0;background:radial-gradient(circle at 50% 55%,rgba(255,93,158,.19),transparent 38%),radial-gradient(circle at 62% 20%,rgba(245,201,107,.12),transparent 35%),linear-gradient(145deg,#25162f,#100b19);filter:drop-shadow(0 15px 20px rgba(0,0,0,.4));transform-origin:center 60%}
.question-card__media .svg-art{width:100%;height:100%;display:grid;place-items:center}.question-card__media .svg-art svg{width:92%;height:92%;filter:drop-shadow(0 13px 24px rgba(0,0,0,.3))}
.question-card__body{padding:17px 19px 20px}.question-card__meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}.question-card__meta>span:first-child{font-size:8px;letter-spacing:.16em;color:#a88ca0;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.045);padding:5px 7px;border-radius:7px}.reward-mini{display:flex;align-items:center;gap:5px;font-size:10px;color:#d8c698}.reward-mini img{width:20px;height:20px}.question-card h2{font-family:"Arial Black",Inter,system-ui,sans-serif;margin:0;font-size:clamp(21px,5.4vw,29px);line-height:1.12;letter-spacing:-.014em;color:#fffaf4}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.answer{min-height:69px;border:1px solid rgba(255,230,199,.105);border-radius:20px;background:linear-gradient(180deg,rgba(31,23,40,.94),rgba(15,11,21,.96));box-shadow:inset 0 1px rgba(255,255,255,.04),0 10px 28px rgba(0,0,0,.14);padding:8px 12px 8px 9px;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;position:relative;overflow:hidden;transition:transform .15s,border-color .15s,filter .15s,background .15s}.answer::before{content:"";position:absolute;inset:0;opacity:0;background:linear-gradient(105deg,rgba(255,255,255,.08),transparent 55%);transition:opacity .15s}.answer:hover{border-color:rgba(245,201,107,.28);transform:translateY(-1px)}.answer:hover::before{opacity:1}.answer:active{transform:translateY(1px) scale(.995)}.answer:disabled{cursor:default}.answer__key{width:35px;height:35px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;background:linear-gradient(180deg,#2b2035,#1b1522);border:1px solid rgba(245,201,107,.16);color:#d8ba7c;font-size:11px;font-weight:950;transition:.2s}.answer__label{font-size:12px;line-height:1.15;color:#e8e0e7;font-weight:850}.answer__mark{position:absolute;right:8px;top:8px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;opacity:0;font-size:11px}
.answer.is-correct{border-color:rgba(98,231,164,.52);background:linear-gradient(180deg,rgba(27,91,68,.9),rgba(14,51,39,.96));box-shadow:0 0 0 1px rgba(98,231,164,.06),0 14px 30px rgba(5,78,55,.12)}.answer.is-correct .answer__key{background:#62e7a4;border-color:#a9ffd4;color:#072d20}.answer.is-correct .answer__mark{opacity:1;background:#62e7a4;color:#073021}.answer.is-wrong{border-color:rgba(255,98,120,.48);background:linear-gradient(180deg,rgba(96,34,49,.9),rgba(52,19,28,.96))}.answer.is-wrong .answer__key{background:#ff6278;border-color:#ffa0ae;color:white}.answer.is-wrong .answer__mark{opacity:1;background:#ff6278;color:white}.answer.is-dimmed{filter:saturate(.35);opacity:.5}
.quiz__hint{text-align:center;color:#746979;font-size:9px;margin:10px 0 0}.quiz__hint span{display:inline-block;width:5px;height:5px;background:var(--gold);border-radius:50%;vertical-align:1px;margin-right:4px;box-shadow:0 0 9px rgba(245,201,107,.28)}

.result{animation:stageIn .5s ease;position:relative;padding-top:18px}.result__card{position:relative;overflow:hidden;border-radius:34px;border:1px solid rgba(255,226,179,.17);background:radial-gradient(circle at 50% 0,rgba(245,201,107,.11),transparent 16rem),radial-gradient(circle at 84% 20%,rgba(155,123,255,.12),transparent 15rem),linear-gradient(180deg,rgba(29,21,38,.96),rgba(11,8,15,.98));box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.055);padding:40px 21px 22px;text-align:center}
.result__card::before{content:"";position:absolute;inset:11px;border:1px solid rgba(255,226,179,.075);border-radius:25px;pointer-events:none}.result__card::after{content:"";position:absolute;left:12%;right:12%;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5}
.result__crown{height:118px;position:relative;display:grid;place-items:center;margin-bottom:8px}.result__emblem{width:101px;height:101px;border-radius:31px;display:grid;place-items:center;background:linear-gradient(145deg,#fff0b2,#efbb58 55%,#ce8f32);border:3px solid #fff1c1;box-shadow:0 20px 55px rgba(225,161,61,.19),inset 0 3px rgba(255,255,255,.5),inset 0 -5px rgba(111,67,16,.18);transform:rotate(-2deg);animation:emblem 2.8s ease-in-out infinite}.result__emblem svg{width:61px;fill:#fff9d4}.result__emblem circle{fill:#b97a25}.result__gem-orbit{position:absolute;filter:drop-shadow(0 7px 13px rgba(30,218,143,.22));animation:orbitFloat 2.5s ease-in-out infinite alternate}.result__gem-orbit img{width:44px}.result__gem-orbit--1{left:19%;top:3px;transform:rotate(-18deg)}.result__gem-orbit--2{right:18%;bottom:2px;animation-delay:-1.1s;transform:rotate(14deg)}.result h2{font-family:Impact,"Arial Black",sans-serif;font-size:43px;text-transform:uppercase;letter-spacing:.02em;margin:5px 0 8px;color:#fff7ea;text-shadow:0 8px 28px rgba(0,0,0,.28)}.result p{color:#aa9eac;font-size:12px;margin:0}.result__scoreline{height:91px;margin:23px 0 15px;border:1px solid rgba(255,231,193,.105);border-radius:23px;background:linear-gradient(180deg,rgba(21,15,28,.78),rgba(10,8,14,.82));display:grid;grid-template-columns:1fr 1px 1fr;align-items:center;box-shadow:inset 0 1px rgba(255,255,255,.03)}.result__scoreline>div{display:flex;flex-direction:column;gap:6px}.result__scoreline small{font-size:8px;letter-spacing:.14em;color:#7f7382}.result__scoreline strong{font-size:23px}.result__divider{height:43px;background:rgba(255,255,255,.065)}.result__reward{display:flex;align-items:center;justify-content:center;gap:7px;color:#fff7e7}.result__reward img{width:32px}

.score-pop{position:fixed;left:50%;top:26%;z-index:20;display:flex;align-items:center;gap:7px;padding:9px 14px 9px 8px;border-radius:16px;background:linear-gradient(180deg,rgba(34,24,43,.96),rgba(15,11,20,.96));border:1px solid rgba(245,201,107,.26);box-shadow:0 18px 44px rgba(0,0,0,.36);opacity:0;pointer-events:none;transform:translate(-50%,18px) scale(.88);color:#fff3d7}.score-pop img{width:30px}.score-pop span{font-size:17px;font-weight:950}.score-pop.show{animation:scorePop 1s cubic-bezier(.2,.8,.2,1)}

@keyframes progressShine{to{background-position:220% 0}}
@keyframes stageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes cardIn{from{opacity:0;transform:translateX(16px) scale(.985)}to{opacity:1;transform:none}}
@keyframes cardOut{to{opacity:0;transform:translateX(-14px) scale(.988)}}
@keyframes mediaZoom{from{transform:scale(1.012)}to{transform:scale(1.055)}}
@keyframes float{from{transform:translate3d(-2%,0,0)}to{transform:translate3d(6%,7%,0)}}
@keyframes ambientSweep{to{background-position:380px 0}}
@keyframes heroShine{0%,60%{transform:translateX(0) rotate(9deg)}80%,100%{transform:translateX(380%) rotate(9deg)}}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(245,201,107,0)}}
@keyframes urgent{to{transform:scale(1.08)}}
@keyframes scorePop{0%{opacity:0;transform:translate(-50%,18px) scale(.88)}20%{opacity:1;transform:translate(-50%,0) scale(1.05)}70%{opacity:1;transform:translate(-50%,-16px) scale(1)}100%{opacity:0;transform:translate(-50%,-32px) scale(.96)}}
@keyframes emblem{50%{transform:rotate(2deg) translateY(-3px)}}
@keyframes orbitFloat{to{margin-top:-9px;filter:drop-shadow(0 12px 17px rgba(30,218,143,.3))}}
@keyframes fall{from{transform:translate3d(0,-20px,0) rotate(0deg)}to{transform:translate3d(var(--drift),620px,0) rotate(520deg)}}

@media (max-width:430px){
  .shell{padding-left:13px;padding-right:13px}.topbar{margin-bottom:11px}.intro__hero{height:402px;border-radius:29px}.intro__hero::before{inset:9px;border-radius:22px}.intro__copy{left:18px;right:18px}.intro__stats{gap:6px}.stat-card{padding:0 8px;gap:6px}.stat-card__icon{width:31px;height:31px}.stat-card strong{font-size:10px}.question-card__media{height:198px}.question-card__body{padding:14px 15px 17px}.answers{gap:8px}.answer{min-height:65px;padding-left:8px}.answer__key{width:32px;height:32px}.answer__label{font-size:11px}.result__card{padding-left:16px;padding-right:16px}
}
@media (max-width:350px){.intro__stats{grid-template-columns:1fr}.stat-card{height:57px}.intro__hero{height:372px}.answers{grid-template-columns:1fr}.question-card__media{height:178px}.result h2{font-size:36px}}
@media (min-width:820px){.shell{padding-top:24px}.intro__hero{height:452px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}

.wallet img{width:28px;height:28px;object-fit:contain;}
.intro__reward img,.reward-mini img,.result__reward img,.score-pop img,.result__gem-orbit img{object-fit:contain;}

.wallet img,.stat-card__icon--gem img,.intro__reward img,.reward-mini img,.result__reward img,.score-pop img,.result__gem-orbit img{background:transparent !important;object-fit:contain;display:block;}
.wallet img{width:26px;height:26px;}
.intro__reward img{width:40px;height:40px;}
.stat-card__icon--gem img{width:28px;height:28px;}
.reward-mini img{width:18px;height:18px;}
.result__reward img{width:28px;height:28px;}
.score-pop img{width:28px;height:28px;}
.result__gem-orbit img{width:42px;height:42px;}
.intro__hero>img{object-position:center center;transform:scale(1.01);filter:saturate(1) contrast(1.02) brightness(.76);}

.brand{gap:0}
.brand__copy small{margin-bottom:5px}
.topbar__actions{gap:0}
.quiz__hud{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center;
  gap:10px !important;
}
.timer{justify-self:end}
.streak,.icon-button,.brand__badge{display:none !important}

.intro__stats .stat-card:nth-child(3){
  align-items:center;
}
.intro__stats .stat-card:nth-child(3) .stat-card__icon--gem{
  width:33px;
  height:33px;
  padding:0;
  display:grid;
  place-items:center;
  overflow:visible;
  flex:0 0 33px;
}
.intro__stats .stat-card:nth-child(3) .stat-card__icon--gem img{
  width:24px !important;
  height:24px !important;
  display:block;
  object-fit:contain;
  transform:none;
  margin:0;
}
.intro__stats .stat-card:nth-child(3)>span:last-child{
  justify-content:center;
  line-height:1.05;
}

.result h2{
  margin-top:10px;
  margin-bottom:4px;
}
.result__scoreline{
  margin-top:24px;
  margin-bottom:18px;
}
.result__card{
  padding-bottom:24px;
}

.intro__footer{position:relative;z-index:6}

.boot{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:radial-gradient(circle at 50% 28%,rgba(155,123,255,.24),transparent 18rem),#09070f;transition:opacity .35s ease}
.boot.is-done{opacity:0;pointer-events:none}
.boot__card{width:min(240px,72vw);text-align:center}
.boot__card strong{display:block;font-size:22px;letter-spacing:.14em;font-weight:950;margin-bottom:18px}
.boot__track{height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.boot__track span{display:block;height:100%;width:0;border-radius:inherit;background:#5eb0ff;transition:width .2s ease}
.boot__card small{display:block;margin-top:12px;letter-spacing:.2em;font-size:10px;color:#8e8293;text-transform:uppercase}
.app{visibility:hidden}
body.is-ready .app{visibility:visible}

@media (max-width:520px){
  .shell:has(#introStage:not([hidden])){
    height:100svh;
    min-height:100svh;
    max-height:100svh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    padding-top:max(10px, env(safe-area-inset-top));
    padding-bottom:max(12px, env(safe-area-inset-bottom));
  }
  .shell:has(#introStage:not([hidden])) .topbar{
    height:46px;
    margin-bottom:8px;
    flex:none;
  }
  .shell:has(#introStage:not([hidden])) .intro{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
  }
  .shell:has(#introStage:not([hidden])) .intro__hero{
    flex:1 1 auto;
    height:auto;
    min-height:0;
    border-radius:24px;
  }
  .shell:has(#introStage:not([hidden])) .intro__copy{
    left:16px;
    right:16px;
    bottom:64px;
  }
  .shell:has(#introStage:not([hidden])) .intro__copy h1{
    font-size:clamp(32px, 9.2vw, 48px);
  }
  .shell:has(#introStage:not([hidden])) .intro__copy p{
    margin-top:8px;
    font-size:12px;
  }
  .shell:has(#introStage:not([hidden])) .intro__reward{
    left:14px;
    bottom:12px;
    height:46px;
  }
  .shell:has(#introStage:not([hidden])) .intro__stats{
    flex:none;
    margin:8px 0;
  }
  .shell:has(#introStage:not([hidden])) .stat-card{
    height:56px;
  }
  .shell:has(#introStage:not([hidden])) .intro__footer{
    flex:none;
  }
  .shell:has(#introStage:not([hidden])) .primary-button--start{
    height:56px;
  }
  .shell:has(#introStage:not([hidden])) .intro__note{
    margin:8px 0 0;
  }
}

@media (max-width:520px) and (max-height:680px){
  .shell:has(#introStage:not([hidden])) .intro__badge{display:none}
  .shell:has(#introStage:not([hidden])) .intro__copy{bottom:58px}
  .shell:has(#introStage:not([hidden])) .intro__copy h1{font-size:30px}
  .shell:has(#introStage:not([hidden])) .intro__copy p{font-size:11px;margin-top:6px}
  .shell:has(#introStage:not([hidden])) .intro__reward{height:42px}
  .shell:has(#introStage:not([hidden])) .stat-card{height:48px;border-radius:16px}
  .shell:has(#introStage:not([hidden])) .primary-button--start{height:52px}
}