/* La Croziade — Ember core (lacroziade.eu + both in-game menus), 2026-09-28 split of ember.css:
   fonts, tokens, both palettes, base and components. No @media rules and no page layout here,
   so nothing phone/tablet-sized ever applies inside a game's MOTD panel. The website also loads
   ember-site.css (page layout + every @media rule); the menus load ember-menu.css instead. */

/* La Croziade — Ember theme (lacroziade.eu + in-game menu)
   Half-Life orange (#FFA000) is the site accent and HL2DM's colour; RTBA is
   Opposing Force olive (#B4C46A). Rank colours match the old site.
   Fonts are self-hosted from ./fonts/ (SIL OFL 1.1, licences alongside).
   Reference markup: reference/index.html and reference/ladder.html. */

@font-face{font-family:'Unbounded';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/unbounded-latin-500-normal.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:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/chakra-petch-latin-500-normal.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:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/chakra-petch-latin-600-normal.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:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/chakra-petch-latin-700-normal.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:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.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:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.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:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.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:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* ==========================================================================
   Tokens

   Two complete palettes, one per game. data-game="hl2dm" or data-game="rtba"
   swaps EVERYTHING inside that element: accent, buttons, lines, links, text
   tones, surfaces and the ambient glow.
   - Game pages and the in-game menus: put data-game on <body>, so the whole
     page (header and logo included) is in that game's palette.
   - Desktop landing: no data-game on <body> (site default = Ember); each
     server box carries its own data-game.
   - Phone landing: the HL2DM | RTBA switch sets data-game on <body>, so the
     whole page changes colour with the tab.
   ========================================================================== */
:root {
  color-scheme: dark;

  /* fixed across games */
  --online: #7cf0c8;
  --online-rgb: 124, 240, 200;
  --row-line: rgba(255, 255, 255, 0.05);
  --hl2dm: #ffa000;  --hl2dm-rgb: 255, 160, 0;     /* for cross-links / previews */
  --rtba: #b4c46a;   --rtba-rgb: 180, 196, 106;

  /* ranks (same tiers on both servers, same colours on both palettes) */
  --r-iron: #7d8791;      --r-iron-rgb: 125, 135, 145;
  --r-bronze: #b9814c;    --r-bronze-rgb: 185, 129, 76;
  --r-silver: #cfd8dc;    --r-silver-rgb: 207, 216, 220;
  --r-gold: #f0c650;      --r-gold-rgb: 240, 198, 80;
  --r-platinum: #3fb5ba;  --r-platinum-rgb: 63, 181, 186;
  --r-diamond: #c584f5;   --r-diamond-rgb: 197, 132, 245;
  --r-ascendant: #32c46f; --r-ascendant-rgb: 50, 196, 111;
  --r-immortal: #ef4d68;  --r-immortal-rgb: 239, 77, 104; /* from oc_elo g_RankHex */
  --r-radiant: #ffef9f;   --r-radiant-rgb: 255, 239, 159;

  /* type */
  --f-mark: 'Unbounded', system-ui, sans-serif;           /* "LA CROZIADE" wordmark only */
  --f-head: 'Chakra Petch', system-ui, sans-serif;        /* headings, tabs, buttons */
  --f-text: 'IBM Plex Sans', system-ui, sans-serif;       /* body text, player names */
  --f-num: 'IBM Plex Mono', ui-monospace, monospace;      /* numbers, maps, addresses */

  --radius: 3px;
  --gutter: 16px;
  --glow: 1; /* 0 = flat, 1 = full glow; scale every glow by this */
}
/* Palette 1, Ember: Half-Life orange. Site default, HL2DM. */
:root, [data-game="hl2dm"] {
  --bg: #080504;
  --surface-rgb: 22, 12, 7;
  --inset-rgb: 8, 5, 4;
  --text: #f3ebe4;
  --bright: #fbf5f0;
  --soft: #e0cfc1;
  --muted: #bca897;
  --dim: #968270;
  --faint: #5f5043;
  --link: #fed7aa;
  --acc: #ffa000;       --acc-rgb: 255, 160, 0;
  --acc-2: #e07800;     /* button gradient end */
  --on-acc: #1a0e04;    /* text on buttons */
  --amb-1: 217, 119, 6; /* ambient glow, top left */
  --amb-2: 124, 45, 18; /* ambient glow, top right */
  --amb-3: 220, 38, 38; /* ambient glow, bottom */
}
/* Palette 2, Opposing Force: olive with khaki neutrals. RTBA. */
[data-game="rtba"] {
  --bg: #060705;
  --surface-rgb: 15, 17, 9;
  --inset-rgb: 5, 6, 3;
  --text: #eef0e2;
  --bright: #f8f9ef;
  --soft: #d9dcc4;
  --muted: #b3b69a;
  --dim: #8e9176;
  --faint: #5a5c47;
  --link: #e4ecbf;
  --acc: #b4c46a;       --acc-rgb: 180, 196, 106;
  --acc-2: #8fa04a;
  --on-acc: #141a06;
  --amb-1: 120, 140, 40;
  --amb-2: 52, 64, 20;
  --amb-3: 196, 168, 72;
}
/* Derived tokens. Re-declared on every themed element on purpose: a custom
   property that uses var() is resolved where it is declared, so declaring
   these on :root only would freeze them in the Ember colours. */
:root, [data-game] {
  --surface: rgba(var(--surface-rgb), 0.88);
  --surface-2: rgba(var(--surface-rgb), 0.72);
  --inset: rgba(var(--inset-rgb), 0.62);
  --offline: var(--dim);
  --line: rgba(var(--acc-rgb), 0.2);
  --line-faint: rgba(var(--acc-rgb), 0.1);
  --line-strong: rgba(var(--acc-rgb), 0.36);
  --tint: rgba(var(--acc-rgb), 0.1);
  --game: var(--acc);            /* kept as an alias: components read --game */
  --game-rgb: var(--acc-rgb);
  color: var(--text);
}
/* ==========================================================================
   Base and atmosphere
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { background: #070605; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.5 var(--f-text);
  -webkit-font-smoothing: antialiased;
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
}
/* ambient glow in the current palette, fixed behind everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(60vw 48vw at 12% -8%, rgba(var(--amb-1), 0.16), transparent 70%),
    radial-gradient(56vw 44vw at 104% 4%, rgba(var(--amb-2), 0.22), transparent 70%),
    radial-gradient(50vw 40vw at 45% 110%, rgba(var(--amb-3), 0.06), transparent 70%);
}
/* faint scanlines */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px);
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--bright); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3 { margin: 0; font-family: var(--f-head); font-weight: 600; color: var(--bright); letter-spacing: 0.005em; }
h1 { font-size: 26px; line-height: 1.2; }
h2 { font-size: 19px; line-height: 1.25; }
h3 { font-size: 16px; }
p { margin: 0; }
.lc-num { font-family: var(--f-num); font-variant-numeric: tabular-nums; }
.lc-muted { color: var(--muted); }
.lc-dim { color: var(--dim); }
.lc-brand { display: flex; align-items: center; gap: 14px; color: var(--text); }
.lc-brand:hover { color: var(--text); }
.lc-mark {
  /* the La Croziade lambda (inline SVG, one colour via currentColor): orange on the
     landing and HL2DM pages, olive on RTBA pages and the RTBA in-game menu */
  flex: none; width: 36px; height: 36px; display: block;
  color: var(--game);
  filter: drop-shadow(0 0 calc(8px * var(--glow)) rgba(var(--game-rgb), calc(0.45 * var(--glow))));
}
.lc-mark svg { display: block; width: 100%; height: 100%; }
.lc-wordmark { font: 500 14px/1 var(--f-mark); letter-spacing: 0.22em; white-space: nowrap; }
/* preview the other game's colour on hover (the link carries data-game) */
.lc-navlink[data-game]:hover, .lc-switch > [data-game]:not([aria-current]):not([aria-selected="true"]):hover { color: var(--acc); }
/* segmented HL2DM | RTBA switch (header on game pages, tabs on phone landing) */
.lc-switch { display: flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font: 700 14px/1 var(--f-head); }
.lc-switch > a, .lc-switch > button {
  flex: 1; display: flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 16px; border: 0; background: none; cursor: pointer;
  color: var(--dim); font: inherit; letter-spacing: 0.02em;
}
.lc-switch > * + * { border-left: 1px solid var(--line); }
.lc-switch > :hover { color: var(--text); }
.lc-switch > [aria-current="page"], .lc-switch > [aria-selected="true"] {
  color: var(--game); background: rgba(var(--game-rgb), 0.12); box-shadow: inset 0 -2px 0 var(--game);
}
/* ==========================================================================
   Buttons
   ========================================================================== */
.lc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px; border: 0; border-radius: var(--radius); cursor: pointer;
  background: linear-gradient(135deg, var(--acc), var(--acc-2));
  color: var(--on-acc);
  font: 700 14px/1 var(--f-head); letter-spacing: 0.04em; white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 6px calc(22px * var(--glow)) rgba(var(--acc-rgb), calc(0.25 * var(--glow)));
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.lc-btn:hover { color: var(--on-acc); filter: brightness(1.08); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 6px calc(28px * var(--glow)) rgba(var(--acc-rgb), calc(0.4 * var(--glow))); }
.lc-btn--ghost { background: var(--tint); color: var(--text); border: 1px solid var(--line-strong); box-shadow: none; font-weight: 600; }
.lc-btn--ghost:hover { color: var(--bright); background: rgba(var(--acc-rgb), 0.16); box-shadow: none; }
.lc-btn--block { width: 100%; height: 48px; font-size: 15px; }
.lc-btn--game {
  background: rgba(var(--acc-rgb), 0.1);
  color: var(--acc);
  border: 1px solid rgba(var(--acc-rgb), 0.45);
  box-shadow: inset 0 -2px 0 rgba(var(--acc-rgb), 0.55), 0 0 calc(14px * var(--glow)) rgba(var(--acc-rgb), calc(0.12 * var(--glow)));
  text-shadow: 0 0 calc(8px * var(--glow)) rgba(var(--acc-rgb), calc(0.4 * var(--glow)));
  letter-spacing: 0.06em;
}
.lc-btn--game:hover {
  color: var(--bright);
  filter: none;
  background: rgba(var(--acc-rgb), 0.2);
  box-shadow: inset 0 -2px 0 var(--acc), 0 0 calc(20px * var(--glow)) rgba(var(--acc-rgb), calc(0.3 * var(--glow)));
}
.lc-btn--sm { height: 34px; padding: 0 14px; font-size: 13px; }
.lc-btn svg { width: 15px; height: 15px; flex: none; }
/* ==========================================================================
   Server box (one per game), with corner brackets in the game colour
   ========================================================================== */
.lc-box {
  position: relative;
  padding: 26px 28px 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(var(--game-rgb), 0.36);
  background: linear-gradient(180deg, rgba(var(--game-rgb), 0.1), rgba(var(--game-rgb), 0) 220px), var(--surface);
  box-shadow: 0 0 calc(24px * var(--glow)) rgba(var(--game-rgb), calc(0.06 * var(--glow))), 0 36px 80px rgba(0, 0, 0, 0.55);
}
/* four 12px corner brackets drawn by one pseudo-element */
.lc-box::before {
  content: ""; position: absolute; inset: -1px; pointer-events: none;
  --c: var(--game);
  background:
    linear-gradient(var(--c), var(--c)) left top / 12px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) left top / 2px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 12px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 2px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 12px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 2px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 12px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 2px 12px no-repeat;
}
/* plain panel: same surface, no game colour, no brackets */
.lc-panel { padding: 20px 24px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.lc-box__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.lc-box__title { font: 600 28px/1.15 var(--f-head); color: var(--bright); }
.lc-box__title a { color: inherit; text-decoration: none; transition: color 0.15s ease, text-shadow 0.15s ease; }
.lc-box__title a::after { content: " →"; font-size: 0.8em; opacity: 0; transition: opacity 0.15s ease; }
.lc-box__title a:hover, .lc-box__title a:focus-visible { color: var(--acc); text-shadow: 0 0 calc(14px * var(--glow)) rgba(var(--acc-rgb), calc(0.45 * var(--glow))); }
.lc-box__title a:hover::after, .lc-box__title a:focus-visible::after { opacity: 1; }
.lc-box__sub { margin-top: 6px; font-size: 13px; color: var(--muted); }
.lc-game-tag { font: 700 13px/1 var(--f-head); letter-spacing: 0.08em; color: var(--game); text-shadow: 0 0 calc(10px * var(--glow)) rgba(var(--game-rgb), calc(0.45 * var(--glow))); padding-top: 8px; }
.lc-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 26px 0 10px; }
.lc-section-head h2, .lc-section-head h3 { font-size: 17px; font-weight: 600; }
.lc-section-head a { font-size: 14px; }
/* ==========================================================================
   Server strip: status dot, map, tick, 16 slot pips, count, Connect
   ========================================================================== */
.lc-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 56px; margin-top: 20px; padding: 8px 8px 8px 16px;
  border: 1px solid rgba(var(--game-rgb), 0.3); border-radius: var(--radius); background: var(--inset);
}
.lc-strip__info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lc-strip__map { font: 400 13px/1.2 var(--f-num); color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lc-strip__tick { font: 400 12px/1 var(--f-num); color: var(--dim); white-space: nowrap; }
.lc-strip__slots { display: flex; align-items: center; gap: 12px; flex: none; }
.lc-count { font: 400 13px/1 var(--f-num); white-space: nowrap; }
.lc-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--online); box-shadow: 0 0 10px rgba(var(--online-rgb), 0.85); animation: lcPulse 2.4s ease-in-out infinite; }
.lc-dot--off { background: var(--offline); box-shadow: none; animation: none; }
@keyframes lcPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
/* <span class="lc-pips"><i class="on"></i>… 16 × <i></i></span> */
.lc-pips { display: inline-flex; gap: 2px; line-height: 0; }
.lc-pips i { display: block; width: 4px; height: 14px; border-radius: 1px; background: rgba(255, 255, 255, 0.09); }
.lc-pips i.on { background: var(--game); box-shadow: 0 0 calc(6px * var(--glow)) rgba(var(--game-rgb), calc(0.45 * var(--glow))); }
/* ==========================================================================
   Tables (scoreboard style, real <table> elements)
   ========================================================================== */
.lc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lc-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.lc-table th {
  height: 32px; padding: 0 12px 0 0; text-align: left; white-space: nowrap;
  font: 400 12px/1 var(--f-text); color: var(--dim);
  border-bottom: 1px solid rgba(var(--game-rgb), 0.3);
}
.lc-table td { height: 40px; padding: 0 12px 0 0; border-bottom: 1px solid var(--row-line); white-space: nowrap; }
.lc-table th:last-child, .lc-table td:last-child { padding-right: 0; }
.lc-table .num { text-align: right; font-family: var(--f-num); font-variant-numeric: tabular-nums; }
.lc-table .pos { width: 36px; font: 400 13px/1 var(--f-num); color: var(--dim); }
.lc-table .name { font-weight: 600; max-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; }
.lc-table .up { color: var(--online); }
.lc-table .down { color: #f08a7a; }
.lc-table tbody tr { transition: background-color 0.15s ease; }
.lc-table tbody tr:hover { background: rgba(255, 255, 255, 0.04); }
.lc-table th.sorted { color: var(--game); }
/* #1 on a ladder glows in the game colour */
.lc-table tr.is-top { background: linear-gradient(90deg, rgba(var(--game-rgb), 0.13), rgba(var(--game-rgb), 0) 60%); }
.lc-table tr.is-top .name { color: var(--game); text-shadow: 0 0 calc(12px * var(--glow)) rgba(var(--game-rgb), calc(0.5 * var(--glow))); }
/* the viewing player (in-game menu) */
.lc-table tr.is-you { background: rgba(var(--game-rgb), 0.08); }
.lc-you { margin-left: 6px; font: 600 11px/1 var(--f-text); color: var(--game); }
/* player avatars (self-hosted copies of the Steam avatar; letter placeholder when none) */
.lc-avatar { width: 22px; height: 22px; flex: none; border-radius: 3px; border: 1px solid rgba(var(--acc-rgb), 0.3); object-fit: cover; vertical-align: middle; margin-right: 8px; background: var(--surface-2); }
.lc-avatar--lg { width: 64px; height: 64px; border-width: 2px; border-color: var(--acc); box-shadow: 0 0 calc(16px * var(--glow)) rgba(var(--acc-rgb), calc(0.35 * var(--glow))); margin-right: 16px; }
.lc-avatar--empty { display: inline-flex; align-items: center; justify-content: center; font: 600 11px/1 var(--f-head); color: var(--dim); }
.lc-avatar--lg.lc-avatar--empty { font-size: 24px; }
tr.is-top .lc-avatar { border-color: var(--acc); box-shadow: 0 0 calc(8px * var(--glow)) rgba(var(--acc-rgb), calc(0.4 * var(--glow))); }
.lc-empty { height: 160px; padding: 0; text-align: center; color: var(--muted); border-bottom: 1px solid var(--row-line); }
/* ==========================================================================
   Rank tags: <span class="lc-rank lc-rank--gold">Gold</span>
   ========================================================================== */
.lc-rank {
  --rc: var(--r-iron); --rc-rgb: var(--r-iron-rgb); --ra: 0.14;
  display: inline-block; padding: 2px 8px; border-radius: var(--radius);
  font: 600 11px/1.45 var(--f-text); white-space: nowrap;
  color: var(--rc);
  background: linear-gradient(rgba(var(--rc-rgb), var(--ra)), rgba(var(--rc-rgb), var(--ra))), var(--bg);
  border: 1px solid rgba(var(--rc-rgb), 0.35);
  text-shadow: 0 0 6px rgba(var(--rc-rgb), 0.5);
}
.lc-rank--iron      { --rc: var(--r-iron);      --rc-rgb: var(--r-iron-rgb); --ra: 0.11; }
.lc-rank--bronze    { --rc: var(--r-bronze);    --rc-rgb: var(--r-bronze-rgb); }
.lc-rank--silver    { --rc: var(--r-silver);    --rc-rgb: var(--r-silver-rgb); }
.lc-rank--gold      { --rc: var(--r-gold);      --rc-rgb: var(--r-gold-rgb); }
.lc-rank--platinum  { --rc: var(--r-platinum);  --rc-rgb: var(--r-platinum-rgb); }
.lc-rank--diamond   { --rc: var(--r-diamond);   --rc-rgb: var(--r-diamond-rgb); }
.lc-rank--ascendant { --rc: var(--r-ascendant); --rc-rgb: var(--r-ascendant-rgb); }
.lc-rank--immortal, .lc-rank--radiant { box-shadow: 0 0 calc(12px * var(--glow)) rgba(var(--rc-rgb), calc(0.6 * var(--glow))); }
.lc-rank--immortal  { --rc: var(--r-immortal);  --rc-rgb: var(--r-immortal-rgb); }
.lc-rank--radiant   { --rc: var(--r-radiant);   --rc-rgb: var(--r-radiant-rgb); }
/* not ranked yet: neutral, shows progress ("Placement 12/50") */
.lc-rank--placement { color: var(--muted); background: rgba(255, 255, 255, 0.04); border: 1px dashed rgba(255, 255, 255, 0.18); text-shadow: none; }
.lc-statbar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.lc-statbar > div { padding: 14px 18px; min-width: 0; }
.lc-statbar > div + div { border-left: 1px solid var(--line); }
.lc-statbar .v { font: 500 22px/1.2 var(--f-num); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-statbar .k { margin-top: 2px; font-size: 12px; color: var(--dim); }
.lc-search {
  display: flex; align-items: center; gap: 10px; width: 300px; max-width: 100%; height: 40px; padding: 0 12px;
  border: 1px solid rgba(var(--game-rgb), 0.3); border-radius: var(--radius); background: rgba(var(--inset-rgb), 0.7); color: var(--dim);
}
.lc-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: 400 14px/1 var(--f-text); }
.lc-bar { min-width: 64px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.lc-bar > span { display: block; height: 100%; background: var(--game); }
/* achievement/unlock glyph: hexagon instead of emoji */
.lc-hex { width: 14px; height: 14px; flex: none; color: var(--acc); }
.lc-badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--tint); font-size: 12px; font-weight: 600; }