:root {
  color-scheme: dark;
  --bg: #040611;
  --panel: rgba(8, 12, 29, 0.9);
  --panel-strong: #0b1025;
  --cyan: #62e7ff;
  --purple: #b56dff;
  --accent: #b56dff;
  --gold: #ffe267;
  --text: #f7f8ff;
  --muted: #aeb7d0;
  --line: rgba(98, 231, 255, 0.2);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  color: var(--text);
  background:
    radial-gradient(circle at 82% 8%, rgba(181,109,255,.22), transparent 30rem),
    radial-gradient(circle at 8% 42%, rgba(98,231,255,.16), transparent 34rem),
    linear-gradient(180deg, #060817, var(--bg));
  font: 15px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: inherit; }
button { color: inherit; font: inherit; }
.board-shell { width: min(1180px, calc(100% - 28px)); margin: 0 auto; }
.board-header { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--line); background: rgba(4,6,17,.78); backdrop-filter: blur(16px); }
.nav-row { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
/* Matches the Arcade and marketing headers: cyan wordmark, cyan strapline,
   cyan tabs. Only the header nav is restyled - the bare `nav a` rule below
   still serves every other nav on the board. */
.board-brand { display: flex; align-items: center; gap: 12px; color: var(--cyan); text-decoration: none; font-weight: 900; transition: color 160ms ease; }
.board-brand:hover { color: var(--purple); }
.board-brand img { width: 42px; height: 42px; object-fit: contain; }
.board-brand small { display: block; color: rgba(99, 230, 255, 0.72); font-weight: 650; }
nav { display: flex; gap: 18px; }
nav a { color: var(--muted); text-decoration: none; font-weight: 750; }
nav a:hover { color: var(--cyan); }

.board-header nav { gap: 6px; }
.board-header nav a {
  position: relative;
  padding: 8px 12px;
  border-radius: 9px;
  color: var(--cyan);
  font-weight: 700;
  transition: color 160ms ease, background-color 160ms ease;
}
.board-header nav a:hover { color: #a7f8ff; background: rgba(99, 230, 255, 0.12); }
.board-header nav a[aria-current="page"] { color: #c8fbff; background: rgba(99, 230, 255, 0.16); }
.board-header nav a[aria-current="page"]::after {
  position: absolute;
  right: 12px;
  bottom: 3px;
  left: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
  content: "";
}
.board-main { padding: 30px 0 56px; }
.leaderboard-hero { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; }
.eyebrow { color: var(--accent); font-size: .76rem; font-weight: 950; letter-spacing: .15em; text-transform: uppercase; }
h1 { max-width: none; width: 100%; margin: 8px 0 14px; font-size: clamp(3rem, 7.2vw, 6.8rem); line-height: .9; letter-spacing: -.065em; }
h1 span { color: transparent; background: linear-gradient(90deg, var(--cyan), var(--purple)); background-clip: text; }
.leaderboard-hero p { max-width: 760px; margin: 0; color: var(--muted); font-size: clamp(1rem, 2vw, 1.2rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.button { min-height: 46px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.04); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; }
.button.primary { color: #061116; border-color: transparent; background: linear-gradient(90deg, var(--cyan), #bff7ff); }
.live-card { display: flex; align-items: center; gap: 12px; min-width: 240px; padding: 17px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.live-card strong, .live-card small { display: block; }
.live-card small { color: var(--muted); }
.pulse { width: 12px; height: 12px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 8px rgba(98,231,255,.12), 0 0 24px var(--cyan); }
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: end; margin-top: 58px; }
.podium-card { position: relative; min-height: 150px; padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)); overflow: hidden; }
.podium-card::after { content: ""; position: absolute; inset: auto -20% -60% 20%; height: 120px; background: radial-gradient(circle, rgba(98,231,255,.2), transparent 65%); }
.podium-card.first { min-height: 190px; border-color: rgba(255,226,103,.45); transform: translateY(-18px); }
.podium-card.second { border-color: rgba(98,231,255,.34); }
.podium-card.third { border-color: rgba(181,109,255,.34); }
.rank { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #061116; background: var(--cyan); font-weight: 950; }
.first .rank { background: var(--gold); }
.third .rank { color: white; background: var(--purple); }
.podium-card strong { display: block; margin-top: 18px; font-size: 1.35rem; }
.podium-card b { color: var(--muted); font-size: 1rem; }
.ranking-panel { margin-top: 26px; padding: clamp(18px, 4vw, 32px); border: 1px solid var(--line); border-radius: 24px; background: var(--panel); box-shadow: 0 30px 100px rgba(0,0,0,.28); }
.panel-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.panel-heading h2 { margin: 4px 0 0; font-size: clamp(1.7rem, 4vw, 2.7rem); }
.source-label { color: var(--muted); }
.table-wrap { overflow-x: auto; margin-top: 18px; }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { padding: 15px 12px; border-bottom: 1px solid rgba(255,255,255,.08); text-align: left; }
th { color: var(--muted); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
th:nth-child(n+3), td:nth-child(n+3) { text-align: right; }
tbody tr:first-child td { color: var(--gold); }
tbody tr:hover { background: rgba(98,231,255,.035); }
.how-it-works { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.how-it-works article { padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: rgba(8,12,29,.7); }
.how-it-works span { color: var(--cyan); font-weight: 950; }
.how-it-works h2 { margin: 8px 0 4px; }
.how-it-works p { margin: 0; color: var(--muted); }
.board-footer { border-top: 1px solid var(--line); color: var(--muted); }
.board-footer .board-shell { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }

.multi-game-grid {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

/* One clean Arcade rail: controls, status, and boards are sections of the same
   system instead of a stack of unrelated floating cards. */
.leaderboard-system { margin-top: 24px; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--panel); box-shadow: 0 30px 100px rgba(0,0,0,.28); }
.leaderboard-system .board-game-picker { margin: 0; border: 0; border-radius: 0; border-bottom: 1px solid var(--line); background: transparent; }
.leaderboard-system > .board-copy { margin: 0; padding: 10px 20px 0; }
.leaderboard-system .ranking-panel { margin: 0; padding: 22px 20px 14px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.leaderboard-system .multi-game-grid { display: block; margin: 0; }

/* Last month's number one on each level. A section of the same rail as the live
   boards, not a floating card: same flat treatment, separated by the rail's
   own divider. Cards are a plain auto-fit grid so ten levels wrap sensibly
   without a breakpoint per count. */
.leaderboard-system .last-month-panel { margin: 0; padding: 22px 20px; border-top: 1px solid var(--line); background: transparent; }
.last-month-grid { display: grid; gap: 12px; margin-top: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.last-month-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(98, 231, 255, .05);
}
.last-month-card .eyebrow { font-size: .7rem; }
.last-month-holder { min-width: 0; }
.last-month-value { color: var(--cyan); font-size: 1.25rem; font-variant-numeric: tabular-nums; }

.leaderboard-system .game-board { padding: 20px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.leaderboard-system .game-board + .game-board { margin-top: 0; }
@media(max-width:820px){.leaderboard-system{margin-top:18px;border-radius:18px}.leaderboard-system .ranking-panel,.leaderboard-system .game-board{padding:16px}}

.game-board {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background: rgba(8, 12, 29, 0.74);
}

.game-board h3 {
  margin: 0;
  font-size: 1.15rem;
}

.game-board-meta {
  margin: 6px 0 14px;
  color: var(--muted);
  font-size: 0.9rem;
}

.game-board-empty {
  margin: 0;
  padding: 14px 6px;
  color: var(--muted);
}

.game-table-wrap { overflow-x: auto; }

@media (max-width: 820px) {
  /* The leaderboard is reached from the arcade and links back to it; hiding
     the nav on a phone left no way out except the browser's back button. */
  nav {
    width: 100%;
    gap: 14px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    font-size: 0.86rem;
  }
  nav::-webkit-scrollbar { display: none; }
  nav a { flex: 0 0 auto; }
  .nav-row { align-items: flex-start; flex-direction: column; padding: 10px 0; gap: 8px; }
  .leaderboard-hero { grid-template-columns: 1fr; }
  .live-card { width: 100%; }
  .podium { grid-template-columns: 1fr; align-items: stretch; }
  .podium-card.first { order: -1; transform: none; }
  .how-it-works { grid-template-columns: 1fr; }
}


/* Multi-game leaderboard registry + phone layout */
.board-game-picker{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-top:34px;padding:18px 20px;border:1px solid var(--line);border-radius:20px;background:rgba(8,12,29,.64)}.board-game-picker h2{margin:3px 0 0}.game-tabs{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}.game-tab{min-height:42px;padding:0 15px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.035);color:var(--muted);font:inherit;font-weight:850;cursor:pointer}.game-tab.active{color:#061116;background:linear-gradient(90deg,var(--cyan),#bff7ff);border-color:transparent}
@media (max-width: 1200px){
  .board-game-picker{align-items:flex-start;flex-wrap:wrap}
}
@media(max-width:820px){.board-shell{width:min(100% - 18px,1180px)}.board-header{position:relative}.nav-row{min-height:62px}.board-main{padding:38px 0 52px}.leaderboard-hero{gap:18px}.leaderboard-hero h1{font-size:clamp(2.7rem,14vw,5rem)}.hero-actions{display:grid;grid-template-columns:1fr 1fr}.hero-actions>*{width:100%}.board-game-picker{align-items:flex-start;flex-direction:column;margin-top:24px;padding:15px}.game-tabs{width:100%;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.game-tabs::-webkit-scrollbar{display:none}.game-tab{flex:0 0 auto}.podium{margin-top:28px}.podium-card{min-height:110px}.podium-card.first{min-height:125px}.ranking-panel{padding:16px;border-radius:18px}.panel-heading{align-items:flex-start;flex-direction:column}.table-wrap{margin-left:-16px;margin-right:-16px;padding:0 16px}.board-footer .board-shell{min-height:88px;align-items:flex-start;flex-direction:column;justify-content:center}}
@media(max-width:430px){.hero-actions{grid-template-columns:1fr}.live-card{min-width:0}.board-brand small{font-size:.68rem}.podium{gap:8px}.podium-card{padding:18px}}
.board-game-picker{flex-wrap:wrap}
.board-metric-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;width:100%;padding-top:14px;border-top:1px solid var(--line)}.board-metric-row .eyebrow{margin:0;white-space:nowrap}.metric-tabs{flex:1;justify-content:flex-start}.metric-tabs .game-tab{min-height:36px;padding:0 13px;font-size:.86rem}
.board-summary{width:100%;margin:0;color:var(--muted);font-size:.9rem}.board-summary:empty{display:none}
.board-copy{margin: 10px 0 0;color: var(--muted);font-size: .9rem;line-height: 1.35}
.board-copy:empty{display:none}
.player-cell{
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: min(360px, 48vw);
  width: min(360px, 48vw);
  min-width: 0;
}

.player-cell .rider-identity { min-width: 0; }

.player-cell .rider-name { max-width: 100%; }

.player-cell .rider-bio { max-width: 32ch; }

/* Player identity: name on top, the rider's own bio underneath. */
.player-name{font-weight:700}
.player-bio{color:var(--muted);font-size:.8rem;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}
.player-bio.muted{opacity:.72;font-style:italic}
tbody tr:first-child td .player-bio{color:rgba(255,226,103,.72)}
@media(max-width:820px){.board-metric-row{padding-top:12px}.metric-tabs{width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.metric-tabs::-webkit-scrollbar{display:none}}

/* ---------------------------------------------------------------------------
   Shared brand texture

   The Infin8 nebula screened over every page, so the site and the audio plugin
   artwork share one surface. It is a fixed layer behind all content rather than
   a body background so it does not scroll, repeat, or shift as sections change
   height. `screen` lifts the dark page toward the texture's magentas without
   ever darkening text, and the low opacity keeps body copy at full contrast.
   --------------------------------------------------------------------------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("../../assets/infin8-texture.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  opacity: 0.16;
}

/* Reduced transparency preferences and print both want the texture gone. */
@media (prefers-reduced-transparency: reduce) {
  body::before { opacity: 0.07; }
}
@media print {
  body::before { display: none; }
}

/* ---------------------------------------------------------------------------
   Phone tap targets

   Standalone links (footer navigation, "read more" style links, card links)
   render at their text height, which is around 23px. That is well under a
   comfortable thumb target, so on phones they get a minimum height and become
   inline-flex so the extra height is actually tappable rather than just extra
   line box. Links inside running paragraphs are deliberately left alone:
   padding them out would break the paragraph's rhythm.
   --------------------------------------------------------------------------- */
@media (max-width: 860px) and (pointer: coarse) {
  .text-link,
  .contact-link,
  .side-link,
  footer a,
  .board-footer a,
  .arcade-footer a,
  nav a,
  .arcade-links a,
  .board-header nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}