/* ── Live board repaint — visual feedback ────────────────────────────────────
   Paired with static/js/board-live.js. Two jobs only:
     1. flash a price cell when its number moves (green up, red down);
     2. dim a row the board no longer carries.
   Deliberately no layout of its own — every rule here is additive, so the
   board looks exactly as before until something actually changes.
   ────────────────────────────────────────────────────────────────────────── */

/* Half a second, then the cell is back to normal. Long enough to catch out of
   the corner of the eye, short enough that a board full of moving prices does
   not turn into a light show.

   Only the 0% frame is declared: the missing 100% is implied from the cell's
   own computed values, so the tint fades back into whatever background and
   border that cell actually has. Writing an explicit `100% { background:
   transparent }` would instead REPLACE the cell's base colour for the whole
   half second and the row would flash see-through on its way back. */
@keyframes vbOddsFlashUp {
  0% { background-color: rgba(16, 185, 129, 0.42); border-color: var(--green); }
}
@keyframes vbOddsFlashDown {
  0% { background-color: rgba(239, 68, 68, 0.42); border-color: var(--red); }
}

.odds-flash-up,
.odds-flash-down {
  /* The cells this lands on already animate border/background on hover; a
     shorthand here would fight that, so only the animation is set. */
  animation-duration: 500ms;
  animation-timing-function: ease-out;
  animation-fill-mode: none;
}
.odds-flash-up   { animation-name: vbOddsFlashUp; }
.odds-flash-down { animation-name: vbOddsFlashDown; }

/* The price text itself takes the colour too — on the wide /live board the
   cell is large and a background tint alone reads as a hover state. */
.odds-flash-up   [data-live-odds-val],
.odds-flash-up   [data-live-extra-val] { color: var(--green); }
.odds-flash-down [data-live-odds-val],
.odds-flash-down [data-live-extra-val] { color: var(--red); }

/* Fixture gone from the board (finished / pruned): still readable, clearly
   not actionable. The row is kept rather than removed so the page's
   server-rendered match counters stay truthful.

   !important is load-bearing here, not laziness: board rows run the `fade-in`
   entrance animation with animation-fill-mode: forwards, and an animation's
   value beats a normal declaration in the cascade — without this the row
   would keep the animation's final opacity: 1 and never dim. */
.is-gone {
  opacity: 0.45 !important;
  pointer-events: none;
}

/* An outcome whose price the bookmaker pulled after the page was rendered.
   Matches what the templates' own --off modifier looks like; board-live.js
   toggles both so a cell reads the same whether it arrived unavailable or
   became unavailable. (No !important needed — the entrance animation is on
   the ROW, not on these cells.) */
.is-unavailable {
  opacity: 0.5;
  cursor: default;
}

/* An extras cell with no line to show renders an empty label span; without
   this the flex gap above it would nudge the price out of line with the
   neighbouring 1X2 cells. */
[data-live-extra-lbl]:empty { display: none; }

/* Respect the OS "reduce motion" setting — the colour still tells the story. */
@media (prefers-reduced-motion: reduce) {
  .odds-flash-up,
  .odds-flash-down { animation: none; }
}