/*
 * 福州麻将牌桌布局（2026-10-18 按用户给的参考图重排，放在 mj.css、mj-fx.css 后面加载）：
 *   自己：手牌贴底占满一行，副露在手牌左边；头像在左下角（手牌上方），花排在手牌上方一行
 *   左右两家：头像贴边，旁边一竖列立着的牌（侧面看），再往里是吃碰杠和花（横躺的侧面牌）
 *   对家：顶上一横排立着的牌（牌背），吃碰杠、花、头像跟在后面
 *   中间：方位盘 + 金，四家打出的牌围着它，各自摆在自己那一边
 * 尺寸：
 *   --tw 自己手牌的宽度（mj.css 里按屏幕宽高算），--hh 手牌高
 *   --s  其余所有小牌（吃碰杠、花、打出去的牌、对家立着的牌、方位盘）的统一尺寸，按高度正好算出来：
 *        对家（吃碰杠 + 立着的牌一行）+ 一排花 + 两排打出的牌 + 方位盘 + 自己两排打出的牌 + 一排花 + 手牌（吃碰杠在手牌左边）= 桌子高度
 *        桌子高 = 屏幕高 - 48px；各处间隙合计约 36px；竖向一共 12.435 个 --s（7 排小牌 × 1.405 + 方位盘 2.6）
 *   --sh 小牌高，--stand 对家立牌高，--topz 对家立牌下沿，--midtop / --botz 中间区域的上下边，--sidew 左右两边各占的宽度
 */

.mjtable {
  --hh: calc(var(--tw) * 1.405);
  --s: max(9px, min(calc(var(--tw) * .6), calc((var(--gh, 352px) - 84px - var(--hh)) / 12.435)));
  --sh: calc(var(--s) * 1.405);
  --stand: calc(var(--s) * .8 * 1.43);
  --cardw: max(56px, calc(var(--tw) * 1.5));
  --topz: calc(var(--sh) + 8px);
  /* 中间区域的上下边：对家（吃碰杠 + 立牌）一行 + 花一行之后；自己手牌 + 花一行之前 */
  --midtop: calc(var(--sh) * 2 + 12px);
  --botz: calc(var(--hh) + var(--sh) + 16px);
  --sidew: calc(var(--cardw) + 16px + var(--tw) * 1.75);
}
.mjtable.n2 { --sidew: calc(var(--cardw) + 12px); }
.mjtable.frozen .mjmyfront { filter: brightness(.7); }

/* ---------- 横躺的侧面牌（左右两家的吃碰杠、花、打出的牌）和立着的牌 ---------- */
/* 侧面牌是斜着看的，牌面被压扁了：宽度取正面牌的 1.35 倍，看起来才和对家、自己的牌一样大 */
.mt.sd { --sw: calc(var(--s, 16px) * 1.35); width: var(--sw); height: calc(var(--sw) * .923); border-radius: calc(var(--sw) * .1); }
.mt.sd.sideback { background: url(mj/tiles/side_back.png) center / 100% 100% no-repeat; }
.mt.sd.gold::after { height: 68%; }
.mtstand { display: block; flex: none; background: center / 100% 100% no-repeat; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4)); }
.mtstand.top { width: calc(var(--s) * .8); height: var(--stand); background-image: url(mj/tiles/top_stand.png); }
/* 左右两家立着的牌：从上往下看到一片片的牌，外侧白色牌面、里侧绿色牌背，牌与牌之间一道缝 */
.mtstand.side { width: calc(var(--tw) * .4); height: calc(var(--tw) * .26); border-radius: 2px; filter: none;
  background: linear-gradient(90deg, #fbfbf2 0 26%, #cdd2be 31%, #36a852 35%, #1c7b34 100%);
  box-shadow: inset 0 -1.5px 0 rgba(0, 40, 10, .55), inset 0 1px 0 rgba(255, 255, 255, .45), 1px 1px 2px rgba(0, 0, 0, .3); }
.mjopp.right .mtstand.side { transform: scaleX(-1); }

/* ---------- 头像卡：头像在上，名字、分数在下；庄 / 金坎 / 花数小标贴在右上角 ---------- */
/* 头像卡不要深色底和边框，直接放在台呢上；文字加阴影保证看得清。轮到谁 / 等谁操作，亮的是头像 */
.mjtable .mjinfo { flex-direction: column; gap: 1px; width: var(--cardw); padding: 2px; border-radius: 0; background: none; border: 0; box-shadow: none; animation: none; }
.mjtable .mjinfo .mjname { line-height: 1.08; }
.mjtable .mjinfo .mjname b, .mjtable .mjinfo .mjname span, .mjtable .mjinfo .mjid { line-height: 1.08; text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 0 4px rgba(0, 0, 0, .5); }
.mjtable .mjinfo .mjid { color: #d9e6df; }
.mjtable .mjinfo.turn .avatar { box-shadow: 0 0 0 2px #ffd76a, 0 0 12px rgba(255, 215, 106, .9); }
.mjtable .mjinfo.waiting .avatar { animation: mjWaitAv 1s ease-in-out infinite alternate; }
@keyframes mjWaitAv { from { box-shadow: 0 0 0 2px rgba(255, 215, 106, .5), 0 0 4px rgba(255, 215, 106, .4); } to { box-shadow: 0 0 0 2px #ffd76a, 0 0 16px rgba(255, 215, 106, .95); } }
.mjtable .mjinfo .avatar { width: calc(var(--cardw) * .48); height: calc(var(--cardw) * .48); font-size: calc(var(--cardw) * .22); }
.mjtable .mjname { align-items: center; width: 100%; }
.mjtable .mjname b { max-width: 100%; font-size: calc(var(--cardw) * .18); }
.mjtable .mjname span { font-size: calc(var(--cardw) * .19); }
/* 玩家 ID（电脑显示「电脑」） */
.mjtable .mjid { font-style: normal; font-size: calc(var(--cardw) * .15); line-height: 1.2; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mjtable .mjtags { position: absolute; top: -5px; right: -7px; flex-direction: column; align-items: flex-end; gap: 1px; }
.mjtable .mjtag { font-size: calc(var(--cardw) * .16); padding: 0 4px; line-height: 1.5; }

/* ---------- 对手 ---------- */
.mjopp { position: absolute; z-index: 2; }
.mjmeld { display: inline-flex; gap: 0; padding: 1px; border-radius: 4px; background: rgba(255, 255, 255, .08); }
.mjmeld.agang .mt:not(.back):not(.sideback):nth-child(2), .mjmeld.agang .mt:not(.back):not(.sideback):nth-child(3) { filter: brightness(.9); }
.mjmelds { display: flex; gap: 3px; }
.mjflowers { display: flex; }

/* 左右两家：整块铺满桌子，里面各部分自己定位 */
.mjopp.left, .mjopp.right { inset: 0; pointer-events: none; }
.mjopp.left > *, .mjopp.right > * { pointer-events: auto; }
.mjopp.left .mjinfo { position: absolute; left: 6px; top: calc(var(--topz) + 4px); }
.mjopp.right .mjinfo { position: absolute; right: 6px; top: calc(var(--topz) + 4px); }
.mjopp.left .mjoppcards, .mjopp.right .mjoppcards {
  position: absolute; top: var(--topz); bottom: calc(var(--hh) + 16px); display: flex; align-items: center; gap: 3px;
}
.mjopp.left .mjoppcards { left: calc(var(--cardw) + 10px); }
.mjopp.right .mjoppcards { right: calc(var(--cardw) + 10px); flex-direction: row-reverse; }
.mjopp.left .mjbacks, .mjopp.right .mjbacks { display: flex; flex-direction: column; }
/* 吃碰杠：每组竖着叠，放不下就再起一列 */
.mjopp.left .mjmelds, .mjopp.right .mjmelds { flex-direction: column; flex-wrap: wrap; max-height: 100%; align-content: center; justify-content: center; }
.mjopp.left .mjmeld, .mjopp.right .mjmeld { flex-direction: column; }
.mjmeld .mt.sd + .mt.sd { margin-top: calc(var(--sw) * .923 * -.28); }
/* 花：横躺的小牌竖着叠，多了再起一列 */
.mjopp.left .mjflowers, .mjopp.right .mjflowers { flex-direction: column; flex-wrap: wrap; max-height: 100%; align-content: flex-start; justify-content: center; column-gap: 1px; }
/* 左右两家的花先留出两列的位置（一列放不下时第二列接着排，牌桌不跳）；第一列贴着吃碰杠 */
.mjopp.left .mjflowers, .mjopp.right .mjflowers { min-width: calc(var(--s) * 1.35 * 2 + 1px); }
.mjopp.right .mjflowers { flex-wrap: wrap-reverse; }
.mjflowers .mt.sd { --sw: calc(var(--s, 16px) * 1.35); }
/* 和打出的牌一样只压住牌边，牌面完整露出来 */
.mjflowers .mt.sd + .mt.sd { margin-top: calc(var(--sw) * .923 * -.28); }

/* 对家（旁观时自己那一家也一样摆在底下）：一横排立着的牌 + 吃碰杠 + 花 + 头像 */
/* 横跨整个桌面宽度、牌居中；头像卡单独放在角上（对家右上角，旁观时底下那家左下角） */
.mjopp.top, .mjopp.bottom { left: 0; right: 0; display: flex; justify-content: center; align-items: flex-start; pointer-events: none; }
.mjopp.top > *, .mjopp.bottom > * { pointer-events: auto; }
/* 对家这一行的右端固定在「16 张立牌正好居中」的位置：牌少了、有了吃碰杠，这一行往左伸缩，右端和头像都不动 */
.mjopp.top { top: 4px; right: calc(50% - var(--s) * 6.4); justify-content: flex-end; }
.mjopp.bottom.watchme { bottom: 6px; }
/* 对家的头像卡和另外三家一样（竖着的卡），紧跟在他的牌右边（不再放到角上） */
/* 对家头像固定在这一行右端再往右一点，不跟着牌移动 */
.mjopp.top .mjinfo { position: absolute; left: calc(100% + 8px); top: -4px; }
.mjopp.bottom .mjinfo { position: absolute; left: 6px; bottom: 0; }
/* 对家：吃碰杠和立着的牌一行（吃碰杠在左），前面（往下）一排花；旁观时底下那家反过来往上排 */
.mjoppline { display: flex; align-items: flex-end; gap: 6px; }
.mjopp.top .mjoppcards, .mjopp.bottom .mjoppcards { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.mjopp.bottom .mjoppcards { flex-direction: column-reverse; }
.mjopp.top .mjbacks, .mjopp.bottom .mjbacks { display: flex; }
.mjopp.top .mjmelds { flex-wrap: nowrap; }
/* 花摊开排，不叠 */
.mjopp.top .mjflowers, .mjopp.bottom .mjflowers { gap: 1px; }
/* 对家、自己前面的吃碰杠和花都是 --s 大小；这两排就算空着也占住位置，牌桌不会跳来跳去 */
.mjopp.top .mjmelds .mt.xs, .mjopp.bottom .mjmelds .mt.xs,
.mjopp.top .mjflowers .mt.xs, .mjopp.bottom .mjflowers .mt.xs, .mjmyfront .mjflowers .mt.xs { --w: var(--s); }
/* 花那一排就算空着也占住位置，牌桌不会跳来跳去 */
.mjopp.top .mjflowers, .mjmyfront .mjflowers { min-height: var(--sh); }

/* ---------- 自己 ---------- */
/* 右边空出约 1.5 张牌宽，摸牌位不贴着屏幕边（手机圆角、边缘不好点） */
.mjme { position: absolute; z-index: 4; left: 6px; right: max(6px, calc(var(--tw) * 1.5), env(safe-area-inset-right)); bottom: 6px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.mjmelds.mine { flex-wrap: nowrap; }
/* 摸牌位：没摸牌时也留着一张牌的宽度，手牌的位置就不会跳 */
.mjslot { width: var(--tw); flex: none; }
.mjhand { display: flex; align-items: flex-end; gap: 1px; padding-top: calc(var(--tw) * .4); }
.mjgap { width: calc(var(--tw) * .3); flex: none; }
.mjmeinfo { position: absolute; z-index: 4; left: 6px; bottom: calc(var(--hh) + 12px); }
/* 自己前面：一排花，花摊开不叠；从中间区域的左边开始排（left 由 mj.js 设） */
.mjmyfront { position: absolute; z-index: 3; left: var(--sidew); right: var(--sidew); bottom: calc(var(--hh) + 8px); display: flex; flex-direction: column; align-items: flex-start; gap: 3px; pointer-events: none; }
.mjmyfront .mjflowers { gap: 1px; }
/* 提示（轮到你出牌…）：手牌上方靠右 */
.mjtable > .mjhint { position: absolute; z-index: 5; right: calc(var(--sidew) + 4px); bottom: calc(var(--hh) + 8px); white-space: nowrap; }

/* 操作按钮：在摸牌位上方，最右边的按钮（过）和摸牌位右边对齐（右边留的空和手牌一样） */
.mjacts { position: absolute; z-index: 6; right: max(6px, calc(var(--tw) * 1.5), env(safe-area-inset-right)); bottom: calc(var(--hh) + 14px); display: flex; gap: 10px; align-items: center; }

/* ---------- 中间：方位盘 + 金，四家打出的牌各自摆在自己那一边 ---------- */
.mjmid {
  --rw: var(--s);
  /* 方位盘大小；中间一行的高度就是它 */
  --ccs: calc(var(--s) * 2.6);
  position: absolute; z-index: 1; left: var(--sidew); right: var(--sidew); top: var(--midtop); bottom: var(--botz);
  /* 实在放不下时裁掉，不压到对家、自己前面的牌 */
  overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) var(--ccs) minmax(0, 1fr); gap: 3px;
}
.mjcenter { grid-area: 2 / 2; display: flex; align-items: center; justify-content: center; gap: 4px; }
.mjgoldbox { display: flex; }
.mjriver { display: flex; flex-wrap: wrap; gap: 1px; overflow: hidden; min-width: 0; min-height: 0; }
.mjriver .mt.xs { --w: var(--rw); }
.mjriver .mt.sd { --sw: calc(var(--rw) * 1.35); }
/* 打出去的牌四家都按逆时针方向摆（每家从自己的左手往右手摆）：下边往右、右边往上、上边往左、左边往下；
   每家的新一行 / 新一列都往外（离桌子中间越来越远） */
/* 对家：从右往左，新的一行往上 */
.mjriver.top { grid-area: 1 / 2; justify-self: center; width: min(100%, calc(var(--rw) * 12 + 12px)); align-self: end; flex-direction: row-reverse; flex-wrap: wrap-reverse; max-height: 100%; }
/* 自己：从左往右，新的一行往下 */
.mjriver.bottom { grid-area: 3 / 2; justify-self: center; width: min(100%, calc(var(--rw) * 12 + 12px)); align-self: start; max-height: 100%; }
/* 左家：竖着排（占满中间的高度），从上往下，新的一列在外侧（往左） */
.mjriver.left { grid-area: 1 / 1 / 4 / 2; width: 100%; height: 100%; flex-direction: column; flex-wrap: wrap-reverse; justify-content: flex-start; align-content: flex-start; }
/* 右家：竖着排，从下往上，新的一列在外侧（往右） */
.mjriver.right { grid-area: 1 / 3 / 4 / 4; width: 100%; height: 100%; flex-direction: column-reverse; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; }
/* 左右两家打出的牌：像花牌一样一张压一张靠在一起（下面那张盖住上面那张的牌边），列与列之间留 1px */
.mjriver.left, .mjriver.right { row-gap: 0; column-gap: 1px; --ov: calc(var(--rw) * 1.35 * .923 * .28); }
/* 左右两边位置多，留三列（约 27 张）；再放不下时整桌牌河一起缩小 */
.mjriver.left, .mjriver.right { width: calc(var(--rw) * 1.35 * 3 + 2px); }
/* 每列最后一张会多伸出一截压边的长度，先留出来，不然量的时候总以为放不下 */
.mjriver.left { padding-bottom: var(--ov); }
.mjriver.right { padding-top: var(--ov); }
.mjriver.left .mt.sd { margin-bottom: calc(var(--sw) * .923 * -.28); }
.mjriver.right .mt.sd { margin-top: calc(var(--sw) * .923 * -.28); }

.mjtable .mjcompass { --cs: var(--ccs); }
.mjgoldbox .mt.xs { --w: calc(var(--s) * 1.15); }