/* H5 通比三公 - 样式 */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #17332a;
  color: #eaf3ee;
  overflow: hidden;
  user-select: none;
}
.hidden { display: none !important; }

/* ================= 登录页 ================= */
.name-gate {
  position: fixed; inset: 0; z-index: 50;
  background: #1a0d10 url('gate-bg.jpg') center top / cover no-repeat;
  display: flex; align-items: flex-end; justify-content: center;
}
/* 底部压暗，保证按钮区可读、人物上部完整展示 */
.name-gate::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,8,12,0) 40%, rgba(20,8,12,.72) 78%, rgba(20,8,12,.88) 100%);
}
.gate-box {
  position: relative; text-align: center; padding: 18px 26px 30px;
  width: 360px; max-width: 92vw;
}
.gate-sub { margin: 8px 0 18px; font-size: 13px; color: #ffe9c9; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.gate-title {
  margin: 0 0 14px; font-size: 20px; font-weight: 800; letter-spacing: 2px;
  color: #ffe9c9; text-shadow: 0 2px 6px rgba(0,0,0,.8);
}
.gate-input {
  width: 100%; padding: 12px 14px; margin-bottom: 10px; border-radius: 10px;
  border: 1px solid rgba(255,233,201,.5);
  background: rgba(20,8,12,.55); color: #fff; font-size: 16px; outline: none;
  backdrop-filter: blur(2px);
}
.gate-input:focus { border-color: #ffd964; }
.gate-input::placeholder { color: rgba(255,255,255,.55); font-size: 14px; }
.gate-btn {
  margin-top: 6px; width: 100%; padding: 12px; border: none; border-radius: 12px;
  font-size: 17px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.gate-btn:active { transform: translateY(2px); }
.gate-btn:disabled { opacity: .7; }
.gate-primary {
  background: linear-gradient(180deg, #ffd964, #f0a92e); color: #5b3a00;
  box-shadow: 0 3px 0 #b97b12, 0 4px 10px rgba(0,0,0,.4);
}
.gate-wx {
  background: #07c160; color: #fff;
  box-shadow: 0 3px 0 #059a4b, 0 4px 10px rgba(0,0,0,.4);
}
.gate-wx:active { transform: translateY(2px); }
.gate-wx:disabled { opacity: .7; }
.gate-switch { margin-top: 12px; font-size: 14px; color: rgba(255,255,255,.75); }
.gate-switch a { color: #ffd964; font-weight: 700; margin-left: 4px; cursor: pointer; text-decoration: underline; }
.gate-tip { margin-top: 12px; font-size: 11px; color: rgba(255,255,255,.55); text-shadow: 0 1px 2px rgba(0,0,0,.6); }

/* ================= 大厅 ================= */
.lobby {
  height: 100%; display: flex; flex-direction: column;
  background: #0e1b33 url('lobby-bg.jpg') center bottom / cover no-repeat;
  overflow-y: auto;
}
.lb-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px 6px;
}
.lb-user { display: flex; align-items: center; gap: 10px; }
.lb-user .avatar {
  background-size: cover; background-position: center;
  cursor: pointer;
}
/* 头像选择弹窗 */
.av-mask {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
}
.av-box {
  width: 300px; max-width: 86vw;
  background: linear-gradient(180deg, #1f3a2e, #14251d);
  border: 1px solid rgba(255,217,100,.4); border-radius: 14px;
  padding: 16px 14px 14px; box-shadow: 0 12px 40px rgba(0,0,0,.6);
  text-align: center;
}
.av-title { margin: 0 0 12px; font-size: 16px; color: #ffd964; }
.av-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px;
  margin-bottom: 14px;
}
.av-item {
  width: 46px; height: 46px; border-radius: 50%;
  background-size: cover; background-position: center;
  border: 2px solid rgba(255,255,255,.35); cursor: pointer;
  transition: transform .12s, border-color .12s;
}
.av-item:active { transform: scale(.92); }
.av-item:hover { border-color: #ffd964; }
.av-close {
  width: 100%; padding: 8px 0; border-radius: 9px;
  border: 1px solid #3a5a4c; background: #24473a; color: #eaf3ee;
  font-size: 14px; cursor: pointer;
}

/* ---------- 个人中心（点头像弹出） ---------- */
.pf-mask {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(0,0,0,.62);
  display: flex; align-items: center; justify-content: center;
}
.pf-box {
  width: 300px; max-width: 86vw; max-height: 84vh; overflow-y: auto;
  background: linear-gradient(180deg, #1f3a2e, #14251d);
  border: 1px solid rgba(255,217,100,.45); border-radius: 14px;
  padding: 16px 14px 14px; box-shadow: 0 12px 40px rgba(0,0,0,.6);
  animation: frameIn .22s ease-out;
}
.pf-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pf-head .avatar { width: 54px; height: 54px; flex: none; }
.pf-headinfo { min-width: 0; text-align: left; }
.pf-nick {
  font-size: 16px; font-weight: 700; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-acc { margin-top: 2px; font-size: 11px; color: rgba(255,255,255,.6); }
.pf-acc span { color: #cfe3d8; }
.pf-pts {
  margin-top: 5px; display: inline-flex; align-items: center; gap: 6px;
  background: #14355c; border-radius: 12px; padding: 2px 10px;
  color: #ffd964; font-weight: 700; font-size: 13px;
}
.pf-list { display: flex; flex-direction: column; gap: 8px; }
.pf-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06); color: #eaf3ee;
  font-size: 14px; text-align: left;
}
.pf-item:active { transform: scale(.98); background: rgba(255,217,100,.14); }
.pf-item.danger { color: #ffb4b4; }
.pf-ico { font-style: normal; font-size: 16px; width: 20px; text-align: center; flex: none; }
.pf-arrow { margin-left: auto; font-style: normal; color: rgba(255,255,255,.4); font-size: 18px; }
.pf-close {
  width: 100%; margin-top: 14px; padding: 9px 0; border-radius: 9px;
  border: 1px solid #3a5a4c; background: #24473a; color: #eaf3ee;
  font-size: 14px; cursor: pointer;
}
.pf-title { margin: 0 0 12px; font-size: 16px; color: #ffd964; text-align: center; }
.pf-rows { display: flex; flex-direction: column; gap: 1px; margin-bottom: 14px; }
.pf-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 10px; font-size: 13px; border-radius: 6px;
  background: rgba(255,255,255,.04);
}
.pf-k { color: rgba(255,255,255,.6); flex: none; }
.pf-v { color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-edit { border-top: 1px dashed rgba(255,255,255,.15); padding-top: 12px; }
.pf-label { font-size: 12px; color: #ffd964; margin-bottom: 6px; }
.pf-editrow { display: flex; gap: 8px; }
.pf-input {
  flex: 1; min-width: 0; padding: 9px 10px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.28);
  color: #fff; font-size: 14px; outline: none;
}
.pf-input:focus { border-color: #ffd964; }
.pf-input::placeholder { color: rgba(255,255,255,.45); font-size: 13px; }
.pf-mini {
  flex: none; padding: 0 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid #ffd964; background: linear-gradient(180deg, #f0c14b, #d79f16);
  color: #4a3208; font-size: 13px; font-weight: 700;
}
.pf-mini:active { transform: translateY(1px); }
.pf-form { display: flex; flex-direction: column; gap: 10px; }
.pf-submit {
  margin-top: 4px; padding: 10px 0; border-radius: 9px; cursor: pointer;
  border: none; background: linear-gradient(180deg, #6db3f2, #3d7cc9);
  color: #fff; font-size: 15px; font-weight: 700; box-shadow: 0 3px 0 #2a5a97;
}
.pf-submit:active { transform: translateY(2px); box-shadow: none; }
.pf-submit:disabled { filter: grayscale(.7); opacity: .7; }
.pf-hint { margin-top: 10px; font-size: 11px; line-height: 1.6; color: rgba(255,255,255,.55); text-align: center; }
.pf-hint b { color: #ffd964; }
.pf-notice { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 6px 0 4px; }
.pf-notice-ico { font-size: 34px; }
.pf-notice-txt { font-size: 13px; line-height: 1.8; color: #eaf3ee; text-align: center; }
.pf-notice-txt b { color: #ffd964; }
.avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(180deg, #f7d9a8, #e0a96b);
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700; color: #6b4a1a;
}
.lb-name { font-size: 16px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.lb-points {
  margin-top: 4px; display: inline-flex; align-items: center; gap: 6px;
  background: #14355c; border-radius: 14px; padding: 3px 12px;
  color: #ffd964; font-weight: 700; font-size: 14px; min-width: 90px;
}
.coin {
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe9a8, #f0b429);
  border: 1px solid #c98a12;
}
.lb-btns { display: flex; gap: 8px; }
.lb-btn {
  padding: 8px 12px; border: none; border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, #6db3f2, #3d7cc9); color: #fff;
  font-size: 13px; font-weight: 700; box-shadow: 0 3px 0 #2a5a97;
}
.lb-btn:active { transform: translateY(2px); box-shadow: none; }
.lb-btn:disabled { filter: grayscale(.7); opacity: .7; }

/* 跑马灯（已取消） */

/* 房间卡片（正方形，置于页面底部，不遮挡背景人物） */
.rooms {
  flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding: 0 30px 52px; max-width: 372px; width: 100%; margin: auto auto 0;
  align-content: end;
}
/* 只有一个房间卡片时：保持原尺寸并水平居中 */
.rooms.single { grid-template-columns: 148px; justify-content: center; }
.room-card {
  aspect-ratio: 1 / 1; border-radius: 12px; padding: 8px 6px 7px; text-align: center; cursor: pointer;
  color: #fff; border: 1.5px solid rgba(255,255,255,.55);
  box-shadow: 0 4px 10px rgba(0,0,0,.45);
  transition: transform .1s;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
}
.room-card:active { transform: scale(.97); }
/* 三公卡片：透明底素材图，图片自带卡片造型、标题与底注文字，故去掉边框/圆角/底色 */
.room-card.g1 {
  background: url('room1.png') center / contain no-repeat;
  border: none; border-radius: 0; box-shadow: none; padding: 0;
}
/* 三公卡片：图片自带标题，隐藏全部文字 */
.room-card.g1 .r-name, .room-card.g1 .r-meta,
.room-card.g1 .r-count, .room-card.g1 .r-lock { display: none; }
/* 牛牛卡片：同样换成透明底素材图，图片自带卡片造型与底注文字，去掉边框/圆角/底色/投影 */
.room-card.g2 {
  background: url('room2.png') center / contain no-repeat;
  border: none; border-radius: 0; box-shadow: none; padding: 0;
}
/* 牛牛卡片：图片自带标题，隐藏全部文字 */
.room-card.g2 .r-name, .room-card.g2 .r-meta,
.room-card.g2 .r-count, .room-card.g2 .r-lock { display: none; }
/* 21点卡片：透明底素材图（同 g1/g2 模式，图片自带标题与底注文字），覆盖旧渐变兜底 */
.room-card.g3 {
  background: url('21d.png') center / contain no-repeat;
  border: none; border-radius: 0; box-shadow: none; padding: 0;
}
.room-card.g3 .r-name, .room-card.g3 .r-meta,
.room-card.g3 .r-count, .room-card.g3 .r-lock { display: none; }
/* 斗地主卡片：同上 */
.room-card.g4 {
  background: url('ddz.png') center / contain no-repeat;
  border: none; border-radius: 0; box-shadow: none; padding: 0;
}
.room-card.g4 .r-name, .room-card.g4 .r-meta,
.room-card.g4 .r-count, .room-card.g4 .r-lock { display: none; }
.room-card.locked { filter: grayscale(.55) brightness(.85); }
.r-name { font-size: 13px; font-weight: 700; text-shadow: 0 2px 3px rgba(0,0,0,.35); letter-spacing: 1px; }
.r-meta { margin-top: 2px; font-size: 10px; opacity: .95; line-height: 1.5; }
.r-meta b { color: #ffe9a8; }
.r-count { margin-top: 2px; display: inline-block; padding: 0 7px; border-radius: 8px; background: rgba(0,0,0,.25); font-size: 10px; }
.r-lock { margin-top: 2px; font-size: 10px; color: #ffd0d0; }

.lb-footer { text-align: center; padding: 8px 0 14px; font-size: 11px; color: #6b8aa8; }

/* ---------- 牛牛房间弹窗 ---------- */
.modal-sub { margin: 4px 0 12px; font-size: 12px; color: #8fa8c8; text-align: center; }
.niu-create-form { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 14px; }
.niu-create-form.hidden { display: none; }
.niu-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #6f8ab3; }
.niu-field-label { font-weight: 600; color: #14406e; font-size: 13px; }
.niu-field input[type=number],
.niu-field input[type=text] {
  padding: 8px 10px; border-radius: 6px; border: 1px solid #cfd6e2; font-size: 16px;
  background: #fff; color: #213c5a; outline: none;
}
.niu-field input[type=number]:focus,
.niu-field input[type=text]:focus { border-color: #1d6fc0; }
.niu-field-hint { font-size: 11px; color: #8fa8c8; }
.niu-create-cost { font-size: 12px; color: #b66; background: rgba(255,230,120,.15); border-radius: 6px; padding: 6px 10px; text-align: center; }
.niu-create-cost b { color: #c33; font-weight: 700; }
#niuCreateBtn { width: 100%; }
/* 创建房间的二级弹窗：盖在房间列表弹窗之上 */
#niuCreateModal { z-index: 60; }
#niuCreateCancel { width: 100%; margin-top: 8px; }
/* 列表弹窗底部的「创建房间」入口（房间已满时隐藏） */
#niuCreateOpen { width: 100%; margin-top: 12px; }
#niuCreateOpen.hidden { display: none; }
#niuClose { width: 100%; margin-top: 12px; }
.niu-list { max-height: 40vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.niu-empty { text-align: center; font-size: 12px; color: #7d94b3; padding: 14px 0; }
.niu-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: rgba(20, 50, 90, .55); border: 1px solid rgba(255,255,255,.15); border-radius: 10px;
  font-size: 12px; color: #fff;
}
/* 房主名 + 标记：只有昵称会被省略号截断，🔒/「我的」标记必须始终露出来
   （原来标记和昵称在同一个 nowrap+ellipsis 容器里，昵称一长就把标记裁没了） */
.niu-host { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; opacity: .9; }
.niu-host-name { font-weight: inherit; font-style: normal; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.niu-cnt { opacity: .8; flex: none; }
.niu-row .niu-join { padding: 5px 14px; }
/* 房间列表里的锁标记（该房间设了密码） */
.niu-lock { flex: none; font-size: 11px; opacity: .9; font-style: normal; }
/* 房间列表里标出「这是我自己开的房」（一个用户同时只能开一个） */
.niu-mine {
  flex: none; padding: 1px 6px; border-radius: 8px; font-style: normal;
  background: rgba(255, 215, 100, .22); color: #ffd964; font-size: 10px; font-weight: 600;
}
/* 进入有密码的房间时，行内展开的密码输入 */
.niu-row .niu-pwd {
  flex: 1; min-width: 0; padding: 5px 8px; border-radius: 6px; font-size: 14px;
  border: 1px solid #cfd6e2; background: #fff; color: #213c5a; outline: none;
}
/* 本局已开局、新人进不去时的说明 */
.niu-hint { margin-top: 8px; font-size: 11px; line-height: 1.5; color: #ffd964; text-align: center; }

/* ---------- 牛牛结算净胜负 ---------- */
.s-net { font-size: 13px; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.s-net.up { color: #ffd964; }
.s-net.down { color: #9fd0ff; }
/* 三公：本把下注额 + 下注阶段自己座位的高亮金圈（"点我可下注"文字标签 2026-09-24 已取消） */
.s-bet { margin-top: 3px; font-size: 12px; font-weight: 800; color: #ffe98a; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.seat.my-bet .avatar { box-shadow: 0 0 0 3px rgba(255,217,100,.75); }
.r-net { font-weight: 800; margin-left: 4px; }
.r-net.up { color: #ffd964; }
.r-net.down { color: #9fd0ff; }

/* ================= 牌桌 ================= */
.game {
  display: flex; flex-direction: column; height: 100%; position: relative;
  /* 三公房间：牌桌图作为背景铺满整屏（cover 保持比例，不变形；牛牛进房后有 .niu-table 自己的背景盖住，互不影响） */
  background: #150a0d url('sg-table.jpg') center / cover no-repeat;
}
/* 顶栏改为悬浮浮层：不再占布局高度，房间背景图整屏铺满，只有 ← / 房主 / 积分 浮在图上 */
.topbar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: transparent;
  pointer-events: none;              /* 浮层本身不挡下面牌桌的点击 */
}
/* 只有返回按钮可点，房主/积分纯文字不拦截牌桌点击 */
.topbar #backBtn, .topbar .tb-left .btn { pointer-events: auto; }
/* 左上角：房主信息 + 其下方的「结束本局」按钮 */
.tb-left { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.topbar .tb-left .btn.small { padding: 1px 9px; font-size: 12px; line-height: 1.5; }
.room-tag { font-size: 13px; color: #ffd964; font-weight: 700; flex: none;
  text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 6px rgba(0,0,0,.5); }
/* 右上角：筹码在上、其下方是「准备 N/M」（底部提示条取消后只剩这一行） */
.me-info { display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font-size: 14px; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 6px rgba(0,0,0,.5); }
.sg-readyn { font-size: 12px; color: #eaf3ee; font-weight: 700; opacity: .95; }
.pts { color: #ffd964; font-weight: 700; }
/* 顶栏里的按钮改成描边式（透明背景），文字白+阴影，深浅底都能看清 */
.topbar .btn.small {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
.topbar .btn.small:active { background: rgba(255,255,255,.12); }
/* 牌桌层铺满整屏：座位坐标 = 整屏百分比，才能和背景图里的桌子对上 */
.table-wrap { position: absolute; inset: 0; z-index: 1; }
/* 牌桌本体就是背景图，这里只保留一个透明容器，用来定位中间的奖池/阶段/倒计时 */
.table-felt {
  position: absolute; left: 10%; right: 10%; top: 22%; bottom: 16%;
  background: transparent; border: none; box-shadow: none;
}
/* 阶段名与倒计时：上移到桌面外侧上方，别压住中间那块下注筹码区 */
.center-info { position: absolute; left: 50%; top: 11%; transform: translate(-50%,-50%); text-align: center; }
.pot { font-size: 16px; color: #ffd964; font-weight: 700; }
.phase { margin-top: 4px; font-size: 13px; color: #cfe3d8; }
.count { font-size: 34px; font-weight: 700; color: #fff; min-height: 40px; }

/* 倒计时统一使用 nz.png 闹钟背景（2026-09-26，用户提供的 nz.png） */
.cd-bg { background: transparent url('/nz.png') center no-repeat; background-size: contain !important; border: none !important; }
#count.cd-bg { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.9);
  padding-top: 1px; /* 数字在闹钟图里稍下移，与缩小后的尺寸匹配 */ }

/* ---------- 桌面中央下注筹码区（三公）----------
   所有人下的注都拆成筹码图堆在桌布中间这一块里。
   默认 pointer-events:none（不吃点击，免得挡住座位），只有下注阶段 .betting 才可点。 */
.sg-pot-zone {
  /* top 45%（2026-09-19 回退）：牌缩小 1/3 后底部座位下移到 y57%，头像顶回 y≈410，
     筹码区底沿 y≈405 刚好错开；40% 是牌 78×110 那版为了躲头像才上移的，现在不用了。
     2026-09-29：下注区域框改为透明背景 + 透明边框，仅保留文字（总筹码 / 提示）。 */
  position: absolute; left: 50%; top: 45%; transform: translate(-50%,-50%);
  width: min(56%, 248px); padding: 9px 8px 7px;
  border-radius: 20px; border: 2px dashed transparent;
  background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none; z-index: 3;
  transition: border-color .18s, box-shadow .18s, transform .12s;
}
.sg-pot-zone.betting {
  pointer-events: auto; cursor: pointer;
  border-color: transparent; box-shadow: none;
}
.sg-pot-zone.betting:active { transform: translate(-50%,-50%) scale(.97); }
.sg-pot-zone.spectator { border-color: transparent; }
.sgp-stack {
  position: relative; width: 100%; height: 62px;
  display: flex; align-items: center; justify-content: center;
}
.sgp-chip {
  position: absolute; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: #4a3218; letter-spacing: -.3px;
  box-shadow: 0 1px 4px rgba(0,0,0,.55); text-shadow: 0 1px 0 rgba(255,255,255,.6);
  background-size: 100% 100%; background-repeat: no-repeat;
}
.sgp-total { margin-top: 2px; font-size: 12px; font-weight: 700; color: #ffe9a8; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.sgp-total b { font-size: 17px; color: #fff3c4; margin-right: 2px; }
.sgp-hint { margin-top: 1px; font-size: 11px; color: rgba(255,255,255,.62); }
.sg-pot-zone.betting .sgp-hint { color: #ffe08a; font-weight: 700; }

.seat {
  position: absolute; width: 92px; margin-left: -46px; margin-top: -26px;
  text-align: center; cursor: pointer; z-index: 2;
}
.seat.empty .avatar {
  background: rgba(255,255,255,.08); border: 1.5px dashed rgba(255,255,255,.35);
  color: rgba(255,255,255,.45);
}
.seat.empty:hover .avatar { background: rgba(255,217,100,.18); border-color: #ffd964; }
.seat .avatar {
  /* 40px（2026-09-23）：6 座改成一侧竖排 3 个，头像先缩到 44 还不够（结算态座位 ~193px，
     三档要 579px 而屏幕只有 ~518px），再退一档；结算的净胜负与牌型也并成一行，省 ~18px。 */
  width: 40px; height: 40px; margin: 0 auto; border-radius: 50%;
  background: #3d6a54; border: 2px solid #8fbfa4;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: #eaf3ee;
}
.seat.ready .avatar { border-color: #ffd964; box-shadow: 0 0 0 3px rgba(255,217,100,.35); }
.seat.offline .avatar, .seat.offline .s-name { opacity: .4; }
/* 座位圆圈里放预置头像图（服务端下发 s.avatar = 1~10 → public/avatar/N.jpg）
   预置图是竖构图半身照，圆形裁切时把焦点往上提，否则框里只剩身子 */
.seat .avatar .av-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center 12%; display: block; }
/* 空位：画一把椅子（内联 SVG），颜色跟随 .seat.empty 的文字色 */
.seat.empty .avatar .chair { width: 30px; height: 30px; display: block; }
.seat.empty:hover .avatar { color: #ffd964; }
/* 头像正下方的金额 = 本把押在这个位上的注额 */
.s-amt {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  margin-top: 2px; padding: 0 7px; border-radius: 9px; line-height: 18px;
  font-size: 14px; font-weight: 800; color: #fff3c4;
  background: rgba(0,0,0,.42); text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
.s-amt.zero { opacity: .45; }
.amt-chip {
  width: 13px; height: 13px; border-radius: 50%; display: inline-block; flex: none;
  background: url('/chip/c1.png') center / 100% 100% no-repeat;
}
.s-name { margin-top: 4px; font-size: 12px; color: #eaf3ee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-pts { font-size: 11px; color: #ffd964; }
.s-tag { display: inline-block; margin-top: 2px; padding: 1px 8px; border-radius: 8px; font-size: 11px; background: rgba(255,217,100,.9); color: #3a2d0a; font-weight: 700; }
.s-tag.ok { background: rgba(120,220,160,.92); color: #0f2c1c; }   /* 已摊牌 */
/* 自己坐的那个座位：加一圈金边，换座后一眼能看出坐到哪了 */
.seat.mine .avatar { border-color: #ffd964; box-shadow: 0 0 0 3px rgba(255,217,100,.28); }
/* （.s-label 已废弃：2026-09-24 起牌型改由紫色报点横幅 .sg-point 显示） */
/* 三公报点横幅（2026-09-24）：紫色花瓣图 sg-point-banner.png（318×113），
   叠在 3 张牌（46×65，叠排总宽 92）的下部 1/3 上——牌高 65 的 1/3 ≈ 22px，
   横幅高 92×113/318 ≈ 33px，bottom:-11px 正好压住牌的下沿 22px、露出 11px 在牌外。
   原来的「净胜负 + 牌型」文字行（.s-res/.s-label）已随本次改版删除。 */
.mini-cards { position: relative; }
.sg-point {
  position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%);
  width: 92px; height: 33px; z-index: 2; pointer-events: none;
  background: url('sg-point-banner.png') center / 100% 100% no-repeat;
  display: flex; align-items: center; justify-content: center;
}
.sg-point span {
  font-size: 13px; font-weight: 800; color: #fff;
  text-shadow: 0 1px 3px rgba(40,0,60,.85), 0 0 6px rgba(0,0,0,.4);
  transform: translateY(0);         /* 2026-09-24：文字从 -2px 下移到 0（用户要求再往下一点） */
}
.sg-point.pop { animation: sres-pop .38s cubic-bezier(.2,1.5,.4,1); }

/* 三公的牌显示在各自座位上（底部大牌区已隐藏）。
   尺寸 46×65（2026-09-23）：6 座改成一侧竖排 3 个，在 52×73 那版（= 78×110 的 2/3）上再缩一档。
   3 张平铺要 46×3 = 138px，6 个座位分左右两侧照样塞不下（侧边座位会溢出屏幕），
   所以继续叠排：后一张向左压 23px、只露前一张的左侧 23px，一组总宽 = 46 + 23×2 = 92px。
   三件必须配套的事（少一件牌就废）：
     ① flex:none —— 座位宽只有 92px，默认 flex-shrink 会把牌压扁（写 52 也只会渲染成 28）；
     ② 牌面内容左对齐 —— 内容是居中的话，露出来的 23px 恰好是字的左半边，根本看不出几点；
        左对齐 + 3px 内边距后，"A/K/Q/10" 整个落在可见的那 23px 里。
     ③ 叠上来的那张加左侧阴影 —— 白底牌叠白底牌，没有阴影就糊成一片分不出张数。 */
.mini-cards { display: flex; justify-content: center; margin-top: 4px; }
.mini-cards .card { flex: none; }
.mini-cards .card + .card {
  margin-left: -23px;
  box-shadow: -2px 0 4px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .35);
}
.card.mini {
  width: 46px; height: 65px; border-radius: 6px;
  align-items: flex-start; padding-left: 3px;   /* 内容靠左：叠排露出的那 23px 里正好是点数+花色 */
}
.card.mini .r { font-size: 17px; }
.card.mini .s2 { font-size: 13px; }
/* "10" 是两位数：23px 可见区里 17px 字号放不下，缩到 14px 再收点字距 */
.card.mini .r.t10 { font-size: 14px; letter-spacing: -.5px; }

.card {
  position: relative; width: 78px; height: 110px; border-radius: 9px;
  background: #fff; border: 1px solid transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,.35);
}
.card .r { font-size: 28px; font-weight: 700; line-height: 1.1; }
.card .s2 { font-size: 22px; line-height: 1; }
.card.red { color: #d33; }
.card.black { color: #222; }
.card.back {
  background: #33518f url('card-back.png') center / 100% 100% no-repeat;
  background-size: cover;
  border-color: transparent;
}
/* 牌背用整张 card-back.png，不再需要 ::after 内框装饰 */
.card.back::after { display: none; }

/* 2026-09-27 真实牌面：整张 cards/{rank}_of_{suit}.png 填满牌框（cover 轻微裁上下边，
   源图 222×323 比例 0.687，牌框 78×110=0.709 / 46×65=0.708，裁掉 <3% 无碍角标）。
   牌背 / 牌框白底与边框 / 圆角 / 阴影全部沿用 .card 原样式。 */
/* 真实牌面图要铺满整块内容区：清掉为文字牌准备的左内边距（.card.mini 的 padding-left:3px） */
.card.pic { display: block; padding: 0; }
.card.pic img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: inherit; user-select: none; -webkit-user-drag: none;
}
/* 2026-09-28：21点牌面取消边框颜色；object-fit: contain 让整张牌（含 Q/K 人像/角标）完整不裁切；
   圆角收到 3px + padding 4px 缓冲，避免圆角把角标字母的角落切掉；牌总尺寸不变（box-sizing: border-box） */
.bj-table .card.pic { border-color: transparent; background-clip: padding-box; border-radius: 3px; box-sizing: border-box; padding: 4px; }
.bj-table .card.pic img { object-fit: contain; border-radius: inherit; }

/* 三公底部浮层：提示浮在操作栏上方；下注条在下注阶段占住底部（.actions 此时被隐藏）。
   外层 pointer-events:none，让没控件的地方点得到牌桌（座位），控件本身再打开点击。 */
.sg-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; pointer-events: none; }
/* 三公的阶段提示条（#sgTip）已于 2026-09-23 取消：准备人数改到右上角筹码下方，
   倒计时本来就在桌面中央的 #count 上，所以 .sg-bottom 里不再有 .my-tip。 */
/* 三公下注条（#sgBetBar）：背景用 sg-bar-bg.png（2026-09-24 与牛牛对调后，此图＝金弧线图，
   899×300 带透明通道），去底色/边线（透明区透出牌桌）；高度定死 200px（2026-09-23）。
   只覆盖三公——牛牛的下注条（#niuBetBar）走 .niu-betbar 基类的 niu-bar-bg.png。 */
.sg-bottom .niu-betbar {
  position: absolute; left: 0; right: 0; bottom: 0; pointer-events: auto;
  height: 200px; padding: 61px 10px 5px;   /* 26/30 → 51/5（下移 25px）→ 61/5（2026-09-24：再下移 10px，栏高不变） */
  background: url('sg-bar-bg.png') center top / cover no-repeat;
  border-top: none;
}
/* 【下注】+【撤销】同一行：下注居中、撤销紧跟其右（撤销原在下注条第一行） */
.sg-betrow { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 10px; }
.sg-betbtn { display: inline-block; width: fit-content; padding: 8px 26px; }
.sg-betbtn { display: inline-block; width: fit-content; padding: 8px 26px; }

.my-cards {
  display: flex; justify-content: center; gap: 8px; min-height: 118px; padding: 6px 0 2px;
  /* 上移到牌桌下半部（你的牌摆在自己座位前方的桌面上），给底部中间那个座位让出位置 */
  position: absolute; left: 0; right: 0; bottom: 230px; z-index: 3;
  pointer-events: none;   /* 只是展示，别挡住下面牌桌和座位的点击 */
}
.my-cards .card { transition: transform .15s; }
.my-cards .card:hover { transform: translateY(-6px); }
/* 阶段提示：已移到四个下注框（niu-felt）下方。绿呢底上加阴影保证可读 */
.my-tip {
  text-align: center; font-size: 13px; color: #dff3e8; min-height: 20px;
  flex: 0 0 auto; padding: 4px 0 2px;
  margin-top: 8px;                         /* 与上方下注框留一点间距（原先在荷官下方需大间距，已不需要） */
  text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 6px rgba(0,0,0,.5);
}
/* 把数进度（如 "3/10" + 每把赢家图标）：显示在荷官下方、四个下注框上方（原位置），左对齐。
   统一给 margin-top 让本把输赢公告 + 4 个下注框整体随之下移 80px（相对上次的 100px 上移 20px，荷官不动） */
.niu-round {
  /* 2026-09-24：公告条改成挂在这一格里（position:relative 供它绝对定位），上移到荷官下方 */
  position: relative;
  flex: 0 0 auto; text-align: left; font-size: 13px; color: #ffd964; font-weight: 700;
  margin-top: 80px; padding: 0 14px 6px; line-height: 18px;
  text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 6px rgba(0,0,0,.5);
  font-variant-numeric: tabular-nums;
}
/* N/10 右侧的每把赢家花色图标（红 ♦♥ / 白 ♣♠ 在深色牌桌上均可见） */
.niu-round-wins { margin-left: 8px; }
.nrw { margin: 0 1px; font-size: 15px; font-weight: 700; }
.nrw.red { color: #ff9a9a; }
.nrw.black { color: #f2f5f3; }

/* 准备按钮横栏：与下注筹码栏同款木边绿呢背景 */
.actions {
  display: flex; justify-content: center; gap: 14px; padding: 62px 0 29px;  /* 57/34 → 62/29：按钮再下移 5px，栏高 133px 不变 */
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;  /* 同手牌：浮在牌桌图上 */
  /* 牛牛背景（2026-09-24 晚）：与三公对调，niu-bar-bg.png 现在是黑金弧线图（899×300 带透明
     通道），去掉深棕底色和顶部 1px 边线，透明区直接透出牌桌；三公用 .sg-compact 覆盖成金弧线 */
  background: url('niu-bar-bg.png') center top / cover no-repeat;
  border-top: none;
}
/* 三公专用（2026-09-23）：按钮区是 100px 高（padding 34/22 + 按钮 ~44）。
   背景（2026-09-24 晚与牛牛对调）：sg-bar-bg.png 现在是金弧线图（899×300，带透明通道），
   去掉深棕底色 #1b1008 和顶部 1px 边线，让透明区直接透出牌桌；`center top` 保住弧形顶边。
   用 class 切换而不是直接改 .actions，牛牛那边保持原样。 */
.actions.sg-compact {
  padding: 59px 0 17px;    /* 44/22 → 26/12（压矮 32px）→ 34/22（100px）→ 44/32（120px）→ 56/20（下移12px）→ 59/17（2026-09-24：再下移 3px，栏高 120px 不变） */
  background: url('sg-bar-bg.png') center top / cover no-repeat;
  border-top: none;
}
.btn {
  padding: 10px 30px; border-radius: 10px; border: 1px solid #3a5a4c;
  background: #24473a; color: #eaf3ee; font-size: 15px; cursor: pointer;
}
.btn.primary { background: linear-gradient(180deg, #ffd964, #f0a92e); border-color: #f0a92e; color: #5b3a00; font-weight: 700; }
/* 金色贴图按钮（准备/开始）：用 zb.png 金色果冻底图铺满，去掉渐变和描边 */
.btn.gold {
  background: url('btn-gold.png') center / 100% 100% no-repeat;
  border: none; color: #6b4300; font-weight: 800;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.35));
}
.btn.gold:active { transform: scale(.96); filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.btn.danger { background: linear-gradient(180deg, #ff7a59, #e23b2e); border-color: #e23b2e; color: #fff; font-weight: 700; }
.end-match-actions { display: flex; gap: 12px; margin-top: 16px; }
.end-match-actions .btn { margin: 0; flex: 1; }
.btn.small { padding: 5px 12px; font-size: 12px; border-radius: 8px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:active { transform: scale(.97); }

.result-panel {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%);
  z-index: 40; background: rgba(10,20,15,.95); border: 1px solid #3a5a4c;
  border-radius: 14px; padding: 16px 20px; min-width: 260px; max-width: 92vw;
  max-height: 70vh; overflow-y: auto;
  cursor: pointer;   /* 点一下关闭（结果同时留在各座位上，不会丢信息） */
}
.r-hint { margin-top: 8px; text-align: center; font-size: 11px; color: #8fa89b; }
.r-row .r-bet { color: #ffe98a; font-size: 12px; }
.result-panel h3 { text-align: center; color: #ffd964; font-size: 16px; margin-bottom: 10px; }
.r-row {
  display: flex; align-items: center; gap: 10px; padding: 5px 4px;
  border-bottom: 1px dashed rgba(255,255,255,.12); font-size: 13px;
}
.r-row:last-child { border-bottom: none; }
.r-row .rk { width: 22px; color: #9db8ac; }
.r-row.win { color: #ffd964; font-weight: 700; }
.r-row .r-cards { display: flex; gap: 2px; margin-left: auto; }
/* 结算弹窗是紧凑列表（一行还要放名次/昵称/牌型/注额/输赢），这里的牌保持原尺寸，
   不跟着座位牌一起加宽 —— 否则一行最多 5 手 × 3 张会把弹窗撑爆。 */
/* 结算弹窗一行要放 5 手牌，牌必须保持小号（34×48）且内容居中
   —— 注意要把 .card.mini 的「左对齐 + 7px 内边距」在这里还原，否则弹窗里的字会贴左边 */
.r-cards .card.mini { width: 34px; height: 48px; align-items: center; padding-left: 0; }
.r-cards .card.mini .r { font-size: 12px; }
.r-cards .card.mini .s2 { font-size: 11px; }

/* ---------- 牛牛牌桌（房间场景图作为整张背景） ---------- */
.niu-table {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  padding-top: clamp(46px, 6vh, 58px);  /* 给悬浮顶栏让位，金匾/倒计时整体下移 */
  background: #1b1008 url('room-bg.jpg') center top / cover no-repeat;
}
.niu-table.hidden { display: none; }

/* 桌面远端小挡板：仅作金匾/倒计时/筹码堆的容器，背景透明让房间图露出 */
.niu-head {
  position: relative; flex: 0 0 auto;
  height: clamp(62px, 9vh, 80px);     /* 缩小为只容装饰条 */
  margin: 0 8px;
  overflow: visible;                  /* 让筹码堆出框一点点没问题 */
  background: transparent;
}
/* 金匾「牛牛大吃小」已移除（原 .nd-plaque） */
.nd-clock {
  position: absolute; right: 8px; top: 6px; z-index: 3;
  width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, #4a3018, #1d1006);
  border: 2px solid #c8891a;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 2px 9px rgba(0,0,0,.6);
}
.nd-clock b { font-size: 18px; line-height: 1; color: #ffd964; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.9);
  padding-top: 2px; } /* 2026-09-26：数字在闹钟图里下移 2px */
.nd-clock i { font-size: 8px; line-height: 1.2; margin-top: 2px; color: #f0cfa0; font-style: normal; }
.nd-clock.cd-bg { background: transparent url('/nz.png') center no-repeat !important; background-size: contain !important; border: none !important; box-shadow: none !important; }
/* 2026-09-25：倒计时圆圈正下方的「准备 N/N」——跟着圆圈右侧对齐，压在荷官场景图上 */
.nd-readyn {
  position: absolute; right: 8px; top: 56px; z-index: 3;
  font-size: 12px; font-weight: 700; color: #eaf3ee; white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 6px rgba(0,0,0,.6);
}

/* 发牌起点：背景图右上角那个发牌盒（图上已有，不放实体元素，坐标在 client.js 的 SHOE_POS） */

/* 发牌飞行层：fixed 全屏，不拦截点击 */
#niuFly { position: fixed; inset: 0; pointer-events: none; z-index: 80; overflow: hidden; }
#niuFly .fly-card {
  position: fixed; border-radius: 5px;
  background: #33518f url('card-back.png') center / 100% 100% no-repeat;
  will-change: transform;
  /* 不要加投影：牌在起点放大 1.5 倍时，会在发牌盒上留下一团黑影 */
}
/* 两侧彩色筹码球装饰已移除（原 .nd-stack / .nd-stack-l / .nd-stack-r） */

.niu-felt {
  flex: 1; min-height: 0; margin: 0 8px; position: relative; overflow: hidden;
  /* 让房间背景图的绿色桌面延续过来 */
  background: transparent;
  border-bottom: none;
}
.niu-panels {
  position: absolute; left: 6px; right: 6px;
  top: 50%; transform: translateY(calc(-50% - 20px));   /* 2026-09-24：去掉 +25px 偏移（上移 25px）后，两次微调各再上移 10px（累计 −20px） */
  height: 85%;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 7px;
}
/* 每一门：花色水印 + 历史牌型 + 筹码堆 + 5 张牌位 + 底部数字条 */
.np {
  position: relative; overflow: hidden; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.12));
  box-shadow: inset 0 0 14px rgba(0,0,0,.25);
  display: flex; flex-direction: column; min-height: 0;
  cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.np:active { border-color: rgba(255,217,100,.85); }
.np-win { border-color: #ffd964; box-shadow: 0 0 14px rgba(255,217,100,.7), inset 0 0 18px rgba(255,217,100,.18); }
.np-mine { background: linear-gradient(180deg, rgba(120,255,180,.15), rgba(0,0,0,.12)); }
.np-wm {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  pointer-events: none; text-align: center;
  font-size: 60px; line-height: 1; font-weight: 700; color: #fff; opacity: .12;
}
/* 下注者名单：压在面板最上方，按首次下注顺序编号 */
.np-bettors {
  flex: 0 0 auto; position: relative; z-index: 2;
  margin: 3px 3px 0; padding: 2px 3px; border-radius: 4px;
  background: rgba(0,0,0,.34); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  display: flex; flex-direction: column; gap: 1px;
  pointer-events: none;                 /* 点名单也能落到整块面板上下注 */
  max-height: 74px; overflow: hidden;
}
.np-bt { display: flex; align-items: center; gap: 3px; font-size: 10px; line-height: 13px; }
.np-bt i {
  flex: none; width: 13px; height: 13px; border-radius: 3px; font-style: normal;
  background: rgba(255,255,255,.2); color: #fff; font-size: 9px; font-weight: 700;
  text-align: center; line-height: 13px;
}
.np-bt b { flex: 1; min-width: 0; color: #dff3e8; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-bt em { flex: none; color: #ffe08a; font-style: normal; font-weight: 800; }
.np-bt.me i { background: rgba(120,255,180,.45); color: #06301b; }
.np-bt.me b { color: #8dffbe; }
.np-bt.more i { font-size: 8px; }
.np-bt.more b { color: #b9d6c6; }
.np-stack {
  flex: 0 0 auto; height: 46px; padding: 4px 0 2px;
  display: flex; align-items: flex-end; justify-content: center;
}
.np-stack .chip {
  width: 23px; height: 23px; border-radius: 50%; margin-left: -9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 800; color: #4a3218; letter-spacing: -.3px;
  border: 1.5px solid transparent;            /* 贴图筹码自带描边，虚线框退位 */
  box-shadow: 0 1px 4px rgba(0,0,0,.55);
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
}
.np-stack .chip:first-child { margin-left: 0; }
.np-stack .chip:nth-child(2n) { transform: translateY(-5px); }
.np-stack .chip:nth-child(3n) { transform: translateY(-9px); }
.np-cards {
  flex: 1; min-height: 0; position: relative;
  display: flex; align-items: center; justify-content: center; gap: 3px;
  perspective: 800px;        /* 掀牌动画的 3D 透视（只作用于子元素，不影响自身位移） */
  transform: translateY(20px);   /* 下注框里的扑克牌整体下移 20px（transform 不影响布局，牌型标签跟着牌一起走） */
}
/* 牛牛面板迷你牌：跟随 .card.mini 加大后的尺寸 */
.np-cards .card.mini { width: 30px; height: 42px; border-radius: 4px; }
.np-cards .card.mini .r { font-size: 13px; }
.np-cards .card.mini .s2 { font-size: 12px; }
/* 空牌位框已取消：未发牌留白，发牌后直接显示明牌 */
.np-bar {
  flex: 0 0 auto; height: 18px; display: flex; align-items: center; justify-content: center; gap: 4px;
  background: rgba(0,0,0,.3); font-size: 11px; color: #fff;
}
.np-bar .np-suit { font-size: 13px; line-height: 1; font-weight: 700; }
.np-bar .np-suit.red { color: #ff9a9a; }
.np-bar .np-suit.black { color: #f2f5f3; }
.np-bar .np-amt { color: #ffe08a; font-weight: 800; }
/* 结算：牌型标签（横幅底图）悬在扑克牌上方 */
.np-label {
  position: absolute; left: 50%; top: -28px; transform: translateX(-50%);
  height: 55px; min-width: 150px; padding: 12px 30px 0; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  white-space: nowrap; z-index: 3;
  background: url('/paixing.png') center / 100% 100% no-repeat;
  color: #ffe9b0; font-size: 17px; font-weight: 800; line-height: 1; letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(20,10,45,.95), 0 0 5px rgba(130,90,255,.55);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.55));
}
/* 掀完牌弹出标签时的弹跳动画（keyframes 里必须带上 translateX(-50%)，否则会丢掉水平居中） */
.np-label.pop { animation: label-pop .38s cubic-bezier(.2,1.5,.4,1); }
@keyframes label-pop {
  0%   { transform: translateX(-50%) scale(.4); opacity: 0; }
  60%  { transform: translateX(-50%) scale(1.12); opacity: 1; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}
/* 三公开牌：一家翻完报点横幅的弹跳动画（keyframes 供 .sg-point.pop 使用） */
@keyframes sres-pop {
  0%   { transform: scale(.4); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
/* 结算飘字（模仿视频里的缎带） */
.niu-float {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  padding: 5px 21px 5px 26px; border-radius: 4px; z-index: 6; white-space: nowrap;
  background: linear-gradient(180deg, #f7fafd, #9fadbb);
  border: 2px solid rgba(255,217,100,.8);
  color: #16212e; font-size: 24px; font-weight: 900; letter-spacing: 5px;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
  box-shadow: 0 8px 24px rgba(0,0,0,.65);
  animation: floatIn .28s ease-out;
}
.niu-float.hidden { display: none; }
.niu-float::before, .niu-float::after {
  content: ""; position: absolute; top: 50%; width: 0; height: 0;
  border-top: 10px solid transparent; border-bottom: 10px solid transparent;
  transform: translateY(-50%);
}
.niu-float::before { left: -17px; border-right: 17px solid #a6b3c0; }
.niu-float::after { right: -17px; border-left: 17px solid #a6b3c0; }
@keyframes floatIn {
  from { opacity: 0; transform: translate(-50%,-50%) scale(1.35); }
  to { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
/* 飘窗换成缎带图片模式（你赢了/你输了）：去掉文字气泡的底板、描边和两侧箭头 */
.niu-float.img {
  padding: 0; background: none; border: none; box-shadow: none;
  filter: drop-shadow(0 5px 10px rgba(0,0,0,.55));
}
.niu-float.img::before, .niu-float.img::after { display: none; }
.niu-float .float-img { display: block; width: 230px; height: auto; }
/* 2026-09-25：胜利飘窗换金币皇冠图（506×350），紫色空框里叠净赢筹码数。
   框面像素扫描：中央列 y 64.6%~74%、x 15.8%~84.2%（含渐变边整体约 57%~84%），
   数字中心 y=69%，左右留 19% 避开斜切角。图显示宽 240px → 高 166px。 */
.niu-float .float-win { position: relative; display: block; }
.niu-float .float-win .float-img { width: 240px; }
.float-win-amt {
  position: absolute; left: 19%; right: 19%; top: 69%; transform: translateY(-50%);
  text-align: center; font-size: 30px; line-height: 1; font-weight: 900; font-style: italic;
  color: #fff; letter-spacing: 1px; pointer-events: none;
  text-shadow: 0 2px 0 #4638b8, 0 0 10px rgba(120,90,255,.65), 0 3px 7px rgba(20,5,80,.55);
}

/* 结算文字公告条（替代原输赢弹窗） */
.niu-bulletin {
  /* 2026-09-24：从牌桌区顶部（top:6px）上移到把数进度行这一格（.niu-round 内 top:-4px），
     也就是背景荷官人物的正下方；出现时盖住把数行（已与用户确认） */
  /* 2026-09-24 二次微调：再上移 30px（top -4 → -34），左右各多缩 20px（总长 −40px），仍居中 */
  /* 2026-09-24 三次微调：左右各再缩 5px（总长再 −10px），仍居中；去掉外阴影 */
  position: absolute; left: 39px; right: 39px; top: -34px; z-index: 7;
  padding: 7px 10px; border-radius: 8px; text-align: center;
  background: rgba(8,16,30,.78); border: 1px solid rgba(255,217,100,.55);
  color: #ffd964; font-size: 13px; font-weight: 700; letter-spacing: .4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: none;   /* 2026-09-24：公告条阴影取消 */
}
.niu-bulletin.hidden { display: none; }
.niu-bulletin b { color: #fff; }
.niu-bulletin .nb-win  { color: #ff6b6b; }
.niu-bulletin .nb-lose { color: #4be08a; }
.niu-bulletin .nb-zero { color: #aab4c2; }

/* 底池/人数状态条已移除（原 .niu-status / .niu-dot） */

/* 筹码栏 */
.niu-betbar {
  flex: 0 0 auto; padding: 36px 10px 43px;   /* 24/30 → 36/43（2026-09-24：与准备栏一起再加高 25px） */
  /* 牛牛下注条背景（2026-09-24）：换成贴图并透明化（去底色/边线），与准备栏同图同向；
     2026-09-24 晚与三公对调后此图＝黑金弧线图。三公的下注条由 .sg-bottom .niu-betbar
     覆盖成 sg-bar-bg.png（金弧线），不受影响 */
  background: url('niu-bar-bg.png') center top / cover no-repeat;
  border-top: none;
}
.niu-betbar .nb-top { text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.niu-betbar.hidden { display: none; }
.nb-top {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: #e6cfae; margin-bottom: 7px;
}
.nb-sel b { color: #ffd964; font-size: 13px; }
.nb-mine b { color: #ffe98a; }
.nb-undo {
  padding: 3px 13px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.12);
  color: #fff; font-size: 11px;
}
.nb-undo:active { transform: scale(.96); }
/* 牛牛【撤销】（2026-09-24）：整枚按钮上移 10px。
   只改 #niuClearBtn —— 三公的 #sgClearBtn 虽然同款 .nb-undo，但它在下注按钮右边那一行（.sg-betrow），不跟着动 */
#niuClearBtn { position: relative; top: -10px; }
.nb-chips { display: flex; align-items: flex-end; justify-content: space-around; gap: 4px; }
.nb-chip {
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff; line-height: 1.1;
  border: 2px dashed rgba(255,255,255,.82);
  box-shadow: 0 2px 7px rgba(0,0,0,.55);
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
  transition: transform .12s, box-shadow .12s;
}
.nb-chip .u { font-size: 8px; font-weight: 700; opacity: .9; }
.nb-chip.on {
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 0 0 3px rgba(255,217,100,.85), 0 5px 14px rgba(0,0,0,.6);
}
/* 筹码配色：改用贴图（绿=1 / 蓝=5 / 橙=10 / 紫=50 / 红=100，中心白盘 → 数字用深色） */
.c1, .c5, .c10, .c50, .c100 {
  color: #4a3218; text-shadow: 0 1px 0 rgba(255,255,255,.65);
  background-size: 100% 100%; background-repeat: no-repeat;
}
.c1   { background-image: url('/chip/c1.png');   border-color: transparent; }
.c5   { background-image: url('/chip/c5.png');   border-color: transparent; }
.c10  { background-image: url('/chip/c10.png');  border-color: transparent; }
.c50  { background-image: url('/chip/c50.png');  border-color: transparent; }
.c100 { background-image: url('/chip/c100.png'); border-color: transparent; }

.modal {
  position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
}
.modal-box {
  background: #f5f9fc; color: #223; border-radius: 16px; padding: 20px 22px;
  width: 340px; max-width: 90vw; max-height: 80vh; overflow-y: auto;
}
.modal-box h3 { color: #14406e; margin-bottom: 12px; text-align: center; }
.modal-box ul { padding-left: 20px; font-size: 14px; line-height: 1.9; }
.modal-box .btn { margin: 16px auto 0; display: block; }

/* 结算弹窗：成员输赢列表 */
.result-box { padding: 18px 18px 16px; }
.result-box h3 .room-no { font-weight: 400; font-size: 12px; color: #6f8ab3; margin-left: 4px; }
.result-box .modal-sub {
  text-align: center; font-size: 12px; color: #5a708a; margin: -6px 0 10px;
}
.result-list {
  display: flex; flex-direction: column; gap: 4px; margin: 6px 0 4px;
  max-height: 56vh; overflow-y: auto;
}
.rl {
  display: grid; grid-template-columns: 28px 1fr 70px; align-items: center;
  padding: 8px 10px; border-radius: 10px; font-size: 14px;
  background: #f6f9ff; color: #2a3850;
}
.rl .rk {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: #d8e3f3; color: #4a6ea3; font-weight: 700;
}
.rl .rn { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl .rn .me { background: #ffe9a8; color: #5b3a00; font-size: 10px; padding: 1px 6px; border-radius: 8px; font-style: normal; }
.rl .rp { text-align: right; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.rl.win  { background: #eaf6ec; }
.rl.win  .rp { color: #c2281f; }   /* 中国股市惯例：涨红跌绿 */
.rl.lose { background: #fbeeee; }
.rl.lose .rp { color: #1f9d3a; }
.rl.zero { background: #eef1f5; }
.rl.zero .rp { color: #6f8ab3; }

/* 一局完成后的统计：古风画框背景（match-frame.png），只展示排名 + 累计输赢 */
/* ---------- 21点牌桌（bj21）：bj-table.jpg 整幅背景（自带荷官），对照参考视频布局 ---------- */
.bj-table {
  position: absolute; inset: 0;
  background: url('bj-table.jpg') center top / cover no-repeat;
  overflow: hidden;
}
/* 2026-09-26 第四轮：倒计时闹钟靠右贴在背景右上角，再往下移 20px（top 6 → 26），尺寸缩到 58×58 */
.bj-head { position: absolute; top: 26px; left: 0; right: 0; display: flex; justify-content: flex-end; padding-right: 12px; }

/* 庄家区：荷官手前的牌（背景图荷官在顶部，牌摆在 ~15%~30%；2026-09-26 第四轮整体下移 20px） */
.bj-dealer { position: absolute; top: calc(15% + 20px); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bj-dealer-cards { display: flex; min-height: 66px; }
.bj-dealer-cards .card.mini { width: 46px; height: 65px; }
.bj-dealer-cards .card.mini + .card.mini { margin-left: -18px; }
.bj-score { min-width: 30px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 9px; border-radius: 12px; background: #27a65a; color: #fff; font-size: 14px; font-weight: 700;
  border: 1.5px solid rgba(255,255,255,.8); box-shadow: 0 2px 4px rgba(0,0,0,.4); }
.bj-score.bust { background: #d8433a; }
.bj-score.best { background: #f2a13d; }
.bj-hidden { visibility: hidden; }

/* 5 座常驻桌（对照参考截图）：4 个座位沿牌桌两侧分布（左2右2），自己在底部左下角。
   座位号顺序 = 服务端自动入座顺序：0/1 左列自上而下，2/3 右列自上而下 */
.bj-seats { position: absolute; left: 0; right: 0; top: 30%; bottom: 196px; pointer-events: none; }
.bj-slot { position: absolute; width: 96px; }
.bj-slot .bj-player { pointer-events: auto; }
.bj-p0 { left: 2%; top: 0; }
.bj-p1 { left: 2%; top: 52%; }
.bj-p2 { right: 2%; top: 0; }
.bj-p3 { right: 2%; top: 52%; }
/* 手牌浮在座位信息块旁：左列朝右伸（朝桌面中央）、右列朝左伸 */
.bj-slot .bj-hand { position: absolute; left: calc(100% + 2px); top: 4px; }
.bj-p2 .bj-hand, .bj-p3 .bj-hand { left: auto; right: calc(100% + 2px); }

/* 自己（参考图：头像卡在左下角，手牌浮在右侧屏幕中央，注圈同座位款） */
.bj-me { position: absolute; left: 3%; bottom: 108px; width: 96px; display: flex; justify-content: center; pointer-events: none; }
.bj-me .bj-player { pointer-events: auto; }
.bj-me .bj-avatar { width: 56px; height: 56px; }
.bj-me .bj-name { font-size: 11px; }
.bj-me .bj-pts { font-size: 11px; }
.bj-me .bj-hand { position: absolute; left: calc(100% + 66px); top: 10px; }
.bj-me .bj-hand .card.mini { width: 42px; height: 59px; }
.bj-me .bj-hand .card.mini + .card.mini { margin-left: -18px; }
.bj-me .bj-net { font-size: 16px; position: absolute; left: calc(100% + 90px); top: 74px; }
/* 中央提示 + 倒计时 */
.bj-center { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: 70%; text-align: center; }
/* 2026-09-26 第四轮：缩小到 58×58、字号 20（原来 70×70/24），配合 top 26px 下移 20px */
.bj-cd { display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; font-size: 20px; font-weight: 700; color: #ffe9a8; text-shadow: 0 1px 4px rgba(0,0,0,.9);
  padding-top: 2px; /* 数字在闹钟图里下移 2px */ }
/* 21点/三公倒计时共用 .cd-bg 闹钟图（border-radius 去掉，让图片完整露出） */
.bj-cd.cd-bg { border-radius: 0; }
.bj-center span { color: #eef3fb; font-size: 13px; text-shadow: 0 1px 3px rgba(0,0,0,.75); }

/* 玩家座位卡（对照参考图）：头像卡在上，名字/积分竖排在头像正下方。
   2026-09-26：座位外框已取消 —— 有玩家入座时只给头像加框（见 .bj-avatar），空位只画椅子 */
.bj-player { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bj-player.acting .bj-avatar { border-color: #f4c66d; box-shadow: 0 0 8px rgba(244,198,109,.75); }
.bj-player.offline { filter: grayscale(.7) brightness(.8); }
.bj-avatar { width: 50px; height: 50px; border-radius: 10px; object-fit: cover;
  border: 1.5px solid rgba(255,255,255,.8); box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.bj-name { color: #fff; font-size: 10px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bj-pts { color: #dfe8f5; font-size: 10px; font-variant-numeric: tabular-nums; }
/* 手牌：浮在信息块旁（左列座位牌朝右伸、右列朝左伸，见 .bj-p2/.bj-p3） */
.bj-hand { display: flex; min-height: 0; }
.bj-hand .card.mini { width: 30px; height: 42px; }
.bj-hand .card.mini + .card.mini { margin-left: -14px; }
.bj-hand .bj-score { position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); margin: 0; }

/* 2026-09-27 爆牌爆炸：boom.gif（透明底循环动画）挂在爆牌者手牌上方，持续到结算清牌。
   挂在 .bj-hand（侧面座位/自己的 hand 都是 absolute 定位，可作 containing block）；
   庄家挂在 .bj-dealer 顶上。快照重建座位后由 renderBjTable 检测缺失再补挂，音效不重播。 */
.bj-boom { position: absolute; left: 50%; bottom: calc(100% - 26px); transform: translateX(-50%);
  width: 68px; height: 68px; pointer-events: none; z-index: 6; }
.bj-boom img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* 椭圆注圈（参考图）：描边椭圆内一枚筹码，注额黑条黄字挂在圈下 */
/* 2026-09-26 第七轮：座位下注标记取消椭圆描边与黑条，只留一枚小筹码 + 右侧金色数字并排 */
.bj-betcircle { position: absolute; left: 50%; transform: translateX(-50%); bottom: -24px;
  display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.bj-betcircle img { width: 15px; height: 15px; border-radius: 50%; display: block; }
.bj-betamt { font-style: normal; font-size: 11px; font-weight: 700; color: #ffd76a;
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 5px rgba(0,0,0,.7); }
/* 2026-09-26 第八轮：标签行绝对定位到头像上方（不参与竖排、不挤动座位布局） */
.bj-tags { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(100% + 4px);
  display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; max-width: 112px; white-space: nowrap; writing-mode: horizontal-tb; }
/* 同时轮到行动（头顶有「行动中」标签）时，整个标签行再上移，避免叠字 */
.bj-player.acting .bj-tags { bottom: calc(100% + 16px); }
.bj-tag { font-style: normal; font-size: 10px; padding: 1px 6px; border-radius: 8px; color: #fff;
  white-space: nowrap; writing-mode: horizontal-tb; text-orientation: mixed; flex-shrink: 0; }
/* 2026-09-27：t-bj（黑杰克）/ t-ins（保险）两个标签随玩法取消一并移除 */
.bj-tag.t-bust { background: #d8433a; }
.bj-tag.t-five { background: #8e44d4; }
.bj-tag.t-stand { background: #e2853a; }
.bj-net { font-size: 13px; }
.bj-net.win { color: #7ee08a; }
.bj-net.lose { color: #ff8a80; }
.bj-net.zero { color: #ffe9a8; }
.bj-turn-tag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 10px;
  background: #f4c66d; color: #4a3005; padding: 1px 7px; border-radius: 8px; white-space: nowrap; }
/* 空位：一把椅子线性图标 + 一圈圆形描边（2026-09-26） */
.bj-player.empty { min-height: 44px; justify-content: center; color: rgba(255,255,255,.5); }
.bj-empty-ring { width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.45); background: rgba(0,0,0,.18);   /* 2px，低 DPR 屏不会被舍成 1px */
  display: flex; align-items: center; justify-content: center; }
.bj-empty-ring .bj-chair { width: 26px; height: 26px; fill: rgba(255,255,255,.7); }
/* 中央正圆注区（2026-09-26 由椭圆改正圆）：点击 = 押当前选中面额
   2026-09-26 晚：去掉填充背景色，只留白色描边；未下注显示「点击下注」，下注后圈内=注额数字 + 停留的筹码图 */
.bj-betoval { position: absolute; left: 50%; top: 71%; transform: translate(-50%, -50%);
  width: 96px; height: 96px; border-radius: 50%; border: 2px solid #14532d;   /* 墨绿描边（2026-09-26） */
  background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; pointer-events: auto; cursor: pointer; }
.bj-betoval.hidden { display: none; }
.bj-betoval:active { transform: translate(-50%, -50%) scale(.96); }
/* 2026-09-26 第四轮：圆圈视觉隐藏（透明描边/背景/内容），位置仍是可点的下注热区 */
.bj-betoval.ghost { border-color: transparent; background: transparent; }
.bj-betoval.ghost:active { transform: translate(-50%, -50%) scale(.94); }
/* 2026-09-26 第五轮：按钮旁「我已押 N」已取消，注额回到中央圈内显示 */
.bjb-oval-amt { color: #ffd76a; font-weight: 700; font-size: 18px; line-height: 20px; }
/* 2026-09-26 第四轮：圆圈隐藏后，靠这行白字 + 深描边阴影提示「这里能点下注」 */
.bjb-oval-tip { color: #eef3fb; font-size: 13px; font-weight: 500; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 6px rgba(0,0,0,.6); }
/* 圈内停留的筹码（下注后按注额拆分显示，最多 3 枚 + 溢出计数） */
.bjb-oval-chips { display: flex; justify-content: center; margin-bottom: 1px; }
/* 2026-09-26 第六轮：圈内每枚筹码上叠加自己的面额数字（白盘黑字，与底栏筹码一致） */
.bjb-oval-chip { position: relative; width: 28px; height: 28px; display: block; margin-left: -10px; }
.bjb-oval-chip:first-child { margin-left: 0; }
.bjb-oval-chip img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.bjb-oval-chips i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-style: normal; font-weight: 400; font-size: 11px; letter-spacing: -.5px; color: #111; pointer-events: none; }
.bjb-oval-more { font-size: 10px; color: #ffe9a8; margin-left: 4px; }
/* 下注时从底部筹码飞向中央圆圈的筹码（飞行体挂在 body 上，用 Web Animations 走抛物线后自动移除） */
.bjb-flying { position: fixed; z-index: 60; pointer-events: none; will-change: transform, opacity; }

/* 庄家筹码堆：摆在庄家人物与牌盒之间（桌面上方偏右、绿色桌面上沿），结算时筹码在这里与各座位间飞来飞去
   2026-09-28：尺寸缩小一倍（堆 60×42→30×21、筹码 38→19），并左移到 left:58% 避免盖住右上角牌盒（牌盒约在画面 x≈79%） */
.bj-pot-pile { position: absolute; top: 16%; left: 58%; width: 30px; height: 21px; z-index: 4; pointer-events: none; }
.bj-pot-pile .ppchip { position: absolute; left: 0; bottom: 0; width: 19px; height: 19px; border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.bj-pot-pile .ppchip.p1 { transform: translate(0, 0); z-index: 3; }
.bj-pot-pile .ppchip.p2 { transform: translate(5.5px, -3px); z-index: 2; }
.bj-pot-pile .ppchip.p3 { transform: translate(11px, -1px); z-index: 1; }
/* 结算飞行筹码（挂在 #niuFly 全屏浮层，用视口坐标定位；落位后由 JS 移除）
   2026-09-28：尺寸同步缩小一倍（38 → 19） */
.bj-fly-chip { position: absolute; width: 19px; height: 19px; border-radius: 50%; pointer-events: none;
  will-change: transform, opacity; filter: drop-shadow(0 3px 5px rgba(0,0,0,.55)); }

/* 自己不再单独占底部一大块：5 个座位统一在荷官对面，自己的那一格用金边高亮（见 .bj-slot .bj-player.mine） */

/* 结算飘字（WIN / -N / 平） */
.bj-float { position: absolute; left: 50%; top: 52%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; line-height: 1.05;
  font-size: 15px; font-weight: 700; color: #ffe9a8; font-style: italic;
  text-shadow: 0 2px 0 #8a5a12, 0 0 12px rgba(255,220,120,.65), 0 2px 6px rgba(0,0,0,.6);
  animation: bjFloat 2.4s ease-out forwards; pointer-events: none; }
.bj-float b { font-size: 30px; }
.bj-float.lose { color: #ff9d94; text-shadow: 0 2px 0 #7c231c, 0 2px 6px rgba(0,0,0,.6); }
.bj-float.push { color: #e8eefb; text-shadow: 0 2px 4px rgba(0,0,0,.6); }
@keyframes bjFloat { 0% { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.8); }
  18% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.06); }
  75% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-30px); } }

/* 底部操作栏 */
.bj-bar { position: absolute; left: 0; right: 0; bottom: 0; min-height: 112px; gap: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8px 12px 12px; }
/* 2026-09-26：竖排（提示行在按钮上方），每行占满整条 */
.bjb-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; width: 100%; }
/* 2026-09-26：【下注】与【撤销】并排一行，筹码另起一行放在最下面 */
.bjb-btns { flex-direction: row; align-items: center; gap: 10px; flex-wrap: nowrap; }
/* 2026-09-28：底栏背景图仅留在筹码行（.bjb-chiprow），按钮行不带背景，与筹码分离。
   2026-09-28 晚：筹码条背景拉长到与房间（牌桌）同宽、底边与牌桌底对齐（full-bleed 突破 .bj-bar 的 12px 内边距），
   高度在原来（7+44+7=58px）基础上加 30px → 22+44+22=88px */
.bjb-chiprow { position: relative; box-sizing: border-box; width: calc(100% + 24px);
  margin: 6px -12px -12px; padding: 17px 12px;
  display: flex; align-items: center; justify-content: center; z-index: 1;
  background: #0a0a0a url('bj-bar-bg.jpg') center / cover no-repeat; }
.bjb-chips { display: flex; gap: 6px; }
.bjb-chip { position: relative; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: transform .1s; display: inline-block; }
.bjb-chip img { width: 100%; height: 100%; display: block; }
/* 筹码面额数字：黑色、无描边无阴影、字号偏小且不加粗（筹码中心是白盘，黑字最清晰） */
.bjb-chip i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-style: normal; font-weight: 400; font-size: 12px; letter-spacing: -.5px; color: #111; pointer-events: none; }
.bjb-chip.sel { border-color: #ffe9a8; box-shadow: 0 0 8px rgba(255,233,168,.7); transform: translateY(-4px); }
.bjb-chip:active { transform: scale(.94); }
.bjb-btn { min-width: 74px; height: 40px; border: none; border-radius: 20px; font-size: 15px; font-weight: 700;
  color: #fff; background: #4a5b78; box-shadow: 0 3px 0 rgba(0,0,0,.35); cursor: pointer; }
.bjb-btn:active { transform: translateY(2px); box-shadow: none; }
.bjb-btn.hit { background: #2f9e5f; }
.bjb-btn.stand { background: #d8763a; }
.bjb-btn.dbl { background: #8e44d4; }
/* 2026-09-28 晚：下注/撤销按钮恢复按钮背景（与筹码条区分开，但仍保留禁用态灰底） */
.bjb-btn.place { background: #2f9e5f; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.bjb-btn.undo { background: #aeb8c6; color: #37414f; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.bjb-btn.place:disabled { background: #55636f; opacity: .6; cursor: default; }
/* 爆牌几率等提示行：独占一行、位于按钮上方居中（2026-09-26） */
.bjb-tiprow { margin-bottom: 6px; }
.bjb-btn.undo { background: #aeb8c6; color: #37414f; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.bjb-btn.yes { background: #2f9e5f; }
.bjb-tip { color: #dfe8f5; font-size: 12px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.bjb-tip b { color: #ffe9a8; }

.match-frame {
  position: relative; width: 380px; max-width: 92vw;
  aspect-ratio: 723 / 1007;                        /* 跟随背景图原始比例，内容区对准画框内的深色板面 */
  background: url('match-frame.png') center / 100% 100% no-repeat;
  filter: drop-shadow(0 14px 34px rgba(0,0,0,.6));
  animation: frameIn .3s ease-out;
}
/* 战绩画框专属入场动画：只缩放不位移。
   不能复用 floatIn —— 那组关键帧带 translate(-50%,-50%)，是给绝对定位居中的元素用的；
   画框是 flex 居中的普通元素，套上它整个框（连同退出按钮）会先画到左上角、动画结束才跳回中心。 */
@keyframes frameIn {
  from { opacity: 0; transform: scale(1.12); }
  to   { opacity: 1; transform: scale(1); }
}
/* 内容区：对准背景图中间那块深棕色板面（实测约 left 10% / right 10% / top 33% / bottom 14%） */
.match-inner {
  position: absolute; left: 11%; right: 11%; top: 32.5%; bottom: 12%;
  display: flex; flex-direction: column; align-items: center; min-height: 0;
}
/* 人多（≥7 人）时自动紧凑：缩小行高/字号并改为顶部对齐（居中排不下时会导致上方被裁掉），
   保证 10 个玩家也能一屏排下不滚动 */
.match-list.compact { gap: 2px; padding: 5px 2px 4px; justify-content: flex-start; }
.match-list.compact .mr { padding: 1px 8px; font-size: 11px; line-height: 1.2; border-radius: 8px; }
.match-list.compact .mr .mrk { width: 17px; height: 17px; font-size: 10px; }
.match-list.compact .mr .mrp { font-size: 13px; }
.match-list.compact .mr .mrn .me { font-size: 9px; padding: 0 5px; }
.match-title {
  color: #ffe08a; font-size: 20px; font-weight: 900; letter-spacing: 6px;
  text-shadow: 0 2px 4px rgba(30,10,0,.85); margin-bottom: 2px;
}
.match-sub { color: #e2c3ab; font-size: 11px; letter-spacing: 2px; text-shadow: 0 1px 2px rgba(30,10,0,.8); }
.match-list {
  flex: 1; width: 100%; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; justify-content: center; gap: 7px;
  padding: 8px 2px 6px; box-sizing: border-box;
}
.mr {
  display: grid; grid-template-columns: 30px 1fr 72px; align-items: center;
  padding: 7px 10px; border-radius: 10px; font-size: 15px;
  background: rgba(28,10,6,.28); color: #ffe9cf;
}
.mr.mine { background: rgba(120,40,10,.42); box-shadow: inset 0 0 0 1px rgba(255,214,140,.45); }
.mr .mrk {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,232,180,.16); color: #f3d9ac; font-weight: 800; font-size: 13px;
}
.mr .mrk.top { background: linear-gradient(180deg, #ffd964, #e8a020); color: #5b3a00; }
.mr .mrn { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 2px rgba(30,10,0,.7); }
.mr .mrn .me { background: #ffe9a8; color: #5b3a00; font-size: 10px; padding: 1px 6px; border-radius: 8px; font-style: normal; flex: none; }
.mr .mrp { text-align: right; font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; }
.mr.win  .mrp { color: #ff7a6b; text-shadow: 0 1px 3px rgba(40,0,0,.7); }   /* 涨红跌绿 */
.mr.lose .mrp { color: #7ee08a; text-shadow: 0 1px 3px rgba(40,0,0,.7); }
.mr.zero .mrp { color: #d8bfae; }
/* 退出按钮：绝对定位在画框底部，与两侧灯笼平行（灯笼中心约在画面高度 90% 处）。
   注意：不能用 left:50% + translateX(-50%) 居中 —— 按钮还挂着 .btn.gold，
   按下时 .btn.gold:active（特异性 0-3-0）会把 transform 整个换成 scale(.96)，
   translateX 一丢按钮就向右跳 62px，手指抬起时已不在按钮上，click 永远落在画框上（点不中）。
   改用 left/right + margin:auto 居中，:active 的任何 scale 都只围绕中心缩放，不会再移位。 */
.match-close {
  position: absolute; left: 0; right: 0; bottom: 5%; margin: 0 auto;
  width: fit-content;
  margin-top: 0; margin-bottom: 0; padding: 7px 34px; font-size: 14px; white-space: nowrap;
}

/* ---------- 三公专用战绩框（2026-09-24）：红金喜庆图 sg-match-bg.png（600×710）----------
   图内自带「本局战绩」拱牌标题（约 40%~55% 高度处），所以三公时隐藏 DOM 标题/副标题；
   米色列表板实测：y 55.6%~84.5%、x 16.7%~83.5%（像素扫描定界），内容区对准它。
   牛牛不带 .sg，仍走上面的古风画框 match-frame.png。 */
.match-frame.sg {
  aspect-ratio: 600 / 710;
  width: 440px; max-width: 96vw;          /* 2026-09-24：整体放大一点（380 → 440，宽度受视口 96vw 兜底） */
  margin-bottom: 46px;                    /* 给下方【退出房间】按钮留位置，让「图+按钮」整体居中 */
  background: url('sg-match-bg.png') center / 100% 100% no-repeat;
}
.match-frame.sg .match-title,
.match-frame.sg .match-sub { display: none; }
.match-frame.sg .match-inner { left: 17.5%; right: 17.5%; top: 57%; bottom: 16.5%; }
/* 浅米色板面上的行样式：去掉深棕块与文字阴影，改深棕字 */
.match-frame.sg .mr { background: rgba(255,255,255,.4); color: #6b3a14; text-shadow: none; box-shadow: inset 0 0 0 1px rgba(150,80,40,.18); }
.match-frame.sg .mr.mine { background: rgba(255,220,150,.6); box-shadow: inset 0 0 0 1px rgba(190,90,40,.5); }
.match-frame.sg .mr .mrk { background: rgba(150,80,40,.15); color: #8a4a1e; }
.match-frame.sg .mr .mrk.top { background: linear-gradient(180deg, #e8a020, #c97e10); color: #fff; }
.match-frame.sg .mr .mrn { text-shadow: none; }
.match-frame.sg .mr.win  .mrp { color: #d0342c; text-shadow: none; }   /* 涨红跌绿（浅底加深） */
.match-frame.sg .mr.lose .mrp { color: #1e7e34; text-shadow: none; }
.match-frame.sg .mr.zero .mrp { color: #9a7a5f; }
/* 三公：按钮不压图，挪到框的下方（负 bottom 让它整体露出到图外，约 8px 间隙） */
.match-frame.sg .match-close { bottom: -46px; }

.toast {
  position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%);
  z-index: 60; background: rgba(0,0,0,.8); color: #fff; padding: 9px 18px;
  border-radius: 10px; font-size: 14px;
}

/* 「开始下注」横幅：房主点开始后弹出 1 秒（图上自带文字，不放任何文案） */
.start-bet {
  position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%);
  z-index: 75; pointer-events: none;
}
.start-bet img {
  width: 300px; max-width: 76vw; display: block;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.55));
}
.start-bet.pop { animation: startBetIn .32s ease-out; }
@keyframes startBetIn {
  from { opacity: 0; transform: translate(-50%,-50%) scale(1.6); }
  to   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}

/* ==================== 三打哈（横屏牌桌，2026-09-30） ====================
   牌桌按「横版」设计：牌桌盒 .sdh-rot 在横屏视口下就是整屏；竖屏设备下整体
   旋转 90°（宽=100vh、高=100vw），保证无论怎么握手机都是横屏体验。 */
.sdh-table { position: absolute; inset: 0; background: #0b1a13; overflow: hidden; }
.sdh-rot {
  position: absolute; inset: 0; overflow: hidden;
  background: url('sdh-table7.png') center / cover no-repeat;
}
@media (orientation: portrait) {
  .sdh-rot {
    inset: auto; top: 50%; left: 50%;
    width: 100vh; height: 100vw;
    transform: translate(-50%, -50%) rotate(90deg);
  }
}

/* 顶部信息条 */
.sdh-top {
  position: absolute; left: 0; right: 0; top: 0; z-index: 7;
  display: flex; align-items: center; gap: 8px; padding: 5px 10px;
  font-size: 12px; color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0));
}
.sdh-btn {
  height: 28px; padding: 0 12px; border: none; border-radius: 14px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: #fff; background: #46586f;
  box-shadow: 0 2px 0 rgba(0,0,0,.35); white-space: nowrap;
}
.sdh-btn:active { transform: translateY(1px); box-shadow: none; }
.sdh-btn:disabled { opacity: .45; cursor: default; }
.sdh-btn.gold { background: #d8a33a; color: #3a2400; }
.sdh-btn.on { background: #2f9e5f; }
.sdh-btn.danger { background: #c0453c; }
.sdh-back { flex: none; }
.sdh-room { color: #ffe9a8; font-weight: 700; }
.sdh-chips { color: #fff; opacity: .92; }
.sdh-top .sdh-tag, .sdh-dang {
  background: rgba(0,0,0,.42); padding: 2px 9px; border-radius: 10px;
  white-space: nowrap; color: #eaf3ee;
}
.sdh-trump b { font-size: 15px; }
.sdh-dang { color: #ffd964; }
.sdh-clock {
  margin-left: auto; width: 40px; height: 40px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 18px; font-weight: 700;
  color: #ffe9a8; text-shadow: 0 1px 4px rgba(0,0,0,.9);
}

/* 对手座位（2026-10-01 照参考图缩到头像 28px / 卡片 96px，给手牌让出空间） */
.sdh-seat { position: absolute; z-index: 5; width: 96px; }
.sdh-seat-r { right: 6px; top: 30%; transform: translateY(-50%); }
.sdh-seat-l { left: 6px; top: 30%; transform: translateY(-50%); }
.sdh-seat-t { top: 42px; left: 50%; transform: translateX(-50%); }
.sdh-pl {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 3px 4px; border-radius: 8px; background: rgba(0,0,0,.34);
  border: 1px solid rgba(255,255,255,.12); color: #eaf3ee; text-align: center;
}
.sdh-pl.acting { border-color: #f4c66d; box-shadow: 0 0 10px rgba(244,198,109,.7); }
.sdh-pl.offline { filter: grayscale(.7) brightness(.8); }
.sdh-pl.sdh-empty { opacity: .45; }
.sdh-av {
  width: 28px; height: 28px; border-radius: 7px; background: #2b3a4b center / cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff;
}
.sdh-pname { font-size: 10px; font-weight: 700; max-width: 88px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.sdh-pname .sdh-banker { font-style: normal; margin-left: 3px; padding: 0 4px; border-radius: 6px;
  background: #c8302a; color: #fff; font-size: 10px; }
.sdh-pname .sdh-ai { font-style: normal; margin-left: 3px; padding: 0 4px; border-radius: 6px;
  background: #4a6fa5; color: #fff; font-size: 10px; }
.sdh-pinfo { font-size: 9px; opacity: .9; }
.sdh-ready { font-size: 9px; color: #7ee0a0; font-weight: 700; }
.sdh-bub { font-size: 10px; color: #ffd964; font-weight: 700; }
.sdh-net { font-size: 13px; font-weight: 800; }
.sdh-net.win { color: #ffd964; }
.sdh-net.lose { color: #8fd7ff; }
.sdh-net.zero { color: #cfd8e3; }

/* 中央出牌区：四家的牌各自贴着自己座位摆（横屏视口矮，十字铺太开会压住上下家）。
   上/下两格用 clamp 定死在一个窄带里：矮屏（335px）刚好落在上家座位下、手牌上方；高屏也不会散太远 */
.sdh-felt { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.sdh-play { position: absolute; min-height: 46px; display: flex; align-items: center; justify-content: center; }
.sdh-play-t { top: clamp(142px, 42%, 230px); left: 50%; transform: translateX(-50%); }
.sdh-play-b { bottom: clamp(140px, 38%, 240px); left: 50%; transform: translateX(-50%); }
.sdh-play-l { left: 21%; top: 50%; transform: translateY(-50%); }
.sdh-play-r { right: 21%; top: 50%; transform: translateY(-50%); }
.sdh-pcards { display: flex; animation: sdhDrop .2s ease-out; }
.sdh-pcards .card.mini { width: 34px; height: 46px; border-radius: 4px; }
.sdh-pcards .card.mini + .card.mini { margin-left: -13px; }
@keyframes sdhDrop {
  from { opacity: 0; transform: translateY(-26px) scale(.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* 墩数/闲家得分都在顶栏显示，桌面中间不再放文字（矮屏放不下，会压住上家座位） */
.sdh-center { display: none; }

/* 自己：座位信息左下 / 手牌底部横排 / 按钮右下
   2026-10-01：手牌放大到 72×101（照参考图），自己头像 z-index 提到手牌之上浮在左角 */
.sdh-me { position: absolute; left: 8px; bottom: 8px; width: 96px; z-index: 7; }
.sdh-hand {
  position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
  max-width: 96%; display: flex; justify-content: center; align-items: flex-end;
  z-index: 6; padding: 26px 0 2px;   /* 上留 26px 给选中牌上浮 */
}
/* flex: none —— 绝不允许被 flex 压缩（宽度算错时宁可溢出也不能把牌挤成细条） */
.sdh-hand .card.mini { flex: none; width: 72px; height: 101px; border-radius: 8px; transition: transform .12s; }
/* 重叠量 --sdh-ov 由 client.js 按张数动态算：21 张时每张露 36px，29 张（庄家扣底）自动收到 14px，保证一屏排下 */
.sdh-hand .card.mini + .card.mini { margin-left: var(--sdh-ov, -48px); }
.sdh-hand.pickable .card.mini { cursor: pointer; }
.sdh-hand .card.mini.sel {
  transform: translateY(-22px);
  box-shadow: 0 0 0 2px #ffd964, 0 8px 14px rgba(0,0,0,.55);
}
.sdh-hand .card.mini.dis { opacity: .92; }
.sdh-bar {
  position: absolute; right: 8px; bottom: 140px; z-index: 7;   /* 抬到手牌上方，避免被放大的手牌压住 */
  display: flex; align-items: center; gap: 6px; max-width: 40%; flex-wrap: wrap; justify-content: flex-end;
}
.sdh-wait { font-size: 12px; color: #eaf3ee; background: rgba(0,0,0,.42);
  padding: 4px 10px; border-radius: 10px; }

/* 叫分 / 扣底面板：浮在桌面中上部 */
.sdh-panel {
  position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%);
  z-index: 8; width: min(76%, 620px); padding: 10px 12px; border-radius: 14px;
  background: rgba(10,20,16,.9); border: 1px solid rgba(255,217,100,.4);
  box-shadow: 0 8px 24px rgba(0,0,0,.6); color: #eaf3ee;
}
.sdh-panel-t { font-size: 15px; font-weight: 800; color: #ffd964; margin-bottom: 3px; }
.sdh-panel-t b { color: #fff; }
.sdh-panel-h { font-size: 11px; opacity: .88; line-height: 1.5; margin-bottom: 7px; }
.sdh-panel-h .warn { color: #ffb4a2; }
.sdh-bidvals { display: flex; gap: 6px; flex-wrap: wrap; max-height: 108px; overflow-y: auto; }
.sdh-bidv {
  min-width: 44px; height: 32px; padding: 0 8px; border: none; border-radius: 16px;
  background: #2f9e5f; color: #fff; font-size: 14px; font-weight: 800; cursor: pointer;
}
.sdh-bidv.pass { background: #6b7280; }
.sdh-bidv:disabled { opacity: .45; }
.sdh-suits { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.sdh-suit {
  height: 32px; padding: 0 12px; border-radius: 16px; cursor: pointer;
  background: #46586f; color: #fff; border: 2px solid transparent; font-size: 13px; font-weight: 700;
}
.sdh-suit.on { border-color: #ffd964; background: #2f9e5f; }
.sdh-suit i { font-style: normal; font-size: 16px; }
.sdh-suit i.red { color: #ff6b5e; }
.sdh-suit i.black { color: #e8eef5; }
.sdh-panel-btns { display: flex; gap: 8px; justify-content: flex-end; }

/* ---------- 叫分条（2026-10-01 照参考图重做）----------
   把原来「浮层面板 + 一堆绿色按钮」换成一条横贯牌桌的胶囊条：
   不叫 | ◀ | 分数×3（一屏 3 档，箭头翻页）| ▶ | ☐拍（暂为禁用占位）
   #sdhBidBox 仍带 .sdh-panel 类，下面的规则把浮层定位/深色底覆盖掉。 */
.sdh-panel.sdh-bidbox {
  left: 50%; top: auto; bottom: 141px; transform: translateX(-50%);
  width: min(88%, 720px); padding: 0; border: none; background: none;
  box-shadow: none; border-radius: 0;
}
.sdh-bidtip {
  text-align: center; font-size: 13px; font-weight: 700; color: #fff;
  letter-spacing: 1px; margin-bottom: 5px;
  text-shadow: 0 1px 5px rgba(0,0,0,.85), 0 0 10px rgba(0,0,0,.6);
}
.sdh-strip {
  display: flex; align-items: stretch; gap: 4px; height: 54px; padding: 5px;
  border-radius: 27px;
  background: linear-gradient(180deg, #e6f0fb 0%, #c3d7ee 55%, #aec6e2 100%);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 6px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.95);
}
.sdh-strip-pass {
  flex: none; width: 82px; border: none; border-radius: 22px; cursor: pointer;
  font-size: 17px; font-weight: 800; color: #2b5ea8;
  background: linear-gradient(180deg, #fbfdff, #bcd6f2);
  box-shadow: 0 1px 2px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.85);
}
.sdh-strip-pass:not(:disabled):active { transform: translateY(1px); }
.sdh-strip-pass:disabled { opacity: .45; cursor: default; }
.sdh-strip-arrow {
  flex: none; width: 44px; border: none; background: transparent; cursor: pointer;
  font-size: 18px; line-height: 1; font-weight: 900;
}
.sdh-strip-arrow.prev { color: #56708f; }
.sdh-strip-arrow.next { color: #d98a1f; }
.sdh-strip-arrow:disabled { opacity: .28; cursor: default; }
.sdh-strip-arrow:not(:disabled):active { transform: translateY(1px); }
.sdh-strip-vals { flex: 1; display: flex; gap: 4px; min-width: 0; }
.sdh-strip-val {
  flex: 1; min-width: 0; border: none; border-radius: 8px; cursor: pointer;
  font-size: 22px; font-weight: 900; color: #8a5511;
  background: linear-gradient(180deg, #fdf6d8, #f1dda0);
  box-shadow: 0 1px 2px rgba(0,0,0,.14), inset 0 0 0 1px rgba(255,255,255,.9);
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
}
.sdh-strip-val:active { transform: translateY(1px); }
.sdh-strip-pai {
  flex: none; width: 76px; display: flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 10px; background: rgba(140,152,168,.5); color: #55606e;
  font-size: 16px; font-weight: 800; opacity: .75; cursor: not-allowed;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
}
.sdh-strip-chk {
  display: block; width: 17px; height: 17px; border-radius: 4px; background: #fff;
  box-shadow: inset 0 0 0 2px #98a4b2;
}

/* 结算面板 */
.sdh-settle {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 9; width: min(64%, 460px); padding: 14px 16px; border-radius: 16px;
  background: rgba(8,16,12,.94); border: 1px solid rgba(255,217,100,.5);
  box-shadow: 0 10px 30px rgba(0,0,0,.7); color: #eaf3ee; text-align: center;
}
.sdh-st { font-size: 20px; font-weight: 900; margin-bottom: 4px; }
.sdh-st.win { color: #ffd964; }
.sdh-st.lose { color: #8fd7ff; }
.sdh-sid { font-size: 12px; opacity: .9; margin-bottom: 8px; line-height: 1.5; }
.sdh-slist { display: flex; flex-direction: column; gap: 4px; }
.sdh-sr {
  display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 9px;
  background: rgba(255,255,255,.06); font-size: 13px;
}
.sdh-sr span { flex: 1; text-align: left; }
.sdh-sr b { font-size: 15px; }
.sdh-sr.win b { color: #ffd964; }
.sdh-sr.lose b { color: #8fd7ff; }
.sdh-sr .sdh-banker { font-style: normal; padding: 0 5px; border-radius: 6px;
  background: #c8302a; color: #fff; font-size: 10px; }

/* ===================== 七星三打哈素材（新增） ===================== */
/* 结算档位大图 */
.sdh-tier-img {
  display: block; width: 180px; max-width: 42vw; margin: 0 auto 6px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.55)); pointer-events: none;
}
/* 叫主：花色按钮用七星图 */
.sdh-suit-img { width: 72px; height: 72px; object-fit: contain; display: block; margin: 0 auto 2px; }
.sdh-suit.has-img { padding: 4px 6px; background: none; border: none; }
.sdh-suit.has-img.on .sdh-suit-img { filter: drop-shadow(0 0 8px #ffd76a) brightness(1.12); }
/* 埋牌标题图 */
.sdh-mp-img { width: 96px; display: block; margin: 0 auto 4px; }
/* 位置标记 */
.sdh-pos-img { width: 46px; vertical-align: middle; }
/* 出牌/提示/查牌按钮 */
.sdh-act-img { width: 100%; max-width: 96px; display: block; }
/* ===== 第二批：操作按钮 / 头像框 / 方位标记（七星素材） ===== */
/* 出牌按钮 → 七星 chupai.png */
#sdhPlayBtn {
  background: url('sdh7/chupai.png') center / 100% 100% no-repeat !important;
  color: transparent !important; border: none !important; box-shadow: none !important;
  min-width: 92px; height: 46px;
}
#sdhPlayBtn:disabled { filter: grayscale(.7) brightness(.7); }
/* 提示按钮 → 七星 tishi.png */
#sdhHintBtn {
  background: url('sdh7/tishi.png') center / 100% 100% no-repeat !important;
  color: transparent !important; border: none !important; box-shadow: none !important;
  min-width: 72px; height: 42px;
}
/* 头像加七星金框 */
.sdh-av { position: relative; }
.sdh-av::after {
  content: ''; position: absolute; inset: -5px;
  background: url('sdh7/touxiang_green.png') center / 100% 100% no-repeat;
  pointer-events: none; z-index: 2;
}
/* 方位标记 */
.sdh-pos { position: absolute; right: -6px; bottom: -6px; z-index: 3; }

/* ===== 第三批：叫分数字 / 不叫 / 拍 / 准备（七星素材） ===== */
.sdh-strip-val.has-img, .sdh-strip-pass.has-img, .sdh-strip-pai.has-img {
  background-position: center; background-size: 100% 100%; background-repeat: no-repeat;
  color: transparent !important; text-shadow: none !important; box-shadow: none !important;
  border: none;
}
.sdh-strip-pai.has-img { background-color: transparent; }
.sdh-strip-pai.has-img .sdh-strip-chk { display: none; }
/* 准备标记 → 七星 zhunbei.png */
.sdh-ready img { width: 44px; display: block; }
.sdh-pos img { width: 34px; display: block; }