.table-status {
  margin: 20px 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8faf5;
}
.table-status-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 13px;
}
.table-status-heading h3 { margin: 0; font-size: 13px; color: var(--ink); }
.table-status-badges { display: flex; flex-wrap: wrap; gap: 7px; }
.table-state-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid #dde5d9;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: .35px;
  background: #fff;
  color: #576252;
}
.table-state-badge svg { width: 14px; height: 14px; }
.table-state-badge.open { color: #234f3a; background: #e7f0df; border-color: #cadcbe; }
.table-state-badge.allocated { color: #325141; background: #eef3ed; }
.table-state-badge.in-hand { color: #68400c; background: #fff0ce; border-color: #e8c781; }
.table-state-badge.no-hand { color: #656e60; }
.table-in-hand-player { margin: 0 0 13px; font-size: 12px; color: #68400c; }
.table-allocations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.table-allocation {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 9px;
  align-items: center;
  padding: 12px;
  border: 1px solid #e0e6db;
  border-radius: 8px;
  background: #fff;
  min-width: 0;
}
.table-allocation.at-table { border-color: #a8c79d; box-shadow: inset 3px 0 #426849; }
.allocation-ball {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid #c4bd7c;
  border-radius: 50%;
  background: #d6af39;
  grid-row: 1 / span 2;
}
.allocation-ball.striped { background: linear-gradient(#faf9f0 0 25%, #d6af39 25% 75%, #faf9f0 75%); }
.allocation-ball.unassigned { background: #f2f4ed; border-style: dashed; border-color: #bbc4b5; }
.allocation-ball > span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 17px;
  width: 17px;
  border-radius: 50%;
  background: #fffdf4;
  color: #3a4136;
  font-size: 10px;
  font-weight: 750;
}
.allocation-player { min-width: 0; }
.allocation-player strong { display: block; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.allocation-player > span { display: block; margin-top: 3px; font-size: 11px; color: #65715f; line-height: 1.5; overflow-wrap: anywhere; }
.allocation-group { grid-column: 2; margin-top: 4px; color: #767e6f; font-size: 10px; font-weight: 700; letter-spacing: .7px; }
.allocation-group.assigned { color: #31553d; }
@media (max-width: 560px) {
  .table-status { padding: 13px; }
  .table-status-heading { align-items: flex-start; }
  .table-status-badges { width: 100%; }
  .table-allocations { grid-template-columns: minmax(0, 1fr); }
  .table-allocation { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .allocation-ball { grid-row: auto; }
  .allocation-group { grid-column: 3; margin-top: 0; margin-left: 5px; }
}