@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&display=swap');
/* Method lessons */
.ls-section,.song-section,.lb-section{background:#fff;border:1px solid var(--border);border-radius:16px;padding:20px;margin-bottom:26px}
.ls-section h2,.lb-section h2{font:700 1.4rem 'Playfair Display',serif;margin:0 0 2px;color:var(--navy)}
.ls-section p{font-size:.86rem;color:#6b7280;margin:0 0 12px}
.ls-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.ls-card{position:relative;text-align:left;background:var(--navy);color:#fff;border:none;border-radius:12px;padding:14px 14px 14px 56px;cursor:pointer;font-family:inherit;transition:.15s;min-height:68px}
.ls-card:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(11,25,48,.28)}
.ls-card b{display:block;font-size:.92rem;line-height:1.25}.ls-card small{font-size:.74rem;color:rgba(255,255,255,.68)}
.ls-play{position:absolute;left:14px;top:50%;margin-top:-16px;width:32px;height:32px;border-radius:50%;background:#c09848}
.ls-play::after{content:'';position:absolute;left:12px;top:9px;border-left:11px solid #0b1930;border-top:7px solid transparent;border-bottom:7px solid transparent}
.ls-stage{background:linear-gradient(rgba(120,170,220,.09) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,rgba(120,170,220,.09) 1px,transparent 1px) 0 0/22px 22px,#0b1930;color:#eef3f8;padding:14px 14px 10px}
.ls-stage.young{background:linear-gradient(180deg,#bfe6f2 0%,#eaf6d8 100%);color:#2b1d12}
.ls-board{min-height:262px;display:flex;align-items:center;justify-content:center;overflow-x:auto}
.bd-wrap{width:100%;text-align:center;animation:slideInUp .25s ease both}
.bd-chips{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.bd-chips span{padding:3px 11px;border-radius:50px;font:700 .74rem Inter,sans-serif;background:rgba(255,255,255,.1);color:rgba(255,255,255,.6)}
.bd-chips span.on{background:#c09848;color:#0b1930;animation:correctPop .35s ease}
table.bd{margin:0 auto;border-collapse:collapse;font:800 1.5rem 'Courier New',monospace}
table.bd td{min-width:34px;height:36px;text-align:center;padding:0 3px;white-space:nowrap}
table.bd td.bar{border-top:3px solid #c09848}
table.bd td.first{border-left:3px solid #c09848}
table.bd td.dv{padding-right:8px;color:#e3c68a;text-align:right}
table.bd td.q{color:#e3c68a}
table.bd td.ln{border-top:2px solid rgba(238,243,248,.55)}
table.bd td.new{color:#ffd98a;animation:cellPop .4s cubic-bezier(.2,1.6,.4,1) both}
table.bd td.cut{text-decoration:line-through;opacity:.5}
.ls-stage.young table.bd td.ln{border-color:#2b1d12}.ls-stage.young table.bd td.bar,.ls-stage.young table.bd td.first{border-color:#c06a2a}
.ls-stage.young table.bd td.q,.ls-stage.young table.bd td.dv,.ls-stage.young table.bd td.new{color:#b5532d}
@keyframes cellPop{from{transform:scale(.2);opacity:0}to{transform:none;opacity:1}}
table.bx{margin:0 auto 12px;border-collapse:collapse;font:800 1.3rem 'Courier New',monospace}
table.bx td{width:92px;height:60px;border:2px solid #c09848;text-align:center}
table.bx td.h{background:rgba(192,152,72,.2);color:#e3c68a}table.bx td.new{animation:cellPop .4s ease both}
.ls-stage.young table.bx td.h{color:#7a4a18}
.ln-big{font:800 1.6rem Inter,sans-serif;margin-top:10px}.ln-big.new{color:#ffd98a;animation:cellPop .4s ease both}
.ls-stage.young .ln-big{font-family:'Baloo 2',sans-serif;font-size:2rem}.ls-stage.young .ln-big.new{color:#b5532d}
.eq-lines{font:700 1.3rem 'Courier New',monospace;line-height:2}
.eq-lines div{opacity:.72}.eq-lines .cur{opacity:1;color:#ffd98a;animation:slideInUp .3s ease both}
.objs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:440px;margin:0 auto}
.obj{width:42px;height:46px;display:block}
.obj-w{display:inline-block;animation:cellPop .35s ease both}
.obj-w.add{filter:drop-shadow(0 0 6px #f4b740)}
.obj-w.hop{animation:objHop .55s ease}
.obj-w.gone{opacity:.14;transform:translateY(14px) rotate(20deg);transition:.4s}
@keyframes objHop{50%{transform:translateY(-22px) scale(1.15)}}
.grps{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.grp{border:3px dashed #c06a2a;border-radius:14px;padding:6px;display:flex;flex-wrap:wrap;justify-content:center;max-width:170px;gap:2px}
.grp .obj{width:30px;height:33px}.grp.pl b{width:100%;font:700 .78rem 'Baloo 2',sans-serif}
.ten{display:grid;grid-template-columns:repeat(5,44px);gap:5px;justify-content:center}
.ten i{height:44px;border-radius:10px;border:3px solid #2b1d12;background:#fff}.ten i.a{background:#e07a4e}.ten i.b{background:#f4b740}.ten i.new{animation:cellPop .35s ease both}
.ten.small{margin-top:8px}
.fbar{display:flex;gap:3px;max-width:430px;margin:0 auto 9px}.fbar i{flex:1;height:38px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-radius:3px}.fbar i.a{background:#c09848}.fbar i.b{background:#58c4b8}
.pbar{height:44px;max-width:460px;margin:0 auto;background:rgba(255,255,255,.14);border-radius:8px;overflow:hidden}.pbar i{display:block;height:100%;background:#c09848;animation:pGrow .7s ease both}
@keyframes pGrow{from{width:0}}
.scale{position:relative;width:360px;height:190px;margin:0 auto}
.beam{position:absolute;left:30px;right:30px;top:42px;height:8px;background:#eef3f8;border-radius:4px}
.fulc{position:absolute;left:50%;margin-left:-22px;top:50px;border-left:22px solid transparent;border-right:22px solid transparent;border-bottom:96px solid #c09848}
.pan{position:absolute;top:58px;width:126px;min-height:50px;line-height:50px;border-radius:10px;background:#17324f;border:2px solid #c09848;font:800 1.15rem 'Courier New',monospace;color:#ffd98a;transition:transform .5s}
.pan.l{left:4px}.pan.r{right:4px}
.scale.tip .pan.l{transform:translateY(12px)}.scale.tip .pan.r{transform:translateY(-12px)}
.ls-cap{display:flex;gap:10px;align-items:center;margin-top:6px}
.ls-axi{width:50px;flex-shrink:0}
.ls-axi.talk .ct-head{animation:ctNod .6s ease 2}
@keyframes ctNod{50%{transform:rotate(-6deg) translateY(-2px)}}
.ct-head{transform-box:fill-box;transform-origin:50% 90%}
.ls-axi.dance{animation:axiJump .5s ease 3}
.ls-say{flex:1;background:rgba(255,255,255,.12);border-radius:12px;padding:9px 13px;font-size:.95rem;line-height:1.35;min-height:44px}
.ls-stage.young .ls-say{background:#fff;font:600 1.1rem 'Baloo 2',sans-serif}
.ls-prog{height:5px;background:#e5e7eb}.ls-prog i{display:block;height:100%;width:0;background:#c09848;transition:width .3s}
.ls-ctl{display:flex;flex-wrap:wrap;gap:7px;padding:11px 14px 14px;justify-content:center}
.ls-ctl button{border:1px solid var(--border);background:#fff;border-radius:50px;padding:7px 15px;font:700 .8rem Inter,sans-serif;cursor:pointer;color:var(--navy)}
.ls-ctl button.main{background:var(--navy);color:#fff;border-color:var(--navy)}

/* Songs */
.song-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}.song-axi{width:60px}
.song-head h2{font:800 1.8rem/1 'Baloo 2',sans-serif;margin:0;color:#b5532d}.song-head p{margin:0;font:600 .98rem 'Baloo 2',sans-serif;color:#5a4a33}
.song-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.song-card{position:relative;background:#f4b740;border:3px solid #2b1d12;border-radius:18px;padding:14px;text-align:left;cursor:pointer;font-family:'Baloo 2',sans-serif;box-shadow:0 5px 0 #2b1d12;transition:.12s}
.song-card:nth-child(3n+2){background:#7fc4b0}.song-card:nth-child(3n){background:#ee9a6c}
.song-card:hover{transform:translateY(-3px) rotate(-1.5deg)}.song-card:active{transform:translateY(3px);box-shadow:0 2px 0 #2b1d12}
.song-card b{display:block;font-size:1.1rem;line-height:1.1;color:#2b1d12}.song-card small{font-size:.86rem;color:#4a3a22}
.sg-note{position:absolute;right:12px;top:10px;width:15px;height:12px;background:#2b1d12;border-radius:50%}
.sg-note::after{content:'';position:absolute;right:0;bottom:6px;width:3px;height:22px;background:#2b1d12}
.s-stage{position:relative;height:210px;background:linear-gradient(180deg,#9bd6ea,#fbeec2 88%,#a9cc6a 88%);overflow:hidden}
.s-crew{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:space-evenly;align-items:flex-end}
.s-a{width:100px}
.s-stage.go .s-a{animation:danceB calc(var(--b,430ms)*2) ease-in-out infinite}
.s-stage.go .s-a:nth-child(even){animation-delay:calc(var(--b,430ms) * -1)}
@keyframes danceB{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-22px) rotate(6deg)}}
.s-stage.go .ct-head{animation:ctNod .86s ease infinite}
.s-note{position:absolute;width:16px;height:12px;background:#b5532d;border-radius:50%;opacity:0}
.s-note::after{content:'';position:absolute;right:0;bottom:6px;width:3px;height:22px;background:#b5532d}
.s-stage.go .s-note{animation:noteUp 3s ease-in infinite}
.s-note.n1{left:18%;bottom:80px}.s-note.n2{left:50%;bottom:110px;animation-delay:-1s!important}.s-note.n3{left:80%;bottom:90px;animation-delay:-2s!important}
@keyframes noteUp{0%{opacity:0;transform:translateY(20px)}25%{opacity:1}100%{opacity:0;transform:translateY(-110px) rotate(24deg)}}
.s-lyrics{padding:14px 16px;max-height:220px;overflow-y:auto;text-align:center;font:700 1.45rem/1.5 'Baloo 2',sans-serif;color:#7a6b56;background:#fffaf0}
.s-syl{display:inline-block;transition:color .1s}.s-syl.done{color:#2b1d12}
.s-syl.on{color:#b5532d;transform:translateY(-6px) scale(1.2);animation:cellPop .15s ease}

/* Share and leaderboard */
.share-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:10px 0 2px}
.sh{border:1px solid var(--border);background:#fff;border-radius:50px;padding:8px 16px;font:700 .82rem Inter,sans-serif;cursor:pointer;color:var(--navy);text-decoration:none}
.sh.wa{background:#1f6b66;border-color:#1f6b66;color:#fff}
.lb-head{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.lb-hide{font-size:.76rem;color:#6b7280;display:flex;gap:6px;align-items:center;cursor:pointer}
.lb-row{display:grid;grid-template-columns:34px 1fr auto auto;gap:10px;align-items:center;padding:9px 12px;border-radius:10px;font-size:.9rem;animation:cardIn .3s ease both}
.lb-row:nth-child(odd){background:#faf8f4}
.lb-n{width:26px;height:26px;border-radius:50%;background:#ebe6db;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.78rem}
.t0 .lb-n{background:#c09848;color:#0b1930}.t1 .lb-n{background:#b6c0ca}.t2 .lb-n{background:#a4683a;color:#fff}
.lb-name{font-weight:700;color:var(--navy)}.lb-g{font-size:.74rem;color:#6b7280}.lb-x{font-weight:800;color:#9a7830}
.lb-row.me{outline:2px solid #c09848}
.lb-empty{padding:18px;text-align:center;color:#6b7280;font-size:.9rem}.lb-empty a{color:#9a7830;font-weight:700}
.lb-note{font-size:.74rem;color:#6b7280;margin:10px 0 0}

/* Cartoon world: Grades 1-4 */
.kid-scene{display:none}
body.kids{background:#fdf6e3;font-family:'Baloo 2',Inter,sans-serif}
body.kids .games-hero{background:linear-gradient(180deg,#8fd0e6 0%,#c8ebf2 62%,#f3e6b3 100%);min-height:360px;color:#2b1d12;padding-bottom:150px}
body.kids .games-hero h1{font:800 3rem/1 'Baloo 2',sans-serif;color:#b5532d;text-shadow:0 3px 0 #fff}
body.kids .games-hero h1 span{color:#2a7a6f}
body.kids .games-hero p{color:#3f3120;font-weight:600;font-size:1.15rem}
body.kids .games-hero-art,body.kids .fx-sym{display:none!important}
body.kids .auth-hint-link,body.kids .auth-hint-loggedin{color:#3f3120}
body.kids .grade-btn{width:56px;height:56px;background:#fff;color:#2b1d12;border:3px solid #2b1d12;font:800 1.3rem 'Baloo 2',sans-serif;box-shadow:0 4px 0 #2b1d12}
body.kids .grade-btn.active{background:#f4b740;border-color:#2b1d12;color:#2b1d12}
body.kids .kid-scene{display:block;position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.k-sun{position:absolute;top:18px;left:6%;width:74px;height:74px;border-radius:50%;background:#f9c74f;box-shadow:0 0 0 12px rgba(249,199,79,.35),0 0 0 26px rgba(249,199,79,.16);animation:sunPulse 3.4s ease-in-out infinite}
@keyframes sunPulse{50%{transform:scale(1.08)}}
.k-cloud{position:absolute;width:110px;height:34px;background:#fff;border-radius:40px;animation:cloudGo 34s linear infinite}
.k-cloud::before,.k-cloud::after{content:'';position:absolute;background:#fff;border-radius:50%}
.k-cloud::before{width:52px;height:52px;left:16px;top:-24px}.k-cloud::after{width:38px;height:38px;right:16px;top:-16px}
.k-cloud.c1{top:40px;left:-120px}.k-cloud.c2{top:90px;left:-120px;animation-delay:-12s;transform:scale(.7)}.k-cloud.c3{top:24px;left:-120px;animation-delay:-24s}
@keyframes cloudGo{to{left:110%}}
.k-hill{position:absolute;bottom:-70px;border-radius:50%}
.k-hill.h1{left:-10%;width:70%;height:220px;background:#a9cc6a}.k-hill.h2{right:-14%;width:80%;height:250px;background:#8ebd55}
.k-tree{position:absolute;right:15%;bottom:10px;width:190px;animation:treeSway 5s ease-in-out infinite;transform-origin:50% 100%}
@keyframes treeSway{50%{transform:rotate(1.2deg)}}
.k-a{position:absolute;bottom:8px;width:100px}
.k-a.lion{left:5%}.k-a.giraffe{left:17%;width:84px}.k-a.elephant{right:6%;width:118px}.k-a.zebra{right:33%;width:82px}.k-a.axi{left:32%;width:82px}
.k-a{animation:kBob 2.2s ease-in-out infinite}
.k-a:nth-of-type(even){animation-delay:-1.1s}
@keyframes kBob{50%{transform:translateY(-10px) rotate(2deg)}}
.ct-eyes{transform-box:fill-box;transform-origin:center;animation:axiBlink 4s infinite}
.ct-trunk{transform-box:fill-box;transform-origin:50% 0;animation:trunkSw 2.4s ease-in-out infinite}
@keyframes trunkSw{50%{transform:rotate(9deg)}}
body.kids .section-label{font:800 1.05rem 'Baloo 2',sans-serif;letter-spacing:0;text-transform:none;color:#b5532d}
body.kids .subject-card{border:3px solid #2b1d12;border-radius:20px;box-shadow:0 5px 0 #2b1d12;background:#fff}
body.kids .subject-card h3{font:800 1.2rem 'Baloo 2',sans-serif}
body.kids .subject-card:nth-child(4n+1){background:#ffe3a3}body.kids .subject-card:nth-child(4n+2){background:#c8ecd9}body.kids .subject-card:nth-child(4n+3){background:#ffd0b5}body.kids .subject-card:nth-child(4n){background:#c9e7f4}
body.kids .game-type-card{border:3px solid #2b1d12;border-radius:20px;box-shadow:0 5px 0 #2b1d12}
body.kids .game-type-card h4{font:800 1.1rem 'Baloo 2',sans-serif}
body.kids .qm-dot{border-width:4px;border-color:#2b1d12}
body.kids .qm-name{font:700 .88rem 'Baloo 2',sans-serif}
body.kids .ls-section{background:#fff8e6;border:3px solid #2b1d12;box-shadow:0 5px 0 #2b1d12}
body.kids .ls-section h2,body.kids .lb-section h2{font:800 1.7rem 'Baloo 2',sans-serif;color:#2a7a6f}
body.kids .ls-card{background:#2a7a6f;font-family:'Baloo 2',sans-serif;border-radius:18px}
body.kids .ls-card b{font-size:1.15rem}
body.kids .song-section{background:#fff8e6;border:3px solid #2b1d12;box-shadow:0 5px 0 #2b1d12}
body.kids .game-question,body.kids .tiletap-q,body.kids .ax-q,body.kids .rush-q{font-family:'Baloo 2',sans-serif;font-size:1.45rem}
body.kids .opt-btn,body.kids .ax-opt,body.kids .tile-btn{font-family:'Baloo 2',sans-serif;font-size:1.2rem;border-radius:16px}
.kid-pop{position:fixed;bottom:12px;z-index:940;width:130px;text-align:center;pointer-events:none;animation:kidUp 1.1s cubic-bezier(.2,1.3,.4,1) both}
.kid-pop.l{left:2%}.kid-pop.r{right:2%}
.kid-pop b{display:block;background:#f4b740;border:3px solid #2b1d12;border-radius:14px;font:800 1.15rem 'Baloo 2',sans-serif;color:#2b1d12;padding:2px 6px;margin-top:-8px}
@keyframes kidUp{0%{transform:translateY(160px)}22%,76%{transform:translateY(0)}100%{transform:translateY(170px)}}
@media(max-width:760px){body.kids .games-hero h1{font-size:2.3rem}.k-tree,.k-a.zebra{display:none}.k-a.axi{left:44%}.k-a.elephant{right:2%}.s-a{width:72px}.scale{transform:scale(.82);transform-origin:top center}table.bd{font-size:1.15rem}table.bd td{min-width:26px}.ten{grid-template-columns:repeat(5,34px)}.ten i{height:34px}}
@media(prefers-reduced-motion:reduce){.k-sun,.k-cloud,.k-tree,.k-a,.ct-eyes,.ct-trunk,.s-a,.s-note{animation:none!important}}
.ls-stage.young .bd-chips span{background:rgba(43,29,18,.1);color:#5a4a33}
.ls-stage.young .bd-chips span.on{background:#c06a2a;color:#fff}