/* Home page v2 (src/index.html), Sticker Glow. Loaded after sticker.css (from the header),
   so it only adds hm- components and a few page scoped overrides.
   25 Oct 2026: the hero is rebuilt. The old one let a creature render (Usbir) scale with only
   its width set while its height attribute stayed 830px, so it stretched, got cropped and sat
   on top of the card fan. The new fan lives in its own grid cell, sized by container units, so
   nothing in it can grow over the copy or the cards. */

/* ── bands ──────────────────────────────────────────────────────────────── */
.hm-paper{position:relative;isolation:isolate;background-color:var(--sg-cream);color:var(--sg-ink);
  background-image:radial-gradient(circle,rgba(17,16,21,.08) 1.4px,transparent 2px);background-size:14px 14px}
body .hm-paper p,body .hm-paper li{color:#3c3b45}
.hm-paper .sg-k{color:#7a3fd8}
.hm-paper .sg-lead{color:#3c3b45}
.hm-paper .sg-title{color:#fff}
.hm-paper .sg-title .y{color:var(--sg-y1)}

/* ── HERO ───────────────────────────────────────────────────────────────── */
.hm-hero{padding:clamp(22px,4vw,56px) 0 0}
.hm-hero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(18px,3vw,48px);align-items:center;
  min-height:min(calc(100svh - 240px),640px)}
.hm-hero__copy{position:relative;z-index:2;max-width:600px}
.hm-hero__copy>*{animation:hmIn .55s cubic-bezier(.2,.8,.2,1) both}
.hm-hero__copy>:nth-child(2){animation-delay:.06s}
.hm-hero__copy>:nth-child(3){animation-delay:.12s}
.hm-hero__copy>:nth-child(4){animation-delay:.18s}
.hm-hero__copy>:nth-child(5){animation-delay:.24s}
@keyframes hmIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hm-hero h1{margin-top:18px}
.hm-hero h1 .w{display:inline-block}
.hm-hero .sg-lead{color:#2b2630;font-weight:600;max-width:46ch}
.hm-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:26px}
.hm-cta .btn-gold{background:var(--sg-ink)!important;color:var(--sg-y1)!important;font-size:clamp(18px,1.6vw,22px);padding-left:30px;padding-right:30px;
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.5),inset 0 3px 0 rgba(255,255,255,.15)!important}
.hm-cta .btn-gold img{height:26px;width:auto;filter:invert(1)!important;opacity:1!important}
.hm-note{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-weight:800;font-size:13.5px;line-height:1.35;color:#2b2630}
.hm-note i{flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:#e2382f;border:2px solid var(--sg-ink);animation:hmBlink 1.6s ease-in-out infinite}
@keyframes hmBlink{50%{opacity:.35}}

/* the card stage: every size inside is a share of its own width (cqw), so it scales as one */
.hm-stage{--mx:0;--my:0;position:relative;container-type:inline-size;width:100%;aspect-ratio:1/0.86;max-width:680px;margin-left:auto;
  touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.hm-rays{position:absolute;left:50%;top:46%;width:170%;aspect-ratio:1;translate:-50% -50%;z-index:0;pointer-events:none;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.55) 0 5deg,rgba(255,255,255,0) 5deg 15deg);
  -webkit-mask:radial-gradient(closest-side,#000 8%,transparent 70%);mask:radial-gradient(closest-side,#000 8%,transparent 70%);
  animation:sgSpin 50s linear infinite}
.hm-glow{position:absolute;left:50%;top:44%;width:70%;aspect-ratio:1;translate:-50% -50%;z-index:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,248,214,.5) 45%,transparent 72%)}
.hm-slot{--d:.5;position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:calc(var(--w,40) * 1%);z-index:var(--z,1);
  transform:translate(-50%,0) translate(calc(var(--mx) * var(--d) * 3cqw),calc(var(--my) * var(--d) * 2cqw)) rotate(calc(var(--r) * 1deg + var(--mx) * var(--d) * 3deg)) scale(var(--s,1))}
.hm-deal{animation:hmDeal .8s cubic-bezier(.2,.9,.25,1.12) both;animation-delay:calc(var(--i) * 90ms + 120ms)}
@keyframes hmDeal{from{opacity:0;transform:translateY(55%) rotate(calc(var(--r) * -1.4deg)) scale(.7)}to{opacity:1;transform:none}}
.hm-bob{animation:hmBob var(--fd,6s) ease-in-out infinite;animation-delay:var(--fdl,0s)}
@keyframes hmBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.2cqw)}}
.hm-tilt{transform:perspective(1100px) rotateY(calc(var(--mx) * 16deg)) rotateX(calc(var(--my) * -11deg));transform-style:preserve-3d}

/* collector card (v5/card.png language): paper, ink stroke, sunburst art, shout name */
.hm-card{--c:var(--electric);--rc:#ffcf4a;position:relative;width:100%;aspect-ratio:5/7;transform-style:preserve-3d;
  transition:transform .62s cubic-bezier(.45,1.45,.5,1)}
.hm-card.is-back{transform:rotateY(180deg)}
.hm-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:4.4cqw;border:max(3px,1.05cqw) solid var(--sg-ink);
  box-shadow:1.6cqw 2cqw 0 var(--sg-ink),0 0 7cqw color-mix(in srgb,var(--c) 60%,transparent);overflow:hidden}
.hm-front{display:flex;flex-direction:column;padding:2cqw;background-color:var(--sg-paper);color:var(--sg-ink);
  background-image:radial-gradient(circle,rgba(17,16,21,.07) 1.2px,transparent 1.8px);background-size:9px 9px}
.hm-card__top{display:flex;justify-content:space-between;align-items:center;gap:1cqw;font-family:var(--sg-display);font-size:3cqw;line-height:1}
.hm-rar{display:inline-flex;align-items:center;padding:.8cqw 1.6cqw .6cqw;border-radius:99px;background:var(--sg-ink);color:#fff;
  font-family:var(--sg-display);font-size:2cqw;letter-spacing:.04em;text-transform:uppercase;line-height:1;box-shadow:0 0 0 .4cqw var(--rc)}
.hm-art{position:relative;flex:1 1 auto;margin-top:1.4cqw;border-radius:2.6cqw;border:max(2px,.75cqw) solid var(--sg-ink);overflow:hidden;
  background:radial-gradient(circle at 50% 62%,#fff 0,color-mix(in srgb,var(--c) 55%,#fff) 34%,var(--c) 80%)}
.hm-art::before{content:"";position:absolute;inset:-50%;background:repeating-conic-gradient(from 0deg at 50% 58%,rgba(255,255,255,.4) 0 7deg,transparent 7deg 18deg);
  animation:sgSpin 40s linear infinite}
.hm-art::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(17,16,21,.14) 1.3px,transparent 1.9px);background-size:9px 9px;
  -webkit-mask-image:linear-gradient(0deg,#000,transparent 55%);mask-image:linear-gradient(0deg,#000,transparent 55%)}
.hm-art img{position:absolute;left:50%;bottom:3%;width:94%;height:94%;object-fit:contain;object-position:50% 100%;transform:translateX(-50%);z-index:1;max-width:none;
  filter:drop-shadow(.45cqw 0 0 #fff) drop-shadow(-.45cqw 0 0 #fff) drop-shadow(0 .45cqw 0 #fff) drop-shadow(0 -.45cqw 0 #fff) drop-shadow(.8cqw 1cqw 0 rgba(17,16,21,.85))}
.hm-name{display:flex;justify-content:space-between;align-items:center;gap:1cqw;margin-top:1.6cqw}
.hm-name b{font-family:var(--sg-shout);font-weight:400;font-size:5cqw;line-height:.9;text-transform:uppercase;color:#fff;letter-spacing:.01em;
  -webkit-text-stroke:1.1cqw var(--sg-ink);paint-order:stroke fill;text-shadow:.6cqw .8cqw 0 var(--sg-ink);white-space:nowrap;overflow:visible}
.hm-lv{flex:0 0 auto;display:inline-flex;align-items:baseline;gap:.4cqw;border-radius:99px;background:var(--sg-ink);color:#fff;border:.4cqw solid #fff;
  box-shadow:0 0 0 .4cqw var(--sg-ink);font-family:var(--sg-display);font-size:2.4cqw;line-height:1;padding:.7cqw 1.4cqw .5cqw}
.hm-lv small{font-size:1.5cqw;color:var(--sg-amber2)}
.hm-pills{display:flex;gap:1cqw;margin-top:1.4cqw;align-items:center}
.hm-el{display:inline-flex;align-items:center;gap:.9cqw;border-radius:99px;background:var(--c);border:.45cqw solid var(--sg-ink);padding:.5cqw 1.6cqw .5cqw .5cqw;
  font-family:var(--sg-body);font-weight:900;font-size:1.75cqw;letter-spacing:.1em;text-transform:uppercase;line-height:1;color:var(--sg-ink)}
.hm-el::before{content:"";width:2.4cqw;height:2.4cqw;border-radius:50%;background:#fff;box-shadow:0 0 0 .35cqw var(--sg-ink),inset 0 0 0 .6cqw var(--c)}
.hm-bar{position:relative;flex:1 1 auto;height:2cqw;background:#1b1d27;border:.45cqw solid var(--sg-ink);border-radius:99px}
.hm-bar i{position:absolute;left:0;top:0;bottom:0;width:var(--v,70%);border-radius:inherit;background:var(--sg-hp);box-shadow:var(--sg-hp-glow)}
/* foil: a timed sweep plus a holo sheen that follows the pointer */
.hm-foil{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;mix-blend-mode:overlay}
.hm-foil::before{content:"";position:absolute;inset:0;opacity:.85;
  background:linear-gradient(115deg,transparent 26%,rgba(255,0,200,.65) 38%,rgba(0,220,255,.65) 47%,rgba(255,255,0,.65) 56%,transparent 68%);background-size:300% 100%;
  animation:sgFoil 4.6s cubic-bezier(.45,.05,.35,1) infinite;animation-delay:var(--fdl,0s)}
.hm-foil::after{content:"";position:absolute;inset:0;opacity:.28;
  background:linear-gradient(calc(110deg + var(--mx) * 30deg),rgba(255,255,255,0) 30%,rgba(255,255,255,.9) 50%,rgba(255,255,255,0) 70%);
  background-size:260% 100%;background-position:calc(50% - var(--mx) * 60%) 0}
/* back of the card */
.hm-back{transform:rotateY(180deg);display:grid;place-items:center;background:var(--sg-ink)}
.hm-back::before{content:"";position:absolute;inset:-40%;background:repeating-conic-gradient(from 0deg,rgba(254,214,84,.5) 0 7deg,rgba(254,214,84,0) 7deg 18deg);animation:sgSpin 18s linear infinite}
.hm-back::after{content:"";position:absolute;inset:3cqw;border-radius:2.4cqw;border:.6cqw dashed rgba(254,214,84,.6)}
.hm-back img{position:relative;z-index:1;width:72%;height:auto;filter:drop-shadow(.8cqw 1cqw 0 #000)}
.hm-back span{position:absolute;bottom:9%;left:0;right:0;z-index:1;text-align:center;font-family:var(--sg-display);font-size:3.2cqw;color:var(--sg-y1);text-transform:uppercase;letter-spacing:.06em}
/* the rare reveal */
.hm-burst{position:absolute;left:50%;top:44%;width:120%;aspect-ratio:1;translate:-50% -50%;z-index:4;pointer-events:none;opacity:0;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.95) 0 3deg,rgba(255,255,255,0) 3deg 20deg);
  -webkit-mask:radial-gradient(closest-side,#000 14%,transparent 72%);mask:radial-gradient(closest-side,#000 14%,transparent 72%)}
.hm-burst.go{animation:hmBurst 1.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes hmBurst{0%{opacity:0;transform:scale(.35) rotate(0)}30%{opacity:1}100%{opacity:0;transform:scale(1.25) rotate(24deg)}}
.hm-stamp{position:absolute;right:-9%;top:44%;z-index:6;padding:1.2cqw 2cqw 1cqw;border-radius:2cqw;background:var(--sg-grad);border:.8cqw solid var(--sg-ink);
  box-shadow:.8cqw 1cqw 0 var(--sg-ink);font-family:var(--sg-shout);font-size:3.6cqw;line-height:1;color:var(--sg-ink);text-transform:uppercase;transform:rotate(12deg);opacity:0;pointer-events:none}
.hm-stamp.go{animation:hmStamp .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes hmStamp{0%{opacity:0;transform:rotate(12deg) scale(3)}100%{opacity:1;transform:rotate(12deg) scale(1)}}
.hm-say{position:absolute;left:4%;bottom:2%;z-index:7;padding:1.6cqw 2.4cqw 1.2cqw;border-radius:2.6cqw;background:#fff;border:.7cqw solid var(--sg-ink);box-shadow:.7cqw .9cqw 0 var(--sg-ink);
  font-family:var(--sg-display);font-size:3cqw;text-transform:uppercase;line-height:1;color:var(--sg-ink);rotate:-4deg}
.hm-say b{color:#7a3fd8;font-weight:400}
.hm-stage .sg-spark{z-index:6}

.hm-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:clamp(20px,3vw,40px) 0 0;padding-bottom:clamp(36px,5vw,60px)}
.hm-facts .sg-fact{min-width:0}

@media(max-width:900px){
  .hm-hero__in{grid-template-columns:1fr;min-height:0;gap:6px}
  .hm-hero__copy{max-width:none}
  .hm-stage{max-width:560px;margin:4px auto 0;aspect-ratio:1/0.92}
  .hm-slot{width:calc(var(--w,40) * 1.1%);left:calc(50% + (var(--x) - 50) * .86%)}
  .hm-facts{grid-template-columns:repeat(2,1fr);gap:10px}
  .hm-cta .btn-gold{flex:1 1 100%}
}
@media(max-width:520px){
  .hm-hero .sg-pills .sg-pill{height:27px;font-size:10.5px;padding:0 10px}
  .hm-hero h1{--sg-st:6px;font-size:clamp(40px,11.4vw,54px);text-shadow:4px 6px 0 var(--sg-ink)}
  .hm-hero .sg-lead{font-size:16px;margin-top:12px}
  .hm-cta{margin-top:18px;gap:10px}
  .hm-cta .sg-trailer{flex:1 1 100%}
}

/* ── gameplay band ──────────────────────────────────────────────────────── */
.hm-play .sg-reel{grid-auto-flow:dense}
.hm-play .sg-clip__frame video{background:#0b0910}
.hm-tag{position:absolute;left:12px;top:12px;z-index:2}
.hm-play .sg-clip--big figcaption b{font-size:clamp(22px,2vw,28px)}

/* ── what you do ────────────────────────────────────────────────────────── */
.hm-do{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.hm-do__i{display:flex;flex-direction:column;padding:12px 12px 18px}
.hm-do__art{position:relative;aspect-ratio:16/10;border-radius:14px;border:3px solid var(--sg-ink);overflow:hidden;background:#0b0910}
.hm-do__art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.hm-do__i:hover .hm-do__art img{transform:scale(1.06)}
.hm-do__no{position:absolute;left:-8px;top:-16px;z-index:3;padding:6px 12px 4px;border-radius:12px;background:var(--sg-ink);color:var(--sg-y1);font-family:var(--sg-display);font-size:20px;line-height:1;transform:rotate(-4deg)}
.hm-do__i:nth-child(even) .hm-do__no{background:var(--sg-purple);color:#fff}
.hm-do__i h3{font-family:var(--sg-display);font-weight:400;text-transform:uppercase;font-size:clamp(21px,1.9vw,26px);line-height:1;margin:14px 4px 6px;color:var(--sg-ink)}
.hm-do__i p{font-size:15px;line-height:1.5;margin:0 4px}
.hm-do__i .sg-keys{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 4px 0;font-weight:800;font-size:13px;color:var(--sg-ink)}
.hm-become{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:stretch;gap:0;margin-top:clamp(28px,4vw,48px);overflow:hidden;padding:0}
.hm-become__art{position:relative;height:100%;min-height:260px;border-right:4px solid var(--sg-ink)}
.hm-become__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hm-become__body{padding:clamp(20px,3vw,40px)}
.hm-become__body .sg-title{color:var(--sg-ink);-webkit-text-stroke:0;text-shadow:none}
.hm-become__body .sg-keys{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin-top:16px;font-weight:800;font-size:14px}
@media(max-width:1000px){.hm-do{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}}
@media(max-width:760px){.hm-become{grid-template-columns:1fr}.hm-become__art{min-height:0;aspect-ratio:16/9;border-right:0;border-bottom:4px solid var(--sg-ink)}}
@media(max-width:520px){.hm-do{grid-template-columns:1fr}}

/* ── creature rail ──────────────────────────────────────────────────────── */
.l-mates.hm-rail{background:var(--sg-grad)!important}
.hm-rail .l-mates__bar{margin-top:6px}
.hm-rail .l-mates__count{color:#2b2630}
.hm-rail .l-mates__count b{color:var(--sg-ink)}
.hm-rail .a-chip{background:var(--sg-paper)!important;color:var(--sg-ink)!important;box-shadow:2px 3px 0 var(--sg-ink)}
.hm-rail .a-chip[aria-pressed="true"]{background:var(--sg-ink)!important;color:var(--sg-y1)!important}
.hm-rail .a-parade{padding-top:20px!important}
.hm-rail .l-empty{color:#2b2630}

/* ── packs teaser ───────────────────────────────────────────────────────── */
.hm-packs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.hm-packs__art{position:relative;aspect-ratio:1/0.82;container-type:inline-size}
.hm-packs__art::before{content:"";position:absolute;left:50%;top:50%;width:120%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(254,214,84,.35) 0 6deg,transparent 6deg 16deg);
  -webkit-mask:radial-gradient(closest-side,#000 10%,transparent 72%);mask:radial-gradient(closest-side,#000 10%,transparent 72%);animation:sgSpin 70s linear infinite}
.hm-pack{position:absolute;bottom:4%;width:30%;transform-origin:50% 100%}
.hm-pack img{width:100%;height:auto;filter:drop-shadow(0 0 4cqw rgba(255,214,90,.45)) drop-shadow(1.4cqw 2cqw 0 #060509)}
.hm-pack--a{left:6%;rotate:-12deg}
.hm-pack--b{left:35%;width:34%;bottom:9%;z-index:2}
.hm-pack--c{right:4%;rotate:11deg}
.hm-pack__tag{position:absolute;left:50%;bottom:-6%;translate:-50% 0;white-space:nowrap}
.hm-packs .sg-ticks li{color:var(--a-soft)}
.hm-packs__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hm-fine{margin-top:16px;font-size:13px;line-height:1.5;color:var(--a-dim)}
@media(max-width:860px){.hm-packs{grid-template-columns:1fr}.hm-packs__art{max-width:520px;width:92%;margin:0 auto}}

/* ── player / creator ───────────────────────────────────────────────────── */
.hm-you{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.hm-you__i{display:flex;flex-direction:column;padding:clamp(18px,2.2vw,28px)}
.hm-you__i .sg-title{color:var(--sg-ink);-webkit-text-stroke:0;text-shadow:none}
.hm-you__i .btn{align-self:flex-start;margin-top:auto}
.hm-you__i .sg-ticks{margin-bottom:22px}
.hm-pc{display:flex;align-items:center;gap:14px;padding:12px;margin-bottom:16px;border-radius:16px;background:var(--sg-ink);color:#fff;border:3px solid var(--sg-ink);box-shadow:4px 5px 0 rgba(17,16,21,.35)}
.hm-pc__av{flex:0 0 auto;width:62px;height:62px;border-radius:14px;border:3px solid #fff;overflow:hidden;background:radial-gradient(circle at 50% 65%,#fff,var(--c,var(--sg-y1)) 80%)}
.hm-pc__av img{width:100%;height:100%;object-fit:contain}
.hm-pc__m{min-width:0;flex:1 1 auto}
.hm-pc__m b{display:block;font-family:var(--sg-display);font-weight:400;font-size:20px;line-height:1;text-transform:uppercase}
.hm-pc__m small{display:block;margin-top:4px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#cfc6e4}
.hm-pc__m .sg-bar{margin-top:8px;--h:12px}
.hm-pc__lv{flex:0 0 auto;font-family:var(--sg-display);font-size:26px;color:var(--sg-y1);line-height:1;text-align:center}
.hm-pc__lv small{display:block;font-size:11px;color:#cfc6e4}
.hm-pc--cr{background:linear-gradient(180deg,#a66bff,#7a2ff0)}
.hm-code{font-family:var(--sg-display);font-size:18px;letter-spacing:.06em;padding:4px 10px 2px;border-radius:10px;background:#fff;color:var(--sg-ink);border:2px solid var(--sg-ink)}
@media(max-width:860px){.hm-you{grid-template-columns:1fr}}

/* ── FAQ on paper ───────────────────────────────────────────────────────── */
.hm-faq .a-list{max-width:860px;margin:0 auto;display:block}
.hm-faq .l-qa{background:var(--sg-paper)!important;box-shadow:var(--sg-pop)!important}
.hm-faq .l-qa summary{color:var(--sg-ink)!important}
.hm-faq .l-qa summary::after{border-color:var(--sg-ink)}
.hm-faq .l-qa[open]{background:#fff!important}

/* ── final ──────────────────────────────────────────────────────────────── */
.hm-final .sg-title{margin-top:8px}
.hm-final .sg-final__cast>div{width:28%;max-width:210px}
.hm-final .sg-final__cast>div:nth-child(2){width:34%;max-width:250px}
.hm-final .sg-final__cast img{width:100%!important;max-width:none}
.hm-plat{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}

/* hold the opening while the first visit intro is on screen */
.q-in-pre .hm-deal,.q-in-pre .hm-hero__copy>*{animation-play-state:paused}

/* ── reduced motion: everything still, cards face up ───────────────────── */
@media (prefers-reduced-motion:reduce){
  .hm-hero__copy>*,.hm-deal,.hm-bob,.hm-rays,.hm-art::before,.hm-back::before,.hm-foil::before,.hm-note i,.hm-packs__art::before{animation:none!important}
  .hm-slot,.hm-tilt{transform:translate(-50%,0) rotate(calc(var(--r) * 1deg)) scale(var(--s,1))}
  .hm-tilt{transform:none}
  .hm-card{transition:none}
}

/* ── round 2 polish (25 Oct) ────────────────────────────────────────────── */
/* element chips on the roster rail: 44 px tall on touch, rail cards glide and snap */
@media (pointer:coarse){.hm-rail .a-chip{min-height:44px;padding-left:14px;padding-right:14px}}
.hm-rail .a-parade{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.hm-rail .a-parade>*{scroll-snap-align:center}
@media (min-width:861px){.hm-rail .a-parade>*{scroll-snap-align:start}}
/* rail cards: a soft lift and a slight lean as the pointer arrives (sticker.js tilts) */
.hm-rail .a-mate{transition:translate .35s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
@media (hover:hover){.hm-rail .a-mate:hover{translate:0 -6px}}
/* the pack trio: smaller on phones so the copy and buttons arrive sooner */
@media(max-width:600px){.hm-packs__art{width:84%;aspect-ratio:1/0.7}.hm-packs{gap:14px}}
/* packs breathe on their own rhythm; the hovered one rises */
@media (hover:hover){.hm-packs__art .hm-pack{transition:translate .45s cubic-bezier(.2,.8,.2,1)}.hm-packs__art .hm-pack:hover{translate:0 -14px}}
/* stats grid: no number jumps the row height while counting up */
.hm-facts .a-num{font-variant-numeric:tabular-nums}

/* ── QA round (25 Oct): packs straight after the hero, live island band ── */
/* phones: the copy and both buttons come before the pack art, so the first pack link
   sits inside the second screen */
@media(max-width:860px){.hm-packs>div:not(.hm-packs__art){order:-1}.hm-packs__art{max-width:360px}}
#packs.sg-sec{padding-top:clamp(40px,6vw,90px)}

/* live on the island: game feed + builds, two dark plates */
.hm-live__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(16px,2.4vw,28px);margin-top:clamp(22px,3vw,36px);align-items:start}
@media(max-width:900px){.hm-live__grid{grid-template-columns:1fr}}
.hm-feed,.hm-builds{padding:clamp(18px,2.2vw,26px)}
.hm-feed__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.hm-feed__head h3{margin:0;font-family:var(--sg-display);font-weight:400;font-size:clamp(22px,2.2vw,28px);text-transform:uppercase;color:#fff;line-height:1}
.hm-live__dot{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px;border-radius:99px;background:rgba(255,255,255,.08);border:2px solid #060509;
  font-weight:900;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#d9ffcf}
.hm-live__dot::before{content:"";width:8px;height:8px;border-radius:50%;background:#6FCF5F;box-shadow:0 0 10px #6FCF5F;animation:hmLive 1.6s ease-in-out infinite}
.hm-live__dot.is-off{color:#ddd6ea}.hm-live__dot.is-off::before{background:#8a8578;box-shadow:none;animation:none}
@keyframes hmLive{50%{opacity:.35}}
.hm-feed__nums{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hm-feed__n{padding:14px;border-radius:18px;background:var(--sg-plate);border:3px solid var(--sg-ink);box-shadow:var(--sg-pop-dark);min-width:0}
.hm-feed__n b{display:block;font-family:var(--sg-display);font-weight:400;font-size:clamp(30px,3.4vw,44px);line-height:1;color:var(--sg-y1);font-variant-numeric:tabular-nums}
.hm-feed__n span{display:block;margin-top:6px;font-weight:900;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#ddd6ea}
.hm-feed__n small{display:block;margin-top:4px;font-size:12.5px;line-height:1.35;color:var(--a-soft)}
.hm-feed__top{margin-top:14px;padding:14px;border-radius:18px;background:rgba(255,255,255,.04);border:2px solid rgba(0,0,0,.5)}
.hm-feed__k{font-weight:900;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#ddd6ea}
.hm-feed__top ol{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.hm-feed__top li{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:40px;padding:6px 12px;border-radius:12px;background:var(--sg-plate);color:#fff;font-weight:800}
.hm-feed__top li:first-child{background:var(--sg-grad);color:var(--sg-ink)}
.hm-feed__top li b{font-family:var(--sg-display);font-weight:400;font-size:20px}
.hm-feed__note{margin:14px 0 0;font-size:14px;color:var(--a-soft)}
.hm-feed__note a,.hm-builds__more{color:var(--sg-y1);font-weight:900;text-decoration:underline;text-underline-offset:3px}
.hm-builds{background:var(--sg-plate)!important}
.hm-builds .q-builds__nums{margin:0 0 14px}
.hm-builds .b-list{margin-top:14px}
.hm-builds__more{display:inline-flex;align-items:center;min-height:44px;margin-top:8px}
@media(max-width:600px){.hm-builds .q-builds__nums{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){.hm-live__dot::before{animation:none}}