@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* 默认主题：梦核粉紫（与 applyTheme('dreamcore') 一致，避免首屏闪烁） */
  --bg-deep: #0d0b1a;
  --bg-mid: #1a1333;
  --purple-1: #6b4ce6;
  --purple-2: #9d6fff;
  --pink-1: #ff6eb4;
  --pink-2: #ffb3d9;
  --blue-1: #4dc9f6;
  --blue-2: #a0e7ff;
  --cream: #0d0b1a;
  --text: #e8dff5;
  --text-dim: #9b8ec4;
  --glass: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.1);
  --correct: #7efcb2;
  --wrong: #ff6b8a;
  --current: #ffd966;
  --panel: rgba(255, 255, 255, 0.06);
  --key-bg: rgba(255, 255, 255, 0.10);
  --radius: 16px;
  --font-size: 20px;
}

html, body {
  width: 100%;
  height: 100%;
  font-family: 'Noto Sans SC', system-ui, sans-serif;
  background: var(--bg-deep);
  color: var(--text);
  overflow: hidden;
  user-select: none;
}

/* ========== 粒子背景 ========== */
#particleCanvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}

.bg-orbs {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.22;
  animation: orbFloat 20s ease-in-out infinite;
}

.orb1 {
  width: 400px; height: 400px;
  background: var(--purple-1);
  top: -100px; left: -100px;
  animation-delay: 0s;
}

.orb2 {
  width: 350px; height: 350px;
  background: var(--pink-1);
  bottom: -80px; right: -80px;
  animation-delay: -7s;
  animation-duration: 25s;
}

.orb3 {
  width: 300px; height: 300px;
  background: var(--blue-1);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: -14s;
  animation-duration: 30s;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(50px, -30px) scale(1.1); }
  50% { transform: translate(-20px, 40px) scale(0.9); }
  75% { transform: translate(30px, 20px) scale(1.05); }
}

/* ========== 屏幕切换 ========== */
.screen {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: safe center;   /* 内容超高时靠上，保证顶部可达 */
  overflow-y: auto;               /* 显示器不够高时可滚动，不再被裁切 */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
  transform: scale(0.97);
}

.screen.active {
  opacity: 1;
  pointer-events: all;
  transform: scale(1);
}

/* ========== 打字界面：内容置顶，避免被底部虚拟键盘遮挡 ========== */
.screen.typing-screen {
  justify-content: flex-start;
  padding-top: 132px;
  padding-bottom: 24px;
}

/* ========== 选课界面：内容置顶，避免课程分组标题被顶部菜单/工具栏遮挡 ========== */
.screen.course-screen {
  justify-content: flex-start;
  padding-top: 122px;
  padding-bottom: 20px;
}

.screen.typing-screen .text-display-area,
.screen.typing-screen .word-display-area,
.screen.typing-screen .sentence-display,
.screen.typing-screen .mistake-display {
  margin-top: 0;
}

.screen.typing-screen .text-display-area {
  max-height: calc(100vh - 500px);
  min-height: 120px;
}

.screen.typing-screen .sentence-display {
  max-height: calc(100vh - 500px);
  overflow-y: auto;
}

/* ========== 首页 ========== */
.home-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding-top: 56px;
  box-sizing: border-box;
}

/* ========== Logo 图片 ========== */
.logo-img {
  display: block;
  width: 180px;
  height: auto;
  border-radius: 0;
  object-fit: contain;
  margin: 0 auto 16px;
  border: none;
  box-shadow: none;
  background: transparent;
}

.logo-start {
  width: 200px;
  flex-shrink: 0;
  margin-bottom: 18px;
}

.logo-home {
  width: 220px;
}

.logo-area {
  text-align: center;
  position: relative;}

.logo-glow {
  position: absolute;
  top: 50%; left: 50%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(157,111,255,0.3), transparent 70%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  animation: logoPulse 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes logoPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
  50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.8; }
}

.logo-text {
  font-size: 52px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--purple-2), var(--pink-1), var(--blue-1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  letter-spacing: 4px;
}

.logo-sub {
  font-size: 14px;
  letter-spacing: 12px;
  color: var(--text-dim);
  margin-top: 8px;
}

.mode-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(112px, 162px));
  gap: 16px;
  justify-content: center;
  width: 100%;
  max-width: 1060px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(138px, 176px));
  gap: 16px;
  justify-content: center;
  width: 100%;
  max-width: 960px;
}

.feature-grid .mode-card {
  padding: 26px 20px;
}

.mode-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 30px 20px;
  text-align: center;
  cursor: pointer;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: inherit;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.mode-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(107,76,230,0.1), rgba(255,110,180,0.1));
  opacity: 0;
  transition: opacity 0.3s;
}

.mode-card:hover {
  transform: translateY(-6px);
  border-color: var(--purple-2);
  box-shadow: 0 10px 40px rgba(107,76,230,0.3);
}

.mode-card:hover::before {
  opacity: 1;
}

.mode-icon {
  font-size: 36px;
  margin-bottom: 12px;
}

/* 卡片 logo（专门设计的小图，裁成方形，圆角与画一致） */
.mode-logo {
  display: block;
  width: 84px;
  height: 84px;
  border-radius: 22%;
  margin: 0 auto 10px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(120, 90, 40, 0.12);
}

.mode-name {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 6px;
}

.mode-desc {
  font-size: 12px;
  color: var(--text-dim);
  flex: 0 0 auto;
  min-height: 34px;   /* 统一 1/2 行描述高度，让下方星数行对齐 */
}

.home-bottom {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ========== 按钮 ========== */
.btn-dream {
  background: linear-gradient(135deg, var(--purple-1), var(--pink-1));
  color: white;
  border: none;
  padding: 12px 32px;
  border-radius: 50px;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s;
  font-family: inherit;
}

.btn-dream:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 30px rgba(107,76,230,0.4);
}

.btn-ghost {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text);
  padding: 10px 24px;
  border-radius: 50px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  font-family: inherit;
}

.btn-ghost:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--purple-2);
}

.btn-back {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text);
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.25s;
  font-family: inherit;
  white-space: nowrap;
}

.btn-back:hover {
  background: color-mix(in srgb, var(--purple-1) 16%, var(--glass));
  transform: translateY(-1px);
}

.btn-small {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text);
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.25s;
  font-family: inherit;
  white-space: nowrap;
}

.btn-small:hover {
  background: color-mix(in srgb, var(--purple-1) 16%, var(--glass));
  transform: translateY(-1px);
}

.btn-danger {
  border-color: rgba(255,100,100,0.3);
  color: #ff6b8a;
}

.btn-danger:hover {
  background: rgba(255,100,100,0.1);
}

.selector {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}

.selector option {
  background: var(--bg-mid);
  color: var(--text);
}

/* ========== 顶部栏（悬浮毛玻璃条） ========== */
.top-bar {
  position: fixed;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 28px);
  max-width: 1080px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  z-index: 10;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--bg-deep) 28%, rgba(80, 60, 30, 0.16));
  backdrop-filter: blur(16px);
}

.top-stats {
  display: flex;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
}

.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--bg-mid) 55%, transparent);
  border: 1px solid var(--glass-border);
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent);
}

.stat-pill.timer {
  color: var(--pink-1);
  font-weight: 700;
  font-size: 15px;
  animation: timerPulse 1s ease-in-out infinite;
}

@keyframes timerPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,110,180,0.3); }
  50% { box-shadow: 0 0 15px 3px rgba(255,110,180,0.2); }
}

.top-right {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ========== 文本显示区 ========== */
.text-display-area {
  margin-top: 128px;
  padding: 30px 40px;
  max-width: 900px;
  width: 90%;
  min-height: 180px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
  font-size: var(--font-size);
  line-height: 2;
  letter-spacing: 1px;
  overflow-y: auto;
  max-height: 300px;
}

.text-display-area .char {
  position: relative;
  transition: color 0.15s;
}

.text-display-area .char.correct {
  color: var(--correct);
}

.text-display-area .char.wrong {
  color: var(--wrong);
  text-decoration: underline;
  text-decoration-color: var(--wrong);
}

.text-display-area .char.current {
  color: var(--current);
  animation: charBlink 0.8s ease-in-out infinite;
}

.text-display-area .char.current::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--current);
  border-radius: 2px;
  animation: cursorBlink 0.8s ease-in-out infinite;
}

@keyframes charBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.text-display-area .char.waiting {
  color: var(--text-dim);
}

/* ========== 输入区 ========== */
.typing-input-area {
  padding: 8px 40px 0;
  width: 90%;
  max-width: 900px;
}

.typing-input {
  width: 100%;
  height: 80px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 16px 20px;
  font-size: var(--font-size);
  color: var(--text);
  font-family: inherit;
  resize: none;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
  backdrop-filter: blur(10px);
}

.typing-input:focus {
  border-color: var(--purple-2);
  box-shadow: 0 0 20px rgba(157,111,255,0.2);
}

.typing-input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ========== 单词闯关 ========== */
.word-display-area {
  margin-top: 100px;
  padding: 30px 40px;
  max-width: 600px;
  width: 90%;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
  text-align: center;
}

.word-translation {
  font-size: 18px;
  color: var(--text-dim);
  line-height: 1.35;
  height: calc(1.35em * 2);   /* 固定预留 2 行，释义长短不撑高卡片 */
  overflow-y: auto;           /* 超长释义可上下滚动查看完整 */
  overflow-x: hidden;
  margin-bottom: 12px;
  letter-spacing: 1px;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--glass-border) transparent;
}

.word-translation::-webkit-scrollbar { width: 6px; }
.word-translation::-webkit-scrollbar-track { background: transparent; }
.word-translation::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 3px;
}

/* 单词音标 + 朗读按钮 */
.word-phonetic {
  font-size: 16px;
  color: var(--current);
  letter-spacing: 1px;
  min-height: 1.3em;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.word-phonetic .word-speak {
  padding: 2px 10px;
  font-size: 12px;
}

/* 单词默写提示：想不起来时按回车显示答案 */
.word-hint {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}

/* 英文练习：本课单词预览（胶囊条） */
.word-strip {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 92%;
  max-width: 820px;
  margin: 12px auto 0;
  padding: 4px 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.word-strip::-webkit-scrollbar { display: none; }

.word-chip {
  flex: 0 0 auto;
  padding: 5px 14px;
  border-radius: 50px;
  font-size: 13px;
  line-height: 1.2;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
  white-space: nowrap;
  transition: all 0.2s;
}
.word-chip.done {
  opacity: 0.42;
  text-decoration: line-through;
}
.word-chip.current {
  background: color-mix(in srgb, var(--purple-1) 22%, var(--glass));
  border-color: var(--purple-1);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--purple-1) 25%, transparent);
}

/* 输入法拼写中的拼音：悬浮气泡（自适应宽度、不被输入框裁切、不互相遮挡） */
.compose-bubble {
  position: fixed;
  z-index: 300;
  display: none;
  padding: 3px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-mid) 94%, transparent);
  border: 1px solid var(--current);
  color: var(--current);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.5px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--bg-deep) 45%, rgba(0, 0, 0, 0.28));
  transform: translate(-50%, 0);
}
.compose-bubble.show { display: block; }

/* 英文练习选课：学期/册 小标题 */
.course-subgroup-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  margin: 14px 0 8px;
  opacity: 0.9;
}

.word-display-area .text-display-area {
  margin-top: 0;
  padding: 16px 20px;
  text-align: center;
  background: transparent;
  border: none;
  min-height: auto;
  max-height: none;
  font-size: 32px;
  letter-spacing: 4px;
  font-weight: 700;
}

/* ========== 短句模式 ========== */
.sentence-display {
  margin-top: 100px;
  padding: 30px 40px;
  max-width: 800px;
  width: 90%;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  font-size: var(--font-size);
  line-height: 2.2;
  text-align: left;
  backdrop-filter: blur(10px);
}

.sentence-input {
  width: 90%;
  max-width: 800px;
  height: 56px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 0 20px;
  font-size: var(--font-size);
  color: var(--text);
  font-family: inherit;
  outline: none;
  text-align: center;
  backdrop-filter: blur(10px);
  transition: border-color 0.3s;
}

.sentence-input:focus {
  border-color: var(--purple-2);
}

.sentence-next-area {
  margin-top: 20px;
}

/* ========== 虚拟键盘 ========== */
.keyboard {
  position: relative;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(120, 90, 40, 0.18);
  backdrop-filter: blur(20px);
}

.keyboard-row {
  display: flex;
  gap: 5px;
  justify-content: center;
}

/* 设置里关闭虚拟键盘（用 class，移动端 @media 也能覆盖） */
.keyboard.kb-hidden { display: none; }

.key {
  position: relative;
  min-width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--key-bg);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-dim);
  transition: all 0.15s;
}

.key.active {
  background: var(--purple-1);
  color: white;
  border-color: var(--purple-2);
  box-shadow: 0 0 12px rgba(107,76,230,0.5);
  transform: scale(0.92);
}

.key.next-key {
  background: rgba(255,217,102,0.22);
  border-color: var(--current);
  border-width: 2px;
  color: var(--current);
  animation: nextKeyPulse 1s ease-in-out infinite;
}

@keyframes nextKeyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224,139,44,0.55); }
  50%      { box-shadow: 0 0 0 4px rgba(224,139,44,0.15); }
}

.key.space { min-width: 240px; }
.key.shift { min-width: 80px; }
.key.backspace { min-width: 60px; }
.key.enter { min-width: 70px; }
.key.tab { min-width: 55px; }
.key.caps { min-width: 65px; }

/* ========== 逐键手图（手指提示） ========== */
.hand-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.keyboard.hands-off .hand-layer { display: none; }

.hand-svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 1080px;
  height: 481px;
  transform: translate(-183px, 12px) scale(0.928);
  transform-origin: 0 0;
  overflow: visible;
}

.hands-toggle.on,
.dictation-toggle.on {
  background: var(--purple-1);
  border-color: var(--purple-2);
  color: #fff;
}

/* ========== 结果页 ========== */
.result-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  padding: 50px 60px;
  text-align: center;
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
  animation: resultAppear 0.6s ease-out;
}

@keyframes resultAppear {
  from { opacity: 0; transform: translateY(30px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.result-glow {
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at center, rgba(157,111,255,0.1), transparent 50%);
  animation: resultGlow 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes resultGlow {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.result-title {
  font-size: 28px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--purple-2), var(--pink-1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 30px;
  position: relative;
}

.result-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 30px;
}

.result-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.result-num {
  font-size: 32px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--blue-1), var(--purple-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.result-label {
  font-size: 13px;
  color: var(--text-dim);
}

.result-grade {
  font-size: 48px;
  margin-bottom: 30px;
  animation: gradeFloat 2s ease-in-out infinite;
}

@keyframes gradeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.result-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
}

/* ========== 星级 ========== */
.result-stars {
  text-align: center;
  font-size: 15px;
  color: var(--text-dim);
  margin: -14px 0 22px;
  letter-spacing: 0.5px;
}
.result-stars b {
  color: var(--current);
  font-size: 18px;
}
.result-stars .st {
  font-size: 20px;
  line-height: 1;
  vertical-align: middle;
}
.st.off { color: var(--glass-border); }
.st.on { color: #f5b301; }
.st.half {
  background: linear-gradient(90deg, #f5b301 50%, var(--glass-border) 50%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* 首页模式卡：已获得 / 总共 */
.mode-stars {
  margin-top: auto;   /* 有/无星数的卡片都把该行贴到卡片底部对齐 */
  padding-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  opacity: 0.9;
}
.mode-stars b {
  color: #f5b301;
  font-size: 15px;
}
/* 选课页头部：本类累计星 */
.head-stars b {
  color: #f5b301;
  font-weight: 700;
}
/* 课程卡内：该课最高星 */
.course-stars {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: var(--text-dim);
}
.course-stars .st {
  font-size: 15px;
  line-height: 1;
}
.course-stars span {
  margin-left: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--current);
}

/* ========== 弹窗 ========== */
.modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(13,11,26,0.8);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.modal-card {
  background: var(--bg-mid);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 40px;
  max-width: 500px;
  width: 90%;
  text-align: center;
  animation: modalIn 0.3s ease-out;
}

@keyframes modalIn {
  from { transform: scale(0.9) translateY(20px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

/* ========== 通用确认弹窗 ========== */
.confirm-card {
  max-width: 380px;
  padding: 30px 26px 24px;
}
.confirm-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--purple-1) 18%, transparent);
  border: 1px solid var(--glass-border);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--purple-1) 25%, transparent);
}
.confirm-card h2 {
  font-size: 20px;
  margin-bottom: 10px;
}
.confirm-card p {
  color: var(--text-dim);
  line-height: 1.7;
  margin-bottom: 24px;
}
.confirm-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.modal-card h2 {
  margin-bottom: 30px;
  font-size: 22px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.stats-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.stats-num {
  font-size: 24px;
  font-weight: 700;
  color: var(--purple-2);
}

.stats-label {
  font-size: 12px;
  color: var(--text-dim);
}

.stats-chart {
  height: 80px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  justify-content: center;
  margin-bottom: 20px;
}

.stats-bar {
  width: 20px;
  background: linear-gradient(to top, var(--purple-1), var(--pink-1));
  border-radius: 4px 4px 0 0;
  transition: height 0.5s;
  min-height: 4px;
}

/* ========== 设置 ========== */
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--glass-border);
}

.setting-row:last-child {
  border-bottom: none;
}

.toggle {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
}

.toggle input {
  opacity: 0;
  width: 0; height: 0;
}

.toggle-slider {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  left: 3px; top: 2px;
  background: var(--text-dim);
  border-radius: 50%;
  transition: all 0.3s;
}

.toggle input:checked + .toggle-slider {
  background: var(--purple-1);
  border-color: var(--purple-2);
}

.toggle input:checked + .toggle-slider::before {
  transform: translateX(21px);
  background: white;
}

/* ========== 滚动条 ========== */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 3px;
}

.shake {
  animation: shakeX 0.3s ease;
}

@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.combo-dot {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink-1);
  pointer-events: none;
  z-index: 999;
  animation: comboFly 0.6s ease-out forwards;
}

@keyframes comboFly {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

.home-content {
  animation: homeEntrance 0.8s ease-out;
}

@keyframes homeEntrance {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.mode-card:nth-child(1) { animation: cardEntrance 0.5s ease-out 0.1s both; }
.mode-card:nth-child(2) { animation: cardEntrance 0.5s ease-out 0.2s both; }
.mode-card:nth-child(3) { animation: cardEntrance 0.5s ease-out 0.3s both; }
.mode-card:nth-child(4) { animation: cardEntrance 0.5s ease-out 0.4s both; }

@keyframes cardEntrance {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.text-display-area {
  position: relative;
  overflow-x: hidden;
}

/* ========== 账户头部 ========== */
.home-header {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.account-chip {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.3s;
  backdrop-filter: blur(10px);
}

.account-chip:hover {
  border-color: var(--purple-2);
  color: var(--text);
}

/* ========== 表单 ========== */
.form-row {
  margin-bottom: 14px;
}

.form-input {
  width: 100%;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 15px;
  color: var(--text);
  font-family: inherit;
  outline: none;
  transition: border-color 0.3s;
}

.form-input:focus {
  border-color: var(--purple-2);
}

/* ========== 错字本 ========== */
.wrong-list {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ========== 错字专项 ========== */
.mistake-display {
  margin-top: 100px;
  padding: 30px 40px;
  max-width: 520px;
  width: 90%;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
  text-align: center;
}

.mistake-display .text-display-area {
  margin-top: 0;
  padding: 16px 20px;
  text-align: center;
  background: transparent;
  border: none;
  font-size: 34px;
  letter-spacing: 6px;
  font-weight: 700;
}

.wrong-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 10px 16px;
}

.wrong-char {
  font-size: 20px;
  font-weight: 700;
  color: var(--pink-1);
}

.wrong-count {
  font-size: 13px;
  color: var(--text-dim);
}

/* ========== 成就徽章 ========== */
.badge-list {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.badge-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 12px 16px;
}

.badge-icon {
  font-size: 30px;
}

.badge-name {
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.badge-desc {
  font-size: 12px;
  color: var(--text-dim);
}

/* ========== 欢迎页 ========== */
#startScreen {
  overflow-y: auto;
  overflow-x: hidden;
}

.start-bubbles {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}

.start-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding-top: 40px;
  box-sizing: border-box;
}

.start-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 26px;
  padding: 44px 56px;
  text-align: center;
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px rgba(167,132,232,0.2);
  animation: cardEntrance 0.7s ease-out both;
  max-width: 92%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.start-slogan {
  margin: 4px 0 14px;
  font-size: 20px;
  color: var(--text-dim);
  letter-spacing: 1px;
}

/* ========== 全站页脚（欢迎页 / 首页 / 选课页，由 templates/_footer.html 渲染） ========== */
.site-footer {
  width: 100%;
  margin-top: auto;
  padding: 16px 16px 10px;
  border-top: 1px solid var(--glass-border);
  box-sizing: border-box;
}
.sf-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.sf-brand { display: flex; align-items: center; gap: 8px; }
.sf-logo { width: 26px; height: 26px; border-radius: 7px; display: block; }
.sf-brand-text { text-align: left; }
.sf-name { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.3; }
.sf-slogan { font-size: 11px; color: var(--text-dim); }
.sf-intro {
  max-width: 720px;
  margin: 0;
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-dim);
}
.sf-intro b { color: var(--current); font-weight: 600; }
.sf-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 720px;
}
.sf-links button {
  border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--bg-mid) 45%, transparent);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 50px;
}
.sf-links button:hover { color: var(--current); border-color: var(--current); }
.sf-meta { font-size: 12px; color: var(--text-dim); opacity: 0.8; line-height: 1.6; }
.sf-meta a { color: var(--text-dim); text-decoration: none; }
.sf-meta a:hover { color: var(--purple-2); text-decoration: underline; }

/* 设置面板：主题「跟随时间」说明行 */
.setting-hint {
  font-size: 12px;
  color: var(--text-dim);
  padding: 2px 4px 6px;
  line-height: 1.6;
}

.seo-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.beian-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.beian-icon {
  width: 14px;
  height: 14px;
  vertical-align: middle;
}

.btn-start {
  background: linear-gradient(135deg, var(--pink-1), var(--purple-1));
  color: #fff;
  border: none;
  padding: 18px 52px;
  border-radius: 50px;
  font-size: 21px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.35s;
  font-family: inherit;
  white-space: nowrap;
  width: auto;
  box-shadow: 0 8px 30px rgba(167,132,232,0.4);
  animation: startPulse 2.2s ease-in-out infinite;
}

.btn-start:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 12px 40px rgba(247,143,184,0.5);
}

@keyframes startPulse {
  0%, 100% { box-shadow: 0 8px 30px rgba(167,132,232,0.4); }
  50% { box-shadow: 0 8px 46px rgba(247,143,184,0.55); }
}

.start-bottom {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* 气泡（欢迎页背景） */
.bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.75), rgba(167,132,232,0.22) 60%, rgba(247,143,184,0.14));
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: inset -4px -4px 12px rgba(167,132,232,0.18), 0 6px 16px rgba(167,132,232,0.18);
  pointer-events: none;
  animation: bubbleFloat 7s ease-in-out infinite;
}
.bubble.b1 { width: 58px; height: 58px; left: 8%; top: 12%; }
.bubble.b2 { width: 38px; height: 38px; left: 20%; top: 62%; animation-delay: -1.5s; }
.bubble.b3 { width: 74px; height: 74px; right: 10%; top: 14%; animation-delay: -3s; }
.bubble.b4 { width: 44px; height: 44px; right: 22%; top: 58%; animation-delay: -2s; }
.bubble.b5 { width: 30px; height: 30px; left: 34%; top: 78%; animation-delay: -4s; }
.bubble.b6 { width: 50px; height: 50px; right: 36%; top: 80%; animation-delay: -2.6s; }
.bubble.b7 { width: 66px; height: 66px; left: 12%; top: 44%; animation-delay: -1s; }
.bubble.b8 { width: 36px; height: 36px; right: 8%; top: 44%; animation-delay: -5s; }

@keyframes bubbleFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-16px) scale(1.05); }
}

/* ========== 课程列表 ========== */
.course-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.course-list {
  margin-top: 0;
  width: 90%;
  max-width: 900px;
  padding: 8px 4px 24px;   /* 页面级滚动即可，页脚随列表之后出现，避免双滚动条 */
}

.course-group-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dim);
  margin: 22px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--glass-border);
}

.course-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.course-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 18px 14px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s;
  backdrop-filter: blur(8px);
  color: var(--text);
  font-family: inherit;
}

.course-card:hover {
  transform: translateY(-4px);
  border-color: var(--purple-2);
  box-shadow: 0 8px 22px rgba(167,132,232,0.25);
}

.course-card.done {
  border-color: rgba(76,175,138,0.6);
}

.course-card.done .course-tag {
  color: var(--correct);
}

.course-card.locked {
  opacity: 0.55;
  cursor: pointer;
}

.course-num {
  font-size: 22px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--purple-2), var(--pink-1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}

.course-name {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  line-height: 1.4;
  min-height: 36px;
}

.course-tag {
  font-size: 12px;
  color: var(--text-dim);
}

/* ========== 我的输入（打字鸭样式） ========== */
.user-input-area {
  margin-top: 12px;
  width: 90%;
  max-width: 800px;
}

.user-input {
  min-height: 44px;
  padding: 10px 16px;
  font-size: var(--font-size);
  line-height: 1.8;
  background: rgba(0,0,0,0.05);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  color: var(--text);
  overflow-x: auto;
  white-space: nowrap;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  font-family: inherit;
}

.user-input .ui-char {
  color: var(--text);
  opacity: 0.9;
}

.user-input .ui-cursor {
  display: inline-block;
  width: 2px;
  height: 1.2em;
  margin-left: 1px;
  background: var(--current);
  vertical-align: middle;
  animation: cursorBlink 0.9s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ========== 例句拼音（ruby） ========== */
/* ========== 例句拼音（原生 ruby 注音） ========== */
.text-display-area ruby {
  line-height: 1.3;
}

.text-display-area ruby rt {
  font-size: 0.42em;
  font-weight: 400;
  line-height: 1;
  color: var(--text-dim);
  user-select: none;
}

.text-display-area .char.correct rt { color: var(--correct); }
.text-display-area .char.wrong rt { color: var(--wrong); }
.text-display-area .char.current rt { color: var(--current); }

/* ========== 逐字对照（打字鸭式：拼音 / 目标字 / 用户输入 三行对齐） ========== */
.pinyin-grid {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  line-height: 1.4;
}

.pinyin-grid .char {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 1.6em;
  padding: 0 4px calc(1.6em + 6px);   /* 底部为"输入框"预留高度 + 间距 */
  line-height: 1.25;
}

.pinyin-grid .char .py {
  font-size: 0.7em;
  line-height: 1.15;
  min-height: 1.15em;
  color: var(--text-dim);
  white-space: nowrap;
  user-select: none;
}

/* 英文等无拼音时，拼音行不占高度；中文模式保留占位，使标点与汉字对齐 */
.pinyin-grid:not(.has-pinyin) .char .py:empty {
  min-height: 0;
}

/* 参考框 + 输入框：每个字一个方框 */
.pinyin-grid .char .tgt,
.pinyin-grid .char .typed {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: var(--key-bg);
  line-height: 1;
}

/* 参考框（汉字 / 字母） */
.pinyin-grid .char .tgt {
  color: var(--text);
}

/* 输入框：绝对定位在参考框正下方，不占宽度 */
.pinyin-grid .char .typed {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 2;
  white-space: nowrap;
  color: var(--text);
}

/* 输入法拼写中的拼音（溢出框外，与上方拼音同字号） */
.pinyin-grid .char .typed.buf {
  left: 0;
  transform: none;
  color: var(--text-dim);
  font-size: 0.7em;
  width: calc(1.6em / 0.7);
  height: calc(1.6em / 0.7);
}

.pinyin-grid .char.waiting .tgt { color: var(--text-dim); }
/* 参考框（汉字/字母）只"点亮"、不闪烁；闪烁只保留给下方输入框 */
.pinyin-grid .char.current { animation: none; }
.pinyin-grid .char.current .tgt {
  color: var(--current);
  border-color: var(--current);
  box-shadow: 0 0 0 2px rgba(224, 139, 44, 0.22);
}
/* 待输入的"输入框"也闪烁，提示在这里打字 */
.pinyin-grid .char.current .typed {
  border-color: var(--current);
  animation: boxBlink 1s ease-in-out infinite;
}

@keyframes boxBlink {
  0%, 100% { border-color: var(--current); box-shadow: 0 0 0 2px rgba(224, 139, 44, 0.25); }
  50%      { border-color: rgba(224, 139, 44, 0.3); box-shadow: 0 0 0 0 rgba(224, 139, 44, 0); }
}
.pinyin-grid .char.current::after { content: none; }
.pinyin-grid .char.correct .typed {
  color: var(--correct);
  border-color: var(--correct);
}
.pinyin-grid .char.wrong .typed {
  color: var(--wrong);
  border-color: var(--wrong);
}

/* 单词默写：隐藏参考英文（保留中文释义/音标），凭记忆输入 */
.word-display-area.dictated .pinyin-grid .char .tgt {
  visibility: hidden;
}

/* 中文练习：文字整体放大 */
#followTextDisplay {
  font-size: calc(var(--font-size) * 1.25);
}

/* ========== 中文卡片：汉字 + 输入框在同一张卡片内，输入框紧贴汉字下方 ========== */
.zh-card {
  position: relative;
  width: 90%;
  max-width: 820px;
  padding: 22px 26px 16px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
}

/* 卡内去掉内层卡片外观；只显示当前行（输入框紧贴其下） */
.screen.typing-screen .zh-card .sentence-display,
.screen.typing-screen .zh-card .text-display-area {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: none;
  min-height: 0;
  max-height: calc(var(--font-size) * 8.7);   /* 两行：当前行 + 下一行 */
  overflow-y: auto;
  overflow-x: hidden;
  background: transparent;
  border: none;
  border-radius: 0;
  backdrop-filter: none;
  letter-spacing: 1px;
}

.zh-card .typing-input-area {
  padding: 0;
  width: 100%;
  max-width: none;
}

.zh-card .sentence-input {
  width: 100%;
  max-width: none;
  height: 48px;
}

.screen.typing-screen .zh-card .mistake-display {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: none;
  background: transparent;
  border: none;
  border-radius: 0;
  backdrop-filter: none;
  text-align: center;
}

.screen.typing-screen .zh-card .word-display-area {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: none;
  background: transparent;
  border: none;
  border-radius: 0;
  backdrop-filter: none;
  text-align: center;
}

.zh-card .word-display-area .pinyin-grid,
.zh-card .mistake-display .pinyin-grid {
  justify-content: center;
}

/* 逐字对照：输入法拼写中的拼音（与上方拼音同字号；左对齐，从当前字往右展开） */
.pinyin-grid .char .typed.buf {
  left: 0;
  transform: none;
  color: var(--text-dim);
  font-size: 0.7em;
  line-height: calc(var(--font-size) * 1.35);
}

/* 严格逐字对照：隐藏原生输入框（仅作输入法锚点；透明 + 极低不透明度，连光标一起隐藏） */
.sentence-input.ime-hidden,
.typing-input.ime-hidden {
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;               /* 收窄：让光标左端≈锚点坐标（不随拼写长度漂移） */
  height: 1.5em;
  padding: 0;
  text-align: left;
  color: transparent;
  caret-color: transparent;
  -webkit-text-fill-color: transparent;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  resize: none;
  opacity: 0.01;
}

.sentence-input.ime-hidden::placeholder,
.typing-input.ime-hidden::placeholder {
  color: transparent;
}

.sentence-input.ime-hidden:focus,
.typing-input.ime-hidden:focus {
  border-color: transparent;
  box-shadow: none;
}

/* ========== 响应式 ========== */
@media (max-width: 800px) {
  .mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .mode-card {
    padding: 18px 10px;
  }
  .feature-grid .mode-card {
    padding: 16px 10px;
  }
  .mode-card .mode-icon {
    font-size: 28px;
    margin-bottom: 8px;
  }
  .mode-logo {
    width: 69px;
    height: 69px;
    margin-bottom: 8px;
  }
  .mode-card .mode-name {
    font-size: 14px;
  }
  .mode-card .mode-desc {
    font-size: 11px;
    min-height: 30px;
  }
  .result-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .course-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .screen.course-screen { padding-top: 116px; }
  .course-title { font-size: 16px; }
  .course-group-title { font-size: 14px; margin: 16px 0 10px; }
  .course-name { font-size: 13px; min-height: 0; }
  .course-num { font-size: 18px; }
  .course-tag { font-size: 11px; }
  .course-card { padding: 14px 10px; }
  .course-subgroup-title { font-size: 13px; }
  .btn-start {
    padding: 13px 38px;
    font-size: 18px;
  }

  /* 首页/欢迎页：可滚动 + 缩小，避免 logo 顶出、底部被裁 */
  #homeScreen,
  #startScreen {
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 0 22px;
  }
  #homeScreen .home-content,
  #startScreen .start-content {
    margin: auto;
  }
  .site-footer { padding: 12px 10px 8px; }
  .sf-intro { font-size: 11px; line-height: 1.7; }
  .sf-links { gap: 5px; }
  .sf-links button { font-size: 10px; padding: 3px 8px; }
  .logo-home {
    width: 140px;
  }
  .logo-start {
    width: 130px;
  }
  .home-content {
    gap: 18px;
  }
  .start-content {
    gap: 16px;
  }
  .start-card {
    padding: 22px 18px;
  }
  .start-slogan {
    font-size: 15px;
    margin: 2px 0 10px;
  }
  /* 手机用系统键盘：隐藏虚拟键盘与手图 */
  .keyboard {
    display: none;
  }
  .hands-toggle {
    display: none;
  }

  /* 顶栏：紧凑 + 统计横向滚动，避免竖排换行/溢出 */
  .screen.typing-screen {
    padding-top: 112px;
    padding-bottom: 14px;
  }
  .top-bar {
    top: 56px;
    padding: 6px 8px;
    gap: 6px;
    border-radius: 14px;
  }
  .top-bar .btn-back {
    flex: 0 0 auto;
    padding: 5px 9px;
    font-size: 11px;
    white-space: nowrap;
  }
  /* 选课页标题：占中间剩余空间并省略，避免把星数/首页挤出屏幕 */
  .top-bar .course-title {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    font-size: 14px;
  }
  .head-stars {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 3px 8px;
    font-size: 11px;
  }
  /* 手机端「返回」已能回首页，隐藏重复的「🏠 首页」让选课标题不被挤 */
  .top-bar .btn-home { display: none; }
  .top-stats {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .top-stats::-webkit-scrollbar {
    display: none;
  }
  .stat-pill {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 3px 9px;
    font-size: 11px;
  }
  .top-right {
    flex: 0 0 auto;
    gap: 5px;
  }
  .top-right .btn-small {
    padding: 4px 7px;
    font-size: 11px;
    white-space: nowrap;
  }

  /* 卡片 / 文字：紧凑，避免超出屏幕 */
  .screen.typing-screen .text-display-area {
    max-height: 42vh;
    min-height: 90px;
  }
  .zh-card {
    width: 94%;
    padding: 14px 12px 12px;
  }
  .word-display-area {
    padding: 16px 12px;
  }
  .word-display-area .text-display-area {
    font-size: 24px;
    letter-spacing: 2px;
    padding: 8px 4px;
  }
  .word-translation {
    font-size: 14px;
  }
  .word-phonetic {
    font-size: 14px;
  }
  .text-display-area {
    padding: 16px 12px;
    font-size: calc(var(--font-size) * 0.92);
  }
  #followTextDisplay {
    font-size: calc(var(--font-size) * 1.05);
  }
  .typing-input-area {
    width: 94%;
    padding: 6px 12px 0;
  }

  /* 手机输入框：保持隐藏（点文字区即可唤起系统键盘），不占位 */

  /* 手机端：文字框下方提示点文字区域弹出键盘 */
  .typing-input-area::after {
    content: '👆 点击文字区域弹出键盘';
    display: block;
    text-align: center;
    font-size: 12px;
    color: var(--text-dim);
    padding: 6px 0 2px;
    letter-spacing: 0.5px;
  }

  /* 弹窗：过高时可滚动，不再被上下裁掉 */
  .modal-overlay {
    overflow-y: auto;
    padding: 20px 0;
  }
  .modal-card {
    margin: auto;
    padding: 26px 20px;
  }
  .modal-card h2 {
    font-size: 19px;
    margin-bottom: 20px;
  }
  .setting-row {
    padding: 12px 0;
  }
}

/* ========== 小鸡光标（可爱梦幻） ========== */
html {
  cursor: url('/static/img/cursor/chick.png?v=2') 3 2, auto;
}
a, button, [onclick], label, select, summary,
input[type="checkbox"], input[type="radio"], input[type="range"] {
  cursor: url('/static/img/cursor/chick-pointer.png?v=2') 3 2, pointer !important;
}
button:disabled, input:disabled, .disabled {
  cursor: not-allowed !important;
}
input, textarea {
  cursor: text !important;
}

/* ========== 留言反馈 ========== */
.feedback-card { max-width: 540px; }
.feedback-card .form-input { margin-bottom: 10px; }
.feedback-card h2 { text-align: center; }
.feedback-card .auth-sub { text-align: center; }
.feedback-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; }
.ftab {
  position: relative;
  border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--bg-mid) 50%, transparent);
  color: var(--text-dim);
  padding: 6px 18px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
}
.ftab.on { background: var(--current); color: #fff; border-color: var(--current); }
.feedback-kinds { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.kind-btn {
  flex: 1;
  min-width: 96px;
  border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--bg-mid) 50%, transparent);
  color: var(--text-dim);
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
}
.kind-btn.on { border-color: var(--current); color: var(--current); box-shadow: inset 0 0 0 1px var(--current); }
.feedback-text { width: 100%; min-height: 120px; resize: vertical; line-height: 1.7; font-family: inherit; }
.fb-count { text-align: right; color: var(--text-dim); font-size: 12px; margin: 2px 2px 10px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fb-badge {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  padding: 0 4px;
  margin-left: 4px;
  border-radius: 50px;
  background: var(--wrong);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
}
.fb-mine-list { max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.fb-empty { color: var(--text-dim); text-align: center; padding: 24px 0; font-size: 14px; }
.fb-item { border: 1px solid var(--glass-border); border-radius: 12px; padding: 12px 14px; background: color-mix(in srgb, var(--bg-mid) 40%, transparent); }
.fb-item-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.fb-kind { font-size: 12px; font-weight: 700; color: var(--current); }
.fb-status { font-size: 11px; padding: 1px 8px; border-radius: 50px; border: 1px solid var(--glass-border); color: var(--text-dim); }
.fb-status.s-new { color: var(--wrong); border-color: var(--wrong); }
.fb-status.s-done { color: var(--correct); border-color: var(--correct); }
.fb-item-body { color: var(--text); font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.fb-reply { margin-top: 8px; padding: 8px 10px; border-left: 3px solid var(--current); background: color-mix(in srgb, var(--current) 10%, transparent); border-radius: 0 8px 8px 0; font-size: 13px; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.fb-reply b { color: var(--current); }
.fb-wait { margin-top: 8px; font-size: 12px; color: var(--text-dim); }
.fb-item-time { margin-top: 8px; font-size: 11px; color: var(--text-dim); text-align: right; }

/* ========== 提示 Toast ========== */
.toast-box {
  position: fixed;
  top: 20px; left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 88vw;
  padding: 12px 22px;
  border-radius: 50px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  opacity: 0;
  transform: translateY(-16px) scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.toast.show { opacity: 1; transform: translateY(0) scale(1); }
.toast-icon { font-size: 18px; line-height: 1; }
.toast.success { border-color: color-mix(in srgb, var(--correct) 55%, transparent); }
.toast.error   { border-color: color-mix(in srgb, var(--wrong) 55%, transparent); }

/* ========== 登录 / 注册 / 我的账户 ========== */
.auth-card { max-width: 380px; text-align: center; }
.auth-logo { font-size: 46px; line-height: 1; margin-bottom: 8px; }
.auth-card h2 { margin: 0 0 6px; }
.auth-sub { color: var(--text-dim); font-size: 13px; margin: 0 0 20px; }
.auth-card .form-row { margin-bottom: 12px; }
.auth-error {
  display: none;
  color: var(--wrong);
  font-size: 13px;
  margin: 0 0 12px;
  text-align: left;
  padding-left: 4px;
}
.auth-btn { width: 100%; margin-bottom: 12px; }
.auth-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.auth-switch { color: var(--text-dim); font-size: 13px; }
.auth-switch a { color: var(--purple-2); font-weight: 700; }
.auth-name { color: var(--purple-2); font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.auth-stats { color: var(--text-dim); font-size: 13px; margin-bottom: 20px; }
.auth-hint { color: var(--text-dim); font-size: 12px; line-height: 1.8; text-align: left; margin: 0 0 14px; padding-left: 4px; }
/* 确认弹窗始终在最上层（如注册时的「继承进度」提示不被注册弹窗遮挡） */
#confirmModal { z-index: 200; }

/* ========== 顶部菜单栏（全站） ========== */
#topNav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  z-index: 60;
  background: var(--glass);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(16px);
}
.nav-brand {
  display: flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 700; color: var(--text);
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.nav-logo { width: 26px; height: 26px; border-radius: 7px; display: block; }
.nav-brand b { color: var(--current); }
.nav-links {
  display: flex; align-items: center; gap: 4px;
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links button {
  flex-shrink: 0;
  border: none; background: transparent;
  color: var(--text-dim); font-family: inherit;
  font-size: 13px; font-weight: 600;
  padding: 6px 10px; border-radius: 9px;
  white-space: nowrap;
}
.nav-links button:hover { background: color-mix(in srgb, var(--current) 14%, transparent); color: var(--text); }
.nav-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.nav-icon {
  border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--bg-mid) 50%, transparent);
  border-radius: 50%; width: 34px; height: 34px; font-size: 15px;
  display: flex; align-items: center; justify-content: center; color: var(--text);
  font-family: inherit;
}
.nav-icon:hover { border-color: var(--current); }
.nav-auth {
  border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--bg-mid) 50%, transparent);
  border-radius: 50px; padding: 6px 14px; font-size: 13px; font-weight: 600;
  color: var(--text); white-space: nowrap; max-width: 150px;
  overflow: hidden; text-overflow: ellipsis; font-family: inherit;
}
.nav-auth:hover { border-color: var(--current); color: var(--current); }

/* ========== 我的统计（登录用户） ========== */
.my-stats-card { max-width: 720px; width: 100%; max-height: 88vh; overflow-y: auto; }
.my-h3 { font-size: 14px; color: var(--text); margin: 18px 0 8px; }
.my-best { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-dim); margin: 12px 0; }
.my-best b { color: var(--current); font-size: 15px; }
.my-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.my-table th, .my-table td { padding: 7px 8px; text-align: center; border-bottom: 1px solid var(--glass-border); }
.my-table th { color: var(--text-dim); font-weight: 600; }
.my-table td:first-child { text-align: left; }
.my-empty { color: var(--text-dim); padding: 16px 0; }
.my-chart { position: relative; height: 200px; margin-bottom: 6px; }
.my-chart.chart-fail::after {
  content: '图表加载失败（Chart.js CDN 不可用）';
  color: var(--text-dim); font-size: 13px;
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.my-heatmap {
  display: grid;
  grid-template-columns: repeat(13, 17px);
  grid-template-rows: repeat(7, 17px);
  grid-auto-flow: column;
  gap: 3px; justify-content: center; padding: 6px 0;
}
.my-heatmap .hm { width: 17px; height: 17px; border-radius: 3px; background: color-mix(in srgb, var(--text-dim) 16%, transparent); }
.my-heatmap .hm1 { background: color-mix(in srgb, var(--current) 30%, transparent); }
.my-heatmap .hm2 { background: color-mix(in srgb, var(--current) 55%, transparent); }
.my-heatmap .hm3 { background: color-mix(in srgb, var(--current) 78%, transparent); }
.my-heatmap .hm4 { background: var(--current); }

/* ========== 团队练习 ========== */
.team-card { max-width: 720px; width: 100%; max-height: 88vh; overflow-y: auto; }
.team-sub { color: var(--text-dim); font-size: 13px; margin: 4px 0 12px; }
.team-empty { color: var(--text-dim); text-align: center; padding: 20px 0; font-size: 14px; }
.team-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.team-list { display: flex; flex-direction: column; gap: 8px; }
.team-row {
  display: flex; justify-content: space-between; align-items: center;
  border: 1px solid var(--glass-border); border-radius: 12px; padding: 12px 14px;
  background: color-mix(in srgb, var(--bg-mid) 45%, transparent);
  color: var(--text); font-family: inherit; font-size: 14px; text-align: left;
}
.team-row:hover { border-color: var(--current); }
.team-row-meta { color: var(--text-dim); font-size: 12px; }
.team-head { border: 1px solid var(--glass-border); border-radius: 12px; padding: 12px 14px; background: color-mix(in srgb, var(--bg-mid) 40%, transparent); }
.team-title { font-size: 17px; font-weight: 700; color: var(--text); }
.team-meta { color: var(--text-dim); font-size: 13px; margin-top: 4px; }
.team-meta b { color: var(--current); letter-spacing: 2px; }
.team-assigns { display: flex; flex-direction: column; gap: 10px; }
.team-assign { border: 1px solid var(--glass-border); border-radius: 12px; padding: 10px 12px; background: color-mix(in srgb, var(--bg-mid) 35%, transparent); }
.team-assign-title { font-weight: 700; color: var(--text); }
.team-assign-meta { color: var(--text-dim); font-size: 12px; margin: 3px 0; }
.team-assign-status { font-size: 12px; margin-bottom: 8px; }
.team-assign-status .ok { color: var(--correct); font-weight: 700; }
.team-assign-status .todo { color: var(--wrong); }
.team-table-wrap { overflow-x: auto; }
.team-table-wrap .my-table { min-width: 620px; }
.my-table tr.me { background: color-mix(in srgb, var(--current) 12%, transparent); }
.my-table td.dim { color: var(--text-dim); font-size: 12px; }

/* ========== 矮屏适配（显示器高度不够，尽量一屏放下；放不下也能滚动） ========== */
@media (max-height: 820px) {
  .home-content { gap: 22px; }
  .start-content { gap: 16px; }
  .logo-home { width: 132px; }
  .logo-start { width: 150px; margin-bottom: 10px; }
  .mode-grid { gap: 12px; }
  .mode-card { padding: 12px 8px; }
  .home-bottom, .start-bottom { gap: 8px; }
  .site-footer { padding: 10px 16px 6px; }
}
@media (max-height: 620px) {
  .home-content { gap: 14px; }
  .start-content { gap: 10px; }
  .logo-home { width: 104px; }
  .logo-start { width: 120px; }
  .mode-logo { width: 48px; height: 48px; }
}

/* ==================== 打字游戏（大厅 + 舞台 + 12 个游戏的精灵） ==================== */
.games-screen {
  justify-content: flex-start;
  padding-top: 122px;
  padding-bottom: 20px;
}
.game-lobby { width: 90%; max-width: 980px; padding: 8px 4px 24px; }
.game-lobby-tip { color: var(--text-dim); font-size: 12px; margin: 4px 0 12px; text-align: center; }
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: 12px;
}
.game-card {
  display: flex; align-items: center; gap: 10px; text-align: left;
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 14px; padding: 12px 14px;
  color: var(--text); font-family: inherit; cursor: pointer;
  backdrop-filter: blur(8px);
  transition: transform .2s, border-color .2s;
}
.game-card:hover { transform: translateY(-3px); border-color: var(--current); }
.game-icon { font-size: 26px; flex: 0 0 auto; }
.game-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.game-name { font-size: 14px; font-weight: 700; }
.game-desc { font-size: 11px; color: var(--text-dim); }
.game-meta { font-size: 10px; color: var(--text-dim); opacity: .8; }
.game-score { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 11px; color: var(--text-dim); }
.game-stars { white-space: nowrap; }

/* 游戏屏 */
.game-screen { padding-bottom: 10px; }
.game-stage {
  position: relative;
  width: 96%; max-width: 1000px;
  flex: 1 1 auto; min-height: 260px;
  margin: 0 auto; overflow: hidden;
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-mid) 32%, transparent);
  border: 1px solid var(--glass-border);
  touch-action: manipulation;
}
.game-stage.no-kb { min-height: 340px; }

/* --- 通用 --- */
.gm-drop, .gm-balloon, .gm-enemy, .gm-block { position: absolute; will-change: transform, left, top; }
.gm-drop { top: 0; left: 0; transform: translate(-50%, 0); }
.gm-drop span {
  display: block; width: 38px; height: 38px; line-height: 38px; text-align: center;
  border-radius: 50%; font-weight: 700; font-size: 24px;
  background: var(--panel); border: 1px solid var(--glass-border); color: var(--current);
}

/* 1. 字母雨 */
.gm-drop span { box-shadow: 0 4px 14px rgba(0,0,0,.12); }

/* 2. 打地鼠 */
.gm-grid9 {
  position: absolute;
  top: 12px; bottom: 12px; left: 50%;
  transform: translateX(-50%);
  width: min(94%, 760px);   /* 收窄九宫格，洞不会被拉得过宽/裁切 */
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  gap: 10px;
}
.gm-hole {
  border-radius: 14px; border: 1px dashed var(--glass-border);
  background: color-mix(in srgb, var(--bg-deep) 22%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.gm-mole {
  font-size: 34px; font-weight: 700; color: var(--current);
  opacity: 0; transform: translateY(14px); transition: opacity .12s, transform .12s;
  background: rgba(8,10,26,.55); color: #fff; border-radius: 9px; padding: 0 9px; text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
/* 注意：这里必须用 background-color（不能用 background 简写，否则会把美术背景图的
   background-position 重置成 0% 0%，导致有地鼠时地洞图跳到左上角） */
.gm-hole.on { border-style: solid; border-color: var(--current); background-color: color-mix(in srgb, var(--current) 12%, transparent); }
.gm-hole.on .gm-mole { opacity: 1; transform: translateY(0); }

/* 3. 小鸡快跑 */
.gm-run { position: absolute; inset: 16px; display: flex; flex-direction: column; gap: 12px; }
.gm-run-text {
  font-size: 20px; line-height: 1.8; letter-spacing: 1px; color: var(--text-dim);
  background: var(--panel); border: 1px solid var(--glass-border); border-radius: 12px; padding: 10px 14px;
}
.gm-run-text .ok { color: var(--correct); }
.gm-run-text .cur { color: var(--current); border-bottom: 2px solid var(--current); }
.gm-run-track { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.gm-run-row { display: flex; align-items: center; gap: 8px; }
.gm-run-face { font-size: 20px; }
.gm-run-bar { flex: 1 1 auto; height: 12px; border-radius: 8px; background: color-mix(in srgb, var(--text-dim) 18%, transparent); overflow: hidden; }
.gm-run-bar i { display: block; height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, var(--pink-1), var(--purple-1)); transition: width .12s linear; }
.gm-run-name { font-size: 11px; color: var(--text-dim); width: 32px; }
.gm-run-row.gm-me .gm-run-bar i { background: linear-gradient(90deg, var(--blue-1), var(--purple-1)); }

/* 4. 单词气球 */
.gm-balloon { bottom: 0; top: auto; }
.gm-bw { display: block; font-size: 17px; font-weight: 700; letter-spacing: 1px; text-align: center; color: var(--text);   background: rgba(8,10,26,.5); color: #fff; border-radius: 8px; padding: 1px 8px; text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.gm-bw i { font-style: normal; opacity: .55; }
.gm-bw i.ok { opacity: 1; color: var(--correct); }
.gm-balloon-body { display: block; width: 46px; height: 56px; margin: 4px auto 0; border-radius: 50% 50% 44% 44%; background: var(--pink-1); box-shadow: inset -6px -8px 0 rgba(0,0,0,.08); }
.gm-balloon.b2 .gm-balloon-body { background: var(--blue-1); }
.gm-balloon.b3 .gm-balloon-body { background: var(--purple-2); }
.gm-balloon.b4 .gm-balloon-body { background: var(--correct); }
.gm-balloon.b5 .gm-balloon-body { background: var(--current); }

/* 5. 打字消消乐 */
.gm-match {
  position: absolute; inset: 14px;
  display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr);
  gap: 10px;
}
.gm-tile {
  border-radius: 12px; border: 1px dashed var(--glass-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; letter-spacing: 1px; color: transparent;
}
.gm-tile.on { border-style: solid; background: var(--panel); color: var(--text); }
.gm-tile span { opacity: .6; }
.gm-tile span.ok { opacity: 1; color: var(--correct); }
.gm-tile span.cur { opacity: 1; color: var(--current); border-bottom: 2px solid var(--current); }

/* 6. 单词塔防 */
.gm-base { position: absolute; left: 12px; bottom: 12px; font-size: 32px; }
.gm-enemy { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gm-enemy-word { font-size: 16px; font-weight: 700; letter-spacing: 1px; background: var(--panel); border: 1px solid var(--glass-border); border-radius: 8px; padding: 1px 6px; white-space: nowrap; }
.gm-enemy-word i { font-style: normal; opacity: .5; }
.gm-enemy-word i.ok { opacity: 1; color: var(--correct); }
.gm-enemy-face { font-size: 24px; }

/* 7. 方块下落 */
.gm-blocks { position: absolute; inset: 12px 12px 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.gm-bcol { border-bottom: 2px solid var(--glass-border); border-radius: 6px; }
.gm-bstack { display: flex; flex-direction: column-reverse; gap: 4px; height: 100%; justify-content: flex-start; padding: 0 2px; }
.gm-btile {
  font-size: 14px; text-align: center; padding: 3px 2px; border-radius: 6px;
  background: color-mix(in srgb, var(--current) 22%, transparent);
  border: 1px solid var(--glass-border); color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gm-btile.bad { background: color-mix(in srgb, var(--wrong) 22%, transparent); }
.gm-bcol.clearing { animation: gmClear .3s ease; }
@keyframes gmClear { 0% { background: color-mix(in srgb, var(--correct) 30%, transparent); } 100% { background: transparent; } }
.gm-block {
  position: absolute; top: 0;
  background: var(--panel); border: 1px solid var(--current); border-radius: 8px;
  padding: 3px 8px; white-space: nowrap;
}
.gm-block-w { font-size: 16px; font-weight: 700; letter-spacing: 1px; }
.gm-block-w i { font-style: normal; opacity: .55; }
.gm-block-w i.ok { opacity: 1; color: var(--correct); }

/* 8. 盲打黑屏 */
.gm-blind { position: absolute; inset: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.gm-blind-tip { color: var(--text-dim); font-size: 13px; }
.gm-blind-bar { width: 80%; max-width: 520px; height: 16px; border-radius: 10px; background: color-mix(in srgb, var(--text-dim) 18%, transparent); overflow: hidden; }
.gm-blind-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue-1), var(--purple-1)); transition: width .12s linear; }
.gm-blind-count { font-size: 20px; font-weight: 700; color: var(--current); }
.gm-blind-hint { font-size: 13px; color: var(--pink-1); min-height: 20px; }
.gm-blind-shot { font-size: 18px; line-height: 1.9; color: var(--text-dim); max-width: 90%;   background: var(--panel); border: 1px solid var(--glass-border); border-radius: 10px; padding: 6px 12px;
}
.gm-blind-shot .ok { color: var(--correct); }

/* 9. 节奏打字 */
.gm-rhythm { position: absolute; inset: 14px; display: flex; flex-direction: column; gap: 16px; }
.gm-rhythm-text { font-size: 22px; line-height: 1.7; letter-spacing: 2px; color: var(--text-dim); text-align: center;   background: var(--panel); border: 1px solid var(--glass-border); border-radius: 12px; padding: 10px 16px;
}
.gm-rhythm-text .ok { color: var(--correct); }
.gm-rhythm-text .cur { color: var(--current); }
.gm-rhythm-lane { position: relative; flex: 1 1 auto; overflow: hidden; border-radius: 12px; background: color-mix(in srgb, var(--bg-deep) 20%, transparent); }
.gm-rhythm-line { position: absolute; left: 22%; top: 0; bottom: 0; width: 2px; background: var(--current); opacity: .7; }
.gm-note {
  position: absolute; top: 50%;
  min-width: 96px; min-height: 96px; width: max-content; height: auto; aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  padding: 0 20px; text-align: center; white-space: nowrap;
  border-radius: 50%; font-style: normal; font-size: 18px; font-weight: 700;
  color: #43315e; background: var(--panel); text-shadow: 0 1px 0 rgba(255,255,255,.85);
}
.gm-note.perfect { background: var(--correct); color: #fff; }
.gm-note.good { background: var(--current); color: #fff; }
.gm-note.late, .gm-note.missed { background: color-mix(in srgb, var(--wrong) 40%, transparent); }

/* 10. 拆弹专家 */
.gm-bomb { position: absolute; inset: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.gm-bomb-face { font-size: 56px; }
.gm-bomb-face.urgent { animation: gmShake .4s infinite; }
@keyframes gmShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.gm-bomb-text { font-size: 22px; letter-spacing: 2px; line-height: 2; color: var(--text-dim); text-align: center; }
.gm-bomb-text .ok { color: var(--correct); }
.gm-bomb-text .cur { color: var(--current); border-bottom: 2px solid var(--current); }
.gm-bomb-tip { font-size: 12px; color: var(--pink-1); }

/* 11. 拼音听写 */
.gm-dict { position: absolute; inset: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.gm-dict-hint { font-size: 13px; color: var(--text-dim); }
.gm-dict-word { font-size: 30px; letter-spacing: 6px; font-weight: 700; color: var(--text-dim); min-height: 34px; }
.gm-dict-word .ok { color: var(--correct); }
.gm-dict-count { font-size: 12px; color: var(--text-dim); }
.gm-dict-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* 12. 成语接龙 */
.gm-idiom { position: absolute; inset: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.gm-idiom-tip { font-size: 12px; color: var(--text-dim); }
.gm-idiom-cur { font-size: 34px; font-weight: 700; letter-spacing: 6px; color: var(--text); }
.gm-idiom-cur .tail { color: var(--current); }
.gm-idiom-typed { font-size: 30px; letter-spacing: 8px; color: var(--text-dim); }
.gm-idiom-typed .ok { color: var(--correct); }
.gm-idiom-actions { display: flex; gap: 10px; }

/* 点一下开始输入（手机靠这个手势唤起系统键盘） */
.game-tap-hint {
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);
  z-index: 5; pointer-events: none;
  background: var(--panel); border: 1px solid var(--current);
  color: var(--text); font-size: 13px; font-weight: 600;
  padding: 7px 16px; border-radius: 50px; white-space: nowrap;
  animation: gmPulse 1.4s ease-in-out infinite;
}
@keyframes gmPulse { 0%,100% { opacity: .65; } 50% { opacity: 1; } }

/* 舞台提示 */
.game-stage::after {
  content: '直接在键盘上打字即可（手机点一下游戏区域唤起键盘）';
  position: absolute; left: 0; right: 0; bottom: 4px; text-align: center;
  font-size: 10px; color: var(--text-dim); opacity: .55; pointer-events: none;
}

@media (max-width: 800px) {
  .games-screen { padding-top: 116px; }
  .games-grid { grid-template-columns: 1fr; gap: 10px; }
  .game-card { padding: 10px 12px; }
  .game-stage { width: 100%; min-height: 200px; }
  .game-stage.no-kb { min-height: 260px; }
  .gm-run-text { font-size: 15px; }
  .gm-idiom-cur { font-size: 24px; letter-spacing: 3px; }
  .gm-idiom-typed { font-size: 20px; letter-spacing: 5px; }
  .gm-dict-word { font-size: 22px; letter-spacing: 4px; }
  .gm-bomb-text { font-size: 16px; }
  .gm-bomb-face { font-size: 44px; }
  .gm-grid9 { gap: 8px; inset: 8px; }
  .gm-match { gap: 7px; inset: 8px; }
  .gm-tile { font-size: 12px; }
}
/* ===== 打字游戏输入层（针对搜狗等低层键盘钩子输入法） ===== */
/* 隐藏输入框：放进舞台、贴底部居中（中文输入法候选窗才有落脚点，不再被顶栏压住） */
.game-stage .sentence-input.ime-hidden {
  left: 50%;
  top: auto;
  bottom: 6px;
  transform: translateX(-50%);
  width: 2px;
}
/* 可见输入框（中文类游戏的保底输入方式） */
.game-input-row {
  width: 96%;
  max-width: 1000px;
  margin: 8px auto 0;
  display: flex;
  justify-content: center;
}
.game-visible-input {
  width: min(94%, 640px);
  height: 46px;
  padding: 0 16px;
  border-radius: 12px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  outline: none;
}
.game-visible-input:focus { border-color: var(--current); }
/* 屏幕键盘：可点击（鼠标/触摸，不受输入法钩子影响） */
.keyboard .key { cursor: pointer; touch-action: manipulation; }
.keyboard .key:hover { border-color: var(--current); }
/* 字母类游戏强制显示键盘（手机端 .keyboard{display:none} 也不隐藏） */
.keyboard.kb-force { display: flex !important; }
/* 临时诊断行 */
.jg-diag {
  position: absolute;
  left: 6px; top: 2px;
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-dim);
  opacity: .75;
  pointer-events: none;
  font-family: ui-monospace, Consolas, monospace;
  max-width: 96%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ===== 打字游戏：开始封面（点「开始」才正式计时/生成） ===== */
.game-cover {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bg-deep) 74%, transparent);
  backdrop-filter: blur(6px);
  border-radius: 16px;
}
.game-cover-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
  padding: 16px 24px;
  max-width: 92%;
}
.game-cover-icon { font-size: 44px; }
.game-cover-name { font-size: 20px; font-weight: 700; color: var(--text); }
.game-cover-desc { font-size: 13px; color: var(--text-dim); }
.game-cover-meta { font-size: 12px; color: var(--text-dim); line-height: 1.7; }
.game-cover-btn { margin-top: 8px; font-size: 17px; padding: 12px 34px; }
/* ===== 打字游戏美术层（有图用图，没图回落到 emoji/CSS） ===== */
/* 图片放 static/img/games/<游戏id>/<文件名>.png（透明底） */
.art-on {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.art-on.art-icon {           /* 纯图标位：把原来的 emoji 文字藏掉 */
  color: transparent !important;
  text-shadow: none !important;
}
.game-stage.art-bg { border-color: transparent; }
/* 消消乐：每个格子 = 图标 + 单词 */
.gm-tile { flex-direction: column; gap: 2px; }
.gm-tile-icon { display: block; width: 34px; height: 34px; margin: 0 auto; }
.gm-tile-word { display: block; font-size: 16px; }
/* 图上叠字（字母/词语/音符）时加深阴影，保证可读 */
.gm-mole.art-on, .gm-drop span.art-on, .gm-note.art-on,
.gm-block.art-on, .gm-btile.art-on, .gm-run-face.art-on {
  text-shadow: 0 1px 3px rgba(0,0,0,.65), 0 0 3px rgba(255,255,255,.75);
}
/* ===== 美术元素尺寸（检测到图片后才生效；没图时保持原样） ===== */
.gm-enemy-face.art-on { display: block; width: 42px; height: 42px; }
.gm-run-face.art-on { display: inline-block; width: 34px; height: 34px; }
.gm-bomb-face.art-on { display: block; width: 120px; height: 120px; }
.gm-base.art-on { display: block; width: 56px; height: 56px; }
.gm-block.art-on {
  background-size: 100% 100%;
  min-height: 32px; display: flex; align-items: center; justify-content: center;
}
.gm-btile.art-on { background-size: 100% 100%; }
/* ===== 美术尺寸微调（按实际出图比例调过） ===== */
/* 洞：contain 铺满整个格子（不裁切、不溢出） */
.gm-hole.art-on { background-size: contain; }
/* 地鼠：按格子高度缩放，位置让"自身的土圈"落在洞口里 */
.gm-mole.art-on {
  height: 62%; width: auto; aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto; position: relative; top: -2%;   /* 自身的土圈正好落在洞口 */
  font-size: 20px;
}
.gm-tile-icon { width: 44px; height: 44px; }
.gm-enemy-face.art-on { width: 52px; height: 52px; }
.gm-run-face.art-on { width: 42px; height: 42px; }
.gm-base.art-on { width: 64px; height: 64px; }
.gm-note.art-on { background-size: 100% 100%; background-position: center; }   /* 元素是正方形 → 圆圈不变形 */
.gm-bomb-face.art-on { width: 116px; height: 116px; }
/* 叠在图片上的字母/字：白色 + 深色描边，任何底图上都能看清 */
.gm-mole.art-on, .gm-drop span.art-on, .gm-note.art-on,
.gm-block.art-on, .gm-btile.art-on {
  color: #fff;
  text-shadow: -1px -1px 0 rgba(30,20,10,.9), 1px -1px 0 rgba(30,20,10,.9),
               -1px 1px 0 rgba(30,20,10,.9), 1px 1px 0 rgba(30,20,10,.9),
               0 2px 5px rgba(0,0,0,.5);
}
/* ==================== 打字测速：结果 / 排行榜 / 等级徽章 ==================== */
.speed-result-box { margin: 4px 0 16px; }
.sr-ok { color: var(--correct); font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.sr-bad { color: var(--text-dim); font-size: 13px; margin-bottom: 10px; }
.sr-ask { color: var(--current); font-size: 14px; margin-bottom: 10px; }
.sr-actions { display: flex; justify-content: center; gap: 10px; }

.speed-rank-card { max-width: 720px; width: 100%; max-height: 88vh; overflow-y: auto; }
.rank-tabs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
.rank-tab {
  border: 1px solid var(--glass-border); background: color-mix(in srgb, var(--bg-mid) 45%, transparent);
  color: var(--text-dim); font-family: inherit; font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: 50px; cursor: pointer;
}
.rank-tab.on { border-color: var(--current); color: var(--current); }
.rank-me { font-size: 13px; color: var(--text-dim); margin: 6px 0 10px; }
.rank-list { max-height: 46vh; overflow-y: auto; border: 1px solid var(--glass-border); border-radius: 12px; }
.rank-empty { color: var(--text-dim); text-align: center; padding: 22px 0; font-size: 14px; }
.rank-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rank-table th, .rank-table td { padding: 7px 8px; text-align: center; border-bottom: 1px solid var(--glass-border); }
.rank-table th { color: var(--text-dim); font-weight: 600; position: sticky; top: 0; background: var(--bg-mid); }
.rank-table tr.me { background: color-mix(in srgb, var(--current) 12%, transparent); }
.rank-table td.rk { font-weight: 700; color: var(--current); width: 38px; }
.rank-table td.nm { text-align: left; }
.rank-table td.dim { color: var(--text-dim); font-size: 12px; }
.rank-foot { font-size: 11px; color: var(--text-dim); opacity: .85; margin-top: 10px; line-height: 1.6; }

/* 等级徽章 */
.lv-badge {
  display: inline-block; font-size: 11px; font-weight: 700; line-height: 1.6;
  padding: 0 7px; border-radius: 50px; border: 1px solid var(--glass-border);
  color: #fff; margin-right: 5px; vertical-align: middle;
}
.lv-gray { background: #8f8f9a; }
.lv-green { background: #3fa76b; }
.lv-blue { background: #3a7bd6; }
.lv-cyan { background: #1f9fb0; }
.lv-purple { background: #8a5cf0; }
.lv-orange { background: #e0872c; }
.lv-red { background: #e2503f; }
.lv-gold { background: linear-gradient(135deg, #f0a24a, #ffd166); color: #4a3a20; }
.lv-rainbow { background: linear-gradient(135deg, #ff6eb4, #9d6fff, #4dc9f6); }
.lv-band { font-size: 11px; color: var(--text-dim); margin-right: 4px; vertical-align: middle; }
.lv-icons { font-size: 11px; letter-spacing: -1px; vertical-align: middle; }
.lv-tag.guest {
  display: inline-block; font-size: 11px; padding: 0 7px; border-radius: 50px;
  border: 1px solid var(--glass-border); color: var(--text-dim);
}

/* 我的账户：等级区块 */
.acct-level {
  width: 100%; max-width: 340px; margin: 2px auto 12px;
  border: 1px solid var(--glass-border); border-radius: 12px;
  padding: 10px 12px; background: color-mix(in srgb, var(--bg-mid) 40%, transparent);
}
.acct-lv-line { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 8px; }
.acct-xp { height: 8px; border-radius: 6px; background: color-mix(in srgb, var(--text-dim) 20%, transparent); overflow: hidden; }
.acct-xp i { display: block; height: 100%; background: linear-gradient(90deg, var(--pink-1), var(--purple-1)); }
.acct-xp-txt { font-size: 11px; color: var(--text-dim); margin-top: 6px; }
/* ==================== 打字测速屏：不显示虚拟键盘/手指提示；文字区加高到 10 行 ==================== */
#timedScreen .keyboard { display: none !important; }
#timedScreen .text-display-area {
  /* 每行 ≈3.9em（字 3.5em + 行距 0.5em）；尽量放下 ~8 行，小屏按视口收缩 */
  height: min(33em, 64vh);
  min-height: min(33em, 64vh);
  max-height: min(33em, 64vh);
  padding: 18px 30px;
}
/* ==================== 测速屏：字与下方"输入框"拉开行距 ====================
   每个字 = 参考字 + 下方一个输入框（.typed），原来是 0 行距 → 下一行文字紧贴输入框。
   这里加 row-gap 把行分开。 */
#timedScreen .text-display-area { row-gap: 10px; }