/* ============================================================
   vocabulary.css — Flashcard Vocabulary Trainer
   ============================================================ */

/* ---- Page Wrapper ---- */
#main-content {
  width: 100%;
  max-width: var(--max-w);
  padding: 36px var(--page-pad-x) 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  flex: 1;
}

#vocab-content { width: 100%; max-width: var(--max-w); display: flex; flex-direction: column; align-items: center; }



/* ---- Stats Bar ---- */


/* ---- Flashcard (3-D flip) ---- */
.flashcard-scene {
  width: 100%;
  max-width: 640px;            /* a proper centered card, not a full-width box the content floats in */
  margin: 0 auto 24px;
  perspective: 1000px;
  cursor: pointer;
  animation: fadeInScale 0.6s 0.2s ease-out both;
}

.flashcard {
  width: 100%;
  display: grid;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.flashcard.flipped {
  transform: rotateY(180deg);
}

.flashcard-face {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* Front face */
.flashcard-front {
  position: relative;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 280px;
}

/* Back face — grid-stacked, flipped 180° so it shows when parent rotates */
.flashcard-back {
  position: relative;
  transform: rotateY(180deg);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ---- Front Content ---- */
.fc-front-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.word-category {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--clr-text-muted);
}


.word-text {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--clr-text);
  line-height: 1.1;
  margin-bottom: 20px;
  /* word + its region/register badge on one row (badge stays small beside the large word) */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
/* When the front shows the word's FORMS (all variants, each tagged) instead of a single large word:
   a centered, normal-size stack of the grouped tagged chips. */
.word-text.word-text--variants {
  font-size: 1.05rem;
  font-weight: 600;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  justify-content: center;
  margin-bottom: 22px;
}
.word-text--variants .word-variants,
.word-text--variants .alt-group { align-items: center; }
.word-text--variants .alt-group-row { justify-content: center; }
.word-text--variants .alt-group-label { text-align: center; }

.listen-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  font-family: 'Raleway', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--clr-text-muted);
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  margin-bottom: 16px;
  transition: background var(--transition), color var(--transition);
}

.listen-btn:hover { background: var(--clr-accent-light); color: var(--clr-accent-dark); border-color: var(--clr-accent); }

.flip-hint {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  background: var(--clr-primary);
  padding: 11px 28px;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 14px rgba(37,99,235,0.28);
  transition: transform var(--transition-bounce), box-shadow var(--transition);
}

.flashcard-scene:hover .flip-hint {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37,99,235,0.36);
}

/* ---- Back Content ---- */
.fc-back-word {
  font-size: 1rem;
  font-weight: 800;
  color: var(--clr-primary);
  margin-bottom: 12px;
  letter-spacing: 0.01em;
  /* word + its region/register badge sit on one baseline-aligned row */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* The shown form's own variant tag (region flag / register pill), inline next to the word — so the
   learner sees WHICH variety the headword is (e.g. "Ordenador · España"), not only the others. */
.fc-word-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fc-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--clr-text-muted);
  margin-bottom: 4px;
}

/* Definition row: the definition text (left) + a two-flag language switch (right), vertically
   centered on the SAME line as the definition. */
.fc-def-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.fc-def-row .word-definition { flex: 1; }
.fc-def-switch {
  flex-shrink: 0;
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full, 999px);
}
.fc-def-switch.hidden { display: none; }
.fc-def-side {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 7px;
  border: none;
  background: none;
  border-radius: var(--radius-full, 999px);
  cursor: pointer;
  opacity: 0.4;
  transition: opacity var(--transition, .2s), background var(--transition, .2s);
}
/* Smaller flags in the compact toggle: scale the whole stack down (flags + overlap together),
   and pull the layout box in so the pill hugs them instead of feeling cramped. */
.fc-def-side .flag-stack { transform: scale(0.7); transform-origin: center; margin: -3px -5px; }
.fc-def-side img { display: block; border-radius: 2px; }
.fc-def-side:hover { opacity: 0.75; }
.fc-def-side--active { opacity: 1; background: var(--clr-surface); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.12)); }

.fc-definition-block {
  margin-bottom: 12px;
}

.word-definition {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--clr-text);
  line-height: 1.45;
}

.fc-divider {
  height: 1px;
  background: var(--clr-border);
  margin-bottom: 12px;
}

.fc-example-block {
  margin-bottom: 12px;
}

.word-example {
  font-size: 0.88rem;
  font-style: italic;
  color: var(--clr-text-muted);
  font-weight: 500;
  line-height: 1.5;
}

.fc-translation-block {
  padding-top: 12px;
  border-top: 1px solid var(--clr-border);
}

.word-translation {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--clr-text-muted);
}

/* Other regional/register forms (recognition strip). A clean, separated, LEFT-aligned section —
   not a lone centred pill glued under the translation. */
.fc-variants-block {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--clr-border);
}
.word-variants {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 6px;
}
/* Variants are grouped by KIND so the learner sees WHY they differ: grammatical FORMS of one word
   (case/number/gender) vs ALTERNATIVE WORDS for the same meaning (region/register/loanword). */
.alt-group { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.alt-group-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
}
.alt-group-row { display: flex; flex-wrap: wrap; gap: 8px; }

.listen-btn-back {
  margin-bottom: 12px;
  align-self: flex-start;
}


/* ---- Responsive ---- */
@media (max-width: 480px) {
  #main-content { padding: 24px var(--page-pad-x) 56px; }
  .word-text { font-size: 2rem; }
  .flashcard-front { padding: 24px 20px 22px; }
  .flashcard-back  { padding: 20px; }
  .rating-btn { padding: 9px 16px; font-size: 0.85rem; }
}

#topic-picker { width: 100%; }

#vocab-content .next-btn {
  margin-top: 8px;
  width: 100%;
  padding: 14px;
  animation: fadeInScale 0.3s ease-out both;
}