/*
 * 福州麻将牌桌（横屏）。牌的大小都按 --tw（自己手牌的宽度）等比例缩放：
 *   手牌 hand = --tw，副露 / 金 sm = 0.7，牌河 / 别人的牌背 xs = 0.5
 * --tw 按舞台宽高算：要放得下 17 张手牌 + 副露，也不能太高。
 */

.mjscreen { --tw: min(64px, calc((var(--gw, 760px) - 40px) / 19.5), calc((var(--gh, 352px) - 30px) * .15)); }

/* ---------- 牌：整张牌就是一张图（public/mj/tiles/kNN.png：白色牌面 + 下面一截绿色牌身 + 图案），背面是 back.png ---------- */
.mt {
  --w: calc(var(--tw, 40px) * .5);
  position: relative; flex: none; width: var(--w); height: calc(var(--w) * 1.405);
  border-radius: calc(var(--w) * .12);
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .45));
}
.mt img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.mt.hand { --w: var(--tw, 40px); cursor: pointer; transition: transform .12s; }
.mt.sm { --w: calc(var(--tw, 40px) * .7); }
.mt.xs { --w: calc(var(--tw, 40px) * .5); }
.mt.back { background: url(mj/tiles/back.png) center / 100% 100% no-repeat; }
/* 金：牌面罩一层淡金色 + 金色光晕 */
.mt.gold { filter: drop-shadow(0 0 calc(var(--w) * .1) rgba(255, 196, 30, .95)) drop-shadow(0 1px 1.5px rgba(0, 0, 0, .4)); }
.mt.gold::after {
  content: ''; position: absolute; left: 1px; right: 1px; top: 1px; height: 78%; border-radius: inherit; pointer-events: none;
  background: linear-gradient(170deg, rgba(255, 226, 110, .5), rgba(255, 196, 40, .3)); mix-blend-mode: multiply;
}
/* 金：左上角红色小标 */
.mtgold {
  position: absolute; left: 1px; top: 1px; z-index: 1; font-style: normal; font-size: max(8px, calc(var(--w) * .24)); font-weight: 900; line-height: 1;
  padding: 1px 2px; border-radius: 3px; color: #fff; background: linear-gradient(#ff5050, #c8102e); box-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
.mt.xs .mtgold { display: none; }
.mt.sel { transform: translateY(-24%); outline: 2px solid var(--primary); outline-offset: 1px; }
.mt.ok { outline: 2px solid #7affb0; outline-offset: 1px; }
.mt.last { outline: 2px solid #ff4fa0; outline-offset: 1px; animation: mjLast 1s ease-in-out infinite alternate; }
@keyframes mjLast { to { transform: translateY(-2px); } }

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

/* 每个人的头像、名字、分数、庄 / 花数 */
.mjinfo { position: relative; display: flex; align-items: center; gap: 5px; padding: 2px 8px 2px 2px; border-radius: 999px; background: rgba(20, 6, 48, .7); border: 1px solid rgba(255, 215, 106, .25); flex: none; }
.mjinfo .avatar { width: 30px; height: 30px; font-size: 13px; }
.mjinfo.turn { border-color: #ffd76a; box-shadow: 0 0 12px rgba(255, 215, 106, .7); }
.mjinfo.waiting { animation: mjWait 1s ease-in-out infinite alternate; }
@keyframes mjWait { from { box-shadow: 0 0 4px rgba(255, 215, 106, .4); } to { box-shadow: 0 0 16px rgba(255, 215, 106, .9); } }
.mjname { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.mjname b { font-size: 11px; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mjname span { font-size: 11px; font-weight: 800; }
.mjtags { display: flex; gap: 3px; }
.mjtag { font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 999px; background: rgba(255, 255, 255, .12); white-space: nowrap; }
.mjtag.zhuang { background: linear-gradient(#ff7a7a, #d22b4b); color: #fff; }
.mjtag.lock { background: linear-gradient(#fff2a8, #ffb800); color: #5a3200; }
.mjtag.hu { background: linear-gradient(#ffd76a, #ff9a1a); color: #4a2a00; }
.mjtag.pao { background: rgba(255, 107, 138, .3); color: #ffb3c4; }

.mjhint { font-size: 10px; line-height: 1.25; color: #ffe9b0; }

/* 操作按钮：胡 碰 杠 吃 听金坎 过 */
.mjacts { position: absolute; z-index: 6; right: 10px; bottom: calc(var(--tw) * 1.36 + 34px); display: flex; gap: 8px; align-items: center; }
.mjbtn {
  display: inline-flex; align-items: center; gap: 3px; min-width: 52px; height: 44px; padding: 0 12px; border: 0; border-radius: 14px;
  font-size: 18px; font-weight: 900; color: #fff; letter-spacing: 1px; cursor: pointer; text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  background: linear-gradient(#8a5cff, #5a2bd9); box-shadow: 0 4px 0 #3a1690, 0 6px 14px rgba(90, 43, 217, .5);
}
.mjbtn:active { transform: translateY(3px); box-shadow: none; }
.mjbtn.hu { background: linear-gradient(#ffd76a, #ff7a1a); color: #4a1a00; text-shadow: none; box-shadow: 0 4px 0 #a34a00, 0 0 18px rgba(255, 160, 40, .8); animation: mjHu .8s ease-in-out infinite alternate; }
@keyframes mjHu { to { transform: scale(1.06); } }
.mjbtn.peng { background: linear-gradient(#4fb4ff, #1561e8); box-shadow: 0 4px 0 #0c3d9e, 0 6px 14px rgba(21, 97, 232, .5); }
.mjbtn.chi { background: linear-gradient(#5fe36b, #1fa83a); box-shadow: 0 4px 0 #11702a, 0 6px 14px rgba(31, 168, 58, .45); }
.mjbtn.jinkan { background: linear-gradient(#fff2a8, #ffb800); color: #5a3200; text-shadow: none; box-shadow: 0 4px 0 #a37400; }
.mjbtn.jinkan.on, .mjbtn.hu.on { outline: 3px solid #fff; }
.mjbtn.pass { background: linear-gradient(#8e86a8, #5d5578); box-shadow: 0 4px 0 #3b3550; }
.mjbtn .mt { margin-left: 1px; }

/* ---------- 一局结算 ---------- */
.mjresult { flex: 1; min-height: 0; overflow: auto; padding: 6px 12px; display: flex; flex-direction: column; gap: 8px; }
.mjround h2 { margin: 0 0 4px; font-size: 18px; color: #ffd76a; }
.mjbreak { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: #ffe9b0; margin-bottom: 4px; }
.mjrows { display: flex; flex-direction: column; gap: 5px; }
.mjrrow { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 12px; background: rgba(20, 6, 48, .6); border: 1px solid rgba(255, 255, 255, .1); }
.mjrrow.win { border-color: #ffd76a; box-shadow: 0 0 14px rgba(255, 215, 106, .45); }
.mjrwho { display: flex; align-items: center; gap: 5px; min-width: 0; }
.mjrwho .avatar { width: 26px; height: 26px; font-size: 12px; flex: none; }
.mjrwho b { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mjrtiles { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; --tw: 36px; }
.mjrhand { display: inline-flex; gap: 1px; flex-wrap: wrap; }
.mjrfl { font-size: 12px; color: var(--muted); }
.mjrscore { font-size: 20px; min-width: 56px; text-align: right; }
.mjrbar { display: flex; justify-content: center; padding: 4px 0 6px; }
.sheet .mjround .mjrtiles { --tw: 30px; }

/* ---------- 创建房间：选游戏、麻将选项 ---------- */
.gametabs { display: flex; gap: 6px; margin-bottom: 8px; }
.gtab { flex: 1; padding: 8px 0; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); color: var(--text); font-size: 15px; font-weight: 800; cursor: pointer; }
.gtab.on { background: linear-gradient(var(--gold-light), var(--gold)); color: #4a2a00; border-color: transparent; box-shadow: 0 0 12px var(--gold-glow); }
.mjscore { display: inline-flex; gap: 2px; margin-right: 6px; }
.chip.sm { padding: 4px 8px; font-size: 12px; }
.mjrules { align-items: flex-start; }
.mjrules .chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* 手机矮屏 */
.short .mjinfo .avatar { width: 24px; height: 24px; font-size: 11px; }
.short .mjbtn { height: 36px; font-size: 15px; min-width: 44px; padding: 0 9px; }
.short .mjhint { font-size: 11px; }
.short .mjrrow { grid-template-columns: 110px 1fr auto; padding: 3px 6px; }
.short .mjrtiles { --tw: 28px; }