/* ไพ่นกกระจอก 3D ออนไลน์ 4 คน  mockup_shop/pg-mahjong.css  (27 ต.ค. 2569) ใช้คู่ pg-zone.css */
:root{--mj-felt:#0f5a3a;--mj-wood:#6b3f22;--mj-ivory:#f6f0e1;--mj-chi:#2f6bff;--mj-pon:#12a150;--mj-kan:#9b51e0}

/* ช่องที่ JS ซ่อนด้วย hidden ต้องหายจริง แม้คลาสจะตั้ง display ไว้ */
.mj [hidden]{display:none!important}

/* ---------- ปุ่มภาษา (หน้ารวมห้อง + แถบในห้อง) ---------- */
.mj-hero-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mj-bar .mj-lang{padding:2px}
.mj-bar .mj-lang button{height:30px;min-width:38px;padding:0 7px}
.mj-lang{flex:none;display:flex;padding:3px;border-radius:9px;background:var(--ink-3);border:1px solid var(--line-d)}
.mj-lang button{white-space:nowrap;height:28px;min-width:44px;padding:0 10px;border-radius:7px;color:#cfd3dc;font:600 13px var(--f)}
.mj-lang button.on{background:var(--or);color:#fff}

.mj .pg-bal{flex:none}
.mj .pg-plus{flex:none}

/* ---------- หน้ารวมห้อง ---------- */
.mj-hero{position:relative;display:flex;align-items:center;gap:16px;overflow:hidden;padding:22px 22px 24px;border-radius:16px;color:#fff;margin-bottom:14px;
  background:radial-gradient(120% 140% at 85% 30%,#1d7a4f 0%,#0d4a30 45%,#0b0c0f 100%)}
.mj-hero-tx{position:relative;z-index:1;max-width:520px}
.mj-hero h1{margin:8px 0 6px;font:700 26px/1.25 var(--f)}
.mj-hero p{color:#d5e6dc;font-size:14px}
.mj-hero-b{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.mj-hero-tiles{position:relative;flex:1;min-width:0;height:150px}
.mj-ht{position:absolute;top:50%;left:50%;width:58px;border-radius:7px;box-shadow:0 6px 0 #d8cdb4,0 10px 0 var(--or),0 16px 22px rgba(0,0,0,.45);transform:translate(-50%,-50%)}
.mj-ht .mj-t{width:100%;height:auto;border-radius:7px}
.mj-ht.h0{transform:translate(calc(-330% - 50%),-56%) rotate(-10deg)}
.mj-ht.h1{transform:translate(calc(-220% - 50%),-34%) rotate(-6deg)}
.mj-ht.h2{transform:translate(calc(-110% - 50%),-58%) rotate(-2deg)}
.mj-ht.h3{transform:translate(calc(0 - 50%),-36%) rotate(2deg)}
.mj-ht.h4{transform:translate(calc(110% - 50%),-58%) rotate(5deg)}
.mj-ht.h5{transform:translate(calc(220% - 50%),-32%) rotate(8deg)}
.mj-ht.h6{transform:translate(calc(330% - 50%),-54%) rotate(12deg)}

.mj-rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.mj-rc{display:flex;flex-direction:column;gap:10px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.mj-rc-h{display:flex;align-items:flex-start;gap:8px}
.mj-rc-h b{flex:1;min-width:0;font-size:15px;line-height:1.35;word-break:keep-all;overflow-wrap:anywhere}
.mj-st{flex:none;display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:2px 8px;border-radius:10px;background:var(--ok-bg);color:var(--ok)}
.mj-st.on{background:#fff1f0;color:var(--bad)}
.mj-rc-m{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:13px;color:var(--mute)}
.mj-rc-m b{color:var(--text);font-size:15px}
.mj-lock{padding:1px 7px;border-radius:6px;background:var(--soft);border:1px solid var(--line);font-size:12px}
.mj-rid{margin-left:auto;font-size:12px}
.mj-rc-s{display:flex;align-items:center;gap:6px}
.mj-rc-c{margin-left:auto;font-weight:700;color:var(--mute)}
.mj-rc .pg-btn{width:100%}
.mj-none{grid-column:1/-1;padding:28px;text-align:center;color:var(--mute);background:#fff;border:1px dashed var(--line);border-radius:var(--r)}

/* วงกลมคน */
.mj-av{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:#fff;font:700 13px var(--fn);font-style:normal;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.mj-av.c0{background:linear-gradient(135deg,#ff8a5c,#ee4d2d)}.mj-av.c1{background:linear-gradient(135deg,#6f9bff,#2f6bff)}
.mj-av.c2{background:linear-gradient(135deg,#4fd08a,#12a150)}.mj-av.c3{background:linear-gradient(135deg,#c08bff,#9b51e0)}
.mj-av.c4{background:linear-gradient(135deg,#ffd36b,#e8a317)}.mj-av.c5{background:linear-gradient(135deg,#40d0d0,#00a3a3)}
.mj-av.c6{background:linear-gradient(135deg,#ff7a70,#e0352b)}.mj-av.c7{background:linear-gradient(135deg,#8a96aa,#4a5568)}
.mj-av.empty{background:var(--soft);color:var(--mute);border:1.5px dashed #c5cad3;box-shadow:none;font:500 10px var(--f)}

/* ---------- ในห้อง ---------- */
body.in-room{overflow:hidden;background:#0b0c0f}
.mj-room{height:calc(100vh - 56px);height:calc(100dvh - 56px)}
.mj-stage{position:relative;width:100%;height:100%;overflow:hidden;background:#14100c;user-select:none;-webkit-user-select:none}
.mj-cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:manipulation}

.mj-bar{position:absolute;left:0;right:0;top:0;z-index:4;display:flex;align-items:center;gap:8px;padding:8px 10px;background:linear-gradient(rgba(11,12,15,.85),rgba(11,12,15,0));color:#fff;pointer-events:none}
.mj-bar>*{pointer-events:auto}
.mj-ib{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:rgba(29,32,39,.82);border:1px solid var(--line-d);color:#e6e8ec}
.mj-ib[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:#1a1300}
.mj-ib.off{color:var(--mute-d)}
.mj-bar-t{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.mj-bar-t b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mj-bar-t small{font-size:12px;color:#cfd3dc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mj-sp{flex:1}
.mj-wall{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;padding:0 6px}
.mj-wall small{font-size:11px;color:#cfd3dc}
.mj-wall b{font:800 20px var(--fn);color:var(--gold)}

/* ป้ายคน 4 ทิศ */
.mj-seat{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border-radius:24px;background:rgba(11,12,15,.78);border:1px solid rgba(255,255,255,.12);color:#fff;max-width:230px;transition:box-shadow .2s,border-color .2s}
.mj-seat .mj-av{width:34px;height:34px;box-shadow:none}
.mj-seat-t{min-width:0;display:flex;flex-direction:column;line-height:1.2}
.mj-seat-t b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mj-wd{font-size:11px;color:#cfd3dc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mj-wd.dl{color:var(--gold);font-weight:600}
.mj-pt{font:700 14px var(--fn);color:var(--gold);margin-left:2px}
.mj-cnt{display:grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:var(--ink-3);font-size:12px;font-weight:700;color:#cfd3dc}
.mj-think{font-size:11px;color:var(--or-2);white-space:nowrap}
.mj-seat.turn{border-color:var(--or-2);box-shadow:0 0 0 2px var(--or-2),0 0 22px rgba(255,106,61,.55)}
.mj-seat.empty{opacity:.75}
.mj-seat.s2{top:54px;left:50%;transform:translateX(-50%)}
.mj-seat.s1{right:10px;top:42%}
.mj-seat.s3{left:10px;top:42%}
.mj-seat.s0{left:10px;bottom:calc(var(--hud,120px) + 8px)}

/* ข่าว + คำประกาศ */
.mj-feed{position:absolute;z-index:5;left:50%;top:104px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;width:min(92%,420px)}
.mj-fd{padding:5px 14px;border-radius:16px;background:rgba(11,12,15,.8);color:#fff;font-size:13px;text-align:center;animation:mjIn .25s ease-out;transition:opacity .4s}
.mj-fd.big{font-size:15px;font-weight:700;border:1px solid var(--gold)}
.mj-fd.out{opacity:0}
.mj-call{position:absolute;z-index:6;padding:8px 22px;border-radius:14px;font:800 30px/1.2 var(--f);color:#fff;background:rgba(11,12,15,.86);border:2px solid var(--gold);pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.6);transition:opacity .18s,transform .25s cubic-bezier(.3,1.6,.5,1)}
.mj-call.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.mj-call.at0{left:50%;bottom:calc(var(--hud,120px) + 70px);top:auto;transform-origin:center}
.mj-call.at0.on{transform:translate(-50%,0) scale(1)}
.mj-call.at0{transform:translate(-50%,0) scale(.6)}
.mj-call.at1{right:6%;left:auto;top:50%;transform:translate(0,-50%) scale(.6)}
.mj-call.at1.on{transform:translate(0,-50%) scale(1)}
.mj-call.at2{left:50%;top:120px;transform:translate(-50%,0) scale(.6)}
.mj-call.at2.on{transform:translate(-50%,0) scale(1)}
.mj-call.at3{left:6%;top:50%;transform:translate(0,-50%) scale(.6)}
.mj-call.at3.on{transform:translate(0,-50%) scale(1)}
.mj-call.dis{font-size:18px;font-weight:700;border-color:rgba(255,255,255,.3);padding:6px 14px}
.mj-call.chi{border-color:var(--mj-chi);color:#9db8ff}
.mj-call.pon{border-color:var(--mj-pon);color:#7be3a7}
.mj-call.kan{border-color:var(--mj-kan);color:#d6b4ff}
.mj-call.win{border-color:var(--gold);color:var(--gold);font-size:40px}

/* แถบปุ่ม (เหนือมือเรา) */
.mj-act{position:absolute;z-index:5;left:50%;bottom:calc(var(--hud,120px) + 6px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;width:min(96%,640px);pointer-events:none}
.mj-act>*{pointer-events:auto}
.mj-tip{display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:16px;background:rgba(11,12,15,.82);color:#fff;font-size:14px;text-align:center}
.mj-tip .mj-t{width:26px}
.mj-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.mj-b{display:inline-flex;align-items:center;justify-content:center;min-width:76px;height:46px;padding:0 18px;border-radius:12px;font:800 18px var(--f);color:#fff;background:var(--ink-3);border:1px solid var(--line-d);box-shadow:0 4px 0 rgba(0,0,0,.35);white-space:nowrap}
.mj-b:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.mj-b.chi{background:var(--mj-chi);border-color:var(--mj-chi)}
.mj-b.pon{background:var(--mj-pon);border-color:var(--mj-pon)}
.mj-b.kan{background:var(--mj-kan);border-color:var(--mj-kan)}
.mj-b.win{background:linear-gradient(#ffd56b,#f0a818);border-color:#f0a818;color:#3a2500;min-width:110px;animation:mjPulse 1s infinite}
.mj-b.go{background:var(--or);border-color:var(--or);min-width:150px}
.mj-b.pass{background:#3a3f4b;border-color:#4a505d;font-weight:700}
.mj-clock{position:absolute;right:0;top:-34px;padding:3px 10px;border-radius:12px;background:rgba(11,12,15,.82);color:#cfd3dc;font-size:13px;font-weight:700}
.mj-clock.hot{color:#fff;background:var(--bad)}

.mj-hint{position:absolute;z-index:4;left:var(--x);top:var(--y);transform:translate(-50%,-100%);padding:2px 8px;border-radius:8px;background:var(--gold);color:#1a1300;font-size:11px;font-weight:700;white-space:nowrap;pointer-events:none}
.mj-hint::after{content:"";position:absolute;left:50%;bottom:-5px;margin-left:-5px;border:5px solid transparent;border-bottom:0;border-top-color:var(--gold)}
.mj-waits{position:absolute;z-index:4;right:10px;bottom:calc(var(--hud,120px) + 8px);display:flex;align-items:center;gap:4px;padding:5px 8px;border-radius:12px;background:rgba(11,12,15,.8);border:1px solid var(--gold);color:var(--gold);font-size:12px;font-weight:700}
.mj-waits .mj-t{width:22px}

/* รอคนครบ */
.mj-wait{position:absolute;inset:0;z-index:7;display:grid;place-items:center;padding:16px;background:rgba(8,6,4,.55)}
.mj-wait-c{width:min(420px,100%);max-height:100%;overflow:auto;padding:18px;border-radius:16px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.mj-wait-h{display:flex;align-items:baseline;gap:8px}
.mj-wait-h b{flex:1;min-width:0;font-size:18px}
.mj-wait-h .k{color:var(--or);font-size:12px}
.mj-wait-i{display:flex;gap:14px;margin:4px 0 12px;font-size:13px;color:var(--mute)}
.mj-wait-i b{color:var(--text);font-size:15px}
.mj-wait-s{list-style:none;display:flex;flex-direction:column;gap:8px}
.mj-wait-s li{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:12px}
.mj-wait-s li.me{border-color:var(--or-ln);background:var(--or-bg)}
.mj-wait-s li.empty{border-style:dashed;color:var(--mute)}
.mj-wait-s span{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mj-wait-s em{font-style:normal;font-size:12px;font-weight:600;color:var(--mute)}
.mj-wait-s em.ok{color:var(--ok)}
.mj-wait-m{margin:12px 0 14px;font-size:13px;color:var(--mute);text-align:center}
.mj-wait-f{display:flex;gap:10px}
.mj-wait-f .pg-btn{flex:1;height:46px;font-size:15px}
.mj-wait-f .pg-btn.ghost{background:#fff;color:var(--text);border:1px solid var(--line)}

/* ---------- กล่อง ---------- */
.mj-dlg{width:min(460px,calc(100vw - 24px))}
.mj-f{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.mj-f>span{font-weight:600;font-size:13px}
.mj-f .pg-input{text-align:left;width:100%;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:9px;font:inherit}
.mj-f-n{font-size:12px;color:var(--mute)}
.mj-code{font:700 26px var(--fn)!important;letter-spacing:.4em;text-align:center!important}
#codeMsg{color:var(--bad);min-height:18px}
.mj-wait-f .pg-btn[aria-disabled=true]{opacity:.55}
.mj-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px}
.mj-pick button{height:40px;border-radius:9px;border:1px solid var(--line);background:#fff;font-weight:600;font-family:var(--fn),var(--f)}
.mj-pick button.on{border-color:var(--or);background:var(--or-bg);color:var(--or)}

.mj-how{width:min(560px,calc(100vw - 24px))}
.mj-tabs{flex:none;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:8px 10px 0;border-bottom:1px solid var(--line);background:#fff}
.mj-tabs::-webkit-scrollbar{display:none}
.mj-tabs button{flex:none;padding:8px 10px;font-size:13px;font-weight:600;color:var(--mute);border-bottom:2px solid transparent;white-space:nowrap}
.mj-tabs button.on{color:var(--or);border-bottom-color:var(--or)}
.mj-how .pg-dlg-b p{margin-bottom:10px;font-size:14px;line-height:1.7}
.mj-how-n{color:var(--mute);font-size:13px!important}
.mj-how-r{margin-bottom:12px}
.mj-how-r>span{display:block;margin-bottom:5px;font-size:13px;font-weight:600}
.mj-how-r>div{display:flex;flex-wrap:wrap;gap:3px}
.mj-how-r .mj-t{width:34px}
.mj-how-r.win>div{padding:8px;border-radius:10px;background:var(--mj-felt);gap:2px}
.mj-how-r.win .mj-t{width:30px}
.mj-t{display:inline-block;height:auto;border-radius:4px;box-shadow:0 2px 0 #d3c7ac,0 3px 0 var(--or)}
.mj-t.sm{width:30px}
.mj-t.xs{width:22px}
.mj-t.got{outline:2px solid var(--gold);outline-offset:1px}
.mj-steps{padding-left:20px;margin-bottom:12px}
.mj-steps li{margin-bottom:6px;line-height:1.6}
.mj-acts{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.mj-acts li{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.5}
.mj-acts .mj-b{flex:none;min-width:64px;height:34px;padding:0 10px;font-size:15px;box-shadow:none;animation:none}
.mj-rules{padding-left:18px;margin-top:10px}
.mj-rules li{margin-bottom:5px;font-size:14px;line-height:1.6}

.mj-fan{width:100%;border-collapse:collapse;font-size:14px}
.mj-fan th,.mj-fan td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:left}
.mj-fan th{font-size:12px;color:var(--mute);font-weight:600}
.mj-fan td:last-child,.mj-fan th:last-child{text-align:right;white-space:nowrap}
.mj-fan small{color:var(--mute)}
.mj-fan tfoot td{font-weight:700;border-bottom:0;font-size:16px;color:var(--or)}

.mj-res-how{margin-bottom:10px;font-weight:600}
.mj-res-h .k{display:block;margin-bottom:6px;color:var(--mute)}
.mj-res-tiles{display:flex;flex-wrap:wrap;gap:6px;padding:10px;border-radius:12px;background:var(--mj-felt);margin-bottom:12px}
.mj-meld{display:flex;flex-wrap:wrap;gap:1px}
.mj-res-tiles .mj-t{width:28px}
.mj-res-ph{display:flex;align-items:center;gap:10px;margin-top:14px;padding:0 10px;font-size:12px;color:var(--mute)}
.mj-res-ph span{flex:1}
.mj-res-ph em,.mj-res-ph b{font-style:normal;font-weight:600;min-width:64px;text-align:right}
.mj-res-p{list-style:none;margin-top:4px;display:flex;flex-direction:column;gap:6px}
.mj-res-p li{display:flex;align-items:center;gap:10px;padding:6px 10px;border:1px solid var(--line);border-radius:12px}
.mj-res-p li.me{border-color:var(--or-ln);background:var(--or-bg)}
.mj-res-p span{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mj-res-p em{font-style:normal;font-weight:700;min-width:64px;text-align:right}
.mj-res-p em.up{color:var(--ok)}
.mj-res-p em.dn{color:var(--bad)}
.mj-res-p b.n{min-width:64px;text-align:right;color:var(--mute)}
.mj-res-p b.mj-rank{min-width:0}
.mj-rank{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink-3);color:#fff;font-size:12px}
.mj-res-p li:first-child .mj-rank{background:var(--gold);color:#1a1300}

.mj-chi{display:flex;flex-direction:column;gap:8px}
.mj-chi-o{display:flex;justify-content:center;gap:4px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.mj-chi-o .mj-t{width:44px}
.mj-chi-o:hover{border-color:var(--or)}

@keyframes mjIn{0%{opacity:0;transform:translateY(-6px)}100%{opacity:1;transform:none}}
@keyframes mjPulse{0%,100%{box-shadow:0 4px 0 rgba(0,0,0,.35),0 0 0 0 rgba(255,200,61,.6)}50%{box-shadow:0 4px 0 rgba(0,0,0,.35),0 0 0 8px rgba(255,200,61,0)}}

/* ---------- มือถือ ---------- */
@media (max-width:640px){
  .mj-hero{flex-direction:column;align-items:stretch;padding:18px 16px}
  .mj-hero h1{font-size:21px}
  .mj-hero-tiles{order:-1;height:96px;flex:none}
  .mj-ht{width:42px}
  .mj-hero-b .pg-btn{flex:1 1 auto}
  .pg-top .pg-logo small{display:none}
  .mj-lang button{min-width:40px;padding:0 8px}
  .mj .pg-top-in{gap:8px;padding:0 10px}
}
.mj-stage.portrait .mj-seat{padding:4px 8px 4px 4px;gap:6px;max-width:160px}
.mj-stage.portrait .mj-seat .mj-av{width:28px;height:28px;font-size:11px}
.mj-stage.portrait .mj-seat-t b{font-size:12px}
.mj-stage.portrait .mj-seat.s1,.mj-stage.portrait .mj-seat.s2,.mj-stage.portrait .mj-seat.s3{top:54px;transform:none;max-width:calc(33.3% - 8px)}
.mj-stage.portrait .mj-seat.s3{left:6px}
.mj-stage.portrait .mj-seat.s2{left:50%;transform:translateX(-50%)}
.mj-stage.portrait .mj-seat.s1{right:6px}
.mj-stage.portrait .mj-seat:not(.s0) .mj-pt{display:none}
.mj-stage.portrait .mj-seat.s0{left:auto;right:6px;bottom:calc(var(--hud,120px) + 6px)}
.mj-stage.portrait .mj-act{bottom:calc(var(--hud,120px) + 50px)}
.mj-stage.portrait .mj-waits{right:auto;left:6px;bottom:calc(var(--hud,120px) + 6px)}
.mj-stage.portrait .mj-wall{display:none}
.mj-stage.portrait .mj-feed{top:112px}
.mj-stage.portrait .mj-call.at1,.mj-stage.portrait .mj-call.at2,.mj-stage.portrait .mj-call.at3{top:118px}
.mj-stage.portrait .mj-b{min-width:64px;height:44px;padding:0 12px;font-size:17px}
.mj-stage.portrait .mj-b.go{min-width:120px}
.mj-stage.portrait .mj-bar-t b{font-size:14px}

/* ---------- รูปโปรไฟล์ในวงกลม (ตัวอักษรอยู่ใต้ รูปเสียถอดออกเหลือตัวอักษร) ---------- */
.mj-av{position:relative;overflow:hidden}
.mj-av-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#fff}

/* ---------- ไม่โชว์แถบเลื่อน (เลื่อนได้เหมือนเดิม) ---------- */
.mj-dlg .pg-dlg-b,.mj-wait-c,.mj-tabs,.mj-coach-b{scrollbar-width:none;-ms-overflow-style:none}
.mj-dlg .pg-dlg-b::-webkit-scrollbar,.mj-wait-c::-webkit-scrollbar,.mj-tabs::-webkit-scrollbar,.mj-coach-b::-webkit-scrollbar{display:none}

/* ---------- ปุ่มซ้อม + แผงโค้ช ---------- */
.mj-prac{background:var(--gold);color:#2a1d00}
.mj-prac:hover{background:#ffd56b}
.mj-coach{position:absolute;z-index:6;left:10px;top:62px;width:min(340px,calc(100% - 20px));border-radius:14px;background:rgba(255,252,243,.97);color:#1b1d22;border:2px solid var(--gold);box-shadow:0 10px 30px rgba(0,0,0,.4);overflow:hidden}
.mj-coach-h{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;background:#fff3cf;text-align:left}
.mj-coach-h img{width:30px;height:30px;border-radius:50%;object-fit:cover;background:#fff}
.mj-coach-h b{font-size:14px}
.mj-coach-h small{flex:1;min-width:0;font-size:11px;color:#8a6a00;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mj-coach-x{width:12px;height:12px;border-right:2px solid #8a6a00;border-bottom:2px solid #8a6a00;transform:rotate(225deg);margin-top:5px}
.mj-coach.min .mj-coach-x{transform:rotate(45deg);margin-top:-5px}
.mj-coach.min .mj-coach-b{display:none}
.mj-coach-b{max-height:min(260px,40vh);overflow:auto;padding:8px 12px 10px;font-size:14px;line-height:1.55}
.mj-coach-b p{margin:0 0 6px}
.mj-coach-b p:last-child{margin-bottom:0}
.mj-coach-b b{color:#b5300f}
.mj-coach-t{float:right;margin:0 0 4px 8px}
.mj-coach-t .mj-t{width:34px}
.mj-stage.portrait .mj-coach{top:108px;left:8px;right:8px;width:auto}
.mj-stage.portrait .mj-coach-b{font-size:13px;max-height:30vh}