/**
 * 牌桌样式。
 *
 * 布局策略（docs/CLIENT.md §5）：**同一套 DOM，两套 CSS**
 *   - 手机竖屏：手牌扇形铺满底部，对手在顶部一行，操作按钮大号贴底
 *   - 桌面横屏：对手分列左右，中间留出牌桌，按钮在右下
 *
 * 性能约束：动画只用 `transform` / `opacity`，手牌绝对定位不用 flex 重排。
 */

:root {
  --bg: #0b3d2e;
  --bg-deep: #072b20;
  --felt: #0f4d38;
  --felt-light: #14654a;
  --card-bg: #fdfdf7;
  --card-red: #c62828;
  --card-black: #1f2430;
  --gold: #f0c14b;
  --text: #eaf4ef;
  --text-dim: #9dc0ae;
  --danger: #e5534b;
  --ok: #4ec9a0;
  --radius: 10px;
  --card-w: 62px;
  --card-h: 88px;
  --speed: 180ms;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg-deep);
  color: var(--text);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  /* 移动端禁用长按选中与双击缩放，避免选牌时弹菜单 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

#app, .app {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse at 50% 42%, var(--felt-light) 0%, var(--felt) 45%, var(--bg) 100%);
}

/* ────────────────────────────── 顶栏 ────────────────────────────── */

.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
}

.topbar__left, .topbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.topbar__right { color: var(--text-dim); }

.badge {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-variant-numeric: tabular-nums;
}

.badge--mult { color: var(--gold); }

/* ────────────────────────────── 对手席位 ────────────────────────────── */

.seats {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  padding: 0 12px;
  justify-content: center;
}

.seat {
  position: relative;
  min-width: 132px;
  padding: 7px 10px 10px;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.26);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: border-color var(--speed), box-shadow var(--speed);
}

.seat--active {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 0 18px rgba(240, 193, 75, 0.25);
}

.seat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 13px;
  /* 张数压在牌背上面，所以要浮起来 */
  position: relative;
  z-index: 2;
}

.seat__role {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
}

.seat--landlord .seat__role { background: var(--gold); color: #3a2a00; }

.seat__name { color: var(--text-dim); }

.seat__count {
  position: relative;
  z-index: 2;
  font-size: 13px;
  margin-top: 3px;
  color: var(--text-dim);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.seat__count strong { color: var(--text); font-size: 17px; }

/**
 * 对手的牌背：**绝对定位**，压在底部当装饰。
 *
 * 早期用普通流式布局，它占的高度把「张数」挤到了牌背下面（被压住看不清）。
 * 改成绝对定位后，牌背只做视觉背景，文字始终在上面。
 */
.seat__cards {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 3px;
  height: 22px;
  display: flex;
  align-items: flex-end;
  z-index: 1;
  opacity: 0.85;
}

/* 对手的牌背一律加大：原来 15×24 太小，看不出张数、也看不清是牌 */
.seat__cards .card {
  width: 22px;
  height: 34px;
  border-radius: 3px;
  margin-right: -12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ── 座位旁展示「这家刚出了什么」 ── */

.seat__play {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 3px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.09);
  position: relative;
  z-index: 2;
}

.seat__play-cards { display: flex; gap: 1px; }

/* 座位旁的迷你牌：比手牌小，但仍要能认出点数和花色 */
.seat__play .card--mini {
  width: 26px;
  height: 38px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.seat__play .card--mini .card__rank { font-size: 11px; }
.seat__play .card--mini .card__suit { font-size: 8px; }
.seat__play .card--mini .card__corner--tl { top: 1px; left: 2px; }
.seat__play .card--mini .card__corner--br { right: 2px; bottom: 1px; }
.seat__play .card--mini .card__center { display: none; }
.seat__play .card--mini .card__joker-text { font-size: 7px; }

.seat__play-label {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}

.seat__play--pass {
  color: var(--text-dim);
  font-size: 12px;
  justify-content: center;
}

/* 新出的一手：从座位方向弹入 */
.seat__play--enter { animation: seat-play-in 260ms cubic-bezier(0.2, 0.9, 0.3, 1.3); }

@keyframes seat-play-in {
  from { opacity: 0; transform: translate3d(0, -12px, 0) scale(0.82); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* 轮到这家行动：整块席位亮起来 */
.seat--acting {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 0 18px rgba(240, 193, 75, 0.22);
}

/* 过牌的席位压暗，视觉上退到后面 */
.seat--passed { opacity: 0.62; }

/* ── 「需要压过」提示条 ── */
.table__need {
  margin-top: 6px;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(240, 193, 75, 0.18);
  border: 1px solid rgba(240, 193, 75, 0.5);
  color: var(--gold);
  font-size: 13px;
}

/* 需要我压过的那一手：金色描边点亮 */
.table__cards--target .card {
  box-shadow: 0 0 0 2px var(--gold), 0 3px 10px rgba(0, 0, 0, 0.5);
}

/* 别人的出牌：稍微压暗，和自己的区分开（自己的出牌更亮） */
.table__cards--other .card { filter: brightness(0.88); }

/* 首出提示：不用压任何牌 */
.table__need--lead {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-dim);
}

/* 出牌区的归属标签：底色加重，避免与背景糊在一起 */
.table__label {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
}

/* 底牌与出牌区：比手牌小一号，但**不能太小** ——
   34px 宽时中央点数图形会糊成一团黑点，看不清是什么牌 */
.table__bottom .card {
  width: 46px;
  height: 66px;
  border-radius: 6px;
}

.table__bottom .card .card__rank { font-size: 15px; }
.table__bottom .card .card__suit { font-size: 11px; }
.table__bottom .card .card__corner--tl { top: 3px; left: 3px; }
.table__bottom .card .card__corner--br { right: 3px; bottom: 3px; }
.table__bottom .card .card__center { inset: 18px 3px 18px 3px; }
.table__bottom .card .card__center--pips { padding: 0 4px; }
.table__bottom .card .card__pip { font-size: 9px; }
.table__bottom .card .card__center--ace { font-size: 24px; }
.table__bottom .card .card__face-letter { font-size: 15px; }
.table__bottom .card .card__face-suit { font-size: 11px; }
.table__bottom .card .card__joker-text { font-size: 10px; }
.table__bottom .card .card__center--joker { font-size: 16px; }

/* 出牌区上下留白：桌面横屏时中央区域很空旷，给点呼吸感 */
.table__bottom { margin: 4px 0 2px; }
.table__label { margin-right: 2px; }

.seat__more { margin-left: 12px; font-size: 11px; color: var(--text-dim); }

.seat__last {
  position: absolute;
  right: 8px;
  bottom: -9px;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--gold);
  color: #3a2a00;
}

/* ────────────────────────────── 中央牌桌 ────────────────────────────── */

.table {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 0;
  padding: 6px 12px;
}

.table__bottom {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.table__label { font-size: 12px; color: var(--text-dim); }

.table__cards { display: flex; gap: 3px; }

/**
 * 出牌动画：牌从「远处飞来」落到桌面上。
 *
 * 只改 `transform` 与 `opacity` —— 走合成层，不触发重排，稳 60fps。
 * 时长刻意短（220ms）：回合制游戏里出牌很频繁，动画拖沓会让人烦躁。
 */
.table__cards--enter .card {
  animation: card-land 220ms cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards;
}

@keyframes card-land {
  from {
    opacity: 0;
    transform: translate3d(0, 46px, 0) scale(0.82) rotate(-6deg);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
}

/* 每一张错开 35ms，形成「一张张甩出来」的观感 */
.table__cards--enter .card:nth-child(1) { animation-delay: 0ms; }
.table__cards--enter .card:nth-child(2) { animation-delay: 35ms; }
.table__cards--enter .card:nth-child(3) { animation-delay: 70ms; }
.table__cards--enter .card:nth-child(4) { animation-delay: 105ms; }
.table__cards--enter .card:nth-child(5) { animation-delay: 140ms; }
.table__cards--enter .card:nth-child(6) { animation-delay: 175ms; }
.table__cards--enter .card:nth-child(n+7) { animation-delay: 210ms; }

/* 过牌提示：小小的「不要」气泡从出牌区浮起 */
.table__pass {
  position: absolute;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13px;
  color: var(--text-dim);
  animation: pass-pop 900ms ease-out forwards;
  pointer-events: none;
}

@keyframes pass-pop {
  0% { opacity: 0; transform: translateY(8px) scale(0.9); }
  20% { opacity: 1; transform: translateY(0) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10px); }
}

/* ── 发牌动画 ── */

/**
 * 发牌：牌从牌桌中央飞向各家的座位。
 *
 * 用**一次性叠加层**实现（`.dealing__card`），动画结束就移除，
 * 不去动真实的手牌元素 —— 否则动画与手牌布局会互相干扰（改 transform 打架）。
 */
.dealing {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  overflow: hidden;
}

.dealing__card {
  position: absolute;
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 7px;
  background: repeating-linear-gradient(45deg, #1c5c8a 0 6px, #17496d 6px 12px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
  /* 起始位置由 JS 通过 CSS 变量给出（牌桌中央） */
  left: var(--deal-from-x);
  top: var(--deal-from-y);
  animation: deal-fly var(--deal-ms, 420ms) cubic-bezier(0.25, 0.8, 0.4, 1) forwards;
  animation-delay: var(--deal-delay, 0ms);
  opacity: 0;
}

@keyframes deal-fly {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.7) rotate(0deg);
  }
  8% { opacity: 1; }
  /* 过半就开始淡出：牌「落进」座位，而不是堆在目的地挡住手牌 */
  55% { opacity: 0.9; }
  100% {
    opacity: 0;
    /* 终点：相对起点的位移 + 缩小到座位牌的尺寸 */
    transform: translate3d(var(--deal-dx), var(--deal-dy), 0) scale(var(--deal-scale, 0.4)) rotate(var(--deal-rotate, 8deg));
  }
}

/* 手牌区在发牌过程中的「逐张浮现」 */
.hand--dealing .hand__card {
  animation: hand-card-in 200ms ease-out backwards;
}

@keyframes hand-card-in {
  from { opacity: 0; transform: translate3d(var(--x, 0), calc(var(--y, 0px) + 20px), 0); }
}

.table { position: relative; }

.table__banner {
  margin-top: 6px;
  font-size: 14px;
  color: var(--text-dim);
  padding: 4px 14px;
  border-radius: 999px;
  transition: color var(--speed), background var(--speed);
}

.table__banner--mine {
  color: #10231b;
  background: var(--gold);
  font-weight: 600;
  animation: breathe 1.6s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* ────────────────────────────── 手牌 ────────────────────────────── */

.hand-area {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 6px 8px 2px;
  /* 两行时高度由 JS 设定；单行时就是一张牌高 */
  min-height: var(--card-h);
}

.hand {
  position: relative;
  /* 尺寸由 JS 按「实际牌数 + 可用宽度」算好后写进这两个变量 */
  width: var(--hand-width, 100%);
  height: var(--hand-height, var(--card-h));
}

.card {
  position: relative;
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 7px;
  background: var(--card-bg);
  color: var(--card-black);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.42);
  font-weight: 700;
  line-height: 1;
  overflow: hidden;
  transition: transform var(--speed) cubic-bezier(0.2, 0.9, 0.3, 1.2), box-shadow var(--speed);
  will-change: transform;
}

.card--red { color: var(--card-red); }

/* ── 眉角索引：重叠时唯一看得见的部分，必须够大够清楚 ── */
.card__corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 索引宽度决定「重叠后能看到多少」，因此不设死宽度，靠字号撑开 */
  line-height: 1;
}

.card__corner--tl {
  top: 3px;
  left: 4px;
}

/* 右下角索引旋转 180°，与实物一致（正反都能认牌） */
.card__corner--br {
  right: 4px;
  bottom: 3px;
  transform: rotate(180deg);
}

.card__rank { font-size: 17px; letter-spacing: -0.5px; }
.card__suit { font-size: 13px; margin-top: 1px; }

/* ── 中央点数图形 ── */
.card__center {
  position: absolute;
  inset: 18px 5px 18px 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card__center--pips {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  place-items: center;
  padding: 0 6px;
}

.card__pip { font-size: 11px; opacity: 0.92; }

.card__center--ace { font-size: 30px; }

.card__center--face {
  flex-direction: column;
  gap: 1px;
  border: 1px solid currentColor;
  border-radius: 4px;
  margin: 0 8px;
  opacity: 0.85;
}

.card__face-letter { font-size: 18px; }
.card__face-suit { font-size: 13px; }

/* ── 王 ── */
.card--joker .card__corner .card__joker-text {
  font-size: 11px;
  writing-mode: vertical-rl;
  letter-spacing: 1px;
}

.card__center--joker { font-size: 20px; opacity: 0.7; }

/* ── 背面：一圈内边框，与实物一致 ── */
.card--back {
  background: repeating-linear-gradient(45deg, #1c5c8a 0 6px, #17496d 6px 12px);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.card__back-inner {
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 4px;
}

/**
 * 极小尺寸的牌背（对手席位 / 底牌）。
 *
 * 这个尺寸下斜纹会密到糊成一团灰点 —— 看起来像屏幕脏了。
 * 改成纯色 + 细边框，反而更像实物的小牌背。
 */
.card--tiny.card--back {
  background: linear-gradient(160deg, #1f6090, #143d5c);
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.card--tiny .card__back-inner { inset: 2px; border-width: 1px; opacity: 0.5; }

/* 手牌：绝对定位叠放；位置由 JS 用 transform 排布（避免 flex 重排） */
.hand__card {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}

.hand__card--selected {
  box-shadow: 0 0 0 2px var(--gold), 0 4px 12px rgba(240, 193, 75, 0.6);
  filter: brightness(1.06);
}

.hand__card--hint {
  outline: 2px solid var(--ok);
  outline-offset: 1px;
}

/* 第二行（牌多且窄屏时启用）：稍微压扁，两行也能放下 */
.hand--two-rows .hand__card { transform-origin: top left; }

/* ────────────────────────────── 大厅 ────────────────────────────── */

.lobby {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: radial-gradient(ellipse at 50% 30%, var(--felt-light) 0%, var(--bg) 70%);
  z-index: 30;
  overflow-y: auto;
}

.lobby[hidden] { display: none; }

.lobby__box {
  width: min(100%, 380px);
  text-align: center;
}

.lobby__title {
  margin: 0;
  font-size: 32px;
  letter-spacing: 4px;
  color: var(--gold);
}

.lobby__sub {
  margin: 6px 0 22px;
  font-size: 13px;
  color: var(--text-dim);
}

.mode {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform var(--speed), border-color var(--speed), background var(--speed);
}

.mode:active { transform: scale(0.98); }
.mode:hover, .mode--active { border-color: var(--gold); background: rgba(240, 193, 75, 0.1); }

.mode__icon { font-size: 26px; }

.mode__text { display: flex; flex-direction: column; gap: 3px; }
.mode__text strong { font-size: 16px; }
.mode__text small { font-size: 12px; color: var(--text-dim); }

.lobby__online {
  padding: 14px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.24);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lobby__online[hidden] { display: none; }

.lobby__join { display: flex; gap: 8px; }
.lobby__join .input { flex: 1 1 auto; }

.input {
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.34);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  text-align: center;
  min-height: 44px;
}

.input:focus { outline: none; border-color: var(--gold); }

.btn--block { width: 100%; }

.lobby__nick {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.lobby__nick label { font-size: 13px; color: var(--text-dim); flex: 0 0 auto; }
.lobby__nick .input { flex: 1 1 auto; text-align: left; }

.lobby__hint {
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-dim);
  min-height: 18px;
}

/* 顶栏里的房间号可以直接点开分享提示 */
.badge--code { cursor: pointer; }
.badge--code:hover { border-color: var(--gold); }

/* ────────────────────────────── 操作区 ────────────────────────────── */

.actions {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  min-height: 62px;
}

.btn {
  appearance: none;
  border: none;
  border-radius: 999px;
  padding: 11px 22px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text);
  background: rgba(255, 255, 255, 0.14);
  cursor: pointer;
  transition: transform var(--speed), background var(--speed), opacity var(--speed);
  /* 移动端点击区足够大 */
  min-height: 44px;
}

.btn:active { transform: scale(0.96); }

.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn--primary { background: var(--gold); color: #35270a; }
.btn--ghost { background: rgba(255, 255, 255, 0.12); }
.btn--warn { background: var(--danger); color: #fff; }

/* ────────────────────────────── 联机等待面板 ────────────────────────────── */

.waiting {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: radial-gradient(ellipse at 50% 30%, var(--felt-light) 0%, var(--bg) 70%);
  z-index: 28;
  overflow-y: auto;
}

.waiting[hidden] { display: none; }

/* 等待房间的返回键：与牌桌的退出键同款，位置固定在左上角 */
.waiting__exit {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.3);
  color: var(--text);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--speed), border-color var(--speed), transform var(--speed);
}

.waiting__exit:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}

.waiting__exit:active { transform: scale(0.94); }

@media (pointer: coarse) {
  .waiting__exit { width: 44px; height: 44px; font-size: 21px; }
}

.waiting__box {
  width: min(100%, 360px);
  text-align: center;
}

.waiting__label { margin: 0; font-size: 13px; color: var(--text-dim); }

.waiting__code {
  margin: 4px 0 12px;
  font-size: 38px;
  letter-spacing: 6px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.waiting__seats {
  margin: 18px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.waiting__seat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.waiting__seat--empty {
  border-style: dashed;
  opacity: 0.5;
}

.waiting__seat-name { font-size: 15px; }
.waiting__seat-tag { font-size: 12px; color: var(--text-dim); }

/* 座位右侧的「×」：房主踢电脑 / 自己离座 */
.waiting__seat-x {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  margin-left: 8px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}

.waiting__seat-x:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.waiting__hint {
  margin: 4px 0 14px;
  font-size: 13px;
  color: var(--text-dim);
}

.waiting__hint--dim {
  font-size: 12px;
  opacity: 0.75;
  margin: 0 0 12px;
}

/* ── 房间内的邀请区（房主与队员都能用）── */

.waiting__invite {
  margin: 0 0 14px;
  padding: 11px 13px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  text-align: left;
}

.waiting__invite-title {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--text-dim);
}

.waiting__invite-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 150px;
  overflow-y: auto;
}

.waiting__invite-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.waiting__invite-item:first-child { border-top: none; }

.waiting__invite-name {
  flex: 1 1 auto;
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.waiting__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ────────────────────────────── 提示与弹窗 ────────────────────────────── */

.toaster {
  position: fixed;
  /**
   * 位置：**牌桌上部的空白区**。
   *
   * 试过两个位置都被否了：
   *   - 顶部 52px：压住对手席位的张数（牌局最需要看的信息）
   *   - 中央 46%：压住「轮到你出牌」横幅
   * 现在挂在中央偏上：在出牌区之上、对手席位之下，互不遮挡。
   */
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  pointer-events: none;
  z-index: 40;
  max-width: 92vw;
  /* 同时最多 3 条（见 main.ts 的 MAX_TOASTS），超出部分不占位 */
  overflow: hidden;
}

.toast {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  opacity: 1;
  transition: opacity 500ms, transform 500ms;
}

.toast--good { border-color: var(--ok); color: var(--ok); }
.toast--bad { border-color: var(--danger); color: #ffb3ae; }
.toast--out { opacity: 0; transform: translateY(-6px); }

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.66);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  animation: fadein 160ms ease-out;
}

/**
 * ⚠️ `[hidden]` 必须显式盖掉上面的 `display: flex`。
 *
 * 浏览器给 `[hidden]` 的默认样式是 `display: none`，但它来自**用户代理样式表**，
 * 优先级低于任何作者写的类选择器 —— `.modal { display: flex }` 会赢。
 * 症状：`hidden` 属性明明设了、元素却照样显示。
 *
 * 踩过的坑：新加的「账号弹窗」和「邀请弹窗」因此**一直浮在页面上**，
 * 把「结算弹窗只弹一个」这类断言数成了 3 个，还挡住了底下的点击。
 */
.modal[hidden] { display: none; }

@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

.modal__box {
  width: min(90vw, 340px);
  padding: 20px;
  border-radius: 14px;
  background: #12352a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
}

.modal__title { margin: 0 0 10px; font-size: 19px; }
.modal__body p { margin: 4px 0; font-size: 14px; color: var(--text-dim); }

/* 双按钮：确认 + 取消（单按钮时也占满整行，保持旧观感） */
.modal__actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.modal__actions .btn { flex: 1; }

/* ══════════════════════════ 账号区 ══════════════════════════ */

.account {
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.account[hidden] { display: none; }

.account__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.account__avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  background: rgba(240, 193, 75, 0.18);
  color: var(--gold);
}

/* 已注册：头像换成绿色，和「游客」在视觉上区分开 */
.account--registered .account__avatar {
  background: rgba(74, 222, 128, 0.18);
  color: #4ade80;
}

.account__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
}

.account__name {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account__balance {
  font-size: 12px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.btn--small {
  padding: 6px 11px;
  font-size: 12px;
  border-radius: 8px;
  flex: 0 0 auto;
}

.account__warn {
  margin: 9px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #ffd18a;
  text-align: left;
}

.account__warn strong { color: var(--gold); }
.account__warn[hidden] { display: none; }

/* ══════════════════════════ 在线玩家 ══════════════════════════ */

.presence {
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  text-align: left;
}

.presence[hidden] { display: none; }

.presence__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.presence__count { color: var(--gold); font-variant-numeric: tabular-nums; }
.presence__head .btn { margin-left: auto; }

.presence__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 168px;
  overflow-y: auto;
}

.presence__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.presence__item:first-child { border-top: none; }

.presence__name {
  flex: 1 1 auto;
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 状态标签：空闲 / 在房里 / 对局中 */
.presence__tag {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-dim);
  flex: 0 0 auto;
}

.presence__tag--game { color: #ffd18a; border-color: rgba(255, 209, 138, 0.4); }
.presence__tag--room { color: #9ecbff; border-color: rgba(158, 203, 255, 0.4); }

.presence__empty {
  margin: 0;
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  padding: 6px 0;
}

.presence__empty[hidden] { display: none; }

/* ══════════════════════════ 账号弹窗 ══════════════════════════ */

.auth__tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  padding: 3px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
}

.auth__tab {
  flex: 1;
  padding: 7px 0;
  font-size: 13px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-family: inherit;
}

.auth__tab[aria-selected="true"] {
  background: rgba(240, 193, 75, 0.16);
  color: var(--gold);
  font-weight: 600;
}

.auth__field {
  margin-bottom: 11px;
  text-align: left;
}

.auth__field[hidden] { display: none; }

.auth__field label {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.auth__field .input { width: 100%; text-align: left; }

.auth__error {
  margin: 0 0 10px;
  font-size: 12px;
  color: #ffb3ae;
  min-height: 16px;
  text-align: left;
}

.auth__note {
  margin: 0 0 12px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
  text-align: left;
}

.modal__note {
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--text-dim);
}

.modal__box .btn + .btn { margin-top: 8px; }

/* ── 顶栏返回键（退出房间）── */
.topbar__exit {  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.3);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--speed), border-color var(--speed), transform var(--speed);
}

.topbar__exit:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}

.topbar__exit:active { transform: scale(0.94); }

/* 触摸设备要够大好点 */
@media (pointer: coarse) {
  .topbar__exit { width: 40px; height: 40px; font-size: 20px; }
}

/* ── 服务器地址行（原生客户端要能改）── */
.lobby__server {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-dim);
}

.lobby__server-value {
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  max-width: 62vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: border-color var(--speed), background var(--speed);
}

.lobby__server-value:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
}

/* ── 首次启动：填服务器地址 ── */
.server-setup {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: radial-gradient(ellipse at 50% 30%, var(--felt-light) 0%, var(--bg) 70%);
  z-index: 50;
  overflow-y: auto;
}

.server-setup[hidden] { display: none; }

.server-setup__box {
  width: min(100%, 380px);
  text-align: center;
}

.server-setup__title { margin: 0 0 12px; font-size: 21px; }

.server-setup__desc {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-dim);
}

.server-setup__desc code {
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--gold);
  font-size: 12px;
}

.server-setup__box .input { margin-bottom: 8px; }

.server-setup__error {
  min-height: 18px;
  margin: 0 0 12px;
  font-size: 12px;
  color: #ff8a7a;
}

.server-setup__box .btn { margin-bottom: 8px; }

/* 弹窗里的输入框与错误提示 */
.modal__input {
  width: 100%;
  margin-top: 12px;
  box-sizing: border-box;
}

.modal__error {
  min-height: 16px;
  margin: 6px 0 0;
  font-size: 12px;
  color: #ff8a7a;
}

/* ── 启动自检面板 ──
   只在启动失败时出现（正常启动会被 main.js 移除）。
   故意做得显眼、可滚动、可选中：它存在的唯一目的就是让人把信息发给开发者。 */

.boot-diag {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 20, 15, 0.96);
  overflow-y: auto;
}

.boot-diag[hidden] { display: none; }

.boot-diag__box {
  width: min(100%, 620px);
  padding: 22px;
  border-radius: 14px;
  background: #12352a;
  border: 1px solid rgba(255, 122, 100, 0.5);
}

.boot-diag__title {
  margin: 0 0 8px;
  font-size: 19px;
  color: #ff9a86;
}

.boot-diag__desc {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--text);
  word-break: break-all;
}

.boot-diag__detail {
  max-height: 42vh;
  margin: 0 0 14px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.4);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-dim);
  white-space: pre-wrap;
  word-break: break-all;
  overflow: auto;
  /* 允许选中：方便复制粘贴给开发者 */
  user-select: text;
}

.boot-diag__hint {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
}

/* ────────────────────────────── 桌面横屏 ────────────────────────────── */

@media (orientation: landscape) and (min-width: 820px) {
  :root { --card-w: 74px; --card-h: 104px; }

  .app { padding: 0 max(12px, 4vw); }

  .seats {
    /* 对手分列左右：布局仍是同一套 DOM，只改排布方式 */
    position: absolute;
    inset: 56px 0 auto 0;
    justify-content: space-between;
    padding: 0 4vw;
    pointer-events: none;
  }

  .seats .seat { pointer-events: auto; }

  /**
   * 桌面横屏的中央内容**上移**。
   *
   * 屏幕横向时纵向空间富余，默认的 `justify-content: center` 会把出牌区
   * 放在正中，导致上方大片空白、下方手牌又贴着底 —— 视线要上下大跨度移动。
   * 改成靠上对齐（留一点顶部偏移避开席位），出牌区与手牌距离更近。
   */
  .table {
    justify-content: flex-start;
    padding-top: 78px;
    gap: 10px;
  }

  .actions { justify-content: flex-end; padding-right: 6vw; }

  .hand__card:hover { transform: translateY(-8px); }

  .card { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45); }

  /* 横屏时出牌区可以更大一点 */
  .table__bottom .card {
    width: 54px;
    height: 78px;
  }
  .table__bottom .card .card__rank { font-size: 17px; }
  .table__bottom .card .card__suit { font-size: 13px; }
  .table__bottom .card .card__pip { font-size: 11px; }
}

/* 横屏但矮（笔记本）时压缩纵向留白 */
@media (orientation: landscape) and (max-height: 620px) {
  :root { --card-w: 56px; --card-h: 80px; }
  .table__banner { margin-top: 0; }
}

/* 超宽屏：牌再大一点 */
@media (min-width: 1400px) {
  :root { --card-w: 82px; --card-h: 116px; }
}