/* ================================================================
   Home rail art. Every card gets its own art panel that matches its
   subject: no random screenshots, no borrowed game footage. Pure
   layered gradients, a fine grid, one large icon and a ghost number.
   ================================================================ */
.pf-card .pf-art{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.pf-card .pf-art::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(130% 95% at 18% 0%,var(--a1,rgba(124,58,237,.7)),transparent 62%),
    radial-gradient(120% 100% at 92% 102%,var(--a2,rgba(217,70,239,.45)),transparent 58%),
    linear-gradient(180deg,#0d0818 0%,#150a28 58%,#0a0614 100%);
}
.pf-card .pf-art::after{
  content:"";position:absolute;inset:0;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
.pf-card .pf-art-grid{
  position:absolute;inset:-2px;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(90% 75% at 50% 28%,#000 25%,transparent 82%);
  mask-image:radial-gradient(90% 75% at 50% 28%,#000 25%,transparent 82%);
}
.pf-card .pf-art-orb{
  position:absolute;left:-14%;top:-16%;width:64%;aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(circle at 38% 34%,rgba(255,255,255,.4),rgba(255,255,255,0) 55%),
    radial-gradient(circle at 60% 60%,var(--a1,rgba(124,58,237,.8)),rgba(124,58,237,0) 70%);
  filter:blur(6px);opacity:.9;
  transition:transform .8s var(--pf-ease);
}
.pf-card:hover .pf-art-orb{transform:scale(1.08) translate3d(2%,2%,0)}
.pf-card .pf-art-ico{
  position:absolute;right:-5%;bottom:4%;width:60%;height:60%;
  color:rgba(255,255,255,.26);
  filter:drop-shadow(0 32px 44px rgba(0,0,0,.45));
  transition:transform .8s var(--pf-ease),color .5s;
}
.pf-card:hover .pf-art-ico{transform:translateY(-4px) scale(1.03);color:rgba(255,255,255,.34)}
.pf-card .pf-art-num{
  position:absolute;left:16px;bottom:108px;
  font-family:Helvetica,Helvetica Neue,Arial,sans-serif;font-weight:700;
  font-size:clamp(80px,7vw,112px);line-height:1;letter-spacing:-.06em;
  color:rgba(255,255,255,.055);pointer-events:none;
}
.pf-card [data-art="play"]{--a1:rgba(124,58,237,.72);--a2:rgba(34,211,238,.3)}
.pf-card [data-art="status"]{--a1:rgba(59,130,246,.55);--a2:rgba(124,58,237,.6)}
.pf-card [data-art="security"]{--a1:rgba(236,72,153,.55);--a2:rgba(124,58,237,.62)}
.pf-card [data-art="rules"]{--a1:rgba(124,58,237,.62);--a2:rgba(236,72,153,.42)}
.pf-card [data-art="faq"]{--a1:rgba(168,85,247,.62);--a2:rgba(59,130,246,.38)}

/* rail order: cards align to the start edge, never clipped on load */
.pf-rail{scroll-padding-inline:clamp(20px,5vw,72px)}
.pf-rail .pf-card{scroll-snap-align:start}