/* 实际牌桌与设计预览共用录牌布局，普通点数保持紧凑圆键。 */
:is(.hand-panel,.workspace) {
  --picker-point-face: 32px;
  --picker-tian-face: 30px;
  --picker-art-height: 46px;
  --picker-label-height: 20px;
  --picker-action-height: 44px;
}

.hand-panel .point-picker .point-button,
.workspace .point-grid .round-key { min-width: 44px; min-height: 44px; font-size: 16px; }
.hand-panel .point-picker .point-button::before,
.workspace .point-grid .round-key > span { width: var(--picker-point-face); height: var(--picker-point-face); }
.hand-panel .point-picker .point-grid,
.workspace .point-grid { row-gap: 0; }

/* 与普通牌共享三列轴线，六种牌型自然排成两行。 */
:is(.hand-panel,.workspace) .quick-hand-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 6px;
  margin-top: 6px;
  align-items: start;
}
.hand-panel .quick-hand-grid {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.quick-hand-grid > .tian-group,
.hand-panel .quick-hand-grid > .special-tile,
.workspace .quick-hand-grid > .choice {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 0;
  align-items: start;
  min-width: 0;
  min-height: 0;
  padding: 4px 0;
  border-radius: 14px;
  text-align: center;
}
.quick-hand-grid > .tian-group.chosen { background: var(--accent-soft); }
.hand-panel .quick-hand-grid .tian-art,
.workspace .quick-hand-grid .tian-label {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  grid-template-rows: var(--picker-art-height) var(--picker-label-height);
  gap: 0;
  padding: 0;
  text-align: center;
}
.quick-hand-grid .paper-fan {
  width: 100%;
  height: var(--picker-art-height);
  padding: 2px 0;
  justify-content: center;
}
.quick-hand-grid :is(.tian-art,.tian-label) > span:last-child,
.quick-hand-grid :is(.special-label,.special-caption) > span {
  display: block;
  height: var(--picker-label-height);
  font-size: 13px;
  font-weight: 550;
  line-height: var(--picker-label-height);
  white-space: nowrap;
  text-align: center;
}
.quick-hand-grid :is(.special-label,.special-caption) {
  display: grid;
  grid-template-rows: var(--picker-label-height) var(--picker-action-height);
  gap: 0;
  min-width: 0;
  text-align: center;
}
.quick-hand-grid :is(.special-label,.special-caption) small {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--picker-action-height);
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}
.quick-hand-grid .tian-actions {
  display: grid;
  grid-template-columns: repeat(2,44px);
  gap: 0;
  width: 88px;
  justify-self: center;
  margin: 0;
  padding: 0;
}
.hand-panel .quick-hand-grid .tian-button,
.workspace .quick-hand-grid .tian-actions .round-key {
  width: 44px;
  height: var(--picker-action-height);
  min-width: 44px;
  min-height: 44px;
  font-size: 12px;
}
.hand-panel .quick-hand-grid .tian-button::before,
.workspace .quick-hand-grid .tian-actions .round-key > span {
  width: var(--picker-tian-face);
  height: var(--picker-tian-face);
}
.quick-hand-grid :is(.tile-check,.choice-check) {
  top: 5px;
  right: 5px;
  bottom: auto;
  width: 12px;
  height: 12px;
}