/* Ballerz Baffle Basketball Schedule Hub v4.1 — all rules intentionally scoped. */
.bbhub-strip,
.bbhub-fixture {
  --bb-navy: #172331;
  --bb-orange: #F24705;
  --bb-rust: #8A2500;
  --bb-mist: #C3D1D0;
  --bb-wnbl-purple: #7041C6;
  --bb-wnbl-purple-soft: #F3EEFC;
  --bb-nbl-orange-soft: #FFF1EA;
  --bb-white: #fff;
  --bb-ink: #0c1219;
  --bb-soft: #f4f5f5;
  --bb-line: rgba(23,35,49,.14);
  --bb-shadow: 0 12px 32px rgba(11,18,25,.10);
  --bb-theme-bg: var(--bb-navy);
  --bb-theme-accent: var(--bb-orange);
  --bb-theme-text: #fff;
  --bb-theme-accent-text: #fff;
  box-sizing: border-box;
  width: 100%;
  color: var(--bb-navy);
  font-family: Arial, Helvetica, sans-serif;
}
.bbhub-strip *, .bbhub-fixture * { box-sizing: border-box; }
.bbhub-strip button, .bbhub-strip select, .bbhub-fixture button, .bbhub-fixture select, .bbhub-fixture input { font: inherit; }
.bbhub-loading { min-height: 90px; display: grid; place-items: center; padding: 24px; color: rgba(23,35,49,.7); font-weight: 700; }

/* Combined horizontal schedule strip */
.bbhub-strip { background: var(--bb-white); border: 1px solid var(--bb-line); border-radius: 18px; overflow: hidden; box-shadow: var(--bb-shadow); }
.bbhub-strip__topline { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 16px; background: var(--bb-theme-bg); color: var(--bb-theme-text); border-bottom: 1px solid var(--bb-line); }
.bbhub-strip__brand { display: flex; align-items: center; gap: 10px; min-width: max-content; }
.bbhub-strip__brand img { width: 58px; height: 38px; object-fit: contain; object-position: left center; }
.bbhub-strip__brand div { display: grid; line-height: 1; gap: 4px; }
.bbhub-strip__brand span { font-size: 10px; letter-spacing: .18em; font-weight: 800; color: var(--bb-theme-text); opacity: .62; }
.bbhub-strip__brand strong { font-size: 15px; letter-spacing: .05em; }
.bbhub-strip__filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.bbhub-strip__filters::-webkit-scrollbar { display: none; }
.bbhub-strip__filters button { border: 1px solid var(--bb-line); background: transparent; color: var(--bb-theme-text); border-radius: 999px; padding: 7px 12px; cursor: pointer; font-size: 12px; font-weight: 800; white-space: nowrap; transition: .18s ease; }
.bbhub-strip__filters button:hover, .bbhub-strip__filters button.is-active { background: var(--bb-theme-accent); border-color: var(--bb-theme-accent); color: var(--bb-theme-accent-text); }
.bbhub-strip__rail-wrap { position: relative; background: #eff1f1; padding: 10px 42px; }
.bbhub-strip__rail { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgba(23,35,49,.25) transparent; padding: 2px 0 10px; overscroll-behavior-inline: contain; }
.bbhub-strip__arrow { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 32px; height: 48px; border: 0; border-radius: 999px; background: rgba(23,35,49,.88); color: white; font-size: 28px; line-height: 1; cursor: pointer; }
.bbhub-strip__arrow--prev { left: 6px; }
.bbhub-strip__arrow--next { right: 6px; }
.bbhub-strip-card { flex: 0 0 285px; scroll-snap-align: start; background: white; border: 1px solid var(--bb-line); border-radius: 13px; overflow: hidden; min-height: 174px; position: relative; }
.bbhub-strip-card::before { content: ''; display: block; height: 4px; background: var(--bb-orange); }
.bbhub-strip-card--wnbl::before { background: var(--bb-wnbl-purple); }
.bbhub-strip-card__meta { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 7px; padding: 8px 10px 6px; color: rgba(23,35,49,.72); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.bbhub-strip-card__league { display: inline-flex; align-items: center; gap: 4px; color: var(--bb-navy); border-radius: 999px; padding: 2px 6px; background: rgba(242,71,5,.10); }
.bbhub-strip-card--wnbl .bbhub-strip-card__league { background: rgba(114,59,158,.12); color: var(--bb-wnbl-purple); }
.bbhub-strip-card__status { justify-self: end; border-radius: 999px; padding: 3px 6px; font-size: 9px; }
.bbhub-strip-card__status.is-live { background: var(--bb-orange); color: white; }
.bbhub-strip-card__status.is-final { background: var(--bb-navy); color: white; }
.bbhub-strip-card__status.is-upcoming { background: #eef0f1; }
.bbhub-strip-card__teams { display: grid; gap: 5px; padding: 4px 10px 8px; }
.bbhub-strip-team { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: 8px; align-items: center; min-height: 34px; }
.bbhub-strip-team__logo { width: 28px; height: 28px; object-fit: contain; }
.bbhub-strip-team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 800; }
.bbhub-strip-team b { font-size: 20px; line-height: 1; }
.bbhub-strip-card__bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding: 8px 10px; background: var(--bb-navy); color: white; }
.bbhub-strip-card__bottom strong { color: var(--bb-orange); font-size: 13px; }
.bbhub-strip-card__bottom span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: var(--bb-mist); text-align: right; }

/* Full fixture */
.bbhub-fixture { background: #eef0f0; border-radius: 22px; overflow: hidden; box-shadow: var(--bb-shadow); }
.bbhub-fixture > .bbhub-strip { border-radius: 0; border-width: 0 0 1px; box-shadow: none; }
.bbhub-hero { position: relative; display: grid; grid-template-columns: 170px minmax(0,1fr); gap: 28px; align-items: center; padding: 34px clamp(20px,4vw,52px); min-height: 230px; overflow: hidden; background-color: var(--bb-theme-bg); background-image: linear-gradient(120deg, rgba(0,0,0,.34), rgba(0,0,0,.08) 72%, rgba(255,255,255,.05)); color: var(--bb-theme-text); }
.bbhub-hero::after { content: ''; position: absolute; inset: auto -8% -45% 35%; height: 210px; background: var(--bb-theme-accent); transform: rotate(-8deg); opacity: .12; }
.bbhub-hero__brand, .bbhub-hero__copy { position: relative; z-index: 1; }
.bbhub-hero__brand { display: grid; justify-items: center; align-content: center; gap: 9px; width: 170px; text-align: center; }
.bbhub-hero__brand img { width: 150px; max-height: 100px; object-fit: contain; object-position: center; }
.bbhub-hero__brand span { width: 100%; text-align: center; font-size: 10px; letter-spacing: .22em; font-weight: 900; color: var(--bb-theme-text); opacity: .72; }
.bbhub-hero__copy > p:first-child { margin: 0 0 7px; color: var(--bb-theme-text); opacity: .72; font-size: 11px; letter-spacing: .16em; font-weight: 900; }
.bbhub-hero__copy h2 { margin: 0; color: var(--bb-theme-text); font-size: clamp(34px,5vw,64px); line-height: .9; letter-spacing: -.045em; font-weight: 950; text-transform: uppercase; }
.bbhub-hero__copy h2 em { color: var(--bb-theme-accent); font-style: normal; }
.bbhub-hero__intro { max-width: 650px; margin: 16px 0 0; color: var(--bb-theme-text); opacity: .78; font-size: 14px; line-height: 1.5; }
.bbhub-fixture__body { padding: clamp(18px,3vw,34px); }
.bbhub-league-tabs { display: inline-flex; padding: 5px; border-radius: 999px; background: var(--bb-navy); margin: 0 0 18px; }
.bbhub-league-tabs button { min-width: 105px; border: 0; border-radius: 999px; background: transparent; color: white; padding: 10px 22px; cursor: pointer; font-weight: 900; letter-spacing: .06em; }
.bbhub-league-tabs button.is-active { background: var(--bb-theme-accent); color: var(--bb-theme-accent-text); }
.bbhub-fixture.is-mode-wnbl .bbhub-league-tabs button.is-active { background: var(--bb-wnbl-purple); }
.bbhub-toolbar { display: grid; grid-template-columns: minmax(210px,1fr) auto; gap: 18px 24px; align-items: end; padding: 20px; background: white; border-radius: 16px; border: 1px solid var(--bb-line); }
.bbhub-toolbar__heading .bbhub-kicker { display: block; color: var(--bb-theme-accent); font-size: 10px; letter-spacing: .18em; font-weight: 900; }
.bbhub-toolbar__heading h3 { margin: 4px 0 0; color: var(--bb-navy); font-size: clamp(22px,3vw,32px); line-height: 1; }
.bbhub-toolbar__status { justify-self: end; align-self: start; border-radius: 999px; padding: 7px 11px; background: #edf0f1; color: rgba(23,35,49,.72); font-size: 10px; font-weight: 800; }
.bbhub-toolbar__status.is-live-source::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--bb-orange); box-shadow: 0 0 0 4px rgba(242,71,5,.12); }
.bbhub-filters { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(150px,.8fr) minmax(150px,.8fr) minmax(260px,1.4fr); gap: 10px; align-items: end; }
.bbhub-filters label { display: grid; gap: 5px; }
.bbhub-filters label > span { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; font-weight: 900; color: rgba(23,35,49,.62); }
.bbhub-filters select, .bbhub-roundbar select, .bbhub-search-control input { width: 100%; border: 1px solid var(--bb-line); background: #f7f8f8; color: var(--bb-navy); border-radius: 10px; min-height: 42px; padding: 0 36px 0 12px; font-weight: 800; }
.bbhub-search-field { min-width: 0; }
.bbhub-search-control { position: relative; min-width: 0; }
.bbhub-search-control input { padding-right: 42px; }
.bbhub-search-control input::placeholder { color: rgba(23,35,49,.42); font-weight: 700; }
.bbhub-search-control input::-webkit-search-cancel-button, .bbhub-search-control input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.bbhub-search-control input::-ms-clear, .bbhub-search-control input::-ms-reveal { display: none; width: 0; height: 0; }
.bbhub-search-control button { position: absolute; top: 50%; right: 7px; transform: translateY(-50%); display: none; width: 28px; height: 28px; border: 0; border-radius: 999px; background: var(--bb-navy); color: white; cursor: pointer; line-height: 1; font-size: 19px; }
.bbhub-search-control button.is-visible { display: grid; place-items: center; }
.bbhub-search-control button:hover { background: var(--bb-orange); }
.bbhub-roundbar { display: grid; grid-template-columns: 58px minmax(0,1fr) 58px; align-items: stretch; margin: 18px 0 10px; background: var(--bb-navy); color: white; border-radius: 15px; overflow: hidden; }
.bbhub-roundbar[hidden] { display: none !important; }
.bbhub-roundbar[hidden] + .bbhub-game-list { margin-top: 18px; }
.bbhub-fixture.is-searching .bbhub-roundbar { display: none; }
.bbhub-fixture.is-searching .bbhub-game-list { margin-top: 18px; }
.bbhub-roundbar__arrow { border: 0; background: rgba(255,255,255,.07); color: white; font-size: 35px; cursor: pointer; }
.bbhub-roundbar__arrow:hover { background: var(--bb-orange); }
.bbhub-roundbar__centre { display: grid; grid-template-columns: auto minmax(250px,330px) 1fr; gap: 12px; align-items: center; padding: 9px 14px; }
.bbhub-roundbar__centre > span { font-size: 10px; letter-spacing: .2em; color: var(--bb-mist); font-weight: 900; }
.bbhub-roundbar select { background: white; min-height: 38px; }
.bbhub-round-theme { color: var(--bb-orange); text-align: right; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.bbhub-game-list { display: grid; gap: 8px; }
.bbhub-game { display: grid; grid-template-columns: 145px minmax(300px,1.35fr) 120px minmax(170px,.8fr); min-height: 118px; background: white; border: 1px solid var(--bb-line); border-radius: 14px; overflow: hidden; transition: transform .16s ease, box-shadow .16s ease; }
.bbhub-game:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(23,35,49,.08); }
.bbhub-game__when { display: grid; align-content: center; gap: 3px; padding: 15px; background: #f4f5f5; border-right: 1px solid var(--bb-line); }
.bbhub-game__when span { font-size: 11px; font-weight: 800; color: rgba(23,35,49,.72); }
.bbhub-game__when strong { font-size: 22px; color: var(--bb-navy); }
.bbhub-game__when small { color: var(--bb-orange); font-size: 9px; letter-spacing: .08em; font-weight: 900; }
.bbhub-game__matchup { display: grid; align-content: center; gap: 5px; padding: 10px 16px; }
.bbhub-game-team { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 10px; align-items: center; min-height: 43px; }
.bbhub-game-team__logo { width: 38px; height: 38px; object-fit: contain; }
.bbhub-game-team > div { min-width: 0; display: grid; gap: 1px; }
.bbhub-game-team > div strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.bbhub-game-team > div span { font-size: 9px; color: rgba(23,35,49,.55); font-weight: 900; }
.bbhub-game-team__score { min-width: 34px; text-align: right; font-size: 27px; line-height: 1; }
.bbhub-game__state { display: grid; place-content: center; gap: 7px; padding: 12px; border-left: 1px solid var(--bb-line); text-align: center; }
.bbhub-game__status { display: inline-block; justify-self: center; border-radius: 999px; padding: 5px 9px; background: #edf0f1; font-size: 9px; letter-spacing: .09em; font-weight: 950; }
.bbhub-game__status.is-live { background: var(--bb-orange); color: white; }
.bbhub-game__status.is-final { background: var(--bb-navy); color: white; }
.bbhub-game__state > strong { color: var(--bb-rust); font-size: 9px; line-height: 1.2; text-transform: uppercase; }
.bbhub-game__venue { display: grid; align-content: center; gap: 4px; padding: 14px; background: #fafafa; border-left: 1px solid var(--bb-line); }
.bbhub-game__venue > span { font-size: 8px; letter-spacing: .16em; color: rgba(23,35,49,.48); font-weight: 900; }
.bbhub-game__venue > strong { font-size: 12px; line-height: 1.3; }
.bbhub-game__link { margin-top: 5px; color: var(--bb-orange); font-size: 10px; font-weight: 900; text-decoration: none; }
.bbhub-game__link:hover { text-decoration: underline; }


/* In the mixed All view, make the competition unmistakable without sacrificing readability. */
.bbhub-fixture.is-mode-all .bbhub-game[data-league="NBL"] {
  border-left: 5px solid var(--bb-orange);
  background: linear-gradient(90deg, var(--bb-nbl-orange-soft) 0, #fff 32%);
}
.bbhub-fixture.is-mode-all .bbhub-game[data-league="WNBL"] {
  border-left: 5px solid var(--bb-wnbl-purple);
  background: linear-gradient(90deg, var(--bb-wnbl-purple-soft) 0, #fff 32%);
}
.bbhub-fixture.is-mode-all .bbhub-game[data-league="NBL"] .bbhub-game__when { background: #fff0e8; }
.bbhub-fixture.is-mode-all .bbhub-game[data-league="WNBL"] .bbhub-game__when { background: #eee7fa; }
.bbhub-fixture.is-mode-all .bbhub-game__when small {
  justify-self: start;
  width: max-content;
  padding: 4px 7px;
  border-radius: 999px;
  color: white;
  line-height: 1;
}
.bbhub-fixture.is-mode-all .bbhub-game[data-league="NBL"] .bbhub-game__when small { background: var(--bb-orange); }
.bbhub-fixture.is-mode-all .bbhub-game[data-league="WNBL"] .bbhub-game__when small { background: var(--bb-wnbl-purple); }
.bbhub-fixture.is-mode-all .bbhub-game[data-league="WNBL"] .bbhub-game__link { color: var(--bb-wnbl-purple); }
.bbhub-fixture.is-mode-wnbl .bbhub-toolbar__heading .bbhub-kicker,
.bbhub-fixture.is-mode-wnbl .bbhub-round-theme,
.bbhub-fixture.is-mode-wnbl .bbhub-game__link { color: var(--bb-wnbl-purple); }
.bbhub-fixture.is-mode-wnbl .bbhub-roundbar__arrow:hover { background: var(--bb-wnbl-purple); }
.bbhub-empty { margin: 10px 0; padding: 28px; border-radius: 12px; background: white; text-align: center; font-weight: 800; color: rgba(23,35,49,.66); }

@media (max-width: 900px) {
  .bbhub-hero { grid-template-columns: 145px minmax(0,1fr); min-height: 210px; }
  .bbhub-hero__brand { width: 145px; }
  .bbhub-filters { grid-template-columns: repeat(2,minmax(160px,1fr)); }
  .bbhub-search-field { grid-column: 1 / -1; }
  .bbhub-game { grid-template-columns: 125px minmax(250px,1fr) 105px; }
  .bbhub-game__venue { grid-column: 1 / -1; grid-template-columns: auto 1fr auto; align-items: center; border-left: 0; border-top: 1px solid var(--bb-line); min-height: auto; padding: 8px 14px; }
  .bbhub-game__link { margin-top: 0; }
}

@media (max-width: 680px) {
  .bbhub-strip { border-radius: 13px; }
  .bbhub-strip__topline { align-items: flex-start; flex-direction: column; gap: 10px; }
  .bbhub-strip__filters { width: 100%; }
  .bbhub-strip__rail-wrap { padding: 9px 8px; }
  .bbhub-strip__arrow { display: none; }
  .bbhub-strip-card { flex-basis: min(82vw, 285px); }
  .bbhub-fixture { border-radius: 14px; }
  .bbhub-hero { grid-template-columns: 1fr; gap: 14px; padding: 25px 20px; min-height: auto; }
  .bbhub-hero__brand { display: grid; justify-items: center; width: max-content; max-width: 100%; justify-self: center; }
  .bbhub-hero__brand img { width: 125px; max-height: 82px; object-position: center; }
  .bbhub-hero__copy h2 { font-size: clamp(34px,13vw,52px); }
  .bbhub-hero__intro { font-size: 12px; }
  .bbhub-fixture__body { padding: 12px; }
  .bbhub-league-tabs { width: 100%; }
  .bbhub-league-tabs button { min-width: 0; flex: 1; }
  .bbhub-toolbar { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
  .bbhub-toolbar__status { justify-self: start; }
  .bbhub-filters { grid-template-columns: 1fr; }
  .bbhub-roundbar { grid-template-columns: 46px minmax(0,1fr) 46px; }
  .bbhub-roundbar__centre { grid-template-columns: 1fr; gap: 4px; padding: 8px; }
  .bbhub-roundbar__centre > span { display: none; }
  .bbhub-round-theme { text-align: center; font-size: 9px; }
  .bbhub-game { grid-template-columns: 1fr; min-height: 0; }
  .bbhub-game__when { grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--bb-line); }
  .bbhub-game__when strong { grid-row: 1 / span 2; grid-column: 2; font-size: 20px; }
  .bbhub-game__matchup { padding: 10px 12px; }
  .bbhub-game-team { grid-template-columns: 36px minmax(0,1fr) auto; }
  .bbhub-game-team__logo { width: 34px; height: 34px; }
  .bbhub-game-team__score { font-size: 24px; }
  .bbhub-game__state { display: flex; justify-content: space-between; align-items: center; border-left: 0; border-top: 1px solid var(--bb-line); padding: 8px 12px; }
  .bbhub-game__venue { grid-column: auto; grid-template-columns: 1fr; gap: 3px; border-top: 1px solid var(--bb-line); padding: 9px 12px; }
  .bbhub-game__link { margin-top: 3px; }
}