:root{
  --bg:#d8f1ff;
  --paper:#fff7ea;
  --paper-2:#f7efdf;
  --ink:#214e82;
  --brown:#7b5529;
  --gold:#f7be47;
  --gold-deep:#ee9b12;
  --green:#4aa96c;
  --line:#d9c9a8;
  --shadow:0 10px 30px rgba(63,91,125,.18);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,#c9eeff,#effafc);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans TC",sans-serif;color:#244b73}
body{min-height:100vh}
a{color:inherit}
.phone-wrap{max-width:520px;margin:0 auto;padding:12px 12px 24px}
.top-note{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;background:rgba(255,255,255,.92);border:1px solid #cde7f4;border-radius:20px;padding:12px 14px;box-shadow:var(--shadow);position:sticky;top:0;z-index:10;backdrop-filter:blur(10px)}
.top-note strong{display:block;color:#245a86;font-size:16px}
.top-note span{display:block;font-size:12px;color:#507596;margin-top:2px}
.pill-group{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.small-pill{border:none;border-radius:999px;padding:10px 14px;background:#fff7dc;color:#81591d;font-weight:700;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.artboard-wrap{display:flex;flex-direction:column;gap:14px;margin-top:12px}
.artboard{position:relative;border-radius:26px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.art-img{display:block;width:100%;height:auto}
.hotspot{position:absolute;background:rgba(255,255,255,0);border:none;cursor:pointer;outline:none}
.hotspot:active,.hotspot:focus-visible{box-shadow:inset 0 0 0 4px rgba(255,213,79,.65), 0 0 0 3px rgba(255,255,255,.45);border-radius:16px}
.active-lesson{border-radius:18px;box-shadow:0 0 0 4px rgba(255,217,84,.55), inset 0 0 20px rgba(255,220,120,.35)}
.control-card{background:rgba(255,250,241,.96);border:1px solid #ead9ba;border-radius:24px;padding:16px;box-shadow:var(--shadow)}
.control-card h1{font-size:22px;line-height:1.2;margin:0 0 8px;color:var(--ink)}
.control-card p{margin:0 0 10px;line-height:1.6}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.stat-box{background:#fff;border:2px solid #efddba;border-radius:18px;padding:10px 12px;text-align:center}
.stat-box span{display:block;font-size:12px;color:#7e6b4c}
.stat-box strong{display:block;font-size:24px;color:#805625;margin-top:4px}
.stat-box.compact strong{font-size:20px}
.button-row{display:flex;gap:10px;flex-wrap:wrap}
.button-row.center{justify-content:center}
.primary-btn,.secondary-btn{border:none;border-radius:18px;padding:14px 18px;font-size:16px;font-weight:800;cursor:pointer;box-shadow:0 8px 18px rgba(0,0,0,.12)}
.primary-btn{background:linear-gradient(180deg,#ffca59,#f0a121);color:#fff}
.secondary-btn{background:#fff;border:2px solid #b8def2;color:#236598}
.helper-box{background:#fffef9;border:2px dashed #f1cc68;border-radius:18px;padding:12px 14px;color:#75541f;font-weight:600}
.lesson-panel .helper-box{margin-bottom:12px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(100px);opacity:0;background:#244d74;color:#fff;padding:12px 16px;border-radius:999px;font-weight:700;box-shadow:var(--shadow);transition:.24s;z-index:50;max-width:90vw;text-align:center}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.lesson-header-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.lesson-header-row h1{margin-bottom:4px}
.subline{color:#6b5938;font-weight:700}
.lesson-stats{display:flex;gap:8px}
.step-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px}
.step-tab{border:none;border-radius:16px;padding:12px 6px;background:#d8ebf5;color:#355d7e;font-size:15px;font-weight:800;cursor:pointer}
.step-tab.active{background:linear-gradient(180deg,#ffd768,#efb447);color:#7a4a08}
.step-tab.done{background:#c2ebbf;color:#2c7441}
.progress-line{height:12px;background:#dbeef7;border-radius:999px;overflow:hidden;border:1px solid #bcdceb;margin-bottom:12px}
.progress-line span{display:block;height:100%;width:0;background:linear-gradient(90deg,#f3bd4e,#59c785);transition:width .35s ease}
.step-panel{display:none}
.step-panel.active{display:block}
.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.picture-grid{grid-template-columns:repeat(3,1fr)}
.picture-card{background:#fff;border:3px solid #d8ebf6;border-radius:22px;padding:8px;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.07);color:#36628c;font-weight:800}
.picture-card img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:16px}
.picture-card span{display:block;padding:8px 0 4px;text-align:center}
.picture-card.success{border-color:#4ec26f;background:#effcf2}
.picture-card.fail{border-color:#ee7a7a;background:#fff1f1}
.listen-card,.builder-card,.drag-game-wrap,.speak-card{background:#fffdf7;border:2px solid #eddcb5;border-radius:22px;padding:16px}
.sentence-big{font-size:36px;font-weight:900;color:#2b63a2;text-align:center;margin:8px 0 4px}
.sentence-zh{text-align:center;color:#805625;font-size:20px;font-weight:800}
.mini-tip{font-size:12px;color:#6a6f75;line-height:1.6;margin-top:10px}
.slots{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.slot{min-width:80px;padding:14px 14px;border-radius:16px;border:2px dashed #d5b37a;background:#fff7e4;color:#7b5529;font-size:18px;font-weight:900;text-align:center}.slot.placeholder{opacity:.55}
.answer-line{min-height:58px;border:2px dashed #b7d8ed;border-radius:18px;padding:10px;margin:12px 0;background:#f6fcff;display:flex;gap:8px;flex-wrap:wrap}
.answer-chip{padding:10px 12px;border-radius:14px;background:#fff2c4;color:#7a5219;font-weight:900;border:1px solid #e5c36a}
.word-bank{display:flex;gap:10px;flex-wrap:wrap}
.word-btn{border:none;border-radius:16px;padding:12px 16px;background:#d8ebf6;color:#264f74;font-weight:900;cursor:pointer}
.word-btn.used{opacity:.35;pointer-events:none}
.drag-stage{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;align-items:center;margin-top:10px}
.drop-zone{background:#f5fbff;border:3px dashed #c7deec;border-radius:20px;padding:12px;text-align:center;min-height:240px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.drop-zone img{display:block;width:100%;max-width:250px;margin:0 auto;border-radius:20px}
.drop-zone.ready{border-color:#53c274;background:#effcf2}
.drag-item{width:110px;height:110px;border-radius:999px;background:radial-gradient(circle at 32% 32%,#fff, #dff3ff 35%, #98dcff 70%, #6abfe9 100%);display:flex;align-items:center;justify-content:center;font-weight:900;color:#255d87;box-shadow:0 10px 25px rgba(41,124,170,.25);margin:0 auto;cursor:grab;user-select:none}
.drag-item.dragging{opacity:.45}
.speak-card{display:grid;grid-template-columns:.9fr 1.1fr;gap:14px;align-items:center}
.speech-preview img{display:block;width:100%;border-radius:20px}
.speech-controls{display:flex;flex-direction:column;gap:8px}
.reward-panel{display:flex;gap:14px;align-items:center;background:linear-gradient(180deg,#fff8dd,#fff2b4);border:2px solid #efd070;border-radius:24px;padding:16px;margin-top:14px;box-shadow:var(--shadow)}
.reward-panel img{width:140px;max-width:34%;border-radius:18px}
.reward-panel h3{margin:0 0 8px;color:#725010}
.reward-panel.hidden{display:none}
.home-panel{margin-bottom:16px}
@media (max-width:430px){
  .phone-wrap{padding:10px 8px 24px}
  .stat-row{grid-template-columns:repeat(3,1fr)}
  .lesson-header-row{flex-direction:column}
  .lesson-stats{width:100%}
  .step-tabs{grid-template-columns:repeat(5, minmax(0,1fr));gap:6px}
  .step-tab{font-size:13px;padding:10px 4px}
  .picture-grid{grid-template-columns:1fr}
  .drag-stage{grid-template-columns:1fr}
  .speak-card{grid-template-columns:1fr}
  .reward-panel{flex-direction:column;align-items:flex-start}
}


/* v6.2 mobile live mic feedback */
.live-voice-box{
  background:linear-gradient(180deg,#effaff,#fff8e8);
  border:2px solid #bfe6f5;
  border-radius:22px;
  padding:12px;
  display:grid;
  grid-template-columns:58px 1fr;
  gap:10px;
  align-items:center;
}
.voice-bubble{
  width:58px;
  height:58px;
  border-radius:999px;
  background:radial-gradient(circle at 35% 25%,#fff,#bdf5ff 45%,#41c7ee);
  display:grid;
  place-items:center;
  font-size:28px;
  box-shadow:0 0 18px rgba(120,210,240,.55);
  transition:transform .08s linear, box-shadow .08s linear;
}
.voice-bubble.active{ animation:voicePulse .75s ease-in-out infinite alternate; }
.voice-bubble.heard{ box-shadow:0 0 26px rgba(255,213,79,.95),0 0 42px rgba(80,205,120,.4); }
@keyframes voicePulse{ from{transform:scale(1)} to{transform:scale(1.12)} }
.voice-status{ font-weight:900; color:#245a86; line-height:1.35; }
.volume-wrap{
  grid-column:1 / -1;
  width:100%;
  height:18px;
  background:#d7edf7;
  border:2px solid #fff;
  border-radius:999px;
  overflow:hidden;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.08);
}
.volume-bar{
  width:0%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#68d391,#ffd447,#ff8b50);
  transition:width .05s linear;
}
.speech-controls{ padding-bottom:calc(8px + env(safe-area-inset-bottom)); }
.lesson-panel{ padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
@media (max-width:430px){
  .button-row.center{ position:relative; padding-bottom:env(safe-area-inset-bottom); }
  .live-voice-box{ grid-template-columns:50px 1fr; }
  .voice-bubble{ width:50px; height:50px; font-size:24px; }
}


/* v6.3 desktop + mobile responsive layout */
@media (min-width: 701px){
  .phone-wrap{
    max-width:1180px;
    margin:0 auto;
    padding:20px 24px 40px;
  }

  .artboard-wrap{
    display:grid;
    grid-template-columns:minmax(420px, 560px) 1fr;
    gap:24px;
    margin-top:18px;
    align-items:start;
  }

  .artboard{
    position:sticky;
    top:88px;
  }

  .home-panel,
  .lesson-panel{
    min-height:auto;
  }

  .top-note{
    max-width:1180px;
    margin:0 auto;
  }
}

@media (max-width: 700px){
  .phone-wrap{
    max-width:520px;
    padding:10px 8px 24px;
  }

  .artboard-wrap{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-top:12px;
  }

  .artboard{
    position:relative;
    top:auto;
  }
}