/* =========================================================
 * style.css —— 掼蛋牌桌样式（桌面 / 移动端自适应）
 * ========================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --felt1: #1d6b47;
  --felt2: #145236;
  --felt3: #0d2c1d;
  --wood: #5b3a1e;
  --gold: #f5c542;
  --red: #d0342c;
  --black: #1d2430;
  --card-w: 86px;
  --card-h: 120px;
  /* 主题变量：桌布 / 牌纸 / 牌背 / 描边（由 <html data-felt data-card> 切换） */
  --app-bg: #0d1f17;
  --card-bg1: #ffffff;
  --card-bg2: #f2f3f0;
  --card-edge: #b9beb4;
  --card-shadow: 0 2px 5px rgba(0, 0, 0, .35);
  --back-bg: #2c4f8a;
  --table-accent: rgba(245, 197, 66, .18);
}
html, body { height: 100%; }
body {
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
  background: var(--app-bg);
  color: #eee;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

/* ---------------- 顶栏 ---------------- */
#topbar {
  height: 54px; flex: 0 0 auto;
  background: linear-gradient(180deg, #233a2d, #16281e);
  border-bottom: 2px solid #0a140e;
  display: flex; align-items: center; gap: 18px; padding: 0 16px;
  z-index: 5;
}
.brand { font-size: 24px; font-weight: 900; color: var(--gold); letter-spacing: 1px; text-shadow: 0 2px 4px rgba(0,0,0,.6); white-space: nowrap; display: flex; align-items: center; }
.brand .brand-sub { color: #fff; }
.brand-emblem { height: 30px; width: auto; margin-right: 7px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.start-logo {
  display: block; width: min(206px, 54vw); height: auto; margin: 0 auto 8px;
  background: #fff; border-radius: 12px; padding: 9px 13px;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
#round-info { display: flex; gap: 14px; align-items: center; font-size: 14px; flex-wrap: wrap; }
#round-info .ri-round { color: #9fc3ae; }
#round-info b.lv { color: var(--gold); font-size: 16px; }
#round-info .ri-team { padding: 2px 10px; border-radius: 12px; font-size: 13px; }
#round-info .ri-team.me { background: #1d5c8a; }
#round-info .ri-team.opp { background: #8a3a1d; }
#round-info .ver { color: #7fa08c; font-size: 11px; }
.top-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.btn-icon { padding: 6px 10px; font-size: 16px; }

/* ---------------- 牌桌 ---------------- */
#table {
  position: relative; flex: 1 1 auto;
  background: radial-gradient(ellipse at 50% 42%, var(--felt1) 0%, var(--felt2) 58%, var(--felt3) 100%);
  overflow: hidden;
}
#table::before {
  content: ""; position: absolute; inset: 12px;
  border: 2px solid var(--table-accent);
  border-radius: 18px; pointer-events: none;
}

/* =========================================================
 * 主题（桌布 / 牌面）：<html data-felt="..." data-card="...">
 *   只覆盖 CSS 变量，所有元素自动跟着变
 * ========================================================= */
/* ---- 桌布 ---- */
[data-felt="blue"] { --felt1: #1b3f6b; --felt2: #0a1c30; --felt3: #08131f; --app-bg: #08131f; --back-bg: #2c4f8a; }
[data-felt="red"] { --felt1: #6b2430; --felt2: #2a0d12; --felt3: #180709; --app-bg: #180709; --back-bg: #7d2b34; }
[data-felt="dark"] {
  --felt1: #26302c; --felt2: #0b0d0c; --felt3: #070908; --app-bg: #070908;
  --back-bg: #3a3f4a; --table-accent: rgba(245, 197, 66, .34);
}
[data-felt="wood"] { --felt1: #6a4526; --felt2: #2b1a0d; --felt3: #170e06; --app-bg: #170e06; --back-bg: #7a4a24; }
[data-felt="cyan"] { --felt1: #1f6f6b; --felt2: #0b2b2a; --felt3: #061a1a; --app-bg: #061a1a; --back-bg: #1f6f8a; }

/* ---- 风景主题（纯 CSS 多层渐变画风景：天空 / 海面 / 光带），零依赖、无额外请求 ---- */
[data-felt="sea"] {
  --felt1: #0d5f92; --felt2: #063b5e; --felt3: #04283f; --app-bg: #04283f; --back-bg: #2a9fd6;
  --table-accent: rgba(160, 226, 245, .40);
  --scene:
    radial-gradient(120% 55% at 50% -12%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, #cfeeFA 0%, #9fe0f4 14%, #63c3e8 28%, #2a9fd6 45%, #1076b4 62%, #0a4f7c 82%, #063b5e 100%);
}
[data-felt="sunset"] {
  --felt1: #c85a7a; --felt2: #6b2f4a; --felt3: #3a1a2c; --app-bg: #3a1a2c; --back-bg: #ff9a62;
  --table-accent: rgba(255, 208, 138, .42);
  --scene:
    radial-gradient(70% 40% at 50% 78%, rgba(255, 220, 150, .85) 0%, rgba(255, 160, 90, .35) 45%, rgba(0, 0, 0, 0) 75%),
    linear-gradient(180deg, #ffd08a 0%, #ff9a62 26%, #e06a72 50%, #a8446a 70%, #4a2a5a 100%);
}
[data-felt="aurora"] {
  --felt1: #1e6b6b; --felt2: #0b2a4a; --felt3: #061827; --app-bg: #061827; --back-bg: #4fbf9f;
  --table-accent: rgba(120, 245, 200, .40);
  --scene:
    radial-gradient(90% 45% at 22% 8%, rgba(120, 255, 210, .45) 0%, rgba(120, 255, 210, 0) 60%),
    radial-gradient(80% 40% at 78% 4%, rgba(180, 140, 255, .40) 0%, rgba(180, 140, 255, 0) 62%),
    linear-gradient(180deg, #123a5e 0%, #1e6b6b 38%, #2f8f7a 58%, #0a1c2e 100%);
}
[data-felt="sakura"] {
  --felt1: #8f5f86; --felt2: #5a3a58; --felt3: #33203a; --app-bg: #33203a; --back-bg: #ffb7cf;
  --table-accent: rgba(255, 190, 215, .42);
  --scene:
    radial-gradient(60% 32% at 30% 12%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #ffe3ee 0%, #ffc4d8 22%, #ee9bbd 45%, #8f5f86 74%, #4a2c4e 100%);
}
/* 风景主题直接以渐变作为桌面底图（其它主题保持原样，互不影响） */
[data-felt="sea"] #table,
[data-felt="sunset"] #table,
[data-felt="aurora"] #table,
[data-felt="sakura"] #table { background-image: var(--scene); background-color: var(--felt2); }
/* ---- 牌面 ---- */
[data-card="ivory"] {
  --card-bg1: #fdf6e3; --card-bg2: #f0e2c0; --card-edge: #cbb98c;
  --red: #b5451f; --black: #3a3226;
}
[data-card="jade"] {
  --card-bg1: #f2fbf4; --card-bg2: #dcefe2; --card-edge: #a9c9b3;
  --red: #c0392b; --black: #1d3a2a;
}
[data-card="ink"] {
  --card-bg1: #2b323d; --card-bg2: #1a1f27; --card-edge: #4a5361;
  --red: #ff6b5e; --black: #e8eef5;
  --card-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}

/* ---- 主题选择面板 ---- */
#theme-panel {
  position: fixed; inset: 0; z-index: 310; display: none;
  align-items: center; justify-content: center;
  background: rgba(4, 12, 8, .72);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
#theme-panel .tp-card {
  width: min(520px, 92vw); max-height: 88vh; overflow-y: auto;
  background: linear-gradient(180deg, #17402c, #0f2c1e);
  border: 1px solid rgba(245, 197, 66, .5); border-radius: 16px;
  padding: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, .6); color: #e9f5ee;
}
#theme-panel .tp-head { font-size: 17px; font-weight: 800; color: #ffe08a; margin-bottom: 12px; }
#theme-panel .tp-title { font-size: 13px; color: #cfe3d6; margin: 10px 0 8px; }
#theme-panel .tp-list { display: flex; flex-wrap: wrap; gap: 8px; }
#theme-panel .tp-item {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: rgba(255, 255, 255, .06); border: 2px solid transparent; border-radius: 10px;
  padding: 7px 10px; cursor: pointer; color: #dfeee5; font-size: 12px;
}
#theme-panel .tp-item.on { border-color: var(--gold); background: rgba(245, 197, 66, .16); }
#theme-panel .tp-swatch { width: 46px; height: 30px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
#theme-panel .tp-tip { font-size: 11.5px; color: #9fb8a9; margin: 12px 0 8px; }
#theme-panel .tp-btns { display: flex; gap: 8px; }
#theme-panel .tp-btns .btn { flex: 1 1 0; padding: 9px 0; }
/* 虚拟横屏下把面板反向旋转，竖着拿手机也能正着看 */
html.rot #theme-panel .tp-card {
  transform: rotate(-90deg);
  width: min(520px, calc(var(--rot-h, 100vw) * .92));
  max-height: calc(var(--rot-w, 100vh) * .9);
}

/* ---------------- 座位 ---------------- */
.seat {
  position: absolute; width: 210px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px; border-radius: 14px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(255, 255, 255, .08);
  transition: box-shadow .25s, border-color .25s;
}
/* ---- 该谁出牌：高亮做得明显（描边 + 呼吸光晕 + 头像金环）---- */
.seat.turn {
  border-color: var(--gold);
  border-width: 2px;
  box-shadow: 0 0 0 2px rgba(245, 197, 66, .35), 0 0 26px rgba(245, 197, 66, .65), inset 0 0 22px rgba(245, 197, 66, .12);
  animation: turnPulse 1.6s ease-in-out infinite;
}
@keyframes turnPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(245, 197, 66, .3), 0 0 18px rgba(245, 197, 66, .45), inset 0 0 18px rgba(245, 197, 66, .10); }
  50%      { box-shadow: 0 0 0 3px rgba(245, 197, 66, .5), 0 0 34px rgba(245, 197, 66, .85), inset 0 0 26px rgba(245, 197, 66, .18); }
}
.seat.turn .avatar { box-shadow: 0 0 0 3px var(--gold), 0 0 16px rgba(245, 197, 66, .8); }
.seat.turn .s-name { color: var(--gold); }
.seat.turn .s-name::before { content: "▶ "; font-size: 12px; }
/* 轮到我：整块更亮，一眼看到 */
.seat.self-turn { background: rgba(245, 197, 66, .14); }
.seat.out { opacity: .55; }
.seat-head { display: flex; align-items: center; gap: 10px; width: 100%; }
.avatar {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; color: #fff; flex: 0 0 auto;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.25);
}
.avatar.me { background: linear-gradient(160deg, #2f7fd0, #1b4e86); }
.avatar.opp { background: linear-gradient(160deg, #d06a2f, #8a3d14); }
.s-meta { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.seat-north .s-meta { align-items: flex-start; }
/* 长昵称/长状态一律省略号收口，避免文字溢出压到牌面或别的座位 */
.s-name, .s-level, .s-count, .s-status { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-head { min-width: 0; }
.seat-head .s-meta { flex: 1 1 auto; }
.s-name { font-size: 16px; font-weight: 700; }
.s-level { font-size: 12px; color: #cfe3d6; }
.s-count { font-size: 13px; color: #ffe9a8; }
.s-count b.warn { color: #ff8f6b; font-size: 15px; }
.s-count .done { color: #9fd6b4; }
.s-status { min-height: 22px; font-size: 12px; display: flex; align-items: center; gap: 6px; }
.rank-badge { padding: 1px 8px; border-radius: 10px; font-weight: 700; }
.rank-badge.r1 { background: var(--gold); color: #4a3200; }
.rank-badge.r2 { background: #cfd6dd; color: #333; }
.rank-badge.r3 { background: #b0793f; color: #fff; }
.rank-badge.r4 { background: #5a6b72; color: #fff; }
.turn-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--gold);
  animation: blink 1s infinite;
}
@keyframes blink { 50% { opacity: .2; } }
.seat.thinking .s-name::after {
  content: "…"; animation: dots 1.2s steps(4) infinite; color: var(--gold);
}
@keyframes dots { 0% { content: ""; } 25% { content: "·"; } 50% { content: "··"; } 75% { content: "···"; } }
/* 思考中：状态行显示明确的"思考中"文字（真人对手超过 0.9 秒也会显示） */
.seat.thinking .s-status::after {
  content: "思考中…";
  color: var(--gold);
  font-weight: 700;
  animation: thinkBlink 1.4s ease-in-out infinite;
}
@keyframes thinkBlink { 50% { opacity: .45; } }

/* ---- 中间提示：等待别人 / 轮到我 ---- */
.wait-banner {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px; border-radius: 999px;
  background: rgba(0, 0, 0, .42);
  border: 1px solid rgba(245, 197, 66, .45);
  color: #ffe9a8; font-size: 15px; font-weight: 600;
}
.wait-banner b { color: #fff; }
.wait-banner .dots { display: inline-flex; gap: 4px; }
.wait-banner .dots i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
  animation: dotJump 1.1s infinite ease-in-out;
}
.wait-banner .dots i:nth-child(2) { animation-delay: .16s; }
.wait-banner .dots i:nth-child(3) { animation-delay: .32s; }
@keyframes dotJump { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }
.my-banner {
  display: inline-block; padding: 5px 16px; border-radius: 999px;
  background: linear-gradient(160deg, #ffd873, #f5b21e);
  color: #4a3200; font-size: 16px; font-weight: 800;
  box-shadow: 0 0 20px rgba(245, 197, 66, .75);
  animation: myPulse 1.5s ease-in-out infinite;
}
@keyframes myPulse { 50% { transform: scale(1.045); box-shadow: 0 0 30px rgba(245, 197, 66, .95); } }

/* 「本副打几」旁边标明这是谁家的级 */
.lv-owner {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; vertical-align: 1px;
}
.lv-owner.me { background: linear-gradient(160deg, #ffd873, #f5b21e); color: #4a3200; }
.lv-owner.opp { background: rgba(224, 113, 74, .28); color: #ffb79a; border: 1px solid rgba(224, 113, 74, .5); }

/* ============ 顶栏紧凑重排（安卓小屏不再挤压按钮文字）============ */
#topbar { gap: 8px; padding: 0 10px; flex-wrap: nowrap; overflow: hidden; }
#topbar .brand { flex: 0 1 auto; min-width: 0; font-size: 20px; letter-spacing: 0; }
#topbar .brand .brand-emblem { height: 26px; margin-right: 5px; }
#topbar #round-info { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow: hidden; gap: 8px; font-size: 13px; }
/* 按钮：绝不换行、不被压缩 */
#topbar .btn { white-space: nowrap; flex: 0 0 auto; padding: 7px 10px; font-size: 13px; line-height: 1.1; }
#topbar .btn-icon { padding: 7px 9px; font-size: 15px; }
#topbar .btn-update-badge, #topbar .btn-ai-level { padding: 6px 9px; font-size: 12px; }
/* 中等宽度：先隐藏"版本号 / 逢人配"（最不关键） */
@media (max-width: 1400px) {
  #round-info .ver { display: none; }
}
@media (max-width: 1200px) {
  #round-info .ri-wild { display: none; }
  #round-info { gap: 6px; font-size: 12px; }
  #round-info b.lv { font-size: 14px; }
}
/* 窄屏（手机横屏约 900px 以下）：只留"本副打几 + 我方/对方级" */
@media (max-width: 960px) {
  #topbar .brand { display: none; }
  #round-info .ri-round { display: none; }
  #topbar .btn { padding: 6px 8px; font-size: 12px; }
}
@media (max-width: 760px) {
  #topbar .btn-ai-level { font-size: 11px; padding: 5px 7px; }
  #topbar .btn-update-badge { font-size: 11px; padding: 5px 7px; }
}

/* 顶栏"有新版本"常驻徽标 */
.btn-update-badge {
  font-size: 12px; padding: 4px 10px; margin-right: 4px; cursor: pointer;
  color: #4a3200; font-weight: 700; border: none;
  background: linear-gradient(160deg, #ffe08a, #f5a623);
  box-shadow: 0 0 12px rgba(245, 166, 35, .65);
  animation: updPulse 1.6s ease-in-out infinite;
}
@keyframes updPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(245, 166, 35, .45); }
  50% { box-shadow: 0 0 18px rgba(245, 166, 35, .95); }
}

/* 顶栏人机水平按钮 */
.btn-ai-level { font-size: 12px; padding: 4px 9px; }
.btn-ai-level.ai-expert {
  color: #4a3200;
  background: linear-gradient(160deg, #ffd873, #f5b21e);
  border-color: rgba(245, 197, 66, .9);
  box-shadow: 0 0 10px rgba(245, 197, 66, .5);
}

/* 级数变化：顶栏闪一下（让玩家注意到新一副打几级） */
@keyframes lvFlash {
  0%, 100% { background: transparent; }
  25% { background: rgba(245, 197, 66, .42); }
  55% { background: transparent; }
  75% { background: rgba(245, 197, 66, .28); }
}
.ri-level.lv-flash { animation: lvFlash 1s ease-out 1; border-radius: 8px; padding: 1px 6px; }

/* 结算面板：级数推进动画（箭头滑入 + 新级数弹出） */
@keyframes lvNextPop {
  0% { transform: scale(.6) translateY(6px); opacity: 0; }
  55% { transform: scale(1.28) translateY(0); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes lvArrow {
  0% { opacity: 0; transform: translateX(-8px); }
  100% { opacity: 1; transform: translateX(0); }
}
.lv-next {
  display: inline-block; color: var(--gold); font-size: 1.25em; font-weight: 800;
  animation: lvNextPop .75s cubic-bezier(.2, 1.4, .4, 1) both;
  text-shadow: 0 0 12px rgba(245, 197, 66, .6);
}
.lv-arrow { display: inline-block; color: var(--gold); margin: 0 4px; animation: lvArrow .5s ease-out both; }

/* 等待太久时的「催一下」按钮 */
.nudge-btn {
  margin-left: 8px; padding: 3px 10px; border-radius: 999px; cursor: pointer;
  font: 700 12px/1 inherit; color: #4a3200;
  background: linear-gradient(160deg, #ffd873, #f5b21e);
  border: none; box-shadow: 0 0 10px rgba(245, 197, 66, .55);
}
.nudge-btn:active { transform: scale(.96); }

/* 段位徽标（后台/大堂显示） */
.tier-badge {
  display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); margin-right: 4px;
}
.tier-badge.king { background: linear-gradient(160deg, #ffd873, #f5b21e); color: #4a3200; }
.tier-badge.diamond { background: linear-gradient(160deg, #bfe9f7, #4aa3df); color: #08303f; }
.tier-badge.platinum { background: linear-gradient(160deg, #e8f5f0, #9fd6b4); color: #12402c; }
.tier-badge.gold { background: linear-gradient(160deg, #ffe9a8, #e0a92a); color: #4a3200; }
.tier-badge.silver { background: linear-gradient(160deg, #f0f2f4, #b9c2cb); color: #333; }
.tier-badge.bronze { background: linear-gradient(160deg, #e8c39e, #b0793f); color: #2d1a08; }

/* ---- 自定义整理小工具条（仅自定义模式显示）---- */
.custom-bar {
  position: absolute; right: 8px; top: 2px; z-index: 30;
  display: none; gap: 6px; align-items: center;
}
.custom-bar.show { display: flex; }
.custom-bar button {
  font: 600 11px/1 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #ffe9a8; background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(245, 197, 66, .45); border-radius: 999px;
  padding: 5px 10px; cursor: pointer; white-space: nowrap;
}
.custom-bar button:hover { background: rgba(245, 197, 66, .18); }
.custom-bar button.off { color: #cfe3d6; border-color: rgba(255, 255, 255, .25); }
html.rot .custom-bar { right: auto; left: 8px; top: 0; }

/* ---- 自定义整理：拖动排牌 ---- */
#hand.custom, #hand.custom .card { touch-action: none; }   /* 触摸端必须：否则手势被浏览器拿去滚动，拖不动 */
#hand.custom .card { cursor: grab; -webkit-user-select: none; user-select: none; }
#hand.custom .card {
  transition: left .16s ease-out, top .16s ease-out;   /* 多排布局：换排也顺滑 */
}
/* 拖动落点指示：目标牌旁边一条金色竖条 */
#hand.custom .card.drop-before::before,
#hand.custom .card.drop-after::after {
  content: "";
  position: absolute; top: -4px; bottom: -4px; width: 4px; border-radius: 2px;
  background: linear-gradient(180deg, #ffd873, #f5b21e);
  box-shadow: 0 0 10px rgba(245, 197, 66, .9);
  z-index: 1000;
}
#hand.custom .card.drop-before::before { left: -6px; }
#hand.custom .card.drop-after::after { right: -6px; }
#hand.custom .card.dragging {
  cursor: grabbing;
  transition: none;                    /* 拖动的牌跟手，不能有过渡 */
  will-change: transform;
  box-shadow: 0 24px 42px rgba(0, 0, 0, .65), 0 0 0 2px var(--gold), 0 0 28px rgba(245, 197, 66, .7);
  filter: brightness(1.06);
}
/* 拖动时其它牌稍微压暗，突出被拿起的牌 */
#hand.custom.dragging-active .card:not(.dragging) { filter: brightness(.9); }
#hand.custom::after {
  content: "按住牌拖动可排序（松手保存）";
  position: absolute; left: 50%; transform: translateX(-50%); bottom: -18px;
  font-size: 11px; color: rgba(255, 233, 168, .75); white-space: nowrap;
}

.seat-north { top: 12px; left: 50%; transform: translateX(-50%); width: auto; min-width: 230px; max-width: min(420px, 46vw); }
.seat-north .s-name { font-size: 14px; white-space: nowrap; }
.seat-north .avatar { width: 44px; height: 44px; font-size: 16px; flex: 0 0 auto; }
.seat-north .s-meta, .seat-north .backs { align-items: flex-start; justify-content: flex-start; }
.seat-north .backs { max-width: 100%; overflow: hidden; }
.seat-east  { right: 14px; top: 44%; transform: translateY(-50%); }
.seat-west  { left: 14px; top: 55%; transform: translateY(-50%); }

.backs { display: flex; gap: 2px; height: 26px; align-items: center; }
.backs .mini-back {
  width: 18px; height: 26px; border-radius: 3px;
  background: repeating-linear-gradient(45deg, #2c4f8a 0 3px, #22406f 3px 6px);
  border: 1px solid #16294a; margin-left: -8px;
}
.backs .mini-back:first-child { margin-left: 0; }

/* 成双成对是多行叠放，牌底部会被下一行盖住 —— 徽标移到右上角（重叠时仍可见） */
#hand.pairs .level-badge,
#hand.pairs .wild-badge,
#hand.pairs .joker-brand {
  top: 3px; bottom: auto; right: 3px; left: auto;
}
/* 窄屏牌距很小（约 15px），徽标再收窄一点，避免被右邻牌压住 */
@media (max-width: 620px) {
  #hand .level-badge, #hand .wild-badge { font-size: .5em; padding: 0 .1em; border-radius: 3px; left: 2px; }
  #hand.pairs .level-badge, #hand.pairs .wild-badge { left: auto; right: 2px; }
}

/* 成双成对整理：成组的牌贴紧并在顶部标色 —— 对子金 / 三张蓝 / 炸弹红，多行叠放也一眼可辨 */
.card.in-pair {
  box-shadow: inset 0 3px 0 rgba(245, 197, 66, .8), 0 2px 6px rgba(0, 0, 0, .35);
}
.card.in-triple {
  box-shadow: inset 0 3px 0 rgba(90, 175, 240, .8), 0 2px 6px rgba(0, 0, 0, .35);
}
.card.in-bomb {
  box-shadow: inset 0 3px 0 rgba(240, 90, 90, .85), 0 2px 6px rgba(0, 0, 0, .35);
}
.card.in-pair.sel { box-shadow: inset 0 3px 0 rgba(245, 197, 66, 1), 0 0 0 2px var(--gold); }
.card.in-triple.sel { box-shadow: inset 0 3px 0 rgba(90, 175, 240, 1), 0 0 0 2px var(--gold); }
.card.in-bomb.sel { box-shadow: inset 0 3px 0 rgba(240, 90, 90, 1), 0 0 0 2px var(--gold); }

/* ---------------- 中央出牌区 ---------------- */
#center {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: min(640px, 52vw); height: 340px; z-index: 2;
}
#req-label {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  background: rgba(0, 0, 0, .45); border: 1px solid rgba(245, 197, 66, .35);
  padding: 4px 16px; border-radius: 16px; font-size: 13px; color: #ffe9a8;
  white-space: nowrap; z-index: 4;
}
#trick-area { position: relative; width: 100%; height: 100%; }
.trick-slot { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ts-0 { bottom: 6px; left: 50%; transform: translateX(-50%); }
.ts-1 { right: 0; top: 50%; transform: translateY(-50%); }
.ts-2 { top: 26px; left: 50%; transform: translateX(-50%); }
.ts-3 { left: 0; top: 50%; transform: translateY(-50%); }
.played-cards { display: flex; }
/* 出牌区叠放间距必须跟着牌宽走：手机上牌只有 ~32px，固定 -30px 会把牌几乎全盖住 */
.played-cards .card {
  margin-left: var(--trick-ov, calc(var(--trick-w, calc(var(--card-w) * 0.72)) * -0.22));
  animation: playIn .22s ease-out;
}
.played-cards .card:first-child { margin-left: 0; }
@keyframes playIn {
  from { transform: translateY(14px) scale(.92); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.play-label {
  font-size: 12px; color: #ffe9a8; background: rgba(0,0,0,.4);
  padding: 1px 10px; border-radius: 10px; white-space: nowrap;
}
.pass-tag {
  font-size: 17px; font-weight: 800; letter-spacing: 3px;
  color: #ffe08a; background: linear-gradient(180deg, rgba(24, 40, 30, .95), rgba(8, 20, 13, .95));
  padding: 5px 18px 5px 21px; border-radius: 12px;
  border: 2px solid rgba(245, 197, 66, .85);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .55), 0 0 12px rgba(245, 197, 66, .28);
  text-shadow: 0 2px 4px rgba(0, 0, 0, .6);
  animation: passPop .3s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes passPop {
  from { transform: scale(.6); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; }
  to { transform: scale(1); opacity: 1; }
}

/* ---------------- 卡牌 ---------------- */
.card {
  position: relative;
  width: var(--card-w); height: var(--card-h);
  font-size: calc(var(--card-w) * 0.19);
  background: linear-gradient(160deg, var(--card-bg1), var(--card-bg2));
  border-radius: calc(var(--card-w) * 0.105);
  border: 1px solid var(--card-edge);
  box-shadow: var(--card-shadow);
  flex: 0 0 auto; cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.card .corner {
  position: absolute; top: calc(var(--card-h) * 0.042); left: calc(var(--card-w) * 0.08);
  font-size: 1em; font-weight: 800; line-height: 1.05; text-align: center;
}
.card .corner.b {
  top: auto; left: auto;
  bottom: calc(var(--card-h) * 0.042); right: calc(var(--card-w) * 0.08);
  transform: rotate(180deg);
}
.card .pip {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 2.3em; opacity: .9;
}
.card.red { color: var(--red); }
.card.black { color: var(--black); }
.trick-slot .card {
  width: var(--trick-w, calc(var(--card-w) * 0.72));
  height: var(--trick-h, calc(var(--card-h) * 0.72));
  /* 字号必须跟着"实际牌宽"缩放：原来写死 0.135×牌宽 = 7px，
     牌被缩小后字更小，北家/南家出的牌就完全看不清了 */
  font-size: calc(var(--trick-w, calc(var(--card-w) * 0.72)) * 0.3);
}
/* 出牌区：只保留"大标识"——大字点数 + 中间大花色；
   去掉重复的小花色与右下角重复标记（叠放时正是这些小标记互相挤压、看着乱）。
   手牌不受影响（规则只作用于 .trick-slot 内）。 */
.trick-slot .card .cs,
.trick-slot .card .corner.b { display: none; }
.trick-slot .card .corner { font-size: 1.35em; }
.trick-slot .card .pip { font-size: 1.7em; inset: 0 0 0 34%; }
.trick-slot .card .joker-logo,
.trick-slot .card .joker-brand { display: none; }
/* 出牌区整体不超出中央区：牌多时由 JS 设置 --trick-* 缩放，标签过长则省略 */
.trick-slot { max-width: 100%; }
.trick-slot .played-cards { max-width: 100%; justify-content: center; }
.trick-slot .play-label {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--trick-fs, 10px);
}
/* 「不出」不随出牌牌面一起缩小，始终清晰可读 */
.trick-slot .pass-tag {
  font-size: max(17px, calc(var(--trick-fs, 14px) * 1.15));
  box-shadow: 0 0 12px rgba(245, 197, 66, .5);
}
.card.mini { width: calc(var(--card-w) * 0.5); height: calc(var(--card-h) * 0.5); border-radius: 6px; }
.card.joker { background: linear-gradient(160deg, #fff, #f4eef8); }
/* ===== 大小王：大王=彩色 / 小王=黑白（一眼区分） ===== */
/* 大王：暖色牌面 + 彩色品牌 LOGO + 红字 */
.card.joker.red {
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(255, 214, 120, .55) 0%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(160deg, #fffdf7, #ffe7dd);
  box-shadow: inset 0 0 0 1.5px rgba(214, 60, 60, .35);
}
.card.joker.red .joker-logo { opacity: .58; filter: saturate(1.2) contrast(1.03); }
.card.joker.red .joker-label { color: #b3121a; }
.card.joker.red .corner { color: #c1121f; }
.card.joker.red .joker-brand {
  color: #7a5200;
  background: linear-gradient(180deg, #ffe9a8, #f5c542);
}
/* 小王：冷灰牌面 + 黑白(去色)品牌 LOGO + 黑字 */
.card.joker.black {
  background: linear-gradient(160deg, #ffffff, #e9edf2);
  box-shadow: inset 0 0 0 1.5px rgba(38, 48, 62, .28);
}
.card.joker.black .joker-logo { opacity: .5; filter: grayscale(1) contrast(1.08); }
.card.joker.black .corner-logo { filter: grayscale(1) contrast(1.08); }
.card.joker.black .joker-label { color: #171d26; }
.card.joker.black .corner { color: #1d2430; }
.card.joker.black .joker-brand {
  color: #2b3644;
  background: linear-gradient(180deg, #eef1f5, #c6cfda);
}
/* 大小王：泉江科技 LOGO 水印 + 品牌字 */
.joker-logo {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -46%);
  width: 68%; height: auto; opacity: .5; pointer-events: none;
}
/* 王字样只占左侧可视条（手牌重叠时也不会被右邻牌盖住） */
.joker-label {
  position: absolute; left: calc(var(--card-w) * 0.05); top: 20%;
  width: calc(var(--card-w) * 0.34); height: 64%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.45em; font-weight: 900; writing-mode: vertical-lr; letter-spacing: .18em;
  color: #7a1f1f;
  text-shadow: 0 0 3px #fff, 0 0 6px #fff, 0 0 10px #fff;
}
/* 出牌区王牌：直接只显示左上角「大 / 小」两个字（竖排"大王/小王"字样在叠放时会被相邻牌压住） */
.trick-slot .joker-label { display: none; }
.trick-slot .card.joker .corner { font-size: 1.7em; }
/* 手牌里王字样隐去，改用左上角「大/小 + 品牌标」——重叠时也不会被右邻牌盖住 */
#my-zone .joker-label { display: none; }
#my-zone .joker-logo { width: 80%; opacity: .42; }
#my-zone .card.joker.red .joker-logo { opacity: .5; }
.joker-brand {
  position: absolute; bottom: 3px; left: 4px;
  font-size: .56em; font-weight: 800; color: #8a6410;
  background: linear-gradient(180deg, #ffe9a8, #f5c542);
  border-radius: 4px; padding: 0 .22em;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
/* 左上角标里的品牌标识（手牌重叠时也始终可见） */
.corner-logo { width: 1.15em; height: auto; display: block; margin-top: 1px; }
.card.level-card { border: 2px solid var(--gold); box-shadow: 0 0 8px rgba(245, 197, 66, .55), 0 2px 5px rgba(0,0,0,.35); }
.level-badge {
  position: absolute; bottom: 3px; left: 2px;
  font-size: .6em; font-weight: 700;
  background: var(--gold); color: #5b4200; border-radius: 5px; padding: 0 .16em;
}
.card.wild-card {
  border: 2px solid transparent;
  background: linear-gradient(160deg, #fff, #ffe9f3) padding-box,
              linear-gradient(120deg, #ff5f5f, #ffc93c, #47d764, #3aa0ff, #b45fff) border-box;
  box-shadow: 0 0 10px rgba(180, 95, 255, .5), 0 2px 5px rgba(0,0,0,.35);
}
.wild-badge {
  position: absolute; bottom: 3px; left: 2px;
  font-size: .6em; font-weight: 700;
  background: linear-gradient(90deg, #ff5f5f, #ffc93c); color: #fff; border-radius: 5px; padding: 0 .16em;
}
.card.as-wild .pip::after { content: "✦"; position: absolute; font-size: .8em; top: .3em; right: .45em; color: #b45fff; }
.card.back { background: var(--back-bg); }
.back-pattern {
  position: absolute; inset: 5px; border-radius: 5px;
  background: repeating-linear-gradient(45deg, #3a63a8 0 5px, #2c4f8a 5px 10px);
  border: 1px solid #16294a;
}

/* ---------------- 我的手牌区 ---------------- */
#my-zone {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(980px, 96vw); z-index: 6; padding-bottom: 8px;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
}
#sel-info { min-height: 22px; font-size: 13px; color: #dff0e5; text-shadow: 0 1px 2px rgba(0,0,0,.7); text-align: center; }
#sel-info .bad { color: #ff9d8a; }
#sel-info .wild-note { color: #d9a6ff; }
/* 「要不起」：提示文字 + 醒目金色按钮（轻微脉动），明确告诉玩家点它继续 */
#sel-info .cantbeat { color: #ffe08a; font-weight: 700; }
#sel-info .cantbeat b { color: #fff; }
#btn-pass.btn-cant {
  background: linear-gradient(180deg, #e8b23a, #b87c12);
  border-color: #8a5c00; color: #2a1e00; font-weight: 800;
  box-shadow: 0 0 0 2px rgba(245, 197, 66, .38), 0 4px 14px rgba(0, 0, 0, .38);
  animation: cantPulse 1.5s ease-in-out infinite;
}
#btn-pass.btn-cant:disabled { animation: none; }
#btn-pass.btn-cant:not(:disabled):hover { filter: brightness(1.08); }
@keyframes cantPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
#hand { position: relative; width: 100%; }
#hand .card { position: absolute; bottom: 4px; }
#hand .card:hover { transform: translateY(-8px); }
/* 选中：抬升略降（22→16px，减少误点），层级最高（永远压过其它牌，包括刚拖过来的） */
#hand .card.sel {
  transform: translateY(-16px);
  box-shadow: 0 0 14px rgba(245, 197, 66, .8), 0 4px 8px rgba(0, 0, 0, .4);
  z-index: 400 !important;
}
/* 关键：补上"抬起前那块位置"的命中区 —— 点在原处也算点它，不会误点到下面那张牌 */
#hand .card.sel::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 100%; height: 22px;
}
/* 自定义整理：刚移动过的牌保持在上层并高亮（不会被右边的牌挡住） */
#hand.custom .card.just-moved {
  z-index: 320 !important;
  box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(245, 197, 66, .75), 0 6px 14px rgba(0, 0, 0, .45);
}

/* 智能理牌：组标签 */
.hand-group-label {
  position: absolute; top: 0;
  font-size: 11px; font-weight: 700; line-height: 1.5;
  color: #ffe9a8; background: rgba(0, 0, 0, .5);
  border: 1px solid rgba(245, 197, 66, .35);
  border-radius: 8px; padding: 0 7px; white-space: nowrap;
  pointer-events: none;
}
#hand.smart .card { bottom: 2px; }
/* 展开牌面：选中时轻微上移 + 金色描边，避免与上一行重叠 */
#hand.spread .card.sel {
  transform: translateY(-8px);
  box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(245, 197, 66, .9), 0 4px 8px rgba(0,0,0,.45);
}
#hand.spread .card:hover { transform: translateY(-4px); }

/* 顶部提示条 */
#toast {
  position: fixed; left: 50%; top: 16%;
  transform: translateX(-50%) translateY(-8px);
  max-width: 88vw; text-align: center;
  background: rgba(0, 0, 0, .85); color: #ffe9a8;
  border: 1px solid rgba(245, 197, 66, .5); border-radius: 12px;
  padding: 9px 16px; font-size: 13px; line-height: 1.6;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
  z-index: 46;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast .t-dim { color: #9fc3ae; font-size: 12px; }
#actions { display: flex; gap: 10px; }

/* ---------------- 按钮 ---------------- */
.btn {
  border: none; border-radius: 8px; padding: 8px 22px; font-size: 15px; font-weight: 700;
  cursor: pointer; color: #eee; background: #37514294; border: 1px solid rgba(255,255,255,.18);
  transition: filter .15s, transform .1s;
  touch-action: manipulation;
}
.btn:hover:not(:disabled) { filter: brightness(1.2); }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn-primary { background: linear-gradient(180deg, #2f9e63, #1d7244); border: 1px solid #165533; }
.btn-danger { background: linear-gradient(180deg, #a5554a, #7c3a32); border: 1px solid #5e2a24; }
.btn-ghost { background: rgba(255,255,255,.08); }

/* ---------------- 日志 ---------------- */
#log-panel {
  position: absolute; left: 12px; top: 12px; width: 252px; max-height: 30vh;
  overflow-y: auto; z-index: 4; font-size: 12px; line-height: 1.5;
  background: rgba(0, 0, 0, .42); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px; padding: 8px 10px;
  scrollbar-width: thin;
}
.log-item { color: #c8d8cd; margin-bottom: 2px; word-break: break-all; }
.log-item.sys { color: #8fd0a8; }
.log-item.round { color: var(--gold); font-weight: 700; border-top: 1px dashed rgba(255,255,255,.2); padding-top: 4px; margin-top: 4px; }
.log-item.trib { color: #ffb0d8; }
.log-item.rank { color: var(--gold); font-weight: 700; }
.log-item.pass { color: #7d9084; }
.log-item.play { color: #e8f2ea; }
.log-item.p0 { color: #aee2ff; }

.rules-float { position: absolute; left: 12px; bottom: 168px; z-index: 4; }
/* 窄屏/矮屏隐藏悬浮规则按钮（顶栏已有「规则」入口），避免压住手牌 */
@media (max-width: 1200px), (max-height: 780px) { .rules-float { display: none; } }

/* =========================================================
 * 出牌特效（炸弹 / 天王炸 / 同花顺）
 * ========================================================= */
#fx-layer {
  position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden;
}
.fx-particle {
  position: absolute; border-radius: 50%;
  animation-name: fx-fly; animation-timing-function: cubic-bezier(.15,.75,.4,1);
  animation-fill-mode: forwards;
}
.fx-glyph {
  position: absolute; font-weight: 900;
  animation-name: fx-fly-rot; animation-timing-function: cubic-bezier(.15,.75,.4,1);
  animation-fill-mode: forwards;
}
@keyframes fx-fly {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  70% { opacity: .9; }
  to { transform: translate(var(--dx), var(--dy)) scale(.25); opacity: 0; }
}
@keyframes fx-fly-rot {
  from { transform: translate(0, 0) rotate(0); opacity: 1; }
  to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}
.fx-ring {
  position: absolute; border-radius: 50%; border: 3px solid #fff;
  animation: fx-ring .6s ease-out forwards;
}
@keyframes fx-ring {
  from { transform: scale(.25); opacity: .95; }
  to { transform: scale(3.1); opacity: 0; }
}
.fx-flash {
  position: absolute; inset: 0;
  animation: fx-flash .4s ease-out forwards;
}
@keyframes fx-flash {
  from { opacity: 0; }
  25% { opacity: 1; }
  to { opacity: 0; }
}
.fx-label {
  position: absolute; left: 50%; top: 34%;
  transform: translateX(-50%);
  font-size: min(72px, 9vw); font-weight: 900; letter-spacing: 6px;
  animation: fx-label .95s cubic-bezier(.2,1.4,.4,1) forwards;
  z-index: 41;
}
@keyframes fx-label {
  from { transform: translateX(-50%) scale(.3); opacity: 0; }
  22% { transform: translateX(-50%) scale(1.18); opacity: 1; }
  40% { transform: translateX(-50%) scale(1); opacity: 1; }
  75% { transform: translateX(-50%) scale(1.04); opacity: 1; }
  to { transform: translateX(-50%) scale(1.1) translateY(-16px); opacity: 0; }
}
/* 出牌的牌面发光 */
.card.glow-bomb { animation: glowBomb .7s ease-out; }
@keyframes glowBomb {
  0% { box-shadow: 0 0 0 rgba(255,138,60,0); }
  30% { box-shadow: 0 0 26px 8px rgba(255,138,60,.95); }
  100% { box-shadow: 0 0 0 rgba(255,138,60,0); }
}
.card.glow-joker { animation: glowJoker .9s ease-out; }
@keyframes glowJoker {
  0% { box-shadow: 0 0 0 rgba(255,214,90,0); }
  30% { box-shadow: 0 0 34px 12px rgba(255,214,90,1); }
  100% { box-shadow: 0 0 0 rgba(255,214,90,0); }
}
.card.glow-flush { animation: glowFlush .9s ease-out; }
@keyframes glowFlush {
  0% { box-shadow: 0 0 0 rgba(77,217,255,0); }
  30% { box-shadow: 0 0 30px 10px rgba(77,217,255,.95); }
  100% { box-shadow: 0 0 0 rgba(77,217,255,0); }
}
/* 震屏 */
#app.shake-med { animation: shakeMed .45s linear; }
@keyframes shakeMed {
  0%,100% { transform: none; }
  15% { transform: translate(-7px, 4px); }
  30% { transform: translate(6px, -5px); }
  45% { transform: translate(-5px, -3px); }
  60% { transform: translate(5px, 4px); }
  75% { transform: translate(-3px, 2px); }
  90% { transform: translate(2px, -1px); }
}
#app.shake-strong { animation: shakeStrong .65s linear; }
@keyframes shakeStrong {
  0%,100% { transform: none; }
  10% { transform: translate(-11px, 6px) rotate(-.6deg); }
  25% { transform: translate(10px, -8px) rotate(.6deg); }
  40% { transform: translate(-9px, -6px) rotate(-.5deg); }
  55% { transform: translate(8px, 7px) rotate(.5deg); }
  70% { transform: translate(-6px, 3px) rotate(-.3deg); }
  85% { transform: translate(4px, -3px) rotate(.2deg); }
}
#app.shake-soft { animation: shakeSoft .3s ease-out; }
@keyframes shakeSoft {
  0%,100% { transform: none; }
  33% { transform: translate(-3px, 1px); }
  66% { transform: translate(3px, -1px); }
}

/* ---------------- 弹窗 ---------------- */
.modal-mask {
  position: fixed; inset: 0; background: rgba(6, 14, 10, .66);
  backdrop-filter: blur(3px); z-index: 50;
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn .18s;
}
@keyframes fadeIn { from { opacity: 0; } }
.modal-box {
  width: min(440px, 92vw); max-height: 88vh; overflow-y: auto;
  background: linear-gradient(180deg, #20362a, #16281e);
  border: 1px solid rgba(245, 197, 66, .35); border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .6); padding: 20px 22px;
}
.modal-box.wide { width: min(680px, 94vw); }
.modal-title { font-size: 19px; font-weight: 800; color: var(--gold); margin-bottom: 12px; text-align: center; }
.modal-body { font-size: 14px; line-height: 1.7; }
.modal-btns { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.modal-tip { margin-bottom: 12px; }
.pick-row { display: flex; flex-wrap: wrap; gap: 8px; max-height: 300px; overflow-y: auto; padding: 6px; background: rgba(0,0,0,.25); border-radius: 10px; }
.pick-row .card { width: calc(var(--card-w) * 0.72); height: calc(var(--card-h) * 0.72); font-size: calc(var(--card-w) * 0.135); }
.pick-row .card.sel { outline: 3px solid var(--gold); transform: translateY(-6px); }

.start-hero { text-align: center; padding: 6px 0 2px; }
.start-hero .logo {
  font-size: 64px; font-weight: 900; color: var(--gold);
  text-shadow: 0 4px 14px rgba(245, 197, 66, .35); letter-spacing: 8px; margin-bottom: 8px;
}
.start-hero p { color: #cfe3d6; margin: 4px 0; }
.start-hero .tip { font-size: 13px; color: #9fc3ae; }
.start-hero .ver { font-size: 11px; color: #6f8f7c; margin-top: 10px; }
/* 启动弹窗里的"继续上局"提示 */
.start-hero .resume-tip {
  font-size: 12px; color: #ffe6a8; line-height: 1.6;
  background: rgba(245, 197, 66, .12); border: 1px solid rgba(245, 197, 66, .38);
  border-radius: 8px; padding: 6px 10px; margin: 9px auto 0; max-width: 94%;
}
.dl-link { color: var(--gold); text-decoration: none; border-bottom: 1px dashed rgba(245,197,66,.6); }
.dl-link:hover { color: #fff; border-bottom-color: #fff; }
.net-foot { text-align: center; font-size: 12px; color: #8fae9b; margin-top: 12px; }
/* 大厅里的客户端区块：手机直接玩 / 下载安卓端 */
.net-clients {
  display: grid; grid-template-columns: 1fr; gap: 10px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12);
}
.nc-item {
  position: relative; padding: 10px 12px 10px 12px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
}
.nc-title { font-size: 13px; font-weight: 700; color: var(--gold); margin-bottom: 4px; }
.nc-desc { font-size: 12px; line-height: 1.6; color: #cfe3d6; }
.nc-meta { color: #9fc3ae; font-size: 11px; }
.nc-dl {
  display: inline-block; margin-top: 8px; text-decoration: none;
  background: linear-gradient(180deg, #2f9e63, #1d7244); border: 1px solid #165533; color: #fff;
}
.nc-dl:hover { filter: brightness(1.15); }
@media (min-width: 700px) {
  .net-clients { grid-template-columns: 1fr 1fr; }
}

.result-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.result-table th, .result-table td { padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,.12); text-align: center; }
.result-table th { color: var(--gold); }
.result-table .me { color: #aee2ff; font-weight: 700; }
.result-table .opp { color: #ffc09e; font-weight: 700; }
.promo-line { text-align: center; font-size: 15px; }

.match-end { text-align: center; padding: 10px 0; }
.match-end .big { font-size: 42px; font-weight: 900; margin-bottom: 8px; }
.match-end.win .big { color: var(--gold); }
.match-end.lose .big { color: #ff8f6b; }
.match-end .sub { color: #cfe3d6; }
.match-end .score { margin-top: 10px; font-size: 13px; color: #9fc3ae; }

/* ---------------- 规则文档 ---------------- */
.rules-doc h4 { color: var(--gold); margin: 12px 0 4px; font-size: 15px; }
.rules-doc p { margin: 4px 0; color: #dcebe1; font-size: 13px; }
.rules-doc .src { color: #8fae9b; font-size: 12px; }
.rules-doc table { width: 100%; border-collapse: collapse; margin: 6px 0; }
.rules-doc td, .rules-doc th { border: 1px solid rgba(255,255,255,.14); padding: 4px 8px; font-size: 13px; }
.rules-doc td:first-child { color: var(--gold); white-space: nowrap; }

/* =========================================================
 * 联机：大厅 / 牌桌面板 / 连接状态
 * ========================================================= */
.net-badge {
  padding: 2px 10px; border-radius: 12px; font-size: 12px;
  background: #37514a; color: #cfe3d6; border: 1px solid rgba(255,255,255,.15);
}
.net-badge.online { background: #1d6b47; color: #d6ffe6; } 
.net-badge.reconnecting { background: #8a6a1d; color: #fff6d6; animation: blink 1s infinite; }
#net-root .modal-mask { z-index: 60; }
.net-box { width: min(560px, 94vw); }
.net-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.net-form label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #cfe3d6; }
.net-form input {
  flex: 1; min-width: 0; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px; padding: 7px 10px; color: #fff; font-size: 14px; font-family: inherit;
}
.net-form input:focus { outline: none; border-color: var(--gold); }
.net-hint { font-size: 12px; color: #8fae9b; line-height: 1.5; }
.net-sec { color: var(--gold); font-weight: 700; font-size: 14px; margin: 6px 0; }
.net-tables { max-height: 42vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.net-loading, .net-empty { color: #9fc3ae; font-size: 13px; padding: 10px; text-align: center; }
.net-table-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 10px;
}
.net-table-row.hot { border-color: var(--gold); box-shadow: 0 0 12px rgba(245,197,66,.35); }
.net-table-row .nt-name { font-weight: 700; font-size: 14px; }
.net-table-row .nt-info { font-size: 12px; color: #9fc3ae; margin-left: auto; }
.net-table-row .tag { background: var(--gold); color: #4a3200; font-size: 11px; border-radius: 8px; padding: 0 6px; }
.btn-sm { padding: 5px 14px; font-size: 13px; }
.net-panel { margin: 4px 0 10px; }
.net-seats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.net-seat {
  padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; gap: 2px;
}
.net-seat.me { border-color: var(--gold); background: rgba(245,197,66,.12); }
.net-seat.empty { opacity: .55; border-style: dashed; }
.net-seat b { font-size: 14px; }
.net-seat span { font-size: 12px; color: #9fc3ae; }
.net-state { font-size: 13px; color: #cfe3d6; }
.modal-tip.t-dim { color: #9fc3ae; font-size: 12px; margin-top: 8px; text-align: center; }
#sel-info .t-dim { color: #9fc3ae; }

/* =========================================================
 * 响应式：平板 / 手机
 * ========================================================= */
@media (max-width: 1180px) {
  #log-panel { display: none; }
  #center { width: 56vw; }
}
@media (max-width: 980px) {
  :root { --card-w: 66px; --card-h: 92px; }
  .seat { width: 160px; padding: 7px; }
  /* 出牌叠放间距统一按"出牌牌宽"计算（勿写死像素，否则小屏会把牌盖住） */
  .played-cards .card { margin-left: var(--trick-ov, calc(var(--trick-w, calc(var(--card-w) * 0.72)) * -0.22)); }
  .brand { font-size: 20px; }
}
@media (max-width: 640px) {
  :root { --card-w: 52px; --card-h: 73px; }
  #topbar { height: 46px; gap: 8px; padding: 0 10px; }
  .brand { font-size: 16px; letter-spacing: 0; }
  .brand-emblem { height: 22px; margin-right: 5px; }
  .start-logo { width: min(190px, 64vw); padding: 7px 10px; }
  .brand .brand-sub { display: none; }   /* 手机上仅显示品牌名「泉江」，避免顶栏拥挤 */
  #round-info { gap: 6px; font-size: 11px; }
  #round-info b.lv { font-size: 13px; }
  #round-info .ri-wild { display: none; }
  #round-info .ri-team { padding: 1px 7px; font-size: 11px; }
  .top-actions .btn { padding: 5px 10px; font-size: 12px; }
  .btn-icon { padding: 4px 8px; font-size: 14px; }
  .btn { padding: 9px 14px; font-size: 14px; min-height: 42px; }

  .seat { width: 128px; padding: 5px; border-radius: 10px; gap: 3px; }
  .seat-head { gap: 6px; }
  .avatar { width: 34px; height: 34px; font-size: 14px; }
  .s-name { font-size: 12px; }
  .s-level, .s-count { font-size: 10px; }
  .s-status { min-height: 15px; font-size: 10px; }
  .rank-badge { padding: 0 6px; font-size: 10px; }
  .seat-north { min-width: 148px; top: 6px; }
  .seat-north .avatar { width: 30px; height: 30px; font-size: 13px; }
  /* 两侧座位与中央出牌位在垂直方向错开，避免“不出”标签压在座位框上 */
  .seat-east { right: 8px; top: 24%; }
  .seat-west { left: 8px; top: 74%; }
  .backs { display: none; }

  #center { width: 88vw; height: 30%; top: 46%; }
  #req-label { font-size: 11px; padding: 3px 10px; white-space: normal; text-align: center; max-width: 86vw; }
  .play-label { font-size: 10px; padding: 1px 7px; }
  .pass-tag { font-size: 14px; padding: 3px 12px 3px 15px; letter-spacing: 2px; }
  .played-cards .card { margin-left: var(--trick-ov, calc(var(--trick-w, calc(var(--card-w) * 0.72)) * -0.22)); }

  #my-zone { width: 100vw; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  #sel-info { font-size: 11px; min-height: 17px; }
  .hand-group-label { font-size: 9px; padding: 0 5px; border-radius: 6px; }
  #toast { font-size: 12px; top: 12%; padding: 7px 12px; max-width: 92vw; }
  #actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; width: 100%; padding: 0 6px; }
  #actions .btn { padding: 9px 0; font-size: 12px; min-width: 0; }
  .rules-float { display: none; }
  .fx-label { font-size: 15vw; }
  .modal-box { padding: 14px 14px; }
  .modal-title { font-size: 16px; }
  .start-hero .logo { font-size: 44px; }
  #table::before { inset: 6px; }
}
@media (max-width: 640px) and (orientation: landscape) {
  :root { --card-w: 54px; --card-h: 76px; }
  #topbar { height: 38px; }
  #round-info .ri-round { display: none; }
  #my-zone { width: 82vw; }
  #hand { max-width: 78vw; margin: 0 auto; }
}
/* 矮屏（≤680px 高：笔记本/手机横屏）或窄屏（≤620px 宽：手机竖屏）：座位压成横条，避免与牌面/文字重叠 */
@media (max-height: 680px), (max-width: 620px) {
  .rules-float, #log-panel { display: none; }
  .seat { flex-direction: row; width: auto; min-width: 0; padding: 3px 8px; gap: 6px; align-items: center; }
  .seat .s-level, .seat .s-status { display: none; }
  .seat-head { width: auto; gap: 6px; }
  .avatar { width: 26px; height: 26px; font-size: 12px; }
  .s-name { font-size: 11px; }
  .s-count { font-size: 10px; }
  .seat-north { top: 4px; min-width: 0; }
  .seat-north .avatar { width: 24px; height: 24px; font-size: 11px; }
  .seat-east { right: 4px; top: 46%; }
  .seat-west { left: 4px; top: 46%; }
  .backs { display: none; }
  #sel-info { display: none; }
  #my-zone { padding-bottom: 2px; }
  #actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 0 6px; }
  #actions .btn { padding: 7px 0; font-size: 12px; min-height: 34px; }
}
@media (max-height: 480px) {
  :root { --card-w: 46px; --card-h: 64px; }
  .backs { display: none; }
}

/* ---------------- 手机横屏：压缩顶栏与牌面，腾出牌桌空间 ---------------- */
@media (orientation: landscape) and (max-height: 560px) {
  :root { --card-w: 52px; --card-h: 72px; }
  /* 矮屏把上下出牌槽贴得更近边缘、标签更小，给牌面留高度（与 ui.js 的 fitTrick 对应） */
  .ts-2 { top: 16px; }
  .ts-0 { bottom: 2px; }
  .trick-slot .play-label { font-size: 9px; padding: 0 6px; line-height: 1.35; }
  .pass-tag, .trick-slot .pass-tag { font-size: 13px; padding: 2px 10px 2px 13px; letter-spacing: 1.5px; border-width: 1px; }
  #topbar { height: 40px; padding: 0 10px; gap: 10px; }
  .brand { font-size: 16px; letter-spacing: 0; }
  .brand-emblem { height: 21px; margin-right: 5px; }
  .brand .brand-sub { display: none; }
  .top-actions { gap: 6px; }
  .top-actions .btn { padding: 5px 9px; font-size: 12px; min-height: 0; }
  #round-info { font-size: 12px; gap: 6px; }
  #my-zone { padding: 0 0 2px; }
  #actions .btn { min-height: 30px; padding: 6px 0; font-size: 12px; }
  .hand-group-label { font-size: 9px; padding: 0 4px; }
  #toast { font-size: 12px; padding: 6px 10px; }
  .start-hero .logo { font-size: 38px; }
  .start-logo { width: min(170px, 40vw); }
}
@media (orientation: landscape) and (max-height: 420px) {
  :root { --card-w: 44px; --card-h: 60px; }
  #topbar { height: 34px; }
  #round-info .ri-round { display: none; }
}
/* 极矮横屏（小屏手机横屏，可视高度 < 340px）：再压一档，保证牌桌放得下 */
@media (orientation: landscape) and (max-height: 340px) {
  :root { --card-w: 38px; --card-h: 52px; }
  #topbar { height: 30px; padding: 0 8px; gap: 8px; }
  .brand { font-size: 14px; }
  .brand-emblem { height: 18px; margin-right: 4px; }
  .top-actions .btn { padding: 3px 7px; font-size: 11px; }
  #round-info { font-size: 11px; gap: 5px; }
  .seat { padding: 2px 6px; gap: 4px; }
  .avatar { width: 20px; height: 20px; font-size: 10px; }
  .s-name { font-size: 10px; }
  .s-count { font-size: 9px; }
  .seat-north { top: 2px; }
  .hand-group-label { display: none; }   /* 空间极紧时隐藏牌型标签，避免与文字互压 */
  #actions { gap: 3px; }
  #actions .btn { min-height: 24px; padding: 3px 0; font-size: 11px; }
  #toast { font-size: 11px; padding: 4px 8px; }
  .play-label { font-size: 9px; padding: 0 4px; }
}

/* 极窄屏（≤420px，如 iPhone SE 竖屏）：顶栏收紧，避免按钮换行 */
@media (max-width: 420px) {
  #topbar { gap: 7px; padding: 0 8px; }
  .brand { font-size: 14px; }
  .brand-emblem { height: 19px; margin-right: 4px; }
  #round-info { font-size: 11px; gap: 4px; }
  #round-info .ri-round { display: none; }
  .top-actions { gap: 5px; }
  .top-actions .btn { padding: 5px 7px; font-size: 12px; white-space: nowrap; }
  .start-logo { width: min(176px, 50vw); padding: 7px 10px; }
  .start-hero .logo { font-size: 38px; }
  .start-hero p { font-size: 12px; }
  .start-hero .tip { font-size: 11px; }
  .qr-code { width: 104px; height: 104px; }
}

/* ---------------- 首页/牌桌二维码 ---------------- */
.qr-panel {
  display: flex; align-items: center; gap: 12px; text-align: left;
  margin: 9px auto 2px; padding: 9px 11px; max-width: 348px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
}
.qr-code {
  flex: 0 0 auto; width: 132px; height: 132px; padding: 5px;
  background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, .38);
}
.qr-code svg, .qr-code canvas { display: block; width: 100%; height: 100%; }
.qr-text { display: flex; flex-direction: column; gap: 4px; font-size: 12px; line-height: 1.5; color: #cfe3d6; }
.qr-text b { color: var(--gold); font-size: 13px; }
.qr-url { color: #9fc3ae; font-size: 11px; word-break: break-all; }
.qr-invite { max-width: 100%; margin: 10px 0 0; }
.qr-invite .qr-code { width: 104px; height: 104px; }
@media (max-width: 480px) {
  /* 窄屏：二维码与说明横排，避免弹窗过高 */
  .qr-panel { flex-direction: row; text-align: left; gap: 9px; padding: 8px 10px; }
  .qr-code { width: 116px; height: 116px; }
  .qr-invite .qr-code { width: 92px; height: 92px; }
}
/* 手机横屏：启动弹窗改双栏（左侧品牌文案 / 右侧二维码），一屏放得下 */
@media (orientation: landscape) and (max-height: 560px) {
  .start-hero { display: grid; grid-template-columns: 1fr 200px; gap: 4px 16px; align-items: center; text-align: left; }
  .start-hero .start-logo { grid-column: 1; width: min(140px, 26vw); margin: 0 0 4px; }
  .start-hero .logo { grid-column: 1; font-size: 28px; margin: 0 0 3px; }
  .start-hero p { grid-column: 1; margin: 1px 0; font-size: 11px; line-height: 1.45; }
  .start-hero .resume-tip { grid-column: 1; margin: 4px 0; }
  .start-hero .ver { grid-column: 1; margin-top: 4px; }
  .start-hero .qr-panel { grid-column: 2; grid-row: 1 / span 6; flex-direction: column; margin: 0; max-width: 200px; text-align: center; }
  .start-hero .qr-code { width: 122px; height: 122px; }
}

/* ---------------- 手机竖屏提示"转横屏" ---------------- */
/* 手机浏览器：页面留 1px 可滚动量，配合 scrollTo(0,1) 收起地址栏（视觉无影响）
   注意必须排除虚拟横屏（.rot）—— 那里 #app 高度由 --rot-h 决定，min-height 会把它顶爆 */
html.barhide:not(.rot) #app { min-height: calc(100vh + 1px); min-height: calc(100dvh + 1px); }
html.barhide body { overscroll-behavior: none; }

/* 刘海屏/灵动岛安全区：横屏时左右两侧会被遮挡，给顶栏与手牌区留出安全边距 */
#topbar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
#my-zone { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
#table { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
/* 虚拟横屏（界面旋转 90°）时，安全区要按旋转后的方向补偿 */
html.rot #my-zone { padding-left: 0; padding-right: 0; padding-bottom: max(2px, env(safe-area-inset-left)); }

/* ---------------- iPhone「添加到主屏幕」安装引导 ---------------- */
#ios-install {
  position: fixed; inset: 0; z-index: 320;
  background: rgba(4, 12, 8, .74);
  display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
#ios-install .ios-card {
  width: min(370px, 92vw); max-height: 88vh; overflow-y: auto;
  background: linear-gradient(180deg, #17402c, #0f2c1e);
  border: 1px solid rgba(245, 197, 66, .5); border-radius: 16px;
  padding: 16px 16px 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
  color: #e9f5ee;
}
#ios-install .ios-title { font-size: 17px; font-weight: 800; color: #ffe08a; text-align: center; }
#ios-install .ios-sub { font-size: 13px; line-height: 1.75; margin: 8px 0 10px; color: #cfe3d6; }
#ios-install .ios-wx {
  font-size: 13px; line-height: 1.7; margin: 8px 0 10px; padding: 8px 10px;
  background: rgba(245, 197, 66, .12); border: 1px solid rgba(245, 197, 66, .38); border-radius: 10px;
}
#ios-install .ios-steps { margin: 6px 0 10px; padding-left: 20px; }
#ios-install .ios-steps li { font-size: 13.5px; line-height: 1.85; margin-bottom: 6px; }
#ios-install .ios-tip { font-size: 11.5px; color: #9fb8a9; line-height: 1.7; margin-bottom: 10px; }
#ios-install .ios-btns { display: flex; gap: 8px; }
#ios-install .ios-btns .btn { flex: 1 1 0; padding: 9px 0; font-size: 14px; }
/* 分享按钮（方框 + 上箭头）用小样式画出来，用户一眼能对上 Safari 的图标 */
#ios-install .ios-share {
  display: inline-block; position: relative; width: 15px; height: 19px; margin: 0 2px;
  border: 1.6px solid #7fc3ff; border-top: none; border-radius: 2px; vertical-align: -3px;
}
#ios-install .ios-share::before {
  content: ""; position: absolute; left: 50%; top: -1px; width: 1.6px; height: 12px;
  background: #7fc3ff; transform: translateX(-50%);
}
#ios-install .ios-share::after {
  content: ""; position: absolute; left: 50%; top: 0; width: 8px; height: 8px;
  border-left: 1.6px solid #7fc3ff; border-top: 1.6px solid #7fc3ff;
  transform: translateX(-50%) rotate(45deg);
}
/* 虚拟横屏（界面旋转 90°）时，这张卡反向旋转，保证在竖着拿手机时是正的 */
html.rot #ios-install .ios-card {
  transform: rotate(-90deg);
  width: min(370px, calc(var(--rot-h, 100vw) * .92));
  max-height: calc(var(--rot-w, 100vh) * .9);
}

/* ---------------- 虚拟横屏（无方向锁定 API 时把界面整体旋转 90°） ---------------- */
html.rot { overflow: hidden; }
html.rot body {
  position: fixed;
  left: var(--rot-left, 50%);
  top: var(--rot-top, 50%);
  margin: 0;
  width: var(--rot-w, 100vh);
  height: var(--rot-h, 100vw);
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: 50% 50%;
}
html.rot #app { height: var(--rot-h, 100vw); }          /* 覆盖 100vh，避免超出旋转后的容器 */
html.rot { --card-w: 52px; --card-h: 72px; }            /* 与横屏矮屏档一致，牌面尺寸合适 */
html.rot #log-panel { display: none; }
/* 虚拟横屏时提示浮字整体停用（提示改由手牌下方状态行显示，彻底避免与顶栏/座位互压） */
html.rot #toast { display: none !important; }
/* 虚拟横屏下弹窗/面板必须按"可见高度(--rot-h)"限高：
   否则 88vh 会按竖屏 844 算成 743px，面板大半跑到屏幕外 → 按钮点不到 */
html.rot .modal-box { max-height: calc(var(--rot-h, 100vw) * 0.92); width: min(560px, calc(var(--rot-h, 100vw) * 1.15)); }
html.rot .modal-body { max-height: calc(var(--rot-h, 100vw) * 0.62); overflow-y: auto; -webkit-overflow-scrolling: touch; }
html.rot .net-tables { max-height: calc(var(--rot-h, 100vw) * 0.34); }
html.rot #log-panel { max-height: calc(var(--rot-h, 100vw) * 0.45); }
html.rot .modal-btns { position: sticky; bottom: 0; }
/* 虚拟横屏下媒体查询看到的仍是竖屏，这里镜像"手机横屏档"的关键尺寸，
   否则顶栏/操作区/手牌区会按竖屏档变化，与旋转后的横屏盒子不一致 */
html.rot .seat {
  flex-direction: row; width: auto; min-width: 0;
  padding: 3px 8px; gap: 6px; align-items: center; border-radius: 10px;
}
html.rot .seat .s-name { font-size: 13px; }
html.rot .seat .s-level, html.rot .seat .s-count, html.rot .seat .s-status { font-size: 11px; }
html.rot #topbar { height: 40px; padding: 0 10px; gap: 10px; }
html.rot .brand { font-size: 16px; letter-spacing: 0; }
html.rot .brand-emblem { height: 21px; margin-right: 5px; }
html.rot .brand .brand-sub { display: none; }
html.rot .top-actions { gap: 6px; }
html.rot .top-actions .btn { padding: 5px 9px; font-size: 12px; min-height: 0; }
html.rot #round-info { font-size: 12px; gap: 6px; }
html.rot #my-zone {
  padding: 0 0 2px;
  /* 关键：横屏后容器是 844×390，但 vw 仍按竖屏(390)算 → 手牌被挤在中间一小条。
     这里改为占满整行宽度，手牌才能摊开、不再重叠。 */
  left: 0; right: 0; transform: none;
  width: auto; max-width: none;
}
html.rot #hand {
  max-width: none; width: auto;
  /* 上限收到 700px（占满左右太宽）；具体宽度由 JS 按实际牌数写入，牌少时占位更窄 */
  max-width: min(100%, 620px);
  margin: 0 auto;
}
/* 操作按钮不要跟着拉得过宽（保持拇指可达的宽度，居中） */
html.rot #actions { max-width: min(620px, 100%); margin: 0 auto; }
html.rot #sel-info { font-size: 11px; min-height: 17px; }
html.rot #actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; width: 100%; padding: 0 6px; }
html.rot #actions .btn { padding: 6px 0; font-size: 12px; min-width: 0; }
html.rot .hand-group-label { font-size: 9px; padding: 0 5px; border-radius: 6px; }
html.rot .play-label { font-size: 10px; padding: 1px 7px; }
html.rot #req-label { font-size: 11px; padding: 3px 10px; white-space: normal; text-align: center; max-width: 86vw; }
/* 虚拟横屏时顶栏出现「竖屏」按钮（用 !important 覆盖元素上的内联 display:none） */
html.rot #btn-use-portrait { display: inline-flex !important; }
html.rot #btn-fullscreen { display: inline-flex !important; }


/* 旧的"横屏引导"弹窗（保留样式，当前不再弹出：已改为自动横屏 + 行内提示） */
#rotate-hint {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center;
  background: rgba(4, 16, 10, .84);
}
#rotate-hint.show { display: flex; }
.rh-box { text-align: center; padding: 18px; max-width: 88vw; }
.rh-phone {
  width: 52px; height: 90px; margin: 0 auto 14px;
  border: 3px solid var(--gold); border-radius: 10px; position: relative;
  animation: rotPhone 2.6s ease-in-out infinite;
}
.rh-screen { position: absolute; inset: 6px 5px 12px; border-radius: 3px; background: linear-gradient(160deg, #1d7244, #0b3a24); }
@keyframes rotPhone {
  0%, 22% { transform: rotate(0deg); }
  52%, 78% { transform: rotate(-90deg); }
  100% { transform: rotate(0deg); }
}
.rh-text { font-size: 17px; font-weight: 800; color: var(--gold); margin-bottom: 6px; }
.rh-sub { font-size: 12px; color: #cfe3d6; line-height: 1.6; margin-bottom: 14px; }
.rh-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* 矮屏（手机横屏）下的弹窗：更紧凑，尽量不用滚动 */
@media (max-height: 520px) {
  .modal-box { max-height: 94vh; padding: 12px 14px; }
  .modal-title { font-size: 16px; margin-bottom: 8px; }
  .start-hero .logo { font-size: 30px; }
  .start-logo { width: min(150px, 34vw); padding: 6px 9px; margin-bottom: 6px; }
  .start-hero p { font-size: 12px; margin: 2px 0; }
  .start-hero .ver { margin-top: 5px; }
  .qr-panel { margin-top: 8px; padding: 7px 9px; gap: 9px; }
  .qr-code { width: 96px; height: 96px; }
  .qr-text { font-size: 11px; gap: 2px; }
  .modal-btns { margin-top: 9px; gap: 8px; }
  .modal-btns .btn { padding: 7px 14px; font-size: 13px; }
}

/* 结算面板：醒目的"谁输谁赢"标题 + 升级说明 + 倒计时提示 */
.settle-head {
  text-align: center; font-size: 20px; font-weight: 800; letter-spacing: 1px;
  padding: 6px 0 10px; margin-bottom: 8px; border-radius: 10px;
}
.settle-head.win { color: #ffe08a; background: rgba(245, 197, 66, .12); border: 1px solid rgba(245, 197, 66, .45); }
.settle-head.lose { color: #ffb3a7; background: rgba(208, 106, 47, .14); border: 1px solid rgba(208, 106, 47, .5); }
.promo-line { font-size: 14px; line-height: 1.9; margin: 8px 0 4px; }
.modal-tip { font-size: 12px; margin-top: 6px; }
@media (max-height: 560px) {
  .settle-head { font-size: 16px; padding: 3px 0 6px; margin-bottom: 5px; }
  .promo-line { font-size: 12px; line-height: 1.7; }
}

/* ---------------- 升级提示弹窗 ---------------- */
.upd-mask {
  position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
  background: rgba(4, 12, 8, .72);
}
.upd-panel {
  background: linear-gradient(180deg, #22392c, #16281e);
  border: 2px solid rgba(245, 197, 66, .45); border-radius: 16px;
  padding: 18px 20px; max-width: min(520px, 92vw); color: #dff0e5;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
}
.upd-head { font-size: 18px; font-weight: 800; color: var(--gold); margin-bottom: 8px; }
.upd-line { font-size: 14px; color: #dff0e5; margin-bottom: 8px; }
.upd-notes {
  font-size: 13px; line-height: 1.7; color: #cfe3d6; background: rgba(0, 0, 0, .25);
  border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; max-height: 180px; overflow: auto;
}
.upd-tip { font-size: 12px; color: #9fc3ae; margin-bottom: 12px; }
.upd-btns { display: flex; gap: 10px; justify-content: flex-end; }
.upd-btns .btn { min-width: 120px; }
@media (max-height: 560px) {
  .upd-panel { max-width: min(640px, 94vw); padding: 12px 16px; }
  .upd-head { font-size: 16px; margin-bottom: 6px; }
  .upd-notes { max-height: 96px; }
  .upd-tip { display: none; }
}

/* ============ 竖屏专属排版（html.pt）——横屏完全不受影响 ============ */
html.pt #topbar {
  height: auto;
  min-height: 100px;                /* 竖屏：整体再往下移一些，避开状态栏/刘海/灵动岛 */
  padding: calc(22px + env(safe-area-inset-top, 0px)) 10px 8px;
  gap: 6px 8px;
  flex-wrap: wrap;                  /* 信息一行、按钮一行，整齐 */
  align-content: center;
}
html.pt #topbar #round-info {
  order: 2;                         /* 信息放第二行 */
  flex: 1 1 100%;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
}
html.pt #topbar .brand { order: 1; font-size: 18px; }
html.pt #topbar .btn {
  order: 3;
  padding: 7px 10px;
  font-size: 13px;
  white-space: nowrap;
}
html.pt #topbar .btn-icon { padding: 7px 9px; }
html.pt #table { padding-top: 4px; }

/* 竖屏顶栏的「横屏」按钮：只在竖屏显示（横屏完全不受影响） */
#btn-use-landscape { display: none; }
html.pt #btn-use-landscape { display: inline-flex; align-items: center; margin-left: 2px; }
/* 竖屏时把原本那个「竖屏」按钮藏掉，避免两个方向按钮同时出现 */
html.pt #btn-use-portrait { display: none !important; }