:root {
  --forest: #0b332d;
  --forest-deep: #082822;
  --gold: #d8b13d;
  --gold-bright: #f0cf58;
  --cream: #fffdf8;
  --text: #15232a;
  --muted: #687177;
  --line: #d8d4c9;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { font-family: Montserrat, Arial, sans-serif; background: var(--forest-deep); color: var(--text); }
.scoreboard { width: 100%; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--cream); }
.scoreboard-header { flex: 0 0 auto; min-height: 106px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 15px 35px; background: linear-gradient(180deg,var(--forest),var(--forest-deep)); border-bottom: 4px solid var(--gold); color: #fff; }
.eyebrow { display: block; margin-bottom: 4px; color: var(--gold-bright); font-weight: 900; font-size: clamp(12px, 0.92vw, 18px); letter-spacing: .2em; }
h1 { margin: 0; font-size: clamp(27px, 2.8vw, 56px); line-height: 1.04; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; }
.period-block { flex-shrink: 0; text-align: right; }
.period-label { font-size: clamp(28px, 3vw, 58px); font-weight: 900; line-height: 1; }
.period-dates { margin-top: 7px; font-size: clamp(12px, 1.05vw, 20px); color: #e2eae7; font-weight: 700; }
.scoreboard-meta { min-height: 37px; flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 6px 25px; background: #ede4d4; color: #54615c; font-weight: 800; letter-spacing: .06em; font-size: clamp(10px, .75vw, 15px); border-bottom: 1px solid #d0c7b7; }
.refresh-status { text-align: right; letter-spacing: 0; }
.refresh-warning { color: #a22b24; margin-right: 16px; }
.refresh-warning[hidden] { display: none; }
.table-area { min-height: 0; flex: 1 1 auto; width: 100%; overflow-x: auto; overflow-y: hidden; }
.leaderboard { width: 100%; height: 100%; border-collapse: collapse; table-layout: fixed; }
.col-rank { width: 6%; }
.col-name { width: 24%; }
.col-sales { width: 9%; }
.col-sets { width: 9%; }
.col-outbound { width: 12%; }
.col-inbound { width: 11%; }
.col-set-rate { width: 15%; }
.col-sale-rate { width: 14%; }
thead { height: 59px; background: var(--forest); }
thead tr { height: 59px; }
th { background: var(--forest); padding: 10px 7px; color: #fff; border-right: 1px solid rgba(255,255,255,.14); font-size: clamp(12px, 1.08vw, 22px); letter-spacing: .03em; font-weight: 900; text-transform: uppercase; text-align: center; white-space: nowrap; }
th.name-heading { text-align: left; padding-left: 24px; }
th.sales-heading { color: var(--gold-bright); }
tbody tr { height: auto; background: #fffdf8; }
tbody tr:nth-child(even) { background: #f4eee4; }
tbody tr.top-row-1 { background: #fff2c4; }
tbody tr.top-row-2 { background: #e9eef0; }
tbody tr.top-row-3 { background: #f5e2d2; }
td { padding: 7px 9px; border-bottom: 1px solid var(--line); border-right: 1px solid #e1dacd; font-size: clamp(15px, 1.42vw, 29px); font-weight: 700; text-align: center; vertical-align: middle; font-variant-numeric: tabular-nums; white-space: nowrap; }
td:nth-child(2) { text-align: left; padding-left: 24px; font-size: clamp(16px, 1.55vw, 32px); font-weight: 900; overflow: hidden; text-overflow: ellipsis; }
td.sales-cell { color: #775400; font-size: clamp(19px, 1.8vw, 38px); font-weight: 900; }
td.rate-cell { font-weight: 900; }
td.rank-cell { font-weight: 900; font-size: clamp(20px, 1.75vw, 36px); }
.top-row-1 td:first-child { box-shadow: inset 6px 0 0 #d8ad2e; }
.top-row-2 td:first-child { box-shadow: inset 6px 0 0 #a0abb2; }
.top-row-3 td:first-child { box-shadow: inset 6px 0 0 #ba7646; }
.loading-row td, .error-row td { text-align: center; padding: 30px; }
.error-row td { color: #a22b24; }
/* Designed for 13 rows on a 1080p TV; the table stretches to available height. */
@media (max-height: 800px) {
  .scoreboard-header { min-height: 78px; padding-top: 8px; padding-bottom: 8px; }
  .scoreboard-meta { min-height: 28px; }
  thead, thead tr { height: 45px; }
  td { padding-top: 3px; padding-bottom: 3px; }
}
@media (max-width: 1100px) {
  .scoreboard-header { padding-left: 18px; padding-right: 18px; }
  .leaderboard { min-width: 960px; }
  th { font-size: 12px; }
  td { font-size: 15px; }
  td:nth-child(2) { font-size: 17px; }
}