/*
 * Cambio v0.2.7.0: the play screen of the locked mock-up v7.2 (mockup/table-v7-right b35b081: table-v7.html,
 * table-v7.css, check-v7.js), for Pass & Play, solo and online tables. Classic colours. Positions come from
 * js/table-v7.js (inline, per viewport); this file only styles. Everything is scoped to :root.table-v7.
 */
:root.table-v7 {
  --v7-room: #13203B; --v7-felt: #3E9A66; --v7-rail: #6A4428; --v7-back: #6B1A26; --v7-back-edge: #F3E9D2;
  --v7-btn: #D1A94F; --v7-btn-ink: #1A1406; --v7-btn-edge: #F0D58C; --v7-glow: #F5C451; --v7-cambio: #B23A48;
  --v7-ui-bg: rgba(10, 16, 32, .82); --v7-ui-line: rgba(255, 255, 255, .18);
}
/* room */
:root.table-v7.in-game #room-bg { background:
  repeating-linear-gradient(45deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 16px),
  repeating-linear-gradient(-45deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 16px), var(--v7-room); }
:root.table-v7.in-game #room-bg::after { display: none; }

/* felt: a stadium in a wooden rail (positioned by js/table-v7.js) */
:root.table-v7 #felt { position: absolute; transform: none !important; border-radius: 999px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
:root.table-v7 #felt-rim { inset: 0; border-radius: 999px; transform: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 4px 12px rgba(0, 0, 0, .45);
  background: linear-gradient(180deg, #8C5E3A 0%, var(--v7-rail) 45%, #45291A 100%); }
:root.table-v7 #felt-rim::after { display: none; }
:root.table-v7 #felt-inner { inset: 7px; border-radius: 999px; transform: none !important;
  background: radial-gradient(120% 110% at 50% 40%, #46A872 0%, var(--v7-felt) 55%, #2F7E52 100%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), inset 0 6px 14px rgba(0, 0, 0, .25); }
:root.table-v7 #felt-inner::before { display: none; }
:root.table-v7 #felt-inner::after { content: 'CAMBIO'; top: 82%; font: 700 13px/1 var(--font-display, serif); letter-spacing: .3em; color: #fff; opacity: .1; padding: 0; }

/* card backs: oxblood crosshatch, cream border, a faint C */
:root.table-v7 .card.back { border: max(1px, calc(var(--h) * .055)) solid var(--v7-back-edge);
  background: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2050%2070%27%3E%3Ctext%20x=%2725%27%20y=%2745%27%20text-anchor=%27middle%27%20font-family=%27Georgia,serif%27%20font-size=%2730%27%20font-weight=%27700%27%20fill=%27%23F3E9D2%27%20fill-opacity=%27.72%27%3EC%3C/text%3E%3C/svg%3E") center / 80% auto no-repeat,
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 5px), var(--v7-back); }

/* layers: the stage is the whole safe area on the table (no gutters) */
:root.table-v7 #seats { left: 0 !important; right: 0 !important; top: 0; bottom: 0; }
/* opponents: no frames, just avatar, name and cards */
:root.table-v7 #seats .seat { position: absolute; transform: none !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 4px; margin: 0 !important; width: max-content; }
:root.table-v7 #seats .seat.v7-dir-l { flex-direction: row-reverse !important; }
:root.table-v7 #seats .seat .seat-id { display: flex !important; flex-direction: column; align-items: center; gap: 2px; position: relative; flex-direction: column !important; }
:root.table-v7 #seats .seat .avatar { width: var(--v7-ava) !important; height: var(--v7-ava) !important; font-size: calc(var(--v7-ava) * .58) !important; grid-area: auto;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .75), 0 2px 5px rgba(0, 0, 0, .5); }
:root.table-v7 #seats .seat .name { width: auto !important; max-width: var(--v7-name-max); min-width: 0; height: 16px !important; padding: 0 5px !important; grid-area: auto;
  font: 600 10.5px/16px var(--font-ui) !important; color: #fff !important; background: rgba(0, 0, 0, .5) !important; border: 0 !important; border-radius: 6px; box-shadow: none !important; }
:root.table-v7 #seats .seat .chip-turn, :root.table-v7 #seats .seat .chip-bot { display: none !important; }
:root.table-v7 #seats .seat.active .avatar { animation: none; box-shadow: 0 0 0 2px var(--v7-glow), 0 0 12px 2px rgba(245, 196, 81, .7); }
:root.table-v7 #seats .seat.targetable .avatar { box-shadow: 0 0 0 2px var(--v7-glow), 0 0 10px rgba(245, 196, 81, .6); }
:root.table-v7 #seats .seat .hand { margin: 0 !important; }
:root.table-v7 #seats .seat .hand.small.pad { --ch: var(--v7-ch-opp); }
:root.table-v7 #seats .seat.dense .hand.small { --ch: var(--v7-ch-opp); }
:root.table-v7 #seats .seat .card.small { box-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
/* an empty place on the rail (the table always has six seats) */
:root.table-v7 #seats .v7-empty { position: absolute; pointer-events: none !important; display: flex; }
:root.table-v7 #seats .v7-empty.v7-ghost-off { display: none; }
:root.table-v7 #seats .v7-empty .ghost { display: block; width: var(--v7-ava); height: var(--v7-ava); border-radius: 50%;
  background: rgba(10, 16, 32, .35); box-shadow: inset 0 0 0 1.5px rgba(243, 233, 210, .28); }

/* you: avatar + name, then your cards */
:root.table-v7 #my-area { transform: none !important; bottom: auto !important; align-items: center !important; gap: 8px; }
:root.table-v7 #my-tag { width: auto !important; display: flex; flex-direction: column; align-items: center; gap: 2px; }
:root.table-v7 #my-tag .avatar { width: var(--v7-ava-me) !important; height: var(--v7-ava-me) !important; font-size: calc(var(--v7-ava-me) * .58) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .75), 0 2px 5px rgba(0, 0, 0, .5); }
:root.table-v7 #my-tag .name { width: auto !important; max-width: 64px; height: 16px !important; padding: 0 5px !important;
  font: 600 10.5px/16px var(--font-ui) !important; color: #fff !important; background: rgba(0, 0, 0, .5) !important; border: 0 !important; border-radius: 6px; box-shadow: none !important; }
:root.table-v7 #my-area.active #my-tag .avatar { animation: none; box-shadow: 0 0 0 2px var(--v7-glow), 0 0 12px 2px rgba(245, 196, 81, .7); }
:root.table-v7 #my-hand .card.large { --h: min(var(--v7-ch-own), calc(var(--hand-card-h, 999px))); }

/* piles: DRAW N and DISCARD labels under them; the drawn card's label sits ABOVE it (never on the pile labels) */
:root.table-v7 #center { transform: none !important; gap: max(26px, calc(70px - var(--v7-ch-pile, 44px) * 5 / 7)); align-items: flex-start; }
/* v0.2.7.1: the pile centres sit >= 70 px apart (mock-up v7.2: 67 and 55 px, where its labels touch), so DRAW N · DISCARD · YOUR CARD never touch;
   a card's hidden points line never sits over a label */
:root.table-v7 #center .card .pts { visibility: hidden; }
/* v0.2.7.3: the pile cards (tap targets) never under 32 px wide: 45 px high at least, whatever the layout tried */
:root.table-v7 #center .card.medium { --h: max(45px, var(--v7-ch-pile, 45px)); }
:root.table-v7 .pile-count, :root.table-v7 #center .pile-label { position: absolute; left: 50%; top: calc(100% + 4px); bottom: auto; transform: translateX(-50%); white-space: nowrap;
  font: 600 9.5px/1 var(--font-ui); letter-spacing: .05em; text-transform: uppercase; color: #fff; background: rgba(0, 0, 0, .38); padding: 2px 5px; border-radius: 6px; max-width: none; overflow: visible; }
:root.table-v7 .pile-count::before { content: 'Draw '; }
/* v0.2.7.1 (mock-up v7.2): DRAW N · DISCARD · YOUR CARD, three spots in a row; the drawn card sits flat in its spot (no tilt,
   no hint) and the spot keeps its place, hidden, while you hold no card. Swiping the card away still discards it. */
:root.table-v7 #drawn-slot { margin-left: 0; animation: none; }
:root.table-v7 #drawn-slot .card { transform: none; box-shadow: 0 calc(var(--h) * .06) calc(var(--h) * .14) rgba(0, 0, 0, .34), 0 1px 2px rgba(0, 0, 0, .25); }
:root.table-v7 #drawn-slot:not(.v7-empty-slot) .card { animation: pop .2s var(--ease); }
:root.table-v7 #drawn-slot.v7-empty-slot { visibility: hidden; pointer-events: none !important; }
:root.table-v7 #center .drawn-label { pointer-events: auto; } /* v0.2.7.1: part of the YOUR CARD spot (a tap or swipe on it is one on the card) */
/* v0.2.7.1: while opponents' cards can be tapped and you hold a card on a short screen, YOUR CARD may stand beside the
   piles (js/table-v7.js floatHeld: the free spot nearest its own); where the room is narrow its label takes two lines */
:root.table-v7 #drawn-slot.v7-ds-narrow .drawn-label { white-space: normal; width: min-content; text-align: center; line-height: 1.15; }

/* ONE column on the right, full height (v0.2.7.1): 62 x 44 taps, words or icons on smaller faces; all seven moves always shown */
:root.table-v7 #right-actions { position: absolute; right: auto !important; bottom: auto !important; transform: none !important; width: 62px !important;
  display: flex; flex-direction: column; justify-content: space-between; gap: 0; margin: 0; padding: 0; }
/* v0.2.7.1: the column is the full height (js/table-v7.js sets it); its taps never shrink */
:root.table-v7 #right-actions > .act { flex: none; }
:root.table-v7 #ui-layer .act { width: 62px !important; height: 44px !important; min-width: 0 !important; min-height: 44px !important; padding: 0 !important; margin: 0 !important;
  border: 0 !important; background: none !important; box-shadow: none !important; animation: none !important; color: #fff; border-radius: 0;
  display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:root.table-v7 #ui-layer .act.hidden { display: none !important; }
:root.table-v7 #ui-layer .act .face { display: flex; align-items: center; justify-content: center; box-sizing: border-box; pointer-events: none;
  background: var(--v7-btn); color: var(--v7-btn-ink); border: 1px solid var(--v7-btn-edge); border-radius: 9px; box-shadow: 0 2px 0 rgba(0, 0, 0, .25), 0 3px 8px rgba(0, 0, 0, .35); }
:root.table-v7 #ui-layer .act.txt .face { width: 58px; height: 32px; font: 650 13px/1 var(--font-ui); letter-spacing: 0; }
:root.table-v7 #ui-layer .act.ico .face { width: 30px; height: 30px; }
:root.table-v7 #ui-layer .act svg { width: 19px; height: 19px; fill: currentColor; }
:root.table-v7 #ui-layer .act svg .hollow { fill: none; stroke: currentColor; stroke-width: 1.6; }
:root.table-v7 #ui-layer .act .lbl { font: 600 8.5px/1 var(--font-ui); color: #fff; opacity: .9; pointer-events: none; }
:root.table-v7 #ui-layer .act.cambio .face { background: var(--v7-cambio); color: #fff; border-color: #D97A85; }
:root.table-v7 #ui-layer .act.danger .face { background: var(--v7-cambio); color: #fff; border-color: #D97A85; }
:root.table-v7 #ui-layer .act:disabled { cursor: default; }
:root.table-v7 #ui-layer .act:disabled .face { background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .42); border-color: rgba(255, 255, 255, .12); box-shadow: none; }
:root.table-v7 #ui-layer .act:disabled .lbl { opacity: .45; }
:root.table-v7 #ui-layer .act.legal .face { box-shadow: 0 0 0 1.5px var(--v7-glow), 0 0 10px rgba(245, 196, 81, .45); animation: v7-glow 1.8s ease-in-out infinite; }
:root.table-v7 #ui-layer .act.armed .face, :root.table-v7 #ui-layer .act[aria-pressed="true"] .face { box-shadow: 0 0 0 2px #fff; animation: none; }
:root.table-v7 #ui-layer .act.cambio::after { left: 16px; top: 2px; height: 30px; max-width: 30px; border-radius: 9px; }
@keyframes v7-glow { 0%, 100% { box-shadow: 0 0 0 1.5px var(--v7-glow), 0 0 6px rgba(245, 196, 81, .3); } 50% { box-shadow: 0 0 0 1.5px var(--v7-glow), 0 0 14px rgba(245, 196, 81, .65); } }
@media (prefers-reduced-motion: reduce) { :root.table-v7 #ui-layer .act.legal .face { animation: none; } }

/* Emoji bottom left (48 x 48 tap), the timer just above it */
:root.table-v7 #ui-layer #btn-emoji { position: absolute; width: 48px !important; height: 48px !important; min-height: 48px !important; z-index: 3; }
:root.table-v7 #ui-layer #btn-emoji .face { width: 36px; height: 36px; background: var(--v7-ui-bg); border: 1px solid var(--v7-ui-line); color: #fff; border-radius: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
:root.table-v7 #ui-layer #btn-emoji svg { width: 22px; height: 22px; fill: #fff; }
:root.table-v7 #ui-layer #btn-emoji svg .eye { fill: var(--v7-room); }
:root.table-v7 #ui-layer #btn-emoji svg .smile { fill: none; stroke: var(--v7-room); stroke-width: 1.6; stroke-linecap: round; }
/* Snap mode stays lit (v0.2.6.3: the armed Snap button is highlighted, not only ringed) */
:root.table-v7 #ui-layer #btn-snap.armed .face { background: var(--c-selected, #F2C14E); color: #1E2A2C; border-color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 12px 3px var(--c-selected, #F2C14E); }
:root.table-v7 #ui-layer #btn-emoji.armed .face { background: var(--v7-btn); color: var(--v7-btn-ink); }
:root.table-v7 #corner-info { top: auto !important; right: auto !important; transform: translateX(-50%); align-items: center !important; gap: 2px; pointer-events: none; }
:root.table-v7 #corner-info > * { pointer-events: none; }
:root.table-v7 #corner-info .meet-chip { pointer-events: auto; }
:root.table-v7 #corner-info #version-tag, :root.table-v7 #corner-info #age-badge { display: none !important; }
:root.table-v7 #corner-info .timer.clock-off { display: none !important; } /* v0.2.7.1: one clock in the corner as in the mock-up (a hidden one takes no row, so the left seat keeps its place) */
:root.table-v7 #corner-info .timer { font: 600 12px/1 var(--font-num, var(--font-ui)) !important; color: #fff !important; background: rgba(0, 0, 0, .38) !important;
  padding: 3px 6px !important; border-radius: 6px !important; border: 0 !important; box-shadow: none !important; }

/* the menu: ☰ beside the column, its list drops under it (kept on screen, scrolls if needed) */
:root.table-v7 #menu-btn { position: absolute; right: auto !important; width: 44px !important; height: 44px !important; padding: 0 !important; border: 0 !important;
  background: none !important; box-shadow: none !important; display: grid; place-items: center; border-radius: 0; }
:root.table-v7 #menu-btn .face { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--v7-ui-line); background: var(--v7-ui-bg); color: #fff; pointer-events: none; }
:root.table-v7 #menu-btn svg { width: 18px; height: 18px; fill: currentColor; }
:root.table-v7 #menu-btn[aria-expanded="true"] .face { background: var(--v7-btn); color: var(--v7-btn-ink); border-color: var(--v7-btn-edge); }
:root.table-v7 #table-menu { position: fixed; z-index: 60; overflow-y: auto; overscroll-behavior: contain; padding: 5px; box-sizing: border-box;
  background: #1B2A4A; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .55); color: #fff; }
:root.table-v7 #table-menu.hidden { display: none !important; }
:root.table-v7 #table-menu .menu-info { font: 600 12px/1.3 var(--font-ui); padding: 6px 10px 8px; margin: 0 0 4px; border-bottom: 1px solid rgba(255, 255, 255, .12); white-space: nowrap; }
:root.table-v7 #table-menu > button { display: block; width: 100%; min-height: 40px; text-align: left; padding: 0 10px; border: 0; background: none; border-radius: 8px;
  color: #fff; font: 600 14px/1.2 var(--font-ui); cursor: pointer; }
:root.table-v7 #table-menu > button:hover, :root.table-v7 #table-menu > button:focus-visible { background: rgba(255, 255, 255, .08); }
:root.table-v7 #table-menu > button.danger { color: #FFB4BC; }
:root.table-v7 #table-menu .menu-speed { padding: 4px 6px 6px 10px; }
:root.table-v7 #table-menu .menu-sub { display: block; font: 600 11px/1 var(--font-ui); color: rgba(255, 255, 255, .7); margin-bottom: 4px; }
:root.table-v7 #table-menu .seg { display: flex; gap: 3px; }
:root.table-v7 #table-menu .seg button { flex: 1; min-height: 34px; padding: 0 4px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 7px; background: none; color: #fff;
  font: 600 12px/1 var(--font-ui); cursor: pointer; }
:root.table-v7 #table-menu .seg button[aria-checked="true"] { background: var(--v7-btn); color: var(--v7-btn-ink); border-color: var(--v7-btn-edge); }
:root.table-v7 #table-menu .menu-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px 3px; font: 500 10px/1 var(--font-ui); color: rgba(255, 255, 255, .6); }

/* status: one line in the bottom row */
:root.table-v7 #ui-layer > #banner { position: absolute; top: auto !important; transform: translateX(-50%) !important; height: 24px; display: block; white-space: nowrap;
  padding: 0 10px !important; line-height: 24px !important; font: 500 13.5px/24px var(--font-ui); background: rgba(8, 12, 24, .82) !important; color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .16) !important; border-radius: 8px !important; box-shadow: none; width: max-content; box-sizing: border-box; }
:root.table-v7 #ui-layer > #banner { font-size: 13.5px !important; }
:root.table-v7 #ui-layer > #banner[style*="font-size: 13px"] { font-size: 13px !important; }
:root.table-v7 #ui-layer > #banner[style*="font-size: 12px"] { font-size: 12px !important; }
/* the last resort of fitBannerV7: the words are cut with an ellipsis, a button in the line stays whole */
:root.table-v7 #ui-layer > #banner.v7-cut { overflow: hidden; }
/* ended table: Show scores / Show results stays a 32 px control when the words do not fit (568x320) */
:root.table-v7 #ui-layer > #banner.score-back { display: inline-flex !important; align-items: center; gap: 6px; height: auto !important; min-height: 32px; line-height: 1.2 !important; overflow: visible; text-overflow: clip; }
:root.table-v7 #ui-layer > #banner.score-back a.score-back { flex: none; display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 999px; background: #121416; color: #fff; text-decoration: none; font-weight: 700; }
:root.table-v7 #ui-layer > #banner.score-back #reopen-results { background: #121416 !important; color: #fff !important; min-height: 32px; }
:root.table-v7 #ui-layer > #banner.score-back #reopen-results:focus,
:root.table-v7 #ui-layer > #banner.score-back #reopen-results:focus-visible { background: #121416 !important; color: #fff !important; outline: 2px solid #fff; outline-offset: 2px; }
:root.table-v7 #ui-layer > #banner.v7-cut.score-back { overflow: visible; }
/* a line with a button (Pass & Play "Done, hide my cards") keeps the button whole and drops the words before it */
:root.table-v7 #ui-layer > #banner.v7-cut .st-text { display: none; }
:root.table-v7 #ui-layer > #banner.v7-cut:not(:has(.st-text)) { overflow: hidden; text-overflow: ellipsis; }
:root.table-v7 #ui-layer > #banner.v7-cut .pp-done { flex: none; }
:root.table-v7 #ui-layer > #banner.mine { box-shadow: 0 0 0 1.5px var(--v7-glow); }
:root.table-v7 #ui-layer > #banner b { color: #fff; }
:root.table-v7 #ui-layer > #banner .pp-done { min-height: 20px; height: 20px; line-height: 18px; padding: 0 8px; font-size: 12px; vertical-align: middle; margin-top: -2px; }
:root.table-v7 #ui-layer > #banner:empty { display: none; }

/* the table ad: exactly 300 x 50 (the frame is an outline, outside the unit), its label runs up its left side */
:root.table-v7 #ad-table-top { flex-direction: row !important; align-items: stretch; gap: 0; }
:root.table-v7 #ad-table-top .ad-label { writing-mode: vertical-rl; transform: rotate(180deg); width: 10px; height: auto; flex: none; margin: 0; padding: 0;
  font: 600 6.5px/10px var(--font-ui); letter-spacing: 0; text-transform: none; text-align: center; white-space: nowrap; overflow: hidden; }
:root.table-v7 #ad-table-top .ad-fill { flex: none; box-sizing: content-box; border: 0 !important; outline: 1px solid rgba(255, 255, 255, .22); outline-offset: 0; }
/* v0.2.7.0: a face-up opponent card (a peek, the round's reveal) is drawn at >= 28 px so its index is >= 11 px; the
   negative margins keep the seat's 34 px grid cells, so nothing moves */
:root.table-v7 #seats .seat .hand.small .card.small.face { --h: max(var(--v7-ch-opp), 28px); z-index: 6;
  margin: calc((var(--v7-ch-opp) - max(var(--v7-ch-opp), 28px)) / 2) calc((var(--v7-ch-opp) - max(var(--v7-ch-opp), 28px)) * 5 / 14); }
/* own court cards: the monogram stays >= 14 px on the smaller own cards (568x320, big hands) */
:root.table-v7 #my-hand .card.large .court b { font-size: max(14px, calc(var(--h) * .28)); }

/* v0.2.7.1: on the table, toasts drop below the 300x50 banner (top 2..52) instead of sitting 15 px beside it, so a
   toast never comes near the ad (it used to switch the banner off for the rest of the session) */
:root.table-v7[data-screen="table"] .toast { top: 84px; }
:root.table-v7[data-screen="table"] .toast + .toast { top: 120px; }

/* v0.2.7.1 (mock-up v7.2): the acting player's tag ("Drew", "Took discard", "Thinking…") above their avatar; yours sits
   above your avatar, left-aligned with it (never on the pile labels: js/table-v7.js keeps its place clear) */
:root.table-v7 .seat-id { position: relative; }
:root.table-v7 .act-label { position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%); pointer-events: none; z-index: 5;
  background: var(--c-surface, #f4f1ea); color: var(--c-ink, #1d2321); font: 700 11.5px/1 var(--font-ui); padding: 4px 8px; border-radius: 8px; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4); animation: pop .18s var(--ease); }
:root.table-v7 #my-tag { position: relative; }
:root.table-v7 #my-tag .act-label { left: 0; bottom: auto; top: -24px; transform: none; }
/* v0.2.7.1: opponents' cards as in mock-up v7.2 (card height = --v7-ch-opp, which scales with the screen height there;
   2 px between them); a face-up (peeked / shown) card keeps its larger size (rule above) */
:root.table-v7 #seats .seat .hand.small .card.small:not(.face) { --h: var(--v7-ch-opp); }
:root.table-v7 #seats .seat .hand.small { column-gap: 2px !important; row-gap: 2px !important; gap: 2px !important; padding: 0 !important; }
/* v0.2.7.1: while one of an opponent's cards can be tapped (a peek / Jack / Queen power, Snap armed), that hand spreads out to
   the 32 px tap pads (style.css .hand.small.pad); at rest it stays the mock-up's tight 2 px grid */
:root.table-v7 #seats .seat .hand.small.pad:has(.card.selectable) { column-gap: var(--cg) !important; row-gap: var(--rg) !important;
  padding: calc(var(--rg) / 2) calc(var(--cg) / 2) !important; transform: translateY(-3px); } /* -3 px: a bottom seat's lower pads stay on screen (740x360) */
/* ... unless no layout seats every spread hand (table-v7.js: 640x340, five opponents and the banner's 150 px gap): then the
   hands stay in their resting grid and each card is its own tap area */
:root.table-v7.v7-nospread #seats .seat .hand.small.pad:has(.card.selectable) { column-gap: 2px !important; row-gap: 2px !important; padding: 0 !important; transform: none; }
:root.table-v7.v7-nospread #seats .seat .hand.small.pad .card::before { content: none; }