/* Primetime Joust: phone layout. Scoped to the Joust panel; loaded last. Desktop is unchanged except the
   "winning this position" tint. */
#livePrimetimePanel .joust-board-cell.is-leading { background: rgba(97, 255, 137, .06); box-shadow: inset 3px 0 0 rgba(97, 255, 137, .7); }
#livePrimetimePanel .joust-board-cell.is-leading .joust-board-points { color: var(--green); }

@media (max-width: 700px) {
  #livePrimetimePanel { padding: 12px 10px 14px; }
  #livePrimetimePanel > summary p[data-battle-layout-note] { display: none; }
  #livePrimetimePanel > .microcopy { margin: 4px 2px 10px; font-size: .78rem; }

  /* Scoreboard: one status line, then "KC 17 · 21 BUF" with the leader lit. */
  #livePrimetimePanel .primetime-game-grid .live-game { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "status status status" "away sep home"; align-items: center; gap: 8px 10px; padding: 12px 14px 14px; text-align: center; }
  #livePrimetimePanel .primetime-game-grid .live-game-status { grid-area: status; display: flex; justify-content: center; align-items: center;
    flex-wrap: wrap; gap: 4px 10px; margin: 0; }
  #livePrimetimePanel .primetime-game-grid .live-game-period { display: inline; grid-column: auto; color: var(--amber); font-family: var(--heading);
    font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
  #livePrimetimePanel .primetime-game-grid .live-game-clock { grid-column: auto; grid-row: auto; font-size: 1.35rem; line-height: 1; text-shadow: none; }
  #livePrimetimePanel .primetime-game-grid .live-game-status small { display: none; }
  #livePrimetimePanel .primetime-game-grid .live-game-team { display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; min-width: 0; }
  #livePrimetimePanel .primetime-game-grid .live-game-team:nth-of-type(2) { grid-area: away; }
  #livePrimetimePanel .primetime-game-grid .live-game-team:nth-of-type(3) { grid-area: home; flex-direction: row-reverse; }
  #livePrimetimePanel .primetime-game-grid .live-game-team span { font-family: var(--heading); font-size: 1.6rem; line-height: 1; }
  #livePrimetimePanel .primetime-game-grid .live-game-team strong { font-family: var(--heading); font-size: 2rem; line-height: 1; color: #d9dcea; }
  #livePrimetimePanel .primetime-game-grid .live-game::after { content: "·"; grid-area: sep; color: var(--muted); font-size: 1.4rem; }
  #livePrimetimePanel .joust-matchup[data-leader="away"] .live-game-team:nth-of-type(2) strong,
  #livePrimetimePanel .joust-matchup[data-leader="home"] .live-game-team:nth-of-type(3) strong { color: var(--green); }

  /* Position board: full width, top-aligned, compact. */
  #livePrimetimePanel .joust-positions { padding: 10px 0 0; border: 0; background: none; }
  #livePrimetimePanel .joust-position-status { margin: 0 2px 6px; font-size: .72rem; }
  #livePrimetimePanel .joust-board { margin: 0; }
  #livePrimetimePanel .joust-board th, #livePrimetimePanel .joust-board td { padding: 8px 7px; vertical-align: top; }
  #livePrimetimePanel .joust-board thead th:first-child, #livePrimetimePanel .joust-board tbody th { width: 40px; }
  #livePrimetimePanel .joust-board thead th { font-size: .72rem; }
  #livePrimetimePanel .joust-board tbody th { padding-top: 10px; font-size: .82rem; }
  #livePrimetimePanel .joust-board-player { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
  #livePrimetimePanel .joust-board-points { display: block; font-size: 1.1rem; line-height: 1.2; }

  /* Riders: compact pills (chip colour · Strikes · name) that wrap, instead of tall chip towers. */
  #livePrimetimePanel .joust-chip-stacks { gap: 4px; margin-top: 6px; }
  #livePrimetimePanel .joust-chip-stack { display: inline-flex; flex-direction: row; align-items: center; gap: 4px; min-width: 0; max-width: 100%;
    padding: 2px 8px 2px 4px; border-radius: 999px; background: hsl(var(--chip-hue) 40% 15%); border: 1px solid hsl(var(--chip-hue) 55% 36%); }
  #livePrimetimePanel .joust-chips { flex-direction: row; }
  #livePrimetimePanel .joust-chips i { display: none; }
  #livePrimetimePanel .joust-chips i.joust-chip-plate { display: block; width: 10px; height: 10px; margin: 0; border: 0; border-radius: 50%;
    background: hsl(var(--chip-hue) 70% 58%); }
  #livePrimetimePanel .joust-chip-stack > b { min-height: 0; font-size: .72rem; }
  #livePrimetimePanel .joust-chip-name { flex: 0 1 auto; min-width: 0; max-width: none; font-size: .68rem; }
}
/* Halftime: the board is tappable while a switch / sneak-in is available. */
#livePrimetimePanel #livePrimetimeGames.is-halftime-pick .joust-board-cell,
#livePrimetimePanel #livePrimetimeGames.is-entry-pick .joust-board-cell { cursor: pointer; }
#livePrimetimePanel #livePrimetimeGames.is-halftime-pick .joust-board-cell:hover,
#livePrimetimePanel #livePrimetimeGames.is-halftime-pick .joust-board-cell:active,
#livePrimetimePanel #livePrimetimeGames.is-entry-pick .joust-board-cell:hover,
#livePrimetimePanel #livePrimetimeGames.is-entry-pick .joust-board-cell:active { background: rgba(255, 189, 74, .12); box-shadow: inset 0 0 0 2px rgba(255, 189, 74, .6); }
#livePrimetimePanel .joust-halftime-tap-hint { margin: 0 0 10px; padding: 10px 12px; border: 1px solid rgba(255, 189, 74, .5); border-radius: 10px;
  background: rgba(255, 189, 74, .1); color: #ffdc92; font-weight: 700; font-size: .85rem; }

/* Oct 26: tap hints on every position but yours, only while the board is tappable. */
#livePrimetimePanel .joust-board-hint { display: none; margin-top: 6px; color: var(--gold, #ffbd4a); font-size: .68rem; font-weight: 700; letter-spacing: .02em; opacity: .75; }
#livePrimetimePanel #livePrimetimeGames.is-entry-pick .joust-board-hint,
#livePrimetimePanel #livePrimetimeGames.is-halftime-pick .joust-board-hint { display: block; }
#livePrimetimePanel .joust-board-cell:hover .joust-board-hint { opacity: 1; }
#livePrimetimePanel .joust-board-hint .hint-tap { display: none; }
@media (hover: none) { #livePrimetimePanel .joust-board-hint .hint-tap { display: inline; } #livePrimetimePanel .joust-board-hint .hint-click { display: none; } }