@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100vh}

/* ── TOKENS ── */
:root{
  --bg:    #0d0f14;
  --bg2:   #111318;
  --bg3:   #161920;
  --bg4:   #1a1d24;
  --accent:     #00FFB3;
  --accent2:    rgba(0,255,179,0.08);
  --accent3:    rgba(0,255,179,0.16);
  --accent-dim: #00cc8f;
  --white:  #e2e4ea;
  --muted:  #3a4050;
  --muted2: #6b7280;
  --muted3: #9ca3af;
  --green:  #00FFB3;
  --green2: rgba(0,255,179,0.09);
  --red:    #f87171;
  --red2:   rgba(248,113,113,0.09);
  --border:  rgba(0,255,179,0.08);
  --border2: rgba(0,255,179,0.18);
  --borderg: rgba(255,255,255,0.06);
  --font-body: 'Inter',sans-serif;
  --font-mono: 'IBM Plex Mono',monospace;
}

body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--white);
  font-size:13px;
  line-height:1.5;
  background-image:
    radial-gradient(ellipse at 15% 0%,rgba(0,255,179,0.04) 0%,transparent 55%),
    radial-gradient(ellipse at 85% 100%,rgba(0,255,179,0.02) 0%,transparent 50%);
}

a{text-decoration:none;color:inherit}
a:hover{color:var(--accent)}
img{vertical-align:middle}

/* ── OCTOPUS ANIMATION ── */
@keyframes octo-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes tentacle-wave{0%,100%{transform:rotate(0deg)}50%{transform:rotate(6deg)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* ── HEADER / NAV ── */
.block{
  background:rgba(13,15,20,0.97);
  border-bottom:1px solid var(--border);
  padding:0;
  position:sticky;
  top:0;
  z-index:100;
}

.headerblock{
  display:flex;
  align-items:center;
  padding:0 24px;
  height:54px;
  gap:0;
  border-bottom:none !important;
}

/* Logo area — inject octopus + wordmark via PHP, but style it here */
.title{
  display:flex;
  align-items:center;
  gap:10px;
  margin-right:20px;
  text-decoration:none;
}
.title a{display:flex;align-items:center;gap:10px}
.title img{
  width:34px;height:34px;
  animation:octo-bob 2.4s ease-in-out infinite;
}

/* Wordmark text next to logo */


/* Hide default HLstats logo image, we use the octopus */
.title img[src*="title.png"]{display:none}

/* Game tabs */
.header_gameslist{
  display:flex;
  gap:4px;
  list-style:none;
  margin:0;
  padding:0;
}
#header_gameslist{
  display:flex;
  gap:4px;
  list-style:none;
  margin:0;
  padding:0;
}
#header_gameslist li a,
.header_gameslist li a{
  display:flex;
  align-items:center;
  padding:4px 8px;
  border-radius:4px;
  border:1px solid var(--borderg);
  transition:border-color .15s,background .15s;
}
#header_gameslist li a:hover,
#header_gameslist li a:has(#gameslist-active-game){
  border-color:var(--accent);
  background:var(--accent2);
}
#header_gameslist li a img{height:18px;width:auto}

/* Nav tabs (Contents, Search, Help) */
.headertabs{margin-left:8px}
.headertabs ul{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.headertabs ul li a{
  display:flex;align-items:center;
  padding:6px 10px;
  border-radius:4px;
  border:1px solid transparent;
  font-size:12px;
  font-weight:500;
  color:var(--muted);
  letter-spacing:.02em;
  transition:all .15s;
}
.headertabs ul li a:hover{
  color:var(--muted3);
  border-color:var(--borderg);
  background:var(--bg3);
}
.headertabs ul li a img{display:none} /* hide icons, use text */

/* Member count badge — rightmost */
.header_gameslist+div,.headertabs+*{margin-left:auto}

/* ── ANNOUNCEMENT BANNER ── */
/* We inject this via header.php — but style it in case */
.announce-bar{
  background:var(--accent2);
  border-bottom:1px solid var(--border);
  padding:8px 24px;
  display:flex;align-items:center;gap:12px;
  font-size:12px;color:var(--muted2);
  overflow:hidden;
}
.announce-tag{
  background:var(--accent);
  color:#0d0f14;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:3px;
  white-space:nowrap;
  flex-shrink:0;
}

/* ── BREADCRUMB ── */
.location{
  background:var(--bg2);
  border-bottom:1px solid var(--borderg);
  padding:7px 24px;
  font-size:11px;
  color:var(--muted);
}
.location ul{
  display:flex;gap:5px;align-items:center;
  list-style:none;margin:0;padding:0;flex-wrap:wrap;
}
.location li{display:flex;align-items:center;gap:5px}
.location .arrow{color:var(--bg4)}
.location strong,.location a{color:var(--muted2)}
.location strong{color:var(--muted3)}
.location_under{display:none}

/* ── MAIN CONTENT ── */
.content{
  max-width:1280px;
  margin:0 auto;
  padding:24px;
}

/* ── SECTION HEADERS ── */
.fSmall b,.block_title,h3{
  display:block;
  font-family:var(--font-mono);
  font-size:9.5px;
  font-weight:500;
  color:var(--muted);
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:1px solid var(--borderg);
}

/* ── NAV TABS (fancyNav) ── */
ul.fancyNav{
  display:flex;flex-wrap:wrap;gap:2px;
  list-style:none;margin:0 0 20px;padding:0;
  border-bottom:1px solid var(--borderg);
  padding-bottom:12px;
}
ul.fancyNav li a.fHeading{
  display:inline-block;
  padding:6px 14px;
  font-size:12px;font-weight:500;
  letter-spacing:.04em;
  color:var(--muted);
  border:1px solid transparent;
  border-radius:4px;
  transition:all .15s;
}
ul.fancyNav li a.fHeading:hover{
  color:var(--white);
  border-color:var(--borderg);
  background:var(--bg3);
}

/* ── SERVER CARDS ── */
/* Server list table gets a card wrapper feel */
table[width="100%"]:first-of-type td[bgcolor],
.server-card{
  background:var(--bg2);
  border:1px solid var(--borderg);
  border-radius:6px;
  padding:13px 16px;
}

/* ── TABLES ── */
table{
  width:100%;
  border-collapse:collapse;
  font-family:var(--font-body);
  background:transparent;
}

/* Table wrapper */
table.servers,
div.table-wrap table,
.content>table{
  background:var(--bg2);
  border:1px solid var(--borderg);
  border-radius:6px;
  overflow:hidden;
}

/* Header row */
tr.header,
thead tr,
tr[class*="header"]{
  border-bottom:1px solid var(--border) !important;
}
tr.header td,tr.header th,
thead th,thead td,
td.fSmall[bgcolor]{
  background:var(--bg2) !important;
  color:var(--accent) !important;
  font-family:var(--font-mono) !important;
  font-size:9.5px !important;
  font-weight:500 !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  padding:11px 14px !important;
  border-bottom:1px solid var(--border) !important;
  white-space:nowrap;
}

/* Data rows */
tr td{
  padding:11px 14px !important;
  border-bottom:1px solid rgba(255,255,255,0.04) !important;
  color:var(--white) !important;
  vertical-align:middle !important;
  background:transparent !important;
}
tr:last-child td{border-bottom:none !important}
tr:hover td{background:rgba(0,255,179,0.025) !important}

tr.odd td{background:var(--bg2) !important}
tr.even td{background:var(--bg3) !important}
tr.odd:hover td,tr.even:hover td{background:rgba(0,255,179,0.04) !important}

/* Rank column */
td:first-child{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--muted);
}
/* Top 3 gold/silver/bronze */
tr:nth-child(2) td:first-child{color:#c9922a}
tr:nth-child(3) td:first-child{color:#6b7280}
tr:nth-child(4) td:first-child{color:#6b5a3e}

/* Numeric cells */
td[align="right"],td[align="center"]{
  font-family:var(--font-mono);
  font-size:12px;
}

/* Skill score — accent color */
.fLarge,.fMediumLarge,.fHeading{
  font-weight:600;
  color:var(--accent);
}

/* Player name links */
td a{color:var(--white);font-weight:500}
td a:hover{color:var(--accent)}

/* Positive/negative numbers */
td[style*="color: green"],td[style*="color:green"],
span[style*="color: green"],span[style*="color:green"],
font[color="green"]{color:var(--accent) !important}

td[style*="color: red"],td[style*="color:red"],
span[style*="color: red"],span[style*="color:red"],
font[color="red"]{color:var(--red) !important}

/* Country flags */
td img[src*="flags"]{
  border-radius:2px;
  vertical-align:middle;
  height:11px;width:auto;
}

/* Game icons */
td img[src*="games"]{height:18px;width:auto}

/* ── MINI SKILL BARS ── */
/* HLstats uses <table> for skill bars — we style them */
table[width="100"][height="10"],
table[width="100%"][height="10"]{
  height:3px !important;
  border-radius:2px;
  overflow:hidden;
  background:var(--bg4) !important;
  border:none !important;
}
table[width="100"][height="10"] td,
table[width="100%"][height="10"] td{
  padding:0 !important;
  height:3px !important;
  border:none !important;
}
td[bgcolor="#52BE80"],td[bgcolor="#27AE60"],
td[style*="background-color: #52"],
td[bgcolor="#00FF00"],td[bgcolor="green"]{
  background:var(--accent) !important;
}

/* ── SEARCH / FORMS ── */
input[type="text"],input[type="search"],input[type="password"],
input[type="number"],select,textarea{
  background:var(--bg3) !important;
  border:1px solid var(--borderg) !important;
  border-radius:4px;
  color:var(--white) !important;
  font-family:var(--font-body);
  padding:7px 10px;
  font-size:12px;
  outline:none;
  transition:border-color .15s;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px rgba(0,255,179,0.1);
}
input[type="submit"],button,input[type="button"]{
  background:var(--accent) !important;
  color:#0d0f14 !important;
  border:none !important;
  border-radius:4px;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:7px 16px;
  cursor:pointer;
  transition:background .15s;
}
input[type="submit"]:hover,button:hover{background:var(--accent-dim) !important}

/* JOIN button for servers */
a[href*="connect"],a[href*="steam://connect"]{
  font-size:10px;
  font-weight:700;
  color:var(--accent) !important;
  border:1px solid rgba(0,255,179,0.25);
  border-radius:3px;
  padding:4px 10px;
  background:rgba(0,255,179,0.06);
  font-family:var(--font-mono);
  letter-spacing:.06em;
  white-space:nowrap;
}

/* ── WARNING / INFO BLOCKS ── */
.warning,div[class*="warning"]{
  background:rgba(248,113,113,0.06) !important;
  border:1px solid rgba(248,113,113,0.2) !important;
  border-radius:6px;
  padding:14px 16px;
  color:#fca5a5;
}
.warning .fHeading{color:var(--red)}

div[class*="info"],div[class*="notice"]{
  background:var(--accent2);
  border:1px solid var(--border);
  border-radius:6px;
  padding:14px 16px;
}

/* ── ADMIN PANEL ── */
/* Admin sidebar links */
td img[src*="rightarrow"]{
  filter:hue-rotate(130deg) saturate(3) brightness(1.5);
}
td img[src*="downarrow"]{
  filter:hue-rotate(130deg) saturate(3) brightness(1.5);
}

/* Admin section titles */
td>b>a{color:var(--white) !important;font-weight:600}
td>b>a:hover{color:var(--accent) !important}

/* ── PAGINATION ── */
.pagination a,.pageNav a,
a[href*="page="]{
  display:inline-block;
  padding:4px 9px;
  border:1px solid var(--borderg);
  border-radius:3px;
  font-size:11px;
  font-family:var(--font-mono);
  color:var(--muted2);
  margin:0 1px;
  transition:all .15s;
}
.pagination a:hover,.pageNav a:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:var(--accent2);
}

/* ── MAP / LEAFLET ── */
.leaflet-container{border-radius:6px;border:1px solid var(--borderg)}
.leaflet-tile-pane{filter:brightness(0.7) saturate(0.4)}

/* ── GRAPHS ── */
img[src*="graph"],img[src*="trend"],img[src*="chart"]{
  border-radius:4px;
  border:1px solid var(--borderg);
}

/* ── FOOTER ── */
#footer{
  text-align:center;
  padding:28px 24px;
  border-top:1px solid var(--borderg);
  margin-top:40px;
}
#footer img{filter:brightness(0) invert(1);opacity:0.15}
.fSmall{color:var(--muted) !important;font-size:11px !important}
.fSmall a{color:var(--muted2) !important}
.fSmall a:hover{color:var(--accent) !important}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--borderg);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--accent-dim)}

/* ── MISC OVERRIDES ── */
.fNormal{font-size:13px;color:var(--white)}
font[size]{color:inherit !important}
td[bgcolor="#EFEFEF"],td[bgcolor="#efefef"],
td[bgcolor="#F5F5F5"],td[bgcolor="#f5f5f5"],
td[bgcolor="#FFFFFF"],td[bgcolor="#ffffff"],
td[bgcolor="white"]{background:var(--bg2) !important}
td[bgcolor="#CCCCCC"],td[bgcolor="#cccccc"],
td[bgcolor="#DDDDDD"],td[bgcolor="#dddddd"]{background:var(--bg3) !important}

/* ── NUCLEAR OVERRIDES ── */
body,html{background:#0d0f14 !important;color:#e2e4ea !important}
div,td,th,tr,table,span,p,li,ul,ol{color:inherit}
.headerblock{background:#111318 !important}
.block{background:#111318 !important}
/* Hide the giant HLSTATSX:CE banner image in the page body */
div.headerblock>div.title+div,
div[style*="background-image"],
img[src*="title-bg"],
img[alt="HLstatsX Community Edition"][width],
.header_img{display:none !important}
/* Force table backgrounds */
table td,table th{background:transparent !important}
tr.odd td{background:#111318 !important}
tr.even td{background:#161920 !important}

/* ══════════════════════════════════════
   SUBTICK STATS — PATCH v2
   Targeted fixes over hlstats.css
   ══════════════════════════════════════ */

/* ── NAV HEIGHT & LAYOUT ── */
.block { padding:0 !important; background:#111318 !important; border-bottom:1px solid rgba(0,255,179,0.1) !important; position:sticky !important; top:0 !important; z-index:100 !important; }

.headerblock {
  display:flex !important;
  align-items:center !important;
  height:52px !important;
  padding:0 24px !important;
  gap:16px !important;
  background:#111318 !important;
  border-bottom:none !important;
  flex-wrap:nowrap !important;
}

/* Title area — force single row */
.headerblock .title {
  display:flex !important;
  align-items:center !important;
  flex-shrink:0 !important;
  margin-right:8px !important;
}

.headerblock .title a {
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  text-decoration:none !important;
  line-height:1 !important;
}

/* Hide duplicate "subtick" text node — the wordmark is in .st-wm */
.headerblock .title a > *:not(.st-octo):not(span[style]) { display:none !important; }

/* Wordmark sizing */
.st-wm { font-size:14px !important; line-height:1 !important; }
.st-sub { font-size:8px !important; margin-top:2px !important; }

/* Octopus size */
.st-octo svg { width:30px !important; height:30px !important; }

/* ── GAME ICONS LIST ── */
.header_gameslist, #header_gameslist {
  display:flex !important;
  gap:4px !important;
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  align-items:center !important;
}

#header_gameslist li { list-style:none !important; }

#header_gameslist li a {
  display:flex !important;
  align-items:center !important;
  padding:4px 8px !important;
  border-radius:4px !important;
  border:1px solid rgba(255,255,255,0.07) !important;
  background:transparent !important;
  transition:all .15s !important;
  height:32px !important;
}

#header_gameslist li a:hover {
  border-color:#00FFB3 !important;
  background:rgba(0,255,179,0.08) !important;
}

#header_gameslist li a img { height:18px !important; width:auto !important; }

/* ── NAV TABS (Contents/Search/Help) ── */
.headertabs { margin-left:auto !important; }
.headertabs ul { display:flex !important; gap:2px !important; list-style:none !important; margin:0 !important; padding:0 !important; align-items:center !important; }
.headertabs ul li { list-style:none !important; }

.headertabs ul li a {
  display:flex !important;
  align-items:center !important;
  padding:6px 12px !important;
  height:32px !important;
  border-radius:4px !important;
  border:1px solid transparent !important;
  font-size:11px !important;
  font-weight:500 !important;
  font-family:'Inter',sans-serif !important;
  color:#3a4050 !important;
  letter-spacing:.04em !important;
  transition:all .15s !important;
  white-space:nowrap !important;
}

.headertabs ul li a img { display:none !important; }

/* Inject text labels via CSS */
.headertabs ul li:nth-child(1) a::after { content:'Contents' }
.headertabs ul li:nth-child(2) a::after { content:'Search' }
.headertabs ul li:nth-child(3) a::after { content:'Help' }
.headertabs ul li:nth-child(4) a::after { content:'SourceBans' }
.headertabs ul li:nth-child(5) a::after { content:'Forum' }

.headertabs ul li a:hover {
  color:#9ca3af !important;
  border-color:rgba(255,255,255,0.07) !important;
  background:#161920 !important;
}

/* ── BREADCRUMB ── */
.location {
  background:#0d0f14 !important;
  border-bottom:1px solid rgba(255,255,255,0.05) !important;
  padding:7px 24px !important;
  font-size:11px !important;
  color:#3a4050 !important;
  font-family:'IBM Plex Mono',monospace !important;
  letter-spacing:.02em !important;
}
.location ul { display:flex !important; gap:6px !important; align-items:center !important; list-style:none !important; margin:0 !important; padding:0 !important; }
.location li { list-style:none !important; display:flex !important; align-items:center !important; gap:6px !important; }
.location a { color:#6b7280 !important; }
.location strong { color:#9ca3af !important; font-weight:500 !important; }
.location .arrow { color:#1f2937 !important; }
.location_under { display:none !important; }

/* ── CONTENT AREA ── */
.content {
  max-width:1280px !important;
  margin:0 auto !important;
  padding:24px !important;
  background:transparent !important;
  color:#e2e4ea !important;
}

/* ── FANCY NAV TABS ── */
ul.fancyNav {
  display:flex !important;
  flex-wrap:wrap !important;
  gap:2px !important;
  list-style:none !important;
  margin:0 0 24px !important;
  padding:0 0 12px !important;
  border-bottom:1px solid rgba(255,255,255,0.06) !important;
}
ul.fancyNav li { list-style:none !important; }
ul.fancyNav li a.fHeading {
  display:inline-block !important;
  padding:6px 14px !important;
  font-size:12px !important;
  font-weight:500 !important;
  font-family:'Inter',sans-serif !important;
  letter-spacing:.03em !important;
  color:#3a4050 !important;
  border:1px solid transparent !important;
  border-radius:4px !important;
  transition:all .15s !important;
}
ul.fancyNav li a.fHeading:hover {
  color:#e2e4ea !important;
  border-color:rgba(255,255,255,0.07) !important;
  background:#161920 !important;
}

/* ── SECTION HEADINGS ── */
.location+.content b,
h3, .fSmall b,
div>b:first-child {
  font-family:'IBM Plex Mono',monospace !important;
  font-size:9.5px !important;
  font-weight:500 !important;
  color:#3a4050 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}

/* ── TABLE WRAPPERS ── */
.content>table, .content table {
  border:1px solid rgba(255,255,255,0.06) !important;
  border-radius:6px !important;
  overflow:hidden !important;
  background:#111318 !important;
  margin-bottom:20px !important;
}

/* ── TABLE HEADERS — strong accent ── */
tr.header td, tr.header th,
table thead td, table thead th,
td.fSmall[bgcolor], th {
  background:#111318 !important;
  color:#00FFB3 !important;
  font-family:'IBM Plex Mono',monospace !important;
  font-size:9.5px !important;
  font-weight:600 !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  padding:11px 14px !important;
  border-bottom:1px solid rgba(0,255,179,0.12) !important;
  white-space:nowrap !important;
}

/* ── TABLE ROWS ── */
tr td {
  padding:11px 14px !important;
  border-bottom:1px solid rgba(255,255,255,0.04) !important;
  color:#e2e4ea !important;
  vertical-align:middle !important;
}
tr:last-child td { border-bottom:none !important; }
tr:hover td { background:rgba(0,255,179,0.03) !important; }
tr.odd td { background:#111318 !important; }
tr.even td { background:#161920 !important; }
tr.odd:hover td, tr.even:hover td { background:rgba(0,255,179,0.05) !important; }

/* Rank number */
tr td:first-child {
  font-family:'IBM Plex Mono',monospace !important;
  font-size:11px !important;
  color:#3a4050 !important;
}

/* Numeric right-aligned cells */
tr td[align="right"] {
  font-family:'IBM Plex Mono',monospace !important;
  font-size:12px !important;
}

/* Player name */
tr td a { color:#d1d5db !important; font-weight:500 !important; }
tr td a:hover { color:#00FFB3 !important; }

/* Skill score accent */
tr td:last-child { color:#00FFB3 !important; font-family:'IBM Plex Mono',monospace !important; font-size:12px !important; font-weight:500 !important; }

/* Positive KD */
font[color="green"], span[style*="color: green"], td[style*="color: green"] { color:#00FFB3 !important; }
font[color="red"], span[style*="color: red"], td[style*="color: red"] { color:#f87171 !important; }

/* ── JOIN BUTTON ── */
a[href*="steam://connect"],
td a[href*="Join"],
td a:contains("Join") {
  font-size:10px !important;
  font-weight:700 !important;
  color:#00FFB3 !important;
  border:1px solid rgba(0,255,179,0.25) !important;
  border-radius:3px !important;
  padding:4px 10px !important;
  background:rgba(0,255,179,0.06) !important;
  font-family:'IBM Plex Mono',monospace !important;
  letter-spacing:.06em !important;
}

/* ── FOOTER ── */
#footer { text-align:center !important; padding:28px !important; border-top:1px solid rgba(255,255,255,0.05) !important; margin-top:32px !important; }
#footer img { filter:brightness(0) invert(1) !important; opacity:0.12 !important; }
.fSmall { color:#3a4050 !important; font-size:11px !important; }
.fSmall a { color:#6b7280 !important; }
.fSmall a:hover { color:#00FFB3 !important; }


/* ══ NITPICK FIXES v3 ══ */

/* Max-width constraint — override sourcebans.css 1590px */
body { max-width:none !important; }
.content { max-width:1240px !important; margin:0 auto !important; padding:24px !important; }

/* Fix: only Skill column should be green, not ALL last-child */
tr td:last-child { color:#00FFB3 !important; font-family:'IBM Plex Mono',monospace !important; }
/* But reset columns that aren't skill — HS:K is second to last area */
tr td:nth-child(1) { color:#3a4050 !important; }
tr td:nth-child(3),tr td:nth-child(4),tr td:nth-child(5),
tr td:nth-child(6),tr td:nth-child(7),tr td:nth-child(8),
tr td:nth-child(9),tr td:nth-child(10) { color:#9ca3af !important; }

/* Fix: tracking text muted not green */
.content > p, .content > div > p,
p { color:#6b7280 !important; font-size:12px !important; }

/* Fix: restore Leaflet map but make it dark */
.leaflet-container { display:block !important; border-radius:6px !important; border:1px solid rgba(255,255,255,0.06) !important; height:200px !important; }
.leaflet-tile { filter:brightness(0.5) saturate(0.3) !important; }
.leaflet-control-attribution { background:rgba(13,15,20,0.8) !important; color:#3a4050 !important; }
.leaflet-control-attribution a { color:#6b7280 !important; }

/* Fix: hide duplicate Server Load Graph link that appears twice */
a[href*="graph"]:not(:first-of-type) { display:none !important; }

/* Fix: nav tabs more visible */
.headertabs ul li a { color:#6b7280 !important; }
.headertabs ul li a:hover { color:#e2e4ea !important; }

/* Fix: sitename text node next to logo — hide via parent selector */
.headerblock .title { overflow:hidden !important; max-width:200px !important; }

/* Fix: body width not stretching beyond content */
body { padding:0 !important; }

/* Fix: header gameslist pushed to right correctly */
.headerblock { justify-content:flex-start !important; }
.headertabs { margin-left:auto !important; }

/* Fix: table too wide — constrain */
.content table { table-layout:auto !important; }

/* Fix: Server Load Graph section — reduce height if map empty */
#map_canvas, #leaflet-map, div[id*="map"] { 
  min-height:180px !important; 
  max-height:220px !important; 
}


/* ══ NITPICK FIXES v4 ══ */

/* Map — small, capped height */
.leaflet-container {
  height:180px !important;
  max-height:180px !important;
  min-height:180px !important;
}

/* Hide first Server Load Graph (the link before the map) */
.content > div > a[href*="graph"],
.content a[href*="load_graph"],
td[align="center"] > a[href*="graph"] { display:none !important; }

/* Table — fix ALL column colors properly */
tr td { color:#9ca3af !important; font-family:'IBM Plex Mono',monospace !important; font-size:12px !important; }
tr td:nth-child(1) { color:#3a4050 !important; }
tr td:nth-child(2) { color:#d1d5db !important; font-family:'Inter',sans-serif !important; }
tr td:nth-child(2) a { color:#d1d5db !important; font-weight:500 !important; }
tr td:nth-child(2) a:hover { color:#00FFB3 !important; }
tr td:last-child { color:#00FFB3 !important; font-weight:500 !important; }
tr.header td, tr.header th, thead td, thead th {
  color:#00FFB3 !important;
  font-size:9.5px !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
}

/* Player name cell — keep it white not mono */
td.player, td[align="left"]:nth-child(2) {
  font-family:'Inter',sans-serif !important;
  color:#d1d5db !important;
}

/* Tracking text — muted */
.content > p, p.tracking, div > p { color:#4b5563 !important; font-size:12px !important; }

/* Content max-width hard lock */
html body .content {
  max-width:1240px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}


/* ══ NITPICK FIXES v5 ══ */

/* Unbreak wordmark — remove the 200px truncation */
.headerblock .title { max-width:none !important; overflow:visible !important; }

/* Server Load Graph — hide both instances, it's useless for visitors */
td[align="center"] a[href*="graph"],
tr td[colspan] a[href*="graph"],
.content td[align="center"]:has(a[href*="graph"]) { display:none !important; }

/* Better: hide the entire server load graph row */
tr:has(> td[align="center"] > a[href*="graph"]) { display:none !important; }
tr:has(> td[colspan][align="center"]:only-child) { display:none !important; }

/* Table readability — nuclear column reset */
tr td { 
  color:#9ca3af !important; 
  font-family:'IBM Plex Mono',monospace !important; 
  font-size:11px !important;
}
tr td:first-child { color:#3a4050 !important; }
tr td a { color:#d1d5db !important; font-family:'Inter',sans-serif !important; font-size:13px !important; font-weight:500 !important; }
tr td a:hover { color:#00FFB3 !important; }
tr td:last-child { color:#00FFB3 !important; font-weight:600 !important; font-size:12px !important; }

/* Header row — force green */
tr.header td, tr.header th { 
  color:#00FFB3 !important; 
  background:#111318 !important;
  font-family:'IBM Plex Mono',monospace !important;
  font-size:9.5px !important;
  font-weight:600 !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  border-bottom:1px solid rgba(0,255,179,0.15) !important;
}

/* Row alternating — punchy */
tr.odd td { background:#111318 !important; }
tr.even td { background:#15181f !important; }
tr:hover td { background:rgba(0,255,179,0.04) !important; }

/* Map height */
.leaflet-container { height:160px !important; max-height:160px !important; }

/* Tracking text */
.content p, .content>div>p { color:#4b5563 !important; font-size:12px !important; }


/* ══ FIXES v6 ══ */

/* Double header line fix — remove bottom border from block, keep only location top */
.block { border-bottom:none !important; }
.headerblock { border-bottom:1px solid rgba(0,255,179,0.08) !important; }
.location { border-top:none !important; border-bottom:1px solid rgba(255,255,255,0.05) !important; margin-top:0 !important; }

/* Table — match server table style exactly */
tr td {
  color:#d1d5db !important;
  font-family:'IBM Plex Mono',monospace !important;
  font-size:12px !important;
  padding:10px 14px !important;
}
tr td:first-child { color:#3a4050 !important; font-size:11px !important; }
tr td:nth-child(2) { 
  color:#e2e4ea !important; 
  font-family:'Inter',sans-serif !important; 
  font-size:13px !important;
  font-weight:500 !important;
}
tr td:nth-child(2) a { color:#e2e4ea !important; font-weight:500 !important; }
tr td:nth-child(2) a:hover { color:#00FFB3 !important; }
tr td:nth-child(3), tr td:nth-child(4), tr td:nth-child(5),
tr td:nth-child(6), tr td:nth-child(7), tr td:nth-child(8),
tr td:nth-child(9), tr td:nth-child(10) { color:#9ca3af !important; }
tr td:last-child { color:#00FFB3 !important; font-weight:600 !important; }

/* Server table — same treatment */
tr.header td { 
  color:#00FFB3 !important; 
  font-family:'IBM Plex Mono',monospace !important;
  font-size:9.5px !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  background:#111318 !important;
  padding:11px 14px !important;
  border-bottom:1px solid rgba(0,255,179,0.12) !important;
}

/* Alternating rows — visible contrast */
tr.odd td { background:#111318 !important; }
tr.even td { background:#161920 !important; }
tr:hover td { background:rgba(0,255,179,0.04) !important; }

/* Tracking text — muted */
p, .content p { color:#4b5563 !important; font-size:12px !important; }


/* ══ FIXES v7 ══ */
/* Hide Server Load Graph images — both instances */
img[alt="Server Load Graph"],
img[title="serverLoadGraph"],
img[title="Server Load Graph"] { display:none !important; }
/* Hide the table row containing them too */
tr:has(img[alt="Server Load Graph"]) { display:none !important; }
tr:has(img[title="serverLoadGraph"]) { display:none !important; }
/* Hide the anchor wrapping the second one */
a:has(img[alt="Server Load Graph"]) { display:none !important; }


/* ══ FIXES v8 ══ */

/* White table fix — force ALL tables dark, no exceptions */
table, tbody, thead, tfoot, tr, td, th {
  background-color:transparent !important;
}
.content table, .content > table,
div.content table { background:#111318 !important; }
tr.odd td { background:#111318 !important; }
tr.even td { background:#161920 !important; }
tr td { background:transparent !important; }
tr:hover td { background:rgba(0,255,179,0.04) !important; }

/* Force inner table that HLstats wraps player rows in */
table table { background:transparent !important; }
table table td { background:transparent !important; }

/* Subheader line fix — the location bar is collapsing to a line */
.location {
  display:flex !important;
  align-items:center !important;
  min-height:32px !important;
  padding:6px 24px !important;
  background:#0d0f14 !important;
  border-bottom:1px solid rgba(255,255,255,0.05) !important;
  font-size:11px !important;
  color:#6b7280 !important;
}
.location ul {
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  flex-wrap:nowrap !important;
}
.location li { display:flex !important; align-items:center !important; gap:6px !important; }
.location a { color:#6b7280 !important; }
.location strong { color:#9ca3af !important; }

/* Map height — taller to show Oceania properly */
.leaflet-container {
  height:220px !important;
  max-height:220px !important;
  min-height:220px !important;
}


/* ══ FIXES v9 ══ */
/* Connect button — small pill style */
a[href*="steam://connect"] {
  display:inline-block !important;
  font-size:9px !important;
  font-weight:700 !important;
  color:#0d0f14 !important;
  background:#00FFB3 !important;
  border-radius:3px !important;
  padding:2px 7px !important;
  text-decoration:none !important;
  font-family:'IBM Plex Mono',monospace !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  vertical-align:middle !important;
  margin-left:6px !important;
  border:none !important;
}
a[href*="steam://connect"]:hover {
  background:#00cc8f !important;
  color:#0d0f14 !important;
}




/* ══ FIXES v10 ══ */
/* Map — reduce height to fit properly */
.leaflet-container {
  height:200px !important;
  max-height:200px !important;
  min-height:200px !important;
}

/* IP address — restore font size in address cell, only zero-out parens via different approach */
td:has(a[href*="steam://connect"]) {
  font-size:12px !important;
  font-family:'IBM Plex Mono',monospace !important;
  color:#6b7280 !important;
}
td:has(a[href*="steam://connect"]) a {
  font-size:9px !important;
}


/* ══ FIXES v11 ══ */
/* Nuclear reset on Connect button — override ALL previous rules */
a[href*="steam://connect"],
a[href*="steam://connect"]:link,
a[href*="steam://connect"]:visited {
  display:inline-block !important;
  font-size:9px !important;
  font-weight:700 !important;
  color:#0d0f14 !important;
  background:#00FFB3 !important;
  border-radius:3px !important;
  padding:3px 8px !important;
  text-decoration:none !important;
  font-family:'IBM Plex Mono',monospace !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  vertical-align:middle !important;
  margin-left:6px !important;
  line-height:1.4 !important;
  border:none !important;
  box-shadow:none !important;
  opacity:1 !important;
}

/* Restore IP address visibility */
td:has(a[href*="steam://connect"]) {
  font-size:12px !important;
  font-family:'IBM Plex Mono',monospace !important;
  color:#6b7280 !important;
}

