* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* 安全区变量（26-08-19 新增，照搬吊主升级/骨牌）：刘海屏顶部/底部内边距，横屏布局避让用 */
:root { --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); }
html, body { height: 100%; height: 100dvh; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }
body { background: #0b3d2e; color: #fff; overflow: hidden; }
#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; }
/* 结算弹窗按钮行（2026-08-15 新增）："再来一局"与"退出"并排等宽 */
.over-btns { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
.over-btns .btn { flex: 1; }

/* ---------- 管理后台 ---------- */
.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; }
/* 等待室"退出房间"按钮：与上方玩家列表拉开一点间距 */
#btn-leave-room { margin-top: 6px; }

/* ---------- 添加机器人面板（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;
}
/* 等待室机器人座位：可点击（房主=移除，其他真人=接管） */
#player-list li.bot-seat { cursor: pointer; }
/* 对手信息弹窗里的"接管该机器人"按钮 */
.opp-pop-take { margin-top: 6px; }

/* ---------- 牌桌 ---------- */
#table {
  position: relative; height: 100%;
  background: radial-gradient(ellipse at 50% 40%, #178a5c, #0b3d2e 80%);
}
.opp {
  position: absolute; top: 8px; padding: 6px 10px; border-radius: 10px;
  background: rgba(0,0,0,.3); font-size: 13px; line-height: 1.6; min-width: 92px;
  cursor: pointer; /* 点头像框弹出对方积分与战绩（game.js toggleOppPop） */
}
.opp-left { left: 8px; }
.opp-right { right: 8px; text-align: right; }
.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 .offline { color: #ff8484; font-size: 11px; }
.opp .call-tag, .my-info .call-tag { color: #9fd8ff; font-size: 11px; }

.bottom-cards { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; }
/* 竖屏时底牌下移 1.5 张小牌高度（小牌高 52px × 1.5 = 78px，8+78=86），躲开左右两侧玩家名字 */
@media (orientation: portrait) {
  .bottom-cards { top: 86px; }
}

.play-zone { position: absolute; display: flex; align-items: center; justify-content: center; min-height: 70px; }
.play-left { left: 8px; top: 32%; max-width: 40vw; }
.play-right { right: 8px; top: 32%; max-width: 40vw; }
.play-mine { left: 50%; transform: translateX(-50%); bottom: 200px; max-width: 80vw; }
.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; }

/* 状态文字在上、倒计时在下，垂直分层不再重叠（学习大烟三/骨牌：状态 bottom:188，倒计时 bottom:166） */
#status-bar {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 188px;
  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: 122px;
  display: flex; gap: 12px;
}
#action-bar .btn { min-width: 84px; padding: 10px 18px; font-size: 15px; }

.my-info { position: absolute; left: 10px; bottom: 108px; font-size: 13px; line-height: 1.6; }

/* 本轮倍数：固定在自己名字上方，高于出牌按钮一行（含 加倍/炸弹/王炸 实时翻倍） */
.mult-info {
  position: absolute; left: 10px; bottom: 168px; font-size: 14px; font-weight: 700;
  color: #ffd98a; text-shadow: 0 1px 3px rgba(0,0,0,.55);
}

.my-hand {
  position: absolute; bottom: 12px; 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; } /* 两行稍微重叠，节省高度 */

/* 竖屏两行手牌时，上方操作区/状态栏/倒计时/出牌区整体上移，避免被手牌遮挡 */
#table.two-rows-hand .my-info { bottom: 158px; }
#table.two-rows-hand .mult-info { bottom: 218px; }
#table.two-rows-hand .chat-bubble-mine { bottom: 210px; }
#table.two-rows-hand #action-bar { bottom: 172px; }
/* 26-08-19 删除死规则：倒计时已改为圆形时钟（fixed 定位，由 game.js positionCountdown 按头像框实时定位），
   原 #table.two-rows-hand #countdown 的底部偏移覆盖不再生效，已删除 */
#table.two-rows-hand #status-bar { bottom: 238px; }
#table.two-rows-hand .play-mine { bottom: 250px; }
#table.two-rows-hand .wait-tip-mine { bottom: 238px; }
#table.two-rows-hand .btn-surrender { bottom: 132px; }

/* ---------- 卡牌 ---------- */
/* 数字与花色固定在左上角：牌重叠时左侧露出部分必须完整看到 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.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; }

/* ---------- 倒计时：小圆形时钟 + 秒数跳动（26-08-19 整改：取消横条，轮到谁跳到谁的头像旁，含自己；照搬骨牌/吊主升级已验证方案） ----------
   位置由 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: 8px; 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;
}
/* 常用语面板：右上角 💬 下方展开，一句一个按钮（竖屏竖排；横屏由文件末尾横屏媒体查询改为顶部双列网格+限高滚动，见下） */
#chat-panel {
  position: absolute; top: 146px; 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: 118px; }
.chat-bubble-right { right: 54px; top: 118px; }
.chat-bubble-mine { left: 10px; bottom: 160px; }
/* 退出观战按钮：仅观战模式显示（牌桌右上角，设置按钮下方） */
/* 退出房间按钮：牌桌右上角 🔄 下方常驻，同款红色小胶囊（对局中退出记一次逃跑，本局由托管代打完） */
#btn-watch-exit, #btn-exit-game {
  border: none; border-radius: 14px; padding: 6px 10px;
  background: rgba(214,31,38,.85); color: #fff; font-size: 12px; cursor: pointer;
}
#screen-game .opp-right { right: 54px; } /* 给设置按钮让位 */

/* 等待出牌提示：显示在对应玩家头像/名字下方，不遮挡已出的牌 */
.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: 108px; }
/* 右上方玩家：提示条在名字下方、出牌区域上方偏右 */
.wait-tip-right { right: 54px; top: 108px; }
/* 自己：提示条在状态栏位置，不与名字重叠（替代status-bar显示）；与状态栏同上移至 188，避开下方倒计时 */
.wait-tip-mine {
  left: 50%; transform: translateX(-50%); bottom: 188px;
  font-size: 14px; padding: 6px 16px;
  background: rgba(240,140,0,.75); color: #fff; font-weight: 600;
}

/* 投降按钮：对局中显示在左下角（自己信息上方） */
.btn-surrender {
  position: absolute; left: 10px; bottom: 82px; z-index: 11;
  padding: 6px 16px; border: none; border-radius: 8px;
  background: rgba(214,31,38,.75); color: #fff; font-size: 13px;
  cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.btn-surrender:active { transform: scale(.95); }

/* 投降确认弹窗按钮行 */
.surrender-btns { display: flex; gap: 12px; justify-content: center; }

/* 设置弹窗底部按钮行：关闭 + 强制退出 */
.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=动态可视高度：手机横屏排除浏览器工具栏，防止弹窗被裁切（26-08-19 照搬吊主升级/大烟三） */
  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;
}

/* ---------- 手机竖屏专属：左右两家出牌区完整展示（横屏一律不变） ---------- */
/* 竖屏问题：出牌区仅 40vw（约150px），小牌 38px/张不换行，出 4 张以上就溢出看不全。
   整改：左右两区各加宽到 66vw 并向自己一侧靠边（左家向右长、右家向左长），
   多出的牌由 game.js showPlay 拆成多行（375px 屏约 6 张/行，12 张顺子正好两行）；
   左区 top:24%、右区 top:44% 垂直错开，两家同时展示长牌也互不遮挡。 */
@media (orientation: portrait) {
  .play-left { left: 8px; top: 24%; max-width: 66vw; justify-content: flex-start; }
  .play-right { right: 8px; top: 44%; max-width: 66vw; justify-content: flex-end; }
  .play-left .cards-col { align-items: flex-start; }  /* 左家的牌贴左边向右排 */
  .play-right .cards-col { align-items: flex-end; }   /* 右家的牌贴右边向左排 */
  .play-mine .cards-col { align-items: center; }      /* 自己的牌仍居中 */
  .play-mine { max-width: 92vw; }                     /* 自己的出牌区放宽（约 8 张/行），12 张顺子两行看全 */
}

/* ---------- 手机横屏专属布局（竖屏一律不变） ---------- */
/* 26-08-19 横屏大整改（模仿吊主升级已验证方案，斗地主三人桌适配：无对家，底牌保留顶部居中）：
   ① 左右两家头像框从顶角移到屏幕中侧（top:34%-40px）、各向屏幕中间靠拢（left/right 66px）避开刘海/挖孔；
   ② 左右两家打出的牌紧贴各自名字框正下方（top:34%+6px），与吊主升级出牌坐标同规；
   ③ 状态文字/三个等待出牌提示统一移到右上角空白处（⚙️按钮列左侧），不再压底部操作区；
   ④ 自己的名字沉到左下角最底（加半透明底防止压牌时白字看不清），"本轮X倍"/投降按钮跟随上移；
   ⑤ 自己出牌在手牌正上方居中（bottom:130+安全区，限宽 60vw）；
   ⑥ 聊天常用语面板改顶部双列网格+限高滚动，8 句横屏全部可见可点；
   ⑦ 聊天气泡跟随新布局（左右家挂名字框下方避让出牌区、自己挂名字上方）；
   ⑧ 倒计时为圆形时钟，由 game.js positionCountdown() 按头像框 fixed 定位，不参与本块布局。
   注意：本块必须位于文件末尾——基础规则 #screen-game .opp-right 在前文，
   同特异性时后写的规则才生效，放末尾才能保证横屏覆盖成功。 */
@media (orientation: landscape) {
  .opp { max-width: 140px; font-size: 12px; padding: 3px 6px; line-height: 1.4; } /* 限宽140px长名字自动换行（与吊主升级同规） */
  /* ① 左右两家头像框移到屏幕中侧、向屏幕中间靠拢避开刘海 */
  .opp-left { left: 66px; top: calc(34% - 40px); }
  #screen-game .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-mine {
    left: auto; right: 56px; top: calc(36px + var(--sat)); bottom: auto; transform: none;
  }
  /* ④ 自己的名字移到左下角最底（手牌居中、左下角为空白区）；"本轮X倍"/投降按钮跟随上移 */
  .my-info { bottom: calc(14px + var(--sab)); background: rgba(0,0,0,.35); border-radius: 8px; padding: 2px 6px; }
  .mult-info { left: 10px; bottom: calc(64px + var(--sab)); }
  .btn-surrender { bottom: calc(92px + var(--sab)); }
  /* ⑤ 自己的出牌区在自己手牌正上方居中（与吊主升级同规：bottom:130+安全区、限宽 60vw） */
  .play-mine { bottom: calc(130px + var(--sab)); max-width: 60vw; }
  /* ⑦ 聊天气泡：左右家挂名字框下方避让出牌区、自己挂名字/倍数上方 */
  .chat-bubble-left { left: 66px; top: calc(34% + 150px); }
  .chat-bubble-right { right: 66px; top: calc(34% + 150px); }
  .chat-bubble-mine { bottom: calc(124px + var(--sab)); }
  /* ⑥ 横屏常用语面板（26-08-19 整改）：竖排版从 top:146 竖排 8 句约 300px 高，横屏可视高仅 ~360-400px，
     底部几句被裁点不到——改为顶部双列网格+限高滚动，8 句全部可见可点；
     右缘让开 54px 不遮右上角 ⚙️/托管/💬 按钮列（可随时再按 💬 收合） */
  #chat-panel {
    top: calc(4px + var(--sat)); right: 54px; width: auto; max-width: 56vw;
    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; }
}

/* ---------- 手机横屏矮屏（≤400px 高，如 iPhone SE 横屏）进一步压缩（26-08-19 新增，与骨牌同口径） ---------- */
@media (max-height: 400px) and (orientation: landscape) {
  /* 常用语面板同步压缩：字号更小、间距更紧，保证 ≤400px 矮屏 8 句也全部显示 */
  #chat-panel { right: 50px; gap: 4px; max-height: calc(100% - 112px); }
  #chat-panel .chat-item { padding: 5px 7px; font-size: 11px; }
}