/* static/daily_claim_button.css */

.daily-claim{
  width: 40px;
  height: 40px;
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: none;
  border-radius: 12px;

  padding: 0;
  margin: 0;

  cursor: pointer;

  /* unavailable look */
  opacity: 0.40;
  filter: grayscale(0.75) brightness(0.95);
}

.daily-claim.is-available{
  opacity: 1;
  filter: none;
}

.daily-claim.is-available:hover{
  background: rgba(120, 220, 255, 0.07);
}

.daily-claim:disabled{
  cursor: not-allowed;
}

/* icon wrapper */
.daily-claim__icn{
  position: relative;
  width: 22px;
  height: 22px;
  z-index: 2; /* above ring */
}

.daily-claim__icn img{
  position: absolute;
  inset: 0;
  width: 22px;
  height: 22px;
  display: block;
}

.daily-claim__png{ opacity: 1; }
.daily-claim__gif{ opacity: 0; }

.daily-claim.is-available:hover .daily-claim__png{ opacity: 0; }
.daily-claim.is-available:hover .daily-claim__gif{ opacity: 1; }

/* ring */
.daily-claim__ring{
  --p: 0; /* 0..100 */
  position: absolute;
  inset: 1px;                 /* thicker ring area */
  border-radius: 999px;
  z-index: 1;
  pointer-events: none;

  background:
    conic-gradient(
      rgba(120,220,255,1.0) calc(var(--p) * 1%),
      rgba(120,220,255,0.24) 0
    );

  /* thicker donut cutout */
  -webkit-mask: radial-gradient(transparent 55%, #000 58%);
  mask: radial-gradient(transparent 55%, #000 58%);

  /* stronger glow so it reads on light backgrounds */
  filter:
    drop-shadow(0 0 7px rgba(120,220,255,0.60))
    drop-shadow(0 0 18px rgba(120,220,255,0.30));
}

/* cooldown state: less dead */
.daily-claim.is-cooldown{
  opacity: 0.68;
  filter: grayscale(0.45) brightness(0.98);
}