:root{
  --blue:#1442d6; --blue-d:#0b2a9a; --navy:#0a1a4a; --sky:#7ec8ff;
  --yellow:#f8b400; --orange:#ff7a1a; --red:#e3362c; --green:#1fb26b; --pink:#ff3e9a; --purple:#7b3fe4; --teal:#00a6a6;
  --ink:#0d1330; --muted:#5a628a; --paper:#fff; --paper-2:#f3f6ff; --line:#dfe5ff;
  --radius:22px; --shadow:0 20px 60px rgba(10,26,74,.18);
  --font-head:"Fredoka",system-ui,sans-serif; --font-body:"Nunito",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--ink);background:#08153f;overflow-x:hidden;line-height:1.55}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.08;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(2.4rem,5.6vw,4.4rem);font-weight:700}
h2{font-size:clamp(1.8rem,3.6vw,2.8rem);font-weight:700}
h3{font-size:clamp(1.25rem,2.2vw,1.7rem);font-weight:600}
.grad{background:linear-gradient(90deg,var(--yellow),var(--orange),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;color:var(--yellow);margin-bottom:.6rem}
.small{font-size:.85rem;color:var(--muted)} .center{text-align:center}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:0;cursor:pointer;font-family:var(--font-head);font-weight:600;font-size:1rem;padding:.75rem 1.35rem;border-radius:999px;transition:transform .15s,box-shadow .15s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,var(--yellow),var(--orange));color:#2a1600;box-shadow:0 10px 30px rgba(248,180,0,.35)}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:2px solid rgba(255,255,255,.35);backdrop-filter:blur(8px)}
.btn-lg{font-size:1.15rem;padding:.95rem 1.7rem} .btn-sm{font-size:.85rem;padding:.5rem 1rem}

/* loader */
#loader{position:fixed;inset:0;z-index:100;background:radial-gradient(circle at 50% 30%,#1e4be0,#07123a 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:#fff;transition:opacity .6s}
#loader.done{opacity:0;pointer-events:none}
#loader .face{width:180px;filter:drop-shadow(0 20px 30px rgba(0,0,0,.5));animation:bob 1.6s ease-in-out infinite}
#loader img:not(.face){width:200px}
#loader .bar{width:220px;height:8px;border-radius:9px;background:rgba(255,255,255,.2);overflow:hidden}
#loader .bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--yellow),var(--pink));animation:load 2.4s ease-out forwards}
@keyframes load{to{width:100%}} @keyframes bob{50%{transform:translateY(-8px)}}

/* nav */
#nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:1.5rem;padding:.7rem 5vw;transition:background .3s,box-shadow .3s}
#nav.scrolled{background:rgba(8,21,63,.85);backdrop-filter:blur(14px);box-shadow:0 6px 30px rgba(0,0,0,.25)}
#nav .brand{display:flex;align-items:center;gap:.6rem;color:#fff;font-family:var(--font-head);font-weight:600;font-size:1.35rem}
#nav .brand img{height:64px}
#nav nav{display:flex;gap:1.3rem;margin-left:auto}
#nav nav a{color:#fff;font-weight:700;opacity:.85;font-size:.95rem}
#nav nav a:hover{opacity:1;color:var(--yellow)}
.burger{display:none;background:none;border:0;width:40px;height:40px;position:relative;cursor:pointer}
.burger span,.burger span::before,.burger span::after{content:"";position:absolute;left:8px;width:24px;height:3px;background:#fff;border-radius:3px}
.burger span{top:18px} .burger span::before{top:-8px;left:0} .burger span::after{top:8px;left:0}

/* 3D */
#world{position:fixed;inset:0;width:100%;height:100%;z-index:0}
#world-hint{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:5;color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.85;animation:bob 2s infinite;transition:opacity .4s}
#world-hint.hide{opacity:0}
#world-hint span::after{content:"↓";display:block;text-align:center;font-size:1.2rem}
main{position:relative;z-index:1}

/* hero */
.hero{min-height:100vh;display:grid;grid-template-columns:1.15fr .85fr;align-items:end;padding:14vh 5vw 4vh;color:#fff;position:relative;gap:2rem}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,16,54,.85) 0%,rgba(6,16,54,.55) 45%,rgba(6,16,54,.05) 80%);pointer-events:none}
.hero-inner{position:relative;max-width:640px;align-self:center}
.lead{font-size:1.15rem;opacity:.92;margin:1.2rem 0 1.6rem;max-width:580px}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1rem}
.stats{display:flex;gap:2rem;margin-top:2.2rem}
.stats div{display:flex;flex-direction:column}
.stats b{font-family:var(--font-head);font-size:2rem;color:var(--yellow);line-height:1.1}
.stats span{font-size:.8rem;opacity:.8}
.hero-gabby{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:60vh}
.hero-gabby img{width:min(400px,78%);filter:drop-shadow(0 30px 40px rgba(0,0,0,.5));position:relative;z-index:1}
.hero-gabby .pad{position:absolute;bottom:2%;left:50%;width:70%;height:60px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(255,62,154,.55),transparent 70%);filter:blur(6px)}
.bubble{background:#fff;color:var(--ink);font-family:var(--font-head);font-weight:600;font-size:1.05rem;padding:.9rem 1.2rem;border-radius:22px 22px 22px 6px;max-width:340px;box-shadow:var(--shadow);position:relative;margin-bottom:1.2rem;align-self:flex-start;margin-left:8%;transition:opacity .3s}
.bubble::after{content:"";position:absolute;left:28px;bottom:-12px;border:8px solid transparent;border-top-color:#fff;border-left-color:#fff}
.spacer{height:30vh}

/* sections */
.section{padding:8vh 5vw;max-width:1200px;margin:0 auto}
.section-head{color:#fff;max-width:660px;margin-bottom:2.2rem;background:rgba(6,16,54,.6);backdrop-filter:blur(12px);padding:1.5rem 1.8rem;border-radius:var(--radius);border:1px solid rgba(255,255,255,.12)}
.section-head p:last-child{opacity:.88;font-size:1.05rem;margin-top:.7rem}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.how{background:#fff;border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow)}
.how-ic{width:110px;height:110px;border-radius:28px;background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--c) 35%,#fff),color-mix(in srgb,var(--c) 85%,#000));display:grid;place-items:center;margin-bottom:.9rem;box-shadow:0 12px 26px color-mix(in srgb,var(--c) 45%,transparent),inset 0 -6px 0 rgba(0,0,0,.15)}
.how-ic img{width:96px;height:96px;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.35));transform:translateY(-6px)}
.how h3{margin-bottom:.5rem} .how p{color:#2b3358;font-size:.95rem}

.grade-tabs,.tabs{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.2rem}
.grade-tabs button,.tabs button{border:2px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;border-radius:999px;padding:.45rem .95rem;font-family:var(--font-head);font-weight:600;cursor:pointer;backdrop-filter:blur(8px)}
.grade-tabs button.on,.tabs button.on{background:var(--yellow);color:#2a1600;border-color:var(--yellow)}
.course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
.ccard{background:#fff;border-radius:18px;padding:1.1rem 1.2rem 1.2rem;box-shadow:var(--shadow);border-top:6px solid var(--c);display:flex;flex-direction:column;gap:.7rem}
.ccard-top{display:flex;gap:.7rem;align-items:center}
.ccard .em{width:74px;height:74px;border-radius:18px;background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--c) 30%,#fff),color-mix(in srgb,var(--c) 80%,#000));display:grid;place-items:center;flex-shrink:0;box-shadow:inset 0 -5px 0 rgba(0,0,0,.15)}
.ccard .em img{width:68px;height:68px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.35));transform:translateY(-4px)}
.ccard b{font-family:var(--font-head);font-size:1.1rem;display:block} .ccard small{color:var(--muted);font-weight:700;font-size:.75rem}
.ccard ol{margin-left:1.1rem;font-size:.86rem;color:#2b3358;display:grid;gap:.15rem}
.ccard .btn-ghost{color:var(--c);border-color:color-mix(in srgb,var(--c) 40%,#fff);background:color-mix(in srgb,var(--c) 8%,#fff);align-self:flex-start;backdrop-filter:none}

.split{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center;color:#fff}
.split-body{background:rgba(6,16,54,.62);backdrop-filter:blur(12px);padding:2rem;border-radius:var(--radius);border:1px solid rgba(255,255,255,.12)}
.split-flip .split-body{order:2}
.split-body p{opacity:.9;margin:1rem 0;font-size:1.02rem}
.split-media img{border-radius:var(--radius);box-shadow:var(--shadow);background:#fff}
.feat{list-style:none;display:grid;gap:.55rem;margin:.5rem 0 1.2rem}
.feat li{padding-left:1.5rem;position:relative;font-size:.95rem}
.feat li::before{content:"✓";position:absolute;left:0;color:var(--yellow);font-weight:900}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-bottom:2.5rem}
.pcard{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .25s}
.pcard:hover{transform:translateY(-6px)}
.pcard>div{padding:1.1rem 1.2rem 1.3rem}
.pcard h3{margin:.5rem 0 .4rem} .pcard p{color:#2b3358;font-size:.92rem}
.tag{display:inline-block;font-family:var(--font-head);font-weight:600;font-size:.78rem;padding:.25rem .75rem;border-radius:999px;color:#fff}
.tag-red{background:var(--red)} .tag-green{background:var(--green)} .tag-blue{background:var(--blue)}
.feature-card{display:grid;grid-template-columns:1fr 1fr;background:linear-gradient(135deg,#ffb703,#fb5607 60%,#ff006e);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);color:#fff}
.feature-media img{height:100%;width:100%;object-fit:cover}
.feature-body{padding:2.3rem} .feature-body .eyebrow{color:#fff;opacity:.85}
.feature-body p{margin:1rem 0 1.3rem;font-size:1.05rem}
.feature-body .btn-primary{background:#fff;color:#7a2a00;box-shadow:none}
.friends{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.4rem}
.friend{background:linear-gradient(180deg,#fff,#eef2ff);border-radius:var(--radius);padding:1rem 1rem 1.2rem;text-align:center;box-shadow:var(--shadow);display:grid;justify-items:center;gap:.3rem;border-bottom:6px solid var(--c);transition:transform .25s}
.friend:hover{transform:translateY(-8px)}
.friend img{height:200px;object-fit:contain;filter:drop-shadow(0 16px 16px rgba(0,0,0,.3))}
.friend b{font-family:var(--font-head);font-size:1.2rem} .friend span{font-size:.85rem;color:var(--muted);font-weight:700}
.cast{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.cast img{border-radius:var(--radius);box-shadow:var(--shadow);transition:transform .4s}
.cast img:hover{transform:translateY(-6px)}

#footer{background:#fff;color:var(--ink);padding:4rem 5vw 2rem;margin-top:4rem;border-radius:40px 40px 0 0}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:2.5rem;max-width:1200px;margin:0 auto}
.foot-logo{height:46px;margin-bottom:.8rem}
#footer h4{margin-bottom:.6rem;font-size:1.1rem}
#footer a{display:block;color:var(--muted);font-weight:700;margin:.25rem 0}
.social{display:flex;gap:1rem;margin-top:.8rem} .social a{display:inline}
.subscribe{display:flex;gap:.5rem;margin-top:.6rem}
.subscribe input{flex:1;padding:.7rem 1rem;border-radius:999px;border:1px solid #cfd6f5;font:inherit;min-width:0}
.copy{text-align:center;color:var(--muted);font-size:.8rem;margin-top:3rem}

.reveal{transition:opacity .8s,transform .8s}
.reveal:not(.in){opacity:.001;transform:translateY(26px)}
@media (scripting:none){.reveal{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none} *{animation:none!important}}

/* modal */
.modal{position:fixed;inset:0;z-index:200;background:rgba(5,12,40,.7);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:1rem;overflow:auto}
.modal[hidden]{display:none}
.modal-card{background:#fff;border-radius:28px;padding:2rem;width:100%;max-width:520px;position:relative;box-shadow:var(--shadow);animation:pop .35s cubic-bezier(.2,1.4,.4,1);margin:auto}
@keyframes pop{from{transform:scale(.85);opacity:0}}
.close{position:absolute;top:12px;right:14px;background:none;border:0;font-size:1.8rem;cursor:pointer;color:var(--muted);z-index:2}
.modal-gabby{position:absolute;right:-60px;top:-90px;width:200px;filter:drop-shadow(0 10px 20px rgba(0,0,0,.3));pointer-events:none}
.login-logos{display:flex;align-items:center;gap:.5rem;font-family:var(--font-head);font-weight:600;color:var(--muted)}
.login-logos img{height:40px}
.modal-card h3{margin-top:.8rem}
.modal-card form{display:grid;gap:.85rem;margin-top:1rem}
.modal-card label{font-weight:800;font-size:.82rem;color:var(--muted);display:grid;gap:.35rem}
.modal-card input:not([type=radio]){padding:.7rem .9rem;border-radius:12px;border:1.5px solid var(--line);font:inherit;font-size:1rem;color:var(--ink)}
.modal-card input:focus{outline:2px solid var(--blue);border-color:transparent}
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.roles label,.grade-pick label,.avatars label{cursor:pointer}
.roles input,.grade-pick input,.avatars input{display:none}
.roles span{display:block;text-align:center;padding:.65rem .3rem;border-radius:12px;border:1.5px solid var(--line);font-weight:800;color:var(--ink);font-family:var(--font-head)}
.roles input:checked+span{background:var(--blue);color:#fff;border-color:var(--blue)}
.grade-pick{display:grid;grid-template-columns:repeat(10,1fr);gap:.3rem}
.grade-pick span{display:grid;place-items:center;height:38px;border-radius:10px;border:1.5px solid var(--line);font-family:var(--font-head);font-weight:600;color:var(--ink)}
.grade-pick input:checked+span{background:var(--pink);color:#fff;border-color:var(--pink)}
.avatars{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem}
.avatars span{display:grid;justify-items:center;gap:.2rem;padding:.35rem;border-radius:14px;border:2px solid transparent}
.avatars span img{width:48px;height:48px;border-radius:50%;object-fit:cover} .avatars span i{font-style:normal;font-size:.68rem;color:var(--ink)}
.avatars input:checked+span{border-color:var(--yellow);background:#fff8e1}

/* ===================== APP ===================== */
#app{position:fixed;inset:0;z-index:90;background:#eef2fb;overflow:auto;color:var(--ink);display:grid;grid-template-columns:104px 1fr;grid-template-rows:56px 1fr;grid-template-areas:"top top" "side main"}
#app[hidden]{display:none}
#app.band-elementary{--radius:26px}
.app-top{grid-area:top;position:sticky;top:0;z-index:5;background:var(--blue);color:#fff;display:flex;align-items:center;gap:1rem;padding:0 1.2rem}
.brandbtn{display:flex;align-items:center;gap:.4rem;background:none;border:0;color:#fff;font-family:var(--font-head);font-weight:600;cursor:pointer}
.brandbtn img{height:30px}
.app-top .crumb{font-size:.85rem;opacity:.85}
.xp{margin-left:auto;display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:.85rem}
.xp .lvl{background:var(--yellow);color:#2a1600;border-radius:999px;padding:.15rem .6rem;font-family:var(--font-head)}
.xpbar{width:120px;height:10px;border-radius:9px;background:rgba(255,255,255,.25);overflow:hidden}
.xpbar span{display:block;height:100%;background:linear-gradient(90deg,#7be495,var(--green))}
.app-top .user{display:flex;align-items:center;gap:.6rem;font-size:.9rem;font-weight:700}
.crumb+.user{margin-left:auto}
.avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid #fff}
.exit{background:rgba(255,255,255,.15);border:0;color:#fff;border-radius:999px;padding:.35rem .8rem;cursor:pointer;font-weight:700}
.app-side{grid-area:side;background:#fff;border-right:1px solid var(--line);padding:.8rem .5rem;display:flex;flex-direction:column;gap:.5rem;position:sticky;top:56px;height:calc(100vh - 56px)}
.app-side button{background:none;border:1.5px solid transparent;border-radius:16px;padding:.6rem .2rem;font-size:.72rem;font-weight:800;color:var(--muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.25rem}
.app-side button i{font-style:normal;font-size:1.4rem;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--paper-2)}
.app-side button.on{border-color:var(--blue);color:var(--blue)} .app-side button.on i{background:var(--blue)}
.app-main{grid-area:main;padding:1.2rem 1.5rem 7rem;min-height:calc(100vh - 56px)}
.app-main.is-hub{background:transparent;padding:0}
#app:has(.is-hub){background:transparent}
#app:has(.is-hub) .app-side{background:rgba(255,255,255,.9);backdrop-filter:blur(10px)}
.page{max-width:1100px;margin:0 auto}
.page h2{margin-bottom:.8rem}
.row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;margin-bottom:.6rem}
#app .tabs button{border-color:var(--line);background:#fff;color:var(--muted);backdrop-filter:none}
#app .tabs button.on{background:var(--blue);color:#fff;border-color:var(--blue)}

/* hub */
.hub-overlay{min-height:calc(100vh - 56px);display:flex;flex-direction:column;justify-content:space-between;padding:1.2rem 1.5rem 7rem;pointer-events:none}
.hub-overlay>*{pointer-events:auto}
.hub-head{background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-radius:var(--radius);padding:1rem 1.3rem;max-width:520px;box-shadow:var(--shadow)}
.hub-head p{color:var(--muted);font-weight:700;font-size:.9rem}
.islands{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.7rem;margin-top:1rem;max-width:1100px}
.isl{background:linear-gradient(180deg,#fff,#f4f6ff);border:0;border-radius:24px;padding:1.1rem .8rem .8rem;display:grid;justify-items:center;gap:.25rem;cursor:pointer;box-shadow:0 10px 30px rgba(10,26,74,.15);border-bottom:6px solid var(--c);transition:transform .2s;text-align:center;position:relative}
.isl:hover{transform:translateY(-6px) scale(1.03)}
.isl i{width:118px;height:96px;border-radius:50%;display:grid;place-items:end center;background:radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--c) 55%,#fff) 0,color-mix(in srgb,var(--c) 20%,#fff) 45%,transparent 72%);margin-top:-.4rem}
.isl i img{width:112px;height:112px;object-fit:contain;filter:drop-shadow(0 12px 12px rgba(0,0,0,.3));transform:translateY(8px);transition:transform .25s}
.isl:hover i img{transform:translateY(0) scale(1.08) rotate(-3deg)}
.isl b{font-family:var(--font-head);font-size:.95rem;line-height:1.15} .isl small{color:var(--muted);font-weight:700;font-size:.7rem}
.ring{--p:0;--c:#2f7bff;width:42px;height:42px;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p)*1%),#e6ebfb 0);display:grid;place-items:center;font-size:.6rem;font-weight:900;margin-top:.2rem}
.ring span{width:32px;height:32px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--c)}
.ring.big{width:84px;height:84px;font-size:1rem} .ring.big span{width:66px;height:66px}
.hub-foot{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1rem}
.daily{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-radius:16px;padding:.7rem 1rem;box-shadow:var(--shadow);display:grid}
.daily b{font-family:var(--font-head)} .daily span{font-size:.82rem;color:var(--muted);font-weight:700}

/* subjects */
.subj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem}
.subj{background:#fff;border:0;border-radius:var(--radius);padding:1.1rem;text-align:left;cursor:pointer;box-shadow:0 10px 30px rgba(10,26,74,.1);border-top:6px solid var(--c);display:grid;gap:.3rem;transition:transform .2s}
.subj:hover{transform:translateY(-5px)}
.subj i{display:block;height:120px;background:radial-gradient(ellipse at 50% 95%,color-mix(in srgb,var(--c) 30%,#fff),transparent 70%)}
.subj i img{height:120px;width:100%;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(0,0,0,.3))} .subj b{font-family:var(--font-head);font-size:1.15rem} .subj small{color:var(--muted);font-weight:700;font-size:.75rem}
.subj ol{margin:.4rem 0 0 1.1rem;font-size:.82rem;color:#2b3358}

/* course path */
.course-hero{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:linear-gradient(120deg,var(--c),var(--c2));color:#fff;border-radius:var(--radius);padding:1.4rem 1.6rem;margin-bottom:1.2rem;box-shadow:var(--shadow)}
.ch-icon{width:130px;height:130px;object-fit:contain;filter:drop-shadow(0 14px 16px rgba(0,0,0,.35));flex-shrink:0}
.course-hero .back{opacity:.85;font-weight:800;font-size:.85rem} .course-hero p{opacity:.9;font-weight:700}
.course-hero .ring{background:conic-gradient(#fff calc(var(--p)*1%),rgba(255,255,255,.3) 0)} .course-hero .ring span{background:transparent;color:#fff}
.path{display:grid;gap:.7rem;position:relative;padding-left:10px}
.node{display:flex;gap:1rem;align-items:center;background:#fff;border:2px solid transparent;border-radius:20px;padding:.8rem 1rem;text-align:left;cursor:pointer;box-shadow:0 8px 24px rgba(10,26,74,.08);transition:transform .15s}
.node:hover:not([disabled]){transform:translateX(6px);border-color:var(--c)}
.node .n{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,var(--c),var(--c2));color:#fff;font-family:var(--font-head);font-size:1.3rem;font-weight:700;display:grid;place-items:center;flex-shrink:0;box-shadow:0 6px 14px color-mix(in srgb,var(--c) 40%,transparent)}
.node.done .n{background:linear-gradient(135deg,var(--yellow),var(--orange))}
.node.locked{opacity:.55;cursor:not-allowed} .node.locked .n{background:#cfd6f5}
.node b{font-family:var(--font-head);font-size:1.05rem;display:block} .node small{color:var(--muted);font-weight:700;font-size:.78rem;display:flex;gap:.25rem;align-items:center}
.node small i{font-style:normal;opacity:.35} .node small i.ok{opacity:1}

/* lesson */
.lesson .back{font-weight:800;color:var(--muted);font-size:.85rem}
.lesson h2{margin:.3rem 0 .2rem} .meta{color:var(--muted);font-weight:800;font-size:.85rem;margin-bottom:1rem}
.lesson-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:1.3rem;align-items:start}
.player{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:linear-gradient(135deg,var(--c),var(--c2));display:grid;place-items:center;box-shadow:var(--shadow);cursor:pointer}
.player .pg{position:absolute;left:1%;bottom:2%;height:90%;width:auto;filter:drop-shadow(0 10px 20px rgba(0,0,0,.3))}
.player .ptitle{position:absolute;right:1.4rem;top:1.2rem;color:#fff;font-family:var(--font-head);font-size:1.5rem;font-weight:700;text-align:right;text-shadow:0 4px 12px rgba(0,0,0,.4);max-width:60%}
.player .ptitle small{display:block;font-family:var(--font-body);font-size:.85rem;font-weight:700;opacity:.9}
.player .play{width:84px;height:84px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--c);font-size:2rem;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .2s;z-index:1}
.player:hover .play{transform:scale(1.08)} .player.playing .play{display:none}
.player .scrub{position:absolute;left:0;right:0;bottom:0;height:8px;background:rgba(255,255,255,.3)}
.player .scrub span{display:block;height:100%;background:var(--yellow);width:0;transition:width .4s linear}
.reader,.arena,.quiz{background:#fff;border-radius:20px;padding:1.4rem;box-shadow:var(--shadow);display:grid;gap:.8rem}
.reader p{color:#2b3358}
.vocab{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.vocab div{background:var(--paper-2);border-radius:14px;padding:.7rem .9rem;display:grid} .vocab b{font-family:var(--font-head)} .vocab span{font-size:.75rem;color:var(--muted);font-weight:700}
.steps{margin-left:1.2rem;display:grid;gap:.3rem;color:#2b3358}
.res{display:flex;gap:.5rem;flex-wrap:wrap}
.res a{background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:.35rem .85rem;font-size:.82rem;font-weight:800;color:var(--blue-d)}
.arena .q,.quiz p{font-family:var(--font-head);font-size:1.3rem;font-weight:600}
.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.opts button{border:2px solid var(--line);background:#fff;border-radius:16px;padding:.9rem;font-family:var(--font-head);font-weight:600;font-size:1.05rem;cursor:pointer;transition:transform .1s}
.opts button:hover{transform:scale(1.02);border-color:var(--c)}
.opts button.ok{background:var(--green);color:#fff;border-color:var(--green)} .opts button.bad{background:#ffd9d9;border-color:#ffb3b3}
.combo{font-weight:800;color:var(--muted)} .stars{font-size:1.3rem;letter-spacing:.1em}
.panel{background:#fff;border-radius:18px;padding:1.1rem 1.2rem;box-shadow:0 8px 24px rgba(10,26,74,.08);margin-bottom:1rem}
.panel h4{font-family:var(--font-head);font-size:1.05rem;margin-bottom:.5rem}
.list{display:grid;gap:.45rem}
.list button{display:flex;gap:.7rem;align-items:center;text-align:left;background:var(--paper-2);border:2px solid transparent;border-radius:14px;padding:.6rem .8rem;cursor:pointer;color:var(--ink)}
.list button.on{border-color:var(--c,var(--blue));background:#fff} .list button.ok i{background:var(--green)}
.list button b{font-size:.92rem;font-family:var(--font-head)} .list button small{color:var(--muted);font-size:.72rem;display:block;font-weight:700}
.list button i{font-style:normal;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--c,var(--blue));color:#fff;font-size:1rem;flex-shrink:0}

/* rewards / teacher / family */
.reward-stats,.teacher-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-bottom:1rem}
.reward-stats div,.teacher-stats div{background:#fff;border-radius:16px;padding:.9rem 1rem;box-shadow:0 8px 24px rgba(10,26,74,.08)}
.reward-stats b,.teacher-stats b{font-family:var(--font-head);font-size:1.6rem;color:var(--blue);display:block;line-height:1.1}
.reward-stats span,.teacher-stats span{font-size:.75rem;color:var(--muted);font-weight:800}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem;margin-bottom:1rem}
.badge{background:#fff;border-radius:18px;padding:1rem;text-align:center;display:grid;gap:.2rem;opacity:.45;filter:grayscale(1);box-shadow:0 8px 24px rgba(10,26,74,.08)}
.badge.won{opacity:1;filter:none;outline:3px solid var(--yellow)}
.badge i{font-style:normal;font-size:2.2rem} .badge b{font-family:var(--font-head)} .badge small{font-size:.72rem;color:var(--muted);font-weight:700}
.assign{display:grid;gap:.5rem}
.assign label{display:grid;grid-template-columns:1.2fr 2fr auto;gap:.6rem;align-items:center;font-weight:800;font-size:.9rem;border-left:4px solid var(--c);padding-left:.7rem}
.assign select{padding:.5rem;border-radius:10px;border:1.5px solid var(--line);font:inherit;min-width:0}
.tbl{width:100%;border-collapse:collapse;font-size:.88rem}
.tbl th{text-align:left;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;padding:.4rem .5rem;border-bottom:2px solid var(--line)}
.tbl td{padding:.5rem;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.bar{height:8px;background:#e6ebfb;border-radius:9px;overflow:hidden;width:70px;display:inline-block;vertical-align:middle;margin-right:.4rem}
.bar span{display:block;height:100%;background:linear-gradient(90deg,var(--green),#7be495)}

/* Gabby dock */
.gabby-dock{position:fixed;right:0;bottom:0;z-index:95;display:flex;flex-direction:row-reverse;align-items:flex-end;gap:.4rem;pointer-events:none}
body.app-open>main,body.app-open>#nav,body.app-open>#world-hint{display:none}
.gabby-dock img{width:150px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.3));animation:bob 3s ease-in-out infinite}
.gabby-dock .say{background:#fff;border-radius:18px 18px 4px 18px;padding:.6rem .9rem;margin-bottom:60px;font-family:var(--font-head);font-weight:600;max-width:300px;box-shadow:var(--shadow);transition:opacity .2s;font-size:.95rem}
.band-elementary .gabby-dock img{width:180px} .band-elementary .gabby-dock .say{font-size:1.05rem}
.band-elementary .isl i img{width:124px;height:124px} .band-elementary .node .n{width:58px;height:58px}
.band-high .isl{border-radius:14px} .band-high .isl i{border-radius:12px} .band-high .node{border-radius:14px}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:.7rem 1.2rem;border-radius:999px;font-weight:800;z-index:99;box-shadow:var(--shadow);animation:pop .3s}

@media (max-width:900px){
  #nav nav{display:none} .burger{display:block;margin-left:auto} #nav>.btn{display:none}
  #nav.open nav{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:rgba(8,21,63,.95);padding:1rem 5vw;gap:1rem}
  .hero{grid-template-columns:1fr;padding-top:12vh} .hero::before{background:linear-gradient(180deg,rgba(6,16,54,.8),rgba(6,16,54,.5))}
  .hero-gabby{min-height:0} .hero-gabby img{width:60%} .bubble{margin-left:0}
  .how-grid,.pillars,.feature-card,.split,.cast,.foot-grid{grid-template-columns:1fr} .friends{grid-template-columns:1fr 1fr} .friend img{height:140px}
  .split-flip .split-body{order:0}
  .spacer{height:12vh} #world-hint{display:none}
  .modal-gabby{display:none} .grade-pick{grid-template-columns:repeat(5,1fr)}
  #app{grid-template-columns:1fr;grid-template-rows:56px auto 1fr;grid-template-areas:"top" "side" "main"}
  .app-side{flex-direction:row;height:auto;border-right:0;border-bottom:1px solid var(--line);position:static;overflow-x:auto}
  .app-side button{flex:1;min-width:70px}
  .lesson-grid{grid-template-columns:1fr} .reward-stats,.teacher-stats{grid-template-columns:repeat(2,1fr)}
  .gabby-dock{right:0} .gabby-dock img{width:90px!important} .gabby-dock .say{max-width:220px;font-size:.85rem!important}
  .assign label{grid-template-columns:1fr} .app-top .crumb{display:none} .xpbar{width:70px}
  .course-hero{flex-direction:column;align-items:flex-start}
}

.school-media{position:relative;min-height:420px;display:block;padding:2rem 0}
.sm-castle{width:78%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5));animation:bob 5s ease-in-out infinite}
.sm-gabby{position:absolute;width:38%;left:-4%;top:6%;filter:drop-shadow(0 20px 20px rgba(0,0,0,.4));animation:bob 3s ease-in-out infinite}
.sm-card{position:absolute;right:0;top:14%;background:#fff;color:var(--ink);border-radius:16px;padding:.7rem 1rem;box-shadow:var(--shadow);display:grid;gap:.2rem;min-width:190px}
.sm-card.two{top:auto;bottom:6%;right:8%}
.sm-card b{font-family:var(--font-head)} .sm-card span{font-size:.8rem;color:var(--muted);font-weight:700}
.sm-card i{display:block;height:8px;border-radius:9px;background:linear-gradient(90deg,var(--green) calc(var(--p)*1%),#e6ebfb 0)}

/* ---- rooms (AI backgrounds + 3D characters) ---- */
.player{background-size:cover;background-position:center}
.player::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,16,54,.05),rgba(6,16,54,.45))}
.player .pk{position:absolute;right:3%;bottom:0;height:70%;filter:drop-shadow(0 10px 20px rgba(0,0,0,.3))}
.board{position:absolute;left:50%;top:8%;transform:translateX(-50%);background:rgba(10,26,74,.88);color:#fff;border:3px solid var(--yellow);border-radius:16px;padding:.6rem 1.2rem;font-family:var(--font-head);font-size:1.4rem;font-weight:700;text-align:center;max-width:70%;box-shadow:0 10px 30px rgba(0,0,0,.35);text-wrap:balance}
.board small{display:block;font-family:var(--font-body);font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--yellow)}
.stage{position:relative;aspect-ratio:16/7;border-radius:20px;overflow:hidden;background-size:cover;background-position:center;box-shadow:var(--shadow);margin-bottom:1rem}
.stage::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,16,54,0),rgba(6,16,54,.35))}
.stage .sg{position:absolute;left:2%;bottom:-2%;height:92%;filter:drop-shadow(0 10px 20px rgba(0,0,0,.35));animation:bob 3s ease-in-out infinite}
.stage .sf{position:absolute;right:3%;bottom:0;height:72%;filter:drop-shadow(0 10px 20px rgba(0,0,0,.35))}
.stage .board{top:12%;font-size:1.25rem}
.room-bg{position:absolute;inset:0;background-size:cover;background-position:center top;opacity:.22;pointer-events:none;mask-image:linear-gradient(#000 40%,transparent);-webkit-mask-image:linear-gradient(#000 40%,transparent)}
.lesson{position:relative} .lesson>*:not(.room-bg){position:relative}
.course-hero{background-size:cover;background-position:center;position:relative;overflow:hidden}
.course-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 85%,#000) 0,color-mix(in srgb,var(--c) 55%,transparent) 55%,transparent)}
.course-hero>*{position:relative}
.isl i,.subj i{background-size:cover;background-position:center;position:relative;overflow:hidden}
.isl i{width:100%;height:110px;border-radius:16px;place-items:end center;margin:0 0 .3rem}
.isl i::after,.subj i::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(255,255,255,.65))}
.isl i img,.subj i img{position:relative;z-index:1}
.subj i{border-radius:14px;height:130px;display:grid;place-items:end center} .subj i img{height:118px;transform:translateY(4px);filter:drop-shadow(0 8px 10px rgba(0,0,0,.35))}
.band-elementary .isl i img{width:112px;height:112px}
.banner{background-size:cover;background-position:center;position:relative} .banner::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,16,54,.85),rgba(6,16,54,.25));border-radius:inherit} .banner>*{position:relative} .banner::after{z-index:1}
.ccard{background:#fff url() no-repeat}
#world-fallback{display:none}
@media (max-width:900px){.stage{aspect-ratio:16/9} .stage .board,.player .board{font-size:.95rem;top:6%} .board small{font-size:.6rem}}

.how{position:relative;overflow:hidden}
.how::before{content:"";position:absolute;inset:0;background:var(--bg) center/cover;opacity:.18;mask-image:linear-gradient(#000,transparent 70%);-webkit-mask-image:linear-gradient(#000,transparent 70%)}
.how>*{position:relative}
.rooms{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.room{position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border-bottom:6px solid var(--c);transition:transform .25s}
.room:hover{transform:translateY(-8px) scale(1.02)}
.room .rbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.room .rch{position:absolute;left:4%;bottom:-2%;height:78%;width:auto;filter:drop-shadow(0 10px 16px rgba(0,0,0,.4))}
.room b{position:absolute;right:.8rem;bottom:.8rem;background:rgba(255,255,255,.95);color:var(--ink);font-family:var(--font-head);padding:.35rem .8rem;border-radius:999px;font-size:.95rem;box-shadow:0 6px 16px rgba(0,0,0,.25)}
@media (max-width:900px){.rooms{grid-template-columns:1fr 1fr}}

/* ===== LESSON ROOM (ABCmouse-style stage) ===== */
.app-main:has(.lesson){padding:0 0 7rem}
.lesson .lroom{position:relative;height:min(62vh,560px);background-size:cover;background-position:center;overflow:hidden;box-shadow:inset 0 -80px 80px -40px rgba(6,16,54,.55)}
.room-top{position:absolute;left:1.2rem;right:1.2rem;top:1rem;display:flex;justify-content:space-between;gap:.5rem;z-index:4}
.chip{background:rgba(255,255,255,.92);color:var(--ink);border-radius:999px;padding:.4rem .9rem;font-weight:800;font-size:.85rem;box-shadow:0 6px 16px rgba(0,0,0,.25);backdrop-filter:blur(8px)}

.lesson .ch.gabby{left:3%;height:72%;animation:bob 3.4s ease-in-out infinite}
.lesson .ch.buddy{right:4%;height:66%;animation:bob 4s ease-in-out infinite reverse}
.lesson .prop{position:absolute;filter:drop-shadow(0 14px 14px rgba(0,0,0,.35));z-index:2;pointer-events:none}
.lesson .prop.p1{left:24%;top:8%;height:26%;animation:floaty 5s ease-in-out infinite}
.lesson .prop.p2{right:24%;top:10%;height:22%;animation:floaty 6s ease-in-out infinite 1s}
.lesson .prop.p3{left:14%;bottom:10%;height:20%;animation:floaty 7s ease-in-out infinite 2s;opacity:.9}
@keyframes floaty{50%{transform:translateY(-14px) rotate(3deg)}}
.lesson .board{top:auto;bottom:40%;left:50%;transform:translateX(-50%);font-size:clamp(1.2rem,2.4vw,1.9rem);max-width:50%;z-index:3;border-width:4px;border-radius:22px;padding:.8rem 1.6rem;background:rgba(10,26,74,.9)}
.steps3d{position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);display:flex;gap:.6rem;z-index:4}
.s3{display:grid;justify-items:center;gap:.15rem;border:0;background:rgba(255,255,255,.92);border-radius:18px;padding:.5rem .9rem;cursor:pointer;min-width:84px;box-shadow:0 10px 22px rgba(0,0,0,.3),inset 0 -5px 0 rgba(0,0,0,.12);transition:transform .15s;font-weight:800;font-size:.72rem;color:var(--muted)}
.s3 i{font-style:normal;font-size:1.3rem;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--paper-2)}
.s3.on{background:linear-gradient(180deg,var(--yellow),var(--orange));color:#2a1600;transform:translateY(-8px) scale(1.06)} .s3.on i{background:rgba(255,255,255,.7)}
.s3.ok i{background:var(--green);color:#fff}
.s3:hover{transform:translateY(-6px)}
.lp{display:grid;grid-template-columns:1.6fr 1fr;gap:1.2rem;padding:1.2rem 1.5rem;margin-top:-2.4rem;position:relative;z-index:5;max-width:1100px;margin-inline:auto}
.lp-card{background:#fff;border-radius:26px;padding:1.4rem;box-shadow:var(--shadow);border-top:8px solid var(--c)}
.glass{background:rgba(255,255,255,.75);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.9);border-radius:22px;padding:1rem 1.2rem;box-shadow:var(--shadow);margin-bottom:.9rem}
.glass h4{font-family:var(--font-head);font-size:1.05rem;margin-bottom:.3rem}
.lp-video p,.lp-read p{color:#2b3358;margin:.8rem 0}
.lp-screen{position:relative;aspect-ratio:16/8;border-radius:18px;overflow:hidden;cursor:pointer;background:#000}
.lp-screen img{width:100%;height:100%;object-fit:cover;opacity:.8}
.lp-screen .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--c);font-size:2rem;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.lp-video.playing .play{display:none}
.lp-screen .scrub{position:absolute;left:0;right:0;bottom:0;height:8px;background:rgba(255,255,255,.3)} .lp-screen .scrub span{display:block;height:100%;background:var(--yellow);width:0;transition:width .4s linear}
.vc{border:2px solid var(--line);background:linear-gradient(180deg,#fff,var(--paper-2));border-radius:16px;padding:.8rem;display:grid;gap:.15rem;cursor:pointer;text-align:left;box-shadow:inset 0 -4px 0 rgba(0,0,0,.06)} .vc b{font-family:var(--font-head);font-size:1.1rem} .vc span{font-size:.75rem;color:var(--muted);font-weight:800}
.vc:hover{border-color:var(--c)}
.lp-arena{display:grid;gap:.9rem} .lp-arena .q{font-family:var(--font-head);font-size:1.5rem;font-weight:600}
@media (max-width:900px){
  .lesson .lroom{height:52vh} .lesson .ch.gabby{height:60%;left:0} .lesson .ch.buddy{display:none} .lesson .prop.p3{display:none}
  .lesson .board{max-width:80%;bottom:auto;top:20%;font-size:1rem} .steps3d{gap:.35rem} .s3{min-width:56px;padding:.4rem .5rem} .s3 b{display:none}
  .lp{grid-template-columns:1fr;padding:1rem}
}

/* ===== APP CHROME v2 (mobile-app feel) ===== */
#app{grid-template-columns:1fr;grid-template-rows:60px 1fr;grid-template-areas:"top" "main";background:#0b1d5c}
.app-top{background:linear-gradient(90deg,#1c2fb8,#5b2fd6 60%,#8a2be2);height:60px;gap:.6rem}
.pill{background:rgba(255,255,255,.18);border-radius:999px;padding:.25rem .7rem;font-weight:800;font-size:.85rem;white-space:nowrap}
.pill.lvl{background:var(--yellow);color:#2a1600;font-family:var(--font-head)}
.app-top .xpbar{width:110px;height:10px}
.app-top .user{margin-left:auto}
.app-main{padding:0 0 92px;min-height:calc(100vh - 60px);background:#eef2fb}
.app-main.view-hub,.app-main.view-course{background:transparent;padding:0}
#app:has(.view-hub){background:transparent}
.app-nav{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:96;display:flex;gap:.3rem;background:rgba(12,22,80,.85);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:.35rem;box-shadow:0 14px 40px rgba(0,0,0,.4)}
.app-nav button{display:flex;align-items:center;gap:.4rem;border:0;background:transparent;color:#cfd6ff;font-weight:800;font-size:.85rem;padding:.55rem 1rem;border-radius:999px;cursor:pointer}
.app-nav button i{font-style:normal;font-size:1.1rem}
.app-nav button.on{background:linear-gradient(135deg,var(--yellow),var(--orange));color:#2a1600}
.app-side{display:none}
.gabby-dock{right:0;bottom:64px}
/* hub map with pins */
.hub{position:relative;min-height:calc(100vh - 60px);pointer-events:none}
.hub>*{pointer-events:auto}
.pins{position:fixed;inset:0;pointer-events:none;z-index:3}
.pin{position:fixed;left:0;top:0;pointer-events:auto;border:0;background:transparent;display:grid;justify-items:center;gap:.1rem;cursor:pointer;transition:opacity .3s;will-change:transform}
.pin-ring{--p:0;width:86px;height:86px;border-radius:50%;padding:5px;background:conic-gradient(var(--yellow) calc(var(--p)*1%),rgba(255,255,255,.35) 0);box-shadow:0 14px 30px rgba(0,0,0,.45);display:grid;place-items:center;transition:transform .2s}
.pin-ring::before{content:"";position:absolute;width:76px;height:76px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,color-mix(in srgb,var(--c) 25%,#fff))}
.pin-ring img{position:relative;width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(0,0,0,.3))}
.pin::after{content:"";width:14px;height:14px;background:var(--yellow);transform:rotate(45deg);margin-top:-14px;border-radius:2px;order:1}
.pin b{order:2;margin-top:.5rem;background:rgba(255,255,255,.95);color:var(--ink);font-family:var(--font-head);padding:.2rem .7rem;border-radius:999px;font-size:.85rem;box-shadow:0 6px 14px rgba(0,0,0,.3)}
.pin small{order:3;color:#fff;font-weight:800;font-size:.7rem;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.pin:hover .pin-ring{transform:scale(1.12)}
.hub-hud{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:4;width:min(640px,94vw)}
.hud-card{display:flex;align-items:center;gap:.9rem;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-radius:22px;padding:.7rem 1rem;box-shadow:var(--shadow)}
.hud-card>img{width:70px;height:70px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.3))}
.hud-card div{flex:1;display:grid} .hud-card small{font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:var(--pink)} .hud-card b{font-family:var(--font-head);font-size:1.05rem;line-height:1.15} .hud-card span{font-size:.78rem;color:var(--muted);font-weight:700}
.hub-title{position:fixed;left:1.2rem;top:76px;z-index:4;color:#fff;display:grid;text-shadow:0 3px 10px rgba(0,0,0,.6)} .hub-title b{font-family:var(--font-head);font-size:1.5rem} .hub-title span{font-weight:800;font-size:.8rem;opacity:.9}
/* course map */
.cmap{position:relative;min-height:calc(100vh - 60px);background-size:cover;background-position:center;overflow:hidden}
.cmap::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,16,54,.15),rgba(6,16,54,.55))}
.cmap .chip img{height:26px;vertical-align:middle;margin-right:.3rem}
.trail{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.trail path{fill:none;stroke:#fff;stroke-width:1.2;stroke-dasharray:2 2;opacity:.85;vector-effect:non-scaling-stroke;stroke-width:6px;stroke-linecap:round;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4))}
.upin{position:absolute;transform:translate(-50%,-50%);border:0;background:transparent;display:grid;justify-items:center;gap:.3rem;cursor:pointer;z-index:3;width:150px}
.upin span{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--c2) 40%,var(--c));color:#fff;font-family:var(--font-head);font-size:1.5rem;font-weight:700;display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.45),inset 0 -6px 0 rgba(0,0,0,.2),0 0 0 5px rgba(255,255,255,.85);transition:transform .2s}
.upin b{background:rgba(255,255,255,.95);color:var(--ink);font-family:var(--font-head);font-weight:600;font-size:.78rem;padding:.25rem .6rem;border-radius:12px;text-align:center;line-height:1.15;box-shadow:0 6px 14px rgba(0,0,0,.3)}
.upin.done span{background:radial-gradient(circle at 35% 30%,#fff,var(--yellow) 40%,var(--orange))}
.upin.locked{opacity:.55;cursor:not-allowed} .upin.locked span{background:#9aa3c8}
.upin.cur span{transform:scale(1.15);animation:pulse 1.6s infinite} @keyframes pulse{50%{box-shadow:0 10px 24px rgba(0,0,0,.45),inset 0 -6px 0 rgba(0,0,0,.2),0 0 0 14px rgba(255,255,255,.25)}}
.upin:hover:not([disabled]) span{transform:scale(1.15)}
.cm-gabby{position:absolute;height:150px;transform:translate(-90%,-115%);filter:drop-shadow(0 14px 16px rgba(0,0,0,.45));animation:bob 3s ease-in-out infinite;z-index:4;pointer-events:none}
.cm-friend{position:absolute;right:3%;bottom:150px;height:30%;filter:drop-shadow(0 14px 16px rgba(0,0,0,.45));z-index:2;pointer-events:none}
.cm-panel{position:absolute;left:50%;bottom:86px;transform:translateX(-50%);width:min(720px,94vw);display:flex;align-items:center;gap:1rem;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-radius:24px;padding:.8rem 1rem;box-shadow:var(--shadow);z-index:5}
.cm-panel>img{width:80px;height:80px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.3))}
.cm-panel div{flex:1;display:grid} .cm-panel small{font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:var(--c)} .cm-panel b{font-family:var(--font-head);font-size:1.2rem;line-height:1.1} .cm-panel span{font-size:.78rem;color:var(--muted);font-weight:700}
.lesson .lroom{height:min(56vh,520px)}
.lp{margin-top:-1.6rem;padding-bottom:1rem}
@media (max-width:900px){
  #app{grid-template-rows:60px 1fr;grid-template-areas:"top" "main"} .app-top .xpbar{width:60px} .app-top .user span{display:none}
  .pin-ring{width:64px;height:64px} .pin-ring::before{width:54px;height:54px} .pin-ring img{width:46px;height:46px} .pin b{font-size:.72rem}
  .upin{width:110px} .upin span{width:50px;height:50px;font-size:1.2rem} .upin b{font-size:.68rem} .cm-friend{display:none} .cm-gabby{height:100px}
  .cm-panel{flex-wrap:wrap} .cm-panel .btn{width:100%} .hud-card{flex-wrap:wrap} .hub-title{top:70px}
  .app-nav button{padding:.5rem .7rem;font-size:.75rem} .gabby-dock{bottom:70px}
}

/* games grid */
.games{padding:1.2rem 1.5rem} .pill.dark{background:var(--navy);color:#fff}
#app .tabs button img{height:22px;vertical-align:middle;margin-right:.25rem}
.gt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.9rem}
.gt{position:relative;aspect-ratio:1.15;border:0;border-radius:22px;overflow:hidden;background-size:cover;background-position:center;cursor:pointer;box-shadow:0 12px 28px rgba(10,26,74,.2),inset 0 -6px 0 rgba(0,0,0,.18);text-align:left;color:#fff;transition:transform .2s;border:4px solid #fff;outline:3px solid var(--c)}
.gt::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,16,54,.05),rgba(6,16,54,.75))}
.gt:hover{transform:translateY(-6px) scale(1.03)}
.gt-ch{position:absolute;right:2%;bottom:14%;height:64%;filter:drop-shadow(0 8px 10px rgba(0,0,0,.4))}
.gt-q{position:absolute;left:.8rem;top:.8rem;max-width:62%;background:rgba(255,255,255,.95);color:var(--ink);border-radius:14px;padding:.5rem .7rem;font-family:var(--font-head);font-weight:700;font-size:1.05rem;line-height:1.15;box-shadow:0 6px 14px rgba(0,0,0,.3)}
.gt-foot{position:absolute;left:.8rem;right:.8rem;bottom:2.2rem;display:flex;justify-content:space-between;font-weight:800;font-size:.8rem;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.gt-foot b{color:var(--yellow)}
.gt small{position:absolute;left:.8rem;right:.8rem;bottom:.7rem;font-size:.68rem;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}

/* ===== v3: login, course map, lesson, games, rewards ===== */
.login-card{max-width:900px;padding:0;display:grid;grid-template-columns:1fr 1.25fr;overflow:hidden;border-radius:30px}
.login-side{position:relative;background:radial-gradient(circle at 30% 20%,#7ec8ff,#1442d6 55%,#0a1a4a);min-height:560px;overflow:hidden}
.ls-castle{position:absolute;left:50%;top:10%;width:78%;transform:translateX(-50%);filter:drop-shadow(0 30px 40px rgba(0,0,0,.5));animation:bob 5s ease-in-out infinite}
.ls-gabby{position:absolute;left:6%;bottom:14%;width:46%;filter:drop-shadow(0 20px 24px rgba(0,0,0,.5));animation:bob 3s ease-in-out infinite}
.ls-tree{position:absolute;right:4%;bottom:12%;width:30%;filter:drop-shadow(0 16px 20px rgba(0,0,0,.45))}
.ls-text{position:absolute;left:1.4rem;right:1.4rem;bottom:1.4rem;color:#fff;display:grid;text-shadow:0 3px 10px rgba(0,0,0,.5)} .ls-text b{font-family:var(--font-head);font-size:1.35rem} .ls-text span{font-size:.8rem;font-weight:800;opacity:.9}
.login-main{padding:1.8rem 2rem 1.6rem}
.gbtn{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;border:2px solid var(--line);background:#fff;border-radius:999px;padding:.75rem;font-family:var(--font-head);font-weight:600;font-size:1rem;cursor:pointer;box-shadow:0 4px 12px rgba(10,26,74,.08)}
.gbtn:hover{border-color:#4285F4;background:#f6f9ff}
.or{display:flex;align-items:center;gap:.8rem;color:var(--muted);font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em} .or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.avatars{grid-template-columns:repeat(4,1fr);gap:.6rem}
.avatars span{padding:.3rem;border-radius:18px;gap:.3rem}
.avatars .ring{width:74px;height:74px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,color-mix(in srgb,var(--c) 35%,#fff));display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 -5px 0 color-mix(in srgb,var(--c) 40%,transparent),0 6px 14px rgba(10,26,74,.12);font-style:normal}
.avatars .ring img{width:82%;height:82%;object-fit:contain;transform:translateY(6%)}
.avatars b{font-family:var(--font-head);font-size:.8rem;color:var(--ink)}
.avatars input:checked+span{background:#fff8e1;border-color:var(--yellow)} .avatars input:checked+span .ring{box-shadow:0 0 0 3px var(--yellow),0 6px 14px rgba(10,26,74,.2)}
.avatar{width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,color-mix(in srgb,var(--c,#ff3e9a) 40%,#fff));display:grid;place-items:center;overflow:hidden;border:2px solid #fff}
.avatar img{width:82%;height:82%;object-fit:contain;transform:translateY(6%)}
@media (max-width:900px){.login-card{grid-template-columns:1fr} .login-side{min-height:200px} .ls-castle{width:50%;top:4%} .ls-gabby{width:28%} .ls-tree{width:18%} .ls-text{display:none} .login-main{padding:1.2rem}}

/* shine text (animated) */
.shine{background:linear-gradient(90deg,#fff 0%,#fff 40%,var(--yellow) 50%,#fff 60%,#fff 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 3.2s linear infinite}
@keyframes shine{to{background-position:-150% 0}}
.cm-title{position:absolute;left:50%;top:1rem;transform:translateX(-50%);z-index:3;text-align:center;color:#fff;text-shadow:0 4px 14px rgba(0,0,0,.5);font-size:clamp(1.6rem,3.4vw,2.6rem);pointer-events:none;width:max-content;max-width:80vw}
.cm-title small{display:block;font-family:var(--font-body);font-size:.8rem;font-weight:800;opacity:.9;letter-spacing:.06em;text-transform:uppercase;color:#fff;-webkit-text-fill-color:#fff}
.cmap::before{background:linear-gradient(180deg,rgba(6,16,54,.35),rgba(6,16,54,.25) 30%,rgba(6,16,54,.6))}
.cm-deco{position:absolute;filter:drop-shadow(0 16px 18px rgba(0,0,0,.45));pointer-events:none;z-index:1}
.cm-deco.a{left:2%;bottom:24%;height:26%;animation:floaty 6s ease-in-out infinite}
.cm-deco.b{right:3%;top:14%;height:22%;animation:floaty 7s ease-in-out infinite 1s}
.cm-deco.c{left:38%;top:8%;height:16%;animation:floaty 5s ease-in-out infinite 2s}
.cm-deco.d{right:6%;bottom:26%;height:30%;animation:bob 5s ease-in-out infinite}
.trail .tr-bg,.trail .tr-fg{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-width:10px}
.trail .tr-bg{stroke:rgba(255,255,255,.55);stroke-dasharray:none;opacity:1;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.trail .tr-fg{stroke:var(--yellow);stroke-dasharray:100;transition:stroke-dashoffset 1s}
.trail path{stroke-dasharray:none}
.upin{width:170px;gap:.35rem}
.upin .n{width:70px;height:70px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--c2) 40%,var(--c));color:#fff;font-family:var(--font-head);font-size:1.6rem;font-weight:700;display:grid;place-items:center;box-shadow:0 12px 26px rgba(0,0,0,.45),inset 0 -7px 0 rgba(0,0,0,.2),0 0 0 6px rgba(255,255,255,.9);transition:transform .2s}
.upin b{font-size:.8rem;padding:.3rem .7rem;border-radius:14px;max-width:170px}
.upin small{display:flex;gap:3px} .upin small i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.55);border:1.5px solid #fff} .upin small i.ok{background:var(--yellow)}
.upin.done .n{background:radial-gradient(circle at 35% 30%,#fff,var(--yellow) 40%,var(--orange))}
.upin.locked .n{background:radial-gradient(circle at 35% 30%,#fff,#b9c1de 40%,#8a94b8)} .upin.locked{opacity:.8}
.upin.cur .n{transform:scale(1.15);animation:pulse 1.6s infinite}
.cm-gabby{height:140px;transform:translate(-95%,-118%)}
.cm-panel{bottom:80px;padding:.9rem 1.1rem;border:3px solid #fff;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.cm-panel span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* lesson room v3 */
.lesson .lroom{height:min(46vh,400px);box-shadow:inset 0 -100px 100px -50px rgba(6,16,54,.6)}
.lesson .prop.p1{left:4%;bottom:4%;height:46%;top:auto;animation:floaty 6s ease-in-out infinite}
.lesson .prop.p2{right:5%;bottom:6%;height:40%;top:auto;animation:floaty 7s ease-in-out infinite 1s}
.lesson .prop.p3{left:auto;right:24%;top:8%;bottom:auto;height:30%;animation:bob 5s ease-in-out infinite;opacity:1}
.lesson .board{bottom:auto;top:22%;max-width:60%;background:rgba(10,26,74,.92)}
.lesson .board .shine{-webkit-text-fill-color:transparent}
.slide{display:grid;gap:1rem}
.slide-head{display:flex;gap:.9rem;align-items:center} .slide-head img{width:70px;height:70px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.3))}
.slide-head small{font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:var(--c);display:block} .slide-head b{font-family:var(--font-head);font-size:1.5rem;line-height:1.1;min-height:1.6rem;display:block}
.slide-body{font-size:1.15rem;line-height:1.6;color:#2b3358;min-height:5.5rem;background:var(--paper-2);border-left:5px solid var(--c);padding:1rem 1.2rem;border-radius:0 16px 16px 0}
.slide-nav{display:flex;gap:.4rem} .slide-nav i{height:8px;flex:1;border-radius:9px;background:#e6ebfb} .slide-nav i.seen{background:var(--c2)} .slide-nav i.on{background:var(--c)}
.btn-ghost.dark{color:var(--ink);border-color:var(--line);background:#fff;backdrop-filter:none}
.lead-in{font-size:1.05rem;color:#2b3358}
.vc{position:relative;padding-right:2.4rem} .vc i{position:absolute;right:.7rem;top:.7rem;font-style:normal} .vc.said{border-color:var(--green);background:#f0fff6}
.ar-top{display:flex;justify-content:space-between;font-weight:800;color:var(--muted);font-size:.85rem}
.qbar{height:8px;border-radius:9px;background:#e6ebfb;overflow:hidden} .qbar span{display:block;height:100%;background:linear-gradient(90deg,var(--c2),var(--c))}
.quiz.done{text-align:center;justify-items:center} .big-stars{font-size:3rem;animation:pop .5s}
.glass.gab{display:flex;gap:.6rem;align-items:flex-end} .glass.gab img{width:70px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.3))} .glass.gab p{flex:1;font-family:var(--font-head);font-weight:600;background:#fff;border-radius:16px 16px 16px 4px;padding:.6rem .8rem;box-shadow:0 6px 16px rgba(10,26,74,.12);min-height:2.6rem}
.gabby-dock{display:none}
#app .gabby-dock{display:flex} #app .view-lesson~.gabby-dock,#app .view-games~.gabby-dock,#app .view-class~.gabby-dock,#app .view-rewards~.gabby-dock,#app .view-subjects~.gabby-dock,#app .view-family~.gabby-dock{display:none}

/* games v3 */
.gt-ic{position:absolute;right:3%;bottom:16%;height:50%;filter:drop-shadow(0 8px 10px rgba(0,0,0,.4));transition:transform .25s}
.gt:hover .gt-ic{transform:scale(1.1) rotate(-4deg)}
.gt-q{max-width:72%;font-size:1rem}
.gt::before{background:linear-gradient(180deg,rgba(6,16,54,.12),rgba(6,16,54,.8))}

/* rewards */
.shop{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.6rem}
.item{border:2px solid var(--line);background:linear-gradient(180deg,#fff,var(--paper-2));border-radius:16px;padding:.7rem;display:grid;justify-items:center;gap:.15rem;cursor:pointer} .item i{font-style:normal;font-size:2rem} .item b{font-family:var(--font-head);font-size:.85rem} .item span{font-size:.75rem;color:var(--muted);font-weight:800} .item.locked{opacity:.5}
.week{display:flex;gap:.6rem;align-items:flex-end;height:120px} .week div{flex:1;display:grid;grid-template-rows:1fr auto;height:100%;justify-items:center;gap:.3rem} .week span{align-self:end;width:70%;background:linear-gradient(180deg,var(--yellow),var(--orange));border-radius:8px 8px 3px 3px;display:block} .week b{font-size:.75rem;color:var(--muted)}
.page{padding:1.2rem 1.5rem}

.t-hero{position:relative;display:flex;align-items:center;gap:1.2rem;border-radius:var(--radius);padding:1.4rem 1.6rem;margin-bottom:1rem;background-size:cover;background-position:center;color:#fff;overflow:hidden;box-shadow:var(--shadow);flex-wrap:wrap}
.t-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,16,54,.9),rgba(6,16,54,.5))} .t-hero>*{position:relative}
.t-castle{height:110px;filter:drop-shadow(0 10px 14px rgba(0,0,0,.4))} .t-hero small{font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:var(--yellow)} .t-hero h2{margin:0} .t-hero span{font-size:.85rem;font-weight:700;opacity:.9}
.t-hero .tabs{margin:0 0 0 auto} #app .t-hero .tabs button{background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.3)} #app .t-hero .tabs button.on{background:var(--yellow);color:#2a1600;border-color:var(--yellow)}
.t-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:1rem}
.assign label span{display:flex;align-items:center;gap:.4rem} .assign label img{height:28px}
.mastery{display:grid;gap:.5rem} .mastery div{display:grid;grid-template-columns:36px 70px 1fr 42px;align-items:center;gap:.5rem;font-size:.85rem;font-weight:800} .mastery img{height:32px} .mastery i{height:12px;border-radius:9px;background:#e6ebfb;overflow:hidden;display:block} .mastery i span{display:block;height:100%;background:linear-gradient(90deg,var(--c2),var(--c))} .mastery em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.flag{background:#ffe1e1;color:#a11;border-radius:999px;padding:.15rem .6rem;font-size:.72rem;font-weight:800}
@media (max-width:900px){.t-grid{grid-template-columns:1fr} .t-hero .tabs{margin:0}}

/* ===== v4 ===== */
.section.wide{max-width:none;padding-left:0;padding-right:0} .section.wide .section-head{margin-left:5vw}
.zones{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.zones-track{display:flex;gap:1.2rem;width:max-content;padding:1rem 5vw;animation:slide 40s linear infinite}
.zones:hover .zones-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.zone{width:300px;border-radius:26px;background:linear-gradient(160deg,color-mix(in srgb,var(--c2) 55%,#fff),var(--c));padding:1.2rem 1.2rem 1.3rem;color:#fff;display:grid;justify-items:center;text-align:center;gap:.2rem;box-shadow:0 20px 50px rgba(0,0,0,.35);transition:transform .25s;flex-shrink:0}
.zone:hover{transform:translateY(-10px) scale(1.03)}
.zone img{height:200px;width:100%;object-fit:contain;filter:drop-shadow(0 18px 18px rgba(0,0,0,.4));transition:transform .3s} .zone:hover img{transform:scale(1.06) rotate(-2deg)}
.zone b{font-family:var(--font-head);font-size:1.3rem;text-shadow:0 2px 8px rgba(0,0,0,.3)} .zone span{font-size:.8rem;font-weight:700;opacity:.9}
.device{position:relative;border-radius:26px;border:10px solid #10163a;background:#10163a;box-shadow:0 30px 70px rgba(0,0,0,.5),inset 0 0 0 2px #2a3270;overflow:hidden;width:92%;margin:0 auto}
.device img{display:block;width:100%;border-radius:16px}
.school-media .sm-card{position:absolute;top:4%;right:-2%;display:grid} .school-media .sm-card.two{top:auto;bottom:4%;left:-2%;right:auto}
/* login screen */
.login-screen{padding:0;align-items:center}
.login-bg{position:absolute;inset:0;overflow:hidden} .login-bg img{width:100%;height:100%;object-fit:cover;filter:blur(3px) brightness(.55);transform:scale(1.06)}
.login-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(20,66,214,.25),rgba(6,16,54,.75))}
.login-card2{position:relative;background:#fff;border-radius:28px;padding:2rem 2.2rem;width:min(560px,94vw);box-shadow:0 40px 100px rgba(0,0,0,.5);animation:pop .35s cubic-bezier(.2,1.4,.4,1);max-height:94vh;overflow:auto}
.login-card2 form{display:grid;gap:.8rem} .login-card2 h3{margin-top:.6rem;font-size:1.7rem} .login-card2 .login-logos img{height:48px}
.login-card2 label{font-weight:800;font-size:.8rem;color:var(--muted);display:grid;gap:.3rem}
.login-card2 input:not([type=radio]){padding:.7rem .9rem;border-radius:12px;border:1.5px solid var(--line);font:inherit;font-size:1rem;color:var(--ink)}
.login-card2 .two{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.login-card2 .avatars .ring{width:64px;height:64px}
/* app top bar */
.app-top{height:64px;background:linear-gradient(90deg,#1442d6,#5b2fd6 55%,#8a2be2);box-shadow:0 6px 24px rgba(0,0,0,.25);gap:1rem;padding:0 1.4rem}
#app{grid-template-rows:64px 1fr}
.brandbtn{gap:.5rem;font-size:1.05rem} .brandbtn img{height:44px}
.app-top .crumb{font-weight:800;opacity:.9;background:rgba(255,255,255,.14);border-radius:999px;padding:.3rem .8rem;font-size:.8rem}
.hud{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.hud-lv{display:flex;align-items:center;gap:.5rem;background:rgba(0,0,0,.2);border-radius:999px;padding:.3rem .5rem .3rem .3rem}
.hud-lv b{background:var(--yellow);color:#2a1600;border-radius:999px;padding:.2rem .6rem;font-family:var(--font-head);font-size:.85rem}
.hud-lv i{width:90px;height:10px;border-radius:9px;background:rgba(255,255,255,.25);overflow:hidden;display:block} .hud-lv i span{display:block;height:100%;background:linear-gradient(90deg,#7be495,var(--green))}
.hud-chip{background:rgba(0,0,0,.2);border-radius:999px;padding:.35rem .7rem;font-weight:800;font-size:.85rem;white-space:nowrap} .hud-chip b{color:var(--yellow)}
.app-top .user{margin-left:auto;background:rgba(255,255,255,.14);border:0;color:#fff;border-radius:999px;padding:.25rem .9rem .25rem .3rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;font:inherit;font-weight:800}
.hud+.user{margin-left:0}
.uname{display:grid;line-height:1.1;text-align:left} .uname small{font-size:.68rem;opacity:.8;font-weight:700}
.exit{padding:.45rem .9rem}
/* hub quest card left */
.hub-hud.left{left:1.5rem;transform:none;width:min(560px,60vw)}
.gabby-dock{right:0;bottom:64px;z-index:96}
#app .view-course~.gabby-dock{display:flex}
.cm-panel{left:1.5rem;transform:none;width:min(640px,58vw)}
/* lesson room: gabby stands right, no props */
.lesson .ch.gabby{position:absolute;right:3%;bottom:0;height:88%;left:auto;animation:none;filter:drop-shadow(0 18px 22px rgba(0,0,0,.45));z-index:3}
.lesson .board{left:34%;top:auto;bottom:38%;max-width:44%;transform:translateX(-50%)}
.steps3d{left:34%;transform:translateX(-50%)}
/* profile */
.pf-hero{display:flex;align-items:center;gap:1.4rem;background:linear-gradient(120deg,#1442d6,#7b3fe4 60%,#ff3e9a);color:#fff;border-radius:var(--radius);padding:1.4rem 1.6rem;margin-bottom:1rem;box-shadow:var(--shadow);flex-wrap:wrap}
.pf-av{width:130px;height:130px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,color-mix(in srgb,var(--c) 45%,#fff));display:grid;place-items:center;overflow:hidden;border:5px solid #fff;box-shadow:0 14px 30px rgba(0,0,0,.35);flex-shrink:0}
.pf-av img{width:84%;height:84%;object-fit:contain;transform:translateY(6%)}
.pf-info{flex:1;display:grid;gap:.15rem;min-width:220px} .pf-info small{font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:var(--yellow)} .pf-info h2{margin:0} .pf-info>span{font-weight:700;opacity:.9;font-size:.9rem}
.pf-lv{display:flex;align-items:center;gap:.6rem;margin-top:.4rem;font-weight:800;font-size:.85rem} .pf-lv b{font-family:var(--font-head);background:var(--yellow);color:#2a1600;border-radius:999px;padding:.2rem .7rem} .pf-lv i{flex:1;max-width:240px;height:12px;border-radius:9px;background:rgba(255,255,255,.3);overflow:hidden;display:block} .pf-lv i span{display:block;height:100%;background:linear-gradient(90deg,#7be495,var(--green))} .pf-lv em{font-style:normal;opacity:.9}
.pf-actions{display:grid;gap:.5rem}
.badge{opacity:.6;filter:none} .badge i{filter:grayscale(.6)} .badge.won{opacity:1} .badge.won i{filter:none}
@media (max-width:900px){.hud{display:none} .app-top .crumb{display:none} .hub-hud.left{width:calc(100vw - 2rem)} .cm-panel{width:calc(100vw - 2rem)} .lesson .ch.gabby{height:60%} .lesson .board{left:50%;max-width:80%} .steps3d{left:50%} .login-card2 .two{grid-template-columns:1fr} .zone{width:240px} .zone img{height:150px}}

/* ===== v5 app (intro stays v4) ===== */

.vplayer{display:grid;gap:.6rem} .vplayer video{width:100%;aspect-ratio:16/9;border-radius:18px;background:#000;box-shadow:0 10px 30px rgba(0,0,0,.3)} .vp-bar{display:flex;justify-content:space-between;align-items:center;font-weight:800;color:var(--muted);font-size:.85rem}
.more-list button i{background-color:#dbe6ff}
.upin .lk{position:absolute;right:38px;top:44px;font-style:normal;font-size:1rem;background:#fff;border-radius:50%;width:26px;height:26px;display:grid;place-items:center;box-shadow:0 4px 10px rgba(0,0,0,.3)}
.upin.locked{opacity:.92}
/* ===== APP v5 ===== */
.app-top{background:linear-gradient(90deg,#1c46e0,#4b3fd6 60%,#7a3fd6);padding:0 1.2rem;gap:.8rem}
.toptabs{display:flex;gap:.3rem;margin-left:.6rem} .toptabs button{display:flex;align-items:center;gap:.4rem;border:0;background:transparent;color:#fff;font-weight:800;font-size:.9rem;padding:.55rem 1rem;border-radius:999px;cursor:pointer;opacity:.9} .toptabs button i{font-style:normal} .toptabs button.on{background:#2f7bff;opacity:1;box-shadow:inset 0 -3px 0 rgba(0,0,0,.15)}
.crumbs{display:flex;align-items:center;gap:.3rem;background:rgba(255,255,255,.14);border-radius:999px;padding:.3rem .5rem;font-size:.85rem;font-weight:800} .crumbs button{background:transparent;border:0;color:#cfd8ff;font:inherit;padding:.2rem .5rem;cursor:pointer} .crumbs button.cur{color:#fff} .crumbs i{font-style:normal;opacity:.6}
.hud{margin-left:auto;gap:.4rem} .hud-chip{background:rgba(0,0,0,.22);padding:.4rem .8rem} .hud-chip small{opacity:.8;margin-left:.2rem;font-size:.65rem}
.app-top .user{margin-left:0;background:rgba(255,255,255,.16);padding:.25rem 1rem .25rem .3rem} .app-top .user i{font-style:normal;opacity:.8} .avatar{width:42px;height:42px}
.exit.ghost{background:transparent;font-size:1.1rem;padding:.3rem .6rem}
.app-nav{bottom:18px}
/* hub */
.side-rail{position:fixed;left:1rem;top:150px;z-index:4;display:grid;gap:.25rem;background:rgba(255,255,255,.14);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.25);border-radius:22px;padding:.35rem}
.side-rail button{width:84px;border:0;background:transparent;color:#fff;font-weight:800;font-size:.7rem;padding:.6rem .2rem;border-radius:18px;display:grid;justify-items:center;gap:.25rem;cursor:pointer} .side-rail button i{font-style:normal;font-size:1.4rem;width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.18);display:grid;place-items:center} .side-rail button.on{background:#2f7bff;box-shadow:0 10px 24px rgba(47,123,255,.5)} .side-rail button.on i{background:rgba(255,255,255,.25)}
.hub-title{left:118px;top:84px} .hub-title b{font-size:2.2rem} .hub-title span{font-size:.95rem}
.goals-card{position:fixed;right:1.2rem;top:84px;z-index:4;width:300px;background:rgba(255,255,255,.14);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.3);border-radius:22px;padding:.9rem 1rem;color:#fff}
.gc-top{display:flex;align-items:center;gap:.7rem} .gc-top i{font-style:normal;width:44px;height:44px;border-radius:12px;background:#fff;display:grid;place-items:center;font-size:1.3rem} .gc-top b{font-family:var(--font-head);font-size:1.15rem;display:block} .gc-top span{font-size:.8rem;opacity:.9} .gc-top em{margin-left:auto;font-style:normal;font-size:1.3rem}
.gc-dots{display:flex;gap:.6rem;margin-top:.8rem;justify-content:space-around} .gc-dots i{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.22)} .gc-dots i.on{background:#ffd23f;box-shadow:0 0 16px #ffd23f}
.hub-hud.left{left:118px;bottom:68px;width:min(640px,55vw)} .hud-card{padding:.9rem 1.1rem;border-radius:26px} .hud-card>img{width:88px;height:88px} .hud-card small{color:#ff3e9a;font-size:.75rem} .hud-card b{font-size:1.25rem}
.quick-tiles{position:fixed;right:1.2rem;bottom:68px;z-index:4;display:flex;gap:.7rem}
.quick-tiles button{width:104px;height:104px;border:0;border-radius:22px;background:var(--c);color:#fff;font-weight:800;font-size:.78rem;display:grid;justify-items:center;align-content:center;gap:.4rem;cursor:pointer;box-shadow:0 14px 30px rgba(0,0,0,.35),inset 0 -6px 0 rgba(0,0,0,.15);transition:transform .15s} .quick-tiles button i{font-style:normal;font-size:2rem;width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.25);display:grid;place-items:center} .quick-tiles button:hover{transform:translateY(-4px)}
.gabby-dock{right:16px;bottom:120px;z-index:4;flex-direction:column;align-items:flex-end;gap:.2rem} .gabby-dock img{width:190px;animation:bob 3.5s ease-in-out infinite} .gabby-dock .say{margin:0 90px .4rem 0;border-radius:22px 22px 6px 22px;font-size:1.05rem;max-width:230px;padding:.8rem 1rem;position:relative} .gabby-dock .say::after{content:"";position:absolute;right:20px;bottom:-12px;border:8px solid transparent;border-top-color:#fff;border-right-color:#fff}
.gabby-dock.dock-hub{bottom:186px;right:10px} .gabby-dock.dock-course{bottom:150px} .gabby-dock.dock-games{top:70px;bottom:auto;flex-direction:row-reverse;align-items:flex-start;pointer-events:none} .gabby-dock.dock-games img{width:150px;animation:none} .gabby-dock.dock-games .say{margin:.4rem 0 0 0;border-radius:22px 22px 22px 6px} .gabby-dock.dock-games .say::after{right:auto;left:20px;border-right-color:transparent;border-left-color:#fff}
.gabby-dock.dock-lesson{top:64px;bottom:auto;right:23%;flex-direction:row-reverse;align-items:flex-start;pointer-events:none} .gabby-dock.dock-lesson img{width:160px} .gabby-dock.dock-lesson .say{margin:0 -20px 0 0;border-radius:22px 22px 22px 6px}
#app .view-lesson~.gabby-dock,#app .view-course~.gabby-dock,#app .view-games~.gabby-dock{display:flex}
.upin .lk{position:absolute;right:38px;top:44px;font-style:normal;font-size:1rem;background:#fff;border-radius:50%;width:26px;height:26px;display:grid;place-items:center;box-shadow:0 4px 10px rgba(0,0,0,.3)}
.upin.locked{opacity:.92}
#app:has(.view-hub) .app-nav{display:none}
/* games */
.games-head{display:flex;align-items:center;gap:1rem;margin-bottom:1rem} .games-head h2{font-size:2.3rem;color:var(--navy);text-shadow:0 2px 0 #fff} .games-head p{color:var(--muted);font-weight:800}
.backbtn{width:54px;height:54px;border-radius:50%;border:0;background:rgba(255,255,255,.95);font-size:1.4rem;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.2);flex-shrink:0}
.backbtn.wide{position:absolute;left:1.2rem;top:1rem;z-index:5;width:auto;height:auto;border-radius:999px;padding:.5rem 1.2rem .5rem .9rem;display:flex;align-items:center;gap:.5rem;font-size:1.1rem;text-align:left} .backbtn.wide span{font-size:.8rem;font-weight:800;line-height:1.1}
.chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.2rem} .chips button{display:flex;align-items:center;gap:.4rem;border:0;background:#fff;border-radius:999px;padding:.55rem 1rem;font-weight:800;font-size:.9rem;cursor:pointer;box-shadow:0 6px 16px rgba(10,26,74,.1);color:var(--ink)} .chips button i{font-style:normal} .chips button.on{background:#2f7bff;color:#fff;box-shadow:0 8px 20px rgba(47,123,255,.4)}
.view-games{background:linear-gradient(180deg,#bfe4ff,#eef4ff 30%) fixed;position:relative} .view-games .page{padding-right:1.5rem}
.gt{aspect-ratio:auto;border:3px solid #fff;outline:0;background:#fff;color:var(--ink);text-align:left;overflow:hidden;border-radius:22px;display:grid;padding:0;box-shadow:0 14px 30px rgba(10,26,74,.15)} .gt::before{display:none}
.gt-img{aspect-ratio:16/9;background-size:cover;background-position:center;position:relative} .gt-img .star{position:absolute;right:.6rem;top:.6rem;width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center;font-style:normal;filter:grayscale(1);opacity:.7} .gt-img .star.won{filter:none;opacity:1}
.gt-body{padding:.6rem .8rem .7rem;display:grid;gap:.15rem} .gt-body b{font-family:var(--font-head);font-size:1.05rem;color:#1a2a6b;line-height:1.15} .gt-body span{font-size:.75rem;color:var(--muted);font-weight:700}
.gt-foot{display:flex;justify-content:space-between;align-items:center;margin-top:.3rem;position:static} .gt-foot em{font-style:normal;background:#eef2ff;border-radius:999px;padding:.2rem .6rem;font-size:.72rem;font-weight:800;color:#1442d6} .gt-foot i{font-style:normal;width:36px;height:36px;border-radius:50%;background:#2f7bff;color:#fff;display:grid;place-items:center;box-shadow:0 6px 14px rgba(47,123,255,.4)}
.gt small{display:none}
.corner-pill{position:fixed;right:1.2rem;bottom:20px;z-index:4;display:flex;align-items:center;gap:.6rem;background:#0d2a8a;color:#fff;border-radius:999px;padding:.5rem 1rem .5rem .6rem;box-shadow:var(--shadow)} .corner-pill i{font-style:normal;font-size:1.4rem} .corner-pill b{font-family:var(--font-head);display:block} .corner-pill span{font-size:.72rem;opacity:.9} .corner-pill em{font-style:normal;font-size:1.3rem;margin-left:.3rem}
/* subjects (world cards in app) */
.world-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem} .world-cards .wcard{border:3px solid #fff;flex:auto;text-align:left;justify-items:start} .world-cards .wcard img{height:120px} .world-cards .wcard span{min-height:auto}
/* course map v5 */
.cmap .cm-title{display:none} .cm-deco{display:none}
.cm-head{position:absolute;left:1.2rem;top:5rem;z-index:3;display:flex;gap:1rem;align-items:center;color:#fff;text-shadow:0 4px 12px rgba(0,0,0,.45)} .cm-head img{height:110px;filter:drop-shadow(0 10px 14px rgba(0,0,0,.4))} .cm-head h2{font-size:clamp(2rem,4vw,3.4rem);margin:0} .cm-head p{font-weight:800;font-size:1rem} .cm-head small{font-size:.8rem;font-weight:700;opacity:.95}
.cm-side{position:absolute;right:1.2rem;top:1rem;z-index:5;width:280px;display:grid;gap:.6rem}
.cs-card{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-radius:20px;padding:.8rem 1rem;display:flex;gap:.7rem;align-items:center;box-shadow:0 12px 30px rgba(0,0,0,.25)} .cs-card>i{font-style:normal;font-size:2rem} .cs-card small{font-size:.72rem;font-weight:800;color:var(--muted);display:block} .cs-card b{font-family:var(--font-head);font-size:1.4rem;display:block;line-height:1.1} .cs-card .bar{display:block;height:8px;border-radius:9px;background:#e6ebfb;overflow:hidden;margin:.3rem 0;width:170px} .cs-card .bar span{display:block;height:100%;background:#2f7bff} .cs-card em{font-style:normal;font-size:.75rem;color:var(--muted);font-weight:700}
.cs-card.two{display:grid;gap:.2rem;padding:.4rem} .cs-card.two button{display:flex;align-items:center;gap:.6rem;border:0;background:transparent;text-align:left;padding:.5rem .6rem;border-radius:14px;cursor:pointer;font:inherit} .cs-card.two button:hover{background:#eef2ff} .cs-card.two button i{font-style:normal;font-size:1.4rem;width:40px;height:40px;border-radius:12px;background:#eef2ff;display:grid;place-items:center} .cs-card.two button b{font-size:.95rem} .cs-card.two button span{font-size:.72rem;color:var(--muted);font-weight:700} .cs-card.two button em{margin-left:auto;font-size:1.1rem}
.cs-card.ring-card>i{margin-left:auto;font-size:1.2rem}

.upin{width:180px;padding-top:44px} .upin .n{width:62px;height:62px;font-size:1.5rem;border:4px solid #fff;background:radial-gradient(circle at 35% 30%,#fff 0,#8a5cf6 40%,#5b2fd6);box-shadow:0 10px 24px rgba(0,0,0,.4)} .upin.cur .n{background:radial-gradient(circle at 35% 30%,#fff,#7be495 40%,#1fb26b)} .upin.locked .n{background:radial-gradient(circle at 35% 30%,#fff,#c3c9e6 40%,#9aa3c8)}
.upin b{background:#fff;font-size:.85rem;padding:.35rem .8rem;border-radius:14px}
.upin small{background:rgba(10,26,74,.55);border-radius:999px;padding:.25rem .6rem;gap:4px} .upin small strong{color:#fff;font-size:.72rem;margin-right:.2rem} .upin small i{width:9px;height:9px;border:0;background:rgba(255,255,255,.5)} .upin small i.ok{background:#ffd23f}
.trail .tr-bg{stroke:rgba(255,255,255,.75);stroke-width:12px} .trail .tr-fg{stroke:#fff;stroke-width:12px;filter:drop-shadow(0 0 8px #7ec8ff)}
.cm-panel{left:1.2rem;bottom:96px;width:min(720px,60vw);border-radius:26px;padding:1rem 1.2rem} .cm-panel>img{width:96px;height:96px} .cm-panel small{color:#1fb26b} .cm-panel b{font-size:1.5rem;color:#1a2a6b}
.keep-going{position:absolute;right:1.2rem;bottom:20px;z-index:5;display:flex;align-items:center;gap:.6rem;background:rgba(255,255,255,.92);border-radius:18px;padding:.6rem .9rem;width:280px;box-shadow:0 12px 30px rgba(0,0,0,.25)} .keep-going>i{font-style:normal;font-size:1.8rem} .keep-going b{font-family:var(--font-head);display:flex;justify-content:space-between} .keep-going b em{font-style:normal;font-size:.9rem} .keep-going span{font-size:.75rem;color:var(--muted);font-weight:700}
.cmap .gabby-dock{display:none}
/* lesson v5 */
.lesson .lroom{height:min(52vh,470px);box-shadow:none} .lesson .board,.steps3d,.lesson .ch.gabby{display:none}
.lh-text{position:absolute;left:1.4rem;top:5.6rem;z-index:3;color:#fff;text-shadow:0 4px 12px rgba(0,0,0,.45);max-width:50%}
.lh-text small{font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#ffd23f;font-size:.8rem} .lh-text h2{font-size:clamp(1.6rem,3vw,2.6rem);margin:.2rem 0} .lh-text p{font-weight:700;font-size:1rem;opacity:.95}
.steps5{display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap} .steps5 button{display:flex;align-items:center;gap:.5rem;border:0;background:#1a2a6b;color:#fff;font-family:var(--font-head);font-weight:600;font-size:1rem;padding:.75rem 1.3rem;border-radius:16px;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.3);text-shadow:none} .steps5 button i{font-style:normal;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:.9rem} .steps5 button.on{background:#ff9f1a;color:#2a1600} .steps5 button.on i{background:#2a1600;color:#ff9f1a} .steps5 button.ok i{background:#1fb26b}
.signpost{position:absolute;left:58%;bottom:14%;z-index:2;background:linear-gradient(#b8743a,#8a5228);color:#fff3d6;font-family:var(--font-head);font-weight:700;font-size:.85rem;line-height:1.15;padding:.5rem .8rem;border-radius:10px;border:3px solid #6b3d1c;transform:rotate(-5deg);box-shadow:0 8px 16px rgba(0,0,0,.35);letter-spacing:.04em;text-align:center}
.lesson .cm-side{top:1rem}
.lp{margin-top:-2rem;grid-template-columns:1.9fr 1fr;padding:0 1.5rem 7rem}
.lp-card{border-top:0;padding:1.4rem 1.6rem 1.6rem;border-radius:26px}
.lp-badge{display:inline-block;background:#ff3e9a;color:#fff;font-weight:900;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:.35rem .8rem} .lp-card>h3{font-size:1.7rem;color:#1a2a6b;margin:.5rem 0 .1rem} .lp-sub{color:var(--muted);font-weight:700;margin-bottom:1rem}
.lp-intro{display:grid;grid-template-columns:1.4fr 1fr;gap:1rem;align-items:start}
.lp-video{position:relative;aspect-ratio:16/10;border-radius:18px;overflow:hidden;background-size:cover;background-position:center;box-shadow:0 10px 30px rgba(0,0,0,.25);cursor:pointer} .lp-video::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.35))} .lp-video img{position:absolute;left:0;bottom:-4%;height:96%;filter:drop-shadow(0 10px 14px rgba(0,0,0,.4))} .lp-video .board-mini{position:absolute;right:4%;top:8%;background:#173b2a;color:#fff;font-family:var(--font-head);font-size:1.1rem;padding:.6rem .8rem;border-radius:10px;border:4px solid #b8743a;max-width:55%;text-align:center} .lp-video .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;border:0;background:#fff;color:#8a5cf6;font-size:1.8rem;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.4)} .lp-video .dur{position:absolute;right:.6rem;bottom:.6rem;background:rgba(0,0,0,.6);color:#fff;font-weight:800;font-size:.75rem;padding:.2rem .5rem;border-radius:6px}
.lp-learn{background:#eef4ff;border-radius:18px;padding:1rem 1.1rem;display:grid;gap:.5rem} .lp-learn h4{font-family:var(--font-head);font-size:1rem} .lp-learn ul{list-style:none;display:grid;gap:.4rem} .lp-learn li{font-size:.85rem;font-weight:700;color:#2b3358;padding-left:1.6rem;position:relative} .lp-learn li::before{content:"✓";position:absolute;left:0;width:18px;height:18px;border-radius:50%;background:#1fb26b;color:#fff;font-size:.65rem;display:grid;place-items:center;top:2px}
.spk{border:0;background:#eef2ff;border-radius:50%;width:38px;height:38px;cursor:pointer;font-size:1rem;flex-shrink:0;margin-left:auto} .spk:hover{background:#dbe6ff} .q .spk{vertical-align:middle;margin-left:.4rem}
.slide-head{align-items:center}
.lp-more .glass{background:#fff;backdrop-filter:none;border:0} .lp-more .row h4{font-family:var(--font-head)} .lp-more .row a{font-weight:800;color:#2f7bff;font-size:.85rem}
.more-list{display:grid;gap:.5rem} .more-list button{display:flex;align-items:center;gap:.7rem;border:0;background:#eef4ff;border-radius:16px;padding:.5rem;text-align:left;cursor:pointer;color:var(--ink)} .more-list button i{width:74px;height:56px;border-radius:12px;background-size:cover;background-position:center;position:relative;flex-shrink:0;display:grid;place-items:center;font-style:normal} .more-list button i em{font-style:normal;font-size:1.6rem;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4))} .more-list button small{font-size:.7rem;font-weight:900;color:#2f7bff} .more-list button b{font-size:.85rem;display:block;font-family:var(--font-head);font-weight:600} .more-list button span{margin-left:auto;width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:.8rem;box-shadow:0 4px 10px rgba(10,26,74,.15)}
/* profile / teacher */
.t-tabs{display:flex;gap:.4rem;background:#fff;border-radius:16px;padding:.4rem;margin-bottom:1rem;box-shadow:0 6px 16px rgba(10,26,74,.08)} .t-tabs button{border:0;background:transparent;font:inherit;font-weight:800;padding:.5rem 1rem;border-radius:12px;cursor:pointer;color:var(--muted)} .t-tabs button.on{background:#ffd23f;color:#2a1600}
.teacher .t-grid{grid-template-columns:1.2fr 1fr;gap:1rem} .cp-row{display:flex;gap:1.2rem;align-items:center} .cp-row ul{list-style:none;display:grid;gap:.5rem} .cp-row li{display:grid;grid-template-columns:28px 1fr;column-gap:.5rem;font-size:.78rem;color:var(--muted);font-weight:700} .cp-row li i{grid-row:span 2;width:28px;height:28px;border-radius:50%;color:#fff;font-style:normal;display:grid;place-items:center} .cp-row li b{color:var(--ink);font-size:1rem}
.next-unit{background-size:cover;background-position:center;min-height:180px;display:flex;align-items:flex-end;padding:0;overflow:hidden;position:relative} .next-unit>div{background:#fff;width:100%;padding:.7rem 1rem;display:grid} .next-unit small{color:var(--muted);font-weight:800;font-size:.72rem} .next-unit b{font-family:var(--font-head)} .next-unit span{font-size:.75rem;color:var(--muted)} .next-unit em{position:absolute;right:.8rem;bottom:1.2rem;width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center;font-style:normal;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.qa{display:grid;grid-template-columns:1fr 1fr;gap:.5rem} .qa button{border:0;background:#eef2ff;border-radius:12px;padding:.7rem;font-weight:800;cursor:pointer;text-align:left}
.act div{display:flex;align-items:center;gap:.6rem;padding:.4rem 0;border-bottom:1px solid var(--line)} .act img{width:36px;height:36px;object-fit:contain;background:#ffe6c7;border-radius:50%} .act span{display:grid;font-size:.72rem;color:var(--muted)} .act b{font-size:.85rem;color:var(--ink)} .act em{margin-left:auto;font-style:normal}
.momentum{display:flex;align-items:center;gap:1rem;background:linear-gradient(90deg,#5b2fd6,#2f7bff);color:#fff;border-radius:20px;padding:.7rem 1.2rem;margin-bottom:1rem} .momentum img{height:70px} .momentum b{display:block;font-family:var(--font-head);font-size:1.1rem} .momentum span{font-size:.85rem} .momentum .btn{margin-left:auto}
@media (max-width:900px){
  .how-top,.friends{grid-template-columns:1fr} .how-gabby{display:none} .how-grid{grid-template-columns:1fr} #footer .foot-grid{padding-left:0} .ft-gabby{display:none} .worlds{padding:0} .wnav{display:none}
  .side-rail{display:none} .hub-title{left:1rem;top:70px} .goals-card{display:none} .quick-tiles{display:none} .hub-hud.left{left:1rem;width:calc(100vw - 2rem);bottom:20px} .gabby-dock.dock-hub{display:none!important}
  .toptabs{display:none} .crumbs{display:none} .app-top .user .uname{display:none}
  .cm-side{display:none} .cm-head{top:4.6rem} .cm-head img{height:70px} .cm-panel{width:calc(100vw - 2rem);bottom:84px} .keep-going{display:none} .gabby-dock.dock-course{display:none!important}
  .lh-text{max-width:100%;top:4.4rem} .signpost{display:none} .gabby-dock.dock-lesson{display:none!important} .lp{grid-template-columns:1fr;padding:0 1rem 6rem} .lp-intro{grid-template-columns:1fr}
  .view-games .page{padding-right:1rem} .gabby-dock.dock-games{display:none!important} .corner-pill{display:none} .teacher .t-grid{grid-template-columns:1fr}
}

.vplayer{display:grid;gap:.6rem} .vplayer video{width:100%;aspect-ratio:16/9;border-radius:18px;background:#000;box-shadow:0 10px 30px rgba(0,0,0,.3)} .vp-bar{display:flex;justify-content:space-between;align-items:center;font-weight:800;color:var(--muted);font-size:.85rem}
.more-list button i{background-color:#dbe6ff}

/* ===== LOADER (built, not an image) ===== */
#loader{background:linear-gradient(180deg,#2f8bff 0%,#7dc4ff 45%,#cfeaff 100%);justify-content:center;padding:0;overflow:hidden}
#loader::before{display:none}
.ld-sky{position:absolute;inset:0;pointer-events:none}
.cl{position:absolute;background:#fff;border-radius:50%;opacity:.95;filter:drop-shadow(0 12px 20px rgba(40,90,180,.25))}
.cl::before,.cl::after{content:"";position:absolute;background:#fff;border-radius:50%}
.c1{width:220px;height:90px;left:-40px;bottom:12%} .c1::before{width:120px;height:120px;left:40px;top:-60px} .c1::after{width:90px;height:90px;left:130px;top:-30px}
.c2{width:300px;height:110px;right:-60px;bottom:6%} .c2::before{width:150px;height:150px;left:60px;top:-80px} .c2::after{width:110px;height:110px;left:180px;top:-40px}
.c3{width:180px;height:70px;left:22%;top:12%;opacity:.8} .c3::before{width:90px;height:90px;left:40px;top:-40px} .c3::after{width:70px;height:70px;left:100px;top:-20px}
.c4{width:160px;height:60px;right:18%;top:8%;opacity:.8} .c4::before{width:80px;height:80px;left:30px;top:-40px} .c4::after{width:60px;height:60px;left:90px;top:-15px}
.c5{width:420px;height:140px;left:30%;bottom:-40px} .c5::before{width:200px;height:200px;left:80px;top:-100px} .c5::after{width:150px;height:150px;left:240px;top:-60px}
.ld-isl{position:absolute;filter:drop-shadow(0 30px 30px rgba(20,60,160,.35));animation:bob 5s ease-in-out infinite;pointer-events:none}
.ld-isl.a{left:2%;top:8%;height:34vh;animation-delay:-1s} .ld-isl.b{right:6%;top:6%;height:22vh;animation-delay:-2s} .ld-isl.c{right:1%;top:34%;height:20vh;animation-delay:-3s} .ld-isl.d{right:3%;bottom:24%;height:17vh;animation-delay:-.5s} .ld-isl.e{left:4%;bottom:10%;height:22vh;animation-delay:-2.5s} .ld-isl.f{left:14%;top:46%;height:16vh;animation-delay:-4s}
.ld-center{position:relative;display:grid;justify-items:center;gap:.6rem;width:min(620px,92vw);text-align:center}
.ld-logo{display:flex;align-items:flex-end;gap:.4rem} .ld-logo img{height:96px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.25))} .ld-logo span{font-family:var(--font-head);font-weight:700;font-size:2.2rem;color:#fff;-webkit-text-stroke:2px #1a3fbf;text-shadow:0 4px 0 #1a3fbf;margin-bottom:.2rem}
.ld-tag{color:#fff;font-weight:800;font-size:1.05rem;text-shadow:0 2px 6px rgba(20,60,160,.5);letter-spacing:.04em}
.ld-hero{position:relative;display:flex;align-items:center;gap:1rem;justify-content:center;margin:.4rem 0 .2rem}
.ld-gabby{height:min(30vh,240px);filter:drop-shadow(0 20px 24px rgba(20,60,160,.45));animation:bob 3s ease-in-out infinite}
.ld-spark{position:absolute;color:#ffd23f;font-style:normal;text-shadow:0 0 12px #ffd23f;animation:twinkle 1.6s ease-in-out infinite} .s1{left:8%;bottom:20%;font-size:2rem} .s2{left:16%;bottom:6%;font-size:1.4rem;animation-delay:.5s} .s3{left:2%;bottom:48%;font-size:1.2rem;animation-delay:1s}
@keyframes twinkle{50%{opacity:.3;transform:scale(.7)}}
.ld-bubble{background:#fff;border-radius:22px 22px 22px 6px;padding:.9rem 1.2rem;text-align:left;box-shadow:0 14px 30px rgba(20,60,160,.3);max-width:260px;position:relative} .ld-bubble::before{content:"";position:absolute;left:-10px;top:40%;border:8px solid transparent;border-right-color:#fff} .ld-bubble b{font-family:var(--font-head);font-size:1.25rem;display:block;color:#1a2a6b;line-height:1.1} .ld-bubble span{font-size:.85rem;color:var(--muted);font-weight:700}
.ld-box{width:100%;display:grid;gap:.9rem;justify-items:stretch}
.ld-pct{justify-self:end;font-style:normal;background:#1a3fbf;color:#fff;font-weight:900;border-radius:999px;padding:.25rem .9rem;font-size:.95rem}
#loader .ld-box .bar{width:100%;height:20px;border-radius:12px;background:#1a3fbf;border:3px solid #fff;box-shadow:0 8px 24px rgba(20,60,160,.35);position:relative;overflow:visible}
#loader .ld-box .bar span{display:block;height:100%;border-radius:9px;width:0;background:linear-gradient(90deg,#ffd23f,#ff8a1a,#ff3e9a);animation:load 2.6s ease-out forwards}
#loader .ld-box .bar i{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);font-style:normal;font-size:2rem;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));animation:starmove 2.6s ease-out forwards}
@keyframes starmove{to{left:100%}}
.ld-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;position:relative}
.ld-steps::before{content:"";position:absolute;left:12%;right:12%;top:26px;border-top:3px dotted rgba(255,255,255,.7)}
.ld-steps i{font-style:normal;display:grid;justify-items:center;gap:.5rem;color:#fff;font-size:.78rem;font-weight:800;text-align:center;text-shadow:0 2px 6px rgba(20,60,160,.5);position:relative}
.ld-steps i b{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.4);display:grid;place-items:center;font-size:1.2rem;color:#fff;border:3px solid #fff}
.ld-steps i.on b{background:linear-gradient(135deg,#8a5cf6,#2f7bff);box-shadow:0 8px 20px rgba(47,123,255,.5)}
.ld-note{justify-self:center;background:rgba(255,255,255,.9);color:#1a2a6b;border-radius:14px;padding:.5rem 1rem;font-weight:800;font-size:.85rem;box-shadow:0 8px 20px rgba(20,60,160,.2)}
@media (max-width:900px){.ld-isl{opacity:.9} .ld-isl.a{height:16vh;left:-4%;top:2%} .ld-isl.b{height:11vh;top:3%;right:2%} .ld-isl.c,.ld-isl.d,.ld-isl.e,.ld-isl.f{display:none} .ld-center{gap:.4rem} .ld-hero{flex-direction:column} .ld-bubble::before{display:none} .ld-gabby{height:24vh} .ld-steps i{font-size:.66rem} .ld-logo img{height:70px} .ld-logo span{font-size:1.6rem}}

/* unit pins without an icon image: plain numbered badge, no floating subject icon */
.upin.noimg{padding-top:0}

/* expanded lesson content */
.kw{display:flex;flex-wrap:wrap;gap:.35rem;margin:.2rem 0 .6rem} .kw span{background:#eef3ff;color:#2f4bd6;font-weight:800;font-size:.72rem;padding:.25rem .6rem;border-radius:999px}
.passage{background:#fffdf5;border:2px solid #ffe9a8;border-radius:18px;padding:.9rem 1rem;margin-bottom:.9rem;display:grid;gap:.6rem}
.passage .row{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap} .passage h4{margin:0;font-size:1rem}
.passage .para{margin:0;font-size:1rem;line-height:1.55;color:#243055;position:relative;padding-left:2rem}
.passage .pn{position:absolute;left:0;top:.15rem;width:1.45rem;height:1.45rem;border-radius:50%;background:var(--c,#2f7bff);color:#fff;font-size:.72rem;font-weight:900;display:grid;place-items:center}
.passage .spk{font-size:.8rem;padding:.1rem .35rem;vertical-align:middle}
.vh{margin:.2rem 0 .5rem;font-size:1rem;display:flex;align-items:baseline;gap:.5rem} .vh small{font-weight:600;color:#7a86a8;font-size:.72rem}
.funfact{display:flex;align-items:center;gap:.7rem;background:linear-gradient(90deg,#e8fff3,#e3f2ff);border:2px solid #b9ecd3;border-radius:16px;padding:.7rem .9rem;margin:.6rem 0 .9rem}
.funfact>i{font-style:normal;font-size:1.5rem} .funfact div{flex:1;display:grid;gap:.15rem} .funfact b{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:#1a9a5c} .funfact span{font-size:.92rem;color:#243055;line-height:1.4}
.lp-read .vocab{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.5rem;margin-bottom:.8rem}

/* unit pins: icon inside the disc, number as a corner badge */
.upin{padding-top:0}
.upin .n{position:relative;width:86px;height:86px;overflow:visible;background:radial-gradient(circle at 35% 30%,#fff,#f1f5ff 55%,#c7d4ff);border:4px solid #fff}
.upin .n .uic{position:static;top:auto;height:66px;width:66px;animation:floaty 5s ease-in-out infinite;filter:drop-shadow(0 6px 6px rgba(0,0,0,.3));pointer-events:none}
.upin .n em{position:absolute;right:-8px;bottom:-8px;width:32px;height:32px;border-radius:50%;background:linear-gradient(180deg,#8a5cf6,#5b2fd6);color:#fff;font-style:normal;font-size:.95rem;font-weight:900;display:grid;place-items:center;border:3px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.3)}
.upin.done .n{background:radial-gradient(circle at 35% 30%,#fff,#ffe58a 50%,#ffb347)} .upin.done .n em{background:linear-gradient(180deg,#ffb347,#ff8c1a);font-size:1rem}
.upin.locked .n{background:radial-gradient(circle at 35% 30%,#fff,#e6e9f5 55%,#b9c1de)} .upin.locked .n .uic{filter:grayscale(.6) drop-shadow(0 6px 6px rgba(0,0,0,.25));opacity:.85} .upin.locked .n em{background:#8a94b8}
.upin.cur .n{transform:scale(1.12)}
.upin.noimg .n{width:62px;height:62px;background:radial-gradient(circle at 35% 30%,#fff 0,#8a5cf6 40%,#5b2fd6)}
.upin.noimg .n em{position:static;width:auto;height:auto;background:transparent;border:0;box-shadow:none;font-size:1.5rem}
.upin.noimg.done .n{background:radial-gradient(circle at 35% 30%,#fff,var(--yellow) 40%,var(--orange))} .upin.noimg.locked .n{background:radial-gradient(circle at 35% 30%,#fff,#b9c1de 40%,#8a94b8)}
.upin .lk{top:auto;bottom:70px;right:30px}
@media (max-width:900px){.upin .n{width:70px;height:70px} .upin .n .uic{width:54px;height:54px}}

/* teacher dashboard mock (For schools) */
.tdash{background:#eaf1ff;border-radius:26px;padding:1rem;box-shadow:0 30px 80px rgba(0,0,0,.45);border:3px solid #fff;color:var(--ink);font-size:.8rem}
.td-top{display:flex;align-items:center;gap:.8rem;background:linear-gradient(90deg,#2f7bff,#1442d6);color:#fff;border-radius:18px;padding:.6rem .9rem}
.td-av{width:64px;height:64px;border-radius:50%;background:#fff;border:3px solid #ffd23f;overflow:hidden;display:grid;place-items:center;flex-shrink:0} .td-av img{height:90%;transform:translateY(8%)}
.td-top>div b{font-family:var(--font-head);font-size:1.15rem;display:block} .td-top>div span{font-size:.75rem;opacity:.9}
.td-class{margin-left:auto;background:rgba(255,255,255,.2);border-radius:12px;padding:.4rem .7rem;font-size:.75rem;font-weight:700}
.td-tabs{display:flex;gap:.4rem;background:#fff;border-radius:14px;padding:.4rem;margin:.6rem 0;font-weight:800;font-size:.72rem;flex-wrap:wrap} .td-tabs b{background:#ffd23f;border-radius:10px;padding:.35rem .7rem} .td-tabs span{padding:.35rem .7rem;color:var(--muted)}
.td-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:.6rem}
.td-card{background:#fff;border-radius:16px;padding:.7rem .8rem;box-shadow:0 6px 16px rgba(10,26,74,.08)} .td-card>small{font-weight:900;font-size:.72rem;display:block;margin-bottom:.4rem}
.td-cp{display:flex;gap:.8rem;align-items:center} .td-cp ul{list-style:none;display:grid;gap:.35rem} .td-cp li{display:grid;grid-template-columns:22px 1fr;column-gap:.4rem;font-size:.68rem;color:var(--muted);font-weight:700} .td-cp li i{grid-row:span 2;width:22px;height:22px;border-radius:50%;color:#fff;font-style:normal;display:grid;place-items:center;font-size:.7rem} .td-cp li b{color:var(--ink);font-size:.85rem}
.td-card.img{background-size:cover;background-position:center;min-height:130px;display:flex;align-items:flex-end;padding:0;overflow:hidden} .td-card.img>div{background:#fff;width:100%;padding:.5rem .8rem;display:grid} .td-card.img b{font-size:.78rem} .td-card.img span{font-size:.65rem;color:var(--muted)}
.td-qa{display:grid;grid-template-columns:1fr 1fr;gap:.4rem} .td-qa span{background:#eef2ff;border-radius:10px;padding:.5rem .6rem;font-weight:800;font-size:.7rem}
.td-act div{display:flex;align-items:center;gap:.5rem;padding:.3rem 0;border-bottom:1px solid #eef2ff} .td-act img{width:26px;height:26px;object-fit:contain;background:#ffe6c7;border-radius:50%} .td-act span{display:grid;font-size:.62rem;color:var(--muted)} .td-act b{font-size:.72rem;color:var(--ink)}
.td-banner{margin-top:.6rem;background:linear-gradient(90deg,#5b2fd6,#2f7bff);color:#fff;border-radius:16px;padding:.5rem .9rem;display:flex;align-items:center;gap:.6rem} .td-banner img{height:52px} .td-banner b{display:block;font-family:var(--font-head)} .td-banner span{font-size:.7rem} .td-banner em{margin-left:auto;background:#fff;color:#1442d6;border-radius:999px;padding:.35rem .8rem;font-style:normal;font-weight:800;font-size:.72rem;white-space:nowrap}
.td-card.img{position:relative} .td-ic{position:absolute;right:8px;top:8px;height:64px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.35))}
@media (max-width:900px){.tdash{font-size:.74rem} .td-grid{grid-template-columns:1fr}}
/* provided-asset integrations */
.games-head.banner{position:relative;background-size:cover;background-position:center;border-radius:24px;padding:1.3rem 1.4rem;min-height:150px;overflow:hidden;box-shadow:0 16px 40px rgba(10,26,74,.18);border:3px solid #fff}
.games-head.banner::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,26,74,.72),rgba(10,26,74,.25) 60%,transparent)}
.games-head.banner>*{position:relative} .games-head.banner h2{color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.4)} .games-head.banner p{color:#e9f0ff}
.world-cards .uicons{display:flex;gap:.3rem;margin:.2rem 0 .3rem} .world-cards .uicons img{width:40px;height:40px;object-fit:contain;background:#fff;border-radius:12px;padding:3px;box-shadow:0 4px 10px rgba(10,26,74,.12)}
.pf-hero{background-size:cover;background-position:center;position:relative;overflow:hidden} .pf-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(20,66,214,.85),rgba(123,63,228,.7) 60%,rgba(255,62,154,.55))} .pf-hero>*{position:relative}
.badge img{width:72px;height:72px;object-fit:contain;margin:0 auto;filter:drop-shadow(0 6px 8px rgba(0,0,0,.2))}
.badge{opacity:.55} .badge.won{opacity:1}
.list i.thumb{width:56px;height:42px;border-radius:10px;background-size:cover;background-position:center;flex-shrink:0}
.next-unit{position:relative} .nu-ic{position:absolute;right:10px;top:10px;height:70px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.35))}
.ccard ol.with-icons{margin-left:0;list-style:none;gap:.3rem} .ccard ol.with-icons li{display:flex;align-items:center;gap:.5rem} .ccard ol.with-icons img{width:30px;height:30px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 3px 4px rgba(0,0,0,.18))}

/* subject world cards (app) */
.world-cards .wcard{position:relative;overflow:hidden;border-radius:24px;background:#fff;border:3px solid #fff;padding:0 0 1rem;display:grid;justify-items:start;text-align:left;gap:.3rem;box-shadow:0 16px 40px rgba(10,26,74,.16);transition:transform .25s;color:var(--ink);cursor:pointer;font:inherit}
.world-cards .wcard:hover{transform:translateY(-6px)}
.world-cards .wcard::before{content:"";position:absolute;left:0;right:0;top:0;height:130px;background:var(--art) center/cover}
.world-cards .wcard::after{content:"";position:absolute;left:0;right:0;top:80px;height:50px;background:linear-gradient(transparent,#fff)}
.world-cards .wcard>*{position:relative;z-index:1;margin-left:1rem;margin-right:1rem}
.world-cards .wcard>img{height:100px;width:auto;object-fit:contain;margin-top:14px;margin-bottom:.2rem;filter:drop-shadow(0 10px 12px rgba(0,0,0,.35))}
.world-cards .wcard b{font-family:var(--font-head);font-size:1.15rem;display:block} .world-cards .wcard span{display:block;font-size:.8rem;color:var(--muted);font-weight:700} .world-cards .wcard small{font-size:.72rem;color:var(--muted);font-weight:800}
.world-cards .wcard .bar{display:block;width:calc(100% - 2rem);height:8px;border-radius:9px;background:#e6ebfb;overflow:hidden} .world-cards .wcard .bar span{display:block;height:100%;background:var(--c);min-height:auto;margin:0}
.world-cards .wcard em{font-style:normal;background:var(--c);color:#fff;border-radius:999px;padding:.55rem 1rem;font-family:var(--font-head);font-weight:600;width:calc(100% - 2rem);text-align:center;margin-top:.3rem}

/* sprite-sheet unit icons */
.uic{display:inline-block;background-size:600% 100%;background-repeat:no-repeat;flex-shrink:0}
.cm-panel>.uic.big{width:96px;height:96px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.3))}
.ccard ol.with-icons .uic{width:30px;height:30px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.18))}
.world-cards .uicons .uic{width:40px;height:40px;background-color:#fff;border-radius:12px;background-origin:content-box;padding:3px;box-shadow:0 4px 10px rgba(10,26,74,.12)}
.nu-ic{width:70px;height:70px} .td-ic{width:64px;height:64px}

/* ===== responsive polish for the pitch (laptop / narrow windows) ===== */
.toptabs button{white-space:nowrap} .app-top .brandbtn span,.app-top .brand span{white-space:nowrap}
@media (max-width:1240px){
  .toptabs{gap:.15rem;margin-left:.2rem} .toptabs button{padding:.5rem .7rem;font-size:.84rem}
  .app-top .hud{gap:.3rem} .app-top .hud .chip{padding:.35rem .55rem}
  .quick-tiles button{width:88px;height:88px;font-size:.72rem} .quick-tiles button i{font-size:1.5rem}
  .hub-hud.left{width:min(520px,46vw)}
}
@media (max-width:1100px){
  .toptabs button span,.toptabs button .lbl{display:none}
  .app-top .brandbtn span,.app-top .brand span{display:none}
  .goals-card{width:240px;padding:.7rem .8rem} .goals-card .gc-dots i{width:34px;height:34px}
  .hub-title{top:78px} .hub-title b{font-size:1.7rem}
  .quick-tiles{gap:.5rem} .quick-tiles button{width:76px;height:76px;font-size:.66rem;border-radius:18px}
  .hub-hud.left{width:min(440px,44vw);bottom:64px} .hud-card>img{width:64px;height:64px} .hud-card b{font-size:1rem}
  .gabby-dock.dock-hub img{width:150px} .gabby-dock.dock-hub .say{font-size:.9rem;max-width:220px}
}
@media (max-width:1100px) and (min-width:901px){ .side-rail{transform:scale(.85);transform-origin:top left} }
@media (max-width:1100px){ .gabby-dock.dock-hub{bottom:150px;right:6px;flex-direction:column;align-items:flex-end;gap:.2rem} .gabby-dock.dock-hub .say{max-width:210px;font-size:.85rem;border-radius:18px 18px 6px 18px} }

/* lesson header readability over bright banners */
.lesson .lroom::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,20,70,.72) 0%,rgba(8,20,70,.45) 38%,rgba(8,20,70,0) 62%),linear-gradient(180deg,rgba(8,20,70,.35),transparent 30%);pointer-events:none;z-index:1}
.lh-text{text-shadow:0 3px 14px rgba(0,0,0,.6)} .lh-text p{font-weight:700}

/* ===== INTRO v12 — full-width layout, no loading screen, scroll-in reveals ===== */
#world{opacity:0;transition:opacity 1.1s ease}
#world.ready{opacity:1}

/* sections breathe across the whole window instead of a 1200px column */
.section{max-width:1640px;padding:9vh clamp(1.25rem,4vw,4rem)}
.hero{padding:14vh clamp(1.25rem,5vw,5rem) 4vh}
.hero-inner{max-width:min(880px,58vw)}
.hero h1{font-size:clamp(2.3rem,4.4vw,4.1rem);line-height:1.04}
.hero .lead{max-width:62ch}

/* section heading = one wide band: title left, blurb right */
.section-head{max-width:none;width:100%;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:clamp(1.5rem,5vw,5rem);row-gap:.45rem;align-items:end;
  padding:clamp(1.3rem,2.4vw,2.2rem) clamp(1.5rem,3vw,3rem);border-radius:30px;
  background:linear-gradient(100deg,rgba(6,16,54,.8) 0%,rgba(6,16,54,.66) 52%,rgba(6,16,54,.44) 100%)}
.section-head>.eyebrow{grid-column:1;grid-row:1;margin:0}
.section-head>h2{grid-column:1;grid-row:2;margin:.2rem 0 0;font-size:clamp(1.9rem,3.2vw,3.1rem);line-height:1.05}
.section-head>p:last-child{grid-column:2;grid-row:2;align-self:end;margin:0;max-width:64ch;font-size:clamp(.95rem,1.05vw,1.12rem)}
.section.wide .section-head{margin-left:clamp(1.25rem,4vw,4rem);margin-right:clamp(1.25rem,4vw,4rem)}

/* wider grids so cards fill the new width */
.how-grid{gap:clamp(1rem,1.6vw,1.6rem)}
.course-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:clamp(1rem,1.4vw,1.4rem)}
.pillars{gap:clamp(1rem,1.6vw,1.6rem)}
.friends{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.9rem,1.4vw,1.4rem)}
.split{gap:clamp(2rem,4vw,4rem)}

/* scroll-in: each block rises as it enters the viewport */
@keyframes riseIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.reveal:not(.in){opacity:.001;transform:translateY(30px)}
.section-head.in>*,.how-grid.in>*,.course-grid.in>*,.pillars.in>*,.friends.in>*,.zones-track.in>*{animation:riseIn .62s cubic-bezier(.2,.8,.3,1) backwards}
.section-head.in>h2{animation-delay:.07s}
.section-head.in>p:last-child{animation-delay:.14s}
.how-grid.in>*:nth-child(2),.course-grid.in>*:nth-child(2),.pillars.in>*:nth-child(2),.friends.in>*:nth-child(2){animation-delay:.1s}
.how-grid.in>*:nth-child(3),.course-grid.in>*:nth-child(3),.pillars.in>*:nth-child(3),.friends.in>*:nth-child(3){animation-delay:.2s}
.course-grid.in>*:nth-child(4),.friends.in>*:nth-child(4){animation-delay:.3s}
.course-grid.in>*:nth-child(5){animation-delay:.38s}
.course-grid.in>*:nth-child(6){animation-delay:.46s}
.course-grid.in>*:nth-child(n+7){animation-delay:.54s}
@media (prefers-reduced-motion:reduce){.section-head.in>*,.how-grid.in>*,.course-grid.in>*,.pillars.in>*,.friends.in>*{animation:none}}

/* phones + narrow windows: stack the band, keep full bleed */
@media (max-width:1000px){
  .section{padding:7vh clamp(1rem,5vw,2rem)}
  .hero{padding:12vh clamp(1rem,5vw,2rem) 4vh} .hero-inner{max-width:100%}
  .section-head{grid-template-columns:1fr;row-gap:.6rem;border-radius:24px}
  .section-head>.eyebrow,.section-head>h2,.section-head>p:last-child{grid-column:1}
  .section-head>h2{grid-row:2} .section-head>p:last-child{grid-row:3;max-width:100%}
  .friends{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .friends{grid-template-columns:1fr}
  .section-head{padding:1.1rem 1.2rem}
}

/* ===== INTRO v13 — pitch polish: calm the world, sharpen the type ===== */

/* the 3D world is the one bold thing; everything over it stays quiet */
#scrim{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,16,54,.10) 0%,rgba(6,16,54,.34) 45%,rgba(6,16,54,.58) 100%);
  opacity:var(--scrim,0)}
body.app-open>#scrim{display:none}

/* nav: hairline + blur only once you start scrolling */
#nav{padding:.7rem clamp(1.25rem,4vw,4rem)}
#nav.scrolled{background:rgba(8,21,63,.78);border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 10px 40px rgba(0,0,0,.35)}
#nav nav a{position:relative;padding-bottom:3px}
#nav nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--yellow);border-radius:2px;transition:right .25s ease}
#nav nav a:hover::after{right:0}

/* hero */
.hero h1{text-wrap:balance;letter-spacing:-.015em}
.hero .lead{font-size:clamp(1rem,1.18vw,1.18rem);opacity:.92}
.stats{margin-top:2rem;gap:clamp(1.4rem,2.6vw,2.8rem)}
.stats b{font-size:clamp(1.7rem,2.3vw,2.3rem)}
.trust{margin-top:1.5rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.16);
  font-size:.82rem;font-weight:800;letter-spacing:.04em;color:rgba(255,255,255,.82);max-width:46rem}
.trust span{text-transform:uppercase;letter-spacing:.16em;font-size:.7rem;color:var(--yellow);margin-right:.55rem}
.trust i{font-style:normal;opacity:.45;margin:0 .35rem}

/* section heading band — one calm glass shelf, same rhythm every section */
.section-head{background:linear-gradient(100deg,rgba(8,20,64,.86) 0%,rgba(8,20,64,.7) 55%,rgba(8,20,64,.5) 100%);
  border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);
  box-shadow:0 24px 60px rgba(4,10,38,.4);margin-bottom:clamp(1.4rem,2.2vw,2.2rem)}
.section-head>h2{text-wrap:balance;letter-spacing:-.01em}
.section-head>p:last-child{color:rgba(255,255,255,.84);line-height:1.6}

/* cards: one shared object language, lift only on hover */
.how,.ccard,.friend,.pcard{transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s}
.how:hover,.ccard:hover,.friend:hover,.pcard:hover{transform:translateY(-5px);box-shadow:0 26px 60px rgba(4,10,38,.42)}
.friend{border-bottom-width:5px}
a:focus-visible,button:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:14px}

/* closing call to action */
.band-section{padding-top:2vh}
.cta-band{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center;
  gap:clamp(1.4rem,3.5vw,3.5rem);padding:clamp(1.8rem,3vw,2.8rem) clamp(1.6rem,3vw,3rem);
  border-radius:34px;color:#fff;border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px);
  background:linear-gradient(100deg,rgba(8,20,64,.9) 0%,rgba(24,44,128,.78) 60%,rgba(123,63,228,.55) 100%);
  box-shadow:0 30px 80px rgba(4,10,38,.5)}
.cta-copy h2{font-size:clamp(1.8rem,3vw,2.9rem);line-height:1.05;margin:.15rem 0 .6rem;text-wrap:balance}
.cta-copy p{color:rgba(255,255,255,.86);max-width:52ch;line-height:1.6}
.cta-actions{display:grid;gap:.7rem;justify-items:stretch}
.cta-actions .btn{width:100%}
.cta-note{font-size:.76rem;line-height:1.5;color:rgba(255,255,255,.66);font-weight:700;margin-top:.2rem}
#footer{margin-top:clamp(2rem,4vh,4rem)}

@media (max-width:1000px){
  .cta-band{grid-template-columns:1fr;border-radius:26px}
  .trust{font-size:.78rem}
  #nav{padding:.6rem clamp(1rem,5vw,2rem)}
}

/* ===== "Seven kinds of doing" — real children, one per subject ===== */
.doing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:clamp(.7rem,1.2vw,1.3rem)}
.doing{display:grid;align-content:start;justify-items:center;text-align:center;gap:.5rem;padding:1.1rem .7rem 1.25rem;
  border-radius:26px;color:#fff;border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(8px);
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.04));
  transition:transform .22s cubic-bezier(.2,.8,.3,1),background .22s}
.doing:hover{transform:translateY(-6px);background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.06))}
.doing .plate{width:clamp(104px,8.4vw,132px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 38% 28%,color-mix(in srgb,var(--c) 34%,#fff),color-mix(in srgb,var(--c) 92%,#00102e));
  box-shadow:0 18px 34px rgba(4,10,38,.45),inset 0 -8px 0 rgba(0,0,0,.14)}
.doing .plate img{width:86%;height:86%;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(0,0,0,.42));transform:translateY(-3%)}
.doing b{font-family:var(--font-head);font-weight:600;font-size:1.02rem;line-height:1.2}
.doing .line{font-size:.82rem;color:rgba(255,255,255,.8);line-height:1.45;max-width:21ch}

/* the closing call to action gets a child, not just buttons */
.cta-band{grid-template-columns:auto minmax(0,1.1fr) minmax(0,.72fr)}
.cta-kid{width:clamp(110px,11vw,168px);align-self:end;filter:drop-shadow(0 18px 22px rgba(0,0,0,.45))}
@media (max-width:1000px){
  .cta-band{grid-template-columns:1fr}
  .cta-kid{justify-self:center;width:130px;margin-bottom:-.4rem}
  .doing-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .doing .plate{width:104px}
}
@media (max-width:600px){.doing-grid{grid-template-columns:1fr 1fr}}
.doing b{min-height:2.45em;display:flex;align-items:center;justify-content:center}

/* ===== v15 — no seam behind long pages, unique game tiles, roomier world map ===== */
/* #app is a fixed-height grid, so a tall page used to scroll past its row and show the navy shell */
#app{background:#eef2fb}
#app:has(.view-hub),#app:has(.view-course){background:transparent}
#app:has(.view-games){background:linear-gradient(180deg,#bfe4ff,#eef4ff 30%)}
#app:has(.view-lesson),#app:has(.view-subjects),#app:has(.view-rewards),#app:has(.view-class),#app:has(.view-family){background:#eef2fb}
.app-main{min-height:100%}

/* each game tile carries its own unit icon, so no two tiles read the same */
.gt-img{position:relative;overflow:hidden}
.gt-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(10,26,74,.22))}
.gt-ic{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64%;height:80%;z-index:1;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.45))}
.gt-img .star{z-index:2}
.gt:hover .gt-ic{transform:translate(-50%,-50%) scale(1.06)}
.gt-ic{transition:transform .22s cubic-bezier(.2,.8,.3,1)}

/* the world map keeps its own quest card now that the rail and tile row are gone */
.hub-title{left:1.4rem}
.hub-hud.left{left:1.4rem;width:min(660px,52vw)}
@media (max-width:900px){.hub-hud.left{left:1rem;width:calc(100vw - 2rem)}}
/* Gabby sits in the corner on a lesson page instead of over the reading passage */
.gabby-dock.dock-lesson{top:auto;bottom:96px;right:1rem;flex-direction:column;align-items:flex-end;gap:.25rem}
.gabby-dock.dock-lesson img{width:128px}
.gabby-dock.dock-lesson .say{margin:0;max-width:210px;font-size:.86rem;border-radius:18px 18px 6px 18px}
@media (max-width:1280px){.gabby-dock.dock-lesson{display:none!important}}

/* PreK–6: eight grade chips, the first two carry words */
.grade-pick{grid-template-columns:1.5fr 1fr repeat(6,1fr)}
.grade-pick span{font-size:.92rem;white-space:nowrap;padding:0 .3rem}
@media (max-width:900px){.grade-pick{grid-template-columns:1.5fr 1fr repeat(2,1fr)}}