/* ── Vocabulary Writing Challenge ────────────────────────────────────────── */

#vocab-challenge {
  margin-bottom: var(--space-5);
}

.vc-wrap {
  padding: var(--space-4) var(--space-5);
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 8%, transparent);
}

.vc-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.vc-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent);
}

.vc-sub {
  font-size: 0.78rem;
  color: var(--muted);
  flex: 1;
}

.vc-rerolls {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 500;
  margin-left: auto;
}

/* ── Cards row ───────────────────────────────────────────────────────────── */

.vc-cards {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ── Individual card ─────────────────────────────────────────────────────── */

.vc-card {
  position: relative;
  flex: 1;
  min-width: 120px;
  max-width: 200px;
  background: color-mix(in srgb, #ef4444 6%, var(--surface-2));
  border: 1px solid color-mix(in srgb, #ef4444 22%, var(--border));
  border-radius: var(--radius);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}

.vc-card-inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  overflow: hidden;
}

.vc-word {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-fast);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vc-word:hover { color: var(--accent); }

.vc-reroll-btn {
  background: none;
  border: none;
  padding: 2px 4px;
  font-size: 1rem;
  color: var(--muted-2);
  cursor: pointer;
  line-height: 1;
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast), background var(--dur-fast);
  flex-shrink: 0;
}

.vc-reroll-btn:hover:not(:disabled) {
  color: var(--text);
  background: var(--surface);
}

.vc-reroll-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.vc-status {
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
  color: #ef4444;
  transition: color var(--dur-fast);
}

.vc-status--done {
  color: var(--green);
}

/* ── Done state ──────────────────────────────────────────────────────────── */

@keyframes vc-ring-in {
  0%   { box-shadow: 0 0 0 0px transparent;
         background: var(--surface-2); }
  40%  { box-shadow: 0 0 0 3px var(--green);
         background: color-mix(in srgb, var(--green) 14%, var(--surface-2)); }
  100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 60%, transparent);
         background: color-mix(in srgb, var(--green) 8%, var(--surface-2)); }
}

.vc-card--done {
  border-color: color-mix(in srgb, var(--green) 50%, transparent);
  animation: vc-ring-in 0.5s ease-out forwards;
}

.vc-card--done .vc-word {
  color: var(--green);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--green) 50%, transparent);
}

/* ── Slot-machine roll animation ─────────────────────────────────────────── */

@keyframes vc-slot-tick {
  0%   { transform: translateY(0);     filter: blur(0px); opacity: 1; }
  40%  { transform: translateY(-110%); filter: blur(2px); opacity: 0; }
  41%  { transform: translateY(110%);  filter: blur(2px); opacity: 0; }
  100% { transform: translateY(0);     filter: blur(0px); opacity: 1; }
}

.vc-card--rolling .vc-word {
  color: var(--accent);
}

.vc-card--rolling .vc-word.vc-slot-tick {
  animation: vc-slot-tick 0.13s ease-in-out forwards;
}

.vc-card--rolling .vc-reroll-btn {
  opacity: 0.3;
  pointer-events: none;
}

/* ── Swap animations ─────────────────────────────────────────────────────── */

@keyframes vc-swap-out {
  to { opacity: 0; transform: translateY(-6px) scale(0.96); }
}

@keyframes vc-swap-in {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)  scale(1);    }
}

.vc-card--swap-out { animation: vc-swap-out 0.18s ease-in forwards; }
.vc-card--swap-in  { animation: vc-swap-in  0.22s ease-out forwards; }

/* ── Tooltip ─────────────────────────────────────────────────────────────── */

.vc-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 100;
  min-width: 180px;
  max-width: 260px;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.vc-tooltip-word {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.vc-tooltip-pos {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--accent);
  letter-spacing: 0.04em;
}

.vc-tooltip-meaning {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 2px;
}


/* ── Draft restore banner (write-review page) ────────────────────────────── */

.draft-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: var(--radius);
  margin-bottom: var(--space-5);
}

.draft-banner-icon { font-size: 1.1rem; flex-shrink: 0; }

.draft-banner-msg {
  flex: 1;
  font-size: 0.88rem;
  color: var(--text);
}

.draft-banner-time { color: var(--muted); }

.draft-banner-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-shrink: 0;
}

.draft-restore-btn {
  padding: 6px var(--space-4);
  font-size: 0.85rem;
}

.draft-discard-btn {
  font-size: 0.82rem;
  color: var(--muted);
}

/* ── Knowledge score on word cards (My Words page) ───────────────────────── */

.mw-score-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.mw-score-bar-wrap {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}

.mw-score-bar {
  height: 100%;
  border-radius: 99px;
  background: var(--accent);
  transition: width 0.4s ease;
}

.mw-score-label {
  font-size: 0.68rem;
  color: var(--muted);
  white-space: nowrap;
  font-weight: 500;
}

.mw-stage-chip {
  display: inline-block;
  padding: 1px var(--space-2);
  border-radius: 99px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Stage colours */
.mw-stage-new        { background: color-mix(in srgb, var(--muted) 12%, transparent);   color: var(--muted); }
.mw-stage-familiar   { background: color-mix(in srgb, #60a5fa 12%, transparent);         color: #60a5fa; }
.mw-stage-developing { background: color-mix(in srgb, var(--accent) 15%, transparent);   color: var(--accent); }
.mw-stage-strong     { background: color-mix(in srgb, #10b981 12%, transparent);         color: #10b981; }
.mw-stage-mastered   { background: color-mix(in srgb, #a855f7 12%, transparent);         color: #a855f7; }