/*
 * Cambio v0.2.7.4: the Design Studio table (handover mockup/design-studio 22efb46, design-studio/handover/: HANDOVER.md,
 * tokens.css, assets/). One layout for the three styles (Classic+ is the base and the fallback, body[data-table-style]).
 * Every box is placed in px by js/table-ds.js (inline); this file only styles and sets the inner structure. The tokens
 * below are the studio's tokens.css (its font faces are the app's own, css/tokens.css). Own SVG / CSS only.
 */
:root.ds-table body, :root.ds-table body[data-table-style="classic_plus"] {
  /* type */
  --ds-font-display: 'Fraunces', Georgia, serif;
  --ds-font-ui: 'Plus Jakarta Sans', system-ui, sans-serif;
  --ds-fw-ui: 650; --ds-fw-strong: 800;
  --ds-fs-btn: 13px; --ds-fs-lbl: 9px; --ds-fs-name: 10.5px; --ds-fs-status: 12.5px; --ds-fs-pile: 9px; --ds-track-caps: .12em;
  /* radii */
  --ds-r-card: 12%; --ds-r-btn: 11px; --ds-r-plate: 6px; --ds-r-pill: 999px; --ds-r-pilebox: 16px;
  /* room + felt */
  --ds-room-1: #0f2a22; --ds-room-2: #06130f;
  --ds-felt-hi: #3fae7c; --ds-felt-mid: #1f7d52; --ds-felt-lo: #0d4a30;
  --ds-felt-sheen: rgba(255, 255, 255, .10);
  --ds-rail-1: #8a5530; --ds-rail-2: #5c3519; --ds-rail-3: #2f1a0b; --ds-rail-inlay: #e0b56a;
  --ds-rail-w: 12px;
  /* ink + accents */
  --ds-ink: #fffaf0; --ds-ink-dim: rgba(255, 250, 240, .62);
  --ds-accent: #f4c95d;           /* gold: turn glow, legal moves */
  --ds-accent-2: #7cf0c0;         /* mint: your-turn status */
  --ds-danger: #e0485a;           /* Cambio call */
  --ds-plate-bg: linear-gradient(#fffdf6, #efe4cc); --ds-plate-ink: #2a1a0c; --ds-plate-edge: #c79a52;
  --ds-btn-bg: linear-gradient(#ffe39a, #e8b94e); --ds-btn-ink: #2a1a06; --ds-btn-edge: #fff0bf;
  --ds-btn2-bg: rgba(255, 255, 255, .08); --ds-btn2-ink: #fffaf0; --ds-btn2-edge: rgba(255, 255, 255, .22);
  --ds-btn-off-bg: rgba(255, 255, 255, .05); --ds-btn-off-ink: rgba(255, 255, 255, .38);
  --ds-cambio-bg: linear-gradient(#ff6b78, #c22a3d); --ds-cambio-edge: #ffb3bb;
  --ds-back-1: #9b2335; --ds-back-2: #5a0f1d; --ds-back-line: rgba(255, 236, 200, .55); --ds-back-mono: rgba(255, 244, 222, .9);
  --ds-face-bg: #fffdf8; --ds-face-red: #c8102e; --ds-face-black: #15171c;
  --ds-status-bg: rgba(8, 20, 15, .78); --ds-status-edge: rgba(244, 201, 93, .55);
  --ds-wordmark: rgba(255, 255, 255, .22);
  /* shadows / depth */
  --ds-sh-card: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 2px 3px rgba(0, 0, 0, .35), 0 6px 12px rgba(0, 0, 0, .25);
  --ds-sh-own: 0 2px 0 rgba(255, 255, 255, .3) inset, 0 4px 6px rgba(0, 0, 0, .35), 0 12px 22px rgba(0, 0, 0, .35);
  --ds-sh-felt: 0 18px 40px rgba(0, 0, 0, .6), 0 4px 10px rgba(0, 0, 0, .4);
  --ds-sh-btn: 0 2px 0 rgba(0, 0, 0, .35), 0 6px 14px rgba(0, 0, 0, .35);
  --ds-glow-turn: 0 0 0 2.5px var(--ds-accent), 0 0 18px 4px rgba(244, 201, 93, .55);
  /* motion (durations / easings) */
  --ds-ease-out: cubic-bezier(.2, .8, .2, 1);        /* settle */
  --ds-ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* pop / overshoot */
  --ds-ease-in: cubic-bezier(.5, 0, .75, 0);
  --ds-dur-tap: 90ms; --ds-dur-flip: 260ms; --ds-dur-deal: 320ms; --ds-deal-stagger: 55ms;
  --ds-voice: linear-gradient(#3b82f6, #1d4ed8); --ds-voice-edge: #93c5fd;  /* Voice / Google Meet: same blue in every style */
  --ds-dur-slide: 220ms; --ds-dur-glow: 1600ms; --ds-dur-cambio: 900ms; --ds-dur-react: 1400ms; --ds-dur-drawer: 200ms;
}
:root.ds-table body[data-table-style="darbar"] {
  --ds-font-display: 'Fraunces', Georgia, serif;
  --ds-room-1: #3a1410; --ds-room-2: #170605;
  --ds-felt-hi: #1f8a68; --ds-felt-mid: #0f5f49; --ds-felt-lo: #06342a;   /* peacock-emerald */
  --ds-felt-sheen: rgba(255, 220, 150, .10);
  --ds-rail-1: #7a2e1c; --ds-rail-2: #4a160d; --ds-rail-3: #220804; --ds-rail-inlay: #e9b949;  /* carved sheesham + gilt */
  --ds-rail-w: 13px;
  --ds-ink: #fff3d6; --ds-ink-dim: rgba(255, 236, 196, .66);
  --ds-accent: #ffb627;   /* saffron */
  --ds-accent-2: #ffd36b;
  --ds-danger: #d6283f;
  --ds-plate-bg: linear-gradient(#7a1426, #4b0b17); --ds-plate-ink: #ffe9b0; --ds-plate-edge: #e9b949;
  --ds-btn-bg: linear-gradient(#ffd877, #d99a22); --ds-btn-ink: #3a1204; --ds-btn-edge: #fff0b8;
  --ds-btn2-bg: rgba(255, 210, 120, .10); --ds-btn2-ink: #ffe9b0; --ds-btn2-edge: rgba(233, 185, 73, .5);
  --ds-cambio-bg: linear-gradient(#e8455a, #9b1027); --ds-cambio-edge: #ffd36b;
  --ds-back-1: #7c1424; --ds-back-2: #3f0711; --ds-back-line: rgba(233, 185, 73, .85); --ds-back-mono: #f3cd6d;
  --ds-status-bg: rgba(43, 8, 10, .82); --ds-status-edge: rgba(233, 185, 73, .8);
  --ds-wordmark: rgba(233, 185, 73, .42);
  --ds-glow-turn: 0 0 0 2.5px var(--ds-accent), 0 0 20px 5px rgba(255, 182, 39, .55);
  --ds-r-btn: 12px 12px 12px 12px; --ds-r-plate: 3px;
}
:root.ds-table body[data-table-style="lounge"] {
  --ds-room-1: #10182a; --ds-room-2: #03060c;
  --ds-felt-hi: #1d6f86; --ds-felt-mid: #0e4558; --ds-felt-lo: #06202c;   /* midnight teal baize */
  --ds-felt-sheen: rgba(160, 230, 255, .10);
  --ds-rail-1: #3a2b25; --ds-rail-2: #1d1411; --ds-rail-3: #0a0605; --ds-rail-inlay: #c9a26b;  /* oxblood leather, brass */
  --ds-rail-w: 12px;
  --ds-ink: #eaf6ff; --ds-ink-dim: rgba(220, 238, 255, .6);
  --ds-accent: #5ee7ff;   /* cyan neon */
  --ds-accent-2: #ffc56b; /* amber */
  --ds-danger: #ff4f7b;
  --ds-plate-bg: linear-gradient(#1e2634, #10151e); --ds-plate-ink: #eaf6ff; --ds-plate-edge: rgba(94, 231, 255, .55);
  --ds-btn-bg: linear-gradient(#8ff3ff, #2ec4e6); --ds-btn-ink: #04202a; --ds-btn-edge: #d6fbff;
  --ds-btn2-bg: rgba(140, 220, 255, .08); --ds-btn2-ink: #eaf6ff; --ds-btn2-edge: rgba(94, 231, 255, .35);
  --ds-cambio-bg: linear-gradient(#ff7aa0, #d8245a); --ds-cambio-edge: #ffc0d2;
  --ds-back-1: #1b2b4a; --ds-back-2: #0a1226; --ds-back-line: rgba(255, 197, 107, .7); --ds-back-mono: #ffc56b;
  --ds-status-bg: rgba(4, 10, 18, .82); --ds-status-edge: rgba(94, 231, 255, .55);
  --ds-wordmark: rgba(94, 231, 255, .30);
  --ds-glow-turn: 0 0 0 2.5px var(--ds-accent), 0 0 22px 6px rgba(94, 231, 255, .5);
  --ds-r-btn: 14px; --ds-r-plate: 999px;
}

/* room */
:root.table-v7.ds-table.in-game #room-bg { background: radial-gradient(ellipse 70% 60% at 50% 45%, var(--ds-room-1), var(--ds-room-2) 75%); }
:root.table-v7.ds-table.in-game #room-bg::after { content: ''; display: block; position: absolute; inset: 0; background: url(../assets/table/ds/felt-grain.svg); opacity: .5; }
:root.table-v7.ds-table.in-game body[data-table-style="darbar"] #room-bg { background: radial-gradient(ellipse 60% 55% at 50% 40%, rgba(255, 170, 70, .28), transparent 70%),
  url(../assets/table/ds/darbar-jali.svg) 0 0 / 48px 48px, radial-gradient(ellipse 80% 70% at 50% 45%, var(--ds-room-1), var(--ds-room-2) 80%); }
:root.table-v7.ds-table.in-game body[data-table-style="lounge"] #room-bg { background: url(../assets/table/ds/lounge-bokeh.svg) center / cover no-repeat,
  radial-gradient(ellipse 50% 80% at 50% -10%, rgba(255, 220, 170, .2), transparent 70%), radial-gradient(ellipse 80% 70% at 50% 50%, var(--ds-room-1), var(--ds-room-2) 80%); }

/* the table: rail + baize, a stadium (#felt-rim is the rail, #felt-inner the baize) */
:root.table-v7.ds-table #felt { filter: none; box-shadow: var(--ds-sh-felt); border-radius: 999px; }
:root.table-v7.ds-table #felt-rim { inset: 0; border-radius: 999px; box-shadow: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 25%, transparent 75%, rgba(0, 0, 0, .45)),
    linear-gradient(90deg, var(--ds-rail-2), var(--ds-rail-1) 25%, var(--ds-rail-2) 50%, var(--ds-rail-1) 75%, var(--ds-rail-2)) !important; }
:root.table-v7.ds-table #felt-rim::after { content: ''; display: block; position: absolute; inset: 3px; border-radius: 999px; border: 1.5px solid var(--ds-rail-inlay); opacity: .8; background: none; }
:root.table-v7.ds-table #felt-inner { inset: var(--ds-rail-w); border-radius: 999px; overflow: hidden;
  background: url(../assets/table/ds/felt-grain.svg), radial-gradient(ellipse 65% 60% at 50% 42%, var(--ds-felt-hi), var(--ds-felt-mid) 55%, var(--ds-felt-lo)) !important;
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .35), inset 0 10px 26px rgba(0, 0, 0, .55), inset 0 -2px 0 rgba(255, 255, 255, .08) !important; }
:root.table-v7.ds-table #felt-inner::after { display: none; }
:root.table-v7.ds-table body[data-table-style="darbar"] #felt-rim { background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .14) 0 2px, transparent 2px 7px, rgba(255, 220, 160, .08) 7px 8px, transparent 8px 13px),
  linear-gradient(180deg, rgba(255, 220, 170, .28), transparent 25%, transparent 75%, rgba(0, 0, 0, .5)),
  linear-gradient(90deg, var(--ds-rail-2), var(--ds-rail-1) 30%, var(--ds-rail-2) 55%, var(--ds-rail-1) 80%, var(--ds-rail-2)) !important; }
:root.table-v7.ds-table body[data-table-style="darbar"] #felt-inner { background: url(../assets/table/ds/darbar-jali.svg) center / 64px 64px, radial-gradient(ellipse 65% 60% at 50% 42%, var(--ds-felt-hi), var(--ds-felt-mid) 55%, var(--ds-felt-lo)) !important;
  box-shadow: inset 0 0 0 2px var(--ds-rail-inlay), inset 0 0 0 4px rgba(0, 0, 0, .35), inset 0 12px 30px rgba(0, 0, 0, .55) !important; }
:root.table-v7.ds-table body[data-table-style="lounge"] #felt-rim { background: radial-gradient(ellipse 50% 40% at 50% 0%, rgba(255, 255, 255, .16), transparent 70%),
  linear-gradient(180deg, rgba(255, 255, 255, .1), transparent 30%, transparent 70%, rgba(0, 0, 0, .55)), linear-gradient(var(--ds-rail-1), var(--ds-rail-2)) !important; }
:root.table-v7.ds-table body[data-table-style="lounge"] #felt-rim::after { inset: 5px; border-style: dashed; opacity: .7; }
:root.table-v7.ds-table body[data-table-style="lounge"] #felt-inner { box-shadow: inset 0 0 0 1px rgba(94, 231, 255, .35), inset 0 0 24px rgba(94, 231, 255, .1), inset 0 12px 30px rgba(0, 0, 0, .6) !important; }

/* card backs: the studio's three backs */
:root.table-v7.ds-table .card.back { border: 0 !important; border-radius: 12% / 8.6%; box-shadow: var(--ds-sh-card); background: url(../assets/table/ds/back-classic-plus.svg) center / 100% 100% no-repeat !important; }
:root.table-v7.ds-table body[data-table-style="darbar"] .card.back { background-image: url(../assets/table/ds/back-darbar.svg) !important; }
:root.table-v7.ds-table body[data-table-style="lounge"] .card.back { background-image: url(../assets/table/ds/back-lounge.svg) !important; }

/* opponents: each box placed by js/table-ds.js; the avatar, the name plate and the hand are absolute inside the seat */
:root.table-v7.ds-table #ui-layer #seats .seat { display: block !important; position: absolute !important; transform: none !important; margin: 0 !important; padding: 0 !important; }
:root.table-v7.ds-table #ui-layer #seats .seat .seat-id { display: block !important; position: absolute !important; margin: 0 !important; }
:root.table-v7.ds-table #ui-layer #seats .seat .avatar { position: absolute !important; margin: 0 !important; font-size: calc(var(--ds-ch) * .4) !important; box-shadow: 0 0 0 2px var(--ds-plate-edge), 0 3px 8px rgba(0, 0, 0, .6); }
:root.table-v7.ds-table #ui-layer #seats .seat.active .avatar { box-shadow: var(--ds-glow-turn); }
:root.table-v7.ds-table #ui-layer #seats .seat.targetable .avatar { box-shadow: 0 0 0 2px var(--ds-accent), 0 0 10px var(--ds-accent); }
:root.table-v7.ds-table #ui-layer #seats .seat .name, :root.table-v7.ds-table #my-tag .name { position: absolute !important; display: block !important; max-width: none !important; box-sizing: border-box; padding: 0 3px !important; margin: 0 !important;
  border-radius: var(--ds-r-plate) !important; background: var(--ds-plate-bg) !important; color: var(--ds-plate-ink) !important; border: 1px solid var(--ds-plate-edge) !important;
  font: 700 var(--ds-fs-name)/14px var(--ds-font-ui) !important; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 4px rgba(0, 0, 0, .5) !important; z-index: 2; }
:root.table-v7.ds-table #ui-layer #seats .seat .name .nm, :root.table-v7.ds-table #my-tag .name .nm { overflow: hidden; text-overflow: ellipsis; }
:root.table-v7.ds-table #ui-layer #seats .seat .name .cambio-badge, :root.table-v7.ds-table #my-tag .name .cambio-badge { position: absolute; left: 50%; top: -15px; transform: translateX(-50%); font-size: 8.5px; line-height: 13px; padding: 0 4px; }
:root.table-v7.ds-table #ui-layer #seats .seat .hand.small { position: absolute !important; display: grid !important; margin: 0 !important; padding: 0 !important; transform: none !important;
  grid-template-columns: repeat(var(--ds-cols, 2), var(--ds-cw, calc(var(--ds-ch) * 5 / 7))) !important; grid-auto-rows: var(--ds-ch) !important; gap: 4px !important; column-gap: 4px !important; row-gap: 4px !important; }
:root.table-v7.ds-table #ui-layer #seats .seat .hand.small .card.small, :root.table-v7.ds-table #ui-layer #seats .seat .hand.small .card.small:not(.face) { --h: var(--ds-ch) !important; margin: 0 !important; }
/* v0.2.7.4: the solver's whole-px card width, not ch x 5/7 (2 columns at 34.3 px left 15.7 px between hands at 667x375 n6) */
:root.table-v7.ds-table #ui-layer #seats .seat:not(.ds-fan) .hand.small .card.small:not(.face) { width: var(--ds-cw, auto) !important; aspect-ratio: auto !important; }
/* a face-up card (a peek, the reveal) is drawn at >= 28 px so its index stays readable; it grows round its cell */
:root.table-v7.ds-table #ui-layer #seats .seat .hand.small .card.small.face { --h: max(var(--ds-ch), 28px) !important; z-index: 6;
  margin: calc((var(--ds-ch) - max(var(--ds-ch), 28px)) / 2) calc((var(--ds-ch) - max(var(--ds-ch), 28px)) * 5 / 14) !important; }
/* each opponent card's tap area is the card + 2 px all round (HANDOVER cardHit) */
:root.table-v7.ds-table #ui-layer #seats .seat .hand.small.pad .card::before { content: '' !important; position: absolute; inset: -2px !important; }
/* the compact fan (7 opponents on the smallest phones): every card edge shows, the badge counts them */
:root.table-v7.ds-table #ui-layer #seats .seat.ds-fan .hand.small { display: block !important; }
:root.table-v7.ds-table #ui-layer #seats .seat.ds-fan .hand.small .card { position: absolute !important; top: 0; }
:root.table-v7.ds-table #ui-layer #seats .seat.ds-fan .hand.small .card:not(:first-child) { box-shadow: -2px 0 3px rgba(0, 0, 0, .35); }
:root.table-v7.ds-table #ui-layer #seats .seat .ds-count { position: absolute; right: -6px; top: -6px; z-index: 20; min-width: 16px; height: 14px; border-radius: 7px; background: rgba(0, 0, 0, .78); color: var(--ds-ink);
  font: 800 9px/14px var(--ds-font-ui); text-align: center; padding: 0 3px; pointer-events: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .3); }
/* the magnifier seats: the whole hand is ONE tap target (>= 32 px) that opens the loupe (js/app.js) */
:root.table-v7.ds-table #ui-layer #seats .seat.ds-loupe .hand.small .card::before { content: none !important; }
:root.table-v7.ds-table #ui-layer #seats .seat.ds-loupe .hand.small:has(.card.selectable) { outline: 2px solid var(--ds-accent); outline-offset: 3px; border-radius: 4px; cursor: zoom-in; }

/* you */
:root.table-v7.ds-table #my-area { display: block !important; position: absolute !important; transform: none !important; margin: 0 !important; padding: 0 !important; }
:root.table-v7.ds-table #my-tag { position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; display: block !important; pointer-events: none; margin: 0 !important; }
:root.table-v7.ds-table #my-tag > * { pointer-events: auto; }
:root.table-v7.ds-table #my-tag .avatar { position: absolute !important; margin: 0 !important; font-size: calc(var(--ds-ava-me) * .55) !important; box-shadow: 0 0 0 2px var(--ds-plate-edge), 0 3px 8px rgba(0, 0, 0, .6); }
:root.table-v7.ds-table #my-area.active #my-tag .avatar { box-shadow: var(--ds-glow-turn); }
:root.table-v7.ds-table #my-tag .act-label { left: var(--ds-act-x, 0px); top: var(--ds-act-y, -24px); bottom: auto; transform: none; pointer-events: none !important; z-index: 6; max-width: 92px; box-sizing: border-box; }
:root.table-v7.ds-table #my-hand { position: absolute !important; display: grid !important; margin: 0 !important; padding: 0 !important; transform: none !important;
  grid-template-columns: repeat(var(--ds-cols, 4), var(--ds-own-cw, calc(var(--ds-own-ch) * 5 / 7))) !important; grid-auto-rows: var(--ds-own-ch) !important; gap: 6px !important; justify-content: start; }
/* v0.2.7.4: the solver's own-card width (whole px), not ch x 5/7: 4 cards at 51.4 px made a hand 1.6 px wider than planned (probe 640x360 n6: 14.5 px gap) */
:root.table-v7.ds-table #my-hand .card.large { --h: var(--ds-own-ch) !important; margin: 0 !important; width: var(--ds-own-cw, auto) !important; aspect-ratio: auto !important; box-shadow: var(--ds-sh-own); }

/* piles: DRAW · DISCARD · YOUR CARD, 14 px labels under them, in the pile box */
:root.table-v7.ds-table #center { position: absolute !important; display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: var(--ds-pile-gap, 14px) !important;
  margin: 0 !important; padding: 0 !important; transform: none !important; width: auto !important; height: auto !important; }
:root.table-v7.ds-table #center > .pile, :root.table-v7.ds-table #center > #drawn-slot { width: var(--ds-pile-cw) !important; margin: 0 !important; flex: none; }
:root.table-v7.ds-table #center .card.medium { --h: var(--v7-ch-pile) !important; }
:root.table-v7.ds-table .pile-count, :root.table-v7.ds-table #center .pile-label { top: calc(100% + 2px); font: 800 var(--ds-fs-pile)/10px var(--ds-font-ui); letter-spacing: .08em; color: var(--ds-ink); background: none; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); padding: 1px 2px; }
:root.table-v7.ds-table.in-game #v8-pilebox { border-color: var(--ds-wordmark); border-radius: var(--ds-r-pilebox); background: rgba(0, 0, 0, .1); }

/* the right column: 64 px wide, seven taps of --ds-tap (40 at 320 px high, 50 at 390), >= 6 px apart */
:root.table-v7.ds-table #right-actions { width: 64px !important; justify-content: space-between !important; }
:root.table-v7.ds-table #ui-layer #right-actions .act { width: 64px !important; height: var(--ds-tap) !important; min-height: var(--ds-tap) !important; }
:root.table-v7.ds-table #ui-layer #right-actions .act.txt .face { width: 58px; height: min(36px, calc(var(--ds-tap) - 6px)); border-radius: var(--ds-r-btn); font: var(--ds-fw-ui) var(--ds-fs-btn)/1 var(--ds-font-ui); }
:root.table-v7.ds-table #ui-layer #right-actions .act.ico .face { width: 36px; height: 30px; border-radius: var(--ds-r-btn); }
:root.table-v7.ds-table.ds-tap-s #ui-layer #right-actions .act.ico .face { width: 26px; height: 26px; }
:root.table-v7.ds-table #ui-layer #right-actions .act .face { background: var(--ds-btn2-bg); color: var(--ds-btn2-ink); border-color: var(--ds-btn2-edge); box-shadow: var(--ds-sh-btn); }
:root.table-v7.ds-table #ui-layer #right-actions .act.primary .face { background: var(--ds-btn-bg); color: var(--ds-btn-ink); border-color: var(--ds-btn-edge); font-weight: 800; }
:root.table-v7.ds-table #ui-layer #right-actions .act:disabled .face { background: var(--ds-btn-off-bg); color: var(--ds-btn-off-ink); border-color: rgba(255, 255, 255, .1); box-shadow: none; }
:root.table-v7.ds-table #ui-layer #right-actions .act.cambio .face, :root.table-v7.ds-table #ui-layer #right-actions .act.danger .face { background: var(--ds-cambio-bg); border-color: var(--ds-cambio-edge); color: #fff; }
:root.table-v7.ds-table #ui-layer #right-actions .act.cambio:disabled .face { opacity: .45; }
:root.table-v7.ds-table #ui-layer #right-actions .act .lbl { font: 700 var(--ds-fs-lbl)/1 var(--ds-font-ui); letter-spacing: .04em; text-transform: uppercase; }
/* chat / reactions (44 x 44, bottom left) and the menu (44 x 44, top right, beside the column) */
:root.table-v7.ds-table #ui-layer #btn-emoji { width: 44px !important; height: 44px !important; min-height: 44px !important; }
:root.table-v7.ds-table #ui-layer #btn-emoji .face { width: 40px; height: 40px; border-radius: 14px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .18); }
:root.table-v7.ds-table #menu-btn .face { width: 40px; height: 40px; border-radius: 14px; background: rgba(0, 0, 0, .45); }
:root.table-v7.ds-table #corner-info .timer { min-width: 52px; height: 22px; box-sizing: border-box; text-align: center; font: 800 12px/22px var(--ds-font-ui) !important; padding: 0 6px !important;
  background: rgba(0, 0, 0, .55) !important; border: 1px solid rgba(255, 255, 255, .16) !important; border-radius: 8px !important; }
/* status: one line, the studio's pill */
:root.table-v7.ds-table #ui-layer > #banner { border-radius: 999px !important; background: var(--ds-status-bg) !important; border: 1px solid var(--ds-status-edge) !important; font-family: var(--ds-font-ui); }

/* the magnifier (loupe): the chosen opponent's cards at >= 44 px wide, one tap picks one (peek / swap / snap) */
#ds-loupe { position: absolute; z-index: 70; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 10px 10px; box-sizing: border-box;
  background: rgba(10, 12, 18, .94); border: 1px solid var(--ds-accent, #f4c95d); border-radius: 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, .6); }
#ds-loupe .ds-loupe-hd { font: 700 11px/14px var(--ds-font-ui, sans-serif); color: var(--ds-ink, #fff); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
#ds-loupe .ds-loupe-row { display: flex; gap: 6px; }
#ds-loupe .card { --h: 62px; position: relative; }
#ds-loupe .ds-loupe-x { position: absolute; right: -10px; top: -10px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3);
  background: #1b2130; color: #fff; font: 700 15px/1 var(--ds-font-ui, sans-serif); cursor: pointer; }

/* end of game (review 2026-11-04 update 2): results buttons >= 40 px with 8 px gaps; the reveal's cards readable (24 x 34);
   "Show results" on the revealed table a 32 px pill (it overhangs the 24 px status line, which keeps its place) */
#modal-box.results .row, #modal-box.results .row.end { gap: 8px; }
#modal-box.results button, #modal-box.results .reg-sheet button { height: 40px; min-height: 40px; padding: 0 16px; }
#modal-box.results table.results .mini .card.tiny { --h: 34px; margin-right: 3px; border-radius: 4px; }
#modal-box.results table.results .mini .card.tiny .tl { font-size: 12px; font-weight: 700; }
#modal-box.results table.results td { padding-top: 4px; padding-bottom: 4px; }
#reopen-results { display: inline-flex; align-items: center; height: 32px; min-height: 32px; margin: -4px 0 -4px 4px; position: relative; top: -3px; padding: 0 14px; vertical-align: middle; border-radius: 999px;
  background: var(--ds-btn-bg, #e8b94e); color: var(--ds-btn-ink, #2a1a06) !important; border: 1px solid var(--ds-btn-edge, #fff0bf); font-weight: 800; text-decoration: none; box-sizing: border-box; }
/* the Cambio hold cue: a ring round the bell fills while the button is held */
:root.table-v7 #ui-layer #btn-cambio .face { position: relative; overflow: visible; }
:root.table-v7 #ui-layer #btn-cambio .hold-ring { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); pointer-events: none; transform: rotate(-90deg); overflow: visible; }
:root.table-v7 #ui-layer #btn-cambio .hold-ring circle { fill: none; stroke: var(--ds-accent, #f4c95d); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; }
:root.table-v7 #ui-layer #btn-cambio:not(:disabled) .hold-ring circle { opacity: .35; stroke-dashoffset: 0; stroke: rgba(255, 255, 255, .5); stroke-width: 1.5; }
:root.table-v7 #ui-layer #btn-cambio.holding .hold-ring circle { opacity: 1; stroke: var(--ds-accent, #f4c95d); stroke-width: 3; stroke-dashoffset: 100; animation: ds-hold var(--hold-ms, 450ms) linear forwards; }
@keyframes ds-hold { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
:root.table-v7 #ui-layer #btn-cambio .lbl { color: var(--ds-ink, #fff); }

/* v0.2.7.4 design QA 26b81ce:
   (a) the reserved Voice / Google Meet spot at (8,8) 44x44 with its VOICE label: the online table's voice entry (blue when
       there is a call to start or join), a dim disabled spot elsewhere; (b) the REACT label beside chat and each player's
       26 px reaction spot as a dashed marker; (c) YOUR CARD as an empty dashed slot with its label before you draw. */
:root #ds-voice, :root #ds-voice-lbl, :root #ds-react-lbl, :root #ds-react-marks { display: none; }
:root.table-v7.ds-table #ds-voice { display: block; position: absolute; z-index: 30; width: 44px; height: 44px; padding: 0; margin: 0; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; }
:root.table-v7.ds-table #ds-voice .face { display: grid; place-items: center; width: 40px; height: 40px; margin: 2px; border-radius: 14px; box-sizing: border-box;
  background: var(--ds-voice); border: 1px solid var(--ds-voice-edge); color: #fff; pointer-events: none; }
:root.table-v7.ds-table #ds-voice svg { width: 20px; height: 20px; fill: currentColor; }
:root.table-v7.ds-table #ds-voice.ds-off .face, :root.table-v7.ds-table #ds-voice[data-state="wait"] .face { opacity: .5; } /* still the voice blue (never a game action), dimmed while there is no call to start or join */
:root.table-v7.ds-table #ds-voice:focus-visible .face { outline: 2px solid var(--ds-voice-edge); outline-offset: 1px; }
:root.table-v7.ds-table #ds-voice-lbl, :root.table-v7.ds-table #ds-react-lbl { display: block; position: absolute; z-index: 30; pointer-events: none; text-align: center; white-space: nowrap; overflow: hidden;
  font: 800 var(--ds-fs-pile)/12px var(--ds-font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ds-ink-dim); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
:root.table-v7.ds-table #ds-react-lbl { text-align: left; }
:root.table-v7.ds-table #ds-react-marks { display: block; position: absolute; inset: 0; pointer-events: none; } /* under the seats: a card is never covered */
:root.table-v7.ds-table #ds-react-marks .ds-react-spot { position: absolute; box-sizing: border-box; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .42); pointer-events: none; }
:root.table-v7.ds-table #drawn-slot.v7-empty-slot { visibility: visible; pointer-events: none !important; }
:root.table-v7.ds-table #drawn-slot.v7-empty-slot .card.empty { background: rgba(0, 0, 0, .12) !important; border: 1.5px dashed rgba(255, 255, 255, .45) !important; box-shadow: none !important; }
/* v0.2.7.4: YOUR CARD is the widest pile label; with the real 800 weight (tokens.css @font-face 200 800) its .08em
   tracking brought it within 0.6 px of DISCARD at 640x360: tighter tracking keeps >= 2 px (tests/v0270-table-v72 fix 4) */
:root.table-v7.ds-table #center .drawn-label { letter-spacing: .02em; }
:root.table-v7.ds-table #drawn-slot.v7-empty-slot .drawn-label { color: var(--ds-ink-dim); }
/* the emoji drawer on the table (HANDOVER "Emoji drawer"; design QA 26b81ce item 4): a 268 px card above the chat button,
   6 columns, 3 or 4 rows (--ds-drawer-rows) that scroll, a 34 px close button. The glyph is the tap; its name is the title. */
:root.table-v7.ds-table #emoji-drawer { position: fixed; box-sizing: border-box; border-bottom: 1px solid var(--panel-line); border-radius: 14px; padding: 6px 8px 8px; display: flex; flex-direction: column; overflow: hidden; }
:root.table-v7.ds-table #emoji-drawer.hidden { display: none; }
:root.table-v7.ds-table #emoji-drawer .drawer-head { margin-bottom: 2px; gap: 6px; font-size: 10.5px; line-height: 1.2; }
:root.table-v7.ds-table #emoji-drawer .x { flex: none; width: 34px; height: 34px; min-width: 34px; font-size: 14px; }
:root.table-v7.ds-table #emoji-list { display: flex; flex-direction: column; gap: 4px; overflow-x: hidden; overflow-y: auto; scroll-snap-type: none; padding: 0;
  max-height: calc(var(--ds-drawer-rows, 4) * 42px + 26px); min-height: 0; }
:root.table-v7.ds-table #emoji-list .emoji-pack { padding: 0; border-right: 0; gap: 2px; }
:root.table-v7.ds-table #emoji-list .pack-head { min-height: 20px; font-size: 10px; }
:root.table-v7.ds-table #emoji-list .pack-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
:root.table-v7.ds-table #emoji-list .emoji { min-width: 0; height: 40px; padding: 0; justify-content: center; border-radius: 10px; }
:root.table-v7.ds-table #emoji-list .emoji span { font-size: 22px; line-height: 1; }
:root.table-v7.ds-table #emoji-list .emoji small, :root.table-v7.ds-table #emoji-list .emoji .refill-link { display: none; }
:root.table-v7.ds-table #emoji-list .emoji .uses { top: 1px; right: 2px; font-size: 7.5px; }
#modal-box.results .results-cols,
#modal-box.results .results-cols section,
#modal-box.results .pp-results,
#modal-box.results .pp-results section { min-width: 0; }
#modal-box.results table.results { width: 100%; table-layout: fixed; }
#modal-box.results table.results td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#modal-box.results table.results td.mini { overflow: hidden; }
#modal-box.results.rs-tight { --mpy: 6px; --mpx: 10px; line-height: 1.2; }
#modal-box.results.rs-tight h2 { margin: 0 0 2px; font-size: 16px; line-height: 1.15; }
#modal-box.results.rs-tight > .small, #modal-box.results.rs-tight h3 { margin: 0 0 2px; }
#modal-box.results.rs-tight table.results td { padding-top: 1px !important; padding-bottom: 1px !important; }
#modal-box.results.rs-tight table.results .mini .card.tiny { margin-right: 2px; }
#modal-box.results.rs-tight table.results td:nth-child(2) { max-width: 7.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#modal-box.results.rs-tight .row.end.modal-foot { row-gap: 6px; }
#modal-box.results.rs-tight .reg-sheet.in-foot .reg-nudge { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#modal-box.results.rs-tighter table.results .mini .card.tiny { --h: 26px; }
#modal-box.results.rs-tighter button, #modal-box.results.rs-tighter .reg-sheet button { height: 36px; min-height: 36px; padding: 0 10px; }
#modal-box.results.rs-tighter .pp-results, #modal-box.results.rs-tighter .results-cols { gap: 4px; }
@media (orientation: landscape) and (max-height: 420px) {
  #modal-box.results.rs-tight { --mpy: 2px; --mpx: 8px; }
  #modal-box.results.rs-tight h2 { font-size: 15px; }
  #modal-box.results.rs-tighter table.results .mini .card.tiny { --h: 16px; }
  #modal-box.results.rs-tighter button, #modal-box.results.rs-tighter .reg-sheet button { height: 32px; min-height: 32px; }
  #modal-box.results.rs-tighter .row.end.modal-foot { margin-top: 0; margin-bottom: 0; padding-top: 0; bottom: 0; }
}