:root {
  --bg1: #0f1012; --bg2: #24262b;
  --felt: radial-gradient(ellipse 75% 70% at 50% 42%, #2b2c31 0%, #1a1b1f 48%, #0d0d10 100%);
  --rail: linear-gradient(180deg, #f4f5f7 0%, #c4c8ce 22%, #7d838b 48%, #e6e8eb 62%, #9aa0a8 82%, #d8dbdf 100%);
  --gold: #ffd400; --silver: #d4d8de; --steel: #70708a;
  --ink: #f1f3f5; --muted: #a9b0b8; --accent: #dfe3e8; --chrome: linear-gradient(180deg, #ffffff 0%, #d9dde2 38%, #9ea4ab 62%, #e9ecef 100%); --pos: #ffffff; --neg: #ff6b6b;
  --surface: #141518; --surface-ink: #f1f3f5; --felt-ink: #f1f3f5;
  --panel: linear-gradient(180deg, rgba(30,32,36,.75), rgba(10,10,12,.8));
  --sheet-bg: linear-gradient(180deg, #1c1e22, #121316);
  --settings-bg: linear-gradient(180deg, #24262b, #0f1013);
  --topbar-bg: rgba(8,8,10,.82); --input-bg: rgba(0,0,0,.35); --line: rgba(255,255,255,.08);
  --btn: linear-gradient(180deg, #ffffff 0%, #d9dde2 38%, #9ea4ab 62%, #e9ecef 100%); --on-btn: #111111;
  --card-w: clamp(44px, 12.5vw, 70px); --card-h: calc(var(--card-w) * 1.4);
  --radius: 16px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink);
  background: linear-gradient(160deg, var(--bg1), var(--bg2)); -webkit-tap-highlight-color: transparent; padding-bottom: env(safe-area-inset-bottom); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.muted { color: var(--muted); } .tiny { font-size: .75rem; } .center { text-align: center; }
.pos { color: var(--pos); } .neg { color: var(--neg); }

/* top bar */
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px;
  background: rgba(0,0,0,.25); backdrop-filter: blur(6px); position: sticky; top: 0; z-index: 5; }
.brand { font-weight: 800; letter-spacing: .3px; font-size: 1.05rem; white-space: nowrap; }
.logo { color: var(--accent); }
.me { display: flex; gap: 6px; align-items: center; }
.chip { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 3px 10px 3px 4px; max-width: 46vw; }
.chip .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip span:first-child { font-size: 20px; }
.ghost { background: transparent; border: 1px solid rgba(255,255,255,.25); padding: 10px 18px; border-radius: 999px; }
.ghost.small { padding: 4px 10px; font-size: .78rem; }
.primary { background: var(--chrome); color: #1b1300; border: 0; padding: 10px 18px; border-radius: 999px; font-weight: 800; box-shadow: 0 4px 14px rgba(200,205,212,.35); }
.primary:disabled { opacity: .5; cursor: not-allowed; }
.wide { width: 100%; margin-top: 10px; }
.huge { width: 100%; padding: 18px; font-size: 1.15rem; margin: 6px 0 10px; }

/* layout */
.screen { max-width: 980px; margin: 0 auto; padding: 14px; }
.panel { background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; min-width: 0; }
.panel h2 { margin: 0 0 6px; font-size: 1.1rem; }
.panel h3 { margin: 0 0 8px; font-size: .8rem; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); }
.cols { display: grid; grid-template-columns: 1fr 1.3fr; gap: 12px; }
.hero h1 { margin: 0 0 8px; font-size: clamp(1.4rem, 5vw, 2.1rem); line-height: 1.15; }
.hero h1 span { color: var(--accent); }
.hero p { margin: 0; }
.hero .hero-sub { margin: 0 0 10px; font-weight: 600; font-size: clamp(1rem, 3.6vw, 1.2rem); color: var(--accent); }

/* profile list + form */
.profile-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; max-height: 360px; overflow: auto; }
.profile-list button { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.profile-list button:hover { background: rgba(255,255,255,.12); }
.profile-list .pa { font-size: 24px; }
.profile-list small { color: var(--muted); display: block; }
.profile-list .empty { color: var(--muted); font-size: .85rem; }
form label, .label { display: block; font-size: .8rem; color: var(--muted); margin-top: 10px; }
input, select { display: block; width: 100%; margin-top: 4px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.25); }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field-error { color: var(--neg); font-size: .75rem; min-height: 1em; margin-top: 3px; }
.avatar-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-top: 4px; }
.avatar-grid button { font-size: 20px; padding: 6px 0; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid transparent; }
.avatar-grid button.on { border-color: var(--accent); background: rgba(214,219,226,.15); }
.theme-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 4px; }
.theme-grid button { padding: 8px 2px; border-radius: 10px; font-size: .7rem; background: rgba(255,255,255,.05); border: 2px solid var(--t); }
.theme-grid button.on { background: color-mix(in srgb, var(--t) 30%, transparent); font-weight: 700; }

/* lobby */
#screen-lobby { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; align-items: start; }
.lobby-hello { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.lobby-hello h2 { margin: 0; }
.big-avatar { font-size: 40px; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.08); border: 2px solid var(--accent); }
.queue-status { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 3px solid rgba(255,255,255,.2); border-top-color: var(--accent); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.seats-needed { display: flex; gap: 8px; margin: 10px 0; }
.seats-needed span { flex: 1; text-align: center; padding: 12px 0; border-radius: 12px; border: 2px dashed rgba(255,255,255,.2); font-size: 22px; }
.seats-needed span.filled { border-style: solid; border-color: var(--accent); background: rgba(214,219,226,.1); }
.queue-list { list-style: none; padding: 0; margin: 0; font-size: .85rem; display: grid; gap: 4px; }
.queue-list li { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.05); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; }
.tile { background: rgba(255,255,255,.06); border-radius: 10px; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; }
.tile span { font-size: .68rem; color: var(--muted); }
.tile b { font-size: .95rem; }
.tile small { font-weight: 400; color: var(--muted); font-size: .65rem; }

/* table */
.table-info { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; font-size: .8rem; color: var(--muted); margin-bottom: 6px; }
.turn-info { color: var(--accent); font-weight: 700; }
.felt { max-width: 720px; margin: 0 auto; padding: 10px; display: grid; gap: 6px;
  grid-template-columns: minmax(74px, 1fr) 2.2fr minmax(74px, 1fr);
  grid-template-areas: ". top ." "left trick right" ". bottom .";
  background: var(--felt); border-radius: 24px; border: 6px solid #3b2a1a;
  box-shadow: inset 0 0 40px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.35); }
.seat { --t: #888; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-width: 0; }
.pos-2 { grid-area: top; } .pos-1 { grid-area: left; } .pos-3 { grid-area: right; } .pos-0 { grid-area: bottom; flex-direction: row; gap: 8px; }
.avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 26px;
  background: color-mix(in srgb, var(--t) 30%, #0b1d2e); border: 3px solid var(--t); box-shadow: 0 0 0 3px rgba(0,0,0,.2); }
.pos-0 .avatar { width: 36px; height: 36px; font-size: 20px; }
.seat .name { font-weight: 700; font-size: .9rem; margin-top: 2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat .role { font-size: .66rem; color: var(--muted); }
.seat .meta { font-size: .72rem; color: var(--accent); min-height: 1em; }
.seat.offline .avatar { filter: grayscale(1); opacity: .5; }
/* opponent/partner movement by seat theme */
.seat:not(.pos-0) .avatar.anim-bob { animation: bob 3.2s ease-in-out infinite; }
.seat:not(.pos-0) .avatar.anim-sway { animation: sway 3.8s ease-in-out infinite; }
.seat:not(.pos-0) .avatar.anim-pulse { animation: pulse 2.6s ease-in-out infinite; }
.seat:not(.pos-0) .avatar.anim-float { animation: float 4.2s ease-in-out infinite; }
.pos-3 .avatar { animation-delay: -1.3s !important; }
@keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-4px) } }
@keyframes sway { 0%,100% { transform: rotate(-4deg) } 50% { transform: rotate(4deg) translateY(-2px) } }
@keyframes pulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.07) } }
@keyframes float { 0%,100% { transform: translate(0,0) } 33% { transform: translate(2px,-3px) } 66% { transform: translate(-2px,-1px) } }
.seat.hop .avatar { animation: hop .35s ease-out !important; }
@keyframes hop { 0% { transform: scale(1) } 40% { transform: translateY(-8px) scale(1.12) } 100% { transform: scale(1) } }
.trick { grid-area: trick; position: relative; min-height: calc(var(--card-h) * 2.3); }
.slot { position: absolute; }
.s-2 { top: 0; left: 50%; transform: translateX(-50%); } .s-0 { bottom: 0; left: 50%; transform: translateX(-50%); }
.s-1 { left: 4%; top: 50%; transform: translateY(-50%); } .s-3 { right: 4%; top: 50%; transform: translateY(-50%); }
.slot.won .card { box-shadow: 0 0 0 3px var(--accent), 0 6px 16px rgba(0,0,0,.4); }
.center-msg { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font-size: .85rem; color: rgba(255,255,255,.75); text-align: center; padding: 0 18%; }
/* HARD RULE (user, 20 Oct 2026 6:20 PM ET): no card is EVER translucent, anywhere, for any reason. Cards are always
 * opacity 1 with opaque faces: no opacity < 1, no rgba/hsla face backgrounds, no filter opacity/brightness/grayscale on a
 * card, no fade-in/out. Animations may MOVE or SCALE a card, never fade it. Also NO legal-card hints: on your turn
 * every card in the hand looks identical (no lift, dim, outline or glow). tests/cards-opaque-e2e.js enforces both. */
.card { position: relative; width: var(--card-w); height: var(--card-h); border-radius: 8px; border: 1px solid #c9ced6;
  background: linear-gradient(180deg, #fff, #eef1f5); box-shadow: 0 3px 8px rgba(0,0,0,.35); padding: 0; flex: none; transition: transform .15s; opacity: 1; }
.card.red { color: #d22f3c; } .card.black { color: #15202b; }
.card.in-trick { animation: drop .2s ease-out; cursor: default; }
@keyframes drop { from { transform: scale(1.15); } to { transform: scale(1); } } /* scale only: never a fade */
.hand { --n: 13; display: flex; justify-content: center; max-width: 720px; margin: 12px auto 0; padding: 14px 8px 8px; min-height: calc(var(--card-h) + 28px); }
.hand .card { margin-left: min(4px, calc((min(100vw, 720px) - 16px - var(--card-w)) / (var(--n) - 1 + .0001) - var(--card-w))); }
.hand .card:first-child { margin-left: 0; }
.paused { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 15; background: rgba(8,16,26,.92); border: 1px solid var(--accent); border-radius: 16px; padding: 16px 20px; text-align: center; width: min(92vw, 380px); box-shadow: 0 10px 30px rgba(0,0,0,.5); }

/* overlays */
.overlay { position: fixed; inset: 0; z-index: 20; background: rgba(3,10,18,.55); backdrop-filter: blur(3px); display: flex; align-items: flex-end; justify-content: center; } /* no fade-in: result / 500 sheets can hold cards, and cards never fade */
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.sheet { width: min(580px, 100%); max-height: 92vh; overflow-y: auto; background: linear-gradient(180deg, #13283b, #0d1e2d); border-radius: 20px 20px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px rgba(0,0,0,.4); animation: rise .22s ease-out; }
@media (min-width: 600px) { .overlay { align-items: center; } .sheet { border-radius: 20px; } }
@keyframes rise { from { transform: translateY(30px) } to { transform: none } }
.sheet h2 { margin: 0 0 6px; font-size: 1.1rem; }
.bid-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 8px; }
.bid-grid button { padding: 12px 0; border-radius: 10px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.07); font-weight: 700; }
.bid-grid button.nil { background: rgba(255,93,122,.18); border-color: rgba(255,93,122,.5); }
table.score { width: 100%; border-collapse: collapse; font-size: .78rem; }
table.score th, table.score td { padding: 6px 4px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.08); vertical-align: top; }
table.score thead th { color: var(--muted); font-weight: 600; }
.net { margin: 10px 0 6px; font-size: .95rem; }
.mprow { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; margin: 6px 0; font-size: .92rem; }
.mprow b { color: var(--accent); }
.field { font-size: .8rem; margin: 4px 0 8px; color: var(--muted); }
.field ol { margin: 6px 0 0; padding-left: 20px; }
.field li { display: flex; justify-content: space-between; gap: 10px; }
.field li.me { color: var(--accent); font-weight: 700; }
.unlocks { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.unlocks span { background: rgba(214,219,226,.15); border: 1px solid rgba(214,219,226,.4); border-radius: 999px; padding: 4px 10px; font-size: .8rem; }
.partner-out { margin-top: 10px; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.04); text-align: center; overflow: hidden; }
.partner-card { --t: #888; display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(0,0,0,.3);
  border: 2px solid var(--t); touch-action: pan-y; user-select: none; cursor: grab; will-change: transform; }
.partner-card .avatar { width: 40px; height: 40px; font-size: 22px; }
.partner-out .hint { font-size: .72rem; color: var(--muted); margin-top: 6px; }
.partner-out .swap-btn { margin-top: 6px; font-size: .75rem; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); }
.actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }

/* profile page */
.profile-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.profile-head h2 { margin: 0; }
.stats-section h3 { margin: 16px 0 6px; }
table.ps { width: 100%; border-collapse: collapse; font-size: .78rem; }
table.ps th, table.ps td { text-align: left; padding: 4px; border-bottom: 1px solid rgba(255,255,255,.07); }
table.ps th { color: var(--muted); font-weight: 600; }
.milestones { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.milestones li { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,.05); }
.milestones .mi { font-size: 20px; text-align: center; }
.milestones .mt { display: flex; flex-direction: column; font-size: .8rem; }
.milestones .mt small { color: var(--muted); font-size: .68rem; }
.milestones .ms { font-size: .72rem; color: var(--muted); white-space: nowrap; }
.milestones li.earned { background: rgba(214,219,226,.12); border: 1px solid rgba(214,219,226,.35); }
.milestones li.earned .ms { color: var(--accent); }
.milestones li.locked .mi { filter: grayscale(1); opacity: .5; }
.toasts { position: fixed; top: 58px; left: 50%; transform: translateX(-50%); z-index: 40; display: grid; gap: 6px; width: min(92vw, 360px); pointer-events: none; }
.toast { background: var(--chrome); color: #1b1300; font-weight: 700; font-size: .85rem; padding: 10px 14px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.4); animation: rise .25s ease-out; transition: opacity .35s; }
.toast.out { opacity: 0; }

/* mobile */
@media (max-width: 760px) {
  .cols, #screen-lobby { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .screen { padding: 10px; }
  .lbl { display: none; }
  .chip { padding: 3px 6px; }
  .felt { padding: 6px; border-width: 4px; grid-template-columns: 66px 1fr 66px; }
  .avatar { width: 40px; height: 40px; font-size: 22px; }
  .seat .role { display: none; }
  .avatar-grid { grid-template-columns: repeat(7, 1fr); }
  .theme-grid { grid-template-columns: repeat(3, 1fr); }
  .bid-grid button { padding: 10px 0; }
}

/* --- seat info: name + bid/won, dealer chip, turn highlight --- */
.seat .plate { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 8px; border-radius: 12px;
  background: rgba(0,0,0,.28); border: 2px solid transparent; max-width: 100%; min-width: 0; transition: border-color .2s, box-shadow .2s, background .2s; }
.pos-0 .plate { flex-direction: row; gap: 8px; }
.seat .nameRow { display: flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0; }
.dealer-chip { flex: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #111; font-weight: 900; font-size: .68rem;
  display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.bidinfo { font-size: .8rem; font-weight: 700; white-space: nowrap; color: #fff; letter-spacing: .2px; }
.bidinfo .b { color: var(--accent); }
.bidinfo .nil { background: #ff5d7a; color: #fff; border-radius: 6px; padding: 0 5px; font-size: .74rem; }
.bidinfo .wait { color: var(--muted); font-weight: 500; }
.seat.turn .name { color: #fff; }
@media (max-width: 420px) { .bidinfo { font-size: .74rem; } .seat .plate { padding: 3px 5px; } }
/* top + bottom seats span the full felt width so names are never squeezed */
.pos-2 { grid-column: 1 / -1; }
.pos-0 { grid-column: 1 / -1; }
.pos-0 .name { max-width: 40vw; }
.pos-0 .nameRow { flex: none; }


/* --- online client additions --- */
.nav { display: flex; gap: 6px; align-items: center; }
.navbtn { background: transparent; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 5px 12px; font-size: .85rem; }
.navbtn.on { border-color: var(--accent); color: var(--accent); }
.chip.navbtn { padding: 3px 10px 3px 4px; }
.conn { position: sticky; top: 48px; z-index: 6; text-align: center; font-size: .8rem; padding: 6px; background: #8a5a00; color: #fff; }
.conn[data-status="reconnecting"] { background: #8a3b00; }
.finding { display: flex; gap: 14px; align-items: center; padding: 18px 6px; }
.spinner.big { width: 34px; height: 34px; border-width: 4px; flex: none; }
.mt { margin-top: 14px !important; }
.plist { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.plist li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,.05); font-size: .85rem; min-width: 0; }
.plist li.empty { background: none; padding: 2px 0; }
.plist .pa { font-size: 20px; flex: none; }
.plist .pn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plist .pn small { color: var(--muted); }
.plist .ps { font-size: .7rem; color: var(--muted); }
.plist li[data-online="1"] .ps { color: var(--pos); }
.plist .rm { padding: 2px 8px; }
.mutual { color: var(--accent); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #5d6b78; flex: none; }
.dot.on { background: var(--pos); box-shadow: 0 0 6px var(--pos); }
.search { position: relative; margin: 8px 0; }
.sugg { list-style: none; margin: 4px 0 0; padding: 4px; position: absolute; left: 0; right: 0; z-index: 4; background: #10263a; border: 1px solid rgba(255,255,255,.15); border-radius: 12px; box-shadow: 0 10px 24px rgba(0,0,0,.45); }
.sugg button { width: 100%; display: flex; align-items: center; gap: 8px; text-align: left; padding: 8px; border: 0; background: transparent; border-radius: 8px; }
.sugg button:hover { background: rgba(255,255,255,.08); }
.sugg small { color: var(--muted); }
.sugg .add { margin-left: auto; color: var(--accent); font-size: .8rem; }
.actions.left { justify-content: flex-start; margin-top: 4px; }
.edit { margin-top: 10px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 6px; }
/* turn timer */
.timer { position: relative; max-width: 720px; margin: 8px auto 0; height: 22px; border-radius: 999px; background: rgba(0,0,0,.3); overflow: hidden; }
.timer .bar { position: absolute; inset: 0 auto 0 0; background: rgba(255,255,255,.18); transition: width .25s linear; }
.timer.mine .bar { background: rgba(214,219,226,.45); }
.timer.low .bar { background: rgba(255,107,107,.6); }
.timer span { position: relative; display: block; text-align: center; font-size: .72rem; line-height: 22px; font-weight: 700; }
/* last trick: compass / cross layout relative to the viewer, yellow marker on the leader */
/* result card */
.mpscore { margin: 10px 0 4px; font-size: .9rem; }
.mpscore .hl { color: var(--accent); font-size: 1.05rem; }
.field .fh { margin-bottom: 4px; }
table.ftable { width: 100%; border-collapse: collapse; font-size: .78rem; color: var(--ink); }
table.ftable th, table.ftable td { padding: 4px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.07); }
table.ftable th { color: var(--muted); font-weight: 600; }
table.ftable tr.me td { color: var(--accent); font-weight: 700; background: rgba(214,219,226,.08); }
.prefer { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.prefer button.done { border-color: var(--accent); color: var(--accent); }
/* rankings */
.rk-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rk-controls label { margin-top: 0; font-size: .75rem; color: var(--muted); }
table.ranks { width: 100%; border-collapse: collapse; font-size: .85rem; }
table.ranks th, table.ranks td { padding: 6px 4px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.07); vertical-align: middle; }
table.ranks th { color: var(--muted); font-weight: 600; font-size: .72rem; }
table.ranks td.rk { width: 34px; font-weight: 800; color: var(--accent); }
table.ranks td.who { display: flex; gap: 8px; align-items: center; min-width: 0; }
table.ranks td.who span:last-child { display: flex; flex-direction: column; min-width: 0; }
table.ranks td.who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
table.ranks td.who small { color: var(--muted); font-size: .7rem; }
table.ranks .pa { font-size: 20px; }
table.ranks td.val { font-weight: 700; white-space: nowrap; } table.ranks td.val small { color: var(--muted); font-weight: 400; }
table.ranks td.hands { color: var(--muted); width: 50px; }
table.ranks tr.me td { background: rgba(214,219,226,.1); }
.demo { font-size: .6rem; background: rgba(255,255,255,.12); border-radius: 4px; padding: 0 4px; color: var(--muted); font-weight: 600; vertical-align: middle; }
.rk-me { margin-top: 10px; }
.pager { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.pager button:disabled { opacity: .35; cursor: default; }
@media (max-width: 760px) { .rk-controls { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) {
  .navbtn { padding: 4px 9px; }
  .brand { font-size: .95rem; }
  .rk-controls { grid-template-columns: 1fr; }
  table.ranks { font-size: .8rem; }
  table.score th, table.score td { padding: 4px 2px; font-size: .72rem; }
}
table.ranks { table-layout: fixed; }
table.ranks th:nth-child(1), table.ranks td.rk { width: 34px; }
table.ranks th:nth-child(3), table.ranks td.val { width: 92px; }
table.ranks th:nth-child(4), table.ranks td.hands { width: 52px; }
table.ranks td.who { display: table-cell; overflow: hidden; }
table.ranks td.who .pa { margin-right: 6px; vertical-align: middle; }
table.ranks td.who span:last-child { display: inline-flex; vertical-align: middle; max-width: calc(100% - 32px); }
table.ranks td.who b { max-width: 100%; }
@media (max-width: 420px) { table.ranks th:nth-child(3), table.ranks td.val { width: 78px; } table.ranks th:nth-child(4), table.ranks td.hands { width: 44px; } }
/* partner swipe during the hand */
.swipebar { display: flex; align-items: center; gap: 8px; max-width: 720px; margin: 8px auto 0; padding: 6px 8px; border-radius: 14px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.12); }
.sw { flex: none; width: 40px; height: 40px; border-radius: 50%; font-size: 18px; font-weight: 900; border: 2px solid; background: rgba(0,0,0,.25); }
.sw.left { color: #ff6b6b; border-color: rgba(255,107,107,.6); } .sw.right { color: #eef1f4; border-color: rgba(214,219,226,.6); }
.sw:disabled { opacity: .3; cursor: default; }
.sw-card { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; touch-action: pan-y; user-select: none; cursor: grab; }
.sw-card .avatar { width: 34px; height: 34px; font-size: 18px; flex: none; }
.sw-txt { display: flex; flex-direction: column; min-width: 0; }
.sw-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
.sw-txt small { color: var(--muted); font-size: .72rem; }
.swipebar[data-state="locked"] { border-color: var(--pos); } .swipebar[data-state="locked"] small { color: var(--pos); font-weight: 700; }
.swipebar[data-state="left"] { opacity: .75; }
.swipe-btns { display: flex; gap: 8px; justify-content: center; }
.swap-btn.keep { color: #eef1f4; border-color: rgba(214,219,226,.5); }
.lockbox { margin: 10px 0 0; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--pos); background: rgba(214,219,226,.1); font-size: .82rem; }
.lockbox button { margin-left: 6px; }

/* ---------- card faces: Traditional · Jumbo index (Bicycle Jumbo Index lookalike) · optional 4-colour toggle (fc4) ---------- */
.card { overflow: hidden; }
.card i { font-style: normal; }
/* ---------- card faces (cards.js markup) ----------
 * Traditional = classic casino look: white card, thin border, corner indices (rank over a small pip) top-left and
 * rotated bottom-right, classic pip layouts, framed court art and an ornate ace of spades (public-domain artwork,
 * assets/cards/v1, from Byron Knoll's vector-playing-cards). Jumbo index = Bicycle Jumbo Index lookalike (very large
 * bold-serif corner indices, compressed centre pips, smaller framed court). 4-colour (class fc4, any face) = blue
 * diamonds and green clubs. Indices are sized for the overlapped hand on a 375 px phone. */
:root { --suit-S: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 3C44 14 8 36 8 61c0 15 12 24 24 24 7 0 12-3 15-8-1 9-5 15-12 20h30c-7-5-11-11-12-20 3 5 8 8 15 8 12 0 24-9 24-24C92 36 56 14 50 3z'/%3E%3C/svg%3E"); --suit-H: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 95C44 85 5 60 5 31 5 16 16 6 29 6c10 0 17 6 21 14 4-8 11-14 21-14 13 0 24 10 24 25 0 29-39 54-45 64z'/%3E%3C/svg%3E"); --suit-D: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2C42 18 28 36 13 50c15 14 29 32 37 48 8-16 22-34 37-48C72 36 58 18 50 2z'/%3E%3C/svg%3E"); --suit-C: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='27' r='21'/%3E%3Ccircle cx='25' cy='58' r='21'/%3E%3Ccircle cx='75' cy='58' r='21'/%3E%3Cpath d='M42 46h16v8H42z'/%3E%3Cpath d='M47 55c0 18-5 31-14 40h34c-9-9-14-22-14-40z'/%3E%3C/svg%3E"); }
.card { background: #fff; border: 1px solid #b9bec5; border-radius: calc(var(--card-w) * .08); overflow: hidden; }
.card.red { color: #c8102e; } .card.black { color: #111; }
.card .pip { display: block; background: currentColor; -webkit-mask: var(--suit) center / contain no-repeat; mask: var(--suit) center / contain no-repeat; }
.card.s-S { --suit: var(--suit-S); } .card.s-H { --suit: var(--suit-H); } .card.s-D { --suit: var(--suit-D); } .card.s-C { --suit: var(--suit-C); }
.card .ix { position: absolute; display: flex; flex-direction: column; align-items: center; width: calc(var(--card-w) * .22); line-height: 1; pointer-events: none; }
.card .ix b { font-family: Georgia, "Times New Roman", "Liberation Serif", "DejaVu Serif", serif; font-weight: 700; font-size: calc(var(--card-w) * .27); letter-spacing: -.02em; }
.card .ix b.ten { letter-spacing: -.12em; transform: scaleX(.82); margin-left: -.06em; }
.card .ix .pip { width: calc(var(--card-w) * .16); height: calc(var(--card-w) * .16); margin-top: 1px; }
.card .ix.tl { top: calc(var(--card-w) * .04); left: calc(var(--card-w) * .015); }
.card .ix.br { bottom: calc(var(--card-w) * .04); right: calc(var(--card-w) * .015); transform: rotate(180deg); }
.card .face { position: absolute; inset: 0; pointer-events: none; }
.card .pips { position: absolute; inset: 0; }
.card .pips .pip { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--card-w) * .19); height: calc(var(--card-w) * .19); transform: translate(-50%, -50%); }
.card .pips .pip.rot { transform: translate(-50%, -50%) rotate(180deg); }
.card .pip.ace { position: absolute; left: 50%; top: 50%; width: calc(var(--card-w) * .42); height: calc(var(--card-w) * .42); transform: translate(-50%, -50%); }
.card .ace-art { position: absolute; left: 50%; top: 50%; width: calc(var(--card-w) * .62); height: calc(var(--card-w) * .8); transform: translate(-50%, -50%);
  background: url(assets/cards/v1/AS-art.webp) center / contain no-repeat; }
.card .court { position: absolute; inset: 9% 22%; background: #fff var(--court, none) center / contain no-repeat; }
.card.c-JS { --court: url(assets/cards/v1/JS.webp); }
.card.c-JH { --court: url(assets/cards/v1/JH.webp); }
.card.c-JD { --court: url(assets/cards/v1/JD.webp); }
.card.c-JC { --court: url(assets/cards/v1/JC.webp); }
.card.c-QS { --court: url(assets/cards/v1/QS.webp); }
.card.c-QH { --court: url(assets/cards/v1/QH.webp); }
.card.c-QD { --court: url(assets/cards/v1/QD.webp); }
.card.c-QC { --court: url(assets/cards/v1/QC.webp); }
.card.c-KS { --court: url(assets/cards/v1/KS.webp); }
.card.c-KH { --court: url(assets/cards/v1/KH.webp); }
.card.c-KD { --court: url(assets/cards/v1/KD.webp); }
.card.c-KC { --court: url(assets/cards/v1/KC.webp); }
.card .jumbo { display: none; }
/* Jumbo index = Bicycle Jumbo Index lookalike. Rank glyphs: Bodoni Moda Bold (SIL OFL 1.1, assets/fonts/OFL-BodoniModa.txt),
 * subset to A J Q K 0-9. The index must stay legible in the ~0.36-card-wide strip a 13-card hand shows on a 375 px phone. */
@font-face { font-family: "SS Index"; src: url(assets/fonts/ss-index-v1.woff) format("woff"); font-weight: 700; font-style: normal; font-display: block; }
.cf-jumbo :not(.face-preview) > .card, .face-preview.cf-jumbo > .card { border-color: #a9afb7; }
.cf-jumbo :not(.face-preview) > .card .ix, .face-preview.cf-jumbo > .card .ix { width: calc(var(--card-w) * .36); z-index: 1; background: #fff; padding-bottom: calc(var(--card-w) * .03); border-radius: 0 0 calc(var(--card-w) * .06) 0; }
.cf-jumbo :not(.face-preview) > .card .ix b, .face-preview.cf-jumbo > .card .ix b { font-family: "SS Index", Georgia, "Times New Roman", "Liberation Serif", serif; font-weight: 700; font-size: calc(var(--card-w) * .47); line-height: .86; letter-spacing: 0; }
.cf-jumbo :not(.face-preview) > .card .ix b.ten, .face-preview.cf-jumbo > .card .ix b.ten { letter-spacing: -.07em; transform: scaleX(.74); margin-left: -.04em; }
.cf-jumbo :not(.face-preview) > .card .ix .pip, .face-preview.cf-jumbo > .card .ix .pip { width: calc(var(--card-w) * .25); height: calc(var(--card-w) * .25); margin-top: calc(var(--card-w) * .035); }
.cf-jumbo :not(.face-preview) > .card .ix.tl, .face-preview.cf-jumbo > .card .ix.tl { top: calc(var(--card-w) * .05); left: calc(var(--card-w) * .005); }
.cf-jumbo :not(.face-preview) > .card .ix.br, .face-preview.cf-jumbo > .card .ix.br { bottom: calc(var(--card-w) * .05); right: calc(var(--card-w) * .005); }
/* centre pips: the classic layout squeezed between the big indices, smaller pips */
.cf-jumbo :not(.face-preview) > .card .pips .pip, .face-preview.cf-jumbo > .card .pips .pip { left: calc(50% + (var(--x) - 50) * .6%); top: calc(50% + (var(--y) - 50) * .86%); width: calc(var(--card-w) * .15); height: calc(var(--card-w) * .15); }
.cf-jumbo :not(.face-preview) > .card .pip.ace, .face-preview.cf-jumbo > .card .pip.ace { width: calc(var(--card-w) * .32); height: calc(var(--card-w) * .32); }
.cf-jumbo :not(.face-preview) > .card .ace-art, .face-preview.cf-jumbo > .card .ace-art { width: calc(var(--card-w) * .54); height: calc(var(--card-w) * .72); }
/* court: a smaller picture in a thin frame between the indices */
.cf-jumbo :not(.face-preview) > .card .court, .face-preview.cf-jumbo > .card .court { inset: 6% 19%; background-size: cover; border: max(1px, calc(var(--card-w) * .014)) solid currentColor; box-shadow: inset 0 0 0 max(1px, calc(var(--card-w) * .02)) #fff; }
/* 4-colour toggle (any face): ♠ black · ♥ red · ♦ blue · ♣ green (the jumbo court frame follows the suit colour) */
.fc4 :not(.face-preview) > .card.s-D, .face-preview.fc4 > .card.s-D, .fc4 .cp .c.s-D { color: #1f5fd1; }
.fc4 :not(.face-preview) > .card.s-C, .face-preview.fc4 > .card.s-C, .fc4 .cp .c.s-C { color: #138a3e; }
/* 4-colour court art (J/Q/K): the public-domain pictures are printed in the classic red/blue/yellow with red ♦ and black ♣
   pips, which clashed with blue-diamond / green-club indices on the same card. Tint the picture to the suit colour
   (greyscale picture + a screen-blended suit-colour layer: white stays white, ink takes the suit colour; spades stay black). */
.fc4 :not(.face-preview) > .card .court, .face-preview.fc4 > .card .court { background-image: none; isolation: isolate; overflow: hidden; }
.fc4 :not(.face-preview) > .card .court::before, .face-preview.fc4 > .card .court::before { content: ''; position: absolute; inset: 0; background: #fff var(--court, none) center no-repeat; background-size: inherit; filter: grayscale(1) contrast(1.1); }
.fc4 :not(.face-preview) > .card .court::after, .face-preview.fc4 > .card .court::after { content: ''; position: absolute; inset: 0; background: currentColor; mix-blend-mode: screen; }
/* selected card rises; tap it again to play (z-index so the whole raised face is above overlapped neighbors) */
.hand .card.selected { transform: translateY(-26px); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--accent), 0 10px 18px rgba(0,0,0,.5); z-index: 2; }
.bid-grid button.chosen { background: var(--accent); color: #1b1300; border-color: var(--accent); transform: scale(1.06); }
#bidConfirm { margin: 2px 0 6px; }
.face-preview { display: flex; gap: 8px; margin: 8px 0; --card-w: 56px; }
.face-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; }
.face-row > label:first-child { flex: 1 1 160px; }
label.switch { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0; cursor: pointer; user-select: none; flex-wrap: wrap; }
label.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
label.switch .knob { position: relative; flex: none; width: 40px; height: 22px; border-radius: 11px; background: #3a3d42; border: 1px solid #6b7178; transition: background .15s; }
label.switch .knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #d9dde2; transition: transform .15s; }
label.switch input:checked + .knob { background: #1f5fd1; border-color: #8fb0ea; }
label.switch input:checked + .knob::after { transform: translateX(18px); background: #fff; }
label.switch input:focus-visible + .knob { outline: 2px solid var(--accent); outline-offset: 2px; }
/* the profile preview box is rendered with the PREVIEWED style (its own cf-* / fc4 classes); the body classes must not leak in */
.face-preview .card .jumbo { display: none; }
.face-preview:not(.fc4) .card.s-D, .face-preview:not(.fc4) .card.s-H { color: #c8102e; }
.face-preview:not(.fc4) .card.s-C { color: #111; }

/* ---------- brand: black + chrome/silver to match the logo (logo itself is never recoloured) ---------- */
.topbar { background: var(--topbar-bg); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; }
.brand-logo { height: 40px; width: auto; display: block; }
.hero { text-align: center; }
.hero-logo { width: min(300px, 70vw); height: auto; display: block; margin: 0 auto 6px; filter: drop-shadow(0 8px 18px rgba(0,0,0,.6)); }
.hero h1 span, .hero .hero-sub { background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
.panel { background: rgba(20,21,24,.78); border-color: rgba(255,255,255,.08); }
.primary { background: var(--chrome); color: #0d0e10; border: 1px solid #5b6066; box-shadow: 0 4px 14px rgba(0,0,0,.45), inset 0 1px 0 #fff; }
.primary:hover { filter: brightness(1.05); }
.toast { background: var(--chrome); color: #0d0e10; border: 1px solid #5b6066; }
.navbtn.on { border-color: #d9dde2; color: #fff; background: rgba(255,255,255,.08); }
.felt { border-color: #8c939b; box-shadow: inset 0 0 40px rgba(0,0,0,.45), 0 0 0 2px #2b2e33, 0 10px 30px rgba(0,0,0,.5); }
.sheet { background: var(--sheet-bg); color: var(--surface-ink); border: 1px solid var(--line); }
.sugg, .paused { background: #17181b; }
.big-avatar { border-color: #d9dde2; }
input, select { background: var(--input-bg); }
@media (max-width: 420px) { .brand-logo { height: 34px; } }

/* ---------- BEERS ---------- */
.card .beerart { display: none; }
.card.beer7 .face { display: none; }
.card.beer7 .beerart { display: block; position: absolute; inset: 14% 18% 10%; }
.card.beer7 .beerart svg { width: 100%; height: 100%; display: block; }
.cf-jumbo .card.beer7 .beerart { inset: 18% 27%; width: auto; height: auto; }
.face-preview.cf-traditional .card.beer7 .face { display: none; }
.face-preview.cf-traditional .card.beer7 .beerart { inset: 14% 18% 10%; width: auto; height: auto; }
.face-preview.cf-jumbo .card.beer7 .beerart { inset: 18% 27%; width: auto; height: auto; }
.botm-preview { display: flex; gap: 8px; margin: 8px 0; }
.botm-preview .bp { width: 54px; height: 90px; background: #fff; border-radius: 6px; padding: 2px; box-shadow: 0 3px 10px rgba(0,0,0,.4); }
.botm-preview .bp svg { width: 100%; height: 100%; }
.beer-tile b { color: #ffd34d; }
.bottle-ico { vertical-align: middle; }
.club { font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 6px; background: #ffd34d; color: #3a1d00; margin-left: 4px; }
.ranks td.beers b { font-size: 1.1em; }
.row-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.seat .avatar { position: relative; }
.beer-badge { position: absolute; top: -10px; right: -16px; line-height: 0; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); animation: beerPop .35s ease-out; z-index: 3; }
@keyframes beerPop { from { transform: scale(0) rotate(-30deg); } to { transform: scale(1) rotate(0); } }
.beer-fx { position: fixed; inset: 0; z-index: 40; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.beer-fx[hidden] { display: none; }
.beer-title { font-size: clamp(44px, 12vw, 96px); font-weight: 900; letter-spacing: 2px; color: #ffd34d; -webkit-text-stroke: 2px #3a1d00;
  text-shadow: 0 6px 0 #8a4a0c, 0 12px 30px rgba(0,0,0,.6); animation: beerIn .5s cubic-bezier(.2,1.6,.4,1); }
.beer-fx[data-minor="1"] .beer-title { color: #e9c69a; -webkit-text-stroke-color: #3a1a0b; text-shadow: 0 6px 0 #5a2a12, 0 12px 30px rgba(0,0,0,.6); }
.beer-sub { margin-top: 6px; font-weight: 700; background: rgba(0,0,0,.65); padding: 4px 12px; border-radius: 12px; }
.beer-earned { margin-top: 8px; max-width: min(92vw, 520px); padding: 4px 14px; border-radius: 12px; background: rgba(0,0,0,.7); color: #ffd34d;
  font-weight: 800; font-size: clamp(15px, 4.4vw, 22px); line-height: 1.25; text-align: center; overflow-wrap: anywhere; animation: beerIn .5s ease-out; }
.beer-fx[data-minor="1"] .beer-earned { color: #e9c69a; }
.beer-fly { margin-top: 10px; transition: transform 1s cubic-bezier(.5,-.3,.6,1); filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
@keyframes beerIn { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.beer-burst { position: absolute; width: 1px; height: 1px; top: 45%; left: 50%; }
.beer-burst i { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #ffe58a 40%, #f0a92a);
  animation: bubble 1.4s ease-out forwards; transform: rotate(calc(var(--i) * 25.7deg)) translateY(0); opacity: .95; }
@keyframes bubble { to { transform: rotate(calc(var(--i) * 25.7deg)) translateY(-180px) scale(.4); opacity: 0; } }
.beer-line { margin: 10px 0; padding: 8px 10px; border-radius: 10px; background: linear-gradient(90deg, rgba(255,211,77,.18), rgba(255,211,77,.04)); border: 1px solid rgba(255,211,77,.4); display: flex; align-items: center; gap: 8px; }
.beer-line[data-minor="1"] { background: linear-gradient(90deg, rgba(233,198,154,.18), rgba(233,198,154,.04)); border-color: rgba(233,198,154,.45); }
@media (prefers-reduced-motion: reduce) { .beer-title, .beer-earned, .beer-burst i, .beer-badge { animation: none; } .beer-fly { transition: none; } }

/* bid box */
.bid-dock { background: linear-gradient(180deg, #1c1e22, #121316); border: 1px solid rgba(214,219,226,.45); border-radius: 14px; padding: 8px 10px; box-shadow: 0 6px 18px rgba(0,0,0,.4); animation: rise .18s ease-out; }
.bid-dock h2 { margin: 0 0 2px; font-size: .95rem; }
.bid-dock .bid-hint { font-size: .74rem; margin: 0 0 6px; }
.bid-dock .bid-help { margin: 4px 0 0; font-size: .66rem; }
.bid-dock .bid-grid { grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; }
.bid-dock .bid-grid button { padding: 6px 0; font-size: .85rem; border-radius: 8px; }
.bid-dock .primary.wide { padding: 8px; font-size: .9rem; }
.card.beer7 .jumbo .pip:not(.big) { display: none; }
.site-foot { max-width: 980px; margin: 8px auto 18px; padding: 0 14px; text-align: center; }
.site-foot p { margin: 0; }
label.check { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: 8px 0; }

/* ---------- table: sized to the viewport (app.js layoutTable sets the variables) ----------
 * --felt-h / --felt-w: the felt; --hand-w: your hand's cards (the biggest); --trick-w: cards played to the table
 * (smaller, still clear: below ~58 px they switch to the big-index look); --lt-fs: last-trick mini cards;
 * --edge-w: side columns of the felt (side seats + the last trick in the bottom-left corner).
 * Landscape: [felt | bid box + partner swipe]; portrait: felt, then bid box / swipe, then the hand. */
#screen-table { --hand-w: 64px; --trick-w: 56px; --felt-h: 420px; --felt-w: 900px; --lt-fs: 13px; --edge-w: 120px; --hand-max: 720px; max-width: none; padding: 8px 12px 4px; }
#screen-table .table-info { max-width: var(--felt-w); margin: 0 auto 4px; }
.table-layout { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "center" "side"; justify-content: center; }
.table-layout.land { grid-template-columns: var(--felt-w); grid-template-areas: "center"; align-items: center; gap: 12px; } /* no right column (Oct 21 2026) */
.tl-center { grid-area: center; min-width: 0; }
.table-layout.land .bid-dock .bid-grid { grid-template-columns: repeat(5, 1fr); }
.table-layout.land .bid-dock { animation: none; }
#felt.felt { max-width: none; width: 100%; height: var(--felt-h); margin: 0; padding: 8px 10px; gap: 4px 8px; border-width: 5px;
  grid-template-columns: minmax(var(--edge-w), 1fr) minmax(0, 3.4fr) minmax(var(--edge-w), 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  grid-template-areas: ". top ." "left trick right" ". trick right" "lt bottom ." "hand hand hand"; } /* last trick: bottom-left, left of your plate */
#felt .pos-2 { grid-area: top; grid-column: 1 / -1; flex-direction: row; gap: 8px; }
#felt .pos-2 .avatar { width: 40px; height: 40px; font-size: 22px; }
#felt .pos-0 { grid-area: bottom; grid-column: 2; }
#felt .pos-1 { grid-area: left; } #felt .pos-3 { grid-area: right; }
#felt .seat .role { display: none; }
#felt:not(.compact) .seat { zoom: var(--seat-zoom, 1); }
#felt .trick { grid-area: trick; min-height: 0; position: relative; }
#felt .last-trick { grid-area: lt; align-self: end; justify-self: start; }
#felt .last-trick[hidden] { display: none; }
#trick .card { --card-w: var(--trick-w); --card-h: calc(var(--trick-w) * 1.4); }
#trick .s-1 { left: 2%; } #trick .s-3 { right: 2%; }
#felt.small-trick #trick .card .face, #felt.small-trick #trick .card .ix { display: none; }
#felt.small-trick #trick .card .jumbo { display: block; position: absolute; inset: 0; }
/* the small-card look itself (its rules went with the old Jumbo face in 407dae5, leaving a bare rank and a 0×0 suit):
   big rank top-left, a suit pip under it, a big suit pip bottom-right; both faces, 4-colour via currentColor */
#felt.small-trick #trick .card .jumbo b { position: absolute; top: calc(var(--card-w) * .02); left: calc(var(--card-w) * .06); font-family: Georgia, "Times New Roman", "Liberation Serif", "DejaVu Serif", serif;
  font-weight: 700; font-size: calc(var(--card-w) * .5); line-height: 1; letter-spacing: -.03em; }
#felt.small-trick #trick .card .jumbo b.ten { letter-spacing: -.14em; transform: scaleX(.8); transform-origin: left top; }
#felt.small-trick #trick .card .jumbo .pip { position: absolute; left: calc(var(--card-w) * .08); top: calc(var(--card-w) * .56); width: calc(var(--card-w) * .3); height: calc(var(--card-w) * .3); }
#felt.small-trick #trick .card .jumbo .pip.big { left: auto; top: auto; right: calc(var(--card-w) * .07); bottom: calc(var(--card-w) * .07); width: calc(var(--card-w) * .52); height: calc(var(--card-w) * .52); }
#felt.compact .avatar { width: 30px; height: 30px; font-size: 17px; border-width: 2px; }
#felt.compact .seat .plate { padding: 2px 6px; }
#felt.compact .seat .name { font-size: .8rem; } #felt.compact .bidinfo { font-size: .72rem; }
#felt.compact { padding: 4px 6px; gap: 2px 6px; }
/* short, wide felt (phones on their side): [last trick | W | trick | E], the last trick down in the bottom-left corner */
#felt.short { grid-template-columns: auto minmax(var(--edge-w), 1fr) minmax(0, 3fr) minmax(var(--edge-w), 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: "top top top top" "left left trick right" "lt . bottom ." "lt hand hand hand"; }
#felt.short .pos-2 { grid-column: 1 / -1; } #felt.short .pos-0 { grid-column: 3; } #felt.short .pos-1 { grid-column: 1 / 3; }
.table-layout:not(.land) #felt .pos-0 .plate { flex-direction: column; gap: 0; }
/* last trick: four mini cards in a cross (N/E/S/W relative to you), gold outline on the card that was LED, no names */
.last-trick { padding: 4px 6px 6px; border-radius: 10px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.12); font-size: calc(var(--lt-fs) * var(--lt-k, 1)); }
.lt-label { font-size: .72em; color: var(--muted); text-align: center; margin-bottom: 2px; white-space: nowrap; }
.compass { display: grid; grid-template-columns: repeat(3, auto); grid-template-areas: ". n ." "w mid e" ". s ."; gap: .1em .15em; justify-content: center; align-items: center; }
.cp-2 { grid-area: n; } .cp-1 { grid-area: w; } .cp-3 { grid-area: e; } .cp-0 { grid-area: s; } .cp-mid { grid-area: mid; width: .4em; }
.cp { display: grid; place-items: center; min-width: 1.9em; min-height: 1.6em; margin: -.15em 0; }
.cp .c { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 1.9em; height: 2.35em; background: #fff; border-radius: .25em;
  font-family: Georgia, "Times New Roman", serif; font-weight: 700; line-height: .95; border: 2px solid #b9bec5; box-shadow: 0 1px 3px rgba(0,0,0,.45); }
.cp .c b { font-size: 1em; } .cp .c i { font-style: normal; font-size: .95em; }
.cp .c.red { color: #c8102e; } .cp .c.black { color: #111; }
.cp.led .c { border-color: #ffd400; box-shadow: 0 0 0 1px #ffd400, 0 0 10px rgba(255,212,0,.65); }
/* your hand: the biggest cards, overlapped to fit; GPU-only motion (transform only: cards never fade) */
#hand.hand { --card-w: var(--hand-w); --card-h: calc(var(--hand-w) * 1.4); max-width: var(--hand-max); margin: 4px auto 0; padding: calc(var(--card-h) * .22) 8px 6px; min-height: calc(var(--card-h) * 1.22 + 8px); }
/* on the felt: its own bottom row, full width; the top padding is the raise room, so a raised card stays on the felt */
/* Hand row stays at the Medium footprint, so S/M/L/XL and spacing change only the fan — slots, plates, Bid/Made and the last trick stay put. */
#felt #hand.hand { grid-area: hand; width: 100%; max-width: none; margin: 0; padding: 0; align-items: flex-end; align-self: end; min-width: 0; overflow: visible;
  height: calc(var(--hand-slot, var(--hand-w)) * 1.4 * 1.21); min-height: calc(var(--hand-slot, var(--hand-w)) * 1.4 * 1.21); max-height: calc(var(--hand-slot, var(--hand-w)) * 1.4 * 1.21); }
/* card spacing: --fit is the step that just fills the row; the default step is min(card + 4px, --fit) (unchanged); the
   Settings − / + scale it by --hand-sp (0.52 … 1.48, body), never past --fit (no overflow / sideways scroll) nor under 26 % of a card (the rank index stays readable) */
#hand.hand .card { --fit: calc((var(--hand-max) - 16px - var(--card-w)) / (var(--n) - 1 + .0001));
  margin-left: min(calc(max(min(var(--card-w) + 4px, var(--fit)) * var(--hand-sp, 1), var(--card-w) * .26) - var(--card-w)), calc(var(--fit) - var(--card-w)));
  transition: transform 140ms cubic-bezier(.2, .8, .3, 1); will-change: transform; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; }
#hand.hand .card:first-child { margin-left: 0; }
#hand.hand .card.selected { transform: translate3d(0, calc(var(--card-h) * -.2), 0); z-index: 3; }
#hand.hand .card.leaving { visibility: hidden; transition: none; pointer-events: none; } /* the played card flies from here to the felt (flyIn); it is never faded */
#screen-table .timer { max-width: none; margin: 6px 0 0; height: 18px; }
#screen-table .timer span { line-height: 18px; }
#trick .card.flying { animation: none; will-change: transform; }
#trick .card.from-seat { animation: none; }
@media (prefers-reduced-motion: reduce) { #hand.hand .card, #trick .card { transition: none !important; animation: none !important; } }
/* short landscape (phones on their side): slimmer header */
@media (max-height: 520px) and (orientation: landscape) {
  body.at-table .topbar { padding: 3px 10px; } body.at-table .brand-logo { height: 28px; }
  body.at-table .table-info { display: none; }
  .bid-dock .bid-help { display: none; } .bid-dock .bid-hint { margin-bottom: 3px; }
  .table-layout.land .bid-dock .bid-grid { grid-template-columns: repeat(7, 1fr); }
  .table-layout.land .bid-dock .bid-grid button { padding: 4px 0; }
  .bid-dock .bid-hint { display: none; }
}

/* ---------- brand colorway (v4): black + chrome from the logo (sampled: #000, #101010, #202020, steel #70708a,
 * silver #b0b0b0–#d0d0d0, highlight #f0f0f0). Gold only for the LED card outline and the active-turn glow; no green. */
#felt.felt { border: 7px solid transparent; border-radius: 26px;
  background: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1.2px) 0 0 / 5px 5px padding-box, var(--felt) padding-box, var(--rail) border-box;
  box-shadow: 0 0 0 1px rgba(0,0,0,.9), 0 14px 40px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.08), inset 0 0 60px rgba(0,0,0,.75); }
.seat .plate { background: linear-gradient(180deg, rgba(64,67,74,.92), rgba(24,25,29,.94)); border: 2px solid #8e959e;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 2px 6px rgba(0,0,0,.55); color: #fff; }
.seat .name { color: #fff; }
.bidinfo { color: #e9ecef; } .bidinfo .b { color: #fff; } .bidinfo .wait { color: #a9b0b8; }
.bidinfo .nil { background: linear-gradient(180deg, #e8ebee, #9ea4ab); color: #111; }
.avatar { border-color: #b9bfc6; }
.dealer-chip { background: var(--chrome); color: #111; }
.last-trick { background: linear-gradient(180deg, rgba(48,50,56,.85), rgba(16,17,20,.9)); border: 1px solid #8e959e; box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.lt-label { color: #c9ced4; }
.cp.led .c { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 10px rgba(255,212,0,.65); }
.center-msg { color: #d4d8de; }
/* turn bar: dark track, chrome fill */
#screen-table .timer { background: #0c0c0e; border: 1px solid #5d636b; box-shadow: inset 0 1px 3px rgba(0,0,0,.8); }
.timer .bar { background: linear-gradient(180deg, #8d939b, #4f545b); }
.timer.mine .bar { background: var(--chrome); }
.timer.mine span { color: #111; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.timer.low .bar { background: linear-gradient(180deg, #ff8a8a, #c43c3c); }
/* bid box + swipe bar: gunmetal panels with a chrome edge */
.bid-dock, .swipebar { background: linear-gradient(180deg, #24262b, #111215); border: 1px solid #9aa0a8; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 18px rgba(0,0,0,.5); }
.bid-grid button { background: linear-gradient(180deg, #34373d, #1b1c20); border: 1px solid #6b717a; color: #f1f3f5; }
.bid-grid button.chosen { background: var(--btn); color: var(--on-btn); border-color: #fff; }
.bid-grid button.nil { color: #ff9aa9; }
.sw { background: linear-gradient(180deg, #34373d, #16171a); }
.sw.right { color: #f4f6f8; border-color: #c4c9cf; } .sw.left { color: #ff7d7d; border-color: rgba(255,125,125,.6); }
.swipebar[data-state="locked"] { border-color: #fff; box-shadow: 0 0 0 1px #fff, 0 0 14px rgba(255,255,255,.25); }
.primary { background: var(--btn); color: var(--on-btn); box-shadow: inset 0 1px 0 #fff, 0 4px 14px rgba(0,0,0,.45); }
.ghost { border-color: #8e959e; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0)); }
.navbtn.on { border-color: #e6e9ec; color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset; }
.panel { background: var(--panel); color: var(--surface-ink); border-color: var(--line); }
.toast { color: var(--on-btn); background: var(--btn); }
#hand.hand .card.selected { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #9aa0a8, 0 10px 18px rgba(0,0,0,.6); }

/* SHOW_AVATARS=0 (default for now): player icons hidden everywhere; the data stays, so they can come back */
.no-avatars .seat .avatar, .no-avatars .pa, .no-avatars .big-avatar, .no-avatars #meAvatar, .no-avatars .sw-card .avatar,
.no-avatars .partner-card .avatar, .no-avatars .avatar-grid { display: none !important; }
.no-avatars .label:has(+ .avatar-grid) { display: none; }
.no-avatars .seat .plate { position: relative; }
.no-avatars .partner-card { padding-left: 14px; }
.no-avatars table.ranks td.who .pa + span, .no-avatars .lobby-hello { gap: 0; }

/* ===== Display-name styles (namestyle.js): self-hosted fonts (assets/fonts, OFL/Apache) + high-contrast colours ===== */
@font-face { font-family: "SS Merriweather"; src: url("assets/fonts/merriweather.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "SS Playfair Display"; src: url("assets/fonts/playfair-display.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "SS Roboto Slab"; src: url("assets/fonts/roboto-slab.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "SS Nunito"; src: url("assets/fonts/nunito.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "SS Oswald"; src: url("assets/fonts/oswald.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "SS Bebas Neue"; src: url("assets/fonts/bebas-neue.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "SS Dancing Script"; src: url("assets/fonts/dancing-script.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "SS Pacifico"; src: url("assets/fonts/pacifico.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "SS JetBrains Mono"; src: url("assets/fonts/jetbrains-mono.woff2") format("woff2"); font-display: swap; }
.nf-merri { font-family: "SS Merriweather", serif !important; }
.nf-playfair { font-family: "SS Playfair Display", serif !important; }
.nf-slab { font-family: "SS Roboto Slab", serif !important; }
.nf-nunito { font-family: "SS Nunito", sans-serif !important; }
.nf-oswald { font-family: "SS Oswald", sans-serif !important; letter-spacing: .03em; }
.nf-bebas { font-family: "SS Bebas Neue", sans-serif !important; letter-spacing: .03em; }
.nf-dancing { font-family: "SS Dancing Script", cursive !important; font-weight: 400; }
.nf-pacifico { font-family: "SS Pacifico", cursive !important; font-weight: 400; }
.nf-mono { font-family: "SS JetBrains Mono", monospace !important; }
.nc-chrome { background: linear-gradient(180deg,#fdfdfd 0%,#c9ced6 45%,#8f959e 55%,#e9edf1 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.nc-gold { color: #e8c15a !important; }
.nc-ice { color: #a8e8ff !important; }
.nc-sky { color: #8cc8ff !important; }
.nc-mint { color: #7eecc0 !important; }
.nc-lime { color: #c4f27a !important; }
.nc-lemon { color: #ffe98a !important; }
.nc-peach { color: #ffc08a !important; }
.nc-coral { color: #ffa595 !important; }
.nc-rose { color: #ffaed2 !important; }
.nc-lilac { color: #d4b8ff !important; }
.nc-periwinkle { color: #b4beff !important; }
.nc-sand { color: #e6d3b0 !important; }
.name-style { display: grid; gap: 8px; margin: 4px 0 10px; }
.ns-preview { font-size: 22px; padding: 8px 12px; border-radius: 10px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12); min-height: 44px; display: flex; align-items: center; }
.ns-fonts { display: flex; flex-wrap: wrap; gap: 6px; }
.nf-opt { font-size: 15px; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #e9edf1; cursor: pointer; }
.nf-opt.on, .nc-opt.on { outline: 2px solid #e8c15a; outline-offset: 1px; }
.ns-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.nc-opt { width: 30px; height: 30px; border-radius: 50%; background: var(--c); border: 2px solid rgba(0,0,0,.6); cursor: pointer; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.nc-opt.chrome { background: linear-gradient(180deg,#fdfdfd 0%,#c9ced6 45%,#8f959e 55%,#e9edf1 100%); }

/* ===== Stats hub + player viewer ===== */
.st-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.st-tabs button, .seg button { font-size: 14px; padding: 7px 11px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #d9dde2; cursor: pointer; }
.st-tabs button.on, .seg button.on { background: linear-gradient(180deg,#f4f5f7,#aeb4bc); color: #111; border-color: #e9edf1; font-weight: 700; }
.seg { display: inline-flex; gap: 4px; flex-wrap: wrap; }
#stTable .who b.pname, #rkTable .who b, .plist .pn b, .seat .name, #swName { cursor: pointer; }
#stTable .who b.pname:hover, #rkTable .who b:hover { text-decoration: underline; text-underline-offset: 3px; }
.sheet.player { max-width: 520px; width: calc(100vw - 24px); }
.pv-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pv-head h2 { margin: 0; font-size: 22px; }
.pv-stats { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 8px; }
.pv-stats th, .pv-stats td { text-align: left; padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.08); }
.pv-stats thead th { font-size: 12px; color: #aeb4bc; text-transform: uppercase; letter-spacing: .05em; }
.pv-private { font-size: 18px; padding: 18px 4px; }
/* avatars hidden: the header profile chip shows the (styled) name instead of an empty pill, even on phones */
.no-avatars #profileBtn .lbl { display: inline-block !important; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
/* ===== Scores sheet sections (DoD) + the BRB block on the end-of-hand card: black/chrome, large type ===== */
.rp-badge { position: absolute; top: -8px; left: -8px; min-width: 24px; height: 24px; border-radius: 12px; background: #ff4d4d; color: #fff; font-size: .95rem; line-height: 24px; text-align: center;
  box-shadow: 0 0 0 2px #111, 0 0 12px rgba(255,77,77,.8); animation: rpPulse 1.2s ease-in-out infinite; }
@keyframes rpPulse { 50% { transform: scale(1.15); } }
.rp-sec { padding: 10px 12px; border-radius: 14px; background: linear-gradient(180deg, #24262b, #111215); border: 1px solid #9aa0a8; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 18px rgba(0,0,0,.5); }
.rp-sec h3 { margin: 0 0 8px; font-size: 1.12rem; letter-spacing: .04em; text-transform: uppercase; background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rp-empty, .rp-note { margin: 6px 0 0; color: #c9ced4; font-size: .95rem; line-height: 1.35; }
.rp-board { font-weight: 700; color: #dfe3e8; margin-bottom: 4px; font-size: 1rem; }
table.rp-score { width: 100%; border-collapse: collapse; font-size: 1.12rem; font-variant-numeric: tabular-nums; }
table.rp-score th, table.rp-score td { padding: 4px 3px; text-align: center; }
table.rp-score thead th { font-size: .82rem; color: #a9b0b8; font-weight: 700; text-transform: uppercase; }
table.rp-score tbody th { text-align: left; color: #eef0f2; }
table.rp-score tr.us td, table.rp-score tr.us th { border-top: 1px solid rgba(255,255,255,.12); }
table.rp-score tr.them td, table.rp-score tr.them th { border-top: 1px solid rgba(255,255,255,.12); }
table.rp-score tr.nilrow td { text-align: left; font-size: .95rem; border-top: 0; padding-top: 0; }
table.rp-score .pos { color: #fff; } table.rp-score .neg { color: #ff6b6b; }
.rp-mp { margin-top: 6px; font-size: 1.08rem; color: #eef0f2; }
.rp-mp b { font-size: 1.15em; }
.rp-brb-min { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.rp-brb-min button { padding: 10px 0; font-size: 1.05rem; font-weight: 800; border-radius: 10px; border: 1px solid #c9ced4; color: #111; background: var(--chrome); cursor: pointer; }
.rp-brb-min button:disabled { opacity: .4; cursor: default; }
.rp-brb-st { margin: 0; font-size: 1.05rem; color: #eef0f2; }
.rp-brb-act { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.rp-count { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rp-count .lbl { font-size: 1rem; color: #dfe3e8; }
.rp-count b { font-size: 2rem; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 0 10px rgba(255,255,255,.35); }
#rpBrb .primary.big, #pauseBackBtn { font-size: 1.2rem; padding: 12px; margin-top: 8px; }
/* result card leaves room for the open landscape panel (BRB is asked between hands, i.e. while the card shows) */
/* landscape: both result cards (board result, 500 scoreboard) centre on the felt itself, not the window (app.js rpPad) */
@media (min-width: 600px) { body.at-table :is(#resultOverlay, #g500Overlay) { padding: var(--ov-t, 0px) var(--ov-r, 0px) var(--ov-b, 0px) var(--ov-l, 0px); } }
/* partner's BRB request: pops up even when the panel is collapsed */
.brb-ask { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); backdrop-filter: blur(3px); }
.brb-ask[hidden] { display: none; }
.brb-ask .sheet { width: min(92vw, 420px); border-radius: 18px; border: 1px solid #c9ced4; background: linear-gradient(180deg, #24262b, #0d0e10); padding: 18px 20px; }
.brb-ask h2 { margin: 0 0 6px; font-size: 1.4rem; }
.brb-ask p { font-size: 1.15rem; margin: 0 0 12px; }
.brb-ask .actions button { font-size: 1.15rem; padding: 12px 18px; }
.plist .pref-sel { margin-left: 8px; padding: 4px 6px; font-size: .9rem; background: #15171a; color: #eef0f2; border: 1px solid #6c737b; border-radius: 8px; }
.plist li[data-pref="avoid"] .pn b { color: #ff8a8a; }


/* ---------- bigger table HUD (≈1.5×): names, Bid/Won badges (most prominent), board info, timer, bid box, last trick,
 * status text. High contrast on the black/chrome theme; layoutTable() reserves the taller timer. ---------- */
#screen-table .table-info { font-size: 1.15rem; color: #d4d8de; gap: 4px 16px; }
#screen-table .turn-info { color: #fff; }
#felt .seat .name, #felt.compact .seat .name { font-size: 1.3rem; font-weight: 800; letter-spacing: .1px; }
#felt .seat .plate { gap: 2px; padding: 4px 10px; }
#felt .bidinfo, #felt.compact .bidinfo { font-size: 1.2rem; font-weight: 800; color: #f1f3f5; letter-spacing: 0; line-height: 1.15; }
#felt .bidinfo .b, #felt .bidinfo .w { display: inline-block; min-width: 1.2em; padding: 0 .2em; margin-left: .08em; border-radius: .3em; text-align: center;
  font-size: 1.25em; font-weight: 900; line-height: 1.1; color: #111; background: var(--chrome); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.6); }
#felt .bidinfo .nil { font-size: 1em; padding: 0 .3em; margin-left: .12em; }
#felt .bidinfo .wait { color: #c3c8ce; font-weight: 700; }
/* side seats on a portrait (narrow) felt: Bid over Won, so the badges never spill out of the plate */
.table-layout:not(.land) #felt :is(.pos-1, .pos-3) .bidinfo { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.table-layout:not(.land) #felt :is(.pos-1, .pos-3) .bidinfo .sep { display: none; }
.table-layout:not(.land) #felt :is(.pos-1, .pos-3) .plate { max-width: calc(100% - 4px); }
.table-layout:not(.land) #felt:not(.short) .pos-0 { grid-column: 2; justify-self: center; max-width: 100%; } /* centred on the felt (middle column), clear of the last trick */
#felt .dealer-chip { width: 26px; height: 26px; font-size: .95rem; }
#felt .center-msg { font-size: 1.25rem; font-weight: 700; color: #eef0f2; text-shadow: 0 1px 3px rgba(0,0,0,.8); padding: 0 10%; }
#screen-table .timer { height: 28px; }
#screen-table .timer span { font-size: 1.05rem; line-height: 28px; font-weight: 800; }
.bid-dock h2 { font-size: 1.35rem; }
.bid-dock .bid-hint { font-size: 1.02rem; color: #c9ced4; }
.bid-dock .bid-help { font-size: .92rem; }
.bid-dock .bid-grid { gap: 5px; }
.bid-dock .bid-grid button { font-size: 1.3rem; font-weight: 800; padding: 9px 0; }
.bid-dock .primary.wide { font-size: 1.2rem; padding: 11px; }
.lt-label { font-size: max(.85em, 12px); font-weight: 700; }
.sw-txt b { font-size: 1.15rem; } .sw-txt small { font-size: .95rem; }
.toast { font-size: 1.1rem; }
.paused { font-size: 1.1rem; }
@media (max-width: 420px) {
  #screen-table .table-info { font-size: 1rem; }
  #felt .seat .name, #felt.compact .seat .name { font-size: 1.2rem; }
  #felt .bidinfo, #felt.compact .bidinfo { font-size: 1.2rem; }
  #felt .bidinfo .b, #felt .bidinfo .w { font-size: 1.2em; }
  #felt .seat .plate { padding: 3px 6px; gap: 2px; }
  #felt .dealer-chip { width: 22px; height: 22px; font-size: .85rem; }
  #felt .center-msg { font-size: 1.1rem; padding: 0 6%; }
  .bid-dock .bid-grid button { font-size: 1.2rem; padding: 8px 0; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .table-layout.land .bid-dock .bid-grid button { padding: 4px 0; font-size: 1.15rem; }
  #felt .seat .name, #felt.compact .seat .name { font-size: 1.08rem; }
  #felt .bidinfo, #felt.compact .bidinfo { font-size: 1.05rem; }
}

/* ---------- in-game settings: gear button (table only) + sheet ---------- */
.gearbtn { display: none; align-items: center; justify-content: center; gap: 4px; min-width: 44px; min-height: 40px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid #8e959e; background: linear-gradient(180deg, #34373d, #16171a); color: #f1f3f5; font-size: 1.25rem; line-height: 1; cursor: pointer; }
.gearbtn .lbl { font-size: .85rem; font-weight: 700; }
body.at-table .gearbtn { display: inline-flex; }
.gearbtn:focus-visible, .seg button:focus-visible, .settings-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.settings-back { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.55); display: flex; align-items: flex-start; justify-content: flex-end; padding: 56px 10px 10px; }
.settings-back[hidden] { display: none; }
.settings-sheet { width: min(420px, 100%); max-height: calc(100dvh - 66px); overflow-y: auto; border-radius: 16px; padding: 12px 14px 10px;
  background: var(--settings-bg); border: 1px solid #9aa0a8; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 14px 40px rgba(0,0,0,.7); color: var(--surface-ink); animation: rise .16s ease-out; }
.settings-sheet header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.settings-sheet h2 { margin: 0; font-size: 1.3rem; }
.settings-x { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #6b717a; background: linear-gradient(180deg, #34373d, #1b1c20); color: #fff; font-size: 1.1rem; cursor: pointer; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); min-height: 48px; flex-wrap: wrap; }
.set-l { font-size: 1.05rem; font-weight: 700; } .set-l small { display: block; font-size: .78rem; font-weight: 500; color: #a9b0b8; }
.seg { display: inline-flex; border: 1px solid #6b717a; border-radius: 12px; overflow: hidden; flex: none; }
.seg button { min-width: 48px; min-height: 44px; padding: 0 12px; border: 0; border-left: 1px solid #4a4f56; background: linear-gradient(180deg, #34373d, #1b1c20); color: #f1f3f5; font-weight: 800; font-size: 1rem; cursor: pointer; }
.seg button:first-child { border-left: 0; }
.seg button.on { background: var(--btn); color: var(--on-btn); }
.seg.wrap { flex-wrap: wrap; overflow: visible; width: 100%; max-width: 100%; }
.set-row.stack { align-items: flex-start; }
.set-row.stack > .set-l { flex: 1 1 100%; }
.set-row.stack > .seg.wrap { flex: 1 1 100%; }
.seg.wrap button { flex: 1 1 30%; }
.settings-sheet label.switch { margin: 0; } .settings-sheet label.switch .knob { width: 52px; height: 30px; border-radius: 15px; }
.settings-sheet label.switch .knob::after { width: 22px; height: 22px; top: 3px; left: 3px; } .settings-sheet label.switch input:checked + .knob::after { transform: translateX(22px); }
.settings-sheet label.switch input:checked + .knob { background: #d9dde2; border-color: #fff; } .settings-sheet label.switch input:checked + .knob::after { background: #111; }
.set-note { margin: 6px 0 0; }
@media (max-width: 420px) { .settings-back { padding: 52px 6px 6px; } .seg button { min-width: 44px; padding: 0 9px; font-size: .95rem; } .set-l { font-size: 1rem; } }
/* table text size: Large / XL on top of the (already enlarged) Normal HUD */
body.txt-large #felt .seat .plate, body.txt-large #screen-table .table-info, body.txt-large #felt .center-msg, body.txt-large .lt-label { zoom: 1.15; }
body.txt-xl #felt .seat .plate, body.txt-xl #screen-table .table-info, body.txt-xl #felt .center-msg, body.txt-xl .lt-label { zoom: 1.3; }
body.txt-large #screen-table .timer span { font-size: 1.15rem; } body.txt-xl #screen-table .timer span { font-size: 1.25rem; }
/* animation speed: Fast halves card motion */
body.anim-fast #hand.hand .card { transition-duration: 70ms; }
body.anim-fast .seat.hop .avatar { animation-duration: .18s !important; }

/* ---------- Beer of the Month visuals (v2): crafted SVG vessels (beerart.js), amber + gold on black/chrome ---------- */
.card.beer7 .beerart svg { filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.card.beer7 .beerart { inset: 13% 16% 6%; }
.face-preview.cf-traditional .card.beer7 .beerart { inset: 13% 16% 6%; }
.cf-jumbo .card.beer7 .beerart, .face-preview.cf-jumbo .card.beer7 .beerart { inset: 16% 24% 8%; }
/* a thin gold rule around a member's beer 7, so it reads as special even in the overlapped hand */
.card.beer7 { box-shadow: inset 0 0 0 max(1px, calc(var(--card-w) * .022)) #d9a640, inset 0 0 0 max(2px, calc(var(--card-w) * .04)) #fff8e6; }
#hand.hand .card.beer7.selected { box-shadow: inset 0 0 0 max(1px, calc(var(--card-w) * .022)) #d9a640, 0 0 0 3px #fff, 0 0 0 5px var(--accent), 0 10px 18px rgba(0,0,0,.5); }
/* profile: this month's banner + the four 7s as little framed cards */
.botm-banner { display: flex; align-items: center; gap: 12px; margin: 10px 0 8px; padding: 10px 14px; border-radius: 14px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(246,183,60,.28), rgba(246,183,60,0) 60%), linear-gradient(180deg, #24262b, #101114);
  border: 1px solid #d9a640; box-shadow: inset 0 1px 0 rgba(255,242,194,.35), 0 6px 18px rgba(0,0,0,.45); }
.botm-banner svg { flex: none; filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.botm-banner div { display: flex; flex-direction: column; min-width: 0; }
.botm-banner small { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #e2b34c; }
.botm-banner b { font-family: Georgia, "Times New Roman", serif; font-size: 1.45rem; line-height: 1.15;
  background: linear-gradient(180deg, #fff6d6, #f0c75e 55%, #c48a22); -webkit-background-clip: text; background-clip: text; color: transparent; }
.botm-banner span { font-size: .8rem; color: #c9ced4; }
.botm-preview { gap: 10px; flex-wrap: wrap; }
.botm-preview .bp { position: relative; width: 74px; height: 118px; padding: 4px 4px 14px; border-radius: 8px; background: linear-gradient(180deg, #fffdf6, #f6efdf);
  border: 1px solid #d9a640; box-shadow: inset 0 0 0 2px #fff8e6, 0 6px 14px rgba(0,0,0,.5); color: #111; }
.botm-preview .bp.red { color: #c8102e; }
.fc4 .botm-preview .bp.s-D { color: #1f5fd1; } .fc4 .botm-preview .bp.s-C { color: #138a3e; }
.botm-preview .bp small { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; font: 800 .7rem Georgia, serif; color: inherit; }
@media (max-width: 420px) { .botm-preview .bp { width: calc((100% - 30px) / 4); height: auto; aspect-ratio: 60 / 100; padding-bottom: 14px; } }
/* celebration banner: gold-leaf title, kicker ribbon, warm glow */
.beer-fx::before { content: ""; position: absolute; inset: 0; background: radial-gradient(closest-side at 50% 45%, rgba(246,183,60,.35), rgba(0,0,0,.55) 70%, rgba(0,0,0,.7)); animation: beerGlow .5s ease-out; }
.beer-fx > * { position: relative; }
.beer-kicker { margin-bottom: 4px; padding: 4px 14px; border-radius: 999px; font-size: clamp(11px, 3vw, 14px); font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: #1a1203; background: linear-gradient(180deg, #fff2c2, #e2b34c 50%, #b07a1c); border: 1px solid #fff3c9; box-shadow: 0 4px 14px rgba(0,0,0,.5); animation: beerIn .45s cubic-bezier(.2,1.6,.4,1); }
.beer-title { font-family: Georgia, "Times New Roman", serif; font-weight: 900; letter-spacing: 3px; color: transparent;
  background: linear-gradient(180deg, #fffbe8 0%, #f6d77a 38%, #c98d1f 62%, #f3cf6a 100%); -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: 1.5px #4a2c06; text-shadow: none; filter: drop-shadow(0 4px 0 #6b3f08) drop-shadow(0 10px 24px rgba(0,0,0,.65)); }
.beer-fx[data-minor="1"] .beer-title { background-image: linear-gradient(180deg, #fff3e2 0%, #e9c69a 40%, #8a4a22 65%, #e2b48a 100%); -webkit-text-stroke-color: #2a1206; filter: drop-shadow(0 4px 0 #3a1a0b) drop-shadow(0 10px 24px rgba(0,0,0,.65)); }
.beer-sub { background: linear-gradient(180deg, rgba(36,38,43,.95), rgba(16,17,20,.95)); border: 1px solid #d9a640; color: #f6efdf; padding: 6px 16px; border-radius: 999px; font-size: clamp(13px, 3.6vw, 17px); }
.beer-fly { filter: drop-shadow(0 8px 14px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(246,183,60,.45)); }
.beer-burst i { background: radial-gradient(circle at 35% 35%, #fff, #ffe9a8 40%, #e2a52a); }
@keyframes beerGlow { from { opacity: 0; } to { opacity: 1; } }
/* the badge a beer winner keeps on their avatar */
.beer-badge { top: -12px; right: -18px; padding: 2px; border-radius: 50%; background: radial-gradient(circle, rgba(16,17,20,.95) 60%, rgba(16,17,20,0) 61%);
  box-shadow: 0 0 0 1.5px #d9a640, 0 2px 6px rgba(0,0,0,.6); line-height: 0; }
/* result line */
.beer-line { background: radial-gradient(120% 160% at 0% 50%, rgba(246,183,60,.25), rgba(246,183,60,0) 60%), linear-gradient(180deg, #24262b, #121316); border: 1px solid #d9a640; color: #f6efdf; }
.beer-line b { color: #f0c75e; letter-spacing: .06em; }
.beer-tile b { color: #f0c75e; }
@media (prefers-reduced-motion: reduce) { .beer-fx::before, .beer-kicker { animation: none; } }
/* Trophy presentation: a bottle that rises at the centre, then a small icon in its own slot by the plate.
   The stage is only the centre of the table (no full-screen dim). The icon is position:absolute so plates,
   Bid/Made, slots and the last trick keep their rects. */
#felt .seat { position: relative; }
#beerFx.beer-fx { inset: auto; z-index: 12; width: 240px; height: 260px; background: none; overflow: visible; }
#beerFx.beer-fx::before { content: none; display: none; background: none; animation: none; }
#beerFx .beer-title { font-size: clamp(28px, 7vw, 52px); }
#beerFx .beer-kicker { font-size: 11px; letter-spacing: .12em; }
#beerFx .beer-fly { position: relative; margin-top: 4px; transform: scale(.2) translateY(36px); transition: transform 1.55s cubic-bezier(.16, 1, .3, 1); }
#beerFx.beer-on .beer-fly { transform: scale(1) translateY(0); }
#beerFx .beer-caption { margin-top: 8px; max-width: 100%; padding: 6px 10px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(36,38,43,.96), rgba(16,17,20,.96)); border: 1px solid #d9a640; color: #ffd34d;
  font-weight: 800; font-size: clamp(13px, 3.2vw, 17px); line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
#beerFx[data-minor="1"] .beer-caption { color: #e9c69a; }
#beerEarned { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.beer-shine { position: absolute; inset: -6%; overflow: hidden; pointer-events: none; opacity: 0; }
.beer-shine::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 42%; left: -50%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.9), transparent); transform: skewX(-18deg); }
#beerFx.beer-clink .beer-shine { opacity: 1; }
#beerFx.beer-clink .beer-shine::after { animation: beerShine .45s ease-out forwards; }
@keyframes beerShine { to { left: 140%; } }
#felt .seat > .beer-badge, .kb-seat > .beer-badge, .mh-seat > .beer-badge,
#felt .seat > .bonus-badge, .kb-seat > .bonus-badge, .mh-seat > .bonus-badge {
  position: absolute; top: auto; right: auto; bottom: auto; width: 32px; height: 32px; margin: 0; padding: 1px;
  display: inline-flex; align-items: center; justify-content: center; z-index: 5; pointer-events: auto; cursor: pointer;
  border: 0; line-height: 0; overflow: visible; appearance: none; -webkit-appearance: none; font: inherit; color: inherit;
  animation: none;
}
.beer-mult, .bonus-mult { position: absolute; right: 0; bottom: 0; min-width: 14px; height: 14px; padding: 0 2px; border-radius: 7px;
  background: #ffd34d; color: #3a1d00; font-size: 9px; font-weight: 900; line-height: 14px; letter-spacing: 0; }
.beer-mult[hidden], .bonus-mult[hidden] { display: none; }
.beer-tip, .bonus-tip { display: none; position: absolute; z-index: 8; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  width: max-content; max-width: 200px; padding: 4px 8px; border-radius: 8px; background: #141518; color: #f6efdf;
  border: 1px solid #d9a640; font-size: 12px; font-weight: 700; line-height: 1.3; white-space: normal; text-align: center;
  pointer-events: none; }
.beer-badge:hover .beer-tip, .beer-badge:focus-visible .beer-tip, .beer-badge.tip-on .beer-tip,
.bonus-badge:hover .bonus-tip, .bonus-badge:focus-visible .bonus-tip, .bonus-badge.tip-on .bonus-tip { display: block; }
@media (prefers-reduced-motion: reduce) {
  #beerFx .beer-fly { transform: none; transition: none; }
  #beerFx.beer-clink .beer-shine::after { animation: none; }
}
/* ---------- Auto-play (black + chrome): the toggle in the side column, the 'Auto' seat badge, the unrated note ---------- */
.auto-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  background: #141518; color: var(--ink); border: 1px solid #5a5f66; font: inherit; font-size: .9rem; font-weight: 700; flex: 0 0 auto; }
.auto-toggle[hidden] { display: none; }
.auto-toggle:disabled { opacity: .55; cursor: default; }
.auto-toggle .at-knob { width: 30px; height: 16px; border-radius: 999px; background: #2c2e33; border: 1px solid #70757c; position: relative; flex: 0 0 auto; }
.auto-toggle .at-knob::after { content: ''; position: absolute; top: 1px; left: 1px; width: 12px; height: 12px; border-radius: 50%; background: #9aa0a8; transition: left .15s; }
.auto-toggle.on { border-color: #d9dde2; box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset; }
.auto-toggle.on .at-knob { background: var(--chrome); border-color: #fff; }
.auto-toggle.on .at-knob::after { left: 15px; background: #111; }
.auto-toggle .at-state { margin-left: auto; font-size: .8rem; color: var(--muted); font-weight: 600; }
.auto-toggle.on .at-state { color: #fff; }
.auto-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 6px; background: var(--chrome); color: #111; font-weight: 800; font-size: 11px; letter-spacing: .03em; line-height: 1.5; vertical-align: 2px; }
.seat.auto .avatar { box-shadow: 0 0 0 2px #c4c8ce; }
.auto-note { margin: 0 0 8px; padding: 6px 10px; border: 1px solid #5a5f66; border-radius: 10px; background: #141518; font-size: .85rem; color: var(--ink); }
.auto-note .auto-tag { margin: 0 6px 0 0; }
/* ---------- Turn indicator: a translucent light grey box behind the WHOLE active seat (replaces the old gold glow) ---------- */
#felt { position: relative; isolation: isolate; }
.turn-box { position: absolute; z-index: -1; pointer-events: none; border-radius: 14px; background: rgba(220,220,220,.18); border: 1px solid rgba(220,220,220,.45); box-sizing: border-box; }
.turn-box[hidden] { display: none; }
/* ---------- Last trick, bigger (≈1.7×): seat letter on each card, chrome ring on the card that took the trick ---------- */
.cp { position: relative; }
.cp .c b { font-size: 1.05em; } .cp .c i { font-size: 1em; }
.cp .cp-s { position: absolute; right: -.35em; bottom: -.2em; font: 800 .5em/1 system-ui, sans-serif; color: #111; background: var(--chrome); border-radius: .5em; padding: .12em .32em; box-shadow: 0 1px 2px rgba(0,0,0,.6); }
.cp.win .c { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #9aa0a8, 0 2px 6px rgba(0,0,0,.6); }
.cp.win.led .c { box-shadow: 0 0 0 2px var(--gold), 0 0 0 4px #e9ecef, 0 0 10px rgba(255,212,0,.6); }
.lt-label .lt-win { display: block; color: #fff; font-weight: 800; font-size: .95em; }
/* ---------- 500 games: running score on the felt (black + chrome); no partner swipe / mark at a 500 table ---------- */
.g5-score { position: absolute; top: 6px; left: 8px; z-index: 2; display: grid; gap: 1px; padding: 4px 8px 5px; border-radius: 10px; min-width: 6.4em;
  background: linear-gradient(180deg, rgba(40,42,47,.92), rgba(12,13,15,.94)); border: 1px solid #9aa0a8; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 3px 10px rgba(0,0,0,.5);
  font-size: clamp(12px, calc(var(--felt-h) * .032), 17px); line-height: 1.15; pointer-events: none; }
.g5s-row { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "l n" "b b"; column-gap: 8px; align-items: baseline; }
.g5s-row + .g5s-row { border-top: 1px solid rgba(255,255,255,.14); padding-top: 2px; }
.g5s-l { grid-area: l; color: #c9ced4; font-weight: 700; font-size: .85em; text-transform: uppercase; letter-spacing: .04em; }
.g5s-n { grid-area: n; justify-self: end; font-size: 1.35em; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
.g5s-b { grid-area: b; color: #a9b0b8; font-size: .78em; }
.g5s-to { color: #8f969e; font-size: .72em; text-align: right; }
#screen-table[data-mode="g500"] #swipeBar { display: none !important; }
/* flags removed from the UI: the Sit & Go nav button keeps its text label on every width (it has no icon now).
   The three game formats sit in .mode-seg, so this label never wraps onto a second line. */
#navTours .lbl { display: inline !important; font-weight: 700; white-space: nowrap; }
/* ---------- Team colours: N–S ice blue, E–W amber (contrast ≥ 7:1 on the black felt, ≥ 4.5:1 on the grey turn box) ---------- */
:root { --ns: #5AB4FF; --ew: #FFB547; }
.team-ns { color: var(--ns) !important; } .team-ew { color: var(--ew) !important; }
#felt .seat.team-ns .name, #felt .seat.team-ew .name { background: none !important; -webkit-text-fill-color: currentColor !important; text-shadow: 0 1px 2px rgba(0,0,0,.85); }
#felt .seat.team-ns .name { color: var(--ns) !important; } #felt .seat.team-ew .name { color: var(--ew) !important; }
#felt .seat.team-ns .bidinfo, #felt .seat.team-ew .bidinfo { color: #f1f3f5 !important; } /* Bid / Made stay neutral */
.g5s-row.team-ns .g5s-n, .g5s-row.team-ns .g5s-l, .g5s-row.team-ns .g5s-b { color: var(--ns) !important; }
.g5s-row.team-ew .g5s-n, .g5s-row.team-ew .g5s-l, .g5s-row.team-ew .g5s-b { color: var(--ew) !important; }
.g5s-b { opacity: .85; }
tr.team-row td { color: #f1f3f5 !important; } /* bids / made / contract neutral; label + total coloured */
tr.team-row.team-ns th, tr.team-row.team-ns td:last-child { color: var(--ns) !important; }
tr.team-row.team-ew th, tr.team-row.team-ew td:last-child { color: var(--ew) !important; }
.rp-score tr.team-ns td, .rp-score tr.team-ew td { color: #f1f3f5 !important; }
.rp-score tr.team-ns th, .rp-score tr.team-ns td:nth-child(4) b, .rp-score tr.team-ns td:nth-child(5) { color: var(--ns) !important; }
.rp-score tr.team-ew th, .rp-score tr.team-ew td:nth-child(4) b, .rp-score tr.team-ew td:nth-child(5) { color: var(--ew) !important; }
/* bigger last trick, compact diamond: W/E sit half a card lower than N, S half a card lower than W/E,
   so the compass is two card-heights tall instead of three (keeps it clear of the side plates) */
#lastTrick .compass { grid-template-rows: repeat(4, 1.2em); grid-template-areas: none; row-gap: 0; column-gap: .2em; }
#lastTrick .cp { margin: 0; min-height: 0; }
#lastTrick .cp-2 { grid-area: 1 / 2 / 3 / 3; } #lastTrick .cp-1 { grid-area: 2 / 1 / 4 / 2; }
#lastTrick .cp-3 { grid-area: 2 / 3 / 4 / 4; } #lastTrick .cp-0 { grid-area: 3 / 2 / 5 / 3; }
#lastTrick .cp-mid { display: none; }
#lastTrick .cp .cp-s { bottom: .05em; }
#lastTrick .lt-label { margin-bottom: .15em; line-height: 1.15; }
#lastTrick { padding-top: 2px; }
#lastTrick .lt-label { line-height: 1.05; margin-bottom: .08em; }
#lastTrick .compass { grid-template-rows: repeat(4, 1.18em); }
@media (max-width: 480px) { /* narrow phones: slimmer cards (same 20px+ rank/suit) so the diamond stays left of my seat plate */
  #lastTrick .compass { column-gap: .08em; }
  #lastTrick .cp .c { width: 1.62em; }
  #lastTrick { padding-left: 3px; padding-right: 3px; }
}
@media (max-width: 480px) { /* phones: a slim score chip that fits left of the partner's plate */
  .g5-score { left: 3px; top: 4px; min-width: 0; padding: 3px 5px 4px; font-size: 11px; border-radius: 8px; }
  .g5s-row { column-gap: 4px; } .g5s-l { font-size: .78em; letter-spacing: 0; } .g5s-n { font-size: 1.25em; }
}
/* ---------- Dealer button (from g500-feedback, made bigger ≈1.6×): a chrome "D" disc lying on the felt next to the
 * dealer's plate (app.js placeDealerBtn), black ring + white outline; slides to the next dealer as the deal rotates. ---------- */
.dealer-btn { --db: calc(48px * var(--seat-zoom, 1)); position: absolute; left: 0; top: 0; z-index: 4; width: var(--db); height: var(--db); border-radius: 50%;
  display: grid; place-items: center; pointer-events: none; user-select: none;
  font: 900 calc(var(--db) * .52)/1 Georgia, "Times New Roman", serif; color: #0b0b0d; letter-spacing: 0;
  background: radial-gradient(circle at 34% 28%, #ffffff 0%, #eef0f3 22%, #b9bec5 58%, #8a9099 80%, #d9dce0 100%);
  border: 2px solid #0b0b0d;
  box-shadow: 0 0 0 2px #f4f6f8, 0 0 0 3px rgba(0,0,0,.85), 0 0 14px rgba(255,255,255,.3), 0 4px 10px rgba(0,0,0,.75), inset 0 -2px 3px rgba(0,0,0,.25), inset 0 0 0 calc(var(--db) * .12) rgba(255,255,255,.18);
  transition: transform .65s cubic-bezier(.3, .9, .3, 1); will-change: transform; }
.dealer-btn[hidden] { display: none; }
.dealer-btn.placing { transition: none; }
#felt.compact .dealer-btn { --db: 40px; }
@media (max-width: 480px) { .dealer-btn { --db: 38px; } }
@media (prefers-reduced-motion: reduce) { .dealer-btn { transition: none; } }
/* ---------- felt watermark: the Swipe arrows only (no spade), faint white so it reads on black and chrome ---------- */
.felt-mark { position: absolute; left: 50%; top: 46%; width: min(44%, 380px); aspect-ratio: 379 / 260; transform: translate(-50%, -50%);
  background: url("assets/felt-arrows.webp") center / contain no-repeat; opacity: .075; z-index: -1; pointer-events: none; }
/* ---------- Seat boxes: ONE shared look for every table (duplicate, 500, Sit & Go). User, 4:18 PM ET 19 Oct: names cut
 * to 40% of their old size (old: 1.3rem × --seat-zoom), the Bid / Made boxes to 60% (old: 1.2rem × --seat-zoom, number
 * badges 1.2em of that), with an 11 px floor on both so 375 px phones stay readable. The plates no longer zoom with the
 * table (only avatars do); sizes come from --seat-zoom in calc() so nothing overflows its box. Side seats (W / E) stack
 * Bid over Made so their boxes stay narrow; N / S keep one line "Bid 2 · Made 1". ---------- */
#screen-table { --seat-name: max(11px, calc(8.32px * var(--seat-zoom, 1))); --seat-bid: max(11px, calc(11.52px * var(--seat-zoom, 1))); }
#felt:not(.compact) .seat { zoom: 1; }
#felt:not(.compact) .seat .avatar { zoom: var(--seat-zoom, 1); }
#felt .seat { min-width: 0; max-width: 100%; }
#screen-table #felt .seat .plate { max-width: 100%; min-width: 0; box-sizing: border-box; gap: 1px;
  padding: max(2px, calc(2.4px * var(--seat-zoom, 1))) max(4px, calc(6px * var(--seat-zoom, 1))); border-radius: 8px; border-width: 1.5px; }
#screen-table #felt .seat .name { font-size: var(--seat-name); line-height: 1.15; }
#screen-table #felt .seat .bidinfo { font-size: var(--seat-bid); line-height: 1.2; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  column-gap: .25em; row-gap: 1px; max-width: 100%; min-width: 0; white-space: nowrap; }
#screen-table #felt .seat .bidinfo :is(.b, .w) { font-size: 1.2em; min-width: 1.15em; padding: 0 .18em; }
#screen-table #felt .seat .bidinfo .nil { font-size: 1em; }
#screen-table #felt .seat .bidinfo .sep { margin: 0; }
#screen-table #felt :is(.pos-1, .pos-3) .bidinfo { flex-direction: column; row-gap: 2px; }
#screen-table #felt :is(.pos-1, .pos-3) .bidinfo .sep { display: none; }
#screen-table #felt .pos-0 .plate { column-gap: .5em; }
#screen-table #felt .seat .nameRow :is(.bot-tag, .auto-tag) { font-size: 10px; padding: 0 4px; margin-left: 4px; }
.dealer-btn { --db: clamp(36px, calc(44px * var(--seat-zoom, 1)), 56px); }
#felt.compact .dealer-btn { --db: 36px; }
@media (max-width: 480px) { .dealer-btn { --db: 36px; } }
/* Rankings / Stats hub: the "🤖 bot" (and demo / 🔒) marker stays inline after the name, on one line; the name ellipsizes first */
table.ranks td.who .who-line { display: flex; flex-direction: row; align-items: center; gap: 5px; min-width: 0; max-width: 100%; white-space: nowrap; }
table.ranks td.who .who-line > b { min-width: 0; flex: 0 1 auto; }
table.ranks td.who .who-line > span { display: inline-block; flex: none; white-space: nowrap; }
/* narrow phones (360–390 px, wider fonts in Firefox): the top bar never pushes the page sideways; the name chip shrinks
   with an ellipsis instead of running off the right edge */
@media (max-width: 480px) {
  .topbar .nav { min-width: 0; flex: 0 1 auto; gap: 4px; }
  .topbar .nav > * { flex: 0 0 auto; }
  .topbar #profileBtn { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .topbar #profileBtn .lbl { display: inline-block; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
}
/* portrait table: the closed side panel is an off-canvas drawer (fixed, translated right); some engines (WebKit) count it
   toward the page width, which lets the whole table slide sideways on a swipe. Clip it. */
html:has(> body.at-table .table-layout:not(.land)), body.at-table:has(.table-layout:not(.land)) { overflow-x: clip; }
/* ---------- Header logo (user, 6:32 PM ET 19 Oct): about 3x larger (40 → 120 px) and prominent, in the TOP RIGHT on every
 * screen; the nav sits to its left. Tables scale it with the window height (11vh, 64–120 px) so the felt keeps its room.
 * Phones: a 64 px logo with the nav wrapping into two rows beside it (no sideways scroll). --hdr-h (app.js) is the header's
 * live height, for the things pinned under it. ---------- */
.topbar { justify-content: flex-end; gap: 14px; padding: 8px 16px; }
.topbar .brand { order: 2; flex: none; }
.topbar .nav { order: 1; flex: 0 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
.brand-logo { height: 120px; width: auto; filter: drop-shadow(0 0 10px rgba(255,255,255,.16)) drop-shadow(0 6px 14px rgba(0,0,0,.7)); }
body.at-table .brand-logo { height: clamp(64px, 11vh, 120px); }
@media (max-height: 760px) { body.at-table .brand-logo { height: 60px; } } /* 1280×720-class laptops: the felt needs the height */
body.at-table .topbar { padding-top: 4px; padding-bottom: 4px; }
@media (max-width: 760px) { .brand-logo, body.at-table .brand-logo { height: 84px; } .topbar { gap: 10px; padding: 6px 10px; } }
@media (max-width: 480px) {
  .brand-logo, body.at-table .brand-logo { height: 64px; }
  .topbar { gap: 6px; padding: 4px 8px; }
  .topbar .nav { gap: 5px; row-gap: 5px; }
  .topbar .chip { max-width: 30vw; }
}
@media (max-height: 520px) and (orientation: landscape) { body.at-table .brand-logo { height: 40px; } }
.toasts { top: calc(var(--hdr-h, 56px) + 2px); }
.conn { top: var(--hdr-h, 48px); }
.settings-back { padding-top: var(--hdr-h, 56px); }
.settings-sheet { max-height: calc(100dvh - var(--hdr-h, 56px) - 10px); }
/* felt watermark: a touch stronger and larger so the Swipe arrows read on every table */
.felt-mark { width: min(50%, 520px); opacity: .13; }
/* ---------- Partner swipe (user, 6:32 PM ET 19 Oct): only ON the partner (felt seat box / partner card), with a live cue ---------- */
#felt .seat.swipeable { position: relative; user-select: none; -webkit-user-select: none; }
#felt .seat.swipeable :is(.plate, .avatar) { touch-action: none; cursor: grab; }
.sw-drag { translate: var(--sw-x, 0) var(--sw-y, 0); rotate: var(--sw-r, 0deg); transition: none !important; cursor: grabbing !important; z-index: 20; }
.sw-back { transition: translate .2s ease-out, rotate .2s ease-out; }
#felt .seat.sw-drag .plate { box-shadow: 0 0 0 2px var(--sw-c, #fff), 0 0 18px var(--sw-c, #fff); }
#felt .seat.sw-drag[data-swdir="keep"] { --sw-c: rgba(94, 224, 138, .55); --sw-h: #5ee08a; }
#felt .seat.sw-drag[data-swdir="leave"] { --sw-c: rgba(255, 107, 107, .55); --sw-h: #ff6b6b; }
#felt .seat.sw-armed[data-swdir="keep"] { --sw-c: #5ee08a; }
#felt .seat.sw-armed[data-swdir="leave"] { --sw-c: #ff6b6b; }
#felt .seat .sw-hint { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 4px); padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 800; color: #0d0e10; background: var(--sw-h, #fff); box-shadow: 0 2px 8px rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: opacity .12s; }
#felt .seat.sw-drag .sw-hint { opacity: 1; }
#felt .seat.sw-drag[data-swdir="keep"] .sw-hint::after { content: "♥ Keep"; }
#felt .seat.sw-drag[data-swdir="leave"] .sw-hint::after { content: "✕ Leave"; }
.sw-card.sw-drag, .partner-card.sw-drag { opacity: 1; } /* dragged swipe cards stay opaque */
.sw-card.sw-armed[data-swdir="keep"], .partner-card.sw-armed[data-swdir="keep"] { box-shadow: 0 0 0 2px #5ee08a; border-radius: 12px; }
.sw-card.sw-armed[data-swdir="leave"], .partner-card.sw-armed[data-swdir="leave"] { box-shadow: 0 0 0 2px #ff6b6b; border-radius: 12px; }

/* ---------- design pass (Oct 2026): alignment / centring fixes, layout only ---------- */
/* a table row marked "me" (field table on the board result) stays a table row (the generic .me flex rule broke its columns) */
table tr.me { display: table-row; }
/* 500 table with an empty side column (playing / between hands): the felt sits centred on the page */
/* status text in the middle of the felt: balanced lines (no lone word), hidden under a result card */
#felt .center-msg { text-wrap: balance; }
body:has(#resultOverlay:not([hidden])) #felt .center-msg, body:has(#g500Overlay:not([hidden])) #felt .center-msg { visibility: hidden; }
/* side seats on phones: the BOT tag drops under the name instead of cutting the name short ("Bast…") */
.table-layout:not(.land) #felt :is(.pos-1, .pos-3) .nameRow { flex-wrap: wrap; justify-content: center; row-gap: 1px; }
/* header line over the table: a score / team never breaks in the middle ("(0 / bags)") */
#tableInfo > span { white-space: nowrap; }
/* sign-in card: as tall as its own content next to the longer Create account card (no big empty box) */
#screen-auth .cols { align-items: start; }
/* 500 hand scoreboard on small phones: column heads and the running total stay on one line ("379 – 318") */
#g500Overlay .g5-hands th, #g500Overlay .g5-hands td:last-child { white-space: nowrap; }
@media (max-width: 380px) { #g500Overlay .g5-hands { font-size: 10px; } #g500Overlay .g5-hands td, #g500Overlay .g5-hands th { padding: 1px; } }

/* ---------- No legal-card hints (user, 20 Oct 6:16 PM ET) ----------
 * On your turn the cards are all tappable and all look the same. An illegal tap: the card shakes (moves only, never fades)
 * and a short toast says why. The only "whose turn" cue is the seat's NAME BOX (below). */
#hand.hand.my-turn .card { cursor: pointer; }
#hand.hand .card.shake { animation: cardShake .32s ease-in-out; }
@keyframes cardShake { 0%, 100% { translate: 0 0; } 20% { translate: -7px 0; } 40% { translate: 6px 0; } 60% { translate: -4px 0; } 80% { translate: 3px 0; } }
@media (prefers-reduced-motion: reduce) { #hand.hand .card.shake { animation: none !important; } }
/* Turn indicator = the seat's name box only: bright chrome ring + glow (clear on a 412 px phone), plus the grey box hugging it */
#screen-table #felt .seat.turn .plate { border-color: #f4f6f8; background: #2b2e34; box-shadow: 0 0 0 2px rgba(244,246,248,.35), 0 0 16px rgba(244,246,248,.55); animation: turnPulse 1.6s ease-in-out infinite; }
@keyframes turnPulse { 50% { box-shadow: 0 0 0 3px rgba(244,246,248,.6), 0 0 22px rgba(244,246,248,.8); } }
@media (prefers-reduced-motion: reduce) { #screen-table #felt .seat.turn .plate { animation: none; } }
/* "Partner" tag on the seat straight across from you (felt) and in hand replays; team colour of your side */
.ptag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: .62rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; line-height: 1.4; vertical-align: middle; white-space: nowrap; background: #1d2024; border: 1px solid currentColor; }
.team-ns .ptag { color: #5AB4FF; } .team-ew .ptag { color: #FFB547; }
.mh-ns .ptag { color: #5AB4FF; } .mh-ew .ptag { color: #FFB547; }
.ptag.you { color: #dfe3e8; }

/* ---------- Navigation + mobile pass (user, 20 Oct 6:16 PM ET) ----------
 * ‹ Back on every sub-screen (top-left of the bar; the logo stays where it is), and on phones the nav folds into a ☰ menu
 * so the bar is ONE uncrowded row: ‹ Back · Feedback · Settings (table) · ☰ · logo. Every tap target ≥ 44 px.
 * Notched phones: the bar, screens and sheets respect the safe-area insets. */
.backbtn, .menubtn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 44px; min-height: 44px; padding: 4px 14px;
  border-radius: 999px; border: 1px solid #9aa0a8; background: linear-gradient(180deg, #2a2d33, #15171b); color: #f1f3f5; font-weight: 800; font-size: 1rem; line-height: 1; flex: none; }
.backbtn { order: 0; margin-right: auto; font-size: 1.05rem; }
.backbtn > span[aria-hidden], .backbtn { letter-spacing: 0; }
.backbtn .lbl { display: inline !important; font-size: .9rem; }
.backbtn:focus-visible, .menubtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.menubtn { display: none; }
.navmenu { display: contents; }
.topbar { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); padding-top: max(4px, env(safe-area-inset-top)); }
.navbtn, .topbar .fbbtn, .topbar .gearbtn { min-height: 44px; min-width: 44px; }
.topbar .nav { align-items: center; }
.screen { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
.site-foot { padding-bottom: env(safe-area-inset-bottom); }
/* small buttons inside screens (pagers, ‹ All hands, Watch list…) are still ≥ 44 px tall on touch screens */
@media (pointer: coarse) {
  .ghost.small, .pager button, .mh-steps button, .seg button, .rk-tab, .kb-follow button, #kbRotate, #kbBack, .kb-watch, .fb-types button { min-height: 44px; }
  .mh-steps button { min-width: 44px; }
}
/* tap: no 300 ms delay, no grey flash, anywhere */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button, a, [role="button"], input, select, label { touch-action: manipulation; }
@media (max-width: 600px), (max-height: 520px) and (orientation: landscape) {
  .menubtn { display: inline-flex; padding: 4px 12px; }
  .menubtn .lbl { display: none; }
  .topbar { flex-wrap: nowrap; }
  .topbar .nav { flex-wrap: nowrap; gap: 6px; }
  .backbtn { padding: 4px 12px; }
  .navmenu { display: none; position: fixed; z-index: 45; top: calc(var(--hdr-h, 72px) + 4px); right: max(8px, env(safe-area-inset-right));
    flex-direction: column; align-items: stretch; gap: 6px; width: min(260px, calc(100vw - 16px)); max-height: calc(100dvh - var(--hdr-h, 72px) - 16px); overflow-y: auto;
    padding: 10px; border-radius: 16px; border: 1px solid #9aa0a8; background: linear-gradient(180deg, #24262b, #0f1013); box-shadow: 0 14px 40px rgba(0,0,0,.7); }
  .navmenu.open { display: flex; }
  .navmenu .navbtn, .topbar .navmenu #profileBtn { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; max-width: none; min-height: 48px; padding: 8px 14px; font-size: 1rem; text-align: left; }
  .navmenu .navbtn .lbl, .topbar .navmenu #profileBtn .lbl, .navmenu #navTours .lbl { display: inline !important; font-size: 1rem; max-width: none; white-space: nowrap; }
  body.has-back .topbar .fbbtn { padding: 4px 10px; }
  body.has-back .topbar .fbbtn .lbl { display: none !important; }
}
/* Game formats as one segmented control (SwipeSpades, 500, Sit & Go). The other places sit beside it on desktop
   and under it in the phone menu, with a divider between the two groups. The three labels stay on one line. */
.mode-seg { display: inline-flex; flex-flow: row nowrap; align-items: stretch; flex: none; width: max-content; max-width: 100%;
  border: 1px solid #9aa0a8; border-radius: 999px; overflow: hidden; background: #141518; }
.mode-seg .navbtn { width: auto; flex: 0 0 auto; justify-content: center; border: 0; border-radius: 0; border-left: 1px solid #4a4f56;
  box-shadow: none; padding: 0 12px; min-height: 44px; white-space: nowrap; background: transparent; }
.mode-seg .navbtn:first-child { border-left: 0; }
.mode-seg .navbtn.on { background: var(--chrome); color: #111; border-color: #4a4f56; box-shadow: none; }
.nav-rest { display: flex; flex-flow: row wrap; align-items: center; gap: 6px; margin-left: 8px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.28); }
@media (min-width: 1100px) { .topbar .nav { flex-wrap: nowrap; } .nav-rest { flex-wrap: nowrap; } }
@media (max-width: 600px), (max-height: 520px) and (orientation: landscape) {
  .navmenu { width: min(340px, calc(100vw - 16px)); }
  .navmenu .mode-seg { display: flex; width: 100%; }
  .navmenu .mode-seg .navbtn { flex: 1 1 auto; width: auto !important; max-width: none; min-width: max-content; min-height: 44px;
    padding: 0 8px; font-size: 13px; justify-content: center; text-align: center; gap: 0; }
  .navmenu .mode-seg .navbtn .lbl,
  .navmenu .mode-seg #navPlay .lbl,
  .navmenu .mode-seg #nav500 .lbl,
  .navmenu .mode-seg #navTours .lbl { display: inline !important; font-size: 13px !important; font-weight: 800; max-width: none !important;
    white-space: nowrap !important; line-height: 1.1; }
  .nav-rest { flex-direction: column; align-items: stretch; gap: 6px; width: 100%; margin: 8px 0 0; padding: 8px 0 0; border-left: 0;
    border-top: 1px solid rgba(255,255,255,.28); }
}
/* landscape phones: a short bar (the felt needs the height) */
@media (max-height: 520px) and (orientation: landscape) {
  .brand-logo, body.at-table .brand-logo { height: 44px; }
  .topbar { padding-top: max(2px, env(safe-area-inset-top)); padding-bottom: 2px; }
}
/* portrait phones: the bid box fits under the felt without scrolling (bids stay big: ≥ 44 px buttons, large numbers) */
@media (max-width: 600px) and (orientation: portrait) {
  .table-layout:not(.land) .bid-dock { padding: 6px 8px; }
  .table-layout:not(.land) .bid-dock h2 { font-size: 1.1rem; margin: 0; }
  .table-layout:not(.land) .bid-dock .bid-hint { font-size: .85rem; margin: 0 0 4px; }
  .table-layout:not(.land) .bid-dock .bid-grid button { min-height: 44px; padding: 4px 0; }
  .table-layout:not(.land) .bid-dock .primary.wide { min-height: 44px; padding: 6px; margin-bottom: 0; }
}
@media (max-width: 600px) and (max-height: 800px) and (orientation: portrait) { .table-layout:not(.land) .bid-dock .bid-help { display: none; } }

/* ---------- Settings: Card spacing − / value / + / Reset ---------- */
.spacer-ctl { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.spacer-ctl button { min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: 12px; border: 1px solid #6b717a; background: linear-gradient(180deg, #34373d, #1b1c20);
  color: #f1f3f5; font-weight: 800; font-size: 1.25rem; line-height: 1; cursor: pointer; touch-action: manipulation; }
.spacer-ctl .sp-reset { font-size: .85rem; padding: 0 9px; }
.spacer-ctl button:disabled { color: #7d848c; border-color: #464b52; cursor: default; } /* a control, not a card */
.spacer-ctl button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.spacer-ctl output { min-width: 4.2em; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 400px) { .spacer-ctl output { min-width: 3.4em; font-size: .9rem; } .spacer-ctl .sp-reset { padding: 0 6px; } }

/* ---------- seat Bid / Made: ~1.35× bigger, bold, high contrast (chrome number badges stay) ---------- */
#screen-table { --seat-bid: max(14px, calc(15.5px * var(--seat-zoom, 1))); }
#screen-table #felt .seat .bidinfo { font-weight: 800; color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.85); }
#screen-table #felt .seat .bidinfo :is(.b, .w) { font-size: 1.22em; font-weight: 900; text-shadow: none; }
#screen-table #felt .seat .bidinfo .wait { color: #d5d9de; }
@media (max-width: 420px) { #screen-table { --seat-bid: 14px; } /* my plate may wrap Bid / Made: no dangling dot, a wider gap instead */
  #screen-table #felt .pos-0 .bidinfo { column-gap: .55em; } #screen-table #felt .pos-0 .bidinfo .sep { display: none; } }
@media (max-height: 540px) and (orientation: landscape) { #screen-table { --seat-bid: 13.5px; } }

/* ---------- Last trick: cropped cards (top ≈ 70 % of each card: rank + suit index and part of the big pip), drawn
   ~1.15× bigger in a box no taller than before. Cropped by overflow only: the cards stay solid white (HARD RULE). */
#lastTrick .compass { font-size: 1.15em; grid-template-rows: repeat(4, .93em); row-gap: 2px; }
#lastTrick .cp { align-self: start; height: 1.86em; padding: 4px 4px 0; margin: -4px -4px 0; overflow: hidden; box-sizing: content-box; place-items: start center; }
#lastTrick .cp .c { position: relative; display: block; flex: none; height: 2.75em; border-radius: .25em; }
#lastTrick .cp .c b { position: absolute; left: .1em; top: .07em; min-width: .9em; text-align: center; font-size: 1.12em; line-height: 1; }
#lastTrick .cp .c i { position: absolute; left: .1em; top: 1.08em; min-width: 1.06em; text-align: center; font-size: .95em; line-height: 1; }
#lastTrick .cp .c::after { content: attr(data-s); position: absolute; right: .03em; top: 1em; font-size: 1.15em; line-height: 1; } /* the big pip, cut by the crop (em = its own size) */
@media (max-width: 480px) { #lastTrick .cp .c::after { display: none; } } /* slim phone cards: the index fills the crop */
#lastTrick .cp .cp-s { top: calc(4px + .08em); right: calc(4px + .08em); bottom: auto; font-size: .46em; }

/* ---------- phone landscape (#felt.phl, height ≤ 540): a clean cross on a full-width felt ----------
   partner top centre, opponents left / right at mid-height, you bottom centre just above your hand, the trick a small
   cross in the middle, your hand the full width of the bottom row; the last trick is a compact chip in the top-left
   corner (its own grid cell, so it never covers the hand, the trick or a seat) and a tap shows it bigger for a moment */
#screen-table #felt.phl { grid-template-columns: minmax(0, 1fr) minmax(calc(var(--trick-w) * 3.7), max-content) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: ". top ." "left trick right" "lt bottom ." "hand hand hand"; gap: 2px 8px; padding: 4px 8px; }
#screen-table #felt.phl .pos-2 { grid-area: top; justify-self: center; align-self: start; }
#screen-table #felt.phl .pos-1 { grid-area: left; justify-self: center; align-self: center; }
#screen-table #felt.phl .pos-3 { grid-area: right; justify-self: center; align-self: center; }
#screen-table #felt.phl .pos-0 { grid-area: bottom; justify-self: center; transform: none !important; }
#screen-table #felt.phl .trick { grid-area: trick; align-self: center; justify-self: center; width: calc(var(--trick-w) * 3.7); height: min(100%, calc(var(--trick-w) * 1.4 * 2.4)); }
#screen-table #felt.phl #hand.hand { grid-area: hand; }
#screen-table #felt.phl .last-trick { grid-area: lt; align-self: end; justify-self: start; position: relative; z-index: 4; font-size: calc(var(--lt-fs) * .78 * var(--lt-k, 1));
  padding: 3px 4px 4px; cursor: pointer; transform-origin: 0 100%; transition: transform .15s ease; background: #15171a; }
#screen-table #felt.phl .last-trick.lt-open { transform: scale(1.7); z-index: 8; box-shadow: 0 6px 18px rgba(0,0,0,.7); }
#screen-table #felt.phl #lastTrick .lt-label { display: none; }
#screen-table #felt.phl #lastTrick .compass { grid-template-columns: repeat(4, auto); grid-template-rows: auto; column-gap: .14em; row-gap: 0; }
#screen-table #felt.phl #lastTrick .cp-1 { grid-area: 1 / 1; } #screen-table #felt.phl #lastTrick .cp-2 { grid-area: 1 / 2; }
#screen-table #felt.phl #lastTrick .cp-3 { grid-area: 1 / 3; } #screen-table #felt.phl #lastTrick .cp-0 { grid-area: 1 / 4; }
#screen-table #felt.phl #lastTrick .cp .cp-s { font-size: .56em; }
#screen-table #felt.phl .seat .plate { padding: 2px 7px; }
@media (prefers-reduced-motion: reduce) { #screen-table #felt.phl .last-trick { transition: none; } }

/* time bank (Oct 21 2026): a small '⏱ 4:00' in my own seat box; amber while it drains, and the turn countdown goes amber too */
#felt .seat .plate .tbank { display: inline-block; margin-left: 6px; font: 700 .72em/1 system-ui, sans-serif; color: #c9ced6; letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
#felt .seat .plate .tbank.draining { color: #FFB547; }
.timer.bank .bar { background: linear-gradient(180deg, #ffc56b, #d98a10); }
.timer.bank span { color: #fff; }
.kb-bank { margin-left: 4px; font-size: .78em; color: #c9ced6; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kb-bank.draining { color: #FFB547; }
/* DoD partner-name field + the invite card (Accept / Decline, 60 s) */
.pard-field { display: flex; flex-direction: column; gap: 4px; margin: 10px auto 4px; max-width: 360px; width: 100%; }
.pard-field label { font-size: 13px; font-weight: 600; }
.pard-field input { min-height: 44px; border-radius: 10px; padding: 0 12px; font-size: 16px; border: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.25); color: inherit; }
.pard-field input:focus { outline: 2px solid #5AB4FF; outline-offset: 1px; }
.pard-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pard-invite { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(5,10,20,.72); }
.pard-invite[hidden] { display: none; }
.pi-card { background: #16202e; border: 1px solid rgba(90,180,255,.45); border-radius: 18px; padding: 22px 22px 18px; width: min(92vw, 360px); text-align: center; box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.pi-title { font-size: 18px; margin-bottom: 6px; } .pi-title b { color: #5AB4FF; }
.pi-btns { display: flex; gap: 10px; margin-top: 16px; } .pi-btns button { flex: 1; min-height: 46px; }

/* Oct 21 2026: the table's right column is scores only, shown in full in landscape (no collapse tab there); BRB moved
   to the end-of-hand card; bigger, easier-to-read Bid / Made boxes on all four seat boxes */
.swp-brb { padding: 8px 12px; }
.swp-brb h3 { font-size: .95rem; margin-bottom: 4px; }
.swp-brb .rp-note { font-size: .85rem; margin-top: 2px; }
.swp-brb .rp-brb-min { margin-top: 6px; } .swp-brb .rp-brb-min button { padding: 7px 0; font-size: .95rem; }
#screen-table { --seat-bid: clamp(16px, calc(17.5px * var(--seat-zoom, 1)), 22px); }
#screen-table #felt .seat .bidinfo :is(.b, .w) { font-size: 1.36em; min-width: 1.3em; padding: .02em .24em; line-height: 1.12; border-radius: .26em; }
@media (max-width: 420px) { #screen-table { --seat-bid: 15px; } #screen-table #felt .seat .bidinfo :is(.b, .w) { font-size: 1.26em; padding: .02em .18em; } }
@media (max-height: 540px) and (orientation: landscape) { #screen-table { --seat-bid: 15px; } }
@media (max-height: 400px) and (orientation: landscape) { #screen-table { --seat-bid: 13.5px; } body.txt-xl #felt.phl .seat .plate, body.txt-large #felt.phl .seat .plate { zoom: .9; } #felt.phl .seat .plate .tbank { font-size: calc(var(--seat-bid) * .9) !important; } }
/* time bank on every seat box, sized with the bigger Bid / Made (Oct 21 2026) */
#screen-table #felt .seat .plate .tbank { font: 800 calc(var(--seat-bid) * 1.05)/1.1 system-ui, sans-serif; margin-left: 0; padding: .06em .3em; border-radius: .3em;
  background: #2a2d33; border: 1px solid #6c737c; color: #e6e9ed; }
#screen-table #felt .seat .plate .tbank.draining { color: #111; background: #FFB547; border-color: #FFB547; }
.timer.bank span { font-weight: 800; }
@media (min-width: 421px) { #screen-table #felt .pos-0 .bidinfo { flex-wrap: nowrap; } }
/* ---------- Scores button + slide-over (Oct 21 2026 5:22 AM ET): no right column, the felt takes the full width ---------- */
#screen-table .table-info { max-width: var(--felt-w); align-items: center; }
.scores-btn { position: relative; margin-left: auto; padding: 4px 12px; border-radius: 999px; border: 1px solid #9aa0a8; background: linear-gradient(180deg, #2b2e34, #15171a);
  color: #eef0f2; font: 700 .9rem/1.2 system-ui, sans-serif; letter-spacing: .03em; cursor: pointer; white-space: nowrap; }
.scores-btn.on { background: var(--chrome); color: #111; border-color: #e6e9ed; }
.scores-btn .rp-badge { top: -7px; left: auto; right: -7px; min-width: 18px; height: 18px; line-height: 18px; font-size: .75rem; }

#screen-table .scores-sheet { position: fixed; top: var(--hdr-h, 56px); right: 0; bottom: 0; width: min(88vw, 340px); z-index: 30; display: flex; flex-direction: column;
  transform: translateX(104%); visibility: hidden; transition: transform .25s ease, visibility .25s; background: #0b0c0e; border-left: 1px solid #9aa0a8; box-shadow: -10px 0 30px rgba(0,0,0,.6); }
#screen-table .scores-sheet[data-open="1"] { transform: none; visibility: visible; }
#screen-table .scores-sheet[hidden], .scores-btn[hidden] { display: none; }
.ss-head { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border: 0; border-bottom: 1px solid #4a4f56; background: var(--chrome); color: #111;
  font: 800 .95rem/1.2 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.ss-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.ss-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline; padding: 4px 0; border-top: 1px solid rgba(255,255,255,.1); }
.ss-row:first-child { border-top: 0; } .ss-row b { font-size: 1.25rem; } .ss-row small { grid-column: 1 / -1; color: #a9b0b8; }
.ss-row .pos { color: #fff; } .ss-row .neg { color: #ff6b6b; }
.ss-hist { width: 100%; border-collapse: collapse; font-size: .95rem; font-variant-numeric: tabular-nums; }
.ss-hist th, .ss-hist td { padding: 3px 4px; text-align: right; border-top: 1px solid rgba(255,255,255,.1); } .ss-hist th:first-child, .ss-hist td:first-child { text-align: left; }
.ss-hist thead th { font-size: .75rem; color: #a9b0b8; text-transform: uppercase; border-top: 0; }
@media (prefers-reduced-motion: reduce) { #screen-table .scores-sheet { transition: none; } }
/* landscape: the bid box sits over the empty middle of the felt while you bid (no right column) */
.tl-center { position: relative; }
.table-layout.land .bid-dock { position: absolute; left: 50%; top: calc(var(--felt-h) * .44); transform: translate(-50%, -50%); width: min(430px, calc(var(--felt-w) * .5)); z-index: 7;
  max-height: calc(var(--felt-h) * .62); overflow: auto; margin: 0; box-shadow: 0 10px 30px rgba(0,0,0,.7); }
.table-layout.land .bid-dock .bid-grid { grid-template-columns: repeat(5, 1fr); }
.table-layout.land .bid-dock { animation: none; }
@media (max-height: 520px) and (orientation: landscape) { .table-layout.land .bid-dock { width: min(470px, calc(var(--felt-w) * .62)); } .table-layout.land .bid-dock .bid-grid { grid-template-columns: repeat(7, 1fr); } }

/* ---------- bid box never covers your hand (user, 21 Oct 2026 6:27 AM ET) ----------
 * Landscape: app.js placeBidDock() puts it in the felt's open middle, between the partner's seat and the top of your cards,
 * compacting step by step until it fits: .bd-1 (no hint / help line, 2 rows of 7), .bd-2 (no title), .bd-3 (Confirm beside
 * the 2 rows). Portrait: it sits under the felt (2 rows of 7). Every bid button and Confirm ≥ 44 px. Large / XL text make
 * the bid numbers bigger instead of zooming the whole box (a zoomed box grew over the cards). */
.bid-dock .bid-grid button, .bid-dock .primary.wide { min-height: 44px; min-width: 44px; }
body.txt-large .bid-dock .bid-grid button { font-size: 1.4rem; } body.txt-xl .bid-dock .bid-grid button { font-size: 1.55rem; }
body.txt-large .bid-dock h2 { font-size: 1.45rem; } body.txt-xl .bid-dock h2 { font-size: 1.55rem; }
.table-layout:not(.land) .bid-dock .bid-grid { grid-template-columns: repeat(7, minmax(44px, 1fr)); }
@media (max-width: 400px) { .table-layout:not(.land) .bid-dock { padding: 5px 4px; } .table-layout:not(.land) .bid-dock .bid-grid { gap: 3px; } }
.table-layout.land .bid-dock.bd-placed { top: var(--bd-top, 0px); transform: translateX(-50%); max-height: none; overflow: visible; }
.table-layout.land .bid-dock.bd-1, .table-layout.land .bid-dock.bd-2, .table-layout.land .bid-dock.bd-3 { width: auto; min-width: 0; max-width: calc(var(--felt-w) - 16px); padding: 6px 8px; }
.table-layout.land .bid-dock.bd-1 .bid-grid, .table-layout.land .bid-dock.bd-2 .bid-grid, .table-layout.land .bid-dock.bd-3 .bid-grid { grid-template-columns: repeat(7, minmax(46px, 1fr)); gap: 4px; margin-bottom: 4px; }
.table-layout.land .bid-dock.bd-1 .bid-grid button, .table-layout.land .bid-dock.bd-2 .bid-grid button, .table-layout.land .bid-dock.bd-3 .bid-grid button { padding: 0 6px; }
.bid-dock.bd-1 .bid-hint, .bid-dock.bd-1 .bid-help, .bid-dock.bd-2 .bid-hint, .bid-dock.bd-2 .bid-help, .bid-dock.bd-3 .bid-hint, .bid-dock.bd-3 .bid-help { display: none; }
.bid-dock.bd-1 h2 { font-size: 1rem; margin: 0 0 4px; }
.bid-dock.bd-2 h2, .bid-dock.bd-3 h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
.table-layout.land .bid-dock.bd-3 { display: grid; grid-template-columns: auto auto; align-items: stretch; gap: 6px; }
.table-layout.land .bid-dock.bd-3 .bid-grid { margin: 0; }
.table-layout.land .bid-dock.bd-3 .primary.wide { width: auto; min-width: 96px; max-width: 120px; margin: 0; white-space: normal; line-height: 1.15; }

/* ---------- board line on the felt (user, 21 Oct 2026 6:31 AM ET) ----------
 * "Board N" + kibitzers + DoD Scores, small in the felt's top-left corner (no strip above the table, so the felt is taller).
 * app.js placeTableInfo: if it would touch a plate / card / the bid box, the felt gives it a thin strip (.ti-strip). */
#screen-table #felt > .table-info { position: absolute; top: 4px; left: 8px; z-index: 6; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px;
  max-width: calc(100% - 16px); margin: 0; padding: 0; font-size: .78rem; line-height: 1.2; color: #c9ced4; pointer-events: auto; }
#screen-table #felt > .table-info #tableInfo { white-space: nowrap; font-weight: 600; opacity: .9; }
#screen-table #felt > .table-info .kib-box { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
#screen-table #felt > .table-info .kib-count { font-size: .76rem; }
#screen-table #felt > .table-info .kib-toggle { padding: 2px 8px; min-height: 28px; font-size: .72rem; border-radius: 999px; }
#screen-table #felt > .table-info .scores-btn { margin-left: 2px; padding: 2px 10px; min-height: 28px; font-size: .74rem; }
#screen-table #felt.ti-strip { padding-top: calc(var(--ti-h, 28px) + 8px); }
body.txt-large #screen-table #felt > .table-info, body.txt-xl #screen-table #felt > .table-info { zoom: 1; font-size: .86rem; }
#screen-table #felt > .table-info [hidden] { display: none !important; }
/* bd-4: the most compact bid box: 2 rows of 8 cells, Confirm takes the last two (no title, hint or help) */
.table-layout.land .bid-dock.bd-4 { display: grid; grid-template-columns: repeat(8, 44px); gap: 3px; padding: 4px; width: auto; max-width: none; }
.table-layout.land .bid-dock.bd-4 h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
.table-layout.land .bid-dock.bd-4 .bid-hint, .table-layout.land .bid-dock.bd-4 .bid-help { display: none; }
.table-layout.land .bid-dock.bd-4 .bid-grid { display: contents; }
.table-layout.land .bid-dock.bd-4 .bid-grid button { min-height: 44px; padding: 0; font-size: 1.05rem; }
.table-layout.land .bid-dock.bd-4 .primary.wide { grid-column: span 2; width: auto; min-height: 44px; margin: 0; padding: 2px 4px; font-size: .78rem; line-height: 1.1; white-space: normal; }
#felt.bd-hide-me .seat.pos-0 .plate { visibility: hidden; }

/* ── Last trick, fixed (user, 21 Oct 2026 5:59 PM ET: "the last trick should have a fixed spot in the bottom left corner
 * of table … layer the cards … make the last trick a bit smaller"). One small box of a fixed size in the felt's bottom-left
 * corner; it never moves, resizes or reflows during a hand (empty = invisible, but it keeps its place). The 4 cards
 * overlap left → right in seat order (left, partner, right, you), each showing only its corner index; opaque; no letters. */
#screen-table #felt { --ltc-w: 32px; --ltc-h: 45px; --ltc-s: 18px; --ltc-fs: 15px; }
@media (max-width: 480px), (max-height: 540px) { #screen-table #felt { --ltc-w: 27px; --ltc-h: 38px; --ltc-s: 15px; --ltc-fs: 13px; } }
#screen-table #felt #lastTrick, #screen-table #felt.phl #lastTrick { font-size: var(--ltc-fs); box-sizing: border-box; padding: 3px 5px 5px; margin: 0;
  width: calc(var(--ltc-w) + 3 * var(--ltc-s) + 12px); height: calc(var(--ltc-h) + 1.05em + 10px); align-self: end; justify-self: start; overflow: hidden; }
#screen-table #felt #lastTrick.lt-none { visibility: hidden; }
#screen-table #felt #lastTrick .lt-label { display: block; zoom: 1; font-size: 11px; line-height: 1.05em; height: 1.05em; margin: 0 0 3px; font-weight: 700; text-align: left; overflow: hidden; }
#screen-table #felt #lastTrick .lt-label .lt-win { display: none; }
#screen-table #felt #lastTrick .compass { display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: 0; margin: 0; padding: 0; font-size: var(--ltc-fs); height: var(--ltc-h); grid-template: none; }
#screen-table #felt #lastTrick .cp { display: block; position: relative; flex: none; min-width: 0; min-height: 0; transform: none; width: var(--ltc-s); height: var(--ltc-h); margin: 0; padding: 0; overflow: visible; grid-area: auto; }
#screen-table #felt #lastTrick .cp-mid { display: none; }
#screen-table #felt #lastTrick .cp-1 { order: 1; z-index: 1; } #screen-table #felt #lastTrick .cp-2 { order: 2; z-index: 2; }
#screen-table #felt #lastTrick .cp-3 { order: 3; z-index: 3; } #screen-table #felt #lastTrick .cp-0 { order: 4; z-index: 4; width: var(--ltc-w); }
#screen-table #felt #lastTrick .cp .c { position: absolute; left: 0; top: 0; display: block; width: var(--ltc-w); height: var(--ltc-h); box-sizing: border-box; margin: 0;
  background: #fff; opacity: 1; border: 1px solid #8a9099; border-radius: 4px; box-shadow: -1px 0 2px rgba(0,0,0,.35); font-size: var(--ltc-fs); }
#screen-table #felt #lastTrick .cp .c::after { display: none; }
#screen-table #felt #lastTrick .cp .c b { position: absolute; left: 2px; top: 1px; min-width: 0; width: calc(var(--ltc-s) - 3px); text-align: center; font-size: 1em; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.06em; }
#screen-table #felt #lastTrick .cp .c i { position: absolute; left: 2px; top: 1.05em; min-width: 0; width: calc(var(--ltc-s) - 3px); text-align: center; font-size: .95em; line-height: 1; font-style: normal; }
#screen-table #felt #lastTrick .cp.win .c { border-color: #ffd400; box-shadow: inset 0 0 0 1px #ffd400, -1px 0 2px rgba(0,0,0,.35); }
#screen-table #felt #lastTrick .cp.led .c { box-shadow: -1px 0 2px rgba(0,0,0,.35); } #screen-table #felt #lastTrick .cp.led.win .c { box-shadow: inset 0 0 0 1px #ffd400; }

/* Stable plates (user, 6:01 PM ET: "make sure the cards and bids don't move during play"): Bid / Made keep a reserved
 * width from bidding to the last trick ('Bidding…', '–', '10', 'NIL' all fit), tabular numbers. Trick slots: fixed boxes. */
#felt .bidinfo { font-variant-numeric: tabular-nums; }
#felt .bidinfo .b, #felt .bidinfo .w { min-width: 1.35em; box-sizing: border-box; }
#felt .bidinfo .nil { display: inline-block; min-width: 1.35em; }
#trick .slot { width: var(--trick-w); height: calc(var(--trick-w) * 1.4); }

/* Me / Us session % (Duplicate only; user, 21 Oct 6:00 PM ET): small, in the felt's top-right corner. */
#felt > .felt-sess { position: absolute; top: 4px; right: 8px; z-index: 5; display: flex; gap: 4px; font-size: 12px; line-height: 1; pointer-events: none; font-variant-numeric: tabular-nums; }
#felt > .felt-sess[hidden] { display: none; }
#felt > .felt-sess span { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 7px; border-radius: 11px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.18); color: #e9ecef; font-weight: 700; white-space: nowrap; }
#felt > .felt-sess b { color: #fff; font-weight: 800; min-width: 3.1em; text-align: right; }
#felt.fs-below > .felt-sess { top: calc(var(--ti-h0, 28px) + 8px); }
.leave-sheet { max-width: 340px; } .leave-sheet .actions { display: flex; gap: 8px; justify-content: flex-end; }
#leaveYes.danger { background: #9b2c2c; color: #fff; border: 1px solid #e07070; padding: 10px 18px; border-radius: 999px; font-weight: 800; }
.leave-sheet .actions .primary, .leave-sheet .actions .danger { min-height: 44px; min-width: 96px; }
#felt .bidinfo .b.pend { color: #a9b0b8; }
#felt.fs-stack > .felt-sess { flex-direction: column; align-items: flex-end; gap: 3px; }
/* phone on its side: no 'Last trick' caption (the box is the last trick), slightly smaller cards, still ≥ 12 px indices */
#screen-table #felt.phl { --ltc-w: 26px; --ltc-h: 36px; --ltc-s: 14px; --ltc-fs: 12.5px; }
#screen-table #felt.phl #lastTrick .lt-label { display: none; }
#screen-table #felt.phl #lastTrick { height: calc(var(--ltc-h) + 8px); padding: 4px 5px; }
#felt.fs-stack > .felt-sess { font-size: 11px; right: 6px; } #felt.fs-stack > .felt-sess span { padding: 0 5px; min-height: 20px; gap: 3px; } #felt.fs-stack > .felt-sess b { min-width: 0; }
/* 500 scoreboard: same slot, always two stacked rows, one fixed size for the whole hand (user, 22 Oct 2026). */
.g5-board { display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; width: 168px; height: 72px; padding: 4px 7px 3px; border-radius: 10px; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.18); overflow: hidden; pointer-events: none; font-variant-numeric: tabular-nums; }
.g5-board[hidden] { display: none !important; }
.g5-board .g5s-row { display: flex; align-items: baseline; gap: 4px; min-width: 0; font-size: 13px; line-height: 1.15; font-weight: 800; white-space: nowrap; }
.g5-board .g5s-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 800; }
.g5-board .g5s-n { flex: none; min-width: 2.4em; text-align: right; font-weight: 800; }
.g5-board .g5s-bags { flex: none; font-size: 11px; font-weight: 700; }
.g5-board .g5s-hand, .g5-board .g5s-to { font-size: 10px; line-height: 1.05; font-weight: 600; color: rgba(233,236,239,.72); white-space: nowrap; overflow: hidden; }
.g5-board .g5s-row.team-ns, .g5-board .g5s-row.team-ns b { color: #5AB4FF !important; }
.g5-board .g5s-row.team-ew, .g5-board .g5s-row.team-ew b { color: #FFB547 !important; }
#felt > .felt-sess.g5 { flex-direction: column; align-items: stretch; gap: 0; width: 168px; height: 72px; right: 8px; padding: 0; }
#felt > .felt-sess.g5 > span { display: none !important; }
#felt > .felt-sess:not(.g5) > .g5-board { display: none !important; }
#felt > .felt-sess.g5 > .g5-board { width: 100%; height: 100%; }
#felt > .felt-sess.g5 b { min-width: 0; text-align: left; }
#felt > .felt-sess.g5 .g5s-n { min-width: 2.4em; text-align: right; }
#felt.fs-stack > .felt-sess.g5, #felt.fs-below > .felt-sess.g5 { width: 168px; height: 72px; right: 8px; font-size: 13px; gap: 0; align-items: stretch; }
#screen-table #felt.phl { --ltc-w: 23px; --ltc-h: 29px; --ltc-s: 12px; --ltc-fs: 12px; } #screen-table #felt.phl #lastTrick { padding: 3px 4px; height: calc(var(--ltc-h) + 6px); width: calc(var(--ltc-w) + 3 * var(--ltc-s) + 10px); } #screen-table #felt.phl #lastTrick .cp .c i { top: .95em; }
/* phone on its side: the last trick sits in the bottom-left corner beside your hand (its own cell), so West keeps its room */
#screen-table #felt.phl { grid-template-areas: ". top ." "left trick right" ". bottom ." "lt hand hand"; }
#screen-table #felt.phl #lastTrick { align-self: end; justify-self: start; }
/* Bid / Made boxes: ONE fixed size from bidding through the last trick (user, 21 Oct 2026 6:01 / 6:30 PM ET: nothing moves).
 * The same box for '–' / '…' (no bid yet), 0–13 and NIL (smaller letters in the same box), so no plate ever grows. */
#screen-table #felt .seat .bidinfo :is(.b, .w, .nil) { display: inline-block; box-sizing: border-box; width: 1.5em; min-width: 1.5em; height: 1.25em; line-height: 1.25em;
  padding: 0; margin-left: .1em; font-size: max(1.2em, 18px); text-align: center; vertical-align: middle; overflow: hidden; white-space: nowrap; font-variant-numeric: tabular-nums; }
#screen-table #felt .seat .bidinfo .nil { font-size: calc(max(1.2em, 18px) * .62); width: 2.42em; min-width: 2.42em; height: 2.016em; line-height: 2.016em; margin-left: .16em; }
/* very narrow phones with XL text: the seat plates zoom a little less, so partner and side plates never meet */
@media (max-width: 380px) { body.txt-xl #screen-table #felt .seat .plate { zoom: 1.12; } }
/* portrait: the bid box over the felt's empty middle (app.js placeBidPortrait); the felt keeps its play size */
.table-layout:not(.land) .bid-dock.bd-port { position: absolute; left: 50%; top: var(--bd-top, 0px); transform: translateX(-50%); width: min(400px, calc(var(--felt-w) - 20px)); max-width: calc(100vw - 16px); z-index: 7; margin: 0; box-sizing: border-box; animation: none; }
.table-layout:not(.land) .bid-dock.bd-port.bd-4 { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; padding: 4px; }
.table-layout:not(.land) .bid-dock.bd-port.bd-4 h2, .table-layout:not(.land) .bid-dock.bd-port.bd-3 h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
.table-layout:not(.land) .bid-dock.bd-port.bd-4 .bid-grid { display: contents; }
.table-layout:not(.land) .bid-dock.bd-port.bd-4 .bid-hint, .table-layout:not(.land) .bid-dock.bd-port.bd-4 .bid-help { display: none; }
.table-layout:not(.land) .bid-dock.bd-port.bd-4 .bid-grid button { min-height: 44px; min-width: 0; padding: 0; }
.table-layout:not(.land) .bid-dock.bd-port.bd-4 .primary.wide { grid-column: span 2; width: auto; min-height: 44px; min-width: 0; margin: 0; padding: 2px 4px; font-size: .78rem; line-height: 1.1; }
/* Phone portrait: the open band is the centre column (over the empty trick). The dock is only as wide as the gap between the side plates, so the felt keeps its play size. */
.table-layout:not(.land) .bid-dock.bd-port.bd-mid { width: var(--bd-w, 200px); max-width: var(--bd-w, 200px); display: grid; grid-template-columns: repeat(var(--bd-cols, 4), minmax(0, 1fr)); gap: 2px; padding: 2px; }
.table-layout:not(.land) .bid-dock.bd-port.bd-mid .bid-grid { display: contents; }
.table-layout:not(.land) .bid-dock.bd-port.bd-mid h2,
.table-layout:not(.land) .bid-dock.bd-port.bd-mid .bid-hint,
.table-layout:not(.land) .bid-dock.bd-port.bd-mid .bid-help { display: none; }
.table-layout:not(.land) .bid-dock.bd-port.bd-mid .bid-grid button,
.table-layout:not(.land) .bid-dock.bd-port.bd-mid .primary.wide { min-width: 0; min-height: 44px; width: auto; margin: 0; padding: 0; font-size: .95rem; grid-column: auto; }

/* Last trick as a mini compass (user, 21 Oct 2026 7:54 PM ET): partner top-centre, left opponent left, right opponent
 * right, you bottom-centre; the cards overlap a little toward the centre, each corner index stays clear. Fixed size. */
#screen-table #felt { --ltc-w: 32px; --ltc-h: 45px; --ltc-fs: 20px; }
@media (max-width: 480px), (max-height: 540px) { #screen-table #felt { --ltc-w: 24px; --ltc-h: 32px; --ltc-fs: 20px; } }
#screen-table #felt.phl { --ltc-w: 24px; --ltc-h: 32px; --ltc-fs: 20px; }
#screen-table #felt #lastTrick, #screen-table #felt.phl #lastTrick { width: calc(var(--ltc-w) * 2.6 + 10px); height: calc(var(--ltc-h) * 1.85 + 18px); }
#screen-table #felt.phl #lastTrick { height: calc(var(--ltc-h) * 1.85 + 8px); }
#screen-table #felt #lastTrick .compass { display: block; position: relative; width: calc(var(--ltc-w) * 2.6); height: calc(var(--ltc-h) * 1.85); }
#screen-table #felt #lastTrick .cp { position: absolute; width: var(--ltc-w); height: var(--ltc-h); order: 0; }
#screen-table #felt #lastTrick .cp-2 { left: calc(var(--ltc-w) * .8); top: 0; z-index: 1; }
#screen-table #felt #lastTrick .cp-1 { left: 0; top: calc(var(--ltc-h) * .425); z-index: 2; }
#screen-table #felt #lastTrick .cp-3 { left: calc(var(--ltc-w) * 1.6); top: calc(var(--ltc-h) * .425); z-index: 3; }
#screen-table #felt #lastTrick .cp-0 { left: calc(var(--ltc-w) * .8); top: calc(var(--ltc-h) * .85); z-index: 4; width: var(--ltc-w); }
#screen-table #felt #lastTrick .cp .c b, #screen-table #felt #lastTrick .cp .c i { width: auto; min-width: 0; left: 3px; text-align: left; }
#screen-table #felt #lastTrick .cp .c i { top: 1.02em; }
/* phones: no caption (the little compass is the last trick; its title says so), so it stays as small as the old row */
@media (max-width: 480px) { #screen-table #felt #lastTrick .lt-label { display: none; } #screen-table #felt #lastTrick { height: calc(var(--ltc-h) * 1.85 + 8px); padding: 4px 5px; } }

/* Swipes page (/profile/swipes) */
.sw-tabs { display: inline-flex; gap: 4px; margin: 6px 0 10px; }
.sw-tabs button { min-height: 40px; padding: 6px 16px; }
.sw-list li { gap: 10px; }
.sw-list .pa { font-size: 30px; width: 40px; text-align: center; }
.sw-list .pn { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sw-list .pn small { white-space: normal; }
.sw-list .sw-rm { flex: none; min-height: 40px; }
.no-avatars .sw-list .pa { display: inline-block; } /* the Swipes page shows avatars (user, 21 Oct 2026 8:08 PM ET), even while SHOW_AVATARS hides them elsewhere */

/* Partnership history (/profile/partners) */
#ptSearch { width: 100%; box-sizing: border-box; min-height: 44px; margin: 10px 0; font-size: 1rem; }
.pt-per td, .pt-per th { text-align: center; } .pt-per tbody th { text-align: left; }
#ptRows li { cursor: pointer; } #ptRows li.on { outline: 2px solid var(--ns, #5AB4FF); }
.pt-detail { margin: 8px 0 4px; } #ptBoards { margin-top: 8px; }
.no-avatars #ptRows .pa { display: inline-block; }

/* Two designs, one compass (22 Oct 2026). html.td-desk: short side ≥ 600, a roomy table, cluster in the
 * centre, full info row. html.td-phone: short side under 600, the compact table. The class is frozen for
 * the hand (app.js), so slots do not jump if the window is resized mid-hand. Same offsets either way:
 * N/S ±0.51 card-heights, W/E ±0.91 card-widths, in a box 2.86 cards wide. You are always South. */
html.td-phone #screen-table #felt.felt,
html.td-phone #screen-table #felt.phl,
html.td-phone #screen-table #felt.short,
html.td-desk #screen-table #felt.felt,
html.td-desk #screen-table #felt.phl,
html.td-desk #screen-table #felt.short {
  grid-template-columns: minmax(0, var(--side-col, 96px)) minmax(0, 1fr) minmax(0, var(--side-col, 96px)) !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto !important;
  grid-template-areas: ". top ." "left trick right" ". . ." ". bottom ." "hand hand hand" !important;
  gap: 6px 10px;
}
html.td-phone body.at-table:has(.table-layout:not(.land)) #screen-table { padding-left: 2px; padding-right: 2px; }
html.td-phone #screen-table .table-layout:not(.land) #felt.felt {
  grid-template-rows: 112px auto auto minmax(0, 1fr) auto auto !important;
  grid-template-areas: ". . ." ". top ." "left trick right" ". . ." ". bottom ." "hand hand hand" !important;
  margin-top: 56px; gap: 4px 2px; padding: 4px 2px 14px; border-width: 3px;
}
html.td-phone #screen-table .table-layout.land #felt.felt,
html.td-phone #screen-table .table-layout.land #felt.phl,
html.td-phone #screen-table .table-layout.land #felt.short {
  grid-template-areas: ". top ." "left trick right" ". . ." "lt bottom ." "hand hand hand" !important;
  gap: 2px 6px; padding: 2px 6px 2px; border-width: 3px;
}
html.td-phone #screen-table .table-layout.land #felt #hand.hand {
  padding-top: 2px; min-height: calc(var(--hand-slot, var(--hand-w)) * 1.4 + 2px);
  margin-left: calc(var(--ltc-w) * 2.6 + 20px); width: auto;
}
html.td-phone #screen-table .table-layout.land #felt.felt:has(> .felt-sess.g5:not([hidden])) {
  grid-template-rows: 72px auto auto minmax(0, 1fr) auto auto !important;
  grid-template-areas: ". . ." ". top ." "left trick right" ". . ." "lt bottom ." "hand hand hand" !important;
}
html.td-phone #screen-table #felt .seat,
html.td-desk #screen-table #felt .seat { min-width: 0; }
html.td-phone #screen-table #felt .pos-2,
html.td-desk #screen-table #felt .pos-2 { grid-area: top; grid-column: 2; justify-self: center; align-self: end; width: auto; max-width: 100%; min-width: 0; }
html.td-phone #screen-table #felt .pos-1,
html.td-desk #screen-table #felt .pos-1 { grid-area: left; grid-column: 1; align-self: center; width: auto; }
html.td-phone #screen-table #felt .pos-3,
html.td-desk #screen-table #felt .pos-3 { grid-area: right; grid-column: 3; align-self: center; width: auto; }
html.td-phone #screen-table #felt .pos-1 { justify-self: start; }
html.td-phone #screen-table #felt .pos-3 { justify-self: end; }
html.td-desk #screen-table #felt .pos-1,
html.td-desk #screen-table #felt .pos-3 { justify-self: center; }
html.td-phone #screen-table #felt .pos-0,
html.td-desk #screen-table #felt .pos-0 { grid-area: bottom; grid-column: 2; justify-self: center; align-self: end; width: auto; max-width: 100%; transform: none !important; }
html.td-phone #screen-table #felt .trick,
html.td-desk #screen-table #felt .trick {
  grid-area: trick; justify-self: center; width: calc(var(--trick-w) * 2.86); height: calc(var(--trick-w) * 2.86); min-height: 0; max-width: 100%;
}
html.td-phone #screen-table #felt .trick { align-self: start; }
html.td-desk #screen-table #felt.felt,
html.td-desk #screen-table #felt.phl,
html.td-desk #screen-table #felt.short {
  grid-template-rows: auto minmax(0, 1fr) auto auto !important;
  grid-template-areas: ". top ." "left trick right" ". bottom ." "hand hand hand" !important;
}
html.td-desk #screen-table #felt .trick { align-self: center; }
html.td-phone #screen-table #felt #hand.hand,
html.td-desk #screen-table #felt #hand.hand { grid-area: hand; grid-column: 1 / -1; justify-content: center; width: 100%; }
/* Desk: the last trick is absolute in the bottom-left. Inset the hand so its box does not cover that corner. */
html.td-desk #screen-table #felt #hand.hand {
  margin-left: calc(var(--ltc-w) * 2.6 + 28px);
  width: auto;
}
html.td-phone #screen-table #felt #lastTrick,
html.td-desk #screen-table #felt #lastTrick { position: absolute; left: 8px; bottom: 8px; top: auto; z-index: 4; margin: 0; }
html.td-phone #screen-table .table-layout:not(.land) #felt #lastTrick { top: 42px; bottom: auto; left: 6px; }
/* Phone landscape: the last trick floats just above the hand, in the left corner beside your
   plate. Out of the grid, so it does not push the cards under the turn bar, and clear of
   the Scores button (that sits in the top-left). */
html.td-phone #screen-table .table-layout.land #felt #lastTrick {
  position: absolute; top: auto; left: 6px; right: auto; bottom: 6px; grid-area: auto;
  margin: 0; z-index: 5;
}
/* phone: compact one-line pills, merged landscape bar, trick cards ~93% of the hand */
html.td-phone #screen-table #felt .seat { zoom: 1 !important; }
html.td-phone body.txt-large #screen-table #felt .seat .plate,
html.td-phone.txt-large #screen-table #felt .seat .plate { zoom: 1.06; }
html.td-phone body.txt-xl #screen-table #felt .seat .plate,
html.td-phone.txt-xl #screen-table #felt .seat .plate { zoom: 1.1; }
html.td-phone body.at-table .brand-logo { height: 40px !important; }
html.td-phone body.at-table:has(.table-layout.land) .topbar { padding-top: 2px; padding-bottom: 2px; gap: 6px; }
html.td-phone body.at-table:has(.table-layout.land) #felt > .table-info {
  display: flex; position: fixed; top: 4px; left: max(8px, env(safe-area-inset-left)); z-index: 60; height: 28px;
  max-width: min(42vw, 380px); margin: 0;
}
html.td-phone body.at-table:has(.table-layout:not(.land)) #felt > .table-info {
  position: fixed; top: var(--hdr-h, 52px); left: max(8px, env(safe-area-inset-left)); z-index: 40; height: 26px;
  max-width: calc(100vw - 16px); margin: 0;
}
html.td-desk body.txt-large #felt .seat .plate,
html.td-desk.txt-large #felt .seat .plate { zoom: 1.06; }
html.td-desk body.txt-xl #felt .seat .plate,
html.td-desk.txt-xl #felt .seat .plate { zoom: 1.08; }
#screen-table #trick .slot.s-2 { top: max(0px, calc(50% - var(--trick-w) * 1.414)); bottom: auto; left: 50%; right: auto; transform: translateX(-50%); z-index: 1; }
#screen-table #trick .slot.s-0 { bottom: max(0px, calc(50% - var(--trick-w) * 1.414)); top: auto; left: 50%; right: auto; transform: translateX(-50%); z-index: 4; }
#screen-table #trick .slot.s-1 { left: max(0px, calc(50% - var(--trick-w) * 1.41)); right: auto; top: 50%; bottom: auto; transform: translateY(-50%); z-index: 2; }
#screen-table #trick .slot.s-3 { right: max(0px, calc(50% - var(--trick-w) * 1.41)); left: auto; top: 50%; bottom: auto; transform: translateY(-50%); z-index: 3; }

/* Every plate is one line: Name · Bid N · Made N. The name is the only part that may shrink,
   and only once the line is as wide as its seat. Bid and Made stay intact, on that same line. */
html.td-phone #screen-table #felt .seat .plate,
html.td-desk #screen-table #felt .seat .plate {
  flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; justify-content: flex-start;
  gap: 0 .3em; width: max-content; max-width: 100%; min-width: 0; min-height: 0; height: auto;
  overflow: hidden; border-radius: 999px; padding: 1px 6px; box-sizing: border-box;
}
html.td-phone #screen-table #felt .seat .nameRow,
html.td-desk #screen-table #felt .seat .nameRow {
  flex: 1 1 auto; min-width: 0; max-width: 100%; overflow: hidden; flex-wrap: nowrap;
}
html.td-phone #screen-table #felt .seat .name,
html.td-desk #screen-table #felt .seat .name {
  display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.td-phone #screen-table #felt .seat .name { font-size: 12px; font-weight: 800; }
html.td-phone #screen-table #felt .seat .bidinfo,
html.td-desk #screen-table #felt .seat .bidinfo {
  flex: none !important; flex-direction: row !important; flex-wrap: nowrap !important;
  white-space: nowrap !important; width: auto; max-width: none; min-width: max-content;
}
html.td-phone #screen-table #felt .seat .bidinfo { font-size: 12px; column-gap: .1em; letter-spacing: 0; }
html.td-phone #screen-table #felt .seat .bidinfo :is(.b, .w, .nil) { width: 1.25em; min-width: 1.25em; margin-left: .04em; }
html.td-phone #screen-table #felt .seat .bidinfo .sep,
html.td-desk #screen-table #felt .seat .bidinfo .sep { display: inline !important; }
html.td-phone #screen-table #felt .seat .plate .tbank,
html.td-desk #screen-table #felt .seat .plate .tbank { flex: none; white-space: nowrap; }
html.td-phone #screen-table #felt .ptag,
html.td-desk #screen-table #felt .ptag { flex: none; }
/* Phone portrait: partner and you span the felt so a normal name fits. Opponents sit on the
   empty upper corner of the cross (above the side card, short of the partner card). */
html.td-phone #screen-table .table-layout:not(.land) #felt .pos-2,
html.td-phone #screen-table .table-layout:not(.land) #felt .pos-0 {
  grid-column: 1 / -1; width: max-content; max-width: calc(100% - 8px);
}
html.td-phone #screen-table .table-layout:not(.land) #felt .pos-1,
html.td-phone #screen-table .table-layout:not(.land) #felt .pos-3 {
  align-self: start; width: max-content; min-width: 0; z-index: 6;
  max-width: calc(var(--side-col, 96px) + var(--trick-w) * 0.94);
}
html.td-desk #screen-table #felt .pos-2,
html.td-desk #screen-table #felt .pos-0 {
  grid-column: 1 / -1; width: max-content; max-width: calc(100% - 12px);
}
html.td-phone #screen-table .table-layout:not(.land) #felt :is(.pos-1, .pos-3) .tbank { display: none; }
/* Phone landscape: the centre column is the partner's. Don't cap it at a third of the screen. */
html.td-phone #screen-table .table-layout.land #felt .pos-2,
html.td-phone #screen-table .table-layout.land #felt .pos-0 {
  width: max-content; max-width: 100%;
}
/* ---------- site theme: felt text stays light on the cloth; the page chrome follows the theme variables ---------- */
#felt.felt, .kb-felt, .mh-felt { color: var(--felt-ink, var(--ink)); }
.mh-felt { background: var(--felt); border-color: var(--line); }

/* Light theme: page chrome is light, the cloth stays a dark felt so seat plates and team colours stay readable. */
html[data-theme="light"] .ghost { color: var(--ink); border-color: #8d8478; }
html[data-theme="light"] .navbtn { color: var(--ink); }
html[data-theme="light"] .navbtn.on { color: var(--on-btn); background: var(--btn); }
html[data-theme="light"] input, html[data-theme="light"] select { color: var(--ink); border: 1px solid #c8c0b4; }
html[data-theme="light"] .seg button { color: var(--ink); background: #efeae2; border-color: #c8c0b4; }
html[data-theme="light"] .seg button.on { color: var(--on-btn); background: var(--btn); }
html[data-theme="light"] .settings-sheet { border-color: #c8c0b4; }
html[data-theme="light"] .team-ns, html[data-theme="light"] .mh-ns, html[data-theme="light"] .team-ns .ptag { background-color: #0e1218; border-radius: 3px; padding: 0 .18em; }
html[data-theme="light"] .team-ew, html[data-theme="light"] .mh-ew, html[data-theme="light"] .team-ew .ptag { background-color: #0e1218; border-radius: 3px; padding: 0 .18em; }
html[data-theme="contrast"] .panel, html[data-theme="contrast"] .sheet, html[data-theme="contrast"] .settings-sheet, html[data-theme="contrast"] .topbar { border: 2px solid #fff; }
html[data-theme="contrast"] .ghost, html[data-theme="contrast"] .seg { border-color: #fff; }
html[data-theme="contrast"] .seg button { border-color: #fff; }

/* Appearance (account Settings): presets, live stage, colour pickers */
.theme-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.theme-presets button { min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); color: var(--surface-ink); font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.theme-presets button::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--sw), var(--sw2)); border: 1px solid rgba(0,0,0,.4); flex: none; }
.theme-presets button.on { outline: 2px solid var(--accent); outline-offset: 1px; }
.theme-stage { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin: 8px 0 12px; background: var(--surface); color: var(--surface-ink); }
.theme-stage .ts-top { display: flex; gap: 10px; align-items: center; padding: 8px 10px; background: var(--topbar-bg); }
.theme-stage .ts-felt { margin: 8px; border-radius: 12px; min-height: 78px; display: flex; align-items: flex-end; gap: 8px; padding: 10px; background: var(--felt); color: var(--felt-ink); }
.ts-plate { margin-left: auto; padding: 4px 8px; border-radius: 8px; background: #18191d; color: #fff; font-weight: 800; }
.ts-pip { display: inline-grid; place-items: center; width: 36px; height: 50px; border-radius: 4px; background: #fff; color: #111; font-weight: 800; border: 1px solid #b9bec5; }
.ts-pip.red { color: #c8102e; }
.theme-colors { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 8px 0; }
.theme-colors label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; font-weight: 700; }
.theme-colors input[type="color"] { width: 72px; height: 44px; padding: 2px; border: 1px solid var(--line); background: transparent; cursor: pointer; }
#themeReset { margin: 4px 0 8px; }

/* Card backs (face-down only). Classic keeps the existing art; the others are original opaque patterns. */
html[data-card-back="crimson"] .kb-back, html[data-card-back="crimson"] .mh-card.back { background: repeating-linear-gradient(45deg, #7a1020 0 3px, #c43148 3px 6px); opacity: 1; }
html[data-card-back="forest"] .kb-back, html[data-card-back="forest"] .mh-card.back { background: repeating-linear-gradient(45deg, #0e4d28 0 3px, #1f8a48 3px 6px); opacity: 1; }
html[data-card-back="ivory"] .kb-back, html[data-card-back="ivory"] .mh-card.back { background: repeating-linear-gradient(90deg, #f4e7c4 0 4px, #e2c98a 4px 5px); opacity: 1; }
html[data-card-back="ink"] .kb-back, html[data-card-back="ink"] .mh-card.back { background: repeating-linear-gradient(135deg, #141820 0 4px, #2c3548 4px 8px); opacity: 1; }

/* ---------- original faces (CSS/SVG only): Large index, Flat, Casino, Retro. Opaque. 4-colour via currentColor. ---------- */
body.cf-orig :not(.face-preview) > .card .court,
.face-preview.cf-orig > .card .court { background: none; --court: none; border: 0; box-shadow: none; isolation: auto; overflow: visible; }
body.cf-orig :not(.face-preview) > .card .ace-art,
.face-preview.cf-orig > .card .ace-art { background-image: none; background-color: currentColor; -webkit-mask: var(--suit) center / contain no-repeat; mask: var(--suit) center / contain no-repeat; }
body.cf-orig.fc4 :not(.face-preview) > .card .court::before,
body.cf-orig :not(.face-preview) > .card .court::before,
.face-preview.cf-orig.fc4 > .card .court::before,
.face-preview.cf-orig > .card .court::before { content: ''; position: absolute; inset: 16%; background-image: none; background-color: currentColor; filter: none; mix-blend-mode: normal; -webkit-mask: var(--suit) center / contain no-repeat; mask: var(--suit) center / contain no-repeat; }
body.cf-orig.fc4 :not(.face-preview) > .card .court::after,
.face-preview.cf-orig.fc4 > .card .court::after { content: none; background: none; mix-blend-mode: normal; filter: none; }

/* Large index: sans rank, white index plate, compressed pips. Readable in a tight hand on a phone. */
body.cf-mobile :not(.face-preview) > .card,
.face-preview.cf-mobile > .card { background: #fff; border-color: #9aa3ad; }
body.cf-mobile :not(.face-preview) > .card .ix,
.face-preview.cf-mobile > .card .ix { width: calc(var(--card-w) * .38); z-index: 1; background: #fff; padding-bottom: calc(var(--card-w) * .02); }
body.cf-mobile :not(.face-preview) > .card .ix b,
.face-preview.cf-mobile > .card .ix b { font-family: system-ui, sans-serif; font-weight: 800; font-size: calc(var(--card-w) * .48); line-height: .84; letter-spacing: -.03em; }
body.cf-mobile :not(.face-preview) > .card .ix b.ten,
.face-preview.cf-mobile > .card .ix b.ten { letter-spacing: -.08em; transform: scaleX(.72); }
body.cf-mobile :not(.face-preview) > .card .ix .pip,
.face-preview.cf-mobile > .card .ix .pip { width: calc(var(--card-w) * .26); height: calc(var(--card-w) * .26); }
body.cf-mobile :not(.face-preview) > .card .pips .pip,
.face-preview.cf-mobile > .card .pips .pip { left: calc(50% + (var(--x) - 50) * .58%); top: calc(50% + (var(--y) - 50) * .82%); width: calc(var(--card-w) * .14); height: calc(var(--card-w) * .14); }
body.cf-mobile :not(.face-preview) > .card .court,
.face-preview.cf-mobile > .card .court { inset: 18% 22%; }
body.cf-mobile .card.beer7 .beerart, .face-preview.cf-mobile .card.beer7 .beerart { inset: 18% 26%; width: auto; height: auto; }

/* Flat: geometric sans, suit-coloured edge, one big court pip. */
body.cf-flat :not(.face-preview) > .card,
.face-preview.cf-flat > .card { background: #fff; border: max(2px, calc(var(--card-w) * .04)) solid currentColor; border-radius: calc(var(--card-w) * .05); }
body.cf-flat :not(.face-preview) > .card .ix b,
.face-preview.cf-flat > .card .ix b { font-family: system-ui, sans-serif; font-weight: 800; font-size: calc(var(--card-w) * .3); letter-spacing: -.04em; }
body.cf-flat :not(.face-preview) > .card .ix,
.face-preview.cf-flat > .card .ix { width: calc(var(--card-w) * .26); background: #fff; }
body.cf-flat :not(.face-preview) > .card .pips .pip,
.face-preview.cf-flat > .card .pips .pip { width: calc(var(--card-w) * .17); height: calc(var(--card-w) * .17); }
body.cf-flat :not(.face-preview) > .card .court::before,
.face-preview.cf-flat > .card .court::before { inset: 8%; }
body.cf-flat .card.beer7 .beerart, .face-preview.cf-flat .card.beer7 .beerart { inset: 16% 20%; width: auto; height: auto; }

/* Casino: white card, double line in the suit colour, framed centre pip. */
body.cf-casino :not(.face-preview) > .card,
.face-preview.cf-casino > .card { background: #fff; border: 1px solid #1c1c1c; box-shadow: inset 0 0 0 max(2px, calc(var(--card-w) * .028)) #fff, inset 0 0 0 max(3px, calc(var(--card-w) * .045)) currentColor; }
body.cf-casino :not(.face-preview) > .card .ix b,
.face-preview.cf-casino > .card .ix b { font-family: Georgia, "Times New Roman", "Liberation Serif", serif; font-size: calc(var(--card-w) * .3); }
body.cf-casino :not(.face-preview) > .card .court,
.face-preview.cf-casino > .card .court { inset: 14% 20%; border: max(1px, calc(var(--card-w) * .02)) solid currentColor; border-radius: 46% 46% 40% 40%; }
body.cf-casino :not(.face-preview) > .card .court::before,
.face-preview.cf-casino > .card .court::before { inset: 18%; }
body.cf-casino .card.beer7 .beerart, .face-preview.cf-casino .card.beer7 .beerart { inset: 16% 22%; width: auto; height: auto; }

/* Retro: ivory card, chunky serif index, squared frame. Opaque cream, never see-through. */
body.cf-retro :not(.face-preview) > .card,
.face-preview.cf-retro > .card { background: #fff4dc; border: max(2px, calc(var(--card-w) * .04)) solid #3b2a14; border-radius: calc(var(--card-w) * .14); }
body.cf-retro :not(.face-preview) > .card .ix,
.face-preview.cf-retro > .card .ix { width: calc(var(--card-w) * .32); background: #fff4dc; z-index: 1; }
body.cf-retro :not(.face-preview) > .card .ix b,
.face-preview.cf-retro > .card .ix b { font-family: Georgia, "Times New Roman", "Liberation Serif", serif; font-weight: 800; font-size: calc(var(--card-w) * .34); }
body.cf-retro :not(.face-preview) > .card .court,
.face-preview.cf-retro > .card .court { inset: 16% 18%; border: max(2px, calc(var(--card-w) * .03)) solid currentColor; border-radius: 4px; background: #fff4dc; }
body.cf-retro :not(.face-preview) > .card .court::before,
.face-preview.cf-retro > .card .court::before { inset: 14%; }
body.cf-retro .card.beer7 .beerart, .face-preview.cf-retro .card.beer7 .beerart { inset: 16% 22%; width: auto; height: auto; }

/* Session box (user, 26 Oct 2026): 2x2 You / Team × Off % / Def %, tap for boards; S / M / L (Settings → sizes) */
#felt > .felt-sess:not(.g5) { display: grid; grid-template-columns: auto auto auto auto; column-gap: 8px; row-gap: 2px; align-items: center; padding: 5px 9px 6px;
  border-radius: 12px; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.2); pointer-events: auto; cursor: pointer; font-size: 13px;
  transform: scale(var(--sz-score, 1)); transform-origin: top right; }
#felt > .felt-sess:not(.g5)[hidden] { display: none; }
#felt > .felt-sess:not(.g5) > span { display: contents; }
#felt > .felt-sess:not(.g5) > span > * { min-width: 0; }
#felt > .felt-sess:not(.g5) .fs-h i { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #aeb6bf; text-align: right; }
#felt > .felt-sess:not(.g5) .fs-h i:first-child { text-align: left; }
#felt > .felt-sess:not(.g5) b { min-width: 3.2em; text-align: right; font-size: 14px; }
#felt > .felt-sess:not(.g5) .fs-d { color: #8fd3ff; }
#felt > .felt-sess:not(.g5) .fs-n { display: none; color: #c3c8ce; font-size: 11px; text-align: right; }
#felt > .felt-sess.fs-open:not(.g5) { grid-template-columns: auto auto auto auto auto; }
#felt > .felt-sess:not(.g5) .fs-x { color: #ffd479; }
#felt > .felt-sess.fs-open:not(.g5) .fs-n { display: block; }
#felt.fs-stack > .felt-sess:not(.g5) { flex-direction: initial; font-size: 12px; padding: 4px 7px; column-gap: 6px; }
#felt.fs-stack > .felt-sess:not(.g5) b { min-width: 2.8em; font-size: 12.5px; }
/* options buttons size */
html[data-sz-opts] .topbar .gearbtn, html[data-sz-opts] body.at-table .gearbtn { font-size: calc(1rem * var(--sz-opts, 1)); min-height: calc(40px * var(--sz-opts, 1)); min-width: calc(44px * var(--sz-opts, 1)); padding: 0 calc(12px * var(--sz-opts, 1)); }
/* Two-line seat plates, bigger (user, 26 Oct 2026 6:26 + 6:36 AM ET): line 1 = the full username (E/W were cut off),
   line 2 = "Bid N · Made M" with big bold numbers; Nil in red. Overrides the one-line pill above. */
html.td-phone #screen-table #felt .seat .plate,
html.td-desk #screen-table #felt .seat .plate {
  flex-direction: column !important; flex-wrap: nowrap !important; align-items: center; justify-content: center;
  gap: 2px; border-radius: 14px; padding: 5px 14px 6px; overflow: visible; max-width: 100%; }
html.td-phone #screen-table #felt .seat .plate { padding: 3px 8px 4px; border-radius: 11px; gap: 1px; }
html.td-phone #screen-table #felt .seat .nameRow,
html.td-desk #screen-table #felt .seat .nameRow { flex: none; justify-content: center; overflow: visible; max-width: 100%; }
html.td-phone #screen-table #felt .seat .name,
html.td-desk #screen-table #felt .seat .name {
  overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; text-align: center; line-height: 1.12; }
html.td-desk #screen-table #felt .seat .name { font-size: 17px; font-weight: 800; }
html.td-desk #screen-table #felt .seat .name.nm-long { font-size: 15px; }
html.td-desk #screen-table #felt .seat .name.nm-xlong { font-size: 13.5px; }
html.td-phone #screen-table #felt .seat .name { font-size: 13px; }
html.td-phone #screen-table #felt .seat .name.nm-long { font-size: 12px; }
html.td-phone #screen-table #felt .seat .name.nm-xlong { font-size: 11px; }
html.td-desk #screen-table #felt .seat .bidinfo { font-size: 19px; }
html.td-phone #screen-table #felt .seat .bidinfo { font-size: 15px; }
html.td-desk #screen-table #felt .seat .bidinfo :is(.b, .w), html.td-phone #screen-table #felt .seat .bidinfo :is(.b, .w) { width: auto; min-width: 1.45em; font-size: max(1.15em, 18px); font-weight: 900; } /* numbers never under 18 px (phone 15px × 1.15 was 17.25) */
html.td-desk #screen-table #felt .seat .bidinfo .nil, html.td-phone #screen-table #felt .seat .bidinfo .nil { width: auto; min-width: 0; height: auto; line-height: 1.25; padding: 0 .35em; font-size: 1em; font-weight: 900; }
html.td-phone #screen-table .table-layout:not(.land) #felt :is(.pos-1, .pos-3) .plate { max-width: calc(var(--side-col, 96px) + var(--trick-w) * 0.94); }
/* Bid · Made wraps to two lines when the plate is too narrow for one (set by fitBidLines in app.js) */
html.td-phone #screen-table #felt .seat .bidinfo.bi-wrap, html.td-desk #screen-table #felt .seat .bidinfo.bi-wrap {
  flex-wrap: wrap !important; min-width: 0; max-width: 100%; row-gap: 1px; }
html.td-phone #screen-table #felt .seat .bidinfo.bi-wrap .sep, html.td-desk #screen-table #felt .seat .bidinfo.bi-wrap .sep { display: none !important; }
html.td-phone #screen-table #felt .seat .bidinfo.bi-wrap :is(.bi, .wi), html.td-desk #screen-table #felt .seat .bidinfo.bi-wrap :is(.bi, .wi) { flex: 0 0 100%; text-align: center; white-space: nowrap; }
/* The time bank chip rides on line 1 beside the name, so a two-line plate stays two lines tall. As a third line it
   made each plate ~20 px taller, and the felt then shrank the cards (1280x720 / 1366x768) or pushed the hand off it. */
html.td-phone #screen-table #felt .seat .plate:has(> .tbank), html.td-desk #screen-table #felt .seat .plate:has(> .tbank) {
  display: grid !important; grid-template-columns: auto auto; justify-content: center; justify-items: center; align-items: center; column-gap: 6px; }
html.td-phone #screen-table #felt .seat .plate:has(> .tbank) > .nameRow, html.td-desk #screen-table #felt .seat .plate:has(> .tbank) > .nameRow { grid-area: 1 / 1; min-width: 0; }
html.td-phone #screen-table #felt .seat .plate:has(> .tbank) > .tbank, html.td-desk #screen-table #felt .seat .plate:has(> .tbank) > .tbank { grid-area: 1 / 2; }
html.td-phone #screen-table #felt .seat .plate:has(> .tbank) > .bidinfo, html.td-desk #screen-table #felt .seat .plate:has(> .tbank) > .bidinfo { grid-area: 2 / 1 / 3 / 3; }
html.td-phone #screen-table .table-layout:not(.land) #felt :is(.pos-1, .pos-3) .plate:has(> .tbank) { column-gap: 0; }
/* A phone on its side (390 px tall) has no room for two-line plates above and below the trick plus a full hand on
   the felt: there the plate keeps the bigger text on one line (name · Bid N · Made M · bank). */
html.td-phone #screen-table #felt.phl .seat .plate, html.td-phone #screen-table #felt.phl .seat .plate:has(> .tbank) {
  display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; column-gap: 6px; padding: 2px 7px; }
html.td-phone #screen-table #felt.phl .seat .bidinfo, html.td-phone #screen-table #felt.phl .seat .bidinfo :is(.b, .w, .nil) { line-height: 1.05; }
/* An upright phone: the two-line plates sit snug top and bottom, so a reserved bid box still leaves the hand room on the felt */
html.td-phone #screen-table .table-layout:not(.land) #felt:not(.phl) .seat .plate { padding-top: 1px !important; padding-bottom: 1px !important; row-gap: 0 !important; }

/* Nil is red everywhere a bid shows (same red as the bidding box's Nil button) */
.bidinfo .nil, #screen-table #felt .seat .bidinfo .nil, .nil-bid, .bid-nil {
  background: rgba(255,93,122,.18) !important; border: 1px solid rgba(255,93,122,.55) !important; color: #ff9aa9 !important; -webkit-text-fill-color: #ff9aa9 !important; border-radius: .3em; }
b.nil { display: inline-block; padding: 0 .3em; border-radius: .3em; background: rgba(255,93,122,.18); border: 1px solid rgba(255,93,122,.55); color: #ff9aa9; -webkit-text-fill-color: #ff9aa9; font-weight: 800; line-height: 1.2; }
/* Last trick box size S / M / L (Settings, per device) */
#felt .last-trick { scale: var(--sz-lastTrick, 1); transform-origin: left bottom; }
#screen-table #felt.phl .last-trick { transform-origin: left top; }
/* ☆ Save chip: fixed on the felt's bottom-left corner (placed by placeFeltSave), above the post-hand popup */
#feltSave { position: fixed; z-index: 40; display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 0 12px; border-radius: 999px;
  background: rgba(14,15,18,.82); border: 1px solid rgba(255,255,255,.28); color: #f1f3f5; font: 800 13px/1 system-ui, sans-serif; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.45); }
#feltSave[hidden] { display: none; }
#feltSave.on { color: #ffd34d; border-color: rgba(255,211,77,.6); }

/* Sit & Go waiting box (user, 26 Oct 2026): fixed on the felt's bottom-right corner (placed by tours.js placeWait) while you
   keep playing Duplicate on Demand; the ☆ Save chip keeps the bottom-left */
.sng-wait { position: fixed; z-index: 39; width: 232px; max-width: calc(100vw - 16px); box-sizing: border-box; padding: 8px 10px; border-radius: 12px;
  background: rgba(14,15,18,.86); border: 1px solid rgba(255,211,77,.45); color: #f1f3f5; font: 500 12px/1.3 system-ui, sans-serif; box-shadow: 0 2px 10px rgba(0,0,0,.5); pointer-events: none; }
.sng-wait[hidden] { display: none; }
.sng-wait .sw-h b { color: #ffd34d; font-weight: 800; }
.sng-wait .sw-h small { display: block; color: #aab; }
.sng-wait .sw-fill { display: flex; align-items: center; gap: 6px; margin: 4px 0 2px; }
.sng-wait .sw-fill > b { font-size: 15px; }
.sng-wait .sw-bar { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.15); overflow: hidden; }
.sng-wait .sw-bar > i { display: block; height: 100%; background: #ffd34d; }
.sng-wait .sw-when { color: #dfe3e8; }
.sng-wait .sw-partner { margin-top: 3px; color: #cfd6dd; }
.sng-wait .sw-ok { color: #7ee2a8; }
.sng-wait .sw-foot { margin-top: 4px; color: #99a; }
.sng-wait .sw-mini { display: none; }
@media (max-width: 480px) {
  .sng-wait { width: auto; max-width: 210px; padding: 0 10px; min-height: 34px; display: flex; align-items: center; border-radius: 999px; font-size: 12px; pointer-events: auto; cursor: pointer; }
  .sng-wait[hidden] { display: none; }
  .sng-wait .sw-mini { display: block; white-space: nowrap; }
  .sng-wait .sw-mini .sw-more { font-style: normal; color: #ffd34d; }
  .sng-wait .sw-full { display: none; }
  .sng-wait.open { display: block; width: 220px; padding: 7px 9px; border-radius: 12px; }
  .sng-wait.open .sw-mini { display: none; }
  .sng-wait.open .sw-full { display: block; }
}

/* ---------- full-screen toggle (top bar, lobby + table; fullscreen.js hides it where unsupported) ---------- */
.fsbtn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 44px; min-height: 44px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid #8e959e; background: linear-gradient(180deg, #34373d, #16171a); color: #f1f3f5; line-height: 1; cursor: pointer; flex: 0 0 auto; }
.fsbtn[hidden] { display: none !important; }
.fsbtn svg { width: 20px; height: 20px; }
.fsbtn .lbl { display: none; }
.fsbtn[aria-pressed="true"] { border-color: #f1c40f; color: #f1c40f; }
.fsbtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }