/* 26cup.org Design System — World Cup Edition */
:root{
  --bg:#0a0e17; --bg-elevated:#111827; --bg-card:#1a1f2e;
  --ink:#e2e8f0; --ink-soft:#94a3b8; --ink-muted:#64748b;
  --gold-50:#FFF9E6; --gold-100:#FEF0B8; --gold-400:#D4AF37;
  --gold-600:#B8941F; --gold-900:#5C4200;
  --green-400:#22C55E; --red-400:#EF4444;
  --line:rgba(255,255,255,.06); --line-strong:rgba(255,255,255,.1);
  --radius:8px; --radius-lg:12px;
}

/* Energy field — dark gold ambient glow */
body{
  position:relative;overflow-x:hidden;
  background:var(--bg)!important;
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 500px 400px at 15% 10%, rgba(212,175,55,.06) 0%, transparent 55%),
    radial-gradient(ellipse 400px 350px at 85% 80%, rgba(212,175,55,.04) 0%, transparent 50%),
    radial-gradient(ellipse 350px 300px at 50% 40%, rgba(34,197,94,.03) 0%, transparent 55%);
  background-size:200% 200%;
  animation:energyField 18s ease-in-out infinite;
}
@keyframes energyField{
  0%{background-position:0% 50%}
  33%{background-position:100% 25%}
  66%{background-position:30% 80%}
  100%{background-position:0% 50%}
}

/* Cursor glow — gold */
.cursor-glow{
  position:fixed;pointer-events:none;z-index:9999;
  width:280px;height:280px;
  background:radial-gradient(circle,rgba(212,175,55,.1) 0%,rgba(212,175,55,.03) 35%,transparent 60%);
  border-radius:50%;transform:translate(-50%,-50%);transition:opacity .3s;
}

/* ⚽ FOOTBALL ANIMATIONS — pure CSS, zero JS, ~2KB total */

/* Floating gold confetti */
@keyframes confettiFall{
  0%{transform:translateY(-10vh) rotate(0deg);opacity:0}
  10%{opacity:.7}
  90%{opacity:.5}
  100%{transform:translateY(110vh) rotate(720deg);opacity:0}
}
@keyframes confettiDrift{
  0%{margin-left:0}25%{margin-left:20px}75%{margin-left:-20px}100%{margin-left:0}
}
.stadium-particle{
  position:fixed;pointer-events:none;z-index:0;
  width:6px;height:6px;background:var(--gold-400);
  border-radius:50%;opacity:0;
  animation:confettiFall 8s linear infinite,confettiDrift 3s ease-in-out infinite;
}
.stadium-particle:nth-child(1){left:5%;animation-delay:0s;width:8px;height:8px}
.stadium-particle:nth-child(2){left:15%;animation-delay:2s;width:4px;height:4px}
.stadium-particle:nth-child(3){left:25%;animation-delay:4s;width:6px;height:3px;background:var(--green-400)}
.stadium-particle:nth-child(4){left:35%;animation-delay:1s;width:5px;height:5px}
.stadium-particle:nth-child(5){left:45%;animation-delay:5s;width:7px;height:4px;background:var(--gold-400)}
.stadium-particle:nth-child(6){left:55%;animation-delay:3s;width:4px;height:6px;background:var(--green-400)}
.stadium-particle:nth-child(7){left:65%;animation-delay:6s;width:6px;height:6px}
.stadium-particle:nth-child(8){left:75%;animation-delay:1.5s;width:5px;height:3px}
.stadium-particle:nth-child(9){left:85%;animation-delay:4.5s;width:7px;height:7px}
.stadium-particle:nth-child(10){left:95%;animation-delay:2.5s;width:4px;height:4px;background:var(--green-400)}

/* Trophy shimmer */
@keyframes trophyShine{
  0%,100%{opacity:.3;filter:brightness(1)}
  50%{opacity:.6;filter:brightness(1.3)}
}
.trophy-shimmer{animation:trophyShine 3s ease-in-out infinite}

/* Score pulse */
@keyframes scorePop{
  0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}
}
.score-pulse{animation:scorePop .6s ease-out}

/* Card hover — gold glint */
.card:hover,.bg-card:hover,[class*="rounded"]:hover{
  border-color:rgba(212,175,55,.2)!important;
  box-shadow:0 0 40px rgba(212,175,55,.05),0 4px 20px rgba(0,0,0,.3)!important;
}