/* ============================================================
   识字大冒险 —— 儿童识字游戏样式（平板优先，触控友好）
   ============================================================ */
:root {
  --c-bg: #eaf6ff;
  --c-card: #ffffff;
  --c-primary: #ff8a3d;
  --c-primary-deep: #ff6a2b;
  --c-blue: #42a5f5;
  --c-blue-deep: #1e88e5;
  --c-green: #66bb6a;
  --c-green-deep: #43a047;
  --c-pink: #ff7bac;
  --c-purple: #ab7df0;
  --c-yellow: #ffc107;
  --c-text: #37474f;
  --c-text-light: #78909c;
  --c-danger: #ff5252;
  --radius: 24px;
  --shadow: 0 8px 24px rgba(64, 120, 180, .18);
  --shadow-press: 0 2px 6px rgba(64, 120, 180, .25);
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  position: fixed; inset: 0;
}
#app {
  position: absolute; inset: 0; overflow: hidden;
  display: flex; flex-direction: column;
  background:
    radial-gradient(circle at 12% 8%, rgba(255,193,7,.22), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(66,165,245,.20), transparent 38%),
    radial-gradient(circle at 82% 90%, rgba(255,123,172,.20), transparent 40%),
    linear-gradient(180deg, #eaf6ff 0%, #e3f2fd 100%);
}
#fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 999; }
#modal-root { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }

/* ---------- 汉字字体 ---------- */
.hanzi { font-family: "KaiTi", "STKaiti", "楷体", "PingFang SC", "Noto Sans SC", sans-serif; }
.pinyin { font-family: "Georgia", "Times New Roman", serif; font-style: italic; }

/* ---------- 通用按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; border-radius: 999px;
  font-weight: 800; color: #fff; letter-spacing: 2px;
  background: linear-gradient(180deg, var(--c-primary) 0%, var(--c-primary-deep) 100%);
  box-shadow: 0 6px 0 #d9531e, 0 10px 18px rgba(255,138,61,.35);
  transition: transform .08s ease, box-shadow .08s ease;
  min-height: 58px; padding: 10px 34px; font-size: 20px;
  text-shadow: 0 2px 0 rgba(0,0,0,.12);
}
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #d9531e, 0 4px 8px rgba(255,138,61,.3); }
.btn.big { min-height: 72px; font-size: 26px; padding: 14px 48px; }
.btn.blue { background: linear-gradient(180deg, var(--c-blue) 0%, var(--c-blue-deep) 100%); box-shadow: 0 6px 0 #1565c0, 0 10px 18px rgba(66,165,245,.35); }
.btn.blue:active { box-shadow: 0 2px 0 #1565c0, 0 4px 8px rgba(66,165,245,.3); }
.btn.green { background: linear-gradient(180deg, var(--c-green) 0%, var(--c-green-deep) 100%); box-shadow: 0 6px 0 #2e7d32, 0 10px 18px rgba(102,187,106,.35); }
.btn.green:active { box-shadow: 0 2px 0 #2e7d32, 0 4px 8px rgba(102,187,106,.3); }
.btn.gray { background: linear-gradient(180deg, #b0bec5, #90a4ae); box-shadow: 0 6px 0 #607d8b; }
.btn.ghost {
  background: rgba(255,255,255,.85); color: var(--c-blue-deep);
  box-shadow: 0 4px 0 rgba(120,144,156,.4);
  text-shadow: none;
}
.btn:disabled { filter: grayscale(.7); opacity: .6; }

/* ---------- 屏幕骨架 ---------- */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; }
.screen.slide-in-left { animation: slideInL .32s cubic-bezier(.2,.9,.3,1.05); }
.screen.slide-in-right { animation: slideInR .32s cubic-bezier(.2,.9,.3,1.05); }
@keyframes slideInL { from { transform: translateX(60px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slideInR { from { transform: translateX(-60px); opacity: 0; } to { transform: none; opacity: 1; } }

.topbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 14px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 18px 12px;
}
.topbar .title { font-size: 26px; font-weight: 900; color: var(--c-blue-deep); flex: 1; text-align: center; white-space: nowrap; overflow: hidden; }
.icon-btn {
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  background: #fff; box-shadow: var(--shadow); color: var(--c-blue-deep);
  font-size: 24px; font-weight: 900; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  transition: transform .08s;
}
.icon-btn:active { transform: scale(.9); }

.screen-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 10px 20px 20px; -webkit-overflow-scrolling: touch; }

/* ---------- 底部导航 ---------- */
.tabbar {
  flex: 0 0 auto; display: flex; gap: 8px;
  padding: 10px 16px calc(env(safe-area-inset-bottom, 0px) + 12px);
  background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
  box-shadow: 0 -4px 20px rgba(64,120,180,.12);
}
.tab {
  flex: 1; border: none; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--c-text-light); font-size: 13px; font-weight: 700; padding: 6px 0; border-radius: 14px;
}
.tab svg { width: 30px; height: 30px; }
.tab.active { color: var(--c-blue-deep); background: rgba(33,150,243,.12); }
.tab:active { transform: scale(.92); }

/* ---------- 首页 ---------- */
.home-hero { text-align: center; padding: 10px 0 4px; }
.home-hero .logo { font-size: 40px; font-weight: 900; color: var(--c-primary-deep); text-shadow: 0 3px 0 #ffd9c0, 0 8px 16px rgba(255,138,61,.35); letter-spacing: 4px; }
.home-hero .sub { margin-top: 4px; color: var(--c-text-light); font-weight: 700; font-size: 15px; }
.star-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, #fff8e1, #ffecb3);
  border: 2px solid #ffd54f; color: #f57f17; border-radius: 999px;
  font-weight: 900; font-size: 19px; padding: 8px 20px; box-shadow: var(--shadow);
}
.star-badge svg { width: 24px; height: 24px; }
.star-badge.bounce { animation: pop .4s cubic-bezier(.2,1.6,.4,1); }
@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } }

.book-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.book-card {
  border: none; cursor: pointer; text-align: center;
  border-radius: var(--radius); padding: 18px 10px 14px;
  background: var(--c-card); box-shadow: var(--shadow);
  transition: transform .12s;
  position: relative;
}
.book-card:active { transform: scale(.95); }
.book-card .cover {
  width: 86px; height: 100px; margin: 0 auto; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 34px; font-weight: 900; text-shadow: 0 2px 4px rgba(0,0,0,.2);
  box-shadow: inset -4px -6px 0 rgba(0,0,0,.08), 0 6px 12px rgba(0,0,0,.15);
}
.book-card .bname { margin-top: 10px; font-size: 18px; font-weight: 900; }
.book-card .binfo { font-size: 12px; color: var(--c-text-light); font-weight: 700; margin-top: 2px; }
.book-card .progress { margin: 8px 10px 2px; height: 10px; background: #eceff1; border-radius: 99px; overflow: hidden; }
.book-card .progress > div { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--c-green), #9ccc65); transition: width .4s; }
.book-card .badge-done {
  position: absolute; top: 10px; right: 10px; background: var(--c-green); color: #fff;
  border-radius: 99px; font-size: 11px; font-weight: 900; padding: 3px 10px;
}

.continue-cta { margin-top: 16px; text-align: center; }

/* ---------- 单元列表 ---------- */
.unit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.unit-card {
  border: none; cursor: pointer; border-radius: 20px; padding: 14px 16px;
  background: var(--c-card); box-shadow: var(--shadow); text-align: left;
  transition: transform .12s; position: relative; overflow: hidden;
}
.unit-card:active { transform: scale(.96); }
.unit-card .uname { font-size: 17px; font-weight: 900; color: var(--c-blue-deep); }
.unit-card .uinfos { font-size: 12px; color: var(--c-text-light); font-weight: 700; margin-top: 2px; }
.unit-card .uchars { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.unit-card .uchars span {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border-radius: 9px; font-size: 19px; background: #f5faff; color: var(--c-text);
  border: 1.5px solid #dbeeff;
}
.unit-card .uchars span.done { background: #e8f5e9; border-color: #a5d6a7; color: #2e7d32; }
.unit-card .ustar { position: absolute; top: 10px; right: 12px; display: flex; align-items: center; gap: 4px; color: #f9a825; font-weight: 900; font-size: 14px; }
.unit-card .ustar svg { width: 18px; height: 18px; }
.unit-card.recommend { outline: 3px dashed var(--c-primary); outline-offset: -6px; }

/* ---------- 学习流程 ---------- */
.learn-stage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.stage-top { display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 10px; }
.stage-title { flex: 1; text-align: center; font-size: 21px; font-weight: 900; color: var(--c-blue-deep); }
.stage-sub { font-size: 14px; color: var(--c-text-light); font-weight: 700; text-align: center; margin-top: 2px; }
.stage-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 10px 24px calc(env(safe-area-inset-bottom,0px) + 16px); overflow-y: auto; }
.stage-dots { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }
.stage-dots i { width: 10px; height: 10px; border-radius: 50%; background: #cfd8dc; }
.stage-dots i.on { background: var(--c-primary); transform: scale(1.25); }

/* 认字卡 */
.char-card {
  background: var(--c-card); border-radius: 32px; box-shadow: var(--shadow);
  padding: 22px 40px 26px; text-align: center; position: relative;
  animation: cardIn .45s cubic-bezier(.2,1.4,.4,1);
  max-width: 92vw;
}
@keyframes cardIn { from { transform: scale(.5) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }
.char-card .big-char { font-size: clamp(120px, 32vmin, 190px); line-height: 1.1; color: #263238; }
.char-card .big-py { font-size: 30px; color: var(--c-primary-deep); font-weight: 700; }
.char-card .meta { margin-top: 6px; color: var(--c-text-light); font-size: 15px; font-weight: 700; display: flex; gap: 16px; justify-content: center; }
.char-card .meta b { color: var(--c-text); }
.word-chips { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; max-width: 560px; }
.word-chip {
  border: none; cursor: pointer; background: linear-gradient(180deg, #fff, #f3f9ff);
  border-radius: 18px; padding: 12px 22px; font-size: 26px; font-weight: 700;
  box-shadow: var(--shadow-press); color: var(--c-text);
  transition: transform .1s;
}
.word-chip:active { transform: scale(.92); }
.word-chip .target { color: var(--c-primary-deep); }
.speaker-btn {
  border: none; cursor: pointer; width: 74px; height: 74px; border-radius: 50%;
  background: linear-gradient(180deg, var(--c-blue), var(--c-blue-deep));
  color: #fff; font-size: 32px; box-shadow: 0 6px 0 #1565c0, 0 10px 18px rgba(66,165,245,.4);
  display: flex; align-items: center; justify-content: center;
  transition: transform .1s;
}
.speaker-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #1565c0; }
.speaker-btn.speaking { animation: pulse .6s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 6px 0 #1565c0, 0 0 0 0 rgba(66,165,245,.5); } 50% { box-shadow: 0 6px 0 #1565c0, 0 0 0 16px rgba(66,165,245,0); } }

/* 选项答题 */
.option-grid { display: grid; grid-template-columns: repeat(2, minmax(130px, 190px)); gap: 16px; justify-content: center; }
.option-btn {
  border: none; cursor: pointer; border-radius: 22px; min-height: 96px;
  background: var(--c-card); box-shadow: var(--shadow);
  font-size: 34px; font-weight: 900; color: var(--c-text);
  display: flex; align-items: center; justify-content: center; padding: 10px;
  transition: transform .1s, background .15s;
}
.option-btn.py { font-size: 28px; font-style: italic; font-family: Georgia, serif; color: var(--c-blue-deep); }
.option-btn:active { transform: scale(.94); }
.option-btn.correct { background: linear-gradient(180deg, #81c784, #66bb6a); color: #fff; animation: pop .4s; }
.option-btn.wrong { background: linear-gradient(180deg, #e57373, #ef5350); color: #fff; animation: shake .4s; }
.option-btn.dim { opacity: .35; pointer-events: none; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

/* 写字 */
.hw-wrap { background: var(--c-card); border-radius: 32px; box-shadow: var(--shadow); padding: 10px; position: relative; }
.hw-hint { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 12px; color: var(--c-text-light); font-weight: 700; font-size: 14px; pointer-events: none; opacity: .8; }
.hw-count { position: absolute; top: 14px; right: 20px; font-weight: 900; color: var(--c-primary); font-size: 18px; }

/* 泡泡游戏 */
.bubble-field { position: absolute; inset: 0; overflow: hidden; }
.bubble {
  position: absolute; border: none; cursor: pointer; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: 900; color: #fff;
  width: 88px; height: 88px; text-shadow: 0 2px 4px rgba(0,0,0,.25);
  box-shadow: inset -5px -8px 14px rgba(0,0,0,.15), inset 4px 6px 10px rgba(255,255,255,.4), 0 8px 16px rgba(0,0,0,.15);
  animation: floaty 5s ease-in-out infinite;
}
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(2deg); } }
.bubble.pop { animation: bubblePop .35s forwards; }
@keyframes bubblePop { 50% { transform: scale(1.35); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
.bubble.miss { animation: bubbleMiss .35s forwards; }
@keyframes bubbleMiss { 50% { transform: scale(.85); } 100% { transform: scale(0); opacity: 0; } }

/* 僵尸来袭（植物大战僵尸版识字） */
.pz-field { flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden;
  border-radius: 22px; box-shadow: var(--shadow);
  background: linear-gradient(160deg, #a8d66f 0%, #8cc84f 55%, #7cb84a 100%);
  margin-bottom: 10px; }
.pz-field.hit::after { content: ''; position: absolute; inset: 0; background: rgba(255, 82, 82, .28); pointer-events: none; z-index: 9; }
.pz-lanes { position: absolute; top: 132px; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; }
.pz-lane { flex: 1; position: relative; border-bottom: 2px dashed rgba(255, 255, 255, .35); }
.pz-lane:last-child { border-bottom: none; }
.pz-lane.alt { background: rgba(255, 255, 255, .08); }
.pz-base { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 8px; z-index: 2; }
.pz-sun { width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff59d, #ffb300);
  box-shadow: 0 0 14px rgba(255, 213, 79, .8); }
.pz-shooter { width: 40px; height: 40px; border-radius: 46% 46% 46% 6px; position: relative;
  background: radial-gradient(circle at 35% 32%, #c5e1a5, #558b2f 78%);
  box-shadow: inset -4px -6px 8px rgba(0, 0, 0, .18); }
.pz-shooter i { position: absolute; right: -13px; top: 36%; width: 16px; height: 13px; border-radius: 0 9px 9px 0; background: #7cb342; }
.pz-zombie { position: absolute; left: 100%; top: 4%; width: 84px; margin-left: -6px;
  display: flex; flex-direction: column; align-items: center; will-change: transform; }
.pz-plate { position: relative; width: 78px; height: 78px; border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #dce8c4, #bccc9f 70%);
  border: 4px solid #8a9a7e; color: #37474f; font-size: 42px; font-weight: 900;
  display: flex; align-items: center; justify-content: center; padding-top: 10px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .12); white-space: nowrap; z-index: 2; }
.pz-plate::before, .pz-plate::after { content: ''; position: absolute; top: 14px; width: 7px; height: 7px;
  border-radius: 50%; background: #37474f; }
.pz-plate::before { left: 16px; }
.pz-plate::after { right: 16px; }
.pz-z { width: 30px; height: 40px; position: relative; margin-top: -8px;
  background: linear-gradient(#a4b39c, #7d8f75); border-radius: 8px 8px 4px 4px;
  animation: pz-walk .45s ease-in-out infinite alternate; }
.pz-z::before { content: ''; position: absolute; top: -8px; left: 50%; margin-left: -12px;
  width: 24px; height: 10px; background: #97a88b; border-radius: 6px; }
.pz-z::after { content: ''; position: absolute; top: 6px; left: -17px; width: 18px; height: 7px;
  background: #a4b39c; border-radius: 4px; transform: rotate(-9deg); }
@keyframes pz-walk { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-3px) rotate(3deg); } }
.pz-z.shake { animation: pz-shake .35s; }
@keyframes pz-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
.pz-zombie.dead .pz-z { animation: pz-die .45s forwards; }
@keyframes pz-die { to { transform: rotate(90deg) translateY(20px); opacity: 0; } }
.pz-zombie.leaked .pz-z { animation: pz-die .35s forwards; }
.pz-pea { position: absolute; top: 58%; margin-top: -9px; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #d0e8a8, #558b2f); box-shadow: 0 0 8px rgba(156, 204, 101, .9);
  will-change: transform; z-index: 3; }
.pz-hud { position: absolute; top: 8px; left: 0; right: 0; display: flex; justify-content: space-between;
  align-items: center; padding: 0 14px; pointer-events: none; z-index: 8; }
.pz-hearts { display: flex; gap: 4px; background: rgba(255, 255, 255, .75); border-radius: 999px; padding: 5px 10px; }
.pz-hearts svg { width: 24px; height: 24px; }
.pz-kills { background: rgba(55, 71, 79, .82); color: #fff; font-weight: 900; font-size: 16px;
  padding: 7px 14px; border-radius: 999px; display: flex; align-items: center; gap: 7px; }
.pz-kills svg { width: 20px; height: 20px; color: #aed581; }
.pz-prompt { position: absolute; top: 52px; left: 50%; transform: translateX(-50%);
  background: rgba(255, 253, 240, .94); border-radius: 18px; box-shadow: var(--shadow);
  padding: 8px 16px; display: flex; align-items: center; gap: 14px; z-index: 8; max-width: 92%; }
.pz-txt { text-align: left; }
.pz-pt { font-size: 12px; font-weight: 900; color: #78909c; white-space: nowrap; }
.pz-big { font-size: 30px; font-weight: 900; color: var(--c-blue-deep); margin-top: 1px; white-space: nowrap; }
.pz-blank { display: inline-block; min-width: 34px; height: 34px; line-height: 34px;
  background: #ffcc80; border-radius: 8px; color: #e65100; margin: 0 2px; padding: 0 4px; }
.pz-spk { width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--c-primary); color: #fff; display: inline-flex; align-items: center;
  justify-content: center; flex: 0 0 auto; transition: transform .08s; }
.pz-spk:active { transform: scale(.88); }
.pz-spk svg { width: 22px; height: 22px; }

/* 记忆翻牌 */
.mem-grid { display: grid; grid-template-columns: repeat(4, minmax(80px, 110px)); gap: 12px; justify-content: center; }
.mem-card {
  border: none; cursor: pointer; perspective: 600px; background: transparent; padding: 0;
  width: 100%; aspect-ratio: 3/3.4;
}
.mem-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .35s; }
.mem-card.flipped .mem-inner { transform: rotateY(180deg); }
.mem-face {
  position: absolute; inset: 0; border-radius: 18px; backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(24px, 6vmin, 38px); font-weight: 900;
  box-shadow: var(--shadow-press);
}
.mem-front { background: linear-gradient(145deg, var(--c-blue), var(--c-blue-deep)); color: rgba(255,255,255,.85); font-size: 30px; }
.mem-back { background: #fff; transform: rotateY(180deg); color: var(--c-text); }
.mem-back.py { color: var(--c-primary-deep); font-style: italic; font-family: Georgia, serif; }
.mem-card.matched .mem-back { background: #e8f5e9; color: #2e7d32; box-shadow: 0 0 0 3px #81c784; }
.mem-card.matched { animation: pop .5s; }

/* 结果面板 */
.result-panel { background: #fff; border-radius: 32px; padding: 30px 40px; text-align: center; box-shadow: var(--shadow); animation: cardIn .5s cubic-bezier(.2,1.4,.4,1); }
.result-panel h2 { font-size: 32px; color: var(--c-primary-deep); margin-bottom: 8px; }
.result-panel .rstars { display: flex; gap: 10px; justify-content: center; margin: 12px 0; }
.result-panel .rstars svg { width: 52px; height: 52px; }
.result-panel .rstars svg:nth-child(2) { width: 66px; height: 66px; }

/* 生字本 */
.charlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.char-tile {
  border: none; cursor: pointer; background: #fff; border-radius: 14px;
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 34px; box-shadow: var(--shadow-press); color: var(--c-text); position: relative;
}
.char-tile .mini-star { position: absolute; top: 3px; right: 5px; font-size: 11px; color: #f9a825; }
.char-tile.locked { background: #eceff1; color: #b0bec5; }

/* 弹窗 */
.modal-mask {
  position: fixed; inset: 0; background: rgba(38,50,56,.55); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; z-index: 1000; pointer-events: auto;
  animation: fadeIn .2s;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: #fff; border-radius: 28px; padding: 26px 30px; max-width: min(560px, 92vw);
  max-height: 86vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3);
  animation: cardIn .35s cubic-bezier(.2,1.4,.4,1);
}

/* 游戏中心 */
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.game-card {
  border: none; cursor: pointer; border-radius: 24px; padding: 22px 12px 16px;
  background: #fff; box-shadow: var(--shadow); text-align: center; transition: transform .12s;
}
.game-card:active { transform: scale(.94); }
.game-card .gicon { width: 84px; height: 84px; margin: 0 auto; border-radius: 26px; display: flex; align-items: center; justify-content: center; }
.game-card .gicon svg { width: 48px; height: 48px; }
.game-card .gname { font-size: 19px; font-weight: 900; margin-top: 10px; }
.game-card .gdesc { font-size: 12.5px; color: var(--c-text-light); font-weight: 700; margin-top: 3px; }

/* 复习内的小模块 */
.lesson-group-title { font-size: 17px; font-weight: 900; color: var(--c-blue-deep); margin: 18px 0 10px; display: flex; align-items: center; gap: 8px; }
.lesson-group-title::before { content: ''; width: 8px; height: 20px; background: var(--c-primary); border-radius: 4px; }

/* 组词挖空 */
.word-blank {
  font-size: clamp(44px, 10vmin, 64px); font-weight: 900; color: var(--c-text);
  background: #fff; border-radius: 24px; padding: 18px 34px; box-shadow: var(--shadow);
}
.word-blank .blank {
  display: inline-block; min-width: 1.1em; text-align: center; color: var(--c-primary-deep);
  border-bottom: 5px dotted var(--c-primary); line-height: 1.05;
}
.word-blank.filled .blank { color: var(--c-green-deep); border-bottom-color: var(--c-green); animation: pop .4s; }

/* 反馈提示 */
.toast {
  position: fixed; left: 50%; top: 18%; transform: translateX(-50%);
  background: rgba(38,50,56,.92); color: #fff; font-size: 20px; font-weight: 800;
  padding: 14px 30px; border-radius: 999px; z-index: 1200; pointer-events: none;
  animation: toastIn 1.6s forwards;
}
@keyframes toastIn { 0% { opacity: 0; transform: translate(-50%, 20px); } 12% { opacity: 1; transform: translate(-50%, 0); } 80% { opacity: 1; } 100% { opacity: 0; } }

/* 响应式 */
@media (max-width: 620px) {
  .book-grid { grid-template-columns: repeat(2, 1fr); }
  .mem-grid { grid-template-columns: repeat(4, minmax(64px, 82px)); }
  .option-grid { grid-template-columns: repeat(2, minmax(110px, 150px)); }
}
@media (orientation: landscape) and (max-height: 560px) {
  .char-card .big-char { font-size: clamp(90px, 30vmin, 130px); }
  .home-hero .logo { font-size: 30px; }
}

/* ============================================================
   卡通游戏风格主题（参考洪恩/拼音乐园：奶油底+圆点纹理+厚描边卡片+积木Logo）
   ============================================================ */
#app {
  background:
    radial-gradient(circle at 10% 4%, rgba(255,193,7,.16), transparent 30%),
    radial-gradient(circle at 90% 8%, rgba(66,165,245,.15), transparent 32%),
    radial-gradient(circle at 84% 92%, rgba(255,123,172,.15), transparent 34%),
    radial-gradient(rgba(171,125,240,.14) 21%, transparent 22%) 0 0/34px 34px,
    linear-gradient(180deg, #fff9ec 0%, #fff3da 100%);
}
.topbar { background: linear-gradient(180deg, #fff9ec, #fff2d2); border-bottom: 3px solid rgba(126,87,194,.16); }
.topbar .title { color: var(--c-purple); text-shadow: 0 2px 0 rgba(255,255,255,.8); letter-spacing: 2px; }
.tabbar { background: linear-gradient(180deg, #fffdf5, #fff3d9); border-top: 3px solid rgba(126,87,194,.16); }

/* 积木 Logo */
.home-hero .logo {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  font-size: 0; color: transparent; text-shadow: none; background: none; margin: 6px 0 2px;
}
.logo-block {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 72px; font-size: 42px; font-weight: 900; color: #fff;
  border-radius: 20px; border: 3px solid #ffffff;
  box-shadow: 0 6px 0 rgba(94,75,138,.28), 0 12px 20px rgba(94,75,138,.22);
  text-shadow: 0 3px 0 rgba(0,0,0,.18);
  transform: rotate(-3deg);
}
.logo-block:nth-child(2n) { transform: rotate(3deg) translateY(5px); }
.logo-block:nth-child(3n) { transform: rotate(-2deg) translateY(-3px); }
.logo-block:nth-child(5n) { transform: rotate(4deg) translateY(6px); }
.logo-block:active { transform: scale(.92) rotate(0deg); }

/* 厚描边卡片 + 硬投影（糖果游戏感） */
.book-card, .unit-card, .game-card, .char-card, .mem-card,
.result-panel, .word-blank, .bubble, .hw-wrap, .pz-prompt, .star-badge {
  border: 3px solid #b39ddb;
  box-shadow: 0 7px 0 rgba(126,87,194,.25), 0 14px 24px rgba(126,87,194,.18);
}
.unit-card.done { border-color: #81c784; }
.option-btn {
  border: 3px solid #b39ddb;
  box-shadow: 0 5px 0 rgba(126,87,194,.22);
}
.char-tile { border: 2px solid #b39ddb; box-shadow: 0 4px 0 rgba(126,87,194,.2); }

/* 按钮统一加白描边（贴纸感） */
.btn, .option-btn, .tab, .icon-btn, .speaker-btn, .word-chip {
  border: 3px solid #ffffff;
}
.btn:active, .option-btn:active, .icon-btn:active, .speaker-btn:active, .word-chip:active { transform: translateY(3px) scale(.98); }
.tab { border-radius: 18px; }
.tab.active { border-color: #fff; }
.pz-py2 { font-size: 22px; font-weight: 800; color: var(--c-purple); margin-top: 2px; }
/* 书写字区：禁触摸滚动劫持/长按选中（移动端书写的生命线） */
.hw-wrap, .hw-wrap > div { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* 游戏中心年级筛选条 */
.filter-bar { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; -webkit-overflow-scrolling: touch; }
.filter-bar::-webkit-scrollbar { display: none; }
.fchip { flex: 0 0 auto; padding: 8px 18px; border-radius: 999px; border: 2px solid #d9b8ff;
  background: #fff; color: #7c4dff; font-size: 15px; font-weight: bold; cursor: pointer; }
.fchip.on { background: linear-gradient(145deg, #9c6bff, #7c4dff); color: #fff; border-color: #7c4dff; box-shadow: 0 3px 0 #5e35b1; }