:root {
  color-scheme: dark;
  --paper: #f6f0df;
  --muted: #a8beb4;
  --gold: #e4c58a;
  --felt: #174f40;
  --felt-deep: #0d3029;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
}
* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: #879a7c66 transparent; }
html, body { margin: 0; height: 100%; }
body {
  height: 100dvh; display: flex; flex-direction: column; color: var(--paper);
  background: radial-gradient(ellipse at 50% 0%, #28352f, #111c19 72%);
  -webkit-tap-highlight-color: transparent;
}
button, a { touch-action: manipulation; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid #f3d494; outline-offset: 4px; }
.top { flex: 0 0 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(1240px, 100%); margin: auto; padding: 0 30px; }
.brand { white-space: nowrap; display: flex; align-items: center; gap: 12px; font-size: 21px; font-weight: 700; letter-spacing: .16em; }
.brand::before { content: "五"; display: grid; place-items: center; width: 30px; height: 36px; border: 1px solid #d6c39c; border-radius: 5px; color: #e7d1a4; font: 22px "Songti SC", serif; box-shadow: 0 3px 0 #716346; }
.meta { white-space: nowrap; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.meta b { color: var(--paper); font-weight: 600; }
.links { white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.links a { padding: 10px; color: var(--muted); font-size: 13px; text-decoration: none; }
.links a:hover { color: var(--paper); }
.stage { isolation: isolate; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); flex: 1; min-height: 0; display: grid; place-items: center; padding: 0 24px 24px; }
.wood { min-height: 0; width: min(1200px, 100%); height: 100%; max-height: 760px; padding: 12px; border-radius: 32px; background: linear-gradient(145deg, #776049, #3b3027 45%, #66503b); border: 1px solid #93816a; box-shadow: 0 22px 50px #0005, inset 0 1px 1px #ffffff35; }
.felt {
  container: table / size;
  position: relative; height: 100%; min-height: 0; border-radius: 22px; padding: 24px;
  display: grid; grid-template-columns: 160px minmax(0, 1fr) 160px; grid-template-rows: minmax(0, 1fr) auto; gap: 12px;
  background: radial-gradient(ellipse at 50% 35%, #26644f, #174f40 55%, #103d32);
  border: 1px solid #b3b38c60; box-shadow: inset 0 0 70px #071b1555;
}
.felt::before { content: ""; position: absolute; inset: 10px; border: 1px solid #d8c39313; border-radius: 14px; pointer-events: none; }
.seat { min-width: 0; position: relative; }
.seat.left { grid-area: 1 / 1; }
.seat.right { grid-area: 1 / 3; }
.seat.opp { container-type: size; }
.badge { display: grid; grid-template-columns: 32px 1fr; gap: 2px 9px; align-content: center; padding: 10px; width: 150px; border: 1px solid #ffffff13; border-radius: 10px; background: #082b2580; font-size: 12px; box-shadow: 0 5px 12px #0001; }
.seat.active .badge { border-color: #f1cd7a; background: #4c522dcc; box-shadow: 0 0 0 2px #e4c58a35, 0 0 22px #e4c58a25; }
.seat-state { position: absolute; right: 5px; bottom: -10px; padding: 3px 7px; border-radius: 4px; background: #eed399; color: #342b17; font-size: 11px; font-weight: 700; white-space: nowrap; z-index: 2; }
.seat.winner .badge { border-color: #f0b26c; background: #6d3228; box-shadow: 0 0 0 2px #e4c58a55, 0 0 28px #e9b47340; }
.win-mark { position: absolute; top: -12px; right: -8px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid #f6da9a; border-radius: 50%; background: #ac3c2e; color: #ffedbc; font: 700 24px "Songti SC", serif; box-shadow: 0 3px 10px #0004; }
.seat.winner .rack { filter: drop-shadow(0 0 5px #e6c27a80); }
.avatar { grid-row: span 2; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #44685a; color: #e6debf; font-size: 15px; font-weight: 600; }
.seat.right .avatar { background: #536657; }
.who { color: #d7dfd5; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.pts { color: #f3d79c; font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.pts small { font-size: 10px; color: var(--muted); margin-left: 4px; font-weight: 400; }
.tag { font-style: normal; font-size: 10px; padding: 1px 4px; border-radius: 3px; background: #d6ba7720; color: #edcd85; }
.seat.opp .badge { position: absolute; top: 0; }
.seat.right .badge { right: 0; }
.rack, .hand, .melds, .river, .meld { display: flex; }
.hand, .melds, .river { gap: 3px; }
.seat.opp .rack { flex-direction: row-reverse; position: absolute; top: 72px; bottom: 16px; left: 12px; align-items: center; gap: 12px; }
.seat.right .rack { left: auto; right: 12px; flex-direction: row; }
.seat.opp .hand, .seat.opp .melds { flex-direction: column; gap: 2px; }
.seat.opp .hand .tile { --w: clamp(2px, calc((100cqh - 114px) / 14), 24px); }
.seat.opp .hand .tile, .seat.opp .meld .tile { width: calc(var(--w) * 1.38); height: var(--w); padding: 2px; }
.seat.opp .hand .tile img, .seat.opp .meld .tile img { width: calc(var(--w) - 4px); height: calc(var(--w) * 1.38 - 4px); max-width: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(90deg); }
.seat.right .hand .tile img, .seat.right .meld .tile img { transform: translate(-50%, -50%) rotate(-90deg); }
.seat.opp .melds { gap: 9px; }
.seat.opp .meld { flex-direction: column; gap: 2px; }
.seat.right .meld { flex-direction: column-reverse; }
.seat.opp .meld .tile { --w: clamp(10px, calc((100cqh - 100px) / 17), 22px); }
.seat.opp .river {
  --river-w: clamp(8px, calc((100cqh - 112px) / var(--river-rows-wide, 1) / 1.55), 22px);
  position: absolute; left: 88px; top: 84px; display: grid;
  grid-template-columns: repeat(3, var(--river-w)); width: max-content; gap: 3px; padding: 3px;
}
.seat.right .river { right: 88px; left: auto; }
.seat.opp .river .tile { --w: var(--river-w); }
.waits { color: #e6cc91; font-size: 12px; text-align: center; }
.waits:empty { display: none; }
.seat.opp .waits { position: absolute; bottom: 0; width: 100%; overflow-wrap: anywhere; }
.seat.opp .waits.liang-public {
  z-index: 3;
  padding: 3px 4px 2px;
  border: 1px solid #e4c58a66;
  border-radius: 6px;
  background: linear-gradient(180deg, #173e32e8, #0b2b24f2);
  box-shadow: 0 2px 8px #061b1488;
}
.pond { grid-area: 1 / 2; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.table-mark { color: #d8d7b643; font: 25px "Songti SC", serif; letter-spacing: .32em; }
.table-mark small { display: block; font: 9px/2 sans-serif; letter-spacing: .25em; text-align: center; }
.disc { display: grid; place-items: center; min-height: 100px; }
.disc .pad { display: grid; place-items: center; }
.disc .hint { color: #b4c7b4; font-size: 12px; }
.wall-chip { color: #9eb7a6; font-size: 11px; letter-spacing: .08em; }
.turn-state { min-height: 26px; padding: 6px 12px; border-radius: 5px; color: #d8dfd2; background: #0b3026b0; font-size: 14px; font-weight: 600; text-align: center; }
.turn-state.your-turn { color: #ffdfa2; background: #e4c58a22; box-shadow: 0 0 0 1px #e4c58a66; }
.turn-state::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; margin: 0 7px 2px 0; }
.seat.self { grid-area: 2 / 1 / 3 / 4; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; }
.seat.self > .badge { display: none; }
/* Fixed rows of discards stay visible; no nested scroller on the table. */
.seat.self .river {
  --river-w: 25px; display: grid; grid-template-columns: repeat(var(--self-cols-wide, 1), var(--river-w));
  flex: 0 0 auto; width: max-content; max-width: 100%; height: auto; gap: 3px; padding: 4px;
}
.seat.self .river:empty { display: none; }
.seat.self .river .tile { --w: var(--river-w); }
.dock { width: 100%; border-radius: 10px; }
.seat.self.active .dock { background: #e4c58a0a; box-shadow: 0 0 0 2px #e4c58a70, 0 0 24px #e4c58a15; }
.seat.self.winner .dock { background: #a4412720; box-shadow: 0 0 0 2px #efc57d, 0 0 30px #e4c58a30; }
.round-result[hidden] { display: none; }
.pond:has(.round-result:not([hidden])) .table-mark, .pond:has(.round-result:not([hidden])) .wall-chip, .pond:has(.round-result:not([hidden])) .turn-state { display: none; }
.round-result { max-width: 100%; padding: 9px 14px; border: 1px solid #e9c17a; border-radius: 8px; background: #79372de8; color: #ffe6ad; text-align: center; font-size: 20px; font-weight: 700; box-shadow: 0 5px 22px #0003; }
.round-result.draw-result { background: #173a30; border-color: #a5b6a1; color: #d5dfcd; font-size: 16px; }
.bar { min-height: 46px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.bar .hint { font-size: 12px; color: #b7c8ba; }
.seat.self .rack { justify-content: center; align-items: flex-end; gap: 14px; padding: 12px 0 6px; }
.seat.self .hand { align-items: flex-end; justify-content: center; min-width: 0; }
.seat.self .hand .tile { --w: clamp(24px, min(4vw, 8dvh), 56px); }
.seat.self .melds { flex-wrap: wrap; max-width: 40%; gap: 7px; }
.meld { gap: 2px; }
.tile {
  --w: 38px; position: relative; flex: 0 0 auto; width: var(--w); height: calc(var(--w) * 1.38);
  display: grid; place-items: center; margin: 0; padding: 4px 3px; border: 1px solid #d0c4a5; border-radius: 5px;
  background: linear-gradient(145deg, #fffef4, #ece8d3); box-shadow: 0 3px 0 #a99d7d, 0 5px 7px #071b2338;
  user-select: none; overflow: hidden; color: #123528;
}
.tile img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.tile.xs { --w: 25px; padding: 2px; border-radius: 3px; }
.tile.sm { --w: 30px; }
.tile.hero { --w: clamp(32px, 7dvh, 62px); }
.tile.face-down { background: linear-gradient(100deg, #f1ecce 0 13%, #4c8060 14%, #275942 80%); border-color: #719177; box-shadow: 0 2px 0 #153a2a; }
.tile.drawn { box-shadow: 0 0 0 1px #e7cb8b, 0 3px 0 #a99d7d, 0 5px 7px #071b2338; }
.seat.self .hand .drawn:not(:first-child) { margin-left: 13px; }
.tile.last { box-shadow: 0 0 0 2px #dab887, 0 3px 0 #a99d7d; }
.tile.win, .tile.sel { transform: translateY(-9px); box-shadow: 0 0 0 2px #f3d596, 0 7px 14px #0005; }
.tile.dim { opacity: .45; }
.tile.feed { box-shadow: 0 0 0 2px #d45a4a, 0 3px 0 #a99d7d; }
.tile.feed .tile-flag {
  position: absolute; top: 2px; left: 2px; z-index: 1; padding: 0 3px; border-radius: 2px;
  background: #9b2d24; color: #ffe4c4; font-size: 9px; line-height: 1.4; font-weight: 700;
}
.tile.public { box-shadow: 0 0 0 1px #e4c58a88, 0 3px 0 #a99d7d; }
.tile.hit { box-shadow: 0 0 0 3px #f3d596, 0 0 18px #e4c58a99, 0 3px 0 #a99d7d; transform: translateY(-4px); }
.wait-public { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; align-items: center; }
.wait-face { display: grid; justify-items: center; gap: 1px; }
.wait-face small { color: #e6cc91; font-size: 10px; }
.wait-face.ka5 .tile { box-shadow: 0 0 0 2px #f0b26c, 0 3px 0 #a99d7d; }
.wait-face.ka5 small { color: #ffe6ad; }
.seat.opp .waits .tile { --w: 22px; }
.seat.liang .badge { border-color: #e4c58a88; }
.wait-chip { padding: 1px 6px; border-radius: 999px; background: #0b3026b0; border: 1px solid #e4c58a55; }
.wait-chip.ka5 { background: #6d3228; border-color: #f0b26c; color: #ffe6ad; }
.buycode[hidden] { display: none; }
.buycode {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center;
  background: #071b15cc; padding: 24px;
}
.buycode-card {
  width: min(520px, calc(100vw - 32px)); padding: 22px; border-radius: 16px;
  border: 1px solid #e4c58a88; background: #132e26; text-align: center;
  box-shadow: 0 18px 60px #0008;
}
.buycode-kicker { margin: 0; color: #9eb7a6; font-size: 12px; letter-spacing: .12em; }
.buycode-card h3 { margin: 8px 0 16px; color: #e8cf9d; }
.buycode-flip { display: grid; place-items: center; min-height: 110px; perspective: 400px; }
.buycode-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 8px; min-height: 110px; }
.buycode-flip .tile, .buycode-row .tile { transition: transform .35s; }
.buycode-flip:not(.open) .tile { transform: rotateY(90deg); }
.tile.miss { opacity: .42; filter: grayscale(.3); }
.buy-faces { display: flex; flex-wrap: wrap; gap: 4px; grid-column: 1 / -1; }
.buycode-hit { margin: 10px 0 4px; font-size: 20px; font-weight: 700; color: #ffe6ad; }
.buycode-hint { margin: 0 0 12px; color: #c2cfc2; font-size: 13px; }
.buycode-label { margin: 10px 0 6px; color: #9eb7a6; font-size: 12px; letter-spacing: .08em; }
.buycode-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 14px; }
.legend-tile { display: grid; justify-items: center; gap: 2px; opacity: .45; }
.legend-tile small { color: #9eb7a6; font-size: 10px; }
.legend-tile.on { opacity: 1; filter: drop-shadow(0 0 6px #e4c58a); }
.legend-tile.on .tile { box-shadow: 0 0 0 2px #f3d596; }
.buy-summary { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; margin: 0 0 12px; padding: 8px; border: 1px solid #e4c58a44; border-radius: 8px; }
.buy-summary b { grid-column: 1 / -1; color: #e8cf9d; }
.buy-summary small { grid-column: 2; color: #9eb7a6; }
.tile.click { cursor: pointer; touch-action: pan-y; transition: transform .15s, box-shadow .15s; }
.tile.click:active { transform: translateY(-5px); }
.btn { min-height: 40px; padding: 0 17px; border: 1px solid #d7d9b733; border-radius: 7px; background: #123a2d; color: #e0e8de; cursor: pointer; font-weight: 500; }
.btn:hover { background: #365b47; border-color: #c5cbaa88; }
.btn.sm { min-height: 34px; padding: 0 12px; font-size: 12px; }
.btn.primary, .btn.hu { color: #30291b; background: #e4c58a; border-color: #eed7a9; box-shadow: 0 2px 0 #947642; }
.btn.primary:hover, .btn.hu:hover { background: #f3d7a5; }
.btn.hu { min-width: 72px; font-size: 21px; font-weight: 700; }
.btn.gold { color: #f0d59b; border-color: #d5b57877; }
.btn.ghost { background: transparent; color: #b8c8bc; }
.sheet, .records { position: fixed; z-index: 100; width: min(380px, calc(100vw - 32px)); padding: 22px; border: 1px solid #72816a; border-radius: 16px; background: #132e26; box-shadow: 0 18px 60px #0008; overflow: auto; overscroll-behavior: contain; }
.sheet { right: 28px; bottom: 28px; max-height: calc(100dvh - 56px); }
.records { right: 28px; top: 70px; max-height: calc(100dvh - 98px); }
.sheet[hidden], .records[hidden] { display: none; }
.sheet h2, .records h2 { margin: 0 0 14px; color: #e8cf9d; font-size: 20px; }
.records header { display: flex; align-items: center; justify-content: space-between; }
.records header h2 { margin: 0; }
.records ol, .sheet ul { padding-left: 22px; color: #c2cfc2; font-size: 13px; line-height: 1.8; }
.records li { padding: 6px 0; border-bottom: 1px solid #ffffff0d; }
.scores { font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .tile.click:hover { transform: translateY(-7px); }
  .tile.click.sel:hover { transform: translateY(-9px); }
}
@media (max-width: 780px) {
  .top { flex-basis: 56px; padding: env(safe-area-inset-top) 12px 0; gap: 8px; }
  .brand { font-size: 16px; gap: 6px; letter-spacing: .08em; }
  .brand::before { width: 22px; height: 27px; font-size: 17px; }
  .meta { font-size: 11px; }
  .links { gap: 3px; }
  .links .btn.sm { padding: 0 8px; }
  .links a { font-size: 11px; padding: 8px 2px; }
  .stage { padding: 0 6px 8px; }
  .wood { padding: 5px; border-radius: 19px; }
  .felt { padding: 12px 8px; border-radius: 14px; grid-template-columns: 64px minmax(0, 1fr) 64px; gap: 6px; }
  .felt::before { inset: 5px; border-radius: 9px; }
  .badge { width: 64px; grid-template-columns: 1fr; justify-items: center; gap: 3px; padding: 6px 2px; font-size: 10px; border-radius: 7px; }
  .avatar { display: none; }
  .pts { font-size: 13px; }
  .pts small { display: none; }
  .who { gap: 3px; }
  .seat.opp .rack { top: 68px; bottom: 20px; left: 0; gap: 5px; }
  .seat.right .rack { right: 0; left: auto; }
  /* Keep concealed cards readable when a public wait label or settlement
     panel reduces the side seat's available row. The rack may extend the
     table's scroll height, but cards must never collapse into hairlines. */
  .seat.opp .hand .tile { --w: clamp(8px, calc((100cqh - 114px) / 14), 22px); }
  .seat.opp .meld .tile { --w: clamp(8px, calc((100cqh - 100px) / 18), 14px); }
  .seat.opp .melds { gap: 5px; }
  .seat.opp .river { --river-w: clamp(6px, calc((100cqh - 100px) / var(--river-rows-narrow, 1) / 1.55), 16px); left: 58px; top: 70px; grid-template-columns: repeat(2, var(--river-w)); padding: 1px; gap: 2px; }
  .seat.right .river { right: 58px; left: auto; }
  .seat-state { right: 0; bottom: -13px; font-size: 10px; padding: 2px 5px; }
  .win-mark { width: 30px; height: 30px; font-size: 21px; top: -10px; right: -5px; }
  .seat.opp .waits { font-size: 10px; }
  .pond { gap: 8px; width: calc(100% - 44px); justify-self: center; }
  .round-result { padding: 7px; font-size: 14px; overflow-wrap: anywhere; }
  .table-mark { font-size: 19px; }
  .table-mark small { font-size: 8px; }
  .disc { min-height: 76px; }
  .tile.hero { --w: 44px; }
  .turn-state { font-size: 11px; padding: 5px 7px; }
  .wall-chip { font-size: 10px; }
  .seat.self { gap: 4px; padding-top: 4px; }
  .seat.self .river { --river-w: 19px; grid-template-columns: repeat(var(--self-cols-narrow, 1), var(--river-w)); }
  .waits { font-size: 11px; }
  .bar { min-height: 42px; gap: 5px; margin-bottom: 4px; }
  .bar .hint { font-size: 11px; }
  .btn { min-height: 40px; padding: 0 12px; font-size: 12px; }
  .seat.self .rack { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 2px calc(7px + env(safe-area-inset-bottom)); }
  .seat.self .melds { max-width: 100%; flex-wrap: nowrap; justify-content: center; }
  .seat.self .melds:empty { display: none; }
  .seat.self .melds .tile { --w: 19px; }
  .seat.self .hand { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; gap: 6px 4px; }
  .seat.self .hand .tile { width: 100%; height: auto; aspect-ratio: 1 / 1.38; padding: 3px 2px; }
  .seat.self .hand .drawn:not(:first-child) { margin-left: 4px; width: calc(100% - 4px); }
  .sheet { right: 16px; bottom: 16px; }
  .records { right: 12px; top: 64px; }
}
@media (max-height: 560px) {
  .top { flex-basis: 38px; }
  .brand { font-size: 16px; }
  .brand::before { width: 22px; height: 26px; font-size: 17px; }
  .stage { padding-bottom: 8px; }
  .wood { padding: 6px; border-radius: 18px; }
  .felt { padding: 10px; gap: 5px; }
  .badge { padding: 4px 8px; }
  .seat.opp .rack { top: 48px; bottom: 12px; }
  .seat.opp .hand, .seat.opp .meld { gap: 1px; }
  .seat.opp .hand .tile, .seat.opp .meld .tile { padding: 0; border-radius: 2px; }
  .seat.opp .hand .tile img, .seat.opp .meld .tile img { width: max(1px, calc(var(--w) - 2px)); height: max(1px, calc(var(--w) * 1.38 - 2px)); }
  .seat.opp .hand .tile { --w: clamp(2px, calc((100cqh - 73px) / 14), 18px); }
  .seat.opp .meld .tile { --w: clamp(3px, calc((100cqh - 84px) / 14), 16px); }
  .seat.opp .river { --river-w: clamp(6px, calc((100cqh - 76px) / var(--river-rows-short, 1) / 1.55), 18px); top: 58px; left: 70px; grid-template-columns: repeat(4, var(--river-w)); }
  .seat.right .river { left: auto; right: 70px; }
  .round-result { font-size: 15px; padding: 5px 8px; }
  .table-mark { display: none; }
  .pond { gap: 6px; }
  .disc { min-height: 48px; }
  .tile.hero { --w: 32px; }
  .turn-state { font-size: 10px; padding: 4px 8px; min-height: 20px; }
  .wall-chip { font-size: 10px; }
  .bar { min-height: 32px; margin-bottom: 0; }
  .btn { min-height: 30px; }
  .seat.self { gap: 2px; }
  .seat.self .river { --river-w: 12px; grid-template-columns: repeat(var(--self-cols-short, 1), var(--river-w)); }
  .seat.self .rack { padding-top: 7px; padding-bottom: 5px; flex-direction: row; align-items: flex-end; }
  /* Keep the self hand in two compact rows on short narrow screens. A single
     horizontal row cannot fit fourteen 18px cards inside the 245px dock and
     would push the last drawn tile outside the felt. */
  .seat.self .hand { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px 2px; }
  .seat.self .hand .tile { width: 100%; max-width: 18px; height: auto; aspect-ratio: 1 / 1.38; min-width: 0; justify-self: center; }
  .seat.self .hand .drawn:not(:first-child) { width: 18px; margin-left: 2px; }
  .seat.self .melds { max-width: 35%; flex-wrap: wrap; }
}
@media (max-width: 380px) {
  .brand::before { display: none; }
  .links .btn.sm { padding: 0 6px; }
  .meta { font-size: 10px; }
  /* The embedded 320px fixture still has a 640px iframe viewport, so the
     height query above does not apply. Keep the hand compact by width too. */
  .seat.self .hand .tile { width: 100%; max-width: 18px; height: auto; aspect-ratio: 1 / 1.38; min-width: 0; justify-self: center; }
  .seat.self .hand .drawn:not(:first-child) { width: 18px; margin-left: 2px; }
  .seat.self .melds .tile { --w: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .tile.click { transition: none; }
}
.wait-advice {
  width: min(650px, 100%); padding: 10px 12px; border: 1px solid #c7cfa12b;
  border-radius: 8px; background: #0a302978; text-align: left; color: #c5d3c5;
  max-height: 142px; overflow: auto; overscroll-behavior: contain;
}
.advice-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 11px; }
.advice-heading b { color: #e8d5a9; font-size: 12px; }
.advice-fan { color: #ffe6ad; font-weight: 700; white-space: nowrap; }
.wait-counts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.wait-count { padding: 3px 7px; border-radius: 4px; background: #ffffff0b; color: #edf0dd; white-space: nowrap; }
.wait-count b { margin-left: 4px; color: #eed299; font-variant-numeric: tabular-nums; }
.wait-count small { margin-left: 3px; font-size: 10px; color: #a7bcaa; }
.wait-count em { margin-left: 5px; color: #ffe6ad; font-size: 10px; font-style: normal; font-weight: 700; }
.wait-count.exhausted { opacity: .6; }
.advice-risk { margin: 6px 0 0; color: #edce8d; font-size: 11px; line-height: 1.5; }
.wait-advice[data-level="danger"] { border-color: #d79c7e88; }
.wait-advice[data-level="danger"] .advice-risk { color: #f2b89d; }
.advice-note { margin: 5px 0 0; font-size: 10px; line-height: 1.5; color: #adc2b2; }
@media (max-width: 780px) {
  .wait-advice { padding: 7px 8px; max-height: 116px; }
  .advice-heading { font-size: 10px; }
  .advice-heading b { font-size: 11px; }
}
@media (max-height: 560px) {
  .wait-advice { max-height: 84px; padding: 5px 8px; }
  .wait-counts { margin-top: 4px; }
  .wait-count { padding: 2px 6px; font-size: 11px; }
}

/* Face-up hands keep the same seat orientation and single column as the backs. */
@media (max-width: 780px) {
  .pond { width: calc(100% - 56px); }
}

html.solo .practice-profile,
html.solo .points-gate,
html.solo .points-panel,
html.solo .connection { display: none !important; }
.practice-profile[hidden], .connection[hidden] { display: none; }
.stage[hidden], .points-gate[hidden], .room-gate[hidden] { display: none; }
.points-gate { flex: 1; min-height: 0; overflow: auto; display: grid; place-items: center; padding: 24px; text-align: center; }
.points-gate > div { max-width: 480px; }
.points-gate h1 { font-size: 24px; color: var(--gold); }
.points-gate p { line-height: 1.8; color: var(--muted); }
.points-gate .btn { margin: 4px; }
.room-gate { flex: 1; min-height: 0; overflow: auto; display: grid; place-items: center; padding: 24px; text-align: center; }
.room-card { width: min(460px, calc(100vw - 32px)); padding: 24px; border: 1px solid #e4c58a66; border-radius: 16px; background: #132e26; box-shadow: 0 18px 60px #0006; }
.room-kicker { margin: 0; color: #9eb7a6; font-size: 12px; letter-spacing: .12em; }
.room-card h1 { margin: 8px 0 16px; color: #e8cf9d; font-size: 22px; }
.room-code-line { display: flex; align-items: center; justify-content: center; gap: 8px; color: #c2cfc2; }
.room-code-line b { color: #ffe6ad; font-size: 24px; letter-spacing: .18em; }
.room-members { margin: 18px 0; padding: 0; list-style: none; text-align: left; }
.room-members li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid #ffffff12; color: #d7dfd5; }
.room-members small { color: #9eb7a6; }
.room-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.gate-icon { display: inline-grid; place-items: center; width: 42px; height: 54px; border: 1px solid var(--gold); border-radius: 6px; font: 28px "Songti SC", serif; color: var(--gold); }
.points-panel { width: min(440px, calc(100vw - 24px)); z-index: 111; }
.points-panel h3 { font-size: 14px; margin: 0 0 10px; }
.points-total { display: flex; align-items: baseline; gap: 10px; padding-top: 20px; color: var(--muted); font-size: 12px; }
.points-total b { font-size: 36px; color: var(--gold); font-variant-numeric: tabular-nums; }
.points-section { padding: 16px 0; border-top: 1px solid #ffffff18; }
.points-section p { color: var(--muted); font-size: 12px; line-height: 1.7; }
.points-section label { display: block; margin-bottom: 6px; font-size: 12px; }
.points-section input { width: 100%; border: 1px solid #72816a; border-radius: 6px; padding: 10px; font: inherit; background: #09271f; color: var(--paper); }
.points-history { list-style: none; padding: 0 !important; }
.points-history li { display: flex; justify-content: space-between; gap: 12px; }
.points-history small { display: block; color: var(--muted); font-size: 10px; }
.points-history b { color: var(--gold); }
.btn:disabled { opacity: .45; cursor: default; }
.practice-profile { flex: 0 0 auto; width: min(1200px, calc(100% - 48px)); margin: 0 auto 12px; padding: 8px 12px; display: flex; align-items: center; gap: 10px; border: 1px solid #ffffff12; border-radius: 10px; background: #0d2a2380; }
.account-avatar { flex: 0 0 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #526b55; color: #f3dcab; font-weight: 700; }
.account-label { min-width: 0; margin-right: auto; }
.account-label b { display: block; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.account-label small { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; }
#sync-status { font-size: 11px; color: #a9c9b1; }
#sync-status.sync-error { color: #f0c188; }
.profile-panel { width: min(440px, calc(100vw - 24px)); z-index: 110; }
.profile-note { color: var(--muted); font-size: 12px; line-height: 1.6; }
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stat-grid > div { padding: 10px; border-radius: 6px; background: #ffffff08; }
.stat-grid small, .stat-grid b { display: block; }
.stat-grid small { font-size: 11px; color: var(--muted); margin-bottom: 5px; }
.stat-grid b { font-size: 17px; color: var(--gold); }
.profile-panel h3 { font-size: 13px; margin: 18px 0 10px; }
.practice-marks { display: grid; gap: 6px; }
.practice-mark { padding: 8px 10px; border: 1px solid #ffffff12; border-radius: 6px; color: #9aafa2; }
.practice-mark b, .practice-mark small { display: block; }
.practice-mark b { font-size: 12px; }.practice-mark small { font-size: 11px; margin-top: 3px; }
.practice-mark.unlocked { color: #f0d7a5; border-color: #d7b98166; background: #e4c58a0b; }
.profile-panel .recent-rounds { padding: 0; list-style: none; }
.recent-rounds li { display: flex; justify-content: space-between; gap: 10px; }
.connection { position: fixed; inset: 0; display: grid; place-items: center; z-index: 120; background: #10281ff5; padding: 20px; text-align: center; }
@media (max-width: 780px) {
  .practice-profile { width: calc(100% - 20px); margin-bottom: 6px; padding: 6px; gap: 6px; }
  .account-avatar { flex-basis: 24px; height: 24px; font-size: 12px; }
  .account-label b { max-width: 110px; font-size: 12px; }
  .practice-profile .btn.sm { padding: 0 8px; }
  #sync-status { max-width: 64px; font-size: 10px; text-align: center; }
  .profile-panel { top: 64px; max-height: calc(100dvh - 80px); }
}
@media (max-width: 380px) {
  .top { gap: 4px; padding-left: 8px; padding-right: 8px; }
  .brand { font-size: 15px; }.meta { font-size: 9px; }
  .account-label b { max-width: 72px; }.account-label small { font-size: 9px; }
  #sync-status { max-width: 42px; }
}
@media (max-height: 560px) {
  .practice-profile { margin-bottom: 4px; padding: 4px 8px; }
  .account-avatar { flex-basis: 24px; height: 24px; font-size: 12px; }
  .account-label b { font-size: 11px; }
  .practice-profile .btn.sm { min-height: 28px; }
  .practice-profile .account-label small { margin-top: 0; }
}

/* Compact the centre when the account strip or a small viewport reduces the felt. */
@container table (max-height: 400px) {
  .table-mark { display: none; }
  .pond { gap: 6px; }
  .disc { min-height: 48px; }
  .tile.hero { --w: 32px; }
  .turn-state { font-size: 10px; padding: 4px 6px; min-height: 20px; }
}
@container table (max-height: 240px) {
  .pond { gap: 3px; }
  .disc { min-height: 36px; }
  .tile.hero { --w: 25px; }
  .wall-chip { font-size: 9px; }
  .round-result { font-size: 12px; padding: 3px 5px; }
}

@media (max-width: 330px) {
  .top { flex-basis: 78px; display: grid; grid-template-columns: 1fr auto; gap: 2px; }
  .top .links { grid-column: 1 / -1; justify-self: end; }
}

/* All side tiles share the rack's actual budget, including gaps between melds. */
.seat.opp { --rack-top: 72px; --rack-bottom: 24px; --side-gap: 2px; --set-gap: 9px; --hand-max: 24px; --meld-max: 22px; --river-top: 84px; --river-gap: 3px; }
.seat.opp .rack { top: var(--rack-top); bottom: var(--rack-bottom); }
.seat.opp .hand, .seat.opp .meld { gap: var(--side-gap); }
.seat.opp .melds { gap: var(--set-gap); }
.seat.opp .hand .tile {
  --w: clamp(8px, calc((100cqh - var(--rack-top) - var(--rack-bottom) - (var(--hand-count) - 1) * var(--side-gap)) / var(--hand-count)), var(--hand-max));
}
.seat.opp .meld .tile {
  --w: clamp(2px, calc((100cqh - var(--rack-top) - var(--rack-bottom) - (var(--meld-count) - var(--meld-groups)) * var(--side-gap) - (var(--meld-groups) - 1) * var(--set-gap)) / var(--meld-count)), var(--meld-max));
}
.seat.opp .hand .tile, .seat.opp .meld .tile { padding: 0; }
.seat.opp .hand .tile img, .seat.opp .meld .tile img { width: max(1px, calc(var(--w) - 2px)); height: max(1px, calc(var(--w) * 1.38 - 2px)); }
.pond { max-height: 100%; min-height: 0; }
.sheet { grid-area: 1 / 2; place-self: center; position: relative; inset: auto; flex: 0 1 auto; min-height: 0; width: min(380px, calc(100% - 24px)); max-height: 100%; padding: 14px; border-radius: 12px; display: flex; flex-direction: column; gap: 10px; }
.sheet header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 0 0 auto; }
.sheet h2 { margin: 0; font-size: 18px; }
.sheet .settlement-details { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.sheet > .btn { flex: 0 0 auto; }
.felt:has(.sheet:not([hidden])) .pond { visibility: hidden; }
.buycode-card { max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; }
@media (max-width: 780px) {
  .seat.opp { --rack-top: 68px; --rack-bottom: 58px; --set-gap: 5px; --hand-max: 22px; --meld-max: 14px; --river-top: 70px; --river-gap: 2px; }
  .seat.self .river { --river-w: 17px; }
  .sheet { padding: 8px; gap: 6px; }
  .sheet h2 { font-size: 12px; overflow-wrap: anywhere; }
  .sheet header .btn { padding: 0 5px; font-size: 10px; }
}
@media (max-height: 560px) {
  .seat.opp { --rack-top: 52px; --rack-bottom: 24px; --side-gap: 1px; --set-gap: 5px; --river-top: 58px; }
  .sheet { padding: 8px; gap: 5px; }
  .sheet h2 { font-size: 13px; }
}
.seat.opp .wait-public > b { display: block; color: #f0d498; font-size: 10px; line-height: 1.2; }
.seat.opp .waits .advice-note { display: none; }
.seat.opp .wait-face small { font-size: 9px; }
.seat.opp .wait-chip { white-space: nowrap; font-size: 9px; padding: 1px 3px; }
@media (max-height: 560px) {
  .sheet header .btn { min-height: 24px; padding: 0 5px; font-size: 10px; }
  .sheet > .btn { min-height: 28px; font-size: 11px; }
}
/* Keep the advice available without letting a paragraph resize the playing area. */
#seat-0 .wait-advice { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px; max-height: none; }
#seat-0 .wait-advice > :not(.advice-heading):not(button) { display: none; }
#seat-0 .wait-advice .btn { min-height: 26px; padding: 0 6px; font-size: 10px; white-space: nowrap; }
#seat-0 .wait-advice .advice-heading { gap: 2px 8px; }
/* Wait labels are measured, so the rack and river reserve the same real space. */
.seat.opp { --rack-bottom: max(16px, var(--wait-space, 16px)); }
.seat.opp .river {
  --river-rows: var(--river-rows-wide);
  --river-w: clamp(6px, calc((100cqh - var(--river-top) - var(--rack-bottom) - 6px - (var(--river-rows) - 1) * var(--river-gap)) / var(--river-rows) / 1.38), 22px);
}
/* A short iframe scrolls the whole table rather than crushing the tiles. */
body { min-height: 660px; }
@media (max-width: 780px) {
  body { min-height: 700px; }
  .seat.opp .river { --river-rows: var(--river-rows-narrow); --river-w: clamp(6px, calc((100cqh - var(--river-top) - var(--rack-bottom) - 6px - (var(--river-rows) - 1) * var(--river-gap)) / var(--river-rows) / 1.38), 16px); }
  /* Settlement is a separate row below both side seats. Reserve enough
     vertical space for their racks before laying out the result card, so the
     card cannot overlap an AI's hand on narrow screens. */
  .felt:has(.sheet:not([hidden])) { grid-template-rows: 180px 285px auto; min-height: 700px; }
  .sheet { grid-area: 2 / 1 / 3 / 4; width: 100%; max-height: 285px; align-self: start; }
  .sheet header { flex-direction: row; }
  .sheet .settlement-details { font-size: 11px; }
  .sheet ul { margin: 4px 0; font-size: 11px; line-height: 1.5; }
  .sheet .scores { margin: 4px 0; }
  .sheet > .btn { min-height: 30px; }
  .felt:has(.sheet:not([hidden])) .seat.self { grid-row: 3; }
  .felt:not(:has(.sheet:not([hidden]))) { grid-template-rows: minmax(290px, 1fr) auto; }
  body:has(#round-result:not([hidden])) { min-height: 840px; }
}
@media (max-width: 380px) {
  body { min-height: 800px; }
  body:has(#round-result:not([hidden])) { min-height: 940px; }
  .felt:has(.sheet:not([hidden])) { min-height: 800px; }
}

@media (max-height: 560px) { .seat.opp .river { --river-rows: var(--river-rows-short); } }

/* Mid-height desktop tables need a compact dock, leaving room for AI cards. */
@media (min-width: 781px) {
  @container table (max-height: 520px) {
    .seat.opp { --side-gap: 1px; }
    .seat.self { gap: 4px; padding-top: 4px; }
    .seat.self .river { --river-w: 18px; padding: 2px; }
    .seat.self .rack { padding: 8px 0 4px; }
    .seat.self .hand .tile { --w: clamp(24px, min(4vw, 6dvh), 38px); }
    .bar { min-height: 32px; margin-bottom: 4px; gap: 5px; }
    .bar .btn { min-height: 30px; }
    .seat.opp .waits .tile { --w: 14px; }
    .seat.opp .wait-face small { font-size: 8px; }
    #seat-0 .advice-heading .wait-face .tile { --w: 14px; }
    #seat-0 .advice-heading .wait-face small { display: none; }
  }
}

/* Landscape phones: one screen, no page scroll. The header and account strip
   collapse into a 26px HUD, the account strip floats over the header, and the
   felt's two rows share the remaining height. Own hand stays a single row;
   side hands keep their confirmed single-column orientation. */
@media (orientation: landscape) and (max-width: 1100px) and (max-height: 520px) {
  body { min-height: 0; height: 100dvh; overflow: hidden; }
  body:has(#round-result:not([hidden])) { min-height: 0; }
  .top {
    flex: 0 0 26px;
    padding: 0 max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
    gap: 6px;
  }
  .brand { font-size: 13px; letter-spacing: .06em; }
  .brand::before { display: none; }
  .meta { display: none; }
  .links a { display: none; }
  .links .btn.sm { min-height: 24px; padding: 0 8px; font-size: 11px; }
  .practice-profile {
    position: fixed; top: 2px; left: 50%; transform: translateX(-50%); z-index: 6;
    width: auto; max-width: calc(100vw - 200px); margin: 0; padding: 1px 6px;
    gap: 4px; border-radius: 6px;
  }
  .account-avatar, .account-label small, #sync-status { display: none; }
  .account-label { margin-right: 4px; }
  .account-label b { max-width: 110px; font-size: 11px; }
  .practice-profile .btn.sm { min-height: 22px; padding: 0 7px; font-size: 10px; }
  .stage {
    padding: 0 max(3px, env(safe-area-inset-right)) calc(2px + env(safe-area-inset-bottom)) max(3px, env(safe-area-inset-left));
  }
  .wood { padding: 2px; border-radius: 10px; }
  .felt {
    padding: 3px; border-radius: 7px; gap: 2px 3px;
    grid-template-columns: 84px minmax(0, 1fr) 84px;
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .felt:not(:has(.sheet:not([hidden]))) { grid-template-rows: minmax(0, 1fr) auto; }
  .felt::before { display: none; }

  .seat.opp {
    --rack-top: 18px; --rack-bottom: max(12px, var(--wait-space, 12px));
    --side-gap: 1px; --set-gap: 3px; --hand-max: 14px; --meld-max: 12px;
    --river-top: 22px; --river-gap: 1px;
  }
  .seat.opp .rack { top: var(--rack-top); bottom: var(--rack-bottom); left: 0; gap: 4px; }
  .seat.right .rack { left: auto; right: 0; }
  .seat.opp .badge {
    display: flex; flex-wrap: nowrap; justify-content: center; gap: 4px;
    width: 64px; padding: 1px 2px; font-size: 9px; line-height: 1.2; border-radius: 5px;
  }
  .avatar, .tag, .pts small { display: none; }
  .who { font-size: 9px; }
  .pts { font-size: 10px; }
  .seat.opp .hand .tile, .seat.opp .meld .tile { padding: 0; border-radius: 2px; }
  .seat.opp .hand .tile img, .seat.opp .meld .tile img {
    width: max(1px, calc(var(--w) - 2px)); height: max(1px, calc(var(--w) * 1.38 - 2px));
  }
  .seat-state { right: 0; bottom: -8px; padding: 1px 3px; font-size: 8px; }
  .win-mark { width: 22px; height: 22px; font-size: 15px; top: -6px; right: -3px; }
  .seat.opp .waits { font-size: 9px; line-height: 1.15; }
  .seat.opp .waits.liang-public { padding: 1px 2px; border-radius: 3px; }
  .seat.opp .wait-public { flex-wrap: nowrap; gap: 2px; }
  .seat.opp .wait-public > b, .seat.opp .wait-face small { display: none; }
  .seat.opp .waits .tile, .seat.opp .waits .wait-face .tile { --w: 12px; }
  .seat.opp .wait-chip { font-size: 8px; padding: 0 2px; }
  .seat.opp .river {
    --river-rows: var(--river-rows-narrow);
    --river-w: clamp(4px, calc((100cqh - var(--river-top) - var(--rack-bottom) - 4px - (var(--river-rows) - 1) * var(--river-gap)) / var(--river-rows) / 1.38), 14px);
    left: 50px; top: var(--river-top);
    grid-template-columns: repeat(2, var(--river-w));
    padding: 1px; gap: var(--river-gap);
  }
  .seat.right .river { left: auto; right: 50px; }

  .pond { gap: 3px; width: auto; justify-self: center; }
  .table-mark { display: none; }
  .disc { min-height: 30px; }
  .tile.hero { --w: 28px; }
  .wall-chip { font-size: 9px; }
  .turn-state { min-height: 15px; padding: 2px 6px; font-size: 9px; }
  .round-result { padding: 2px 6px; font-size: 11px; }

  .seat.self { gap: 0; padding-top: 0; }
  .seat.self .river {
    --river-w: clamp(9px, 1.9vw, 16px);
    grid-template-columns: repeat(var(--self-cols-short, 1), var(--river-w));
    align-self: flex-start; margin-left: 1px; padding: 1px; gap: 1px;
  }
  .seat.self .river .tile { --w: var(--river-w); }
  .bar { min-height: 28px; margin-bottom: 2px; gap: 4px; flex-wrap: nowrap; }
  .bar .btn { min-height: 28px; padding: 0 8px; font-size: 11px; }
  .bar .btn.hu { min-width: 48px; font-size: 15px; }
  .seat.self .rack {
    flex-direction: row; align-items: flex-end; justify-content: center;
    gap: 6px; padding: 1px 0 2px;
  }
  .seat.self .melds { flex: 0 1 auto; max-width: 32%; flex-wrap: wrap; gap: 3px; }
  .seat.self .melds .tile { --w: 15px; }
  .seat.self .hand {
    flex: 0 1 auto; width: auto; min-width: 0; max-width: 100%;
    display: grid; grid-template-columns: repeat(var(--hand-count, 14), minmax(0, 10dvh));
    justify-content: center; align-items: end; gap: 2px;
  }
  .seat.self .hand .tile {
    width: 100%; max-width: none; height: auto; aspect-ratio: 1 / 1.38;
    padding: 2px; justify-self: center;
  }
  .seat.self .hand .drawn:not(:first-child) { margin-left: 8px; width: calc(100% - 8px); }
  .seat.self > .waits { position: absolute; top: 0; right: 1px; z-index: 3; max-width: 52%; }
  .waits { font-size: 9px; }
  #seat-0 .wait-advice { padding: 1px 4px; gap: 4px; border-radius: 4px; background: #0a3029e8; }
  #seat-0 .wait-advice .advice-heading { flex-wrap: nowrap; gap: 2px 6px; font-size: 9px; }
  #seat-0 .wait-advice .advice-heading b { font-size: 9px; }
  #seat-0 .wait-advice .btn { min-height: 20px; padding: 0 5px; font-size: 9px; }
  #seat-0 .advice-heading .wait-face .tile, #seat-0 .wait-public .tile { --w: 13px; }
  #seat-0 .advice-heading .wait-face small { display: none; }

  .felt:has(.sheet:not([hidden])) { min-height: 0; grid-template-rows: minmax(0, 1fr) auto; }
  .sheet {
    grid-area: 1 / 2 / 2 / 3; align-self: stretch; justify-self: center;
    width: min(420px, calc(100% - 12px)); max-height: 100%;
    padding: 6px; gap: 4px; border-radius: 8px;
  }
  .sheet h2 { font-size: 13px; }
  .sheet header .btn { min-height: 22px; padding: 0 6px; font-size: 10px; }
  .sheet .settlement-details { font-size: 11px; }
  .sheet > .btn { min-height: 26px; font-size: 11px; }
  .felt:has(.sheet:not([hidden])) .seat.self { grid-row: 2; }
}

/* Very small landscape screens keep the 13-card side columns by dropping the
   1px gaps instead of shrinking the cards below their readable floor. */
@media (orientation: landscape) and (max-width: 1100px) and (max-height: 300px) {
  .seat.opp { --side-gap: 0px; --set-gap: 2px; --rack-top: 17px; }
  .seat.opp .waits { font-size: 8px; line-height: 1; }
  .seat.opp .waits .tile, .seat.opp .waits .wait-face .tile { --w: 10px; }
}

/* Narrow portrait settlements: keep the dedicated row, but leave the fixed
   940px page room for the header. Long details scroll inside the sheet. */
@media (max-width: 380px) {
  .felt:has(.sheet:not([hidden])) { grid-template-rows: minmax(0, 158px) minmax(0, 268px) auto; min-height: 0; }
  .felt:has(.sheet:not([hidden])) .sheet { max-height: 100%; }
}