/* ============================================================
   lernkartei.css — Lernkartei (Leitner-Mini-App). Baut auf core/base.css +
   themes/tokens.js auf (--tap=44px, --accent, --ok, --warn …), eigener
   Prefix .lk-* (NICHT .dr-* — das gehört ui-refresh.css' Shell-System
   .dr-shell/.dr-page-*). Feinschliff fürs DenkRaum-Shell-Layout kommt aus
   ui-refresh.css (body.dr-page-lernkartei …). Animationen sind über
   prefers-reduced-motion abgeschaltet.
   ============================================================ */

#app{ max-width: 900px; }

/* ---- Hero: Quizli + Abgrenzungs-Copy ---- */
.lk-hero{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin:.4rem 0 1rem; }
.lk-hero__txt h2{ margin:0 0 .3rem; color:var(--head); }
.lk-scope{ margin:0; padding:.45rem .7rem; background:var(--soft); border:1px solid var(--line);
  border-radius:var(--radius-btn); color:var(--ink); font-size:.95rem; }
.lk-scope-mini{ margin-top:1.4rem; font-size:.82rem; }

/* ---- Quizli (Pinguin-Maskottchen + Emote-Badge + Sprechblase) ----
   .lk-quizli__svg ist der Bild-Anker — trägt das <img>, plus ggf. den
   onerror-SVG-Fallback (Bestandsschutz für alte Geräte/Caches). */
.lk-quizli{ display:flex; align-items:center; gap:.6rem; }
.lk-quizli__svg{ position:relative; flex:0 0 auto; line-height:0; }
.lk-quizli__img{ display:block; width:72px; height:66px; object-fit:contain;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.15)); }
/* Emote-Badge an der Maskottchen-Ecke: native Auflösung nur 32x38px — größer
   als ~28px wirkt sichtbar pixelig, darum hart gedeckelt. */
.lk-quizli__emote{ position:absolute; right:-6px; bottom:-4px; width:26px; height:31px;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.lk-quizli__bubble{ position:relative; margin:0; max-width:26rem; background:var(--paper);
  border:1.5px solid var(--line); border-radius:var(--radius-card); padding:.6rem .85rem;
  font-weight:600; color:var(--ink); box-shadow:var(--shadow); }
.lk-quizli__bubble::before{ content:""; position:absolute; left:-8px; top:50%;
  width:12px; height:12px; background:var(--paper); border-left:1.5px solid var(--line);
  border-bottom:1.5px solid var(--line); transform:translateY(-50%) rotate(45deg); }
.lk-quizli--dance .lk-quizli__svg{ animation:lk-dance 900ms var(--ease) 2; transform-origin:50% 90%; }
@keyframes lk-dance{
  0%,100%{ transform:rotate(0); } 25%{ transform:rotate(-6deg); } 75%{ transform:rotate(6deg); }
}
/* Emote-Wechsel sanft einblenden — NUR mit Bewegungswunsch; reduced-motion
   zeigt das Badge sofort/statisch. */
@media (prefers-reduced-motion: no-preference){
  .lk-quizli__emote{ animation:lk-emote-in 220ms var(--ease); }
  @keyframes lk-emote-in{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:scale(1); } }
}
@media (prefers-reduced-motion: reduce){
  .lk-quizli--dance .lk-quizli__svg{ animation:none; }
  .lk-quizli__emote{ animation:none; }
}

/* ---- Kennzahlen (Streak / gesamt / fällig) ---- */
.lk-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.6rem; margin:0 0 1.1rem; }
.lk-stat{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-card);
  padding:.7rem .8rem; display:flex; flex-direction:column; gap:.15rem; }
.lk-stat__big{ font-size:1.5rem; font-weight:800; color:var(--head); }
.lk-stat__lbl{ font-size:.82rem; font-weight:700; color:var(--muted); }
.lk-stat--due{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--paper)); }

/* ---- Leitner-Regal ---- */
.lk-shelf h3{ margin:.2rem 0 .5rem; color:var(--head); font-size:1.02rem; }
.lk-shelf__row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:.5rem; }
.lk-box{ background:var(--soft); border:1.5px solid var(--line); border-radius:var(--radius-btn);
  border-bottom-width:5px; padding:.55rem .5rem .5rem; text-align:center;
  display:flex; flex-direction:column; gap:.1rem; }
.lk-box__n{ font-size:1.25rem; font-weight:800; color:var(--head); }
.lk-box__lbl{ font-size:.8rem; font-weight:700; color:var(--ink); }
.lk-box__days{ font-size:.72rem; color:var(--muted); }
.lk-box--new{ border-style:dashed; }

/* ---- Aktionen / Empty-State ---- */
.lk-actions{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin:1rem 0 .4rem; }
.lk-start{ font-size:1.05rem; }
.lk-muted{ color:var(--muted); font-size:.88rem; margin:.3rem 0; }
.lk-sync{ margin-top:1.6rem; border-top:1px solid var(--line); padding-top:.7rem; }
.lk-empty{ background:var(--paper); border:1.5px dashed var(--line); border-radius:var(--radius-card);
  padding:1.1rem 1.2rem; margin:.4rem 0 1rem; }
.lk-empty h3{ margin:0 0 .35rem; color:var(--head); }
.lk-empty .btn{ display:inline-flex; align-items:center; margin-top:.6rem; text-decoration:none; }

/* ---- Runde: Karte ---- */
.lk-round__head{ display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap; margin-bottom:.6rem; }
.lk-round__head h2{ margin:0; color:var(--head); }
.lk-round__prog{ color:var(--muted); font-weight:700; font-size:.9rem; }
.lk-card{ background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius-card);
  padding:1rem 1.1rem; box-shadow:var(--shadow); }
.lk-card__meta{ display:flex; justify-content:space-between; gap:.8rem; flex-wrap:wrap; margin-bottom:.5rem; }
.lk-card__box{ background:var(--soft); border:1px solid var(--line); border-radius:var(--radius-pill);
  padding:.15rem .6rem; font-size:.8rem; font-weight:700; color:var(--ink); }
.lk-card__src{ font-size:.8rem; color:var(--muted); font-weight:700; }
.lk-card__q{ font-size:clamp(1.1rem,2.8vw,1.35rem); font-weight:700; color:var(--ink); outline:none; }
.lk-card__a{ margin-top:.8rem; padding:.7rem .9rem; border:1.5px solid var(--line);
  border-radius:var(--radius-btn); background:color-mix(in srgb,var(--accent) 9%,var(--paper)); }
.lk-card__a-lbl{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); font-weight:700; margin-bottom:.2rem; }
.lk-card__a-txt{ font-weight:600; }

/* ---- Bewertungs-Buttons (44px via base.css, klare Farbsemantik) ---- */
.lk-knew{ background:color-mix(in srgb,var(--ok) 18%,transparent); border:1.5px solid var(--ok); }
.lk-miss{ background:color-mix(in srgb,var(--warn) 18%,transparent); border:1.5px solid var(--warn); }

/* ---- Auflösung / Feedback (nie nacktes „falsch") ---- */
.lk-fb{ display:none; margin:.8rem 0 0; padding:.7rem .9rem; border-radius:var(--radius-btn);
  border:1.5px solid var(--line); background:var(--soft); }
.lk-fb.show{ display:block; }
.lk-fb--good{ border-color:var(--ok); background:color-mix(in srgb,var(--ok) 10%,var(--paper)); }
.lk-fb--redo{ border-color:var(--warn); background:color-mix(in srgb,var(--warn) 10%,var(--paper)); }
.lk-fb__ans{ font-weight:800; }

/* ---- Runden-Bilanz ---- */
.lk-summary{ margin:.6rem 0 0; padding-left:1.2rem; }
.lk-summary li{ margin:.25rem 0; }

/* ---- Streak-Meilenstein (3/7/14 Tage) — dezenter Gold-Akzent auf der
   Streak-Zeile der Bilanz, NICHT als Textfarbe (Gold auf Weiß <4.5:1),
   nur als Rand/Hintergrund-Füllung; Text bleibt --head/--ink. ---- */
.lk-summary li.lk-summary__milestone{ background:color-mix(in srgb,var(--reward) 16%,var(--paper));
  border:1.5px solid var(--reward); border-radius:var(--radius-btn); padding:.3rem .6rem; font-weight:700; }