/* ============================================================
   Templum Latinum – Design-System
   Warme Latein-Palette, Duolingo-artige 3D-Buttons, Nunito.
   Wird von den neuen Seiten (index, Test, Bestenliste) genutzt.
   ============================================================ */

:root {
  --bg: #fdf6e9;
  --bg-deco: #f7e9cf;
  --card: #ffffff;
  --card-border: #f0e2c8;
  --ink: #4a3a28;
  --muted: #a08c72;

  --primary: #f79f1b;
  --primary-dark: #d97f06;
  --green: #58cc02;
  --green-dark: #46a302;
  --red: #ff4b4b;
  --red-dark: #d8332f;
  --gold: #ffc800;
  --sky: #1cb0f6;
  --sky-dark: #1899d6;
  --purple: #b98ae8;

  --radius: 22px;
  --shadow-card: 0 4px 14px rgba(120, 90, 40, 0.10);
}

* { box-sizing: border-box; touch-action: manipulation; }

html, body { overflow-x: hidden; }

body {
  margin: 0;
  font-family: "Nunito", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* dezente Säulen-Deko unten */
body::before {
  content: "";
  position: fixed;
  inset: auto 0 0 0;
  height: 120px;
  background:
    radial-gradient(circle at 12% 100%, var(--bg-deco) 0 55px, transparent 56px),
    radial-gradient(circle at 50% 100%, var(--bg-deco) 0 75px, transparent 76px),
    radial-gradient(circle at 88% 100%, var(--bg-deco) 0 50px, transparent 51px);
  pointer-events: none;
  z-index: -1;
}

h1, h2, h3 { font-weight: 800; margin: 0; }

/* ===================== Kopfzeile ===================== */

.topbar {
  width: 100%;
  background: var(--card);
  border-bottom: 3px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 22px;
  gap: 14px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 900;
  font-size: 22px;
  white-space: nowrap;
}

.brand img { width: 44px; height: 44px; object-fit: contain; }

.topnav { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }

.topnav a {
  text-decoration: none;
  color: var(--muted);
  font-weight: 800;
  font-size: 15px;
  padding: 9px 14px;
  border-radius: 14px;
  transition: background 150ms, color 150ms;
}

.topnav a:hover { background: var(--bg); color: var(--ink); }

.topnav a.active {
  color: var(--primary-dark);
  background: #fdeed3;
  border: 2px solid #f8d9a0;
}

/* Burger nur auf schmalen Screens */
#navToggle { display: none; }
.burger { display: none; cursor: pointer; font-size: 30px; padding: 4px 10px; user-select: none; }

@media (max-width: 720px) {
  .burger { display: block; }
  .topnav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--card);
    flex-direction: column;
    padding: 10px 16px 16px;
    border-bottom: 3px solid var(--card-border);
  }
  #navToggle:checked ~ .topnav { display: flex; }
  .topnav a { font-size: 18px; padding: 12px; text-align: center; }
}

/* ===================== Buttons ===================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 16px;
  padding: 14px 26px;
  font-family: inherit;
  font-weight: 900;
  font-size: 18px;
  color: #fff;
  background: var(--primary);
  box-shadow: 0 5px 0 var(--primary-dark);
  cursor: pointer;
  text-decoration: none;
  transition: transform 100ms, box-shadow 100ms, filter 150ms;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn:active { transform: translateY(5px); box-shadow: 0 0 0 var(--primary-dark); }
.btn:hover { filter: brightness(1.06); }

.btn.green { background: var(--green); box-shadow: 0 5px 0 var(--green-dark); }
.btn.green:active { box-shadow: 0 0 0 var(--green-dark); }
.btn.sky { background: var(--sky); box-shadow: 0 5px 0 var(--sky-dark); }
.btn.sky:active { box-shadow: 0 0 0 var(--sky-dark); }
.btn.ghost {
  background: var(--card);
  color: var(--muted);
  box-shadow: 0 5px 0 var(--card-border);
  border: 2px solid var(--card-border);
}
.btn.ghost:active { box-shadow: 0 0 0 var(--card-border); }
.btn.big { font-size: 22px; padding: 18px 36px; border-radius: 20px; }
.btn:disabled { opacity: .5; cursor: default; filter: none; transform: none; box-shadow: 0 5px 0 var(--primary-dark); }
.btn.green:disabled { box-shadow: 0 5px 0 var(--green-dark); }

/* ===================== Einstellungs-Bildschirm ===================== */
/* Wiederverwendbar über practice-settings.js (Lektion, Wortart, Anzahl) */
.settings-card {
  width: min(100%, 480px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: stretch;
}
.settings-title { margin: 0; text-align: center; font-size: 22px; color: var(--ink); }
.setting-block { display: flex; flex-direction: column; gap: 8px; }
.setting-label {
  font-weight: 900;
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.setting-select { width: 100%; }
.pill-group { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  border: 2px solid var(--card-border);
  background: var(--card);
  color: var(--muted);
  font-family: inherit;
  font-weight: 800;
  font-size: 15px;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 80ms, background 150ms, color 150ms, border-color 150ms, box-shadow 150ms;
  -webkit-tap-highlight-color: transparent;
}
.pill:hover { border-color: var(--sky); }
.pill:active { transform: translateY(1px); }
.pill.active {
  background: var(--sky);
  border-color: var(--sky-dark);
  color: #fff;
  box-shadow: 0 3px 0 var(--sky-dark);
}
.settings-card .btn.big { align-self: center; margin-top: 4px; }
.settings-info { text-align: center; margin: 0; }

/* ===================== Karten ===================== */

.card {
  background: var(--card);
  border: 2px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 22px;
}

main {
  width: min(100% - 32px, 980px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 24px 0 80px;
}

/* ===================== Maskottchen ===================== */

.mascot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mascot .stage { width: 100%; }

.mascot .stage img,
.mascot .stage video {
  width: 100%;
  height: auto;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

/* Die Videos haben weißen Hintergrund – multiply blendet ihn in die Seite ein.
   Der Hauch Blur glättet die letzte Restkante beim Verkleinern. */
.mascot .stage video {
  mix-blend-mode: multiply;
  filter: blur(0.3px);
}

.mascot .bubble {
  position: absolute;
  bottom: calc(100% - 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: 18px;
  padding: 10px 16px;
  font-weight: 800;
  font-size: 16px;
  white-space: nowrap;
  max-width: 70vw;
  white-space: normal;
  width: max-content;
  text-align: center;
  opacity: 0;
  transition: opacity 200ms;
  pointer-events: none;
  z-index: 5;
}

.mascot .bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-top-color: var(--ink);
}

.mascot .bubble.show { opacity: 1; }

/* Zu wenig Platz oben (Maskottchen nah am Header)? Dann Blase UNTER das
   Maskottchen klappen – sonst wird sie vom Header abgeschnitten (v. a. Handy). */
.mascot .bubble.below { bottom: auto; top: calc(100% - 6px); }
.mascot .bubble.below::after {
  top: auto; bottom: 100%;
  border-top-color: transparent; border-bottom-color: var(--ink);
}

.mascot.idle .stage img,
.mascot.idle .stage video { animation: mascotFloat 3.2s ease-in-out infinite; }

@keyframes mascotFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

.mascot.bounce .stage img,
.mascot.bounce .stage video { animation: mascotBounce 700ms ease; }
@keyframes mascotBounce {
  0% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-26px) scale(1.06) rotate(-3deg); }
  55% { transform: translateY(0) scale(0.96, 0.92); }
  75% { transform: translateY(-10px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}

.mascot.shake .stage img,
.mascot.shake .stage video { animation: mascotShake 600ms ease; }
@keyframes mascotShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px) rotate(-4deg); }
  40% { transform: translateX(10px) rotate(4deg); }
  60% { transform: translateX(-7px) rotate(-3deg); }
  80% { transform: translateX(7px) rotate(2deg); }
}

/* ===================== Schwebende Effekte ===================== */

.float-up {
  position: absolute;
  font-weight: 900;
  font-size: 26px;
  color: var(--green-dark);
  pointer-events: none;
  animation: floatUp 1.1s ease-out forwards;
  z-index: 50;
  text-shadow: 0 2px 0 #fff;
}

@keyframes floatUp {
  0% { opacity: 0; transform: translateY(8px) scale(0.7); }
  20% { opacity: 1; transform: translateY(-6px) scale(1.15); }
  100% { opacity: 0; transform: translateY(-58px) scale(1); }
}

.confetti-piece {
  position: fixed;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  pointer-events: none;
  z-index: 900;
  animation: confettiFall linear forwards;
}

@keyframes confettiFall {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  100% { opacity: 0.6; transform: translate(var(--cx), var(--cy)) rotate(var(--cr)); }
}

/* ===================== Startseite ===================== */

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 26px;
}

.hero .mascot { width: min(300px, 64vw); }

.hero-text h1 { font-size: clamp(30px, 5vw, 44px); }
.hero-text p { font-size: 18px; color: var(--muted); font-weight: 700; margin: 8px 0 18px; }

.stat-row {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.stat-card {
  flex: 1 1 260px;
  max-width: 430px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stat-card .stat-title {
  font-size: 15px;
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.level-big { font-size: 34px; font-weight: 900; }

.xp-bar-wrap {
  background: #f1e6cf;
  border-radius: 999px;
  height: 26px;
  overflow: hidden;
  position: relative;
}

.xp-bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffd34d, var(--primary));
  transition: width 700ms cubic-bezier(.22,1.2,.36,1);
}

.xp-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  color: var(--ink);
}

.streak-flame { font-size: 44px; line-height: 1; }
.streak-num { font-size: 34px; font-weight: 900; color: #e2641b; }
.streak-card-inner { display: flex; align-items: center; gap: 14px; }
.streak-zero .streak-flame { filter: grayscale(1); opacity: 0.6; }
.streak-zero .streak-num { color: var(--muted); }

/* ===================== Test-Seite ===================== */

.picker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.lection-btn {
  width: 86px;
  height: 74px;
  border: 0;
  border-radius: 18px;
  background: var(--card);
  border: 2px solid var(--card-border);
  box-shadow: 0 5px 0 var(--card-border);
  font-family: inherit;
  font-size: 21px;
  font-weight: 900;
  color: var(--ink);
  cursor: pointer;
  transition: transform 120ms, box-shadow 120ms;
}

.lection-btn:hover { transform: translateY(-3px); }
.lection-btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--card-border); }
.lection-btn .count { display: block; font-size: 12px; color: var(--muted); font-weight: 800; }

.lection-btn.locked {
  opacity: 0.45;
  cursor: not-allowed;
  background: #efe7d6;
}

/* „Meine Fehler"-Kachel: breiter & farblich abgesetzt, damit sie auffällt. */
.lection-btn.weak {
  width: auto;
  min-width: 180px;
  padding: 0 18px;
  font-size: 17px;
  color: #fff;
  background: #e8743b;
  border-color: #c25a27;
  box-shadow: 0 5px 0 #c25a27;
}
.lection-btn.weak .count { color: #ffe6d6; }
.lection-btn.weak:active { box-shadow: 0 0 0 #c25a27; }

.diff-row { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

.diff-btn {
  flex: 1 1 200px;
  max-width: 270px;
  border: 0;
  border-radius: 20px;
  padding: 20px;
  font-family: inherit;
  font-weight: 900;
  font-size: 21px;
  color: #fff;
  cursor: pointer;
  transition: transform 100ms, box-shadow 100ms;
}

.diff-btn small { display: block; font-size: 14px; font-weight: 800; opacity: 0.9; margin-top: 4px; }
.diff-btn.easy { background: var(--green); box-shadow: 0 6px 0 var(--green-dark); }
.diff-btn.medium { background: var(--primary); box-shadow: 0 6px 0 var(--primary-dark); }
.diff-btn.hard { background: var(--red); box-shadow: 0 6px 0 var(--red-dark); }
.diff-btn:active { transform: translateY(6px); box-shadow: 0 0 0 transparent !important; }

/* Fortschritt + Combo */
.test-top {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
}

.progress-wrap {
  flex: 1;
  height: 20px;
  background: #f1e6cf;
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #8ee000, var(--green));
  border-radius: 999px;
  transition: width 400ms cubic-bezier(.22,1.2,.36,1);
}

.combo-chip {
  font-weight: 900;
  font-size: 17px;
  color: #e2641b;
  background: #fff1dc;
  border: 2px solid #ffd9a3;
  padding: 5px 13px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.6);
  transition: 200ms;
}

.combo-chip.show { opacity: 1; transform: scale(1); }

.quit-link {
  text-decoration: none;
  font-size: 26px;
  color: var(--muted);
  font-weight: 900;
  padding: 2px 8px;
}

/* Frage-Layout */
.quiz {
  width: 100%;
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 20px;
  align-items: start;
}

/* kein position:sticky hier – das würde einen Stacking-Context erzeugen
   und das mix-blend-mode der Videos aushebeln (weißer Kasten) */
/* Platz über dem Maskottchen lassen, damit die Sprechblase (schwebt nach oben)
   nicht die Fortschrittsleiste berührt */
.quiz .mascot { width: 170px; margin-top: 56px; }
.quiz .mascot .bubble { max-width: 220px; }

@media (max-width: 720px) {
  .quiz { grid-template-columns: 1fr; gap: 8px; }
  .quiz .mascot { width: 88px; margin: 56px auto 0; }
  .quiz .mascot .bubble { font-size: 14px; max-width: 86vw; }
  .quiz { margin-top: 8px !important; }
  .answers { margin-top: 12px; gap: 9px; }
  .answer-btn { padding: 13px 16px; font-size: 17px; }
  .grammatic { min-height: 0; font-size: 16px; }
}

.question-card { display: flex; flex-direction: column; gap: 6px; align-items: center; }

.asked-word {
  font-size: clamp(34px, 7vw, 52px);
  font-weight: 900;
  text-align: center;
  animation: popIn 350ms cubic-bezier(.22,1.4,.36,1);
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}

.grammatic {
  font-style: italic;
  color: var(--muted);
  font-weight: 700;
  font-size: 18px;
  min-height: 24px;
  text-align: center;
}

.answers {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 18px;
}

.answer-btn {
  width: 100%;
  border: 2px solid var(--card-border);
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 4px 0 var(--card-border);
  padding: 16px 18px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  cursor: pointer;
  transition: transform 100ms, box-shadow 100ms, background 150ms, border-color 150ms;
  text-align: center;
}

.answer-btn:hover { background: #fffaf0; }
.answer-btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--card-border); }

.answer-btn.correct {
  background: #d7ffb8;
  border-color: var(--green);
  box-shadow: 0 4px 0 var(--green-dark);
  color: #2f6b00;
  animation: answerPop 400ms;
}

.answer-btn.wrong {
  background: #ffdfdc;
  border-color: var(--red);
  box-shadow: 0 4px 0 var(--red-dark);
  color: #a31712;
  animation: answerShake 400ms;
}

.answer-btn:disabled { cursor: default; }

@keyframes answerPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@keyframes answerShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  50% { transform: translateX(8px); }
  75% { transform: translateX(-5px); }
}

/* Schwer: Texteingabe */
.type-row { display: flex; gap: 10px; width: 100%; margin-top: 18px; flex-wrap: wrap; }

.type-row .type-input,
.nickname-row .type-input { flex: 1 1 220px; }

.type-input {
  border: 2px solid var(--card-border);
  border-radius: 16px;
  padding: 14px 18px;
  font-family: inherit;
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
  outline: none;
  background: var(--card);
  -webkit-appearance: none; /* iOS-Suchfeld nicht eigenwillig beschneiden */
  appearance: none;
  min-width: 0;             /* darf in Flex-Zeilen schrumpfen statt zu überlaufen */
}

.type-input:focus { border-color: var(--primary); }
.type-input.correct { border-color: var(--green); background: #ecffdd; }
.type-input.wrong { border-color: var(--red); background: #ffe9e7; animation: answerShake 400ms; }

/* Lösung-Banner bei falscher Antwort */
.reveal {
  width: 100%;
  background: #fff3f2;
  border: 2px solid #ffc9c5;
  border-radius: 16px;
  padding: 14px 18px;
  margin-top: 14px;
  text-align: center;
  animation: popIn 250ms;
}

.reveal .label { color: var(--red-dark); font-weight: 900; font-size: 15px; }
.reveal .solution { font-size: 21px; font-weight: 900; margin-top: 4px; }

/* Feste Feedback-Leiste unten – „Weiter" ist immer ohne Scrollen erreichbar */
.feedback-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--card);
  border-top: 2px solid var(--card-border);
  box-shadow: 0 -6px 18px rgba(120, 90, 40, 0.10);
  padding: 14px 16px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
  animation: barUp 200ms ease;
}
@keyframes barUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

.feedback-bar .reveal {
  margin: 0;
  flex: 1 1 auto;
  max-width: 380px;
  padding: 10px 16px;
}
.feedback-bar .btn { flex: 0 0 auto; }

/* Damit die letzte Antwortmöglichkeit nicht hinter der Leiste verschwindet */
#quizScreen { padding-bottom: 96px; }

/* ===================== Endbildschirm ===================== */

.end-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
}

.end-screen .mascot { width: min(230px, 55vw); }

.end-title { font-size: clamp(28px, 5vw, 38px); text-align: center; }

.end-stats { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; width: 100%; }

.end-stat {
  flex: 1 1 130px;
  max-width: 200px;
  text-align: center;
  padding: 16px;
}

.end-stat .num { font-size: 30px; font-weight: 900; }
.end-stat .lbl { font-size: 13px; font-weight: 900; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.end-stat.good .num { color: var(--green-dark); }
.end-stat.bad .num { color: var(--red-dark); }
.end-stat.xp .num { color: var(--primary-dark); }

.end-level { width: min(100%, 440px); }

.end-buttons { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

.wrong-list { width: min(100%, 440px); }
.wrong-list h3 { color: var(--red-dark); margin-bottom: 10px; font-size: 17px; }
.wrong-list .row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--card-border);
  font-weight: 800;
}
.wrong-list .row span:last-child { color: var(--muted); text-align: right; }

/* Level-Up Overlay */
.levelup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(74, 58, 40, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 800;
  animation: fadeIn 250ms;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.levelup-box {
  background: var(--card);
  border-radius: 28px;
  padding: 34px 44px;
  text-align: center;
  animation: popIn 450ms cubic-bezier(.22,1.4,.36,1);
  max-width: 86vw;
}

.levelup-box img { width: 130px; }
.levelup-box .lvl { font-size: 40px; font-weight: 900; color: var(--primary-dark); }
.levelup-box p { font-weight: 800; color: var(--muted); margin: 6px 0 18px; }

/* ===================== Bestenliste ===================== */

.lb-table { width: min(100%, 640px); padding: 8px 20px; }

.lb-row {
  display: grid;
  grid-template-columns: 54px 1fr 86px 70px;
  align-items: center;
  gap: 10px;
  padding: 12px 6px;
  border-bottom: 2px solid #f6eedd;
  font-weight: 800;
  font-size: 17px;
}

.lb-row:last-child { border-bottom: 0; }

.lb-row.head {
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 2px solid var(--card-border);
}

.lb-row .place {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900;
  background: #f4ecdb;
}

.lb-row .place.gold { background: linear-gradient(135deg, #ffe27a, #ffc800); }
.lb-row .place.silver { background: linear-gradient(135deg, #eeeeee, #c4c4c4); }
.lb-row .place.bronze { background: linear-gradient(135deg, #ffb87a, #d98c4a); }

.lb-row .lvl { color: var(--primary-dark); font-weight: 900; }
.lb-row .strk { color: #e2641b; }

.lb-row.me {
  background: #fff6e3;
  border-radius: 14px;
  border-bottom: 0;
  outline: 2px solid #ffd9a3;
}

.nickname-card {
  width: min(100%, 640px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nickname-row { display: flex; gap: 10px; flex-wrap: wrap; }
.nickname-row .type-input { flex: 1 1 200px; }

.hint { color: var(--muted); font-weight: 700; font-size: 14px; }

.toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%) translateY(90px);
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  border-radius: 999px;
  padding: 12px 26px;
  z-index: 950;
  transition: transform 350ms cubic-bezier(.22,1.2,.36,1);
}

.toast.show { transform: translateX(-50%) translateY(0); }

/* ===================== Menü-Seiten (Übungen/Tests) ===================== */

.menu-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(100%, 560px);
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: 0 5px 0 var(--card-border);
  padding: 18px 22px;
  transition: transform 120ms, box-shadow 120ms;
}

.menu-item:hover { transform: translateY(-3px); }
.menu-item:active { transform: translateY(4px); box-shadow: 0 0 0 var(--card-border); }
.menu-item .emoji { font-size: 38px; }
.menu-item .title { font-size: 20px; font-weight: 900; }
.menu-item .desc { font-size: 14px; font-weight: 700; color: var(--muted); margin-top: 2px; }
.menu-item .arrow { margin-left: auto; font-size: 24px; color: var(--muted); font-weight: 900; }

/* ===================== Vokabeln Anschauen ===================== */

.browse-card {
  width: min(100%, 560px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.browse-counter {
  font-weight: 900;
  font-size: 14px;
  color: var(--muted);
  letter-spacing: 1px;
}

.browse-german {
  font-size: clamp(20px, 4.5vw, 28px);
  font-weight: 800;
  color: var(--green-dark);
  margin-top: 8px;
  min-height: 34px;
}

.browse-german.hidden-meaning { filter: blur(10px); cursor: pointer; }

.browse-nav {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===================== Lexikon (Suche) ===================== */

/* Umschalter Schullexikon ↔ Großlexikon (gleitet/„swoosht") */
.lex-toggle {
  position: relative;
  display: flex;
  width: min(100%, 420px);
  background: var(--card);
  border: 2px solid var(--card-border);
  border-radius: 999px;
  padding: 5px;
  box-shadow: var(--shadow-card);
  user-select: none;
}
.lex-toggle .seg {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-weight: 900;
  font-size: 15px;
  color: var(--muted);
  padding: 11px 8px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 200ms;
  -webkit-tap-highlight-color: transparent;
}
.lex-toggle .seg.active { color: #fff; }
.lex-thumb {
  position: absolute;
  top: 5px;
  height: calc(100% - 10px);
  left: 5px;
  width: 100px; /* von JS exakt gesetzt */
  background: var(--primary);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--primary-dark);
  z-index: 0;
  transition: left 300ms cubic-bezier(.22, 1.2, .36, 1), width 300ms cubic-bezier(.22, 1.2, .36, 1),
              background 220ms, box-shadow 220ms;
}
.lex-toggle.gross .lex-thumb { background: var(--sky); box-shadow: 0 3px 0 var(--sky-dark); }

.search-wrap {
  width: min(100%, 560px);
  position: relative;
}

.search-row { display: flex; gap: 10px; }
.search-row .type-input { flex: 1 1 auto; width: 100%; }

.suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--card);
  border: 2px solid var(--card-border);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  z-index: 50;
  display: none;
}

.suggestions .sug {
  padding: 12px 18px;
  font-weight: 700;
  cursor: pointer;
  border-bottom: 1px solid #f6eedd;
}

.suggestions .sug:last-child { border-bottom: 0; }
.suggestions .sug:hover { background: #fffaf0; }

.result-card {
  width: min(100%, 560px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.result-card .latin { font-size: 24px; font-weight: 900; }
.result-card .gram { font-style: italic; color: var(--muted); font-weight: 700; }
.result-card .german { font-size: 18px; font-weight: 800; color: var(--green-dark); }

.result-card .lek {
  align-self: flex-start;
  margin-top: 6px;
  background: #fdeed3;
  border: 2px solid #f8d9a0;
  color: var(--primary-dark);
  font-weight: 900;
  font-size: 13px;
  border-radius: 999px;
  padding: 3px 12px;
}

/* Großlexikon: Trefferkarte „deine Form zuerst" */
.result-card.lex-hit { gap: 2px; align-items: flex-start; text-align: left; }
.result-card .lex-form {
  font-size: 26px;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.1;
}
.result-card .lex-primary {
  font-weight: 800;
  color: var(--sky-dark);
  font-size: 15px;
}
.result-card .lex-dict {
  margin-top: 8px;
  font-size: 18px;
  color: var(--ink);
}
.result-card .lex-dict b { font-weight: 900; }
.result-card .lex-de {
  margin-top: 2px;
  color: var(--green-dark);
  font-weight: 800;
  font-size: 17px;
}
.result-card .lex-more {
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
}

/* ===================== Memory ===================== */

.memory-card {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  width: 180px;
  padding: 10px;
  margin: 10px;
  border-radius: 16px;
  position: absolute;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  word-break: break-word;
  z-index: 10;
}

.memory-card.latinCard { background: var(--sky); box-shadow: 0 5px 0 var(--sky-dark); }
.memory-card.germanCard { background: var(--red); box-shadow: 0 5px 0 var(--red-dark); }

.memory-card.dragged { cursor: grabbing; z-index: 20; }
.memory-card.colliding { outline: 3px dashed #fff; transform: scale(1.03); }

.memory-card.correctMatch {
  background: var(--green);
  box-shadow: 0 5px 0 var(--green-dark);
  animation: cardDisappearing 2.5s forwards;
  pointer-events: none;
}

@keyframes cardDisappearing {
  0% { opacity: 1; }
  20% { transform: scale(1.08); }
  100% { opacity: 0; transform: scale(0.7); }
}

@media (max-width: 650px), (max-height: 850px) {
  .memory-card { height: 64px; width: 150px; font-size: 13px; }
}

.memory-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  margin-top: 30px;
}