/* 题目容器 */
#question-container {
  text-align: center;
  margin-bottom: 40px;
}

.question-text {
  font-size: 28px;
  color: var(--text-primary);
  margin-bottom: 20px;
  font-weight: bold;
}

.question-emoji {
  font-size: 80px;
  margin: 20px 0;
}

.question-char {
  font-size: 100px;
  font-weight: bold;
  color: var(--primary-color);
  margin: 20px 0;
}

.question-pinyin {
  font-size: 48px;
  color: var(--secondary-color);
  font-weight: bold;
  margin: 20px 0;
}

.audio-button {
  font-size: 60px;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s;
  padding: 20px;
}

.audio-button:hover {
  transform: scale(1.1);
}

.audio-button:active {
  transform: scale(0.95);
}

/* 选项容器 */
#options-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  max-width: 500px;
  margin: 0 auto 30px;
}

.option-button {
  padding: 20px;
  font-size: 32px;
  font-weight: bold;
  border: 3px solid #ddd;
  border-radius: 12px;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.option-button:hover {
  background: #f0f0f0;
  transform: scale(1.05);
  border-color: var(--primary-color);
}

.option-button:active {
  transform: scale(0.95);
}

.option-button.correct {
  background: var(--success-color);
  color: white;
  border-color: var(--success-color);
  animation: correctPulse 0.5s;
}

.option-button.wrong {
  background: var(--error-color);
  color: white;
  border-color: var(--error-color);
  animation: shake 0.5s;
}

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

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

.option-emoji {
  font-size: 24px;
}

.option-char {
  font-size: 28px;
}

/* 数字键盘 */
.number-keyboard {
  max-width: 400px;
  margin: 30px auto 0;
}

.answer-input-display {
  text-align: center;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
}

.answer-input {
  display: inline-block;
  min-width: 100px;
  padding: 15px 30px;
  font-size: 48px;
  font-weight: bold;
  text-align: center;
  border: 3px solid var(--primary-color);
  border-radius: 12px;
  background: white;
  margin-left: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.answer-input.empty {
  color: #ccc;
  border-style: dashed;
}

.answer-input:not(.empty) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-color: #667eea;
}

.number-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 15px;
}

.num-btn {
  padding: 20px;
  font-size: 24px;
  font-weight: bold;
  border: 2px solid #ddd;
  border-radius: 12px;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
}

.num-btn:hover {
  background: #f0f0f0;
  transform: scale(1.05);
}

.num-btn:active {
  background: #e0e0e0;
  transform: scale(0.95);
}

.keyboard-actions {
  display: flex;
  gap: 10px;
}

.clear-btn,
.submit-btn {
  flex: 1;
  padding: 15px;
  font-size: 18px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: bold;
}

.clear-btn {
  background: var(--error-color);
  color: white;
}

.submit-btn {
  background: var(--success-color);
  color: white;
}

.clear-btn:hover,
.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.clear-btn:active,
.submit-btn:active {
  transform: translateY(0);
}

/* 可视化辅助 */
.visual-helper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 20px 0;
  font-size: 36px;
}

.visual-items {
  display: flex;
  gap: 5px;
}

.visual-operator {
  font-size: 48px;
  font-weight: bold;
  color: var(--primary-color);
}

/* 响应式 */
@media (max-width: 768px) {
  .question-text {
    font-size: 22px;
  }
}

/* 手机端游戏页深度优化 */
@media (max-width: 480px) {
  .game-header {
    padding: 8px 10px;
    margin-bottom: 20px;
  }

  .question-text {
    font-size: 20px;
    margin-bottom: 10px;
  }

  /* 数学题优化 */
  .visual-helper {
    font-size: 12px; /* 极小图标 (原24px) */
    gap: 1px; /* 极小间距 */
    flex-wrap: wrap; /* 允许换行 */
    justify-content: center;
    margin: 5px 0; /* 减少上下间距 */
    min-height: 0; /* 防止默认高度占用 */
  }

  .visual-items {
    flex-wrap: wrap; /* 允许内部图标换行 */
    justify-content: center;
    max-width: 100%; /* 强制不超过父容器宽度 */
  }

  .visual-operator {
    font-size: 20px; /* 减小操作符 */
    margin: 0 2px;
  }

  .answer-input {
    font-size: 28px;
    min-width: 100px;
    padding: 8px 15px; /* 减小内边距 */
  }

  .number-keyboard {
    margin-top: 10px; /* 减少键盘上间距 */
  }

  .num-btn {
    padding: 8px; /* 减小按钮内边距 (原12px) */
    font-size: 18px;
  }

  /* 汉字题优化 */
  .question-char {
    font-size: 60px; /* 减小汉字 */
    margin: 5px 0;
  }

  .question-pinyin {
    font-size: 24px; /* 减小拼音 */
    margin: 5px 0;
  }

  .audio-button {
    font-size: 32px;
    padding: 5px;
  }

  /* 汉字选项按钮 */
  .option-button {
    padding: 8px;
    font-size: 18px;
    min-height: 50px;
  }

  .option-char {
    font-size: 20px;
  }

  .keyboard-actions .clear-btn,
  .keyboard-actions .submit-btn {
    padding: 10px;
    font-size: 14px;
  }
}

/* 舒尔特方格 */
.schulte-status {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.schulte-status .status-item {
  background: #f7f7f7;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 14px;
  color: var(--text-secondary);
}

.schulte-grid {
  display: grid;
  gap: 12px;
  max-width: 420px;
  margin: 0 auto 10px;
}

.schulte-grid.size-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 200px;
}

.schulte-grid.size-2 .schulte-cell {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 80px;
  height: 80px;
}

.schulte-timer {
  font-size: 22px;
  font-weight: 800;
  background: linear-gradient(90deg, #fff2d6, #ffe3ad);
  border-color: #ffca7a;
  color: #a85c00;
  padding: 10px 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.schulte-timer.finished {
  background: linear-gradient(90deg, #e6ffed, #c7ffd9);
  border-color: var(--success-color);
  color: #1b8a17;
  box-shadow: 0 0 0 2px rgba(126, 211, 33, 0.2);
}

.schulte-option-area {
  border-top: 2px dashed #e0e0e0;
  padding-top: 18px;
  margin-top: 12px;
}

.schulte-countdown {
  font-size: 20px;
  font-weight: 800;
  background: linear-gradient(90deg, #e6f1ff, #cfe3ff);
  border-color: #9ec5ff;
  color: #1957b3;
  padding: 10px 16px;
}

.schulte-grid.size-3 {
  grid-template-columns: repeat(3, 1fr);
}

.schulte-grid.size-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Memory Game Compact Layout */
.mode-memory #question-container {
  margin-bottom: 5px; /* Reduce from 40px */
}

.mode-memory .memory-panel {
  max-width: 360px;
  margin: 0 auto 2px; /* Reduce bottom margin */
  padding: 4px 10px; /* Reduce padding */
  display: flex;
  flex-direction: column;
  gap: 6px; /* Reduce gap */
}

.mode-memory .schulte-option-area {
  margin-top: 5px; /* Reduce from 12px */
  padding-top: 8px; /* Reduce from 18px */
}

.mode-memory .memory-keyboard .number-keyboard {
  margin-top: 5px; /* Reduce from 10px */
}

/* Original memory-panel styles (fallback/shared) */
.memory-panel {
  max-width: 360px;
  margin: 0 auto 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.memory-panel .question-text {
  margin-bottom: 4px;
  white-space: nowrap;
}

@media (max-width: 400px) {
  .memory-panel .question-text {
     font-size: 16px;
  }
}

.memory-panel .schulte-status {
  margin-bottom: 4px;
}

.memory-grid-wrap {
  display: flex;
  justify-content: center;
}

.memory-panel .schulte-grid {
  max-width: 260px;
  gap: 10px;
  margin: 0 auto;
}

.memory-panel .schulte-cell {
  padding: 14px;
  font-size: 26px;
}

.memory-keyboard .number-keyboard {
  margin-top: 10px;
  max-width: 320px;
}

.memory-keyboard .answer-input {
  min-width: 80px;
  padding: 10px 18px;
  font-size: 36px;
}

.memory-keyboard .number-grid {
  gap: 8px;
}

.memory-keyboard .num-btn {
  padding: 14px;
  font-size: 20px;
}

.memory-keyboard .keyboard-actions .clear-btn,
.memory-keyboard .keyboard-actions .submit-btn {
  padding: 12px;
  font-size: 16px;
}

.schulte-cell {
  position: relative;
  padding: 18px;
  font-size: 28px;
  font-weight: bold;
  border: 3px solid #ddd;
  border-radius: 14px;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
}

.schulte-cell .cell-mark {
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: 18px;
  color: var(--success-color);
}

.schulte-cell.hit {
  border-color: var(--success-color);
  background: #f1ffe9;
  box-shadow: 0 4px 10px rgba(126, 211, 33, 0.2);
}

.schulte-cell.wrong-hit {
  border-color: var(--error-color);
  background: #ffecec;
  box-shadow: 0 4px 10px rgba(255, 107, 107, 0.2);
}

.schulte-cell.wrong-hit .cell-mark {
  color: var(--error-color);
}

.schulte-cell:disabled {
  cursor: not-allowed;
  opacity: 0.75;
}

.schulte-cell.masked {
  background: #fff7e6;
  border-style: dashed;
}

.cell-animal {
  font-size: 28px;
  display: block;
  text-align: center;
}

.schulte-cell.revealed {
  border-color: var(--success-color);
  background: #f1ffe9;
}

.schulte-hidden .schulte-cell {
  cursor: default;
}

@media (max-width: 480px) {
  .schulte-grid {
    gap: 8px;
  }

  .schulte-cell {
    padding: 12px;
    font-size: 20px;
  }

  .schulte-status .status-item {
    font-size: 12px;
    padding: 4px 8px;
  }
}

/* 逻辑游戏 (Logic Game) */
.logic-sequence {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin: 30px auto;
  flex-wrap: wrap;
}

.logic-item {
  width: 80px;
  height: 80px;
  background: white;
  border: 4px solid #ddd;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 44px;
  transition: all 0.3s;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.logic-item.missing {
  border-style: dashed;
  border-color: var(--primary-color);
  background: #f0f8ff;
  color: var(--primary-color);
  font-weight: bold;
}

.logic-item.correct-pulse {
  animation: correctPulse 0.5s;
}

/* 手机端逻辑游戏优化 */
@media (max-width: 480px) {
  .logic-sequence {
    gap: 4px; /* 进一步减小间距 (原8px) */
    margin: 15px auto;
  }
  
  .logic-item {
    width: 38px; /* 进一步减小 (原50px) */
    height: 38px;
    font-size: 24px; /* 原28px */
    border-width: 2px;
  }
}

/* Matrix Input Styles */
.matrix-input-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-top: 10px;
}

.coord-inputs {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 5px;
}

.input-group {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f5f5f5;
  padding: 8px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.input-group .label {
  font-size: 20px;
  font-weight: bold;
}

.coord-display {
  width: 50px;
  height: 50px;
  background: white;
  border: 2px solid #ccc;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: bold;
  color: #333;
}

.coord-display.active {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}

.coord-display.correct-input {
  border-color: var(--success-color);
  background-color: #f1ffe9;
}

.coord-display.wrong-input {
  border-color: var(--error-color);
  background-color: #ffecec;
}

/* Custom Matrix Keyboard */
.matrix-keyboard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #eee;
  padding: 10px;
  border-radius: 16px;
  margin-bottom: 10px;
}

.num-row {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.action-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 5px;
}

.matrix-key {
  width: 50px;
  height: 50px;
  border: none;
  background: white;
  border-radius: 10px;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.matrix-key:active {
  background: #e0e0e0;
  transform: translateY(2px);
  box-shadow: none;
}

.action-key {
  background: #ffecb3;
  color: #f57c00;
  width: 60px;
}

.submit-key {
  background: var(--success-color);
  color: white;
  width: 120px;
  font-size: 20px;
}

.submit-key.correct-btn {
  background: #45a049;
  transform: scale(1.05);
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .coord-inputs {
    gap: 10px;
  }
  .input-group {
    padding: 6px 10px;
  }
  .coord-display {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }
  .input-group .label {
    font-size: 16px;
  }
  
  .matrix-keyboard {
      padding: 8px;
      gap: 6px;
  }
  .matrix-key {
      width: 42px;
      height: 42px;
      font-size: 20px;
  }
  .action-key {
      width: 50px;
  }
  .submit-key {
      width: 100px;
      font-size: 18px;
  }
}


/* Matrix Game Styles */
.matrix-question {
  margin-bottom: 20px;
  text-align: center; /* Center the question text */
  width: 100%;
}
#options-container.matrix-input-area {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-template-columns: none; /* Reset grid */
  width: 100%;
}
.row-highlight {
  color: var(--primary-color);
  font-weight: bold;
}
.col-highlight {
  color: var(--secondary-color);
  font-weight: bold;
}
.target-emoji-display {
  font-size: 1.2em;
}

.matrix-wrapper {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 400px;
  margin: 0 auto 30px;
  --grid-size: 5;
}

/* Corner cell (empty) */
.matrix-col-headers > div:first-child {
   /* This was the empty div */
   display: none; /* We don't need it if we use grid placement properly */
}

/* We generated:
   1. .matrix-col-headers (containing empty + cols)
   2. .matrix-main-area (containing rows + grid)
   
   Let's style what we generated in JS.
   JS structure:
    wrapper
      > colHeaderContainer (flex or grid)
      > mainArea (flex)
*/

.matrix-col-headers {
  display: flex;
  padding-left: 45px; /* Offset for row header width + gap */
}

.matrix-header-col {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: white;
  background-color: var(--secondary-color);
  border-radius: 8px;
  margin: 0 2px;
  font-size: 18px;
}

.matrix-main-area {
  display: flex;
}

.matrix-row-headers {
  width: 40px;
  display: flex;
  flex-direction: column;
  margin-right: 5px;
}

.matrix-header-row {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: white;
  background-color: var(--primary-color);
  border-radius: 8px;
  margin: 2px 0;
  font-size: 18px;
}

.matrix-grid {
  flex: 1;
  display: grid;
  gap: 4px;
}

.matrix-cell {
  aspect-ratio: 1;
  background: white;
  border: 2px solid #ddd;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  cursor: default;
  transition: all 0.2s;
}

.matrix-cell:hover {
  background: #f9f9f9;
}

.matrix-cell.correct {
  background: #f1ffe9;
  border-color: var(--success-color);
  animation: correctPulse 0.5s;
}

.matrix-cell.wrong {
  background: #ffecec;
  border-color: var(--error-color);
}

.text-option {
  font-size: 20px;
  padding: 15px;
}

@media (max-width: 480px) {
  .matrix-wrapper {
      max-width: 340px;
  }
  .matrix-cell {
      font-size: 20px;
      border-radius: 6px;
  }
  .matrix-header-col, .matrix-header-row {
      font-size: 14px;
      border-radius: 4px;
  }
  .matrix-row-headers {
      width: 30px;
  }
  .matrix-col-headers {
      padding-left: 35px;
  }
  .text-option {
      font-size: 16px; 
      padding: 10px;
  }
}

/* iPad/Compact Optimization for Matrix Game */
.mode-matrix #question-container {
  margin-bottom: 10px;
}
.mode-matrix .matrix-question {
  margin-bottom: 5px;
}
.mode-matrix .matrix-wrapper {
  margin-bottom: 5px;
}
.mode-matrix .matrix-input-controls {
  margin-top: 5px;
}
.mode-matrix .matrix-keyboard {
  padding: 5px;
  gap: 4px;
}
.mode-matrix .matrix-key {
  width: 40px;
  height: 40px;
  font-size: 18px;
}
.mode-matrix .action-key {
  width: 50px;
}
.mode-matrix .submit-key {
  width: 90px;
  font-size: 16px;
}

/* Fix for iPad Landscape cropping top content */
@media screen and (max-height: 850px) {
    .mode-matrix #game-container {
        padding-top: 60px; /* Push content down to clear fixed header */
    }
}

/* ==================== 国旗游戏 (Flag Game) ==================== */

/* 国旗游戏：让游戏页面撑满宽度，避免 body flex 收缩 */
.mode-flag {
  width: 100%;
}

.mode-flag #game-container {
  max-width: 600px;
  margin: 80px auto 0;
  padding: 0 20px;
}

/* 国旗模式选择界面：覆盖 #options-container 的默认 2 列 grid */
.mode-flag #options-container:has(.flag-mode-buttons) {
  display: block;
  max-width: 100%;
}

/* 模式选择界面 */
.flag-mode-buttons {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 360px;
  margin: 0 auto;
}

.flag-mode-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 20px;
  border: 3px solid #e0e0e0;
  border-radius: 20px;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.flag-mode-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.flag-mode-btn:active {
  transform: translateY(0);
}

.flag-mode-learn {
  border-color: #b3d9ff;
  background: linear-gradient(135deg, #f0f8ff, #e6f2ff);
}

.flag-mode-challenge {
  border-color: #ffe0b3;
  background: linear-gradient(135deg, #fffaf0, #fff5e6);
}

.flag-mode-icon {
  font-size: 48px;
}

.flag-mode-title {
  font-size: 24px;
  font-weight: bold;
  color: var(--text-primary);
}

.flag-mode-desc {
  font-size: 16px;
  color: var(--text-secondary);
}

/* 学习模式卡片 */
.flag-learn-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.flag-learn-image-wrap {
  width: 240px;
  height: 180px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  border: 3px solid #e0e0e0;
}

.flag-learn-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #f0f0f0;
}

.flag-learn-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.flag-learn-name {
  font-size: 36px;
  font-weight: bold;
  color: var(--text-primary);
}

.flag-learn-audio {
  font-size: 36px;
  padding: 8px;
}

.flag-learn-continent {
  font-size: 18px;
  color: var(--text-secondary);
  background: #f5f5f5;
  padding: 4px 16px;
  border-radius: 20px;
}

.flag-learn-progress {
  font-size: 16px;
  color: #999;
  margin-top: 4px;
}

/* 学习模式导航按钮 */
.flag-learn-nav {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 20px;
}

.flag-nav-btn {
  padding: 14px 32px;
  font-size: 20px;
  font-weight: bold;
  border: 2px solid #ddd;
  border-radius: 14px;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-primary);
}

.flag-nav-btn:hover:not(:disabled) {
  background: #f0f0f0;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.flag-nav-btn:active:not(:disabled) {
  transform: translateY(0);
}

.flag-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.flag-nav-primary {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.flag-nav-primary:hover:not(:disabled) {
  background: #3a7fd4;
}

/* 闯关模式：题目区国旗展示 */
.flag-question-image-wrap {
  display: flex;
  justify-content: center;
  margin: 16px 0;
}

.flag-question-image {
  width: 220px;
  height: 165px;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  border: 3px solid #e0e0e0;
  background: #f0f0f0;
}

/* 闯关模式：看名选国旗的国名展示 */
.flag-question-name-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 16px 0;
}

.flag-big-name {
  font-size: 48px;
  font-weight: bold;
  color: var(--primary-color);
}

.flag-audio-btn {
  font-size: 48px;
  padding: 10px;
}

.flag-audio-inline {
  font-size: 32px;
  padding: 6px;
}

/* 闯关模式：文字选项（看旗选国名） */
.flag-name-option {
  font-size: 26px;
}

.flag-option-name {
  font-size: 26px;
}

/* 闯关模式：国旗图片选项（听名选国旗、看名选国旗） */
#options-container.flag-options-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 480px;
}

.flag-image-option {
  padding: 10px;
  min-height: auto;
  border-radius: 14px;
}

.flag-option-image {
  width: 100%;
  max-width: 180px;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  background: #f0f0f0;
}

/* 手机端国旗游戏优化 */
@media (max-width: 480px) {
  .flag-mode-btn {
    padding: 20px 16px;
  }

  .flag-mode-icon {
    font-size: 36px;
  }

  .flag-mode-title {
    font-size: 20px;
  }

  .flag-mode-desc {
    font-size: 14px;
  }

  .flag-learn-image-wrap {
    width: 200px;
    height: 150px;
  }

  .flag-learn-name {
    font-size: 28px;
  }

  .flag-learn-audio {
    font-size: 28px;
  }

  .flag-nav-btn {
    padding: 10px 20px;
    font-size: 16px;
  }

  .flag-question-image {
    width: 180px;
    height: 135px;
  }

  .flag-big-name {
    font-size: 36px;
  }

  .flag-audio-btn {
    font-size: 36px;
  }

  .flag-name-option,
  .flag-option-name {
    font-size: 20px;
  }

  .flag-option-image {
    max-width: 140px;
  }
}

/* ==================== 汽车品牌游戏 (Car Brand Game) ==================== */

/* 复用国旗游戏的布局规则 */
.mode-carBrand {
  width: 100%;
}

.mode-carBrand #game-container {
  max-width: 600px;
  margin: 80px auto 0;
  padding: 0 20px;
}

.mode-carBrand #options-container:has(.flag-mode-buttons) {
  display: block;
  max-width: 100%;
}

/* 学习模式 Logo 展示 */
.car-learn-logo-wrap {
  width: 200px;
  height: 200px;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  border: 3px solid #e0e0e0;
  padding: 20px;
}

.car-learn-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.car-learn-detail {
  font-size: 18px;
  color: var(--text-secondary);
  background: #f5f5f5;
  padding: 4px 16px;
  border-radius: 20px;
}

/* 闯关模式：题目区 Logo 展示 */
.car-question-logo-wrap {
  display: flex;
  justify-content: center;
  margin: 16px 0;
}

.car-question-logo {
  width: 180px;
  height: 180px;
  object-fit: contain;
  padding: 16px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  border: 3px solid #e0e0e0;
}

/* 闯关模式：Logo 图片选项 */
.car-logo-option {
  padding: 12px;
  background: white;
}

.car-option-logo {
  width: 100%;
  max-width: 140px;
  height: 100px;
  object-fit: contain;
  display: block;
}

/* 手机端汽车品牌优化 */
@media (max-width: 480px) {
  .car-learn-logo-wrap {
    width: 160px;
    height: 160px;
    padding: 16px;
  }

  .car-question-logo {
    width: 140px;
    height: 140px;
    padding: 12px;
  }

  .car-option-logo {
    max-width: 110px;
    height: 80px;
  }
}