/* Pakistanio — Play Now Button */
.play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 24px;
  min-width: 160px;
  height: 52px;
  color: #fff;
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  border: 1px solid #39ff73;
  border-radius: 14px;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    0 0 18px rgba(34, 197, 94, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}
/* Play icon */
.play-btn .play-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Hover */
.play-btn:hover {
  background: linear-gradient(135deg, #22c55e 0%, #39ff73 100%);
  transform: translateY(-2px);
  box-shadow:
    0 0 25px rgba(34, 197, 94, 0.55),
    0 8px 20px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
/* Active / Click */
.play-btn:active {
  transform: translateY(0) scale(0.97);
  box-shadow:
    0 0 12px rgba(34, 197, 94, 0.35),
    inset 0 2px 5px rgba(0, 0, 0, 0.25);
}
/* Optional disabled state */
.play-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* -------------------------------------------------------------------------
   PlayRox integration
   -------------------------------------------------------------------------
   The dashboard sheets style these buttons by their own class names, and
   those rules load first, so a few properties need re-asserting here for the
   design above to survive. Nothing about the design itself changes.
   ---------------------------------------------------------------------- */

.plxd__resume.play-btn,
.pxm-feat__cta.play-btn,
.playrox-dash__btn.play-btn {
  width: auto;
  max-width: 100%;
  text-decoration: none;
  white-space: nowrap;
}

/* The green pill sits on a dark card, so kill any inherited flat background
   without touching the gradient. */
.plxd__resume.play-btn { background-image: linear-gradient(135deg, #16a34a 0%, #22c55e 100%); }
.plxd__resume.play-btn:hover { background-image: linear-gradient(135deg, #22c55e 0%, #39ff73 100%); }

.play-btn .play-icon i { font-size: 14px; line-height: 1; }

/* V2 tournament hero. Its own rule sets padding/radius/gradient, and its
   mobile rule uses !important, so both need answering for the design to hold
   at every width. */
.plxv2-hero__register.play-btn {
  padding: 14px 24px;
  border: 1px solid #39ff73;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
}

.plxv2-hero__register.play-btn:hover { filter: none; }

@media (max-width: 900px) {
  .plxv2-hero__register.play-btn {
    padding: 12px 18px !important;
    font-size: 15px !important;
    height: 48px;
    min-width: 0;
    gap: 9px;
  }
}

/* Daily Rewards "Claim Reward". It lives in a narrow sidebar card and is
   full-width there, so the 160px floor and fixed height are relaxed; its own
   sidebar rule is more specific than .play-btn, hence the paired selectors. */
.plxv2-btn.play-btn {
  width: 100%;
  min-width: 0;
  border-radius: 12px;
}

.plxv2-btn.play-btn:hover { filter: none; }

.plxv2__right .plxv2-btn.play-btn {
  height: 46px;
  padding: 12px 16px;
  font-size: 15px;
}

/* Focus ring for keyboard users — the design has none of its own. */
.play-btn:focus-visible {
  outline: 2px solid #39ff73;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .play-btn { transition: none; }
  .play-btn:hover { transform: none; }
}

/* Narrow phones: the 160px floor plus 24px padding overflows a two-up grid. */
@media (max-width: 380px) {
  .play-btn {
    min-width: 0;
    padding: 12px 18px;
    height: 48px;
    font-size: 15px;
    gap: 9px;
  }
}

/* -------------------------------------------------------------------------
   Animated border
   -------------------------------------------------------------------------
   A light travels around the button's edge. Drawn as a pseudo-element
   masked into a ring (mask-composite cuts the middle out), so it sits over
   the border without touching the button's own gradient or its content.
   ---------------------------------------------------------------------- */

.play-btn {
  position: relative;
  white-space: nowrap;
}

.play-btn > * {
  position: relative;
  z-index: 2;
}

/* The ring itself. */
.play-btn::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;

  /* A bright sweep riding a dim green track. */
  background:
    linear-gradient(
      90deg,
      rgba(57, 255, 115, 0.25) 0%,
      rgba(57, 255, 115, 0.25) 38%,
      #d8ffe6 47%,
      #ffffff 50%,
      #d8ffe6 53%,
      rgba(57, 255, 115, 0.25) 62%,
      rgba(57, 255, 115, 0.25) 100%
    );
  background-size: 280% 100%;

  /* Keep only the 2px frame — the fill is masked away. */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;

  animation: playbtn-sweep 2.8s linear infinite;
}

@keyframes playbtn-sweep {
  from { background-position: 140% 0; }
  to   { background-position: -140% 0; }
}

/* Breathing glow underneath, so the button reads as "live" at rest. */
.play-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(57, 255, 115, 0.45);
  animation: playbtn-pulse 2.8s ease-out infinite;
}

@keyframes playbtn-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(57, 255, 115, 0.40); }
  70%  { box-shadow: 0 0 0 7px rgba(57, 255, 115, 0); }
  100% { box-shadow: 0 0 0 0 rgba(57, 255, 115, 0); }
}

/* Hover: sweep quickens and the ring brightens. */
.play-btn:hover::before { animation-duration: 1.3s; }
.play-btn:hover::after  { animation-duration: 1.3s; }

/* Nothing should look live when it can't be pressed. */
.play-btn:disabled::before,
.play-btn:disabled::after,
.play-btn.is-disabled::before,
.play-btn.is-disabled::after,
.plxv2-btn--claimed.play-btn::before,
.plxv2-btn--claimed.play-btn::after {
  animation: none;
  background: none;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .play-btn::before,
  .play-btn::after { animation: none; }
  .play-btn::after { box-shadow: none; }
}

/* -------------------------------------------------------------------------
   Static variant — same button, no animated border
   ---------------------------------------------------------------------- */

.play-btn--static::before,
.play-btn--static::after {
  content: none;
  animation: none;
}

/* Game Library filters: All / Free / Premium.
   Sized for a filter row rather than a hero CTA, and the active one is kept
   visibly ahead of the others — three identical green pills would give no
   clue which filter is on. */
.plxd-lib__filter.play-btn {
  height: 44px;
  min-width: 0;
  padding: 0 22px;
  border-radius: 12px;
  font-size: 14px;
  gap: 8px;
  opacity: 0.62;
  filter: saturate(0.75);
  transition:
    opacity 0.18s ease,
    filter 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.plxd-lib__filter.play-btn:hover {
  opacity: 0.85;
  filter: saturate(0.9);
  transform: translateY(-1px);
}

.plxd-lib__filter.play-btn.is-active {
  opacity: 1;
  filter: none;
  /* The theme's .is-active rule is more specific than .play-btn and sets
     border-color:transparent, so the neon edge needs restating. */
  border-color: #39ff73;
  background: linear-gradient(135deg, #22c55e 0%, #39ff73 100%);
  box-shadow:
    0 0 22px rgba(34, 197, 94, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

@media (max-width: 560px) {
  .plxd-lib__filter.play-btn { height: 38px; padding: 0 15px; font-size: 13px; }
}

/* -------------------------------------------------------------------------
   "Tap to play" / "Tap to resume" hint above the game name
   ---------------------------------------------------------------------- */

.plxv2-gcard__hint,
.plxd-lib__hint {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.42);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A game with progress waiting reads as the more inviting of the two. */
.plxv2-gcard__hint.is-resume,
.plxd-lib__hint.is-resume {
  color: #39ff73;
}

/* Keep the saved-game edge treatment; the badge itself is gone. */
.plxv2-gcard.has-resume .plxv2-gcard__thumb,
.plxd-lib__card.has-resume .plxd-lib__thumb {
  border-color: rgba(57, 255, 115, 0.45);
  box-shadow: 0 0 0 1px rgba(57, 255, 115, 0.22);
}

@media (max-width: 560px) {
  .plxv2-gcard__hint,
  .plxd-lib__hint { font-size: 9.5px; letter-spacing: 0.05em; }
}