/* ============================================================
   欢乐风皮肤 (huanle skin) · 原创街机麻将视觉
   叠在所有样式之后，可通过删除 index.html 中本文件的 <link> 一键回退。
   不含任何第三方（含腾讯欢乐麻将）美术、吉祥物、商标或品牌素材。
   ============================================================ */

/* ---------- 全局底色：青蓝调，呼应欢乐风青呢 ---------- */
body{
  background:
    radial-gradient(ellipse at 50% -10%, #1f6a74 0, transparent 55%),
    radial-gradient(ellipse at 10% 110%, #123a44 0, transparent 50%),
    radial-gradient(ellipse at 95% 95%, #0f2f3a 0, transparent 55%),
    #091d24;
}

/* ---------- 牌桌：青蓝呢 + 木纹外框 + 强聚光 ---------- */
.table{
  border:12px solid #5a3a21 !important;
  outline:2px solid #e7c98c6b !important;
  border-radius:38px !important;
  background:
    radial-gradient(ellipse at 50% 36%, #2f98a6 0, #1f7f8e 40%, #156876 72%, #0e4e5a 100%) !important;
  box-shadow:
    0 30px 70px #0007,
    inset 0 0 0 3px #d8b06e55,
    inset 0 0 0 11px #0a3a4444,
    inset 0 0 130px #042a3388,
    inset 0 6px 24px #0a525f66 !important;
}
.table:before{
  inset:16px !important;
  border:1.5px solid #f0d08f3d !important;
  border-radius:52px !important;
  box-shadow:inset 0 0 40px #0a2a3326 !important;
}
.table:after{ color:#ffe7b3 !important; opacity:.4 !important; }
.table-watermark{ color:#eafcff66 !important; }

/* 木纹外框的纹理感 */
.table{position:relative}

/* ---------- 牌桌中央剩余张数：做成牌墙筹码感 ---------- */
.center,#wall{
  color:#fff4d8 !important;
}
#wall{
  display:inline-block;
  padding:7px 16px;
  border-radius:999px;
  background:linear-gradient(180deg,#0e4535cc,#0a3326cc);
  border:1px solid #ffdca033;
  box-shadow:inset 0 1px 0 #ffffff1f, 0 4px 14px #0004;
  font-weight:600;letter-spacing:1px;
  color:#ffe9bd !important;
}

/* ---------- 座位头像：圆形琉璃牌 + 名牌 ---------- */
.seat-card{ position:relative; }
.seat-card .avatar{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;
  font-family:"Mahjong Brush",KaiTi,STKaiti,serif;
  font-size:26px;font-weight:600;
  color:#4a3410;
  background:
    radial-gradient(circle at 35% 28%, #fff7e2 0, #f2dca6 42%, #d8b872 100%);
  border:2px solid #fff3d4;
  box-shadow:
    0 4px 12px #04201788,
    inset 0 2px 4px #fff,
    inset 0 -3px 6px #a9854c66;
}
.seat-name{
  color:#f3ecd6 !important;
  font-weight:600;letter-spacing:1px;
}
.seat-score{
  color:#ffe09a !important;
  font-weight:700;
}
.seat-score small{ color:#cbb88b !important; }

/* 当前出牌座位：金色呼吸光圈（当前出牌座位类名为 .seat.active） */
.seat.active .seat-card .avatar{
  box-shadow:
    0 0 0 3px #ffd77a,
    0 0 18px 4px #ffcf6fcc,
    0 4px 12px #042017aa,
    inset 0 2px 4px #fff;
  animation:huanle-pulse 1.1s ease-in-out infinite;
}
@keyframes huanle-pulse{
  0%,100%{ box-shadow:0 0 0 3px #ffd77a,0 0 14px 3px #ffcf6f99,0 4px 12px #042017aa,inset 0 2px 4px #fff; }
  50%{ box-shadow:0 0 0 4px #ffe49a,0 0 26px 8px #ffcf6fdd,0 4px 12px #042017aa,inset 0 2px 4px #fff; }
}

/* turn-dot：改成亮点 */
.turn-dot{ background:#ffd77a !important; box-shadow:0 0 8px #ffcf6f; }

/* ---------- 手牌：更大、选中明显弹起 ---------- */
.hand .tile{
  transition:transform .13s cubic-bezier(.34,1.56,.64,1), box-shadow .13s, outline-color .13s;
  will-change:transform;
}
.hand .tile:not(:disabled):hover{
  transform:translateY(-5px);
}
.hand .tile.selected,
.hand .tile.selected:not(:disabled):hover{
  transform:translateY(-16px) !important;
  outline:3px solid #ffd77a !important;
  box-shadow:
    1px 3px 0 #287032,
    2px 8px 0 #174e26,
    3px 16px 18px #04251daa,
    0 0 0 4px #ffcf6f99 !important;
  z-index:6;
}
/* 新摸到的牌：轻微发光提示 */
.hand .tile.drawn-tile{
  box-shadow:
    1px 3px 0 #2b7437, 2px 5px 0 #1e572a, 3px 8px 7px #05271f66,
    0 0 12px 2px #ffd77a77 !important;
}
.drawn-label{
  background:linear-gradient(180deg,#ffe6a6,#e9c069) !important;
  color:#4a3410 !important;font-weight:700 !important;
}

/* ---------- 碰杠胡过：大圆金边按钮 ---------- */
#actions{ gap:12px !important; align-items:center !important; }
#actions button{
  flex:0 0 auto !important;
  width:62px;height:62px;min-width:62px;min-height:62px;
  padding:0 !important;
  border-radius:50% !important;
  font-size:21px !important;font-weight:800 !important;letter-spacing:2px !important;
  color:#5a3c10 !important;
  background:radial-gradient(circle at 36% 30%, #fff6da 0, #ffdf9c 38%, #e8b45e 100%) !important;
  border:2px solid #fff2cf !important;
  box-shadow:
    0 5px 0 #a87b3c,
    0 9px 16px #041f1555,
    inset 0 2px 4px #fff,
    inset 0 -4px 8px #c6933f55 !important;
  text-shadow:0 1px 0 #fff6;
}
#actions button:active:not(:disabled){
  transform:translateY(4px) !important;
  box-shadow:0 1px 0 #a87b3c,0 4px 10px #041f1544,inset 0 2px 4px #fff !important;
}
/* 胡：红金强调 */
#actions button.gold{
  color:#fff !important;
  background:radial-gradient(circle at 36% 30%, #ff9a6e 0, #e8472f 45%, #b41d1a 100%) !important;
  border:2px solid #ffd9a0 !important;
  box-shadow:
    0 5px 0 #7d1412,
    0 9px 18px #041f1566,
    inset 0 2px 5px #ffd0b8,
    inset 0 -4px 8px #7d141266 !important;
  text-shadow:0 1px 2px #5a0c0b;
  animation:huanle-hu 1s ease-in-out infinite;
}
@keyframes huanle-hu{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.07); }
}
#actions button:disabled{
  background:radial-gradient(circle at 36% 30%, #3a5546 0, #27403300 70%), #22382c !important;
  color:#6f8678 !important;
  border-color:#3a5546 !important;
  box-shadow:0 3px 0 #1b2d23, inset 0 1px 2px #ffffff10 !important;
  text-shadow:none;
}

/* 操作区底托：让大圆按钮居中浮在手牌上方的感觉 */
.operation-dock{
  background:linear-gradient(180deg,#0f3528ee,#0b2a20ee) !important;
  border:1px solid #ffdca022 !important;
  box-shadow:0 -6px 24px #04150f55 !important;
}
.selection-summary strong{ color:#f3ecd6 !important; }
.selection-summary span{ color:#9fb6a6 !important; }

/* 提示按钮也暖化 */
.hint-button{
  background:linear-gradient(180deg,#1c4a39,#143529) !important;
}

/* ---------- 弃牌池/门前：格线更清晰 ---------- */
.self-discard-area,.discard-layout .center{
  border-color:#ffdca033 !important;
}
.river .tile{ filter:saturate(1.05); }

/* ---------- 顶部标题：更喜庆 ---------- */
.room-title span{ color:#fff2d4 !important; }
.room-title small{ color:#bdd0c2 !important; }
.table-tag{ color:#d9c79a !important; }
.round-label b{ color:#ffe09a !important; }

/* ============================================================
   细化：倒计时环 / 庄家角标 / 出牌动画 / 对手立体牌堆 / 横屏
   ============================================================ */

/* ---------- 头像外圈倒计时环 ---------- */
.seat-card .avatar{position:relative;overflow:visible}
.huanle-ring{
  position:absolute;inset:-6px;border-radius:50%;
  opacity:0;transition:opacity .2s;pointer-events:none;z-index:-1;
  /* 环形：遮罩挖空中心 */
  -webkit-mask:radial-gradient(circle, transparent 0 50%, #000 52% 100%);
          mask:radial-gradient(circle, transparent 0 50%, #000 52% 100%);
  filter:drop-shadow(0 0 5px #ffcf6f88);
}

/* ---------- 庄家“庄”红章 ---------- */
.huanle-dealer{
  position:absolute;top:-6px;right:-6px;z-index:3;
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:"Mahjong Brush",KaiTi,STKaiti,serif;font-weight:800;font-size:14px;
  color:#fff6e0;
  background:radial-gradient(circle at 36% 30%, #ff7a52 0, #d8321f 55%, #a3160f 100%);
  border:1.5px solid #ffe3b0;
  box-shadow:0 2px 6px #04201788, inset 0 1px 2px #ffd0b8;
  text-shadow:0 1px 1px #5a0c0b;
}

/* ---------- 出牌飞入牌池 / 摸入高亮 ---------- */
@keyframes huanle-fly-in{
  0%{ transform:translateY(-26px) scale(1.25); opacity:0; }
  55%{ transform:translateY(3px) scale(1.04); opacity:1; }
  100%{ transform:translateY(0) scale(1); opacity:1; }
}
.tile.huanle-fly-in{ animation:huanle-fly-in .34s cubic-bezier(.3,1.3,.6,1) both; }
/* 牌池最新一张：金色脉冲一下 */
.self-discard-tiles .tile:last-child,
.opponent-discard-tiles .tile:last-child{
  outline:2px solid #ffd77a !important;outline-offset:1px;
}

/* ---------- 对手牌背：更立体的牌堆 ---------- */
.back{
  background:
    linear-gradient(105deg,#b7dd9480,#fff3 10%,transparent 22%),
    linear-gradient(100deg,#13771c 0,#34ad2b 20%,#2fa526 66%,#126417 100%) !important;
  border:1px solid #7dc45a !important;
  border-top:2px solid #a6e085 !important;
  border-right:3px solid #155a22 !important;
  border-bottom:4px solid #0f4a1c !important;
  border-radius:4px !important;
  box-shadow:1px 2px 0 #0d3418, 2px 4px 4px #052c2155, inset 0 1px 1px #ffffff2e !important;
}
/* 顶部玩家（北）横排牌堆：轻微叠错 */
.north .backs{display:flex;justify-content:center;gap:2px}
.north .backs .back{width:15px;height:21px}
/* 左右玩家竖排牌堆 */
.west .backs,.east .backs{display:flex;flex-direction:column;gap:2px;align-items:center}
.west .backs .back,.east .backs .back{width:21px;height:15px}

/* ============================================================
   手机横屏（横板）：欢乐麻将式铺满宽屏
   现有 CSS 已含 (orientation:landscape)(max-height:599px) 布局，
   这里只做皮肤层的尺寸/位置微调，使大圆按钮与头像在横屏下不溢出。
   ============================================================ */
@media (orientation:landscape) and (max-height:599px){
  .seat-card .avatar{width:44px;height:44px;font-size:20px}
  .huanle-dealer{width:18px;height:18px;font-size:11px;top:-4px;right:-4px}
  .huanle-ring{inset:-4px}
  #actions{gap:8px !important}
  #actions button{width:48px;height:48px;min-width:48px;min-height:48px;font-size:17px !important}
  .operation-dock{padding:8px !important}
}

/* 更矮的横屏（小屏手机）再紧凑一点 */
@media (orientation:landscape) and (max-height:430px){
  .seat-card .avatar{width:38px;height:38px;font-size:17px}
  #actions button{width:44px;height:44px;min-width:44px;min-height:44px;font-size:16px !important}
}

/* ---------- 竖屏提示：请旋转到横屏（浏览器端；APK 已锁横屏不会出现） ---------- */
#huanle-rotate{
  position:fixed;inset:0;z-index:9998;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:radial-gradient(ellipse at 50% 35%,#15493a,#0a1f1a);
  color:#f3ecd6;text-align:center;padding:30px;
}
#huanle-rotate .ph{
  width:72px;height:120px;border:3px solid #ffd77a;border-radius:14px;position:relative;
  animation:huanle-rotate-hint 1.8s ease-in-out infinite;
}
#huanle-rotate .ph:after{content:"";position:absolute;left:50%;bottom:7px;width:22px;height:3px;border-radius:3px;background:#ffd77a;transform:translateX(-50%)}
#huanle-rotate strong{font-size:19px;letter-spacing:2px;color:#ffe09a}
#huanle-rotate span{font-size:13px;color:#bdd0c2}
@keyframes huanle-rotate-hint{
  0%,20%{ transform:rotate(0); }
  60%,100%{ transform:rotate(-90deg); }
}
@media (orientation:portrait) and (max-width:860px){
  #huanle-rotate{display:flex}
}

/* ============================================================
   中央罗盘（原创）：东南西北风位 + 中心余牌/倒计时
   ============================================================ */
.discard-layout .center{overflow:visible !important;display:flex;align-items:center;justify-content:center}
.huanle-compass{
  position:relative;width:92px;height:92px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 50% 42%, #10323b 0, #0a2630 60%, #061c24 100%);
  border:2px solid #ffffff22;
  box-shadow:
    0 6px 18px #04171d99,
    inset 0 2px 6px #ffffff14,
    inset 0 -4px 10px #00000055,
    0 0 0 4px #0a333d55;
}
/* 外圈分色（呼应欢乐风蓝绿分区） */
.huanle-compass:before{
  content:"";position:absolute;inset:-6px;border-radius:50%;z-index:-1;
  background:conic-gradient(#2f98a6 0 90deg,#1f7f8e 90deg 180deg,#2f98a6 180deg 270deg,#1f7f8e 270deg 360deg);
  -webkit-mask:radial-gradient(circle,transparent 0 46%,#000 48% 100%);
          mask:radial-gradient(circle,transparent 0 46%,#000 48% 100%);
  opacity:.5;
}
.huanle-compass .wd{
  position:absolute;font-family:"Mahjong Brush",KaiTi,STKaiti,serif;
  font-size:13px;color:#bfe0e6;opacity:.65;line-height:1;
}
.huanle-compass .wd.n{top:5px;left:50%;transform:translateX(-50%)}
.huanle-compass .wd.s{bottom:5px;left:50%;transform:translateX(-50%)}
.huanle-compass .wd.w{left:6px;top:50%;transform:translateY(-50%)}
.huanle-compass .wd.e{right:6px;top:50%;transform:translateY(-50%)}
.huanle-compass .wd.cur{color:#ffe09a;opacity:1;text-shadow:0 0 8px #ffcf6f}
#wall{
  position:relative;z-index:1;
  display:flex !important;flex-direction:column;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;
  padding:0 !important;background:transparent !important;border:0 !important;box-shadow:none !important;
  font-size:11px !important;line-height:1.2;color:#eafcff !important;letter-spacing:0 !important;
}

/* ============================================================
   动作按钮分色：碰/杠 金，过 蓝，胡 红
   ============================================================ */
#actions button.huanle-pass{
  color:#eef6ff !important;
  background:radial-gradient(circle at 36% 30%, #bfe6ff 0, #5aa7d8 42%, #2e6fa8 100%) !important;
  border:2px solid #dcefff !important;
  box-shadow:
    0 5px 0 #214f78,
    0 9px 16px #041f2a55,
    inset 0 2px 4px #ffffffcc,
    inset 0 -4px 8px #1d4f7a66 !important;
  text-shadow:0 1px 2px #113455;
}
#actions button.huanle-pass:active:not(:disabled){
  transform:translateY(4px) !important;
  box-shadow:0 1px 0 #214f78,0 4px 10px #041f2a44,inset 0 2px 4px #fff !important;
}

/* ---------- 左上角混儿指示牌：更透明，避免盖住牌面 ---------- */
/* 混儿指示牌：牌正常显示，只把“混”角标做半透明 */
#wild{opacity:1 !important}
#wild .tile.joker:after,#wild .joker:after{opacity:.4 !important}

/* ---------- 胡牌结算：胡的那张单独隔开 + 高亮 ---------- */
.winning-all{align-items:flex-end}
.winning-sep{display:inline-block;width:20px}
.winning-last{position:relative;display:inline-block}
.winning-last .tile{outline:2px solid #ffd77a;outline-offset:1px;box-shadow:0 0 10px 2px #ffcf6f88,1px 3px 0 #287032,2px 5px 0 #174e26 !important;transform:translateY(-3px)}
.winning-last:after{
  content:attr(data-hu);position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  font-size:10px;font-weight:700;color:#4a3410;letter-spacing:1px;
  background:linear-gradient(180deg,#ffe6a6,#e9c069);border-radius:4px;padding:1px 6px;white-space:nowrap;
  box-shadow:0 1px 3px #06251c66;
}

/* ============================================================
   整理牌开关：做成明显的药丸控件（自动理牌 / 整理一次）
   ============================================================ */
.hand-tools{
  gap:10px !important;
  padding:5px 10px;
  border-radius:999px;
  background:linear-gradient(180deg,#0f3a44cc,#0b2b33cc);
  border:1px solid #ffdca033;
  box-shadow:inset 0 1px 0 #ffffff14, 0 3px 10px #04171d55;
}
.hand-tools>span{color:#cfe6ea !important;font-size:11px !important;opacity:.95}
/* 自动理牌开关：放大、描金，开启时更明显 */
.arrange-toggle{color:#f3ecd6 !important;font-weight:600;font-size:12px !important;gap:7px !important}
.arrange-toggle i{
  width:40px !important;height:22px !important;border-radius:999px !important;
  background:#0c2730 !important;border:1px solid #ffffff2e !important;
}
.arrange-toggle i:after{
  width:16px !important;height:16px !important;left:3px !important;top:2px !important;
  background:#d9e4e2 !important;box-shadow:0 1px 3px #0006;
}
.arrange-toggle input:checked+i{
  background:linear-gradient(180deg,#ffd77a,#e8b45e) !important;border-color:#fff2cf !important;
}
.arrange-toggle input:checked+i:after{
  transform:translateX(18px) !important;background:#5a3c10 !important;
}
/* “整理一次”按钮：清晰的小金按钮 */
.hand-tools button{
  font-size:11px !important;font-weight:700 !important;letter-spacing:1px;
  padding:5px 12px !important;border-radius:999px !important;
  color:#5a3c10 !important;
  background:linear-gradient(180deg,#ffe6a6,#e8b45e) !important;
  border:1px solid #fff2cf !important;
  box-shadow:0 2px 0 #a87b3c, 0 3px 8px #04171d44 !important;
}
.hand-tools button:active{transform:translateY(2px);box-shadow:0 1px 0 #a87b3c !important}

/* 横屏下也保证可见、够大可点 */
@media (orientation:landscape) and (max-height:599px){
  .hand-tools{padding:4px 8px;gap:8px !important}
  .arrange-toggle i{width:36px !important;height:20px !important}
  .arrange-toggle i:after{width:14px !important;height:14px !important}
  .arrange-toggle input:checked+i:after{transform:translateX(16px) !important}
  .hand-tools button{padding:4px 10px !important}
}

/* ============================================================
   更像真实麻将桌：码牌区立体牌墙 + 出牌区平铺去框
   ============================================================ */

/* ---------- 码牌区：对家手牌做成立体站立的牌（白顶+绿身+厚度） ---------- */
.backs .back{
  position:relative;
  border:0 !important;border-radius:2px 2px 3px 3px !important;
  background:linear-gradient(100deg,#15791e 0,#36b22d 22%,#2ea028 70%,#0f5a17 100%) !important;
  box-shadow:0 2px 0 #0d4a18, 0 3px 3px #052c2155, inset 0 1px 1px #ffffff3a !important;
}
/* 象牙白顶面：顶/北家在上沿 */
.backs .back::before{
  content:"";position:absolute;left:-1px;right:-1px;top:-3px;height:4px;
  border-radius:2px 2px 0 0;
  background:linear-gradient(180deg,#ffffff,#e6e9dc);
  box-shadow:0 -1px 1px #ffffff66;
}
/* 顶部玩家（北）：横排站立，牌墙紧凑 */
.north .backs{gap:1px !important}
.north .backs .back{width:14px !important;height:20px !important}
/* 左右玩家（西/东）：牌横躺堆叠，白顶朝内侧 */
.west .backs .back,.east .backs .back{width:22px !important;height:14px !important}
.west .backs .back::before{left:auto;right:-3px;top:-1px;bottom:-1px;width:4px;height:auto;border-radius:0 2px 2px 0;background:linear-gradient(90deg,#e6e9dc,#fff)}
.east .backs .back::before{right:auto;left:-3px;top:-1px;bottom:-1px;width:4px;height:auto;border-radius:2px 0 0 2px;background:linear-gradient(270deg,#e6e9dc,#fff)}
.west .backs,.east .backs{gap:1px !important}

/* ---------- 出牌区：去掉方框，弃牌像摊在桌面上 ---------- */
.discard-layout .opponent-discard,
.discard-layout .self-discard-area{
  background:transparent !important;border:0 !important;box-shadow:none !important;padding:2px !important;
}
.opponent-discard>small,.self-discard-label{
  color:#dfeef1 !important;opacity:.45 !important;font-weight:400 !important;
}
/* 摊在桌面的牌：扁平、带一点落在呢面的阴影 */
.opponent-discard-tiles .tile,.self-discard-tiles .tile{
  border-bottom-width:3px !important;
  box-shadow:0 2px 3px #04231866, 1px 2px 0 #2e7a37 !important;
  filter:saturate(1.04);
}
/* 最新打出的一张：轻微抬起+金边，像刚丢出 */
.opponent-discard-tiles .tile:last-child,.self-discard-tiles .tile:last-child{
  outline:2px solid #ffd77a !important;outline-offset:1px;
  transform:translateY(-1px);
  box-shadow:0 3px 5px #042318aa, 0 0 8px #ffcf6f55 !important;
}

/* ============================================================
   摸牌/丢牌动作动画（原创）
   ============================================================ */
/* 丢牌：甩出去——带旋转、从上方落入牌池 */
@keyframes huanle-fly-in{
  0%{ transform:translateY(-30px) rotate(-14deg) scale(1.28); opacity:0; }
  55%{ transform:translateY(4px) rotate(4deg) scale(1.05); opacity:1; }
  78%{ transform:translateY(-2px) rotate(-2deg) scale(1); }
  100%{ transform:translateY(0) rotate(0) scale(1); opacity:1; }
}
.tile.huanle-fly-in{ animation:huanle-fly-in .36s cubic-bezier(.3,1.25,.55,1) both; transform-origin:50% 100%; }

/* 摸牌：抓起——从下方弹起入手，略放大再落定 */
@keyframes huanle-grab{
  0%{ transform:translateY(14px) scale(.78); opacity:.25; }
  55%{ transform:translateY(-10px) scale(1.14); opacity:1; }
  80%{ transform:translateY(-3px) scale(1.02); }
  100%{ transform:translateY(0) scale(1); opacity:1; }
}
.hand .tile.huanle-grab{ animation:huanle-grab .4s cubic-bezier(.3,1.5,.55,1) both; z-index:7; }

/* ---------- 自动理牌常开：隐藏理牌控件 ---------- */
.hand-tools{display:none !important}

/* ---------- 原创简约手势图形 ---------- */
.huanle-hand{
  position:fixed;z-index:9990;pointer-events:none;opacity:0;
  filter:drop-shadow(0 4px 5px #00000055);
  transform-origin:50% 92%;
}
@keyframes huanle-hand-draw{
  0%{opacity:0;transform:translateY(26px) scale(.9)}
  32%{opacity:1;transform:translateY(0) scale(1)}
  55%{transform:translateY(-5px) scale(1.05)}
  74%{opacity:1;transform:translateY(2px) scale(1)}
  100%{opacity:0;transform:translateY(22px) scale(.92)}
}
.huanle-hand.draw{animation:huanle-hand-draw .55s ease both}
@keyframes huanle-hand-toss{
  0%{opacity:0;transform:translateY(14px) rotate(8deg) scale(.95)}
  34%{opacity:1;transform:translateY(0) rotate(0) scale(1)}
  68%{transform:translateY(-7px) rotate(-16deg) scale(1.04)}
  100%{opacity:0;transform:translateY(-16px) rotate(-24deg) scale(.95)}
}
.huanle-hand.toss{animation:huanle-hand-toss .46s ease both}

/* ---------- 出牌区：所有弃牌全部亮出（不裁剪、不滚动、自动换行平铺） ---------- */
.opponent-discard-tiles,.self-discard-tiles{
  max-height:none !important;
  overflow:visible !important;
  flex-wrap:wrap !important;
  align-content:flex-start !important;
}
.discard-layout .opponent-discard,
.discard-layout .self-discard-area{
  overflow:visible !important;
  min-height:0 !important;
}
.discard-layout{overflow:visible !important}

/* ============================================================
   自动麻将桌质感：牌区凹陷框 + 起牌动画
   ============================================================ */
/* 中央牌区凹陷围框（像麻将机牌池） */
.huanle-frame{
  position:absolute;inset:4.5% 3.5%;z-index:0;pointer-events:none;border-radius:16px;
  border:2px solid #ffffff14;
  box-shadow:
    inset 0 0 0 1px #00000040,
    inset 0 4px 16px #00000055,
    inset 0 -3px 10px #ffffff0e,
    0 1px 0 #ffffff12;
}
/* 内层再描一条细围栏线，强化“框” */
.huanle-frame::before{
  content:"";position:absolute;inset:10px;border-radius:12px;
  border:1px solid #ffe6b324;
  box-shadow:inset 0 2px 10px #00000033;
}

/* 起牌：逐张从下方升起 */
@keyframes huanle-deal{
  0%{opacity:0;transform:translateY(42px) scale(.9)}
  60%{opacity:1;transform:translateY(-4px) scale(1.02)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.hand .tile.huanle-deal{animation:huanle-deal .4s cubic-bezier(.25,1.2,.5,1) both}
/* 牌墙升起（对家手牌） */
@keyframes huanle-wall-rise{
  0%{opacity:0;transform:translateY(18px)}
  100%{opacity:1;transform:translateY(0)}
}
.backs .back.huanle-rise{animation:huanle-wall-rise .35s ease both}

/* ---------- 出牌往中央罗盘堆靠：每家弃牌贴着罗盘那一侧 ---------- */
/* 北（上）：向下贴罗盘 */
.discard-layout .opponent-discard-2 .opponent-discard-tiles{
  align-content:flex-end !important; justify-content:center !important;
}
/* 南（我，下）：向上贴罗盘 */
.discard-layout .self-discard-area .self-discard-tiles{
  align-content:flex-start !important; justify-content:center !important;
}
/* 西（左）：向右贴罗盘 */
.discard-layout .opponent-discard-3 .opponent-discard-tiles{
  justify-content:flex-end !important; align-content:center !important;
}
/* 东（右）：向左贴罗盘 */
.discard-layout .opponent-discard-1 .opponent-discard-tiles{
  justify-content:flex-start !important; align-content:center !important;
}

/* ---------- 背景音乐开关按钮 ---------- */
#huanle-music-btn{color:#9fb6a6}
#huanle-music-btn svg{width:18px;height:18px}
#huanle-music-btn.music-on{color:#ffd77a;border-color:#ffd77a66 !important;background:#ffd77a1a !important}

/* ---------- 结算只显示胡名：隐藏“得分”明细块 ---------- */
.hu-detail{display:none !important}

/* ============================================================
   积分榜（底部）：显示每局结算总分，点分数可手动改
   ============================================================ */
#huanle-scoreboard{
  display:flex;align-items:center;gap:10px;
  padding:6px 12px;margin:0;
  background:linear-gradient(180deg,#0f3a44ee,#0b2a33ee);
  border-top:1px solid #ffdca033;
  box-shadow:inset 0 1px 0 #ffffff12;
}
#huanle-scoreboard .hsb-title{
  flex-shrink:0;font-size:12px;font-weight:700;letter-spacing:1px;
  color:#ffe09a;
}
#huanle-scoreboard .hsb-row{
  display:flex;flex:1;gap:8px;min-width:0;overflow:hidden;
}
.hsb-chip{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:4px 6px;border-radius:9px;
  background:#0c2a33;border:1px solid #ffffff1a;
  color:#eafcff;cursor:pointer;line-height:1.2;
}
.hsb-chip.me{border-color:#ffd77a66;background:#ffd77a14}
.hsb-chip:active{transform:translateY(1px)}
.hsb-chip .hsb-name{
  font-size:11px;color:#bcd6da;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hsb-chip .hsb-score{font-size:15px;font-weight:700;color:#ffe09a}
.hsb-chip.me .hsb-score{color:#ffd77a}
.hsb-input{
  width:56px;max-width:100%;text-align:center;
  font-size:15px;font-weight:700;
  background:#061e24;color:#fff;border:1px solid #ffd77a;border-radius:6px;padding:1px 2px;
}
/* 横屏：更紧凑 */
@media (orientation:landscape) and (max-height:599px){
  #huanle-scoreboard{padding:3px 10px;gap:8px}
  .hsb-chip{padding:2px 5px}
  .hsb-chip .hsb-name{font-size:9px}
  .hsb-chip .hsb-score{font-size:13px}
  #huanle-scoreboard .hsb-title{font-size:10px}
}

/* ============================================================
   最大化牌桌：去掉底部标签栏 + 状态/提示块；桌面撑满；积分榜置顶
   ============================================================ */
/* 去掉底部标签栏（牌桌/记录/玩法/连麦） */
.app-tabs{display:none !important}
/* 去掉状态行、提示按钮、选牌提示 */
.status,.hint-button,.selection-summary{display:none !important}

/* 操作区收成贴桌面底部的薄层，只保留碰杠胡过 */
.operation-dock{min-height:0 !important;padding:4px 6px !important;background:transparent !important;border:0 !important;box-shadow:none !important;flex:0 0 auto !important}
.operation-row{min-height:0 !important;margin:0 auto !important}

/* 让牌桌尽量撑满可用高度 */
body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.app-main{flex:1 1 auto !important;min-height:0 !important;padding-top:4px !important;max-width:none !important}
.layout{flex:1 1 auto !important;min-height:0 !important}
.table{flex:1 1 auto !important;min-height:0 !important;height:auto !important}

/* 积分榜置顶样式：去上边框、加下边框 */
#huanle-scoreboard{flex:0 0 auto;border-top:0 !important;border-bottom:1px solid #ffdca033 !important}

/* ============================================================
   桌上剩余牌墙（码着的牌，围成一圈；弃牌在圈内）
   ============================================================ */
#huanle-wall{position:absolute;inset:19% 15%;z-index:1;pointer-events:none}
.hw{position:absolute;display:flex;gap:1px}
.hw-top{top:-27px;left:4%;right:4%;justify-content:center;align-items:flex-end}
.hw-bottom{bottom:-27px;left:4%;right:4%;justify-content:center;align-items:flex-start}
.hw-left{left:-27px;top:4%;bottom:4%;flex-direction:column;justify-content:center}
.hw-right{right:-27px;top:4%;bottom:4%;flex-direction:column;justify-content:center}
.hw b{display:block;flex:0 0 auto;border-radius:3px}
/* 上下墙：2 张高、平铺的绿牌（顶面高光 + 中缝 + 底部厚度） */
.hw-top b,.hw-bottom b{
  width:17px;height:27px;
  background:linear-gradient(180deg,
    #cff5b0 0,#7fd05f 6%,#3fb531 10%,#35a82a 46%,
    #0a3a16 47%,#0a3a16 50%,
    #37ab2c 52%,#2a9324 90%,#0c4a18 100%);
  box-shadow:0 3px 4px #04231866, inset 0 0 0 1px #0a3a1655;
}
/* 左右墙：2 张高、横向平铺 */
.hw-left b,.hw-right b{
  width:27px;height:17px;
  background:linear-gradient(90deg,
    #cff5b0 0,#7fd05f 6%,#3fb531 10%,#35a82a 46%,
    #0a3a16 47%,#0a3a16 50%,
    #37ab2c 52%,#2a9324 90%,#0c4a18 100%);
  box-shadow:0 3px 4px #04231866, inset 0 0 0 1px #0a3a1655;
}

/* ---------- 去掉中间的门前人名标签 ---------- */
.opponent-discard>small,.self-discard-label{display:none !important}

/* ============================================================
   牌墙按参考图：对家手牌牌背做成厚实 2 层平铺绿牌；去掉独立牌墙环避免冲突
   ============================================================ */
#huanle-wall{display:none !important}
.backs{gap:1px !important}
.backs .back{
  border:0 !important;border-radius:3px !important;
  background:linear-gradient(180deg,#cff5b0 0,#7fd05f 7%,#3fb531 12%,#35a82a 46%,#0a3a16 47%,#0a3a16 50%,#37ab2c 53%,#2a9324 88%,#0c4a18 100%) !important;
  box-shadow:0 2px 3px #04231855, inset 0 0 0 1px #0a3a1644 !important;
}
.backs .back::before{display:none !important}
.north .backs .back{width:17px !important;height:26px !important}
.west .backs .back,.east .backs .back{
  width:26px !important;height:17px !important;
  background:linear-gradient(90deg,#cff5b0 0,#7fd05f 7%,#3fb531 12%,#35a82a 46%,#0a3a16 47%,#0a3a16 50%,#37ab2c 53%,#2a9324 88%,#0c4a18 100%) !important;
}

/* ---------- 牌墙再优化：加白色前沿(牌侧厚度) + 清晰两层缝，更立体 ---------- */
.north .backs .back{
  width:18px !important;height:28px !important;border-radius:4px 4px 2px 2px !important;
  background:linear-gradient(180deg,
    #dcf8c0 0,#8ad869 5%,
    #44bd35 10%,#37aa2c 44%,
    #072f12 45%,#072f12 48%,
    #3bb02f 50%,#2c9826 82%,
    #0a3f16 88%,
    #f5f1e3 90%,#cfcdb8 100%) !important;
  box-shadow:0 2px 3px #04231866, 1px 0 0 #0a3a1633 !important;
}
.west .backs .back{
  width:28px !important;height:18px !important;border-radius:2px 4px 4px 2px !important;
  background:linear-gradient(90deg,
    #dcf8c0 0,#8ad869 5%,#44bd35 10%,#37aa2c 44%,
    #072f12 45%,#072f12 48%,#3bb02f 50%,#2c9826 82%,
    #0a3f16 88%,#f5f1e3 90%,#cfcdb8 100%) !important;
  box-shadow:0 2px 3px #04231866 !important;
}
.east .backs .back{
  width:28px !important;height:18px !important;border-radius:4px 2px 2px 4px !important;
  background:linear-gradient(270deg,
    #dcf8c0 0,#8ad869 5%,#44bd35 10%,#37aa2c 44%,
    #072f12 45%,#072f12 48%,#3bb02f 50%,#2c9826 82%,
    #0a3f16 88%,#f5f1e3 90%,#cfcdb8 100%) !important;
  box-shadow:0 2px 3px #04231866 !important;
}

/* ============================================================
   牌墙·立体挤出版：绿色牌背顶面 + 用多层阴影堆出两层牌的厚度
   （绿侧 → 象牙白牌身 → 层间缝 → 下层绿侧 → 下层牌身 → 落影）
   ============================================================ */
.backs .back,
.north .backs .back,
.west .backs .back,
.east .backs .back{
  border:0 !important;
  border-radius:3px !important;
  background:
    linear-gradient(180deg,#ffffff55 0,#ffffff00 35%),
    linear-gradient(160deg,#5fd34c 0,#3db732 40%,#2f9f27 100%) !important;
  box-shadow:
    inset 0 0 0 1px #1e6e1c66,
    0 1px 0 #2a8f24,
    0 2px 0 #26831f,
    0 3px 0 #f6f1df,
    0 4px 0 #eee8d2,
    0 5px 0 #e2dbc1,
    0 6px 0 #0b3a15,
    0 7px 0 #2a8f24,
    0 8px 0 #26831f,
    0 9px 0 #f2edd9,
    0 10px 0 #e6dfc6,
    0 11px 0 #d6cfb3,
    0 13px 4px #021a1199 !important;
}
.backs .back::before,.backs .back::after{display:none !important}
/* 上方（北）：一排横向牌，留出厚度空间 */
.north .backs{gap:1px !important;padding-bottom:12px}
.north .backs .back{width:18px !important;height:22px !important}
/* 左右（西/东）：竖向一列横放的牌，后一张盖住前一张的厚度，只露最底下那张的侧面 */
.west .backs,.east .backs{gap:0 !important;padding-bottom:12px}
.west .backs .back,.east .backs .back{width:30px !important;height:15px !important;margin-bottom:1px}

/* ---------- 牌墙往里放：北家往下、西家往右、东家往左 ---------- */
.north .backs{translate:0 34px}
.west .backs{translate:46px 0}
.east .backs{translate:-46px 0}
@media (orientation:landscape) and (max-height:599px){
  .north .backs{translate:0 16px}
  .west .backs{translate:28px 0}
  .east .backs{translate:-28px 0}
}

/* ---------- 牌墙再往里放 ---------- */
.north .backs{translate:0 70px}
.west .backs{translate:84px 0}
.east .backs{translate:-84px 0}
@media (orientation:landscape) and (max-height:599px){
  .north .backs{translate:0 30px}
  .west .backs{translate:56px 0}
  .east .backs{translate:-56px 0}
}

/* ---------- 罗盘缩小，留出弃牌位置 ---------- */
.huanle-compass{width:60px !important;height:60px !important;min-width:60px;min-height:60px;flex:0 0 auto !important;border-width:1.5px !important}
.huanle-compass:before{inset:-4px !important}
.huanle-compass .wd{font-size:9px !important}
.huanle-compass .wd.n{top:3px !important}
.huanle-compass .wd.s{bottom:3px !important}
.huanle-compass .wd.w{left:4px !important}
.huanle-compass .wd.e{right:4px !important}
#wall{width:32px !important;height:32px !important;font-size:9px !important;line-height:1.1 !important}
@media (orientation:landscape) and (max-height:599px){
  .huanle-compass{width:50px !important;height:50px !important;min-width:50px;min-height:50px}
  .huanle-compass .wd{font-size:8px !important}
  #wall{font-size:8px !important}
}


/* ===== 恢复：三家手牌立着放回桌边；剩余牌单独码成牌墙圈（取自备份） ===== */
/* ============================================================
   修正：.backs 是对手手牌，不是牌墙 —— 恢复成立着的单张手牌
   ============================================================ */
.backs .back,
.north .backs .back,
.west .backs .back,
.east .backs .back{
  position:relative;border:0 !important;border-radius:3px !important;margin:0 !important;
  background:linear-gradient(100deg,#178a20 0,#3cc030 24%,#33aa2a 68%,#11621a 100%) !important;
  box-shadow:inset 0 1px 1px #ffffff40, 0 2px 0 #0d4a18, 0 3px 4px #02231666 !important;
}
.backs .back::before{display:block !important;content:"";position:absolute;background:linear-gradient(180deg,#fffef6,#e7e3cf);box-shadow:none}
/* 北家：一排立着的牌，上沿露出牌的象牙白顶边 */
.north .backs{gap:2px !important;padding-bottom:0 !important}
.north .backs .back{width:15px !important;height:22px !important}
.north .backs .back::before{left:0;right:0;top:-3px;height:4px;border-radius:3px 3px 0 0}
/* 西/东家：一列立着的牌，朝内一侧露出白边 */
.west .backs,.east .backs{gap:2px !important;padding-bottom:0 !important}
.west .backs .back,.east .backs .back{width:22px !important;height:14px !important}
.west .backs .back::before{top:0;bottom:0;right:-3px;width:4px;border-radius:0 3px 3px 0}
.east .backs .back::before{top:0;bottom:0;left:-3px;width:4px;border-radius:3px 0 0 3px}

/* ============================================================
   牌墙（剩余没摸的牌）：在弃牌区内侧码一圈，两层高；弃牌往里收
   ============================================================ */
.discard-layout{padding:24px 22px !important;box-sizing:border-box !important}
#huanle-wall{display:block !important;position:absolute;inset:0;z-index:0;pointer-events:none}
#huanle-wall .hw{position:absolute;display:flex;gap:1px}
#huanle-wall .hw-top{top:2px;left:22px;right:22px;bottom:auto;justify-content:center;align-items:flex-start}
#huanle-wall .hw-bottom{bottom:8px;left:22px;right:22px;top:auto;justify-content:center;align-items:flex-start}
#huanle-wall .hw-left{left:3px;top:24px;bottom:24px;right:auto;flex-direction:column;justify-content:center}
#huanle-wall .hw-right{right:3px;top:24px;bottom:24px;left:auto;flex-direction:column;justify-content:center}
#huanle-wall .hw b{
  display:block;flex:0 0 auto;border-radius:2px;
  background:linear-gradient(180deg,#ffffff50 0,#ffffff00 40%),linear-gradient(160deg,#5fd34c 0,#3db732 45%,#2c9a25 100%);
  box-shadow:
    inset 0 0 0 1px #1e6e1c55,
    0 1px 0 #f4efdc, 0 2px 0 #ddd6bc,
    0 3px 0 #0b3a15,
    0 4px 0 #2a8f24, 0 5px 0 #f1ecd8, 0 6px 0 #d7d0b4,
    0 8px 3px #021a1188;
}
#huanle-wall .hw-top b,#huanle-wall .hw-bottom b{width:11px;height:13px}
#huanle-wall .hw-left b,#huanle-wall .hw-right b{width:15px;height:8px;margin-bottom:5px}

@media (orientation:landscape) and (max-height:599px){
  .discard-layout{padding:18px 20px !important}
  #huanle-wall .hw-top b,#huanle-wall .hw-bottom b{width:9px;height:10px}
  #huanle-wall .hw-left b,#huanle-wall .hw-right b{width:12px;height:6px;margin-bottom:4px}
}

/* ---------- 牌墙放大 ---------- */
.discard-layout{padding:32px 28px !important}
#huanle-wall .hw-top{top:2px;left:0;right:0}
#huanle-wall .hw-bottom{bottom:10px;left:0;right:0}
#huanle-wall .hw-left{left:2px;top:32px;bottom:32px}
#huanle-wall .hw-right{right:2px;top:32px;bottom:32px}
#huanle-wall .hw b{border-radius:3px;
  box-shadow:
    inset 0 0 0 1px #1e6e1c55,
    0 1px 0 #f4efdc, 0 3px 0 #ddd6bc,
    0 4px 0 #0b3a15,
    0 5px 0 #2a8f24, 0 6px 0 #f1ecd8, 0 8px 0 #d7d0b4,
    0 10px 4px #021a1188;}
#huanle-wall .hw-top b,#huanle-wall .hw-bottom b{width:15px;height:18px}
#huanle-wall .hw-left b,#huanle-wall .hw-right b{width:22px;height:11px;margin-bottom:8px}
@media (orientation:landscape) and (max-height:599px){
  .discard-layout{padding:24px 24px !important}
  #huanle-wall .hw-left,#huanle-wall .hw-right{top:24px;bottom:24px}
  #huanle-wall .hw-top b,#huanle-wall .hw-bottom b{width:12px;height:14px}
  #huanle-wall .hw-left b,#huanle-wall .hw-right b{width:18px;height:9px;margin-bottom:6px}
}

/* ---------- 牌墙更紧凑：墩与墩紧挨，接缝只留细线 ---------- */
#huanle-wall .hw{gap:0 !important}
#huanle-wall .hw b{border-radius:2px !important}
#huanle-wall .hw-top b,#huanle-wall .hw-bottom b{
  width:14px !important;
  box-shadow:
    inset -1px 0 0 #0b3a1599, inset 0 0 0 1px #1e6e1c44,
    0 1px 0 #f4efdc, 0 3px 0 #ddd6bc,
    0 4px 0 #0b3a15,
    0 5px 0 #2a8f24, 0 6px 0 #f1ecd8, 0 8px 0 #d7d0b4,
    0 10px 4px #021a1188 !important;
}
/* 左右两列：上下贴着码，下一墩盖住上一墩的厚度 */
#huanle-wall .hw-left b,#huanle-wall .hw-right b{
  margin-bottom:0 !important;height:13px !important;
  box-shadow:
    inset 0 -1px 0 #0b3a1599, inset 0 0 0 1px #1e6e1c44,
    0 1px 0 #f4efdc, 0 3px 0 #ddd6bc,
    0 4px 0 #0b3a15,
    0 5px 0 #2a8f24, 0 6px 0 #f1ecd8, 0 8px 0 #d7d0b4,
    0 10px 4px #021a1188 !important;
}
@media (orientation:landscape) and (max-height:599px){
  #huanle-wall .hw-top b,#huanle-wall .hw-bottom b{width:11px !important}
  #huanle-wall .hw-left b,#huanle-wall .hw-right b{height:10px !important}
}

/* 手牌不再往里挪 */
.north .backs,.west .backs,.east .backs{translate:none !important}

/* 左右两侧牌墙往上：从上边牌墙的两端开始往下码，四边连成框 */
#huanle-wall .hw-left,#huanle-wall .hw-right{top:20px !important;bottom:22px !important;justify-content:flex-start !important}

/* 牌墙只码三边（上、左、右），自家这边不放 */
#huanle-wall .hw-bottom{display:none !important}
#huanle-wall .hw-left,#huanle-wall .hw-right{bottom:6px !important}

/* 积分改为手动记：去掉座位上自动结算的分数 */
.seat-score{display:none !important}

/* 牌墙摸牌：拿走的墩留空不挪位；只剩一张的墩显示单层 */
#huanle-wall .hw b.gone{visibility:hidden !important}
#huanle-wall .hw b.half{
  box-shadow:inset 0 0 0 1px #1e6e1c44, 0 1px 0 #f4efdc, 0 3px 0 #ddd6bc, 0 5px 3px #021a1188 !important;
}

/* 17 墩放不下时每墩自动压窄，整条都能放进去 */
#huanle-wall .hw{overflow:visible}
#huanle-wall .hw-top b{flex:0 1 auto !important;min-width:6px}
#huanle-wall .hw-left b,#huanle-wall .hw-right b{flex:0 1 auto !important;min-height:5px}

/* ---------- 左右两家弃牌：一列满了往中间新开一列，不往下压到牌墙 ---------- */
.discard-layout .opponent-discard-3 .opponent-discard-tiles,
.discard-layout .opponent-discard-1 .opponent-discard-tiles{
  flex-direction:column !important;flex-wrap:wrap !important;
  height:100% !important;max-height:100% !important;
  align-content:flex-start !important;justify-content:flex-start !important;
}
/* 西家往右（朝中间）开新列；东家往左（朝中间）开新列 */
.discard-layout .opponent-discard-1 .opponent-discard-tiles{flex-wrap:wrap-reverse !important}
.discard-layout .opponent-discard-3,.discard-layout .opponent-discard-1{overflow:visible !important}

/* ---------- 碰、杠亮出的牌放大，看得清 ---------- */
#melds{height:auto !important;min-height:52px;margin-bottom:6px !important}
#melds .tile{width:34px !important;height:47px !important;border-radius:4px !important}
.meld-group{margin-right:14px !important;gap:2px !important}
.meld-group small{font-size:15px !important;font-weight:700;color:#ffe09a !important;margin-right:6px !important}
@media (orientation:landscape) and (max-height:599px){
  #melds{min-height:40px}
  #melds .tile{width:27px !important;height:37px !important}
  .meld-group small{font-size:13px !important}
}

/* ============================================================
   手机横屏（矮屏）专用布局：顶部压成细栏，牌桌占满，按钮浮在右下
   ============================================================ */
@media (orientation:landscape) and (max-height:500px){
  body{min-height:100dvh}
  /* 标题栏：一条细栏 */
  .game-header{min-height:0 !important;height:30px !important;padding:0 8px !important}
  .game-header .room-title small{display:none !important}
  .game-header .room-title span{font-size:12px !important}
  .game-header .room-title i{display:none !important}
  .game-header nav{gap:3px !important}
  .game-header nav button{min-height:0 !important;height:24px !important;padding:0 7px !important;font-size:10px !important;flex-direction:row !important;gap:3px !important;border-radius:6px !important}
  .game-header nav button svg{width:13px !important;height:13px !important}
  /* 积分榜：一条细栏，名字和分数并排 */
  #huanle-scoreboard{padding:1px 8px !important;gap:6px !important;min-height:0 !important}
  #huanle-scoreboard .hsb-title{font-size:10px !important}
  .hsb-chip{flex-direction:row !important;justify-content:center;gap:5px !important;padding:0 6px !important;border-radius:6px !important;height:20px}
  .hsb-chip .hsb-name{font-size:10px !important}
  .hsb-chip .hsb-score{font-size:12px !important}
  /* 局数条去掉（风位看罗盘） */
  .table-summary{display:none !important}
  /* 去掉右侧操作栏，牌桌占满；碰杠胡过浮在右下 */
  .app-main{padding:2px 4px 3px !important;flex:1 1 auto !important;min-height:0 !important}
  .layout{display:block !important;position:relative !important;height:100% !important}
  .table{width:100% !important;height:100% !important;min-height:0 !important;border-width:6px !important;border-radius:20px !important}
  .table:before{inset:6px !important;border-radius:16px !important}
  .operation-dock{position:absolute !important;right:12px !important;bottom:52px !important;width:auto !important;min-width:0 !important;min-height:0 !important;z-index:30 !important;padding:0 !important;background:transparent !important;border:0 !important;box-shadow:none !important}
  .operation-row{max-width:none !important;min-height:0 !important}
  #actions{width:auto !important;flex-wrap:nowrap !important;justify-content:flex-end !important;margin:0 !important}
  #actions:empty{display:none !important}
  #actions button{width:44px !important;height:44px !important;min-width:44px !important;min-height:44px !important;font-size:16px !important}
  /* 自己的手牌、头像、混儿、碰牌都按矮屏缩小 */
  .bottom{bottom:4px !important}
  .hand .tile{width:30px !important;height:42px !important}
  .seat-card{padding:3px 4px !important;gap:1px !important;border-radius:8px !important}
  .seat-card .avatar{width:30px !important;height:30px !important;font-size:15px !important}
  .seat-name{font-size:10px !important}
  .huanle-dealer{width:15px !important;height:15px !important;font-size:9px !important;top:-3px !important;right:-3px !important}
  #wild .tile{width:20px !important;height:28px !important}
  #melds{min-height:0 !important;margin-bottom:2px !important}
  #melds .tile{width:22px !important;height:30px !important}
  .meld-group small{font-size:11px !important}
  .north .backs .back{width:12px !important;height:17px !important}
  .west .backs .back,.east .backs .back{width:17px !important;height:11px !important}
}

/* 改回竖屏玩：不再提示“请横屏游戏” */
#huanle-rotate{display:none !important}

/* ---------- 手机横屏（矮屏）再优化：罗盘显示、左右手牌缩短、自家头像让位 ---------- */
@media (orientation:landscape) and (max-height:500px){
  /* 重新显示中间罗盘（旧样式在横屏把中间格子隐藏了） */
  .discard-layout .center{display:flex !important;align-items:center;justify-content:center}
  .huanle-compass{width:46px !important;height:46px !important;min-width:46px;min-height:46px}
  .huanle-compass .wd{font-size:7px !important}
  .huanle-compass .wd.n{top:2px !important}.huanle-compass .wd.s{bottom:2px !important}
  .huanle-compass .wd.w{left:3px !important}.huanle-compass .wd.e{right:3px !important}
  #wall{width:26px !important;height:26px !important;font-size:8px !important}
  /* 左右两家：头像和手牌整体上提，每张压薄，整列缩短 */
  .seat.west,.seat.east{top:50px !important}
  .west .backs,.east .backs{gap:1px !important}
  .west .backs .back,.east .backs .back{width:16px !important;height:8px !important}
  /* 自家头像往右让开西家那一列 */
  .bottom #you{position:absolute !important;left:62px !important;bottom:56px !important;z-index:3}
}
@media (orientation:landscape) and (max-height:500px){
  /* 弃牌缩小；中间罗盘留固定高度，上下两条弃牌区各一行牌高 */
  .discard-layout{grid-template-rows:26px minmax(48px,1fr) 26px !important;grid-template-columns:minmax(54px,auto) minmax(0,1fr) minmax(54px,auto) !important}
  .discard-layout .tile,.discard-layout #river .tile,.self-discard-tiles .tile{width:17px !important;height:23px !important;border-bottom-width:2px !important}
  .opponent-discard-tiles,.self-discard-tiles{gap:1px !important}
}

/* ============================================================
   顶部合成一行（像专注模式）：去掉标题栏，按钮挪到积分榜右边；去掉音乐
   ============================================================ */
#huanle-music-btn{display:none !important}
body.huanle-onebar .game-header{display:none !important}
body.huanle-onebar #huanle-scoreboard{padding:3px 8px !important;gap:8px !important}
body.huanle-onebar #huanle-scoreboard .hsb-row{flex:1 1 auto;min-width:0}
.hsb-nav{display:flex !important;flex:0 0 auto;gap:4px !important;align-items:center;margin:0 !important;padding:0 !important}
.hsb-nav button{min-height:0 !important;height:26px !important;padding:0 8px !important;font-size:11px !important;flex-direction:row !important;gap:3px !important;border-radius:6px !important;white-space:nowrap}
.hsb-nav button svg{width:13px !important;height:13px !important}
.hsb-chip{flex-direction:row !important;justify-content:center;gap:5px !important;padding:2px 6px !important;height:26px}
.hsb-chip .hsb-name{font-size:11px !important}
.hsb-chip .hsb-score{font-size:13px !important}
/* 专注模式下积分榜也保留（只隐藏下面的局数条） */
.table-focus #huanle-scoreboard{display:flex !important}

/* 顶部按钮统一成深色小按钮；横屏去掉“东风场 第几局”那一条 */
.hsb-nav button{background:#ffffff0f !important;color:#e8eddf !important;border:1px solid #ffffff26 !important;box-shadow:none !important}
.hsb-nav button span{color:inherit !important;font-size:11px !important}
.hsb-nav button svg{stroke:currentColor}
@media (orientation:landscape){ body.huanle-onebar .table-summary{display:none !important} }

/* 开局弹窗（掷骰、翻牌、定混）：横屏改成一行的小卡片 */
@media (orientation:landscape){
  .opening-card{max-width:440px !important;padding:10px 16px 12px !important;border-radius:14px !important;display:flex !important;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:14px;row-gap:4px}
  .opening-card .eyebrow{display:none !important}
  .opening-card h2{width:100%;font-size:15px !important;margin:0 0 2px !important}
  .opening-card p{margin:0 !important;font-size:11px !important}
  .opening-dice{gap:6px !important}
  .dice-face{font-size:34px !important;line-height:1 !important}
  .opening-flip,.opening-wild{display:inline-flex !important;margin:0 !important;gap:6px !important}
  .opening-flip .tile,.opening-wild .tile{width:26px !important;height:36px !important}
  .opening-card small{font-size:10px !important}
  .opening-card button{width:100%;max-width:160px;margin:6px auto 0 !important;padding:6px 18px !important;font-size:12px !important}
}

/* ============================================================
   顶层一行全部让出：积分放到四家头像下面，按钮放到牌桌右上角
   ============================================================ */
body.huanle-tablenav #huanle-scoreboard{display:none !important}
body.huanle-tablenav .game-header{display:none !important}
.table{position:relative}
nav.table-nav{position:absolute !important;top:10px !important;right:12px !important;z-index:40 !important;display:flex !important;gap:4px !important;align-items:center;margin:0 !important;padding:0 !important;background:none !important;flex-wrap:nowrap}
nav.table-nav button{min-height:0 !important;height:26px !important;padding:0 8px !important;font-size:11px !important;flex-direction:row !important;gap:3px !important;border-radius:13px !important;white-space:nowrap;
  background:#0b2a33cc !important;color:#e8eddf !important;border:1px solid #ffffff2e !important;box-shadow:0 2px 6px #00000044 !important}
nav.table-nav button span{color:inherit !important;font-size:11px !important}
nav.table-nav button svg{width:13px !important;height:13px !important;stroke:currentColor}
nav.table-nav #focus-table,nav.table-nav #huanle-music-btn{display:none !important}
nav.table-nav #voice-open{display:none !important}
body.network-game nav.table-nav #voice-open{display:flex !important}
nav.table-nav #voice-open .tab-badge{display:none !important}
/* 右上角的“退出专注”和混儿指示牌不和按钮抢位置 */
#exit-focus{display:none !important}

/* 头像下的积分：金色小标签，点一下可改 */
.huanle-seat-score{display:block;margin:2px auto 0;min-width:34px;padding:1px 8px;border-radius:9px;
  background:#0a2630;border:1px solid #ffd77a66;color:#ffe09a;font-weight:700;font-size:12px;line-height:16px;cursor:pointer;text-align:center}
.huanle-seat-score .hsb-input{width:52px;font-size:12px;padding:0 2px}
#you .seat-card{flex-wrap:wrap}
#you .huanle-seat-score{margin:0 0 0 6px;display:inline-block}
nav.table-nav button{display:inline-flex !important;align-items:center !important;justify-content:center !important;width:auto !important}
nav.table-nav button svg{display:inline-block !important;margin:0 !important}

/* ============================================================
   横屏最下面一行：头像+积分 | 手牌 | 碰杠牌，横着排，不再压到出牌区
   ============================================================ */
@media (orientation:landscape){
  .table .bottom{display:flex !important;flex-direction:row !important;align-items:flex-end !important;justify-content:center !important;gap:10px !important;flex-wrap:nowrap !important;left:8px !important;right:8px !important;bottom:6px !important}
  .table .bottom #you,.bottom #you{position:static !important;order:0;flex:0 0 auto;margin:0 0 4px !important;left:auto !important;bottom:auto !important}
  .bottom #you .seat-card{flex-direction:row !important;align-items:center;gap:4px !important;padding:3px 6px !important}
  .bottom #you .seat-name{font-size:11px !important;white-space:nowrap}
  .bottom #hand{order:1;flex:0 1 auto;min-width:0;margin:0 !important}
  .bottom #melds{order:2;flex:0 0 auto;margin:0 0 4px !important;height:auto !important;min-height:0 !important;display:flex !important;gap:6px;align-items:flex-end}
  .bottom #melds:empty{display:none !important}
  .bottom #melds .tile{width:24px !important;height:33px !important}
  .bottom #melds .meld-group{margin:0 !important}
}

/* 碰杠牌放在手牌前面（紧挨手牌左边），尺寸接近手牌 */
@media (orientation:landscape){
  .bottom #you{order:0 !important}
  .bottom #melds{order:1 !important;gap:8px !important;margin:0 4px 0 0 !important}
  .bottom #hand{order:2 !important}
  .bottom #melds .tile{width:34px !important;height:47px !important;border-radius:4px !important}
  .bottom #melds .meld-group{gap:1px !important}
  .bottom #melds .meld-group small{font-size:12px !important;margin-right:3px !important;align-self:center}
}
@media (orientation:landscape) and (max-height:500px){
  .bottom #melds .tile{width:29px !important;height:40px !important}
}
@media (orientation:landscape){
  /* 手牌不许被压扁；空间不够时先缩头像那一块 */
  .bottom #hand{flex:0 0 auto !important}
  .bottom #hand .tile{flex:0 0 auto !important}
  .bottom #melds{flex:0 0 auto !important}
  .bottom #you{flex:0 1 auto !important;min-width:0 !important}
  .bottom #you .seat-card{min-width:0 !important;max-width:100%}
  .bottom #you .seat-name{overflow:hidden;text-overflow:ellipsis;min-width:0}
}
/* 碰杠牌回到手牌正前方：不再占用最下面那一行 */
@media (orientation:landscape){
  .table .bottom #melds{position:absolute !important;order:unset !important;margin:0 !important;z-index:4}
}

/* ============================================================
   碰杠牌都摆在各家手牌正前方；自己的小一点
   ============================================================ */
@media (orientation:landscape){
  .bottom #melds .tile{width:24px !important;height:33px !important}
  .bottom #melds .meld-group small{font-size:11px !important}
  .seat{overflow:visible !important}
  .seat .opponent-melds{position:absolute !important;margin:0 !important;z-index:3;display:flex !important;gap:4px !important;flex-wrap:nowrap !important;width:max-content}
  .seat .opponent-meld{padding:0 !important;border:0 !important;background:none !important;gap:1px !important}
  .seat .opponent-meld>small{display:none !important}
  .seat .opponent-meld-tiles{display:flex !important;gap:1px !important}
  .seat .opponent-meld-tiles .tile{width:18px !important;height:25px !important;border-radius:2px !important}
  .seat .opponent-meld-tiles .back{width:18px !important;height:25px !important}
  /* 北家：一行横排在手牌下方 */
  .north .opponent-melds{flex-direction:row !important;align-items:flex-start}
  .north .opponent-meld-tiles{flex-direction:row !important}
  /* 西家、东家：每组竖排三张，几组朝桌子中间并排 */
  .west .opponent-melds,.east .opponent-melds{flex-direction:row !important;align-items:flex-start}
  .west .opponent-meld-tiles,.east .opponent-meld-tiles{flex-direction:column !important}
  .west .opponent-meld-tiles .tile,.east .opponent-meld-tiles .tile{width:22px !important;height:17px !important}
  .west .opponent-meld-tiles .tile .tile-art,.east .opponent-meld-tiles .tile .tile-art{transform:rotate(90deg) scale(.72)}
}
@media (orientation:landscape) and (max-height:500px){
  .bottom #melds .tile{width:22px !important;height:30px !important}
  .seat .opponent-meld-tiles .tile{width:15px !important;height:21px !important}
  .west .opponent-meld-tiles .tile,.east .opponent-meld-tiles .tile{width:19px !important;height:14px !important}
}

/* 三家的碰杠牌：不转方向，立着摆、放大，看得清 */
@media (orientation:landscape){
  .seat .opponent-meld-tiles .tile,
  .west .opponent-meld-tiles .tile,.east .opponent-meld-tiles .tile{width:20px !important;height:28px !important;border-radius:3px !important}
  .west .opponent-meld-tiles .tile .tile-art,.east .opponent-meld-tiles .tile .tile-art{transform:none !important}
  .seat .opponent-melds{gap:5px !important}
}
@media (orientation:landscape) and (max-height:500px){
  .seat .opponent-meld-tiles .tile,
  .west .opponent-meld-tiles .tile,.east .opponent-meld-tiles .tile{width:19px !important;height:26px !important}
}
@media (orientation:landscape){
  /* 去掉北家碰牌下面的滚动条 */
  .seat .opponent-melds,.seat .opponent-meld,.seat .opponent-meld-tiles{overflow:visible !important;scrollbar-width:none}
  .seat .opponent-melds::-webkit-scrollbar{display:none}
  /* 自己的出牌多了往罗盘方向长，不往下压到碰牌 */
  .discard-layout .self-discard-area .self-discard-tiles{flex-wrap:wrap-reverse !important;align-content:flex-end !important}
}
/* 左右两家的碰杠牌排成一条竖线（顺着他们手牌的方向），组与组之间留空隙 */
@media (orientation:landscape){
  .west .opponent-melds,.east .opponent-melds{flex-direction:column !important;gap:4px !important}
  .west .opponent-meld-tiles,.east .opponent-meld-tiles{flex-direction:column !important;gap:1px !important}
}
@media (orientation:landscape) and (max-height:500px){
  .west .opponent-meld-tiles .tile,.east .opponent-meld-tiles .tile{width:17px !important;height:23px !important}
}
/* 横屏手牌按屏幕高度定尺寸：手机 30×42，大屏最大 46×64，不会被压窄 */
@media (orientation:landscape){
  .bottom #hand .tile{width:clamp(30px,6.4vh,46px) !important;height:clamp(42px,9vh,64px) !important}
}
/* 左右两家的碰杠：每组三张横着并排（和北家、自己一样正着放），几组上下排成一列 */
@media (orientation:landscape){
  .west .opponent-melds,.east .opponent-melds{flex-direction:column !important;gap:5px !important;align-items:flex-start}
  .west .opponent-meld-tiles,.east .opponent-meld-tiles{flex-direction:row !important;gap:1px !important}
  .west .opponent-meld-tiles .tile,.east .opponent-meld-tiles .tile{width:20px !important;height:28px !important}
}
@media (orientation:landscape) and (max-height:500px){
  .west .opponent-meld-tiles .tile,.east .opponent-meld-tiles .tile{width:19px !important;height:26px !important}
}
/* 左右两家的碰杠整体竖过来：每张横躺、每组三张上下叠成一竖条，牌面朝桌子中间 */
@media (orientation:landscape){
  .west .opponent-melds,.east .opponent-melds{flex-direction:column !important;gap:5px !important;align-items:flex-start}
  .west .opponent-meld-tiles,.east .opponent-meld-tiles{flex-direction:column !important;gap:1px !important}
  .west .opponent-meld-tiles .tile,.east .opponent-meld-tiles .tile{width:30px !important;height:21px !important;position:relative !important;overflow:hidden}
  .west .opponent-meld-tiles .tile .tile-art,.east .opponent-meld-tiles .tile .tile-art{position:absolute !important;left:50% !important;top:50% !important;width:19px !important;height:28px !important}
  .west .opponent-meld-tiles .tile .tile-art{transform:translate(-50%,-50%) rotate(90deg) !important}
  .east .opponent-meld-tiles .tile .tile-art{transform:translate(-50%,-50%) rotate(-90deg) !important}
}
@media (orientation:landscape) and (max-height:500px){
  .west .opponent-meld-tiles .tile,.east .opponent-meld-tiles .tile{width:27px !important;height:19px !important}
  .west .opponent-meld-tiles .tile .tile-art,.east .opponent-meld-tiles .tile .tile-art{width:17px !important;height:25px !important}
}

/* 自己的头像改成和三家一样的竖卡片，放在牌桌左下角 */
@media (orientation:landscape){
  .table .bottom #you{position:absolute !important;left:0 !important;bottom:2px !important;margin:0 !important;z-index:5}
  .bottom #you .seat-card{flex-direction:column !important;align-items:center !important;gap:2px !important;padding:6px 8px !important;min-width:64px}
  .bottom #you .seat-name{font-size:12px !important;max-width:72px}
  .bottom #you .huanle-seat-score,#you .huanle-seat-score{display:block !important;margin:2px auto 0 !important}
  .bottom #you .hu-forbidden{display:none !important}
}
@media (orientation:landscape) and (max-height:500px){
  .bottom #you .seat-card{padding:4px 6px !important;min-width:54px}
  .bottom #you .seat-name{font-size:10px !important}
}
/* 只有自己的积分能点开修改 */
.huanle-seat-score:not([data-seat="0"]){cursor:default;pointer-events:none}

/* 手牌从左边固定位置开始排，摸牌出牌只动最右端，整排不再左右挪 */
@media (orientation:landscape){
  .table .bottom{justify-content:flex-start !important;padding-left:96px !important}
}
@media (orientation:landscape) and (max-height:500px){
  .table .bottom{padding-left:80px !important}
}
/* 庄家（自己）手牌居中：固定宽度的手牌区放在正中，牌在里面从左排 */
@media (orientation:landscape){
  .table .bottom{justify-content:center !important;padding-left:0 !important}
  .bottom #hand{justify-content:flex-start !important}
}
@media (orientation:landscape) and (max-height:500px){
  .table .bottom{padding-left:0 !important}
}
@media (orientation:landscape){ .table .bottom{justify-content:flex-start !important} }

/* 胡牌结算框：横屏一屏看全，不用下拉 */
@media (orientation:landscape){
  #result{top:3% !important;bottom:auto !important;max-height:94% !important;overflow:hidden !important;padding:8px 18px 10px !important;border-radius:16px !important}
  #result > div:first-child{display:none !important}
  #result h2{font-size:18px !important;margin:2px 0 !important;line-height:1.2}
  #result > p{font-size:12px !important;margin:0 0 4px !important}
  #result br{display:none !important}
  #result .winning-complete{margin:4px 0 0 !important;padding-top:6px !important}
  #result .winning-complete h3{font-size:13px !important;margin:0 0 2px !important}
  #result .winning-tags{font-size:12px !important;margin:0 0 4px !important}
  #result .result-tiles{margin-top:4px !important;gap:3px !important}
  #result .result-tiles .tile{width:32px !important;height:45px !important}
  #result .winning-sep{width:14px !important}
  #again,#network-again{margin:8px auto 0 !important;padding:6px 22px !important;font-size:13px !important;display:block}
}
@media (orientation:landscape) and (max-height:500px){
  #result .result-tiles .tile{width:27px !important;height:38px !important}
}
/* 出牌区：下边没有牌墙，不再留空位；罗盘那一行可以缩，保证自己的出牌一行不被挤出去 */
.discard-layout{padding-bottom:4px !important}
@media (orientation:landscape) and (max-height:500px){
  .discard-layout{padding:24px 24px 3px !important;grid-template-rows:26px minmax(0,1fr) 26px !important}
}
/* 罗盘放不下时收起；剩余张数显示在右上角按钮栏 */
#huanle-remain{display:none}
body.huanle-tight .discard-layout .huanle-compass{visibility:hidden !important}
body.huanle-tight #huanle-remain{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:13px;background:#0b2a33cc;border:1px solid #ffd77a66;color:#ffe09a;font-size:11px;font-weight:700;white-space:nowrap}
/* 结算框盖在右上角按钮上面 */
#result{z-index:60 !important}
/* 左右两家的出牌也竖过来：每张横躺，牌面朝桌子中间，和他们的碰杠一个方向 */
@media (orientation:landscape){
  .discard-layout #river .opponent-discard-3 .opponent-discard-tiles .tile,.discard-layout #river .opponent-discard-1 .opponent-discard-tiles .tile{width:30px !important;height:21px !important;position:relative !important;overflow:hidden}
  .discard-layout #river .opponent-discard-3 .tile .tile-art,.discard-layout #river .opponent-discard-1 .tile .tile-art{position:absolute !important;left:50% !important;top:50% !important;width:19px !important;height:28px !important}
  .discard-layout #river .opponent-discard-3 .tile .tile-art{transform:translate(-50%,-50%) rotate(90deg) !important}
  .discard-layout #river .opponent-discard-1 .tile .tile-art{transform:translate(-50%,-50%) rotate(-90deg) !important}
}
@media (orientation:landscape) and (max-height:500px){
  .discard-layout #river .opponent-discard-3 .opponent-discard-tiles .tile,.discard-layout #river .opponent-discard-1 .opponent-discard-tiles .tile{width:24px !important;height:17px !important}
  .discard-layout #river .opponent-discard-3 .tile .tile-art,.discard-layout #river .opponent-discard-1 .tile .tile-art{width:15px !important;height:22px !important}
}
/* 余牌：常驻左上角，两个混的右边 */
#huanle-remain,body.huanle-tight #huanle-remain{display:inline-flex;position:absolute;z-index:4;align-items:center;height:24px;padding:0 10px;border-radius:12px;background:#0b2a33cc;border:1px solid #ffd77a66;color:#ffe09a;font-size:12px;font-weight:700;white-space:nowrap;pointer-events:none}
/* 左上角的混：和手里的混一个样子——牌不透明、金边，金色圆角标“混”贴在右上角 */
#wild{opacity:1 !important;background:transparent !important;border:0 !important;box-shadow:none !important;padding:8px 8px 6px 4px !important;gap:9px !important;overflow:visible !important}
#wild .tile,#wild .tile.joker{width:24px !important;height:34px !important;opacity:1 !important;overflow:visible !important;box-shadow:0 0 0 2px #e6c573cc,1px 3px 0 #31773d,2px 6px 6px #082c204a !important}
#wild .tile.joker:after,#wild .joker:after{opacity:1 !important;top:-7px !important;right:-6px !important;left:auto !important;width:auto !important;min-width:15px !important;height:15px !important;padding:0 2px !important;border-radius:8px !important;font:700 9px/15px "PingFang SC","Microsoft YaHei",sans-serif !important;text-align:center}
@media (orientation:landscape) and (max-height:500px){#wild{top:3px !important;left:10px !important}}
/* 左上角的混：角标缩小、挪到牌的右上角外侧，不挡牌上的字；牌往下让一点给角标留地方 */
#wild{padding-top:10px !important;gap:11px !important}
#wild .tile.joker:after,#wild .joker:after{top:-10px !important;right:-10px !important;min-width:13px !important;height:13px !important;padding:0 1px !important;border-radius:7px !important;font:700 8px/13px "PingFang SC","Microsoft YaHei",sans-serif !important}
/* 账本按钮：账平时普通，账不平时变红 */
nav.table-nav #huanle-ledger-btn.bad{background:#a3262acc !important;border-color:#ff9a8a !important;color:#fff3e8 !important;animation:hl-blink 1.6s ease-in-out infinite}
@keyframes hl-blink{50%{box-shadow:0 0 0 3px #ff6b5a55}}
#huanle-ledger{position:absolute;z-index:62;right:12px;top:42px;width:min(340px,70%);max-height:calc(100% - 54px);display:flex;flex-direction:column;background:linear-gradient(140deg,#1d4a3bf5,#0f2e25f8);border:1px solid #e4cc9688;border-radius:14px;box-shadow:0 10px 30px #000a;color:#f1e9cf;font-size:12px}
#huanle-ledger[hidden]{display:none}
#huanle-ledger .hl-head{display:flex;align-items:center;gap:8px;padding:8px 10px 6px;border-bottom:1px solid #e4cc9633}
#huanle-ledger .hl-head b{font-size:14px;color:#ffe09a}
#huanle-ledger .hl-sum{flex:1;font-size:11px;color:#bfe3b0}
#huanle-ledger .hl-sum.bad{color:#ff9a8a;font-weight:700}
#huanle-ledger .hl-x{border:0;background:none;color:#e9dcb4;font-size:20px;line-height:1;padding:0 4px}
#huanle-ledger .hl-list{overflow:auto;padding:4px 10px;flex:1;min-height:40px}
#huanle-ledger .hl-row{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px dashed #e4cc9622;line-height:1.4}
#huanle-ledger .hl-row small{color:#9fb79a;flex-shrink:0}
#huanle-ledger .hl-row.undo{color:#ffd28a}
#huanle-ledger .hl-row.undone{color:#8fa38c;text-decoration:line-through}
#huanle-ledger .hl-empty{color:#9fb79a;padding:10px 0;text-align:center}
#huanle-ledger .hl-foot{padding:6px 10px 9px;border-top:1px solid #e4cc9633}
#huanle-ledger .hl-undo{width:100%;height:30px;border-radius:15px;border:1px solid #e4cc96;background:linear-gradient(#f2d99c,#d6b06a);color:#4a3412;font-weight:700;font-size:12px}
#huanle-ledger .hl-undo:disabled{background:#2a4a3c;border-color:#4d6b58;color:#8fa38c}
/* 账本按钮放在左上角两个混的右边（位置由 huanle.js 计算） */
#huanle-ledger-btn{position:absolute;z-index:41;height:24px;padding:0 10px;border-radius:12px;background:#0b2a33cc;border:1px solid #ffd77a66;color:#ffe09a;font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer}
#huanle-ledger-btn.bad{background:#a3262acc;border-color:#ff9a8a;color:#fff3e8;animation:hl-blink 1.6s ease-in-out infinite}
#huanle-ledger{right:auto !important}
/* 账本里的“记一局” */
#huanle-ledger{width:min(380px,80%) !important}
#huanle-ledger .hl-win{padding:7px 10px 6px;border-bottom:1px solid #e4cc9633;display:flex;flex-direction:column;gap:6px}
#huanle-ledger .hl-win-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#huanle-ledger .hl-win-row b{color:#ffe09a;font-size:13px;margin-right:2px}
#huanle-ledger .hl-winner,#huanle-ledger .hl-amt{height:28px;border-radius:8px;border:1px solid #e4cc9688;background:#0b2a33;color:#fff3da;font-size:13px;padding:0 6px}
#huanle-ledger .hl-amt{width:72px}
#huanle-ledger .hl-per,#huanle-ledger .hl-who,#huanle-ledger .hl-win-me{color:#d9e7cf;font-size:12px}
#huanle-ledger .hl-loser{height:26px;padding:0 9px;border-radius:13px;border:1px solid #6f8f7b;background:#173a30;color:#a9bfae;font-size:12px}
#huanle-ledger .hl-loser.on{background:#8a2b2b;border-color:#ff9a8a;color:#fff1e6}
#huanle-ledger .hl-go{margin-left:auto;height:28px;padding:0 12px;border-radius:14px;border:1px solid #e4cc96;background:linear-gradient(#f2d99c,#d6b06a);color:#4a3412;font-weight:700;font-size:12px}
#huanle-ledger .hl-go:disabled{background:#2a4a3c;border-color:#4d6b58;color:#8fa38c}
#huanle-ledger .hl-tip{color:#8fa98f;font-size:10px}
/* 联网房间：一键开麦/闭麦；原来的“连麦”面板入口收起来 */
body.network-game nav.table-nav #voice-open{display:none !important}
nav.table-nav #huanle-mic.live{background:linear-gradient(#5fae6a,#2f7a45) !important;border-color:#c9f0b8 !important;color:#fff !important;box-shadow:0 0 0 2px #8be08a55}
#huanle-mic[hidden]{display:none !important}
/* 房号下面的说明 */
#room-easy-tip{margin:6px 0 10px;font-size:12px;line-height:1.6;color:#d9e7cf}
#game-copy[hidden]{display:none !important}
/* 联网房间里不显示“房间 xxxxxx”按钮，右上角按钮整体往右让，不挡北家 */
/* 联网房间里按钮只写“房间”，不显示号码（点开能看人、能退出） */
body.network-game nav.table-nav #online-game,body.huanle-in-room nav.table-nav #online-game{font-size:0 !important}
body.network-game nav.table-nav #online-game *,body.huanle-in-room nav.table-nav #online-game *{display:none !important}
body.network-game nav.table-nav #online-game::after,body.huanle-in-room nav.table-nav #online-game::after{content:"房间";font-size:11px}
body.huanle-nav-s1 nav.table-nav #online-game::after{font-size:10px}
body.huanle-nav-s2 nav.table-nav #online-game::after{font-size:9px}
/* 按钮栏太宽、碰到北家时缩小 */
body.huanle-nav-s1 nav.table-nav{gap:3px !important;right:8px !important}
body.huanle-nav-s1 nav.table-nav button{padding:0 6px !important;font-size:10px !important;height:24px !important}
body.huanle-nav-s1 nav.table-nav button span{font-size:10px !important}
body.huanle-nav-s1 nav.table-nav button svg{display:none !important}
body.huanle-nav-s2 nav.table-nav{gap:2px !important;right:6px !important}
body.huanle-nav-s2 nav.table-nav button{padding:0 4px !important;font-size:9px !important;height:22px !important;letter-spacing:0 !important}
body.huanle-nav-s2 nav.table-nav button span{font-size:9px !important}
#game-leave.armed{background:#a3262a !important;border-color:#ff9a8a !important;color:#fff3e8 !important}
#huanle-toast{white-space:normal !important;max-width:80%;text-align:center;line-height:1.5}