:root {
  --ink: #111;
  --muted: #666;
  --accent: #FF6B5A;
  --panel: #fff;
  --border: #eee;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }


/* LAYOUT */
.wrap {
  max-width: 960px;
  margin: 32px auto;
  padding: 0 16px 80px;
}
h1 {
  font-size: 2rem;
  margin: 18px 0 8px;
}
p.muted {
  color: var(--muted);
  margin: 0 0 20px;
}

/* CONTROLS */
.controls {
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:flex-end;
  margin: 10px 0 16px;
}
select, button {
  font: inherit;
  padding: 8px 10px;
  border-radius: 10px;
  border:1px solid #cfd3d8;
  background:#fff;
}
button {
  background:#111;
  color:#fff;
  border:none;
}
button:hover {
  background:#000;
}

/* BOARD */
.board {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  display: none;
  overflow: visible; /* critical for hover lift */
}

/* HEADER ROW — stays flat */
.row.header {
  background:#fafafa;
  font-weight:600;
  color:#333;
  position:sticky;
  top:0;
  z-index:50;
  box-shadow:none !important;
  transform:none !important;
  cursor:default !important;
}

/* DATA ROWS — base card style */
.row {
  display:grid;
  grid-template-columns: 64px 1fr 120px 120px;
  gap: 12px;
  align-items:center;
  padding: 12px 16px;
  border-bottom:1px solid var(--border);
  background: transparent;        /* ← NO card background */
  border-radius: 0;               /* ← NO card rounding */
  margin: 0;                      /* ← NO spacing between rows */
  transition: 
    background 0.15s ease,
    transform 0.20s ease,
    box-shadow 0.20s ease;
}

.row:last-child {
  border-bottom:none;
}

.rank {
  font-weight:700;
  font-size: 1.1rem;
  text-align:center;
}
.name {
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rating, .count {
  font-variant-numeric: tabular-nums;
  color:#222;
}

/* MEDALS */
.rank.r1::after { content: " 🥇"; }
.rank.r2::after { content: " 🥈"; }
.rank.r3::after { content: " 🥉"; }

/* CLEAN PREMIUM HOVER */
.row:not(.header):hover {
  background: rgba(0,0,0,0.03);   /* subtle highlight, not a card */
  transform: translateY(-4px);    /* lift effect */
  position: relative;
  z-index: 10;

  /* shadow above & below for 3D lift */
  box-shadow:
    0 12px 20px rgba(0,0,0,0.15),
    0 -6px 12px rgba(0,0,0,0.08);
}

/* PROGRESS BAR */
.bar-wrap {
  height: 8px;
  background:#f1f3f5;
  border-radius:999px;
  overflow:hidden;
}
.bar {
  height: 100%;
  background: var(--accent);
  width: 0%;
}

/* PODIUM */
.podium {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 20px;
  margin: 40px 0 60px;
}

.podium-item {
  flex: 1;
  max-width: 160px;
  text-align: center;
  color: #111;
  text-decoration: none;
}

.podium-bar {
  background: linear-gradient(180deg, #ffb347, #ff6b5a);
  border-radius: 10px 10px 0 0;
  width: 100%;
  transition: height 0.4s ease;
  margin-bottom: 24px; /* add clear breathing space */
}

.podium-rank {
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: 10px;
}
.podium-name {
  font-weight: 600;
  margin-top: 8px;
}
.podium-score {
  color: #666;
  font-size: 0.9rem;
}

/* --- Angel-rise podium hover --- */

/* Whole podium item gently floats upward */
.podium-item {
  transition: transform 0.45s ease, filter 0.45s ease;
}

.podium-item:hover {
  transform: translateY(-6px) scale(1.03);
  filter: drop-shadow(0 10px 25px rgba(0,0,0,0.22))
          drop-shadow(0 0 15px rgba(255,255,255,0.3));
}

/* Podium bar rising + swirling gradient */
.podium-item:hover .podium-bar {
  transform: scaleY(1.12);
  background-size: 280% 280%;
  animation: gradientSwirl 5s ease-in-out infinite;
  transition: transform 0.45s ease, background-size 0.45s ease;
  transform-origin: bottom;   /* makes the bar rise UPWARD only */

}

.podium-item:hover .podium-rank,
.podium-item:hover .podium-name,
.podium-item:hover .podium-score {
  transform: translateY(-4px);        /* gently rises with the bar */
  transition: transform 0.45s ease;
}

.podium-item {
  overflow: visible;
}

/* More pronounced swirl movement */
@keyframes gradientSwirl {
  0%   { background-position: 0% 0%; }
  25%  { background-position: 60% 30%; }
  50%  { background-position: 100% 100%; }
  75%  { background-position: 40% 70%; }
  100% { background-position: 0% 0%; }
}



/* FADE ANIMATION (opacity-only so it never fights hover/layout transforms) */
.fade{
  opacity: 0;
  animation: fadeIn 0.3s ease forwards;
}
@keyframes fadeIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}



/* RESPONSIVE */
@media (max-width: 720px) {
  .row {
    grid-template-columns: 48px 1fr 90px 90px;
    gap: 10px;
  }
  .navbar {
    padding: 0 14px;
  }
}


/* Optional: gently lower text on hover for cleaner look */

.confidence-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 6px;
}

.conf-high {
  background: #3cc76a;
}

.conf-med {
  background: #f1c40f;
}

.conf-low {
  background: #e74c3c;
}

/* Momentum indicator */
.momentum {
  font-size: 0.95rem;
  font-weight: 600;
  color: #555;
  text-align: center;
}

/* Colors */
.momentum.up {
  color: #2ecc71;   /* green */
}

.momentum.down {
  color: #e74c3c;   /* red */
}

.momentum.new {
  color: #2980b9;   /* blue */
}

.momentum.stable {
  color: #888;
}

/* FOOTER */
.footer {
  margin-top: 80px;
  padding: 32px 16px;
  background: #111;
  color: #ccc;
  text-align: center;
  font-size: 0.9rem;
}

.footer a {
  color: #fff;
  text-decoration: underline;
}

.footer a:hover {
  opacity: 0.8;
}