/* Cards own the playfield; secondary controls live in the top menu. */
body[data-screen="game"] .app-shell { padding: 6px 12px 0; max-width: 1500px; }
body[data-screen="game"] .topbar { min-height: 44px; margin-bottom: 4px; gap: 8px; }
body[data-screen="game"] .brand { min-width: 0; gap: 8px; }
body[data-screen="game"] .brand-mark, body[data-screen="game"] .eyebrow { display: none; }
body[data-screen="game"] .brand h1 { font-size: 25px; margin: 0; }
body[data-screen="game"] .brand h1::before { content: none; }
.top-actions { flex-shrink: 0; gap: 6px; }
.top-actions .control-strip { display: flex; align-items: center; gap: 6px; padding: 0; min-width: 0; }
.top-actions .hand-actions { display: contents; }
.top-actions .table-action:has(button:not([hidden])) { margin: 0; }
.top-actions .action-choices { display: flex; align-items: center; gap: 6px; }
.top-actions .action-choices select { width: auto; max-width: 160px; margin: 0; min-height: 44px; }
body .button.icon-button { width: 44px; height: 44px; min-height: 44px; flex: 0 0 44px; display: grid; place-items: center; padding: 8px; }
.icon-button svg { width: 25px; height: 25px; }
body[data-screen="game"] .top-actions .button.help-button { font-size: 28px; line-height: 1; }
/* A small glued paper pad: a bound edge and a short stack of sheets. */
#table-tools-dialog {
  width: min(370px, calc(100% - 32px)); padding: 26px 24px 28px;
  border-top: 12px solid var(--pop-wood-edge); border-radius: 3px 3px 7px 5px;
  box-shadow: 0 3px 0 -1px var(--pop-paper), 0 5px 0 -1px var(--pop-ink), 5px 9px 0 var(--pop-ink);
}
#table-tools-dialog .dialog-heading { gap: 12px; margin-bottom: 20px; }
#table-tools-dialog h2 { margin: 0; font-size: 28px; }
#table-tools-dialog .close-button { flex-shrink: 0; }
.table-tools-content { display: grid; gap: 12px; }
body .table-tools-content .table-menu-button {
  width: 100%; min-height: 50px; justify-content: center; padding: 10px 16px;
  font: 20px/1.2 var(--font-ui); color: var(--pop-ink); background: var(--pop-paper);
  border: var(--pop-border); border-radius: 5px; box-shadow: 2px 3px 0 var(--pop-ink);
}
body .table-tools-content .table-menu-button:hover { background: #fff9e6; }
body .table-tools-content .table-menu-button:active { box-shadow: none; }
@media (max-height: 450px) {
  #table-tools-dialog { padding: 12px 20px 18px; }
  #table-tools-dialog .dialog-heading { margin-bottom: 12px; }
  .table-tools-content { gap: 8px; }
  body .table-tools-content .table-menu-button { min-height: 44px; padding-block: 7px; }
}

body[data-screen="game"] .table-game { --hand-card: 106px; }
body[data-screen="game"] .table-game .table-scene {
  grid-template-columns: minmax(0, 1fr); grid-template-rows: 26px minmax(0, 1fr) auto;
  gap: 0; padding: 4px 10px max(4px, env(safe-area-inset-bottom)); border-radius: 18px;
}
body[data-screen="game"] .table-game .feedback-rail { height: 26px; display: block; z-index: 40; }
body[data-screen="game"] .table-game #turn-status { font-size: 15px; line-height: 24px; }
body[data-screen="game"] .table-game .table-announcement { position: absolute; top: 0; left: 0; min-height: 24px; font-size: 14px; }
body[data-screen="game"] .table-game .table-announcement[data-kind="milestone"] {
  position: fixed; top: 50%; left: 50%; z-index: 50;
  width: max-content; max-width: calc(100vw - 32px); min-height: 0;
  transform: translate(-50%, -50%); padding: 16px 28px;
  pointer-events: none; font: clamp(34px, 8vw, 58px)/1 var(--pop-title);
  border-radius: 12px 9px 13px 10px; box-shadow: 4px 5px 0 var(--pop-ink);
}
body[data-screen="game"] .table-game .context-messages { position: absolute; inset: 0; height: auto; min-height: 0; padding: 0; pointer-events: none; }
.feedback-rail #interaction-instruction, .feedback-rail #help { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
.feedback-rail:has(#error:not([hidden])) :is(#turn-status, .table-announcement) { visibility: hidden; }
.feedback-rail #error { position: relative; margin: 0; padding: 5px 8px; font-size: 14px; }
body[data-screen="game"] .table-game .game { grid-template-rows: auto minmax(0, 1fr); gap: 0; }
body[data-screen="game"] .table-game .opponents { height: auto; min-height: 32px; padding: 0; gap: 4px 8px; align-items: center; flex-wrap: wrap; }
body[data-screen="game"] .table-game .opponent { padding: 0 3px; flex: 0 0 auto; }
body[data-screen="game"] .table-game .opponent .avatar,
body[data-screen="game"] .table-game .mini-hand, body[data-screen="game"] .table-game .cpu-badge { display: none; }
body[data-screen="game"] .table-game .opponent-detail { display: flex; gap: 5px; align-items: baseline; }
body[data-screen="game"] .table-game .opponent-detail strong { font-size: 16px; white-space: nowrap; }
body[data-screen="game"] .table-game .opponent-count { font-size: 12px; margin: 0; }
body[data-screen="game"] .table-game .table-bottomline { display: none; }
body[data-screen="game"] .table-game .controller { display: block; max-width: 900px; align-self: end; }
body[data-screen="game"] .table-game .hand-heading { display: none; }
body[data-screen="game"] .table-game .hand {
  position: relative; display: block; width: 100%; height: calc(var(--hand-card) * 156 / 110 + 48px);
  margin: 0; padding: 0; min-height: 0;
}
body[data-screen="game"] .table-game .hand .hand-card {
  position: absolute; left: 50%; top: 26px; width: var(--hand-card); margin-left: calc(var(--hand-card) / -2);
  transform: translate(var(--fan-x, 0px), var(--fan-y, 0px)) rotate(var(--fan-angle, 0deg));
  transform-origin: center; z-index: var(--fan-order, 0); transition: transform 140ms ease-out;
}
body[data-screen="game"] .table-game .hand .hand-card.selected,
body[data-screen="game"] .table-game .hand .hand-card:focus-visible,
body[data-screen="game"] .table-game .hand .hand-card.hinted {
  transform: translate(var(--fan-x, 0px), -30px) rotate(0deg); z-index: 60;
}
@media (hover: hover) {
  body[data-screen="game"] .table-game .hand .hand-card:hover:not(:disabled) { transform: translate(var(--fan-x, 0px), -20px) rotate(0deg); z-index: 60; }
}
.placement-dragging { opacity: .18; }
/* In a literal group, only selection lifts a card. A keyboard-to-touch switch
   must not move the focused/hovered card before pointerdown is hit-tested. */
body[data-screen="game"] .table-game .table-scene[data-group-selection="true"] .hand .hand-card:not(.selected):is(:hover, :focus-visible) {
  transform: translate(var(--fan-x, 0px), var(--fan-y, 0px)) rotate(var(--fan-angle, 0deg));
  z-index: var(--fan-order, 0);
}
body[data-screen="game"] .table-game .table-scene[data-group-selection="true"] .hand .hand-card.selected:is(:hover, :focus-visible) {
  transform: translate(var(--fan-x, 0px), -30px) rotate(0deg); z-index: 60;
}
.placement-ghost { margin-left: 0 !important; }
.placement-group-count { position: absolute; right: 5px; bottom: 5px; padding: 2px 8px; border-radius: 4px; background: var(--pop-paper); color: var(--pop-ink); font-size: 24px; }
.placement-ghost.tableau-row { display: block; padding: 0; border: 0; }
.placement-ghost.tableau-row .tableau-label { display: none; }
.placement-ghost.tableau-row .tableau-fan { position: absolute; inset: 0; height: 100%; }

/* One continuous radial table. No cells determine the size of a card. */
body[data-screen="game"] .game-tableau .tableau-table { position: relative; display: block; width: min(100%, 840px); height: 100%; padding: 0; }
.game-tableau .tableau-row { position: absolute; display: block; padding: 0; border: 0; background: none; min-height: 0; pointer-events: none; }
.game-tableau .tableau-fan { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.game-tableau .tableau-card { pointer-events: auto; }
.game-tableau .tableau-label { display: none; }
.game-tableau .tableau-empty {
  position: absolute; top: 50%; left: 50%; width: var(--pile-card); height: calc(var(--pile-card) * 156 / 110);
  display: grid; place-items: center; margin-left: calc(var(--pile-card) / -2); margin-top: calc(var(--pile-card) * 156 / -220);
  transform: rotate(var(--pile-angle)); pointer-events: auto; border: 1px dashed #fff4d655; border-radius: 6px; font-size: 14px;
}
.game-tableau .tableau-row[aria-pressed="true"] .tableau-card { filter: brightness(1.08); }
.game-tableau .tableau-row:focus-visible { outline: 2px solid var(--pop-paper); outline-offset: -2px; }
.game-tableau .tableau-row.placement-over { outline: none; }
.game-tableau .tableau-row.placement-over .tableau-card:last-child,
.game-tableau .tableau-row.placement-over .tableau-empty { outline: 2px dashed var(--pop-paper); outline-offset: -2px; }
.game-tableau .tableau-stock { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); gap: 4px; }
body[data-screen="game"] .game-tableau .stock-pile { --stock-card: calc(var(--pile-card) * .66); margin: 0; }
.game-tableau .tableau-stock-count { font-size: 13px; }

/* Overlapping sequences preserve readable indices instead of ten tiny cards. */
.table-game.game-cinquillo .foundations { container-type: size; width: min(100%, 1100px); }
.table-game.game-cinquillo .foundation { grid-template-columns: 24px minmax(0, 1fr); gap: 6px; }
.game-cinquillo .suit-label span { display: none; }
.game-cinquillo .suit-label .suit-art { width: 24px; height: 28px; }
.table-game.game-cinquillo .card-slots {
  --sequence-card: min(96px, calc((100cqh - 26px) * 110 / 624));
  grid-template-columns: repeat(9, minmax(0, 1fr)) var(--sequence-card); gap: 0;
}
.table-game.game-cinquillo .card-slot { width: var(--sequence-card); max-width: none; }
.game-cinquillo .card-slot:not(.filled) { background: transparent; border: 0; }
.game-cinquillo .card-slot .slot-rank { position: absolute; top: 5px; left: 5px; font-size: 14px; }
.game-cinquillo .card-slot .slot-suit { display: none; }
.game-cinquillo .card-slot:focus-visible, .game-cinquillo .card-slot.placement-over { z-index: 20; }

.game-banking .banking-cards {
  --bank-card: 86px;
  grid-template-columns: repeat(calc(var(--card-count) - 1), minmax(0, 1fr)) var(--bank-card);
}
.game-banking .banking-card { max-width: none; }
.game-banking .banking-seats:has(> :nth-child(5)) .banking-seat { grid-template-columns: minmax(0, 1fr) 64px; }
.game-banking .banking-seats:has(> :nth-child(5)) .banking-cards { --bank-card: 64px; }

@media (prefers-reduced-motion: reduce) {
  body[data-screen="game"] .table-game .hand .hand-card { transition: none; }
}

@media (max-width: 700px) {
  body[data-screen="game"] .app-shell { padding: max(4px, env(safe-area-inset-top)) 4px 0; }
  body[data-screen="game"] .topbar { padding-inline: 5px; }
  body[data-screen="game"] .brand h1 { font-size: 20px; line-height: 1; }
  body[data-screen="game"] .table-game { --hand-card: 96px; }
  body[data-screen="game"] .table-game .table-scene { padding-inline: 4px; border-width: 2px; border-radius: 12px; box-shadow: none; }
  body[data-screen="game"] .table-game .opponents { min-height: 28px; gap: 3px 6px; }
  body[data-screen="game"] .table-game .opponent-detail strong { font-size: 14px; }
  body[data-screen="game"] .table-game .opponent-count { font-size: 11px; }
  body[data-screen="game"]:has(.top-actions #action-choices:not([hidden])) .topbar { flex-wrap: wrap; }
  body[data-screen="game"]:has(.top-actions #action-choices:not([hidden])) .top-actions { width: 100%; justify-content: flex-end; }
  .top-actions .action-choices .button { font-size: 14px; padding-inline: 8px; }
}
@media (max-height: 650px) {
  body[data-screen="game"] .table-game { --hand-card: 86px; }
  body[data-screen="game"] .table-game .hand { height: calc(var(--hand-card) * 156 / 110 + 38px); }
  body[data-screen="game"] .table-game .hand .hand-card { top: 20px; }
  .game-banking .banking-cards { --bank-card: 64px; }
  .game-banking .banking-seats:has(> :nth-child(5)) .banking-seat { grid-template-columns: minmax(0, 1fr) 48px; }
  .game-banking .banking-seats:has(> :nth-child(5)) .banking-cards { --bank-card: 48px; }
}
@media (min-width: 701px) and (max-height: 500px) {
  body[data-screen="game"] .table-game .table-scene { grid-template-columns: minmax(0, 1fr) 260px; grid-template-rows: 26px minmax(0, 1fr); }
  body[data-screen="game"] .table-game.game-banking .table-scene { grid-template-columns: minmax(0, 1fr) 130px; }
  body[data-screen="game"] .feedback-rail { grid-column: 1 / -1; }
  body[data-screen="game"] .table-game .controller { align-self: center; }
}

/* Floating hand actions never take space from the card fan. */
body[data-screen="game"] .table-game .controller { position: relative; }
body[data-screen="game"] .table-game .beside-hand-action { position: absolute; right: 0; top: -46px; z-index: 70; }
/* Mona's centre is reserved for discarded pairs. */
body[data-screen="game"] .game-mona .mona-table { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
body[data-screen="game"] .game-mona .mona-layout { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; align-items: center; }
body[data-screen="game"] .game-mona .mona-discarded { position: relative; border: 0; padding: 0; }
body[data-screen="game"] .game-mona .mona-pair { min-height: 90px; gap: 0; }
body[data-screen="game"] .game-mona .mona-pair .mona-card:first-child { transform: rotate(-5deg); }
body[data-screen="game"] .game-mona .mona-pair .mona-card + .mona-card { margin-left: -28px; transform: rotate(5deg); }
body[data-screen="game"] .game-mona .mona-pair-target {
  position: absolute; inset: -20px 0; width: 100%; height: auto; padding: 0; border: 0; box-shadow: none; background: transparent;
}
body[data-screen="game"] .game-mona .mona-pair-target:focus-visible { outline: 2px solid var(--pop-paper); }
body[data-screen="game"] .game-mona .mona-pair-target.placement-over { outline: 2px dashed var(--pop-paper); border-radius: 12px; }

body[data-screen="game"] .game-mona .mona-pair .mona-card { width: clamp(44px, 16cqw, 72px); }