/* Basketball pages: the Bot page styles (shared look with the-bot.html) plus hoops pieces */
.bot-head { padding: 3.5rem 0 1.75rem; }
.bot-intro { max-width: 48ch; color: var(--muted); margin: 0; }
.dv { font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 112%; text-transform: uppercase; }
.lbl { font-family: var(--display); font-style: italic; font-weight: 700; font-stretch: 108%; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.6875rem; color: var(--muted); }

/* scorecard strip */
.strip { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 2rem 0 0; }
.strip > div { padding: 1rem 1rem 1rem 0; }
.strip > div:nth-child(2n) { border-left: 1px solid var(--line); padding-left: 1rem; }
.strip > div:nth-child(n+3) { border-top: 1px solid var(--line); }
.strip b { display: block; font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 112%; font-size: clamp(1.6rem, 6.5vw, 2.25rem); line-height: 1; margin-top: 0.35rem; }
.strip b small { font-size: 0.5em; color: var(--muted); font-weight: 700; letter-spacing: 0.04em; }
.strip b.p { color: var(--purple); }
.strip p { margin: 0.35rem 0 0; font-size: 0.8125rem; color: var(--muted); line-height: 1.35; }
@media (min-width: 46rem) {
  .strip { grid-template-columns: repeat(4, 1fr); }
  .strip > div:nth-child(n+3) { border-top: 0; }
  .strip > div + div { border-left: 1px solid var(--line); padding-left: 1rem; }
}

.bot-tabs { margin-top: 2.5rem; }
.panel { padding: 1.75rem 0 3rem; }
.panel[hidden] { display: none; }

/* controls */
.ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin: 0 0 1.25rem; }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; }
.seg button { background: none; border: 0; color: var(--muted); padding: 0.45rem 0.9rem; cursor: pointer; font-family: var(--display); font-style: italic; font-weight: 700; font-stretch: 108%; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; }
.seg button[aria-pressed="true"] { background: var(--purple); color: var(--ink); }
.wk { display: inline-flex; align-items: center; gap: 0.5rem; }
.wk button { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--rule); background: none; color: var(--paper); cursor: pointer; font-size: 1rem; }
.wk button:disabled { opacity: 0.3; cursor: default; }
.wk span { font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 112%; text-transform: uppercase; font-size: 1.25rem; min-width: 5.5rem; text-align: center; }
select.sel { background: var(--ink-2); color: var(--paper); border: 1px solid var(--rule); border-radius: 4px; padding: 0.45rem 0.6rem; font: inherit; font-size: 0.875rem; }

/* game cards */
.games { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .games { grid-template-columns: 1fr 1fr; } }
.g { border: 1px solid var(--line); background: var(--ink-2); border-radius: 4px; padding: 1rem 1rem 0.9rem; }
.g .top { display: flex; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.g .row { display: grid; grid-template-columns: 30px 1fr auto auto; align-items: center; gap: 0.6rem; padding: 0.3rem 0; }
.g .row img, .lg { width: 30px; height: 30px; object-fit: contain; background: #F2F1EE; border-radius: 50%; padding: 3px; box-sizing: border-box; }
.g .nm { font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 108%; text-transform: uppercase; font-size: 1.0625rem; line-height: 1.1; }
.g .nm small { display: block; font-style: normal; font-weight: 500; font-stretch: 100%; text-transform: none; font-size: 0.75rem; color: var(--muted); letter-spacing: 0.02em; margin-top: 0.1rem; }
.g .pct { font-size: 0.8125rem; color: var(--muted); min-width: 2.75rem; text-align: right; }
.g .sc { font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 112%; font-size: 1.6rem; min-width: 2.25rem; text-align: right; }
.g .row.fav .sc { color: var(--purple); }
.g .row.lose .nm, .g .row.lose .sc { color: var(--muted); }
.bar { height: 4px; background: var(--rule); border-radius: 2px; margin: 0.6rem 0 0.7rem; overflow: hidden; display: flex; }
.bar i { display: block; height: 100%; background: var(--purple); }
.g .line { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: 0.8125rem; color: var(--muted); }
.g .line b { color: var(--paper); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }
.chip { font-size: 0.6875rem; letter-spacing: 0.04em; border: 1px solid var(--rule); color: var(--muted); padding: 0.15rem 0.5rem; border-radius: 999px; }
.chip.alt { border-color: var(--purple-deep); color: var(--purple); }
.res { margin-top: 0.75rem; padding-top: 0.65rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1rem; font-size: 0.8125rem; color: var(--muted); }
.res b { color: var(--paper); }
.res b, .res .hit, .res .miss { white-space: nowrap; }
.res2 { font-size: 0.75rem; color: var(--muted); margin-top: 0.3rem; }
.hit { color: var(--up); font-weight: 700; } .miss { color: var(--down); font-weight: 700; }
.empty { color: var(--muted); padding: 2rem 0; }

/* tables */
.bt { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.bt th { text-align: left; font-family: var(--display); font-style: italic; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.66rem; color: var(--muted); padding: 0 0.6rem 0.6rem 0; border-bottom: 1px solid var(--line); white-space: nowrap; cursor: default; }
.bt th[data-k] { cursor: pointer; }
.bt th[data-k]:hover, .bt th.on { color: var(--paper); }
.bt td { padding: 0.65rem 0.6rem 0.65rem 0; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
.bt td.n, .bt th.n { text-align: right; }
.bt .rk { font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 112%; font-size: 1.15rem; width: 2.25rem; }
.bt .tm { display: flex; align-items: center; gap: 0.55rem; font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 108%; text-transform: uppercase; font-size: 0.95rem; white-space: normal; line-height: 1.1; }
.bt .tm img { width: 26px; height: 26px; flex: none; object-fit: contain; background: #F2F1EE; border-radius: 50%; padding: 3px; box-sizing: border-box; }
.bt .tm small { display: block; font-style: normal; font-weight: 500; font-stretch: 100%; text-transform: none; font-size: 0.7rem; color: var(--muted); }
.bt tr.west .tm { color: var(--paper); }
.bt tr.dim td { color: var(--muted); }
.bt .net { color: var(--purple); font-weight: 700; }
.bt .why { display: block; font-size: 0.6875rem; color: var(--muted); font-weight: 400; letter-spacing: 0.02em; }
.bt .ok { color: var(--up); } .bt .no { color: var(--down); }
.bvb td { vertical-align: top; }
@media (max-width: 40rem) { .bvb td, .bvb th { padding-right: 0.5rem; } .bvb { font-size: 0.8rem; } }
.bt .sub { color: var(--muted); font-size: 0.75rem; margin-left: 0.15rem; }
.up { color: var(--up); } .down { color: var(--down); } .flat { color: var(--muted); }
.pc { position: relative; min-width: 3.25rem; }
.pc span { position: relative; z-index: 1; }
.pc i { position: absolute; left: 0; top: 22%; bottom: 22%; background: var(--purple-deep); opacity: 0.55; border-radius: 2px; }
@media (max-width: 40rem) {
  .bt { font-size: 0.8rem; }
  .bt .hide-s, .bt .sub, .bt .tm small .cf { display: none; }
  .bt td, .bt th { padding-right: 0.45rem; }
  .bt .tm { font-size: 0.85rem; gap: 0.4rem; }
  .bt .tm img { width: 24px; height: 24px; }
  .pc { min-width: 2.75rem; }
}

/* record */
.cards2 { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 0 0 2rem; }
@media (min-width: 46rem) { .cards2 { grid-template-columns: 1fr 1fr; } }
.card { border: 1px solid var(--line); background: var(--ink-2); border-radius: 4px; padding: 1.1rem 1.1rem 1.2rem; border-top: 4px solid var(--purple); }
.card h3 { margin: 0 0 0.75rem; font-size: 1.25rem; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 1rem; font-size: 0.9375rem; }
.kv span { color: var(--muted); }
.kv b { font-weight: 700; text-align: right; }
h2.sh { font-size: 1.35rem; margin: 2.25rem 0 0.9rem; }
.note { color: var(--muted); font-size: 0.875rem; max-width: 60ch; }
.vs { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; text-align: center; border: 1px solid var(--line); background: var(--ink-2); border-radius: 4px; padding: 1.25rem 0.75rem; margin-bottom: 1rem; }
.vs b { display: block; font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 112%; font-size: 3rem; line-height: 1; margin-top: 0.3rem; }
.vs .bot b { color: var(--purple); }
.vs .x { color: var(--muted); font-family: var(--display); font-style: italic; font-weight: 900; }
.vs .tie { border-left: 1px solid var(--line); padding: 0 0.25rem 0 1rem; color: var(--muted); }
.vs .tie b { font-size: 2rem; color: var(--muted); }

/* how it works */
.how { max-width: 46rem; }
.how h3 { font-size: 1.15rem; margin: 2rem 0 0.5rem; }
.how p, .how li { color: var(--muted); }
.how li { margin: 0.35rem 0; }
.how li b, .how p b { color: var(--paper); }
.updated { margin-top: 1.25rem; font-size: 0.8125rem; color: var(--muted); }

/* ---------- basketball additions ---------- */
.hb-head { padding: 3rem 0 1.5rem; }
.hb-head .eyebrow { letter-spacing: 0.3em; }
.hb-head h1 { font-size: clamp(2.75rem, 8vw, 4.5rem); line-height: 0.92; margin: 0 0 1rem; }
.hb-head p.dek { max-width: 52ch; color: var(--muted); margin: 0; font-size: 1.0625rem; }
.status { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem; font-size: 0.8125rem; color: var(--muted); }
.status b { color: var(--paper); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 0.75rem; margin: 2.75rem 0 1.25rem; }
.sec-head h2 { margin: 0; font-family: var(--display); font-style: italic; font-weight: 700; font-stretch: 108%; text-transform: uppercase; letter-spacing: 0.1em; font-size: 1rem; color: var(--muted); }
.sec-head a { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.875rem; color: var(--purple); text-decoration: none; }
.sec-head a:hover { color: var(--paper); }
.days { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.days::-webkit-scrollbar { display: none; }
.days button { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 4.25rem; min-height: 44px; padding: 0.45rem 0.4rem; border: 1px solid var(--line); background: none; color: var(--muted); border-radius: 4px; cursor: pointer; font-family: var(--body); }
.days button .dw { font-family: var(--display); font-style: italic; font-weight: 700; font-stretch: 108%; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.625rem; }
.days button .dn { font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 112%; font-size: 1.15rem; line-height: 1; color: var(--paper); }
.days button .dc { font-size: 0.625rem; }
.days button[aria-pressed="true"] { background: var(--purple); border-color: var(--purple); color: var(--ink); }
.days button[aria-pressed="true"] .dn { color: var(--ink); }
.days button:disabled { opacity: 0.35; cursor: default; }
.games3 { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .games3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .games3 { grid-template-columns: 1fr 1fr 1fr; } }
.g .rk-s { font-family: var(--body); font-style: normal; font-weight: 600; font-size: 0.6875rem; color: var(--muted); margin-right: 0.3rem; letter-spacing: 0; }
.two { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 52rem) { .two { grid-template-columns: 1fr 1fr; } }
.two .sec-head { margin-top: 0; }
.leagues { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 52rem) { .leagues { grid-template-columns: repeat(3, 1fr); } }
.leagues h3 { margin: 0 0 0.6rem; font-family: var(--display); font-style: italic; font-weight: 700; font-stretch: 108%; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; color: var(--purple); }
.tchips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.tchip { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--line); border-radius: 999px; padding: 0.25rem 0.7rem 0.25rem 0.3rem; font-size: 0.8125rem; }
.tchip img { width: 22px; height: 22px; object-fit: contain; background: #F2F1EE; border-radius: 50%; padding: 2px; box-sizing: border-box; }
.tchip small { color: var(--muted); font-size: 0.6875rem; }
.soon { border: 1px dashed var(--rule); border-radius: 4px; padding: 1.25rem; color: var(--muted); font-size: 0.9375rem; max-width: 46rem; }
.soon b { color: var(--paper); }
.daynav { display: inline-flex; align-items: center; gap: 0.5rem; }
.daynav > button { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--rule); background: none; color: var(--paper); cursor: pointer; font-size: 1rem; }
.daynav > button:disabled { opacity: 0.3; cursor: default; }
.daynav > span.dv { min-width: 9.5rem; text-align: center; font-size: 1.15rem; }
.sec-head .daynav { max-width: 100%; }
.sec-head .daynav .days { flex: 1 1 auto; min-width: 0; }
@media (max-width: 40rem) { .sec-head .daynav > button { display: none; } }
.two .mini-ei-list { grid-template-columns: 1fr !important; column-gap: 0; }
.two .mini-ei-list li { grid-template-columns: 2.25rem 26px 1fr auto auto; }
.two .mini-ei-list .lg { width: 26px; height: 26px; object-fit: contain; background: #F2F1EE; border-radius: 50%; padding: 3px; box-sizing: border-box; }
.two .mini-ei-list .n small { white-space: nowrap; }
.two .mini-ei-list .n small { display: block; margin-left: 0; margin-top: 0.1rem; }
.bt .sub { margin-left: 0.35rem; }
.seg button { white-space: nowrap; }
/* bracket */
.bk-scroll { overflow-x: auto; padding-bottom: 0.5rem; }
.bk { display: grid; grid-template-columns: repeat(4, minmax(13.5rem, 1fr)); gap: 1rem; min-width: 56rem; align-items: stretch; }
.bk-col { display: flex; flex-direction: column; justify-content: space-around; gap: 0.6rem; }
.bk-col h3 { margin: 0 0 0.25rem; }
.bk-g { border: 1px solid var(--line); background: var(--ink-2); border-radius: 4px; overflow: hidden; }
.bk-t { display: grid; grid-template-columns: 1.4rem 22px 1fr auto; align-items: center; gap: 0.45rem; padding: 0.35rem 0.55rem; font-size: 0.8125rem; color: var(--muted); }
.bk-t + .bk-t { border-top: 1px solid var(--line); }
.bk-t img { width: 22px; height: 22px; object-fit: contain; background: #F2F1EE; border-radius: 50%; padding: 2px; box-sizing: border-box; }
.bk-t .sd { font-family: var(--display); font-style: italic; font-weight: 900; text-align: right; font-size: 0.875rem; }
.bk-t .tn { font-family: var(--display); font-style: italic; font-weight: 800; font-stretch: 108%; text-transform: uppercase; font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-t .tp { font-size: 0.6875rem; }
.bk-t.win { color: var(--paper); background: rgba(139, 107, 184, 0.16); }
.bk-t.win .tn { color: var(--paper); }
.bk-champ .bk-t { grid-template-columns: 22px 1fr; font-size: 1rem; padding: 0.7rem; }
.or-row { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); margin-bottom: 1.5rem; }
.or-to { margin: 0; padding: 0.3rem 0.55rem; font-size: 0.6875rem; color: var(--muted); border-top: 1px solid var(--line); }
@media (min-width: 64rem) { .bk { min-width: 0; } }

/* team links, injury chips */
a.tl { color: inherit; text-decoration: none; }
a.tl:hover { color: var(--purple); text-decoration: underline; text-underline-offset: 3px; }
.chip.inj { border-color: rgba(210, 95, 95, 0.55); color: var(--down); }
.chip.back { border-color: rgba(120, 190, 140, 0.55); color: var(--up); }

/* team cards (same look as the football Index cards) */
.hcards { display: grid; gap: 1.25rem; margin: 3rem 0 2rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .hcards { grid-template-columns: 1fr 1fr; } }
.ei-card { border: 1px solid var(--line); border-radius: 4px; background: var(--ink-2); padding: 1.25rem 1.25rem 1.5rem; border-top: 4px solid var(--purple); }
.ei-card h3 { font-family: var(--display); text-transform: uppercase; font-style: italic; font-weight: 600; font-size: 1.5rem; margin: 0; line-height: 1.1; }
.ei-card .meta { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0.35rem 0 1rem; }
.ei-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; font-size: 0.9375rem; }
.ei-card dt { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple); padding-top: 0.2rem; }
.ei-card dd { margin: 0; }
.ei-card .games { margin: 1rem 0 0; padding: 0.75rem 0 0; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }
.ei-card .games div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 0; }
.ei-card .games b { color: var(--paper); font-weight: 500; }
.ei-card .games .tot { border-top: 1px solid var(--line); margin-top: 0.3rem; padding-top: 0.4rem; color: var(--paper); }
.ei-card .games small { color: var(--muted); font-size: 0.6875rem; margin-left: 0.25rem; }
.ei-card { scroll-margin-top: 1rem; min-width: 0; }
.ei-card h3 { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; overflow-wrap: anywhere; }
.ei-card h3 img { flex: none; }
.ei-card dd { min-width: 0; overflow-wrap: anywhere; }
.ei-card .games .gl { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; row-gap: 0.1rem; padding: 0.45rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.ei-card .games .gl:last-child { border-bottom: 0; }
.ei-card .games .go { color: var(--paper); overflow-wrap: anywhere; }
.ei-card .games .gv { grid-row: 1 / span 2; grid-column: 2; align-self: center; text-align: right; font-variant-numeric: tabular-nums; color: var(--paper); font-weight: 500; }
.ei-card .games .gr { grid-column: 1; color: var(--muted); font-size: 0.6875rem; }
.ei-card .games .gr b { color: var(--muted); font-weight: 500; }
.ei-card .games .gl.tot { border-top: 1px solid var(--line); border-bottom: 0; margin-top: 0.2rem; padding-top: 0.6rem; }
.ei-card .games .gl.tot .go, .ei-card .games .gl.tot .gv { font-weight: 600; }
.ei-card .back { display: inline-block; margin-top: 0.9rem; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple); text-decoration: none; }
.ei-card .back:hover { text-decoration: underline; }
.hcards { display: grid; gap: 1.25rem; margin: 3rem 0 2rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .hcards { grid-template-columns: 1fr 1fr; } }
.ei-card h3 img { width: 30px; height: 30px; object-fit: contain; background: #F2F1EE; border-radius: 50%; padding: 3px; box-sizing: border-box; }
.tm-title { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.tm-title img.tm-logo { width: 64px; height: 64px; object-fit: contain; background: #F2F1EE; border-radius: 50%; padding: 6px; box-sizing: border-box; flex: none; }
@media (max-width: 40rem) { .tm-title img.tm-logo { width: 44px; height: 44px; padding: 4px; } }
.bt.odds td { vertical-align: top; }
.ei-card .games { display: block; grid-template-columns: none; }
/* full bracket: all four regions */
.bk-full { display: grid; grid-template-columns: minmax(0, 1fr) 12rem minmax(0, 1fr); gap: 1rem; min-width: 74rem; align-items: center; }
.bf-side { display: flex; flex-direction: column; gap: 1.75rem; }
.bf-reg .bf-name { margin: 0 0 0.4rem; color: var(--purple); }
.bf-reg.mirror .bf-name { text-align: right; }
.bf-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; align-items: stretch; }
.bf-reg.mirror .bf-cols { direction: rtl; }
.bf-reg.mirror .bf-cols > * { direction: ltr; }
.bk-full .bk-col { display: flex; flex-direction: column; justify-content: space-around; gap: 0.3rem; }
.bk-full .bk-t { grid-template-columns: 1rem 16px minmax(0, 1fr) auto; gap: 0.3rem; padding: 0.2rem 0.35rem; font-size: 0.6875rem; }
.bk-full .bk-t img { width: 16px; height: 16px; padding: 1px; }
.bk-full .bk-t .sd { font-size: 0.6875rem; }
.bk-full .bk-t .tn { font-size: 0.6875rem; }
.bk-full .bk-t .tp { font-size: 0.625rem; }
.bf-mid { display: flex; flex-direction: column; gap: 0.5rem; justify-content: center; }
.bf-mid h3 { margin: 0.4rem 0 0; text-align: center; }
.bf-champ { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; border: 1px solid var(--purple); background: rgba(139, 107, 184, 0.16); border-radius: 4px; padding: 0.8rem 0.5rem; margin: 0.5rem 0; text-align: center; }
.bf-champ img { width: 44px; height: 44px; object-fit: contain; background: #F2F1EE; border-radius: 50%; padding: 4px; box-sizing: border-box; }
.bf-champ b { font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 112%; text-transform: uppercase; font-size: 1.15rem; }
.bf-champ .tp { font-size: 0.75rem; color: var(--muted); }
.or-all { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
.or-all .bk-t { grid-template-columns: 1rem 16px minmax(0, 1fr) auto; gap: 0.3rem; padding: 0.2rem 0.35rem; font-size: 0.6875rem; }
.or-all .bk-t img { width: 16px; height: 16px; padding: 1px; }
/* let the full bracket use the whole window, not just the text column */
#p-bracket .bk-scroll { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0 1.25rem 0.75rem; }
#p-bracket .bk-full { min-width: 72rem; max-width: 96rem; margin: 0 auto; }
#p-bracket .bk { max-width: 68rem; margin: 0 auto; }
[hidden] { display: none !important; }