/* THE BOX SCORE TABLE, scoped under `.bxs` so it can live BOTH on the
 * standalone /boxscore page and inside the game's Reader without its generic
 * class names (.e, .dom, .band, .mv, .hand, .ch) colliding with the game's.
 * Linked by boxscore.html and index.html; the page shell (body, mast, h1)
 * stays inline in boxscore.html. Tokens only, so it reskins with the game. */

.bxs .sub { color: rgb(var(--ui-text-400-rgb)); margin: 0 0 1.3rem; font-size: 1.02rem; line-height: 1.5; }
.bxs .sub b { color: rgb(var(--ui-text-200-rgb)); font-weight: 600; }
.bxs .sub .won  { color: rgb(var(--ui-live-rgb, var(--ui-accent-rgb))); }
.bxs .sub .lost { color: var(--state-harm); }
.bxs .sub .live { color: rgb(var(--ui-live-rgb, var(--ui-accent-rgb))); }
.bxs .hand__lock { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgb(var(--ui-text-600-rgb) / .7); font-style: normal; }
.bxs .legend__note { margin-left: auto; color: rgb(var(--ui-text-600-rgb)); font-style: italic; }

.bxs .legend { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center;
  font-size: .78rem; color: rgb(var(--ui-text-600-rgb)); margin: 0 0 .7rem; }
.bxs .legend .e { margin-right: .3rem; }
.bxs .legend .hint { margin-left: auto; cursor: pointer; text-decoration: underline dotted;
  text-underline-offset: 3px; }

.bxs .e { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .04em;
  text-transform: uppercase; padding: .05rem .3rem; border-radius: .2rem; white-space: nowrap; }
.bxs .e--ruin { color: rgb(var(--ui-text-200-rgb)); box-shadow: inset 0 0 0 1px rgb(var(--ui-text-600-rgb) / .5); }
.bxs .e--ward { color: rgb(var(--ui-text-400-rgb)); box-shadow: inset 0 0 0 1px rgb(var(--ui-text-600-rgb) / .35); }
.bxs .e--note { color: rgb(var(--ui-live-rgb, var(--ui-accent-rgb))); }
.bxs .e--paid { color: var(--state-harm); }

.bxs .scroll { overflow-x: auto; border: 1px solid rgb(var(--ui-600-rgb)); border-radius: .6rem; }
.bxs table { border-collapse: collapse; width: auto; font-size: .9rem; }
.bxs thead th {
  position: sticky; top: 0; z-index: 2;
  background: rgb(var(--ui-800-rgb)); color: rgb(var(--ui-text-600-rgb));
  font-family: var(--font-mono); font-weight: 500;
  font-size: .58rem; letter-spacing: .12em; text-transform: uppercase;
  text-align: left; padding: .55rem .6rem; white-space: nowrap;
  border-bottom: 1px solid rgb(var(--ui-600-rgb));
}
.bxs th.n, .bxs td.n { text-align: center; font-variant-numeric: tabular-nums; }
.bxs tbody td { padding: .5rem .6rem; border-bottom: 1px solid rgb(var(--ui-600-rgb) / .5);
  vertical-align: top; }
.bxs tr.mv { cursor: pointer; transition: background .1s; }
.bxs tr.mv:hover td { background: rgb(var(--ui-text-500-rgb) / .16); }
/* The row you clicked open, held lit so you know which one you are reading.
   The accent bar goes on the FIRST cell only -- on every td it drew a line at
   every column border. */
.bxs tr.mv.open td { background: rgb(var(--ui-text-500-rgb) / .12); }
.bxs tr.mv.open td:first-child { box-shadow: inset 2px 0 0 rgb(var(--ui-live-rgb, var(--ui-accent-rgb))); }
.bxs tr.mv.open:hover td { background: rgb(var(--ui-text-500-rgb) / .2); }
.bxs .c-mv { color: rgb(var(--ui-text-600-rgb)); font-variant-numeric: tabular-nums; }
.bxs .c-by { color: rgb(var(--ui-text-400-rgb)); white-space: nowrap; }
.bxs .c-sub { color: rgb(var(--ui-text-600-rgb)); font-style: italic; }

.bxs tr.band td { background: rgb(var(--ui-800-rgb)); padding: .5rem .6rem; }
.bxs .band__name { font-weight: 600; color: rgb(var(--ui-text-200-rgb)); margin-right: .6rem; }
.bxs .band__meta { font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--ui-text-600-rgb)); }

.bxs .play__cards { font-weight: 600; letter-spacing: .02em; }
.bxs .calc { margin-top: .25rem; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }

.bxs .dom { display: flex; align-items: center; gap: .45rem; white-space: nowrap; }
.bxs .bar { display: inline-block; width: 3.4rem; height: .42rem; border-radius: .42rem;
  background: rgb(var(--ui-600-rgb)); overflow: hidden; }
.bxs .bar i { display: block; height: 100%; background: rgb(var(--ui-text-400-rgb)); }
.bxs .domn { font-variant-numeric: tabular-nums; color: rgb(var(--ui-text-200-rgb)); }
.bxs .domx { color: rgb(var(--ui-text-600-rgb)); font-size: .8em; }
.bxs .fate { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em;
  text-transform: uppercase; }
.bxs .fate--good { color: rgb(var(--ui-live-rgb, var(--ui-accent-rgb))); }
.bxs .fate--rust { color: var(--state-harm); }
.bxs tr.killed td { border-bottom-color: rgb(var(--ui-text-600-rgb) / .4); }

.bxs .hand__n { font-variant-numeric: tabular-nums; color: rgb(var(--ui-text-600-rgb)); }
.bxs .hand__c { display: none; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.bxs tr.open .hand__c, body.all .bxs .hand__c { display: flex; }
.bxs .ch { font-size: .82rem; letter-spacing: .01em; color: var(--suit-dim); }
.bxs .ch.is-red { color: var(--suit-bright); }

.bxs .note-bad { border: 1px solid var(--state-harm); border-radius: .6rem; padding: 1rem 1.1rem;
  color: rgb(var(--ui-text-400-rgb)); }
.bxs .note-bad a { color: rgb(var(--ui-live-rgb, var(--ui-accent-rgb))); }

@media (max-width: 40rem) { .bxs .bar { width: 2.2rem; } }

/* ITEM 6: separate the Grave column from the first seat (hand) column. */
.bxs thead th:nth-child(7), .bxs tbody td:nth-child(7) { padding-right: 1.4rem; }
.bxs thead th:nth-child(8), .bxs tbody td:nth-child(8) { padding-left: 1.1rem; }

/* ITEM 4: NO table-layout:fixed. It made Play & result the one flexible
   column, so on a wide screen it absorbed ALL the leftover width and left a
   wide empty band before Dominion. Natural (auto) sizing keeps every column at
   its content width instead. The show/hide jump is stopped at the SEAT columns
   only: the chips wrap inside a fixed box, and the cell holds a min-width, so
   revealing them fills the box rather than growing the column. */
.bxs .hand__c { width: 7rem; }
.bxs td.hand, .bxs thead th:nth-child(n+8) { min-width: 10.5rem; }
/* Generous, centred numeric columns -- the numbers breathe (a lot of them) and
   the table fills more of a wide screen instead of hugging the left. Play &
   result stays content-width, so no empty band opens before Dominion. */
.bxs thead th:nth-child(4), .bxs tbody td:nth-child(4) { min-width: 12.5rem; }
.bxs thead th:nth-child(5), .bxs tbody td:nth-child(5),
.bxs thead th:nth-child(6), .bxs tbody td:nth-child(6),
.bxs thead th:nth-child(7), .bxs tbody td:nth-child(7) { min-width: 7.5rem; }

/* ITEMS 2 + 3: on the win-screen embed (`.rd[data-end]`) the TABLE scrolls
   inside `.scroll` rather than the whole reader body -- so the descent summary
   and "show / hide all hands" stay in view above it, and the column headers
   (already `position: sticky; top: 0`) stick to the top of the scroll instead
   of scrolling away with it. Gazing and the standalone page are untouched. */
.rd[data-end] .rd__box { max-height: none; overflow: visible; }
.rd[data-end] .bxs .scroll { max-height: 28rem; }

/* THE TABLE READS BIGGER WHEN THE SCREEN HAS THE ROOM. The box score is mostly
   numbers, and on a wide display the body can grow without cramping -- the same
   relief a browser zoom gives, done automatically. The fixed column widths are
   in rem, so they hold while the body font steps up. */
@media (min-width: 80rem) {
  .bxs table { font-size: 1.12rem; }
  .bxs thead th { font-size: .64rem; }
  .bxs .ch { font-size: 1rem; }
  .bxs .e, .bxs .fate { font-size: .7rem; }
}
@media (min-width: 108rem) {
  .bxs table { font-size: 1.2rem; }
  .bxs thead th { font-size: .68rem; }
  .bxs .ch { font-size: 1.06rem; }
}