/* TCG Stockpile game-style effects · Shannon Cain */
.fx-layer { position: fixed; inset: 0; z-index: 9999; pointer-events: none; overflow: hidden; }
.fx-ball { position: absolute; left: 0; top: 0; will-change: transform; filter: drop-shadow(0 10px 12px rgba(0,0,0,.35)); }
.fx-ball-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.fx-ball-top { transform-box: view-box; transform-origin: 50px 50px; }
.fx-star { position: absolute; transform: translate(-50%, -50%); filter: drop-shadow(0 0 6px rgba(255, 230, 120, .95)) drop-shadow(0 0 2px #fff); }
.fx-star svg { width: 100%; height: 100%; display: block; }
.fx-beam { position: absolute; transform: translateX(-50%); pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(to bottom, rgba(255,255,255,.95), rgba(255,120,90,.55) 45%, rgba(255,255,255,0));
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); }
.fx-shiny { animation: fx-glint 1.4s ease; }
@keyframes fx-glint {
  0% { filter: none; }
  25% { filter: brightness(1.35) saturate(1.35) drop-shadow(0 0 16px rgba(255, 240, 150, .95)); }
  55% { filter: brightness(1.15) saturate(1.2) hue-rotate(25deg) drop-shadow(0 0 10px rgba(160, 220, 255, .9)); }
  100% { filter: none; }
}
.fx-size { position: absolute; z-index: 4; top: -12px; right: -12px; padding: 6px 12px; border-radius: 12px; font: 900 22px/1 var(--font, system-ui);
  letter-spacing: .02em; color: #fff; box-shadow: 0 8px 18px -6px rgba(0,0,0,.45), inset 0 -3px 0 rgba(0,0,0,.18); pointer-events: none; }
.fx-size.xxl { background: linear-gradient(180deg, #ff6a3d, #e3350d); font-size: 26px; }
.fx-size.xs { background: linear-gradient(180deg, #4a9ae0, #2a75bb); font-size: 30px; }
.fx-silhouette { filter: brightness(0) invert(1) drop-shadow(0 0 16px rgba(255,255,255,.95)) drop-shadow(0 0 40px rgba(130,190,255,.85)); transition: filter .5s ease; }
.fx-flash { position: absolute; inset: -40%; z-index: 3; pointer-events: none; background: radial-gradient(circle, #fff 0%, rgba(255,255,255,.92) 32%, rgba(255,255,255,0) 70%); }
.fx-gotcha-card { position: absolute; border-radius: 10px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); }
.fx-gotcha-text { position: absolute; left: 50%; top: 66%; transform: translate(-50%, -50%); font: 900 clamp(34px, 9vw, 54px)/1 var(--font, system-ui);
  color: #ffcb05; -webkit-text-stroke: 2px #16204a; paint-order: stroke fill; text-shadow: 0 6px 0 #16204a; letter-spacing: -.02em;
  animation: fx-pop .5s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes fx-pop { from { transform: translate(-50%, -50%) scale(.3); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fx-shiny { animation: none; } .fx-silhouette { transition: none; } }