/* 「現在幾點了」時鐘分頁（js/clock.js、js/clock-face.js）。顏色沿用 style.css 最上面的色票。
   時針（短針）珊瑚紅、粗；分針（長針）天藍、細，全站固定（多角色設計討論定案，見「時鐘設計討論.md」）。 */
.clock-body { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.clock-stage { width: min(100%, 300px); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.clock-face { width: 100%; max-width: 300px; aspect-ratio: 1; display: block; }
.clock-face.interactive { touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; }
.clock-face.dragging { cursor: grabbing; }

.clock-dial { fill: var(--card-face); stroke: var(--tone-warm-ledge); stroke-width: 5; }
.clock-half { fill: var(--tone-sky-face); opacity: 0; transition: opacity .3s; }
.clock-face.show-half .clock-half { opacity: 1; }          /* 半點：右半邊淡淡塗色，「走了一半」 */
.clock-tick { stroke: #d8c8b2; stroke-width: 1; stroke-linecap: round; }
.clock-tick.big { stroke: #b99a74; stroke-width: 2.4; }
.clock-number { font-size: 17px; font-weight: bold; fill: var(--tone-warm-ink); text-anchor: middle; dominant-baseline: central; }
.clock-number.major { font-size: 21px; fill: var(--tone-coral-ink); }
.clock-hand line { stroke-linecap: round; }
.clock-hour line { stroke: #e2704a; stroke-width: 9; }
.clock-minute line { stroke: #3a95c9; stroke-width: 5; }
.clock-center { fill: #6b4a2b; }
.clock-ghost { opacity: 0; }
.clock-face.show-ghost .clock-ghost { opacity: .28; }      /* 撥時鐘連錯兩次：淡淡的正確位置 */
.clock-ghost-hour line { stroke: #e2704a; stroke-width: 9; }
.clock-ghost-minute line { stroke: #3a95c9; stroke-width: 5; }
.clock-face.dragging-hour .clock-hour line { stroke-width: 11; }      /* 抓著哪一支，那一支變粗一點 */
.clock-face.dragging-minute .clock-minute line { stroke-width: 7; }
body[data-speaking="time"] .clock-stage .clock-face { animation: speak-pop .5s ease-out; transform-origin: 50% 50%; }
body.no-motion .clock-face { animation: none !important; }

.clock-readout { text-align: center; }
.clock-digits { font-size: 2.2rem; font-weight: bold; color: var(--tone-warm-ink); letter-spacing: .04em; }
.clock-words { font-size: 1.3rem; color: var(--tone-coral-ink); }
.clock-period { font-size: 1.3rem; font-weight: bold; color: var(--tone-warm-ink); }
.clock-prompt { justify-content: center; font-size: 1.25rem; }
.clock-prompt b { color: var(--tone-coral-ink); }
.clock-row { justify-content: center; }
.clock-feedback { text-align: center; }

/* 小測驗的選項：小時鐘（聽時間選時鐘）或數字時間＋唸法（看時鐘選時間） */
.clock-choices { justify-content: center; }
.clock-choice { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px; min-width: 96px; }
.clock-choice .clock-face { width: 96px; }
.clock-choice-digits { font-size: 1.6rem; font-weight: bold; color: var(--tone-warm-ink); }
.clock-choice-words { font-size: 1rem; color: var(--tone-coral-ink); }
@media (max-width: 480px) {
  .clock-choice { min-width: 0; flex: 1 1 0; padding: 8px 4px; }
  .clock-choice .clock-face { width: 88px; }
}