/* All coordinates use the logical landscape shell, including portrait rotation. */
.table-compass { display: none; }
body.game-active #game-shell {
  --scene-w: var(--game-width);
  --scene-h: var(--game-height);
  --hand-tile-w: min(calc(var(--scene-w) * .0482), calc(var(--scene-h) * .12));
  --tile-face-w: var(--hand-tile-w);
  --tile-h: calc(var(--hand-tile-w) * 4 / 3);
  --mini-w: calc(var(--hand-tile-w) * .6);
  --mini-h: calc(var(--mini-w) * 4 / 3);
  --compass-w: min(calc(var(--scene-w) * .112), calc(var(--scene-h) * .27));
  --compass-h: calc(var(--compass-w) * .7);
  --avatar-w: min(calc(var(--scene-w) * .053), calc(var(--scene-h) * .12));
  --river-gap: 1px;
  position: relative; display: block;
  width: var(--scene-w); height: var(--scene-h); max-width: none;
  margin: 0; padding: 0; overflow: hidden; background: #063a3c;
}
body.game-active.landscape-table #game-shell {
  position: fixed;
  left: calc(var(--viewport-left, 0px) + var(--viewport-width) / 2);
  top: calc(var(--viewport-top, 0px) + var(--viewport-height) / 2);
}
body.game-active #game-shell > main {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; max-width: none; margin: 0; padding: 0;
  overflow: hidden;
}
body.game-active #game-shell .table {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0;
  border: 0; border-radius: 0; box-shadow: none;
  background: #06494b url('./art/table-scene.svg') center / 100% 100% no-repeat;
}
body.game-active #game-shell .table-felt {
  position: absolute; inset: 0; display: block; container-type: normal;
  width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  --tile-face-w: var(--hand-tile-w);
  --tile-h: calc(var(--hand-tile-w) * 4 / 3);
  --mini-w: calc(var(--hand-tile-w) * .6);
  --mini-h: calc(var(--mini-w) * 4 / 3);
}
body.game-active #game-shell .table-felt::before,
body.game-active #game-shell .table-studs { display: none; }
body.game-active #game-shell .table-play {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  min-height: 0; margin: 0; padding: 0; overflow: visible;
}
body.game-active #game-shell .seat-mid { display: contents; }
body.game-active #game-shell .seat {
  --river-w: min(calc(var(--scene-w) * .0275), calc(var(--scene-h) * .068), calc((var(--scene-h) * .25 - (var(--discard-rows, 1) - 1) * var(--river-gap)) / var(--discard-rows, 1) / 1.34));
  --river-h: calc(var(--river-w) * 1.34);
  --river-grid-h: calc(var(--discard-rows, 1) * (var(--river-h) + var(--river-gap)));
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  min-height: 0; max-height: none; margin: 0; padding: 0; overflow: visible;
  border: 0; border-radius: 0; background: none; box-shadow: none; z-index: auto;
  pointer-events: none;
}

/* Profiles live outside the racks, on the edges of the table. */
body.game-active #game-shell .seat-meta {
  position: absolute; z-index: 7; display: grid;
  grid-template-columns: 1fr auto; align-items: center; justify-content: initial;
  gap: 1px 3px; width: max-content; min-width: var(--avatar-w);
  padding: calc(var(--avatar-w) + 4px) 2px 1px; margin: 0;
  color: #f9f2d9; background: none; border: 0; border-radius: 0; box-shadow: none;
  font-size: clamp(9px, calc(var(--scene-h) * .028), 17px); line-height: 1.15;
  text-align: center; white-space: nowrap; text-shadow: 0 1px 3px #002d2e;
}
body.game-active #game-shell .seat-meta::before {
  content: ''; position: absolute; top: 0; left: 50%;
  width: var(--avatar-w); height: var(--avatar-w); transform: translateX(-50%);
  border: 1px solid #f3ebc5; border-radius: 5px;
  background: #143e34 center / cover no-repeat;
  box-shadow: 0 2px 5px #00282b9c, 0 0 0 1px #586848;
}
body.game-active #game-shell .seat[data-avatar='you'] .seat-meta::before { background-image: url('./art/avatar-you.svg'); }
body.game-active #game-shell .seat[data-avatar='rice'] .seat-meta::before { background-image: url('./art/avatar-rice.svg'); }
body.game-active #game-shell .seat[data-avatar='kiwi'] .seat-meta::before { background-image: url('./art/avatar-kiwi.svg'); }
body.game-active #game-shell .seat[data-avatar='fish'] .seat-meta::before { background-image: url('./art/avatar-fish.svg'); }
body.game-active #game-shell .seat.active-turn .seat-meta::before {
  border-color: #ffe986; box-shadow: 0 0 0 2px #efd17d, 0 0 12px #ffd75b80;
}
body.game-active #game-shell .seat-name,
body.game-active #game-shell .seat-you .seat-name { grid-column: 1 / -1; color: #fff4d5; font-weight: 600; }
body.game-active #game-shell .seat-score { grid-column: 1 / -1; color: #c8ded1; font-size: .9em; }
body.game-active #game-shell .seat-count { display: none; }
body.game-active #game-shell .seat-wind {
  position: absolute; top: calc(var(--avatar-w) - 9px); right: -5px;
  display: grid; place-items: center; width: 18px; height: 18px;
  border: 1px solid #e4c86d; border-radius: 50%; background: #064549; color: #ffe593;
  font-size: 10px;
}
body.game-active #game-shell .seat[data-dealer='true'] .seat-wind::after { content: '莊'; }
body.game-active #game-shell .seat[data-dealer='true'] .seat-wind { font-size: 0; }
body.game-active #game-shell .seat[data-dealer='true'] .seat-wind::after { font-size: 10px; }
body.game-active #game-shell .seat-top .seat-meta { left: 69%; top: 1.5%; }
body.game-active #game-shell .seat-left .seat-meta { left: 5%; top: 27%; }
body.game-active #game-shell .seat-right .seat-meta { right: 5%; top: 27%; }
body.game-active #game-shell .seat-you .seat-meta { left: 5%; top: 59%; }
body.game-active #game-shell .seat-you .auto-badge,
body.game-active #game-shell .seat-you .rule-badge { grid-column: 1 / -1; padding: 1px 3px; font-size: 8px; }

/* A rack is one continuous lane: visible backs and aligned exposed groups. */
body.game-active #game-shell .opponent-rack {
  position: absolute; z-index: 4; display: flex; align-items: flex-end;
  flex-wrap: nowrap; gap: 4px; width: max-content; height: max-content;
  margin: 0; padding: 0; transform-origin: top left;
}
body.game-active #game-shell .seat-top .opponent-rack {
  --rack-w: min(calc(var(--scene-w) * .0205), calc((var(--scene-w) * .36 - var(--rack-count, 16) * 1px - var(--meld-count, 0) * 3px - 8px) / var(--rack-count, 16)));
  --rack-h: calc(var(--rack-w) * 1.5);
  top: 2%; left: 30.5%;
}
body.game-active #game-shell .seat-left .opponent-rack,
body.game-active #game-shell .seat-right .opponent-rack {
  --rack-w: calc((var(--scene-h) * .66 - var(--rack-count, 16) * 1px - var(--meld-count, 0) * 3px - 10px) / var(--rack-count, 16));
  --rack-h: calc(var(--scene-w) * .026);
  --rack-face-h: calc(var(--rack-w) * 1.45);
}
body.game-active #game-shell .seat-left .opponent-rack { top: 12%; left: 25%; transform: rotate(99deg); }
body.game-active #game-shell .seat-right .opponent-rack { top: 19%; left: 75%; transform: rotate(81deg); }
body.game-active #game-shell .seat-backs {
  display: flex; flex: none; flex-wrap: nowrap; justify-content: start;
  gap: 1px; width: max-content; min-height: 0; margin: 0; padding: 0;
}
body.game-active #game-shell .seat-backs .tile.back {
  flex: none; width: var(--rack-w); height: var(--rack-h); min-width: 0; min-height: 0;
  margin: 0; opacity: 1; border-radius: 2px;
  box-shadow: 1px 2px 0 #367003, 1px 4px 3px #002b2b80;
}
body.game-active #game-shell .seat-backs .drawn-back { margin-inline-start: 5px; }
body.game-active #game-shell .seat-backs .tile.back .tile-face {
  width: calc(100% - 1px); height: calc(100% - 2px);
  border: 1px solid #659831; border-top: 3px solid #f5f5df; border-radius: 2px;
  background-image: none; background-color: #4e910a;
  box-shadow: inset 0 3px 2px #82af38, inset 0 -2px 2px #377000;
}
body.game-active #game-shell .seat-left .seat-backs .tile.back .tile-face {
  border-top: 1px solid #669c39; border-bottom: 1px solid #d7ddcc;
  background: linear-gradient(180deg, #397903 0 52%, #e9eadf 53% 100%);
  box-shadow: inset 0 1px 1px #71a738, inset 0 -1px 1px white;
}
body.game-active #game-shell .seat-right .seat-backs .tile.back .tile-face {
  transform: none; border-top: 1px solid #d7ddcc; border-bottom: 1px solid #669c39;
  background: linear-gradient(180deg, #eceee2 0 46%, #417f05 47% 100%);
  box-shadow: inset 0 1px 1px white, inset 0 -1px 1px #326900;
}
body.game-active #game-shell .seat-melds {
  position: static; display: flex; flex: none; flex-wrap: nowrap;
  align-items: flex-end; justify-content: start; gap: 4px;
  width: max-content; max-width: none; min-height: 0; margin: 0; padding: 0;
}
body.game-active #game-shell .meld-group {
  display: flex; flex: none; flex-wrap: nowrap; gap: 1px; padding: 0; margin: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
}
body.game-active #game-shell .opponent-rack .seat-melds .tile.mini { width: var(--rack-w); height: var(--rack-face-h, calc(var(--rack-w) * 1.34)); }
body.game-active #game-shell .seat-top .seat-backs { order: 0; }
body.game-active #game-shell .seat-top .seat-melds { order: 1; }
body.game-active #game-shell .seat-left .seat-melds { order: 0; }
body.game-active #game-shell .seat-left .seat-backs { order: 1; }
body.game-active #game-shell .seat-right .seat-backs { order: 0; }
body.game-active #game-shell .seat-right .seat-melds { order: 1; }
body.game-active #game-shell .seat-top .seat-melds .tile-face,
body.game-active #game-shell .seat-right .opponent-rack .seat-melds .tile-face { transform: rotate(180deg); }

/* Six chronological tiles per river row; crowded rivers fit without scrolling. */
body.game-active #game-shell .seat-discards {
  position: absolute; z-index: 3; display: grid;
  grid-template-columns: repeat(var(--discard-columns, 6), var(--river-w)); grid-auto-rows: var(--river-h);
  align-content: start; justify-content: start; gap: var(--river-gap);
  width: max-content; max-width: none; min-height: 0; max-height: none;
  margin: 0; padding: 0; overflow: visible; opacity: 1;
}
body.game-active #game-shell .seat-discards .tile.mini {
  width: var(--river-w); height: var(--river-h); opacity: 1;
  box-shadow: 0 2px 0 #689d2d, 0 3px 1px #367107, 0 4px 3px #01333270;
}
body.game-active #game-shell .seat-discards .last-discard { outline: 1px solid #ffdc6c; outline-offset: 1px; }
body.game-active #game-shell .seat-discards .last-discard::before {
  content: ''; position: absolute; z-index: 4; left: 50%; top: -6px;
  transform: translateX(-50%); border-left: 3px solid transparent;
  border-right: 3px solid transparent; border-top: 5px solid #ffcf48;
}
body.game-active #game-shell .seat-top .seat-discards {
  left: 50%; bottom: calc(56% + var(--compass-h) / 2 + 5px);
  transform: translateX(-50%) rotate(180deg);
}
body.game-active #game-shell .seat-left .seat-discards {
  left: calc(50% - var(--compass-w) / 2 - 6px - var(--river-grid-h) / 2);
  top: 44%; transform: translate(-50%, -50%) rotate(90deg);
}
body.game-active #game-shell .seat-right .seat-discards {
  left: calc(50% + var(--compass-w) / 2 + 6px + var(--river-grid-h) / 2);
  top: 44%; transform: translate(-50%, -50%) rotate(-90deg);
}
body.game-active #game-shell .seat-you .seat-discards,
body.game-active #game-shell .seat-you:has(.seat-melds:not(:empty)) .seat-discards {
  left: 50%; top: calc(44% + var(--compass-h) / 2 + 6px); bottom: auto;
  width: max-content; max-height: none; transform: translateX(-50%);
}
body.game-active #game-shell .seat-flowers {
  position: absolute; z-index: 4; display: grid; grid-template-columns: repeat(4, max-content);
  align-content: start; justify-content: start; gap: 1px; width: max-content;
  max-width: none; min-height: 0; margin: 0; padding: 0;
}
body.game-active #game-shell .seat-flowers .tile.mini {
  width: calc(var(--hand-tile-w) * .42); height: calc(var(--hand-tile-w) * .56);
}
body.game-active #game-shell .seat-top .seat-flowers { top: 11%; right: 32%; }
body.game-active #game-shell .seat-left .seat-flowers { top: 41%; left: 4.5%; }
body.game-active #game-shell .seat-right .seat-flowers { top: 41%; right: 4.5%; }
body.game-active #game-shell .seat-you .seat-flowers { top: 76%; left: 24%; }

body.game-active #game-shell .center-felt {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  min-height: 0; margin: 0; padding: 0; border: 0; background: none; box-shadow: none;
  z-index: 2; pointer-events: none;
}
body.game-active #game-shell .center-felt::before {
  content: '漳州麻將'; display: block; position: absolute; top: 19%; left: 50%;
  transform: translateX(-50%); color: #033c405e; font-size: calc(var(--scene-h) * .046);
  font-weight: 600; letter-spacing: .04em; text-shadow: 0 1px 0 #5c9f9a30;
}
body.game-active[data-mode='taiwan'] #game-shell .center-felt::before { content: '台灣十六張'; }
body.game-active #game-shell .table-compass {
  position: absolute; display: block; left: 50%; top: 44%; width: var(--compass-w); height: var(--compass-h);
  transform: translate(-50%, -50%); border: 2px solid #ba983e; border-radius: 50%;
  background: radial-gradient(ellipse, #0b2731 0 28%, transparent 30%), conic-gradient(from -45deg, #334044 0 25%, #2c383e 25% 50%, #3e4140 50% 75%, #2f3e41 75% 100%);
  box-shadow: 0 0 0 2px #1a5161, 0 3px 0 #263d47, 0 5px 5px #00313390;
}
body.game-active #game-shell .compass-wind {
  position: absolute; display: grid; place-items: center; width: 26%; height: 29%;
  color: #91aaa2; font-size: calc(var(--compass-h) * .22); font-weight: 700;
  text-shadow: 0 1px 1px #071c26;
}
body.game-active #game-shell #compass-wind-0 { left: 37%; bottom: 0; }
body.game-active #game-shell #compass-wind-1 { right: 1%; top: 35.5%; transform: rotate(-90deg); }
body.game-active #game-shell #compass-wind-2 { left: 37%; top: 0; transform: rotate(180deg); }
body.game-active #game-shell #compass-wind-3 { left: 1%; top: 35.5%; transform: rotate(90deg); }
body.game-active #game-shell .compass-count {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 2px 4px; border: 1px solid #346479; border-radius: 5px; background: #172a36;
  color: #81dfff; font: 500 calc(var(--compass-h) * .3)/1.1 ui-monospace, monospace;
  text-shadow: 0 0 5px #16a3e7; box-shadow: inset 0 0 3px #061b29;
}
body.game-active #game-shell .table-compass[data-turn='0'] #compass-wind-0,
body.game-active #game-shell .table-compass[data-turn='1'] #compass-wind-1,
body.game-active #game-shell .table-compass[data-turn='2'] #compass-wind-2,
body.game-active #game-shell .table-compass[data-turn='3'] #compass-wind-3 {
  color: #eaff77; border-radius: 50%; background: #63913345; text-shadow: 0 0 6px #afdd41;
}
body.game-active #game-shell .turn-hint {
  position: absolute; left: 50%; top: 14%; width: max-content; margin: 0;
  transform: translateX(-50%); color: #e5dfbb; font-size: clamp(10px, calc(var(--scene-h) * .028), 16px);
  font-weight: 500; letter-spacing: .06em; text-shadow: 0 1px 3px #00454a;
}
body.game-active #game-shell .last-tile {
  position: absolute; left: 69%; top: 65%; min-height: 0; margin: 0; padding: 0;
  transform: translate(-50%, -50%);
}
body.game-active #game-shell .last-tile .tile {
  width: calc(var(--hand-tile-w) * .74); height: calc(var(--hand-tile-w) * .99);
}
body.game-active #game-shell .trick-hint {
  position: absolute; left: 69%; top: 72%; width: max-content; max-width: 26%; margin: 0;
  transform: translateX(-50%); color: #c4d9cd; font-size: clamp(9px, calc(var(--scene-h) * .025), 14px);
  letter-spacing: 0; text-shadow: 0 1px 2px #00383a;
}
body.game-active #game-shell .last-tile[data-from='0'] { left: 50%; top: 71%; }
body.game-active #game-shell .last-tile[data-from='0'] + .trick-hint { left: 50%; top: 77%; }
body.game-active #game-shell .last-tile[data-from='1'] { left: 69%; top: 53%; }
body.game-active #game-shell .last-tile[data-from='1'] + .trick-hint { left: 69%; top: 60%; }
body.game-active #game-shell .last-tile[data-from='2'] { left: 65%; top: 24%; }
body.game-active #game-shell .last-tile[data-from='2'] + .trick-hint { left: 65%; top: 31%; }
body.game-active #game-shell .last-tile[data-from='3'] { left: 30%; top: 53%; }
body.game-active #game-shell .last-tile[data-from='3'] + .trick-hint { left: 30%; top: 60%; }
body.game-active #game-shell .table-effect {
  position: absolute; left: 50%; top: 67%; z-index: 22; transform: translate(-50%, -50%);
  padding: 2px 24px; border-radius: 50%; background: radial-gradient(ellipse, #5a370dbd, transparent 72%);
  color: #ffe078; font-family: 'KaiTi', 'DFKai-SB', serif; font-weight: 800;
  font-size: calc(var(--scene-h) * .13); line-height: 1.1;
  text-shadow: 1px 3px 0 #8b500a, 0 0 8px #ffcf6475; pointer-events: none;
}

/* The player's exposed groups precede the full size concealed hand. */
body.game-active #game-shell .player-rack {
  position: absolute; left: 5%; right: 10%; bottom: 3%;
  display: flex; align-items: flex-end; justify-content: flex-end; gap: 8px;
  width: auto; height: auto; min-width: 0; margin: 0; padding: 0; z-index: 8;
  pointer-events: auto;
}
body.game-active #game-shell .seat-you .seat-melds { position: static; bottom: auto; left: auto; max-width: none; }
body.game-active #game-shell .seat-you .seat-melds .tile.mini { width: var(--mini-w); height: var(--mini-h); }
body.game-active #game-shell .hand-row {
  position: static; display: flex; flex: none; align-items: flex-end; justify-content: start;
  gap: 9px; width: max-content; max-width: none; min-height: 0; padding: 0; margin: 0;
}
body.game-active #game-shell .hand-scroll { flex: none; width: max-content; min-width: 0; padding: 0; margin: 0; overflow: visible; }
body.game-active #game-shell .hand {
  display: flex; align-items: flex-end; justify-content: start; flex-wrap: nowrap;
  gap: 1px; width: max-content; min-height: var(--tile-h); margin: 0; padding: 0;
}
body.game-active #game-shell .hand .tile,
body.game-active #game-shell .drawn-slot .tile {
  flex: none; width: var(--hand-tile-w); height: var(--tile-h); min-width: 0; min-height: 0;
  aspect-ratio: auto; border-radius: 3px; box-shadow: 0 2px 0 #689c28, 0 3px 2px #28600980;
  touch-action: manipulation;
}
body.game-active #game-shell .drawn-slot {
  display: flex; flex: none; width: var(--hand-tile-w); min-height: var(--tile-h);
  margin: 0; padding: 0; border: 0; background: none; box-shadow: none;
}
body.game-active #game-shell .drawn-slot::before { content: none; }
body.game-active #game-shell .drawn-slot[hidden] { display: flex !important; visibility: hidden; }
body.game-active #game-shell .hand-row[data-drawn-in-hand='true'] .drawn-slot[hidden] { display: none !important; }
body[data-mode='zhangzhou'] .tile .white-substitute {
  position: absolute; top: 2px; left: 2px; z-index: 2; display: block;
  writing-mode: vertical-rl; text-orientation: upright; padding: 1px 0; border-radius: 1px;
  color: #fff3ff; background: #893ca5; box-shadow: 0 0 0 1px #5f2176;
  font: 700 clamp(7px, calc(var(--hand-tile-w, 42px) * .24), 11px) / 1.05 system-ui, sans-serif;
  pointer-events: none; user-select: none;
}
body[data-mode='zhangzhou'] .tile.mini .white-substitute {
  top: 1px; left: 1px; font-size: clamp(6px, calc(var(--mini-w, 24px) * .27), 8px);
}
body[data-mode='zhangzhou'] .wait-tile .white-substitute { top: 1px; left: 1px; font-size: 5px; }
body.game-active #game-shell .tile .tile-face { width: calc(100% - 1px); height: calc(100% - 2px); border-radius: 3px; }
body.game-active #game-shell .hand .tile.selected,
body.game-active #game-shell .drawn-slot .tile.selected { transform: translateY(calc(var(--scene-h) * -.025)); z-index: 10; }
body.game-active #game-shell .hand .tile.selected .tile-face,
body.game-active #game-shell .drawn-slot .tile.selected .tile-face { box-shadow: inset 0 1px 1px #fff, 0 0 0 1px #ffe080; }
body.game-active #game-shell .wait-hint {
  position: absolute; bottom: calc(3% + var(--tile-h) + 4px); right: 10%; z-index: 7;
  display: flex; gap: 3px; width: max-content; max-width: 33%; padding: 2px 5px; margin: 0;
  border-radius: 5px; background: #063a3dc7; color: #e8e3c6; font-size: 9px;
}
body.game-active #game-shell .wait-hint[hidden] { display: none; }

/* Claims stay by the right thumb, with the source tile visible above them. */
body.game-active #game-shell .action-bar {
  position: absolute; inset: auto 12% 21% auto; display: grid; grid-template-columns: 1fr;
  width: max-content; max-width: 42%; max-height: 66%;
  margin: 0; padding: 0; gap: 7px; border: 0; border-radius: 0;
  background: none; box-shadow: none; backdrop-filter: none; overflow: visible;
  z-index: 20; pointer-events: auto;
}
body.game-active #game-shell .action-bar[hidden] { display: none; }
body.game-active #game-shell .action-bar[data-action-type='turn'] {
  inset: auto 11% calc(3% + var(--tile-h) + 5px) auto; padding: 0; gap: 5px;
}
body.game-active #game-shell .action-bar[data-action-type='turn']:has(.action-buttons > button:not([hidden])) { min-width: 0; }
body.game-active #game-shell .action-prompt { margin: 0; font-size: clamp(10px, calc(var(--scene-h) * .026), 15px); text-shadow: 0 1px 3px #013437; }
body.game-active #game-shell .action-bar[data-action-type='claim'] .action-prompt { display: none; }
body.game-active #game-shell .claim-context {
  display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 6px;
  padding: 5px 8px; border: 1px solid #b3d5af8c; border-radius: 8px;
  background: #063a3ddc; box-shadow: 0 4px 10px #002c2d50;
}
body.game-active #game-shell .claim-context[hidden] { display: none; }
body.game-active #game-shell .claim-preview .tile { width: 30px; height: 40px; }
body.game-active #game-shell .claim-description { font-size: clamp(11px, calc(var(--scene-h) * .029), 17px); color: #fff0c2; white-space: nowrap; }
body.game-active #game-shell .action-buttons { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 7px; min-width: 0; }
body.game-active #game-shell .action-buttons:has(> button:not([hidden])) { min-width: 0; }
body.game-active #game-shell .action-buttons button,
body.game-active #game-shell .action-buttons #btn-hu,
body.game-active #game-shell .action-buttons #btn-pass {
  flex: none; display: grid; place-items: center; width: clamp(44px, calc(var(--scene-h) * .145), 80px);
  height: clamp(44px, calc(var(--scene-h) * .145), 80px); min-width: 44px; min-height: 44px;
  padding: 0; border: 2px solid #ead38b; border-radius: 50%;
  background: radial-gradient(circle at 32% 20%, #f2d472, #b07d24 67%, #745016);
  color: #fff5cc; font-family: 'KaiTi', 'DFKai-SB', serif;
  font-size: clamp(22px, calc(var(--scene-h) * .071), 40px); font-weight: 800;
  text-shadow: 0 2px 0 #885016; box-shadow: inset 0 0 0 2px #d4a648, 0 3px 6px #00342a80;
}
body.game-active #game-shell .action-buttons #btn-pass {
  color: #e4eee4; border-color: #77b5a6;
  background: radial-gradient(circle at 30% 20%, #44847b, #145957 66%, #063b3e);
  text-shadow: 0 1px 0 #064147; box-shadow: inset 0 0 0 2px #336f67, 0 3px 6px #00342a80;
  font-size: clamp(13px, calc(var(--scene-h) * .04), 23px);
}
body.game-active #game-shell .action-buttons #btn-hu { border-color: #ffd299; background: radial-gradient(circle at 30% 20%, #f2bb65, #bc5225 65%, #6d301b); }
body.game-active #game-shell .action-buttons #btn-ankong,
body.game-active #game-shell .action-buttons #btn-jiakong { font-size: clamp(13px, calc(var(--scene-h) * .041), 23px); }
body.game-active #game-shell .action-buttons button:has(.action-kind) {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 2px; line-height: 1; overflow: hidden;
}
body.game-active #game-shell .action-kind { display: block; line-height: 1; }
body.game-active #game-shell .action-tile-name {
  display: block; max-width: calc(100% - 5px); font: 600 clamp(9px, calc(var(--scene-h) * .026), 14px) / 1.1 system-ui, sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.game-active #game-shell .action-buttons button[hidden] { display: none !important; }
body.game-active #game-shell .seat-you:has(.action-bar[data-action-type='claim']:not([hidden])) .hand .tile,
body.game-active #game-shell .seat-you:has(.action-bar[data-action-type='claim']:not([hidden])) .drawn-slot .tile { filter: brightness(.76); }
body.game-active #game-shell .table-felt:has(.action-bar[data-action-type='claim']:not([hidden])) .last-tile,
body.game-active #game-shell .table-felt:has(.action-bar[data-action-type='claim']:not([hidden])) .trick-hint { visibility: hidden; }
body.game-active #game-shell .action-bar:has(.chi-picker:not([hidden])) {
  inset: auto 18% 21% 18%; grid-template-columns: auto minmax(0, 1fr);
  width: auto; max-width: none; padding: 9px; border: 1px solid #d6c38799;
  border-radius: 12px; background: #073b3ded; box-shadow: 0 7px 20px #002c2e80;
}
body.game-active #game-shell .action-bar:has(.chi-picker:not([hidden])) .claim-context { flex-direction: column; }
body.game-active #game-shell .action-bar:has(.chi-picker:not([hidden])) .action-buttons { grid-column: 1 / -1; }
body.game-active #game-shell .chi-picker {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  align-items: stretch; max-height: calc(var(--scene-h) * .35); overflow: auto;
}
body.game-active #game-shell .chi-picker[hidden] { display: none; }
body.game-active #game-shell .chi-picker .picker-heading { grid-column: 1 / -1; }
body.game-active #game-shell .chi-picker .chi-option { min-width: 0; padding: 5px 6px; }
body.game-active #game-shell .chi-picker .claim-option-tiles { justify-content: center; }
body.game-active #game-shell .claim-option-tiles .tile { width: 24px; height: 32px; }

/* Corner controls replace the stacked bars that consumed the mobile table. */
body.game-active #game-shell .hero { display: none; }
body.game-active #game-shell .private-toolbar {
  position: absolute; inset: max(7px, var(--safe-top)) max(10px, var(--safe-right)) auto max(10px, var(--safe-left));
  z-index: 30; display: flex; width: auto; max-width: none; height: 32px; min-height: 0;
  margin: 0; padding: 0; gap: 6px; border: 0; background: none;
  pointer-events: none; font-size: 10px;
}
body.game-active #game-shell .private-toolbar > * { pointer-events: auto; }
body.game-active #game-shell .private-mark { display: none; }
body.game-active #game-shell .lobby-link { margin-right: auto; padding: 5px 7px; color: #d4d9c3; font-size: 10px; border: 1px solid #b0c6b847; border-radius: 50px; background: #043d3bb8; }
body.game-active #game-shell .pause-toggle,
body.game-active #game-shell .private-toolbar select {
  min-height: 30px; padding: 4px 7px; border: 1px solid #b0c6b847; border-radius: 50px;
  background: #043d3bb8; color: #e3dfc2; font-size: 10px;
}
body.game-active #game-shell .speed-label { gap: 0; font-size: 0; }
body.game-active #game-shell .table-chrome { position: static; display: contents; min-height: 0; padding: 0; margin: 0; }
body.game-active #game-shell .meter {
  position: absolute; top: 43px; left: max(11px, var(--safe-left)); right: auto; bottom: auto;
  z-index: 8; display: flex; gap: 5px; width: max-content; max-width: 21%;
  min-height: 0; margin: 0; padding: 3px 5px; font-size: 10px;
  border: 1px solid #a6b79630; border-radius: 5px; background: #053d3bb0; box-shadow: none;
}
body.game-active #game-shell .meter-item { display: none; flex-direction: row; gap: 2px; min-width: 0; }
body.game-active #game-shell .meter-item:first-child,
body.game-active #game-shell .meter-item:nth-child(3) { display: flex; }
body.game-active #game-shell .meter-item .label { display: inline; font-size: 9px; }
body.game-active #game-shell .meter-item::before { content: none; }
body.game-active #game-shell .controls {
  position: absolute; top: 42px; right: max(11px, var(--safe-right)); left: auto; bottom: auto;
  z-index: 31; width: max-content; min-height: 0; margin: 0; padding: 0; gap: 5px;
}
body.game-active #game-shell .controls button,
body.game-active #game-shell .more-menu summary {
  min-height: 30px; min-width: 36px; width: auto; padding: 4px 8px; border: 1px solid #b0c6b847;
  border-radius: 50px; background: #043d3bb8; color: #e3dfc2; font-size: 10px;
}
body.game-active #game-shell #btn-auto { font-size: 10px; }
body.game-active #game-shell #btn-auto::before { content: none; }
body.game-active #game-shell .more-menu summary::before { content: none; }
body.game-active #game-shell .more-menu-popover { min-width: 145px; z-index: 40; }
body.game-active #game-shell .gold-strip {
  position: absolute; top: 76px; left: max(11px, var(--safe-left)); right: auto; bottom: auto;
  z-index: 8; display: flex; align-items: center; gap: 4px; width: max-content; max-width: 18%;
  min-height: 0; margin: 0; padding: 3px 5px; border: 1px solid #d3be7355;
  border-radius: 5px; background: #033c3be0; box-shadow: none;
}
body.game-active #game-shell .gold-strip p { width: 60px; max-height: 35px; overflow: auto; font-size: 8px; line-height: 1.3; }
body.game-active #game-shell .gold-strip strong { font-size: 9px; }
body.game-active #game-shell .gold-indicator .tile { width: 19px; height: 25px; }
body.game-active #game-shell .flash { top: 15%; z-index: 45; }
body.game-active #game-shell .status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

@container (max-height: 360px) and (min-width: 600px) {
  body.game-active #game-shell .seat-meta { font-size: 9px; }
  body.game-active #game-shell .gold-strip { top: 71px; }
  body.game-active #game-shell .action-bar:has(.chi-picker:not([hidden])) { inset-inline: 16%; padding: 5px; }
  body.game-active #game-shell .claim-description { font-size: 10px; }
  body.game-active #game-shell .claim-preview .tile { width: 24px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  body.game-active #game-shell .tile { transition: none; }
}