/* Basketball's challenges (/basketball-challenges, hb-challenge/ui.js): the 82–0 Challenge and the Kanto Finals
   Challenge. broadcast.css does the work (the challenge panel, scorebug, reels, pick pop-up, results and leaderboard
   are football's); this is the little that differs. The 82–0 Challenge wears the 17–0 Challenge's gold, the Kanto
   Finals the 151 Challenge's red: body.game-kf does for the Kanto Finals what body.game-151 does on football's page. */

/* which challenge: 82–0 (a region and a type a round) or the Kanto Finals (a Pokémon a round) */
body.game-kf .only-820,
body:not(.game-kf) .only-kf { display: none !important; }
.title-block h1 .n820 { color: var(--gold); }
.title-block h1 .nkf { color: var(--red); }

/* ten rounds: ten ticks */
.hb-page .ticks { grid-template-columns: repeat(10, 1fr); gap: 3px; }

/* ---------- the Kanto Finals in red (broadcast.css's body.game-151 rules, for body.game-kf) ---------- */
body.game-kf .bug-round { background: var(--red-fill); color: #fff; }
body.game-kf .ticks i.done { background: var(--red); }
body.game-kf .ticks i.now { background: rgba(248, 113, 113, 0.4); }
body.game-kf .callout { border-color: rgba(248, 113, 113, 0.55); color: var(--red-light); }
body.game-kf #dp-choose { background: var(--red-fill); color: #fff; }
body.game-kf #dp-choose:hover:not(:disabled) { background: var(--red-hover); }
body.game-kf .roll-card { --ring: var(--red); --ring-soft: rgba(248, 113, 113, 0.16); --ring-glow: rgba(248, 113, 113, 0.25); }
/* its pick is the roll itself: the big card, with the Pokémon's stats and size and the reroll (as the 151 Challenge's) */
body.game-kf .pick-card { min-height: 0; padding: 12px; background: var(--panel); border: 1px solid rgba(248, 113, 113, 0.55); border-radius: 8px; justify-content: flex-start; }
body.game-kf .pick-card .thumb { width: 64px; height: 64px; }
body.game-kf .pc-row { gap: 12px; }
body.game-kf .pc-main { gap: 6px; }
body.game-kf .pc-head b { font-size: 23px; }
.bug.final.kf { border-color: rgba(248, 113, 113, 0.55); }
.bug.final.kf .bug-final { background: var(--red-fill); color: #fff; }
.bug.final.kf.champs { border-color: var(--gold); }
.bug.final.kf.champs .bug-final { background: var(--gold); color: var(--on-gold); }
.bug-record.perfect, .bests dd.perfect { color: var(--gold); }

/* ---------- the run over, in the panel: a square a game ---------- */
/* 82–0: the season's 82 games in two rows of 41 (the first half over the second), green wins, red losses, all gold
   on a perfect season */
.squares.s82 { grid-template-columns: repeat(41, 1fr); gap: 2px; }
.squares.s82 i { height: 6px; border-radius: 1px; }
/* the Kanto Finals: the four rounds side by side, each a best of seven (the games played; the rest of the seven, and
   the rounds the run never reached, faint) */
.squares.skf { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.squares.skf span { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.squares.skf i { height: 6px; border-radius: 1px; }
.squares.skf i.none { background: rgba(255, 255, 255, 0.1); }
.squares.skf.perfect i:not(.none) { background: var(--gold); }

/* ---------- the results: the details beside the card ---------- */
/* what the season tells at a glance (82–0: the first loss, the longest streak; Kanto Finals: where it ended) */
.hb-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 10px; }
.hb-facts:empty { display: none; }
.hb-facts > div { min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); font-family: var(--rc); text-transform: uppercase; }
.hb-facts dt, .hb-facts .k { display: block; font-size: 11.5px; font-weight: 700; color: var(--subtle); white-space: nowrap; }
.hb-facts .v { display: block; margin-top: 2px; overflow: hidden; font-size: 17px; font-weight: 800; line-height: 1.15; white-space: nowrap; text-overflow: ellipsis; }
.hb-facts .v small { font-size: 12.5px; font-weight: 700; color: var(--muted); }
/* 82–0: the 82 games, game by game (football's list; two columns of 41 where there's room) */
.hb-games:empty, .hb-rounds:empty { display: none; }
@media (min-width: 600px) {
  .season-games.hb-games { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(41, auto); grid-auto-flow: column; gap: 4px 10px; }
}
.season-games.hb-games li { min-height: 32px; grid-template-columns: 22px 16px 62px minmax(0, 1fr) auto; }
/* the Kanto Finals: a card a round */
.hb-rounds { display: grid; gap: 8px; margin: 0 0 12px; }
.hb-round { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); font-family: var(--rc); }
.hb-round.lost { border-color: rgba(248, 113, 113, 0.45); }
.hb-round.won { border-color: rgba(74, 222, 128, 0.35); }
.hb-round.title { border-color: var(--gold); }
.hb-round.unplayed { opacity: 0.55; }
.hb-round-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; text-transform: uppercase; }
.hb-round-head b { font-size: 15px; font-weight: 800; color: var(--red-light); white-space: nowrap; }
.hb-round-head span { overflow: hidden; font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.hb-round-club { display: flex; align-items: center; gap: 8px; min-height: 30px; margin-top: 2px; font-size: 17px; font-weight: 800; text-transform: uppercase; }
.hb-round-club .nm { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hb-round-club .ors { font-size: 12px; font-weight: 700; color: var(--subtle); }
.hb-round-club .res { font-size: 20px; font-variant-numeric: tabular-nums; }
.hb-round.won .res, .hb-round.title .res { color: var(--win); }
.hb-round.lost .res { color: var(--red); }
.hb-round-games { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0 0; padding: 6px 0 0; border-top: 1px solid var(--line); list-style: none; font-size: 13px; font-weight: 700; color: var(--subtle); font-variant-numeric: tabular-nums; }
.hb-round-games .w b { color: var(--win); }
.hb-round-games .l b { color: var(--red); }

/* ---------- the leaderboard: three boards (82–0 · Kanto Finals · 3-PT), a star by a Kanto champion's record ---------- */
.tabs-g.hb-tabs-g { grid-template-columns: 1fr 1.35fr 1fr; }
.tabs-g.hb-tabs-g b { white-space: nowrap; }
@media (max-width: 380px) {
  .tabs-g.hb-tabs-g b { font-size: 15.5px; }
}
.hb-cup { margin-right: 4px; font-size: 0.8em; font-style: normal; color: var(--gold); }
/* the two challenges' rows: room for a champion's star by a playoff record ("★ 16–7") and for a Team Score of 1000
   (the 3-PT tab keeps broadcast.css's three numbers a row) */
.hb-page #board:not(.board-threes) .board-cols,
.hb-page #board:not(.board-threes) .board-row { grid-template-columns: 28px 34px minmax(0, 1fr) 60px 46px; }
.hb-page #board:not(.board-threes) .board-row:has(.br-remove) { grid-template-columns: 28px 34px minmax(0, 1fr) 60px 46px 30px 30px; }

/* ======================================================================================== wide screens: height steps */
/* The controls column never scrolls (broadcast.css's steps, by the column's own height): these are its body.game-151
   steps, for the Kanto Finals' big pick card. Measured in every state at 1000–1920 × 560–1080: tools/qa/site/shell.mjs
   fit. */
@container panel (max-height: 691px) {
  body.game-kf .pick-card { gap: 8px; padding: 10px 12px; }
}
@container panel (max-height: 591px) {
  body.game-kf[data-dp="placing"] .draft-panel .sec, body.game-kf[data-dp="placing"] .rules { display: none; }
}
@container panel (max-height: 540px) {
  body.game-kf .pick-card .thumb { width: 52px; height: 52px; }
  body.game-kf .pc-head b { font-size: 20px; }
}

/* the results' note on how a team is graded ends with the way to the Scouting Guide (as the Indigo Series': indigo.css) */
.season-how a { color: var(--gold); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }