/* ═══════════════════════════════════════════════════════════════
   星耀云社 · FEAIA IDOL — style.css
   Design System: Minimalist Game Art · Aurora CN · S01
═══════════════════════════════════════════════════════════════ */

/* ─── TOKENS ─────────────────────────────────────────────── */
:root {
  /* Core palette */
  --bg:           #060810;
  --bg-1:         #0a0d18;
  --bg-2:         #0f1220;
  --bg-glass:     rgba(255,255,255,0.04);
  --bg-glass-hov: rgba(255,255,255,0.08);
  --border:       rgba(255,255,255,0.08);
  --border-hov:   rgba(255,255,255,0.18);

  /* Brand */
  --purple:       #7B6CF6;
  --purple-dim:   #5046b0;
  --cyan:         #4DD9C0;
  --cyan-dim:     #2a9b8c;
  --gold:         #F5C842;
  --gold-dim:     #c89e20;
  --vermilion:    #E63946;
  --vermilion-dim:#a0222c;

  /* Text */
  --text:         #e8eaf2;
  --text-dim:     #8890a8;
  --text-faint:   #454c62;

  /* Glow */
  --glow-purple:  rgba(123,108,246,0.35);
  --glow-cyan:    rgba(77,217,192,0.35);
  --glow-gold:    rgba(245,200,66,0.45);

  /* Spacing */
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  32px;

  /* Transitions */
  --ease:  cubic-bezier(0.16,1,0.3,1);
  --ease-out: cubic-bezier(0.0,0,0.2,1);

  /* Z-index layers */
  --z-bg:     0;
  --z-base:   10;
  --z-card:   20;
  --z-nav:    100;
  --z-modal:  200;
  --z-cursor: 999;
}

/* ─── RESET ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Space Grotesk',system-ui,sans-serif;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
img{max-width:100%;display:block}
ul{list-style:none}

/* ─── CURSOR GLOW ────────────────────────────────────────── */
.cursor-glow{
  position:fixed;
  width:400px;height:400px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(123,108,246,0.12) 0%, transparent 70%);
  pointer-events:none;
  transform:translate(-50%,-50%);
  z-index:var(--z-cursor);
  transition:opacity 0.3s;
}

/* ─── STAR CANVAS ────────────────────────────────────────── */
.star-canvas{
  position:fixed;
  inset:0;
  z-index:var(--z-bg);
  pointer-events:none;
}

/* ─── TYPOGRAPHY ─────────────────────────────────────────── */
.serif    { font-family:'Noto Serif SC',serif }
.mono     { font-family:'JetBrains Mono',monospace }

.text-gradient-purple{
  background:linear-gradient(135deg,var(--purple),var(--cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.text-gradient-gold{
  background:linear-gradient(135deg,var(--gold),#ffb347);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ─── LAYOUT ─────────────────────────────────────────────── */
.container{
  width:100%;max-width:1280px;
  margin:0 auto;
  padding:0 24px;
}
section{position:relative;z-index:var(--z-base)}

/* ─── BUTTONS ────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 28px;
  border-radius:var(--r-md);
  font-size:0.9rem;font-weight:600;
  letter-spacing:0.03em;
  transition:all 0.3s var(--ease);
  position:relative;overflow:hidden;
}
.btn::after{
  content:'';position:absolute;inset:0;
  background:rgba(255,255,255,0);
  transition:background 0.2s;
}
.btn:hover::after{background:rgba(255,255,255,0.06)}

.btn-primary{
  background:linear-gradient(135deg,var(--purple),var(--cyan));
  color:#fff;
  box-shadow:0 0 24px var(--glow-purple);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 0 40px var(--glow-purple),0 8px 24px rgba(0,0,0,0.4);
}

.btn-secondary{
  background:var(--bg-glass);
  color:var(--text);
  border:1px solid var(--border);
  backdrop-filter:blur(8px);
}
.btn-secondary:hover{
  border-color:var(--border-hov);
  background:var(--bg-glass-hov);
  transform:translateY(-2px);
}

.btn-gold{
  background:linear-gradient(135deg,var(--gold),#ffb347);
  color:#0a0d18;
  font-weight:700;
  box-shadow:0 0 24px var(--glow-gold);
}
.btn-gold:hover{
  transform:translateY(-2px);
  box-shadow:0 0 48px var(--glow-gold),0 8px 24px rgba(0,0,0,0.4);
}

.btn-sm{ padding:8px 18px;font-size:0.82rem }
.btn-lg{ padding:16px 40px;font-size:1rem }

/* ─── NAV ────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;
  z-index:var(--z-nav);
  padding:16px 0;
  transition:all 0.4s var(--ease);
}
.nav.scrolled{
  background:rgba(6,8,16,0.85);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:10px 0;
}
.nav-inner{
  display:flex;align-items:center;gap:32px;
  max-width:1280px;margin:0 auto;padding:0 24px;
}
.nav-brand{
  display:flex;align-items:center;gap:10px;
  flex-shrink:0;
}
.nav-brand-mark{
  font-size:1.4rem;
  color:var(--gold);
  filter:drop-shadow(0 0 8px var(--glow-gold));
  animation:spin-slow 12s linear infinite;
}
@keyframes spin-slow{ to{transform:rotate(360deg)} }

.nav-brand-text{
  font-family:'Noto Serif SC',serif;
  font-size:1.1rem;font-weight:700;
  color:var(--text);
}
.nav-brand-sub{
  font-size:0.65rem;font-weight:500;
  color:var(--text-dim);letter-spacing:0.1em;
  font-family:'Space Grotesk',sans-serif;
}
.nav-links{
  display:flex;gap:4px;margin-left:auto;
}
.nav-links a{
  padding:6px 16px;
  border-radius:var(--r-sm);
  font-size:0.88rem;font-weight:500;
  color:var(--text-dim);
  transition:all 0.25s var(--ease);
}
.nav-links a:hover{
  color:var(--text);
  background:var(--bg-glass);
}
.nav-actions{
  display:flex;align-items:center;gap:12px;
}

/* Spark badge */
.spark-badge{
  display:flex;align-items:center;gap:6px;
  padding:6px 14px;
  border-radius:var(--r-sm);
  background:rgba(245,200,66,0.08);
  border:1px solid rgba(245,200,66,0.2);
  cursor:pointer;
  transition:all 0.25s var(--ease);
}
.spark-badge:hover{
  background:rgba(245,200,66,0.14);
  border-color:rgba(245,200,66,0.4);
}
.spark-icon{ color:var(--gold);font-size:0.9rem }
.spark-count{ font-weight:700;font-size:0.95rem;color:var(--gold) }
.spark-label{ font-size:0.75rem;color:var(--text-dim) }

/* ─── SECTION HEADER ─────────────────────────────────────── */
.section-header{
  text-align:center;
  margin-bottom:60px;
}
.section-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:0.75rem;font-weight:600;letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:16px;
}
.section-eyebrow::before,.section-eyebrow::after{
  content:'';display:block;
  width:24px;height:1px;
  background:currentColor;opacity:0.5;
}
.section-title{
  font-family:'Noto Serif SC',serif;
  font-size:clamp(1.8rem,3.5vw,2.8rem);
  font-weight:700;
  line-height:1.2;
  margin-bottom:16px;
}
.section-sub{
  font-size:1rem;color:var(--text-dim);
  max-width:520px;margin:0 auto;
}

/* ─── HERO ────────────────────────────────────────────────── */
#hero{
  min-height:100vh;
  display:flex;align-items:center;
  position:relative;
  overflow:hidden;
  padding:120px 0 80px;
}

/* Aurora gradient bg */
.hero-aurora{
  position:absolute;inset:0;
  pointer-events:none;
  z-index:1;
}
.hero-aurora::before{
  content:'';position:absolute;
  top:-20%;left:30%;
  width:70vw;height:70vw;
  background:radial-gradient(ellipse, rgba(123,108,246,0.18) 0%, transparent 65%);
  animation:aurora-drift 20s ease-in-out infinite alternate;
}
.hero-aurora::after{
  content:'';position:absolute;
  bottom:-10%;right:20%;
  width:50vw;height:50vw;
  background:radial-gradient(ellipse, rgba(77,217,192,0.12) 0%, transparent 65%);
  animation:aurora-drift 28s ease-in-out infinite alternate-reverse;
}
@keyframes aurora-drift{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(-5%,5%) scale(1.08)}
}

.hero-inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1fr;
  gap:60px;align-items:center;
  max-width:1280px;margin:0 auto;padding:0 24px;
  width:100%;
}
.hero-content{ max-width:580px }

.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:0.78rem;font-weight:600;letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:24px;
  opacity:0;
  animation:fade-up 0.8s var(--ease) 0.1s forwards;
}
.eyebrow-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--cyan);
  animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:0.4;transform:scale(0.6)}
}

.hero-title{
  font-family:'Noto Serif SC',serif;
  font-size:clamp(2.6rem,5.5vw,4.4rem);
  font-weight:700;
  line-height:1.12;
  margin-bottom:28px;
  letter-spacing:-0.01em;
}
.hero-title-line{
  display:block;
  opacity:0;
  transform:translateY(24px);
  animation:fade-up 0.9s var(--ease) forwards;
}
.hero-title-line:nth-child(1){ animation-delay:0.2s }
.hero-title-line:nth-child(2){ animation-delay:0.34s }
.hero-title-line:nth-child(3){ animation-delay:0.48s }

.accent-gold{
  background:linear-gradient(135deg,var(--gold) 0%,#ffd97d 50%,#ffb347 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 20px rgba(245,200,66,0.3));
}
.accent-purple{
  background:linear-gradient(135deg,var(--purple),var(--cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

.hero-sub{
  font-size:1.05rem;color:var(--text-dim);
  margin-bottom:36px;line-height:1.7;
  opacity:0;
  animation:fade-up 0.9s var(--ease) 0.58s forwards;
}

.hero-ctas{
  display:flex;gap:14px;flex-wrap:wrap;
  margin-bottom:48px;
  opacity:0;
  animation:fade-up 0.9s var(--ease) 0.7s forwards;
}

/* Countdown */
.countdown-strip{
  opacity:0;
  animation:fade-up 0.9s var(--ease) 0.82s forwards;
}
.countdown-label{
  font-size:0.75rem;letter-spacing:0.12em;
  color:var(--text-dim);margin-bottom:12px;
}
.countdown{
  display:flex;gap:12px;align-items:center;
}
.cd-block{
  display:flex;flex-direction:column;align-items:center;
  gap:4px;
}
.cd-num{
  font-family:'JetBrains Mono',monospace;
  font-size:2rem;font-weight:500;
  color:var(--text);
  background:var(--bg-glass);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  padding:8px 16px;
  min-width:60px;text-align:center;
  position:relative;overflow:hidden;
}
.cd-num::after{
  content:'';position:absolute;
  left:0;right:0;top:50%;height:1px;
  background:var(--border);
}
.cd-unit{
  font-size:0.68rem;letter-spacing:0.1em;
  color:var(--text-faint);text-transform:uppercase;
}
.cd-sep{
  font-size:1.5rem;color:var(--text-faint);
  margin-bottom:16px;
}

/* Stats pills */
.hero-stats{
  display:flex;gap:12px;flex-wrap:wrap;
  opacity:0;
  animation:fade-up 0.9s var(--ease) 0.94s forwards;
  margin-top:32px;
}
.stat-pill{
  display:flex;align-items:center;gap:8px;
  padding:8px 16px;
  background:var(--bg-glass);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  backdrop-filter:blur(8px);
  font-size:0.82rem;
}
.stat-num{
  font-family:'JetBrains Mono',monospace;
  font-weight:600;color:var(--cyan);
}
.stat-label{ color:var(--text-dim) }

/* Hero 3D pane */
.hero-3d-pane{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  opacity:0;
  animation:fade-in 1.2s var(--ease) 0.4s forwards;
}
#hero3d{
  width:100%;max-width:520px;
  aspect-ratio:1/1.1;
  border-radius:var(--r-xl);
  border:1px solid var(--border);
  background:linear-gradient(135deg,rgba(123,108,246,0.06),rgba(77,217,192,0.04));
  overflow:hidden;
  position:relative;
}

/* Decorative ring */
.hero-3d-ring{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(123,108,246,0.15);
  animation:ring-pulse 4s ease-in-out infinite;
}
.hero-3d-ring:nth-child(1){
  inset:-10%;
  animation-delay:0s;
}
.hero-3d-ring:nth-child(2){
  inset:-22%;
  animation-delay:1.5s;
  border-color:rgba(77,217,192,0.08);
}
@keyframes ring-pulse{
  0%,100%{opacity:0.6;transform:scale(1)}
  50%{opacity:1;transform:scale(1.02)}
}

/* Scroll hint */
.scroll-hint{
  position:absolute;bottom:32px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  opacity:0;
  animation:fade-in 1s var(--ease) 1.8s forwards;
  z-index:3;
}
.scroll-hint-line{
  width:1px;height:40px;
  background:linear-gradient(to bottom, var(--text-faint), transparent);
  animation:scroll-line 2s ease-in-out infinite;
}
@keyframes scroll-line{
  0%,100%{transform:scaleY(1);opacity:0.5}
  50%{transform:scaleY(0.5);opacity:1}
}
.scroll-hint-text{
  font-size:0.68rem;letter-spacing:0.18em;
  color:var(--text-faint);text-transform:uppercase;
}

/* ─── LEADERBOARD ─────────────────────────────────────────── */
#leaderboard{
  padding:100px 0;
}
.leaderboard-inner{
  max-width:1280px;margin:0 auto;padding:0 24px;
}

.rank-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr 1fr;
  gap:20px;
  align-items:end;
  margin-top:48px;
}

/* Rank card base */
.rank-card{
  background:var(--bg-glass);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:28px 24px 24px;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:all 0.4s var(--ease);
  backdrop-filter:blur(12px);
}
.rank-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 60%,rgba(255,255,255,0.02));
  pointer-events:none;
}
.rank-card:hover{
  transform:translateY(-8px);
  border-color:var(--border-hov);
  box-shadow:0 24px 60px rgba(0,0,0,0.4);
}

/* Champion rank-1 */
.rank-1{
  background:linear-gradient(155deg,rgba(245,200,66,0.06) 0%,rgba(123,108,246,0.06) 100%);
  border-color:rgba(245,200,66,0.2);
  box-shadow:0 0 60px rgba(245,200,66,0.06);
  transform:translateY(-20px);
}
.rank-1:hover{
  transform:translateY(-28px);
  box-shadow:0 0 80px rgba(245,200,66,0.12),0 32px 80px rgba(0,0,0,0.5);
  border-color:rgba(245,200,66,0.4);
}

.rank-2{ background:linear-gradient(155deg,rgba(192,192,220,0.05),rgba(100,100,180,0.04)) }
.rank-3{ background:linear-gradient(155deg,rgba(200,140,80,0.05),rgba(150,90,50,0.04)) }

/* Crown / badge */
.rank-badge{
  position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  padding:4px 18px;
  border-radius:0 0 var(--r-md) var(--r-md);
  font-size:0.7rem;font-weight:700;letter-spacing:0.1em;
  text-transform:uppercase;
}
.rank-1 .rank-badge{
  background:linear-gradient(90deg,var(--gold),#ffb347);
  color:#0a0d18;
}
.rank-2 .rank-badge{ background:#3a3a5a;color:#c0c0dc }
.rank-3 .rank-badge{ background:#3a2a1a;color:#c87a40 }

/* Crown SVG */
.champion-crown{
  position:absolute;top:-36px;left:50%;transform:translateX(-50%);
  filter:drop-shadow(0 0 12px rgba(245,200,66,0.6));
  animation:crown-float 3s ease-in-out infinite;
}
@keyframes crown-float{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-5px)}
}

/* Character silhouette */
.char-silhouette{
  width:100%;
  aspect-ratio:3/4;
  background:
    radial-gradient(ellipse 60% 80% at 50% 60%, rgba(123,108,246,0.12), transparent),
    linear-gradient(170deg, rgba(123,108,246,0.06) 0%, transparent 80%);
  border-radius:var(--r-lg);
  margin-bottom:20px;
  position:relative;
  overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center;
}
.rank-1 .char-silhouette{
  aspect-ratio:3/4.2;
  background:
    radial-gradient(ellipse 70% 85% at 50% 60%, rgba(245,200,66,0.1), rgba(123,108,246,0.1), transparent),
    linear-gradient(170deg, rgba(123,108,246,0.08) 0%, transparent 80%);
}

/* Character name */
.char-name{
  font-family:'Noto Serif SC',serif;
  font-size:1.3rem;font-weight:700;
  color:var(--text);margin-bottom:4px;
}
.rank-1 .char-name{ font-size:1.5rem }

.char-designer{
  font-size:0.78rem;color:var(--text-dim);
  margin-bottom:16px;
}

/* Vote bar */
.vote-bar-wrap{
  margin-bottom:14px;
}
.vote-bar-label{
  display:flex;justify-content:space-between;
  font-size:0.75rem;color:var(--text-dim);
  margin-bottom:6px;
}
.vote-bar-track{
  height:3px;
  background:rgba(255,255,255,0.06);
  border-radius:2px;
  overflow:hidden;
}
.vote-bar{
  height:100%;
  width:var(--pct,0%);
  background:linear-gradient(90deg,var(--purple),var(--cyan));
  border-radius:2px;
  transition:width 1.4s var(--ease);
}
.rank-1 .vote-bar{
  background:linear-gradient(90deg,var(--gold),#ffb347);
  box-shadow:0 0 8px var(--glow-gold);
}

/* Vote button */
.vote-btn{
  width:100%;
  padding:10px;
  border-radius:var(--r-md);
  font-size:0.88rem;font-weight:600;
  letter-spacing:0.04em;
  background:var(--bg-glass);
  border:1px solid var(--border);
  color:var(--text);
  transition:all 0.3s var(--ease);
  position:relative;overflow:hidden;
}
.vote-btn:hover{
  background:var(--bg-glass-hov);
  border-color:var(--purple);
  color:var(--text);
  box-shadow:0 0 20px var(--glow-purple);
}
.vote-btn-champion{
  background:linear-gradient(135deg,rgba(245,200,66,0.12),rgba(123,108,246,0.12));
  border-color:rgba(245,200,66,0.3);
}
.vote-btn-champion:hover{
  background:linear-gradient(135deg,rgba(245,200,66,0.22),rgba(123,108,246,0.18));
  border-color:var(--gold);
  box-shadow:0 0 28px var(--glow-gold);
}

/* ─── SEASON GRID ─────────────────────────────────────────── */
#season{
  padding:100px 0;
}
.season-inner{
  max-width:1280px;margin:0 auto;padding:0 24px;
}

/* Filter bar */
.filter-bar{
  display:flex;align-items:center;gap:8px;
  margin-bottom:40px;
  flex-wrap:wrap;
}
.filter-btn{
  padding:7px 20px;
  border-radius:var(--r-sm);
  font-size:0.82rem;font-weight:600;letter-spacing:0.06em;
  text-transform:uppercase;
  background:var(--bg-glass);
  border:1px solid var(--border);
  color:var(--text-dim);
  transition:all 0.25s var(--ease);
}
.filter-btn:hover{
  color:var(--text);border-color:var(--border-hov);
}
.filter-btn.active{
  background:linear-gradient(135deg,var(--purple),var(--cyan));
  border-color:transparent;
  color:#fff;
  box-shadow:0 0 16px var(--glow-purple);
}

/* Cards grid */
.cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:20px;
}

/* Character card */
.char-card{
  background:var(--bg-glass);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  cursor:pointer;
  transition:all 0.4s var(--ease);
  position:relative;
}
.char-card:hover{
  transform:translateY(-6px);
  border-color:var(--border-hov);
  box-shadow:0 20px 50px rgba(0,0,0,0.4);
}
.char-card:hover .card-vote-overlay{
  opacity:1;transform:translateY(0);
}

.card-img{
  width:100%;aspect-ratio:3/4;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(123,108,246,0.15), transparent 70%),
    var(--bg-1);
  position:relative;
  overflow:hidden;
}
.card-img img{
  width:100%;height:100%;object-fit:cover;
}
.card-rarity{
  position:absolute;top:10px;left:10px;
  padding:3px 10px;
  border-radius:4px;
  font-size:0.68rem;font-weight:700;letter-spacing:0.1em;
  backdrop-filter:blur(8px);
}
.rarity-ur{
  background:rgba(245,200,66,0.2);
  color:var(--gold);border:1px solid rgba(245,200,66,0.3);
}
.rarity-ssr{
  background:rgba(123,108,246,0.2);
  color:var(--purple);border:1px solid rgba(123,108,246,0.3);
}
.rarity-sr{
  background:rgba(77,217,192,0.2);
  color:var(--cyan);border:1px solid rgba(77,217,192,0.3);
}
.rarity-new{
  background:rgba(230,57,70,0.2);
  color:var(--vermilion);border:1px solid rgba(230,57,70,0.3);
}

.card-vote-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(7,9,20,0.9) 0%, transparent 50%);
  display:flex;align-items:flex-end;justify-content:center;
  padding:20px;
  opacity:0;transform:translateY(8px);
  transition:all 0.3s var(--ease);
}

.card-body{
  padding:16px;
}
.card-char-name{
  font-family:'Noto Serif SC',serif;
  font-size:1rem;font-weight:700;
  margin-bottom:4px;
}
.card-designer{
  font-size:0.75rem;color:var(--text-dim);
  margin-bottom:12px;
}
.card-meta{
  display:flex;justify-content:space-between;align-items:center;
}
.card-votes{
  font-family:'JetBrains Mono',monospace;
  font-size:0.8rem;color:var(--cyan);
}
.card-trend{
  font-size:0.72rem;color:var(--text-faint);
}

/* ─── HOW IT WORKS ───────────────────────────────────────── */
#howitworks{
  padding:100px 0;
}
.how-inner{
  max-width:1280px;margin:0 auto;padding:0 24px;
}

.steps-track{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  position:relative;
  margin-top:48px;
}
.steps-track::before{
  content:'';
  position:absolute;
  top:36px;left:calc(16.5% + 36px);right:calc(16.5% + 36px);
  height:1px;
  background:linear-gradient(90deg,var(--purple),var(--cyan));
  opacity:0.3;
}

.step{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  padding:0 24px;
  position:relative;
}
.step-num{
  width:72px;height:72px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;
  margin-bottom:24px;
  position:relative;z-index:1;
  transition:all 0.4s var(--ease);
}
.step:hover .step-num{ transform:scale(1.1) }

.step:nth-child(1) .step-num{
  background:linear-gradient(135deg,rgba(123,108,246,0.15),rgba(123,108,246,0.05));
  border:1px solid rgba(123,108,246,0.3);
  box-shadow:0 0 24px rgba(123,108,246,0.15);
}
.step:nth-child(2) .step-num{
  background:linear-gradient(135deg,rgba(77,217,192,0.15),rgba(77,217,192,0.05));
  border:1px solid rgba(77,217,192,0.3);
  box-shadow:0 0 24px rgba(77,217,192,0.15);
}
.step:nth-child(3) .step-num{
  background:linear-gradient(135deg,rgba(245,200,66,0.15),rgba(245,200,66,0.05));
  border:1px solid rgba(245,200,66,0.3);
  box-shadow:0 0 24px rgba(245,200,66,0.15);
}

.step-title{
  font-family:'Noto Serif SC',serif;
  font-size:1.15rem;font-weight:700;
  margin-bottom:12px;
}
.step-desc{
  font-size:0.9rem;color:var(--text-dim);
  line-height:1.65;
}
.step-tag{
  display:inline-block;
  margin-top:16px;
  padding:4px 12px;
  border-radius:var(--r-sm);
  font-size:0.72rem;font-weight:600;letter-spacing:0.08em;
}
.step:nth-child(1) .step-tag{ background:rgba(123,108,246,0.12);color:var(--purple) }
.step:nth-child(2) .step-tag{ background:rgba(77,217,192,0.12);color:var(--cyan) }
.step:nth-child(3) .step-tag{ background:rgba(245,200,66,0.12);color:var(--gold) }

/* ─── VAULT ───────────────────────────────────────────────── */
#vault{
  padding:100px 0;
}
.vault-inner{
  max-width:1280px;margin:0 auto;padding:0 24px;
}

.vault-stage{
  position:relative;
  height:480px;
  border-radius:var(--r-xl);
  border:1px solid var(--border);
  overflow:hidden;
  margin-top:48px;
  background:radial-gradient(ellipse at 50% 80%, rgba(123,108,246,0.1), transparent 60%),
             var(--bg-1);
}
#vaultCanvas{
  width:100%;height:100%;
  display:block;
}

/* Past champions strip */
.vault-past-label{
  font-size:0.75rem;letter-spacing:0.14em;color:var(--text-dim);
  text-transform:uppercase;
  margin-top:40px;margin-bottom:16px;
}
.vault-past-strip{
  display:flex;gap:12px;
  overflow-x:auto;
  padding-bottom:8px;
  scrollbar-width:none;
}
.vault-past-strip::-webkit-scrollbar{ display:none }

.past-card{
  flex-shrink:0;
  width:120px;
  background:var(--bg-glass);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:12px;
  cursor:pointer;
  transition:all 0.3s var(--ease);
}
.past-card:hover{
  border-color:var(--border-hov);
  transform:translateY(-3px);
}
.past-card-img{
  width:100%;aspect-ratio:1;
  background:var(--bg-2);
  border-radius:var(--r-sm);
  margin-bottom:8px;
}
.past-card-name{
  font-size:0.8rem;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.past-card-season{
  font-size:0.68rem;color:var(--text-dim);
}

/* ─── PROOF / SOCIAL TICKER ──────────────────────────────── */
#proof{
  padding:80px 0;
  overflow:hidden;
}
.proof-inner{
  max-width:1280px;margin:0 auto;padding:0 24px;
  margin-bottom:32px;
}

.proof-track-wrap{
  overflow:hidden;
  -webkit-mask:linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  mask:linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
#proofTrack{
  display:flex;gap:16px;
  width:max-content;
  animation:ticker-scroll 40s linear infinite;
}
#proofTrack:hover{ animation-play-state:paused }

@keyframes ticker-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

.proof-item{
  flex-shrink:0;
  padding:14px 20px;
  background:var(--bg-glass);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  backdrop-filter:blur(8px);
  white-space:nowrap;
  display:flex;align-items:center;gap:12px;
}
.proof-avatar{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--purple),var(--cyan));
  font-size:0.7rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  flex-shrink:0;
}
.proof-text{
  font-size:0.82rem;
}
.proof-text strong{ color:var(--gold) }
.proof-text .proof-char{ color:var(--cyan) }

/* ─── VOTE MODAL ─────────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(6,8,16,0.85);
  backdrop-filter:blur(12px);
  z-index:var(--z-modal);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s var(--ease);
}
.modal-overlay.open{
  opacity:1;
  pointer-events:auto;
}
.modal-overlay.open .modal-card{
  transform:translateY(0) scale(1);
}

.modal-card{
  background:var(--bg-1);
  border:1px solid var(--border-hov);
  border-radius:var(--r-xl);
  padding:40px 36px;
  max-width:440px;width:100%;
  position:relative;
  transform:translateY(20px) scale(0.97);
  transition:transform 0.4s var(--ease);
  box-shadow:0 40px 100px rgba(0,0,0,0.7),0 0 60px rgba(123,108,246,0.08);
}

.modal-close{
  position:absolute;top:16px;right:16px;
  width:32px;height:32px;border-radius:50%;
  background:var(--bg-glass);border:1px solid var(--border);
  color:var(--text-dim);font-size:1rem;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.2s;
}
.modal-close:hover{
  background:var(--bg-glass-hov);color:var(--text);
}

.modal-char-preview{
  width:100%;height:160px;
  border-radius:var(--r-lg);
  background:
    radial-gradient(ellipse at 50% 60%, rgba(123,108,246,0.18), transparent 70%),
    var(--bg-2);
  margin-bottom:24px;
  display:flex;align-items:center;justify-content:center;
  font-size:3rem;
  position:relative;overflow:hidden;
}
.modal-char-preview::after{
  content:'';position:absolute;bottom:0;left:0;right:0;
  height:50%;
  background:linear-gradient(to top, var(--bg-1), transparent);
}

.modal-char-name{
  font-family:'Noto Serif SC',serif;
  font-size:1.6rem;font-weight:700;
  text-align:center;
  margin-bottom:6px;
}
.modal-designer{
  text-align:center;
  font-size:0.82rem;color:var(--text-dim);
  margin-bottom:28px;
}

.modal-section-label{
  font-size:0.75rem;letter-spacing:0.12em;
  color:var(--text-dim);text-transform:uppercase;
  margin-bottom:12px;
}

.amount-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:8px;margin-bottom:28px;
}
.amount-btn{
  padding:12px 8px;
  border-radius:var(--r-md);
  font-size:0.9rem;font-weight:600;
  background:var(--bg-glass);
  border:1px solid var(--border);
  color:var(--text-dim);
  transition:all 0.25s var(--ease);
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
.amount-btn:hover{
  border-color:var(--border-hov);color:var(--text);
}
.amount-btn.selected{
  background:linear-gradient(135deg,rgba(123,108,246,0.18),rgba(77,217,192,0.12));
  border-color:var(--purple);
  color:var(--text);
  box-shadow:0 0 16px var(--glow-purple);
}
.amount-icon{ font-size:0.72rem;color:var(--gold) }

.modal-confirm{
  width:100%;
  padding:14px;
  border-radius:var(--r-md);
  font-size:1rem;font-weight:700;
  background:linear-gradient(135deg,var(--purple),var(--cyan));
  color:#fff;
  border:none;cursor:pointer;
  transition:all 0.3s var(--ease);
  box-shadow:0 0 24px var(--glow-purple);
  margin-bottom:14px;
}
.modal-confirm:hover{
  transform:translateY(-2px);
  box-shadow:0 0 40px var(--glow-purple),0 8px 24px rgba(0,0,0,0.4);
}
.modal-hint{
  text-align:center;
  font-size:0.78rem;color:var(--text-faint);
}
.modal-remaining{
  color:var(--gold);font-weight:600;
}

/* ─── VOTE FLASH ─────────────────────────────────────────── */
.vote-flash{
  position:fixed;inset:0;
  z-index:calc(var(--z-modal) + 10);
  pointer-events:none;
  display:flex;align-items:center;justify-content:center;
}
.vote-flash-bg{
  position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(123,108,246,0.2), transparent 60%);
  opacity:0;
  transition:opacity 0.15s;
}
.vote-flash.active .vote-flash-bg{ opacity:1 }

#particleContainer{
  position:absolute;inset:0;
  pointer-events:none;
}
.particle{
  position:absolute;
  width:6px;height:6px;
  border-radius:50%;
  pointer-events:none;
}

.vote-result-badge{
  background:var(--bg-1);
  border:1px solid var(--gold);
  border-radius:var(--r-xl);
  padding:28px 48px;
  text-align:center;
  opacity:0;
  transform:scale(0.8);
  transition:all 0.4s var(--ease);
  box-shadow:0 0 60px var(--glow-gold),0 20px 60px rgba(0,0,0,0.6);
  position:relative;z-index:1;
}
.vote-flash.active .vote-result-badge{
  opacity:1;transform:scale(1);
}
.vote-result-icon{ font-size:2.5rem;margin-bottom:8px }
.vote-result-text{
  font-family:'Noto Serif SC',serif;
  font-size:1.4rem;font-weight:700;
  color:var(--gold);
}
.vote-result-sub{
  font-size:0.82rem;color:var(--text-dim);
  margin-top:6px;
}

/* ─── FOOTER ─────────────────────────────────────────────── */
footer{
  padding:60px 0 40px;
  border-top:1px solid var(--border);
  position:relative;z-index:var(--z-base);
}
.footer-inner{
  max-width:1280px;margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:48px;
}
.footer-brand .nav-brand{
  margin-bottom:16px;
  display:flex;
}
.footer-brand p{
  font-size:0.85rem;color:var(--text-dim);
  line-height:1.6;max-width:280px;
  margin-bottom:20px;
}
.footer-social{
  display:flex;gap:8px;
}
.social-btn{
  width:36px;height:36px;border-radius:var(--r-sm);
  background:var(--bg-glass);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:0.85rem;color:var(--text-dim);
  transition:all 0.25s;
}
.social-btn:hover{
  background:var(--bg-glass-hov);color:var(--text);
  border-color:var(--border-hov);
}
.footer-col h4{
  font-size:0.82rem;font-weight:700;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--text-dim);
  margin-bottom:16px;
}
.footer-col ul{ display:flex;flex-direction:column;gap:8px }
.footer-col a{
  font-size:0.85rem;color:var(--text-dim);
  transition:color 0.2s;
}
.footer-col a:hover{ color:var(--text) }

.footer-bottom{
  max-width:1280px;margin:40px auto 0;padding:20px 24px 0;
  border-top:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:12px;
}
.footer-bottom p{
  font-size:0.78rem;color:var(--text-faint);
}

/* ─── ANIMATIONS (shared) ────────────────────────────────── */
@keyframes fade-up{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fade-in{
  from{opacity:0}
  to{opacity:1}
}
@keyframes float-y{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
@keyframes shimmer{
  from{background-position:-200% center}
  to{background-position:200% center}
}

/* Reveal on scroll */
.reveal{
  opacity:0;transform:translateY(28px);
  transition:opacity 0.7s var(--ease),transform 0.7s var(--ease);
}
.reveal.visible{
  opacity:1;transform:translateY(0);
}
.reveal-delay-1{ transition-delay:0.1s }
.reveal-delay-2{ transition-delay:0.2s }
.reveal-delay-3{ transition-delay:0.3s }
.reveal-delay-4{ transition-delay:0.4s }

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:1024px){
  .hero-inner{ grid-template-columns:1fr }
  .hero-3d-pane{ display:none }
  .rank-grid{
    grid-template-columns:1fr 1fr 1fr;
    align-items:start;
  }
  .rank-1{ transform:none }
  .rank-1:hover{ transform:translateY(-8px) }
  .steps-track{ grid-template-columns:1fr }
  .steps-track::before{ display:none }
  .footer-inner{ grid-template-columns:1fr 1fr }
}

@media(max-width:768px){
  .nav-links{ display:none }
  .rank-grid{ grid-template-columns:1fr }
  .cards-grid{ grid-template-columns:repeat(2,1fr) }
  .footer-inner{ grid-template-columns:1fr }
  .footer-bottom{ flex-direction:column;text-align:center }
}

@media(max-width:480px){
  .hero-ctas{ flex-direction:column }
  .cards-grid{ grid-template-columns:1fr 1fr }
  .amount-grid{ grid-template-columns:repeat(2,1fr) }
  .modal-card{ padding:28px 20px }
}

/* ─── HTML-SPECIFIC SELECTORS (match index.html exactly) ─── */

/* Hero section — index.html uses .hero not #hero */
.hero {
  min-height:100vh;
  display:grid;
  grid-template-rows:1fr auto auto;
  align-items:center;
  position:relative;
  overflow:hidden;
  padding:120px 24px 80px;
  max-width:1280px;
  margin:0 auto;
}
/* Aurora bg layer inside hero */
.hero-bg-aurora {
  position:absolute;inset:0;
  pointer-events:none;
  z-index:0;
}
.hero-bg-aurora::before {
  content:'';position:absolute;
  top:-20%;left:20%;
  width:75vw;height:75vw;
  background:radial-gradient(ellipse, rgba(123,108,246,0.16) 0%, transparent 65%);
  animation:aurora-drift 22s ease-in-out infinite alternate;
}
.hero-bg-aurora::after {
  content:'';position:absolute;
  bottom:-15%;right:15%;
  width:55vw;height:55vw;
  background:radial-gradient(ellipse, rgba(77,217,192,0.10) 0%, transparent 65%);
  animation:aurora-drift 30s ease-in-out infinite alternate-reverse;
}
/* Hero 3D mount */
.hero-3d-mount {
  position:absolute;
  top:80px;right:32px;
  width:420px;height:480px;
  border-radius:var(--r-xl);
  border:1px solid var(--border);
  background:linear-gradient(135deg,rgba(123,108,246,0.06),rgba(77,217,192,0.04));
  overflow:hidden;
  z-index:2;
  opacity:0;
  animation:fade-in 1.2s var(--ease) 0.5s forwards;
}
/* Hero content */
.hero-content {
  position:relative;z-index:3;
  max-width:620px;
  padding-top:40px;
}
.hero-content .hero-eyebrow {
  display:inline-flex;align-items:center;gap:10px;
  font-size:0.78rem;font-weight:600;letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:22px;
  opacity:0;animation:fade-up 0.8s var(--ease) 0.15s forwards;
}
.dot-pulse {
  width:6px;height:6px;border-radius:50%;
  background:var(--cyan);
  animation:pulse-dot 2s ease-in-out infinite;
}
.hero-title {
  font-family:'Noto Serif SC',serif;
  font-size:clamp(2.8rem,5.8vw,4.6rem);
  font-weight:700;line-height:1.1;
  margin-bottom:24px;letter-spacing:-0.01em;
}
.hero-title-line {
  display:block;
  opacity:0;transform:translateY(22px);
  animation:fade-up 0.9s var(--ease) forwards;
}
.hero-title-line:nth-child(1){animation-delay:0.22s}
.hero-title-line:nth-child(2){animation-delay:0.36s}
.hero-title-line:nth-child(3){animation-delay:0.50s}

.hero-sub {
  font-size:1.05rem;color:var(--text-dim);
  margin-bottom:32px;line-height:1.7;
  opacity:0;animation:fade-up 0.9s var(--ease) 0.62s forwards;
}

/* Countdown strip (index.html: .hero-countdown) */
.hero-countdown {
  margin-bottom:32px;
  opacity:0;animation:fade-up 0.9s var(--ease) 0.74s forwards;
}
.countdown-label {
  font-size:0.73rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--text-dim);margin-bottom:10px;
}
.countdown-digits {
  display:flex;align-items:center;gap:8px;
}
.digit-cell {
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
.digit-cell span {
  font-family:'JetBrains Mono',monospace;
  font-size:2rem;font-weight:500;
  color:var(--text);
  background:var(--bg-glass);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  padding:8px 14px;
  min-width:58px;text-align:center;
  position:relative;
}
.digit-cell small {
  font-size:0.65rem;letter-spacing:0.1em;
  color:var(--text-faint);text-transform:uppercase;
}
.digit-sep {
  font-size:1.4rem;color:var(--text-faint);
  margin-bottom:16px;
}

/* Hero CTAs */
.hero-cta {
  display:flex;gap:14px;flex-wrap:wrap;
  margin-bottom:40px;
  opacity:0;animation:fade-up 0.9s var(--ease) 0.86s forwards;
}

/* btn-champion = primary gold gradient */
.btn-champion {
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 30px;border-radius:var(--r-md);
  font-size:0.93rem;font-weight:700;letter-spacing:0.04em;
  background:linear-gradient(135deg,var(--gold),#ffb347);
  color:#0a0d18;
  box-shadow:0 0 28px var(--glow-gold);
  position:relative;overflow:hidden;
  border:none;cursor:pointer;
  transition:all 0.3s var(--ease);
}
.btn-champion:hover {
  transform:translateY(-2px);
  box-shadow:0 0 50px var(--glow-gold),0 8px 24px rgba(0,0,0,0.4);
}
.btn-glow {
  position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.18) 50%,transparent 100%);
  transform:translateX(-100%);
  transition:transform 0.5s ease;
}
.btn-champion:hover .btn-glow { transform:translateX(100%) }
.btn-ghost {
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 30px;border-radius:var(--r-md);
  font-size:0.93rem;font-weight:600;
  background:var(--bg-glass);
  border:1px solid var(--border);
  color:var(--text);
  backdrop-filter:blur(8px);
  cursor:pointer;
  transition:all 0.3s var(--ease);
}
.btn-ghost:hover {
  border-color:var(--border-hov);background:var(--bg-glass-hov);
  transform:translateY(-2px);
}
.btn-full { width:100% }

/* Hero stats strip */
.hero-stats {
  display:flex;gap:12px;flex-wrap:wrap;
  opacity:0;animation:fade-up 0.9s var(--ease) 1.0s forwards;
}
.stat-pill {
  display:flex;align-items:center;gap:8px;
  padding:8px 16px;
  background:var(--bg-glass);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  backdrop-filter:blur(8px);
  font-size:0.82rem;
}
.stat-num {
  font-family:'JetBrains Mono',monospace;
  font-weight:700;color:var(--cyan);
}
.stat-label { color:var(--text-dim) }

/* Scroll hint */
.hero-scroll-hint {
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:0.68rem;letter-spacing:0.16em;color:var(--text-faint);
  text-transform:uppercase;
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  opacity:0;animation:fade-in 1s var(--ease) 2s forwards;
  z-index:3;
}
.scroll-line {
  width:1px;height:36px;
  background:linear-gradient(to bottom,var(--text-faint),transparent);
  animation:scroll-line 2s ease-in-out infinite;
}

/* ─── SECTION WRAPPER ──────────────────────────────── */
.section {
  position:relative;z-index:var(--z-base);
  padding:96px 24px;
  max-width:1280px;
  margin:0 auto;
}
.section-header {
  text-align:center;margin-bottom:56px;
}
.section-tag {
  display:inline-flex;align-items:center;gap:8px;
  font-size:0.73rem;font-weight:600;letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--cyan);margin-bottom:14px;
}
.section-tag::before,.section-tag::after {
  content:'';display:inline-block;
  width:22px;height:1px;
  background:currentColor;opacity:0.5;
}
.section-title {
  font-family:'Noto Serif SC',serif;
  font-size:clamp(1.8rem,3.5vw,2.8rem);
  font-weight:700;line-height:1.2;
  margin-bottom:14px;
}
.section-desc {
  font-size:1rem;color:var(--text-dim);
  max-width:520px;margin:0 auto;
}
.live-badge {
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 14px;
  border-radius:20px;
  background:rgba(230,57,70,0.12);
  border:1px solid rgba(230,57,70,0.3);
  font-size:0.72rem;font-weight:700;letter-spacing:0.1em;
  color:var(--vermilion);
  margin-top:12px;
  margin-left:12px;
}
.live-dot {
  width:6px;height:6px;border-radius:50%;
  background:var(--vermilion);
  animation:pulse-dot 1.5s ease-in-out infinite;
}

/* ─── TOP3 SECTION ─────────────────────────────────── */
.section-top3 { padding-bottom:80px }
.top3-grid {
  display:grid;
  grid-template-columns:1fr 1.15fr 1fr;
  gap:20px;
  align-items:end;
}
/* Rank card inner layout */
.rank-card-inner {
  display:flex;flex-direction:column;
  gap:12px;
}
.rank-medal {
  font-family:'JetBrains Mono',monospace;
  font-size:2.5rem;font-weight:700;
  color:var(--text-faint);
  line-height:1;margin-bottom:8px;
}
.rank-gold { color:var(--gold) }
.char-stage {
  position:relative;
  width:100%;aspect-ratio:3/4;
  background:radial-gradient(ellipse 60% 75% at 50% 60%, rgba(123,108,246,0.14), transparent);
  border-radius:var(--r-lg);
  overflow:hidden;
  margin-bottom:4px;
}
.rank-1 .char-stage {
  background:radial-gradient(ellipse 65% 80% at 50% 60%, rgba(245,200,66,0.1), rgba(123,108,246,0.1), transparent);
}
.rank-3 .char-stage {
  background:radial-gradient(ellipse 60% 75% at 50% 60%, rgba(230,57,70,0.1), transparent);
}
.char-aura {
  position:absolute;inset:0;
  border-radius:var(--r-lg);
  pointer-events:none;
}
.aura-gold  { background:radial-gradient(ellipse at 50% 80%, rgba(245,200,66,0.15), transparent 60%) }
.aura-cyan  { background:radial-gradient(ellipse at 50% 80%, rgba(77,217,192,0.12), transparent 60%) }
.aura-pink  { background:radial-gradient(ellipse at 50% 80%, rgba(230,57,70,0.12), transparent 60%) }
.char-particles { position:absolute;inset:0;pointer-events:none }

.rank-info { flex:1 }
.char-tag {
  display:inline-block;
  font-size:0.72rem;color:var(--text-dim);
  margin-bottom:10px;
}
.rank-votes {
  display:flex;align-items:baseline;gap:4px;
  margin-bottom:8px;
}
.votes-num {
  font-family:'JetBrains Mono',monospace;
  font-size:1.5rem;font-weight:700;
  color:var(--text);
}
.rank-1 .votes-num { color:var(--gold) }
.votes-unit { font-size:0.8rem;color:var(--text-dim) }
.vote-bar-wrap { margin-bottom:12px }
.vote-spark { color:var(--gold) }
.rank1-glow {
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 100%, rgba(245,200,66,0.08), transparent 60%);
  pointer-events:none;border-radius:inherit;
}
.section-footer {
  text-align:center;margin-top:40px;
}
.link-arrow {
  font-size:0.9rem;color:var(--text-dim);
  transition:color 0.2s;
}
.link-arrow:hover { color:var(--cyan) }

/* ─── STEPS (how it works) ─────────────────────────── */
.section-how .steps-track {
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  gap:0;align-items:start;
  margin-top:48px;
}
.step-item {
  text-align:center;padding:0 20px;
  opacity:0;transform:translateY(20px);
  transition:opacity 0.6s var(--ease),transform 0.6s var(--ease);
}
.step-item.in-view { opacity:1;transform:translateY(0) }
.step-item:nth-child(3).in-view { transition-delay:0.15s }
.step-item:nth-child(5).in-view { transition-delay:0.30s }
.step-num {
  font-family:'JetBrains Mono',monospace;
  font-size:2.2rem;font-weight:700;
  color:var(--text-faint);line-height:1;
  margin-bottom:16px;
}
.step-icon-wrap {
  width:72px;height:72px;border-radius:50%;
  margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;
  border:1px solid var(--border);
  background:var(--bg-glass);
  transition:all 0.4s var(--ease);
}
.step-item:hover .step-icon-wrap { transform:scale(1.08) }
.step-item:nth-child(1) .step-icon-wrap { border-color:rgba(123,108,246,0.35);box-shadow:0 0 20px rgba(123,108,246,0.12) }
.step-item:nth-child(3) .step-icon-wrap { border-color:rgba(77,217,192,0.35);box-shadow:0 0 20px rgba(77,217,192,0.12) }
.step-item:nth-child(5) .step-icon-wrap { border-color:rgba(245,200,66,0.35);box-shadow:0 0 20px rgba(245,200,66,0.12) }
.step-icon-design::before { content:'🎨' }
.step-icon-vote::before   { content:'✦' }
.step-icon-earn::before   { content:'💰' }
.step-item h3 {
  font-family:'Noto Serif SC',serif;
  font-size:1.1rem;font-weight:700;
  margin-bottom:10px;
}
.step-item p { font-size:0.88rem;color:var(--text-dim);line-height:1.65 }
.step-tag {
  display:inline-block;margin-top:14px;
  padding:4px 12px;border-radius:var(--r-sm);
  font-size:0.7rem;font-weight:600;letter-spacing:0.08em;
}
.step-item:nth-child(1) .step-tag { background:rgba(123,108,246,0.12);color:var(--purple) }
.step-item:nth-child(3) .step-tag { background:rgba(77,217,192,0.12);color:var(--cyan) }
.step-item:nth-child(5) .step-tag { background:rgba(245,200,66,0.12);color:var(--gold) }
.step-connector {
  display:flex;flex-direction:column;align-items:center;
  padding-top:36px;
}
.connector-line {
  width:1px;height:60px;
  background:linear-gradient(to bottom,var(--purple),var(--cyan));
  opacity:0.25;
}
.connector-spark {
  color:var(--gold);font-size:0.9rem;
  margin-top:4px;
  animation:pulse-dot 2s ease-in-out infinite;
}

/* ─── VAULT SECTION ────────────────────────────────── */
.section-vault { overflow:hidden }
.vault-bg-orb {
  position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:60vw;height:60vw;
  background:radial-gradient(circle, rgba(123,108,246,0.07), transparent 60%);
  pointer-events:none;border-radius:50%;
}
.vault-stage {
  position:relative;
  height:440px;
  border-radius:var(--r-xl);
  border:1px solid var(--border);
  overflow:hidden;
  margin-top:40px;
  background:radial-gradient(ellipse at 50% 80%, rgba(123,108,246,0.09), transparent 55%),var(--bg-1);
}
.vault-canvas { width:100%;height:100%;display:block }
.vault-overlay {
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.vault-coming {
  text-align:center;
  opacity:0.7;
}
.vault-placeholder-icon {
  font-size:3rem;color:var(--gold);
  filter:drop-shadow(0 0 16px var(--glow-gold));
  animation:float-y 3s ease-in-out infinite;
  margin-bottom:12px;
}
.vault-coming p {
  font-family:'Noto Serif SC',serif;
  font-size:1.1rem;color:var(--text-dim);
  margin-bottom:6px;
}
.vault-countdown-mini {
  font-family:'JetBrains Mono',monospace;
  font-size:0.85rem;color:var(--gold);
}
.vault-past-strip {
  display:flex;gap:12px;
  overflow-x:auto;padding:24px 0 8px;
  scrollbar-width:none;
}
.vault-past-strip::-webkit-scrollbar { display:none }
.past-demo {
  display:flex;align-items:center;gap:14px;
  padding:14px 20px;
  background:var(--bg-glass);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  flex-shrink:0;
}
.demo-char-1 {
  width:52px;height:52px;border-radius:var(--r-sm);
  background:linear-gradient(135deg,rgba(77,217,192,0.2),rgba(123,108,246,0.15));
  font-size:1.5rem;display:flex;align-items:center;justify-content:center;
}
.demo-char-1::after { content:'🎭' }
.past-info { display:flex;flex-direction:column;gap:2px }
.past-season { font-size:0.7rem;color:var(--cyan);font-weight:600;letter-spacing:0.08em }
.past-name { font-family:'Noto Serif SC',serif;font-size:1rem;font-weight:700 }
.past-stat { font-size:0.75rem;color:var(--text-dim) }

/* ─── PROOF / SOCIAL ───────────────────────────────── */
.section-proof { padding:80px 0;overflow:hidden }
.proof-ticker {
  overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);
  mask:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);
}
.proof-track {
  display:flex;gap:14px;
  width:max-content;
  animation:ticker-scroll 42s linear infinite;
  padding:8px 0;
}
.proof-track:hover { animation-play-state:paused }
.proof-item {
  flex-shrink:0;
  display:flex;align-items:center;gap:10px;
  padding:12px 18px;
  background:var(--bg-glass);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  backdrop-filter:blur(8px);
  white-space:nowrap;
}
.proof-avatar {
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,var(--purple),var(--cyan));
  font-size:0.68rem;font-weight:700;color:#fff;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.proof-text { font-size:0.8rem }
.proof-text strong { color:var(--gold) }
.proof-char-name { color:var(--cyan) }

/* ─── MODAL ─────────────────────────────────────────── */
.modal-overlay {
  position:fixed;inset:0;
  background:rgba(6,8,16,0.86);
  backdrop-filter:blur(14px);
  z-index:var(--z-modal);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  opacity:0;pointer-events:none;
  transition:opacity 0.3s var(--ease);
}
.modal-overlay.modal-open {
  opacity:1;pointer-events:auto;
}
.modal-overlay.modal-open .modal-card {
  transform:translateY(0) scale(1);
}
.modal-card {
  background:var(--bg-1);
  border:1px solid var(--border-hov);
  border-radius:var(--r-xl);
  padding:40px 36px;
  max-width:430px;width:100%;
  position:relative;
  transform:translateY(22px) scale(0.97);
  transition:transform 0.4s var(--ease);
  box-shadow:0 40px 100px rgba(0,0,0,0.75),0 0 60px rgba(123,108,246,0.07);
}
.modal-close {
  position:absolute;top:14px;right:14px;
  width:30px;height:30px;border-radius:50%;
  background:var(--bg-glass);border:1px solid var(--border);
  color:var(--text-dim);font-size:0.9rem;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.2s;cursor:pointer;
}
.modal-close:hover { background:var(--bg-glass-hov);color:var(--text) }
.modal-char-preview {
  width:100%;height:150px;
  border-radius:var(--r-lg);
  background:radial-gradient(ellipse at 50% 60%,rgba(123,108,246,0.18),transparent 70%),var(--bg-2);
  margin-bottom:20px;
  display:flex;align-items:center;justify-content:center;
  font-size:3.2rem;
  overflow:hidden;position:relative;
}
.modal-body { text-align:center }
.modal-tag {
  display:inline-block;
  font-size:0.7rem;font-weight:600;letter-spacing:0.1em;
  color:var(--purple);background:rgba(123,108,246,0.12);
  padding:3px 10px;border-radius:4px;
  margin-bottom:8px;
}
.modal-char-name {
  font-family:'Noto Serif SC',serif;
  font-size:1.6rem;font-weight:700;
  margin-bottom:6px;
}
.modal-votes-row,.modal-spark-row {
  display:flex;justify-content:space-between;align-items:center;
  font-size:0.85rem;color:var(--text-dim);
  padding:8px 0;
  border-bottom:1px solid var(--border);
}
.modal-spark-row { border-bottom:none;margin-bottom:16px }
.modal-spark-label { color:var(--text-dim) }
.modal-spark-display {
  display:flex;align-items:center;gap:6px;
}
.spark-icon-lg { color:var(--gold);font-size:1rem }
#modalSparkLeft { font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--gold);font-size:1.1rem }
.vote-amount-selector {
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  margin-bottom:24px;
}
.amount-btn {
  padding:12px 8px;border-radius:var(--r-md);
  font-size:0.95rem;font-weight:700;
  background:var(--bg-glass);border:1px solid var(--border);
  color:var(--text-dim);cursor:pointer;
  transition:all 0.25s var(--ease);
}
.amount-btn:hover { border-color:var(--border-hov);color:var(--text) }
.amount-btn.active {
  background:linear-gradient(135deg,rgba(123,108,246,0.2),rgba(77,217,192,0.14));
  border-color:var(--purple);color:var(--text);
  box-shadow:0 0 16px var(--glow-purple);
}
.modal-hint {
  font-size:0.75rem;color:var(--text-faint);
  margin-top:12px;line-height:1.5;
}

/* ─── VOTE FLASH ───────────────────────────────────── */
.vote-flash {
  position:fixed;inset:0;
  z-index:calc(var(--z-modal) + 20);
  pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity 0.2s;
}
.vote-flash.flash-active {
  opacity:1;pointer-events:auto;
  background:rgba(6,8,16,0.5);
}
.flash-particles { position:absolute;inset:0;pointer-events:none }
.flash-content {
  position:relative;z-index:1;
  text-align:center;
  background:var(--bg-1);
  border:1px solid var(--gold);
  border-radius:var(--r-xl);
  padding:36px 52px;
  transform:scale(0.82);opacity:0;
  transition:all 0.4s var(--ease);
  box-shadow:0 0 60px var(--glow-gold),0 20px 60px rgba(0,0,0,0.6);
}
.vote-flash.flash-active .flash-content {
  transform:scale(1);opacity:1;
}
.flash-star {
  font-size:2.8rem;color:var(--gold);
  filter:drop-shadow(0 0 14px var(--glow-gold));
  margin-bottom:10px;
  animation:float-y 1.5s ease-in-out infinite;
}
.flash-text {
  font-family:'Noto Serif SC',serif;
  font-size:1.5rem;font-weight:700;color:var(--gold);
  margin-bottom:6px;
}
.flash-sub {
  font-size:0.88rem;color:var(--text-dim);
}
.flash-sub strong { color:var(--cyan) }

/* ─── FOOTER ────────────────────────────────────────── */
.footer {
  border-top:1px solid var(--border);
  padding:48px 24px 36px;
  position:relative;z-index:var(--z-base);
}
.footer-inner {
  max-width:1280px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:20px;
}
.footer-brand {
  display:flex;align-items:center;gap:10px;
  font-family:'Noto Serif SC',serif;
  font-size:1rem;font-weight:700;
}
.footer-mark { color:var(--gold);font-size:1.2rem }
.footer-copy { font-size:0.8rem;color:var(--text-faint) }
.footer-links {
  display:flex;gap:24px;flex-wrap:wrap;
}
.footer-links a {
  font-size:0.82rem;color:var(--text-dim);
  transition:color 0.2s;
}
.footer-links a:hover { color:var(--text) }

/* ─── CARDS GRID (season grid) ──────────────────────── */
.cards-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:18px;
}
.char-card {
  background:var(--bg-glass);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;cursor:pointer;
  transition:all 0.4s var(--ease);
}
.char-card:hover {
  transform:translateY(-6px);
  border-color:var(--border-hov);
}
.char-card:hover .card-hover-vote { opacity:1;transform:translateY(0) }
.card-img-wrap {
  position:relative;width:100%;aspect-ratio:3/4;
  background:radial-gradient(ellipse at 50% 40%,rgba(123,108,246,0.14),transparent 70%),var(--bg-1);
  overflow:hidden;
}
.card-placeholder-art {
  width:100%;height:100%;
}
.card-rarity {
  position:absolute;top:8px;left:8px;
  padding:3px 9px;border-radius:4px;
  font-size:0.65rem;font-weight:700;letter-spacing:0.1em;
  backdrop-filter:blur(8px);
}
.rarity-ur  { background:rgba(245,200,66,0.2);color:var(--gold);border:1px solid rgba(245,200,66,0.3) }
.rarity-ssr { background:rgba(123,108,246,0.2);color:var(--purple);border:1px solid rgba(123,108,246,0.3) }
.rarity-sr  { background:rgba(77,217,192,0.2);color:var(--cyan);border:1px solid rgba(77,217,192,0.3) }
.rarity-new { background:rgba(230,57,70,0.2);color:var(--vermilion);border:1px solid rgba(230,57,70,0.3) }
.card-hover-vote {
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(7,9,20,0.9) 0%,transparent 50%);
  display:flex;align-items:flex-end;justify-content:center;
  padding:18px;
  opacity:0;transform:translateY(6px);
  transition:all 0.3s var(--ease);
}
.btn-vote-card {
  padding:9px 22px;border-radius:var(--r-md);
  font-size:0.85rem;font-weight:700;
  background:linear-gradient(135deg,var(--gold),#ffb347);
  color:#0a0d18;border:none;cursor:pointer;
  transition:all 0.25s var(--ease);
}
.card-body { padding:14px }
.card-name {
  font-family:'Noto Serif SC',serif;
  font-size:0.95rem;font-weight:700;margin-bottom:3px;
}
.card-designer { font-size:0.73rem;color:var(--text-dim);margin-bottom:10px }
.card-meta { display:flex;justify-content:space-between;align-items:center }
.card-votes-num {
  font-family:'JetBrains Mono',monospace;
  font-size:0.78rem;color:var(--cyan);
}
.card-rank { font-size:0.72rem;color:var(--text-faint) }

/* ─── IN-VIEW REVEAL ──────────────────────────────── */
.reveal-item {
  opacity:0;transform:translateY(20px);
  transition:opacity 0.65s var(--ease),transform 0.65s var(--ease);
}
.reveal-item.in-view { opacity:1;transform:translateY(0) }

/* ─── RESPONSIVE (html-specific) ─────────────────── */
@media(max-width:1100px){
  .hero-3d-mount { display:none }
  .top3-grid { grid-template-columns:1fr 1fr 1fr }
  .section-how .steps-track { grid-template-columns:1fr;gap:32px }
  .step-connector { display:none }
}
@media(max-width:768px){
  .hero { padding:100px 20px 60px }
  .top3-grid { grid-template-columns:1fr }
  .cards-grid { grid-template-columns:repeat(2,1fr) }
  .footer-inner { flex-direction:column;text-align:center }
  .footer-links { justify-content:center }
  .modal-card { padding:28px 20px }
}
@media(max-width:480px){
  .hero-cta { flex-direction:column }
  .cards-grid { grid-template-columns:1fr 1fr }
  .vote-amount-selector { grid-template-columns:repeat(2,1fr) }
  .flash-content { padding:28px 24px }
}

/* ─── SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar{ width:6px;height:6px }
::-webkit-scrollbar-track{ background:var(--bg) }
::-webkit-scrollbar-thumb{
  background:var(--bg-glass-hov);
  border-radius:3px;
}
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,0.15) }

/* ─── SELECTION ──────────────────────────────────────────── */
::selection{
  background:rgba(123,108,246,0.3);
  color:var(--text);
}