/* Scoped to the optional first-table sheet; no live-table selectors. */
.first-table { max-width: 640px; }
.first-table-body { display: grid; gap: 14px; min-width: 0; text-align: start; }
.first-table-body h3, .first-table-body p { margin: 0; overflow-wrap: anywhere; }
.first-table-body p { line-height: 1.55; }
.first-table-progress { font-weight: 700; color: var(--gold, #d5bb78); }
.first-table-note { font-size: .85rem; opacity: .8; }
.first-table-controls { display: grid; gap: 12px; min-width: 0; }
.first-table-hand { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.first-table-tile { display: inline-block; width: 44px; height: 58px; flex: 0 0 44px; border-radius: 5px; background: #fff9e9; color: #132c23; box-shadow: 0 2px 0 #89a798; vertical-align: middle; }
.first-table-tile svg { display: block; width: 100%; height: 100%; }
.first-table-pick { padding: 3px; border: 2px solid transparent; border-radius: 8px; background: transparent; cursor: pointer; min-width: 54px; min-height: 68px; }
.first-table-pick[aria-pressed="true"] { border-color: #ebc96e; background: #725f25; }
.first-table button:focus-visible, .first-table h3:focus-visible { outline: 3px solid #ebc96e; outline-offset: 3px; }
.first-table button:disabled { cursor: default; opacity: .75; }
.first-table-feedback:empty { display: none; }
.first-table-feedback { padding: 12px; border-inline-start: 3px solid #ebc96e; border-radius: 4px; background: rgba(127, 127, 127, .12); }
.first-table-feedback strong { display: block; margin-bottom: 6px; }
.first-table-feedback.is-correct { border-color: #7ed7b2; }
.first-table-example { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px; min-height: 44px; min-width: 0; border: 1px solid #8c9d90; border-radius: 10px; color: inherit; background: rgba(127, 127, 127, .08); cursor: pointer; text-align: start; font: inherit; }
.first-table-example-label { width: 100%; }
.first-table-group { display: inline-flex; gap: 2px; }
.first-table-example .first-table-tile { width: 36px; height: 48px; flex-basis: 36px; }
.first-table [hidden] { display: none !important; }
@media (max-width: 360px) {
  .first-table-hand { gap: 6px; }
  .first-table-example { padding: 8px; gap: 8px; }
}
@media (forced-colors: active) {
  .first-table-pick[aria-pressed="true"] { outline: 3px solid Highlight; outline-offset: 2px; }
}