/* -- JVDS Site Nav -- */

:root{
  --echo:#3EC9A7;--pip:#F5A623;--lumo:#818CF8;--english:#F472B6;
  --stardust:#A78BFA;--strange:#34D399;--geo:#60A5FA;
  --beige:#F0EAD6;--rose:#BC4749;--teal:#70A3A7;--charcoal:#403B33;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif;background:#0d0d12;color:#eee;overflow-x:hidden;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;cursor:pointer;}
img{display:block;max-width:100%;}

/* --- HERO --- */
.hero{padding:72px 24px 56px;text-align:center;background:linear-gradient(160deg,#0d0d12 0%,#12101e 40%,#0e1a16 100%);position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% -10%,rgba(167,139,250,.2) 0%,transparent 55%),radial-gradient(ellipse at 20% 80%,rgba(62,201,167,.1) 0%,transparent 40%),radial-gradient(ellipse at 80% 60%,rgba(244,114,182,.06) 0%,transparent 35%);pointer-events:none;}
.hero-float{position:absolute;font-size:var(--sz,2rem);opacity:.12;pointer-events:none;animation:heroFloat var(--dur,7s) var(--delay,0s) ease-in-out infinite alternate;}
@keyframes heroFloat{from{transform:translateY(0) rotate(0deg);}to{transform:translateY(var(--ty,-16px)) rotate(var(--rot,8deg));}}
.hero-content{position:relative;z-index:1;max-width:680px;margin:0 auto;}
.hero-eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--stardust);margin-bottom:16px;display:inline-flex;align-items:center;gap:8px;}
.hero-eyebrow::before,.hero-eyebrow::after{content:'';flex:0 0 28px;height:1.5px;background:var(--stardust);opacity:.4;}
.hero h1{font-family:'Fredoka',cursive;font-size:clamp(2.4rem,6vw,4rem);font-weight:700;color:#fff;line-height:1.05;margin-bottom:16px;}
.hero h1 span{background:linear-gradient(135deg,var(--echo),var(--stardust));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hero-sub{font-size:clamp(.95rem,2vw,1.05rem);color:rgba(255,255,255,.55);max-width:520px;margin:0 auto 28px;line-height:1.7;}
.hero-stats{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:24px;}
.stat-pill{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:7px 18px;font-size:.82rem;font-weight:700;color:rgba(255,255,255,.7);}
.stat-pill span{color:#fff;}
.hero-pills{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
.hero-pill{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:6px 16px;font-size:.78rem;font-weight:600;color:rgba(255,255,255,.6);}
.hero-divider{width:60px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--echo),var(--stardust));margin:0 auto 48px;opacity:.5;}

/* --- CROSS-SECTION TABS --- */
.learn-tabs{display:flex;justify-content:center;gap:8px;padding:16px 24px;background:#13131e;border-bottom:1px solid rgba(255,255,255,.06);flex-wrap:wrap;}
.learn-tab{display:flex;align-items:center;gap:8px;padding:10px 20px;border-radius:12px;border:1.5px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);text-decoration:none;transition:background .15s,border-color .15s;}
.learn-tab:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15);}
.learn-tab.active{background:rgba(129,140,248,.1);border-color:rgba(129,140,248,.35);pointer-events:none;}
.learn-tab-emoji{font-size:1.2rem;}
.learn-tab-name{font-family:'Fredoka',cursive;font-weight:700;font-size:.88rem;color:#fff;}
.learn-tab-age{font-size:.7rem;font-weight:600;color:rgba(255,255,255,.4);background:rgba(255,255,255,.06);padding:2px 8px;border-radius:6px;}
.learn-tab.active .learn-tab-name{color:var(--stardust);}
.learn-tab.active .learn-tab-age{background:rgba(129,140,248,.15);color:var(--stardust);}
@media(max-width:520px){.learn-tab{padding:8px 14px;gap:6px;}.learn-tab-age{display:none;}}
.loop-picker{position:fixed;inset:0;z-index:600;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;}
.loop-picker-box{background:#1a1a24;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:24px 28px;text-align:center;min-width:220px;}
.loop-picker-label{font-family:'Fredoka',cursive;font-size:1rem;color:#fff;margin-bottom:14px;}
.loop-picker-row{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:16px;}
.loop-picker-btn{width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(255,255,255,.15);background:rgba(255,255,255,.07);color:#fff;font-size:1.2rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s;}
.loop-picker-btn:hover{background:rgba(255,255,255,.15);}
.loop-picker-num{font-family:'Fredoka',cursive;font-size:2.2rem;font-weight:700;color:#34D399;min-width:50px;}
.loop-picker-ok{padding:10px 28px;border:none;border-radius:10px;background:#34D399;font-family:'Fredoka',cursive;font-size:.95rem;font-weight:700;color:#0d0d12;cursor:pointer;transition:filter .12s;}
.loop-picker-ok:hover{filter:brightness(1.1);}

/* --- HOW IT WORKS --- */
.how-section{padding:48px 24px 56px;background:#13131e;border-bottom:1px solid rgba(255,255,255,.06);}
.how-inner{max-width:860px;margin:0 auto;}
.how-eyebrow{font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.3);text-align:center;margin-bottom:6px;}
.how-title{font-family:'Fredoka',cursive;font-size:clamp(1.4rem,3vw,1.9rem);font-weight:700;color:#fff;text-align:center;margin-bottom:36px;}
.how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;}
.how-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:28px 22px;text-align:center;transition:border-color .2s,transform .2s;}
.how-card:hover{border-color:rgba(255,255,255,.16);transform:translateY(-2px);}
.how-card-icon{font-size:2.4rem;margin-bottom:12px;}
.how-card-num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.08);font-size:.7rem;font-weight:800;color:rgba(255,255,255,.5);margin-bottom:10px;}
.how-card h3{font-family:'Fredoka',cursive;font-size:1.1rem;font-weight:700;color:#fff;margin-bottom:8px;}
.how-card p{font-size:.82rem;color:rgba(255,255,255,.45);line-height:1.6;}

/* --- CONTINUE PLAYING --- */
.continue-section{padding:0 24px 48px;max-width:1200px;margin:0 auto;}
.continue-card{display:flex;align-items:center;gap:20px;padding:20px 24px;background:linear-gradient(135deg,rgba(167,139,250,.08),rgba(62,201,167,.08));border:1px solid rgba(255,255,255,.1);border-radius:16px;cursor:pointer;transition:border-color .2s,transform .2s;}
.continue-card:hover{border-color:rgba(255,255,255,.2);transform:translateY(-2px);}
.continue-emoji{font-size:2.8rem;flex-shrink:0;}
.continue-body{flex:1;min-width:0;}
.continue-label{font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:4px;}
.continue-name{font-family:'Fredoka',cursive;font-size:1.3rem;color:#fff;margin-bottom:2px;}
.continue-subject{font-size:.78rem;font-weight:700;opacity:.6;}
.continue-progress{display:flex;align-items:center;gap:8px;margin-top:6px;}
.continue-bar{flex:1;height:5px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden;max-width:160px;}
.continue-bar-fill{height:100%;border-radius:3px;transition:width .4s;}
.continue-pct{font-size:.72rem;font-weight:700;color:rgba(255,255,255,.4);}
.continue-btn{padding:10px 20px;border:none;border-radius:10px;font-family:'Fredoka',cursive;font-size:.9rem;font-weight:700;color:#0d0d12;cursor:pointer;flex-shrink:0;transition:filter .15s;}
.continue-btn:hover{filter:brightness(1.12);}
.continue-hidden{display:none;}

/* --- CURRICULUM --- */
.curriculum-section{padding:48px 24px 0;max-width:1200px;margin:0 auto;}
.curriculum-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;}
.curriculum-item{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;transition:border-color .15s;}
.curriculum-item:hover{border-color:rgba(255,255,255,.14);}
.curriculum-emoji{font-size:1.4rem;flex-shrink:0;margin-top:1px;}
.curriculum-body h4{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px;}
.curriculum-body p{font-size:.8rem;color:rgba(255,255,255,.5);line-height:1.5;}

/* --- SUBJECT GRID --- */
.subjects-section{padding:48px 24px 72px;max-width:1200px;margin:0 auto;}
.tier-label{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:12px;padding-left:4px;display:flex;align-items:center;gap:8px;}
.tier-label::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.07);}
.tier-section{margin-bottom:40px;}

/* --- STICKER BOOK --- */
.lab-sticker-section{padding:0 24px 64px;max-width:1200px;margin:0 auto;}
.lab-sticker-head{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap;}
.lab-sticker-head h2{font-family:'Fredoka',cursive;font-size:clamp(1.3rem,3.5vw,1.8rem);font-weight:700;color:#fff;}
.lab-sticker-head p{font-size:.85rem;color:rgba(255,255,255,.4);}
.lab-sticker-grid{display:flex;gap:14px;flex-wrap:wrap;}
.lab-sticker-slot{width:80px;height:80px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:2.8rem;border:2.5px dashed rgba(255,255,255,.14);background:rgba(255,255,255,.03);transition:transform .15s;position:relative;}
.lab-sticker-slot.earned{border-style:solid;border-color:#FFD93D;background:rgba(255,217,61,.1);box-shadow:0 3px 0 rgba(255,217,61,.25);animation:pop .4s ease;}
.lab-sticker-slot.earned:hover{transform:scale(1.12) rotate(3deg);}
.lab-sticker-slot .lab-sticker-label{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:.6rem;font-weight:700;color:rgba(255,255,255,.4);white-space:nowrap;}
.lab-sticker-count{font-size:.85rem;font-weight:700;color:rgba(255,255,255,.4);margin-top:24px;}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
.section-label{font-size:.73rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:8px;}
.section-title{font-family:'Fredoka',cursive;font-size:clamp(1.5rem,3vw,2rem);font-weight:700;color:#fff;margin-bottom:6px;}
.section-sub{font-size:.9rem;color:rgba(255,255,255,.4);margin-bottom:32px;}
.subjects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}

.subject-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:18px;overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s;position:relative;}
.subject-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.4);border-color:rgba(255,255,255,.18);}
.card-stripe{height:4px;}
.card-inner{padding:20px;}
.card-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px;}
.card-icon-wrap{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;flex-shrink:0;}
.card-badges{display:flex;flex-direction:column;align-items:flex-end;gap:5px;}
.badge-type{font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid;}
.badge-age{font-size:.62rem;font-weight:700;color:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:2px 8px;}
.badge-done{font-size:.75rem;padding:3px 9px;border-radius:999px;border:1px solid rgba(52,211,153,.4);background:rgba(52,211,153,.1);color:#34D399;font-weight:700;}
.char-name{font-family:'Fredoka',cursive;font-size:1.15rem;color:#fff;margin-bottom:2px;}
.char-subject{font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;opacity:.6;margin-bottom:8px;}
.card-desc{font-size:.83rem;color:rgba(255,255,255,.5);line-height:1.55;margin-bottom:14px;}
.card-tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:14px;}
.meta-tag{background:rgba(255,255,255,.06);border-radius:6px;padding:3px 9px;font-size:.7rem;font-weight:600;color:rgba(255,255,255,.5);}
.card-cta{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.85rem;padding:10px 20px;border-radius:9px;border:none;color:#0d0d12;transition:filter .15s,transform .1s;width:100%;justify-content:center;}
.card-cta:hover{filter:brightness(1.12);transform:translateY(-1px);}

/* --- ECHO CARD, rehaul proof-of-concept --- */
.illustrated-card-scene{position:relative;height:120px;overflow:hidden;}
.illustrated-card-svg{width:100%;height:100%;display:block;}
.illustrated-card-badges{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;align-items:flex-end;gap:5px;}
.illustrated-card-inner{padding:16px 20px 20px;}
.echo-card{background:rgba(62,201,167,.04);border-color:rgba(62,201,167,.18);}
.echo-card:hover{border-color:rgba(62,201,167,.4);box-shadow:0 16px 40px rgba(62,201,167,.15);}
.pip-card{background:rgba(245,166,35,.04);border-color:rgba(245,166,35,.18);}
.pip-card:hover{border-color:rgba(245,166,35,.4);box-shadow:0 16px 40px rgba(245,166,35,.15);}
.lumo-card{background:rgba(129,140,248,.04);border-color:rgba(129,140,248,.18);}
.lumo-card:hover{border-color:rgba(129,140,248,.4);box-shadow:0 16px 40px rgba(129,140,248,.15);}
.english-card{background:rgba(244,114,182,.04);border-color:rgba(244,114,182,.18);}
.english-card:hover{border-color:rgba(244,114,182,.4);box-shadow:0 16px 40px rgba(244,114,182,.15);}
.stardust-card{background:rgba(167,139,250,.04);border-color:rgba(167,139,250,.18);}
.stardust-card:hover{border-color:rgba(167,139,250,.4);box-shadow:0 16px 40px rgba(167,139,250,.15);}
.strange-card{background:rgba(52,211,153,.04);border-color:rgba(52,211,153,.18);}
.strange-card:hover{border-color:rgba(52,211,153,.4);box-shadow:0 16px 40px rgba(52,211,153,.15);}
.geo-card{background:rgba(96,165,250,.04);border-color:rgba(96,165,250,.18);}
.geo-card:hover{border-color:rgba(96,165,250,.4);box-shadow:0 16px 40px rgba(96,165,250,.15);}
.times-card{background:rgba(255,154,60,.04);border-color:rgba(255,154,60,.18);}
.times-card:hover{border-color:rgba(255,154,60,.4);box-shadow:0 16px 40px rgba(255,154,60,.15);}
.history-card{background:rgba(212,160,23,.04);border-color:rgba(212,160,23,.18);}
.history-card:hover{border-color:rgba(212,160,23,.4);box-shadow:0 16px 40px rgba(212,160,23,.15);}
.music-card{background:rgba(236,72,153,.04);border-color:rgba(236,72,153,.18);}
.music-card:hover{border-color:rgba(236,72,153,.4);box-shadow:0 16px 40px rgba(236,72,153,.15);}
.logic-card{background:rgba(34,211,238,.04);border-color:rgba(34,211,238,.18);}
.logic-card:hover{border-color:rgba(34,211,238,.4);box-shadow:0 16px 40px rgba(34,211,238,.15);}
.art-card{background:rgba(249,115,22,.04);border-color:rgba(249,115,22,.18);}
.art-card:hover{border-color:rgba(249,115,22,.4);box-shadow:0 16px 40px rgba(249,115,22,.15);}
.health-card{background:rgba(74,222,128,.04);border-color:rgba(74,222,128,.18);}
.health-card:hover{border-color:rgba(74,222,128,.4);box-shadow:0 16px 40px rgba(74,222,128,.15);}
.inventors-card{background:rgba(251,191,36,.04);border-color:rgba(251,191,36,.18);}
.inventors-card:hover{border-color:rgba(251,191,36,.4);box-shadow:0 16px 40px rgba(251,191,36,.15);}
.space-card{background:rgba(192,132,252,.04);border-color:rgba(192,132,252,.18);}
.space-card:hover{border-color:rgba(192,132,252,.4);box-shadow:0 16px 40px rgba(192,132,252,.15);}
.nature-card{background:rgba(45,212,191,.04);border-color:rgba(45,212,191,.18);}
.nature-card:hover{border-color:rgba(45,212,191,.4);box-shadow:0 16px 40px rgba(45,212,191,.15);}

/* --- GAME MODAL --- */
.game-modal{position:fixed;inset:0;z-index:500;background:#0d0d12;display:none;flex-direction:column;overflow:hidden;}
.game-modal.open{display:flex;}
.game-modal-bar{height:4px;flex-shrink:0;}
.game-modal-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;background:#13131e;}
.gm-back{background:rgba(255,255,255,.07);border:none;border-radius:8px;padding:7px 14px;font-size:.82rem;font-weight:700;color:rgba(255,255,255,.7);transition:background .15s;}
.gm-back:hover{background:rgba(255,255,255,.13);color:#fff;}
.gm-title{font-family:'Fredoka',cursive;font-size:1.1rem;color:#fff;flex:1;}
.gm-score{font-size:.82rem;font-weight:700;color:rgba(255,255,255,.5);}
.game-modal-body{flex:1;overflow-y:auto;overflow-x:hidden;}

/* --- SHARED GAME CHROME --- */
.gc{max-width:700px;margin:0 auto;padding:16px 16px 32px;}
.game-canvas-wrap{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08);margin-bottom:12px;position:relative;background:#0a0a14;}
.game-canvas-wrap canvas{display:block;width:100%;max-height:420px;}
.game-overlay{position:absolute;inset:0;background:rgba(10,10,20,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px;border-radius:12px;}
.game-overlay.hidden{display:none;}
.overlay-title{font-family:'Fredoka',cursive;font-size:1.4rem;color:#fff;}
.overlay-sub{font-size:.84rem;color:rgba(255,255,255,.5);max-width:340px;line-height:1.6;}
.btn-start{padding:12px 32px;border:none;border-radius:10px;font-family:'Fredoka',cursive;font-size:1rem;font-weight:700;color:#0d0d12;cursor:pointer;transition:filter .15s;box-shadow:0 3px 0 rgba(0,0,0,.3);}
.btn-start:hover{filter:brightness(1.1);}

/* --- FEEDBACK --- */
.fb{border-radius:9px;padding:10px 14px;font-size:.84rem;line-height:1.6;display:none;margin-top:8px;}
.fb.show{display:block;}
.fb.ok{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.3);color:#34D399;}
.fb.bad{background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.25);color:#F87171;}
.fb.info{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.6);}

/* --- ECHO, CODE BLOCKS --- */
.code-ui{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
@media(max-width:480px){.code-ui{grid-template-columns:1fr;}}
.code-panel{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:12px;}
.code-panel-label{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:rgba(255,255,255,.3);margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;}
.blocks-list{display:flex;flex-direction:column;gap:6px;}
.cblock{padding:10px 12px;border-radius:7px;font-size:.82rem;font-weight:700;color:#0d0d12;cursor:pointer;border:none;text-align:left;display:flex;align-items:center;gap:8px;transition:filter .12s,transform .1s;}
.cblock:hover{filter:brightness(1.12);transform:translateY(-1px);}
.cblock.used{opacity:.3;pointer-events:none;}
.slots-list{display:flex;flex-direction:column;gap:5px;min-height:100px;}
.pslot{min-height:38px;border:1.5px dashed rgba(255,255,255,.12);border-radius:7px;padding:7px 10px;font-size:.78rem;color:rgba(255,255,255,.2);cursor:default;transition:border-color .15s,background .15s;display:flex;align-items:center;}
.pslot.filled{border-style:solid;border-color:rgba(255,255,255,.22);color:#fff;background:rgba(255,255,255,.05);cursor:pointer;}
.pslot.active{border-color:#3EC9A7;background:rgba(62,201,167,.12);}
.pslot.done{border-color:rgba(62,201,167,.35);opacity:.6;}
.code-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.btn-run{padding:10px 22px;border:none;border-radius:9px;font-weight:700;font-size:.88rem;color:#0d0d12;cursor:pointer;transition:filter .15s;}
.btn-run:hover{filter:brightness(1.1);}
.btn-run:disabled{opacity:.35;cursor:default;}
.btn-clear{padding:10px 16px;border:none;border-radius:9px;font-weight:700;font-size:.88rem;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);transition:background .15s;}
.btn-clear:hover{background:rgba(255,255,255,.14);}
.level-hint{font-size:.8rem;color:rgba(255,255,255,.4);padding:8px 12px;background:rgba(255,255,255,.03);border-radius:8px;margin-bottom:10px;line-height:1.5;}

/* --- PIP, BISCUIT SHOP --- */
.shop-scene{border-radius:12px;overflow:hidden;background:#1a0e06;border:1px solid rgba(255,255,255,.08);margin-bottom:10px;}
.shop-scene canvas{display:block;width:100%;}
.order-board{background:rgba(245,167,35,.08);border:1px solid rgba(245,167,35,.2);border-radius:10px;padding:14px;margin-bottom:8px;}
.order-title{font-family:'Fredoka',cursive;font-size:1rem;color:#F5A623;margin-bottom:6px;}
.order-text{font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:10px;line-height:1.5;}
.answer-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.answer-row span{font-size:.88rem;color:rgba(255,255,255,.5);}
.price-input{background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.15);border-radius:9px;padding:10px 14px;font-size:1.1rem;font-weight:700;color:#fff;width:110px;text-align:center;outline:none;font-family:'Fredoka',cursive;transition:border-color .2s;}
.price-input:focus{border-color:#F5A623;}
.price-input.correct{border-color:#34D399;color:#34D399;}
.price-input.wrong{border-color:#F87171;color:#F87171;}
.btn-submit{padding:10px 20px;background:#F5A623;border:none;border-radius:9px;font-weight:700;font-size:.9rem;color:#0d0d12;transition:filter .15s;}
.btn-submit:hover{filter:brightness(1.1);}
.btn-submit:disabled{opacity:.4;cursor:default;}
.shop-score-row{display:flex;justify-content:space-between;font-size:.8rem;color:rgba(255,255,255,.4);padding:4px 0 8px;}
.customer-queue{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap;}
.customer-dot{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.12);}
.customer-dot.served{background:#34D399;}
.customer-dot.current{background:#F5A623;}

/* --- ENGLISH, LETTER POP --- */
.eng-status{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:rgba(255,255,255,.04);border-radius:8px;margin-bottom:8px;font-size:.82rem;}
.eng-target{font-family:'Fredoka',cursive;font-size:.95rem;color:var(--english);font-weight:700;}
.word-display{font-family:'Fredoka',cursive;font-size:1.8rem;color:#fff;text-align:center;letter-spacing:.2em;padding:12px;background:rgba(255,255,255,.04);border-radius:8px;margin-bottom:6px;min-height:58px;}
.word-display .found{color:var(--english);}
.word-display .blank{color:rgba(255,255,255,.2);}
.word-hint{font-size:.8rem;color:rgba(255,255,255,.35);text-align:center;margin-bottom:6px;}
.eng-canvas-wrap{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#0e0818;}
.eng-canvas-wrap canvas{display:block;width:100%;}

/* --- SCIENCE MCQ --- */
.mcq-question{font-family:'Fredoka',cursive;font-size:1.2rem;color:#fff;text-align:center;padding:16px;background:rgba(167,139,250,.08);border:1px solid rgba(167,139,250,.15);border-radius:12px;margin-bottom:12px;line-height:1.4;}
.mcq-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;}
@media(max-width:440px){.mcq-opts{grid-template-columns:1fr;}}
.mcq-btn{padding:13px 12px;border:1.5px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);border-radius:10px;color:rgba(255,255,255,.85);font-size:.88rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,transform .1s;text-align:center;line-height:1.4;}
.mcq-btn:hover:not(:disabled){background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);transform:translateY(-1px);}
.mcq-btn.correct{background:rgba(52,211,153,.18);border-color:#34D399;color:#34D399;}
.mcq-btn.wrong{background:rgba(248,113,113,.12);border-color:#F87171;color:#F87171;}
.mcq-btn:disabled{cursor:default;transform:none;}
.mcq-progress{display:flex;gap:5px;margin-bottom:12px;justify-content:center;flex-wrap:wrap;}
.mcq-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.12);}
.mcq-dot.done-ok{background:#34D399;}
.mcq-dot.done-bad{background:#F87171;}
.mcq-dot.current{background:#A78BFA;box-shadow:0 0 6px #A78BFA;}
.timer-bar-wrap{background:rgba(255,255,255,.07);border-radius:999px;height:4px;margin-bottom:14px;overflow:hidden;}
.timer-bar{height:100%;border-radius:999px;background:#A78BFA;transition:width .1s linear;}

/* --- SIX DISTINCT QUIZ PROGRESS TREATMENTS --- */
/* History: linear timeline, a scroll unrolling */
.hist-timeline{position:relative;width:100%;box-sizing:border-box;height:40px;margin-bottom:14px;padding:10px 4px 0;background:rgba(212,160,23,.06);border:1px solid rgba(212,160,23,.15);border-radius:12px;}
.hist-timeline::before{content:'';position:absolute;top:20px;left:14px;right:14px;height:4px;background:rgba(255,255,255,.14);border-radius:2px;}
.hist-timeline-fill{position:absolute;top:20px;left:14px;height:4px;border-radius:2px;background:linear-gradient(90deg,#8a6d10,#D4A017);transition:width .4s ease;}
.hist-timeline-marker{position:absolute;top:2px;transform:translateX(-50%);font-size:1.2rem;transition:left .4s ease;}
.hist-timeline-ticks{position:absolute;top:17px;left:14px;right:14px;display:flex;justify-content:space-between;}
.hist-tick{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.28);border:1px solid rgba(0,0,0,.25);transition:background .2s,transform .2s;}
.hist-tick.ok{background:#34D399;transform:scale(1.15);}
.hist-tick.bad{background:#F87171;transform:scale(1.15);}

/* Art: growing mosaic grid */
.art-mosaic{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;width:100%;box-sizing:border-box;margin-bottom:14px;padding:8px;background:rgba(249,115,22,.05);border:1px solid rgba(249,115,22,.15);border-radius:12px;}
.art-cell{aspect-ratio:1;border-radius:5px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.06);transition:background .3s,transform .2s;}
.art-cell.ok{background:linear-gradient(135deg,#F97316,#FBBF24);border-color:transparent;}
.art-cell.bad{background:rgba(248,113,113,.35);border-color:transparent;}
.art-cell.current{outline:2px solid #F97316;outline-offset:1px;}

/* Health: ECG pulse strip */
.health-ecg{display:flex;align-items:flex-end;gap:3px;width:100%;box-sizing:border-box;height:36px;margin-bottom:14px;padding:0 2px;}
.health-blip{flex:1;background:rgba(255,255,255,.1);border-radius:2px;transition:background .3s,height .3s;}
.health-blip.ok{background:#4ADE80;}
.health-blip.bad{background:#F87171;}
.health-blip.current{background:rgba(74,222,128,.6);animation:ecg-pulse 1s ease-in-out infinite;}
@keyframes ecg-pulse{0%,100%{opacity:.5}50%{opacity:1}}

/* Inventors: workbench that assembles parts */
.inv-bench{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;width:100%;box-sizing:border-box;margin-bottom:14px;padding:10px;background:rgba(251,191,36,.06);border:1px dashed rgba(251,191,36,.25);border-radius:12px;}
.inv-slot{width:28px;height:28px;border-radius:6px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-size:15px;transition:background .3s,transform .2s;}
.inv-slot.ok{background:rgba(251,191,36,.22);transform:scale(1.1) rotate(-4deg);}
.inv-slot.bad{background:rgba(248,113,113,.18);}
.inv-slot.current{outline:2px solid #FBBF24;}

/* Space: circular orbit ring */
.space-orbit{position:relative;width:104px;height:104px;margin:0 auto 14px;}
.space-ring{position:absolute;inset:0;border-radius:50%;border:3px solid rgba(255,255,255,.08);}
.space-ring-fill{position:absolute;inset:0;border-radius:50%;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 6px));mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 6px));}
.space-planet{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.7rem;}
.space-rocket{position:absolute;font-size:1.05rem;}

/* Nature: growing terrarium */
.nat-terrarium{display:flex;align-items:flex-end;gap:4px;width:100%;box-sizing:border-box;height:42px;margin-bottom:14px;padding:0 4px 4px;background:linear-gradient(180deg,transparent 55%,rgba(45,212,191,.12) 55%);border-radius:0 0 10px 10px;border-bottom:2px solid rgba(45,212,191,.3);}
.nat-slot{flex:1;text-align:center;font-size:15px;opacity:.15;transition:opacity .3s,transform .3s;transform:scale(.6);}
.nat-slot.ok{opacity:1;transform:scale(1);}
.nat-slot.bad{opacity:.3;transform:scale(.8);}

/* --- NUMBER BONDS --- */
.bond-scene{text-align:center;padding:20px 0;}
.bond-equation{font-family:'Fredoka',cursive;font-size:clamp(2rem,6vw,3rem);color:#fff;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:20px;}
.bond-box{background:rgba(129,140,248,.15);border:2px solid rgba(129,140,248,.4);border-radius:12px;padding:8px 20px;min-width:80px;display:inline-block;}
.bond-input{background:rgba(129,140,248,.1);border:3px solid rgba(129,140,248,.5);border-radius:12px;padding:8px 12px;font-size:clamp(1.5rem,4vw,2.2rem);font-weight:700;color:#fff;width:100px;text-align:center;outline:none;font-family:'Fredoka',cursive;transition:border-color .2s;}
.bond-input:focus{border-color:#818CF8;box-shadow:0 0 0 3px rgba(129,140,248,.2);}
.bond-input.ok{border-color:#34D399;background:rgba(52,211,153,.12);}
.bond-input.bad{border-color:#F87171;background:rgba(248,113,113,.1);animation:shake .3s;}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.bond-submit{padding:12px 32px;background:#818CF8;border:none;border-radius:10px;font-family:'Fredoka',cursive;font-size:1rem;font-weight:700;color:#0d0d12;cursor:pointer;transition:filter .15s;margin-top:12px;}
.bond-submit:hover{filter:brightness(1.1);}
.bond-submit:disabled{opacity:.4;cursor:default;}
.bond-progress-row{display:flex;justify-content:center;gap:6px;margin-bottom:16px;flex-wrap:wrap;}
.bond-dot{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.1);}
.bond-dot.ok{background:#34D399;}
.bond-dot.bad{background:#F87171;}
.bond-dot.cur{background:#818CF8;box-shadow:0 0 6px #818CF8;}
.bond-round-label{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:4px;}

/* --- MEMORY MATCH --- */
.mem-info{display:flex;justify-content:space-between;align-items:center;padding:8px 0;margin-bottom:10px;font-size:.85rem;color:rgba(255,255,255,.5);}
.mem-info b{color:#fff;}
.mem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px;}
@media(max-width:380px){.mem-grid{gap:5px;}}
.mem-card{aspect-ratio:1;border-radius:10px;cursor:pointer;position:relative;transform-style:preserve-3d;transition:transform .35s;}
.mem-card.flipped,.mem-card.matched{transform:rotateY(180deg);}
.mem-front,.mem-back{position:absolute;inset:0;border-radius:10px;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.mem-front{background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.12);font-size:1.4rem;color:rgba(255,255,255,.2);}
.mem-back{background:rgba(52,211,153,.12);border:1.5px solid rgba(52,211,153,.3);transform:rotateY(180deg);font-size:1.6rem;}
@media(max-width:440px){.mem-back,.mem-front{font-size:1.2rem;}}
@keyframes memGlow{0%{box-shadow:0 0 0 rgba(52,211,153,0);}50%{box-shadow:0 0 22px rgba(52,211,153,.85);}100%{box-shadow:0 0 0 rgba(52,211,153,0);}}
.mem-card.matched .mem-back{animation:memGlow .5s ease;}
.mem-card.mismatch .mem-back{background:rgba(248,113,113,.2);border-color:#F87171;}
.mem-card.matched .mem-back{background:rgba(52,211,153,.25);border-color:#34D399;}

/* --- GEOGRAPHY --- */
.geo-cap-btn{padding:13px 12px;border:1.5px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);border-radius:10px;color:rgba(255,255,255,.85);font-size:.88rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,transform .1s;text-align:center;}
.geo-cap-btn:hover:not(:disabled){background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);transform:translateY(-1px);}
.geo-cap-btn:disabled{cursor:default;transform:none;}

/* --- LEARN PANEL --- */
.learn-panel{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:18px;margin-top:16px;}
.learn-eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;opacity:.5;}
.learn-title{font-family:'Fredoka',cursive;font-size:1.1rem;color:#fff;margin-bottom:8px;}
.learn-body{font-size:.85rem;color:rgba(255,255,255,.6);line-height:1.75;}
.learn-body b{color:rgba(255,255,255,.88);}
.learn-body ul{margin:8px 0 0 16px;}
.learn-body li{margin-bottom:5px;}
.char-bubble{display:flex;gap:10px;margin-top:12px;background:rgba(255,255,255,.03);border-radius:8px;padding:12px;}
.bubble-emoji{font-size:1.4rem;flex-shrink:0;}
.bubble-text{font-size:.82rem;color:rgba(255,255,255,.55);font-style:italic;line-height:1.6;}

/* --- STUDY SPLASH --- */
.study-splash{position:absolute;inset:0;background:#0d0d12;z-index:10;overflow-y:auto;display:flex;flex-direction:column;}
.study-inner{max-width:680px;margin:0 auto;padding:24px 20px 40px;width:100%;}
.study-char{font-size:3.5rem;text-align:center;margin-bottom:8px;display:block;animation:pulse-char 2s ease-in-out infinite;}
@keyframes pulse-char{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}
.study-heading{font-family:'Fredoka',cursive;font-size:clamp(1.5rem,4vw,2.2rem);color:#fff;text-align:center;margin-bottom:6px;}
.study-subject{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-align:center;margin-bottom:20px;opacity:.55;}
.study-facts{display:flex;flex-direction:column;gap:12px;margin-bottom:24px;}
.study-fact{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:16px 18px;display:flex;gap:14px;align-items:flex-start;border-left:3px solid var(--study-accent,rgba(255,255,255,.15));}
.study-fact-icon{font-size:1.5rem;flex-shrink:0;margin-top:1px;}
.study-fact-body{}
.study-fact-title{font-family:'Fredoka',cursive;font-size:1rem;color:#fff;margin-bottom:3px;}
.study-fact-text{font-size:.83rem;color:rgba(255,255,255,.5);line-height:1.6;}
.study-fact-text b{color:rgba(255,255,255,.85);font-weight:700;}
.study-actions{display:flex;gap:10px;flex-wrap:wrap;}
.btn-study-play{flex:1;padding:14px 24px;border:none;border-radius:12px;font-family:'Fredoka',cursive;font-size:1.05rem;font-weight:700;color:#0d0d12;cursor:pointer;transition:filter .15s,transform .1s;}
.btn-study-play:hover{filter:brightness(1.1);transform:translateY(-2px);}
.btn-study-skip{padding:14px 18px;border:1px solid rgba(255,255,255,.15);border-radius:12px;background:transparent;color:rgba(255,255,255,.5);font-family:'Fredoka',cursive;font-size:.9rem;cursor:pointer;transition:background .15s;}
.btn-study-skip:hover{background:rgba(255,255,255,.07);color:#fff;}
/* card study button */
.card-study-btn{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.78rem;padding:7px 14px;border-radius:7px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);color:rgba(255,255,255,.6);cursor:pointer;transition:background .15s,color .15s;margin-top:8px;width:100%;justify-content:center;}
.card-study-btn:hover{background:rgba(255,255,255,.1);color:#fff;}

/* --- XP BAR --- */
.xp-bar-wrap{max-width:500px;margin:0 auto 20px;text-align:left;}
.xp-level-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.xp-level-badge{font-family:'Fredoka',cursive;font-size:.88rem;font-weight:700;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:4px 14px;}
.xp-next{font-size:.72rem;color:rgba(255,255,255,.35);font-weight:600;}
.xp-track{background:rgba(255,255,255,.08);border-radius:999px;height:8px;overflow:hidden;}
.xp-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--echo),var(--stardust));transition:width .6s cubic-bezier(.34,1.56,.64,1);}
.xp-pop{position:fixed;pointer-events:none;font-family:'Fredoka',cursive;font-size:1.1rem;font-weight:700;color:#FFD93D;text-shadow:0 2px 8px rgba(0,0,0,.5);z-index:9999;animation:xp-fly .9s ease forwards;}
@keyframes xp-fly{0%{opacity:1;transform:translateY(0) scale(1);}100%{opacity:0;transform:translateY(-60px) scale(1.3);}}
@keyframes potBounce{0%{transform:scale(.5);}60%{transform:scale(1.2);}100%{transform:scale(1);}}
/* Streak-fx particle pop + body shake, shared by the 6 MCQ subjects'
   quizStreakFx() so a streak of 9+ actually feels bigger than a streak of 3. */
@keyframes quizStreakPop{0%{opacity:1;transform:translate(-50%,-50%) scale(.6);}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.1);}}
@keyframes confettiBurst{0%{opacity:1;transform:translate(-50%,-50%) scale(.4);}60%{opacity:1;}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1);}}
body.quiz-streak-shake{animation:quizStreakShake .35s ease-out;}
@keyframes quizStreakShake{0%{transform:translate(0,0);}20%{transform:translate(-6px,3px);}40%{transform:translate(5px,-3px);}60%{transform:translate(-4px,2px);}80%{transform:translate(2px,-1px);}100%{transform:translate(0,0);}}

/* --- LAB BADGES --- */
.lab-badges-wrap{max-width:760px;margin:0 auto 4px;}
.lab-badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;}
.lab-badge{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);text-align:center;transition:transform .15s;}
.lab-badge.earned{background:rgba(167,139,250,.1);border-color:rgba(167,139,250,.4);}
.lab-badge.earned:hover{transform:translateY(-2px);}
.lab-badge-icon{font-size:1.5rem;filter:grayscale(1);opacity:.3;}
.lab-badge.earned .lab-badge-icon{filter:none;opacity:1;}
.lab-badge-name{font-size:.62rem;font-weight:700;color:rgba(255,255,255,.35);line-height:1.3;}
.lab-badge.earned .lab-badge-name{color:rgba(255,255,255,.85);}

/* --- STAR RATINGS --- */
.card-stars{display:flex;gap:3px;margin-bottom:10px;}
.card-star{font-size:.9rem;opacity:.18;transition:opacity .2s;}
.card-star.on{opacity:1;}
.badge-new{font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid rgba(255,217,61,.5);background:rgba(255,217,61,.12);color:#FFD93D;}

/* --- TIMES TABLES --- */
.tt-scene{text-align:center;padding:14px 0 8px;}
.tt-question{font-family:'Fredoka',cursive;font-size:clamp(2rem,7vw,3.2rem);color:#fff;margin-bottom:18px;line-height:1;}
.tt-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:400px;margin:0 auto 12px;}
.tt-btn{padding:16px;border:2px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);border-radius:12px;font-family:'Fredoka',cursive;font-size:1.4rem;font-weight:700;color:#fff;cursor:pointer;transition:background .12s,border-color .12s,transform .1s;}
.tt-btn:hover:not(:disabled){background:rgba(255,255,255,.13);transform:translateY(-2px);}
.tt-btn.correct{background:rgba(52,211,153,.2);border-color:#34D399;color:#34D399;}
.tt-btn.wrong{background:rgba(248,113,113,.12);border-color:#F87171;color:#F87171;}
.tt-btn:disabled{cursor:default;transform:none;}
.tt-table-select{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:16px;}
.tt-tbl-btn{padding:6px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:rgba(255,255,255,.65);font-size:.8rem;font-weight:700;cursor:pointer;transition:background .12s,border-color .12s;}
.tt-tbl-btn.active{background:rgba(245,166,35,.2);border-color:var(--pip);color:var(--pip);}
.tt-streak{font-family:'Fredoka',cursive;font-size:1rem;color:rgba(255,255,255,.4);text-align:center;margin-bottom:4px;}
.tt-streak b{color:#FFD93D;}

/* --- HISTORY --- */
.hist-q{font-family:'Fredoka',cursive;font-size:1.15rem;color:#fff;text-align:center;padding:16px;background:rgba(245,166,35,.08);border:1px solid rgba(245,166,35,.15);border-radius:12px;margin-bottom:12px;line-height:1.4;}
.hist-era{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(245,166,35,.6);margin-bottom:6px;}
.hist-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;}
@media(max-width:440px){.hist-opts{grid-template-columns:1fr;}}
.hist-btn{padding:13px 12px;border:1.5px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);border-radius:10px;color:rgba(255,255,255,.85);font-size:.88rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,transform .1s;text-align:center;line-height:1.4;}
.hist-btn:hover:not(:disabled){background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);transform:translateY(-1px);}
.hist-btn.correct{background:rgba(52,211,153,.18);border-color:#34D399;color:#34D399;}
.hist-btn.wrong{background:rgba(248,113,113,.12);border-color:#F87171;color:#F87171;}
.hist-btn:disabled{cursor:default;transform:none;}

/* --- DECORATIVE SCENE PANEL (atmospheric, never reveals the answer) --- */
.lab-scene{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px 26px;padding:28px 16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:18px;margin-bottom:14px;}
.lab-scene span{font-size:4rem;line-height:1;display:inline-block;animation:lab-scene-float 2.4s ease-in-out infinite;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4));}
.lab-scene span:nth-child(2){animation-delay:.3s;}
.lab-scene span:nth-child(3){animation-delay:.6s;}
.lab-scene span:nth-child(4){animation-delay:.9s;}
@keyframes lab-scene-float{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-10px) scale(1.06);}}
@media(max-width:420px){.lab-scene span{font-size:3.2rem;}}

/* --- MUSIC --- */
.music-q{font-family:'Fredoka',cursive;font-size:1.15rem;color:#fff;text-align:center;padding:16px 14px;background:rgba(129,140,248,.08);border:1px solid rgba(129,140,248,.15);border-radius:12px;margin-bottom:12px;line-height:1.4;}
.music-icon{font-size:2.8rem;display:block;margin-bottom:8px;}
.music-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;}
@media(max-width:440px){.music-opts{grid-template-columns:1fr;}}
.music-btn{padding:13px 12px;border:1.5px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);border-radius:10px;color:rgba(255,255,255,.85);font-size:.88rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,transform .1s;text-align:center;}
.music-btn:hover:not(:disabled){background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);transform:translateY(-1px);}
.music-btn.correct{background:rgba(52,211,153,.18);border-color:#34D399;color:#34D399;}
.music-btn.wrong{background:rgba(248,113,113,.12);border-color:#F87171;color:#F87171;}
.music-btn:disabled{cursor:default;transform:none;}

/* --- LOGIC LAB --- */
.logic-q{font-family:'Fredoka',cursive;font-size:1.1rem;color:#fff;padding:16px;background:rgba(52,211,153,.06);border:1px solid rgba(52,211,153,.12);border-radius:12px;margin-bottom:10px;line-height:1.5;}
.code-snippet{font-family:'Courier New',monospace;font-size:.88rem;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:12px;margin:8px 0;color:#a0f0c0;line-height:1.7;white-space:pre;}
.logic-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;}
@media(max-width:440px){.logic-opts{grid-template-columns:1fr;}}
.logic-btn{padding:12px;border:1.5px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);border-radius:10px;color:rgba(255,255,255,.85);font-size:.86rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s;text-align:center;font-family:'Courier New',monospace;}
.logic-btn:hover:not(:disabled){background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);}
.logic-btn.correct{background:rgba(52,211,153,.18);border-color:#34D399;color:#34D399;}
.logic-btn.wrong{background:rgba(248,113,113,.12);border-color:#F87171;color:#F87171;}
.logic-btn:disabled{cursor:default;}

/* --- FOOTER --- */
/* --- STREAK + DAILY CHALLENGE --- */
.streak-bar{background:#13131e;border-bottom:1px solid rgba(255,255,255,.06);padding:10px 24px;}
.streak-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.streak-pill{display:inline-flex;align-items:center;gap:7px;background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.25);border-radius:999px;padding:6px 16px;font-size:.82rem;font-weight:700;color:#F5A623;}
.streak-flame{font-size:1.1rem;}
.daily-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(188,71,73,.1);border:1px solid rgba(188,71,73,.25);border-radius:999px;padding:6px 16px;font-size:.82rem;font-weight:700;color:#BC4749;cursor:pointer;transition:background .15s;}
.daily-badge:hover{background:rgba(188,71,73,.18);}
.streak-xp{margin-left:auto;font-size:.78rem;font-weight:700;color:rgba(255,255,255,.35);}

/* --- HOMEWORK HELPER --- */
.helper-bar{background:#0d0d12;padding:14px 24px;border-bottom:1px solid rgba(255,255,255,.06);}
.helper-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.helper-label{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.3);flex-shrink:0;}
.helper-btn{padding:6px 14px;border-radius:999px;border:1.5px solid rgba(255,255,255,.1);background:none;font-size:.78rem;font-weight:700;color:rgba(255,255,255,.5);cursor:pointer;transition:all .15s;font-family:'Fredoka',cursive;}
.helper-btn:hover{border-color:rgba(255,255,255,.3);color:#fff;}
.helper-btn.active{border-color:currentColor;color:#fff;}
.helper-btn.all{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.7);}
.helper-btn.all.active{background:rgba(255,255,255,.1);}

/* --- REVISION CARDS --- */
.revision-section{padding:56px 24px;background:#0a0a14;}
.revision-inner{max-width:1100px;margin:0 auto;}
.revision-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:28px;}
.rev-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:22px 20px;display:flex;flex-direction:column;gap:10px;}
.rev-card-header{display:flex;align-items:center;gap:10px;}
.rev-card-emoji{font-size:1.6rem;}
.rev-card-title{font-family:'Fredoka',cursive;font-size:1rem;color:#fff;}
.rev-card-subject{font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:4px;}
.rev-facts{display:flex;flex-direction:column;gap:6px;}
.rev-fact{font-size:.8rem;color:rgba(255,255,255,.55);line-height:1.5;padding:6px 10px;background:rgba(255,255,255,.03);border-radius:7px;border-left:2px solid;}
.rev-print-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid rgba(255,255,255,.15);background:none;border-radius:8px;font-size:.78rem;font-weight:700;color:rgba(255,255,255,.5);cursor:pointer;transition:all .15s;margin-top:auto;font-family:'Fredoka',cursive;}
.rev-print-btn:hover{border-color:rgba(255,255,255,.35);color:#fff;}
@media print{body>*:not(.revision-section){display:none!important;}.revision-section{background:#fff;}.rev-card{background:#fff;border:1px solid #ccc;}.rev-fact{color:#333;background:#f5f5f5;}}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .hero-float, .hero-stars span { animation: none !important; }
}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.skip-link:focus{left:50%;transform:translateX(-50%);top:8px;width:auto;height:auto;padding:10px 20px;background:#BC4749;color:white;font-weight:700;font-size:.9rem;border-radius:8px;z-index:9999;text-decoration:none;white-space:nowrap}
/* -- Touch targets, ages 7 to 12 --
   Measured on a 390px phone: the subject filters were 29 to 30px tall and the
   two buttons on every activity card were 32 and 38px. */
@media (pointer: coarse), (max-width: 900px) {
  .ll-scope .helper-btn { min-height: 44px; }
  .ll-scope .card-cta { min-height: 48px; }
  .ll-scope .card-study-btn { min-height: 44px; }
}
@media print{body>*:not(#reportSection){display:none!important;}#reportSection{padding:0;background:#fff;}}
.reveal{opacity:1!important;transform:none!important}
/* Learning journey refresh */
.ll-scope{display:flex;flex-direction:column;background:#0a0a10;}
.ll-scope .site-header{order:0;}.ll-scope .streak-bar{order:1;}.ll-scope .learn-tabs{order:2;}.ll-scope .hero{order:3;}.ll-scope .mascot-hero{order:3;}.ll-scope .helper-bar{order:4;}.ll-scope .continue-section{order:5;}.ll-scope .subjects-section{order:6;}.ll-scope .how-section{order:7;}.ll-scope .lab-sticker-section{order:8;}.ll-scope .parents-section{order:9;}.ll-scope #reportSection{order:10;}
.ll-scope .helper-inner{overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;scrollbar-width:thin;}.ll-scope .helper-btn{flex:0 0 auto;}
@media(max-width:700px){
  .ll-scope .helper-bar{padding-left:14px;padding-right:14px;overflow-x:hidden;}
  .ll-scope .helper-inner{max-width:100%;overflow-x:hidden;flex-wrap:wrap;}
  .ll-scope .helper-label{width:100%;}
  .ll-scope .helper-btn{flex:1 1 140px;min-width:0;white-space:normal;}
}
.ll-scope .hero h1{font-size:clamp(3rem,8vw,5.4rem);letter-spacing:-.04em;}.ll-scope .hero-sub{font-size:clamp(1rem,2.2vw,1.16rem);max-width:590px;}
.hero-start-btn{display:inline-flex;align-items:center;gap:12px;margin-top:28px;padding:15px 24px;border-radius:14px;background:var(--stardust);color:#0d0d12;text-decoration:none;font-family:'Fredoka',cursive;font-weight:700;font-size:1rem;box-shadow:0 4px 0 rgba(167,139,250,.4);transition:transform .2s,filter .2s;}.hero-start-btn:hover{transform:translateY(-3px);filter:brightness(1.08);}
.ll-scope .continue-section{padding-top:26px;}.ll-scope .subjects-section{padding-top:42px;}.ll-scope .subject-card{border-radius:20px;min-height:245px;padding:24px;box-shadow:0 12px 30px rgba(0,0,0,.12);}.ll-scope .subject-card:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(0,0,0,.22);}.ll-scope .how-section{background:#10101a;padding-top:58px;padding-bottom:64px;}.ll-scope .lab-sticker-section,.ll-scope .parents-section,#reportSection{background:#0d0d15!important;}
@media(max-width:700px){.ll-scope .learn-tabs{justify-content:flex-start;overflow-x:hidden;flex-wrap:wrap;padding-left:16px;padding-right:16px;}.ll-scope .learn-tab{flex:1 1 150px;min-width:0;}.ll-scope .hero h1{font-size:clamp(2.8rem,14vw,4rem);}.ll-scope .hero-stats{display:grid;grid-template-columns:1fr 1fr;max-width:340px;margin-left:auto;margin-right:auto;}.ll-scope .streak-xp{width:100%;margin-left:0;}}

/* Guided states and adult tools */
.parent-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:920px;margin:0 auto;padding:15px 20px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:#151521;color:rgba(255,255,255,.78);font:700 .88rem 'Inter',sans-serif;cursor:pointer;}
.parent-toggle span{font-size:1.4rem;color:var(--stardust);line-height:1;}.parents-section{display:none;}.parents-section.is-open{display:block;}
.ll-scope .parent-toggle{order:8;margin-top:20px;}.ll-scope .parents-section{order:9;}.ll-scope #reportSection{order:10;}
.card-status{display:inline-flex;align-items:center;width:max-content;margin-bottom:8px;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.66);font-size:.62rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;}
.subject-card:focus-visible,.continue-card:focus-visible,.learn-tab:focus-visible,.helper-btn:focus-visible,.parent-toggle:focus-visible{outline:3px solid var(--stardust);outline-offset:4px;}
@media(max-width:700px){.ll-scope .parent-toggle{margin-left:16px;margin-right:16px;width:calc(100% - 32px);}.ll-scope .helper-bar{position:relative;}.ll-scope .helper-label{font-size:.66rem;}}
/* Final polish pass */
html{scroll-behavior:smooth;}.ll-scope section,.tl-scope section{scroll-margin-top:18px;}.ll-scope .section-label,.tl-scope .sh-tag{letter-spacing:.12em;}.ll-scope .subject-card,.tl-scope .act-card{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}.ll-scope .card-cta,.tl-scope .act-btn{min-height:48px;}.ll-scope .card-study-btn{margin-top:4px;}