/* Board: game cards, scoreboard row, field, last play, share and remove buttons. */
#board { overflow-y: auto; padding: 16px 16px 32px; }
/* Live / Final / Upcoming. Final and Upcoming cards have no field, so they sit in narrower columns. */
.board-group + .board-group { margin-top: 24px; }
/* Cards always share the full row; only the column count changes with the section's width, so no row ever ends in
   empty space. Live cards get as many columns as fit at 340px or wider. Final/Upcoming cards get the count that
   keeps them closest to 300px wide (n columns from 316n − 158 − 16 = 316n − 174 … rounded), so a phone around 460px
   wide fits two, in the stacked layout below. Breakpoints include the 16px gap. */
.board-group { container: section / inline-size; }
.cards { --cols: 1; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 16px; }
@container section (min-width: 696px) { .live .cards { --cols: 2; } }
@container section (min-width: 1052px) { .live .cards { --cols: 3; } }
@container section (min-width: 1408px) { .live .cards { --cols: 4; } }
@container section (min-width: 1764px) { .live .cards { --cols: 5; } }
@container section (min-width: 458px) { .compact .cards { --cols: 2; } }
@container section (min-width: 774px) { .compact .cards { --cols: 3; } }
@container section (min-width: 1090px) { .compact .cards { --cols: 4; } }
@container section (min-width: 1406px) { .compact .cards { --cols: 5; } }
@container section (min-width: 1722px) { .compact .cards { --cols: 6; } }
.board-section { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
/* Admin-only "Save as image" beside the Upcoming heading (js/poster.js). */
.poster { padding: 2px 8px; background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); font: inherit; font-size: 11px; letter-spacing: 0; text-transform: none; cursor: pointer; }
.poster:hover, .poster:focus-visible { color: var(--text); }
.card { position: relative; min-width: 0; background: var(--card); border: 1px solid var(--card-border); border-radius: 10px; padding: 12px; }
.card.redzone { border-color: var(--red); }
.card.glow { animation: redzone-glow 2.4s ease-in-out; }
/* Flash when a selected game is clicked in the picker. On a pseudo-element so it can't clash with the red-zone glow. */
.card.flash::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid var(--accent); pointer-events: none;
  opacity: 0; animation: card-flash 1.6s ease-out; animation-delay: var(--flash-delay, 0ms); }
@keyframes card-flash {
  0%, 30% { opacity: 1; box-shadow: 0 0 18px 4px rgba(76, 141, 255, .55); }
  100% { opacity: 0; box-shadow: 0 0 0 0 rgba(76, 141, 255, 0); }
}
@keyframes redzone-glow {
  50% { box-shadow: 0 0 20px 5px rgba(255, 90, 90, .8); }
}
/* Every slot in a card is always rendered at a fixed size (hidden when empty) so cards side by side line up. */
.score { display: grid; grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr); align-items: center; gap: 8px; }
.team { min-width: 0; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.team.home { justify-content: flex-end; }
.team img { flex: none; width: 24px; height: 24px; }
/* Faint light edge on every logo so dark ones (maroon, navy, purple) don't vanish into the background. */
.team img, .bug-team img { filter: var(--logo-edge); }
.team .name { min-width: 0; white-space: nowrap; overflow: hidden; }
.team.home .name { text-align: right; }
/* The name gives way (ellipsis) before the rank or possession dot does, so the dot is never clipped off. */
.team .top { display: flex; align-items: baseline; }
.team.home .top { justify-content: flex-end; }
.team .abbr { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.team .rank, .team .poss { flex: none; }
.team .rank { margin-right: 3px; color: var(--muted); font-size: 11px; font-weight: 600; }
.team .pts { flex: none; min-width: 2ch; font-size: 22px; line-height: 28px; font-variant-numeric: tabular-nums; }
.team.away .pts { margin-left: auto; text-align: right; }
.team.home .pts { margin-right: auto; text-align: left; }
.team .poss { margin-left: 4px; color: var(--poss); font-size: 12px; }
.team .sub { color: var(--muted); font-size: 11px; line-height: 15px; font-weight: 400; }
.team .rec { margin-right: 5px; }
.team .to { letter-spacing: 1px; }
.hide { visibility: hidden; }
/* Final/Upcoming cards are narrow, so they use the phone's tighter scoreboard row (css/mobile.css) to fit the names. */
.compact .score { grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr); gap: 6px; }
.compact .team { gap: 6px; }
.compact .team img { width: 20px; height: 20px; }
.compact .team .pts { font-size: 20px; }
/* No possession dot or timeouts before or after a game, so drop their placeholders instead of reserving room. */
.compact .poss.hide, .compact .to.hide { display: none; }
/* Under 280px a side-by-side scoreboard doesn't fit, so Final/Upcoming cards stack like the game list's score bug:
   away over home, each with its score, and the status on the right. (The query measures inside the 12px padding and
   1px border, so 280px wide is 254px here.) */
.compact .card { container: card / inline-size; }
@container card (max-width: 253px) {
  /* Scoped with .compact so these outrank the tighter-row rules above. */
  .compact .score { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "away clock" "home clock"; row-gap: 6px; column-gap: 10px; }
  .compact .team.away { grid-area: away; }
  .compact .team.home { grid-area: home; flex-direction: row-reverse; }  /* its markup is mirrored (score, name, logo) */
  .compact .team.home .name { text-align: left; }
  .compact .team.home .top { justify-content: flex-start; }
  .compact .team.home .pts { margin-left: auto; margin-right: 0; text-align: right; }
  .compact .team .pts { font-size: 18px; line-height: 22px; }
  .compact .clock { grid-area: clock; height: auto; text-align: right; }
}
.clock { text-align: center; color: var(--muted); font-size: 12px; line-height: 17px; height: 34px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.dd { text-align: center; font-size: 18px; font-weight: 700; margin: 8px 0 6px; height: 25px; line-height: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
svg.field { width: 100%; display: block; border-radius: 4px; }
.card-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.net { flex: none; max-width: 40%; color: var(--strong); font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.last { flex: 1; min-width: 0; color: var(--muted); font-size: 12px; height: 17px; line-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recap { color: var(--accent); font-weight: 600; text-decoration: none; }
.recap:hover, .recap:focus-visible { text-decoration: underline; }
.last[data-play] { cursor: pointer; }
.last[data-play]:hover { color: var(--text); }
/* Full last-play text floats over the bottom of the card, so opening it never shifts the layout. */
.last-full { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 2; padding: 8px 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 6px 20px var(--shadow); color: var(--text); font-size: 12px; line-height: 1.45; cursor: pointer; animation: last-in .15s ease-out; }
@keyframes last-in { from { opacity: 0; transform: translateY(4px); } }
.share { flex: none; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; }
.share:hover, .share:focus-visible { color: #000; background: var(--remove-bg); }
.share.done { color: var(--accent); }
.remove { flex: none; width: 24px; height: 24px; border: 0; border-radius: 6px; background: var(--remove-bg); color: #000; font-size: 14px; line-height: 1; cursor: pointer; }
.remove:hover, .remove:focus-visible { background: var(--remove-hover); }
/* With a mouse, float the ✕ in the top-right corner and show it on hover. Touch screens keep it in the footer. */
@media (hover: hover) {
  .remove { position: absolute; top: 6px; right: 6px; opacity: 0; transition: opacity .15s; }
  .card:hover .remove, .remove:focus-visible { opacity: 1; }
  .share { position: absolute; top: 6px; right: 34px; opacity: 0; transition: opacity .15s; }
  .card:hover .share, .share:focus-visible, .share.done { opacity: 1; }
}