: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;
  }
}


/* v6.4 third inner template: story read-aloud */
.story-overlay{
  position:absolute;
  left:4%;
  right:4%;
  bottom:4%;
  pointer-events:none;
}
.story-book{
  background:rgba(255,248,225,.94);
  border:3px solid rgba(255,255,255,.9);
  border-radius:22px;
  padding:12px 14px;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.story-ribbon{
  display:inline-block;
  background:#8b5cf6;
  color:#fff;
  font-weight:900;
  border-radius:999px;
  padding:5px 12px;
  margin-bottom:6px;
}
.story-book h1{
  margin:0;
  color:#1f5b93;
  font-size:24px;
}
.story-zh{
  margin:6px 0 0;
  color:#6f4f16;
  font-weight:800;
}
.story-progress{
  height:14px;
  background:#dbeef7;
  border:2px solid #fff;
  border-radius:999px;
  overflow:hidden;
  margin:12px 0;
}
.story-progress span{
  display:block;
  width:0%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#53c274,#ffd447,#ff9e3d);
  transition:width .25s ease;
}
.story-card-main{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:16px;
  background:#fffdf7;
  border:2px solid #eddcb5;
  border-radius:24px;
  padding:14px;
  margin-bottom:14px;
}
.story-scene img{
  display:block;
  width:100%;
  border-radius:20px;
  box-shadow:0 8px 20px rgba(0,0,0,.1);
}
.story-reader{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.sentence-index{
  display:inline-block;
  align-self:flex-start;
  background:#e7f9ff;
  border:2px solid #9adcf4;
  color:#075985;
  border-radius:999px;
  padding:6px 12px;
  font-weight:900;
}
.story-line{
  margin:0;
  color:#245fa7;
  font-size:34px;
  line-height:1.15;
  font-weight:950;
}
.story-line-zh{
  margin:0;
  color:#7b5529;
  font-size:20px;
  font-weight:900;
}
.story-tip{
  margin:0;
  color:#6a6f75;
  font-size:14px;
}
.story-live-box{
  margin-top:4px;
}
.story-heard{
  min-height:26px;
  color:#245a86;
  font-weight:800;
  margin:0;
}
.speak-wide{
  min-width:150px;
}
.story-lines-list{
  display:grid;
  gap:8px;
  margin:12px 0;
}
.story-line-item{
  background:#fff;
  border:2px solid #e6d6b7;
  border-radius:16px;
  padding:10px 12px;
  display:grid;
  grid-template-columns:32px 1fr auto;
  gap:8px;
  align-items:center;
  color:#6d4b19;
  font-weight:800;
}
.story-line-item.active{
  border-color:#58b9ed;
  background:#eefaff;
}
.story-line-item.done{
  border-color:#53c274;
  background:#effcf2;
}
.story-line-item .check{
  color:#2f9b57;
  font-weight:950;
}
.story-nav-row{
  justify-content:center;
}
@media (max-width: 700px){
  .story-card-main{
    grid-template-columns:1fr;
  }
  .story-line{
    font-size:30px;
  }
  .story-overlay{
    display:none;
  }
}


/* v6.5 score + two extra games */
.score-breakdown{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
  margin:10px 0 14px;
}
.score-breakdown div{
  background:#fff;
  border:2px solid #e8d8b8;
  border-radius:16px;
  padding:8px 6px;
  text-align:center;
}
.score-breakdown span{
  display:block;
  font-size:12px;
  color:#7b684c;
  font-weight:800;
}
.score-breakdown b{
  display:block;
  color:#245a86;
  font-size:22px;
}
.game-switcher{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.game-switch{
  border:none;
  border-radius:999px;
  padding:10px 14px;
  background:#e4f4fb;
  color:#245a86;
  font-weight:900;
}
.game-switch.active{
  background:linear-gradient(180deg,#ffd768,#efb447);
  color:#7a4a08;
}
.mini-game-view{display:none}
.mini-game-view.active{display:block}
.choice-situation{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:12px;
  align-items:center;
  background:#fffdf7;
  border:2px solid #eddcb5;
  border-radius:22px;
  padding:12px;
  margin-bottom:12px;
}
.choice-situation img{
  width:100%;
  border-radius:18px;
}
.speech-cloud{
  background:#fff;
  border:3px solid #d9eef8;
  border-radius:24px;
  padding:14px;
  color:#245a86;
  font-weight:900;
  position:relative;
}
.polite-choice-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.polite-choice{
  border:none;
  border-radius:18px;
  background:#fff;
  color:#245a86;
  font-weight:900;
  padding:14px 10px;
  box-shadow:0 7px 16px rgba(0,0,0,.08);
}
.polite-choice.correct{
  background:#effcf2;
  outline:3px solid #53c274;
}
.polite-choice.wrong{
  background:#fff1f1;
  outline:3px solid #ee7a7a;
}
.order-board{
  min-height:74px;
  background:#fffdf7;
  border:2px dashed #d5b37a;
  border-radius:20px;
  padding:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.order-pill{
  background:#e7f9ff;
  border:2px solid #9adcf4;
  color:#075985;
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
}
.order-bank{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.order-chip{
  border:none;
  border-radius:18px;
  background:#fff;
  color:#245a86;
  font-weight:900;
  padding:14px 16px;
  box-shadow:0 7px 16px rgba(0,0,0,.08);
}
.order-chip.used{
  opacity:.35;
  pointer-events:none;
}
.order-feedback{
  margin-top:10px;
  background:#fff8e8;
  border:2px dashed #efcf6c;
  border-radius:16px;
  padding:10px;
  color:#7a5c21;
  font-weight:900;
}
.final-score-card{
  background:linear-gradient(180deg,#fff8dd,#fff2b4);
  border:2px solid #efd070;
  border-radius:22px;
  padding:14px;
  margin-top:12px;
  color:#725010;
}
@media(max-width:700px){
  .score-breakdown{grid-template-columns:repeat(5,1fr);gap:5px}
  .score-breakdown span{font-size:11px}
  .score-breakdown b{font-size:18px}
  .polite-choice-grid{grid-template-columns:1fr}
  .choice-situation{grid-template-columns:1fr}
}


/* v6.7 visible score + visible games */
.score-title-v67{
  background:linear-gradient(180deg,#fff7d6,#ffe9a8);
  border:3px solid #f1c85a;
  border-radius:18px;
  padding:10px 12px;
  margin:12px 0 8px;
  color:#7a4a08;
  font-weight:950;
  text-align:center;
}
.score-breakdown-v67{
  position:sticky;
  top:78px;
  z-index:8;
  background:rgba(255,250,241,.96);
  border:3px solid #fff;
  padding:8px;
  border-radius:20px;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.game-visible-callout-v67{
  background:#eefaff;
  border:3px dashed #58b9ed;
  color:#245a86;
  border-radius:18px;
  padding:12px;
  margin-bottom:12px;
  font-weight:950;
  text-align:center;
}
.game-switcher{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.game-switch{
  border:none;
  border-radius:999px;
  padding:12px 16px;
  background:#e4f4fb;
  color:#245a86;
  font-weight:950;
  box-shadow:0 6px 14px rgba(0,0,0,.08);
}
.game-switch.active{
  background:linear-gradient(180deg,#ffd768,#efb447);
  color:#7a4a08;
}
.mini-game-view{display:none}
.mini-game-view.active{display:block}
.choice-situation{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:12px;
  align-items:center;
  background:#fffdf7;
  border:2px solid #eddcb5;
  border-radius:22px;
  padding:12px;
  margin-bottom:12px;
}
.choice-situation img{
  width:100%;
  border-radius:18px;
}
.speech-cloud{
  background:#fff;
  border:3px solid #d9eef8;
  border-radius:24px;
  padding:14px;
  color:#245a86;
  font-weight:950;
}
.polite-choice-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.polite-choice{
  border:none;
  border-radius:18px;
  background:#fff;
  color:#245a86;
  font-weight:950;
  padding:16px 10px;
  box-shadow:0 7px 16px rgba(0,0,0,.08);
}
.polite-choice.correct{
  background:#effcf2;
  outline:3px solid #53c274;
}
.polite-choice.wrong{
  background:#fff1f1;
  outline:3px solid #ee7a7a;
}
.order-board{
  min-height:74px;
  background:#fffdf7;
  border:2px dashed #d5b37a;
  border-radius:20px;
  padding:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.order-pill{
  background:#e7f9ff;
  border:2px solid #9adcf4;
  color:#075985;
  border-radius:999px;
  padding:10px 14px;
  font-weight:950;
}
.order-bank{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.order-chip{
  border:none;
  border-radius:18px;
  background:#fff;
  color:#245a86;
  font-weight:950;
  padding:14px 16px;
  box-shadow:0 7px 16px rgba(0,0,0,.08);
}
.order-chip.used{
  opacity:.35;
  pointer-events:none;
}
.order-feedback{
  margin-top:10px;
  background:#fff8e8;
  border:2px dashed #efcf6c;
  border-radius:16px;
  padding:10px;
  color:#7a5c21;
  font-weight:950;
}
.final-score-card{
  background:linear-gradient(180deg,#fff8dd,#fff2b4);
  border:2px solid #efd070;
  border-radius:22px;
  padding:14px;
  margin-top:12px;
  color:#725010;
}
@media(max-width:700px){
  .score-breakdown-v67{top:0}
  .polite-choice-grid{grid-template-columns:1fr}
  .choice-situation{grid-template-columns:1fr}
}


/* v6.8 better reward sound + course score note */
.course-score-note-v68{
  background:#fffdf7;
  border:2px dashed #efcf6c;
  color:#75541f;
  border-radius:16px;
  padding:8px 10px;
  margin:8px 0 12px;
  font-weight:850;
  line-height:1.45;
}


/* v6.9 real interaction question + animal cheer */
.teacher-question-panel{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:12px;
  align-items:start;
  background:linear-gradient(180deg,#fff7dc,#eefaff);
  border:3px solid #fff;
  border-radius:24px;
  padding:14px;
  margin:12px 0;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.teacher-avatar{
  width:64px;
  height:64px;
  border-radius:20px;
  display:grid;
  place-items:center;
  background:#fff;
  font-size:38px;
  box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.teacher-dialog{
  color:#245a86;
}
.teacher-label{
  display:inline-block;
  background:#8b5cf6;
  color:white;
  border-radius:999px;
  padding:5px 12px;
  font-weight:950;
  margin-bottom:6px;
}
.teacher-dialog p{
  font-size:18px;
  line-height:1.45;
  font-weight:900;
  margin:6px 0 10px;
}
.animal-cheer-layer{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(8,67,105,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.animal-cheer-layer.hidden{
  display:none;
}
.animal-cheer-card{
  background:linear-gradient(180deg,#fff9db,#e8fbff);
  border:5px solid #fff;
  border-radius:32px;
  padding:22px;
  text-align:center;
  box-shadow:0 18px 55px rgba(0,0,0,.25);
  max-width:420px;
  width:100%;
  animation:cheerPop .28s ease-out;
}
@keyframes cheerPop{
  from{transform:scale(.72);opacity:.2}
  to{transform:scale(1);opacity:1}
}
.animal-parade{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-bottom:12px;
}
.cheer-animal{
  font-size:48px;
  display:inline-block;
  animation:animalBounce .6s ease-in-out infinite alternate;
}
.cheer-animal:nth-child(2){animation-delay:.08s}
.cheer-animal:nth-child(3){animation-delay:.16s}
.cheer-animal:nth-child(4){animation-delay:.24s}
@keyframes animalBounce{
  from{transform:translateY(0) rotate(-2deg)}
  to{transform:translateY(-18px) rotate(4deg)}
}
.animal-cheer-card h2{
  color:#245a86;
  margin:8px 0;
}
.animal-cheer-card p{
  color:#7a4a08;
  font-weight:900;
}
.story-question-panel{
  margin-top:14px;
}
@media(max-width:700px){
  .teacher-question-panel{
    grid-template-columns:56px 1fr;
    gap:10px;
    padding:12px;
  }
  .teacher-avatar{
    width:52px;
    height:52px;
    font-size:30px;
  }
  .teacher-dialog p{
    font-size:16px;
  }
  .cheer-animal{
    font-size:40px;
  }
}


/* v7 official website integration */
.site-shell{max-width:1180px;margin:0 auto;padding:22px}
.landing-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;background:rgba(255,255,255,.92);border:1px solid #cde7f4;border-radius:24px;padding:14px 16px;box-shadow:var(--shadow);position:sticky;top:12px;z-index:20;backdrop-filter:blur(10px)}
.brand-mark{display:flex;align-items:center;gap:12px}.brand-otter{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:#fff7dc;font-size:32px}.brand-mark strong{display:block;color:#245a86;font-size:20px}.brand-mark small{display:block;color:#6a7d8d;margin-top:3px}.landing-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.landing-actions button{border:none;border-radius:999px;padding:11px 16px;background:#fff7dc;color:#81591d;font-weight:900}
.landing-hero{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;margin:28px 0}.hero-copy{background:rgba(255,250,241,.86);border:1px solid #ead9ba;border-radius:32px;padding:28px;box-shadow:var(--shadow)}.hero-badge{display:inline-block;background:#8b5cf6;color:white;border-radius:999px;padding:8px 14px;font-weight:950;margin-bottom:12px}.hero-copy h1{margin:0;color:#245a86;font-size:clamp(34px,5vw,58px);line-height:1.08}.hero-lead{font-size:19px;color:#5f4d2f;line-height:1.7;font-weight:700}.hero-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.trust-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}.trust-row div{background:#fff;border:2px solid #e8d8b8;border-radius:18px;padding:12px}.trust-row b{display:block;color:#7a4a08;font-size:17px}.trust-row span{display:block;color:#607485;font-size:13px;margin-top:4px}
.hero-preview{background:rgba(255,255,255,.72);border-radius:32px;padding:12px;box-shadow:var(--shadow)}.preview-frame{border-radius:24px;overflow:hidden;max-height:700px}.preview-frame img{width:100%;display:block}
.landing-section{background:rgba(255,250,241,.94);border:1px solid #ead9ba;border-radius:30px;padding:26px;margin:22px 0;box-shadow:var(--shadow)}.landing-section h2,.landing-cta h2{color:#245a86;font-size:32px;margin:0 0 14px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.feature-card{background:#fff;border:2px solid #e8d8b8;border-radius:22px;padding:18px}.feature-card span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#ffd768;color:#7a4a08;font-weight:950}.feature-card h3{color:#245a86;margin:12px 0 8px}.feature-card p{color:#5f4d2f;line-height:1.6}
.split-section{display:grid;grid-template-columns:1fr .8fr;gap:20px;align-items:center}.audio-box{background:#eefaff;border:3px dashed #58b9ed;border-radius:24px;padding:20px}.audio-box h3{color:#245a86;margin-top:0}.audio-box li{margin:8px 0;font-weight:800;color:#75541f}
.landing-cta{text-align:center;background:linear-gradient(180deg,#fff8dd,#e8fbff);border:3px solid #fff;border-radius:34px;padding:30px;box-shadow:var(--shadow);margin-bottom:36px}.landing-cta .hero-buttons{justify-content:center}
.parent-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}.parent-card{background:rgba(255,250,241,.96);border:1px solid #ead9ba;border-radius:28px;padding:22px;box-shadow:var(--shadow)}.parent-card.wide{grid-column:1/-1}.parent-card h1,.parent-card h2{color:#245a86;margin-top:0}.parent-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.parent-stats div{background:white;border:2px solid #e8d8b8;border-radius:20px;padding:14px;text-align:center}.parent-stats span{display:block;color:#7b684c;font-weight:800}.parent-stats b{display:block;color:#7a4a08;font-size:24px;margin-top:6px}.audio-item{background:#fff;border:2px solid #e8d8b8;border-radius:20px;padding:14px;margin:12px 0}.audio-item.locked{background:#fff8e8}.audio-item strong{color:#7a4a08;font-size:18px}.audio-item p{color:#5f4d2f;line-height:1.5}.check-list{columns:2;color:#5f4d2f;font-weight:800;line-height:1.8}
@media(max-width:800px){.site-shell{padding:12px}.landing-nav{align-items:flex-start;flex-direction:column;top:6px}.landing-hero,.split-section,.parent-grid{grid-template-columns:1fr}.feature-grid{grid-template-columns:1fr}.trust-row,.parent-stats{grid-template-columns:1fr}.check-list{columns:1}.hero-copy{padding:20px}.landing-section{padding:20px}}


/* v7.1 free 1-3 + level 8 trial */
.v71-free-note,
.v71-lesson-note{
  background:#fffdf7;
  border:2px dashed #53c274;
  border-radius:18px;
  color:#2f6f47;
  padding:10px 12px;
  font-weight:850;
  line-height:1.5;
}


/* v7.2 teacher audio note */
.teacher-audio-note-v72{
  font-size:13px !important;
  color:#7a5c21 !important;
  background:#fff8e8;
  border:2px dashed #efcf6c;
  border-radius:14px;
  padding:8px 10px;
  margin:8px 0 !important;
  font-weight:800 !important;
}


/* v7.6 animal cheer repair */
.animal-cheer-layer{
  position:fixed;
  inset:0;
  z-index:99999;
  background:rgba(8,67,105,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.animal-cheer-layer.hidden{
  display:none !important;
}
.animal-cheer-card{
  background:linear-gradient(180deg,#fff9db,#e8fbff);
  border:5px solid #fff;
  border-radius:32px;
  padding:22px;
  text-align:center;
  box-shadow:0 18px 55px rgba(0,0,0,.25);
  max-width:420px;
  width:100%;
  animation:cheerPopV76 .28s ease-out;
}
@keyframes cheerPopV76{
  from{transform:scale(.72);opacity:.2}
  to{transform:scale(1);opacity:1}
}
.animal-parade{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-bottom:12px;
}
.cheer-animal{
  font-size:48px;
  display:inline-block;
  animation:animalBounceV76 .6s ease-in-out infinite alternate;
}
.cheer-animal:nth-child(2){animation-delay:.08s}
.cheer-animal:nth-child(3){animation-delay:.16s}
.cheer-animal:nth-child(4){animation-delay:.24s}
@keyframes animalBounceV76{
  from{transform:translateY(0) rotate(-2deg)}
  to{transform:translateY(-18px) rotate(4deg)}
}
.animal-cheer-card h2{
  color:#245a86;
  margin:8px 0;
}
.animal-cheer-card p{
  color:#7a4a08;
  font-weight:900;
}


/* v7.7 story speak card */
.story-speak-card{
  border:4px solid rgba(255,196,76,.45);
}
.speak-target-box{
  background:#fff7d9;
  border:3px dashed #f5b942;
  border-radius:22px;
  padding:14px 16px;
  margin:12px 0;
  color:#245a86;
  font-size:1.15rem;
  font-weight:900;
}
#storySpeakTarget{
  margin-left:8px;
}
.heard-text{
  color:#245a86;
  font-weight:900;
  margin-top:10px;
}


/* v7.8 free level 1-3 map */
.trial-map-hero{
  text-align:center;
  padding:32px 18px 20px;
}
.trial-map-hero h1{
  color:#245a86;
  font-size:clamp(32px,5vw,58px);
  line-height:1.05;
  margin:14px 0;
}
.trial-map-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin:22px 0 28px;
}
.trial-level-card{
  background:rgba(255,250,241,.96);
  border:3px solid #fff;
  border-radius:30px;
  padding:22px;
  box-shadow:var(--shadow);
  min-height:245px;
}
.trial-level-card h2{
  color:#245a86;
  margin:8px 0;
}
.trial-level-card p{
  color:#5f4d2f;
  font-weight:800;
  line-height:1.55;
}
.level-number{
  width:58px;
  height:58px;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  font-weight:1000;
  color:#fff;
  background:linear-gradient(180deg,#53c274,#1f9cbb);
  box-shadow:0 10px 24px rgba(31,156,187,.22);
}
.feature-level .level-number{
  background:linear-gradient(180deg,#8b5cf6,#f5a623);
}
.locked-level{
  opacity:.78;
  background:#fff8e8;
}
.locked-level .level-number{
  background:linear-gradient(180deg,#b8b8b8,#7d8791);
}
.trial-level-card .primary-btn,
.trial-level-card .secondary-btn{
  margin:6px 6px 0 0;
}
@media(max-width:900px){
  .trial-map-grid{
    grid-template-columns:1fr;
  }
  .trial-level-card{
    min-height:auto;
  }
}


/* v7.9 find picture click fix */
.selected-choice{
  transform:translateY(-4px) scale(1.02);
}
.correct-choice{
  border-color:#17b978 !important;
  box-shadow:0 0 0 5px rgba(23,185,120,.22), 0 18px 36px rgba(23,185,120,.22) !important;
}
.wrong-choice{
  border-color:#ff9f43 !important;
  box-shadow:0 0 0 5px rgba(255,159,67,.22), 0 18px 36px rgba(255,159,67,.18) !important;
}
.success-feedback{
  color:#178a55 !important;
}
#choiceFeedback,
#findPictureFeedback,
#resultText{
  min-height:28px;
  color:#245a86;
  font-weight:1000;
}


/* v8.0 illustrated free map + real level 1-3 */
.map-page-v8 .site-shell{
  max-width:1180px;
}
.compact-nav-v8{
  margin-bottom:8px;
}
.map-hero-v8{
  background:linear-gradient(135deg,#e9fbff,#fff7df);
  border:5px solid #fff;
  border-radius:36px;
  padding:18px 22px;
  box-shadow:0 18px 45px rgba(32,110,150,.18);
  margin:10px 0 16px;
}
.map-ollie-bubble{
  display:flex;
  align-items:center;
  gap:18px;
}
.ollie-face-v8{
  width:96px;
  height:96px;
  border-radius:32px;
  background:linear-gradient(180deg,#fff,#daf7ff);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:58px;
  box-shadow:0 12px 28px rgba(36,90,134,.2);
}
.map-hero-v8 h1{
  color:#245a86;
  margin:8px 0;
  font-size:clamp(30px,4.6vw,56px);
  line-height:1.05;
}
.map-hero-v8 p{
  color:#6a4d26;
  font-size:1.15rem;
  font-weight:900;
  margin:0;
}
.ocean-path-v8{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
  margin:16px 0 14px;
}
.island-card-v8{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#fffdf6,#eafaff);
  border:5px solid #fff;
  border-radius:34px;
  padding:18px;
  min-height:250px;
  box-shadow:0 18px 45px rgba(36,90,134,.18);
  cursor:pointer;
  transition:.18s ease;
}
.island-card-v8:hover{
  transform:translateY(-5px);
}
.island-card-v8:before{
  content:"";
  position:absolute;
  right:-25px;
  bottom:-25px;
  width:140px;
  height:140px;
  border-radius:50%;
  background:rgba(116,209,230,.22);
}
.island-top-v8{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}
.level-gem-v8{
  width:62px;
  height:62px;
  border-radius:23px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:31px;
  font-weight:1000;
  background:linear-gradient(180deg,#53c274,#1f9cbb);
  box-shadow:0 10px 24px rgba(31,156,187,.25);
}
.level-gem-v8.purple{
  background:linear-gradient(180deg,#8b5cf6,#f5a623);
}
.sea-icon-v8{
  font-size:52px;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.12));
}
.island-card-v8 h2{
  color:#245a86;
  margin:8px 0 10px;
  font-size:1.45rem;
}
.island-card-v8 p{
  color:#5f4d2f;
  font-weight:900;
  min-height:50px;
  line-height:1.45;
}
.island-card-v8 button{
  position:relative;
  z-index:2;
}
.feature-v8{
  background:linear-gradient(180deg,#fff7f1,#eef9ff);
}
.mini-buttons-v8{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.locked-reef-v8{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:12px 0 22px;
}
.locked-shell-v8{
  background:rgba(255,255,255,.74);
  border:3px dashed rgba(36,90,134,.25);
  border-radius:22px;
  padding:14px 16px;
  color:#245a86;
  font-weight:1000;
}
.level-chip-v8{
  display:inline-flex;
  margin:8px 0 10px;
  padding:10px 18px;
  border-radius:999px;
  background:linear-gradient(90deg,#24b7c9,#7c5cff);
  color:white;
  font-weight:1000;
  box-shadow:0 12px 28px rgba(36,90,134,.2);
}
@media(max-width:980px){
  .ocean-path-v8{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:620px){
  .map-ollie-bubble{align-items:flex-start;}
  .ollie-face-v8{width:72px;height:72px;font-size:42px;border-radius:24px;}
  .ocean-path-v8{grid-template-columns:1fr;}
  .locked-reef-v8{grid-template-columns:1fr;}
  .island-card-v8{min-height:auto;}
}


/* v8.1 clean text overflow repair */
body{
  overflow-x:hidden;
}
.site-shell,
.card,
.landing-card,
.trial-level-card,
.island-card-v8{
  word-break:break-word;
}
.raw-notes,
.debug-notes,
.dev-notes,
.hidden-notes{
  display:none !important;
}
.long-copy,
.release-notes{
  display:none !important;
}
.lesson-page main > p,
.intro-page main > p{
  max-width:760px;
  line-height:1.65;
}
.lesson-page .site-shell > p{
  display:none;
}


/* v8.2 level art + Chinese encouragement */
.level-art-v82{
  width:100%;
  aspect-ratio: 1.28 / 1;
  object-fit:cover;
  border-radius:26px;
  border:5px solid #fff;
  box-shadow:0 12px 28px rgba(36,90,134,.16);
  margin:6px 0 12px;
  background:#eafaff;
}
.level-art-panel-v82{
  max-width:520px;
  margin:8px auto 16px;
  border:5px solid #fff;
  border-radius:34px;
  padding:8px;
  background:linear-gradient(180deg,#fffdf6,#eafaff);
  box-shadow:0 18px 45px rgba(36,90,134,.16);
}
.level-art-panel-v82 img{
  width:100%;
  display:block;
  border-radius:26px;
}
.zh-cheer-v82{
  position:fixed;
  left:50%;
  bottom:calc(22px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:100000;
  background:#fff8d7;
  border:4px solid #fff;
  border-radius:999px;
  padding:13px 22px;
  color:#245a86;
  font-weight:1000;
  box-shadow:0 14px 32px rgba(36,90,134,.22);
  animation:zhCheerPopV82 .22s ease-out;
}
@keyframes zhCheerPopV82{
  from{opacity:0; transform:translateX(-50%) translateY(18px) scale(.92)}
  to{opacity:1; transform:translateX(-50%) translateY(0) scale(1)}
}
@media(max-width:720px){
  .level-art-panel-v82{max-width:92vw;}
  .level-art-v82{border-radius:22px;}
}


/* v8.5 no emoji + same Level 8 storybook template */
.map-page-v85 .site-shell{
  max-width:1220px;
}
.wordmark-ollie{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:78px;
  height:54px;
  border-radius:22px;
  background:linear-gradient(180deg,#f4d487,#c9903e);
  color:#704312;
  border:4px solid #fff8e6;
  font-family:Georgia, serif;
  font-weight:1000;
  font-size:22px;
  box-shadow:0 10px 22px rgba(36,90,134,.16);
}
.storybook-map-hero-v85{
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.78), transparent 20%),
    linear-gradient(135deg,#d9f4ff,#fff1cc);
  border:6px solid #fff;
  border-radius:38px;
  padding:20px;
  box-shadow:0 18px 45px rgba(36,90,134,.18);
  margin:10px 0 18px;
}
.storybook-title-card-v85{
  background:rgba(255,248,232,.82);
  border:4px solid rgba(176,117,43,.28);
  border-radius:32px;
  padding:18px 22px;
  text-align:center;
}
.storybook-title-card-v85 h1{
  color:#704312;
  font-family:Georgia, 'Noto Serif TC', serif;
  font-size:clamp(32px,5vw,58px);
  line-height:1.05;
  margin:10px 0;
}
.storybook-title-card-v85 p{
  color:#245a86;
  font-weight:1000;
  font-size:1.12rem;
  margin:0;
}
.storybook-level-grid-v85{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin:18px 0 16px;
}
.storybook-level-card-v85{
  background:linear-gradient(180deg,#fff9e9,#eaf9ff);
  border:6px solid #fffdf7;
  border-radius:34px;
  padding:14px;
  box-shadow:0 18px 45px rgba(36,90,134,.18);
  cursor:pointer;
  transition:.18s ease;
  position:relative;
  overflow:hidden;
}
.storybook-level-card-v85:hover{
  transform:translateY(-5px);
}
.level-ribbon-v85{
  position:absolute;
  left:18px;
  top:18px;
  z-index:2;
  background:linear-gradient(180deg,#f3cf7d,#c9903e);
  color:#704312;
  border:4px solid #fff8e6;
  border-radius:999px;
  padding:8px 14px;
  font-family:Georgia, serif;
  font-weight:1000;
  box-shadow:0 8px 18px rgba(36,90,134,.15);
}
.level-ribbon-v85.purple{
  background:linear-gradient(180deg,#dfd0ff,#f3cf7d);
}
.storybook-level-card-v85 h2{
  color:#704312;
  font-family:Georgia, 'Noto Serif TC', serif;
  margin:12px 4px 6px;
}
.storybook-level-card-v85 p{
  color:#245a86;
  font-weight:1000;
  margin:0 4px 12px;
  line-height:1.45;
}
.same-template-v85 .level-art-panel-v82,
.same-template-v85 .card,
.same-template-v85 .teacher-question-card,
.same-template-v85 .story-speak-card{
  background:linear-gradient(180deg,#fff9e9,#eaf9ff);
  border:6px solid #fffdf7;
  box-shadow:0 18px 45px rgba(36,90,134,.16);
}
.same-template-v85 .level-chip-v8,
.same-template-v85 .section-badge{
  background:linear-gradient(180deg,#f3cf7d,#c9903e);
  color:#704312;
  border:4px solid #fff8e6;
  font-family:Georgia, 'Noto Serif TC', serif;
}
.sea-friend-mark{
  width:52px;
  height:52px;
  border-radius:50%;
  background:linear-gradient(180deg,#f3cf7d,#7fcde0);
  border:4px solid #fff8e6;
  color:#704312;
  font-size:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:Georgia, serif;
}
@media(max-width:1000px){
  .storybook-level-grid-v85{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:640px){
  .storybook-level-grid-v85{grid-template-columns:1fr;}
}


/* v8.7 fully consistent watercolor game map */
.map-page-v87 .site-shell{
  max-width:1240px;
}
.storybook-map-hero-v87{
  margin:10px 0 18px;
  padding:18px;
  border:7px solid #fffdf7;
  border-radius:42px;
  background:
    radial-gradient(circle at 15% 16%, rgba(255,255,255,.72), transparent 22%),
    linear-gradient(135deg,#d9f4ff,#fff0cc);
  box-shadow:0 18px 45px rgba(36,90,134,.18);
}
.storybook-title-card-v87{
  text-align:center;
  background:rgba(255,248,232,.88);
  border:5px solid rgba(176,117,43,.26);
  border-radius:34px;
  padding:18px 22px;
}
.storybook-title-card-v87 h1{
  margin:0 0 8px;
  color:#704312;
  font-family:Georgia, 'Noto Serif TC', serif;
  font-size:clamp(38px,5.2vw,68px);
  letter-spacing:.02em;
}
.storybook-title-card-v87 p{
  color:#245a86;
  font-weight:1000;
  margin:0;
  font-size:1.15rem;
}
.storybook-level-grid-v87{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin:18px 0 16px;
}
.storybook-level-card-v87{
  position:relative;
  overflow:hidden;
  cursor:pointer;
  border:7px solid #fffdf7;
  border-radius:34px;
  background:linear-gradient(180deg,#fff8e8,#eaf9ff);
  box-shadow:0 18px 45px rgba(36,90,134,.18);
  transition:.18s ease;
}
.storybook-level-card-v87:hover{
  transform:translateY(-5px);
}
.level-art-v87{
  width:100%;
  aspect-ratio: 1.26 / 1;
  object-fit:cover;
  display:block;
  border-bottom:5px solid rgba(176,117,43,.18);
}
.level-ribbon-v87{
  position:absolute;
  z-index:3;
  left:14px;
  top:14px;
  width:54px;
  height:54px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#f3cf7d,#c9903e);
  color:#704312;
  border:4px solid #fff8e6;
  font-family:Georgia, serif;
  font-size:28px;
  font-weight:1000;
  box-shadow:0 8px 18px rgba(36,90,134,.15);
}
.level-ribbon-v87.purple{
  background:linear-gradient(180deg,#dfd0ff,#f3cf7d);
}
.level-copy-v87{
  padding:14px 16px 18px;
  background:linear-gradient(180deg,rgba(255,249,233,.94),rgba(234,249,255,.96));
}
.level-copy-v87 h2{
  color:#704312;
  font-family:Georgia,'Noto Serif TC',serif;
  font-size:1.55rem;
  margin:0 0 6px;
}
.level-copy-v87 p{
  color:#245a86;
  font-weight:1000;
  margin:0 0 12px;
  min-height:30px;
}
@media(max-width:1020px){
  .storybook-level-grid-v87{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:640px){
  .storybook-level-grid-v87{grid-template-columns:1fr;}
}


/* v8.8 pearl mini-game fix */
.pearl-game-v88{
  margin-top:18px;
  background:linear-gradient(180deg,#fff9e9,#eaf9ff);
  border:6px solid #fffdf7;
}
.pearl-playground-v88{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
  padding:18px;
  border-radius:28px;
  background:rgba(173,231,245,.35);
  border:3px dashed rgba(36,90,134,.22);
}
.pearl-v88{
  width:118px;
  height:118px;
  border-radius:50%;
  border:8px solid #fff;
  background:
    radial-gradient(circle at 34% 28%, #ffffff 0 12%, #f8e7ff 13% 34%, #b8e8ff 35% 70%, #74c8e4 71% 100%);
  color:#245a86;
  font-weight:1000;
  box-shadow:0 16px 35px rgba(36,90,134,.22);
  font-size:22px;
}
.pearl-v88.dragging-v88{
  opacity:.62;
  transform:scale(.96);
}
.pearl-v88.pearl-delivered-v88{
  transform:translateY(-6px) scale(1.06);
  box-shadow:0 0 0 10px rgba(255,207,97,.28), 0 18px 38px rgba(36,90,134,.24);
}
.sea-friend-target-v88{
  min-width:190px;
  min-height:130px;
  border-radius:34px;
  border:6px solid #fff;
  background:linear-gradient(180deg,#dff8ff,#fff3cb);
  color:#704312;
  font-family:Georgia,'Noto Serif TC',serif;
  font-weight:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 14px 32px rgba(36,90,134,.15);
}
.sea-friend-target-v88.drop-ready-v88{
  outline:8px solid rgba(255,196,76,.42);
  transform:scale(1.03);
}


/* v8.9 inner images by level */
.find-picture-v89{
  background:linear-gradient(180deg,#fff9e9,#eaf9ff);
  border:6px solid #fffdf7;
  box-shadow:0 18px 45px rgba(36,90,134,.16);
}
.choice-grid-v89{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:14px;
}
.choice-card-v89{
  border:5px solid #fffdf7;
  border-radius:30px;
  background:linear-gradient(180deg,#fff9e9,#eaf9ff);
  padding:10px;
  box-shadow:0 12px 28px rgba(36,90,134,.14);
  cursor:pointer;
  transition:.16s ease;
  color:#704312;
  font-family:Georgia,'Noto Serif TC',serif;
  font-weight:1000;
  font-size:1.28rem;
}
.choice-card-v89:hover{
  transform:translateY(-4px);
}
.choice-card-v89 img{
  width:100%;
  aspect-ratio:1.08 / .92;
  object-fit:cover;
  border-radius:22px;
  display:block;
  margin-bottom:10px;
  border:3px solid rgba(176,117,43,.22);
}
.choice-card-v89.correct-choice{
  border-color:#1fbf75 !important;
  box-shadow:0 0 0 8px rgba(31,191,117,.2), 0 18px 36px rgba(31,191,117,.18) !important;
}
.choice-card-v89.wrong-choice{
  border-color:#ffae3d !important;
  box-shadow:0 0 0 8px rgba(255,174,61,.22), 0 18px 36px rgba(255,174,61,.16) !important;
}
@media(max-width:780px){
  .choice-grid-v89{
    grid-template-columns:1fr;
  }
}


/* v9.0 story English overlap fix */
.story-sentence,
.story-line-text,
#storySpeakTarget,
#storyLineText,
#currentStoryLine,
.story-speak-card h2,
.story-speak-card .speak-target-box span{
  line-height:1.18 !important;
  word-break:normal !important;
  overflow-wrap:break-word !important;
}

.story-speak-card{
  align-items:stretch;
}

.story-speak-card h2,
#storySpeakTarget,
#storyLineText,
#currentStoryLine{
  max-width:100%;
}

.speak-target-box{
  display:block !important;
  min-height:auto !important;
  padding:18px 22px !important;
}

#storySpeakTarget{
  display:block !important;
  font-size:clamp(34px, 6vw, 64px) !important;
  line-height:1.18 !important;
  margin:8px 0 0 !important;
  white-space:normal !important;
}

.story-reading-card-v90{
  display:grid;
  grid-template-columns:minmax(240px, 42%) 1fr;
  gap:28px;
  align-items:center;
}

.story-reading-card-v90 .story-image,
.story-reading-card-v90 img{
  max-width:100%;
  height:auto;
}

@media(max-width:820px){
  .story-reading-card-v90{
    grid-template-columns:1fr;
  }
  #storySpeakTarget{
    font-size:clamp(30px, 9vw, 48px) !important;
  }
}


/* v9.1 restore dolphin pearl game style */
#pearlGameV88,
.pearl-game-v88{
  display:none !important;
}

.dolphin-pearl-card,
.original-dolphin-pearl,
.mini-game-card,
.game-card{
  border-radius:30px;
}

/* Keep watercolor images large and storybook-like in mini games */
.mini-game-card img,
.game-card img,
.dolphin-pearl-card img,
.original-dolphin-pearl img{
  border-radius:24px;
  border:5px solid #fffdf7;
  box-shadow:0 14px 32px rgba(36,90,134,.16);
}


/* v9.2 level-specific inner template */
.level-specific-page-v92{
  background:linear-gradient(180deg,#d9f4ff,#f8fdff 55%,#fff3cf);
}
.inner-hero-v92{
  max-width:1120px;
  margin:0 auto 32px;
}
.inner-topbar-v92{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
  margin:12px 0 16px;
}
.wood-btn-v92,
.wood-title-v92,
.scorebox-v92{
  background:linear-gradient(180deg,#f3cf7d,#c9903e);
  border:5px solid #fff8e6;
  border-radius:28px;
  color:#704312;
  font-family:Georgia,'Noto Serif TC',serif;
  font-weight:1000;
  box-shadow:0 12px 28px rgba(36,90,134,.16);
}
.wood-btn-v92{
  padding:12px 20px;
  font-size:1.05rem;
}
.wood-title-v92{
  text-align:center;
  padding:14px 18px;
  font-size:clamp(24px,4vw,42px);
}
.scorebox-v92{
  padding:10px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:92px;
}
.scorebox-v92 span{font-size:.9rem;}
.scorebox-v92 strong{font-size:1.7rem;}
.today-card-v92{
  display:grid;
  grid-template-columns:minmax(280px,42%) 1fr;
  gap:22px;
  padding:18px;
  border:7px solid #fffdf7;
  border-radius:40px;
  background:linear-gradient(180deg,#fff9e9,#eaf9ff);
  box-shadow:0 18px 45px rgba(36,90,134,.18);
}
.ollie-panel-v92 img{
  width:100%;
  height:100%;
  max-height:430px;
  object-fit:cover;
  border-radius:30px;
  border:5px solid #fffdf7;
  box-shadow:0 14px 32px rgba(36,90,134,.16);
}
.sentence-panel-v92{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.sentence-panel-v92 h1{
  color:#245a86;
  font-size:clamp(44px,7vw,82px);
  line-height:1.08;
  margin:14px 0;
}
.sentence-panel-v92 p{
  color:#704312;
  font-weight:1000;
  font-size:1.35rem;
}
.step-road-v92{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  margin:18px 0;
  background:linear-gradient(180deg,#a66d2e,#704312);
  border:5px solid #fff8e6;
  border-radius:28px;
  padding:10px;
  box-shadow:0 12px 28px rgba(36,90,134,.18);
}
.step-road-v92 button{
  border:0;
  border-radius:22px;
  padding:10px 8px;
  background:linear-gradient(180deg,#c9eadf,#6fb8bd);
  color:#704312;
  font-family:Georgia,'Noto Serif TC',serif;
  font-size:1.05rem;
  font-weight:1000;
}
.step-road-v92 button.active,
.step-road-v92 button:hover{
  background:linear-gradient(180deg,#ffd977,#f0a328);
}
.step-road-v92 span{
  display:inline-flex;
  width:34px;
  height:34px;
  border-radius:50%;
  align-items:center;
  justify-content:center;
  background:#fff8e6;
  margin-right:5px;
}
.word-chip-row-v92{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
}
.word-chip-v92{
  border:5px solid #fff8e6;
  border-radius:26px;
  padding:14px 22px;
  background:linear-gradient(180deg,#f3cf7d,#fff2ca);
  color:#704312;
  font-size:1.3rem;
  font-weight:1000;
  box-shadow:0 10px 24px rgba(36,90,134,.13);
}
.build-answer-v92{
  min-height:68px;
  border:4px dashed rgba(36,90,134,.24);
  border-radius:24px;
  background:#eaf9ff;
  color:#245a86;
  font-size:1.45rem;
  font-weight:1000;
  padding:16px;
}
.mini-game-stage-v92{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  align-items:center;
}
.pearl-target-card-v92,
.pearl-source-card-v92,
.simple-task-card-v92{
  border:6px solid #fffdf7;
  border-radius:30px;
  background:linear-gradient(180deg,#fff9e9,#eaf9ff);
  padding:12px;
  box-shadow:0 12px 28px rgba(36,90,134,.14);
  cursor:pointer;
}
.pearl-target-card-v92 img,
.pearl-source-card-v92 img,
.simple-task-card-v92 img{
  width:100%;
  border-radius:22px;
  display:block;
}
.pearl-target-card-v92 strong,
.pearl-source-card-v92 strong,
.simple-task-card-v92 strong{
  display:block;
  text-align:center;
  color:#704312;
  font-family:Georgia,'Noto Serif TC',serif;
  font-size:1.25rem;
  margin-top:8px;
}
@media(max-width:820px){
  .inner-topbar-v92{grid-template-columns:1fr;}
  .today-card-v92{grid-template-columns:1fr;}
  .step-road-v92{grid-template-columns:1fr 1fr;}
  .mini-game-stage-v92{grid-template-columns:1fr;}
}


/* v9.6 meaningful interaction games */
.name-game-v96,
.like-game-v96,
.roleplay-card-v96{
  background:linear-gradient(180deg,#fff9e9,#eaf9ff);
  border:6px solid #fffdf7;
  border-radius:30px;
  padding:18px;
  box-shadow:0 14px 32px rgba(36,90,134,.14);
}
.name-game-v96 h3,
.like-game-v96 h3,
.roleplay-card-v96 h3{
  margin:0 0 8px;
  color:#704312;
  font-family:Georgia,'Noto Serif TC',serif;
  font-size:1.55rem;
}
.name-game-v96 p,
.like-game-v96 p,
.roleplay-card-v96 p{
  color:#245a86;
  font-weight:1000;
}
.name-card-preview-v96{
  margin:16px 0;
  padding:18px;
  border-radius:28px;
  background:#fff8df;
  border:4px dashed rgba(112,67,18,.28);
  text-align:center;
}
.name-badge-v96{
  display:inline-flex;
  padding:8px 18px;
  border-radius:999px;
  background:linear-gradient(180deg,#f3cf7d,#c9903e);
  color:#704312;
  font-family:Georgia,serif;
  font-weight:1000;
  margin-bottom:12px;
}
.name-line-v96{
  color:#245a86;
  font-size:clamp(28px,5vw,48px);
  font-weight:1000;
  line-height:1.18;
}
.roleplay-options-v96{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:14px 0;
}
.roleplay-options-v96 button{
  border:5px solid #fff8e6;
  border-radius:24px;
  padding:13px 20px;
  background:linear-gradient(180deg,#f3cf7d,#fff2ca);
  color:#704312;
  font-weight:1000;
  font-size:1.1rem;
  box-shadow:0 10px 24px rgba(36,90,134,.13);
}
@media(max-width:700px){
  .roleplay-options-v96{flex-direction:column;}
}


/* v9.7 story read-aloud inside every level */
.level-story-block-v97{
  background:linear-gradient(180deg,#fff9e9,#eaf9ff);
  border:6px solid #fffdf7;
  box-shadow:0 18px 45px rgba(36,90,134,.16);
}
.level-story-layout-v97{
  display:grid;
  grid-template-columns:minmax(240px,38%) 1fr;
  gap:22px;
  align-items:center;
}
.level-story-layout-v97 img{
  width:100%;
  border-radius:28px;
  border:5px solid #fffdf7;
  box-shadow:0 14px 32px rgba(36,90,134,.16);
}
.story-text-panel-v97{
  padding:16px;
}
.story-count-v97{
  display:inline-flex;
  padding:8px 18px;
  border-radius:999px;
  background:#eaf9ff;
  border:4px solid #b3dff3;
  color:#245a86;
  font-weight:1000;
}
.story-text-panel-v97 h3{
  color:#245a86;
  font-size:clamp(34px,5vw,62px);
  line-height:1.16;
  margin:18px 0 12px;
}
.story-text-panel-v97 p{
  color:#704312;
  font-size:1.25rem;
  font-weight:1000;
}
@media(max-width:820px){
  .level-story-layout-v97{
    grid-template-columns:1fr;
  }
}


/* v9.8 home header logo + music/shop fix */
.brand-logo-v98{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:86px;
  height:86px;
  flex:0 0 86px;
  border-radius:28px;
  background:linear-gradient(180deg,#fff7dc,#f3cf7d);
  border:5px solid #fffdf7;
  color:#245a86;
  font-family:Georgia,serif;
  font-size:30px;
  font-weight:1000;
  line-height:1;
  box-shadow:0 12px 28px rgba(36,90,134,.16);
  overflow:hidden;
  white-space:nowrap;
}
.brand-mark{
  align-items:center !important;
}
.brand-mark strong{
  line-height:1.15;
}
.landing-nav{
  overflow:visible !important;
}
.landing-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}
.landing-actions button{
  white-space:nowrap;
}
@media(max-width:700px){
  .brand-logo-v98{
    width:68px;
    height:68px;
    flex-basis:68px;
    font-size:24px;
    border-radius:22px;
  }
  .landing-nav{
    align-items:flex-start;
  }
}


/* v9.9 animated shell dialogue game */
.shell-game-v99{
  width:100%;
}
.shell-scene-v99{
  display:grid;
  grid-template-columns:1fr minmax(160px,.55fr) 1fr;
  gap:14px;
  align-items:center;
}
.dolphin-side-v99,
.ollie-side-v99{
  background:linear-gradient(180deg,#fff9e9,#eaf9ff);
  border:6px solid #fffdf7;
  border-radius:30px;
  padding:12px;
  box-shadow:0 14px 32px rgba(36,90,134,.14);
}
.dolphin-side-v99 img,
.ollie-side-v99 img{
  width:100%;
  border-radius:22px;
  display:block;
}
.speech-v99{
  margin-top:10px;
  padding:12px;
  border-radius:22px;
  background:#fff8df;
  color:#704312;
  font-weight:1000;
  line-height:1.45;
}
.throw-zone-v99{
  position:relative;
  min-height:230px;
  border:4px dashed rgba(36,90,134,.22);
  border-radius:30px;
  background:rgba(234,249,255,.65);
  overflow:hidden;
}
.shell-counter-v99{
  position:absolute;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  background:#fff8df;
  color:#704312;
  border:4px solid #fffdf7;
  border-radius:999px;
  padding:8px 16px;
  font-weight:1000;
  white-space:nowrap;
}
.ollie-basket-v99{
  margin-top:10px;
  min-height:52px;
  border-radius:22px;
  background:#fff8df;
  color:#704312;
  font-weight:1000;
  padding:10px;
  text-align:center;
}
.basket-shell-v99{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  margin:4px;
  border-radius:50%;
  background:linear-gradient(180deg,#fff,#f3cf7d);
  border:3px solid #c9903e;
  color:#704312;
  font-weight:1000;
}
.flying-shell-v99{
  position:absolute;
  left:4%;
  top:58%;
  width:48px;
  height:48px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#fff,#f3cf7d);
  border:4px solid #c9903e;
  color:#704312;
  font-weight:1000;
  box-shadow:0 12px 24px rgba(36,90,134,.18);
  transition:transform .78s cubic-bezier(.2,.85,.25,1), opacity .78s;
}
.flying-shell-v99.fly-v99{
  transform:translate(190px,-75px) rotate(380deg) scale(1.15);
  opacity:.95;
}
.dialogue-options-v99{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  margin:18px 0 8px;
}
.dialogue-options-v99 button{
  border:5px solid #fff8e6;
  border-radius:24px;
  padding:13px 18px;
  background:linear-gradient(180deg,#f3cf7d,#fff2ca);
  color:#704312;
  font-weight:1000;
  font-size:1.05rem;
  box-shadow:0 10px 24px rgba(36,90,134,.13);
}
@media(max-width:820px){
  .shell-scene-v99{
    grid-template-columns:1fr;
  }
  .throw-zone-v99{
    min-height:120px;
  }
  .flying-shell-v99.fly-v99{
    transform:translate(70vw,-35px) rotate(380deg) scale(1.15);
  }
  .dialogue-options-v99{
    flex-direction:column;
  }
}