/* ==========================================================================
   TCGalaxy — galactic trading card community
   ========================================================================== */

:root{
  --void:#04050d;
  --void-2:#080a18;
  --ink:#0d1024;
  --line:rgba(140,160,255,.14);
  --line-strong:rgba(160,180,255,.30);

  --text:#e8ecff;
  --text-dim:#a3adcf;
  --text-faint:#6f7aa3;

  --cyan:#5ef2ff;
  --violet:#8b5cff;
  --magenta:#ff4fd8;
  --gold:#ffd23f;
  --mint:#4ff0b7;

  --grad-main:linear-gradient(100deg,var(--cyan),var(--violet) 48%,var(--magenta));
  --glow-cyan:0 0 30px rgba(94,242,255,.35);
  --glow-violet:0 0 40px rgba(139,92,255,.35);

  --font-display:'Orbitron',ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --font-body:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --wrap:1200px;
  --r:18px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;
  background:var(--void);
  color:var(--text);
  font-family:var(--font-body);
  font-size:clamp(15px,.35vw + 14px,17px);
  line-height:1.65;
  overflow-x:hidden;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.05;margin:0;letter-spacing:-.01em}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
button,input{font:inherit;color:inherit}
::selection{background:rgba(139,92,255,.45);color:#fff}

.wrap{width:min(var(--wrap),calc(100% - 2.5rem));margin-inline:auto}

/* inline sigil sprite: sizes to the parent's font-size, inherits its colour */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sigil{
  width:1em;height:1em;display:block;
  fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-999px;top:0;z-index:200;background:var(--violet);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 10px 0}
.skip-link:focus{left:0}

:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}

.grad{
  background:var(--grad-main);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* ========================= BACKDROP LAYERS ========================= */
#starfield{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

.nebula{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.neb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.neb--violet{width:60vw;height:60vw;left:-15vw;top:-10vw;background:radial-gradient(circle,rgba(139,92,255,.55),transparent 65%);animation:drift 26s var(--ease) infinite alternate}
.neb--cyan{width:52vw;height:52vw;right:-12vw;top:22vh;background:radial-gradient(circle,rgba(94,242,255,.38),transparent 65%);animation:drift 32s var(--ease) infinite alternate-reverse}
.neb--magenta{width:46vw;height:46vw;left:28vw;bottom:-18vw;background:radial-gradient(circle,rgba(255,79,216,.34),transparent 65%);animation:drift 38s var(--ease) infinite alternate}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6vw,-5vh,0) scale(1.18)}}

.grid-floor{
  position:fixed;left:0;right:0;bottom:0;height:46vh;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to top,rgba(4,5,13,1) 6%,rgba(4,5,13,0) 70%),
    repeating-linear-gradient(to right,rgba(139,92,255,.25) 0 1px,transparent 1px 62px),
    repeating-linear-gradient(to top,rgba(94,242,255,.16) 0 1px,transparent 1px 46px);
  transform:perspective(420px) rotateX(70deg);
  transform-origin:bottom;
  opacity:.55;
  mask-image:linear-gradient(to top,#000 10%,transparent 85%);
}
.scanlines{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;
}
.cursor-aurora{
  position:fixed;top:0;left:0;width:520px;height:520px;margin:-260px 0 0 -260px;z-index:0;
  pointer-events:none;border-radius:50%;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(circle,rgba(139,92,255,.16),rgba(94,242,255,.07) 42%,transparent 68%);
}
body.has-pointer .cursor-aurora{opacity:1}

main,.nav,.footer{position:relative;z-index:2}

/* ========================= BUTTONS ========================= */
.btn{
  --pad:.85rem 1.5rem;
  display:inline-flex;align-items:center;gap:.55rem;
  padding:var(--pad);border-radius:999px;border:1px solid var(--line-strong);
  font-family:var(--font-display);font-weight:700;font-size:.82rem;letter-spacing:.11em;text-transform:uppercase;
  cursor:pointer;background:transparent;position:relative;overflow:hidden;
  transition:transform .25s var(--ease),box-shadow .3s var(--ease),border-color .3s,color .3s;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{
  background:var(--grad-main);color:#06060f;border-color:transparent;
  box-shadow:0 10px 34px -12px rgba(139,92,255,.9),inset 0 0 0 1px rgba(255,255,255,.28);
}
.btn--primary:hover{box-shadow:0 16px 44px -12px rgba(255,79,216,.85),inset 0 0 0 1px rgba(255,255,255,.45)}
.btn--primary::after{
  content:"";position:absolute;inset:0;transform:translateX(-120%);
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
}
.btn--primary:hover::after{animation:sheen .8s var(--ease)}
@keyframes sheen{to{transform:translateX(120%)}}
.btn--ghost{background:rgba(140,160,255,.06);backdrop-filter:blur(8px);color:var(--text)}
.btn--ghost:hover{border-color:var(--cyan);color:#fff;box-shadow:var(--glow-cyan)}

/* ========================= NAV ========================= */
.nav{position:sticky;top:0;z-index:60;transition:background .35s,border-color .35s,backdrop-filter .35s}
.nav::after{content:"";position:absolute;inset:0;border-bottom:1px solid transparent;pointer-events:none;transition:border-color .35s}
.nav.is-stuck{background:rgba(5,6,16,.72);backdrop-filter:blur(16px) saturate(140%)}
.nav.is-stuck::after{border-bottom-color:var(--line)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0}

.brand{display:flex;align-items:center;gap:.7rem}
.brand__orb{width:34px;height:34px;display:block;filter:drop-shadow(0 0 10px rgba(139,92,255,.8));animation:spinOrb 14s linear infinite}
@keyframes spinOrb{to{transform:rotate(360deg)}}
.brand__text{font-family:var(--font-display);font-weight:900;letter-spacing:.16em;font-size:1.02rem}
.brand__text span{background:var(--grad-main);-webkit-background-clip:text;background-clip:text;color:transparent}

.nav__links{display:flex;align-items:center;gap:1.9rem}
.nav__links a{font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;font-weight:500;color:var(--text-dim);position:relative;transition:color .25s}
.nav__links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;background:var(--grad-main);transition:width .3s var(--ease)}
.nav__links a:hover{color:#fff}
.nav__links a:not(.btn):hover::after{width:100%}
.nav__cta{--pad:.62rem 1.15rem;color:var(--text)!important}

.nav__toggle{display:none;width:44px;height:38px;background:none;border:1px solid var(--line-strong);border-radius:10px;cursor:pointer;padding:0;place-items:center}
.nav__toggle span{display:block;width:18px;height:2px;background:var(--text);margin:3px auto;transition:transform .3s var(--ease),opacity .2s}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ========================= HERO ========================= */
.hero{position:relative;padding:clamp(3rem,7vw,6.5rem) 0 clamp(4rem,8vw,7rem)}
.hero__inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4rem);align-items:center}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-display);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-dim);
  border:1px solid var(--line);background:rgba(140,160,255,.05);padding:.45rem .9rem;border-radius:999px;margin-bottom:1.4rem;
}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(79,240,183,.7);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(79,240,183,0)}100%{box-shadow:0 0 0 0 rgba(79,240,183,0)}}

.hero__title{font-size:clamp(2.6rem,7.2vw,5.1rem);font-weight:900;letter-spacing:-.02em;margin-bottom:1.3rem}
.hero__title .line{display:block;opacity:0;transform:translateY(28px);animation:riseIn .9s var(--ease) forwards}
.hero__title .line:nth-child(1){animation-delay:.05s}
.hero__title .line:nth-child(2){animation-delay:.18s}
.hero__title .line:nth-child(3){animation-delay:.31s}
@keyframes riseIn{to{opacity:1;transform:none}}
.hero__lede{color:var(--text-dim);max-width:56ch;font-size:1.05rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.85rem;margin:2rem 0 2.6rem}

.hero__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;border-top:1px solid var(--line);padding-top:1.4rem}
.hero__stats dt{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint)}
.hero__stats dd{font-family:var(--font-display);font-weight:700;font-size:clamp(1.15rem,2vw,1.6rem);margin-top:.2rem}

/* --- floating cards --- */
.hero__stage{position:relative;height:clamp(360px,44vw,520px);display:grid;place-items:center;perspective:1200px}
.orbit-ring{
  position:absolute;width:min(430px,82%);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(139,92,255,.32);
  transform:rotateX(72deg);animation:spinRing 22s linear infinite;
  box-shadow:0 0 60px rgba(139,92,255,.22) inset;
}
.orbit-ring--2{width:min(560px,100%);border-color:rgba(94,242,255,.18);animation-duration:34s;animation-direction:reverse}
@keyframes spinRing{to{transform:rotateX(72deg) rotateZ(360deg)}}

.card3d{position:absolute;width:clamp(150px,17vw,206px);aspect-ratio:5/7;transform-style:preserve-3d;will-change:transform}
.card3d--main{z-index:3;animation:float 7s ease-in-out infinite}
.card3d--left{transform:translate3d(-72%,12%,-60px) rotate(-14deg);z-index:2;animation:float 8.5s ease-in-out .6s infinite}
.card3d--right{transform:translate3d(72%,-8%,-60px) rotate(13deg);z-index:2;animation:float 9.5s ease-in-out 1.2s infinite}
@keyframes float{50%{translate:0 -18px}}

/* Scoped: `.holo` below also sets `position`, and at equal specificity the later
   rule would win and collapse this box. */
.card3d .card3d__inner{
  position:absolute;inset:0;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 26px 60px -22px rgba(0,0,0,.95),0 0 34px -8px rgba(139,92,255,.55);
  transition:transform .18s var(--ease);
}
/* holo surfaces */
.holo{position:relative;background:#0a0c1c}
.holo::before{
  content:"";position:absolute;inset:0;opacity:.85;
  background:
    radial-gradient(circle at 30% 25%,rgba(255,255,255,.28),transparent 45%),
    var(--holo,linear-gradient(140deg,#3b1f7a,#0d1a4d 45%,#6a1f6b));
}
.holo::after{
  content:"";position:absolute;inset:-40%;opacity:.55;mix-blend-mode:color-dodge;
  background:repeating-linear-gradient(115deg,
    rgba(255,0,128,.28) 0 8px,rgba(0,255,240,.28) 8px 16px,
    rgba(255,215,0,.22) 16px 24px,transparent 24px 44px);
  background-size:220% 220%;
  transform:translateX(var(--shine,0%));
  transition:transform .18s linear;
  animation:holoSweep 7s linear infinite;
}
@keyframes holoSweep{to{background-position:220% 0}}
.holo>*{position:relative;z-index:2}
.holo--prime{--holo:linear-gradient(140deg,#5b2bd6,#101c5c 45%,#c2258f)}
.holo--void{--holo:linear-gradient(140deg,#122a5e,#050a24 50%,#2a1060)}
.holo--solar{--holo:linear-gradient(140deg,#7a3a00,#4a0f2a 50%,#b8860b)}
.holo--nebula{--holo:linear-gradient(140deg,#2b0f5e,#0a1440 45%,#8e1f7a)}
.holo--emerald{--holo:linear-gradient(140deg,#04564a,#062a3e 50%,#0f7a52)}
.holo--crimson{--holo:linear-gradient(140deg,#6b0f2a,#2a0512 50%,#a81a3c)}
.holo--frost{--holo:linear-gradient(140deg,#0b4a6e,#071b3a 50%,#3a7fb5)}
.holo--vintage{--holo:linear-gradient(140deg,#4a3a12,#20180a 50%,#8a6a1e)}

.scroll-hint{
  position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--text-faint);
  display:grid;justify-items:center;gap:.5rem;
}
.scroll-hint span{width:1px;height:38px;background:linear-gradient(to bottom,transparent,var(--cyan));animation:beam 2s ease-in-out infinite}
@keyframes beam{50%{opacity:.25;height:24px}}

/* ========================= SECTIONS ========================= */
.section{padding:clamp(4.5rem,9vw,8rem) 0;position:relative}
.section--vault{background:linear-gradient(180deg,transparent,rgba(139,92,255,.07),transparent)}
.section--events{background:linear-gradient(180deg,transparent,rgba(94,242,255,.05),transparent)}
.section__head{max-width:64ch;margin-bottom:clamp(2.5rem,5vw,4rem)}
.kicker{font-family:var(--font-display);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--cyan);margin-bottom:1rem}
.section__title{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:900;margin-bottom:1rem}
.section__lede{color:var(--text-dim)}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ========================= SECTORS ========================= */
/* 320px min keeps this at 3 columns on desktop, so nine sectors land as a clean 3×3 */
.sectors{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.2rem}
.sector{
  position:relative;padding:1.8rem 1.6rem 1.6rem;border-radius:var(--r);
  border:1px solid var(--line);background:linear-gradient(180deg,rgba(20,24,52,.72),rgba(8,10,24,.72));
  backdrop-filter:blur(10px);overflow:hidden;
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s;
}
.sector::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s;
  background:radial-gradient(420px circle at 20% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%);
}
.sector::after{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--accent);opacity:.65}
.sector:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 24px 50px -28px color-mix(in srgb,var(--accent) 80%,transparent)}
.sector:hover::before{opacity:1}
.sector>*{position:relative;z-index:2}
.sector__glyph{font-size:2rem;color:var(--accent);line-height:1;margin-bottom:1rem;filter:drop-shadow(0 0 14px color-mix(in srgb,var(--accent) 70%,transparent))}
.sector h3{font-size:1.15rem;letter-spacing:.04em;margin-bottom:.65rem;text-transform:uppercase}
.sector p{color:var(--text-dim);font-size:.94rem}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.1rem 0 1.3rem}
.chips li{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;padding:.28rem .6rem;border-radius:999px;border:1px solid var(--line);color:var(--text-dim);background:rgba(255,255,255,.03)}
.sector__count{font-family:var(--font-display);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}

/* ==================== SEARCH CONTROLS ==================== */
.browser{
  padding:1.5rem;border-radius:var(--r);margin-bottom:2rem;
  border:1px solid var(--line);background:rgba(10,12,28,.62);backdrop-filter:blur(10px);
}
.game-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.1rem}
.game-tab{
  flex:1 1 140px;padding:.75rem 1.1rem;border-radius:12px;cursor:pointer;
  border:1px solid var(--line);background:rgba(140,160,255,.05);
  font-family:var(--font-display);font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-dim);transition:all .28s var(--ease);
}
.game-tab:hover{color:#fff;border-color:color-mix(in srgb,var(--accent) 60%,transparent)}
.game-tab.is-active{
  color:#06060f;border-color:transparent;
  background:linear-gradient(120deg,var(--accent),color-mix(in srgb,var(--accent) 45%,#fff));
  box-shadow:0 10px 28px -14px var(--accent);
}

.searchbar{display:flex;gap:.6rem;align-items:center;position:relative}
.searchbar__icon{
  position:absolute;left:1.05rem;top:50%;translate:0 -50%;
  font-size:1rem;color:var(--text-faint);pointer-events:none;z-index:2;
}
.searchbar input{
  flex:1 1 auto;min-width:0;padding:.9rem 1.1rem .9rem 2.9rem;border-radius:999px;
  border:1px solid var(--line-strong);background:rgba(4,5,13,.75);
  transition:border-color .25s,box-shadow .25s;
}
.searchbar input::placeholder{color:var(--text-faint)}
.searchbar input:focus{outline:none;border-color:var(--cyan);box-shadow:var(--glow-cyan)}
.searchbar__go{flex:0 0 auto}

.presets{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.filter{
  padding:.5rem 1.05rem;border-radius:999px;border:1px solid var(--line);background:rgba(140,160,255,.05);
  font-family:var(--font-display);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dim);cursor:pointer;transition:all .28s var(--ease);
}
.filter:hover{color:#fff;border-color:var(--line-strong)}
.filter.is-active{
  background:var(--grad-main);color:#06060f;border-color:transparent;
  box-shadow:0 8px 26px -12px rgba(139,92,255,.9);
}
.result-meta{
  margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line);
  font-family:var(--font-display);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);min-height:1.4em;
}

/* ==================== SOURCE STRIP (hero) ==================== */
.sources-strip{
  display:flex;flex-wrap:wrap;gap:1rem 2rem;
  border-top:1px solid var(--line);padding-top:1.4rem;
}
.sources-strip li{display:grid;gap:.15rem}
.sources-strip span{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint)}
.sources-strip a{
  font-family:var(--font-display);font-size:.86rem;color:var(--text);
  border-bottom:1px solid transparent;transition:color .25s,border-color .25s;width:max-content;
}
.sources-strip a:hover{color:var(--cyan);border-bottom-color:var(--cyan)}

/* ==================== BADGES & OUTBOUND LINKS ==================== */
.badge{
  display:inline-block;font-family:var(--font-display);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;padding:.28rem .65rem;border-radius:999px;
  border:1px solid var(--line-strong);color:var(--text-faint);
}
.badge--live{border-color:rgba(79,240,183,.55);color:var(--mint);background:rgba(79,240,183,.08)}
.sector__fact{
  font-family:var(--font-display);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent,var(--text-faint));margin-bottom:.7rem;
}
.sector__link,.proto .sector__link{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;
  font-size:.78rem;letter-spacing:.06em;color:var(--text-dim);
  border-bottom:1px solid transparent;width:max-content;transition:color .25s,border-color .25s;
}
.sector__link .sigil{width:.85em;height:.85em}
.sector__link:hover{color:#fff;border-bottom-color:currentColor}

/* ==================== COMMUNITY LINK CARDS ==================== */
.links-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.2rem}
.linkcard{
  padding:1.6rem;border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(18,22,48,.68),rgba(8,10,24,.68));backdrop-filter:blur(8px);
  transition:transform .35s var(--ease),border-color .35s;
}
.linkcard:hover{transform:translateY(-5px);border-color:var(--line-strong)}
.linkcard h3{font-size:.95rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:1.1rem;color:var(--cyan)}
.linkcard li+li{margin-top:.5rem}
.linkcard a{
  display:grid;gap:.1rem;padding:.6rem .8rem;border-radius:10px;
  border:1px solid transparent;font-size:.92rem;transition:background .25s,border-color .25s,transform .25s var(--ease);
}
.linkcard a span{font-size:.76rem;color:var(--text-faint)}
/* mark these as leaving the site */
.linkcard a::after{content:"↗";position:absolute;right:.8rem;top:.6rem;font-size:.8rem;color:var(--text-faint);opacity:.6}
.linkcard a{position:relative;padding-right:2rem}
.linkcard a:hover::after{color:var(--cyan);opacity:1}
.linkcard a:hover{background:rgba(139,92,255,.12);border-color:var(--line-strong);transform:translateX(3px)}

/* ======================= CARD SEARCH ======================= */
.section--browse{position:relative;overflow:hidden;background:linear-gradient(180deg,transparent,rgba(94,242,255,.05),transparent)}

/* aurora ribbon sweeping behind the live feed */
.aurora{
  position:absolute;left:-20%;right:-20%;top:-6%;height:60%;pointer-events:none;opacity:.5;
  background:
    radial-gradient(60% 40% at 20% 40%,rgba(79,240,183,.35),transparent 70%),
    radial-gradient(55% 45% at 55% 30%,rgba(94,242,255,.4),transparent 70%),
    radial-gradient(60% 40% at 85% 50%,rgba(255,79,216,.3),transparent 70%);
  filter:blur(60px);
  mask-image:linear-gradient(to bottom,#000,transparent 85%);
  animation:auroraSweep 24s ease-in-out infinite alternate;
}
@keyframes auroraSweep{
  50%{transform:translate3d(-4%,3%,0) scaleY(1.2);opacity:.75}
  to{transform:translate3d(5%,-2%,0) scaleY(.9)}
}

.live-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1.35rem;min-height:200px}

.rcard{
  position:relative;display:grid;gap:.65rem;cursor:pointer;
  background:none;border:0;padding:0;text-align:left;color:inherit;
  animation:cardIn .5s var(--ease) both;
}
@keyframes cardIn{from{opacity:0;transform:translateY(18px) scale(.97)}}
.rcard__frame{
  position:relative;display:block;border-radius:12px;overflow:hidden;aspect-ratio:245/342;
  background:#0a0c1c;box-shadow:0 20px 42px -22px rgba(0,0,0,.95);
  transition:box-shadow .35s var(--ease);
}
.rcard__frame img{width:100%;height:100%;object-fit:cover;display:block}
/* a scan that failed to load: hide the broken glyph, keep the card silhouette */
.rcard__frame.is-imgless{border:1px solid var(--line);background:linear-gradient(160deg,rgba(139,92,255,.18),rgba(6,8,20,.9))}
.rcard__frame.is-imgless img{visibility:hidden}
/* rainbow foil that lights up as you tilt the card */
.rcard__foil{
  position:absolute;inset:-40%;opacity:0;pointer-events:none;mix-blend-mode:color-dodge;
  background:repeating-linear-gradient(112deg,
    rgba(255,0,128,.5) 0 10px,rgba(0,255,240,.5) 10px 20px,
    rgba(255,215,0,.4) 20px 30px,transparent 30px 52px);
  background-size:220% 220%;
  transform:translateX(var(--shine,0%));
  transition:opacity .3s var(--ease),transform .18s linear;
}
.rcard:hover .rcard__foil,.rcard:focus-visible .rcard__foil{opacity:.55;animation:holoSweep 7s linear infinite}
.rcard:hover .rcard__frame{box-shadow:0 30px 56px -20px rgba(0,0,0,1),0 0 42px -6px rgba(94,242,255,.75)}
.rcard__meta{display:grid;gap:.15rem;padding-inline:.15rem}
.rcard__name{font-family:var(--font-display);font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;color:#fff}
.rcard__sub{font-size:.72rem;color:var(--text-faint);display:flex;justify-content:space-between;gap:.5rem}
.rcard__sub b{color:var(--mint);font-weight:700}

/* loading skeletons */
.rskel{border-radius:12px;aspect-ratio:245/342;border:1px solid var(--line);background:
  linear-gradient(100deg,rgba(140,160,255,.05) 30%,rgba(140,160,255,.14) 50%,rgba(140,160,255,.05) 70%);
  background-size:240% 100%;animation:skel 1.5s ease-in-out infinite}
@keyframes skel{to{background-position:-140% 0}}

.live__error{
  grid-column:1/-1;padding:2rem 1.6rem;border-radius:var(--r);text-align:center;
  border:1px solid var(--line-strong);background:rgba(10,12,28,.7);
}
.live__error p{color:var(--text-dim);margin-bottom:1.2rem}
.live__note{margin-top:2rem;color:var(--text-faint);font-size:.82rem;max-width:78ch}
.live__note a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}

/* real-card modal variant */
.modal__card .rcard__frame{aspect-ratio:245/342}
.modal__link{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.4rem;
  font-family:var(--font-display);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);
}
.modal__link:hover{text-decoration:underline;text-underline-offset:4px}

/* ==================== PARALLAX PLANET ==================== */
.planet{
  position:absolute;right:-9%;top:4%;width:min(430px,42vw);pointer-events:none;z-index:0;
  opacity:.5;filter:drop-shadow(0 0 60px rgba(139,92,255,.45));
  will-change:transform;
}
.planet svg{width:100%;height:auto;animation:planetSpin 60s linear infinite}
@keyframes planetSpin{to{transform:rotate(360deg)}}
#games .wrap{position:relative;z-index:1}

/* ========================= PROTOCOL ========================= */
.protocol{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1.2rem}
.proto{
  position:relative;padding:2.2rem 1.6rem 1.7rem;border-radius:var(--r);
  border:1px solid var(--line);background:rgba(10,12,28,.6);backdrop-filter:blur(8px);
  transition:transform .35s var(--ease),border-color .35s,background .35s;
}
.proto:hover{transform:translateY(-6px);border-color:var(--line-strong);background:rgba(16,20,44,.75)}
.proto__num{
  position:absolute;top:-.65rem;left:1.5rem;font-family:var(--font-display);font-weight:900;font-size:2.6rem;
  background:var(--grad-main);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.35;line-height:1;
}
.proto h3{font-size:1.1rem;text-transform:uppercase;letter-spacing:.06em;margin:1.4rem 0 .7rem}
.proto p{color:var(--text-dim);font-size:.94rem}

/* ========================= FOOTER ========================= */
.footer{border-top:1px solid var(--line);background:rgba(4,5,13,.75);backdrop-filter:blur(10px);padding-top:3.2rem}
.footer__inner{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,2fr);gap:2.5rem}
.footer__brand p{color:var(--text-faint);font-size:.9rem;margin-top:.9rem;max-width:40ch}
.footer__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1.6rem}
.footer__cols h3{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);margin-bottom:.9rem}
.footer__cols a{display:block;color:var(--text-dim);font-size:.88rem;padding:.22rem 0;transition:color .2s,transform .2s var(--ease)}
.footer__cols a:hover{color:#fff;transform:translateX(3px)}
.footer__base{
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;
  margin-top:2.8rem;padding:1.3rem 0;border-top:1px solid var(--line);
  font-size:.76rem;color:var(--text-faint);
}

/* ========================= MODAL ========================= */
.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:1.2rem}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute;inset:0;background:rgba(2,3,10,.82);backdrop-filter:blur(10px);animation:fade .3s ease}
@keyframes fade{from{opacity:0}}
.modal__panel{
  position:relative;display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:2rem;align-items:center;
  width:min(760px,100%);max-height:90vh;overflow:auto;
  padding:2rem;border-radius:24px;border:1px solid var(--line-strong);
  background:linear-gradient(180deg,rgba(18,22,50,.96),rgba(6,8,20,.98));
  box-shadow:0 40px 90px -30px #000;
  animation:popIn .38s var(--ease);
}
@keyframes popIn{from{opacity:0;transform:translateY(22px) scale(.96)}}
.modal__close{
  position:absolute;top:.9rem;right:.9rem;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line-strong);background:rgba(255,255,255,.05);cursor:pointer;transition:all .25s;
}
.modal__close:hover{background:var(--magenta);border-color:transparent;color:#fff}
.modal__set{font-family:var(--font-display);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--cyan);margin-bottom:.6rem}
.modal__info h3{font-size:clamp(1.4rem,3vw,2rem);font-weight:900;margin-bottom:.8rem}
.modal__desc{color:var(--text-dim);font-size:.95rem}
.modal__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid var(--line)}
.modal__stats dt{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint)}
.modal__stats dd{font-family:var(--font-display);font-weight:700;font-size:.95rem;margin-top:.15rem}
body.modal-open{overflow:hidden}

/* ========================= RESPONSIVE ========================= */
@media (max-width:980px){
  .hero__inner{grid-template-columns:1fr;gap:1.5rem}
  .hero__stage{order:-1;height:clamp(270px,54vw,360px)}
  .footer__inner{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nav__toggle{display:grid}
  .nav__links{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:.2rem;
    padding:1rem 1.25rem 1.6rem;background:rgba(6,8,20,.97);backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
    clip-path:inset(0 0 100% 0);opacity:0;pointer-events:none;transition:clip-path .4s var(--ease),opacity .3s;
  }
  .nav__links.is-open{clip-path:inset(0 0 0 0);opacity:1;pointer-events:auto}
  .nav__links a{padding:.75rem 0;border-bottom:1px solid var(--line)}
  .nav__cta{justify-content:center;margin-top:1rem;border-bottom:0!important}
  .hero__stats{grid-template-columns:repeat(2,1fr);gap:1.2rem}
  .event{grid-template-columns:1fr;gap:.9rem}
  .event__date{justify-self:start;grid-auto-flow:column;gap:.5rem;align-items:baseline}
  .modal__panel{grid-template-columns:1fr;padding:1.5rem}
  .modal__card{max-width:200px;margin-inline:auto}
  .grid-floor{display:none}
  .planet{width:60vw;right:-22%;top:1%;opacity:.35}
  .orbit-ring{width:min(340px,84%)}
  .orbit-ring--2{width:min(420px,96%)}
  .card3d--left{transform:translate3d(-62%,12%,-60px) rotate(-14deg)}
  .card3d--right{transform:translate3d(62%,-8%,-60px) rotate(13deg)}
}
@media (max-width:420px){
  .vault-grid,.live-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .hero__title .line{opacity:1;transform:none}
}