/* Dedicated earnings stage: the coin and rate animate inside this space,
   so no floating number crosses the caption or the main balance. */
#earningAnimation.income-flow {
  --coin-gold: #f4d17a;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  position: relative;
  isolation: isolate;
  width: 314px;
  max-width: 100%;
  min-height: 158px;
  height: auto;
  margin-top: 20px;
  padding: 100px 40px 10px 13px;
  border: 1px solid #e5b75940;
  border-radius: 13px;
  color: var(--coin-gold);
  background: linear-gradient(110deg, #e8b64512, #e8b64505 55%, #fff4c508);
  box-shadow: inset 0 1px 0 #fff1bc0d, 0 7px 20px #00000018;
  white-space: normal;
}
#earningAnimation.income-flow.is-working {
  border-color: #e5b75965;
  box-shadow: inset 0 1px 0 #fff1bc18, 0 0 28px #edb8300a;
}
.income-flow-coin {
  width: 40px;
  height: 40px;
  position: relative;
  display: block;
  transform-origin: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff1a7 3%, #f5cd62 29%, #c58b25 70%, #ffe299);
  border: 1px solid #ffe5a0;
  box-shadow: 0 3px 0 #976819, 0 5px 13px #0007, inset 0 0 0 2px #c58a2440;
}
.income-coin-edge {
  position: absolute;
  inset: 4px;
  border: 1px solid #9c701f80;
  border-radius: 50%;
  box-shadow: 0 1px 0 #fff3bb90, inset 0 1px 3px #a16e2430;
}
.income-coin-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #856014;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 25px;
  line-height: 1;
  font-weight: 700;
  text-shadow: 0 1px 0 #fff5be;
}
.income-coin-glint {
  position: absolute;
  width: 8px;
  height: 8px;
  left: 4px;
  top: 4px;
  background: #fff9dc;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 3px #fff3b9);
}
.income-flow-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
#earningAnimation .earning-increment {
  display: block;
  color: var(--coin-gold);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 640;
  font-size: 25px;
  line-height: 1.14;
  letter-spacing: -.6px;
  white-space: nowrap;
  transform-origin: left center;
}
#earningAnimation #earningUnit {
  display: block;
  color: #b9a77d;
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: .5px;
  white-space: nowrap;
}
.income-flow-meter {
  position: absolute;
  bottom: -1px;
  left: 12px;
  right: 12px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #e8bb53 25%, #fff0b5 80%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  pointer-events: none;
}
#earningAnimation #floatingGains {
  position: absolute;
  inset: 0 8px auto;
  height: 90px;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
  border-bottom: 1px solid #e7bd5d15;
}
#earningAnimation #floatingGains:empty::before {
  content: '每一秒的努力，都会到账';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #b9a77d;
  opacity: .5;
  font-size: 10px;
  letter-spacing: 1.5px;
}
.cash-floating-gain {
  --gain-lane: 0px;
  position: absolute;
  top: 64px;
  left: calc(50% + var(--gain-lane));
  width: max-content;
  max-width: calc(100% - 34px);
  display: block;
  color: #ffdf8a;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  font-size: 23px;
  letter-spacing: -.5px;
  white-space: nowrap;
  transform: translateX(-50%);
  text-shadow: 0 2px 2px #0009, 0 0 15px #f4bc3d65;
  animation: cash-reward-float 3s linear both;
  will-change: transform, opacity;
}
.cash-floating-gain strong { font-weight: 750; }
.cash-floating-gain.gain-lane-0 { --gain-lane: -23px; }
.cash-floating-gain.gain-lane-1 { --gain-lane: 25px; }
.cash-floating-gain.gain-lane-2 { --gain-lane: 0px; }
.cash-floating-gain.cash-floating-small { font-size: 17px; }
.cash-gain-trail {
  position: absolute;
  width: 5px;
  height: 5px;
  right: -11px;
  top: 7px;
  background: #fff1b5;
  clip-path: polygon(50% 0, 64% 35%, 100% 50%, 64% 64%, 50% 100%, 36% 64%, 0 50%, 36% 35%);
  box-shadow: 0 0 6px #ffc442;
  animation: cash-trail-twinkle .7s ease-in-out 4 alternate;
}
.cash-burst { position: absolute; inset: auto 0 0; height: 68px; pointer-events: none; }
.cash-spark {
  position: absolute;
  left: 32px;
  top: 31px;
  width: 4px;
  height: 4px;
  background: #ffe9a5;
  border-radius: 1px;
  opacity: 0;
  box-shadow: 0 0 5px #edb74580;
  animation: cash-spark-pop 820ms cubic-bezier(.18,.72,.31,1) both;
}
.cash-spark.spark-one { --spark-x: -23px; --spark-y: -27px; --spark-rotation: 100deg; }
.cash-spark.spark-two { --spark-x: 18px; --spark-y: -30px; --spark-rotation: 150deg; width: 3px; height: 3px; animation-delay: 30ms; }
.cash-spark.spark-three { --spark-x: 28px; --spark-y: -4px; --spark-rotation: 80deg; animation-delay: 50ms; }
.cash-spark.spark-four { --spark-x: -24px; --spark-y: 18px; --spark-rotation: 140deg; width: 3px; height: 3px; animation-delay: 70ms; }
.cash-spark.spark-five { --spark-x: 14px; --spark-y: 26px; --spark-rotation: 110deg; width: 2px; height: 2px; }
.cash-receipt {
  position: absolute;
  right: 9px;
  top: 24px;
  padding: 3px 2px;
  color: #e5c277;
  border-top: 1px solid #d1a65460;
  border-bottom: 1px solid #d1a65460;
  font-size: 9px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 1px;
  animation: cash-receipt-pop 900ms cubic-bezier(.18,.72,.31,1) both;
}
@keyframes cash-spark-pop {
  0% { opacity: 0; transform: translate(0, 0) scale(.2) rotate(0); }
  20% { opacity: 1; }
  65% { opacity: .8; }
  100% { opacity: 0; transform: translate(var(--spark-x), var(--spark-y)) scale(.25) rotate(var(--spark-rotation)); }
}
@keyframes cash-receipt-pop {
  0% { opacity: 0; transform: translateY(8px) scale(.85); }
  24% { opacity: 1; transform: translateY(-1px) scale(1.04); }
  67% { opacity: .9; transform: translateY(-1px) scale(1); }
  100% { opacity: 0; transform: translateY(-10px) scale(.95); }
}
@keyframes cash-reward-float {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(.55); filter: brightness(1.6); }
  6% { opacity: 1; transform: translate(-50%, -1px) scale(1.13); filter: brightness(1.35); }
  12% { opacity: 1; transform: translate(-50%, -7px) scale(1); filter: brightness(1.1); }
  72% { opacity: 1; transform: translate(-50%, -44px) scale(1); filter: brightness(1); }
  86% { opacity: .85; transform: translate(-50%, -54px) scale(.97); filter: brightness(1); }
  100% { opacity: 0; transform: translate(-50%, -65px) scale(.92); filter: brightness(1); }
}
@keyframes cash-trail-twinkle { from { opacity: .2; transform: scale(.5) rotate(0); } to { opacity: 1; transform: scale(1.2) rotate(45deg); } }
@media (max-width: 700px) {
  #earningAnimation.income-flow { margin-top: 20px; min-height: 156px; }
  .income-card .income-progress { margin-top: 22px; }
}
@media (max-width: 380px) {
  #earningAnimation.income-flow { grid-template-columns: 36px minmax(0, 1fr); gap: 9px; padding-left: 10px; padding-right: 34px; min-height: 152px; }
  .income-flow-coin { width: 35px; height: 35px; }
  .income-coin-face { font-size: 23px; }
  #earningAnimation .earning-increment { font-size: 21px; letter-spacing: -.7px; }
  #earningAnimation #earningUnit { font-size: 8px; letter-spacing: 0; }
  .cash-spark { left: 26px; top: 29px; }
  .cash-receipt { right: 7px; top: 23px; font-size: 8px; }
  .cash-floating-gain { font-size: 21px; }
  .cash-floating-gain.cash-floating-small { font-size: 15px; }
  .cash-floating-gain.gain-lane-0 { --gain-lane: -16px; }
  .cash-floating-gain.gain-lane-1 { --gain-lane: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .cash-burst, .income-flow-meter, .cash-floating-gain { display: none !important; }
}