/* Layout: a club room. The lobby scrolls like a page; the card table is a one-screen felt with
   the auction and controls beside it (landscape) or below it (portrait). Tablet first. */
:root {
  --ground: #E4EBE6; --panel: #F7F9F7; --panel-2: #EBF1ED; --ink: #13201A; --muted: #4A5C54; --line: #C2CFC7;
  --felt: #1D4A39; --felt-2: #27604A; --felt-ink: #EEF5F0; --felt-muted: #B6CCC0; --rail: #3B2A1C; --room: #0E1B16;
  --accent: #7E5608; --accent-fill: #D9A93C; --accent-on: #1C1505;
  --text-red: #A8261E; --good: #136B44; --bad: #A8261E; --good-bg: #DCEFE4; --bad-bg: #F6E0DC;
  --card: #FFFDF8; --card-ink: #17191A; --card-red: #B32A21; --back-1: #74261F; --back-2: #93392F;
  --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --body: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --ground: #0D1612; --panel: #15211C; --panel-2: #1B2A23; --ink: #E6EEE9; --muted: #9DB2A8; --line: #2A3D34;
  --felt: #183E30; --felt-2: #215340; --felt-ink: #EEF5F0; --felt-muted: #B2C8BD; --rail: #2B1F16; --room: #08100D;
  --accent: #E6BF64; --accent-fill: #D9A93C; --accent-on: #1C1505;
  --text-red: #FF9384; --good: #74D6A3; --bad: #FF9384; --good-bg: #173A2A; --bad-bg: #3E1F1C;
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --ground: #0D1612; --panel: #15211C; --panel-2: #1B2A23; --ink: #E6EEE9; --muted: #9DB2A8; --line: #2A3D34;
  --felt: #183E30; --felt-2: #215340; --felt-ink: #EEF5F0; --felt-muted: #B2C8BD; --rail: #2B1F16; --room: #08100D;
  --accent: #E6BF64; --accent-fill: #D9A93C; --accent-on: #1C1505;
  --text-red: #FF9384; --good: #74D6A3; --bad: #FF9384; --good-bg: #173A2A; --bad-bg: #3E1F1C;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { background: var(--ground); color: var(--ink); font-family: var(--body); font-size: 15px; line-height: 1.45; -webkit-tap-highlight-color: transparent; }
body.at-table { background: var(--room); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid var(--accent-fill); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
.red { color: var(--text-red); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#app { height: 100%; display: flex; flex-direction: column; }
#main { flex: 1 1 auto; min-height: 0; overflow: auto; }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }

/* header */
.top { flex: none; border-bottom: 1px solid var(--line); background: var(--panel); }
.at-table .top { background: var(--room); border-color: #1F3029; color: #E6EEE9; --line: #2A3D34; --muted: #9DB2A8; --panel: #15211C; --panel-2: #1B2A23; --ink: #E6EEE9; }
.top .bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding-block: 8px; min-height: 60px; }
.at-table .top .bar { max-width: none; min-height: 52px; padding-block: 4px; }
.brand { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; color: inherit; min-height: 44px; }
.brand b { font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; }
.mark { width: 22px; height: 22px; }
.tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.tab { border: 0; background: transparent; padding: 0 14px; min-height: 44px; border-radius: 10px; font-weight: 600; color: var(--muted); }
.tab[aria-selected="true"] { background: var(--panel-2); color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent-fill); }
.tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.tool { min-width: 44px; min-height: 44px; border-radius: 10px; border: 1px solid var(--line); background: transparent; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; font-weight: 600; font-size: 14px; }
.tool svg { width: 20px; height: 20px; }
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.lang button { border: 0; background: transparent; min-height: 42px; padding: 0 10px; font-weight: 600; font-size: 13px; color: var(--muted); }
.lang button[aria-pressed="true"] { background: var(--panel-2); color: var(--ink); }
.who { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; min-height: 44px; padding: 0 4px; font-weight: 600; max-width: 220px; }
.who img, .avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; object-fit: cover; }
.who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; background: var(--accent-fill); color: var(--accent-on); white-space: nowrap; }
.tbl-title { display: flex; flex-direction: column; min-width: 0; }
.tbl-title b { font-family: var(--display); font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl-title span { font-size: 12px; color: var(--muted); }

/* buttons and bits */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); font-weight: 600; text-decoration: none; }
.btn.primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-on); }
.btn.danger { color: var(--bad); }
.btn.small { min-height: 38px; padding: 0 12px; font-size: 14px; }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: 0.5; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row .grow { flex: 1 1 auto; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--panel-2); color: var(--muted); white-space: nowrap; }
.tag.open { background: var(--good-bg); color: var(--good); }
.tag.done { background: var(--good-bg); color: var(--good); }
.tag.gold { background: var(--accent-fill); color: var(--accent-on); }
.card-panel, .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.panel h2 { font-size: 12px; font-family: var(--body); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.empty { border: 1px dashed var(--line); border-radius: 14px; padding: 24px; color: var(--muted); text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.note { background: var(--panel-2); border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field label { font-size: 13px; color: var(--muted); font-weight: 500; }
.field input, .field select { min-height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); padding: 0 12px; width: 100%; }
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; align-items: end; }

/* lobby */
main.lobby { padding-block: 26px 56px; display: flex; flex-direction: column; gap: 26px; }
.head h1 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; }
.head p { color: var(--muted); margin-top: 6px; max-width: 64ch; }
.events { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 16px; }
.ev { position: relative; overflow: hidden; border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 14px; min-height: 230px; background: var(--felt); color: var(--felt-ink); }
.ev.weekly { background: linear-gradient(160deg, var(--felt-2), var(--felt) 60%); }
.ev .eyebrow { color: var(--felt-muted); }
.ev h2 { font-size: 26px; font-weight: 800; }
.ev .meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--felt-muted); font-size: 14px; }
.ev .progress { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.14); overflow: hidden; }
.ev .progress i { display: block; height: 100%; background: var(--accent-fill); border-radius: 999px; }
.ev .btn { align-self: flex-start; margin-top: auto; }
.ev .deco { position: absolute; right: -14px; top: 16px; display: flex; opacity: 0.9; pointer-events: none; }
.ev .deco .card { --cw: 46px; }
.ev .deco .card + .card { margin-left: -24px; }
.ev .tag { background: rgba(255,255,255,0.14); color: var(--felt-ink); }
.ev .tag.gold { background: var(--accent-fill); color: var(--accent-on); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; align-items: start; }
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }
.list .grow { flex: 1 1 200px; min-width: 0; }
.ratingbig { font-family: var(--display); font-size: 46px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.stat { background: var(--panel-2); border-radius: 12px; padding: 10px 12px; }
.stat b { display: block; font-family: var(--display); font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12px; color: var(--muted); }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
table.std { width: 100%; border-collapse: collapse; font-size: 14px; }
table.std th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.std td { padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.std tr:last-child td { border-bottom: 0; }
table.std td.num, table.std th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.std tr.me td { background: var(--panel-2); font-weight: 600; }
table.std tr.robot td { color: var(--muted); font-style: italic; }
table.std tr.click { cursor: pointer; }
table.std .name { display: inline-flex; align-items: center; gap: 8px; }
table.std .avatar { width: 26px; height: 26px; }
.up { color: var(--good); } .down { color: var(--bad); }
.boards { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; }
.bd { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--panel); display: flex; flex-direction: column; gap: 4px; min-height: 88px; text-align: left; }
.bd b { font-family: var(--display); font-size: 18px; }
.bd.done { background: var(--panel-2); }
.bd.next { border-color: var(--accent-fill); box-shadow: 0 0 0 2px var(--accent-fill) inset; }
.lessons { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.lesson { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px; text-align: left; min-height: 160px; }
.lesson h3 { font-size: 20px; font-weight: 700; }
.lesson .meta { display: flex; justify-content: space-between; gap: 8px; }
.syscard .sysgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 24px; }
.sysgrid div { display: grid; grid-template-columns: 9ch minmax(0, 1fr); gap: 8px; padding-block: 7px; border-bottom: 1px solid var(--line); font-size: 14px; }
.sysgrid b { font-family: var(--mono); }
.spark { width: 100%; height: 90px; display: block; }
.spark path.line { fill: none; stroke: var(--accent-fill); stroke-width: 2.5; }
.spark path.area { fill: var(--accent-fill); opacity: 0.14; }
.spark line { stroke: var(--line); stroke-dasharray: 3 4; }
.spark circle { fill: var(--accent-fill); }
.spark text { fill: var(--muted); font-size: 11px; font-family: var(--mono); }
.seats { display: flex; gap: 6px; flex-wrap: wrap; }
.seat { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 3px 8px; font-size: 13px; max-width: 170px; }
.seat b { font-family: var(--mono); } .seat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat.open { border-style: dashed; color: var(--muted); }

/* ---------- table ---------- */
main.room { height: 100%; display: flex; gap: 12px; padding: 12px max(12px, env(safe-area-inset-right, 0px)) 12px max(12px, env(safe-area-inset-left, 0px)); background: var(--room); }
.felt { flex: 1 1 auto; min-width: 0; min-height: 0; position: relative; container-type: size; color: var(--felt-ink);
  background: radial-gradient(ellipse 75% 70% at 50% 50%, var(--felt-2), var(--felt) 72%); border: 10px solid var(--rail); border-radius: 34px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05), inset 0 0 80px rgba(0,0,0,0.38), 0 10px 40px rgba(0,0,0,0.4);
  padding: 10px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "top top top" "left center right" "bottom bottom bottom"; gap: 6px;
  --cw: clamp(30px, min(8.6cqw, 11.5cqh), 104px); --sw: calc(var(--cw) * 0.74); --tw: calc(var(--cw) * 0.86); }
.pos-top { grid-area: top; } .pos-left { grid-area: left; } .pos-right { grid-area: right; } .pos-bottom { grid-area: bottom; }
.center { grid-area: center; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; min-height: 0; padding: 38px 42px; }
.spot { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.pos-left, .pos-right { justify-content: center; }
.pos-bottom { flex-direction: column-reverse; }
.chip { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; background: rgba(0,0,0,0.3); border-radius: 999px; padding: 4px 12px 4px 4px; max-width: 100%; color: var(--felt-ink); font-size: 14px; transition: box-shadow .2s; }
.chip .dir { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.16); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; font-family: var(--mono); flex: none; }
.chip.turn { box-shadow: 0 0 0 2px var(--accent-fill), 0 0 18px rgba(217,169,60,0.45); }
.chip.turn .dir { background: var(--accent-fill); color: var(--accent-on); }
.chip .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16ch; }
.chip .role { font-size: 12px; color: var(--felt-muted); }
.chip .vul { font-size: 11px; font-weight: 700; color: #FFB3A8; letter-spacing: 0.05em; }
.chip .bubble { font-family: var(--mono); font-weight: 600; background: var(--card); color: var(--card-ink); border-radius: 7px; padding: 0 7px; }
.chip .bubble .red { color: var(--card-red); }
@media (prefers-reduced-motion: no-preference) { .chip.turn { animation: glow 1.8s ease-in-out infinite; } }
@keyframes glow { 50% { box-shadow: 0 0 0 2px var(--accent-fill), 0 0 28px rgba(217,169,60,0.7); } }

.card { width: var(--cw); height: calc(var(--cw) * 1.4); border-radius: calc(var(--cw) * 0.1); background: var(--card); color: var(--card-ink); border: 0; padding: calc(var(--cw) * 0.07) calc(var(--cw) * 0.08);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; box-shadow: 0 1px 1px rgba(0,0,0,0.2), 0 3px 8px rgba(0,0,0,0.32);
  font-family: var(--display); line-height: 1; flex: none; position: relative; transition: transform .16s cubic-bezier(.3,.7,.3,1.3), box-shadow .16s; user-select: none; -webkit-user-select: none;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0) 40%); }
.card.red { color: var(--card-red); }
.card .r { font-weight: 800; font-size: calc(var(--cw) * 0.34); letter-spacing: -0.04em; }
.card .s { font-size: calc(var(--cw) * 0.3); margin-top: calc(var(--cw) * -0.02); }
.card .big { align-self: flex-end; font-size: calc(var(--cw) * 0.56); }
.fan { display: flex; justify-content: center; max-width: 100%; padding-top: calc(var(--cw) * 0.22); }
.fan .card + .card { margin-left: calc(var(--cw) * -0.42); }
.fan .gap { width: calc(var(--cw) * 0.14); flex: none; }
.fan.small { --cw: var(--sw); padding-top: calc(var(--cw) * 0.12); }
.fan.small .card + .card { margin-left: calc(var(--cw) * -0.5); }
.fan.col { flex-direction: column; align-items: center; padding-top: 0; }
.fan.col .card + .card { margin-left: 0; margin-top: calc(var(--cw) * -1.12); }
.fan.col .gap { height: calc(var(--cw) * 0.12); width: auto; }
button.card.legal { box-shadow: 0 0 0 2px var(--accent-fill), 0 4px 12px rgba(0,0,0,0.4); }
@media (hover: hover) { button.card.legal:hover { transform: translateY(-16%); } }
button.card.legal:focus-visible { transform: translateY(-16%); outline-offset: 3px; }
button.card.lifted { transform: translateY(-24%); box-shadow: 0 0 0 3px var(--accent-fill), 0 10px 22px rgba(0,0,0,0.5); z-index: 2; }
.card.dim { filter: brightness(0.7) saturate(0.6); }
.card.hint { box-shadow: 0 0 0 4px #7FD6FF, 0 4px 10px rgba(0,0,0,0.4); transform: translateY(-16%); }
.rows { display: flex; flex-direction: column; gap: 2px; font-family: var(--mono); font-size: clamp(12px, 2.3cqh, 17px); background: rgba(0,0,0,0.24); border-radius: 12px; padding: 6px 10px; max-width: 100%; }
.rows div { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.rows .sym { width: 1.2em; display: inline-block; }
.rows .sym.red { color: #FF9C8E; }
.rows button { border: 0; background: rgba(255,255,255,0.12); color: inherit; border-radius: 6px; padding: 2px 6px; min-height: 30px; min-width: 30px; font: inherit; }
.rows button.legal { background: var(--accent-fill); color: var(--accent-on); }
.rows button:disabled { background: transparent; }
.backs { display: flex; align-items: center; gap: 10px; color: var(--felt-muted); font-size: 13px; }
.backs .stack { display: flex; }
.backs .b { width: calc(var(--sw) * 0.62); height: calc(var(--sw) * 0.9); border-radius: 5px; border: 2px solid #F3EEE2; background: repeating-linear-gradient(45deg, var(--back-2) 0 3px, var(--back-1) 3px 6px); box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.backs .b + .b { margin-left: calc(var(--sw) * -0.46); }
/* hidden hands at the sides lie sideways, facing their player */
.pos-left .backs .stack, .pos-right .backs .stack { flex-direction: column; }
.pos-left .backs .b, .pos-right .backs .b { width: calc(var(--sw) * 0.9); height: calc(var(--sw) * 0.62); }
.pos-left .backs .b + .b, .pos-right .backs .b + .b { margin-left: 0; margin-top: calc(var(--sw) * -0.46); }
.pos-left .backs, .pos-right .backs { flex-direction: column; gap: 4px; }
/* compass letters around the middle of the table */
.compass { position: absolute; inset: 0; pointer-events: none; }
.cp { position: absolute; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 17px; font-weight: 700; color: var(--felt-ink); background: rgba(0,0,0,0.32); border: 2px solid rgba(255,255,255,0.28); }
.cp.ns { border-color: rgba(217,169,60,0.75); }
.cp.active { background: var(--accent-fill); color: var(--accent-on); border-color: var(--accent-fill); box-shadow: 0 0 16px rgba(217,169,60,0.6); }
.cp-top { top: 2px; left: 50%; transform: translateX(-50%); } .cp-bottom { bottom: 2px; left: 50%; transform: translateX(-50%); }
.cp-left { left: 2px; top: 50%; transform: translateY(-50%); } .cp-right { right: 2px; top: 50%; transform: translateY(-50%); }
/* bidding: each player's calls lie in front of them as bidding cards */
.bidtable { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto auto; grid-template-areas: ". top ." "left mid right" ". bottom ."; gap: 8px 10px; align-items: center; justify-items: center; width: 100%; }
.pile { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.p-top { grid-area: top; } .p-left { grid-area: left; } .p-right { grid-area: right; } .p-bottom { grid-area: bottom; flex-direction: column-reverse; }
.bt-mid { grid-area: mid; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.earlier { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; max-width: calc(var(--cw) * 3.2); }
.bidcard { display: inline-flex; align-items: center; justify-content: center; min-width: calc(var(--cw) * 1.2); height: calc(var(--cw) * 0.8); padding: 0 8px; border-radius: 10px;
  font-family: var(--display); font-weight: 800; font-size: calc(var(--cw) * 0.46); line-height: 1; letter-spacing: -0.01em; background: var(--card); color: var(--card-ink); box-shadow: 0 2px 6px rgba(0,0,0,0.35); white-space: nowrap; }
.bidcard .red { color: var(--card-red); }
.bidcard.pass { background: #2F8A57; color: #fff; font-size: calc(var(--cw) * 0.34); }
.bidcard.dbl { background: #C2392E; color: #fff; }
.bidcard.rdbl { background: #2D5DA8; color: #fff; }
.bidcard.small { min-width: calc(var(--cw) * 0.62); height: calc(var(--cw) * 0.44); font-size: calc(var(--cw) * 0.25); border-radius: 6px; padding: 0 5px; opacity: 0.92; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.bidcard.small.pass { font-size: calc(var(--cw) * 0.2); }
.bidcard.waiting { background: transparent; box-shadow: none; border: 2px dashed rgba(255,255,255,0.3); color: var(--accent-fill); }
.pile.turn .bidcard.waiting { border-color: var(--accent-fill); }
.pile.partner .bidcard.last { transform: scale(1.18); box-shadow: 0 0 0 3px var(--accent-fill), 0 6px 16px rgba(0,0,0,0.45); margin-block: 6px; }
.pile-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-fill); }
.p-top.partner { order: 0; }
.trick { position: relative; display: grid; grid-template-columns: calc(var(--tw) * 1.48) calc(var(--tw) * 1.12) calc(var(--tw) * 1.48); grid-template-rows: calc(var(--tw) * 1.44) calc(var(--tw) * 1.06) calc(var(--tw) * 1.44); justify-items: center; align-items: center; }
.trick .card { --cw: var(--tw); }
.trick .tslot { display: grid; place-items: center; width: 100%; height: 100%; }
.trick .t-top { grid-column: 2; grid-row: 1; } .trick .t-left { grid-column: 1; grid-row: 2; }
.trick .t-right { grid-column: 3; grid-row: 2; } .trick .t-bottom { grid-column: 2; grid-row: 3; }
/* every played card faces the player who played it */
.trick .face-top { transform: rotate(182deg); } .trick .face-left { transform: rotate(87deg); }
.trick .face-right { transform: rotate(-86deg); } .trick .face-bottom { transform: rotate(-2deg); }
.trick .t-mid { grid-column: 2; grid-row: 2; font-size: 12px; color: var(--felt-muted); line-height: 1.25; }
.trick .won { box-shadow: 0 0 0 3px var(--accent-fill), 0 6px 14px rgba(0,0,0,0.45); }
.status { background: rgba(0,0,0,0.32); border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: 14px; }
.boardline { font-size: 13px; color: var(--felt-muted); }
.scorebox { display: flex; flex-direction: column; align-items: center; gap: 6px; background: rgba(0,0,0,0.3); border-radius: 22px; padding: 18px 26px; }
.scorebox .ct { font-family: var(--display); font-size: clamp(26px, 6cqh, 46px); font-weight: 800; }
.scorebox .pts { font-family: var(--display); font-size: clamp(30px, 8cqh, 64px); font-weight: 800; color: var(--accent-fill); font-variant-numeric: tabular-nums; }
.banner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 5; }
.banner div { background: var(--card); color: var(--card-ink); border-radius: 18px; padding: 14px 28px; text-align: center; box-shadow: 0 16px 40px rgba(0,0,0,0.5); }
.banner b { display: block; font-family: var(--display); font-size: clamp(30px, 8cqh, 60px); font-weight: 800; line-height: 1.05; }
.banner b .red { color: var(--card-red); }
.banner span { font-size: 15px; color: #4A5C54; }
@media (prefers-reduced-motion: no-preference) { .banner div { animation: banner 1.7s cubic-bezier(.3,.7,.3,1.2) forwards; } }
@keyframes banner { 0% { transform: scale(.5); opacity: 0; } 18% { transform: scale(1.05); opacity: 1; } 26% { transform: scale(1); } 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.96) translateY(-12px); } }

.side { flex: 0 0 clamp(300px, 29vw, 380px); min-width: 0; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.side .panel { padding: 14px; gap: 10px; }
.auction { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; text-align: center; }
.auction .hd { font-size: 13px; font-weight: 600; color: var(--muted); padding-bottom: 2px; }
.auction .hd.me { color: var(--accent); }
.call { border: 0; background: var(--panel-2); border-radius: 8px; min-height: 42px; font-family: var(--mono); font-weight: 700; font-size: 18px; color: var(--ink); }
.call.pass { color: var(--muted); background: transparent; }
.call.sel { box-shadow: 0 0 0 2px var(--accent-fill); }
.call.blank { background: transparent; }
.call.ask { background: transparent; border: 2px dashed var(--line); color: var(--muted); }
.explain { background: var(--panel-2); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.box { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.box button, .box3 button { min-height: 44px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); font-family: var(--mono); font-weight: 600; font-size: 16px; transition: transform .1s; }
.box button:active:not(:disabled), .box3 button:active:not(:disabled) { transform: scale(0.94); }
.box button:disabled, .box3 button:disabled { opacity: 0.3; }
.box button[aria-pressed="true"], .box3 button[aria-pressed="true"] { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-on); }
.box3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.box3 button { font-family: var(--body); font-size: 15px; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.contract { display: flex; align-items: center; gap: 14px; }
.contract .big { font-family: var(--display); font-size: 40px; font-weight: 800; line-height: 1; }
.feedback { border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.feedback.good { background: var(--good-bg); } .feedback.bad { background: var(--bad-bg); }
.feedback b { display: block; margin-bottom: 2px; }
.feedback.good b { color: var(--good); } .feedback.bad b { color: var(--bad); }
.lessonbox { border-color: var(--accent-fill); }
.field-list { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.field-list div { display: grid; grid-template-columns: minmax(0, 1fr) auto 3.6em; gap: 8px; padding: 6px 8px; border-radius: 8px; align-items: center; }
.field-list div.me { background: var(--panel-2); font-weight: 600; }
.field-list div.robot { color: var(--muted); font-style: italic; }
.field-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chatlog { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow: auto; font-size: 14px; }
.chatlog .nm { font-weight: 600; }
.seatlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.seatlist .s { display: flex; justify-content: space-between; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 4px 4px 4px 10px; min-height: 46px; min-width: 0; }
.seatlist .s span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: var(--ground); padding: 10px 16px; border-radius: 10px; font-weight: 500; z-index: 20; max-width: calc(100% - 32px); }

/* tablet portrait: table on top, panels below in two columns */
@media (orientation: portrait) and (min-width: 700px) {
  main.room { flex-direction: column; }
  .felt { flex: 1 1 64%; }
  .side { flex: 1 1 36%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
  .felt { --cw: clamp(30px, min(7.6cqw, 11cqh), 98px); }
}
@media (prefers-reduced-motion: reduce) { .card, .chip { transition: none; } }

/* accounts */
.authwrap { max-width: 460px; margin: 0 auto; width: 100%; }
.authbox { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.authbox h1 { font-size: 30px; font-weight: 800; }
.authbox form { display: flex; flex-direction: column; gap: 12px; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; }
.check input { width: 20px; height: 20px; accent-color: var(--accent-fill); }
.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.provider { width: 100%; }
.linkbtn { border: 0; background: none; padding: 6px 0; color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; min-height: 36px; }
.err { background: var(--bad-bg); color: var(--ink); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.ok { background: var(--good-bg); color: var(--ink); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.login-cta { background: var(--accent-fill); color: var(--accent-on); border: 0; }
.subtabs { display: flex; gap: 4px; flex-wrap: wrap; }
.subtabs .tab { min-height: 40px; }
.busy { opacity: 0.6; pointer-events: none; }

/* ---------- phones ---------- */
.menubtn { display: none; }
.menu { position: fixed; z-index: 30; top: calc(env(safe-area-inset-top, 0px) + 58px); right: max(12px, env(safe-area-inset-right, 0px)); width: min(280px, calc(100vw - 24px));
  background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 16px 40px rgba(0,0,0,0.35); }
.menu .tool, .menu .who, .menu .btn { width: 100%; justify-content: flex-start; }
.menu .lang { align-self: flex-start; }
.menu .who { border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; max-width: none; }
.dock, .sheet { display: none; }
@media (max-width: 699px) {
  .wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .top .bar { min-height: 52px; padding-block: 4px; gap: 4px 8px; }
  .top .tools { display: none; }
  .menubtn { display: inline-flex; margin-left: auto; }
  .brand b { font-size: 21px; }
  /* every tab in view: three per row instead of a strip that runs off the screen */
  .tabs { order: 3; flex: 1 0 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 4px; padding-bottom: 2px; }
  .tabs .tab { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 6px; padding-right: 6px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; padding: 0 12px; }
  .tbl-title { flex: 1 1 auto; min-width: 0; }
  .at-table .top .bar { flex-wrap: nowrap; }
  .tbl-title b { font-size: 16px; }
  main.lobby { padding-block: 16px 40px; gap: 18px; }
  .head h1 { font-size: 26px; }
  .ev { padding: 18px; min-height: 0; }
  .ev .deco { display: none; }
  .card-panel, .panel { padding: 14px; }
  .ratingbig { font-size: 38px; }
  .authbox { padding: 18px; }

  /* the table: felt on top, a docked control strip below */
  main.room.phone { height: 100%; flex-direction: column; gap: 0; padding: 6px max(6px, env(safe-area-inset-right, 0px)) 0 max(6px, env(safe-area-inset-left, 0px)); }
  .phone .felt { flex: 1 1 auto; min-height: 0; border-width: 5px; border-radius: 18px; padding: 4px; gap: 2px;
    grid-template-columns: auto minmax(0, 1fr) auto; --cw: clamp(30px, min(14.6cqw, 17cqh), 66px); --sw: calc(var(--cw) * 0.7); --tw: calc(var(--cw) * 0.8); }
  .phone .fan { padding-top: calc(var(--cw) * 0.28); }
  .phone .fan .card + .card { margin-left: calc(var(--cw) * -0.56); }
  .phone .fan.small .card + .card { margin-left: calc(var(--cw) * -0.62); }
  .phone .fan .gap { width: 0; }
  .phone .fan .gap + .card { margin-left: calc(var(--cw) * -0.44); }
  .phone .fan.small .gap + .card { margin-left: calc(var(--cw) * -0.5); }
  .phone button.card.lifted { transform: translateY(-30%); }
  .phone .pos-bottom .fan, .phone .pos-top .fan { touch-action: none; }
  .phone .rows button.lifted { background: #fff; color: var(--card-ink); box-shadow: 0 0 0 2px var(--accent-fill); }
  .phone .chip { font-size: 12px; padding: 3px 8px 3px 3px; gap: 2px 6px; }
  .phone .chip .dir { width: 24px; height: 24px; font-size: 12px; }
  .phone .chip .nm { max-width: 10ch; }
  .phone .pos-left .chip, .phone .pos-right .chip { flex-direction: column; border-radius: 12px; padding: 4px; max-width: 72px; text-align: center; }
  .phone .pos-left .chip .nm, .phone .pos-right .chip .nm { max-width: 8ch; }
  .phone .pos-left .chip .role, .phone .pos-right .chip .role { font-size: 10px; }
  .phone .rows { font-size: 12px; padding: 4px 6px; max-width: 118px; }
  .phone .rows button { min-height: 30px; min-width: 26px; padding: 2px 4px; }
  .phone .backs { flex-direction: column; gap: 3px; font-size: 11px; }
  .phone .center { gap: 6px; padding: 30px 30px; }
  .phone .cp { width: 26px; height: 26px; font-size: 14px; }
  .phone .compass.playing .cp-left, .phone .compass.playing .cp-right, .phone .compass.playing .cp-bottom { display: none; }
  .phone .felt { --tw: calc(var(--cw) * 0.74); }
  .phone .bidcard { min-width: calc(var(--cw) * 1.05); height: calc(var(--cw) * 0.72); font-size: calc(var(--cw) * 0.42); }
  .phone .bidcard.small { min-width: calc(var(--cw) * 0.56); height: calc(var(--cw) * 0.4); font-size: calc(var(--cw) * 0.24); }
  .phone .bidtable { gap: 4px 4px; }
  .phone .bt-mid .boardline { display: none; }
  .phone .boardline { font-size: 11px; }
  .phone .status { font-size: 12px; padding: 4px 10px; }
  .phone .scorebox { padding: 10px 16px; border-radius: 16px; }
  .phone .banner b { font-size: 34px; }
  .dock { display: flex; flex: none; flex-direction: column; gap: 8px; max-height: 50%; overflow: auto; margin-top: 6px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-bottom: 0; border-radius: 18px 18px 0 0; }
  .dockrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 40px; }
  .dockrow .ct { font-family: var(--display); font-size: 22px; font-weight: 800; }
  .dockrow .grow { flex: 1 1 auto; }
  .bid2 { display: grid; gap: 6px; }
  .bid2 .lv { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .bid2 .st { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .bid2 .ca { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .bid2 button { min-height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); font-family: var(--mono); font-weight: 600; font-size: 17px; color: var(--ink); }
  .bid2 .ca button { font-family: var(--body); font-size: 15px; }
  .bid2 button:disabled { opacity: 0.3; }
  .bid2 button[aria-pressed="true"] { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-on); }
  .lesson-strip { font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
  .lesson-strip p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .lesson-strip.good b { color: var(--good); } .lesson-strip.bad b { color: var(--bad); }
  .dock .contract .big { font-size: 30px; }
  .sheet { display: flex; position: fixed; inset: 0; z-index: 25; background: rgba(0,0,0,0.5); align-items: flex-end; }
  .sheet-card { width: 100%; max-height: 86%; display: flex; flex-direction: column; background: var(--ground); color: var(--ink); border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
  .sheet-head b { font-family: var(--display); font-size: 18px; }
  .sheet-body { overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
}
@media (max-width: 699px) and (prefers-reduced-motion: no-preference) {
  .sheet-card { animation: sheetup .22s cubic-bezier(.2,.8,.3,1); }
  @keyframes sheetup { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* ---------- phones: more room for the table ---------- */
.pulltab { display: none; }
@media (max-width: 699px) {
  body.at-table .top { display: none; }
  body.at-table.hdr-open .top { display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 28; padding-top: env(safe-area-inset-top, 0px); box-shadow: 0 10px 30px rgba(0,0,0,0.45); }
  .pulltab { display: flex; align-self: center; align-items: center; gap: 6px; max-width: calc(100% - 24px); min-height: 26px; margin: 0 auto 4px; padding: 2px 10px 2px 14px; border: 0; border-radius: 0 0 12px 12px;
    background: #1B2A23; color: #CFE0D7; font-size: 12px; font-weight: 600; touch-action: none; }
  .pulltab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  main.room.phone { padding-top: 0; }

  /* your own hand: a gentle fan with large corners */
  .phone .pos-bottom .chip { display: none; }
  .phone .pos-bottom .fan { padding-top: calc(var(--cw) * 0.34); padding-bottom: 6px; }
  .phone .pos-bottom .fan .card { transform: translateY(var(--arc, 0px)) rotate(var(--rot, 0deg)); transform-origin: 50% 130%; padding: calc(var(--cw) * 0.06) calc(var(--cw) * 0.07); }
  .phone .pos-bottom .fan button.card.lifted { transform: translateY(calc(var(--arc, 0px) - 30%)) rotate(var(--rot, 0deg)); }
  .phone .pos-bottom .card .r { font-size: calc(var(--cw) * 0.42); }
  .phone .pos-bottom .card .s { font-size: calc(var(--cw) * 0.38); }
  .phone .pos-bottom .card .big { font-size: calc(var(--cw) * 0.5); }
  .phone .pos-bottom .fan .card + .card { margin-left: calc(var(--cw) * -0.55); }
  .phone .pos-bottom .fan .gap + .card { margin-left: calc(var(--cw) * -0.42); }
  .phone .felt { --cw: clamp(30px, min(12.8cqw, 15cqh), 64px); }

  /* hidden hands: no counts, smaller stacks */
  .phone .backs > span { display: none; }
  .phone .pos-top .backs .b { width: calc(var(--sw) * 0.62); height: calc(var(--sw) * 0.86); }
  .phone .pos-top .backs .b + .b { margin-left: calc(var(--sw) * -0.36); }

  /* bidding: just the four piles; the dock already says it is your turn */
  .phone .center.ph-bidding { padding: 2px 4px; }
  .phone .center.ph-bidding .compass, .phone .center.ph-bidding .bt-mid { display: none; }
  .phone .bidtable { grid-template-rows: auto minmax(calc(var(--cw) * 0.7), auto) auto; cursor: pointer; }
  .phone .p-bottom .bidcard.waiting { display: none; }
  .phone .pile.partner .bidcard.last { transform: scale(1.12); }
  .phone .pile-label { font-size: 10px; }

  /* compact bidding box */
  .bid2 { gap: 5px; }
  .bid2 button { min-height: 42px; }
  .bid2 .ca { grid-template-columns: 1fr 1fr 1fr 2.4fr; }
  .bid2 .ca .go { min-height: 42px; border-radius: 10px; font-size: 15px; padding: 0 8px; }
  .dock { padding-top: 8px; gap: 6px; }
}

/* partner's hidden hand: all cards, spread like a held hand */
.pos-top .backs .b + .b { margin-left: calc(var(--sw) * -0.34); }

/* ---------- phones: the big hand ---------- */
.bighand { display: none; }
@media (max-width: 699px) {
  .bighand { --hw: min(24vw, 100px); container-type: inline-size; display: block; position: relative; flex: none; z-index: 3; height: calc(var(--hw) * 1.4 + 50px); margin-top: calc(var(--hw) * -0.46);
    overflow: hidden; overflow: clip visible; touch-action: none; user-select: none; -webkit-user-select: none; }
  .bighand.resting { --hw: min(19vw, 80px); }
  .bh-fan { --step: calc(var(--hw) * 0.46); position: absolute; left: 50%; top: 32px; height: calc(var(--hw) * 1.4); width: calc(var(--hw) + (var(--n) - 1) * var(--step));
    transform: translateX(calc(-50% + var(--off, 0px))); transition: transform .12s ease-out; }
  /* not your turn: the whole hand fits on screen with room at both sides */
  .bighand:not(.active) .bh-fan { --step: min(calc(var(--hw) * 0.46), calc((100cqw - 56px - var(--hw)) / max(var(--n) - 1, 1))); transform: translateX(-50%); }
  .bh-fan .card { --cw: var(--hw); position: absolute; top: 0; left: calc(var(--i) * var(--step));
    transform: translateY(var(--arc, 0px)) rotate(var(--rot, 0deg)); transform-origin: 50% 100%; transition: transform .14s ease, box-shadow .14s ease;
    box-shadow: -2px 0 6px rgba(0,0,0,0.25), 0 4px 10px rgba(0,0,0,0.35); }
  .bh-fan .card .r { font-size: calc(var(--cw) * 0.36); }
  .bh-fan .card .s { font-size: calc(var(--cw) * 0.32); }
  .bh-fan .card.legal { box-shadow: 0 0 0 2px rgba(217,169,60,0.85), 0 4px 10px rgba(0,0,0,0.35); }
  .bh-fan .card.dim { filter: brightness(0.62) saturate(0.6); }
  .bh-fan .card.lifted { z-index: 5; transform: translateY(calc(var(--arc, 0px) - 28px)) rotate(0deg) scale(1.08);
    box-shadow: 0 0 0 3px var(--accent-fill), 0 12px 24px rgba(0,0,0,0.5); }
  .bh-fan .card.dim.lifted { box-shadow: 0 0 0 3px rgba(255,255,255,0.5), 0 12px 24px rgba(0,0,0,0.5); }
  .bh-fan.following { transition: none; }
  .bh-label { position: absolute; z-index: 6; top: 4px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 600;
    color: var(--felt-ink); background: rgba(0,0,0,0.5); padding: 3px 12px; border-radius: 999px; }
  .drag-ghost { transform: rotate(-5deg) scale(1.08); transition: transform .12s ease, box-shadow .12s ease; box-shadow: 0 18px 40px rgba(0,0,0,0.55); }
  .drag-ghost.over { transform: rotate(0deg) scale(1.14); box-shadow: 0 0 0 3px var(--accent-fill), 0 18px 40px rgba(0,0,0,0.55); }
  .felt.dropping .center { box-shadow: inset 0 0 0 3px rgba(217,169,60,0.6); border-radius: 22px; }
  .phone .pos-bottom { min-height: 0; }
}
@media (max-width: 699px) and (prefers-reduced-motion: reduce) { .bh-fan .card { transition: none; } }

/* phones: a bigger bidding box */
@media (max-width: 699px) {
  .bid2 { gap: 6px; }
  .bid2 .lv, .bid2 .st, .bid2 .ca { gap: 6px; }
  .bid2 button { min-height: 52px; font-size: 21px; border-radius: 12px; }
  .bid2 .ca button { font-size: 17px; }
  .bid2 .ca .go { min-height: 52px; font-size: 17px; }
  .dock { max-height: 56%; }
}

/* ---------- system cards ---------- */
.sysbadge { position: absolute; top: 10px; right: 10px; z-index: 8; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.32); color: var(--felt-ink); font: italic 700 16px/1 Georgia, 'Times New Roman', serif; cursor: pointer; display: grid; place-items: center; padding: 0; }
.sysbadge:hover, .sysbadge[aria-expanded="true"] { background: var(--accent-fill); color: var(--accent-on); border-color: var(--accent-fill); }
.sysbadge::after { content: ''; position: absolute; inset: -8px; }
.syspop { position: absolute; top: 48px; right: 10px; z-index: 30; width: min(560px, calc(100% - 20px)); max-height: calc(100% - 58px); overflow: auto;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,0.45); padding: 12px 14px 14px; }
.syspop .sp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.syspop .sp-body { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.syspop h3 { font-size: 17px; margin: 2px 0 0; }
.syspop .sysgrid { grid-template-columns: 1fr; gap: 4px; margin-top: 8px; font-size: 13px; }
@media (max-width: 699px) {
  .sysbadge { top: 6px; right: 8px; width: 28px; height: 28px; font-size: 15px; }
  .syspop { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: auto; max-height: 78vh; border-radius: 18px 18px 0 0; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .syspop .sp-body { grid-template-columns: 1fr; }
}
.setup { display: grid; gap: 8px; margin-bottom: 12px; }
.setup .fixed { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 10px 0; }
.mode { text-align: left; display: grid; gap: 4px; padding: 14px; border-radius: 14px; border: 1.5px solid var(--line, rgba(0,0,0,0.15)); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.mode b { font-size: 17px; }
.mode span { font-size: 14px; opacity: 0.8; }
.mode[aria-checked="true"] { border-color: var(--accent-fill); box-shadow: 0 0 0 2px var(--accent-fill) inset; }
.syseditor { display: grid; gap: 12px; }
.sysfields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 14px; }
.systoggles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px 14px; }
.sysprev { border: 1px dashed var(--line, rgba(0,0,0,0.2)); border-radius: 14px; padding: 12px 14px; }
.sysprev .sysgrid { margin-top: 8px; }
.tool .menu-only { display: none; }
.menu .tool .menu-only { display: inline; }
.menu .tool { width: auto; gap: 8px; padding: 0 12px; }

/* ---------- replay step by step ---------- */
.stepbar { display: grid; gap: 8px; margin-top: 8px; }
.stepbtns { gap: 6px; flex-wrap: nowrap; }
.stepbtns .btn { min-width: 44px; justify-content: center; font-size: 15px; }
.steprange { width: 100%; accent-color: var(--accent-fill); }
.steptext { font-size: 14px; min-height: 2.6em; }
.dock .stepbar.compact { margin: 0; }
.dock .stepbar.compact .stepbtns { justify-content: space-between; }
.dock .stepbar.compact .stepbtns .btn { flex: 1; min-height: 44px; }
.dock .stepbar.compact .steptext { min-height: 0; }

/* ---------- partners choose a system ---------- */
.vote { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--accent-fill); background: var(--panel-2); }
.vote select { width: 100%; }
.vote p { margin: 0; }
.dock .vote { margin-bottom: 8px; }

/* phones: the play bar is one row that never wraps */
@media (max-width: 699px) {
  .dockrow.playbar { flex-wrap: nowrap; gap: 6px; }
  .playbar .ct { white-space: nowrap; flex: none; }
  .playbar .tricks { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; min-width: 0; }
  .playbar .tricks b { font-weight: 700; }
  .playbar .btn { flex: none; }
  .playbar .btn.icon { width: 44px; min-height: 40px; padding: 0; display: inline-grid; place-items: center; }
  .playbar .btn.icon svg { width: 20px; height: 20px; }
  .playbar .btn.icon:disabled { opacity: 0.35; }
}

/* the suggested card: a blue ring that wins over the legal-card outline */
.fan .card.hint, .rows button.hint, .bh-fan .card.hint, .bh-fan .card.hint.lifted { box-shadow: 0 0 0 4px #7FD6FF, 0 10px 22px rgba(0,0,0,0.45); }
.rows button.hint { background: #7FD6FF; color: #0A2230; border-radius: 6px; }
.btn.bulb { gap: 6px; }
.btn.bulb svg, .bid2 .bulb svg, .suggest .ic svg { width: 18px; height: 18px; }
@media (max-width: 699px) {
  .bid2.help .ca { grid-template-columns: 1fr 1fr 1fr 0.9fr 2.2fr; }
  .bid2 .bulb { display: inline-grid; place-items: center; padding: 0; }
  .bid2 .bulb svg { width: 22px; height: 22px; }
  .bid2 .suggest { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.3; padding: 8px 10px; border-radius: 10px; background: rgba(127,214,255,0.18); border: 1px solid #7FD6FF; }
  .bid2 .suggest .ic { flex: none; color: inherit; margin-top: 1px; }
}

/* replay button under a finished board */
.result-extra .btn { display: inline-flex; align-items: center; gap: 6px; }
.result-extra .btn svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 699px) { .result-extra .btn { flex: 1 1 0; justify-content: center; } }

/* a played card that lies sideways or upside down turns upright under the mouse, so you can read it */
.trick .card { transition: transform .18s ease, box-shadow .18s ease; }
@media (hover: hover) and (pointer: fine) {
  .trick .tslot:hover { position: relative; z-index: 6; }
  .trick .tslot:hover .card { transform: rotate(0deg) scale(1.12); box-shadow: 0 10px 24px rgba(0,0,0,0.45); }
}

/* dragging a card with the mouse */
body.dragging-card, body.dragging-card * { cursor: grabbing !important; user-select: none; }
.fan button.card.legal, .rows button.legal { cursor: grab; }
.drag-ghost .r { font-size: calc(var(--cw) * 0.36); }

/* replay of a board you just played: back to the result, or on to the next one */
.steps-back { gap: 8px; }
.steps-back .btn { display: inline-flex; align-items: center; gap: 6px; }
.steps-back .btn svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 699px) { .dock .steps-back { flex-wrap: nowrap; } .dock .steps-back .btn { flex: 1 1 auto; justify-content: center; padding: 0 10px; } }

/* system card editor: options left, a live preview of the card right */
.syseditor .se-cols { display: grid; gap: 16px; }
.se-opts { display: grid; gap: 14px; align-content: start; min-width: 0; }
.se-group { border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px 12px; margin: 0; display: grid; gap: 10px; min-width: 0; }
.se-group legend { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 0 6px; }
.se-prev { border-radius: 16px; padding: 14px 16px; background: var(--panel-2); border: 1px solid var(--line); align-self: start; min-width: 0; }
.se-prev h3 { font-size: 21px; margin: 4px 0 0; overflow-wrap: anywhere; }
.se-prev p { margin: 2px 0 8px; }
.se-prev .sysgrid { display: grid; grid-template-columns: 1fr; gap: 0; }
.se-actions { justify-content: flex-start; }
@media (min-width: 860px) {
  .syseditor .se-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .se-opts .sysfields { grid-template-columns: 1fr 1fr; }
  .se-opts .systoggles { grid-template-columns: 1fr; }
  .se-prev { position: sticky; top: 12px; }
}
.form.syseditor { grid-template-columns: 1fr; align-items: start; gap: 16px; }
.form.syseditor .se-cols { width: 100%; }

/* free play: new deal and system card side by side, the last games below in one row */
.freegrid { align-items: start; }
.freegrid .syscard .sysgrid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.freehist { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); grid-template-rows: auto; grid-auto-rows: 0; row-gap: 0; column-gap: 12px; overflow: hidden; margin-top: 4px; }
.hcard { min-width: 0; min-height: 0; overflow: hidden; }
.hc-in { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); height: 100%; box-sizing: border-box; }
.hc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hc-top b { font-size: 15px; }
.hc-score { font-size: 20px; font-weight: 700; }
.hc-res { font-family: var(--display); font-size: 18px; font-weight: 700; }
.hc-act { display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 4px; }
.hc-act .btn { display: inline-flex; align-items: center; gap: 5px; }
.hc-act .btn svg { width: 16px; height: 16px; }
@media (max-width: 699px) {
  .freehist { grid-template-columns: 1fr; grid-auto-rows: auto; row-gap: 10px; }
  .freehist .hcard:nth-child(n+6) { display: none; }
}

/* free play: new deal and recent games on the left, a slim system card on the right */
.freegrid { display: grid; gap: 18px; align-items: start; }
.freemain { display: grid; gap: 18px; min-width: 0; }
.freemain > .card-panel { margin: 0; }
.syscard-slim { padding: 18px 20px; }
.syscard-slim .row { margin-top: 10px; }
@media (min-width: 900px) {
  .freegrid { grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); }
  .syscard-slim { position: sticky; top: 12px; }
}
.evsys p { margin: 6px 0 0; }

.hc-act .btn.icon { width: 36px; padding: 0; justify-content: center; }

/* phones: messages appear at the top, never over your hand or the bid box */
@media (max-width: 699px) {
  .toast { bottom: auto; top: calc(10px + env(safe-area-inset-top, 0px)); text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
}

/* admin tournament list: on narrow screens each tournament is a small card, no sideways scrolling */
@media (max-width: 899px) {
  table.evadmin, table.evadmin tbody { display: block; }
  table.evadmin thead { display: none; }
  table.evadmin tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  table.evadmin td { display: block; padding: 0; border: 0; text-align: left; }
  table.evadmin td:first-child { flex: 1 0 100%; }
  table.evadmin td[data-label]::before { content: attr(data-label) ' '; color: var(--muted); font-family: var(--body); font-size: 13px; }
  table.evadmin td.num[data-label] { order: 2; }
  table.evadmin td.ev-actions { flex: 1 0 100%; order: 3; margin-top: 4px; }
  table.evadmin td.ev-actions .row { flex-wrap: wrap !important; }
  .tablewrap:has(table.evadmin) { overflow-x: visible; }
}