* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* 苹果安全区变量（26-08-16 全局整改）：viewport-fit=cover 下刘海/Home 指示条不压内容 */
:root { --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); }
/* 高度三级回退：100% → 100dvh（Safari 15.4+）→ --app-height（game.js 实时写入 innerHeight，老版 Safari 也准） */
html, body { height: 100%; height: 100dvh; height: var(--app-height, 100dvh); font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }
/* overscroll-behavior 防下拉橡皮筋刷新；touch-action:manipulation 去掉双击缩放延迟；禁止文字自动放大 */
body { background: #0b3d2e; color: #fff; overflow: hidden; overscroll-behavior: none; touch-action: manipulation; -webkit-text-size-adjust: 100%; }
#app { height: 100%; }
.hidden { display: none !important; }
.screen { height: 100%; }

/* ---------- 登录 / 大厅 / 房间 ---------- */
#screen-auth, #screen-lobby, #screen-room {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px;
  background: radial-gradient(circle at 50% 30%, #147a52, #0b3d2e 75%);
}
.lobby-head {
  display: flex; justify-content: space-between; align-items: center;
  width: 340px; max-width: 92vw; font-size: 16px;
}
.points { color: #ffd98a; }
.points b { font-size: 20px; }
/* 大厅头像按钮 + 头像选择弹窗 */
.avatar-btn { font-size: 26px; cursor: pointer; user-select: none; }
#avatar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; }
#avatar-grid .av-item {
  font-size: 30px; padding: 6px 0; text-align: center; border-radius: 10px;
  background: rgba(255,255,255,.12); cursor: pointer; user-select: none;
}
#avatar-grid .av-item.cur { outline: 2px solid #ffd98a; }
/* 牌桌上玩家名字前的头像 */
.opp .avatar, .my-info .avatar { margin-right: 3px; }
.points-inline { color: #ffd98a; font-size: 12px; }
.create-row {
  display: flex; gap: 10px; align-items: center;
  width: 340px; max-width: 92vw; justify-content: center;
}
select {
  padding: 10px; font-size: 15px; border: none; border-radius: 10px; outline: none;
  background: #fff; color: #222;
}
.room-list-head {
  display: flex; justify-content: space-between; align-items: center;
  width: 340px; max-width: 92vw; font-size: 16px; margin-top: 8px;
}
.small-btn { min-width: 0; padding: 6px 14px; font-size: 13px; border-radius: 8px; }
#room-list {
  list-style: none; width: 340px; max-width: 92vw;
  display: flex; flex-direction: column; gap: 10px;
  max-height: 45vh; overflow-y: auto;
}
#room-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.1); font-size: 14px;
}
#room-list li.empty { justify-content: center; color: rgba(255,255,255,.4); border: 1px dashed rgba(255,255,255,.3); background: none; }
#room-list .r-id { font-size: 18px; font-weight: 700; color: #ffd98a; letter-spacing: 1px; }
#room-list .r-info { flex: 1; line-height: 1.5; }
#room-list .r-info small { color: rgba(255,255,255,.65); }

/* ---------- 结算积分 ---------- */
.score-list { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
/* 结算弹窗按钮行：再来一局（左）+ 退出（右）；未打满规定盘数时"退出"灰色锁定（:disabled） */
.over-btns { display: flex; gap: 10px; width: 100%; }
.over-btns .btn { min-width: 0; flex: 1; padding: 12px 10px; }
.delta-pos { color: #7dff9b; }
.delta-neg { color: #ff8484; }

/* ---------- 管理后台 ---------- */
.admin-body { background: #10241c; overflow: auto; }
#admin-app { min-height: 100%; display: flex; align-items: flex-start; justify-content: center; padding: 30px 14px; }
.admin-box {
  width: 720px; max-width: 96vw; background: #17382c; border-radius: 14px;
  padding: 24px; display: flex; flex-direction: column; gap: 14px;
}
.admin-head { display: flex; justify-content: space-between; align-items: center; }
#admin-login { width: 320px; margin-top: 15vh; }
#user-table { width: 100%; border-collapse: collapse; font-size: 14px; }
#user-table th, #user-table td { padding: 8px 6px; border-bottom: 1px solid rgba(255,255,255,.12); text-align: left; }
#user-table th { color: #9fd8ff; font-weight: 600; }
.adj-cell { display: flex; gap: 8px; align-items: center; }
.adj-cell input { width: 110px; padding: 6px 8px; font-size: 13px; }
/* 后台用户表：列多允许横向滚动；状态/待审核配色 */
.table-wrap { overflow-x: auto; }
#user-table td { white-space: nowrap; }
#user-table .td-small { font-size: 12px; color: #cde8da; }
#user-table .row-pending td { background: rgba(255, 180, 58, .08); }
.st-on { color: #7dff9b; }
.st-off { color: rgba(255,255,255,.45); }
.st-fled { color: #ff8484; font-weight: 700; }
.st-pend { color: #ffb43a; font-weight: 700; }
.add-user-row { flex-wrap: wrap; }
.add-user-row input { width: 150px; }
.admin-rooms { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #cde8da; }
.logo { font-size: 42px; letter-spacing: 4px; text-shadow: 0 3px 8px rgba(0,0,0,.4); }
.sub { color: #cde8da; font-size: 14px; }
input {
  width: 260px; max-width: 80vw; padding: 12px 14px; font-size: 16px;
  border: none; border-radius: 10px; outline: none; text-align: center;
}
.btn {
  min-width: 120px; padding: 12px 26px; font-size: 16px; border: none; border-radius: 10px;
  background: #2a6b52; color: #fff; cursor: pointer; box-shadow: 0 3px 6px rgba(0,0,0,.3);
}
.btn:active { transform: scale(.96); }
.btn.primary { background: linear-gradient(180deg, #ffb43a, #f08c00); color: #4a2c00; font-weight: 700; }
.btn:disabled { opacity: .45; }
.join-row { display: flex; gap: 10px; }
.join-row input { width: 140px; }
.msg { font-size: 13px; color: #ffd98a; min-height: 18px; }
.room-no { color: #ffd98a; font-size: 30px; letter-spacing: 3px; }
/* 登录页底部：共享游戏入口（管理后台配置的其他游戏域名，点击直达；以后新游戏后台加一行即可） */
.game-links { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.game-links a {
  color: #cde8da; font-size: 14px; text-decoration: none;
  border: 1px solid rgba(255,255,255,.35); border-radius: 16px; padding: 6px 14px;
  background: rgba(0,0,0,.25);
}
.game-links a:active { background: rgba(0,0,0,.45); }
/* 管理后台：共享游戏入口编辑行（名称框窄、域名框宽） */
.link-row input.link-name { width: 130px; }
.link-row input.link-url { width: 280px; }
/* ---------- 选座等待室：1~4 号位点选入座（可换座） ----------
   十字架排列：3号位在头顶、4号位在左、2号位在右、1号位在正下方（1、3 对家，2、4 面家） */
#seat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  grid-template-areas: ". s3 ." "s4 . s2" ". s1 .";
  width: 340px; max-width: 92vw; margin-top: 6px;
}
.seat-box.pos-0 { grid-area: s1; } /* 1号位：正下方 */
.seat-box.pos-1 { grid-area: s2; } /* 2号位：右方 */
.seat-box.pos-2 { grid-area: s3; } /* 3号位：头顶（与1号对家） */
.seat-box.pos-3 { grid-area: s4; } /* 4号位：左方 */
.seat-box .seat-dir { font-size: 11px; color: rgba(255,255,255,.55); }
.seat-box {
  padding: 14px 8px; border-radius: 12px; text-align: center;
  background: rgba(255,255,255,.1); font-size: 15px; line-height: 1.7;
}
.seat-box.empty {
  color: rgba(255,255,255,.55); border: 1px dashed rgba(255,255,255,.35);
  background: none; cursor: pointer;
}
.seat-box.empty:active { transform: scale(.96); background: rgba(255,255,255,.08); }
.seat-box.mine { outline: 2px solid #ffd98a; }
.seat-box.taken { cursor: pointer; } /* 点已入座玩家弹出资料（胜率/积分/手机号掩码） */
.seat-box .seat-no { font-size: 13px; color: #ffd98a; font-weight: 700; }
.seat-box .seat-pts { font-size: 12px; color: #cde8da; }

/* ---------- 添加机器人面板（2026-08-15 新增，仅房主可见） ---------- */
.bot-panel {
  width: 340px; max-width: 92vw; margin: 4px auto 8px; padding: 8px 10px;
  border: 1px dashed rgba(255,217,138,.55); border-radius: 12px;
  background: rgba(0,0,0,.22); font-size: 13px; color: #cde8da;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.bot-panel .bot-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.bot-panel select {
  padding: 5px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,.25);
  background: #0b3d2e; color: #eafaf1; font-size: 13px;
}
.bot-panel .sub { margin: 0; font-size: 11px; }
/* 机器人标识：座位/牌桌昵称旁的聪明度小标签（弱智/一般/聪明·可接管） */
.bot-tag {
  display: inline-block; padding: 0 5px; border-radius: 6px; font-size: 10px;
  background: rgba(255,217,138,.18); color: #ffd98a; border: 1px solid rgba(255,217,138,.4);
  vertical-align: 1px;
}

/* ---------- 牌桌 ---------- */
#table {
  position: relative; height: 100%;
  background: radial-gradient(ellipse at 50% 40%, #178a5c, #0b3d2e 80%);
}
/* 十字架座位：只有对家在顶部居中（限宽不再占满整行），左家/右家在牌桌中部两侧，本家在下方 */
.opp {
  position: absolute; padding: 5px 9px; border-radius: 10px;
  background: rgba(0,0,0,.3); font-size: 12px; line-height: 1.55;
  cursor: pointer; /* 点头像/名字弹出玩家资料（胜率/积分/手机号掩码） */
}
/* 左/右两家头像名字下移约一张牌高度（+84px）：横屏时不再与右上角设置/托管/聊天按钮重叠 */
.opp-left { left: 8px; top: calc(18% + 84px); max-width: 38vw; }
.opp-right { right: 8px; top: calc(18% + 84px); max-width: 38vw; text-align: right; }
/* 对家（四人桌正上方；top 加刘海安全区） */
.opp-top { top: calc(8px + var(--sat)); left: 50%; transform: translateX(-50%); text-align: center; max-width: 52vw; }
.opp .count { color: #ffd98a; font-size: 16px; font-weight: 700; }
.opp .badge, .my-info .badge {
  display: inline-block; padding: 1px 6px; border-radius: 6px; font-size: 11px;
  background: #f08c00; color: #fff; margin-left: 4px;
}
/* 至尊徽章（金红渐变，全场可见） */
.opp .badge.supreme, .my-info .badge.supreme { background: linear-gradient(180deg, #ffd98a, #d61f26); font-weight: 700; }
.opp .offline { color: #ff8484; font-size: 11px; }

/* 出牌区：跟随到各家名字底下（左/右家出牌区在其名字下方，对家出牌区在顶部名字下方） */
.play-zone { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 56px; }
/* 出牌区跟随名字同步下移（名字 +84px 后，出牌区在其下方 58px） */
.play-left { left: 8px; top: calc(18% + 142px); max-width: 42vw; align-items: flex-start; }
.play-right { right: 8px; top: calc(18% + 142px); max-width: 42vw; align-items: flex-end; }
/* 对家出牌区：顶部对家名字的正下方 */
.play-top { left: 50%; transform: translateX(-50%); top: calc(64px + var(--sat)); max-width: 60vw; }
.play-mine { left: 50%; transform: translateX(-50%); bottom: calc(236px + var(--sab)); max-width: 80vw; }
/* 牌型名标签（领出/压牌显示牌型，贴牌显示"贴牌"；至尊金红） */
.play-label {
  margin-top: 3px; padding: 2px 12px; background: rgba(0,0,0,.45); border-radius: 12px;
  font-size: 13px; color: #ffd98a;
}
.play-label.supreme-label {
  background: linear-gradient(180deg, #ffd98a, #d61f26); color: #fff; font-weight: 700;
}
.tiles-row { display: flex; gap: 3px; }

/* ---------- 栋牌展示区（26-08-16 新增）：谁赢了哪几张牌常显在头像/出牌区附近 ----------
   只读展示：pointer-events:none + z-index:1（控制件 z-index≥10 永远浮在上层可点）；
   每一戙赢牌包一个 .won-group 黑底小框（几张牌=收几栋，与"牌栋=X"数字对应） */
.won-zone {
  position: absolute; display: flex; gap: 3px; z-index: 1;
  pointer-events: none; /* 不可点：绝不遮挡出牌/拉牌/按钮操作 */
}
.won-group {
  display: flex; gap: 1px; padding: 2px; flex: 0 0 auto;
  background: rgba(0,0,0,.28); border-radius: 5px;
}
/* 左/右家栋牌：各家出牌区正下方（竖屏出牌区 top:18%+142，牌+牌型标签约占 80px），
   多戙自动换行向下堆（极端 8 栋也放得下），不碰出牌区不碰聊天气泡 */
.won-left { left: 8px; top: calc(18% + 226px); max-width: 42vw; flex-wrap: wrap; }
.won-right { right: 8px; top: calc(18% + 226px); max-width: 42vw; flex-wrap: wrap; justify-content: flex-end; }
/* 对家栋牌（竖屏口径）：对家出牌区（top:64，高约80）正下方，单行横滑（极端多戙可左右滑）；
   横屏由横屏媒体查询整体改写为"对家名字框左侧置顶、靠右换行堆"（26-08-17 整改，安卓+苹果同生效） */
.won-top {
  left: 50%; transform: translateX(-50%); top: calc(142px + var(--sat));
  max-width: 70vw; flex-wrap: nowrap; overflow-x: auto;
}
/* 自己栋牌第一行：左下角"我的名字"（bottom:198，高约44）正上方一行（26-08-17 随名字同步上移 152→242）；
   26-08-17⑨ 整改：一排只放 4 栋（game.js splitMineWon 按栋数拆行，组不拆散），不再横滑溢出
   （原单行横滑第 5、6 栋被挤出可视区，逻辑错误已修） */
.won-mine {
  left: 10px; bottom: calc(242px + var(--sab));
  max-width: 40vw; flex-wrap: nowrap; overflow: visible;
}
/* 自己栋牌第二行（26-08-17⑨ 新增）：第 5、6、7 栋换行显示在自己名字（bottom:198，高约44）正下方，清晰明了 */
.won-mine2 {
  left: 10px; bottom: calc(152px + var(--sab));
  max-width: 40vw; flex-wrap: nowrap; overflow: visible;
}
/* 状态文字（倒计时为圆形时钟，由 game.js 按头像框 fixed 定位，不参与底部偏移分层，见下方 #countdown） */
/* 26-08-17⑤：竖屏再上移到"自己打出的牌"（.play-mine bottom:236 + 小牌高约62 + 间距6 = 304）正上方，
   约屏幕居中位置，"等待某人出牌…"一眼可见；横屏在右上角 top 定位不受影响 */
/* 26-08-17⑥：仅此一行状态字再上移两行文字高度（13px 字号×行高约20px×2 ≈ 40px：304→344），其它元素不动 */
#status-bar {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(344px + var(--sab)); z-index: 10;
  font-size: 13px; color: #cde8da; text-shadow: 0 1px 3px rgba(0,0,0,.5);
  max-width: 92vw; text-align: center; white-space: nowrap;
}
#action-bar {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(122px + var(--sab)); z-index: 10;
  display: flex; gap: 10px; flex-wrap: nowrap; justify-content: center; max-width: 96vw; /* 出牌/贴牌/提示 三按钮固定一行不折行（整牌按钮已移至牌桌左上角 #btn-sort）；折行会向上顶盖住倒计时 */
}
#action-bar .btn { min-width: 84px; padding: 10px 14px; font-size: 15px; white-space: nowrap; } /* 3×84+2×10=272px，最窄320px屏也放得下 */

/* 26-08-17：自己名字上移一张牌高度（108→198），给竖屏轮到自己时贴在屏幕最左侧、名字正下方的倒计时圆钟让位 */
.my-info { position: absolute; left: 10px; bottom: calc(198px + var(--sab)); z-index: 10; font-size: 13px; line-height: 1.6; cursor: pointer; }
.my-info .count { color: #ffd98a; font-weight: 700; }

.my-hand {
  position: absolute; bottom: calc(12px + var(--sab)); left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; padding: 0 8px; min-height: 100px;
}
/* 手牌行：一行或两行（竖屏牌多时自动拆两行，见 game.js renderHand） */
.hand-row { display: flex; justify-content: center; }
.my-hand.two-rows .hand-row:first-child { margin-bottom: 6px; } /* 两行完全不重叠，每行牌完整显示 */

/* 竖屏两行手牌时，上方操作区/状态栏/出牌区整体上移，避免被手牌遮挡（倒计时为圆形时钟按头像定位，不在此列） */
#table.two-rows-hand .my-info { bottom: calc(274px + var(--sab)); } /* 26-08-17：名字上移一张牌高度（184→274），给贴左边缘的倒计时圆钟让位 */
#table.two-rows-hand #action-bar { bottom: calc(198px + var(--sab)); }
#table.two-rows-hand #status-bar { bottom: calc(420px + var(--sab)); } /* 26-08-17⑤：随 play-mine(312)+小牌62+间距6 同步上移到自家出牌正上方；26-08-17⑥ 仅此状态字再上移两行文字高度（380→420） */
#table.two-rows-hand .play-mine { bottom: calc(312px + var(--sab)); }
#table.two-rows-hand .won-mine { bottom: calc(322px + var(--sab)); } /* 在我的名字框(bottom:274,高约44)正上方，不压名字（26-08-17 随名字同步上移 232→322） */
#table.two-rows-hand .won-mine2 { bottom: calc(228px + var(--sab)); } /* 26-08-17⑨：第 5 栋起换行在名字框(bottom:274)正下方 */

/* ---------- 化州打骨牌（竖直长条牌：上下两段骰子点面圆点 / 牌名小字） ---------- */
/* 点子按服务端下发的 dots 点位（x/y 0~1 比例）绝对定位在 .face 牌面上；
   手牌不重叠排列（重叠会挡住点子认不出牌） */
.tile {
  width: 46px; flex: 0 0 auto;
  background: linear-gradient(180deg, #faf6ea, #ece4cf); /* 象牙牌面 */
  border-radius: 6px; border: 1px solid #b8ab8c;
  box-shadow: 0 2px 4px rgba(0,0,0,.35);
  color: #222; cursor: pointer; user-select: none;
  transition: transform .12s;
  display: flex; flex-direction: column; padding: 3px;
}
/* 手牌宽度走 CSS 变量 --htile-w（26-08-17 安卓排版整改）：game.js renderHand 一行放不下时按屏宽
   等比缩牌保持一行（安卓竖屏 8 张一行、比例与苹果一致），缩到 34px 仍放不下才拆两行；
   未缩牌时变量缺省=46px（苹果/iPhone 显示效果与整改前完全一致）；点子/牌名按 46px 基准等比缩放 */
.hand-row .tile { width: var(--htile-w, 46px); margin-left: 6px; }
.hand-row .tile:first-child { margin-left: 0; }
.hand-row .tile .face { height: calc(var(--htile-w, 46px) * 1.435); } /* 66/46 */
.hand-row .tile .dot { width: calc(var(--htile-w, 46px) * 0.174); height: calc(var(--htile-w, 46px) * 0.174); } /* 8/46 */
.hand-row .tile .tname { font-size: calc(var(--htile-w, 46px) * 0.239); line-height: calc(var(--htile-w, 46px) * 0.304); } /* 11/46、14/46 */
.tile.selected { transform: translateY(-16px); }
.tile .face { position: relative; height: 66px; margin: 2px 1px; }
.tile .dot {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: #2b2b2b; transform: translate(-50%, -50%);
}
.tile .dot.red { background: #d61f26; }
.tile .tname { font-size: 11px; line-height: 14px; text-align: center; color: #6b5f45; font-weight: 700; }
/* 小牌（出牌区/对家用） */
.tile.small { width: 30px; cursor: default; padding: 2px; }
.tile.small .face { height: 46px; margin: 1px; }
.tile.small .dot { width: 5px; height: 5px; }
.tile.small .tname { font-size: 8px; line-height: 10px; }
/* 牌背（贴牌面朝下） */
.tile.back {
  background: repeating-linear-gradient(45deg, #14352a 0 5px, #1d4a3a 5px 10px);
  border-color: #0e2a20; height: 90px;
}
.tile.back.small { height: 62px; }
/* 迷你牌：复用 .tile 点位画法整体缩小（栋牌展示专用，不可点）；
   26-08-17 修正：本块必须位于 .tile.small 之后——迷你牌元素同时带 .small+.tiny 两个类（game.js tileTinyEl），
   两者特异性相同、靠后胜出；此前本块写在 .tile.small 之前导致迷你牌被覆盖成 30px 与出牌一样大
   （安卓竖屏不进短屏压缩媒体查询必现；苹果短屏因媒体查询内 tiny 在 small 之后才正常） */
.tile.tiny { width: 22px; padding: 1px; cursor: default; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.tile.tiny .face { height: 30px; margin: 1px 0; }
.tile.tiny .dot { width: 4px; height: 4px; }
.tile.tiny .tname { font-size: 7px; line-height: 9px; }

/* ---------- 管理后台：牌形核对展示区（仅 admin.html 用，复用 .tile/.face/.dot 画法） ---------- */
#tile-show { display: flex; flex-direction: column; gap: 10px; }
.tile-group-title { color: #9fd8ff; font-size: 14px; font-weight: 600; }
.tile-group { display: flex; flex-wrap: wrap; gap: 12px; }
.tile-check { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tile-check .tile { width: 54px; cursor: default; }
.tile-check .tile .face { height: 82px; }
.tile-check .tile .dot { width: 9px; height: 9px; }
.tile-check .tinfo { font-size: 11px; line-height: 15px; text-align: center; color: #cfe8d8; }

/* ---------- 倒计时：小圆形时钟 + 秒数跳动（26-08-17 整改：取消横条，轮到谁跳到谁的头像旁，含自己；照搬吊主升级已验证方案） ----------
   位置由 game.js positionCountdown() 按当前操作者头像框实时定位（fixed），≤5 秒变红脉冲提醒 */
#countdown {
  position: fixed; z-index: 18; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(0,0,0,.65); border: 2px solid #ffd98a; color: #ffd98a;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
#countdown.cd-urgent { border-color: #ff5252; color: #ff8484; animation: cdPulse 1s ease-in-out infinite; }
@keyframes cdPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* ---------- 牌桌右上角：设置按钮 + 托管小开关 ---------- */
#game-ctrl {
  position: absolute; top: calc(8px + var(--sat)); right: 8px; z-index: 15;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
#btn-settings {
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: rgba(0,0,0,.4); color: #fff; font-size: 17px; cursor: pointer;
}
/* 牌桌左上角：整牌按钮（与右上角设置按钮对侧对齐），操作区只保留 出牌/贴牌/提示 三按钮 */
#btn-sort {
  position: absolute; top: calc(8px + var(--sat)); left: 8px; z-index: 15;
  height: 38px; padding: 0 14px; border-radius: 19px; border: none;
  background: rgba(0,0,0,.4); color: #fff; font-size: 15px; cursor: pointer;
}
#btn-sort:active { transform: scale(.95); }
/* 整牌下方：连庄滚数（本局X蚊滚）+ 强数池 */
#bank-info {
  position: absolute; top: calc(52px + var(--sat)); left: 8px; z-index: 15;
  display: flex; flex-direction: column; gap: 3px;
  font-size: 12px; line-height: 1.4; pointer-events: none;
}
#bank-info div {
  padding: 2px 10px; border-radius: 10px; background: rgba(0,0,0,.4);
  color: #ffd98a; width: max-content;
}
#bank-pool { color: #7dff9b; }
/* 强数下方：封强按钮（仅手牌满足 文全小于鹅+武全小于七 时由 game.js 显示；bank-info 容器 pointer-events:none，按钮需单独恢复可点） */
#btn-fengqiang {
  pointer-events: auto; width: max-content;
  padding: 4px 16px; border-radius: 12px; border: none;
  background: linear-gradient(180deg, #ff8585, #d63030); color: #fff;
  font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,.35);
}
#btn-fengqiang:active { transform: scale(.95); }
/* 庄家徽章（金底黑字，全场可见） */
.opp .badge.banker, .my-info .badge.banker { background: linear-gradient(180deg, #ffd98a, #f08c00); color: #4a2c00; font-weight: 700; }
/* 首盘掷骰定庄动画弹窗 */
.dice-box h2 { color: #ffd98a; }
#dice-row { display: flex; gap: 18px; justify-content: center; }
.dice {
  font-size: 64px; line-height: 1; color: #fff; display: inline-block;
  text-shadow: 0 3px 8px rgba(0,0,0,.5);
}
.dice.rolling { animation: dice-tumble .18s linear infinite; }
@keyframes dice-tumble {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(12deg) scale(1.12); }
  100% { transform: rotate(-10deg) scale(1); }
}

/* 通用拨动开关（设置弹窗用大的 .switch，牌桌托管用小的 .mini-switch） */
.switch, .mini-switch { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.switch input, .mini-switch input { display: none; }
.switch .slider, .mini-switch .slider {
  position: relative; display: inline-block; border-radius: 999px;
  background: rgba(255,255,255,.25); transition: background .15s; flex: 0 0 auto;
}
.switch .slider { width: 46px; height: 26px; }
.mini-switch .slider { width: 34px; height: 19px; }
.switch .slider::after, .mini-switch .slider::after {
  content: ''; position: absolute; top: 2px; left: 2px; border-radius: 50%;
  background: #fff; transition: left .15s;
}
.switch .slider::after { width: 22px; height: 22px; }
.mini-switch .slider::after { width: 15px; height: 15px; }
.switch input:checked + .slider, .mini-switch input:checked + .slider { background: #2fbf71; }
.switch input:checked + .slider::after { left: 22px; }
.mini-switch input:checked + .slider::after { left: 17px; }
.mini-switch span { font-size: 11px; color: #ffd98a; }

/* 设置弹窗行 */
.set-row {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; font-size: 15px; padding: 2px 6px;
}
/* 设置弹窗紧凑排版（2026-08-10）：背景音乐/语音播报 两开关合并同一行 */
.set-row-dual { justify-content: space-around; }
.set-row-dual .set-item { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
/* 修改名字 / 手机号换绑：输入框+保存按钮 同一水平行不折行（修改密码保持原多行布局不变） */
.set-sec .set-line.one-row { flex-wrap: nowrap; }
.set-sec .set-line.one-row input { flex: 1; width: auto; min-width: 0; }
.set-sec .set-line.one-row .btn { width: auto; flex: 0 0 auto; }
/* 申请结束游戏：设置弹窗底部整行按钮（关闭/强制退出底下） */
.end-game-btn { width: 100%; flex: 0 0 auto; background: linear-gradient(180deg, #4a90d9, #2b5f9e); font-weight: 700; }
/* 设置弹窗-账号资料区：修改名字 / 修改密码 / 手机号换绑 */
.set-sec { width: 100%; border-top: 1px solid rgba(255,255,255,.18); padding-top: 10px; }
.set-sec .set-title { font-size: 13px; color: #ffd98a; text-align: left; margin-bottom: 6px; }
.set-sec .set-line { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.set-sec .set-line input { width: 100%; padding: 9px 12px; font-size: 14px; text-align: left; }
.set-sec .set-line .btn { width: 100%; }
.set-sec .set-info { font-size: 12px; color: #cde8da; margin-top: 6px; text-align: left; }
/* 设置弹窗重排：内容区 .set-body 单独滚动，底部按钮区 .set-foot 固定不动，
   小屏手机不用滚到底也能直接点到"关闭 / 强制退出" */
.settings-box { overflow: hidden; max-height: 88vh; }
.settings-box .set-body {
  width: 100%; flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.settings-box .set-foot { display: flex; gap: 10px; width: 100%; flex: 0 0 auto; }
.settings-box .set-foot .btn { flex: 1; min-width: 0; padding: 12px 10px; }
/* 危险操作按钮（强制退出）：红色警示 */
.btn.danger { background: linear-gradient(180deg, #d64545, #a02020); color: #fff; font-weight: 700; }
/* 大厅建房底分下拉选择器（26-08-17 整改：强制 50 的倍数，50~500 共 10 档，替代原 1~100 数字输入框） */
#base-score { width: 96px; padding: 10px; text-align: center; }

/* 大厅建房第二行：密码 / 显牌数 / 观战 */
.create-opts { flex-wrap: wrap; }
.create-opts input { width: 130px; padding: 8px 10px; font-size: 13px; }
.check-line { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #cde8da; cursor: pointer; }
.check-line input { width: auto; }

/* ---------- 弹窗 / 提示 ---------- */
.modal {
  position: absolute; inset: 0; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; z-index: 20;
}
.modal-box {
  width: 280px; max-width: 85vw; padding: 26px 20px; border-radius: 14px; text-align: center;
  background: linear-gradient(180deg, #1c7a55, #0f4d36); box-shadow: 0 8px 30px rgba(0,0,0,.5);
  display: flex; flex-direction: column; gap: 14px; align-items: center;
  max-height: 86vh; overflow-y: auto; /* 内容多时（如设置弹窗）允许纵向滚动 */
}
#over-title { font-size: 26px; color: #ffd98a; }
#over-detail { font-size: 14px; color: #cde8da; }
.toast {
  position: fixed; left: 50%; top: 18%; transform: translateX(-50%);
  padding: 10px 22px; background: rgba(0,0,0,.75); border-radius: 20px;
  font-size: 15px; z-index: 50; max-width: 80vw; text-align: center;
}

/* ---------- 快捷常用语（💬 按钮在托管开关下方，与设置按钮同款圆形） ---------- */
#btn-chat {
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: rgba(0,0,0,.4); color: #fff; font-size: 17px; cursor: pointer;
}
/* 常用语面板：右上角 💬 下方展开，一句一个按钮（竖屏竖排；横屏由横屏媒体查询改为顶部双列网格，见下） */
#chat-panel {
  position: absolute; top: calc(146px + var(--sat)); right: 8px; z-index: 16;
  display: flex; flex-direction: column; gap: 6px; width: 216px;
  background: rgba(0,0,0,.6); border-radius: 10px; padding: 8px;
}
.chat-item {
  border: none; border-radius: 8px; padding: 8px 10px; text-align: left;
  background: rgba(255,255,255,.14); color: #fff; font-size: 13px; cursor: pointer;
}
.chat-item:active { background: rgba(255,255,255,.32); }
/* 聊天气泡：左家/对家/右家/自己 四个位置，4 秒自动消失（game.js 控制） */
.chat-bubble {
  position: absolute; z-index: 14; max-width: 46vw;
  background: #fff; color: #222; font-size: 13px; line-height: 1.45;
  border-radius: 10px; padding: 7px 10px; box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.chat-bubble-left { left: 10px; top: calc(18% + 130px); }
.chat-bubble-right { right: 10px; top: calc(18% + 130px); }
.chat-bubble-top { left: 50%; transform: translateX(-50%); top: calc(96px + var(--sat)); }
.chat-bubble-mine { left: 10px; bottom: calc(250px + var(--sab)); } /* 26-08-17 随自己名字同步上移一张牌高度（160→250），不跟走会压住名字 */
#table.two-rows-hand .chat-bubble-mine { bottom: calc(326px + var(--sab)); } /* 26-08-17 同步上移（236→326） */

/* ---------- 观战 ---------- */
/* 退出观战按钮：仅观战模式显示（牌桌右上角，💬 按钮下方） */
#btn-watch-exit {
  border: none; border-radius: 14px; padding: 6px 10px;
  background: rgba(214,31,38,.85); color: #fff; font-size: 12px; cursor: pointer;
}
/* 大厅房间列表：已开局房间的观战按钮组 / 禁止观战提示 / 对局中标记 */
#room-list .watch-btns { display: flex; flex-direction: column; gap: 4px; }
#room-list .watch-btn { min-width: 0; padding: 4px 10px; font-size: 12px; border-radius: 8px; }
#room-list .r-nowatch { font-size: 12px; color: rgba(255,255,255,.4); }
#room-list .r-playing { color: #ffd98a; }

/* ---------- 玩家资料弹窗（点名字查看：胜率/积分/手机号掩码） ---------- */
.player-info { width: 100%; font-size: 14px; line-height: 2; color: #eaf7f0; text-align: left; }
.player-info b { color: #ffd98a; }

/* ---------- 竖屏等待室压缩（26-08-17 整改，照搬吊主升级已验证方案） ----------
   苹果 Safari 短屏上"聪明度/允许他人接管/添加机器人/退出房间"被挤出可视区点不到——
   整体压缩间距/字号约 20%、顶部对齐并允许纵向滚动，保证底部按钮完整可见可点 */
@media (orientation: portrait) {
  #screen-room { justify-content: flex-start; overflow-y: auto; gap: 8px; padding: 12px 16px calc(12px + var(--sab)); }
  #screen-room h2 { font-size: 20px; }
  #screen-room .room-no { font-size: 24px; }
  #screen-room > .sub { font-size: 12px; }
  #seat-grid { gap: 8px; margin-top: 0; }
  .seat-box { padding: 8px 6px; font-size: 14px; line-height: 1.5; }
  .bot-panel { gap: 6px; padding: 8px; }
}

/* ---------- 横屏手机专属布局（26-08-17 整改，仅横屏生效，竖屏保持原样；照搬吊主升级已验证排版） ----------
   名字框 left/right:66px 避刘海/挖孔、出牌区在各家名字框正下方、自家出牌回手牌正上方居中、
   状态文字移右上角、自己名字沉左下角、栋牌四处避让落位、气泡跟随、等待室双栏 grid */
@media (orientation: landscape) {
  /* 左/右家名字框：向屏幕中间靠拢避开 iPhone 刘海/挖孔，限宽 140px 长名字自动换行 */
  .opp-left { left: 66px; top: calc(34% - 40px); max-width: 140px; }
  .opp-right { right: 66px; top: calc(34% - 40px); max-width: 140px; }
  /* 对家名字移到最顶，出牌区紧贴其名字框底 */
  .opp-top { top: calc(2px + var(--sat)); }
  .play-top { top: calc(50px + var(--sat)); }
  /* 左/右家出牌区：名字框正下方（框顶 34%-40px + 名字框约46px高 = 34%+6px），水平与名字框对齐 */
  .play-left { left: 66px; top: calc(34% + 6px); max-width: 30vw; align-items: flex-start; }
  .play-right { right: 66px; top: calc(34% + 6px); max-width: 30vw; align-items: flex-end; }
  /* 自己打出的牌：回到自己手牌正上方居中（旧方案右上方 left:74%/top:64 废弃） */
  .play-mine { left: 50%; top: auto; bottom: calc(130px + var(--sab)); max-width: 60vw; }
  /* 状态文字移到右上角空白处（托管开关左侧、对家名字右侧） */
  #status-bar { left: auto; right: 56px; top: calc(8px + var(--sat)); bottom: auto; transform: none; text-align: right; max-width: 40vw; }
  /* 自己名字沉到左下角最底（加半透明底，压在手牌左侧空白处仍可读） */
  .my-info { bottom: calc(14px + var(--sab)); background: rgba(0,0,0,.35); border-radius: 8px; padding: 2px 6px; }
  /* 聊天气泡跟随：左右家挂名字框下方避让出牌区、对家保持居中、自己挂名字上方 */
  .chat-bubble-left { left: 66px; top: calc(34% + 150px); }
  .chat-bubble-right { right: 66px; top: calc(34% + 150px); }
  .chat-bubble-top { top: calc(138px + var(--sat)); }
  .chat-bubble-mine { bottom: calc(44px + var(--sab)); }
  /* 横屏常用语面板（26-08-17⑦ 漏洞整改）：竖排版从 top:146 竖排 8 句约 290px 高，横屏可视高仅 ~350-400px，
     底部几句被裁点不到——横屏改为"对家头像（居中置顶）右侧、多到顶"的双列网格，8 句全部一屏可见可点；
     右缘让开 54px 不遮右上角 ⚙️/托管/💬 按钮列（可随时再按 💬 收合），点面板外任意处也会关闭（game.js 全局监听） */
  #chat-panel {
    top: calc(2px + var(--sat)); right: 54px; left: calc(50% + 92px); width: auto;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px;
    max-height: calc(100% - 130px); overflow-y: auto;
  }
  #chat-panel .chat-item { padding: 6px 8px; font-size: 12px; line-height: 1.3; }
  /* 栋牌避让：左右家在出牌区正下方（自动换行）、自己仍贴右下角；
     对家栋牌 26-08-17 整改：不再堆屏幕中间，改堆放于对家名字框（居中置顶）左侧、同顶对齐，
     靠右换行向下堆（多戙也放得下），更醒目；right:calc(50%+70px) 锚定名字框左缘外侧 */
  .won-left { left: 66px; top: calc(34% + 96px); max-width: 140px; flex-wrap: wrap; }
  .won-right { right: 66px; top: calc(34% + 96px); max-width: 140px; flex-wrap: wrap; justify-content: flex-end; }
  .won-top { left: auto; right: calc(50% + 70px); transform: none; top: calc(2px + var(--sat)); max-width: 22vw; flex-wrap: wrap; justify-content: flex-end; overflow-x: visible; }
  /* 自己栋牌（26-08-17⑨ 整改）：右锚定自动换行、向屏幕中间靠拢——第 5、6 栋加上后第 1 栋自动往中间靠，
     全部可见；原 max-width:110px 不换行，第 5 栋起被挤出屏幕外（逻辑错误已修）；横屏 JS 不拆行（splitMineWon） */
  .won-mine { left: auto; right: 8px; bottom: calc(12px + var(--sab)); max-width: 30vw; flex-wrap: wrap; justify-content: flex-end; overflow: visible; }
  /* two-rows-hand 防御覆盖 6 条：竖屏 two-rows 规则特异度更高，横屏万一触发不被带偏（保持本块坐标） */
  #table.two-rows-hand .my-info { bottom: calc(14px + var(--sab)); }
  #table.two-rows-hand #action-bar { bottom: calc(122px + var(--sab)); }
  #table.two-rows-hand #status-bar { bottom: auto; }
  #table.two-rows-hand .play-mine { bottom: calc(130px + var(--sab)); }
  #table.two-rows-hand .won-mine { bottom: calc(12px + var(--sab)); }
  #table.two-rows-hand .chat-bubble-mine { bottom: calc(44px + var(--sab)); }
  /* 横屏等待室：左右双栏 grid 命名区域精准落位（左栏=十字架座位区纵跨 5 行，右栏从上到下=
     机器人面板/底分说明/十字说明/未入座/退出按钮，全部内容横屏一屏可见；极矮屏兜底可滚动）
     注意：依赖 #screen-room 内 p 的出现次序（nth-of-type），在等待室增删 p 元素必须同步调整 */
  #screen-room {
    display: grid; grid-template-columns: auto auto;
    grid-template-areas:
      "title title"
      "seats bot"
      "seats info1"
      "seats info2"
      "seats pending"
      "seats leave";
    justify-content: center; align-content: center; justify-items: center;
    column-gap: 20px; row-gap: 5px; padding: 6px 10px; overflow-y: auto;
  }
  #screen-room > h2 { grid-area: title; font-size: 17px; line-height: 1.3; }
  #screen-room > h2 .room-no { font-size: 22px; }
  #screen-room > p:nth-of-type(1) { grid-area: info1; }  /* 底分/规则说明 */
  #screen-room > p:nth-of-type(2) { grid-area: info2; }  /* 十字座位说明 */
  #screen-room > .sub { font-size: 12px; text-align: center; max-width: 312px; }
  #pending-line { grid-area: pending; }
  #btn-leave-room { grid-area: leave; min-width: 110px; padding: 9px 22px; font-size: 15px; }
  #seat-grid { grid-area: seats; width: 272px; gap: 8px; margin-top: 0; }
  #seat-grid .seat-box { padding: 8px 6px; font-size: 13px; line-height: 1.5; }
  #bot-panel { grid-area: bot; width: 312px; margin: 0; padding: 6px 8px; font-size: 12px; gap: 4px; }
  #bot-panel .sub { font-size: 11px; }
  .bot-row { gap: 6px; }
  /* 横屏结算弹窗压缩（26-08-17 整改：.modal-box 限高 86vh 整体滚动时，横屏手机可视高仅 ~350-400px，
     "再来一局/退出"按钮被压到滚动区底部看不到——标题/明细/列表缩小、积分列表内部滚动、底部按钮固定永远可见） */
  #over-modal .modal-box { max-height: 92vh; max-height: 92dvh; padding: 12px 16px; gap: 8px; overflow: hidden; }
  #over-modal #over-title { font-size: 20px; }
  #over-modal #over-detail { font-size: 12px; }
  #over-modal .score-list { flex: 0 1 auto; min-height: 0; gap: 4px; font-size: 13px; max-height: 34vh; max-height: 34dvh; overflow-y: auto; }
  #over-modal .over-btns { flex: 0 0 auto; }
  #over-modal .over-btns .btn { padding: 9px 10px; font-size: 15px; }
}

/* ---------- 苹果短屏压缩·竖屏（26-08-16：iPhone SE/8 等可视高 ≤700px，含 Safari 工具栏） ----------
   整体坐标压缩 + 手牌/小牌/迷你牌同步缩小（手牌 40px 与 game.js renderHand 的 compact 判断一致），
   保证两行手牌时也不再顶撞左右家/对家出牌区，Safari 上显示完整、操作顺畅 */
@media (max-height: 700px) and (orientation: portrait) {
  /* 各家名字/出牌区上移压缩（下移量 84→60、142→104） */
  .opp-left, .opp-right { top: calc(14% + 60px); }
  .play-left, .play-right { top: calc(14% + 104px); }
  .play-top { top: calc(52px + var(--sat)); }
  /* 栋牌区同步压缩：左/右家在出牌区下方，对家在出牌区下方单行横滑，自己在名字上方 */
  .won-left, .won-right { top: calc(14% + 184px); }
  .won-top { top: calc(128px + var(--sat)); max-width: 64vw; }
  .won-mine { bottom: calc(206px + var(--sab)); max-width: 30vw; } /* 26-08-17 随名字同步上移（126→206） */
  .won-mine2 { bottom: calc(128px + var(--sab)); max-width: 30vw; } /* 26-08-17⑨：第 5 栋起换行在名字框(bottom:168)正下方 */
  /* 聊天气泡避让压缩后的栋牌区 */
  .chat-bubble-left, .chat-bubble-right { top: calc(14% + 120px); }
  .chat-bubble-top { top: calc(156px + var(--sat)); }
  /* 下方操作区整体压缩（原 236/188/122/108/12 → 196/162/100/88/8；倒计时为圆形时钟按头像定位，不参与底部偏移分层） */
  .play-mine { bottom: calc(196px + var(--sab)); }
  #status-bar { bottom: calc(298px + var(--sab)); } /* 26-08-17⑤：压缩竖屏随 play-mine(196)+小牌约56+间距6 同步上移到自家出牌正上方；26-08-17⑥ 仅此状态字再上移两行文字高度（258→298） */
  #action-bar { bottom: calc(100px + var(--sab)); }
  .my-info { bottom: calc(168px + var(--sab)); } /* 26-08-17：压缩屏名字同步上移一张牌高度（88→168），给倒计时圆钟让位 */
  .my-hand { bottom: calc(8px + var(--sab)); min-height: 80px; --htile-w: 40px; } /* 26-08-17：手牌基准宽改 CSS 变量口径（40px，与 game.js renderHand compact 的 baseW=40 同步） */
  /* 两行手牌时的上移量同步压缩（压缩屏更容易两行：牌窄但屏也窄） */
  #table.two-rows-hand .my-info { bottom: calc(238px + var(--sab)); } /* 26-08-17 随名字同步上移（158→238） */
  #table.two-rows-hand #action-bar { bottom: calc(170px + var(--sab)); }
  #table.two-rows-hand #status-bar { bottom: calc(372px + var(--sab)); } /* 26-08-17⑤：压缩竖屏两行手牌随 play-mine(270)+小牌约56+间距6 同步上移到自家出牌正上方；26-08-17⑥ 仅此状态字再上移两行文字高度（332→372） */
  #table.two-rows-hand .play-mine { bottom: calc(270px + var(--sab)); }
  #table.two-rows-hand .won-mine { bottom: calc(276px + var(--sab)); } /* 26-08-17 随名字同步上移（196→276） */
  #table.two-rows-hand .won-mine2 { bottom: calc(198px + var(--sab)); } /* 26-08-17⑨：第 5 栋起换行在名字框(bottom:238)正下方 */
  #table.two-rows-hand .chat-bubble-mine { bottom: calc(280px + var(--sab)); } /* 26-08-17 随名字同步上移（200→280） */
  /* 手牌缩小为 40px（变量口径见上方 .my-hand --htile-w；.tile 40px 规则保留给出牌区等非手牌场景兜底） */
  .tile { width: 40px; }
  .tile .face { height: 58px; }
  .tile .dot { width: 7px; height: 7px; }
  .tile .tname { font-size: 10px; line-height: 12px; }
  .tile.selected { transform: translateY(-12px); }
  /* 小牌（出牌区）与迷你牌（栋牌）同步缩小 */
  .tile.small { width: 26px; }
  .tile.small .face { height: 40px; }
  .tile.small .dot { width: 4px; height: 4px; }
  .tile.small .tname { font-size: 7px; line-height: 9px; }
  .tile.back { height: 74px; }
  .tile.back.small { height: 52px; }
  .tile.tiny { width: 18px; }
  .tile.tiny .face { height: 26px; }
  .tile.tiny .dot { width: 3px; height: 3px; }
  .tile.tiny .tname { font-size: 6px; line-height: 8px; }
}

/* ---------- 苹果短屏压缩·横屏（26-08-17 按新横屏布局重写：横屏可视高 ≤400px，Safari 工具栏占高后更矮） ----------
   横屏坐标整体压缩 + 牌同步缩小，保证状态栏/按钮/手牌不被裁切；布局锚点与上方横屏媒体查询一致 */
@media (max-height: 400px) and (orientation: landscape) {
  /* 各家名字/出牌区上移压缩（靠拢 66→56、34%→30%） */
  .opp-left { left: 56px; top: calc(30% - 34px); }
  .opp-right { right: 56px; top: calc(30% - 34px); }
  .play-left { left: 56px; top: calc(30% + 8px); }
  .play-right { right: 56px; top: calc(30% + 8px); }
  .play-top { top: calc(42px + var(--sat)); }
  /* 自己出牌仍居中手牌正上方（压缩 130→108） */
  .play-mine { bottom: calc(108px + var(--sab)); }
  /* 栋牌区同步压缩（横屏落位：左右家出牌区下方、自己右下角；
     对家 26-08-17 整改：堆放于对家名字框左侧置顶，靠右换行向下堆，不再堆屏幕中间） */
  .won-left, .won-right { top: calc(30% + 96px); max-width: 120px; }
  .won-top { left: auto; right: calc(50% + 64px); transform: none; top: calc(2px + var(--sat)); max-width: 24vw; flex-wrap: wrap; justify-content: flex-end; overflow-x: visible; }
  /* 自己栋牌（26-08-17⑨ 整改）：与横屏主块同口径——右锚定自动换行向屏幕中间靠拢，第 5 栋起不再被挤出屏幕 */
  .won-mine { right: 8px; bottom: calc(8px + var(--sab)); max-width: 30vw; flex-wrap: wrap; justify-content: flex-end; overflow: visible; }
  /* 聊天气泡避让 */
  .chat-bubble-left { left: 56px; top: calc(30% + 140px); }
  .chat-bubble-right { right: 56px; top: calc(30% + 140px); }
  /* 横屏常用语面板同步压缩（26-08-17⑦）：更贴近对家头像、字号更小，保证 ≤400px 矮屏 8 句也全部显示 */
  #chat-panel { right: 50px; left: calc(50% + 84px); gap: 4px; max-height: calc(100% - 112px); }
  #chat-panel .chat-item { padding: 5px 7px; font-size: 11px; }
  /* 状态文字保持右上角（压缩边距/字号）；倒计时为圆形时钟按头像定位，不参与底部偏移分层 */
  #status-bar { right: 52px; top: calc(6px + var(--sat)); font-size: 12px; }
  /* 下方操作区整体压缩（横屏底部元素多，压缩幅度加大）；自己名字保持左下角（沿用横屏媒体查询 bottom:14，不再覆盖） */
  #action-bar { bottom: calc(96px + var(--sab)); }
  .my-hand { bottom: calc(8px + var(--sab)); min-height: 76px; --htile-w: 40px; } /* 26-08-17：手牌基准宽改 CSS 变量口径 */
  /* 手牌/小牌/迷你牌同步缩小（与竖屏压缩同规格，横屏手牌一行排完） */
  .tile { width: 40px; }
  .tile .face { height: 58px; }
  .tile .dot { width: 7px; height: 7px; }
  .tile .tname { font-size: 10px; line-height: 12px; }
  .tile.selected { transform: translateY(-12px); }
  .tile.small { width: 26px; }
  .tile.small .face { height: 40px; }
  .tile.small .dot { width: 4px; height: 4px; }
  .tile.small .tname { font-size: 7px; line-height: 9px; }
  .tile.back { height: 74px; }
  .tile.back.small { height: 52px; }
  .tile.tiny { width: 18px; }
  .tile.tiny .face { height: 26px; }
  .tile.tiny .dot { width: 3px; height: 3px; }
  .tile.tiny .tname { font-size: 6px; line-height: 8px; }
}