/* Flying bonus over the valley: one element moved by transform (compositor only), glow via a CSS pulse.
   Layer: above the Pixi stage & shade, below the HUD/bar (5), sheets (10–11), fx (20) and toasts (30). */
.bonus-flyer {
  position: absolute; left: 0; top: 0; z-index: 4; width: 76px; height: 76px; padding: 0; border: 0; background: none;
  display: grid; place-items: center; opacity: 0; will-change: transform, opacity; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.bonus-flyer::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; } /* hit area ≈ 92 px */
.bf-glow {
  position: absolute; inset: 2px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 226, 150, .55) 0%, rgba(182, 236, 201, .28) 38%, transparent 70%);
  animation: bf-pulse 1.6s ease-in-out infinite;
}
.bf-art { position: relative; width: 68px; height: 68px; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)) drop-shadow(0 0 8px rgba(255, 220, 140, .45)); }
/* placeholder until bonus_*.png exists: a warm glowing orb with a line icon */
span.bf-art { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: #3a2a10;
  background: radial-gradient(circle at 35% 30%, #fff3cf, #f2c46a 45%, #c8893c 100%);
  box-shadow: 0 0 18px rgba(255, 210, 120, .75), inset 0 -3px 6px rgba(120, 70, 20, .35); }
span.bf-art .ic { width: 28px; height: 28px; stroke-width: 1.8; }
.bf-leaf span.bf-art, .bf-butterfly span.bf-art { background: radial-gradient(circle at 35% 30%, #effbe9, #9fd68a 45%, #4f8a3f 100%); box-shadow: 0 0 18px rgba(160, 230, 150, .7); }
.bf-crane span.bf-art { background: radial-gradient(circle at 35% 30%, #ffffff, #dfe7ec 50%, #9fb2bd 100%); box-shadow: 0 0 18px rgba(220, 240, 255, .7); color: #2c3a44; }
.bonus-flyer.pop { animation: bf-pop .42s ease-out forwards; }
.bonus-flyer.pop .bf-glow { animation: bf-burst .42s ease-out forwards; }
.bonus-flyer.out { transition: opacity .3s; opacity: 0 !important; }
@keyframes bf-pulse { 0%, 100% { transform: scale(.85); opacity: .7; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes bf-pop { 0% { opacity: 1; } 40% { opacity: 1; filter: brightness(1.4); } 100% { opacity: 0; } }
@keyframes bf-burst { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bf-glow { animation: none; } }

/* compact confirm sheet */
.bonus-sheet .bonus-card { display: flex; align-items: center; gap: 12px; padding: 6px 40px 4px 2px; }
.bc-ic { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(110, 196, 150, .14); border: 1px solid rgba(110, 196, 150, .3); }
.bc-ic .jade-svg, .bc-ic .jade-img { width: 28px; height: 28px; }
.bc-txt b { display: block; font-size: 17px; font-weight: 800; }
.bc-txt small { display: block; margin-top: 2px; color: var(--text-2); font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.bonus-sheet .cf-actions { margin-top: 8px; }
.bonus-sheet .bc-watch span { white-space: nowrap; }