/* ===== 基础与主题 ===== */
:root {
  --c-char: #ff6b6b;
  --c-pinyin: #4d96ff;
  --c-english: #ffa62b;
  --c-math: #2ec4b6;
  --ink: #34344a;
  --bg1: #fff5e1;
  --bg2: #ffe3ec;
  --card: #ffffff;
  --shadow: 0 8px 0 rgba(0,0,0,.12), 0 12px 24px rgba(0,0,0,.12);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: 'ZCOOL KuaiLe', 'Baloo 2', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: var(--ink);
  background: linear-gradient(160deg, var(--bg1), var(--bg2) 60%, #e0f7ff);
  min-height: 100vh;
  overflow-x: hidden;
  font-size: 20px;
}
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 999; }

/* ===== 顶栏 ===== */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.app-title { font-size: 28px; font-weight: 800; flex: 1; text-align: center; color: #ff5e7e; text-shadow: 2px 2px 0 #fff; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.home-btn, .medal-btn {
  font-size: 26px; width: 56px; height: 56px; border: none; border-radius: 18px;
  background: #fff; box-shadow: var(--shadow); cursor: pointer; transition: transform .1s;
}
.home-btn:active, .medal-btn:active { transform: scale(.92); }
.points-badge {
  font-size: 22px; background: #ffe066; color: #b5651d; font-weight: 800;
  padding: 8px 16px; border-radius: 18px; box-shadow: var(--shadow); white-space: nowrap;
}

/* ===== 屏幕切换 ===== */
.screen { display: none; padding: 18px 16px 40px; max-width: 980px; margin: 0 auto; animation: fade .3s; }
.screen.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ===== 首页 ===== */
.welcome { font-size: 26px; text-align: center; margin: 18px 0 26px; color: #ff5e7e; }
.module-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.module-card {
  border: none; border-radius: 28px; padding: 22px 16px; color: #fff; cursor: pointer;
  box-shadow: var(--shadow); transition: transform .12s; text-align: center; min-height: 170px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.module-card:active { transform: scale(.95); }
.c-char { background: linear-gradient(160deg, #ff8a8a, var(--c-char)); }
.c-pinyin { background: linear-gradient(160deg, #7eb6ff, var(--c-pinyin)); }
.c-english { background: linear-gradient(160deg, #ffc266, var(--c-english)); }
.c-math { background: linear-gradient(160deg, #5fe0cf, var(--c-math)); }
.mc-emoji { font-size: 56px; line-height: 1; }
.mc-name { font-size: 30px; font-weight: 800; text-shadow: 2px 2px 0 rgba(0,0,0,.12); }
.mc-sub { font-size: 18px; opacity: .95; }

/* ===== 通用：返回/标题 ===== */
.panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.back-btn {
  font-size: 22px; border: none; border-radius: 16px; background: #fff; color: var(--ink);
  padding: 10px 18px; box-shadow: var(--shadow); cursor: pointer;
}
.back-btn:active { transform: scale(.94); }
.panel-title { font-size: 30px; font-weight: 800; color: #ff5e7e; }

/* ===== 卡片网格（汉字/拼音/英语） ===== */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 14px; }
.pick-card {
  border: none; border-radius: 22px; background: var(--card); box-shadow: var(--shadow);
  padding: 14px 8px; cursor: pointer; text-align: center; transition: transform .12s;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.pick-card:active { transform: scale(.93); }
.pick-emoji { font-size: 46px; }
.pick-char { font-size: 40px; line-height: 1; }
.pick-label { font-size: 18px; color: #777; }

/* ===== 汉字分类菜单 & 懒加载 ===== */
.cat-hint { text-align: center; color: #999; font-size: 18px; margin-bottom: 14px; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.cat-card {
  border: none; border-radius: 22px; padding: 20px 12px; color: #fff; cursor: pointer;
  box-shadow: var(--shadow); transition: transform .12s; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 110px;
}
.cat-card:active { transform: scale(.94); }
.cat-card:nth-child(4n+1) { background: linear-gradient(160deg,#ff8a8a,#ff6b6b); }
.cat-card:nth-child(4n+2) { background: linear-gradient(160deg,#7eb6ff,#4d96ff); }
.cat-card:nth-child(4n+3) { background: linear-gradient(160deg,#ffc266,#ffa62b); }
.cat-card:nth-child(4n+4) { background: linear-gradient(160deg,#5fe0cf,#2ec4b6); }
.cat-emoji { font-size: 44px; line-height: 1; }
.cat-name { font-size: 22px; font-weight: 800; text-shadow: 1px 1px 0 rgba(0,0,0,.12); }
.loading { text-align: center; color: #ff5e7e; font-size: 24px; padding: 40px 0; }

/* ===== 汉字搜索 & 拼读分解 ===== */
.char-search { max-width: 560px; margin: 0 auto 14px; }
.char-search input {
  width: 100%; font-family: inherit; font-size: 22px; padding: 12px 16px;
  border: 3px solid #ffb703; border-radius: 18px; outline: none; box-shadow: var(--shadow);
}
.char-count { text-align: center; color: #999; margin-top: 14px; font-size: 18px; }
.decomp { text-align: left; background: #fffdf5; border-radius: 16px; padding: 12px 16px; margin: 10px 0 12px; }
.decomp-row { font-size: 22px; padding: 3px 0; }
.decomp-tag { display: inline-block; min-width: 60px; color: #fff; background: var(--c-pinyin); border-radius: 10px; padding: 1px 10px; margin-right: 10px; font-size: 18px; text-align: center; }
.decomp-spell { color: #ff5e7e; font-weight: 800; margin-top: 6px; font-size: 24px; }

/* ===== 详情弹层 ===== */
.detail {
  background: var(--card); border-radius: 28px; box-shadow: var(--shadow);
  padding: 22px; text-align: center; max-width: 560px; margin: 0 auto;
}
.detail-emoji { font-size: 80px; }
.detail-char { font-size: 44px; margin: 6px 0; }
.writer-box { width: 260px; height: 260px; margin: 10px auto; }
.detail-pinyin { font-size: 28px; color: var(--c-pinyin); font-weight: 800; }
.detail-meaning { font-size: 22px; color: #888; margin-bottom: 14px; }
.big-btn {
  font-family: inherit; font-size: 24px; border: none; border-radius: 20px; color: #fff;
  padding: 14px 26px; margin: 6px; cursor: pointer; box-shadow: var(--shadow); transition: transform .1s;
}
.big-btn:active { transform: scale(.93); }
.btn-sound { background: linear-gradient(160deg,#ffb04d,#ff8a00); }
.btn-write { background: linear-gradient(160deg,#5fd0ff,#2c9cff); }
.btn-next { background: linear-gradient(160deg,#7be495,#23b85f); }

/* ===== 数学闯关 ===== */
.level-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 16px; margin-bottom: 20px; }
.level-card {
  border: none; border-radius: 24px; padding: 18px; color: #fff; cursor: pointer;
  box-shadow: var(--shadow); text-align: center; transition: transform .12s;
}
.level-card:active { transform: scale(.95); }
.lv1 { background: linear-gradient(160deg,#ffb3c1,#ff6b9d); }
.lv2 { background: linear-gradient(160deg,#a0c4ff,#5b8def); }
.lv3 { background: linear-gradient(160deg,#b5ead7,#3fbf8f); }
.level-title { font-size: 28px; font-weight: 800; }
.level-sub { font-size: 18px; opacity: .95; }

.quiz {
  background: var(--card); border-radius: 28px; box-shadow: var(--shadow); padding: 22px; text-align: center;
}
.quiz-progress { font-size: 20px; color: #888; margin-bottom: 10px; }
.counter { font-size: 40px; letter-spacing: 4px; margin: 10px 0; min-height: 48px; line-height: 1.1; word-break: break-word; }
.equation { font-size: 46px; font-weight: 800; margin: 8px 0 18px; }
.eq-op { color: var(--c-math); }
.drop-slot {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 90px; height: 78px; margin: 0 8px; border: 4px dashed #ffb703; border-radius: 18px;
  font-size: 44px; color: #ffb703; vertical-align: middle; background: #fffdf5;
}
.drop-slot.filled { border-style: solid; background: #eafff3; color: #23b85f; }
.choices { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 18px; }
.choice {
  font-family: inherit; font-size: 40px; font-weight: 800; width: 96px; height: 96px;
  border: none; border-radius: 22px; background: linear-gradient(160deg,#ffe28a,#ffc107);
  color: #7a4d00; cursor: grab; box-shadow: var(--shadow); transition: transform .1s;
}
.choice:active { transform: scale(.92); cursor: grabbing; }
.choice.correct { background: linear-gradient(160deg,#9ff0b5,#2ec16b); color: #fff; }
.choice.wrong { animation: shake .4s; background: linear-gradient(160deg,#ffb3b3,#ff5252); color: #fff; }
@keyframes shake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-10px);} 75%{transform:translateX(10px);} }

.feedback { font-size: 30px; font-weight: 800; margin-top: 14px; min-height: 40px; }
.feedback.ok { color: #23b85f; }
.feedback.no { color: #ff5252; }

/* ===== 勋章墙 ===== */
.medal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 18px; }
.medal-item {
  background: var(--card); border-radius: 24px; box-shadow: var(--shadow); padding: 18px; text-align: center;
}
.medal-emoji { font-size: 60px; filter: grayscale(1); opacity: .35; transition: .3s; }
.medal-item.earned .medal-emoji { filter: none; opacity: 1; }
.medal-name { font-size: 22px; margin-top: 6px; }
.medal-item.earned .medal-name { color: #ff8a00; font-weight: 800; }
.medal-tip { font-size: 16px; color: #999; }

/* ===== 鼓励飘字 ===== */
.praise-toast {
  position: fixed; left: 50%; top: 38%; transform: translate(-50%,-50%) scale(.6);
  font-size: 48px; font-weight: 800; color: #fff; z-index: 1000;
  background: radial-gradient(circle, #ff8a00, #ff5e7e); padding: 16px 34px; border-radius: 26px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); opacity: 0; pointer-events: none; white-space: nowrap;
}
.praise-toast.show { animation: pop 1.4s ease forwards; }
@keyframes pop {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.6); }
  20% { opacity: 1; transform: translate(-50%,-50%) scale(1.1); }
  70% { opacity: 1; transform: translate(-50%,-60%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-80%) scale(1); }
}

/* ===== 小屏适配 ===== */
@media (max-width: 480px) {
  body { font-size: 18px; }
  .app-title { font-size: 22px; }
  .module-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .mc-name { font-size: 24px; }
  .equation { font-size: 38px; }
  .choice { width: 80px; height: 80px; font-size: 34px; }
}