/*
 * Digital table (public/table-view.js): poker-client style scoring board.
 * Oval felt table, avatars on the rail, a mahjong-table centre console,
 * a dealer button that slides between seats, and chips that fly to the winner.
 */
#tableBoardPanel.dt-on #tablePlayerCards { display: none !important; }

/* ---------- Table / Cards switch ---------- */
#tableBoardPanel .board-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dt-switch { display: inline-flex; flex: none; padding: 3px; gap: 2px; border-radius: 999px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(212, 175, 55, .3); }
.dt-switch[hidden] { display: none; }
#tableBoardPanel .dt-switch .dt-switch-option {
  flex: none; min-height: 36px; min-width: 64px; padding: 6px 14px; border-radius: 999px; border: 0;
  background: transparent; color: var(--muted); box-shadow: none; font-size: 14px; font-weight: 700; letter-spacing: .02em;
}
#tableBoardPanel .dt-switch .dt-switch-option[aria-pressed="true"] { background: var(--gold-gradient); color: var(--felt-black); box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }

/* ---------- stage + table ---------- */
.dt { position: relative; container-type: inline-size; width: 100%; max-width: 760px; margin: 4px auto 6px; padding-bottom: 30px; user-select: none; -webkit-user-select: none; }
.dt[hidden] { display: none; }
.dt-stage { --av: clamp(52px, 15cqi, 70px); position: relative; width: 100%; aspect-ratio: 10 / 12.4; }

.dt-rail {
  position: absolute; inset: 8% 12% 13% 12%; border-radius: 999px; padding: 11px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, .08), transparent 55%),
    linear-gradient(160deg, #2b2116 0%, #16100a 45%, #0d0905 100%);
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, .55),
    0 0 0 4px #0b0805,
    0 0 0 5px rgba(212, 175, 55, .22),
    0 26px 50px -10px rgba(0, 0, 0, .85),
    0 0 90px rgba(47, 143, 85, .18);
}
.dt-felt {
  position: absolute; inset: 11px; border-radius: 999px; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%, rgba(120, 220, 160, .16), transparent 70%),
    radial-gradient(ellipse at 50% 50%, #237a4c 0%, #17603a 42%, #0d4127 78%, #08301c 100%);
  box-shadow: inset 0 0 0 2px rgba(212, 175, 55, .28), inset 0 0 0 7px rgba(0, 0, 0, .12), inset 0 0 44px rgba(0, 0, 0, .6);
}
.dt-felt::before { /* faint woven texture */
  content: ""; position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px), repeating-linear-gradient(-45deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 3px);
}
.dt-hand[hidden] { display: none; }
.dt-hand { position: absolute; left: 50%; top: 75.5%; transform: translate(-50%, -50%); z-index: 2; max-width: 52%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, .28); color: var(--gold-light); font-size: clamp(11px, 3.1cqi, 13px); font-weight: 600; line-height: 1.3; }

/* ---------- centre: tile walls + console ---------- */
.dt-centre {
  --tile-w: clamp(9px, 2.9cqi, 13px); --tile-h: calc(var(--tile-w) * 1.38);
  position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%);
  width: clamp(150px, 47cqi, 236px); aspect-ratio: 1; display: grid; place-items: center;
}
.dt-rack { position: absolute; display: flex; justify-content: center; gap: 2px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
.dt-rack.at-bottom { left: var(--tile-h); right: var(--tile-h); bottom: 0; }
.dt-rack.at-top    { left: var(--tile-h); right: var(--tile-h); top: 0; }
.dt-rack.at-left, .dt-rack.at-right { top: var(--tile-h); bottom: var(--tile-h); flex-direction: column; }
.dt-rack.at-left  { left: 0; }
.dt-rack.at-right { right: 0; }
.dt-tile { flex: 0 1 var(--tile-w); width: var(--tile-w); height: var(--tile-h); border-radius: 2px; background: linear-gradient(180deg, #2b9b67 0%, #17734a 70%, #0f5435 100%); box-shadow: inset 0 -2px 0 #f2ead6, inset 0 1px 0 rgba(255, 255, 255, .25); }
.dt-rack.at-left .dt-tile, .dt-rack.at-right .dt-tile { width: var(--tile-h); height: var(--tile-w); flex-basis: var(--tile-w); }
.dt-rack.at-left .dt-tile  { box-shadow: inset 2px 0 0 #f2ead6, inset 0 1px 0 rgba(255, 255, 255, .25); }
.dt-rack.at-right .dt-tile { box-shadow: inset -2px 0 0 #f2ead6, inset 0 1px 0 rgba(255, 255, 255, .25); }
.dt-rack.at-top .dt-tile   { box-shadow: inset 0 2px 0 #f2ead6, inset 0 -1px 0 rgba(0, 0, 0, .2); }
.dt-rack.is-dealer .dt-tile { background: linear-gradient(180deg, #e9c55a 0%, #c99a26 70%, #8a6a14 100%); }

.dt-console {
  position: absolute; inset: calc(var(--tile-h) + 5px);
  display: flex; align-items: center; justify-content: center; padding: 8px 8px;
  border-radius: 16px;
  background: radial-gradient(circle at 50% 30%, #163b27 0%, #0a2115 60%, #06160d 100%);
  border: 1px solid rgba(212, 175, 55, .5);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .25), inset 0 0 22px rgba(0, 0, 0, .75), 0 10px 22px rgba(0, 0, 0, .45);
}
.dt-edge { position: absolute; display: none; border-radius: 3px; background: #ff5a45; box-shadow: 0 0 8px 2px rgba(255, 90, 69, .7); }
.dt-edge.lit { display: block; }
.dt-edge.at-bottom { bottom: 3px; left: 50%; width: 30px; height: 3px; transform: translateX(-50%); }
.dt-edge.at-top    { top: 3px; left: 50%; width: 30px; height: 3px; transform: translateX(-50%); }
.dt-edge.at-left   { left: 3px; top: 50%; width: 3px; height: 30px; transform: translateY(-50%); }
.dt-edge.at-right  { right: 3px; top: 50%; width: 3px; height: 30px; transform: translateY(-50%); }

.dt-console-middle { overflow-wrap: anywhere; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; width: 100%; min-width: 0; }
.dt-prevailing {
  font: 700 clamp(26px, 8cqi, 40px)/1 'PingFang TC', 'Microsoft JhengHei', 'Noto Serif TC', serif;
  background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 6px rgba(212, 175, 55, .35));
}
.dt-prevailing.is-idle { opacity: .45; }
.dt-round { white-space: pre-line; color: var(--gold-light); font-weight: 700; font-size: clamp(11.5px, 3.4cqi, 14px); line-height: 1.2; }
.dt-pending { position: absolute; left: 50%; top: 75.5%; transform: translate(-50%, -50%); z-index: 2; white-space: nowrap; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .02em; color: #2a1a00; background: linear-gradient(135deg, #ffd56a, #e6a521); animation: dtPulse 1.6s ease-in-out infinite; }
.dt-pending[hidden] { display: none; }

#digitalTable .dt-dice .dice-control { margin: 4px 0 0; flex-direction: column; gap: 4px; width: 100%; }
#digitalTable .dt-dice .dice-control button {
  width: auto; min-width: 64px; min-height: 36px; padding: 2px 12px; font-size: 20px; line-height: 1; flex: none;
  border-radius: 999px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(212, 175, 55, .4); box-shadow: none;
}
#digitalTable .dt-dice .dice-control output { flex-direction: column !important; align-items: center; gap: 3px !important; font-size: 12px; line-height: 1.1; color: var(--gold-light); white-space: nowrap; }
#digitalTable .dt-dice .dice-control output:empty { display: none; }
#digitalTable .dt-dice .dice-faces { display: flex; gap: 3px; font-size: 14px; line-height: 1; }
#digitalTable .dt-dice .die { width: 22px; height: 22px; min-width: 0; min-height: 0; font-size: 13px; border-radius: 5px; display: inline-grid; place-items: center; }
#digitalTable .dt-dice .dice-total { font-size: 13px; font-weight: 800; }

/* ---------- dealer button ---------- */
.dt-dealer { position: absolute; display: flex; align-items: center; gap: 3px; transform: translate(-50%, -50%); transition: left .7s cubic-bezier(.5, 0, .2, 1.3), top .7s cubic-bezier(.5, 0, .2, 1.3), opacity .3s; z-index: 3; pointer-events: none; }
.dt-dealer.is-off { opacity: 0; }
.dt-dealer-chip {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font: 800 14px/1 'PingFang TC', 'Microsoft JhengHei', serif; color: #6b1a12;
  background: radial-gradient(circle at 35% 30%, #fff8dc 0%, #f1d27a 40%, #c99a26 100%);
  box-shadow: 0 0 0 2px #fff4cf inset, 0 0 0 1px #8a6a14, 0 3px 6px rgba(0, 0, 0, .55), 0 0 12px rgba(212, 175, 55, .5);
}
.dt-dealer-mult { font: 800 12px/1 'Space Grotesk', sans-serif; color: var(--gold-light); background: rgba(0, 0, 0, .55); padding: 3px 5px; border-radius: 6px; }
.dt-dealer-mult[hidden] { display: none; }
.dt-dealer.at-bottom { left: 72%; top: 72%; }
.dt-dealer.at-top    { left: 23%; top: 21%; }
.dt-dealer.at-left   { left: 24%; top: 31%; }
.dt-dealer.at-right  { left: 76%; top: 31%; }

/* ---------- seats ---------- */
#digitalTable .dt-seat {
  position: absolute; z-index: 4; display: flex; flex-direction: column; align-items: center;
  width: clamp(92px, 28cqi, 150px); padding: 0; margin: 0; min-height: 0; flex: none;
  background: none; border: 0; border-radius: 0; box-shadow: none; color: inherit; font: inherit; cursor: pointer;
  transform: translate(-50%, calc(var(--av) / -2)); transition: left .6s ease, top .6s ease;
  -webkit-tap-highlight-color: transparent;
}
#digitalTable .dt-seat:disabled { background: none; border: 0; box-shadow: none; cursor: default; }
#digitalTable .dt-seat:active:not(:disabled) { transform: translate(-50%, calc(var(--av) / -2)) scale(.97); }
#digitalTable .dt-seat:focus-visible { outline: none; }
#digitalTable .dt-seat:focus-visible .dt-plate { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.dt-seat.at-bottom { left: 50%; top: 85%; }
#digitalTable .dt-seat.at-top, #digitalTable .dt-seat.at-bottom { width: clamp(112px, 36cqi, 170px); }
.dt-seat.at-top    { left: 50%; top: 8.5%; }
.dt-seat.at-left   { left: 12.5%; top: 44%; }
.dt-seat.at-right  { left: 87.5%; top: 44%; }

.dt-avatar {
  --c1: #3a4a40; --c2: #1d2822;
  position: relative; z-index: 2; width: var(--av); height: var(--av); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .28), transparent 45%), linear-gradient(150deg, var(--c1), var(--c2));
  border: 3px solid #ece4cf;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 8px 16px rgba(0, 0, 0, .6);
  transition: border-color .4s, box-shadow .4s;
}
.dt-initials { font: 700 calc(var(--av) * .36)/1 'Space Grotesk', 'Plus Jakarta Sans', sans-serif; color: #fff; letter-spacing: .02em; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.dt-wind-tile {
  position: absolute; left: -17px; top: 50%; margin-top: -19px; width: 20px; height: 26px; border-radius: 4px; display: grid; place-items: center;
  font: 700 15px/1 'PingFang TC', 'Microsoft JhengHei', 'Noto Serif TC', serif; color: #1d2a4a;
  background: linear-gradient(180deg, #fffdf6 0%, #efe6d2 100%);
  box-shadow: 0 3px 0 #1f7a4f, 0 4px 6px rgba(0, 0, 0, .55);
}
.dt-wind-tile:empty { display: none; }
.dt-wind-tile.is-east { color: #b3261e; }
.dt-seat.at-left .dt-wind-tile { left: auto; right: -17px; }
.dt-seat.is-dealer .dt-avatar { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 0 0 5px rgba(212, 175, 55, .22), 0 0 24px rgba(212, 175, 55, .55), 0 8px 16px rgba(0, 0, 0, .6); }

.dt-plate {
  position: relative; z-index: 1; margin-top: -12px; padding: 15px 8px 6px; width: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 1px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(14, 34, 24, .97) 0%, rgba(5, 15, 10, .97) 100%);
  border: 1px solid rgba(212, 175, 55, .32);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: border-color .4s, box-shadow .4s;
}
.dt-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(12.5px, 3.7cqi, 15px); letter-spacing: -.01em; line-height: 1.2; font-weight: 700; color: var(--ivory); }
.dt-note { font-size: 10.5px; line-height: 1.2; color: var(--muted); white-space: nowrap; }
.dt-note:empty { display: none; }
.dt-score { font: 700 clamp(19px, 5.8cqi, 25px)/1.1 'Space Grotesk', 'Plus Jakarta Sans', sans-serif; font-variant-numeric: tabular-nums; color: var(--gold-light); letter-spacing: -.01em; }
.dt-score.positive { color: #6fdc98; }
.dt-score.negative { color: #ff8a7d; }
.dt-seat.is-dealer .dt-plate { border-color: rgba(212, 175, 55, .75); }
.dt-you { position: absolute; z-index: 2; left: 50%; bottom: -8px; transform: translateX(-50%); display: none; padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--felt-black); background: var(--gold-gradient); }
.dt-seat.is-you .dt-you { display: block; }

.dt-seat.dt-empty .dt-avatar { background: rgba(0, 0, 0, .25); border: 2px dashed rgba(212, 175, 55, .55); box-shadow: none; }
.dt-seat.dt-empty .dt-initials { color: var(--gold-light); font-weight: 400; }
.dt-seat.dt-empty .dt-plate { background: rgba(5, 15, 10, .7); border-style: dashed; }
.dt-seat.dt-empty .dt-name { color: var(--gold-light); }
.dt-seat.dt-empty .dt-score { font: 600 12px/1.3 'Plus Jakarta Sans', sans-serif; color: var(--muted); }
#digitalTable .dt-seat:disabled .dt-avatar { filter: saturate(.75) brightness(.92); }

/* ---------- effects ---------- */
.dt-fx { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: visible; }
.dt-chip {
  position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle, #fff7d8 0 24%, #d4af37 25% 42%, #fff7d8 43% 50%, #b8322f 51% 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 3px 6px rgba(0, 0, 0, .6), 0 0 10px rgba(212, 175, 55, .45);
  will-change: transform, opacity;
}
.dt-delta {
  position: absolute; z-index: 7; left: 50%; top: calc(var(--av) * -0.28); transform: translate(-50%, 0);
  padding: 3px 10px; border-radius: 999px; pointer-events: none; white-space: nowrap;
  font: 800 17px/1.1 'Space Grotesk', sans-serif; font-variant-numeric: tabular-nums;
  animation: dtDelta 2.7s cubic-bezier(.2, .8, .2, 1) forwards;
}
.dt-delta.up { color: #072613; background: linear-gradient(135deg, #8ff0b3, #3fbf74); box-shadow: 0 0 16px rgba(87, 194, 127, .6); }
.dt-delta.down { color: #fff; background: linear-gradient(135deg, #e0645a, #a52a22); box-shadow: 0 0 12px rgba(224, 100, 90, .45); }
.dt-seat.dt-won .dt-avatar { animation: dtWin 1.3s ease-out 2; border-color: #fff1b8; }
.dt-seat.dt-won .dt-plate { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 26px rgba(212, 175, 55, .55), 0 10px 20px rgba(0, 0, 0, .55); }
.dt-banner {
  position: absolute; z-index: 8; left: 50%; top: 48%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 18px; border-radius: 14px; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 14, 2, .94), rgba(8, 6, 0, .94)); border: 1px solid var(--gold);
  box-shadow: 0 0 0 4px rgba(212, 175, 55, .15), 0 0 40px rgba(212, 175, 55, .45), 0 14px 30px rgba(0, 0, 0, .6);
  animation: dtBanner 2.6s cubic-bezier(.2, .9, .2, 1) forwards; text-align: center; max-width: 80%;
}
.dt-banner strong { font: 800 18px/1.15 'Plus Jakarta Sans', sans-serif; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dt-banner span { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-light); }

@keyframes dtDelta { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.7); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.08); } 20% { transform: translate(-50%, 0) scale(1); } 78% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -18px); } }
@keyframes dtWin { 0% { box-shadow: 0 0 0 0 rgba(255, 236, 160, .9), 0 8px 16px rgba(0, 0, 0, .6); } 100% { box-shadow: 0 0 0 22px rgba(255, 236, 160, 0), 0 8px 16px rgba(0, 0, 0, .6); } }
@keyframes dtBanner { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 14% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } 22% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.96); } }
@keyframes dtPulse { 50% { opacity: .65; } }

@media (max-width: 379px) {
  #tableBoardPanel .dt-switch .dt-switch-option { min-width: 0; padding: 6px 11px; font-size: 13px; }
}
@container (max-width: 379px) {
  .dt-stage { aspect-ratio: 10 / 13.2; }
  .dt-seat.at-left { left: 14%; } .dt-seat.at-right { left: 86%; }
  .dt-centre { width: 148px; }
}

/* ---------- wide screens: classic horizontal poker oval ---------- */
@container (min-width: 600px) {
  .dt-stage { --av: 72px; aspect-ratio: 16 / 12; }
  .dt-rail { inset: 10% 9% 14% 9%; padding: 13px; }
  .dt-felt { inset: 13px; }
  .dt-seat.at-bottom { top: 86%; }
  .dt-seat.at-top    { top: 10%; }
  .dt-seat.at-left   { left: 12.5%; top: 46%; }
  .dt-seat.at-right  { left: 87.5%; top: 46%; }
  #digitalTable .dt-seat { width: 150px; }
  #digitalTable .dt-seat.at-top, #digitalTable .dt-seat.at-bottom { width: 180px; }
  .dt-centre { top: 50%; width: 196px; }
  .dt-banner { top: 50%; }
  .dt-dealer.at-bottom { left: 64%; top: 76%; } .dt-dealer.at-top { left: 36%; top: 24%; }
  .dt-dealer.at-left { left: 22%; top: 66%; } .dt-dealer.at-right { left: 78%; top: 30%; }
}

@media (prefers-reduced-motion: reduce) {
  .dt-seat, .dt-rack, .dt-dealer { transition: none !important; }
  .dt-pending, .dt-seat.dt-won .dt-avatar { animation: none; }
}

/* ---------- fitting text inside the console (see fitConsole in table-view.js) ---------- */
.dt-console { overflow: hidden; }
.dt-console.is-rolled .dt-prevailing, .dt-console.is-rolled .dt-round { display: none; }
#digitalTable .dt-console.is-rolled .dt-dice .dice-control { margin: 0; gap: 6px; }
#digitalTable .dt-console.is-rolled .dt-dice .dice-faces { gap: 4px; }
#digitalTable .dt-console.is-rolled .dt-dice .die { width: clamp(22px, 8cqi, 34px); height: clamp(22px, 8cqi, 34px); font-size: clamp(13px, 4.6cqi, 19px); border-radius: 6px; }
#digitalTable .dt-console.is-rolled .dt-dice .dice-total { font-size: clamp(13px, 3.8cqi, 16px); }
.dt-console.fit-1 .dt-prevailing { display: none; }
.dt-console.fit-2 .dt-round { font-size: 11px; line-height: 1.15; }
#digitalTable .dt-console.fit-2 .dt-dice .dice-control button { min-height: 30px; min-width: 52px; font-size: 17px; }
#digitalTable .dt-console.fit-2 .dt-dice .dice-control { margin-top: 2px; gap: 3px; }
.dt-console.fit-2 .dt-console-middle { gap: 2px; }
.dt-console.fit-3 .dt-round { font-size: 10px; }
#digitalTable .dt-console.fit-3 .dt-dice .die { width: 19px; height: 19px; font-size: 11px; }
#digitalTable .dt-console.fit-3 .dt-dice .dice-total { font-size: 11px; }

/* last-hand line wraps onto two lines instead of being cut off */
.dt-hand { white-space: normal; text-overflow: clip; text-align: center; max-width: 64%; width: max-content; border-radius: 12px; line-height: 1.25; }
.dt-pending { max-width: 70%; white-space: normal; text-align: center; width: max-content; }

/* ---------- desktop: table on the left, controls on the right, no scrolling ---------- */
@media (min-width: 900px) and (min-height: 520px) {
  body.playing-layout .wrap:has(#tableBoardPanel.dt-on:not([hidden])) { max-width: min(1320px, 100%); }
  #tableBoardPanel.dt-on {
    display: grid; column-gap: 20px; align-content: stretch; overflow: hidden;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 28vw, 380px);
    grid-template-rows: repeat(14, auto) 1fr;
  }
  #tableBoardPanel.dt-on > * { grid-column: 2; min-width: 0; }
  #tableBoardPanel.dt-on > #digitalTable { grid-column: 1; grid-row: 1 / -1; align-self: center; justify-self: center; }
  #tableBoardPanel.dt-on > #boardStatus { margin: 4px 0 0; }
  #tableBoardPanel.dt-on .board-references button { min-height: 52px; }
  #digitalTable { max-width: none; margin: 0; padding-bottom: 28px; width: min(100%, calc((100dvh - 148px - var(--staging-h, 0px)) * 1.333)); }
  .dt-stage { aspect-ratio: 16 / 12; --av: clamp(46px, calc((100dvh - var(--staging-h, 0px)) * .095), 72px); }
  .dt-centre { width: clamp(180px, 27cqi, 270px); }
  #digitalTable .dt-seat { width: clamp(124px, 20cqi, 190px); }
  #digitalTable .dt-seat.at-top, #digitalTable .dt-seat.at-bottom { width: clamp(150px, 24cqi, 230px); }
  .dt-name { font-size: clamp(14px, 1.9cqi, 17px); }
  .dt-score { font-size: clamp(24px, 3.3cqi, 32px); }
}

/* last-hand / pending line: hangs just under the bottom tile wall at every size */
.dt-hand, .dt-pending { top: calc(100% + 12px); left: 50%; transform: translateX(-50%); max-width: min(300px, 70cqi); }