:root {
  --bg: #08131a;
  --bg2: #0f2129;
  --panel: rgba(19, 38, 47, 0.92);
  --panel-2: rgba(12, 27, 34, 0.9);
  --line: rgba(120, 170, 190, 0.18);
  --text: #e6eff4;
  --muted: #8ba4b2;
  --gold: #e6c179;
  --gold-2: #b9903f;
  --red: #e2574f;
  --green: #43c07d;
  --blue: #4aa8e0;
  --radius: 14px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  /* 座位环绕几何：默认值给桌面端，媒体查询里按屏幕尺寸覆盖 */
  --seat-w: 132px;
  --seat-h: 170px;
  --card-w: 54px;
  --card-h: 76px;
  --card-sm-w: 34px;
  --card-sm-h: 48px;
  --ring-start: 0.25;   /* 座位起点角度（圈数）：0.25 = 从正下方开始 */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: radial-gradient(1200px 700px at 50% -10%, #16323d 0%, var(--bg) 60%);
  color: var(--text);
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button, input, select { font-family: inherit; font-size: 15px; }

button { cursor: pointer; border: none; border-radius: 10px; transition: transform .12s, filter .12s, background .12s; }
button:active { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; }

input, select {
  background: rgba(6, 18, 24, 0.85);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  padding: 10px 12px;
  outline: none;
  width: 100%;
}
input:focus, select:focus { border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(230, 193, 121, .12); }

.primary {
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-2) 100%);
  color: #23180a;
  font-weight: 700;
  padding: 12px 18px;
}
.primary:hover { filter: brightness(1.06); }
.ghost {
  background: rgba(255, 255, 255, .06);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 10px 14px;
}
.ghost:hover { background: rgba(255, 255, 255, .12); }
.ghost.danger { color: #ffb3ae; border-color: rgba(226, 87, 79, .4); }
button.small { padding: 7px 12px; font-size: 13px; border-radius: 9px; }

.screen { display: none; height: 100%; }
.screen.active { display: flex; flex-direction: column; }

/* ---------------- 登录 ---------------- */
#screen-auth { align-items: center; justify-content: center; overflow: auto; padding: 24px; }
.auth-card {
  width: 100%; max-width: 400px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px 26px 22px;
  box-shadow: var(--shadow);
}
.brand { text-align: center; margin-bottom: 18px; }
.brand-suits { font-size: 22px; letter-spacing: 6px; }
.brand-suits .s-red { color: var(--red); }
.brand-suits .s-black { color: #cfe3ec; }
.brand h1 { margin: 8px 0 4px; font-size: 27px; letter-spacing: 2px; }
.brand-sub { margin: 0; color: var(--muted); font-size: 13px; }
.tabs { display: flex; gap: 8px; background: rgba(0,0,0,.25); padding: 5px; border-radius: 12px; margin-bottom: 18px; }
.tab { flex: 1; background: transparent; color: var(--muted); padding: 9px; border-radius: 9px; font-weight: 600; }
.tab.active { background: rgba(230, 193, 121, .16); color: var(--gold); }
#auth-form label { display: block; margin-bottom: 14px; font-size: 13px; color: var(--muted); }
#auth-form input { margin-top: 6px; }
/* hidden 属性得真能藏住：作者样式里的 display 会盖过浏览器默认的 [hidden] */
#auth-form label[hidden] { display: none; }
#auth-submit { width: 100%; margin-top: 4px; }
.msg { min-height: 18px; margin: 10px 0 0; font-size: 13px; color: var(--red); text-align: center; }
.msg.ok { color: var(--green); }
.hint { color: var(--muted); font-size: 12px; text-align: center; margin: 14px 0 10px; line-height: 1.6; }
.audio-quick { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.cache-row { margin-top: 12px; }
.audio-inline { display: flex; gap: 6px; }
.audio-inline .on { color: var(--gold); border-color: rgba(230,193,121,.55); }

/* ---------------- 顶栏 ---------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 16px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.logo-mini { color: var(--gold); font-size: 18px; }
.pill { background: rgba(255,255,255,.07); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; color: var(--muted); }
.pill.code { color: var(--gold); letter-spacing: 3px; font-weight: 700; }
.pill.score { color: var(--gold); }
.pill.practice { color: #8fa3ad; border-style: dashed; }
.pill.ping-good { color: #7fd6a2; border-color: rgba(127, 214, 162, .45); }
.pill.ping-warn { color: #f0c674; border-color: rgba(240, 198, 116, .45); }
.pill.ping-bad { color: #ff9a8a; border-color: rgba(255, 154, 138, .5); }
/* 延迟角标：只留一个短数字，别把顶栏挤到第二行 */
.pill.ping { width: 46px; min-width: 46px; padding: 2px 0; font-size: 11.5px; text-align: center;
  font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* ---------------- 大厅 ---------------- */
.lobby-body { flex: 1; display: flex; gap: 16px; padding: 16px; overflow: auto; }
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; min-width: 300px;
}
.panel.grow { flex: 1; display: flex; flex-direction: column; }
.panel h2 { margin: 0 0 14px; font-size: 16px; display: flex; align-items: center; justify-content: space-between; }
#create-form label { display: block; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
#create-form input, #create-form select { margin-top: 6px; }
.row { display: flex; gap: 10px; }
.row label { flex: 1; }
#create-form .primary { width: 100%; margin-top: 6px; }
.my-stats { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); line-height: 1.9; }
/* ---------------- 排行榜（金牌榜 / 光头榜） ---------------- */
/* 两块榜上下排在同一列里，桌面上各占一半高度、各自滚动 */
.rank-col { display: flex; flex-direction: column; gap: 16px; min-width: 250px; min-height: 0; }
.rank-col > .panel { min-width: 0; flex: 1 1 0; min-height: 0; }
.panel.rank { min-width: 250px; display: flex; flex-direction: column; }
.rank-list { display: flex; flex-direction: column; gap: 6px; overflow: auto; margin-bottom: 10px; }
.rank-row {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1px solid transparent; font-size: 13px;
}
.rank-row.me { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.09); }
.rank-row .rno { width: 20px; text-align: center; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.rank-row .rno.top1 { color: var(--gold); font-size: 15px; }
.rank-row .rno.top2, .rank-row .rno.top3 { color: #cbd8de; }
.rank-row .rwho { flex: 1; min-width: 0; }
.rank-row .rname { display: flex; align-items: center; gap: 3px; min-width: 0; }
.rank-row .rname .nname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-row .rsub { color: var(--muted); font-size: 11.5px; }
.rank-row .rgold { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.rank-row .rgold .runit { font-style: normal; font-size: 10px; font-weight: 500; color: var(--muted); margin-left: 3px; white-space: nowrap; }
.rank-row .rnum { flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.35; }
.rank-note { font-size: 11.5px; color: var(--muted); line-height: 1.65; margin: 0; }
/* 光头榜：数字和名次用「不光彩」的红，和金牌榜的金色区分开 */
.rank-row .rno.hot1 { color: var(--red); font-size: 15px; }
.rank-row .rno.hot2, .rank-row .rno.hot3 { color: #c98b84; }
.rank-row .rbald { color: var(--red); font-weight: 700; font-variant-numeric: tabular-nums; }
.rank-row .rbald .runit { font-style: normal; font-size: 10px; font-weight: 500; color: var(--muted); margin-left: 3px; white-space: nowrap; }
.rank-row .rname .bald { font-size: 12px; line-height: 1; }
/* 榜上的「今日」开关：打开时点亮成金色，和「只看今天」的状态对上 */
.panel.rank h2 .today { flex: none; }
.panel.rank h2 .today.on { background: rgba(230, 193, 121, .22); color: var(--gold); border-color: rgba(230, 193, 121, .55); }
.join-box { display: flex; gap: 8px; margin-bottom: 14px; }
.join-box input { letter-spacing: 6px; text-align: center; font-weight: 700; text-transform: uppercase; }
.room-list { display: flex; flex-direction: column; gap: 10px; overflow: auto; }
.room-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px;
}
.room-row .rname { font-weight: 600; }
.room-row .rmeta { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.room-row .rcode { color: var(--gold); letter-spacing: 2px; font-weight: 700; }
.empty { color: var(--muted); text-align: center; padding: 28px 0; font-size: 14px; }
/* ---------------- 房间 ---------------- */
.room-body { flex: 1; display: flex; gap: 14px; padding: 14px; overflow: hidden; min-height: 0; }
.table-wrap { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.felt {
  position: relative; flex: 1; min-height: 340px;
  border-radius: 46% / 50%;
  background:
    radial-gradient(ellipse at 50% 42%, #207a55 0%, #14603f 45%, #0a3524 100%);
  border: 12px solid #2a1a10;
  box-shadow: inset 0 0 90px rgba(0,0,0,.55), 0 22px 60px rgba(0,0,0,.6), 0 0 0 2px rgba(230,193,121,.28);
}
.felt::after {
  content: ""; position: absolute; inset: 16px; border-radius: 46% / 50%;
  border: 1px dashed rgba(255,255,255,.09); pointer-events: none;
}
.pot {
  position: absolute; top: calc(50% - 88px); left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.5); border: 1px solid rgba(230,193,121,.45);
  color: var(--gold); border-radius: 999px; padding: 5px 18px; font-weight: 700; font-size: 14px;
  white-space: nowrap; overflow: hidden;
}
.board {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; gap: 8px; align-items: center;
}
.table-center {
  position: absolute; bottom: 31%; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.72); font-size: 13px; text-align: center; white-space: nowrap;
}
.seats { position: absolute; inset: 0; }

/* ---------------- 座位 ---------------- */
.seat {
  position: absolute; width: var(--seat-w); transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: transform .2s;
}
.seat .plate {
  width: 100%; background: rgba(8, 22, 28, .88); border: 1px solid var(--line);
  border-radius: 12px; padding: 7px 9px; text-align: center; position: relative;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
.seat.active .plate { border-color: rgba(230,193,121,.9); box-shadow: 0 0 0 2px rgba(230,193,121,.35), 0 6px 20px rgba(0,0,0,.5); }
.seat.top { flex-direction: column-reverse; }
.seat.folded { opacity: .42; }
.seat.offline .plate { border-style: dashed; }
.seat .name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 金牌角标绝对定位，挂在名牌左上角：不占位置，加不加都不会挤动牌桌布局 */
.seat .medal {
  position: absolute; top: -9px; left: -9px; width: 22px; height: 22px; line-height: 22px;
  border-radius: 50%; text-align: center; font-size: 13px; z-index: 3;
  background: rgba(8, 22, 28, .92); border: 1px solid rgba(230,193,121,.75);
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.rank-row .medal, .member-row .medal { flex: none; margin-right: 4px; }
.seat .stack { font-size: 12.5px; color: var(--gold); font-variant-numeric: tabular-nums; }
.seat .me-tag { color: var(--blue); font-size: 11px; }
.seat .dealer {
  position: absolute; top: -9px; right: -9px; width: 22px; height: 22px; border-radius: 50%;
  background: #f4f1e6; color: #222; font-size: 11px; font-weight: 800; line-height: 22px; text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.seat .timer-ring {
  position: absolute; left: 0; bottom: -3px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--green), var(--gold)); width: 0;
  transition: width .28s linear;
}
.seat .bubble {
  font-size: 11.5px; color: #d9e8ef; background: rgba(0,0,0,.55);
  border-radius: 8px; padding: 3px 9px; white-space: nowrap; min-height: 0;
}
.seat .bubble:empty { display: none; }
.seat .bubble.bet { color: var(--gold); }
.seat .chips {
  font-size: 11.5px; color: #f0e2bd; background: rgba(0,0,0,.4);
  border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.seat .chips:empty { display: none; }
.seat .hole { display: flex; gap: 4px; }

/* ---------------- 扑克牌 ---------------- */
.card {
  width: var(--card-w); height: var(--card-h); background: #fbfaf6;
  border-radius: calc(var(--card-w) * 0.14);
  color: #1b1b1b; position: relative; flex: none;
  box-shadow: 0 3px 10px rgba(0,0,0,.45);
  border: 1px solid rgba(0,0,0,.22);
  animation: dealIn .34s ease-out;
}
@keyframes dealIn { from { transform: translateY(-26px) rotate(-8deg) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.card.small { width: var(--card-sm-w); height: var(--card-sm-h); border-radius: calc(var(--card-sm-w) * 0.16); }
.card.red { color: #cf2b28; }
/* 牌面上的字和花色一律按牌面尺寸等比缩放：人多的桌子 JS 会把 --card-w 调小，
   如果这里写死 px，牌变小了字却不变大，左上角的点数和花色就会挤成一团看不清 */
.card .c-rank { position: absolute; top: 5%; left: 8%; font-weight: 800; font-size: calc(var(--card-w) * 0.34); line-height: 1; }
.card .c-suit { position: absolute; top: 40%; left: 9%; font-size: calc(var(--card-w) * 0.27); line-height: 1; }
.card .c-big { position: absolute; right: 8%; bottom: 5%; line-height: 1; opacity: .85;
  /* 牌小到 20px 出头时右下这颗装饰花色就收掉：字这么小的时候它只会和左上角的花色糊在一起 */
  font-size: clamp(0px, calc((var(--card-w) - 21px) * 2.6), calc(var(--card-w) * 0.44)); }
.card.small .c-rank { font-size: calc(var(--card-sm-w) * 0.34); top: 4%; left: 8%; }
.card.small .c-suit { font-size: calc(var(--card-sm-w) * 0.27); top: 40%; left: 9%; }
.card.small .c-big { right: 8%; bottom: 4%; font-size: clamp(0px, calc((var(--card-sm-w) - 15px) * 2.6), calc(var(--card-sm-w) * 0.44)); }
.card.back {
  background:
    repeating-linear-gradient(45deg, #1c4f77 0 6px, #163f60 6px 12px);
  border: 1px solid rgba(255,255,255,.22);
}
.card.back::after {
  content: ""; position: absolute; inset: calc(var(--card-w) * 0.1); border-radius: calc(var(--card-w) * 0.08);
  border: 1px solid rgba(255,255,255,.25);
}
.card.slot { background: rgba(255,255,255,.07); border: 1px dashed rgba(255,255,255,.22); box-shadow: none; animation: none; }
.card.hidden { visibility: hidden; animation: none; }
.card.win { box-shadow: 0 0 0 2px var(--gold), 0 6px 18px rgba(230,193,121,.5); }

/* ---------------- 操作栏 ---------------- */
.action-bar {
  min-height: 76px; display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 16px; flex-wrap: wrap;
}
.action-bar .waiting { color: var(--muted); font-size: 14px; }
.action-bar .fold { background: linear-gradient(180deg, #4a2730, #341a22); color: #ffc9c3; border: 1px solid rgba(226,87,79,.5); padding: 12px 20px; font-weight: 700; }
.action-bar .call { background: linear-gradient(180deg, #1d4a36, #123526); color: #b6f0cf; border: 1px solid rgba(67,192,125,.5); padding: 12px 20px; font-weight: 700; }
.action-bar .allin { background: linear-gradient(180deg, #6a4a12, #4a3208); color: #ffe1a1; border: 1px solid rgba(230,193,121,.6); padding: 12px 18px; font-weight: 700; }
.raise-box { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 240px; }
.raise-box input[type=range] { flex: 1; padding: 0; background: transparent; border: none; accent-color: #e6c179; }
.raise-box .amount { color: var(--gold); font-weight: 700; min-width: 74px; text-align: right; font-variant-numeric: tabular-nums; }
.raise-box .raise-input {
  flex: none; width: 84px; min-width: 0; padding: 8px 6px; font-size: 13.5px;
  text-align: center; font-variant-numeric: tabular-nums;
}
.raise-box button { background: linear-gradient(180deg, var(--gold), var(--gold-2)); color: #23180a; font-weight: 700; padding: 12px 18px; }
/* 常用下注额：一排短按钮，手机上比滑杆好点 */
.quick-bets { display: flex; gap: 6px; flex: 1 1 auto; min-width: 0; }
.quick-bets button { flex: 1 1 0; min-width: 0; white-space: nowrap; padding: 9px 6px; font-size: 12.5px; }
.action-bar .countdown { width: 100%; height: 4px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
.action-bar .countdown i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--gold)); width: 100%; }
.action-bar .countdown.urgent i { background: linear-gradient(90deg, #e2574f, #ff9a6a); }
/* ---------------- 侧栏 ---------------- */
.side {
  width: 320px; flex: none; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; min-height: 0;
}
.side-tabs { display: flex; border-bottom: 1px solid var(--line); }
.stab { flex: 1; background: transparent; color: var(--muted); padding: 11px; font-size: 13.5px; font-weight: 600; border-radius: 0; }
.stab.active { color: var(--gold); background: rgba(230,193,121,.1); }
.side-pane { display: none; flex: 1; min-height: 0; flex-direction: column; }
.side-pane.active { display: flex; }
.chat-lines, .log-lines, .info-box {
  flex: 1; overflow-y: auto; padding: 12px; font-size: 13px; line-height: 1.75;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y;
}
.chat-lines .cline { margin-bottom: 7px; word-break: break-word; }
.chat-lines .cfrom { color: var(--gold); font-weight: 600; margin-right: 6px; }
.chat-lines .csys { color: var(--muted); font-style: italic; }
.log-lines .lrow { color: #bed3de; border-bottom: 1px dotted rgba(255,255,255,.07); padding: 4px 0; }
.log-lines .lrow.win { color: var(--gold); font-weight: 600; }
#chat-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
#chat-form input { flex: 1; min-width: 0; }
#chat-form .send { background: rgba(230,193,121,.18); color: var(--gold); padding: 0 16px; font-weight: 600; }
#chat-form .emoji-toggle {
  flex: none; width: 44px; padding: 0; font-size: 20px; line-height: 1;
  background: rgba(255,255,255,.06); color: var(--text); border: 1px solid var(--line);
}
#chat-form .emoji-toggle.on { background: rgba(230,193,121,.22); color: var(--gold); border-color: rgba(230,193,121,.55); }
#chat-form .mic-toggle {
  flex: none; width: 44px; padding: 0; font-size: 19px; line-height: 1;
  background: rgba(255,255,255,.06); color: var(--text); border: 1px solid var(--line);
}
#chat-form .mic-toggle.rec {
  background: rgba(226,87,79,.28); color: #ffdad5; border-color: rgba(226,87,79,.65);
  animation: micPulse 1s infinite;
}
@keyframes micPulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.chat-lines .cline.voice { display: flex; align-items: center; gap: 8px; }
.chat-lines .cline.voice .voice-play {
  background: rgba(230,193,121,.16); color: var(--gold); border: 1px solid rgba(230,193,121,.45);
  border-radius: 8px; padding: 3px 10px; font-size: 12.5px;
}
.chat-lines .cline.voice .voice-play:hover { background: rgba(230,193,121,.28); }

/* ---------------- 表情 ---------------- */
.emoji-bar { display: none; flex: none; flex-wrap: wrap; gap: 2px; padding: 8px 10px 2px; border-top: 1px solid var(--line); overflow-y: auto; }
.emoji-bar.open { display: flex; }
.emoji-bar button {
  width: 34px; height: 34px; padding: 0; font-size: 22px; line-height: 1;
  background: transparent; border-radius: 8px;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}
.emoji-bar button:hover { background: rgba(255,255,255,.12); }
.emoji-bar button:active { transform: scale(.88); }
.chat-lines .cline.emoji .ctext { font-size: 23px; line-height: 1.25; }
.seat .emoji-pop {
  position: absolute; left: 50%; bottom: 100%; z-index: 40;
  font-size: 30px; line-height: 1; pointer-events: none;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.5));
  animation: emojiUp 2.2s ease-out forwards;
}
.seat.top .emoji-pop { bottom: auto; top: 100%; animation-name: emojiDown; }
@keyframes emojiUp {
  0%   { opacity: 0; transform: translate(-50%, 10px) scale(.5); }
  12%  { opacity: 1; transform: translate(-50%, -8px) scale(1.2); }
  22%  { opacity: 1; transform: translate(-50%, -14px) scale(1); }
  72%  { opacity: 1; transform: translate(-50%, -30px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -62px) scale(1); }
}
@keyframes emojiDown {
  0%   { opacity: 0; transform: translate(-50%, -10px) scale(.5); }
  12%  { opacity: 1; transform: translate(-50%, 8px) scale(1.2); }
  22%  { opacity: 1; transform: translate(-50%, 14px) scale(1); }
  72%  { opacity: 1; transform: translate(-50%, 30px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, 58px) scale(1); }
}
.info-box .irow { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dotted rgba(255,255,255,.08); }
.info-box .irow span:first-child { color: var(--muted); }
.member-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px dotted rgba(255,255,255,.08); }
.member-row .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: inline-block; margin-right: 6px; }
.member-row .dot.off { background: #6b7d88; }
.member-row .tag { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.member-row .tag.host { color: var(--gold); border-color: rgba(230,193,121,.5); }
.member-row .tag.playing { color: var(--green); border-color: rgba(67,192,125,.5); }

/* ---------------- 提示 ---------------- */
#toasts { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 99; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  background: rgba(12, 27, 34, .96); border: 1px solid var(--line); color: var(--text);
  padding: 10px 18px; border-radius: 10px; font-size: 13.5px; box-shadow: var(--shadow);
  animation: toastIn .2s ease-out;
}
.toast.err { border-color: rgba(226,87,79,.6); color: #ffc9c3; }
.toast.good { border-color: rgba(67,192,125,.6); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* 结算浮层 */
.result-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 8px; box-sizing: border-box;
  background: rgba(4, 12, 16, .72); border-radius: 46% / 50%; z-index: 60; animation: toastIn .25s;
}
.result-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 22px 26px; min-width: 280px; box-shadow: var(--shadow); text-align: center;
  display: flex; flex-direction: column;
}
/* 名次列表自己滚动：面板被限高时，按钮和倒计时仍然留在面板里 */
.result-card .rrows { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
.result-card h3 { margin: 0 0 14px; color: var(--gold); font-size: 17px; }
.result-card .rrow { display: flex; justify-content: space-between; gap: 18px; padding: 6px 0; font-size: 14px; border-bottom: 1px dotted rgba(255,255,255,.1); }
.result-card .rrow.one { color: var(--gold); font-weight: 700; }
.result-card .close { margin-top: 16px; width: 100%; }
/* 每一手的结算面板：牌桌还看得见，底色比终局结算淡一些 */
/* 用淡入而不是上滑：位移动画会让面板在入场那一瞬间压住手牌，位置也就不稳 */
.result-overlay.settle { background: rgba(4, 12, 16, .55); animation: fadeIn .18s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.result-card.jackpot {
  border-color: rgba(230, 193, 121, .8);
  box-shadow: 0 0 0 1px rgba(230, 193, 121, .45), 0 0 34px rgba(230, 193, 121, .35), var(--shadow);
  animation: jackpotGlow 1.5s ease-in-out 3;
}
/* 梭哈拿下底池：标题后面补一句，配着号角一起出现 */
.result-card.jackpot h3 .jackpot-tag {
  display: inline-block; margin-left: 6px; padding: 1px 8px; vertical-align: middle;
  font-size: 12px; color: #23180a; border-radius: 999px;
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
}
@keyframes jackpotGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(230, 193, 121, .35), 0 0 12px rgba(230, 193, 121, .18), var(--shadow); }
  50% { box-shadow: 0 0 0 2px rgba(230, 193, 121, .9), 0 0 44px rgba(230, 193, 121, .5), var(--shadow); }
}
/* 大牌型赢下：和梭哈同一个金边，按牌型分档加强（同花顺最隆重） */
.result-card.bigwin {
  border-color: rgba(230, 193, 121, .8);
  box-shadow: 0 0 0 1px rgba(230, 193, 121, .4), 0 0 28px rgba(230, 193, 121, .3), var(--shadow);
  animation: jackpotGlow 1.4s ease-in-out 2;
}
.result-card.bigwin.tier3 { animation: jackpotGlow 1.6s ease-in-out 3; }
.result-card.jackpot h3 .jackpot-tag,
.result-card.bigwin h3 .jackpot-tag {
  display: inline-block; margin-left: 6px; padding: 1px 8px; vertical-align: middle;
  font-size: 12px; color: #23180a; border-radius: 999px;
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
}
/* 连胜小火苗：挂在结算行的人名后面 */
.result-card .rrow .rstreak {
  display: inline-block; margin-left: 6px; padding: 0 6px; font-size: 11px;
  color: #ffb347; background: rgba(255, 140, 40, .14);
  border: 1px solid rgba(255, 150, 60, .45); border-radius: 999px;
}

/* ---- 牌桌动效：筹码飞行 / 撒花 / 底池分档 / 翻牌 ---- */
.fx-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 80; border-radius: inherit; }
.fly-chip {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe6ad, #d9a441 60%, #8a5f16);
  border: 1px solid rgba(255, 244, 214, .8);
  box-shadow: 0 2px 5px rgba(0,0,0,.5); will-change: transform, opacity;
}
.confetti { position: absolute; border-radius: 1px; will-change: transform, opacity; }

/* 底池越大越亮：50 / 120 / 250 个大盲三档 */
.pot.pot-warm { color: #ffe6ad; border-color: rgba(230,193,121,.7); }
.pot.pot-big {
  color: #fff2cf; border-color: rgba(255, 210, 120, .9);
  box-shadow: 0 0 14px rgba(230, 193, 121, .5);
}
.pot.pot-huge {
  color: #23180a; border-color: #ffe6ad;
  background: linear-gradient(180deg, #ffe289, #e6b455);
  box-shadow: 0 0 22px rgba(255, 210, 120, .8);
}
/* 呼吸光改成盖在底池上的一层渐变，只动 opacity：走合成层，不再每帧重绘一遍
   「亮度滤镜」（filter 是整块重新上色，手机上最费）。 */
.pot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0;
}
.pot.pot-big::after {
  background: radial-gradient(circle at 50% 130%, rgba(255, 244, 214, .95), rgba(255, 214, 130, 0) 72%);
  animation: potGlow 1.6s ease-in-out infinite; will-change: opacity;
}
.pot.pot-huge::after {
  background: radial-gradient(circle at 50% 130%, rgba(255, 255, 240, 1), rgba(255, 224, 150, 0) 72%);
  animation: potGlow 1s ease-in-out infinite; will-change: opacity;
}
@keyframes potGlow {
  0%, 100% { opacity: 0; }
  50% { opacity: .3; }
}

/* 公共牌按街一张张 3D 翻出来（只给新翻的那几张加这个动画） */
.board { perspective: 760px; }
.card.flip-in { animation: flipIn .5s cubic-bezier(.2,.8,.3,1) backwards; }
@keyframes flipIn {
  0%   { transform: rotateY(88deg) scale(.9); opacity: 0; }
  55%  { transform: rotateY(-12deg) scale(1.02); opacity: 1; }
  100% { transform: rotateY(0deg) scale(1); opacity: 1; }
}
.result-card .rsub { font-size: 13px; color: var(--gold); margin: -8px 0 10px; }
.result-card .rrow { align-items: center; }
.result-card .rrow .rname { flex: 1 1 auto; min-width: 4.5em; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-card .rrow .rhand { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }
.result-card .rrow .rval { min-width: 62px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.result-card .rrow .rval.up { color: var(--green); }
.result-card .rrow .rval.down { color: var(--red); }
.result-card .rrow .rstk { min-width: 62px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.result-card .rrow.me { background: rgba(255, 255, 255, .05); border-radius: 8px; padding-left: 8px; padding-right: 8px; }
.result-card .rnote { font-size: 12.5px; color: var(--text); margin-top: 10px; min-height: 16px; }
.result-card .rnote.dim { color: var(--muted); margin-top: 2px; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }


/* =====================================================================
   响应式：平板 / 手机
   ===================================================================== */
button, .tab, .stab { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* 只有小屏才显示的控件（房间里的聊天面板开关） */
.only-mobile { display: none; }

/* ---------- 窄屏 / 横屏手机：左右布局整体收缩 ---------- */
@media (max-width: 900px) {
  :root {
    --seat-w: 104px; --seat-h: 146px;
    --card-w: 42px; --card-h: 58px;
    --card-sm-w: 28px; --card-sm-h: 39px;
  }
  .lobby-body { flex-direction: column; }
  .panel { min-width: 0; }
  /* 竖排时两块榜按内容高度排，不抢高度 */
  .rank-col > .panel { flex: none; }
  .room-body { gap: 10px; padding: 10px; }
  .side { width: 250px; }
  .felt { min-height: 236px; border-width: 9px; }
  .board { gap: 5px; }
  .seat .name { font-size: 12.5px; }
  .seat .stack { font-size: 12px; }
  .seat .bubble, .seat .chips { font-size: 11px; }
  .seat .dealer { width: 20px; height: 20px; line-height: 20px; font-size: 10px; top: -8px; right: -8px; }
  .pot { font-size: 12.5px; padding: 4px 14px; }
  .table-center { font-size: 12px; }
  .action-bar { min-height: 62px; padding: 10px 12px; gap: 8px; }
  .action-bar .fold, .action-bar .call { padding: 11px 15px; font-size: 14px; }
  .action-bar .allin { padding: 11px 13px; font-size: 14px; }
  .raise-box { min-width: 160px; }
  .result-card { min-width: 0; width: min(86vw, 320px); padding: 18px 16px; }
  .result-card h3 { font-size: 15.5px; margin-bottom: 10px; }
  .result-card .rrow { font-size: 13px; padding: 5px 0; gap: 8px; }
  .result-card .rrow .rval, .result-card .rrow .rstk { min-width: 52px; }
}

/* ---------- 竖屏手机：牌桌在上，聊天面板在下 ---------- */
@media (max-width: 700px) and (orientation: portrait) {
  :root {
    --seat-w: 92px; --seat-h: 128px;
    --card-w: 38px; --card-h: 54px;
    --card-sm-w: 26px; --card-sm-h: 37px;
  }
  input, select { font-size: 16px; }          /* 避免 iOS 聚焦输入框时整页放大 */
  .only-mobile { display: inline-flex; align-items: center; justify-content: center; }

  #screen-auth { padding: 14px; align-items: flex-start; }
  .auth-card { margin-top: 4vh; padding: 22px 18px 18px; border-radius: 16px; }
  .brand h1 { font-size: 24px; }

  /* 顶栏：第一行房间信息，第二行按钮铺满，方便单手指点 */
  .topbar { padding: 7px 9px; gap: 6px; }
  .topbar-left { flex: 1 1 auto; gap: 6px; min-width: 0; }
  .topbar-right { flex: 1 1 100%; gap: 5px; }
  .topbar-right > button { flex: 1 1 0; min-height: 40px; padding: 9px 4px; font-size: 13px; }
  .pill { font-size: 11.5px; padding: 3px 9px; max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pill.code { letter-spacing: 2px; }
  #btn-side.on { background: rgba(230, 193, 121, .22); color: var(--gold); border-color: rgba(230, 193, 121, .55); }

  /* 牌桌占满剩余高度，聊天面板固定在下方 */
  .room-body { flex-direction: column; gap: 8px; padding: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); overflow: hidden; }
  .table-wrap { flex: 1 1 auto; min-height: 0; gap: 8px; }
  .felt { flex: 1 1 auto; min-height: 0; border-width: 8px; }
  .felt::after { inset: 10px; }
  .action-bar { flex: none; min-height: 0; padding: 8px 10px; gap: 7px; }
  .action-bar .fold, .action-bar .call { flex: 1 1 auto; padding: 12px 8px; font-size: 15px; }
  .action-bar .allin { flex: 1 1 auto; padding: 12px 8px; font-size: 14px; }
  .raise-box { flex: 1 1 52%; min-width: 0; order: 3; }
  .raise-box .amount { min-width: 58px; font-size: 14px; }
  .action-bar .ghost.small { order: 3; flex: 0 0 auto; }
  .quick-bets { order: 4; flex: 1 1 100%; gap: 5px; }
  .quick-bets button { padding: 8px 2px; font-size: 12px; min-height: 34px; }
  .action-bar .waiting { font-size: 13.5px; }

  .seat .plate { padding: 5px 8px; }
  .seat .name { font-size: 12px; }
  .seat .stack { font-size: 11.5px; }
  .seat .chips { font-size: 11px; padding: 2px 8px; }

  /* 操作栏：倒计时改成压在顶边上，省一行高度 */
  .action-bar { position: relative; overflow: hidden; }
  .action-bar .countdown { position: absolute; left: 0; right: 0; top: 0; width: auto; height: 3px; border-radius: 0; }

  .emoji-bar { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding: 6px 8px 2px; }
  .emoji-bar button { width: 32px; height: 32px; font-size: 20px; }
  #chat-form { padding: 7px 8px; gap: 6px; }
  #chat-form .emoji-toggle { width: 40px; font-size: 18px; }

  .side { width: auto; flex: none; height: min(32vh, 210px); min-height: 116px; }
  #screen-room.side-collapsed .side { display: none; }

  /* 大厅：先看房间列表，创建房间排在后面 */
  .lobby-body { padding: 10px; gap: 10px; }
  /* 只认大厅直属的面板：榜列里的金牌榜也是某个容器的 first-child，
     不加 > 会被一起排到光头榜后面 */
  .lobby-body > .panel:first-child { order: 2; }
  .lobby-body .rank-col { order: 3; min-width: 0; }
  .lobby-body .panel.grow { order: 1; min-height: 320px; }
  .row { flex-wrap: wrap; }
  .row label { flex: 1 1 42%; }
  .room-row { gap: 8px; }
  .room-row > div:first-child { min-width: 0; }
  .room-row button { flex: none; }
  .join-box button { flex: none; white-space: nowrap; }
  .toast { font-size: 13px; padding: 9px 14px; max-width: 88vw; }
  .result-card { width: min(90vw, 320px); }
}
/* ---------- 横屏手机（屏幕矮）：左右布局但压扁 ---------- */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 560px) {
  :root {
    --seat-w: 80px; --seat-h: 88px;
    --card-w: 32px; --card-h: 44px;
    --card-sm-w: 22px; --card-sm-h: 31px;
    --ring-start: 0;   /* 横屏矮屏：座位挪到左右两侧，中间留给公共牌 */
  }
  .topbar { padding: 5px 8px; gap: 6px; }
  .topbar-right > button { padding: 6px 9px; font-size: 12.5px; }
  .pill { font-size: 11px; padding: 3px 8px; }
  .room-body { padding: 8px; gap: 8px; }
  .table-wrap { gap: 6px; }
  .felt { min-height: 0; border-width: 7px; }
  .side { width: 196px; }
  .action-bar { min-height: 0; padding: 6px 9px; gap: 7px; }
  .action-bar .fold, .action-bar .call { padding: 9px 12px; font-size: 13.5px; }
  .action-bar .allin { padding: 9px 11px; font-size: 13.5px; }
  .raise-box { min-width: 110px; }
  .raise-box .amount { min-width: 54px; font-size: 13px; }
  .raise-box button { padding: 9px 12px; font-size: 13.5px; }
  .pot { font-size: 10.5px; padding: 2px 9px; }
  .seat .plate { padding: 4px 6px; border-radius: 10px; }
  .seat .name { font-size: 11.5px; }
  .seat .stack { font-size: 11px; }
  .seat .bubble, .seat .chips { font-size: 10.5px; padding: 2px 7px; }
  .seat .dealer { width: 17px; height: 17px; line-height: 17px; font-size: 9px; top: -7px; right: -7px; }
  .stab { padding: 8px; font-size: 12.5px; }
  .chat-lines, .log-lines, .info-box { padding: 9px; font-size: 12.5px; line-height: 1.6; }
  .emoji-bar { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding: 6px 8px 2px; }
  .emoji-bar button { width: 28px; height: 28px; font-size: 18px; }
  #chat-form { padding: 7px; gap: 6px; }
  #chat-form .send { padding: 0 12px; font-size: 13px; }
  #chat-form .emoji-toggle { width: 36px; font-size: 17px; }
}

/* 手机浏览器：用动态视口高度，地址栏伸缩时底部按钮不会被顶出屏幕 */
@supports (height: 100dvh) {
  html, body { height: 100dvh; }
}
/* ---------- 竖屏 + 屏幕矮（老的 5 寸小屏）：再压一档 ---------- */
@media (max-width: 700px) and (orientation: portrait) and (max-height: 700px) {
  :root {
    --seat-w: 80px; --seat-h: 100px;
    --card-w: 30px; --card-h: 36px;
    --card-sm-w: 20px; --card-sm-h: 27px;
  }
  .topbar { padding: 6px 8px; }
  .topbar-right > button { min-height: 36px; padding: 7px 4px; font-size: 12.5px; }
  .felt { border-width: 7px; }
  .side { height: 124px; }
  .action-bar { padding: 7px 8px; gap: 6px; }
  .action-bar .fold, .action-bar .call, .action-bar .allin { padding: 10px 8px; font-size: 14px; }
  .seat .plate { padding: 4px 7px; }
  .seat .name { font-size: 11.5px; }
  .seat .stack { font-size: 11px; }
  .pot { font-size: 10.5px; padding: 2px 9px; }
  .board { gap: 4px; }
}
/* ---------- 手机上别让结算面板盖住自己的手牌 ---------- */
/* 竖屏时「我」在牌桌正下方，面板贴顶放、并压扁一点，手牌就露在下面看得见 */
@media (max-width: 900px) and (orientation: portrait) {
  .result-card { min-width: 0; width: 100%; max-width: 100%; padding: 14px 14px 12px; }
  .result-card h3 { font-size: 16px; margin: 0 0 6px; }
  .result-card .rsub { font-size: 12.5px; margin: 0 0 8px; }
  .result-card .rrow { font-size: 13px; gap: 8px; padding: 4px 0; }
  .result-card .rrow .rval, .result-card .rrow .rstk { min-width: 46px; }
  .result-card .rnote { font-size: 12px; margin-top: 8px; }
  .result-card .rnote.dim { margin-top: 0; }
  .result-card .close { margin-top: 10px; }
}
/* 电脑对手（单人练习） */
.member-row .tag.bot { color: var(--blue); border-color: rgba(74, 168, 224, 0.45); }
.chat-lines .cline.bot .cfrom { color: var(--blue); }
.info-box select { background: rgba(255, 255, 255, 0.06); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; font-size: 12px; }
button.ghost.solo { margin-top: 8px; width: 100%; }

/* ---------- 人多 + 窄屏：整圈座位已经缩了一档（尺寸由脚本覆盖 CSS 变量），
   这里把名牌也压紧一点，中间才留得下底池和公共牌 ---------- */
.felt.dense .seat { gap: 2px; }
.felt.dense .seat .plate { padding: 1px 4px; border-radius: 10px; }
.felt.dense .seat .name { font-size: 10.5px; line-height: 1.15; }
.felt.dense .seat .stack { font-size: 10px; line-height: 1.15; }
.felt.dense .seat .bubble, .felt.dense .seat .chips { font-size: 9.5px; line-height: 1.15; padding: 1px 5px; }
.felt.dense .board { gap: 4px; }
.felt.dense .pot { font-size: 11px; padding: 3px 11px; }


/* =====================================================================
   浮窗聊天：半透明浮在牌桌上，随时开/关，永远不挡住下面的操作栏
   ===================================================================== */
#screen-room .float-close { display: none; }
#screen-room.chat-float .room-body { position: relative; }
#screen-room.chat-float .side {
  position: absolute; top: 8px; right: 8px; z-index: 55;
  width: min(320px, 66vw);
  height: auto; max-height: min(52%, 340px); min-height: 148px;
  /* 真正半透明：0.42 + 磨砂，牌桌和底牌都能透出来才叫浮窗 */
  background: rgba(8, 20, 26, 0.42);
  border-color: rgba(230, 193, 121, 0.42);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(9px) saturate(1.3);
  -webkit-backdrop-filter: blur(9px) saturate(1.3);
  color: #f0f7fb;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
#screen-room.chat-float .side-tabs { background: rgba(6, 18, 24, 0.22); }
#screen-room.chat-float .float-close {
  display: flex; flex: none; width: 42px; align-items: center; justify-content: center;
  color: var(--muted); font-size: 15px; padding: 0;
  background: transparent; border: none; border-radius: 0;
}
.float-close { background: transparent; border: none; }
#screen-room.chat-float .float-close:hover { color: #ffc9c3; }
#screen-room.chat-float .chat-lines,
#screen-room.chat-float .log-lines,
#screen-room.chat-float .info-box { background: transparent; }
#screen-room.chat-float #chat-form { background: rgba(6, 18, 24, 0.34); border-top-color: rgba(255, 255, 255, 0.12); }
#screen-room.chat-float .emoji-bar { background: rgba(6, 18, 24, 0.34); border-top-color: rgba(255, 255, 255, 0.12); }
#screen-room.chat-float .stab { background: transparent; }
#screen-room.chat-float .chat-lines .cline, #screen-room.chat-float .log-lines .lrow { border-bottom-color: rgba(255, 255, 255, 0.1); }
#btn-float.on { background: rgba(230, 193, 121, .22); color: var(--gold); border-color: rgba(230, 193, 121, .55); }
/* 浮窗开在手机上时，面板本身缩一点，别把牌桌挡太多 */
@media (max-width: 700px) and (orientation: portrait) {
  #screen-room.chat-float .side { width: min(300px, 84vw); max-height: min(46%, 300px); }
  #screen-room.chat-float .side-pane.active { min-height: 0; }
  .raise-box .raise-input { width: 66px; padding: 7px 4px; font-size: 13px; }
}

/* =====================================================================
   手机端打磨：点按体验 + 常用语 + 添加到主屏
   ===================================================================== */
/* 打牌区禁掉双击缩放 / 长按选中；输入框和聊天记录照旧可选可滚 */
html, body { overscroll-behavior: none; }
.felt, .seats, .seat, .card, .pot, .board, .table-center {
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.action-bar button, .quick-bets button, .topbar button, .stab { touch-action: manipulation; }

/* 常用语：一条可横滑的短句栏 */
.quick-phrases {
  display: flex; gap: 6px; flex: none; padding: 6px 10px 4px; border-top: 1px solid var(--line);
  overflow-x: auto; overflow-y: hidden; white-space: nowrap;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none;
}
.quick-phrases::-webkit-scrollbar { display: none; }
.quick-phrases button {
  flex: none; white-space: nowrap; padding: 5px 11px; font-size: 12.5px; border-radius: 999px;
  background: rgba(255, 255, 255, .06); color: var(--text); border: 1px solid var(--line);
}
.quick-phrases button:active { transform: scale(.94); background: rgba(230, 193, 121, .2); }
#screen-room.chat-float .quick-phrases { background: rgba(6, 18, 24, 0.34); border-top-color: rgba(255, 255, 255, .12); }

/* 添加到主屏的提示条 */
.install-hint {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 10px 16px 0; padding: 10px 12px; border-radius: 12px;
  background: rgba(230, 193, 121, .1); border: 1px solid rgba(230, 193, 121, .35);
  font-size: 13px; line-height: 1.6;
}
.install-hint[hidden] { display: none; }
.install-hint .install-actions { display: flex; gap: 8px; margin-left: auto; }

/* 竖屏手机：输入框一律 16px（低于 16px 时 iOS 一聚焦就整页放大）；
   滑杆在窄屏上只剩几像素、根本拖不准，索性收掉，改用输入框 + 常用下注额。
   操作栏压成两行——第一行 弃牌/跟注/全下，第二行 加注框 + 常用下注额（窄了可以横滑），
   给牌桌多腾出四十来像素，360×640 的小屏上底池和公共牌才不会挤到座位上。 */
@media (max-width: 700px) and (orientation: portrait) {
  input, select, #action-bar .raise-input { font-size: 16px; }
  .action-bar { padding: 6px 8px; gap: 6px; }
  .raise-box { flex: 1 1 60%; }
  .raise-box input[type=range] { display: none; }
  .raise-box .raise-input { width: 74px; padding: 7px 4px; }
  .raise-box .amount { min-width: 48px; font-size: 14px; }
  .raise-box button { padding: 11px 10px; font-size: 14px; }
  .action-bar .fold, .action-bar .call, .action-bar .allin { min-height: 44px; padding: 11px 6px; font-size: 14.5px; }
  .quick-bets { order: 4; flex: 1 1 34%; gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .quick-bets::-webkit-scrollbar { display: none; }
  .quick-bets button { flex: 0 0 auto; padding: 8px 9px; font-size: 12px; min-height: 30px; }
  .quick-phrases { padding: 5px 8px 3px; }
  .install-hint { margin: 8px 10px 0; padding: 9px 10px; }
  .install-hint .install-actions { margin-left: 0; }
}
/* 屏幕很矮的小手机：顶栏按钮就不再往 44px 上顶，省下的几像素留给牌桌 */
@media (max-width: 700px) and (orientation: portrait) and (min-height: 701px) {
  .topbar-right > button { min-height: 44px; }
}