/* ==========================================================================
   liars-dice.css — liar's dice's arena (src/assets/js/games/liars-dice/view.mjs),
   inside the table games.css draws: the others' dice face down, the standing bid,
   your own dice, and the turn's controls — a quantity, a face, liar or the bid.
   The dice are the table games' own (games.css .g-die); this sheet sizes and
   places them. Every class here is .ld-*.
   ========================================================================== */

/* The table from your seat, top to bottom: the others, the bid, your dice, your turn. Each of the
   four keeps its height whatever the round is doing (a die face down or face up is the same tile, a
   line that has nothing to say still holds its place), so nothing above the controls ever jumps. */
.ld {
  /* A key of the picker, and the room under it for the key that presses it (none without a keyboard). */
  --ld-key: calc(48 * var(--s, 1px));
  --ld-face: var(--ld-key);
  --ld-hint: 0px;
  /* The three sizes of die: in a row of the others, in the bid, in your own hand. */
  --ld-seat-die: calc(30 * var(--s, 1px));
  --ld-seat-gap: calc(4 * var(--s, 1px));
  --ld-bid-die: calc(48 * var(--s, 1px));
  --ld-hand-die: calc(76 * var(--s, 1px));
  --ld-hand-gap: calc(12 * var(--s, 1px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(24 * var(--s, 1px));
  font-family: var(--font-mono);
}
.ld > * { inline-size: 100%; }

/* A die face down. The shared tile lays its "?" over the pips' nine places as one more item of the
   same grid, which leaves those places no cell: they fall into rows of their own under it, and the
   mark ends up at the top of the tile. Here it is laid over the whole tile instead, out of the
   grid's flow, so it sits in the middle. */
.ld .g-die { position: relative; }
.ld .g-die--down::after {
  position: absolute;
  inset: 0;
  grid-area: auto;
  display: grid;
  place-items: center;
}
/* A die that counts — toward the standing bid, in a reveal's count, or as the face picked — is
   green and also drawn heavier: told from the rest by the weight of its outline, not by colour alone. */
.ld .g-die--mark { border-width: calc(2 * var(--s, 1px)); }
/* The place of a die that was lost: the tile gone, a small dot where it stood, so a row still shows
   how many dice it began with. */
.ld-die--gone {
  border-color: transparent;
  background: none;
}
.ld-die--gone::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: calc(5 * var(--s, 1px));
  block-size: calc(5 * var(--s, 1px));
  border-radius: 50%;
  background: var(--hairline);
}

/* ---- The others -----------------------------------------------------------
   One row a player, columns lined up down the rows: whose turn, their animal, their name, their
   dice. The name is the column that gives way (an ellipsis) when the row is too long for a phone. */
.ld-others {
  display: grid;
  grid-template-columns: 2ch auto minmax(0, auto) auto;
  justify-content: center;
  align-items: center;
  column-gap: 1ch;
  row-gap: calc(6 * var(--s, 1px));
  font-size: calc(13 * var(--s, 1px));
  line-height: calc(20 * var(--s, 1px));
  text-align: start;
}
.ld-seat { display: contents; }
/* Before a row, in a place of its own that is always there: ">" at the seat whose turn it is, and
   in a reveal "−1" at the seat the count cost a die. */
.ld-seat-mark {
  color: var(--green);
  font-weight: 500;
  text-align: end;
  white-space: nowrap;
}
.ld-seat-mark--lost { color: var(--ink); }
/* An animal is drawn, never wrapped or squeezed. */
.ld-seat-critter {
  white-space: pre;
  color: var(--ink-muted);
}
.ld-seat-name {
  min-width: 0;
  margin-inline-end: 1ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The seat whose turn it is: the mark before it, and its name in weight on a green rule — the same
   rule the standings above draw under it. */
.ld-seat--turn .ld-seat-name {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-decoration-thickness: calc(2 * var(--s, 1px));
  text-underline-offset: calc(4 * var(--s, 1px));
}
/* Out of the game: the row stays, dimmed, and says "out" or "left" where its dice stood. A seat
   nobody is at right now is dimmed the same way, the word "away" where its animal sits. */
.ld-seat--out > *,
.ld-seat--away > * { opacity: 0.55; }
/* A seat's dice: as many places as it began with, so every row is as wide and the eye counts down a
   column. Face down they are the shared hidden die; in a reveal they turn up where they lie. With
   one die each the column is one tile, so it is never narrower than the word that may come to stand
   there ("left"): nothing moves when a seat goes. */
.ld-seat-dice {
  --ld-seat-row: calc(var(--n, 5) * var(--ld-seat-die) + (var(--n, 5) - 1) * var(--ld-seat-gap));
  display: flex;
  align-items: center;
  gap: var(--ld-seat-gap);
  inline-size: max(4ch, var(--ld-seat-row));
  block-size: var(--ld-seat-die);
  white-space: nowrap;
}
.ld-seat-dice .g-die { --die: var(--ld-seat-die); }
.ld-seat--bare .g-die { display: none; }
/* Words where the dice stood take the room they need: "no dice read" is longer than three tiles. */
.ld-seat--bare .ld-seat-dice {
  inline-size: auto;
  min-inline-size: max(4ch, var(--ld-seat-row));
}
.ld-seat-said { color: var(--ink-muted); }
.ld-seat-said:empty { display: none; }

/* ---- The bid ----------------------------------------------------------------
   Whose claim it is, then the claim — a number in words and the die itself, the biggest words on
   the table — then two places that are always there: the dice in play and the bids before it, or,
   once the hands are counted, the count and what it cost. */
.ld-bid-by {
  block-size: calc(20 * var(--s, 1px));
  font-size: calc(13 * var(--s, 1px));
  line-height: calc(20 * var(--s, 1px));
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Your own bid, standing: yours until someone raises it or calls it. */
.ld-bid-by--mine {
  color: var(--green);
  font-weight: 500;
}
/* Called: who called whose bid is the news, in ink. */
.ld-bid-by--called { color: var(--ink); }
.ld-bid-main {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(14 * var(--s, 1px));
  block-size: calc(60 * var(--s, 1px));
  font-size: calc(36 * var(--s, 1px));
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.ld-bid-main .g-die { --die: var(--ld-bid-die); }
.ld-bid-none {
  color: var(--ink-muted);
  font-weight: 400;
}
.ld-bid-line {
  block-size: calc(20 * var(--s, 1px));
  font-size: calc(13 * var(--s, 1px));
  line-height: calc(20 * var(--s, 1px));
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The number the claim is weighed against, in ink: the dice in play, and later the count. */
.ld-bid-a {
  font-size: calc(14 * var(--s, 1px));
  color: var(--ink);
}
.ld-bid-b { font-size: calc(12 * var(--s, 1px)); }
/* Counted: the count in weight, and what it cost in ink under it. */
.ld--shown .ld-bid-a {
  font-size: calc(15 * var(--s, 1px));
  font-weight: 500;
}
.ld--shown .ld-bid-b {
  font-size: calc(13 * var(--s, 1px));
  color: var(--ink);
}

/* ---- Your dice ---------------------------------------------------------------
   The biggest thing in the arena: the dice you hold, in a row, in the middle. */
.ld-hand {
  display: flex;
  justify-content: center;
  gap: var(--ld-hand-gap);
  /* As tall with no die in it (a hand nobody could read) as with all of them. */
  min-block-size: var(--ld-hand-die);
}
.ld-hand--wild { min-block-size: calc(var(--ld-hand-die) + 18 * var(--s, 1px)); }
.ld-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4 * var(--s, 1px));
}
.ld-hand .g-die { --die: var(--ld-hand-die); }
/* Under a wild one, the word: a line that is there for every die when ones are wild (so the dice
   never move), and for none when they are not. */
.ld-cap {
  display: none;
  block-size: calc(14 * var(--s, 1px));
  font-size: calc(11 * var(--s, 1px));
  line-height: calc(14 * var(--s, 1px));
  color: var(--ink-muted);
}
.ld-hand--wild .ld-cap { display: block; }
.ld-note {
  min-block-size: calc(20 * var(--s, 1px));
  margin-top: calc(6 * var(--s, 1px));
  line-height: calc(20 * var(--s, 1px));
  text-wrap: pretty;
}
/* The count went against you. */
.ld-note--lost {
  color: var(--red);
  font-weight: 500;
}

/* ---- Your turn ----------------------------------------------------------------
   Two rows that hold their height: the picker (a stepper and the faces), then liar and the bid.
   In a reveal both stand empty, and the count down to the next round lies over their place. */
/* Keys are pressed, often twice quickly, and held on a phone: a second press never selects their
   text, a long one never raises the callout. */
.ld-turn {
  position: relative; /* the count down lies over the two rows */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.ld-pick {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: calc(20 * var(--s, 1px));
  min-block-size: calc(var(--ld-key) + var(--ld-hint));
}
/* The row holding one thing — the line for a player who is out: in its middle. */
.ld-pick--one {
  align-items: center;
  align-content: center;
}
.ld-word { text-wrap: pretty; }
.ld-step {
  display: flex;
  align-items: center;
}
.ld-step-n {
  min-inline-size: 2.4ch;
  font-size: calc(24 * var(--s, 1px));
  font-weight: 500;
  line-height: 1;
  text-align: center;
  transition: color 150ms ease;
}
/* A face that needed more dice took them: the quantity says so in green for a moment. */
.ld-step-n--bumped { color: var(--green); }
.ld-faces {
  display: flex;
  gap: calc(8 * var(--s, 1px));
}
/* A key of the picker: a hairline square, as 24's are. */
.ld-key {
  position: relative; /* the key hint under it */
  flex: none;
  inline-size: var(--ld-key);
  block-size: var(--ld-key);
  padding: 0;
  font-family: var(--font-mono);
  font-size: calc(22 * var(--s, 1px));
  line-height: 1;
  color: var(--ink);
  background: none;
  border: 1px solid var(--hairline);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    color 150ms ease,
    border-color 150ms ease;
}
/* A face's key is the die itself: the tile draws the square. */
.ld-face {
  inline-size: var(--ld-face);
  block-size: var(--ld-face);
  border: 0;
}
.ld-face > .g-die {
  --die: var(--ld-face);
  display: grid;
  pointer-events: none;
  transition:
    color 150ms ease,
    border-color 150ms ease,
    background-color 150ms ease;
}
/* The face being bid: green, filled a touch. */
.ld-face[aria-pressed="true"] > .g-die {
  color: var(--green);
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 10%, var(--bg));
}
/* Pink under the pointer, on a key that can be pressed — and the face being bid stays green there,
   since pressing it again changes nothing. */
@media (hover: hover) {
  .ld-step-btn:hover:not([aria-disabled="true"]) {
    color: var(--pink-text);
    border-color: var(--pink);
  }
  .ld-face:hover:not([aria-disabled="true"]) > .g-die {
    color: var(--pink-text);
    border-color: var(--pink);
  }
  .ld-face[aria-pressed="true"]:hover:not([aria-disabled="true"]) > .g-die {
    color: var(--green);
    border-color: var(--green);
  }
}
/* A control with nothing to do right now (not your turn, or no such bid): it keeps its place and the
   focus, and steps well back — grey and half as strong, so nothing that cannot be pressed looks as
   if it could. */
.ld-turn [aria-disabled="true"] {
  cursor: default;
  opacity: 0.5;
}
.ld-step-btn[aria-disabled="true"] {
  color: var(--ink-muted);
  border-color: var(--hairline-soft);
}
/* Not your turn, or nothing higher left to bid: the number waits with the keys round it. */
.ld-step-n--off {
  color: var(--ink-muted);
  opacity: 0.5;
}
.ld-acts {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(10 * var(--s, 1px));
  margin-top: calc(12 * var(--s, 1px));
  min-block-size: calc(48 * var(--s, 1px));
}
.ld-btn {
  position: relative; /* the key hint in its corner */
  min-inline-size: calc(104 * var(--s, 1px));
  min-block-size: calc(48 * var(--s, 1px));
  font-size: calc(15 * var(--s, 1px));
}
/* The bid's button says the bid, so it is as wide as the longest there is ("bid twelve 6s"). */
.ld-bid-btn { min-inline-size: calc(176 * var(--s, 1px)); }
/* Liar and the bid, with nothing to do right now: grey — and under the pointer too (the table's
   own buttons know only `disabled`, and would turn pink). */
.ld .ld-btn[aria-disabled="true"] {
  color: var(--ink-muted);
  border-color: var(--hairline-soft);
  cursor: default;
}
@media (hover: hover) {
  .ld .ld-btn[aria-disabled="true"]:hover {
    color: var(--ink-muted);
    border-color: var(--hairline-soft);
  }
}

/* The count down to the next round, in a reveal: over the place of the turn's two rows and in its
   middle, so the turn is as tall then as in the bidding with no sum of heights to keep in step.
   Words, then the seconds left as one digit the size of the bid's own words — the two things a
   reveal has to say — in a place one digit wide, so nothing beside it moves as it changes. It is
   not a control: no box, nothing that asks to be pressed; and when it is handed the focus of the
   controls it stands in for, it shows no ring (as the table's own screens do not). */
.ld-next {
  position: absolute;
  inset: 0;
  display: grid;
  grid-auto-flow: column;
  place-content: center;
  align-items: baseline;
  column-gap: 1ch;
  font-size: calc(15 * var(--s, 1px));
  line-height: 1;
  white-space: nowrap;
}
.ld-next:focus { outline: none; }
.ld-next-n {
  inline-size: 1ch;
  font-size: calc(36 * var(--s, 1px));
  font-weight: 500;
  text-align: center;
}
.ld-next-n:empty { display: none; }
/* No second to show — the hands are still being counted, or the table is late going on: the words
   alone, in grey. */
.ld-next--wait { color: var(--ink-muted); }

/* The keys, where a keyboard is likely (as on pig's buttons and 24's tiles): in the corner of liar
   and the bid; under the picker's keys, whose own faces are full. */
.ld-btn::before {
  content: attr(data-key) / "";
  position: absolute;
  inset-block-start: calc(5 * var(--s, 1px));
  inset-inline-start: calc(7 * var(--s, 1px));
  font-size: calc(11 * var(--s, 1px));
  font-weight: 400;
  line-height: 1;
  color: var(--ink-muted);
  display: none;
}
.ld-key::after {
  content: attr(data-key) / "";
  position: absolute;
  inset-block-start: calc(100% + 5 * var(--s, 1px));
  inset-inline: 0;
  font-size: calc(11 * var(--s, 1px));
  font-weight: 400;
  line-height: 1;
  color: var(--ink-muted);
  text-align: center;
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .ld { --ld-hint: calc(18 * var(--s, 1px)); }
  .ld-btn[data-key]::before,
  .ld-key[data-key]::after { display: block; }
  /* A button's word sits a little lower, clear of the key written in the corner above it
     ("enter" is as wide as the start of "bid four 6s"). */
  .ld-btn { padding-block: calc(13 * var(--s, 1px)) calc(5 * var(--s, 1px)); }
}

/* ---- Phones ------------------------------------------------------------------
   The same pieces, set a little closer: smaller dice in the others' rows, five of your own across
   the column, and the picker on two rows — the stepper, then the faces — so every key is a full
   thumb's width. */
@media (max-width: 600px) {
  .ld {
    --ld-seat-die: calc(24 * var(--s, 1px));
    --ld-seat-gap: calc(3 * var(--s, 1px));
    --ld-bid-die: calc(42 * var(--s, 1px));
    /* Five dice and four gaps inside the column (the window less the page's two 20px gutters),
       whatever the phone: 58px each from 362px up, less on a narrower one. */
    --ld-hand-gap: calc(8 * var(--s, 1px));
    --ld-hand-die: min(calc(58 * var(--s, 1px)), calc((100vw - 40px - 4 * var(--ld-hand-gap)) / 5));
    /* Six faces (ones not wild) and five gaps inside the same column. */
    --ld-face: min(var(--ld-key), calc((100vw - 40px - 40px) / 6));
    gap: calc(14 * var(--s, 1px));
  }
  /* The columns close up so that a fifteen-letter name ("the caterpillar") still fits beside the
     widest animal and five dice. */
  .ld-others {
    column-gap: 0.5ch;
    row-gap: calc(5 * var(--s, 1px));
  }
  .ld-seat-name { margin-inline-end: 0.3ch; }
  .ld-bid-by,
  .ld-bid-line {
    block-size: calc(18 * var(--s, 1px));
    line-height: calc(18 * var(--s, 1px));
  }
  .ld-bid-main {
    block-size: calc(50 * var(--s, 1px));
    font-size: calc(30 * var(--s, 1px));
    gap: calc(12 * var(--s, 1px));
  }
  /* The count and its verdict on one line ("there were only thirteen — the bid fails"), and under
     it what that cost, a twenty-letter name and all. */
  .ld--shown .ld-bid-a { font-size: calc(14 * var(--s, 1px)); }
  .ld--shown .ld-bid-b { font-size: calc(12 * var(--s, 1px)); }
  .ld-note {
    min-block-size: calc(18 * var(--s, 1px));
    margin-top: calc(4 * var(--s, 1px));
    line-height: calc(18 * var(--s, 1px));
  }
  .ld-pick {
    flex-wrap: wrap;
    align-content: flex-start;
    gap: calc(8 * var(--s, 1px) + var(--ld-hint)) calc(8 * var(--s, 1px));
    min-block-size: calc(2 * var(--ld-key) + 8 * var(--s, 1px) + 2 * var(--ld-hint));
  }
  .ld-step {
    flex: 0 0 100%;
    justify-content: center;
  }
  .ld-pick--one { align-content: center; }
  /* A player with no dice has no picker: the place of its two rows is one row, the same in the
     bidding (the line saying so) and in a reveal (the count down), so it never changes height either. */
  .ld--watching .ld-pick { min-block-size: calc(var(--ld-key) + var(--ld-hint)); }
  .ld-step-n { min-inline-size: 3ch; }
  .ld-acts { margin-top: calc(10 * var(--s, 1px)); }
  .ld-next-n { font-size: calc(30 * var(--s, 1px)); }

  /* Six dice each, the most a table may choose. Your own six go across the column as five do:
     58px each where the window has the room (from 428px), less on a narrower one — 51px at 390,
     49px at 375, 40px at 320. In the others' rows the six tiles sit a pixel closer, which is all
     it takes from 400px up for a fifteen-letter name to keep its place beside them. */
  .ld[data-dice="6"] {
    --ld-hand-die: min(calc(58 * var(--s, 1px)), calc((100vw - 40px - 5 * var(--ld-hand-gap)) / 6));
    --ld-seat-gap: calc(2 * var(--s, 1px));
  }
}
/* Under 400px a seat's six tiles are 20px each: a row no wider than its five were, so the names
   keep the room they had (at 375px, all of "the caterpillar"). At that size a die's heavier
   outline, when it counts, is taken out of its margin and not out of the room its pips have: they
   stay on the same 4px grid as the pips of the dice beside it, round and apart. */
@media (max-width: 399px) {
  .ld[data-dice="6"] { --ld-seat-die: calc(20 * var(--s, 1px)); }
  .ld[data-dice="6"] .ld-seat-dice .g-die--mark { padding: calc(var(--die) * 0.15 - (2 * var(--s, 1px) - 1px)); }
}