:root{--violet:#7c4dff;--violet-dark:#6238d8;--violet-soft:#eee8ff;--green:#58cc02;--green-dark:#46a302;--blue:#1cb0f6;--blue-soft:#ddf4ff;--yellow:#ffc800;--orange:#ff9600;--red:#ff4b4b;--ink:#3c3c3c;--muted:#777;--line:#e5e5e5;--soft:#f7f7f7;--card:#fff;--shadow:0 4px 0 rgba(0,0,0,.08)}*{box-sizing:border-box}html{min-height:100%;background:#fff}body{margin:0;min-height:100%;color:var(--ink);font-family:Nunito,Arial,Helvetica,sans-serif;font-weight:700}button,input{font:inherit}button{cursor:pointer}.hidden{display:none!important}.app-shell{display:grid;grid-template-columns:248px minmax(520px,650px) 360px;max-width:1410px;margin:auto;min-height:100vh}.desktop-nav{border-right:2px solid var(--line);padding:20px 15px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px}.main-column{min-height:100vh}.right-column{padding:20px 18px}.content{padding:0 24px 92px}.mobile-topbar,.mobile-bottom-nav{display:none}.brand{border:0;background:transparent;display:flex;align-items:center;gap:9px;padding:4px 8px 22px;color:var(--violet)}.brand-bubble{width:42px;height:42px;display:grid;place-items:center;border-radius:15px;background:var(--violet);box-shadow:inset 0 -4px rgba(0,0,0,.12);overflow:hidden}.brand-bubble img{width:56px;height:56px;object-fit:cover}.brand-name{font-size:26px;line-height:1;font-weight:900;letter-spacing:-1.4px}.brand-name small{display:block;font-size:11px;letter-spacing:1.3px;color:#9c8acb;margin-top:3px}.nav-item{width:100%;display:flex;align-items:center;gap:14px;border:2px solid transparent;background:transparent;border-radius:14px;padding:11px 13px;color:var(--ink);font-size:14px;letter-spacing:.4px;font-weight:900;text-align:left}.nav-item:hover{background:var(--soft)}.nav-item.active{color:var(--violet-dark);background:var(--violet-soft);border-color:#d4c5ff}.nav-icon{min-width:27px;text-align:center;font-size:23px}.more{margin-top:auto}.stats-row{display:flex;justify-content:space-between;padding:0 7px;margin-bottom:18px}.stat{display:flex;gap:6px;align-items:center;color:var(--muted);font-size:15px}.stat-icon{font-size:20px}.stat.fire{color:var(--orange)}.stat.gem{color:var(--blue)}.stat.heart{color:#e34b73}.side-card,.panel-card{border:2px solid var(--line);border-radius:16px;padding:15px;background:#fff;margin-bottom:15px}.side-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.side-card h3{font-size:17px;margin:0 0 10px}.link-btn{border:0;background:transparent;color:var(--blue);font-size:12px;font-weight:900;letter-spacing:.4px;padding:0}.promo{display:grid;grid-template-columns:66px 1fr;align-items:center;gap:10px}.promo p{font-size:13px;line-height:1.35;color:var(--muted);margin:0}.mascot-frame{display:grid;place-items:center;overflow:hidden;border-radius:50%;background:linear-gradient(180deg,#f4efff,#e8f7ff);border:2px solid #d8c6ff}.mascot-frame img{width:120%;height:120%;object-fit:cover}.promo-mascot{width:62px;height:62px}.prompt-mascot{width:72px;height:72px}.profile-mascot{width:104px;height:104px;margin:0 auto 9px;border-width:4px}.room-mascot{position:absolute;width:145px;height:145px;left:50%;bottom:20px;transform:translateX(-50%);z-index:4;background:transparent;border:0;overflow:visible}.room-mascot img{width:100%;height:100%;object-fit:contain}.equipped-accessory{position:absolute;left:50%;top:-13px;transform:translateX(-50%);font-size:40px;z-index:6}.unit-header{position:sticky;top:0;z-index:5;color:#fff;background:var(--violet);padding:18px 21px 16px;border-radius:0 0 14px 14px;box-shadow:inset 0 -4px rgba(0,0,0,.12)}.unit-kicker{font-size:13px;letter-spacing:1px;opacity:.85}.unit-title-row{display:flex;justify-content:space-between;align-items:center;gap:10px}.unit-title{font-size:23px;line-height:1.15;margin:2px 0 0}.guide-btn{border:2px solid rgba(255,255,255,.7);border-radius:12px;padding:8px 10px;background:transparent;color:#fff;font-weight:900;font-size:12px}.path-area{position:relative;min-height:620px;padding:27px 0;overflow:hidden}.path-area:before{content:"";position:absolute;inset:28px 20% 0;opacity:.35;background-image:radial-gradient(#ddd 1px,transparent 1px);background-size:16px 16px;mask-image:linear-gradient(to bottom,transparent,black 8%,black 92%,transparent)}.section-divider{display:flex;align-items:center;gap:10px;margin:21px 0 10px;color:#aaa;font-size:13px;letter-spacing:.6px}.section-divider:before,.section-divider:after{content:"";height:2px;background:var(--line);flex:1}.skill-row{position:relative;display:flex;justify-content:center;align-items:center;min-height:112px}.offset-left{transform:translateX(-102px)}.offset-right{transform:translateX(102px)}.skill-node-wrap{display:flex;align-items:center;flex-direction:column;position:relative}.skill-node{position:relative;width:76px;height:70px;border:0;border-radius:50%;background:#e5e5e5;box-shadow:0 8px 0 #cfcfcf;color:#aaa;font-size:30px;display:grid;place-items:center;transition:.14s}.skill-node.available{background:var(--violet);box-shadow:0 8px 0 var(--violet-dark);color:#fff}.skill-node.completed{background:var(--yellow);box-shadow:0 8px 0 #d8a900;color:#fff}.skill-node:not(:disabled):hover{transform:translateY(-3px)}.skill-node:disabled{cursor:not-allowed}.lesson-label{color:#aaa;font-size:12px;margin-top:13px;letter-spacing:.25px}.lesson-label.active{color:var(--violet-dark)}.crown{position:absolute;right:-8px;top:-9px;width:27px;height:27px;display:grid;place-items:center;border:3px solid var(--yellow);border-radius:50%;background:#fff;font-size:14px}.start-card{position:absolute;top:87px;z-index:7;width:270px;border:2px solid var(--line);border-radius:15px;padding:15px;background:#fff;box-shadow:0 7px 19px rgba(0,0,0,.13);text-align:left}.start-card:before{content:"";position:absolute;width:15px;height:15px;left:50%;top:-9px;transform:translateX(-50%) rotate(45deg);background:#fff;border-left:2px solid var(--line);border-top:2px solid var(--line)}.start-card h3{margin:0 0 2px}.start-card p{color:var(--muted);font-size:13px;line-height:1.35;margin:0 0 12px}.primary-btn,.secondary-btn{border:0;border-radius:13px;padding:13px 15px;width:100%;font-weight:900;letter-spacing:.55px}.primary-btn{color:#fff;background:var(--violet);box-shadow:0 4px 0 var(--violet-dark)}.primary-btn.green{background:var(--green);box-shadow:0 4px 0 var(--green-dark)}.primary-btn:disabled{cursor:not-allowed;color:#aaa;background:#e5e5e5;box-shadow:0 4px 0 #ccc}.secondary-btn{color:var(--violet-dark);background:#fff;border:2px solid var(--line);box-shadow:0 3px 0 var(--line)}.secondary-btn.selected{border-color:#c7b5ff;background:var(--violet-soft)}.danger-link{border:0;background:transparent;color:#aaa;font-size:12px;font-weight:900}.quest{display:grid;grid-template-columns:31px 1fr;align-items:center;gap:9px;margin:11px 0}.quest-icon{font-size:23px}.quest-title{font-size:12px;color:#555;margin-bottom:4px}.progress-track{height:12px;border-radius:999px;background:#e5e5e5;overflow:hidden}.progress-fill{height:100%;border-radius:999px;background:var(--yellow)}.progress-fill.green{background:var(--green)}.progress-fill.blue{background:var(--blue)}.quest-progress{color:#999;font-size:11px;margin-top:3px}.view-header{display:flex;justify-content:space-between;align-items:end;gap:12px;padding:29px 0 21px;border-bottom:2px solid var(--line);margin-bottom:20px}.view-header h1{font-size:29px;margin:0}.view-header p{font-size:14px;color:var(--muted);margin:4px 0 0}.cards-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.feature-card{display:flex;flex-direction:column;min-height:180px}.feature-icon{font-size:39px}.feature-card h3{margin:7px 0 4px}.feature-card p{font-size:13px;line-height:1.4;color:var(--muted);margin:0 0 12px}.feature-card .secondary-btn{margin-top:auto}.support-strip{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:17px}.toggle-chip{border:2px solid var(--line);background:#fff;border-radius:999px;padding:8px 11px;color:#777;font-size:12px;font-weight:900}.toggle-chip.active{color:var(--violet-dark);border-color:#c7b5ff;background:var(--violet-soft)}.room{position:relative;height:320px;border-radius:18px;overflow:hidden;border:2px solid #d8c6ff;background:linear-gradient(#f6edff 0 65%,#d8b895 65% 100%);margin-bottom:14px}.room.space{background:linear-gradient(#10143d 0 65%,#252e5b 65% 100%)}.room:after{content:"";position:absolute;left:0;right:0;bottom:35%;height:4px;background:rgba(100,72,44,.15)}.decoration{position:absolute;font-size:41px;z-index:2;filter:drop-shadow(0 4px 2px rgba(0,0,0,.13))}.inventory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.inventory-item{border:2px solid var(--line);border-radius:13px;background:#fff;padding:8px 5px;min-height:82px;display:grid;place-items:center;text-align:center;color:#777;font-size:11px;font-weight:900}.inventory-item span{display:block;font-size:28px}.inventory-item.equipped{border-color:#b99fff;background:var(--violet-soft);color:var(--violet-dark)}.inventory-item.locked{opacity:.45;filter:grayscale(1)}.inventory-section h3{font-size:17px;margin:18px 0 8px}.theme-row{display:flex;gap:8px;margin-bottom:10px}.theme-chip{border:2px solid var(--line);border-radius:12px;background:#fff;padding:8px 10px;font-size:12px;font-weight:900;color:#777}.theme-chip.active{border-color:#b99fff;color:var(--violet-dark);background:var(--violet-soft)}.profile-card{text-align:center;padding:22px}.profile-card h2{margin:0}.profile-card p{margin:3px 0 14px;color:#999;font-size:13px}.profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:17px}.profile-stat{border:2px solid var(--line);border-radius:13px;padding:12px 5px}.profile-stat strong{display:block;font-size:21px}.profile-stat span{font-size:11px;color:#999}.report-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}.report-row:last-child{border-bottom:0}.report-row h4{margin:0 0 2px}.report-row p{font-size:12px;color:#999;margin:0}.report-score{font-size:17px;color:var(--violet-dark)}.modal-backdrop{position:fixed;z-index:30;inset:0;background:rgba(255,255,255,.97);display:grid;place-items:center}.lesson-player{width:min(100%,900px);min-height:100vh;display:flex;flex-direction:column;padding:21px 27px 0}.lesson-top{width:100%;max-width:760px;margin:0 auto;display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:16px}.exit-btn{border:0;background:transparent;color:#aaa;font-size:28px}.lesson-progress{height:16px;border-radius:999px;background:#e5e5e5;overflow:hidden}.lesson-progress div{height:100%;border-radius:999px;background:var(--violet);transition:width .2s}.lesson-heart{color:#e34b73;white-space:nowrap}.question-wrap{flex:1;width:100%;max-width:680px;margin:0 auto;display:flex;flex-direction:column;justify-content:center;padding:26px 0 128px}.question-kicker{color:#999;font-size:13px;letter-spacing:.7px;margin-bottom:6px}.question-title{font-size:28px;line-height:1.25;margin:0 0 17px}.prompt-card{display:flex;align-items:center;gap:13px;padding:0 0 18px;border-bottom:2px solid var(--line);margin-bottom:15px}.speech{position:relative;border:2px solid var(--line);border-radius:14px;padding:12px 14px;background:#fff;font-size:15px}.speech:before{content:"";position:absolute;left:-8px;top:21px;width:14px;height:14px;background:#fff;border-left:2px solid var(--line);border-bottom:2px solid var(--line);transform:rotate(45deg)}.read-word{font-size:48px;text-align:center;font-weight:900;letter-spacing:.09em;padding:22px 10px;border:2px solid var(--line);border-radius:16px;background:#fff}.syllable-a{color:var(--blue)}.syllable-b{color:#ec5c85}.options{display:grid;gap:9px}.option{width:100%;display:flex;gap:10px;align-items:center;border:2px solid var(--line);border-radius:14px;background:#fff;padding:13px 15px;color:#555;text-align:left;box-shadow:0 2px 0 var(--line)}.option.selected{color:var(--violet-dark);border-color:#b99fff;background:var(--violet-soft);box-shadow:0 2px 0 #b99fff}.option.correct{color:#3b9701;border-color:#a5ed6e;background:#d7ffb8}.option.wrong{color:#d93636;border-color:#ffb2b2;background:#ffdfe0}.option-key{width:27px;height:27px;display:grid;place-items:center;border:2px solid var(--line);border-radius:8px;color:#aaa;background:#fff;font-size:12px}.self-check{display:grid;grid-template-columns:1fr 1fr;gap:10px}.lesson-bottom{position:fixed;left:0;right:0;bottom:0;min-height:102px;border-top:2px solid var(--line);background:#fff;display:flex;justify-content:center}.lesson-bottom-inner{width:min(100%,760px);padding:17px 0 19px;display:flex;justify-content:space-between;align-items:center;gap:18px}.lesson-bottom button{width:170px}.feedback{display:flex;gap:12px;align-items:center}.feedback-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;font-size:26px}.feedback.good .feedback-icon{color:var(--green-dark);background:#d7ffb8}.feedback.repeat .feedback-icon{color:var(--violet-dark);background:var(--violet-soft)}.feedback h3{margin:0}.feedback p{font-size:13px;color:#777;margin:2px 0 0}.finish{text-align:center;align-items:center}.finish-badge{width:120px;height:120px;display:grid;place-items:center;border-radius:50%;background:#f2eaff;margin-bottom:18px;font-size:70px;overflow:hidden;box-shadow:0 7px 0 #d6c5ff}.finish-badge img{width:135%;height:135%;object-fit:cover}.finish h1{margin:0 0 5px}.finish p{margin:0 0 16px;color:#777}.finish-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;margin-bottom:13px}.finish-stat{border:2px solid var(--line);border-radius:13px;padding:11px 7px}.finish-stat strong{display:block;font-size:21px}.finish-stat span{font-size:11px;color:#999}.reward-drop{border:2px solid #ffe175;background:#fff7ce;border-radius:13px;padding:12px;margin-bottom:14px;width:100%}.reward-drop strong{display:block}.reward-drop span{font-size:27px}.onboarding{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(145deg,#f8f4ff,#fff)}.onboarding-card{width:min(100%,640px);padding:22px;border:2px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 10px 28px rgba(76,43,154,.12)}.onboarding-hero{display:flex;gap:15px;align-items:center}.onboarding-hero .mascot-frame{width:112px;height:112px;flex:none}.onboarding-card h1{margin:0 0 5px;color:var(--violet-dark)}.onboarding-card p{color:#777;line-height:1.45;font-size:14px}.form-label{display:block;font-size:13px;color:#777;margin:13px 0 5px}.text-input{width:100%;border:2px solid var(--line);border-radius:13px;padding:12px 13px;font-size:16px;outline:0}.text-input:focus{border-color:#b99fff}.grade-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:13px}.grade-chip{border:2px solid var(--line);border-radius:12px;background:#fff;color:#777;padding:9px 11px;font-weight:900}.grade-chip.active{border-color:#b99fff;background:var(--violet-soft);color:var(--violet-dark)}.check-word{font-size:49px;text-align:center;letter-spacing:.1em;padding:24px 0}.check-count{text-align:center;color:#999;font-size:13px}.check-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.check-result{text-align:center;padding:11px;border-radius:13px;background:var(--violet-soft);color:var(--violet-dark);margin-bottom:12px}.toast-stack{position:fixed;z-index:50;right:16px;bottom:16px;display:grid;gap:8px}.toast{border-radius:12px;padding:11px 14px;background:#3c3c3c;color:#fff;box-shadow:0 4px 13px rgba(0,0,0,.18);font-size:13px}.confetti{pointer-events:none;position:fixed;z-index:45;inset:0;overflow:hidden}.confetti span{position:absolute;top:-20px;font-size:22px;animation:fall 2s ease-in forwards}.confetti span:nth-child(1){left:12%}.confetti span:nth-child(2){left:26%;animation-delay:.2s}.confetti span:nth-child(3){left:39%;animation-delay:.1s}.confetti span:nth-child(4){left:52%;animation-delay:.32s}.confetti span:nth-child(5){left:66%;animation-delay:.16s}.confetti span:nth-child(6){left:78%;animation-delay:.26s}.confetti span:nth-child(7){left:89%;animation-delay:.07s}@keyframes fall{to{transform:translateY(106vh) rotate(420deg);opacity:.15}}@media(max-width:1160px){.app-shell{grid-template-columns:225px minmax(520px,650px);max-width:900px}.right-column{display:none}.desktop-nav{padding-inline:11px}}@media(max-width:760px){body{padding-bottom:64px}.app-shell{display:block}.desktop-nav{display:none}.mobile-topbar{position:sticky;top:0;z-index:9;display:flex;justify-content:space-between;align-items:center;min-height:58px;border-bottom:2px solid var(--line);padding:9px 13px;background:#fff}.mobile-brand{border:0;background:transparent;padding:0}.mobile-brand .brand-bubble{width:38px;height:38px}.mobile-stats{display:flex;gap:9px}.mobile-stats .stat{font-size:12px}.mobile-stats .stat-icon{font-size:16px}.content{padding:0 13px 82px}.unit-header{margin-inline:-13px;border-radius:0 0 14px 14px;padding:15px}.unit-title{font-size:19px}.guide-btn{font-size:10px;padding:7px 8px}.offset-left{transform:translateX(-70px)}.offset-right{transform:translateX(70px)}.skill-node{width:70px;height:64px;font-size:28px}.mobile-bottom-nav{display:flex;justify-content:space-around;position:fixed;z-index:20;left:0;right:0;bottom:0;border-top:2px solid var(--line);background:#fff;padding:5px 3px 6px}.mobile-nav-item{display:grid;gap:2px;place-items:center;border:0;background:transparent;color:#aaa;font-size:9px;font-weight:900;min-width:49px}.mobile-nav-item span:first-child{font-size:21px}.mobile-nav-item.active{color:var(--violet-dark)}.cards-grid{grid-template-columns:1fr}.view-header{padding-top:22px}.view-header h1{font-size:25px}.inventory-grid{grid-template-columns:repeat(3,1fr)}.room{height:270px}.lesson-player{padding:16px 14px 0}.lesson-top{gap:10px}.question-wrap{padding:20px 0 120px}.question-title{font-size:23px}.read-word{font-size:38px}.lesson-bottom-inner{padding:14px 14px 16px}.lesson-bottom button{width:135px;padding-inline:8px}.feedback-icon{display:none}.feedback p{max-width:180px}.onboarding-card{padding:17px}.onboarding-hero .mascot-frame{width:90px;height:90px}.onboarding-hero h1{font-size:26px}}
/* intro landing */
.intro-landing{background:linear-gradient(145deg,#f4efff,#e8f7ff)}
.intro-card{padding:28px 22px}
.intro-mascot-wrap{display:flex;gap:12px;align-items:flex-start;margin-bottom:18px}
.intro-mascot{width:88px;height:88px;flex:none}
.intro-speech{background:var(--violet-soft);border:2px solid #d4c5ff;border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.4;color:var(--violet-dark)}
.intro-headline{font-size:30px;line-height:1.1;color:var(--violet-dark);margin:0 0 8px}
.intro-sub{font-size:14px;color:#555;line-height:1.5;margin:0 0 16px}
.intro-benefits{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:9px}
.intro-benefits li{display:grid;grid-template-columns:20px 1fr;gap:8px;font-size:13px;color:var(--ink)}
.intro-benefits li span:first-child{color:var(--green-dark);font-weight:900}
.intro-cta{margin-bottom:10px}
.intro-b2b-btn{margin-bottom:16px}
.intro-trust{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;font-size:11px;color:#999;letter-spacing:.4px}
/* paywall teaser */
.paywall-teaser{border:2px solid #d4c5ff;border-radius:16px;background:var(--violet-soft);padding:16px;margin-bottom:14px;text-align:center}
.paywall-teaser h3{margin:0 0 6px;font-size:16px;color:var(--violet-dark)}
.paywall-teaser p{font-size:13px;color:#555;margin:0 0 12px;line-height:1.4}
/* free vs premium comparison */
.free-vs-premium{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-bottom:20px;border:2px solid var(--line);border-radius:16px;overflow:hidden}
.fvp-col{padding:14px}
.fvp-free{background:#fafafa}
.fvp-premium{background:var(--violet-soft)}
.fvp-col h4{margin:0 0 10px;font-size:14px;color:var(--ink)}
.fvp-col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.fvp-col ul li{font-size:12px;color:#555}
.fvp-col ul li.no{color:#bbb}
/* pricing */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.price-card{border:2px solid var(--line);border-radius:16px;padding:18px;background:#fff;position:relative;display:flex;flex-direction:column;gap:8px}
.price-card.featured{border-color:#b99fff;background:var(--violet-soft)}
.price-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--violet);color:#fff;font-size:11px;letter-spacing:.8px;border-radius:999px;padding:3px 10px}
.price-card h3{margin:0;font-size:16px}
.price-card p{margin:0;font-size:13px;color:#777;line-height:1.4}
.price{display:flex;align-items:baseline;gap:6px}
.price strong{font-size:26px;color:var(--ink)}
.price span{font-size:13px;color:#999}
.price-features{display:flex;flex-direction:column;gap:5px;flex:1}
.price-features span{font-size:12px;color:#555}
.checkout-status{background:#d7ffb8;border:2px solid #a5ed6e;border-radius:13px;padding:12px;margin-bottom:14px;color:#3b9701;font-size:14px}
.plan-pill{border:2px solid #b99fff;border-radius:999px;padding:3px 10px;font-size:12px;color:var(--violet-dark);background:var(--violet-soft)}
/* shop trust */
.shop-trust{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
.shop-trust strong{display:block;margin-bottom:4px}
.shop-trust p{font-size:12px;color:#777;margin:0;line-height:1.4}
/* campus testimonial */
.campus-testimonial{background:var(--violet-soft);border-left:4px solid var(--violet);border-radius:0 12px 12px 0;padding:14px 16px;margin-bottom:20px}
.campus-quote{font-size:14px;color:var(--ink);line-height:1.5;margin-bottom:6px}
.campus-quote-author{font-size:12px;color:#888}
/* campus contact */
.campus-contact-bar{text-align:center;padding:16px;color:#777;font-size:13px;margin-top:8px}
.campus-contact-link,.campus-contact-bar a{color:var(--violet-dark);font-weight:900}
/* loading state */
.campus-loading{text-align:center;padding:24px;color:#999;font-size:14px}
/* premium strip (right column) */
.premium-strip{border:2px solid #d4c5ff;border-radius:16px;padding:14px;background:var(--violet-soft);margin-top:12px}
.premium-strip h3{margin:0 0 6px;font-size:15px;color:var(--violet-dark)}
.premium-strip p{font-size:12px;color:#666;margin:0 0 8px;line-height:1.4}
@media(max-width:900px){.free-vs-premium{grid-template-columns:1fr}.shop-trust{grid-template-columns:1fr}.pricing-grid{grid-template-columns:1fr}}
@media(max-width:760px){.intro-headline{font-size:26px}.price-card.featured{order:-1}}
/* ===== Game hub home ===== */
.home{display:flex;flex-direction:column;gap:16px;padding-top:18px}
.home-hero{position:relative;border-radius:22px;padding:20px 18px 18px;background:linear-gradient(150deg,#7c4dff,#1cb0f6);color:#fff;box-shadow:0 8px 0 rgba(76,43,154,.25);overflow:hidden}
.home-greeting{display:flex;flex-direction:column;gap:3px;max-width:62%}
.home-hello{font-size:21px;font-weight:900;line-height:1.1}
.home-sub{font-size:13px;opacity:.92}
.home-mascot{position:absolute;right:14px;top:12px;width:96px;height:96px;border-width:3px;background:rgba(255,255,255,.18)}
.home-level{margin-top:16px;display:flex;flex-direction:column;gap:6px}
.home-level-badge{font-size:14px;font-weight:900}
.home-xpbar{height:14px;border-radius:999px;background:rgba(255,255,255,.3);overflow:hidden}
.home-xpfill{height:100%;border-radius:999px;background:var(--yellow);transition:width .35s}
.home-xptext{font-size:11px;opacity:.92}
.home-streak{font-size:12px;font-weight:900;color:#ffe175;margin-top:3px}
.home-gift{display:flex;align-items:center;gap:12px;width:100%;border:0;text-align:left;border-radius:18px;padding:14px 16px;background:linear-gradient(135deg,#ffc800,#ff9600);color:#5a3a00;box-shadow:0 5px 0 #d8820a;transition:.12s}
.home-gift:active{transform:translateY(2px);box-shadow:0 3px 0 #d8820a}
.home-gift.claimed{background:#f1f5e8;color:#7a8a5f;box-shadow:0 3px 0 #dde3d0;cursor:default}
.home-gift-icon{font-size:32px}
.home-gift-text{display:flex;flex-direction:column;flex:1;font-size:12px;line-height:1.35}
.home-gift-text strong{font-size:15px}
.home-gift-go{font-size:13px;font-weight:900;background:rgba(255,255,255,.55);border-radius:999px;padding:7px 13px}
.home-cta{font-size:17px;padding:17px 15px;box-shadow:0 5px 0 var(--green-dark);background:var(--green)}
.home-cta:active{transform:translateY(2px);box-shadow:0 3px 0 var(--green-dark)}
.home-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.home-tile{display:flex;flex-direction:column;align-items:center;gap:6px;border:2px solid var(--line);border-radius:16px;background:#fff;padding:13px 6px;font-size:11px;font-weight:900;color:var(--ink);box-shadow:0 3px 0 var(--line);transition:.12s}
.home-tile:hover{border-color:#c7b5ff;background:var(--violet-soft)}
.home-tile:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.home-tile-icon{font-size:27px}
.home-goal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.home-goal-head h3{margin:0;font-size:16px}
.home-goal-count{font-weight:900;color:var(--green-dark)}
.home-goal-text{font-size:12px;color:#777;margin:9px 0 0}
.home-cards-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.home-chest,.home-reward{text-align:center;padding:16px 12px}
.home-chest-icon,.home-reward-icon{font-size:34px;display:block;margin-bottom:4px}
.home-chest strong,.home-reward strong{display:block;font-size:14px;margin-bottom:3px}
.home-chest p,.home-reward p{font-size:12px;color:#777;margin:0 0 9px;min-height:30px}
/* ===== World map ===== */
.worlds-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.world-tile{display:flex;flex-direction:column;align-items:flex-start;gap:5px;border:3px solid var(--world-color,#7c4dff);border-radius:20px;background:#fff;padding:16px 14px;text-align:left;box-shadow:0 6px 0 color-mix(in srgb,var(--world-color,#7c4dff) 35%,#000);transition:.12s}
.world-tile:active{transform:translateY(3px);box-shadow:0 3px 0 color-mix(in srgb,var(--world-color,#7c4dff) 35%,#000)}
.world-tile.locked{border-color:var(--line);box-shadow:0 6px 0 #ccc;opacity:.7;filter:grayscale(.4)}
.world-emoji{font-size:40px}
.world-title{font-size:16px;font-weight:900;color:var(--ink)}
.world-blurb{font-size:11px;color:#777;line-height:1.3;min-height:28px}
.world-bar{width:100%;height:9px;border-radius:999px;background:#eee;overflow:hidden;margin-top:4px}
.world-bar-fill{display:block;height:100%;border-radius:999px;background:var(--world-color,#7c4dff)}
.world-count{font-size:11px;font-weight:900;color:var(--world-color,#7c4dff)}
.world-back{width:auto;padding:9px 14px;box-shadow:0 3px 0 var(--line)}
/* level nodes */
.levels-row{display:flex;justify-content:center;flex-wrap:wrap;gap:20px;padding:24px 0}
.level-node-wrap{display:flex;flex-direction:column;align-items:center;gap:7px}
.level-node{width:78px;height:74px;border:0;border-radius:50%;display:grid;place-items:center;font-size:28px;font-weight:900;color:#fff;background:#e5e5e5;box-shadow:0 8px 0 #cfcfcf;transition:.12s}
.level-node.open{background:var(--world-color,#7c4dff);box-shadow:0 8px 0 color-mix(in srgb,var(--world-color,#7c4dff) 40%,#000)}
.level-node.done{background:var(--yellow);box-shadow:0 8px 0 #d8a900}
.level-node.perfect{background:var(--green);box-shadow:0 8px 0 var(--green-dark)}
.level-node.locked{color:#aaa;cursor:not-allowed}
.level-node:not(:disabled):hover{transform:translateY(-3px)}
.level-node:not(:disabled):active{transform:translateY(3px);box-shadow:0 5px 0 #bbb}
.level-stars{font-size:13px;letter-spacing:1px;min-height:16px}
.world-info h3{margin-top:0}.world-info p{font-size:13px;color:#777;line-height:1.5;margin:0}
/* ===== New exercise UI ===== */
.image-prompt{font-size:96px;text-align:center;padding:14px 0 18px}
.rhyme-base{font-size:40px}
.sentence-word{font-size:26px;letter-spacing:.02em;margin-bottom:14px}
.syllable-target{font-size:80px;text-align:center;padding:6px 0 12px}
.syllable-build{min-height:64px;display:grid;place-items:center;border:2px dashed var(--line);border-radius:16px;margin-bottom:16px;background:var(--soft)}
.syllable-built{font-size:38px;font-weight:900;letter-spacing:.06em;color:var(--violet-dark)}
.syllable-empty{font-size:14px;color:#aaa}
.syllable-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:10px}
.syllable-chip{border:2px solid #c7b5ff;border-radius:14px;background:#fff;color:var(--violet-dark);font-size:26px;font-weight:900;padding:12px 20px;box-shadow:0 4px 0 #c7b5ff;transition:.1s}
.syllable-chip:active{transform:translateY(2px);box-shadow:0 2px 0 #c7b5ff}
.syllable-chip.used{opacity:.35;box-shadow:0 2px 0 #ddd;border-color:#ddd;color:#aaa}
.syllable-reset{display:block;margin:0 auto;color:var(--muted)}
/* ===== Reward drops on finish ===== */
.levelup-drop,.chest-drop{border-radius:13px;padding:12px;margin-bottom:12px;width:100%;text-align:center}
.levelup-drop{border:2px solid #ffe175;background:#fff7ce}
.chest-drop{border:2px solid #c7b5ff;background:var(--violet-soft)}
.levelup-drop span,.chest-drop span{font-size:30px;display:block}
.levelup-drop strong,.chest-drop strong{display:block;margin:2px 0}
/* ===== Parent area ===== */
.parent-gate{text-align:center;padding:24px 18px;max-width:420px;margin:0 auto}
.parent-gate-mascot{width:84px;height:84px;margin:0 auto 12px}
.parent-gate-q{font-size:30px;color:var(--violet-dark);margin:0 0 14px}
.parent-gate .text-input{text-align:center;font-size:22px;margin-bottom:12px}
.parent-gate-hint{font-size:12px;color:#999;margin:12px 0 0}
.parent-stats{margin-bottom:16px}
.parent-links{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.parent-links .secondary-btn{width:100%}
.parent-disclaimer{font-size:12px;color:#999;text-align:center;line-height:1.5;margin:6px 0 0}
/* ===== Quiet mode: calm everything down ===== */
body.quiet-mode .confetti{display:none}
body.quiet-mode *{animation:none!important;transition:none!important}
body.quiet-mode .home-hero{background:#6a52c9}
@media(max-width:760px){.home-tiles{grid-template-columns:repeat(2,1fr)}.worlds-grid{grid-template-columns:1fr}.home-mascot{width:78px;height:78px}.home-greeting{max-width:58%}.image-prompt{font-size:78px}.level-node{width:68px;height:64px;font-size:24px}}
/* ===== Multi-child profiles ===== */
.profile-count{font-size:12px;color:#999;font-weight:900}
.profiles-hint{font-size:12px;color:#777;line-height:1.45;margin:0 0 12px}
.profiles-list{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.profile-row{display:flex;align-items:center;gap:11px;border:2px solid var(--line);border-radius:14px;padding:10px 12px;background:#fff}
.profile-row.active{border-color:#b99fff;background:var(--violet-soft)}
.profile-row-mascot{width:42px;height:42px;flex:none}
.profile-row-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.profile-row-info strong{font-size:14px}
.profile-row-info span{font-size:11px;color:#777}
.profile-row-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.profile-active-badge{font-size:11px;font-weight:900;color:var(--violet-dark);background:#fff;border:2px solid #c7b5ff;border-radius:999px;padding:4px 9px}
.profile-mini{width:auto;padding:7px 11px;font-size:12px;box-shadow:0 2px 0 var(--line)}
.profile-remove{border:0;background:transparent;color:#c9b8b8;font-size:16px;font-weight:900;padding:4px 6px}
.profile-remove:hover{color:var(--red)}
.profile-qr{text-align:center;padding:14px;border:2px dashed #c7b5ff;border-radius:14px;margin-bottom:12px;background:var(--violet-soft)}
.profile-qr img{border-radius:10px;background:#fff;padding:8px}
.profile-qr p{font-size:12px;color:#666;margin:8px 0 0}
.profile-qr-link{word-break:break-all;font-size:12px;color:var(--violet-dark);background:#fff;border-radius:8px;padding:10px;font-weight:900;-webkit-user-select:all;user-select:all}
.profile-add{border-top:2px dashed var(--line);padding-top:13px}
.profile-add .grade-row{margin:10px 0 11px}
.profile-add .grade-chip{padding:7px 10px;font-size:12px}
/* ===== Consent (privacy-first analytics) ===== */
.consent-card{border-color:#c7b5ff;background:var(--violet-soft)}
.consent-card p{font-size:13px;color:#555;line-height:1.45;margin:0 0 12px}
.consent-actions{display:flex;gap:10px}
.consent-actions .primary-btn,.consent-actions .secondary-btn{width:auto;flex:1}
/* ===== Feedback juice (disabled in quiet mode by the global rule) ===== */
@keyframes lh-pop{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes lh-correct-pulse{0%{box-shadow:0 0 0 0 rgba(88,204,2,.5)}100%{box-shadow:0 0 0 14px rgba(88,204,2,0)}}
.feedback{animation:lh-pop .25s ease both}
.option.correct{animation:lh-correct-pulse .6s ease-out 1}
.syllable-built{animation:lh-pop .2s ease both}
.home-gift:not(.claimed){animation:lh-pop .3s ease both}
.levelup-drop,.chest-drop,.reward-drop{animation:lh-pop .35s ease both}