:root{--navy:#07112f;--navy2:#111d53;--cyan:#12d9ff;--blue:#2878ff;--yellow:#ffd52e;--pink:#ff36b8;--purple:#8a4dff;--green:#42e676;--red:#ff5068;--white:#f8fbff;--muted:#afbee7;--card:rgba(20,34,92,.82);--line:rgba(145,176,255,.23);--shadow:0 22px 60px rgba(0,0,20,.4)}
*{box-sizing:border-box}html{min-height:100%;background:var(--navy)}body{margin:0;min-height:100vh;color:var(--white);font-family:Nunito,"Arial Rounded MT Bold",system-ui,-apple-system,sans-serif;background:radial-gradient(circle at 12% 8%,#234db2 0,transparent 28%),radial-gradient(circle at 90% 18%,#6b1fb3 0,transparent 28%),linear-gradient(145deg,#07112f,#101a4b 52%,#07112f);overflow-x:hidden}.stars{position:fixed;inset:0;pointer-events:none;opacity:.7;background-image:radial-gradient(circle,#fff 1px,transparent 1px),radial-gradient(circle,#68dcff 1px,transparent 1px);background-size:48px 48px,83px 83px;background-position:0 0,18px 25px;mask-image:linear-gradient(#000,transparent 78%)}button{font:inherit;color:inherit}.topbar{width:min(1180px,calc(100% - 32px));margin:0 auto;min-height:88px;display:flex;align-items:center;gap:18px;justify-content:space-between;position:relative;z-index:5}.brand{border:0;background:none;display:flex;align-items:center;gap:10px;cursor:pointer;padding:4px}.brand-orb{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(from 180deg,var(--pink),var(--purple),var(--cyan),var(--yellow),var(--pink));box-shadow:0 0 24px rgba(57,219,255,.55);padding:4px}.brand-orb span{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;background:#121e54;font-size:1.6rem;font-weight:1000;color:var(--yellow);text-shadow:2px 3px 0 #7023c8}.brand>span:last-child{display:flex;flex-direction:column;align-items:flex-start;line-height:.82}.brand strong{font-size:1.45rem;letter-spacing:.04em;font-weight:1000}.brand small{font-size:.72rem;color:var(--cyan);font-weight:1000;letter-spacing:.32em;margin-left:2px;margin-top:7px}.player-pill{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border:1px solid var(--line);border-radius:999px;background:rgba(8,17,51,.7);box-shadow:inset 0 1px rgba(255,255,255,.08)}.player-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#6639dc,#168fff);font-size:1.25rem}.player-copy{display:flex;flex-direction:column;gap:4px}.player-copy small{font-size:.65rem;font-weight:900;letter-spacing:.12em}.xp-track{width:90px;height:6px;border-radius:20px;background:#263363;overflow:hidden}.xp-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),var(--green));transition:width .45s}.player-pill>strong{font-size:.9rem;color:var(--yellow);white-space:nowrap}.sound-controls{display:flex;gap:8px}.icon-btn,.back-btn{width:44px;height:44px;border:1px solid var(--line);border-radius:14px;background:rgba(19,31,82,.88);cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.2);transition:.2s}.icon-btn:hover,.back-btn:hover{transform:translateY(-2px);border-color:var(--cyan)}.icon-btn[aria-pressed="false"]{filter:grayscale(1);opacity:.58}.screen{display:none;width:min(1180px,calc(100% - 32px));margin:0 auto 80px;position:relative;z-index:2}.screen.active{display:block;animation:screenIn .42s cubic-bezier(.2,.8,.2,1)}@keyframes screenIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.hero-panel{min-height:420px;border:1px solid rgba(103,223,255,.3);border-radius:34px;overflow:hidden;display:grid;grid-template-columns:1.04fr .96fr;position:relative;background:linear-gradient(125deg,rgba(24,47,139,.93),rgba(40,26,106,.91));box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.15)}.hero-panel:before{content:"";position:absolute;inset:-50%;background:conic-gradient(from 230deg,transparent,#13d8ff22,transparent,#ff37b51d,transparent);animation:spin 16s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.hero-copy{padding:62px;align-self:center;position:relative;z-index:2}.eyebrow{display:inline-flex;gap:8px;align-items:center;color:var(--yellow);font-size:.78rem;letter-spacing:.16em;font-weight:1000}.hero-copy h1{font-size:clamp(2.8rem,6vw,5rem);line-height:.94;margin:16px 0 18px;font-weight:1000;letter-spacing:-.04em;text-shadow:0 5px 0 #0c1c54,0 9px 25px rgba(0,0,0,.35)}.hero-copy p{max-width:520px;color:#d6e4ff;font-size:1.08rem;line-height:1.6;margin:0 0 22px}.hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}.hero-badges span{padding:8px 12px;border-radius:999px;background:rgba(5,13,46,.55);border:1px solid var(--line);font-size:.78rem;font-weight:800}.primary-btn{border:0;border-radius:16px;padding:16px 22px;background:linear-gradient(135deg,#ffb91e,#ffde38);color:#301700;font-weight:1000;letter-spacing:.05em;cursor:pointer;box-shadow:0 7px 0 #d67800,0 14px 28px rgba(255,177,0,.22);transition:.2s}.primary-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}.primary-btn:active{transform:translateY(4px);box-shadow:0 3px 0 #d67800}.primary-btn b{margin-left:10px}.hero-art{position:relative;min-height:420px;display:grid;place-items:center;overflow:hidden}.hero-art:after{content:"";position:absolute;inset:auto 5% -28% 5%;height:62%;border-radius:50%;background:#16d7ff;filter:blur(80px);opacity:.38}.hero-art img{height:112%;width:auto;max-width:100%;object-fit:cover;object-position:center 28%;filter:saturate(1.12) contrast(1.04);mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 100%);position:relative;z-index:1}.floating-mark{position:absolute;z-index:2;font-size:4rem;font-weight:1000;color:var(--yellow);text-shadow:4px 5px 0 #ff4b46;animation:float 3s ease-in-out infinite}.q1{top:18%;right:10%}.q2{bottom:10%;left:8%;animation-delay:-1.4s}@keyframes float{50%{transform:translateY(-12px) rotate(5deg)}}.mission-strip{margin:22px 0 34px;display:grid;grid-template-columns:auto 1fr minmax(100px,220px) auto;align-items:center;gap:16px;padding:16px 20px;border:1px solid var(--line);border-radius:22px;background:rgba(12,23,66,.75);box-shadow:0 12px 34px rgba(0,0,0,.2)}.mission-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;font-size:1.55rem;background:linear-gradient(145deg,#ff425e,#ff9a23);box-shadow:0 0 20px #ff5d3855}.mission-strip small{display:block;color:var(--yellow);font-size:.68rem;font-weight:1000;letter-spacing:.14em}.mission-strip strong{font-size:.96rem}.mission-progress{height:10px;background:#273362;border-radius:99px;overflow:hidden}.mission-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#ff4b68,#ffae27);border-radius:inherit;transition:width .5s}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:20px}.section-heading h2{font-size:clamp(1.7rem,4vw,2.45rem);margin:6px 0 0}.section-heading>span{color:var(--muted);font-size:.88rem;font-weight:800}.filter-row{display:flex;gap:9px;overflow-x:auto;padding:2px 2px 13px;scrollbar-width:none}.filter-chip{flex:0 0 auto;padding:10px 15px;border-radius:999px;border:1px solid var(--line);background:rgba(17,29,79,.75);font-size:.82rem;font-weight:900;cursor:pointer;transition:.2s}.filter-chip.active{border-color:transparent;background:linear-gradient(135deg,#7549ff,#1f8cff);box-shadow:0 8px 22px #3c55d955}.quiz-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.quiz-card{position:relative;min-height:235px;padding:18px;border-radius:25px;border:1px solid rgba(255,255,255,.11);overflow:hidden;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(155deg,var(--c1),var(--c2));box-shadow:0 15px 32px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.16);transition:.25s}.quiz-card:before{content:"";position:absolute;width:145px;height:145px;border-radius:50%;right:-38px;top:-35px;background:#fff;opacity:.08}.quiz-card:hover{transform:translateY(-6px) rotate(.3deg);box-shadow:0 24px 46px rgba(0,0,0,.35)}.quiz-card .card-number{position:absolute;top:14px;left:15px;padding:6px 9px;background:rgba(5,11,43,.56);border-radius:10px;font-size:.72rem;font-weight:1000;letter-spacing:.08em}.quiz-card .card-status{position:absolute;top:15px;right:15px;font-size:.8rem}.quiz-card .card-emoji{font-size:4.6rem;position:absolute;right:18px;top:40px;filter:drop-shadow(0 10px 10px rgba(0,0,0,.25));transform:rotate(4deg)}.quiz-card .card-category{font-size:.66rem;letter-spacing:.14em;font-weight:1000;color:#fff8a8}.quiz-card h3{margin:5px 0 10px;font-size:1.25rem;line-height:1.05;max-width:80%}.quiz-card .card-meta{display:flex;justify-content:space-between;align-items:center;font-size:.74rem;color:#e7edff}.quiz-card .mini-stars{letter-spacing:1px}.game-screen{max-width:850px;padding-top:10px}.game-top{display:flex;align-items:center;gap:14px}.back-btn{font-size:1.5rem}.game-title{flex:1;display:flex;flex-direction:column}.game-title small{color:var(--cyan);font-size:.7rem;font-weight:1000;letter-spacing:.16em}.game-title strong{font-size:1.05rem}.game-counter{padding:9px 14px;border:1px solid var(--line);border-radius:14px;background:#111d53}.game-counter b{color:var(--yellow)}.game-counter span{color:var(--muted)}.question-progress{height:9px;margin:16px 0 20px;border-radius:99px;background:#1a275f;overflow:hidden}.question-progress i{display:block;width:20%;height:100%;background:linear-gradient(90deg,var(--cyan),var(--purple),var(--pink));border-radius:inherit;transition:width .4s}.challenge-card{position:relative;min-height:640px;padding:44px 46px 38px;border-radius:32px;border:1px solid rgba(91,211,255,.32);background:linear-gradient(155deg,rgba(22,38,104,.95),rgba(9,19,60,.97));box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.12);text-align:center;overflow:hidden}.challenge-card:before{content:"";position:absolute;width:440px;height:440px;border-radius:50%;left:50%;top:-280px;transform:translateX(-50%);background:var(--purple);filter:blur(80px);opacity:.26}.timer-orb{width:74px;height:74px;margin:-6px auto 10px;position:relative;display:grid;place-items:center}.timer-orb svg{position:absolute;width:100%;height:100%;transform:rotate(-90deg)}.timer-orb circle{fill:none;stroke:#263469;stroke-width:4}.timer-orb circle:last-child{stroke:var(--yellow);stroke-linecap:round;stroke-dasharray:119.4;stroke-dashoffset:0;transition:stroke-dashoffset .1s linear}.timer-orb b{font-size:1.5rem}.question-kicker{font-size:.68rem;color:var(--cyan);font-weight:1000;letter-spacing:.18em}.visual-clue{font-size:clamp(5rem,16vw,8.4rem);line-height:1.1;margin:14px 0 8px;filter:drop-shadow(0 16px 16px rgba(0,0,0,.25));animation:cluePop .45s cubic-bezier(.2,1.5,.4,1)}@keyframes cluePop{from{transform:scale(.55) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}.challenge-card h2{font-size:clamp(1.55rem,4.5vw,2.25rem);line-height:1.1;margin:0 auto 24px;max-width:680px}.answers{display:grid;grid-template-columns:1fr 1fr;gap:13px}.answer-btn{min-height:70px;padding:12px 15px;border:2px solid #314b9b;border-radius:18px;background:linear-gradient(145deg,#182968,#111d4f);display:flex;align-items:center;gap:13px;text-align:left;font-weight:900;cursor:pointer;box-shadow:0 7px 0 #081239;transition:.15s}.answer-btn:hover{transform:translateY(-2px);border-color:var(--cyan)}.answer-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #081239}.answer-btn .letter{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;background:var(--choice);color:#fff;box-shadow:inset 0 -3px rgba(0,0,0,.2)}.answer-btn.correct{border-color:var(--green);background:linear-gradient(145deg,#145c43,#103c3b);box-shadow:0 7px 0 #087b43}.answer-btn.wrong{border-color:var(--red);background:linear-gradient(145deg,#672847,#421f42);box-shadow:0 7px 0 #872036}.answer-btn.dim{opacity:.42}.feedback{min-height:34px;margin-top:20px;font-weight:1000;font-size:1.05rem}.feedback.good{color:var(--green)}.feedback.bad{color:#ff8a9d}.result-screen{max-width:620px;padding-top:16px}.result-card{text-align:center;border:1px solid rgba(93,219,255,.32);border-radius:34px;padding:42px 46px;background:linear-gradient(150deg,rgba(29,47,132,.96),rgba(29,17,83,.97));box-shadow:var(--shadow);position:relative;overflow:hidden}.result-card:before{content:"";position:absolute;inset:-50%;background:conic-gradient(transparent,#14d9ff25,transparent,#ff32b725,transparent);animation:spin 12s linear infinite}.result-card>*{position:relative;z-index:1}.result-burst{font-size:6rem;filter:drop-shadow(0 15px 14px rgba(0,0,0,.35));animation:float 2.4s ease-in-out infinite}.result-card h2{font-size:3rem;line-height:1;margin:12px 0}.result-card p{color:#cbd8ff}.result-stars{font-size:2.6rem;letter-spacing:7px;margin:16px 0}.score-ring{width:144px;height:144px;border-radius:50%;margin:15px auto 22px;display:grid;place-content:center;background:radial-gradient(circle,#162462 56%,transparent 58%),conic-gradient(var(--cyan),var(--purple),var(--pink),var(--yellow),var(--cyan));box-shadow:0 0 35px #2bb8ff44}.score-ring strong{font-size:2rem}.score-ring span{font-size:.58rem;font-weight:1000;letter-spacing:.13em;color:var(--muted)}.reward-row{display:flex;gap:12px;justify-content:center;margin-bottom:26px}.reward-row span{padding:10px 14px;border-radius:13px;background:rgba(3,10,44,.5);border:1px solid var(--line);font-size:.72rem}.reward-row b{color:var(--yellow)}.result-card .primary-btn,.secondary-btn{width:100%;margin-top:8px}.secondary-btn{border:1px solid var(--line);border-radius:15px;padding:14px;background:rgba(9,18,56,.55);font-weight:900;cursor:pointer}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);z-index:50;padding:12px 18px;border-radius:14px;background:#0c1642;border:1px solid var(--line);box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}#confetti{position:fixed;inset:0;width:100%;height:100%;z-index:60;pointer-events:none}
@media(max-width:900px){.quiz-grid{grid-template-columns:repeat(3,1fr)}.hero-copy{padding:42px}.hero-panel{grid-template-columns:1fr .78fr}}
@media(max-width:680px){.topbar{width:calc(100% - 22px);min-height:72px}.brand-orb{width:44px;height:44px}.brand strong{font-size:1.12rem}.brand small{font-size:.58rem}.player-pill{padding:6px}.player-copy{display:none}.player-pill>strong{font-size:.75rem}.sound-controls{gap:4px}.icon-btn{width:39px;height:39px;border-radius:12px}.screen{width:calc(100% - 22px);margin-bottom:45px}.hero-panel{min-height:440px;grid-template-columns:1fr}.hero-copy{padding:30px 27px 24px;align-self:start}.hero-copy h1{font-size:2.7rem}.hero-copy p{font-size:.94rem}.hero-art{position:absolute;right:-24%;bottom:-16%;width:75%;height:73%;min-height:0;opacity:.72}.hero-art img{height:100%;mask-image:linear-gradient(90deg,transparent,#000 30%)}.primary-btn{position:relative;z-index:3}.mission-strip{grid-template-columns:auto 1fr auto;padding:14px}.mission-progress{grid-column:2/4;width:100%}.quiz-grid{grid-template-columns:1fr 1fr;gap:12px}.quiz-card{min-height:190px;padding:14px;border-radius:20px}.quiz-card .card-emoji{font-size:3.5rem;top:42px}.quiz-card h3{font-size:1.03rem}.challenge-card{min-height:calc(100vh - 160px);padding:26px 16px 22px;border-radius:26px;display:flex;flex-direction:column}.visual-clue{margin:8px 0}.challenge-card h2{margin-bottom:17px}.answers{grid-template-columns:1fr;gap:9px;margin-top:auto}.answer-btn{min-height:59px}.result-card{padding:34px 24px}.result-card h2{font-size:2.5rem}.result-burst{font-size:5rem}}
@media(max-width:390px){.brand>span:last-child{display:none}.quiz-grid{grid-template-columns:1fr}.quiz-card{min-height:170px}.hero-art{opacity:.52}.hero-copy h1{font-size:2.35rem}.section-heading{align-items:flex-start;flex-direction:column;gap:6px}}
.brand-logo{width:58px;height:58px;border-radius:50%;object-fit:cover;box-shadow:0 0 24px rgba(57,219,255,.55);flex:0 0 auto}
@media(max-width:680px){.brand-logo{width:46px;height:46px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}