/* ============================================================
   vocab.css — Vokabelkarten + Grammatikkarte + Dialog
   ============================================================ */

/* Seite unterstützt nur Light Mode – verhindert dass OS-Dark-Mode
   einzelne Komponenten umfärbt während der Hintergrund hell bleibt. */
.vocab-grid { align-items: stretch; }
.vocab-card  { height: 100%; }

/* ── Kopfzeile ────────────────────────────────────────────── */
.vocab-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.vocab-ko {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--accent-08);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-78);
  white-space: nowrap;
}

/* ── Hauptübersetzung ─────────────────────────────────────── */
.vocab-en {
  margin: 0 0 12px;
  color: var(--ink-80);
  font-size: 16px;
  font-weight: 600;
}

/* ── Bedeutungen ──────────────────────────────────────────── */
.vocab-meanings {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}

.vocab-meaning {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 13.5px;
  color: var(--ink-68);
  line-height: 1.45;
}

.meaning-num {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-10);
  border: 1px solid var(--accent-18);
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* ── Synonyme ─────────────────────────────────────────────── */
.vocab-synonyms {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.synonyms-label {
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--ink-42);
  flex-shrink: 0;
}

.synonyms-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.synonym-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--ink-05);
  border: 1px solid var(--ink-10);
  font-size: 13px;
  color: var(--ink-72);
}

/* ── Meta / Beispielsatz ──────────────────────────────────── */
.vocab-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--ink-55);
  font-size: 13px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.vocab-example {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.example-ko {
  color: var(--ink-72);
  font-size: 13.5px;
  line-height: 1.5;
}

.example-de {
  color: var(--ink-52);
  font-style: italic;
  font-size: 13px;
  line-height: 1.45;
}

/* ── Grammatikkarte (volle Breite) ────────────────────────── */
.grammar-card {
  border-left: 3px solid var(--grammar-card-border) !important;
  background: var(--grammar-card-bg) !important;
}

.grammar-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}

@media (max-width: 640px) {
  .grammar-inner { grid-template-columns: 1fr; }
}

.grammar-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: clamp(16px, 2vw, 32px);
  border-right: 1px solid var(--line);
}

@media (max-width: 640px) {
  .grammar-left {
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding-bottom: 16px;
  }
}

.grammar-label {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-42);
}

.grammar-form {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--grammar-form-color);
  white-space: nowrap;
}

.grammar-level {
  background: var(--accent-10);
  border-color: var(--accent-20);
  color: var(--accent-80);
  align-self: flex-start;
}

.grammar-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.grammar-explanation {
  margin: 0;
  color: var(--ink-75);
  font-size: 15px;
  line-height: 1.6;
}

/* ============================================================
   DIALOG-SEKTION
   ============================================================ */
.dialog-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dialog-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dialog-title {
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 720;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.dialog-situation {
  color: var(--muted);
  font-size: 14px;
  font-style: italic;
}

/* Legende */
.dialog-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--ink-03);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--muted);
}

.dialog-legend-sep { opacity: .4; }

.dialog-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-10);
  border: 1px solid var(--accent-20);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-80);
}

.dialog-avatar--right {
  background: var(--ink-06);
  border-color: var(--ink-14);
  color: var(--ink-68);
}

.dialog-hint {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-40);
}

/* Gesprächszeilen */
.dialog-lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dialog-line {
  display: flex;
  position: relative;
  transition: opacity .15s ease;
}

.dialog-line--left  { justify-content: flex-start; }
.dialog-line--right { justify-content: flex-end; }

.dialog-bubble {
  max-width: min(72%, 600px);
  padding: 14px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dialog-line--left .dialog-bubble {
  background: var(--bubble-left-bg);
  border-color: var(--bubble-left-border);
  border-bottom-left-radius: 4px;
}

.dialog-line--right .dialog-bubble {
  background: var(--bubble-right-bg);
  border-color: var(--bubble-right-border);
  border-bottom-right-radius: 4px;
}

.dialog-speaker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-40);
}

.dialog-ko {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
}

.dialog-de {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
  line-height: 1.45;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

/* Aktive Zeile beim Abspielen */
.dialog-line--active .dialog-bubble {
  box-shadow: 0 0 0 2px var(--accent-35);
  background: var(--accent-08) !important;
}

.dialog-line:not(.dialog-line--active):hover .dialog-bubble {
  border-color: var(--accent-20);
}

/* ── Lautsprecher-Button (inline, Anfang jeder Zeile) ─────── */
.line-play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--ink-20);
  background: var(--ink-06);
  color: var(--ink-70);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  margin-right: 6px;
  position: relative;
  top: -1px;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}

.line-play-btn:hover {
  background: var(--accent-12);
  border-color: var(--accent-35);
  color: var(--accent-90);
}

.dialog-line--active .line-play-btn {
  background: var(--accent-12);
  border-color: var(--accent-30);
  color: var(--accent-85);
}


/* ── Highlight + Tooltip ──────────────────────────────────── */
.hl {
  position: relative;
  display: inline;
  background: var(--hl-bg);
  border-bottom: 1.5px solid var(--hl-border);
  border-radius: 3px;
  padding: 0 2px;
  cursor: default;
  transition: background .15s ease;
}

.hl:hover,
.hl[data-tip-visible] {
  background: var(--hl-bg-hover);
}

.hl--vocab {
  background: var(--hl-vocab-bg);
  border-bottom-color: var(--hl-vocab-border);
  font-weight: 700;
}

.hl--vocab:hover,
.hl--vocab[data-tip-visible] {
  background: var(--hl-vocab-bg-hover);
}

.hl::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 100;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}

.hl::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent;
  border-top-color: var(--ink);
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 100;
}

.hl:hover::after,
.hl[data-tip-visible]::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.hl:hover::before,
.hl[data-tip-visible]::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.hl-sample {
  background: var(--hl-bg);
  border-bottom: 1.5px solid var(--hl-border);
  border-radius: 3px;
  padding: 0 3px;
  font-style: normal;
}

.hl-sample.hl--vocab {
  background: var(--hl-vocab-bg);
  border-bottom-color: var(--hl-vocab-border);
}

/* ── Skeleton-Loader ──────────────────────────────────────── */
.skeleton { pointer-events: none; }

.skel {
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--ink-06) 25%,
    var(--ink-12) 50%,
    var(--ink-06) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite ease-in-out;
  margin-bottom: 12px;
}

.skel--title { height: 32px; width: 55%; }
.skel--line  { height: 14px; width: 90%; }
.skel--short { width: 60%; }

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   AUDIO-PLAYER
   ============================================================ */
.audio-player {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  background: var(--accent-05);
  border: 1px solid var(--accent-14);
  border-radius: var(--r-sm);
}

.audio-controls-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.audio-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--accent-25);
  background: var(--accent-10);
  color: var(--accent-85);
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}

.audio-btn:hover {
  background: var(--accent-18);
  transform: scale(1.05);
}

.audio-btn--reset {
  width: 30px;
  height: 30px;
  background: transparent;
  border-color: var(--ink-14);
  color: var(--ink-45);
}

.audio-btn--reset:hover {
  background: var(--ink-06);
  transform: scale(1.05);
}

.audio-progress {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.audio-track {
  height: 4px;
  border-radius: 999px;
  background: var(--accent-12);
  overflow: hidden;
}

.audio-fill {
  height: 100%;
  width: 0%;
  background: var(--accent-55);
  border-radius: 999px;
  transition: width .3s ease;
}

.audio-label {
  font-size: 12px;
  color: var(--ink-50);
  font-family: monospace;
  letter-spacing: .02em;
}

/* ── Speed-Control ────────────────────────────────────────── */
.speed-control {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.speed-btn {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-45);
  font-size: 11px;
  font-weight: 700;
  font-family: monospace;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
  white-space: nowrap;
}

.speed-btn:hover {
  background: var(--ink-06);
  color: var(--ink-75);
}

.speed-btn--active {
  background: var(--accent-12);
  border-color: var(--accent-30);
  color: var(--accent-85);
}

/* ── Nav-Buttons (rechts im Header) ──────────────────────── */
.nav-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.btn--nav-icon {
  padding: 6px 10px;
  font-size: 16px;
  line-height: 1;
  min-width: 36px;
  text-align: center;
}

/* ── Mobil ≤ 520px ───────────────────────────────────────── */
@media (max-width: 520px) {
  .speed-btn {
    padding: 3px 6px;
    font-size: 10px;
  }

  .btn--nav-icon {
    padding: 5px 8px;
    font-size: 14px;
    min-width: 30px;
  }

  .nav-actions .btn:not(.btn--nav-icon):not(#backBtn) {
    font-size: 12px;
    padding: 5px 10px;
  }
}