:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --page: #f4f6f8; --surface: #fff; --surface-muted: #f8fafc; --text: #172033; --muted: #526071; --border: #d9dee6; --border-strong: #b8c0cc; --header: #111827; --header-text: #fff; --accent: #c99700; --accent-dark: #8a6b00; --selected: #fff8dc; --pill: #e5e7eb; --pill-text: #344054; --success: #16794b; --danger: #b42318;
  color: var(--text); background: var(--page);
}
:root[data-theme="dark"] { --page: #0b1120; --surface: #151e2f; --surface-muted: #111827; --text: #edf2f7; --muted: #aeb9c8; --border: #334155; --border-strong: #526071; --header: #070b14; --header-text: #f8fafc; --accent: #e2b714; --accent-dark: #e2b714; --selected: #3a3215; --pill: #293548; --pill-text: #dbe4ef; --success: #65d69e; --danger: #ff8d85; }
* { box-sizing: border-box; } body { margin: 0; min-width: 320px; background: var(--page); color: var(--text); } a { color: inherit; } button, input, select { font: inherit; }
.site-header { background: var(--header); color: var(--header-text); border-bottom: 3px solid var(--accent); } .site-header__inner { max-width: 72rem; margin: 0 auto; padding: .85rem 1rem; display: flex; flex-direction: column; gap: .75rem; } .brand { font-size: 1.25rem; font-weight: 800; text-decoration: none; letter-spacing: .02em; } .header-actions { display: flex; align-items: center; gap: .45rem; min-width: 0; } .primary-nav { display: flex; gap: .35rem; overflow-x: auto; padding-bottom: .1rem; } .primary-nav a { flex: 0 0 auto; padding: .55rem .7rem; border-radius: .45rem; text-decoration: none; font-weight: 650; } .primary-nav a:hover, .primary-nav a:focus-visible, .primary-nav a[aria-current="page"] { background: var(--header-text); color: var(--header); outline: none; }
.theme-toggle { flex: 0 0 auto; min-height: 2.35rem; padding: .45rem .65rem; border: 1px solid #64748b; border-radius: .45rem; background: transparent; color: inherit; cursor: pointer; font-weight: 700; } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.page-shell { width: min(100% - 2rem, 72rem); margin: 0 auto; padding: 1.25rem 0 2.5rem; } .page-heading { margin-bottom: 1.25rem; } .page-heading h1 { margin: 0 0 .35rem; font-size: clamp(1.65rem, 6vw, 2.35rem); } .page-heading p, .action-card span, .pick-state, .empty-state, .winner-callout span, .pick-week-selector__current, .game-meta { color: var(--muted); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 1.25rem 0 .75rem; } .section-heading h2 { margin: .15rem 0 0; } .eyebrow { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.card, .action-card { background: var(--surface); border: 1px solid var(--border); border-radius: .75rem; box-shadow: 0 1px 2px rgb(0 0 0 / 10%); } .card { padding: 1rem; } .action-grid { display: grid; gap: .75rem; grid-template-columns: 1fr; } .action-card { display: block; padding: 1rem; text-decoration: none; } .action-card strong { display: block; margin-bottom: .25rem; } .action-card:hover, .action-card:focus-visible { border-color: var(--accent-dark); outline: 2px solid var(--accent); outline-offset: 2px; }
.pick-week-selector { display: grid; grid-template-columns: 1fr; gap: .45rem; align-items: center; } .pick-week-selector label { font-weight: 800; } .pick-week-selector select { width: 100%; min-height: 2.75rem; padding: .5rem .65rem; border: 1px solid var(--border-strong); border-radius: .55rem; background: var(--surface); color: var(--text); } .pick-week-selector select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .pick-week-selector__current { font-size: .9rem; font-weight: 650; }
.game-list { display: grid; gap: .8rem; } .game-card { padding: .9rem; } .game-card.is-locked { background: var(--surface-muted); } .game-card__heading { display: flex; align-items: start; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; } .game-card__heading strong { line-height: 1.3; } .game-meta { margin-top: .2rem; font-size: .82rem; font-weight: 650; } .game-card__badges { display: flex; flex-wrap: wrap; justify-content: end; gap: .3rem; }
.status-pill { flex: 0 0 auto; padding: .25rem .5rem; border-radius: 999px; background: var(--pill); color: var(--pill-text); font-size: .75rem; font-weight: 750; } .status-pill--final { background: var(--header); color: var(--header-text); } .status-pill--in_progress { border: 1px solid var(--accent); }
.team-options { display: grid; gap: .55rem; margin: 0; padding: 0; border: 0; } .team-option { min-height: 3.55rem; display: grid; grid-template-columns: auto auto auto minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .65rem .8rem; border: 1px solid var(--border-strong); border-radius: .65rem; cursor: pointer; background: var(--surface); } .team-option:hover { border-color: var(--accent-dark); } .team-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; } .team-option.is-selected { border-color: var(--accent-dark); background: var(--selected); } .team-option.is-winner { box-shadow: inset 4px 0 0 var(--success); } .team-option input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--accent-dark); }
.team-identity { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; } .team-logo { display: block; width: 2.2rem; height: 2.2rem; object-fit: contain; } .team-mark { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--header); color: var(--header-text); font-size: .7rem; font-weight: 900; letter-spacing: -.03em; } .team-mark[hidden] { display: none; } .team-option__abbr { min-width: 2.4rem; font-weight: 850; color: var(--text); } .team-option__name { min-width: 0; } .team-score { min-width: 2ch; text-align: right; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
fieldset:disabled .team-option { cursor: default; opacity: .82; } .pick-actions { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; margin-top: .75rem; } .pick-result { font-size: .88rem; font-weight: 800; } .pick-result--correct { color: var(--success); } .pick-result--incorrect { color: var(--danger); } .pick-result--tie { color: var(--muted); }
.button { min-height: 2.65rem; padding: .6rem .85rem; border-radius: .55rem; border: 1px solid transparent; font-weight: 750; cursor: pointer; } .button--primary { background: var(--header); color: var(--header-text); } .button--secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); } .button:hover, .button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.week-pick-actions { display: flex; flex-direction: column; gap: .8rem; margin-top: 1rem; } .week-pick-actions p { margin: .2rem 0 0; color: var(--muted); } .week-pick-actions__buttons { display: flex; flex-wrap: wrap; gap: .55rem; } .flash-message { margin-bottom: .8rem; padding: .75rem 1rem; border: 1px solid var(--border); border-radius: .6rem; background: var(--surface); } .flash-message--success { border-left: 4px solid var(--success); } .flash-message--error { border-left: 4px solid var(--danger); }
.empty-state { text-align: center; padding: 1.5rem 1rem; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.filter-grid { display: grid; gap: .8rem; } .filter-field { display: grid; gap: .35rem; color: var(--text); font-weight: 700; } .filter-field select { width: 100%; min-height: 2.75rem; padding: .5rem .65rem; border: 1px solid var(--border-strong); border-radius: .5rem; background: var(--surface); color: var(--text); } .filter-field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .filter-submit { width: 100%; }
.standings-section { margin-top: 1.5rem; } .table-scroll { overflow-x: auto; padding: 0; } .standings-table { width: 100%; min-width: 34rem; border-collapse: collapse; } .standings-table th, .standings-table td { padding: .75rem .8rem; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; } .standings-table th:first-child, .standings-table td:first-child { text-align: left; } .standings-table thead th { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; } .standings-table tbody tr:last-child th, .standings-table tbody tr:last-child td { border-bottom: 0; } .winner-callout { display: flex; flex-direction: column; gap: .15rem; margin-bottom: .75rem; padding: .85rem 1rem; border-left: 4px solid var(--accent); border-radius: .4rem; background: var(--selected); }
@media (max-width: 27rem) { .team-option__name { font-size: .86rem; } .team-option { gap: .4rem; padding-inline: .55rem; } }
@media (min-width: 42rem) { .site-header__inner { flex-direction: row; align-items: center; justify-content: space-between; } .action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .game-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; } .filter-submit { width: auto; } .pick-week-selector { grid-template-columns: auto minmax(14rem, 20rem) 1fr; } .week-pick-actions { flex-direction: row; align-items: center; justify-content: space-between; } }