.ubcs {
  --sz-ink: var(--ubc-ink, #171719);
  --sz-paper: var(--ubc-paper, #f7f7f5);
  --sz-surface: var(--ubc-surface, #fff);
  --sz-line: var(--ubc-line, #deded8);
  --sz-muted: var(--ubc-muted, #646469);
  --sz-blue: var(--ubc-blue, #84cef2);
  --sz-purple: var(--ubc-purple, #9084bb);
  color: var(--sz-ink);
  font-family: var(--ubc-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif);
  max-width: 1280px;
  margin: 3rem auto 5rem;
  padding-inline: clamp(1rem, 3vw, 2.5rem);
}

.ubcs * { box-sizing: border-box; }
.ubcs a { color: inherit; text-underline-offset: .2em; }
.ubcs a:focus-visible,
.ubcs button:focus-visible,
.ubcs select:focus-visible,
.ubcs summary:focus-visible { outline: 3px solid var(--sz-blue); outline-offset: 3px; }
.ubcs h2,
.ubcs h3 { font-family: var(--ubc-display, "Vincent", sans-serif); font-weight: 400; line-height: 1.12; }
.ubcs h2 { font-size: clamp(2rem, 3vw, 2.75rem); margin: 0; }
.ubcs h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); margin: 0; }
.ubcs p { margin: .5rem 0; }

.ubcs-nav { display: flex; flex-wrap: wrap; gap: 0 1.5rem; border-bottom: 1px solid var(--sz-line); margin-bottom: 1rem; }
.ubcs-nav a { display: inline-block; padding: .85rem 0 .7rem; text-decoration: none; border-bottom: 3px solid transparent; font-family: var(--ubc-display, "Vincent", sans-serif); font-size: 1.125rem; }
.ubcs-nav a:hover,
.ubcs-nav a[aria-current="page"] { border-color: var(--sz-purple); }
.ubcs-status { font-size: .9rem; padding: .8rem 1rem; background: #e8f5fb; border-left: 4px solid var(--sz-blue); }
.ubcs-status--warn { background: #fff2f6; border-left-color: var(--ubc-pink, #ed9ec0); }
.ubcs-errors { font-size: .875rem; margin: .6rem 0 0; }
.ubcs-errors ul { margin: .6rem 0 0; padding-left: 1.3rem; }
.ubcs-season { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; }
.ubcs-season label { font-weight: 600; }
.ubcs select,
.ubcs button { font: inherit; border: 1px solid #9e9e9e; border-radius: 4px; padding: .55rem .7rem; background: #fff; color: var(--sz-ink); }
.ubcs button { cursor: pointer; border-color: var(--sz-ink); background: var(--sz-ink); color: #fff; padding-inline: 1rem; }
.ubcs button:hover { background: #34343a; }

.ubcs-featured { margin-top: clamp(2rem, 4vw, 3.5rem); }
.ubcs-featured-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ubcs-feature { min-width: 0; background: var(--sz-surface); border: 1px solid var(--sz-line); border-top: 5px solid var(--sz-blue); padding: clamp(1rem, 2vw, 1.5rem); }
.ubcs-feature--dbbl { border-top-color: var(--ubc-pink, #ed9ec0); }
.ubcs-feature-head { display: flex; gap: .9rem; align-items: center; }
.ubcs-feature-head h2 { font-size: clamp(1.4rem, 2vw, 1.8rem); }
.ubcs-feature-head h2 a { text-decoration: none; }
.ubcs-feature-head h2 a:hover { text-decoration: underline; }
.ubcs-feature-head p { color: var(--sz-muted); font-size: .9rem; margin-top: .2rem; }
.ubcs .ubcs-feature-head .ubcs-logo { width: 64px; height: 64px; }
.ubcs-feature-body { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; border-top: 1px solid var(--sz-line); margin-top: 1.2rem; padding-top: 1.1rem; font-size: .92rem; }
.ubcs-feature-body > div + div { border-left: 1px solid var(--sz-line); padding-left: 1.2rem; }
.ubcs-feature-body strong { font-size: .84rem; }
.ubcs-feature-body p { line-height: 1.55; }

.ubcs-directory { margin-top: clamp(3rem, 5vw, 5rem); }
.ubcs-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 2px solid var(--sz-ink); padding-bottom: .8rem; margin: 2.5rem 0 1.5rem; }
.ubcs-section-head p { color: var(--sz-muted); font-size: .9rem; }
.ubcs-directory > h3 { margin: 1.8rem 0 .6rem; }
.ubcs-team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
.ubcs-team-grid a { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(0, 1.6fr) auto; gap: .8rem; align-items: center; padding: .8rem 0; border-top: 1px solid var(--sz-line); text-decoration: none; }
.ubcs-team-grid a:hover .ubcs-team-name { text-decoration: underline; }
.ubcs-team-name { display: flex; align-items: center; gap: .55rem; font-weight: 650; white-space: nowrap; }
.ubcs .ubcs-team-name .ubcs-logo { width: 30px; height: 30px; }
.ubcs-team-league { color: var(--sz-muted); font-size: .82rem; line-height: 1.35; }
.ubcs-team-rank { font-size: .82rem; text-align: right; white-space: nowrap; }

.ubcs-filters { display: flex; align-items: end; flex-wrap: wrap; gap: .8rem; margin: 1.5rem 0 2rem; }
.ubcs-filters label { display: grid; gap: .35rem; font-size: .88rem; font-weight: 650; }
.ubcs-filters select { min-width: min(100%, 240px); max-width: 100%; font-weight: 400; }
.ubcs-date { padding: 1.6rem 0 .45rem; border-bottom: 1px solid var(--sz-ink); margin-bottom: 0 !important; }
.ubcs-game { border-bottom: 1px solid var(--sz-line); padding: 1rem 0; }
.ubcs-game-meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; color: var(--sz-muted); font-size: .78rem; }
.ubcs-game-main { display: grid; grid-template-columns: 64px minmax(0, 1fr) 84px minmax(0, 1fr); align-items: center; gap: .9rem; margin-top: .4rem; }
.ubcs-game-time { color: var(--sz-muted); font-size: .9rem; }
.ubcs-game-team { display: flex; align-items: center; gap: .6rem; min-width: 0; font-weight: 600; line-height: 1.3; }
.ubcs-score { font-size: 1.15rem; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ubcs-game-links { display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; align-items: baseline; margin: .7rem 0 0 64px; font-size: .8rem; }
.ubcs-game-links > span { color: var(--sz-muted); }
.ubcs-halls { width: 100%; }
.ubcs-halls summary { cursor: pointer; text-decoration: underline; }
.ubcs-halls ul { margin: .5rem 0; padding-left: 1.2rem; }
.ubcs-halls li { margin: .3rem 0; }
.ubcs-halls p { color: var(--sz-muted); }
.ubcs img.ubcs-logo { display: inline-block; flex: 0 0 auto; width: 42px; height: 42px; object-fit: contain; filter: grayscale(1); background-color: transparent; border-radius: 3px; transition: filter 160ms ease; }
.ubcs-logo--missing { display: grid; place-items: center; background: #efefed; color: var(--sz-muted); font-weight: 700; }
.ubcs :is(a:hover, a:focus-visible, article:hover, article:focus-within, tr:hover, tr:focus-within) img.ubcs-logo,
.ubcs img.ubcs-logo:hover { filter: grayscale(0); }
.ubcs-empty { padding: 2rem 1rem; border: 1px solid var(--sz-line); background: #fff; }
.ubcs-pagination { display: flex; justify-content: space-between; gap: 1rem; margin: 1.5rem 0; font-size: .9rem; }
.ubcs-league-title { margin: 1.4rem 0 .8rem !important; }
.ubcs-table-wrap { overflow-x: auto; border: 1px solid var(--sz-line); background: #fff; }
.ubcs-table { width: 100%; min-width: 660px; border-collapse: collapse; font-size: .9rem; }
.ubcs-table th,
.ubcs-table td { padding: .7rem .65rem; border-bottom: 1px solid var(--sz-line); text-align: right; font-variant-numeric: tabular-nums; }
.ubcs-table thead th { background: #efefec; font-weight: 700; white-space: nowrap; }
.ubcs-table :is(th:nth-child(2), td:nth-child(2)) { text-align: left; }
.ubcs-table tbody tr:last-child :is(th, td) { border-bottom: 0; }
.ubcs-table .ubcs-own-team { background: #eaf5fa; }
.ubcs-table .ubcs-active-team { background: #d7edf7; box-shadow: inset 4px 0 var(--sz-blue); }
.ubcs-table-team { display: flex; align-items: center; gap: .6rem; white-space: nowrap; }
.ubcs .ubcs-table-team .ubcs-logo { width: 32px; height: 32px; }
.ubcs-active-label { color: var(--sz-muted); font-size: .85rem; font-weight: 700; margin-bottom: .2rem !important; }

.ubcs-home-live { margin-top: 2rem; padding: clamp(1rem, 2vw, 1.5rem); border-top: 4px solid var(--sz-purple); background: #efedf5; }
.ubcs-live-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.ubcs-live-heading a { font-weight: 650; font-size: .9rem; white-space: nowrap; }
.ubcs-kicker { color: #5a5179; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.ubcs-live-page { margin-top: 2.4rem; }
.ubcs-live-tools { display: flex; align-items: end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ubcs-live-tools .ubcs-filters { margin: 0; }
.ubcs-live-auto { display: inline-flex; align-items: center; gap: .5rem; font-size: .86rem; line-height: 1.2; cursor: pointer; }
.ubcs-live-auto input { accent-color: var(--sz-purple); width: 1rem; height: 1rem; margin: 0; }
.ubcs-live-auto small { display: block; font-size: .75rem; color: var(--sz-muted); }
.ubcs-live-refresh { background: #fff !important; color: var(--sz-ink) !important; }
.ubcs-live-refresh:hover { background: #efedf5 !important; }
.ubcs-live-refresh[disabled] { opacity: .6; cursor: wait; }
.ubcs-live-note { font-size: .84rem; color: var(--sz-muted); margin: .6rem 0 1.1rem !important; }
.ubcs-live-games { border-top: 1px solid var(--sz-line); }
.ubcs-live-game { padding: 1rem .9rem; border-bottom: 1px solid var(--sz-line); }
.ubcs-live-game--own { background: #eaf5fa; box-shadow: inset 4px 0 var(--sz-blue); }
.ubcs-live-game--featured { border: 0; padding: 1rem 0 .2rem; background: transparent; box-shadow: none; }
.ubcs-live-meta { display: flex; justify-content: space-between; gap: .8rem; color: var(--sz-muted); font-size: .78rem; }
.ubcs-live-phase { font-weight: 700; color: #514776; text-align: right; }
.ubcs-live-scoreline { display: grid; grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr); align-items: center; gap: .85rem; margin-top: .65rem; }
.ubcs-live-side { display: flex; align-items: center; gap: .65rem; font-weight: 650; line-height: 1.3; min-width: 0; }
.ubcs-live-side:last-child { justify-content: flex-start; text-align: left; }
.ubcs-live-score { text-align: center; font-size: 1.45rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ubcs-live-observed { font-size: .73rem; color: var(--sz-muted); text-align: right; margin: .3rem 0 0 !important; }
.ubcs-live-refresh-message { font-size: .8rem; color: var(--sz-muted); }

@media (hover: none) { .ubcs img.ubcs-logo { filter: none; } }
@media (prefers-reduced-motion: reduce) { .ubcs img.ubcs-logo { transition: none; } }
@media (max-width: 750px) {
  .ubcs { margin-top: 2rem; }
  .ubcs-featured-grid,
  .ubcs-team-grid { grid-template-columns: 1fr; }
  .ubcs-feature-body { gap: .8rem; }
  .ubcs-section-head { display: block; }
  .ubcs-section-head p { margin-top: .4rem; }
  .ubcs-game-main { grid-template-columns: minmax(0, 1fr) auto; gap: .45rem .8rem; }
  .ubcs-game-time { grid-column: 1 / -1; }
  .ubcs-game-team:nth-child(2) { grid-column: 1; grid-row: 2; }
  .ubcs-score { grid-column: 2; grid-row: 2 / 4; }
  .ubcs-game-team:nth-child(4) { grid-column: 1; grid-row: 3; }
  .ubcs-game-links { margin-left: 0; }
  .ubcs-live-heading { align-items: start; flex-direction: column; }
}
@media (max-width: 480px) {
  .ubcs-nav { gap: 0 1rem; }
  .ubcs-nav a { font-size: 1rem; }
  .ubcs-feature-body { grid-template-columns: 1fr; }
  .ubcs-feature-body > div + div { border-left: 0; border-top: 1px solid var(--sz-line); padding: .8rem 0 0; }
  .ubcs-filters label { width: 100%; }
  .ubcs-filters select { width: 100%; }
  .ubcs-team-grid a { grid-template-columns: 1fr auto; gap: .2rem .8rem; }
  .ubcs-team-league { grid-column: 1 / -1; padding-left: 36px; }
  .ubcs-live-scoreline { grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr); gap: .35rem; }
  .ubcs-live-side { display: grid; justify-items: center; text-align: center; font-size: .78rem; }
  .ubcs-live-side:last-child { display: grid; justify-items: center; text-align: center; }
  .ubcs-live-score { font-size: 1.15rem; }
}
