/* Screen-aligned controls and feedback; only the physical table turns sideways.
   All controller games share this shell. Adapters measure untransformed boxes. */
body[data-screen="game"][data-remote-role="controller"] .app-shell {
  padding: max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
  gap: 4px;
}
body[data-screen="game"][data-remote-role="controller"] .topbar { gap: 4px; margin: 0; padding: 0; }
body[data-screen="game"][data-remote-role="controller"] .brand { display: none; }
body[data-screen="game"][data-remote-role="controller"] .top-actions { width: 100%; gap: 4px; justify-content: space-between; }
body[data-screen="game"][data-remote-role="controller"] .top-actions .control-strip { gap: 4px; }
body[data-screen="game"][data-remote-role="controller"] .remote-strip {
  flex: 0 0 auto; min-height: 20px; gap: 4px 12px; font-size: 13px;
  flex-wrap: wrap; justify-content: center;
}
body[data-screen="game"][data-remote-role="controller"] .table-game { position: relative; min-height: 0; min-width: 0; }
body[data-screen="game"][data-remote-role="controller"] .table-game .table-scene {
  grid-template-rows: minmax(0, 1fr) auto; padding: 4px;
  border-width: 2px; border-radius: 12px; box-shadow: none;
}
body[data-screen="game"][data-remote-role="controller"][data-remote-surface="hand"] .table-game .table-scene { grid-template-rows: minmax(0, 1fr); }
body[data-screen="game"][data-remote-role="controller"][data-remote-surface="table"] .table-game { --hand-card: 62px; }
body[data-screen="game"][data-remote-role="controller"][data-remote-surface="table"] .table-game .hand { height: 112px; }
body[data-screen="game"][data-remote-role="controller"][data-remote-surface="table"] .table-game .hand .hand-card { top: 20px; }
body[data-remote-role="controller"] .tableau-empty-label { display: inline-block; transform: rotate(calc(-1 * var(--pile-angle))); }

/* Status remains available to assistive technology. Routine prose and counts
   do not cover the physical cards. Errors and milestones stay screen-aligned. */
body[data-screen="game"][data-remote-role="controller"] .table-game :is(#turn-status, .table-announcement[data-kind="event"], .tableau-stock-count) {
  position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip-path: inset(50%);
}
body[data-screen="game"][data-remote-role="controller"] .table-game .remote-feedback {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
body[data-screen="game"][data-remote-role="controller"] .remote-feedback #error {
  position: absolute; bottom: 8px; left: 8px; right: 8px; width: fit-content; max-width: calc(100% - 16px); margin: auto;
}
.remote-turn-notice {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 80;
  width: max-content; max-width: calc(100% - 24px); padding: 14px 24px;
  font: 400 clamp(36px, 7vmin, 58px)/1.1 var(--font-ui); color: var(--pop-ink);
  background: var(--pop-paper); border: var(--pop-border); border-radius: 10px;
  box-shadow: 3px 4px 0 var(--pop-ink); cursor: pointer;
}
.remote-public-info { flex: 0 0 auto; display: flex; justify-content: center; pointer-events: none; }
.remote-public-info .ronda-notes { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 16px; font-size: 14px; }
body[data-remote-role="controller"] .game-ronda .escoba-table { grid-template-rows: minmax(0, 1fr); }
body[data-remote-role="display"] .game-ronda .ronda-score { font-size: clamp(18px, 1.4vw, 26px); }
body[data-remote-role] :is(.ronda-hand, .ronda-chain) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.remote-decisions {
  position: absolute; z-index: 30; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  width: max-content; max-width: calc(100% - 24px);
}
.remote-decisions .button { min-height: 44px; max-width: 100%; white-space: normal; }
/* Banking has public hands at every seat. Keep them available even on the
   smallest controller; private cards remain in the separate hand surface. */
body[data-remote-role="display"]:has(.game-banking) #inspect-cards { display: inline-block !important; }
body[data-screen="game"][data-remote-role="display"] .game-banking .table-scene { grid-template-rows: 0 minmax(0, 1fr); }
body[data-remote-role="display"] .game-banking .banking-draw-mode { visibility: hidden; }
body[data-remote-role] .game-banking :is(#turn-status, .banking-heading > span, .banking-private) {
  position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%);
}
body[data-remote-role] .game-banking .banking-table { grid-template-rows: 76px minmax(0, 1fr); }
body[data-remote-role] .game-banking .banking-heading { padding-right: 180px; flex-direction: row; align-items: center; }
body[data-remote-role] .game-banking .banking-heading h3 { font-size: clamp(18px, 2vw, 30px); white-space: normal; }
body[data-remote-role] .game-banking .banking-seats { gap: 8px; }
body[data-remote-role] .game-banking .banking-seats .banking-seat {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(4, auto);
  align-content: center; gap: 2px 6px; padding: 6px; border-color: transparent;
}
body[data-remote-role] .game-banking .banking-seats .banking-seat.banking-active { border-color: var(--pop-yellow); }
body[data-remote-role] .game-banking .banking-seats .banking-seat > :is(h4, p, strong, span) { grid-column: 1; grid-row: auto; margin: 0; line-height: 1.2; }
body[data-remote-role] .game-banking .banking-seats .banking-seat h4 { font-size: 20px; overflow-wrap: anywhere; }
body[data-remote-role] .game-banking .banking-seats .banking-cards {
  display: grid; grid-column: 2; grid-row: 1 / span 4; align-self: center; width: 100%; max-width: none;
  --bank-card: min(100%, 86px); grid-template-columns: repeat(calc(var(--card-count) - 1), minmax(0, 1fr)) var(--bank-card);
  padding: 0; gap: 0;
}
body[data-remote-role] .game-banking .banking-card { width: 86px; max-width: none; }
body[data-remote-role] .game-banking .banking-seats .banking-cards:has(> :only-child) { grid-template-columns: var(--bank-card); }
body[data-screen="game"][data-remote-role="controller"] .game-banking .game:has(> .opponents:not(:empty)) { --seat-reveal: 14px; padding: 28px 20px 64px; }
/* Each public hand already names its owner; leave only the real hidden backs
   at the edges so duplicate labels cannot collide with the compact grid. */
body[data-screen="game"][data-remote-role="controller"] .game-banking .opponent :is(.avatar, .opponent-detail) { visibility: hidden; }
body[data-screen="game"][data-remote-role="controller"][data-remote-surface="table"] .game-banking .controller { display: none; }
body[data-screen="game"][data-remote-role="controller"] .game-banking .table-scene { grid-template-rows: minmax(0, 1fr); }
body[data-remote-role="controller"] .game-banking .banking-seats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
body[data-remote-role="controller"] .game-banking .banking-seats .banking-seat { grid-template-columns: minmax(0, 1fr) 48px; padding: 3px; gap: 1px 3px; }
body[data-remote-role="controller"] .game-banking .banking-seats .banking-seat h4 { font-size: 16px; }
body[data-remote-role="controller"] .game-banking .banking-seats .banking-balance { font-size: 11px; }
body[data-remote-role="controller"] .game-banking .banking-seats .banking-total { font-size: 12px; }
body[data-remote-role="controller"] .game-banking .banking-seats .banking-outcome { font-size: 11px; }
body[data-remote-role="controller"] .game-banking .banking-seats .banking-cards { --bank-card: 40px; }
body[data-remote-role="controller"] .game-banking .banking-card { width: 40px; }
body[data-remote-role="controller"] .game-banking .banking-heading { padding-right: 156px; }
body[data-remote-role="controller"] .game-banking .banking-heading h3 { font-size: 18px; }
body[data-remote-role="controller"] .game-banking .banking-draw-mode { max-width: 94px; }
/* Large private groups need readable, separate indices (Mona can deal 20 cards).
   The ordinary fan remains for small hands and the two-card table selection. */
body[data-remote-role="controller"][data-remote-surface="hand"] .table-game:is(.game-tute, .game-rummy, .game-pocha) { --hand-card: clamp(96px, 24dvh, 160px); }
body[data-remote-role="controller"][data-remote-surface="hand"] :is(.game-tute, .game-rummy, .game-pocha) .controller { overflow-x: clip; }
body[data-remote-role="controller"][data-remote-surface="hand"][data-remote-group-selection="true"] .table-game .hand:has(> :nth-child(9)),
body[data-remote-role="controller"][data-remote-surface="hand"] :is(.game-tute, .game-rummy) .hand:has(> :nth-child(6)) {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
  gap: 12px 4px; height: auto; width: 100%; padding: 12px 2px; translate: none;
}
body[data-remote-role="controller"][data-remote-surface="hand"][data-remote-group-selection="true"] .table-game .hand:has(> :nth-child(9)) .hand-card,
body[data-remote-role="controller"][data-remote-surface="hand"] :is(.game-tute, .game-rummy) .hand:has(> :nth-child(6)) .hand-card {
  position: relative; left: auto; top: auto; margin: 0; width: min(100%, 76px); justify-self: center;
  transform: none !important;
}
body[data-remote-role="controller"][data-remote-surface="hand"][data-remote-group-selection="true"] .table-game .hand:has(> :nth-child(9)) .hand-card.selected,
body[data-remote-role="controller"][data-remote-surface="hand"] :is(.game-tute, .game-rummy) .hand:has(> :nth-child(6)) .hand-card.selected {
  transform: translateY(-8px) !important;
}
/* Counts and routine narration remain accessible, away from the playing surface. */
body[data-remote-role] .game-mona :is(.mona-meta, .pair-pile, .mona-out, .mona-layout p) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%);
}
body[data-remote-role] :is(.game-tute, .game-pocha) :is(#turn-status, .brisca-trick h3, .brisca-trick-note) {
  position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%);
}
body[data-remote-role="display"] :is(.game-tute, .game-pocha) .brisca-stock { font-size: 18px; }
/* Rummy keeps both physical draw sources and the closing destination stable. */
body[data-screen="game"][data-remote-role]:has(.game-rummy) .topbar { height: auto; min-height: 0; flex-basis: auto; }
/* Only settled hands are public; the display can inspect those final groups. */
body[data-remote-role="display"]:has(.rummy-table[data-phase="finished"]) #inspect-cards { display: inline-block !important; }
body[data-remote-role] .game-rummy :is(#turn-status, .rummy-label) {
  position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%);
}
body[data-remote-role="display"] .opponents[data-crowded="true"] { --seat-fan: clamp(66px, 13cqh, 140px); }
/* The toolbar already provides cancellation. Keep one destination on the table. */
body[data-remote-role="controller"] .escoba-tools [data-clear-selection] { display: none; }
body:not([data-screen="game"]) .remote-public-info { display: none; }
.remote-public-info .brisca-scores {
  position: static; transform: none; width: min(100%, 420px); margin: 0; height: 52px; padding: 4px 8px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.remote-public-info .brisca-scores h3 { display: none; }
.remote-public-info .brisca-score { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 6px; min-width: 0; padding: 0; align-content: center; }
.remote-public-info .brisca-score > span { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.remote-public-info .brisca-score strong { grid-column: 1; font-size: 18px; white-space: nowrap; }
.remote-public-info .brisca-score small { grid-column: 2; text-align: right; font-size: 10px; }
.remote-public-info .brisca-score + .brisca-score { border: 0; border-left: 1px solid #28282040; padding-left: 10px; }
.remote-public-info .brisca-scores[data-score-count="4"] { width: min(100%, 720px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.remote-public-info .brisca-scores[data-score-count="4"] small { display: none; }
@media (max-width: 550px) and (orientation: portrait) {
  /* Reserve the identity + error lines so an invalid close cannot move the cards. */
  body[data-screen="game"][data-remote-role="controller"]:has(.game-rummy) .remote-strip { min-height: 36px; line-height: 16px; }
  .remote-public-info .brisca-scores[data-score-count="4"] { height: 88px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; }
  .remote-public-info .brisca-scores[data-score-count="4"] .brisca-score:nth-child(even) { border-left: 0; padding-left: 0; }
}
body[data-screen="game"][data-remote-role="controller"] .table-game:is(.game-tute, .game-pocha) .brisca-table {
  --table-card: 52px;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: 64px minmax(0, 1fr); gap: 12px; width: 100%;
}
body[data-screen="game"][data-remote-role="controller"] .table-game:is(.game-tute, .game-pocha) .game { padding-inline: 24px; }
body[data-remote-role="controller"] :is(.game-tute, .game-pocha) .brisca-stock { font-size: 14px; }
body[data-remote-role="controller"] :is(.game-tute, .game-pocha) .brisca-trump-suit .suit-art { display: block; }
body[data-remote-role="controller"] .game-tute .brisca-plays { gap: 5px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
body[data-remote-role="controller"][data-remote-surface="table"] :is(.game-tute, .game-pocha) .brisca-trump-suit { transform: rotate(0deg); }
/* Predictions are public game data: retain them beside every score, including
   four seats where ordinary trick counts are otherwise hidden on controllers. */
body[data-remote-role="display"] .game-pocha .brisca-scores {
  grid-template-columns: repeat(var(--pocha-players), minmax(0, 1fr)); gap: 16px; padding: 10px 16px;
}
body[data-remote-role="display"] .game-pocha .brisca-score { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 18px; }
body[data-remote-role="display"] .game-pocha .brisca-score > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-remote-role="display"] .game-pocha .brisca-score strong { font-size: 24px; }
body[data-remote-role="display"] .game-pocha .brisca-score small { font-size: 15px; }
.remote-public-info:has(.pocha-schedule) { flex-wrap: wrap; gap: 2px; }
.remote-public-info .pocha-schedule { flex-basis: 100%; margin: 0; text-align: center; font-size: 12px; }
.remote-public-info .brisca-scores[data-game="pocha"] {
  width: min(100%, 960px); height: 62px; grid-template-columns: repeat(var(--pocha-players), minmax(0, 1fr)); gap: 4px;
}
.remote-public-info .brisca-scores[data-game="pocha"] .brisca-score { grid-template-columns: minmax(0, 1fr); padding-left: 4px; }
.remote-public-info .brisca-scores[data-game="pocha"] .brisca-score:first-of-type { padding-left: 0; border-left: 0; }
.remote-public-info .brisca-scores[data-game="pocha"] .brisca-score small { display: block; grid-column: 1; text-align: left; white-space: nowrap; }
body[data-remote-role="controller"] .game-pocha .brisca-plays {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 6px;
}
body[data-remote-role="controller"] .game-pocha .brisca-plays:has(> :nth-child(4)):not(:has(> :nth-child(5))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body[data-remote-role="controller"] .game-pocha .brisca-play { min-width: 0; }
body[data-remote-role="controller"] .game-pocha .brisca-play > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-remote-role="display"] .game-pocha .brisca-plays:has(> :nth-child(5)) {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
@media (max-width: 550px) and (orientation: portrait) {
  .remote-public-info .brisca-scores[data-game="pocha"] { height: 116px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .remote-public-info .brisca-scores[data-game="pocha"][data-score-count="3"] { height: 62px; }
  .remote-public-info .brisca-scores[data-game="pocha"][data-score-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
body[data-screen="game"][data-remote-role="controller"] .table-game.game-brisca { --trick-top-clearance: 82px; }
body[data-screen="game"][data-remote-role="controller"] .table-game.game-brisca .opponent[data-edge="top"] { top: 8px; }
body[data-screen="game"][data-remote-role="controller"] .table-game.game-brisca .opponent:is([data-edge="left"], [data-edge="right"]) :is(.avatar, .opponent-detail) {
  top: calc(50% + var(--seat-fan) / 2 + 6px); bottom: auto;
}
/* Stock and trick share the central lane, away from the physical side hands. */
body[data-screen="game"][data-remote-role="controller"] .table-game.game-brisca .brisca-table {
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto;
  width: 100%; gap: 40px; justify-items: center;
}
body[data-screen="game"][data-remote-role="controller"] .table-game.game-brisca .brisca-trick { width: 100%; }
@media (max-height: 700px) and (orientation: landscape) {
  /* The felt keeps the common rotation. The grid of named public hands is
     counter-rotated as a unit so labels and choices remain screen-aligned. */
  body[data-screen="game"][data-remote-role="controller"][data-remote-surface="table"] .game-banking #game-table {
    position: absolute; left: 0; top: 0; width: 100cqw; height: 100cqh;
    transform-origin: top left; transform: translateX(100cqh) rotate(90deg); padding: 34px 20px 58px;
  }
  body[data-screen="game"][data-remote-role="controller"][data-remote-surface="table"] .game-banking .opponent :is(.avatar, .opponent-detail) { transform: none; }
  body[data-remote-role="controller"] .game-banking .banking-seats:has(> :nth-child(5)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body[data-remote-role="controller"] .game-banking .banking-table { grid-template-rows: 68px minmax(0, 1fr); }
  body[data-remote-role="controller"][data-remote-surface="table"] .rummy-close { transform: rotate(90deg); place-self: center; }
  body[data-remote-role="controller"][data-remote-surface="table"] .rummy-table { grid-template-rows: calc(var(--rummy-card) * 156 / 110 + 26px) 90px; }
  body[data-remote-role="controller"][data-remote-surface="table"] :is(.game-tute, .game-pocha) .placement-destination { transform: rotate(90deg); }
  body[data-remote-role="controller"][data-remote-surface="table"] :is(.game-tute, .game-pocha) .brisca-trump-suit { transform: rotate(90deg); }
  body[data-remote-role="controller"] :is(.game-tute, .game-pocha) :is(.brisca-trick h3, .brisca-trick-note) { display: none; }
  body[data-remote-role="controller"][data-remote-surface="table"] .beside-hand-action { transform: rotate(90deg); }
  body[data-remote-role="controller"][data-remote-surface="table"] .game-fishing .escoba-table { padding-inline: 40px; }
  body[data-remote-role="controller"][data-remote-surface="table"] .game-ronda .escoba-table {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: 64px minmax(0, 1fr); padding-inline: 8px;
  }
  body[data-remote-role="controller"][data-remote-surface="table"] .game-fishing .escoba-surface {
    grid-template-columns: minmax(0, 1fr) 44px; grid-template-rows: minmax(0, 1fr);
  }
  body[data-remote-role="controller"][data-remote-surface="table"] .game-fishing .escoba-tools {
    position: absolute; right: 0; top: 50%; width: max-content; height: 44px;
    transform-origin: center; transform: translate(calc(50% - 22px), -50%) rotate(90deg);
  }
  body[data-remote-role="controller"][data-remote-surface="table"] .brisca-play > span { transform: rotate(90deg); }
  body[data-screen="game"][data-remote-role="controller"] .app-shell {
    display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
  }
  body[data-screen="game"][data-remote-role="controller"] .topbar { grid-column: 1; grid-row: 1; display: flex; align-items: stretch; }
  body[data-screen="game"][data-remote-role="controller"] .top-actions {
    flex-direction: column; justify-content: space-between; align-items: center;
    height: 100%; width: 48px;
  }
  body[data-screen="game"][data-remote-role="controller"] .top-actions :is(.control-strip, .action-choices) { flex-direction: column; }
  body[data-screen="game"][data-remote-role="controller"] .remote-strip { grid-column: 1 / -1; grid-row: 2; }
  body[data-screen="game"][data-remote-role="controller"] .table-game { grid-column: 2; grid-row: 1; container-type: size; }
  /* Public scores occupy their own screen row; they never cover a rival hand. */
  body[data-screen="game"][data-remote-role="controller"] .app-shell:has(> .remote-public-info:not([hidden])) { grid-template-rows: auto minmax(0, 1fr) auto; }
  body[data-screen="game"][data-remote-role="controller"] .app-shell:has(> .remote-public-info:not([hidden])) .topbar { grid-row: 1 / 3; }
  body[data-screen="game"][data-remote-role="controller"] .app-shell:has(> .remote-public-info:not([hidden])) .table-game { grid-row: 2; }
  body[data-screen="game"][data-remote-role="controller"] .app-shell:has(> .remote-public-info:not([hidden])) .remote-strip { grid-row: 3; }
  .remote-public-info { grid-column: 2; grid-row: 1; }
  body[data-screen="game"][data-remote-role="controller"][data-remote-surface="table"] .table-game .table-scene {
    position: absolute; left: 0; top: 0; width: 100cqh; height: 100cqw;
    transform-origin: top left; transform: translateY(100cqh) rotate(-90deg);
  }
  /* Seat labels belong to the HUD, even though the hands stay on the table. */
  body[data-screen="game"][data-remote-role="controller"][data-remote-surface="table"] .opponent :is(.avatar, .opponent-detail) { transform: rotate(90deg); }
  body[data-screen="game"][data-remote-role="controller"][data-remote-surface="table"] .game-brisca .opponent:is([data-edge="left"], [data-edge="right"]) :is(.avatar, .opponent-detail) {
    left: 24px; right: auto; transform-origin: top left;
  }
  body[data-screen="game"][data-remote-role="controller"][data-remote-surface="table"] .game-brisca .opponent:is([data-edge="left"], [data-edge="right"]) .opponent-detail {
    top: calc(50% + var(--seat-fan) / 2 + 30px);
  }
  body[data-screen="game"][data-remote-role="controller"][data-remote-surface="table"] .slot-rank { transform: rotate(90deg); }
  body[data-screen="game"][data-remote-role="controller"][data-remote-surface="table"] .tableau-empty-label {
    display: inline-block; transform: rotate(calc(90deg - var(--pile-angle)));
  }
}