/* ──────────────────────────────────────────────────────────────────────
 * Chess board — square highlights, legal-move dots, last-move trace,
 * red-flash on wrong move, and a game-over / puzzle-solved overlay.
 *
 * Classes are added to the chessboard.js square divs by the controller
 * (public/assets/js/chess-board-controller.js). Stays self-contained so
 * any page can include this file + the partial and get the full feel.
 * ────────────────────────────────────────────────────────────────────── */

.bspm-board-wrap {
  position: relative;
  width: 100%;
  /* Cap width by both an absolute ceiling and the available viewport
   * height — so on a short laptop screen the board shrinks instead of
   * pushing the controls below the fold. 240px accounts for the navbar
   * + page hero + card padding. */
  max-width: min(560px, calc(100vh - 240px));
  margin-left: auto;
  margin-right: auto;
}
/* On larger desktops (≥1280px) we have more horizontal slack — let the
 * board breathe a bit more, but still cap by viewport height. */
@media (min-width: 1280px) {
  .bspm-board-wrap { max-width: min(640px, calc(100vh - 220px)); }
}

.bspm-board {
  width: 100%;
  aspect-ratio: 1 / 1;
}

/* ── Evaluation bar (shown only when showEvalBar is on) ──────────────── */
.bspm-board-wrap.has-eval {
  /* Lay out [eval bar | board] side-by-side; status + overlay span both. */
  display: grid;
  grid-template-columns: 22px 1fr;
  grid-template-rows: 1fr auto;
  column-gap: 6px;
}
.bspm-board-wrap.has-eval > .bspm-board         { grid-column: 2; grid-row: 1; }
.bspm-board-wrap.has-eval > .bspm-board-overlay { grid-column: 2; grid-row: 1; }
.bspm-board-wrap.has-eval > .bspm-eval-bar      { grid-column: 1; grid-row: 1; }
.bspm-board-wrap.has-eval > .bspm-status        { grid-column: 1 / 3; grid-row: 2; }
.bspm-board-wrap.has-eval > .bspm-mute-btn      { top: 4px; right: 4px; }

.bspm-eval-bar {
  position: relative;
  background: #1f2230;          /* ink-900 — the "black" side */
  border-radius: 4px;
  overflow: hidden;
  min-height: 200px;            /* fallback if grid doesn't size it */
}
.bspm-eval-bar > .bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 50%;                  /* JS overrides; 50% = equal */
  background: linear-gradient(to top, #ffffff, #f6f7f9 80%);
  transition: height .4s ease;
}
/* Subtle saffron line at the 50% midpoint so the eye finds "even" fast. */
.bspm-eval-bar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(255, 154, 56, .55);
  z-index: 3;
  pointer-events: none;
}
.bspm-eval-bar > .num {
  position: absolute;
  top: 3px; left: 0; right: 0;
  text-align: center;
  font-size: 9px;
  font-weight: 800;
  color: #f6f7f9;
  text-shadow: 0 1px 2px rgba(0,0,0,.65);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  z-index: 4;
}

/* The chessboard.js squares are positioned;  add ::before / ::after for
 * the highlight + dot indicators so the piece image stays clickable. */
.bspm-board .square-55d63 { position: relative; }

.bspm-board .sq-selected::before,
.bspm-board .sq-trace::before,
.bspm-board .sq-hlast::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.bspm-board .sq-selected::before {
  background: radial-gradient(circle, rgba(241, 92, 10, .50), rgba(200, 67, 11, .30));
  box-shadow: inset 0 0 0 2px rgba(255, 154, 56, .85);
}
.bspm-board .sq-hlast::before  { background: rgba(245, 158, 11, .22); }
.bspm-board .sq-trace::before  { background: rgba(245, 158, 11, .30);
                                 box-shadow: inset 0 0 0 2px rgba(252, 211, 77, .70); }

.bspm-board .sq-dot::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 30%; height: 30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, .70), rgba(67, 56, 202, .40));
  pointer-events: none;
  z-index: 8;
}
.bspm-board .sq-capture::after {
  content: '';
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 3px solid rgba(241, 92, 10, .80);
  pointer-events: none;
  z-index: 8;
}
.bspm-board .sq-dot,
.bspm-board .sq-capture { cursor: pointer; }

/* Red shake on illegal-or-wrong move. */
.bspm-board .sq-wrong { animation: bspm-shk .35s ease; }
/* Whole-board shake (chessground path: JS toggles .is-wrong on the wrap). */
.bspm-board-wrap.is-wrong { animation: bspm-shk .35s ease; }
.bspm-board .sq-wrong::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(220, 38, 38, .35);
  box-shadow: inset 0 0 0 3px rgba(220, 38, 38, .85);
  pointer-events: none;
  z-index: 7;
}
@keyframes bspm-shk {
  0%,100% { transform: translateX(0); }
  30%     { transform: translateX(-5px); }
  70%     { transform: translateX(5px); }
}

/* Green flash on correct puzzle move. */
.bspm-board .sq-right::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(16, 185, 129, .35);
  box-shadow: inset 0 0 0 3px rgba(16, 185, 129, .85);
  pointer-events: none;
  z-index: 7;
  animation: bspm-pulse .8s ease;
}
@keyframes bspm-pulse {
  0%   { opacity: 0; transform: scale(.9); }
  40%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

/* Game-over / puzzle-solved / puzzle-failed overlay. */
.bspm-board-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  background: rgba(15, 23, 42, .88);
  backdrop-filter: blur(4px);
  color: white;
  border-radius: 12px;
  z-index: 20;
  padding: 1rem;
}
.bspm-board-overlay.is-open { display: flex; }
.bspm-board-overlay .ov-icon  { font-size: 3rem; line-height: 1; margin-bottom: .5rem; }
.bspm-board-overlay .ov-title { font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-weight: 800; font-size: 1.75rem; line-height: 1.1; }
.bspm-board-overlay .ov-sub   { margin-top: .5rem; font-size: .9rem; opacity: .9; max-width: 26ch; }
.bspm-board-overlay .ov-actions { margin-top: 1.25rem; display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.bspm-board-overlay .ov-btn {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .55rem 1rem;
  border-radius: .65rem;
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
  text-decoration: none;
  border: 0;
  transition: transform .15s ease;
}
.bspm-board-overlay .ov-btn:hover { transform: translateY(-1px); }
.bspm-board-overlay .ov-btn-primary { background: #ff7a14; color: #1f2230; }
.bspm-board-overlay .ov-btn-ghost   { background: rgba(255,255,255,.08); color: white; border: 1px solid rgba(255,255,255,.2); }
.bspm-board-overlay.is-good { background: linear-gradient(160deg, rgba(5,46,22,.92), rgba(15,23,42,.92)); }
.bspm-board-overlay.is-bad  { background: linear-gradient(160deg, rgba(127,29,29,.92), rgba(15,23,42,.92)); }
.bspm-board-overlay.is-picker { background: rgba(15, 23, 42, .82); }

/* ── Humanoid "Explain" panel (DecodeChess-style) ───────────────────── */
.bspm-extab { background: #f1f1ee; color: #5f5e5a; border: 0; cursor: pointer; }
.bspm-extab.is-active { background: #ff7a14; color: #1f2230; }
.bspm-explain .bspm-ex-line { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; padding: 4px 6px; border-radius: 8px; line-height: 1.45; }
.bspm-explain .bspm-ex-line + .bspm-ex-line { margin-top: 2px; }
.bspm-explain .bspm-ex-line:hover { background: #fff7ed; }
.bspm-explain .bspm-ex-line.is-active { background: #fff7ed; box-shadow: inset 0 0 0 1px #fed7aa; }
.bspm-explain .bspm-ex-line.is-soft { opacity: .8; }
.bspm-explain .bspm-ex-line-empty { color: #9ca3af; cursor: default; }
.bspm-explain .bspm-ex-dot { width: 6px; height: 6px; border-radius: 50%; background: #ff7a14; margin-top: 7px; flex: 0 0 auto; }
.bspm-explain .bspm-ex-line-empty .bspm-ex-dot { display: none; }
.bspm-explain-card.is-locked .bspm-explain,
.bspm-explain-card.is-locked .bspm-explain-tabs { filter: blur(3px); opacity: .5; pointer-events: none; }

/* Live score line on the solved card (points / rating delta / streak). */
.bspm-board-overlay .ov-score {
  margin-top: .85rem;
  font-size: .95rem;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .5rem;
  align-items: center;
  justify-content: center;
  min-height: 1.2em;
}
.bspm-board-overlay .ov-score b { font-weight: 800; }
.bspm-board-overlay .ov-score .ov-pts { color: #fde68a; font-size: 1.15rem; }
.bspm-board-overlay .ov-score .ov-up   { color: #6ee7b7; font-weight: 800; }
.bspm-board-overlay .ov-score .ov-down { color: #fca5a5; font-weight: 800; }
.bspm-board-overlay .ov-score .ov-score-dim { opacity: .6; font-style: italic; }
.bspm-board-overlay .ov-score .ov-score-cta { flex-basis: 100%; margin-top: .35rem; }
.bspm-board-overlay .ov-score .ov-score-cta a {
  color: #fcd34d; font-weight: 800; text-decoration: underline; text-underline-offset: 2px;
}
.bspm-board-overlay .ov-score .ov-lvl {
  display: inline-flex; align-items: center; gap: .25rem;
  background: rgba(255,255,255,.12); border-radius: 999px;
  padding: .1rem .55rem; font-weight: 800;
}
.bspm-board-overlay .ov-score .ov-levelup {
  flex-basis: 100%; margin-top: .5rem; padding: .45rem .7rem;
  background: linear-gradient(90deg, rgba(245,158,11,.25), rgba(245,158,11,.08));
  border: 1px solid rgba(245,158,11,.5); border-radius: 10px;
  color: #fde68a; font-weight: 800; animation: bspm-pulse .9s ease;
}

/* Promotion picker — Q / R / B / N choices stacked or in a 2×2. */
.bspm-promo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(80px, 1fr));
  gap: .5rem;
  margin-top: 1rem;
  max-width: 240px;
}
.bspm-promo-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  padding: .5rem;
  border-radius: .75rem;
  background: rgba(255, 255, 255, .92);
  border: 0;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}
.bspm-promo-btn:hover { background: #fff; transform: translateY(-2px); }
.bspm-promo-btn img   { width: 44px; height: 44px; display: block; }
.bspm-promo-btn span  { font-size: .75rem; font-weight: 700; color: #1f2230; }

/* Manual-copy PGN fallback (clipboard API blocked / unavailable). */
.bspm-pgn-textarea {
  width: 100%;
  max-width: 28rem;
  min-height: 8rem;
  margin-top: 1rem;
  padding: .5rem .65rem;
  background: rgba(255,255,255,.95);
  color: #1f2230;
  border: 0;
  border-radius: .5rem;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: .75rem;
  line-height: 1.4;
  resize: vertical;
}

/* The piece being dragged should float above every square. */
.bspm-board .piece-417db { z-index: 10; }

/* Side panel — move list, evaluation, controls. */
.bspm-side {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.bspm-move-list {
  max-height: 14rem;
  overflow-y: auto;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .85rem;
  line-height: 1.45;
  background: #f6f7f9;
  border: 1px solid #eceef2;
  border-radius: .65rem;
  padding: .6rem .75rem;
}
.bspm-move-grid {
  display: grid;
  grid-template-columns: 2em 1fr 1fr;
  column-gap: .5rem;
  row-gap: 1px;
}
.bspm-move-grid .ply-no { color: #8690a1; font-weight: 600; font-variant-numeric: tabular-nums; }
.bspm-move-grid .san {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-weight: 600;
  color: #1f2230;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.bspm-move-grid .san.is-last {
  background: linear-gradient(90deg, rgba(255, 154, 56, .35), rgba(255, 154, 56, .15));
  box-shadow: inset 0 0 0 1px rgba(241, 92, 10, .35);
  color: #7f2f12;
}
.bspm-move-grid .ml-pending { color: #b1b8c4; padding-left: 6px; }
.bspm-move-list .ml-empty { color: #8690a1; font-size: .85rem; text-align: center; padding: .5rem 0; }

/* Status / hint strip below the board. */
.bspm-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .5rem;
  font-size: .85rem;
  color: #525a6f;
  font-weight: 600;
}
.bspm-status .badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  font-size: .75rem;
}
.bspm-status .badge-side  { background: #fff8ed; color: #c8430b; border: 1px solid #ffdba8; }
.bspm-status .badge-mode  { background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; }


/* ── Stockfish analysis panel · top-3 candidate lines (Lichess-style) ── */
.bspm-analysis {
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow .3s ease;
}
.bspm-analysis-flash {
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .55), 0 0 24px rgba(245, 158, 11, .25);
  border-radius: 14px;
}
.bspm-anline {
  display: grid;
  grid-template-columns: 64px 1fr 38px;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.35;
  transition: background .15s ease, border-color .15s ease;
}
.bspm-anline:hover { background: #fff; border-color: #cbd5e1; }
.bspm-anline-empty { background: #f1f5f9; border-style: dashed; }
.bspm-anline-empty .bspm-aneval,
.bspm-anline-empty .bspm-anpv { color: #94a3b8; font-style: italic; }
.bspm-aneval {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 800;
  font-size: 13px;
  text-align: center;
  padding: 2px 6px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #475569;
}
.bspm-aneval-win  { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.bspm-aneval-lose { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.bspm-aneval-eq   { background: #f1f5f9; border-color: #cbd5e1; color: #475569; }
.bspm-anpv {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: #0f172a;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bspm-andepth {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Smaller, less-blocking game-over banner (sits at the top of the
   board, doesn't cover the position so the user can analyse it) ──── */
.bspm-board-overlay.is-banner {
  position: absolute;
  inset: auto 0 auto 0;
  top: 0;
  height: auto;
  padding: 10px 14px;
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 12px 12px 0 0;
  z-index: 20;
  backdrop-filter: blur(4px);
}
.bspm-board-overlay.is-banner .bspm-over-icon { font-size: 18px; }
.bspm-board-overlay.is-banner .bspm-over-title { font-size: 14px; font-weight: 800; }
.bspm-board-overlay.is-banner .bspm-over-sub { font-size: 11px; opacity: .8; }
.bspm-board-overlay.is-banner .bspm-over-actions button {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 8px;
}


/* ── Analysis-card lock state ────────────────────────────────────────
   The candidates panel hides its live engine lines during active play
   (the player would just copy Stockfish's suggestion). Lock removed by
   the analyseGame() JS method after the user explicitly opts in OR
   automatically when the game ends. */
.bspm-analysis-card.is-locked .bspm-analysis-lines,
.bspm-analysis-card.is-locked .bspm-analysis-footer { display: none; }
.bspm-analysis-card:not(.is-locked) .bspm-analysis-teaser { display: none; }
.bspm-analysis-teaser { padding: 4px 2px; }


/* ── Move list · clickable plies + preview navigation ────────────────── */
.bspm-move-grid .san {
  cursor: pointer;
  border-radius: 4px;
  padding: 1px 4px;
  transition: background .12s ease, color .12s ease;
}
.bspm-move-grid .san:hover  { background: #f1f5f9; }
.bspm-move-grid .san:focus  { outline: 2px solid rgba(245, 158, 11, .55); outline-offset: 1px; }
.bspm-move-grid .san.is-last     { background: #fff8ed; color: #b45309; font-weight: 700; }
.bspm-move-grid .san.is-current  { background: #f59e0b; color: #fff;    font-weight: 800; box-shadow: 0 0 0 2px rgba(245, 158, 11, .25); }
.bspm-move-grid .san.is-last.is-current { background: #d97706; }

.bspm-ml-live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .12s ease, transform .12s ease;
  border: 0;
}
.bspm-ml-live:hover  { background: #1e293b; transform: translateY(-1px); }
.bspm-ml-live:focus  { outline: 2px solid rgba(245, 158, 11, .55); outline-offset: 2px; }


/* ── Analysis panel · terminal-position state ────────────────────────── */
.bspm-anline-terminal {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border: 1px solid #fcd34d;
  color: #92400e;
  grid-template-columns: 32px 1fr 38px;
}
.bspm-anline-terminal .bspm-aneval {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
  font-size: 16px;
}
.bspm-anline-terminal .bspm-anpv {
  white-space: normal;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
}


/* ──────────────────────────────────────────────────────────────────────
 * Play shell — the lichess-style board-hero + single-rail layout used by
 * puzzles / book puzzles / vs-Stockfish (partials/_play_shell.php).
 * Everything here is SCOPED under .play-shell so teaser/homepage boards
 * keep their old sizing.
 * ────────────────────────────────────────────────────────────────────── */

/* Layout lives HERE (not Tailwind) because the project ships a purged
 * tailwind.css that omits arbitrary/responsive utilities like lg:flex-row,
 * lg:w-[300px], max-w-[1080px]. Keeping the shell layout in this always-loaded
 * stylesheet makes it self-contained and rebuild-proof. */
.play-shell .play-topbar {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px;
  height: 48px;
  display: flex;
  align-items: center;
}
.play-shell .play-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
}
.play-shell .play-board-col { width: 100%; min-width: 0; }
.play-shell .play-rail      { width: 100%; }
@media (min-width: 1024px) {
  .play-shell .play-wrap {
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
    justify-content: center;
  }
  /* flex-basis 0 (not auto): the eval-bar grid has no intrinsic width, so an
   * auto basis would collapse the column to min-content. Grow purely by flex. */
  .play-shell .play-board-col { flex: 1 1 0; max-width: 680px; }
  .play-shell .play-rail {
    width: 300px;
    flex: 0 0 300px;
    position: sticky;
    top: 16px;
  }
}

/* The hero/meta bands are gone on these pages, so the board may grow — but
 * stay conservative: the play-shell sits BELOW the global site navbar, and the
 * glyph row + jump bar live in the rail (desktop) / under the board (mobile).
 * Reserve navbar + top-bar + breathing room. */
.play-shell .bspm-board-wrap { max-width: min(600px, calc(100vh - 170px)); }
@media (min-width: 1280px) {
  .play-shell .bspm-board-wrap { max-width: min(660px, calc(100vh - 160px)); }
}
/* Phones/tablets: board near-full-width but never so tall the rail's first
 * row drops below the fold. */
@media (max-width: 1023px) {
  .play-shell .bspm-board-wrap { max-width: min(94vw, calc(100vh - 215px)); }
}

/* Rail move list: bounded, scrolls on its own. */
.play-rail .bspm-ml-rail { max-height: 38vh; overflow-y: auto; }
@media (max-width: 1023px) {
  .play-rail .bspm-ml-rail { max-height: 22vh; }
}

/* Quiet icon buttons in the jump bar (lichess-style: flat, no pills). */
.play-shell .play-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #64748b;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.play-shell .play-ic:hover { background: #f1f5f9; color: #0f172a; }
.play-shell .play-ic:focus-visible { outline: 2px solid rgba(245, 158, 11, .55); outline-offset: 1px; }
.play-shell .play-burger.is-open { background: #0f172a; color: #fff; }

/* Quiet glyph action buttons (the page builds these with .play-act). */
.play-shell .play-act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: #475569;
  border-radius: 8px;
  padding: 6px 9px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.play-shell .play-act:hover { background: #f1f5f9; }
.play-shell .play-act .play-gl { font-size: 16px; line-height: 1; }
.play-shell .play-act.is-prime { color: #b45309; }
.play-shell .play-act.is-prime:hover { background: #fff7ed; }
.play-shell .play-act.is-danger { color: #be123c; }
.play-shell .play-act.is-danger:hover { background: #fff1f2; }

/* Timer chip in the puzzle action row. */
.play-shell .play-timer {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #0f172a;
  color: #fff;
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* On the play shell the board card holds only the board (status is in the
 * rail context strip) — kill the old stacked-card padding rhythm remnants. */
.play-shell .bspm-status { margin-top: .4rem; }