/* ROTK Tracker: shared stylesheet. Mirrors rotk.app's look: dark, square, thin 1px lines,
   Barlow Condensed uppercase headlines, red only for signal. Every class in the
   notes/layout.html contract is defined here; page-specific extras live in /css/<page>.css.

   Sections:
     01 Fonts          02 Tokens        03 Base & reset   04 Type
     05 Header & nav   06 Main & wrap   07 Footer         08 Blocks (cards, stats, grids, notices, tags)
     09 Controls       10 Tables        11 Events         12 Charts
     13 States         14 Motion        15 Responsive
*/

/* ===== 01 Fonts (self-hosted latin subsets, OFL; see /fonts/LICENSE.txt) ===== */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/barlow-condensed-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/barlow-condensed-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/barlow-condensed-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter ships from Google Fonts as one variable file (wght axis 100-900); it covers 400/500/600. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/inter.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Michroma';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/michroma-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== 02 Tokens (read from rotk.app's stylesheet on 2026-09-30) ===== */
:root {
  color-scheme: dark;
  --ink: #090909;
  --surface: #10100f;
  --surface-2: #171716;
  --paper: #eeece4;
  --paper-dim: #c8c4ba;
  --muted: #96948d;
  --line: rgba(238, 236, 228, .16);
  --line-strong: rgba(238, 236, 228, .31);
  --signal: #ee0101;
  --signal-dark: #b40000;
  --gold: #d8b45a;
  --silver: #b9bcc0;
  --bronze: #b0754a;
  --live: #23a559;
  --kick: #4ed12a;                 /* Kick's #53fc18, toned down for a dark surface */
  --header-bg: rgba(9, 9, 9, .92);
  --header-h: 3.75rem;             /* sticky header height incl. its 1px line; sticky page rows sit below it (circuit.css) */
  --footer-bg: #070707;
  --input-bg: #131312;
  --gutter: clamp(1rem, 4vw, 4.75rem);   /* 16px on a 375px phone, 76px on a wide desktop */
  --wrap: 1200px;
  --card-pad: 1.25rem;
  --font-display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', Impact, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-wordmark: 'Michroma', 'Eurostile', 'Bank Gothic', 'Orbitron', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;
  --eyebrow-size: 12.5px;
  --eyebrow-track: 1.9px;
}

/* ===== 03 Base & reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--paper-dim);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.65;
  overflow-x: hidden;              /* belt and braces: nothing may widen the page on a phone */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--paper); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--paper); }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
li { margin: .25rem 0; }
strong, b { color: var(--paper); font-weight: 600; }
code, kbd { font-family: var(--font-mono); font-size: .92em; color: var(--paper); }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--signal); color: #fff; }
:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
::placeholder { color: var(--muted); opacity: 1; }
[hidden] { display: none !important; }

/* Headings fall back to the display face even without .headline. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.3px;
  line-height: 1.05;
  color: var(--paper);
  margin: 0 0 .75rem;
}
h3 { font-size: 22px; }
h4 { font-size: 18px; letter-spacing: 0; }

/* ===== 04 Type ===== */
.eyebrow {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--eyebrow-size);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-track);
  color: var(--muted);
  margin: 0 0 .5rem;
}
.eyebrow.signal, .signal { color: var(--signal); }
.headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: -.3px;
  color: var(--paper);
  margin: 0;
  text-wrap: balance;
}
h1.headline { font-size: clamp(2rem, 1.5rem + 2.5vw, 2.75rem); }
.headline.hero { font-size: clamp(2.5rem, 6vw, 5rem); line-height: .95; letter-spacing: -.02em; }
.lead {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--paper-dim);
  max-width: 62ch;
  margin: .6rem 0 0;
}
.headline.hero + .lead { font-size: 18px; margin-top: 1rem; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; line-height: 1.5; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num, .stat-num, .countdown, .rank { font-variant-numeric: tabular-nums; }

/* ===== 05 Header & nav ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 58px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--paper);
  text-decoration: none;
  flex: none;
}
.brand-mark { display: block; width: auto; height: 36px; }   /* logo.svg is cropped tight (54x42) */
.brand-name {
  font-family: var(--font-wordmark);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}
.brand-name span { color: var(--muted); }
.nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: nowrap;
  min-width: 0;
}
.nav a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--paper-dim);
  text-decoration: none;
  white-space: nowrap;
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.nav a:hover { color: var(--paper); }
.nav a.active { color: var(--paper); border-bottom-color: var(--signal); }
.nav { margin-left: auto; }   /* nav + language button sit together on the right */
.nav a.nav-ext { display: inline-flex; align-items: center; gap: .3rem; text-transform: none; letter-spacing: .03em; }
.nav-ext svg { opacity: .7; }

/* Language switcher (button + menu; wired in common.js) and the one-time "this page exists in …" bar */
.lang { position: relative; flex: none; }
.lang-btn {
  display: inline-flex; align-items: center; gap: .35rem; height: 32px; padding: 0 .55rem;
  background: transparent; color: var(--paper-dim); border: 1px solid var(--line); border-radius: 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: .08em;
}
.lang-btn:hover, .lang-btn[aria-expanded="true"] { color: var(--paper); border-color: var(--line-strong); }
.lang-caret { transition: transform .15s; }
.lang-btn[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 190px; margin: 0; padding: .3rem 0;
  list-style: none; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
}
.lang-menu a { display: flex; align-items: center; gap: .6rem; padding: .5rem .9rem; color: var(--paper-dim); text-decoration: none; font-size: 14px; }
.lang-menu a:hover, .lang-menu a:focus-visible { background: rgba(238, 236, 228, .06); color: var(--paper); }
.lang-menu a[aria-current] { color: var(--paper); box-shadow: inset 2px 0 0 var(--signal); }
.lang-menu .lang-code { width: 1.9em; font-family: var(--font-display); font-weight: 600; letter-spacing: .08em; color: var(--muted); }
.lang-offer { background: var(--surface); border-bottom: 1px solid var(--line); font-size: 14px; }
.lang-offer .wrap { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; min-height: 46px; padding-top: .4rem; padding-bottom: .4rem; }
.lang-offer p { margin: 0; color: var(--paper-dim); }
.lang-offer .lang-offer-x { margin-left: auto; background: none; border: 0; padding: .25rem .4rem; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.lang-offer .lang-offer-x:hover { color: var(--paper); }

/* ===== 06 Main & wrap ===== */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.site-main { flex: 1 0 auto; padding: 2rem 0 3rem; }
.section { padding: 2.25rem 0 0; }
.section:first-child { padding-top: 0; }
.section + .section { margin-top: 2.25rem; border-top: 1px solid var(--line); }
.section-head { margin: 0 0 1.25rem; }
.section-head .headline { margin: 0; }
.section-head .lead { margin-top: .6rem; }
/* Opt-in: .section-head.row puts the first child (eyebrow+headline wrapper) left and actions right. */
.section-head.row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem; }
.section-head.row > :first-child { flex: 1 1 20rem; min-width: 0; }

/* ===== 07 Footer ===== */
.site-footer {
  background: var(--footer-bg);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
  padding: 2rem 0 2.5rem;
  margin-top: auto;
}
.site-footer a { color: var(--paper-dim); }
.site-footer a:hover { color: var(--paper); }
.foot-disclaimer { max-width: 78ch; margin: 0 0 1.25rem; }
.foot-links { margin: 0; }
.foot-links .linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.foot-links .linklike:hover { color: var(--paper); }
/* Reserved ad slot: hidden until public/js/ads.js fills it (only when src/ads.json has a publisher ID and a slot ID). */
.ad-slot {
  display: block;
  min-height: 90px;
  margin: 1.5rem 0 0;
  border: 1px dashed var(--line);
}
.ad-slot[hidden] { display: none !important; }
.ad-slot .adsbygoogle { display: block; }   /* AdSense sizes a responsive unit from its box, so it must be a block */

/* ===== 08 Blocks ===== */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: var(--card-pad);
  min-width: 0;
}
.card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .4rem 1rem;
  margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 1.1rem;
  padding: .8rem var(--card-pad);
  border-bottom: 1px solid var(--line);
}
.card-head .eyebrow { margin: 0; }
.card-head > .eyebrow:has(+ .headline) { flex-basis: 100%; }   /* eyebrow above the headline, not beside it */
.card-head .headline { font-size: 22px; }
.card > .eyebrow:first-child { margin-bottom: .35rem; }

/* Stat tiles: big Barlow number, eyebrow label under it. */
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 1rem 1.1rem .9rem;
  min-width: 0;
}
.stat-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 1.5rem + 1.6vw, 3.5rem);   /* 40px on phones, ~44px at 1280, 56px max: a 7-digit score fits 4-up */
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--paper);
  white-space: nowrap;
}
.stat-num.signal { color: var(--signal); }
.stat-num.gold { color: var(--gold); }
.stat-num.live { color: var(--live); }
.stat-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--eyebrow-size);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-track);
  color: var(--muted);
  margin-top: .4rem;
}

/* Grids: one column on phones, see 15 Responsive. */
.grid-2, .grid-3, .grid-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0 0 1.25rem;
}
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }

/* Notice boxes: a 3px left rule; .warn turns it red (the one place red means "look"). */
.notice {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--paper-dim);
  padding: .8rem 1rem;
  font-size: 14px;
  line-height: 1.55;
  color: var(--paper-dim);
  margin: 0 0 1rem;
}
.notice.warn { border-left-color: var(--signal); color: var(--paper); }
.notice p:last-child { margin: 0; }

/* Tags: tiny square labels. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11.5px;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--paper-dim);
  border: 1px solid var(--line-strong);
  padding: .14rem .45rem;
  vertical-align: middle;
  white-space: nowrap;
}
.tag.gold { color: var(--gold); border-color: var(--gold); }
.tag.silver { color: var(--silver); border-color: var(--silver); }
.tag.bronze { color: var(--bronze); border-color: var(--bronze); }
.tag.live { color: var(--live); border-color: var(--live); }
.tag.signal { color: var(--signal); border-color: var(--signal); }

/* Live dot: green, slow pulse. */
.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;          /* the one round thing on the site: a dot */
  background: var(--live);
  box-shadow: 0 0 0 0 rgba(35, 165, 89, .6);
  margin-right: .45rem;
  vertical-align: middle;
  position: relative;
  top: -1px;
  animation: live-pulse 2.4s ease-out infinite;
}

.divider { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; height: 0; }

/* ===== 09 Controls ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  padding: .55rem 1.1rem;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: border-color .15s, background-color .15s, color .15s;
}
.btn:hover { border-color: var(--paper); background: rgba(238, 236, 228, .04); text-decoration: none; }
.btn:active { transform: translateY(1px); }

/* "Add to my calendar": a <details> picker (Google / webcal), no script needed */
.cal-add { position: relative; display: inline-block; }
.cal-add > summary { list-style: none; cursor: pointer; }
.cal-add > summary::-webkit-details-marker { display: none; }
.cal-add > summary::after { content: ''; display: inline-block; margin-left: .5rem; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px); }
.cal-add[open] > summary::after { transform: translateY(-2px) rotate(180deg); }
.cal-add-menu {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; min-width: 240px; padding: .35rem 0;
  background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
}
.cal-add-menu a { display: block; padding: .55rem .9rem; color: var(--paper); text-decoration: none; }
.cal-add-menu a:hover, .cal-add-menu a:focus-visible { background: rgba(238, 236, 228, .06); }
.cal-add-menu p { margin: .35rem .9rem .25rem; }
.btn.primary { background: var(--signal); border-color: var(--signal); color: #fff; }
.btn.primary:hover { background: var(--signal-dark); border-color: var(--signal-dark); }
.btn.small { font-size: 14px; padding: .3rem .6rem; letter-spacing: .04em; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: default; pointer-events: none; }
.btn svg { width: 16px; height: 16px; flex: none; }

.input, .select {
  display: block;
  width: 100%;
  min-width: 0;
  height: 42px;
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 0 .75rem;
  transition: border-color .15s;
}
.input:hover, .select:hover { border-color: var(--line-strong); }
.input:focus, .select:focus { border-color: var(--paper); outline: none; }
.input::placeholder { color: var(--muted); letter-spacing: .06em; }
.input[type="search"] { -webkit-appearance: none; appearance: none; }
.input[type="search"]::-webkit-search-decoration, .input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23c8c4ba' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  background-size: 12px 12px;
}
.select option { background: var(--surface); color: var(--paper); text-transform: none; }

/* Filter chips. Active = paper fill; chips carrying a .type-* class colour their icon. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--eyebrow-size);
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--paper-dim);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: .38rem .7rem;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: border-color .15s, color .15s, background-color .15s;
}
.chip:hover { border-color: var(--line-strong); color: var(--paper); }
.chip svg, .chip .event-icon { width: 14px; height: 14px; color: var(--type, currentColor); }
.chip .event-icon svg { width: 14px; height: 14px; }
.chip.active { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.chip.active svg, .chip.active .event-icon { color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--paper); border-color: var(--paper); color: var(--ink); }

.field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; margin: 0 0 1rem; }
.field label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--eyebrow-size);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-track);
  color: var(--muted);
}
.field .small { margin: 0; }

.search-row { display: flex; align-items: stretch; gap: .5rem; min-width: 0; }
.search-row .input, .search-row .select { flex: 1 1 auto; width: auto; min-width: 0; }
.search-row .select { flex: 0 1 11rem; }
.search-row .btn { flex: none; height: 42px; padding-block: 0; }

/* ===== 10 Tables ===== */
.table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border: 1px solid var(--line);
  margin: 0 0 1.25rem;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.table table { width: 100%; min-width: 100%; border-collapse: collapse; border-spacing: 0; }
.table th, .table td { padding: .55rem .75rem; text-align: left; white-space: nowrap; vertical-align: middle; }
.table th {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10.5px;
  line-height: 1.3;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface);
  border-bottom: 1px solid var(--line-strong);
}
.table td { font-size: 14px; line-height: 1.35; color: var(--paper-dim); border-top: 1px solid var(--line); }
.table tbody tr:first-child td { border-top: 0; }
.table tbody tr:hover td { background: var(--surface-2); }
.table td:first-child, .table th:first-child { padding-left: 1rem; }
.table td:last-child, .table th:last-child { padding-right: 1rem; }
.num { text-align: right !important; }
table.ladder .name, table.ladder td:nth-child(2) { color: var(--paper); font-weight: 500; }

.rank {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  color: var(--paper-dim);
  width: 3.25rem;
}
.rank.r1 { color: var(--gold); }
.rank.r2 { color: var(--silver); }
.rank.r3 { color: var(--bronze); }

.gap-pos { color: var(--live); }
.gap-neg { color: var(--signal); }
.delta-up { color: var(--live); }
.delta-down { color: var(--signal); }
.delta-flat { color: var(--muted); }

/* The cut rule: a 2px red line across the top of the row. The label on it is the row's own content (cut.js). */
tr.cut-line > td {
  border-top: 2px solid var(--signal) !important;
}

/* The searched player's own row. */
tr.me > td { background: rgba(238, 236, 228, .07) !important; color: var(--paper); }
tr.me > td:first-child { box-shadow: inset 3px 0 0 var(--paper); }

/* ===== 11 Events ===== */
/* Each .type-* sets --type; the card's left rule, the icon and chips consume it. */
.type-tournament { --type: var(--gold); }
.type-kick-drops { --type: var(--kick); }
.type-crate-drop { --type: var(--paper); }
.type-giveaway { --type: var(--gold); }   /* red stays reserved for signal */
.type-skin-event { --type: #d8b45a; }
.type-scrim { --type: var(--paper-dim); }
.type-season { --type: var(--paper); }
.type-patch { --type: var(--muted); }
.type-maintenance { --type: #b0754a; }
.type-milestone { --type: var(--muted); }

.event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--type, var(--paper-dim));
  padding: 1rem 1.1rem;
  min-width: 0;
}
.event-card.ended { opacity: .6; }
.event-card.ended:hover { opacity: 1; }
.event-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--type, var(--paper-dim));
  vertical-align: -3px;
}
.event-icon svg { width: 16px; height: 16px; display: block; }
/* ROTK sprites are detailed pictures, so they sit larger than the 16px line icons without growing the row */
.event-icon:has(> img) { width: 28px; height: 28px; margin: -6px 0; }
.event-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.chip .event-icon:has(> img), .chips .event-icon:has(> img) { width: 22px; height: 22px; margin: -4px 0; }
.event-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .75rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--eyebrow-size);
  line-height: 1.3;
  letter-spacing: var(--eyebrow-track);
  text-transform: uppercase;
  color: var(--muted);
}
.event-meta .tag { letter-spacing: .08em; }
.event-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: -.2px;
  text-transform: uppercase;
  color: var(--paper);
  margin: 0;
}
.event-title a { text-decoration: none; }
.event-title a:hover { text-decoration: underline; }
.event-time { font-size: 14px; line-height: 1.45; color: var(--paper-dim); }
.event-time .muted { font-size: 12.5px; }
.countdown {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--paper);
  white-space: nowrap;
}
.countdown.live { color: var(--signal); animation: text-pulse 1.6s ease-in-out infinite; }
.countdown.done, .countdown.ended { color: var(--muted); }
.eligibility {
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: .65rem .8rem;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--paper-dim);
  margin-top: .25rem;
}
.eligibility .eyebrow { margin-bottom: .25rem; }
.eligibility strong { color: var(--paper); }
.event-card .btn.small, .event-card .chip { align-self: flex-start; }
.event-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }

/* ===== 12 Charts (inline SVG built by the page script; hooks: .grid .axis .line .area .dot .cut) ===== */
.chart {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 1rem;
  margin: 0 0 .5rem;
  min-width: 0;
}
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart svg text {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  fill: var(--muted);
  letter-spacing: .02em;
}
.chart svg .grid line, .chart svg .grid path { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.chart svg .axis line, .chart svg .axis path { stroke: var(--line-strong); stroke-width: 1; shape-rendering: crispEdges; }
.chart svg .line { fill: none; stroke: var(--paper); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.chart svg .line.signal, .chart svg .cut { stroke: var(--signal); }
.chart svg .line.muted { stroke: var(--muted); stroke-dasharray: 3 3; }
.chart svg .area { fill: rgba(238, 236, 228, .06); stroke: none; }
.chart svg .dot { fill: var(--paper); stroke: var(--surface); stroke-width: 1.5; }
.chart svg .dot.signal { fill: var(--signal); }
.chart-note { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: 0 0 1.25rem; }

/* ===== 13 States ===== */
.loading, .empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 5rem;
  padding: 1.5rem 1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-track);
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.loading::before {
  content: '';
  width: 12px;
  height: 12px;
  flex: none;
  border: 2px solid var(--line-strong);
  border-top-color: var(--paper);
  animation: spin .9s linear infinite;
}
.empty { border: 1px dashed var(--line); }
.error {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--signal);
  padding: .8rem 1rem;
  font-size: 14px;
  line-height: 1.55;
  color: var(--paper);
  margin: 0 0 1rem;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
a.sr-only:focus, a.sr-only:focus-visible {
  position: fixed;
  top: .5rem;
  left: .5rem;
  width: auto;
  height: auto;
  margin: 0;
  padding: .5rem .9rem;
  clip: auto;
  overflow: visible;
  z-index: 100;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}

/* ===== 14 Motion ===== */
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(35, 165, 89, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(35, 165, 89, 0); }
  100% { box-shadow: 0 0 0 0 rgba(35, 165, 89, 0); }
}
@keyframes text-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .live-dot { box-shadow: 0 0 0 3px rgba(35, 165, 89, .25); }
}

/* ===== 15 Responsive ===== */
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 719.98px) {
  :root { --card-pad: 1rem; }
  body { font-size: 15px; }
  .site-header .wrap { min-height: 52px; gap: .75rem; }
  .brand-mark { height: 30px; }
  .brand-name { font-size: 11px; letter-spacing: .12em; }
  .nav { gap: .8rem; }
  .nav a { font-size: 13px; letter-spacing: .04em; }
  .site-main { padding: 1.5rem 0 2.5rem; }
  .section { padding-top: 1.75rem; }
  .section + .section { margin-top: 1.75rem; }
  .headline { font-size: 26px; }
  h1.headline { font-size: 32px; }
  .headline.hero + .lead { font-size: 16.5px; }
  .card-head .headline { font-size: 20px; }
  .btn { font-size: 16px; padding: .5rem .9rem; }
  .btn.small { font-size: 13.5px; }
  .input, .select { font-size: 16px; letter-spacing: .04em; }   /* 16px stops iOS zooming the page on focus */
  .stat { padding: .85rem .9rem .8rem; }
  .table th, .table td { padding: .5rem .6rem; }
  .table td:first-child, .table th:first-child { padding-left: .75rem; }
  .table td:last-child, .table th:last-child { padding-right: .75rem; }
  .event-title { font-size: 20px; }
  .countdown { font-size: 18px; }
  .site-footer { padding: 1.5rem 0 2rem; }
}
/* The header holds mark + name, three nav links and the language button on one line: drop words as it narrows. */
@media (max-width: 519.98px) {
  .brand-name span { display: none; }   /* "ROTK" alone beside the mark */
}
@media (max-width: 419.98px) {
  .nav { gap: .7rem; }
  .nav a { font-size: 12.5px; letter-spacing: .03em; }
}
@media (max-width: 399.98px) {
  .brand-name { display: none; }        /* the mark alone on the narrowest phones (the link keeps its aria-label) */
}
@media print {
  .site-header, .site-footer, .ad-slot, .btn, .chip { display: none !important; }
  body { background: #fff; color: #000; }
}