/* AikiTrivia — answer pills, progress bar, and history cards
   aligned to the site's design tokens (custom.css :root). */

/* Progress bar under the Término header */
#trivia-progress-track {
  height: 6px;
  background: #eef0f4;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 14px;
}
#trivia-progress {
  height: 100%;
  width: 0;
  background: #ed5565;
  border-radius: 3px;
  transition: width 0.3s ease-in-out;
}

/* Answers: hide the radio, make the label a big tappable pill */
#random-terms input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
#random-terms label {
  display: block;
  width: 100%;
  padding: 12px 14px;
  margin: 8px 0;
  border: 1px solid #e0e4ea;
  border-radius: var(--site-radius, 0.4rem);
  background: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: var(--site-transition, all 0.25s ease-in-out);
  box-shadow: var(--site-shadow, 0 1px 4px rgba(130, 143, 163, 0.15));
}
#random-terms label:hover {
  border-color: #ed5565;
  transform: translateY(-1px);
}
#random-terms input[type="radio"]:checked + label {
  background: #ed5565;
  border-color: #ed5565;
  color: #fff;
  box-shadow: var(--site-shadow-hover, 0 0.5rem 1.25rem rgba(130, 143, 163, 0.28));
}
#random-terms input[type="radio"]:focus-visible + label {
  outline: 2px solid #ed5565;
  outline-offset: 2px;
}

/* Confirm button: brand red instead of template green */
#submit-button {
  border-color: #ed5565;
  color: #ed5565;
}
#submit-button:hover {
  background: #ed5565;
  border-color: #ed5565;
  color: #fff;
}

/* End-of-game history */
.game-history-card {
  border: 1px solid #eef0f4;
  border-radius: var(--site-radius, 0.4rem);
  box-shadow: var(--site-shadow, 0 1px 4px rgba(130, 143, 163, 0.15));
  padding: 14px 16px;
  margin: 12px 0;
}
.correct-answer {
  color: #1ab394;
  font-weight: 600;
}
.incorrect-answer {
  color: #ed5565;
  font-weight: 600;
}