/* AneeMate brand, lifted from the live site rather than guessed at.
   The live site's display font is LilitaOne and the family it calls "Oxanium" is really
   Cabinet Grotesk. Its own copies sit on aneemate.com/media and are refused cross origin,
   so both are loaded from their public sources instead: the same two typefaces, no CORS,
   no third file to keep in sync. X-Heighting is the site's licensed cut and has no public
   source, so the biggest words fall back to LilitaOne, which is what the live headings use. */
@font-face{font-family:LilitaOne;font-display:swap;src:url("/assets/fonts/LilitaOne-Regular.ttf") format("truetype")}
@font-face{font-family:XHeighting;font-display:swap;src:url("/assets/fonts/X-Heighting.otf") format("opentype")}
@font-face{font-family:AneeBody;font-weight:100 900;font-display:swap;src:url("/assets/fonts/CabinetGrotesk-Variable.ttf") format("truetype")}

:root{
  --yellow:#FDCA4B; --yellow-deep:#F0A93A; --purple:#9146FF; --purple-soft:#B58AFC;
  --ink:#111015; --ink-2:#3C3B45; --ink-3:#6E6C7A; --line:#EBE7DE;
  --white:#FFFFFF; --cream:#FFF9EC; --dark:#0F1218; --dark-2:#171C25;
  --nature:#6FCF5F; --fire:#FF7A45; --water:#5AB8FF; --electric:#FFD23F;
  --psychic:#D9B8FF; --ice:#8FE3F0; --rock:#C9A36B;
  --display:LilitaOne,"Lilita One","Arial Black",Impact,sans-serif;
  --shout:XHeighting,LilitaOne,"Lilita One",Impact,sans-serif;
  --body:AneeBody,"Cabinet Grotesk","Public Sans","Segoe UI",Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --maxw:1240px;
  --grad-main:linear-gradient(180deg,#FED654 0%,#F8A531 100%);
  --red:#FF0116;
  --shadow:0 14px 34px rgba(17,16,21,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--white);color:var(--ink);font-family:var(--body);font-weight:500;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--purple);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}

h1,h2,h3,.display{font-family:var(--display);font-weight:400;line-height:.98;text-transform:uppercase;letter-spacing:.01em}
h1{font-size:clamp(40px,7.4vw,86px)}
h2{font-size:clamp(30px,4.6vw,58px)}
h3{font-size:clamp(19px,2.2vw,26px)}
p{color:var(--ink-2)}
.lead{font-size:clamp(16px,1.5vw,19px);max-width:60ch}
.eyebrow{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}

/* the yellow sticker tag the site puts behind its headings */
.tag{display:inline-block;background:var(--grad-main);color:#fff;
     padding:.22em .44em .3em;text-shadow:0 2px 0 rgba(140,90,10,.35);
     filter:drop-shadow(0 10px 22px rgba(240,169,58,.32))}
.tag.plain{background:none;box-shadow:none;color:var(--ink);transform:none;padding:0}

/* buttons */
/* The site's buttons are not rounded rectangles, they are a hand drawn wobble: a clip
   path whose right edge sits a few pixels lower than its left. brand.js measures each
   button and writes the same path, so ours are the same shape at any size. */
.btn{position:relative;transition:clip-path .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:10px;
     height:58px;padding:0 30px;border-radius:0;overflow:hidden;
     font-family:var(--display);font-size:20px;text-transform:uppercase;letter-spacing:.01em;
     transition:transform .3s cubic-bezier(.4,0,.2,1),filter .3s var(--ease)}
.btn:hover{transform:translateY(-2px) scale(1.02)}
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
     background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.55),transparent 60%);
     opacity:0;transform:scale(.2);animation:ripple 4s ease infinite}
@keyframes ripple{0%{opacity:0;transform:scale(.2)}18%{opacity:.5}45%{opacity:0;transform:scale(1.6)}100%{opacity:0;transform:scale(1.6)}}
.btn-o::after,.btn:hover::after{animation-play-state:paused;opacity:0}
.btn-y{background:var(--grad-main);color:#fff;
  text-shadow:0 2px 0 rgba(140,90,10,.55);box-shadow:0 12px 26px rgba(240,169,58,.38)}
.btn-y:hover{box-shadow:0 16px 32px rgba(240,169,58,.5)}
.btn-p{background:var(--purple);color:#fff;box-shadow:0 12px 26px rgba(145,70,255,.35)}
/* The site's secondary button is not an outline, it is white with yellow lettering.
   That is also the only shape that survives a clip path cleanly: a border gets cut by
   it and leaves a hard edge on the tilted side. */
.btn-o{background:#fff;color:var(--yellow-deep);box-shadow:0 12px 26px rgba(17,16,21,.14)}
.btn-o.on-dark{background:#fff;color:var(--yellow-deep)}
.btn-sm{height:46px;padding:0 20px;font-size:16px}
.btnrow{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* bands */
section{position:relative}
.band{padding:clamp(56px,8vw,110px) 0}
.band-white{background:var(--white)}
.band-cream{background:var(--cream)}
.band-y{background:linear-gradient(180deg,#FFD968,var(--yellow-deep));color:var(--ink)}
.band-y p{color:#4A3A12}
.band-dark{background:var(--dark);color:#fff}
.band-dark p{color:#A9B0BE}
/* the notched edge the site uses between bands */
.notch{display:block;width:100%;height:22px;background:var(--yellow);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 46px,transparent 46px 60px);
          mask:repeating-linear-gradient(90deg,#000 0 46px,transparent 46px 60px)}

/* art band: big illustration with a glass copy panel */
.art{position:relative;min-height:min(78vh,720px);display:flex;align-items:center;overflow:hidden;
     background-size:cover;background-position:center}
.art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,12,20,.72),rgba(8,12,20,.34) 46%,rgba(8,12,20,.06) 74%)}
.art .wrap{position:relative;z-index:1}
.glass{max-width:580px;background:linear-gradient(180deg,rgba(26,44,66,.90),rgba(12,20,32,.92));
       backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
       padding:30px 32px 34px;color:#fff;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.glass h2{text-shadow:0 3px 0 rgba(0,0,0,.28)}
.glass .tagline{display:inline-block;background:var(--grad-main);
       color:#fff;font-family:var(--display);text-transform:uppercase;line-height:1;
       font-size:clamp(30px,4.4vw,58px);padding:.2em .38em .26em;margin-bottom:16px}
.glass p{color:rgba(255,255,255,.88)}
.glass h2{margin-bottom:14px}

/* cards */
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--white);border:2px solid var(--line);border-radius:22px;padding:24px;
      transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--yellow)}
.card .n{font-family:var(--display);font-size:15px;color:var(--yellow-deep)}
.card h3{margin:10px 0 8px}
.card p{font-size:15px}

/* motion: everything fades up once, nothing loops except the stickers */
html.js .rise{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
html.js .rise.in{opacity:1;transform:none}
.sticker{position:absolute;pointer-events:none;animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(3deg)}}
@media (prefers-reduced-motion:reduce){
  html.js .rise{opacity:1;transform:none;transition:none}
  .sticker{animation:none}
  html{scroll-behavior:auto}
}

/* header */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;font-weight:700}
.skip:focus{left:8px;top:8px}
.top{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:2px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:26px;height:70px}
/* The wordmark is a white lockup, so on a white header half of it disappears. One
   filter turns it into the mono black version rather than shipping a second file. */
.top .logo{height:32px;width:auto;flex:0 0 auto;max-width:200px;object-fit:contain;
  filter:brightness(0);transition:opacity .2s var(--ease)}
.top a:hover .logo{opacity:.7}
.top .mainnav{display:flex;gap:24px;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.04em}
.top .mainnav a{position:relative;padding:4px 0}
.top .mainnav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:3px;background:var(--grad-main);transition:right .22s var(--ease)}
.top .mainnav a:hover{color:var(--yellow-deep)}
.top .mainnav a:hover::after,.top .mainnav a[aria-current="page"]::after{right:0}
.top .right{margin-left:auto;display:flex;align-items:center;gap:12px}

/* The hamburger: three bars that fold into a cross. Hidden above 900. */
.burger{display:none;width:46px;height:46px;position:relative;flex:0 0 auto;
  border:3px solid var(--ink);border-radius:14px;background:#fff}
.burger span{position:absolute;left:9px;right:9px;height:3px;border-radius:2px;background:var(--ink);
  transition:transform .24s var(--ease),opacity .16s linear}
.burger span:nth-child(1){top:12px}
.burger span:nth-child(2){top:19px}
.burger span:nth-child(3){top:26px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* The drawer: a full sheet under the header, one big word per line. */
.drawer{position:fixed;inset:66px 0 0;z-index:80;background:var(--cream);
  display:flex;flex-direction:column;justify-content:space-between;gap:20px;
  padding:22px 22px 34px;overflow-y:auto;overscroll-behavior:contain}
.drawer[hidden]{display:none}
html.drawer-open,html.drawer-open body{overflow:hidden}
.drawer-nav{display:flex;flex-direction:column}
.drawer-nav a{display:flex;align-items:baseline;gap:14px;padding:13px 0;border-bottom:2px solid var(--line);
  font-family:var(--display);font-size:clamp(26px,7.4vw,38px);text-transform:uppercase;line-height:1;
  opacity:0;transform:translateY(12px)}
.drawer-nav a b{font-family:var(--body);font-weight:800;font-size:12px;letter-spacing:.16em;color:var(--yellow-deep)}
.drawer-nav a:active{color:var(--yellow-deep)}
.drawer.in .drawer-nav a{animation:drawerIn .34s var(--ease) forwards}
.drawer.in .drawer-nav a:nth-child(1){animation-delay:.03s}
.drawer.in .drawer-nav a:nth-child(2){animation-delay:.06s}
.drawer.in .drawer-nav a:nth-child(3){animation-delay:.09s}
.drawer.in .drawer-nav a:nth-child(4){animation-delay:.12s}
.drawer.in .drawer-nav a:nth-child(5){animation-delay:.15s}
.drawer.in .drawer-nav a:nth-child(6){animation-delay:.18s}
.drawer.in .drawer-nav a:nth-child(7){animation-delay:.21s}
.drawer.in .drawer-nav a:nth-child(8){animation-delay:.24s}
@keyframes drawerIn{to{opacity:1;transform:none}}
.drawer-foot .btn{width:100%}
.drawer-note{font-size:13px;margin-top:12px}
.drawer-social{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;font-weight:800;font-size:13px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}

@media(max-width:1080px){.top .mainnav{gap:16px;font-size:13px}}
@media(max-width:900px){
  .top .mainnav{display:none}
  .burger{display:block}
  .top .wrap{gap:14px;height:64px}
  .top .logo{height:26px;max-width:132px}
  .top .right{gap:10px}
  .top .right .epic{height:44px;padding:0 14px;font-size:14px;gap:7px}
  .top .right .epic img{height:15px}
}
@media(max-width:380px){
  .top .right .epic span{display:none}
  .top .right .epic{padding:0 12px}
}
@media (prefers-reduced-motion:reduce){
  .drawer-nav a{opacity:1;transform:none}
  .drawer.in .drawer-nav a{animation:none}
}

/* footer, matching aneemate.com */
.foot{background:linear-gradient(180deg,#FFD968,var(--yellow-deep));color:#4A3A12;padding:46px 0 30px}
.foot a{color:#4A3A12}
.foot a:hover{color:#fff}
.foot-top{display:grid;grid-template-columns:auto 1fr auto auto;gap:34px;align-items:start}
@media(max-width:1040px){.foot-top{grid-template-columns:1fr 1fr;gap:26px}}
@media(max-width:600px){.foot-top{grid-template-columns:1fr}}
.foot-links{display:grid;grid-template-columns:repeat(3,auto);gap:8px 26px;font-weight:700;font-size:15px}
.foot-token{display:flex;align-items:center;gap:12px}
.foot-token img{width:52px}
.foot-token .p{font-family:var(--display);font-size:26px;color:#fff;line-height:1}
.foot-ex{display:grid;grid-template-columns:repeat(2,auto);gap:10px 22px;font-weight:600;font-size:14px}
.foot-ex a{display:flex;align-items:center;gap:8px}
.foot-ex img{width:22px;height:22px}
.foot-pegi{display:flex;gap:10px}
.foot-pegi img{height:44px;width:auto}
.wordmark{width:min(100%,760px);margin:40px auto 26px;display:block}
.foot-bot{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;font-size:13px}
.foot-legal{line-height:1.5;text-transform:uppercase;font-weight:600}
.foot-docs{display:flex;gap:18px;font-weight:700}
.socials{display:flex;gap:10px}
.socials a{width:42px;height:42px;border-radius:12px;background:#fff;display:grid;place-items:center;transition:transform .16s var(--ease)}
.socials a:hover{transform:translateY(-2px)}
.socials svg{width:20px;height:20px;fill:#4A3A12}

/* ── packs and tokenomics ───────────────────────────────────────────── */
.rar-common{--rc:#8A93A6}.rar-rare{--rc:#4C8CFF}.rar-epic{--rc:#9146FF}
.rar-legendary{--rc:#FDCA4B}.rar-mythic{--rc:#FF4FD8}

.burnhero{position:relative;overflow:hidden;background:radial-gradient(80% 70% at 50% 0%,#241633,#0F1218 70%);color:#fff}
.burnhero p{color:#B9BECC}
.burnhero .wrap{position:relative;z-index:1;padding:clamp(52px,7vw,96px) 22px}
.ember{position:absolute;bottom:-20px;width:6px;height:6px;border-radius:50%;background:var(--yellow);
  filter:blur(1px);opacity:0;animation:ember 5s linear infinite}
@keyframes ember{0%{transform:translateY(0) scale(.6);opacity:0}
  12%{opacity:.9}70%{opacity:.5}100%{transform:translateY(-460px) scale(.2);opacity:0}}

/* the split: 100 goes in, 50 burns, 50 lands in the treasury, 0 to us */
.split{display:grid;grid-template-columns:1fr 1.1fr;gap:34px;align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.flow{position:relative;border-radius:24px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);padding:26px}
.flow svg{width:100%;height:auto;display:block}
.flow .stream{stroke-dasharray:6 10;animation:dash 1.6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-32}}
.splitnums{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.splitnum{border-radius:18px;padding:16px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04)}
.splitnum .v{font-family:var(--display);font-size:34px;line-height:1}
.splitnum .k{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#9AA2B3;margin-top:4px}
.splitnum.burn .v{color:#FF7A45}.splitnum.tre .v{color:#5AB8FF}.splitnum.fee .v{color:#6FCF5F}

/* degen stat strip */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}
.statbox{border-radius:20px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);padding:20px}
.statbox .v{font-family:var(--display);font-size:clamp(26px,3vw,38px);line-height:1;color:#fff}
.statbox .k{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#9AA2B3;margin-top:6px}
.statbox .sub{font-size:12px;color:#7C8496;margin-top:8px}
.pendingnote{font-size:13px;color:#8B93A5;margin-top:14px}

/* rarity ladder */
.ladder{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media(max-width:1040px){.ladder{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.ladder{grid-template-columns:repeat(2,1fr)}}
.rung{border-radius:20px;padding:18px;border:3px solid var(--line);background:#fff;position:relative;overflow:hidden;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.rung:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(17,16,21,.16)}
.rung::before{content:"";position:absolute;inset:0 0 auto;height:6px;background:var(--rc)}
.rung .nm{font-family:var(--display);font-size:20px;margin-top:6px}
.rung .pc{font-family:var(--display);font-size:32px;color:var(--rc);line-height:1;margin-top:8px}
.rung .desc{font-size:13.5px;color:var(--ink-2);margin-top:8px}
.rung.mythic{background:linear-gradient(160deg,#fff,#FFF0FB)}
.rung.mythic::after{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,rgba(255,79,216,.16),transparent 40%);
  animation:spin 7s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* odds table */
.odds{width:100%;border-collapse:separate;border-spacing:0 8px}
.odds th{text-align:left;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding:0 12px 4px}
.odds td{background:#fff;border-top:3px solid var(--line);border-bottom:3px solid var(--line);padding:14px 12px;vertical-align:middle}
.odds tr td:first-child{border-left:3px solid var(--line);border-radius:16px 0 0 16px}
.odds tr td:last-child{border-right:3px solid var(--line);border-radius:0 16px 16px 0}
.oddsbar{height:10px;border-radius:99px;background:var(--line);overflow:hidden;min-width:120px}
.oddsbar i{display:block;height:100%;background:var(--rc);width:0;transition:width .8s var(--ease)}

/* utility grid */
.util{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.util{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  .ember,.flow .stream,.rung.mythic::after{animation:none}
}

/* ── home ───────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;background:#0B0F16;color:#fff;min-height:min(88vh,820px);display:flex;align-items:center}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,10,16,.32),rgba(6,10,16,.88))}
.hero .wrap{position:relative;z-index:2;padding-top:clamp(46px,7vw,90px);padding-bottom:clamp(46px,7vw,90px)}
.hero h1{font-family:var(--shout);font-size:clamp(40px,6.8vw,92px);text-shadow:0 6px 0 rgba(0,0,0,.3)}
/* The hero is the first thing on screen, so it must not wait for a scroll observer to
   reveal it. It plays its own entrance the moment the stylesheet lands. */
html.js .hero .rise{opacity:0;transform:translateY(16px);animation:heroIn .55s var(--ease) forwards}
html.js .hero .rise:nth-of-type(2){animation-delay:.06s}
.hero .lead{animation-delay:.1s}
.hero .btnrow{animation-delay:.16s}
@keyframes heroIn{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html.js .hero .rise{opacity:1;transform:none;animation:none}}
.hero p{color:rgba(255,255,255,.9)}
/* The showcase hero stands the render beside the words instead of behind them. The picture
   is never cropped, which is the whole point of using a render, and the headline sits at
   the top of the screen where it belongs rather than being pushed under the art. */
.hero.showcase{display:block;min-height:0;background:radial-gradient(120% 100% at 74% 44%,#1A1420 0%,#0B0F16 62%)}
.hero.showcase::after{display:none}
.hero.showcase .wrap{padding-top:clamp(26px,3vw,48px);padding-bottom:clamp(34px,4vw,60px)}
.herogrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(20px,3vw,52px);align-items:center}
.herocopy{max-width:620px}
.hero.showcase h1{font-size:clamp(34px,4.4vw,64px);line-height:.98}
.herofine{margin-top:14px;font-size:13.5px;color:rgba(255,255,255,.66);max-width:44ch}
.hero.showcase .kicker{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.34)}
.heroshot{position:relative}
.heroshot img{display:block;width:100%;height:auto;max-height:min(74vh,700px);object-fit:contain;
  filter:drop-shadow(0 26px 60px rgba(0,0,0,.55))}
@media (max-width:900px){
  .herogrid{grid-template-columns:1fr;gap:18px}
  .heroshot{order:-1}
  .heroshot img{max-height:44vh}
  .herocopy{max-width:none}
}

.kicker{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);border-radius:99px;padding:7px 16px;font-weight:800;font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px}
.kicker i{width:8px;height:8px;border-radius:50%;background:#6FCF5F;box-shadow:0 0 0 4px rgba(111,207,95,.25)}

/* trailer: a thumbnail and a play button, the embed only loads when it is clicked */
.tube{position:relative;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:#000;cursor:pointer;
  border:4px solid #fff;box-shadow:0 26px 60px rgba(0,0,0,.42)}
.tube img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease),filter .3s}
.tube:hover img{transform:scale(1.04);filter:brightness(.82)}
.tube .play{position:absolute;inset:0;display:grid;place-items:center}
.tube .play i{width:84px;height:84px;border-radius:50%;background:var(--grad-main);display:grid;place-items:center;
  box-shadow:0 14px 34px rgba(0,0,0,.45);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.tube:hover .play i{transform:scale(1.1)}
.tube .play i::after{content:"";border-left:23px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent;margin-left:6px}
.tube .cap{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;color:#fff;font-weight:700;font-size:14px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.82))}
.tube iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.numrow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:820px){.numrow{grid-template-columns:repeat(2,1fr)}}
.num{padding:20px;border:3px solid var(--line);border-radius:20px;background:#fff}
.num .v{font-family:var(--display);font-size:clamp(28px,4vw,42px);line-height:1}
.num .k{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-top:6px}

/* a rail of creature tiles that scrolls with the thumb on a phone */
.rail{display:flex;gap:14px;overflow-x:auto;padding:6px 22px 18px;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail .tile{flex:0 0 180px;scroll-snap-align:start;border:3px solid var(--line);border-radius:22px;background:#fff;
  padding:14px;text-align:center;transition:transform .2s var(--ease),border-color .2s}
.rail .tile:hover{transform:translateY(-5px);border-color:var(--yellow)}
.rail .tile img{width:100%;aspect-ratio:1;object-fit:contain}
.rail .tile .nm{font-family:var(--display);font-size:19px;margin-top:6px}
.rail .tile .el{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

/* ── live ops pages: events, leaderboard, profile ───────────────────── */
.pagehead{padding:clamp(30px,5vw,58px) 0 clamp(18px,3vw,30px)}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.bt{width:100%;border-collapse:separate;border-spacing:0 8px;min-width:560px}
table.bt th{text-align:left;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);padding:0 14px 4px;white-space:nowrap}
table.bt td{background:#fff;border-top:3px solid var(--line);border-bottom:3px solid var(--line);padding:14px;vertical-align:middle}
table.bt tr td:first-child{border-left:3px solid var(--line);border-radius:16px 0 0 16px}
table.bt tr td:last-child{border-right:3px solid var(--line);border-radius:0 16px 16px 0}
table.bt tr.me td{border-color:var(--yellow);background:#FFFBF0}
.rk{font-family:var(--display);font-size:22px;line-height:1}
.rk.g1{color:#E0A400}.rk.g2{color:#9AA3B2}.rk.g3{color:#C08457}
.field{height:52px;border:3px solid var(--line);border-radius:14px;padding:0 16px;font:inherit;font-weight:600;background:#fff;min-width:0;max-width:100%}
.field:focus{border-color:var(--yellow);outline:none}
select.field{height:46px;cursor:pointer}
.skel{height:14px;border-radius:99px;background:linear-gradient(90deg,var(--line),#F7F4EE,var(--line));
  background-size:200% 100%;animation:skel 1.2s linear infinite}
@keyframes skel{to{background-position:-200% 0}}
.empty{padding:38px 20px;text-align:center;border:3px dashed var(--line);border-radius:22px;color:var(--ink-3)}
.badge{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px;border-radius:99px;background:var(--line);color:var(--ink-2)}
.badge.live{background:#E6F7E2;color:#2F7D22}
.badge.soon{background:#FFF2D6;color:#8A6200}
.badge.done{background:#EEEBE4;color:#6E6C7A}
.statrow{display:flex;flex-wrap:wrap;gap:12px}
.statrow .s{border:3px solid var(--line);border-radius:18px;padding:14px 18px;background:#fff;min-width:120px}
.statrow .s .k{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.statrow .s .v{font-family:var(--display);font-size:26px;line-height:1.1}

@media(max-width:600px){
  .btn{height:52px;padding:0 22px;font-size:18px}
  .btnrow>.btn{flex:1 1 100%}
  .card{padding:20px}
  .wrap{padding:0 16px}
  .glass{padding:22px 20px 26px}
  .foot-links{grid-template-columns:repeat(2,auto)}
  .foot-ex{grid-template-columns:repeat(2,auto)}
  .foot-bot{flex-direction:column;align-items:flex-start}
  .splitnums{grid-template-columns:1fr}
  .rail{padding-left:16px;padding-right:16px}
}

/* The live ops pages reuse the class names their scripts already emit (card, pill, foot,
   stats). Two of those collide with the site wide footer and stat blocks, so everything
   here is scoped under .ops and wins on specificity without touching the shared rules. */
.ops .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.ops .card{display:flex;flex-direction:column;gap:10px}
.ops .meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ops .title{font-family:var(--display);font-size:22px;line-height:1.05;text-transform:uppercase}
.ops .desc{font-size:15px;color:var(--ink-2)}
.ops .muted{font-size:13px;color:var(--ink-3)}
.ops .countdown{font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--yellow-deep)}
.ops .reward{font-weight:700;font-size:14px}
.ops .foot{background:none;color:inherit;padding:0;margin-top:auto;display:flex;justify-content:space-between;
  align-items:center;gap:12px;padding-top:12px;border-top:2px solid var(--line)}
.ops .foot a{color:inherit}
.ops .pill{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px;border-radius:99px;background:var(--line);color:var(--ink-2)}
.ops .pill.live{background:#E6F7E2;color:#2F7D22}
.ops .pill.scheduled{background:#FFF2D6;color:#8A6200}
.ops .pill.settled{background:#EEEBE4;color:#6E6C7A}
.ops .stats{display:flex;gap:10px;grid-template-columns:none}
.ops .stat{border:3px solid var(--line);border-radius:16px;padding:10px 14px;background:#fff;min-width:96px}
.ops .stat .k{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.ops .stat .v{font-family:var(--display);font-size:24px;line-height:1.1;color:var(--ink)}
.ops .skeleton{height:14px;border-radius:99px;background:linear-gradient(90deg,var(--line),#F7F4EE,var(--line));
  background-size:200% 100%;animation:skel 1.2s linear infinite;margin:6px 0}
.ops .err{padding:20px;border-radius:18px;border:3px solid #FFC9CD;background:#FFF3F4;color:#A31018;font-weight:600}
.ops .ok{padding:16px 20px;border-radius:18px;border:3px solid var(--yellow);background:#FFFBF0;font-weight:700}
.ops .rank{font-family:var(--display);font-size:22px;line-height:1}
.ops .rank.top1{color:#E0A400}.ops .rank.top2{color:#9AA3B2}.ops .rank.top3{color:#C08457}
.ops .score{font-family:var(--display);font-size:20px;text-align:right}
.ops .row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.ops .btn.sm{height:44px;padding:0 18px;font-size:15px;border:3px solid var(--ink);color:var(--ink)}
.ops .btn.sm.primary{background:var(--grad-main);color:#fff;border-color:transparent;text-shadow:0 2px 0 rgba(140,90,10,.55)}
.ops table td.score,.ops table th:last-child{white-space:nowrap}
@media(max-width:600px){
  .ops .grid{grid-template-columns:1fr}
  .ops .stats{flex-wrap:wrap}
}

/* two columns that become one on a phone, used wherever a picture sits beside copy */
.duo{grid-template-columns:1.25fr 1fr;gap:36px;align-items:center}
@media(max-width:900px){.duo{grid-template-columns:1fr;gap:26px}}
.duo.even{grid-template-columns:1.05fr .95fr;gap:40px}
@media(max-width:900px){.duo.even{grid-template-columns:1fr;gap:26px}}
.foot-token{display:flex;align-items:center;gap:12px;transition:transform .16s var(--ease)}
.foot-token:hover{transform:translateY(-2px)}
.foot-token img{width:56px;height:56px;object-fit:contain}
.foot-token .chg{font-size:12px;font-weight:800;letter-spacing:.06em}
.foot-token .chg.up{color:#2F7D22}
.foot-token .chg.down{color:#A31018}

/* The question list. It is a real accordion rather than a wall of text because the answers
   are long on purpose: they are what an answer engine quotes, so each one has to stand on
   its own without the page around it. */
.qalist{display:grid;gap:12px;max-width:900px}
.qa{border:3px solid var(--line);border-radius:18px;background:#fff;padding:0 20px}
.qa summary{cursor:pointer;list-style:none;font-family:var(--display);font-size:clamp(17px,1.7vw,21px);
  padding:18px 34px 18px 0;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:4px;top:50%;width:11px;height:11px;
  border-right:3px solid var(--ink-3);border-bottom:3px solid var(--ink-3);
  translate:0 -60%;rotate:45deg;transition:rotate .2s var(--ease)}
.qa[open] summary::after{rotate:225deg;translate:0 -20%}
.qa[open]{border-color:var(--yellow)}
.qa p{margin:0;padding:0 0 20px;font-size:15.5px;color:var(--ink-2);max-width:66ch}