/* ===== 登录页：手机号是否已注册 实时绿字提示 ===== */
.phone-hint {
  font-size: 12px;
  line-height: 1.4;
  margin: 6px 0 2px 2px;
  color: #16a34a; /* 绿色小字 */
  min-height: 0;
  word-break: break-all;
}
.phone-hint:empty { display: none; }

/* ===== Reset & Base ===== */
* { margin:0; padding:0; box-sizing:border-box; }
html, body {
  height: 100%;
  font-family: 'Nunito', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

/* ===== Variables ===== */
:root {
  --primary: #FF8C42;
  --primary-light: #FFB177;
  --primary-dark: #E6731F;
  --challenge-color: #7B68EE;    /* 紫色-挑战按钮 */
  --grind-color: #26D9A6;        /* 绿青-刷怪按钮 */
  --unmastered-color: #E74C3C;   /* 红-未掌握 */
  --pending-color: #F39C12;      /* 橙-待确认 */
  --srs-color: #7B68EE;          /* 紫-艾宾浩斯 */
  --mastered-color: #27AE60;     /* 绿-已掌握 */
  --secondary: #4A90D9;
  --bg: #FFF8F0;
  --card: #FFFFFF;
  --success: #52C41A;
  --error: #FF4D4F;
  --text: #3D3D3D;
  --text-light: #999;
  --shadow: 0 4px 20px rgba(255, 140, 66, 0.12);
  --radius: 20px;
  --border: #E0E0E0;
}

/* Dark theme variables */
[data-theme="dark"] {
  --primary: #FF9F5C;
  --primary-light: #FFB177;
  --primary-dark: #E6731F;
  --challenge-color: #9B88FE;
  --grind-color: #2EF0B2;
  --unmastered-color: #FF6B6B;
  --pending-color: #FFD93D;
  --srs-color: #9B88FE;
  --mastered-color: #6BCB77;
  --secondary: #74B9FF;
  --bg: #1A1A2E;
  --card: #24243E;
  --success: #6BCB77;
  --error: #FF6B6B;
  --text: #EAEAEA;
  --text-light: #A0A0B0;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  --border: #3A3A5C;
}

/* Theme transition */
.theme-transitioning * {
  transition: background-color 0.3s ease,
              color 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease !important;
}

/* ===== App Container ===== */
#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
}

/* ===== Screens ===== */
.screen { display:none; padding:20px 20px 80px; min-height:100dvh; animation: fadeIn 0.3s ease; }
.screen.active { display:block; }
@keyframes fadeIn {
  from { opacity:0; transform:translateY(10px); }
  to { opacity:1; transform:translateY(0); }
}

/* ===== Loading Splash ===== */
.loading-splash {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:100vh; gap:16px;
}
.loading-logo {
  width:64px; height:64px; border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  animation:loadingPulse 1.2s ease-in-out infinite;
}
.loading-text {
  font-size:22px; font-weight:700; color:var(--text-main);
  opacity:0.7; animation:loadingFade 1.5s ease-in-out infinite;
}
@keyframes loadingPulse {
  0%,100% { transform:scale(0.85); opacity:0.6; }
  50% { transform:scale(1.1); opacity:1; }
}
@keyframes loadingFade {
  0%,100% { opacity:0.4; }
  50% { opacity:0.9; }
}

/* ===== Onboarding / Login (Sheet1) ===== */
.onboard-card {
  background: var(--card);
  border-radius:30px; padding:40px 30px; margin-top:60px;
  text-align:center; box-shadow: var(--shadow);
}
.logo { font-size:64px; margin-bottom:10px; }
.onboard-card h1 {
  font-size:32px; color:var(--challenge-color); font-weight:800;
}
.subtitle { color:var(--text-light); margin:8px 0 30px; font-size:14px; }
.input-group { margin-bottom:24px; text-align:left; }
.input-group label {
  display:block; font-size:14px; font-weight:600; margin-bottom:8px; color:var(--text);
}
.input-group input {
  width:100%; padding:14px 16px; border:2px solid #EEE; border-radius:14px;
  font-size:16px; font-family:inherit; transition:border 0.2s;
}
.input-group input:focus { outline:none; border-color:var(--primary); }
.input-group select {
  width:100%; padding:14px 16px; border:2px solid #EEE; border-radius:14px;
  font-size:16px; font-family:inherit; background:#fff; color:var(--text);
  appearance:auto; cursor:pointer;
}

/* Particle button animation placeholder */
.btn-particle {
  background: linear-gradient(135deg, #7B68EE, #9B88FE);
  position:relative; overflow:hidden;
}
.btn-particle::after {
  content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
  animation: particleFloat 3s ease-in-out infinite;
}
@keyframes particleFloat {
  0%,100% { transform:translate(0,0) scale(1); }
  50% { transform:translate(10%,-5%) scale(1.05); }
}

/* ===== Home Header (R2-R3) ===== */
.home-header {
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:20px; padding-top:10px;
}
.home-branding h1 {
  font-size:32px; font-weight:800; color:var(--challenge-color); line-height:1.2;
}
.home-subtitle {
  font-size:13px; color:var(--text-light); margin-top:2px;
}
.home-header-right { display:flex; align-items:center; gap:4px; }
.btn-settings {
  font-size:18px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer; padding:4px;
  font-family:inherit;
}

/* ===== R4: Total Progress Bar (路线级别) - 垂直居中 ===== */
.total-progress-bar {
  display:flex; align-items:center; gap:10px; margin-bottom:14px;
  min-height:24px;
}
.total-label {
  font-size:13px; color:var(--text); white-space:nowrap; font-weight:600;
}
.total-progress-bar .progress-bar {
  flex:1; height:10px; background:#F0F0F0; border-radius:5px; overflow:hidden;
  flex-shrink:0;
}
.total-pct {
  font-size:12px; color:var(--text-light); white-space:nowrap; min-width:70px; text-align:right;
}

/* ===== R5: 今日计划 一行四段 ===== */
.today-plan { margin-bottom:14px !important; }
.plan-single-row {
  display:flex; align-items:center; gap:10px;
}
.plan-single-row h3 { font-size:16px; font-weight:700; flex-shrink:0; margin:0; line-height:1; }

/* 子选项下拉（原生select，和单词表一致） */
#sub-select {
  padding:6px 12px; border:2px solid #EEE; border-radius:10px;
  font-size:13px; font-weight:600; font-family:inherit; color:var(--text);
  background:var(--card); cursor:pointer; outline:none; min-width:90px;
  transition:border-color 0.2s; flex-shrink:0;
}
#sub-select:focus { border-color:var(--primary); }

/* 进度条（今日计划行内） */
.plan-bar { height:8px; background:#F0F0F0; border-radius:4px; overflow:hidden; flex:1; }
.plan-fill {
  height:100%; background:linear-gradient(90deg, var(--grind-color), #5EDDB8);
  border-radius:4px; transition:width 0.5s ease;
}
/* 数据数字（行内右对齐） */
.plan-data {
  font-size:12px; color:var(--text-light); white-space:nowrap; min-width:50px;
  text-align:right; line-height:1;
}

/* R6-R7: 统计区（已挑战/已刷怪）- 左右分两边，与R8按钮对齐 */
.plan-stats {
  display:flex; justify-content:space-between; padding:0 4px;
  margin-top:18px;
}
.plan-stat { text-align:center; flex:1; }
.plan-stat-left { padding-right:6px; }
.plan-stat-mid { padding:0 6px; }
.plan-stat-right { padding-left:6px; }
.plan-label {
  display:block; font-size:12px; color:var(--text-light); margin-bottom:4px;
}
.plan-num-row { display:flex; align-items:baseline; justify-content:center; gap:2px; }
.plan-num { font-size:32px; font-weight:800; }
.plan-num.plan-learned { color:var(--challenge-color); }
.plan-num.plan-reviewed { color:var(--grind-color); }
.plan-num.plan-tingxie-num { color:var(--primary); }
.plan-max { font-size:16px; color:#CCC; font-weight:400; }

/* ===== R8: Action Buttons (挑战/刷怪) ===== */
.action-buttons { display:flex; gap:12px; margin-bottom:14px; }
.btn-challenge, .btn-grind {
  flex:1; border:none; padding:20px 16px; border-radius:18px;
  font-size:22px; font-weight:700; cursor:pointer; transition:all 0.2s;
  font-family:inherit; display:flex; align-items:center; justify-content:center;
  gap:8px; color:white; box-shadow:0 4px 15px rgba(0,0,0,0.1);
}
.btn-challenge { background:var(--challenge-color); }
.btn-challenge:hover { background:#6A5ACD; transform:translateY(-2px); box-shadow:0 6px 20px rgba(123,104,238,0.3); }
.btn-grind { background:var(--grind-color); }
.btn-grind:hover { background:#1BC89C; transform:translateY(-2px); box-shadow:0 6px 20px rgba(38,217,166,0.3); }
.btn-icon-lg { font-size:24px; }

/* 按钮完成锁定状态 */
.btn-challenge.done, .btn-grind.done, .btn-tingxie.done {
  background:#BFBFBF !important; color:#999 !important;
  cursor:not-allowed; box-shadow:none !important; transform:none !important;
}
.btn-challenge.done:hover, .btn-grind.done:hover, .btn-tingxie.done:hover {
  transform:none !important; box-shadow:none !important;
}
/* 按钮等待状态：有词但<16h，微弱色但可点击 */
.btn-grind.waiting {
  opacity:0.6; cursor:pointer; 
  box-shadow:0 2px 8px rgba(38,217,166,0.15) !important;
}
.btn-grind.waiting:hover {
  opacity:0.8; transform:translateY(-1px) !important;
}

/* ===== R9-R10: Four Pools ===== */
.four-pools { gap:8px !important; margin-bottom:18px !important; }
.four-pools .pool-card { padding:14px 6px; }
.four-pools .pool-num { font-size:24px; font-weight:800; }
.four-pools .pool-label { font-size:11px; }
.pool-unmastered .pool-num { color:var(--unmastered-color); }
.pool-pending .pool-num { color:var(--pending-color); }
.pool-srs .pool-num { color:var(--srs-color); }
.pool-mastered .pool-num { color:var(--mastered-color); }
.pool-unlearned .pool-num { color:#8a94a6; }
/* 五池布局（含未学习，语文主页） */
.five-pools { display:grid !important; grid-template-columns:repeat(5,1fr); gap:8px !important; margin-bottom:18px !important; }
.five-pools .pool-card { padding:14px 4px; }
.five-pools .pool-num { font-size:22px; font-weight:800; }
.five-pools .pool-label { font-size:10px; }

/* ===== R11: Bottom Buttons (3个) ===== */
.bottom-buttons { display:flex; gap:8px; margin-bottom:24px; }
.btn-wordlist {
  flex:1; padding:12px 6px; border:none; border-radius:14px; font-size:12px;
  font-weight:600; cursor:pointer; font-family:inherit; text-align:center;
  color:white; background:var(--secondary); transition:transform 0.2s;
}
.btn-wordlist:hover { transform:translateY(-1px); }
.btn-wordlist-route { background:var(--challenge-color); }
.btn-wordlist-all { background:var(--grind-color); }
.btn-wordlist-big { width:100%; margin-bottom:12px; padding:16px; font-size:15px; }

/* ===== Tab Bar ===== */
.tab-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  max-width: 480px; margin: 0 auto;
  display: flex; justify-content: space-around; align-items: center;
  background: var(--card); border-top: 1px solid rgba(0,0,0,0.06);
  padding: 6px 0 10px; z-index: 100;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.04);
}
.tab-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: none; cursor: pointer; padding: 4px 0;
  color: #999; font-family: inherit;
  transition: color 0.2s; position: relative;
}
.tab-btn.active { color: var(--primary); }
.tab-icon { line-height: 1; display: flex; align-items: center; justify-content: center; }
.tab-icon svg { width: 22px; height: 22px; transition: stroke 0.2s; }
.tab-label { font-size: 11px; font-weight: 600; white-space: nowrap; }

/* Screens without tab-bar (sub-pages) */
#screen-quiz, #screen-copy, #screen-onboarding, #screen-summary,
#screen-word-detail, #screen-info, #screen-profiles,
#screen-word-list, #screen-route-list, #screen-total-list { padding-bottom: 20px; }

/* ===== General Buttons ===== */
.btn-primary {
  background:var(--primary); color:white; border:none; padding:14px 28px;
  border-radius:16px; font-size:16px; font-weight:700; cursor:pointer;
  transition:all 0.2s; font-family:inherit;
}
.btn-primary:hover { background:var(--primary-dark); transform:translateY(-1px); }
.btn-primary:active { transform:translateY(0); }
.btn-big { width:100%; padding:16px; font-size:18px; border-radius:18px; margin-top:20px; }
.btn-icon {
  background:var(--card); border:none; width:44px; height:44px;
  border-radius:12px; font-size:22px; cursor:pointer; box-shadow:var(--shadow);
  display:inline-flex; align-items:center; justify-content:center;
}
.btn-back {
  background:none; border:none; font-size:16px; color:var(--text-light);
  cursor:pointer; font-family:inherit;
}
.btn-danger {
  width:100%; background:none; border:2px solid var(--error); color:var(--error);
  padding:12px; border-radius:14px; font-size:14px; font-weight:600;
  cursor:pointer; margin-top:20px; font-family:inherit;
}

/* ===== Profile System ===== */
.profile-indicator {
  font-size:13px; font-weight:700; color:#fff; padding:5px 12px;
  background:var(--primary); border-radius:20px; cursor:default;
  white-space:nowrap; box-shadow:0 2px 8px rgba(255,140,66,0.25);
}

/* 备选方案：白色底 + 橙色边框 + 橙色字 */
.profile-indicator-outline {
  font-size:13px; font-weight:700; color:var(--primary); padding:5px 12px;
  background:#fff; border:2px solid var(--primary); border-radius:20px; cursor:pointer;
  white-space:nowrap; transition:all 0.2s;
}
.profile-indicator-outline:hover { background:rgba(255,140,66,0.08); }
.profile-switch-row {
  display:flex; align-items:center; gap:10px; margin-top:6px;
}
.profile-switch-name {
  font-weight:600; font-size:14px; color:var(--text);
}
.btn-sm.btn-danger-sm-profile {
  border-color:var(--error); color:var(--error); background:transparent; padding:6px 10px;
}
.btn-sm.btn-danger-sm-profile:hover { background:#FFF1F0; }

/* Profiles page */
.profiles-header {
  display:flex; align-items:center; gap:12px; padding:16px 18px;
  font-size:18px; font-weight:700; color:var(--text);
}
.profiles-card {
  background:var(--card); border-radius:16px; padding:18px; margin:8px 18px;
  box-shadow:0 2px 8px var(--shadow);
}
.profiles-hint {
  font-size:12px; color:var(--text-light); margin-bottom:14px;
}
.profiles-list {
  display:flex; flex-direction:column; gap:10px; margin-bottom:16px;
}
.profile-item {
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:var(--bg); border-radius:12px; border:2px solid var(--border);
  transition:all 0.2s;
}
.profile-item.profile-active {
  border-color:var(--primary); background:var(--primary-light);
}
.profile-name {
  font-weight:600; font-size:15px; color:var(--text); flex:1;
}
.profile-badge {
  font-size:11px; font-weight:600; color:var(--primary);
  background:var(--primary-light); padding:3px 8px; border-radius:6px;
}
.profile-grade-tag {
  font-size:12px; font-weight:500; color:var(--text-light);
  background:var(--bg); padding:2px 6px; border-radius:4px; margin-left:4px;
}
.profile-grade-select {
  font-size:12px; font-weight:500; color:var(--text);
  background:var(--bg); padding:2px 6px; border:1.5px solid var(--border);
  border-radius:6px; margin-left:4px; cursor:pointer; font-family:inherit;
}
.profile-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.profile-rename-row { display:flex; align-items:center; gap:8px; width:100%; }
.profile-rename-row .profile-add-input { flex:1; min-width:0; }
.btn-rename-ok { border-color:var(--primary); color:var(--primary); }
.profiles-add {
  display:flex; gap:8px; align-items:center;
}
.profile-add-input {
  flex:1 1 0; min-width:0; padding:8px 12px; border:1.5px solid var(--border);
  border-radius:10px; font-size:14px; background:var(--bg);
  color:var(--text); font-family:inherit;
}
.profile-add-input:focus { border-color:var(--primary); outline:none; }
.profile-add-grade { flex:0 0 auto; min-width:90px; appearance:auto; cursor:pointer; }
.btn-add-profile {
  padding:8px 14px; font-size:13px; white-space:nowrap;
}

.btn-speak {
  background:var(--secondary); color:white; border:none; width:40px; height:40px;
  border-radius:50%; font-size:18px; cursor:pointer; transition:all 0.2s;
}
.btn-speak:hover { transform:scale(1.1); }
.btn-big-speak {
  width:auto; padding:14px 28px; border-radius:16px; font-size:16px;
  font-weight:600; margin:16px auto; display:block;
}

/* ===== Home Cards ===== */
.today-card {
  background:var(--card); border-radius:var(--radius); padding:24px 22px;
  box-shadow:var(--shadow); margin-bottom:20px;
}
.today-card h3 { font-size:17px; margin-bottom:0; }

.progress-bar {
  height:10px; background:#F0F0F0; border-radius:5px; overflow:hidden; margin-bottom:8px;
}
.progress-fill {
  height:100%; background:linear-gradient(90deg, var(--primary), var(--primary-light));
  border-radius:5px; transition:width 0.5s ease;
}
.progress-text { font-size:13px; color:var(--text-light); text-align:center; }

.word-pools { display:flex; gap:10px; margin-top:20px; }
.pool-card {
  flex:1; background:var(--card); border-radius:16px; padding:16px 8px;
  text-align:center; box-shadow:var(--shadow);
  cursor:pointer; transition:transform 0.15s, box-shadow 0.15s;
}
.pool-card:hover { transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,0.12); }
.pool-icon { font-size:28px; }
.pool-num { font-size:22px; font-weight:800; color:var(--text); }
.pool-label { font-size:12px; color:var(--text-light); }

/* ===== Learn Screen ===== */
.learn-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.session-info { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text-light); font-weight:600; }
.session-progress { color:var(--text); font-weight:700; }
.session-phase {
  padding:2px 10px; border-radius:8px; font-size:11px; background:#F0F0F0;
}

.word-card {
  background:var(--card); border-radius:30px; padding:36px 24px;
  text-align:center; box-shadow:var(--shadow); margin-bottom:20px;
}
.word-text { font-size:42px; font-weight:800; color:var(--primary); margin-bottom:4px; display:inline-block; }
.word-phonetic { font-size:18px; color:var(--secondary); margin:12px 0; }
.word-meaning-zh { font-size:22px; font-weight:700; margin:16px 0 6px; line-height:1.5; }
.word-meaning-en { font-size:14px; color:var(--text-light); margin:0 0 12px; line-height:1.5; font-style:italic; }
.word-example { font-size:15px; color:var(--text); margin-top:20px; padding:12px; background:var(--bg); border-radius:14px; line-height:1.6; }
.word-example-zh { font-size:14px; color:var(--text-light); margin-top:6px; }
.inflections { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:16px; }
.inflection-tag {
  background:var(--primary-light); color:white; padding:4px 12px;
  border-radius:10px; font-size:13px; font-weight:600;
}
.learn-actions { margin-top:10px; }

/* ===== Quiz Screen ===== */
.quiz-card {
  background:var(--card); border-radius:30px; padding:30px 24px;
  box-shadow:var(--shadow); min-height:400px;
}
.quiz-mode { font-size:13px; color:var(--text-light); text-transform:uppercase; letter-spacing:1px; margin-bottom:16px; }
.quiz-question { font-size:16px; color:var(--text-light); margin-bottom:12px; }
.quiz-word { font-size:36px; font-weight:800; color:var(--primary); margin-bottom:12px; }
.choice-options { display:flex; flex-direction:column; gap:12px; margin-top:24px; }
.choice-btn {
  padding:18px 20px; border:2px solid #EEE; background:var(--card);
  border-radius:16px; font-size:17px; font-weight:600; cursor:pointer;
  transition:all 0.2s; text-align:left; font-family:inherit;
}
.choice-btn:hover { border-color:var(--primary-light); }
.choice-btn.correct { border-color:var(--success); background:#F6FFED; color:var(--success); }
.choice-btn.wrong { border-color:var(--error); background:#FFF1F0; color:var(--error); }
/* ===== Spelling Quiz (Image3 style) ===== */
.spell-speaker-wrap {
  text-align:center; margin:8px 0 12px;
}
.spell-speaker-btn {
  width:72px !important; height:72px !important; border-radius:50% !important;
  background:linear-gradient(135deg, #7B68EE, #9B8BFF) !important;
  color:white; border:none !important; font-size:32px !important;
  cursor:pointer; display:inline-block !important; line-height:72px !important;
  padding:0 !important; box-shadow:0 4px 16px rgba(123,104,238,0.35) !important;
  transition:transform 0.2s, box-shadow 0.2s;
}
.spell-speaker-btn:hover { transform:scale(1.08); box-shadow:0 6px 22px rgba(123,104,238,0.45); }
.spell-speaker-btn:active { transform:scale(0.95); }
.spell-speaker-label {
  display:block; font-size:13px; color:var(--text-light); margin-top:8px;
}

.spell-hint-area {
  background:linear-gradient(135deg, #F5F0FF, #FAF5FF);
  border-radius:18px; padding:18px 20px; margin-bottom:20px;
}
.spell-meaning {
  font-size:17px; color:var(--text); font-weight:700; line-height:1.6;
  text-align:center;
}
.spell-example {
  font-size:14px; color:var(--text-light); margin-top:10px;
  line-height:1.7; font-style:italic;
  text-align:center;
}
.spell-example .spell-blank {
  display:inline-block; width:50px; border-bottom:2px solid var(--challenge-color);
  color:var(--challenge-color); font-weight:700; font-style:normal;
  text-align:center; vertical-align:baseline; margin:0 3px;
}

.spell-input {
  width:100% !important; padding:16px !important; border:2px solid #E0E0E0 !important; border-radius:16px !important;
  font-size:20px !important; text-align:center !important; font-family:'Nunito',monospace !important;
  letter-spacing:2px; margin:0 0 14px 0 !important; transition:border 0.2s;
  background:#FAFAFA !important; box-sizing:border-box !important;
}
.spell-input:focus { outline:none; border-color:var(--challenge-color); background:#FFF; }

.btn-spell-confirm {
  width:120px !important; padding:14px !important; border:2px solid var(--challenge-color) !important;
  background:transparent !important; color:var(--challenge-color) !important; border-radius:14px !important;
  font-size:16px !important; font-weight:700 !important; cursor:pointer;
  transition:all 0.2s; font-family:inherit; margin:0 auto !important; display:block !important;
}
.btn-spell-confirm:hover { background:var(--challenge-color); color:white; }

.spell-hint { font-size:15px; color:var(--text-light); }

/* ===== Feedback ===== */
.quiz-feedback { text-align:center; padding:20px 0; }
.feedback-icon { font-size:56px; margin-bottom:12px; }
.feedback-text { font-size:20px; font-weight:700; margin-bottom:8px; }
.feedback-word { font-size:15px; color:var(--text-light); margin-bottom:20px; line-height:1.6; }
.feedback-word strong { font-size:20px; color:var(--text); display:block; margin-bottom:6px; }
.feedback-word .fb-zh { color:var(--primary-dark); font-weight:600; }
.feedback-word .fb-en { color:var(--text-light); font-style:italic; font-size:13px; }
.feedback-word .fb-example { color:var(--secondary); font-size:13px; }
.hidden { display:none !important; }

/* ===== Summary ===== */
.summary-card {
  background:var(--card); border-radius:30px; padding:40px 24px;
  text-align:center; box-shadow:var(--shadow); margin-top:40px;
}
.summary-emoji { font-size:64px; margin-bottom:12px; }
.summary-card h2 { font-size:26px; color:var(--primary); margin-bottom:24px; }
.summary-stats { display:flex; justify-content:space-around; margin-bottom:24px; }
.summary-item { display:flex; flex-direction:column; gap:4px; }
.summary-num { font-size:28px; font-weight:800; color:var(--primary); }
.summary-label { font-size:13px; color:var(--text-light); }
.summary-message { font-size:15px; color:var(--text); margin-bottom:20px; line-height:1.6; }

/* ===== Settings Screen (Sheet3) ===== */
.settings-header {
  display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;
  font-size:18px; font-weight:700; color:var(--text);
}
.settings-card { padding:24px; }
.setting-group { margin-bottom:20px; }
.setting-label {
  display:block; font-size:14px; font-weight:600; margin-bottom:8px; color:var(--text);
}
/* 阻断阈值行 */
.threshold-row {
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin-bottom:6px;
}
.threshold-name { font-size:13px; color:var(--text); opacity:0.7; }
.threshold-input {
  width:60px; padding:6px 8px; border:2px solid #EEE; border-radius:8px;
  font-size:14px; font-weight:600; font-family:inherit; color:var(--text);
  background:var(--card); text-align:center; outline:none;
}
.threshold-input:focus { border-color:var(--challenge-color); }
#setting-goal {
  width:100%; padding:8px 10px; border:2px solid #EEE; border-radius:12px;
  font-size:14px; font-weight:600; font-family:inherit; color:var(--text);
  background:var(--card); cursor:pointer; outline:none;
}
#setting-goal:focus { border-color:var(--challenge-color); }
#setting-goal option { padding:5px 4px; }

/* 自定义每日目标下拉（单行 + 弹出5行列表） */
.goal-dropdown { position:relative; width:100%; }
.goal-trigger {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:10px 14px; border:2px solid #EEE; border-radius:12px;
  font-size:15px; font-weight:600; font-family:inherit; color:var(--text);
  background:var(--card); cursor:pointer;
  transition:border-color 0.2s;
}
.goal-trigger:hover { border-color:#CCC; }
.goal-arrow { font-size:11px; color:#999; transition:transform 0.2s; }
.goal-drop-open .goal-arrow { transform:rotate(180deg); }
.goal-drop-open .goal-trigger { border-color:var(--challenge-color); }
.goal-options {
  display:none; position:absolute; top:calc(100% + 4px); left:0; right:0;
  background:white; border:2px solid #EEE; border-radius:12px;
  max-height:170px; overflow-y:auto; z-index:100;
  box-shadow:0 6px 20px rgba(0,0,0,0.12);
}
.goal-drop-open .goal-options { display:block; }
.goal-opt {
  padding:7px 14px; font-size:14px; color:var(--text); cursor:pointer;
  transition:background 0.1s;
}
.goal-opt:hover { background:#F5F3FF; }
.goal-opt.active { background:#EDE9FE; color:var(--challenge-color); font-weight:700; }
.route-picker { display:flex; gap:8px; }
.rp-btn {
  flex:1; padding:10px 8px; border:2px solid #EEE; background:var(--bg);
  border-radius:12px; font-size:13px; font-weight:600; cursor:pointer;
  transition:all 0.2s; font-family:inherit;
}
.rp-btn.active { border-color:var(--challenge-color); background:var(--challenge-color); color:white; }

/* Theme picker */
.theme-picker { display:flex; gap:8px; }
.theme-btn {
  flex:1; padding:10px 8px; border:2px solid #EEE; background:var(--bg);
  border-radius:12px; font-size:13px; font-weight:600; cursor:pointer;
  transition:all 0.2s; font-family:inherit; color:var(--text);
}
.theme-btn.active { border-color:var(--challenge-color); background:var(--challenge-color); color:white; }
.theme-btn:hover { border-color:var(--primary-light); }

/* ===== Stats Screen (inside settings) ===== */
.stats-card {
  background:var(--card); border-radius:var(--radius); padding:24px;
  box-shadow:var(--shadow); margin-bottom:20px;
}
.stats-row { display:flex; gap:12px; margin-bottom:12px; }
.stats-item {
  flex:1; text-align:center; padding:16px 8px; background:var(--bg); border-radius:14px;
}
.stats-icon { font-size:28px; }
.stats-val { font-size:24px; font-weight:800; color:var(--primary); }
.stats-cap { font-size:12px; color:var(--text-light); }

.level-info { margin-top:20px; }
.level-bar { height:12px; background:#F0F0F0; border-radius:6px; overflow:hidden; }
.level-fill {
  height:100%; background:linear-gradient(90deg, var(--primary), #FFD700);
  border-radius:6px; transition:width 0.5s;
}
.level-text { font-size:13px; color:var(--text-light); text-align:center; margin-top:8px; }

/* ===== Animations ===== */
@keyframes fadeIn {
  from { opacity:0; transform:translateY(10px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes slideInRight {
  from { opacity:0; transform:translateX(30px); }
  to { opacity:1; transform:translateX(0); }
}
@keyframes slideInLeft {
  from { opacity:0; transform:translateX(-30px); }
  to { opacity:1; transform:translateX(0); }
}
@keyframes bounce { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }
@keyframes elasticBounce {
  0% { transform:scale(0.3); opacity:0; }
  50% { transform:scale(1.05); }
  70% { transform:scale(0.9); }
  100% { transform:scale(1); opacity:1; }
}
@keyframes ripple {
  0% { transform:scale(0); opacity:0.5; }
  100% { transform:scale(4); opacity:0; }
}
.bounce { animation:bounce 0.4s ease; }
.shake { animation:shake 0.3s ease; }
.elastic-bounce { animation:elasticBounce 0.6s ease; }

/* Screen transitions */
.screen.slide-in-right { animation:slideInRight 0.3s ease; }
.screen.slide-in-left { animation:slideInLeft 0.3s ease; }

/* Button ripple effect */
.ripple {
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
  transform:scale(0);
  animation:ripple 0.6s ease-out;
  pointer-events:none;
}

/* Enhanced card hover */
.pool-card:hover { 
  transform:translateY(-4px); 
  box-shadow:0 8px 25px rgba(0,0,0,0.15); 
  transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== Toast System ===== */
.toast {
  position:fixed; top:20px; left:50%; transform:translateX(-50%);
  z-index:9999; padding:12px 24px;
  background:linear-gradient(135deg, #FFD700, #FFA500);
  color:#333; border-radius:12px;
  font-size:14px; font-weight:600; text-align:center;
  opacity:0; transition:opacity 0.3s, transform 0.3s;
  pointer-events:none; box-shadow:0 4px 20px rgba(255,165,0,0.3);
  max-width:90vw; white-space:pre-line;
}
.toast.show {
  opacity:1; transform:translateX(-50%) translateY(0);
}
[data-theme="dark"] .toast {
  background:linear-gradient(135deg, #FFD700, #FFA500);
  color:#222; box-shadow:0 4px 20px rgba(255,165,0,0.4);
}

/* ===== Stats Calendar Modal ===== */
.calendar-overlay {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.5); z-index:9998;
  display:flex; align-items:center; justify-content:center;
}
.calendar-modal {
  background:var(--card); border-radius:20px; padding:20px;
  width:90%; max-width:360px; box-shadow:var(--shadow);
}
.calendar-header {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:12px;
}
.calendar-title { font-size:18px; font-weight:700; color:var(--text-main); }
.calendar-close { font-size:20px; color:var(--text-sub); cursor:pointer; padding:4px 8px; }
.calendar-nav {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:10px;
}
.cal-nav-btn {
  font-size:22px; color:var(--primary); cursor:pointer; padding:4px 12px;
  font-weight:700; transition:opacity 0.2s; user-select:none;
}
.cal-nav-month { font-size:16px; font-weight:600; color:var(--text-main); }
.calendar-weekdays {
  display:grid; grid-template-columns:repeat(7,1fr); gap:2px;
  margin-bottom:4px;
}
.calendar-weekdays span {
  text-align:center; font-size:12px; color:var(--text-sub); padding:4px 0;
}
.calendar-grid {
  display:grid; grid-template-columns:repeat(7,1fr); gap:2px;
}
.cal-cell {
  aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:13px; border-radius:8px; position:relative;
  color:var(--text-main); padding:2px 0;
}
.cal-day-num { line-height:1.2; }
.cal-day-stats {
  font-size:9px; line-height:1.1; opacity:0.85; margin-top:1px;
  white-space:nowrap;
}
.cal-cell.empty { background:transparent; }
.cal-cell.has-day { background:var(--bg); }
.cal-cell.cal-green {
  background:#34C759; color:#fff; font-weight:600;
}
.cal-cell.cal-red {
  background:#FF3B30; color:#fff; font-weight:600;
}
.cal-cell.cal-gray {
  background:#E8E8E8; color:#999; 
}
[data-theme="dark"] .cal-cell.cal-gray {
  background:#2A2A2A; color:#555;
}
.cal-cell.cal-future { color:var(--text-sub); opacity:0.4; }
.cal-cell.cal-today { border:2px solid var(--primary); }
.calendar-legend {
  display:flex; gap:16px; justify-content:center; margin-top:12px;
}
.cal-legend-item {
  display:flex; align-items:center; gap:4px; font-size:12px; color:var(--text-sub);
}
.cal-dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.cal-dot-green { background:#34C759; }
.cal-dot-red { background:#FF3B30; }
.cal-dot-gray { background:#E8E8E8; border:1px solid #DDD; }
[data-theme="dark"] .cal-dot-gray { background:#2A2A2A; border-color:#333; }

.wl-item:hover {
  transform:translateY(-2px); 
  box-shadow:0 4px 15px rgba(0,0,0,0.1); 
  transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Input focus enhancement */
.spell-input:focus {
  box-shadow:0 0 0 3px rgba(123,104,238,0.2);
  transition:all 0.2s ease;
}

/* Feedback elastic animation */
#quiz-feedback:not(.hidden) {
  animation:elasticBounce 0.6s ease;
}

/* ===== Responsive ===== */
@media (max-width:360px) {
  .word-text { font-size:34px; } .quiz-word { font-size:30px; }
  .summary-stats { gap:8px; } .plan-num { font-size:26px; }
  .btn-challenge,.btn-grind { font-size:18px; padding:16px 12px; }
  .four-pools .pool-label { font-size:10px; }
  .bottom-buttons { flex-direction:column; }
  .bottom-buttons .btn-wordlist { font-size:13px; padding:14px; }
}

/* ================================================================
   Word List Screen (子选项单词表 - Screenshot 1)
   ================================================================ */
.wl-header {
  display:flex; align-items:center; gap:12px; padding:16px 20px 8px;
}
.wl-level-select {
  padding:6px 12px; border:2px solid #EEE; border-radius:10px;
  font-size:13px; font-weight:600; font-family:inherit; color:var(--text);
  background:var(--card); cursor:pointer; outline:none; max-width:130px;
}
.wl-title { font-size:17px; font-weight:700; }
.wl-subtitle { font-size:13px; color:var(--text-light); padding:4px 22px 10px; }
.wl-header-actions { display:flex; gap:8px; align-items:center; margin-left:auto; }
.wl-header-btn {
  padding:6px 12px; border:1.5px solid #EEE; border-radius:10px;
  font-size:13px; font-weight:600; cursor:pointer; font-family:inherit;
  background:var(--card); color:var(--text); transition:all 0.2s;
  white-space:nowrap;
}
.wl-header-btn:hover { border-color:var(--primary-light); background:#FAFAFC; }
.wl-header-btn.danger { border-color:rgba(231,76,60,0.35); color:#E74C3C; }
.wl-header-btn.danger:hover { background:rgba(231,76,60,0.08); }
.wl-search-box {
  display:flex; align-items:center; gap:8px; margin:0 20px 16px;
  padding:10px 14px; background:#F7F7F9; border-radius:14px; border:1.5px solid #EDEDF0;
}
.wl-search-icon { font-size:15px; flex-shrink:0; }
.wl-search-box input {
  flex:1; border:none; background:none; outline:none; font-size:15px;
  color:var(--text); font-family:inherit;
}
.wl-search-box input::placeholder { color:#BBB; }

/* 单词列表行 */
.wl-word-list { padding:0 18px 24px; display:flex; flex-direction:column; gap:8px; }
.wl-word-list.selecting { padding-bottom:20px; }
.wl-item {
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  background:var(--card); border-radius:14px; border:1.5px solid #F0F0F2;
  cursor:pointer; transition:all 0.15s;
}
.wl-item:hover { border-color:#D0D0D5; transform:translateY(-1px); box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.wl-word-text { font-size:19px; font-weight:700; color:var(--text); min-width:70px; flex-shrink:0; }
.wl-meaning { font-size:14px; color:var(--text-light); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 英语/语文字表状态徽章共用基底 */
.wl-status-tag, .cn-wl-status {
  display:inline-flex; align-items:center; justify-content:center;
  height:24px; line-height:1; font-size:12px; padding:2px 8px;
  border-radius:4px; white-space:nowrap; box-sizing:border-box; flex-shrink:0;
}
/* 五种学习状态颜色统一：未学习灰色，其余与首页四池数字颜色一致 */
.wl-status-unlearned, .cn-wl-status-unlearned { background:rgba(150,150,150,0.15); color:#999; }
.wl-status-unmastered, .cn-wl-status-unmastered { background:rgba(231,76,60,0.15); color:var(--unmastered-color); }
.wl-status-pending, .cn-wl-status-pending { background:rgba(243,156,18,0.15); color:var(--pending-color); }
.wl-status-srs, .cn-wl-status-srs { background:rgba(123,104,238,0.15); color:var(--srs-color); }
.wl-status-mastered, .cn-wl-status-mastered { background:rgba(39,174,96,0.15); color:var(--mastered-color); }
.wl-speak-icon {
  width:32px; height:32px; border-radius:50%; background:#F0F2F5;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:14px; flex-shrink:0; border:none;
  transition:background 0.15s;
}
.wl-speak-icon:hover { background:#E0E2E5; }
.wl-empty { text-align:center; padding:40px 20px; color:var(--text-light); font-size:15px; }
.wl-select-checkbox {
  width:20px; height:20px; border:2px solid #D0D0D5; border-radius:6px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background:var(--card); transition:all 0.15s;
}
.wl-select-checkbox.checked { background:var(--primary); border-color:var(--primary); color:#fff; }
.wl-item.selecting { cursor:pointer; }
.wl-item.selecting:hover { border-color:var(--primary-light); }
.wl-item.selected { border-color:var(--primary); background:rgba(var(--primary-rgb, 123,104,238), 0.06); }
.wl-select-bar {
  position:fixed; left:0; right:0; bottom:0; background:var(--card);
  border-top:1.5px solid #F0F0F2; padding:12px 18px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  z-index:100; box-shadow:0 -4px 20px rgba(0,0,0,0.06);
}
.wl-select-info { font-size:14px; color:var(--text-light); }
.wl-select-info strong { color:var(--text); }
.wl-select-actions { display:flex; gap:10px; }

/* Pool action buttons */
.wl-pool-actions { display:flex; justify-content:flex-end; gap:8px; }
.btn-sm {
  padding:6px 12px; border:1.5px solid #EEE; border-radius:8px;
  font-size:12px; font-weight:600; cursor:pointer; font-family:inherit;
  background:var(--card); color:var(--text); transition:all 0.2s;
}
.btn-sm:hover { border-color:var(--primary-light); }

/* ================================================================
   Route List Screen (路线单词表 - Screenshot 2)
   ================================================================ */
.rl-header {
  display:flex; align-items:center; gap:12px; padding:16px 20px 8px;
}
.rl-title { font-size:20px; font-weight:800; }
.rl-grid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;
  padding:16px 18px 28px;
}
.rl-card {
  background:var(--card); border-radius:18px; padding:18px 14px;
  text-align:center; position:relative; cursor:pointer;
  border:2px solid #EEE; transition:all 0.2s;
  box-shadow:var(--shadow);
}
.rl-card:hover { border-color:var(--primary-light); transform:translateY(-2px); box-shadow:0 4px 14px rgba(0,0,0,0.08); }
.rl-card-num {
  font-size:30px; font-weight:800; color:var(--primary);
}
.rl-card-range { font-size:13px; color:var(--text-light); margin-top:4px; }
.rl-card-bottom {
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:10px;
}
.rl-card-count { font-size:13px; color:var(--text-light); font-weight:600; white-space:nowrap; }
.rl-card-bar {
  flex:1; max-width:80px; height:5px; background:#EDEDF0; border-radius:3px; overflow:hidden;
}
.rl-card-fill {
  height:100%; background:linear-gradient(90deg, var(--primary), #A78BFA);
  border-radius:3px; transition:width 0.4s ease;
}
.rl-dot {
  position:absolute; top:10px; right:10px; width:10px; height:10px;
  border-radius:50%; background:#10B981;
}

/* ================================================================
   Total List Screen (总单词表)
   ================================================================ */
.tl-header {
  display:flex; align-items:center; gap:12px; padding:16px 20px 8px;
}
.tl-title { font-size:20px; font-weight:800; }
.tl-body { padding:8px 18px 28px; }
.tl-section { margin-bottom:24px; }
.tl-section-title {
  font-size:16px; font-weight:700; color:var(--text);
  margin:16px 0 12px; padding-left:4px;
}
.tl-btn-grid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;
}
.tl-grid-2col {
  grid-template-columns:repeat(2, 1fr);
}
/* Wide cards: 2 columns for route list (国际/国内路线) */
.tl-wide-grid {
  display:grid; grid-template-columns:repeat(2, 1fr); gap:12px;
}
.tl-card {
  background:var(--card); border-radius:18px; padding:18px 14px;
  text-align:center; position:relative; cursor:pointer;
  border:2px solid #EEE; transition:all 0.2s;
  box-shadow:var(--shadow);
}
.tl-card:hover { border-color:var(--primary-light); transform:translateY(-2px); box-shadow:0 4px 14px rgba(0,0,0,0.08); }
.tl-card-num {
  font-size:30px; font-weight:800; color:var(--primary);
}
.tl-card-range { font-size:13px; color:var(--text-light); margin-top:4px; }
.tl-card-bottom {
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:10px;
}
.tl-card-count { font-size:13px; color:var(--text-light); font-weight:600; white-space:nowrap; }
.tl-card-bar {
  flex:1; max-width:80px; height:5px; background:#EDEDF0;
  border-radius:3px; overflow:hidden;
}
.tl-card-fill {
  height:100%; background:linear-gradient(90deg, var(--primary), #A78BFA);
  border-radius:3px; transition:width 0.4s ease;
}
.tl-dot {
  position:absolute; top:10px; right:10px; width:10px; height:10px;
  border-radius:50%; background:#10B981;
}

/* Wide card variant (国际/国内路线 — 2列, 扁长形, 显示名称) */
.tl-wide {
  padding:14px 18px !important;
  text-align:left !important;
}
.tl-wide-name {
  font-size:18px !important; font-weight:700; color:var(--primary) !important;
}
.tl-wide-bottom {
  display:flex; align-items:center; gap:10px;
  margin-top:8px;
}
.tl-wide-count {
  font-size:13px; color:var(--text-light); font-weight:600; white-space:nowrap;
}
.tl-wide-bar {
  flex:1; height:6px; background:#EDEDF0; border-radius:3px; overflow:hidden;
}

/* ================================================================
   Word Detail Screen (单词详情页)
   ================================================================ */
.wd-header {
  display:flex; align-items:center; gap:12px; padding:16px 20px 8px;
  font-size:18px; font-weight:700;
}
.wd-card {
  background:var(--card); border-radius:24px; padding:26px 22px;
  box-shadow:var(--shadow); margin:0 18px;
}
.wd-word-row {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.wd-word { font-size:34px; font-weight:800; color:var(--primary); margin:0; }
.btn-lg-speak {
  width:42px; height:42px; border-radius:50%; background:#F0F2F5;
  font-size:18px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; border:none; flex-shrink:0;
}
.btn-lg-speak:hover { background:#E0E2E5; }
.wd-phonetic { font-size:16px; color:var(--text-light); margin-top:6px; font-style:italic; }
.wd-meaning-zh { font-size:16px; font-weight:500; color:var(--text); margin-top:14px; line-height:1.8; }
.wd-pos-item { display:flex; align-items:baseline; gap:6px; padding:2px 0; }
.wd-pos-tag { color:var(--primary); font-weight:700; font-size:14px; white-space:nowrap; flex-shrink:0; min-width:36px; }
.wd-pos-text { font-size:15px; color:var(--text); word-break:break-all; }
.wd-meaning-en { font-size:13px; color:var(--text-light); margin-top:8px; line-height:1.5; }
.wd-section { margin-top:20px; padding-top:18px; border-top:1px solid #F0F0F2; }
.wd-section h3 { font-size:15px; font-weight:700; color:var(--text-light); margin:0 0 8px; }
.wd-example-en { font-size:14px; color:var(--text); line-height:1.6; font-style:italic; margin:0 0 4px; }
.wd-example-zh { font-size:13px; color:var(--text-light); margin:0; }
/* Word detail - learning history（对齐听写详情页：简洁行，无背景色块） */
.wd-history { list-style:none; padding:0; margin:4px 0 0; }
.wd-hist-item { padding:4px 0; border-bottom:1px dashed var(--border); font-size:15px; display:flex; align-items:center; gap:8px; }
.hist-correct { color:#2E9E5B; font-weight:600; }
.hist-wrong { color:#FF6347; font-weight:600; }
.wd-hist-empty { color:var(--text-light); font-size:13px; padding:8px 0; }
/* 详情页「下次复习」行 */
.wd-next-review { display:flex; justify-content:space-between; align-items:center; padding:4px 0; border-bottom:1px dashed var(--border); font-size:15px; }
.wd-next-review .nr-label { color:var(--text-light); }
.wd-next-review .nr-value { font-weight:700; color:var(--text); }

/* ================================================================
   Copy Practice Screen (抄写3遍 + 默写2遍)
   ================================================================ */
.copy-word-area {
  text-align:center; margin:20px 0 8px; position:relative;
}
.copy-word {
  font-size:40px; font-weight:800; color:var(--primary);
  letter-spacing:1px; word-break:break-word; line-height:1.3;
  transition:all 0.3s; display:inline-block;
}
/* 默写模式：遮住单词 */
.copy-word.copy-word-masked {
  color:transparent;
  background:linear-gradient(135deg, #E8E8E8, #F5F5F5);
  border-radius:12px;
  padding:4px 28px;
  user-select:none;
  position:relative;
}
.copy-word.copy-word-masked::before {
  content:'????';
  position:absolute;
  left:50%; top:50%; transform:translate(-50%,-50%);
  color:var(--text-light); font-size:32px; letter-spacing:6px; font-weight:700;
}
.copy-word-area .btn-speak {
  display:inline-block; margin-left:8px;
  vertical-align:middle; font-size:20px;
  background:none; border:none; cursor:pointer; color:var(--secondary);
  transition:transform 0.15s;
}
.copy-word-area .btn-speak:hover { transform:scale(1.2); }
.copy-phonetic {
  text-align:center; font-size:16px; color:var(--text-light);
  margin-bottom:6px; font-family:'Nunito',monospace;
}
.copy-meaning {
  text-align:center; font-size:15px; color:var(--text);
  margin-bottom:28px; line-height:1.6; padding:0 12px;
}
.copy-input {
  width:100% !important; padding:16px !important;
  border:2px solid #E0E0E0 !important; border-radius:16px !important;
  font-size:22px !important; text-align:center !important;
  font-family:'Nunito',monospace !important;
  letter-spacing:3px; margin:0 0 10px 0 !important;
  transition:all 0.2s; background:#FAFAFA !important;
  box-sizing:border-box !important;
}
.copy-input:focus { outline:none; border-color:var(--primary-light); background:#FFF; }
.copy-input-typing { border-color:var(--primary-light) !important; background:#FFFEF8 !important; }
.copy-input-correct { border-color:var(--success) !important; background:#F6FFED !important; color:var(--success); }
.copy-input-wrong { border-color:var(--error) !important; background:#FFF1F0 !important; animation:copyShake 0.3s; }

@keyframes copyShake {
  0%,100% { transform:translateX(0); }
  25% { transform:translateX(-4px); }
  75% { transform:translateX(4px); }
}

.copy-feedback {
  text-align:center; font-size:15px; font-weight:600;
  min-height:24px; margin-bottom:16px; transition:all 0.2s;
}
.copy-feedback.copy-correct { color:var(--success); }
.copy-feedback.copy-wrong { color:var(--error); }

.copy-actions {
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.btn-copy-peek {
  padding:12px 16px; border:1.5px solid var(--secondary); border-radius:14px;
  background:transparent; color:var(--secondary); font-size:13px;
  font-weight:600; cursor:pointer; font-family:inherit; transition:all 0.2s;
}
.btn-copy-peek:hover { background:#F0F6FF; }
.btn-copy-skip {
  padding:12px 20px; border:1.5px solid #E0E0E0; border-radius:14px;
  background:var(--card); color:var(--text-light); font-size:14px;
  font-weight:600; cursor:pointer; font-family:inherit; transition:all 0.2s;
}
.btn-copy-skip:hover { border-color:var(--text-light); color:var(--text); }
.btn-copy-next {
  padding:12px 28px; border-radius:14px; font-size:15px;
}

/* Pool list - copy button */
.btn-copy-sm {
  border-color:var(--secondary); color:var(--secondary); background:transparent;
}
.btn-copy-sm:hover { background:#F0F6FF; }

/* ================================================================
   Tab Screens: English / Chinese / Me
   ================================================================ */
.page-header { padding: 16px 0 8px; }
.page-header h2 { font-size: 22px; font-weight: 800; color: var(--text); }
.cn-wl-header { display:flex; align-items:center; gap:12px; }
.cn-wl-header h2 { margin-left:auto; }

/* English */
.english-entries { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }

/* Chinese */
/* ===== Coming Soon Pages (math/game) ===== */
.coming-soon-page {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 50vh; text-align: center; color: var(--text-light);
}
.coming-soon-emoji { font-size: 64px; margin-bottom: 16px; opacity: 0.5; }
.coming-soon-text { font-size: 18px; font-weight: 700; color: var(--text); margin: 4px 0; }
.coming-soon-hint { font-size: 13px; color: var(--text-light); margin-top: 8px; }

/* Chinese Placeholder (原有样式恢复) */
.chinese-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 50vh; text-align: center; color: var(--text-light);
}
.placeholder-emoji { font-size: 64px; margin-bottom: 16px; }
.chinese-placeholder p { font-size: 16px; font-weight: 600; color: var(--text); margin: 4px 0; }
.placeholder-hint { font-size: 13px !important; color: var(--text-light) !important; font-weight: 400 !important; }

/* ===== Tab Bar (灰化Tab) ===== */
.tab-btn.tab-coming {
  opacity: 0.5; cursor: default;
}
.tab-badge {
  position: absolute; top: -2px; right: 2px;
  font-size: 7px; font-weight: 700; color: white;
  background: var(--primary); padding: 1px 3px; border-radius: 4px;
  white-space: nowrap; line-height: 1.3;
  writing-mode: horizontal-tb;
}

/* home 单词表入口 */
.home-wordlist-entries { display: flex; gap: 8px; padding: 0 18px 20px; }
.home-wordlist-entries .btn-wordlist-big { flex: 1; margin-bottom: 0; padding: 10px 4px; font-size: 12px; width: auto; }

/* Me */
.me-card {
  background: var(--card); border-radius: 18px; padding: 18px;
  box-shadow: var(--shadow); margin-bottom: 14px;
}
.me-profile-row {
  display: flex; align-items: center; gap: 14px;
}
.me-avatar { font-size: 40px; line-height: 1; cursor: pointer; transition: transform 0.15s; }
.me-avatar:active { transform: scale(0.9); }
.me-profile-info { flex: 1; display: flex; flex-direction: column; }
.me-name { font-size: 18px; font-weight: 700; color: var(--text); }
.me-sub { font-size: 12px; color: var(--text-light); margin-top: 2px; }
.me-grade-tag {
  font-size:11px; font-weight:600; color:var(--text);
  border:1px solid var(--border); border-radius:5px;
  padding:1px 6px; display:inline-block; margin-top:2px;
}
.me-gender-grade { display:flex; align-items:center; gap:5px; margin-top:2px; }
.me-grade-row { display: none; }

/* 用户名行：名字+等级+会员 */
.me-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.me-level-badge {
  font-size: 11px; font-weight: 700; color: #fff;
  padding: 2px 7px; border-radius: 8px;
  background: linear-gradient(135deg, #4A90D9, #6BB6FF);
  white-space: nowrap;
}
.me-vip-badge {
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 8px;
  white-space: nowrap;
}

/* VIP卡 */
.me-vip-card {
  border-radius: 18px; margin-bottom: 14px; overflow: hidden;
  cursor: pointer; transition: transform 0.2s;
}
.me-vip-card:active { transform: scale(0.98); }
.vip-card-free {
  background: linear-gradient(135deg, #FF8C42, #FFB347);
  padding: 18px; display: flex; align-items: center; gap: 14px;
}
.vip-card-free .vip-icon { font-size: 36px; }
.vip-card-free .vip-info { flex: 1; }
.vip-card-free .vip-title { font-size: 16px; font-weight: 700; color: #fff; }
.vip-card-free .vip-desc { font-size: 12px; color: rgba(255,255,255,0.85); margin-top: 2px; }
.vip-card-free .vip-arrow { font-size: 20px; color: rgba(255,255,255,0.7); }
.vip-card-vip {
  background: linear-gradient(135deg, #2C2C2C, #4A3F1A);
  padding: 18px; display: flex; align-items: center; gap: 14px;
}
.vip-card-vip .vip-icon { font-size: 36px; }
.vip-card-vip .vip-info { flex: 1; }
.vip-card-vip .vip-title { font-size: 16px; font-weight: 700; color: #FFD700; }
.vip-card-vip .vip-desc { font-size: 12px; color: rgba(255,215,0,0.7); margin-top: 2px; }

/* 学习统计 */
.me-section-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 12px; }
/* 学习统计网格 */
.me-stats-grid { display: grid; gap: 8px; }
.me-stats-top { grid-template-columns: repeat(3, 1fr); margin-bottom: 8px; }
.me-stats-subjects { grid-template-columns: repeat(3, 1fr); }
.me-stat-item {
  text-align: center; background: var(--bg); border-radius: 12px; padding: 12px;
}
.me-stat-num { display: block; font-size: 22px; font-weight: 800; color: var(--challenge-color); }
.me-stat-label { font-size: 11px; color: var(--text-light); }
.me-stats-total { text-align: center; font-size: 11px; color: #BBB; margin-top: 8px; }

/* 关于 */
.me-about-text { font-size: 14px; color: var(--text); margin-bottom: 4px; }
.me-about-sub { font-size: 11px; color: var(--text-light); margin-top: 6px; }

/* 班级入口 */
.me-class-entry {
  display: flex; align-items: center; padding: 14px 0;
  border-bottom: 1px solid var(--border, #EEE);
  cursor: pointer;
}
.me-class-entry:last-child { border-bottom: none; }
.me-class-icon { font-size: 22px; margin-right: 12px; }
.me-class-label { flex: 1; font-size: 15px; color: var(--text); }
.me-class-arrow { font-size: 18px; color: var(--text-light); }

/* ================================================================
   积分游戏页面
   ================================================================ */
/* ===== 星币中心 头部（王者风） ===== */
/* ===== 星币游戏页 · 星际暗黑系全屏背景 ===== */
#screen-game {
  position: relative; padding: 0; padding-bottom: 64px; color: #fff;
  overflow: hidden;
  background:
    radial-gradient(1.6px 1.6px at 18% 22%, rgba(255,255,255,0.95), transparent),
    radial-gradient(1.4px 1.4px at 72% 14%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.8px 1.8px at 44% 38%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1.2px 1.2px at 86% 52%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.3px 1.3px at 58% 66%, rgba(255,255,255,0.75), transparent),
    radial-gradient(1.1px 1.1px at 12% 78%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 92% 84%, rgba(255,255,255,0.85), transparent),
    radial-gradient(2px 2px at 30% 90%, rgba(255,255,255,0.7), transparent),
    radial-gradient(900px 620px at 78% 12%, rgba(126,72,224,0.38), transparent 60%),
    radial-gradient(760px 540px at 12% 88%, rgba(36,96,210,0.32), transparent 60%),
    radial-gradient(640px 480px at 50% 50%, rgba(180,80,200,0.12), transparent 70%),
    linear-gradient(160deg, #080818 0%, #141033 46%, #0C0A26 100%);
  background-attachment: fixed;
}
#screen-game.active {
  display: flex; flex-direction: column;
  position: fixed; top: 0; bottom: 64px; left: 0; right: 0;
  max-width: 480px; margin: 0 auto;
  /* v10（2026-10-10 fix10）：这里有三个坑，缺一不可：
     ① 不能写 height:auto —— 会让 fixed 元素按内容撑开、忽略 bottom；
     ② 必须显式 height = 视口 - 底部导航 64px；
     ③ 必须加 min-height:0 —— flex 容器默认 min-height:auto 会强制元素不低于内容高度
        （实测 min-height 计算值 = 完整视口高 800px，导致 height 怎么写都被架空），
        这是「最后一个游戏方块被底部导航挡住」的真正元凶。 */
  height: calc(100vh - 64px);
  min-height: 0;
  padding: 0; overflow: hidden; z-index: 1;
}
#screen-game::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(680px 420px at 50% -5%, rgba(122,92,255,0.22), transparent 70%);
}
#screen-game > *:not(.rule-modal-overlay):not(.mount-wall-overlay):not(.char-wall-overlay):not(.backpack-overlay):not(.cardpack-overlay):not(.shop-overlay) { position: relative; z-index: 1; }

.game-hero {
  display: flex; align-items: center; gap: 14px;
  margin: 16px; padding: 16px 18px;
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 22px; color: #fff; position: relative;
  box-shadow: 0 10px 34px rgba(0,0,0,0.40);
}
.game-hero-info { flex: 1; min-width: 0; }
.game-hero-name { font-size: 18px; font-weight: 700; color: #fff; }
.game-hero-rank {
  font-size: 20px; font-weight: 800; margin-top: 4px;
  background: linear-gradient(90deg, #FFE08A, #FF8C42);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 18px rgba(255,160,60,0.25);
}
.game-hero-currency { display: flex; gap: 8px; margin-top: 12px; }

/* ===== 王者荣耀式货币（内嵌名字模块） ===== */
.cur-item {
  flex: 1; display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px; padding: 7px 10px;
  cursor: pointer; transition: transform 0.15s;
}
.cur-item:active { transform: scale(0.97); }
.cur-icon { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.cur-coin {
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #FFE9A8, #F5A623 65%, #C77F12);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.45), 0 1px 3px rgba(0,0,0,0.2);
}
.cur-diamond { font-size: 17px; line-height: 1; filter: drop-shadow(0 0 4px rgba(120,200,255,0.7)); }
.cur-num { font-size: 17px; font-weight: 800; color: #fff; flex: 1; }
.cur-plus {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #FF8C42, #FFB347); color: #fff;
  font-size: 16px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(255,140,66,0.45);
}

/* ===== 主舞台：人物（无边框大图）+ 坐骑背景 + 游戏方块（可滚动列） ===== */
.game-stage { display: flex; gap: 12px; margin: 6px 16px 12px; align-items: stretch; flex: 1; min-height: 0; }

/* 画布：撑满整行 + 向下延伸的星空（fix33 · 2026-10-11）
   「画布下方是空白」的根因：.game-stage 是 flex:1 的行（行高 = 屏幕剩余高度），
   而 .stage-left 原来只按「460/760 比例框」占高 → 行内下方留出 100~200px 空白。
   改法：.stage-left 自己撑满整行（flex:1 1 0 + height:100%），构图交给内部
   「构图框」.stage-frame（左 0 / 上 0 / 宽 100% / 460:760）。
   → 框内所有百分比定位（人物 / 座骑 / 星空）与改动前**逐像素一致**，
     框下方多出来的部分 = 延伸的星空。
   ⚠️ .stage-frame 绝不能加 overflow:hidden（人物立绘允许溢出框边，裁了会切脚）。
   ⚠️ 宽度仍由 flex 决定 = 行宽 − 右侧列（fix35 起 72，原 96）− gap 12。 */
.stage-left {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  min-height: 0;
  margin-top: 0;
  background-color: #14103A;
  border-radius: 26px; overflow: hidden;
  /* fix41（2026-10-11）· 构图错位旋钮（Tina：「坐骑可以往右边放一点，人物往左边站一点，
     人物不要移动太多，……位置变一点，错开些就好了」）
     原来两者都 `left:50%` 完全重叠 → 人物正好压在坐骑正中，坐骑只露出左右两条边。
     现在把坐骑右移、人物左移，让两者**错开**：坐骑从人物右侧露出来。
     ⚠️ 以后微调只改这两个值（百分比基准 = 构图框 .stage-frame 宽度）。
     ⚠️ 人物幅度必须小于坐骑（Tina：「人物不要移动太多」）—— 人物挪多了会顶到左边框、
        且与「人物居中打招呼」的既有观感冲突。 */
  --mount-x: 63%;   /* 坐骑水平位置（原 50% → fix41 55% → fix42 63%）→ 主要靠坐骑承担错位量 */
  --char-x: 43%;    /* 人物水平位置（原 50% → fix41 47.5% → fix42 43%）
                       ⚠️ 幅度仍小于坐骑（Tina：「人物不要移动太多」），但 fix42 起差距拉大 =
                       错开更明显（Tina：「还可以分开一些」）。 */
}
/* 右侧按钮列（fix35 · 2026-10-11）：96px → 72px。
   Tina：「按钮可以再窄一点，成一个类似正方形的样子，现在宽了点」。
   省下的 24px 全部让给左侧星空画布（280 → 304），构图框随之变高 463 → 502
   → 人物/坐骑等比变大、画布下方空白同步收窄（「把空白的地方用到画布里」）。
   ⚠️ 必须同时改 .stage-right 宽度与 .game-widget 高度，两者共同决定方块长宽比。 */
/* 构图框：与原画布同尺寸（宽 100%、高 = 宽 / 0.605），锚在画布**顶部**。
   max-height:100% 是矮窗（横屏手机）兜底：框被压扁时人物等比缩小，脚不会被裁。 */
.stage-frame {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  aspect-ratio: 460 / 760;
  max-height: 100%;
}
/* 画布内的星空背景图（fix35 重做定位：把最亮的星云核心放到左上角）。
   ⚠️ 先看这条为什么不能用 object-fit:cover + object-position 调：
     cover 在「画布比图更瘦高」时按高度撑满 → 图高 = 画布高，
     于是图内 (50%,41%) 那团星云核心落在画布 41% 高处、横向只能靠 X% 左右挪。
     横向可挪范围 = (画布宽 − 图宽) = -(r−1)·宽，而 r = 图宽/画布宽 = 0.667×高/宽
     → **r 随手机宽高比变**（390 宽手机 r=1.54、420 宽 r=1.33、桌面 r=1.08），
     同一个 X% 在三种屏幕上落点能差 40 个百分点（390 上甚至被推到画布外）。
   所以改成「显式尺寸 + H 定标」：height:160% / width:auto → 图宽 = 0.667×1.6×画布高，
   与画布宽无关；再用 translate 的百分比（X 按"图自身宽"、Y 按"图自身高"解析，
   两者都由画布**高度**决定）→ **所有设备落点一致**，与画布宽高比无关。
   算式（H = 画布高；图内核心 50%/41%）：
     核心 x = tx%×0.667H + 0.5×0.667×1.6H = tx%×0.667H + 0.533H  → 目标 0.105H ⇒ tx = −40.2%
     核心 y = ty%×1.6H + 0.41×1.6H        = ty%×1.6H   + 0.656H  → 目标 0.13H  ⇒ ty = −32.9%
   实测三档：核心落在画布 (21%,13%) / (24%,13%) / (17%,13%) —— 都在左上角，
   人物（居中、头顶约 32% 高）上方留出干净星野。
   铺满校验：左 −0.43H、右 0.64H、上 −0.53H、下 +1.07H（H/W ≥ 1.56 的竖屏/桌面均覆盖）。
   ⚠️ 横屏（画布比图还宽，H/W < 1.4）上面这套会露底色 → 由下方 media query 退回 cover。
   ⚠️ 别改回 `inset:0 + object-fit:cover`：那样「亮点」位置会在不同手机上乱跑。 */
.stage-bgimg {
  position: absolute;
  left: 0; top: 0;
  height: 160%; width: auto;
  max-width: none;
  transform: translate(-40.2%, -32.9%);
  z-index: 0; pointer-events: none; user-select: none;
}
/* 星空底层（fix35）：同一张图 cover 铺满 + 模糊压暗。
   只为「上层盖不满」的极端比例（画布高/宽 < 1.57：很矮很宽的浏览器窗口、横屏平板等）兜底，
   让露出来的部分仍是柔和的星野而不是深蓝空带；正常竖屏被上层完整盖住、完全看不见。
   scale(1.18) 是给 blur 留出血：否则模糊会把元素边缘一起糊成透明、反而露出底色。 */
.stage-bgbase {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  transform: scale(1.18);
  filter: blur(18px) brightness(0.9) saturate(0.9);
  z-index: -1; pointer-events: none; user-select: none;
}
/* ===== 闪烁星芒（装饰 · fix37 · 2026-10-11）=====
   Tina：「这种星星可以变成小动图不，这样吸引力更大，大一点，闪动起来，分布在周围，与画布一体」
   做法：**纯 CSS 绘制四芒星 + CSS 动画 + mix-blend-mode:screen**，不用 GIF / 视频 ——
     · GIF：体积大（几百 KB~MB）、256 色带、放大糊、不能随画布缩放；
     · 视频：块状边界感强（破坏「与画布一体」）、透明通道兼容性差；
     · CSS：零体积、任意尺寸锐利、与星空**相加发光**天然融合、节奏可逐颗错开。
   结构：i.flare = 中心光晕球（radial-gradient 白→粉紫→紫→透明）；
         ::before = 水平射线 / ::after = 垂直射线（中间白、两端渐隐）→ 交叉出四芒星。
   尺寸 --s 只按**画布宽度**定标（width:var(--s) + aspect-ratio:1）→ 与 fix35 背景图同一条原则：
        标尺只依赖单一维度，不随画布高宽比漂移。
   闪烁：各颗不同 --d / --dl → 永远不同步；脉冲同时改 opacity + scale → 有「放大爆闪」感。
   层级：z-index:0 与 .stage-bgimg 同层、靠 DOM 顺序压过背景图，又被 .stage-frame
        （人物 z1 / 坐骑 z0 且 DOM 靠后）压住 → 星芒在星空里、人物坐骑之前，有纵深。 */
.stage-flares {
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none; user-select: none;
  mix-blend-mode: screen;
}
.flare {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--s); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /* 中央「圆点」+ 柔光晕（对齐参考图结构：**小亮核 + 四周向外渐隐的光线**）。
     fix39（Tina：「中间的圆大了点，遮挡了星芒，圆不能大过星云中心、要比星云中心小」）：
     把核与内晕整体收窄（纯白 12%→7%、实心感止于 ~21%、外层 65%→52%），
     ⇒ 画布宽 304 时「圆」的直径约 2.7%，明显小于星云核心（≈6.8%）；
        射线（100%/116%）反而成为视觉主体，「星芒」就立起来了。
     ⚠️ 核必须「小而实」—— 虚的大光团会同时造成两个毛病：显「十字太长」+ 圆盖住星芒。
     配色（Tina：「白色或者粉色」）：白核 → 粉白晕 → 淡粉外晕，不偏紫。 */
  background:
    radial-gradient(circle,
      #fff 0%, #fff 7%, rgba(255,242,251,.82) 12%,
      rgba(255,206,238,.34) 21%, rgba(255,172,222,.10) 34%, transparent 52%),
    radial-gradient(circle,
      rgba(255,200,234,.16) 0%, rgba(248,168,218,.06) 26%,
      rgba(222,140,206,.02) 50%, transparent 74%);
  animation: flarePulse var(--d, 4.5s) ease-in-out infinite;
  animation-delay: var(--dl, 0s);
  /* 整体柔光包裹：小尺寸星芒在星云亮区容易被背景「吃掉」，drop-shadow 按 alpha 通道
     生成一层模糊粉光 → 提高辨识度而不放大星芒本体（Tina 要求「小」）。 */
  filter: drop-shadow(0 0 3px rgba(255,206,238,.55));
  will-change: opacity, transform;
}
.flare::before, .flare::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  /* 缓慢自转：十字徐徐转动（--spin 38~62s，各颗不同 → 永不同步）。
     放在伪元素上、与 .flare 的脉冲（scale）不同元素 → 互不覆盖。 */
  animation: flareSpin var(--spin, 48s) linear infinite;
}
/* 方向错开（fix39 · Tina：「动画方向不一样，不要同时往一个方向」）：
   偶数颗的**自转与呼吸都反向** → 5 颗里有正转有反转、有先亮有先暗，永不「齐步走」。 */
.flare:nth-child(even) { animation-direction: reverse; }
.flare:nth-child(even)::before,
.flare:nth-child(even)::after { animation-direction: reverse; }
/* 水平射线（fix37 二版：Tina「十字太长了」→ 100% 相对**缩小后的元素**，实长仅为原版 1/3） */
.flare::before {
  width: 100%; height: 3.6%;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg,
      transparent 0%, rgba(255,214,240,.30) 28%, rgba(255,255,255,.92) 50%,
      rgba(255,214,240,.30) 72%, transparent 100%);
}
/* 垂直射线（略长于水平，对齐参考图） */
.flare::after {
  width: 3.6%; height: 116%;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg,
      transparent 0%, rgba(255,214,240,.28) 28%, rgba(255,255,255,.92) 50%,
      rgba(255,214,240,.28) 72%, transparent 100%);
}
@keyframes flareSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes flarePulse {
  0%, 100% { opacity: .52; transform: translate(-50%, -50%) scale(.90); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.10); }
}
@media (prefers-reduced-motion: reduce) {
  .flare { animation: none; opacity: .75; }
  .flare::before, .flare::after { animation: none; }
}
/* 横屏兜底：画布变矮变宽（如 780×360 → 画布 364×148），按高度定标的图只剩 158px 宽
   → 改成「填满画布 + cover」，保证横屏下星空同样是清晰的（而不是靠上面那层模糊兜底）。
   条件带 max-height，避免把「宽但高」的桌面窗口（1280×800）也误判成横屏。 */
@media (orientation: landscape) and (max-height: 560px) {
  .stage-bgimg {
    left: 0; top: 0;
    width: 100%; height: 100%;
    max-width: none;
    transform: none;
    object-fit: cover;
    object-position: 35% top;
  }
}
/* 坐骑背景（fix29 恢复显示 / fix30 换 AI 立绘）：
   fix8 改「画布 + stage-bgimg」体系时把本规则整块删掉，但 HTML（#stage-bg div）与
   JS（renderGame 写值）都还在 → 已选坐骑的人（如 meggie, mount:1 自行车）完全看不到。
   层级：在星野背景图之上、人物之下 —— 与 .stage-bgimg 同为 z-index:0，
   靠 DOM 顺序（bgimg 在前、stage-bg 在后）压过背景图，又被 picture 的 z-index:1 压住。
   构图（fix32 2026-10-11 修正：坐骑是「坐着的东西」，必须和人物踩在同一个地面）：
        ❌ fix31 用 `position:relative; top:17%` 是「从顶部往下推」→ 停在了人物腰部以上，
           看着像浮在头顶（Tina 反馈）。
        ✅ 正解：img 绝对定位 `left:50% + bottom:N% + translateX(-50%)` —— 与 `.stage-char` 的
           `bottom:N%`（fix33 起 N=0，S3 为 2）完全同一条水平线，轮子/底盘正好落在人物脚底。
        ⚠️ 仍不能靠父级 padding 下移：`.stage-bg picture` 会被后面的
           `.stage-left picture{position:absolute;inset:0}` 接管（同为 (0,1,1) 特异性，后定义者胜），
           padding 对绝对定位子元素无效。故必须由 img 自身绝对定位。 */
.stage-bg {
  position: absolute; inset: 0; display: none;
  justify-content: center;
  user-select: none; pointer-events: none;
  z-index: 0;
}
.stage-bg picture { display: block; width: 100%; height: 100%; }
.stage-bg img {
  position: absolute;
  left: var(--mount-x, 50%);   /* fix41：右移，与人物错开（旋钮在 .stage-left）*/
  bottom: 0;
  transform: translateX(-50%);
  display: block;
  width: auto; height: auto;
  /* fix35（2026-10-11）：62%/36% → 104%/56%。
     Tina：「坐骑还是大一些吧，不然看着小了没有气势，之前的大小挺好的」
     —— 回到 fix30 那个「坐骑比人物更宽、有体量」的尺寸档（当时 108%/58%），
     但仍保留 fix32 的**脚底对齐**（bottom:0 与人物同一条地面线）。
     104% 允许宽体坐骑（如 m10 火箭 1.43:1）横向溢出画布一点点、被圆角裁掉，
     与 fix30 的观感一致；56% 高是竖构图坐骑（0.9:1 一类）的上限。
     ⚠️ fix41：**104% → 98%**。因为 fix41 把坐骑右移了（`left: 55%`），
        104% 的宽体坐骑会从右侧溢出被圆角裁掉（实测右缘多裁 4~6%，空间站/星舰的右缘缺一块）；
        收到 98% 后右溢只剩 ~4%。
     ⚠️ fix42：**98% → 108%**。Tina：「坐骑右边被裁掉一些没关系」——
        既然明确允许右侧溢出被圆角裁掉，就反其道把坐骑**放大**（98%→108% 回到「有体量」档），
        配合 left 63% 的右移，右侧露出从 39% 提到 50~57%，错开感最强。
        实测右缘裁掉 10.5~17%（Tina 已确认可接受）。 */
  /* fix51（2026-10-12）· 坐骑「占地梯度」+ 整体上移到脚踝：
     Tina：「星球可以不改动……但前面的大小要调整，自行车到星舰越来越大，
            不是这个图案的画布变大是占地大小变大那种，自行车可以小一点的，小汽车可以的，有梯度的变化」
           「强档的基础上自行车大一点，所有的都放大一点，往上放一点，从脚踝上面一点的地方开始放，
            有那种近大远小的视觉质感」
     ⇒ max-width / max-height 改读 CSS 变量，由 core.js 的 MOUNT_STAGE_SIZE 按等级写入。
       L1~L10（自行车→星舰）走梯度表 —— **「占地」（= 渲染宽% × 渲染高%）逐级严格递增**；
       **L11~L24 星球/星系不填表 → 自动回落默认 108%/56% = 保持现状不动**。
     ⚠️ 默认值必须保持 108%/56%：L11~L24 的「不动」全靠它。
     ⚠️ 为什么用「占地」而不是 max-width 当梯度轴：坐骑统一 left:63%、画布宽只有 460，
        max-width 超过 ~118% 右缘就被圆角裁掉一大块，**横向没有梯度空间**；
        而纵向有 760 → 梯度只能靠面积做。 */
  max-width: var(--mount-w, 108%); max-height: var(--mount-h, 56%);
  object-fit: contain; object-position: bottom center;
  opacity: 0.92;
  filter: drop-shadow(0 0 22px rgba(255,205,120,0.5)) drop-shadow(0 14px 30px rgba(0,0,0,0.45));
}
/* fix51：坐骑底边 = 人物脚踝「上面一点」的那条地面线（data-char 由 renderGame 写入）。
   脚踝位置实测法：取立绘 alpha 的逐行宽度，在**底部 20% 区间找最细处**（再往下是鞋会变宽）。
   ⚠️ 必须排除图片最后 2% 的空行，否则会把「0 宽的空白行」当成脚踝。
     女孩 S1 58% 高 → 脚踝在画布 4.6%  → 坐骑 bottom 6.5%
     女孩 S2 72% 高 → 脚踝在画布 8.6%  → 坐骑 bottom 10%
     女孩 S3 84% 高（char 自身 bottom 2%）→ 脚踝 12.1% → 坐骑 bottom 13%
   目的（Tina）：「从脚踝上面一点的地方开始放，有那种近大远小的视觉质感」——
   人物踩在近景（画面最底），坐骑站在稍远的那条地面线上，形成前后层次。
   ⚠️ 上移后纵向可用高度 = 100% − bottom（S3 只剩 87%）⇒ 高上限（--mount-h）不能再往上加。 */
.stage-bg[data-char="s1"] img { bottom: 6.5%; }
.stage-bg[data-char="s2"] img { bottom: 10%; }
.stage-bg[data-char="s3"] img { bottom: 13%; }
/* 人物：以画布高度为基准的百分比尺寸，底部留 4%，水平居中（50%）。
   ⚠️ 居中的基准是「星空画布」本身，不是整个页面 —— 用 left:50% + translateX(-50%)
   让人物在画布内左右居中（Tina 2026-10-10 fix14 修正：原来是 57% 偏右）。
   picture 撑满画布（绝对定位 + inset），img 用百分比高度 → 尺寸始终相对画布，
   不受屏幕 vh 影响，手机/电脑构图完全一致。 */
.stage-left picture {
  position: absolute; inset: 0;
  z-index: 1; display: block; line-height: 0;
  pointer-events: none;
}
.stage-char {
  position: absolute;
  left: var(--char-x, 50%);   /* fix41：左移（幅度小于坐骑，见 .stage-left 旋钮注释）*/
  bottom: 0; transform: translateX(-50%);
  height: 58%; width: auto;
  pointer-events: auto;
  cursor: pointer;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,0.7)) drop-shadow(0 0 34px rgba(140,110,255,0.35));
}
/* 三年龄段身高阶梯（Tina 2026-10-10 fix13）：
   S1 小女孩 58% → S2 少女 72% → S3 大女孩 84%
   身高比 ≈ 1 : 1.24 : 1.45，S3 明显高于 S2，S1 最矮。
   按图片文件名区分档位（新立绘为细长成人比例，需要更大高度占比才显得出身材）。
   fix33：基准由 bottom:4% 改为 bottom:0（脚正好踩在构图框下沿 = 原来画布的边缘线），
   这样画布向下延伸后，人物站在这条线上、脚下是延伸的星空。 */
.stage-char[src*="girl_s2"], .stage-char[src*="boy_s2"] { height: 72%; }
.stage-char[src*="girl_s3"], .stage-char[src*="boy_s3"] { height: 84%; bottom: 2%; }
/* 男孩 S1 单独补偿（Tina 2026-10-10 fix19，选 B 方案）：
   男孩短发无长发撑宽 → 同高度下比女孩 S1 窄 46px（79 vs 125），视觉体量偏轻。
   故把男孩 S1 高度提到 64%（比女孩 S1 的 58% 高，让体量追上）。
   注：不追平宽度而是"略高一点"，保持男孩比女孩瘦的自然感。 */
.stage-char[src*="boy_s1"] { height: 64%; }
.mount-btn {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 42px; height: 42px; border-radius: 13px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(18,14,46,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: 20px; cursor: pointer;
  box-shadow: 0 3px 12px rgba(0,0,0,0.45);
}
.mount-btn:active { transform: scale(0.92); }
/* 坐骑下方的小挂件：背包 / 卡片包 / 商城 */
.mini-widgets {
  position: absolute; top: 60px; right: 12px; z-index: 2;
  display: flex; flex-direction: column; gap: 8px;
}
.mini-widget {
  position: relative; width: 34px; height: 34px; border-radius: 11px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(18,14,46,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: 17px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(0,0,0,0.4);
}
.mini-widget:active { transform: scale(0.92); }
.mini-badge {
  position: absolute; top: -5px; right: -5px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 8px; background: linear-gradient(135deg, #FF8C42, #FFB347);
  color: #fff; font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 5px rgba(255,140,66,0.5);
}
.stage-right {
  position: relative;
  width: 72px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 8px;
  /* v11（2026-10-10 fix11）：恢复固定尺寸方块后，9 个 68px 装不满一屏会溢出，
     改为可滚动；滚动条隐藏以免影响观感。
     底部渐隐用 mask-image 实现（纯 CSS、不占布局、不挡点击），提示「下面还有内容」。 */
  min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-right: 2px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent 100%);
}
.stage-right::-webkit-scrollbar { width: 0; height: 0; }
.stage-right::-webkit-scrollbar { width: 0; height: 0; }
.game-widget {
  /* v11（2026-10-10 fix11）：改回固定尺寸 —— 用户反馈「方格的样子好看一些」。
     fix35（2026-10-11）：右侧列 96 → 72px、方块高 68 → 70px
     → 方块 70×70 **正好正方形**（原来 94×68 是偏宽的长方形）；右侧列可滚动，
     底部渐隐遮罩提示还有内容。 */
  flex: 0 0 auto; height: 70px; min-height: 0; border-radius: 16px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 26px; cursor: pointer; transition: transform 0.15s;
}
.game-widget:active { transform: scale(0.95); }
.game-widget-label { font-size: 10px; color: rgba(255,255,255,0.85); line-height: 1; }

/* ===== 功能挂件行（背包 / 卡片包 / 商城） ===== */
.game-widgets-row { display: flex; gap: 10px; margin: 8px 16px 2px; flex-shrink: 0; }
.func-widget {
  flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 4px; border-radius: 14px; cursor: pointer;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.30); color: #fff;
}
.func-widget:active { transform: scale(0.96); }
.func-widget-icon { font-size: 24px; line-height: 1; }
.func-widget-label { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.9); }
.func-badge {
  position: absolute; top: -6px; right: 8px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: linear-gradient(135deg, #FF8C42, #FFB347);
  color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(255,140,66,0.5);
}

/* ===== 段位进度条 ===== */
.game-level-card {
  margin: 0 16px 16px; padding: 14px 16px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 16px;
}
.game-level-bar {
  height: 12px; background: rgba(255,255,255,0.14); border-radius: 6px; overflow: hidden;
}
.game-level-fill {
  height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, #7A5CFF, #FFD700);
  box-shadow: 0 0 12px rgba(255,215,0,0.55);
  transition: width 0.5s ease;
}
.game-level-next { font-size: 12px; color: rgba(255,255,255,0.78); margin-top: 8px; text-align: center; }

/* ===== 顶部栏（钉顶全宽 · 底部细线 · 两行紧凑） ===== */
.game-topbar {
  margin: 0; padding: 9px 14px 8px;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: none; border-bottom: 1px solid rgba(255,255,255,0.16);
  color: #fff; flex-shrink: 0;
}
.topbar-row1 { display: flex; align-items: center; gap: 8px; }
.topbar-avatar {
  font-size: 26px; line-height: 1; width: 38px; height: 38px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.16);
  border-radius: 11px; cursor: pointer; user-select: none;
}
.topbar-name { font-size: 15px; font-weight: 700; color: #fff; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-cur { flex: 0 0 auto; min-width: 76px; padding: 5px 8px; gap: 4px; border-radius: 11px; }
.topbar-cur .cur-icon { width: 16px; height: 16px; font-size: 13px; }
.topbar-cur .cur-num { font-size: 14px; }
.topbar-cur .cur-plus { width: 18px; height: 18px; font-size: 13px; }
.topbar-row2 { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.topbar-stage-btn {
  font-size: 12px; font-weight: 700; color: #1A1530;
  background: linear-gradient(135deg, #FFE08A, #FF8C42);
  border: none; border-radius: 10px; padding: 6px 11px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(255,140,66,0.30);
}
.topbar-stage-btn:active { transform: scale(0.97); }
.topbar-status { font-size: 11px; color: rgba(255,255,255,0.78); }
.topbar-status span { color: #FFD700; font-weight: 700; }
.game-topbar .game-level-card { margin: 9px 0 0; background: transparent; border: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; }
.game-topbar .game-level-bar { height: 7px; }
.game-topbar .game-level-next { font-size: 11px; margin-top: 5px; }

/* ===== 太空旅行阶段地图弹窗 ===== */
.stage-map-overlay {
  display: none; position: fixed; inset: 0; z-index: 210;
  background: rgba(0,0,0,0.5); align-items: center; justify-content: center;
}
.stage-map-card {
  width: 88%; max-width: 380px; background: #1B1733;
  border: 1px solid rgba(255,255,255,0.14); border-radius: 22px;
  padding: 22px 18px; text-align: center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.stage-map-title { font-size: 16px; font-weight: 800; color: #fff; margin-bottom: 16px; }
.stage-map {
  display: flex; gap: 8px; justify-content: space-between; margin-bottom: 12px;
}
.stage-node {
  flex: 1; border-radius: 14px; padding: 12px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10);
}
.stage-node-icon { font-size: 26px; line-height: 1; }
.stage-node-name { font-size: 12px; font-weight: 700; color: #fff; }
.stage-node-lv { font-size: 10px; color: rgba(255,255,255,0.55); }
.stage-done { background: linear-gradient(135deg, rgba(124,92,255,0.35), rgba(255,215,0,0.25)); border-color: rgba(255,215,0,0.5); }
.stage-current {
  background: linear-gradient(135deg, rgba(255,224,138,0.30), rgba(255,140,66,0.30));
  border-color: #FF8C42;
  box-shadow: 0 0 16px rgba(255,160,60,0.45);
  animation: stagePulse 1.6s ease-in-out infinite;
}
@keyframes stagePulse {
  0%, 100% { box-shadow: 0 0 14px rgba(255,160,60,0.35); }
  50% { box-shadow: 0 0 24px rgba(255,160,60,0.75); }
}
.stage-locked { opacity: 0.55; }
.stage-map-tip { font-size: 12px; color: rgba(255,255,255,0.75); margin-bottom: 14px; min-height: 16px; }
.stage-map-card .rule-modal-btn { width: 100%; }

/* ===== 通用区块 ===== */
.game-section { margin: 0 16px 16px; }
.game-section .me-section-title { margin-bottom: 10px; }

/* ===== 形象墙（坐骑收集） ===== */
.mount-wall {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  overflow-y: auto; max-height: 58vh; -webkit-overflow-scrolling: touch;
  padding: 2px; margin-bottom: 12px;
}
.mount-cell {
  border-radius: 12px; padding: 4px 2px 8px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.mount-unlocked {
  background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
  cursor: pointer; transition: transform 0.15s;
}
.mount-unlocked:active { transform: scale(0.94); }
.mount-locked { background: #F2F2F2; opacity: 0.6; }
/* 坐骑图标：fix30 起为 AI 立绘缩略图（原为 26px emoji）。
   fix50m（Tina 2026-10-12）：「坐骑可以往上放一点，大一点」
     · 大：52×52 → 62×46（格子为 4 列固定宽 ≈63px 内容宽，62 是安全上限）
     · 上：盒子压扁到贴合「宽体坐骑」（图多为 2:1），并在 .mount-cell 上把
          上内边距 8→4 → 整格内容上移，名称/阶段紧随图片下方 */
.mount-icon { font-size: 26px; line-height: 1; width: 62px; height: 46px; display: flex; align-items: center; justify-content: center; }
.mount-icon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.18)); }
.mount-name { font-size: 12px; font-weight: 700; color: var(--text); }
.mount-stage { font-size: 10px; color: var(--text-light); }
.mount-locked .mount-name { color: #BBB; }

/* ===== 游戏入口 ===== */
.game-entry-list { padding: 0; }
.game-entry-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; background: var(--card); border-radius: 16px;
  box-shadow: var(--shadow); margin-bottom: 10px;
  cursor: pointer; transition: transform 0.15s;
}
.game-entry-card:active { transform: scale(0.98); }
.game-entry-card.game-entry-locked { opacity: 0.65; }
.game-entry-icon { font-size: 32px; flex-shrink: 0; }
.game-entry-info { flex: 1; }
.game-entry-name { font-size: 15px; font-weight: 700; color: var(--text); }
.game-entry-desc { font-size: 12px; color: var(--text-light); margin-top: 2px; }
.game-entry-status {
  font-size: 10px; font-weight: 600; color: var(--primary);
  background: var(--primary-light); padding: 3px 8px; border-radius: 6px;
  white-space: nowrap;
}

/* ===== 规则弹窗 ===== */
.rule-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.5); align-items: center; justify-content: center;
}
.rule-modal {
  width: 80%; max-width: 320px; background: var(--card);
  border-radius: 20px; padding: 24px 20px; text-align: center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.rule-modal-title { font-size: 17px; font-weight: 800; color: var(--text); margin-bottom: 16px; }
.rule-row { font-size: 14px; color: var(--text); padding: 8px 0; border-bottom: 1px solid var(--border); }
.rule-row b { color: var(--primary); margin-left: 6px; }
.rule-modal-note { font-size: 11px; color: var(--text-light); margin: 12px 0 16px; }
.rule-modal-btn { width: 100%; }

/* ===== 坐骑墙 / 形象墙 弹窗 ===== */
.mount-wall-overlay, .char-wall-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.5); align-items: center; justify-content: center;
}
.mount-wall-card, .char-wall-card {
  width: 88%; max-width: 320px; background: var(--card);
  border-radius: 20px; padding: 16px 14px; text-align: center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  max-height: 80vh; overflow: hidden; display: flex; flex-direction: column;
}
.mount-wall-title, .char-wall-title { font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 14px; }
.mount-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.mount-selected { outline: 3px solid var(--primary); }
.mount-wall-clear { width: 100%; margin-top: 4px; background: var(--bg); color: var(--text); border: 1.5px solid var(--border); }
.char-wall { display: flex; gap: 12px; justify-content: center; margin-bottom: 14px; }
.char-option {
  width: 110px; border: 2px solid transparent; border-radius: 16px;
  background: var(--bg); cursor: pointer; padding: 10px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: all 0.15s;
}
.char-option img { height: 120px; width: auto; }
.char-option span { font-size: 13px; font-weight: 600; color: var(--text); }
.char-option-active { border-color: var(--primary); background: var(--primary-light); }

/* ===== 背包 / 卡片包 / 商城 弹窗 ===== */
.func-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.5); align-items: center; justify-content: center;
}
.func-modal-card {
  width: 88%; max-width: 340px; background: var(--card);
  border-radius: 20px; padding: 18px 16px; text-align: center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  max-height: 80vh; overflow: hidden; display: flex; flex-direction: column;
}
.func-modal-title { font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 12px; }
.func-modal-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-bottom: 12px; }
.func-modal-list::-webkit-scrollbar { width: 0; height: 0; }
.item-card {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  background: var(--bg); border-radius: 14px; margin-bottom: 8px; text-align: left;
}
.item-icon { font-size: 30px; flex-shrink: 0; }
.item-info { flex: 1; min-width: 0; }
.item-name { font-size: 14px; font-weight: 700; color: var(--text); }
.item-desc { font-size: 11px; color: var(--text-light); margin-top: 2px; }
.item-count { font-size: 13px; font-weight: 800; color: var(--primary); flex-shrink: 0; }
.empty-tip { padding: 40px 16px; font-size: 13px; color: var(--text-light); text-align: center; line-height: 1.6; }
.func-modal-card .rule-modal-btn { width: 100%; }

/* 今日详情 */
.today-summary-bar {
  margin: 0 18px 12px; padding: 14px 18px;
  background: var(--card); border-radius: 14px;
  box-shadow: var(--shadow); text-align: center;
  font-size: 15px; font-weight: 700; color: var(--primary);
}
.today-detail-list { padding: 0 18px 20px; }
.today-detail-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: var(--card);
  border-radius: 14px; box-shadow: var(--shadow);
  margin-bottom: 10px;
}
.today-detail-date { flex: 1; font-size: 14px; color: var(--text); font-weight: 600; }
.today-detail-qs { font-size: 13px; color: var(--primary); font-weight: 700; }
.today-detail-pts { font-size: 13px; color: #F59E0B; font-weight: 700; }
.today-detail-empty {
  text-align: center; padding: 60px 20px; color: var(--text-light); font-size: 14px;
}

/* 头像选择弹窗 */
.avatar-picker-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.avatar-picker-card {
  background: var(--card); border-radius: 20px; padding: 20px;
  width: 280px; max-width: 88vw; text-align: center;
}
.avatar-picker-title {
  font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 14px;
}
.avatar-picker-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-bottom: 16px;
}
.avatar-option {
  font-size: 26px; aspect-ratio: 1;
  border: 2px solid transparent; border-radius: 12px;
  background: var(--bg); cursor: pointer; transition: all 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.avatar-option:active { transform: scale(0.9); }
.avatar-option-active { border-color: var(--primary); background: var(--primary-light); }
.avatar-picker-close-btn { width: 100%; }

/* ===== Chinese Module Select (语文模块选择页) ===== */
.cn-module-list { display:flex; flex-direction:column; gap:10px; padding:0 2px; }
/* 语文主页：顶部(品牌/统计/一键按钮)固定，6个模块列表在独立容器内滚动 */
#screen-chinese.active {
  display: flex;
  flex-direction: column;
  height: 100vh;          /* 兜底：老浏览器不认 dvh 时仍能建滚动容器 */
  height: 100dvh;
  overflow: hidden;
  padding: 20px 20px 0;
}
#screen-chinese .home-header,
#screen-chinese .plan-stats,
#screen-chinese .cn-all-actions { flex-shrink: 0; }
#screen-chinese .cn-module-list {
  flex: 1 1 auto;
  min-height: 0;          /* 关键：flex纵向子项必须此行才能真正收缩并触发内部滚动 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 24px;
  margin-top: 4px;
}
.cn-module-row {
  display:flex; align-items:center; gap:14px;
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:16px 18px; cursor:pointer; transition:all .15s;
}
.cn-module-row:active { transform:scale(.98); background:var(--primary-light); }
.cn-module-icon { font-size:26px; flex-shrink:0; }
.cn-module-name { font-size:21px; font-weight:700; color:var(--text); flex-shrink:0; min-width:70px; }
.cn-module-status {
  font-size:12px; font-weight:600; padding:3px 10px; border-radius:10px;
  white-space:nowrap; flex-shrink:0; min-width:56px; text-align:center;
}
.cn-status-pending { background:var(--primary-light); color:var(--primary-dark); }
.cn-status-done { background:#e8f5e9; color:#2e7d32; }
.cn-module-meta { font-size:14px; color:var(--text-light); white-space:nowrap; flex-shrink:0; min-width:50px; }
.cn-module-arrow { font-size:22px; color:var(--text-light); margin-left:auto; }

/* 一键串联5板块：挑战/刷怪（与英语那两个同造型） */
.cn-all-actions { display:flex; gap:12px; margin:14px 2px 4px; }
.cn-all-btn {
  flex:1; border:none; padding:18px 16px; border-radius:18px;
  font-size:20px; font-weight:700; cursor:pointer; transition:all 0.2s;
  font-family:inherit; display:flex; align-items:center; justify-content:center;
  gap:8px; color:white; box-shadow:0 4px 15px rgba(0,0,0,0.1);
}
.cn-all-challenge { background:var(--challenge-color); }
.cn-all-review { background:var(--grind-color); }
.cn-all-tingxie { background:linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.cn-all-tingxie:hover { box-shadow:0 6px 20px rgba(255,140,66,0.35); }
.cn-all-btn:hover { transform:translateY(-2px); }
.cn-all-challenge:hover { box-shadow:0 6px 20px rgba(123,104,238,0.3); }
.cn-all-review:hover { box-shadow:0 6px 20px rgba(38,217,166,0.3); }
.cn-all-btn.done { background:#BFBFBF !important; color:#999 !important; cursor:not-allowed; box-shadow:none !important; transform:none !important; }
.cn-all-btn.done:hover { transform:none !important; box-shadow:none !important; }
/* 模块选择页汇总统计 */
.cn-module-stats { margin-top:6px; margin-bottom:8px; }

/* ===== Chinese Board Header ===== */
.cn-board-header .cn-board-back {
  background:none; border:none; font-size:22px; color:var(--text);
  cursor:pointer; padding:0 4px 0 0; flex-shrink:0;
}

.cn-stat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:16px; }
.cn-stat-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px; text-align:center; }
.cn-stat-num { font-size:30px; font-weight:800; color:var(--secondary); }
.cn-stat-label { font-size:12px; color:var(--text-light); margin-top:2px; }
.cn-stat-card.cn-stat-green .cn-stat-num { color:var(--mastered-color); }
.cn-stat-card.cn-stat-red .cn-stat-num { color:var(--unmastered-color); }
.cn-stat-card.cn-stat-orange .cn-stat-num { color:var(--pending-color); }

.cn-progress-section { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px; margin-bottom:14px; }
.cn-progress-text { font-size:13px; color:var(--text-light); }
.cn-progress-text:first-child { font-weight:600; color:var(--text); }

.cn-pool-info { display:flex; justify-content:space-between; align-items:center; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:12px 16px; margin-bottom:14px; }
.cn-pool-label { font-size:14px; color:var(--text-light); }
.cn-pool-num { font-size:18px; font-weight:700; color:var(--pending-color); }

.cn-btn-big { width:100%; padding:16px; border-radius:14px; font-size:17px; font-weight:700; margin-bottom:10px; transition:transform .15s; }
.cn-btn-big:active { transform:scale(.97); }
.cn-btn-big:disabled { opacity:.4; cursor:not-allowed; }
.cn-btn-secondary { background:var(--card); color:var(--text); border:1px solid var(--border); }

/* 答题页 */
.cn-quiz-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.cn-quiz-phase { font-size:13px; color:var(--primary-dark); background:var(--primary-light); padding:4px 10px; border-radius:20px; }
.cn-quiz-progress { font-size:14px; color:var(--text-light); }
.cn-quiz-progress-bar { height:6px; background:var(--border); border-radius:3px; overflow:hidden; margin-bottom:24px; }
.cn-quiz-progress-fill { height:100%; background:var(--primary); border-radius:3px; transition:width .3s; }

.cn-char-display { text-align:center; font-size:110px; font-weight:900; margin:36px 0; line-height:1; user-select:none; }
.cn-char-display.flash-correct { animation:cnFlashGreen .6s; }
.cn-char-display.flash-wrong { animation:cnFlashRed .6s; }
/* 古诗古文模式：题干可能是整句/长句，缩小字号并允许换行 */
.cn-char-display.cn-gushi-mode { font-size:26px; font-weight:600; line-height:1.5; margin:24px 0; padding:0 16px; white-space:normal; word-break:break-all; }
/* 古诗选项：一列6行，每个选项占满一行，字号小、左对齐、自动换行，长诗句完整可读 */
.cn-pinyin-grid.cn-gushi-options { grid-template-columns:1fr; max-width:520px; gap:8px; }
.cn-pinyin-grid.cn-gushi-options .cn-pinyin-btn { font-size:16px; padding:10px 14px; text-align:left; white-space:normal; line-height:1.4; }
/* 古诗朝代题：12 朝代全列，4 列网格 */
.cn-pinyin-grid.cn-gushi-period-grid { grid-template-columns:repeat(4,1fr); max-width:520px; gap:8px; }
.cn-pinyin-grid.cn-gushi-period-grid .cn-pinyin-btn { font-size:16px; padding:12px 4px; text-align:center; }
/* 古诗篇目题库：答案行 */
.cn-gushi-q-answer { font-size:13px; color:#1a9d5a; margin-top:3px; line-height:1.4; }
/* 多音字模式：词语（双字）显示，高亮其中的多音字 */
.cn-char-display.cn-duoyin-mode { font-size:52px; letter-spacing:.12em; margin:30px 0; }
.cn-duoyin-hl { color:var(--challenge-color); border-bottom:4px solid var(--challenge-color); padding:0 2px; }
/* 易混字模式：显示词语/句子，高亮填空位 */
.cn-char-display.cn-yihunzi-mode { font-size:38px; font-weight:600; line-height:1.4; margin:24px 0; padding:0 16px; white-space:normal; word-break:break-all; }
.cn-yhz-blank { display:inline-block; min-width:1.5em; text-align:center; color:var(--challenge-color); border-bottom:3px solid var(--challenge-color); padding:0 4px; margin:0 2px; }
@keyframes cnFlashGreen { 0%,100%{color:var(--text)} 30%{color:var(--mastered-color);transform:scale(1.1)} }
@keyframes cnFlashRed { 0%,100%{color:var(--text)} 30%{color:var(--unmastered-color);transform:scale(1.1)} }

.cn-pinyin-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:400px; margin:0 auto; }
.cn-pinyin-btn {
  background:var(--card); border:2px solid var(--border); border-radius:8px;
  padding:16px 8px; font-size:19px; font-weight:600; color:var(--text);
  transition:all .15s; text-align:center;
}
.cn-pinyin-btn:active { transform:scale(.95); }
.cn-pinyin-btn.correct { background:rgba(39,174,96,.12); border-color:var(--mastered-color); color:var(--mastered-color); }
.cn-pinyin-btn.wrong { background:rgba(231,76,60,.12); border-color:var(--unmastered-color); color:var(--unmastered-color); }
.cn-pinyin-btn.highlight { background:rgba(39,174,96,.12); border-color:var(--mastered-color); color:var(--mastered-color); animation:cnPulse .5s; }
.cn-pinyin-btn:disabled { cursor:default; }
@keyframes cnPulse { 0%{transform:scale(1)} 50%{transform:scale(1.08)} 100%{transform:scale(1)} }

.cn-quiz-feedback { text-align:center; margin-top:18px; font-size:16px; font-weight:600; min-height:24px; color:var(--text-light); }
.cn-quiz-feedback.correct { color:var(--mastered-color); }
.cn-quiz-feedback.wrong { color:var(--unmastered-color); }
.cn-quiz-words { text-align:center; margin-top:8px; font-size:19px; font-weight:600; color:var(--text); min-height:22px; }
.cn-quiz-next { display:block; width:100%; max-width:400px; margin:16px auto 0; padding:14px 20px; border:none; border-radius:14px; background:var(--primary); color:#fff; font-size:17px; font-weight:700; text-align:center; cursor:pointer; transition:transform .15s, opacity .15s; }
.cn-quiz-next:active { transform:scale(.97); }
.cn-quiz-next:hover { opacity:.92; }
.cn-speed-select { width:100%; cursor:pointer; }

/* 总结页 */
.cn-summary-card { background:var(--card); border:1px solid var(--border); border-radius:20px; padding:24px; margin:30px auto; max-width:400px; text-align:center; }
.cn-summary-emoji { font-size:46px; margin-bottom:10px; }
.cn-summary-title { font-size:21px; font-weight:700; margin-bottom:14px; }
.cn-summary-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border); font-size:15px; }
.cn-summary-row:last-of-type { border:none; }
.cn-text-green { color:var(--mastered-color); }
.cn-text-red { color:var(--unmastered-color); }
.cn-text-bold { font-weight:700; }
.cn-summary-actions { margin-top:20px; display:flex; gap:10px; }

/* 识字详情页 */
.cn-stat-detail-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px; margin-bottom:12px; }
.cn-stat-detail-title { font-size:14px; font-weight:600; color:var(--text-light); margin-bottom:10px; }
.cn-bar-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.cn-bar-label { width:50px; font-size:13px; color:var(--text-light); }
.cn-bar-track { flex:1; height:8px; background:var(--border); border-radius:4px; overflow:hidden; }
.cn-bar-fill { height:100%; border-radius:4px; }
.cn-bar-val { width:40px; font-size:13px; text-align:right; color:var(--text-light); }
.cn-srs-detail-text { font-size:14px; color:var(--text-light); }
.cn-unknown-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(38px,1fr)); gap:6px; margin-top:10px; }
.cn-unknown-item { background:var(--bg); border-radius:6px; padding:8px; text-align:center; font-size:19px; }
.cn-unknown-item.srs { border:1px solid var(--pending-color); color:var(--pending-color); }
.cn-unknown-item.mastered { border:1px solid var(--mastered-color); color:var(--mastered-color); }

/* ===== Chinese Word List (字表页) ===== */
.cn-wl-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.cn-wl-search { flex:1; padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); font-size:14px; }
.cn-wl-count { font-size:13px; color:var(--text-light); white-space:nowrap; }
.cn-wl-list { display:flex; flex-direction:column; gap:4px; }
.cn-wl-item { display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--card-bg); border-radius:8px; border:1px solid var(--border); transition:background 0.15s; }
.cn-wl-item:active { background:var(--bg); }
.cn-wl-char { font-size:22px; font-weight:bold; min-width:32px; }
.cn-wl-pinyin { font-size:15px; color:var(--text-light); }
.cn-wl-words { font-size:13px; color:var(--text-light); opacity:0.65; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; flex:1; }
.cn-wl-item { cursor:pointer; }
.cn-dy-count { margin-left:auto; flex:0 0 auto; max-width:none; text-align:right; }
.cn-dy-q-item { align-items:flex-start; }
.cn-dy-q-main { flex:1; min-width:0; }
.cn-dy-q-word { font-weight:500; margin-bottom:2px; }
.cn-dy-q-answer { font-size:13px; color:var(--text-light); }

/* ===== 汉字详情页（全语文板块通用） ===== */
.cn-detail-header { display:flex; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid var(--border); }
.cn-detail-title { font-size:17px; font-weight:700; }
.cn-detail-action-btn { margin-left:auto; background:var(--primary); color:#fff; border:none; border-radius:18px; padding:6px 14px; font-size:14px; font-weight:600; cursor:pointer; }
.cn-detail-card { display:flex; flex-direction:column; align-items:center; gap:6px; padding:24px 16px 16px; }
.cn-detail-char { font-size:72px; font-weight:bold; line-height:1; color:var(--text); }
.cn-detail-pinyin { font-size:20px; color:var(--text-light); letter-spacing:1px; }
.cn-detail-section { margin:8px 16px; padding:14px; background:var(--card-bg); border:1px solid var(--border); border-radius:12px; }
.cn-detail-label { font-size:13px; color:var(--text-light); margin-bottom:8px; font-weight:600; }
.cn-detail-words { display:flex; flex-wrap:wrap; gap:8px; }
.cn-detail-word { font-size:16px; font-weight:600; padding:4px 12px; background:#fff; color:#000; border:1px solid var(--primary); border-radius:8px; }
.cn-detail-sentence { font-size:16px; line-height:1.6; color:var(--text); }
.cn-detail-record { display:flex; flex-direction:column; gap:8px; }
.cn-detail-rec-row { display:flex; justify-content:space-between; font-size:15px; padding:4px 0; border-bottom:1px dashed var(--border); }
.cn-detail-rec-row span:first-child { color:var(--text-light); }
.cn-rec-unmastered { color:#FF6347; font-weight:700; }
.cn-rec-pending { color:#FFA500; font-weight:700; }
.cn-rec-srs { color:#6495ED; font-weight:700; }
.cn-rec-mastered { color:#4CAF50; font-weight:700; }
.cn-rec-unlearned { color:#999; }
.cn-detail-empty { color:var(--text-light); font-size:14px; }
/* 学习历史时间线（识字/听写详情页共用） */
.cn-detail-history { margin-top:4px; display:flex; flex-direction:column; }
.cn-detail-hist-row { display:flex; align-items:center; gap:8px; font-size:14px; padding:5px 0; border-bottom:1px dashed var(--border); }
.cn-hist-date { color:var(--text-light); min-width:46px; }
.cn-hist-result { font-weight:600; min-width:34px; }
.cn-hist-correct { color:#2E9E5B; }
.cn-hist-wrong { color:#FF6347; }
.cn-hist-pool { color:var(--text); flex:1; }
.cn-hist-stage { color:#6495ED; font-weight:600; }
.cn-history-title { margin-top:12px; font-weight:700; font-size:13px; color:var(--text-light); }

/* ===== 性别选择控件（onboarding / 使用人管理 / 我的页） ===== */
.gender-pick { display:flex; gap:12px; justify-content:center; margin-top:4px; }
.gender-card {
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:14px 8px; border:2px solid #EEE; border-radius:16px;
  background:var(--bg); cursor:pointer; transition:all 0.2s; font-family:inherit;
}
.gender-card span { font-size:16px; font-weight:600; color:var(--text); }
.gender-card.gender-card-active { border-color:var(--primary); background:var(--primary-light); transform:translateY(-2px); box-shadow:0 6px 16px rgba(123,104,238,0.25); }

.gender-pick-small { display:flex; gap:8px; }
.gender-card-sm {
  padding:7px 14px; border:2px solid var(--border); border-radius:20px;
  background:var(--bg); font-size:13px; font-weight:600; color:var(--text);
  cursor:pointer; transition:all 0.2s; font-family:inherit;
}
.gender-card-sm.gender-card-sm-active { border-color:var(--primary); background:var(--primary-light); color:var(--primary); }

.profile-gender-add { display:flex; align-items:center; gap:10px; margin-top:12px; }
.profile-gender-add-label { font-size:13px; font-weight:600; color:var(--text); }
.profile-gender-add-hint { font-size:11px; color:var(--text-light); }

.profile-gender-toggle {
  border:none; background:var(--bg); font-size:18px; line-height:1;
  cursor:pointer; padding:2px 4px; border-radius:8px; transition:transform 0.15s; margin-left:4px;
}
.profile-gender-toggle:active { transform:scale(0.85); }

.me-gender-icon { font-size:11px; }
.cn-wl-actions { display:flex; align-items:center; gap:8px; margin-left:auto; flex-shrink:0; }
.cn-wl-speak { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; line-height:1; background:none; border:none; color:#999; cursor:pointer; opacity:0.7; padding:0; margin:0; -webkit-appearance:none; appearance:none; box-sizing:border-box; }
.cn-wl-speak:active { opacity:1; color:var(--primary); }
.cn-wl-empty { text-align:center; color:var(--text-light); padding:40px; font-size:15px; }
/* 古诗古文诗表列表项 */
.cn-wl-poem { flex-direction:row; align-items:center; }
.cn-wl-poem-main { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.cn-wl-poem-title { font-size:17px; font-weight:bold; }
.cn-wl-poem-meta { font-size:12px; color:var(--text-light); }
.cn-wl-poem-line { font-size:13px; color:var(--text-light); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cn-detail-poem-content { font-size:15px; line-height:1.8; white-space:pre-wrap; }
.cn-detail-poem-translation { font-size:14px; line-height:1.7; color:var(--text-light); white-space:pre-wrap; }
.cn-detail-empty { color:var(--text-light); font-size:13px; }
.cn-wordlist-buttons { display:flex; gap:10px; margin-top:10px; }

/* ===== Celebration Overlay ===== */
.celebration-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: celeb-fade-in 0.3s ease;
}
.celebration-overlay.show { display: flex; }
.celebration-overlay.hide { animation: celeb-fade-out 0.3s ease forwards; }

@keyframes celeb-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes celeb-fade-out { from { opacity: 1; } to { opacity: 0; } }

.celebration-card {
  position: relative;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border-radius: 24px;
  padding: 40px 36px 28px;
  text-align: center;
  max-width: 320px;
  width: 85%;
  box-shadow: 0 0 40px rgba(255,215,0,0.3), 0 8px 32px rgba(0,0,0,0.4);
  animation: celeb-card-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1;
}
.celebration-card.type-mastery {
  background: linear-gradient(135deg, #1a1a2e 0%, #2d1b4e 50%, #4a1942 100%);
  box-shadow: 0 0 50px rgba(255,215,0,0.4), 0 8px 32px rgba(0,0,0,0.4);
}

@keyframes celeb-card-pop {
  0% { transform: scale(0.3) rotate(-10deg); opacity: 0; }
  60% { transform: scale(1.08) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.celebration-emoji {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 12px;
  animation: celeb-bounce 0.8s ease infinite alternate;
}
@keyframes celeb-bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-8px); }
}

.celebration-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  line-height: 1.5;
  margin-bottom: 16px;
}

.celebration-points {
  display: inline-block;
  font-size: 24px;
  font-weight: 800;
  color: #FFD700;
  background: rgba(255,215,0,0.12);
  padding: 8px 24px;
  border-radius: 20px;
  margin-bottom: 16px;
  animation: celeb-points-shine 1.5s ease infinite;
}
@keyframes celeb-points-shine {
  0%, 100% { text-shadow: 0 0 8px rgba(255,215,0,0.5); }
  50% { text-shadow: 0 0 20px rgba(255,215,0,0.8); }
}

.celebration-awesome-btn {
  margin-top: 10px;
  padding: 12px 34px;
  font-size: 18px;
  font-weight: 800;
  color: #1a1a2e;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  border: none;
  border-radius: 24px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(255,180,0,0.45);
  animation: celeb-btn-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
  transition: transform 0.12s ease;
}
.celebration-awesome-btn:active { transform: scale(0.94); }
@keyframes celeb-btn-pop {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* 升级彩蛋：道具图片区（文字下方） */
.celebration-prop {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 4px auto 14px;
  padding: 12px 18px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 16px;
}
.celebration-prop-icon {
  font-size: 52px;
  line-height: 1;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
  animation: celeb-prop-pop 0.5s cubic-bezier(.2,1.4,.4,1) both;
}
.celebration-prop-icon img {
  display: block; height: 76px; width: auto; margin: 0 auto;
}
.celebration-prop-name {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
@keyframes celeb-prop-pop {
  0% { transform: scale(0.3); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Particle animation */
.celebration-particles {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.celebration-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  animation: celeb-particle-fly 1.2s ease-out forwards;
}
@keyframes celeb-particle-fly {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0);
    opacity: 0;
  }
}

/* ========== 听写模块（board 1） ========== */
.btn-tingxie {
  width: 100%;
  padding: 16px;
  font-size: 19px;
  font-weight: 700;
  border: none;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  cursor: pointer;
  margin-top: 14px;
  box-shadow: 0 6px 16px rgba(255, 140, 66, 0.35);
  transition: transform .12s ease, filter .12s ease;
}
.btn-tingxie:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-tingxie:active { transform: translateY(0); }

.cn-tx-play {
  max-width: 460px;
  margin: 0 auto;
  padding: 20px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
/* stage tag 复用识字 cn-quiz-phase 样式（已在 HTML 中用 cn-quiz-phase 类） */
.cn-tx-pinyin {
  align-self: center;
  min-height: 60px;
  margin: 28px 0 4px;
  font-size: 52px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--primary);
  text-align: center;
  user-select: none;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.2;
}
.cn-tx-speaker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  margin: 4px auto 2px;
  padding: 10px 24px;
  border-radius: 999px;
  background: var(--primary-light, #fff3e0);
  color: var(--primary-dark, #e65100);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: transform .15s ease, box-shadow .15s ease;
  user-select: none;
}
.cn-tx-speaker:hover { box-shadow: 0 4px 12px rgba(255,140,66,0.25); }
.cn-tx-speaker:active { transform: scale(0.95); }
.cn-tx-hint {
  color: var(--muted, #888);
  font-size: 15px;
  margin-bottom: 22px;
}
.cn-tx-settings {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 8px;
  text-align: left;
}
.cn-tx-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}
.cn-tx-setting + .cn-tx-setting { border-top: 1px solid var(--border); }
.cn-tx-setting > span { font-size: 15px; color: var(--text); }
.cn-tx-seg {
  display: flex;
  gap: 6px;
  background: var(--bg);
  border-radius: 12px;
  padding: 4px;
}
.cn-tx-seg button {
  border: none;
  background: transparent;
  color: var(--text);
  padding: 7px 13px;
  border-radius: 9px;
  font-size: 14px;
  cursor: pointer;
  transition: all .12s ease;
}
.cn-tx-seg button.active {
  background: var(--primary);
  color: #fff;
  font-weight: 700;
}
.cn-tx-nav { display: flex; gap: 12px; margin-top: auto; }
.cn-tx-prev { flex: 1; background: var(--card); color: var(--text); border: 1px solid var(--border); }
.cn-tx-next { flex: 1; }
.cn-tx-pause { flex: 1; background: var(--card); color: var(--text); border: 1px solid var(--border); }
.cn-tx-pause.paused { background: #FFF3E0; color: var(--primary-dark, #e65100); border-color: var(--primary, #ff8c42); font-weight: 700; }

.cn-tx-answer {
  max-width: 460px;
  margin: 0 auto;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.cn-tx-ans-tip {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text);
  margin: 10px 0 14px;
}
.cn-tx-ans-list {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  gap: 8px;
  align-content: start;
  padding-bottom: 12px;
}
.cn-tx-ans-item {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 2px;
  text-align: center;
  cursor: pointer;
  transition: all .12s ease;
  user-select: none;
}
.cn-tx-ans-item.mark-correct {
  border-color: #27AE60;
  background: rgba(39, 174, 96, 0.18);
}
.cn-tx-ans-item.mark-wrong {
  border-color: #E74C3C;
  background: rgba(231, 76, 60, 0.18);
}
.cn-tx-ans-item.mark-wrong::after {
  content: '✗';
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: 14px;
  font-weight: 900;
  color: rgba(231, 76, 60, 0.7);
  pointer-events: none;
}
.cn-tx-ans-item.mark-correct::after {
  content: '✓';
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: 14px;
  font-weight: 900;
  color: rgba(39, 174, 96, 0.7);
  pointer-events: none;
}
#cn-tx-submit-btn:disabled {
  background: #BFBFBF;
  cursor: not-allowed;
}
.cn-tx-ans-char {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  position: relative;
  z-index: 1;
}

/* ========== 古诗古文板块 (board6) ========== */
.cn-gb-search {
  padding: 12px 16px 0;
}
.cn-gb-search input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}
.cn-gb-body {
  padding: 16px;
  overflow-y: auto;
  min-height: 0;
}
.cn-gb-period {
  margin-bottom: 18px;
}
.cn-gb-period-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  opacity: 0.7;
  padding: 8px 4px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.cn-gb-authors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cn-gb-author-btn {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 6px 14px;
  font-size: 14px;
  color: var(--text);
}
.cn-gb-author-btn:active { transform: scale(0.96); }
.cn-ga-actions {
  padding: 12px 16px 0;
}
.cn-ga-challenge-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px;
  font-size: 16px;
  font-weight: 700;
}
.cn-ga-body {
  padding: 12px 16px 20px;
  overflow-y: auto;
  min-height: 0;
}
.cn-ga-work {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cn-ga-work-title { font-size: 15px; font-weight: 600; color: var(--text); }
.cn-ga-work-status { font-size: 12px; color: var(--text); opacity: 0.55; }
.cn-gl-card {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  min-height: 0;
}
.cn-gl-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.cn-gl-meta {
  font-size: 13px;
  color: var(--text);
  opacity: 0.65;
  margin-bottom: 16px;
}
.cn-gl-content {
  font-size: 19px;
  line-height: 2;
  color: var(--text);
  margin-bottom: 18px;
  letter-spacing: 1px;
}
.cn-gl-translation, .cn-gl-intro {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.cn-gl-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 6px;
}
.cn-gl-section-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  opacity: 0.85;
}
.cn-gl-actions {
  padding: 12px 16px 20px;
  display: flex;
  gap: 12px;
}
.cn-gl-actions button { flex: 1; }
.cn-gl-title { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.cn-gl-speak { background:none; border:none; font-size:22px; cursor:pointer; opacity:0.7; padding:4px; }
.cn-gl-speak:active { opacity:1; transform:scale(0.92); }
.cn-wl-poem-speak { margin-left:auto; }
.cn-wl-grade-tag { font-size:11px; padding:2px 8px; border-radius:4px; background:rgba(100,149,237,0.12); color:#6495ED; white-space:nowrap; }
.cn-gl-pairs { display:flex; flex-direction:column; gap:10px; }
.cn-gl-pair { padding:8px 0; border-bottom:1px dashed var(--border); }
.cn-gl-pair:last-child { border-bottom:none; }
.cn-gl-pair-source { font-size:14px; line-height:1.8; color:var(--text); margin-bottom:2px; }
.cn-gl-pair-trans { font-size:13px; line-height:1.6; color:var(--text-light); text-align:left; }
.cn-gl-notes, .cn-gl-words { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin-bottom:12px; }
.cn-gl-word-item { font-size:13px; line-height:1.7; color:var(--text); opacity:0.9; margin-bottom:4px; }
.cn-gq-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  min-height: 0;
}
.cn-gq-prompt {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 18px;
  text-align: center;
}
.cn-gq-prompt-text {
  font-size: 22px;
  line-height: 1.9;
  color: var(--text);
  letter-spacing: 1px;
}
.cn-gq-input {
  width: 100%;
  padding: 14px;
  font-size: 18px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  margin-bottom: 12px;
  box-sizing: border-box;
}
.cn-gq-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cn-gq-option {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 10px;
  font-size: 15px;
  text-align: center;
  color: var(--text);
}
.cn-gq-option.correct { border-color: #27AE60; background: rgba(39,174,96,0.15); }
.cn-gq-option.wrong { border-color: #E74C3C; background: rgba(231,76,60,0.15); }
.cn-gq-option.highlight { border-color: #27AE60; background: rgba(39,174,96,0.12); }
.cn-gq-feedback { padding: 0 16px; min-height: 24px; font-size: 14px; }
.cn-gq-feedback.correct { color: #27AE60; }
.cn-gq-feedback.wrong { color: #E74C3C; }
.cn-gq-actions { padding: 12px 16px 20px; }
.cn-gq-actions .btn-primary { width: 100%; }
.cn-wordlist-buttons button { flex:1; }

/* ===== 易混字列表与组辨析 ===== */
.cn-yhz-list-item { align-items:flex-start; gap:10px; }
.cn-yhz-list-main { flex:1; font-size:16px; line-height:1.5; color:var(--text); word-break:break-all; }
.cn-yhz-list-main .cn-yhz-correct { color:var(--challenge-color); font-weight:700; border-bottom:2px solid var(--challenge-color); padding:0 1px; }
.cn-yhz-detail-body { padding:8px 12px 20px; }
.cn-yhz-group-char { margin:10px 0; padding:14px; background:var(--card-bg); border:1px solid var(--border); border-radius:12px; }
.cn-yhz-group-header { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.cn-yhz-group-char-big { font-size:42px; font-weight:bold; line-height:1; color:var(--text); }
.cn-yhz-group-pinyin { font-size:16px; color:var(--text-light); }
.cn-yhz-group-words { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.cn-yhz-group-word { font-size:14px; font-weight:600; padding:4px 10px; background:#fff; color:#000; border:1px solid var(--primary); border-radius:8px; }
.cn-yhz-group-sentence { font-size:15px; line-height:1.6; color:var(--text); margin-bottom:10px; }
.cn-yhz-group-sentence .cn-yhz-correct { color:var(--challenge-color); font-weight:700; }
.cn-yhz-group-tip { font-size:14px; line-height:1.6; color:var(--text); background:rgba(255,193,7,0.08); padding:10px; border-radius:8px; border-left:3px solid #FFC107; }
.cn-yhz-tip-label { display:inline-block; font-size:12px; font-weight:700; color:#333; background:#FFC107; padding:2px 6px; border-radius:4px; margin-right:6px; }
.cn-yhz-group-item { align-items:center; gap:10px; }
.cn-yhz-group-list-chars { flex:1; display:flex; align-items:center; flex-wrap:wrap; gap:2px; }
.cn-yhz-group-list-char { font-size:22px; font-weight:bold; color:var(--text); }
.cn-yhz-group-sep { font-size:14px; color:var(--text-light); margin:0 2px; }
.cn-yhz-group-list-count { font-size:13px; color:var(--text-light); white-space:nowrap; }
/* ===== 登录 / 注册 / 忘记密码 三模式 ===== */
.login-tabs { display:flex; gap:8px; margin-bottom:20px; }
.login-tab {
  flex:1; padding:10px 0; border:none; background:#FFF1E6; color:var(--primary);
  font-size:15px; font-weight:700; border-radius:12px; cursor:pointer; transition:.15s;
}
.login-tab.active { background:var(--primary); color:#fff; box-shadow:var(--shadow); }
.login-form { text-align:left; }
.login-code-row { display:flex; gap:8px; align-items:center; }
.login-code-row input { flex:1; min-width:0; }
.login-links { margin-top:14px; text-align:center; }
.login-links a { color:var(--primary); font-size:13px; cursor:pointer; text-decoration:underline; }
.login-sep { color:var(--primary); opacity:.4; margin:0 10px; }

/* ===== 手机号前固定国际前缀 +86（不可编辑） ===== */
.phone-input-wrap { display:flex; align-items:center; border:2px solid #EEE; border-radius:14px; padding:0 16px; background:#fff; transition:border .2s; }
.phone-input-wrap:focus-within { border-color:var(--primary); }
.phone-prefix { color:#bbb; font-size:16px; font-weight:700; margin-right:8px; user-select:none; }
.phone-input-wrap input { flex:1; min-width:0; border:none !important; padding:14px 0 !important; border-radius:0 !important; background:transparent; font-size:16px; font-family:inherit; }

/* ===== 自定义词库（我的词表）弹窗 ===== */
#custom-words-modal.modal-overlay { position:fixed; inset:0; background:rgba(20,20,40,.5); display:flex; align-items:center; justify-content:center; z-index:9999; padding:16px; }
.cw-modal-box { width:100%; max-width:520px; max-height:86vh; overflow:auto; background:#fff; border-radius:20px; padding:20px; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.cw-modal-title { font-size:19px; font-weight:800; display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.cw-close { border:none; background:#f1f1f6; color:#666; width:30px; height:30px; border-radius:50%; font-size:15px; cursor:pointer; }
.cw-tabs { display:flex; gap:8px; margin-bottom:14px; }
.cw-tab { flex:1; border:2px solid #EEE; background:#fff; border-radius:12px; padding:10px; font-size:14px; font-weight:700; color:#666; cursor:pointer; }
.cw-panel { display:block; }
.cw-hint { font-size:13px; color:#888; line-height:1.6; margin:0 0 12px; }
.cw-hint code { background:#f4f4f8; padding:1px 6px; border-radius:6px; color:#d43014; font-size:12px; }
.cw-textarea { width:100%; border:2px solid #EEE; border-radius:14px; padding:12px; font-size:15px; font-family:inherit; resize:vertical; box-sizing:border-box; }
.cw-textarea:focus { border-color:var(--primary); outline:none; }
.cw-file-row { display:flex; gap:10px; align-items:center; margin:12px 0; }
.cw-file-label { font-size:13px; color:#555; background:#f4f4f8; padding:9px 14px; border-radius:12px; cursor:pointer; }
.cw-file-label input { display:none; }
.cw-parse-btn { margin-left:auto; border:none; background:var(--primary,#6C5CE7); color:#fff; border-radius:12px; padding:9px 20px; font-size:14px; font-weight:700; cursor:pointer; }
.cw-parse-result { font-size:14px; color:#333; margin:8px 0; }
.cw-edit-area { margin:8px 0; max-height:34vh; overflow:auto; }
.cw-edit-row { display:flex; gap:6px; align-items:center; margin-bottom:8px; }
.cw-edit-word { width:90px; flex:none; font-weight:700; font-size:14px; color:#222; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cw-edit-mean { flex:1.1; min-width:0; border:2px solid #EEE; border-radius:10px; padding:8px; font-size:13px; font-family:inherit; }
.cw-edit-phon, .cw-edit-ex { flex:1; min-width:0; border:2px solid #EEE; border-radius:10px; padding:8px; font-size:13px; font-family:inherit; }
.cw-edit-mean:focus, .cw-edit-phon:focus, .cw-edit-ex:focus { border-color:var(--primary); outline:none; }
.cw-save-btn { width:100%; border:none; background:linear-gradient(135deg,#6C5CE7,#a363f6); color:#fff; border-radius:14px; padding:14px; font-size:16px; font-weight:800; cursor:pointer; margin-top:6px; }
.cw-list-area { max-height:50vh; overflow:auto; }
.cw-list-row { display:flex; gap:8px; align-items:center; padding:10px 0; border-bottom:1px solid #f2f2f6; font-size:14px; }
.cw-list-word { width:110px; flex:none; font-weight:800; color:#222; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cw-list-mean { flex:1; color:#666; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cw-list-st { color:#999; font-size:12px; flex:none; }
.cw-tag { font-size:11px; padding:2px 7px; border-radius:8px; flex:none; }
.cw-tag-lib { background:#E6FFF0; color:#059669; }
.cw-tag-cus { background:#FFF7E6; color:#B57300; }
.cw-del { border:none; background:#FEE; color:#D43014; border-radius:8px; padding:5px 10px; font-size:12px; cursor:pointer; flex:none; }