/* Chirplings — client styles. Warm, soft-glow, kid-friendly. */
:root{
  --bg:#fff8ef; --bg2:#fff1df; --card:#ffffff; --ink:#4a4038; --muted:#9a8c7d;
  --brand:#ff9e2c; --brand-2:#ffce54; --glow:rgba(255,158,44,.35);
  --blue:#2f6bff; --green:#3aa856; --purple:#8e44ad;
  --radius:20px; --shadow:0 10px 30px rgba(120,90,40,.12);
  --tap:52px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:"Nunito","Segoe UI",system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:radial-gradient(1200px 600px at 50% -10%,var(--bg2),var(--bg));
  -webkit-text-size-adjust:100%;
}
#chirp-root{min-height:100%;display:flex;flex-direction:column}
.chirp-loading{align-items:center;justify-content:center;color:var(--muted)}

/* ── Brand header ── */
.chirp-brand{display:flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.5rem;letter-spacing:-.02em}
.chirp-brand .bird{
  width:2.2rem;height:2.2rem;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--brand-2),var(--brand));
  box-shadow:0 0 0 6px var(--glow);display:grid;place-items:center;font-size:1.2rem;
}
.chirp-brand small{color:var(--brand)}

/* ── Layout ── */
.chirp-wrap{width:100%;max-width:960px;margin:0 auto;padding:1.25rem}
.chirp-topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem}

/* ── Cards ── */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem}
.auth-card{max-width:420px;margin:8vh auto 0}

/* ── Forms ── */
label{display:block;font-weight:700;margin:.9rem 0 .35rem;font-size:.95rem}
input,select,button{font:inherit}
input,select{
  width:100%;padding:.85rem 1rem;border:2px solid #f0e6d8;border-radius:14px;
  background:#fffdf9;color:var(--ink);min-height:var(--tap);
}
input:focus,select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--glow)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:var(--tap);padding:.8rem 1.4rem;border:0;border-radius:16px;cursor:pointer;
  font-weight:800;background:linear-gradient(180deg,var(--brand-2),var(--brand));color:#5a3a00;
  box-shadow:0 6px 16px var(--glow);width:100%;
}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;box-shadow:none;color:var(--brand);text-decoration:underline}
.btn.small{width:auto;min-height:40px;padding:.4rem .9rem;font-size:.9rem}
.seg{display:flex;gap:.5rem;margin:.35rem 0}
.seg button{flex:1;min-height:var(--tap);border:2px solid #f0e6d8;border-radius:14px;background:#fffdf9;font-weight:700;cursor:pointer;color:var(--muted)}
.seg button.on{border-color:var(--brand);color:var(--ink);background:#fff6e8}
.err{color:#c0392b;font-weight:700;margin:.6rem 0;min-height:1.2em}
.muted{color:var(--muted)}
h1,h2{letter-spacing:-.02em}
.tagline{color:var(--muted);margin:.25rem 0 1rem}

/* ── Levels grid ── */
.levels{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem;margin-top:1.25rem}
.level{
  border-radius:var(--radius);padding:1.1rem;color:#3b2f22;cursor:pointer;
  box-shadow:var(--shadow);border:3px solid rgba(0,0,0,.04);position:relative;overflow:hidden;
  min-height:110px;display:flex;flex-direction:column;justify-content:space-between;
}
.level .num{font-size:.8rem;font-weight:800;opacity:.7;text-transform:uppercase;letter-spacing:.08em}
.level .name{font-size:1.35rem;font-weight:900}
.level .count{font-weight:700;opacity:.75}

/* ── Word manager ── */
.wordrows{display:flex;flex-direction:column}
.wordrow{display:flex;align-items:center;justify-content:space-between;padding:.65rem .25rem;border-bottom:1px solid #f4ece0}
.wordrow:last-child{border-bottom:0}
.wtext{font-size:1.15rem;font-weight:700}
.wtext .tag{font-size:.7rem;font-weight:800;color:var(--brand);background:#fff2df;padding:.1rem .4rem;border-radius:8px;font-style:normal;margin-left:.4rem;vertical-align:middle}
.wactions{display:flex;gap:.4rem}
.chip{border:0;background:#fbf3e6;border-radius:12px;min-width:40px;min-height:40px;cursor:pointer;font-size:1rem}
.chip:active{transform:translateY(1px)}

/* ── Modal ── */
.modal-overlay{position:fixed;inset:0;background:rgba(60,45,25,.45);display:flex;align-items:center;justify-content:center;padding:1rem;z-index:50}
.modal{max-width:440px;width:100%;position:relative;max-height:90vh;overflow:auto}
.modal-x{position:absolute;top:.6rem;right:.6rem;border:0;background:#f4ece0;border-radius:50%;width:36px;height:36px;cursor:pointer;font-size:1rem}
textarea{font:inherit}

/* ── Learner picker ── */
.picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:1rem;margin-top:1rem}
.learner-tile{border:0;background:var(--card);border-radius:24px;box-shadow:var(--shadow);padding:1.4rem .5rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.learner-tile:active{transform:translateY(1px)}
.lav{font-size:3rem;line-height:1}
.lname{font-weight:800;font-size:1.15rem}

/* ── Tabs ── */
.tabs{display:flex;gap:.5rem;margin:1rem 0}
.tabs button{border:0;background:#fbf3e6;border-radius:14px;padding:.6rem 1rem;font-weight:800;cursor:pointer;color:var(--muted)}
.tabs button.on{background:linear-gradient(180deg,var(--brand-2),var(--brand));color:#5a3a00}
.avpick{display:flex;flex-wrap:wrap;gap:.4rem}
.avopt{border:2px solid #f0e6d8;background:#fffdf9;border-radius:14px;width:52px;height:52px;font-size:1.7rem;cursor:pointer}
.avopt.on{border-color:var(--brand);box-shadow:0 0 0 3px var(--glow)}

/* ── Kid full-screen game stage ── */
body:has(#chirp-root.kid){background:radial-gradient(1200px 800px at 50% -10%,#fff2d6,#ffe9c9)}
#chirp-root.kid{position:fixed;inset:0}
.stage{position:absolute;inset:0;display:flex;flex-direction:column;padding:1rem;max-width:720px;margin:0 auto}
.stage-top{display:flex;align-items:center;gap:.75rem}
.stage-x{border:0;background:#ffffffcc;border-radius:50%;width:44px;height:44px;font-size:1.1rem;cursor:pointer;flex:0 0 auto}
.prog{flex:1;height:14px;background:#ffffff88;border-radius:99px;overflow:hidden}
.prog-bar{height:100%;background:linear-gradient(90deg,var(--brand-2),var(--brand));transition:width .3s}
.pcount{font-weight:800;color:#7a5a2a}
.stage-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.25rem;text-align:center}
.flash{font-size:clamp(3rem,16vw,7rem);font-weight:900;color:var(--ink);background:var(--card);border:0;border-radius:32px;box-shadow:var(--shadow);padding:2rem 2.5rem;cursor:pointer;letter-spacing:.02em;min-width:60vw}
.flash:active{transform:scale(.99)}
.flash-audio{font-size:4rem;min-width:auto;padding:2rem 2.4rem}
.find-prompt{font-size:1.3rem;font-weight:800;color:#7a5a2a;margin:0}
.answers{display:flex;gap:1rem;width:100%;max-width:520px}
.answers .btn{flex:1;font-size:1.2rem;padding:1.1rem}
.ans-miss{background:#ffe0e0!important;color:#a33!important;box-shadow:none!important}
.ans-know{background:linear-gradient(180deg,#b8f0c0,#68d67e)!important;color:#1c5c2c!important}
.options{display:grid;grid-template-columns:1fr 1fr;gap:1rem;width:100%;max-width:520px}
.opt{font-size:1.6rem;font-weight:800;padding:1.3rem;border:0;border-radius:22px;background:var(--card);box-shadow:var(--shadow);cursor:pointer;color:var(--ink)}
.opt-good{background:linear-gradient(180deg,#b8f0c0,#68d67e)!important;color:#1c5c2c!important}
.opt-bad{background:#ffd6d6!important;color:#a33!important}
.complete .cheer{font-size:4.5rem}
.complete h1{margin:.3rem 0}
.complete .btn{max-width:280px}

/* ── Mode picker wraps for 5 games ── */
.modewrap{flex-wrap:wrap}
.modewrap button{flex:1 1 40%;min-width:120px}

/* ── Blend / Sound it Out ── */
.blendword{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
.grapheme{font-size:clamp(2.2rem,10vw,4rem);font-weight:900;color:var(--ink);background:var(--card);border:0;border-bottom:6px solid #ead9c0;border-radius:18px;padding:.6rem 1rem;cursor:pointer;min-width:1.4em}
.grapheme.lit{background:linear-gradient(180deg,var(--brand-2),var(--brand));color:#5a3a00;box-shadow:0 0 0 6px var(--glow);transform:translateY(-4px)}

/* ── Sentence ── */
.sentence{font-size:clamp(1.6rem,7vw,2.6rem);font-weight:800;line-height:1.4;color:var(--ink);max-width:16em}
.sentence .hl{background:linear-gradient(180deg,var(--brand-2),var(--brand));border-radius:10px;padding:0 .25em;color:#5a3a00}

/* ── Spelling ── */
.spell-slots{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;padding:.3rem;border-radius:14px}
.spell-slots.spell-good{box-shadow:0 0 0 4px #68d67e}
.spell-slots.spell-bad{box-shadow:0 0 0 4px #ffb0b0}
.slot{width:2rem;height:2.6rem;border-bottom:4px solid #cbb389;font-size:1.8rem;font-weight:900;display:inline-flex;align-items:center;justify-content:center}
.spell-tray{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-top:.5rem}
.ltile{font-size:1.6rem;font-weight:900;width:3rem;height:3rem;border:0;border-radius:14px;background:var(--card);box-shadow:var(--shadow);cursor:pointer;color:var(--ink)}
.ltile.used{opacity:.25;cursor:default}

/* ── Classroom ── */
.classpill{background:#eef4ff;color:#2f6bff;font-weight:800;padding:.4rem .8rem;border-radius:99px;margin-right:auto;margin-left:.5rem}
.codebox{background:#fff6e8;border:2px dashed var(--brand);border-radius:14px;padding:.4rem .8rem;text-align:center;font-size:.8rem;color:var(--muted);letter-spacing:.05em}
.codebox b{font-size:1.3rem;color:var(--ink);letter-spacing:.15em}

/* ── Progress ── */
.statgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem}
.statcard{background:var(--card);border-radius:18px;box-shadow:var(--shadow);border:2px solid #f0e6d8;padding:1rem;text-align:center}
.statbig{font-size:1.9rem;font-weight:900;color:var(--ink)}
.statlbl{font-weight:700;color:var(--muted);font-size:.85rem}

/* ── Upsell banner ── */
.upsell{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:linear-gradient(180deg,#fff3df,#ffe9c9);border:2px solid var(--brand-2);border-radius:16px;padding:.7rem 1rem;margin:.75rem 0;flex-wrap:wrap}
.upsell.paid{background:#eefaf0;border-color:#9be3ab}

/* ── Brand polish ── */
.hero-bird{display:block;width:96px;height:96px;margin:0 auto .4rem;filter:drop-shadow(0 8px 16px rgba(255,158,44,.35))}
.legal-foot{text-align:center;margin-top:1.2rem;font-size:.8rem;color:var(--muted)}
.legal-foot a{color:var(--muted);text-decoration:underline}
.chirp-loading{align-items:center;justify-content:center;color:var(--muted);font-weight:700}
@media (prefers-reduced-motion:no-preference){
  .hero-bird{animation:bob 3s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
}

/* ── Blend finger-slider (worksheet-style sound-out) ── */
.blendstage{width:100%;max-width:560px;touch-action:none;user-select:none;-webkit-user-select:none}
.blendword{display:flex;gap:.4rem;flex-wrap:nowrap;justify-content:center}
.grapheme{display:inline-flex;align-items:center;justify-content:center;text-align:center;
  font-size:clamp(2rem,11vw,4rem);font-weight:900;color:var(--ink);background:var(--card);
  border:0;border-bottom:6px solid #ead9c0;border-radius:18px;padding:.5rem .9rem;min-width:1.2em;
  transition:transform .12s,background .12s,box-shadow .12s;pointer-events:none}
.grapheme.lit{background:linear-gradient(180deg,var(--brand-2),var(--brand));color:#5a3a00;box-shadow:0 0 0 6px var(--glow);transform:translateY(-6px) scale(1.06)}
.blendtrack{position:relative;height:44px;margin-top:.5rem;border-radius:99px;
  background:repeating-linear-gradient(90deg,#ffe9c9,#ffe9c9 10px,#fff3df 10px,#fff3df 20px);
  box-shadow:inset 0 2px 4px rgba(180,140,80,.2);cursor:grab}
.blendtrack:active{cursor:grabbing}
.finger{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);font-size:1.8rem;
  transition:left .08s linear;filter:drop-shadow(0 3px 5px rgba(120,90,40,.35));pointer-events:none}

/* ── Spelling (typed input + per-letter feedback) ── */
.spell-ui{width:100%;max-width:440px}
.spellinput{width:100%;text-align:center;font-size:2rem;font-weight:900;letter-spacing:.12em;
  padding:.7rem;border:3px solid #f0e6d8;border-radius:16px;background:#fffdf9;color:var(--ink);text-transform:lowercase}
.spellinput:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--glow)}
.slot.sok{color:#1c7c3c;border-bottom-color:#68d67e}
.slot.sbad{color:#c0392b;border-bottom-color:#ff9e9e}

/* ── Letter Order (drag to arrange) ── */
.arrange-ref{font-size:1.8rem;font-weight:900;letter-spacing:.18em;color:#c9b083;border-bottom:3px dashed #e6d3ad;padding:0 .3rem .15rem}
.arrange-stage{position:relative;width:100%;max-width:600px;height:54vh;touch-action:none;user-select:none;-webkit-user-select:none}
.arrange-slots{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;padding-top:.4rem}
.aslot{width:50px;height:58px;border-radius:12px;background:#fffdf9;border:2px dashed #e6d3ad;border-bottom:5px solid #cbb389}
.aslot.filled{border-style:solid;border-bottom-color:var(--brand)}
.aslot.sok{background:#e6f7ea;border-color:#68d67e;border-bottom-color:#68d67e}
.aslot.sbad{background:#fdecec;border-color:#ff9e9e;border-bottom-color:#ff9e9e}
.atile{position:absolute;width:50px;height:58px;display:flex;align-items:center;justify-content:center;
  font-size:1.9rem;font-weight:900;color:var(--ink);background:var(--card);border-radius:12px;
  box-shadow:var(--shadow);cursor:grab;touch-action:none;z-index:1;transition:left .14s,top .14s,transform .1s}
.atile.drag{cursor:grabbing;z-index:20;transition:none;transform:scale(1.12);box-shadow:0 12px 24px rgba(120,90,40,.35)}

/* ── My Voice record button ── */
.chip.recording{background:#e23b3b;color:#fff;animation:recpulse 1s infinite}
@keyframes recpulse{0%,100%{box-shadow:0 0 0 0 rgba(226,59,59,.5)}50%{box-shadow:0 0 0 6px rgba(226,59,59,0)}}