/* NOLIQO V3 / Aurora — premium dark language learning experience. */
:root{
 --paper:#0c1923; --ink:#eefaf3; --text:#ebf8f2; --muted:#a9c0bf; --line:#284850;
 --accent:#c4ff75; --accent-strong:#a2ed55; --soft:#19323c; --violet:#b0a4ff;
 --shadow:0 18px 45px rgba(0,0,0,.2);
 color:#edf9f2;background:#07151e;
}
*{scrollbar-color:#36545d #0c1923}
body{background:radial-gradient(ellipse at 50% 23%,#164a42 0,#071a26 48%,#06131b 100%);color:var(--text)}
.app-frame{background:#0c1923;box-shadow:0 20px 100px #020c14a6;border:1px solid #365b5b;border-top:0;border-bottom:0}
.desktop-context{top:25%;color:#edfff1}.context-label{color:#bdfc83}.context-title{color:#f1fff5}.context-line{background:linear-gradient(90deg,#befd73,#47caba)}.context-foot{color:#a3c9bd}
.page{padding:0 19px 29px;color:#ecf7f4;min-width:0}.page-title{color:#f4fff7;font-size:27px;letter-spacing:-.9px}.page-sub{color:#a3bfbe;font-size:12px}.section-title{color:#f1fff7;font-size:20px}.eyebrow{color:#a8dbc5}
.topbar{background:linear-gradient(180deg,#0c1923 60%,#0c1923f1);z-index:5;position:relative;height:75px;border-bottom:1px solid #19323e}
.wordmark{color:#f5fff6;letter-spacing:-.8px;font-size:21px}.logo-box.n-mark{background:#eaffdb;color:#122d31;box-shadow:0 5px 18px #b5ee7942}.n-dot{color:#fa987a}
.pill{background:#1a303b;border-color:#2b4850;color:#f2d6a2;font-size:11px}.xp-pill{color:#c7ff86!important;background:#1c403e}.avatar{border-color:#284c43;background:#bdfa8d;color:#0d3335}
.hello-row{margin-top:14px;margin-bottom:16px}.hello-row .eyebrow{color:#cadbcf}.hello-date{color:#a7c7b5}
.hero.hero-noli{min-height:332px;background:linear-gradient(125deg,#0c2930 0%,#114e49 65%,#22756a 100%);border:1px solid #3a8172;box-shadow:0 20px 40px #04130f90,inset 0 1px 1px #b1e9c528;border-radius:28px}
.hero-noli .eyebrow{color:#c0e4ca;font-size:10px;letter-spacing:1.4px}
.hero-noli .hero-title{font-size:29px;line-height:1.16;max-width:250px;color:#fafff5}
.hero-noli .hero-title em{color:#c6ff78;display:inline-block}
.hero-noli .hero-copy{color:#cce1d7;font-size:12px;max-width:238px;min-height:42px}
.hero-noli .hero-cta{background:linear-gradient(125deg,#cfff89,#a5ed4f);box-shadow:0 8px 19px #97ea4652;color:#112c26;min-height:49px;font-size:11px}
.hero-level{background:#153d40bd;color:#dafce8;border:1px solid #9deac253;bottom:17px;right:10px;font-size:9px}
.hero-spark{position:absolute;right:31px;top:22px;color:#d5ffb7;opacity:.8;font-size:23px}
.noli-hero{right:-21px;width:186px;height:270px;bottom:19px;filter:drop-shadow(0 17px 18px #0424248c)}
.noli-greeting-bubble{background:#173638;border-color:#305d55;color:#cbe9d9}.noli-greeting-bubble b{color:#b9fb90}
.home-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:16px 0 4px}
.home-stats span{background:#173039;color:#accbc1;display:flex;flex-direction:column;text-align:center;align-items:center;justify-content:center;gap:5px;border:1px solid #294b4d;border-radius:15px;font-size:9px;min-height:67px;padding:9px 4px}
.home-stats b{color:#f3fff2;font-size:14px;font-weight:850;white-space:nowrap}
.mini-tag{background:#1c4034;color:#d1ffae}.section-h .inline-link{color:#b5f7af}
.panel{background:#172d37;border:1px solid #30515b;box-shadow:0 7px 30px #020c1240;color:#f2fff5}
.panel.mission-panel{background:#f7f5e9;border:none;color:#19332e;border-radius:23px;padding:17px}
.mission-top{color:#1e443a}.mission-top span:last-child{color:#1d7c56}.mission-row{color:#223c39;border-top-color:#e5e9dc}
.mission-row strong{color:#1c3738}.mission-row small{color:#647c72}.mission-count{color:#56806c}
.mission-row.done .mission-check{background:#97e66a;border-color:#97e66a;color:#164e35}
.bar{background:#2b454d}.bar>span{background:linear-gradient(90deg,#4acda3,#bbfa70)}
.mission-panel .bar{background:#dce8d5}
.bright-tiles .tile{background:linear-gradient(160deg,#192f39,#152b35);border:1px solid #2e4e54;box-shadow:0 9px 25px #01090d40;padding:16px;min-height:139px}
.bright-tiles .tile:nth-child(1){background:linear-gradient(155deg,#23334c,#1e2e46)}
.bright-tiles .tile:nth-child(2){background:linear-gradient(155deg,#173e3d,#1d333d)}
.bright-tiles .tile:nth-child(3){background:linear-gradient(155deg,#453c43,#282f42)}
.bright-tiles .tile:nth-child(4){background:linear-gradient(155deg,#203a4c,#1b3344)}
.tile-name{color:#f3fff5;font-size:14px}.tile-desc{color:#b0c6c8;font-size:11px}
.tile-icon{background:#284941;color:#c8ff83}.tile-icon.violet{background:#434364;color:#ded1ff}.tile-icon.blue{background:#295567;color:#b0f5ff}.tile-icon.peach{background:#604749;color:#ffd8c1}
.next-lesson{background:#173a37;border:1px solid #3e7766;color:#e0ffcf}.next-lesson-icon{background:#baff7b;color:#173733}.next-lesson small,.mistake-invite small{color:#aac8bf}.mistake-invite{background:#3a302c;border-color:#665342;color:#ffe9db}
/* Immersive chapter map — lightweight SVG illustrations rather than live WebGL. */
.roadmap-intro{border-radius:25px;padding:23px 18px 21px;border:1px solid #367a6b;background:radial-gradient(circle at 90% 10%,#307a6d55,transparent 50%),linear-gradient(125deg,#12383d,#103143);margin:18px 0 16px;box-shadow:0 10px 33px #04121c55}
.roadmap-intro .eyebrow{letter-spacing:2px;color:#befb98}.roadmap-intro-row{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-top:10px}
.roadmap-intro h2{font-size:29px;line-height:1.1;margin:0 0 12px;letter-spacing:-1px}.roadmap-intro h2 em{color:#caff83;font-style:normal}
.roadmap-intro p{font-size:11px;color:#b9d5cb;line-height:1.6;max-width:213px;margin:0}
.roadmap-ring{width:95px;height:95px;flex:0 0 95px;border-radius:50%;background:conic-gradient(#b9fb78 var(--percent),#3e6264 0);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;isolation:isolate;box-shadow:0 0 18px #a9f97024}
.roadmap-ring::before{content:"";position:absolute;inset:8px;border-radius:50%;background:#112e39;z-index:-1}.roadmap-ring span{color:#c8fc86;font-size:21px;font-weight:900}.roadmap-ring small{font-size:9px;color:#c5dfd4}
.filter-row .chip{background:#192e39;color:#bcd1ce;border:1px solid #38535a}.filter-row .chip.active{background:#baf77d;color:#122b2b;border-color:#baf77d}
.world-map{position:relative;display:grid;gap:20px;padding:0 1px 4px}
.world{position:relative;overflow:hidden;background:linear-gradient(165deg,#193842,#102731 75%);border:1px solid #2e5961;border-radius:27px;box-shadow:0 16px 28px #020c1480;padding:14px 14px 17px}
.world:nth-child(2n){background:linear-gradient(160deg,#193747,#172c43 76%)}
.world-active{border-color:#71cba6;box-shadow:0 0 0 1px #86d9982c,0 13px 37px #020c1499}
.world-heading{background:transparent;color:#c6e5da;display:flex;justify-content:space-between;align-items:center;width:100%;padding:3px 0;min-height:30px}
.world-index{font-size:10px;letter-spacing:1.7px;font-weight:850;color:#bcf7a5}.world-status{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:800;color:#b7c9c7}.world-status svg{width:14px;height:14px;transition:transform .2s}.world-active .world-status svg{transform:rotate(180deg)}
.world-art{height:168px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;margin:0 -5px;background:radial-gradient(ellipse at 50% 56%,#42bcb445,transparent 70%)}
.world-glow{position:absolute;inset:15px 26px;border-radius:50%;background:radial-gradient(ellipse,#6edfc128,transparent 65%);filter:blur(12px)}
.world-art img{position:relative;z-index:1;object-fit:contain;width:min(100%,340px);height:185px;filter:drop-shadow(0 17px 15px #021015aa);animation:worldFloat 7s ease-in-out infinite}
.world:nth-child(even) .world-art img{animation-delay:-2.5s}
.world-level{position:absolute;right:7px;top:5px;z-index:2;background:#0c2631d9;border:1px solid #3f7c76;border-radius:30px;font-size:10px;color:#c9ffd1;font-weight:800;padding:6px 9px}
.world-caption{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:-4px}.world-caption h2{font-size:20px;line-height:1.18;letter-spacing:-.5px;margin:2px 0 6px;color:#f4fff7}.world-caption p{font-size:11px;color:#b0cac7;margin:0;line-height:1.45}
.world-lesson-count{display:grid;place-items:center;flex:0 0 37px;width:37px;height:37px;border-radius:50%;background:#a9ef76;color:#102e31;font-size:11px;font-weight:900}
.world-primary{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;border-radius:13px;padding:13px 11px;background:#c1ff76;color:#112f29;font-size:13px;font-weight:900;min-height:45px}
.world-primary svg{width:18px;height:18px}
.world-lessons{display:grid;gap:7px;border-top:1px solid #32555d;margin-top:16px;padding-top:13px}
.world-lesson{border:1px solid #33505a;border-radius:13px;width:100%;display:flex;align-items:center;text-align:left;gap:10px;padding:10px;background:#193540;color:#ecfff7;min-height:59px}
.world-lesson .world-step{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:#27444a;color:#b1e5cb;flex:0 0 32px;font-size:11px;font-weight:900}
.world-lesson.done .world-step{background:#baff7a;color:#11322e}.world-lesson strong{font-size:12px;display:block;line-height:1.3}.world-lesson small{font-size:10px;display:block;color:#accac4;margin-top:3px}.world-lesson svg{width:16px;height:16px;color:#addfc8}
.map-outro{padding:17px 18px;color:#aacbc2;text-align:center;font-size:11px;line-height:1.5}
/* Test lobby and questions: bright primary action, calm dark surfaces. */
.challenge-hero{background:linear-gradient(125deg,#163f43,#1b6256);border-color:#387e73;box-shadow:0 10px 29px #02131a66;color:#effef2;min-height:230px}
.challenge-hero h2{color:#f6fff3}.challenge-hero p{color:#c5e6df}.challenge-hero .eyebrow{color:#bff7a9}.challenge-hero .btn{background:#c9ff76;color:#183225}.noli-challenge{filter:drop-shadow(0 10px 14px #0b3131aa)}
.mode,.topic-card,.setting-row,.level-tile,.lesson-card{border:1px solid #31515b;background:#172f3a;color:#effef4;box-shadow:0 4px 15px #010a1136}
.mode strong,.topic-card strong,.setting-row,.lesson-card strong{color:#f0fff4}.mode small,.topic-card small,.lesson-card small{color:#aac5c5}
.round-icon{background:#2c514f;color:#c7ffa4}.level-tile{background:#1a313d}.tile.level-tile .tile-name{color:#f2fff1}
.notice{background:#192e35;border:1px solid #315259;color:#b6d0cb}.hint{color:#a9c0c1}.page .level-badge{background:#2b4c46;color:#c0f6c7}
.search-wrapper{background:#192e36;border:1px solid #35545b;color:#e9fff2}.search-wrapper input{color:#e9fff2}.search-wrapper input::placeholder{color:#a6c6bf}
.category-chip{background:#1e3a44;color:#bbd8cd}.category-chip.active{background:#a9ed72;color:#122c27}.grammar-hero{background:#1c4547;border-color:#387c6f;color:#ebfff1}.grammar-hero strong{color:#f2fff6}.grammar-hero p{color:#bbd8cb}
.grammar-topic-icon{background:#294e46!important;color:#bdf7a4}.topic-card{border-radius:17px}
.no-results,.empty{background:#172f39;border:1px solid #30515a;color:#bed2d0}.no-results strong,.empty strong{color:#f2fff5}
.info-banner{background:#1b4040;color:#f0fff7}.info-banner p{color:#adcfbd}
.text-body,.story-text{color:#cfe4dc}.text-body strong{color:#ebfff1}.content-section h3{color:#ecfff1}
.quote,.book-quote{background:#18343f;color:#d3e8df;border-color:#79cb99}.wordrow{border-color:#315058}.wordrow strong{color:#edfef3}.wordrow small{color:#b4cec7}.small-btn{background:#254a46;color:#d4f6db;border:1px solid #467563}
.quiz-v2{padding-bottom:38px}.view-top{background:#0c1923}.question-title{color:#f1fff4;font-size:25px}.quiz-kicker>span:last-child{background:#1e4842;color:#c6ff96}.question-badge{color:#bfdbd5}.stepper{background:#2c444a}.stepper span{background:linear-gradient(90deg,#71d5ab,#bfff77)}
.choice{background:#172f3b;border:1.5px solid #335661;color:#f4fff6;min-height:70px;border-radius:17px}.choice-letter{background:#264650;color:#c0e3d9}
.choice.correct{background:#244f3c;border-color:#b4f67c;color:#edffe2}.choice.correct .choice-letter{background:#bbff8f;color:#193729}
.choice.wrong{background:#4c3236;border-color:#e89c8e;color:#ffe8db}.choice.wrong .choice-letter{background:#f2ad9a;color:#4e2928}
.feedback-noli{background:#193e38;border:1px solid #4e9276}.feedback-noli.wrong{background:#45342e;border-color:#9c7661}
.feedback-noli h3{color:#c8ff95}.feedback-noli.wrong h3{color:#ffcaaf}.feedback-noli p{color:#cbe0cf}.feedback-explanation{color:#cde6d6;border-color:#4b7465}.feedback-noli.wrong .feedback-explanation{border-color:#846459}
.result-v2 .result-title{color:#f4fff2}.result-v2 .result-sub{color:#bbd4cd}.result-art{background:radial-gradient(ellipse,#1d5c4c 8%,transparent 75%)}.result-spark{color:#baff70}.stat-box{background:#172f39;border:1px solid #33545b;color:#f3fff7}.stat-box strong{color:#f5fff5}.stat-box small{color:#b0c8cb}
/* Profile, streak and achievements */
.profile-v3.profile-cover{background:linear-gradient(130deg,#164d47,#183647 78%);border:1px solid #398773;box-shadow:0 14px 26px #0006;position:relative;overflow:hidden}
.profile-sheen{position:absolute;width:200px;height:200px;right:-90px;top:-85px;border:30px solid #beff7b14;border-radius:50%}.profile-main{position:relative;z-index:1}
.profile-pic{background:#24594e;border:2px solid #b6fd88}.profile-main h2{color:#fff}.profile-main .eyebrow{color:#b7fb98}.profile-level{color:#d0ede2}.profile-progress{color:#c5e4d6}
.week-strip{background:#172e39;border-color:#30515b}.week-day{color:#abc3c3}.week-day.active{background:#2b5a46;color:#caffb5}
.achievement{background:#1a2c39;border-color:#34505c;color:#b7cfc7}.achievement.unlocked{background:#223c44;border-color:#61856c;color:#f0fff3}.achievement strong{color:#f2fff5}.achievement small{color:#b1c9c5}
.achievement-icon{background:#2a494a}.achievement.unlocked .achievement-icon{background:#4c6343}.skillrow-top{color:#e4f2e9}.skillrow-top span:last-child{color:#b5f5bb}.skillrow-top small{color:#a5c2bb}
.setting-row{background:#192e39;color:#edfff5}.setting-row span{color:#aadba8}.panel .skillrow .bar{background:#2b4c49}
/* Welcome: the Noli image must remain in the viewport and never show a broken placeholder. */
.onboarding-v2{background:#0c1923;color:#f2fff5}.onboarding-v2 h1{color:#f5fff5}.onboarding-v2 h1 em{color:#c4ff79}.onboarding-v2>p,.onboarding-v2 p{color:#bbd4cc}
.onboard-visual{background:radial-gradient(circle at 50% 50%,#307c66 0,#16483f 55%,#112d38 100%);border:1px solid #377365}.onboard-glow{background:#91fb8f;opacity:.16}.onboard-sidekick{background:#1e4b41;color:#d9fbd0}
.selector{background:#172f3a;color:#e6fff4;border:1px solid #35535d}.selector.selected{background:#254e3c;border-color:#9df27a;color:#f4ffe6}.selector-mark{color:#d3ffab}
.boot{color:#c0d7cb}.boot h2{color:#f1fff3}.brand-mark{background:#c3ff82;color:#18372d}.locked-mascot{height:166px}
.btn{background:linear-gradient(120deg,#d8ff8b,#a9ef55);color:#163122;box-shadow:0 6px 18px #7fdf5f20}.btn.secondary{background:#19343e;border:1px solid #3d5b60;color:#e7fbea;box-shadow:none}.btn.ghost{background:#294753;color:#d5f6e3}.back-btn{background:#19323e;border:1px solid #345561;color:#e8fff5}
.bottom-nav{background:#0b1924f5;border-top-color:#2d4e53;box-shadow:0 -6px 24px #010b12a8}.nav-link{color:#9cbbbd}.nav-link.active{background:#24443f;color:#bfff79}.nav-link svg{stroke-width:2.1}
.toast{background:#22493d;color:#edfff4;border:1px solid #61977b}
/* Canvas-like miniapp root and high-density desktop presentation */
@keyframes worldFloat{0%,100%{transform:translateY(1px)}50%{transform:translateY(-7px)}}
@media(prefers-reduced-motion:reduce){.world-art img{animation:none}}
@media(max-width:380px){.world-art{height:151px}.world-art img{height:166px}.roadmap-intro h2{font-size:26px}.roadmap-ring{width:77px;height:77px;flex-basis:77px}.roadmap-ring::before{inset:7px}.world-caption h2{font-size:18px}.hero-noli .hero-title{font-size:26px}}
@media(max-width:340px){.noli-hero{width:138px;height:233px;right:-22px}.hero-copy-wrap{width:73%}.hero-noli .hero-copy{font-size:11px}.hero-level{font-size:8px}.world-caption p{font-size:10px}.home-stats b{font-size:12px}.page{padding-inline:13px}}
/* V3 finishing details: mascot framing and readable keyboard/mobile controls. */
.noli-hero{right:-3px;width:161px;height:250px;bottom:22px}
@media(max-width:380px){.noli-hero{right:-6px;width:148px;height:235px;bottom:17px}}
@media(max-width:340px){.noli-hero{right:-11px;width:131px;height:224px;bottom:16px}}
.topbar button,.bottom-nav button{min-height:42px}
.btn:focus-visible,.choice:focus-visible,.world-heading:focus-visible,.world-primary:focus-visible,.world-lesson:focus-visible{outline:3px solid #d3ff9e;outline-offset:2px}
.world-primary:not(:disabled):active,.choice:not(:disabled):active{transform:scale(.987)}