/*
 * 六人五十K牌桌。布局参考用户给的竞品截图（手机横屏）：
 *   左上比分；自己在左下，逆时针出牌：下家右下，依次 右上、上右、上左、左上；每家头像 + 剩余张数 + 鬼数 + 吃/炸/勾；
 *   中间游戏名、玩法、桌牌分；轮到自己时中间是 过 / 提示 / 出牌；底部两排手牌，右下 510K / 排序 / 查分。
 * 颜色沿用霓虹夜场皮肤；我方黄、对方蓝，友绿、敌蓝。
 */
.wskscreen { padding-bottom: 0; --us: #ffd84a; --them: #6fb4ff; --mate: #2fd27a; --foe: #3d7bff; }
.wtable { --cw: clamp(30px, calc(var(--gh) * .127), 58px); /* 手牌（2026-10-20 缩小一点，矮屏幕上给牌桌多留高度） */ --mini: clamp(18px, calc(var(--gh) * .072), 30px);
  position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.wtable .card.selected { transform: none; }

/* ---------- 牌桌区域 ---------- */
.wfield { position: relative; flex: 1; min-height: 0; }

.wscore { position: absolute; left: 0; top: 0; z-index: 3; display: flex; gap: 14px; padding: 3px 10px; font-size: 11px; line-height: 1.35;
  border-radius: 8px; background: rgba(10, 4, 30, .6); border: 1px solid rgba(255, 255, 255, .12); }
.wsc { display: flex; flex-direction: column; }
.wsc span { color: var(--muted); }
.wsc .us { color: var(--us); }
.wsc .them { color: var(--them); }

.wtitle { position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center;
  pointer-events: none; white-space: nowrap; opacity: .5; }
.wtitle b { font-size: 26px; font-weight: 900; letter-spacing: 6px; color: rgba(255, 255, 255, .35); }
.wtitle span { font-size: 11px; font-weight: 800; color: rgba(255, 255, 255, .45); letter-spacing: 1px; white-space: pre; }
/* 桌牌分放在上面两家中间的空位，不占中间出牌的地方 */
.wpot { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); z-index: 3; padding: 2px 10px; border-radius: 10px; font-size: 12px; white-space: nowrap;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); color: #e6dcff; }
.wpot b { font-size: 17px; font-weight: 900; color: var(--us); text-shadow: 0 0 8px rgba(255, 216, 74, .6); }

/* 座位 */
.wseat { position: absolute; display: flex; align-items: flex-start; gap: 4px; z-index: 2; }
/* 左上、右上在比分框下面；自己、右下贴着桌面下沿（手机横屏高度很紧） */
.wseat.lt { left: 0; top: max(56px, 27%); }
.wseat.me { left: 0; top: auto; bottom: 2px; } /* 自己的头像贴着手牌上沿（不重叠的前提下尽量靠近手牌） */
.wseat.tl { left: 31%; top: 0; }
.wseat.tr { left: 57%; top: 0; }
.wseat.rt { right: 0; top: max(56px, 27%); flex-direction: row-reverse; }
.wseat.rb { right: 0; top: auto; bottom: 2px; flex-direction: row-reverse; } /* 和自己一样贴着桌面下沿 */
.wwho { position: relative; display: flex; align-items: flex-start; gap: 4px; }
.wseat.right .wwho { flex-direction: row-reverse; }
.wav { position: relative; cursor: pointer; }
.wav .avatar { width: 38px; height: 38px; font-size: 16px; }
.wseat.turn .wav .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--us), 0 0 14px var(--us); animation: wTurn 1s ease-in-out infinite; }
@keyframes wTurn { 50% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--us), 0 0 3px var(--us); } }
.wside { position: absolute; right: -4px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%; font-size: 10px; font-style: normal; font-weight: 900;
  display: flex; align-items: center; justify-content: center; color: #fff; border: 1.5px solid #fff; }
.wside.mate { background: var(--mate); }
.wside.foe { background: var(--foe); }
.wlead { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-weight: 900; color: var(--us);
  text-shadow: 0 0 6px rgba(255, 216, 74, .8), 0 1px 0 #7a3c00; }
.wside2 { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wseat.right .wside2 { align-items: flex-end; }
.wtop { display: flex; align-items: center; gap: 4px; height: 16px; }
.wseat.right .wtop { flex-direction: row-reverse; }
.wcount { min-width: 18px; height: 16px; padding: 0 3px; border-radius: 3px; font-size: 11px; font-weight: 900; line-height: 16px; text-align: center; color: #fff;
  background: rgba(20, 6, 40, .85); border: 1px solid #ff6b9a; box-shadow: 0 0 6px rgba(255, 79, 140, .55); text-shadow: 0 0 4px #ff6b9a; } /* 剩余张数：深色底 + 粉红霓虹框 */
.wcount.low { animation: wLow .8s ease-in-out infinite; }
@keyframes wLow { 50% { box-shadow: 0 0 10px #ff4f6a; } }
.wjk { display: inline-flex; align-items: center; gap: 1px; font-size: 11px; font-weight: 800; color: #ffe2b0; }
.wjk i { width: 15px; height: 15px; border-radius: 50%; font-size: 9px; font-style: normal; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(20, 6, 40, .85); border: 1px solid #ffd34d; color: #ffe08a; box-shadow: 0 0 5px rgba(255, 211, 77, .55); } /* 鬼数：金色霓虹圈 */
.wnm { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 700; }
/* 吃 / 炸 / 勾 排成一行（原来是三行）：省出高度给名字下面的 ID，手机横屏左边三家叠起来也不挤 */
.wstats { display: flex; flex-direction: row; gap: 3px; }
.wseat.right .wstats { flex-direction: row-reverse; }
.wst { display: flex; align-items: center; gap: 2px; height: 11px; }
.wseat.right .wst { flex-direction: row-reverse; }
.wsti { width: 11px; height: 11px; border-radius: 50%; font-size: 8px; font-style: normal; font-weight: 900; display: inline-flex; align-items: center; justify-content: center;
  color: #ffe08a; background: rgba(20, 6, 40, .85); border: 1px solid rgba(255, 211, 77, .8); } /* 吃 / 炸 / 勾：小金圈 */
.wst b { min-width: 16px; padding: 0 3px; border-radius: 6px; font-size: 9px; line-height: 11px; text-align: right; color: var(--us); background: rgba(0, 0, 0, .45); }
.wst b.neg { color: #ff6b8a; }
.wplace { align-self: flex-start; padding: 0 5px; border-radius: 6px; font-size: 10px; font-weight: 900; color: #2a1200; white-space: nowrap;
  background: linear-gradient(var(--gold-light), var(--gold)); }
.wplace.p6 { background: #5d5577; color: #ddd; }

/* 每家这一轮出的牌 / 过 */
.wlast { --cw: clamp(24px, calc(var(--gh) * .09), 40px); display: flex; align-items: center; }
.wlast .card { box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.wlast .wcards { display: flex; }
.wlast .wcards .card, .wlast .wlc { flex: none; }
/* 桌面出的牌：「10」压窄到和别的点数一样宽，每张只要露出 48% 就能看全点数和花色（一次出 15 张也排得下） */
.wlast .cr[aria-label="10"] svg { width: .7em !important; }
.wlast .wcards > * + * { margin-left: calc(var(--cw) * -.52); }
.wlast .wcards.dense > * + * { margin-left: calc(var(--cw) * -.6); }
.wlc { position: relative; }
.wtagc { position: absolute; right: -1px; top: -1px; z-index: 2; padding: 0 3px; font-size: 11px; font-style: normal; font-weight: 900; color: #fff; border-radius: 0 3px 0 4px; }
.wtagc.mate { background: var(--mate); }
.wtagc.foe { background: #e2474f; }
.wseat.tl .wlast, .wseat.tr .wlast { position: absolute; top: 100%; margin-top: 4px; }
.wseat.tl .wlast { left: 0; }
.wseat.tr .wlast { right: 0; }
.wseat.rb .wlast { margin-top: 4px; }
.wseat.lt .wlast, .wseat.rt .wlast { margin-top: 4px; } /* 往下放多少由 afterRender 按屏幕算（fitPlayed） */
.wlast.pass b { --n: #ff4fc0; display: inline-block; position: relative; padding: 1px 10px 2px; transform: rotate(-6deg);
  font-family: "PingFang SC", "Microsoft YaHei", "Heiti SC", sans-serif; font-size: 21px; font-weight: 900; font-style: normal; letter-spacing: 5px; text-indent: 5px;
  white-space: nowrap; color: #fff6fd; -webkit-text-stroke: .6px rgba(255, 140, 220, .9);
  text-shadow: 0 0 2px #fff, 0 0 6px var(--n), 0 0 12px var(--n), 0 0 22px #b14cff;
  border: 2px solid rgba(255, 170, 230, .95); border-radius: 9px;
  box-shadow: 0 0 6px var(--n), 0 0 14px rgba(177, 76, 255, .8), inset 0 0 8px rgba(255, 79, 192, .55); background: rgba(40, 6, 60, .45); }

/* 中间下方：自己出的牌，或者轮到自己时的按钮 */
.wmid { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); z-index: 3; display: flex; justify-content: center; }
.wmid .wlast.me { --cw: clamp(24px, calc(var(--gh) * .095), 42px); }
.wacts { display: flex; gap: 12px; align-items: center; }
/*
 * 自己的霓虹风按钮（用户要求别和参考图像，做成自己的风格）：
 *   出牌（green 类）= 实心的粉紫霓虹，和大厅里的主按钮一个色系，能出的时候有一道光扫过去；
 *   提示 / 过（orange 类）= 深色玻璃 + 青色（过是紫色）霓虹描边。按下去会往里陷一点、灯更亮。
 */
.wbtn { --n: #7af3ff; --ng: rgba(122, 243, 255, .55);
  position: relative; overflow: hidden; min-width: 96px; height: 36px; padding: 0 18px; border-radius: 12px; cursor: pointer;
  font-size: 16px; font-weight: 900; letter-spacing: 4px; text-indent: 4px; color: #f2fdff;
  background: linear-gradient(rgba(30, 14, 70, .92), rgba(12, 4, 34, .92)); border: 1.5px solid var(--n);
  text-shadow: 0 0 4px var(--n), 0 0 10px var(--ng);
  box-shadow: 0 0 8px var(--ng), inset 0 0 10px rgba(122, 243, 255, .18), 0 4px 10px rgba(0, 0, 0, .45);
  transition: transform .08s, box-shadow .12s, filter .12s; }
.wbtn::before { content: ''; position: absolute; left: 10px; right: 10px; top: 3px; height: 1.5px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); }
.wbtn:active:not(:disabled) { transform: scale(.96); box-shadow: 0 0 14px var(--n), inset 0 0 16px var(--ng), 0 2px 6px rgba(0, 0, 0, .45); }
.wbtn.orange { --n: #7af3ff; --ng: rgba(122, 243, 255, .55); }
.wbtn.orange[data-action="wskPass"] { --n: #c08bff; --ng: rgba(177, 120, 255, .55); color: #f6efff; }
.wbtn.blue { --n: #7af3ff; --ng: rgba(122, 243, 255, .55); }
.wbtn.green { --n: #ff7ad9; --ng: rgba(255, 90, 210, .6); border-color: rgba(255, 210, 245, .9); color: #fff;
  background: linear-gradient(135deg, #ff9ad0 0%, #ff4fa0 40%, #b14cff 100%);
  text-shadow: 0 1px 0 rgba(90, 0, 70, .6), 0 0 8px rgba(255, 255, 255, .5);
  box-shadow: 0 0 14px var(--ng), 0 0 26px rgba(177, 76, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .5), 0 4px 10px rgba(0, 0, 0, .45); }
.wbtn.green:not(:disabled)::after { content: ''; position: absolute; top: -30%; bottom: -30%; left: -40%; width: 26%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent); transform: skewX(-20deg);
  animation: wSweep 2.4s ease-in-out infinite; }
@keyframes wSweep { 0%, 55% { left: -40%; } 100% { left: 130%; } }
.wbtn:disabled { cursor: default; color: rgba(230, 220, 255, .38); border-color: rgba(200, 180, 255, .22); text-shadow: none;
  background: linear-gradient(rgba(40, 26, 80, .7), rgba(18, 8, 40, .75)); box-shadow: inset 0 0 8px rgba(0, 0, 0, .4); }
.wbtn:disabled::before { opacity: .2; }
.wacts.ask .wbtn { font-size: 14px; letter-spacing: 1px; text-indent: 1px; min-width: 0; }

/* ---------- 底部：手牌 + 右边三个按钮 ---------- */
/* 选中抬起的牌直接盖到桌面下沿上，不另外留空 */
.wbottom { position: relative; z-index: 4; flex: none; display: flex; align-items: flex-end; gap: 6px; }
/* 手牌区高度固定为两排的高度，牌靠右下：只剩一排时也贴着底部，桌面不会跟着跳 */
.whand { --step: calc(var(--cw) * .55); flex: 1; min-width: 0; min-height: calc(var(--cw) * 2.36); display: flex; flex-direction: column; justify-content: flex-end;
  touch-action: none; user-select: none; -webkit-user-select: none; }
.wrow { display: flex; justify-content: flex-end; }
.wrow .wc + .wc { margin-left: calc(var(--step) - var(--cw)); }
/* 下排盖住上排的下半截；上排露出 0.96 张牌宽的高度，左上角的点数和花色都露出来 */
.whand.rows2 .wrow + .wrow { margin-top: calc(var(--cw) * -.44); }
.wc { position: relative; flex: none; cursor: pointer; transition: transform .1s; }
.wc.sel { transform: translateY(calc(var(--cw) * -.3)); }
.wc.sel .card { box-shadow: 0 0 0 2px var(--cyan), 0 0 12px var(--cyan); }
.wtable.frozen .wc { cursor: default; }
/* 右下三个小牌子：斜切的深色玻璃 + 霓虹描边 + 线条图标（510K 金、排序 青、查分 粉） */
.wsidebtns { flex: none; display: flex; flex-direction: column; gap: 7px; padding: 0 4px 6px 0; }
.wsb { --n: #ffd34d; --ng: rgba(255, 211, 77, .5);
  display: flex; align-items: center; gap: 5px; width: 78px; height: 26px; padding: 0 8px 0 9px; cursor: pointer;
  border: 1.5px solid var(--n); border-radius: 6px; transform: skewX(-12deg);
  background: linear-gradient(90deg, rgba(30, 14, 70, .9), rgba(12, 4, 34, .85));
  box-shadow: 0 0 7px var(--ng), inset 0 0 8px rgba(255, 255, 255, .06); color: #fff;
  transition: transform .08s, box-shadow .12s, background .12s; }
.wsb > * { transform: skewX(12deg); }
.wsb i { flex: none; width: 15px; height: 15px; display: inline-flex; }
.wsb svg { width: 100%; height: 100%; fill: none; stroke: var(--n); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px var(--n)); }
.wsb span { flex: 1; text-align: center; font-size: 13px; font-weight: 900; letter-spacing: 1px; text-shadow: 0 0 5px var(--n); }
.wsb:active { transform: skewX(-12deg) scale(.95); background: linear-gradient(90deg, var(--ng), rgba(12, 4, 34, .85)); box-shadow: 0 0 12px var(--n); }
.wsb.k510 { --n: #ffd34d; --ng: rgba(255, 211, 77, .5); }
.wsb.sort { --n: #7af3ff; --ng: rgba(122, 243, 255, .5); }
.wsb.score { --n: #ff7ad9; --ng: rgba(255, 90, 210, .5); }

/* 特效画在 #stage 下的一张画布上（public/wsk-fx.js），不随页面重绘清掉 */
.fxcanvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 65; } /* 盖过摸勾搓牌放大框（60），不盖解散投票框（70） */

/* 刚出的牌：从出牌人那边飞进来，落下时轻轻弹一下、亮一下 */
.wlast { --fx: 0px; --fy: 0px; }
.wlast.lt { --fx: -70px; }
.wlast.tl, .wlast.tr { --fy: -40px; }
.wlast.rt, .wlast.rb { --fx: 70px; }
.wlast.me { --fx: -140px; --fy: 50px; }
.wcards.in { animation: wIn .38s cubic-bezier(.2, 1.3, .4, 1) both; animation-delay: var(--ind, 0ms); }
@keyframes wIn { 0% { transform: translate(var(--fx), var(--fy)) scale(.55) rotate(-4deg); opacity: 0; filter: brightness(1.8); }
  55% { opacity: 1; } 100% { transform: none; opacity: 1; filter: none; } }
/* 「过」：霓虹灯通电一样闪亮 */
.wlast.pass.in b { animation: wPass .42s linear both; animation-delay: var(--ind, 0ms); }
/* 霓虹灯通电：闪两下再亮住 */
@keyframes wPass { 0% { opacity: 0; transform: rotate(-6deg) scale(.85); } 20% { opacity: 1; } 30% { opacity: .25; } 45% { opacity: 1; } 55% { opacity: .5; }
  70%, 100% { opacity: 1; transform: rotate(-6deg); } }

/* ---------- 每局结算：胜利 VS 失败 ---------- */
.wresult { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 4px 0; }
.wresult .scroll { flex: 1; min-height: 0; }
.wvsgrid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 6px; }
.wvs { padding: 6px 12px 8px; border-radius: 12px; min-width: 0; }
.wvs.win { background: linear-gradient(135deg, rgba(196, 40, 40, .85), rgba(120, 18, 30, .85)); border: 1px solid #ff9a9a; }
.wvs.lose { background: linear-gradient(135deg, rgba(40, 70, 160, .85), rgba(22, 30, 90, .85)); border: 1px solid #9ab8ff; }
.wvs h3 { margin: 0 0 4px; text-align: center; font-size: 24px; font-weight: 900; letter-spacing: 4px;
  background: linear-gradient(#fff6c2, #ffb800); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .4)); }
.wvs.lose h3 { background: linear-gradient(#fff, #9fd0ff); -webkit-background-clip: text; background-clip: text; }
.wvs h3 small { margin-left: 8px; font-size: 12px; letter-spacing: 1px; -webkit-text-fill-color: rgba(255, 255, 255, .8); }
.wvs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wvs li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, .2); font-size: 13px; }
.wvs li b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpc { font-size: 11px; color: rgba(255, 255, 255, .75); }
.wg { font-weight: 900; min-width: 56px; text-align: right; }
.wleft { flex-basis: 100%; display: flex; --mini: 18px; }
.wleft .card + .card { margin-left: -9px; }
.wformula { margin: 6px 0 0; text-align: center; font-size: 13px; color: rgba(255, 255, 255, .9); }
.wformula b { font-size: 16px; }
.wformula span { margin-left: 8px; font-size: 11px; color: rgba(255, 255, 255, .7); }
.wvsmark { align-self: center; font-size: 34px; font-weight: 900; font-style: italic; background: linear-gradient(#ffe36b, #ff8a00);
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #7a3000); }
.wresbar { flex: none; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 4px 0 6px; }
.wresbar .wbtn { min-width: 140px; }

/* ---------- 总结算：我方 / 对方 ---------- */
.wfinal { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; padding: 4px 0; }
.wfin { display: flex; flex-direction: column; min-height: 0; border-radius: 12px; overflow: hidden; background: rgba(28, 10, 64, .7); border: 2px solid rgba(255, 255, 255, .18); }
.wfin.us { border-color: rgba(255, 79, 192, .8); box-shadow: 0 0 14px rgba(255, 79, 192, .35); }
.wfin.them { border-color: rgba(122, 243, 255, .75); box-shadow: 0 0 14px rgba(122, 243, 255, .3); }
.wfin h3 { margin: 0; padding: 4px; text-align: center; font-size: 17px; font-weight: 900; letter-spacing: 6px; color: #fff; }
/* 总结算我方 / 对方：粉紫、青蓝两种霓虹（原来的红 / 青绿是照参考图的） */
.wfin.us h3 { background: linear-gradient(90deg, rgba(255, 79, 160, .55), rgba(177, 76, 255, .55)); text-shadow: 0 0 8px #ff4fc0; }
.wfin.them h3 { background: linear-gradient(90deg, rgba(40, 140, 255, .5), rgba(122, 243, 255, .45)); text-shadow: 0 0 8px #7af3ff; }
.wfinbody { flex: 1; min-height: 0; display: flex; gap: 6px; padding: 4px 8px; overflow: auto; }
.wfinppl { flex: 1; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.wfinppl li { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.wfinppl li.me b { color: var(--us); }
.wfinppl li div { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.wfinppl .avatar { width: 32px; height: 32px; font-size: 13px; }
.wfinrounds { list-style: none; margin: 0; padding: 0; font-size: 11px; display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.wfintotal { position: relative; display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 2px 0 6px; }
.wfintotal span { font-size: 12px; color: var(--muted); }
.wfintotal b { font-size: 28px; font-weight: 900; background: linear-gradient(#ffd25e, #e86a00); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wstamp { position: absolute; right: 10px; bottom: 6px; transform: rotate(-12deg); padding: 0 8px; border: 3px solid; border-radius: 6px; font-size: 20px;
  font-style: normal; font-weight: 900; letter-spacing: 3px; opacity: .85; }
.wstamp.win { color: #ff5a4a; border-color: #ff5a4a; }
.wstamp.lose { color: #6fa8ff; border-color: #6fa8ff; }
.wstamp.tie { color: #f2c14e; border-color: #f2c14e; }
.wdiff { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.wdiff span { font-size: 13px; font-weight: 800; color: #ff6b6b; }
.wdiff b { font-size: 26px; font-weight: 900; color: var(--us); }

.wscoretbl tr.us td { color: var(--us); }
.wscoretbl tr.them td { color: var(--them); }

.short .wav .avatar { width: 32px; height: 32px; font-size: 14px; }

/* 炸弹时桌面震一下 */
.wtable.shake { animation: wShake .45s ease-out both; animation-delay: var(--sd, 0ms); }
@keyframes wShake { 0%, 100% { transform: none; } 15% { transform: translate(-5px, 3px); } 30% { transform: translate(5px, -3px); } 45% { transform: translate(-4px, -2px); }
  60% { transform: translate(3px, 2px); } 80% { transform: translate(-2px, 1px); } }

/* ---------- 实时语音 ---------- */
.vmicbtn.on { color: #fff; background: linear-gradient(180deg, #2ecc71, #1e9e55); border-color: #6ff0a6; box-shadow: 0 0 10px rgba(46, 204, 113, .6); }
.vmicbtn.wait { opacity: .55; }
.avatar .vmic {
  position: absolute; left: -5px; bottom: -4px; z-index: 3; width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 9px; font-style: normal;
  background: #1e9e55; box-shadow: 0 0 0 1.5px var(--surface);
}
.avatar.vtalk { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #2ecc71, 0 0 16px #2ecc71 !important; animation: vTalk .6s ease-in-out infinite alternate; }
@keyframes vTalk { from { filter: brightness(1); } to { filter: brightness(1.18); } }

/* ---------- 摸勾 ---------- */
.mgleft { font-size: 10px; font-weight: 800; color: var(--us); white-space: nowrap; }
.mgleft.done { color: var(--mate); }
.mgtable .wseat.turn .wav .avatar { animation-duration: 1.6s; }
.mgmid { bottom: 8px; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
.mgnow { display: flex; align-items: baseline; gap: 8px; padding: 2px 12px; border-radius: 10px; background: rgba(10, 4, 30, .6); border: 1px solid rgba(255, 255, 255, .15); }
.mgnow span { font-size: 11px; color: var(--muted); }
.mgnow b { font-size: 20px; font-weight: 900; color: var(--us); text-shadow: 0 0 8px rgba(255, 216, 74, .6); }
.mgbombs { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; max-width: 60vw; }
.mgbomb { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 8px; font-size: 11px; font-weight: 800; white-space: nowrap;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); color: #e6dcff; }
.mgbomb small { font-size: 9px; color: #ffb547; }
.mgbomb.has { border-color: var(--us); }
.mgbomb b { color: var(--us); }
.mghand .wc { cursor: default; }

/* 右下角盖着的牌：一闪一闪提示去搓 */
.mgbacks { flex: none; display: grid; grid-template-columns: repeat(4, auto); gap: 4px; align-items: end; justify-items: center; padding: 0 2px 4px; }
.mgb { cursor: pointer; }
.mgb .card { --cw: clamp(26px, calc(var(--gh) * .1), 44px); animation: mgGlow 1.4s ease-in-out infinite; }
.mgb:active .card { transform: translateY(-4px); }
@keyframes mgGlow { 50% { box-shadow: 0 0 0 1px #ffd1f4, 0 0 12px rgba(255, 90, 210, .9); } }
/* 牌堆下面一排：搓牌（从第一张盖着的开始搓，搓完自动接下一张）、全开 */
.mgbtns { grid-column: 1 / -1; display: flex; gap: 4px; width: 100%; }
.mgbtn { flex: 1; min-width: 0; padding: 4px 8px; font-size: 13px; }

/* 放大搓牌 */
.mgsq { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(4, 0, 14, .78); backdrop-filter: blur(2px); }
.mgsqbox { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mgsqcard { --cw: clamp(96px, calc(var(--gh) * .44), 200px); --p: 0; position: relative; width: var(--cw); height: calc(var(--cw) * 1.4);
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.mgsqcard .card { position: absolute; inset: 0; cursor: inherit; box-shadow: 0 6px 22px rgba(0, 0, 0, .6); }
.mgback { position: absolute; inset: 0; }
/* 搓开的边：一道亮边加阴影，像牌角被手指掀起来（位置、角度由 wsk.js 的 peel 按搓的方向算） */
.mgcurlwrap { position: absolute; inset: 0; overflow: hidden; border-radius: calc(var(--cw) * .1); pointer-events: none; }
.mgcurl { position: absolute; left: 0; top: 0; width: calc(var(--cw) * 2); height: calc(var(--cw) * .12); transform-origin: 0 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .9), rgba(255, 220, 245, .35) 45%, transparent); }
.mgsq.done .mgback, .mgsq.done .mgcurlwrap { display: none; }
.mgsq.done .mgface .card { animation: mgPop .45s ease-out; box-shadow: 0 0 0 2px var(--us), 0 0 26px rgba(255, 216, 74, .8); }
@keyframes mgPop { 0% { transform: scale(.92); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
.mgsq .hint { margin: 0; }
.mgsqbtns { display: flex; gap: 10px; }

/* 结算 */
.mgres, .mgfin { width: 100%; }
.mgres td, .mgfin td { vertical-align: middle; }
.mgres tr.me td, .mgfin tr.me td { background: rgba(255, 216, 74, .08); }
.mgres .mgbombs { justify-content: flex-start; max-width: none; }
.mgfinwho { display: flex; align-items: center; gap: 6px; }
.mgfinwho .avatar { width: 28px; height: 28px; font-size: 12px; }
.mgrounds { display: flex; flex-wrap: wrap; gap: 3px 6px; }
.mgrounds span { font-size: 12px; font-weight: 700; }

/* 亮勾：一行一个玩家往下排，自己在最下面；牌的大小按 6 行排满屏幕高度算 */
.mggou { padding: 0 6px; border-radius: 6px; font-size: 11px; font-weight: 900; color: #cfc6e8; background: rgba(0, 0, 0, .45); white-space: nowrap; }
.mggou.has { color: #2a1200; background: linear-gradient(var(--gold-light), var(--gold)); box-shadow: 0 0 8px rgba(255, 216, 74, .7); }
.mgshowlist { --cw: clamp(22px, calc((var(--gh) - 96px) / 6 / 1.4 - 4px), 46px); flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 3px; }
.mgshowhead { flex: none; display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.mgshowhead > b { font-size: 16px; font-weight: 900; color: var(--us); letter-spacing: 3px; }
.mgshowhead > span { font-size: 11px; color: var(--muted); }
.mgshowlist ul { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
.mgrow { flex: 1; min-height: calc(var(--cw) * 1.4 + 6px); display: flex; align-items: center; gap: 8px; padding: 2px 8px; border-radius: 10px;
  background: rgba(10, 4, 30, .45); border: 1px solid rgba(255, 255, 255, .08); }
.mgrow.me { background: rgba(255, 216, 74, .1); border-color: rgba(255, 216, 74, .45); }
.mgwho { flex: none; width: 190px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.mgwho .wav .avatar { width: 30px; height: 30px; font-size: 13px; }
.mginfo { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mgname { display: flex; align-items: center; gap: 5px; min-width: 0; }
.mgname b { font-size: 12px; max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mginfo .mgbombs { justify-content: flex-start; max-width: none; gap: 2px; }
.mginfo .mgbomb { padding: 0 4px; font-size: 9px; }
.mgcards { flex: 1; min-width: 0; display: flex; align-items: center; gap: calc(var(--cw) * .3); overflow: hidden; }
.mggroup { flex: none; display: flex; }
.mggroup .card { box-shadow: 0 0 0 1px var(--us), 0 2px 6px rgba(0, 0, 0, .5); cursor: default; }
.mggroup .card + .card { margin-left: calc(var(--cw) * -.45); } /* 每张露出 55%，看得到点数和花色 */
.mgcards.in .mggroup { animation: mgShowIn .45s ease-out both; animation-delay: calc(var(--i) * 60ms); }
.mgnone { font-size: 13px; font-weight: 800; color: var(--muted); opacity: .7; }
@keyframes mgShowIn { from { opacity: 0; transform: translateX(-12px) scale(.9); } to { opacity: 1; transform: none; } }
.mgnet { font-size: 11px; font-weight: 900; }
/* 每局结算的「准备 · 下一局」放在亮勾标题这一行的右边 */
.mgnext { margin-left: auto; display: flex; justify-content: flex-end; white-space: nowrap; }
.mgnext .hint { padding: 4px 12px; border-radius: 10px; background: rgba(10, 4, 30, .7); }

/* ---------- 王牌奖勾：开局亮王 ---------- */
.jkshow { position: fixed; inset: 0; z-index: 58; display: flex; align-items: center; justify-content: center; background: rgba(4, 0, 14, .55); }
.jkbox { --cw: clamp(24px, calc(var(--gh) * .1), 40px); padding: 10px 16px 8px; border-radius: 16px; background: linear-gradient(rgba(34, 16, 74, .96), rgba(12, 4, 34, .96));
  border: 1.5px solid #ffd34d; box-shadow: 0 0 18px rgba(255, 211, 77, .55), inset 0 0 14px rgba(255, 211, 77, .15); animation: jkIn .35s ease-out both; }
.jkbox h3 { margin: 0 0 6px; text-align: center; font-size: 20px; letter-spacing: 6px; color: #ffe08a; text-shadow: 0 0 8px #ffb800; }
.jkbox ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.jkbox li { display: flex; align-items: center; gap: 8px; }
.jkbox li .avatar { width: 30px; height: 30px; font-size: 12px; flex: none; }
.jkbox li > b { width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.jkcards { display: flex; }
.jkcards .card + .card { margin-left: calc(var(--cw) * -.55); }
.jkgou { font-size: 13px; color: #e9e2ff; white-space: nowrap; }
.jkgou em { font-style: normal; font-size: 18px; font-weight: 900; color: #ffd34d; text-shadow: 0 0 6px #ffb800; }
.jkbox .hint { margin: 6px 0 0; text-align: center; font-size: 11px; }
@keyframes jkIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }

/* ---------- 第二种布局「队伍对阵」：左边一列我方、右边一列对方，左右对称 ---------- */
/* 三行：上、中（竖直居中）、下（贴着手牌）；头像贴两边，出的牌紧挨着头像往中间排，整列对齐 */
.lay-team .wseat { align-items: center; gap: 8px; }
.lay-team .wseat.l1, .lay-team .wseat.l2, .lay-team .wseat.l3 { left: 0; right: auto; flex-direction: row; }
.lay-team .wseat.r1, .lay-team .wseat.r2, .lay-team .wseat.r3 { right: 0; left: auto; flex-direction: row-reverse; }
.lay-team .wseat.l1, .lay-team .wseat.r1 { top: 0; }
.lay-team .wseat.l2, .lay-team .wseat.r2 { top: 50%; transform: translateY(-50%); }
.lay-team .wseat.l3, .lay-team .wseat.r3 { top: auto; bottom: 2px; }
.lay-team .wseat .wlast { position: static; margin: 0; }
/* 比分、桌牌分挪到正上方中间（左上角让给我方第一家）；游戏名还是在中间淡淡地垫底 */
.lay-team .wscore { left: 50%; transform: translateX(-50%); padding: 2px 10px; gap: 12px; }
.lay-team .wpot { top: 56px; } /* 放在比分框正下方；准确位置由 fitTeam 按比分框实际高度再摆一次 */
.lay-team .wtitle { top: 50%; }
/* 两边的队伍颜色：我方一侧淡淡的粉光、对方一侧淡淡的青光 */
.lay-team .wfield::before, .lay-team .wfield::after { content: ''; position: absolute; top: 0; bottom: 0; width: 34%; pointer-events: none; z-index: 0; }
.lay-team .wfield::before { left: 0; background: linear-gradient(90deg, rgba(255, 79, 192, .1), transparent); }
.lay-team .wfield::after { right: 0; background: linear-gradient(270deg, rgba(122, 243, 255, .09), transparent); }
.wsb.layout { --n: #c08bff; --ng: rgba(177, 120, 255, .5); }
/* 名字下面的玩家 ID（电脑写「电脑」），和十三水、麻将一样 */
.wid { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; line-height: 1.15; color: rgba(230, 220, 255, .62); }

/*
 * 出牌位置固定（用户要求）：头像旁边那块信息（张数、名字、ID、吃炸勾）宽度固定，
 * 出的牌紧挨着它摆，所以不管名字长短、分数几位数、有没有「头游」标签，出牌的起点都不会动。
 */
.wseat .wwho { width: 146px; flex: none; }
.wseat .wside2 { flex: 1; min-width: 0; }
.wseat .wnm, .wseat .wid { max-width: 100%; }
.wst b { min-width: 20px; text-align: center; }
/* 头游 / 二游 …：浮在头像上方，不占位置（原来会把出的牌往外推） */
.wseat .wplace { position: absolute; top: -7px; left: 22px; z-index: 3; }
.wseat.right .wplace { left: auto; right: 22px; }
/* 过 / 提示 / 出牌：单独一层，放在中间那一排（top 由 fitPlayed / fitTeam 按屏幕算，固定位置） */
.wactsbox { position: absolute; left: 50%; top: 50%; transform: translateX(-50%); z-index: 4; display: flex; justify-content: center; white-space: nowrap; }
.wactsbox .wacts { gap: 8px; }
.wactsbox .wacts:not(.ask) .wbtn { min-width: 80px; padding: 0 12px; }

/* 队伍对阵：轮到自己出牌时按钮在自己这一排，上一手自己出的牌先藏起来 */
.wtable.lay-team.acting .wseat.r3 .wlast { visibility: hidden; }

/*
 * 打牌的座位（2026-10-20 用户要求）：牌桌上不显示 ID（点头像看），名字、吃 / 炸 / 勾放到头像下面，
 * 张数和鬼数挂在头像右上角——信息块从 146px 宽变成 96px，出牌的地方宽了一截。宽度还是固定的，出牌起点不会动。
 */
.wseat .wwho.wv { width: 96px; flex-direction: column; align-items: center; gap: 1px; }
.wseat.right .wwho.wv { flex-direction: column; }
.wwho.wv .wav { display: inline-block; }
.wwho.wv .wav .avatar { width: 36px; height: 36px; font-size: 15px; }
.wwho.wv .wtop { position: absolute; left: calc(100% + 1px); top: -2px; height: auto; flex-direction: column; align-items: flex-start; gap: 2px; z-index: 2; }
.wseat.right .wwho.wv .wtop { flex-direction: column; left: auto; right: calc(100% + 1px); align-items: flex-end; }
.wwho.wv .wjk { white-space: nowrap; }
.wwho.wv .wside2 { width: 100%; align-items: center; gap: 1px; }
.wseat.right .wwho.wv .wside2 { align-items: center; }
.wwho.wv .wnm { max-width: 96px; text-align: center; font-size: 11px; line-height: 1.15; }
.wwho.wv .wstats { justify-content: center; gap: 2px; }
.wseat.right .wwho.wv .wstats, .wseat.right .wwho.wv .wst { flex-direction: row; }
.wwho.wv .wst b { min-width: 16px; padding: 0 2px; }
.wwho.wv .wlead { top: auto; bottom: calc(100% + 1px); }
.wseat .wwho.wv .wplace { left: 50%; right: auto; transform: translateX(-50%); top: -9px; }

/* 逆时针布局也用两列，但左右不是按队伍分的，不要两边的队伍底色 */
.lay-team.lay-ring .wfield::before, .lay-team.lay-ring .wfield::after { display: none; }