/* ==========================================================================
   STICKER GLOW for aneemate.com
   The web twin of the approved in game look (brand kit "Sticker Drop" plus the
   "Night Signal" glow): ink outlined collector cards with a holo foil sheen, white
   sticker outlines on renders, hard ink shadows, a brand yellow sunburst with
   halftone, glowing HP, shield and XP bars, and element colours.

   Load order: brand.css, arceus.css, page css, qskin.css (header), then this file
   (header). It re-points the Arceus and QORPO tokens, restyles the shared parts and
   adds the sg- components used by the new sections. Motion lives in sticker.js.
   ========================================================================== */

:root{
  /* ink and paper */
  --sg-ink:#111015; --sg-ink2:#1f2430; --sg-ink3:#5b6373;
  --sg-paper:#fffdf6; --sg-cream:#FFF4D6;
  --sg-y1:#FED654; --sg-y2:#F8A531; --sg-amber:#f5a524; --sg-amber2:#ffcf4a;
  --sg-purple:#9146FF; --sg-purple2:#b98cff;
  --sg-grad:linear-gradient(180deg,#FED654 0%,#F8A531 100%);
  /* night ground */
  --sg-night:#16121f; --sg-night2:#1f1830; --sg-plate:linear-gradient(180deg,#2a2440,#17131f);
  /* strokes, radii, shadows */
  --sg-pop:4px 5px 0 var(--sg-ink);
  --sg-pop-card:8px 10px 0 var(--sg-ink);
  --sg-pop-dark:5px 6px 0 #060509;
  --sg-r-card:22px; --sg-r-tile:16px; --sg-r-btn:14px;
  /* bars and glow */
  --sg-hp:linear-gradient(180deg,#9cf58a,#37b54a); --sg-hp-glow:0 0 8px rgba(120,245,120,.9),0 0 20px rgba(55,200,80,.55);
  --sg-sh:linear-gradient(180deg,#9ef3ff,#2e9bff); --sg-sh-glow:0 0 8px rgba(120,225,255,.9),0 0 20px rgba(46,155,255,.55);
  --sg-xp:linear-gradient(180deg,#ffe27a,#f5a524); --sg-xp-glow:0 0 8px rgba(255,214,90,.9),0 0 18px rgba(245,165,36,.5);
  /* elements */
  --fire:#ff7a45; --water:#5ab8ff; --nature:#6fcf5f; --electric:#ffd23f; --ice:#8fe3f0; --rock:#c9a36b; --psychic:#d9b8ff;
  --sg-display:LilitaOne,"Lilita One","Arial Black",Impact,sans-serif;
  --sg-shout:XHeighting,LilitaOne,"Lilita One",Impact,sans-serif;
  --sg-body:AneeBody,"Cabinet Grotesk","Segoe UI",Arial,sans-serif;
  --sg-max:1240px;

  /* Arceus tokens pointed at Sticker Glow */
  --a-night:var(--sg-night); --a-night-2:var(--sg-night2);
  --a-smoke:rgba(36,29,54,.94); --a-smoke-hi:rgba(28,22,42,.97);
  --a-band:rgba(44,36,66,.9); --a-band-hi:rgba(60,49,90,.96); --a-tile:#2a2240;
  --a-rule:rgba(255,255,255,.16); --a-rule-2:rgba(255,255,255,.09);
  --a-rim:inset 0 0 0 2px rgba(255,255,255,.07);
  --a-cream:var(--sg-cream); --a-cream-2:#ffe9b8; --a-parchment:var(--sg-paper);
  --a-ink:var(--sg-ink); --a-ink-2:#3c3b45;
  --a-text:#fffdf6; --a-soft:#ddd6ea; --a-dim:#aaa2bd;
  --a-gold:var(--sg-y2); --a-gold-hi:var(--sg-y1); --a-gold-lo:#c47a12;
  --a-grad-gold:var(--sg-grad); --a-grad-gold-h:linear-gradient(90deg,#FED654,#F8A531);
  --a-purple:var(--sg-purple); --a-purple-soft:var(--sg-purple2);
  --a-display:var(--sg-display); --a-body:var(--sg-body);
  --a-shadow:var(--sg-pop-dark);
  --el-psychic:#d9b8ff;
  /* QORPO skin tokens pointed back at the AneeMate fonts and colours */
  --q-bg:var(--sg-night); --q-bg2:var(--sg-night2); --q-panel:#2a2240; --q-panel2:#342a4f;
  --q-line:rgba(255,255,255,.09); --q-line2:rgba(255,255,255,.16);
  --q-text:#fffdf6; --q-muted:#ddd6ea; --q-dim:#aaa2bd;
  --q-mint:var(--sg-y1); --q-mint2:var(--sg-y2); --q-gold:var(--sg-y1); --q-gold2:var(--sg-y2); --q-am:var(--sg-y1);
  --q-disp:var(--sg-display); --q-ui:var(--sg-body); --q-mono:var(--sg-body);
}

/* ── ground ─────────────────────────────────────────────────────────────── */
html{background:var(--sg-night)}
body,body.arc{background:var(--sg-night);color:var(--a-text);font-family:var(--sg-body);font-weight:500}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 50% at 88% 6%,rgba(145,70,255,.20),transparent 70%),
    radial-gradient(55% 45% at 6% 96%,rgba(248,165,49,.13),transparent 70%),
    radial-gradient(circle,rgba(255,255,255,.05) 1.2px,transparent 1.8px) 0 0/16px 16px}
body.arc ::selection,::selection{background:var(--sg-y1);color:var(--sg-ink)}
:focus-visible,body.arc :focus-visible{outline:3px solid var(--sg-y1)!important;outline-offset:3px}
main{overflow-x:clip}

/* ── type ───────────────────────────────────────────────────────────────── */
.a-h1,.a-h2,h1.a-h1,h2.a-h2{font-family:var(--sg-display)!important;font-weight:400;text-transform:uppercase;letter-spacing:.01em;color:#fff;
  -webkit-text-stroke:var(--sg-stroke,5px) var(--sg-ink);paint-order:stroke fill;text-shadow:4px 5px 0 var(--sg-ink)}
.a-h1{--sg-stroke:7px;font-size:clamp(38px,6.4vw,92px);line-height:.94;text-shadow:5px 7px 0 var(--sg-ink)}
.a-h2{--sg-stroke:5px;font-size:clamp(30px,4.4vw,62px);line-height:.98}
.a-h3,h3.a-h3{font-family:var(--sg-display)!important;font-weight:400;text-transform:uppercase;letter-spacing:.01em;color:var(--sg-cream)}
.a-gold-text,em.a-gold-text,span.a-gold-text{background:none!important;-webkit-text-fill-color:var(--sg-y1)!important;color:var(--sg-y1)!important;font-style:normal}
.a-label{font-family:var(--sg-body)!important;font-weight:900;letter-spacing:.16em;color:var(--sg-y1)}
.a-label--ink,.a-parch .a-label{color:var(--sg-ink)}
.a-lead{color:var(--a-soft)}
.a-num{font-family:var(--sg-display)!important}
.a-rulehead::before,.a-rulehead::after{background:linear-gradient(90deg,transparent,rgba(254,214,84,.6))!important;height:2px!important}
.a-rulehead::after{background:linear-gradient(270deg,transparent,rgba(254,214,84,.6))!important}
.a-diamond{background:var(--sg-grad)!important;box-shadow:0 0 0 2px var(--sg-ink)}
.a-live{color:#9cf58a}
.a-live::before{box-shadow:0 0 10px currentColor}
.a-fine{color:var(--a-dim)}
.a-link{color:var(--sg-y1)}
.a-key,kbd{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 7px;border-radius:8px;background:var(--sg-ink2);color:#fff;
  font-family:var(--sg-display);font-weight:400;font-size:15px;letter-spacing:.02em;line-height:1;border:2px solid #fff;
  box-shadow:0 0 0 2px var(--sg-ink),2px 3px 0 2px var(--sg-ink)}

/* ── buttons (shape stays the brand clip path from brand.js) ─────────────── */
.btn{font-family:var(--sg-display)!important;font-weight:400;text-transform:uppercase;letter-spacing:.02em;border-radius:0}
.btn-gold,.btn-y,.q-btn-gold{background:var(--sg-grad)!important;color:var(--sg-ink)!important;text-shadow:none!important;
  box-shadow:inset 0 -5px 0 rgba(120,60,0,.22),inset 0 3px 0 rgba(255,255,255,.55)!important}
.btn-gold img,.btn-y img{filter:brightness(0)!important;opacity:1!important}
/* the Epic Games logo keeps its own black shield and white letters on gold (round 3) */
.btn-gold img[src*="Epic-Games-Logo"],.btn-y img[src*="Epic-Games-Logo"]{filter:none!important}
.btn-smoke,.btn-o,.btn-cream{background:var(--sg-paper)!important;color:var(--sg-ink)!important;text-shadow:none!important;
  box-shadow:inset 0 -5px 0 rgba(17,16,21,.12)!important}
.btn-qorpo,.btn-p{background:linear-gradient(180deg,#a66bff,#7a2ff0)!important;color:#fff!important;box-shadow:inset 0 -5px 0 rgba(0,0,0,.2),inset 0 3px 0 rgba(255,255,255,.3)!important}
.btn:hover{transform:translateY(-3px) rotate(-.6deg) scale(1.02)}
.btn:active{transform:translateY(1px) scale(.98)}
.a-iconbtn{background:var(--sg-paper)!important;color:var(--sg-ink)!important;border:3px solid var(--sg-ink);box-shadow:var(--sg-pop)!important}
.a-iconbtn:hover{background:var(--sg-y1)!important}

/* ── header ─────────────────────────────────────────────────────────────── */
.top{background:rgba(17,16,21,.94)!important;border-bottom:0!important;box-shadow:0 3px 0 var(--sg-y2),0 10px 30px rgba(0,0,0,.35)}
.top .mainnav a{font-family:var(--sg-display)!important;font-weight:400;font-size:15px!important;letter-spacing:.03em!important;text-transform:uppercase;
  color:var(--sg-cream)!important;border-radius:12px!important;padding:8px 10px!important}
.top .mainnav a::after{display:none!important}
.top .mainnav a:hover{background:var(--sg-y1)!important;color:var(--sg-ink)!important;transform:rotate(-2deg)}
.top .mainnav a[aria-current="page"]{background:var(--sg-paper)!important;color:var(--sg-ink)!important;box-shadow:3px 4px 0 var(--sg-y2)}
@media(max-width:1480px){.top .mainnav a{font-size:13.5px!important;padding:8px 6px!important}}
@media(max-width:1120px){.top .mainnav a{font-size:12.5px!important;padding:7px 5px!important}}
.q-buy{background:rgba(255,255,255,.06)!important;border:2px solid rgba(254,214,84,.55)!important;color:var(--sg-cream)!important;font-family:var(--sg-body)!important}
.drawer{background:radial-gradient(120% 60% at 80% 0%,#2a1d48,var(--sg-night) 70%)!important}
.drawer-nav a{font-family:var(--sg-display)!important;text-transform:uppercase!important;color:#fff!important}
.drawer-nav a b{color:var(--sg-y1)!important;font-family:var(--sg-body)}
.skip:focus{background:var(--sg-y1);color:var(--sg-ink)}

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot{background:linear-gradient(180deg,#120e1a,#0a080f)!important;color:var(--a-soft)!important;border-top:3px solid var(--sg-y2)}
.foot .wordmark{filter:drop-shadow(4px 5px 0 #000)}
.foot-links a{font-family:var(--sg-display);text-transform:uppercase;letter-spacing:.02em;color:var(--sg-cream)}
.foot-links a:hover{color:var(--sg-y1)}
.foot-links a::before{background:var(--sg-y1)!important;opacity:1!important}
.foot-token,.foot-ex a{background:var(--sg-plate)!important;border:3px solid var(--sg-ink);box-shadow:var(--sg-pop-dark),var(--a-rim)!important;border-radius:16px}
.bd-band{border-radius:var(--sg-r-card);background:var(--sg-paper)!important;color:var(--sg-ink)!important;border:4px solid var(--sg-ink);box-shadow:var(--sg-pop-card)}
.bd-band h2{color:var(--sg-ink)!important;font-family:var(--sg-display)!important;text-transform:uppercase}
.bd-band p{color:#3c3b45!important}
.bd-band .bd-eyebrow{color:#a05a00!important}
.bd-card{background:#fff!important;border:3px solid var(--sg-ink)!important;border-radius:16px!important;box-shadow:var(--sg-pop)!important;color:var(--sg-ink)!important;overflow:hidden}
.bd-card-title{color:var(--sg-ink)!important}
.bd-card-cta,.bd-blog-link{color:#7a3fd8!important}

/* ── panels become sticker plates ───────────────────────────────────────── */
.a-panel,.a-smoke{background:var(--sg-plate)!important;border:3px solid var(--sg-ink);border-radius:20px!important;
  box-shadow:var(--sg-pop-dark),inset 0 0 0 2px rgba(255,255,255,.07)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.a-panel__head{font-family:var(--sg-display)!important;text-transform:uppercase;letter-spacing:.02em;color:var(--sg-cream);border-bottom:2px dashed rgba(255,255,255,.14)!important}
.a-band{background:rgba(255,255,255,.05)!important;border:2px solid rgba(0,0,0,.55);border-radius:14px!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)!important}
.a-band::before{background:var(--sg-grad)!important}
.a-band.is-on,.a-band[aria-selected="true"]{background:var(--sg-paper)!important;color:var(--sg-ink)!important;border-color:var(--sg-ink);box-shadow:var(--sg-pop)!important}
.a-band.is-on *,.a-band[aria-selected="true"] *{color:var(--sg-ink)!important}
.a-band__v{font-family:var(--sg-display)!important;color:var(--sg-y1)}
.a-parch{background-color:var(--sg-paper)!important;background-image:radial-gradient(circle,rgba(17,16,21,.07) 1.4px,transparent 2px)!important;background-size:12px 12px!important;
  color:var(--sg-ink)!important;border:4px solid var(--sg-ink);border-radius:var(--sg-r-card)!important;box-shadow:var(--sg-pop-card),0 0 40px rgba(254,214,84,.18)!important}
.a-parch p,.a-parch li,body.arc .a-parch p{color:#3c3b45!important}
.a-parch .a-h3{color:var(--sg-ink)!important}
.a-tabs{background:rgba(0,0,0,.35)!important;border:2px solid var(--sg-ink);border-radius:999px;padding:4px}
.a-tab{font-family:var(--sg-display)!important;font-weight:400;font-size:15px!important;letter-spacing:.03em!important;text-transform:uppercase;color:var(--sg-cream)!important;border-radius:999px}
.a-tab[aria-selected="true"]{background:var(--sg-grad)!important;color:var(--sg-ink)!important;box-shadow:inset 0 0 0 2px var(--sg-ink)}
.a-chip{font-family:var(--sg-body);font-weight:900;border:2px solid var(--sg-ink);background:rgba(255,255,255,.06)!important;color:var(--sg-cream)!important}
.a-chip[aria-pressed="true"]{background:var(--sg-paper)!important;color:var(--sg-ink)!important;box-shadow:3px 4px 0 var(--sg-ink)}
.a-el{border:2px solid var(--sg-ink);background:var(--c)!important;color:var(--sg-ink)!important;box-shadow:none!important;font-weight:900}
.a-el svg{background:#fff!important;box-shadow:0 0 0 2px var(--sg-ink)}
.a-rar{border:2px solid var(--sg-ink);background:var(--c)!important;color:var(--sg-ink)!important;font-weight:900;box-shadow:0 0 12px color-mix(in srgb,var(--c) 70%,transparent)}
.a-rar::before{background:#fff!important}
.a-skel{background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.14),rgba(255,255,255,.06))!important}

/* ── creature cards (parade, Matebook, pickers) become collector cards ───── */
.a-mate{background-color:var(--sg-paper)!important;background-image:radial-gradient(circle,rgba(17,16,21,.07) 1.3px,transparent 1.9px)!important;background-size:11px 11px!important;
  color:var(--sg-ink)!important;border:4px solid var(--sg-ink);border-radius:22px!important;box-shadow:var(--sg-pop-card)!important;padding-top:150px!important;margin-top:20px!important;overflow:hidden;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.a-mate::before{left:10px!important;right:10px;top:10px!important;width:auto!important;height:136px!important;margin-left:0!important;border-radius:14px!important;
  border:3px solid var(--sg-ink);box-shadow:none!important;
  background:repeating-conic-gradient(from 0deg at 50% 70%,rgba(255,255,255,.32) 0 8deg,transparent 8deg 20deg),radial-gradient(circle at 50% 70%,#fff 0,var(--c) 70%)!important}
.a-mate::after{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;z-index:3;mix-blend-mode:overlay;opacity:0;
  background:linear-gradient(115deg,transparent 22%,rgba(255,0,200,.55) 36%,rgba(0,220,255,.55) 46%,rgba(255,255,0,.55) 56%,transparent 70%);background-size:300% 100%;background-position:var(--fx,120%) 0;transition:opacity .25s}
.a-mate__art{top:6px!important;height:150px!important;width:170px!important;margin-left:-85px!important;
  filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(3px 4px 0 rgba(17,16,21,.85))!important}
.a-mate__art--icon{top:24px!important;width:110px!important;height:110px!important;margin-left:-55px!important}
.a-mate__name{font-family:var(--sg-display)!important;text-transform:uppercase;color:var(--sg-ink)!important;font-size:24px!important}
.a-mate__meta{border-top:2px dashed rgba(17,16,21,.18)!important}
.a-mate__no{color:var(--sg-ink3)!important}
.a-mate__marker{display:none}
.a-mate:hover,.a-mate:focus-visible{box-shadow:10px 13px 0 var(--sg-ink),0 0 34px color-mix(in srgb,var(--c) 70%,transparent)!important}
.a-mate:hover::after,.a-mate:focus-visible::after{opacity:.75}
.a-mate:hover .a-mate__art,.a-mate:focus-visible .a-mate__art{transform:translateY(-6px) scale(1.06)}
.a-mate--sm{padding-top:128px!important}
.a-mate--sm::before{height:112px!important}
.a-mate--sm .a-mate__art{height:124px!important;width:140px!important;margin-left:-70px!important}
.a-mate--sm .a-mate__name{font-size:20px!important}
.a-parade{padding-top:14px!important;padding-bottom:26px!important}

/* map pins */
.a-pin__dot{background:var(--sg-grad)!important;box-shadow:0 0 0 2px var(--sg-ink),0 0 14px rgba(254,214,84,.8)!important}
.a-pin__label{background:var(--sg-paper)!important;color:var(--sg-ink)!important;border:2px solid var(--sg-ink);box-shadow:2px 3px 0 var(--sg-ink)!important;font-family:var(--sg-display)!important;font-weight:400!important;letter-spacing:.03em!important;text-transform:uppercase}

/* FAQ */
.l-qa,.q-faq details{background:var(--sg-plate)!important;border:3px solid var(--sg-ink)!important;border-radius:18px!important;box-shadow:var(--sg-pop-dark)!important;margin-bottom:12px}
.l-qa summary,.q-faq summary{font-family:var(--sg-display)!important;text-transform:uppercase;letter-spacing:.02em;color:#fff}

/* ==========================================================================
   sg- components (new sections)
   ========================================================================== */
.sg-wrap{width:100%;max-width:var(--sg-max);margin:0 auto;padding:0 22px}
@media(max-width:600px){.sg-wrap{padding:0 16px}}
.sg-sec{position:relative;padding:clamp(64px,8vw,120px) 0}
.sg-sec--tight{padding:clamp(44px,6vw,80px) 0}
.sg-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the yellow sunburst band */
.sg-sun{position:relative;isolation:isolate;overflow:hidden;color:var(--sg-ink);background:var(--sg-grad)}
.sg-sun::before{content:"";position:absolute;left:50%;top:50%;width:max(2200px,170vmax);height:max(2200px,170vmax);margin:calc(max(2200px,170vmax)/-2) 0 0 calc(max(2200px,170vmax)/-2);z-index:-2;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.24) 0 6deg,rgba(255,255,255,0) 6deg 16deg);
  -webkit-mask:radial-gradient(closest-side,#000 18%,transparent 92%);mask:radial-gradient(closest-side,#000 18%,transparent 92%);animation:sgSpin 120s linear infinite}
.sg-sun::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle,rgba(17,16,21,.16) 1.6px,transparent 2.2px);background-size:14px 14px;
  -webkit-mask-image:linear-gradient(200deg,#000,transparent 55%);mask-image:linear-gradient(200deg,#000,transparent 55%)}
.sg-sun--burst-l::before{left:28%}
.sg-sun--burst-r::before{left:72%}
@keyframes sgSpin{to{transform:rotate(360deg)}}
body .sg-sun p,body .sg-sun li{color:#2b2630}
.sg-sun .a-lead,.sg-sun .sg-lead{color:#2b2630}
.sg-sun .a-label,.sg-sun .sg-k{color:var(--sg-ink)}
.sg-sun .a-gold-text,.sg-sun .sg-pop-text{-webkit-text-fill-color:#fff!important;color:#fff!important}
.sg-sun .a-fine{color:#4a4152}
.sg-sun a:not(.btn):not(.sg-card):not(.sg-tile){text-decoration:underline;text-underline-offset:3px}

/* the night band with glow */
.sg-night{position:relative;isolation:isolate;background:radial-gradient(70% 70% at 50% 0%,rgba(145,70,255,.22),transparent 70%),var(--sg-night)}
.sg-night--warm{background:radial-gradient(60% 70% at 50% 100%,rgba(248,165,49,.18),transparent 70%),var(--sg-night)}
.sg-edge{position:absolute;left:0;right:0;height:26px;z-index:2;pointer-events:none;
  background:linear-gradient(135deg,transparent 33.3%,var(--sg-ink) 33.3% 66.6%,transparent 66.6%) 0 0/26px 26px}

/* titles */
.sg-title{font-family:var(--sg-display);font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:.01em;color:#fff;
  -webkit-text-stroke:var(--sg-st,6px) var(--sg-ink);paint-order:stroke fill;text-shadow:5px 6px 0 var(--sg-ink);margin:0}
.sg-title--xl{--sg-st:7px;font-family:var(--sg-shout);font-size:clamp(42px,5.4vw,92px);text-shadow:6px 8px 0 var(--sg-ink)}
.sg-title--l{font-size:clamp(34px,5vw,72px)}
.sg-title--m{--sg-st:4px;font-size:clamp(26px,3.2vw,40px);text-shadow:3px 4px 0 var(--sg-ink)}
.sg-title .y{color:var(--sg-y1)}
.sg-sun .sg-title .y{color:#fff}
.sg-sun .sg-title{color:var(--sg-ink);-webkit-text-stroke:0;text-shadow:none}
.sg-sun .sg-title .w{color:#fff;-webkit-text-stroke:var(--sg-st,6px) var(--sg-ink);text-shadow:5px 6px 0 var(--sg-ink)}
.sg-k{display:inline-block;font-family:var(--sg-body);font-weight:900;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sg-y1)}
.sg-lead{font-size:clamp(16px,1.45vw,19px);line-height:1.6;max-width:62ch;color:var(--a-soft);margin:16px 0 0}
.sg-head{max-width:820px;margin:0 auto clamp(30px,4vw,54px);text-align:center}
.sg-head .sg-lead{margin-left:auto;margin-right:auto}
.sg-head--left{text-align:left;margin-left:0}
.sg-head--left .sg-lead{margin-left:0}

/* pills */
.sg-pills{display:flex;flex-wrap:wrap;gap:8px}
.sg-pill{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 13px;border-radius:999px;border:2.5px solid var(--sg-ink);background:#fff;color:var(--sg-ink);
  font-family:var(--sg-body);font-weight:900;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;line-height:1;white-space:nowrap;box-shadow:2px 3px 0 var(--sg-ink)}
.sg-pill--k{background:var(--sg-ink);color:#fff}
.sg-pill--p{background:var(--sg-purple);color:#fff}
.sg-pill--y{background:var(--sg-grad)}
.sg-pill--g{background:#9cf58a}
.sg-pill i{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}

/* key caps inside copy */
.sg-key{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 8px;border-radius:8px;background:var(--sg-ink2);color:#fff;
  font-family:var(--sg-display);font-weight:400;font-size:15px;line-height:1;border:2px solid #fff;box-shadow:0 0 0 2px var(--sg-ink),2px 3px 0 2px var(--sg-ink);vertical-align:middle;white-space:nowrap}
.sg-key--w{min-width:auto;padding:0 10px;font-size:13px}

/* paper plate and dark plate */
.sg-plate{position:relative;background-color:var(--sg-paper);background-image:radial-gradient(circle,rgba(17,16,21,.07) 1.4px,transparent 2px);background-size:12px 12px;
  color:var(--sg-ink);border:4px solid var(--sg-ink);border-radius:var(--sg-r-card);box-shadow:var(--sg-pop-card)}
body .sg-plate p,body .sg-plate li{color:#3c3b45}
.sg-plate-d{position:relative;background:var(--sg-plate);color:#fff;border:3px solid var(--sg-ink);border-radius:20px;box-shadow:var(--sg-pop-dark),inset 0 0 0 2px rgba(255,255,255,.07)}
body .sg-plate-d p,body .sg-plate-d li{color:var(--a-soft)}
.sg-sun .sg-plate-d{box-shadow:var(--sg-pop-card),inset 0 0 0 2px rgba(255,255,255,.07)}

/* ── collector card ─────────────────────────────────────────────────────── */
.sg-card{--c:var(--nature);position:relative;display:block;width:var(--w,260px);padding:12px;border-radius:24px;background:var(--sg-paper);border:5px solid var(--sg-ink);
  box-shadow:var(--sg-pop-card),0 0 44px color-mix(in srgb,var(--c) 55%,transparent);color:var(--sg-ink);text-decoration:none}
.sg-card__top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:var(--sg-display);font-size:18px;line-height:1}
.sg-card__art{position:relative;margin-top:9px;aspect-ratio:1/0.92;border-radius:16px;border:4px solid var(--sg-ink);overflow:hidden;
  background:radial-gradient(circle at 50% 64%,#fff 0,color-mix(in srgb,var(--c) 70%,#fff) 38%,var(--c) 78%)}
.sg-card__art::before{content:"";position:absolute;inset:-50%;background:repeating-conic-gradient(from 0deg at 50% 60%,rgba(255,255,255,.36) 0 8deg,transparent 8deg 20deg)}
.sg-card__art::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(17,16,21,.13) 1.4px,transparent 2px);background-size:11px 11px;
  -webkit-mask-image:linear-gradient(0deg,#000,transparent 60%);mask-image:linear-gradient(0deg,#000,transparent 60%)}
.sg-card__art img{position:absolute;left:50%;bottom:2%;width:96%;height:96%;object-fit:contain;object-position:50% 100%;transform:translateX(-50%);z-index:1;
  filter:drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff) drop-shadow(4px 5px 0 rgba(17,16,21,.85))}
.sg-card__name{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;font-family:var(--sg-display);font-size:clamp(22px,2.2vw,30px);text-transform:uppercase;line-height:1}
.sg-card__row{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.sg-card .sg-bar{margin-top:10px}
.sg-foil{position:absolute;inset:0;border-radius:19px;pointer-events:none;z-index:4;mix-blend-mode:overlay;opacity:.75;
  background:linear-gradient(115deg,transparent 24%,rgba(255,0,200,.6) 37%,rgba(0,220,255,.6) 47%,rgba(255,255,0,.6) 57%,transparent 70%);background-size:300% 100%;
  animation:sgFoil 4s cubic-bezier(.45,.05,.35,1) infinite}
.sg-tilt .sg-foil,.sg-hovertilt .sg-foil{animation:sgFoil 4s cubic-bezier(.45,.05,.35,1) infinite}
@keyframes sgFoil{0%,12%{background-position:120% 0}62%,100%{background-position:-20% 0}}
.sg-new{position:absolute;right:-20px;top:-22px;z-index:5;transform:rotate(12deg);padding:8px 13px 6px;border-radius:13px;background:var(--sg-grad);border:4px solid var(--sg-ink);
  box-shadow:var(--sg-pop);font-family:var(--sg-shout);font-size:22px;line-height:1;color:var(--sg-ink)}
.sg-lv{display:inline-flex;align-items:baseline;gap:3px;border-radius:999px;background:var(--sg-ink);color:#fff;border:2px solid #fff;box-shadow:0 0 0 2px var(--sg-ink);
  font-family:var(--sg-display);font-size:15px;line-height:1;padding:4px 9px 3px}
.sg-lv small{font-size:10px;color:var(--sg-amber2)}
.sg-rar{display:inline-flex;align-items:center;padding:4px 10px 3px;border-radius:99px;border:2.5px solid var(--sg-ink);background:var(--rc,#d8d3c6);
  font-family:var(--sg-display);font-size:13px;text-transform:uppercase;line-height:1;color:var(--sg-ink)}
.sg-epill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;background:var(--c);border:2.5px solid var(--sg-ink);padding:3px 10px 3px 3px;
  font-family:var(--sg-body);font-weight:900;font-size:11px;letter-spacing:.12em;text-transform:uppercase;line-height:1;color:var(--sg-ink)}
.sg-epill::before{content:"";width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--sg-ink),inset 0 0 0 4px var(--c)}
.fire{--c:var(--fire)} .water{--c:var(--water)} .nature{--c:var(--nature)} .electric{--c:var(--electric)} .ice{--c:var(--ice)} .rock{--c:var(--rock)} .psychic{--c:var(--psychic)}

/* glowing bars */
.sg-bar{position:relative;height:var(--h,14px);background:#1b1d27;border:3px solid var(--sg-ink);border-radius:99px}
.sg-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)}
.sg-bar i::after{content:"";position:absolute;left:3px;right:3px;top:1px;height:36%;border-radius:99px;background:rgba(255,255,255,.55)}
.sg-bar--sh i{background:var(--sg-sh);box-shadow:var(--sg-sh-glow)}
.sg-bar--xp i{background:var(--sg-xp);box-shadow:var(--sg-xp-glow)}

/* motion wrappers: float (CSS), parallax (sticker.js sets --mx/--my on the scene), tilt */
.sg-scene{--mx:0;--my:0}
.sg-par{translate:calc(var(--mx) * var(--d,.5) * 34px) calc(var(--my) * var(--d,.5) * 22px);transition:translate .5s cubic-bezier(.2,.8,.2,1)}
.sg-float{animation:sgFloat var(--fd,6s) ease-in-out infinite;animation-delay:var(--fdl,0s)}
@keyframes sgFloat{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-14px) rotate(calc(var(--rot,0deg) + 1.2deg))}}
.sg-tilt{transform:perspective(1000px) rotateX(calc(var(--my) * -9deg)) rotateY(calc(var(--mx) * 12deg));transition:transform .5s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.sg-hovertilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0));transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.sg-hovertilt:hover{--lift:-6px}
.sg-spark{position:absolute;width:var(--s,10px);height:var(--s,10px);pointer-events:none;background:#fff;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);filter:drop-shadow(0 0 6px #fff);animation:sgTwinkle 2.6s ease-in-out infinite;animation-delay:var(--dl,0s)}
@keyframes sgTwinkle{0%,100%{transform:scale(.4) rotate(0);opacity:.3}50%{transform:scale(1) rotate(45deg);opacity:1}}

/* ── HOME hero ──────────────────────────────────────────────────────────── */
.sg-hero{padding:clamp(34px,5vw,70px) 0 0}
.sg-hero__in{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:center;min-height:min(78vh,760px)}
.sg-hero__logo{display:inline-block;padding:12px 18px 10px;border-radius:16px;background:var(--sg-ink);transform:rotate(-2.5deg);box-shadow:6px 8px 0 rgba(17,16,21,.35);margin:18px 0 8px}
.sg-hero__logo img{height:clamp(40px,5vw,62px);width:auto}
.sg-hero .sg-lead{color:#2b2630;font-weight:600}
.sg-hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;align-items:center}
.sg-hero__cta .btn-gold{background:var(--sg-ink)!important;color:var(--sg-y1)!important;box-shadow:inset 0 -5px 0 rgba(0,0,0,.5),inset 0 3px 0 rgba(255,255,255,.15)!important}
.sg-hero__cta .btn-gold img{filter:brightness(0) invert(.86) sepia(1) saturate(5) hue-rotate(2deg)!important}
.sg-hero__cta .q-btn-gold{background:var(--sg-paper)!important}
.sg-hero__sub{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;align-items:center}
.sg-trailer{display:inline-flex;align-items:center;gap:12px;padding:6px 16px 6px 6px;border-radius:16px;background:var(--sg-paper);border:3px solid var(--sg-ink);box-shadow:var(--sg-pop);color:var(--sg-ink);text-align:left;cursor:pointer}
.sg-trailer:hover{transform:translateY(-2px) rotate(-1deg)}
.sg-trailer__thumb{position:relative;width:78px;height:46px;border-radius:10px;overflow:hidden;background:var(--sg-ink);border:2px solid var(--sg-ink)}
.sg-trailer__thumb img{width:100%;height:100%;object-fit:cover}
.sg-trailer__thumb::after{content:"";position:absolute;left:50%;top:50%;margin:-9px 0 0 -6px;border:9px solid transparent;border-left:14px solid #fff;filter:drop-shadow(0 0 3px rgba(0,0,0,.8))}
.sg-trailer b{display:block;font-family:var(--sg-display);font-weight:400;text-transform:uppercase;font-size:17px;line-height:1}
.sg-trailer small{display:block;font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--sg-ink3);margin-top:3px}
.sg-hero .q-heroq{margin-top:0!important;background:rgba(17,16,21,.86)!important;border:2px solid var(--sg-ink)!important;color:#fff!important}

.sg-fan{position:relative;height:clamp(420px,46vw,640px)}
.sg-fan>.sg-par{position:absolute}
.sg-fan .f1{left:0;top:16%;z-index:1}
.sg-fan .f2{left:50%;top:2%;z-index:3;margin-left:calc(var(--w2,300px) / -2)}
.sg-fan .f3{right:0;top:20%;z-index:2}
.sg-fan .f1 .sg-card{--w:clamp(170px,17vw,240px)}
.sg-fan .f3 .sg-card{--w:clamp(170px,17vw,240px)}
.sg-fan .f2 .sg-card{--w:var(--w2,300px)}
.sg-fan{--w2:clamp(220px,22vw,310px)}
.sg-fan .sg-buddy{position:absolute;left:-4%;bottom:-2%;width:clamp(120px,13vw,200px);z-index:4}
.sg-fan .sg-buddy img{width:100%;filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(6px 8px 0 rgba(17,16,21,.85))}
.sg-fan .sg-bubble{position:absolute;right:0;bottom:2%;z-index:5}
.sg-bubble{display:inline-block;padding:10px 16px 8px;border-radius:18px;background:#fff;border:4px solid var(--sg-ink);box-shadow:var(--sg-pop);font-family:var(--sg-display);font-size:clamp(16px,1.6vw,22px);text-transform:uppercase;line-height:1;color:var(--sg-ink)}
.sg-bubble::after{content:"";position:absolute;left:28px;bottom:-17px;border:9px solid transparent;border-top:10px solid var(--sg-ink)}

.sg-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:clamp(26px,4vw,48px) 0 0;padding-bottom:clamp(40px,5vw,64px)}
.sg-fact{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:18px;background:var(--sg-paper);border:4px solid var(--sg-ink);box-shadow:var(--sg-pop)}
.sg-fact .a-num{font-size:clamp(30px,3.4vw,46px)!important;color:var(--sg-ink)!important}
.sg-fact .a-label{color:var(--sg-ink3)!important;font-size:11px;line-height:1.25}
@media(max-width:900px){
  .sg-hero__in{grid-template-columns:1fr;min-height:0}
  .sg-fan{height:clamp(380px,92vw,560px);max-width:560px;width:100%;margin:6px auto 0}
  .sg-fan .f1 .sg-card,.sg-fan .f3 .sg-card{--w:clamp(130px,34vw,220px)}
  .sg-fan{--w2:clamp(170px,46vw,290px)}
  .sg-facts{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:420px){.sg-fact{padding:10px 12px;gap:8px}.sg-fact .a-label{font-size:10px;letter-spacing:.1em}}

/* ── modes (two big cards) ──────────────────────────────────────────────── */
.sg-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.sg-mode{display:flex;flex-direction:column;overflow:hidden;padding:0}
.sg-mode__media{position:relative;aspect-ratio:16/9;background:#000;border-bottom:4px solid var(--sg-ink)}
.sg-mode__media video,.sg-mode__media img{width:100%;height:100%;object-fit:cover;display:block}
.sg-mode__tag{position:absolute;left:14px;top:14px;z-index:2}
.sg-mode__body{padding:clamp(18px,2vw,26px)}
.sg-mode__body .sg-title{color:var(--sg-ink);-webkit-text-stroke:0;text-shadow:none}
.sg-ticks{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.sg-ticks li{position:relative;padding-left:30px;line-height:1.45;font-weight:600}
.sg-ticks li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:7px;background:var(--sg-grad);border:2.5px solid var(--sg-ink);box-shadow:2px 2px 0 var(--sg-ink)}
.sg-ticks li::after{content:"";position:absolute;left:6px;top:6px;width:7px;height:10px;border:solid var(--sg-ink);border-width:0 3px 3px 0;transform:rotate(40deg)}
.sg-plate-d .sg-ticks li{color:var(--a-soft)}
@media(max-width:860px){.sg-modes{grid-template-columns:1fr}}

/* ── steps (comic panels) ───────────────────────────────────────────────── */
.sg-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);counter-reset:sgs}
.sg-step{position:relative;padding:14px 14px 18px}
.sg-step__no{position:absolute;left:-8px;top:-18px;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:22px;line-height:1;transform:rotate(-4deg);box-shadow:3px 4px 0 rgba(17,16,21,.4)}
.sg-step:nth-child(even) .sg-step__no{background:var(--sg-purple);color:#fff}
.sg-step__art{position:relative;aspect-ratio:4/3;border-radius:14px;border:3px solid var(--sg-ink);overflow:hidden;background:radial-gradient(circle at 50% 64%,#fff,var(--c,var(--sg-y1)) 80%)}
.sg-step__art::before{content:"";position:absolute;inset:-50%;background:repeating-conic-gradient(from 0deg at 50% 62%,rgba(255,255,255,.34) 0 8deg,transparent 8deg 20deg)}
.sg-step__art img{position:absolute;left:50%;bottom:4%;height:92%;width:auto;max-width:96%;object-fit:contain;transform:translateX(-50%);z-index:1;
  filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(3px 4px 0 rgba(17,16,21,.8))}
.sg-step__art--shot img{left:0;bottom:0;width:100%;height:100%;max-width:none;object-fit:cover;transform:none;filter:none}
.sg-step h3{font-family:var(--sg-display);font-weight:400;text-transform:uppercase;font-size:clamp(20px,1.9vw,25px);line-height:1;margin:14px 0 6px;color:var(--sg-ink)}
.sg-step p{font-size:15px;line-height:1.5;margin:0}
.sg-step .sg-keys{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:12px;font-weight:800;font-size:13px;align-items:center}
@media(max-width:1000px){.sg-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}}
@media(max-width:520px){.sg-steps{grid-template-columns:1fr}}

/* ── video showcase ─────────────────────────────────────────────────────── */
.sg-reel{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.sg-clip{grid-column:span 2;margin:0}
.sg-clip--big{grid-column:span 4;grid-row:span 2}
.sg-clip--wide{grid-column:span 3}
.sg-clip__frame{position:relative;border-radius:20px;overflow:hidden;border:4px solid var(--sg-ink);box-shadow:var(--sg-pop-card);background:#0b0910;aspect-ratio:16/9}
.sg-sun .sg-clip__frame{box-shadow:var(--sg-pop-card)}
.sg-night .sg-clip__frame{box-shadow:var(--sg-pop-dark),0 0 40px rgba(145,70,255,.25)}
.sg-clip video,.sg-clip img{display:block;width:100%;height:100%;object-fit:cover}
.sg-clip figcaption{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:12px}
.sg-clip figcaption b{font-family:var(--sg-display);font-weight:400;text-transform:uppercase;font-size:clamp(18px,1.6vw,22px);line-height:1;color:#fff}
.sg-sun .sg-clip figcaption b{color:var(--sg-ink)}
.sg-clip figcaption span{font-size:14px;color:var(--a-dim);line-height:1.4}
.sg-sun .sg-clip figcaption span{color:#4a4152}
.sg-clip__badge{position:absolute;left:12px;top:12px;z-index:2}
.sg-clip__toggle{position:absolute;right:10px;bottom:10px;z-index:2;width:40px;height:40px;border-radius:50%;background:var(--sg-paper);border:3px solid var(--sg-ink);box-shadow:2px 3px 0 var(--sg-ink);display:grid;place-items:center;color:var(--sg-ink)}
.sg-clip__toggle svg{width:16px;height:16px}
@media(max-width:900px){.sg-reel{grid-template-columns:repeat(2,minmax(0,1fr))}.sg-clip,.sg-clip--wide{grid-column:span 1}.sg-clip--big{grid-column:span 2;grid-row:auto}}
@media(max-width:560px){.sg-reel{grid-template-columns:1fr}.sg-clip,.sg-clip--wide,.sg-clip--big{grid-column:auto}}

/* ── split feature (copy + media) ───────────────────────────────────────── */
.sg-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:center}
.sg-split--rev{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.sg-split--rev>:first-child{order:2}
@media(max-width:900px){.sg-split,.sg-split--rev{grid-template-columns:1fr}.sg-split--rev>:first-child{order:0}}
.sg-feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px}
.sg-feat{padding:14px 16px;border-radius:16px;background:var(--sg-paper);border:3px solid var(--sg-ink);box-shadow:var(--sg-pop);color:var(--sg-ink)}
.sg-feat b{display:flex;align-items:center;gap:8px;font-family:var(--sg-display);font-weight:400;text-transform:uppercase;font-size:18px;line-height:1.05}
.sg-feat>span{display:block;font-size:14px;line-height:1.45;margin-top:6px;color:#3c3b45}
.sg-night .sg-feat{background:var(--sg-plate);color:#fff;box-shadow:var(--sg-pop-dark),inset 0 0 0 2px rgba(255,255,255,.07)}
.sg-night .sg-feat>span{color:var(--a-soft)}
@media(max-width:520px){.sg-feats{grid-template-columns:1fr}}

/* zone chips (stockpile) */
.sg-zones{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.sg-zone{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:999px;background:#211b30;border:3px solid var(--sg-ink);color:#fff;font-weight:900;font-size:13px;letter-spacing:.06em;box-shadow:inset 0 0 0 2px var(--zc),0 0 16px color-mix(in srgb,var(--zc) 60%,transparent)}
.sg-zone i{width:12px;height:12px;border-radius:3px;background:var(--zc);box-shadow:0 0 8px var(--zc)}

/* CTA band */
.sg-final{text-align:center}
.sg-final .sg-hero__cta{justify-content:center}
.sg-final__cast{display:flex;justify-content:center;align-items:flex-end;gap:clamp(4px,2vw,30px);margin:0 auto 10px;max-width:760px}
.sg-final__cast img{width:30%;max-width:220px;filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(6px 8px 0 rgba(17,16,21,.85))}
.sg-final__cast img:nth-child(2){width:38%;max-width:280px}

/* ── existing home sections restyled ───────────────────────────────────── */
.q-sale,.l-mates,.l-island,.l-play,.l-eco,.l-faq,.q-builds{background:transparent!important}
.q-tier{background:var(--sg-paper)!important;color:var(--sg-ink)!important;border:4px solid var(--sg-ink)!important;border-radius:var(--sg-r-card)!important;box-shadow:var(--sg-pop-card)!important;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.q-tier *{color:inherit}
.q-tier h3{font-family:var(--sg-display)!important;text-transform:uppercase;color:var(--sg-ink)!important}
.q-tier__art{background:repeating-conic-gradient(from 0deg at 50% 60%,rgba(255,255,255,.35) 0 8deg,transparent 8deg 20deg),radial-gradient(circle at 50% 60%,#fff,var(--tc,#FED654) 80%)!important;border:3px solid var(--sg-ink);border-radius:16px!important}
.q-tier__art img{filter:drop-shadow(0 0 18px rgba(255,255,255,.7)) drop-shadow(5px 7px 0 rgba(17,16,21,.85))!important}
.q-tier__usd{color:#7a3fd8!important;font-family:var(--sg-display)!important}
.q-tier__q,.q-tier__fine,.q-tier li,.q-tier__burn{color:#3c3b45!important}
.q-tier--hot{box-shadow:var(--sg-pop-card),0 0 44px rgba(254,214,84,.55)!important}
.q-tier__flag{background:var(--sg-ink)!important;color:var(--sg-y1)!important;font-family:var(--sg-display)!important;transform:rotate(-3deg)}
.q-sale__price{background:var(--sg-plate)!important;border:3px solid var(--sg-ink)!important;box-shadow:var(--sg-pop-dark)!important;border-radius:18px!important}
.q-how li{background:var(--sg-plate)!important;border:3px solid var(--sg-ink)!important;border-radius:16px!important}
.q-how b{background:var(--sg-grad)!important;color:var(--sg-ink)!important;border:2px solid var(--sg-ink)}
.q-k{color:var(--sg-y1)!important;font-family:var(--sg-body)!important;font-weight:900!important}
.q-builds__nums div{background:var(--sg-plate)!important;border:3px solid var(--sg-ink)!important;box-shadow:var(--sg-pop-dark)!important}
.q-builds__nums b{font-family:var(--sg-display)!important;color:var(--sg-y1)!important}
.b-row{background:rgba(255,255,255,.04)!important;border:2px solid rgba(0,0,0,.5)!important;border-radius:14px!important}
.b-spark i{background:var(--sg-grad)!important;box-shadow:0 0 8px rgba(254,214,84,.6)}
.l-shots__item{border:4px solid var(--sg-ink)!important;border-radius:20px!important;box-shadow:var(--sg-pop-dark)!important;overflow:hidden}
.l-map{border:4px solid var(--sg-ink)!important;border-radius:22px!important;box-shadow:var(--sg-pop-dark),0 0 40px rgba(145,70,255,.2)!important}
.l-bento>*{border:4px solid var(--sg-ink)!important;box-shadow:var(--sg-pop-dark)!important;border-radius:22px!important}
.l-plat__i{background:var(--sg-plate)!important;border:3px solid var(--sg-ink);border-radius:16px;box-shadow:var(--sg-pop-dark)}
.l-plat{background:transparent!important}
.l-final,.g-final,.s-final{background:transparent}
.l-cur{border-width:3px!important}
.l-coin--mate{background:var(--sg-grad)!important;color:var(--sg-ink)!important;border:3px solid var(--sg-ink)}

/* page heroes on inner pages (gameplay, open, packs, matebook and others) */
.g-hero,.s-hero,.p-hero,.mb-hero,.c-hero,.o-hero{position:relative;isolation:isolate}
.sg-ribbon{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 6px;border-radius:12px;background:var(--sg-ink);color:var(--sg-y1);font-family:var(--sg-display);font-size:18px;text-transform:uppercase;line-height:1;transform:rotate(-2deg);box-shadow:4px 5px 0 rgba(17,16,21,.35)}

/* ── capsule opening (open.html) ────────────────────────────────────────── */
.open{background:radial-gradient(ellipse at 50% 40%,rgba(46,30,86,.75),rgba(10,8,20,.96))!important}
.open::before{content:"";position:absolute;left:50%;top:46%;width:1300px;height:1300px;margin:-650px 0 0 -650px;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(rgba(254,214,84,.20) 0 7deg,transparent 7deg 20deg);-webkit-mask:radial-gradient(closest-side,#000 25%,transparent 100%);mask:radial-gradient(closest-side,#000 25%,transparent 100%);
  animation:sgSpin 90s linear infinite;opacity:.9}
.sg-ck{position:absolute;left:50%;top:46%;width:760px;height:760px;margin:-380px 0 0 -380px;pointer-events:none;z-index:6;opacity:0;
  background:repeating-conic-gradient(from 10deg at 50% 50%,rgba(255,255,255,.95) 0 2deg,transparent 2deg 30deg);-webkit-mask:radial-gradient(closest-side,#000 20%,transparent 75%);mask:radial-gradient(closest-side,#000 20%,transparent 75%);mix-blend-mode:screen}
.sg-ck.go{animation:sgCrack .9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes sgCrack{0%{opacity:0;transform:scale(.5) rotate(0)}45%{opacity:1;transform:scale(1) rotate(8deg)}100%{opacity:0;transform:scale(1.7) rotate(14deg)}}
.pick.sg-rise{animation:sgRise .7s cubic-bezier(.2,.9,.25,1.15) forwards}
@keyframes sgRise{0%{transform:translateY(0) scale(1)}100%{transform:translateY(-26px) scale(1.12)}}
.pick.sg-shake .capsule{animation:sgShake 1.2s linear forwards}
@keyframes sgShake{0%{transform:rotate(0)}8%{transform:rotate(-2deg)}16%{transform:rotate(2deg)}24%{transform:rotate(-3deg)}32%{transform:rotate(3deg)}40%{transform:rotate(-4deg) scale(1.02)}48%{transform:rotate(4deg) scale(1.03)}56%{transform:rotate(-6deg) scale(1.05)}64%{transform:rotate(6deg) scale(1.06)}72%{transform:rotate(-8deg) scale(1.08)}80%{transform:rotate(8deg) scale(1.1)}90%{transform:rotate(-9deg) scale(1.14)}100%{transform:scale(1.22)}}
.pick.sg-pop{animation:sgPop .35s ease-in forwards}
@keyframes sgPop{to{transform:translateY(-26px) scale(1.7);opacity:0}}
.sg-hintbig{font-family:var(--sg-display);text-transform:uppercase;color:#fff;-webkit-text-stroke:6px var(--sg-ink);paint-order:stroke fill;font-size:clamp(26px,3.4vw,44px);line-height:1}

/* the reveal card */
.sg-rcard{--rc:#d8d3c6;position:relative;width:min(380px,82vw);padding:14px;background:var(--sg-paper);border:6px solid var(--sg-ink);border-radius:28px;color:var(--sg-ink);
  box-shadow:12px 14px 0 var(--sg-ink),0 0 70px var(--rc);transform-style:preserve-3d}
.sg-rcard.in{animation:sgFlip 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes sgFlip{0%{opacity:0;transform:perspective(1000px) rotateY(540deg) scale(.3)}62%{opacity:1;transform:perspective(1000px) rotateY(-10deg) scale(1.06)}100%{opacity:1;transform:perspective(1000px) rotateY(0) scale(1)}}
.sg-rcard .sg-card__art{aspect-ratio:1/0.86;background:radial-gradient(circle at 50% 60%,#fff,var(--rc) 72%)}
.sg-rcard .sg-new{opacity:0}
.sg-rcard.in .sg-new{animation:sgStamp .5s .62s cubic-bezier(.3,1.6,.5,1) both}
@keyframes sgStamp{0%{opacity:0;transform:rotate(12deg) scale(3)}100%{opacity:1;transform:rotate(12deg) scale(1)}}
.sg-rcard .sg-foil{animation:sgFoil 3.6s .7s cubic-bezier(.45,.05,.35,1) infinite}
.creature-stage .sg-rcard{position:relative;z-index:4;margin:0 auto}
.sg-sparks i{position:absolute;left:50%;top:46%;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 12px #ffcf4a,0 0 24px #c9a6ff;pointer-events:none;z-index:7}

/* open ten */
.sg-ten{position:absolute;inset:0;z-index:9;display:none;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2vw,26px);padding:24px 16px;
  background:radial-gradient(ellipse at 50% 40%,rgba(30,20,60,.8),rgba(10,8,20,.96))}
.sg-ten.on{display:flex}
.sg-ten__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1.6vw,22px);width:min(1100px,100%)}
.sg-mini{--rc:#d8d3c6;position:relative;padding:8px;border-radius:18px;background:var(--sg-paper);border:4px solid var(--sg-ink);box-shadow:var(--sg-pop);color:var(--sg-ink);opacity:0}
.sg-mini.in{animation:sgFlip .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--dl,0s)}
.sg-mini__a{position:relative;aspect-ratio:1/0.9;border-radius:12px;border:3px solid var(--sg-ink);overflow:hidden;background:radial-gradient(circle at 50% 60%,#fff,var(--rc) 75%)}
.sg-mini__a::before{content:"";position:absolute;inset:-50%;background:repeating-conic-gradient(rgba(255,255,255,.35) 0 8deg,transparent 8deg 22deg)}
.sg-mini__a img{position:absolute;left:50%;bottom:3%;height:94%;width:auto;max-width:98%;object-fit:contain;transform:translateX(-50%);z-index:1}
.sg-mini__n{font-family:var(--sg-display);font-size:clamp(12px,1.4vw,19px);text-transform:uppercase;text-align:center;margin-top:6px;line-height:1;overflow-wrap:anywhere}
.sg-mini .sg-rar{display:flex;justify-content:center;margin:6px auto 0;width:max-content;max-width:100%;font-size:clamp(9px,1vw,12px);padding:3px 8px 2px}
.sg-mini.epic{box-shadow:var(--sg-pop),0 0 30px #c9a6ff}
.sg-mini.leg{box-shadow:var(--sg-pop),0 0 44px #ffcf4a,0 0 0 4px #ffcf4a}
.sg-mini.myst{box-shadow:var(--sg-pop),0 0 44px #ff6fdf,0 0 0 4px #ff6fdf}
.sg-mini .sg-new{font-size:clamp(12px,1.3vw,18px);right:-12px;top:-14px;padding:5px 8px 4px;border-width:3px}
@media(max-width:700px){.sg-ten__grid{grid-template-columns:repeat(3,minmax(0,1fr))}.sg-ten{position:fixed;overflow-y:auto;justify-content:flex-start;padding-top:80px}}
@media(max-width:380px){.sg-ten__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* gameplay modes strip */
.sg-modestrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:900px){.sg-modestrip{grid-template-columns:1fr}}

/* ── ultrawide: content keeps a max width, grounds stretch ─────────────── */
@media(min-width:2000px){
  :root{--sg-max:1440px;--a-maxw:1440px;--maxw:1440px}
  .sg-hero__in{min-height:720px}
}

/* ── reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .sg-sun::before,.sg-float,.sg-foil,.open::before,.sg-spark{animation:none!important}
  .sg-par,.sg-tilt,.sg-hovertilt,.a-mate,.q-tier{translate:none!important;transform:none!important;transition:none!important}
  .sg-rcard.in,.sg-mini.in{animation:none!important;opacity:1}
}
.no-motion .sg-sun::before,.no-motion .sg-float,.no-motion .sg-foil{animation:none!important}

/* gameplay hero facts */
.g-hero2__facts .g-hero__facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:clamp(22px,3vw,40px) 0 0;padding:0 0 clamp(40px,5vw,64px)}
.g-hero2__facts .g-hero__facts>div{display:flex;flex-direction:column-reverse;gap:4px;padding:12px 16px;border-radius:18px;background:var(--sg-paper);border:4px solid var(--sg-ink);box-shadow:var(--sg-pop)}
.g-hero2__facts dt{color:var(--sg-ink3)!important;font-size:11px}
.g-hero2__facts dd{margin:0}
.g-hero2__facts .a-num{color:var(--sg-ink)!important;font-size:clamp(30px,3.4vw,44px)!important}
@media(max-width:700px){.g-hero2__facts .g-hero__facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sg-modestrip .sg-step h3{margin-top:6px}
.g-nav{background:rgba(17,16,21,.94)!important;border-bottom:3px solid var(--sg-ink)}
.g-nav a{font-family:var(--sg-display)!important;text-transform:uppercase;letter-spacing:.02em!important;color:var(--sg-cream)!important;border-radius:12px}
.g-nav a b{color:var(--sg-y1)!important}
.g-nav a.is-on,.g-nav a[aria-current]{background:var(--sg-grad)!important;color:var(--sg-ink)!important}
.g-nav a.is-on b,.g-nav a[aria-current] b{color:var(--sg-ink)!important}
.g-nav__progress i{background:var(--sg-grad)!important}
.g-cat__no{color:transparent!important;-webkit-text-stroke:2px rgba(254,214,84,.5)}
.g-topic{border:3px solid var(--sg-ink)!important;border-radius:20px!important;box-shadow:var(--sg-pop-dark)!important;overflow:hidden;background:var(--sg-plate)!important}
.g-topic__band{background:linear-gradient(180deg,rgba(254,214,84,.12),rgba(254,214,84,.02))!important;border-bottom:2px dashed rgba(255,255,255,.12)}
.g-topic__t{font-family:var(--sg-display)!important;text-transform:uppercase;color:#fff!important}
.g-chipline li{background:var(--sg-paper)!important;color:var(--sg-ink)!important;border:2.5px solid var(--sg-ink);box-shadow:2px 3px 0 var(--sg-ink);border-radius:999px}
.g-chipline li b{color:#7a3fd8!important}
.g-cat__art{border-bottom:4px solid var(--sg-ink)}
.g-hero2__facts .g-hero__facts{max-width:none!important;background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.sg-step p .sg-key,.sg-lead .sg-key,.a-lead .sg-key,.sg-ticks .sg-key{height:24px;min-width:24px;padding:0 6px;font-size:13px;border-width:1.5px;box-shadow:0 0 0 1.5px var(--sg-ink),1px 2px 0 1.5px var(--sg-ink);vertical-align:1px;margin:0 2px}
.g-topic .g-topic__t{text-transform:uppercase;letter-spacing:.01em}

/* open page hero packs */
.s-packs .f1,.s-packs .f3{width:clamp(140px,15vw,220px)}
.s-packs .f2{width:clamp(190px,20vw,290px);margin-left:calc(clamp(190px,20vw,290px) / -2)!important}
.s-packs img{width:100%;height:auto;filter:drop-shadow(0 0 30px rgba(255,255,255,.55)) drop-shadow(8px 11px 0 rgba(17,16,21,.85))}
.s-packs .sg-tilt{position:relative}
.s-hero2 .s-facts{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0}
.s-hero2 .s-facts li{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:14px;background:var(--sg-paper);border:3px solid var(--sg-ink);box-shadow:3px 4px 0 var(--sg-ink);color:var(--sg-ink)}
.s-hero2 .s-facts li b{display:block;font-family:var(--sg-display);font-weight:400;font-size:18px;line-height:1}
.s-hero2 .s-facts li span{font-size:12px;font-weight:700;color:#3c3b45;line-height:1.2}
.s-pickrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.pack{background:var(--sg-paper)!important;color:var(--sg-ink)!important;border:4px solid var(--sg-ink)!important;border-radius:var(--sg-r-card)!important;box-shadow:var(--sg-pop-card)!important}
.pack *{color:inherit}
.pack h3,.pack .name{font-family:var(--sg-display)!important;text-transform:uppercase;color:var(--sg-ink)!important}
.tierpick button,.tierpick [data-pick]{font-family:var(--sg-display)!important;text-transform:uppercase;border:2.5px solid var(--sg-ink)!important;border-radius:999px!important}
.tierpick [aria-pressed="true"],.tierpick .on{background:var(--sg-grad)!important;color:var(--sg-ink)!important}
.info{background:var(--sg-plate)!important;border-left:4px solid var(--sg-ink)}
.info .cname{font-family:var(--sg-display)!important;text-transform:uppercase!important;color:#fff!important;-webkit-text-stroke:5px var(--sg-ink);paint-order:stroke fill;text-shadow:4px 5px 0 var(--sg-ink)}
.info .bar{height:10px!important;border:2px solid var(--sg-ink);background:#1b1d27!important}
.info .bar i{background:var(--sg-xp)!important;box-shadow:var(--sg-xp-glow)}
.creature{width:min(86%,380px)!important}
.creature-stage .halo,.creature-stage .shafts{opacity:.8}
.creature.breathe .sg-rcard{animation:sgFloat 5s ease-in-out infinite}
.open .hint{z-index:8}
#tenBtn{background:var(--sg-paper)!important;color:var(--sg-ink)!important;opacity:1!important}
.sg-rcard{width:min(330px,74vw)}
.sg-rcard .sg-card__art{aspect-ratio:1/0.8}

/* inner page heroes: night signal ground with a yellow sunburst behind the art */
.p-hero,.mb-hero,.o-hero,.mk-hero,.cr-hero,.k-hero,.gm-hero,.q-art__hero,.q-dev{
  background:
    radial-gradient(40% 60% at 78% 42%,rgba(254,214,84,.20),transparent 70%),
    radial-gradient(70% 90% at 10% 0%,rgba(145,70,255,.26),transparent 70%),
    radial-gradient(circle at 78% 42%,transparent 0,transparent 12%,var(--sg-night) 62%),
    repeating-conic-gradient(from 0deg at 78% 42%,rgba(254,214,84,.13) 0 6deg,transparent 6deg 16deg),
    var(--sg-night)!important;
  box-shadow:inset 0 -4px 0 var(--sg-y2)}
.mb-hero h1,.o-hero h1,.mk-hero h1,.cr-hero h1,.k-hero h1,.gm-hero h1,.q-art__hero h1,.p-hero h1,.q-dev h1{text-transform:uppercase}
@media(max-width:900px){.sg-fan .sg-buddy{display:none}.sg-fan .sg-bubble{right:auto;left:50%;bottom:-2%;translate:-50% 0}}

/* ── round 2 polish (25 Oct): tap targets and press feedback ─────────────── */
.sg-clip__toggle{min-width:44px;min-height:44px}
.sg-key{min-width:24px}
@media (pointer:coarse){
  .sg-faq summary,.l-qa summary{min-height:48px}
}