/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
  /* Brand Colors */
  --color-primary: #fc4c02;
  --color-primary-hover: #e34402;
  --color-primary-light: #ff6b2c;
  --color-primary-glow: rgba(252, 76, 2, 0.4);

  /* Neutral Colors - Light Mode */
  --color-background: #f5f5fa;
  --color-surface: #ffffff;
  --color-surface-alt: #f1f1f1;
  --color-border: #e0e0e0;

  /* Text Colors */
  --color-text-primary: #333333;
  --color-text-secondary: #555555;
  --color-text-muted: #666666;
  --color-text-on-primary: #ffffff;

  /* Interactive States */
  --color-link: #007fb6;
  --color-link-hover: #005a82;
  --color-row-hover: #fff8f5;
  --color-mayor-highlight: #fff4ed;

  /* Table Colors */
  --color-table-header: var(--color-primary);
  --color-table-row-even: #f8f8f8;
  --color-table-row-odd: #ffffff;

  /* Navigation */
  --color-nav-bg: #1a1a2e;
  --color-nav-tab: #2d2d44;
  --color-nav-tab-hover: #3d3d54;

  /* Tooltip */
  --color-tooltip-bg: #333333;
  --color-tooltip-text: #ffffff;

  /* Spacing Scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Typography */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;
  --font-size-2xl: 28px;
  --font-size-3xl: 36px;
  --line-height-base: 1.6;
  --line-height-tight: 1.3;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
}

/* Dark Mode - System Preference */
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) {
    --color-background: #0f0f1a;
    --color-surface: #1a1a2e;
    --color-surface-alt: #252540;
    --color-border: #3a3a5a;

    --color-text-primary: #e8e8f0;
    --color-text-secondary: #b8b8c8;
    --color-text-muted: #888898;

    --color-link: #4da6ff;
    --color-link-hover: #7dbfff;
    --color-row-hover: #2a2a4a;
    --color-mayor-highlight: #3a2820;

    --color-table-row-even: #1e1e32;
    --color-table-row-odd: #1a1a2e;

    --color-nav-bg: #0a0a14;
    --color-nav-tab: #1e1e32;
    --color-nav-tab-hover: #2e2e48;

    --color-tooltip-bg: #2a2a4a;
  }
}

/* Dark Mode - Manual Override */
html.dark-mode {
  --color-background: #0f0f1a;
  --color-surface: #1a1a2e;
  --color-surface-alt: #252540;
  --color-border: #3a3a5a;

  --color-text-primary: #e8e8f0;
  --color-text-secondary: #b8b8c8;
  --color-text-muted: #888898;

  --color-link: #4da6ff;
  --color-link-hover: #7dbfff;
  --color-row-hover: #2a2a4a;
  --color-mayor-highlight: #3a2820;

  --color-table-row-even: #1e1e32;
  --color-table-row-odd: #1a1a2e;

  --color-nav-bg: #0a0a14;
  --color-nav-tab: #1e1e32;
  --color-nav-tab-hover: #2e2e48;

  --color-tooltip-bg: #2a2a4a;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  background: var(--color-background);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  margin: 0;
  padding: 0;
  font-size: var(--font-size-base);
  transition: background-color var(--transition-base), color var(--transition-base);
  min-height: 100vh;
}

/* Sporty accent bar at top */
body::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-primary) 100%);
}

h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-md) 0;
}

h2 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  font-weight: 600;
  letter-spacing: 0.5px;
}

p {
  margin-top: 0;
  text-align: justify;
}

h3 {
  font-weight: 300;
  color: var(--color-text-primary);
}

a:link,
a:visited {
  text-decoration: none;
  color: var(--color-text-primary);
  transition: color var(--transition-fast);
}

a:hover,
a:focus,
a:active {
  text-decoration: underline;
  color: var(--color-link);
}
/* ==========================================================================
   Layout
   ========================================================================== */

#container {
  margin: 0 auto;
  padding: var(--space-md);
  max-width: 1200px;
  width: 100%;
}

#main {
  clear: both;
}

/* Responsive table wrapper */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--space-md);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   Tables
   ========================================================================== */

table,
th,
td {
  border-width: 1px;
  border-style: solid;
  border-color: var(--color-border);
}

table {
  border-collapse: collapse;
  font-size: var(--font-size-xl);
  width: 100%;
  background: var(--color-surface);
}

th,
td {
  text-align: left;
}

th {
  font-family: var(--font-heading);
  background-color: var(--color-table-header);
  color: var(--color-text-on-primary);
  padding: var(--space-sm) var(--space-md);
  border: none;
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--font-size-sm);
  letter-spacing: 0.5px;
}

/* Rounded corners on table header */
tr:first-child th:first-child {
  border-top-left-radius: var(--radius-md);
}

tr:first-child th:last-child {
  border-top-right-radius: var(--radius-md);
}

/* Remove top border from first data row to connect with header */
tr:nth-child(2) td {
  border-top: none;
}

td {
  padding: var(--space-xs) var(--space-sm);
}

tr:nth-child(even) {
  background-color: var(--color-table-row-even);
}

tr:nth-child(odd) {
  background-color: var(--color-table-row-odd);
}

tr:hover {
  background-color: var(--color-row-hover);
}

/* Responsive table sizing */
@media (max-width: 767px) {
  table {
    font-size: var(--font-size-base);
  }

  th, td {
    padding: var(--space-xs);
  }
}
#bbu {
  /* Uncomment the next line to hide the BBU button. */
  /* display: none; */
}

/* ==========================================================================
   Charts
   ========================================================================== */

.chart {
  margin: 0 0 var(--space-md) 0;
  width: 100%;
  height: 300px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

#chart.chart {
  height: 800px;
}

.chartlabel {
  font-family: var(--font-heading);
  text-align: center;
  background-color: var(--color-surface-alt);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
}

.chartlabel b {
  font-size: var(--font-size-base);
}

/* Responsive chart heights */
@media (max-width: 767px) {
  .chart {
    height: 250px;
  }

  #chart.chart {
    height: 400px;
  }
}

@media (max-width: 575px) {
  .chart {
    height: 200px;
  }

  #chart.chart {
    height: 300px;
  }
}

/* ==========================================================================
   Leaderboard & Photos
   ========================================================================== */

.direction {
  font-size: var(--font-size-2xl);
  color: var(--color-primary);
}

.topbutton {
  float: left;
  margin: 0 var(--space-sm) 0 0;
}

#join.topbutton {
  float: none;
  display: block;
  margin: 0 0 var(--space-md) 0;
}

.leaderboard {
  width: 100%;
}

.photo {
  padding: 0;
  border: none;
  width: 124px;
}

.photo img,
.athlete-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
}

/* Responsive photo sizing */
@media (max-width: 767px) {
  .photo {
    width: 60px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .photo {
    width: 80px;
  }
}

.count {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  font-family: var(--font-heading);
  color: var(--color-primary);
}

@media (max-width: 767px) {
  .count {
    font-size: var(--font-size-xl);
  }
}
/* ==========================================================================
   Animations
   ========================================================================== */

.glow {
  color: var(--color-text-on-primary);
  animation: glow 500ms ease-in-out infinite alternate;
}

.tuesday {
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  animation: glow 500ms ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px var(--color-primary-hover),
      0 0 20px var(--color-primary-hover), 0 0 25px var(--color-primary-hover);
  }
  to {
    text-shadow: 0 0 10px #fff, 0 0 15px var(--color-primary),
      0 0 20px var(--color-primary), 0 0 25px var(--color-primary),
      0 0 30px var(--color-primary), 0 0 35px var(--color-primary);
  }
}

/* Subtle entrance animation for table rows */
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

a.button {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  background-color: var(--color-primary);
  border: none;
  border-radius: var(--radius-md);
  box-sizing: border-box;
  color: var(--color-text-on-primary);
  margin: 0 0 var(--space-md) 0;
  padding: var(--space-md) var(--space-lg);
  text-align: center;
  display: inline-block;
  position: relative;
  max-width: 280px;
  width: 100%;
  user-select: none;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: var(--shadow-md), 0 4px 15px var(--color-primary-glow);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

a.strava {
  background-image: url("/static/connect-with-strava.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: #fc4c02;
  border-radius: var(--radius-xl);
  transition: filter var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

a.strava:hover {
  background-color: #e34402;
  filter: brightness(0.92);
}

a.button:hover {
  background-color: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), 0 6px 20px var(--color-primary-glow);
  cursor: pointer;
  text-decoration: none;
  color: var(--color-text-on-primary);
}

a.button:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 575px) {
  a.button {
    max-width: 100%;
    padding: var(--space-md);
  }
}

/* ==========================================================================
   User Profile (Logged-in State)
   ========================================================================== */

.user-profile {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-md);
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.user-name {
  font-weight: 600;
  color: var(--color-text-primary);
}

.logout-link {
  margin-left: auto;
  color: var(--color-link);
  font-size: var(--font-size-sm);
}

.logout-link:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

@media (max-width: 575px) {
  .user-profile {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }

  .logout-link {
    margin-left: 0;
    width: 100%;
    margin-top: var(--space-sm);
  }
}

/* ==========================================================================
   Details Page Buttons
   ========================================================================== */

.details-buttons {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.button-warning {
  background-color: var(--color-warning, #f59e0b);
}

.button-warning:hover {
  background-color: var(--color-warning-hover, #d97706);
}

@media (max-width: 575px) {
  .details-buttons {
    flex-direction: column;
  }

  .details-buttons .topbutton {
    width: 100%;
  }
}

/* ==========================================================================
   Icons & Badges
   ========================================================================== */

.icon {
  height: 40px;
  width: 40px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  vertical-align: middle;
  background-repeat: no-repeat;
  overflow: hidden;
  font-weight: 700;
  font-family: var(--font-heading);
  color: var(--color-text-secondary);
}

tr.mayor {
  outline: 3px solid var(--color-primary);
  outline-offset: -3px;
  background-color: var(--color-mayor-highlight) !important;
}

.rank1 {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgaGVpZ2h0PSI5NiIgd2lkdGg9IjI0IiB2aWV3Qm94PSIwIDAgMjQgOTYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDk2IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsPSIjRkVDODM1IiBkPSJNMjAuNCAzLjdjMCAyLTEuNiAzLjYtMy42IDMuNnMtMy42LTEuNi0zLjYtMy42aC0yLjNjMCAyLTEuNiAzLjYtMy42IDMuNlMzLjcgNS43IDMuNyAzLjdIMS40TDIuOSAxN2gxOC4ybDEuNi0xMy4zSDIwLjR6TTEyLjEgMTQuNGwtMi42LTIuNiAyLjYtMi42IDIuNiAyLjZMMTIuMSAxNC40ek0xOC4zIDEzLjJsLTEuNS0xLjUgMS41LTEuNSAxLjUgMS41TDE4LjMgMTMuMnpNNS45IDEzLjJsLTEuNS0xLjUgMS41LTEuNSAxLjUgMS41TDUuOSAxMy4yeiIvPjxwYXRoIGZpbGw9IiM2NjY2NjYiIGQ9Ik0yMC40IDI3LjdjMCAyLTEuNiAzLjYtMy42IDMuNnMtMy42LTEuNi0zLjYtMy42aC0yLjNjMCAyLTEuNiAzLjYtMy42IDMuNnMtMy42LTEuNi0zLjYtMy42SDEuNEwyLjkgNDFoMTguMmwxLjYtMTMuM0gyMC40ek0xMi4xIDM4LjRsLTIuNi0yLjYgMi42LTIuNiAyLjYgMi42TDEyLjEgMzguNHpNMTguMyAzNy4ybC0xLjUtMS41IDEuNS0xLjUgMS41IDEuNUwxOC4zIDM3LjJ6TTUuOSAzNy4ybC0xLjUtMS41IDEuNS0xLjUgMS41IDEuNUw1LjkgMzcuMnoiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjAuNCA1MS43YzAgMi0xLjYgMy42LTMuNiAzLjZzLTMuNi0xLjYtMy42LTMuNmgtMi4zYzAgMi0xLjYgMy42LTMuNiAzLjZzLTMuNi0xLjYtMy42LTMuNkgxLjRMMi45IDY1aDE4LjJsMS42LTEzLjNIMjAuNHpNMTIuMSA2Mi40bC0yLjYtMi42IDIuNi0yLjYgMi42IDIuNkwxMi4xIDYyLjR6TTE4LjMgNjEuMmwtMS41LTEuNSAxLjUtMS41IDEuNSAxLjVMMTguMyA2MS4yek01LjkgNjEuMmwtMS41LTEuNSAxLjUtMS41IDEuNSAxLjVMNS45IDYxLjJ6Ii8%2BPC9zdmc%2BDQo%3D);
}
.rank2 {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgaGVpZ2h0PSI5NiIgd2lkdGg9IjI0IiB2aWV3Qm94PSIwIDAgMjQgOTYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDk2IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsPSIjRkVDODM1IiBkPSJNMjAuNSAxLjdWMEgzLjV2MS43SDBWNS4xYzAgMi4zIDEuOCA0LjEgNCA0LjMgMSAyLjggMy41IDQuOSA2LjQgNS40IC0wLjIgMS45LTEuNyAzLjQtMy41IDMuN1YyMWgxMC4ydi0yLjVjLTEuOS0wLjMtMy40LTEuOC0zLjYtMy43IDMtMC41IDUuNC0yLjYgNi40LTUuNEMyMi4yIDkuMiAyNCA3LjMgMjQgNS4xVjEuN0gyMC41ek0xLjUgNS4xVjMuMmgydjMuM2MwIDAuNSAwIDAuOSAwLjEgMS4zQzIuNCA3LjUgMS41IDYuNCAxLjUgNS4xek0xNC4yIDljMC4xIDAgMC4yIDAuMSAwLjIgMC4ydjAuOWMwIDAuMS0wLjEgMC4yLTAuMiAwLjJIOS40VjkuNmMwLTEuNCAwLjQtMi4zIDIuMi0zLjEgMS0wLjQgMS4zLTAuNyAxLjMtMS4yIDAtMC42LTAuMy0wLjktMC45LTAuOSAtMC42IDAtMSAwLjMtMS4yIDAuOSAtMC4xIDAuMi0wLjEgMC4yLTAuMiAwLjIgMCAwIDAgMC0wLjEgMEw5LjcgNS4xQzkuNiA1LjEgOS41IDUgOS42IDQuOWMwLjQtMSAxLjMtMS43IDIuNS0xLjcgMiAwIDIuNCAxLjIgMi40IDIuMSAwIDEtMC42IDEuNy0yLjEgMi4zIC0xLjQgMC42LTEuNCAwLjktMS40IDEuNHYwLjFIMTQuMnpNMjIuNSA1LjFjMCAxLjMtMC45IDIuNC0yLjEgMi43IDAuMS0wLjQgMC4xLTAuOSAwLjEtMS4zVjMuMmgyVjUuMXoiLz48cGF0aCBmaWxsPSIjNjY2NjY2IiBkPSJNMjAuNSAyNS43VjI0SDMuNXYxLjdIMHYzLjRjMCAyLjMgMS44IDQuMSA0IDQuMyAxIDIuOCAzLjUgNC45IDYuNCA1LjQgLTAuMiAxLjktMS43IDMuNC0zLjUgMy43VjQ1aDEwLjJ2LTIuNWMtMS45LTAuMy0zLjQtMS44LTMuNi0zLjcgMy0wLjUgNS40LTIuNiA2LjQtNS40QzIyLjIgMzMuMiAyNCAzMS4zIDI0IDI5LjF2LTMuNEgyMC41ek0xLjUgMjkuMXYtMS45aDJ2My4zYzAgMC41IDAgMC45IDAuMSAxLjNDMi40IDMxLjUgMS41IDMwLjQgMS41IDI5LjF6TTE0LjIgMzNjMC4xIDAgMC4yIDAuMSAwLjIgMC4ydjAuOWMwIDAuMS0wLjEgMC4yLTAuMiAwLjJIOS40VjMzLjZjMC0xLjQgMC40LTIuMyAyLjItMy4xIDEtMC40IDEuMy0wLjcgMS4zLTEuMiAwLTAuNi0wLjMtMC45LTAuOS0wLjkgLTAuNiAwLTEgMC4zLTEuMiAwLjkgLTAuMSAwLjItMC4xIDAuMi0wLjIgMC4yIDAgMCAwIDAtMC4xIDBsLTAuOC0wLjNjLTAuMSAwLTAuMi0wLjEtMC4xLTAuMyAwLjQtMSAxLjMtMS43IDIuNS0xLjcgMiAwIDIuNCAxLjIgMi40IDIuMSAwIDEtMC42IDEuNy0yLjEgMi4zIC0xLjQgMC42LTEuNCAwLjktMS40IDEuNHYwLjFIMTQuMnpNMjIuNSAyOS4xYzAgMS4zLTAuOSAyLjQtMi4xIDIuNyAwLjEtMC40IDAuMS0wLjkgMC4xLTEuM3YtMy4zaDJWMjkuMXoiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjAuNSA0OS43VjQ4SDMuNXYxLjdIMHYzLjRjMCAyLjMgMS44IDQuMSA0IDQuMyAxIDIuOCAzLjUgNC45IDYuNCA1LjQgLTAuMiAxLjktMS43IDMuNC0zLjUgMy43VjY5aDEwLjJ2LTIuNWMtMS45LTAuMy0zLjQtMS44LTMuNi0zLjcgMy0wLjUgNS40LTIuNiA2LjQtNS40QzIyLjIgNTcuMiAyNCA1NS4zIDI0IDUzLjF2LTMuNEgyMC41ek0xLjUgNTMuMXYtMS45aDJ2My4zYzAgMC41IDAgMC45IDAuMSAxLjNDMi40IDU1LjUgMS41IDU0LjQgMS41IDUzLjF6TTE0LjIgNTdjMC4xIDAgMC4yIDAuMSAwLjIgMC4ydjAuOWMwIDAuMS0wLjEgMC4yLTAuMiAwLjJIOS40VjU3LjZjMC0xLjQgMC40LTIuMyAyLjItMy4xIDEtMC40IDEuMy0wLjcgMS4zLTEuMiAwLTAuNi0wLjMtMC45LTAuOS0wLjkgLTAuNiAwLTEgMC4zLTEuMiAwLjkgLTAuMSAwLjItMC4xIDAuMi0wLjIgMC4yIDAgMCAwIDAtMC4xIDBsLTAuOC0wLjNjLTAuMSAwLTAuMi0wLjEtMC4xLTAuMyAwLjQtMSAxLjMtMS43IDIuNS0xLjcgMiAwIDIuNCAxLjIgMi40IDIuMSAwIDEtMC42IDEuNy0yLjEgMi4zIC0xLjQgMC42LTEuNCAwLjktMS40IDEuNHYwLjFIMTQuMnpNMjIuNSA1My4xYzAgMS4zLTAuOSAyLjQtMi4xIDIuNyAwLjEtMC40IDAuMS0wLjkgMC4xLTEuM3YtMy4zaDJWNTMuMXoiLz48L3N2Zz4NCg%3D%3D);
}
.rank3 {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgaGVpZ2h0PSI5NiIgd2lkdGg9IjI0IiB2aWV3Qm94PSIwIDAgMjQgOTYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDk2IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsPSIjRkVDODM1IiBkPSJNMjAuNSAxLjdWMEgzLjV2MS43SDBWNS4xYzAgMi4zIDEuOCA0LjEgNCA0LjMgMSAyLjggMy41IDQuOSA2LjQgNS40IC0wLjIgMS45LTEuNyAzLjQtMy41IDMuN1YyMWgxMC4ydi0yLjVjLTEuOS0wLjMtMy40LTEuOC0zLjYtMy43IDMtMC41IDUuNC0yLjYgNi40LTUuNEMyMi4yIDkuMiAyNCA3LjMgMjQgNS4xVjEuN0gyMC41ek0xLjUgNS4xVjMuMmgydjMuM2MwIDAuNSAwIDAuOSAwLjEgMS4zQzIuNCA3LjUgMS41IDYuNCAxLjUgNS4xek0xNC40IDguM2MwIDEuNC0xLjMgMi4xLTIuNSAyLjEgLTAuOCAwLTIuMS0wLjItMi41LTEuNyAwLTAuMSAwLTAuMiAwLjEtMC4zbDAuNy0wLjNjMC4yLTAuMSAwLjMgMCAwLjMgMC4yIDAuMiAwLjYgMC42IDAuOCAxLjMgMC44IDAuNiAwIDEuMS0wLjMgMS4xLTAuOVY4LjJjMC0wLjYtMC40LTEtMS4xLTFoLTAuNWMtMC4xIDAtMC4xIDAtMC4xLTAuMVY2LjJjMCAwIDAtMC4xIDAuMS0wLjFoMC41YzAuNiAwIDEtMC4zIDEtMC44VjUuMmMwLTAuMi0wLjEtMC44LTEtMC44IC0wLjYgMC0xIDAuMi0xLjIgMC43IDAgMC4xLTAuMSAwLjEtMC4yIDAuMSAwIDAgMCAwLTAuMSAwbC0wLjgtMC4zQzkuNiA1IDkuNSA0LjkgOS42IDQuN2MwLjMtMSAxLjItMS42IDIuMy0xLjYgMS41IDAgMi40IDAuNyAyLjQgMS45djAuMWMwIDAuNy0wLjQgMS4yLTEgMS41IDAuNSAwLjIgMS4xIDAuNyAxLjEgMS41VjguM3pNMjIuNSA1LjFjMCAxLjMtMC45IDIuNC0yLjEgMi43IDAuMS0wLjQgMC4xLTAuOSAwLjEtMS4zVjMuMmgyVjUuMXoiLz48cGF0aCBmaWxsPSIjNjY2NjY2IiBkPSJNMjAuNSAyNS43VjI0SDMuNXYxLjdIMHYzLjRjMCAyLjMgMS44IDQuMSA0IDQuMyAxIDIuOCAzLjUgNC45IDYuNCA1LjQgLTAuMiAxLjktMS43IDMuNC0zLjUgMy43VjQ1aDEwLjJ2LTIuNWMtMS45LTAuMy0zLjQtMS44LTMuNi0zLjcgMy0wLjUgNS40LTIuNiA2LjQtNS40QzIyLjIgMzMuMiAyNCAzMS4zIDI0IDI5LjF2LTMuNEgyMC41ek0xLjUgMjkuMXYtMS45aDJ2My4zYzAgMC41IDAgMC45IDAuMSAxLjNDMi40IDMxLjUgMS41IDMwLjQgMS41IDI5LjF6TTE0LjQgMzIuM2MwIDEuNC0xLjMgMi4xLTIuNSAyLjEgLTAuOCAwLTIuMS0wLjItMi41LTEuNyAwLTAuMSAwLTAuMiAwLjEtMC4zbDAuNy0wLjNjMC4yLTAuMSAwLjMgMCAwLjMgMC4yIDAuMiAwLjYgMC42IDAuOCAxLjMgMC44IDAuNiAwIDEuMS0wLjMgMS4xLTAuOXYwYzAtMC42LTAuNC0xLTEuMS0xaC0wLjVjLTAuMSAwLTAuMSAwLTAuMS0wLjFWMzAuMmMwIDAgMC0wLjEgMC4xLTAuMWgwLjVjMC42IDAgMS0wLjMgMS0wLjh2LTAuMWMwLTAuMi0wLjEtMC44LTEtMC44IC0wLjYgMC0xIDAuMi0xLjIgMC43IDAgMC4xLTAuMSAwLjEtMC4yIDAuMSAwIDAgMCAwLTAuMSAwbC0wLjgtMC4zYy0wLjEgMC0wLjItMC4xLTAuMS0wLjMgMC4zLTEgMS4yLTEuNiAyLjMtMS42IDEuNSAwIDIuNCAwLjcgMi40IDEuOXYwLjFjMCAwLjctMC40IDEuMi0xIDEuNSAwLjUgMC4yIDEuMSAwLjcgMS4xIDEuNVYzMi4zek0yMi41IDI5LjFjMCAxLjMtMC45IDIuNC0yLjEgMi43IDAuMS0wLjQgMC4xLTAuOSAwLjEtMS4zdi0zLjNoMlYyOS4xeiIvPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yMC41IDQ5LjdWNDhIMy41djEuN0gwdjMuNGMwIDIuMyAxLjggNC4xIDQgNC4zIDEgMi44IDMuNSA0LjkgNi40IDUuNCAtMC4yIDEuOS0xLjcgMy40LTMuNSAzLjdWNjloMTAuMnYtMi41Yy0xLjktMC4zLTMuNC0xLjgtMy42LTMuNyAzLTAuNSA1LjQtMi42IDYuNC01LjRDMjIuMiA1Ny4yIDI0IDU1LjMgMjQgNTMuMXYtMy40SDIwLjV6TTEuNSA1My4xdi0xLjloMnYzLjNjMCAwLjUgMCAwLjkgMC4xIDEuM0MyLjQgNTUuNSAxLjUgNTQuNCAxLjUgNTMuMXpNMTQuNCA1Ni4zYzAgMS40LTEuMyAyLjEtMi41IDIuMSAtMC44IDAtMi4xLTAuMi0yLjUtMS43IDAtMC4xIDAtMC4yIDAuMS0wLjNsMC43LTAuM2MwLjItMC4xIDAuMyAwIDAuMyAwLjIgMC4yIDAuNiAwLjYgMC44IDEuMyAwLjggMC42IDAgMS4xLTAuMyAxLjEtMC45djBjMC0wLjYtMC40LTEtMS4xLTFoLTAuNWMtMC4xIDAtMC4xIDAtMC4xLTAuMVY1NC4yYzAgMCAwLTAuMSAwLjEtMC4xaDAuNWMwLjYgMCAxLTAuMyAxLTAuOHYtMC4xYzAtMC4yLTAuMS0wLjgtMS0wLjggLTAuNiAwLTEgMC4yLTEuMiAwLjcgMCAwLjEtMC4xIDAuMS0wLjIgMC4xIDAgMCAwIDAtMC4xIDBsLTAuOC0wLjNjLTAuMSAwLTAuMi0wLjEtMC4xLTAuMyAwLjMtMSAxLjItMS42IDIuMy0xLjYgMS41IDAgMi40IDAuNyAyLjQgMS45djAuMWMwIDAuNy0wLjQgMS4yLTEgMS41IDAuNSAwLjIgMS4xIDAuNyAxLjEgMS41VjU2LjN6TTIyLjUgNTMuMWMwIDEuMy0wLjkgMi40LTIuMSAyLjcgMC4xLTAuNCAwLjEtMC45IDAuMS0xLjN2LTMuM2gyVjUzLjF6Ii8%2BPC9zdmc%2BDQo%3D);
}
.rank4 {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgaGVpZ2h0PSI5NiIgd2lkdGg9IjI0IiB2aWV3Qm94PSIwIDAgMjQgOTYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDk2IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsPSIjRkVDODM1IiBkPSJNMjAuNSAxLjdWMEgzLjV2MS43SDBWNS4xYzAgMi4zIDEuOCA0LjEgNCA0LjMgMSAyLjggMy41IDQuOSA2LjQgNS40IC0wLjIgMS45LTEuNyAzLjQtMy41IDMuN1YyMWgxMC4ydi0yLjVjLTEuOS0wLjMtMy40LTEuOC0zLjYtMy43IDMtMC41IDUuNC0yLjYgNi40LTUuNEMyMi4yIDkuMiAyNCA3LjMgMjQgNS4xVjEuN0gyMC41ek0xLjUgNS4xVjMuMmgydjMuM2MwIDAuNSAwIDAuOSAwLjEgMS4zQzIuNCA3LjUgMS41IDYuNCAxLjUgNS4xek0xNC41IDguNmMwIDAuMS0wLjEgMC4yLTAuMSAwLjJoLTAuNnYxLjNjMCAwLjEtMC4xIDAuMi0wLjEgMC4yaC0xLjFjLTAuMSAwLTAuMi0wLjEtMC4yLTAuMlY4LjhoLTIuN2MtMC4xIDAtMC4xIDAtMC4yLTAuMUw5LjMgNy45YzAtMC4xIDAtMC4yIDAtMC4ybDMuMy00LjVjMC4xLTAuMSAwLjItMC4xIDAuMi0wLjFsMC43IDAuNmMwIDAgMC4xIDAuMSAwLjEgMC4xIDAgMC4xIDAgMC4xIDAgMC4ybC0yLjUgMy42aDEuMlY2LjZjMC0wLjEgMC4xLTAuMSAwLjItMC4xaDEuMWMwLjEgMCAwLjIgMC4xIDAuMiAwLjJ2MWgwLjZjMC4xIDAgMC4yIDAuMSAwLjIgMC4yVjguNnpNMjIuNSA1LjFjMCAxLjMtMC45IDIuNC0yLjEgMi43IDAuMS0wLjQgMC4xLTAuOSAwLjEtMS4zVjMuMmgyVjUuMXoiLz48cGF0aCBmaWxsPSIjNjY2NjY2IiBkPSJNMjAuNSAyNS43VjI0SDMuNXYxLjdIMHYzLjRjMCAyLjMgMS44IDQuMSA0IDQuMyAxIDIuOCAzLjUgNC45IDYuNCA1LjQgLTAuMiAxLjktMS43IDMuNC0zLjUgMy43VjQ1aDEwLjJ2LTIuNWMtMS45LTAuMy0zLjQtMS44LTMuNi0zLjcgMy0wLjUgNS40LTIuNiA2LjQtNS40QzIyLjIgMzMuMiAyNCAzMS4zIDI0IDI5LjF2LTMuNEgyMC41ek0xLjUgMjkuMXYtMS45aDJ2My4zYzAgMC41IDAgMC45IDAuMSAxLjNDMi40IDMxLjUgMS41IDMwLjQgMS41IDI5LjF6TTE0LjUgMzIuNmMwIDAuMS0wLjEgMC4yLTAuMSAwLjJoLTAuNnYxLjNjMCAwLjEtMC4xIDAuMi0wLjEgMC4yaC0xLjFjLTAuMSAwLTAuMi0wLjEtMC4yLTAuMnYtMS4zaC0yLjdjLTAuMSAwLTAuMSAwLTAuMi0wLjFMOS4zIDMxLjljMC0wLjEgMC0wLjIgMC0wLjJsMy4zLTQuNWMwLjEtMC4xIDAuMi0wLjEgMC4yLTAuMWwwLjcgMC42YzAgMCAwLjEgMC4xIDAuMSAwLjEgMCAwLjEgMCAwLjEgMCAwLjJsLTIuNSAzLjZoMS4ydi0xYzAtMC4xIDAuMS0wLjEgMC4yLTAuMWgxLjFjMC4xIDAgMC4yIDAuMSAwLjIgMC4ydjFoMC42YzAuMSAwIDAuMiAwLjEgMC4yIDAuMlYzMi42ek0yMi41IDI5LjFjMCAxLjMtMC45IDIuNC0yLjEgMi43IDAuMS0wLjQgMC4xLTAuOSAwLjEtMS4zdi0zLjNoMlYyOS4xeiIvPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yMC41IDQ5LjdWNDhIMy41djEuN0gwdjMuNGMwIDIuMyAxLjggNC4xIDQgNC4zIDEgMi44IDMuNSA0LjkgNi40IDUuNCAtMC4yIDEuOS0xLjcgMy40LTMuNSAzLjdWNjloMTAuMnYtMi41Yy0xLjktMC4zLTMuNC0xLjgtMy42LTMuNyAzLTAuNSA1LjQtMi42IDYuNC01LjRDMjIuMiA1Ny4yIDI0IDU1LjMgMjQgNTMuMXYtMy40SDIwLjV6TTEuNSA1My4xdi0xLjloMnYzLjNjMCAwLjUgMCAwLjkgMC4xIDEuM0MyLjQgNTUuNSAxLjUgNTQuNCAxLjUgNTMuMXpNMTQuNSA1Ni42YzAgMC4xLTAuMSAwLjItMC4xIDAuMmgtMC42djEuM2MwIDAuMS0wLjEgMC4yLTAuMSAwLjJoLTEuMWMtMC4xIDAtMC4yLTAuMS0wLjItMC4ydi0xLjNoLTIuN2MtMC4xIDAtMC4xIDAtMC4yLTAuMUw5LjMgNTUuOWMwLTAuMSAwLTAuMiAwLTAuMmwzLjMtNC41YzAuMS0wLjEgMC4yLTAuMSAwLjItMC4xbDAuNyAwLjZjMCAwIDAuMSAwLjEgMC4xIDAuMSAwIDAuMSAwIDAuMSAwIDAuMmwtMi41IDMuNmgxLjJ2LTFjMC0wLjEgMC4xLTAuMSAwLjItMC4xaDEuMWMwLjEgMCAwLjIgMC4xIDAuMiAwLjJ2MWgwLjZjMC4xIDAgMC4yIDAuMSAwLjIgMC4yVjU2LjZ6TTIyLjUgNTMuMWMwIDEuMy0wLjkgMi40LTIuMSAyLjcgMC4xLTAuNCAwLjEtMC45IDAuMS0xLjN2LTMuM2gyVjUzLjF6Ii8%2BPC9zdmc%2BDQo%3D);
}
.rank5 {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgaGVpZ2h0PSI5NiIgd2lkdGg9IjI0IiB2aWV3Qm94PSIwIDAgMjQgOTYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDk2IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsPSIjRkVDODM1IiBkPSJNMjAuNSAxLjdWMEgzLjV2MS43SDBWNS4xYzAgMi4zIDEuOCA0LjEgNCA0LjMgMSAyLjggMy41IDQuOSA2LjQgNS40IC0wLjIgMS45LTEuNyAzLjQtMy41IDMuN1YyMWgxMC4ydi0yLjVjLTEuOS0wLjMtMy40LTEuOC0zLjYtMy43IDMtMC41IDUuNC0yLjYgNi40LTUuNEMyMi4yIDkuMiAyNCA3LjMgMjQgNS4xVjEuN0gyMC41ek0xLjUgNS4xVjMuMmgydjMuM2MwIDAuNSAwIDAuOSAwLjEgMS4zQzIuNCA3LjUgMS41IDYuNCAxLjUgNS4xek0xNC40IDhjMCAxLjUtMC45IDIuNC0yLjUgMi40IC0xLjYgMC0yLjItMC45LTIuNS0xLjcgLTAuMS0wLjIgMC0wLjMgMC4xLTAuM2wwLjgtMC4zYzAgMCAwLjEgMCAwLjEgMCAwLjEgMCAwLjIgMC4xIDAuMiAwLjIgMC4yIDAuNiAwLjYgMC45IDEuMiAwLjkgMC43IDAgMS4xLTAuNCAxLjEtMS4yVjcuOGMwLTAuNy0wLjQtMS4xLTEuMS0xLjEgLTAuNCAwLTAuOCAwLjItMS4xIDAuNiAtMC4xIDAuMS0wLjEgMC4xLTAuMiAwLjFMOS44IDYuOUM5LjcgNi45IDkuNyA2LjkgOS43IDYuN2wwLjMtMy41aDMuOWMwLjEgMCAwLjIgMC4xIDAuMiAwLjJ2MC45YzAgMC4xLTAuMSAwLjItMC4xIDAuMmgtMi43bC0wLjEgMS41YzAuMi0wLjIgMC42LTAuNCAxLjQtMC40IDEuMyAwIDIgMC44IDIgMi4yVjh6TTIyLjUgNS4xYzAgMS4zLTAuOSAyLjQtMi4xIDIuNyAwLjEtMC40IDAuMS0wLjkgMC4xLTEuM1YzLjJoMlY1LjF6Ii8%2BPHBhdGggZmlsbD0iIzY2NjY2NiIgZD0iTTIwLjUgMjUuN1YyNEgzLjV2MS43SDB2My40YzAgMi4zIDEuOCA0LjEgNCA0LjMgMSAyLjggMy41IDQuOSA2LjQgNS40IC0wLjIgMS45LTEuNyAzLjQtMy41IDMuN1Y0NWgxMC4ydi0yLjVjLTEuOS0wLjMtMy40LTEuOC0zLjYtMy43IDMtMC41IDUuNC0yLjYgNi40LTUuNEMyMi4yIDMzLjIgMjQgMzEuMyAyNCAyOS4xdi0zLjRIMjAuNXpNMS41IDI5LjF2LTEuOWgydjMuM2MwIDAuNSAwIDAuOSAwLjEgMS4zQzIuNCAzMS41IDEuNSAzMC40IDEuNSAyOS4xek0xNC40IDMyYzAgMS41LTAuOSAyLjQtMi41IDIuNCAtMS42IDAtMi4yLTAuOS0yLjUtMS43IC0wLjEtMC4yIDAtMC4zIDAuMS0wLjNsMC44LTAuM2MwIDAgMC4xIDAgMC4xIDAgMC4xIDAgMC4yIDAuMSAwLjIgMC4yIDAuMiAwLjYgMC42IDAuOSAxLjIgMC45IDAuNyAwIDEuMS0wLjQgMS4xLTEuMnYtMC4xYzAtMC43LTAuNC0xLjEtMS4xLTEuMSAtMC40IDAtMC44IDAuMi0xLjEgMC42IC0wLjEgMC4xLTAuMSAwLjEtMC4yIDAuMUw5LjggMzAuOWMtMC4xIDAtMC4xLTAuMS0wLjEtMC4ybDAuMy0zLjVoMy45YzAuMSAwIDAuMiAwLjEgMC4yIDAuMnYwLjljMCAwLjEtMC4xIDAuMi0wLjEgMC4yaC0yLjdsLTAuMSAxLjVjMC4yLTAuMiAwLjYtMC40IDEuNC0wLjQgMS4zIDAgMiAwLjggMiAyLjJWMzJ6TTIyLjUgMjkuMWMwIDEuMy0wLjkgMi40LTIuMSAyLjcgMC4xLTAuNCAwLjEtMC45IDAuMS0xLjN2LTMuM2gyVjI5LjF6Ii8%2BPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTIwLjUgNDkuN1Y0OEgzLjV2MS43SDB2My40YzAgMi4zIDEuOCA0LjEgNCA0LjMgMSAyLjggMy41IDQuOSA2LjQgNS40IC0wLjIgMS45LTEuNyAzLjQtMy41IDMuN1Y2OWgxMC4ydi0yLjVjLTEuOS0wLjMtMy40LTEuOC0zLjYtMy43IDMtMC41IDUuNC0yLjYgNi40LTUuNEMyMi4yIDU3LjIgMjQgNTUuMyAyNCA1My4xdi0zLjRIMjAuNXpNMS41IDUzLjF2LTEuOWgydjMuM2MwIDAuNSAwIDAuOSAwLjEgMS4zQzIuNCA1NS41IDEuNSA1NC40IDEuNSA1My4xek0xNC40IDU2YzAgMS41LTAuOSAyLjQtMi41IDIuNCAtMS42IDAtMi4yLTAuOS0yLjUtMS43IC0wLjEtMC4yIDAtMC4zIDAuMS0wLjNsMC44LTAuM2MwIDAgMC4xIDAgMC4xIDAgMC4xIDAgMC4yIDAuMSAwLjIgMC4yIDAuMiAwLjYgMC42IDAuOSAxLjIgMC45IDAuNyAwIDEuMS0wLjQgMS4xLTEuMnYtMC4xYzAtMC43LTAuNC0xLjEtMS4xLTEuMSAtMC40IDAtMC44IDAuMi0xLjEgMC42IC0wLjEgMC4xLTAuMSAwLjEtMC4yIDAuMUw5LjggNTQuOWMtMC4xIDAtMC4xLTAuMS0wLjEtMC4ybDAuMy0zLjVoMy45YzAuMSAwIDAuMiAwLjEgMC4yIDAuMnYwLjljMCAwLjEtMC4xIDAuMi0wLjEgMC4yaC0yLjdsLTAuMSAxLjVjMC4yLTAuMiAwLjYtMC40IDEuNC0wLjQgMS4zIDAgMiAwLjggMiAyLjJWNTZ6TTIyLjUgNTMuMWMwIDEuMy0wLjkgMi40LTIuMSAyLjcgMC4xLTAuNCAwLjEtMC45IDAuMS0xLjN2LTMuM2gyVjUzLjF6Ii8%2BPC9zdmc%2BDQo%3D);
}
.badge50 {
  background-image: url("/static/50.png");
}
.badge100 {
  background-image: url("/static/100.png");
}
.badge200 {
  background-image: url("/static/200.png");
}
.badge300 {
  background-image: url("/static/300.png");
}
.badge400 {
  background-image: url("/static/400.png");
}
.badgeomg {
  background-image: url("/static/omg.png");
}
.badgewtf {
  background-image: url("/static/wtf.png");
}
.promo {
  color: var(--color-text-on-primary);
  vertical-align: middle;
}

/* ==========================================================================
   Spinner
   ========================================================================== */

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}

.spinner--small {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

.spinner--large {
  width: 48px;
  height: 48px;
  border-width: 4px;
}

/* Processing button state with spinner overlay */
#join a.processing {
  position: relative;
  color: transparent;
  pointer-events: none;
}

#join a.processing::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ==========================================================================
   Tooltips
   ========================================================================== */

.tooltip {
  position: relative;
  display: inline-block;
  cursor: default;
  vertical-align: middle;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 240px;
  background-color: var(--color-tooltip-bg);
  color: var(--color-tooltip-text);
  text-align: center;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  position: absolute;
  z-index: 100;
  font-size: var(--font-size-sm);
  top: 120%;
  left: 50%;
  margin-left: -120px;
  box-shadow: var(--shadow-lg);
  line-height: var(--line-height-tight);
}

.tooltip .tooltiptext a {
  color: var(--color-link);
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent var(--color-tooltip-bg) transparent;
}

/* ==========================================================================
   Switch Toggle
   ========================================================================== */

.switch-toggle {
  font-family: var(--font-heading);
  background: var(--color-nav-bg);
  border-radius: var(--radius-md);
  margin: 0 0 var(--space-md) 0;
  padding: var(--space-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  box-shadow: var(--shadow-md);
}

.switch-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-toggle input + label {
  padding: var(--space-sm) var(--space-md);
  color: var(--color-text-on-primary);
  cursor: pointer;
  text-align: center;
  border-radius: var(--radius-xl);
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
  flex: 1;
  min-width: 100px;
  font-size: var(--font-size-sm);
}

.switch-toggle input:checked + label {
  background: var(--color-primary);
  font-weight: 600;
  box-shadow: 0 2px 8px var(--color-primary-glow);
}

.switch-toggle input:focus + label {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.switch-toggle a {
  display: none;
}

@media (max-width: 575px) {
  .switch-toggle {
    flex-direction: column;
  }

  .switch-toggle input + label {
    width: 100%;
  }
}


/* ==========================================================================
   Velocity Spinner
   ========================================================================== */

.speed1 { animation-duration: 20000ms; }
.speed2 { animation-duration: 10000ms; }
.speed3 { animation-duration: 5000ms; }
.speed4 { animation-duration: 2000ms; }
.speed5 { animation-duration: 500ms; }

.spinning {
  animation-name: spin;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Invert wheel in dark mode for visibility */
html.dark-mode img[src*="wheel.svg"] {
  filter: invert(1);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) img[src*="wheel.svg"] {
    filter: invert(1);
  }
}

/* ==========================================================================
   Athlete Title
   ========================================================================== */

.athlete-title {
  font-size: 0.85em;
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: var(--space-xs);
  line-height: var(--line-height-tight);
}

.athlete-title-details {
  font-size: 1.1em;
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: var(--space-sm);
  margin-bottom: var(--space-md);
  text-align: center;
}

/* ==========================================================================
   Details Page Header
   ========================================================================== */

.details-header {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}

.details-header img {
  flex-shrink: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  width: 124px;
  height: 124px;
  object-fit: cover;
}

.details-header h1 {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}

.details-header-text {
  flex: 1;
  min-width: 200px;
}

.details-header .athlete-title-details {
  text-align: left;
  margin-bottom: 0;
}

@media (max-width: 575px) {
  .details-header {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .details-header img {
    width: 100px;
    height: 100px;
  }

  .details-header-text {
    text-align: center;
  }

  .details-header .athlete-title-details {
    text-align: center;
  }
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.main-nav {
  font-family: var(--font-heading);
  background: var(--color-nav-bg);
  border-radius: var(--radius-md);
  margin: 0 0 var(--space-lg) 0;
  padding: var(--space-sm) var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  box-shadow: var(--shadow-md);
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  flex: 1;
}

.nav-tab,
.nav-tab:link,
.nav-tab:visited {
  padding: var(--space-sm) var(--space-lg);
  color: var(--color-text-on-primary);
  text-decoration: none;
  display: inline-block;
  border-radius: var(--radius-xl);
  background: var(--color-nav-tab);
  font-weight: 500;
  transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.nav-tab:hover,
.nav-tab:focus,
.nav-tab:active {
  background: var(--color-nav-tab-hover);
  text-decoration: none;
  color: var(--color-text-on-primary);
  transform: translateY(-1px);
}

.nav-tab.active,
.nav-tab.active:link,
.nav-tab.active:visited,
.nav-tab.active:hover {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  font-weight: 600;
  box-shadow: 0 2px 8px var(--color-primary-glow);
}

/* Hamburger menu toggle */
.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--space-sm);
  width: 44px;
  height: 44px;
  position: relative;
}

.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  display: block;
  width: 24px;
  height: 3px;
  background: var(--color-text-on-primary);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
  position: absolute;
  left: 10px;
}

.nav-toggle-icon {
  top: 50%;
  transform: translateY(-50%);
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: '';
}

.nav-toggle-icon::before {
  top: -8px;
}

.nav-toggle-icon::after {
  top: 8px;
}

/* Mobile Navigation */
@media (max-width: 767px) {
  .main-nav {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-sm);
  }

  .nav-toggle {
    display: block;
    align-self: flex-end;
  }

  .nav-links {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: var(--space-xs);
    padding-top: var(--space-sm);
  }

  .main-nav.nav-open .nav-links {
    display: flex;
  }

  .nav-tab {
    width: 100%;
    text-align: center;
    padding: var(--space-md);
  }

  /* Hamburger animation when open */
  .main-nav.nav-open .nav-toggle-icon {
    background: transparent;
  }

  .main-nav.nav-open .nav-toggle-icon::before {
    top: 0;
    transform: rotate(45deg);
  }

  .main-nav.nav-open .nav-toggle-icon::after {
    top: 0;
    transform: rotate(-45deg);
  }
}

/* ==========================================================================
   Page Title
   ========================================================================== */

.pagetitle {
  margin-bottom: var(--space-lg);
}

.pagetitle h1 {
  font-size: clamp(1.75rem, 5vw, 3rem);
  color: var(--color-text-primary);
  margin: 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */

#footer {
  text-align: center;
  padding: var(--space-lg);
  margin-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

#footer img {
  max-width: 150px;
  height: auto;
  opacity: 0.8;
  transition: opacity var(--transition-fast);
}

#footer img:hover {
  opacity: 1;
}

@media (max-width: 575px) {
  #footer {
    padding: var(--space-md);
  }

  #footer img {
    max-width: 120px;
  }
}

/* ==========================================================================
   Theme Toggle
   ========================================================================== */

.theme-toggle {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--color-nav-bg);
  color: var(--color-text-on-primary);
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast), background-color var(--transition-fast);
  font-size: 20px;
}

.theme-toggle:hover {
  transform: scale(1.1);
}

.theme-toggle-icon::before {
  content: '\2600'; /* Sun */
}

html.dark-mode .theme-toggle-icon::before,
:root:not(.light-mode) .theme-toggle-icon::before {
  content: '\1F319'; /* Moon */
}

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .theme-toggle-icon::before {
    content: '\1F319'; /* Moon */
  }
}

html.light-mode .theme-toggle-icon::before {
  content: '\2600'; /* Sun */
}