/* Fetzige Oberfläche für 10–14Jährige: Comic-Look, Wackel-Buttons, Wolken, Meter. */
body.kids {
  background: radial-gradient(circle at 50% 10%, #fff3c4 0%, #ffe0a3 40%, #ff9f57 100%);
  min-height: 100vh;
}

.kids-head {
  padding: 22px 18px 6px;
  text-align: center;
}

.kids-logo { display: flex; align-items: center; justify-content: center; gap: 10px; }
.kids-cloud { font-size: 34px; animation: drift 4s ease-in-out infinite; }
.kids-head h1 {
  margin: 0;
  font-size: 2.1rem;
  font-weight: 900;
  letter-spacing: 1px;
  color: #173a2c;
  text-shadow: 3px 3px 0 rgba(255, 122, 26, .35);
}
.kids-sub { margin: 4px 0 0; color: #6b4a2b; font-size: .95rem; }

.kids-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 640px;
  margin: 18px auto 10px;
  padding: 0 16px;
}

.fart {
  border: 3px solid #143124;
  border-radius: 16px;
  background: #fff7e2;
  padding: 14px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 0 rgba(20, 49, 36, .28);
  transition: transform .12s, background .2s;
  animation: wobble .6s ease-in-out infinite alternate;
}
.fart:nth-child(2n) { animation-delay: .3s; }
.fart:nth-child(3n) { animation-delay: .5s; }

.fart .emoji { font-size: 30px; }
.fart .name { font-weight: 800; color: #173a2c; font-size: .9rem; }

.fart:hover { transform: translateY(-3px); }
.fart:active, .fart.blast { transform: scale(.9) rotate(-3deg); }
.fart.blast { background: #ffd0a0; }

/* Farb-Abwechslung pro Reihe */
.fart[data-voice="1"], .fart[data-voice="6"], .fart[data-voice="9"] { background: #d9f3c7; }
.fart[data-voice="3"], .fart[data-voice="8"], .fart[data-voice="12"] { background: #f6d9c9; }
.fart[data-voice="4"], .fart[data-voice="7"], .fart[data-voice="10"] { background: #e9f7d5; }

.kids-pitch {
  display: flex; align-items: center; gap: 10px;
  max-width: 640px; margin: 6px auto 14px; padding: 12px 16px;
  background: rgba(255, 255, 255, .65);
  border: 2px solid #143124; border-radius: 14px;
}
.kids-pitch-label { font-weight: 800; color: #173a2c; }
#pitch { flex: 1; accent-color: #ff7a1a; }
#pitchValue { font-variant-numeric: tabular-nums; font-weight: 700; color: #6b4a2b; }
.kids-pitch-hint { font-size: .75rem; color: #8a6a4c; }

.kids-meter { max-width: 640px; margin: 0 auto 16px; padding: 0 16px; }
.meter-bar {
  height: 10px; border-radius: 6px; background: rgba(20, 49, 36, .15); overflow: hidden;
}
.meter-fill {
  height: 100%; width: 0%; border-radius: 6px;
  background: linear-gradient(90deg, #ff7a1a, #ffd15c);
  transition: width .25s;
}
.meter-text { display: block; margin-top: 6px; font-size: .85rem; color: #6b4a2b; }

.kids-foot {
  display: flex; gap: 14px; justify-content: center;
  padding: 10px 16px 24px; font-size: .85rem; color: #6b4a2b;
}

.kids-clouds { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.puff {
  position: absolute;
  font-size: 26px;
  opacity: 0;
  animation: puffup 1.2s ease-out forwards;
}

@keyframes wobble { from { transform: translateY(0); } to { transform: translateY(3px); } }
@keyframes drift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes puffup {
  0% { opacity: .9; transform: translateY(0) scale(.7); }
  100% { opacity: 0; transform: translateY(-90px) scale(1.4); }
}

@media (max-width: 420px) {
  .kids-grid { grid-template-columns: repeat(2, 1fr); }
}