:root {
  --felt-1: #16543f;
  --felt-2: #0a2b21;
  --gold: #e6c184;
  --gold-dim: #a98a55;
  --ink: #0e1512;
  --paper: #f7f3e8;
  --red: #c0392b;
  --line: rgba(230, 193, 132, .28);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; height: 100%;
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;
  background: #071410;
  color: #e9e2d0;
  overflow: hidden;
  user-select: none;
}

#app {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 90% at 50% 38%, var(--felt-1) 0%, var(--felt-2) 62%, #04100c 100%);
}

/* ---------- 顶栏 ---------- */
.hud {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, .22);
  backdrop-filter: blur(6px);
  flex: 0 0 auto;
  z-index: 5;
}
.hud .group { display: flex; align-items: center; gap: 18px; }
.hud .item { font-size: 13px; color: #cfc6ae; letter-spacing: .5px; }
.hud .item b { color: var(--gold); font-size: 17px; font-weight: 600; margin: 0 2px; }
.hud .sep { width: 1px; height: 18px; background: var(--line); }
.trump-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: 20px;
  border: 1px solid var(--gold-dim);
  background: rgba(230, 193, 132, .12);
  color: var(--gold); font-size: 13px;
}
.trump-chip .tt { font-size: 11px; letter-spacing: 2px; color: #bfb096; }
.trump-chip .ts {
  font-size: 21px; line-height: 1; color: var(--gold);
  font-family: "Segoe UI Symbol", "Apple Symbols", Georgia, serif;
  font-weight: 700;
}
.trump-chip .ts.red { color: #ff7a66; }
.trump-chip .tchg {
  font-size: 10px; line-height: 1.4; color: #ffb0a0;
  border: 1px solid rgba(255, 139, 122, .45); border-radius: 4px;
  padding: 0 4px; letter-spacing: .5px;
}
.trump-chip.red { color: #ff8b7a; border-color: rgba(255, 139, 122, .4); }

.hud button {
  background: transparent; color: #cfc6ae; border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 12px; font-size: 13px; cursor: pointer;
  transition: .18s; font-family: inherit;
}
.hud button:hover { color: var(--gold); border-color: var(--gold-dim); }

/* ---------- 牌桌 ---------- */
.table {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 1180px;
}

.seat {
  position: absolute;
  width: 168px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(6, 26, 20, .62);
  border: 1px solid rgba(230, 193, 132, .16);
  transition: .22s;
  transform: translate(-50%, -50%);
}
.seat.active {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(230,193,132,.35), 0 8px 26px rgba(0,0,0,.45);
  background: rgba(12, 44, 34, .88);
}
.seat .name { font-size: 14px; color: #f0e9d8; display: flex; align-items: center; gap: 6px; }
.seat .meta { font-size: 11px; color: #9fb3a8; margin-top: 4px; display: flex; gap: 10px; }
.seat .meta b { color: var(--gold); font-weight: 500; }
.seat .badges { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.badge {
  font-size: 10px; padding: 1px 6px; border-radius: 4px; letter-spacing: .5px;
  border: 1px solid transparent;
}
.badge.banker { background: rgba(230,193,132,.16); color: var(--gold); border-color: rgba(230,193,132,.4); }
.badge.partner { background: rgba(120,200,255,.14); color: #8fd3ff; border-color: rgba(120,200,255,.35); }
.badge.snake { background: rgba(255,120,120,.14); color: #ff9a8f; border-color: rgba(255,120,120,.35); }
.badge.mate { background: rgba(120,200,255,.14); color: #8fd3ff; border-color: rgba(120,200,255,.35); }
.badge.enemy { background: rgba(255,110,100,.16); color: #ff9a8f; border-color: rgba(255,110,100,.4); }
.badge.opp { background: rgba(255,255,255,.06); color: #b9c6bd; }
.badge.bid { background: rgba(255,255,255,.06); color: #b9c6bd; }
/* 吊主时跟不出主牌 -> 该家“无主”（公开信息） */
.badge.void { background: rgba(180,200,190,.12); color: #d7e2da; border-color: rgba(180,200,190,.3); }

.seat .backs { display: flex; margin-top: 8px; height: 30px; align-items: center; }
.mini-back {
  width: 18px; height: 26px; border-radius: 3px; margin-left: -9px;
  background: linear-gradient(145deg, #1f5f8a, #0e3350);
  border: 1px solid rgba(255,255,255,.18);
}
.mini-back:first-child { margin-left: 0; }
.seat .count { font-size: 11px; color: #8fa79b; margin-top: 4px; }

/* 叫主标识：庄家座位右上角的金色胶囊（叫主 + 花色） */
.seat .bidmark {
  position: absolute; top: -12px; right: -8px;
  display: none; align-items: center; gap: 5px;
  padding: 2px 9px 2px 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffeec6, #e6c184);
  border: 1px solid rgba(255, 248, 224, .9);
  color: #2a1c02;
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .2), 0 0 14px rgba(230, 193, 132, .45);
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}
.seat .bidmark.show { display: inline-flex; }
.seat .bidmark .ss {
  font-size: 17px; line-height: 1; letter-spacing: 0;
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols", Georgia, serif;
  font-weight: 700;
}
.seat .bidmark .ss.red { color: #c0392b; }

/* 座位位置 */
.seat.p0 { left: 50%; top: 97%; width: 210px; }
.seat.p1 { left: 88%; top: 72%; }
.seat.p2 { left: 78%; top: 16%; }
.seat.p3 { left: 22%; top: 16%; }
.seat.p4 { left: 12%; top: 72%; }

/* ---------- 中央出牌区 ---------- */
/* 出牌区做宽一些（620），上方两家才有空间左右分开；牌多时由 JS 压缩重叠 */
.center {
  position: absolute;
  left: 50%; top: 50%;
  width: 620px; height: 320px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.trick-slot { position: absolute; display: flex; gap: 2px; }
.trick-slot .card { box-shadow: 0 4px 12px rgba(0,0,0,.5); flex: 0 0 auto; }
/* 上方两家（2 右上 / 3 左上）分开到两侧，甩牌时也不会叠在一起 */
.slot-0 { left: 50%; top: 76%; transform: translate(-50%, -50%); }
.slot-1 { left: 90%; top: 54%; transform: translate(-50%, -50%); }
.slot-2 { left: 79%; top: 10%; transform: translate(-50%, -50%); }
.slot-3 { left: 21%; top: 10%; transform: translate(-50%, -50%); }
.slot-4 { left: 10%; top: 54%; transform: translate(-50%, -50%); }

.center-msg {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 15px; color: var(--gold);
  text-shadow: 0 2px 10px rgba(0,0,0,.7);
  white-space: nowrap; letter-spacing: 1px;
  opacity: 0; transition: opacity .3s;
}
.center-msg.show { opacity: 1; }

/* ---------- 牌 ---------- */
.card {
  position: relative;
  width: 58px; height: 82px;
  border-radius: 7px;
  background: linear-gradient(160deg, #fffdf7, #efe7d6);
  color: var(--ink);
  border: 1px solid rgba(0,0,0,.22);
  display: flex; flex-direction: column; justify-content: flex-start;
  align-items: flex-start;
  gap: 0;
  padding: 4px 6px;
  font-weight: 600;
  transition: transform .16s, box-shadow .16s;
  font-family: "Georgia", "Times New Roman", serif;
}
.card .r { font-size: 19px; line-height: 1; font-weight: 700; letter-spacing: -.5px; }
.card .s {
  font-size: 22px; line-height: 1; margin-top: 1px;
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols", Georgia, serif;
  font-weight: 700;
}
.card.red { color: var(--red); }
.card.trump::after {
  content: ""; position: absolute; inset: 0; border-radius: 7px;
  border: 1.5px solid rgba(230,193,132,.85);
  pointer-events: none;
}
/* 主牌花色：底色偏金 + 右上角“主”标记，与常主 7/王区分 */
.card.trump-suit {
  background: linear-gradient(160deg, #fffcf0, #eed494);
  box-shadow: inset 0 0 0 1.5px rgba(170,128,44,.35);
}
.card.trump-suit .s { color: #8a5a12; }
.card.trump-suit.red .s { color: #b3261a; }
.card.trump-suit::before {
  content: "主";
  position: absolute; top: 2px; right: 2px;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 10px; line-height: 1; font-weight: 600;
  color: #4a3308; background: rgba(226,182,96,.85);
  border-radius: 3px; padding: 1px 3px;
  pointer-events: none;
}
.card.mini { width: 40px; height: 56px; padding: 3px 4px; border-radius: 5px; }
.card.mini .r { font-size: 13px; }
.card.mini .s { font-size: 15px; margin-top: 0; }
.card.mini.trump-suit::before { font-size: 8px; top: 1px; right: 1px; padding: 0.5px 2px; }

.hand .card { cursor: pointer; margin-left: -26px; flex: 0 0 auto; }
.hand .card:first-child { margin-left: 0; }
.hand .card.sel { transform: translateY(-16px); box-shadow: 0 10px 20px rgba(0,0,0,.5); }

/* ---------- 手牌区 ---------- */
.handbar {
  flex: 0 0 auto;
  padding: 6px 16px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: linear-gradient(to top, rgba(0,0,0,.45), transparent);
}
.hand {
  display: flex; justify-content: center; align-items: flex-end;
  height: 96px; padding-top: 8px;
  min-height: 96px;
}
.actions {
  display: flex; gap: 10px; align-items: center; min-height: 38px;
  flex-wrap: wrap; justify-content: center;
}
/* 反主阶段的说明单独占一行，别把按钮挤得七零八落 */
.actions .hint.full { flex: 0 0 100%; text-align: center; }
.btn {
  font-family: inherit; font-size: 14px; padding: 9px 22px; border-radius: 9px;
  border: 1px solid var(--gold-dim); cursor: pointer;
  background: linear-gradient(180deg, rgba(230,193,132,.95), rgba(198,158,96,.95));
  color: #20180a; font-weight: 600; letter-spacing: 1px;
  transition: .16s;
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .35; cursor: not-allowed; filter: none; }
.btn.ghost {
  background: transparent; color: #cfc6ae; border-color: var(--line); font-weight: 400;
}
.btn.ghost:hover { color: var(--gold); border-color: var(--gold-dim); }
.btn.danger { background: linear-gradient(180deg,#e08472,#c05b48); color: #2a0f0a; border-color: #e08472; }
.hint { font-size: 13px; color: #a9bcb0; }
.hint.err { color: #ff9a8f; }

/* ---------- 叫牌面板 ---------- */
.bidbox {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: 12px;
  background: rgba(0,0,0,.35); border: 1px solid var(--line);
}
.bidbox .t { font-size: 13px; color: #cfc6ae; }
/* 叫牌阶段徽章：抢叫（金） / 逼叫（红）—— 一眼分清现在处在哪个阶段 */
.bidbox .stage-tag {
  flex: 0 0 auto;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 11.5px; font-weight: 800; letter-spacing: 1.5px;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  color: var(--gold); border: 1px solid rgba(230,193,132,.45);
  background: rgba(230,193,132,.15);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}
.bidbox.forced .stage-tag {
  color: #ffb3a4; border-color: rgba(255,120,100,.5);
  background: rgba(255,110,95,.18);
}
.bidbox.forced .t { color: #ffd2c8; }

/* 反主阶段：红金配色 + 积分倍数徽章 */
.bidbox .stage-tag.rev {
  color: #ffd9a8; border-color: rgba(255,150,90,.55);
  background: linear-gradient(180deg, rgba(255,120,70,.30), rgba(200,60,40,.24));
  box-shadow: 0 0 10px rgba(255,120,70,.25);
}
.bidbox.reverse .t { color: #ffd9c9; }
.bidbox .mult-tag {
  flex: 0 0 auto;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 11.5px; font-weight: 800; letter-spacing: .5px;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  color: #2a1608; background: linear-gradient(180deg, #f6d79a, #e0b062);
  box-shadow: 0 0 8px rgba(230,193,132,.45);
}
.bidbox .timer { width: 90px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.bidbox .timer i { display: block; height: 100%; background: var(--gold); width: 100%; transition: width .1s linear; }

/* 叫牌按钮：主文案 + 该花色自己有多少张 */
.btn.two {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 1px; padding: 6px 20px; line-height: 1.15;
}
.btn.two .main { font-size: 14px; font-weight: 600; letter-spacing: 1px; }
.btn.two .sub {
  display: inline-block; margin-top: 2px; padding: 1px 8px;
  font-size: 11.5px; font-weight: 400; letter-spacing: 0;
  color: #2e1f07; border-radius: 999px;
  background: rgba(60, 38, 0, .13);
}
.btn.two .sub .n { font-weight: 800; font-size: 12.5px; color: #1b1002; }

/* ---------- 弹层 ---------- */
.modal {
  position: fixed; inset: 0; background: rgba(2, 10, 8, .78);
  display: none; align-items: center; justify-content: center; z-index: 50;
  backdrop-filter: blur(3px);
}
.modal.show { display: flex; }
.panel {
  width: min(560px, 92vw); max-height: 86vh; overflow: auto;
  background: linear-gradient(180deg, #14372a, #0b241b);
  border: 1px solid var(--gold-dim); border-radius: 16px;
  padding: 22px 24px; box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.panel h2 { margin: 0 0 4px; font-size: 20px; color: var(--gold); font-weight: 600; letter-spacing: 1px; }
.panel .sub { font-size: 13px; color: #9fb3a8; margin-bottom: 16px; }
.panel table { width: 100%; border-collapse: collapse; font-size: 13px; }
.panel th, .panel td { padding: 7px 6px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.07); }
.panel th { color: #8fa79b; font-weight: 400; font-size: 12px; }
.panel td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pos { color: #ff8b7a; }
.neg { color: #7fd8a8; }
.panel .foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.panel ul { padding-left: 18px; font-size: 13px; line-height: 1.9; color: #cbd6cd; }
.panel ul b { color: var(--gold); font-weight: 500; }

/* ---------- 出牌记录 ---------- */
.hist-panel { width: min(430px, 92vw); }
.hist-nav { display: flex; gap: 8px; margin: 0 0 12px; }
.btn.sm { padding: 5px 12px; font-size: 12px; letter-spacing: 0; }
.hist-cards { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.hist-cards .cd {
  font-style: normal; min-width: 27px; text-align: center;
  padding: 2px 4px; border-radius: 5px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.11);
  font-size: 12.5px; color: #efe6d2; letter-spacing: .3px;
}
.hist-cards .cd.red { color: #ff8b7a; }
.panel tr.hist-win td { color: var(--gold); }
.panel td.hist-tag { text-align: right; color: var(--gold); font-size: 12px; }

/* ---------- 日志 ---------- */
.log {
  position: absolute; left: 8px; bottom: 4px;
  width: 200px; max-height: 64px; overflow: hidden;
  font-size: 11px; line-height: 1.75; color: rgba(220,230,222,.4);
  pointer-events: none; z-index: 2;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
  padding: 5px 10px; border-radius: 8px;
  background: rgba(0,0,0,.30);
}
.log div:last-child { color: rgba(240,230,200,.85); }

/* 提示条 */
.toast {
  position: fixed; left: 50%; top: 74px; transform: translateX(-50%);
  background: rgba(0,0,0,.72); color: #ffd9a1;
  padding: 9px 18px; border-radius: 10px; font-size: 13px;
  border: 1px solid rgba(230,193,132,.3);
  opacity: 0; transition: .25s; pointer-events: none; z-index: 60;
}
.toast.show { opacity: 1; }

@media (max-width: 860px) {
  .seat { width: 132px; padding: 6px 8px; }
  .seat .name { font-size: 12px; }
  .seat.p0 { width: 170px; }
  /* 窄屏下左右两家的卡片会顶出屏幕，往里收一点 */
  .seat.p1 { left: 84%; }
  .seat.p4 { left: 16%; }
  /* 窄屏：出牌区随屏宽收窄，四家分列，牌多时由 JS 压缩重叠 */
  .center { width: 430px; height: 300px; transform: translate(-50%, -50%) scale(.9); }
  .slot-1 { left: 86%; }
  .slot-2 { left: 78%; }
  .slot-3 { left: 22%; }
  .slot-4 { left: 14%; }
  .card { width: 46px; height: 66px; }
  /* 出牌区的小牌在窄屏再缩一档：牌变小但每张露出的比例更大，点数看得更清 */
  .card.mini { width: 32px; height: 46px; padding: 2px 3px; }
  .card.mini .r { font-size: 11px; }
  .card.mini .s { font-size: 12px; }
  .card.mini.trump-suit::before { font-size: 7px; }
  .card .r { font-size: 14px; }
  .hand .card { margin-left: -30px; }
  .log { display: none; }
  /* 窄屏顶栏：宁可折行，也不要折成一列竖排字 */
  .hud { padding: 7px 10px; flex-wrap: wrap; gap: 6px 12px; justify-content: flex-start; }
  .hud .group { gap: 10px; flex-wrap: wrap; }
  .hud .item { white-space: nowrap; font-size: 12px; }
  .hud .item b { font-size: 15px; }
  .hud button { white-space: nowrap; padding: 4px 9px; font-size: 12px; }
  .trump-chip { padding: 1px 8px; }
  .trump-chip .ts { font-size: 18px; }
}

/* ============ 联机：语音 ============ */
.voicebar {
  position: fixed; right: 14px; bottom: 14px; z-index: 55;
  display: flex; align-items: center; gap: 8px;
  background: rgba(12,26,20,.86); border: 1px solid rgba(230,193,132,.22);
  padding: 7px 10px; border-radius: 12px; backdrop-filter: blur(6px);
}
.voicebar .vbtn {
  background: rgba(230,193,132,.12); color: #f0e9d8;
  border: 1px solid rgba(230,193,132,.35); border-radius: 9px;
  padding: 6px 12px; font-size: 13px; cursor: pointer; transition: .18s;
}
.voicebar .vbtn:hover { background: rgba(230,193,132,.22); }
.voicebar .vbtn.on { background: rgba(120,220,160,.22); border-color: rgba(120,220,160,.6); color: #b8f5cf; }
.voicebar .vbtn[disabled] { opacity: .55; cursor: default; }
.voicebar .vstate { font-size: 11px; color: #9fb3a8; max-width: 190px; }

/* 谁在说话：座位描边呼吸 */
.seat.speaking {
  border-color: rgba(120,220,160,.75) !important;
  box-shadow: 0 0 0 2px rgba(120,220,160,.25), 0 0 18px rgba(120,220,160,.35);
}

/* 大厅 */
.modal .panel .seatlist { width: 100%; border-collapse: collapse; margin-top: 10px; }
.modal .panel .seatlist th {
  padding: 2px 8px 6px; font-size: 11.5px; font-weight: 400;
  color: #8fa79b; text-align: left; border-bottom: 1px solid rgba(255,255,255,.10);
}
.modal .panel .seatlist td { padding: 6px 8px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.06); }
.modal .panel .seatlist td.num { text-align: right; color: var(--gold); }
.modal .panel .seatlist td.st { text-align: right; font-size: 12.5px; }
.modal .panel .seatlist td.st.on { color: #9fb3a8; }
.modal .panel .seatlist td.st.ready { color: var(--gold); font-weight: 600; }
.modal .panel .seatlist td.st.off { color: #ff8b7a; }
.modal .panel .seatlist td.st.empty { color: #7d8f86; }
.lobby-hint { color: #ffcf7a; margin: 10px 0 0; }
.lobby-note { color: #7d8f86; margin: 4px 0 0; font-size: 12px; }
.lobby-ready { color: #7fd8a8; margin: 10px 0 0; font-size: 12.5px; }

/* 大厅标题栏 + 收起按钮 */
.panel .panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.panel .panel-head h2 { flex: 1 1 auto; }
.panel .xbtn {
  flex: 0 0 auto; width: 28px; height: 28px; line-height: 1;
  background: transparent; border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px; color: #9fb3a8; font-size: 18px; cursor: pointer;
  transition: .16s; padding: 0;
}
.panel .xbtn:hover { color: var(--gold); border-color: var(--gold-dim); background: rgba(230,193,132,.10); }

/* 顶栏房号胶囊：打开大厅的入口 */
.hud button.roomchip {
  border-radius: 999px; padding: 4px 12px; font-size: 12.5px;
  letter-spacing: .5px; font-variant-numeric: tabular-nums;
}
.hud button.roomchip.hide { display: none; }
.hud button.roomchip.ready { color: #7fd8a8; border-color: rgba(120,220,160,.5); }

/* 断线重连提示条 */
.netmask {
  position: fixed; left: 50%; top: 10px; transform: translateX(-50%) translateY(-160%);
  z-index: 60; padding: 7px 16px; border-radius: 999px;
  background: rgba(178, 58, 44, .94); color: #fff; font-size: 13px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45); transition: transform .18s ease;
  pointer-events: none;
}
.netmask.show { transform: translateX(-50%) translateY(0); }

/* ---------- 结算回看：出牌前手牌 + 底牌 ---------- */
.panel.wide { width: min(980px, 96vw); }
.replay { margin-top: 16px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .09); }
.replay-t { font-size: 12px; color: #8fa79b; letter-spacing: .5px; margin: 10px 0 4px; }
.replay-t:first-child { margin-top: 0; }
.handrow { display: flex; align-items: center; gap: 10px; }
.handrow .who { flex: 0 0 74px; display: flex; flex-direction: column; line-height: 1.25; }
.handrow .who .nm {
  font-size: 12.5px; color: #e9e2d0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.handrow .who .tag { font-size: 10.5px; color: #8fa79b; }
.handrow.banker .who .tag { color: var(--gold); }
.handrow.kitty { margin-top: 2px; }
.handrow .strip { display: flex; gap: 2px; overflow-x: auto; padding: 8px 0 5px; }
.handrow .strip::-webkit-scrollbar { height: 4px; }
.handrow .strip::-webkit-scrollbar-thumb { background: rgba(230, 193, 132, .32); border-radius: 2px; }
.mcard {
  flex: 0 0 auto; width: 26px; height: 38px; border-radius: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--paper); color: #26231b; font-weight: 700; line-height: 1;
  border: 1px solid rgba(0, 0, 0, .16);
}
.mcard .r { font-size: 11px; }
.mcard .s { font-size: 11px; margin-top: 2px; }
.mcard.red { color: var(--red); }
.mcard.tr { background: #f6ecd2; }
.handrow.kitty .mcard { background: #f3dfae; box-shadow: 0 0 0 1.5px rgba(230, 193, 132, .95); }
.mcard.gap { margin-left: 5px; }

/* 庄家叫主时从底牌收上来的牌：画成“选中”的样子（浮起 + 金框 + 光晕） */
.mcard { position: relative; }
.mcard.sel {
  transform: translateY(-5px);
  background: #fffaf0;
  border-color: #b8873a;
  box-shadow: 0 0 0 2px #e6c184, 0 0 9px rgba(230, 193, 132, .6), 0 5px 10px rgba(0, 0, 0, .5);
}
.mcard.sel::after {
  content: '底';
  position: absolute; top: 1px; right: 2px;
  font-size: 8px; line-height: 1; font-weight: 700;
  color: #a1711a;
}
.replay-t .lg { margin-left: 10px; color: #c9a960; }

/* ---------- 自己的座位：压成贴底一条，别挡住手牌 ---------- */
/* 原来 top:97% + translateY(-50%) 会让卡片下沿伸进手牌区，
   28 张牌（扣底时）中间几张的上半截正好被它盖住，看不清花色。 */
.seat.p0 {
  left: 50%; top: 100%;
  width: auto; max-width: 94%;
  transform: translate(-50%, -100%);
  display: flex; align-items: center; gap: 12px;
  padding: 4px 14px;
  border-radius: 10px 10px 0 0;
  border-bottom-color: transparent;
  white-space: nowrap;
  background: rgba(6, 26, 20, .72);
}
.seat.p0 .name,
.seat.p0 .meta,
.seat.p0 .badges,
.seat.p0 .count { margin: 0; }
.seat.p0 .backs { display: none !important; }
/* 自己是庄家：标识抬到横条上方，别压住右边的“20 张” */
.seat.p0 .bidmark { top: -25px; right: -4px; }