/* Rummy: a table where the melds lie face up in the middle for everyone to build on. The seats run along the top, the
   stock and the discard pile sit beside the melds, your hand fans along the bottom. game.js sets the card sizes
   (--cw / --ch / --fs on the hand, the piles and the meld area) and the layout classes rm-narrow, rm-fit, rm-short. */
.rm { --rm-th: 520px; --rm-gold: #ffd166; --rm-cyan: #55d6ff; --rm-pink: #ff8fa0; --rm-muted: #8aa3c4; --rm-line: #1c2b4a;
  max-width: 1000px; margin: 0 auto; padding: 10px 8px 4px; position: relative; color: #dfe9ff; font-variant-numeric: tabular-nums;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.rm [hidden] { display: none !important; }
.rm-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- top bar ---------- */
.rm-top { display: flex; justify-content: space-between; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin: 0 0 8px; }
.rm-opts { display: flex; gap: 8px 10px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--rm-muted); flex: 1 1 340px; min-width: 0; }
.rm-opts label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
span.rm-sel { display: inline-flex; gap: 6px 8px; flex-wrap: wrap; align-items: center; }
.rm-lt { display: none; }
.rm-opts select { background: #0b1328; color: #dfe9ff; border: 1px solid var(--rm-line); border-radius: 8px; padding: 0 6px; min-height: 40px; font-size: 13.5px; font-family: inherit; }
.rm-opts select:focus-visible { outline: 2px solid var(--rm-cyan); outline-offset: 2px; }
.rm-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.rm .ck-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.rm-tool { gap: 6px; }
#rm-sound[aria-pressed="false"] .on, #rm-sound[aria-pressed="true"] .off { display: none; }
#rm-sound[aria-pressed="false"] { color: var(--rm-muted); }

/* ---------- the table ---------- */
.rm-table { position: relative; height: var(--rm-th); border-radius: 14px; padding: 8px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; box-sizing: border-box; }
.rm-seats { flex: none; display: flex; gap: 6px; justify-content: center; }
.rm-seat { flex: 1 1 0; min-width: 0; max-width: 360px; display: flex; align-items: center; gap: 9px; padding: 5px 9px 5px 7px; border-radius: 11px; background: rgba(4, 10, 24, .46);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); transition: box-shadow .2s, background .2s; }
.rm-seat.rm-turn { background: rgba(4, 10, 24, .7); box-shadow: inset 0 0 0 1.5px var(--rm-gold), 0 0 14px rgba(255, 209, 102, .28); }
.rm-seat-cards { position: relative; flex: none; width: 26px; height: 36px; --cw: 26px; --ch: 36px; }
.rm-seat-cards b { position: absolute; right: -7px; bottom: -5px; min-width: 19px; height: 19px; padding: 0 4px; box-sizing: border-box; border-radius: 10px; background: #0b1328; color: #fff;
  border: 1px solid var(--who, #55d6ff); font-size: 11.5px; font-weight: 800; line-height: 17px; text-align: center; }
.rm-seat-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; }
.rm-seat-top { display: flex; align-items: center; gap: 5px; min-width: 0; }
.rm-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--who, #ffd166); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .35); }
.rm-seat-name { font-size: 13.5px; font-weight: 800; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rm-dealer { flex: none; font-size: 10px; font-weight: 800; line-height: 15px; width: 15px; height: 15px; text-align: center; border-radius: 50%; background: #f4f7fb; color: #0b1328; }
.rm-seat-score { margin-left: auto; flex: none; font-size: 13.5px; font-weight: 800; color: var(--rm-gold); white-space: nowrap; }
.rm-seat-score small, .rm-me-score small { font-size: 11px; font-weight: 700; color: var(--rm-muted); }
.rm-seat-note { font-size: 12px; line-height: 1.25; color: #b9c9e2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 15px; }
.rm-seat-note i { font-style: normal; color: var(--rm-muted); }
.rm-cd { font-weight: 800; color: #fff; white-space: nowrap; }
.rm-cd.rm-red { color: #ff8f9c; }

.rm-mid { flex: 1 1 auto; min-height: 0; display: flex; gap: 12px; align-items: stretch; }
.rm-piles { flex: none; display: flex; gap: 14px; align-items: center; justify-content: center; padding: 0 6px; --cw: 72px; --ch: 100px; --fs: 24px; }
.rm-pilebox { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.rm-pl { font-size: 11.5px; font-weight: 700; letter-spacing: .03em; color: rgba(223, 233, 255, .72); white-space: nowrap; }
.rm-pile { position: relative; width: var(--cw); height: var(--ch); padding: 0; border: 0; background: none; border-radius: calc(var(--cw) * 0.1); cursor: pointer; color: inherit; font: inherit; touch-action: manipulation; }
.rm-pile:disabled { cursor: default; }
.rm-pile:focus-visible { outline: 2px solid var(--rm-cyan); outline-offset: 3px; }
.rm-pile.rm-empty { box-shadow: inset 0 0 0 2px var(--ck-slot, rgba(255, 255, 255, .16)); }
.rm-pile .ck-card { pointer-events: none; }
.rm-stock .ck-card { box-shadow: 0 0 0 0.6px rgba(0, 0, 0, .45), inset 0 0 0 calc(var(--cw) * 0.045) #f3f2ec, inset 0 0 0 calc(var(--cw) * 0.06) rgba(0, 0, 0, .25), 0 2px 0 #cfd6e6, 0 4px 0 #9aa6bf, 0 6px 8px rgba(0, 0, 0, .35); }
.rm-stock.rm-empty .ck-card { display: none; }
.rm-stock-n { position: absolute; left: 50%; bottom: calc(var(--ch) * 0.1); transform: translateX(-50%); min-width: 26px; padding: 0 6px; height: 22px; line-height: 22px; border-radius: 11px;
  background: rgba(6, 12, 28, .86); color: #fff; font-size: 12.5px; font-weight: 800; text-align: center; pointer-events: none; }
.rm-stock.rm-empty .rm-stock-n { bottom: auto; top: 50%; transform: translate(-50%, -50%); background: none; color: rgba(223, 233, 255, .8); font-size: 12px; white-space: nowrap; }
.rm-disc .rm-under { opacity: .92; transform: rotate(-4deg) translate(-2px, 1px); }
.rm-pile.rm-can { animation: rm-can 1.5s ease-in-out infinite; box-shadow: 0 0 0 2.5px var(--rm-gold), 0 0 16px rgba(255, 209, 102, .55); }
.rm-pile.rm-drop { box-shadow: 0 0 0 3px var(--rm-cyan), 0 0 18px rgba(85, 214, 255, .7); }
.rm-pile.rm-hintp { animation: rm-hintp .8s ease-in-out infinite; box-shadow: 0 0 0 3px #fff, 0 0 22px rgba(255, 255, 255, .8); }
@keyframes rm-can { 0%, 100% { box-shadow: 0 0 0 2.5px var(--rm-gold), 0 0 10px rgba(255, 209, 102, .35); } 50% { box-shadow: 0 0 0 2.5px var(--rm-gold), 0 0 20px rgba(255, 209, 102, .75); } }
@keyframes rm-hintp { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.rm-melds { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center;
  gap: calc(var(--cw) * 0.2) calc(var(--cw) * 0.26); padding: 4px; border-radius: 12px; background: rgba(0, 0, 0, .13); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .07);
  --cw: 60px; --ch: 84px; --fs: 20px; position: relative; }
.rm-melds-empty { max-width: 300px; text-align: center; font-size: 13px; line-height: 1.45; color: rgba(223, 233, 255, .62); padding: 6px 10px; }
.rm-melds-empty b { display: block; color: rgba(223, 233, 255, .86); font-size: 14px; margin-bottom: 2px; }
.rm-meld { position: relative; flex: none; display: flex; padding: 3px; border-radius: calc(var(--cw) * 0.14); background: rgba(3, 8, 20, .3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); outline: none; }
.rm-meld .ck-card { position: relative; flex: none; margin-left: calc(var(--cw) * -0.56); }
.rm-meld .ck-card:first-child { margin-left: 0; }
.rm-meld .ck-card::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: max(3px, calc(var(--cw) * 0.07)); background: var(--who, transparent); }
.rm-meld.rm-target { cursor: pointer; box-shadow: 0 0 0 2.5px var(--rm-cyan), 0 0 16px rgba(85, 214, 255, .6); }
.rm-meld.rm-target.rm-ask { animation: rm-ask .9s ease-in-out infinite; }
.rm-meld.rm-drop { box-shadow: 0 0 0 3px #fff, 0 0 20px rgba(85, 214, 255, .9); }
.rm-meld.rm-target:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 20px rgba(85, 214, 255, .9); }
@keyframes rm-ask { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* rank above suit at the left edge, so an overlapped card still shows both */
.rm .ck-ix { right: auto; left: calc(var(--cw) * 0.06); top: calc(var(--fs) * 0.12); height: auto; width: calc(var(--fs) * 0.98); flex-direction: column; align-items: center; justify-content: flex-start; gap: calc(var(--fs) * 0.04); line-height: 1; }
.rm .ck-ix .ck-10 { letter-spacing: -0.09em; margin-left: -0.06em; }
.rm .ck-big { left: 58%; top: 62%; }

.rm-status { flex: none; min-height: 21px; text-align: center; font-size: 14px; line-height: 1.5; font-weight: 700; color: #f1f6ff; text-wrap: balance; padding: 0 4px; }
.rm-status.rm-wait { color: #b9c9e2; font-weight: 600; }
.rm-status.rm-warn { color: var(--rm-gold); }
.rm-status[data-clock]::after { content: ' · ' attr(data-clock); color: var(--rm-pink); }

/* ---------- your hand ---------- */
.rm-me { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head acts" "hand hand"; gap: 6px 10px; align-items: center; }
.rm-me-head { grid-area: head; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.rm-me-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 13.5px; }
.rm-me-name { font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-me-score { font-weight: 800; color: var(--rm-gold); white-space: nowrap; }
.rm-me-pts { color: #b9c9e2; font-size: 12.5px; white-space: nowrap; }
.rm-me-tools { display: inline-flex; gap: 6px; flex: none; }
.rm .rm-sm { min-height: 40px; padding: 0 11px; font-size: 13px; background: rgba(6, 12, 28, .7); }
.rm-acts { grid-area: acts; display: flex; gap: 6px; }
.rm .rm-act { min-height: 40px; min-width: 84px; background: rgba(6, 12, 28, .7); }
.rm .rm-act.ck-btn-primary { background: var(--rm-gold); }
.rm-hand { grid-area: hand; position: relative; height: calc(var(--ch) + 20px); outline: none; --cw: 84px; --ch: 118px; --fs: 28px; touch-action: none; }
.rm-hand .ck-card { top: 18px; cursor: pointer; transition: left .2s ease, translate .12s ease, box-shadow .12s; }
.rm-hand .ck-card.rm-sel { translate: 0 -16px; box-shadow: 0 0 0 2.5px #fff, 0 8px 16px rgba(0, 0, 0, .5); }
.rm-hand .ck-card.rm-g-meld { box-shadow: 0 0 0 2.5px var(--rm-gold), 0 0 13px rgba(255, 209, 102, .7); }
.rm-hand .ck-card.rm-g-lay { box-shadow: 0 0 0 2.5px var(--rm-cyan), 0 0 13px rgba(85, 214, 255, .65); }
.rm-hand .ck-card.rm-sel.rm-g-meld { box-shadow: 0 0 0 2.5px #fff, 0 0 0 5px var(--rm-gold), 0 8px 16px rgba(0, 0, 0, .5); }
.rm-hand .ck-card.rm-sel.rm-g-lay { box-shadow: 0 0 0 2.5px #fff, 0 0 0 5px var(--rm-cyan), 0 8px 16px rgba(0, 0, 0, .5); }
.rm-hand .ck-card.rm-took::before { content: ''; position: absolute; right: 0; top: 0; border: calc(var(--cw) * 0.13) solid transparent; border-right-color: #ff6b81; border-top-color: #ff6b81; }
.rm-hand .ck-card.rm-new { animation: rm-new 1.6s ease-out 1; }
.rm-hand:focus-visible .ck-card.rm-cur { outline: 3px solid var(--rm-cyan); outline-offset: 2px; }
.rm-hand .ck-card.rm-dragging { opacity: .28; }
.rm-hand.rm-nomove .ck-card { transition: none; }
.rm-hand-note { position: absolute; inset: 18px 0 0; display: flex; align-items: center; justify-content: center; font-size: 13.5px; color: rgba(223, 233, 255, .7); text-align: center; }
.rm-mark { position: absolute; top: 12px; width: 4px; height: calc(var(--ch) + 12px); margin-left: -2px; border-radius: 2px; background: var(--rm-cyan); box-shadow: 0 0 10px rgba(85, 214, 255, .9); pointer-events: none; z-index: 90; }
@keyframes rm-new { 0% { filter: brightness(1.35) drop-shadow(0 0 8px #fff); } 100% { filter: none; } }
.rm-ghost { position: fixed; z-index: 3000; left: 0; top: 0; pointer-events: none; --cw: 84px; --ch: 118px; --fs: 28px; }
.rm-ghost .ck-card { position: relative; box-shadow: 0 0 0 2px #fff, 0 14px 26px rgba(0, 0, 0, .55); rotate: 4deg; }

/* cards in flight */
.rm-fx { position: absolute; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; border-radius: inherit; }
.rm-fx .ck-card { transform-origin: 0 0; box-shadow: 0 0 0 0.6px rgba(0, 0, 0, .4), 0 8px 16px rgba(0, 0, 0, .4); }
.rm-flying { visibility: hidden !important; }

/* pass and play */
.rm-curtain { position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; border-radius: inherit;
  background: radial-gradient(ellipse at 50% 30%, #17264d, #070c1c 72%); }
.rm-curtain-in { max-width: 340px; }
.rm-curtain-k { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--rm-cyan); }
#rm-curtain-t { margin: 0 0 16px; font-size: 24px; line-height: 1.2; font-weight: 800; color: #fff; text-wrap: balance; }
.rm-curtain .ck-btn { min-height: 48px; padding: 0 20px; font-size: 15px; }
.rm-curtain-s { margin: 12px 0 0; font-size: 13px; color: var(--rm-muted); }

.rm .ck-toast { top: 50%; z-index: 45; }

/* ---------- under the table ---------- */
.rm-side { margin: 8px 0 0; }
.rm-record { text-align: center; font-size: 13px; color: var(--rm-muted); min-height: 18px; }
.rm-record b { color: #dfe9ff; }
.rm-help .hint-touch { display: none; }
@media (hover: none) and (pointer: coarse) { .rm-help .hint-kb { display: none; } .rm-help .hint-touch { display: inline; } }

/* ---------- dialogs ---------- */
.rm-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(2, 4, 10, .7); }
.rm-dialog { background: #0b1328; border: 1px solid #244b6b; border-radius: 16px; --dp: 20px; --dpx: 20px; padding: var(--dp) var(--dpx); width: min(100%, 500px); max-height: calc(100% - 8px); overflow: auto; overscroll-behavior: contain; box-sizing: border-box;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6); outline: none; user-select: text; -webkit-user-select: text; }
.rm-dialog h3 { margin: 0 0 6px; font-size: 21px; line-height: 1.2; font-weight: 800; color: #fff; text-wrap: balance; }
.rm-dialog h4 { margin: 14px 0 4px; font-size: 14px; font-weight: 800; color: var(--rm-gold); }
.rm-dialog p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: #b9c9e2; }
.rm-dialog ul, .rm-dialog ol { margin: 0 0 10px; padding-left: 20px; font-size: 14px; line-height: 1.5; color: #b9c9e2; }
.rm-dialog li { margin: 0 0 4px; }
.rm-dialog b, .rm-dialog strong { color: #fff; }
.rm-sub { color: #dfe9ff !important; font-size: 15px !important; }
.rm-actions { display: flex; flex-wrap: wrap; gap: 8px; position: sticky; bottom: calc(-1 * var(--dp)); z-index: 2; margin: 8px calc(-1 * var(--dpx)) calc(-1 * var(--dp)); padding: 8px var(--dpx) var(--dp); background: #0b1328; border-radius: 0 0 16px 16px; }
.rm-actions .ck-btn { flex: 1 1 0; min-width: max-content; min-height: 44px; }
.rm-hostwait { flex: 1 1 100%; font-size: 13.5px; color: var(--rm-muted); text-align: center; }
.rm-rows { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0; }
.rm-row { display: grid; grid-template-columns: minmax(74px, 1fr) minmax(0, 2.2fr) auto; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 10px; background: #0f1a36; box-shadow: inset 0 0 0 1px #1c2b4a; }
.rm-row.rm-won { box-shadow: inset 0 0 0 1.5px var(--rm-gold); background: #17203a; }
.rm-row-who { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; font-weight: 800; color: #fff; }
.rm-row-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-row-pts { text-align: right; font-size: 13px; color: #b9c9e2; white-space: nowrap; line-height: 1.3; }
.rm-row-pts b { display: block; font-size: 15px; color: var(--rm-gold); }
.rm-row-pts .rm-plus { color: #9be88a; font-weight: 800; }
.rm-minis { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 0; min-width: 0; --cw: 30px; --ch: 42px; --fs: 12.5px; padding-left: 14px; }
.rm-minis .ck-card { position: relative; flex: none; margin-left: -14px; }
.rm-minis .ck-big, .rm-minis .ck-court { display: none; }
.rm-minis em { font-style: normal; font-size: 12.5px; color: var(--rm-muted); margin-left: -14px; }
.rm-minis .rm-cnt { margin-left: 7px; font-size: 12.5px; font-weight: 800; color: #dfe9ff; white-space: nowrap; }
.rm-sheet { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 8px 0 0; }
.rm-sheet th, .rm-sheet td { padding: 6px 6px; text-align: right; border-bottom: 1px solid #1c2b4a; white-space: nowrap; }
.rm-sheet th { font-size: 12.5px; color: #dfe9ff; font-weight: 800; max-width: 84px; overflow: hidden; text-overflow: ellipsis; }
.rm-sheet th:first-child, .rm-sheet td:first-child { text-align: left; color: var(--rm-muted); font-weight: 600; }
.rm-sheet td { color: #8aa3c4; }
.rm-sheet td.rm-w { color: var(--rm-gold); font-weight: 800; }
.rm-sheet td.rm-w sup { color: var(--rm-pink); font-size: 10px; margin-left: 1px; }
.rm-sheet tfoot td { border-bottom: 0; border-top: 2px solid #2a3d66; color: #fff; font-weight: 800; font-size: 15px; }
.rm-sheet tfoot td.rm-lead { color: var(--rm-gold); }
.rm-sheet-wrap { max-height: 46vh; overflow: auto; }
.rm-key { font-size: 12.5px !important; color: var(--rm-muted) !important; margin-top: 8px !important; }
.rm-field { margin: 12px 0 0; }
.rm-field > span { display: block; font-size: 13px; font-weight: 700; color: #dfe9ff; margin: 0 0 5px; }
.rm-field small { display: block; font-size: 12.5px; color: var(--rm-muted); margin-top: 4px; line-height: 1.4; }
.rm-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.rm-seg button { flex: 1 1 0; min-width: max-content; min-height: 42px; padding: 0 12px; border-radius: 9px; border: 1px solid #24375e; background: #0f1a36; color: #dfe9ff; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.rm-seg button[aria-pressed="true"] { background: var(--rm-gold); border-color: var(--rm-gold); color: #1a1200; }
.rm-seg button:focus-visible { outline: 2px solid var(--rm-cyan); outline-offset: 2px; }
.rm-ex { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 4px 0 10px; }
.rm-ex > span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #b9c9e2; }

/* ---------- a narrow table: piles above the melds, the three move buttons under the hand ---------- */
.rm-narrow .rm-tool span { display: none; }
.rm-narrow .rm-tool { width: 40px; padding: 0; justify-content: center; }
.rm-narrow .rm-opts { flex-basis: 100%; }
.rm-narrow .rm-tools { margin-left: auto; }
.rm-narrow .rm-table { padding: 7px 7px 8px; }
.rm-narrow .rm-mid { flex-direction: column; gap: 6px; }
.rm-narrow .rm-piles { --cw: 54px; --ch: 76px; --fs: 18.5px; gap: 26px; padding: 0; }
.rm-narrow .rm-pilebox { flex-direction: row; gap: 8px; }
.rm-narrow .rm-pilebox:first-child { flex-direction: row-reverse; }
.rm-narrow .rm-pl { width: 54px; white-space: normal; line-height: 1.25; }
.rm-narrow .rm-pilebox:first-child .rm-pl { text-align: right; }
.rm-narrow .rm-me { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "hand" "acts"; }
.rm-narrow .rm-acts .rm-act { flex: 1 1 0; min-width: 0; min-height: 44px; }
.rm-narrow .rm-status { font-size: 13px; min-height: 39px; display: flex; align-items: center; justify-content: center; line-height: 1.35; }
.rm-narrow .rm-seat { padding: 5px 7px 5px 6px; gap: 8px; }
.rm-narrow .rm-seat-note { font-size: 11.5px; }
.rm-narrow .rm-seats.rm-n3 .rm-seat-score small { display: none; }
.rm-narrow .rm-seats.rm-n3 .rm-seat { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'top top' 'cards note'; align-items: center; gap: 4px 9px; padding: 5px 6px 7px; }
.rm-narrow .rm-seats.rm-n3 .rm-seat-main { display: contents; }
.rm-narrow .rm-seats.rm-n3 .rm-seat-top { grid-area: top; gap: 4px; }
.rm-narrow .rm-seats.rm-n3 .rm-seat-name { font-size: 12.5px; }
.rm-narrow .rm-seats.rm-n3 .rm-seat-cards { grid-area: cards; width: 19px; height: 26px; --cw: 19px; --ch: 26px; }
.rm-narrow .rm-seats.rm-n3 .rm-seat-note { grid-area: note; padding-right: calc(var(--sd, 1) * 8.5px + 4px); font-size: 11.5px; }
.rm-narrow .rm-seats.rm-n3 .rm-seat-score { position: absolute; right: 7px; bottom: 8px; margin: 0; }
.rm-narrow .rm-me-pts { font-size: 12px; }
.rm-narrow .rm-dialog { --dp: 16px; --dpx: 14px; }
.rm-narrow .rm-row { grid-template-columns: minmax(64px, .9fr) minmax(0, 2fr) auto; padding: 6px 7px; }

/* ---------- full screen: the table takes everything the bar leaves ---------- */
.rm.rm-fit { max-width: none; height: 100%; margin: 0; padding: 6px 8px 8px; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; }
.rm-fit .rm-top { flex: none; margin-bottom: 6px; }
.rm-fit .rm-table { flex: 1 1 auto; min-height: 0; height: auto; }
.rm-fit .rm-help, .rm-fit .rm-side { display: none; }
.rm-fit .rm-side:has(.bt-strip:not([hidden])) { display: block; flex: none; margin-top: 6px; }
.rm-fit .rm-side:has(.bt-strip:not([hidden])) .rm-record { display: none; }
.rm-fit .rm-side .bt-strip { margin: 0; }
/* a phone on its side */
.rm-short .rm-top { margin-bottom: 4px; }
.rm-short .rm-tool span { display: none; }
.rm-short .rm-tool { width: 40px; padding: 0; justify-content: center; }
.rm-short .rm-table { padding: 5px 7px 6px; gap: 3px; }
.rm-short .rm-seat { padding: 2px 8px 2px 6px; }
.rm-short .rm-seat-cards { width: 20px; height: 28px; --cw: 20px; --ch: 28px; }
.rm-short .rm-seat-main { flex-direction: row; align-items: center; gap: 8px; }
.rm-short .rm-seat-top { flex: none; max-width: 62%; }
.rm-short .rm-seat-note { flex: 1 1 auto; text-align: right; }
.rm-short .rm-pl { display: none; }
.rm-short .rm-dialog { --dp: 12px; --dpx: 16px; width: min(100%, 660px); }
.rm-short .rm-dialog h3 { font-size: 18px; margin-bottom: 3px; }
.rm-short .rm-dialog p { margin-bottom: 6px; }
.rm-short .rm-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 6px; }
.rm-short .rm-row { padding: 4px 8px; }
.rm-short .rm-minis { --cw: 25px; --ch: 35px; --fs: 11.5px; }
.rm-short .rm-actions .ck-btn { min-height: 40px; }
.rm-short .rm-status { font-size: 12.5px; min-height: 18px; line-height: 1.4; }
.rm-short .rm-me { gap: 2px 8px; }
.rm-short .rm-hand { height: calc(var(--ch) + 12px); }
.rm-short .rm-hand .ck-card { top: 11px; }
.rm-short .rm-hand .ck-card.rm-sel { translate: 0 -10px; }
.rm-short .rm-mark { top: 6px; }
.rm-short .rm-sm, .rm-short .rm-act { min-height: 40px; }
.rm-short .rm-me-pts { display: none; }

@media (prefers-reduced-motion: reduce) {
  .rm-pile.rm-can, .rm-pile.rm-hintp, .rm-meld.rm-target.rm-ask, .rm-hand .ck-card.rm-new { animation: none; }
  .rm-hand .ck-card, .rm-seat { transition: none; }
}
.rm-link { appearance: none; border: 0; background: none; padding: 2px 4px; margin: 0; font: inherit; font-weight: 800; color: var(--rm-gold); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; border-radius: 6px; }
.rm-link:hover { color: #fff; }
.rm-link:focus-visible { outline: 2px solid var(--rm-gold); outline-offset: 2px; }
.rm-me-name .rm-dealer { display: inline-block; vertical-align: 1px; margin-left: 4px; }