* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  overflow-x: hidden;
  user-select: none;
  color: white;
}

/* === Navigation === */
.top-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 8px 16px; background: rgba(0,0,0,0.3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.nav-btn {
  padding: 8px 20px; font-size: 0.95em; border: 2px solid rgba(255,255,255,0.3);
  border-radius: 20px; background: transparent; color: white; cursor: pointer;
  transition: all 0.3s; font-weight: bold;
}
.nav-btn:hover { background: rgba(255,255,255,0.15); }
.nav-btn.active { background: white; color: #667eea; border-color: white; }
.nav-version {
  margin-left: 12px; padding: 6px 12px; font-size: 0.85em;
  border: 1px solid rgba(255,255,255,0.4); border-radius: 12px;
  background: rgba(255,255,255,0.1); color: white; cursor: pointer;
}

/* === Screens === */
.screen { display: none; min-height: 100vh; }
.screen.active { display: block; }

/* === Menu Screen === */
.menu-screen {
  display: flex; flex-direction: column; align-items: center;
  padding: 20px 10px 40px; color: white;
}
.game-title { font-size: 2.8em; font-weight: bold; text-shadow: 3px 3px 6px rgba(0,0,0,0.3); margin-bottom: 6px; animation: bounce 2s ease infinite; }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.game-subtitle { font-size: 1.1em; margin-bottom: 16px; opacity: 0.9; }
.section-label { font-size: 0.85em; opacity: 0.7; margin-bottom: 6px; text-align: center; }

/* Collapsible Sections */
.collapsible { margin-bottom: 12px; }
.collapsible-toggle { cursor: pointer; user-select: none; margin-bottom: 0; }
.collapsible-toggle:hover { opacity: 1; }
.collapsible-toggle .arrow { font-size: 0.8em; margin-left: 4px; display: inline-block; transition: transform 0.2s; }
.collapsible-content { margin-top: 8px; }

/* Version Dropdown */
.version-dropdown-wrap-center { text-align: center; margin-bottom: 12px; }
.version-dropdown {
  padding: 8px 14px; font-size: 0.9em; border: 2px solid rgba(255,255,255,0.4);
  border-radius: 10px; background: rgba(255,255,255,0.15); color: white;
  cursor: pointer; outline: none; backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.version-dropdown option { background: #5a4a8a; color: white; }
.version-dropdown:hover { background: rgba(255,255,255,0.25); }

/* Version Selector (legacy - hidden) */
.version-selector { display: none; }
.version-btn {
  padding: 10px 20px; font-size: 0.95em; border: 3px solid transparent;
  border-radius: 12px; cursor: pointer; transition: all 0.3s; font-weight: bold;
  color: white; background: rgba(255,255,255,0.15); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.version-btn:hover { transform: scale(1.05); background: rgba(255,255,255,0.25); }
.version-btn.active {
  background: white; color: #667eea; border-color: #FFD700;
  box-shadow: 0 0 0 3px white, 0 4px 15px rgba(0,0,0,0.3);
}
.version-btn .version-name { display: block; font-size: 1em; }
.version-btn .version-desc { display: block; font-size: 0.75em; opacity: 0.8; font-weight: normal; margin-top: 2px; }

.grade-selector { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; justify-content: center; }
.grade-btn { padding: 8px 16px; font-size: 0.95em; border: 3px solid transparent; border-radius: 10px; cursor: pointer; transition: all 0.3s; font-weight: bold; color: white; }
.grade-btn:hover { transform: scale(1.06); }
.grade-btn.g0 { background: #9b59b6; }
.grade-btn.g1 { background: #e67e22; }
.grade-btn.g2 { background: #1abc9c; }
.grade-btn.g3 { background: #FF6B6B; }
.grade-btn.g30 { background: #FF9999; }
.grade-btn.g4 { background: #4ECDC4; }
.grade-btn.g40 { background: #7EDCD4; }
.grade-btn.g5 { background: #45B7D1; }
.grade-btn.g50 { background: #73CBE1; }
.grade-btn.g6 { background: #96CEB4; }
.grade-btn.g60 { background: #B0DEC8; }
.grade-btn.active { box-shadow: 0 0 0 3px white, 0 4px 15px rgba(0,0,0,0.3); border-color: #FFD700; }

.unit-selector { display: flex; gap: 5px; margin-bottom: 12px; flex-wrap: wrap; justify-content: center; max-width: 700px; }
.unit-btn { padding: 6px 12px; font-size: 0.85em; border: 2px solid rgba(255,255,255,0.5); border-radius: 8px; cursor: pointer; transition: all 0.3s; background: transparent; color: white; }
.unit-btn:hover { background: rgba(255,255,255,0.2); }
.unit-btn.active { background: white; color: #667eea; font-weight: bold; }

.theme-selector { display: flex; gap: 5px; margin-bottom: 12px; flex-wrap: wrap; justify-content: center; max-width: 650px; }
.theme-btn { padding: 6px 12px; font-size: 0.88em; border: 2px solid white; border-radius: 16px; cursor: pointer; transition: all 0.3s; background: transparent; color: white; }
.theme-btn:hover, .theme-btn.active { background: white; color: #667eea; }

.freq-selector { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; justify-content: center; }
.freq-btn { padding: 8px 16px; font-size: 0.92em; border: none; border-radius: 10px; cursor: pointer; transition: all 0.3s; font-weight: bold; color: white; }
.freq-btn:hover { transform: scale(1.06); }
.freq-btn.freq-high { background: #27ae60; }
.freq-btn.freq-mid { background: #f39c12; }
.freq-btn.freq-low { background: #e74c3c; }
.freq-btn.freq-all { background: #8e44ad; }
.freq-btn.active { box-shadow: 0 0 0 3px white, 0 4px 15px rgba(0,0,0,0.3); }

.difficulty-selector { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; justify-content: center; }
.diff-btn { padding: 8px 16px; font-size: 0.92em; border: none; border-radius: 10px; cursor: pointer; transition: all 0.3s; font-weight: bold; color: white; }
.diff-btn:hover { transform: scale(1.06); }
.diff-btn.diff-easy { background: #27ae60; }
.diff-btn.diff-medium { background: #f39c12; }
.diff-btn.diff-hard { background: #e74c3c; }
.diff-btn.active { box-shadow: 0 0 0 3px white, 0 4px 15px rgba(0,0,0,0.3); }

.word-count-preview {
  font-size: 0.95em; margin-bottom: 14px; opacity: 0.9;
  background: rgba(255,255,255,0.15); padding: 8px 18px; border-radius: 18px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.clear-seen-btn {
  padding: 4px 12px; font-size: 0.82em; border: 1px solid rgba(255,255,255,0.6);
  border-radius: 10px; background: rgba(255,255,255,0.1); color: white; cursor: pointer;
  transition: all 0.2s;
}
.clear-seen-btn:hover { background: rgba(255,100,100,0.4); border-color: #ff6b6b; }

.start-btn {
  padding: 14px 44px; font-size: 1.3em; border: none; border-radius: 28px;
  cursor: pointer; background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
  color: white; font-weight: bold; transition: all 0.3s;
  box-shadow: 0 5px 20px rgba(245,87,108,0.4);
}
.start-btn:hover { transform: scale(1.08); box-shadow: 0 8px 30px rgba(245,87,108,0.6); }

.mode-buttons {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 10px;
}
.mode-btn {
  display: flex; flex-direction: column; align-items: center;
  padding: 20px 28px; border: 3px solid rgba(255,255,255,0.3); border-radius: 20px;
  background: rgba(255,255,255,0.12); color: white; cursor: pointer;
  transition: all 0.3s; min-width: 140px; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.mode-btn:hover {
  transform: translateY(-4px) scale(1.03);
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.6);
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}
.mode-icon { font-size: 2.4em; margin-bottom: 8px; }
.mode-title { font-size: 1.15em; font-weight: bold; margin-bottom: 4px; }
.mode-desc { font-size: 0.8em; opacity: 0.7; }

/* === Learn Screen === */
.learn-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; padding: 0 4px;
}
.back-btn {
  padding: 6px 16px; font-size: 0.9em; border: 2px solid rgba(255,255,255,0.4);
  border-radius: 16px; background: transparent; color: white; cursor: pointer;
  transition: all 0.3s;
}
.back-btn:hover { background: rgba(255,255,255,0.15); }

/* === Spelling Screen === */
.spelling-screen { padding: 20px 16px 40px; }
.spelling-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; padding: 0 4px;
}
.spelling-score { font-size: 1.1em; font-weight: bold; }
.spelling-content { max-width: 600px; margin: 0 auto; text-align: center; }
.spelling-word-zh {
  font-size: 2.2em; font-weight: bold; margin-bottom: 8px;
  background: rgba(255,255,255,0.2); padding: 12px 32px; border-radius: 16px;
  display: inline-block;
}
.spelling-hint { font-size: 0.9em; opacity: 0.7; margin-bottom: 20px; }
.spelling-input {
  width: 100%; max-width: 400px; padding: 14px 20px; font-size: 1.4em;
  border: 3px solid rgba(255,255,255,0.4); border-radius: 14px;
  background: rgba(255,255,255,0.15); color: white; outline: none;
  text-align: center; letter-spacing: 2px; margin-bottom: 16px;
}
.spelling-input::placeholder { color: rgba(255,255,255,0.4); }
.spelling-input.correct { border-color: #27ae60; background: rgba(39,174,96,0.2); }
.spelling-input.wrong { border-color: #e74c3c; background: rgba(231,76,60,0.2); }
.spelling-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.spelling-btn {
  padding: 10px 24px; font-size: 1em; border: none; border-radius: 18px;
  cursor: pointer; font-weight: bold; color: white; transition: all 0.3s;
}
.spelling-btn:hover { transform: scale(1.05); }
.spelling-btn.speak { background: #3498db; }
.spelling-btn.hint { background: #f39c12; }
.spelling-btn.skip { background: #95a5a6; }
.spelling-btn.next { background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%); }
.spelling-feedback { font-size: 1.3em; font-weight: bold; margin: 16px 0; min-height: 1.5em; }
.spelling-result { margin-top: 30px; text-align: center; }
.spelling-result-title { font-size: 2em; font-weight: bold; margin-bottom: 16px; }

/* === Game Screen === */
.game-screen { height: calc(100vh - 52px); position: relative; }
.game-header {
  position: absolute; top: 0; left: 0; right: 0; padding: 10px 20px;
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(0,0,0,0.25); color: white; z-index: 100;
}
.score-display { font-size: 1.2em; font-weight: bold; }
.lives-display { font-size: 1.2em; }
.level-display { font-size: 0.95em; text-align: center; }
.target-word {
  position: absolute; top: 55px; left: 50%; transform: translateX(-50%);
  font-size: 2.2em; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  background: rgba(255,255,255,0.2); padding: 8px 28px; border-radius: 16px;
  z-index: 100; white-space: nowrap;
}
.target-word .hint { font-size: 0.42em; display: block; opacity: 0.8; }
.game-area { height: 100%; position: relative; overflow: hidden; }

.falling-word {
  position: absolute; padding: 10px 18px; font-size: 1.15em; font-weight: bold;
  color: white; border-radius: 12px; cursor: pointer; transition: transform 0.1s;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2); z-index: 50;
}
.falling-word:hover { transform: scale(1.1); }
.falling-word.correct { animation: correctBurst 0.7s ease forwards; }
@keyframes correctBurst {
  0% { transform: scale(1); filter: brightness(1); }
  15% { transform: scale(1.25); filter: brightness(1.8); box-shadow: 0 0 30px #FFD700, 0 0 60px #FFA500; }
  60% { transform: scale(1.5); opacity: 0.6; filter: brightness(2); }
  100% { transform: scale(0); opacity: 0; filter: brightness(3); }
}
.falling-word.wrong { animation: mineExplode 0.7s ease forwards; }
@keyframes mineExplode {
  0% { transform: scale(1); }
  20% { transform: scale(0.9); filter: brightness(2) hue-rotate(-30deg); box-shadow: 0 0 30px #ff0000; }
  50% { transform: scale(1.1) rotate(10deg); filter: brightness(2); }
  100% { transform: scale(0); opacity: 0; }
}
.falling-word.hint-correct {
  animation: hintFlash 0.3s ease 4;
  box-shadow: 0 0 20px #FFD700, 0 0 40px #FFD700 !important; z-index: 100 !important;
}
@keyframes hintFlash { 0%,100%{transform:scale(1);filter:brightness(1)} 50%{transform:scale(1.12);filter:brightness(1.6)} }

.correct-particles { position: absolute; pointer-events: none; z-index: 150; }
.particle { position: absolute; width: 8px; height: 8px; border-radius: 50%; animation: particleFly 0.8s ease-out forwards; }
@keyframes particleFly {
  0% { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0); }
}
.wrong-x {
  position: absolute; font-size: 3.5em; font-weight: 900; color: #ff0000;
  text-shadow: 0 0 10px #ff0000; z-index: 200; pointer-events: none;
  animation: xAppear 1s ease forwards;
}
@keyframes xAppear {
  0% { opacity: 0; transform: scale(0) rotate(-180deg); }
  20% { opacity: 1; transform: scale(1.3) rotate(10deg); }
  100% { opacity: 0; transform: scale(0.5) translateY(-30px); }
}
.combo-display {
  position: absolute; top: 45%; left: 50%; transform: translate(-50%,-50%);
  font-size: 2.8em; font-weight: bold; color: #FFD700;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5); opacity: 0; z-index: 200; pointer-events: none;
}
.combo-display.show { animation: comboAnim 1s ease forwards; }
@keyframes comboAnim {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(0.5); }
  30% { opacity: 1; transform: translate(-50%,-50%) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.5) translateY(-50px); }
}

.header-right { display: flex; align-items: center; gap: 8px; }
.game-ctrl-btn {
  width: 34px; height: 34px; border: 2px solid rgba(255,255,255,0.6);
  border-radius: 50%; background: rgba(255,255,255,0.15); color: white;
  font-size: 1.1em; cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.game-ctrl-btn:hover { background: rgba(255,255,255,0.35); transform: scale(1.1); }

.pause-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7); z-index: 500;
  display: flex; align-items: center; justify-content: center;
}
.pause-box {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 30px 36px; border-radius: 18px; text-align: center;
  color: white; box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}
.pause-title { font-size: 1.8em; font-weight: bold; margin-bottom: 20px; }
.pause-menu-btn {
  display: block; width: 200px; margin: 8px auto; padding: 10px 0;
  font-size: 1.05em; font-weight: bold; border: none; border-radius: 10px;
  cursor: pointer; transition: all 0.2s; color: #667eea; background: white;
}
.pause-menu-btn:hover { transform: scale(1.05); box-shadow: 0 4px 15px rgba(0,0,0,0.2); }

/* === Result Screen === */
.result-screen {
  display: flex; flex-direction: column; align-items: center;
  padding: 20px 10px 40px; color: white; overflow-y: auto;
}
.result-title { font-size: 2.4em; margin-bottom: 10px; }
.result-score { font-size: 1.5em; margin-bottom: 6px; }
.result-stats { font-size: 1em; margin-bottom: 14px; text-align: center; line-height: 1.8; }
.word-review { width: 90%; max-width: 700px; margin-bottom: 14px; }
.review-section { margin-bottom: 10px; }
.review-title { font-size: 1em; font-weight: bold; padding: 5px 10px; border-radius: 7px; margin-bottom: 5px; display: inline-block; }
.review-title.correct-title { background: rgba(39,174,96,0.8); }
.review-title.wrong-title { background: rgba(231,76,60,0.8); }
.review-title.coverage-title { background: rgba(52,152,219,0.8); }
.review-list { display: flex; flex-wrap: wrap; gap: 5px; }
.review-word {
  padding: 4px 10px; border-radius: 6px; font-size: 0.88em;
  cursor: pointer; transition: all 0.2s;
}
.review-word:hover { transform: scale(1.05); }
.review-word.correct-word { background: rgba(39,174,96,0.3); border: 1px solid rgba(39,174,96,0.5); }
.review-word.wrong-word { background: rgba(231,76,60,0.3); border: 1px solid rgba(231,76,60,0.5); }
.review-word.coverage-word { background: rgba(52,152,219,0.3); border: 1px solid rgba(52,152,219,0.5); }
.review-word .en { font-weight: bold; }
.review-word .zh { opacity: 0.8; font-size: 0.9em; }
.result-buttons { display: flex; gap: 10px; margin-bottom: 20px; }
.result-btn {
  padding: 10px 28px; font-size: 1.05em; border: none; border-radius: 20px;
  cursor: pointer; font-weight: bold; transition: all 0.3s;
}
.result-btn:hover { transform: scale(1.05); }
.result-btn.retry { background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%); color: white; }
.result-btn.home { background: white; color: #667eea; }

/* === Learning Mode === */
.learn-screen { padding: 20px 16px 40px; }
.learn-tabs {
  display: flex; gap: 8px; justify-content: center; margin-bottom: 20px; flex-wrap: wrap;
}
.learn-tab {
  padding: 8px 20px; font-size: 0.95em; border: 2px solid rgba(255,255,255,0.4);
  border-radius: 18px; background: transparent; color: white; cursor: pointer;
  transition: all 0.3s; font-weight: bold;
}
.learn-tab:hover { background: rgba(255,255,255,0.15); }
.learn-tab.active { background: white; color: #667eea; border-color: white; }

.learn-content { max-width: 800px; margin: 0 auto; }

/* Flashcard */
.flashcard-container { display: flex; flex-direction: column; align-items: center; }
.flashcard-simple {
  width: 300px; padding: 30px 24px; cursor: pointer; margin-bottom: 20px;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.flashcard-emoji { font-size: 3.5em; margin-bottom: 8px; }
.flashcard-zh { font-size: 2em; font-weight: bold; margin-bottom: 6px; color: white; }
.flashcard-en { font-size: 1.8em; font-weight: bold; margin-bottom: 4px; color: white; }
.flashcard-phonetic { font-size: 0.9em; opacity: 0.8; color: white; }
.flashcard-controls { display: flex; gap: 12px; margin-bottom: 16px; }
.flashcard-btn {
  padding: 10px 24px; font-size: 1em; border: none; border-radius: 20px;
  cursor: pointer; font-weight: bold; transition: all 0.3s; color: white;
}
.flashcard-btn.prev { background: #8e44ad; }
.flashcard-btn.speak { background: #27ae60; }
.flashcard-btn.next { background: #3498db; }
.flashcard-btn:hover { transform: scale(1.06); }
.flashcard-progress { font-size: 0.95em; opacity: 0.8; }

/* Word List */
.wordlist-search {
  width: 100%; max-width: 400px; padding: 10px 16px; font-size: 1em;
  border: 2px solid rgba(255,255,255,0.4); border-radius: 12px;
  background: rgba(255,255,255,0.15); color: white; outline: none; margin-bottom: 16px;
  text-align: center;
}
.wordlist-search::placeholder { color: rgba(255,255,255,0.6); }
.wordlist-stats { font-size: 0.9em; opacity: 0.8; margin-bottom: 12px; text-align: center; }
.wordlist-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.wordlist-item {
  padding: 10px 14px; background: rgba(255,255,255,0.12); border-radius: 10px;
  cursor: pointer; transition: all 0.2s; display: flex; justify-content: space-between;
  align-items: center;
}
.wordlist-item:hover { background: rgba(255,255,255,0.25); transform: scale(1.02); }
.wordlist-item.clicked { background: rgba(255,215,0,0.4); transform: scale(0.97); }
.wordlist-item .en { font-weight: bold; font-size: 1em; }
.wordlist-item .zh { opacity: 0.8; font-size: 0.9em; }
.wordlist-emoji { font-size: 1.3em; margin-right: 6px; }
.wordlist-item .speak-icon { font-size: 0.85em; opacity: 0.6; }
.wordlist-item.learned { border-left: 3px solid #27ae60; }

/* Quiz */
.quiz-container { display: flex; flex-direction: column; align-items: center; }
.quiz-question {
  font-size: 2em; font-weight: bold; margin-bottom: 24px;
  background: rgba(255,255,255,0.2); padding: 16px 32px; border-radius: 16px;
  text-align: center;
}
.quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 500px; }
.quiz-option {
  padding: 14px 20px; font-size: 1.1em; border: 3px solid rgba(255,255,255,0.4);
  border-radius: 14px; background: rgba(255,255,255,0.1); color: white;
  cursor: pointer; transition: all 0.3s; font-weight: bold; text-align: center;
}
.quiz-option:hover { background: rgba(255,255,255,0.25); transform: scale(1.03); }
.quiz-option.correct { background: rgba(39,174,96,0.6); border-color: #27ae60; }
.quiz-option.wrong { background: rgba(231,76,60,0.6); border-color: #e74c3c; }
.choice-icon { margin-left: 6px; }
.quiz-option:disabled { cursor: default; transform: none; }
.quiz-score { font-size: 1.2em; margin-bottom: 16px; }
.quiz-feedback { font-size: 1.1em; margin-bottom: 16px; min-height: 1.5em; }
.quiz-next-btn {
  padding: 10px 28px; font-size: 1em; border: none; border-radius: 18px;
  background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
  color: white; font-weight: bold; cursor: pointer; transition: all 0.3s;
}
.quiz-next-btn:hover { transform: scale(1.06); }

/* === Responsive === */
@media (max-width: 600px) {
  .game-title { font-size: 2em; }
  .target-word { font-size: 1.5em; padding: 6px 16px; }
  .falling-word { font-size: 0.95em; padding: 7px 12px; }
  .grade-btn { padding: 6px 12px; font-size: 0.88em; }
  .flashcard { width: 260px; height: 170px; }
  .flashcard-zh { font-size: 1.8em; }
  .flashcard-en { font-size: 1.6em; }
  .quiz-options { grid-template-columns: 1fr; }
}

.bg-decoration { position: fixed; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.bg-circle { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.1); animation: float 6s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-20px) rotate(180deg)} }

/* Main mode buttons */
.mode-btn-main {
  min-width: 160px !important;
  padding: 28px 32px !important;
}
.mode-btn-main .mode-icon { font-size: 3em !important; }
.mode-btn-main .mode-title { font-size: 1.4em !important; }

/* Test screen */
.test-screen { padding: 20px 16px 40px; }
.target-game-area { text-align: center; padding: 40px 20px; }