/* Frequently used table actions stay within reach of the selected hand tile.
   --choice-x is the selected tile's viewport centre minus #hand-play-zone.left.
   It is set on #board-ends in px. CSS also clamps the 252px group at both edges. */
.table-heading { min-height: 44px; gap: 12px; }
.table-heading h1 { min-width: 0; }
.table-heading #leave-button {
  flex: 0 0 auto;
  min-width: 96px;
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid #5c6c55;
  background: #24372c;
  color: #cbd4b8;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
}
.table-heading #leave-button:hover { color: #f0dfb7; border-color: #a1986d; background: #344633; }
.table-heading #leave-button:focus-visible { outline: 2px solid #efd396; outline-offset: 3px; }

.hand-area .hand-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}
.hand-area .self-label { min-width: 0; flex-wrap: wrap; gap: 3px 8px; }
.hand-area .self-label > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hand-area .hand-actions { gap: 8px; justify-content: flex-end; }
.hand-area .hand-actions .quiet-button,
.hand-area .hand-actions .secondary-button {
  min-width: 44px;
  min-height: 44px;
  padding: 7px 10px;
  font-size: 14px;
  white-space: nowrap;
}
#stock-label.stock-display {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin: 0;
  color: #dce3c2;
  font-size: 16px;
  line-height: 1.3;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.stock-display .stock-count { color: #f2d395; font: 600 22px/1.2 var(--mono, monospace); min-width: 1.3ch; text-align: center; }
#draw-pile .draw-pile-count { display: none; }

.hand-play-zone { position: relative; min-width: 0; }
.hand-play-zone .hand-tiles {
  /* Leave a comfortable gap below the direction buttons and raised tile. */
  padding-top: 72px;
  min-height: 0;
  margin: 0;
}
.hand-play-zone .board-ends {
  position: absolute;
  top: -3px;
  bottom: auto;
  right: auto;
  left: clamp(min(130px, 50%), var(--choice-x, 50%), max(calc(100% - 130px), 50%));
  width: min(252px, calc(100% - 8px));
  min-height: 46px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
  padding: 0;
  transform: translateX(-50%);
  z-index: 4;
}
.hand-play-zone .end-button {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 9px 8px;
  border-radius: 2px;
  border-width: 1px;
  color: #e4e7c4;
  background: #315239;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  box-shadow: 0 2px 0 #183c26;
}
.hand-play-zone .end-button.available { color: #f4dda3; border-color: #dec486; background: #3c583a; box-shadow: inset 0 1px 0 #d9d09217, 0 2px 0 #183c26; }
.hand-play-zone .end-button:hover:not(:disabled),
.hand-play-zone .end-button.drag-over { background: #e5c681; color: #2b3e27; border-color: #f3dfb0; }
.hand-play-zone .end-button:focus-visible { outline: 2px solid #f0d797; outline-offset: 3px; }
.hand-play-zone .placement-preview {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Offset the taller, easier targets with a slightly shallower felt area. */
.felt { min-height: 240px; height: clamp(240px, calc(100vh - 536px), 380px); }
@media (max-width: 850px) {
  .felt { min-height: 220px; height: clamp(220px, calc(100vh - 560px), 260px); }
}
@media (max-width: 430px) {
  .hand-area .hand-heading { grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; }
  .hand-area .self-label { grid-column: 1 / -1; min-height: 20px; }
  .hand-area .hand-actions { grid-column: 1 / -1; justify-self: end; }
  .felt { min-height: 210px; height: clamp(210px, calc(100vh - 584px), 245px); }
  .table-heading #leave-button { min-width: 92px; padding-inline: 11px; }
}