/* ==========================================================================
   pig.css — pig's arena (src/assets/js/games/pig/view.mjs), inside the table
   games.css draws: the die (games.css .g-die), the turn's running total, and
   roll / hold. Every class here is .pig-*.
   ========================================================================== */

.pig {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(14 * var(--s, 1px));
}
/* The die, a little larger than the shared piece: it is the whole board here. */
.pig-die { --die: calc(84 * var(--s, 1px)); }
/* A 1 ends the turn and takes its total: the one face that is a mistake, so the one that goes red. */
.pig-die--bust {
  color: var(--red);
  border-color: var(--red);
}
/* Someone else's turn: their die and their total, stepped back so yours never looks live when it is not. */
.pig--watching .pig-die:not(.pig-die--bust) {
  color: var(--ink-muted);
  border-color: var(--hairline-soft);
}
.pig--watching .pig-pot-n { color: var(--ink-muted); }
/* The turn's total: the biggest number on the screen, its label beside it. */
.pig-pot {
  display: flex;
  align-items: baseline;
  gap: 1ch;
}
.pig-pot-n {
  font-size: calc(40 * var(--s, 1px));
  font-weight: 500;
  line-height: 1;
}
/* What the last roll added, in green beside the total; its width is kept so the total never shifts. */
.pig-add {
  min-inline-size: 3ch;
  font-size: calc(15 * var(--s, 1px));
  font-weight: 500;
  color: var(--green);
}
/* What holding would bank; a reserved line, so the buttons never move. */
.pig-sum {
  min-height: calc(20 * var(--s, 1px));
  text-wrap: pretty;
}
/* Holding now would win: the line says so, and says it in green. */
.pig-sum--wins {
  color: var(--green);
  font-weight: 500;
}
.pig-keys {
  display: flex;
  gap: calc(10 * var(--s, 1px));
  margin-top: calc(6 * var(--s, 1px));
}
.pig-btn {
  position: relative; /* the key hint in its corner */
  min-width: calc(104 * var(--s, 1px));
  min-height: calc(48 * var(--s, 1px));
  font-size: calc(15 * var(--s, 1px));
}
/* The key that presses the button, in its corner, where a keyboard is likely (as on 24's tiles). */
.pig-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;
}
@media (hover: hover) and (pointer: fine) {
  .pig-btn[data-key]::before { display: block; }
}