/* ============================================================
   ABL — Overlay theme for roster / player / coach pages v2
   These pages keep their own inline <style> block (which sets
   each team's color for td.header / tr.teamcolor), so this
   file only layers the dark background, nav, fonts, and
   circular rating badges on top.
   ============================================================ */

:root {
  --abl-orange: #fd5202;
  --abl-orange-bright: #ff7a33;
  --abl-orange-dim: #c84300;
  --abl-bg: #0b0c10;
  --abl-surface: #16181d;
  --abl-surface-raised: #1d2026;
  --abl-border: #2a2d34;
  --abl-text: #f2f3f5;
  --abl-text-dim: #9aa0ab;
  --abl-row-alt: #1b1e24;
  --abl-row: #16181d;

  --font-display: 'Oswald', 'Arial Narrow', Helvetica, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Arial, Helvetica, sans-serif;

  --abl-row-pad-v: 7px;
  --abl-row-pad-h: 6px;
  --abl-row-font: 13px;
  --abl-header-font: 12px;
  --abl-nav-pad-v: 12px;
}

html[data-density="compact"] {
  --abl-row-pad-v: 4px;
  --abl-row-pad-h: 5px;
  --abl-row-font: 12px;
  --abl-header-font: 11px;
  --abl-nav-pad-v: 8px;
}
html[data-density="comfortable"] {
  --abl-row-pad-v: 11px;
  --abl-row-pad-h: 8px;
  --abl-row-font: 14px;
  --abl-header-font: 13px;
  --abl-nav-pad-v: 16px;
}

html.light-mode {
  --abl-bg: #f0f1f4;
  --abl-surface: #ffffff;
  --abl-surface-raised: #e8eaee;
  --abl-border: #d0d3da;
  --abl-text: #111318;
  --abl-text-dim: #555b68;
  --abl-row: #ffffff;
  --abl-row-alt: #f4f5f8;
}

html.theme-eggshell {
  --abl-bg: #f7f3ea;
  --abl-surface: #fffdf7;
  --abl-surface-raised: #efe9da;
  --abl-border: #ddd4bf;
  --abl-text: #2b271e;
  --abl-text-dim: #6b6354;
  --abl-row: #fffdf7;
  --abl-row-alt: #f1ecdf;
}

html.theme-light-grey {
  --abl-bg: #e4e6ea;
  --abl-surface: #f4f5f7;
  --abl-surface-raised: #d7dadf;
  --abl-border: #c2c6cd;
  --abl-text: #181a1e;
  --abl-text-dim: #54585f;
  --abl-row: #f4f5f7;
  --abl-row-alt: #e9ebee;
}

html.theme-charcoal {
  --abl-bg: #23252a;
  --abl-surface: #2b2e34;
  --abl-surface-raised: #34373e;
  --abl-border: #44474f;
  --abl-text: #eceef0;
  --abl-text-dim: #a9adb6;
  --abl-row: #2b2e34;
  --abl-row-alt: #303339;
}

html.theme-night {
  --abl-bg: #14100a;
  --abl-surface: #1d1710;
  --abl-surface-raised: #261e14;
  --abl-border: #3a2e1d;
  --abl-text: #f0e6d2;
  --abl-text-dim: #ab9a7d;
  --abl-row: #1d1710;
  --abl-row-alt: #221b12;
  --abl-orange: #e85d04;
  --abl-orange-bright: #ff8c3a;
}

html.light-mode body,
html.theme-eggshell body,
html.theme-light-grey body,
html.theme-charcoal body,
html.theme-night body { background: var(--abl-bg) !important; }

html.light-mode .abl-topbar,
html.theme-eggshell .abl-topbar,
html.theme-light-grey .abl-topbar,
html.theme-charcoal .abl-topbar,
html.theme-night .abl-topbar {
  background: linear-gradient(180deg, var(--abl-surface) 0%, var(--abl-bg) 100%);
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
}

html.light-mode td.main,
html.theme-eggshell td.main,
html.theme-light-grey td.main,
html.theme-charcoal td.main,
html.theme-night td.main { color: var(--abl-text) !important; }

html.light-mode tr.row1 td.main,
html.theme-eggshell tr.row1 td.main,
html.theme-light-grey tr.row1 td.main,
html.theme-charcoal tr.row1 td.main,
html.theme-night tr.row1 td.main { background: var(--abl-row) !important; }
html.light-mode tr.row2 td.main,
html.theme-eggshell tr.row2 td.main,
html.theme-light-grey tr.row2 td.main,
html.theme-charcoal tr.row2 td.main,
html.theme-night tr.row2 td.main { background: var(--abl-row-alt) !important; }

.abl-theme-toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  margin-right: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--abl-border);
  background: var(--abl-surface-raised);
  cursor: pointer;
  font-size: 16px;
  transition: background .15s ease, border-color .15s ease;
  user-select: none;
  flex-shrink: 0;
}

.abl-theme-toggle:hover {
  border-color: var(--abl-orange);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--abl-bg) !important;
  background-image: none !important;
  color: var(--abl-text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
}

body {
  padding-top: 64px;
  padding-bottom: 40px;
}

a { text-decoration: none; }

hr {
  border: none;
  border-top: 1px solid var(--abl-border);
  margin: 16px 0;
}

/* ============================================================
   TOP BAR — shared with root pages (hamburger + ticker)
   ============================================================ */
.abl-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  height: 64px;
  background: linear-gradient(180deg, #14161b 0%, #0b0c10 100%);
  border-bottom: 2px solid var(--abl-orange);
  box-shadow: 0 2px 12px rgba(0,0,0,.5);
}

html.light-mode .abl-topbar {
  background: linear-gradient(180deg, #ffffff 0%, #f0f1f4 100%);
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
}

.abl-logo-wrap {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 14px;
  height: 100%;
  border-right: 1px solid var(--abl-border);
}

.abl-logo-wrap img {
  height: 44px;
  width: 44px;
  border-radius: 50%;
  display: block;
}

.abl-logo-wrap .abl-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 17px;
  color: var(--abl-text);
  margin-left: 10px;
  white-space: nowrap;
  text-transform: uppercase;
}

.abl-logo-wrap .abl-wordmark span {
  color: var(--abl-orange);
}

.abl-nav-scroll { display: none; }

/* Hamburger + drawer + ticker -- same as style.css */
.abl-hamburger {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  margin: 0 6px;
  cursor: pointer;
  border-radius: 8px;
  transition: background .15s ease;
  flex-shrink: 0;
}
.abl-hamburger:hover { background: var(--abl-surface-raised); }
.abl-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--abl-text);
  border-radius: 2px;
  transition: all .2s ease;
}
.abl-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.abl-hamburger.open span:nth-child(2) { opacity: 0; }
.abl-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.abl-ticker-wrap {
  flex: 1 1 auto;
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
  border-left: 1px solid var(--abl-border);
}

.abl-ticker-wrap::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 36px;
  background: linear-gradient(90deg, transparent, var(--abl-bg) 85%);
  pointer-events: none;
  z-index: 2;
}

html.light-mode .abl-ticker-wrap::after {
  background: linear-gradient(90deg, transparent, #f0f1f4 85%);
}

.abl-ticker-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: ticker-scroll 40s linear infinite;
  will-change: transform;
}
.abl-ticker-wrap:hover .abl-ticker-track { animation-play-state: paused; }
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.abl-score-card {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  height: 64px;
  border-right: 1px solid var(--abl-border);
  flex-shrink: 0;
}
.abl-score-team { display: flex; align-items: center; gap: 2px; flex-direction: column; text-align: center; min-width: 34px; }
.abl-score-team img { width: 22px; height: 22px; object-fit: contain; display: block; }
.abl-score-team .abl-score-abbr { font-family: var(--font-display); font-size: 9px; font-weight: 700; color: var(--abl-text-dim); text-transform: uppercase; }
.abl-score-team .abl-score-pts { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--abl-text); line-height: 1; }
.abl-score-team.winner .abl-score-pts { color: var(--abl-orange-bright); }
.abl-score-sep { font-family: var(--font-display); font-size: 11px; color: var(--abl-text-dim); font-weight: 600; }
.abl-ticker-label { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--abl-text-dim); text-transform: uppercase; padding: 0 12px; flex-shrink: 0; }

/* skeleton loading state */
.abl-ticker-skeleton { display: flex; align-items: center; gap: 14px; padding: 0 16px; height: 100%; width: 100%; }
.abl-skel-card { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.abl-skel-dot { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(90deg, var(--abl-surface-raised) 25%, var(--abl-border) 37%, var(--abl-surface-raised) 63%); background-size: 400% 100%; animation: abl-shimmer 1.4s ease infinite; }
.abl-skel-bar { width: 34px; height: 10px; border-radius: 3px; background: linear-gradient(90deg, var(--abl-surface-raised) 25%, var(--abl-border) 37%, var(--abl-surface-raised) 63%); background-size: 400% 100%; animation: abl-shimmer 1.4s ease infinite; }
@keyframes abl-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.abl-skel { background: linear-gradient(90deg, var(--abl-surface-raised) 25%, var(--abl-border) 37%, var(--abl-surface-raised) 63%); background-size: 400% 100%; animation: abl-shimmer 1.4s ease infinite; border-radius: 4px; color: transparent !important; }

.abl-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 999; backdrop-filter: blur(2px); }
.abl-nav-overlay.open { display: block; }

.abl-nav-drawer { position: fixed; top: 64px; left: -300px; width: 260px; bottom: 0; background: var(--abl-surface); border-right: 1px solid var(--abl-border); z-index: 1001; overflow-y: auto; transition: left .25s cubic-bezier(.4,0,.2,1); padding: 8px 0 40px; }
.abl-nav-drawer.open { left: 0; }

.abl-nav-group-label { display: block; font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--abl-orange); padding: 14px 16px 4px; pointer-events: none; user-select: none; }
.abl-nav-divider { height: 1px; background: var(--abl-border); margin: 4px 0; }
.abl-nav-drawer a { display: block; font-family: var(--font-display); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--abl-text-dim); padding: var(--abl-nav-pad-v) 20px; border-bottom: 1px solid var(--abl-border); transition: color .15s ease, background .15s ease, padding-left .15s ease; }
.abl-nav-drawer a:hover { color: var(--abl-text); background: var(--abl-surface-raised); padding-left: 26px; }
.abl-nav-drawer a.active { color: var(--abl-orange-bright); background: var(--abl-surface-raised); border-left: 3px solid var(--abl-orange); padding-left: 17px; }

/* ============================================================
   PAGE CONTAINER
   ============================================================ */
.abl-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 16px 0;
  position: relative;
}

/* Subtle team logo watermark, set per-page via inline style
   (--abl-watermark) in update_site.py. Purely decorative, sits
   behind all content and never intercepts clicks/scroll. */
.abl-container::before {
  content: '';
  position: fixed;
  top: 50%;
  right: -60px;
  transform: translateY(-50%);
  width: 480px;
  height: 480px;
  background-image: var(--abl-watermark, none);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}

html.light-mode .abl-container::before,
html.theme-eggshell .abl-container::before,
html.theme-light-grey .abl-container::before {
  opacity: 0.06;
}

.abl-container > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .abl-container::before { width: 320px; height: 320px; right: -100px; }
}

@media (max-width: 600px) {
  .abl-container::before { display: none !important; }
}

table[width="800"] {
  width: 100% !important;
  max-width: 1100px;
  margin: 0 auto 16px auto;
  border-collapse: collapse;
}

/* ============================================================
   PAGE / SECTION TITLES
   These keep using each page's own color value via currentColor
   where possible, but get the dark-theme treatment for layout.
   ============================================================ */
td.newheader, td.plainheader {
  background: transparent !important;
  font-family: var(--font-display) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: 1px;
  color: var(--abl-text) !important;
  text-transform: uppercase;
  border-left: 5px solid var(--abl-orange);
  padding: 4px 0 4px 14px !important;
  display: block;
}

/* team banner header - keep the team's own background color,
   upgrade typography, spacing, and visual weight */
td.teamheader {
  font-family: var(--font-display) !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 16px 20px 6px !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  line-height: 1.1;
}

td.teamheader2 {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.8px;
  padding: 3px 20px !important;
  opacity: 0.85;
}

td.teamheader2:last-child {
  padding-bottom: 14px !important;
}

td.tableheader {
  background: transparent !important;
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
  color: var(--abl-orange-bright) !important;
  text-transform: uppercase;
  padding: 14px 4px 8px !important;
  border: none !important;
}

/* ============================================================
   TABLES
   td.header keeps each page's own team-color background;
   we only adjust typography/spacing here.
   ============================================================ */
td.header {
  font-family: var(--font-display) !important;
  font-size: var(--abl-header-font) !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: var(--abl-row-pad-v) var(--abl-row-pad-h) !important;
  border: none !important;
  white-space: nowrap;
}

td.headerbg {
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 8px 10px !important;
  border: none !important;
}

/* sortable header interaction */
td.header[data-sort-key] {
  cursor: pointer;
  transition: filter .15s ease;
  user-select: none;
}
td.header[data-sort-key]:hover {
  filter: brightness(1.25);
}
td.header.active-sort {
  filter: brightness(0.8);
  box-shadow: inset 0 -3px 0 #fff;
}

/* data cells */
td.main {
  background: transparent;
  color: var(--abl-text) !important;
  font-size: var(--abl-row-font) !important;
  font-weight: 400 !important;
  padding: var(--abl-row-pad-v) var(--abl-row-pad-h) !important;
  border-bottom: 1px solid var(--abl-border);
  white-space: nowrap;
}

tr.row1 td.main { background: var(--abl-row) !important; }
tr.row2 td.main { background: var(--abl-row-alt) !important; }

/* favorite team highlight (set via Settings page) */
tr.abl-fav-team-row td.main {
  background: rgba(253, 82, 2, 0.12) !important;
  box-shadow: inset 3px 0 0 var(--abl-orange);
}
tr.abl-fav-team-row:hover td.main {
  background: rgba(253, 82, 2, 0.2) !important;
}

tr.row1:hover td.main,
tr.row2:hover td.main {
  background: var(--abl-surface-raised) !important;
}

/* team color banner rows (keep their color, clean up text) */
tr.teamcolor td {
  font-family: var(--font-display) !important;
  letter-spacing: 0.5px;
}

/* ============================================================
   LINKS
   ============================================================ */
a.linkmain, a.linkmain font {
  color: #ff9152 !important;
  font-weight: 600 !important;
  transition: color .15s ease;
}
a.linkmain:hover {
  color: #fff !important;
  text-decoration: underline;
}

a.linkhuman, a.linkhuman font {
  color: #6fb8ff !important;
  font-weight: 600 !important;
  transition: color .15s ease;
}
a.linkhuman:hover {
  color: #fff !important;
  text-decoration: underline;
}

/* ============================================================
   CUR / FUT RATING DOTS  ->  circular badges
   ============================================================ */
td.main table {
  width: auto !important;
  height: auto !important;
  border-collapse: collapse !important;
  margin: 0 auto !important;
  display: inline-block !important;
}

td.main table td[bgcolor] {
  width: 14px !important;
  height: 14px !important;
  padding: 0 !important;
  border: 2px solid var(--abl-bg) !important;
  border-radius: 50% !important;
  display: block !important;
  box-shadow: 0 0 4px rgba(0,0,0,.6);
}

/* team banner row — add gradient depth and bottom border */
tr.teamrowcolor {
  position: relative;
}

/* The banner table itself — add bottom border and shadow */
tr.teamrowcolor td {
  border-bottom: none !important;
}

table[width="800"]:has(tr.teamrowcolor) {
  border-bottom: 3px solid rgba(255,255,255,0.15);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  margin-bottom: 20px !important;
  border-radius: 0 0 4px 4px;
  overflow: hidden;
}

/* ============================================================
   TEAM LOGO IN BANNER — circular badge with white ring + shadow
   ============================================================ */
/* The logo cell itself */
td.header[width="75"],
td.header[rowspan="3"] {
  padding: 12px 8px 12px 14px !important;
  vertical-align: middle !important;
}

td.header img {
  display: block;
  width: 80px !important;
  height: 80px !important;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.2),
    0 4px 16px rgba(0,0,0,0.5),
    0 0 20px rgba(0,0,0,0.3);
  object-fit: contain;
  background: rgba(0,0,0,0.15);
  transition: transform .2s ease, box-shadow .2s ease;
}

td.header img:hover {
  transform: scale(1.06);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.2),
    0 6px 24px rgba(0,0,0,0.6),
    0 0 30px rgba(0,0,0,0.4);
}

/* The spacer cell between logo and text */
td.header[width="12"] {
  padding: 0 !important;
  width: 12px !important;
}

/* ============================================================
   FOOTER CREDIT LINE
   ============================================================ */
font[size="2"] {
  color: var(--abl-text-dim) !important;
  font-size: 11px !important;
}
font[size="2"] a.linkmain {
  color: var(--abl-text-dim) !important;
  font-weight: 400 !important;
}
font[size="2"] a.linkmain:hover {
  color: var(--abl-orange-bright) !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 720px) {
  .abl-logo-wrap .abl-wordmark { display: none; }
  td.newheader, td.plainheader { font-size: 20px !important; }
  td.teamheader { font-size: 22px !important; padding: 12px 12px 4px !important; }
  td.teamheader2 { padding: 2px 12px !important; }
  td.header img { width: 60px !important; height: 60px !important; }
  td.header[width="75"], td.header[rowspan="3"] { padding: 10px 6px 10px 10px !important; }
  td.tableheader { font-size: 14px !important; }
  td.main, td.header { font-size: 11px !important; padding: 6px 4px !important; }
}

/* ============================================================
   STREAK BADGES & PLAYOFF LINE (decorated by polish.js)
   ============================================================ */
.abl-streak-badge { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.abl-streak-badge.hot { color: #ff7a33; }
.abl-streak-badge.cold { color: #6fb8ff; }

.abl-playoff-line-row td { padding: 0 !important; border: none !important; background: transparent !important; }
.abl-playoff-line { position: relative; display: flex; align-items: center; justify-content: center; height: 22px; margin: 2px 0; }
.abl-playoff-line::before, .abl-playoff-line::after {
  content: '';
  flex: 1 1 auto;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--abl-orange) 0, var(--abl-orange) 6px, transparent 6px, transparent 12px);
}
.abl-playoff-line span {
  flex: 0 0 auto;
  padding: 0 10px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--abl-orange-bright);
  white-space: nowrap;
}

/* per-team color accent (standings/leaders rows, injected by update_site.py) */
tr[data-team-accent] td.main:first-child {
  box-shadow: inset 4px 0 0 var(--abl-team-accent, transparent);
  padding-left: 9px !important;
}
tr.abl-fav-team-row[data-team-accent] td.main:first-child {
  box-shadow: inset 4px 0 0 var(--abl-orange);
}

/* ============================================================
   STAT BARS (leaders pages, added by polish.js)
   ============================================================ */
.abl-stat-bar-wrap { position: relative; display: flex; align-items: center; min-width: 60px; height: 100%; }
.abl-stat-bar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(253, 82, 2, 0.18); border-right: 2px solid var(--abl-orange); border-radius: 0 2px 2px 0; pointer-events: none; }
.abl-stat-val { position: relative; z-index: 1; padding: 0 4px; font-size: var(--abl-row-font); color: var(--abl-text); white-space: nowrap; }

/* ============================================================
   TEAM BANNER QUICK-STAT PILLS (added by polish.js)
   ============================================================ */
.abl-team-pills { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px 14px; max-width: 1100px; margin: 0 auto; }
.abl-team-pill { display: inline-flex; align-items: center; background: var(--abl-surface-raised); border: 1px solid var(--abl-border); border-radius: 20px; padding: 4px 12px; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--abl-text-dim); white-space: nowrap; }

/* ============================================================
   GM TROPHY ICONS (added by polish.js on coach/GM pages)
   ============================================================ */
.abl-gm-trophies { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; margin-left: 10px; flex-wrap: wrap; }
.abl-trophy { display: inline-flex; align-items: center; cursor: default; transition: transform .15s ease, filter .15s ease; position: relative; }
.abl-trophy:hover { transform: scale(1.4) translateY(-2px); filter: brightness(1.15); z-index: 10; }
.abl-trophy::after { content: attr(title); position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.85); color: #fff; font-family: var(--font-body); font-size: 11px; font-weight: 600; white-space: nowrap; padding: 4px 8px; border-radius: 4px; pointer-events: none; opacity: 0; transition: opacity .15s ease; z-index: 100; }
.abl-trophy:hover::after { opacity: 1; }

/* championship ticker card */
.abl-champ-card { display:inline-flex !important; align-items:center; gap:10px; padding:0 18px !important; background:linear-gradient(135deg,#1a1200 0%,#2d1f00 100%) !important; border-right:1px solid #b8860b !important; border-left:3px solid #FFD700 !important; flex-shrink:0; }
.abl-champ-trophy { font-size:20px; line-height:1; filter:drop-shadow(0 0 6px rgba(255,215,0,0.6)); animation:trophy-pulse 2s ease-in-out infinite; }
@keyframes trophy-pulse { 0%,100%{filter:drop-shadow(0 0 4px rgba(255,215,0,0.5))}50%{filter:drop-shadow(0 0 10px rgba(255,215,0,0.9))} }
.abl-champ-text { display:flex; flex-direction:column; gap:1px; }
.abl-champ-label { font-family:var(--font-display); font-size:9px; font-weight:700; letter-spacing:1.5px; color:#b8860b; text-transform:uppercase; line-height:1; }
.abl-champ-winner { font-family:var(--font-display); font-size:15px; font-weight:700; color:#FFD700; letter-spacing:1px; line-height:1.1; text-shadow:0 0 8px rgba(255,215,0,0.4); }


/* player search in nav drawer + player card popup */
.abl-nav-search-section{padding-bottom:8px}
.abl-nav-search-wrap{padding:8px 12px}
.abl-nav-search-input{display:block;width:100%;background:var(--abl-surface-raised);border:1px solid var(--abl-border);border-radius:6px;padding:8px 11px;font-family:var(--font-body);font-size:13px;color:var(--abl-text)}
.abl-nav-search-input:focus{outline:none;border-color:var(--abl-orange)}
.abl-nav-search-results{max-height:280px;overflow-y:auto}
.abl-nav-search-hint{padding:8px 14px;font-size:11px;color:var(--abl-text-dim)}
.abl-nav-search-result{display:flex;flex-direction:column;gap:2px;padding:9px 14px;border-bottom:1px solid var(--abl-border);cursor:pointer}
.abl-nav-search-result:hover{background:var(--abl-surface-raised)}
.abl-nsr-name{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--abl-text)}
.abl-nsr-meta{font-size:11px;color:var(--abl-text-dim)}
.abl-player-card-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:1200}
.abl-player-card-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:520px;max-width:95vw;max-height:80vh;background:var(--abl-surface);border:1px solid var(--abl-border);border-radius:12px;z-index:1300;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,0.6);overflow:hidden}
.abl-player-card-close{position:absolute;top:12px;right:12px;background:var(--abl-surface-raised);border:1px solid var(--abl-border);border-radius:50%;width:28px;height:28px;font-size:14px;cursor:pointer;color:var(--abl-text-dim);display:flex;align-items:center;justify-content:center;z-index:10}
#abl-player-card-body{overflow-y:auto;flex:1}
.abl-pc-header{padding:20px 20px 14px;border-bottom:1px solid var(--abl-border);background:var(--abl-surface-raised)}
.abl-pc-name{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--abl-text);text-transform:uppercase;letter-spacing:1px}
.abl-pc-meta{font-size:13px;color:var(--abl-orange-bright);margin-top:3px;font-family:var(--font-display)}
.abl-pc-sub{font-size:12px;color:var(--abl-text-dim);margin-top:4px}
.abl-pc-loading{padding:30px;text-align:center;color:var(--abl-text-dim);font-size:14px}
.abl-pc-ratings{padding:12px 20px}
.abl-pc-ratings-header{display:grid;grid-template-columns:1fr 48px 48px;gap:8px;padding:6px 0;font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--abl-text-dim);border-bottom:1px solid var(--abl-border);margin-bottom:4px}
.abl-pc-row{display:grid;grid-template-columns:1fr 48px 48px;gap:8px;padding:5px 0;border-bottom:1px solid var(--abl-border);align-items:center}
.abl-pc-label{font-size:12px;color:var(--abl-text-dim)}
.abl-pc-val{font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--abl-orange-bright);text-align:center}
.abl-pc-pot{font-size:12px;color:var(--abl-text-dim);text-align:center}
.abl-pc-link{display:block;padding:14px 20px;font-family:var(--font-display);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--abl-orange-bright);border-top:1px solid var(--abl-border);text-decoration:none;text-align:center}
.abl-pc-link:hover{background:var(--abl-surface-raised);text-decoration:none}
.abl-search-btn{display:none}
.abl-search-panel,.abl-search-overlay{display:none !important}

.abl-pc-section-label{font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--abl-orange-bright);padding:8px 0 4px}