/* Eight stable, named slots: corners keep their identity as rows grow. */
.game-tableau { min-height: 0; --hand-card: clamp(58px, 8.5dvh, 82px); }
.game-tableau .table-scene { grid-template-columns: minmax(0, 1fr); }
.game-tableau .controller { max-width: 1100px; }
.game-tableau .human-identity { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.game-tableau .hand-heading:not(:has(button:not([hidden]))) { height: 0; margin: 0; }
.game-tableau .table-scene { padding-top: 8px; padding-bottom: 8px; }
.game-tableau .hand {
  display: grid; grid-template-columns: repeat(calc(var(--hand-count) - 1), minmax(0, 1fr)) var(--hand-card);
  width: min(100%, calc(var(--hand-count) * (var(--hand-card) + 8px))); gap: 0;
}
.game-tableau .hand:has(> :only-child) { grid-template-columns: var(--hand-card); }
.game-tableau .hand-card { justify-self: start; }
.game-tableau .hand-card.selected, .game-tableau .hand-card:focus-visible { z-index: 2; }
.game-tableau .tableau-table {
  --row-card: 52px; --row-step: 19px;
  display: grid; grid-template-areas: "nw n ne" "w stock e" "sw s se"; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 6px 18px; width: min(100%, 1000px); margin: 0 auto; padding: 4px;
}
.tableau-row {
  display: grid; grid-template-rows: 18px minmax(0, 1fr); align-items: stretch; min-width: 0; min-height: 100px;
  border: 1px dashed #f5e6c066; border-radius: 8px; background: transparent; color: var(--pop-paper);
  padding: 3px 7px 4px; cursor: pointer; text-align: left;
}
.tableau-row:disabled { cursor: default; opacity: 1; }
.tableau-row[aria-pressed="true"] { border-style: solid; border-color: var(--pop-paper); }
.tableau-row:focus-visible { outline: 2px solid var(--pop-paper); outline-offset: -3px; }
.tableau-row[data-role="corner"] .tableau-label { color: var(--pop-yellow); }
.tableau-label { display: flex; align-items: center; justify-content: space-between; gap: 3px; font: 15px var(--pop-title); }
.tableau-range { font: 11px var(--pop-body); white-space: nowrap; color: var(--pop-paper); }
.tableau-fan { grid-area: 2 / 1; display: block; position: relative; width: 100%; min-height: 0; }
.tableau-row .tableau-card { position: absolute; width: var(--row-card); aspect-ratio: 110/156; transform-origin: center; }
.tableau-empty { grid-row: 2; grid-column: 1; place-self: center; font: 12px var(--pop-body); opacity: .85; }
.tableau-row[data-tableau-slot="n"] { grid-area: n; }
.tableau-row[data-tableau-slot="e"] { grid-area: e; }
.tableau-row[data-tableau-slot="s"] { grid-area: s; }
.tableau-row[data-tableau-slot="w"] { grid-area: w; }
.tableau-row[data-tableau-slot="nw"] { grid-area: nw; }
.tableau-row[data-tableau-slot="ne"] { grid-area: ne; }
.tableau-row[data-tableau-slot="sw"] { grid-area: sw; }
.tableau-row[data-tableau-slot="se"] { grid-area: se; }
.tableau-stock { grid-area: stock; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 12px; }
.game-tableau .stock-pile { --stock-card: 44px; margin: 20px 4px 4px; }
@media (max-width: 700px) {
  .game-tableau { --hand-card: 62px; }
  .game-tableau .tableau-table { --row-card: 54px; --row-step: 16px; gap: 6px; padding: 3px; }
  .tableau-row { min-height: 102px; padding: 3px; }
  .tableau-label { font-size: 13px; }
  .game-tableau .opponents { gap: 4px; margin-bottom: 4px; }
  .game-tableau .opponent { padding: 2px; }
  .game-tableau .opponent-detail strong { font-size: 16px; }
  .game-tableau .opponent .avatar { display: none; }
  .tableau-empty { font-size: 10px; }
}