/* Saft (A.22.24.0): gemeinsame Effekte der Würfel-Bauspiele — js/saft.js. Alles kurz (0,3–1,5 s), nichts blockiert. */
.saft-ebene { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 80; }
.saft-ebene > * { position: fixed; pointer-events: none; }
.saft-flug { margin: 0 !important; z-index: 2; box-shadow: 0 12px 24px rgba(0, 0, 0, .25); will-change: transform; }

/* aufsteigende Zahlen */
.saft-zahl { z-index: 4; font-weight: 900; font-size: 1.05rem; line-height: 1; white-space: nowrap; color: #15803d;
  -webkit-text-stroke: 4px #fff; paint-order: stroke fill; text-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.saft-zahl.gross { font-size: 1.7rem; color: #b45309; }
.saft-zahl.minus { color: #be123c; }
.saft-zahl.gold { color: #b45309; }
.saft-zahl.lila { color: #6d28d9; }

/* Funken / Partikel */
.saft-funke { z-index: 3; display: block; border-radius: 2px; }
.saft-funke.stern { clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.saft-funke.kreis { border-radius: 50%; }
.saft-funke.tropfen { border-radius: 50% 50% 50% 0; }
.saft-funke.blase { border-radius: 50%; background: transparent !important; border: 2px solid currentColor; box-shadow: inset -2px -2px 0 rgba(255, 255, 255, .7); }
/* A.22.38.0 (Saft Stufe 5): Teilchen je Welt — Dampf (Küche), Splitter (Stadt: Steinchen) */
.saft-funke.dampf { border-radius: 50%; opacity: .85; filter: blur(1.5px); }
.saft-funke.splitter { clip-path: polygon(20% 0, 100% 30%, 80% 100%, 0 70%); }

/* Stufe 6: Fertiges eines Mitspielers springt aus seinem Chip */
.saft-abzeichen { z-index: 4; display: grid; place-items: center; }
.saft-abzeichen img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .3)); }
.saft-abzeichen b { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); font-size: 1.15rem; font-weight: 900; line-height: 1; color: #b45309;
  -webkit-text-stroke: 4px #fff; paint-order: stroke fill; white-space: nowrap; }

/* großer Auftritt (fertig!) */
.saft-auftritt { z-index: 5; display: grid; place-items: center; }
.saft-auftritt img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35)); }
.saft-strahlen { position: absolute; inset: -55%; border-radius: 50%; z-index: 0;
  background: repeating-conic-gradient(from 0deg, var(--saft-strahl, rgba(253, 224, 71, .55)) 0 10deg, transparent 10deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%);
  animation: saft-drehen 3s linear infinite; }
.saft-auftritt.gross .saft-strahlen { inset: -75%; background: repeating-conic-gradient(from 0deg, var(--saft-strahl, rgba(250, 204, 21, .7)) 0 9deg, transparent 9deg 18deg); }
.saft-auftritt-text { position: absolute; z-index: 2; bottom: -14px; left: 50%; transform: translateX(-50%); font-size: 2rem; font-weight: 900; line-height: 1; color: #b45309;
  -webkit-text-stroke: 5px #fff; paint-order: stroke fill; white-space: nowrap; }
.saft-auftritt small { position: absolute; z-index: 2; bottom: -34px; left: 50%; transform: translateX(-50%); padding: 2px 8px; border-radius: 99px; background: #fff;
  font-weight: 800; font-size: .8rem; white-space: nowrap; color: #3b3355; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.saft-auftritt small:empty { display: none; }
@keyframes saft-drehen { to { transform: rotate(360deg); } }

/* Band in der Mitte */
.saft-band { z-index: 6; left: 50%; top: 26%; display: flex; gap: 10px; align-items: center; width: max-content; max-width: min(92vw, 30rem); padding: 10px 18px 10px 12px; border-radius: 20px;
  background: #fff; color: #2b2540; box-shadow: 0 0 0 3px #facc15, 0 18px 40px rgba(0, 0, 0, .28); transform: translateX(-50%); }
.saft-band img { width: 52px; height: 52px; object-fit: contain; flex: none; }
.saft-band div { display: grid; gap: 1px; }
.saft-band strong { font-size: 1.25rem; font-weight: 900; line-height: 1.15; }
.saft-band small { font-size: .88rem; font-weight: 700; color: #6b6488; }
.saft-band.kombo { top: calc(26% + 84px); padding: 6px 16px; background: linear-gradient(135deg, #7c3aed, #db2777); color: #fff; box-shadow: 0 10px 26px rgba(124, 58, 237, .4); }
.saft-band.kombo strong { font-size: 1.1rem; letter-spacing: .02em; }
.saft-band.gruen { box-shadow: 0 0 0 3px #22c55e, 0 18px 40px rgba(0, 0, 0, .28); }

/* kleine Anstöße an echten Elementen */
.saft-hops { animation: saft-hops .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes saft-hops { 0% { transform: scale(1); } 35% { transform: scale(1.28); } 70% { transform: scale(.96); } 100% { transform: scale(1); } }
.saft-sinkt { animation: saft-sinkt .45s ease-out; }
@keyframes saft-sinkt { 40% { transform: translateY(3px) scale(.94); color: #be123c; } }
.saft-zaehlt { color: #15803d; }
.saft-wartet { opacity: 0; } /* A.22.38.0: Fremdes wartet, bis sein Bild vom Chip angeflogen ist */
.saft-landen { animation: saft-landen .5s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes saft-landen { 0% { transform: translateY(-60%) scale(1.15); opacity: 0; } 55% { transform: translateY(0) scale(1.12, .88); opacity: 1; } 80% { transform: translateY(-6%) scale(.97, 1.04); } 100% { transform: none; } }
.saft-auf { animation: saft-auf .5s cubic-bezier(.3, 1.3, .5, 1) both; }
@keyframes saft-auf { 0% { transform: perspective(600px) rotateY(80deg) scale(.85); opacity: 0; } 100% { transform: none; opacity: 1; } }
.saft-komplett { animation: saft-komplett .75s ease-out; }
@keyframes saft-komplett { 0% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0); } 30% { box-shadow: 0 0 0 4px rgba(250, 204, 21, .9), 0 0 18px 6px rgba(250, 204, 21, .5); transform: scale(1.04); } 100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0); transform: none; } }
.saft-stempel { position: relative; }
.saft-stempel::after { content: '✓'; position: absolute; right: 4px; top: 50%; z-index: 3; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -15px;
  border-radius: 50%; background: #16a34a; color: #fff; font-weight: 900; font-size: 1.1rem; box-shadow: 0 0 0 3px #fff, 0 4px 10px rgba(0, 0, 0, .3);
  animation: saft-stempel .9s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes saft-stempel { 0% { transform: scale(2.6) rotate(-25deg); opacity: 0; } 25% { transform: scale(.9) rotate(4deg); opacity: 1; } 35% { transform: scale(1.05); } 75% { transform: scale(1); opacity: 1; } 100% { transform: scale(.8); opacity: 0; } }
.saft-leuchten { animation: saft-leuchten 1.1s ease-out; }
@keyframes saft-leuchten { 0%, 100% { filter: none; } 25% { filter: brightness(1.35) drop-shadow(0 0 8px rgba(250, 204, 21, .95)); transform: scale(1.12); } }
/* ein Knopf, der jetzt wichtig wird, winkt kurz (sanfter als hüpfen — Knöpfe sind breit) */
.saft-wink { animation: saft-wink .7s ease-out; }
@keyframes saft-wink { 30% { transform: scale(1.06); box-shadow: 0 0 0 4px rgba(34, 197, 94, .55), 0 0 22px rgba(34, 197, 94, .45); } }
/* ein Kästchen füllt sich (Verzögerung je Kästchen über --saft-d) — vor seinem Einsatz sieht es noch leer aus */
.saft-neu { animation: saft-neu .38s cubic-bezier(.3, 1.6, .5, 1) var(--saft-d, 0ms) backwards; }
@keyframes saft-neu { 0% { transform: scale(.3); background: #fff; border-color: #c7c3e6; } 60% { transform: scale(1.45); } 100% { transform: scale(1); } }
/* noch EIN Schritt bis fertig: leises Glühen */
.saft-fast { animation: saft-fast 1.8s ease-in-out infinite; }
@keyframes saft-fast { 0%, 100% { box-shadow: var(--schatten-klein, 0 2px 6px rgba(0, 0, 0, .1)), 0 0 0 2px rgba(250, 204, 21, .55); } 50% { box-shadow: var(--schatten-klein, 0 2px 6px rgba(0, 0, 0, .1)), 0 0 0 3px rgba(250, 204, 21, .95), 0 0 18px 4px rgba(250, 204, 21, .45); } }

@media (prefers-reduced-motion: reduce) {
  .saft-hops, .saft-wink, .saft-sinkt, .saft-landen, .saft-auf, .saft-komplett, .saft-leuchten, .saft-neu, .saft-strahlen { animation: none !important; }
  .saft-fast { animation: none; box-shadow: 0 0 0 3px rgba(250, 204, 21, .9); }
  .saft-stempel::after { animation: saft-blende 1s both; }
  @keyframes saft-blende { 0%, 100% { opacity: 0; } 20%, 80% { opacity: 1; } }
}

/* ---------- Du bist dran (A.22.26.0, SEIN „Man sieht noch nicht genug, dass man selber an der Reihe ist“) ---------- */
body.sb-ich-dran #tisch { position: relative; box-shadow: inset 0 2px 14px rgba(0, 0, 0, .35), 0 0 0 3px #4ade80, 0 0 22px 4px rgba(74, 222, 128, .5); animation: saft-dran 1.8s ease-in-out infinite; }
body.sb-ich-dran #tisch::before { content: 'Du bist dran'; position: absolute; z-index: 2; top: -11px; left: 50%; transform: translateX(-50%); padding: 2px 12px; border-radius: 99px;
  background: #16a34a; color: #fff; font-weight: 900; font-size: .78rem; letter-spacing: .03em; line-height: 1.35; white-space: nowrap; box-shadow: 0 3px 8px rgba(0, 0, 0, .25); pointer-events: none; }
body.sb-ich-dran #meinStand { box-shadow: 0 0 0 3px #4ade80, var(--schatten-klein, 0 2px 6px rgba(0, 0, 0, .1)); }
body.sb-ich-dran .sb-anweisung:not(.nichts) { color: #166534; }
@keyframes saft-dran { 50% { box-shadow: inset 0 2px 14px rgba(0, 0, 0, .35), 0 0 0 4px #86efac, 0 0 30px 8px rgba(74, 222, 128, .65); } }

/* ---------- Was wer gemacht hat (A.22.26.0): Schild mit der letzten Aktion am Mitspieler-Chip ---------- */
.sb-g-zeile { display: flex; align-items: center; gap: 5px; min-width: 0; }
.sb-g-zeile strong { min-width: 0; }
.sb-g-tat { flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 0 6px 0 2px; border-radius: 99px; background: #ede9fe; color: #5b21b6;
  font-size: .68rem; font-weight: 800; line-height: 15px; white-space: nowrap; margin: -2px 0; }
.sb-g-tat img { width: 14px; height: 14px; margin: -1px 0; object-fit: contain; }
.sb-g-tat.gold { background: #fef3c7; color: #92400e; }
.sb-g-tat.grau { background: #f1f5f9; color: #475569; }
.sb-g-tat.neu { animation: saft-hops .45s cubic-bezier(.3, 1.6, .5, 1); }
@media (prefers-reduced-motion: reduce) { body.sb-ich-dran #tisch, .sb-g-tat.neu { animation: none; } }

/* Dunkelmodus „Graphit“ (A.23.3.0, Grundlage in basis.css) */
[data-thema="dunkel"] .sb-g-tat { background: #2d2640; color: #c4b5fd; }
[data-thema="dunkel"] .sb-g-tat.gold { background: #3a2c0c; color: #fcd34d; }
[data-thema="dunkel"] .sb-g-tat.grau { background: #2e2e2e; color: #cbd5e1; }