@font-face{font-family:"Fredoka";src:url(../assets/fonts/fredoka.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Nunito";src:url(../assets/fonts/nunito.woff) format("woff");font-weight:200 1000;font-display:swap}
@font-face{font-family:"Noto Sans Bengali";src:url(../assets/fonts/noto-bengali-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Noto Sans Bengali";src:url(../assets/fonts/noto-bengali-700.woff2) format("woff2");font-weight:600 900;font-display:swap}
@font-face{font-family:"Atma";src:url(../assets/fonts/atma-600.woff2) format("woff2");font-weight:400 900;font-display:swap}
:root{
  --mustard:#F2A93B;--mustard-d:#D98E1E;--terra:#E4572E;--terra-d:#b83d1a;--green:#5BAE3A;--green-d:#3E8424;--blue:#3D8FD6;--blue-d:#2668a8;
  --cream:#FFF7E6;--ink:#3B2414;--red:#D62828;--purple:#7B4FC4;--pink:#ff7aa8;
  --r:26px;--shadow:0 6px 0 rgba(59,36,20,.16),0 14px 28px rgba(30,60,90,.18);
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
  --head:"Fredoka","Nunito",system-ui,sans-serif;--body:"Nunito",system-ui,sans-serif;
}
html[lang=bn]{--head:"Atma","Noto Sans Bengali","Fredoka",sans-serif;--body:"Noto Sans Bengali","Nunito",sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;color:var(--ink);font-family:var(--body);overscroll-behavior:none}
body{background:#8fd6ff}
h1,h2,h3,.tile,.pill,.bubble,.ribbon,.lang button,.page-card span,.chip{font-family:var(--head)}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit}
#app{max-width:1180px;margin:0 auto;min-height:100%;position:relative;z-index:2}
.view{display:none;min-height:100dvh;padding:calc(14px + var(--safe-t)) 16px calc(18px + var(--safe-b))}
.view.active{display:flex;flex-direction:column;animation:pop .32s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.panel{background:rgba(255,255,255,.94);border-radius:var(--r);box-shadow:var(--shadow);border:4px solid #fff}

/* ---------- background scene ---------- */
#scene{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:linear-gradient(180deg,#4fb3f2 0%,#8fd6ff 38%,#d4f1ff 62%,#e9fbff 72%)}
.sun{position:absolute;right:6vw;top:5vh;width:120px;height:120px;animation:sunbob 4s ease-in-out infinite}
.sun:before{content:"";position:absolute;inset:-34px;border-radius:50%;background:repeating-conic-gradient(rgba(255,222,89,.55) 0 10deg,transparent 10deg 24deg);animation:spin 26s linear infinite}
.sun i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 38% 35%,#fff6b0,#ffd93b 55%,#ffb703);box-shadow:0 0 40px 10px rgba(255,214,60,.55)}
.sun i:before,.sun i:after{content:"";position:absolute;top:44px;width:12px;height:16px;border-radius:50%;background:#7a4a10}
.sun i:before{left:38px}.sun i:after{right:38px}
@keyframes sunbob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(14px) scale(1.04,.97)}}
@keyframes spin{to{transform:rotate(360deg)}}
.cloud{position:absolute;left:-220px;height:46px;width:150px;background:#fff;border-radius:50px;opacity:.95;box-shadow:inset 0 -6px 0 rgba(150,200,230,.35)}
.cloud:before,.cloud:after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud:before{width:70px;height:70px;left:22px;top:-34px}.cloud:after{width:54px;height:54px;left:72px;top:-22px}
.k1{top:12vh;animation:drift 46s linear infinite -8s}.k2{top:24vh;transform:scale(.7);animation:drift 64s linear infinite -30s}
.k3{top:6vh;transform:scale(.55);animation:drift 80s linear infinite -55s;opacity:.8}.k4{top:33vh;transform:scale(.9);animation:drift 58s linear infinite -20s}
@keyframes drift{from{left:-220px}to{left:110vw}}
.twinkle{position:absolute;color:#fff;font-size:22px;animation:tw 2.8s ease-in-out infinite;text-shadow:0 0 8px #fff}
.t1{left:12vw;top:9vh}.t2{left:42vw;top:5vh;animation-delay:.9s}.t3{left:68vw;top:18vh;animation-delay:1.6s;font-size:16px}.t4{left:28vw;top:30vh;animation-delay:2.1s;font-size:14px}
@keyframes tw{0%,100%{opacity:.2;transform:scale(.6) rotate(0)}50%{opacity:1;transform:scale(1.1) rotate(30deg)}}
.fly{position:absolute;font-size:28px;animation:flutter 16s ease-in-out infinite}
.f1{left:8vw;top:52vh}.f2{left:84vw;top:46vh;animation-duration:19s;animation-delay:-6s;font-size:24px}.f3{left:50vw;top:60vh;animation-duration:13s;animation-delay:-3s;font-size:20px}
@keyframes flutter{0%,100%{transform:translate(0,0) rotate(-8deg)}25%{transform:translate(60px,-40px) rotate(10deg)}50%{transform:translate(120px,10px) rotate(-6deg)}75%{transform:translate(40px,30px) rotate(8deg)}}
.hills{position:absolute;left:0;right:0;bottom:0;width:100%;height:42vh;min-height:220px}
.h1{fill:#9ad86a}.h2{fill:#76c04a}.h3{fill:#5aa636}
.peek{position:fixed;z-index:1;pointer-events:none;filter:drop-shadow(0 6px 6px rgba(0,0,0,.25));display:none}
@media (min-width:1000px){
  .peek{display:block}
  .peek-l{left:-46px;bottom:8vh;height:190px;transform-origin:0 100%;animation:peekL 7s ease-in-out infinite}
  .peek-r{right:-40px;bottom:16vh;height:250px;transform-origin:100% 100%;animation:peekR 8s ease-in-out infinite 1s}
  .peek-t{display:none!important}
  body[data-view=paint] .peek-l{display:none}
}
@keyframes peekL{0%,100%{transform:translateX(-70%) rotate(18deg)}30%,70%{transform:translateX(0) rotate(14deg)}50%{transform:translateX(0) rotate(8deg)}}
@keyframes peekR{0%,100%{transform:translateX(75%) rotate(-16deg)}30%,70%{transform:translateX(0) rotate(-12deg)}50%{transform:translateX(0) rotate(-6deg)}}
@keyframes peekT{0%,60%,100%{transform:rotate(180deg) translateY(0)}75%,90%{transform:rotate(180deg) translateY(-80px)}}

/* ---------- HOME ---------- */
.topline{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px}
.logo-badge{border-radius:20px;box-shadow:var(--shadow);border:4px solid #fff;width:64px;height:64px;animation:wob 5s ease-in-out infinite}
@keyframes wob{0%,90%,100%{transform:rotate(0)}93%{transform:rotate(-8deg)}96%{transform:rotate(6deg)}}
.logo{margin:0;font-size:44px;line-height:.95;color:#fff;font-weight:700;letter-spacing:.5px;
  text-shadow:0 3px 0 var(--terra),0 6px 0 var(--terra-d),0 10px 16px rgba(0,0,0,.25);font-family:"Fredoka",sans-serif}
.tag{margin:4px 0 0;font-weight:800;color:#fff;background:rgba(31,96,150,.55);display:inline-block;padding:2px 10px;border-radius:999px;font-size:14px}
.lang{display:flex;background:#fff;border-radius:999px;padding:4px;box-shadow:var(--shadow)}
.lang button{padding:8px 14px;border-radius:999px;font-weight:700;font-size:16px;color:#6b4b33;transition:background .2s,transform .15s}
.lang button[lang=bn]{font-family:"Noto Sans Bengali",sans-serif}
.lang button.on{background:linear-gradient(#ffcf4d,#f2a93b);color:#4a2a00;box-shadow:inset 0 -3px 0 var(--mustard-d)}
.lang button:active{transform:scale(.92)}
.home-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:8px;flex:1;align-content:start}
.hero{position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:230px}
.hero-char{height:230px;width:auto;filter:drop-shadow(0 10px 8px rgba(0,0,0,.25));animation:wave 2.8s ease-in-out infinite;transform-origin:50% 100%;position:relative;z-index:2}
@keyframes wave{0%,100%{transform:rotate(0) translateY(0) scale(1)}25%{transform:rotate(-4deg) translateY(-6px) scale(1.01,.99)}50%{transform:rotate(0) translateY(-10px) scale(.98,1.03)}75%{transform:rotate(4deg) translateY(-4px)}}
.bubble{position:absolute;left:0;top:0;z-index:3;background:#fff;border-radius:26px;padding:12px 16px;font-size:20px;font-weight:600;max-width:52%;line-height:1.2;box-shadow:var(--shadow);border:3px solid #ffe08a;animation:float 3.4s ease-in-out infinite}
.bubble:after{content:"";position:absolute;right:22px;bottom:-20px;border:12px solid transparent;border-top:16px solid #fff}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.hero-friends{display:none}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;border-radius:32px;padding:16px 8px 14px;color:#fff;font-size:27px;font-weight:700;
  box-shadow:0 8px 0 var(--sh),0 16px 26px rgba(0,0,0,.18);border:5px solid #fff;min-height:160px;overflow:hidden;transition:transform .18s cubic-bezier(.3,1.8,.5,1)}
.tile:before{content:"";position:absolute;left:10%;top:8px;width:55%;height:18px;border-radius:20px;background:rgba(255,255,255,.35)}
.tile:hover{transform:translateY(-6px) rotate(-1.5deg) scale(1.03)}
.tile:active{transform:translateY(6px) scale(.96,.92);box-shadow:0 2px 0 var(--sh)}
.tile .ico{font-size:58px;line-height:1.05;animation:wiggle 3s ease-in-out infinite;filter:drop-shadow(0 4px 0 rgba(0,0,0,.15))}
.tile .tt{text-shadow:0 3px 0 rgba(0,0,0,.18);line-height:1.1}
.tile small{font-family:var(--body);font-size:14px;font-weight:800;opacity:.95;background:rgba(0,0,0,.14);padding:2px 10px;border-radius:999px;margin-top:4px}
.tile-peek{position:absolute;right:-12px;top:6px;height:78px;transform-origin:100% 50%;animation:peekTile 3.6s ease-in-out infinite;filter:drop-shadow(0 3px 2px rgba(0,0,0,.25))}
@keyframes peekTile{0%,100%{transform:rotate(-14deg) translateX(14px)}50%{transform:rotate(-4deg) translateX(0)}}
.t-color{--sh:#b83d1a;background:linear-gradient(160deg,#ff9f6b,#ff6b3d 55%,#e4572e)}
.t-story{--sh:#2668a8;background:linear-gradient(160deg,#7fd0ff,#3d8fd6 60%,#2f78c0)}.t-story .ico{animation-delay:1.5s}
.t-parent{--sh:#3E8424;grid-column:1/3;min-height:auto;flex-direction:row;gap:12px;padding:10px 16px;font-size:22px;background:linear-gradient(160deg,#9be070,#5bae3a)}
.t-parent .ico{font-size:34px}
@keyframes wiggle{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-12deg) scale(1.1)}90%{transform:rotate(12deg) scale(1.1)}95%{transform:rotate(-6deg)}}
.shelf{margin-top:14px;padding:10px 14px 12px}
.shelf h2{margin:0 0 6px;font-size:20px;display:flex;align-items:center;gap:8px}
.shelf h2 b{font-size:14px;background:#ffe08a;border-radius:999px;padding:2px 10px}
.stickers{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}
.stk{position:relative;aspect-ratio:1;min-width:0;border-radius:50%;background:#efe6d6;display:grid;place-items:center;border:3px dashed #d8c7a8}
.stk img{position:absolute;left:8%;top:8%;width:84%;height:84%;object-fit:contain;filter:grayscale(1) brightness(1.6) opacity(.35)}
.stk.rnd img{border-radius:50%;object-fit:cover;left:0;top:0;width:100%;height:100%}
.stk i{position:absolute;right:-4px;bottom:-4px;font-style:normal;font-size:12px;opacity:.4}
.stk.got{background:#fff;border:3px solid #ffd23f;box-shadow:0 3px 0 #e0a800;animation:stkpop .5s cubic-bezier(.3,1.8,.5,1)}
.stk.got img{filter:none}.stk.got i{opacity:1}
@keyframes stkpop{from{transform:scale(.3) rotate(-30deg)}to{transform:none}}
.hint{margin:6px 0 0;font-size:13px;font-weight:700;opacity:.7}
.home-foot{position:relative;margin-top:14px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
@media (max-width:420px){.stickers{grid-template-columns:repeat(5,1fr)}.t-parent{font-size:20px;white-space:nowrap;min-height:auto}.t-parent small{display:none}.logo{font-size:38px}.tile{font-size:24px;min-height:150px}}
.tile.t-parent{min-height:auto}
@media (min-width:600px) and (max-width:899px){.hero{min-height:380px}.hero-char{height:380px}.tile{min-height:230px;font-size:34px}.tile .ico{font-size:72px}.tile small{font-size:16px}.tile.t-parent{min-height:96px;font-size:28px}.bubble{font-size:24px}}
@media (min-width:900px){
  .view{padding-left:28px;padding-right:28px}
  .home-grid{grid-template-columns:1.05fr 1fr;gap:34px;align-items:center;align-content:center}
  .hero{min-height:520px}
  .hero-char{height:440px}
  .bubble{font-size:28px;max-width:58%;padding:18px 24px;left:2%;top:4%}
  .hero-friends{display:flex;position:absolute;bottom:-6px;left:0;right:0;justify-content:space-between;pointer-events:none}
  .hero-friends img{height:150px;filter:drop-shadow(0 6px 5px rgba(0,0,0,.25));animation:bob 2.6s ease-in-out infinite}
  .hero-friends img:nth-child(2){display:none}
  .hero-friends img:nth-child(3){animation-delay:1.2s}
  .tiles{gap:20px}
  .tile{min-height:210px;font-size:36px}.tile .ico{font-size:78px}.tile small{font-size:16px}
  .tile-peek{height:110px;top:10px}
  .t-parent{min-height:auto;font-size:26px}
  .logo{font-size:56px}.logo-badge{width:76px;height:76px}
  .lang button{font-size:18px;padding:10px 18px}
}
@keyframes bob{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-8px) scale(.98,1.03)}}

/* ---------- common ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:12px 20px;border-radius:999px;background:linear-gradient(#ff7b4f,var(--terra));color:#fff;font-weight:700;font-size:18px;text-decoration:none;
  box-shadow:0 5px 0 var(--terra-d),0 8px 14px rgba(0,0,0,.15);border:3px solid #fff;transition:transform .15s cubic-bezier(.3,1.8,.5,1)}
.pill:hover{transform:translateY(-2px) scale(1.03)}
.pill:active{transform:translateY(4px);box-shadow:0 1px 0 var(--terra-d)}
.pill.soft{background:#fff;color:var(--ink);box-shadow:0 5px 0 #d9c9b0}
.pill.yt{background:linear-gradient(#ff4b40,#d91c12);box-shadow:0 5px 0 #9e130b}
.pill.danger{background:linear-gradient(#ff6161,#d62828);box-shadow:0 5px 0 #9b1414}
.bar{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.ribbon{margin:0;font-size:26px;line-height:1.1;color:#fff;background:linear-gradient(#ff8a5b,#e4572e);padding:8px 22px;border-radius:18px;border:4px solid #fff;box-shadow:0 5px 0 var(--terra-d),0 10px 18px rgba(0,0,0,.15);text-shadow:0 2px 0 rgba(0,0,0,.2)}
.ribbon.blue{background:linear-gradient(#6cc4ff,#3d8fd6);box-shadow:0 5px 0 var(--blue-d),0 10px 18px rgba(0,0,0,.15)}
.ribbon.green{background:linear-gradient(#8fd862,#5bae3a);box-shadow:0 5px 0 var(--green-d),0 10px 18px rgba(0,0,0,.15)}
.small-rib{font-size:20px;padding:6px 14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.round{width:52px;height:52px;flex:none;display:grid;place-items:center;border-radius:50%;background:#fff;box-shadow:0 5px 0 rgba(59,36,20,.18);font-size:24px;font-weight:900;text-decoration:none;border:3px solid #fff;transition:transform .15s cubic-bezier(.3,1.8,.5,1)}
.round:hover{transform:scale(1.08)}
.round:active{transform:translateY(4px);box-shadow:none}
.round:disabled{opacity:.4}
.round.big{width:60px;height:60px}
.back{background:linear-gradient(#fff,#ffeccc)}
.confetti{position:fixed;z-index:60;pointer-events:none;transform:translate(-50%,-50%);animation:conf .95s cubic-bezier(.2,.7,.4,1) forwards;font-weight:900;text-shadow:0 1px 0 rgba(0,0,0,.15)}
@keyframes conf{0%{opacity:1;transform:translate(-50%,-50%) scale(.4)}70%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy) + 60px)) rotate(var(--r)) scale(1)}}

/* ---------- picker ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.page-card{position:relative;background:#fff;border-radius:var(--r);padding:8px 8px 4px;box-shadow:var(--shadow);text-align:center;text-decoration:none;border:5px solid var(--fc);transition:transform .18s cubic-bezier(.3,1.8,.5,1)}
.page-card.c0{--fc:#ff8a5b}.page-card.c1{--fc:#6cc4ff}.page-card.c2{--fc:#8fd862}.page-card.c3{--fc:#c79bff}
.page-card:nth-child(odd){transform:rotate(-1.2deg)}.page-card:nth-child(even){transform:rotate(1.2deg)}
.page-card:hover{transform:translateY(-5px) rotate(0) scale(1.04)}
.page-card:active{transform:scale(.95)}
.page-card img{width:100%;aspect-ratio:3/4;object-fit:contain;border-radius:16px;background:#fff;display:block}
.page-card span{display:block;padding:6px 0 4px;font-size:19px;font-weight:600}
.badge{position:absolute;top:-12px;right:-10px;font-size:28px;filter:drop-shadow(0 3px 2px rgba(0,0,0,.25));font-style:normal}
.page-card.done{background:#fff9db}
@media (min-width:900px){.grid{grid-template-columns:repeat(4,1fr);gap:24px}.page-card span{font-size:22px}}

/* ---------- editor ---------- */
#v-paint{padding-bottom:calc(8px + var(--safe-b));height:100dvh;min-height:0}
#v-paint .bar{margin-bottom:10px}
.chip{font-size:13px;font-weight:600;padding:4px 10px;border-radius:999px;background:#fff;box-shadow:0 3px 0 rgba(0,0,0,.12);white-space:nowrap}
.chip.ok{color:#2f6d12;background:#e6f8d8}.chip.busy{color:#8a5a00;background:#fff4cc}
.done-btn{margin-left:auto;padding:8px 14px;font-size:17px;background:linear-gradient(#ffd84d,#f2a93b);color:#4a2a00;box-shadow:0 5px 0 var(--mustard-d);white-space:nowrap}
.paint-layout{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px}
.stage-wrap{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
#stage{position:relative;aspect-ratio:3/4;height:100%;max-width:100%;background:#fff;border-radius:22px;overflow:hidden;touch-action:none;
  border:8px solid #fff;box-shadow:0 0 0 5px #ff8a5b,0 0 0 10px #ffd84d,0 14px 30px rgba(0,0,0,.25)}
@supports not (aspect-ratio:3/4){#stage{width:100%;padding-top:133%}}
#paint,#lines{position:absolute;inset:0;width:100%;height:100%}
#paint{touch-action:none}
#lines{pointer-events:none;user-select:none;-webkit-user-select:none}
.mascot{display:none}
.toolbox{padding:8px 10px}
.toolrow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tools{display:flex;gap:6px;background:#fff6e4;border-radius:999px;padding:4px}
.tool{width:52px;height:46px;border-radius:999px;font-size:24px;transition:transform .15s cubic-bezier(.3,1.8,.5,1)}
.tool.on{background:linear-gradient(#ffd84d,#f2a93b);box-shadow:inset 0 -3px 0 var(--mustard-d);transform:scale(1.08)}
.acts{display:flex;gap:6px}.acts .round{width:46px;height:46px;font-size:20px}
.round.save{background:linear-gradient(#8fd862,#5bae3a);color:#fff}
.round.warn{background:#fff0ee}
.sizes{display:flex;gap:10px;justify-content:center;margin-top:8px}
.sizes button{width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 3px 0 rgba(0,0,0,.12)}
.sizes button i{display:block;border-radius:50%;background:var(--ink)}
.sizes .d1{width:8px;height:8px}.sizes .d2{width:16px;height:16px}.sizes .d3{width:26px;height:26px}
.sizes button.on{outline:3px solid var(--mustard)}
.palette{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:8px}
.swatch{aspect-ratio:1;border-radius:50%;border:3px solid #fff;min-height:34px;transition:transform .15s cubic-bezier(.3,1.8,.5,1);box-shadow:0 3px 0 rgba(0,0,0,.2),inset 0 -5px 0 rgba(0,0,0,.15),inset 0 4px 0 rgba(255,255,255,.35)}
.swatch:hover{transform:scale(1.1)}
.swatch.on{transform:scale(1.18);box-shadow:0 0 0 3px var(--ink),inset 0 -5px 0 rgba(0,0,0,.15)}
@media (min-width:700px) and (max-width:899px){.palette{grid-template-columns:repeat(12,1fr)}}
@media (min-width:900px){
  .paint-layout{flex-direction:row;align-items:stretch;gap:24px}
  .stage-wrap{flex:1}
  .toolbox{width:300px;flex:none;align-self:center;padding:14px}
  .toolrow{flex-direction:column;gap:12px}
  .tools .tool{width:64px;height:56px;font-size:30px}
  .acts .round{width:56px;height:56px;font-size:24px}
  .palette{grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
  .mascot{display:block;position:absolute;left:0;bottom:0;height:200px;filter:drop-shadow(0 6px 6px rgba(0,0,0,.25));animation:bob 2.4s ease-in-out infinite;pointer-events:none}
}
@media (orientation:landscape) and (max-height:600px){
  #v-paint .paint-layout{flex-direction:row}
  #v-paint .toolbox{width:260px;flex:none;overflow:auto}
  #v-paint .toolrow{flex-wrap:wrap}
  #v-paint .palette{grid-template-columns:repeat(4,1fr)}
}

/* ---------- stories ---------- */
.cards{display:grid;gap:18px}
.story-card{display:flex;flex-direction:column;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);text-decoration:none;border:5px solid #fff;transition:transform .18s cubic-bezier(.3,1.8,.5,1)}
.story-card:hover{transform:translateY(-5px) rotate(-.8deg) scale(1.02)}
.story-card:active{transform:scale(.97)}
.sc-img{position:relative}
.sc-img img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.sc-img .emo{position:absolute;left:10px;bottom:-22px;width:52px;height:52px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:28px;box-shadow:0 4px 0 rgba(0,0,0,.15)}
.sc-img .badge{top:6px;right:8px}
.sc-txt{padding:24px 16px 14px}
.story-card h3{margin:0;font-size:23px;line-height:1.15}
.story-card p{margin:4px 0 0;font-weight:700;color:#4a4036}
.sc-tag{display:inline-block;margin:0 0 6px;padding:3px 12px;border-radius:999px;color:#fff;font-weight:800;font-size:14px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.15)}
@media (min-width:640px){.cards{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.cards{grid-template-columns:1fr 1fr 1fr;gap:26px}}
.reader{display:flex;flex-direction:column;gap:12px;flex:1}
.pic{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;background:#ddd;border:6px solid #fff;box-shadow:0 0 0 5px #6cc4ff,0 14px 30px rgba(0,0,0,.25)}
.pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s, transform 6s ease-out}
.pic img.fade{opacity:0}.pic img.zoom{transform:scale(1.06)}
.read-side{display:flex;flex-direction:column;gap:12px;flex:1}
.dots{display:flex;justify-content:center;gap:4px;background:rgba(255,255,255,.85);border-radius:999px;padding:4px 10px;align-self:center;box-shadow:0 4px 0 rgba(0,0,0,.1)}
.dots i{font-style:normal;font-size:20px;color:#e4d8c4;transition:.25s;line-height:1}
.dots i.past{color:#ffc93c}
.dots i.on{color:#ff8a00;transform:scale(1.35);text-shadow:0 0 8px #ffd84d}
.speech{background:#fff;border-radius:var(--r);padding:12px 18px 16px;box-shadow:var(--shadow);min-height:140px;border:4px solid #ffe08a;position:relative}
.who{display:flex;align-items:center;gap:8px;font-family:var(--head);font-weight:700;font-size:19px;color:var(--terra)}
.who img{width:50px;height:50px;object-fit:contain;background:#fff3dc;border-radius:50%;padding:2px;border:3px solid #ffe08a}
.who img[src=""]{display:none}
#st-text{margin:6px 0 0;font-size:24px;line-height:1.4;font-weight:800}
html[lang=bn] #st-text{font-weight:700;line-height:1.6}
#st-text span{transition:color .1s,background .1s;border-radius:6px;padding:0 1px}
#st-text span.hl{background:#ffe27a}
#st-text span.said{color:#9a7b62}
.ctrl{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:auto;padding-top:6px}
.play{width:84px;height:84px;border-radius:50%;background:linear-gradient(#8fd862,#5bae3a);color:#fff;font-size:34px;box-shadow:0 7px 0 var(--green-d),0 12px 20px rgba(0,0,0,.2);display:grid;place-items:center;border:5px solid #fff;transition:transform .15s cubic-bezier(.3,1.8,.5,1);animation:pulse 2s ease-in-out infinite}
.play:active{transform:translateY(5px);box-shadow:none}
.play.playing{background:linear-gradient(#ffd84d,#f2a93b);box-shadow:0 7px 0 var(--mustard-d);animation:none}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@media (min-width:900px){
  .reader{display:grid;grid-template-columns:1.35fr 1fr;gap:26px;align-items:center}
  .speech{min-height:220px}#st-text{font-size:28px}
}
.moral{margin:auto;padding:28px;text-align:center;max-width:560px;animation:pop .4s}
.moral .star{font-size:72px;animation:bob 1.6s infinite}
.moral h3{margin:6px 0;font-size:28px;color:var(--terra)}
.moral p{font-size:23px;font-weight:800;margin:0 0 18px}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ---------- docs ---------- */
.doc article{line-height:1.6;font-size:17px;padding:16px 20px;max-width:860px}
.doc h3{margin:18px 0 4px;font-size:21px}
.safe-badge{display:inline-block;background:#e6f4d8;color:#2f5c12;border:2px solid #9ccc65;border-radius:14px;padding:10px 14px;font-weight:900;font-size:18px}
.small{font-size:14px;opacity:.7}
html[lang=en] [data-only=bn],html[lang=bn] [data-only=en]{display:none}

/* ---------- dialogs & toast ---------- */
.gate{position:fixed;inset:0;background:rgba(30,40,70,.55);display:grid;place-items:center;z-index:40;padding:20px;animation:fadein .2s}
@keyframes fadein{from{opacity:0}}
.gate-box{position:relative;background:#fff;border-radius:30px;padding:24px;width:min(380px,100%);text-align:center;border:5px solid #ffe08a;box-shadow:0 10px 0 rgba(0,0,0,.15);animation:pop .35s cubic-bezier(.3,1.6,.5,1);overflow:hidden}
.gate-box h2{margin:0 0 6px;font-size:25px}
.cf-ico{font-size:48px}
#gate-q{font-size:22px;font-weight:800}
#gate-a{width:130px;font-size:30px;text-align:center;padding:8px;border-radius:16px;border:3px solid #ddd;margin-bottom:14px;font-weight:800;font-family:inherit}
.gate-err{color:var(--red);font-weight:800}
.reward-box{border-color:#ffd23f;background:radial-gradient(circle at 50% 35%,#fffbe0,#fff 60%)}
.rays{position:absolute;left:50%;top:110px;width:520px;height:520px;margin:-260px 0 0 -260px;background:repeating-conic-gradient(rgba(255,210,63,.35) 0 12deg,transparent 12deg 30deg);animation:spin 14s linear infinite;z-index:0}
.reward-box>*:not(.rays){position:relative;z-index:1}
.sticker-big{width:170px;height:170px;object-fit:contain;filter:drop-shadow(0 0 0 #fff) drop-shadow(0 6px 6px rgba(0,0,0,.3));animation:stkin .7s cubic-bezier(.3,1.8,.5,1)}
.sticker-big.rnd{border-radius:50%;object-fit:cover;border:7px solid #fff;box-shadow:0 0 0 4px #ffd23f}
@keyframes stkin{from{transform:scale(.2) rotate(-40deg)}to{transform:none}}
#rw-name{font-size:22px;font-weight:800;margin:0 0 14px;color:var(--terra)}
.toast{position:fixed;left:50%;bottom:calc(24px + var(--safe-b));transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 22px;border-radius:999px;font-weight:800;z-index:50;animation:pop .2s;border:3px solid #fff}
.toast[hidden]{display:none}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.cloud{display:none}.cloud.k1,.cloud.k3{display:block;left:10vw}.cloud.k3{left:60vw}}
[hidden]{display:none!important}