/* Balatro-Gefühl: Karten schweben und fächern, Gewinnkarten springen, Zahlen-Tags, kippende Hände */
.card { transform-origin: 50% 85%; transition: scale .22s cubic-bezier(.3,1.6,.5,1); animation: float 3.4s ease-in-out var(--fd, 0s) infinite; }
.card.deal { animation: deal .6s cubic-bezier(.2,1.35,.4,1) both, float 3.4s ease-in-out var(--fd, 0s) infinite; }
.card.flip { animation: flip .5s cubic-bezier(.3,1.5,.5,1) both, float 3.4s ease-in-out var(--fd, 0s) infinite; }
.card.scored { animation: scored .55s cubic-bezier(.3,1.7,.5,1) var(--sd, 0s) both, float 3.4s ease-in-out var(--fd, 0s) infinite; z-index: 1; }
.card:hover, .card:active { scale: 1.08; }
@keyframes float {
  0%, 100% { translate: 0 0; rotate: calc(var(--fan, 0deg) - 1.4deg); }
  50% { translate: 0 -3px; rotate: calc(var(--fan, 0deg) + 1.4deg); }
}
@keyframes scored {
  0% { transform: none; }
  40% { transform: translateY(-22%) scale(1.18) rotate(-7deg); }
  70% { transform: translateY(-12%) scale(1.04) rotate(4deg); }
  100% { transform: translateY(-12%); }
}
.card.scored:not(.back) { box-shadow: 0 0 0 2px var(--warn), 0 10px 24px #000000a0; }
.pk-board.showdown .card:not(.scored) { filter: brightness(.55); transition: filter .4s; }

/* Hände, Board, Kacheln kippen zum Zeiger (Transform setzt fx.js) */
.hand, .pk-board, .tile { transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .2s, opacity .2s; will-change: transform; }

/* Kachel-Bilder schweben wie Karten */
.tile-art, .pcard .art { animation: float 4s ease-in-out infinite; will-change: transform; }
.tile:nth-child(2) .tile-art { animation-delay: -1.3s; }
.tile:nth-child(3) .tile-art { animation-delay: -2.4s; }
.tile:nth-child(4) .tile-art { animation-delay: -.7s; }

/* Zahlen-Tags */
.pop { position: fixed; z-index: 40; pointer-events: none; padding: 4px 10px; background: #fff; color: #0b0b0c;
  font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: 26px; letter-spacing: -.02em; line-height: 1;
  white-space: nowrap; box-shadow: 4px 4px 0 #000; font-variant-numeric: tabular-nums; }
.pop.good { background: var(--good); }
.pop.bad { background: var(--bad); }
.pop.gold { background: var(--warn); }
.pop.blue { background: var(--accent-fill); color: #fff; }
.pop.sm { font-size: 16px; padding: 3px 7px; box-shadow: 3px 3px 0 #000; }

/* Multiplikator-Effekt (multFx in js/fx.js): eckiges Badge in der Stufenfarbe, Zahl darunter */
.multfx { position: fixed; z-index: 41; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 4px; will-change: transform, opacity; }
.multfx b { background: var(--mc); color: #0b0b0c; padding: 4px 12px; font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: 30px; line-height: 1; box-shadow: 4px 4px 0 #000; }
.multfx.t1 b { color: #fff; }
.multfx.t4 b, .multfx.t5 b { box-shadow: 4px 4px 0 #000, 0 0 24px 4px var(--mc); }
.multfx span { background: #0b0b0c; color: var(--text); border: 1px solid var(--mc); padding: 2px 8px; font: 700 15px var(--mono); font-variant-numeric: tabular-nums; }
.mglow .card.scored:not(.back) { box-shadow: 0 0 0 2px var(--mc), 0 0 18px 2px var(--mc), 0 10px 24px #000000a0; }
.multflash { position: fixed; inset: 6px; z-index: 39; pointer-events: none; border: 3px solid #fff; }