/* Rising Stars 2026 — Base Styles */

* { box-sizing: border-box; }

:root {
  --navy:  #080c1a;
  --gold:  #F5C518;
  --silver: #C0C0C0;
  --bronze: #CD7F32;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--navy);
  font-family: 'Inter', sans-serif;
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(245,197,24,.3); border-radius: 2px; }

/* Star canvas */
#starfield { opacity: 0.6; }

/* Form input shared style */
.input-field {
  width: 100%;
  background: #080c1a;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 0.5rem;
  color: white;
  padding: 0.375rem 0.625rem;
  font-size: 0.875rem;
  outline: none;
  transition: border-color .15s;
}
.input-field::placeholder { color: rgba(255,255,255,.3); }
.input-field:focus { border-color: #F5C518; }

/* Leaderboard row hover */
tbody tr { transition: background .1s; }

/* Top 3 glow effects */
tr.rank-1 { box-shadow: inset 3px 0 0 #F5C518; }
tr.rank-2 { box-shadow: inset 3px 0 0 #C0C0C0; }
tr.rank-3 { box-shadow: inset 3px 0 0 #CD7F32; }

/* Hide scrollbar utility */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* HTMX loading indicator */
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-indicator { opacity: 0; transition: opacity .2s; }

/* Bracket pill */
.bracket-rookie  { background: rgba(74,222,128,.15); color: #86efac; }
.bracket-veteran { background: rgba(96,165,250,.15); color: #93c5fd; }

/* Animate new rows appearing */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
#leaderboard-table tbody tr { animation: fadeSlideIn .2s ease-out; }

/* Gold shimmer on total score */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.score-shimmer {
  background: linear-gradient(90deg, #F5C518 0%, #fff59d 50%, #F5C518 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s linear infinite;
}

/* Mobile card hover */
@media (max-width: 768px) {
  .leaderboard-card { transition: transform .1s; }
  .leaderboard-card:active { transform: scale(.99); }
}