/* Home page only (loaded after site.css). */

/* ---------- home hero: grid + orb background (Magenta Orb Grid, recoloured) ---------- */
.hero{position:relative;isolation:isolate;padding:20px 0 32px;text-align:center}
.hero::before{content:'';position:absolute;inset:-64px 0 0;z-index:-1;pointer-events:none;background:linear-gradient(to right,rgba(250,250,250,.04) 1px,transparent 1px) 50% 0/40px 40px,linear-gradient(rgba(250,250,250,.04) 1px,transparent 1px) 50% 0/40px 40px,radial-gradient(circle at 50% 34%,rgba(66,153,225,.22) 0,rgba(136,71,255,.07) 38%,transparent 68%);-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.profile{display:flex;flex-direction:column;align-items:center}
.profile__av{position:relative;width:96px;height:96px;border-radius:50%;box-shadow:0 0 0 3px var(--blue),0 0 0 8px rgba(66,153,225,.14),0 18px 50px -10px rgba(66,153,225,.55)}
.is-live .profile__av{box-shadow:0 0 0 3px var(--kick),0 0 0 8px rgba(83,252,24,.12),0 18px 50px -10px rgba(83,252,24,.4)}
.profile__live{position:absolute;left:50%;bottom:-10px;display:none;align-items:center;gap:6px;padding:3px 9px;transform:translateX(-50%);border-radius:999px;background:var(--kick);box-shadow:0 0 0 3px var(--bg);color:#0c1204;font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.profile__live .dot{background:#0c1204}
.is-live .profile__live{display:inline-flex}
.profile__name{margin-top:18px;font-size:22px;font-weight:800;letter-spacing:-.02em}
.profile__tag{max-width:34ch;margin-top:4px;font-size:15px;color:var(--muted);text-wrap:balance}
.hero .partner{margin-top:22px}
.display{margin-top:16px;font-weight:900;line-height:1;letter-spacing:-.035em}
.display__pool{display:block;font-size:clamp(3.6rem,17vw,7.5rem)}
.display__sub{display:block;margin-top:6px;font-size:clamp(1.4rem,5.6vw,2.5rem);font-weight:800;letter-spacing:-.025em}
.lede{max-width:34rem;margin:14px auto 0;color:var(--muted);text-wrap:pretty}
.lede b{color:var(--text)}

/* ---------- deposit bonus card: PackDraw's promo graphic next to the same facts in text ----------
   The rim and the "5%" use the graphic's pink -> purple -> blue. Phones and tablets: a row under the
   Sign up button. Desktop: a column to the right of the hero, next to the code. */
.promo{--pg:linear-gradient(110deg,#f8a1e6,#a46cf5 52%,#4cc5fc);display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center;gap:14px;width:100%;max-width:460px;margin:22px auto 0;padding:12px 14px 12px 12px;border:1px solid transparent;border-radius:var(--r4);background:radial-gradient(90% 80% at 100% 0,rgba(164,108,245,.18),transparent 70%) padding-box,linear-gradient(var(--card),var(--card)) padding-box,var(--pg) border-box;box-shadow:0 20px 44px -26px rgba(164,108,245,.8);text-align:left}
/* the graphic's own rounded corners, as a share of its size; the gradient shows until it loads */
.promo__art{overflow:hidden;aspect-ratio:738/946;border-radius:3.25%/2.54%;background:linear-gradient(165deg,#5b4a8f,#2c2c57 50%,#23456b)}
.promo__art img{width:100%;height:auto;opacity:0;transition:opacity .4s var(--ease)}
.promo__art.is-loaded img{opacity:1}
.promo__art.is-failed img{visibility:hidden}
/* Data Saver: no picture, the text stands alone */
.promo--text{grid-template-columns:minmax(0,1fr);padding:14px 16px}
.promo--text .promo__art{display:none}
.promo__kicker{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.promo__kicker .ic{width:15px;height:15px;color:#f8a1e6}
.promo__title{margin-top:3px;font-size:21px;font-weight:900;line-height:1.15;letter-spacing:-.02em}
.promo__pct{background:var(--pg);-webkit-background-clip:text;background-clip:text;color:transparent}
.promo__facts{display:grid;gap:3px;margin-top:8px;font-size:14px;font-weight:600;line-height:1.35;color:#cbd5e0}
.promo__facts li{display:flex;align-items:flex-start;gap:7px}
.promo__facts .ic{width:15px;height:15px;margin-top:2px;color:#4cc5fc;stroke-width:3}
.promo__facts b{color:var(--text)}
.promo__note{margin-top:8px;font-size:12px;line-height:1.35;color:var(--dim)}
@media (min-width:640px){.promo{grid-template-columns:128px minmax(0,1fr);gap:18px;padding:14px 20px 14px 14px}.promo__title{font-size:24px}}
/* desktop: two columns, the hero on the left, the card on the right (between them in the page order) */
@media (min-width:1024px){
  .hero::before{background:linear-gradient(to right,rgba(250,250,250,.04) 1px,transparent 1px) 50% 0/40px 40px,linear-gradient(rgba(250,250,250,.04) 1px,transparent 1px) 50% 0/40px 40px,radial-gradient(circle at 70% 42%,rgba(164,108,245,.12),transparent 26%),radial-gradient(circle at 40% 34%,rgba(66,153,225,.22) 0,rgba(136,71,255,.07) 38%,transparent 68%)}
  .hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) 258px;grid-template-rows:repeat(7,auto);column-gap:48px}
  .hero .wrap>*{grid-column:1}
  .hero .partner{justify-self:center}
  /* level with the headline, so it is on screen next to the code even on a 768px-tall laptop */
  .hero .promo{grid-column:2;grid-row:1/-1;align-self:start;grid-template-columns:minmax(0,1fr);gap:16px;max-width:none;margin:48px 0 0;padding:16px}
  /* bonus switched off (config.js percent: 0): one centred column, as on tablets. The :has() rule
     covers the moment before site.js runs (dev/sync-html.mjs marks the card hidden in the HTML). */
  .no-bonus .hero .wrap{display:block}
  .hero .wrap:has(>.promo[hidden]){display:block}
}


/* ---------- marquee strip ---------- */
.strip{display:flex;overflow:hidden;padding:4px 0 8px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.strip ul{display:flex;flex:none;gap:10px;padding-right:10px;animation:marquee 36s linear infinite}
.strip:hover ul{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-100%)}}
.chip{display:inline-flex;flex:none;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);background:var(--card);font-size:14px;font-weight:700;white-space:nowrap}
.chip::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--dot,var(--rare));box-shadow:0 0 8px var(--dot,var(--rare))}
.chip:nth-child(4n+2){--dot:var(--purple)}
.chip:nth-child(4n+3){--dot:var(--red)}
.chip:nth-child(4n+4){--dot:var(--gold)}

/* ---------- stat cards (Shine Border): a conic light turns (transform only) behind a
   card-coloured cover inset 1px, so only the ring shows ---------- */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.stat{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:2px;min-width:0;padding:16px;border-radius:var(--r4);background:var(--line2)}
.stat::before{content:'';position:absolute;inset:1px;z-index:-1;border-radius:calc(var(--r4) - 1px);background:var(--card)}
.stat::after{content:'';position:absolute;top:50%;left:50%;z-index:-2;width:150%;aspect-ratio:1;pointer-events:none;background:conic-gradient(transparent 0 62%,var(--blue) 76%,var(--purple) 84%,transparent 94%);transform:translate(-50%,-50%);animation:shine 12s linear infinite}
@keyframes shine{to{transform:translate(-50%,-50%) rotate(1turn)}}
/* nobody on the board yet: no "0 players / $0 wagered" */
.stats.is-empty .stat:nth-child(2),.stats.is-empty .stat:nth-child(3){display:none}
.stat__ic{margin-bottom:10px}
.stat small{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.stat strong{overflow:hidden;font-size:clamp(1.2rem,5.8vw,1.75rem);line-height:1.15;text-overflow:ellipsis;white-space:nowrap}
@media (min-width:768px){.stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.stats.is-empty{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* ---------- home: steps (PackDraw reward cards) + socials ---------- */
.steps{display:grid;gap:12px}
.step{position:relative;padding:24px 20px;border-radius:var(--r4);background:radial-gradient(circle at center top,#3a4249 0%,transparent 60%),var(--card);text-align:center}
.step__n{position:absolute;top:14px;left:16px;font-size:12px;font-weight:800;color:var(--dim)}
.step__ic{width:52px;height:52px;margin:0 auto 14px;border-radius:var(--r4);color:var(--blue)}
.step__ic .ic{width:24px;height:24px}
.step h3{font-size:18px;font-weight:800}
.step p{margin-top:6px;font-size:15px;color:var(--muted)}
.step b{color:var(--text)}
.more{display:flex;justify-content:center;margin-top:8px}
.socials{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.social{display:flex;align-items:center;gap:12px;min-height:68px;padding:12px 14px;border-radius:var(--r3);border:1px solid var(--line);background:var(--card);transition:background-color .2s}
.social:hover{background:var(--card2)}
.social__ic{width:42px;height:42px;background:var(--raised);color:var(--text)}
.social--kick .social__ic{background:rgba(83,252,24,.12);color:var(--kick)}
.social>span:last-child{min-width:0}
.social b{display:block;line-height:1.2}
.social small{display:block;margin-top:2px;font-size:13px;line-height:1.3;color:var(--muted)}
@media (min-width:768px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}


/* Data Saver / reduced motion */
.lite .stat::after{display:none}
.lite .strip{-webkit-mask-image:none;mask-image:none}
.lite .strip ul{flex-wrap:wrap;justify-content:center;width:100%;padding:0 16px;animation:none}
.lite .strip ul+ul{display:none}
.lite .strip li:nth-child(n+5){display:none}