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 (2, 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.out { opacity: 0.6; }
.seat .pid { font-weight: bold; }
.seat .books { color: #006; }
.hand { display: flex; flex-wrap: wrap; gap: 0.25em; margin-top: 0.5em; }
.rank-btn { padding: 0.3em 0.6em; border: 1px solid #999; border-radius: 4px; background: #fff; cursor: pointer; font-family: monospace; min-width: 2em; }
.rank-btn.selected { background: #ffaa00; border-color: #c70; }
.rank-btn[disabled] { cursor: default; opacity: 0.5; }
.opponent-btn { padding: 0.3em 0.8em; border: 1px solid #999; border-radius: 4px; background: #fff; cursor: pointer; }
.opponent-btn[disabled] { cursor: default; opacity: 0.4; }
.ask-log { max-height: 14em; overflow: auto; border: 1px solid #ddd; padding: 0.4em; font-size: 0.85em; background: #fff; }
.ask-log .entry { padding: 0.15em 0; border-bottom: 1px dotted #eee; }
.ask-log .entry.hit { color: #0a6; }
.ask-log .entry.miss { color: #666; }
#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; }