.tabs { display:flex; gap:8px; margin-bottom:12px }
.card { border:1px solid #eee; border-radius:10px; padding:12px }
table { width:100%; border-collapse:collapse; margin-top:8px }
th, td { padding:8px 10px; border-bottom:1px solid #f0f0f0; text-align:left }
th { background:#fafafa }

@media (max-width: 575.98px) {
  /* ensure headers hidden */
  #table-alltime thead, #table-month thead, #table-week thead { display: none; }

  /* card style */
  #table-alltime, #table-month, #table-week,
  #table-alltime tbody, #table-month tbody, #table-week tbody,
  #table-alltime tr, #table-month tr, #table-week tr,
  #table-alltime td, #table-month td, #table-week td {
    display: block;
    width: 100%;
  }

  #table-alltime tr, #table-month tr, #table-week tr {
    margin-bottom: 12px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #eee;
    background: #fff;
  }

  #table-alltime td, #table-month td, #table-week td {
    padding: 6px 0;
    border: none;
    white-space: normal;
  }

  /* Inline labels */
  .rank-col:before       { content:"Rank: "; font-weight:600; display:inline; margin-right:6px; }
  .name-col:before       { content:"Name: "; font-weight:600; display:inline; margin-right:6px; }
  .games-col:before      { content:"Games: "; font-weight:600; display:inline; margin-right:6px; }
  .score-col:before      { content:"Score: "; font-weight:600; display:inline; margin-right:6px; }
  .lastplayed-col:before { content:"Last played: "; font-weight:600; display:inline; margin-right:6px; }

  /* make rank inner inline */
  .rank-inner { display:inline-flex; align-items:center; gap:6px; }

  /* small medal icons */
  .rank-inner .medal { font-size:16px; margin-right:6px; vertical-align:middle; }
}

@media (max-width: 575.98px) {
  /* remove the generic white background for the special rows then add gradients */
  #table-alltime tr.first-place,
  #table-month tr.first-place,
  #table-week tr.first-place {
    background: linear-gradient(90deg, #fff9e6 0%, #fff3d1 100%);
    border-color: #f2e6c9;
  }

  #table-alltime tr.second-place,
  #table-month tr.second-place,
  #table-week tr.second-place {
    background: linear-gradient(90deg, #f0fbff 0%, #e6f6ff 100%);
    border-color: #d6eef9;
  }

  #table-alltime tr.third-place,
  #table-month tr.third-place,
  #table-week tr.third-place {
    background: linear-gradient(90deg, #f9f6f1 0%, #f3e9d9 100%);
    border-color: #ecdcc7;
  }

  #table-alltime tr.first-place .name-col,
  #table-month tr.first-place .name-col,
  #table-week tr.first-place .name-col,
  #table-alltime tr.second-place .name-col,
  #table-month tr.second-place .name-col,
  #table-week tr.second-place .name-col,
  #table-alltime tr.third-place .name-col,
  #table-month tr.third-place .name-col,
  #table-week tr.third-place .name-col {
    color: inherit;
    font-weight: 600;
  }
}

/* Desktop / tablet: make Rank column narrower */
@media (min-width: 768px) {
  #table-alltime th.rank-col,
  #table-alltime td.rank-col,
  #table-month th.rank-col,
  #table-month td.rank-col,
  #table-week th.rank-col,
  #table-week td.rank-col {
    width: 70px;     /* smaller than 100px */
    min-width: 60px; /* enough for 🏅 + 2-digit number */
  }

  /* align text center but keep compact */
  .rank-col { text-align: center; }
}

#clearSearch {
  font-size: 18px;
  line-height: 1;
  padding: 6px 10px;
}

/* --- Medal + top-3 row highlights --- */
.first-place { 
  background: linear-gradient(90deg, #ffd70022, transparent); 
  font-weight: 700; 
}
.second-place { 
  background: linear-gradient(90deg, #c0c0c033, transparent); 
  font-weight: 700; 
}
.third-place { 
  background: linear-gradient(90deg, #cd7f3233, transparent); 
  font-weight: 700; 
}

/* Medal base */
.medal {
  display: inline-block;
  margin-right: 6px;
  font-size: 1.05em;
  line-height: 1;
  transition: transform 0.25s ease, filter 0.25s ease, opacity 0.25s ease;
  will-change: transform, filter, opacity;
}

/* Colored medals (top 3) — give each a subtle shine & pulse */
.medal-gold {
  filter: drop-shadow(0 4px 6px rgba(255, 215, 0, 0.18));
  animation: pulse-gold 2.2s ease-in-out infinite;
}
.medal-silver {
  filter: drop-shadow(0 4px 6px rgba(192, 192, 192, 0.16));
  animation: pulse-silver 2.6s ease-in-out infinite;
}
.medal-bronze {
  filter: drop-shadow(0 4px 6px rgba(205, 127, 50, 0.14));
  animation: pulse-bronze 2.8s ease-in-out infinite;
}

/* Grayscale medal for others (dim by default) */
.medal-gray { 
  filter: grayscale(100%); 
  opacity: 0.65; 
}

/* Hover: make the entire row glow and un-gray the gray medals */
tr:hover {
  background: #f0f8ff; /* light blue glow */
  box-shadow: inset 0 0 8px rgba(0,0,0,0.04);
  transform: scale(1.005);
  transition: background 0.18s ease, transform 0.18s ease;
}
tr:hover .medal-gray {
  filter: none;
  opacity: 1;
  transform: translateY(-2px) scale(1.05);
}

/* Also add a little pop on hover for the top-3 medals */
tr:hover .medal-gold,
tr:hover .medal-silver,
tr:hover .medal-bronze {
  transform: translateY(-2px) scale(1.08);
}

/* --- Pulse keyframes (subtle) --- */
@keyframes pulse-gold {
  0%   { transform: translateY(0) scale(1); filter: drop-shadow(0 4px 6px rgba(255,215,0,0.18)); }
  50%  { transform: translateY(-1px) scale(1.03); filter: drop-shadow(0 6px 12px rgba(255,215,0,0.22)); }
  100% { transform: translateY(0) scale(1); filter: drop-shadow(0 4px 6px rgba(255,215,0,0.18)); }
}
@keyframes pulse-silver {
  0%   { transform: translateY(0) scale(1); filter: drop-shadow(0 4px 6px rgba(192,192,192,0.16)); }
  50%  { transform: translateY(-1px) scale(1.02); filter: drop-shadow(0 6px 12px rgba(192,192,192,0.20)); }
  100% { transform: translateY(0) scale(1); filter: drop-shadow(0 4px 6px rgba(192,192,192,0.16)); }
}
@keyframes pulse-bronze {
  0%   { transform: translateY(0) scale(1); filter: drop-shadow(0 4px 6px rgba(205,127,50,0.14)); }
  50%  { transform: translateY(-1px) scale(1.02); filter: drop-shadow(0 6px 12px rgba(205,127,50,0.18)); }
  100% { transform: translateY(0) scale(1); filter: drop-shadow(0 4px 6px rgba(205,127,50,0.14)); }
}

/* Accessibility: prefer-reduced-motion support */
@media (prefers-reduced-motion: reduce) {
  .medal, tr { transition: none !important; animation: none !important; transform: none !important; }
}