/* ============================================================
   FABLE English — “Sticker book on a sunny day”
   Palette: mint-sky background, deep indigo ink, sunflower
   action, grape AI, mint success. Rounded everything, one big
   hero card, glowing mic countdown ring as the signature.
   ============================================================ */
:root{
  --bg1:#E8F7F0; --bg2:#DCEFFB;
  --ink:#2B3A67; --ink-soft:#5A6B99;
  --card:#FFFFFF; --line:#E3E9F5;
  --sun:#FFB627; --sun-deep:#F09A00;
  --mint:#3EC97E; --grape:#7E6BF0; --berry:#FF7B9C;
  --shadow:0 14px 40px rgba(43,58,103,.14);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0; font-family:"Varela Round","Rubik","Segoe UI",system-ui,sans-serif;
  color:var(--ink); background:linear-gradient(160deg,var(--bg1),var(--bg2));
  direction:rtl; overflow-x:hidden;
}
.en{direction:ltr; font-family:"Fredoka","Varela Round",sans-serif}

/* ---------- screens ---------- */
.screen{display:none; min-height:100vh; padding:22px 18px 110px; max-width:860px; margin:0 auto}
.screen.active{display:block; animation:screenIn .35s ease}
#screen-parent{position:relative}   /* anchors the tucked-away parent-setup link */
@keyframes screenIn{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}

.brand{display:flex; align-items:center; gap:10px; justify-content:center; margin:6px 0 4px}
.brand .logo{font-size:34px}
.brand h1{font-size:26px; margin:0; letter-spacing:.3px}
.tagline{text-align:center; color:var(--ink-soft); margin:0 0 22px; font-size:15px}

/* ---------- buttons ---------- */
.btn{
  border:0; cursor:pointer; font-family:inherit; font-size:17px; font-weight:700;
  color:#fff; background:var(--sun); border-radius:18px; padding:14px 26px;
  box-shadow:0 6px 0 var(--sun-deep), var(--shadow); transition:transform .12s ease, box-shadow .12s ease;
}
.btn:active{transform:translateY(4px); box-shadow:0 2px 0 var(--sun-deep)}
.btn.big{font-size:24px; padding:20px 44px; border-radius:26px}
.btn.mint{background:var(--mint); box-shadow:0 6px 0 #2CA463, var(--shadow)}
.btn.mint:active{box-shadow:0 2px 0 #2CA463}
.btn.grape{background:var(--grape); box-shadow:0 6px 0 #5F4ED6, var(--shadow)}
.btn.grape:active{box-shadow:0 2px 0 #5F4ED6}
.btn.sky{background:#4FB7E8; color:#fff; box-shadow:0 6px 0 #2E93C4, var(--shadow)}
.btn.sky:active{box-shadow:0 2px 0 #2E93C4}

/* speed toggle (Stage 3 & Echo) — small, out of the way on the side */
#speed-toggle{position:fixed; inset-inline-end:12px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:10px; z-index:500}
#speed-toggle .spd{width:52px; height:52px; border-radius:50%; border:2px solid var(--line);
  background:#fff; font-size:24px; cursor:pointer; box-shadow:var(--shadow); transition:transform .1s}
#speed-toggle .spd:active{transform:scale(.9)}

.echo-pairs{display:flex; flex-direction:column; gap:10px}
.btn.ghost{background:#fff; color:var(--ink); box-shadow:0 4px 0 var(--line), var(--shadow)}
.btn.small{font-size:14px; padding:9px 14px; border-radius:14px; box-shadow:0 4px 0 rgba(0,0,0,.12)}
button:focus-visible{outline:3px solid var(--grape); outline-offset:2px}

/* ---------- parent screen ---------- */
.panel{background:var(--card); border-radius:24px; box-shadow:var(--shadow); padding:22px}
.form-grid{display:grid; grid-template-columns:1fr 110px 130px; gap:12px; margin-bottom:12px}
.form-grid input,.form-grid select, .modal input{
  font:inherit; padding:13px 14px; border-radius:14px; border:2px solid var(--line);
  background:#FBFCFF; color:var(--ink); width:100%;
}
.form-grid input:focus,.form-grid select:focus,.modal input:focus{border-color:var(--grape); outline:none}
.check{display:flex; align-items:center; gap:8px; color:var(--ink-soft); font-size:14px; margin-bottom:14px}
/* ---------- Netflix-style profile picker ---------- */
.profile-grid{
  display:flex; flex-wrap:wrap; gap:18px; justify-content:center; padding:8px 0;
}
.profile-tile{position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; width:96px}
.profile-avatar{
  width:88px; height:88px; border-radius:50%; border:3px solid var(--line);
  background:#FBFCFF; font-size:44px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:transform .12s, border-color .12s;
}
.profile-avatar:hover,.profile-avatar:focus{transform:scale(1.06); border-color:var(--grape); outline:none}
.profile-add{font-size:40px; color:var(--grape); border-style:dashed}
.profile-name{font-weight:700; color:var(--ink); text-align:center; word-break:break-word; max-width:96px}
.profile-edit{
  position:absolute; top:-4px; right:10px; width:30px; height:30px; border-radius:50%;
  border:2px solid var(--line); background:#fff; cursor:pointer; font-size:14px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.profile-edit:hover{border-color:var(--grape)}
/* new-profile avatar picker */
.np-avatars{display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 8px}
.np-avatar{
  width:46px; height:46px; border-radius:50%; border:2px solid var(--line);
  background:#FBFCFF; font-size:24px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.np-avatar.on{border-color:var(--grape); background:#F3ECFF}
.btn.danger{color:#C0392B}

/* ---------- home ---------- */
.hero-hello{text-align:center; font-size:30px; margin:18px 0 4px}
.stage-pill{
  display:inline-block; background:var(--grape); color:#fff; border-radius:999px;
  padding:6px 18px; font-weight:700; margin-bottom:16px;
}
/* small badge next to the stage pill on the Play screen, showing the current
   TARGET language so the child (and parent) always knows what to speak. */
.lang-pill{
  display:inline-block; background:var(--card); color:var(--ink); border:2px solid var(--line);
  border-radius:999px; padding:4px 14px; font-weight:700; font-size:13px;
}
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:14px 0 22px}
.stat{background:var(--card); border-radius:18px; padding:14px 6px; text-align:center; box-shadow:var(--shadow)}
.stat b{display:block; font-size:22px}
.stat span{font-size:12px; color:var(--ink-soft)}
.center{text-align:center}
.tip{background:#FFF6DE; border:2px solid #FFE3A1; color:#7A5A00; border-radius:16px; padding:12px 16px; margin:16px 0; font-size:14px}

/* ---------- game screen: the hero card ---------- */
.game-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.game-top .who{font-weight:700}
.round-dots{display:flex; gap:7px; justify-content:center; margin:8px 0 14px}
.dot{width:12px; height:12px; border-radius:50%; background:#fff; border:2px solid var(--line)}
.dot.done{background:var(--mint); border-color:var(--mint)}
.dot.done.ok{transform:scale(1.25)}

.hero-card{
  background:var(--card); border-radius:32px; box-shadow:var(--shadow);
  padding:26px 20px 30px; text-align:center; position:relative; overflow:hidden;
}
.hero-card:before{
  content:""; position:absolute; inset:-40% -20% auto; height:60%;
  background:radial-gradient(closest-side, rgba(255,182,39,.14), transparent 70%);
  pointer-events:none;
}
#card-visual{font-size:132px; line-height:1.15; filter:drop-shadow(0 10px 18px rgba(43,58,103,.18))}
#card-visual.pulse{animation:pulse .55s ease}
@keyframes pulse{0%{transform:scale(.7)} 60%{transform:scale(1.08)} 100%{transform:scale(1)}}
#card-he{font-size:34px; font-weight:700; margin-top:8px; min-height:44px}
#card-hint{
  margin:12px auto 0; max-width:480px; background:#F2EEFF; border:2px solid #DCD3FF;
  color:#4A3AB8; border-radius:16px; padding:10px 16px; font-size:16px; display:none;
}
.hint-en{direction:ltr; display:inline-block; font-family:"Fredoka",sans-serif; font-size:18px; letter-spacing:1px}
/* conversation / Echo: the primary line is the exact spoken (target) string, big;
   the translation sits small beneath it — never instead of it */
.say-primary{display:block; direction:ltr; font-family:"Fredoka",sans-serif; font-size:28px; font-weight:700; line-height:1.25; letter-spacing:.5px}
.say-sub{display:block; font-size:17px; color:var(--ink-soft); margin-top:8px; opacity:.9}

/* ---------- signature: the mic countdown ring ---------- */
#mic-wrap{
  position:relative; width:132px; height:132px; margin:20px auto 6px;
  cursor:pointer; touch-action:none; -webkit-user-select:none; user-select:none;
  border-radius:50%; box-shadow:0 6px 18px rgba(60,120,90,.18);
  transition:transform .12s ease, box-shadow .12s ease;
}
#mic-wrap:hover{transform:scale(1.05)}
#mic-wrap svg{transform:rotate(-90deg)}
#ring-bg{fill:none; stroke:var(--line); stroke-width:10}
#ring-fg{fill:none; stroke:var(--mint); stroke-width:10; stroke-linecap:round; transition:stroke-dashoffset .9s linear}
#mic-icon{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:46px; transition:transform .2s;
}
#mic-wrap.listening #mic-icon{animation:micBeat 1.1s ease infinite}
#mic-wrap.listening #ring-fg{stroke:var(--sun)}
@keyframes micBeat{0%,100%{transform:scale(1)} 50%{transform:scale(1.14)}}
/* hold-to-talk: while the child holds the button, it grows and pulses */
#mic-wrap.recording{
  animation:micHold .8s ease-in-out infinite;
  box-shadow:0 8px 26px rgba(255,90,120,.45);
}
#mic-wrap.recording #ring-fg{stroke:#FF5A78}
#mic-wrap.recording #mic-icon{animation:none}
@keyframes micHold{0%,100%{transform:scale(1.10)} 50%{transform:scale(1.26)}}
.mic-status{min-height:30px; font-size:19px; margin-top:4px}
.mic-status.listen{color:var(--ink-soft)}
.mic-status.good{color:var(--mint); font-weight:700; font-size:23px}

.game-actions{display:flex; gap:12px; justify-content:center; margin-top:18px}
#typed-area{display:none; gap:8px; justify-content:center; margin-top:14px}
#typed-input{direction:ltr; font:inherit; font-size:18px; padding:12px 14px; border-radius:14px; border:2px solid var(--line); width:min(320px,70vw)}

/* ---------- ElevenLabs out-of-credits notice ---------- */
.quota-note{
  position:fixed; top:10px; left:50%; transform:translateX(-50%);
  z-index:1000; max-width:92vw; direction:rtl;
  background:#FFF3CD; color:#7A5B00; border:2px solid #FFE08A;
  border-radius:14px; padding:10px 16px; padding-inline-start:38px;
  font-size:15px; box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.quota-note button{
  position:absolute; top:6px; inset-inline-start:8px;
  background:none; border:none; font-size:16px; line-height:1; cursor:pointer; color:#7A5B00;
}

/* ---------- server/API unreachable notice (base-language, friendly) ----------
   Same banner treatment as the ElevenLabs quota note, but direction follows
   the page's own dir (set from the base language by Strings.applyStrings)
   instead of being forced to rtl, since the base language may be any of 5. */
.network-note{
  position:fixed; top:10px; left:50%; transform:translateX(-50%);
  z-index:1000; max-width:92vw;
  background:#FDE8E8; color:#8A1F1F; border:2px solid #F5B5B5;
  border-radius:14px; padding:10px 16px; padding-inline-start:38px;
  font-size:15px; box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.network-note button{
  position:absolute; top:6px; inset-inline-start:8px;
  background:none; border:none; font-size:16px; line-height:1; cursor:pointer; color:#8A1F1F;
}

/* ---------- confetti ---------- */
.confetti{position:fixed; top:-4vh; width:11px; height:16px; border-radius:3px; z-index:900; pointer-events:none}

/* ---------- report ---------- */
.report-stars{font-size:26px; margin:8px 0}
.report-note{background:#EFFBF4; border:2px solid #BFEDD5; border-radius:18px; padding:14px 18px; font-size:17px; margin:12px 0}
.report-advanced{background:#FFF1F6; border:2px solid #FFC7DA; color:#B02A5B; border-radius:18px; padding:12px 16px; font-weight:700; margin:10px 0}
#report-words{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px; margin:14px 0}
.report-word{display:flex; gap:8px; align-items:center; background:#FBFCFF; border:2px solid var(--line); border-radius:14px; padding:9px 12px}
.report-word .he{color:var(--ink-soft); margin-inline-start:auto}
.report-word.correct{border-color:#BFEDD5}
.report-plan{color:var(--ink-soft); font-size:14px; margin:8px 0 18px}
#report-loading{text-align:center; padding:60px 0; font-size:20px; color:var(--ink-soft)}
.spin{display:inline-block; animation:spin 1.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- FABLE chat ---------- */
#chat-fab{
  position:fixed; bottom:20px; left:20px; z-index:950; width:64px; height:64px; border-radius:50%;
  border:0; background:var(--grape); color:#fff; font-size:30px; cursor:pointer;
  box-shadow:0 10px 26px rgba(126,107,240,.45);
}
#chat-panel{
  position:fixed; bottom:20px; left:20px; z-index:960; width:min(380px, calc(100vw - 32px));
  height:min(480px, 70vh); background:var(--card); border-radius:24px; box-shadow:var(--shadow);
  display:none; flex-direction:column; overflow:hidden; border:2px solid #E5DFFF;
}
#chat-panel.open{display:flex; animation:screenIn .25s ease}
.chat-head{background:var(--grape); color:#fff; padding:12px 16px; display:flex; justify-content:space-between; align-items:center; font-weight:700}
.chat-head button{background:none; border:0; color:#fff; font-size:20px; cursor:pointer}
#chat-messages{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:8px}
.bubble{max-width:82%; padding:9px 13px; border-radius:16px; font-size:15px; line-height:1.45}
.bubble.ai{background:#F2EEFF; color:#3A2E93; align-self:flex-start}
.bubble.user{background:var(--mint); color:#fff; align-self:flex-end}
.chat-in{display:flex; gap:8px; padding:10px; border-top:2px solid var(--line)}
.chat-in input{flex:1; font:inherit; padding:10px 12px; border-radius:14px; border:2px solid var(--line)}
.chat-in button{border:0; border-radius:14px; background:var(--grape); color:#fff; width:46px; font-size:18px; cursor:pointer}

/* ---------- modal ---------- */
.modal{position:fixed; inset:0; background:rgba(28,32,58,.55); display:none; align-items:center; justify-content:center; z-index:980; padding:16px}
/* wider for the 2-column layout, and never taller than the screen — scroll
   internally instead of running off the top/bottom (the "must zoom out" bug) */
.modal .panel{width:min(560px,100%); max-height:calc(100vh - 32px); overflow-y:auto}
.modal label{display:block; font-size:13px; color:var(--ink-soft); margin:10px 0 4px}
.modal .row{display:flex; gap:10px; justify-content:flex-end; margin-top:16px}
.small-note{font-size:12px; color:var(--ink-soft); margin-top:10px}
/* compact settings: two field-pairs per row so the form fits without zooming */
.settings-grid{display:grid; grid-template-columns:1fr 1fr; gap:2px 14px}
.settings-grid .field{display:flex; flex-direction:column; min-width:0}
.settings-grid .field-wide{grid-column:1 / -1}
.settings-grid .field label{margin:8px 0 4px}
.modal select{font:inherit; padding:13px 14px; border-radius:14px; border:2px solid var(--line); background:#FBFCFF; color:var(--ink); width:100%}
.modal select:focus{border-color:var(--grape); outline:none}
/* tucked-away parent-setup gate, top corner of the picker screen */
.parent-setup-link{position:absolute; top:14px; inset-inline-end:14px; background:none; border:none; color:var(--ink-soft); font-size:13px; cursor:pointer; padding:6px 8px; z-index:2}
.parent-setup-link:hover{color:var(--grape)}

/* ---------- responsive & accessibility ---------- */
@media (max-width:640px){
  .form-grid{grid-template-columns:1fr}
  .settings-grid{grid-template-columns:1fr}   /* stack the pairs on small screens */
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  #card-visual{font-size:104px}
  #card-he{font-size:27px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}

/* ===== v2 additions ===== */
/* color-coded "what I heard" */
#card-heard{margin:10px auto 0;font-size:1.05rem;background:var(--paper);border-radius:14px;
  padding:8px 16px;max-width:520px;direction:rtl}
#card-heard .w-good{color:#1d9e63;font-weight:700}
#card-heard .w-miss{color:#98a0b3}
/* dyslexia-friendly reading mode */
body.dyslexic, body.dyslexic input, body.dyslexic button{
  font-family:"Comic Sans MS","Varela Round",sans-serif !important;
  letter-spacing:.06em; word-spacing:.12em; line-height:1.7}
/* monster builder */
#monster-preview{font-size:4.2rem;margin:6px 0 10px;filter:drop-shadow(0 6px 14px rgba(126,107,240,.35))}
.m-row{display:flex;align-items:center;gap:12px;justify-content:center;margin:10px 0}
.m-label{min-width:120px;text-align:left;font-weight:700;color:var(--ink-soft)}
.m-btns{display:flex;gap:8px;flex-wrap:wrap}
.m-btn{font-size:1.7rem;background:var(--paper);border:3px solid transparent;border-radius:16px;
  padding:8px 12px;cursor:pointer;transition:transform .12s}
.m-btn:hover{transform:scale(1.12)}
.m-btn.on{border-color:var(--grape);background:#efeaff}
.btn.grape{background:var(--grape);color:#fff}
#monster-go:disabled{opacity:.45;cursor:not-allowed}