/* studium/css/vocabCard.v1.css
   Pokemon-Karten-Ansicht für das coreVocabulary-Kartendeck. Reine additive
   Stildatei — verwendet dieselben --v2-*-Tokens wie hskReaderV2.v1.css
   (dort geladen, hier nur referenziert, keine Neudefinition der Farben).
   hskReaderV2.v1.css definiert keine Radius/Schatten-Tokens (nur hskReader.v1.css
   für den klassischen Reader) — hier lokal ergänzt statt eine zweite
   Stylesheet-Datei zu laden. */

.vc-tabs { display: flex; gap: 8px; margin: 0 0 16px; }
.vc-tab {
  flex: 1; border: 1px solid var(--v2-line); background: var(--v2-card); color: var(--v2-fg2);
  border-radius: 999px; padding: 10px 14px; font: inherit; font-weight: 700; cursor: pointer;
}
.vc-tab.on { background: var(--v2-accent); border-color: var(--v2-accent); color: #fff; }

.vc-filterRow { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.vc-filterRow select {
  flex: 1; min-width: 160px; padding: 8px 12px; border: 1px solid var(--v2-line); border-radius: 12px;
  background: var(--v2-card); color: var(--v2-fg); font: inherit;
}

.vc-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px;
}
.vc-empty { color: var(--v2-fg2); text-align: center; padding: 40px 0; grid-column: 1 / -1; }

.vc-card {
  position: relative; background: var(--v2-card); border: 1px solid var(--v2-line);
  border-radius: 20px; padding: 16px 14px 14px; display: flex; flex-direction: column; align-items: center;
  text-align: center; box-shadow: 0 1px 4px rgba(15,23,42,.07), 0 4px 12px rgba(15,23,42,.04);
  border-top: 5px solid var(--card-accent, var(--v2-accent));
}
.vc-card.mastered { background: linear-gradient(165deg, var(--v2-card), var(--v2-accent-s) 140%); }
.vc-card__badge {
  position: absolute; top: 10px; right: 10px; font-size: 16px; line-height: 1;
}
.vc-card__emoji { font-size: 2.6rem; line-height: 1; margin-bottom: 6px; }
.vc-card__word {
  font-family: var(--v2-language-font, inherit); font-size: 1.15rem; font-weight: 700; color: var(--v2-fg);
  margin-bottom: 2px; word-break: break-word;
}
.vc-card__ipa { font-size: .8rem; color: var(--v2-fg2); margin-bottom: 6px; }
.vc-card__gloss { font-size: .85rem; color: var(--v2-fg2); margin-bottom: 6px; }
.vc-card__sentence {
  font-family: var(--v2-language-font, inherit); font-size: .8rem; color: var(--v2-fg2);
  border-top: 1px dashed var(--v2-line); padding-top: 6px; margin-bottom: 10px; min-height: 1.4em;
}
.vc-card__stars { font-size: .95rem; letter-spacing: 2px; margin-bottom: 10px; color: var(--v2-accent); }
.vc-card__stars .off { color: var(--v2-line); }

.vc-card__exercises { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.vc-exBtn {
  border: 1px solid var(--v2-line); background: var(--v2-bg2); color: var(--v2-fg);
  border-radius: 999px; padding: 5px 10px; font: inherit; font-size: .75rem; cursor: pointer;
}
.vc-exBtn:hover { background: var(--v2-accent-s); border-color: var(--v2-accent); }
.vc-exBtn:disabled { opacity: .35; cursor: default; }

.vc-counter { color: var(--v2-fg2); font-size: .85rem; margin: -8px 0 16px; text-align: center; }

[dir="rtl"] .vc-card { direction: rtl; }

/* Räume-Ansicht: 3 eigenständige, einzeln anwählbare Räume (kein
   Fortschrittsbalken/Punkte-Indikator) — jeder Raum ist ein eigener Tab
   innerhalb des Räume-Bereichs. */
.vc-roomNav { display: flex; gap: 8px; margin-bottom: 16px; }
.vc-roomNavBtn {
  flex: 1; border: 1px solid var(--v2-line); background: var(--v2-bg2); color: var(--v2-fg2);
  border-radius: 14px; padding: 10px 12px; font: inherit; font-weight: 700; cursor: pointer;
}
.vc-roomNavBtn.on { background: var(--v2-accent); border-color: var(--v2-accent); color: #fff; }
.vc-checklist { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-bottom: 8px; }
.vc-check { font-size: .68rem; color: var(--v2-fg2); border: 1px solid var(--v2-line); border-radius: 999px; padding: 2px 8px; }
.vc-check.done { color: var(--v2-ok); border-color: var(--v2-ok); background: var(--v2-ok-s); }
.vc-exBtn--done { color: var(--v2-ok); border-color: var(--v2-ok); }
.vc-gameBtn { background: var(--v2-accent-s); border-color: var(--v2-accent); }

.vc-waiting {
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--v2-line); width: 100%;
}
.vc-waiting__label { font-size: .72rem; color: var(--v2-fg2); margin-bottom: 6px; }
.vc-waiting__chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.vc-partnerChip {
  border: 1px dashed var(--v2-accent); background: transparent; color: var(--v2-accent);
  border-radius: 999px; padding: 4px 10px; font: inherit; font-size: .78rem; cursor: pointer;
}
.vc-partnerChip:hover { background: var(--v2-accent-s); }

.vc-card--room { border-top-color: var(--v2-accent); }
.vc-card--highlight { outline: 3px solid var(--v2-accent); outline-offset: 2px; }