body { font-family: system-ui, -apple-system, sans-serif; margin: 0 1em; color: #222; }
h1 { margin: 0.5em 0; }
h2 { border-bottom: 1px solid #ccc; padding-bottom: 0.25em; margin-top: 1em; }
header { background: #f4f4f4; padding: 0.5em; }
section { margin: 1em 0; }
.row { display: flex; gap: 0.75em; align-items: center; flex-wrap: wrap; margin: 0.5em 0; }
label { display: flex; gap: 0.25em; align-items: center; }
button { padding: 0.3em 0.8em; cursor: pointer; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
table { border-collapse: collapse; width: 100%; font-size: 0.9em; }
th, td { border: 1px solid #ddd; padding: 0.25em 0.5em; text-align: left; }
.hint { font-size: 0.85em; color: #555; }
/* grid-template-columns is set from JS per state.sitCount (3 or 4 seats); this is just a fallback. */
.seats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5em; }
.seat { border: 1px solid #ccc; padding: 0.5em; background: #fafafa; }
.seat.turn { background: #fffadd; border-color: #ffaa00; }
.seat.forfeited { opacity: 0.6; }
.seat .pid { font-weight: bold; }
.seat .bid { color: #006; }
#standings tr.forfeited { opacity: 0.6; }
.hand { display: flex; flex-wrap: wrap; gap: 0.25em; margin-top: 0.5em; }
.card { padding: 0.2em 0.4em; border: 1px solid #999; border-radius: 4px; background: #fff; cursor: pointer; font-family: monospace; }
.card.red { color: #c00; }
.card[disabled], .card.spec { cursor: default; opacity: 0.7; }
.trick { display: flex; gap: 0.5em; min-height: 2em; }
.trick .play { border: 1px solid #999; padding: 0.25em; border-radius: 4px; }
.bid-controls { margin-top: 0.5em; display: flex; gap: 0.25em; flex-wrap: wrap; }
.bid-controls input { width: 3em; }
#logBox { background: #111; color: #eee; padding: 0.5em; max-height: 12em; overflow: auto; font-size: 0.8em; }

/* Lobby rows for tables that are not joinable: still listed (a match you may be
   sitting in has to be visible), but clearly not an open seat. */
#lobbyTable tr.not-joinable { opacity: .55; }
#lobbyTable tr.my-table { outline: 2px solid #2e7d32; }
#lobbyTable tr.my-table td:first-child::after { content: ' (you)'; color: #2e7d32; font-weight: bold; }
#lobbyTable button.rejoin { padding: 2px 8px; }