/* Phone-first play: the board owns the full width. Tablet seating is untouched.
   Existing live cards and actions are only rearranged, never duplicated. */
body[data-phone-table="true"] { --hand-label-height:26px; --hand-dock-height:100px; --hand-button-height:66px; --hand-bottom-space:7px; --phone-status:0px; --phone-actions:68px; }
body[data-phone-table="true"] .game-card,
body[data-phone-table="true"].hand-setup .game-card,
body[data-phone-table="true"] .game-card:has(> .event-cue:not([hidden])) {
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:44px 56px var(--phone-status) minmax(0,1fr) var(--hand-dock-height) var(--phone-actions);
  grid-template-areas:"toolbar toolbar toolbar" "p1 p2 p3" "mode mode mode" "board board board" "you you you" "actions actions actions";
  gap:0; padding:0;
}
body[data-phone-table="true"] .game-card:has(.move-actions:not(:empty)),
body[data-phone-table="true"] .game-card:has(> .move-area > .setup-skip:not([hidden])) { --phone-actions:68px; }
body[data-phone-table="true"] .game-card:has(> .event-cue:not([hidden])),
body[data-phone-table="true"] .game-card:has(> #playModeStrip[data-critical="true"]) { --phone-status:44px; }
body[data-phone-table="true"] .game-card .toolbar-actions { grid-area:toolbar; height:44px; min-height:44px; margin:0; padding:0 3px; flex-wrap:nowrap; gap:2px; align-self:stretch; justify-content:flex-end; }
body[data-phone-table="true"] .game-card .toolbar-actions .button,body[data-phone-table="true"] .game-card .toolbar-actions .mode-action { min-width:44px; min-height:44px; height:44px; padding:2px 5px; font-size:12px; }
body[data-phone-table="true"] .game-card .toolbar-actions .table-title { display:none; }
body[data-phone-table="true"] .game-card #scoreStrip .score-chip:not([data-seat="0"]) {
  width:100%; height:56px; min-height:0; margin:0; padding:2px 3px; align-self:stretch; justify-self:stretch;
  grid-template-columns:24px minmax(0,1fr) 28px; grid-template-rows:22px 14px 14px; gap:0 2px;
  background:#30241de8; border:1px solid #c5a16b66; border-radius:5px; overflow:hidden;
}
body[data-phone-table="true"] .game-card #scoreStrip .score-chip[data-seat="1"] { grid-area:p1; }
body[data-phone-table="true"] .game-card #scoreStrip .score-chip[data-seat="2"] { grid-area:p2; }
body[data-phone-table="true"] .game-card #scoreStrip .score-chip[data-seat="3"] { grid-area:p3; }
body[data-phone-table="true"] .game-card #scoreStrip .score-chip:not([data-seat="0"]) .player-avatar { grid-column:1; grid-row:1; width:22px; height:22px; align-self:center; margin:0; }
body[data-phone-table="true"] .game-card #scoreStrip .score-chip:not([data-seat="0"]) .rail-name { grid-column:2; grid-row:1; align-self:center; text-align:left; width:100%; line-height:14px; }
body[data-phone-table="true"] .game-card #scoreStrip .score-chip:not([data-seat="0"]) .name { font-size:11px; line-height:14px; }
body[data-phone-table="true"] .game-card #scoreStrip .score-chip:not([data-seat="0"]) .points { grid-column:3; grid-row:1; font-size:16px; line-height:22px; align-self:center; text-align:right; }
body[data-phone-table="true"] .game-card #scoreStrip .score-chip:not([data-seat="0"]) .rail-meta { grid-column:1 / -1; grid-row:2; display:flex; justify-content:space-between; align-items:center; min-height:0; height:14px; gap:2px; }
body[data-phone-table="true"] .game-card #scoreStrip .score-chip:not([data-seat="0"]) .rail-count { font-size:10px; line-height:14px; }
body[data-phone-table="true"] .game-card #scoreStrip .score-chip:not([data-seat="0"]) .rail-state { display:flex; gap:2px; }
body[data-phone-table="true"] .game-card #scoreStrip .score-chip:not([data-seat="0"]) .rail-qualification { grid-column:1 / -1; grid-row:3; height:14px; min-height:0; line-height:14px; font-size:10px; white-space:nowrap; }
body[data-phone-table="true"] .game-card #scoreStrip .score-chip.current:not([data-seat="0"]) { border-color:#ffe39c; box-shadow:inset 0 -2px #ffe39c; }
body[data-phone-table="true"] .game-card .play-mode-strip { grid-area:mode; display:none; width:100%; height:44px; min-height:0; margin:0; padding:3px 6px; }
body[data-phone-table="true"] .game-card #playModeStrip[data-critical="true"] { display:flex; width:100%; justify-self:stretch; }
body[data-phone-table="true"] .game-card .event-cue { grid-area:mode; width:100%; height:44px; min-height:44px; margin:0; padding:1px 5px; justify-self:stretch; }
body[data-phone-table="true"] .game-card .event-cue #eventCueTitle { font-size:20px; line-height:22px; }
body[data-phone-table="true"] .game-card .event-cue #closeEventCueButton { min-height:44px; height:44px; }
body[data-phone-table="true"] .game-card .board-surface { width:100%; min-width:0; min-height:0; border-width:2px; border-radius:7px; }
body[data-phone-table="true"] .game-card .seat-you { height:var(--hand-dock-height); margin:0; padding:1px 3px var(--hand-bottom-space); grid-template-rows:var(--hand-label-height) minmax(0,1fr); }
body[data-phone-table="true"] .game-card #scoreStrip .score-chip[data-seat="0"] { width:calc(100% - 88px); height:26px; padding:0 3px; grid-template-columns:20px minmax(0,1fr) 50px 76px; grid-template-rows:26px; gap:0 6px; }
body[data-phone-table="true"] .game-card #scoreStrip .score-chip[data-seat="0"] .player-avatar { width:20px; height:20px; align-self:center; }
/* Keep the existing 26px hand label row. The visible hand makes its tile count
   redundant here; the score group still announces the count to screen readers.
   Use that space for separated identity, score, qualification and turn labels. */
body[data-phone-table="true"] .game-card #scoreStrip .score-chip[data-seat="0"] .points {
  font-size:20px; font-weight:800; line-height:22px; letter-spacing:0;
  color:#fff1d5; background:#30241d; border:1px solid #b99560; border-radius:5px; text-shadow:none;
  text-align:center; white-space:nowrap; font-variant-numeric:tabular-nums;
}
body[data-phone-table="true"] .game-card #scoreStrip .score-chip[data-seat="0"] .rail-meta { display:none; }
body[data-phone-table="true"] .game-card #scoreStrip .score-chip[data-seat="0"] .rail-qualification { grid-column:4; font-size:11px; }
body[data-phone-table="true"] .game-card .you-line { height:26px; line-height:26px; }
body[data-phone-table="true"] .game-card .you-line .turn-status { max-width:78px; }
body[data-phone-table="true"] .game-card .hand-rack { gap:2px; }
body[data-phone-table="true"] .game-card .hand-tile { height:66px; min-height:44px; }
body[data-phone-table="true"] .game-card .hand-tile .domino { --tile-long:62px; --tile-short:31px; }
body[data-phone-table="true"] .game-card .move-area { grid-area:actions; height:var(--phone-actions); min-height:0; margin:0; padding:0 3px; grid-template-columns:minmax(0,1fr); grid-template-rows:24px 44px; align-self:stretch; gap:0; }
body[data-phone-table="true"] .game-card .move-instruction { grid-column:1; grid-row:1; margin:0; height:24px; font-size:12px; line-height:12px; -webkit-line-clamp:2; }
body[data-phone-table="true"] .game-card .move-actions { grid-column:1; grid-row:2; display:flex; flex-wrap:nowrap; gap:2px; height:44px; min-height:0; }
body[data-phone-table="true"] .game-card .move-actions:empty { display:none; }
body[data-phone-table="true"] .game-card .move-actions .button { flex:1 1 0; min-width:44px; min-height:44px; height:44px; padding:2px; font-size:12px; line-height:14px; }
body[data-phone-table="true"] .game-card #quickMusicToggle,body[data-phone-table="true"] .game-card #quickSoundToggle { display:none; }
body[data-phone-table="true"] .game-card #skipSetupAnimationButton { grid-column:1; grid-row:2; justify-self:end; min-height:44px; height:44px; }
/* A phone held sideways shares one header between controls and scores, rather
   than spending a third of the width on a permanent control sidebar. */
body[data-phone-table="true"][data-table-layout="landscape"] { --hand-dock-height:112px; --phone-actions:112px; }
body[data-phone-table="true"][data-table-layout="landscape"] .game-card,
body[data-phone-table="true"][data-table-layout="landscape"].hand-setup .game-card,
body[data-phone-table="true"][data-table-layout="landscape"] .game-card:has(> .event-cue:not([hidden])) {
  grid-template-columns:repeat(7,minmax(0,1fr)); grid-template-rows:56px var(--phone-status) minmax(0,1fr) var(--hand-dock-height);
  grid-template-areas:"toolbar toolbar toolbar toolbar p1 p2 p3" "mode mode mode mode mode mode mode" "board board board board board board board" "you you you you you actions actions";
}
body[data-phone-table="true"][data-table-layout="landscape"] .game-card .toolbar-actions { height:56px; align-items:center; justify-content:flex-start; }
body[data-phone-table="true"][data-table-layout="landscape"] .game-card #scoreStrip .score-chip:not([data-seat="0"]) { grid-template-columns:minmax(0,1fr) 26px; }
body[data-phone-table="true"][data-table-layout="landscape"] .game-card #scoreStrip .score-chip:not([data-seat="0"]) .player-avatar { display:none; }
body[data-phone-table="true"][data-table-layout="landscape"] .game-card #scoreStrip .score-chip:not([data-seat="0"]) .rail-name { grid-column:1; }
body[data-phone-table="true"][data-table-layout="landscape"] .game-card #scoreStrip .score-chip:not([data-seat="0"]) .points { grid-column:2; }

body[data-phone-table="true"][data-table-layout="landscape"] .game-card .move-area { height:112px; grid-template-rows:24px 88px; }
body[data-phone-table="true"][data-table-layout="landscape"] .game-card .move-actions { height:88px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:44px 44px; gap:0 2px; }
body[data-phone-table="true"][data-table-layout="landscape"] .game-card .move-actions:empty { display:none; }
body[data-phone-table="true"][data-table-layout="landscape"] .game-card #scoreStrip .score-chip[data-seat="0"] { width:calc(100% - 88px); }
body[data-phone-table="true"][data-table-layout="landscape"] .game-card #scoreStrip .score-chip:not([data-seat="0"]) { grid-template-columns:minmax(0,1fr) 32px; }
/* Override the legacy 320px CSS fallback only after the safe-area JS guard
   confirms this phone has enough room. Invalid/keyboard viewports still pause. */
body[data-phone-table="true"][data-viewport-fit="true"] .game-card { visibility:visible; pointer-events:auto; }
body[data-phone-table="true"][data-viewport-fit="true"] .viewport-guidance { display:none; }