/* ==========================================================================
   games.zzxcd.cn · table.css
   --------------------------------------------------------------------------
   联机桌游共用层（UNO 及后续桌游）：连接状态、房间面板、座位表、房规表单、
   通用按钮/输入/覆层/日志。**只有 UNO 自己的牌桌在 uno.css 里。**

   加载顺序固定：base.css → shell.css → table.css → <游戏>.css
   ⚠️ 通用词类名一律带 tbl- 前缀：`shell.css` 有 `.card`（首页模式菜单）、
      `.stat`（顶栏读数格）、`.switch`（表单开关），裸用会跨组件打架
      （AGENTS.md 4.1c 坑 5 / 4.1e 都记过这类事故）。
   ========================================================================== */

/* ---------- 连接状态 ---------- */
.tbl-conn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem;
  border: var(--rule);
  background: var(--sheet);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.tbl-conn::before {
  content: '';
  width: 0.42rem;
  height: 0.42rem;
  background: var(--ink-soft);
  border: 1px solid var(--ink);
}

.tbl-conn.on::before { background: var(--accent); }
.tbl-conn.off::before { background: var(--paper); }
.tbl-conn.busy::before { background: var(--ink); }

.tbl-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: 0.45rem 0.6rem;
  border: var(--rule);
  background: var(--sheet);
  box-shadow: var(--shadow-sm);
  font-size: 0.76rem;
  margin-bottom: var(--sp-3);
}

.tbl-banner.warn {
  border-width: 3px;
}

/* ---------- 面板 ---------- */
.tbl-panel {
  border: var(--rule);
  background: var(--sheet);
  box-shadow: var(--shadow);
  margin-bottom: var(--sp-3);
}

.tbl-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 0.5rem 0.7rem;
  border-bottom: 3px solid var(--ink);
  font-size: 0.94rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* 面板头右侧的动作组：⚠️ 用 space-between 时三个子项会变成「左 / 中 / 右」，
   两个按钮必须包在这一层里才会一起贴右边（用户截图反馈「复制邀请链接」飘到了中间） */
.tbl-panel-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

.tbl-panel-sub {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ink-soft);
}

.tbl-panel-body {
  padding: 0.7rem;
}

/* ---------- 房号 ---------- */
.tbl-code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 0.7rem;
  border-bottom: 2px solid var(--ink);
}

.tbl-code-val {
  font-family: var(--font-mono);
  font-size: 2.3rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.tbl-code-hint {
  font-size: 0.72rem;
  color: var(--ink-soft);
  text-align: center;
  padding: 0.5rem 0.7rem 0;
}

/* ---------- 座位表（房间大厅） ---------- */
.tbl-seats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-bottom: 2px solid var(--ink);
}

.tbl-seat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.6rem;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  min-height: 2.6rem;
}

.tbl-seat:nth-child(2n) { border-right: 0; }
.tbl-seat.empty { background: var(--paper); }
.tbl-seat.off { opacity: 0.55; }

.tbl-seat-idx {
  width: 1.4rem;
  height: 1.4rem;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--paper);
}

.tbl-seat.me .tbl-seat-idx { background: var(--ink); color: var(--paper); }
.tbl-seat-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tbl-seat-tag {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.1rem 0.3rem;
  border: 1px solid var(--ink);
  background: var(--paper);
}

.tbl-seat-tag.ok { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.tbl-seat-tag.host { background: var(--ink); color: var(--paper); }

/* ---------- 房规表单 ---------- */
.tbl-rules {
  display: flex;
  flex-direction: column;
}

.tbl-rule {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border-bottom: 2px solid var(--ink);
  flex-wrap: wrap;
}

.tbl-rule:last-child { border-bottom: 0; }

.tbl-rule-name {
  flex: 1 1 8rem;
  min-width: 0;
  font-size: 0.8rem;
  font-weight: 700;
}

.tbl-seg {
  display: flex;
  flex: 0 0 auto;
  border: 2px solid var(--ink);
}

.tbl-seg-btn {
  padding: 0.35rem 0.6rem;
  border-right: 2px solid var(--ink);
  background: var(--sheet);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.tbl-seg-btn:last-child { border-right: 0; }
.tbl-seg-btn.active { background: var(--ink); color: var(--paper); }
.tbl-seg-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.tbl-seg-btn:not(:disabled):active { transform: translate(2px, 2px); }

.tbl-rule-lock {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-soft);
}

/* ---------- 按钮 ---------- */
.tbl-row {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: 0.7rem;
}

.tbl-row.center { justify-content: center; }

.tbl-btn {
  flex: 1 1 7rem;
  padding: 0.6rem 0.9rem;
  border: 2px solid var(--ink);
  background: var(--sheet);
  box-shadow: var(--shadow-sm);
  font-size: 0.8rem;
  font-weight: 800;
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.tbl-btn:not(:disabled):hover { background: var(--paper); }
.tbl-btn:not(:disabled):active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.tbl-btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

.tbl-btn.primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

.tbl-btn.primary:not(:disabled):hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }

.tbl-btn.ghost { box-shadow: none; }
.tbl-btn.danger { border-color: var(--accent-ink); color: var(--accent-ink); }
.tbl-btn.sm { flex: 0 0 auto; padding: 0.35rem 0.6rem; font-size: 0.72rem; box-shadow: none; }

/* ---------- 输入 ---------- */
.tbl-field {
  display: flex;
  gap: var(--sp-2);
  padding: 0.7rem;
  align-items: center;
  flex-wrap: wrap;
}

.tbl-input {
  flex: 1 1 8rem;
  min-width: 0;
  padding: 0.5rem 0.6rem;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

.tbl-input::placeholder { color: var(--ink-soft); letter-spacing: normal; text-transform: none; font-weight: 400; }
.tbl-input:focus { outline: none; background: var(--sheet); box-shadow: var(--shadow-sm); }

/* ---------- 说明 / 空态 ---------- */
.tbl-note {
  padding: 0.6rem 0.7rem;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--ink-soft);
  border-top: 2px solid var(--ink);
}

.tbl-note b { color: var(--ink); }

.tbl-empty {
  padding: 1.4rem 0.7rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* ---------- 日志 ---------- */
.tbl-log {
  max-height: 9.5rem;
  overflow-y: auto;
  padding: 0.5rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.tbl-log-line {
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--ink-soft);
  padding-left: 0.75rem;
  position: relative;
}

.tbl-log-line::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.42rem;
  width: 0.34rem;
  height: 0.34rem;
  background: var(--accent);
  border: 1px solid var(--ink);
}

.tbl-log-line.mine { color: var(--ink); font-weight: 700; }

/* ---------- 覆层（选色 / 结算 / 加入房间） ---------- */
.tbl-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 3.4rem 1rem 1.5rem;
  background: var(--scrim);
  overflow-y: auto;
}

.tbl-overlay.open { display: flex; }
.tbl-overlay.mid { align-items: center; padding-top: 1.5rem; }

.tbl-modal {
  width: 100%;
  max-width: 26rem;
  background: var(--sheet);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-lg);
  padding: 1rem;
}

.tbl-modal h3 {
  font-size: 0.94rem;
  font-weight: 800;
  margin: 0 0 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 3px solid var(--ink);
}

/* ---------- 表格（结算用） ---------- */
.tbl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.tbl-table th,
.tbl-table td {
  padding: 0.4rem 0.5rem;
  border-bottom: 2px solid var(--ink);
  text-align: left;
}

.tbl-table th {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.tbl-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.tbl-table tr.win td { background: color-mix(in srgb, var(--accent) 14%, var(--sheet)); }

@media (max-width: 520px) {
  .tbl-seats { grid-template-columns: 1fr; }
  .tbl-seat:nth-child(2n) { border-right: 0; }
  .tbl-code-val { font-size: 1.9rem; }
}