/* ═══════════════════════════════════════════════════════════════════════
   RCADYA — the START button, defined ONCE for every Game.

   Taken from Rock Paper Scissors, which is what the Platform standardises on.
   Every Game carried its own copy of these styles, so the effect was close but
   never the same twice, this provides total universalization and shared assets.

     transform          ANIMATES   the swell out from the centre (drop)
     .btn-shine left    ANIMATES   the highlight sweeping left to right (wave)
     box-shadow          frozen    declared !important, which outranks the animation
     background-position frozen    ditto, via the `background` shorthand

   So the effect is those two motions over a static glow and a static gradient.
   This file reproduces exactly that, and does it for each Game that imports it.

   NOT set here: padding, font-size, margin. That is layout; each Game
   positions its own button and this file must never move it.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /*
       0.00s - 0.60s   the drop expands and fades (drop effect)
       0.60s - 1.14s   a beat of nothing (pause)
       1.14s - 1.96s   the sweep crosses the button (wave effect)
       1.96s - 2.50s   a beat of nothing, then repeat (pause)
  */
  --rc-btn-cycle: 2.5s;
  --rc-btn-pulse-dur: var(--rc-btn-cycle);
}

#rc-open {
  position: relative !important;
  background: linear-gradient(135deg, #00c6ff 0%, #0072ff 50%, #00c6ff 100%) !important;
  background-size: 200% 200% !important;
  border: none !important;
  border-radius: calc(var(--s) * 999px) !important;
  color: #fff !important;
  font-weight: 900 !important;
  letter-spacing: calc(var(--s) * 2px) !important;
  text-shadow: 0 0 calc(var(--s) * 8px) rgba(255, 255, 255, 0.6) !important;
  cursor: pointer !important;
  overflow: hidden !important;
  box-shadow:
    0 0 calc(var(--s) * 18px) calc(var(--s) * 4px) rgba(0, 180, 255, 0.55),
    0 0 calc(var(--s) * 40px) calc(var(--s) * 8px) rgba(0, 114, 255, 0.25),
    inset 0 calc(var(--s) * 1px) 0 rgba(255, 255, 255, 0.30) !important;
  /* `animation` itself is never animated, so it may be !important — and must
     be, to beat the Games that declare their own the same way. */
  animation: rcBtnPulse var(--rc-btn-pulse-dur) ease-in-out infinite !important;
  animation-play-state: running !important;
  will-change: transform;
}
/* NOTE: `transform` is deliberately not declared here. rcBtnPulse drives it. */

@keyframes rcBtnPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

#rc-open .btn-shine {
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg,
              rgba(255, 255, 255, 0)    0%,
              rgba(255, 255, 255, 0.45) 50%,
              rgba(255, 255, 255, 0)    100%);
  border-radius: calc(var(--s) * 999px);
  pointer-events: none;
  z-index: 2;
  animation: rcBtnShine var(--rc-btn-cycle) linear infinite !important;
}

@keyframes rcBtnShine {
  0%, 33.7% { left: -120%; }
  81.5%     { left:  120%; }
  100%      { left:  120%; }
}

#rc-open:hover {
  animation: none !important;
  transform: scale(1.07) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
#rc-open:active { transform: scale(0.96) !important; }

/* ── The Drop ─────────────────────────────────────────────────────────── */
#rc-open .rc-auto-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.30);
  transform: scale(0);
  pointer-events: none;
  z-index: 1;                 /* Beneath the sweep, which sits at 2 */
  animation: rcAutoRipple var(--rc-btn-cycle) linear infinite !important;
}

@keyframes rcAutoRipple {
  /* Visible for the first 24% of the cycle — 0.60s — and dormant for the rest.
     scale(1) is roughly where the circle covers the pill, so nearly all of that
     1.1s is spent travelling out to the edge, which is the part that reads as a
     drop. To slow the drop, move these percentages; beware that changing the
     duration alone would stretch the whole cycle instead. */
  0%     { transform: scale(0);    opacity: 0.90; }
  16.7%  { transform: scale(0.95); opacity: 0.50; }
  23.9%  { transform: scale(1.35); opacity: 0; }
  100%   { transform: scale(1.35); opacity: 0; }
}