/* 梵净山非遗文化 H5 */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #30573a; color: #fff; font-size: 15px;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
  overscroll-behavior: none;
}
html { overscroll-behavior: none; }
img { -webkit-user-drag: none; }
button { border: none; border-radius: 9px; font-size: 15px; background: rgba(255,255,255,.16); color: #fff; padding: 10px 14px; }
button:active { filter: brightness(.9); }
button.minor { background: rgba(255,255,255,.14); }
.gold-btn { background: linear-gradient(180deg, #f5c542, #e0a416); color: #5b3a00; font-weight: 600; }
.dim { color: #a9cdbc; font-size: 12px; }
input, select { height: 42px; border: none; border-radius: 8px; padding: 0 12px; font-size: 16px; background: rgba(255,255,255,.92); color: #222; outline: none; }

/* ===== 视图 ===== */
.view { display: none; position: fixed; inset: 0; overflow: hidden; }
.view.active { display: block; }

/* ===== 全局组件 ===== */
#connState { position: fixed; top: 0; left: 0; right: 0; z-index: 3000; background: #c0392b; color: #fff; text-align: center; font-size: 12px; padding: 4px; }
#connState.clickable { background: #e0a416; color: #3a2600; font-weight: 600; padding: 8px; cursor: pointer; }
#toast {
  position: fixed; top: 18%; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.75); color: #fff; padding: 10px 18px; border-radius: 10px;
  font-size: 14px; z-index: 3000; opacity: 0; pointer-events: none; transition: opacity .25s;
  max-width: 80vw; text-align: center;
}
#toast.show { opacity: 1; }
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 2000;
  display: none; align-items: center; justify-content: center;
}
.overlay.show { display: flex; }
.modal-box {
  width: 78vw; max-width: 360px; background: #3f3921; border-radius: 14px; padding: 20px 18px;
  border: 1px solid #d1b64255;
}
.modal-title { color: #d1b642; font-size: 18px; font-weight: 700; text-align: center; margin-bottom: 10px; }
.modal-content { font-size: 15px; line-height: 1.6; text-align: left; min-height: 24px; white-space: pre-line; }
.modal-btns { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }
.modal-btns button { min-width: 96px; background: #58201c; color: #d1b642; border: 1px solid #d1b642; }
/* 分享弹窗：展示生成的海报图，可长按分享 */
.share-box { width: 82vw; max-width: 360px; }
.share-poster { display: block; width: 100%; border-radius: 10px; margin: 0 auto 8px;
  background: #0b3d2e; min-height: 40vw; }
.share-tip { font-size: 12px; color: #cfe3d6; text-align: center; margin: 6px 0 4px; }
.share-tip-big { font-size: 15px; line-height: 1.7; color: #ffe08a; font-weight: 600;
  text-align: center; margin: 10px 0 6px; }

/* ===== 登录 ===== */
#loginView { background: linear-gradient(160deg, #0b3d2e 0%, #0e5740 60%, #0b3d2e 100%); }
.login-wrap { max-width: 480px; margin: 0 auto; padding: 13vh 24px 0; }
.logo { text-align: center; font-size: 30px; font-weight: 700; letter-spacing: 4px; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.slogan { text-align: center; color: #bfe3d2; font-size: 13px; margin: 8px 0 34px; letter-spacing: 2px; }
.card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 14px; padding: 22px 18px; }
.auth-tabs { display: flex; margin-bottom: 18px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,.18); }
.auth-tab { flex: 1; text-align: center; padding: 10px 0; font-size: 15px; color: #bfe3d2; background: rgba(255,255,255,.04); cursor: pointer; }
.auth-tab.active { background: linear-gradient(180deg, #f5c542, #e0a416); color: #5b3a00; font-weight: 600; }
.card input { width: 100%; margin-bottom: 14px; height: 46px; }
.card .gold-btn { width: 100%; height: 46px; font-size: 17px; }
.err { color: #ffb4a8; font-size: 13px; text-align: center; min-height: 18px; margin-top: 10px; }
.tip { font-size: 12px; color: #a9cdbc; text-align: center; margin-top: 8px; }
#authTip { color: #f5d27a; font-size: 13px; line-height: 1.5; }

/* ===== 大厅（小程序原版布局） ===== */
#hallView { background: #30573a; }
.hall-bg { position: fixed; inset: 0; background: url('/suit_tiles/images/game_hall.jpg') center/cover no-repeat; }
.hall-notice { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; z-index: 6; height: 8vw; }
.hall-notice img { width: 6.7vw; height: 6.7vw; margin: .7vw; }
.notice-swiper { flex: 1; background: rgba(0,0,0,.15); border-radius: 4px; height: 6.7vw; line-height: 6.7vw;
  color: #fff; padding: 0 2vw; font-size: 3.5vw; margin-right: 2vw;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-box { position: fixed; top: 8vw; left: 0; width: 100%; height: 8.7%; background: rgba(86,149,68,.3);
  display: flex; align-items: center; z-index: 5; padding: 1vw; }
.me-box > img { height: 92%; width: auto; aspect-ratio: 1; border-radius: 4px; }
.me-box-content { margin-left: 2vw; font-size: 3.3vw; }
.me-box-name { color: #fff; }
.me-box-coin { display: flex; align-items: center; gap: 1vw; color: #FFBB66; margin-top: 1vw; }
.me-box-coin img { width: 4.5vw; height: 4.5vw; }
.rank-box { position: fixed; right: 2.7vw; top: 8.5vw; padding: 1vw; background: rgba(86,149,68,.9);
  border-radius: 6px; z-index: 6; width: 13vw; }
.rank-users { height: 30vw; overflow: hidden; }
.rank-users img { width: 9.3vw; height: 9.3vw; display: block; margin: 1vw auto; border-radius: 4px; }
.rank-name { color: #fff; font-size: 3.2vw; text-align: center; }
.hall-icon { position: fixed; width: 6.7vw; height: 6.7vw; z-index: 6; }
.hall-exit { position: fixed; left: 3vw; bottom: 5vw; z-index: 8; background: rgba(0,0,0,.5);
  color: #fff; font-size: 3.6vw; padding: 1.6vw 4vw; border-radius: 16px; border: 1px solid #ffffff66; }
.hall-exit:active { background: rgba(0,0,0,.7); }
.hall-online { position: fixed; top: 26.7vw; left: 0; padding: .5vw 2vw; background: rgba(0,0,0,.6);
  z-index: 4; border-radius: 0 6px 6px 0; color: #fff; font-size: 3.5vw; }
.hall-imgbtn { position: fixed; z-index: 10; background-size: cover; background-position: center; background-repeat: no-repeat; }
.hall-imgbtn:active { transform: scale(1.06); }
.hall-share { position: fixed; left: 54%; top: 34%; width: 30.7vw; height: 8vw; line-height: 5vw;
  background: rgba(86,149,68,.9); font-size: 3.7vw; border-radius: 25px; z-index: 4; color: #fff; padding: 0; }
.mask { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 100; display: none; }
.mask.show { display: block; }
.popup {
  position: fixed; left: 50%; top: 16%; transform: translateX(-50%);
  width: 82vw; max-width: 380px; background: #29452f; border-radius: 14px; padding: 20px;
  z-index: 101; display: none; border: 1px solid #d1b64255;
}
.popup.show { display: block; }
.popup label { display: block; margin: 12px 0; font-size: 15px; }
.popup label.row { display: flex; justify-content: space-between; align-items: center; }
.popup select, .popup input { margin-left: 8px; height: 38px; }
.popup input[type=number] { width: 76px; }
.popup input[type=tel] { width: 100%; margin: 8px 0 0; }
.popup input[type=checkbox] { width: 22px; height: 22px; }
.popup .gold-btn { width: 100%; margin-top: 14px; height: 44px; }

/* ===== 个人中心 / 修改密码 ===== */
.profile-head { display: flex; align-items: center; gap: 12px; margin: 6px 0 16px; }
.profile-head img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover;
  border: 1px solid #d1b64255; }
.pf-name { font-size: 17px; color: #fff; font-weight: 600; }
.pf-id { font-size: 12px; color: #a9cdbc; margin-top: 5px; }
.pf-stats { display: flex; background: rgba(0,0,0,.22); border-radius: 10px; padding: 12px 0; margin-bottom: 6px; }
.pf-stats > div { flex: 1; text-align: center; border-right: 1px solid rgba(255,255,255,.08); }
.pf-stats > div:last-child { border-right: none; }
.pf-stats span { display: block; font-size: 19px; color: #f5c542; font-weight: 700; }
.pf-stats i { font-size: 12px; color: #a9cdbc; font-style: normal; }
#pwdOverlay .modal-box input { display: block; width: 100%; margin-top: 12px; }
#pwdOverlay .err { min-height: 16px; margin-top: 8px; }

/* ===== 创建房间（美化） ===== */
#createBox { padding: 0; width: 84vw; max-width: 360px; background: #20382a; overflow: hidden;
  box-shadow: 0 14px 44px rgba(0,0,0,.5); }
#createBox .ep-title { margin: 0; padding: 14px 16px; font-size: 16px; font-weight: 700;
  text-align: center; color: #4a2f00; background: linear-gradient(180deg,#f5d27a,#e0a416); }
#createBox > label, #createBox > #dakunRow { margin: 0; padding: 11px 16px; font-size: 14px;
  color: #d6e7dc; border-bottom: 1px solid rgba(255,255,255,.07); }
#createBox > label { display: flex; align-items: center; justify-content: space-between; }
#createBox select { margin: 0; height: 36px; min-width: 54%; border-radius: 8px; padding: 0 8px;
  font-size: 14px; background: rgba(255,255,255,.95); color: #222; }
#createBox label.row input[type=checkbox] { margin: 0; }
#createBox #dakunRow { display: flex; align-items: center; gap: 8px; }
#createBox #dakunRow input { margin: 0; width: 60px; height: 34px; text-align: center; }
#createBox > label input[type=number] { margin: 0 0 0 8px; width: 72px; height: 34px; text-align: center; }
#crSubmit { width: calc(100% - 32px); margin: 16px; }

/* ===== 设置 / 战绩 / 横屏提示 ===== */
.set-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 4px; font-size: 15px; }
.set-row input { width: 22px; height: 22px; }
.rec-table { font-size: 13px; }
.rec-row { display: grid; grid-template-columns: 44px repeat(auto-fit, minmax(50px, 1fr)); gap: 4px; padding: 5px 2px; border-bottom: 1px solid rgba(255,255,255,.08); }
.rec-row span { text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-head { color: #a9cdbc; }
.rec-total { border-top: 1px dashed #d1b64288; font-weight: 700; }
.rec-row .win { color: #f5c542; }
.rec-row .lose { color: #9fb8a8; }
#rotateHint { display: none; position: fixed; inset: 0; z-index: 5000; background: #0b3d2e;
  align-items: center; justify-content: center; font-size: 22px; letter-spacing: 4px; color: #d1b642; }
@media (orientation: landscape) and (max-height: 520px) {
  #rotateHint { display: flex; }
}
/* 刘海屏安全区 */
.desk-top { padding-top: env(safe-area-inset-top); height: calc(38px + env(safe-area-inset-top)); }
#myInfo { bottom: calc(1vw + env(safe-area-inset-bottom)); }
.hall-notice { padding-top: env(safe-area-inset-top); }
.me-box { top: calc(8vw + env(safe-area-inset-top)); }
.rank-box { top: calc(8.5vw + env(safe-area-inset-top)); }
.match-head { padding-top: calc(14px + env(safe-area-inset-top)); }

/* ===== 赛事活动 ===== */
#matchView { background: linear-gradient(160deg, #0b3d2e 0%, #0e5740 60%, #0b3d2e 100%); overflow-y: auto; }
.match-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; font-size: 18px; font-weight: 600; }
.match-head button { padding: 6px 12px; font-size: 14px; }
.match-head .dim { margin-left: auto; font-weight: 400; }
.match-list { padding: 0 14px 30px; max-width: 560px; margin: 0 auto; }
.match-item { display: flex; gap: 10px; background: rgba(255,255,255,.08); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.match-logo { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; flex: 0 0 64px; }
.match-info { flex: 1; min-width: 0; }
.match-name { font-size: 16px; font-weight: 600; }
.match-st { font-size: 12px; color: #f5c542; font-weight: 400; }
.match-meta { font-size: 12px; color: #a9cdbc; margin-top: 3px; }
.match-btns { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.match-btns button { padding: 6px 12px; font-size: 13px; }
.match-empty { text-align: center; color: #a9cdbc; padding: 30px 0; font-size: 14px; }
.rank-sec-title { color: #f5c542; font-weight: 600; margin: 12px 0 6px; border-bottom: 1px dashed #ffffff33; padding-bottom: 4px; }
.rank-row { display: flex; align-items: center; gap: 10px; padding: 6px 2px; font-size: 14px; }
.rank-row img { width: 34px; height: 34px; border-radius: 6px; }
.rank-no { min-width: 22px; text-align: center; color: #f5c542; font-weight: 700; }
.rank-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-val { color: #a9cdbc; }
.reward-text { font-size: 14px; line-height: 1.7; margin-bottom: 10px; white-space: pre-wrap; }

/* ===== 对局 ===== */
#deskView { background: #30573a url('/suit_tiles/images/play_bg.jpg') center/cover; }
.desk-top {
  position: fixed; top: 0; left: 0; right: 0; height: 38px; z-index: 50;
  display: flex; align-items: center; padding: 0 8px; font-size: 14px; font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.desk-top button { margin-left: auto; padding: 5px 14px; font-size: 13px; background: #b0a317; }

/* 座位：对手在左右两侧偏上（参考小程序，约屏高 18%），自己在底部 */
.seat { position: fixed; z-index: 5; width: 42vw; }
.seat-left { left: 0; top: calc(16vh + env(safe-area-inset-top)); }
.seat-right { right: 0; top: calc(16vh + env(safe-area-inset-top)); }
.seat-top { top: calc(7vh + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: 60vw; }
.seat .p-info { position: relative; display: flex; flex-direction: column; padding: 0 8px; }
.seat-right .p-info { align-items: flex-end; }
.seat .avatar { width: 15vw; height: 15vw; max-width: 64px; max-height: 64px; border-radius: 8px; }
.seat .avatar.active, #myInfo .avatar.active { border: 2.5px solid #ee6d01; box-shadow: 0 0 10px #ee6d01aa; }
.seat .boss, #myInfo .boss { position: absolute; width: 18px; height: 18px; z-index: 2; top: -6px; left: 4px; }
.p-name { font-size: 12px; color: #dcdcdc; max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.p-money { font-size: 12px; color: #db8b23; }
.p-money img { width: 13px; height: 13px; vertical-align: -2px; }
.p-oil { font-size: 11px; color: #db8b23; background: #634b25; border-radius: 4px; padding: 1px 6px; display: inline-block; margin-top: 3px; align-self: flex-start; }
.seat-right .p-oil { align-self: flex-end; }
.ready-tag, .tg-tag {
  position: absolute; top: 4vw; left: 16vw; background: rgba(232,63,10,.85);
  font-size: 12px; padding: 2px 6px; border-radius: 4px; white-space: nowrap;
}
.seat-right .ready-tag, .seat-right .tg-tag { left: auto; right: 16vw; }
.tg-tag { background: #b0a317; top: 10vw; }
/* 吃碰的牌组 */
.p-melds { display: flex; gap: 3px; padding: 4px 6px; flex-wrap: wrap; min-height: 4vw; }
.meld { display: flex; flex-direction: column; gap: 1px; }
.meld img { width: 4.7vw; height: 4.7vw; max-width: 26px; max-height: 26px; border-radius: 2px; }
.meld.show-hand img { outline: 1px solid #f5c54288; }
.seat-right .p-melds { justify-content: flex-end; }
/* 打出的废牌：35rpx≈4.7vw 小方块，约6列换行；左/上家从左往右，右家从右往左 */
.p-used { display: flex; flex-wrap: wrap; gap: 1px; padding: 3px 6px; width: 30vw; }
.p-used img { width: 4.7vw; height: 4.7vw; max-width: 26px; max-height: 26px; border-radius: 2px; }
.seat-right .p-used { margin-left: auto; flex-direction: row-reverse; }

/* 中央装饰 */
.desk-girl { position: fixed; left: 50%; top: 40%; transform: translate(-50%,-50%);
  width: 28vw; max-width: 130px; z-index: 1; border-radius: 6px; opacity: .96; }
.award-btn { position: fixed; left: 62vw; top: calc(8vw + env(safe-area-inset-top)); width: 10vw; max-width: 50px; z-index: 30; }
.gesture-hint { position: fixed; right: 16vw; bottom: 50vw; width: 24vw; max-width: 130px; z-index: 6; pointer-events: none; }

/* 中央 */
.center-info {
  position: fixed; top: 11vw; left: 50%; transform: translateX(-50%);
  text-align: center; z-index: 4; width: 60vw;
}
.desk-deco { width: 26vw; max-width: 130px; display: block; margin: 0 auto 1vw; opacity: .92; }
.center-line { font-size: 13px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.6); position: relative; }
.center-line b { color: #d1b642; }
/* 中央倒计时：放在中央人物图下方 */
.clock-center {
  position: fixed; left: 50%; top: 55vh; transform: translateX(-50%);
  z-index: 8; font-size: 26px; font-weight: 700; color: #ffd24a;
  text-shadow: 0 0 10px #000, 0 0 5px #e8920a; animation: blink 1s infinite; display: none;
}
.clock-center.show { display: block; }
#waitCount { font-size: 12px; color: #ffd97a; margin-top: 2px; min-height: 16px; }
/* 出牌区：居中、约屏高 21%（对齐小程序 desk_poker：60rpx≈9vw 宽，top:150px） */
#targetSlot {
  position: fixed; left: 50%; top: 21vh; transform: translateX(-50%);
  width: 9.3vw; height: 18.6vw; max-width: 50px; max-height: 100px; z-index: 4;
  border: 1px dashed #ee6d01; border-radius: 4px; padding: 1px; background: rgba(0,0,0,.18);
}
#targetSlot img { width: 100%; height: 100%; border-radius: 3px; }
/* 摸牌：从虚框出发，落到"紧挨虚框、偏摸牌玩家方向"的位置 */
#receivePoker {
  position: fixed; width: 9.3vw; height: 18.6vw; max-width: 50px; max-height: 100px;
  z-index: 6; transition: all .3s ease; opacity: 0; left: 45.4vw; top: 21vh;
}
#receivePoker.show { opacity: 1; }
#receivePoker img { width: 100%; height: 100%; border-radius: 3px; border: 1px solid #dc8225; }
#receivePoker.rp-center { left: 45.4vw; top: 21vh; }
#receivePoker.rp-left { left: 35vw; top: 21vh; }   /* 虚框左侧 */
#receivePoker.rp-right { left: 56vw; top: 21vh; }  /* 虚框右侧 */
#receivePoker.rp-top { left: 45.4vw; top: 11vh; }  /* 虚框上方 */
#receivePoker.rp-me { left: 45.4vw; top: 31vh; }   /* 虚框下方（朝自己） */
#huGif {
  position: fixed; left: 50%; top: 38%; transform: translate(-50%,-50%);
  width: 32vw; display: none; z-index: 60;
}
#huGif.show { display: block; }

/* 时钟/提示/气泡 */
.clock {
  position: absolute; font-size: 26px; font-weight: 700; color: #fff;
  text-shadow: 0 0 8px #000; animation: blink 1s infinite;
  top: 2vw; left: 46%;
}
.seat-left .clock { left: 36vw; top: 6vw; }
.seat-right .clock { left: 4vw; top: 6vw; }
#clock-me { position: fixed; right: 14vw; bottom: 44vw; z-index: 20; font-size: 28px; font-weight: 700; color: #fff; text-shadow: 0 0 8px #000; animation: blink 1s infinite; }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: .35; } 100% { opacity: 1; } }
/* 动作提示：单个固定元素，按玩家定位（小程序风格） */
#actionTip { position: fixed; width: 15vw; max-width: 78px; z-index: 35;
  transform: translate(-50%, -50%); animation: tipPop .25s ease; }
@keyframes tipPop { 0% { transform: translate(-50%,-50%) scale(.4); } 100% { transform: translate(-50%,-50%) scale(1); } }
.msg-slot {
  position: absolute; top: 12vw; left: 6vw; z-index: 31; max-width: 38vw;
  background: rgba(51,74,37,.92); border-radius: 8px; padding: 6px 10px; font-size: 13px;
  display: none;
}
.msg-slot.show { display: block; }
.seat-right .msg-slot { left: auto; right: 6vw; }
#msg-me { position: fixed; left: 30vw; bottom: 56vw; top: auto; }

/* 操作按钮 */
#actionBar {
  position: fixed; right: 2vw; bottom: 58vw; z-index: 40; display: none; gap: 2vw;
}
#actionBar.show { display: flex; }
#actionBar img { width: 14vw; height: 14vw; max-width: 70px; max-height: 70px; }
#actionBar img.gray { filter: grayscale(.9); opacity: .6; }

/* 吃牌/聊天面板 */
.popup-center {
  position: fixed; left: 7vw; right: 7vw; top: 24vh; z-index: 80;
  background: rgba(0,0,0,.78); border-radius: 12px; padding: 16px; display: none;
}
.popup-center.show { display: block; }
/* 吃牌面板：透明、按实际内容宽度居中，不要大黑框 */
#eatPanel { left: 50%; right: auto; transform: translateX(-50%);
  width: auto; max-width: 86vw; background: transparent; padding: 8px 14px; text-align: center; }
.ep-title { color: #d1b642; font-size: 15px; font-weight: 600; margin-bottom: 10px;
  text-shadow: 0 1px 3px rgba(0,0,0,.9); }
.ep-close { position: absolute; top: 6px; right: 12px; font-size: 18px; color: #fff; padding: 4px 8px; }
.ep-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ep-group { display: flex; flex-direction: column; gap: 2px; border: 1px solid #dc8225; padding: 4px; border-radius: 6px; }
.ep-group img { width: 9vw; height: 9vw; max-width: 46px; max-height: 46px; }
.chat-item { padding: 10px 6px; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 15px; }
.chat-item:active { background: rgba(255,255,255,.08); }

/* 我的区域 */
.me-zone { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; }
/* 听牌：左下角（与小程序 .ting left:10rpx bottom:10rpx 一致） */
#tingBar { position: fixed; left: 1.5vw; bottom: 1.5vw; display: flex; gap: 2px; align-items: center; z-index: 18; }
#tingBar span { font-size: 11px; color: #ffd97a; margin-right: 2px; }
#tingBar img { width: 7vw; max-width: 36px; border-radius: 2px; }
.me-row { display: flex; justify-content: space-between; padding: 0 2vw; margin-bottom: 1vw; }
#myMelds { display: flex; gap: 4px; flex-wrap: wrap; max-width: 52vw; align-items: flex-start; }
/* 每副吃/碰牌竖向一列（与小程序一致），多副左右并排 */
#myMelds .meld { flex-direction: column; gap: 1px; }
#myMelds .meld img { width: 5.6vw; height: 5.6vw; max-width: 30px; max-height: 30px; border-radius: 2px; }
/* 自己的废牌：右侧从右往左累积（与小程序 float:right 一致） */
#myUsed { display: flex; flex-wrap: wrap; flex-direction: row-reverse; gap: 1px; width: 38vw; align-content: flex-start; }
#myUsed img { width: 4.7vw; height: 4.7vw; max-width: 26px; max-height: 26px; border-radius: 2px; }
/* 手牌：绝对像素定位（JS 计算 left/top，复刻小程序）。容器底部留白给"我的信息"。 */
#hand {
  position: relative; width: 100%; margin: 0 auto 12vw;
  touch-action: none; min-height: 38vw;
}
/* 每张牌裁成等高切片（overflow 隐藏多余部分），叠放后所有牌等高，与小程序一致 */
.hcard { position: absolute; overflow: hidden; box-sizing: border-box;
  border: 1px solid #dc8225; border-radius: 4px; background: #fff; transition: top .1s ease; }
.hcard img { position: absolute; left: 0; width: 100%; display: block; }
.hcard.sel { box-shadow: 0 0 12px #f5c542; border-color: #f5c542; z-index: 200 !important; }
.hcard.will-play { box-shadow: 0 0 16px #4cd964; border-color: #4cd964; }
/* 出牌分割线 */
#playLine {
  position: fixed; left: 0; right: 0; z-index: 9; height: 0;
  border-top: 2px dashed rgba(219,198,131,.6); text-align: center; pointer-events: none;
}
#playLine span {
  display: inline-block; transform: translateY(-50%); background: rgba(0,0,0,.5);
  color: #dbc683; font-size: 12px; padding: 2px 12px; border-radius: 10px;
}
#myInfo {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 1vw;
  display: flex; gap: 8px; align-items: center; z-index: 12;
}
#myInfo .avatar { width: 13vw; height: 13vw; max-width: 60px; max-height: 60px; border-radius: 8px; }
#myInfo .m-col .p-name { max-width: 50vw; font-size: 13px; }

/* 左下功能图标（消息/设置） */
.desk-ico { position: fixed; width: 8.5vw; max-width: 44px; height: 8.5vw; max-height: 44px; z-index: 20; }
.desk-ico:active { transform: scale(1.1); }
/* 侧边按钮 */
.side-btns { position: fixed; right: 1.5vw; bottom: 44vw; z-index: 20; display: flex; flex-direction: column; gap: 8px; }
.side-btns button { width: 11vw; height: 11vw; max-width: 52px; max-height: 52px; border-radius: 50%; padding: 0; font-size: 13px; background: #b0a31766; }
/* 托：小圆按钮（与小程序一致），托管时隐藏 */
#btnTuoguan { font-size: 15px; background: #b0a317; color: #fff; }
/* 取消托管：居中宽按钮（仅托管时显示） */
#btnCancelTuo {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 38vw; z-index: 22;
  width: 40vw; max-width: 200px; height: 42px; line-height: 42px; padding: 0;
  background: rgba(194,180,29,.55); color: #fff; font-size: 15px; display: none;
}
#btnCancelTuo.show { display: block; }

/* 准备区 */
#readyArea {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 40%; z-index: 25;
  display: none; flex-direction: column; gap: 12px; align-items: center;
}
#readyArea.show { display: flex; }
/* 准备按钮：button-red.png 背景 + 金色字，尺寸对齐小程序(200×70rpx) */
#btnReady, #btnInvite {
  background: url('/suit_tiles/images/button-red.png') no-repeat center / 100% 100%;
  color: #d1b642; font-weight: 600; width: 27vw; max-width: 150px; height: 9.5vw; max-height: 42px;
  min-width: 0; padding: 0; font-size: 4vw; line-height: 9.5vw; text-shadow: 0 1px 2px #3a0d0a;
}
#btnReady:disabled { opacity: .6; }
#deskIdShare { font-size: 13px; color: #ffd97a; text-shadow: 0 1px 3px #000; }

/* 结算 */
.overlay.big { z-index: 1500; }
/* 胡牌结算框略向上 */
#resultOverlay { align-items: flex-start; }
#resultOverlay .result-box { margin-top: 5vh; }
.result-box {
  width: 92vw; max-width: 520px; max-height: 86vh; overflow-y: auto;
  background: #29452f; border: 1px solid #d1b64288; border-radius: 14px; padding: 18px;
}
.r-title { text-align: center; color: #f5c542; font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.r-melds { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 10px; }
.r-meld { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.r-meld img { width: 7vw; max-width: 36px; border-radius: 2px; }
.r-meld-name { font-size: 11px; color: #ffd97a; }
.r-cards { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; margin-bottom: 12px; padding-top: 8px; border-top: 1px dashed #ffffff33; }
.r-cards img { width: 7vw; max-width: 36px; border-radius: 2px; }
.r-cards img.hu-card { outline: 2px solid #e83f0a; }
.r-players { display: flex; flex-direction: column; gap: 8px; }
.r-player { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.06); border-radius: 8px; padding: 8px 10px; }
.r-player img { width: 40px; height: 40px; border-radius: 6px; }
.r-pname { flex: 1; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-score { font-size: 18px; font-weight: 700; min-width: 60px; text-align: right; }
.r-score.win { color: #f5c542; }
.r-score.lose { color: #9fb8a8; }
.r-integral { font-size: 12px; color: #a9cdbc; min-width: 56px; text-align: right; }
/* 结算页（对齐小程序） */
.r-winner { text-align: center; font-size: 15px; margin-bottom: 6px; }
.r-winner .win { color: #f5c542; } .r-winner .lose { color: #ff9b8a; }
.r-formula { text-align: center; font-size: 12px; color: #a9cdbc; margin-bottom: 8px; }
.r-grid { display: flex; gap: 8px; background: rgba(255,255,255,.06); border-radius: 8px; padding: 8px; margin-bottom: 10px; font-size: 13px; }
.r-col { flex: 1; min-width: 0; }
.r-col > div { line-height: 1.7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-col b { color: #f5c542; }
.r-col b.r-times { color: #ff6600; font-size: 16px; }
.r-others { flex: 1.3; }
.r-other span { color: #cfe3d6; }
.r-other b.win { color: #f5c542; } .r-other b.lose { color: #9fb8a8; }
.r-mingtang { text-align: center; color: #dcbb1f; font-size: 16px; font-weight: 600; margin: 8px 0;
  background: rgba(220,187,31,.12); border-radius: 6px; padding: 6px; }
.r-patterns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 10px; }
.r-pat { text-align: center; }
.r-pat-name { font-size: 12px; color: #b8ad1a; margin-bottom: 2px; }
.r-pat-cards { display: flex; flex-direction: column; gap: 0; }
.r-pat-card { position: relative; }
.r-pat-card img { width: 7vw; max-width: 38px; display: block; border-top: 1px solid #b8ad1a; border-radius: 4px 4px 0 0; }
.r-pat-card.hu img { outline: 2px solid #ff6600; }
.r-pat-card .hu-tag { position: absolute; right: -10px; top: 0; color: #ff6600; font-size: 12px; font-weight: 700; }
.r-pat-oil { font-size: 12px; color: #fff; margin-top: 2px; }
.r-cards-label { color: #fff; font-size: 13px; margin-right: 6px; }
.r-koubo { margin-top: 12px; border-top: 1px dashed #ffffff33; padding-top: 8px; }
.r-koubo-title { text-align: center; color: #f5c542; font-weight: 600; margin-bottom: 6px; }
.r-koubo-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr; font-size: 13px; padding: 4px 2px; }
.r-koubo-row span { text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-koubo-row span:first-child { text-align: left; }
.r-koubo-head { color: #a9cdbc; font-size: 12px; }
.r-koubo-row .win { color: #f5c542; }
.r-koubo-row .lose { color: #9fb8a8; }
.r-btns { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }
.r-btns button { min-width: 120px; height: 44px; background: linear-gradient(180deg,#f5c542,#e0a416); color: #5b3a00; font-weight: 600; }
.r-btns button.minor { background: rgba(255,255,255,.16); color: #fff; font-weight: 400; }

/* 横屏提示之外，小屏适配 */
@media (min-width: 600px) {
  .hcard { height: 100px; }
}