/* 지판 퀴즈 페이지 (지판 자체의 모양은 board.css) */

.hint-field {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 38px;
}

/* ---------- 문제 패널 ---------- */

.quiz__ready {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
}

.quiz__ready p {
  max-width: 680px;
  color: var(--text-muted);
}

.quiz__play {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px 16px;
}

.quiz__bar {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 700;
}

.quiz__bar b {
  color: var(--text);
}

.quiz__time {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.quiz__timer {
  grid-column: 1 / -1;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-2);
}

.quiz__timer-bar {
  height: 100%;
  background: var(--accent);
  transform-origin: left center;
}

.quiz__play.is-low .quiz__timer-bar {
  background: #dc2626;
}

.quiz__play.is-low .quiz__time {
  color: var(--danger-text);
}

.quiz__question {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.quiz__badge {
  display: inline-flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  height: 60px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.quiz__badge small {
  font-size: 13px;
  font-weight: 700;
}

.quiz__prompt {
  font-size: 18px;
  font-weight: 800;
}

.quiz__progress {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
}

.quiz__progress b {
  color: var(--text);
  font-size: 16px;
}

/* 남은 개수 */
.quiz__remaining {
  display: grid;
  flex: none;
  justify-items: center;
  margin: 0 0 0 4px;
  padding-left: 18px;
  border-left: 1px solid var(--border);
  line-height: 1.1;
}

.quiz__remaining b {
  font-size: 32px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.quiz__remaining span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.quiz__play[data-result='success'] .quiz__remaining b {
  color: var(--success-text);
}

.quiz__play[data-result='fail'] .quiz__remaining b {
  color: var(--danger-text);
}

.quiz__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.quiz__status {
  grid-column: 1 / -1;
  min-height: 22px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 700;
}

.quiz__status[data-tone='hint'] {
  color: var(--accent-text);
}

.quiz__status[data-tone='success'] {
  color: var(--success-text);
}

.quiz__status[data-tone='wrong'],
.quiz__status[data-tone='fail'] {
  color: var(--danger-text);
}

/* ---------- 결과 ---------- */

.quiz__done {
  display: grid;
  justify-items: start;
  gap: 16px;
}

.quiz__title {
  font-size: 20px;
  font-weight: 800;
}

.quiz__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin: 0;
}

.quiz__stats > div {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-2);
}

.quiz__stats dt {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
}

.quiz__stats dd {
  margin: 2px 0 0;
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.quiz__history {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.quiz__history li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
}

.quiz__history b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}

.quiz__history b small {
  font-size: 10px;
}

.quiz__history .is-success b {
  background: #22c55e;
  color: #052e16;
}

.quiz__history .is-fail b {
  background: #fee2e2;
  color: #991b1b;
  box-shadow: inset 0 0 0 2px #ef4444;
}

/* ---------- 지판 표시 ---------- */

.fretboard.is-idle .cell {
  cursor: default;
}

/* 음이름을 감춘 지판에서 찾은 음, 틀린 자리, 놓친 음만 보여 준다 */
.fretboard.names-hidden .cell.is-found .note,
.fretboard.names-hidden .cell.is-wrong .note,
.fretboard.names-hidden .cell.is-missed .note {
  visibility: visible;
}

.cell.is-found {
  --note-bg: #22c55e;
  --note-fg: #052e16;
}

.cell.is-found .note {
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45);
  animation: quiz-pop 0.25s ease;
}

.cell.is-wrong {
  --note-bg: #dc2626;
  --note-fg: #ffffff;
}

.cell.is-wrong .note {
  animation: quiz-shake 0.35s ease;
}

.cell.is-missed {
  --note-bg: #fee2e2;
  --note-fg: #991b1b;
}

.cell.is-missed .note {
  box-shadow: 0 0 0 2px #ef4444, 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* 힌트: 누를 자리에 깜박이는 점선 고리 */
.cell.is-hint::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--badge) + 8px);
  height: calc(var(--badge) + 8px);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.cell.is-hint::after {
  border: 3px dashed var(--accent);
  background: rgba(249, 115, 22, 0.18);
  animation: quiz-hint 1.2s ease-in-out infinite;
}

/* 음이름이 없는 칸에 마우스를 올리면 누를 자리를 옅은 원으로 보여 준다 */
@media (hover: hover) {
  .fretboard.names-hidden:not(.is-idle) .cell:not(.is-found, .is-hint):hover::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--badge);
    height: var(--badge);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
}

@keyframes quiz-hint {
  50% {
    opacity: 0.45;
    transform: translate(-50%, -50%) scale(1.15);
  }
}

@keyframes quiz-pop {
  0% {
    transform: scale(0.6);
  }

  70% {
    transform: scale(1.15);
  }
}

@keyframes quiz-shake {
  20%,
  60% {
    transform: translateX(-4px);
  }

  40%,
  80% {
    transform: translateX(4px);
  }
}

.legend__swatch .is-found {
  background: #22c55e;
}

.legend__swatch .is-hint {
  width: 14px;
  height: 14px;
  border: 2px dashed var(--accent);
}

.legend__swatch .is-wrong {
  background: #dc2626;
}

.legend__swatch .is-missed {
  background: #fee2e2;
  box-shadow: 0 0 0 2px #ef4444;
}

/* ---------- 작은 화면 ---------- */

@media (max-width: 640px) {
  .quiz__play {
    grid-template-columns: 1fr;
  }

  .quiz__actions {
    justify-content: stretch;
  }

  /* 버튼 세 개가 한 줄에 들어가도록 글자 폭만큼 잡고 남는 자리를 나눈다 (글자는 꺾지 않음) */
  .quiz__actions .btn {
    flex: 1 1 auto;
    padding: 0 8px;
    white-space: nowrap;
  }

  .quiz__badge {
    min-width: 52px;
    height: 52px;
    font-size: 21px;
  }

  .quiz__prompt {
    font-size: 16px;
  }

  /* 휴대폰에서는 남은 개수를 문제 줄 오른쪽 끝에 */
  .quiz__text {
    flex: 1;
    min-width: 0;
  }

  .quiz__remaining b {
    font-size: 28px;
  }

  .quiz__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}