:root {
  --bg: #fff8e7;
  --primary: #ff8a3d;
  --primary-dark: #e06b1f;
  --correct: #4caf50;
  --wrong: #e64545;
  --text: #333;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Comic Sans MS", "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: var(--primary);
  color: white;
}

.screen { display: none; padding: 1rem; max-width: 700px; margin: 0 auto; }
.screen.active { display: block; }

.button-row { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

.big-button, .icon-button {
  font-size: 1.2rem;
  padding: 1rem 1.5rem;
  border-radius: 1rem;
  border: none;
  background: var(--primary);
  color: white;
  cursor: pointer;
  min-height: 3rem;
  min-width: 3rem;
}
.big-button:hover, .icon-button:hover { background: var(--primary-dark); }
.big-button:disabled { background: #ccc; cursor: not-allowed; }

.antwort-button.richtig { background: var(--correct); }
.antwort-button.falsch { background: var(--wrong); }

.quiz-header { display: flex; justify-content: space-between; align-items: center; }

#animal-reveal { position: relative; width: 220px; height: 220px; margin: 1rem auto; }
#animal-emoji { font-size: 10rem; text-align: center; line-height: 220px; }
#cover-grid {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
}
#cover-grid .cover-tile { background: var(--bg); border: 1px solid #fff; }
#cover-grid .cover-tile.revealed { background: transparent; pointer-events: none; }

#hilfe-box { background: #fff3cd; border: 2px solid #ffe08a; border-radius: 0.75rem; padding: 1rem; margin-top: 1rem; }

.badge-item, .album-item { display: inline-block; text-align: center; margin: 0.5rem; font-size: 3rem; }

.urkunde { border: 4px double var(--primary); padding: 2rem; text-align: center; margin: 1rem 0; }

#streak-anzeige { font-size: 1.2rem; font-weight: bold; color: var(--primary-dark); }

#lob-popup {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: white;
  font-size: 1.4rem;
  font-weight: bold;
  padding: 0.75rem 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 10;
  animation: lob-pop 1.5s ease;
}
#lob-popup[hidden] { display: none; }
@keyframes lob-pop {
  0% { opacity: 0; transform: translateX(-50%) translateY(-1rem); }
  15% { opacity: 1; transform: translateX(-50%) translateY(0); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

#ergebnis-sterne { font-size: 3rem; text-align: center; margin: 0.5rem 0; }
#ergebnis-sterne .stern-leer { opacity: 0.35; }

#tagesziel {
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  background: #fff3cd;
  border: 2px solid #ffe08a;
  border-radius: 0.75rem;
  padding: 0.75rem;
  margin-top: 1rem;
}

#badge-fortschritt, #album-fortschritt {
  margin: 1rem 0;
  font-size: 1.1rem;
  text-align: center;
}
.fortschritt-balken {
  background: #eee;
  border-radius: 1rem;
  height: 1.25rem;
  overflow: hidden;
  margin-top: 0.35rem;
}
.fortschritt-balken-innen {
  background: var(--primary);
  height: 100%;
  transition: width 0.4s ease;
}

@media print {
  header, footer { display: none !important; }
  .screen { display: none !important; }
  #screen-urkunde { display: block !important; }
}