:root {
  --primary: #8B4513;
  --primary-light: #A0522D;
  --accent: #DAA520;
  --accent-light: #F0D060;
  --bg: #FFF8F0;
  --bg-card: #FFFFFF;
  --text: #3E2723;
  --text-muted: #8D6E63;
  --success: #4CAF50;
  --success-bg: #E8F5E9;
  --error: #F44336;
  --error-bg: #FFEBEE;
  --border: #E8D5C4;
  --shadow: 0 2px 8px rgba(139, 69, 19, 0.08);
  --radius: 8px;
  --font: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
img, canvas, video, svg { max-width: 100%; height: auto; display: block; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden;
}

#app {
  min-height: 100vh;
}

.page { display: none; }
.page.active { display: block; }

.container {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px;
}

/* Logo */
.logo {
  text-align: center;
  padding: 40px 0 32px;
}

.logo-seal {
  display: inline-block;
  width: 64px;
  height: 64px;
  line-height: 64px;
  background: var(--error);
  color: #fff;
  font-size: 28px;
  font-weight: bold;
  border-radius: 4px;
  margin-bottom: 12px;
  transform: rotate(-3deg);
}

.logo h1 {
  font-size: 32px;
  color: var(--primary);
  margin-bottom: 4px;
}

.subtitle {
  color: var(--text-muted);
  font-size: 15px;
}

/* Cards */
.card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}

.card h2 {
  font-size: 18px;
  color: var(--primary);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent);
}

.card h3 {
  font-size: 15px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.rules-card ul {
  list-style: none;
  padding: 0;
}

.rules-card li {
  padding: 4px 0;
  font-size: 13px;
  color: var(--text-muted);
}

.rules-card li::before {
  content: '· ';
  color: var(--accent);
  font-weight: bold;
}

/* Form */
.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.required { color: var(--error); }

.form-group input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 15px;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  transition: border-color 0.2s;
}

.class-input-wrap { display: flex; align-items: center; }
.class-input-wrap input { flex: 1; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px 0 0 6px; font-size: 15px; font-family: var(--font); color: var(--text); background: var(--bg); }
.class-input-wrap input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(218,165,32,0.1); }
.class-suffix { padding: 10px 14px; border: 1px solid var(--border); border-left: none; border-radius: 0 6px 6px 0; background: var(--bg); font-size: 15px; color: var(--text-muted); }
.form-group select { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 15px; font-family: var(--font); color: var(--text); background: var(--bg); transition: border-color 0.2s; appearance: none; cursor: pointer; }
.form-group input:focus, .form-group select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(218, 165, 32, 0.1);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-primary:hover:not(:disabled) {
  background: var(--primary-light);
}

.btn-secondary {
  background: var(--accent);
  color: var(--text);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--accent-light);
}

.btn-outline {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--border);
}

.btn-outline:hover:not(:disabled) {
  background: var(--bg);
}

.btn-ghost {
  background: transparent;
  color: var(--text-muted, #9a8c7a);
  border: 1px dashed var(--border, rgba(0,0,0,0.18));
}
.btn-ghost:hover:not(:disabled) {
  background: var(--bg, #fafafa);
  color: var(--text, #333);
}

/* 学习页「学习历史 / 学习报告」切换按钮的选中态 */
.learn-toggle.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(139, 69, 19, 0.28);
}
.learn-toggle.active:hover:not(:disabled) {
  background: var(--primary-light);
  border-color: var(--primary-light);
}

.btn-large {
  padding: 12px 32px;
  font-size: 16px;
  flex: 1;
  min-width: 140px;
}

.btn-block {
  flex: 1 1 100%;
}

/* 账号门禁模态框 */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(62, 39, 35, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 16px;
}
.modal-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 20px;
  width: 100%;
  max-width: 380px;
  max-height: 92vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 12px 40px rgba(139, 69, 19, 0.25);
  animation: modal-pop 0.22s ease-out;
}
@keyframes modal-pop {
  from { transform: translateY(12px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.modal-box h3 {
  margin: 0 0 14px;
  font-size: 18px;
  color: var(--primary);
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.04);
  font-size: 22px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease;
}
.modal-close:hover { color: var(--primary); }
.gate-error {
  background: var(--error-bg);
  color: var(--error);
  padding: 8px 10px;
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: 13px;
}
#account-gate .form-group { margin-bottom: 12px; }

/* 学习模块：账号识别表单 */
.identity-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 320px;
  margin: 0 auto;
}

/* 学习模块：历史标记记录 */
.history-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border, #E8D5C4);
}
.history-item:last-child {
  border-bottom: none;
}
.hist-word {
  font-weight: 600;
  font-size: 14px;
  color: var(--text, #333);
}
.level-badge {
  font-size: 12px;
  padding: 1px 10px;
  border-radius: 10px;
  color: #fff;
  white-space: nowrap;
}
.lv-mastered { background: #4CAF50; }
.lv-familiar { background: #FF9800; }
.lv-unfamiliar { background: #9E9E9E; }
.hist-time {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted, #999);
}

/* 学习仪表盘 */
.learn-dash { display: flex; flex-direction: column; gap: 18px; }
.dash-ring-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ring {
  width: 140px; height: 140px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.4s ease;
}
.ring-center {
  width: 104px; height: 104px; border-radius: 50%;
  background: var(--card-bg, #fff);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}
.ring-num { font-size: 30px; font-weight: 700; color: var(--text, #333); line-height: 1; }
.ring-label { font-size: 11px; color: var(--text-muted, #999); margin-top: 4px; }
.ring-legend { display: flex; flex-direction: column; gap: 8px; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.legend-label { color: var(--text-muted, #666); }
.legend-count { margin-left: auto; font-weight: 600; color: var(--text, #333); }
.dash-section { border-top: 1px solid var(--border, #EEE); padding-top: 14px; }
.dash-title { font-size: 14px; font-weight: 600; color: var(--text, #333); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.due-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: #FF5722; color: #fff; font-size: 12px; font-weight: 700;
}
.due-list { display: flex; flex-direction: column; gap: 8px; }
.due-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.due-word { font-weight: 600; font-size: 14px; }
.due-lv { font-size: 12px; color: var(--text-muted, #999); }
.due-item .btn { margin-left: auto; }
.dash-empty { font-size: 13px; color: var(--text-muted, #999); padding: 8px 0; }

/* 折叠面板 */
.dash-section.collapsible { cursor: pointer; user-select: none; }
.collapsible-body { overflow: hidden; }
.dash-section.collapsed .collapsible-body { display: none; }
.dash-title .collapse-arrow { margin-left: auto; font-size: 12px; transition: transform 0.2s; display: inline-block; }
.dash-section.collapsed .collapse-arrow { transform: rotate(-90deg); }

/* ===================== 宠物养成 ===================== */
.pet-hero {
  position: relative;
  background: linear-gradient(180deg, rgba(139,69,19,0.10), rgba(139,69,19,0.03));
  border: 1px solid rgba(139,69,19,0.12);
  border-radius: 18px;
  padding: 14px 12px 16px;
  margin-bottom: 16px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(139,69,19,0.10);
}
.pet-hero .pet-stage { margin: 0; }
.pet-hero .pet-level-row { justify-content: center; margin-bottom: 0; }
.pet-hero .pet-buff { margin-left: 0; }
.pet-hero .pet-name-tag { margin: 6px 0 8px; }
.pet-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 200px; margin: 6px 0 2px; }
.pet-stage-glow {
  position: absolute; width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(139,69,19,0.20), transparent 70%);
  animation: petGlow 4s ease-in-out infinite;
}
.pet-sprite {
  position: relative; width: 200px; height: 200px;
  animation: petBob 3.2s ease-in-out infinite; transform-origin: center bottom;
}
.pet-sprite.eating { animation: petEat 0.6s ease; }
.ink-svg { width: 200px; height: 200px; overflow: visible; }
.pet-eye { transform-origin: center; animation: petBlink 4.5s infinite; }
.pet-halo { transform-origin: center; animation: petHalo 3s ease-in-out infinite; }
.pet-arm { transform-origin: top center; animation: petWave 3s ease-in-out infinite; }
.pet-name-tag { text-align: center; font-size: 18px; font-weight: 700; color: var(--primary); margin-bottom: 8px; }

@keyframes petBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes petBlink { 0%,92%,100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
@keyframes petEat { 0% { transform: scale(1); } 30% { transform: scale(1.12) translateY(-4px); } 60% { transform: scale(0.96); } 100% { transform: scale(1); } }
@keyframes petGlow { 0%,100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes petHalo { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes petWave { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(8deg); } }

.pet-info, .pet-actions, .pet-rename { box-shadow: 0 6px 20px rgba(139,69,19,0.08); }
.pet-info .pet-level-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pet-level-badge { background: var(--primary); color: #fff; padding: 3px 10px; border-radius: 20px; font-size: 13px; }
.pet-level-badge b { font-size: 15px; }
.pet-form-name { font-weight: 600; color: var(--text); font-size: 15px; }
.pet-buff { margin-left: auto; font-size: 12px; color: var(--text-muted); padding: 2px 8px; border-radius: 12px; background: rgba(0,0,0,0.05); white-space: nowrap; }
.pet-buff.active { color: #fff; background: #E6A817; font-weight: 600; }

.pet-bar { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.pet-bar-label { width: 34px; font-size: 13px; color: var(--text-muted); flex-shrink: 0; }
.bar-track { flex: 1; height: 12px; background: rgba(0,0,0,0.06); border-radius: 8px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 8px; transition: width 0.6s cubic-bezier(0.16,1,0.3,1); }
.bar-fill.exp { background: linear-gradient(90deg, #E6B422, #F0C75E); }
.bar-fill.hunger { background: linear-gradient(90deg, #E8893B, #F0B36B); }
.bar-fill.mood { background: linear-gradient(90deg, #E36B9B, #F2A8C6); }
.pet-bar-val { width: 48px; text-align: right; font-size: 12px; color: var(--text-muted); flex-shrink: 0; }

.pet-actions { display: flex; gap: 10px; }
.pet-actions .btn { flex: 1; transition: transform 0.2s cubic-bezier(0.16,1,0.3,1); }
.pet-actions .btn:hover { transform: translateY(-2px); }
.pet-rename { display: flex; gap: 8px; align-items: center; }
.pet-rename .browse-input { flex: 1; }
.pet-tip { text-align: center; font-size: 13px; color: var(--text-muted); margin-top: 12px; padding: 10px; background: rgba(139,69,19,0.06); border-radius: 10px; }

.pet-heart { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); font-size: 26px; animation: petHeart 0.9s ease-out forwards; pointer-events: none; }
@keyframes petHeart { 0% { opacity: 0; transform: translate(-50%,0) scale(0.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-70px) scale(1.2); } }

/* 成长目标提示 */
.pet-goal { text-align: center; font-size: 12.5px; color: var(--text-muted); margin-top: 8px; padding: 6px 10px; background: rgba(230,180,33,0.10); border: 1px dashed rgba(230,180,33,0.4); border-radius: 10px; }
.pet-goal.max { background: rgba(139,69,19,0.06); border-style: solid; border-color: rgba(139,69,19,0.12); }

/* 各形态动效：灵气光环 / 星光 / 翅膀 */
.pet-aura { transform-origin: center; animation: petAura 3.5s ease-in-out infinite; }
.pet-sparkle { transform-origin: center; animation: petSparkle 2.4s ease-in-out infinite; }
.pet-wing { transform-origin: 100px 104px; animation: petWing 2.8s ease-in-out infinite; }
@keyframes petAura { 0%,100% { opacity: 0.35; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.05); } }
@keyframes petSparkle { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes petWing { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-10deg); } }
/* 高阶形态整体略放大，强调成长 */
.pet-stage-2 .ink-svg { transform: scale(1.06); }
.pet-stage-3 .ink-svg { transform: scale(1.12); }

/* 进化庆祝层 */
.pet-evolve-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(255,247,230,0.92), rgba(255,240,210,0.78)); border-radius: 18px; z-index: 5; }
.pet-evolve-card { text-align: center; animation: petEvolvePop 0.6s cubic-bezier(0.16,1,0.3,1); }
.pet-evolve-burst { font-size: 52px; animation: petEvolveBurst 1.2s ease-out infinite; }
.pet-evolve-title { font-size: 26px; font-weight: 800; color: #E6A817; margin-top: 4px; text-shadow: 0 2px 8px rgba(230,168,23,0.4); }
.pet-evolve-sub { font-size: 15px; color: var(--text); margin-top: 6px; font-weight: 600; }
.pet-evolve-overlay.play { animation: petEvolveFlash 2.6s ease; }
@keyframes petEvolvePop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes petEvolveBurst { 0%,100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.25) rotate(12deg); } }
@keyframes petEvolveFlash { 0% { background: radial-gradient(circle, rgba(255,250,220,0.98), rgba(255,235,180,0.85)); } 100% { background: radial-gradient(circle, rgba(255,247,230,0.92), rgba(255,240,210,0.78)); } }

/* 新手引导卡 */
.pet-guide { margin-top: 12px; text-align: center; background: linear-gradient(180deg, rgba(230,180,33,0.14), rgba(230,180,33,0.06)); border: 1px solid rgba(230,180,33,0.35); }
.pet-guide-text { font-size: 13.5px; color: var(--text); line-height: 1.6; margin-bottom: 10px; }
.pet-guide-text strong { color: #E6A817; }

/* ── 宠物蛋与孵化动效 ──────────────────────────────────────────── */
.egg-svg { filter: drop-shadow(0 4px 12px rgba(0,0,0,0.12)); }
.egg-crack-line { animation: eggCrack 0.6s ease 0.3s forwards; }
.hatching .egg-svg { animation: eggShake 0.5s ease 3; }
.egg-shard { position: absolute; width: 12px; height: 18px; border-radius: 50%; background: #d4c4a8; opacity: 0; }
@keyframes eggCrack { to { opacity: 1; stroke-dasharray: 0 50; } }
@keyframes eggShake { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes eggHatchPop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); } }

/* ── 宠物图鉴 ──────────────────────────────────────────────────── */
.pet-gallery { margin-top: 20px; }
.pet-gallery-title { font-size: 16px; font-weight: 700; margin-bottom: 12px; color: var(--text); text-align: center; }
.pet-gallery-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 480px) { .pet-gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } }
.pet-gallery-item {
  text-align: center; padding: 6px 4px 8px; border-radius: 12px;
  background: rgba(139,69,19,0.04); border: 2px solid transparent;
  transition: all 0.2s ease; cursor: default;
}
.pet-gallery-item:hover { background: rgba(139,69,19,0.08); transform: translateY(-2px); }
.pet-gallery-item.owned {
  background: rgba(230,180,33,0.12); border-color: #E6B422;
  box-shadow: 0 0 12px rgba(230,180,33,0.2);
}
.pet-gallery-sprite { width: 80px; height: 80px; margin: 0 auto; }
.pet-gallery-sprite .ink-svg { width: 80px; height: 80px; overflow: visible; }
.pet-gallery-name { font-size: 12px; font-weight: 700; color: var(--text); margin-top: 4px; }
.pet-gallery-desc { font-size: 10px; color: var(--text-muted); line-height: 1.3; }
@keyframes petCheer { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-12px) scale(1.15); } 70% { transform: translateY(0) scale(0.96); } 100% { transform: translateY(0) scale(1); } }
@keyframes petShake { 0%,100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-4px) rotate(-6deg); } 75% { transform: translateX(4px) rotate(6deg); } }

/* 结算页宠物加成高亮卡 */
.pet-bonus-card { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding: 12px; border-radius: 14px; background: linear-gradient(135deg, #FFF3D6, #FFE3A8); border: 1px solid rgba(230,168,23,0.5); box-shadow: 0 6px 18px rgba(230,168,23,0.25); animation: petBonusPulse 1.6s ease-in-out infinite; }
.pet-bonus-icon { font-size: 22px; }
.pet-bonus-text { font-size: 15px; font-weight: 700; color: #B8860B; }
@keyframes petBonusPulse { 0%,100% { box-shadow: 0 6px 18px rgba(230,168,23,0.25); } 50% { box-shadow: 0 6px 26px rgba(230,168,23,0.5); } }

.trend { display: flex; align-items: flex-end; gap: 4px; height: 82px; padding-top: 6px; }
.trend-bar {
  flex: 1; min-width: 0; background: linear-gradient(180deg, #FFB74D, #FF9800);
  border-radius: 4px 4px 2px 2px; position: relative;
  display: flex; justify-content: center; align-items: flex-start;
  transition: height 0.4s cubic-bezier(0.16,1,0.3,1);
}
.trend-val { position: absolute; top: -16px; font-size: 10px; color: var(--text-muted, #999); }

/* 学习报告（阶段二/三：个性化反馈 + 激励） */
.learn-report .summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.summary-cell { background: var(--bg, #FAF7F2); border: 1px solid var(--border, #EEE); border-radius: 12px; padding: 12px 10px; text-align: center; }
.summary-val { font-size: 20px; font-weight: 700; color: var(--primary, #8B4513); line-height: 1.2; }
.summary-label { font-size: 12px; color: var(--text-muted, #999); margin-top: 4px; }
.summary-note { font-size: 11px; color: var(--text-muted, #aaa); margin-top: 2px; }

.plan { display: flex; align-items: flex-end; gap: 6px; height: 80px; padding-top: 18px; }
.plan-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.plan-bar { width: 70%; max-width: 28px; background: linear-gradient(180deg, #66BB6A, #388E3C); border-radius: 5px 5px 3px 3px; position: relative; display: flex; justify-content: center; align-items: flex-start; transition: height 0.4s cubic-bezier(0.16,1,0.3,1); min-height: 4px; }
.plan-val { position: absolute; top: -15px; font-size: 10px; color: var(--text-muted, #999); }
.plan-day { font-size: 10px; color: var(--text-muted, #999); margin-top: 4px; }

.weak-list { display: flex; flex-direction: column; gap: 8px; }
.weak-item { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--border, #EEE); flex-wrap: wrap; }
.weak-item:last-child { border-bottom: none; }
.weak-main { display: flex; align-items: center; gap: 8px; }
.weak-py { font-size: 12px; color: var(--text-muted, #999); }
.weak-meta { font-size: 12px; color: var(--text-muted, #999); flex: 1; min-width: 120px; }
.weak-item .btn { margin-left: auto; }
.mm-acc { font-size: 11px; font-weight: 600; color: #C62828; background: rgba(198,40,40,0.1); border-radius: 8px; padding: 2px 7px; }

.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.badge { background: var(--bg, #FAF7F2); border: 1px solid var(--border, #EEE); border-radius: 12px; padding: 10px 8px; text-align: center; opacity: 0.55; filter: grayscale(0.6); transition: transform 0.2s, box-shadow 0.2s; }
.badge.earned { opacity: 1; filter: none; border-color: rgba(218,165,32,0.5); background: linear-gradient(180deg, #FFF8E1, #FFECB3); box-shadow: 0 2px 10px rgba(218,165,32,0.18); }
.badge:hover { transform: translateY(-2px); }
.badge-icon { font-size: 26px; line-height: 1; }
.badge-name { font-size: 12px; font-weight: 600; color: var(--text, #333); margin-top: 4px; }
.badge-desc { font-size: 10px; color: var(--text-muted, #999); margin-top: 2px; min-height: 26px; }
.badge-prog { height: 5px; background: rgba(0,0,0,0.08); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.badge-bar { height: 100%; background: var(--primary, #8B4513); border-radius: 3px; transition: width 0.5s ease; }
.badge.earned .badge-bar { background: #FF9800; }
.badge-pct { font-size: 10px; color: var(--text-muted, #999); margin-top: 3px; }

.lb-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.lb-tabs .tab { padding: 5px 14px; font-size: 13px; border-radius: 14px; border: 1px solid var(--border, #DDD); background: var(--bg, #fff); color: var(--text-muted, #888); cursor: pointer; }
.lb-tabs .tab.active { background: var(--primary, #8B4513); color: #fff; border-color: var(--primary, #8B4513); }
.lb-list { display: flex; flex-direction: column; gap: 4px; }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 13px; }
.lb-row:nth-child(odd) { background: var(--bg, #FAF7F2); }
.lb-row.me { background: rgba(218,165,32,0.14); font-weight: 600; }
.lb-rank { width: 26px; text-align: center; font-size: 14px; flex-shrink: 0; }
.lb-name { font-weight: 600; color: var(--text, #333); }
.lb-scope { font-size: 11px; color: var(--text-muted, #999); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score { font-size: 12px; color: var(--primary, #8B4513); white-space: nowrap; }
.lb-my { margin-top: 10px; font-size: 12px; color: var(--text-muted, #777); text-align: center; }

.btn-sm {
  padding: 6px 14px;
  font-size: 13px;
}

/* 首页账号状态栏 */
.account-status { margin-bottom: 16px; position: sticky; top: 8px; z-index: 20; }
.as-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  box-shadow: var(--shadow);
}
.as-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  box-shadow: var(--shadow);
}
.as-card.as-logged-in { border-color: rgba(218, 165, 32, 0.45); }
.as-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.as-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.as-avatar.as-guest { background: var(--text-muted); }
.as-info { min-width: 0; }
.as-name { font-size: 14px; color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-account { font-size: 12px; color: var(--accent); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-logged-out .as-name { color: var(--text-muted); }
.as-meta { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-phone { font-size: 12px; color: var(--text-muted); }
.as-info { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 4px; align-items: baseline; }
.as-name { grid-column: 1; grid-row: 1; }
.as-meta { grid-column: 2; grid-row: 1; text-align: right; justify-self: end; }
.as-account { grid-column: 1; grid-row: 2; }
.as-phone { grid-column: 2; grid-row: 2; text-align: right; justify-self: end; }
.as-actions { flex-direction: row; }
.as-actions .btn { flex: 1; }
.as-card.as-logged-in { flex-direction: column; align-items: stretch; }
.as-logout { color: var(--error); border-color: var(--error); flex-shrink: 0; }
.as-logout:hover:not(:disabled) { background: var(--error-bg); }
.as-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* 开始游戏卡片 */
.start-card .start-hint { font-size: 13px; color: var(--text-muted); margin: 0 0 16px; }

/* 我的得分与排名 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.stat-tile {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 8px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.stat-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: rgba(218, 165, 32, 0.4);
}
.stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.2;
  word-break: break-all;
}
.stat-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
  white-space: pre-line;
}
.stats-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin: 18px 0 10px;
  padding-left: 4px;
  border-left: 3px solid var(--accent);
}

/* Game Page */
.game-container {
  position: relative;
  max-width: 520px;
}

.game-header {
  margin-bottom: 24px;
}

.progress-bar-container {
  width: 100%;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  margin-bottom: 12px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.3s ease;
  width: 0%;
}

.game-stats {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-muted);
}

.question-area {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}

.question-desc {
  font-size: 20px;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.8;
}

.quiz-modes {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 10px;
}
.quiz-mode-hint {
  font-size: 13px;
  color: var(--text-muted);
}

.question-pinyin {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.option-btn {
  padding: 14px 12px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  font-size: 17px;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text);
}

.option-btn:hover:not(:disabled) {
  border-color: var(--accent);
  background: rgba(218, 165, 32, 0.05);
}

.option-btn:disabled {
  cursor: default;
}

.option-btn.correct {
  border-color: var(--success);
  background: var(--success-bg);
  color: var(--success);
}

.option-btn.incorrect {
  border-color: var(--error);
  background: var(--error-bg);
  color: var(--error);
}

/* Feedback */
.feedback {
  text-align: center;
  padding: 16px;
  margin-top: 16px;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 500;
  animation: fadeIn 0.3s ease;
}

.feedback.correct {
  background: var(--success-bg);
  color: var(--success);
}

.feedback.incorrect {
  background: var(--error-bg);
  color: var(--error);
}

.hidden { display: none; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Result */
.result-card {
  text-align: center;
}

.result-score {
  font-size: 64px;
  font-weight: bold;
  color: var(--primary);
  line-height: 1;
  margin: 16px 0;
}

.result-details {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 16px;
}

.detail-item {
  text-align: center;
}

.detail-label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
}

.detail-value {
  display: block;
  font-size: 24px;
  font-weight: bold;
  color: var(--text);
}

.result-status {
  font-size: 14px;
  color: var(--success);
  margin-bottom: 16px;
}

.result-card .form-actions {
  justify-content: center;
}

/* Leaderboard */
.leaderboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.leaderboard-header h2 {
  font-size: 20px;
  color: var(--primary);
}

.tabs-scope, .tabs-sort { display: flex; gap: 4px; margin-bottom: 10px; background: var(--bg-card); border-radius: var(--radius); padding: 4px; box-shadow: var(--shadow); }
.tabs-sort .tab { flex: 0 0 auto; padding: 6px 16px; }
.tabs-period {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 4px;
  box-shadow: var(--shadow);
}

.tab {
  flex: 1;
  padding: 8px 12px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-family: var(--font);
  cursor: pointer;
  border-radius: 6px;
  color: var(--text-muted);
  transition: all 0.2s;
}

.tab.active {
  background: var(--primary);
  color: #fff;
}

.tab:hover:not(.active) {
  color: var(--text);
}

.leaderboard-list {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.empty-state {
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

.rank-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bg);
  transition: background 0.2s;
}

.rank-item:last-child { border-bottom: none; }

.rank-item.me {
  background: rgba(218, 165, 32, 0.08);
}

.rank-num {
  width: 28px;
  font-size: 16px;
  font-weight: bold;
  color: var(--text-muted);
  text-align: center;
  flex-shrink: 0;
}

.rank-num.gold { color: #FFD700; }
.rank-num.silver { color: #C0C0C0; }
.rank-num.bronze { color: #CD7F32; }

.rank-info {
  flex: 1;
  margin-left: 10px;
  min-width: 0;
}

.rank-name {
  font-size: 14px;
  font-weight: 500;
}

.rank-meta {
  font-size: 11px;
  color: var(--text-muted);
}

.rank-time { font-size: 13px; color: var(--text-muted); flex-shrink: 0; margin-right: 12px; white-space: nowrap; }
.rank-score {
  font-size: 15px;
  font-weight: bold;
  color: var(--primary);
  flex-shrink: 0;
  margin-left: 8px;
}

/* Champion list */
.champion-item {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--bg);
}

.champion-crown {
  font-size: 24px;
  margin-right: 10px;
}

.champion-info {
  flex: 1;
  min-width: 0;
}

.champion-name {
  font-size: 14px;
  font-weight: 500;
}

.champion-season {
  font-size: 11px;
  color: var(--text-muted);
}

.champion-score {
  font-size: 15px;
  font-weight: bold;
  color: var(--accent);
}

/* Responsive */
@media (max-width: 400px) {
  .container { padding: 16px 12px; }
  .logo { padding: 24px 0 20px; }
  .logo h1 { font-size: 26px; }
  .options-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .result-score { font-size: 48px; }
  .result-details { gap: 20px; }
  .form-actions { flex-direction: column; }
  .btn-large { width: 100%; }
  .stats-grid { gap: 8px; }
  .stat-tile { padding: 12px 4px; }
  .stat-value { font-size: 18px; }
  .stat-label { font-size: 11px; }
  .pet-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

#learn-card { font-size: 15px; }
#learn-card h3 { font-size: 18px !important; }
/* ===== 成语学习卡升级：拆字芯片 / 发音 / 跳过-撤销 toast ===== */
.learn-card-inner { position:relative; animation: learnIn .35s cubic-bezier(.16,1,.3,1) both; }
@keyframes learnIn { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } }
.learn-word-row { position:relative; display:flex; flex-direction:column; align-items:center; padding:14px 12px 4px; }
.learn-word-corner { position:absolute; right:8px; top:6px; display:flex; flex-direction:column; align-items:center; gap:4px; z-index:2; }
.learn-word { font-size:26px !important; font-weight:800; color:var(--brand,#8B4513); letter-spacing:3px; }
/* 🔊 右上角按钮 */
.learn-speak { width:30px; height:30px; border-radius:50%; border:1px solid var(--border,rgba(139,69,19,.25)); background:var(--brand-soft,#FFF3E0); color:var(--brand,#8B4513); font-size:16px !important; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, background .25s; }
.learn-speak:hover { transform: scale(1.12); box-shadow:0 6px 16px rgba(139,69,19,.22); }
.learn-speak:active { transform: scale(.92); }
.learn-speak.speaking { animation: speakPulse 1s ease-in-out infinite; }
@keyframes speakPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(139,69,19,.35);} 50%{ box-shadow:0 0 0 8px rgba(139,69,19,0);} }
.learn-pinyin { text-align:center; color:var(--text-muted,#9a8c7a); font-size:13px; letter-spacing:1px; margin-top:2px; }
.learn-section { margin-bottom:14px; }
.learn-badge { display:inline-block; background:var(--brand,#8B4513); color:#fff; font-size:12px !important; padding:2px 10px; border-radius:10px; margin-bottom:8px; letter-spacing:1px; }
.learn-text { line-height:1.9; color:var(--text,#3a2e22); background:var(--brand-soft,#FFF8E1); padding:10px 12px; border-radius:10px; border-left:4px solid var(--brand,#FF9800); }
.learn-section.example .learn-text { background:#F5F5F5; border-left-color:#9E9E9E; color:var(--text,#333); }
.meaning-chips { display:flex; flex-wrap:wrap; gap:8px; }
.meaning-chip { display:flex; align-items:baseline; gap:6px; background:var(--bg-card,#fff); border:1px solid var(--border,rgba(0,0,0,.1)); border-radius:10px; padding:6px 10px; transition: transform .2s ease, box-shadow .2s ease; }
.meaning-chip:hover { transform: translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.08); }
.chip-head { font-weight:800; color:var(--brand,#8B4513); font-size:15px !important; }
.chip-body { color:var(--text,#3a2e22); }
.meaning-paras { margin-top:8px; }
.meaning-para { line-height:1.9; color:var(--text,#3a2e22); }
.learn-actions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; padding-top:14px; border-top:1px solid var(--border,rgba(0,0,0,.08)); }
.learn-actions .btn { transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease, background .2s; }
.learn-actions .btn:hover:not(:disabled) { transform: translateY(-2px); }
.learn-actions .btn:active:not(:disabled) { transform: scale(.96); }
.learn-empty, .learn-finished { text-align:center; padding:40px 0; color:var(--text-muted,#9a8c7a); font-size:15px; }
.learn-finished { font-size:20px; color:var(--brand,#8B4513); font-weight:700; }
.learn-toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); background:rgba(45,30,18,.95); color:#fff; padding:11px 14px 11px 18px; border-radius:12px; display:flex; align-items:center; gap:14px; z-index:9999; box-shadow:0 12px 40px rgba(0,0,0,.3); opacity:0; pointer-events:none; transition:opacity .25s ease, transform .3s cubic-bezier(.16,1,.3,1); font-size:13px; max-width:90vw; }
.learn-toast.show { opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.learn-toast button { background:var(--brand,#FF9800); color:#3a230f; border:none; padding:6px 14px; border-radius:8px; font-weight:700; cursor:pointer; font-size:13px; flex:none; }
.learn-toast button:hover { filter:brightness(1.05); }

/* ===== 学习页 Tab 导航 ===== */
.learn-nav { display:flex; gap:4px; flex-wrap:nowrap; }
.learn-nav-btn { flex:1 1 0; min-width:0; padding:8px 10px; text-align:center; white-space:nowrap; border:1px solid var(--border,rgba(0,0,0,.14)); background:transparent; border-radius:12px; font-size:14px; font-weight:600; color:var(--text-muted,#9a8c7a); cursor:pointer; transition:all .2s ease; }
.learn-nav-btn:hover { border-color:var(--brand,#8B4513); color:var(--brand,#8B4513); }
.learn-nav-btn.active { background:var(--brand,#8B4513); color:#fff; border-color:var(--brand,#8B4513); box-shadow:0 4px 12px rgba(139,69,19,.25); }
.learn-panel { margin-top:4px; }
.learn-header { flex-direction: column; align-items: stretch; gap: 12px; }
.learn-title-row { display: flex; justify-content: space-between; align-items: center; }
.learn-header .learn-nav { justify-content: center; gap: 4px; }

/* 新学/复习 状态徽章（卡片左上角） */
.state-badge { position:absolute; left:8px; top:8px; font-size:11px !important; font-weight:700; padding:3px 10px; border-radius:10px; letter-spacing:1px; z-index:2; }
.state-badge.new { background:#E3F2FD; color:#1565C0; border:1px solid #90CAF9; }
.state-badge.review { background:#FFF3E0; color:#E65100; border:1px solid #FFCC80; }

/* 收藏星标（嵌入 .learn-word-corner 内） */
.learn-fav { width:30px; height:30px; border-radius:50%; border:1px solid var(--border,rgba(139,69,19,.25)); background:#fff; color:#bbb; font-size:18px !important; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:transform .2s ease, color .2s, background .2s; }
.learn-fav:hover { transform:scale(1.12); color:#E6A700; }
.learn-fav.active { color:#E6A700; background:#FFF8E0; border-color:#FFCC80; }

/* ===== 词库浏览 ===== */
.browse-card { padding:16px; }
.browse-controls { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.browse-input { flex:1; min-width:160px; padding:10px 12px; border:1px solid var(--border,rgba(0,0,0,.14)); border-radius:10px; font-size:14px; background:var(--bg-card,#fff); color:var(--text,#3a2e22); }
.browse-input:focus { outline:none; border-color:var(--brand,#8B4513); box-shadow:0 0 0 3px rgba(139,69,19,.12); }
.browse-select { padding:10px 12px; border:1px solid var(--border,rgba(0,0,0,.14)); border-radius:10px; font-size:14px; background:var(--bg-card,#fff); color:var(--text,#3a2e22); }
.browse-meta { font-size:13px; color:var(--text-muted,#9a8c7a); margin-bottom:10px; }
.browse-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.browse-item { background:var(--bg-card,#fff); border:1px solid var(--border,rgba(0,0,0,.1)); border-radius:12px; padding:12px; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, border-color .2s; display:flex; flex-direction:column; gap:4px; }
.browse-item:hover { transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,.1); border-color:var(--brand,#8B4513); }
.browse-item-head { display:flex; align-items:center; justify-content:space-between; }
.browse-word { font-size:18px !important; font-weight:800; color:var(--brand,#8B4513); letter-spacing:2px; }
.browse-star { font-size:18px !important; color:#999; cursor:pointer; transition:color .2s, transform .2s, background .2s; }
.browse-star:hover { color:#E6A700; transform:scale(1.15); }
.browse-star.active { color:#E6A700; background:#FFF8E0; border-radius:50%; padding:1px 3px; }
.browse-py { font-size:12px; color:var(--text-muted,#9a8c7a); }
.browse-desc { font-size:12px; color:var(--text,#3a2e22); line-height:1.6; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.browse-lv { align-self:flex-start; font-size:11px !important; padding:1px 8px; border-radius:8px; }
.browse-pager { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:14px; }
.browse-page-num { font-size:13px; color:var(--text-muted,#9a8c7a); }

/* 磁吸按钮（学习卡标记按钮） */
.magnetic { transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .2s ease, background .2s; will-change:transform; }
@media (max-width:640px){ .browse-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
#quiz-card, #quiz-card * { font-size: 15px !important; }
#quiz-card, #quiz-card * { font-size: 15px !important; }

#learn-card b, #quiz-card b { font-size: 15px !important; }

/* 登录 / 注册 双 Tab 切换 */
.gate-tabs { display: flex; gap: 8px; margin-bottom: 18px; padding-right: 38px; }
.gate-tab {
  flex: 1;
  padding: 10px 0;
  border: 1px solid rgba(0,0,0,0.12);
  background: transparent;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #888;
  cursor: pointer;
  transition: all .2s ease;
}
.gate-tab:hover { border-color: rgba(0,0,0,0.25); color: #555; }
.gate-tab.active {
  background: var(--primary, #4f7cff);
  border-color: var(--primary, #4f7cff);
  color: #fff;
  box-shadow: 0 6px 18px rgba(79,124,255,0.35);
}
.gate-switch {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  color: #888;
}
.gate-switch a, .gate-switch .gate-link {
  color: var(--primary, #8B4513);
  font-weight: 600;
  text-decoration: none;
  margin-left: 2px;
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.gate-switch a:hover, .gate-switch .gate-link:hover { text-decoration: underline; }

/* ===== 连击庆祝：烟花 + 大号连击文字 ===== */
.combo-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  display: none;
  overflow: hidden;
}
.combo-overlay.show { display: block; }
.combo-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.combo-text {
  position: absolute;
  left: 50%;
  top: 62%;
  transform: translate(-50%, -50%);
  font-size: clamp(46px, 12vw, 132px);
  font-weight: 900;
  letter-spacing: 6px;
  white-space: nowrap;
  background: linear-gradient(180deg, #FFE082 0%, #FF8F00 45%, #FF5252 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 18px rgba(255, 140, 0, 0.45));
  opacity: 0;
}
.combo-text.pop {
  animation: comboPop 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes comboPop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(-9deg); }
  14%  { opacity: 1; transform: translate(-50%, -50%) scale(1.18) rotate(3deg); }
  26%  { opacity: 1; transform: translate(-50%, -50%) scale(0.94) rotate(-2deg); }
  40%  { opacity: 1; transform: translate(-50%, -50%) scale(1.06) rotate(1deg); }
  55%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  78%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .combo-text.pop { animation-duration: 1.2s; }
}

/* ===== 成语测试（quiz）增强 ===== */
.quiz-progress{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.quiz-prog-text{font-size:13px;color:var(--text-muted,#8D6E63);white-space:nowrap;font-weight:600}
.quiz-prog-bar{flex:1;height:8px;background:rgba(141,110,99,.15);border-radius:99px;overflow:hidden}
.quiz-prog-fill{height:100%;background:linear-gradient(90deg,#8B4513,#C0792E);border-radius:99px;transition:width .35s ease}
.quiz-prompt-label{font-size:13px;color:var(--primary,#8B4513);font-weight:700;margin-bottom:10px;letter-spacing:.3px}
.quiz-word{font-size:clamp(34px,9vw,56px);font-weight:800;text-align:center;color:var(--text,#3E2723);letter-spacing:.12em;margin:8px 0 4px}
.quiz-fill{font-size:clamp(26px,7vw,42px);font-weight:800;text-align:center;color:var(--text,#3E2723);letter-spacing:.1em;margin:8px 0 4px}
.fill-blank{display:inline-block;min-width:1.4em;padding:0 .1em;border-bottom:3px solid var(--primary,#8B4513);color:var(--primary,#8B4513)}
/* 选项含 A/B/C/D 键标，释义类选项可换行左对齐 */
.options-grid .option-btn{display:flex;align-items:center;gap:10px;text-align:left;line-height:1.4}
.opt-key{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:rgba(139,69,19,.12);color:var(--primary,#8B4513);font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.opt-text{flex:1}
.quiz-reinforce{margin-top:12px;border-top:1px dashed rgba(141,110,99,.25);padding-top:10px;display:flex;flex-direction:column;gap:6px}
.rein-row{display:flex;gap:8px;font-size:13px;align-items:baseline}
.rein-label{flex:0 0 auto;width:34px;color:var(--text-muted,#8D6E63);font-weight:700}
.rein-val{flex:1;color:var(--text,#3E2723);line-height:1.5}
.rein-py{background:none;border:1px solid rgba(139,69,19,.35);color:var(--primary,#8B4513);border-radius:99px;padding:2px 10px;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.rein-py:hover{background:rgba(139,69,19,.08)}
.rein-py.speaking{background:rgba(139,69,19,.15)}
.speak-ico{font-size:12px}
.fb-answer{color:var(--primary,#8B4513);font-weight:700}
.quiz-skip{margin-top:10px;text-align:center;font-size:12px;color:var(--text-muted,#8D6E63);cursor:pointer;opacity:.85;user-select:none}
.quiz-skip:hover{opacity:1}
.quiz-actions{margin-top:14px;text-align:center}
.quiz-summary{text-align:center;padding:10px 4px}
.quiz-summary h3{margin:0 0 14px;color:var(--text,#3E2723)}
.summary-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:16px}
.summary-cell{background:rgba(139,69,19,.06);border-radius:12px;padding:10px 4px}
.sc-val{font-size:20px;font-weight:800;color:var(--primary,#8B4513)}
.sc-lab{font-size:11px;color:var(--text-muted,#8D6E63);margin-top:2px}
.quiz-summary-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.game-remaining{display:inline-block;margin-left:4px;color:var(--primary,#8B4513);font-weight:700;font-size:13px}
/* ===== 游戏倒计时圆环 ===== */
.timer-wrap{position:relative;width:64px;height:64px;margin:6px auto 2px;display:flex;align-items:center;justify-content:center}
.timer-ring{transform:rotate(-90deg);display:block}
.timer-ring-bg{fill:none;stroke:rgba(141,110,99,.2);stroke-width:4}
.timer-ring-fg{fill:none;stroke:#8D6E63;stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset .9s linear}
.timer-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:#8D6E63}
.timer-num small{font-size:11px;margin-left:1px;font-weight:600}
.timer-danger .timer-ring-fg{stroke:#F44336}
.timer-danger .timer-num{color:#F44336}
@media (prefers-reduced-motion: reduce){.timer-ring-fg{transition:none}}


/* ── 图鉴：未获得（纸牌遮盖 + 大问号） ─────────────────────────────── */
.pet-gallery-item.locked {
  background: repeating-linear-gradient(45deg, #efe6da, #efe6da 8px, #e7dccd 8px, #e7dccd 16px);
  border: 2px dashed rgba(139, 69, 19, 0.25);
  cursor: default;
}
.pet-gallery-item.locked:hover {
  transform: none;
  background: repeating-linear-gradient(45deg, #efe6da, #efe6da 8px, #e7dccd 8px, #e7dccd 16px);
}
.pet-gallery-locked {
  width: 78%; max-width: 80px; aspect-ratio: 1 / 1; min-width: 0;
  margin: 4px auto 2px;
  display: grid; place-items: center;
  background: rgba(120, 90, 60, 0.12);
  border-radius: 12px;
}
.pet-locked-q {
  margin: 0;
  font-size: clamp(28px, 8vw, 42px); font-weight: 800; line-height: 1;
  color: rgba(139, 69, 19, 0.45);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.55);
}
.pet-gallery-item.locked .pet-gallery-name { color: var(--text-muted); }
.pet-gallery-item.locked .pet-gallery-desc { color: var(--text-muted); }

/* ── 图鉴：当前出战宠物高亮 ───────────────────────────────────────── */
.pet-gallery-item.active {
  border-color: #E6A817;
  background: rgba(230, 180, 33, 0.18);
  box-shadow: 0 0 14px rgba(230, 168, 23, 0.35);
}
.pet-gallery-item.owned.active { border-color: #E6A817; }

/* ── 图鉴描述：两个成语可换行并居中 ───────────────────────────────── */
.pet-gallery-desc { word-break: break-word; text-align: center; }

/* ── 收藏进度 + 今日经验进度 ──────────────────────────────────────── */
.pet-collection {
  margin-top: 12px; text-align: center; font-size: 13.5px; font-weight: 700;
  color: #B8860B; padding: 8px 10px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 243, 214, 0.9), rgba(255, 227, 168, 0.6));
  border: 1px solid rgba(230, 168, 23, 0.35);
}
.pet-exp-progress {
  margin-top: 8px; text-align: center; font-size: 12px; color: var(--text-muted);
  padding: 6px 10px; border-radius: 10px; background: rgba(139, 69, 19, 0.05);
}

/* ── 满级奖励孵化卡 ───────────────────────────────────────────────── */
.pet-reward {
  margin-top: 14px; text-align: center; padding: 14px;
  border-radius: 14px; border: 1px solid rgba(230, 168, 23, 0.5);
  background: linear-gradient(135deg, #FFF6DC, #FFE7AE);
  box-shadow: 0 6px 18px rgba(230, 168, 23, 0.25);
}
.pet-reward-title { font-size: 16px; font-weight: 800; color: #B8860B; }
.pet-reward-text { font-size: 13px; color: var(--text); margin: 6px 0 10px; line-height: 1.5; }
#pet-hatch-btn {
  display: inline-block; padding: 8px 18px; border: none; border-radius: 22px;
  background: linear-gradient(135deg, #E6A817, #C8870C); color: #fff;
  font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 12px rgba(200, 135, 12, 0.4);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
#pet-hatch-btn:hover:not(:disabled) { transform: translateY(-2px); }
#pet-hatch-btn:disabled { opacity: 0.6; cursor: default; }

/* 主宠物：两侧竖排成语 */
.pet-hero { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; }
.pet-hero-center { display: flex; flex-direction: column; align-items: center; }
.pet-hero-idiom {
  writing-mode: vertical-rl; text-orientation: upright;
  font-size: 18px; font-weight: 700; letter-spacing: 4px; line-height: 1.1;
  color: #B8860B; text-shadow: 0 1px 3px rgba(0,0,0,.2);
  user-select: none; white-space: nowrap; min-width: 18px;
}
@media (max-width: 480px) {
  .pet-hero { gap: 6px; }
  .pet-hero-idiom { font-size: 15px; letter-spacing: 3px; }
}

/* 图鉴：神兽锁卡（终极神兽）金色描边强调 */
.pet-gallery-item.locked.shen-locked {
  border: 2px solid #E6A817;
  background: linear-gradient(180deg, rgba(230,168,23,0.16), rgba(230,168,23,0.05));
  box-shadow: 0 0 16px rgba(230,168,23,0.45);
}
.pet-gallery-item.locked.shen-locked:hover {
  background: linear-gradient(180deg, rgba(230,168,23,0.22), rgba(230,168,23,0.08));
  transform: none;
}
.pet-gallery-item.locked.shen-locked .pet-locked-q {
  color: #E6A817;
  text-shadow: 0 0 12px rgba(230,168,23,0.6);
}
.pet-gallery-item.locked.shen-locked .pet-gallery-name,
.pet-gallery-item.locked.shen-locked .pet-gallery-desc {
  color: #B8860B;
}
.pet-gallery-item.locked.shen-locked .pet-gallery-desc {
  font-weight: 700;
}