* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* 苹果安全区变量（26-08-18 全局整改，照搬骨牌）：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;
}
/* 大厅底分输入框：1~100 数字，宽度紧凑与原版下拉框相当 */
.create-row input#base-score {
  width: 76px; padding: 10px; font-size: 15px; text-align: center;
  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); }
/* 已开局房间：对局中标记 / 观战按钮列 / 禁止观战提示 */
#room-list .r-playing { color: #ffb43a; }
#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); }

/* ---------- 结算积分 ---------- */
.score-list { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.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; }
/* 自适应：手机端 96vw（表格可横向滚动）；电脑端由下方媒体查询放宽 */
.admin-box {
  width: 720px; max-width: 96vw; background: #17382c; border-radius: 14px;
  padding: 24px; display: flex; flex-direction: column; gap: 14px;
}
/* 电脑端（≥1024px）：面板放宽至 1400px，表格紧凑，整页一屏看全 */
@media (min-width: 1024px) {
  .admin-box { width: 1400px; }
  #user-table { font-size: 13px; }
  #user-table th, #user-table td { padding: 7px 5px; }
  .adj-cell input { width: 90px; }
}
.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; }
/* 登录页底部：共享游戏入口（管理后台配置的其他游戏域名，点击直达；以后新游戏后台加一行即可） */
.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; }
.room-no { color: #ffd98a; font-size: 30px; letter-spacing: 3px; }
#player-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
#player-list li {
  width: 260px; max-width: 80vw; padding: 12px; border-radius: 10px; text-align: center;
  background: rgba(255,255,255,.1); font-size: 16px;
}
#player-list li.empty { color: rgba(255,255,255,.4); border: 1px dashed rgba(255,255,255,.3); background: none; }

/* ---------- 选座等待室：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; }

/* 首盘掷骰定庄动画弹窗（照搬骨牌） */
.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);
}

/* ---------- 牌桌 ---------- */
#table {
  position: relative; height: 100%;
  background: radial-gradient(ellipse at 50% 40%, #178a5c, #0b3d2e 80%);
}
/* 四人十字架牌桌：对家在正上方，左右两家居中两侧，自己正下方 */
/* 2026-08-16 整改：头像框压缩为两行文字高度（行1=头像+名字+聪明度，行2=徽章+剩余张数，见 game.js oppHtml），
   原 padding 6px/行高1.6 内容一换行就撑成三行，压小后固定两行，出牌区才能紧贴名字框底 */
.opp {
  position: absolute; padding: 4px 8px; border-radius: 10px;
  background: rgba(0,0,0,.3); font-size: 13px; line-height: 1.45; min-width: 92px;
  cursor: pointer; /* 点头像框弹出对方积分与战绩（game.js toggleOppPop） */
}
.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 加刘海安全区，26-08-18 照搬骨牌：名字贴最顶，信息条移到左上角） */
.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.farmer, .my-info .badge.farmer { background: #1e9e4f; }
/* 敌家标记：红色（左右两家） */
.opp .badge.enemy { background: #d61f26; }
/* 定主者标记：蓝紫色 */
.opp .badge.trump, .my-info .badge.trump { background: #7b5cff; }
.opp .offline { color: #ff8484; font-size: 11px; }

/* 顶部信息条：主花色 / 本盘级牌 / 庄家 / 双方级别
   （26-08-18 照搬骨牌：对家名字贴顶居中后，信息条改放左上角两行——ti-l1 主/打几/庄 + ti-l2 我队/敌队级别） */
#table-info {
  position: absolute; top: calc(8px + var(--sat)); left: 8px; z-index: 10;
  font-size: 13px; color: #ffd98a; font-weight: 700; line-height: 1.45; text-align: left;
  text-shadow: 0 1px 3px rgba(0,0,0,.55); max-width: 60vw;
}
/* 顶部信息条第二段（我队/敌队级别）：独立第二行（横竖屏一致，照搬骨牌左上角两行信息） */
#table-info .ti-l2 { display: block; }

.play-zone { position: absolute; display: flex; align-items: center; justify-content: center; min-height: 56px; } /* 26-08-18 与骨牌一致 56px */
.play-left { left: 8px; top: calc(18% + 142px); max-width: 42vw; }
.play-right { right: 8px; top: calc(18% + 142px); max-width: 42vw; justify-content: flex-end; }
/* 对家出牌区：顶部对家名字的正下方（26-08-18 照搬骨牌 calc(64px+安全区)） */
.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; } /* 26-08-18 照搬骨牌 236+安全区 */
.play-zone .pass-text {
  padding: 6px 18px; background: rgba(0,0,0,.45); border-radius: 16px;
  font-size: 16px; color: #ffd98a;
}
.cards-row { display: flex; }
/* 出牌区多行容器：竖屏牌多时 game.js 拆成多行渲染，保证每张牌完整可见 */
.cards-col { display: flex; flex-direction: column; gap: 4px; }

/* 状态文字（26-08-18 照搬骨牌：bottom:344+安全区，约在"自己打出的牌"正上方、屏幕居中位置，
   "等待某人出牌…"一眼可见；倒计时为圆形时钟，由 game.js 按头像框 fixed 定位，不参与底部偏移分层） */
#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: 12px;
}
#action-bar .btn { min-width: 84px; padding: 10px 18px; font-size: 15px; }

/* 26-08-18 照搬骨牌：竖屏自己的名字 bottom:198+安全区，给竖屏轮到自己时贴在屏幕最左侧、
   名字正下方的倒计时圆钟让位（骨牌 positionCountdown 特判） */
.my-info { position: absolute; left: 10px; bottom: calc(198px + var(--sab)); z-index: 10; font-size: 13px; line-height: 1.6; }

/* 抓分显示：牌桌左上角、顶部信息条两行正下方（26-08-18 照搬骨牌：信息条移左上角后抓分跟随其下） */
.mult-info {
  position: absolute; left: 8px; top: calc(52px + var(--sat)); font-size: 14px; font-weight: 700;
  color: #ffd98a; text-shadow: 0 1px 3px rgba(0,0,0,.55);
}

.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: 96px;
  touch-action: none; /* 手牌区禁止浏览器接管触摸手势，保证横向拖动多选时 pointermove 连续触发 */
}
/* 手牌行：一行或两行（竖屏牌多时自动拆两行，见 game.js renderHand） */
.hand-row { display: flex; justify-content: center; }
.my-hand.two-rows .hand-row:first-child { margin-bottom: -34px; } /* 两行稍微重叠，节省高度 */

/* 竖屏两行手牌时，上方操作区/状态栏/出牌区整体上移，避免被手牌遮挡
   （2026-08-16 起倒计时改为圆形时钟，由 game.js 按当前操作者头像定位，不再参与此处的底部偏移分层） */
/* 26-08-18 照搬骨牌两行手牌偏移体系：名字 274 / 操作行 198 / 状态文字 420（自家出牌正上方）/ 出牌区 312 */
#table.two-rows-hand .my-info { bottom: calc(274px + var(--sab)); }
#table.two-rows-hand .chat-bubble-mine { bottom: calc(326px + var(--sab)); }
#table.two-rows-hand #action-bar { bottom: calc(198px + var(--sab)); }
#table.two-rows-hand #status-bar { bottom: calc(420px + var(--sab)); }
#table.two-rows-hand .play-mine { bottom: calc(312px + var(--sab)); }
#table.two-rows-hand .wait-tip-mine { bottom: calc(420px + var(--sab)); }

/* 竖屏三行手牌（庄家收底 33 张场景，骨牌无此场景=吊主扩展）：在两行基础上再整体上移 46px */
.my-hand.three-rows .hand-row:not(:last-child) { margin-bottom: -34px; } /* 行间稍微重叠，节省高度 */
#table.three-rows-hand .my-info { bottom: calc(320px + var(--sab)); }
#table.three-rows-hand .chat-bubble-mine { bottom: calc(372px + var(--sab)); }
#table.three-rows-hand #action-bar { bottom: calc(244px + var(--sab)); }
#table.three-rows-hand #status-bar { bottom: calc(466px + var(--sab)); }
#table.three-rows-hand .play-mine { bottom: calc(358px + var(--sab)); }
#table.three-rows-hand .wait-tip-mine { bottom: calc(466px + var(--sab)); }

/* ---------- 卡牌 ---------- */
/* 数字与花色固定在左上角：牌重叠时左侧露出部分必须完整看到 rank+suit */
.card {
  position: relative; width: 58px; height: 80px; flex: 0 0 auto;
  background: #fff; border-radius: 7px; border: 1px solid #c9c9c9;
  box-shadow: 0 2px 4px rgba(0,0,0,.35);
  color: #222; cursor: pointer; user-select: none;
  transition: transform .12s;
  display: block; padding: 3px 0 0 4px; text-align: left;
}
.hand-row .card { margin-left: -32px; } /* 露出左侧约 26px，刚好显示数字+花色 */
.hand-row .card:first-child { margin-left: 0; }
.card.selected { transform: translateY(-18px); }
.card .label { display: block; font-size: 18px; font-weight: 700; line-height: 1.05; }
.card .suit { display: block; font-size: 16px; line-height: 1.1; }
.card.red { color: #d61f26; }
/* 主牌标记：定主后手牌里的主牌描金边，一眼分清主副 */
.card.trump-card { border: 2px solid #ffb43a; box-shadow: 0 0 6px rgba(255,180,58,.8); }
.card.joker .label { font-size: 13px; writing-mode: vertical-lr; letter-spacing: 2px; font-weight: 700; }
.card.small { width: 38px; height: 52px; cursor: default; padding-left: 3px; }
.card.small .label { font-size: 13px; }
.card.small .suit { font-size: 12px; }
.card.small.joker .label { font-size: 10px; }

/* ---------- 倒计时：小圆形时钟 + 秒数跳动（2026-08-16 整改：取消横条，轮到谁跳到谁的头像旁，含自己） ----------
   位置由 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: waitPulse 1s ease-in-out infinite; }

/* 亮主/反主牌驻留显示（2026-08-16 新增）：亮出的牌持续挂在亮主者头像附近，直到开始打牌才消失 */
#decl-chip {
  position: fixed; z-index: 13; display: flex; gap: 2px; padding: 4px 6px;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,217,138,.7); border-radius: 10px;
  pointer-events: none;
}
#decl-chip .card { margin: 0; cursor: default; }

/* 结算弹窗按钮行（2026-08-16 整改："开始"在左、"退出"在右 同一水平线） */
.over-btn-row { display: flex; gap: 12px; width: 100%; justify-content: center; }
.over-btn-row .btn { min-width: 100px; padding: 12px 18px; }

/* ---------- 牌桌右上角：设置按钮 + 托管小开关 ---------- */
#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-chat {
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: rgba(0,0,0,.4); color: #fff; font-size: 17px; cursor: pointer;
}
/* 🔄 强制刷新按钮：样式与设置/聊天按钮一致，位于💬下方 */
#btn-force-refresh {
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: rgba(0,0,0,.4); color: #7dff9b; font-size: 17px; cursor: pointer;
}
/* 🎴 查看底牌按钮：仅扣底的庄家显示，位于 🔄 强制刷新正下方 */
#btn-bottom-view {
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: rgba(0,0,0,.4); color: #ffd98a; font-size: 17px; cursor: pointer;
}
/* 底牌弹窗内 8 张牌：自动换行居中 */
.bottom-cards { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.bottom-cards .card { cursor: default; }

/* 派牌牌堆：实时派牌阶段显示在牌桌中央（game.js flyCard 从这里飞牌） */
#deck {
  position: absolute; left: 50%; top: 36%; transform: translateX(-50%); z-index: 11;
  display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none;
}
.deck-card {
  width: 58px; height: 80px; border-radius: 7px; border: 2px solid #fff;
  background: repeating-linear-gradient(45deg, #1b4f8a, #1b4f8a 5px, #2a63a8 5px, #2a63a8 10px);
  box-shadow: 3px 3px 0 #163c68, 0 4px 10px rgba(0,0,0,.4);
}
#deck-count { font-size: 12px; color: #ffd98a; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
/* 派牌飞行牌背：从牌堆飞向对应玩家后移除 */
.fly-card {
  position: fixed; z-index: 60; width: 38px; height: 52px; border-radius: 5px;
  border: 1.5px solid #fff; pointer-events: none;
  background: repeating-linear-gradient(45deg, #1b4f8a, #1b4f8a 4px, #2a63a8 4px, #2a63a8 8px);
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
  transition: transform .24s linear, opacity .24s linear;
}

/* 等待室机器人面板：仅房主可见（金色虚线框） */
.bot-panel {
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  width: 340px; max-width: 92vw; padding: 10px;
  border: 1px dashed rgba(255,217,138,.6); border-radius: 12px;
}
.bot-title { color: #ffd98a; font-size: 14px; font-weight: 700; }
.bot-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }
.bot-panel select { padding: 6px 10px; font-size: 13px; background: #2a6b52; color: #fff; }
/* 机器人聪明度标签（座位/牌桌昵称后） */
.bot-tag {
  display: inline-block; padding: 0 6px; border-radius: 6px; font-size: 11px;
  background: #8a6d1f; color: #ffd98a; margin-left: 4px;
}
/* 资料弹窗里的接管/移除机器人按钮 */
.opp-pop-btn { margin-top: 8px; width: 100%; }
/* 常用语面板：右上角 💬 下方展开，一句一个按钮 */
#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);
}
/* 26-08-18 照搬骨牌：左右家聊天气泡在头像框下方 calc(18%+130px)（气泡 z-index 高于出牌区，4 秒即消失） */
.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)); }
/* 26-08-18 照搬骨牌：自己的气泡随自己名字（bottom:198）同步，挂其上方 */
.chat-bubble-mine { left: 10px; bottom: calc(250px + var(--sab)); }
/* 退出观战按钮：仅观战模式显示（牌桌右上角，设置按钮下方） */
#btn-watch-exit {
  border: none; border-radius: 14px; padding: 6px 10px;
  background: rgba(214,31,38,.85); color: #fff; font-size: 12px; cursor: pointer;
}

/* 等待出牌提示：显示在对应玩家头像/名字下方，不遮挡已出的牌 */
.wait-tip {
  position: absolute; z-index: 12;
  padding: 4px 12px; border-radius: 12px;
  background: rgba(0,0,0,.55); color: #ffd98a; font-size: 12px;
  white-space: nowrap; pointer-events: none;
  animation: waitPulse 1.5s ease-in-out infinite;
}
@keyframes waitPulse {
  0%, 100% { opacity: .85; }
  50% { opacity: .5; }
}
/* 左侧玩家：提示条在名字下方、出牌区域上方偏左 */
.wait-tip-left { left: 8px; top: calc(18% + 76px); }
/* 右侧玩家：提示条在名字下方、出牌区域上方偏右 */
.wait-tip-right { right: 8px; top: calc(18% + 76px); }
/* 对家：提示条在名字下方正中（26-08-18 照搬骨牌：对家名字贴顶 calc(8px+安全区)、框高约46px → 提示在其正下方） */
.wait-tip-top { left: 50%; transform: translateX(-50%); top: calc(64px + var(--sat)); }
/* 自己：提示条在状态栏位置，不与名字重叠（替代status-bar显示）；26-08-18 与状态栏同照搬骨牌 344+安全区 */
.wait-tip-mine {
  left: 50%; transform: translateX(-50%); bottom: calc(344px + var(--sab));
  font-size: 14px; padding: 6px 16px;
  background: rgba(240,140,0,.75); color: #fff; font-weight: 600;
}

/* 设置弹窗底部按钮行：关闭 + 强制退出 */
.settings-btn-row { display: flex; gap: 12px; width: 100%; justify-content: center; }
.btn-danger {
  background: linear-gradient(180deg, #d61f26, #a01515); color: #fff; font-weight: 600;
}

/* 通用拨动开关（设置弹窗用大的 .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;
}
/* 设置弹窗：背景音乐/语音播报 两个开关同一水平线（两个内联组分布在行两端） */
.set-group { display: inline-flex; align-items: center; gap: 6px; }
/* 设置弹窗-账号资料区：修改名字 / 修改密码 / 手机号换绑 */
.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-line.one-line { flex-wrap: nowrap; }
.set-sec .set-line.one-line input { flex: 1; width: auto; min-width: 0; }
.set-sec .set-line.one-line .btn { width: auto; flex: 0 0 auto; }
.set-sec .set-info { font-size: 12px; color: #cde8da; margin-top: 6px; text-align: left; }

/* 对手信息弹窗：点牌桌上对方头像框弹出（积分+胜负战绩），平时名字旁不显示积分 */
.opp-pop {
  position: fixed; z-index: 30; min-width: 150px; padding: 10px 14px;
  background: rgba(0,0,0,.85); border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.5);
  font-size: 13px; line-height: 1.8; text-align: left; cursor: pointer;
}
.opp-pop .opp-pop-name { font-size: 15px; font-weight: 700; color: #ffd98a; }

/* 大厅建房第二行：密码 / 抽水 / 显牌数 */
.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; max-height: 86dvh; /* dvh=动态可视高度：手机横屏排除浏览器工具栏，防止弹窗被裁切（2026-08-16 照搬大烟三） */
  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;
}

/* ---------- 手机竖屏专属：左右两家出牌区完整展示（横屏一律不变） ---------- */
/* 26-08-18 照搬骨牌：左右两家出牌区紧贴各自名字框正下方
   （头像框 top:18%+84px、压缩后两行高约46px → 出牌区 top:18%+142px，与骨牌完全一致）；
   两区各限宽 42vw（左家向右长、右家向左长，与骨牌一致），同高度也互不相遇，多出的牌由 game.js showPlay 拆多行。 */
@media (orientation: portrait) {
  .play-left { left: 8px; top: calc(18% + 142px); max-width: 42vw; justify-content: flex-start; }
  .play-right { right: 8px; top: calc(18% + 142px); max-width: 42vw; justify-content: flex-end; }
  .play-left .cards-col { align-items: flex-start; }  /* 左家的牌贴左边向右排 */
  .play-right .cards-col { align-items: flex-end; }   /* 右家的牌贴右边向左排 */
  .play-top .cards-col { align-items: center; }       /* 对家的牌居中 */
  .play-mine .cards-col { align-items: center; }      /* 自己的牌仍居中 */
  .play-mine { max-width: 80vw; }                     /* 26-08-18 与骨牌一致 80vw（小牌 38px 约 8 张/行） */

  /* 等待室竖屏压缩（2026-08-16 整改：小屏手机看不到底部"退出房间"按钮——
     整体压缩间距/字号、顶部对齐并允许纵向滚动，保证按钮完整可见；
     26-08-18 照搬骨牌：padding 加底部安全区 --sab + .room-no 24px） */
  #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; }
}

/* ---------- 手机横屏专属布局（竖屏一律不变） ---------- */
/* 2026-08-16 横屏大整改：
   ① 左上：顶部信息条两行（本盘主打几/谁庄 + 我队/敌队级别），抓分在其下方，不再占据对家头顶；
   ② 右上："等待XX出牌/轮到你出牌"状态文字统一放右上角空白处（托管开关左侧、对家用户名右侧）；
   ③ 对家头像移到最顶；左右两家头像上移半张牌（40px），各自出牌紧贴名字框底（框压成两行约46px高）；
   ④ 自己的名字移到左下角最底（加半透明底，压在首张手牌下部空白处仍可读）；
   ⑤ 左右头像框向屏幕中间靠拢一张牌宽（66px），避开 iPhone 刘海/挖孔。 */
@media (orientation: landscape) {
  .opp { max-width: 140px; font-size: 12px; padding: 3px 6px; line-height: 1.4; } /* 26-08-18 照搬骨牌：限宽140px长名字自动换行（原定宽118px废弃） */
  /* ① 左上：本盘信息两行 + 抓分（合理紧凑利用左侧用户上方的空间） */
  #table-info {
    left: 8px; top: calc(4px + var(--sat)); transform: none; text-align: left;
    max-width: 34vw; white-space: normal; line-height: 1.45; font-size: 12px;
  }
  .mult-info { left: 8px; top: calc(46px + var(--sat)); font-size: 12px; }
  /* ③ 对家头像移到最顶（左上角信息条与右上角按钮区都不占中间），出牌紧贴其名字框底 */
  .opp-top { top: calc(2px + var(--sat)); }
  .play-top { top: calc(50px + var(--sat)); }
  /* ③ 左右两家头像上移半张牌高度（原 34% → 34%-40px），向中间靠拢避开刘海 */
  .opp-left { left: 66px; top: calc(34% - 40px); }
  .opp-right { right: 66px; top: calc(34% - 40px); }
  /* ③ 左右两家出牌区紧贴名字框正下方（框顶 34%-40px + 两行高约46px = 34%+6px），水平与头像框对齐 */
  .play-left { left: 66px; top: calc(34% + 6px); transform: none; max-width: 30vw; justify-content: flex-start; }
  .play-right { right: 66px; top: calc(34% + 6px); transform: none; max-width: 30vw; justify-content: flex-end; }
  /* ② 状态文字/四个等待出牌提示统一移到右上角空白处（托管开关左侧、对家用户名右侧），两行排布 */
  #status-bar {
    left: auto; right: 56px; top: calc(8px + var(--sat)); bottom: auto; transform: none;
    text-align: right; max-width: 40vw;
  }
  .wait-tip-left, .wait-tip-right, .wait-tip-top, .wait-tip-mine {
    left: auto; right: 56px; top: calc(36px + var(--sat)); bottom: auto; transform: none;
  }
  /* 聊天气泡（26-08-18 照搬骨牌）：左右家挂名字框下方避让出牌区、对家保持居中、自己挂名字上方 */
  .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)); }
  /* ④ 自己的名字移到左下角最底（手牌居中、左下角为空白区；加半透明底防止压牌时白字看不清） */
  .my-info {
    bottom: calc(14px + var(--sab)); background: rgba(0,0,0,.35); border-radius: 8px; padding: 2px 6px;
  }
  .chat-bubble-mine { bottom: calc(44px + var(--sab)); } /* 跟随自己名字，挂其上方 */
  /* 横屏自己的出牌区在自己手牌正上方居中（26-08-18 照搬骨牌：bottom:130+安全区、限宽 60vw） */
  .play-mine { bottom: calc(130px + var(--sab)); max-width: 60vw; }

  /* 横屏两行/三行手牌（庄家收底 33 张场景，骨牌无此场景=吊主扩展保留）：操作区/自己出牌区整体上移避让
     （2026-08-16 再整改：状态文字/等待提示已移右上角、自己名字已固定左下角，
     原 two-rows-hand 对 .my-info/#status-bar/.wait-tip-mine/.chat-bubble-mine 的底部偏移覆盖已失效，删除死代码） */
  #table.two-rows-hand #action-bar, #table.three-rows-hand #action-bar { bottom: calc(150px + var(--sab)); }
  #table.two-rows-hand .play-mine, #table.three-rows-hand .play-mine { bottom: calc(232px + var(--sab)); max-width: 60vw; }

  /* 横屏等待室（2026-08-16 三次整改，照搬大烟三已验证方案：上一版 flex 换行流式排列在横屏
     位置不可控，"添加机器人"面板会被挤出可视区 → 改为左右双栏 grid 命名区域精准落位——
     左栏=十字架座位区（纵跨 5 行），右栏从上到下=机器人面板/底分说明/十字说明/未入座/退出按钮，
     全部内容横屏完整可见；极矮屏兜底 overflow-y:auto 可滚动） */
  #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 .bot-title { font-size: 12px; }
  #bot-panel .sub { font-size: 11px; }
  .bot-row { gap: 6px; }

  /* 横屏结算弹窗（2026-08-16 新增，照搬大烟三：压缩内边距/间距/字号/按钮高度，配合 .modal-box 的
     dvh 动态高度上限，"胜负+级别+积分明细+开始/退出"在横屏完整可见可点） */
  .modal-box { max-height: 94vh; max-height: 94dvh; padding: 12px 16px; gap: 8px; }
  #over-modal .modal-box { width: 320px; }
  #over-title { font-size: 20px; }
  .score-list { gap: 4px; font-size: 13px; }
  .over-btn-row .btn { min-width: 90px; padding: 9px 14px; font-size: 15px; }
}