:root {
  --sport-bg: #f3f1eb;
  --sport-panel: #ece9e1;
  --sport-paper: #f8f6f1;
  --sport-ink: #16271c;
  --sport-muted: #6d796c;
  --sport-line: rgba(22, 39, 28, .16);
  --sport-green: #2f5b35;
}

body { background: var(--sport-bg); }
.sports-page { width: 100%; max-width: 468px; min-height: 100vh; margin: 0 auto; background: var(--sport-bg); color: var(--sport-ink); overflow-x: hidden; }
.sports-topbar { height: 66px; display: grid; grid-template-columns: 44px 1fr 76px; align-items: center; padding: 0 18px; border-bottom: 1px solid var(--sport-line); }
.sports-back, .sports-pubs-top { height: 40px; display: grid; place-items: center; color: var(--sport-ink); border: 1px solid var(--sport-line); border-radius: 8px; text-decoration: none; }
.sports-back { width: 40px; }
.sports-pubs-top { width: 76px; color: #f8f6f1; background: var(--sport-green); border-color: var(--sport-green); font-family: var(--font-head); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.sports-wordmark { color: var(--sport-ink); text-decoration: none; text-align: center; font-family: var(--font-head); font-size: 20px; font-weight: 700; letter-spacing: .16em; }
.sports-intro { padding: 24px 18px 12px; }
.sports-intro h1 { margin: 0; font-family: var(--font-head); text-transform: uppercase; font-size: 24px; line-height: 1; letter-spacing: .03em; }
.sports-intro p { margin: 7px 0 0; color: var(--sport-muted); font-size: 13px; }
.day-tabs { display: flex; gap: 28px; padding: 0 18px; border-bottom: 1px solid var(--sport-line); }
.day-tabs button { color: var(--sport-muted); padding: 12px 0 11px; font-size: 16px; border-bottom: 2px solid transparent; cursor: pointer; }
.day-tabs button.is-active { color: var(--sport-ink); border-bottom-color: var(--sport-green); }
.day-schedule { padding: 16px 18px 4px; }
.day-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.day-heading span, .month-heading span, .sports-pubs-cta span { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .13em; color: var(--sport-muted); font-size: 11px; }
.day-heading strong { color: var(--sport-muted); font-weight: 500; font-size: 12px; text-transform: capitalize; }
.sport-event { min-height: 104px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; border-top: 1px solid var(--sport-line); padding: 14px 0; }
.sport-icon { width: 39px; height: 39px; color: var(--sport-ink); fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sport-icon-football { display: block; object-fit: contain; mix-blend-mode: multiply; }
.sport-glyph-f1 { display: grid; place-items: center; width: 39px; height: 39px; color: #c83f3f; font-family: var(--font-head); font-size: 15px; font-weight: 700; border: 1px solid currentColor; border-radius: 6px; }
.sport-event-main { min-width: 0; }
.sport-event-label { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .07em; font-size: 13px; }
.sport-event-label span { color: var(--sport-muted); }
.sport-event-time { margin-top: 5px; font-family: var(--font-head); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sport-event-title { margin-top: 1px; font-size: 18px; line-height: 1.12; font-weight: 600; overflow-wrap: anywhere; }
.sport-event-pubs { margin-top: 4px; color: var(--sport-muted); font-size: 11px; }
.event-pubs { min-width: 60px; padding: 9px 7px; border: 1px solid var(--sport-green); border-radius: 7px; color: #f8f6f1; background: var(--sport-green); font-size: 12px; cursor: pointer; }
.schedule-empty { border-top: 1px solid var(--sport-line); padding: 20px 0 18px; color: var(--sport-muted); font-size: 14px; }
.month-schedule { padding: 30px 18px 24px; border-top: 1px solid var(--sport-line); }
.month-heading h2 { margin: 5px 0 16px; font-family: var(--font-head); text-transform: uppercase; font-size: 23px; line-height: 1; }
.sport-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--sport-line); border-radius: 7px; overflow: hidden; }
.sport-tabs button { min-width: 0; min-height: 42px; color: var(--sport-muted); font-size: 11px; border-left: 1px solid var(--sport-line); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sport-tabs button:first-child { border-left: 0; }
.sport-tabs button.is-active { color: #f8f6f1; background: var(--sport-green); }
.month-events { margin-top: 12px; }
.month-event { display: grid; grid-template-columns: 62px 1fr 34px; align-items: center; gap: 8px; padding: 13px 0; border-bottom: 1px solid var(--sport-line); }
.month-event-date { font-family: var(--font-head); text-transform: uppercase; font-size: 13px; color: var(--sport-muted); }
.month-event-copy { display: flex; flex-direction: column; min-width: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.month-event-copy strong { margin-top: 3px; color: var(--sport-ink); font-size: 15px; text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
.month-event button { color: #f8f6f1; width: 34px; height: 34px; display: grid; place-items: center; background: var(--sport-green); border: 1px solid var(--sport-green); border-radius: 7px; cursor: pointer; }
.month-empty { color: var(--sport-muted); font-size: 13px; padding: 22px 0; }
.sports-pubs-cta { display: flex; flex-direction: column; gap: 13px; padding: 24px 18px; background: var(--sport-panel); border-top: 1px solid var(--sport-line); }
.sports-pubs-cta strong { display: block; margin-top: 5px; font-size: 17px; }
.sports-pubs-cta button { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 12px; border: 1px solid var(--sport-green); border-radius: 8px; color: #f8f6f1; background: var(--sport-green); font-family: var(--font-head); font-size: 14px; text-transform: uppercase; letter-spacing: .05em; cursor: pointer; }
.sports-footer { padding: 18px; color: var(--sport-muted); font-size: 11px; line-height: 1.45; text-align: center; }
.sports-page .modal { color: var(--ink); }
.sports-page .modal h3 { color: var(--ink); }

@media (min-width: 500px) {
  .sports-page { min-height: calc(100vh - 56px); border-radius: 26px; box-shadow: 0 40px 90px rgba(0,0,0,.45); }
}