/* ============================================================
     CONFIG IS IN THE SCRIPT BLOCK AT THE BOTTOM — edit there only.
     ============================================================ */

  :root {
    --navy:       #010080;  /* shield navy */
    --cobalt:     #0055D4;  /* shield bright blue */
    --orange:     #F86808;  /* shield orange */
    --red:        #E4002B;  /* shield red accent */
    --white:      #ffffff;

    /* Semantic names reused throughout the stylesheet */
    --ink:        #0a0a4a;            /* deep navy text */
    --parchment:  #eef1fb;            /* page background (cool off-white) */
    --parchment2: #dde3f5;            /* subtle panel tint */
    --blood:      var(--navy);        /* primary brand fill (was dark red) */
    --blood-lite: var(--cobalt);      /* lighter primary */
    --gold:       var(--orange);      /* accent */
    --gold-lite:  #ffa04d;            /* lighter accent */
    --steel:      #5a6275;            /* muted slate-blue for secondary text */
    --green:      #2f5233;
    --shadow:     rgba(1,0,80,.28);
    --row-even:   rgba(255,255,255,.55);
    --row-odd:    rgba(0,85,212,.06);
  }

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

  html { scroll-behavior: smooth; }

  body {
    font-family: 'Spectral', Georgia, serif;
    color: var(--ink);
    background-color: var(--parchment);
    background-image:
      radial-gradient(circle at 12% 12%, rgba(0,85,212,.14), transparent 42%),
      radial-gradient(circle at 90% 6%, rgba(248,104,8,.12), transparent 38%),
      radial-gradient(circle at 50% 104%, rgba(1,0,128,.10), transparent 52%);
    min-height: 100vh;
    line-height: 1.5;
  }

  html, body { overflow-x: hidden; }

  .wrap { max-width: 920px; margin: 0 auto; padding: 0 20px 80px; }

  /* ---------- Header ---------- */
  header {
    position: relative;
    padding: 28px 20px 22px;
    text-align: center;
    overflow: hidden;
  }
  .langtoggle {
    position: absolute; top: 16px; right: 18px;
    display: flex; gap: 4px; z-index: 5;
    align-items: center;
  }
  .series-info-wrap {
    position: absolute; top: 16px; left: 18px;
    display: inline-flex;
    align-items: center;
    z-index: 5;
  }
  .flag-btn {
    width: 34px; height: 23px; padding: 0; cursor: pointer;
    border: 1.5px solid rgba(1,0,80,.3); border-radius: 4px;
    overflow: hidden; background: transparent;
    opacity: .5; transition: all .15s ease;
    display: inline-flex;
  }
  .flag-btn svg { display: block; width: 100%; height: 100%; }
  .flag-btn:hover { opacity: .85; }
  .flag-btn.active {
    opacity: 1; border-color: var(--gold);
    box-shadow: 0 0 0 2px var(--gold-lite), 2px 2px 0 var(--shadow);
  }
  header::after {
    content: "";
    position: absolute; left: 50%; bottom: 18px;
    width: 240px; height: 4px; transform: translateX(-50%); border-radius: 2px;
    background: linear-gradient(90deg, var(--gold-lite), var(--orange) 50%, var(--gold-lite));
    box-shadow: 0 1px 0 rgba(1,0,80,.15);
  }
  .crest-logo {
    display: block; margin: 0 auto 10px;
    width: clamp(60px, 10vw, 84px); height: auto;
    filter: drop-shadow(0 6px 14px rgba(1,0,80,.35));
    transition: transform .25s cubic-bezier(.34,1.56,.64,1);
  }
  .crest-logo:hover { transform: rotate(-3deg) scale(1.05); }
  h1.series-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(34px, 6.5vw, 72px);
    line-height: .95;
    letter-spacing: .03em;
    color: var(--navy);
    text-shadow: 2px 2px 0 var(--white), 3px 3px 0 var(--cobalt), 5px 5px 0 var(--shadow);
  }
  .tagline {
    font-style: italic;
    font-size: clamp(15px, 2.4vw, 19px);
    color: var(--steel);
    margin-top: 10px;
  }
  .series-info-btn {
    border: 1px solid rgba(1,0,80,.2);
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    color: var(--navy);
    cursor: pointer;
    font: inherit;
    padding: 8px 14px;
    transition: all .16s ease;
  }
  .series-info-btn:hover {
    border-color: var(--cobalt);
    color: var(--cobalt);
    background: rgba(0,85,212,.08);
  }
  .series-info-backdrop {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(1,0,80,.48); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
  }
  .series-info-backdrop[hidden] { display: none !important; }
  .series-info-modal {
    width: min(720px, 100%); max-height: min(86vh, 760px);
    overflow: auto; background: var(--parchment); border-radius: 14px;
    box-shadow: 0 24px 70px rgba(1,0,80,.28); border: 1px solid rgba(1,0,80,.14);
    padding: 24px 24px 26px; position: relative;
  }
  .series-info-close {
    position: absolute; right: 12px; top: 10px; border: 0; background: transparent;
    color: var(--navy); font-size: 28px; cursor: pointer; line-height: 1;
  }
  .series-info-title {
    font-family: 'Bebas Neue', sans-serif; font-size: clamp(24px, 4vw, 32px);
    letter-spacing: .04em; color: var(--navy); margin-bottom: 12px;
  }
  .series-info-body {
    color: var(--ink);
    display: grid; gap: 12px;
    font-size: 16px;
  }
  .series-info-body p { line-height: 1.6; }
  .series-info-body strong { color: var(--navy); }

  /* ---------- Tabs / nav ---------- */
  nav.viewtabs {
    display: flex; gap: 8px; justify-content: center;
    flex-wrap: wrap; margin: 6px 0 18px;
  }
  .vtab {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 19px; letter-spacing: .12em;
    padding: 9px 24px; cursor: pointer;
    background: rgba(255,255,255,.5); color: var(--navy);
    border: 2px solid rgba(1,0,80,.18); border-radius: 999px;
    transition: all .18s ease;
  }
  .vtab:hover { color: var(--cobalt); border-color: var(--cobalt); }
  .vtab.active {
    color: var(--white); background: var(--navy);
    border-color: var(--navy);
    box-shadow: 0 3px 0 var(--orange), 0 6px 12px -4px var(--shadow);
  }

  /* ---------- Upcoming tournament banner (rotator) ---------- */
  .upcoming-rotator {
    display: flex; align-items: stretch; gap: 0;
    max-width: 760px; margin: 0 auto 14px;
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,239,222,.95));
    border: 1px solid rgba(248,104,8,.22); border-radius: 999px;
    overflow: hidden;
    box-shadow: 0 6px 24px -12px rgba(248,104,8,.55), 0 4px 14px -8px var(--shadow);
  }
  .upcoming-rotator:hover {
    box-shadow: 0 10px 30px -12px rgba(248,104,8,.55), 0 4px 14px -8px var(--shadow);
  }
  .up-label {
    flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
    font-family: 'Bebas Neue', sans-serif; letter-spacing: .12em; font-size: 14px;
    padding: 9px 16px; color: var(--white);
    background: var(--orange); white-space: nowrap;
  }
  .up-label::before { content: "🏆"; font-size: 13px; }

  .up-rotate-viewport { flex: 1 1 auto; position: relative; overflow: hidden; }
  .up-rotate-track { position: relative; height: 100%; min-height: 40px; }
  .up-item {
    position: absolute; inset: 0;
    display: flex; align-items: center;
    padding: 0 6px; white-space: nowrap;
    opacity: 0; transition: opacity .6s ease; pointer-events: none;
  }
  .up-item.active { opacity: 1; pointer-events: auto; }

  .up-next {
    flex: 0 0 auto; cursor: pointer;
    width: 42px; border: none; background: transparent;
    color: var(--cobalt); font-size: 26px; line-height: 1;
    transition: all .15s ease;
    border-left: 1px solid rgba(248,104,8,.2);
  }
  .up-next:hover { color: var(--white); background: var(--orange); }

  /* Shared item appearance */
  .up-entry {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px; text-decoration: none; color: var(--navy);
    font-size: 15px; transition: color .15s ease;
  }
  .up-entry:hover { color: var(--orange); }
  .up-entry .up-name { font-weight: 700; }
  .up-entry .up-date { font-style: italic; color: var(--steel); font-size: 14px; }
  .up-entry .up-sep { color: var(--cobalt); opacity: .5; }

  @media (max-width: 680px) {
    .up-label { padding: 8px 12px; font-size: 13px; }
    .up-entry { font-size: 14px; padding: 8px 14px; }
    .up-next { width: 38px; font-size: 22px; }
  }

  /* ---------- Panels ---------- */
  .panel { display: none; animation: rise .4s ease both; }
  .panel.show { display: block; }
  @keyframes rise { from { opacity: 0; transform: translateY(12px);} to {opacity:1; transform:none;} }

  .panel-head {
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; margin-bottom: 16px;
  }
  .panel-head h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(28px, 5vw, 44px);
    letter-spacing: .04em; color: var(--ink);
  }

  /* ---------- Results layout: sidebar + main ---------- */
  .results-layout { display: flex; gap: 26px; align-items: flex-start; }
  .sidebar-wrap { flex: 0 0 234px; width: 234px; }
  .sidebar {
    display: flex; flex-direction: column; gap: 6px;
    overflow: hidden;
    position: relative;
    transition: max-height .3s ease;
  }
  /* Collapsed: clip to roughly the table height; a fade hints at more. */
  .sidebar.collapsed { /* max-height set inline from JS to match table */ }
  .sidebar.collapsed::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46px;
    background: linear-gradient(transparent, var(--parchment));
    pointer-events: none;
  }
  .show-more {
    width: 100%; margin-top: 6px;
    font-family: 'Bebas Neue', sans-serif; letter-spacing: .1em; font-size: 14px;
    padding: 7px; cursor: pointer;
    background: transparent; color: var(--navy);
    border: 1px solid rgba(1,0,80,.28); border-radius: 6px;
    transition: all .15s ease;
  }
  .show-more:hover { background: rgba(0,85,212,.1); border-color: var(--cobalt); }
  .retry {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 120px; margin-top: 14px; padding: 10px 16px;
    border: 1px solid rgba(0,85,212,.28); border-radius: 8px;
    background: rgba(255,255,255,.95); color: var(--navy);
    cursor: pointer; font-size: 14px; transition: all .15s ease;
  }
  .retry:hover { background: rgba(0,85,212,.08); border-color: var(--cobalt); }
  .show-future { margin-top: 0; margin-bottom: 6px; }
  .show-future.on { background: rgba(0,85,212,.12); }
  .coach-name-btn {
    border: 0; background: transparent; padding: 0; color: inherit;
    font: inherit; font-weight: 600; text-align: left; cursor: pointer;
    text-decoration: underline; text-decoration-color: rgba(0,85,212,.35);
    text-underline-offset: 2px;
  }
  .coach-name-btn:hover { color: var(--cobalt); text-decoration-color: var(--cobalt); }
  .results-main { flex: 1 1 auto; min-width: 0; }
  .coach-modal-backdrop {
    position: fixed; inset: 0; z-index: 50;
    background: rgba(1,0,80,.48); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
  }
  .coach-modal-backdrop[hidden] { display: none !important; }
  .coach-modal {
    width: min(720px, 100%); max-height: min(86vh, 760px);
    overflow: auto; background: var(--parchment); border-radius: 14px;
    box-shadow: 0 24px 70px rgba(1,0,80,.28); border: 1px solid rgba(1,0,80,.14);
    padding: 22px 24px 24px; position: relative;
  }
  .coach-modal-close {
    position: absolute; right: 12px; top: 10px; border: 0; background: transparent;
    color: var(--navy); font-size: 28px; cursor: pointer; line-height: 1;
  }
  .coach-modal-header { margin-bottom: 16px; }
  .coach-modal-title {
    font-family: 'Bebas Neue', sans-serif; font-size: clamp(24px, 4vw, 32px);
    letter-spacing: .04em; color: var(--navy); margin-bottom: 4px;
  }
  .coach-modal-subtitle { color: var(--steel); font-size: 15px; }
  .coach-modal-summary {
    display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px;
  }
  .coach-modal-metric {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: 999px; background: rgba(255,255,255,.72);
    border: 1px solid rgba(1,0,80,.1); color: var(--navy); font-size: 14px;
  }
  .coach-modal-metric-label { color: var(--steel); font-size: 13px; }
  .coach-modal-metric strong { font-weight: 700; color: var(--navy); }
  .coach-modal-naf {
    margin-top: 10px; display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: 999px; background: rgba(0,85,212,.08);
    color: var(--navy); font-size: 14px;
    flex-wrap: wrap;
  }
  .coach-modal-naf a { color: var(--cobalt); font-weight: 600; text-decoration: none; }
  .coach-modal-naf a:hover { color: var(--orange); }
  .coach-modal-naf-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.05em; height: 1.05em; margin-left: .25em;
    border-radius: 50%; background: rgba(0,85,212,.12); color: var(--cobalt);
    font-size: .95em; line-height: 1;
  }
  .coach-modal-list { display: grid; gap: 10px; }
  .coach-modal-item {
    display: flex; justify-content: space-between; gap: 14px; align-items: center;
    padding: 12px 13px; border-radius: 10px; border: 1px solid rgba(1,0,80,.12);
    background: rgba(255,255,255,.72);
  }
  .coach-modal-item.counting {
    border-color: rgba(248,104,8,.28); box-shadow: inset 3px 0 0 var(--orange);
    background: linear-gradient(90deg, rgba(248,104,8,.12), rgba(255,255,255,.72));
  }
  .coach-modal-item.reserve {
    border-color: rgba(47,82,51,.22); box-shadow: inset 3px 0 0 var(--green);
    background: linear-gradient(90deg, rgba(47,82,51,.09), rgba(255,255,255,.72));
  }
  .coach-modal-item.historic { opacity: .82; }
  .coach-modal-item-name { font-weight: 700; color: var(--navy); }
  .coach-modal-item-date { font-size: 13px; color: var(--steel); margin-top: 2px; }
  .coach-modal-item-meta { text-align: right; min-width: 140px; }
  .coach-modal-points { font-weight: 700; color: var(--navy); }
  .coach-modal-status {
    margin-top: 4px; display: inline-block; padding: 4px 8px; border-radius: 999px;
    font-size: 12px; font-weight: 700; letter-spacing: .03em;
  }
  .coach-modal-status.active { background: rgba(0,85,212,.12); color: var(--cobalt); }
  .coach-modal-status.reserve { background: rgba(47,82,51,.12); color: var(--green); }
  .coach-modal-status.historic { background: rgba(1,0,80,.08); color: var(--steel); }
  #results-host { position: relative; }
  #results-host.loading .tablecard {
    filter: grayscale(.35) brightness(1.05);
    opacity: .75;
  }
  .loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(1px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 1;
  }
  .loading-overlay .state {
    padding: 0;
    background: transparent;
    color: var(--ink);
  }
.standings-meta {
    font-style: italic; color: var(--steel); font-size: 15px;
    text-align: center; margin-bottom: 14px;
  }
  .standings-meta b { font-style: normal; color: var(--ink); }
  /* Caption inside the tablecard (tournament name + date) */
  .tablecard-caption {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; padding: 12px 18px 10px;
    border-bottom: 1px solid rgba(1,0,80,.10);
  }
  .tablecard-caption-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(18px, 3vw, 26px);
    letter-spacing: .04em; color: var(--navy); line-height: 1;
  }
  .tablecard-caption-date {
    font-style: italic; color: var(--steel); font-size: 14px; white-space: nowrap;
  }

  .tourney-item {
    text-align: left; cursor: pointer; width: 100%;
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(1,0,80,.12);
    border-left: 3px solid transparent;
    border-radius: 6px; padding: 10px 12px;
    transition: all .15s ease;
    display: flex; flex-direction: column; gap: 3px;
  }
  .tourney-item:hover { background: rgba(0,85,212,.12); border-left-color: var(--orange); }
  .tourney-item.disabled { cursor: default; }
  .tourney-item.disabled .ti-text,
  .tourney-item.disabled .ti-date { opacity: .45; }
  .tourney-item.disabled .ti-flag { opacity: 1; filter: none; }
  .tourney-item.disabled:hover {
    background: rgba(255,255,255,.55); border-left-color: transparent;
  }
  .tourney-item.active {
    background: var(--blood); border-left-color: var(--gold-lite);
    box-shadow: 2px 2px 0 var(--shadow);
  }
  .tourney-item.active .ti-name,
  .tourney-item.active .ti-date { color: var(--parchment); }
  .ti-name {
    font-weight: 600; font-size: 15px; color: var(--ink);
    display: flex; align-items: center; gap: 6px; line-height: 1.25;
  }
  .ti-text { flex: 1 1 auto; }
  .ti-date { font-size: 13px; color: var(--steel); font-style: italic; }
  .ti-flag {
    flex: 0 0 auto; font-size: 13px; cursor: help; margin-left: auto;
    filter: saturate(.9);
  }

  /* Legend — fixed below the list, always visible */
  .sidebar-legend {
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid rgba(1,0,80,.16);
    font-size: 12px; color: var(--steel); line-height: 1.7;
  }
  .sidebar-legend span { display: block; }

  /* Mobile tournament picker — hidden on desktop */
  .mobile-picker { display: none; }
  .sidebar-collapsible { display: block; }

  @media (max-width: 680px) {
    .results-layout { flex-direction: column; min-width: 0; }
    .results-layout > * { min-width: 0; max-width: 100%; }
    .sidebar-wrap { flex-basis: auto; width: 100%; margin-bottom: 8px; }
    .sidebar.collapsed { max-height: none !important; }
    .sidebar.collapsed::after { display: none; }
    .show-more { display: none; }
  .retry {
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: 14px; padding: 10px 16px;
    border: 1px solid rgba(0,85,212,.28); border-radius: 8px;
    background: rgba(255,255,255,.95); color: var(--navy);
    cursor: pointer; font-size: 14px; transition: all .15s ease;
  }
  .retry:hover { background: rgba(0,85,212,.08); border-color: var(--cobalt); }

    /* Show the picker button; hide the list until opened */
    .mobile-picker {
      display: flex; align-items: center; justify-content: space-between;
      width: 100%; cursor: pointer;
      font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: .08em;
      padding: 12px 16px; color: var(--white);
      background: var(--navy); border: none; border-radius: 8px;
      box-shadow: 0 3px 0 var(--orange), 0 6px 12px -4px var(--shadow);
    }
    .mp-caret { transition: transform .2s ease; }
    .mobile-picker.open .mp-caret { transform: rotate(180deg); }
    .sidebar-collapsible {
      display: none;
      margin-top: 10px;
      animation: rise .25s ease both;
    }
    .sidebar-wrap.open .sidebar-collapsible { display: block; }

    /* On mobile, hide NAF number (both pages) and Team (results) so the
       tables fit without horizontal scrolling. */
    .col-nafnr, .col-nafnumber, .col-team { display: none; }
    .results-main table,
    #standings-host table { min-width: 0; }
    .tablecard-caption { padding: 10px 14px 8px; }
    .tablecard-caption-name { font-size: clamp(16px, 5vw, 22px); }
  }

  /* ---------- Table ---------- */
  .tablecard {
    background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.45));
    border: 1px solid rgba(1,0,80,.14);
    border-radius: 8px;
    box-shadow: 0 14px 38px -16px var(--shadow);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table { width: 100%; border-collapse: collapse; }
  tr.medal td.pos, td.pos { white-space: nowrap; }
  thead th {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px; letter-spacing: .14em; text-align: left;
    padding: 14px 18px; color: var(--white);
    background: linear-gradient(180deg, var(--navy), #00006a);
    border-bottom: 3px solid var(--orange);
  }
  thead th.num { text-align: center; width: 64px; }
  tbody td {
    padding: 13px 18px; border-top: 1px solid rgba(1,0,80,.07);
    font-size: 16px;
  }
  tbody tr:nth-child(even) { background: var(--row-even); }
  tbody tr:nth-child(odd)  { background: var(--row-odd); }
  tbody tr:hover { background: rgba(0,85,212,.14); }
  td.pos {
    font-family: 'JetBrains Mono', monospace; font-weight: 600;
    text-align: center; color: var(--cobalt);
  }
  td.naf { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--steel); }
  a.naf-link {
    color: var(--cobalt); text-decoration: none;
    border-bottom: 1px dotted var(--cobalt); transition: all .12s ease;
  }
  a.naf-link:hover { color: var(--orange); border-bottom-color: var(--orange); }
    span.risk-icon {
      display: inline-block; margin-left: 6px; cursor: help;
      font-size: 14px; opacity: 0.8; transition: opacity .12s ease;
    }
    span.risk-icon:hover { opacity: 1; }
  td.name { font-weight: 600; color: var(--navy); }
  td.team { font-style: italic; color: var(--steel); }

  /* Top-4 highlight (standings + results) */
  tr.medal td.pos { color: var(--ink); font-weight: 700; position: relative; }
  tr.rank1 td.pos::before { content:"🥇"; margin-right:4px; }
  tr.rank2 td.pos::before { content:"🥈"; margin-right:4px; }
  tr.rank3 td.pos::before { content:"🥉"; margin-right:4px; }
  tr.rank4 td.pos::before { content:"🐤"; margin-right:4px; }
  /* Wooden spoon — last place */
  tr.spoon td.pos { position: relative; font-weight: 700; }
  tr.spoon td.pos::before {
    content:"🥄"; margin-right:4px; display: inline-block;
    filter: sepia(1) saturate(1.6) hue-rotate(-12deg) brightness(.9);
  }
  tr.spoon { background: linear-gradient(90deg, rgba(120,90,50,.12), transparent) !important; }
  /* Row tints leaning to orange / red / white / blue, softened for the page */
  tr.rank2 { background: linear-gradient(90deg, rgba(228,0,43,.16), transparent) !important; }
  tr.rank3 { background: linear-gradient(90deg, rgba(255,255,255,.9), rgba(255,255,255,.2)) !important; }
  tr.rank4 { background: linear-gradient(90deg, rgba(0,85,212,.18), transparent) !important; }

  /* Champion row — stands out the most */
  tr.rank1 {
    background: linear-gradient(90deg, rgba(248,104,8,.42), rgba(255,160,77,.18) 55%, transparent) !important;
    box-shadow: inset 4px 0 0 var(--orange), inset 0 0 22px rgba(248,104,8,.12);
  }
  tr.rank1 td { padding-top: 17px; padding-bottom: 17px; }
  tr.rank1 td.pos {
    font-size: 19px; color: var(--orange);
  }
  tr.rank1 td.pos::before { font-size: 20px; margin-right: 5px; }
  tr.rank1 td.name {
    font-size: 17px; font-weight: 800; letter-spacing: .01em;
    color: var(--navy);
  }

  /* ---------- States ---------- */
  .state {
    text-align: center; padding: 60px 20px; color: var(--steel);
    font-style: italic; font-size: 17px;
  }
  .state.err {
    color: var(--red); font-style: normal;
    background: rgba(228,0,43,.07); border: 1px dashed var(--red);
    border-radius: 6px;
  }
  .state .small { display:block; font-size: 13px; font-style: italic; margin-top: 10px; color: var(--steel); }
  .spinner {
    width: 34px; height: 34px; margin: 0 auto 18px;
    border: 3px solid rgba(0,85,212,.25); border-top-color: var(--orange);
    border-radius: 50%; animation: spin 1s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg);} }

  footer {
    text-align: center; margin-top: 50px; padding-top: 22px;
    border-top: 1px solid rgba(1,0,80,.15);
    font-size: 13px; color: var(--steel); font-style: italic;
  }
  footer a { color: var(--cobalt); }
  .footer-action {
    margin-left: 10px; padding: 0; border: none;
    background: transparent; color: var(--cobalt);
    cursor: pointer; font: inherit; text-decoration: underline;
  }
  .footer-action:hover { color: var(--navy); }
  .footer-status {
    margin-left: 12px; color: var(--steel); font-size: 13px;
  }