/* Holder-rewards card (#rewards): Solana purple treatment on the site's doodle style.
   Every rule is scoped to #rewards; the colours are not part of the compiled Tailwind file. */
#rewards {
  --rw-violet: #6d28d9;      /* card gradient, light end */
  --rw-violet-mid: #5b21b6;
  --rw-violet-deep: #4c1d95; /* card gradient, dark end */
  --rw-sol-purple: #9945ff;  /* Solana brand purple */
  --rw-sol-green: #14f195;   /* Solana brand green */
  --rw-soft: #e6dcff;        /* secondary text on the card */
  --rw-coin: #120a24;        /* SOL coin face */
}

#rewards .rw-card {
  position: relative;
  color: var(--color-primary-foreground);
  background: linear-gradient(150deg, var(--rw-violet) 0%, var(--rw-violet-mid) 55%, var(--rw-violet-deep) 100%);
  /* Offset slab in Solana green, outlined in the site's ink like the other doodle shadows. */
  box-shadow: 7px 7px 0 var(--rw-sol-green), 7px 7px 0 2.5px var(--color-foreground);
}

#rewards .rw-title { padding-right: 3.25rem; }

#rewards .rw-sol {
  color: var(--rw-sol-green);
  text-decoration-color: var(--rw-sol-green);
}

#rewards .rw-soft { color: var(--rw-soft); }

/* SOL coin sticker on the top-right corner, drawn like the site's other hand-inked badges. */
#rewards .rw-coin {
  position: absolute;
  top: -1.5rem;
  right: -0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  background: var(--rw-coin);
  border: 3px solid var(--color-primary-foreground);
  border-radius: 50% 46% 53% 47% / 47% 53% 46% 50%;
  box-shadow: 0 0 0 2.5px var(--color-foreground), 4px 4px 0 2.5px var(--color-foreground);
  rotate: 10deg;
}

#rewards .rw-coin svg {
  width: 56%;
  height: 56%;
}

/* Hand-drawn sparkles around the coin. */
#rewards .rw-spark {
  position: absolute;
  fill: var(--rw-sol-green);
  stroke: var(--color-foreground);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

#rewards .rw-spark-1 {
  top: -1.9rem;
  right: 3.4rem;
  width: 1.4rem;
  height: 1.4rem;
  rotate: -12deg;
}

/* Second sparkle only where the side gutter has room for it (a phone's 16px gutter does not). */
#rewards .rw-spark-2 {
  display: none;
  fill: var(--color-primary-foreground);
  rotate: 18deg;
}

/* From 640px the side gutter is 24px, so the corner pieces overhang the card by less than that. */
@media (min-width: 40rem) {
  #rewards .rw-title { padding-right: 5rem; }

  #rewards .rw-coin {
    top: -2.25rem;
    right: -0.25rem;
    width: 5rem;
    height: 5rem;
  }

  #rewards .rw-spark-1 {
    top: -2.4rem;
    right: 5.9rem;
    width: 1.75rem;
    height: 1.75rem;
  }

  #rewards .rw-spark-2 {
    display: block;
    top: 3.6rem;
    right: -0.5rem;
    width: 1.25rem;
    height: 1.25rem;
  }
}

/* From 1024px the gutter is at least 128px: let the sticker hang further off the corner. */
@media (min-width: 64rem) {
  #rewards .rw-coin { right: -1.5rem; }
  #rewards .rw-spark-1 { right: 4.6rem; }
  #rewards .rw-spark-2 { top: 3.4rem; right: -2.1rem; }
}