/* Game miniatures — each mini keeps the game's own type and colours, so it reads as the actual game.
   The WNBA minis are ported verbatim from the live league sites. The Fourth & Know mini instead DERIVES
   its palette + type from the NFL game's published contract (nfl.stumped.games/game-tokens.json) via
   tools/sync-game-minis.mjs — so it can't silently drift when the board changes (drift is gated in npm test). */

/* Self-hosted Saira (OFL — fonts/OFL-Saira.txt), mirrored from the NFL game so the Fourth & Know miniature
   matches the board's TYPE, not just its colour. Same faces + weight ranges as nfl/game/player.css. */
@font-face{font-family:"Saira Condensed";src:url(/fonts/SairaCondensed-Black.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Saira SemiCondensed";src:url(/fonts/SairaSemiCondensed-SemiBold.woff2) format("woff2");font-weight:100 600;font-style:normal;font-display:swap}
@font-face{font-family:"Saira SemiCondensed";src:url(/fonts/SairaSemiCondensed-Bold.woff2) format("woff2");font-weight:601 800;font-style:normal;font-display:swap}
@font-face{font-family:"Saira SemiCondensed";src:url(/fonts/SairaSemiCondensed-Black.woff2) format("woff2");font-weight:801 900;font-style:normal;font-display:swap}

/* hb-game-tokens:start — GENERATED by tools/sync-game-minis.mjs from each game's /game-tokens.json.
   Do not edit by hand; run `npm run sync:minis`. Drift is gated in `npm test` (sync-game-minis.mjs --check). */
.g-fk{--fk-bg:#0A0B14;--fk-accent:#D8F34F;--fk-accent-ink:#17130A;--fk-cell-top:#202a42;--fk-cell-bottom:#0c1120;--fk-f-word:"Saira Condensed",system-ui,sans-serif;--fk-f-board:"Saira SemiCondensed",system-ui,sans-serif}
/* hb-game-tokens:end */

.game-mini {
  --press: #0a090c;
  position: relative;
  overflow: hidden;
  display: block;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 0;
  padding: 15px 15px 13px;
  text-align: left;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  box-shadow: 0 3px 0 var(--press);
}

.gc-wordmark {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.03em;
}

.gc-play {
  margin-top: 11px;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
}

/* DECIPHER — violet terminal */
.game-mini.g-dec {
  background: radial-gradient(120% 120% at 50% -20%, #1d1433, #0b0817 65%);
  color: #ddd8ee;
}
.game-mini.g-dec::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(139, 92, 246, 0.09) 0,
    rgba(139, 92, 246, 0.09) 1px,
    transparent 2px,
    transparent 4px
  );
}
.g-dec .gc-pr {
  color: #8b5cf6;
}
.g-dec .gc-cur {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: #c4b5fd;
  vertical-align: -2px;
  animation: gcBlink 1s steps(1) infinite;
}
@keyframes gcBlink {
  50% {
    opacity: 0;
  }
}
.gc-dec-body {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  margin-top: 9px;
}
.gc-dec-stats {
  flex: 1;
  min-width: 0;
}
.gc-silh {
  flex: none;
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 0;
  overflow: hidden;
  background: radial-gradient(125% 130% at 50% 16%, #2a2340, #141026);
  border: 1px solid #2c2452;
}
.gc-silh::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: repeating-linear-gradient(
    0deg,
    rgba(139, 92, 246, 0.14) 0,
    rgba(139, 92, 246, 0.14) 1px,
    transparent 2px,
    transparent 4px
  );
}
.gc-silh-head {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 34px;
  height: 42px;
  background: #05040a;
  border-radius: 28px 28px 0 0;
}
.g-dec .gc-line {
  font-size: 11px;
  color: #aca4cc;
  display: flex;
  justify-content: space-between;
}
.g-dec .gc-line b {
  color: #fff;
}
.g-dec .gc-redact {
  margin-top: 7px;
  font-size: 11px;
  color: #726c92;
}
.g-dec .gc-redact em {
  font-style: normal;
  color: #c4b5fd;
  background: rgba(139, 92, 246, 0.16);
  padding: 1px 6px;
  border-radius: 0;
}
.g-dec .gc-play {
  color: #c4b5fd;
}

/* PACE — team-colour duel (Anybody 900 + IBM Plex Mono, per the game) */
.pace-mini {
  border-radius: 0;
  overflow: hidden;
  border: 1px solid rgba(240, 230, 215, 0.08);
}
.pm-duel {
  display: flex;
  align-items: stretch;
  height: 112px;
  /* team-color duel: real team colors from the WNBA app's TEAM_COLORS — Las Vegas Aces #1E1E1F
     (near-black) on the left, New York Liberty #86CEBC (seafoam) on the right — gradienting into
     each other at the VS seam (the 44%–56% band). */
  background: linear-gradient(90deg, #1E1E1F 0%, #1E1E1F 44%, #86CEBC 56%, #86CEBC 100%);
}
.pm-side {
  flex: 1;
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}
/* sides are transparent so the .pm-duel team-color gradient shows through and merges at the VS.
   Text colour is set per side for contrast against its own team colour: light ink on the dark Aces
   ground, dark ink on the light Liberty seafoam. The real jersey images (kits/*.webp) sit on top. */
.pm-a {
  background: transparent;
  color: #f4efe8;
}
.pm-b {
  background: transparent;
  color: #10201b;
}
.pm-name {
  font-family: "Anybody", sans-serif;
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
}
.pm-team {
  margin-top: 3px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 8px;
  letter-spacing: 0.14em;
}
.pm-team-b {
  color: #1c352e;
}
.pm-val {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.pm-kit {
  width: 30px;
  height: auto;
}
.pm-num {
  font-family: "Anybody", sans-serif;
  font-weight: 900;
  font-size: 24px;
  line-height: 1;
}
.pm-sub {
  font-family: "IBM Plex Mono", monospace;
  font-size: 7px;
  letter-spacing: 0.12em;
}
.pm-sub-b {
  color: #1c352e;
}
/* VS sits on the seam where the two team colours meet; a translucent dark chip keeps it legible over
   the blend (which is a mid-tone) while still letting the gradient show through around it. */
.pm-vs {
  align-self: center;
  flex: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: #ffffff;
  padding: 4px 7px;
  background: rgba(10, 14, 12, 0.5);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.pm-prompt {
  background: #100c0a;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
}
.pm-hi {
  color: #33c07a;
}
.pm-lo {
  color: #ff5470;
}
.pm-q {
  color: #7d746a;
}

/* FOURTH & KNOW — field position (the game's signature: field position IS your score). Palette + type are
   DERIVED from the game via the synced --fk-* custom properties (block near the top); only the gridiron turf
   is imagery, approximated here. Read the game's real board at nfl.stumped.games. */
.game-mini.g-fk {
  font-family: var(--fk-f-board);
  color: #eef2ff;
  background: radial-gradient(120% 82% at 50% -14%, rgba(226, 240, 255, 0.12), rgba(226, 240, 255, 0) 56%), var(--fk-bg);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 3px 0 #000;
}
.g-fk .gc-wordmark {
  font-family: var(--fk-f-word);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
}
.g-fk .gc-wordmark b { color: var(--fk-accent); font-weight: 900; }
/* the field: yard-line stripes on turf-green, the ball at its spot, the drive so far lit in the game accent */
.fk-field {
  position: relative;
  height: 46px;
  margin-top: 11px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 10%),
    linear-gradient(180deg, #12351d, #0c2415);
}
.fk-ez { position: absolute; top: 0; bottom: 0; width: 16%; display: grid; place-items: center; background: rgba(0, 0, 0, 0.34); }
.fk-ez.l { left: 0; } .fk-ez.r { right: 0; }
.fk-ez span { font-family: var(--fk-f-board); font-weight: 800; font-size: 8px; letter-spacing: 0.08em; color: #eaf7ee; text-transform: uppercase; transform: rotate(-90deg); }
.fk-drive { position: absolute; top: 50%; left: 16%; width: 26%; height: 2px; background: var(--fk-accent); transform: translateY(-50%); opacity: 0.85; }
.fk-ball { position: absolute; top: 50%; left: 42%; transform: translate(-50%, -50%); width: 20px; }
/* the score readout — field position, points lit in the game accent (mirrors the board's .sb-score) */
.fk-read { display: flex; align-items: baseline; gap: 8px; margin-top: 9px; }
.fk-pts { font-family: var(--fk-f-board); font-weight: 900; font-size: 30px; line-height: 0.8; color: var(--fk-accent); }
.fk-pts small { font-size: 11px; margin-left: 2px; }
.fk-state { font-family: "General Sans", var(--f-sans), sans-serif; font-weight: 600; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); }
/* the value ladder as a strip — the board's pressed value cells (real cell gradient), values in the accent */
.fk-strip { display: flex; gap: 5px; margin-top: 10px; }
.fk-strip span {
  flex: 1;
  text-align: center;
  font-family: var(--fk-f-board);
  font-weight: 900;
  font-size: 12px;
  color: var(--fk-accent);
  padding: 4px 0;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--fk-cell-top), var(--fk-cell-bottom));
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.18), 0 2px 0 rgba(0, 0, 0, 0.5);
}
.g-fk .gc-play { color: var(--fk-accent); }