/* ============================================================
   遊戲中的 HUD、題目卡、四種作答介面、提示與解說
   ============================================================ */
.play-hud {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  margin-bottom: 14px; padding: 0; border-radius: 16px; overflow: hidden;
  background: rgba(246,234,210,0.14); border: 1px solid rgba(242,163,60,0.22);
  box-shadow: 0 8px 22px rgba(0,0,0,0.22);
}
.hud__cell { min-width: 0; padding: 8px 12px; background: rgba(13,21,36,0.96); display: flex; flex-direction: column; gap: 1px; }
.hud__label { color: var(--mist); font-size: 0.68rem; letter-spacing: 0.12em; white-space: nowrap; }
.hud__value { color: var(--paper); font-size: 0.98rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hud__value--score { color: var(--amber); font-size: 1.18rem; }
.hud__value--muted { color: var(--charcoal); }
.hud__cell--combo { justify-content: flex-start; }
.hud__cell--timer { align-items: stretch; }
.hud__progress { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 8px 7px 12px; background: rgba(13,21,36,0.96); }
.hud__back { flex: none; min-height: 44px; padding: 6px 12px; font-size: 0.76rem; }
.dots { display: flex; align-items: center; gap: 5px; min-width: 0; }
.dot { display: block; width: 9px; height: 9px; border-radius: 50%; background: rgba(246,234,210,0.18); border: 1px solid rgba(246,234,210,0.24); }
.dot.is-current { background: var(--amber); border-color: var(--amber-2); box-shadow: 0 0 10px rgba(242,163,60,0.6); }
.dot--gold { background: var(--amber); border-color: var(--amber-2); }
.dot--silver { background: #cfd6e2; border-color: #fff; }
.dot--bronze { background: var(--ember); border-color: #e8a37c; }

.timer {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 26px;
  border-radius: 999px; overflow: hidden; background: rgba(246,234,210,0.12); border: 1px solid rgba(246,234,210,0.18);
}
.timer__fill { position: absolute; inset: 0; transform-origin: left center; background: linear-gradient(90deg, var(--jade), #7acbbd); transition: transform 0.15s linear; }
.timer__text { position: relative; z-index: 1; font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.timer.is-warn .timer__fill { background: linear-gradient(90deg, #d99a35, var(--amber)); }
.timer.is-danger .timer__fill { background: linear-gradient(90deg, #a8323e, var(--ember)); }
.timer.is-over .timer__fill { transform: scaleX(0) !important; }
.timer.is-over { background: rgba(142,59,70,0.3); }
.timer.is-over .timer__text { color: var(--paper); font-size: 0.7rem; }

.question-card {
  width: 100%; max-width: 900px; margin: 0 auto; padding: clamp(15px, 2.6vw, 24px);
  border-radius: var(--radius); border: 1px solid rgba(242,163,60,0.28);
  background: rgba(15,24,41,0.94); box-shadow: var(--shadow); overflow-wrap: anywhere;
}
.question-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.tag { display: inline-block; padding: 2px 10px; border-radius: 999px; background: rgba(242,163,60,0.14); border: 1px solid rgba(242,163,60,0.4); color: var(--amber-2); font-size: 0.74rem; }
.q-index { color: var(--mist); font-size: 0.76rem; font-variant-numeric: tabular-nums; }
.question-prompt { font-size: clamp(1.15rem, 2.6vw, 1.62rem); line-height: 1.4; margin: 4px 0 12px; color: var(--paper-2); text-wrap: pretty; }
.visual-frame {
  margin: 0 0 10px; padding: 0; width: 100%; aspect-ratio: 16 / 9; max-height: 330px;
  border-radius: 16px; overflow: hidden; border: 1px solid rgba(246,234,210,0.18);
  background: radial-gradient(circle at 50% 30%, #26334e, #0d1524);
}
.visual-frame svg { display: block; width: 100%; height: 100%; }
.question-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 12px; }
.question-actions .btn { min-height: 44px; padding: 6px 14px; font-size: 0.82rem; }
.question-hint-label { margin-left: auto; color: var(--mist); font-size: 0.74rem; white-space: nowrap; }
.answer-area { min-height: 90px; }
.answer-area:empty { min-height: 0; }

/* 單選 */
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.choices--short { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice {
  display: flex; align-items: center; gap: 9px; min-height: 58px; padding: 10px 12px;
  border-radius: 13px; border: 1px solid rgba(246,234,210,0.22); background: rgba(246,234,210,0.06);
  color: var(--paper); text-align: left; cursor: pointer; font-size: 0.94rem; font-weight: 600;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
  overflow-wrap: anywhere;
}
.choice:hover:not(:disabled) { background: rgba(242,163,60,0.14); border-color: var(--amber); transform: translateY(-1px); }
.choice:disabled { cursor: default; opacity: 0.58; }
.choice__key { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: rgba(242,163,60,0.18); color: var(--amber-2); font-size: 0.74rem; font-variant-numeric: tabular-nums; }
.choice__text { min-width: 0; overflow-wrap: anywhere; }
.choice.is-wrong { border-color: #c15b68; background: rgba(142,59,70,0.35); opacity: 0.75; }
.choice.is-right { border-color: #8ad9ca; background: rgba(79,156,143,0.28); box-shadow: inset 0 0 0 1px rgba(138,217,202,0.4); }

/* 點圖 */
.tap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.tap-tile {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 6px;
  min-width: 0; border-radius: 13px; border: 1px solid rgba(246,234,210,0.22); background: rgba(246,234,210,0.06);
  color: var(--paper); cursor: pointer; transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.tap-tile:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--amber); background: rgba(242,163,60,0.12); }
.tap-tile:disabled { cursor: default; }
.tap-tile__art { display: block; border-radius: 9px; overflow: hidden; background: #0d1524; }
.tap-tile__art svg { display: block; width: 100%; height: auto; aspect-ratio: 5 / 3; }
.tap-tile__label { display: block; text-align: center; color: var(--amber-2); font-size: 0.78rem; font-weight: 700; }
.tap-tile.is-wrong { border-color: #c15b68; background: rgba(142,59,70,0.35); opacity: 0.7; }
.tap-tile.is-right { border-color: #8ad9ca; background: rgba(79,156,143,0.25); box-shadow: inset 0 0 0 1px rgba(138,217,202,0.4); }

/* 排序 */
.order__lead, .match__lead { color: var(--mist); font-size: 0.82rem; margin-bottom: 8px; }
.order__line { display: flex; flex-wrap: wrap; gap: 6px; min-height: 44px; padding: 8px; border-radius: 11px; background: rgba(8,13,23,0.55); border: 1px dashed rgba(246,234,210,0.22); margin-bottom: 9px; }
.order__placeholder { color: var(--charcoal); font-size: 0.8rem; align-self: center; padding-left: 4px; }
.order-chip {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-height: 44px; padding: 8px 10px;
  border-radius: 8px; border: 1px solid rgba(242,163,60,0.55); background: rgba(242,163,60,0.14);
  color: var(--paper); font-size: 0.8rem; cursor: pointer; overflow-wrap: anywhere;
}
.order-chip__no { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--amber); color: var(--ink); font-size: 0.66rem; font-weight: 700; }
.order-chip.is-right { border-color: #8ad9ca; background: rgba(79,156,143,0.24); }
.order__pool { display: flex; flex-wrap: wrap; gap: 7px; }
.order-pick {
  min-height: 44px; padding: 10px 12px; border-radius: 9px; border: 1px solid rgba(246,234,210,0.22);
  background: rgba(246,234,210,0.07); color: var(--paper); font-size: 0.84rem; cursor: pointer;
  max-width: 100%; overflow-wrap: anywhere; text-align: left;
}
.order-pick:hover:not(:disabled) { border-color: var(--amber); background: rgba(242,163,60,0.12); }
.order-pick:disabled { opacity: 0.3; cursor: default; }
.order__actions, .match__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.order__actions .btn, .match__actions .btn { min-height: 44px; padding: 6px 16px; font-size: 0.84rem; }

/* 配對 */
.match__board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.match__col { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.match-item {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 46px; padding: 8px 10px;
  border-radius: 10px; border: 1px solid rgba(246,234,210,0.2); background: rgba(246,234,210,0.06);
  color: var(--paper); font-size: 0.82rem; text-align: left; cursor: pointer; overflow-wrap: anywhere;
}
.match-item:hover:not(:disabled) { border-color: var(--amber); }
.match-item.is-active { border-color: var(--amber); background: rgba(242,163,60,0.18); box-shadow: 0 0 0 2px rgba(242,163,60,0.25); }
.match-item.is-done { border-color: rgba(79,156,143,0.6); }
.match-item.is-used { background: rgba(79,156,143,0.16); border-color: rgba(79,156,143,0.42); }
.match-item:disabled { cursor: default; opacity: 0.82; }
.match-item__label { min-width: 0; }
.match-item__pick { display: block; color: var(--amber-2); font-size: 0.7rem; text-align: right; max-width: 45%; overflow-wrap: anywhere; }

/* 提示、回饋、解說 */
.hint-box { margin-top: 12px; padding: 11px 14px; border-radius: 12px; background: rgba(242,163,60,0.1); border: 1px solid rgba(242,163,60,0.36); color: #e9dfcc; font-size: 0.86rem; }
.hint-box__line { display: flex; gap: 8px; align-items: flex-start; }
.hint-box__line span:last-child { min-width: 0; overflow-wrap: anywhere; }
.hint-box__tips { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; padding-top: 7px; border-top: 1px dashed rgba(242,163,60,0.3); color: var(--mist); font-size: 0.8rem; }
.hint-box__tips b { color: var(--amber-2); }
.feedback { display: none; align-items: center; gap: 10px; margin-top: 12px; padding: 9px 13px; border-radius: 12px; border: 1px solid transparent; background: rgba(246,234,210,0.06); }
.feedback.is-show { display: flex; animation: feedback-in 0.22s ease both; }
.feedback--good { border-color: rgba(79,156,143,0.55); background: rgba(79,156,143,0.14); }
.feedback--oops { border-color: rgba(193,91,104,0.6); background: rgba(142,59,70,0.2); }
.feedback--info { border-color: rgba(242,163,60,0.5); background: rgba(242,163,60,0.11); }
.feedback__face { flex: none; font-size: 1.35rem; }
.feedback__body { display: flex; flex-direction: column; min-width: 0; }
.feedback__body b { font-size: 0.95rem; }
.feedback__body small { color: var(--mist); font-size: 0.75rem; }

.explain-panel {
  margin-top: 14px; padding: 15px 16px; border-radius: 15px;
  border: 1px solid rgba(242,163,60,0.42); background: linear-gradient(135deg, rgba(242,163,60,0.1), rgba(79,156,143,0.08));
  scroll-margin-bottom: calc(var(--footer-h) + 20px);
}
.explain-panel h2 { font-size: 1.15rem; margin: 2px 0 6px; }
.explain-answer { color: var(--amber-2); font-weight: 700; white-space: pre-line; overflow-wrap: anywhere; font-size: 1rem; }
.explain-text { color: #ded8cb; font-size: 0.9rem; margin-top: 6px; white-space: pre-line; }
.explain-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.explain-actions .btn { min-height: 44px; padding: 7px 16px; font-size: 0.85rem; }

@media (max-width: 620px) {
  .play-hud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hud__cell { padding: 7px 10px; }
  .hud__value { font-size: 0.92rem; }
  .hud__value--score { font-size: 1.05rem; }
  .choices, .choices--short { grid-template-columns: 1fr; }
  .choice { min-height: 50px; }
  .tap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .match-item { font-size: 0.78rem; padding: 7px 8px; }
  .visual-frame { max-height: 260px; }
  .question-hint-label { margin-left: 0; }
}
@media (max-width: 390px) {
  .question-card { padding: 13px; }
  .question-actions { gap: 6px; }
  .question-actions .btn { padding: 5px 10px; font-size: 0.76rem; }
  .order-pick { min-height: 44px; }
  .tap-grid { gap: 6px; }
  .tap-tile { padding: 4px; }
  .match__board { gap: 6px; }
  .match-item { font-size: 0.73rem; }
  .order-pick { font-size: 0.78rem; padding: 8px 9px; }
}