/*
 * Mini board player (mini-player.js): an optional header of facts above
 * the board, the board, and a thin bar on the board's bottom edge showing
 * how far through the game it is. Used by the /games previews and cards.
 *
 * The bar sits in the board's own bottom margin, below the last line, so
 * it never covers a stone.
 */
.kfp {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* Scrubbed sideways with a finger; scrolling up and down still scrolls. */
.kfp { touch-action: pan-y; }

/* The wood behind the board too, so its rounded corners don't show
 * whatever is around it. */
.kfp-frame { position: relative; background: #F1B458; }
.kfp-board,
.kfp-frame > svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}
/* Our board waits behind the server-drawn frame until it can show the
 * same position (the featured card). */
.kfp-board.is-waiting { display: none; }

.kfp-msg {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  text-align: center;
  font-size: var(--font-size-meta);
  color: rgba(23, 10, 2, 0.75);
}
.kfp-msg[hidden] { display: none; }

/* A game still on its way: the empty board, a little faded. One with
 * nothing to show (left out by the server, or the request failed twice):
 * faded further, so it doesn't pass for a game with no stones; unless the
 * server drew it (the featured card), which is a good board as it is. */
.kfp.is-loading .kfp-board { opacity: 0.7; }
.kfp.is-unavailable .kfp-frame:not(:has(> svg:not(.kfp-board))) { opacity: 0.35; }

.kfp-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(23, 10, 2, 0.12);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-short) var(--ease-out);
}
/* Only while someone is looking through the game: pointing at the board
 * (the card it's on, with a mouse), or after a sideways drag on touch.
 * At rest a part-filled bar on every card would read as how much of each
 * game you'd watched. A preview beside a row is always being looked
 * through (games-list.css). */
@media (hover: hover) {
  .kfp.is-scrubbed:hover .kfp-bar,
  .game-card--preview:hover .kfp.is-scrubbed .kfp-bar { opacity: 1; }
}
@media (hover: none) {
  .kfp.is-scrubbed .kfp-bar { opacity: 1; }
}
.kfp-bar-fill {
  position: absolute;
  inset: 0;
  background: rgba(23, 10, 2, 0.62);
  transform-origin: left center;
  transform: scaleX(0);
}

/* ── The header above the board ────────────────────────────
 * In the card's own colours: what the game is (round, length) on the
 * left, the result (only with Show results) on the right, "74 / 213"
 * while the board is being looked through. */
.kfp-strip {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 8px var(--space-3) 7px;
  font-size: var(--font-size-meta);
  line-height: 1.3;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}
/* The check hangs off the end of the text, so this box doesn't clip;
 * a long round ellipsizes inside it instead. */
.kfp-moves {
  display: inline-flex;
  min-width: 0;
}
.kfp-moves > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kfp-strip .kf-result {
  margin-left: auto;
  color: var(--color-text);
  font-weight: 500;
  white-space: nowrap;
}