/* The pieces both displays show, styled once: the chip legend (.lg), the payout board (.pb) and the bounty line (.bt).
   Built by js/shared/display.js; loaded by tv.html and index.html before their own stylesheets, which place and size
   these for their screen. Spacing uses margins, not flex "gap", which older TV browsers (an LG's, for one) ignore. */
.lg {
  display: flex;
  align-items: center;
  font-family: var(--display);
}
.lg > :not(:last-child) {
  margin-right: 0.5em;
}
.lg-chip {
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--chip);
  border: 0.17em dashed rgba(255, 255, 255, 0.85);
  box-shadow:
    0 0 0 0.07em rgba(255, 255, 255, 0.35),
    inset 0 0 0 0.22em var(--chip);
  flex: none;
}
.lg-v {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.lg-n {
  color: var(--ivory-dim);
  font-size: 0.6em;
}
.lg.up {
  opacity: 0.55;
}
.lg.up .lg-v {
  text-decoration: line-through;
}
.lg.up .lg-n {
  color: var(--amber);
  opacity: 1;
}
.pb-head {
  width: 100%;
  color: var(--ivory-dim);
  font-size: 0.8em;
  text-wrap: balance; /* if it needs two lines, two even ones (ignored by older browsers) */
}
.pb {
  display: flex;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pb > :not(:last-child) {
  margin-right: 0.45em;
}
.pb-place {
  color: var(--ivory-dim);
  min-width: 2.6em;
}
.pb-amt {
  font-weight: 700;
}
.pb-name {
  color: var(--ivory-dim);
  font-size: 0.72em;
}
.pb.done {
  opacity: 0.5;
}
.pb.done .pb-amt {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.pb.pb-next .pb-place,
.pb.pb-next .pb-amt,
.pb.pb-next .pb-name {
  color: var(--amber);
  opacity: 1;
}
.bt-head {
  color: var(--ivory-dim);
  font-size: 0.8em;
}
.bt {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.bt-amt {
  font-weight: 700;
  color: var(--amber);
}
.bt-name {
  color: var(--ivory-dim);
  font-size: 0.85em;
}
.bt-rot {
  display: inline-flex;
  align-items: baseline;
}
.bt > :not(:last-child) {
  margin-right: 0.4em;
}
/* within a rotating name, the space after the name (set at 0.85em) is still 0.4em of the line's own size */
.bt-rot > .bt-name {
  margin-right: calc(0.4em / 0.85);
}
.bt-name.rot {
  animation: bt-fade 0.6s ease-out;
}
.bt-of {
  color: var(--ivory-dim);
  font-size: 0.55em;
  opacity: 0.8;
}
@keyframes bt-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bt-name.rot {
    animation: none;
  }
}
/* the stats: the total in "11 of 24" smaller, so the players left stand out; the average stack in big blinds on a line
   of its own */
.v-of {
  font-size: 0.55em;
  font-weight: 500;
  color: var(--ivory-dim);
}
.k-sub {
  display: block;
}