/* Beanlings Booster · gemeinsame Effekte (js/effekte.js, 03.11.2026). Nur transform/opacity animiert. */
.fx-lage{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden;contain:strict}
.fx-zahl{position:absolute;left:0;top:0;z-index:20;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:1px;
  transform:translate(-50%,-50%);white-space:nowrap;animation:fx-steig .9s cubic-bezier(.2,.8,.3,1) forwards;will-change:transform,opacity;--fx-f:#8fe07a}
.fx-zahl b{font-family:'Jersey 10',monospace;font-weight:400;font-size:26px;line-height:1;color:var(--fx-f);
  text-shadow:2px 2px 0 #1a0f08,-1px -1px 0 #1a0f08,1px -1px 0 #1a0f08,-1px 1px 0 #1a0f08}
.fx-zahl.gross b{font-size:36px}
.fx-zahl small{font-size:12px;line-height:1.15;color:#fff6e0;background:#1a0f08d9;border:1px solid var(--fx-f);padding:1px 6px;border-radius:3px}
.fx-zahl.plus{--fx-f:#8fe07a}
.fx-zahl.minus{--fx-f:#ff7a6a}
.fx-zahl.gold{--fx-f:#f2c35b}
.fx-zahl.info{--fx-f:#f3e3c3}
.fx-zahl.info b{font-size:18px}
@keyframes fx-steig{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}14%{opacity:1;transform:translate(-50%,-60%) scale(1.12)}
  28%{transform:translate(-50%,-70%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-150%) scale(1)}}
.fx-zahl.ruhig{animation-name:fx-ruhig}
@keyframes fx-ruhig{0%{opacity:0}12%{opacity:1}80%{opacity:1}100%{opacity:0}}
.fx-pop{animation:fx-pop .32s cubic-bezier(.3,1.6,.5,1)}
.fx-pop-gross{animation:fx-pop-gross .46s cubic-bezier(.3,1.6,.5,1)}
@keyframes fx-pop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes fx-pop-gross{0%{transform:scale(1)}35%{transform:scale(1.3)}65%{transform:scale(.96)}100%{transform:scale(1)}}
.fx-glanz{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;overflow:hidden;
  box-shadow:0 0 0 3px var(--fx-f),0 0 14px 2px var(--fx-f);animation:fx-glanz .6s ease-out forwards}
.fx-glanz::before{content:'';position:absolute;top:-20%;bottom:-20%;width:45%;left:-60%;
  background:linear-gradient(100deg,#fff0 0%,#fffc 50%,#fff0 100%);transform:skewX(-14deg);animation:fx-wisch .5s ease-out forwards}
@keyframes fx-glanz{0%{opacity:0}20%{opacity:1}100%{opacity:0}}
@keyframes fx-wisch{100%{transform:translateX(360%) skewX(-14deg)}}
.fx-glanz.ruhig::before{display:none}
.fx-wackeln{animation:fx-wackeln .3s steps(6)}
@keyframes fx-wackeln{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.fx-banner{position:absolute;left:50%;top:calc(64px + env(safe-area-inset-top));z-index:30;pointer-events:none;display:flex;flex-direction:column;align-items:center;
  min-width:180px;max-width:calc(100vw - 32px);padding:6px 16px;text-align:center;background:#1a0f08f0;border:3px solid var(--fx-f,#f2c35b);
  box-shadow:4px 4px 0 #0009;color:#fff6e0;transform:translateX(-50%);animation:fx-banner 1.6s cubic-bezier(.2,.9,.3,1.1) forwards;--fx-f:#f2c35b}
.fx-banner b{font-family:'Jersey 10',monospace;font-weight:400;font-size:28px;line-height:1.05;color:var(--fx-f)}
.fx-banner small{font-size:13px;color:#f3e3c3}
@keyframes fx-banner{0%{opacity:0;transform:translate(-50%,-30px) scale(.9)}12%{opacity:1;transform:translate(-50%,0) scale(1.04)}20%{transform:translate(-50%,0) scale(1)}
  82%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-12px)}}
.fx-banner.ruhig{animation-name:fx-ruhig}
.fx-funke{position:absolute;left:0;top:0;width:6px;height:6px;z-index:19;pointer-events:none;animation:fx-funke .8s ease-out forwards}
@keyframes fx-funke{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.4)}}
@media (prefers-reduced-motion:reduce){.fx-pop,.fx-pop-gross,.fx-wackeln,.fx-funke{animation:none!important}}