@font-face{font-family:'Baloo 2';src:url('../assets/fonts/baloo-500.ttf') format('truetype');font-weight:500;font-display:swap}@font-face{font-family:'Baloo 2';src:url('../assets/fonts/baloo-600.ttf') format('truetype');font-weight:600;font-display:swap}@font-face{font-family:'Baloo 2';src:url('../assets/fonts/baloo-700.ttf') format('truetype');font-weight:700;font-display:swap}@font-face{font-family:'Noto Sans Arabic';src:url('../assets/fonts/arabic-600.ttf') format('truetype');font-weight:600;font-display:swap}@font-face{font-family:'Noto Sans Arabic';src:url('../assets/fonts/arabic-700.ttf') format('truetype');font-weight:700;font-display:swap}@font-face{font-family:'Noto Sans Bengali';src:url('../assets/fonts/bengali-500.ttf') format('truetype');font-weight:500;font-display:swap}@font-face{font-family:'Noto Sans Bengali';src:url('../assets/fonts/bengali-600.ttf') format('truetype');font-weight:600;font-display:swap}@font-face{font-family:'Noto Sans Bengali';src:url('../assets/fonts/bengali-700.ttf') format('truetype');font-weight:700;font-display:swap}
:root{--ink:#27364b;--cream:#fffaf0;--image-cream:#faf2dc;--white:#fff;--coral:#ff786d;--blue:#56a9e9;--yellow:#f4bd42;--mint:#55c5a7;--purple:#9575df;--radius:30px;--shadow:0 12px 0 rgba(55,61,84,.08),0 18px 38px rgba(55,61,84,.12);--gap:clamp(14px,2vw,24px)}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:'Baloo 2','Noto Sans Bengali',sans-serif;color:var(--ink);background:var(--cream) url('../assets/images/playground-bg.webp') center/cover fixed;overflow-x:hidden}button{font:inherit;color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.app-shell{min-height:100%;padding:clamp(12px,2vw,24px)}.topbar{height:64px;max-width:1180px;margin:auto;display:flex;align-items:center;gap:10px}.brand{margin:auto;font-size:clamp(17px,2.3vw,26px);font-weight:700;letter-spacing:.2px}.brand span{color:#f7b733}.round-btn,.parent-btn,.close-btn{border:0;background:rgba(255,255,255,.88);box-shadow:0 5px 18px rgba(53,65,91,.12);cursor:pointer}.round-btn{width:50px;height:50px;border-radius:18px;font-size:30px;font-weight:700}.parent-btn{border-radius:18px;padding:11px 15px;font-size:14px;font-weight:700;color:#657083;user-select:none}.hidden{display:none!important}main{max-width:1120px;margin:auto;outline:none}.home-view{padding:clamp(12px,4vw,42px) 0}.welcome{display:flex;justify-content:center;align-items:center;gap:18px;text-align:left;margin-bottom:clamp(18px,4vh,40px)}.welcome p,.eyebrow{margin:0;color:#788398;font-size:clamp(16px,2vw,21px);font-weight:600}.welcome h1,.selection-view h1{font-size:clamp(30px,5vw,54px);line-height:1;margin:4px 0}.sun{display:grid;place-items:center;width:70px;height:70px;border-radius:50%;background:#ffd35c;color:#fff;font-size:38px;box-shadow:0 8px 0 #f4b93d;animation:float 3s ease-in-out infinite}.main-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}.topic-card{position:relative;min-height:220px;border:0;border-radius:var(--radius);padding:24px;text-align:left;cursor:pointer;box-shadow:var(--shadow);overflow:hidden;transition:transform .25s,box-shadow .25s}.topic-card:hover{transform:translateY(-5px)}.topic-card:active{transform:scale(.96)}.topic-card:before,.topic-card:after{content:'';position:absolute;border-radius:50%;background:rgba(255,255,255,.16)}.topic-card:before{width:150px;height:150px;right:-55px;top:-45px}.topic-card:after{width:80px;height:80px;left:-30px;bottom:-30px}.topic-card.coral{background:linear-gradient(145deg,#ff8a7e,#f56e68);color:#fff}.topic-card.blue{background:linear-gradient(145deg,#73c5f5,#4e9fe0);color:#fff}.topic-card.yellow{background:linear-gradient(145deg,#ffd96b,#f2b842)}.topic-card.mint{background:linear-gradient(145deg,#75ddc0,#4fb99e);color:#fff}.topic-card.purple{background:linear-gradient(145deg,#ae94ed,#8c6ed8);color:#fff}.card-icon{height:105px;display:flex;align-items:center;font-size:clamp(60px,8vw,94px);font-weight:700;line-height:1;text-shadow:0 5px 0 rgba(0,0,0,.06)}.card-copy{display:block;position:relative;z-index:1}.card-copy strong{display:block;font-size:clamp(23px,3vw,33px);line-height:1.1}.card-copy small{font-size:16px;opacity:.83}.go{position:absolute;right:20px;bottom:18px;font-size:38px}.tip{text-align:center;margin:30px auto 0;color:#778196;font-weight:600}.selection-view{text-align:center;padding:clamp(15px,5vh,55px) 0}.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:32px}.category-grid .topic-card{min-height:210px}.lesson-view{padding:10px 0}.lesson-heading{display:flex;justify-content:space-between;align-items:center;margin:8px 5px 12px}.lesson-heading small{font-size:18px;font-weight:700}.progress-dots{background:#fff;padding:7px 14px;border-radius:20px;color:#7a8394}.learning-card{background:rgba(255,255,255,.92);border-radius:36px;min-height:clamp(380px,64vh,610px);box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;position:relative;overflow:hidden}.learning-card:before{content:'';position:absolute;width:240px;height:240px;border-radius:50%;background:#fff3d1;right:-100px;top:-100px;z-index:0;pointer-events:none}.learning-card>*{position:relative;z-index:1}.hero-symbol{border:0;background:transparent;font-weight:700;font-size:clamp(115px,23vh,220px);line-height:.9;cursor:pointer;position:relative;color:var(--coral);min-width:180px}.hero-symbol i{position:absolute;font-style:normal;font-size:24px;background:#fff0e8;border-radius:50%;padding:8px;right:-15px;top:8px}.hero-symbol:active,.visual-button:active{animation:pop .35s}.hero-symbol.rtl{font-family:Arial,'Noto Sans Arabic',Tahoma,sans-serif;font-feature-settings:'liga' 1,'calt' 1;color:var(--purple)}.visual-button{border:0;background:#f1f9ff;border-radius:28px;min-width:150px;min-height:125px;padding:8px 25px;cursor:pointer}.visual-button span{font-size:clamp(80px,14vh,140px);line-height:1}.visual-button.picture{width:min(85%,520px);height:clamp(220px,38vh,360px);background:linear-gradient(145deg,#effff9,#eef5ff);overflow:hidden;position:relative}.visual-button.picture>span{font-size:clamp(145px,28vh,260px)}.visual-button.picture img{width:100%;height:100%;display:block;object-fit:contain;border-radius:20px;transition:transform .3s ease}.visual-button.picture:hover img{transform:scale(1.025)}.visual-button.picture .image-fallback{display:none}.visual-button.picture.image-error img{display:none}.visual-button.picture.image-error .image-fallback{display:block}.word-button,.bn-word{border:0;background:transparent;font-weight:700;font-size:clamp(34px,6vw,62px);cursor:pointer;padding:3px 20px}.bn-word{font-family:'Noto Sans Bengali',sans-serif;font-size:clamp(18px,3vw,28px);color:#677489}.word-button.rtl{font-family:'Noto Sans Arabic',sans-serif}.counting{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;max-width:550px;margin-top:10px}.counting span{font-size:clamp(30px,5vw,50px)}.lesson-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}.lesson-nav button{min-height:68px;border:0;border-radius:22px;background:#fff;font-size:clamp(17px,2.3vw,24px);font-weight:700;box-shadow:0 7px 0 rgba(55,61,84,.1);cursor:pointer}.lesson-nav button:active{transform:translateY(4px);box-shadow:0 3px 0 rgba(55,61,84,.1)}.lesson-nav .repeat{background:var(--coral);color:#fff}.lesson-nav button:disabled{opacity:.35;cursor:default}.modal{display:none;position:fixed;inset:0;background:rgba(34,45,63,.48);backdrop-filter:blur(5px);z-index:5;place-items:center;padding:18px}.modal.open{display:grid}.settings{width:min(430px,100%);background:#fffdf8;border-radius:34px;padding:28px;box-shadow:0 25px 80px rgba(0,0,0,.23);position:relative}.settings h2{text-align:center;font-size:31px;margin:4px}.settings>p{text-align:center;color:#8992a2;margin:0 0 16px}.settings-icon{text-align:center;font-size:42px}.close-btn{position:absolute;right:18px;top:18px;width:44px;height:44px;border-radius:50%;font-size:28px}.settings label{display:flex;align-items:center;justify-content:space-between;padding:16px 4px;border-top:1px solid #eef0f3;font-size:18px;font-weight:600}.settings input{position:absolute;opacity:0}.settings i{width:54px;height:31px;background:#d7dce3;border-radius:20px;position:relative}.settings i:after{content:'';position:absolute;width:25px;height:25px;border-radius:50%;background:white;left:3px;top:3px;box-shadow:0 2px 6px #777;transition:.2s}.settings input:checked+i{background:var(--mint)}.settings input:checked+i:after{transform:translateX(23px)}.hold-ring{display:none;position:fixed;inset:0;z-index:9;place-items:center;background:rgba(39,54,75,.25);pointer-events:none}.hold-ring.active{display:grid}.hold-ring span{width:130px;height:130px;background:white;border-radius:50%;display:grid;place-items:center;text-align:center;font-weight:700;padding:15px;border:9px solid #eee;animation:hold 3s linear forwards}@keyframes hold{to{border-color:var(--mint)}}@keyframes pop{50%{transform:scale(1.1) rotate(2deg)}}@keyframes float{50%{transform:translateY(-5px) rotate(5deg)}}.no-motion *{animation:none!important;transition:none!important}
@media(max-width:750px){.main-grid,.category-grid{grid-template-columns:1fr}.topic-card{min-height:140px;display:flex;align-items:center;gap:20px}.card-icon{height:auto;width:105px;font-size:68px;justify-content:center}.card-copy strong{font-size:27px}.topbar{height:58px}.brand{font-size:17px}.parent-btn{font-size:0;width:47px;height:47px;padding:0}.parent-btn:first-letter{font-size:20px}.learning-card{min-height:calc(100svh - 190px)}.lesson-nav{position:sticky;bottom:8px}.lesson-nav button{font-size:15px;min-height:62px}.lesson-nav button span{display:block}.visual-button.picture{min-height:240px}.home-view{padding-top:18px}.welcome{justify-content:flex-start}.welcome h1{font-size:31px}.sun{width:58px;height:58px}.category-grid{margin-top:22px}}
@media(min-width:751px) and (max-width:1000px){.category-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-height:680px) and (orientation:landscape){.learning-card{min-height:390px}.visual-button.picture{min-height:210px}.visual-button.picture span{font-size:150px}.hero-symbol{font-size:130px}.lesson-nav button{min-height:54px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.fullscreen-btn{font-size:24px;flex:0 0 auto}
.learning-card{touch-action:pan-y}.app-fullscreen{height:100dvh;overflow-y:auto;overscroll-behavior:none}.app-fullscreen .app-shell{min-height:100dvh;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}.app-fullscreen .learning-card{min-height:calc(100dvh - 180px)}
.learning-card.slide-in-next{animation:galleryNext .28s ease-out}.learning-card.slide-in-prev{animation:galleryPrev .28s ease-out}@keyframes galleryNext{from{opacity:.35;transform:translateX(11%)}}@keyframes galleryPrev{from{opacity:.35;transform:translateX(-11%)}}
:fullscreen .app-shell{padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}
:fullscreen .learning-card{min-height:calc(100svh - 180px)}

.visual-button.picture.has-image{padding:0;background:#fff}.visual-button.picture.has-image img{object-fit:cover;border-radius:inherit}

.learning-card.number{padding:clamp(16px,3vw,32px)}
.number-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%;min-height:inherit;gap:clamp(14px,2.5vw,32px)}
.number-panel,.objects-panel{border-radius:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(14px,3vw,32px)}
.number-panel{background:#fff6ed;border:3px solid #ffd9c5}.objects-panel{background:#effaf7;border:3px solid #cbeee3}
.objects-panel>small{font-size:clamp(17px,2vw,23px);font-weight:700;color:#668077;margin-bottom:16px}
.number-panel .hero-symbol{border-radius:24px}.number-word{border:0;background:transparent;font-size:clamp(31px,5vw,58px);font-weight:700;cursor:pointer}
.objects-panel .counting{max-width:460px;gap:clamp(7px,1.3vw,16px);margin:0}.objects-panel .counting span{font-size:clamp(43px,6vw,72px);filter:drop-shadow(0 5px 3px rgba(39,54,75,.12))}
.big-number-name{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;text-align:center;font-size:clamp(40px,6vw,72px);font-weight:700;cursor:pointer}.big-number-name span{font-size:42px;margin-bottom:10px}
.learning-card.alphabet{gap:clamp(14px,3vh,28px)}.learning-card.alphabet .hero-symbol.rtl{line-height:1.2;margin-bottom:8px}.learning-card.alphabet .word-button.rtl{line-height:1.35;min-height:1.4em}
button:focus-visible{outline:4px solid #395b90;outline-offset:3px}
@media(max-width:650px){.number-split{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:10px}.number-panel{flex-direction:row;gap:18px}.number-panel .hero-symbol{font-size:clamp(80px,18vh,130px)}.number-word{font-size:clamp(29px,8vw,45px)}.objects-panel>small{margin-bottom:5px}.objects-panel .counting span{font-size:clamp(34px,10vw,54px)}}
/* Mobile scrolling and keyboard clarity */
html{scroll-behavior:smooth}body{overflow-y:auto}.topic-card:focus-visible,.lesson-nav button:focus-visible,.round-btn:focus-visible,.parent-btn:focus-visible,.word-button:focus-visible,.number-word:focus-visible,.visual-button:focus-visible{outline:4px solid #234f87;outline-offset:4px}
@media(max-width:750px){
  body{overflow-y:auto;-webkit-overflow-scrolling:touch;background-attachment:scroll}
  .app-shell{min-height:100svh;height:auto;padding-bottom:max(18px,env(safe-area-inset-bottom))}
  main{overflow:visible}.lesson-view{padding-bottom:18px}
  .learning-card,.learning-card.number{min-height:0;height:auto;padding:14px}
  .number-split{min-height:560px;height:auto}
  .learning-card.picture{min-height:560px}
  .lesson-nav{position:static;margin-bottom:12px}
  .topbar{position:relative}
}
@media(max-width:420px){
  .number-split{min-height:520px}.learning-card.picture{min-height:500px}
  .lesson-nav{gap:7px}.lesson-nav button{min-width:0;padding:7px 4px}
  .brand{max-width:130px;text-align:center;line-height:1.05}
}
/* Compact two-column alphabet lessons */
.learning-card.alphabet{padding:clamp(16px,3vw,34px);min-height:clamp(360px,58vh,540px)}
.alphabet-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(14px,3vw,36px);width:100%;min-height:inherit}
.letter-panel,.example-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:30px;padding:clamp(12px,2.5vw,28px)}
.letter-panel{background:#fff4ed;border:3px solid #ffdbcc}.example-panel{background:#f1f8ff;border:3px solid #d7eafa;gap:clamp(8px,2vh,18px)}
.letter-panel .hero-symbol{font-size:clamp(130px,25vw,260px);line-height:1;min-width:0;width:100%;border-radius:26px}
.alphabet-picture{border:0;background:transparent;width:min(100%,330px);height:clamp(165px,29vh,290px);display:grid;place-items:center;border-radius:24px;padding:8px;cursor:pointer;overflow:hidden}
.alphabet-picture>span{font-size:clamp(100px,19vh,190px);line-height:1}.alphabet-picture img{width:100%;height:100%;object-fit:cover;border-radius:20px}.alphabet-picture .image-fallback{display:none}.alphabet-picture.image-error img{display:none}.alphabet-picture.image-error .image-fallback{display:block}
.example-panel .word-button{font-size:clamp(32px,5vw,58px);line-height:1.15}.alphabet-sound{font-size:clamp(70px,13vw,130px);opacity:.3}
.alphabet-split.rtl-layout{direction:ltr}.alphabet-split.rtl-layout .hero-symbol,.alphabet-split.rtl-layout .word-button{direction:rtl}.alphabet-split.rtl-layout .example-panel{gap:8px}
@media(max-width:600px){.learning-card.alphabet{min-height:0;padding:10px}.alphabet-split{grid-template-columns:1fr;grid-template-rows:auto auto;min-height:0;gap:9px}.letter-panel,.example-panel{width:100%;border-radius:22px;padding:8px}.letter-panel{min-height:220px}.example-panel{min-height:320px}.letter-panel .hero-symbol{font-size:clamp(84px,29vw,140px)}.alphabet-picture{height:clamp(240px,82vw,360px);padding:2px}.alphabet-picture>span{font-size:clamp(78px,25vw,125px)}.example-panel .word-button{font-size:clamp(23px,7vw,36px);padding:4px}.alphabet-sound{font-size:64px}}
/* Parent usage dashboard */
.settings{max-height:min(90vh,760px);overflow-y:auto;width:min(560px,100%)}
.usage-dashboard{margin:18px 0 20px;padding:16px;background:#f7f9fc;border-radius:24px}
.usage-dashboard h3{margin:0 0 12px;font-size:21px}.usage-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.usage-stats article,.usage-favorites article{background:#fff;border-radius:16px;padding:12px;box-shadow:0 4px 14px rgba(55,61,84,.07)}
.usage-stats strong{display:block;font-size:clamp(20px,4vw,29px);color:#5b63c4;line-height:1}.usage-stats span,.usage-favorites span{display:block;color:#778196;font-size:12px;line-height:1.2;margin-top:6px}
.usage-favorites{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:9px}.usage-favorites strong{display:block;font-size:17px;line-height:1.15;margin:5px 0}.usage-favorites small{color:#4c987f;font-weight:700}

/* Color Book */
.main-grid{grid-template-columns:repeat(4,1fr)}
.color-book-card{width:100%;min-height:inherit;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(220px,.75fr);gap:clamp(16px,3vw,36px);padding:clamp(12px,2vw,26px)}
.color-swatch{border:0;border-radius:34px;background:#f4f5f7;display:grid;place-items:center;cursor:pointer;box-shadow:inset 0 0 0 5px rgba(39,54,75,.1);overflow:hidden}
.paint-drop{color:var(--learning-color);font-size:clamp(230px,38vw,430px);line-height:.7;text-shadow:0 12px 20px rgba(39,54,75,.14);transform:scaleX(1.15)}
.color-names{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:14px}.color-names button{border:0;border-radius:22px;padding:17px;background:#fff;font-weight:700;font-size:clamp(28px,4.5vw,53px);box-shadow:0 7px 0 rgba(55,61,84,.1);cursor:pointer}.color-names button:last-child{font-family:'Noto Sans Bengali',sans-serif;font-size:clamp(23px,3.5vw,40px)}
@media(max-width:950px){.main-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.main-grid{grid-template-columns:1fr}.color-book-card{grid-template-columns:1fr;grid-template-rows:minmax(250px,1fr) auto;padding:8px}.color-names{display:grid;grid-template-columns:1fr 1fr}.color-names button{font-size:clamp(25px,8vw,38px);padding:12px}.paint-drop{font-size:clamp(220px,76vw,340px)}.usage-dashboard{padding:12px}.usage-stats{grid-template-columns:1fr 1fr}.usage-stats article:first-child{grid-column:1/-1}.usage-favorites{grid-template-columns:1fr}}
.color-swatch{background:var(--learning-color);box-shadow:inset 0 0 0 5px rgba(39,54,75,.14),0 12px 28px rgba(39,54,75,.12)}.color-swatch .paint-drop{display:none}

/* Open home topic layout */
.main-grid .topic-card{background:transparent;color:var(--ink);box-shadow:none;border-radius:0;overflow:visible;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:8px;min-height:250px}
.main-grid .topic-card::before,.main-grid .topic-card::after{display:none}
.main-grid .topic-card:hover{transform:translateY(-7px)}.main-grid .topic-card:active{transform:scale(.96)}
.main-grid .card-icon{width:clamp(140px,16vw,190px);height:clamp(140px,16vw,190px);display:grid;place-items:center;border-radius:42%;font-size:clamp(66px,8vw,92px);box-shadow:0 12px 0 rgba(55,61,84,.08),0 18px 34px rgba(55,61,84,.14);color:#fff;margin-bottom:18px;position:relative;overflow:hidden}
.main-grid .card-icon::after{content:'';position:absolute;width:70%;height:70%;border-radius:50%;background:rgba(255,255,255,.14);right:-30%;top:-30%}
.main-grid .coral .card-icon{background:linear-gradient(145deg,#ff8a7e,#f56e68)}.main-grid .yellow .card-icon{background:linear-gradient(145deg,#ffd96b,#f2b842);color:#243c5c}.main-grid .purple .card-icon{background:linear-gradient(145deg,#ae94ed,#8c6ed8)}.main-grid .mint .card-icon{background:linear-gradient(145deg,#75ddc0,#4fb99e)}.main-grid .blue .card-icon{background:linear-gradient(145deg,#73c5f5,#4e9fe0)}
.card-icon.arabic-icon{font-family:Arial,'Noto Sans Arabic',Tahoma,sans-serif;font-feature-settings:'liga' 1,'calt' 1;direction:rtl}
.main-grid .card-copy strong{font-size:clamp(23px,2.6vw,31px)}.main-grid .card-copy small{color:#6f7b8e;opacity:1}.main-grid .go{display:none}
@media(max-width:750px){.main-grid{grid-template-columns:repeat(2,1fr)}.main-grid .topic-card{min-height:210px;padding:5px}.main-grid .card-icon{width:clamp(120px,36vw,160px);height:clamp(120px,36vw,160px);margin-bottom:13px}.main-grid .card-copy strong{font-size:23px}.main-grid .card-copy small{font-size:14px}}
@media(max-width:370px){.main-grid{grid-template-columns:1fr}.main-grid .topic-card{min-height:205px}}
.learning-card:has(.has-image){background:var(--image-cream)}.learning-card:has(.has-image)::before{display:none}.visual-button.picture.has-image{width:min(82vw,540px);height:auto;aspect-ratio:1;padding:0;background:var(--image-cream)}.visual-button.picture.has-image img,.alphabet-picture.has-image img{object-fit:contain;width:100%;height:100%;border-radius:inherit}.alphabet-picture.has-image{width:min(100%,350px);height:auto;aspect-ratio:1;padding:0;background:var(--image-cream)}@media(max-width:650px){.visual-button.picture.has-image{width:min(92vw,440px);height:auto;min-height:0}.alphabet-picture.has-image{width:100%;height:auto;min-height:0}}

.language-setting select{border:2px solid #dfe4ec;border-radius:12px;background:#fff;padding:8px 10px;font:inherit;font-weight:700;color:var(--ink)}
.parent-btn.holding{box-shadow:0 0 0 6px rgba(85,197,167,.32);transform:scale(.97)}
.hold-ring.complete{background:rgba(39,54,75,.32)}.hold-ring.complete span{width:148px;height:148px;border-color:var(--mint);background:#effff8;color:#318a70;font-size:22px;animation:holdSuccess .65s ease both}
@keyframes holdSuccess{0%{transform:scale(.86)}45%{transform:scale(1.14) rotate(-3deg)}70%{transform:scale(.97) rotate(2deg)}100%{transform:scale(1)}}

html,body,.settings{scrollbar-width:none;-ms-overflow-style:none}html::-webkit-scrollbar,body::-webkit-scrollbar,.settings::-webkit-scrollbar{display:none;width:0;height:0}

.portal-actions{display:flex;gap:8px;margin-top:14px}.portal-actions button{flex:1;border:0;border-radius:13px;padding:9px;font:inherit;font-weight:700;cursor:pointer}.portal-actions button:first-child{background:#eaf5ff}.portal-actions button:last-child{background:#fff0ed;color:#a8433c}.parent-notice{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;background:#27364b;color:#fff;padding:12px 20px;border-radius:18px;z-index:20;transition:.25s;pointer-events:none}.parent-notice.show{opacity:1;transform:translate(-50%,0)}

/* Tracing and Find It */
.tracing-card{width:100%;min-height:inherit;display:grid;grid-template-columns:minmax(180px,.45fr) minmax(300px,1fr);grid-template-rows:1fr auto;gap:18px;padding:16px}.trace-prompt{grid-row:1/3;background:#f2f7ff;border-radius:28px;display:flex;flex-direction:column;align-items:center;justify-content:center}.trace-prompt strong{font-size:clamp(100px,20vw,210px);line-height:1;color:#547ab5}.trace-prompt span{font-size:clamp(24px,4vw,42px);font-weight:700}.tracing-card canvas{width:100%;height:100%;min-height:360px;border:4px dashed #c8d7e9;border-radius:28px;background:#fff;touch-action:none}.tracing-card #clearTrace{border:0;border-radius:18px;background:#eaf2ff;padding:12px;font:inherit;font-size:20px;font-weight:700;cursor:pointer}.quiz-card{width:100%;min-height:inherit;display:flex;flex-direction:column;justify-content:center;gap:22px}.quiz-question{align-self:center;border:0;border-radius:22px;background:#6c63d9;color:#fff;padding:14px 28px;font:inherit;font-size:clamp(25px,4vw,42px);font-weight:700;cursor:pointer}.quiz-options{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,2vw,22px)}.quiz-option{border:4px solid #e5e8ed;background:#fff;border-radius:28px;padding:12px;min-width:0;cursor:pointer;transition:.25s}.quiz-option img,.quiz-option i{display:block;width:100%;aspect-ratio:1;object-fit:contain;border-radius:20px}.quiz-option i{box-shadow:inset 0 0 0 3px rgba(39,54,75,.12)}.quiz-option>span{display:grid;place-items:center;aspect-ratio:1;font-size:clamp(70px,12vw,140px)}.quiz-option b{display:block;font-size:clamp(18px,2.5vw,28px);margin-top:7px}.quiz-option.correct{border-color:#43bd8d;background:#effff8;animation:pop .35s}.quiz-option.wrong{border-color:#ef7a72;animation:shake .32s}#quizFeedback{min-height:32px;text-align:center;font-size:24px;font-weight:700;color:#4b9378}@keyframes shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}@media(max-width:680px){.tracing-card{grid-template-columns:1fr;grid-template-rows:auto minmax(310px,1fr) auto;padding:4px}.trace-prompt{grid-row:auto;flex-direction:row;gap:18px;padding:9px}.trace-prompt strong{font-size:70px}.tracing-card canvas{min-height:310px}.quiz-options{grid-template-columns:1fr 1fr 1fr}.quiz-option{padding:5px;border-radius:18px}.quiz-option img,.quiz-option i{border-radius:14px}.quiz-option b{font-size:15px;overflow:hidden;text-overflow:ellipsis}.quiz-question{font-size:24px}}
.visual-button.picture.media-card{width:min(82vw,540px);height:auto;min-height:0;aspect-ratio:1;padding:0;background:var(--image-cream)}
.alphabet-picture,.alphabet-picture.has-image{width:min(100%,350px);height:auto;aspect-ratio:1;padding:0;background:var(--image-cream)}
.alphabet-picture.icon-only>span{font-size:clamp(96px,18vh,175px)}
.alphabet-split.rtl-layout .alphabet-picture.icon-only>span{font-family:Arial,'Noto Sans Arabic',Tahoma,sans-serif;font-feature-settings:'liga' 1,'calt' 1;color:var(--purple)}
.objects-panel .counting{width:100%;max-width:520px;align-items:center;align-content:center}
.objects-panel .counting.dense,.objects-panel .counting.very-dense{display:grid;margin-inline:auto}
.objects-panel .counting.dense{grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.objects-panel .counting.very-dense{grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}
.objects-panel .counting img{width:clamp(42px,6vw,64px);height:clamp(42px,6vw,64px);object-fit:contain;border-radius:14px;background:var(--image-cream);box-shadow:0 4px 10px rgba(39,54,75,.1);justify-self:center}
.objects-panel .counting.dense img{width:min(100%,48px);height:auto;aspect-ratio:1}
.objects-panel .counting.very-dense img{width:min(100%,38px);height:auto;aspect-ratio:1}
@media(max-width:650px){.visual-button.picture.media-card{width:min(92vw,440px)}.alphabet-picture,.alphabet-picture.has-image{width:100%;height:auto}.objects-panel .counting img{width:40px;height:40px}.objects-panel .counting.dense{grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}.objects-panel .counting.very-dense{grid-template-columns:repeat(10,minmax(0,1fr));gap:2px}.objects-panel .counting.dense img{width:min(100%,36px)}.objects-panel .counting.very-dense img{width:min(100%,28px)}}




.bilingual-name{direction:ltr;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:clamp(8px,1.5vw,16px);font-size:clamp(24px,3.7vw,44px)!important}
.bilingual-name .bn-name{font-family:'Noto Sans Bengali',sans-serif;direction:ltr}
.bilingual-name .en-name{font-family:'Baloo 2',sans-serif;direction:ltr}
.bilingual-name i{font-style:normal;color:#9ba7b8;font-weight:500}
.arabic-pronunciation{direction:ltr;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px}.arabic-pronunciation button{border:0;background:transparent;padding:3px 5px;font-weight:700;font-size:clamp(22px,3.2vw,38px);cursor:pointer}.arabic-pronunciation button:first-child{font-family:'Noto Sans Bengali',sans-serif}.arabic-pronunciation i{font-style:normal;color:#9ba7b8}.arabic-placeholder{background:rgba(255,255,255,.42);border:4px dashed rgba(108,99,217,.18)}.arabic-placeholder>span{color:rgba(108,99,217,.2);font-size:clamp(70px,13vw,130px)}
.example-panel.has-artwork.arabic-example-panel{padding:clamp(7px,1.2vw,13px);gap:5px;background:var(--image-cream);overflow:hidden}.example-panel.has-artwork.arabic-example-panel .alphabet-picture{flex:1;width:100%;height:auto;min-height:0;aspect-ratio:auto;border-radius:22px}.arabic-example-details{direction:ltr;width:100%;display:flex;flex-direction:column;align-items:center;gap:1px}.arabic-example-details button{border:0;background:transparent;cursor:pointer;font-weight:700;padding:0 4px;line-height:1.05}.arabic-example-word{direction:rtl;font-family:Arial,'Noto Sans Arabic',Tahoma,sans-serif;font-size:clamp(28px,4vw,48px)}.arabic-example-sound{font-family:'Noto Sans Bengali',sans-serif;font-size:clamp(15px,2vw,23px);color:#677489}.arabic-example-meaning{display:flex;align-items:center;justify-content:center;gap:6px;max-width:100%}.arabic-example-meaning button{font-size:clamp(15px,2vw,23px)}.arabic-example-meaning button:last-child{font-family:'Noto Sans Bengali',sans-serif}.arabic-example-meaning i{font-style:normal;color:#9ba7b8}@media(max-width:600px){.example-panel.has-artwork.arabic-example-panel{padding:5px}.arabic-example-word{font-size:clamp(25px,8vw,38px)}.arabic-example-sound,.arabic-example-meaning button{font-size:clamp(13px,3.8vw,18px)}}


.learning-card.alphabet{cursor:pointer}


#traceFeedback{position:absolute;right:clamp(110px,15vw,180px);bottom:24px;min-width:70px;text-align:center;font-size:clamp(22px,3vw,32px);font-weight:700;color:#43a77e;pointer-events:none}
@media(max-width:680px){#traceFeedback{right:105px;bottom:20px}}


.trace-options{display:flex;justify-content:center;gap:12px;margin:0 auto 14px;padding:9px;width:max-content;max-width:100%;background:rgba(255,255,255,.9);border-radius:20px;box-shadow:0 6px 18px rgba(39,54,75,.1)}
.trace-options label{display:flex;align-items:center;gap:8px;font-weight:700;color:#536278}
.trace-options select{border:2px solid #d9e5f2;border-radius:13px;background:#f7fbff;padding:8px 30px 8px 10px;font:inherit;font-weight:700;color:var(--ink);cursor:pointer}
.count-quiz-card{width:100%;min-height:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:18px}
.count-objects{width:min(100%,680px);min-height:270px;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:10px;padding:18px;background:#f3f9ff;border:3px solid #d9e9f7;border-radius:30px}
.count-objects img{width:clamp(64px,9vw,100px);height:clamp(64px,9vw,100px);object-fit:contain;border-radius:18px;background:var(--image-cream);box-shadow:0 5px 12px rgba(39,54,75,.1)}
.count-question{font-size:clamp(24px,4vw,40px);font-weight:700}
.count-options{display:flex;justify-content:center;gap:clamp(10px,2vw,20px)}
.count-options button{width:clamp(72px,10vw,110px);height:clamp(64px,9vw,92px);border:4px solid #dfe6ef;border-radius:22px;background:#fff;font:inherit;font-size:clamp(28px,5vw,48px);font-weight:700;cursor:pointer;box-shadow:0 7px 0 rgba(55,61,84,.1)}
.count-options button.correct{border-color:#43bd8d;background:#effff8;animation:pop .35s}.count-options button.wrong{border-color:#ef7a72;animation:shake .32s}.count-options button:disabled{cursor:default;opacity:.65}.count-options button.correct:disabled{opacity:1}
#countFeedback{min-height:32px;font-size:24px;font-weight:700;color:#4b9378}
@media(max-width:680px){.trace-options{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:7px}.trace-options label{display:grid;gap:3px;font-size:12px}.trace-options select{width:100%;padding:7px 24px 7px 7px}.count-quiz-card{padding:8px;gap:11px}.count-objects{min-height:240px;padding:10px;gap:6px}.count-objects img{width:clamp(52px,17vw,76px);height:clamp(52px,17vw,76px)}.count-options button{width:76px;height:64px}}


/* Bilingual side-by-side comparison lessons */
.learning-card.compare{padding:clamp(10px,1.5vw,20px);background:var(--image-cream)}
.learning-card.compare::before{display:none}.compare-card{width:100%;min-height:inherit;display:flex;flex-direction:column;justify-content:center;gap:clamp(8px,1.5vh,16px)}
.compare-title{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}.compare-title button{border:0;border-radius:18px;background:rgba(255,255,255,.78);padding:7px 16px;font:inherit;font-size:clamp(19px,2.7vw,29px);font-weight:700;color:var(--ink);cursor:pointer}
.compare-composite{width:min(100%,670px);margin:auto;position:relative;border-radius:30px;overflow:hidden;background:var(--image-cream)}.compare-image{position:relative}.compare-image>img{display:block;width:100%;aspect-ratio:1;object-fit:contain}.compare-audio-zone{position:absolute;inset-block:0;width:50%;cursor:pointer}.compare-audio-zone.first{left:0}.compare-audio-zone.second{right:0}
.compare-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 10px 10px}.compare-side{position:relative;border:3px solid rgba(82,111,145,.14);border-radius:20px;background:rgba(255,255,255,.86);min-width:0;padding:9px 34px 9px 12px;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;transition:.2s}.compare-side:hover{transform:translateY(-3px);border-color:#86cdb8}.compare-side:active{transform:scale(.97)}
.compare-side strong{font-size:clamp(21px,3vw,34px);line-height:1}.compare-side i{font-style:normal;color:#a5afbd}.compare-side small{font-family:'Noto Sans Bengali',sans-serif;font-size:clamp(18px,2.5vw,28px);font-weight:700;color:#65748a;line-height:1}
@media(max-width:600px){.compare-card{gap:6px}.compare-title{gap:6px}.compare-title button{padding:5px 10px}.compare-composite{border-radius:22px}.compare-pair{gap:6px;padding:0 5px 6px}.compare-side{border-width:2px;border-radius:16px;padding:8px 25px 8px 6px;gap:4px;flex-wrap:wrap}.compare-side strong{font-size:clamp(19px,6vw,27px)}.compare-side small{font-size:clamp(17px,5.5vw,24px)}.sound-hint{font-size:15px;right:7px}}
/* Official Shikhbe brand artwork */
.brand{display:flex;align-items:center;justify-content:flex-start;gap:9px;height:72px;margin:0 auto 0 0}
.brand img{display:block;width:clamp(66px,7vw,78px);height:clamp(66px,7vw,78px);object-fit:contain}
.brand strong{font-family:'Baloo 2',sans-serif;font-size:clamp(22px,2.5vw,30px);font-weight:700;letter-spacing:1.5px;color:#1294e8;line-height:1;transform:rotate(-1deg);text-shadow:2px 2px 0 #ffd35c}
@media(max-width:750px){.topbar{gap:6px}.brand{height:58px;max-width:none;gap:5px}.brand img{width:60px;height:60px}.brand strong{font-size:19px;letter-spacing:.5px}.round-btn{width:42px;height:42px;border-radius:14px;font-size:25px}.parent-btn{width:42px;height:42px}}

/* Paired boy-and-girl emotion lesson cards */
.visual-button.picture.has-image.dual-image{width:min(96vw,1000px);aspect-ratio:2/1;min-height:0;padding:0}
.emotion-pair{display:grid;width:100%;height:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;font-size:0;background:var(--image-cream)}
.emotion-pair img{display:block;width:100%;height:100%;min-width:0;object-fit:contain;border-radius:22px;background:var(--image-cream)}
@media(max-width:650px){.visual-button.picture.has-image.dual-image{width:min(92vw,440px);aspect-ratio:1/2}.emotion-pair{grid-template-columns:1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:4px}.emotion-pair img{border-radius:15px}}
.quiz-option img{background:var(--image-cream)}

/* Alphabet artwork fills its panel; the example word sits below the letter. */
.letter-panel{gap:clamp(8px,2vh,18px)}
.letter-panel .word-button{font-size:clamp(32px,5vw,58px);line-height:1.15}
.example-panel.has-artwork{padding:0;gap:0;overflow:hidden;background:var(--image-cream);border-color:var(--image-cream)}
.example-panel.has-artwork .alphabet-picture,.example-panel.has-artwork .alphabet-picture.has-image{width:100%;height:100%;max-width:none;aspect-ratio:auto;border-radius:27px;background:var(--image-cream)}
@media(max-width:600px){.letter-panel .word-button{font-size:clamp(23px,7vw,36px);padding:4px}.example-panel.has-artwork .alphabet-picture,.example-panel.has-artwork .alphabet-picture.has-image{min-height:100%;border-radius:19px}}

/* Number lessons: large count images for 1–10, then two-number cards for 11–50. */
.objects-panel{padding:clamp(10px,1.5vw,20px);background:var(--image-cream);border-color:var(--image-cream)}
.objects-panel .counting{display:grid;place-items:center;width:100%;max-width:100%;gap:clamp(8px,1.4vw,18px)}
.objects-panel .counting img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:18px;background:transparent;box-shadow:none;-webkit-mask-image:radial-gradient(ellipse at center,#000 78%,transparent 100%);mask-image:radial-gradient(ellipse at center,#000 78%,transparent 100%)}
.objects-panel .counting.count-one{grid-template-columns:minmax(0,360px)}
.objects-panel .counting.count-two{grid-template-columns:repeat(2,minmax(0,230px))}
.objects-panel .counting.count-four{grid-template-columns:repeat(2,minmax(0,180px))}
.objects-panel .counting.count-six{grid-template-columns:repeat(3,minmax(0,145px))}
.objects-panel .counting.count-7,.objects-panel .counting.count-9{grid-template-columns:repeat(3,minmax(0,145px))}
.objects-panel .counting.count-7 img:last-child{grid-column:2}
.objects-panel .counting.count-8,.objects-panel .counting.count-10{grid-template-columns:repeat(2,minmax(0,108px));gap:8px 18px}
.number-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;min-height:inherit;gap:clamp(14px,2.5vw,32px)}
.number-pair .paired-number-panel{min-width:0}
.number-pair .paired-number-panel:nth-child(2){background:#eff8ff;border-color:#d7eafa}
.number-pair .hero-symbol{font-size:clamp(130px,23vw,250px);min-width:0;width:100%}
.number-pair .number-word{font-size:clamp(28px,4.2vw,52px);line-height:1.1;text-align:center}
@media(max-width:650px){.objects-panel{padding:10px}.objects-panel .counting{gap:6px}.objects-panel .counting.count-one{grid-template-columns:minmax(0,230px)}.objects-panel .counting.count-two{grid-template-columns:repeat(2,minmax(0,150px))}.objects-panel .counting.count-four{grid-template-columns:repeat(2,minmax(0,115px))}.objects-panel .counting.count-six{grid-template-columns:repeat(3,minmax(0,90px))}.objects-panel .counting.count-7,.objects-panel .counting.count-9{grid-template-columns:repeat(3,minmax(0,82px))}.objects-panel .counting.count-8,.objects-panel .counting.count-10{grid-template-columns:repeat(2,minmax(0,72px));gap:5px 12px}.number-split:has(.count-8,.count-10){grid-template-rows:minmax(220px,.65fr) minmax(390px,1.35fr);min-height:620px}.number-pair{grid-template-columns:1fr;grid-template-rows:repeat(2,minmax(240px,auto));min-height:0;gap:9px}.number-pair .number-panel{flex-direction:column;gap:8px;padding:8px}.number-pair .hero-symbol{font-size:clamp(92px,27vw,150px)}.number-pair .number-word{max-width:100%;padding:2px;font-size:clamp(20px,5.5vw,32px);overflow-wrap:anywhere}}
@media(max-width:650px){.number-split,.number-split>.number-panel,.number-split>.objects-panel{min-width:0}.number-split>.number-panel{gap:10px;padding:10px}.number-split>.number-panel .hero-symbol{flex:0 1 auto;width:auto;min-width:0;font-size:clamp(76px,26vw,112px)}.number-split>.number-panel .number-word{min-width:0;max-width:45%;padding:2px 5px;font-size:clamp(24px,7.5vw,36px);overflow-wrap:anywhere}}
@media(max-width:650px){main,.lesson-view,.lesson-heading,.learning-card,.number-split,.lesson-nav{width:100%;max-width:100%;min-width:0}}
.picture-name-row{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.4vw,15px);max-width:100%;padding:7px 14px;line-height:1.05;white-space:nowrap}
.picture-name-row button{border:0;background:transparent;padding:2px 4px;font-weight:700;font-size:clamp(27px,4.5vw,48px);cursor:pointer;line-height:1.05}
.picture-name-row button:last-child{font-family:'Noto Sans Bengali',sans-serif;color:#526177}.picture-name-row i{font-style:normal;color:#a5afbd;font-size:clamp(22px,3.5vw,38px)}
@media(max-width:420px){.picture-name-row{gap:5px;padding-inline:5px}.picture-name-row button{font-size:clamp(22px,7vw,30px)}}
.top-nav-btn{width:auto;min-width:54px;height:50px;border-radius:18px;padding:0 15px 0 11px;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:16px;color:#fff;box-shadow:0 6px 0 rgba(55,61,84,.13),0 10px 22px rgba(55,61,84,.14);transition:transform .18s,box-shadow .18s,filter .18s}
.top-nav-btn.back-nav{background:linear-gradient(145deg,#73c5f5,#4e9fe0)}.top-nav-btn:hover{filter:brightness(1.04);transform:translateY(-2px)}.top-nav-btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(55,61,84,.13)}
.top-nav-icon{width:25px;height:25px;display:grid;place-items:center;flex:0 0 auto}.top-nav-icon svg{width:100%;height:100%;display:block;fill:currentColor}.top-nav-label{font-family:'Noto Sans Bengali',sans-serif;font-size:14px;font-weight:700;white-space:nowrap}
@media(max-width:750px){.top-nav-btn{width:42px;min-width:42px;height:42px;border-radius:14px;padding:0}.top-nav-icon{width:23px;height:23px}.top-nav-label{display:none}}
