/* ============================================================
   數數模組 — 列印專用樣式
   螢幕模式用 px，列印模式用 mm/pt
   ============================================================ */

/* ----------------------------------------------------------
   螢幕模式
   ---------------------------------------------------------- */

/* 物件散佈區域 */
.counting-area {
  position: relative;
  width: 100%;
  /* 佔滿 ws-content 的大部分高度，留空間給問題區 */
  height: 70%;
  min-height: 400px;
}

/* 個別物件（絕對定位） */
.counting-object {
  position: absolute;
  object-fit: contain;
  /* 柔和的出現動畫 */
  animation: counting-pop 300ms ease-out both;
}

@keyframes counting-pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 問題區 */
.counting-question {
  padding: 16px 0 0;
}

.counting-question-text {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 12px;
}

/* 答案行 */
.counting-answer {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.counting-answer-label {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text);
}

.counting-answer-line {
  flex: 1;
  max-width: 200px;
  height: 0;
  border-bottom: 3px dashed var(--color-gray-300);
}

.counting-answer-line--short {
  width: 80px;
  flex: 0 0 auto;
}

/* 分類計數模式 */
.counting-question--classify {
  padding: 12px 0 0;
}

.counting-classify-legend {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.counting-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text);
}

.counting-legend-item img {
  object-fit: contain;
  flex-shrink: 0;
}

/* ----------------------------------------------------------
   互動模式 — 模組專屬樣式
   ---------------------------------------------------------- */

/* 答案選項區 */
.counting-answer-area {
  display: flex;
  flex-direction: row;
  gap: 16px;
  justify-content: center;
  padding: var(--space-md);
  padding-bottom: max(var(--space-md), env(safe-area-inset-bottom, 0px));
  flex-shrink: 0;
}

/* 答案按鈕 */
.counting-answer-btn {
  width: 130px;
  height: 100px;
  border: none;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.counting-answer-btn:active {
  transform: scale(0.95);
}

/* 數字（最醒目） */
.counting-answer-num {
  font-size: 44px;
  font-weight: 900;
  color: #1d1d1f;
  line-height: 1;
}

/* 小點陣輔助 */
.counting-dot-row {
  display: flex;
  flex-direction: row;
  gap: 5px;
  justify-content: center;
}

.counting-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #D1D5DB;
}

/* 答對狀態 */
.counting-answer-btn.correct {
  background: linear-gradient(135deg, #22C55E, #16A34A);
  animation: gameBounce 500ms ease-out;
}

.counting-answer-btn.correct .counting-answer-num {
  color: #fff;
}

.counting-answer-btn.correct .counting-dot {
  background: rgba(255, 255, 255, 0.7);
}

/* 答錯狀態 */
.counting-answer-btn.wrong {
  animation: gameShake 300ms ease-out;
}

/* 遊戲場景區 */
.counting-game-area {
  position: relative;
  flex: 1;
  overflow: hidden;
}

/* 問題文字 */
.counting-question {
  font-size: 1.5rem;
  color: var(--color-text);
  text-align: center;
  font-family: var(--font-display);
  padding: var(--space-sm) 0;
}

/* 場景中的物件 */
.game-object {
  position: absolute;
  width: 80px;
  height: 80px;
  cursor: pointer;
  transition: transform 200ms ease-out, filter 200ms;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-object img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.game-object .game-object-emoji {
  font-size: 56px;
  line-height: 1;
  pointer-events: none;
}

.game-object:active {
  transform: scale(0.88) !important;
}

.game-object.counted {
  filter: drop-shadow(0 0 10px var(--color-primary));
}

.game-object.bounce {
  animation: gameBounce 400ms ease-out;
}

.game-object.shake {
  animation: gameShake 300ms ease-out;
}

/* ----------------------------------------------------------
   列印模式
   ---------------------------------------------------------- */
@media print {
  .counting-area {
    height: 65%;
    min-height: 0;
  }

  .counting-object {
    animation: none;
    /* 列印時用 mm 等比尺寸由 inline style 控制 */
  }

  .counting-question {
    padding: 3mm 0 0;
  }

  .counting-question-text {
    font-size: 16pt;
    margin: 0 0 2mm;
  }

  .counting-answer-label {
    font-size: 14pt;
  }

  .counting-answer-line {
    border-bottom: 1.5pt dashed #D1D5DB;
    max-width: 50mm;
  }

  .counting-answer-line--short {
    width: 20mm;
  }

  .counting-question--classify {
    padding: 2mm 0 0;
  }

  .counting-classify-legend {
    gap: 2mm;
  }

  .counting-legend-item {
    font-size: 12pt;
    gap: 2mm;
  }
}