/* A single logical landscape canvas, including the mobile portrait fallback. */
:root {
  color-scheme: dark;
  --bg: #081d1c;
  --panel: #102e2b;
  --text: #f4f1e6;
  --muted: #a2bbb0;
  --line: #38534b;
  --accent: #d6b775;
  --on-accent: #1a2a24;
  --brass: #d6b775;
  --select-lift: 9px;
}
body {
  background: radial-gradient(ellipse at 50% 0, #25483b, transparent 65%), #081d1c;
  color: var(--text);
  font-family: 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
body[data-game-active='true'], body.landscape-table { overflow: hidden; overscroll-behavior: none; }
#game-shell {
  --game-width: 100vw;
  --game-height: 100dvh;
  --hand-tile-w: clamp(24px, calc((var(--game-width) - 116px) / 17), 52px);
  --tile-face-w: var(--hand-tile-w);
  --tile-h: calc(var(--hand-tile-w) * 4 / 3);
  --mini-w: clamp(16px, calc(var(--game-width) / 40), 25px);
  --mini-h: calc(var(--mini-w) * 4 / 3);
  --hand-gap: 3px;
  --chrome-h: 38px;
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  flex-direction: column;
  container-type: size;
  width: var(--game-width);
  height: var(--game-height);
  max-width: 100%;
  min-height: 0;
  margin: 0 auto;
  overflow: hidden;
}
body.landscape-table #game-shell {
  --safe-left: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-left, 0px);
  position: fixed;
  left: calc(var(--viewport-left, 0px) + var(--viewport-width) / 2);
  top: calc(var(--viewport-top, 0px) + var(--viewport-height) / 2);
  max-width: none;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center;
}
#game-shell > main {
  position: relative;
  width: 100%;
  max-width: 1240px;
  height: auto;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0 auto;
  padding: 8px max(22px, var(--safe-right)) max(12px, var(--safe-bottom)) max(22px, var(--safe-left));
  overflow: hidden;
}
#game-shell .private-toolbar {
  flex: 0 0 calc(56px + var(--safe-top));
  height: calc(56px + var(--safe-top));
  max-width: 1240px;
  width: 100%;
  padding: max(0px, var(--safe-top)) max(26px, var(--safe-right)) 0 max(26px, var(--safe-left));
  margin: 0 auto;
  gap: 16px;
  color: #b4c7ba;
  font-size: 13px; font-weight: 500; line-height: 1.3;
  border-bottom: 1px solid #bdd9bd14;
}
#game-shell .lobby-link { color: #c0cec1; text-decoration: none; letter-spacing: .06em; }
#game-shell .private-mark { display: flex; gap: 12px; align-items: center; color: #e3d7b7; opacity: 1; margin-right: auto; }
#game-shell .private-mark small { font-size: 10px; font-weight: 400; letter-spacing: .1em; color: #829d90; }
#game-shell .pause-toggle, #game-shell .private-toolbar select {
  background: #092320; color: #d6dfd4; border: 1px solid #7396803b;
  border-radius: 8px; min-height: 34px; padding: 6px 10px;
}
#game-shell .hero { padding: 12px 0 6px; }
#game-shell .hero h1 { color: #eee5cc; font-size: 30px; font-weight: 500; letter-spacing: .18em; }
#game-shell .tagline { color: #8ca99b; font-size: 12px; margin-top: 8px; letter-spacing: .08em; }
#game-shell .table-chrome {
  display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto;
  min-height: 40px; gap: 12px; padding: 0 6px;
}
#game-shell .meter, #game-shell .controls {
  position: static; inset: auto; z-index: 5; min-height: 0; margin: 0; padding: 0;
  display: flex; align-items: center; flex-wrap: nowrap; gap: 20px;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  color: #dddcc7; font-size: 12px; text-shadow: none; backdrop-filter: none;
}
#game-shell .meter { pointer-events: auto; }
#game-shell .meter-item { display: flex; flex-direction: row; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; }
#game-shell .meter-item::before { content: none; }
#game-shell .meter-item .label { display: inline; color: #89a799; font-size: 11px; }
#game-shell .meter-item strong { font-weight: 500; color: #eddfba; }
#game-shell .meter-rule { display: flex; }
#game-shell .controls { gap: 7px; }
button, summary, .tile { touch-action: manipulation; }
#game-shell .controls button, #game-shell .more-menu summary {
  background: #173b31; border: 1px solid #96bc9354; color: #d9e3d2;
  border-radius: 8px; min-height: 36px; min-width: 48px; padding: 7px 15px;
  text-shadow: none; backdrop-filter: none; font-size: 12px;
}
#game-shell #btn-deal { background: #d6b775; border-color: #e8cc8c; color: #24352b; font-weight: 700; }
#game-shell #btn-auto::before { content: none; }
#game-shell #btn-auto[aria-pressed='true'] { background: #d6b775; border-color: #d6b775; color: #18382e; }
#game-shell .more-menu { margin: 0; }
#game-shell .more-menu summary { width: auto; }
#game-shell .more-menu summary::before { content: none; }
#game-shell .more-menu-popover { background: #102e2b; border-color: #677e6159; padding: 7px; z-index: 30; width: 150px; }
#game-shell .status { text-align: center; color: #87a89a; font-size: 12px; flex: 0 0 auto; }
#game-shell .flash { z-index: 20; top: 65px; background: #102a25f2; color: #f1d28d; font-size: 12px; }
#game-shell .gold-strip {
  position: static; inset: auto; min-height: 28px; flex: 0 0 auto; margin: -3px 6px 0;
  gap: 9px; padding: 3px 10px; border-radius: 7px;
  background: #071f1c; border: 1px solid #b4a46426; color: #c2b58e; box-shadow: none;
}
#game-shell .gold-strip p { font-size: 11px; line-height: 1.4; }
#game-shell .gold-strip strong { color: #e8cd8d; font-size: 11px; }
#game-shell .gold-indicator .tile { width: 15px; height: 20px; }
#game-shell .table {
  --rail: 7px;
  flex: 1 1 0; min-height: 0; height: auto; margin: 0; padding: var(--rail);
  border: 1px solid #8e997851; border-radius: 24px;
  background: linear-gradient(155deg, #4c6850, #132f29 38%, #09201e);
  box-shadow: inset 0 1px 0 #d8d7a438, inset 0 -3px 2px #041311, 0 12px 30px #0005;
}
#game-shell .table-felt {
  --tile-face-w: inherit; --tile-h: inherit; --mini-w: inherit; --mini-h: inherit;
  container-type: normal;
  position: relative; display: flex; flex-direction: column; flex: 1 1 0; min-height: 0;
  gap: 8px; padding: 16px 22px 14px; border-radius: 17px;
  background:
    repeating-linear-gradient(0deg, #ffffff02 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, #ffffff02 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 30%, #29644e 0, #184d3c 56%, #0e352e 100%);
  box-shadow: inset 0 2px 12px #001b1680, inset 0 0 0 1px #b6cca531;
}
#game-shell .table-felt::before {
  content: ''; position: absolute; inset: 10px; border: 1px solid #d4ddb31c;
  border-radius: 11px; pointer-events: none;
}
#game-shell .table-studs { display: none; }
#game-shell .table-play {
  display: grid; grid-template-rows: minmax(60px, .85fr) minmax(88px, 1fr);
  flex: 1 1 0; gap: 10px; min-height: 0; padding: 0; overflow: hidden;
}
#game-shell .seat { box-shadow: none; background: none; min-width: 0; border-radius: 0; }
#game-shell .seat-top { width: 42%; justify-self: center; margin: 0; min-height: 0; gap: 4px; }
#game-shell .seat-mid { display: grid; grid-template-columns: 31% 38% 31%; margin: 0; min-height: 0; gap: 0; align-items: start; }
#game-shell .seat-left, #game-shell .seat-right { min-height: 0; max-height: 100%; gap: 4px; overflow: hidden; }
#game-shell .seat-meta {
  display: inline-flex; flex-wrap: nowrap; align-items: center; justify-content: center;
  align-self: center; gap: 8px; padding: 4px 9px; margin: 0 0 2px;
  border: 1px solid #d9e9c323; border-radius: 8px;
  background: #092a2480; color: #dce4d0; font-size: 12px; box-shadow: none;
  white-space: nowrap;
}
#game-shell .seat-left .seat-meta { align-self: flex-start; }
#game-shell .seat-right .seat-meta { align-self: flex-end; }
#game-shell .seat-name, #game-shell .seat-you .seat-name { font-weight: 500; color: #f0ead7; letter-spacing: .04em; }
#game-shell .seat-wind { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: #c9d2ad1a; color: #dec991; font-size: 11px; }
#game-shell .seat-count { font-size: 10px; color: #91b49f; }
#game-shell .seat-score { color: #d1c8a5; font-size: 11px; }
#game-shell .seat.active-turn .seat-meta { background: #173e2e; border-color: #d6b77599; box-shadow: 0 0 0 1px #d6b77517; }
#game-shell .seat.active-turn .seat-name { color: #f2d695; }
#game-shell .seat-backs { display: flex; width: 100%; gap: 2px; flex-wrap: nowrap; margin: 0 0 3px; }
#game-shell .seat-backs .tile.back { width: clamp(9px, calc(var(--game-width) / 95), 14px); height: clamp(13px, calc(var(--game-width) / 72), 19px); border-radius: 2px; }
#game-shell .seat-backs .tile .tile-face { border-radius: 2px; }
#game-shell .seat-melds, #game-shell .seat-flowers, #game-shell .seat-discards {
  gap: 3px; margin: 0; min-height: 0; align-content: flex-start;
}
#game-shell .seat-melds:empty, #game-shell .seat-flowers:empty, #game-shell .seat-discards:empty, #game-shell .seat-backs:empty { display: none; }
#game-shell .seat-discards { flex: 1 1 auto; max-height: 100%; overflow: auto; padding: 0 1px 4px; }
#game-shell .seat-discards > .tile { opacity: .9; }
#game-shell .seat-discards > .tile.recent { opacity: 1; }
#game-shell .seat-discards .tile.mini { width: var(--mini-w); height: var(--mini-h); }
#game-shell .seat-melds .tile.mini, #game-shell .seat-flowers .tile.mini { width: calc(var(--mini-w) * .85); height: calc(var(--mini-h) * .85); }
#game-shell .meld-group { padding: 2px; border-radius: 3px; margin-right: 3px; gap: 2px; background: #00281b45; box-shadow: none; }
#game-shell .center-felt {
  position: relative; top: auto; width: 100%; height: 100%; min-height: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: 0 10px; border: 0; background: none; box-shadow: none;
}
#game-shell .center-felt::before {
  content: '一人的麻將館'; position: absolute; top: 6%; left: 50%; transform: translateX(-50%);
  white-space: nowrap; color: #dfd9a936; font-size: 15px; letter-spacing: .32em; font-family: 'Songti TC', serif;
}
#game-shell .turn-hint { color: #c8d9be; font-size: 12px; font-weight: 400; letter-spacing: .05em; z-index: 1; }
#game-shell .trick-hint { color: #afc6ae; font-size: 11px; letter-spacing: .03em; }
#game-shell .last-tile { min-height: 0; padding: 0; }
#game-shell .last-tile .tile { width: 43px; height: 57px; }
#game-shell .last-tile .tile.fresh .tile-face { animation: tile-land .18s ease-out; }
#game-shell .seat-you {
  position: relative; display: flex; flex-direction: column; flex: 0 0 auto;
  gap: 4px; margin: 0; padding: 8px 2px 0; border-top: 1px solid #d1dbc029;
  background: none; min-height: 0;
}
#game-shell .seat-you .seat-meta { align-self: flex-start; border: 0; background: none; padding: 0 4px; margin: 0; gap: 9px; }
#game-shell .seat-you.active-turn .seat-meta { box-shadow: none; }
#game-shell .seat-you .seat-melds { position: absolute; bottom: calc(100% + 1px); left: 0; max-width: 45%; z-index: 4; }
#game-shell .seat-you .seat-flowers { position: absolute; right: 2px; top: 6px; max-width: 42%; }
#game-shell .seat-you .seat-flowers .tile { width: 13px; height: 17px; }
#game-shell .seat-you .seat-discards { position: absolute; bottom: calc(100% + 5px); left: 28%; width: 44%; max-height: calc(var(--mini-h) + 5px); justify-content: center; opacity: .8; }
#game-shell .seat-you:has(.seat-melds:not(:empty)) .seat-discards { left: 48%; width: 35%; }
#game-shell .hand-row {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--hand-tile-w);
  width: min(100%, calc(var(--hand-tile-w) * 17 + 59px));
  align-self: center; align-items: end; column-gap: 14px; row-gap: 0;
  padding: 10px 0 5px; margin: 0; min-height: 0;
}
#game-shell .hand-scroll { grid-column: 1; width: 100%; min-width: 0; padding: 0; margin: 0; overflow: visible; }
#game-shell .hand { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 3px; min-height: var(--tile-h); padding: 0; }
#game-shell .drawn-slot {
  grid-column: 2; display: flex; width: 100%; align-self: end; align-items: end;
  min-height: 0; padding: 0; margin: 0; border: 0; background: none; box-shadow: none; overflow: visible;
}
#game-shell .drawn-slot::before { content: ''; width: 1px; height: 75%; left: -8px; top: 15%; transform: none; background: #d7deb647; }
#game-shell .drawn-slot[hidden] { display: flex !important; visibility: hidden; }
#game-shell .tile, .panel .tile {
  display: inline-block; position: relative; min-width: 0; min-height: 0;
  width: var(--tile-face-w); height: var(--tile-h); padding: 0;
  border: 0; border-radius: 4px; background: linear-gradient(180deg, #76ad24, #397706);
  box-shadow: 0 2px 0 #71a52c, 0 4px 0 #3f7b09, 0 5px 1px #1b4504, 0 7px 8px #001b1266;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
#game-shell .tile .tile-face, .panel .tile .tile-face {
  display: block; width: calc(100% - 3px); height: calc(100% - 4px); border: 1px solid #aab6a8;
  border-radius: 4px; background-color: #fff; background-size: 96% 96%;
  box-shadow: inset 0 2px 1px #fff, inset 1px 0 1px #fff, inset -1px -2px 2px #61705b28;
  pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
#game-shell .tile.back .tile-face, .panel .tile.back .tile-face { background-color: #4b9008; border-color: #749f40; border-top: 2px solid #e9f0e1; background-size: 100% 100%; box-shadow: inset 1px 0 1px #afd65466, inset -1px -2px 2px #26540266; }
#game-shell .tile.mini, .panel .tile.mini { width: var(--mini-w); height: var(--mini-h); border-radius: 2px; box-shadow: 0 2px 0 #43820a, 0 3px 1px #1d4804, 0 4px 3px #001f2166; }
#game-shell .tile.mini .tile-face, .panel .tile.mini .tile-face { width: calc(100% - 2px); height: calc(100% - 2px); border-radius: 2px; }
#game-shell .hand .tile, #game-shell .drawn-slot .tile {
  width: 100%; height: auto; aspect-ratio: 3 / 4; min-height: 0;
  transition: transform .12s ease; cursor: pointer;
}
#game-shell .hand .tile:disabled, #game-shell .drawn-slot .tile:disabled { opacity: 1; cursor: default; }
#game-shell .hand .tile.selected, #game-shell .drawn-slot .tile.selected { transform: translateY(-9px); z-index: 3; }
#game-shell .tile.selected .tile-face { border-color: #e9c879; box-shadow: inset 0 1px 1px white, 0 0 0 2px #e6c77c; }
#game-shell .tile.gold, .panel .tile.gold { outline: 1px solid #c4a51e; outline-offset: 0; }
#game-shell .tile.gold .tile-face, .panel .tile.gold .tile-face { background-color: #ffea48; border-color: #c1a322; box-shadow: inset 0 2px 1px #fffbb1, inset -1px -2px 2px #98710a33; }
#game-shell .tile.gold::after, .panel .tile.gold::after { top: 2px; left: 2px; right: auto; background: #fff49a; color: #80510b; border: 1px solid #d2ab39; border-radius: 2px; padding: 0 1px; font-size: 8px; line-height: 11px; }
#game-shell .tile.mini.gold::after, .panel .tile.mini.gold::after { top: 1px; left: 1px; font-size: 6px; line-height: 8px; }
#game-shell .gold-indicator .tile.gold::after, #game-shell .wait-tile .tile.gold::after { display: none; }
#game-shell .wait-hint { padding: 3px 7px; margin: 0; background: #092d244d; border: 0; box-shadow: none; max-height: 32px; overflow: auto; flex-wrap: nowrap; }
#game-shell .wait-label, #game-shell .wait-count { font-size: 10px; font-weight: 500; }
#game-shell .wait-tile .tile { width: 12px; height: 16px; }
#game-shell .wait-tile { background: none; padding: 0 2px; }
#game-shell .action-bar {
  display: grid; grid-template-columns: 1fr; position: absolute;
  width: max-content; max-width: min(580px, calc(var(--game-width) - 52px));
  inset-inline: 0; bottom: calc(100% + 12px); margin-inline: auto; gap: 9px;
  padding: 13px 16px; border: 1px solid #baaa6f85; border-radius: 14px;
  background: #092d26f5; color: #f3e9ca; box-shadow: 0 10px 26px #00110bc2;
  backdrop-filter: blur(16px); z-index: 15;
  max-height: calc(var(--game-height) - 155px); overflow: auto;
}
#game-shell .action-bar[hidden], #game-shell .claim-context[hidden] { display: none; }
#game-shell .action-prompt { display: block; font-size: 13px; color: #ead29b; margin: 0; font-weight: 500; text-align: center; }
#game-shell .action-bar[data-action-type='turn'] { padding: 8px 13px; gap: 6px; }
#game-shell .action-bar[data-action-type='turn']:has(.action-buttons > button:not([hidden])) { min-width: 210px; }
#game-shell .action-buttons { display: flex; gap: 7px; flex-wrap: nowrap; }
#game-shell .action-buttons:has(> button:not([hidden])) { min-width: 170px; }
#game-shell .action-buttons button {
  min-width: 66px; min-height: 43px; flex: 1 1 auto; padding: 9px 15px;
  font-size: 14px; font-weight: 600; letter-spacing: 0; text-indent: 0;
  background: #d5bc80; border: 1px solid #ead59a; color: #213c2a; border-radius: 8px;
  box-shadow: inset 0 1px 0 #fff5;
}
#game-shell .action-buttons #btn-hu { background: #b95645; border-color: #d7856a; color: #fff5db; flex-basis: auto; min-height: 43px; font-size: 14px; }
#game-shell .action-buttons #btn-pass { flex-basis: auto; color: #b4c9b5; background: transparent; border-color: #9aaa7157; min-height: 43px; }
#game-shell .claim-context { display: flex; gap: 12px; align-items: center; justify-content: center; }
#game-shell .claim-preview { display: flex; align-items: center; }
#game-shell .claim-preview .tile { width: 40px; height: 53px; }
#game-shell .claim-description { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: .02em; }
#game-shell .action-bar[data-action-type='claim'] .action-prompt { display: none; }
#game-shell .chi-picker { display: flex; gap: 9px; flex-wrap: wrap; max-height: min(180px, calc(var(--game-height) - 205px)); overflow: auto; padding: 3px; }
#game-shell .chi-picker[hidden] { display: none; }
#game-shell .picker-heading { flex: 1 0 100%; margin: 0; font-size: 12px; color: #b9c7af; text-align: center; }
#game-shell .chi-option { display: flex; flex-direction: column; gap: 7px; padding: 8px 12px; background: #214936; border-color: #728766; border-radius: 9px; color: #eadfbd; }
#game-shell .claim-option-tiles { display: flex; gap: 4px; align-items: center; }
#game-shell .claim-option-tiles .tile { width: 31px; height: 41px; }
#game-shell .claim-option-label { display: block; font-size: 10px; line-height: 1.4; }
#game-shell .claimed-tile { outline: 2px solid #e9bf60; outline-offset: 1px; }
.panel { background: #041a19c9; z-index: 60; backdrop-filter: blur(9px); padding: 20px; }
.panel[hidden] { display: none; }
.panel-card { width: min(520px, 100%); max-height: calc(100dvh - 40px); overflow: auto; padding: 26px; background: #12342d; color: #eee9d5; border: 1px solid #a6b08266; border-radius: 18px; box-shadow: 0 20px 60px #0008; }
.panel-card-wide { width: min(680px, 100%); }
.panel h2 { color: #eee0b7; letter-spacing: .08em; font-weight: 500; }
.panel .panel-note, .panel .about-body { color: #b4c7b5; font-size: 13px; line-height: 1.8; }
.panel .rules-form label { color: #d2d7c2; }
.panel input[type='number'], .panel select { color: #ecdfbe; background: #08261f; border: 1px solid #55715b; border-radius: 7px; }
.panel button { border: 1px solid #dcc48e; background: #d5bc80; color: #19392b; font-weight: 600; border-radius: 8px; }
.panel button.secondary { background: transparent; color: #c4d1bc; border-color: #6a8160; }
.panel .result-hand { gap: 4px; padding-bottom: 12px; }
@container (max-height: 520px) and (min-width: 600px) {
  #game-shell > main { padding: 4px max(10px, var(--safe-right)) max(8px, var(--safe-bottom)) max(10px, var(--safe-left)); gap: 4px; }
  #game-shell .private-toolbar { flex-basis: calc(39px + var(--safe-top)); height: calc(39px + var(--safe-top)); padding: var(--safe-top) max(16px, var(--safe-right)) 0 max(16px, var(--safe-left)); gap: 14px; font-size: 11px; }
  #game-shell .private-mark small { font-size: 9px; }
  #game-shell .pause-toggle, #game-shell .private-toolbar select { min-height: 29px; padding: 3px 9px; }
  #game-shell .table-chrome { min-height: 32px; }
  #game-shell .meter { gap: 16px; }
  #game-shell .controls button, #game-shell .more-menu summary { min-height: 30px; padding: 4px 11px; }
  #game-shell .gold-strip { min-height: 23px; padding: 2px 8px; }
  #game-shell .gold-strip p { font-size: 10px; }
  #game-shell .gold-indicator .tile { width: 12px; height: 16px; }
  #game-shell .table { --rail: 4px; border-radius: 16px; }
  #game-shell .table-felt { border-radius: 11px; padding: 8px 14px 6px; gap: 4px; }
  #game-shell .table-play { grid-template-rows: minmax(42px, .7fr) minmax(52px, 1fr); gap: 3px; }
  #game-shell .seat-meta { font-size: 11px; gap: 6px; padding: 2px 7px; margin-bottom: 0; }
  #game-shell .seat-wind { width: 17px; height: 17px; font-size: 10px; }
  #game-shell .seat-count, #game-shell .seat-score { font-size: 9px; }
  #game-shell .seat-backs { display: none; }
  #game-shell .seat-top, #game-shell .seat-left, #game-shell .seat-right { gap: 3px; }
  #game-shell .center-felt { gap: 5px; justify-content: center; padding: 0; }
  #game-shell .center-felt::before { display: none; }
  #game-shell .turn-hint { font-size: 10px; }
  #game-shell .trick-hint { font-size: 10px; }
  #game-shell .last-tile .tile { width: 29px; height: 39px; }
  #game-shell .seat-you { padding-top: 4px; gap: 0; }
  #game-shell .seat-you .seat-meta { padding: 0 2px; }
  #game-shell .hand-row { padding-top: 9px; padding-bottom: 4px; }
  #game-shell .seat-you .seat-discards { display: flex; }
  #game-shell .wait-hint { max-height: 22px; padding: 1px 5px; }
  #game-shell .action-bar { bottom: calc(100% + 3px); padding: 8px 10px; gap: 6px; border-radius: 10px; }
  #game-shell .action-bar:has(.chi-picker:not([hidden])) { grid-template-columns: auto minmax(0, 1fr); }
  #game-shell .action-bar:has(.chi-picker:not([hidden])) .action-buttons { grid-column: 1 / -1; }
  #game-shell .action-bar:has(.chi-picker:not([hidden])) .claim-context { flex-direction: column; gap: 6px; }
  #game-shell .claim-preview .tile { width: 27px; height: 36px; }
  #game-shell .claim-description { font-size: 13px; }
  #game-shell .action-buttons button, #game-shell .action-buttons #btn-hu, #game-shell .action-buttons #btn-pass { min-height: 37px; padding: 5px 12px; font-size: 12px; }
  #game-shell .action-prompt { font-size: 11px; }
  #game-shell .chi-picker { gap: 6px; padding: 2px; max-height: calc(var(--game-height) - 205px); }
  #game-shell .chi-option { padding: 5px 8px; gap: 5px; }
  #game-shell .claim-option-tiles .tile { width: 24px; height: 32px; }
  #game-shell .picker-heading { font-size: 10px; }
  #game-shell .hero { padding: 0; }
  #game-shell .hero h1 { font-size: 19px; }
  #game-shell .tagline { font-size: 10px; margin-top: 2px; }
  #game-shell .status { font-size: 10px; }
}
@container (max-height: 359px) and (min-width: 600px) {
  #game-shell .action-bar:has(.chi-picker:not([hidden])) {
    grid-template-columns: auto minmax(0, 1fr); max-width: calc(var(--game-width) - 80px);
  }
  #game-shell .action-bar:has(.chi-picker:not([hidden])) .action-buttons { grid-column: 1 / -1; }
  #game-shell .action-bar:has(.chi-picker:not([hidden])) .claim-context { flex-direction: column; gap: 4px; }
  #game-shell .chi-picker { max-height: 83px; }
  #game-shell .picker-heading { display: none; }
  #game-shell .claim-description { font-size: 11px; }
  #game-shell .seat-you .seat-flowers { top: 0; }
}
/* Setup remains upright; the match becomes a landscape canvas on touch phones. */
@container (max-width: 599px) {
  #game-shell > main { padding: 8px max(12px, var(--safe-right)) max(14px, var(--safe-bottom)) max(12px, var(--safe-left)); gap: 8px; }
  #game-shell .private-toolbar { padding: var(--safe-top) max(14px, var(--safe-right)) 0 max(14px, var(--safe-left)); font-size: 11px; gap: 9px; }
  #game-shell .private-mark { display: none; }
  #game-shell .lobby-link { margin-right: auto; }
  #game-shell .speed-label { font-size: 0; gap: 0; }
  #game-shell .speed-label select { font-size: 11px; }
  #game-shell .hero { padding: 19px 0 15px; }
  #game-shell .hero h1 { font-size: 26px; }
  #game-shell .table-chrome { align-items: start; flex-direction: column; gap: 10px; padding: 0; }
  #game-shell .meter { width: 100%; justify-content: space-between; gap: 5px; }
  #game-shell .meter-item { flex-direction: column; gap: 3px; }
  #game-shell .controls { width: 100%; }
  #game-shell #btn-deal { flex: 1; min-height: 44px; }
  #game-shell .controls button, #game-shell .more-menu summary { min-height: 44px; }
  #game-shell .table-felt { padding: 12px; }
  #game-shell .seat-count { display: none; }
  #game-shell .seat-meta { font-size: 10px; padding: 3px 5px; gap: 3px; }
  #game-shell .seat-top { width: 68%; }
  #game-shell .center-felt::before { font-size: 11px; letter-spacing: .12em; }
  #game-shell .center-felt { padding: 0; }
  #game-shell .turn-hint, #game-shell .trick-hint { font-size: 9px; }
  #game-shell .hand-row { grid-template-columns: minmax(0, 1fr) var(--hand-tile-w); width: 100%; gap: 7px; }
  #game-shell .hand { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  #game-shell .tile, #game-shell .action-bar { transition: none; }
}