* { 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;
}
.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; }
/* 登录页底部：共享游戏入口（管理后台配置的其他游戏域名，点击直达；以后新游戏后台加一行即可） */
.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; }
/* ---------- 选座等待室：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%);
}
/* 四人十字架牌桌：对家在正上方，左右两家居中两侧，自己正下方（26-08-18 照搬吊主升级/骨牌坐标体系） */
/* 头像框压缩为两行文字高度（行1=头像+名字+聪明度，行2=徽章+剩余张数，见 game.js oppHtml），
   压小后固定两行，出牌区才能紧贴名字框底 */
.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; /* 点头像/名字弹出玩家资料（胜率/积分/手机号掩码） */
}
/* 左/右两家头像名字下移约一张牌高度（+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 加刘海安全区，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;
}
/* 身份标记：♠3/♠A 公开（蓝紫）；独食者（红）；自己手持身份牌仅本人可见（灰蓝）；名次（金） */
.opp .badge.smoke, .my-info .badge.smoke { background: #5a54d1; }
.opp .badge.solo, .my-info .badge.solo { background: #d61f26; }
.my-info .badge.hold { background: #4a7a96; }
.opp .badge.rank, .my-info .badge.rank { background: #b8860b; }
.opp .offline { color: #ff8484; font-size: 11px; }

/* 出牌区：跟随到各家名字底下（左/右家出牌区在其名字下方，对家出牌区在顶部名字下方）；
   26-08-18 照搬吊主升级/骨牌坐标：142/64/236 + 安全区，竖屏多出的牌由 game.js showPlay 拆多行（.cards-col） */
.play-zone { position: absolute; display: flex; align-items: center; justify-content: center; min-height: 56px; }
/* 出牌区跟随名字同步下移（名字 +84px 后，出牌区在其下方 58px） */
.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; }
/* 对家出牌区：顶部对家名字的正下方（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 拆成多行渲染，保证每张牌完整可见（26-08-18 照搬吊主升级） */
.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: 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-18 照搬吊主升级/骨牌：竖屏自己的名字 bottom:198+安全区，给竖屏轮到自己时贴在屏幕最左侧、
   名字正下方的倒计时圆钟让位（game.js positionCountdown 特判） */
.my-info { position: absolute; left: 10px; bottom: calc(198px + var(--sab)); z-index: 10; font-size: 13px; line-height: 1.6; cursor: pointer; }

.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; } /* 两行稍微重叠，节省高度 */

/* 竖屏两行手牌时，上方操作区/状态栏/出牌区整体上移，避免被手牌遮挡
   （26-08-18 起倒计时改为圆形时钟，由 game.js 按当前操作者头像定位，不再参与此处的底部偏移分层）
   26-08-18 照搬吊主升级/骨牌两行手牌偏移体系：名字 274 / 操作行 198 / 状态文字 420（自家出牌正上方）/ 出牌区 312 */
#table.two-rows-hand .my-info { bottom: calc(274px + 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)); }

/* ---------- 卡牌 ---------- */
/* 数字与花色固定在左上角：牌重叠时左侧露出部分必须完整看到 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.small { width: 38px; height: 52px; cursor: default; padding-left: 3px; }
.card.small .label { font-size: 13px; }
.card.small .suit { font-size: 12px; }

/* ---------- 倒计时：小圆形时钟 + 秒数跳动（26-08-18 整改：取消横条，轮到谁跳到谁的头像旁，含自己；照搬吊主升级） ----------
   位置由 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; }

/* 等待出牌提示：显示在对应玩家头像/名字下方，不遮挡已出的牌（26-08-18 照搬吊主升级） */
.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); }
/* 对家：提示条在名字下方正中（对家名字贴顶 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;
}

/* ---------- 牌桌右上角：设置按钮 + 托管小开关 ---------- */
#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); }
/* 原"#screen-game .opp-right { right: 54px }（给设置按钮让位）"已删除：
   十字架布局后右家移至牌桌中部（top:18%），与右上角设置按钮不再重叠，无需让位 */

/* 通用拨动开关（设置弹窗用大的 .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-15 对齐骨牌）：背景音乐/语音播报 两开关合并同一行 */
.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; }
/* 设置弹窗-账号资料区：修改名字 / 修改密码 / 手机号换绑 */
.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; max-height: 88dvh; }
.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; }
/* 大厅建房底分输入框：1~100 数字输入，覆盖通用 input 的 260px 宽 */
#base-score { width: 90px; 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; max-height: 86dvh; /* dvh=动态可视高度：手机横屏排除浏览器工具栏，防止弹窗被裁切 */
  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);
}
/* 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)); }
/* 自己的气泡随自己名字（bottom:198）同步，挂在明牌/投降按钮上方（明牌266+按钮高约30 → 气泡 302 起） */
.chat-bubble-mine { left: 10px; bottom: calc(302px + var(--sab)); }
#table.two-rows-hand .chat-bubble-mine { bottom: calc(378px + var(--sab)); }

/* ---------- 明牌 / 投降 按钮：对局中显示在左下角（自己信息上方），上下排列 ---------- */
.btn-mingpai, .btn-surrender {
  position: absolute; left: 10px; z-index: 11;
  padding: 6px 16px; border: none; border-radius: 8px;
  color: #fff; font-size: 13px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
/* 26-08-18 新坐标体系：自己名字 bottom:198 → 投降 +32=230、明牌 +68=266（保持原相对自己名字的叠放间距） */
.btn-mingpai { bottom: calc(266px + var(--sab)); background: rgba(240,140,0,.85); }
.btn-surrender { bottom: calc(230px + var(--sab)); background: rgba(214,31,38,.75); }
.btn-mingpai:active, .btn-surrender:active { transform: scale(.95); }
#table.two-rows-hand .btn-mingpai { bottom: calc(342px + var(--sab)); }
#table.two-rows-hand .btn-surrender { bottom: calc(306px + var(--sab)); }

/* 明牌者手牌透明：在其头像名字下方展示面朝上的小牌（三家可见，实时同步剩余手牌） */
.ming-hand { display: flex; margin-top: 4px; max-width: 36vw; }
.ming-hand .card.small { margin-left: -24px; }
.ming-hand .card.small:first-child { margin-left: 0; }
.opp .badge.ming, .my-info .badge.ming { background: #f08c00; }

/* ---------- 观战 ---------- */
/* 退出观战按钮：仅观战模式显示（牌桌右上角，💬 按钮下方） */
#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-18 照搬吊主升级/骨牌，横屏一律不变） ----------
   左右两家出牌区紧贴各自名字框正下方（头像框 top:18%+84px、压缩后两行高约46px → 出牌区 top:18%+142px）；
   两区各限宽 42vw（左家向右长、右家向左长），同高度互不相遇，多出的牌由 game.js showPlay 拆多行；
   等待室竖屏压缩：小屏手机保证底部"退出房间"按钮完整可见（顶部对齐+可滚动+底部安全区） */
@media (orientation: portrait) {
  .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; }                     /* 与吊主升级一致 80vw（小牌 38px 约 8 张/行） */

  /* 等待室竖屏压缩（照搬吊主升级：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; }
}

/* ---------- 手机横屏专属布局（26-08-18 整段照搬吊主升级/骨牌横屏体系，仅横屏生效，竖屏保持原样） ----------
   ① 对家头像移到最顶，出牌紧贴其名字框底；左右两家头像上移半张牌（40px）并向屏幕中间靠拢一张牌宽（66px）避开刘海；
   ② "等待XX出牌/轮到你出牌"状态文字与四个等待提示统一放右上角空白处（托管开关左侧、对家用户名右侧）；
   ③ 自己的名字移到左下角最底（加半透明底，压在首张手牌下部空白处仍可读）；
   ④ 自己打出的牌在自己手牌正上方居中（bottom:130+安全区、限宽60vw）；
   ★ 本段必须保持在文件末尾（同特异性后写生效），不得挪动 */
@media (orientation: landscape) {
  /* 左/右家名字框限宽：给旁边的出牌区让位，长名字自动换行，不会压到牌 */
  .opp { max-width: 140px; font-size: 12px; padding: 3px 6px; line-height: 1.4; }
  /* ① 对家头像移到最顶，出牌紧贴其名字框底 */
  .opp-top { top: calc(2px + var(--sat)); }
  .play-top { top: calc(50px + var(--sat)); }
  /* ① 左右两家头像上移半张牌高度，向中间靠拢避开刘海/挖孔 */
  .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); max-width: 30vw; justify-content: flex-start; }
  .play-right { right: 66px; top: calc(34% + 6px); 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;
  }
  /* 聊天气泡：左右家挂名字框下方避让出牌区、对家保持居中、自己挂名字上方 */
  .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)); } /* 跟随自己名字，挂其上方 */
  /* 明牌/投降按钮跟随自己名字（左下角）上方，与聊天气泡错层 */
  .btn-surrender { bottom: calc(64px + var(--sab)); }
  .btn-mingpai { bottom: calc(100px + var(--sab)); }
  /* ④ 横屏自己的出牌区在自己手牌正上方居中（bottom:130+安全区、限宽 60vw） */
  .play-mine { bottom: calc(130px + var(--sab)); max-width: 60vw; }
  /* 横屏两行手牌：操作区/自己出牌区整体上移避让
     （状态文字/等待提示已移右上角、自己名字已固定左下角，无需再对它们做底部偏移覆盖） */
  #table.two-rows-hand #action-bar { bottom: calc(150px + var(--sab)); }
  #table.two-rows-hand .play-mine { bottom: calc(232px + var(--sab)); max-width: 60vw; }

  /* ---- 横屏等待室（2026-08-15 整改）：竖向居中排版在横屏会把"添加机器人"面板和"退出房间"按钮
     挤出可视区；改为左右双栏 grid——左栏=十字架座位区，右栏=机器人面板/房间说明/未入座/退出按钮，
     全部内容横屏完整可见；极矮屏兜底 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; }

  /* ---- 横屏结算弹窗（2026-08-15 整改）：压缩内边距/间距/字号/按钮高度，配合 .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-btns .btn { padding: 9px 10px; font-size: 15px; }

  /* ---- 横屏常用语面板（26-08-19 整改，照搬骨牌 26-08-17⑦ 同款方案）：竖排版从 top:146 竖排 8 句
     约 340px 高，横屏可视高仅 ~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% - 112px); overflow-y: auto;
  }
  #chat-panel .chat-item { padding: 6px 8px; font-size: 12px; line-height: 1.3; }
}