.bonus-reward {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(18, 12, 7, .82);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden;
}
.bonus-reward__shower { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bonus-reward__coin {
  position: absolute;
  left: var(--x);
  top: -55px;
  width: 28px;
  height: 28px;
  border: 2px solid #fff0a6;
  border-radius: 50%;
  color: #7a3f00;
  background: radial-gradient(circle at 30% 25%, #fff8bd, #f3bd3a 53%, #a75b06);
  box-shadow: 0 2px 12px #f9b62b99;
  text-align: center;
  line-height: 26px;
  font-weight: 900;
  animation: bonus-rain var(--duration) linear var(--delay) infinite;
}
.bonus-reward__dialog {
  position: relative;
  width: min(100%, 360px);
  box-sizing: border-box;
  padding: 34px 24px 26px;
  border: 1px solid #e8bd63;
  border-radius: 8px;
  background: linear-gradient(160deg, #5e170f, #270d0d 70%);
  box-shadow: 0 20px 80px #000b, inset 0 0 28px #e9a52d33;
  color: #fff6dc;
  text-align: center;
  animation: bonus-enter .55s ease-out both;
}
.bonus-reward__emblem {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  border: 3px solid #fff0a6;
  border-radius: 50%;
  background: linear-gradient(#ffe690, #d59019);
  color: #713900;
  box-shadow: 0 0 28px #f7c65d88;
  font-size: 33px;
  font-weight: 800;
}
.bonus-reward__dialog h2 { margin: 0 0 8px; color: #ffe9aa; font-size: 24px; font-weight: 800; }
.bonus-reward__dialog p { margin: 0; font-size: 15px; line-height: 1.5; }
.bonus-reward__amount { margin: 18px 0 3px; color: #ffd76b; font-size: 42px; font-weight: 800; overflow-wrap: anywhere; }
.bonus-reward__unit { color: #ecd2a0; }
.bonus-reward__button {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 24px;
  border: 0;
  border-radius: 6px;
  background: linear-gradient(#fff0a6, #e6a92e);
  color: #552309;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}
.bonus-reward__button:focus-visible { outline: 3px solid white; outline-offset: 3px; }
.bonus-reward__button:disabled { opacity: .7; cursor: wait; }
@keyframes bonus-rain { to { transform: translateY(calc(100vh + 90px)) rotate(720deg); } }
@keyframes bonus-enter { from { opacity: 0; transform: translateY(-65px) scale(.92); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .bonus-reward__coin { animation: none; display: none; }
  .bonus-reward__dialog { animation: none; }
}