/* ── Choose Def game styles ── */

.cdef-main {
  max-width: 520px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
  color: var(--ink);
}

/* ── Intro screen ── */

.cdef-rounds-picker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.cdef-rounds-picker select {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
}

/* ── Playing phase ── */

.cdef-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.cdef-progress-text {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

/* ── Definition card ── */

.cdef-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
  margin-bottom: 1.25rem;
  min-height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* When the card also hosts the reveal (image + sentence), stack the definition
   and the reveal vertically so they sit together near the top, centered. */
.cdef-card.has-reveal {
  flex-direction: column;
}

.cdef-definition {
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

/* ── Choice buttons ── */

.cdef-choices {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cdef-choice {
  display: block;
  width: 100%;
  padding: 0.85rem 1rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.cdef-choice:active {
  transform: scale(0.99);
}

.cdef-choice.correct {
  border-color: #22c55e;
  background: color-mix(in srgb, #22c55e 10%, var(--panel));
  color: #16a34a;
}

.cdef-choice.wrong {
  border-color: var(--warn);
  background: color-mix(in srgb, #ef4444 8%, var(--panel));
  color: #dc2626;
}

.cdef-choice.reveal {
  border-color: #22c55e;
  opacity: 0.7;
}

.cdef-choice.locked {
  pointer-events: none;
}

.cdef-choice-translit {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--muted);
  font-style: italic;
  margin-top: 0.1rem;
}

/* Reveal area (image + example sentence) shown once the answer is locked.
   It's always laid out for the current round and only its visibility is
   toggled on reveal, so the choices above never shift. Hidden by default so
   the mnemonic image stays concealed during the question. */
.cdef-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1rem;
  visibility: hidden;
}

.cdef-reveal.cdef-revealed {
  visibility: visible;
}

.cdef-sentence {
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
  text-align: center;
  margin: 0.75rem 0 0;
  line-height: 1.5;
}

/* ── Result screen ── */

.cdef-score-big {
  font-size: 3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  margin: 0.25rem 0;
}

.cdef-result-stats {
  font-size: 0.9375rem;
  color: var(--muted);
  margin: 0 0 1.5rem;
}

/* ── Responsive ── */

@media (max-width: 640px) {
  .cdef-main {
    padding: 1rem 0.75rem 2rem;
  }

  .cdef-card {
    padding: 1.5rem 1rem;
    min-height: 6rem;
  }

  .cdef-definition {
    font-size: 1rem;
  }

  .cdef-choice {
    padding: 0.75rem 0.85rem;
    font-size: 0.9375rem;
  }
}

/* ── Hover (desktop only) ── */

@media (hover: hover) {
  .cdef-choice:not(.correct):not(.wrong):not(.reveal):not(.locked):hover {
    border-color: var(--accent);
  }
}