/* AUTOMATISCH KOPIERT aus HeldenEngine – hier NICHT bearbeiten!
   Änderungen gehören in HeldenEngine/engine.css und werden mit
   `node HeldenEngine/sync.js` verteilt. */
/* =============================================================================
   HeldenEngine – Grundstyles der gemeinsamen Bausteine
   -----------------------------------------------------------------------------
   Deckt nur ab, was die Engine an Ansichten mitbringt: Shop, Sticker-Album,
   Einführung, Banner, Phasen-Kopfzeilen, Schreib- und Sortier-Aufgaben.

   Die App bindet diese Datei VOR ihrem eigenen styles.css ein – so kann jede
   App alles überschreiben, ohne dass hier etwas angepasst werden muss.
   Farben kommen aus zwei Variablen, die die App setzt:
       --he-akzent   Hauptfarbe der App
       --he-flaeche  Kartenhintergrund
   ========================================================================== */

:root {
  --he-akzent: #4caf50;
  --he-akzent-dunkel: #388e3c;
  --he-flaeche: #ffffff;
  --he-rand: rgba(0, 0, 0, 0.1);
  --he-text: #17233a;
  --he-text-leise: #6b7280;
  --he-radius: 16px;
  --he-schatten: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Einheitliche Emoji-Grafiken (Twemoji) */
img.twe {
  height: 1em;
  width: 1em;
  vertical-align: -0.12em;
  display: inline-block;
}

/* --- Konfetti ------------------------------------------------------------ */
.confetti-piece,
.confetti {
  position: fixed;
  top: -20px;
  z-index: 9999;
  pointer-events: none;
  border-radius: 2px;
  animation: he-fall linear forwards;
}
@keyframes he-fall {
  to { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}

/* --- Rückmeldung über dem Spielfeld -------------------------------------- */
.feedback-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  z-index: 900;
  pointer-events: none;
}
.feedback-overlay[hidden] { display: none; }
.feedback-content {
  background: var(--he-flaeche);
  border-radius: 20px;
  padding: 18px 26px;
  font-size: 20px;
  font-weight: 700;
  color: var(--he-text);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: he-pop 0.25s ease;
  max-width: 88vw;
  text-align: center;
}
.feedback-icon { font-size: 30px; }
@keyframes he-pop {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* --- Banner-Reihe (Streak, Tagesaufgabe, Wochenziel) --------------------- */
.banner-row {
  display: flex;
  gap: 8px;
  padding: 0 12px 10px;
  overflow-x: auto;
}
.banner-card {
  flex: 1 0 30%;
  min-width: 104px;
  background: var(--he-flaeche);
  border-radius: var(--he-radius);
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--he-schatten);
  cursor: pointer;
  border: 2px solid transparent;
}
.banner-card.weekly { border-color: var(--he-akzent); }
.banner-icon { font-size: 22px; }
.banner-text {
  font-size: 15px;
  font-weight: 700;
  color: var(--he-text);
  line-height: 1.15;
}
.banner-text small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--he-text-leise);
}
.wc-bar {
  margin-top: 4px;
  height: 4px;
  background: var(--he-rand);
  border-radius: 3px;
  overflow: hidden;
}
.wc-bar > div {
  height: 100%;
  background: var(--he-akzent);
  border-radius: 3px;
}

/* --- Phasen-Kopfzeile in der Level-Liste --------------------------------- */
.phase-header {
  padding: 12px 14px 6px;
  grid-column: 1 / -1;
}
.phase-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.phase-name { font-weight: 800; color: var(--he-text); }
.phase-progress { font-size: 12px; color: var(--he-text-leise); }
.phase-bar {
  margin-top: 6px;
  height: 6px;
  background: var(--he-rand);
  border-radius: 4px;
  overflow: hidden;
}
.phase-bar > div {
  height: 100%;
  background: var(--he-akzent);
  border-radius: 4px;
  transition: width 0.3s ease;
}
.phase-header.complete .phase-name { color: var(--he-akzent-dunkel); }
.phase-header.locked { opacity: 0.55; }
.phase-section {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 0 12px 8px;
  grid-column: 1 / -1;
}
.phase-section.locked { opacity: 0.45; }
.level-tile {
  aspect-ratio: 1;
  border: 2px solid var(--he-rand);
  border-radius: 14px;
  background: var(--he-flaeche);
  font-weight: 800;
  color: var(--he-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 2px;
}
.level-tile.completed { border-color: var(--he-akzent); background: color-mix(in srgb, var(--he-akzent) 12%, #fff); }
.level-tile.locked { opacity: 0.45; }
.level-tile .level-num { font-size: 17px; }
.level-tile .level-stars { font-size: 9px; line-height: 1; }

/* --- Frage und Anker ----------------------------------------------------- */
.question-anchor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 10px 0;
}
.question-anchor.tappable { cursor: pointer; }
.anchor-img { font-size: 62px; line-height: 1.1; }
.anchor-word {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--he-text);
}
.anchor-hint { font-size: 17px; }
.anchor-hint-only { font-size: 14px; color: var(--he-text-leise); }
.anchor-sentence {
  font-size: 20px;
  font-weight: 600;
  color: var(--he-text);
  text-align: center;
  line-height: 1.5;
}
.anchor-sentence .gap {
  display: inline-block;
  min-width: 68px;
  border-bottom: 3px solid var(--he-akzent);
  margin: 0 4px;
  vertical-align: baseline;
}
.anchor-sentence .gap.filled { border-bottom-color: var(--he-akzent-dunkel); font-weight: 800; }
.question-target { font-size: 46px; text-align: center; }
.dots-hint { text-align: center; color: var(--he-text-leise); font-size: 14px; }

/* --- Wort eintippen ------------------------------------------------------ */
.type-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 16px;
}
.type-input {
  width: 100%;
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  padding: 12px;
  border: 3px solid var(--he-rand);
  border-radius: 14px;
  background: var(--he-flaeche);
  color: var(--he-text);
}
.type-input:focus { outline: none; border-color: var(--he-akzent); }
.type-input.correct { border-color: #4caf50; background: #e8f5e9; }
.type-input.wrong { border-color: #e53935; animation: he-shake 0.4s; }
@keyframes he-shake {
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.type-feedback { min-height: 26px; text-align: center; font-size: 16px; }
.type-feedback.ok { color: #2e7d32; font-weight: 700; }
.type-feedback.bad { color: #c62828; }
.type-feedback.hint { color: var(--he-text-leise); }
.type-compare { font-size: 24px; font-weight: 700; letter-spacing: 2px; }
.type-compare .ok { color: #2e7d32; }
.type-compare .bad { color: #c62828; text-decoration: underline wavy; }
.type-solution { margin-top: 6px; font-size: 16px; color: var(--he-text); }

/* --- Sortieren ----------------------------------------------------------- */
.sort-slot,
.sort-target {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  min-height: 54px;
  margin: 10px 16px;
  padding: 8px;
  border: 2px dashed var(--he-rand);
  border-radius: 14px;
}
.sort-slot.letters { gap: 3px; }
.sort-slot.correct { border-color: #4caf50; background: #e8f5e9; }
.sort-slot.wrong { border-color: #e53935; animation: he-shake 0.4s; }
.sort-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 0 16px;
}
.sort-chip {
  font-size: 19px;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 12px;
  border: 2px solid var(--he-rand);
  background: var(--he-flaeche);
  color: var(--he-text);
  cursor: pointer;
}
.sort-chip.placed { border-color: var(--he-akzent); }
.sort-chip.used { opacity: 0.35; pointer-events: none; }
.sort-pool.letters .sort-chip { padding: 10px 12px; }

/* --- Shop ---------------------------------------------------------------- */
.shop-content { padding: 12px; }
.shop-section { margin-bottom: 18px; }
.shop-section h3 { margin: 0 0 8px; font-size: 17px; color: var(--he-text); }
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}
.shop-item {
  border: 2px solid var(--he-rand);
  border-radius: var(--he-radius);
  background: var(--he-flaeche);
  padding: 10px 6px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.shop-item.active { border-color: var(--he-akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--he-akzent) 25%, transparent); }
.shop-item.owned { border-color: var(--he-akzent-dunkel); }
.shop-item.cant { opacity: 0.5; }
.si-icon { font-size: 34px; }
.si-name { font-size: 13px; font-weight: 700; color: var(--he-text); }
.si-price,
.si-status { font-size: 12px; color: var(--he-text-leise); }
.shop-coins { font-weight: 800; color: var(--he-text); }

/* --- Sticker-Album ------------------------------------------------------- */
.stickers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(98px, 1fr));
  gap: 10px;
  padding: 12px;
}
.sticker-tile {
  border: 2px solid var(--he-rand);
  border-radius: var(--he-radius);
  background: var(--he-flaeche);
  padding: 12px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.sticker-tile.locked { opacity: 0.4; filter: grayscale(1); }
.stk-icon { font-size: 34px; }
.stk-name { font-size: 12px; font-weight: 600; color: var(--he-text); }

/* --- Einführung beim ersten Start ---------------------------------------- */
.onboarding-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
}
.onb-mascot { font-size: 84px; }
.onboarding-wrap h1 { font-size: 26px; margin: 0; color: var(--he-text); }
.onboarding-wrap p { font-size: 17px; color: var(--he-text-leise); margin: 0; max-width: 320px; }
.onb-dots { display: flex; gap: 8px; }
.onb-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--he-rand);
}
.onb-dot.active { background: var(--he-akzent); }
.onb-skip {
  background: none;
  border: none;
  color: var(--he-text-leise);
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
}

/* --- Abzeichen im Eltern-Bereich ----------------------------------------- */
.badges-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.badge-tile {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--he-akzent) 12%, #fff);
  color: var(--he-text);
}
.badge-icon { font-size: 15px; }
.badge-empty { font-size: 14px; color: var(--he-text-leise); }

/* --- Aufnahme-Studio ----------------------------------------------------- */
.audio-recorder-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.audio-recorder-modal {
  background: var(--he-flaeche);
  border-radius: 20px;
  padding: 20px;
  width: 100%;
  max-width: 360px;
  text-align: center;
  max-height: 84vh;
  overflow-y: auto;
}
.audio-recorder-modal h3 { margin: 0 0 8px; color: var(--he-text); }
.rec-text {
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--he-rand);
  margin-bottom: 6px;
  cursor: pointer;
  font-size: 14px;
  text-align: left;
  color: var(--he-text);
}
.rec-button {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: none;
  background: #e53935;
  color: #fff;
  font-size: 34px;
  cursor: pointer;
  margin: 10px auto;
  display: block;
}
.rec-button.recording { animation: he-puls 1s infinite; }
@keyframes he-puls {
  50% { transform: scale(1.1); opacity: 0.75; }
}
.rec-actions { display: flex; gap: 8px; }
.rec-actions .big-btn { flex: 1; }

/* --- Mengenbilder in Fünferblöcken --------------------------------------- */
/* Zählaufgaben liefern die Bilder als Fünfergruppen mit Leerzeichen dazwischen
   („🍎🍎🍎🍎🍎 🍎🍎"). Bei dieser Schriftgröße ist ein normales Leerzeichen zu
   schmal, um als Blockgrenze zu wirken – erst der größere Abstand macht aus der
   Reihe eine Struktur, die man auf einen Blick erfasst. */
/* Grundgröße der Mengenbilder. Ohne sie erben die Emojis die Textgröße der
   Karte und ein Erstklässler soll 14 Kirschen in 18-px-Bildchen abzählen.
   Apps mit eigener .bild-row-Regel (RechenHelden) überschreiben das. */
.bild-row {
  font-size: 30px;
  line-height: 1.4;
}
/* Ein Fünferblock bleibt zusammen; umgebrochen wird nur ZWISCHEN den Blöcken.
   Bei 20 Bildern ergibt das auf einem Handy zwei Reihen à zehn – dieselbe
   Struktur wie das Zwanzigerfeld im Mathebuch. */
.mengen-gruppe {
  display: inline-block;
  white-space: nowrap;
  margin: 0 0.45em 0.1em 0;
}
/* Der Abstand hinter dem LETZTEN Block zählt bei der Umbruchrechnung mit und
   drückte die Reihe über die Kante – zwei Blöcke, die zusammen hineinpassen,
   landeten dadurch untereinander. */
.mengen-gruppe:last-child { margin-right: 0; }
/* Die Bildgröße richtet sich nach der Menge, damit zwei Fünferblöcke
   nebeneinander passen und die Struktur „fünf und zwei" sichtbar bleibt. */
.mengen-block.viele { font-size: 0.68em; }
.mengen-block.sehr-viele { font-size: 0.45em; }
/* „Wovon siehst du mehr?": die zwei Mengen stehen untereinander und beginnen
   linksbündig an derselben Kante – dann ist die längere Reihe zu sehen, ohne
   sie abzuzählen. Nebeneinander wäre der Anfang der zweiten Menge erst zu
   suchen, und der Größenvergleich ginge verloren. */
.mengen-vergleich {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25em;
}

/* --- Ansichten dürfen scrollen, nicht schrumpfen ------------------------- */
/* Die Ansichten sind flex-Container in voller Bildschirmhöhe. Wird der Inhalt
   höher als der Bildschirm, quetscht der Browser die Kinder zusammen, statt zu
   scrollen – auf einem 360-px-Handy schrumpfte die Banner-Reihe so von 60 px
   auf 8 px und war praktisch unsichtbar. flex-shrink:0 erzwingt stattdessen
   das Scrollen, das die Ansicht ohnehin erlaubt. */
.view > * { flex-shrink: 0; }

/* --- Karteninhalte ------------------------------------------------------- */
/* Die Engine baut die Inhalte von Klassen-, Welt- und Extra-Karten aus <span>.
   Ohne display:block fließen sie inline zusammen und ergeben Wortsalat
   („StarterErste Wörter"). Fällt nur auf schmalen Displays auf, weil breite
   Karten den Umbruch kaschieren – deshalb steht es hier und nicht im App-CSS. */
.class-card > .class-icon,
.class-card > .class-name,
.class-card > .class-age,
.class-card > .class-range,
.class-card > .class-progress,
.class-card > .class-stars,
.extra-card > .extra-icon,
.extra-card > .extra-title,
.extra-card > .extra-sub {
  display: block;
}

/* Mehrere Streak-Hinweise nebeneinander brauchen Luft, sonst steht dort
   „5 Tage in FolgeHeute: 12 Aufgaben". */
.streak-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 0 12px;
}
.streak-pill { display: inline-block; }

/* --- Hilfsklassen -------------------------------------------------------- */
.hint-hidden { opacity: 0.18; pointer-events: none; }
.celebrate { animation: he-jump 0.6s ease; }
@keyframes he-jump {
  30% { transform: translateY(-16px) scale(1.1); }
  60% { transform: translateY(0) scale(1); }
}
.full-width { grid-column: 1 / -1; }