/* power.css — power-ups (power.js): the drop floating over the stage, the
   line a pick-up is announced with, and the marks on the purse while a boost
   runs. Green, the colour a dropped power-up has always glowed, so it reads
   as something to grab rather than as one more of the game's golds.

   Both rules of the rest of the game hold: everything here is positioned
   over something that keeps its own box (the stage, the purse), so a drop
   appearing or a boost running moves nothing; and with reduced motion the
   drop neither bobs nor blinks, it dims for its last seconds instead. */

/* ---------- the drop ----------
   A layer of its own over the stage, above the tears (it is not between the
   tears' blur and the canvas, so it may carry what it likes) and below
   nothing a thumb needs: it takes no touch but the orb's own. 40% down, over
   the pieces' rows: under the toast's line (coins.css, 84 px, landing at the
   same moment) and over the readout even with the knife's dock up, on the
   shortest stage (330 px), which a drop not yet picked up meets when the next
   attempt starts within its twenty seconds. Its name overlaps the orb, so the
   whole drop is 80 px tall. */
.gm-power {
  position: absolute; left: 10px; right: 10px; top: 40%; z-index: 4; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.pw-drop {
  pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 0;
  margin: 0; padding: 4px; border: 0; border-radius: 16px; background: none; font: inherit; color: #eafff0; cursor: pointer;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  animation: pw-bob 1.6s ease-in-out infinite;
}
.pw-drop:focus-visible { outline: 2px solid #7dffb0; outline-offset: 2px; }
.pw-orb {
  position: relative; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  font-size: 28px; line-height: 1;
  background: radial-gradient(circle at 50% 42%, rgba(214, 255, 226, .95) 0%, rgba(74, 222, 128, .9) 40%, rgba(22, 130, 66, .85) 68%, rgba(12, 70, 36, .9) 100%);
  border: 2px solid rgba(190, 255, 210, .85);
  box-shadow: 0 0 16px 5px rgba(80, 255, 140, .6), 0 0 44px 16px rgba(80, 255, 140, .25);
}
.pw-orb b {
  position: absolute; right: -12px; top: -6px; padding: 1px 6px; border-radius: 999px;
  font: 800 .8rem/1.3 var(--mono); color: #0d2414; background: #d8ffe2; border: 1px solid rgba(20, 110, 55, .6);
}
.pw-name {
  position: relative; margin-top: -12px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; font-weight: 800; font-size: .8rem; color: #c4ffd8;
  background: rgba(10, 12, 16, .74); border: 1px solid rgba(110, 255, 160, .6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pw-drop.blink { animation: pw-bob 1.6s ease-in-out infinite, pw-blink .5s linear infinite; }
.pw-drop.got { animation: pw-got .38s ease-out forwards; pointer-events: none; }
@keyframes pw-bob { 50% { transform: translateY(-7px); } }
@keyframes pw-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .22; } }
@keyframes pw-got { to { transform: scale(1.7); opacity: 0; } }

/* the line a pick-up is announced with: the toast's shape, in green */
.pw-say {
  display: inline-block; max-width: min(92%, 420px); padding: 7px 16px; border-radius: 16px; text-align: center; text-wrap: balance;
  font-weight: 800; font-size: .92rem; line-height: 1.3; color: #0d2414;
  background: linear-gradient(110deg, #7be3a0, #c8ffd9 50%, #59d68a); border: 1px solid rgba(220, 255, 230, .9);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35), 0 0 18px rgba(80, 255, 140, .35);
}
.pw-say.on { animation: cn-toast 2.8s ease both; }

/* ---------- the marks on the purse ----------
   Over its top corner, so the purse's box (fixed, coins.css) never changes:
   a ring per boost, emptying as it runs, blinking for its last ten seconds. */
.gm-purse { position: relative; }
.pw-marks { position: absolute; top: -10px; right: -6px; display: flex; flex-direction: row-reverse; gap: 3px; pointer-events: none; }
.pw-mark {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  font: 800 .66rem/1 var(--mono); color: #0d2414;
  background: radial-gradient(circle, #d8ffe2 0 56%, transparent 58%),
    conic-gradient(#3ddc84 calc(var(--left, 1) * 360deg), rgba(255, 255, 255, .16) 0);
  box-shadow: 0 0 8px rgba(80, 255, 140, .6);
}
.pw-mark.blink { animation: pw-blink .5s linear infinite; }
.pw-mark.pop { animation: pw-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pw-pop { 0% { transform: scale(0); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .pw-drop, .pw-drop.blink, .pw-mark.blink, .pw-mark.pop { animation: none; }
  .pw-drop.blink, .pw-mark.blink { opacity: .5; }
  .pw-say.on { animation-name: cn-fade; }
}