/* Bootstrap's plain .table + our old flat --ioe-bg-elevated fill on every
   cell read as one uniform slab - no row rhythm, a heavy 2px border on
   every header cell, and square corners sitting raw on the page. This
   softens that into a single rounded, bordered panel (border-collapse:
   separate + border-radius + overflow: hidden on the <table> itself,
   rather than the header's own bottom border) with a light zebra stripe
   for row scannability instead of borders doing that job, and a colored
   accent underline under the header instead of a generic gray one. */
.scoreboard-table {
  color: var(--ioe-text);
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--ioe-border);
  border-radius: 0.6rem;
  overflow: hidden;
}
.scoreboard-table > :not(caption) > * > * {
  background-color: transparent;
  color: var(--ioe-text);
  border-color: var(--ioe-border);
  border-width: 0 0 1px 0;
  box-shadow: none;
  padding: 0.65rem 1rem;
}
.scoreboard-table thead th {
  color: var(--ioe-heading);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  font-weight: 600;
  background-color: var(--ioe-bg-elevated);
  border-bottom: 2px solid var(--ioe-accent);
}
.scoreboard-table tbody tr:nth-child(even) > * {
  background-color: color-mix(in srgb, var(--ioe-bg-elevated) 55%, transparent);
}
.scoreboard-table tbody tr:hover > * {
  background-color: var(--ioe-bg-elevated-2);
}
.scoreboard-table tbody tr:last-child > * {
  border-bottom-width: 0;
}
.scoreboard-table th[scope="row"] {
  color: var(--ioe-heading);
  font-weight: 600;
}

.records-panel-card {
  border-color: var(--ioe-border);
}

.records-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

.record-tile {
  background-color: var(--ioe-bg-elevated-2);
  border: 1px solid var(--ioe-border);
  border-radius: 0.5rem;
  padding: 1rem;
  text-align: center;
}

.record-label {
  color: var(--ioe-text-muted);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}

.record-name {
  color: var(--ioe-heading);
  font-weight: 600;
}

.record-value {
  color: var(--ioe-accent);
  font-size: 1.75rem;
  font-weight: 700;
}