/* ==========================================================================
   Küchentisch · Spiel-Darstellung (Ticket L4)
   Balken, Serie, Abzeichen, Plopp, Fest, Konfetti.
   Nur Variablen aus basis.css (Spezifikation-Stil §3.2): keine festen Farben, Schriften
   oder Schatten. Maße in rem. Ruhe (data-ruhe / prefers-reduced-motion) schaltet
   Konfetti, Flamme und Animationen ab.
   ========================================================================== */

/* ---------- Fortschrittsbalken ---------- */
.balken-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--a3); margin-bottom: var(--a1); font-weight: 700; }
.balken-text { margin-left: auto; text-align: right; }
.balken { height: .9rem; border-radius: var(--pille); background: var(--tisch); border: 1px solid var(--linie); overflow: hidden; }
.balken__fuell {
  display: block; height: 100%; width: calc(var(--anteil, 0) * 100%); border-radius: var(--pille);
  background-color: var(--primaer); transform-origin: left; animation: balken-ein var(--dauer-3) var(--ease) both;
  background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--karte) 25%, transparent) 0 .375rem, transparent .375rem .75rem);
}
.balken--butter .balken__fuell { background-color: var(--butter); }
.balken--tomate .balken__fuell { background-color: var(--tomate); }
@keyframes balken-ein { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Serie (die Pflanze wächst mit den Tagen) ---------- */
.serie { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--a3); }
.serie__bild { width: 4.5rem; height: 4.5rem; }
.serie__inhalt { min-width: 0; }
.serie__name { font-weight: 700; overflow-wrap: anywhere; }
.serie__person { display: flex; align-items: center; gap: var(--a2); margin-top: var(--a1); }
.serie__person .person { width: 1.5rem; height: 1.5rem; font-size: .8rem; }
.serie__zahl { font-weight: 800; font-size: 2rem; line-height: 1; display: flex; align-items: center; gap: var(--a1); }
.serie__zahl .symbol { color: var(--tomate); width: 1.6rem; height: 1.6rem; fill: var(--tomate-hell); }
.serie__satz { display: block; margin-top: var(--a1); }
.serie__tage { display: flex; flex-wrap: wrap; gap: .375rem; margin: var(--a2) 0 0; padding: 0; list-style: none; }
.serie__tag { width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid var(--rand); display: grid; place-items: center; color: var(--text); }
.serie__tag .symbol { width: .85rem; height: .85rem; stroke-width: 3.5; }
.serie__tag--ja { background: var(--primaer); border-color: var(--primaer); color: var(--primaer-text); }
.serie__tag--heute { border-color: var(--tomate); border-style: dashed; }
.serie__tag--joker { background: var(--butter); border-color: var(--butter); color: var(--butter-text); }
.serie__tag--pause { background: var(--tisch); border-color: var(--leise); color: var(--leise); }
/* Gerissen: ruhig, kein Alarm. Die Pflanze wartet. */
.serie--ruht .serie__bild { opacity: .7; filter: saturate(.5); }
.serie__flamme-flackern .symbol { animation: flackern 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes flackern { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.08) rotate(2deg); } }

/* ---------- Abzeichen ---------- */
.abzeichen-reihe { display: flex; flex-wrap: wrap; gap: var(--a4); }
.abzeichen { display: grid; justify-items: center; align-content: start; gap: var(--a1); text-align: center; width: 5.5rem; }
.abzeichen__scheibe {
  position: relative; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%;
  background: var(--butter); color: var(--butter-text); border: .25rem solid var(--karte);
  box-shadow: 0 0 0 .1875rem var(--butter), var(--schatten);
}
.abzeichen__scheibe .symbol { width: 2rem; height: 2rem; }
.spiel-zeichen { font-size: 1.75rem; line-height: 1; }
.abzeichen__name { font-size: .8rem; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.abzeichen__punkte { display: flex; gap: .1875rem; }
.abzeichen__punkte i { width: .5rem; height: .5rem; border-radius: 50%; border: 2px solid var(--rand); }
.abzeichen__punkte i.an { background: var(--text); border-color: var(--text); }
.abzeichen--gesperrt { width: 7.5rem; }
.abzeichen--gesperrt .abzeichen__scheibe { background: var(--tisch); color: var(--leise); box-shadow: 0 0 0 .1875rem var(--linie); }
.abzeichen__bedingung { font-size: .8rem; line-height: 1.3; }
.abzeichen__bedingung .symbol { display: inline-block; width: .9rem; height: .9rem; vertical-align: -.15em; margin-right: .2rem; }
.abzeichen--neu .abzeichen__scheibe::after {
  content: ""; position: absolute; inset: -.375rem; border-radius: 50%; border: .1875rem solid var(--butter);
  animation: glanz 1.6s var(--ease) 2;
}
@keyframes glanz { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }

/* ---------- Belohnung: Rückfall ohne JavaScript (normaler Text) ---------- */
.spiel-hinweis { display: flex; align-items: center; gap: var(--a2); margin: 0 0 var(--a3); font-weight: 700; }
.spiel-hinweis--plopp .symbol { color: var(--text); fill: var(--butter); stroke: var(--text); }
.spiel-hinweis--fest { display: grid; justify-items: start; gap: var(--a2); font-weight: 400; }
.spiel-hinweis__klein { font-size: .8rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--tomate); margin: 0; }
.spiel-hinweis__titel { margin: 0; }
.spiel-hinweis--fest .spiel-hinweis__text { margin: 0; }

/* ---------- Belohnung: Plopp (klein, schwebt, nimmt keinen Fokus) ---------- */
.plopp {
  position: fixed; left: 50%; bottom: calc(var(--leiste-h, 4.25rem) + env(safe-area-inset-bottom, 0px) + var(--a4)); z-index: 60;
  display: flex; align-items: center; gap: var(--a2); max-width: calc(100vw - 2rem); padding: .55rem 1.1rem .55rem .8rem; border-radius: var(--pille);
  background: var(--text); color: var(--papier); font-weight: 800; box-shadow: var(--schatten-hoch);
  transform: translate(-50%, 0); animation: plopp-ein var(--dauer-3) var(--ease-hupf) both; pointer-events: none;
}
.plopp[data-geht] { animation: plopp-aus var(--dauer-2) var(--ease) both; }
.plopp .symbol { color: var(--butter); fill: var(--butter); stroke: var(--butter); }
@keyframes plopp-ein { from { transform: translate(-50%, 140%) scale(.8); opacity: 0; } to { transform: translate(-50%, 0) scale(1); opacity: 1; } }
@keyframes plopp-aus { to { transform: translate(-50%, 60%); opacity: 0; } }
@media (min-width: 900px) { .plopp { bottom: var(--a5); } }

/* ---------- Belohnung: Fest (Karte als <dialog>) ---------- */
.fest { border: 0; padding: 0; margin: auto; width: min(24rem, calc(100vw - 2rem)); background: var(--karte); color: var(--text); border-radius: var(--rund-l); box-shadow: var(--schatten-hoch); overflow: visible; }
.fest::backdrop { background: color-mix(in srgb, var(--text) 60%, transparent); }
.fest[open] { animation: fest-ein var(--dauer-3) var(--ease-hupf); }
.fest__innen { padding: var(--a6) var(--a5) var(--a5); text-align: center; display: grid; gap: var(--a3); justify-items: center; position: relative; }
.fest__bild { width: 7.5rem; height: 7.5rem; }
.fest__klein { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 900; color: var(--tomate); margin: 0; }
.fest h2 { font-size: 1.75rem; margin: 0; }
.fest p { margin: 0; }
@keyframes fest-ein { from { transform: scale(.7) translateY(2rem); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Konfetti (nur beim Fest, 1,3 s) ---------- */
.konfetti { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.konfetti i {
  position: absolute; top: 40%; left: 50%; width: .6rem; height: .9rem; border-radius: .125rem; background: var(--c, var(--butter));
  animation: konfetti 1.3s var(--ease) forwards; animation-delay: var(--d, 0s);
}
@keyframes konfetti {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--x, 0), var(--y, 7.5rem)) rotate(var(--r, 360deg)); opacity: 0; }
}

/* ---------- Ruhe: Geräteeinstellung oder Schalter „Bewegung: Ruhig“ ---------- */
@media (prefers-reduced-motion: reduce) {
  .konfetti { display: none; }
  .serie__flamme-flackern .symbol, .balken__fuell, .plopp, .plopp[data-geht], .fest[open], .abzeichen--neu .abzeichen__scheibe::after { animation: none; }
}
:root[data-ruhe="an"] .konfetti { display: none; }
:root[data-ruhe="an"] .serie__flamme-flackern .symbol,
:root[data-ruhe="an"] .balken__fuell,
:root[data-ruhe="an"] .plopp,
:root[data-ruhe="an"] .plopp[data-geht],
:root[data-ruhe="an"] .fest[open],
:root[data-ruhe="an"] .abzeichen--neu .abzeichen__scheibe::after { animation: none; }