/* ══════════════════════════════════════════════════════════
   mahjong.css — 麻将牌桌（mahjong.js）
   翠绿绒面牌桌 + 金色描边；牌是象牙色牌面叠在翠绿牌身上（box-shadow 画出厚度）
   尺寸变量：--tw 自己的手牌宽（JS 按可用宽度算）、--ow 别家的牌宽、牌河用 cqmin 跟随中间方盘
   ══════════════════════════════════════════════════════════ */
#mj-root{position:fixed;inset:0;z-index:10800;display:none;flex-direction:column;color:#f3ead2;overflow:hidden;
  font-family:var(--font-body,system-ui);-webkit-tap-highlight-color:transparent;
  --lk-a:#f6d894;--lk-b:#e8a84c;--gold:#f3cf8a;--ow:clamp(12px,1.5vw,22px);
  background:
    radial-gradient(60% 50% at 50% 48%,rgba(120,220,170,.10),transparent 70%),
    repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.012) 0 2px,transparent 2px 5px),
    radial-gradient(120% 110% at 50% 40%,#1e6b50 0%,#114634 45%,#072419 80%,#03120c 100%)}
#mj-root.show{display:flex}
#mj-root [hidden]{display:none!important}

.mj-top{position:relative;z-index:30;display:flex;align-items:center;gap:8px;flex-shrink:0;
  padding:max(8px,env(safe-area-inset-top)) 14px 8px;background:linear-gradient(180deg,rgba(2,14,9,.72),rgba(2,14,9,0))}
.mj-top h3{margin:0;display:flex;align-items:center;gap:8px;font-size:1.05rem;font-weight:900;letter-spacing:3px;white-space:nowrap;color:#fbf1d6}
.mj-top h3 .gico{width:24px;height:24px}
.mj-top .sp{flex:1}
.mj-chip{min-width:0;font-size:.74rem;color:#e7dcc0;background:rgba(0,0,0,.28);border:1px solid rgba(243,207,138,.2);padding:3px 10px;border-radius:20px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mj-ico{flex:0 0 auto;position:relative;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;
  border:1px solid rgba(243,207,138,.22);background:rgba(255,255,255,.06);color:#f3ead2;cursor:pointer;touch-action:manipulation}
.mj-ico:hover{background:rgba(255,255,255,.15)}
.mj-ico svg.ico{width:18px;height:18px}
.mj-ico.off{opacity:.5}
.mj-ico.off::after{content:'';position:absolute;left:8px;right:8px;top:50%;height:2px;background:currentColor;transform:rotate(-40deg);border-radius:2px}
.mj-stage{flex:1;position:relative;z-index:2;display:flex;flex-direction:column;min-height:0}

/* ══ 牌 ══ */
.mj-t{--w:var(--tw,44px);--d:calc(var(--w) * .12);position:relative;display:inline-block;flex:0 0 auto;box-sizing:border-box;vertical-align:bottom;
  width:var(--w);height:calc(var(--w) * 1.36);margin-bottom:var(--d);border-radius:calc(var(--w) * .12);
  background:linear-gradient(180deg,#fffef8 0%,#f8f1df 60%,#ede2c7 100%);
  box-shadow:inset 0 0 0 max(1px,calc(var(--w) * .02)) rgba(140,105,50,.22),
    inset 0 calc(var(--w) * -.05) 0 rgba(170,135,70,.12),
    0 var(--d) 0 0 #2f9e6c,0 calc(var(--d) + 1px) 0 0 #166443,
    0 calc(var(--d) + var(--w) * .08) calc(var(--w) * .16) rgba(0,0,0,.42)}
.mj-t .mj-face{position:absolute;left:7%;top:5%;width:86%;height:90%;display:block;pointer-events:none}
.mj-t.back{background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.16) 0 16%,transparent 17%),
    linear-gradient(165deg,#4cc792 0%,#23905f 55%,#17704a 100%);
  box-shadow:inset 0 max(1px,calc(var(--w) * .03)) 0 rgba(255,255,255,.35),inset 0 0 0 max(1px,calc(var(--w) * .02)) rgba(0,40,20,.35),
    0 var(--d) 0 0 #efe6cf,0 calc(var(--d) + 1px) 0 0 #c9ba96,0 calc(var(--d) + var(--w) * .08) calc(var(--w) * .16) rgba(0,0,0,.42)}
.mj-t.hd,.mj-rot.hd{--w:var(--tw,44px)}
.mj-t.sm,.mj-rot.sm{--w:var(--ow)}
.mj-t.md,.mj-rot.md{--w:clamp(20px,4.2vw,32px)}
.mj-t.xs{--w:15px;--d:2px}
.mj-t.rv{--w:5.7cqmin;--d:calc(var(--w) * .09)}
.mj-rot{--d:calc(var(--w) * .12);position:relative;display:inline-block;flex:0 0 auto;vertical-align:bottom;
  width:calc(var(--w) * 1.36 + var(--d));height:calc(var(--w) + var(--d))}
.mj-rot > .mj-t{position:absolute;left:50%;top:calc(50% - var(--d) * .5);margin:0;transform:translate(-50%,-50%) rotate(90deg)}

/* ══ 牌桌布局 ══ */
.mj-table{position:relative;flex:1;min-height:0;display:grid;
  grid-template-columns:minmax(70px,.85fr) minmax(0,3fr) minmax(70px,.85fr);
  grid-template-rows:auto minmax(0,1fr) auto}
.mj-seat{display:flex;align-items:center;gap:8px;min-width:0;min-height:0}
.mj-seat.top{grid-column:1 / 4;grid-row:1;justify-content:center;padding:2px 12px 4px}
.mj-seat.left{grid-column:1;grid-row:2;flex-direction:column;justify-content:center;padding:0 6px 0 max(10px,env(safe-area-inset-left))}
.mj-seat.right{grid-column:3;grid-row:2;flex-direction:column;justify-content:center;padding:0 max(10px,env(safe-area-inset-right)) 0 6px}
.mj-center{grid-column:2;grid-row:2;container-type:size;min-width:0;min-height:0;display:grid;place-items:center}
.mj-board{position:relative;width:100cqmin;height:100cqmin}
.mj-me{grid-column:1 / 4;grid-row:3;position:relative;display:flex;flex-direction:column;min-width:0;
  padding:0 max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}

/* 别家手牌：上方横排牌背，左右竖排侧面 */
.mj-hand-o{display:flex;align-items:flex-end;gap:1px;min-width:0}
.mj-hand-o .mj-t.gap{margin-left:calc(var(--ow) * .45)}
.mj-seat.left .mj-hand-o,.mj-seat.right .mj-hand-o{flex-direction:column;align-items:center;gap:0}
.mj-seat.left .mj-hand-o .mj-t.back,.mj-seat.right .mj-hand-o .mj-t.back{width:calc(var(--ow) * 1.25);height:calc(var(--ow) * .56);margin-bottom:calc(var(--ow) * .13);border-radius:calc(var(--ow) * .1)}
.mj-seat.left .mj-hand-o .mj-t.gap,.mj-seat.right .mj-hand-o .mj-t.gap{margin-left:0;margin-top:calc(var(--ow) * .4)}
.mj-seat.left .mj-hand-o.reveal,.mj-seat.right .mj-hand-o.reveal{flex-direction:row;flex-wrap:wrap;justify-content:center;width:calc(var(--ow) * 7.3)}
.mj-melds-o{display:flex;flex-wrap:wrap;gap:3px calc(var(--ow) * .35);align-items:flex-end;justify-content:center;min-width:0}
.mj-seat.left .mj-melds-o,.mj-seat.right .mj-melds-o{flex-direction:column;align-items:center}
.mj-meld{display:inline-flex;align-items:flex-end;gap:1px}
.mj-meld + .mj-meld{margin-left:calc(var(--w,20px) * .1)}

/* ══ 玩家信息 ══ */
.mj-pan{position:relative;display:flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:999px;min-width:0;max-width:230px;
  background:rgba(3,20,13,.58);border:1px solid rgba(243,207,138,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:box-shadow .25s,border-color .25s}
.mj-pan.turn{border-color:rgba(243,207,138,.85);box-shadow:0 0 0 2px rgba(243,207,138,.25),0 0 22px rgba(243,207,138,.35)}
.mj-pan-av{position:relative;flex:0 0 auto}
.mj-pan .lk-av{box-shadow:0 0 0 2px rgba(243,207,138,.35)}
.mj-wind{position:absolute;right:-5px;bottom:-4px;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;
  font:800 11px/1 'KaiTi','STKaiti',serif;color:var(--gold);background:#0f3327;border:1px solid rgba(243,207,138,.55)}
.mj-wind.dealer{color:#fff;background:linear-gradient(180deg,#ff8a6a,#cf3129);border-color:#ffd6c8}
.mj-pan-tx{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.mj-pan-tx b{font-size:.8rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px;color:#fbf3dc}
.mj-score{font:700 .76rem/1.2 ui-monospace,'SF Mono',Menlo,monospace;color:#e7dcc0}
.mj-score.pos,.mj-res .pos,.mj-rank .pos{color:#86efac}
.mj-score.neg,.mj-res .neg,.mj-rank .neg{color:#fca5a5}
.mj-auto-tag{display:inline-flex;align-items:center;gap:3px;font-style:normal;font-size:.64rem;color:#bfe9d6}
.mj-auto-tag svg.ico{width:11px;height:11px}
/* 信息栏有 backdrop-filter，自成层叠上下文，里面的表情位 z-index 出不去；
   信息栏本身不抬层级的话，表情会被后面的牌（position:relative）和中间方盘盖住 */
.mj-pan{z-index:3}
.mj-pan .bk-emote-slot{position:absolute;left:100%;top:50%;margin:-26px 0 0 8px;--bk-slot:52px;z-index:5}
.mj-seat.right .mj-pan .bk-emote-slot{left:auto;right:100%;margin:-26px 8px 0 0}
.mj-pan .bk-say{z-index:6}

/* ══ 中间方盘 + 牌河 ══ */
.mj-riv{position:absolute;inset:0;display:flex;flex-wrap:wrap;align-content:flex-start;gap:.3cqmin .2cqmin;box-sizing:border-box;
  padding:62.4cqmin 25.6cqmin 0 38cqmin;pointer-events:none}
.mj-riv[data-pos="1"]{transform:rotate(-90deg)}
.mj-riv[data-pos="2"]{transform:rotate(180deg)}
.mj-riv[data-pos="3"]{transform:rotate(90deg)}
.mj-t.rv.last::after{content:'';position:absolute;left:50%;top:calc(var(--w) * -.42);border:calc(var(--w) * .2) solid transparent;border-top-color:#ffd166;border-bottom:0;
  transform:translateX(-50%);filter:drop-shadow(0 0 3px rgba(255,209,102,.9));animation:mjBob 1s ease-in-out infinite}
.mj-t.rv.claim{box-shadow:0 0 0 max(2px,.35cqmin) #ffd166,0 0 2.4cqmin rgba(255,209,102,.8),0 var(--d) 0 0 #2f9e6c}
@keyframes mjBob{50%{transform:translate(-50%,-30%)}}
.mj-compass{position:absolute;left:38cqmin;top:38cqmin;width:24cqmin;height:24cqmin;border-radius:3.2cqmin;
  background:radial-gradient(circle at 50% 30%,#1f604a,#0c2d22 75%);
  box-shadow:inset 0 0 0 .35cqmin rgba(243,207,138,.4),inset 0 0 3cqmin rgba(0,0,0,.45),0 1.6cqmin 3.2cqmin rgba(0,0,0,.45)}
.mj-cw{position:absolute;width:5.4cqmin;height:5.4cqmin;display:grid;place-items:center;border-radius:1.2cqmin;
  font:900 3.3cqmin/1 'KaiTi','STKaiti',serif;color:rgba(243,235,210,.5);transition:background .25s,color .25s,box-shadow .25s}
.mj-cw.p0{left:50%;bottom:.9cqmin;transform:translateX(-50%)}
.mj-cw.p1{right:.9cqmin;top:50%;transform:translateY(-50%) rotate(-90deg)}
.mj-cw.p2{left:50%;top:.9cqmin;transform:translateX(-50%) rotate(180deg)}
.mj-cw.p3{left:.9cqmin;top:50%;transform:translateY(-50%) rotate(90deg)}
.mj-cw.dealer{color:#ffb4a2}
.mj-cw.on{color:#2a1a02;background:linear-gradient(180deg,#ffeab0,#eeb24a);box-shadow:0 0 2.4cqmin rgba(255,200,90,.8)}
.mj-cc{position:absolute;inset:6.2cqmin;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5cqmin;text-align:center;line-height:1}
.mj-cc-t{font:800 4.8cqmin/1 ui-monospace,'SF Mono',Menlo,monospace;color:#ffe7a8;min-height:4.8cqmin;text-shadow:0 0 1.6cqmin rgba(255,200,90,.5)}
.mj-cc-t.low{color:#ff8a7a;animation:mjPulse .5s ease-in-out infinite alternate}
.mj-cc-w{font-size:1.9cqmin;color:rgba(243,234,210,.75)}
.mj-cc-w b{font-size:2.6cqmin;color:#fbf1d6;margin-right:.3cqmin}
.mj-cc-h{font-size:1.7cqmin;color:rgba(243,234,210,.55)}
@keyframes mjPulse{to{transform:scale(1.12)}}

/* ══ 自己 ══ */
.mj-me-bar{display:flex;align-items:center;gap:10px;min-width:0;padding:2px 0 4px}
.mj-me-tools{margin-left:auto;display:flex;gap:6px;flex:0 0 auto}
.mj-tool{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(243,207,138,.25);background:rgba(3,20,13,.55);color:#f3ead2;font-size:.78rem;font-weight:700}
.mj-tool:hover{background:rgba(243,207,138,.14)}
.mj-tool.on{background:linear-gradient(180deg,#ffe7a8,#eeb24a);color:#2a1a02;border-color:transparent}
.mj-tool svg.ico{width:16px;height:16px}
.mj-ting{min-width:0;overflow:hidden}
.mj-ting-in,.mj-tip-in{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 8px;padding:5px 10px;border-radius:12px;
  background:rgba(3,18,12,.72);border:1px solid rgba(243,207,138,.22);font-size:.76rem;color:#f3ead2;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.mj-ting-in > b{color:#ffe7a8;letter-spacing:1px}
.mj-tip-in.dim{color:rgba(243,234,210,.7)}
.mj-tip-in em{font-style:normal;font-size:.68rem;color:rgba(243,234,210,.55)}
.mj-w{display:inline-flex;align-items:flex-end;gap:2px}
.mj-w i{font:700 .68rem/1 ui-monospace,Menlo,monospace;color:var(--gold)}
.mj-me-main{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:calc(var(--tw,44px) * .55);min-width:0}
.mj-hand{display:flex;align-items:flex-end;gap:calc(var(--tw,44px) * .03);padding-top:calc(var(--tw,44px) * .42);min-width:0}
.mj-hand .mj-t{transition:transform .14s ease,box-shadow .14s ease,opacity .14s}
.mj-hand .mj-t[data-id]{cursor:pointer}
@media (hover:hover){.mj-hand .mj-t[data-id]:hover{transform:translateY(-9%)}}
.mj-hand .mj-t.sel{transform:translateY(-26%)!important}
.mj-hand .mj-t.sel.can{box-shadow:inset 0 0 0 2px #ffd166,0 var(--d) 0 0 #2f9e6c,0 calc(var(--d) + 1px) 0 0 #166443,0 0 calc(var(--w) * .5) rgba(255,209,102,.55)}
.mj-hand .mj-t.ting::before{content:'听';position:absolute;left:50%;top:calc(var(--w) * -.36);transform:translateX(-50%);z-index:2;
  font:800 max(9px,calc(var(--w) * .24))/1 'KaiTi','STKaiti',serif;color:#2a1a02;background:linear-gradient(#ffe7a8,#eeb24a);padding:1px 4px;border-radius:4px;
  box-shadow:0 2px 4px rgba(0,0,0,.35)}
.mj-hand .mj-t.hint{box-shadow:inset 0 0 0 2px #7dd3fc,0 var(--d) 0 0 #2f9e6c,0 calc(var(--d) + 1px) 0 0 #166443,0 0 calc(var(--w) * .6) rgba(125,211,252,.7)}
.mj-hand .mj-t.going{opacity:.35}
.mj-t.win{box-shadow:inset 0 0 0 2px #ffb03a,0 var(--d) 0 0 #2f9e6c,0 calc(var(--d) + 1px) 0 0 #166443,0 0 calc(var(--w) * .55) rgba(255,176,58,.85)}
.mj-gap{flex:0 0 auto;width:calc(var(--tw,44px) * .32)}
.mj-res .mj-gap{width:8px}
.mj-melds-me{display:flex;align-items:flex-end;gap:calc(var(--tw,44px) * .2);flex:0 0 auto}
.mj-melds-me .mj-t.hd,.mj-melds-me .mj-rot.hd{--w:calc(var(--tw,44px) * .78)}
.mj-me.spectator .mj-hand .mj-t{cursor:default}
.mj-spec-tip{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:rgba(243,234,210,.75);padding:4px 12px;border-radius:999px;background:rgba(0,0,0,.35)}
.mj-spec-tip svg.ico{width:14px;height:14px}
.mj-tip{position:absolute;left:0;bottom:calc(100% + 6px);z-index:11;pointer-events:none;max-width:60%}
.mj-me-main .mj-tip{left:0}

/* ══ 操作按钮 ══ */
.mj-acts{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);z-index:14;max-width:calc(100vw - 20px)}
.mj-acts-in{position:relative;display:flex;align-items:center;gap:10px;padding:9px 12px 12px;border-radius:20px;
  background:rgba(3,18,12,.78);border:1px solid rgba(243,207,138,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 14px 34px rgba(0,0,0,.5);animation:mjPop .22s cubic-bezier(.2,.9,.3,1.3)}
.mj-acts-in.chi{gap:8px}
@keyframes mjPop{from{transform:scale(.86);opacity:0}}
.mj-acts-tile{display:flex;flex-direction:column;align-items:center;gap:2px;margin-right:2px}
.mj-acts-tile i{font-style:normal;font-size:.62rem;color:var(--gold)}
.mj-act{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:50px;min-width:66px;padding:0 16px;border:0;border-radius:14px;cursor:pointer;
  font:900 1.4rem/1 'KaiTi','STKaiti','Kaiti SC',serif;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25);
  background:linear-gradient(180deg,#63a3ff,#2f63d0);box-shadow:0 4px 0 #1d3f8c,0 10px 18px rgba(0,0,0,.35);transition:transform .08s,box-shadow .08s,filter .15s;touch-action:manipulation}
.mj-act:hover{filter:brightness(1.1)}
.mj-act:active{transform:translateY(3px);box-shadow:0 1px 0 #1d3f8c,0 4px 10px rgba(0,0,0,.35)}
.mj-act.hu{background:linear-gradient(180deg,#ff9a66,#d8342a);box-shadow:0 4px 0 #8d1c16,0 10px 22px rgba(216,52,42,.45);animation:mjHuGlow 1.1s ease-in-out infinite alternate}
.mj-act.gang{background:linear-gradient(180deg,#bd98ff,#7648d6);box-shadow:0 4px 0 #472789,0 10px 18px rgba(0,0,0,.35)}
.mj-act.chi{background:linear-gradient(180deg,#58d8a0,#1c9760);box-shadow:0 4px 0 #0d5e3c,0 10px 18px rgba(0,0,0,.35)}
.mj-act.pass{min-width:56px;font-size:1.15rem;background:linear-gradient(180deg,#7b8494,#4d5564);box-shadow:0 4px 0 #2c313b,0 10px 18px rgba(0,0,0,.35)}
.mj-act .mj-t.xs{margin-bottom:2px}
.mj-act kbd{position:absolute;top:3px;right:6px;font:600 9px/1 ui-monospace,Menlo,monospace;opacity:.55;background:none;border:0;padding:0}
@keyframes mjHuGlow{to{box-shadow:0 4px 0 #8d1c16,0 0 30px rgba(255,140,80,.85)}}
.mj-acts-bar{position:absolute;left:14px;right:14px;bottom:4px;height:3px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.mj-acts-bar i{display:block;height:100%;background:linear-gradient(90deg,#ffd166,#f3cf8a);transform-origin:left;transition:transform .25s linear}
.mj-acts-note{font-size:.72rem;color:rgba(243,234,210,.62);white-space:nowrap}
.mj-chi{display:inline-flex;align-items:flex-end;gap:1px;padding:7px 7px 3px;border-radius:12px;cursor:pointer;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18)}
.mj-chi:hover{background:rgba(243,207,138,.2);border-color:rgba(243,207,138,.5)}
.mj-chi .mj-t.xs{--w:22px;--d:3px}
.mj-t.hl{box-shadow:inset 0 0 0 2px #ffd166,0 var(--d) 0 0 #2f9e6c}
.mj-acts-wait{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:rgba(0,0,0,.5);font-size:.8rem;color:#e7dcc0;white-space:nowrap}
.mj-acts-wait svg.ico{width:14px;height:14px}

#mj-root .bk-dlg .ic svg.ico{width:30px;height:30px;color:#ffd166}

/* ══ 吃碰杠胡 喊话 ══ */
.mj-calls{position:absolute;inset:0;pointer-events:none;z-index:24}
.mj-call{position:absolute;transform:translate(-50%,-50%);animation:mjCall 1.45s cubic-bezier(.2,.9,.3,1) forwards}
.mj-call b{display:block;font:900 clamp(34px,6vw,64px)/1 'KaiTi','STKaiti','Kaiti SC',serif;letter-spacing:.06em;
  background:linear-gradient(180deg,#fff7dc,#ffd166 55%,#e38b2b);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(90,40,0,.8)) drop-shadow(0 0 18px var(--glow,rgba(255,200,90,.8)))}
.mj-call.chi{--glow:rgba(88,216,160,.95)}
.mj-call.peng{--glow:rgba(99,163,255,.95)}
.mj-call.gang{--glow:rgba(189,152,255,.95)}
.mj-call.hu b{font-size:clamp(48px,9vw,96px)}
.mj-call.hu{--glow:rgba(255,110,70,1)}
.mj-call.p0{left:50%;top:70%}
.mj-call.p1{left:80%;top:48%}
.mj-call.p2{left:50%;top:22%}
.mj-call.p3{left:20%;top:48%}
@keyframes mjCall{0%{opacity:0;transform:translate(-50%,-50%) scale(2.2)}16%{opacity:1;transform:translate(-50%,-50%) scale(.92)}
  24%{transform:translate(-50%,-50%) scale(1)}78%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-64%) scale(1.02)}}
.bk-banner.mj-bn{font-family:'KaiTi','STKaiti','Kaiti SC',serif;letter-spacing:.2em;color:#fff4d6;text-shadow:0 4px 0 #6b4410,0 0 40px rgba(255,200,90,.8),0 8px 24px rgba(0,0,0,.6)}
.bk-banner.mj-bn.deal{font-size:clamp(1.6rem,5vw,3rem)}
.bk-banner.mj-bn.draw{color:#e2e8f0;text-shadow:0 4px 0 #334155,0 0 40px rgba(148,163,184,.7)}

/* ══ 一局结算 ══ */
.mj-res{position:absolute;left:0;right:0;bottom:0;top:52px;z-index:40;display:flex;align-items:center;justify-content:center;padding:12px;
  background:rgba(2,10,7,.5);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.mj-res.mini{top:auto;bottom:max(16px,env(safe-area-inset-bottom));background:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;pointer-events:none}
.mj-res-pill{pointer-events:auto;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 18px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(243,207,138,.4);background:rgba(3,18,12,.85);color:#fbf1d6;font-weight:800;box-shadow:0 10px 26px rgba(0,0,0,.45)}
.mj-res-pill svg.ico{width:16px;height:16px}
.mj-res-card{width:min(640px,100%);max-height:100%;overflow:auto;box-sizing:border-box;border-radius:22px;padding:18px 18px 14px;color:#f3ead2;
  background:linear-gradient(180deg,rgba(20,64,48,.97),rgba(6,26,19,.98));border:1px solid rgba(243,207,138,.32);box-shadow:0 30px 70px rgba(0,0,0,.6)}
.mj-res-card.in{animation:mjResIn .45s cubic-bezier(.2,.9,.3,1.12)}
@keyframes mjResIn{from{opacity:0;transform:translateY(24px) scale(.96)}}
.mj-res-hd{display:flex;align-items:center;gap:14px}
.mj-res-hd h2{margin:0;font-size:1.3rem;font-weight:900;color:#fff6dc}
.mj-res-hd p{margin:3px 0 0;font-size:.82rem;color:rgba(243,234,210,.72)}
.mj-res-badge{flex:0 0 auto;width:58px;height:58px;border-radius:17px;display:grid;place-items:center;
  font:900 1.35rem/1 'KaiTi','STKaiti',serif;color:#fff;background:linear-gradient(180deg,#ff9a66,#d8342a);box-shadow:0 8px 20px rgba(216,52,42,.4),inset 0 1px 0 rgba(255,255,255,.4)}
.mj-res-card.draw .mj-res-badge{background:linear-gradient(180deg,#9aa6b8,#4b5567);box-shadow:0 8px 20px rgba(0,0,0,.35)}
.mj-res-card.lose .mj-res-badge{background:linear-gradient(180deg,#8b94a6,#454d5c)}
.mj-res-card.win{border-color:rgba(255,209,102,.6);box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 60px rgba(255,190,90,.18)}
.mj-res-hand{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:14px 0 6px;padding:12px;border-radius:14px;background:rgba(0,0,0,.24)}
.mj-res-melds,.mj-res-con{display:inline-flex;flex-wrap:wrap;align-items:flex-end;gap:1px}
.mj-res-melds{gap:8px}
.mj-fans{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.mj-fan{display:inline-flex;align-items:baseline;gap:6px;padding:4px 11px;border-radius:999px;font-size:.8rem;background:rgba(243,207,138,.12);border:1px solid rgba(243,207,138,.28)}
.mj-fan i{font-style:normal;font-weight:800;color:var(--gold)}
.mj-fan.total{background:linear-gradient(180deg,#ffeab0,#eeb24a);border-color:transparent;color:#2a1a02}
.mj-fan.total i{color:#6b3a00}
.mj-res-tb{margin-top:12px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.mj-res-row{display:grid;grid-template-columns:minmax(0,1fr) 48px 48px 56px 56px 20px;align-items:center;gap:4px;padding:7px 10px;font-size:.82rem}
.mj-res-row:nth-child(even){background:rgba(255,255,255,.035)}
.mj-res-row.hd{font-size:.68rem;color:rgba(243,234,210,.55);background:rgba(0,0,0,.22)}
.mj-res-row.me{background:rgba(243,207,138,.1)}
.mj-res-row .nm{display:flex;align-items:center;gap:6px;min-width:0}
.mj-res-row .nm b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mj-res-row .v{text-align:right;font-variant-numeric:tabular-nums;color:rgba(243,234,210,.8)}
.mj-res-row .v.d{font-weight:800}
.mj-res-row .v.t{color:#fbf1d6}
.mj-res-row .rd{display:grid;place-items:center;color:#86efac}
.mj-res-row .rd svg.ico{width:14px;height:14px}
.mj-res-row .tg{flex:0 0 auto;font-style:normal;font-size:.62rem;font-weight:800;padding:1px 6px;border-radius:999px}
.mj-res-row .tg.d{background:rgba(255,120,100,.2);color:#ffb4a2}
.mj-res-row .tg.w{background:rgba(255,209,102,.22);color:#ffe7a8}
.mj-res-row .tg.l{background:rgba(148,163,184,.22);color:#cbd5e1}
.mj-res-act{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:14px}
.mj-res-act .lk-btn{padding:11px 20px;border-radius:13px;font-weight:800}
.mj-res-act .lk-btn svg.ico{width:16px;height:16px}
.mj-res-note{font-size:.78rem;color:rgba(243,234,210,.6)}

/* 整场排名（在 LobbyKit 结算卡里） */
.mj-rank{display:flex;flex-direction:column;gap:6px;margin:4px 0 2px;text-align:left}
.mj-rank-row{display:flex;align-items:center;gap:10px;padding:7px 12px;border-radius:12px;background:rgba(255,255,255,.05)}
.mj-rank-row.me{background:rgba(243,207,138,.14);box-shadow:inset 0 0 0 1px rgba(243,207,138,.35)}
.mj-rank-row b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mj-rank-row .sc{font:800 .95rem ui-monospace,Menlo,monospace}
.mj-rank-no{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:800 .78rem/1 ui-monospace,monospace;background:rgba(255,255,255,.1)}
.mj-rank-no.r1{background:linear-gradient(180deg,#ffe7a8,#eeb24a);color:#3a2400}
.mj-rank-no.r2{background:linear-gradient(180deg,#e5e7eb,#9ca3af);color:#1f2937}
.mj-rank-no.r3{background:linear-gradient(180deg,#f5c39b,#c07a45);color:#3a1d06}

/* ══ 规则 ══ */
.mj-rules{position:absolute;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:14px;background:rgba(2,10,7,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.mj-rules-card{width:min(680px,100%);max-height:100%;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,#154838,#08231a);border:1px solid rgba(243,207,138,.3);box-shadow:0 30px 70px rgba(0,0,0,.6);animation:mjResIn .3s ease}
.mj-rules-hd{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 10px 18px;border-bottom:1px solid rgba(243,207,138,.15)}
.mj-rules-hd h3{margin:0;display:flex;align-items:center;gap:8px;font-size:1.05rem;color:#fbf1d6}
.mj-rules-hd h3 svg.ico{width:18px;height:18px;color:var(--gold)}
.mj-rules-body{overflow:auto;padding:4px 18px 16px;font-size:.84rem;line-height:1.65;color:rgba(243,234,210,.88)}
.mj-rules-body h4{margin:14px 0 6px;font-size:.88rem;color:var(--gold);letter-spacing:1px}
.mj-rules-body ul{margin:0;padding-left:1.2em}
.mj-rules-body b{color:#fff3d0}
.mj-rules-fans{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px}
.mj-rules-fans div{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:8px;padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.05)}
.mj-rules-fans b{font-size:.86rem}
.mj-rules-fans i{justify-self:end;font-style:normal;font-weight:800;color:var(--gold)}
.mj-rules-fans span{grid-column:1 / 3;font-size:.74rem;color:rgba(243,234,210,.62);line-height:1.4}

/* ══ 窄屏 / 手机竖屏：三家并排在上方，中间方盘占满宽度 ══ */
@media (max-width:700px) and (orientation:portrait){
  #mj-root{--ow:11px}
  .mj-top{padding:max(6px,env(safe-area-inset-top)) 10px 6px}
  .mj-top h3 span,.mj-chip{display:none}
  .mj-table{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto minmax(0,1fr) auto}
  .mj-seat.left{grid-column:1;grid-row:1}
  .mj-seat.top{grid-column:2;grid-row:1}
  .mj-seat.right{grid-column:3;grid-row:1}
  .mj-seat.left,.mj-seat.top,.mj-seat.right{flex-direction:column;justify-content:flex-start;padding:2px 4px 4px;gap:4px}
  .mj-hand-o{display:none}
  .mj-seat .mj-melds-o{flex-direction:row!important;flex-wrap:wrap}
  .mj-pan{flex-direction:column;gap:2px;padding:4px 6px;border-radius:14px;max-width:100%;width:100%;box-sizing:border-box}
  .mj-pan-tx{align-items:center}
  .mj-pan-tx b{max-width:100%;font-size:.7rem}
  .mj-pan .lk-av{--sz:34px!important;width:34px;height:34px}
  .mj-pan .bk-emote-slot,.mj-seat.right .mj-pan .bk-emote-slot{left:50%;right:auto;top:100%;margin:4px 0 0 -22px;--bk-slot:44px}
  .mj-center{grid-column:1 / 4;grid-row:2;padding:0 4px}
  .mj-me{padding:0 8px max(6px,env(safe-area-inset-bottom))}
  .mj-me-bar{flex-wrap:wrap;gap:6px}
  .mj-me-bar .mj-pan{flex-direction:row;width:auto;border-radius:999px}
  .mj-me-bar .mj-pan .lk-av{--sz:30px!important;width:30px;height:30px}
  .mj-tool span{display:none}
  .mj-tool{width:34px;padding:0;justify-content:center}
  .mj-ting{order:3;flex-basis:100%}
  .mj-me-main{flex-wrap:wrap}
  .mj-act{height:44px;min-width:52px;padding:0 12px;font-size:1.2rem}
  .mj-acts-in{gap:7px;padding:8px 9px 11px}
  .mj-res{top:44px}
  .mj-res-row{grid-template-columns:minmax(0,1fr) 38px 38px 46px 46px 16px;padding:6px 8px;font-size:.76rem}
  .mj-call.p1{left:84%;top:10%}
  .mj-call.p2{left:50%;top:10%}
  .mj-call.p3{left:16%;top:10%}
}
/* 横屏手机：高度很紧，自己的信息栏收到手牌左边 */
@media (max-height:520px) and (orientation:landscape){
  #mj-root{--ow:11px}
  .mj-top{padding:max(4px,env(safe-area-inset-top)) 12px 4px}
  .mj-top .mj-ico{width:32px;height:32px}
  .mj-seat.top{padding:0 12px 2px}
  .mj-pan{padding:2px 10px 2px 2px}
  .mj-pan .lk-av{--sz:30px!important;width:30px;height:30px}
  .mj-me{flex-direction:row;align-items:flex-end;gap:8px}
  .mj-me-bar{flex-direction:column;align-items:flex-start;gap:4px;padding:0 0 6px}
  .mj-me-tools{margin-left:0}
  .mj-tool span{display:none}
  .mj-tool{width:32px;height:30px;padding:0;justify-content:center}
  .mj-me-main{flex:1}
  .mj-act{height:40px;min-width:50px;font-size:1.15rem}
  .mj-res{top:40px}
}
@media (prefers-reduced-motion:reduce){
  .mj-call,.mj-acts-in,.mj-res-card.in,.mj-rules-card{animation:none}
  .mj-t.rv.last::after,.mj-act.hu,.mj-cc-t.low{animation:none}
}