/* Liberia Championship Theme for Direktor (ASC 2026 — Monrovia, Liberia) */
/* Optimized for Desktop Mode & Natural Content Widths: Zero awkward empty space */

:root {
  --asg-navy: #002868;
  --asg-navy-dark: #001f52;
  --asg-navy-light: #0d3b82;
  --asg-red: #bf0a30;
  --asg-gold: #d4af37;
  --asg-bg: #f0f4f8;
  --asg-card-bg: #ffffff;
  --asg-border: #cbd5e1;
  --asg-border-light: #e2e8f0;
  --asg-text: #0f172a;
  --asg-text-muted: #64748b;
  --asg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html {
  background-color: var(--asg-bg) !important;
}

body {
  font-family: var(--asg-font) !important;
  background-color: var(--asg-bg) !important;
  color: var(--asg-text) !important;
  margin: 0 !important;
  padding: 12px 16px 32px 16px !important;
  line-height: 1.5 !important;
  -webkit-font-smoothing: antialiased;
}

/* =================================================== */
/* HEADER & BANNER                                     */
/* =================================================== */
.banner-container {
  text-align: center !important;
  margin: 0 auto 14px auto !important;
  max-width: 1100px !important;
  width: 100% !important;
}

.banner-container img {
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(0, 40, 104, 0.16) !important;
  border: 1px solid var(--asg-border) !important;
  display: inline-block !important;
  margin: 0 auto !important;
}

/* Announcement Ticker */
.ticker-bar {
  background: var(--asg-navy) !important;
  border-left: 5px solid var(--asg-gold) !important;
  border-radius: 6px !important;
  padding: 9px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 auto 16px auto !important;
  max-width: 1100px !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  box-sizing: border-box !important;
}

.ticker-badge {
  background: var(--asg-red) !important;
  color: #ffffff !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  padding: 4px 9px !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
}

.ticker-content {
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  color: #f8fafc !important;
  flex: 1 !important;
}

/* Breadcrumb / Backref */
p.backref {
  text-align: center !important;
  margin: 10px auto 14px auto !important;
  max-width: 680px !important;
  width: 100% !important;
  font-family: var(--asg-font) !important;
  font-size: 0.88rem !important;
  color: #64748b !important;
  box-sizing: border-box !important;
  line-height: 1.5 !important;
}

body.article p.backref {
  max-width: 740px !important;
}

p.backref a {
  display: inline !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #1d4ed8 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

p.backref a:hover {
  background: none !important;
  border: none !important;
  color: var(--asg-red) !important;
  text-decoration: underline !important;
}

/* Headings */
h1 {
  text-align: center !important;
  color: var(--asg-navy) !important;
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  margin: 14px auto 16px auto !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

h2 {
  text-align: center !important;
  color: var(--asg-navy-light) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  margin: 12px auto !important;
}

/* =================================================== */
/* ROSTERS & ENTRANTS TABLE (SNUG & BALANCED)          */
/* =================================================== */
table.rosters,
table.entrants {
  margin: 16px auto 24px auto !important;
  width: auto !important;
  min-width: 580px !important;
  max-width: 720px !important;
  background: var(--asg-card-bg) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 3px 14px rgba(0, 40, 104, 0.08) !important;
  border: 1px solid var(--asg-border) !important;
}

/* Division Title Header Row */
tr.top1 th.division {
  background: linear-gradient(180deg, var(--asg-navy-dark) 0%, var(--asg-navy) 100%) !important;
  font-size: 1.15rem !important;
  text-align: center !important;
  padding: 13px !important;
  letter-spacing: 0.05em !important;
  border-bottom: 2px solid var(--asg-gold) !important;
  color: #ffffff !important;
}

tr.top2 th {
  background: var(--asg-navy-light) !important;
  font-size: 0.8rem !important;
  padding: 10px 14px !important;
  color: #ffffff !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  letter-spacing: 0.03em !important;
  border-bottom: 2px solid var(--asg-gold) !important;
}

table.rosters td,
table.entrants td {
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--asg-border-light) !important;
  font-size: 0.92rem !important;
  vertical-align: middle !important;
}

table.rosters tr:last-child td,
table.entrants tr:last-child td {
  border-bottom: none !important;
}

table.rosters tr:nth-child(even) td,
table.entrants tr:nth-child(even) td {
  background: #f8fafc !important;
}

table.rosters tr:hover td,
table.entrants tr:hover td {
  background: #edf4fc !important;
}

/* Specific Columns for Rosters / Entrants */
table.rosters th,
table.entrants th {
  color: #ffffff !important;
}

/* Rank Column */
table.rosters th.rank, table.entrants th.rank {
  text-align: center !important;
  width: 48px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}
table.rosters td.rank, table.entrants td.rank {
  text-align: center !important;
  width: 48px !important;
  font-weight: 800 !important;
  color: var(--asg-navy) !important;
}

/* Rating Column */
table.rosters th.rating, table.entrants th.rating {
  text-align: center !important;
  width: 80px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}
table.rosters td.rating, table.entrants td.rating {
  text-align: center !important;
  width: 80px !important;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  background: #f1f5f9 !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
}

/* Team Column */
table.rosters th.team, table.entrants th.team {
  text-align: center !important;
  width: 65px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  color: #ffffff !important;
}
table.rosters td.team, table.entrants td.team {
  text-align: center !important;
  width: 65px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  color: var(--asg-navy) !important;
}

/* Photo Column */
table.rosters th.photo, table.entrants th.photo {
  text-align: center !important;
  width: 58px !important;
  color: #ffffff !important;
  padding: 6px !important;
}
table.rosters td.photo, table.entrants td.photo {
  text-align: center !important;
  width: 58px !important;
  padding: 6px !important;
}

table.rosters td.photo img,
table.entrants td.photo img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 6px !important;
  object-fit: cover !important;
  vertical-align: middle !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12) !important;
}

/* Player Column */
table.rosters th.player, table.entrants th.player {
  text-align: left !important;
  padding-left: 14px !important;
  padding-right: 20px !important;
  font-size: 0.8rem !important;
  color: #ffffff !important;
  white-space: nowrap !important;
}
table.rosters td.player, table.entrants td.player {
  text-align: left !important;
  padding-left: 14px !important;
  padding-right: 20px !important;
  font-size: 0.95rem !important;
  white-space: nowrap !important;
}

table.rosters td.player span.name,
table.entrants td.player span.name {
  font-weight: 700 !important;
  color: #0f172a !important;
}

/* =================================================== */
/* EVENT COVERAGE INDEX - AUTHENTIC DIREKTOR LAYOUT    */
/* =================================================== */
table.index {
  margin: 18px auto 36px auto !important;
  width: auto !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Links stacked vertically inside their cells, exactly like ASC 2024 */
table.index div.link {
  display: block !important;
  margin: 3px 0 !important;
  padding: 0 !important;
}

table.index div.link a {
  display: inline-block !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-width: auto !important;
  padding: 1px 0 !important;
  font-family: var(--asg-font) !important;
  font-size: 0.96rem !important;
  font-weight: 500 !important;
  color: #1d4ed8 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  transition: color 0.15s ease !important;
}

table.index div.link a:hover {
  background: transparent !important;
  color: var(--asg-red) !important;
  text-decoration: underline !important;
}

/* tr.top: Centered column of top-level tournament reports */
table.index tr.top td.links {
  background: transparent !important;
  border: none !important;
  padding: 4px 0 20px 0 !important;
  text-align: center !important;
}

table.index tr.top div.link {
  display: block !important;
  margin: 4px auto !important;
  text-align: center !important;
}

table.index tr.top div.link a {
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  color: #1d4ed8 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Left column (Round numbers & Round 0 spacer) */
table.index td.round {
  display: table-cell !important;
  width: 1% !important;
  white-space: nowrap !important;
  text-align: right !important;
  vertical-align: top !important;
  padding: 3px 14px 3px 0 !important;
  font-weight: 700 !important;
  color: var(--asg-navy) !important;
  font-size: 0.98rem !important;
}

/* Right column (Report & Round links) */
table.index td.links {
  background: transparent !important;
  text-align: left !important;
  vertical-align: top !important;
  padding: 3px 0 !important;
}

/* General reports spacing */
table.index tr.round0 td.round {
  padding-bottom: 20px !important;
}

table.index tr.round0 td.links {
  padding-bottom: 20px !important;
}

/* Round rows spacing */
table.index tr.round td.round {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

table.index tr.round td.links {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* When no active rounds are present, keep general reports centered with top links */
table.index:not(:has(tr.round)) tr.round0 td.round {
  display: none !important;
}

table.index:not(:has(tr.round)) tr.round0 td.links {
  text-align: center !important;
}

table.index:not(:has(tr.round)) tr.round0 div.link {
  text-align: center !important;
}

/* =================================================== */
/* WIDE TOURNAMENT TABLES (STANDINGS, PAIRINGS, TEAMS) */
/* =================================================== */
table.standings,
table.pairings,
table.team_standings,
table.team_roster,
table.team_scorecard,
table.ratings,
table.live_scoreboard,
#sb table {
  margin: 16px auto 24px auto !important;
  width: auto !important;
  max-width: 1100px !important;
  background: var(--asg-card-bg) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 3px 14px rgba(0, 40, 104, 0.08) !important;
  border: 1px solid var(--asg-border) !important;
}

table.standings th,
table.pairings th,
table.team_standings th,
table.team_roster th,
table.team_scorecard th,
table.ratings th,
table.live_scoreboard th,
#sb table th {
  background: var(--asg-navy) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  letter-spacing: 0.03em !important;
  padding: 10px 12px !important;
  border-bottom: 2px solid var(--asg-gold) !important;
}

table.standings td,
table.pairings td,
table.team_standings td,
table.team_roster td,
table.team_scorecard td,
table.ratings td,
table.live_scoreboard td,
#sb table td {
  padding: 8px 12px !important;
  border-bottom: 1px solid var(--asg-border-light) !important;
  font-size: 0.9rem !important;
  vertical-align: middle !important;
}

table.standings tr:nth-child(even) td,
table.pairings tr:nth-child(even) td,
table.team_standings tr:nth-child(even) td,
table.live_scoreboard tr:nth-child(even) td,
#sb table tr:nth-child(even) td {
  background: #f8fafc !important;
}

/* Country Flags & Badges */
.country-flag-badge {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  margin-right: 8px !important;
}

.country-flag-badge img.flag-icon {
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
  border-radius: 2px !important;
  vertical-align: middle !important;
}

.country-code {
  font-weight: 800 !important;
  font-size: 0.8rem !important;
  color: var(--asg-navy) !important;
  margin-left: 3px !important;
}

.country-badge {
  display: inline-block !important;
  background: var(--asg-navy) !important;
  color: #ffffff !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  font-weight: 800 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.04em !important;
}

/* Notice / Footer */
p.notice {
  text-align: center !important;
  font-size: 0.78rem !important;
  color: var(--asg-text-muted) !important;
  margin: 8px auto !important;
}

/* =================================================== */
/* NATIONAL TEAMS & DELEGATIONS                        */
/* =================================================== */
table.teams_directory {
  margin: 16px auto 24px auto !important;
  width: auto !important;
  min-width: 540px !important;
  max-width: 680px !important;
  background: var(--asg-card-bg) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 3px 14px rgba(0, 40, 104, 0.08) !important;
  border: 1px solid var(--asg-border) !important;
}

table.teams_directory th {
  color: #ffffff !important;
}

table.teams_directory th.rank {
  text-align: center !important;
  width: 48px !important;
  font-weight: 800 !important;
  font-size: 0.8rem !important;
  color: #ffffff !important;
}

table.teams_directory td.rank {
  text-align: center !important;
  width: 48px !important;
  font-weight: 800 !important;
  color: var(--asg-navy) !important;
}

table.teams_directory th.flag {
  text-align: center !important;
  width: 58px !important;
  padding: 8px 6px !important;
  font-size: 0.8rem !important;
  color: #ffffff !important;
}

table.teams_directory td.flag {
  text-align: center !important;
  width: 58px !important;
  padding: 8px 6px !important;
}

table.teams_directory td.flag img.flag-icon {
  border: 1px solid rgba(0, 0, 0, 0.18) !important;
  border-radius: 3px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
  vertical-align: middle !important;
}

table.teams_directory th.country {
  text-align: left !important;
  padding-left: 14px !important;
  font-size: 0.8rem !important;
  color: #ffffff !important;
}

table.teams_directory td.country {
  text-align: left !important;
  padding-left: 14px !important;
  font-size: 1rem !important;
}

table.teams_directory td.country a {
  color: var(--asg-navy) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}

table.teams_directory td.country a:hover {
  color: var(--asg-red) !important;
  text-decoration: underline !important;
}

table.teams_directory th.capital {
  text-align: left !important;
  padding-left: 12px !important;
  font-size: 0.8rem !important;
  color: #ffffff !important;
}

table.teams_directory td.capital {
  text-align: left !important;
  padding-left: 12px !important;
  font-size: 0.92rem !important;
  color: #1e293b !important;
  font-weight: 500 !important;
}

table.teams_directory th.roster-link {
  text-align: center !important;
  width: 120px !important;
  padding: 8px 12px !important;
  font-size: 0.8rem !important;
  color: #ffffff !important;
}

table.teams_directory td.roster-link {
  text-align: center !important;
  width: 120px !important;
  padding: 8px 12px !important;
}

table.teams_directory a.team-btn {
  display: inline-block !important;
  padding: 5px 12px !important;
  background: var(--asg-navy) !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

table.teams_directory a.team-btn:hover {
  background: var(--asg-red) !important;
  transform: translateY(-1px) !important;
}

/* Individual Team Header (Clean & Integrated) */
.team-header-card {
  text-align: center !important;
  margin: 14px auto 18px auto !important;
  padding: 4px 0 8px 0 !important;
  max-width: 680px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.team-flag-hero {
  margin-bottom: 8px !important;
}

.team-flag-hero img.hero-flag {
  width: 64px !important;
  height: 42px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) !important;
  object-fit: cover !important;
  display: inline-block !important;
}

h1.team-title {
  margin: 4px 0 6px 0 !important;
  color: var(--asg-navy) !important;
  font-size: 1.65rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.team-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px 14px !important;
  color: #475569 !important;
  font-size: 0.92rem !important;
}

.team-meta .meta-item strong {
  color: var(--asg-navy) !important;
}

.team-meta .meta-separator {
  color: var(--asg-gold) !important;
  font-weight: bold !important;
}


/* =================================================== */
/* OFFICIAL ANNOUNCEMENTS & BULLETINS                  */
/* =================================================== */
table.announcements_table {
  margin: 20px auto 28px auto !important;
  width: auto !important;
  min-width: 540px !important;
  max-width: 680px !important;
  background: var(--asg-card-bg) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 3px 14px rgba(0, 40, 104, 0.08) !important;
  border: 1px solid var(--asg-border) !important;
}

table.announcements_table th.ann-header {
  background: linear-gradient(180deg, var(--asg-navy-dark) 0%, var(--asg-navy) 100%) !important;
  font-size: 1.05rem !important;
  text-align: center !important;
  padding: 12px 16px !important;
  letter-spacing: 0.04em !important;
  border-bottom: 2px solid var(--asg-gold) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

table.announcements_table tr.ann-item td {
  padding: 15px 20px !important;
  border-bottom: 1px solid var(--asg-border-light) !important;
  text-align: left !important;
  vertical-align: top !important;
  background: #ffffff !important;
}

table.announcements_table tr.ann-item:last-child td {
  border-bottom: none !important;
}

table.announcements_table tr.ann-item:hover td {
  background: #f8fafc !important;
}

table.announcements_table .ann-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 6px !important;
}

table.announcements_table .ann-badge {
  display: inline-block !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 2px 8px !important;
  border-radius: 3px !important;
  background: var(--asg-navy-light) !important;
  color: #ffffff !important;
}

table.announcements_table .ann-badge.urgent {
  background: var(--asg-red) !important;
  color: #ffffff !important;
}

table.announcements_table .ann-date {
  font-size: 0.78rem !important;
  color: #64748b !important;
  font-weight: 600 !important;
}

table.announcements_table .ann-title {
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  color: var(--asg-navy) !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.35 !important;
}

table.announcements_table .ann-body {
  font-size: 0.88rem !important;
  color: #334155 !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

table.announcements_table a.ann-link {
  color: #1d4ed8 !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

table.announcements_table a.ann-link:hover {
  color: var(--asg-red) !important;
}

table.announcements_table a.ann-btn {
  display: inline-block !important;
  margin-top: 9px !important;
  padding: 6px 14px !important;
  background: var(--asg-navy) !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

table.announcements_table a.ann-btn:hover {
  background: var(--asg-red) !important;
}

/* Static fallback ticker bar (Direktor native) */
.ticker-bar {
  max-width: 680px !important;
  margin: 12px auto !important;
  background: linear-gradient(90deg, #091a36 0%, #13294b 50%, #091a36 100%) !important;
  border: 1px solid var(--asg-gold) !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 0.85rem !important;
}

.ticker-badge {
  background: var(--asg-gold) !important;
  color: var(--asg-navy) !important;
  font-weight: 800 !important;
  font-size: 0.72rem !important;
  padding: 2px 7px !important;
  border-radius: 3px !important;
  text-transform: uppercase !important;
}

.ticker-content {
  color: #ffffff !important;
  font-weight: 500 !important;
}


/* =================================================== */
/* PLAYER TITLE COMPONENT BADGES (GM, EXP, CC, ETC.)   */
/* =================================================== */
.player-title {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2px 6px !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border-radius: 3px !important;
  vertical-align: middle !important;
  margin-left: 6px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16) !important;
  user-select: none !important;
  white-space: nowrap !important;
}

/* Grandmaster (GM) - Ruby / Crimson Red */
.player-title.title-gm {
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

/* Continental Champion (CC) - African Continental Gold / Amber */
.player-title.title-cc {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #002868 !important;
  border: 1px solid #d4af37 !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* Junior Continental Champion (JCC) - Emerald / Jade Prestige */
.player-title.title-jcc {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

/* Expert (EXP) - Royal Blue / Sapphire */
.player-title.title-exp {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

/* World Champion (WC) - Radiant Sunburst */
.player-title.title-wc {
  background: linear-gradient(135deg, #fbbf24 0%, #b45309 100%) !important;
  color: #0f172a !important;
  border: 1px solid #f59e0b !important;
  font-weight: 900 !important;
}

/* Candidate Master (CM) & National Master (NM) */
.player-title.title-cm,
.player-title.title-nm {
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* Default / Unclassified Title Badge */
.player-title.title-default {
  background: #475569 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}


/* =================================================== */
/* BLOG STORY / NOTICE ARTICLE PAGES (.article)        */
/* =================================================== */
.article-container {
  width: auto !important;
  min-width: 540px !important;
  max-width: 720px !important;
  margin: 16px auto 32px auto !important;
  background: #ffffff !important;
  border: 1px solid var(--asg-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(0, 40, 104, 0.08) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.article-header {
  background: linear-gradient(180deg, var(--asg-navy-dark) 0%, var(--asg-navy) 100%) !important;
  padding: 24px 28px 20px 28px !important;
  border-bottom: 3px solid var(--asg-gold) !important;
  color: #ffffff !important;
  text-align: left !important;
}

.article-meta {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px 14px !important;
  margin-bottom: 12px !important;
}

.article-badge {
  background: var(--asg-gold) !important;
  color: #002868 !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 3px 10px !important;
  border-radius: 3px !important;
}

.article-badge.urgent {
  background: var(--asg-red) !important;
  color: #ffffff !important;
}

.article-date {
  font-size: 0.82rem !important;
  color: #cbd5e1 !important;
  font-weight: 600 !important;
}

.article-org {
  font-size: 0.82rem !important;
  color: var(--asg-gold) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

h1.article-title {
  margin: 0 !important;
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  color: #ffffff !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

.article-body {
  padding: 28px 32px !important;
  color: #1e293b !important;
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  text-align: left !important;
}

.article-body p {
  margin: 0 0 16px 0 !important;
  color: #334155 !important;
}

.article-body h2 {
  font-size: 1.12rem !important;
  font-weight: 800 !important;
  color: var(--asg-navy) !important;
  margin: 24px 0 10px 0 !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid var(--asg-border-light) !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}

.article-body h3 {
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  color: var(--asg-navy) !important;
  margin: 16px 0 6px 0 !important;
}

.article-body ul {
  margin: 8px 0 18px 24px !important;
  padding: 0 !important;
}

.article-body li {
  margin-bottom: 8px !important;
  color: #334155 !important;
}

.article-callout {
  background: #f8fafc !important;
  border-left: 4px solid var(--asg-navy) !important;
  border-radius: 0 6px 6px 0 !important;
  padding: 14px 18px !important;
  margin: 20px 0 !important;
  border-top: 1px solid var(--asg-border-light) !important;
  border-right: 1px solid var(--asg-border-light) !important;
  border-bottom: 1px solid var(--asg-border-light) !important;
}

.article-callout.urgent {
  background: #fff8f8 !important;
  border-left-color: var(--asg-red) !important;
}

.article-callout p:last-child {
  margin-bottom: 0 !important;
}

.article-details-grid {
  background: #f1f5f9 !important;
  border: 1px solid var(--asg-border-light) !important;
  border-radius: 6px !important;
  padding: 14px 18px !important;
  margin: 20px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  font-size: 0.9rem !important;
}

.article-details-grid .grid-item strong {
  color: var(--asg-navy) !important;
}

.article-signature {
  margin-top: 32px !important;
  padding-top: 16px !important;
  border-top: 2px dashed var(--asg-border) !important;
  text-align: right !important;
  font-weight: 800 !important;
  color: var(--asg-navy) !important;
}

.article-signature span.sig-title {
  display: block !important;
  font-size: 0.8rem !important;
  color: #64748b !important;
  font-weight: 600 !important;
}

.article-back-bar {
  margin-top: 24px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--asg-border-light) !important;
  text-align: left !important;
}

.article-back-bar a.back-btn {
  display: inline-block !important;
  padding: 7px 16px !important;
  background: var(--asg-navy) !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.article-back-bar a.back-btn:hover {
  background: var(--asg-red) !important;
}


/* =================================================== */
/* SUBPAGE BANNER OPTIMIZATION                         */
/* =================================================== */
.banner-container {
  text-align: center !important;
  margin: 0 auto 16px auto !important;
  max-width: 680px !important;
  width: 100% !important;
}

.banner-container img {
  width: 100% !important;
  max-width: 680px !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 14px rgba(0, 40, 104, 0.12) !important;
  display: block !important;
  margin: 0 auto !important;
}





/* =================================================== */
/* EDITORIAL BLOG STORY PRESENTATION (.article)        */
/* =================================================== */
.article-container {
  width: auto !important;
  min-width: 540px !important;
  max-width: 740px !important;
  margin: 14px auto 36px auto !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 20px rgba(0, 32, 80, 0.06) !important;
  padding: 36px 44px !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

.article-breadcrumbs {
  font-size: 0.8rem !important;
  color: #64748b !important;
  margin-bottom: 16px !important;
}

.article-breadcrumbs a {
  color: #1d4ed8 !important;
  text-decoration: none !important;
}

.article-breadcrumbs a:hover {
  color: var(--asg-red) !important;
  text-decoration: underline !important;
}

.article-meta-bar {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px 14px !important;
  margin-bottom: 14px !important;
}

.article-badge {
  background: #f1f5f9 !important;
  color: var(--asg-navy) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 3px 9px !important;
  border-radius: 3px !important;
  border: 1px solid #cbd5e1 !important;
}

.article-badge.urgent {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border-color: #fca5a5 !important;
}

.article-org {
  font-size: 0.8rem !important;
  color: var(--asg-navy) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

.article-date {
  font-size: 0.82rem !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

.article-read-time {
  font-size: 0.8rem !important;
  color: #94a3b8 !important;
}

h1.article-headline {
  margin: 0 0 16px 0 !important;
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  color: #0f172a !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
}

.article-lead {
  font-size: 1.05rem !important;
  line-height: 1.65 !important;
  color: #475569 !important;
  font-weight: 500 !important;
  margin-bottom: 24px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.article-body-text {
  color: #334155 !important;
  font-size: 0.98rem !important;
  line-height: 1.75 !important;
}

.article-body-text p {
  margin: 0 0 16px 0 !important;
  color: #334155 !important;
}

.article-body-text h2 {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: var(--asg-navy) !important;
  margin: 30px 0 12px 0 !important;
  border-left: 3px solid var(--asg-gold) !important;
  padding-left: 10px !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

.article-body-text h3 {
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 18px 0 6px 0 !important;
}

.article-body-text ul {
  margin: 8px 0 20px 24px !important;
  padding: 0 !important;
}

.article-body-text li {
  margin-bottom: 8px !important;
  color: #334155 !important;
}

.article-directive-card {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  border-left: 4px solid #16a34a !important;
  border-radius: 6px !important;
  padding: 16px 20px !important;
  margin: 22px 0 !important;
}

.article-directive-card.urgent {
  background: #fff8f8 !important;
  border-color: #fecaca !important;
  border-left-color: var(--asg-red) !important;
}

.article-directive-card h3 {
  margin: 0 0 8px 0 !important;
  color: #0f172a !important;
  font-size: 1.02rem !important;
}

.article-directive-card p:last-child {
  margin-bottom: 0 !important;
}

.article-info-grid {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  padding: 14px 18px !important;
  margin: 24px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  font-size: 0.9rem !important;
}

.article-info-grid .info-row strong {
  color: var(--asg-navy) !important;
}

.article-signature-block {
  margin-top: 36px !important;
  padding-top: 18px !important;
  border-top: 2px dashed #e2e8f0 !important;
  text-align: right !important;
  color: var(--asg-navy) !important;
  font-weight: 800 !important;
}

.article-signature-block span.sig-title {
  display: block !important;
  font-size: 0.8rem !important;
  color: #64748b !important;
  font-weight: 600 !important;
}

.article-footer-actions {
  margin-top: 28px !important;
  padding-top: 18px !important;
  border-top: 1px solid #e2e8f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.article-footer-actions a.btn-secondary {
  display: inline-block !important;
  padding: 7px 16px !important;
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.article-footer-actions a.btn-secondary:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

.article-footer-actions a.btn-primary {
  display: inline-block !important;
  padding: 7px 18px !important;
  background: var(--asg-navy) !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.article-footer-actions a.btn-primary:hover {
  background: var(--asg-red) !important;
}