/* 音标乐园 · 课程页组件样式
   提取并泛化自 ipa-lesson-ae.html，供 lesson.html 模板对全部 48 课复用 */

.lesson-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-family:var(--ui);font-size:12.5px;color:#82715e}
.lesson-nav a{padding:4px 2px}
.lesson-nav a:hover{color:var(--coral-deep)}

/* ---------- 1. 音标英雄卡 ---------- */
.hero{background:linear-gradient(160deg,#fff3d6, #ffe3df);text-align:center;padding:26px 18px 24px}
.hero .sym{font-family:var(--en);font-weight:800;font-size:96px;line-height:1;color:var(--coral-deep);
  text-shadow:4px 4px 0 var(--sun);display:inline-block;transform:rotate(-3deg)}
.hero .kind{font-family:var(--ui);font-size:13px;letter-spacing:.1em;color:#8a6a2c;margin-top:4px}
.howto{display:flex;gap:14px;align-items:center;background:#fffdf7;border:2.5px dashed var(--teal);
  border-radius:16px;padding:12px 14px;margin-top:16px;text-align:left}
.howto .face{font-size:42px;flex:none}
.howto p{font-size:14px;line-height:1.7}
.howto b{color:var(--teal-deep)}

/* ---------- 2. 拼写出口 ---------- */
.spellmap{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.spell-tile{border:3px solid var(--ink);border-radius:16px;padding:12px 16px;text-align:center;min-width:120px}
.spell-tile.main{background:#e6fbf8}
.spell-tile.rare{background:#fff4f3;opacity:.92}
.spell-tile .letter{font-family:var(--en);font-weight:800;font-size:34px;line-height:1}
.spell-tile.main .letter{color:var(--teal-deep)}
.spell-tile.rare .letter{color:var(--coral-deep)}
.spell-tile .freq{font-family:var(--ui);font-size:11px;letter-spacing:.06em;color:#82715e;margin-top:4px}
.spell-tile .eg{font-size:13px;margin-top:6px}
.spell-tile .eg b{color:var(--coral-deep)}
.spell-note{font-size:12.5px;color:#82715e;text-align:center;margin-top:12px;line-height:1.6}

/* ---------- 3. 分级词库 ---------- */
.levels{display:flex;flex-direction:column;gap:14px}
.level{border:3px solid var(--ink);border-radius:18px;overflow:hidden}
.level-head{display:flex;align-items:center;gap:10px;padding:10px 14px;color:#fff;font-weight:900;font-size:15px}
.level-head.c0{background:var(--teal)}
.level-head.c1{background:var(--sky)}
.level-head.c2{background:var(--coral)}
.level-head.c3{background:var(--sun);color:var(--ink)}
.level-head .stars{margin-left:auto;font-size:15px;letter-spacing:2px}
.level-body{padding:14px;background:#fffdf7}
.level-tip{font-size:12.5px;color:#82715e;margin-bottom:10px}
.words{display:flex;flex-wrap:wrap;gap:10px}
.words .chip .zh{font-family:var(--zh);font-weight:500;font-size:11px;color:#82715e;display:block;line-height:1.2;margin-top:1px}
.words .chip.done{background:#e6fbf8;border-color:var(--teal-deep)}

/* ---------- 4. 记忆句 ---------- */
.mnemo{background:linear-gradient(150deg,#fff3d6,#ffefef);border:3px solid var(--ink);border-radius:18px;
  padding:18px 16px;text-align:center}
.mnemo .pic{font-size:44px;letter-spacing:6px;margin-bottom:8px}
.mnemo .sen{font-family:var(--en);font-weight:800;font-size:22px;line-height:1.45}
.mnemo .sen b{color:var(--coral-deep);text-decoration:underline wavy var(--sun) 2.5px;text-underline-offset:4px}
.mnemo .cn{font-size:13px;color:#82715e;margin-top:8px}
.ipa-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.ipa-tile{background:#fff;border:2.5px solid var(--ink);border-radius:12px;padding:6px 10px;cursor:pointer;
  box-shadow:0 3px 0 var(--shadow);transition:transform .06s, box-shadow .06s;user-select:none}
.ipa-tile:active{transform:translateY(2px);box-shadow:0 1px 0 var(--shadow)}
.ipa-tile .w{font-family:var(--en);font-weight:700;font-size:16px;line-height:1.2}
.ipa-tile .ipa{font-family:var(--en);font-weight:600;font-size:14px;color:#82715e;line-height:1.2}
.ipa-tile .ipa b{color:var(--coral-deep);font-weight:800}
.ipa-tile.hit{background:#fff3d6}

/* ---------- 5. 对比辨音 ---------- */
.contrast{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.col{border:3px solid var(--ink);border-radius:16px;overflow:hidden}
.col .head{font-family:var(--en);font-weight:800;font-size:24px;color:#fff;text-align:center;padding:8px}
.col.s .head{background:var(--teal)}
.col.l .head{background:var(--coral)}
.col .body{padding:12px;display:flex;flex-direction:column;gap:8px;background:#fffdf7;align-items:center}
.contrast .chip{font-size:17px;width:100%;text-align:center}

/* ---------- 6. 闯关 ---------- */
.game-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.round-label{font-family:var(--ui);font-size:13px;color:#82715e;flex:none}
.quiz{text-align:center}
.quiz .ask{font-size:15px;font-weight:700;margin-bottom:6px}
.quiz .hintline{font-size:12px;color:#82715e;margin-bottom:12px}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:380px;margin:0 auto}
.choice{font-family:var(--en);font-weight:800;font-size:24px;background:#fff;border:3px solid var(--ink);
  border-radius:16px;padding:16px 8px;cursor:pointer;box-shadow:0 5px 0 var(--shadow);transition:transform .06s, box-shadow .06s}
.choice:active{transform:translateY(4px);box-shadow:0 1px 0 var(--shadow)}
.choice.right{background:#d8f8ee;border-color:var(--teal-deep)}
.choice.wrong{background:#ffe0dd;border-color:var(--coral-deep)}
.choice:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.choice .cipa{display:block;font-size:14px;font-weight:600;color:#82715e;margin-top:4px;line-height:1.2}
.choice .cipa b{color:var(--coral-deep);font-weight:800}
.feedback{min-height:26px;font-size:15px;font-weight:900;margin-top:12px}
.feedback.ok{color:var(--teal-deep)}
.feedback.no{color:var(--coral-deep)}
.result{text-align:center;padding:10px 0}
.result .big-stars{font-size:46px;letter-spacing:6px;margin-bottom:6px}
.result h3{font-size:20px;font-weight:900;margin-bottom:4px}
.result p{font-size:14px;color:#82715e}
.game-placeholder{text-align:center;padding:18px;color:#82715e;font-size:13.5px;line-height:1.7}
.game-placeholder .big{font-size:34px;margin-bottom:8px}

@media (max-width:420px){
  .hero .sym{font-size:78px}
  .choices{grid-template-columns:1fr 1fr}
  .contrast{grid-template-columns:1fr 1fr}
}