/* Win rate bar special cases: when a player has zero games in a category or a perfect win rate. */
.winrate-bar-large.zero .wins {
  /* When no games were played, show a full grey bar with a centered zero. */
  width: 100% !important;
  background: #333;
  color: #fff;
}
.winrate-bar-large.zero .losses {
  display: none;
}
.winrate-bar-large.full .losses {
  /* Hide the losses segment when the player has a 100% win rate. */
  display: none;
}
/* General styles */
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  /* Dark background for black and yellow theme */
  background-color: #0d0d0d;
  /* Light text for high contrast against dark background */
  color: #f5f5f5;
}

/* Sticky header styling.  The header remains fixed at the top of the
   viewport as users scroll.  A subtle gradient and dark backdrop
   differentiate it from the page content. */
#siteHeader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: linear-gradient(90deg, #111111, #2a2a2a);
  border-bottom: 1px solid #333;
}

/* Container inside the sticky header for layout */
.header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
}
.user-avatar-wrapper {
  margin-left: 1rem;
  display: flex;
  align-items: center;
}

.user-avatar-wrapper.hidden {
  display: none;
}

.user-avatar-thumb {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ffd700;
  cursor: pointer;
}


/* Site title with bold styling for the word CUBE */
#siteTitle {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  /* Use a neutral colour for the word "Ranks" so that the
     highlighted "CUBE" stands out. */
  color: #f5f5f5;
}
#siteTitle .cube-bold {
  font-weight: 800;
  color: #ffd700;
}

/* Navigation bar in the header */
#mainNav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5rem;
}
#mainNav li {
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: #e0e0e0;
  position: relative;
  padding: 0.25rem 0;
}
#mainNav li.active {
  color: #ffd700;
}
/* Underline active nav item */
#mainNav li.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background-color: #ffd700;
}

/* Dropdown navigation styling */
#mainNav li.dropdown {
  cursor: default;
}
#mainNav li.dropdown .dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #161616;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 0.5rem 0;
  list-style: none;
  z-index: 999;
  min-width: 200px;
}
#mainNav li.dropdown:hover .dropdown-content {
  display: block;
}
#mainNav li.dropdown .dropdown-content li {
  padding: 0.5rem 1rem;
  color: #e0e0e0;
  white-space: nowrap;
  cursor: pointer;
}
#mainNav li.dropdown .dropdown-content li:hover {
  background-color: #222;
  color: #ffd700;
}

/* Search input styling for player and commander filtering */
#playerSearch,
#commanderSearch {
  padding: 0.4rem 0.6rem;
  font-size: 1rem;
  border: 1px solid #444444;
  border-radius: 6px;
  background-color: #2a2a2a;
  color: #f5f5f5;
  min-width: 200px;
  flex: 1 1 auto;
}
#playerSearch:focus,
#commanderSearch:focus {
  border-color: #ffd700;
  outline: none;
}

/* Top average ELO list styling */
.top-elo {
  /* Remove the top margin between the ELO comparison chart and the
     Top Commander ELO panel so that the two panels sit snugly
     together. Previously this was set to 1rem, leaving an awkward
     gap. */
  margin-top: 0;
}
.top-elo h3 {
  margin: 0 0 0.5rem;
  color: #ffd700;
  font-size: 1.2rem;
}
.top-elo ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.top-elo li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.top-elo li:last-child {
  border-bottom: none;
}
.top-elo .avg-elo-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.top-elo .avg-elo-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.top-elo .avg-elo-name {
  font-size: 0.9rem;
  color: #e0e0e0;
}
.top-elo .avg-elo-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffd700;
  margin-left: 0.5rem;
}

/* Add top padding to body to offset the fixed header */
body {
  padding-top: 70px;
}

/* Adjust main container width and reduce gutters for wider content area.
   Using a large max-width ensures content can expand on wider screens
   while still leaving a small margin on the sides.  The margin is
   intentionally tighter than the default to make better use of the
   available space, as requested. */
main {
  /* Expand the main container slightly further to make better use of
     available screen width.  Narrower gutters mean more space for
     both the players and the ELO chart/top strategies column. */
  width: 98%;
  max-width: 1600px;
  margin: 1.5rem auto 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Legacy header styles removed in favour of the sticky header at the top.
   These styles originally applied to a standalone header element, but
   with the new sticky header they are no longer needed. */

/* Card styling */
.card {
  background-color: #161616;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  border: 1px solid #333333;
  padding: 1rem 1.5rem 1.5rem;
}

.card h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  /* Accent color for card headings */
  color: #ffd700;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.form-row label {
  font-weight: 600;
  color: #f5f5f5;
}

select {
  padding: 0.4rem 0.6rem;
  font-size: 1rem;
  border: 1px solid #444444;
  border-radius: 6px;
  background-color: #2a2a2a;
  color: #f5f5f5;
  outline: none;
  min-width: 200px;
  cursor: pointer;
}

select:focus {
  border-color: #ffd700;
}

/* Info panels */
.info-panel {
  margin-top: 0.5rem;
}

.info-panel h3 {
  margin: 0;
  margin-bottom: 0.5rem;
  color: #ffd700;
}

.stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.stats-row div {
  font-size: 0.95rem;
  /* Light background for statistic badges */
  background-color: #1f1f1f;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  color: #f5f5f5;
}

.comma-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.comma-list li {
  background-color: #2a2a2a;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  display: inline-block;
  margin-right: 0.4rem;
  margin-bottom: 0.4rem;
  color: #f5f5f5;
}

/* Add more space and a subtle border to separate the head-to-head section from the ELO chart */
#headToHeadSection {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Pie chart container styling */
.pie-chart-container {
  margin-top: 0.5rem;
  max-width: 400px;
}
.pie-chart-container canvas {
  width: 100% !important;
  height: 250px !important;
}

/* Leaderboards */
.leaderboards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
}

/* Data sections for the CEDHC Data page */
.data-subsections {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 1rem;
}

/* Each data group (Win Rates, Draft Frequency) */
.data-group {
  flex: 1 1 400px;
  background-color: #1c1c1c;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  border: 1px solid #333333;
}

/* Use darker text within leaderboards that appear in light data groups */
.data-group .leaderboard .name,
.data-group .leaderboard .value {
  color: #f5f5f5;
}

.data-group h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  color: #ffd700;
}

/* Smaller headings inside groups */
.data-group h4 {
  margin: 0.3rem 0 0.4rem;
  font-size: 1rem;
  color: #d0d0d0;
}

.leaderboard {
  flex: 1 1 300px;
}

.leaderboard h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  /* Use the golden accent color for leaderboard section headings */
  color: #ffd700;
}

.leaderboard ol {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.leaderboard li {
  display: flex;
  align-items: center;
  margin-bottom: 0.6rem;
}

.leaderboard .name {
  flex: 0 0 40%;
  font-weight: 600;
  /* Light text for leaderboard names on dark backgrounds */
  color: #f5f5f5;
}

.leaderboard .value {
  flex: 0 0 15%;
  text-align: right;
  font-weight: 500;
  /* Light text for leaderboard values on dark backgrounds */
  color: #f5f5f5;
}

.leaderboard .bar-wrapper {
  flex: 1;
  background-color: #333333;
  height: 8px;
  border-radius: 4px;
  margin-left: 0.5rem;
  position: relative;
  overflow: hidden;
}

/* Adjust bar wrapper color inside light data groups */
.data-group .leaderboard .bar-wrapper {
  background-color: #333333;
}

.leaderboard .bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 4px;
}

/* Colors for different leaderboards (black & yellow theme) */
/* Commander win rate bars: golden yellow */
.leaderboard#commanderLeaderboard .bar {
  background-color: #ffd700;
}
/* Color draft frequency bars: dark yellow/orange */
.leaderboard#colorLeaderboard .bar {
  background-color: #f4b400;
}
/* Color win rate bars: medium yellow-green */
.leaderboard#colorWinRateLeaderboard .bar {
  background-color: #e3c71a;
}
/* Commander draft frequency bars: soft amber */
.leaderboard#commanderFrequencyLeaderboard .bar {
  background-color: #f1c232;
}

/* Add styling for sortable table headers */
.standings-table th.sortable {
  cursor: pointer;
  position: relative;
  user-select: none;
}
.standings-table th.sortable:hover {
  color: #63c5f3;
}
/* Arrow indicators for sort direction will be set via data-sort-dir attribute */
.standings-table th.sortable[data-sort-dir="asc"]::after {
  content: "▲";
  position: absolute;
  right: 0.5rem;
  font-size: 0.8rem;
}
.standings-table th.sortable[data-sort-dir="desc"]::after {
  content: "▼";
  position: absolute;
  right: 0.5rem;
  font-size: 0.8rem;
}

/* Comparative ELO over time section styling */
.compare-elo-section {
  margin-top: 2rem;
}
.compare-elo-section h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  /* Use golden accent for the comparative chart title */
  color: #ffd700;
}
.compare-controls {
  margin-bottom: 1rem;
}
.compare-controls select {
  width: 100%;
  max-width: 300px;
  background-color: #1f2a38;
  color: #e2e8f0;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  height: auto;
}
.compare-chart-container {
  width: 100%;
  /* Increase maximum width to accommodate multiple player lines */
  max-width: 1000px;
  /* Increase height to improve readability when many players are plotted */
  height: 500px;
  margin-bottom: 1rem;
}


/* Chart container */
.chart-container {
  width: 100%;
  max-width: 600px;
  height: 300px;
  margin-top: 1rem;
}
#eloChart {
  width: 100% !important;
  height: 100% !important;
}

/* Commander card image in commander info */
.commander-card-image {
  margin-top: 1rem;
  text-align: left;
}
.commander-card-image img {
  max-width: 200px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Tooltip for commander card images */
#cardTooltip {
  position: absolute;
  display: none;
  z-index: 1000;
  background-color: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  padding: 0.5rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
#cardTooltip img {
  max-width: 200px;
  display: block;
  border-radius: 4px;
}

/* Footer */
footer {
  text-align: center;
  font-size: 0.8rem;
  color: #5f6368;
  padding-bottom: 1rem;
}

/* Navigation tabs */
#mainNav {
  background-color: #111111;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

#mainNav ul {
  display: flex;
  justify-content: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
}

#mainNav li {
  cursor: pointer;
  padding: 0.5rem 1rem;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  color: #f5f5f5;
  transition: color 0.2s, border-color 0.2s;
}

#mainNav li:hover {
  color: #ffd700;
}

#mainNav li.active {
  border-bottom-color: #ffd700;
  color: #ffd700;
}

/* Sub-navigation for the CEDH Cube home page */
.cedh-subnav {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 1rem 0;
  padding: 0;
  flex-wrap: wrap;
}
.cedh-subnav li {
  cursor: pointer;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-weight: 600;
  background-color: #2a2a2a;
  color: #f5f5f5;
  border: 1px solid #444444;
  transition: background-color 0.2s, color 0.2s;
}
.cedh-subnav li:hover {
  background-color: #ffd700;
  color: #0d0d0d;
}
.cedh-subnav li.active {
  background-color: #ffd700;
  color: #0d0d0d;
  border-color: #ffd700;
}

/* Hidden class */
.hidden {
  display: none;
}

/* ELO chart container */
#eloChartContainer {
  width: 100%;
  max-width: 600px;
  height: 300px;
  margin-top: 1rem;
}

/* Commander card image styling */
#commanderCardImage {
  margin-top: 1rem;
  max-width: 200px;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
}

/* Layout for commander details: card image alongside overview */
/* Commander details split into left and right columns */
.commander-details {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
}

/* Left column holds the image and classification */
.commander-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
}

/* Right column holds the overview, draft strategy and combos */
.commander-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Overview text styling */
#commanderOverview {
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.4;
  background-color: #f9fbff;
  padding: 0.6rem 0.8rem;
  border: 1px solid #e8eef8;
  border-radius: 8px;
  color: #34495e;
  max-width: 500px;
}

/* Standings table styles */
.standings-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}
.standings-table th,
.standings-table td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #333333;
  font-size: 0.95rem;
  color: #f5f5f5;
}
.standings-table thead th {
  background-color: #1f1f1f;
  color: #ffd700;
  font-weight: 600;
}
.standings-table tbody tr:nth-child(odd) {
  background-color: #202020;
}
/* Subtle highlight for top 10 */
.standings-table tbody tr.top-ten {
  background-color: #292106;
}
/* Medal cell for ranks 1-3 */
.standings-table td.medal {
  font-size: 1.4rem;
  width: 2.2rem;
}

/* New standings table styling for profile images, commander icons and win rate bars */

/* Player cell contains a circular profile image followed by the player's name */
.standings-table td.player-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Profile image placeholder for players */
.standings-table td.player-cell img.profile-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

/* Player name anchor styling inside the standings table */
.standings-table td.player-cell a.player-name {
  color: #f5f5f5;
  text-decoration: none;
  font-weight: 500;
}
.standings-table td.player-cell a.player-name:hover {
  color: #63c5f3;
}

/* Commanders cell holds up to three small commander icons */
.standings-table td.commanders-cell {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  /* Prevent commander icons from wrapping onto multiple lines */
  white-space: nowrap;
}
.standings-table td.commanders-cell a {
  display: inline-block;
  line-height: 0;
}
.standings-table td.commanders-cell img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #333333;
}

/* Win rate cell contains a horizontal bar and a percentage text */
.standings-table td.winrate-cell {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  /* Ensure there is enough space to display the win/loss bar and percentage side-by-side */
  min-width: 140px;
}
/* Horizontal bar showing wins and losses */
.standings-table .winrate-bar {
  width: 90px;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  background-color: #333333;
}
.standings-table .winrate-bar .wins {
  background-color: #3498db;
  height: 100%;
}
.standings-table .winrate-bar .losses {
  background-color: #e74c3c;
  height: 100%;
}
/* Percentage text next to the bar */
.standings-table .winrate-percent {
  white-space: nowrap;
  font-size: 0.85rem;
  color: #f5f5f5;
}

/* Tooltip for card images */
#cardTooltip {
  /* Make the tooltip fixed to follow the viewport rather than the document. This
     ensures it stays near the cursor even when the page is scrolled. */
  position: fixed !important;
  pointer-events: none;
  background-color: #ffffff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  padding: 0.5rem;
  border-radius: 6px;
  z-index: 9999;
}
#cardTooltip img {
  max-width: 200px;
}

/* Increase image sizes for commander and tooltip */
#commanderCardImage {
  max-width: 300px;
}

/* Rankings page layout */
/* Container for the rankings list and sidebar.  Use nowrap so that the
   sidebar remains pinned to the top of the list instead of wrapping
   beneath it when there isn't enough vertical space.  The gap creates
   horizontal separation between the two columns. */
.rankings-container {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 1.5rem;
}

/* Left column for the top 10 players */
/* Allocate more horizontal space to the rankings list so that player
   rows have room for larger avatars and win‑rate bars. */
.rankings-list {
  /* Restrict the rankings list to roughly the left half of the screen.
     This allows the comparative ELO chart and top strategies to grow
     in width so they remain legible. */
  /* Allocate slightly less space to the rankings list so that the
     right column (chart and strategies) can expand.  A value of
     55% leaves 45% for the sidebar, giving the comparative ELO
     chart more breathing room. */
  /* Allocate exactly half of the horizontal space to the rankings list
     so that the right-hand column can also occupy half.  This change
     widens the comparative ELO chart, providing more horizontal
     breathing room for its lines and labels. */
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
}

/* Right column for the ELO graph and top strategies */
/* The sidebar holds the comparative ELO chart and top strategies list.
   Adjust the flex basis to occupy slightly less horizontal space than
   before, allowing the rankings list to expand. */
.rankings-side {
  /* Expand the sidebar to occupy more horizontal space.  This gives
     the ELO chart and top strategies enough room to breathe. */
  /* Expand the sidebar to occupy roughly forty‑five percent of
     horizontal space.  A wider sidebar allows the ELO chart to
     spread out horizontally, increasing the spacing between ELO
     lines and making the graph easier to read when many players
     are plotted. */
  /* Allocate the remaining half of horizontal space to the sidebar,
     ensuring the comparative chart and top strategies fill the
     expanded area. */
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Individual ranking rows */
/* Each ranking row holds the player's avatar, name, ELO, win‑rate bars,
   and commanders.  Increased padding improves readability and the row
   height is effectively controlled by the avatar size. */
/*
 * Individual ranking rows.  Each row contains the player's rank/medal,
 * avatar and name, ELO rating, win‑rate bars (EDH and OC), and
 * commander icons.  The increased height and padding give the
 * content room to breathe and better match the reference design.
 */
.ranking-row {
  /* Use a grid layout to align row content under the column
     headers.  The grid has five columns: rank/medal, player
     (avatar and name), ELO, win‑rate bars, and recently played
     commanders.  Column gaps separate each group and provide
     consistent alignment with the header row. */
  display: grid;
  grid-template-columns: 80px 1fr 120px minmax(260px, 1.2fr) 240px;
  column-gap: 14px;
  align-items: center;
  /* Moderate padding around each row for breathing room */
  padding: 1rem 1rem;
  background-color: #161616;
  border-bottom: 1px solid #333333;
  border-radius: 12px;
  margin-bottom: 0.8rem;
}

/* Rank badge showing medal or number */
/* Rank badge showing medal or number.  Sized to match the avatar
   height for vertical alignment. */
.ranking-row .rank-badge {
  width: 2.5rem;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
}

/* Player card containing avatar and name */
/* Player card containing avatar and name.  It fills the height of the
   row so that the avatar remains centered relative to other elements. */
.ranking-row .player-card {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
  height: 90px;
}

/* Large profile avatar.  Increase the size to better mirror the
   reference design.  The border helps the circle pop against the
   dark background. */
.profile-img-large { width: 75px; height: 75px; border-radius:50%; object-fit:cover; border:2px solid #333333; }

/* Large player name */
/* Slightly larger name text to match the increased avatar size. */
/* Larger player name to align with bigger avatar. */
.player-name-large {
  font-size: 1.3rem;
  font-weight: 600;
  color: #ffd700;
}

/* ELO value */
/* ELO column: fixed width ensures alignment across rows and allows room
   for three to four digit ratings.  Slightly larger font for emphasis. */
/* ELO value column.  Slightly larger font and width to
   accommodate four‑digit ratings and align with new row height. */
.player-elo {
  font-size: 1.4rem;
  font-weight: 600;
  color: #ffffff;
  min-width: 70px;
  text-align: center;
}

/* Container for the two win rate rows */
/* Container for the two win rate rows.  Increased minimum width gives
   the bars additional space to display the win/loss counts clearly. */
/* Container for the two win rate rows.  The increased minimum
   width ensures that the bars and labels have sufficient room to
   display wins and losses clearly. */
.player-winrates {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 270px;
}

/* Each win rate row (EDH or OC) */
.winrate-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Label for the win rate row (e.g. EDH, OC) */
.winrate-label {
  font-size: 0.85rem;
  color: #d0d0d0;
  width: 40px;
  text-align: right;
}

/* Large win rate bar container.  Increase the width and height so
   that numbers inside the segments remain legible, and the bar
   proportions reflect the reference layout. */
.winrate-bar-large {
  width: 180px;
  height: 22px;
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  background-color: #333333;
}

/* Wins segment inside the large win rate bar */
/* Wins segment inside the large win rate bar */
.winrate-bar-large .wins {
  background-color: #3498db;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: #000;
}

/* Losses segment inside the large win rate bar */
/* Losses segment inside the large win rate bar */
.winrate-bar-large .losses {
  background-color: #e74c3c;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: #000;
}

/* Commander grid styling.  Display commanders in six columns with uniform card sizes. */
/* Commander grid styling: display commanders in six columns and show full card art without cropping. */
.commander-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
/* Individual commander cards use a dark background and no border. */
.commander-grid .commander-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: none;
  border-radius: 10px;
  overflow: hidden;
  background: #0f0f0f;
  cursor: pointer;
  text-decoration: none;
}
/* Show the full card art without cropping. The card scales down uniformly to fit the width. */
.commander-grid .commander-card img {
  width: 100%;
  height: 240px;
  object-fit: contain;
  display: block;
  background: #111;
}
/* Caption for commander cards (if present) */
.commander-grid .commander-card-name {
  padding: 0.4rem;
  font-size: 0.75rem;
  color: #ddd;
  text-align: center;
  background: #0f0f0f;
}

/* Predict page footnote styling */
.predict-footnote {
  margin-top: 1rem;
  border-top: 1px solid #333;
  padding-top: 0.5rem;
  color: #cccccc;
  font-size: 0.8rem;
}
.predict-footnote details {
  cursor: pointer;
}
.predict-footnote summary {
  color: #ffd700;
  font-weight: 600;
}
.predict-footnote p {
  margin: 0.5rem 0 0;
  line-height: 1.4;
}

/* Percentage value next to the win rate bar */
/* Percentage value next to the win rate bar */
.winrate-percent-large {
  font-size: 0.85rem;
  color: #f5f5f5;
  margin-left: 0.5rem;
  white-space: nowrap;
}

/* Container for commander icons on the ranking row */
/* Container for commander icons on the ranking row.  Allow more
   breathing room between icons and align them to the far right. */
/* Container for commander icons on the ranking row
   Align commanders to the left so they sit directly after the win‑rate bars
   rather than hugging the right edge.  Remove the auto margin so the
   commanders flow naturally in the row. */
.player-commanders {
  display: flex;
  align-items: center;
  /* Provide a small gap between commander icons */
  gap: 6px;
  /* Add a slight left margin so icons don’t encroach on the win‑rate bars */
  margin-left: 4px;
}

/* Large commander icon.  Increase the size to match the larger
   avatar and provide more detail. */
.commander-icon-large { width: 95px; height: 95px; border-radius:50%; object-fit: cover; border:2px solid #333333; 
  object-position: 50% 12%;

}


/* Strategies sidebar styling */
/* Strategies sidebar styling
   Push the strategies list downward so it aligns roughly with rows 7–10 in
   the rankings list.  This vertical spacing uses margin-top to create a
   blank area above the strategies container, allowing the comparative
   chart to expand into the freed space.  You can adjust the value below
   based on row height; a larger margin moves the strategies further
   down the page. */
/* Top strategies panel styling.  This panel sits in the rankings
   sidebar beneath the ELO comparison chart and the average ELO list.  A
   negative or small top margin will move the panel closer to the top
   of the sidebar.  The original margin of 320px pushed the panel too
   far down the page (around row 10 of the rankings).  Reduce this
   value so the top strategies list aligns roughly with rank 7 on the
   left side.  You can adjust this value if the vertical alignment
   needs fine‑tuning on different screen sizes.
*/
.top-strategies {
  background-color: #161616;
  border-radius: 8px;
  padding: 1rem;
  border: 1px solid #333333;
  /* Reduce the top margin so that Top Strategies sits immediately beneath
     the Top Commander ELO section without an awkward gap.  Adjust this
     value to fine-tune alignment with the rankings list. */
  /* Reduce the top margin so that Top Strategies sits immediately beneath
     the Top Commander ELO section without an awkward gap.  A small
     margin keeps a consistent visual separation. */
  margin-top: 0;
}
.top-strategies h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1.2rem;
  color: #ffd700;
}

.strategies-group h4 {
  margin: 0.5rem 0 0.25rem;
  font-size: 1rem;
  color: #d0d0d0;
}

.strategies-group ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.strategy-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0;
}

.strategy-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #333333;
}

.strategy-name {
  flex: 1;
  color: #f5f5f5;
  text-decoration: none;
  font-size: 0.9rem;
}

.strategy-name:hover {
  color: #63c5f3;
}

.strategy-percent {
  font-size: 0.85rem;
  color: #f5f5f5;
}

/* ELO comparison chart section styling */
.compare-elo-section {
  background-color: #161616;
  border-radius: 8px;
  padding: 1rem;
  border: 1px solid #333333;
}
.compare-elo-section h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  color: #ffd700;
}
.compare-chart-container {
  position: relative;
  width: 100%;
  /* Increase the chart height so that ELO trends remain legible even
     with more players.  The width expands automatically within the
     sidebar. */
  /* Increase the chart height so that ELO lines remain legible even
     with more players plotted.  The extra vertical space allows up
     to ten players' ELO histories to be shown clearly. */
  /* Expand the height of the ELO chart so that it fills more of the
     available vertical space in the right-hand column.  A taller
     chart allows more room between ELO lines when plotting up to
     ten players. */
  /* Increase the height of the ELO chart further so that ten
     players' ELO lines have ample vertical separation.  With a
     380px height, the chart fills more of the sidebar and the
     tick labels remain readable. */
  height: 380px;
}
#cardTooltip img {
  max-width: 300px;
}

/* Dark esports theme overrides */

/* Section header layout: title and description side by side */
.section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.section-header h2 {
  margin: 0;
  color: #ffd700;
}

/* Lighten the section description text */
.section-header p {
  margin: 0;
  color: #b3b3b3;
  font-size: 0.95rem;
}
.section-header .section-description {
  flex: 1;
  font-size: 0.9rem;
  color: #c0c0c0;
  margin: 0;
}

/* Style for the commander overview container and win rate chart */
#commanderOverviewContainer h4,
#commanderDraftNotes h4,
#commanderSynergy h4,
#commanderWinRateContainer h4,
#commanderCombos h4 {
  color: #ffd700;
  margin: 0 0 0.5rem 0;
}
/* Ensure commander overview and draft notes have consistent background boxes */
#commanderOverviewContainer,
#commanderDraftNotes {
  /* Dark background and border for overview and draft notes */
  background-color: #1c1c1c;
  border: 1px solid #333333;
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  color: #f5f5f5;
}
/* Win rate container styling */
#commanderWinRateContainer {
  background-color: #1c1c1c;
  border: 1px solid #333333;
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  color: #f5f5f5;
}
#commanderWinRateContainer canvas {
  width: 100% !important;
  height: 260px !important;
}

/* ------------------------------------------------------------------
   Rankings – title, column headers, and ELO arrow styling
   ------------------------------------------------------------------ */
/* Title above the rankings list.  Provides separation from the
   subsequent column header row. */
.rankings-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #ffd700;
  margin-bottom: 0.8rem;
}

/* Row of column headings for the rankings table.  Matches the grid
   structure used in each ranking row: rank, player (avatar + name),
   ELO, win‑rate bars, and recently played commanders. */
.rankings-columns {
  display: grid;
  grid-template-columns: 80px 1fr 120px minmax(260px, 1.2fr) 240px;
  column-gap: 14px;
  align-items: center;
  font-weight: 700;
  color: #ffd700;
  opacity: 0.9;
  margin-bottom: 0.6rem;
}
.rankings-columns > div {
  white-space: nowrap;
  /* Center the header text above each ranking box */
  text-align: center;
}

/* ELO cell and arrow styling.  Align arrow next to the ELO value and
   apply colours for increasing/decreasing performance. */
.elo-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}
.elo-cell .elo-value {
  font-size: 1.4rem;
  font-weight: 600;
  color: #ffffff;
}
.elo-arrow.up {
  color: #42a5ff;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
}
.elo-arrow.down {
  color: #ff4d4d;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
}

/* Neutral/no‑change arrow indicator.  Used when a player's ELO did not
   change in their most recent session.  The muted colour distinguishes
   it from positive (blue) and negative (red) movement. */
.elo-arrow.flat {
  color: #aaaaaa;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
}

/* Combo dropdown light styling to match other selects */
#comboDropdownButton {
  background-color: #fdfdfd;
  color: #34495e;
  border: 1px solid #dcdfe6;
}
#comboDropdownButton:hover {
  background-color: #e8eef8;
}
.combo-options {
  background-color: #fdfdfd;
  border: 1px solid #dcdfe6;
  color: #34495e;
}
.combo-option {
  color: #34495e;
}
.combo-option:hover {
  background-color: #e8eef8;
}


/* Synergy cards section */
.commander-synergy {
  margin-top: 1rem;
}
.commander-synergy h4 {
  margin-bottom: 0.5rem;
  color: #1a73e8;
  font-size: 1rem;
}
.synergy-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.synergy-card {
  /* Light card styling for synergy cards */
  background-color: #ffffff;
  border: 1px solid #e5eaf0;
  border-radius: 8px;
  padding: 0.4rem;
  width: 160px;
  text-align: center;
  color: #34495e;
}
.synergy-card a {
  color: #1a73e8;
  font-weight: 600;
  text-decoration: none;
  display: block;
}
.synergy-card a:hover {
  text-decoration: underline;
}
.synergy-card img {
  width: 100%;
  border-radius: 4px;
  margin-top: 0.3rem;
}
.synergy-card img.hidden {
  display: none;
}

/* Commander classification row styling */
#commanderClassification {
  margin-top: 0.5rem;
}
#commanderClassification div {
  margin-right: 1rem;
  color: #e2e8f0;
}
#commanderClassification strong {
  color: #38bdf8;
}

/* Draft notes styling */
.draft-notes {
  margin-top: 1rem;
}
.draft-notes h4 {
  margin-bottom: 0.4rem;
  color: #1a73e8;
  font-size: 1rem;
}
.draft-notes p {
  /* Use a dark color for draft notes text for better readability */
  color: #34495e;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Commander combos list styling */
#commanderCombos {
  margin-top: 1rem;
}
#commanderCombos h4 {
  margin-bottom: 0.5rem;
  color: #38bdf8;
  font-size: 1rem;
}
.combos-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.commander-combo-entry {
  background-color: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 0.6rem;
  color: #e2e8f0;
}
.commander-combo-entry .combo-names {
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.commander-combo-entry .combo-names a {
  color: #38bdf8;
  text-decoration: none;
}
.commander-combo-entry .combo-names a:hover {
  text-decoration: underline;
}
.commander-combo-entry .combo-images {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.commander-combo-entry .combo-images img {
  width: 120px;
  border-radius: 4px;
}

/* Combos tab entries styling */
.combo-entry {
  background-color: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  margin-bottom: 1rem;
  padding: 0.6rem;
  color: #e2e8f0;
}
.combo-entry .combo-names {
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.combo-entry .combo-names a {
  color: #38bdf8;
  text-decoration: none;
}
.combo-entry .combo-names a:hover {
  text-decoration: underline;
}
.combo-entry .combo-images {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.combo-entry img {
  width: 120px;
  border-radius: 4px;
}

/* Global link color for better contrast */
a {
  color: #1a73e8;
}
a:hover {
  text-decoration: underline;
  color: #0b5394;
}

/* Enlarge commander card images */
.commander-details img {
  max-width: 300px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.5) !important;
}

/* Enlarge tooltip images for commander and synergy previews */
#cardTooltip {
  /* Dark tooltip styling for card previews */
  background-color: #1c1c1c !important;
  border: 1px solid #333333 !important;
  border-radius: 8px !important;
  padding: 0.5rem !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  position: fixed !important;
}
#cardTooltip img {
  max-width: 300px !important;
  border-radius: 4px !important;
}

/* Synergy cards larger and dark */
.synergy-card {
  /* Dark card styling for synergy cards */
  background-color: #1f1f1f !important;
  border: 1px solid #333333 !important;
  border-radius: 8px !important;
  padding: 0.5rem !important;
  width: 200px !important;
  color: #f5f5f5 !important;
}
.synergy-card a {
  color: #ffd700 !important;
  font-weight: 600;
  text-decoration: none;
  display: block;
  margin-bottom: 0.3rem;
}
.synergy-card a:hover {
  text-decoration: underline !important;
  color: #fcd34d !important;
}
.synergy-card img {
  width: 100% !important;
  border-radius: 4px !important;
  margin-top: 0.3rem !important;
}

/* ----------------------------------------------------------------------------
   Head-to-head section styles
   ---------------------------------------------------------------------------- */
/* Container for the head-to-head comparison section */
#headToHeadSection {
  margin-top: 1rem;
  /* Add a subtle top border to distinguish the head-to-head section from the ELO chart above */
  border-top: 1px solid #333333;
  padding-top: 1rem;
}
#headToHeadSection h4 {
  margin: 0 0 0.5rem;
  color: #ffd700;
}
#headToHeadSection .form-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
#headToHeadSection select {
  min-width: 200px;
  background-color: #2a2a2a;
  color: #f5f5f5;
  border: 1px solid #444444;
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
}
#headToHeadSection select:focus {
  border-color: #ffd700;
}
/* Results panel for head-to-head stats */
.stats-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.stats-panel .stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.stats-panel .stats-row div {
  font-size: 0.95rem;
  background-color: #2a2a2a;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  color: #f5f5f5;
}

/* ----------------------------------------------------------------------------
   Section header layout adjustments
   ---------------------------------------------------------------------------- */
/* Stack the title and description vertically instead of horizontally */
.section-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.section-header h2 {
  margin: 0;
  color: #ffd700;
}
.section-header .section-description {
  margin: 0;
  color: #c0c0c0;
  font-size: 0.9rem;
}

/* Standings table dark styling adjustments */
.standings-table thead th {
  /* Dark header styling for standings table */
  background-color: #1f1f1f !important;
  color: #ffd700 !important;
}
.standings-table tbody tr:nth-child(odd) {
  background-color: #202020 !important;
}
.standings-table tbody tr:nth-child(even) {
  background-color: #181818 !important;
}
.standings-table tbody tr.top-ten {
  background-color: #292106 !important;
}
.standings-table td {
  color: #f5f5f5 !important;
}
.standings-table td.medal {
  font-size: 1.5rem !important;
}

/* Footer text color subtle */
footer {
  color: #b3b3b3 !important;
}

/* Make all links yellow for better contrast */
a {
  color: #ffd700 !important;
}
a:hover {
  color: #fcd34d !important;
}

/* Improve contrast and sizing for commander name text on commander pages */
#commanderInfo h3,
#commanderName {
  color: #f1f5ff !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
}

/* Custom combo dropdown styling */
.combo-dropdown {
  position: relative;
  display: inline-block;
}

/* Dark style for combo dropdown button and options */
#comboDropdownButton {
  background-color: #2a2a2a;
  color: #f5f5f5;
  border: 1px solid #444444;
}
#comboDropdownButton:hover {
  background-color: #444444;
  color: #ffd700;
}
.combo-options {
  background-color: #2a2a2a;
  border: 1px solid #444444;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.combo-option {
  color: #34495e;
}
.combo-option:hover {
  background-color: #eef4fd;
}

  top: 100%;
  left: 0;
  right: 0;
  background-color: #0e2a54;
  border: 1px solid #1e293b;
  border-radius: 4px;
  margin-top: 4px;
  padding: 4px 0;
  max-height: 300px;
  overflow-y: auto;
  z-index: 200;
}

.combo-options.hidden {
  display: none;
}

.combo-option {
  padding: 4px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #e2e8f0;
  font-size: 0.9rem;
}

.combo-option:hover {
  background-color: #16345e;
}

.combo-option img {
  width: 18px;
  height: 18px;
}

/* Ensure mana symbol icons appended to the combo dropdown button stay small. Without
   these rules the icons use their native resolution and can overflow the page,
   as seen when large mana symbols appeared. */
#comboDropdownButton img {
  width: 18px;
  height: 18px;
  display: inline-block;
}

/* === BDBB Legends Section === */
.legend-winners {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1rem;
}

.legend-winner {
  text-align: center;
  max-width: 200px;
}

.legend-winner img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}

.legend-caption {
  font-weight: bold;
  font-size: 0.9rem;
  color: #e2e8f0;
}

.legend-timeline {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.legend-event h3 {
  margin: 0 0 0.25rem 0;
  color: #fbbf24;
  font-size: 1.1rem;
}

.legend-event p {
  margin: 0.25rem 0;
  line-height: 1.4;
}

/* Styles for the CEDHC Draft Guide page */
/* Increase the size of draft guide sub‑headings for better readability */
#draftGuideSection h3 {
  font-size: 1.5rem;
  margin-top: 1.3rem;
  margin-bottom: 0.8rem;
  font-weight: 700;
  /* Use the golden accent colour for draft guide sub‑headings */
  color: #ffd700 !important;
}

#draftGuideSection p {
  margin-bottom: 0.8rem;
  line-height: 1.5;
  /* Lighten the paragraph text for contrast on a dark background */
  color: #d0d0d0 !important;
}

#draftGuideSection ul {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

#draftGuideSection ul li {
  margin-bottom: 0.8rem;
  /* Use a lighter color and more spacing for list items on a dark background */
  line-height: 1.5;
  color: #d0d0d0 !important;
}

#draftGuideSection .draft-image {
  display: block;
  /* Adjust image sizes: allow general guide images to take up a bit more space */
  max-width: 60%;
  height: auto;
  margin: 1rem auto;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Additional class for particularly small images (golden cube, Deadpool, Iron Man) */
/* The small images in the draft guide were still overpowering the text. Reduce
   their maximum width further so they occupy roughly half of their previous size.
   This makes the golden cube, Deadpool, and Iron Man cards unobtrusive and
   complementary to the content. */
#draftGuideSection .draft-image-small {
  /* Increase the size of small draft guide images to make them more visible */
  max-width: 40%;
  height: auto;
}

/* -------------------------------------------------------------------------- */
/* Overrides to ensure a consistent black and yellow theme throughout the site */

/* Use the golden accent for titles in comparative sections and leaderboards */
.compare-elo-section h3,
.leaderboard h3 {
  color: #ffd700 !important;
}

/* Ensure leaderboard names and values use light text on dark backgrounds */
.leaderboard .name,
.leaderboard .value {
  color: #f5f5f5 !important;
}

/* Style combo dropdown options for dark theme with golden hover */
.combo-options {
  background-color: #2a2a2a;
  border: 1px solid #444444;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.combo-option {
  padding: 4px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #f5f5f5;
  font-size: 0.9rem;
}
.combo-option:hover {
  background-color: #444444;
  color: #ffd700;
}

/* Account panel styles */
#accountPanel {
  margin: 1rem auto;
  padding: 1rem;
  border: 1px solid #333;
  border-radius: 8px;
  background-color: #1f1f1f;
}
.avatar-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 0.5rem;
}
.token-result {
  margin-top: 0.5rem;
  font-weight: bold;
  color: #ffd700;
}

/* ===================================================================
   Predict Page Styles
   These classes support the layout and appearance of the new Predict
   feature.  They handle the typeahead multi-select inputs, suggestion
   dropdown, helper text, the results cards and probability bars.  They
   follow the existing dark theme with golden accents.  */

.predict-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.predict-field {
  flex: 1;
  min-width: 260px;
}

.predict-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* Container for selected players and the input */
.typeahead {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  background: #1b1b1b;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 0.5rem;
}

/* Chip for each selected player */
.typeahead-token {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #2b2b2b;
  border: 1px solid #444;
  border-radius: 16px;
  padding: 0.25rem 0.5rem;
  font-weight: 600;
}

.typeahead-token .x {
  cursor: pointer;
  font-weight: 800;
  color: #bbb;
}

/* Search input inside the typeahead wrapper */
.typeahead input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  min-width: 180px;
}

/* Dropdown menu for typeahead suggestions */
.typeahead-menu {
  position: absolute;
  z-index: 50;
  margin-top: 0.25rem;
  background: #1b1b1b;
  border: 1px solid #333;
  border-radius: 8px;
  overflow: hidden;
  max-height: 260px;
  overflow-y: auto;
  width: 420px;
}

.typeahead-item {
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.typeahead-item:hover {
  background: #252525;
}

.typeahead-item .flag {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #444;
}

/* Helper text under the player selection */
.predict-help {
  margin-top: 0.375rem;
  color: #aaa;
  font-size: 0.9rem;
}

/* Disabled state for prediction button */
.btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Margin above results block */
.predict-results {
  margin-top: 1.25rem;
}

/* Grid of result cards for each selected player */
.pred-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.pred-card {
  background: #151515;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 0.75rem 1rem;
}

.pred-card .row {
  display: flex;
  justify-content: space-between;
  margin: 0.25rem 0;
}

.pred-card .name {
  font-weight: 800;
}

/* Probability bar container */
.pred-bar {
  height: 10px;
  background: #2a2a2a;
  border-radius: 6px;
  overflow: hidden;
  margin: 0.5rem 0;
}

.pred-bar > div {
  height: 100%;
}

.pred-bar .blue {
  background: #2f7dd6;
}

.pred-bar .red {
  background: #cc4b4b;
}

/*
 * Display mode select boxes for sessions vs games toggles
 * on the player profile page. These controls allow users to
 * choose whether pie charts and lists display counts per
 * session or per game. They are compact and styled to
 * blend into the site's dark theme.
 */
.display-mode-select {
  margin-left: 0.5rem;
  padding: 2px 4px;
  background-color: #1a1a1a;
  color: #f5f5f5;
  border: 1px solid #333;
  border-radius: 3px;
  font-size: 0.8rem;
  outline: none;
}

/* Additional styling for the CEDHC Data page */
.commander-filters {
  margin: 1rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  color: #f5f5f5;
}
.commander-filters button {
  background-color: #333333;
  color: #f5f5f5;
  border: none;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
}
.commander-filters button:hover {
  background-color: #555555;
}
.color-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.color-filter-label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: #f5f5f5;
}
.color-filter-label input {
  margin: 0;
}
.leaderboard li img {
  vertical-align: middle;
}


/* Focus commander circle thumbnails strictly on the artwork portion of the card.
   These rules adjust the crop and zoom so the circular thumbnails show only
   the illustration and avoid the card name and text box below.  We set
   a consistent vertical offset and increase the scale to fill the circle
   with art. */
.player-recent-commander img,
.commander-icon,
.commander-icon-large {
  /* Position the crop slightly lower to avoid the top border/title and
     higher than the text box.  18% vertical offset centers the art. */
  object-position: 50% 18% !important;
  object-fit: cover;
}
/* Apply a stronger zoom and matching offset for session/recency icons */
.player-recent-commander img {
  transform: scale(1.3);
  object-position: 50% 18% !important;
  object-fit: cover;
}

/* Ensure standalone commander icons (e.g. list items) use the same crop */
.commander-icon {
  object-position: 50% 18% !important;
  object-fit: cover;
}


/* Player profile: commanders drafted as circle thumbnails */
#playerCommanders {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
/* Player profile: commander thumbnails under "Commanders Drafted".  These
   circles should match the size of player avatars in the rankings
   table (75x75) and mirror the art‑centric cropping used elsewhere. */

/* Ensure commander thumbnails on the player page don't overlap.
   Fix the wrapper size and clip the scaled image. Add margin for breathing room. */
#playerCommanders .player-recent-commander{
  width: 95px;
  height: 95px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 6px;
}
#playerCommanders { gap: 14px; }
#playerCommanders .player-recent-commander img {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  object-fit: cover;
  /* Focus the crop on the illustration region of the card */
  object-position: 50% 18%;
  /* Increase zoom to hide card name/text box and fill the circle */
  transform: scale(1.3);
  border: 2px solid #333333;
}


/* ===== Mobile responsiveness additions ===== */
html, body { overflow-x: hidden; }
img, canvas, svg, video { max-width: 100%; height: auto; }

@media (max-width: 1200px) { :root { font-size: 16px; } }
@media (max-width: 992px)  { :root { font-size: 15px; } }
@media (max-width: 768px)  { :root { font-size: 14px; } }

/* Hamburger */
@media (max-width: 768px) {
  #navToggle { display:inline-flex !important; align-items:center; justify-content:center; z-index: 1001; }
  #mainNav { display:none; position:absolute; top:56px; left:0; right:0; background:#111; z-index:1000; border-top:1px solid #222; }
  #mainNav.open { display:block; }
}

/* Rankings: stack rows into cards */
@media (max-width: 992px) {
  .rankings-columns { display:none; }
  .ranking-row {
    display:grid;
    grid-template-columns: 64px 1fr;
    grid-template-areas:
      "avatar header"
      "stats stats"
      "recent recent";
    gap:8px;
    padding:12px;
    border:1px solid #2b2b2b;
    border-radius:12px;
    background:#151515;
    margin-bottom:10px;
  }
  .ranking-row .rank-cell, .ranking-row .elo-cell { display:none; }
  .ranking-row .player-cell { grid-area: header; display:flex; align-items:center; gap:8px; }
  .ranking-row .player-avatar { grid-area: avatar; }
  .ranking-row .winrates { grid-area: stats; }
  .ranking-row .player-commanders { grid-area: recent; justify-content:flex-start; }
}

/* Commander grid columns */
@media (max-width: 1200px) {
  .commander-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .commander-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .commander-card { border-radius: 10px; }
}

/* Charts wrapped */
.chart-block { height: 360px; }
@media (max-width: 768px) {
  .chart-block { height: 260px; }
  .chart-block canvas { width:100% !important; height:100% !important; }
}

/* Tooltips on phones -> centered modal sizing */
@media (max-width: 768px) {
  .card-tooltip { transform: none !important; left: 50% !important; top: 12vh !important; translate: -50% 0 !important; width: min(92vw, 420px) !important; }
}

/* Player page chips scroll if needed */
@media (max-width: 576px) {
  #playerCommanders { overflow-x:auto; white-space:nowrap; padding-bottom:6px; }
  #playerCommanders .player-recent-commander { display:inline-block; margin-right:10px; }
}
/* ========================================== */

/* === Desktop fixes: prevent ELO/name overlap === */
@media (min-width: 993px) {
  .ranking-row { grid-template-columns: 80px minmax(220px,1.2fr) 140px minmax(320px,1.2fr) 260px; }
  .ranking-row .player-card { min-width: 220px; }
  .ranking-row .elo-cell { min-width: 140px; text-align: left; }
  .ranking-row .player-name, .ranking-row .player-name-large { white-space: nowrap; }
}
/* Player color pref chart sizing */
#colorPrefPieContainer.chart-block { height: 300px; }
@media (max-width: 768px) { #colorPrefPieContainer.chart-block { height: 220px; } }

/* Ensure burger visible and nav usable on phones */
header { position: relative; }
@media (max-width: 768px) {
  #navToggle { display:block !important; position:fixed; left:10px; top:10px; z-index:1100; }
  #mainNav { margin-top:48px; }
}

/* === Mobile nav: top-right visible and menu drops from it === */
@media (max-width: 768px) {
  #navToggle { 
    display: block !important; 
    position: fixed; 
    right: 10px; 
    top: 10px; 
    z-index: 1100; 
    width: 42px; height: 42px; 
    border-radius: 8px; 
    border: 1px solid #333; 
    background:#1a1a1a; color:#ffd400; 
    font-size:20px; line-height:40px; text-align:center;
  }
  #mainNav {
    position: fixed;
    right: 10px;
    top: 56px;
    z-index: 1099;
    background: #111;
    border: 1px solid #222;
    border-radius: 10px;
    padding: 8px 10px;
    display: none;
  }
  #mainNav.open { display:block; }
  #mainNav ul { display:block !important; }
  #mainNav li { padding: 8px 6px; white-space: nowrap; }
}

/* === Mobile rankings: include ELO row with label === */
@media (max-width: 992px) {
  .ranking-row {
    grid-template-columns: 64px 1fr;
    grid-template-areas:
      "avatar header"
      "elo    elo"
      "stats  stats"
      "recent recent";
  }
  .ranking-row .rank-cell { display:none; }
  .ranking-row .elo-cell { 
    display:flex; 
    align-items:center; 
    gap:6px; 
    grid-area: elo; 
    font-size: 1rem;
    color: #ddd;
  }
  .ranking-row .elo-cell::before { content: "ELO: "; color:#ffd400; font-weight:600; }
  .ranking-row .player-cell { grid-area: header; }
  .ranking-row .player-avatar { grid-area: avatar; }
  .ranking-row .winrates { grid-area: stats; }
  .ranking-row .player-commanders { grid-area: recent; }
}

/* === Force-visible mobile nav on first load === */
@media (max-width: 768px) {
  #navToggle { 
    display: block !important; 
    position: fixed; 
    right: max(10px, env(safe-area-inset-right));
    top: max(10px, env(safe-area-inset-top));
    z-index: 2000; 
    width: 44px; height: 44px; 
    border-radius: 10px; 
    border: 1px solid #333; 
    background:#1a1a1a; color:#ffd400; 
    font-size:22px; line-height:42px; text-align:center;
    box-shadow: 0 2px 10px rgba(0,0,0,.35);
  }
  #mainNav {
    position: fixed;
    right: max(10px, env(safe-area-inset-right));
    top: calc(max(10px, env(safe-area-inset-top)) + 48px);
    z-index: 1999;
    background: #111;
    border: 1px solid #222;
    border-radius: 12px;
    padding: 8px 10px;
    display: none;
    max-height: 70vh;
    overflow-y: auto;
  }
  #mainNav.open { display:block; }
  #mainNav ul { display:block !important; }
  #mainNav li { padding: 10px 8px; white-space: nowrap; }
}

/* === Mobile Nav: guaranteed visible === */
.nav-toggle-btn {
  display: none;
}
@media (max-width: 768px) {
  .nav-toggle-btn {
    display: block !important;
    position: fixed;
    right: max(12px, env(safe-area-inset-right));
    top: max(12px, env(safe-area-inset-top));
    z-index: 4000;
    width: 44px; height: 44px;
    border-radius: 10px;
    border: 1px solid #2c2c2c;
    background: #1a1a1a;
    color: #ffd400;
    font-size: 22px;
    line-height: 42px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
  }
  #mainNav {
    position: fixed !important;
    right: max(12px, env(safe-area-inset-right));
    top: calc(max(12px, env(safe-area-inset-top)) + 50px);
    z-index: 3999 !important;
    display: none;
    background: #0f0f0f;
    border: 1px solid #242424;
    border-radius: 12px;
    padding: 8px 10px;
    max-height: 70vh;
    overflow-y: auto;
    min-width: 220px;
  }
  #mainNav.open { display: block !important; }
  #mainNav ul { display:block !important; margin:0; padding:0; }
  #mainNav li { list-style:none; padding:10px 8px; white-space:nowrap; }
}

/* === Place hamburger top-right; keep logo left unobstructed === */
@media (max-width: 768px) {
  header { padding-right: 60px; } /* room for button */
  #navToggle, .nav-toggle-btn {
    right: max(12px, env(safe-area-inset-right)) !important;
    left: auto !important;
  }
}

/* === Commander filter controls === */
/* Layout container for the filter controls below the commander search bar. */
#commanderFilters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
/* Style for the group of Normal/Bulk/Removed toggle checkboxes */
#commanderFilters .toggle-group label {
  margin-right: 0.75rem;
  font-weight: 500;
  color: #f5f5f5;
  display: inline-flex;
  align-items: center;
}
#commanderFilters .toggle-group input {
  margin-right: 0.25rem;
}
/* Style for the color filter dropdown */
#commanderFilters .color-filter label {
  margin-right: 0.5rem;
  font-weight: 500;
  color: #f5f5f5;
}
#commanderFilters .color-filter select {
  min-width: 200px;
  background-color: #2a2a2a;
  color: #f5f5f5;
  border: 1px solid #444444;
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  font-size: 1rem;
  cursor: pointer;
  /* Remove the default native drop‑down arrow and use our own styling.  The
     appearance rules ensure the dark background and light text are
     honoured across browsers. */
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

/* Ensure each option inside the multi-select inherits the dark theme.
   Without these rules some browsers display the options list with
   white text on a white background, making the colour names unreadable. */
#commanderFilters .color-filter select option {
  background-color: #2a2a2a;
  color: #f5f5f5;
}

/*
 * Player statistics cards styling
 * These styles control the presentation of the cards shown on each
 * player's profile page. Each statistic is presented in its own card
 * with an icon, label, and value. The cards use flexible widths and
 * colour-coded borders to improve visual differentiation. The card
 * container uses a flexbox layout so cards wrap neatly on narrower
 * screens.
 */
.stats-cards {
  /* Arrange stat cards horizontally with wrapping and spacing */
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

/* Base style for each stat card */
.stat-card {
  display: flex;
  align-items: center;
  background-color: #1a1a1a;
  border-radius: 8px;
  padding: 0.5rem 0.8rem;
  /* Set a default left border colour; individual cards override this */
  border-left: 4px solid #444;
  min-width: 160px;
  flex: 1 1 30%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Icon inside stat cards */
.stat-icon {
  font-size: 1.5rem;
  margin-right: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
}

/* Text container within stat cards */
.stat-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

/* Label text for statistics */
.stat-label {
  font-size: 0.8rem;
  color: #b0b0b0;
  margin-bottom: 0.1rem;
}

/* Value text for statistics */
.stat-value {
  font-size: 1.2rem;
  font-weight: 600;
  color: #f5f5f5;
}

/* Colour-coded borders for each stat category */
.stat-elo { border-left-color: #ffd700; }
.stat-games { border-left-color: #00bcd4; }
.stat-wins { border-left-color: #4caf50; }
.stat-oc-games { border-left-color: #ff9800; }
.stat-oc-wins { border-left-color: #ff5722; }
.stat-oc-rate { border-left-color: #9c27b0; }
.stat-cedh-games { border-left-color: #2196f3; }
.stat-cedh-wins { border-left-color: #8bc34a; }
.stat-cedh-rate { border-left-color: #e91e63; }


/* === Account / Profile Dashboard === */

#accountPanel {
  max-width: 960px;
  margin: 2rem auto 0 auto;
}

.account-dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
}

.account-dashboard-header h3 {
  margin: 0;
}

.account-dashboard-subtitle {
  margin: 0.25rem 0 0;
  color: #cccccc;
  font-size: 0.95rem;
}

.profile-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.8fr);
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .profile-dashboard {
    grid-template-columns: 1fr;
  }
}

.profile-card {
  background: #1b1b1b;
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  border: 1px solid #333;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

.profile-card h4 {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.avatar-preview-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.avatar-preview-wrapper .avatar-img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 3px solid #ffd700;
  object-fit: cover;
}

.avatar-meta {
  text-align: center;
  font-size: 0.9rem;
  color: #bbbbbb;
}

.hidden-input {
  display: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1px solid #444;
  background-color: #2a2a2a;
  color: #f5f5f5;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}

.btn:hover {
  background-color: #444;
  border-color: #ffd700;
  color: #ffd700;
  transform: translateY(-1px);
}

.btn-primary {
  background-color: #ffd700;
  color: #111;
  border-color: #ffd700;
  font-weight: 600;
}

.btn-primary:hover {
  background-color: #ffe866;
  border-color: #ffe866;
  color: #111;
}

.btn-danger {
  background-color: #5a1a1a;
  border-color: #7a2222;
}

.btn-danger:hover {
  background-color: #7a2222;
  border-color: #a52a2a;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.profile-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.profile-form-grid .form-row label {
  font-weight: 600;
}

.password-section {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #333;
}

.password-section .form-row {
  margin-bottom: 0.6rem;
}

.small-note {
  font-size: 0.85rem;
  color: #bbbbbb;
}


/* Player profile header avatar (Player Information page) */
.player-header-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}

/* Bigger name + avatar for the player profile header */
.player-header-row #playerName {
  font-size: 2.5rem;
}

/* Larger circular avatar next to the name */
.player-info-avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #333333;
}