body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: #f4f7f6;
  color: #333;
  margin: 0;
  padding: 0; /* Mobile */
  line-height: 1.6;
}

main {
  max-width: 100%; /* Mobile */
  margin: 0 auto;
  padding: 0;
}

h1, h2 {
  text-align: center;
  color: #1a1a1a;
  font-weight: 600;
  margin-bottom: 15px;
  padding: 0 10px;
}
h1 { font-size: 1.8em; margin-top: 15px; margin-bottom: 20px; }
h2 { font-size: 1.4em; margin-top: 25px; }

/* Mobile First: Table container is just a scrolling wrapper */
.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 15px 0 0 0;
  padding: 0;
  background-color: transparent;
  box-shadow: none;
  border-radius: 0;
  width: 100%;
}

.definitions-container {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin: 15px 5px;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

th, td {
  text-align: left;
  padding: 8px 10px;
  border: none;
  border-bottom: 1px solid #eee;
  font-size: 0.8rem;
  white-space: nowrap;
  background-color: #ffffff;
  box-sizing: border-box;
}
tbody tr:nth-child(even) td { background-color: #fcfcfc; }

th {
  background-color: #f8f8f8;
  font-weight: 600;
  color: #555;
  position: sticky;
  top: 0;
  z-index: 10;
}

td { z-index: 1; }

/* Sticky Team Name column - Mobile */
td:nth-child(2), th:nth-child(2) {
  position: sticky;
  left: 0;
  z-index: 3;
  border-right: 1px solid #ddd;
  min-width: 140px;
  max-width: 140px;
  background-color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
th:nth-child(2) { background-color: #f8f8f8 !important; z-index: 11; }
tbody td:nth-child(2) { background-color: #ffffff !important; }
tbody tr:nth-child(even) td:nth-child(2) { background-color: #fcfcfc !important; }
tbody tr:hover td:nth-child(2) { background-color: #f1f1f1 !important; }

tbody tr:hover td { background-color: #f1f1f1; }

/* Alignments - Mobile */
td:not(:nth-child(2)) { text-align: right; font-family: 'Courier New', Courier, monospace; font-weight: 600; }
th:not(:nth-child(2)) { text-align: right; }
td:first-child, th:first-child { text-align: left; padding-right: 5px; }
td:nth-child(3), th:nth-child(3) { text-align: center; }

/* Definitions styling */
.definitions-container h2 { margin-top: 0; margin-bottom: 15px; }
.definitions-container ul { list-style: none; padding: 0; margin: 0; }
.definitions-container li { margin-bottom: 8px; font-size: 0.9em; line-height: 1.4; }
.definitions-container li strong { display: inline-block; min-width: 25px; font-size: 1em; margin-right: 5px; }

/* --- Media Queries for larger screens (Desktop) --- */
@media (min-width: 768px) {
  body { padding: 20px; }
  
  /* --- THIS IS THE FIX (Part 1) --- */
  main {
    max-width: 90%; /* Limit main content width on desktop */
    padding: 0; /* Still no padding on main */
  }
  /* --- END OF FIX --- */
  
  h1 { font-size: 2.5em; margin-bottom: 30px; }
  h2 { font-size: 1.8em; margin-top: 40px; }

  /* --- THIS IS THE FIX (Part 2) --- */
  /* Re-apply container styles BUT keep horizontal scrolling if needed */
  .table-container {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin: 30px auto;
    width: 100%; /* Use full width *within* the 90% main container */
    max-width: 1600px; /* Allow wider container for more columns */
    overflow-x: auto; /* Allow scrolling within container if table overflows */
  }

  /* Ensure table takes at least 100% width, allowing container to scroll */
  table {
      min-width: 100%;
      width: auto; /* Let table size naturally based on content */
  }

  /* Restore stickiness and remove truncation for Team Name on desktop */
  td:nth-child(2), th:nth-child(2) {
    position: sticky; /* Keep sticky on desktop */
    left: 0;
    z-index: 3;
    border-right: 1px solid #ddd;
    min-width: 200px; /* Wider column */
    max-width: 200px;
    overflow: clip;
    text-overflow: clip;

  }
  /* Need to re-apply backgrounds for sticky desktop */
  th:nth-child(2) { background-color: #f8f8f8 !important; z-index: 11; }
  tbody td:nth-child(2) { background-color: #ffffff !important; }
  tbody tr:nth-child(even) td:nth-child(2) { background-color: #fcfcfc !important; }
  tbody tr:hover td:nth-child(2) { background-color: #f1f1f1 !important; }
  /* --- END OF FIX --- */

  .definitions-container { padding: 24px; margin: 30px auto; max-width: 1600px; } /* Match max-width */
  th, td { padding: 12px 16px; font-size: 0.95rem; white-space: nowrap; } /* Keep nowrap for data */


  .definitions-container li { font-size: 0.95rem; margin-bottom: 10px; }
  .definitions-container li strong { min-width: 30px; font-size: 1.1rem; }
}

/* Chart container styling (unchanged) */
.chart-container { background-color: #ffffff; border-radius: 8px; padding: 24px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); margin-top: 30px; margin-bottom: 50px; }