/* Topic help, CAPS labels and the Matric Exam Room */
.tp-help{margin-bottom:12px}
.tp-caps{font-size:.84rem;color:var(--navy);background:var(--gold-light);border-left:3px solid #c09848;padding:8px 12px;border-radius:0 8px 8px 0;margin-bottom:8px}
.tp-btns{display:flex;flex-wrap:wrap;gap:8px}
.tp-btn{border:2px solid var(--navy);background:#fff;color:var(--navy);border-radius:10px;padding:10px 14px;font:700 .84rem Inter,sans-serif;cursor:pointer;text-decoration:none}
.tp-btn.main{background:var(--navy);color:#fff}.tp-btn:hover{transform:translateY(-1px)}
.q-caps{display:block;font:700 .68rem Inter,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#9a7830;margin-bottom:5px}
#bQ .q-caps,.ax-q .q-caps{color:#9a7830}.tiletap-q .q-caps,#rushQ .q-caps{color:#e3c68a}
.qm-p{display:block;font-size:.62rem;font-weight:800;letter-spacing:.06em;color:#9a7830;text-transform:uppercase}
.help-row{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin:8px 0;font-size:.86rem;color:#6b7280}
.tl-head{font:700 .72rem Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#e3c68a;margin-bottom:12px}
.ls-stage.young .tl-head{color:#b5532d}
.tl-title{font:700 1.9rem/1.2 'Playfair Display',serif}
.ls-stage.young .tl-title{font:800 2.2rem 'Baloo 2',sans-serif;color:#2a7a6f}
.tl-sub{margin-top:8px;font-size:.95rem;opacity:.8}
.tl-key{font-size:1.3rem;font-weight:700;line-height:1.35;max-width:560px;margin:0 auto}
.ls-stage.young .tl-key{font:700 1.6rem/1.3 'Baloo 2',sans-serif}
.tl-why{margin:12px auto 0;max-width:520px;font-size:.98rem;opacity:.82}
.tl-q{font-size:1.02rem;font-weight:700;max-width:560px;margin:0 auto 8px}
.tl-tip{font-size:1.2rem;font-weight:700;color:#ffd98a;max-width:520px;margin:0 auto}
.ls-stage.young .tl-tip{color:#b5532d}
.tl-body.new{animation:slideInUp .3s ease both}
.er-section{background:#0b1930;color:#fff;border-radius:16px;padding:22px;margin-bottom:26px}
.er-section .section-label{color:#e3c68a}
.er-section h2{color:#fff;font:700 1.7rem 'Playfair Display',serif;margin:0 0 4px}
.er-section>p{color:rgba(255,255,255,.72);font-size:.9rem;margin:0 0 14px}
.er-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.er-card{background:#fff;color:var(--navy);border-radius:12px;padding:16px}
.er-card h3{font:800 1rem Inter,sans-serif;margin:0 0 4px}
.er-card p{font-size:.82rem;color:#6b7280;margin:0 0 10px;line-height:1.45}
.er-card label{display:block;font-size:.74rem;font-weight:700;margin:8px 0 3px}
.er-card select{width:100%;padding:9px;border:1.5px solid var(--border);border-radius:8px;font:inherit;font-size:.86rem;background:#fff}
.er-card .res-btn{width:100%;margin-top:12px}
#erHistory h4{color:#e3c68a;margin:16px 0 6px;font:800 .78rem Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.ex-hrow{display:grid;grid-template-columns:90px 1fr auto auto;gap:8px;font-size:.82rem;padding:6px 0;border-top:1px solid rgba(255,255,255,.12);align-items:baseline}
.ex-hrow small{color:rgba(255,255,255,.55)}.ex-hrow strong{color:#ffd98a}
.ex-body{padding:16px 20px 20px}
.ex-tag{font:800 .72rem Inter,sans-serif;letter-spacing:.06em;color:#9a7830;text-transform:uppercase;margin-bottom:6px}
.ex-pace{height:7px;background:#ebe6db;border-radius:6px;overflow:hidden}.ex-pace i{display:block;height:100%;width:0;background:#c09848;transition:width .25s linear}.ex-pace.big{height:12px;margin:8px 0}
.ex-time{font-size:.76rem;color:#6b7280;margin:5px 0 12px}
.ex-q{font-size:1.04rem;font-weight:600;color:var(--navy);line-height:1.5}
.ex-m{float:right;font-weight:800;margin-left:12px}
.ex-opts{margin:8px 0 0 20px;font-size:.92rem;line-height:1.7}
.ex-note{font-size:.8rem;color:#6b7280;margin-top:8px}
.ex-act{display:flex;justify-content:flex-end;margin-top:14px}
.ex-memo{background:#faf8f4;border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-top:12px}
.ex-mh{font:800 .74rem Inter,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:#9a7830;margin-bottom:6px}
.ex-memo label{display:flex;gap:10px;padding:6px 0;font-size:.92rem;cursor:pointer;align-items:flex-start;border-top:1px solid var(--border)}
.ex-memo input{accent-color:#c09848;width:18px;height:18px;margin-top:2px}
.ex-memo .how-tip{color:var(--navy);background:var(--gold-light)}.ex-memo .how-tip span{color:#9a7830}
.ex-paceres{margin-top:8px;font-size:.82rem;font-weight:700}.ok{color:#2f7d4f}.slow{color:#b5532d}
.ex-res{text-align:center}.ex-big{font:800 3rem 'Playfair Display',serif;color:var(--navy)}
.ex-lv{font-weight:800;color:#9a7830;margin-bottom:4px}.ex-time2{font-size:.86rem;font-weight:700;margin-bottom:12px}
.ex-res h4{text-align:left;font:800 .76rem Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#6b7280;margin:12px 0 4px}
.ex-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--border);text-align:left;flex-wrap:wrap}
.ex-row b{display:block;font-size:.88rem;color:var(--navy)}.ex-row span{font-size:.78rem;color:#6b7280}
.ex-links{display:flex;gap:6px}
.ex-real{text-align:center}.ex-clock{font:800 3.2rem 'Playfair Display',serif;color:var(--navy)}
.ex-guide{font-size:.84rem;color:#9a7830;font-weight:700}
.ex-steps{text-align:left;font-size:.9rem;line-height:1.6;margin:12px 0 0 18px}
.ex-real .ex-act{justify-content:center}
.ex-score{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:14px;font-size:.84rem}
.ex-score input{width:90px;padding:8px;border:1.5px solid var(--border);border-radius:8px;font:inherit}
@media(max-width:640px){.er-grid{grid-template-columns:1fr}.ex-hrow{grid-template-columns:1fr auto}.ex-hrow small{display:none}.ex-hrow span{display:none}}

/* Real Paper Challenges */
.rp-section{background:#fff;border:1px solid var(--border);border-radius:16px;padding:20px;margin-bottom:26px}
.rp-section h2{font:700 1.4rem 'Playfair Display',serif;margin:0 0 2px;color:var(--navy)}
.rp-section>p{font-size:.86rem;color:#6b7280;margin:0 0 12px}
.rp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.rp-card{display:flex;flex-direction:column;gap:7px;text-align:left;background:#faf8f4;border:1.5px solid var(--border);border-left:4px solid #c09848;border-radius:10px;padding:13px;cursor:pointer;font-family:inherit;transition:.15s}
.rp-card:hover{border-color:#c09848;transform:translateY(-2px);box-shadow:0 8px 18px rgba(11,25,48,.1)}
.rp-src{font-size:.68rem;font-weight:800;letter-spacing:.03em;color:#9a7830;text-transform:uppercase}
.rp-card b{font-size:.92rem;line-height:1.35;color:var(--navy)}
.rp-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;font-size:.76rem;color:#6b7280}
.rp-foot i{font-style:normal}.rp-foot em{font-style:normal;color:#c09848}.rp-foot u{text-decoration:none;color:#ddd5c5}
.rp-note{font-size:.76rem;color:#6b7280;margin:8px 0 0}
.rp-source{font-size:.76rem;color:#6b7280;margin-bottom:8px}.rp-source b{color:#9a7830}
.rp-goals{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.rp-goals span{font:700 .72rem Inter,sans-serif;padding:3px 10px;border-radius:50px;background:#ebe6db;color:#6b7280}
.rp-goals .won{background:#2f7d4f;color:#fff}.rp-goals .lost{text-decoration:line-through;opacity:.6}
.rp-hint{background:var(--gold-light);border-left:3px solid #c09848;border-radius:0 8px 8px 0;padding:8px 12px;margin-top:8px;font-size:.88rem;animation:slideInUp .25s ease both}
.rp-hint b{color:#9a7830;margin-right:4px}
.rp-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.rp-act .tp-btn:disabled{opacity:.45;cursor:default}
.rp-credit{font-size:.72rem;color:#6b7280;margin:12px 0 0;line-height:1.45}.rp-credit a{color:#9a7830;font-weight:700}

/* Songs: sing-along */
.s-turn{text-align:center;font:800 1.1rem 'Baloo 2',sans-serif;background:#2a7a6f;color:#fff;padding:6px}
.s-turn.you{background:#c06a2a;animation:gfYou .6s ease}
@keyframes gfYou{50%{transform:scale(1.03)}}
.s-line{border-radius:10px;padding:0 8px;transition:background .2s}
.s-line.cur{background:#ffe9b8;color:#2b1d12}.s-line.you{background:#ffd0b5}
.s-line.cur .s-syl{color:#2b1d12}.s-line .s-syl.on{color:#b5532d}
#voiceBtn{position:fixed;left:110px;bottom:14px;z-index:520;background:#0b1930;color:#e3c68a;border:1px solid #c09848;border-radius:50px;padding:7px 14px;font:700 .78rem Inter,sans-serif;cursor:pointer}
/* Practice test and family */
.pt-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:.84rem}
.pt-row select{padding:9px;border:1.5px solid var(--border);border-radius:8px;font:inherit;background:#fff}
.fm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.fm-card{text-align:left;background:#fff8e6;border:1.5px solid #ecdcb4;border-radius:12px;padding:13px;cursor:pointer;font-family:inherit;transition:.15s}
.fm-card:hover{transform:translateY(-2px);border-color:#c09848}
.fm-card b{display:block;color:var(--navy);font-size:.98rem}.fm-card span{display:block;font-size:.74rem;color:#6b7280;margin:3px 0 8px}
.fm-card i{font-style:normal;font-size:.76rem;font-weight:800;color:#9a7830}.fm-card.done{background:#eaf3ec;border-color:#b7d8c2}.fm-card.done i{color:#2f7d4f}
.fm-part{padding:9px 12px;background:#faf8f4;border-radius:8px;margin-top:8px;font-size:.95rem;line-height:1.5}.fm-part.kid{background:#faf4e6}
.fm-part b{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:#9a7830}
.fm-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-top:14px}
.grp-in{display:block;width:100%;padding:10px;border:1.5px solid var(--border);border-radius:8px;font:inherit;margin:7px 0}
.grp-who{font:700 1.3rem 'Playfair Display',serif;color:var(--navy)}
.grp-score{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.grp-score span{font-size:.76rem;padding:3px 9px;border-radius:50px;background:#ebe6db}.grp-score .on{background:#c09848;color:#0b1930;font-weight:800}
body.kids .fm-card b,body.kids .grp-who{font-family:'Baloo 2',sans-serif}
/* Grades 8 to 12: polished and playful, not childish */
body.senior{background:#eef1f5}
body.senior .games-hero{background:linear-gradient(rgba(120,170,220,.08) 1px,transparent 1px) 0 0/30px 30px,linear-gradient(90deg,rgba(120,170,220,.08) 1px,transparent 1px) 0 0/30px 30px,linear-gradient(135deg,#0b1930,#1a3a5c)}
body.senior .fx-sym{color:rgba(192,152,72,.42)}
body.senior .axi .eye,body.senior .axi .mouth,body.senior .ct-eyes,body.senior .ct-mouth{display:none}
body.senior .axi .orb{animation-duration:2.6s}
body.senior .pl-bar{background:#0b1930;border-color:#0b1930;color:#fff}
body.senior .pl-row strong,body.senior .pl-stat b{color:#fff}body.senior .pl-row,body.senior .pl-stat span{color:rgba(255,255,255,.62)}
body.senior .pl-track{background:rgba(255,255,255,.14)}
body.senior .subject-card{background:#fff;border:1px solid #d9dfe7;border-bottom:3px solid #c09848}
body.senior .game-type-card{border:1px solid #d9dfe7}
body.senior .game-type-card:hover,body.senior .subject-card:hover{box-shadow:0 12px 26px rgba(11,25,48,.16)}
body.senior .game-type-card h4,body.senior .subject-card h3{font-family:'Playfair Display',serif}
body.senior .qm-dot{background:#0b1930;color:#e3c68a;border-color:#3a5575}
body.senior .ls-card{background:linear-gradient(135deg,#0b1930,#1a3a5c)}
body.senior .ls-section,body.senior .rp-section,body.senior .lb-section{box-shadow:0 2px 8px rgba(11,25,48,.06)}

/* Ask a parent */
.ap-btn{display:block;width:100%;margin:10px 0 2px;padding:10px 14px;background:#fff;border:1.5px dashed #c09848;border-radius:10px;color:#7a5e22;font:700 .86rem Inter,sans-serif;cursor:pointer;transition:background .15s}
.ap-btn:hover{background:#faf4e6}
.ap-btn.moment{background:#faf4e6;border-style:solid;color:#0b1930;animation:apGlow 2.2s ease-in-out infinite}
@keyframes apGlow{50%{box-shadow:0 0 0 5px rgba(192,152,72,.22)}}
body.kids .ap-btn{font-family:'Baloo 2',sans-serif;font-size:1.02rem}
.ap-shade{position:absolute;inset:0;z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;overflow:auto;background:rgba(11,25,48,.72)}
.ap-card{background:#fff;border-radius:14px;border-top:4px solid #c09848;max-width:520px;width:100%;padding:20px;color:#24466e;margin:auto}
.ap-tag{font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#9a7830}
.ap-card h3{font:700 1.35rem 'Playfair Display',serif;color:#0b1930;margin:2px 0 10px}
.ap-q{background:#faf4e6;border-radius:8px;padding:10px 12px;font-weight:700;color:#0b1930;line-height:1.4}
.ap-note{font-size:.84rem;line-height:1.5;margin:10px 0 6px;color:#4b5b70}
.ap-list,.ap-steps{margin:6px 0 10px;padding-left:20px;font-size:.92rem;line-height:1.5}.ap-list li,.ap-steps li{margin:4px 0}
.ap-steps{background:#f4f6f9;border-radius:8px;padding:10px 12px 10px 30px}
.ap-ans{background:#eaf3ec;border-radius:8px;padding:10px 12px;margin:8px 0;color:#1d5a37}.ap-ans b{margin-right:6px}.ap-ans span{display:block;font-size:.78rem;margin-top:3px}
.ap-row{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 12px}
.ap-back{width:100%}
.ap-won{margin-top:6px;font-size:.82rem;font-weight:800;color:#9a7830}

/* Rhymes: recorded voice, words to learn, finish the rhyme */
.s-act{text-align:center;background:#fff3d6;color:#7a4b12;font:700 .95rem 'Baloo 2',sans-serif;padding:5px 10px}
.s-line{cursor:pointer}
.s-words{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;padding:9px 12px;background:#fff;border-top:1px solid #f0e4c8}
.s-words span{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#9a7830;margin-right:4px}
.s-words button{border:1.5px solid #ecdcb4;background:#fffaf0;border-radius:50px;padding:5px 13px;font:700 .95rem 'Baloo 2',sans-serif;color:#0b1930;cursor:pointer}
.s-words button:hover{background:#ffe9b8}
.s-blank{display:inline-block;width:3.4em;border-bottom:4px solid #b5532d;margin:0 3px}
.s-gline{color:#2b1d12;padding:6px 0 14px}
.s-gopts{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.s-gopts button{min-width:108px;padding:11px 16px;border-radius:14px;border:2px solid #d8cfbc;background:#fff;font:800 1.2rem 'Baloo 2',sans-serif;color:#0b1930;cursor:pointer}
.s-gopts .ok{background:#2f7d4f;border-color:#2f7d4f;color:#fff}.s-gopts .no{background:#b42318;border-color:#b42318;color:#fff}
.s-gdone{color:#2b1d12;padding:14px 0}.s-gdone small{font-size:1rem;color:#9a7830}
.s-credit{font-size:.68rem;color:#8b8373;margin:10px 0 0}.s-credit a{color:inherit}

/* One page design across every phase */
#bandIntro{margin:0 0 14px}
#bandIntro .bi-tag{font:800 .72rem Inter,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#9a7830}
#bandIntro h2{font:700 1.7rem/1.2 'Playfair Display',serif;color:var(--navy);margin:3px 0 3px}
#bandIntro p{margin:0;font-size:.93rem;color:#5c6675}
body.band-F #bandIntro h2{font-family:'Baloo 2',sans-serif;font-size:2rem}
#bandNav{position:sticky;top:64px;z-index:40;display:flex;gap:6px;overflow-x:auto;margin:0 -4px 16px;padding:8px 4px;background:inherit;scrollbar-width:none}
#bandNav::-webkit-scrollbar{display:none}
#bandNav button{flex:none;border:1.5px solid #d9d2c1;background:#fff;color:var(--navy);border-radius:50px;padding:7px 14px;font:700 .8rem Inter,sans-serif;cursor:pointer;box-shadow:0 1px 3px rgba(11,25,48,.08)}
#bandNav button:hover{border-color:#c09848;background:#faf4e6}
body.band-F #bandNav button{font-family:'Baloo 2',sans-serif;font-size:.98rem}
body.band-E #bandNav button{border-color:#c7d0dc}
#main-games>#playZone,#main-games>section,#main-games>div[id]{scroll-margin-top:124px}
#playZone{background:#fff;border-radius:16px;padding:20px;margin-bottom:18px;box-shadow:0 2px 8px rgba(11,25,48,.06)}
#main-games>section{margin-bottom:18px}
@media(max-width:560px){#playZone{padding:14px}#bandIntro h2{font-size:1.4rem}}

/* Rhyme cartoons */
.s-prop{position:absolute;left:50%;top:10px;width:92px;height:92px;margin-left:-46px;z-index:2}
.s-prop.twinkle{animation:apTw 1.2s ease-in-out infinite}.s-prop.hop{animation:apHop .9s ease-in-out infinite}.s-prop.swing{transform-origin:50% 8%;animation:apSw 1.1s ease-in-out infinite}.s-prop.rock{transform-origin:50% 80%;animation:apRk 1.8s ease-in-out infinite}.s-prop.wobble{transform-origin:50% 100%;animation:apSw 1.5s ease-in-out infinite}
@keyframes apTw{50%{transform:scale(1.18) rotate(8deg);filter:brightness(1.2)}}
@keyframes apHop{50%{transform:translateY(-14px)}}
@keyframes apSw{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
@keyframes apRk{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg) translateY(4px)}}
@media (prefers-reduced-motion:reduce){.s-prop{animation:none!important}}
.s-video{background:#0b1930;padding:0;text-align:center}.s-video iframe{display:block;width:100%;aspect-ratio:16/9;border:0}.s-video small{display:block;color:#c7ccd6;font:600 .72rem Inter,sans-serif;padding:5px}
.s-credit2{display:block;font:600 .7rem Inter,sans-serif;color:#8b8373;margin-top:8px}

/* One consistent rhythm for every section on the games page */
#main-games>section,#playZone{border-radius:16px;margin-bottom:18px}
#main-games>section .section-label,#playZone .section-label{color:#9a7830;letter-spacing:.11em;font-size:.72rem;margin-bottom:6px}
#main-games>section h2{font:700 1.45rem/1.2 'Playfair Display',serif;color:var(--navy);margin:0 0 4px}
#main-games>section>p:first-of-type,#main-games>section>div>p:first-of-type{font-size:.92rem;color:#5c6675;margin:0 0 16px;max-width:720px}
.er-section h2,.lab-section h2{color:#fff}
.er-section .section-label,.lab-section .section-label{color:#e3c68a}
body.kids #main-games>section h2{font-family:'Baloo 2',sans-serif;font-size:1.7rem}
body.kids #main-games>section .section-label{color:#b5532d}

/* Keep the WhatsApp bubble off the game controls and off phones mid-game */
body:has(#gameOverlay.open) #waFloat{display:none!important}
@media(max-width:640px){#waFloat{bottom:14px!important;right:14px!important;width:48px!important;height:48px!important}}