/* Layout: white brand page built around the untouched logo. Full-width bands (header, hero, stats, cards, decades, how, FAQ, crew, footer), each with a padded inner wrapper. One night band holds the live cards so their light pops; pink, violet and cyan come straight from the logo. */
:root{
  color-scheme: light;
  --bg:#ffffff; --tint:#f6f2ff; --tint2:#eefaff; --line:#e7defb; --line2:#d7c9f7;
  --ink:#1d0b4e; --ink2:#43346f; --muted:#6c6190;
  --pink:#ff27b0; --violet:#7b2cff; --cyan:#12d0ff; --blue:#2b7bff;
  --night:#150937; --night2:#221152; --night-line:#3a2a73; --night-fg:#f3eeff; --night-muted:#b9acdf;
  --f-pixel:"Pixelify Sans","Courier New",monospace;
  --f-text:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-code:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-text);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:#fff}
a{color:inherit}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
.in{padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.pad{padding-inline:clamp(0px, calc(4vw - 16px), 56px)}
.wrap{max-width:1280px;margin-inline:auto}
.band{padding-block:clamp(56px,7vw,104px)}
.eyebrow{font-family:var(--f-pixel);font-weight:600;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--violet);margin:0}
h1,h2,h3{font-family:var(--f-pixel);font-weight:700;line-height:1.02;margin:0;text-wrap:balance;letter-spacing:.005em}
h2{font-size:clamp(34px,4.4vw,58px);text-shadow:-.045em .03em 0 rgba(255,39,176,.45),.045em -.02em 0 rgba(18,208,255,.5)}
.sec-head{display:grid;gap:14px;margin-bottom:clamp(28px,3.4vw,48px)}
.sec-head p{margin:0;color:var(--ink2);font-size:clamp(17px,1.4vw,19px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:12px;border:2px solid var(--ink);background:#fff;color:var(--ink);font-family:var(--f-pixel);font-weight:700;font-size:18px;letter-spacing:.02em;text-decoration:none;cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn.primary{background:linear-gradient(100deg,var(--pink),var(--violet) 55%,var(--blue));color:#fff}
.btn svg{width:20px;height:20px;flex:none}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:4px 4px 0 var(--ink)}

/* Pixel sparkles (decoration only, never on the logo) */
.spark{position:absolute;width:4px;height:4px;color:var(--pink);background:currentColor;box-shadow:0 -4px, 0 -8px, 0 4px, 0 8px, -4px 0, -8px 0, 4px 0, 8px 0;animation:twinkle 2.8s ease-in-out infinite;pointer-events:none}
.spark.c{color:var(--cyan)}.spark.v{color:var(--violet)}.spark.w{color:#fff}
.spark.lg{transform:scale(1.6)}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.25}}

/* Header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:2px solid var(--line)}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:6px}
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand img{display:block;width:78px;height:78px}
.nav{display:flex;align-items:center;gap:4px}
.nav a.lnk{padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:600;font-size:16px;color:var(--ink2)}
.nav a.lnk:hover{background:var(--tint);color:var(--ink)}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;border:2px solid var(--line2);color:var(--ink);text-decoration:none;transition:border-color .15s,background .15s}
.icon-btn:hover{border-color:var(--ink);background:var(--tint)}
.icon-btn svg{width:20px;height:20px}
.nav-social,.foot-social{display:inline-flex;gap:8px;margin-left:6px}
.foot-social{margin:6px 0 0;grid-column:1/-1}
.icon-btn.lg{width:52px;height:52px;border:2px solid var(--ink);background:#fff;box-shadow:4px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.icon-btn.lg:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);background:#fff}
.icon-btn.lg svg{width:24px;height:24px}
.icon-btn.xl{width:72px;height:72px;border-radius:18px;border:3px solid var(--ink);background:#fff;color:var(--ink);box-shadow:5px 5px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.icon-btn.xl:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink);background:#fff}
.icon-btn.xl svg{width:32px;height:32px}
.nav .btn{min-height:44px;font-size:16px;padding:0 18px;margin-left:8px;box-shadow:3px 3px 0 var(--ink)}
@media (max-width:980px){.nav a.lnk{display:none}}
@media (max-width:520px){.brand img{width:64px;height:64px}}

/* Hero */
.hero{position:relative;overflow:hidden;background:#fff}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:clamp(24px,4vw,64px);padding-block:clamp(36px,5vw,72px) clamp(40px,5vw,72px)}
.hero-copy{display:flex;flex-direction:column;gap:24px;min-width:0;position:relative;z-index:1}
.hero h1{font-size:clamp(46px,6.6vw,96px);text-shadow:-.04em .028em 0 rgba(255,39,176,.55),.04em -.02em 0 rgba(18,208,255,.6)}
.hero h1 .grad{background:linear-gradient(95deg,var(--pink),var(--violet) 50%,var(--blue) 80%,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(-.035em .025em 0 rgba(29,11,78,.18))}
.lede{margin:0;font-size:clamp(18px,1.5vw,21px);color:var(--ink2);max-width:60ch}
.cta{display:flex;flex-wrap:wrap;gap:14px}
.ca{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px 16px;padding:14px 16px;border:2px dashed var(--line2);border-radius:var(--radius);background:var(--tint)}
.ca-tag{font-family:var(--f-pixel);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--ink);padding:6px 10px;border-radius:8px}
.ca-val{font-family:var(--f-code);font-size:15px;font-weight:600;overflow-wrap:anywhere;min-width:0}
.ca-copy{min-height:40px;font-size:15px;padding:0 14px;box-shadow:3px 3px 0 var(--ink)}
.ca-note{grid-column:1/-1;margin:0;font-size:14px;color:var(--muted)}
.hero-logo{position:relative;display:grid;place-items:center;min-width:0}
.hero-logo .logo-frame{width:min(100%,520px);transform:rotate(1.5deg)}
.hero-logo .logo-frame img{aspect-ratio:1}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-logo{order:-1}.hero-logo .logo-frame{width:min(74vw,380px)}}
@media (max-width:560px){.ca{grid-template-columns:1fr auto}.ca-tag{grid-column:1/-1;justify-self:start}}

/* Stats */
.stats{background:var(--tint);border-block:2px solid var(--line)}
.kpi-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding-block:clamp(26px,3vw,40px)}
.kpi{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:6px clamp(12px,2vw,28px);border-left:2px solid var(--line2);min-width:0}
.kpi:first-child{border-left:0}
.kpi b{font-family:var(--f-pixel);font-weight:700;font-size:clamp(36px,4.4vw,60px);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.kpi:nth-child(1) b{color:var(--pink)}.kpi:nth-child(2) b{color:var(--violet)}.kpi:nth-child(3) b{color:var(--blue)}.kpi:nth-child(4) b{color:#0aa9d6}
.kpi span{font-weight:600;color:var(--ink2);font-size:15px}
@media (max-width:760px){.kpi-row{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}.kpi:nth-child(3){border-left:0}}

/* Cards band */
.cards-band{position:relative;overflow:hidden;background:radial-gradient(ellipse 900px 500px at 50% 0%, #2f1670 0%, var(--night) 70%);color:var(--night-fg)}
.cards-band .eyebrow{color:var(--cyan)}
.cards-band .sec-head p{color:var(--night-muted)}
.deck{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(14px,1.8vw,26px)}
.deck figure{margin:0;display:flex;flex-direction:column;gap:14px;min-width:0}
.deck figcaption{display:flex;flex-direction:column;gap:2px;text-align:center}
.deck figcaption b{font-family:var(--f-pixel);font-weight:700;font-size:20px;line-height:1.1}
.deck figcaption span{font-size:14px;color:var(--night-muted)}
.f-laser b{color:var(--cyan)}.f-gold b,.f-super b{color:#ffd56a}.f-misprint b{color:#ff6b9f}.f-holo b{color:#d7c8ff}
.deck-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:clamp(28px,3vw,44px);padding:18px 22px;border:2px solid var(--night-line);border-radius:var(--radius);background:rgba(255,255,255,.04)}
.deck-note p{margin:0;color:var(--night-muted);flex:1 1 420px;min-width:0}
.deck-note p strong{color:var(--night-fg)}
.cards-band .btn{border-color:#fff;box-shadow:4px 4px 0 var(--pink)}
.cards-band .btn:hover{box-shadow:6px 6px 0 var(--pink)}
@media (max-width:1100px){.deck{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.deck{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Decades */
.decades{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.era{position:relative;display:flex;flex-direction:column;border:2px solid var(--ink);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:5px 5px 0 var(--ink);min-width:0}
.era-top{position:relative;padding:22px 22px 18px;color:#fff;min-height:150px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;overflow:hidden}
.era-top b{font-family:var(--f-pixel);font-weight:700;font-size:58px;line-height:.9;position:relative}
.era-top span{font-weight:600;font-size:14px;letter-spacing:.04em;position:relative;opacity:.92}
.era-80 .era-top{background:linear-gradient(180deg,#1b1037 0%,#5a1e7a 48%,#ff4fa1 70%,#120a2c 70.5%),#120a2c}
.era-80 .era-top::after{content:"";position:absolute;left:-40%;right:-40%;bottom:-20%;height:52%;background-image:linear-gradient(#2de2e6 1.5px,transparent 1.5px),linear-gradient(90deg,#2de2e6 1.5px,transparent 1.5px);background-size:30px 18px;transform:perspective(120px) rotateX(55deg);transform-origin:50% 0;opacity:.55}
.era-90 .era-top{background:radial-gradient(circle at 84% 26%,#a3e635 0 17%,transparent 17.5%),radial-gradient(circle at 62% 12%,#ff6b35 0 7%,transparent 7.5%),#7b2ff7}
.era-90 .era-top b{text-shadow:4px 4px 0 #111}
.era-00 .era-top{background:radial-gradient(circle at 25% 25%,rgba(255,255,255,.7) 0 6%,transparent 7%),radial-gradient(circle at 78% 40%,transparent 0 10%,rgba(255,255,255,.55) 10.5% 12%,transparent 12.5%),linear-gradient(160deg,#9ff0ff,#2b7bff 60%,#16264d)}
.era-00 .era-top b{text-shadow:0 3px 0 rgba(0,0,0,.25)}
.era-10 .era-top{background:radial-gradient(circle at 82% 30%,#bff0d4 0 20%,transparent 20.5%),radial-gradient(circle at 58% 14%,#ffe8a3 0 8%,transparent 8.5%),#ffb3c7;color:#2c2433}
.era-body{display:flex;flex-direction:column;gap:14px;padding:20px 22px 22px;flex:1}
.era-body p{margin:0;color:var(--ink2);font-size:16px}
.era-names{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.era-names span{font-size:13.5px;font-weight:600;padding:5px 10px;border-radius:99px;background:var(--tint);border:1px solid var(--line2)}
.era-count{display:flex;align-items:baseline;gap:8px;padding-top:12px;border-top:2px dashed var(--line2)}
.era-count b{font-family:var(--f-pixel);font-weight:700;font-size:30px;line-height:1;font-variant-numeric:tabular-nums}
.era-count span{font-size:14px;color:var(--muted);font-weight:600}
.sets{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:clamp(24px,3vw,36px);padding:18px 20px;border-radius:var(--radius);background:var(--tint2);border:2px solid #cdeffb}
.sets > b{font-family:var(--f-pixel);font-size:18px;margin-right:6px}
.sets span{font-weight:600;font-size:15px;padding:7px 13px;border-radius:99px;background:#fff;border:2px solid var(--ink)}
@media (max-width:1100px){.decades{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.decades{grid-template-columns:1fr}}

/* How it works */
.how{background:var(--tint);border-block:2px solid var(--line)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);counter-reset:s}
.step{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:var(--radius);background:#fff;border:2px solid var(--line2);min-width:0}
.step i{font-style:normal;display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--ink);color:#fff;font-family:var(--f-pixel);font-weight:700;font-size:24px;box-shadow:3px 3px 0 var(--pink)}
.step h3{font-size:26px}
.step p{margin:0;color:var(--ink2);font-size:16px}
@media (max-width:1100px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* FAQ */
.faq{display:grid;gap:12px}
.faq details{border:2px solid var(--line2);border-radius:var(--radius);background:#fff;transition:border-color .15s}
.faq details[open]{border-color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;font-family:var(--f-pixel);font-weight:700;font-size:clamp(20px,1.8vw,24px);line-height:1.15}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--tint);font-size:24px;color:var(--violet)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0;padding:0 22px 22px;color:var(--ink2);overflow-wrap:anywhere}

/* Crew band */
.crew{position:relative;overflow:hidden;color:#fff;background:linear-gradient(115deg,#ff27b0 0%,#7b2cff 50%,#2b7bff 82%,#12d0ff 100%)}
.crew-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:28px 48px}
.crew h2{color:#fff;text-shadow:-.04em .03em 0 rgba(29,11,78,.45)}
.crew p{margin:12px 0 0;font-size:clamp(17px,1.4vw,20px);max-width:58ch;color:#fff}
.crew .cta .btn{border-color:var(--ink)}
@media (max-width:860px){.crew-grid{grid-template-columns:1fr}}

/* Footer */
.site-foot{background:#fff;border-top:2px solid var(--line)}
.foot-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:24px 40px;padding-block:32px}
.foot-row img{display:block;width:96px;height:96px;mix-blend-mode:multiply}
.foot-text{display:flex;flex-direction:column;gap:10px;min-width:0}
.foot-text b{font-family:var(--f-pixel);font-size:20px}
.foot-text p{margin:0;font-size:14px;color:var(--muted);max-width:90ch}
.foot-links{display:grid;grid-template-columns:repeat(2,auto);gap:8px 32px;font-weight:600;font-size:15px;align-content:start}
.foot-links a{text-decoration:none;color:var(--ink2)}
.foot-links a:hover{color:var(--violet);text-decoration:underline}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-block:16px 24px;border-top:2px solid var(--line);font-size:14px;color:var(--muted)}
@media (max-width:760px){.foot-row{grid-template-columns:1fr}}

/* Live cards: same engine as the card room */
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

/* ===== Multi-page additions ===== */
.nav a.lnk[aria-current="page"]{background:var(--tint);color:var(--ink);box-shadow:inset 0 -3px 0 var(--pink)}
.crumbs{font-size:14px;font-weight:600;color:var(--muted);margin:0 0 14px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li:not(:last-child)::after{content:"/";margin-left:6px;color:var(--line2)}
.crumbs a{color:var(--ink2);text-decoration:none}
.crumbs a:hover{color:var(--violet);text-decoration:underline}
.page-hero{background:#fff;border-bottom:2px solid var(--line);position:relative;overflow:hidden}
.page-hero .wrap{padding-block:clamp(34px,4.6vw,64px) clamp(30px,4vw,52px);display:grid;gap:16px}
.page-hero h1{font-size:clamp(40px,5.4vw,74px);text-shadow:-.04em .028em 0 rgba(255,39,176,.55),.04em -.02em 0 rgba(18,208,255,.6)}
.page-hero .lede{max-width:72ch}
.tldr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 16px;align-items:start;padding:16px 18px;border-radius:var(--radius);background:var(--tint);border:2px solid var(--line2);max-width:100%}
.tldr b{font-family:var(--f-pixel);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--violet);padding:5px 9px;border-radius:8px}
.tldr p{margin:0;color:var(--ink2);font-size:16px}
.more-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:clamp(24px,3vw,40px);padding:18px 22px;border:2px solid var(--line2);border-radius:var(--radius);background:#fff}
.more-row p{margin:0;color:var(--ink2);flex:1 1 380px;min-width:0}
.how .more-row{background:#fff}

/* Cards page: anatomy */
.anatomy{display:grid;grid-template-columns:minmax(220px,320px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:stretch}
.anatomy .live{width:100%}
.anat-cols{display:grid;grid-template-rows:1fr 1fr;gap:18px}
.anat{padding:22px 24px;border-radius:var(--radius);border:2px solid var(--line2);background:#fff;min-width:0;display:flex;flex-direction:column;justify-content:center}
.anat ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
@media (max-width:1100px){.anat ul{grid-template-columns:1fr}}
.anat h3{font-size:26px;margin-bottom:10px}
.anat ul{margin:0;padding-left:20px;color:var(--ink2);display:grid;gap:6px;font-size:16px}
.anat .tip{margin:14px 0 0;font-size:14px;color:var(--muted)}
@media (max-width:900px){.anatomy{grid-template-columns:1fr;justify-items:center}.anatomy .live{max-width:320px}.anat-cols{width:100%}}
@media (max-width:900px){.anat-cols{grid-template-rows:auto}}
/* Cards page: finish ladder */
.ladder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.rung{display:grid;grid-template-columns:minmax(110px,150px) minmax(0,1fr);gap:18px;align-items:center;padding:18px;border-radius:var(--radius);background:rgba(255,255,255,.05);border:2px solid var(--night-line);min-width:0}
.rung h3{font-size:26px;color:#fff}
.rung .rar{display:inline-block;margin:6px 0 8px;font-family:var(--f-pixel);font-size:14px;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:7px;background:var(--night2);color:var(--cyan)}
.rung p{margin:0;color:var(--night-muted);font-size:15px}
.rung.f-gold .rar,.rung.f-super .rar{color:#ffd56a}.rung.f-misprint .rar{color:#ff6b9f}
@media (max-width:1100px){.ladder{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ladder{grid-template-columns:1fr}}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.pillar{padding:24px;border-radius:var(--radius);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);background:#fff;min-width:0}
.pillar h3{font-size:26px;margin-bottom:10px}
.pillar p{margin:0;color:var(--ink2);font-size:16px}
@media (max-width:900px){.pillars{grid-template-columns:1fr}}

/* Decades page */
.era-sec{display:grid;grid-template-columns:minmax(200px,280px) minmax(0,1fr);gap:clamp(22px,3.4vw,52px);align-items:start;padding-block:clamp(28px,3.6vw,48px);border-top:2px dashed var(--line2)}
.era-sec:first-of-type{border-top:0;padding-top:0}
.era-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:110px}
.era-badge{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:14px 16px;border-radius:var(--radius);color:#fff}
.era-badge b{font-family:var(--f-pixel);font-size:44px;line-height:.9}
.era-badge span{font-weight:600;font-size:14px}
.era-badge.era-80{background:linear-gradient(135deg,#1b1037,#5a1e7a 60%,#ff4fa1)}
.era-badge.era-90{background:linear-gradient(135deg,#7b2ff7,#00a88f)}
.era-badge.era-00{background:linear-gradient(135deg,#2b7bff,#16264d)}
.era-badge.era-10{background:linear-gradient(135deg,#ffb3c7,#c9b6ff);color:#2c2433}
.era-main{display:flex;flex-direction:column;gap:18px;min-width:0}
.era-main h2{font-size:clamp(30px,3.4vw,44px)}
.era-main > p{margin:0;color:var(--ink2);font-size:17px;max-width:80ch}
.set-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.set{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:14px;border:2px solid var(--line2);background:#fff;min-width:0}
.set-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.set-h b{font-family:var(--f-pixel);font-size:19px}
.set-h code{font-family:var(--f-code);font-size:13px;font-weight:600;color:var(--violet)}
.set p{margin:0;font-size:14.5px;color:var(--muted)}
.set a{font-size:14px;font-weight:600;color:var(--violet);text-decoration:none}
.set a:hover{text-decoration:underline}
@media (max-width:900px){.era-sec{grid-template-columns:1fr}.era-side{position:static;flex-direction:row;align-items:center}.era-side .live{width:150px;flex:none}.era-badge{flex:1}}
@media (max-width:600px){.set-grid{grid-template-columns:1fr}}

/* Checklist */
.jump{display:flex;flex-wrap:wrap;gap:10px}
.jump a{font-family:var(--f-pixel);font-weight:700;font-size:18px;text-decoration:none;padding:8px 16px;border-radius:10px;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);background:#fff}
.jump a:hover{background:var(--tint)}
.cl-era{padding-block:clamp(26px,3vw,40px)}
.cl-era > h2{margin-bottom:18px}
.cl-set{border:2px solid var(--line2);border-radius:var(--radius);padding:18px 20px;margin-bottom:16px;background:#fff}
.cl-set h3{font-size:24px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:12px}
.cl-set h3 code{font-family:var(--f-code);font-size:14px;color:var(--violet)}
.cl-list{margin:0;padding:0;list-style:none;columns:4 220px;column-gap:24px}
.cl-list li{break-inside:avoid;display:flex;gap:8px;padding:3px 0;font-size:15px;line-height:1.35}
.cl-list li span{font-family:var(--f-code);font-size:12.5px;color:var(--muted);padding-top:2px;flex:none}

/* About */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border:2px solid var(--ink);border-radius:var(--radius);overflow:hidden;box-shadow:5px 5px 0 var(--ink);margin:0}
.facts div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:14px 18px;border-bottom:2px solid var(--line);background:#fff;min-width:0}
.facts div:nth-child(odd){border-right:2px solid var(--line)}
.facts dt{font-family:var(--f-pixel);font-weight:700;font-size:16px;color:var(--violet)}
.facts dd{margin:0;font-weight:600;overflow-wrap:anywhere}
@media (max-width:760px){.facts{grid-template-columns:1fr}.facts div:nth-child(odd){border-right:0}.facts div{grid-template-columns:120px minmax(0,1fr)}}
.story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,380px);gap:clamp(24px,4vw,64px);align-items:center}
.story-grid .prose p{margin:0 0 16px;color:var(--ink2);font-size:18px}
.story-grid .prose p:last-child{margin:0}
.logo-frame{background:#fdfdf9;border:2px solid var(--ink);border-radius:var(--radius);box-shadow:6px 6px 0 var(--ink);padding:8px}
.logo-frame img{width:100%;height:auto;display:block;mix-blend-mode:multiply}
@media (max-width:860px){.story-grid{grid-template-columns:1fr}.logo-frame{max-width:320px;margin:0 auto}}

/* How it works page */
.steps-long{display:grid;gap:16px;list-style:none;margin:0;padding:0}
.steps-long li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;padding:22px 24px;border-radius:var(--radius);background:#fff;border:2px solid var(--line2)}
.steps-long i{font-style:normal;display:grid;place-items:center;width:56px;height:56px;border-radius:14px;background:var(--ink);color:#fff;font-family:var(--f-pixel);font-weight:700;font-size:28px;box-shadow:3px 3px 0 var(--pink)}
.steps-long h2{font-size:clamp(26px,2.6vw,34px);text-shadow:none;margin-bottom:8px}
.steps-long p{margin:0;color:var(--ink2);max-width:86ch}
.safe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.safe div{padding:22px;border-radius:var(--radius);background:#fff;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);min-width:0}
.safe h3{font-size:24px;margin-bottom:8px}
.safe p{margin:0;color:var(--ink2);font-size:16px}
@media (max-width:900px){.safe{grid-template-columns:1fr}}
@media (max-width:520px){.steps-long li{grid-template-columns:1fr}}

/* 404 */
.lost{display:grid;justify-items:start;gap:18px;padding-block:clamp(60px,10vw,140px)}
.lost h1{font-size:clamp(48px,8vw,110px)}

/* ===== Era hero backgrounds (one per page) ===== */
.hero,.page-hero{position:relative;overflow:hidden;isolation:isolate;background:#120a2c;border-bottom:0}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-bg > *{position:absolute}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(12,6,32,.9) 0%,rgba(12,6,32,.74) 38%,rgba(12,6,32,.32) 70%,rgba(12,6,32,.12) 100%),linear-gradient(0deg,rgba(12,6,32,.55),rgba(12,6,32,0) 45%)}
.hero .wrap,.page-hero .wrap{position:relative;z-index:2}
.hero .spark,.page-hero .spark{z-index:2}
@media (max-width:900px){.hero-scrim{background:linear-gradient(180deg,rgba(12,6,32,.72),rgba(12,6,32,.86))}}
/* Copy on dark heroes */
.hero h1,.page-hero h1{color:#fff;text-shadow:-.04em .028em 0 rgba(255,39,176,.75),.04em -.02em 0 rgba(18,208,255,.75)}
.hero h1 .grad{background:linear-gradient(95deg,#ff6ccf,#c39bff 45%,#6cc8ff 75%,#8ff6ff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(-.035em .025em 0 rgba(0,0,0,.35))}
.hero .eyebrow,.page-hero .eyebrow{color:#8ff6ff}
.hero .lede,.page-hero .lede{color:rgba(255,255,255,.9)}
.page-hero .crumbs,.page-hero .crumbs a{color:rgba(255,255,255,.78)}
.page-hero .crumbs li:not(:last-child)::after{color:rgba(255,255,255,.4)}
.page-hero .wrap{padding-block:clamp(48px,6.4vw,104px) clamp(44px,5.6vw,92px)}
.tldr{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tldr p{color:rgba(255,255,255,.92)}
.tldr b{background:#ff27b0}
.hero .ca{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.36);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero .ca-val{color:#fff}
.hero .ca-note{color:rgba(255,255,255,.72)}
.hero .ca-tag{background:#ff27b0}
.hero .btn:not(.primary),.page-hero .btn:not(.primary){border-color:#fff}
.hero .icon-btn.lg{border-color:#fff;box-shadow:4px 4px 0 #ff27b0}
.hero .icon-btn.lg:hover{box-shadow:6px 6px 0 #ff27b0}
.hero .logo-frame{border-color:#fff;box-shadow:8px 8px 0 #ff27b0,0 30px 60px rgba(0,0,0,.45)}

/* Home: 80s synthwave */
.bg-80s{background:linear-gradient(180deg,#0b0420 0%,#24093f 34%,#5c1572 52%,#ff3d9a 63%,#2a0b4f 63.3%,#0b0420 100%)}
.bg-80s .stars{inset:0 0 40% 0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220' shape-rendering='crispEdges'%3E%3Cg fill='%23ffffff'%3E%3Crect x='12' y='30' width='3' height='3'/%3E%3Crect x='90' y='12' width='2' height='2'/%3E%3Crect x='160' y='70' width='3' height='3'/%3E%3Crect x='40' y='140' width='2' height='2'/%3E%3Crect x='200' y='180' width='3' height='3'/%3E%3Crect x='120' y='200' width='2' height='2'/%3E%3C/g%3E%3Cg fill='%237ff3ff'%3E%3Crect x='70' y='90' width='3' height='3'/%3E%3Crect x='180' y='120' width='2' height='2'/%3E%3C/g%3E%3Cg fill='%23ff5cc8'%3E%3Crect x='140' y='30' width='3' height='3'/%3E%3Crect x='20' y='190' width='2' height='2'/%3E%3C/g%3E%3C/svg%3E");opacity:.7;animation:twinkleBg 4s ease-in-out infinite alternate}
.bg-80s .sun{left:72%;bottom:34%;width:min(36vw,460px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:linear-gradient(180deg,#ffe36e 0%,#ff9a3d 45%,#ff2bb7 100%);-webkit-mask:linear-gradient(180deg,#000 50%,transparent 50% 54%,#000 54% 62%,transparent 62% 67%,#000 67% 75%,transparent 75% 81%,#000 81%);mask:linear-gradient(180deg,#000 50%,transparent 50% 54%,#000 54% 62%,transparent 62% 67%,#000 67% 75%,transparent 75% 81%,#000 81%);filter:drop-shadow(0 0 50px rgba(255,80,170,.65));animation:sunPulse 6s ease-in-out infinite alternate}
.bg-80s .grid{left:-60%;right:-60%;bottom:0;height:37%;background-color:#14052e;background-image:linear-gradient(#ff3df0 2px,transparent 2px),linear-gradient(90deg,#ff3df0 2px,transparent 2px);background-size:90px 70px;transform:perspective(260px) rotateX(62deg);transform-origin:50% 0;animation:gridRun 1.2s linear infinite;box-shadow:0 -6px 40px rgba(255,61,240,.6)}
@keyframes gridRun{to{background-position:0 70px,0 0}}
@keyframes sunPulse{to{filter:drop-shadow(0 0 80px rgba(255,80,170,.85))}}
@keyframes twinkleBg{to{opacity:.35}}

/* Cards: 90s Memphis */
.bg-90s{background:linear-gradient(135deg,#6a22e0 0%,#7b2ff7 40%,#00a88f 100%)}
.bg-90s .memA{inset:-160px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='160' viewBox='0 0 240 160'%3E%3Cg fill='none' stroke='%23ffe14d' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M14 30q10-16 20 0t20 0t20 0'/%3E%3Cpath d='M150 120q10-16 20 0t20 0'/%3E%3Cpath d='M200 30l16 16M216 30l-16 16'/%3E%3C/g%3E%3Cg fill='%23ff6b35'%3E%3Cpath d='M110 20l18 30H92z'/%3E%3Ccircle cx='40' cy='118' r='9'/%3E%3Crect x='170' y='70' width='16' height='16' transform='rotate(20 178 78)'/%3E%3C/g%3E%3C/svg%3E");animation:drift90a 22s linear infinite;opacity:.85}
.bg-90s .memB{inset:-180px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='%23a3e635'%3E%3Ccircle cx='30' cy='40' r='4'/%3E%3Ccircle cx='120' cy='20' r='3'/%3E%3Ccircle cx='150' cy='140' r='5'/%3E%3Ccircle cx='60' cy='150' r='3'/%3E%3C/g%3E%3Cg fill='none' stroke='%23111111' stroke-width='4'%3E%3Ccircle cx='100' cy='95' r='14'/%3E%3Cpath d='M10 100h26M23 87v26'/%3E%3C/g%3E%3C/svg%3E");animation:drift90b 30s linear infinite;opacity:.8}
.bg-90s .blob{right:-2%;top:-14%;width:min(16vw,200px);aspect-ratio:1;border-radius:50%;background:#a3e635;border:6px solid #111;box-shadow:12px 12px 0 #111;animation:bob 5s ease-in-out infinite alternate}
@keyframes drift90a{to{transform:translate(240px,160px)}}
@keyframes drift90b{to{transform:translate(-180px,180px)}}
@keyframes bob{to{transform:translateY(24px) rotate(10deg)}}

/* Decades: all four eras cycling */
.bg-cycle{background:linear-gradient(115deg,#1b1037 0%,#ff3d9a 16%,#7b2ff7 32%,#00a88f 48%,#2b7bff 62%,#5ad1ff 74%,#ffb3c7 88%,#c9b6ff 100%);background-size:320% 320%;animation:eraCycle 18s ease-in-out infinite alternate}
.bg-cycle .lines{inset:0;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 2px,transparent 2px 120px);animation:linesSlide 10s linear infinite}
.bg-cycle .eras{right:3%;top:50%;transform:translateY(-50%);display:grid;gap:6px;font-family:var(--f-pixel);font-weight:700;font-size:clamp(70px,9vw,150px);line-height:.9;color:rgba(255,255,255,.14);text-align:right;animation:erasFloat 8s ease-in-out infinite alternate}
@keyframes eraCycle{0%{background-position:0% 50%}100%{background-position:100% 50%}}
@keyframes linesSlide{to{background-position:120px 0}}
@keyframes erasFloat{to{transform:translateY(-46%)}}

/* Checklist: 00s Y2K bubbles */
.bg-00s{background:radial-gradient(circle at 70% 20%,#c5f6ff 0%,#5ad1ff 22%,#2b7bff 48%,#0b1a44 85%)}
.bg-00s .b1{inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cdefs%3E%3CradialGradient id='b' cx='35%25' cy='30%25' r='70%25'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.85'/%3E%3Cstop offset='.25' stop-color='%23fff' stop-opacity='.15'/%3E%3Cstop offset='.85' stop-color='%23bff4ff' stop-opacity='.08'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.6'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='url(%23b)'%3E%3Ccircle cx='60' cy='70' r='34'/%3E%3Ccircle cx='250' cy='40' r='18'/%3E%3Ccircle cx='300' cy='230' r='46'/%3E%3Ccircle cx='120' cy='280' r='22'/%3E%3Ccircle cx='190' cy='160' r='12'/%3E%3C/g%3E%3C/svg%3E");background-size:360px 360px;animation:rise 16s linear infinite}
.bg-00s .b2{inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cdefs%3E%3CradialGradient id='b' cx='35%25' cy='30%25' r='70%25'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.85'/%3E%3Cstop offset='.25' stop-color='%23fff' stop-opacity='.15'/%3E%3Cstop offset='.85' stop-color='%23bff4ff' stop-opacity='.08'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.6'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='url(%23b)'%3E%3Ccircle cx='60' cy='70' r='34'/%3E%3Ccircle cx='250' cy='40' r='18'/%3E%3Ccircle cx='300' cy='230' r='46'/%3E%3Ccircle cx='120' cy='280' r='22'/%3E%3Ccircle cx='190' cy='160' r='12'/%3E%3C/g%3E%3C/svg%3E");background-size:200px 200px;opacity:.55;animation:rise2 10s linear infinite}
.bg-00s .sheen{inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 48%,rgba(255,255,255,.05) 55%,transparent 65%);background-size:250% 100%;animation:sheenSweep 7s ease-in-out infinite}
@keyframes rise{to{background-position:0 -360px}}
@keyframes rise2{to{background-position:0 -200px}}
@keyframes sheenSweep{0%{background-position:120% 0}100%{background-position:-120% 0}}

/* How it works: 10s pastel blobs */
.bg-10s{background:#b9a4f5}
.bg-10s .bl{width:min(52vw,640px);aspect-ratio:1;border-radius:50%;filter:blur(50px);opacity:.95}
.bg-10s .bl1{background:#ffb3c7;left:-8%;top:-30%;animation:blobA 16s ease-in-out infinite alternate}
.bg-10s .bl2{background:#bff0d4;right:-6%;top:-10%;animation:blobB 20s ease-in-out infinite alternate}
.bg-10s .bl3{background:#ffe8a3;left:40%;bottom:-50%;animation:blobC 18s ease-in-out infinite alternate}
.bg-10s .confetti{inset:-100px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520' shape-rendering='crispEdges'%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M100 80h6v6h6v6h-6v6h-6v-6h-6v-6h6z'/%3E%3Cpath d='M400 300h6v6h6v6h-6v6h-6v-6h-6v-6h6z'/%3E%3C/g%3E%3Cg fill='%23ff5cc8'%3E%3Cpath d='M300 120h8v8h8v8h-8v8h-8v-8h-8v-8h8z'/%3E%3C/g%3E%3Cg fill='%237ff3ff'%3E%3Cpath d='M180 400h8v8h8v8h-8v8h-8v-8h-8v-8h8z'/%3E%3C/g%3E%3C/svg%3E");opacity:.7;animation:drift90b 40s linear infinite}
@keyframes blobA{to{transform:translate(18vw,14vh) scale(1.15)}}
@keyframes blobB{to{transform:translate(-16vw,10vh) scale(.9)}}
@keyframes blobC{to{transform:translate(-14vw,-18vh) scale(1.1)}}

/* FAQ: CRT static */
.bg-crt{background:radial-gradient(ellipse at 60% 50%,#3b2a8a 0%,#1b1245 55%,#0c0822 100%)}
.bg-crt .noise{inset:-50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.22;animation:staticJitter .5s steps(6) infinite}
.bg-crt .scan{inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 2px,transparent 2px 4px)}
.bg-crt .track{left:0;right:0;height:22%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.14) 45%,rgba(140,240,255,.18) 50%,transparent);animation:tracking 5.5s linear infinite}
.bg-crt .rgb{inset:0;background:radial-gradient(circle at 78% 40%,rgba(255,39,176,.35),transparent 45%),radial-gradient(circle at 88% 70%,rgba(18,208,255,.3),transparent 40%)}
@keyframes staticJitter{0%{transform:translate(0,0)}20%{transform:translate(-6%,4%)}40%{transform:translate(4%,-6%)}60%{transform:translate(-3%,-2%)}80%{transform:translate(5%,3%)}100%{transform:translate(0,0)}}
@keyframes tracking{0%{top:-25%}100%{top:110%}}

/* About: 8-bit starfield */
.bg-pixel{background:radial-gradient(ellipse at 72% 45%,#3d1d8a 0%,#1a0b40 55%,#0a0520 100%)}
.bg-pixel .s1{inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220' shape-rendering='crispEdges'%3E%3Cg fill='%23ffffff'%3E%3Crect x='12' y='30' width='3' height='3'/%3E%3Crect x='90' y='12' width='2' height='2'/%3E%3Crect x='160' y='70' width='3' height='3'/%3E%3Crect x='40' y='140' width='2' height='2'/%3E%3Crect x='200' y='180' width='3' height='3'/%3E%3Crect x='120' y='200' width='2' height='2'/%3E%3C/g%3E%3Cg fill='%237ff3ff'%3E%3Crect x='70' y='90' width='3' height='3'/%3E%3Crect x='180' y='120' width='2' height='2'/%3E%3C/g%3E%3Cg fill='%23ff5cc8'%3E%3Crect x='140' y='30' width='3' height='3'/%3E%3Crect x='20' y='190' width='2' height='2'/%3E%3C/g%3E%3C/svg%3E");background-size:220px 220px;animation:starsL 40s linear infinite}
.bg-pixel .s2{inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340' viewBox='0 0 340 340' shape-rendering='crispEdges'%3E%3Cg fill='%23ffffff'%3E%3Crect x='50' y='60' width='5' height='5'/%3E%3Crect x='260' y='40' width='4' height='4'/%3E%3Crect x='300' y='250' width='5' height='5'/%3E%3Crect x='120' y='280' width='4' height='4'/%3E%3C/g%3E%3Cg fill='%23b48bff'%3E%3Crect x='200' y='150' width='5' height='5'/%3E%3C/g%3E%3Cg fill='%237ff3ff'%3E%3Crect x='20' y='200' width='4' height='4'/%3E%3C/g%3E%3C/svg%3E");background-size:340px 340px;animation:starsL2 22s linear infinite}
.bg-pixel .s3{inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520' shape-rendering='crispEdges'%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M100 80h6v6h6v6h-6v6h-6v-6h-6v-6h6z'/%3E%3Cpath d='M400 300h6v6h6v6h-6v6h-6v-6h-6v-6h6z'/%3E%3C/g%3E%3Cg fill='%23ff5cc8'%3E%3Cpath d='M300 120h8v8h8v8h-8v8h-8v-8h-8v-8h8z'/%3E%3C/g%3E%3Cg fill='%237ff3ff'%3E%3Cpath d='M180 400h8v8h8v8h-8v8h-8v-8h-8v-8h8z'/%3E%3C/g%3E%3C/svg%3E");background-size:520px 520px;animation:starsL3 14s linear infinite;opacity:.9}
@keyframes starsL{to{background-position:-220px 0}}
@keyframes starsL2{to{background-position:-340px 0}}
@keyframes starsL3{to{background-position:-520px 0}}
@media (prefers-reduced-motion:reduce){.hero-bg *,.hero-bg{animation:none !important}}

/* Packs: foil wrapper sheen, light rays and glints */
.bg-foil{background:linear-gradient(125deg,#1a0b40 0%,#3b1580 30%,#7b2cff 52%,#ff27b0 74%,#ffb347 100%);background-size:240% 240%;animation:eraCycle 16s ease-in-out infinite alternate}
.bg-foil .foil{inset:-20%;background:repeating-linear-gradient(115deg,rgba(255,255,255,0) 0 38px,rgba(255,255,255,.10) 38px 40px,rgba(255,255,255,0) 40px 90px),repeating-linear-gradient(25deg,rgba(18,208,255,0) 0 60px,rgba(18,208,255,.10) 60px 62px,rgba(18,208,255,0) 62px 130px);animation:foilShift 14s linear infinite}
.bg-foil .rays{inset:-40%;background:conic-gradient(from 0deg at 72% 46%,transparent 0 8deg,rgba(255,255,255,.12) 8deg 14deg,transparent 14deg 34deg,rgba(255,255,255,.08) 34deg 40deg,transparent 40deg 64deg,rgba(255,255,255,.1) 64deg 70deg,transparent 70deg 100deg,rgba(255,255,255,.08) 100deg 106deg,transparent 106deg 360deg);animation:raySpin 40s linear infinite}
.bg-foil .glints{inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300' shape-rendering='crispEdges'%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M60 40h4v8h8v4h-8v8h-4v-8h-8v-4h8z'/%3E%3Cpath d='M230 190h4v8h8v4h-8v8h-4v-8h-8v-4h8z'/%3E%3C/g%3E%3Cg fill='%23fff0b0'%3E%3Cpath d='M180 70h3v6h6v3h-6v6h-3v-6h-6v-3h6z'/%3E%3Cpath d='M40 230h3v6h6v3h-6v6h-3v-6h-6v-3h6z'/%3E%3C/g%3E%3C/svg%3E");background-size:300px 300px;animation:twinkleBg 2.6s ease-in-out infinite alternate}
@keyframes foilShift{to{transform:translate(180px,60px)}}
@keyframes raySpin{to{transform:rotate(360deg)}}

/* ===== Header menu ===== */
.site-head{border-bottom:0}
.site-head::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:linear-gradient(90deg,var(--pink),var(--violet) 40%,var(--blue) 70%,var(--cyan));background-size:200% 100%;animation:barShift 8s linear infinite}
@keyframes barShift{to{background-position:200% 0}}
.head-row{display:flex;align-items:center;gap:18px;padding-block:6px}
.brand{margin-right:auto}
.menu ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:6px;background:var(--ink);border-radius:16px;box-shadow:4px 4px 0 var(--pink),inset 0 0 0 1px rgba(255,255,255,.06)}
.menu a{position:relative;display:block;padding:10px 16px;border-radius:11px;font-family:var(--f-pixel);font-weight:600;font-size:17px;letter-spacing:.02em;color:#d6caff;text-decoration:none;transition:color .15s,background .15s,transform .15s}
.menu a:hover{color:#fff;background:rgba(255,255,255,.1);transform:translateY(-1px)}
.menu a[aria-current="page"]{color:#fff;background:linear-gradient(100deg,var(--pink),var(--violet));box-shadow:inset 0 -3px 0 rgba(0,0,0,.22),0 0 18px rgba(255,39,176,.45)}
.menu a[aria-current="page"]::before{content:"";position:absolute;top:5px;right:6px;width:3px;height:3px;background:#fff;box-shadow:0 -3px #fff,0 3px #fff,-3px 0 #fff,3px 0 #fff;opacity:.85}
.head-actions{display:flex;align-items:center;gap:10px}
.icon-btn.hd{width:46px;height:46px;border:2px solid var(--ink);background:#fff;box-shadow:3px 3px 0 var(--ink);transition:transform .12s,box-shadow .12s,background .15s,color .15s}
.icon-btn.hd:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);background:linear-gradient(120deg,var(--pink),var(--violet));color:#fff}
.menu-btn{display:none;width:46px;height:46px;border-radius:12px;border:2px solid var(--ink);background:var(--ink);box-shadow:3px 3px 0 var(--pink);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0}
.menu-btn span{display:block;width:20px;height:3px;background:#fff;transition:transform .2s,opacity .2s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{background:var(--ink);border-top:3px solid var(--pink)}
.mnav ul{list-style:none;margin:0;padding-block:10px 18px;display:grid;gap:4px}
.mnav a{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:12px;font-family:var(--f-pixel);font-weight:600;font-size:24px;color:#e9e2ff;text-decoration:none}
.mnav a::after{content:">";color:var(--cyan)}
.mnav a:hover,.mnav a[aria-current="page"]{background:linear-gradient(100deg,rgba(255,39,176,.35),rgba(123,44,255,.35));color:#fff}
@media (max-width:1060px){.menu{display:none}.menu-btn{display:inline-flex}}
@media (max-width:420px){.icon-btn.hd{width:42px;height:42px}.head-actions{gap:8px}}

/* ===== Hero logo (transparent file, unchanged) ===== */
.hero-logo .logo-float{position:relative;width:min(100%,520px);animation:floaty 6s ease-in-out infinite alternate;filter:drop-shadow(0 18px 40px rgba(0,0,0,.45))}
.hero-logo .logo-float img{display:block;width:100%;height:auto;aspect-ratio:1}
.hero-logo .lg-sweep{position:absolute;inset:0;pointer-events:none;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.85) 48%,rgba(255,255,255,.2) 53%,transparent 62%);background-size:320% 100%;animation:logoSweep 5.5s ease-in-out infinite}
@keyframes floaty{to{transform:translateY(-14px) rotate(-1deg)}}
@keyframes logoSweep{0%,30%{background-position:130% 0}70%,100%{background-position:-30% 0}}
@media (max-width:900px){.hero-logo .logo-float{width:min(70vw,360px)}}

/* ===== Clickable cards ===== */
.live .card{cursor:zoom-in}
.live .card:hover .face{box-shadow:0 2cqw 7cqw rgba(0,0,0,.6),0 0 0 .6cqw rgba(255,255,255,.35)}
.deck figure .live,.rung .live,.era-side .live,.anatomy .live{position:relative}
.open-hint{position:absolute;right:6%;bottom:4%;z-index:5;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(23,10,58,.85);color:#fff;font-size:15px;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s}
.live:hover .open-hint,.live:focus-within .open-hint{opacity:1;transform:none}

/* ===== Card inspector ===== */
.insp{position:fixed;inset:0;z-index:80;overflow-y:auto;background:radial-gradient(ellipse at 30% 40%,rgba(58,28,122,.92),rgba(12,6,32,.96) 70%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:max(24px, env(safe-area-inset-top,0px)) max(16px, env(safe-area-inset-right,0px)) max(24px, env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px));color:#fff;animation:inspIn .25s ease}
@keyframes inspIn{from{opacity:0}}
.insp-grid{min-height:100%;display:grid;grid-template-columns:auto minmax(0,420px);align-items:center;justify-content:center;gap:clamp(24px,5vw,72px);max-width:1180px;margin:0 auto}
.insp-card{width:min(420px,84vw,calc((100dvh - 110px) * 5 / 7));animation:cardPop .35s cubic-bezier(.2,.9,.3,1.2)}
@keyframes cardPop{from{transform:scale(.85) translateY(20px);opacity:0}}
.insp-info{display:flex;flex-direction:column;gap:16px;min-width:0}
.insp-info .eyebrow{color:#8ff6ff}
.insp-info h2{font-size:clamp(32px,3.2vw,46px);color:#fff;text-shadow:-.04em .03em 0 rgba(255,39,176,.7),.04em -.02em 0 rgba(18,208,255,.7)}
.insp-meta{margin:0;color:rgba(255,255,255,.85);font-size:17px}
.insp-tag{margin:0;font-style:italic;color:#ffd6f1}
.insp-fins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.insp-fins button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:0 8px;white-space:nowrap;border-radius:10px;border:2px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;font-family:var(--f-pixel);font-weight:600;font-size:14px;cursor:pointer;transition:border-color .15s,background .15s}
.insp-fins button:hover{border-color:rgba(255,255,255,.6)}
.insp-fins button[aria-pressed="true"]{background:#fff;color:var(--ink);border-color:#fff}
.insp-fins .dot{width:11px;height:11px;border-radius:50%;flex:none}
.insp-row{display:flex;flex-wrap:wrap;gap:12px}
.insp-row .btn{border-color:#fff;box-shadow:4px 4px 0 var(--pink)}
.insp-row .btn:hover{box-shadow:6px 6px 0 var(--pink)}
.insp-hint{margin:0;font-size:14px;color:rgba(255,255,255,.65)}
.insp-x{position:fixed;top:max(14px, calc(env(safe-area-inset-top,0px) + 12px));right:max(14px, calc(env(safe-area-inset-right,0px) + 12px));z-index:2;width:50px;height:50px;border-radius:14px;border:2px solid #fff;background:var(--ink);color:#fff;font-size:26px;line-height:1;cursor:pointer;box-shadow:3px 3px 0 var(--pink)}
body.insp-open{overflow:hidden}
@media (max-width:860px){.insp-grid{grid-template-columns:1fr;justify-items:center;padding-top:44px}.insp-card{width:min(340px,80vw)}.insp-info{width:min(520px,100%)}}

/* ===== Metrics ===== */
[data-count]{font-variant-numeric:tabular-nums}
[data-count].counting{text-shadow:0 0 14px currentColor}
.num{font-weight:800;color:var(--violet)}
.facts .num{color:var(--pink)}
.cl-count{margin-left:auto;font-family:var(--f-text);font-size:15px;font-weight:600;color:var(--muted)}
.cl-count .num{color:var(--violet)}

/* ===== Footer ===== */
.site-foot{background:#fff;border-top:2px solid var(--line)}
.foot-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:28px clamp(28px,4vw,64px);padding-block:clamp(36px,4vw,56px) 26px}
.foot-brand img{display:block;width:104px;height:104px;mix-blend-mode:multiply}
.foot-bio{display:flex;flex-direction:column;gap:10px;min-width:0}
.foot-bio b,.foot-nav b{font-family:var(--f-pixel);font-size:21px;color:var(--ink)}
.foot-bio p{margin:0;font-size:16px;line-height:1.55;color:var(--ink2)}
.foot-bio .foot-social{display:flex;gap:10px;margin:6px 0 0}
.foot-nav{display:grid;gap:12px;min-width:0}
.foot-nav ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,auto);gap:10px 36px}
.foot-nav a{font-weight:600;font-size:15px;color:var(--ink2);text-decoration:none;white-space:nowrap}
.foot-nav a:hover{color:var(--violet);text-decoration:underline}
.foot-legal{margin:0;padding-block:20px;border-top:2px solid var(--line);font-size:14px;line-height:1.6;color:var(--muted)}
.foot-base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 28px;padding-block:18px 26px;border-top:2px solid var(--line);font-size:14px;color:var(--muted)}
.foot-base a{font-weight:700;color:var(--violet);text-decoration:none}
.foot-base a:hover{text-decoration:underline}
@media (max-width:860px){.foot-top{grid-template-columns:auto minmax(0,1fr)}.foot-nav{grid-column:1/-1}.foot-nav ul{grid-template-columns:repeat(4,auto);justify-content:start}}
@media (max-width:600px){.foot-top{grid-template-columns:1fr}.foot-brand img{width:88px;height:88px}.foot-nav ul{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-base{flex-direction:column;align-items:flex-start}}

/* ===== Packs ===== */
.spk-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);align-items:stretch}
.spk{display:flex;flex-direction:column;gap:14px;min-width:0;padding:18px 14px 16px;border-radius:20px;border:2px solid var(--night-line);background:rgba(255,255,255,.04);color:#fff;font:inherit;cursor:pointer;transition:transform .2s,border-color .2s,background .2s,box-shadow .2s}
.spk:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.5)}
.spk[aria-pressed="true"]{transform:translateY(-8px);border-color:#fff;background:rgba(255,255,255,.1);box-shadow:0 0 0 3px var(--pink),0 22px 44px rgba(255,39,176,.35)}
.spk:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.spk-cap{display:grid;gap:3px;text-align:center}
.spk-cap i{font-style:normal;font-family:var(--f-pixel);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
.spk-cap b{font-family:var(--f-pixel);font-weight:700;font-size:clamp(17px,1.5vw,21px)}
.spk-cap span{font-size:14px;color:var(--night-muted)}
.spk[aria-pressed="true"] .spk-cap span{color:#fff}
@media (max-width:900px){.spk-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(150px,40vw);overflow-x:auto;scroll-snap-type:x mandatory;padding:12px 4px 18px;margin-inline:-4px}.spk{scroll-snap-align:center}}
.pk-panel{display:grid;grid-template-columns:minmax(250px,340px) minmax(0,1.1fr) minmax(0,1fr);margin-top:clamp(26px,3vw,40px);border:2px solid rgba(255,255,255,.2);border-radius:22px;overflow:hidden;background:rgba(255,255,255,.05)}
.pk-buy{display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.6vw,36px);min-width:0}
.pk-buy .eyebrow{color:var(--cyan)}
.pk-buy h3{font-size:clamp(34px,3.4vw,48px);color:#fff}
.pk-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0}
.pk-price b{font-family:var(--f-pixel);font-weight:700;font-size:clamp(46px,4.6vw,64px);line-height:1;color:#fff;font-variant-numeric:tabular-nums;text-shadow:-.04em .03em 0 rgba(255,39,176,.7),.04em -.02em 0 rgba(18,208,255,.7)}
.pk-price span{font-weight:600;color:var(--night-muted)}
.pk-blurb{margin:0;font-size:18px;color:var(--night-fg)}
.pk-cur{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pk-cur button{min-height:46px;border-radius:12px;border:2px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;font-family:var(--f-pixel);font-weight:700;font-size:17px;cursor:pointer;transition:border-color .15s,background .15s}
.pk-cur button:hover{border-color:rgba(255,255,255,.6)}
.pk-cur button[aria-pressed="true"]{background:#fff;color:var(--ink);border-color:#fff}
.pk-curnote{margin:0;font-size:15px;color:var(--night-muted)}
.pk-go{width:100%;border-color:#fff;box-shadow:4px 4px 0 var(--pink)}
.pk-go:disabled{cursor:not-allowed;opacity:.85;filter:saturate(.7)}
.pk-fine{margin:0;font-size:13.5px;color:var(--night-muted)}
.pk-odds{display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.6vw,36px);background:rgba(0,0,0,.22);border-left:2px solid rgba(255,255,255,.12);min-width:0}
.pk-odds h3{font-size:clamp(24px,2.2vw,30px);color:#fff}
.pk-odds dl{margin:0;display:grid;flex:1;grid-auto-rows:1fr}
.pk-odds dl div{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:2px dashed rgba(255,255,255,.14)}
.pk-odds dl div:last-child{border-bottom:0}
.pk-odds dt{font-weight:600;color:var(--night-muted)}
.pk-odds dd{margin:0;font-family:var(--f-pixel);font-weight:700;font-size:clamp(20px,1.9vw,26px);color:#fff;font-variant-numeric:tabular-nums;text-align:right}
.pk-odds dl div:nth-child(n+3) dd{color:#ffd56a}
.pk-odds dd.pop{animation:ddPop .45s ease}
@keyframes ddPop{40%{transform:scale(1.12);text-shadow:0 0 16px currentColor}}
.pk-odds .pk-fine{margin-top:4px}
@media (max-width:1180px){.pk-panel{grid-template-columns:minmax(230px,320px) minmax(0,1fr)}.pk-odds{grid-column:1/-1;border-left:0;border-top:2px solid rgba(255,255,255,.12)}.pk-odds dl{grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:auto;gap:12px}.pk-odds dl div{flex-direction:column;align-items:flex-start;gap:6px;padding:14px 16px;border:2px solid rgba(255,255,255,.12);border-radius:14px}.pk-odds dl div:last-child{border-bottom:2px solid rgba(255,255,255,.12)}.pk-odds dd{text-align:left}}
@media (max-width:860px){.pk-panel{grid-template-columns:1fr}.pk-odds dl{grid-template-columns:repeat(2,minmax(0,1fr))}.pk-odds dl div:first-child{grid-column:1/-1}}
.split-bar{display:flex;height:50px;margin-bottom:clamp(18px,2vw,26px);border:2px solid var(--ink);border-radius:14px;overflow:hidden;box-shadow:5px 5px 0 var(--ink)}
.split-bar span{display:grid;place-items:center;min-width:12px;font-family:var(--f-pixel);font-weight:700;font-size:20px;color:#fff}
.split-bar span:nth-child(1){background:linear-gradient(100deg,var(--violet),var(--blue))}
.split-bar span:nth-child(2){background:var(--pink);border-left:2px solid var(--ink)}
.split-bar span:nth-child(3){background:#ff7a1a;border-left:2px solid var(--ink)}
.split{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.sp{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:var(--radius);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);background:#fff;min-width:0}
.sp > b{font-family:var(--f-pixel);font-weight:700;font-size:clamp(44px,4vw,60px);line-height:1}
.sp-t > b{color:var(--violet)}.sp-d > b{color:var(--pink)}.sp-b > b{color:#ff7a1a}
.sp h3{font-size:26px}
.sp p{margin:0;color:var(--ink2);font-size:16px}
.sp p a{font-weight:700;color:var(--violet)}
.sp > a{margin-top:auto;font-weight:600;font-size:15px;color:var(--violet);text-decoration:none}
.sp > a:hover{text-decoration:underline}
.sp code{font-family:var(--f-code);font-size:14px;padding:2px 6px;border-radius:6px;background:var(--tint)}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.table-scroll{overflow-x:auto;margin-bottom:clamp(20px,2.4vw,30px);border:2px solid var(--ink);border-radius:var(--radius);box-shadow:5px 5px 0 var(--ink);background:#fff}
.table-scroll:last-child{margin-bottom:0}
.odds-t{width:100%;min-width:680px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.odds-t caption{caption-side:top;text-align:left;padding:16px 20px;font-family:var(--f-pixel);font-weight:700;font-size:20px;color:var(--ink);border-bottom:2px solid var(--line)}
.odds-t th,.odds-t td{padding:13px 20px;text-align:left;border-bottom:1px solid var(--line);font-size:16px}
.odds-t thead th{background:var(--ink);color:#fff;font-family:var(--f-pixel);font-weight:600;font-size:15px;letter-spacing:.04em}
.odds-t tbody th{font-weight:700;color:var(--ink)}
.odds-t tbody tr:last-child > *{border-bottom:0}
.odds-t tbody tr:hover{background:var(--tint)}

/* Live packs: the supplied design, tilted, with light layers masked to the pack's own shape */
.pack3d{--mx:50%;--my:50%;--px:.5;--py:.5;--rx:0deg;--ry:0deg;--hyp:0;position:relative;display:block;width:100%;aspect-ratio:.68;perspective:1100px}
.p3-tilt{position:absolute;inset:0;transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;will-change:transform}
.p3-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:drop-shadow(0 18px 24px rgba(0,0,0,.5))}
.p3-holo,.p3-sheen,.p3-glare,.p3-shade{position:absolute;inset:0;pointer-events:none;-webkit-mask-image:var(--img);mask-image:var(--img);-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.p3-holo{background:repeating-linear-gradient(115deg,#ff4fd8 0%,#38e1ff 7%,#fff27a 14%,#9b6bff 21%,#ff4fd8 28%);background-size:320% 320%;background-position:calc(var(--px) * 100%) calc(var(--py) * 100%);mix-blend-mode:overlay;opacity:calc(.16 + var(--hyp) * .5)}
.p3-sheen{background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.95) 47%,rgba(255,255,255,.35) 52%,transparent 64%);background-size:260% 100%;background-position:calc(100% - var(--px) * 100%) 0;mix-blend-mode:overlay;opacity:.85}
.p3-glare{background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.95),rgba(255,255,255,.4) 16%,rgba(255,255,255,0) 42%);mix-blend-mode:screen;opacity:calc(.2 + var(--hyp) * .45)}
.p3-shade{background:radial-gradient(farthest-corner at var(--mx) var(--my),rgba(0,0,0,0) 28%,rgba(28,6,60,.55) 100%);mix-blend-mode:multiply;opacity:calc(.25 + var(--hyp) * .6)}
.spk .pack3d{width:100%}
.pk-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:clamp(20px,2.4vw,32px);background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--ga,#ff27b0) 42%,transparent),transparent 62%),radial-gradient(circle at 50% 80%,color-mix(in srgb,var(--gb,#12d0ff) 30%,transparent),transparent 60%),rgba(0,0,0,.28);border-right:2px solid rgba(255,255,255,.12);min-width:0;transition:background .4s}
.pk-big{appearance:none;display:block;width:min(100%,300px);padding:0;border:0;background:none;cursor:zoom-in;border-radius:14px}
.pk-big:focus-visible{outline:3px solid var(--cyan);outline-offset:6px}
.pk-big .pack3d.swap{animation:packSwap .5s cubic-bezier(.2,.9,.3,1.2)}
@keyframes packSwap{from{transform:translateY(22px) scale(.9);opacity:0}}
.pk-hint{margin:0;font-size:13.5px;color:var(--night-muted);text-align:center;max-width:32ch}
@media (max-width:860px){.pk-stage{border-right:0;border-bottom:2px solid rgba(255,255,255,.12)}.pk-big{width:min(64vw,280px)}}
.pk-insp .insp-card{width:min(460px,82vw,calc((100dvh - 110px) * .68))}
.pk-insp .insp-card .pack3d{animation:cardPop .35s cubic-bezier(.2,.9,.3,1.2)}
.pk-insp dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pk-insp dl div{padding:12px 14px;border-radius:12px;border:2px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05)}
.pk-insp dt{font-size:13.5px;font-weight:600;color:rgba(255,255,255,.7)}
.pk-insp dd{margin:4px 0 0;font-family:var(--f-pixel);font-weight:700;font-size:22px;color:#fff}
.pk-insp dl div:nth-child(n+3) dd{color:#ffd56a}
.odds-t th small{display:inline-block;margin-left:6px;font-family:var(--f-pixel);font-size:12px;letter-spacing:.06em;color:var(--muted)}

/* ===== Dark header and footer: the transparent logo has a white wordmark ===== */
.site-head{background:rgba(12,6,32,.93)}
.brand img{width:106px;height:106px;margin-block:-12px;filter:drop-shadow(0 4px 14px rgba(255,39,176,.35))}
.menu ul{background:rgba(255,255,255,.06);box-shadow:4px 4px 0 var(--pink),inset 0 0 0 1px rgba(255,255,255,.16)}
.icon-btn.hd{border-color:#fff;box-shadow:3px 3px 0 var(--pink)}
.icon-btn.hd:hover{box-shadow:5px 5px 0 var(--pink)}
.menu-btn{border-color:rgba(255,255,255,.85)}
@media (max-width:520px){.brand img{width:76px;height:76px;margin-block:-6px}}
.site-foot{position:relative;background:#0c0620;border-top:0;color:var(--night-fg)}
.site-foot::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--pink),var(--violet) 40%,var(--blue) 70%,var(--cyan));background-size:200% 100%;animation:barShift 8s linear infinite}
.foot-brand img{width:120px;height:120px;margin:-10px;mix-blend-mode:normal;filter:drop-shadow(0 6px 18px rgba(255,39,176,.3))}
.foot-bio b,.foot-nav b{color:#fff}
.foot-bio p{color:#d8cff5}
.foot-nav a{color:#e9e2ff}
.foot-nav a:hover{color:var(--cyan)}
.foot-legal{border-top-color:rgba(255,255,255,.12);color:var(--night-muted)}
.foot-base{border-top-color:rgba(255,255,255,.12);color:var(--night-muted)}
.foot-base a{color:var(--cyan)}
@media (max-width:600px){.foot-brand img{width:100px;height:100px;margin:-8px}}
.logo-frame.dark{background:radial-gradient(circle at 50% 40%,#2c1569,#0c0620 75%);border-color:var(--ink)}
.logo-frame.dark img{mix-blend-mode:normal}

/* Live cards: same engine as the card room */
.card{--f-display:"Bungee","Arial Black",Impact,sans-serif;--f-body:"Archivo","Helvetica Neue",Arial,sans-serif;--f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;--kraft:#d8cbb0;--kraft-ink:#2b2118;--amber:var(--cyan)}
/* ================= CARD ================= */
.card{position:relative;width:100%;aspect-ratio:5/7;container-type:inline-size;perspective:1100px;--mx:50%;--my:50%;--px:.5;--py:.5;--rx:0deg;--ry:0deg;--hyp:0;-webkit-tap-highlight-color:transparent;touch-action:pan-y;outline:none}
.card.big{touch-action:none;cursor:pointer}
.card:focus-visible .face{outline:3px solid var(--amber);outline-offset:3px}
.card .tilt{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry))}
.card .flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.25,.8,.25,1)}
.card.flipped .flip{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:4.8cqw;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;isolation:isolate;box-shadow:0 1.6cqw 5cqw rgba(0,0,0,.55),0 .4cqw 1cqw rgba(0,0,0,.35)}
.face.back{transform:rotateY(180deg)}
.frame{position:absolute;inset:0;padding:5cqw 5cqw 4.6cqw;display:flex;flex-direction:column;gap:2.6cqw}
.topline{display:flex;justify-content:space-between;align-items:center;gap:2cqw;font-family:var(--f-mono);font-size:3cqw;letter-spacing:.06em;line-height:1;min-height:5cqw}
.era-b{font-family:var(--f-display);font-size:4.4cqw;line-height:1}
.art{position:relative;flex:1;min-height:0;border-radius:2.6cqw;overflow:hidden}
.art-bg,.art .holo{position:absolute;inset:0}
.icon-wrap{position:absolute;inset:11% 13% 9%;display:grid;place-items:center;z-index:2}
.icon{width:100%;height:100%;overflow:visible;fill:none;stroke:var(--ink);stroke-width:3.2;stroke-linejoin:round;stroke-linecap:round}
.icon .a{fill:var(--c1)}.icon .b{fill:var(--c2)}.icon .d{fill:var(--c3)}.icon .k{fill:var(--ink)}.icon .p{fill:#fffaf0}
.icon .g{fill:#dfe3ea}.icon .gs{fill:#9aa3b5}.icon .t{fill:#e3a35a}.icon .br{fill:#6b3a1f}.icon .r{fill:#e2412f}.icon .y{fill:#ffd23f}
.icon .gl{fill:var(--c2);fill-opacity:.88}.icon .cream circle{fill:#fff3d6}
.icon .w{fill:#fff;opacity:.55;stroke:none}
.icon .n{fill:none}.icon .sa{fill:none;stroke:var(--c1)}.icon .sb{fill:none;stroke:var(--c2)}
.plate{position:relative;z-index:2}
.nm{font-family:var(--f-body);font-weight:850;font-stretch:74%;text-transform:uppercase;font-size:6.7cqw;line-height:.98;letter-spacing:.005em;overflow-wrap:anywhere}
.nm.long{font-size:5.6cqw}
.sub{display:flex;justify-content:space-between;align-items:center;gap:2cqw;font-size:3cqw;margin-top:1.3cqw;line-height:1.15}
.ty{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.sn{flex:none;font-family:var(--f-mono);font-size:2.7cqw;font-weight:600;white-space:nowrap;padding:.5cqw 1.6cqw;border-radius:99px;background:rgba(0,0,0,.18)}
.stamp{position:absolute;top:4cqw;right:3.6cqw;z-index:4;font-family:var(--f-display);font-size:4.6cqw;line-height:1;padding:1.4cqw 2.2cqw;border-radius:1.6cqw;transform:rotate(8deg);color:#3a2705;background:linear-gradient(135deg,#fff3b8,#e2a823 55%,#fff0b0);box-shadow:0 .8cqw 1.6cqw rgba(0,0,0,.35)}

/* Era: 80s */
.card[data-era="80s"]{--ink:#120c22}
.card[data-era="80s"] .face.front{background:#0d0a1c;color:#fff}
.card[data-era="80s"] .topline{color:var(--c2)}
.card[data-era="80s"] .art{box-shadow:0 0 0 .6cqw var(--c1),0 0 0 1.2cqw #0d0a1c,0 0 0 1.8cqw var(--c2)}
.card[data-era="80s"] .art-bg{background:linear-gradient(180deg,var(--c3) 0%,color-mix(in srgb,var(--c3) 62%,var(--c1)) 50%,color-mix(in srgb,var(--c1) 72%,#ffcf6a) 61%,#0a0618 61.4%,#0a0618 100%)}
.card[data-era="80s"] .art-bg::before{content:"";position:absolute;left:50%;top:21%;width:58%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:linear-gradient(180deg,#ffe28a 0%,var(--c1) 85%);-webkit-mask:linear-gradient(180deg,#000 52%,transparent 52% 56%,#000 56% 64%,transparent 64% 69%,#000 69% 76%,transparent 76% 82%,#000 82%);mask:linear-gradient(180deg,#000 52%,transparent 52% 56%,#000 56% 64%,transparent 64% 69%,#000 69% 76%,transparent 76% 82%,#000 82%);opacity:.85}
.card[data-era="80s"] .art-bg::after{content:"";position:absolute;left:-60%;right:-60%;top:61%;height:60%;background-image:linear-gradient(var(--c2) .35cqw,transparent .35cqw),linear-gradient(90deg,var(--c2) .35cqw,transparent .35cqw);background-size:9cqw 5cqw;transform:perspective(26cqw) rotateX(60deg);transform-origin:50% 0;opacity:.65}
.card[data-era="80s"] .icon{filter:drop-shadow(0 0 1.4cqw color-mix(in srgb,var(--c2) 85%,transparent))}
.card[data-era="80s"] .plate{background:linear-gradient(180deg,#1d1440,#0d0a1c);border:.5cqw solid var(--c1);border-radius:1.6cqw;padding:2.2cqw 3cqw 2cqw}
.card[data-era="80s"] .nm{color:#fff;text-shadow:.4cqw .4cqw 0 var(--c1)}
.card[data-era="80s"] .sub{color:color-mix(in srgb,var(--c2) 70%,#fff)}
.card[data-era="80s"] .sn{background:rgba(255,255,255,.1)}

/* Era: 90s */
.card[data-era="90s"]{--ink:#111}
.card[data-era="90s"] .face.front{background:var(--c2);color:#111}
.card[data-era="90s"] .frame{background:var(--pat90k) 0 0/24cqw}
.card[data-era="90s"] .topline{color:#111;font-weight:600}
.card[data-era="90s"] .era-b{background:#111;color:#fff;padding:1cqw 2cqw;border-radius:1cqw;transform:rotate(-4deg)}
.card[data-era="90s"] .setc{background:#fff;padding:.8cqw 1.8cqw;border:.5cqw solid #111;border-radius:1cqw}
.card[data-era="90s"] .art{border:.9cqw solid #111;border-radius:2.2cqw}
.card[data-era="90s"] .art-bg{background:var(--pat90w) 0 0/22cqw,radial-gradient(circle at 50% 54%,color-mix(in srgb,var(--c2) 65%,#fff) 0 33%,transparent 33.5%),var(--c3)}
.card[data-era="90s"] .icon{filter:drop-shadow(1.3cqw 1.3cqw 0 rgba(0,0,0,.85))}
.card[data-era="90s"] .plate{background:#fff;border:.8cqw solid #111;box-shadow:1.4cqw 1.4cqw 0 var(--c1);transform:rotate(-1.4deg);padding:2cqw 3cqw;border-radius:1cqw;margin-right:1.4cqw}
.card[data-era="90s"] .nm{color:#111}
.card[data-era="90s"] .sub{color:#333}
.card[data-era="90s"] .sn{background:#111;color:#fff}

/* Era: 00s */
.card[data-era="00s"]{--ink:#14223a}
.card[data-era="00s"] .face.front{background:linear-gradient(135deg,#eef3f9 0%,#9ba8bb 26%,#f8fbff 48%,#8694aa 72%,#e6ecf4 100%);color:#22314a}
.card[data-era="00s"] .topline{color:#2a3a55;font-weight:600}
.card[data-era="00s"] .era-b{color:#0d6bd8;text-shadow:0 .3cqw 0 #fff}
.card[data-era="00s"] .art{border-radius:3.6cqw;box-shadow:inset 0 0 0 .5cqw rgba(255,255,255,.75),0 .8cqw 2.2cqw rgba(20,40,80,.35)}
.card[data-era="00s"] .art-bg{background:radial-gradient(circle at 18% 22%,rgba(255,255,255,.6) 0 3.4%,transparent 3.9%),radial-gradient(circle at 82% 30%,transparent 0 5.2%,rgba(255,255,255,.55) 5.7% 6.6%,transparent 7.1%),radial-gradient(circle at 74% 80%,transparent 0 7%,rgba(255,255,255,.45) 7.5% 8.4%,transparent 8.9%),radial-gradient(circle at 24% 72%,rgba(255,255,255,.4) 0 2.2%,transparent 2.7%),radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--c2) 45%,#fff) 0%,var(--c2) 32%,var(--c3) 82%)}
.card[data-era="00s"] .art::after{content:"";position:absolute;inset:0 0 54% 0;z-index:3;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.06));border-radius:0 0 50% 50%/0 0 26% 26%;pointer-events:none}
.card[data-era="00s"] .icon{filter:drop-shadow(0 1.8cqw 1.6cqw rgba(0,30,70,.4))}
.card[data-era="00s"] .plate{border-radius:99px;background:linear-gradient(180deg,color-mix(in srgb,var(--c3) 40%,#2d5590),color-mix(in srgb,var(--c3) 25%,#0b1a36));box-shadow:inset 0 .6cqw 0 rgba(255,255,255,.35),0 .6cqw 1.6cqw rgba(0,0,0,.3);padding:2.2cqw 5cqw 2.2cqw}
.card[data-era="00s"] .nm{color:#fff;text-shadow:0 .35cqw 0 rgba(0,0,0,.35)}
.card[data-era="00s"] .sub{color:#cfe4ff}
.card[data-era="00s"] .sn{background:rgba(255,255,255,.16)}

/* Era: 10s */
.card[data-era="10s"]{--ink:#3a2f45}
.card[data-era="10s"] .face.front{background:color-mix(in srgb,var(--c1) 12%,#fffaf6);color:#2c2433}
.card[data-era="10s"] .topline{color:#7a6e80}
.card[data-era="10s"] .era-b{color:color-mix(in srgb,var(--c1) 55%,#2c2433)}
.card[data-era="10s"] .art{border-radius:3.2cqw}
.card[data-era="10s"] .art-bg{background:radial-gradient(circle at 50% 54%,color-mix(in srgb,var(--c3) 85%,#fff) 0 34%,transparent 34.4%),var(--pat10) 0 0/26cqw,color-mix(in srgb,var(--c2) 70%,var(--c1))}
.card[data-era="10s"] .icon{filter:drop-shadow(0 1.4cqw 0 rgba(60,30,60,.13))}
.card[data-era="10s"] .icon{stroke-width:2.8}
.card[data-era="10s"] .plate{background:#fff;border-radius:2.2cqw;padding:2.2cqw 3cqw;box-shadow:0 .5cqw 1.6cqw rgba(80,50,80,.12)}
.card[data-era="10s"] .nm{color:#2c2433;text-transform:none;font-weight:780;font-stretch:80%;letter-spacing:-.005em;font-size:6.9cqw}
.card[data-era="10s"] .nm.long{font-size:5.8cqw}
.card[data-era="10s"] .sub{color:#8a7f8d}
.card[data-era="10s"] .sn{background:color-mix(in srgb,var(--c1) 22%,#fff);color:#2c2433}

/* Finish layers */
.fx{position:absolute;inset:0;pointer-events:none;border-radius:inherit}
.fx.glare{z-index:8;background:radial-gradient(farthest-corner circle at var(--mx) var(--my),rgba(255,255,255,.8) 0%,rgba(255,255,255,.26) 14%,rgba(255,255,255,0) 42%,rgba(0,0,0,.26) 100%);mix-blend-mode:overlay;opacity:calc(.3 + var(--hyp) * .5)}
.fx.laser,.fx.swirl,.fx.sheen,.fx.ink,.art .holo{display:none}
.card[data-finish="holo"] .art .holo{display:block;z-index:1;background-image:repeating-linear-gradient(115deg,#ff7a7a 0%,#ffd36b 7%,#a8ff7a 14%,#6bf0ff 21%,#8f8bff 28%,#ff7ae0 35%,#ff7a7a 42%),radial-gradient(circle,rgba(255,255,255,.95) 0 .3cqw,transparent .45cqw);background-size:260% 260%,3.6cqw 3.6cqw;background-position:calc(var(--px) * 100%) calc(var(--py) * 100%),0 0;mix-blend-mode:color-dodge;opacity:calc(.5 + var(--hyp) * .4)}
.card[data-finish="laser"] .fx.laser,.card[data-finish="gold"] .fx.laser,.card[data-finish="super"] .fx.laser{display:block;z-index:5}
.card[data-finish="laser"] .fx.laser{background-image:repeating-conic-gradient(from calc(var(--px) * 140deg) at calc(25% + var(--px) * 50%) calc(30% + var(--py) * 40%),rgba(255,255,255,.26) 0deg 1deg,rgba(255,255,255,0) 1deg 4.5deg),linear-gradient(calc(105deg + var(--px) * 50deg),#ff3b6b 0%,#ffb340 11%,#f5ff5a 22%,#4dff9a 33%,#3bd5ff 44%,#6a5bff 55%,#e34bff 66%,#ff3b6b 77%,#ffb340 88%,#f5ff5a 100%);background-size:100% 100%,250% 250%;background-position:0 0,calc(100% - var(--px) * 100%) calc(100% - var(--py) * 100%);mix-blend-mode:color-dodge;opacity:calc(.34 + var(--hyp) * .42)}
.card[data-finish="gold"] .fx.laser{background-image:repeating-conic-gradient(from calc(var(--px) * 140deg) at calc(25% + var(--px) * 50%) calc(30% + var(--py) * 40%),rgba(255,240,200,.3) 0deg 1deg,rgba(255,255,255,0) 1deg 4.5deg),linear-gradient(calc(105deg + var(--px) * 50deg),#b8790f 0%,#ffd15a 15%,#fff3c0 28%,#e3a21a 42%,#ffe79a 56%,#c98914 70%,#fff0b0 85%,#b8790f 100%);background-size:100% 100%,250% 250%;background-position:0 0,calc(100% - var(--px) * 100%) calc(100% - var(--py) * 100%);mix-blend-mode:color-dodge;opacity:calc(.3 + var(--hyp) * .4)}
.card[data-finish="super"] .fx.laser{background-image:repeating-conic-gradient(from calc(var(--px) * 300deg) at var(--mx) var(--my),#ffe08a 0deg 5deg,#ff9d5c 5deg 10deg,#fff6d0 10deg 15deg,#c58a12 15deg 20deg,#9be7ff 20deg 25deg,#ffcf5a 25deg 30deg);mix-blend-mode:color-dodge;opacity:calc(.12 + var(--hyp) * .22)}
.card[data-finish="super"] .fx.swirl{display:block;z-index:6;inset:-35%;background-image:var(--swirl);background-size:100% 100%;transform:rotate(calc((var(--px) - .5) * 80deg + (var(--py) - .5) * 30deg));mix-blend-mode:overlay;opacity:calc(.34 + var(--hyp) * .3)}
.card[data-finish="laser"] .fx.sheen,.card[data-finish="gold"] .fx.sheen,.card[data-finish="super"] .fx.sheen{display:block;z-index:7;background:linear-gradient(calc(100deg + var(--py) * 20deg),transparent 30%,rgba(255,255,255,.55) 46%,rgba(255,255,255,.1) 52%,transparent 64%);background-size:280% 100%;background-position:calc(var(--px) * 100%) 0;mix-blend-mode:soft-light}
/* Gold and Super Laser get a gold foil frame */
.card[data-finish="gold"] .face.front,.card[data-finish="super"] .face.front{background:linear-gradient(135deg,#6e4a0c 0%,#f6d77a 20%,#fff4c4 36%,#c8921d 54%,#f9e08f 74%,#6e4a0c 100%);background-size:220% 220%;background-position:calc(var(--px) * 100%) calc(var(--py) * 100%);color:#3a2705}
.card[data-finish="gold"] .frame,.card[data-finish="super"] .frame{background:none}
.card[data-finish="gold"] .topline,.card[data-finish="super"] .topline{color:#3a2705}
.card[data-finish="gold"] .era-b,.card[data-finish="super"] .era-b{color:#3a2705;background:none;text-shadow:0 .3cqw 0 rgba(255,255,255,.5)}
.card[data-finish="gold"] .art,.card[data-finish="super"] .art{box-shadow:0 0 0 .7cqw #3a2705,0 0 0 1.3cqw #fff2bf}
/* Serial pills by finish */
.card[data-finish="holo"] .sn{background:linear-gradient(90deg,#d9e2ff,#ffe1f3,#dcfff1);color:#222}
.card[data-finish="laser"] .sn{background:linear-gradient(90deg,#ff7aa2,#ffd36b,#7ef0ff,#b39bff);color:#111}
.card[data-finish="gold"] .sn,.card[data-finish="super"] .sn{background:linear-gradient(90deg,#fff3b8,#e2a823,#fff0b0);color:#3a2705}
.card[data-finish="misprint"] .sn{background:#e8372c;color:#fff}
/* Misprint */
.card[data-finish="misprint"] .art{transform:translate(2.6cqw,-1.4cqw) rotate(-1deg)}
.card[data-finish="misprint"] .art-bg{filter:hue-rotate(80deg) saturate(1.5)}
.card[data-finish="misprint"] .icon{filter:drop-shadow(-1.1cqw 0 0 rgba(255,0,90,.75)) drop-shadow(1.1cqw 0 0 rgba(0,210,255,.75))}
.card[data-finish="misprint"] .nm{text-shadow:-.6cqw 0 rgba(255,0,90,.85),.6cqw 0 rgba(0,210,255,.85)}
.card[data-finish="misprint"] .fx.ink{display:block;z-index:5;background:linear-gradient(98deg,transparent 0 56%,rgba(255,0,150,.32) 58%,rgba(255,0,150,.12) 62%,transparent 66%),repeating-linear-gradient(0deg,rgba(0,0,0,.07) 0 .4cqw,transparent .4cqw 1cqw);mix-blend-mode:multiply}
.card[data-finish="misprint"] .stamp{background:#e8372c;color:#fff;transform:rotate(-7deg)}

/* Card back */
.face.back{background:var(--kraft);color:var(--kraft-ink)}
.bk{position:absolute;inset:0;padding:0 5cqw 4cqw;display:flex;flex-direction:column;gap:1.7cqw;z-index:1}
.bk-head{display:flex;justify-content:space-between;align-items:center;gap:2cqw;background:radial-gradient(circle at var(--mx) 0%,#3a1c7a 0%,#170a3a 60%);color:#fff;margin:0 -5cqw;padding:1.4cqw 5cqw 1.4cqw 3.6cqw;border-bottom:.9cqw solid var(--c1)}
.bk-logo{position:relative;display:block;width:13cqw;height:13cqw;flex:none}
.bk-logo img{display:block;width:100%;height:100%}
.bk-logo i{position:absolute;inset:0;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;pointer-events:none}
.bk-logo .lg-shine{background:linear-gradient(calc(110deg + var(--py) * 30deg),transparent 28%,rgba(255,255,255,.95) 44%,rgba(255,255,255,.35) 50%,transparent 62%);background-size:300% 100%;background-position:calc(var(--px) * 100%) 0;opacity:calc(.35 + var(--hyp) * .65)}
.bk-logo .lg-holo{background:linear-gradient(calc(120deg + var(--px) * 60deg),#ff3b6b,#ffd36b,#4dff9a,#3bd5ff,#a06bff,#ff3b6b);background-size:200% 200%;background-position:calc(100% - var(--px) * 100%) calc(var(--py) * 100%);mix-blend-mode:color-dodge;opacity:calc(.15 + var(--hyp) * .45)}
.bk-no{display:flex;flex-direction:column;align-items:flex-end;gap:.4cqw;font-family:var(--f-mono);line-height:1.1}
.bk-no b{font-size:3.4cqw;font-weight:600;letter-spacing:.04em}
.bk-no span{font-size:2.3cqw;opacity:.8}
.bk-title h4{font-family:var(--f-body);font-stretch:74%;font-weight:850;font-size:6.6cqw;line-height:.98;text-transform:uppercase;margin:0;overflow-wrap:anywhere}
.bk-type{margin:.9cqw 0 0;font-size:3.1cqw;font-weight:700;font-stretch:90%}
.bk-tag{margin:.5cqw 0 0;font-size:3cqw;font-style:italic;font-stretch:90%}
.bk-facts{display:grid;grid-template-columns:1fr 1fr;gap:1.2cqw 3cqw;margin:0;padding:1.6cqw 0;border-block:.4cqw solid var(--kraft-ink)}
.bk-facts div{min-width:0}
.bk-facts dt{font-family:var(--f-mono);font-size:2.2cqw;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.bk-facts dd{margin:.2cqw 0 0;font-size:3cqw;font-weight:700;line-height:1.15;font-stretch:88%}
.bk-sec h5{font-family:var(--f-mono);font-size:2.3cqw;letter-spacing:.12em;text-transform:uppercase;margin:0 0 .5cqw}
.bk-sec p{margin:0;font-size:2.95cqw;line-height:1.3;font-stretch:86%}
.bk-stats{display:grid;gap:.75cqw}
.stat{display:grid;grid-template-columns:19cqw 1fr 3.4cqw;align-items:center;gap:1.8cqw;font-family:var(--f-mono);font-size:2.3cqw;letter-spacing:.06em;text-transform:uppercase}
.stat b{text-align:right}
.pips{display:grid;grid-template-columns:repeat(10,1fr);gap:.6cqw}
.pip{height:2cqw;border:.35cqw solid var(--kraft-ink);border-radius:.4cqw}
.pip.on{background:color-mix(in srgb,var(--c1) 55%,var(--kraft-ink))}
.bk-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:3cqw;font-family:var(--f-mono);font-size:2.1cqw;line-height:1.35}
.bk-foot span:first-child{min-width:0}
.barcode{flex:none;width:18cqw;height:6cqw;background:repeating-linear-gradient(90deg,var(--kraft-ink) 0 .4cqw,transparent .4cqw .7cqw,var(--kraft-ink) .7cqw 1.4cqw,transparent 1.4cqw 1.8cqw,var(--kraft-ink) 1.8cqw 2cqw,transparent 2cqw 2.6cqw)}
.face.back .fx.laser{opacity:calc(.14 + var(--hyp) * .26) !important}
.card[data-finish="gold"] .bk-head,.card[data-finish="super"] .bk-head{border-bottom-color:#e2a823;background:radial-gradient(circle at var(--mx) 0%,#5a3d0c 0%,#1c1206 65%);color:#ffe7a3}
.card[data-finish="holo"] .face.back{background:linear-gradient(135deg,#dfd4bc,#e9e2d2 50%,#d4c6aa)}
.card[data-finish="misprint"] .bk{transform:translate(1.4cqw,1cqw) rotate(.7deg)}
.bk-stamp{position:absolute;z-index:4;right:6cqw;top:32%;font-family:var(--f-display);font-size:7cqw;color:#e8372c;border:.8cqw solid #e8372c;padding:1cqw 2.4cqw;border-radius:1.6cqw;transform:rotate(-14deg);opacity:.8;mix-blend-mode:multiply}


/* Real card art */
.art-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;display:block}
.card[data-finish="holo"] .art.has-img .holo{z-index:2;mix-blend-mode:color-dodge;opacity:calc(.16 + var(--hyp) * .34)}
.card[data-finish="misprint"] .art-img{filter:hue-rotate(70deg) saturate(1.35) contrast(1.05)}
.card[data-finish="misprint"] .art.has-img::before{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(90deg,rgba(255,0,90,.18),rgba(0,210,255,.18));mix-blend-mode:screen;transform:translateX(1.4cqw)}
.card.has-art[data-era="80s"] .art{box-shadow:0 0 0 .5cqw var(--c1),0 0 0 1cqw #0d0a1c,0 0 2.6cqw .4cqw color-mix(in srgb,var(--c2) 70%,transparent)}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

/* ===== Launch teaser ===== */
.cd{display:grid;gap:14px;padding:18px 20px;border-radius:20px;background:rgba(12,6,32,.6);border:2px solid rgba(255,255,255,.2);box-shadow:0 0 0 1px rgba(255,39,176,.35),0 20px 50px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cd-label{margin:0;font-family:var(--f-pixel);font-weight:600;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan)}
.cd-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1vw,12px)}
.cd-t{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:14px 6px 12px;border-radius:14px;background:linear-gradient(180deg,#2c1569,#150a38);border:2px solid rgba(255,255,255,.14);box-shadow:inset 0 -4px 0 rgba(0,0,0,.32),0 0 22px rgba(123,44,255,.25)}
.cd-t b{display:block;font-family:var(--f-pixel);font-weight:700;font-size:clamp(36px,4.2vw,62px);line-height:1;color:#fff;font-variant-numeric:tabular-nums;text-shadow:-.04em .03em 0 rgba(255,39,176,.8),.04em -.02em 0 rgba(18,208,255,.8)}
.cd-t b.cd-flip{animation:cdTick .42s cubic-bezier(.2,.9,.3,1.2)}
@keyframes cdTick{0%{transform:translateY(-22%) scale(.92);opacity:.25}100%{transform:none;opacity:1}}
.cd-t span{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--night-muted)}
.cd-when{margin:0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 18px;font-size:15px;font-weight:600;color:#fff}
.cd-when span{color:var(--night-muted);font-weight:500}
.cd-live{display:flex;flex-direction:column;gap:6px}
.cd-live b{font-family:var(--f-pixel);font-weight:700;font-size:clamp(40px,5vw,68px);line-height:1;background:linear-gradient(95deg,var(--pink),var(--violet) 50%,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;animation:livePulse 1.6s ease-in-out infinite alternate}
.cd-live span{color:#fff;font-size:16px}
@keyframes livePulse{to{filter:drop-shadow(0 0 14px rgba(255,39,176,.7))}}
.cd.is-live .cd-tiles{display:none}
@media (max-width:420px){.cd{padding:14px}.cd-t{padding:12px 2px 10px}.cd-t span{font-size:10.5px;letter-spacing:.08em}}

.tp-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.tp{display:flex;flex-direction:column;gap:14px;margin:0;min-width:0;padding:18px 14px 16px;border-radius:20px;border:2px solid var(--night-line);background:rgba(255,255,255,.04);transition:border-color .2s,transform .2s,box-shadow .2s}
.tp:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.55);box-shadow:0 22px 44px rgba(255,39,176,.25)}
.tp figcaption{display:grid;gap:3px;justify-items:center;text-align:center}
.tp figcaption i{font-style:normal;font-family:var(--f-pixel);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
.tp figcaption b{font-family:var(--f-pixel);font-weight:700;font-size:clamp(17px,1.5vw,21px);color:#fff}
.tp figcaption span{font-size:14px;color:var(--night-muted)}
.tp figcaption em{margin-top:8px;font-style:normal;font-family:var(--f-pixel);font-weight:600;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;border-radius:999px;color:#ffc2ea;background:rgba(255,39,176,.16);border:1px solid rgba(255,39,176,.5)}
.tz-packs .deck-note{margin-top:clamp(26px,3vw,40px)}
@media (max-width:900px){.tp-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(150px,40vw);overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 4px 18px;margin-inline:-4px}.tp{scroll-snap-align:center}}

.tz-steps .step .when{align-self:flex-start;font-family:var(--f-pixel);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:8px;background:var(--tint);color:var(--violet);border:2px solid var(--line2)}
.tz-steps .step.now{border-color:var(--ink);box-shadow:5px 5px 0 var(--pink)}
.tz-steps .step.now .when{background:linear-gradient(100deg,var(--pink),var(--violet));color:#fff;border-color:transparent}
@media (max-width:1000px){.tz-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tz-steps{grid-template-columns:1fr}}
.tz-hero .hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);padding-block:clamp(26px,3.2vw,48px) clamp(32px,4vw,56px)}
.tz-hero .hero-copy{gap:20px}
.tz-hero h1{font-size:clamp(40px,4.3vw,64px)}
@media (max-width:900px){.tz-hero .hero-grid{grid-template-columns:1fr}.tz-hero .hero-logo .logo-float{width:min(46vw,190px)}}

/* ===== Live ticker under the header ===== */
.tick{position:relative;overflow:hidden;background:linear-gradient(90deg,#1a0b40,#2a0f5c 50%,#1a0b40);border-top:1px solid rgba(255,255,255,.08)}
.tick::before,.tick::after{content:"";position:absolute;top:0;bottom:0;width:40px;z-index:1;pointer-events:none}
.tick::before{left:0;background:linear-gradient(90deg,#1a0b40,transparent)}.tick::after{right:0;background:linear-gradient(270deg,#1a0b40,transparent)}
.tick-track{display:flex;width:max-content;text-decoration:none;color:#e9e2ff;animation:tickRun 48s linear infinite}
.tick:hover .tick-track{animation-play-state:paused}
.tick-group{display:flex;align-items:center;gap:34px;padding:9px 17px;white-space:nowrap}
.ti{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--night-muted)}
.ti b{font-family:var(--f-pixel);font-weight:700;font-size:15px;color:#fff}
.ti .tv{font-family:var(--f-code);font-weight:700;color:#fff}
.ti code{font-family:var(--f-code);font-size:13px;color:#fff;background:rgba(255,255,255,.08);padding:2px 7px;border-radius:6px}
.ti.lockt{color:#ffd56a}.ti svg{width:14px;height:14px}
.chg{font-family:var(--f-code);font-weight:700;font-size:13.5px;color:var(--night-muted)}
.chg.pos{color:#5df2a4}.chg.neg{color:#ff6b9f}
.tv sub{font-size:.68em;vertical-align:-.25em;margin:0 .05em}
.tv.up{animation:flashUp 1s ease}.tv.down{animation:flashDown 1s ease}
@keyframes flashUp{30%{color:#5df2a4;text-shadow:0 0 12px rgba(93,242,164,.7)}}
@keyframes flashDown{30%{color:#ff6b9f;text-shadow:0 0 12px rgba(255,107,159,.7)}}
@keyframes tickRun{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tick-track{animation:none}.tick{overflow-x:auto}}

/* ===== Trade: Jupiter swap + live market ===== */
:root{--jupiter-plugin-primary:255, 39, 176;--jupiter-plugin-background:14, 7, 38;--jupiter-plugin-primaryText:243, 238, 255;--jupiter-plugin-warning:255, 213, 106;--jupiter-plugin-interactive:44, 21, 105;--jupiter-plugin-module:24, 11, 62}
.trade-grid{display:grid;grid-template-columns:minmax(320px,440px) minmax(0,1fr);gap:clamp(18px,2.4vw,32px);align-items:stretch}
.swap-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:12px;border-radius:22px;border:2px solid rgba(255,255,255,.22);background:rgba(14,7,38,.85);box-shadow:0 0 0 1px rgba(255,39,176,.35),0 24px 60px rgba(0,0,0,.4)}
.swap-box{position:relative;flex:none;height:440px}
#jupiter-plugin{position:relative;height:100%;border-radius:16px;overflow:hidden}
.swap-wait{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:16px;padding:24px;text-align:center;border-radius:16px;background:linear-gradient(180deg,#24105a,#130833)}
.swap-wait p{margin:0;color:#fff;font-size:16px;max-width:30ch}
.spin{width:42px;height:42px;border-radius:50%;border:4px solid rgba(255,255,255,.15);border-top-color:var(--pink);border-right-color:var(--cyan);animation:spin 1s linear infinite}
.swap-wait.failed .spin{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.tz-trade .btn{border-color:#fff;box-shadow:4px 4px 0 var(--pink)}
.mkt{display:flex;flex-direction:column;gap:16px;min-width:0}
.mkt-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-radius:16px;border:2px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05)}
.mkt-head b{font-family:var(--f-pixel);font-size:18px;color:#fff}
.mkt-head span[data-m-updated]{margin-left:auto;font-size:14px;color:var(--night-muted)}
.live-dot{width:11px;height:11px;border-radius:50%;background:#5df2a4;box-shadow:0 0 0 0 rgba(93,242,164,.7);animation:livePing 1.8s ease-out infinite}
@keyframes livePing{70%{box-shadow:0 0 0 10px rgba(93,242,164,0)}100%{box-shadow:0 0 0 0 rgba(93,242,164,0)}}
.mkt-grid{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:12px}
.mt{display:flex;flex-direction:column;justify-content:center;gap:10px;min-width:0;padding:20px;border-radius:16px;border:2px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05)}
.mt span{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--night-muted)}
.mt b{font-family:var(--f-pixel);font-weight:700;font-size:clamp(24px,2.4vw,34px);line-height:1.05;color:#fff;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.mt b.tv{font-family:var(--f-code);font-size:clamp(20px,2vw,28px)}
.mt b.pos{color:#5df2a4}.mt b.neg{color:#ff6b9f}
.mkt-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mkt-links .btn{min-height:48px;padding:0 10px;font-size:16px}
.mkt .pk-fine{margin:0}
@media (max-width:1000px){.trade-grid{grid-template-columns:1fr}}
@media (max-width:640px){.mkt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mkt-links{grid-template-columns:repeat(2,minmax(0,1fr))}.mt{padding:16px}}

/* ===== Tokenomics ===== */
@property --fill{syntax:'<number>';inherits:false;initial-value:0}
.tok-grid{display:grid;grid-template-columns:minmax(260px,360px) minmax(0,1fr);gap:clamp(20px,2.6vw,36px);align-items:stretch}
.tok-chart{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:26px;border-radius:var(--radius);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);background:#fff;min-width:0}
.donut-wrap{position:relative;width:min(100%,250px);flex:none}
.donut{--fill:0;width:100%;aspect-ratio:1;border-radius:50%;background:conic-gradient(from -90deg,var(--pink) 0,var(--violet) calc(var(--fill) * 1%),#c9f3ff calc(var(--fill) * 1%),#7fe3ff 100%);-webkit-mask:radial-gradient(circle,transparent 54%,#000 55%);mask:radial-gradient(circle,transparent 54%,#000 55%);transition:--fill 1.8s cubic-bezier(.2,.8,.2,1)}
.tok-chart.seen .donut{--fill:var(--lock)}
.donut-c{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.donut-c b{font-family:var(--f-pixel);font-weight:700;font-size:34px;color:var(--ink)}
.donut-c span{font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tok-legend{list-style:none;margin:0;padding:0;display:grid;gap:10px;width:100%}
.tok-legend li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--tint)}
.tok-legend b{font-family:var(--f-pixel);font-size:17px}
.tok-legend span{font-family:var(--f-code);font-weight:700;font-size:14px;color:var(--ink2)}
.sw{width:14px;height:14px;border-radius:4px}.sw.lock{background:linear-gradient(135deg,var(--pink),var(--violet))}.sw.free{background:#7fe3ff}
.tok-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:clamp(12px,1.4vw,18px)}
.tt{display:flex;flex-direction:column;gap:10px;min-width:0;padding:22px;border-radius:var(--radius);border:2px solid var(--line2);background:#fff}
.tt > span{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--violet)}
.tt > b{font-family:var(--f-pixel);font-weight:700;font-size:clamp(26px,2.4vw,34px);line-height:1.05;color:var(--ink);overflow-wrap:anywhere}
.tt p{margin:0;font-size:15.5px;color:var(--ink2)}
.tt a{font-weight:700;color:var(--violet)}
.tt code{font-family:var(--f-code);font-size:13.5px;padding:1px 6px;border-radius:6px;background:var(--tint)}
@media (max-width:1180px){.tok-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.tok-grid{grid-template-columns:1fr}.tok-chart{flex-direction:row;flex-wrap:wrap}.tok-legend{flex:1 1 220px}}
@media (max-width:560px){.tok-tiles{grid-template-columns:1fr}.tok-chart{flex-direction:column}}

/* Roadmap: done step */
.tz-steps .step.done .when{background:#e3fbef;color:#0d7a45;border-color:#9fe8c4}
.tz-steps .step.done .when::before{content:"✓ "}
.swap-steps{flex:1;list-style:none;margin:0;padding:6px 6px 4px;display:grid;align-content:space-evenly;gap:10px;counter-reset:none}
.swap-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px}
.swap-steps i{font-style:normal;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--pink),var(--violet));color:#fff;font-family:var(--f-pixel);font-weight:700;font-size:17px}
.swap-steps b{display:block;font-family:var(--f-pixel);font-size:16px;color:#fff}
.swap-steps span{display:block;font-size:14px;color:var(--night-muted)}
.swap-steps code{font-family:var(--f-code);font-size:13px;color:#fff;background:rgba(255,255,255,.1);padding:1px 5px;border-radius:5px}