:root{
  --cream:#FFF6EC;
  --bg:#FFF3E6;
  --coral:#FF7A59;
  --coral-dark:#E8623F;
  --teal:#3FBFAD;
  --teal-dark:#2E9C8C;
  --orange:#FFA94D;
  --yellow:#FFD166;
  --ink:#2B2140;
  --ink-soft:#5B5170;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:'Nunito',sans-serif;
  background:radial-gradient(circle at 20% 0%, #FFFDF8, var(--bg) 65%);
  color:var(--ink);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;
  user-select:none;
}
h1,h2{font-family:'Comfortaa',cursive;}
button{font-family:inherit;}

.screen{display:none;min-height:100vh;padding:24px;flex-direction:column;align-items:center;justify-content:center;position:relative;}
.screen.active{display:flex;}

.mascot-stage{width:min(62vw,240px);margin:0 auto;}
.mascot-stage svg,#mascot{width:100%;height:auto;display:block;overflow:visible;}

.app-title{font-size:2.1rem;margin:6px 0 2px;color:var(--coral-dark);letter-spacing:.5px;}
.home-info{color:var(--ink-soft);font-size:1rem;min-height:1.4em;margin-bottom:6px;}

.home-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;}

.btn-primary{
  font-family:'Comfortaa',cursive;
  font-size:1.35rem;font-weight:700;
  background:linear-gradient(135deg,var(--coral),var(--coral-dark));
  color:#fff;border:none;border-radius:32px;
  padding:20px 44px;
  box-shadow:0 10px 24px rgba(232,98,63,.35);
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease;
  margin-top:16px;
}
.btn-primary:active{transform:scale(.96);box-shadow:0 6px 14px rgba(232,98,63,.3);}

.hold-wrap{position:absolute;bottom:22px;left:0;right:0;display:flex;justify-content:center;}
.link-parent{position:relative;background:none;border:none;color:var(--ink-soft);font-size:.95rem;padding:10px 20px;cursor:pointer;border-radius:20px;overflow:hidden;}
.link-parent small{opacity:.7;}
.hold-ring{position:absolute;inset:0;background:rgba(63,191,173,.18);transform:scaleX(0);transform-origin:left;z-index:-1;}
.hold-ring.holding{transition:transform .9s linear;transform:scaleX(1);}

/* ===== Екран заняття ===== */
.btn-corner{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:50%;border:none;background:rgba(0,0,0,.06);font-size:1.05rem;color:var(--ink-soft);cursor:pointer;}
.end-confirm{position:absolute;top:70px;right:18px;background:#fff;border-radius:18px;padding:16px;box-shadow:0 8px 24px rgba(0,0,0,.12);text-align:center;z-index:5;}
.end-confirm.hidden{display:none;}
.end-confirm-btns{display:flex;gap:10px;margin-top:10px;}
.btn-small{border:none;border-radius:14px;padding:8px 18px;font-weight:700;background:var(--coral);color:#fff;cursor:pointer;}
.btn-small.btn-ghost{background:rgba(0,0,0,.08);color:var(--ink);}

.progress-dots{display:flex;gap:6px;position:absolute;top:20px;left:50%;transform:translateX(-50%);flex-wrap:wrap;max-width:70vw;justify-content:center;}
.dot{width:9px;height:9px;border-radius:50%;background:rgba(0,0,0,.12);}
.dot.filled{background:var(--teal);}

.session-stage{position:relative;margin-top:18px;}
.mic-indicator{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);display:flex;gap:6px;opacity:0;transition:opacity .2s;}
.mic-indicator.active{opacity:1;}
.mic-dot{width:10px;height:10px;border-radius:50%;background:var(--coral);animation:mic-bounce 1s infinite;}
.mic-dot:nth-child(2){animation-delay:.15s;}
.mic-dot:nth-child(3){animation-delay:.3s;}
@keyframes mic-bounce{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-8px);opacity:1}}

.target-word{
  font-family:'Comfortaa',cursive;
  font-size:clamp(2.4rem,12vw,4rem);
  font-weight:700;
  color:var(--coral-dark);
  text-align:center;
  letter-spacing:1px;
  margin-top:14px;
  padding:10px 28px;
  background:#fff;
  border-radius:28px;
  box-shadow:0 8px 20px rgba(43,33,64,.1);
  animation:pop-in .3s ease;
  max-width:88vw;
  word-break:break-word;
}
@keyframes pop-in{0%{transform:scale(.85);opacity:0}100%{transform:scale(1);opacity:1}}

.caption{font-size:1.2rem;text-align:center;max-width:640px;margin-top:14px;min-height:2.4em;font-weight:600;line-height:1.35;color:var(--ink-soft);}

.btn-test-sound{background:none;border:none;color:var(--ink-soft);font-size:.9rem;margin-top:10px;cursor:pointer;text-decoration:underline;}

.sound-test-result{margin-top:12px;max-width:320px;text-align:center;}
.sound-test-result.hidden{display:none;}
#sound-test-status{font-weight:700;color:var(--ink);font-size:.95rem;}
.sound-test-btns{display:flex;gap:10px;justify-content:center;margin-top:8px;}
.sound-test-btns.hidden{display:none;}
.sound-test-help{font-size:.85rem;color:var(--ink-soft);line-height:1.5;text-align:left;background:#fff;border-radius:14px;padding:12px 16px;margin-top:10px;}
.sound-test-help.hidden{display:none;}

.btn-repeat{position:absolute;bottom:26px;right:26px;width:56px;height:56px;border-radius:50%;border:none;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.12);font-size:1.3rem;cursor:pointer;}

/* ===== Підсумок ===== */
.summary-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:520px;}
.summary-text{font-size:1.4rem;margin:8px 0 4px;}
.summary-details{color:var(--ink-soft);font-size:1.02rem;line-height:1.6;}
.rate-buttons{margin:12px 0;}
.rate-question{color:var(--ink-soft);font-size:.9rem;margin-bottom:8px;}
.btn-rate{font-size:1.7rem;background:#fff;border:none;border-radius:50%;width:58px;height:58px;margin:0 8px;box-shadow:0 4px 12px rgba(0,0,0,.1);cursor:pointer;}
.thanks{color:var(--teal-dark);font-weight:700;}

/* ===== Батьківський екран ===== */
.parent-screen{align-items:stretch;justify-content:flex-start;padding-bottom:60px;}
.parent-header{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.btn-back{background:none;border:none;font-size:1rem;color:var(--ink-soft);cursor:pointer;}
.parent-content{display:flex;flex-direction:column;gap:14px;max-width:640px;margin:0 auto;width:100%;}
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.card{background:#fff;border-radius:20px;padding:16px;box-shadow:0 4px 16px rgba(43,33,64,.06);}
.card.wide{grid-column:1/-1;}
.card-num{display:block;font-family:'Comfortaa';font-size:1.7rem;color:var(--coral-dark);}
.card-label{font-size:.82rem;color:var(--ink-soft);}
.card-title{font-weight:800;margin:0 0 8px;}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{padding:6px 14px;border-radius:16px;font-size:.88rem;font-weight:700;}
.chip-good{background:rgba(63,191,173,.15);color:var(--teal-dark);}
.chip-soft{background:rgba(255,169,77,.18);color:#B4650A;}
.tag{font-size:.88rem;border-radius:12px;padding:6px 10px;display:inline-block;}
.tag-good{background:rgba(63,191,173,.15);color:var(--teal-dark);}
.tag-soft{background:rgba(255,122,89,.15);color:var(--coral-dark);}
.history{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow-y:auto;}
.history-row{display:flex;justify-content:space-between;font-size:.9rem;padding:6px 0;border-bottom:1px solid rgba(0,0,0,.06);}
.empty-state{color:var(--ink-soft);font-size:.88rem;}
.sparkline{width:100%;height:auto;}
.spark-fill{fill:rgba(63,191,173,.18);stroke:none;}
.spark-line{fill:none;stroke:var(--teal-dark);stroke-width:2.4;}
.spark-dot{fill:var(--coral-dark);}
select#voice-select{width:100%;padding:10px;border-radius:12px;border:1px solid rgba(0,0,0,.12);}
.btn-text-danger{background:none;border:none;color:#C0503A;font-size:.88rem;text-decoration:underline;cursor:pointer;margin:8px auto 30px;}

.banner{background:#FFE3B0;color:#7A4B00;text-align:center;padding:10px 16px;font-size:.88rem;position:sticky;top:0;z-index:20;}
.banner.hidden{display:none;}
.hidden{display:none !important;}

@media (min-width:700px){ .caption{font-size:1.65rem;} }

/* ===== Маскот "Ро" ===== */
.shadow{fill:rgba(43,33,64,.1);}
.body{fill:var(--teal);}
.belly{fill:var(--cream);}
.head{fill:var(--teal);}
.wing{fill:var(--teal-dark);}
.crest{fill:var(--coral);}
.beak{fill:var(--orange);}
.eye-white{fill:#fff;}
.pupil{fill:var(--ink);}
.star{fill:var(--yellow);font-size:30px;opacity:0;transform-origin:center;}

@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes blink{0%,90%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
#mascot.idle{animation:bob 3.2s ease-in-out infinite;}
#mascot.idle .eye-l,#mascot.idle .eye-r{animation:blink 5s infinite;transform-origin:center;}

@keyframes talk-top{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes talk-bottom{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
#mascot.talking{animation:bob 3.2s ease-in-out infinite;}
#mascot.talking #beak-top{animation:talk-top .28s ease-in-out infinite;transform-origin:120px 100px;}
#mascot.talking #beak-bottom{animation:talk-bottom .28s ease-in-out infinite;transform-origin:120px 108px;}

@keyframes tilt{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-6deg)}}
#mascot.listening #head-group{animation:tilt 1.5s ease-in-out infinite;transform-origin:120px 112px;}

@keyframes bounce-happy{0%,100%{transform:translateY(0) scale(1)}30%{transform:translateY(-14px) scale(1.05)}55%{transform:translateY(0) scale(.98)}75%{transform:translateY(-6px) scale(1.02)}}
@keyframes flap{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-25deg)}}
@keyframes twinkle{0%{opacity:0;transform:scale(0)}30%{opacity:1;transform:scale(1.2)}65%{opacity:1;transform:scale(.9)}100%{opacity:0;transform:scale(.6) translateY(-30px)}}
#mascot.happy{animation:bounce-happy 1s ease-in-out 2;}
#mascot.happy .wing{animation:flap .3s ease-in-out infinite;transform-origin:58px 130px;}
#mascot.happy .star{animation:twinkle 1.3s ease-in-out forwards;}
#mascot.happy .s1{animation-delay:0s}
#mascot.happy .s2{animation-delay:.15s}
#mascot.happy .s3{animation-delay:.3s}
#mascot.happy .s4{animation-delay:.45s}

@keyframes sway-slow{0%,100%{transform:rotate(0deg)}50%{transform:rotate(4deg)}}
#mascot.thinking #head-group{animation:sway-slow 2.2s ease-in-out infinite;transform-origin:120px 112px;}
#mascot.thinking .eye-white{transform:scaleY(.6);}