/* ========================================================
   $TROPHY — Comic + Trophy Theme
   Palette: gold, dark green, stadium black
======================================================== */
:root{
  --gold:        #FFD93B;
  --gold-2:      #F5B716;
  --gold-deep:   #C8941A;
  --gold-glow:   rgba(255,217,59,.55);
  --green:       #0B3D2E;
  --green-2:     #0a2a1f;
  --green-bright:#16C172;
  --bg:          #04100a;
  --bg-2:        #061a11;
  --ink:         #050805;
  --cream:       #FFF6DA;
  --white:       #EFFFF0;
  --shadow-pop:  8px 8px 0 var(--ink);
  --shadow-pop-sm: 5px 5px 0 var(--ink);
  --font-comic:  'Bangers', cursive;
  --font-pop:    'Luckiest Guy', cursive;
  --font-bungee: 'Bungee', cursive;
  --font-russo:  'Russo One', sans-serif;
  --font-body:   'Montserrat', sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--cream);
  overflow-x:hidden;
  position:relative;
  line-height:1.6;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
section{position:relative;z-index:2}

/* ========================================================
   ANIMATED BACKGROUND
======================================================== */
.bg-stage{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg-pitch{
  position:absolute;inset:-20%;
  background:
    radial-gradient(circle at 50% 0%, #0c3a28 0%, transparent 55%),
    radial-gradient(circle at 20% 80%, #08291c 0%, transparent 50%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 50%, var(--bg) 100%);
}
.bg-pitch::after{
  /* football pitch stripes */
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,
    rgba(22,193,114,.04) 0 60px,
    rgba(22,193,114,.0) 60px 120px);
  animation:pitchPan 24s linear infinite;
}
@keyframes pitchPan{to{background-position:600px 0}}

.bg-glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.4;mix-blend-mode:screen}
.bg-glow--1{width:50vw;height:50vw;background:var(--gold);top:-10%;right:-10%;animation:floaty 14s ease-in-out infinite}
.bg-glow--2{width:45vw;height:45vw;background:var(--green-bright);bottom:-15%;left:-10%;animation:floaty 18s ease-in-out infinite reverse}
@keyframes floaty{50%{transform:translate(40px,-30px) scale(1.1)}}

/* sweeping stadium light beams */
.stadium-lights{position:absolute;inset:0;overflow:hidden}
.beam{position:absolute;top:-30%;left:50%;width:14vw;height:160vh;
  background:linear-gradient(180deg, var(--gold-glow), transparent 70%);
  transform-origin:top center;filter:blur(8px);opacity:.18;mix-blend-mode:screen}
.beam--1{transform:rotate(18deg) translateX(-40vw);animation:sweep 9s ease-in-out infinite}
.beam--2{transform:rotate(-12deg) translateX(-10vw);animation:sweep 11s ease-in-out infinite .6s}
.beam--3{transform:rotate(12deg) translateX(15vw);animation:sweep 10s ease-in-out infinite 1.1s}
.beam--4{transform:rotate(-18deg) translateX(42vw);animation:sweep 12s ease-in-out infinite .3s}
@keyframes sweep{50%{opacity:.32;filter:blur(4px)}}

.halftone{
  position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(255,217,59,.10) 1.4px, transparent 1.5px);
  background-size:22px 22px;
  mask-image:radial-gradient(circle at 50% 40%, #000 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(circle at 50% 40%, #000 0%, transparent 75%);
}
#fx-canvas{position:absolute;inset:0;width:100%;height:100%}

/* floating footballs */
.floaters{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.floaters span{position:absolute;bottom:-60px;font-size:28px;opacity:.0;animation:rise linear infinite;filter:drop-shadow(0 0 6px rgba(0,0,0,.5))}
@keyframes rise{
  0%{transform:translateY(0) rotate(0);opacity:0}
  10%{opacity:.85}
  90%{opacity:.85}
  100%{transform:translateY(-115vh) rotate(540deg);opacity:0}
}

/* ========================================================
   BUTTONS
======================================================== */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-pop);letter-spacing:.5px;
  padding:.85rem 1.6rem;border-radius:14px;cursor:pointer;border:3px solid var(--ink);
  transition:transform .12s ease, box-shadow .12s ease, filter .2s;
  text-transform:uppercase;font-size:1rem;white-space:nowrap;
}
.btn--gold{background:linear-gradient(180deg,var(--gold),var(--gold-2));color:var(--ink);box-shadow:var(--shadow-pop-sm)}
.btn--ghost{background:transparent;color:var(--cream);border-color:var(--gold);box-shadow:var(--shadow-pop-sm)}
.btn--lg{padding:1.05rem 2rem;font-size:1.2rem;border-radius:18px;box-shadow:var(--shadow-pop)}
.btn:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--ink);filter:brightness(1.05)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.pulse{animation:pulseGlow 2s ease-in-out infinite}
@keyframes pulseGlow{50%{box-shadow:0 0 0 var(--ink),0 0 28px 6px var(--gold-glow), var(--shadow-pop)}}

.chip{
  display:inline-block;font-family:var(--font-russo);font-size:.78rem;letter-spacing:.5px;
  background:rgba(11,61,46,.6);border:2px solid var(--gold-deep);color:var(--gold);
  padding:.4rem .8rem;border-radius:999px;backdrop-filter:blur(6px);
}

/* ========================================================
   NAVBAR
======================================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;gap:1.5rem;
  padding:.7rem 5vw;
  background:rgba(4,16,10,.55);backdrop-filter:blur(12px);
  border-bottom:2px solid rgba(255,217,59,.18);
  transition:padding .25s, background .25s;
}
.nav.shrink{padding:.4rem 5vw;background:rgba(4,16,10,.85)}
.nav__brand{display:flex;align-items:center;gap:.6rem}
.nav__logo{width:46px;height:46px;filter:drop-shadow(0 0 8px var(--gold-glow));animation:spinSlow 12s linear infinite}
@keyframes spinSlow{to{transform:rotateY(360deg)}}
.nav__name{font-family:var(--font-bungee);font-size:1.35rem;color:var(--gold);letter-spacing:1px}
.nav__links{display:flex;gap:1.6rem;margin-left:auto}
.nav__links a{font-family:var(--font-russo);font-size:.95rem;letter-spacing:.5px;position:relative;transition:color .2s}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:3px;background:var(--gold);transition:width .25s;border-radius:2px}
.nav__links a:hover{color:var(--gold)}
.nav__links a:hover::after{width:100%}
.nav__cta{font-size:.85rem;padding:.6rem 1.1rem}
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer}
.nav__burger span{width:26px;height:3px;background:var(--gold);border-radius:2px;transition:.3s}

/* ========================================================
   TICKER
======================================================== */
.ticker{
  position:relative;z-index:5;margin-top:70px;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
  overflow:hidden;padding:.45rem 0;
}
.ticker__track{display:flex;gap:2rem;white-space:nowrap;width:max-content;animation:scrollX 28s linear infinite}
.ticker__track span{font-family:var(--font-bungee);font-size:1rem;color:var(--ink);letter-spacing:1px}
@keyframes scrollX{to{transform:translateX(-50%)}}

/* ========================================================
   HERO
======================================================== */
.hero{min-height:92vh;display:flex;align-items:center;padding:3rem 5vw 4rem;perspective:1200px}
.hero__inner{display:grid;grid-template-columns:1.05fr 1fr;gap:3rem;align-items:center;max-width:1300px;margin:0 auto;width:100%}
.kicker{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-russo);font-size:.85rem;letter-spacing:2px;color:var(--green-bright);margin-bottom:1rem}
.kicker__dot{width:10px;height:10px;border-radius:50%;background:var(--green-bright);box-shadow:0 0 12px var(--green-bright);animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.3}}

.hero__title{font-family:var(--font-comic);line-height:.92;margin-bottom:1.3rem;display:flex;flex-direction:column}
.word{
  display:block;font-size:clamp(3.2rem,8vw,7rem);letter-spacing:2px;
  color:var(--cream);
  text-shadow:
    3px 3px 0 var(--ink), -1px -1px 0 var(--ink),
    1px -1px 0 var(--ink), -1px 1px 0 var(--ink);
  transform:rotate(-2deg);
}
.word--gold{color:var(--green-bright)}
.word--big{
  font-size:clamp(4.2rem,12vw,10rem);
  background:linear-gradient(180deg,var(--gold) 30%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(3px 4px 0 var(--ink)) drop-shadow(0 0 22px var(--gold-glow));
  transform:rotate(-1deg);
}
.hero__sub{font-size:1.1rem;max-width:46ch;color:#e8f5ec;margin-bottom:1.8rem}
.hero__sub strong{color:var(--gold)}
.hero__actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem}
.hero__badges{display:flex;gap:.6rem;flex-wrap:wrap}

.hero__art{position:relative;display:flex;justify-content:center;align-items:center}
.tilt{transform-style:preserve-3d;will-change:transform;transition:transform .15s ease-out}
.hero__halo{
  position:absolute;width:115%;height:115%;border-radius:50%;
  background:radial-gradient(circle,var(--gold-glow) 0%,transparent 65%);
  filter:blur(20px);animation:halo 5s ease-in-out infinite;z-index:-1;
}
@keyframes halo{50%{transform:scale(1.12);opacity:.7}}
.hero__img{
  width:100%;max-width:560px;border-radius:26px;border:4px solid var(--ink);
  box-shadow:14px 14px 0 var(--ink), 0 0 60px rgba(255,217,59,.18);
  transform:translateZ(40px);
}
.float3d{animation:float3d 6s ease-in-out infinite}
@keyframes float3d{50%{transform:translateZ(40px) translateY(-16px) rotateZ(-1deg)}}

.orbit-ring{
  position:absolute;width:118%;height:118%;border-radius:50%;
  border:2px dashed rgba(255,217,59,.35);animation:spinSlow 18s linear infinite;
  transform:translateZ(-30px) rotateX(8deg);
}
.burst{
  position:absolute;font-family:var(--font-comic);color:var(--ink);
  background:var(--gold);padding:.5rem 1.1rem;border-radius:50% 50% 50% 0;
  border:3px solid var(--ink);box-shadow:var(--shadow-pop-sm);font-size:1.6rem;letter-spacing:1px;
  transform:translateZ(70px);
}
.burst--goal{top:4%;left:-6%;rotate:-12deg;animation:wobble 3s ease-in-out infinite}
.burst--pow{bottom:8%;right:-4%;rotate:10deg;background:var(--green-bright);color:var(--cream);animation:wobble 3.4s ease-in-out infinite .4s}
@keyframes wobble{50%{transform:translateZ(70px) scale(1.12) rotate(3deg)}}

.scroll-cue{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);width:26px;height:42px;border:3px solid var(--gold);border-radius:14px}
.scroll-cue span{position:absolute;top:8px;left:50%;width:5px;height:9px;background:var(--gold);border-radius:3px;transform:translateX(-50%);animation:wheel 1.5s infinite}
@keyframes wheel{to{top:24px;opacity:0}}

/* ========================================================
   STATS BAND
======================================================== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;max-width:1150px;margin:1rem auto 3rem;padding:0 5vw}
.stat-card{
  background:linear-gradient(180deg,rgba(11,61,46,.7),rgba(6,26,17,.7));
  border:3px solid var(--gold-deep);border-radius:18px;padding:1.4rem 1rem;text-align:center;
  box-shadow:var(--shadow-pop-sm);backdrop-filter:blur(6px);
}
.stat__num{font-family:var(--font-bungee);font-size:1.9rem;color:var(--gold);line-height:1;text-shadow:2px 2px 0 var(--ink)}
.stat__label{font-family:var(--font-russo);font-size:.78rem;letter-spacing:1px;color:#cfe9d8;margin-top:.5rem;text-transform:uppercase}

/* ========================================================
   SECTIONS (shared)
======================================================== */
.section{padding:5rem 5vw;max-width:1300px;margin:0 auto}
.section__head{text-align:center;margin-bottom:3rem}
.eyebrow{font-family:var(--font-russo);letter-spacing:3px;color:var(--green-bright);font-size:.85rem}
.section__title{
  font-family:var(--font-comic);font-size:clamp(2.6rem,6vw,5rem);letter-spacing:2px;
  color:var(--gold);margin-top:.5rem;transform:rotate(-1.5deg);
}
.comic-stroke{
  text-shadow:
    4px 4px 0 var(--ink), -2px -2px 0 var(--ink),
    2px -2px 0 var(--ink), -2px 2px 0 var(--ink),
    0 0 26px var(--gold-glow);
}

/* ========================================================
   ABOUT
======================================================== */
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
.panel{
  background:linear-gradient(180deg,rgba(11,61,46,.65),rgba(4,16,10,.8));
  border:4px solid var(--ink);border-radius:22px;padding:2.2rem;
  box-shadow:var(--shadow-pop);position:relative;overflow:hidden;
}
.panel::before{content:"🏆";position:absolute;right:-10px;bottom:-20px;font-size:9rem;opacity:.08;transform:rotate(-12deg)}
.panel h3{font-family:var(--font-bungee);color:var(--gold);font-size:1.7rem;margin-bottom:1rem;letter-spacing:1px}
.panel p{margin-bottom:1rem;color:#e8f5ec}
.panel strong{color:var(--gold)}
.about__cta{margin-top:1.4rem}

.about__cards{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.feat{
  background:rgba(6,26,17,.7);border:3px solid var(--gold-deep);border-radius:18px;padding:1.5rem;
  box-shadow:var(--shadow-pop-sm);transition:border-color .2s;backdrop-filter:blur(5px);
}
.feat:hover{border-color:var(--gold)}
.feat__icon{font-size:2.4rem;margin-bottom:.6rem;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.feat h4{font-family:var(--font-russo);color:var(--gold);letter-spacing:.5px;margin-bottom:.4rem;font-size:1.05rem}
.feat p{font-size:.92rem;color:#cfe9d8}

/* ========================================================
   HOW TO BUY
======================================================== */
.howto__field{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-bottom:2.5rem;
}
.step{
  position:relative;background:linear-gradient(180deg,rgba(11,61,46,.7),rgba(6,26,17,.85));
  border:4px solid var(--ink);border-radius:20px;padding:2.4rem 1.4rem 1.6rem;
  box-shadow:var(--shadow-pop-sm);
}
.step__no{
  position:absolute;top:-22px;left:18px;font-family:var(--font-comic);font-size:2.4rem;
  color:var(--ink);background:var(--gold);width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;border:4px solid var(--ink);box-shadow:var(--shadow-pop-sm);
}
.step h4{font-family:var(--font-russo);color:var(--gold);margin:.4rem 0;letter-spacing:.5px}
.step p{font-size:.92rem;color:#cfe9d8}
.step strong{color:var(--gold)}

.ca{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:center;
  background:rgba(6,26,17,.8);border:3px dashed var(--gold);border-radius:16px;
  padding:1rem 1.4rem;max-width:760px;margin:0 auto 2rem;
}
.ca__label{font-family:var(--font-russo);color:var(--green-bright);letter-spacing:1px;font-size:.8rem}
.ca code{font-family:var(--font-russo);color:var(--gold);font-size:.95rem;word-break:break-all;flex:1;min-width:200px;text-align:center}
.ca__copy{padding:.5rem 1rem;font-size:.85rem}
.howto__cta{text-align:center}

/* ========================================================
   CHART
======================================================== */
.chart__frame{
  position:relative;border:4px solid var(--ink);border-radius:22px;overflow:hidden;
  box-shadow:var(--shadow-pop);background:#0a0a0a;max-width:1100px;margin:0 auto;
}
.chart__scoreboard{
  display:flex;align-items:center;gap:.6rem;font-family:var(--font-russo);letter-spacing:1px;
  font-size:.82rem;color:var(--gold);background:var(--green);padding:.6rem 1rem;border-bottom:3px solid var(--ink);
}
.chart__dot{width:10px;height:10px;border-radius:50%;background:#ff4444;box-shadow:0 0 10px #ff4444;animation:blink 1.2s infinite}
#dex-embed{width:100%;height:560px;border:0;display:block;background:#0a0a0a}
.chart__fallback{display:block;text-align:center;font-family:var(--font-russo);font-size:.82rem;letter-spacing:1px;color:var(--gold);background:var(--green);padding:.6rem;border-top:3px solid var(--ink)}
.chart__fallback:hover{color:var(--cream);text-decoration:underline}
.chart__note{text-align:center;margin-top:1.2rem;color:#cfe9d8;font-family:var(--font-russo);letter-spacing:.5px}

/* ========================================================
   JOIN US
======================================================== */
.joinus{perspective:1200px}
.joinus__banner{
  position:relative;max-width:1000px;margin:0 auto 2rem;border-radius:22px;overflow:hidden;
  border:5px solid var(--ink);box-shadow:14px 14px 0 var(--ink),0 0 60px rgba(255,217,59,.2);
  transform-style:preserve-3d;
}
.joinus__img{width:100%;display:block}
.joinus__shine{
  position:absolute;top:0;left:-60%;width:50%;height:100%;
  background:linear-gradient(110deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);animation:shine 4.5s ease-in-out infinite;
}
@keyframes shine{0%{left:-60%}55%,100%{left:130%}}
.joinus__copy{text-align:center;font-family:var(--font-russo);font-size:1.2rem;color:var(--gold);max-width:40ch;margin:0 auto 2.2rem;letter-spacing:.5px}

.joinus__links{display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap}
.social{
  display:flex;align-items:center;gap:.9rem;min-width:220px;
  background:linear-gradient(180deg,rgba(11,61,46,.75),rgba(6,26,17,.9));
  border:4px solid var(--ink);border-radius:18px;padding:1rem 1.3rem;
  box-shadow:var(--shadow-pop-sm);transition:transform .15s,box-shadow .15s;
}
.social:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.social--buy{background:linear-gradient(180deg,var(--gold),var(--gold-2));color:var(--ink)}
.social--buy small{color:#4a3a08 !important}
.social__icon{font-size:1.9rem;width:48px;height:48px;display:grid;place-items:center;background:rgba(0,0,0,.25);border-radius:12px}
.social--buy .social__icon{background:rgba(0,0,0,.12)}
.social__txt{display:flex;flex-direction:column;line-height:1.2}
.social__txt strong{font-family:var(--font-russo);font-size:1.05rem;color:var(--gold)}
.social--buy .social__txt strong{color:var(--ink)}
.social__txt small{font-size:.78rem;color:#cfe9d8}

/* ========================================================
   FOOTER
======================================================== */
.footer{position:relative;z-index:2;text-align:center;padding:3.5rem 5vw;border-top:3px solid rgba(255,217,59,.18);background:rgba(4,16,10,.6)}
.footer__logo{width:70px;margin:0 auto .6rem;filter:drop-shadow(0 0 12px var(--gold-glow))}
.footer__name{font-family:var(--font-bungee);font-size:1.8rem;color:var(--gold);letter-spacing:1px}
.footer__tag{font-family:var(--font-russo);color:var(--green-bright);letter-spacing:2px;margin:.4rem 0 1.2rem;font-size:.9rem}
.footer__social{display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.4rem}
.footer__social a{font-family:var(--font-russo);color:var(--gold);transition:color .2s}
.footer__social a:hover{color:var(--cream)}
.footer__disclaimer{font-size:.78rem;color:#8fb3a0;max-width:60ch;margin:0 auto 1rem}
.footer__copy{font-size:.8rem;color:#6f9483}

/* ========================================================
   REVEAL ANIMATION
======================================================== */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ========================================================
   RESPONSIVE
======================================================== */
@media (max-width:900px){
  .nav__links,.nav__cta{display:none}
  .nav__links.open{display:flex;flex-direction:column;position:absolute;top:100%;right:0;left:0;background:rgba(4,16,10,.97);padding:1.4rem 5vw;gap:1.2rem;border-bottom:2px solid var(--gold)}
  .nav__burger{display:flex;margin-left:auto}
  .hero__inner{grid-template-columns:1fr;text-align:center}
  .hero__copy{order:2}
  .hero__art{order:1}
  .hero__actions,.hero__badges,.kicker{justify-content:center}
  .about__grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .howto__field{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .about__cards{grid-template-columns:1fr}
  .howto__field{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .word{transform:none}
  #dex-embed{height:440px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important}
  .float3d,.shine,.beam,.bg-glow{animation:none !important}
}