* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
               "Helvetica Neue", "Microsoft YaHei", sans-serif;
  background-color: #0b5423;
  background-image: radial-gradient(ellipse at center, #12803a 0%, #063d17 100%);
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  user-select: none;
  -webkit-user-select: none;
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

svg.suit-svg { display: block; }

:root {
  --sh: 1vh; --lg: 1vw;
  --suit-spade:   #1a1a1a;
  --suit-heart:   #d9251c;
  --suit-club:    #0f9d47;
  --suit-diamond: #e8801a;

  /* 视觉升级层 token */
  --gold: #ffc757;
  --gold-deep: #f5a623;
  --glass-bg: linear-gradient(180deg, rgba(255,255,255,.13), rgba(0,0,0,.20));
  --glass-line: rgba(255,255,255,.18);
  --shadow-1: 0 2px 8px rgba(0,0,0,.28);
  --shadow-2: 0 10px 26px rgba(0,0,0,.38);
  --shadow-3: 0 18px 46px rgba(0,0,0,.52);
  --press: inset 0 1px 0 rgba(255,255,255,.34);

  /* 清新主题 token（统一收口，避免两层重复字面量） */
  --fresh-1: #2cb85f;
  --fresh-2: #128a43;
  --fresh-3: #065026;
  --fresh-ink: #06381c;
  --cream: #fff6de;
  --bg-screen: radial-gradient(ellipse at 50% 36%, #138f4d 0%, #0a5e33 46%, #03381e 100%);
  --panel-fresh:
    linear-gradient(180deg, #1c8c46 0%, #0a5730 100%);
  --radius-pill: 999px;
}

#app { height: 100vh; height: 100dvh; position: relative; }

.screen { position: absolute; inset: 0; display: flex; flex-direction: column; }
.tip-compat {
  position: absolute; left: 0; right: 0; bottom: 6px;
  padding: 0 12px; font-size: 11px; line-height: 1.4;
  opacity: .5; text-align: center;
}
.hidden { display: none !important; }

/* ============ 大厅 ============ */
#lobby {
  align-items: center; justify-content: center; gap: 14px;
  background: linear-gradient(160deg, #0b6623, #043d14);
}
#lobby h1 {
  font-size: 52px; letter-spacing: 10px; margin-bottom: 24px;
  text-shadow: 0 4px 12px rgba(0,0,0,.5);
}
#lobby input {
  width: 260px; padding: 13px; border-radius: 10px; border: none;
  font-size: 16px; text-align: center; outline: none;
  background: rgba(255,255,255,.92); color: #222;
}
#lobby button {
  width: 260px; padding: 14px; border-radius: 10px; border: none;
  background: linear-gradient(180deg, #ffc757, #f5a623);
  color: #3a2000; font-size: 18px; font-weight: bold;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
}
#lobby button:active { transform: translateY(1px); }
.tip { font-size: 12px; opacity: .65; margin-top: 6px; }

/* ============ 房间 ============ */
#room { background: linear-gradient(160deg, #0e6b28, #063d17); }
.room-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; background: rgba(0,0,0,.25); font-size: 14px;
}
.room-header b { color: #f5a623; margin-left: 4px; }
.room-header button {
  background: rgba(255,255,255,.18); border: none; color: #fff;
  padding: 6px 14px; border-radius: 8px; font-size: 13px;
}
.seat-circle-wrap {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 40px 24px; min-height: 0;
}
.seat-circle {
  position: relative;
  width: min(calc(78 * var(--lg)), calc(40 * var(--sh)), 340px); height: min(calc(78 * var(--lg)), calc(40 * var(--sh)), 340px);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%,
    rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 55%, rgba(0,0,0,.18) 100%);
  border: 2px solid rgba(255,255,255,.20);
  box-shadow: 0 0 40px rgba(0,0,0,.5) inset, 0 0 60px rgba(0,0,0,.35);
}
.circle-center {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center; pointer-events: none;
}
.circle-center-label {
  font-size: 11px; opacity: .55; letter-spacing: 4px; margin-bottom: 4px;
}
.circle-center-value {
  font-size: 30px; font-weight: 800; color: #f5a623;
  text-shadow: none;
  letter-spacing: 3px; font-family: 'Georgia', serif;
}
.seat-slot {
  position: absolute;
  width: 88px; height: 88px; border-radius: 50%;
  background: rgba(0,0,0,.45);
  border: 2px dashed rgba(255,255,255,.32);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; padding: 8px 6px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s, background .15s;
  color: #fff; text-align: center; overflow: visible;
}
.seat-slot:active { transform: translate(-50%, -50%) scale(.95); }
.seat-slot[data-seat="0"] { left: 50%; top: 100%; transform: translate(-50%, -50%); }
.seat-slot[data-seat="1"] { left: 0;   top: 50%;  transform: translate(-50%, -50%); }
.seat-slot[data-seat="2"] { left: 50%; top: 0;    transform: translate(-50%, -50%); }
.seat-slot[data-seat="3"] { left: 100%; top: 50%; transform: translate(-50%, -50%); }
.seat-slot.mine {
  border-color: #f5a623; border-style: solid;
  background: rgba(245,166,35,.20);
  box-shadow: none;
}
.seat-slot.bot {
  border-color: rgba(100,200,255,.6); border-style: solid;
  background: rgba(100,200,255,.14);
}
.seat-slot.ready {
  border-color: #52ff8f;
  background: rgba(82,255,143,.16);
  box-shadow: none;
}
.seat-slot.bot.ready {
  border-color: rgba(100,200,255,.6);
  background: rgba(100,200,255,.14);
  box-shadow: none;
}
.slot-pos { font-size: 10px; opacity: .55; letter-spacing: 1px; }
.slot-name {
  font-size: 13px; font-weight: 700;
  max-width: 76px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; line-height: 1.15;
}
.slot-tag {
  font-size: 9px; padding: 1px 7px; border-radius: 8px;
  background: rgba(0,0,0,.4); opacity: .92;
  white-space: nowrap; line-height: 1.4; margin-top: 1px;
}
.seat-slot.ready .slot-tag {
  background: rgba(82,255,143,.35); color: #d6ffe6;
}
.seat-slot.bot .slot-tag {
  background: rgba(100,200,255,.35); color: #d0f0ff;
}
.slot-empty {
  font-size: 12px; opacity: .5; letter-spacing: 2px;
}
.slot-remove-btn {
  position: absolute; top: -3px; right: -3px;
  width: 22px; height: 22px; border-radius: 50%; border: none;
  background: rgba(255,90,90,.95); color: #fff;
  font-size: 12px; font-weight: 800; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.45); z-index: 5;
  transition: transform .08s;
}
.slot-remove-btn:active { transform: scale(.9); }
.team-dot {
  position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid #fff; box-sizing: border-box; z-index: 4;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.team-dot.team-red { background: #ff4d4d; }
.team-dot.team-blue { background: #4d8bff; }
.room-actions {
  display: flex; gap: 10px; padding: 8px 16px 6px;
}
.room-actions button {
  flex: 1; padding: 14px; border-radius: 12px; border: none;
  font-size: 16px; font-weight: bold;
  transition: transform .08s;
}
.room-actions button:active { transform: scale(.97); }
#addBotBtn {
  background: rgba(100,200,255,.22); color: #b9ecff;
  border: 1px solid rgba(100,200,255,.5);
}
#addBotBtn:disabled { opacity: .35; }
#readyBtn {
  background: linear-gradient(180deg, #ffc757, #f5a623); color: #3a2000;
}
#readyBtn.is-ready {
  background: rgba(82,255,143,.3); color: #eafff1;
  border: 1px solid rgba(82,255,143,.6);
}
.room-tip {
  font-size: 11px; opacity: .55; text-align: center;
  padding: 6px 16px 12px; line-height: 1.5;
}

/* ============ 游戏 ============ */
#game { padding: 6px; }
/* 顶栏改为右上角浮层（脱离文档流），不再占整行"长条"；
   房间号长条(#roomLabel)隐藏，对家头像因此可顶到屏幕最上边 */
.topbar {
  position: absolute; top: 4px; right: 8px; left: auto;
  display: flex; justify-content: flex-end; align-items: center; gap: 6px;
  font-size: 12px; padding: 0;
  background: none; border: none; border-radius: 0; box-shadow: none; z-index: 30;
}
#roomLabel { display: none; }
.topbar button {
  background: rgba(255,255,255,.16); border: none; color: #fff;
  padding: 5px 10px; border-radius: 6px; font-size: 12px;
}
/* 退出按钮与分享按钮视觉尺寸完全一致：padding/字号/字重/圆角/行高 全部对齐 .topbar .share-btn。
   圆角用与顶栏按钮统一的 --radius-pill（999px 药丸），否则会被全局 .topbar button 药丸规则盖过而显得是矩形 */
#leaveBtn {
  padding: 5px 10px; border: none; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700; line-height: normal; box-sizing: border-box;
}

.turn-countdown {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.28);
  padding: 2px 12px; border-radius: 12px;
  font-size: 12px; font-weight: 800; color: #fff;
  white-space: nowrap; pointer-events: none; z-index: 50;
  transition: none;   /* 出牌后即刻消失，不应有任何位移动画残留 */
}
.turn-countdown.mine { border-color: #f5a623; color: #ffd479; }
.turn-countdown.urgent { background: rgba(178,34,34,.85); color: #fff; }

.seat-role {
  font-size: 10px; color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.4); padding: 1px 9px; border-radius: 9px;
  letter-spacing: 1px; line-height: 1.5;
}
.table {
  flex: 1; position: relative; min-height: 0;
  padding-bottom: 8px;
}
.seat {
  position: absolute; display: flex; flex-direction: column;
  align-items: center; gap: 4px; z-index: 2;
}
.seat-top   { top: 2px; left: 50%; transform: translateX(-50%); }
.seat-left  { left: 4px; top: 50%; transform: translateY(-50%); }
.seat-right { right: 4px; top: 50%; transform: translateY(-50%); }

.seat-bottom-played {
  position: absolute; left: 66%; transform: translateX(-50%);
  bottom: calc(var(--card-h) + 4px); z-index: 40;
  display: flex; justify-content: center; align-items: flex-end;
  max-width: calc(var(--play-w) * 6.5); min-height: var(--play-h); pointer-events: none;
}
.seat-bottom-played .played { max-width: calc(var(--play-w) * 6.5); }

.seat-top .played,
.seat-left .played,
.seat-right .played {
  position: absolute; z-index: 6;
  max-width: 240px;
}
.seat-top .played   { top: 34px; left: auto; right: calc(100% + 6px); transform: translateY(-50%); }
.seat-left .played  { top: 50%; left: calc(100% + 8px); transform: translateY(-50%); }
.seat-right .played { top: 50%; right: calc(100% + 8px); transform: translateY(-50%); }

.avatar {
  position: relative;
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(0,0,0,.38);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; text-align: center; padding: 2px;
  border: 2px solid rgba(255,255,255,.25);
  transition: all .2s; overflow-wrap: anywhere; line-height: 1.1;
}
.avatar.active {
  border-color: #f5a623;
  box-shadow: none;
}
.avatar.clickable-bot {
  cursor: pointer; border-color: rgba(100,200,255,.55);
}
.avatar.clickable-bot:active { transform: scale(.94); }
.avatar.clickable-bot::after {
  content: '托管';
  position: absolute; top: -6px; right: -8px;
  font-size: 9px; color: #3a2000;
  background: linear-gradient(180deg, #ffc757, #f5a623);
  padding: 1px 6px; border-radius: 8px;
  white-space: nowrap; font-weight: 700;
  pointer-events: none; box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.avatar.hosting {
  border-color: #ff3b30;
  box-shadow: none;
}
.avatar.hosting::after {
  content: '托管';
  position: absolute; top: -6px; right: -8px;
  font-size: 9px; color: #fff;
  background: linear-gradient(180deg, #ff6b61, #e53935);
  padding: 1px 6px; border-radius: 8px;
  white-space: nowrap; font-weight: 700;
  pointer-events: none; box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
/* 对家(顶)与两个对手(左/右)头像放大到原来的 2 倍；我方(底)保持原尺寸 */
.seat-left .avatar,
.seat-top .avatar,
.seat-right .avatar {
  width: 108px; height: 108px;
  font-size: 22px;
}

/* .myinfo.hosting 红框已移除：用户名片条不再有背景框，托管时也不变红 */

/* ============================================================
 * 剩余手牌数 / 名次标签（美化版）
 *   · 1~10 张：显示"N 张"，金色胶囊，深色描边+轻投影
 *   · 0 张：换成头游/二游/三游/末游，四色渐变 + 轻微弹入动画
 * ============================================================ */
.count {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .5px;
  color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,.68), rgba(0,0,0,.5));
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--radius-pill);
  padding: 2px 12px;
  min-width: 44px;
  height: 22px;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18);
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  visibility: visible;
}

.count.count-rank {
  font-size: 13px;
  letter-spacing: 1.5px;
  padding: 2px 14px;
  min-width: 54px;
  animation: rankPop .35s ease-out;
}
.count.count-rank.rank-tou {
  background: linear-gradient(180deg, #ffe07a, #e8a400);
  color: #3a2400;
  border-color: #fff3c2;
  box-shadow: 0 2px 8px rgba(232,164,0,.55), inset 0 1px 0 rgba(255,255,255,.5);
}
.count.count-rank.rank-er {
  background: linear-gradient(180deg, #ffb36a, #e8730a);
  color: #3a1e00;
  border-color: #ffe0b8;
  box-shadow: 0 2px 8px rgba(232,115,10,.55), inset 0 1px 0 rgba(255,255,255,.5);
}
.count.count-rank.rank-san {
  background: linear-gradient(180deg, #a3ddff, #2f8fd8);
  color: #06243a;
  border-color: #d6efff;
  box-shadow: 0 2px 8px rgba(47,143,216,.55), inset 0 1px 0 rgba(255,255,255,.5);
}
.count.count-rank.rank-mo {
  background: linear-gradient(180deg, #bdbdbd, #5f5f5f);
  color: #fff;
  border-color: #e0e0e0;
  box-shadow: 0 2px 8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.4);
}
@keyframes rankPop {
  0%   { transform: scale(.55); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.played {
  display: flex; flex-wrap: nowrap; gap: 0; justify-content: center;
  max-width: 260px; min-height: var(--play-h); padding: 2px 0;
  align-items: center; overflow: visible;
  transition: opacity .45s ease;
}
.played.fade-out { opacity: 0; }

.played .card.tcard {
  position: relative;
  width: var(--play-w); height: var(--play-h);
  border-radius: calc(var(--play-w) * 0.11);
  margin: 0;
}
.played .card.tcard:not(:first-child) {
  margin-left: calc(var(--play-w) * -0.40);
}
.played .card.tcard .corner.top-left { top: 4%; left: 5%; }
.played .card.tcard .corner.bottom-right { display: none; }
.played .card.tcard .corner .rank { font-size: calc(var(--play-w) * 0.32); }
.played .card.tcard .corner .suit-small {
  width: calc(var(--play-w) * 0.224); height: calc(var(--play-w) * 0.224);
}
.played .card.tcard .center-suit {
  width: calc(var(--play-w) * 0.46); height: calc(var(--play-w) * 0.46);
  top: 62%;
}
.played .card.tcard.wild::after { width: 12px; height: 12px; font-size: 8px; }

.center {
  /* 等级徽标默认（JS 未定位时的兜底）置于桌面中下区；JS 会按"上家头像 ↔ 我方手牌区"实测几何重写 top。
     用纯百分比避免依赖 var(--card-h)，并避免任何坐标系下落到最顶。 */
  position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%);
  /* 中央等级区置于最底层：低于座位(2)与倒计时(50)，既不遮挡上方按钮，自身位于空白区也不被遮挡 */
  z-index: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  pointer-events: none;
}
/* 【20260930r】等待文案仅玩家姓名带队色（我方红/对方蓝，与 .avatar.team-* 同色），
   其余文字用 #centerMsg.turn-wait 既有灰色；span 自身规则天然胜过父级继承 */
.wait-name.team-red-name  { color: #ff4d4d; }
.wait-name.team-blue-name { color: #4d8bff; }
#centerMsg {
  font-size: 16px; color: #f5a623; text-shadow: 0 0 10px #000;
  text-align: center; white-space: pre-line;
}
.center-level {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 18px; border-radius: var(--radius-pill);
  background: rgba(0,0,0,.5); backdrop-filter: blur(2px);
  box-shadow: 0 0 16px rgba(0,0,0,.5);
}
.cl-side { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.cl-side i { font-style: normal; font-size: 20px; opacity: .85; letter-spacing: 1px; }
.cl-side b { font-size: 44px; font-weight: 800; line-height: 1.05; }
/* 阵营双色：当前所打（领先）方按阵营着色——己方=红、对方=蓝；另一方恒灰（由 .cl-red / .cl-blue / .cl-gray 动态切换）
   第一局：先出牌方彩色；第二局起：上一局头游方彩色。 */
.cl-red i { color: #ffd9d2; }
.cl-red b { color: #ff4d4d; text-shadow: 0 0 10px rgba(255,77,77,.45); }
.cl-blue i { color: #d2e2ff; }
.cl-blue b { color: #4d8bff; text-shadow: 0 0 10px rgba(77,139,255,.45); }
.cl-gray i { color: #9aa6b0; }
.cl-gray b { color: #aab3bd; text-shadow: none; }

.myarea { position: relative; padding-bottom: 8px; }
.hand-zone { position: relative; z-index: 255; }
.myinfo {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  /* 顶部留出空间给绝对定位的位次框，使名字行与位次框上下分层、不重叠 */
  font-size: 12px; padding: 30px 10px 2px; opacity: .95;
  /* 【修复·用户名被裁成细条】手机紧凑布局下 .myinfo 总高仅 ~33px，
     名字条（张数框底线 26px → 底边）只剩 ~7px，配合 overflow:hidden 会把文字上下裁掉。
     min-height 保证「张数框底线 → 手牌区顶线」之间至少有 18px 完整显示名字。 */
  min-height: calc(4px + 22px + 18px);
}
.myinfo #myName {
  /* 用户名水平锁定在屏幕正中（left:50% + translateX(-50%)）；
     【垂直居中】上到手牌张数框底线（top:4px + 高22px = 26px），下到手牌区最上边
     （.myinfo 底边），名字在这段间隙内垂直居中 */
  position: absolute; left: 50%; top: calc(4px + 22px); bottom: 0;
  transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
  max-width: 40%; white-space: nowrap;
  z-index: 260;   /* 高于手牌区(z-index:255)，条高紧张时向下微溢不被牌盖住 */
  font-weight: 700;                                /* 白字细笔画在深色桌面上看不清 */
  text-shadow: 0 1px 3px rgba(0,0,0,.9);           /* 描边阴影提升对比度 */
}
/* 位次矩形框：绝对定位于 .myarea 顶部居中，正好落在「我的出牌倒计时框」正下方
   （倒计时 for me 由 JS 放在桌面底部中央，tables 底=myarea 顶，故 top:4px 即紧贴其下） */
.myinfo #myCount {
  position: absolute; left: 50%; top: 4px; transform: translateX(-50%); z-index: 60;
  text-align: center; opacity: .85;
  /* 位次框直接在中间出现、不做弹入动画：rankPop 的 scale 会覆盖 translateX(-50%)，
     导致它先偏右再"从右向左"跳回中心；且托管/重连重渲染时会反复跳动 */
  animation: none;
}
.myinfo #myCount.count-rank {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: auto; min-width: 54px; height: 22px; line-height: 18px;
  padding: 2px 14px; border-radius: var(--radius-pill); opacity: 1;
}
.auto-toggle-btn {
  flex: 0 0 auto; margin-left: auto; padding: 6px 24px; height: 44px;
  border-radius: 22px; border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.15); color: #fff;
  font-size: 22px; font-weight: 700; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, transform .15s; font-family: inherit; line-height: 1;
}
.auto-toggle-btn:active { transform: scale(.95); }
.auto-toggle-btn.on {
  background: linear-gradient(180deg, #ffc757, #f5a623);
  color: #3a2000; border-color: #ffc757;
  box-shadow: none;
}
.auto-toggle-btn:disabled { opacity: .35; cursor: default; }

.sf-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 9px;
  flex: 0 0 auto; padding: 7px 12px;
  /* 整体外框：把四个花色小图标包在同一个圆角矩形里 */
  background: rgba(6,40,22,.42);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: var(--radius-pill);
}
.suit-chip {
  position: relative; display: inline-flex; align-items: center;
  justify-content: center; gap: 4.5px;
  padding: 9px 15px;
  border-radius: 18px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 25.5px;
  line-height: 1; color: #6f6f6f;
  font-weight: 600; transition: all .22s ease;
  min-width: 51px;
}
.suit-chip.red { color: #6f6f6f; }
.suit-chip.green { color: #6f6f6f; }
.suit-chip.orange { color: #6f6f6f; }
.suit-chip svg.suit-svg { width: .95em; height: .95em; }
.suit-chip.active {
  background: linear-gradient(180deg,
    rgba(255,199,87,.45) 0%, rgba(245,166,35,.30) 100%);
  border-color: #ffc757;
  box-shadow: none;
  color: #fff5d6; font-weight: 800;
}
.suit-chip.active.red { color: #ffc8c8; }
.suit-chip.active.green { color: #bff5d2; }
.suit-chip.active.orange { color: #ffe0c2; }
.suit-chip .cnt {
  display: inline-block; padding: 0 5px; margin-right: 1px;
  background: linear-gradient(180deg, #ffc757, #f5a623);
  color: #3a2000; border-radius: 8px;
  font-size: 10px; font-weight: 800; line-height: 14px;
  min-width: 14px; text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.suit-chip .val { font-weight: 800; margin-left: 1px; letter-spacing: -.3px; }

.sort-btn {
  padding: 8px 20px; border: none; border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #46c06e, #1f9d4d);
  color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 2px;
  cursor: pointer; margin-left: 6px; flex: 0 0 auto;
  box-shadow: 0 3px 0 rgba(16,90,45,.5), 0 4px 10px rgba(0,0,0,.3);
  transition: transform .08s; font-family: inherit;
}
.sort-btn:active { transform: scale(.95); }

.hand {
  display: flex; justify-content: center; align-items: flex-end;
  min-height: var(--card-h); position: relative;
  padding: 6px 4px 4px;
  overflow: visible;
  touch-action: none;
  scrollbar-width: none;
}
.hand::-webkit-scrollbar { display: none; }
.card-group {
  position: relative; flex-shrink: 0;
  width: var(--card-w); margin-right: calc(var(--card-w) * (var(--step-r, 0.31) - 1));
  transition: transform .15s ease;
}
.card-group:last-child { margin-right: 0; }
.card-group .card {
  position: absolute; left: 0; top: 0; margin: 0;
  transition: left .15s ease, box-shadow .15s ease, transform .15s ease;
}
.card-group .card.selected {
  transform: translateY(calc(var(--card-h) * -0.22));
}
.card-group.bomb {
  border-radius: 9px;
  box-shadow: none;
}

:root {
  --card-w: clamp(41px, calc(7.1 * var(--lg)), 96px);   /* 手牌放大 20%：5.9->7.1, 80->96, 下限 34->41 */
  --card-h: calc(var(--card-w) * 1.4);
  --step-r: 0.31;
  --stack-offset: calc(var(--card-h) * 0.26);
  --play-w: clamp(40px, calc(11.5 * var(--sh)), 74px);
  --play-h: calc(var(--play-w) * 1.4);
  --ui-font: clamp(10px, calc(2.0 * var(--sh)), 14px);
  --mini-w: clamp(26px, calc(6.8 * var(--sh)), 46px);
  --mini-h: calc(var(--mini-w) * 1.4);
}

.card {
  width: var(--card-w); height: var(--card-h); background: #fff;
  border-radius: 6px; border: 1px solid #d0d0d0;
  box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.15);
  position: relative; flex-shrink: 0; cursor: pointer;
  color: #1a1a1a; font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  overflow: hidden; user-select: none;
}
.card::before {
  content: ''; position: absolute; inset: 2px;
  border-radius: 4px; border: 1px solid rgba(0,0,0,.05);
  pointer-events: none;
}
.card.red { color: var(--suit-heart); }
.card.green { color: var(--suit-club); }
.card.orange { color: var(--suit-diamond); }
.card .corner {
  position: absolute; display: flex; flex-direction: column;
  align-items: center; gap: 1px; line-height: 1;
  font-weight: 700; white-space: nowrap;
}
.card .corner.top-left { top: 3.5%; left: 4%; }
.card .corner.bottom-right {
  bottom: 3.5%; right: 4%; transform: rotate(180deg);
}
.card .corner .rank {
  font-size: calc(var(--card-w) * 0.28); line-height: 1;
  letter-spacing: 0; font-weight: 800;
}
.card .corner .suit-small {
  width: calc(var(--card-w) * 0.20);
  height: calc(var(--card-w) * 0.20);
}
.card .center-suit {
  position: absolute; top: 58%; left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--card-w) * 0.46);
  height: calc(var(--card-w) * 0.46);
  opacity: .96;
}
.card.joker {
  background: linear-gradient(135deg, #ffffff 0%, #f6f6f6 55%, #ececec 100%);
  color: #222;
}
.card.joker::before { border-color: rgba(0,0,0,.08); }
.card.joker.red {
  background: linear-gradient(135deg, #ffffff 0%, #fff0f0 55%, #f8dede 100%);
  color: #d9251c;
}
.joker-art {
  position: absolute;
  top: 50%; left: 50%;
  width: 74%; height: 74%;
  transform: translate(-50%, -52%);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.joker-art svg { width: 100%; height: 100%; display: block; }
.joker-label {
  position: absolute;
  top: 50%; left: 5%;
  transform: translateY(-50%);
  z-index: 2;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 800;
  font-size: calc(var(--card-w) * 0.2);
  letter-spacing: calc(var(--card-w) * 0.012);
  line-height: 1;
  color: currentColor;
  pointer-events: none;
}
.played .card.joker .joker-label { font-size: calc(var(--play-w) * 0.2); }
.tribute-cards .card.joker .joker-label { font-size: calc(var(--tw) * 0.2); }
.card.wild {
  box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.15);
}
.card.wild::after {
  content: '配'; position: absolute; top: 3px; right: 3px;
  width: 15px; height: 15px; border-radius: 50%;
  background: linear-gradient(180deg, #ffc757, #f5a623);
  color: #3a2000; font-size: 10px; font-weight: 800;
  font-family: -apple-system, 'PingFang SC', sans-serif;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); z-index: 5;
}

.actions {
  display: flex; justify-content: center; align-items: center;
  gap: calc(3 * var(--lg)); padding: 8px 12px 0;
  flex-wrap: nowrap;
}
.actions button {
  flex: 1 1 0; min-width: 60px; max-width: 180px;
  padding: 20px 0;
  margin: 0;
  border: 2px solid transparent; border-radius: var(--radius-pill);
  font-size: 24px;
  font-weight: 700; letter-spacing: 2px;
  background: rgba(255,255,255,.18); color: #fff;
  text-align: center; line-height: 1.2;
  transition: transform .08s;
}
.actions button:active:not(:disabled) { transform: scale(.96); }
.actions button:disabled { opacity: .35; }

#backBtn {
  background: linear-gradient(180deg, #46c06e, #1f9d4d);
  color: #fff; border: 2px solid transparent;
  box-shadow: 0 3px 0 rgba(16,90,45,.5), 0 4px 10px rgba(0,0,0,.3);
}
#hintBtn {
  background: linear-gradient(180deg, #55b7ff, #1f7fd6);
  color: #fff;
  box-shadow: 0 3px 0 rgba(18,84,146,.55), 0 4px 10px rgba(0,0,0,.35);
}
#playBtn {
  background: linear-gradient(180deg, #ffd257, #f5a623);
  border-color: rgba(255,255,255,.95);
  color: #5a3800;
  box-shadow: 0 3px 0 rgba(163,102,0,.5), 0 4px 12px rgba(0,0,0,.4);
}
#passBtn {
  background: rgba(255,255,255,.88); color: #333;
  box-shadow: 0 3px 0 rgba(0,0,0,.25), 0 4px 10px rgba(0,0,0,.3);
}

.mini {
  width: 30px; height: 42px; border-radius: 3px;
  background: #fff; color: #1a1a1a;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  margin-left: -13px; border: 1px solid #ccc;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
  line-height: 1; font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}
.mini:first-child { margin-left: 0; }
.mini.red { color: var(--suit-heart); }
.mini.green { color: var(--suit-club); }
.mini.orange { color: var(--suit-diamond); }
.mini .m-rank { font-size: 12px; font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; }
.mini .m-suit { width: 8px; height: 8px; margin-top: 1px; }
.mini.joker {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 7px; font-weight: 800; letter-spacing: 0;
}
.pass-tag {
  font-size: 22px; font-weight: 700; color: #ffe;
  background: rgba(0,0,0,.55);
  padding: 6px 16px; border-radius: 12px;
  display: inline-block; line-height: 1;
}

.tribute-board {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.8);
  border: 2px solid rgba(245,166,35,.55);
  border-radius: 14px;
  padding: 12px 16px;
  display: flex; flex-direction: column; gap: 8px;
  min-width: 260px; max-width: calc(88 * var(--lg));
  z-index: 60;
  pointer-events: none;
  box-shadow: 0 8px 32px rgba(0,0,0,.75);
  animation: tributePop .25s ease;
}
@keyframes tributePop {
  from { transform: translate(-50%, -50%) scale(.8); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.tribute-board-title {
  text-align: center; color: #ffc757;
  font-size: 13px; font-weight: 800;
  letter-spacing: 3px;
}
.tribute-board-list {
  display: flex; flex-direction: column; gap: 6px;
}
.tribute-record {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: #fff;
}
.tribute-record .r-name {
  font-weight: 700; color: #e8e8e8;
  max-width: 60px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.tribute-record .arrow {
  color: #ffc757; font-weight: 800; margin: 0 2px;
}
.tribute-record .mini {
  margin: 0 !important;
  width: 32px; height: 44px;
  font-size: 11px;
}
.tribute-record .mini .m-rank { font-size: 13px; }

.tribute-modal {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  padding: max(12px, 5vh) max(12px, 4vw);
  animation: fadeIn .2s ease;
}
.tribute-panel {
  width: min(calc(90 * var(--lg)), 420px);
  /* 整体缩放到原始的 75%，保持宽高比；内部文字/间距/卡牌随 transform 自适应缩放 */
  transform: scale(.75);
  transform-origin: center center;
  background: linear-gradient(180deg, #1e5d34 0%, #0e3d1f 100%);
  border-radius: 18px;
  border: 2px solid rgba(245,166,35,.6);
  padding: 20px 18px 18px;
  display: flex; flex-direction: column; gap: 12px;
  max-height: 100%; overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0,0,0,.7);
  animation: popInTribute .25s ease;
}
.tribute-title {
  text-align: center; color: #ffc757;
  font-size: 18px; font-weight: 800;
  letter-spacing: 3px;
  text-shadow: none;
}
.tribute-desc {
  font-size: 12px; text-align: center;
  opacity: .85; line-height: 1.5;
  color: #c8e8d0;
}
.tribute-cards {
  --tw: clamp(34px, calc(5.9 * var(--lg)), 62px);
  display: flex; flex-wrap: wrap;
  gap: 12px; justify-content: center;
  padding: 10px 0;
  min-height: 100px;
  align-items: center;
}
.tribute-cards .card {
  width: var(--tw); height: calc(var(--tw) * 1.4);
  margin: 0 !important;
  cursor: pointer;
  transition: all .18s;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
}
.tribute-cards .card.selected {
  transform: translateY(-10px);
}
.tribute-confirm-btn {
  padding: 13px; border-radius: 10px; border: none;
  font-size: 15px; font-weight: 800;
  letter-spacing: 2px;
  background: linear-gradient(180deg, #ffc757, #f5a623);
  color: #3a2000; cursor: pointer;
  transition: transform .08s, opacity .2s;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.tribute-confirm-btn:active:not(:disabled) { transform: scale(.97); }
.tribute-confirm-btn:disabled {
  opacity: .4; cursor: default; box-shadow: none;
}

.return-tribute-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap;
  margin: 8px auto 2px;
  padding: 9px 16px;
  background: linear-gradient(180deg, rgba(245,166,35,.18), rgba(245,166,35,.10));
  border: 1px solid rgba(245,166,35,.55);
  border-radius: 12px;
  color: #ffd479;
  font-size: 15px; font-weight: 700;
  letter-spacing: .5px;
}
.return-tribute-btn {
  padding: 10px 26px; border-radius: 10px; border: none;
  font-size: 15px; font-weight: 800; letter-spacing: 2px;
  background: linear-gradient(180deg, #ffc757, #f5a623);
  color: #3a2000; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  transition: transform .08s, opacity .2s;
}
.return-tribute-btn:active:not(:disabled) { transform: scale(.97); }
.return-tribute-btn:disabled {
  opacity: .4; cursor: default; box-shadow: none;
}
.card.returnable {
  outline: 3px solid #f5a623;
  outline-offset: -2px;
  box-shadow: none;
  cursor: pointer;
}
.card.returnable.selected {
  transform: translateY(-8px);
}

.result-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.72);
  display: flex; align-items: center; justify-content: center;
  z-index: 300;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: fadeIn .2s ease;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.result-panel {
  width: min(calc(88 * var(--lg)), 380px);
  background: linear-gradient(180deg, #1e5d34 0%, #0e3d1f 100%);
  border-radius: 18px;
  border: 2px solid rgba(245,166,35,.6);
  box-shadow: 0 12px 40px rgba(0,0,0,.7);
  padding: 22px 20px 18px;
  display: flex; flex-direction: column; gap: 14px;
  animation: popIn .25s ease;
}
@keyframes popIn {
  from { transform: scale(.85); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
@keyframes popInTribute {
  from { transform: scale(.85 * .75); opacity: 0; }
  to   { transform: scale(.75);      opacity: 1; }
}
.result-title {
  font-size: 20px; font-weight: 800; text-align: center;
  color: #ffc757; letter-spacing: 4px;
  text-shadow: none;
}
.result-ranking {
  display: flex; flex-direction: column; gap: 8px; padding: 4px 0;
}
.result-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 10px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.08);
  transition: all .2s;
}
.result-row.me {
  background: rgba(245,166,35,.18);
  border-color: rgba(245,166,35,.55);
  box-shadow: none;
}
.result-row.winner-team {
  background: rgba(82,255,143,.10);
  border-color: rgba(82,255,143,.35);
}
.result-row.me.winner-team {
  background: rgba(245,166,35,.2);
  border-color: #f5a623;
}
.rank-badge {
  flex: 0 0 auto; padding: 3px 10px;
  border-radius: 8px; font-size: 12px;
  font-weight: 800; letter-spacing: 1px;
  min-width: 48px; text-align: center;
}
.rank-badge.rank-1 { background: linear-gradient(180deg, #ffd76e, #f5a623); color: #3a2000; }
.rank-badge.rank-2 { background: linear-gradient(180deg, #e8e8e8, #a9a9a9); color: #222; }
.rank-badge.rank-3 { background: linear-gradient(180deg, #d4a373, #8b5a2b); color: #fff; }
.rank-badge.rank-4 { background: linear-gradient(180deg, #8a8a8a, #4a4a4a); color: #ddd; }
.rank-name {
  flex: 1; font-size: 14px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rank-name .tag {
  font-size: 10px; opacity: .75;
  margin-left: 6px; font-weight: 500;
}
.result-upgrade {
  text-align: center; font-size: 14px; font-weight: 700;
  color: #ffeec2; padding: 8px 12px; border-radius: 10px;
  background: rgba(245,166,35,.14);
  border: 1px solid rgba(245,166,35,.35);
  letter-spacing: .5px;
}
.result-upgrade.passed-a {
  background: linear-gradient(180deg, rgba(255,199,87,.32), rgba(245,166,35,.18));
  border-color: #ffc757; font-size: 15px; color: #fff5d6;
  box-shadow: none;

}

.result-ready-btn {
  padding: 14px; border-radius: 12px; border: none;
  font-size: 16px; font-weight: 800; letter-spacing: 2px;
  background: linear-gradient(180deg, #ffc757, #f5a623);
  color: #3a2000; cursor: pointer;
  transition: transform .08s, opacity .2s;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.result-ready-btn:active { transform: scale(.97); }
.result-ready-btn:disabled {
  opacity: .55; cursor: default;
  background: linear-gradient(180deg, #a7a7a7, #6c6c6c);
  color: #2a2a2a; box-shadow: none;
}
.result-ready-btn.is-ready {
  background: linear-gradient(180deg, #52ff8f, #22c55e);
  color: #063d17;
}
.result-hint {
  font-size: 12px; text-align: center;
  color: #c8e8d0; opacity: .85;
  min-height: 16px; letter-spacing: .5px;
}

.toast {
  position: fixed; left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.82); color: #fff;
  padding: 12px 22px; border-radius: 10px;
  font-size: 14px; line-height: 1.5;
  z-index: 300; text-align: center;
  white-space: pre-line; max-width: calc(78 * var(--lg));
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}

.room-header-btns { display: flex; gap: 8px; align-items: center; }
.topbar-btns { display: flex; gap: 6px; align-items: center; }
.share-btn {
  background: linear-gradient(180deg, #ffc757, #f5a623);
  border: none; color: #3a2000;
  padding: 6px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: transform .08s;
}
.share-btn:active { transform: scale(.95); }
.topbar .share-btn { padding: 5px 10px; font-size: 12px; }

.share-modal {
  position: fixed; inset: 0; z-index: 260;
  background: rgba(0,0,0,.72);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: fadeIn .2s ease;
}
.share-panel {
  width: min(calc(86 * var(--lg)), 360px);
  background: linear-gradient(180deg, #1e5d34 0%, #0e3d1f 100%);
  border-radius: 18px;
  border: 2px solid rgba(245,166,35,.6);
  padding: 20px 18px 18px;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
  box-shadow: 0 12px 40px rgba(0,0,0,.7);
  animation: popIn .25s ease;
}
.share-title {
  font-size: 18px; font-weight: 800; color: #ffc757;
  letter-spacing: 2px; text-shadow: none;
}
.share-room { font-size: 14px; opacity: .9; }
.share-room b { color: #ffc757; font-size: 16px; margin-left: 4px; }
.share-qr-wrap {
  background: #fff; border-radius: 12px; padding: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.share-qr { display: block; width: 200px; height: 200px; }
.share-url-row { display: flex; gap: 8px; width: 100%; }
.share-url-row input {
  flex: 1; min-width: 0; padding: 9px 10px; border-radius: 8px; border: none;
  background: rgba(255,255,255,.92); color: #222; font-size: 12px;
}
.share-url-row button {
  flex: 0 0 auto; padding: 0 16px; border-radius: 8px; border: none;
  background: linear-gradient(180deg, #ffc757, #f5a623); color: #3a2000;
  font-weight: 800; font-size: 13px; cursor: pointer;
}
.share-url-row button:active { transform: scale(.96); }
.share-tip { font-size: 11px; opacity: .7; text-align: center; line-height: 1.5; }
.share-close {
  width: 100%; padding: 11px; border-radius: 10px; border: none;
  background: rgba(255,255,255,.16); color: #fff;
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.share-close:active { transform: scale(.97); }

@media (orientation: landscape), (orientation: portrait) {
  :root {
    --card-w: clamp(41px, calc(7.1 * var(--lg)), 96px);   /* 手牌放大 20%：5.9->7.1, 80->96, 下限 34->41 */
    --card-h: calc(var(--card-w) * 1.4);
    --step-r: 0.31;
    --stack-offset: calc(var(--card-h) * 0.26);
    --play-w: clamp(40px, calc(11.5 * var(--sh)), 74px);
    --play-h: calc(var(--play-w) * 1.4);
    --ui-font: clamp(10px, calc(2.0 * var(--sh)), 14px);
    --mini-w: clamp(26px, calc(6.8 * var(--sh)), 46px);
    --mini-h: calc(var(--mini-w) * 1.4);
  }
  #app { height: 100dvh; }

  #lobby h1 { font-size: calc(9 * var(--sh)); letter-spacing: calc(2 * var(--sh)); margin-bottom: calc(3.4 * var(--sh)); }
  #lobby input, #lobby button { width: calc(62 * var(--sh)); padding: calc(2.6 * var(--sh)); font-size: calc(3.4 * var(--sh)); border-radius: calc(2 * var(--sh)); }
  #lobby button.sound-toggle { width: auto; min-width: calc(18 * var(--sh)); padding: calc(2 * var(--sh)) calc(4 * var(--sh)); font-size: calc(3.4 * var(--sh)); }
  .tip { font-size: calc(2.4 * var(--sh)); }
  .seat-slot { width: calc(15 * var(--sh)); height: calc(15 * var(--sh)); }
  .slot-name { font-size: calc(2.4 * var(--sh)); max-width: calc(12.5 * var(--sh)); }
  .slot-tag { font-size: calc(1.8 * var(--sh)); }
  .circle-center-value { font-size: calc(5.4 * var(--sh)); }
  .room-actions button { padding: calc(2.4 * var(--sh)); font-size: calc(3 * var(--sh)); }
  .room-header { padding: calc(1.4 * var(--sh)) calc(3 * var(--sh)); font-size: calc(2.6 * var(--sh)); }
  .room-tip { font-size: calc(2.2 * var(--sh)); padding: calc(1 * var(--sh)) calc(3 * var(--sh)) calc(2.4 * var(--sh)); }

  .topbar { padding: calc(0.5 * var(--sh)) calc(1.6 * var(--sh)); font-size: var(--ui-font); }
  .topbar button { font-size: var(--ui-font); padding: calc(0.4 * var(--sh)) calc(1.4 * var(--sh)); }
  .turn-countdown { font-size: calc(var(--ui-font) - 1px); padding: calc(0.2 * var(--sh)) calc(2 * var(--sh)); }
  .table { padding-bottom: calc(1 * var(--sh)); }
  .seat { gap: calc(0.5 * var(--sh)); }
  .seat-top { top: 0; }
  .seat-left, .seat-right { top: 50%; }
  .seat-role { font-size: calc(var(--ui-font) - 2px); padding: calc(0.2 * var(--sh)) calc(1.4 * var(--sh)); }
  .avatar { width: calc(8.6 * var(--sh)); height: calc(8.6 * var(--sh)); font-size: var(--ui-font); }
  /* 三个对手座位头像等比放大到 2 倍（与基础尺寸 54px→108px 对应） */
  .seat-left .avatar,
  .seat-top .avatar,
  .seat-right .avatar {
    width: calc(17.2 * var(--sh)); height: calc(17.2 * var(--sh));
    font-size: calc(var(--ui-font) * 2);
  }

  /* 剩余牌数 / 名次标签：横屏等比缩放 */
  .count {
    font-size: calc(var(--ui-font) + 1px);
    padding: calc(0.25 * var(--sh)) calc(1.6 * var(--sh));
    min-width: calc(6.5 * var(--sh));
    height: calc(3.4 * var(--sh));
    line-height: calc(3 * var(--sh));
    border-radius: calc(2 * var(--sh));
  }
  .count.count-rank {
    font-size: calc(var(--ui-font) + 1px);
    padding: calc(0.25 * var(--sh)) calc(1.8 * var(--sh));
    min-width: calc(7.5 * var(--sh));
  }

  .played { min-height: var(--play-h); max-width: calc(52 * var(--sh)); padding: calc(0.3 * var(--sh)) 0; }
  .seat-top .played,
  .seat-left .played,
  .seat-right .played { max-width: calc(50 * var(--sh)); }
  .seat-bottom-played { max-width: calc(var(--play-w) * 6.5); bottom: calc(var(--card-h) + calc(0.4 * var(--sh))); min-height: var(--play-h); }
  .seat-bottom-played .played { max-width: calc(var(--play-w) * 6.5); }
  .mini {
    width: var(--mini-w); height: var(--mini-h);
    margin-left: calc(var(--mini-w) * -0.5);
    font-size: calc(var(--ui-font) - 1px);
  }
  .mini:first-child { margin-left: 0; }
  .mini .m-rank { font-size: calc(var(--ui-font) + 1px); }
  .mini .m-suit {
    width: calc(var(--ui-font) * 0.85); height: calc(var(--ui-font) * 0.85);
  }

  .myinfo { font-size: var(--ui-font); padding: calc(0.2 * var(--sh)) calc(1.6 * var(--sh)); }
  .auto-toggle-btn {
    height: calc(8 * var(--sh)); padding: 0 calc(4.4 * var(--sh));
    font-size: calc(var(--ui-font) * 2); border-radius: calc(4 * var(--sh));
  }
  .actions { padding: calc(0.4 * var(--sh)) calc(2 * var(--sh)) 0; gap: calc(4 * var(--sh)); justify-content: center; }
  .actions button {
    flex: 1 1 0; min-width: calc(15 * var(--sh)); max-width: 180px;
    font-size: calc(var(--ui-font) * 1.5 + 2px);
    padding: calc(1.65 * var(--sh)) 0;
  }
  .hand { min-height: var(--card-h); padding: calc(0.6 * var(--sh)) 4px calc(0.4 * var(--sh)); }

  .bottom-bar { padding: calc(0.4 * var(--sh)) calc(2 * var(--sh)) calc(0.6 * var(--sh)); }
  .sf-bar { gap: calc(1.5 * var(--sh)); padding: calc(1.2 * var(--sh)) calc(1.5 * var(--sh)); }
  .suit-chip {
    padding: calc(0.45 * var(--sh)) calc(2.1 * var(--sh));
    font-size: calc((var(--ui-font) + 2px) * 1.5);
    min-width: calc(7.5 * var(--sh));
    border-radius: calc(3.6 * var(--sh));
  }
  .return-tribute-bar { padding: calc(0.5 * var(--sh)) calc(2 * var(--sh)); font-size: var(--ui-font); }
  .return-tribute-btn { padding: calc(1.1 * var(--sh)) calc(3 * var(--sh)); font-size: var(--ui-font); }
  .pass-tag { font-size: calc(var(--ui-font) * 2); }
  .seat-top .played { top: calc(6.3 * var(--sh)); }

  .topbar, .myarea, .actions, .bottom-bar {
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }
}

.sound-toggle {
  width: auto;
  min-width: 0;
  height: 30px;
  min-height: 30px;
  padding: 0 9px;
  border: none;
  border-radius: 8px;
  background: rgba(255,255,255,.16);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: transform .08s, background .15s, opacity .15s;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;   /* 长按 💬 弹短语面板，禁止系统选中/放大镜 */
}
.sound-toggle:active { transform: scale(.94); }
.sound-toggle.off { opacity: .55; background: rgba(0,0,0,.28); }

#lobby button.sound-toggle {
  width: auto;
  min-width: 76px;
  padding: 8px 16px;
  font-size: 16px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  box-shadow: none;
}
.topbar button.sound-toggle { height: 26px; padding: 0 8px; font-size: 14px; }
.room-header button.sound-toggle { height: 26px; padding: 0 8px; font-size: 14px; }

.result-panel { position: relative; }
.result-sounds { position: absolute; top: 10px; right: 12px; display: flex; gap: 10px; z-index: 5; }
.result-sound {
  position: static;
  height: 26px;
  padding: 0 8px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.25);
}
.result-sound.result-speech { right: auto; }

.lobby-switches {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.bomb-choice-modal {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.bomb-choice-panel {
  width: min(calc(92 * var(--lg)), 420px); max-height: calc(80 * var(--sh)); overflow-y: auto;
  background: #1f2a36; border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px; padding: 16px 16px 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.bomb-choice-title { margin: 0 0 4px; font-size: 17px; color: #fff; text-align: center; }
.bomb-choice-desc { margin: 0 0 12px; font-size: 12px; color: #aab8c8; text-align: center; line-height: 1.5; }
.bomb-choice-list { display: flex; flex-direction: column; gap: 10px; }
.bomb-choice-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; padding: 8px 10px; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.bomb-choice-row:active { background: rgba(255,199,87,.18); }
.bomb-choice-row:hover { border-color: rgba(255,199,87,.5); }
.bomb-choice-label { flex: 0 0 auto; min-width: 92px; font-size: 13px; font-weight: 700; color: #ffd479; }
.bomb-choice-cards { display: flex; flex-wrap: wrap; gap: 0; }
.bomb-choice-cards .mini { margin-left: -10px; }
.bomb-choice-cards .mini:first-child { margin-left: 0; }
.bomb-choice-auto {
  justify-content: center; color: #cfe; font-weight: 700;
  background: rgba(255,255,255,.03); border-style: dashed;
}

@media (orientation: landscape), (orientation: portrait) {
  .sound-toggle {
    height: calc(var(--ui-font) + calc(1.6 * var(--sh)));
    padding: 0 calc(1.2 * var(--sh));
    font-size: var(--ui-font);
    border-radius: calc(0.8 * var(--sh));
  }
  .result-sounds { top: calc(1 * var(--sh)); right: calc(1.5 * var(--sh)); gap: calc(1.6 * var(--sh)); }
  .result-sound { top: auto; right: auto; }
  .result-sound.result-speech { right: auto; }
  .lobby-switches { gap: calc(1.5 * var(--sh)); }
}

@media (orientation: portrait) {
  :root { --sh: 1vw; --lg: 1vh; }

  #app {
    position: fixed;
    top: 50%; left: 50%;
    width: 100vh; height: 100vw;
    width: 100dvh; height: 100dvw;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: 50% 50%;
  }

  /* 手机端：对家(顶座)头像放大 2 倍后，其手牌数被中央等级框遮住；
     把等级框在原「手牌上沿↔屏幕顶」中点基础上再下移，避开顶座手牌数 */
  .center { top: calc(60% + 12 * var(--sh)); }
}

/* ============================================================
 * 结算面板名次徽标：全局 .rank-badge 是头像浮动徽标（display: none），
 * 结算面板里复用同名类显示"头游/二游/三游/末游"，需要恢复显示。
 * ============================================================ */
.result-ranking .rank-badge {
  display: inline-block;
  position: static;
  top: auto;
  left: auto;
  transform: none;
  z-index: auto;
  pointer-events: auto;
}

/* ============================================================
 * 视觉升级层（统一质感）
 *   这一层只覆盖颜色 / 渐变 / 阴影 / 圆角 / 动画等"非尺寸"属性；
 *   字号与尺寸仍然交给上文 @media 里的等比缩放规则，
 *   避免破坏横屏 / 竖屏适配。修改本段不会引起布局跳动。
 * ============================================================ */

/* 以上 token 已合并到文件顶部 :root，此处不再重复定义 */

/* ---------- 座位内容容器（配合 app.js 的差量渲染） ----------
   座位内部现在只替换 .slot-body 的内容，队伍点与布局不受影响。 */
.slot-body {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px; width: 100%;
}
.slot-name .slot-me { font-style: normal; color: var(--gold); margin-left: 2px; }
.slot-tag {
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow-1);
}
.seat-slot.ready .slot-tag {
  background: rgba(82,255,143,.38); border-color: rgba(82,255,143,.5);
}
.seat-slot.bot .slot-tag {
  background: rgba(100,200,255,.35); border-color: rgba(100,200,255,.45);
}
.slot-remove-btn {
  background: linear-gradient(180deg, #ff7a70, #e0392f);
  box-shadow: 0 2px 8px rgba(0,0,0,.5), var(--press);
}

/* ---------- 大厅（墨玉金方案） ---------- */
#lobby h1 {
  color: #ffd980;
  /* 去掉发光光晕，仅留轻微暗投影保证可读性 */
  text-shadow: 0 2px 4px rgba(0,0,0,.45);
}
#lobby input {
  background: rgba(255,255,255,.94);
  color: #14301f;
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: box-shadow .18s;
}
#lobby input::placeholder { color: #93a89a; }
#lobby input:focus {
  outline: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
/* 选择器带 #lobby 提高特异性，压过上面的 #lobby button 基色 */
#lobby #joinBtn {
  background: linear-gradient(180deg, #ffd673 0%, #f7b733 60%, #e08e16 100%);
  color: #3a2400;
  box-shadow: 0 6px 18px rgba(224,142,22,.45), var(--press);
  transition: transform .12s, box-shadow .2s, filter .2s;
}
#lobby #joinBtn:active {
  transform: translateY(2px) scale(.985);
  box-shadow: 0 2px 8px rgba(224,142,22,.35);
  filter: brightness(.97);
}
.tip { color: #e7f6ec; opacity: .82; text-shadow: 0 1px 2px rgba(0,0,0,.4); }

/* ---------- 房间 ---------- */
.room-header {
  background: rgba(6,40,22,.42);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
/* 外圈金色细环，强化"牌桌"观感 */
.seat-circle::after {
  content: '';
  position: absolute; inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(245,166,35,.18);
  pointer-events: none;
}
.circle-center-value {
  color: var(--gold);
  text-shadow: 0 2px 0 rgba(0,0,0,.40);
}
.seat-slot {
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.16), rgba(0,0,0,.42) 72%);
  border: 2px dashed rgba(255,255,255,.34);
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.seat-slot.mine {
  background: radial-gradient(circle at 50% 30%, rgba(255,222,134,.30), rgba(120,70,0,.42) 74%);
  border-color: var(--gold);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30);
}
.seat-slot.bot {
  background: radial-gradient(circle at 50% 30%, rgba(150,215,255,.26), rgba(10,50,80,.42) 74%);
  border-color: rgba(120,205,255,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.seat-slot.ready {
  background: radial-gradient(circle at 50% 30%, rgba(140,255,190,.28), rgba(6,70,35,.45) 74%);
  border-color: #52ff8f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26);
}
.seat-slot.bot.ready {
  background: radial-gradient(circle at 50% 30%, rgba(150,215,255,.26), rgba(10,50,80,.42) 74%);
  border-color: rgba(120,205,255,.72);
  box-shadow: none;
}
.room-actions button { box-shadow: var(--shadow-1), var(--press); }
#addBotBtn {
  background: linear-gradient(180deg, rgba(140,215,255,.34), rgba(60,160,220,.26));
  color: #e6f7ff;
  border: 1px solid rgba(140,215,255,.60);
}
#readyBtn {
  background: linear-gradient(180deg, #ffdc86, var(--gold) 55%, var(--gold-deep));
  font-weight: 800;
}
#readyBtn.is-ready {
  background: linear-gradient(180deg, rgba(120,255,180,.40), rgba(30,180,95,.30));
  color: #eafff1;
  border: 1px solid rgba(82,255,143,.70);
}

/* ---------- 牌桌 ---------- */
.topbar button, .room-header button {
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: var(--shadow-1), var(--press);
}
#centerMsg {
  color: var(--gold);
  text-shadow: 0 1px 2px rgba(0,0,0,.70);
}
.turn-countdown {
  background: rgba(0,0,0,.62);
  border: 1px solid rgba(255,255,255,.30);
  box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.turn-countdown.mine {
  background: linear-gradient(180deg, rgba(255,199,87,.95), rgba(245,166,35,.90));
  color: #3a2000;
  border-color: #fff0c0;
  box-shadow: none;
}
.turn-countdown.urgent {
  background: linear-gradient(180deg, #e04b3f, #a81f16);
  color: #fff;
  border-color: #ffb3ab;
}

/* ---------- 牌面 ---------- */
.card-group .card.selected {
  box-shadow: 0 8px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.9);
}

/* ---------- 操作按钮 ---------- */
.actions button {
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 4px 0 rgba(0,0,0,.22), var(--shadow-1), var(--press);
  transition: transform .10s, box-shadow .18s, filter .18s, opacity .18s;
}
.actions button:active:not(:disabled) {
  transform: translateY(3px) scale(.985);
  box-shadow: 0 1px 0 rgba(0,0,0,.22), var(--shadow-1);
  filter: brightness(.96);
}
.actions button:disabled {
  opacity: .32;
  box-shadow: none;
  filter: grayscale(.5);
}

/* ---------- 提示条 / 弹窗 / 结算 ---------- */
.toast {
  background: rgba(12,20,15,.90);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  box-shadow: var(--shadow-3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: toastIn .18s ease-out;
}
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.90); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.result-row {
  background: rgba(0,0,0,.32);
  border-color: rgba(255,255,255,.12);
}
.result-ready-btn {
  box-shadow: 0 6px 0 rgba(150,90,0,.45), 0 8px 20px rgba(0,0,0,.30);
}
.result-ready-btn:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 rgba(150,90,0,.45);
}
.result-ready-btn.is-ready {
  box-shadow: 0 6px 0 rgba(10,90,40,.50), 0 8px 20px rgba(34,197,94,.30);
}
.share-btn, .share-url-row button {
  box-shadow: 0 3px 0 rgba(150,90,0,.45), 0 4px 12px rgba(0,0,0,.30);
}
.sound-toggle {
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: var(--shadow-1);
}
/* 后置炸弹弹窗：原为蓝灰面板，与绿色牌桌调性不一致，统一成深绿金边 */
.bomb-choice-title { color: var(--gold); text-shadow: none; }
.bomb-choice-desc { color: #bcd8c4; }
.bomb-choice-row {
  background: rgba(0,0,0,.26);
  border: 1px solid rgba(255,255,255,.14);
}
.bomb-choice-row:hover { border-color: rgba(255,199,87,.55); }
.bomb-choice-row:active { background: rgba(255,199,87,.20); }
.bomb-choice-auto { color: #cfe8d4; }
.mini { border-radius: calc(var(--mini-w) * 0.16); box-shadow: var(--shadow-1); }

/* ============================================================
 * 牌面重做：统一基线版
 *   目标：不论点数长短（A / 10 / K）、花色、还是大小王，
 *         左上与右下的"点数"都落在同一高度、同一尺寸的盒子里。
 *   三处关键修正：
 *     ① 角标改成"固定宽高的 flex 居中盒"，不再由内容撑开 ——
 *        原来 "10" 比 "A" 宽，靠内容撑开会让两行视觉重心错位；
 *     ② 点数字距用 em 而非固定 -1px —— 牌缩小到 34px 时，固定 px
 *        的负间距会把 "10" 挤变形，牌大时又几乎没效果；
 *     ③ 大小王改用与常规牌相同的角标结构（见 app.js buildCardDOM），
 *        原来是左上角竖排 "JOKER"，高度与其它牌完全对不上。
 * ============================================================ */
.card {
  border: 0;
  border-radius: calc(var(--card-w) * 0.11);
  background: linear-gradient(157deg, #ffffff 0%, #fdfdfb 46%, #f2f0ec 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.30), 0 4px 9px rgba(0,0,0,.20), inset 0 0 0 1px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.9);
  /* 【基线统一的关键】原来是 'Georgia', serif —— 它不含中文，
     大小王的「大 / 小」会 fallback 到中文字体，字形高度和基线
     与 A / K / 10 完全不同，看上去就是"数字忽高忽低"。
     改成同一套系统字体栈后，数字与中文由同一字体渲染，基线自然对齐。 */
  font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC",
               "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}
.card::before {
  content: '';
  position: absolute;
  inset: calc(var(--card-w) * 0.05);
  border-radius: calc(var(--card-w) * 0.07);
  border: 1px solid rgba(0,0,0,.07);
  pointer-events: none;
}
/* 角标：左对齐（真实扑克牌角标就是左上角对齐），
   宽度由内容决定，不再用固定盒硬塞 —— "10" 比 "A" 宽是正常且好看的，
   重要的是所有牌的角标都从同一个 left / top 起算，高度自然一致。 */
.card .corner {
  position: absolute;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-start;
  gap: calc(var(--card-w) * 0.015);
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
}
.card .corner.top-left {
  top: calc(var(--card-h) * 0.045);
  left: calc(var(--card-w) * 0.055);
}
/* 右下角整体旋转 180°，flex-start 在视觉上就成了右对齐，符合真实牌面 */
.card .corner.bottom-right {
  bottom: calc(var(--card-h) * 0.045);
  right: calc(var(--card-w) * 0.055);
  transform: rotate(180deg);
}
/* 点数：固定「高度」盒 + 垂直居中 → 任意字形的基线落在同一水平线 */
.card .corner .rank {
  height: calc(var(--card-w) * 0.30);
  display: flex; align-items: center; justify-content: flex-start;
  font-size: calc(var(--card-w) * 0.30);
  line-height: 1;
  letter-spacing: 0;
  font-weight: 800;
  /* 真实扑克牌角标为 Didone 衬线体：用 Playfair Display 最贴近，
     兜底 Georgia/serif 保证字体加载失败时仍有衬线质感 */
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  /* 等高(lnum)+等宽(tnum)数字：Playfair 默认是 oldstyle 数字，高低宽窄不一，
     强制 lining 让数字与大写字母同高、tabular 让同宽，消除"大小不均" */
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.card .corner .suit-small {
  width: calc(var(--card-w) * 0.185);
  height: calc(var(--card-w) * 0.185);
}
/* 大小王的点数图标（★），与花色小图保持同尺度 */
.card .corner .suit-star {
  height: calc(var(--card-w) * 0.185);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--card-w) * 0.20);
  line-height: 1;
}
.card .center-suit {
  position: absolute; top: 56%; left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--card-w) * 0.44);
  height: calc(var(--card-w) * 0.44);
  opacity: .92;
}
/* 逢人配角标随牌缩放（原来固定 15px / 10px，牌小时会溢出） */
.card.wild {
  box-shadow: 0 1px 2px rgba(0,0,0,.30), 0 4px 9px rgba(0,0,0,.20);
}
.card.wild::after {
  width: calc(var(--card-w) * 0.30);
  height: calc(var(--card-w) * 0.30);
  top: calc(var(--card-w) * 0.04);
  right: calc(var(--card-w) * 0.04);
  font-size: calc(var(--card-w) * 0.19);
}

/* ---------- 桌面已出的牌（基准尺寸是 --play-w，规则需单独给一份） ---------- */
.played .card.tcard .corner {
  align-items: flex-start;
  gap: calc(var(--play-w) * 0.015);
}
.played .card.tcard .corner.top-left {
  top: calc(var(--play-h) * 0.045);
  left: calc(var(--play-w) * 0.055);
}
.played .card.tcard .corner.bottom-right {
  bottom: calc(var(--play-h) * 0.045);
  right: calc(var(--play-w) * 0.055);
}
.played .card.tcard .corner .rank {
  height: calc(var(--play-w) * 0.32);
  display: flex; align-items: center; justify-content: flex-start;
  font-size: calc(var(--play-w) * 0.32);
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.played .card.tcard .corner .suit-small,
.played .card.tcard .corner .suit-star {
  width: calc(var(--play-w) * 0.20);
  height: calc(var(--play-w) * 0.20);
  font-size: calc(var(--play-w) * 0.21);
}
.played .card.tcard { border-radius: calc(var(--play-w) * 0.11); }
.played .card.tcard::before {
  inset: calc(var(--play-w) * 0.05);
  border-radius: calc(var(--play-w) * 0.07);
}

/* 进贡选牌弹窗里的牌：把 --card-w 指向局部尺寸变量，复用同一套规则 */
.tribute-cards {
  --card-w: var(--tw);
  --card-h: calc(var(--tw) * 1.4);
}
.tribute-cards .card { border-radius: calc(var(--tw) * 0.11); }
.tribute-cards .card.selected {
  outline: 3px solid var(--gold);
  outline-offset: 1px;
  box-shadow: 0 8px 18px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.10);
}

/* ---------- 牌桌：给中央区域一块真实的"绒面牌桌" ---------- */
.table::before {
  content: '';
  display: none; /* 按需求去掉游戏界面的圆桌 */
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(70vw, 70vh, 380px);
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.03) 45%,
      rgba(0,0,0,.22) 100%);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 0 50px rgba(0,0,0,.35);
  pointer-events: none;
  z-index: 0;
}
.table > .seat, .table > .tribute-board { z-index: 2; }
/* 等级框置于最底层：低于座位(2)/倒计时(50)/出牌区(40)，既不遮挡顶座手牌数，自身也不被压暗 */
.table > .center { z-index: 0; }

/* ============================================================
 * 可读性与可访问性（按 UI 设计规范）
 *   · 辅助文字对比度提到 ≥ 4.5:1 —— 原来 .5~.65 的 opacity 在深绿底上
 *     实际是灰扑扑的一片，小字号下几乎看不清；
 *   · 交互元素补 :focus-visible 焦点环，键盘 / 读屏用户能看清焦点位置。
 *   · 花色本来就同时靠"形状 + 颜色"区分，不违背"不能只靠颜色表意"。
 * ============================================================ */
.tip { opacity: .92; }
.tip-compat { opacity: .72; }
.room-tip { opacity: .80; }
.slot-pos { opacity: .78; }
.circle-center-label { opacity: .78; }
/* 同花顺未点亮时的灰底花色，原来 #6f6f6f 太暗 */
.suit-chip,
.suit-chip.red,
.suit-chip.green,
.suit-chip.orange { color: #a3b3a8; }

button:focus-visible,
input:focus-visible,
.slot-remove-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

/* ---------- 补漏：小牌与"配"角标原来写死 px ----------
   牌是动态尺寸的，写死 px 在牌小时会溢出、牌大时又显得偏小，
   统一改成随各自基准变量缩放，与角标点数保持同一套比例。 */
.mini .m-rank { font-size: calc(var(--mini-w) * 0.26); }
.tribute-record .mini .m-rank { font-size: calc(var(--mini-w) * 0.28); }
.mini .m-suit {
  width: calc(var(--mini-w) * 0.17);
  height: calc(var(--mini-w) * 0.17);
  margin-top: calc(var(--mini-w) * 0.02);
}
.played .card.tcard.wild::after {
  width: calc(var(--play-w) * 0.22);
  height: calc(var(--play-w) * 0.22);
  font-size: calc(var(--play-w) * 0.14);
  top: calc(var(--play-w) * 0.04);
  right: calc(var(--play-w) * 0.04);
}

/* ============================================================
 * 「清新掼蛋」主题（参照多乐掼蛋的视觉语言）
 *   多乐的界面特征：牌桌是明亮清新的绿而不是深沉墨绿、玩家是 Q 萌圆形
 *   卡通头像、牌面大而清晰、按钮圆润饱满、整体观感清爽不压重。
 *   本项目是强制横屏，所以保留横屏布局，只迁移视觉语言。
 *   同样只覆盖颜色 / 渐变 / 边框 / 圆角 / 阴影，尺寸交给 @media。
 * ============================================================ */
/* 页面底色跟随牌桌，避免旋转/安全区露出的边缘与牌桌脱节 */
html, body {
  background-color: #0a5730;
  background-image: var(--bg-screen);
}
/* 以上清新 token 已合并到文件顶部 :root，此处不再重复定义 */

/* ---------- 牌桌：中央亮、四周收暗，白色牌面依然突出 ---------- */
#game, #lobby, #room {
  background: var(--bg-screen);
}
.table::before {
  background:
    radial-gradient(ellipse at 50% 40%,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.05) 44%,
      rgba(0,0,0,.20) 100%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 0 50px rgba(0,0,0,.26), 0 2px 18px rgba(0,0,0,.22);
}

/* ---------- Q 萌头像：四个座位四种卡通渐变，白描边 + 柔和投影 ---------- */
.avatar {
  border: 3px solid #fff;
  background: #3f9e6d; /* 默认备用色；实际由 .team-red/.team-blue 用纯色覆盖 */
  color: #fff;
  font-weight: 800;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
  box-shadow: 0 2px 6px rgba(0,0,0,.30);
}
/* 队友头像同色：己方队伍统一红色、对方队伍统一蓝色。
   颜色在 renderGameMeta 里按 (seat%2)===myTeam 相对赋值，
   保证「我」所在的队伍永远是红色——与选座阶段的 team-dot 完全一致。 */
.avatar.team-red  { background: #ff4d4d; } /* 纯色填充，与选座阶段 team-dot 同色 */
.avatar.team-blue { background: #4d8bff; }
.avatar.active {
  border-color: var(--gold);
}
.avatar.hosting { border-color: #ff6b61; }

/* ---------- 剩余牌数：金色徽标（用 box-shadow 描白边，不占布局） ---------- */
.count {
  background: linear-gradient(180deg, #ffd97a, var(--gold-deep));
  color: #4a2a00;
  border-color: rgba(255,255,255,.5);
  font-weight: 800;
  text-shadow: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 3px 8px rgba(0,0,0,.35);
}
/* 名次徽标沿用四色区分，只补一圈白边。
   注意：.count.count-rank.rank-* 的特异性更高且各自带 box-shadow，
   必须在这里逐个补，否则白边会被它们盖掉。 */
.count.count-rank,
.count.count-rank.rank-tou,
.count.count-rank.rank-er,
.count.count-rank.rank-san,
.count.count-rank.rank-mo {
  box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 3px 8px rgba(0,0,0,.35);
}

/* ---------- 中央级牌：做成金色徽章 ---------- */
.center-level {
  background: rgba(6,40,22,.60);
  border: 2px solid rgba(255,199,87,.55);
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 20px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.20);
}

/* ---------- 座位关系标签 ---------- */
.seat-role {
  background: rgba(6,40,22,.62);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: var(--radius-pill);
  color: #fff;
}
.myinfo {
  /* 不再用圆角矩形背景框包裹（用户要求去掉该框；托管时也不再变红） */
  color: #fff;
}

/* ---------- 顶栏 / 倒计时 ---------- */
.topbar {
  background: rgba(6,40,22,.42);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-pill);
}
.turn-countdown {
  border-radius: var(--radius-pill);
  font-weight: 800;
  box-shadow: 0 3px 10px rgba(0,0,0,.35);
}

/* ---------- 圆润饱满的操作按钮 ---------- */
.actions button {
  border-radius: var(--radius-pill);
  border: 2px solid rgba(255,255,255,.55);
  font-weight: 800;
  box-shadow: 0 4px 0 rgba(0,0,0,.20), var(--shadow-1), var(--press);
}
#playBtn {
  background: linear-gradient(180deg, #ffdf8e, var(--gold) 55%, var(--gold-deep));
  color: #4a2a00;
  border-color: #fff3c8;
  text-shadow: none;
}
#passBtn {
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(224,232,228,.86));
  color: #22493a;
  border-color: #fff;
}
#backBtn {
  background: linear-gradient(180deg, #72d997, #2f9c5c);
  color: #fff;
  border-color: #d2f2dd;
}

/* 统一全站操作按钮为圆角药丸：清新主题下，底部「出牌/过/后置」已是药丸，
   但顶栏(🔊/分享/退出)、房间页(添加机器人/准备)、各弹窗(确认/关闭/复制/回贡)
   与结算(准备下一局)按钮仍是方角，观感不一致。此处补齐，使其与清新语言统一。
   仅补圆角，不改尺寸/配色，不引入新布局。 */
.topbar button, .room-header button, .room-actions button,
.result-ready-btn, .tribute-confirm-btn, .share-close,
.share-url-row button, .return-tribute-btn, .slot-remove-btn {
  border-radius: var(--radius-pill);
}

/* ---------- 托管按钮 ---------- */
.auto-toggle-btn {
  border-radius: var(--radius-pill);
  border: 2px solid #fff;
  background: rgba(255,255,255,.92);
  color: #22493a;
  font-weight: 800;
  box-shadow: 0 3px 10px rgba(0,0,0,.28);
}
.auto-toggle-btn.on {
  background: linear-gradient(180deg, #ffd97a, var(--gold-deep));
  color: #4a2a00;
  border-color: #fff3c8;
}

/* ---------- 同花顺提示条：点亮时做成金色胶囊 ---------- */
.suit-chip {
  border-radius: var(--radius-pill);
  background: rgba(6,40,22,.55);
  border: 2px solid rgba(255,255,255,.22);
}
.suit-chip.active {
  background: linear-gradient(180deg, #ffd97a, var(--gold-deep));
  border-color: #fff3c8;
  color: var(--suit-spade);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
/* 亮起时花色符号用真实牌色：黑桃黑、红桃红、梅花绿、方块橙 */
.suit-chip.active.red   { color: var(--suit-heart); }
.suit-chip.active.green { color: var(--suit-club); }
.suit-chip.active.orange{ color: var(--suit-diamond); }

/* ---------- 出牌区的牌：加一圈白描边，从桌面里"浮"出来 ---------- */
.played .card.tcard {
  box-shadow: 0 0 0 2px rgba(255,255,255,.55), 0 4px 10px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.10);
}

/* ---------- 面板统一成清新绿 + 金边 ---------- */
.result-panel, .share-panel, .tribute-panel, .bomb-choice-panel {
  background: var(--panel-fresh);
  border: 2px solid rgba(255,199,87,.70);
}
/* 房间圆桌也换成清新调 */
.seat-circle {
  background:
    radial-gradient(circle at 50% 40%,
      rgba(255,255,255,.16) 0%,
      rgba(255,255,255,.05) 44%,
      rgba(0,0,0,.20) 100%);
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: inset 0 0 46px rgba(0,0,0,.42), inset 0 2px 0 rgba(255,255,255,.16), 0 0 40px rgba(0,0,0,.32);
}
.seat-slot {
  background: radial-gradient(circle at 50% 28%, rgba(255,255,255,.20), rgba(4,44,22,.60) 74%);
  border-color: rgba(255,255,255,.42);
}

/* ============================================================
 * 快捷短语聊天：#chatLayer 挂 #app 直下（z-index 9500）压过一切弹层，
 * pointer-events 只在面板上开启；气泡透明度 50%，3 秒淡出。
 * ============================================================ */
.chat-layer {
  position: absolute; inset: 0;
  z-index: 9500;
  pointer-events: none;
}
.chat-panel {
  position: absolute; transform: translate(-50%, -100%);
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 10px 12px; border-radius: 14px;
  background: rgba(10, 34, 24, .92);
  border: 1px solid rgba(255,255,255,.25);
  pointer-events: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  /* 【修复·长短语撑爆面板】定宽后两列等宽，长句在按钮内自动换行，
     面板宽度恒不超过屏宽 92%，showChatPanel 的水平夹取才有效 */
  width: min(92vw, 560px);
}
.chat-panel.below { transform: translate(-50%, 0); }
/* 【自定义文字】面板最下边的输入入口：横跨两列 */
.chat-input-entry { grid-column: 1 / -1; }

/* 输入条：手牌底部弹出（横向键盘输入），深色胶囊 + 白色输入框 */
.chat-input-bar {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  width: min(92%, 560px); display: flex; gap: 8px; padding: 8px 10px;
  background: rgba(10, 34, 24, .95);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 14px;
  pointer-events: auto; z-index: 9600;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.chat-input-bar.hidden { display: none; }
.chat-input-bar input {
  flex: 1 1 auto; min-width: 0; height: 38px; padding: 0 12px;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.95); color: #22331f;
  font-size: 16px; font-family: inherit; outline: none;
}
.chat-send-btn {
  flex: 0 0 auto; padding: 0 18px; height: 38px; border-radius: 10px;
  border: 1px solid #ffd97a; background: linear-gradient(180deg, #ffd97a, var(--gold-deep));
  color: #4a2a00; font-size: 16px; font-weight: 800; cursor: pointer; font-family: inherit;
}
.chat-send-btn:active { transform: scale(.95); }
.chat-phrase {
  padding: 8px 10px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.30);
  background: rgba(255,255,255,.12); color: #fff;
  font-size: 14px; font-weight: 600; cursor: pointer;
  white-space: normal; word-break: break-all; line-height: 1.35; text-align: center;
  font-family: inherit;
}
.chat-phrase:active { background: rgba(255,255,255,.28); }
.chat-bubble {
  position: absolute;
  transform: translate(-50%, -100%);
  padding: 7px 14px; border-radius: 16px; border-bottom-left-radius: 4px;
  background: #fff; color: #1c2b26;
  font-size: 14px; font-weight: 700;
  /* 【修复·自定义文字 30 字出屏】限宽换行，宽度恒不超过屏宽 72% */
  max-width: min(72vw, 340px);
  white-space: normal; word-break: break-all; text-align: center; line-height: 1.35;
  opacity: 0;                        /* 隐藏态 */
  transition: opacity .3s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.chat-bubble.show { opacity: .5; }   /* 用户要求：显示态透明度 50% */

/* 对局内「短语」独立按钮已移除：长按顶栏 💬 弹出短语面板（见 app.js） */

/* 结算面板内「短语」按钮已移除：长按面板右上角 💬 弹出短语面板 */

/* ============================================================
 * 「轮到你」三通道提示（20260930b）
 *   A1 边缘呼吸光：inset:0 纯 CSS，z-index 30（位于倒计时50/手牌255之下），
 *   pointer-events:none 不挡点击，自动适配手机竖屏 rotate(90deg)
 * ============================================================ */
.turn-glow {
  position: absolute; inset: 0;
  z-index: 30;
  pointer-events: none;
  border: 3px solid rgba(245, 199, 87, .9);
  border-radius: 12px;
  opacity: 0;
}
.turn-glow.on { animation: turnGlowBreath 2s ease-in-out infinite; }
@keyframes turnGlowBreath {
  0%, 100% { opacity: .12; }
  50%      { opacity: .85; }
}

/* A2 中央提示条：自己回合金色，等待他人灰色 */
#centerMsg.turn-mine {
  color: #FFD97A;
  font-weight: 700;
}
#centerMsg.turn-wait {
  color: #9AA6B0;
}

/* A3 行动按钮脉冲：轮到你瞬间呼吸两次（0.45s × 2） */
@keyframes btnTurnPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
.actions button.turn-pulse { animation: btnTurnPulse .45s ease-in-out 2; }