/* =========================================================
   Legacy Esports
   ========================================================= */

.gwl-legacy__header {
  margin-bottom: 16px;
}

.gwl-legacy__title {
  margin: 0 0 6px;
  color: #dd9933;
}

.gwl-legacy__subtitle {
  margin: 0;
  opacity: 0.8;
}

.gwl-legacy__notice {
  padding: 12px 14px;
  border: 2px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  margin-bottom: .3rem;
}

.gwl-legacy__table-wrap {
    width: 100% !important;
    display: block !important;   /* Ensures it behaves as a full-width container */
}

/* Table (desktop/default) */
.gwl-legacy__table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.gwl-legacy__th,
.gwl-legacy__td {
  padding: 10px 12px;
  text-align: center;
  border-top: 2px solid rgba(0,0,0,0.10);
  border-bottom: 2px solid rgba(0,0,0,0.10);
  vertical-align: middle;
}

.gwl-legacy__td--name,
.gwl-legacy__th--name {
  text-align: left !important;
}

.gwl-legacy__th {
  padding: 10px 12px;
  font-weight: 700;
  border-top: 2px solid rgba(0,0,0,0.10);
  border-bottom: 2px solid rgba(0,0,0,0.18);
  white-space: normal; /* Changed from nowrap to allow the <br> to work */
  color: #00a3ff;
  text-align: center;
  line-height: 1.2; /* Tightens the gap between the stacked words */
  vertical-align: bottom; /* Keeps words aligned if one header is only one line */
  background-color: transparent;
}

.gwl-legacy__record {
  color: #007bff;
}

.gwl-legacy__data {
    color: #dd9933; /* Soft Gold */
}

.gwl-legacy__td--ladders,
.gwl-legacy__td--matches,
.gwl-legacy__td--defined,
.gwl-legacy__td--first,
.gwl-legacy__td--last,
.gwl-legacy__th--ladders,
.gwl-legacy__th--matches,
.gwl-legacy__th--defined,
.gwl-legacy__th--first,
.gwl-legacy__th--last {
  text-align: center !important;
  white-space: nowrap;
}

.gwl-legacy__td--first,
.gwl-legacy__td--last,
.gwl-legacy__th--first,
.gwl-legacy__th--last {
  white-space: nowrap;
}

.gwl-legacy__game-link,
.gwl-legacy__ladder-link {
  text-decoration: none;
}

.gwl-legacy__tr:hover .gwl-legacy__game-link,
.gwl-legacy__tr:hover .gwl-legacy__ladder-link {
  text-decoration: underline;
}

/* 1. Desktop Styles: Small column for the number */
.gwl-legacy__th--rank, 
.gwl-legacy__td--rank {
  width: 70px;
  text-align: center;
}

.gwl-legacy__rank-badge {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  background: #333; /* Darker for that leaderboard feel */
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.9em;
}

.gwl-legacy__entity-link { text-decoration: none; }
.gwl-legacy__entity-link:hover { text-decoration: underline; }

/* =========================================================
   Breadcrumbs
   ========================================================= */
.gwl-legacy__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.gwl-legacy__crumbs {
  width: 100%;
}

.gwl-legacy__crumbs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  font-size: 0.95em;
  opacity: 0.85;
}

.gwl-legacy__crumb {
  display: inline-flex;
  align-items: center;
}

.gwl-legacy__crumb + .gwl-legacy__crumb::before {
  content: "/";
  display: inline-block;
  margin: 0 8px;
  opacity: 0.55;
}

.gwl-legacy__crumb-link {
  text-decoration: none;
}

.gwl-legacy__crumb-link:hover {
  text-decoration: underline;
}

.gwl-legacy__crumb-current {
  font-weight: 700;
}

/* Desktop: Center the new column */
.gwl-legacy__th--matches,
.gwl-legacy__td--matches {
  text-align: center !important;
  width: 80px; /* Optional: give it a fixed width to keep things tight */
}

.gwl-sortable {
    cursor: pointer;
    position: relative;
    transition: background 0.2s;
}

.gwl-sortable:hover {
    background: rgba(0, 163, 255, 0.05);
    color: #fff; /* Highlight on hover */
}

/* Optional: Add a small indicator that it's sortable */
.gwl-sortable::after {
    content: ' ↕';
    font-size: 0.8em;
    opacity: 0.3;
}

/* Highlight the title of the column being sorted */
.gwl-sortable.is-sorted {
    color: #dd9933 !important;
}

/* Style for the stacked subtitle line */
.gwl-legacy__title-sub {
    display: block;       /* Forces the span onto its own line */
    font-size: 0.75em;    /* Reduces the font size as requested */
    opacity: 0.7;         /* Matches the muted/grey look of your breadcrumbs */
    color: inherit;       /* Inherits the base title color but mutes it with opacity */
    margin-top: 4px;      /* Adds a tiny bit of breathing room between the lines */
    font-weight: 400;     /* Keeps it from looking too heavy compared to the main title */
}

/* Time Machine Date Links - Clean Hover Fix */
.gwl-time-machine-trigger {
    background: none !important; /* Forces background to stay clear */
    border: none;
    color: #98cb00; /* Your standard green */
    text-decoration: none;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    transition: color 0.2s ease;
    box-shadow: none !important; /* Prevents any glow or block shadows */
}

.gwl-time-machine-trigger:hover {
    background: none !important; /* Ensures no highlight block appears */
    color: #5de000; /* Your hover green */
    text-decoration: none;
}

/* Optional: Add a slight indicator that it's a special link 
   without using a full underline */
.gwl-time-machine-trigger::after {
    content: " 🕒";
    font-size: 0.8em;
    opacity: 0.5;
    vertical-align: middle;
}

/* Modal Structure */
.gwl-tm-modal {
    display: none; 
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    backdrop-filter: blur(4px);
}

/* Modal content becomes a fixed-height column */
.gwl-tm-content{
  margin: 5% auto;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;

  /* IMPORTANT: move scrolling off this container */
  overflow: hidden;

  position: relative;
  background-color: #333333 !important;
  color: #bbbbbb !important;
  border: 2px solid #007bff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);

  display: flex;
  flex-direction: column;
}

/* Sticky header stays visible while body scrolls */
.gwl-tm-header{
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: #333333;
  padding: 12px 20px;
  position: relative; /* <-- THIS anchors the X */
}


/* This is now the scroll container */
.gwl-tm-body{
  overflow-y: auto;
  padding: 0 20px 20px 20px;
}


.gwl-tm-content h2 {
    color: #98cb00; /* Matching your link color for the ladder title */
    margin-bottom: 5px;
}

.gwl-tm-content h4 {
    color: #bbbbbb;
    font-size: 0.9em;
    font-weight: 400;
    margin-top: 0;
    opacity: 0.8;
}

.gwl-tm-close{
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  z-index: 30;
  line-height: 1;

  /* optional: makes it easier to click */
  padding: 4px 10px;
  border-radius: 6px;
}


.gwl-tm-loading {
    text-align: center;
    padding: 40px;
}

/* Modal Table Styling */
.gwl-tm-content .gwl-legacy__table {
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 15px;
}

.gwl-tm-content .gwl-legacy__th {
    color: #00a3ff; /* Matching your existing blue headers */
    border-bottom-color: rgba(255,255,255,0.2);
}

.gwl-tm-content .gwl-legacy__td {
    color: #ffffff; /* White for the actual names to stand out */
    border-bottom-color: rgba(255,255,255,0.05);
}

.gwl-tm-footer {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed rgba(255,255,255,0.2);
    font-size: 0.9em;
    font-style: italic;
    color: #aaaaaa;
    line-height: 1.4;
}

.gwl-tm-close {
    color: #bbbbbb;
}
.gwl-tm-close:hover {
    color: #ffffff;
}

.gwl-tm-content h2.gwl-tm-game-title {
    color: #dd9933; /* Your gold color */
    font-size: 1.5rem; /* Standard large size */
    margin: 0;
    line-height: 1.2;
}

.gwl-tm-content h3.gwl-tm-ladder-title {
    color: #007bff; /* Your blue color */
    font-size: 1.2rem; /* Slightly smaller than game title */
    margin: 5px 0 10px 0;
    font-weight: 600;
}

.gwl-tm-content h4.gwl-tm-date-notice {
    color: #bbbbbb;
    font-size: 1.1rem; /* Slightly bigger as requested */
    font-weight: 400;
    margin-top: 5px;
    opacity: 0.9;
}

.gwl-tm-footer {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed rgba(255,255,255,0.2);
    font-size: 0.9em;
    font-style: italic;
    color: #aaaaaa;
    line-height: 1.4;
}

/* Highlighted Player in Time Machine */
/* Color Coding for Time Machine Modal */
.gwl-tm-content strong[style*="color: #dd9933"],
.gwl-tm-content strong[style*="color: #007bff"] {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    font-size: 1.05em;
}

.gwl-tm-footer span {
    font-style: normal;
    font-size: 1rem;
}

/* Tournament Table UI: Remove Sortable Indicators */
.gwl-legacy__table--tournament .gwl-sortable::after {
    display: none !important;
}

/* Ensure the Crown emoji sits nicely in the rank badge */
.gwl-legacy__table--tournament .gwl-legacy__td--rank .gwl-legacy__rank-badge {
    background: transparent; /* Remove dark circle for the crown */
    font-size: 1.3em;
    color: #dd9933; /* Make it your signature gold */
}

/* Optional: Make the winning row highlight slightly */
.gwl-legacy__table--tournament tbody tr:first-child {
    background: rgba(221, 153, 51, 0.05);
}

.gwl-legacy__th.is-sorted {
    color: #dd9933 !important;
    border-bottom: 2px solid #dd9933 !important; /* Gold bottom line for active sort */
}

/* Ensure the rank columns in the match list have enough room */
.gwl-legacy__table--matches th, 
.gwl-legacy__table--matches td {
    min-width: 80px;
}

/* Specific styling for the rank cells to distinguish them from scores */
.gwl-legacy__td[data-label*="Rank"] {
    font-weight: 500;
    color: #aaaaaa; /* Muted grey to keep focus on Result/Opponent */
}

/* Styling for the current page in breadcrumbs */
.gwl-legacy__crumb-current {
    font-weight: 700;    /* Keep it bold as per original design */
    color: #ffffff !important; /* Forces the text to white */
}

/*! New after refactoring   */
/* =========================================================
   GAMES LIST: Full Width & Responsive Cards
   ========================================================= */

/* Desktop Fix: Force the table to fill the theme's content area */
/* =========================================================
   CONTAINER OVERRIDES: Force 100% Theme Width
   ========================================================= */

/* 1. Target the theme's structural containers */
.container.gwl-legacy-page,
.gwl-legacy-page__wp-content {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 2. Target your app wrapper */
.gwl-legacy {
    max-width: 100% !important;
    width: 100% !important;
    /* UPDATED: Added 15px horizontal padding (Top/Bottom 20px, Left/Right 15px) */
    padding: 20px 15px !important; 
    /* NEW: Ensures padding is included in the width calculation so you don't get scrollbars */
    box-sizing: border-box; 
}

/* 3. Ensure the inner section isn't nesting constraints */
.gwl-legacy section.gwl-legacy {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* 4. The Table itself */
.gwl-legacy__table-wrap,
.gwl-legacy__table--games {
    width: 100% !important;
}

/*!   Added for New Styling   !*/
.gwl-legacy .gwl-legacy__rank-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #dd9933 !important;
    font-weight: 800;
    font-size: 1.1rem;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    /* This ensures the Crown doesn't sit at the bottom */
    line-height: 0 !important; 
}

/* Updated Drawn Circle - Force visibility on ALL views */
.gwl-legacy .gwl-use-circles .gwl-legacy__rank-badge,
.gwl-legacy .gwl-legacy__table--standings .gwl-legacy__rank-badge,
.gwl-legacy .gwl-legacy__table--tournament .gwl-legacy__rank-badge {
    width: 52px !important;  /* Increased just a hair */
    height: 52px !important; 
    background-color: #333 !important; 
    border: 2px solid #dd9933 !important; 
    border-radius: 50% !important;
    box-sizing: border-box !important;
}

/* Tournament Crown Specific Fix */
.gwl-legacy .gwl-legacy__table--tournament .gwl-legacy__td--rank .gwl-legacy__rank-badge {
    font-size: 1.1rem !important; /* Larger Crown */
    background: #333 !important; /* Ensure circle background exists */
}

/* Desktop alignment fix for the larger 44px circle */
.gwl-legacy__th--rank, 
.gwl-legacy__td--rank {
    width: 80px !important; 
    text-align: center;
}

/* Ensure even rows don't override the badge background */
.gwl-legacy .gwl-responsive-cards tr:nth-child(even) .gwl-legacy__rank-badge,
.gwl-legacy__table tr:nth-child(even) .gwl-legacy__rank-badge {
    background-color: #333 !important;
}

/* Ensure the Crown doesn't look tiny without the circle */
.gwl-legacy__table--tournament .gwl-legacy__td--rank .gwl-legacy__rank-badge {
    font-size: 1.1em;
    color: #dd9933;
}

/* Desktop alignment fix now that the circle is gone */
.gwl-legacy__th--rank, 
.gwl-legacy__td--rank {
    width: 50px; /* Slimmer column for desktop */
    text-align: center;
}

@media (max-width: 800px) {

  /* 1. Reset Table Elements - High Specificity */
  .gwl-legacy .gwl-responsive-cards,
  .gwl-legacy .gwl-responsive-cards tbody,
  .gwl-legacy .gwl-responsive-cards tr {
    display: block !important;
    width: 100% !important;
  }

  .gwl-legacy .gwl-responsive-cards thead {
    display: none !important;
  }

  /* 2. The Card Container */
  .gwl-legacy .gwl-responsive-cards tr {
    background: #222 !important; 
    border: 1px solid #444 !important;
    border-radius: 12px;
    padding: 15px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  }

  /* 3. The Rows inside the Card (Matches/Ladders) */
  .gwl-legacy .gwl-responsive-cards td {
    display: flex !important; /* This MUST be flex to push data to the right */
    justify-content: space-between !important; 
    align-items: center !important;
    padding: 10px 15px !important;
    border: none !important;
    border-bottom: 1px solid #333 !important;
    width: 100% !important;
  }

  .gwl-legacy .gwl-responsive-cards td:last-child {
    border-bottom: none !important;
  }

  /* 4. Labels (The Blue Headers) */
  .gwl-legacy .gwl-responsive-cards td::before {
    content: attr(data-label);
    font-weight: 700 !important;
    color: #007bff !important; 
    text-transform: uppercase;
    font-size: 0.8rem;
    flex-shrink: 0;
  }

  /* 5. The Numbers/Data (Far Right) */
  .gwl-legacy .gwl-responsive-cards td .gwl-legacy__cell-value {
    text-align: right !important;
    flex-grow: 1;
    color: #ffffff !important;
  }

  /* 6. Game Title Header (Centered fix) */
  .gwl-legacy .gwl-responsive-cards td.gwl-legacy__td--name {
    width: auto !important; /* Allows negative margins to stretch the box */
    display: block !important; /* Standard block for centering title */
    box-sizing: border-box !important;
    text-align: center !important;
    background: #2a2a2a !important;
    margin: -15px -15px 10px -15px !important;
    padding: 12px !important;
    border-radius: 12px 12px 0 0 !important;
    border-bottom: 1px solid #444 !important;
  }

  /* Ensure the link inside doesn't have weird padding issues */
  .gwl-legacy .gwl-responsive-cards td.gwl-legacy__td--name a {
    width: 100% !important;
    display: block !important;
  }

  .gwl-legacy .gwl-responsive-cards td.gwl-legacy__td--name::before {
    display: none !important; 
  }

  /* 7. Link Colors and Hover Effects */
  .gwl-legacy .gwl-legacy__game-link,
  .gwl-legacy .gwl-responsive-cards td.gwl-legacy__td--name a {
    color: #98cb00 !important; /* Brand Green */
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    display: inline-block !important; /* Allows underline to show correctly */
    width: auto !important;
  }

  .gwl-legacy .gwl-legacy__game-link:hover,
  .gwl-legacy .gwl-responsive-cards td.gwl-legacy__td--name a:hover {
    color: #5de000 !important; /* Hover Green */
    text-decoration: underline !important;
  }

  /* 8. Rank cell/Badge (Tournament View) */
  /* .gwl-legacy .gwl-legacy__td--rank {
    display: block !important;
    text-align: center !important;
    background: #2a2a2a !important;
    margin: -15px -15px 10px -15px !important;
    padding: 10px !important;
    border-bottom: 1px solid #444 !important;
  } */

  /* 1. Force all cards to have the same base background */
  .gwl-legacy .gwl-responsive-cards tr,
  .gwl-legacy .gwl-responsive-cards tr:nth-child(even) {
    background: #222 !important; /* Solid dark grey for the card body */
  }

  /* 2. Force all data fields (Matches/Ladders) to be transparent or solid */
  .gwl-legacy .gwl-responsive-cards td,
  .gwl-legacy .gwl-responsive-cards tr:nth-child(even) td {
    background: transparent !important; 
  }

  /* 3. Ensure the Game Name header stays consistent as well */
  .gwl-legacy .gwl-responsive-cards td.gwl-legacy__td--name,
  .gwl-legacy .gwl-responsive-cards tr:nth-child(even) td.gwl-legacy__td--name {
    background: #2a2a2a !important; /* Slightly lighter grey for the header */
    width: auto !important;
    margin: -15px -15px 10px -15px !important;
    display: block !important;
  }

  /* Force all data rows (Matches, First, Last) to align correctly */
  .gwl-legacy .gwl-responsive-cards td:not(.gwl-legacy__td--name):not(.gwl-legacy__td--rank):not([data-label="Date"]) {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 15px !important;
    border: none !important;
    border-bottom: 1px solid #333 !important;
    width: 100% !important;
  }

  /* Centering the drawn circle in the card header */
  /* Unified Rank Card Header Fix */
  .gwl-legacy .gwl-responsive-cards td.gwl-legacy__td--rank {
      display: flex !important;
      justify-content: center !important; /* Forces the circle to the dead center */
      align-items: center !important;
      position: relative !important;    /* Necessary for the absolute pinned label */
      
      background: #2a2a2a !important;
      margin: -15px -15px 10px -15px !important;
      padding: 10px !important;
      min-height: 75px !important;
      border-radius: 12px 12px 0 0 !important;
      border-bottom: 1px solid #444 !important;
      width: auto !important;
  }

  /* Pin "Rank" text to the left of the card header */
  /* Pin "Rank" text to the left */
  .gwl-legacy .gwl-responsive-cards td.gwl-legacy__td--rank::before {
      display: block !important;
      content: "RANK" !important;
      position: absolute !important;
      left: 15px !important;
      top: 50% !important;
      transform: translateY(-50%) !important; /* Perfectly centers label vertically */
      
      font-weight: 700 !important;
      color: #007bff !important; 
      text-transform: uppercase;
      font-size: 0.8rem;
  }

  /* Style the actual number inside the card header */
  .gwl-legacy .gwl-responsive-cards td.gwl-legacy__td--rank .gwl-legacy__rank-badge {
        width: 52px !important;
        height: 52px !important;
        border: 2px solid #dd9933 !important;
        border-radius: 50% !important;
        background: #333 !important;
    }

  /* 2. Style the Player/Team Name inside the card */
  .gwl-legacy .gwl-responsive-cards td.gwl-legacy__td--name {
    justify-content: center !important;
    font-size: 1.1rem;
    border-bottom: 1px solid #444 !important;
    background: rgba(255,255,255,0.03); /* Subtle highlight for the name row */
  }
  
  .gwl-legacy .gwl-responsive-cards td.gwl-legacy__td--name::before {
    color: #007bff !important; /* Blue label for 'Player' or 'Team' */
    margin-right: auto;
  }

  /* Ensure the Player/Team name label remains blue for contrast */
  .gwl-legacy .gwl-responsive-cards td.gwl-legacy__td--name::before {
      color: #007bff !important;
  }
  
  .gwl-legacy .gwl-responsive-cards tr:nth-child(even) td.gwl-legacy__td--rank,
  .gwl-legacy .gwl-responsive-cards tr:nth-child(even) td.gwl-legacy__td--name {
      background: #2a2a2a !important; /* Your slightly lighter grey header color */
      border-bottom: 1px solid #444 !important;
  }

  /* Match History: Use the Date as the card header */
  .gwl-legacy .gwl-responsive-cards td.gwl-legacy__td[data-label="Date"] {
    display: block !important;
    text-align: center !important;
    background: #2a2a2a !important;
    margin: -15px -15px 10px -15px !important;
    padding: 12px !important;
    border-radius: 12px 12px 0 0 !important;
    border-bottom: 1px solid #444 !important;
    width: auto !important;
  }

  /* Hide the "Date" label in the header */
  .gwl-legacy .gwl-responsive-cards td.gwl-legacy__td[data-label="Date"]::before {
    display: none !important;
  }

  /* Ensure the Date text (or Time Machine button) is bold and clear */
  .gwl-legacy .gwl-responsive-cards td.gwl-legacy__td[data-label="Date"] .gwl-legacy__cell-value {
    font-weight: 700;
    color: #dd9933; /* Soft Gold for the header date */
  }

  /* Center the sticky title and its subtitle on mobile */
  .gwl-legacy .gwl-sticky-title,
  .gwl-legacy .gwl-sticky-title .gwl-legacy__title-sub,
  .gwl-legacy .gwl-sticky-header-container .gwl-legacy__subtitle {
      text-align: center !important;
      display: block !important;
      width: 100% !important;
  }

  /* Maintain your preferred sizing for the ladder page H1 */
  .gwl-legacy .gwl-sticky-title {
      font-size: 1.8rem !important;
      padding: 10px 15px !important;
  }

  .gwl-legacy .gwl-sticky-title.is-pinned {
      font-size: 1.4rem !important;
      padding: 8px 10px !important;
  }

  /* Ensure the subtitle doesn't get too large when sticky */
  .gwl-legacy .gwl-sticky-header-container .gwl-legacy__subtitle {
      margin: 0 auto 5px auto !important;
      font-size: 0.85rem !important;
  }

  /* Card View Result Color Overrides */

  /* Wins - Bright Brand Green */
  .gwl-legacy .gwl-responsive-cards td.gwl-result-w .gwl-legacy__cell-value {
      color: #5de000 !important;
      font-weight: 800 !important;
  }

  /* Losses - Alert Red */
  .gwl-legacy .gwl-responsive-cards td.gwl-result-l .gwl-legacy__cell-value {
      color: #ff4444 !important;
      font-weight: 800 !important;
  }

  /* Ties - Muted Grey */
  .gwl-legacy .gwl-responsive-cards td.gwl-result-t .gwl-legacy__cell-value {
      color: #aaaaaa !important;
      font-weight: 800 !important;
  }



}

/* Global Sidebar Removal - Triggered at 1104px */
@media (max-width: 1104px) {
    /* 1. Completely hide the aside sidebar and the logo widget */
    aside#primary,
    #media_image-2,
    #nav_menu-3,
    .widget-area.sidey {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 2. Force the actual main content area to take over the screen */
    /* In your theme, this is likely #main or .main */
    #main, 
    .main,
    #container > main {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        padding: 0 !important;
    }

    /* 3. Ensure the wrapper allows the content to expand */
    #container {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Subtitle styling for instructional text */
.gwl-legacy .gwl-legacy__subtitle {
    margin: 4px 0 16px 0;
    font-size: 0.9em;
    opacity: 0.75;
    color: #bbbbbb; /* Matches your light grey theme text */
    font-style: italic;
}

/* Match Result Color Coding */

/* WIN: Using your bright brand green */
.gwl-result-w .gwl-legacy__cell-value {
    color: #5de000 !important; 
    font-weight: 800 !important;
}

/* LOSS: Using a clear alert red */
.gwl-result-l .gwl-legacy__cell-value {
    color: #ff4444 !important;
    font-weight: 800 !important;
}

/* TIE: Using a neutral grey */
.gwl-result-t .gwl-legacy__cell-value {
    color: #aaaaaa !important;
    font-weight: 800 !important;
}

/* Notice Stat Styling */

/* Wins - Green */
.gwl-stat-win { color: #5de000 !important; font-weight: 700; }

/* Losses - Red */
.gwl-stat-loss { color: #ff4444 !important; font-weight: 700; }

/* Ties & Matches - White */
.gwl-stat-tie, 
.gwl-stat-matches { color: #ffffff !important; font-weight: 700; }

/* Win Rate >= 50% - Soft Gold */
.gwl-rate-high { color: #dd9933 !important; font-weight: 700; }

/* Win Rate < 50% - Green */
.gwl-rate-low { color: #5de000 !important; font-weight: 700; }

/* Styling for the Sticky H1 */
.gwl-sticky-title.is-pinned {
    background: #333333 !important; /* Matches your site background */
    padding: 15px 20px !important;
    margin: 0 !important;
    z-index: 999;
    /* border-bottom: 2px solid #dd9933; Soft Gold underline */
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

/* Remove any default theme margins that might be pushing the H1 down */
.gwl-sticky-header-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Smooth out the jump between scroll directions */
.gwl-sticky-title {
    transition: top 0.2s ease-out; /* Smooth slide when offset changes */
    background-color: #333; /* Ensure content doesn't bleed through */
    box-sizing: border-box; /* Ensures padding doesn't break width calculations */
}

/* Ensure the parent container has no weird spacing that interferes with calculations */
.gwl-sticky-header-container {
    display: block;
    width: 100%;
    /* No margin/padding here allows exact height locking */
    margin: 0;
    padding: 0;
}

/* Instructional Text Line (Scrolls away) */
.gwl-legacy__header-note {
    margin: 4px 0 16px 0;
    font-size: 0.95em; /* A tiny bit larger for readability */
    opacity: 0.8;
    color: #bbbbbb; 
    font-style: italic; /* Remove this line if you want plain text */
}

/* Ensure centering on mobile matches the sticky header */
@media (max-width: 800px) {
    .gwl-legacy__header-note {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        padding: 0 10px;
    }
}

/* Smooth out the jump between scroll directions */
.gwl-sticky-title {
    /* REMOVE THIS LINE BELOW */
    /* transition: top 0.2s ease-out; */ 
    
    background-color: #333; 
    box-sizing: border-box; 
}

/* Match History: Override gold inheritance and force standard grey */
.gwl-legacy__title-label {
    color: #bbbbbb !important;
}