:root { --bg: #080b11;
  --bg2: #0e141d;
  --panel: #141b26;
  --panel2: #1a2331;
  --line: #253044;
  --ink: #e9eef7;
  --muted: #8795ac;
  --gold: #edbe4c;
  --gold-d: #b98c1f;
  --red: #f0545f;
  --green: #2fbf71;
  --felt-a: #1b5c46;
  --felt-b: #0b2b21;
  --radius: 16px;
  /* e226：底部全局导航栏高度。safe-area 一起算进来，body 留白、固定浮层避让
     和导航栏自身高度全部引用同一个变量，横屏矮屏只需覆盖这一处。 */
  /* e286b：安全区高度钳到 34px 上限，避免个别安卓机型/ROM 把 safe-area-inset-bottom
     返回异常大值（如 60~80px），把导航栏与底部留白顶得过高 */
  --tb-h: calc(58px + min(env(safe-area-inset-bottom, 0px), 34px)); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent;
  /* e288/e289：关掉安卓 Chrome 长按唤出的系统标注菜单（「手动标记广告」等）。
     Chrome 安卓不吃 -webkit-touch-callout，靠 JS 全局拦截 contextmenu 才拦得住；
     这里同时 user-select:none，防止长按选中文本后弹出「标记为广告」选择工具条。
     输入框单独放开（见下行）。 */
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* 输入框仍需可聚焦与选中文本，单独放开 user-select */
input, textarea, [contenteditable="true"] { -webkit-user-select: auto; user-select: text; }
html, body { margin: 0; padding: 0; height: 100%;
  background: radial-gradient(circle at 50% -10%, #1a2434 0%, var(--bg) 55%);
  color: var(--ink);
  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  /* e284f：声明深色方案——iOS/Android 在橡皮筋回弹、布局视口之外的画布
     区域会按此渲染为深色，彻底消除「底部一大段白色截断」的根源（白底是
     系统 WebView 默认色，不被我们任何元素覆盖时就会露出来）。 */
  color-scheme: dark;
  overflow: hidden; }
/* e284f：html 兜底纯深色底，确保任何间隙都不会露出系统默认白画布 */
html { background-color: var(--bg); }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font-family: inherit; }
.muted { color: var(--muted); }
.dot { margin: 0 6px; color: var(--line); }

/* ───────────── 视图切换 ───────────── */
/* e284f：视图改用 fixed + inset:0 锚定「可视视口」，彻底规避 iOS/Android 在
   PWA 独立模式下 100vh/100% 算错、键盘弹起或旋转后视口重算导致的「底部白条
   时有时无」。顶部让出状态栏安全区（修掉内容顶进半透明状态栏被模糊），
   底部让出常驻导航栏高度（内容不再被 tabbar 盖住）。 */
.view { display: none; position: fixed; inset: 0;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: var(--tb-h);
  flex-direction: column; }
.view.active { display: flex; }
/* 已登录刷新瞬间：登录/注册页先不画，避免登录页和左上角音乐浮球闪现（showView 会立刻摘掉该类） */
html.has-token #viewLogin, html.has-token #viewRegister { display: none; }

/* ── e226：每个页面底部常驻的全局导航栏 ──
   贴视口底部，5 个按钮 flex:1 1 0 严格等宽、均匀分布；图标统一 24 视框
   线性 SVG，不依赖 emoji 字体，任何设备上大小粗细都一致。
   z-index 45：低于模态弹窗(50)/用户小面板(60)/toast(100)，弹窗打开时
   导航栏自然被遮住；高于页面内容，任何时候都能点。 */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  height: var(--tb-h);
  display: flex; align-items: stretch; justify-content: space-between;
  /* 安全区内边距同样钳到 34px，和 --tb-h 上限一致，避免异常大值把导航栏顶得过高 */
  padding-bottom: min(env(safe-area-inset-bottom, 0px), 34px);
  /* e286b：底部渐变收口到近黑色，与系统导航栏（color-scheme:dark 下的黑条）无缝融合，
     消掉「导航栏下方一段突兀黑区」的割裂感 */
  background: linear-gradient(180deg, #161e2b 0%, #0a0e16 100%);
  border-top: 1px solid rgba(237, 190, 76, .20);
  box-shadow: 0 -6px 22px rgba(0, 0, 0, .38); }
.tb-item { flex: 1 1 0; min-width: 0;                 /* 五等分，不因文字长短而宽窄不一 */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 4px 2px;
  color: var(--muted); font-size: 10.5px; font-weight: 600; letter-spacing: .3px;
  white-space: nowrap;
  transition: color .15s, transform .12s; }
.tb-item svg { width: 21px; height: 21px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.tb-item:active { transform: scale(.93); }
.tb-item.active { color: var(--gold); }
.tb-item.active svg { filter: drop-shadow(0 0 6px rgba(237, 190, 76, .45)); }
@media (max-width: 360px) {
.tb-item { font-size: 10px; }
.tb-item svg { width: 19px; height: 19px; }}
@media (max-height: 460px) and (orientation: landscape) {
:root { --tb-h: calc(46px + min(env(safe-area-inset-bottom, 0px), 34px)); }
.tb-item { gap: 1px; font-size: 9.5px; }
.tb-item svg { width: 17px; height: 17px; }}

/* e226：「好友」导航按钮打开的邀请弹窗（推荐码 / 链接 / 返佣战绩） */
.tb-ref-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tb-ref-code { font-size: 20px; letter-spacing: 2px; color: var(--gold); }
.tb-ref-link { flex: 1 1 160px; min-width: 0;
  font-size: 11.5px; color: var(--muted); word-break: break-all; }

/* ───────────── 通用按钮 ───────────── */
.btn { border-radius: 10px; padding: 9px 16px; font-size: 14px; font-weight: 600;
  transition: transform .12s, filter .15s, background .15s;
  white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn.sm { padding: 6px 12px; font-size: 13px; }
.btn-gold { background: linear-gradient(180deg, #f7d374, var(--gold) 45%, var(--gold-d));
  color: #2a1e00;
  box-shadow: 0 4px 14px rgba(237, 190, 76, .22), inset 0 1px 0 rgba(255,255,255,.4); }
.btn-gold:hover { filter: brightness(1.06); }
.btn-gold:disabled { opacity: .38; filter: grayscale(.5); box-shadow: none; cursor: not-allowed; }
.btn-ghost { background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  color: var(--ink); }
.btn-ghost:hover { background: rgba(255,255,255,.1); }
/* 危险操作按钮：红描边，用于「清空数据」等不可逆操作 */
.btn-danger { background: rgba(240,84,95,.08);
  border: 1px solid rgba(240,84,95,.5);
  color: var(--red, #f0545f); }
.btn-danger:hover { background: rgba(240,84,95,.16); border-color: var(--red, #f0545f); }

/* ───────────── 登录 ───────────── */
#viewLogin { align-items: center; justify-content: center; }
.login-wrap { width: 380px; max-width: 92vw; text-align: center; }
.brand-cards { display: flex; justify-content: center; gap: -10px; margin-bottom: 8px; height: 74px; }
.bc { width: 52px; height: 72px; border-radius: 9px;
  background: linear-gradient(160deg, #fdfefe, #d9e0ea);
  color: #12161f; font-size: 30px; line-height: 72px;
  box-shadow: 0 10px 24px rgba(0,0,0,.5);
  display: inline-block; margin: 0 -9px; }
.bc1 { transform: rotate(-14deg) translateY(6px); }
.bc2 { transform: rotate(-5deg) translateY(-2px); color: var(--red); }
.bc3 { transform: rotate(5deg) translateY(-2px); }
.bc4 { transform: rotate(14deg) translateY(6px); color: var(--red); }
.brand h1 { font-size: 34px; letter-spacing: 10px; margin: 14px 0 4px; font-weight: 800;
  background: linear-gradient(180deg, #ffe9a8, var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-sub { color: var(--muted); font-size: 13px; letter-spacing: 2px; margin: 0 0 26px; }
.login-card { background: rgba(20, 27, 38, .9); border: 1px solid var(--line);
  border-radius: 18px; padding: 22px; text-align: left;
  box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.login-card label { font-size: 12px; color: var(--muted); letter-spacing: 1px; }
.login-card input { width: 100%; margin: 8px 0 16px; padding: 12px 14px; border-radius: 10px;
  background: #0b1119; border: 1px solid var(--line); color: var(--ink);
  font-size: 15px; outline: none; transition: border-color .15s; }
.login-card input:focus { border-color: var(--gold); }
.login-card .btn { width: 100%; padding: 12px; font-size: 15px; }
.hint { font-size: 12px; color: var(--muted); text-align: center; margin: 14px 0 0; }
/* 限红说明折叠：默认收起，点击「限红」标签展开；标签带 ? 徽标提示可点 */
.hint-collapsed { display: none; }
.hint-toggle { cursor: pointer; user-select: none; color: var(--fg); }
.hint-toggle .hint-q { display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; margin-left: 4px; border-radius: 50%;
  border: 1px solid var(--muted); font-size: 9px; font-style: normal;
  color: var(--muted); vertical-align: 1px; transition: all .15s; }
.hint-toggle.open .hint-q, .hint-toggle:active .hint-q { color: var(--gold); border-color: var(--gold); }

/* ───────────── 顶栏 ───────────── */
.topbar { height: 58px; flex: 0 0 58px; display: flex; align-items: center; gap: 14px;
  padding: 0 18px; border-bottom: 1px solid var(--line);
  background: rgba(10,14,21,.92); backdrop-filter: blur(10px); }
.logo { font-weight: 800; letter-spacing: 2px; color: var(--gold); font-size: 15px; }
.wallet { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.wallet-item { display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  border-radius: 9px; padding: 5px 10px; font-size: 13px;
  white-space: nowrap; flex: 0 0 auto; }
.wallet-item i { font-style: normal; color: var(--muted); font-size: 11px; white-space: nowrap; }
.wallet-item b { color: var(--gold); font-variant-numeric: tabular-nums; }
/* 房间页顶栏昵称（替代积分显示）：不换行，超长截断 */
.wallet-item.who b { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
/* 本庄限红规则说明：阶段签与倒计时之间的空档，超长省略号，完整说明在 title 悬浮 */
.table-head .rule-note { flex: 1 1 auto; min-width: 0;
  color: rgba(255,255,255,.55); font-size: 12px; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  cursor: help; }
.room-title { display: flex; align-items: baseline; gap: 10px; font-size: 15px; }
.room-title span { font-size: 12px; }
/* 点击房名复制房间号/密码：房名可点 + 复制小按钮 */
.room-title b { cursor: pointer; }
.room-title b:hover { color: var(--gold, #e8c064); }
.room-copy { align-self: center;
  background: none; border: 1px solid var(--line); border-radius: 6px;
  color: var(--muted, #9aa5b1); font-size: 12px; line-height: 1;
  padding: 3px 6px; cursor: pointer; transition: color .15s, border-color .15s; }
.room-copy:hover { color: var(--gold, #e8c064); border-color: var(--gold, #e8c064); }

/* ════════ 大厅新页眉：头像 + 昵称 + 余额 / 右侧图标操作 ════════ */
.home-topbar { justify-content: space-between; gap: 10px; padding: 0 14px; }
.home-user { display: flex; align-items: center; gap: 10px; min-width: 0; cursor: pointer;
  border: none; background: none; padding: 0; }
.home-user:focus-visible { outline: 2px solid var(--gold, #f2b134); outline-offset: 2px; border-radius: 10px; }
.home-avatar { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%;
  border: 2px solid var(--gold, #f2b134);
  background: #0c121b center/cover no-repeat;
  color: var(--gold, #f2b134); font-weight: 800; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; user-select: none; }
.home-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.home-nick { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* e239：顶栏第一行 = 「账号」金框徽标 + 登录账号（不可改） */
.home-acc-label { flex: 0 0 auto; font-size: 10px; line-height: 1; padding: 3px 6px;
  border-radius: 6px; color: var(--gold, #f2b134); font-weight: 700; letter-spacing: 1px;
  background: rgba(242,177,52,.12); border: 1px solid rgba(242,177,52,.45); }
#homeNick { color: #eef3f8; font-weight: 700; font-size: 14px; max-width: 130px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-vip { font-size: 10px; line-height: 1; padding: 2px 5px; border-radius: 6px;
  background: linear-gradient(135deg, #f7d774, #c9962b); color: #2a1c00; font-weight: 800; white-space: nowrap; }
.home-bal { display: flex; align-items: center; gap: 5px; }
.home-bal-label { color: var(--muted, #9aa5b1); font-size: 11px; }
#homeBalance { color: var(--gold, #f2b134); font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.home-refresh { width: 18px; height: 18px; border: none; background: none; padding: 0; margin-left: 1px;
  color: var(--muted, #9aa5b1); font-size: 13px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  transition: transform .5s ease, color .15s; }
.home-refresh:hover { color: var(--gold, #f2b134); }
.home-refresh.spin { transform: rotate(360deg); }
.home-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ha-btn { display: inline-flex; align-items: center; gap: 5px; position: relative;
  height: 34px; padding: 0 11px; border-radius: 18px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line, #1e2c3d);
  color: #d7dee8; font-size: 12px; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s; }
.ha-btn:hover { background: rgba(255,255,255,.09); border-color: var(--gold, #f2b134); color: #fff; }
.ha-btn:active { transform: scale(.96); }
.ha-ico { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.ha-btn b { color: var(--gold, #f2b134); font-variant-numeric: tabular-nums; font-weight: 800; }
/* 音乐按钮：复用 .js-music-btn，playMusic 自动填充 ♪ / 静音角标 */
.ha-btn.js-music-btn { width: 34px; padding: 0; justify-content: center; font-size: 16px; }
.ha-btn.js-music-btn.off { color: var(--muted, #9aa5b1); opacity: .7; }
.ha-btn .dot-badge { top: -3px; right: -3px; }
/* 私密房进房密码：输入框 + 粘贴按钮同行 */
.pwd-paste-row { display: flex; gap: 8px; align-items: center; }
.pwd-paste-row input { flex: 1; }

/* 房间页顶栏：左侧 返回+房间名，右侧与首页一致的图标操作条 */
.room-topbar { justify-content: flex-start; }
.room-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.room-left .room-title { min-width: 0; }
.room-left #roomName { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pwd-paste-row .btn { flex: none; white-space: nowrap; }

/* ───────────── 大厅 ───────────── */
/* e286b：lobby 改为 flex 列，玩法说明(.rules) 用 margin-top:auto 钉在底部紧贴导航栏，
   消除「内容短时空出一大段黑」；底部 padding 仅作呼吸间距（.view 已预留导航栏高度） */
.lobby { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding: 24px 28px 24px; }
.lobby-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
/* e239：大厅标题精修——金色渐变大字 + 黑桃徽标 + 英文副题，庄重有辨识度 */
.lh-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lh-title h2 { margin: 0; display: inline-flex; align-items: center; gap: 8px;
  font-size: 22px; font-weight: 800; letter-spacing: 3px; line-height: 1.1;
  background: linear-gradient(180deg, #ffedbe 8%, #f5c455 52%, #cf9420 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 2px 10px rgba(242,177,52,.18); }
.lh-suit { width: 18px; height: 18px; flex: 0 0 18px; fill: #f5c455;
  filter: drop-shadow(0 1px 3px rgba(242,177,52,.45)); }
.lh-sub { font-size: 10px; letter-spacing: 2.5px; color: var(--muted, #8fa1b5); font-weight: 600; white-space: nowrap; }
/* e239：开房按钮——房卡图标 + 主文案「开 房」+ 房卡消耗小字，双行金钮 */
.lh-create { display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 18px 8px 14px; border-radius: 14px; box-shadow: 0 6px 16px rgba(216,158,42,.30); }
.lh-card-ico { width: 22px; height: 22px; flex: 0 0 22px; fill: none;
  stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; opacity: .95; }
.lh-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1; }
.lh-txt b { font-size: 15px; font-weight: 800; letter-spacing: 3px; text-indent: 3px; }
.lh-txt i { font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .5px; opacity: .9; white-space: nowrap; }
.room-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px; }
.room-card { background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; cursor: pointer; transition: transform .15s, border-color .15s;
  position: relative; overflow: hidden; }
.room-card:hover { transform: translateY(-3px); border-color: rgba(237,190,76,.5); }
.room-card::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 100% 0%, rgba(237,190,76,.1), transparent 60%); }
.rc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.rc-name { font-weight: 700; font-size: 15px; }
.rc-badge { font-size: 11px; padding: 3px 8px; border-radius: 20px; background: rgba(47,191,113,.15); color: var(--green); }
.rc-badge.wait { background: rgba(135,149,172,.15); color: var(--muted); }
.rc-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted); }
.rc-meta b { color: var(--ink); font-weight: 600; }
.empty { text-align: center; color: var(--muted); padding: 46px 0; font-size: 13px; }
.rules { margin-top: auto; background: rgba(20,27,38,.6); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 22px; }
.rules h3 { margin: 0 0 10px; font-size: 14px; color: var(--gold); }
.rules ol { margin: 0; padding-left: 20px; color: var(--muted); font-size: 13px; line-height: 2; }
.rules b { color: var(--ink); }

/* ───────────── 牌桌 ───────────── */
.table-wrap { flex: 1; display: grid; grid-template-columns: 1fr 288px; gap: 16px; padding: 16px; min-height: 0; }
.felt { position: relative; border-radius: 22px; padding: 16px 18px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.07), transparent 60%),
    linear-gradient(170deg, var(--felt-a), var(--felt-b) 70%);
  border: 1px solid rgba(237,190,76,.22);
  box-shadow: inset 0 0 90px rgba(0,0,0,.55), 0 20px 50px rgba(0,0,0,.4);
  display: flex; flex-direction: column; gap: 12px; min-height: 0; }

/* 顶行整体单行布局：局数 / 阶段签 / 限红说明 / 倒计时秒数，任何阶段都不折行 */
.table-head { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.round-info { color: rgba(255,255,255,.62); white-space: nowrap; flex: 0 0 auto; }
.round-info b { color: var(--gold); }
.phase-pill { padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;
  background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.14); color: #cfe0d8;
  white-space: nowrap; flex: 0 0 auto; }
.phase-pill.betting { background: rgba(47,191,113,.18); border-color: rgba(47,191,113,.45); color: #7fe3ac; }
.phase-pill.commit { background: rgba(237,190,76,.16); border-color: rgba(237,190,76,.4); color: var(--gold); }
.phase-pill.locked { background: rgba(240,84,95,.16); border-color: rgba(240,84,95,.4); color: #ff9aa1; }
.phase-pill.reveal { background: rgba(140,120,255,.18); border-color: rgba(140,120,255,.45); color: #c0b4ff; }

/* 倒计时：只留秒数文字（进度条已移除），仅下注阶段显示 */
.countdown { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; }
.countdown[hidden] { display: none; }
#cdText { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 12.5px;
  color: #d8ecdf; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px; padding: 3px 10px; line-height: 1.4;
  transition: color .2s, border-color .2s; }
.countdown.warn #cdText { color: #ffb08a; border-color: rgba(240,132,69,.5); }

/* e252：庄家条恒为一行。旧版「可赔（庄家账户余额）」与「还可亏（止损剩余）」
   两个数字口径不同并列显示，看起来像算错；现在只留「还可赔」= 止损额度 + 本庄累计盈亏，
   「托管设置」挪到本行最右，窄屏超长时中间文字自动省略，不折行、不溢出。 */
.banker-strip { display: flex; align-items: center; flex-wrap: nowrap; gap: 10px; font-size: 12.5px;
  background: rgba(0,0,0,.28); border-radius: 10px; padding: 7px 12px;
  border: 1px solid rgba(237,190,76,.16); min-width: 0; overflow: hidden; }
.bs-label { color: rgba(255,255,255,.45); flex: 0 0 auto; white-space: nowrap; }
.bs-name { font-weight: 700; color: var(--gold); flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-bal { color: rgba(255,255,255,.5); flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bs-bal.warn { color: #ff9aa1; }   /* 亏到止损线：还可赔归 0 */
/* e257：庄家本人点「还可赔」即可补进可赔额度。用金色虚线下划线 + 小加号提示可点，
   不额外加按钮，保持庄家条单行紧凑（e252 要求）。 */
.bs-bal.clickable { color: var(--gold); cursor: pointer;
  text-decoration: underline dotted rgba(237,190,76,.6); text-underline-offset: 3px; }
.bs-bal.clickable::after { content: ' ＋'; color: var(--gold); font-weight: 700; }
.bs-bal.clickable.warn { color: #ff9aa1; }
.bs-host { flex: 0 0 auto; }
.bs-hash { margin-left: 0; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-family: ui-monospace, Menlo, monospace; font-size: 11px;
  color: rgba(255,255,255,.42); letter-spacing: .3px; }

/* 四个门（--joker-d：大王圆卡直径） */
.suit-grid { position: relative; flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; min-height: 0;
  --joker-d: 116px; }
.suit-card { position: relative; border-radius: 16px; padding: 14px 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03));
  border: 1.5px solid rgba(255,255,255,.14);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transition: transform .16s, border-color .16s, box-shadow .16s, background .16s;
  overflow: hidden; }
.suit-card:hover { transform: translateY(-4px); border-color: rgba(237,190,76,.6); box-shadow: 0 12px 28px rgba(0,0,0,.35); }
/* 多门模式：已选中的门（金框 + 角标勾） */
.suit-card.picked { border-color: var(--gold);
  background: linear-gradient(180deg, rgba(237,190,76,.2), rgba(237,190,76,.06));
  box-shadow: 0 0 0 2px rgba(237,190,76,.28), 0 10px 24px rgba(0,0,0,.32); }
.suit-card.picked::after { content: '✓'; position: absolute; top: 6px; left: 8px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--gold); color: #10231a;
  font-size: 11px; font-weight: 900; line-height: 17px; text-align: center; }
/* 抢注模式：点门即下注，光标提示更直接 */
.suit-grid.rush .suit-card:not(:disabled) { cursor: crosshair; }
.suit-card:disabled { cursor: default; transform: none; }
.suit-card .suit-sym { font-size: 52px; line-height: 1; color: #f2f6ff; text-shadow: 0 4px 14px rgba(0,0,0,.45); }
.suit-card.red .suit-sym { color: var(--red); }
.suit-name { font-size: 13px; color: rgba(255,255,255,.66); }
.suit-total { margin-top: 4px; font-size: 17px; font-weight: 800; color: var(--gold);
  font-variant-numeric: tabular-nums; }
.suit-mine { font-size: 11.5px; color: #8ff0c0; min-height: 15px; font-variant-numeric: tabular-nums; }
/* 大王门：圆形卡悬浮于四门中央。
   四卡的「切除缝隙 + 缝合边线」挂在门卡区 ::after（见下），与圆卡同圆心、
   且不随开奖时的 .lose 变透明，任何阶段切角效果都保持 */
.suit-card.joker { position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: var(--joker-d); height: var(--joker-d); padding: 19px 4px 3px;
  border-radius: 50%;
  flex-direction: column; gap: 2px;
  background: radial-gradient(circle at 50% 28%, rgba(237,190,76,.30), rgba(24,19,7,.94) 74%);
  border: 2px solid rgba(237,190,76,.55);
  box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 20px rgba(237,190,76,.14);
  z-index: 5;
  overflow: visible; }
/* 切角圆槽：::after 圆盘盖住四卡内角形成切角留缝；永不透明、与圆卡同圆心。
   z-index 4：压在四卡(z0)之上、圆卡(z5)之下 */
.suit-grid:not(.jokerless)::after { content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--joker-d) + 8px); height: calc(var(--joker-d) + 8px);
  border-radius: 50%;
  background: #0a241b;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  z-index: 4;
  pointer-events: none; }
/* 缝合边线：淡色弧段，随卡片在网格缝隙处自然断开（每卡独立、不相连）。
   遮罩在网格中缝的方位角处挖缺口：一行四列中缝在左右（90/270），2×2 中缝在四轴（见断点） */
.suit-grid:not(.jokerless)::before { content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--joker-d) + 8px); height: calc(var(--joker-d) + 8px);
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.18);
  box-shadow: 0 0 10px rgba(0,0,0,.25);
  z-index: 5; /* 必须高于圆槽盘 ::after(z4)：同半径时被盘压住只剩 0.75px 细丝，视觉上等于没有 */
  pointer-events: none;
  --w: 6deg;
  -webkit-mask-image: conic-gradient(#000 0deg, #000 calc(90deg - var(--w)), transparent calc(90deg - var(--w)) calc(90deg + var(--w)), #000 calc(90deg + var(--w)) calc(270deg - var(--w)), transparent calc(270deg - var(--w)) calc(270deg + var(--w)), #000 calc(270deg + var(--w)));
  mask-image: conic-gradient(#000 0deg, #000 calc(90deg - var(--w)), transparent calc(90deg - var(--w)) calc(90deg + var(--w)), #000 calc(90deg + var(--w)) calc(270deg - var(--w)), transparent calc(270deg - var(--w)) calc(270deg + var(--w)), #000 calc(270deg + var(--w))); }
/* 开奖后：淡色环整体让位给金色 .joker-seam（只显示中奖门一侧）。
   .revealed 由 app.js 渲染层落（:has() 在 X5 等手机内核不支持，不能依赖） */
.suit-grid:not(.jokerless).revealed::before { opacity: 0; }
/* 金色缝合弧（开奖专用）：颜色取中奖卡同款 --gold 消除断层；
   扇区两端各避开 --w（网格缝隙方位），不与卡框生硬相接。
   --sf=扇区起点（0°=正上方顺时针）、--sl=扇区长度，默认整环（大王中奖/不邻切角的门）。
   [data-hit] 由 app.js 在开奖时写成中奖门 key（spade/heart/club/diamond/joker） */
.joker-seam { position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--joker-d) + 8px); height: calc(var(--joker-d) + 8px);
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  box-shadow: 0 0 14px rgba(237,190,76,.35);
  opacity: 0; pointer-events: none; z-index: 5; /* 高于圆槽盘 z4，否则整条弧被盘盖住（e123 教训） */
  transition: opacity .25s;
  --w: 6deg; }
.suit-grid .joker-seam[data-hit] { opacity: 1;
  -webkit-mask-image: conic-gradient(from calc(var(--sf, 0deg) + var(--w)), #000 0deg, #000 calc(var(--sl, 360deg) - var(--w) * 2), transparent calc(var(--sl, 360deg) - var(--w) * 2));
  mask-image: conic-gradient(from calc(var(--sf, 0deg) + var(--w)), #000 0deg, #000 calc(var(--sl, 360deg) - var(--w) * 2), transparent calc(var(--sl, 360deg) - var(--w) * 2)); }
.suit-grid.jokerless .joker-seam { display: none; }
/* 一行四列（桌面/横屏）：圆卡居中，缝合线只区分左右邻卡——红心左半环、梅花右半环；黑桃/方块不邻切角，保底整环 */
.suit-grid .joker-seam[data-hit="heart"] { --sf: 90deg;  --sl: 180deg; }
.suit-grid .joker-seam[data-hit="club"] { --sf: 270deg; --sl: 180deg; }
.suit-card.joker .suit-sym { font-size: 28px; color: var(--gold); margin-bottom: 2px; }
.suit-card.joker .suit-name { font-size: 12px; font-weight: 700; color: #ffe9ad; }
.suit-card.joker .suit-total { margin-top: 0; font-size: 12px; }
.suit-card.joker .suit-mine { min-height: 11px; }
/* 赔率徽标收进圆内、顶部居中（图标上方），小金 pill */
.suit-card.joker .suit-odds { top: 4px; right: auto; left: 50%; bottom: auto; transform: translateX(-50%);
  font-size: 8.5px; padding: 0.5px 6px; border-radius: 999px;
  background: rgba(237,190,76,.16); border-color: rgba(237,190,76,.5); }
/* 圆卡定位靠 transform，hover/按下/禁用/命中都要带上位移，避免「跳位」 */
.suit-card.joker:hover { transform: translate(-50%, -50%) scale(1.04); }
.suit-card.joker:disabled { transform: translate(-50%, -50%); }
.suit-card.joker.hit { animation: popJoker .5s ease; }
@keyframes popJoker {
  0% { transform: translate(-50%, -50%) scale(1); }
  45% { transform: translate(-50%, -50%) scale(1.09); }
  100% { transform: translate(-50%, -50%) scale(1.04); }
}
.suit-card.hit { border-color: var(--gold);
  background: linear-gradient(180deg, rgba(237,190,76,.3), rgba(237,190,76,.08));
  box-shadow: 0 0 0 3px rgba(237,190,76,.22), 0 0 46px rgba(237,190,76,.42);
  animation: pop .5s ease; }
@keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.07); } 100% { transform: scale(1.03); } }
.suit-card.lose { opacity: .32; filter: grayscale(.6); }
.reveal-badge { position: absolute; left: 50%; bottom: 12px; transform: translate(-50%, 0) scale(.9);
  padding: 10px 22px; border-radius: 14px; font-weight: 800; font-size: 15px;
  background: rgba(8,11,17,.9); border: 1px solid rgba(237,190,76,.5); color: var(--gold);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; white-space: nowrap;
  box-shadow: 0 16px 40px rgba(0,0,0,.6);
  z-index: 6; }
.reveal-badge.show { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* 庄家面板 */
.banker-panel { display: none; background: rgba(0,0,0,.34); border: 1px solid rgba(237,190,76,.28);
  border-radius: 14px; padding: 12px 14px; }
.banker-panel.show { display: block; animation: fadeUp .25s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bp-title { font-size: 12.5px; color: var(--gold); font-weight: 700; margin-bottom: 10px; }
.bp-keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 10px; }
.bp-key { padding: 10px; border-radius: 10px; font-size: 14px; font-weight: 700;
  background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.12);
  transition: all .15s; }
.bp-key.red { color: var(--red); }
.bp-key.gold { color: var(--gold); }
.bp-key:hover { background: rgba(255,255,255,.12); }
.bp-key.on { background: rgba(237,190,76,.2); border-color: var(--gold); box-shadow: 0 0 0 2px rgba(237,190,76,.15); }
.bp-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bp-label { font-size: 12px; color: rgba(255,255,255,.55); }
.bp-secs { display: flex; gap: 6px; }
.bp-secs button { padding: 6px 12px; border-radius: 8px; font-size: 12.5px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12); }
.bp-secs button.on { background: rgba(237,190,76,.22); border-color: var(--gold); color: var(--gold); font-weight: 700; }
.bp-row .btn { margin-left: auto; }
.bp-hint { font-size: 11.5px; color: rgba(255,255,255,.42); margin: 10px 0 0; }
.bp-hint b { color: var(--gold); }

/* 托管行 / 本庄战绩 */
.bp-host { margin-bottom: 10px; padding-bottom: 9px; border-bottom: 1px dashed rgba(255,255,255,.12); }
.bp-host .btn { margin-left: 0; }
/* 状态说明 + 锁键倒计时同行：文字居左，徽标在剩余空间水平居中 */
.host-state-line { flex: 1 1 100%; display: flex; align-items: center; gap: 10px; min-width: 0; }
.bp-host-state { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: rgba(255,255,255,.45); }
/* 锁键倒计时徽标（手动开盘时显示，最后 30 秒变红 + 滴答） */
.host-cd { flex: 0 1 auto; margin-left: auto; margin-right: auto;
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px;
  color: #d8ecdf; background: rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px; padding: 2px 9px; letter-spacing: 1px; white-space: nowrap; }
.host-cd.warn { color: #ff9aa1; border-color: rgba(240,84,95,.55);
  animation: hostCdPulse 1s ease-in-out infinite; }
@keyframes hostCdPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240,84,95,0); }
  50% { box-shadow: 0 0 8px 1px rgba(240,84,95,.4); }
}
/* 开启托管前的确认行：下注倒计时选定 + 确认/取消 */
.bp-host-confirm { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: -4px 0 10px; padding: 8px 10px;
  background: rgba(0,0,0,.22); border: 1px dashed rgba(237,190,76,.4); border-radius: 10px; }
.bp-host-confirm[hidden] { display: none; }
.bhc-label { font-size: 11.5px; color: rgba(255,255,255,.55); flex: 0 0 auto; }
.bp-secs.sm { gap: 5px; }
.bp-secs.sm button { min-height: 26px; padding: 3px 10px; font-size: 12px; }
.hq-secs-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.bs-host { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; white-space: nowrap;
  background: rgba(140,120,255,.18); border: 1px solid rgba(140,120,255,.45); color: #c0b4ff; }
.bs-host[hidden] { display: none; }
/* e252：本庄盈亏第二行已移除，盈亏明细改由「还可赔」的 title 悬浮说明给出 */
/* e252：按钮吃掉剩余空间固定在整行最右（移动端哈希隐藏也不会留下空白）。
   用 #bankerStrip 提高特异性，覆盖后面 media 里 .btn.sm 的 32px 最小高度，保持单行紧凑 */
#bankerStrip .bs-host-btn { flex: 0 0 auto; margin-left: auto; white-space: nowrap; font-size: 11px;
  padding: 2px 9px; min-height: 26px; line-height: 1.2; }
#bankerStrip .bs-host-btn[hidden] { display: none; }

/* 托管设置弹窗 */
.host-state-box { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.host-state-box b { font-size: 13px; color: rgba(255,255,255,.72); }
.host-state-box span { font-size: 11.5px; color: var(--muted); }
.host-state-box.on { background: rgba(140,120,255,.1); border-color: rgba(140,120,255,.4); }
.host-state-box.on b { color: #c0b4ff; }
.host-acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.host-acts .btn { flex: 1 1 44%; }

/* 批量预设开奖结果 */
.hq-tools { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; }
.hq-count { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.hq-list { display: grid; gap: 6px; max-height: 46vh; overflow: auto; padding-right: 4px; }
.hq-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 9px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.hq-row.done { background: rgba(237,190,76,.07); border-color: rgba(237,190,76,.35); }
.hq-no { flex: 0 0 auto; width: 52px; font-size: 11.5px; color: rgba(255,255,255,.5); }
.hq-btns { display: flex; gap: 6px; }
.hq-suit { width: 38px; height: 30px; border-radius: 8px; font-size: 14px; color: #dfe8e3;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.hq-suit.red { color: #ff8a90; }
.hq-suit.on { background: rgba(237,190,76,.22); border-color: var(--gold); color: var(--gold); font-weight: 700; }

/* 大厅「我的房间」：房主回大厅但房间保留 */.myroom { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 10px 12px;
  border-radius: 12px; background: rgba(237,190,76,.08); border: 1px solid rgba(237,190,76,.35); }
.myroom[hidden] { display: none; }
.mr-info { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.mr-info b { font-size: 13.5px; color: #fff; }
.mr-tag { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; white-space: nowrap;
  background: rgba(237,190,76,.2); border: 1px solid rgba(237,190,76,.4); color: var(--gold); }
.mr-meta { flex: 1 1 100%; font-size: 11.5px; color: var(--muted); }
.mr-acts { display: flex; gap: 6px; flex: 0 0 auto; }

/* 等待 */
.wait-panel { display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px; border-radius: 14px; background: rgba(0,0,0,.24);
  font-size: 13px; color: rgba(255,255,255,.6); }
.wait-panel[hidden] { display: none; }
.spin { width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(237,190,76,.25); border-top-color: var(--gold);
  animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 下注栏 */
.bet-bar { display: flex; align-items: center; gap: 12px; padding-top: 2px; }
/* 下注模式切换：分段胶囊 + 右侧一行说明，紧凑不占高度 */
.bet-mode-row { display: flex; align-items: center; gap: 10px; margin: 2px 0 -2px; flex-wrap: nowrap; }
.bet-mode { display: inline-flex; padding: 2px; gap: 2px; flex: 0 0 auto;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; }
.bet-mode button { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
  color: var(--muted); background: transparent; transition: all .14s; white-space: nowrap; }
.bet-mode button:hover { color: var(--fg); }
.bet-mode button.on { background: var(--gold); color: #10231a; box-shadow: 0 1px 6px rgba(237,190,76,.28); }
.bet-mode-tip { font-size: 11.5px; color: var(--muted); min-width: 0; flex: 1 1 auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: center; line-height: 1.3; }
.bet-mode-tip b { color: var(--gold); font-weight: 700; }
.chips { display: flex; gap: 8px; }
.chip { min-width: 54px; padding: 9px 14px; border-radius: 999px; font-weight: 700; font-size: 13px;
  background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.14);
  font-variant-numeric: tabular-nums; transition: all .14s; }
.chip:hover { background: rgba(255,255,255,.13); }
.chip.on { background: linear-gradient(180deg, #f7d374, var(--gold));
  color: #2a1e00; border-color: transparent;
  box-shadow: 0 4px 16px rgba(237,190,76,.3); }
.bet-actions { margin-left: auto; display: flex; gap: 8px; }

/* 侧栏 */
.side { display: flex; flex-direction: column; gap: 12px; min-height: 0; position: relative; }
.panel { background: rgba(20,27,38,.75); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px; overflow: hidden;
  display: flex; flex-direction: column; }
.panel-title { font-size: 12px; color: var(--muted); margin-bottom: 10px; letter-spacing: .5px; }
.seat-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; max-height: 150px; }
.seat { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 10px;
  background: rgba(255,255,255,.03); border: 1px solid transparent;
  /* e263：原来过渡属性写成 all，会把「余额/已押文字变化」也算作过渡目标，
     整行跟着重绘，视觉上被放大成「头像闪一下」。这里只过渡颜色，不动布局。 */
  transition: background-color .15s ease, border-color .15s ease; }
.seat.banker { background: rgba(237,190,76,.1); border-color: rgba(237,190,76,.32); }
.seat.me { border-color: rgba(120,180,255,.4); }
.seat-avatar { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: linear-gradient(150deg, #2b3a52, #1a2331); color: #b9c6db;
  /* e263：头像不参与任何过渡，也不做缩放动画，避免重绘时出现「亮一下」 */
  transition: none; }
.seat.banker .seat-avatar { background: linear-gradient(150deg, #f5d074, #b98c1f); color: #2a1e00; }
.seat-info { flex: 1; min-width: 0; }
.seat-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat-sub { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.seat-tag { font-size: 10px; padding: 2px 6px; border-radius: 6px; background: rgba(237,190,76,.2); color: var(--gold); }

/* 点选房间用户 → 屏蔽 TA 的语音 / 打字聊天 */
.seat.tappable { cursor: pointer; }
.seat.tappable:hover { background: rgba(255,255,255,.075); border-color: rgba(120,180,255,.32); }
.seat.tappable:active { transform: scale(.99); }
.seat-tag.blocked { background: rgba(240,84,95,.16); color: #ff9aa2; }

/* e273：座位栏版本徽章已移除（改为「人数 / 本房上限」） */

/* 谁在说话：座位右侧「喇叭 + 波浪」闪烁提示。
   多人可同时说话 → 每个正在说话的人那一行各自亮，不互斥、不轮占。 */
.seat-spk { flex: none; display: inline-flex; align-items: center; gap: 2px;
  margin-left: 4px; padding: 2px 6px; border-radius: 9px;
  color: #7fe3ac; background: rgba(47,191,113,.14);
  border: 1px solid rgba(47,191,113,.38);
  font-size: 11px; line-height: 1; white-space: nowrap;
  animation: seatSpkGlow 1.1s ease-in-out infinite; }
.seat-spk[hidden] { display: none; }
.seat-spk i { display: block; width: 2px; height: 9px; border-radius: 2px;
  background: currentColor; transform-origin: center;
  animation: seatSpkWave .8s ease-in-out infinite; }
.seat-spk i:nth-of-type(2) { animation-delay: .16s; }
.seat-spk i:nth-of-type(3) { animation-delay: .32s; }
@keyframes seatSpkWave {
  0%, 100% { transform: scaleY(.35); opacity: .55; }
  50% { transform: scaleY(1.25); opacity: 1; }
}
@keyframes seatSpkGlow { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }
.seat.speaking { border-color: rgba(47,191,113,.55); background: rgba(47,191,113,.10); }
.rc-block-btn { width: 100%; padding: 12px 14px; border-radius: 10px; text-align: left;
  font-size: 13.5px; color: var(--ink); background: rgba(255,255,255,.05);
  border: 1px solid var(--line); cursor: pointer; transition: all .15s; }
.rc-block-btn:hover { border-color: rgba(120,180,255,.42); background: rgba(255,255,255,.08); }
.rc-block-btn.on { background: rgba(240,84,95,.12); border-color: rgba(240,84,95,.45); color: #ffb0b6; }

/* 点选房间用户：屏幕内可拖动的小浮窗（固定浮层，不用全屏遮罩，房间视图仍可见可操作）
   e265：按用户反馈改成「自由拖动 + 默认落在屏幕中下部（截图绿框位置）+ 再收窄一点」。
   旧规则是贴右侧、锚在房间顶栏下方；现在用 left/top 定位（这里是 JS 未跑时的兜底值），
   实际位置由 rcPlaceUserPanel() 按视口比例或用户拖过的位置计算，再夹进屏幕内。
   e232 布局：flex 纵向——头部(✕)与底部(返回)固定不滚，只有 .rc-up-body 滚动。 */
.rc-user-panel { position: fixed; left: 22%; top: 43%; z-index: 60;
  width: min(216px, 58vw); padding: 12px;
  display: flex; flex-direction: column;
  /* 展开下注历史后面板会变高：夹在视口内，内容区内部滚动，绝不顶出屏幕 */
  max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px);
  overflow: hidden;
  transform: none;
  background: rgba(15,22,33,.98); border: 1px solid rgba(120,180,255,.30);
  border-radius: 14px; box-shadow: 0 16px 44px rgba(0,0,0,.6);
  color: var(--ink); font-size: 12.5px;
  animation: rcUpIn .18s ease-out both; }
.rc-user-panel[hidden] { display: none; }
/* 拖动中：停掉入场动画（否则 transform 会和拖动位置打架），阴影压深、光标变抓取 */
.rc-user-panel.dragging { animation: none; box-shadow: 0 22px 56px rgba(0,0,0,.72); }
/* 入场只做淡入，不做位移：面板位置由 left/top 精确决定，
   带 translate 会让「刚打开时」量到的位置偏一点，拖动一开始也会跳一下。 */
@keyframes rcUpIn { from { opacity: 0; }
  to { opacity: 1; } }
.rc-user-panel .rc-block-btn { padding: 9px 11px; font-size: 12.5px; }
.rc-up-head { flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 6px; margin-bottom: 10px; padding-bottom: 6px;
  border-bottom: 1px dashed rgba(255,255,255,.08);
  /* e265：标题条就是拖动手柄 */
  cursor: move; touch-action: none;
  user-select: none; -webkit-user-select: none; }
.rc-user-panel.dragging .rc-up-head { cursor: grabbing; }
/* 拖动手柄：两列小圆点（纯 CSS 画的，保持轻量） */
.rc-up-grip { flex: none; width: 8px; height: 14px; border-radius: 2px; opacity: .5;
  background-image: radial-gradient(rgba(190,210,235,.9) 1px, transparent 1.2px);
  background-size: 4px 4px; background-position: center; }
.rc-up-name { flex: 1 1 auto; min-width: 0;
  font-size: 13px; font-weight: 600; color: #dce8f8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-up-x { flex: none; width: 26px; height: 26px; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid var(--line);
  color: var(--muted); font-size: 12px; }
.rc-up-x:hover { color: var(--ink); border-color: rgba(120,180,255,.45); }
/* e232：唯一滚动区——头部✕/底部返回固定，只有这里随内容滚 */
.rc-up-body { flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto; overscroll-behavior: contain; }
.rc-up-hist { flex: none; width: 100%; padding: 9px 11px; border-radius: 10px; text-align: left; cursor: pointer;
  font-size: 12.5px; color: #bcd6f5; background: rgba(120,180,255,.10);
  border: 1px solid rgba(120,180,255,.32); }
.rc-up-hist:hover { background: rgba(120,180,255,.18); }
.rc-up-foot { flex: none; margin-top: 10px; }
.rc-up-back { width: 100%; padding: 8px; border-radius: 9px; cursor: pointer; font-size: 12.5px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--muted); }
.rc-up-back:hover { color: var(--ink); }
.rc-up-loading, .rc-up-empty { text-align: center; color: #aab8cd; font-size: 12px; padding: 18px 4px; }
.rc-up-sum { flex: none;
  display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 9px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  font-size: 11.5px; color: #aab8cd; }
.rc-up-sum b { color: var(--ink); font-variant-numeric: tabular-nums; }
.rc-up-sum .win b { color: #ff8b93; }
.rc-up-sum .lose b { color: #5fd08a; }
/* e232：列表不再自带 max-height/overflow（双层滚动是「滑不动」的根因），随 body 一起滚 */
.rc-up-list { display: flex; flex-direction: column; gap: 6px; }
.rc-up-row { padding: 8px 9px; border-radius: 9px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); }
.rc-up-row-top { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; color: #cddcf0; }
.rc-up-time { color: #8fa3bd; font-variant-numeric: tabular-nums; }
.rc-up-bets { margin: 5px 0; font-size: 11.5px; color: var(--ink); font-variant-numeric: tabular-nums; word-break: break-all; }
.rc-up-row-bot { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; color: #9fb2cc; }
.rc-up-net.win { color: #ff8b93; }   /* 赢=红，涨红跌绿 */
.rc-up-net.lose { color: #5fd08a; }  /* 输=绿 */

/* e225：横屏 / 矮屏时四门下注区占满左半宽，右侧栏只剩约 260px。
   e265：可拖动后不再需要"钉在右侧栏"，宽度继续收窄，拖到哪都不会压住门卡。 */
@media (orientation: landscape) and (max-height: 540px) { .rc-user-panel { width: min(200px, 54vw); padding: 9px; }
  .rc-up-head { margin-bottom: 7px; }
  .rc-up-body { gap: 6px; }
  .rc-user-panel .rc-block-btn, .rc-up-hist { padding: 7px 9px; font-size: 12px; } }
.history-list { display: flex; flex-direction: column; gap: 5px; overflow-y: auto; max-height: 120px; }
.hist { display: flex; align-items: center; gap: 8px; font-size: 12px;
  padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.03); }
.hist-no { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 26px; }
.hist-sym { font-size: 16px; }
.hist-sym.red { color: var(--red); }
.hist-gain { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; }
.hist-gain.plus { color: var(--green); }
.hist-gain.minus { color: var(--red); }

/* ── 房间聊天：文字 / 表情 / 截图，消息走限时气泡（停留秒数后台可配） ── */
.room-chat-panel { flex: 0 0 auto; position: relative; overflow: visible; } /* overflow 放开：表情/更多面板可伸出面板顶部 */

/* 「+」更多面板：聊天记录 / 发送截图。悬浮在输入行上方，不占布局 */
.rc-plus-panel { position: absolute; right: 6px; bottom: 50px; z-index: 31;
  min-width: 168px; padding: 6px; border-radius: 12px;
  background: rgba(13,18,27,.97); border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(0,0,0,.55);
  display: flex; flex-direction: column; gap: 4px; }
.rc-plus-panel[hidden] { display: none; }
.rc-plus-panel button { text-align: left; font-size: 13px; color: var(--ink);
  background: rgba(255,255,255,.04); border: 1px solid transparent;
  border-radius: 8px; padding: 9px 11px; cursor: pointer; }
.rc-plus-panel button:hover { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.12); }
.rc-plus { font-size: 20px; line-height: 1; }

/* 聊天限时气泡：浮在侧栏下方空白区，新消息自下而上堆叠，到点自动淡出。
   pointer-events:none 保证不挡座位 / 最近开奖列表的点击。 */
.rc-pop-layer { position: absolute; left: 4px; right: 4px; bottom: 8px; z-index: 22;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  pointer-events: none; }
.rc-pop { max-width: 100%; padding: 8px 11px; border-radius: 12px;
  background: rgba(18,26,38,.94); border: 1px solid rgba(120,180,255,.28);
  box-shadow: 0 8px 24px rgba(0,0,0,.45); color: var(--ink);
  font-size: 12.5px; line-height: 1.5; word-break: break-word;
  animation: rcPopIn .22s ease-out both; }
.rc-pop.mine { border-color: rgba(237,190,76,.42); background: rgba(38,31,18,.94); }
.rc-pop b { color: #9fb2cc; font-weight: 600; margin-right: 5px; font-size: 11.5px; }
.rc-pop.mine b { color: var(--gold); }
/* 消息时间：小字、等宽数字，弱于正文但清晰可读；聊天记录里靠名字行右侧 */
.rc-time { display: inline-block; margin: 0 6px 0 2px; color: #8fa3bd;
  font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.rc-pop.mine .rc-time, .rc-msg.mine .rc-time { color: #c9ac72; }
.rc-history .rc-msg .rc-time { float: right; margin: 1px 0 0 8px; }
.rc-pop.out { animation: rcPopOut .35s ease-in both; }
@keyframes rcPopIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes rcPopOut { to { opacity: 0; transform: translateY(-6px) scale(.98); } }
.rc-pop-img { display: block; max-width: 100%; max-height: 120px; border-radius: 8px; margin-top: 5px; }

/* 聊天图片消息（聊天记录弹窗里用）与记录列表 —— 弹窗内提高对比度，避免深色底上文字发灰 */
.rc-img { display: block; max-width: 100%; max-height: 180px; border-radius: 8px; margin-top: 6px;
  border: 1px solid var(--line); cursor: zoom-in; }
.rc-history { display: flex; flex-direction: column; gap: 9px; max-height: 56vh; overflow-y: auto;
  overscroll-behavior: contain; padding: 4px 3px; }
.rc-history .rc-msg { padding: 9px 11px; border-radius: 10px; color: var(--ink);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); }
.rc-history .rc-msg.mine { background: rgba(237,190,76,.10); border-color: rgba(237,190,76,.30); }
.rc-history-empty { text-align: center; color: #aab8cd; font-size: 13px; padding: 26px 0; }
.rc-msg { font-size: 13px; line-height: 1.55; word-break: break-word; }
.rc-msg b { display: block; color: #cddcf0; font-weight: 600; font-size: 12px; margin: 0 0 3px; }
.rc-msg.mine b { color: var(--gold); }
.rc-voice { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-size: 12px;
  background: rgba(237,190,76,.12); border: 1px solid rgba(237,190,76,.35);
  color: #f2d489; border-radius: 14px; padding: 3px 11px; font-variant-numeric: tabular-nums; }
.rc-voice.playing { opacity: .55; }
.room-chat-bar { display: flex; gap: 4px; align-items: center; }
/* hidden 属性必须能盖过 .rc-tool 的 display:grid（否则麦克风/胶囊用 hidden 关不掉） */
.room-chat-bar .rc-tool[hidden] { display: none; }
.rc-text { flex: 1; min-width: 0; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14); border-radius: 16px;
  padding: 7px 12px; color: var(--ink); font-size: 13px; outline: none; }
.rc-text:focus { border-color: rgba(237,190,76,.45); }
.rc-tool { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%; width: 32px; height: 32px; flex: 0 0 32px;
  display: grid; place-items: center; cursor: pointer; font-size: 15px; color: var(--ink);
  padding: 0; transition: all .15s; }
/* e246：触摸设备点一下 :hover 会残留（sticky hover）。原来这条无条件的
   .rc-tool:hover 优先级 (0,2,0) 会盖过 .rc-holdtalk 的白底 (0,1,0)，
   导致「按住 说话」胶囊被点一下就永久变成半透明灰、看似卡死。
   只在真正带鼠标悬停能力的设备应用 hover 高亮；触摸设备一律不应用。 */
@media (hover: hover) and (pointer: fine) { .rc-tool:hover { background: rgba(255,255,255,.12); } }
/* hover / active / focus 命中时，语音胶囊只微微提亮到 .rc-tool:hover 同色阶，
   与输入框/圆钮保持同一视觉语言；触摸设备无 hover 不会残留（e246 根治）。 */
.rc-holdtalk:hover, .rc-holdtalk:active, .rc-holdtalk:focus { background: rgba(255,255,255,.12); color: #fff; }
/* e254 微信式语音切换图标：圆环 + 喇叭声波，与键盘图标共用 currentColor。
   圆环/声波由 SVG 自带 stroke=currentColor 绘制；rect 规则给键盘图标的按键用。 */
.rc-ico { width: 18px; height: 18px; display: block; pointer-events: none; }
.rc-ico rect { fill: currentColor; }
.rc-ico rect[fill="none"] { fill: none; }
/* e255：只保留一个圆环。按钮自身的灰底/灰边去掉，SVG 铺满 32px 按钮，
   白色圆环（r=11.1 + 描边）外径≈31.9px 直接贴住按钮外沿；圈内三角与两条声波
   在 24 viewBox 里等比收进中心，跟外圈留白协调，不再有「内亮圈 + 外灰圈」。
   语音模式切成键盘图标时恢复普通圆钮 + 18px 小图标，避免键盘被大圆环框住。 */
#rcMic.rc-tool { background: transparent; border: 0; color: #aab4c4; }
#rcMic .rc-ico { width: 32px; height: 32px; }
#rcMic.rc-tool.voice-on { background: rgba(58,70,92,.6); border: 1px solid rgba(120,140,170,.4); }
#rcMic.rc-tool.voice-on .rc-ico { width: 18px; height: 18px; }
/* 去掉灰底后桌面端仍给一点悬停反馈（不放背景，避免又变出一个圆） */
@media (hover: hover) and (pointer: fine) { #rcMic.rc-tool:hover { transform: scale(1.06); } }
/* 语音模式下的「按住说话」胶囊：宽圆角药丸，占满输入框同一位置。
   e281：外观与 .rc-text 输入框完全一致（淡半透明白底 + 细白边 + 浅色字），
   让整条输入栏（输入框 / 圆钮 / 胶囊）保持同色系、不再有刺眼或过重的色块。
   e282：加平滑过渡，按下变红 / 松开回淡白都是渐变，不再生硬闪跳。 */
/* e288：长按目标再加一层 callout:none（与全局 * 双保险），彻底掐掉
   安卓 Chrome 在「按住说话」上弹出的「手动标记广告」系统菜单 */
.rc-holdtalk, .rc-tool, .room-chat-bar { -webkit-touch-callout: none; }
.rc-holdtalk { flex: 1 1 auto; width: auto; border-radius: 16px;
  font-size: 13px; font-weight: 600; letter-spacing: 2px; color: var(--ink);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  user-select: none; -webkit-user-select: none; touch-action: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease; }
/* e256：按下只换红底 + 文字「松开 结束」，尺寸、位移、外扩光晕全部不变，
   不放大、不盖住相邻的表情 / + 键；动画与光晕一律关掉。
   e282：红底由实心 .92 改为半透明 .5，和整站「说话人」红色（圆钮 live 态 .32）
   同一色相、同一视觉语言，不再是一块死板的实红；边框用同色系 .7 提亮轮廓，
   配合基础过渡，松开时平滑退回淡白。 */
.rc-holdtalk.live { background: rgba(255,70,70,.5); color: #fff; border-color: rgba(255,95,95,.7);
  transform: none; animation: none; box-shadow: none; }
/* 按住说话：红色=我正在说话（松手停止）。
   别人说话时按钮保持普通麦克风，绝不变喇叭：房间内每个人都能同时按住说话，
   「谁在说」由提示浮层的用户名 + 座位上的喇叭波浪提示表达。
   e256：胶囊不走这条放大规则（:not(.rc-holdtalk)）——按下去放大 14% 再叠 6px
   光晕会盖住旁边的表情 / + 键，用户反馈别扭，胶囊保持原有大小。 */
.rc-tool.live:not(.rc-holdtalk) { background: rgba(255,70,70,.32); border-color: rgba(255,95,95,.7); animation: rcPulse 1.2s infinite; transform: scale(1.14); box-shadow: 0 0 0 6px rgba(255,70,70,.16), 0 0 22px rgba(255,70,70,.55); }
/* e247：说话脉冲不再用 opacity —— 半透明白叠深色底会被看成「变灰」。
   改为只改变光晕强度，即便状态残留，胶囊也不会发灰。
   e256 起胶囊不再播放这个脉冲动画，规则留给其它 .rc-tool.live 元素。 */
@keyframes rcPulse { 50% { box-shadow: 0 0 0 3px rgba(255,70,70,.10), 0 0 10px rgba(255,70,70,.35); } }

/* ── e288：PWA「安装到桌面」横幅（安卓 Chrome 捕获 beforeinstallprompt 后显示）──
   贴在大厅 / 房间底部导航栏之上，常驻不挡操作；点「安装」走原生安装，
   点 × 收起。配色与全站一致（深色底 + 金边）。 */
.install-banner { position: fixed; left: 12px; right: 12px;
  bottom: calc(var(--tb-h) + 8px); z-index: 60;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 14px;
  background: rgba(20, 27, 38, .97); border: 1px solid rgba(237, 190, 76, .45);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.install-banner[hidden] { display: none; }
.ib-ico { font-size: 20px; line-height: 1; flex: 0 0 auto; }
.ib-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ib-text b { font-size: 13.5px; color: var(--ink); }
.ib-text span { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.ib-btn { flex: 0 0 auto; border: none; border-radius: 10px; padding: 8px 14px;
  font-size: 13px; font-weight: 700; color: #1a1206; cursor: pointer;
  background: linear-gradient(180deg, #f3cf6a, #e0b13f); }
.ib-btn:active { transform: scale(.96); }
.ib-x { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  border: none; background: rgba(255, 255, 255, .08); color: var(--muted);
  font-size: 16px; line-height: 1; cursor: pointer; }
.ib-x:active { background: rgba(255, 255, 255, .16); }
/* 个人中心里的常驻「安装到桌面」入口（触摸设备才显示） */
.pf-install { margin: 12px 0 4px; text-align: center; }
.pf-install[hidden] { display: none; }

/* ── 按住说话提示浮层 ──
   e223：不再放屏幕中央。那里正好是四门下注区，别人一说话就把赔率与
   下注额盖住，害其他玩家看不见自己下注的门。改为贴底显示（哈希条上方）：
   窄屏上下堆叠时下注区在上半屏、底部是座位/最近开奖面板；宽屏左右双栏时
   再单独贴到右侧栏，左侧下注区同样零遮挡。声波柱仍由真实麦克风音量驱动，
   pointer-events:none 保证浮层本身不拦截任何点击。 */
.ptt-tip { /* e226：底部多了常驻导航栏，整体上移一栏高度，避免提示卡压在导航按钮上 */
  position: fixed; left: 50%; bottom: calc(54px + var(--tb-h)); transform: translateX(-50%);
  z-index: 9999; pointer-events: none;
  display: flex; flex-direction: column; align-items: center;
  /* e256：收紧成小提示条，少盖座位与其它按钮；去掉 7px 外扩光晕和大留白，
     信息一项不少（声波柱 / 正在说话 / 松手停止 / 音量条） */
  min-width: 0; max-width: 82vw; padding: 10px 18px 12px;
  border-radius: 16px; text-align: center; color: #fff;
  background: rgba(24, 18, 14, .93); border: 2px solid rgba(255, 95, 95, .8);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5); }
.ptt-tip[hidden] { display: none; }
.ptt-tip.others { min-width: 0; padding: 8px 16px 10px;
  background: rgba(12, 26, 20, .92); border-color: rgba(60, 200, 120, .7);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45); }
.ptt-waves { display: flex; align-items: center; justify-content: center; gap: 5px; height: 30px; margin-bottom: 2px; }
.ptt-waves i { display: block; width: 7px; height: 26px; border-radius: 5px;
  transform-origin: center; transform: scaleY(.2);
  background: linear-gradient(180deg, #ffd76e, #ff5b5b);
  transition: transform .08s linear; }
.ptt-tip.others .ptt-waves { height: 24px; }
.ptt-tip.others .ptt-waves i { width: 6px; height: 20px; background: linear-gradient(180deg, #7ff0b0, #2ec97a);
  animation: pttBob .9s ease-in-out infinite; }
.ptt-tip.others .ptt-waves i:nth-child(2n) { animation-delay: -.3s; }
.ptt-tip.others .ptt-waves i:nth-child(3n) { animation-delay: -.6s; }
@keyframes pttBob { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(.95); } }
.ptt-title { font-size: 16px; font-weight: 700; letter-spacing: .5px; }
.ptt-tip.others .ptt-title { font-size: 14px; max-width: 78vw; line-height: 1.4; word-break: break-all; }
.ptt-sub { font-size: 11px; opacity: .82; margin-top: 3px; line-height: 1.4; white-space: nowrap; }
.ptt-meter { width: 100%; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .14); overflow: hidden; margin-top: 6px; }
.ptt-meter span { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #ffd76e, #ff5b5b); transition: width .08s linear; }
.ptt-tip.others .ptt-meter { display: none; }

/* e223：>900px 是左右双栏，下注区与筹码/操作栏都在左侧，居中贴底会压到
   筹码栏；改贴右侧栏（座位/最近开奖那一列），并限宽，绝不往左侵入下注区。 */
@media (min-width: 901px) { .ptt-tip { left: auto; right: 16px; transform: none; max-width: 320px; } }
/* e223：561~900px 单列布局会把下注区拉得很高（平板竖屏 / 桌面窄窗口），
   底部留给提示卡的条带只有一百多像素，原大卡片会顶回下注区。这类视口
   再收一波尺寸；手机竖屏（<=560px）从 e256 起也已是紧凑小条，这里继续压。 */
@media (min-width: 561px) and (max-width: 900px) and (min-height: 621px) { .ptt-tip, .ptt-tip.others {
    left: auto; right: 12px; transform: none; min-width: 0; max-width: 260px;
    bottom: calc(46px + var(--tb-h)); padding: 10px 20px 12px;
  }
  .ptt-waves, .ptt-tip.others .ptt-waves { height: 30px; margin-bottom: 2px; }
  .ptt-waves i, .ptt-tip.others .ptt-waves i { height: 26px; }
  .ptt-title, .ptt-tip.others .ptt-title { font-size: 16px; }
  .ptt-sub { margin-top: 3px; font-size: 11px; }
  .ptt-meter { margin-top: 6px; } }
/* e223：横屏 / 矮屏可用高度只剩几十像素，压成极简条，绝不顶回下注区。
   选择器把 .ptt-tip.others 的派生规则一起写上，避免被更高特异性覆盖。
   这几类视口里筹码栏被拉到左侧靠下，浮层改贴右，水平方向彻底避开。 */
@media (max-height: 620px) { .ptt-tip, .ptt-tip.others {
    left: auto; right: 12px; transform: none; min-width: 0; max-width: 240px;
    bottom: calc(44px + var(--tb-h)); padding: 6px 16px 8px;
  }
  .ptt-waves, .ptt-tip.others .ptt-waves { height: 20px; margin-bottom: 1px; }
  .ptt-waves i, .ptt-tip.others .ptt-waves i { height: 17px; }
  .ptt-title, .ptt-tip.others .ptt-title { font-size: 13px; }
  .ptt-sub { margin-top: 1px; font-size: 10.5px; }
  .ptt-meter { margin-top: 4px; } }
.rc-send { background: rgba(237,190,76,.2); border-color: rgba(237,190,76,.45); color: var(--gold); font-size: 14px; }
.rc-emoji { /* 悬浮层：盖在消息区上方，不占布局空间，工具行永不被遮挡；高度自适应完整展示全部表情 */
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
  padding: 7px; background: rgba(13,18,27,.97); border: 1px solid var(--line);
  border-radius: 10px;
  position: absolute; left: 10px; right: 10px; bottom: 50px;
  z-index: 30;
  box-shadow: 0 10px 28px rgba(0,0,0,.5); }
.rc-emoji button { background: none; border: none; font-size: 20px; cursor: pointer; padding: 4px; border-radius: 6px; line-height: 1; }
.rc-emoji[hidden] { display: none; }
.rc-emoji button { background: none; border: none; font-size: 18px; cursor: pointer; padding: 3px; border-radius: 6px; line-height: 1; }
.rc-emoji button:hover { background: rgba(255,255,255,.1); }

/* 底栏哈希 */
.hashbar { flex: 0 0 auto; height: 40px; display: flex; align-items: center; gap: 10px;
  flex-wrap: nowrap; /* e227：强制单行，绝不换行成竖排占高度 */
  padding: 0 18px; border-top: 1px solid var(--line);
  background: rgba(10,14,21,.9); font-size: 12px; }
.hb-tag { padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700;
  white-space: nowrap; flex: 0 0 auto; /* e227：标签不换行、不被压缩成竖排 */
  background: rgba(47,191,113,.15); color: var(--green); }
.hb-tag.warn { background: rgba(240,84,95,.15); color: var(--red); }
.hb-text { color: var(--muted); font-family: ui-monospace, Menlo, monospace; font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1 1 auto; min-width: 0; /* e227：占满剩余宽度并省略，长哈希不撑破整行 */ }
.hb-text b { color: var(--gold); font-weight: 600; }

/* 弹窗 */
.modal { position: fixed; inset: 0; background: rgba(4,7,11,.72); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; z-index: 50; }
.modal.show { display: flex; }
.modal-box { width: 380px; max-width: 92vw; background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px; padding: 22px; box-shadow: 0 30px 70px rgba(0,0,0,.6);
  animation: fadeUp .2s ease; }
.modal-box h3 { margin: 0 0 18px; font-size: 16px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
/* e271：字段内单独一行的小字说明（如申请上庄的「单注限红」），放在输入框正上方 */
.field .field-note { display: block; font-size: 11px; line-height: 1.2; color: var(--gold, #e7c66b);
  opacity: .85; letter-spacing: .5px; margin: -2px 0 6px; }
.field input, .field select { width: 100%; padding: 10px 12px; border-radius: 9px; font-size: 14px;
  background: #0b1119; border: 1px solid var(--line); color: var(--ink); outline: none; }
.field input:focus, .field select:focus { border-color: var(--gold); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.modal-actions .btn { flex: 1; }

/* Toast */
.toast { /* e226：抬到全局导航栏上方，提示不会盖住 5 个导航按钮 */
  position: fixed; left: 50%; bottom: calc(68px + var(--tb-h)); transform: translate(-50%, 20px);
  background: rgba(20,27,38,.97); border: 1px solid var(--line);
  color: var(--ink); padding: 11px 20px; border-radius: 11px; font-size: 13.5px;
  opacity: 0; pointer-events: none; transition: all .25s; z-index: 100;
  box-shadow: 0 14px 36px rgba(0,0,0,.5); max-width: 80vw; text-align: center;
  white-space: pre-line; line-height: 1.55; } /* e291：支持 \n 多行（权限指引步骤） */
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { border-color: rgba(240,84,95,.5); color: #ffb3b8;
  text-align: left; max-width: 88vw; white-space: pre-line; } /* e291：错误指引左对齐、更宽、可换行 */
.toast.ok { border-color: rgba(47,191,113,.5); color: #9af0c4; }

/* 响应式 */
@media (max-width: 900px) { .table-wrap { grid-template-columns: 1fr; grid-template-rows: 1fr auto; padding: 10px; gap: 10px; }
  .side { flex-direction: row; flex-wrap: wrap; align-content: flex-start; }
  .side .panel { flex: 1; max-height: 150px; }
  .side .room-chat-panel { flex: 1 1 100%; max-height: 118px; }
  .suit-card .suit-sym { font-size: 38px; }
  .suit-grid { --joker-d: 106px; }
  .suit-card.joker .suit-sym { font-size: 28px; }
  .suit-total { font-size: 15px; }
  .lobby { padding: 16px; }
  .room-list { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
.topbar { padding: 0 10px; gap: 8px; }
.wallet-item i { display: none; }
.suit-grid { gap: 7px; }
.suit-card { padding: 10px 4px; }
.suit-card .suit-sym { font-size: 30px; }
.suit-name { font-size: 11px; }
.suit-card.joker .suit-sym { font-size: 28px; }
.bp-keys { gap: 5px; }
.bp-key { padding: 9px 4px; font-size: 12.5px; }
.chip { min-width: 44px; padding: 8px 10px; font-size: 12px; }
.bet-bar { flex-wrap: wrap; }
.hashbar { font-size: 11px; }}

/* ───────────── 盲注与公平模式 ───────────── */
.blind-note { display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 10px; font-size: 12.5px;
  background: rgba(120, 90, 255, .14);
  border: 1px dashed rgba(150, 120, 255, .45);
  color: #c9bcff; }
.blind-note[hidden] { display: none; }
.bp-seed { margin-bottom: 10px; }
.bp-seed-text { margin: 0 0 8px; font-size: 12.5px; line-height: 1.75;
  color: rgba(255,255,255,.66);
  background: rgba(0,0,0,.22); border-radius: 9px; padding: 9px 11px; }
.bp-seed-text b { color: var(--gold); }
.seed-codes { display: flex; flex-direction: column; gap: 4px; }
.seed-codes code { font-family: ui-monospace, Menlo, monospace; font-size: 11px;
  color: rgba(255,255,255,.45);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suit-card.locked .suit-total { color: rgba(255,255,255,.35); font-size: 20px; letter-spacing: 2px; }
.hb-more { margin-left: auto; color: var(--gold); font-size: 11.5px; white-space: nowrap; opacity: .8; }
.hashbar { cursor: pointer; }
.hashbar:hover .hb-more { opacity: 1; }
.mode-badge { font-size: 10px; padding: 2px 7px; border-radius: 6px; margin-left: 6px;
  background: rgba(120, 90, 255, .18); color: #b5a4ff; border: 1px solid rgba(150,120,255,.35); }
.mode-badge.manual { background: rgba(237,190,76,.14); color: var(--gold); border-color: rgba(237,190,76,.3); }

/* 验证弹窗 */
.proof-block { background: #0b1119; border: 1px solid var(--line); border-radius: 10px;
  padding: 12px; margin-bottom: 10px; font-size: 12px; line-height: 1.9; }
.proof-block .pf-row { display: flex; gap: 8px; }
.proof-block .pf-k { color: var(--muted); flex: 0 0 96px; }
.proof-block .pf-v { font-family: ui-monospace, Menlo, monospace; font-size: 11px;
  color: #cfe0f5; word-break: break-all; flex: 1; }
.proof-ok { color: var(--green); font-weight: 700; }
.proof-bad { color: var(--red); font-weight: 700; }
.proof-formula { font-family: ui-monospace, Menlo, monospace; font-size: 11px;
  background: rgba(237,190,76,.08); border-left: 2px solid var(--gold);
  padding: 8px 10px; border-radius: 0 6px 6px 0; color: #e2cf9a;
  margin-bottom: 12px; word-break: break-all; }

/* 模式选择卡 */
.mode-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.mode-opt { border: 1.5px solid var(--line); border-radius: 12px; padding: 12px;
  background: rgba(255,255,255,.02); cursor: pointer; transition: all .15s; }
.mode-opt:hover { border-color: rgba(237,190,76,.4); }
.mode-opt.on { border-color: var(--gold); background: rgba(237,190,76,.1); }
.mode-opt b { display: block; font-size: 13.5px; margin-bottom: 5px; }
.mode-opt span { font-size: 11.5px; color: var(--muted); line-height: 1.6; }
.mode-opt .tag { font-size: 10px; color: var(--green); display: block; margin-top: 6px; }

/* ───────────── 自定义快捷筹码 ───────────── */
.chips-wrap { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.chip-custom-group { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-custom { width: 88px; padding: 9px 10px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(0,0,0,.28);
  color: var(--text); font-size: 13px; outline: none; }
.chip-custom:focus { border-color: var(--gold); }
.chip-custom::placeholder { color: var(--muted); }
.chip-custom::-webkit-outer-spin-button, .chip-custom::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.chip-custom { -moz-appearance: textfield; appearance: textfield; }
.chip-edit { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  border: 1px dashed rgba(237,190,76,.45); background: rgba(237,190,76,.08);
  color: var(--gold); font-size: 14px; cursor: pointer; transition: background .15s; }
.chip-edit:hover { background: rgba(237,190,76,.18); }
.hint.subtle { color: rgba(255,255,255,.34); font-size: 11.5px; margin-top: 6px; }

/* ───────────── 公告条 ───────────── */
.announce { margin: 0; padding: 9px 18px; font-size: 12.5px;
  background: linear-gradient(90deg, rgba(237,190,76,.16), rgba(237,190,76,.03));
  border-bottom: 1px solid rgba(237,190,76,.22);
  color: #f0dca6; display: flex; gap: 8px; align-items: center; }
.announce[hidden] { display: none; }
.announce .ann-horn { filter: drop-shadow(0 0 4px rgba(237,190,76,.35)); }
.icon-btn { width: 34px; padding: 0 !important; font-size: 15px; }
.icon-btn.off { opacity: .42; }

/* ───────────── 背景音乐按钮：全页面可见 + 静音红色角标 ───────────── */
.js-music-btn { position: relative; }
.js-music-btn.off { opacity: .85; } /* 关闭时按钮本体保持醒目，状态靠红色静音角标表达 */
.js-music-btn .mute-flag { position: absolute; right: -5px; bottom: -5px;
  width: 15px; height: 15px; display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.music-fab { position: fixed; top: 14px; left: 16px; z-index: 60;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; padding: 0;
  font-size: 17px; color: var(--gold);
  background: rgba(20,27,38,.92); border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.music-fab .mute-flag { width: 17px; height: 17px; right: -2px; bottom: -2px; }

/* ───────────── 个人中心 ───────────── */
.profile-wrap { flex: 1 1 auto; min-height: 0; height: auto; overflow-y: auto;
  padding: 22px 24px 60px; max-width: 1040px; margin: 0 auto; width: 100%;
  -webkit-overflow-scrolling: touch; }
.profile-hero { display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(135deg, #182231, #121a26);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 10px; }
/* e241：头部一行 = 头像在左 + 昵称/账号行与头像水平同排（垂直居中） */
.pf-head { display: flex; align-items: center; gap: 10px; min-width: 0; width: 100%; box-sizing: border-box; }
.pf-head .pf-name { flex: 1 1 auto; min-width: 0; }
.pf-head .avatar-wrap { margin: 0; }
.avatar { width: 66px; height: 66px; border-radius: 20px; flex: 0 0 66px;
  display: grid; place-items: center; font-size: 26px; font-weight: 800;
  background: linear-gradient(135deg, #f0cc6a, #c9962a); color: #2a1f04;
  box-shadow: 0 10px 24px rgba(237,190,76,.22); }
.pf-name { font-size: 20px; font-weight: 700; letter-spacing: .5px; }
.pf-wallet { display: flex; gap: 22px; }
.pf-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px 16px; margin-bottom: 10px; }
.pf-card h4 { font-size: 13px; margin-bottom: 14px; font-weight: 700; display: flex; gap: 8px; align-items: baseline; }
.pf-card h4 .muted { font-size: 11px; font-weight: 400; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat-cell { background: rgba(0,0,0,.2); border-radius: 10px; padding: 11px 12px; }
.stat-cell span { display: block; font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.stat-cell b { font-size: 16px; font-variant-numeric: tabular-nums; }
.stat-cell b.pos { color: var(--green); }
.stat-cell b.neg { color: var(--red); }
.pf-card .field { margin-bottom: 10px; }
.pf-card .field label { font-size: 11px; color: var(--muted); display: block; margin-bottom: 5px; }
.pf-card .field input { width: 100%; padding: 9px 11px; border-radius: 9px; background: #0b1119;
  border: 1px solid var(--line); color: var(--ink); font-size: 13px; outline: none; }
.pf-card .field input:focus { border-color: var(--gold); }
.pf-actions { display: flex; gap: 10px; margin-top: 12px; }
.pf-rooms { display: flex; flex-direction: column; gap: 8px; }
.pf-room-row { display: grid; grid-template-columns: 1fr 70px 100px 100px 100px 16px;
  gap: 10px; align-items: center; font-size: 12.5px;
  padding: 9px 12px; border-radius: 10px; background: rgba(0,0,0,.18); }
.pf-room-row.head { background: none; color: var(--muted); font-size: 11px; padding-top: 0; }
.pf-legacy-note { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.04); color: var(--muted, #8fa1b5); font-size: 11px; line-height: 1.6; }
/* 房间名较长（如「真五门519084」）时省略显示，悬停可看完整名 */
.pf-room-row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* e238：注单查询——房间行按钮化，点击展开逐局注单 */
.pf-room-item { display: flex; flex-direction: column; gap: 6px; }
.pf-room-btn { appearance: none; border: 0; width: 100%; min-width: 0;
  text-align: left; cursor: pointer; color: inherit; font: inherit;
  transition: background .15s; }
.pf-room-btn:hover { background: rgba(0,0,0,.3); }
.pf-room-caret { color: var(--muted); font-size: 11px; text-align: right; transition: transform .15s; }
.pf-room-item.open .pf-room-caret { transform: rotate(90deg); color: var(--gold); }
.pf-room-detail { padding: 0 4px 2px; display: flex; flex-direction: column; gap: 6px; }
.pf-room-detail[hidden] { display: none; }
.pf-room-loading { color: var(--muted); font-size: 11.5px; padding: 4px 2px; }
/* e248：注单查询逐局明细，与房间内「本房下注」结算卡同款：
   ① 第N局·开X门 + 时间  ② 五门各注额  ③ 投注 + 本局净输赢（涨红跌绿） */
.pf-round { padding: 8px 10px; border-radius: 9px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); }
.pf-round-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 12px; color: #cddcf0; }
.pf-round-top > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-round-t { color: var(--muted); font-size: 11px; flex: 0 0 auto; }
.pf-round-top .hit { font-style: normal; color: var(--green); font-size: 11px; margin-left: 6px; }
.pf-round-bets { margin: 5px 0; font-size: 12.5px; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow-x: auto; }
.pf-round-bot { display: flex; justify-content: space-between; gap: 6px; font-size: 11.5px; color: #9fb2cc; font-variant-numeric: tabular-nums; }
.pf-round-net.win { color: #ff8b93; }   /* 赢=红，涨红跌绿 */
.pf-round-net.lose { color: #5fd08a; }
.pf-empty { color: var(--muted); font-size: 12.5px; padding: 14px 0; text-align: center; }

/* e250：个人中心「充值记录 / 提现记录」独立列表 —— 两行式，手机端状态不隐藏、长单号可换行 */
.pf-rec-list { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; -webkit-overflow-scrolling: touch; }
.pf-rec-row { padding: 9px 11px; border-radius: 9px; background: rgba(0,0,0,.15); border: 1px solid var(--line); font-size: 12.5px; }
.pf-rec-l1, .pf-rec-l2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pf-rec-l1 .t { color: var(--muted); font-size: 11.5px; margin-left: auto; white-space: nowrap; }
.pf-rec-l2 { margin-top: 6px; }
.pf-rec-money { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-rec-pts { margin-left: auto; flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--muted); }
.pf-rec-pts.pos { color: var(--green); }
.pf-rec-pts.neg { color: var(--red); }
.pf-rec-meta { margin-top: 5px; font-size: 11px; color: var(--muted); word-break: break-all; }
.pf-rec-meta .wd-ord-id { cursor: pointer; color: #9fb2cc; text-decoration: underline dotted; }
.pf-rec-memo { margin-top: 5px; font-size: 11.5px; color: #f0a35e; word-break: break-all; }
/* e251：充值前 / 后余额（上分那一刻的账户余额，不是当前余额） */
.pf-rec-bal { margin-top: 5px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pf-rec-bal b { color: var(--ink); font-weight: 600; }
.pf-rec-bal b.pos { color: var(--green); }
.pf-rec-bal .muted { font-size: 10.5px; }
@media (max-width: 640px) {
.pf-rec-list { max-height: none; }}

@media (max-width: 860px) {
.profile-hero { flex-wrap: wrap; }
.pf-wallet { border-left: 0; padding-left: 0; }}

/* 充值弹窗 */
.rc-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.rc-tier { border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 8px;
  text-align: center; cursor: pointer; transition: all .15s; background: rgba(255,255,255,.02); }
.rc-tier:hover { border-color: rgba(237,190,76,.45); }
.rc-tier.on { border-color: var(--gold); background: rgba(237,190,76,.12); }
.rc-tier b { display: block; font-size: 16px; }
.rc-tier span { font-size: 11px; color: var(--muted); }
.rc-scan { display: flex; gap: 14px; align-items: center; padding: 12px;
  background: rgba(0,0,0,.22); border-radius: 12px; margin-top: 12px; }
.rc-scan img { width: 108px; height: 108px; object-fit: contain; border-radius: 8px; background: #fff; }
.rc-scan .rc-scan-tip { font-size: 11.5px; color: var(--muted); line-height: 1.9; }
/* 按支付方式展示的收款信息面板（账号/卡号/地址 + 收款码） */
.rc-paybox { display: flex; gap: 14px; align-items: flex-start; padding: 12px;
  background: rgba(0,0,0,.22); border-radius: 12px; margin-top: 6px; }
/* 二维码灰框：码图 + 底部「扫描二维码进行支付」提示，整体与上方文字顶部齐平 */
.rc-qr { display: flex; flex-direction: column; align-items: center; gap: 7px;
  flex: 0 0 auto; background: #43484f; border-radius: 10px; padding: 10px;
  margin-top: 5px; /* 抵消右侧文字行高的半行留白，使灰框顶边与文字首行顶边齐平 */ }
.rc-qr img { width: 104px; height: 104px; object-fit: contain; border-radius: 6px; background: #fff; display: block; }
.rc-qr-tip { font-size: 11px; color: #edbe4c; white-space: nowrap; }
.rc-paybox .rc-scan-tip { font-size: 11.5px; color: var(--muted); line-height: 1.9; word-break: break-all; }
.rc-paybox .rc-scan-tip b { color: #edbe4c; }
@media (max-width: 480px) {
.rc-qr { padding: 8px; gap: 5px; }
.rc-qr img { width: 92px; height: 92px; }
.rc-qr-tip { font-size: 10px; }}

/* USDT 货币兑换换算器（收款信息下方，USDT ⇄ 人民币双向联动） */
.rc-conv { margin-top: 10px; padding: 12px 14px;
  background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; }
/* 头部：标题 + 两条汇率强制同一行，space-between 自动适配间隔距离 */
.rc-conv-head { display: flex; flex-wrap: nowrap; align-items: baseline; justify-content: space-between; gap: 4px 8px; margin-bottom: 10px; }
.rc-conv-title { font-size: 12.5px; color: #cfd8e3; white-space: nowrap; flex: 0 0 auto; }
.rc-conv-rate { font-size: 12px; color: #edbe4c; white-space: nowrap; }
.rc-conv-row { display: flex; gap: 10px; align-items: center; }
.rc-conv-box { display: flex; align-items: center; gap: 6px; flex: 1 1 0; min-width: 0;
  background: #0a1119; border: 1px solid #24344a; border-radius: 10px; padding: 7px 10px; }
.rc-conv-box:focus-within { border-color: rgba(237,190,76,.55); }
.rc-conv-ic { display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; font-size: 13px; font-weight: 700; color: #fff; flex: 0 0 auto; }
.rc-conv-ic.usdt { background: #26a17b; }
.rc-conv-ic.cny { background: #de2910; font-size: 12px; }
.rc-conv-name { font-size: 13px; color: #e8eef7; flex: 0 0 auto; }
.rc-conv-box input { flex: 1 1 auto; min-width: 0; border: none; outline: none; background: transparent;
  color: #e8eef7; font-size: 14px; padding: 4px 2px; }
.rc-conv-swap { font-size: 20px; color: #8fa3b8; flex: 0 0 auto; }
/* 窄屏：换算框保持同一行不堆叠，自动收缩图标/字号/间距避免文字截断 */
@media (max-width: 480px) { .rc-conv { padding: 10px 10px; }
  .rc-conv-title { font-size: 11px; }
  .rc-conv-rate { font-size: 10.5px; }
  .rc-conv-row { gap: 6px; }
  .rc-conv-box { gap: 4px; padding: 6px 8px; }
  .rc-conv-ic { width: 22px; height: 22px; font-size: 11px; }
  .rc-conv-name { font-size: 11.5px; }
  .rc-conv-box input { font-size: 13px; }
  .rc-conv-swap { font-size: 16px; } }

/* 音乐被浏览器自动播放策略拦住时，按钮轻微脉冲提示「点我」 */
.icon-btn.nudge { animation: music-nudge 1.9s ease-in-out infinite;
  border-color: rgba(237,190,76,.5);
  color: var(--gold); }
@keyframes music-nudge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(237,190,76,0); }
  50%      { box-shadow: 0 0 0 5px rgba(237,190,76,.14); }
}

/* ───────────── 声音设置（个人中心） ───────────── */
.sound-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 4px; }
.sound-row { display: grid; grid-template-columns: 84px 1fr 54px; align-items: center; gap: 12px; }
.sound-name { font-size: 12.5px; color: var(--ink); white-space: nowrap; }
.sound-val { font-size: 12px; color: var(--gold); text-align: right;
  font-variant-numeric: tabular-nums; font-weight: 600; }

/* 开关 */
.switch { width: 46px; height: 25px; border-radius: 13px; padding: 0; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255,255,255,.07);
  position: relative; justify-self: start;
  transition: background .16s, border-color .16s; }
.switch i { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%;
  background: #7b8697; transition: transform .18s, background .18s; }
.switch.on { background: rgba(237,190,76,.22); border-color: rgba(237,190,76,.55); }
.switch.on i { transform: translateX(21px); background: var(--gold); }
.switch:hover { border-color: rgba(237,190,76,.45); }

/* 滑块 */
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
  border-radius: 2px; outline: none; cursor: pointer;
  background: rgba(255,255,255,.13); }
.slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--gold); border: 2px solid #121821;
  box-shadow: 0 0 0 3px rgba(237,190,76,.14);
  cursor: pointer; margin-top: -0.5px; }
.slider::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%;
  background: var(--gold); border: 2px solid #121821; cursor: pointer; }
.slider:disabled { opacity: .35; cursor: not-allowed; }
.slider:disabled::-webkit-slider-thumb { background: #6d7686; cursor: not-allowed; }

/* ───────────── 同机双开（多账号测试） ───────────── */
#viewLogin { overflow-y: auto; padding: 24px 16px; }
.login-wrap { margin: auto; }
.wallet-item.who b { color: var(--ink); max-width: 96px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }


/* ───────────── 注册页 ───────────── */
#viewRegister { align-items: center; justify-content: center; overflow-y: auto; }
#viewRegister .login-wrap { margin: auto; }
.login-card .hint a { text-decoration: none; font-weight: 600; }
.login-card .hint a:hover { text-decoration: underline; }

/* ───────────── 大厅公告栏 ───────────── */
.announce { padding: 10px 18px; font-size: 13px;
  background: linear-gradient(90deg, rgba(237,190,76,.2), rgba(237,190,76,.04) 60%);
  border-bottom: 1px solid rgba(237,190,76,.3); }
.announce b, .announce strong { color: var(--gold); }

/* ───────────── 客服按钮红点 ───────────── */
.btn { position: relative; }
.dot-badge { position: absolute; top: -4px; right: -4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--red); border: 2px solid var(--bg); }

/* ───────────── 客服聊天 ───────────── */
.chat-log { height: 320px; overflow-y: auto; padding: 4px 2px;
  display: flex; flex-direction: column; gap: 10px;
  background: rgba(0,0,0,.25); border: 1px solid var(--line);
  border-radius: 12px; margin-bottom: 12px; }
.chat-msg { display: flex; }
.chat-msg.mine { justify-content: flex-end; }
.chat-msg .bubble { max-width: 78%; padding: 9px 12px; border-radius: 12px;
  font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.chat-msg.cs .bubble { background: rgba(255,255,255,.07); border: 1px solid var(--line);
  border-top-left-radius: 4px; color: var(--ink); }
.chat-msg.mine .bubble { background: linear-gradient(180deg, #f7d374, var(--gold));
  color: #2a1e00; border-top-right-radius: 4px; font-weight: 500; }
.chat-msg .bubble .t { display: block; font-style: normal; font-size: 10.5px; margin-top: 4px;
  opacity: .55; text-align: right; }
.chat-input { display: flex; gap: 8px; }

/* ── 客服聊天增强：发送者标注 / 工具条 / 表情面板 / 图片与文件 ── */
.chat-sender { font-size: 10.5px; color: var(--muted); margin-bottom: 3px;
  padding: 0 4px; }
.chat-msg.mine .chat-sender { text-align: right; }
.chat-tools { display: flex; gap: 2px; margin: 6px 0 2px; }
.chat-tools button { width: 34px; height: 30px; border: none; background: transparent;
  font-size: 17px; cursor: pointer; border-radius: 8px; line-height: 1;
  transition: background .15s; }
.chat-tools button:hover { background: rgba(255,255,255,.08); }
.chat-emoji { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
  background: #0b1119; border: 1px solid var(--line); border-radius: 10px;
  padding: 6px; margin: 2px 0 6px; max-height: 132px; overflow-y: auto; }
.chat-emoji[hidden] { display: none; }
.chat-emoji button { border: none; background: transparent; font-size: 18px; cursor: pointer;
  padding: 4px 0; border-radius: 6px; line-height: 1; }
.chat-emoji button:hover { background: rgba(255,255,255,.08); }
.chat-img { display: block; max-width: 180px; max-height: 180px; border-radius: 8px;
  margin-bottom: 2px; cursor: zoom-in; }
.chat-file { display: inline-block; color: var(--gold, #edbe4c); text-decoration: none;
  font-size: 13px; padding: 6px 10px; background: rgba(237,190,76,.1);
  border: 1px solid rgba(237,190,76,.3); border-radius: 8px; }
/* 自己的金色气泡里，附件链接改用深色保证可读 */
.chat-msg.mine .chat-file { color: #1a2230; background: rgba(255,255,255,.55); border-color: rgba(0,0,0,.15); }
.chat-cap { font-size: 12.5px; margin-top: 3px; word-break: break-all; }
.chat-input input { flex: 1; padding: 11px 13px; border-radius: 10px;
  background: #0b1119; border: 1px solid var(--line); color: var(--ink);
  font-size: 14px; outline: none; transition: border-color .15s; }
.chat-input input:focus { border-color: var(--gold); }

/* ───────────── 花色卡赔率角标 ───────────── */
.suit-card { position: relative; }
.suit-odds { position: absolute; top: 8px; right: 10px;
  font-size: 11px; font-weight: 700; color: var(--gold);
  background: rgba(237,190,76,.12); border: 1px solid rgba(237,190,76,.35);
  border-radius: 999px; padding: 1px 7px;
  font-variant-numeric: tabular-nums; }

/* ───────────── 头像更换 ───────────── */
.avatar-wrap { position: relative; flex: 0 0 66px; width: 66px; height: 66px;
  cursor: pointer; border-radius: 20px; }
.avatar-wrap .avatar { width: 100%; height: 100%; }
.avatar-edit { position: absolute; left: 0; right: 0; bottom: 0;
  font-size: 10px; text-align: center; padding: 2px 0 3px;
  color: #fff; background: rgba(0,0,0,.55);
  border-radius: 0 0 20px 20px; opacity: 0; transition: opacity .15s;
  pointer-events: none; }
.avatar-wrap:hover .avatar-edit { opacity: 1; }
.avatar-wrap:hover .avatar { filter: brightness(.85); }

/* ───────────── 昵称就地编辑 ───────────── */
.pf-name { cursor: pointer; display: flex; align-items: center; gap: 8px; }
.pf-name:hover { color: var(--gold); }
.pf-name-edit { font-size: 13px; opacity: .45; font-weight: 400; }
.pf-name:hover .pf-name-edit { opacity: 1; }
.pf-name-editor { display: flex; align-items: center; gap: 6px; }
.pf-name-editor input { width: 150px; padding: 5px 9px; border-radius: 8px;
  background: #0b1119; border: 1px solid var(--gold);
  color: var(--ink); font-size: 16px; font-weight: 700; outline: none; }

/* 编辑昵称时不挤压右侧余额：钱包列不缩、金额不换行 */
.pf-wallet { flex: 0 0 auto; }
.pf-name-editor input { width: 120px; }

/* ════════════════════════════════════════════════════════════
   H5 多屏自适应
   目标：手机竖屏 / 手机横屏 / 平板 / 桌面上都能正常显示，
        刘海屏不被遮挡、地址栏不吞掉底栏、输入框不触发 iOS 缩放。
   ════════════════════════════════════════════════════════════ */

/* ① 视口高度：用 dvh 跟住手机浏览器地址栏的伸缩，老浏览器退回 100% */
@supports (height: 100dvh) { html, body { height: 100dvh; } }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overscroll-behavior: none; }

/* 顶栏钱包的两组内容在桌面是「透明」的，不改变原有排版 */
.wallet-nums { display: contents; }

/* 滚动容器统一用惯性滚动 */
.lobby, .profile-wrap, .seat-list, .history-list, .chat-log { -webkit-overflow-scrolling: touch; }

/* 触摸设备：去掉 hover 抬升，避免点完一直「悬空」 */
@media (hover: none) { .room-card:hover, .suit-card:hover, .mode-opt:hover, .rc-tier:hover, .bp-key:hover,
  .chip:hover, .switch:hover, .avatar-wrap:hover .avatar { transform: none; filter: none; }
  .room-card:hover { border-color: var(--line); }
  .suit-card:hover { border-color: rgba(255,255,255,.14); box-shadow: none; }
  .btn:active { transform: scale(.97); }
  .room-card:active { transform: scale(.995); border-color: rgba(237,190,76,.5); }
  .suit-card:active { transform: scale(.98); }
  /* 大王圆卡：触摸设备同样保住定位位移 */
  .suit-card.joker:hover { transform: translate(-50%, -50%); border-color: rgba(237,190,76,.55); }
  .suit-card.joker:active { transform: translate(-50%, -50%) scale(.97); } }

/* ② 手机竖屏（≤720px）：顶栏两行、花色 2×2、底栏贴安全区 */
@media (max-width: 720px) { body { font-size: 14px; }
  .topbar { height: 50px; flex-basis: 50px; gap: 8px; padding: 0 10px; }

  /* 大厅新页眉：头像+昵称+余额 单行，右侧图标操作 */
  #viewLobby .home-topbar { flex-wrap: nowrap; gap: 8px;
    padding: calc(6px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 6px calc(10px + env(safe-area-inset-left)); }
  #viewLobby .home-avatar { width: 38px; height: 38px; flex-basis: 38px; font-size: 15px; }
  #viewLobby .ha-btn { height: 32px; padding: 0 10px; }
  #viewLobby .ha-btn.js-music-btn { width: 32px; }
  #viewLobby #homeNick { max-width: 92px; }

  .wallet-item { padding: 4px 8px; font-size: 12px; }
  .wallet-item.who b { max-width: 64px; }
  .btn.sm { padding: 6px 10px; font-size: 12px; min-height: 32px; }

  /* 房间页顶栏：窄屏下与首页同样单行收缩，房间名截断、操作条不换行 */
  #viewRoom .room-left { gap: 6px; }
  #viewRoom .room-left #roomName { max-width: 72px; }
  #viewRoom .home-actions { gap: 6px; }
  #viewRoom .ha-btn { height: 32px; padding: 0 9px; font-size: 11.5px; }
  #viewRoom .ha-btn.js-music-btn { width: 32px; }
  .icon-btn { width: 32px; }
  .room-title { min-width: 0; font-size: 13px; gap: 6px; }
  .room-title span { display: none; }
  .room-title b { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .announce { padding: 7px 12px; font-size: 12px; }

  /* 大厅 */
  .lobby { padding: 12px 12px 16px; }
  .lobby-head { flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
  .lobby-head h2 { font-size: 20px; letter-spacing: 2px; }
  .room-list { grid-template-columns: 1fr; gap: 10px; }
  .room-card { padding: 13px; }
  .rules { margin-top: auto; padding: 14px 16px; }
  .rules ol { font-size: 12.5px; line-height: 1.9; }

  /* 牌桌：花色两列两行，拇指好点 */
  .table-wrap { padding: 8px; gap: 8px; }
  .felt { padding: 10px; gap: 8px; border-radius: 16px; }
  .suit-grid { grid-template-columns: 1fr 1fr; gap: 8px; --joker-d: 102px; }
  /* 2×2 缝合线扇区（0°=正上方顺时针）：黑桃左上(270-360)、红心右上(0-90)、梅花左下(180-270)、方块右下(90-180) */
  .suit-grid .joker-seam[data-hit="spade"]   { --sf: 270deg; --sl: 90deg; }
  .suit-grid .joker-seam[data-hit="heart"]   { --sf: 0deg;   --sl: 90deg; }
  .suit-grid .joker-seam[data-hit="club"]    { --sf: 180deg; --sl: 90deg; }
  .suit-grid .joker-seam[data-hit="diamond"] { --sf: 90deg;  --sl: 90deg; }
  /* 2×2 中缝在四轴：淡色缝合弧在 0/90/180/270 各挖缺口，四卡弧段独立断开 */
  .suit-grid:not(.jokerless)::before {
    -webkit-mask-image: conic-gradient(transparent 0deg var(--w), #000 var(--w) calc(90deg - var(--w)), transparent calc(90deg - var(--w)) calc(90deg + var(--w)), #000 calc(90deg + var(--w)) calc(180deg - var(--w)), transparent calc(180deg - var(--w)) calc(180deg + var(--w)), #000 calc(180deg + var(--w)) calc(270deg - var(--w)), transparent calc(270deg - var(--w)) calc(270deg + var(--w)), #000 calc(270deg + var(--w)) calc(360deg - var(--w)), transparent calc(360deg - var(--w)));
    mask-image: conic-gradient(transparent 0deg var(--w), #000 var(--w) calc(90deg - var(--w)), transparent calc(90deg - var(--w)) calc(90deg + var(--w)), #000 calc(90deg + var(--w)) calc(180deg - var(--w)), transparent calc(180deg - var(--w)) calc(180deg + var(--w)), #000 calc(180deg + var(--w)) calc(270deg - var(--w)), transparent calc(270deg - var(--w)) calc(270deg + var(--w)), #000 calc(270deg + var(--w)) calc(360deg - var(--w)), transparent calc(360deg - var(--w)));
  }
  .suit-card { padding: 10px 6px; min-height: 92px; }
  .suit-card .suit-sym { font-size: 34px; }
  .suit-name { font-size: 11.5px; }
  .suit-total { font-size: 16px; }
  .suit-mine { font-size: 11px; }
  .suit-odds { top: 6px; right: 7px; font-size: 10px; padding: 1px 6px; }
  .table-head { gap: 8px; font-size: 12px; }
  /* 手机上限红规则说明单行省略号（完整规则长按/悬浮可见），保证整行不折行 */
  .table-head .rule-note { font-size: 11px; }
  .phase-pill { padding: 3px 9px; font-size: 11px; }
  #cdText { font-size: 11.5px; padding: 2px 8px; }
  .banker-strip { font-size: 11.5px; padding: 6px 10px; gap: 7px; }
  .bs-hash { display: none; }
  .bp-keys { gap: 6px; }
  .bp-key { padding: 9px 4px; font-size: 12.5px; }
  .bp-secs { flex-wrap: wrap; }
  .bp-row { gap: 8px; }
  .bp-row .btn { margin-left: 0; width: 100%; }
  .bp-host .btn { width: auto; flex: 1 1 0; min-width: 0; padding: 7px 8px; font-size: 12px; }
  .bp-host-state { font-size: 10.5px; }
  .host-cd { font-size: 12px; padding: 2px 7px; }
  .bp-host-confirm { gap: 6px; padding: 7px 8px; }
  /* 大厅「我的房间」窄屏改两行 */
  .myroom { flex-wrap: wrap; padding: 9px 10px; }
  .mr-acts { width: 100%; justify-content: flex-end; }
  .mr-acts .btn { padding: 6px 10px; font-size: 12px; }
  .hq-suit { width: 34px; height: 28px; font-size: 13px; }
  .hq-no { width: 46px; font-size: 11px; }
  .side { flex-direction: row; gap: 8px; flex-wrap: wrap; align-content: flex-start; }
  .side .panel { max-height: 104px; padding: 8px 10px; }
  .side .room-chat-panel { flex: 1 1 100%; max-height: 118px; }
  .panel-title { margin-bottom: 6px; }

  /* 底栏：留出 iPhone 底部横条 */
  .hashbar {
    height: auto; min-height: 34px; font-size: 11px;
    padding: 5px 10px 6px;
    gap: 8px;
  }
  .hb-text { font-size: 10.5px; }
  .hb-more { font-size: 10.5px; }

  /* 下注栏：42px 以上的触摸目标 */
  .bet-bar { gap: 8px; flex-wrap: wrap; }
  .bet-mode-row { gap: 6px; }
  .bet-mode button { padding: 5px 11px; font-size: 12px; min-height: 30px; }
  /* 说明文字保持在模式条右侧同行，不再折到下一行 */
  .bet-mode-tip { font-size: 11px; }
  .chips-wrap { gap: 6px; }
  .chips { gap: 6px; }
  .chip { min-width: 48px; min-height: 38px; padding: 8px 10px; font-size: 12.5px; }
  .chip-custom { width: 66px; min-height: 38px; font-size: 13px; }
  .chip-edit { width: 38px; height: 38px; }
  .bet-actions { gap: 6px; }
  .bet-actions .btn { padding: 8px 12px; font-size: 12.5px; }

  /* 个人中心 */
  .profile-wrap { padding: 12px 12px 16px; }
  .profile-hero { padding: 12px 14px; gap: 8px; }
  .avatar-wrap, .avatar { width: 56px; height: 56px; border-radius: 16px; flex-basis: 56px; }
  .avatar-wrap { flex-basis: 56px; margin: 0; }
  .avatar { font-size: 22px; }
  .avatar-edit { opacity: .9; font-size: 9px; border-radius: 0 0 16px 16px; }
  .pf-name { font-size: 17px; }
  .pf-name-editor input { width: 96px; }
  .pf-wallet { gap: 14px; }
  .pf-money b { font-size: 18px; }
  .pf-card { padding: 13px 14px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat-cell b { font-size: 15px; }
  .pf-room-row { grid-template-columns: 1fr 46px 74px 74px 14px; gap: 6px; font-size: 12px; }
  .pf-room-row > span:nth-child(4) { display: none; }
  .pf-room-row.head > span:nth-child(4) { display: none; }
  .pf-ledger-row { grid-template-columns: 68px 1fr 74px; gap: 6px; font-size: 12px; }
  .pf-ledger-row > span:nth-child(4) { display: none; }
  .pf-ledger { max-height: none; }
  .sound-row { grid-template-columns: 76px 1fr 48px; gap: 10px; }
  .modal-actions .btn { padding: 11px 12px; }

  /* 弹窗 / 客服：限高可滚，键盘弹起也不会顶飞 */
  .modal { padding: 12px; }
  .modal-box { width: 100%; max-width: 460px; max-height: calc(100dvh - 24px); overflow-y: auto; padding: 16px; }
  .chat-log { height: min(300px, 42dvh); }
  .chat-input input { min-height: 42px; }
  .field input, .field select { min-height: 42px; }
  .rc-tiers { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .rc-tier { padding: 10px 6px; }
  .rc-scan img { width: 92px; height: 92px; }

  .toast { bottom: calc(76px + var(--tb-h)); font-size: 13px; padding: 10px 16px; max-width: 86vw; }

  /* iOS 上输入框 <16px 会整页放大，这里统一顶到 16px */
  input, select, textarea { font-size: 16px; }
  .chip-custom { font-size: 16px; }
  .pf-card .field input { font-size: 16px; }
  .login-card input { font-size: 16px; }
  .pf-name-editor input { font-size: 16px; }

  /* 登录 / 注册：小屏竖向压缩，保证按钮在首屏内 */
  #viewLogin, #viewRegister { padding: 16px 14px; justify-content: flex-start; }
  #viewLogin .login-wrap, #viewRegister .login-wrap { margin: auto; width: 100%; max-width: 420px; }
  .brand-cards { height: 56px; margin-bottom: 4px; }
  .bc { width: 40px; height: 54px; line-height: 54px; font-size: 22px; margin: 0 -7px; }
  .brand h1 { font-size: 26px; letter-spacing: 6px; margin: 10px 0 2px; }
  .brand-sub { font-size: 12px; margin-bottom: 16px; }
  .login-card { padding: 16px; border-radius: 14px; }
  .login-card input { margin: 6px 0 12px; padding: 11px 12px; }
  .login-card .btn { padding: 12px; } }

/* ③ 手机横屏（高度有限的机型，如 740×360 / 812×375）：全部压扁并排 */
@media (orientation: landscape) and (max-height: 540px) { body { font-size: 13px; }
  .topbar { height: 42px; flex-basis: 42px; padding: 0 8px; gap: 8px; }
  #viewLobby .topbar {
    height: 42px; flex-basis: 42px; flex-wrap: nowrap;
    padding: calc(0px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) 0 calc(8px + env(safe-area-inset-left));
  }
  #viewLobby .home-topbar { flex-wrap: nowrap; }
  #viewLobby .home-avatar { width: 34px; height: 34px; flex-basis: 34px; font-size: 13px; }
  #viewLobby .home-refresh { display: none; }
  #viewLobby .ha-btn { height: 30px; padding: 0 8px; font-size: 11px; }
  #viewLobby .ha-btn.js-music-btn { width: 30px; }
  #viewLobby .home-bal-label { display: none; }
  #viewLobby #homeNick { max-width: 80px; }
  .wallet-item { padding: 3px 7px; font-size: 11.5px; }
  .wallet-item i { display: none; }
  .btn.sm { padding: 5px 8px; font-size: 11.5px; min-height: 28px; }
  .icon-btn { width: 28px; }
  .room-title { font-size: 12.5px; }
  .room-title span { display: none; }
  .room-title b { max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .announce { padding: 4px 10px; font-size: 11px; }

  .lobby { padding: 8px 10px 14px; }
  .lobby-head { margin-bottom: 8px; }
  .lobby-head h2 { font-size: 18px; letter-spacing: 2px; }
  .room-list { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
  .room-card { padding: 10px 12px; }
  .rc-meta { gap: 8px; font-size: 11px; }
  .rules { display: none; }
  .empty { padding: 20px 0; }

  .table-wrap { grid-template-columns: 1fr 186px; grid-template-rows: 1fr; padding: 6px; gap: 6px; }
  .felt { padding: 7px 9px; gap: 6px; border-radius: 14px; }
  .table-head { font-size: 11.5px; gap: 8px; }
  .banker-strip { padding: 4px 8px; font-size: 11px; }
  .bs-hash { display: none; }
  .suit-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; --joker-d: 78px; }
  .suit-card { min-height: 0; padding: 6px 4px; }
  .suit-card .suit-sym { font-size: 26px; }
  .suit-card.joker .suit-sym { font-size: 19px; }
  .suit-card.joker .suit-name { font-size: 10.5px; }
  .suit-card.joker .suit-total { font-size: 11px; }
  .suit-name { font-size: 10.5px; }
  .suit-total { font-size: 14px; }
  .suit-mine { font-size: 10px; min-height: 12px; }
  .suit-odds { top: 4px; right: 5px; font-size: 9.5px; padding: 0 5px; }
  .bp-key { padding: 7px 4px; font-size: 12px; }
  .bp-row .btn { margin-left: auto; width: auto; }
  .side { flex-direction: column; gap: 6px; }
  .side .panel { max-height: none; padding: 7px 9px; flex: 1 1 auto; }
  .panel-title { margin-bottom: 5px; font-size: 11px; }
  .seat { padding: 5px 7px; gap: 6px; }
  .seat-avatar { width: 22px; height: 22px; flex-basis: 22px; font-size: 10px; }
  .seat-name { font-size: 12px; }
  .hashbar { height: 28px; min-height: 28px; padding: 0 10px; font-size: 10.5px; gap: 8px; }
  .hb-text { font-size: 10px; }
  .chip { min-width: 40px; min-height: 30px; padding: 5px 8px; font-size: 11.5px; }
  .chip-custom { width: 60px; min-height: 30px; font-size: 12px; }
  .chip-edit { width: 30px; height: 30px; font-size: 12px; }
  .bet-bar { gap: 8px; flex-wrap: nowrap; }
  .bet-actions .btn { padding: 5px 9px; font-size: 11.5px; }
  .chips { flex-wrap: wrap; }

  /* 登录 / 注册：横屏改成左右两栏，一屏放得下 */
  #viewLogin, #viewRegister {
    flex-direction: row; align-items: center; justify-content: center;
    padding: 10px 14px; overflow: auto;
  }
  #viewLogin .login-wrap, #viewRegister .login-wrap {
    margin: 0; width: auto; max-width: none;
    display: flex; align-items: center; gap: 26px; text-align: left;
  }
  .brand-cards { display: none; }
  .brand h1 { font-size: 24px; letter-spacing: 5px; margin: 0 0 6px; }
  .brand-sub { margin: 0; font-size: 11.5px; }
  .login-card { width: 330px; padding: 14px 16px; }
  .login-card input { margin: 5px 0 10px; padding: 9px 12px; }
  .hint { margin-top: 10px; }

  .profile-wrap { padding: 8px 10px 14px; }
  .profile-hero { padding: 10px 12px; gap: 7px; }
  .avatar-wrap, .avatar { width: 44px; height: 44px; flex-basis: 44px; border-radius: 14px; }
  .pf-name { font-size: 15px; }
  .pf-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pf-card { padding: 10px 12px; margin-bottom: 8px; }
  .pf-ledger { max-height: 96px; }
  .modal-box { max-height: calc(100dvh - 16px); overflow-y: auto; padding: 14px; }
  .chat-log { height: min(180px, 46dvh); }
  .rc-tiers { grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 8px 0; }
  .rc-tier { padding: 8px 4px; }
  .toast { bottom: calc(36px + var(--tb-h)); }
  input, select, textarea { font-size: 16px; } }

/* ④ 超窄屏（≤360 宽，如 iPhone SE / 老安卓）：再收一档 */
@media (max-width: 360px) { .btn.sm { padding: 6px 8px; font-size: 11.5px; }
  .wallet-item { padding: 4px 6px; font-size: 11.5px; }
  .suit-card { min-height: 82px; }
  .suit-card .suit-sym { font-size: 30px; }
  .suit-card.joker .suit-sym { font-size: 20px; }
  .chip { min-width: 44px; padding: 7px 8px; }
  .bet-actions .btn { padding: 8px 10px; } }

/* ⑤ 平板（721~1024）：花色仍四列，但整体留白收紧 */
@media (min-width: 721px) and (max-width: 1024px) { .topbar { padding: 0 14px; gap: 10px; }
  .lobby { padding: 18px 18px 32px; }
  .table-wrap { grid-template-columns: 1fr 240px; gap: 12px; padding: 12px; }
  .suit-card .suit-sym { font-size: 44px; }
  .profile-wrap { padding: 18px 18px 40px; } }

/* ⑥ 横屏时不因高度限制而裁掉底部操作（兜底可滚） */
@media (max-height: 460px) and (orientation: landscape) { .felt { overflow-y: auto; } }

/* 手机竖屏顶栏有两行空间，恢复 积分/房卡 文字标签（老规则在 ≤560px 隐藏了它们） */
@media (max-width: 720px) { .wallet-item i { display: inline; } }

/* 手机竖屏：下注栏改成「筹码一行 + 操作一行」，避免筹码被挤成竖排 */
@media (max-width: 720px) { .bet-bar { flex-direction: column; align-items: stretch; gap: 8px; }
  .chips-wrap { flex: 1 1 100%; width: 100%; }
  .chips { flex: 1 1 auto; }
  .bet-actions { margin-left: 0; justify-content: flex-end; }
  .bet-actions .btn { flex: 1 1 auto; } }

/* 修复：column + wrap 会变成多列布局，把操作按钮挤到屏幕外 → 竖屏下注栏禁止 wrap */
@media (max-width: 720px) { .bet-bar { flex-wrap: nowrap; }
  .chips { flex-wrap: wrap; } }

/* ── 历史对单：最近开奖可点击复算 ── */
.hist { cursor: pointer; transition: background .15s, border-color .15s; border: 1px solid transparent; }
.hist:hover { background: rgba(237,190,76,.08); border-color: rgba(237,190,76,.25); }
.hist-hash { color: var(--muted); font-size: 10px; font-family: ui-monospace, Consolas, monospace; opacity: .8; }
.proof-mono { font-family: ui-monospace, Consolas, monospace; font-size: 11px;
  word-break: break-all; color: #cfd8e6; }

/* ── 下注栏：余额显示 + 待确认下注（确定/取消/重复上次） ── */
.chip-balance { display: inline-flex; align-items: center; gap: 5px;
  min-width: 54px; padding: 9px 14px; border-radius: 999px;
  background: rgba(237,190,76,.10); border: 1.5px dashed rgba(237,190,76,.45);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.chip-balance i { font-style: normal; font-size: 11px; color: #b9a05a; }
.chip-balance b { font-size: 13px; color: var(--gold, #edbe4c); font-weight: 700; }
img.seat-avatar { object-fit: cover; }

/* ── 手机竖屏：下注操作按钮可换行，不挤爆 ── */
@media (max-width: 720px) { .bet-actions { flex-wrap: wrap; }
  .chip-balance { padding: 8px 10px; min-width: 0; }
  .chip-balance b { font-size: 12.5px; } }

/* ════════════════════════════════════════════════════════════
   手机竖屏二轮调优：
   ① 四门卡片均衡缩小上移，给座位/开奖记录腾更多空间
   ② 下注栏（余额+筹码+自定义）文字大小统一、排列整齐
   ════════════════════════════════════════════════════════════ */
@media (max-width: 720px) { /* 牌桌整体收紧行距 */
  .table-wrap { padding: 6px; gap: 6px; }
  .felt { padding: 7px 6px; gap: 6px; border-radius: 14px; }
  .table-head { font-size: 11.5px; gap: 6px; }
  .banker-strip { font-size: 11px; padding: 5px 9px; gap: 6px; }

  /* 四门：矮一截、上移，徽标/花色/文字等比缩小 */
  .suit-grid { gap: 6px; }
  .suit-card { min-height: 68px; padding: 6px 4px; border-radius: 12px; }
  .suit-card .suit-sym { font-size: 26px; }
  .suit-card.joker .suit-sym { font-size: 21px; }
  .suit-name { font-size: 10.5px; margin-top: 1px; }
  .suit-total { font-size: 13px; margin-top: 2px; }
  .suit-mine { font-size: 9.5px; min-height: 11px; }
  .suit-odds { top: 4px; right: 5px; font-size: 9px; padding: 0 5px; }

  /* 侧栏面板：高度放宽，多显示几行数据 */
  .side { gap: 6px; flex-wrap: wrap; align-content: flex-start; }
  .side .panel { max-height: 150px; padding: 7px 9px; }
  .side .room-chat-panel { max-height: 118px; }
  .seat { padding: 4px 7px; gap: 6px; }
  .seat-avatar { width: 20px; height: 20px; flex-basis: 20px; font-size: 9px; }
  .seat-name { font-size: 11.5px; }
  .seat-sub { font-size: 10px; }
  .hist { padding: 4px 7px; font-size: 11px; gap: 6px; }
  .hist-sym { font-size: 13px; }
  .hist-hash { font-size: 9px; }
  .panel-title { font-size: 11px; margin-bottom: 4px; }

  /* 下注栏：一行放得下 余额+全部筹码+自定义，字号统一 12px */
  .bet-bar { gap: 6px; }
  .chips-wrap { gap: 5px; }
  .chips { gap: 5px; }
  .chip { min-width: 40px; min-height: 32px; padding: 5px 9px; font-size: 12px; }
  .chip-custom { width: 58px; min-height: 32px; padding: 5px 8px; font-size: 12px; border-radius: 999px; }
  .chip-edit { width: 32px; height: 32px; font-size: 13px; }
  .chip-balance { padding: 5px 10px; gap: 4px; border-radius: 999px; }
  .chip-balance i { font-size: 10.5px; }
  .chip-balance b { font-size: 12px; }

  /* 操作按钮行：与筹码等高、字重一致 */
  .bet-actions { gap: 6px; }
  .bet-actions .btn { padding: 7px 10px; font-size: 12px; min-height: 32px; }

  /* 申请上庄横条也压矮 */
  .bp-row .btn { padding: 9px 12px; font-size: 13px; } }

/* 超窄屏（≤360）：筹码再小一号，保证一行不放就两行也整齐 */
@media (max-width: 360px) { .chip { min-width: 36px; padding: 5px 7px; font-size: 11.5px; }
  .chip-balance i { display: none; }
  .bet-actions .btn { padding: 6px 8px; font-size: 11.5px; } }

/* 竖屏：四门卡片按内容收缩（不再被 flex:1 拉高），省出的高度给侧栏数据 */
@media (max-width: 720px) { .suit-grid { flex: 0 0 auto; }
  .side .panel { max-height: 240px; } }

/* 竖屏下注栏最终定稿：一行放下 余额+四枚筹码+自定义，文字等高协调 */
@media (max-width: 720px) { .chip-balance i { display: none; }            /* 只显金色数字，title 里有说明 */
  .chip { min-width: 34px; min-height: 30px; padding: 4px 7px; font-size: 11.5px; }
  .chip-custom { width: 50px; min-height: 30px; padding: 4px 7px; font-size: 11.5px; }
  .chip-edit { width: 30px; height: 30px; font-size: 12px; }
  .chip-balance { padding: 4px 9px; }
  .chip-balance b { font-size: 11.5px; }
  .bet-actions { flex-wrap: nowrap; }
  .bet-actions .btn { padding: 6px 8px; font-size: 11.5px; min-height: 30px; }
  .bp-row .btn { padding: 8px 10px; font-size: 12.5px; }

  /* 开奖记录行不换行，哈希缩写让位 */
  .hist { white-space: nowrap; }
  .hist-hash { flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .hist-gain { flex-shrink: 0; } }

/* ── 第20轮修复（竖屏）──────────────────────────────────────
   ① 牌桌底部不再被拉出大块空白：grid 行高改为「牌桌按内容自适应、
      剩余高度全部给座位/开奖面板」，牌桌下边线紧贴「申请上庄」按钮下方
   ② 余额完整显示：恢复「余额」文字 + 金色数字，筹码组整体推到右侧
   ══════════════════════════════════════════════════════════ */
@media (max-width: 720px) { /* 牌桌按内容收缩，省出的高度给侧栏（座位 + 最近开奖） */
  .table-wrap { grid-template-rows: auto minmax(0, 1fr); }
  .felt { flex: 0 0 auto; min-height: 0; overflow-y: auto; }

  /* 余额胶囊：文字 + 数字完整显示，固定不压缩；筹码推到最右 */
  .chips-wrap { justify-content: flex-start; }
  .chip-balance { flex-shrink: 0; min-width: 0; padding: 4px 12px; margin-left: 8px; }
  .chip-balance i { display: inline; font-size: 12px; }
  .chip-balance b { font-size: 13.5px; }
  /* 筹码永不折行；放不下时「自定义+✎」整组掉到第二行（见下方 ≤430 段） */
  .chips { margin-left: auto; flex: 0 0 auto; justify-content: flex-end; flex-wrap: nowrap; }
  .chip-custom-group { gap: 5px; }
  .chip-custom { width: 50px; }

  /* 座位/最近开奖面板填满牌桌省出的剩余高度，内部各自滚动 */
  .side .panel { max-height: none; flex: 1 1 auto; min-height: 0; }
  .side .room-chat-panel { max-height: 118px; } /* 聊天窗不参与填满，保持紧凑 */ }

/* ── 窄屏自适应（≤430）：下注栏一行自适应排布 ──
   余额(左) + 四枚筹码 + 自定义 + ✎ 全部同一行；
   空间不足时筹码/自定义框等比收缩（min-width 兜底），不再掉到第二行 */
@media (max-width: 430px) { .chips-wrap { flex-wrap: nowrap; }
  .chips { flex: 0 1 auto; min-width: 0; }
  .chip { flex: 0 1 auto; min-width: 30px; padding: 4px 5px; }
  .chip-custom { width: 52px; min-width: 40px; }
  .chip-edit { width: 28px; flex-shrink: 0; }
  .chip-balance { flex-shrink: 0; } }

/* 超窄屏（≤360）：余额只显金色数字、筹码再小一号，一行仍然放得下 */
@media (max-width: 360px) { .chip-balance { flex-shrink: 1; min-width: 0; overflow: hidden; }
  .chip-balance i { display: none; }
  .chip-balance b { font-size: 11px; }
  .chip { min-width: 26px; padding: 4px 3px; font-size: 11px; }
  .chip-custom { width: 44px; min-width: 36px; font-size: 11px; }
  .chip-edit { width: 26px; height: 26px; font-size: 11px; }
  .chips-wrap { gap: 4px; }
  .chips { gap: 4px; } }

/* ════════════════════════════════════════════════════════════
   iPad 专项（第23轮）：统一按「横屏兼容」布局，不做手机竖屏适配
   ① 竖屏：全屏引导旋转，可选「仍以竖屏浏览」
   ② 牌桌/四门卡片按内容高度，不再纵向拉满（原来竖屏卡片被拉到 680px）
   ════════════════════════════════════════════════════════════ */

/* ① 竖屏旋转引导层 */
.rotate-hint { display: none; }
html.ipad-portrait .rotate-hint { position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 34px; text-align: center; color: #eaf2ff;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(47,191,113,.10), transparent 62%),
    linear-gradient(170deg, #0e1a15, #080b11 72%); }
html.ipad-portrait body { overflow: hidden; }
.rotate-hint h3 { margin: 0; font-size: 21px; letter-spacing: 1.5px; color: var(--gold, #edbe4c); }
.rotate-hint p { margin: 0; font-size: 13px; line-height: 1.8; color: rgba(255,255,255,.62); max-width: 330px; }
.rotate-hint .btn { margin-top: 6px; padding: 8px 18px; font-size: 12.5px; }
.rh-icon { color: var(--gold, #edbe4c); animation: rh-rotate 2.6s ease-in-out infinite; }
@keyframes rh-rotate {
  0%, 55% { transform: rotate(0deg); }
  78%, 100% { transform: rotate(-90deg); }
}

/* ② iPad 牌桌：按内容高度排布，空余高度留给座位/开奖面板 */
html.is-ipad .table-wrap { align-items: start; }
html.is-ipad .felt { align-self: start; }
html.is-ipad .suit-grid { flex: 0 0 auto; }
html.is-ipad .suit-card { min-height: clamp(130px, 32vh, 280px); }

/* ── 开奖徽标：赔付文案更长（到账/净赢），竖屏允许换行不溢出牌桌 ── */
@media (max-width: 720px) { .reveal-badge {
    white-space: normal; max-width: calc(100% - 22px); text-align: center;
    line-height: 1.45; font-size: 13.5px; padding: 8px 14px;
  } }

/* ── 对单弹窗：庄家锁定截图 ── */
.pf-shot-wrap { margin: 4px 0 10px; }
.pf-shot-title { font-size: 13px; font-weight: 600; color: #edbe4c; margin: 6px 0; }
.pf-shot { display: block; width: 100%; max-width: 420px; margin: 0 auto;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.14);
  cursor: zoom-in; background: #0a0f14; }
.pf-shot-note { font-size: 11px; color: #8795ac; margin-top: 6px; line-height: 1.6; }

/* ── 最后一局提示 + 解散投票横幅 ── */
.final-bar, .dis-bar { margin: 0 0 10px; padding: 9px 14px; border-radius: 10px;
  font-size: 13.5px; line-height: 1.6; text-align: center; }
.final-bar { background: linear-gradient(90deg, rgba(237,110,76,.16), rgba(237,110,76,.05));
  border: 1px solid rgba(237,110,76,.45); color: #ffb08f; }
.final-bar b { color: #ff8a5c; }
.dis-bar { background: linear-gradient(90deg, rgba(237,190,76,.14), rgba(237,190,76,.04));
  border: 1px solid rgba(237,190,76,.4); color: #edbe4c; }
.dis-acts { display: inline-flex; gap: 8px; margin-left: 10px; vertical-align: middle; }
/* 投票横幅里的「同意关闭」：与「拒绝」同款带框按钮（金框金字区分） */
.dis-acts .btn-agree { background: rgba(237, 190, 76, .16);
  border: 1px solid var(--gold, #edbe4c);
  color: var(--gold, #edbe4c); }
.dis-acts .btn-agree:hover { background: rgba(237, 190, 76, .28); }
/* e257 可赔额度暂停横幅：偏红警示，庄家端带倒计时 + 补额度 / 下庄按钮 */
.credit-bar { background: linear-gradient(90deg, rgba(255,90,90,.16), rgba(255,90,90,.04));
  border: 1px solid rgba(255,120,120,.48); color: #ffc0c0; }
.credit-bar b { color: #ff9a9a; }
.credit-bar .dis-acts { margin-left: 8px; }
.credit-bar .btn.sm { padding: 4px 10px; font-size: 12px; min-height: 26px; }
@media (max-width: 720px) {
.final-bar, .dis-bar { font-size: 12px; padding: 8px 10px; }
.dis-acts { margin-left: 4px; }}
@media (max-width: 560px) {
.credit-bar { font-size: 11.5px; padding: 7px 9px; }
.credit-bar .dis-acts { display: flex; justify-content: center; flex-wrap: wrap; margin: 6px 0 0; }}

/* 开房表单：label 文字改为输入框内灰色占位提示 */
.field input::placeholder, .pf-card .field input::placeholder { color: var(--muted, #8a93a6);
  opacity: 1; }

/* ───────────── 大厅房间归类：可折叠（公开 / 私密） ───────────── */
.room-group { margin-bottom: 12px; }
.rg-title { /* e221：允许整行换行。容器窄时徽章与「展开/收起」各自换行，绝不叠在一起。
     原来只在 @media(max-width:430px) 隐藏热局/提示，但桌面浏览器把内容区拉窄时
     视口仍 >430px，规则不生效，徽章会溢出压到右侧提示上。 */
  width: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 10px 14px; margin: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
  border: 1px solid var(--line);
  border-radius: 14px;
  font-family: inherit; font-size: 14.5px; font-weight: 700;
  color: var(--gold); text-align: left; letter-spacing: .4px;
  cursor: pointer;
  transition: background .18s, border-color .18s, box-shadow .18s; }
.rg-title:hover { border-color: rgba(237,190,76,.45);
  box-shadow: 0 8px 20px rgba(0,0,0,.28); }
.rg-caret { flex: 0 0 auto; display: inline-block; font-size: 11px; line-height: 1;
  color: var(--muted); transition: transform .2s ease, color .2s ease; }
.room-group.open .rg-caret { transform: rotate(90deg); color: var(--gold); }
.rg-icon { flex: 0 0 auto; width: 30px; height: 30px;
  display: grid; place-items: center; line-height: 1;
  font-size: 15px; border-radius: 10px;
  background: rgba(237,190,76,.13); border: 1px solid rgba(237,190,76,.24); }
.room-group[data-grp="priv"] .rg-icon { background: rgba(122,150,255,.14); border-color: rgba(122,150,255,.26); }
.rg-name { flex: 0 0 auto; }
/* e221：占满剩余宽度 + 内部徽章可换行，徽章不会被压扁溢出到右侧提示上 */
.rg-stats { flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px; row-gap: 4px;
  margin-left: 2px; }
.rg-chip { flex: 0 0 auto;
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.07);
  font-size: 10.5px; font-weight: 400; color: var(--muted); }
.rg-chip b { font-size: 12.5px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.rg-chip i { font-style: normal; }
.rg-chip.online { align-items: center;
  background: rgba(47,191,113,.12); border-color: rgba(47,191,113,.3); color: #7ed6a3; }
.rg-chip.online b { color: #8ff0ba; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #2fbf71;
  animation: livePulse 1.8s ease-out infinite; }
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(47,191,113,.55); }
  70% { box-shadow: 0 0 0 5px rgba(47,191,113,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,191,113,0); }
}
.rg-chip.hot { background: rgba(240,84,95,.12); border-color: rgba(240,84,95,.3); color: #f18f96; }
.rg-chip.hot b { color: #ff9ca3; }
.rg-tip { /* e221：文字已简化为「展开/收起」，且不被压缩、不折行，始终靠右不重叠 */
  flex: 0 0 auto; margin-left: auto; white-space: nowrap;
  font-size: 11.5px; font-weight: 400; color: var(--muted); }
.room-group.open .rg-title { border-color: rgba(237,190,76,.45);
  background: linear-gradient(180deg, rgba(237,190,76,.13), rgba(237,190,76,.05)); }
.room-group.open .rg-tip { color: rgba(237,190,76,.75); }
.rg-body { display: none; padding-top: 12px; }
.room-group.open .rg-body { display: block; }
.rg-empty { margin: 0; padding: 8px 4px 14px; font-size: 12.5px; color: var(--muted); }

/* ───────────── 大厅房间搜索 ───────────── */
.lobby-search { position: relative; display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px; padding: 4px 6px 4px 12px;
  background: rgba(255,255,255,.045);
  border: 1px solid var(--line); border-radius: 12px;
  transition: border-color .18s, background .18s; }
.lobby-search:focus-within { border-color: rgba(237,190,76,.55); background: rgba(237,190,76,.06); }
.lobby-search .ls-ico { font-size: 13px; opacity: .75; flex: 0 0 auto; }
.lobby-search input { flex: 1 1 auto; min-width: 0; padding: 9px 0;
  background: transparent; border: 0; outline: none;
  color: var(--ink); font-size: 13.5px; }
.lobby-search input::placeholder { color: var(--muted); opacity: 1; }
.lobby-search input::-webkit-search-cancel-button { filter: invert(.6); }
.lobby-search .btn { flex: 0 0 auto; }
.ls-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 16px 38px rgba(0,0,0,.5);
  overflow: hidden auto; max-height: 320px; }
.ls-item { display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; font-size: 13px; cursor: pointer; }
.ls-item + .ls-item { border-top: 1px solid var(--line); }
.ls-item:hover { background: rgba(237,190,76,.1); }
.ls-name { font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ls-id { font-size: 11.5px; color: var(--gold); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; flex: 0 0 auto; }
.ls-meta { margin-left: auto; font-size: 11.5px; color: var(--muted); white-space: nowrap; flex: 0 0 auto; }
.ls-none { margin: 0; padding: 14px; font-size: 12.5px; color: var(--muted); }

/* ───────────── 公告喇叭：循环左移跑马灯 ───────────── */
.announce { overflow: hidden; white-space: nowrap; }
/* 喇叭独立固定：文字只在右侧滚动窗内移动，不会盖到喇叭 */
.announce { display: flex; align-items: center; gap: 9px; }
.announce .ann-horn { flex: 0 0 auto; font-size: 14px; line-height: 1; }
.announce .ann-viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
.announce .ann-track { display: inline-flex; min-width: 100%; will-change: transform; }
.announce .ann-item { display: inline-block; padding-right: 80px; }
.announce.scrolling .ann-track { animation: annScroll var(--ann-dur, 18s) linear infinite; }
@keyframes annScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.announce.scrolling .ann-track { animation: none; }}

/* 小屏：搜索栏与折叠标题收紧 */
@media (max-width: 430px) { .lobby-search { padding: 3px 5px 3px 10px; gap: 6px; }
  .lobby-search input { font-size: 13px; padding: 9px 0; }
  .lobby-search .btn { padding: 7px 12px; font-size: 13px; }
  .rg-title { font-size: 13.5px; padding: 9px 11px; gap: 7px; }
  .rg-icon { width: 26px; height: 26px; font-size: 13px; border-radius: 9px; }
  .rg-stats { gap: 5px; }
  .rg-chip { padding: 2px 7px; font-size: 10px; }
  .rg-chip b { font-size: 12px; }
  /* e221：不再隐藏热局徽章与「展开/收起」，靠上面的 flex-wrap 自适应换行防重叠 */
  .rg-title { row-gap: 6px; }
  .ls-meta { display: none; } }

/* ───────────── 提现（我的） ───────────── */
.wd-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.wd-tab { padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--muted); background: rgba(255,255,255,.05);
  border: 1px solid var(--line); transition: all .15s; }
.wd-tab:hover { color: var(--ink); border-color: rgba(237,190,76,.4); }
.wd-tab.active { color: var(--gold); background: rgba(237,190,76,.14);
  border-color: rgba(237,190,76,.5); }
.wd-form .field-row { display: flex; gap: 10px; flex-wrap: wrap; }
.wd-form .field { flex: 1 1 160px; min-width: 0; }
.wd-qr-row { display: flex; gap: 14px; align-items: flex-start; margin: 14px 0; padding: 12px; border: 1px dashed var(--line); border-radius: 12px; }
.wd-qr-box { flex: 0 0 auto; width: 110px; height: 110px; border-radius: 10px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
  display: grid; place-items: center; overflow: hidden; }
.wd-qr-box img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.wd-qr-box span { font-size: 11.5px; color: var(--muted); }
.wd-qr-ops { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.wd-qr-ops .hint { width: 100%; }
.wd-request { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.wd-request .field-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.wd-request .field { flex: 1 1 140px; min-width: 0; }
.wd-st { font-size: 12px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.wd-st-pending { color: var(--gold); background: rgba(237,190,76,.14); }
.wd-st-done { color: var(--green); background: rgba(47,191,113,.14); }
.wd-st-rejected { color: var(--red); background: rgba(240,84,95,.14); }
@media (max-width: 430px) {
.wd-qr-row { flex-direction: column; align-items: center; }
.wd-qr-ops { justify-content: center; }}

/* ───────────── 提现入口按钮 + 提现独立页 ───────────── */

.pf-wd-btn { display: inline-block; margin-top: 6px;
  padding: 4px 12px !important; font-size: 12px !important; line-height: 1.5; }

/* 提现金额区 */
.wd-amount-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; margin-bottom: 12px;
  background: rgba(237,190,76,.08); border: 1px solid rgba(237,190,76,.25); border-radius: 12px; }
.wd-avail { font-size: 13px; color: var(--muted); }
.wd-avail b { color: var(--gold); font-size: 16px; font-variant-numeric: tabular-nums; }
.wd-submit-field { flex: 0 0 auto; align-self: flex-end; }
.wd-submit-field .btn { white-space: nowrap; }

@media (max-width: 640px) {
.wd-submit-field { flex: 1 1 100%; }
.wd-submit-field .btn { width: 100%; }}

/* ───────────── 提现三步进度条 ───────────── */
.wd-progress-card { margin-bottom: 16px; }
.wd-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.wd-progress-head h4 { margin: 0; }
.wd-progress-head .muted { font-size: 12px; }
.wd-steps { display: flex; align-items: center; gap: 8px; }
/* 两步均分整行宽度：每步各占一半，连线固定窄宽 */
.wd-step { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1 1 0; min-width: 0; }
.wd-step-dot { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  font-size: 12.5px; font-weight: 700;
  color: var(--muted); background: rgba(255,255,255,.06);
  border: 1.5px solid var(--line);
  transition: all .25s ease; }
.wd-step-txt { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-step-line { flex: 0 0 34px; height: 2px; background: var(--line); border-radius: 2px; transition: background .25s ease; }
.wd-step.active .wd-step-dot { color: #1a2231; background: var(--gold); border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(237,190,76,.18); }
.wd-step.active .wd-step-txt { color: var(--gold); font-weight: 600; }
.wd-step.done .wd-step-dot { color: var(--green); background: rgba(47,191,113,.16); border-color: rgba(47,191,113,.5); }
.wd-step.done .wd-step-dot::before { content: '✓'; }
.wd-step.done .wd-step-txt { color: var(--green); }
.wd-step.done .wd-step-dot { font-size: 0; }
.wd-step-line.done-line { background: rgba(47,191,113,.5); }
.wd-progress-tip { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.wd-progress-tip.bad { color: var(--red); }

@media (max-width: 640px) {
.wd-step-line { flex: 0 0 22px; }
.wd-step-txt { font-size: 12px; }}

/* ───────────── 收款信息折叠卡 ───────────── */
.wd-acc-card { padding: 0; overflow: hidden; }
.wd-acc-head { width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; margin: 0;
  background: none; border: none; cursor: pointer; text-align: left;
  color: inherit; font: inherit; }
.wd-acc-head:hover { background: rgba(255,255,255,.03); }
.wd-acc-title { font-weight: 700; font-size: 14.5px; }
.wd-acc-summary { flex: 1 1 auto; min-width: 0; font-size: 12px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-acc-caret { flex: 0 0 auto; color: var(--muted); transition: transform .25s ease; font-size: 13px; }
.wd-acc-head.open .wd-acc-caret { transform: rotate(90deg); }
.wd-acc-body { padding: 4px 16px 14px; border-top: 1px dashed var(--line); }
.wd-acc-body[hidden] { display: none; }

/* 新增状态胶囊：审核通过·等待出款中 */
.wd-st-approved { color: #4da3ff; background: rgba(77,163,255,.14); }

/* 步骤异常态：审核未通过（红） */
.wd-step.bad .wd-step-dot { color: var(--red); background: rgba(240,84,95,.16); border-color: rgba(240,84,95,.5); box-shadow: none; }
.wd-step.bad .wd-step-txt { color: var(--red); font-weight: 600; }

/* 可复制的单号：虚线下划 + hover 提示 */
.wd-copy-id.has-id { cursor: pointer; border-bottom: 1px dashed rgba(255,255,255,.35); padding-bottom: 1px; }
.wd-copy-id.has-id:hover { color: var(--ink, #e8ecf4); }
.wd-ord-id:hover { color: var(--ink, #e8ecf4); }

/* ───────────── 个人中心：信息卡排版优化 ───────────── */
/* e237：昵称行 = 「昵称：X ✎」，一行自适应：越长字号越小、超长省略
   e247：按标注图，登入账号胶囊回到昵称行右侧。.pf-head 已约束 100% 宽、
   #pfNameText 可省略，胶囊设为不收缩，长账号完整显示且整行不撑破卡片（e242 溢出教训） */
.pf-name { white-space: nowrap; overflow: hidden; }
.pf-name-label { flex: 0 0 auto; font-weight: 600; color: var(--gold); }
.pf-name-sm { font-size: 17px; }
.pf-name-xs { font-size: 15px; }
.pf-name #pfNameText { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-name-edit { flex: 0 0 auto; }
.pf-acc-chip { flex: 0 0 auto; max-width: 70%;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid var(--line);
  font-size: 11px; font-weight: 400; letter-spacing: 0; color: var(--muted);
  white-space: nowrap; }
.pf-acc-chip b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* 安全退出：紧凑胶囊按钮、水平居中；e237 按标注缩小红色区域、收紧左右留白 */
.pf-logout-wrap { display: flex; justify-content: center; margin: 10px auto 4px; max-width: 520px; padding: 0 4px; }
.pf-logout-btn { display: flex; align-items: center; justify-content: center;
  width: auto; min-width: 0; min-height: 38px; padding: 8px 22px;
  color: #fff; background: linear-gradient(180deg, #ff6b78, #e03548);
  border: 0; border-radius: 20px;
  font-size: 14px; font-weight: 700; letter-spacing: 2px; text-indent: 2px;
  cursor: pointer; box-shadow: 0 6px 16px rgba(240,84,95,.35);
  transition: filter .15s, transform .1s; }
.pf-logout-btn:hover { filter: brightness(1.1); }

/* ───────────── e246：版本可见 + 新版本提示 ───────────── */
/* 个人中心底部小字：一眼确认玩家端实际加载的是哪一版，避免「改了却没生效」反复扯皮 */
.pf-build { text-align: center; font-size: 11px; color: var(--muted); opacity: .5; margin: 2px 0 10px; letter-spacing: .5px; }
/* 页面长时间开着时，服务端发新版会浮出提示；点一下才刷新，不打断牌局 */
.build-toast { position: fixed; left: 50%; bottom: 74px; transform: translateX(-50%); z-index: 9999;
  display: flex; align-items: center; gap: 12px; white-space: nowrap;
  padding: 10px 12px 10px 16px; border-radius: 999px;
  background: #222d3d; border: 1px solid rgba(237,190,76,.45);
  box-shadow: 0 8px 28px rgba(0,0,0,.5);
  font-size: 12px; color: var(--ink); }
.build-toast[hidden] { display: none; }
.build-toast button { background: var(--gold, #edbe4c); color: #1a2230; border: 0; border-radius: 999px;
  padding: 6px 13px; font-size: 12px; font-weight: 700; cursor: pointer; }
.pf-logout-btn:active { transform: translateY(1px); box-shadow: 0 3px 8px rgba(240,84,95,.3); }

/* 信息列表：键值成行，两列对齐，类目清晰（e241 起整行铺开，间距交给 hero gap） */
.pf-info-list { padding: 8px 12px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
  border-radius: 10px;
  display: flex; flex-direction: column; gap: 6px; }
.pf-info-row { display: flex; align-items: center; gap: 12px; font-size: 12px; line-height: 1.4; }
.pf-info-row .k { flex: 0 0 60px; color: var(--muted); }
.pf-info-row .v { color: var(--ink); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* e235：用户 ID / 邀请码行尾的复制小按钮 */
.pf-copy { flex: 0 0 auto; margin-left: auto; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px; cursor: pointer; font-size: 12px;
  color: var(--muted); background: rgba(255,255,255,.06);
  transition: background .15s, color .15s; }
.pf-copy:hover { color: var(--gold); background: rgba(232,192,100,.15); }

/* 钱包区（e237/e241/e249）：整行铺开 + 顶部虚线分隔。
   e249 改三列两行网格：数值列 | 提现按钮 | 数值列；标签行 | 数值行（固定 38px）。
   按钮独占中列且只落在数值行 → 余额数字、提现、房卡数字严格同一水平线；
   两列数字各自居中，标签与数字同轴（旧版按钮占宽曾把数字推偏 29px）。 */
.pf-wallet { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto 38px; column-gap: 10px; row-gap: 0; align-items: center; justify-content: center; border-top: 1px dashed var(--line); padding-top: 10px; }
.pf-w-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; text-align: center; }
.pf-w-col:first-child { grid-column: 1; grid-row: 1 / 3; }
.pf-w-col:last-child { grid-column: 3; grid-row: 1 / 3; }
.pf-w-label { font-size: 11px; color: var(--muted); white-space: nowrap; text-align: center; }
.pf-w-val { display: flex; align-items: center; justify-content: center; gap: 10px; height: 38px; }
.pf-w-val b { font-size: 20px; color: var(--gold); font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
/* 提现按钮 = 中列、只占数值行，垂直与两侧数字严格同轴。
   .btn 自带 margin-top:6px 会把按钮推下 3px，必须清零；不再用 translateY 硬凑基线 */
.pf-wallet > .pf-wd-btn { grid-column: 2; grid-row: 2; flex: 0 0 auto; align-self: center; margin: 0; padding-top: 5px; padding-bottom: 5px; line-height: 1.2; transform: none; }
@media (max-width: 420px) {
.pf-w-val b { font-size: 17px; }
.pf-wallet { column-gap: 8px; }}

/* 移动端：钱包整行铺开（e241），三列仍整体居中 */
@media (max-width: 640px) { .pf-wallet { justify-content: center; } }

/* e249：点昵称改名时账号胶囊占了 138px，昵称区只剩 122px，而编辑器需 198px，
   配合 .pf-name 的 overflow:hidden 会把「保存 / 取消」裁掉（实测保存按钮只露出「保」）。
   编辑态临时收起胶囊并放开溢出；保存/取消走 renderNameView() 自动恢复显示。 */
.pf-head.editing .pf-acc-chip { display: none; }
.pf-head.editing .pf-name { overflow: visible; }

/* e237：个人中心顶栏「客服」按钮的耳机图标（与首页 btnSupport 同款 SVG） */
.pf-ico { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-right: 5px; }

/* 大厅房卡：上庄门槛金色标记 */
.rc-banker-min b { color: var(--gold); }
.pf-ref-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pf-ref-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 22px; letter-spacing: 3px; color: var(--gold, #edbe4c);
  padding: 6px 14px; border-radius: 10px;
  background: rgba(237,190,76,.10); border: 1px dashed rgba(237,190,76,.45);
  user-select: all; }
.pf-ref-stats { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 560px) {
.pf-ref-code { font-size: 18px; letter-spacing: 2px; }
.pf-ref-line .btn { flex: 1 1 auto; }}

/* ─────────────── 个人中心：统一折叠卡（推荐返佣/声音/房间战绩/安全设置） ─────────────── */
.pf-card.wd-acc-card { padding: 0; overflow: hidden; }
.pf-card.wd-acc-card .wd-acc-head { width: 100%; }
.pf-card.wd-acc-card .wd-acc-body { padding: 6px 16px 16px; }
.pf-card.wd-acc-card .stat-grid { margin-top: 10px; }
/* 战绩统计折叠卡：body 内只有 stat-grid，去掉双重上间距 */
#pfStatsBody { padding: 14px 16px 16px; }
#pfStatsBody .stat-grid { margin-top: 0; }

/* ── 头像选择弹窗：预置头像九宫格（e69） ── */
.avatar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  padding: 4px 2px; }
.avatar-grid .av-opt { aspect-ratio: 1; border-radius: 50%; overflow: hidden; padding: 0;
  border: 2px solid var(--line); background: #0b1119; cursor: pointer;
  transition: transform .12s ease, border-color .12s ease; }
.avatar-grid .av-opt img { width: 100%; height: 100%; display: block; }
.avatar-grid .av-opt:hover { transform: scale(1.08); border-color: var(--gold, #f2b134); }
.avatar-grid .av-opt:active { transform: scale(0.96); }

/* ── 黑门（黑桃/梅花）赔率徽标移到左上角（红门保持右上） ── */
.suit-card[data-suit="spade"] .suit-odds, .suit-card[data-suit="club"] .suit-odds { right: auto; left: 10px; }
@media (max-width: 560px) {
.suit-card[data-suit="spade"] .suit-odds, .suit-card[data-suit="club"] .suit-odds { left: 7px; }}
@media (max-width: 720px) {
.suit-card[data-suit="spade"] .suit-odds, .suit-card[data-suit="club"] .suit-odds { left: 5px; }}

/* ══════════════════════════════════════════════════════════════════════
   e219：座位 / 最近开奖两个方框「自动适配到页面最底部」
   ──────────────────────────────────────────────────────────────────────
   旧行为：两个面板只包住内容（还叠着 150 / 120 / 104 / 240px 等各轮
   max-height），侧栏在窄屏又是 row + align-content:flex-start，iPad 下
   .table-wrap 还是 align-items:start —— 结果面板下方留一大块空白直到哈希栏。
   新行为：侧栏吃满 .table-wrap 分配到的整行高度，两个列表面板把剩余高度
   分掉，列表内部滚动；聊天输入栏保持紧凑，不参与拉伸。
   规则集中放在样式表最后，统一覆盖前面各轮 @media 的残留限制。
   纯样式改动，不触碰任何游戏逻辑与接口。
   ══════════════════════════════════════════════════════════════════════ */

/* ① 侧栏本身撑满 grid 行/列：覆盖 html.is-ipad .table-wrap { align-items:start }
      （align-self 定义在 item 上，优先于容器的 align-items） */
#viewRoom .table-wrap > .side { align-self: stretch; min-height: 0; }

/* ② 纵向布局（桌面 / 横屏）：两个列表面板按剩余高度均分，聊天栏不拉伸 */
#viewRoom .side > .panel:not(.room-chat-panel) { flex: 1 1 0; min-height: 0; max-height: none; }
#viewRoom .side > .room-chat-panel { flex: 0 0 auto; }

/* ③ 列表吃满面板剩余高度、内部滚动；去掉固定 max-height 造成的空白 */
#viewRoom .side .seat-list, #viewRoom .side .history-list { flex: 1 1 auto; min-height: 0; max-height: none; }

/* ④ 手机竖屏（≤720px）：侧栏在牌桌下方、横向两列，改用 grid 明确
      「聊天栏一行 + 两个列表面板一行」，第二行 1fr 一直拉到哈希栏上方。 */
@media (max-width: 720px) and (orientation: portrait) { #viewRoom .table-wrap { grid-template-rows: minmax(0, auto) minmax(0, 1fr); }
  #viewRoom .felt { overflow-y: auto; }
  #viewRoom .side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
  }
  #viewRoom .side > .room-chat-panel { grid-column: 1 / -1; max-height: 118px; } }

/* ⑤ 平板竖屏（721~1024px，含 iPad 竖屏）：这个区间另有一条规则把
      .table-wrap 改回「牌桌 | 侧栏」左右两列，侧栏只有 240px 宽。
      因此这里不能给 .table-wrap 设两行（会空出整行）、也不能让侧栏
      横向并排（会挤成两细条）；改为上下堆叠，靠 ① 的 align-self:stretch
      把整列高度吃满，两个面板再按 ② 均分，一起贴到哈希栏上方。 */
@media (min-width: 721px) and (max-width: 1024px) and (orientation: portrait) { #viewRoom .side { flex-direction: column; flex-wrap: nowrap; align-content: stretch; } }