/* ============================================================
   ইংলিশ বাডি - কিডস ভয়েস চ্যাট
   পালেট: আকাশী নীল, রোদেলা হলুদ, প্রবাল কমলা, ঘাসফড়িং সবুজ
   ============================================================ */

:root{
  --sky-top:#bfe7ff;
  --sky-bottom:#eaf9ff;
  --ink:#1b2a4a;
  --coral:#ff6b6b;
  --sun:#ffc857;
  --grass:#06d6a0;
  --buddy:#5aa9ff;
  --buddy-girl:#c792ea;
  --buddy-neutral:#5ad1c9;
  --card-bg:#ffffff;
  --shadow: 0 14px 30px rgba(27,42,74,0.14);
  --font-display:'Baloo Da 2','Baloo 2',sans-serif;
  --font-body:'Nunito','Baloo Da 2',sans-serif;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  overflow-x:hidden;
  min-height:100vh;
}

/* ---------- background sky ---------- */
.sky{
  position:fixed; inset:0; z-index:-1;
  background:linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 60%);
}
.cloud{
  position:absolute; background:#fff; border-radius:50%;
  opacity:.85; filter:blur(.5px);
  animation:drift 40s linear infinite;
}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%;}
.c1{width:120px;height:46px;top:8%;left:-10%;}
.c1::before{width:60px;height:60px;top:-28px;left:14px;}
.c1::after{width:70px;height:50px;top:-18px;left:56px;}
.c2{width:90px;height:36px;top:18%;left:60%;animation-duration:55s;animation-delay:-10s;}
.c2::before{width:46px;height:46px;top:-22px;left:10px;}
.c2::after{width:50px;height:38px;top:-14px;left:40px;}
.c3{width:70px;height:28px;top:4%;left:35%;animation-duration:65s;animation-delay:-25s;}
.c3::before{width:36px;height:36px;top:-16px;left:8px;}
@keyframes drift{
  from{transform:translateX(0);}
  to{transform:translateX(140vw);}
}

/* ---------- layout ---------- */
.stage{
  max-width:520px;
  margin:0 auto;
  min-height:100vh;
  padding:22px 20px 40px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.brand{
  align-self:flex-start;
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-display);
  margin-bottom:10px;
}
.brand-badge{font-size:22px;}
.brand-text{font-weight:700; font-size:18px; color:var(--ink);}
.brand-text small{display:block; font-weight:600; font-size:11px; letter-spacing:.06em; color:#5c6b8a;}

.screen{width:100%;}
.screen-center{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  margin-top:6vh;
}
.hidden{display:none !important;}

/* ---------- buddy character (signature element) ---------- */
.buddy-wrap{
  width:220px; height:220px; margin:10px auto 6px;
  position:relative;
}
.buddy-wrap.small{width:150px;height:150px;}
.buddy-svg{width:100%;height:100%;}
.buddy-body{
  fill:var(--buddy);
  transform-origin:120px 120px;
  animation:breathe 3.2s ease-in-out infinite;
}
.eye{
  fill:var(--ink);
  animation:blink 4.5s ease-in-out infinite;
  transform-origin:center;
}
.mouth{
  fill:none; stroke:var(--ink); stroke-width:7; stroke-linecap:round;
}
.buddy-shadow{fill:rgba(27,42,74,.10);}
@keyframes breathe{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.035);}
}
@keyframes blink{
  0%,92%,100%{transform:scaleY(1);}
  95%{transform:scaleY(.15);}
}

/* state: buddy listening (mic held) */
.buddy-wrap.listening .buddy-body{animation:bob .6s ease-in-out infinite;}
@keyframes bob{
  0%,100%{transform:translateY(0) scale(1.03);}
  50%{transform:translateY(-6px) scale(1.06);}
}
.pulse-ring{
  position:absolute; inset:0; border-radius:50%;
  border:3px solid var(--coral); opacity:0;
}
.buddy-wrap.listening .pulse-ring{
  animation:pulseRing 1.1s ease-out infinite;
}
@keyframes pulseRing{
  0%{opacity:.65; transform:scale(.72);}
  100%{opacity:0; transform:scale(1.25);}
}

/* state: buddy talking */
.buddy-wrap.talking .mouth{animation:talk .32s ease-in-out infinite;}
@keyframes talk{
  0%,100%{d:path("M 95 145 Q 120 168 145 145");}
  50%{d:path("M 95 148 Q 120 130 145 148");}
}

/* ---------- headings / text ---------- */
.headline{
  font-family:var(--font-display);
  font-weight:700; font-size:28px; margin:12px 0 6px; color:var(--ink);
}
.subline{
  color:#4c5b7a; font-size:15px; max-width:340px; line-height:1.5; margin:0 0 22px;
}
.parent-note{
  margin-top:26px; font-size:12.5px; color:#6b7897; max-width:320px; line-height:1.6;
}

/* ---------- buttons ---------- */
.btn-primary{
  font-family:var(--font-display);
  background:var(--coral);
  color:#fff; border:none; border-radius:999px;
  padding:16px 34px; font-size:18px; font-weight:700;
  box-shadow:var(--shadow);
  cursor:pointer;
  display:inline-flex; align-items:center; gap:10px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-primary:hover{transform:translateY(-2px);}
.btn-primary:active{transform:translateY(0) scale(.98);}
.btn-primary:disabled{opacity:.45; cursor:not-allowed; transform:none;}
.btn-block{width:100%; justify-content:center; margin-top:22px;}
.mic-ic{font-size:20px;}

.btn-text{
  background:none; border:none; color:#5c6b8a; font-family:var(--font-body);
  font-weight:700; font-size:14px; padding:10px; cursor:pointer;
}
.btn-text.danger{color:var(--coral);}

/* ---------- setup overlay ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(27,42,74,.42);
  display:flex; align-items:center; justify-content:center;
  padding:20px; z-index:20;
  backdrop-filter:blur(2px);
}
.setup-card{
  background:var(--card-bg); border-radius:26px; padding:28px 24px;
  width:100%; max-width:380px; box-shadow:var(--shadow);
  text-align:center;
  animation:pop .25s ease;
}
@keyframes pop{from{transform:scale(.92); opacity:0;} to{transform:scale(1); opacity:1;}}
.setup-card h2{font-family:var(--font-display); font-size:20px; margin:0 0 18px;}
.field-label{display:block; text-align:left; font-weight:700; font-size:13px; color:#4c5b7a; margin-bottom:8px;}

.age-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:8px;
}
.age-btn{
  border:2px solid #e3ecfb; background:#f5f9ff; border-radius:12px;
  padding:10px 0; font-family:var(--font-display); font-weight:700; font-size:16px;
  cursor:pointer; color:var(--ink); transition:.15s;
}
.age-btn.selected{background:var(--sun); border-color:var(--sun); color:var(--ink);}

.gender-grid{display:flex; gap:8px;}
.pill-btn{
  flex:1; border:2px solid #e3ecfb; background:#f5f9ff; border-radius:999px;
  padding:12px 6px; font-weight:700; font-size:13px; cursor:pointer; color:var(--ink);
  transition:.15s;
}
.pill-btn.selected{background:var(--grass); border-color:var(--grass); color:#fff;}

/* ---------- chat screen ---------- */
.screen-chat{display:flex; flex-direction:column; align-items:center; margin-top:2vh;}
.status-pill{
  background:#fff; border-radius:999px; padding:6px 18px; font-weight:700;
  font-size:13px; color:var(--ink); box-shadow:var(--shadow); margin-top:4px;
}
.transcript{
  width:100%; margin-top:18px; display:flex; flex-direction:column; gap:10px;
  max-height:36vh; overflow-y:auto; padding-right:4px;
}
.bubble{
  padding:12px 16px; border-radius:18px; font-size:15px; line-height:1.4;
  max-width:82%; box-shadow:0 4px 10px rgba(27,42,74,.06);
}
.bubble.buddy{background:#fff; align-self:flex-start; border-bottom-left-radius:4px;}
.bubble.child{background:var(--buddy); color:#fff; align-self:flex-end; border-bottom-right-radius:4px;}

.controls{
  display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:22px;
}
.mic-btn{
  width:84px; height:84px; border-radius:50%; border:none;
  background:var(--coral); color:#fff; font-size:32px; box-shadow:var(--shadow);
  cursor:pointer; transition:transform .12s ease;
}
.mic-btn.recording{background:var(--grass); transform:scale(1.08);}
.mic-btn:disabled{opacity:.5;}
.hint{font-size:12.5px; color:#6b7897; margin-top:10px;}

@media (max-width:380px){
  .headline{font-size:24px;}
  .buddy-wrap{width:180px;height:180px;}
}