:root{
  --pitch-green:#0f9d58;
  --sky-blue:#1e88e5;
  --sun-yellow:#ffc107;
  --coral-red:#ef4444;
  --royal-navy:#0b1f4d;
  --paper:#f8fafc;
  --ink:#0b1220;
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Poppins','Segoe UI',sans-serif;
}

/* -------------------- Hero / trophy -------------------- */
.hero-wrap{
  background:var(--sky-blue);
  position:relative;
  overflow:hidden;
}
.hero-wrap::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 78px, rgba(255,255,255,.08) 78px 80px),
    repeating-linear-gradient(90deg, transparent 0 78px, rgba(255,255,255,.08) 78px 80px);
  pointer-events:none;
}
.hero-confetti span{
  position:absolute; top:-20px; width:10px; height:16px; opacity:.85;
  animation:fall linear infinite;
}
@keyframes fall{
  0%{ transform:translateY(-10vh) rotate(0deg); }
  100%{ transform:translateY(110vh) rotate(540deg); }
}

/* Illustrated (non-copyrighted) trophy, drawn purely in CSS/SVG */
.trophy-glow{
  filter: drop-shadow(0 0 40px rgba(255,193,7,.55));
  animation: trophyPulse 3s ease-in-out infinite;
}
@keyframes trophyPulse{
  0%,100%{ transform:scale(1) translateY(0); }
  50%{ transform:scale(1.035) translateY(-6px); }
}

/* -------------------- Crown reveal on scroll -------------------- */
.crown-reveal{
  opacity:0; transform:translateY(40px) scale(.9);
  transition:opacity .7s ease, transform .7s ease;
}
.crown-reveal.in-view{
  opacity:1; transform:translateY(0) scale(1);
}
.crown-bob{
  animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{ transform:translateY(0) rotate(-3deg); }
  50%{ transform:translateY(-8px) rotate(3deg); }
}

/* -------------------- Leaderboard cards -------------------- */
.rank-card{
  background:#fff;
  border:3px solid transparent;
  border-radius:20px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rank-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px -12px rgba(11,31,77,.25);
}
.rank-card.rank-1{
  border-color:var(--sun-yellow);
  background:#fffdf3;
}
.rank-card.rank-1 .rank-badge{ background:var(--sun-yellow); color:#5b3a00; }
.rank-card.rank-2 .rank-badge{ background:#cbd5e1; color:#1e293b; }
.rank-card.rank-3 .rank-badge{ background:#f0b27a; color:#5b2e00; }
.rank-card.rank-4 .rank-badge{ background:#e2e8f0; color:#334155; }

.rank-badge{
  width:44px; height:44px; border-radius:9999px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:18px; flex-shrink:0;
}

.sparkle{
  position:relative;
}
.sparkle::after{
  content:"✦"; position:absolute; top:-6px; right:-6px;
  color:var(--sun-yellow); font-size:14px;
  animation:sparkleSpin 2.5s linear infinite;
}
@keyframes sparkleSpin{
  0%{ transform:rotate(0deg) scale(1); opacity:1; }
  50%{ transform:rotate(180deg) scale(1.3); opacity:.5; }
  100%{ transform:rotate(360deg) scale(1); opacity:1; }
}

/* -------------------- Points table -------------------- */
.points-table thead th{
  background:var(--royal-navy);
  color:#fff;
  position:sticky; top:0;
}
.points-table tbody tr:nth-child(odd){ background:#f1f5f9; }
.points-table tbody tr:hover{ background:#e0f2fe; }

.btn-see-more{
  background:var(--sky-blue); color:#fff; font-weight:600;
  transition:background .2s ease, transform .2s ease;
}
.btn-see-more:hover{ background:#1565c0; transform:translateY(-1px); }

/* -------------------- Modal -------------------- */
.modal-backdrop{
  background:rgba(11,18,32,.55);
  backdrop-filter:blur(3px);
}
.modal-panel{
  animation:modalIn .25s ease;
}
@keyframes modalIn{
  from{ opacity:0; transform:translateY(20px) scale(.97); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

/* -------------------- Category chips -------------------- */
.cat-chip-1{ background:#fee2e2; color:#991b1b; }
.cat-chip-2{ background:#dbeafe; color:#1e3a8a; }
.cat-chip-3{ background:#dcfce7; color:#14532d; }
.cat-chip-4{ background:#fef9c3; color:#713f12; }

/* -------------------- Utility -------------------- */
.no-scrollbar::-webkit-scrollbar{ display:none; }
.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }

.flag-ring{
  border:3px solid #fff;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
}

.pill{ border-radius:9999px; }

.owned-badge{
  background:var(--pitch-green); color:#fff;
}
.bought-badge{
  background:var(--coral-red); color:#fff;
}