/* ===== 欢乐棋牌 全局样式 v4 —— 选牌可见+手牌折行+对手紧凑 ===== */
:root{
  --bg:#0a0e1a;--bg2:#111827;--panel:#1a2235;--panel2:#212d45;
  --line:#2a3654;--txt:#eaf0ff;--sub:#8b9bc4;--dim:#5a6a8a;
  --gold:#f5c542;--red:#e23b4e;--green:#2ecc71;--blue:#4a9eff;
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
  --felt:#0c4a12;--felt-light:#145d20;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;width:100%;overflow:hidden;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--txt);
  padding-top:var(--safe-t);padding-bottom:calc(var(--safe-b)+6px);
  display:flex;flex-direction:column;
}
button{font-family:inherit;cursor:pointer;border:none;outline:none;}

/* ---- 顶栏 ---- */
.topbar{
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  background:linear-gradient(180deg,var(--bg2),rgba(17,24,39,.7));
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;flex-shrink:0;
}
.me{display:flex;align-items:center;gap:8px;flex:1;min-width:0;}
.avatar{
  width:38px;height:38px;border-radius:50%;background:var(--panel2);
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;
  color:var(--gold);border:1px solid var(--line);flex-shrink:0;
}
.me-info{min-width:0;}
.me-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.me-id{font-size:10px;color:var(--dim);}
.beans{
  display:flex;align-items:center;gap:4px;background:linear-gradient(135deg,#2a1a00,#3d2800);
  border:1px solid rgba(245,197,66,.4);border-radius:20px;padding:5px 12px;font-weight:700;
  color:var(--gold);font-size:14px;
}
.bean-ico{filter:drop-shadow(0 0 3px rgba(245,197,66,.5));}

/* ---- 设备感知图标：桌面用 CSS 安全图标，手机/触屏用 emoji ---- */
.ico{display:inline-flex;align-items:center;justify-content:center;font-style:normal;vertical-align:middle;}
.ico-bean{
  width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#ffeb99,#f5c542 60%,#c69522);
  box-shadow:0 0 3px rgba(245,197,66,.5);
  color:transparent;
}
.ico-bean::before{content:'豆';color:#6b4b00;font-size:10px;font-weight:800;}
.ico-trophy::before{content:'★';color:var(--gold);font-size:1.1em;font-weight:800;}
.ico-calendar::before{content:'日';color:var(--sub);font-size:.8em;font-weight:700;border:1px solid currentColor;border-radius:2px;padding:0 1px;}
.ico-check::before{content:'✓';color:var(--green);font-size:1.15em;font-weight:800;}
/* 桌面环境（鼠标+精细指针）：隐藏 emoji，显示 ::before 安全图标 */
@media (hover:hover) and (pointer:fine){
  .ico-bean,.ico-trophy,.ico-calendar,.ico-check{color:transparent;}
}
/* 触屏/手机环境：显示原生 emoji，隐藏 ::before */
@media (hover:none),(pointer:coarse){
  .ico-bean,.ico-trophy,.ico-calendar,.ico-check{width:auto;height:auto;background:none;box-shadow:none;color:inherit;}
  .ico-bean::before,.ico-trophy::before,.ico-calendar::before,.ico-check::before{display:none;}
}

/* ---- 大厅（可滚动：手机触摸上下拉 / 电脑滚轮+键盘上下） ---- */
.hall{padding:16px 12px 16px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
  max-width:520px;margin:0 auto;width:100%;
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;}
.hall::-webkit-scrollbar{width:6px;}
.hall::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px;}
.hall-title{font-size:12px;color:var(--sub);width:100%;margin:2px 2px 8px;letter-spacing:2px;text-transform:uppercase;grid-column:1 / -1;}

/* 圆框感叹号（规则触发，纯 CSS 绘制，无 emoji，避免桌面方框） */
.info-dot{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;
  border:1.5px solid var(--sub);color:var(--sub);
  font-family:Georgia,"Times New Roman",serif;font-size:11px;font-weight:800;font-style:normal;
  line-height:1;cursor:pointer;vertical-align:middle;margin-left:5px;
  transition:all .15s ease;user-select:none;
}
.info-dot:hover{border-color:var(--gold);color:var(--gold);}
.gc-name .info-dot{margin-left:5px;}
.gv-title .info-dot{margin-left:4px;}

/* 规则弹层 */
.rules-pop{
  position:fixed;inset:0;z-index:120;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(6,8,18,.78);backdrop-filter:blur(4px);
}
.rules-pop.show{display:flex;animation:fade .18s ease;}
.rules-card{
  width:100%;max-width:340px;max-height:76vh;display:flex;flex-direction:column;
  background:linear-gradient(160deg,var(--panel),var(--panel2));
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
}
.rules-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:14px 16px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(245,197,66,.1),transparent);
}
.rules-title{font-size:15px;font-weight:800;color:var(--gold);}
.rules-close{
  width:28px;height:28px;border-radius:50%;background:var(--panel2);
  border:1px solid var(--line);color:var(--sub);font-size:16px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
}
.rules-close:hover{color:var(--txt);border-color:var(--gold);}
.rules-body{overflow-y:auto;padding:14px 16px 18px;font-size:13px;line-height:1.7;color:var(--txt);}
.rules-body .rl{padding:5px 0;border-bottom:1px dashed rgba(255,255,255,.06);}
.rules-body .rl:last-child{border-bottom:none;}
.rules-body .rl b{color:var(--gold);font-weight:700;margin-right:4px;}
.game-card{
  position:relative;background:linear-gradient(155deg,var(--panel),var(--panel2));
  border:1px solid var(--line);border-radius:18px;padding:18px 14px;overflow:hidden;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
  display:flex;flex-direction:column;min-height:122px;
}
.game-card:active{transform:scale(.97);border-color:var(--gold);}
.game-card:hover{border-color:rgba(245,197,66,.35);}
.gc-icon{font-size:34px;line-height:1;flex-shrink:0;}
.gc-name{font-size:17px;font-weight:700;margin-top:10px;color:var(--txt);display:block;line-height:1.35;word-break:break-all;}
.gc-tag{position:absolute;top:12px;right:12px;font-size:10px;color:var(--gold);
  background:rgba(245,197,66,.12);border:1px solid rgba(245,197,66,.3);border-radius:8px;padding:2px 7px;}
.gc-desc{font-size:11px;color:var(--sub);margin-top:8px;line-height:1.55;min-height:34px;display:block;word-break:break-all;}

/* ---- 底栏 ---- */
.footbar{padding:10px 12px 6px;text-align:center;flex-shrink:0;}
.foot-note{font-size:10px;color:var(--dim);}

/* ---- 通用按钮 ---- */
.btn{border-radius:12px;padding:10px 18px;font-size:14px;font-weight:600;transition:all .12s ease;border:1px solid transparent;}
.btn:active{filter:brightness(1.15);transform:scale(.97);}
.btn.primary{background:linear-gradient(180deg,#ffd866,var(--gold));color:#3a2c00;border-color:rgba(245,197,66,.5);}
.btn.ghost{background:var(--panel2);color:var(--txt);border-color:var(--line);}
.btn.sm{padding:7px 13px;font-size:12px;border-radius:10px;}
.btn:disabled{opacity:.4;filter:grayscale(.5);cursor:not-allowed;}
.btn.red{background:linear-gradient(180deg,#ff6b78,var(--red));color:#fff;border-color:rgba(255,77,90,.4);}
.btn.green{background:linear-gradient(180deg,#5fe39a,var(--green));color:#001f0a;border-color:rgba(46,204,113,.4);}

/* ---- 浮层 ---- */
.overlay{
  position:fixed;inset:0;background:rgba(6,8,18,.86);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;z-index:50;padding:16px;
  padding-top:calc(var(--safe-t)+16px);padding-bottom:calc(var(--safe-b)+16px);
}
.overlay.show{display:flex;animation:fade .18s ease;}
@keyframes fade{from{opacity:0}to{opacity:1}}

.mm{text-align:center;}
.mm-spin{width:56px;height:56px;border-radius:50%;border:4px solid var(--line);
  border-top-color:var(--gold);margin:0 auto 18px;animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.mm-text{font-size:18px;font-weight:700;}
.mm-sub{font-size:13px;color:var(--sub);margin-top:10px;}
.mm-tip{font-size:11px;color:var(--dim);margin-top:16px;}
.dots i{animation:blink 1.2s infinite;}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,100%{opacity:.2}50%{opacity:1}}

.modal{background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:20px;max-width:320px;width:100%;text-align:center;}
.modal-title{font-size:17px;font-weight:700;margin-bottom:10px;}
.modal-body{font-size:13px;color:var(--sub);line-height:1.65;margin-bottom:18px;}
.modal-actions{display:flex;gap:10px;}
.modal-actions .btn{flex:1;}

.toast{position:fixed;left:50%;bottom:18%;transform:translateX(-50%) translateY(10px);
  background:rgba(0,0,0,.88);color:#fff;padding:10px 20px;border-radius:24px;font-size:13px;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:99;max-width:80%;text-align:center;
  border:1px solid rgba(255,255,255,.1);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ================================================
   ★ 卡牌 —— 真扑克样式
   ================================================ */
.card{
  position:relative;width:58px;height:82px;border-radius:7px;flex-shrink:0;
  background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.45),0 0 1px rgba(0,0,0,.25);
  user-select:none;transition:transform .18s ease,box-shadow .18s ease;
  cursor:pointer;border:1px solid #ccc;
}
.card:hover{z-index:5;}
.card.sm{width:40px;height:56px;border-radius:5px;}

/* 正面 */
.card-face{position:absolute;inset:0;display:block;border-radius:inherit;overflow:hidden;}
.card-face .corner-tl{
  position:absolute;top:2px;left:3px;text-align:center;line-height:1;
  font-size:14px;font-weight:800;
}
.card-face .corner-tl .suit-sm{font-size:10px;margin-top:1px;line-height:1;}
.card-face .center-suit{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:26px;line-height:1;
}
.card-face .corner-br{
  position:absolute;bottom:2px;right:3px;text-align:center;line-height:1;
  font-size:14px;font-weight:800;transform:rotate(180deg);
}
.card-face .corner-br .suit-sm{font-size:10px;margin-top:1px;line-height:1;}

.card.sm .corner-tl,.card.sm .corner-br{font-size:10px;}
.card.sm .corner-tl .suit-sm,.card.sm .corner-br .suit-sm{font-size:8px;}
.card.sm .center-suit{font-size:18px;}

/* JOKER 特殊 */
.card-face .joker-center{position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);text-align:center;line-height:1;}
.card-face .joker-center .jk-big{font-size:20px;}
.card-face .joker-center .jk-txt{font-size:7px;color:#888;letter-spacing:1px;}

.r{color:#e23b4e!important;} .b{color:#1a1a1a!important;}

/* 背面 */
.card-back{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#1a3a8a,#2850c8);
  border-radius:inherit;overflow:hidden;
}
.card-back::before{
  content:'';position:absolute;inset:3px;border:1px solid rgba(255,215,100,.35);
  border-radius:4px;
  background:repeating-linear-gradient(
    45deg,transparent,transparent 4px,
    rgba(255,215,100,.06) 4px,rgba(255,215,100,.06) 8px
  );
}
.card-back-inner{text-align:center;color:rgba(255,215,100,.7);font-size:18px;position:relative;z-index:1;}
.card.back .card-face{display:none;}
.card.back .card-back{display:flex;}

.card.win{box-shadow:0 0 0 2px var(--gold),0 0 16px rgba(245,197,66,.55),0 4px 12px rgba(0,0,0,.3);}
.card.sel{transform:translateY(-16px) scale(1.07);z-index:20 !important;
  box-shadow:0 0 0 2px var(--gold),0 0 14px rgba(245,197,66,.65),0 10px 24px rgba(0,0,0,.4)}

/* ================================================
   ★ 牌桌游戏视图 —— 固定布局不溢出
   ================================================ */
.game-view{
  width:100%;height:100%;display:flex;flex-direction:column;
  margin:0 auto;position:relative;overflow:visible;
  background:radial-gradient(ellipse 130% 90% at 50% 45%,var(--felt-light) 0%,var(--felt) 45%,#083310 100%);
}

.gv-head{
  display:flex;align-items:center;gap:10px;padding:8px 12px;
  background:linear-gradient(180deg,rgba(10,14,26,.92),rgba(10,14,26,.65));
  border-bottom:1px solid var(--line);flex-shrink:0;z-index:5;
}
.gv-title{flex:1;text-align:center;font-weight:700;font-size:15px;color:var(--gold);min-width:0;}
.gv-right{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.gv-pav{width:22px;height:22px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--gold);flex-shrink:0;}
.gv-pname{font-size:12px;font-weight:600;color:var(--txt);max-width:78px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gv-beans{color:var(--gold);font-weight:700;font-size:13px;}

/* 自动开始滑块开关 */
.auto-toggle{display:inline-flex;align-items:center;gap:5px;cursor:pointer;flex-shrink:0;user-select:none;}
.at-txt{font-size:11px;color:var(--sub);line-height:1;}
.switch{position:relative;width:34px;height:18px;flex-shrink:0;display:inline-block;}
.switch input{position:absolute;opacity:0;width:0;height:0;margin:0;cursor:pointer;}
.slider{position:absolute;inset:0;background:var(--line);border-radius:999px;transition:background .2s ease;}
.slider::before{content:'';position:absolute;width:14px;height:14px;left:2px;top:2px;background:#fff;border-radius:50%;transition:transform .2s ease;box-shadow:0 1px 3px rgba(0,0,0,.4);}
.switch input:checked + .slider{background:var(--green);}
.switch input:checked + .slider::before{transform:translateX(16px);}
.gt-auto-tip{font-size:13px;color:var(--green);font-weight:600;padding:4px 2px;}

/* 游戏主体 —— 绝对定位三区域，彻底避免 flex 溢出 */
.gv-body{
  flex:1;position:relative;width:100%;overflow:visible;
}

/* 内层用绝对定位分三个区域，不用 flex row（避免溢出） */
.gv-body-inner{
  position:absolute;inset:0;display:block;
}

/* ====== 左侧对手列 —— 顶部紧凑，不撑满 ====== */
.gt-left-col{
  position:absolute;left:4px;top:6px;width:80px;
  display:flex;flex-direction:column;align-items:center;padding:0;gap:2px;
  z-index:2;
}
.gt-right-col{
  position:absolute;right:4px;top:6px;width:80px;
  display:flex;flex-direction:column;align-items:center;padding:0;gap:2px;
  z-index:2;
}

/* ====== 中间出牌区 ====== */
.gt-mid-col{
  position:absolute;left:88px;right:88px;top:0;bottom:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:4px 6px;min-width:0;z-index:1;
}

/* ---- 出牌桌面 ---- */
.table-desk{
  width:100%;max-width:300px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;min-height:120px;
}
.desk-play-slot{
  display:flex;gap:2px;justify-content:center;align-items:center;
  min-height:60px;padding:4px 6px;flex-wrap:wrap;
}
.desk-play-slot .card{width:42px;height:58px;box-shadow:0 2px 5px rgba(0,0,0,.5);}
.desk-play-slot .card.sm{width:34px;height:48px;}

.last-play-hint{
  font-size:11px;color:rgba(245,197,66,.75);text-align:center;padding:2px 0;
  text-shadow:0 1px 3px rgba(0,0,0,.8);white-space:nowrap;
}

/* 信息条 */
.gt-info-bar{
  width:100%;text-align:center;padding:3px 0 2px;flex-shrink:0;
  font-size:12px;color:rgba(245,197,66,.85);font-weight:600;
  text-shadow:0 1px 3px rgba(0,0,0,.7);
}
.infobar{text-align:center;font-size:11px;color:var(--sub);padding:3px;white-space:nowrap;}
.pot{text-align:center;color:var(--gold);font-weight:700;font-size:12px;padding:2px;}

/* 底牌展示（叫地主后给用户看 2 秒再并入手牌） */
.bottom-reveal{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  margin:6px 0;animation:fade .2s ease;
}
.bottom-label{font-size:12px;color:var(--gold);font-weight:700;text-align:center;
  text-shadow:0 1px 3px rgba(0,0,0,.85);}
.bottom-cards{display:flex;gap:4px;justify-content:center;}
.bottom-cards .card{width:40px;height:56px;box-shadow:0 2px 6px rgba(0,0,0,.5);}
.bottom-cards .card .corner-tl,.bottom-cards .card .corner-br{font-size:11px;}
.bottom-cards .card .corner-tl .suit-sm,.bottom-cards .card .corner-br .suit-sm{font-size:8px;}
.bottom-cards .card .center-suit{font-size:19px;}

/* 公共牌 */
.community-row{
  display:flex;gap:3px;justify-content:center;padding:4px 0 2px;
  flex-wrap:wrap;
}
.community-row .card{width:44px;height:62px;}

/* ====== 底部玩家区 —— 不裁切上浮的牌 ====== */
.gt-player-zone{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(180deg,transparent,rgba(6,10,20,.7) 35%,rgba(6,10,20,.92) 95%);
  border-top:1px solid rgba(255,255,255,.05);
  padding:4px 6px 8px;z-index:10;overflow:visible;
}

/* 手牌横排 —— 默认允许换行，窄屏自动双行 */
.hand-row{
  display:flex;justify-content:center;align-items:flex-end;
  gap:3px;
  padding:2px 8px;overflow:visible;
  flex-wrap:wrap; /* 空间不够自动换行 */
  max-width:100%;
}
.hand-row::-webkit-scrollbar{display:none;}
.hand-row .card{
  transition:transform .18s ease, box-shadow .18s ease;
}
.hand-row .card.sel{
  transform:translateY(-16px) scale(1.07);
  z-index:20 !important;
}
.hand-row .card:hover:not(.sel){
  transform:translateY(-5px);
  z-index:8;
}

/* compact 小牌模式（斗地主多张）——也允许换行 */
.hand-row.compact{gap:1px;}
.hand-row.compact .card{
  width:44px;height:62px;
}
.hand-row.compact .card .corner-tl,.hand-row.compact .card .corner-br{font-size:12px;}
.hand-row.compact .card .corner-tl .suit-sm,.hand-row.compact .card .corner-br .suit-sm{font-size:9px;}
.hand-row.compact .card .center-suit{font-size:20px;}

/* 操作按钮栏 */
.gt-actions{
  display:flex;flex-wrap:wrap;gap:6px;padding:4px 8px 2px;
  justify-content:center;
}
.gt-actions .btn{flex:1;min-width:60px;max-width:140px;padding:7px 10px;font-size:12px;}

/* ====== 托管（自动代打） ====== */
.host-btn{
  font-size:11px;padding:4px 10px;border-radius:8px;cursor:pointer;
  background:rgba(255,255,255,.06);color:var(--sub);
  border:1px solid var(--line);transition:all .15s;
}
.host-btn:hover{color:var(--txt);border-color:var(--accent);}
.host-btn.on{
  background:linear-gradient(135deg,#16a085,#1abc9c);color:#fff;
  border-color:#1abc9c;box-shadow:0 0 10px rgba(26,160,133,.5);
}
.hosting-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;font-size:12px;color:#1abc9c;
  background:rgba(26,160,133,.12);border:1px dashed rgba(26,160,133,.5);
  border-radius:8px;
}
.hosting-tag::before{content:'';width:7px;height:7px;border-radius:50%;background:#1abc9c;animation:hostpulse 1s infinite;margin-right:2px;}
@keyframes hostpulse{0%{opacity:.3}50%{opacity:1}100%{opacity:.3}}

/* ====== 对手座位卡片（彩色首字母头像） ====== */
.seat-card{
  width:76px;background:linear-gradient(160deg,rgba(26,34,53,.95),rgba(33,42,69,.9));
  border:1px solid var(--line);border-radius:10px;padding:5px 3px;
  text-align:center;
}
.seat-card.me{border-color:rgba(245,197,66,.45);background:linear-gradient(160deg,rgba(40,32,10,.92),rgba(55,42,15,.87))}
.seat-card.dead{opacity:.45;}

/* 头像：纯色圆圈+首字母，不要emoji */
.seat-card .av{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;color:#fff;margin:0 auto 2px;
  border:2px solid rgba(255,255,255,.15);
  /* 默认背景色会被 JS 动态设置 */
}
.seat-card .sn{font-size:10px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.seat-card .smeta{font-size:9px;color:var(--sub);}
.seat-card .sact{font-size:9px;color:var(--gold);margin-top:1px;}

/* ★ 对手手牌背面 —— 紧凑竖排堆叠（最多显示4张+数字） */
.opponent-hand-vertical{
  display:flex;flex-direction:column;align-items:center;
  margin-top:2px;padding:1px 0;
  position:relative;
}
.opponent-hand-vertical .card{
  width:28px;height:40px;border-radius:4px;
  margin-top:-22px;/* 重叠效果 */
}
.opponent-hand-vertical .card:first-child{margin-top:0;}
.opponent-hand-vertical .card-back::before{
  inset:2px;border-radius:3px;
}
.opponent-hand-count{
  font-size:10px;color:var(--sub);margin-top:1px;font-weight:600;
}

/* ====== 出牌倒计时 ====== */
.timer-bar{
  width:100%;height:3px;background:rgba(255,255,255,.08);border-radius:2px;
  overflow:hidden;margin-top:2px;
}
.timer-bar-fill{
  height:100%;background:linear-gradient(90deg,var(--green),var(--gold),var(--red));
  border-radius:2px;transition:width linear;width:100%;
}
.timer-countdown{
  display:inline-block;min-width:22px;text-align:center;
  font-size:12px;font-weight:800;color:var(--red);
  background:rgba(0,0,0,.5);border-radius:6px;padding:1px 5px;
  line-height:1.4;
}

/* 真人回合 20s 倒计时提示浮层（纯提示，不强制出手） */
.human-turn-timer{
  position:fixed;left:50%;top:60px;bottom:auto;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;
  padding:5px 12px;border-radius:999px;
  background:rgba(15,18,28,.9);border:1px solid rgba(245,197,66,.5);
  box-shadow:0 6px 20px rgba(0,0,0,.45);
  z-index:60;font-size:12px;color:var(--gold);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  pointer-events:none;
}
.htt-label{font-weight:700;letter-spacing:.5px;}
.htt-count{
  font-weight:800;font-size:15px;color:#fff;min-width:36px;text-align:center;
  background:rgba(245,197,66,.18);border-radius:8px;padding:2px 6px;
}
/* 时间耗尽（不自动托管，仅提示） */
.human-turn-timer.expired{
  border-color:rgba(231,76,60,.7);color:#e74c3c;
  box-shadow:0 0 14px rgba(231,76,60,.35);
}
.human-turn-timer.expired .htt-label{color:#e74c3c;}
.human-turn-timer.expired .htt-count{color:#fff;background:rgba(231,76,60,.25);}

/* 排行榜 */
.lb{background:var(--panel);border:1px solid var(--line);border-radius:18px;width:100%;max-width:420px;
  max-height:80vh;display:flex;flex-direction:column;overflow:hidden;}
.lb-head{padding:16px;text-align:center;font-weight:700;font-size:17px;border-bottom:1px solid var(--line);}
.lb-list{overflow-y:auto;padding:8px 12px;flex:1;}
.lb-row{display:flex;align-items:center;gap:10px;padding:9px 8px;border-bottom:1px solid rgba(255,255,255,.04);}
.lb-rank{width:28px;text-align:center;font-weight:700;color:var(--dim);}
.lb-rank.top{color:var(--gold);}
.lb-name{min-width:0;flex:1;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lb-beans{color:var(--gold);font-weight:700;font-size:13px;}
.lb-row.me{background:rgba(245,197,66,.1);border-radius:10px;}
.lb-row.me .lb-name{color:var(--gold);}
.lb-me{text-align:center;padding:12px;font-size:12px;color:var(--sub);border-top:1px solid var(--line);}
.lb-bot{font-size:10px;color:var(--dim);}

.chips{display:flex;gap:6px;justify-content:center;padding:4px;flex-wrap:wrap;}
.chip{padding:5px 14px;border-radius:16px;background:var(--panel2);border:1px solid var(--line);
  font-size:12px;color:var(--sub);transition:all .12s;}
.chip.on{background:var(--gold);color:#3a2c00;border-color:var(--gold);font-weight:700;}
.think{font-size:11px;color:var(--blue);animation:pulse 1.2s infinite;}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}

/* 出牌飞行动画 */
@keyframes flyToTable{
  0%{transform:scale(1) translateY(0);opacity:1;}
  100%{transform:scale(1) translateY(-60px);opacity:1;}
}
.card-flying{animation:flyToTable .35s ease-out forwards;pointer-events:none;}

/* ================================================
   ★ 窄屏响应式 —— 手牌自动折双行 + 全局收窄
   ================================================ */
@media (max-width: 700px){
  /* 手牌进一步缩小 */
  .hand-row{gap:2px 2px;padding:2px 4px;}
  .hand-row .card{
    width:46px;height:64px;border-radius:6px;
  }
  .hand-row .card .corner-tl,
  .hand-row .card .corner-br{font-size:12px;}
  .hand-row .card .corner-tl .suit-sm,
  .hand-row .card .corner-br .suit-sm{font-size:9px;}
  .hand-row .card .center-suit{font-size:21px;}
  .hand-row .card .card-back-inner{font-size:14px;}

  /* 斗地主17张：更紧凑，两行排下 */
  .hand-row.compact{gap:1px 1px;}
  .hand-row.compact .card{width:36px;height:50px;border-radius:4px;}
  .hand-row.compact .card .corner-tl,
  .hand-row.compact .card .corner-br{font-size:10px;}
  .hand-row.compact .card .corner-tl .suit-sm,
  .hand-row.compact .card .corner-br .suit-sm{font-size:7px;}
  .hand-row.compact .card .center-suit{font-size:15px;}
  .hand-row.compact .card .card-back-inner{font-size:11px;}

  /* 桌面出牌区：缩小卡牌，留出空间 */
  .desk-play-slot .card{width:36px;height:50px;}
  .desk-play-slot .card .corner-tl,
  .desk-play-slot .card .corner-br{font-size:11px;}
  .desk-play-slot .card .center-suit{font-size:18px;}
  .community-row .card{width:38px;height:53px;}

  /* 底牌展示缩小 */
  .bottom-cards .card{width:32px;height:44px;}
  .bottom-cards .card .corner-tl,.bottom-cards .card .corner-br{font-size:9px;}
  .bottom-cards .card .center-suit{font-size:15px;}

  /* 左右对手列收窄，给中间桌面让位 */
  .gt-left-col,.gt-right-col{width:58px;}
  .seat-card{width:54px;padding:4px 2px;}
  .gt-mid-col{left:62px;right:62px;}

  /* 操作按钮更紧凑 */
  .gt-actions .btn{padding:7px 8px;font-size:12px;min-width:50px;}
  .gv-head{padding:6px 10px;}
  .gv-title{font-size:14px;}
  .at-txt{display:none;}
  .switch{width:30px;height:16px;}
  .switch input:checked + .slider::before{transform:translateX(14px);}
  .slider::before{width:12px;height:12px;top:2px;}
  .gv-right{gap:4px;}
  .gv-pname{font-size:11px;max-width:56px;}
  .gv-pav{width:20px;height:20px;font-size:11px;}

  /* 大厅单列 */
  .hall{grid-template-columns:1fr;max-width:360px;}
  .game-card{padding:14px 12px;min-height:108px;}
  .gc-icon{font-size:30px;}
  .gc-name{font-size:15px;margin-top:8px;}
  .gc-desc{font-size:10px;margin-top:6px;min-height:28px;}

  /* 顶栏缩小 */
  .topbar{padding:8px 10px;gap:8px;}
  .beans{padding:4px 10px;font-size:13px;}
  .me-name{font-size:13px;}
  .avatar{width:34px;height:34px;font-size:14px;}
}