/* Monthly referral contest page (on top of contest.css: hero, clock, prize grid, cards, standings). */
.page-referral { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.rc-how { margin: 4px 0 0; padding-left: 0; list-style: none; counter-reset: rc-step; display: grid; gap: 8px; color: var(--mute); font-size: var(--step-1); max-width: 60ch; }
.rc-how li { position: relative; padding-left: 36px; counter-increment: rc-step; }
.rc-how li::before { content: counter(rc-step); position: absolute; left: 0; top: 0.05em; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; font: 800 0.8rem/1 var(--display); color: #04170d; background: var(--gold); box-shadow: 0 0 16px -4px var(--gold); }
.rc-me .rc-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rc-me .rc-stats .c-stat:nth-child(2) strong { color: var(--win); }
.rc-me .rc-stats .c-stat:nth-child(3) strong { color: var(--ink); }
.rc-hint { margin: 0 0 10px; }
.rc-excluded { margin: 0 0 10px; padding: 10px 12px; border-radius: var(--r); font-weight: 700; color: var(--lose); background: rgba(255, 90, 90, 0.08); box-shadow: 0 0 0 1px rgba(255, 90, 90, 0.35) inset; }
.c-standings td.coins { font-weight: 800; }

@media (max-width: 760px) {
  .rc-me .rc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-how { font-size: 1rem; }
}