/* Everything else is Bootstrap. This file is only the card row and the dialog. */

main { max-width: 56rem; }

/* Nine cards share one line: no wrapping, each takes an equal slice. */
#cards .card-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 4.75rem 0.25rem;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  color: chartreuse;
}

/* Bootstrap's own hover/active rules would recolour the value otherwise. */
#cards .card-btn:hover,
#cards .card-btn:active,
#cards .card-btn:disabled {
  color: chartreuse;
}

@media (max-width: 768px) {
  #cards .card-btn { padding: 3rem 0.15rem; font-size: 1.45rem; }
}

@media (max-width: 480px) {
  #cards { gap: 0.25rem !important; }
  #cards .card-btn { padding: 2rem 0.1rem; font-size: 1rem; }
}

/* Revealed value gets its own line under the name, centred in the chip. */
#players .value {
  display: block;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
  color: chartreuse;
}

/* No focus ring after a mouse click, but keyboard focus stays visible. */
#reveal:focus:not(:focus-visible) {
  box-shadow: none;
}

#players .pending { opacity: 0.55; }

#players .person {
  opacity: 0.6;
  vertical-align: -2px;
}

dialog {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 22rem;
}

dialog::backdrop { background: rgb(0 0 0 / 0.5); }