/* gamegx.css — หน้าโต๊ะเล่นแนวนอน 4 ฝั่งทแยง (โหลดหลัง layout.css) · ใช้เฉพาะ #app.gxl */
@media (min-aspect-ratio:5/4){
#app.gxl{display:block;position:relative;width:100%;height:100vh;height:100dvh;max-width:none;margin:0;padding:0;overflow:hidden;gap:0;
  --u:min(1vh,.62vw);--cw:clamp(38px,calc(var(--u)*11.5),96px);--chr:calc(var(--u)*30);
  background:transparent;font-family:Sarabun,sans-serif}
@supports (height:1dvh){#app.gxl{--u:min(1dvh,.62vw)}}
.gxl .gx-stage{position:absolute;inset:0;overflow:hidden}

/* ฝั่งทแยง 4 ชิ้น */
.gxl .gx-bg{position:absolute;inset:0;width:100%;height:100%}
.gxl .gx-q{stroke:#ffffff2e;stroke-width:1.5;vector-effect:non-scaling-stroke;fill:#2d2268;fill-opacity:.48}
.gxl .gx-q-top{fill:#3b2a86}.gxl .gx-q-left{fill:#26548f}.gxl .gx-q-right{fill:#6b2f78}.gxl .gx-q-bottom{fill:#1e6a72}
.gxl .gx-q.on{stroke:#2ff3ff;stroke-width:4;filter:drop-shadow(0 0 7px #2ff3ff);fill-opacity:.62}

/* ตัวละคร/อวตารของแต่ละฝั่ง */
.gxl .gx-art{position:absolute;pointer-events:none;opacity:.42;display:flex;align-items:center;justify-content:center;transition:opacity .25s}
.gxl .gx-art.on{opacity:1}
.gxl .gx-art-top{left:50%;top:0;transform:translateX(-50%);width:44%;height:26%}
.gxl .gx-art-left{left:0;top:26%;width:28%;height:40%}
.gxl .gx-art-right{right:0;top:26%;width:28%;height:40%}
.gxl .gx-art-bottom{left:0;bottom:0;width:17%;height:34%}
.gxl .gx-chr{display:block;width:100%;height:100%}
.gxl .gx-chr .avatar-img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 3px 4px #0009)}
.gxl .gx-emo{font-size:calc(var(--u)*20);line-height:1;filter:drop-shadow(0 3px 4px #0008)}
.gxl .gx-art-top .gx-emo{font-size:calc(var(--u)*17)}

/* แผงผู้เล่น: ชื่อ + แถวไพ่ซ้อนพร้อมจำนวนใบ */
.gxl .gx-seat,.gxl .gx-me{position:absolute;z-index:4;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*.5)}
.gxl .gx-top{left:50%;top:calc(var(--u)*1);transform:translateX(-50%)}
.gxl .gx-left{left:calc(var(--u)*2.5);top:calc(var(--u)*29.5)}
.gxl .gx-top .gx-pts{position:absolute;left:100%;bottom:0;white-space:nowrap;margin-left:calc(var(--u)*1)}
.gxl .gx-right{right:calc(var(--u)*2.5);top:calc(var(--u)*29.5)}
.gxl .gx-left,.gxl .gx-right{transform:none}
.gxl .gx-me{left:calc(var(--u)*2);bottom:calc(var(--u)*2.5)}
.gxl .gx-name{max-width:calc(var(--u)*30);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:calc(var(--u)*.5) calc(var(--u)*3);border-radius:99px;
  background:#120d2ee8;border:2px solid #f2b84b;color:#fff;font-weight:800;font-style:italic;font-size:max(10px,calc(var(--u)*2.9));box-shadow:0 2px 0 #0007}
.gxl .active .gx-name{border-color:#2ff3ff;box-shadow:0 0 10px #2ff3ff}
.gxl .gx-stack{display:flex;align-items:flex-end;gap:calc(var(--u)*.35)}
.gxl .gx-stack i,.gxl .gx-stack b{display:block;border-radius:calc(var(--u)*.7);border:2px solid #cdbcff;background:linear-gradient(#a487f0,#5b3cb3);box-shadow:0 2px 0 #0006}
.gxl .gx-stack i{width:calc(var(--u)*2.4);height:calc(var(--u)*5.6);opacity:.95}
.gxl .gx-stack b{width:calc(var(--u)*5.4);height:calc(var(--u)*7.4);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:max(11px,calc(var(--u)*3.6))}
.gxl .gx-pts{color:#ffe9b0;font-weight:700;font-size:max(9px,calc(var(--u)*2.3));text-shadow:0 1px 2px #000}
.gxl .gx-turn{font-style:normal;font-weight:800;font-size:max(9px,calc(var(--u)*2.2));padding:0 calc(var(--u)*1.4);border-radius:99px;background:#2ff3ff;color:#06222a;animation:gxp 1s ease-in-out infinite}
@keyframes gxp{50%{transform:scale(1.12)}}

/* มุมบนซ้าย/ขวา */
.gxl .gx-hud{position:absolute;z-index:6;left:calc(var(--u)*1.5);top:calc(var(--u)*1.2);display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--u)*.6)}
.gxl .gx-hud .pill{font-size:max(10px,calc(var(--u)*2.5));padding:0 calc(var(--u)*1.6);background:#0009}
.gxl .gx-gear{position:absolute;z-index:6;right:calc(var(--u)*1.5);top:calc(var(--u)*1.2);width:calc(var(--u)*8);height:calc(var(--u)*8);min-width:32px;min-height:32px;border-radius:50%;
  border:2px solid #5d6aa8;background:#1a2150;color:#fff;font-size:calc(var(--u)*4.4);line-height:1;cursor:pointer;box-shadow:0 0 0 3px #0006}

/* ศูนย์กลาง: กองจั่ว + กองทิ้ง */
#app.gxl .gx-hub{position:absolute;z-index:3;left:28%;right:28%;top:28%;bottom:40%;margin:0;padding:calc(var(--u)*1);border:3px solid #ffe45c;border-radius:calc(var(--u)*3);
  background-color:#0d0a22;background-image:linear-gradient(#0005,#0005),var(--table-image,linear-gradient(#171233,#0d0a22));background-size:cover;background-position:center;box-shadow:0 0 14px #ffe45c66,inset 0 0 18px #0009;display:flex;flex-direction:column;justify-content:center;gap:calc(var(--u)*.8);min-height:0;overflow:hidden}
#app.gxl .gx-hub .piles{grid-column:auto;grid-row:auto;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:calc(var(--u)*1.6);padding:0;width:100%;min-width:0;background:none;border:0}
#app.gxl .gx-hub .piles>div{max-width:none;min-width:0}
#app.gxl .gx-stock{flex:none;text-align:center}
#app.gxl .gx-disc{flex:1 1 0;min-width:0}
#app.gxl .gx-hub .back{width:calc(var(--u)*11);height:calc(var(--u)*15.5);font-size:max(12px,calc(var(--u)*3.6));display:flex;align-items:center;justify-content:center}
#app.gxl .gx-hub .dp{display:flex;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;padding:calc(var(--u)*1.2) calc(var(--u)*.8) calc(var(--u)*.4);scrollbar-width:thin;max-width:100%}
#app.gxl .gx-hub .dp .c.d{width:calc(var(--u)*10.4);height:calc(var(--u)*14.6);margin-left:calc(var(--u)*-3.8);font-size:max(11px,calc(var(--u)*3.2));flex:none}
#app.gxl .gx-hub .dp .c.d:first-child{margin-left:0}
#app.gxl .gx-hub .lab{display:block;text-align:center;color:#cfd3ff;font-size:max(9px,calc(var(--u)*2));margin-top:1px}
.gxl .gx-hint{margin:0 auto;max-width:96%;padding:calc(var(--u)*.4) calc(var(--u)*2.4);border-radius:99px;background:#000a;border:2px solid #ffffff2e;color:#ffd978;font-weight:700;text-align:center;
  font-size:max(10px,calc(var(--u)*2.5));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ไพ่ที่เกิด วางหน้าผู้เล่นแต่ละฝั่ง */
#app.gxl .zone{position:absolute;z-index:2;display:flex;gap:calc(var(--u)*1);align-items:center;justify-content:center;flex-wrap:wrap;pointer-events:none;min-height:0}
#app.gxl .zone .m{display:flex;flex-direction:row;pointer-events:auto;cursor:pointer;padding:calc(var(--u)*.4);border-radius:calc(var(--u)*1);background:#0000004d}
#app.gxl .zone .m .c{width:calc(var(--u)*6.2);height:calc(var(--u)*8.8);font-size:max(9px,calc(var(--u)*2.5));margin:0;transform:none}
#app.gxl .zone .m .c+.c{margin-left:calc(var(--u)*-3.4);margin-top:0}
#app.gxl .zone-top{left:30%;right:30%;top:calc(var(--u)*17)}
#app.gxl .zone-left{left:calc(var(--u)*1.5);width:25%;top:calc(var(--u)*49);align-content:flex-start;justify-content:flex-start}
#app.gxl .zone-right{right:calc(var(--u)*1.5);width:25%;top:calc(var(--u)*49);align-content:flex-start;justify-content:flex-end}
#app.gxl .zone-bottom{left:30%;right:30%;bottom:calc(var(--cw)*1.0 + var(--u)*4.5)}

/* ไพ่ในมือ: เรียงกลางล่าง ล้นขอบจอเล็กน้อยแบบภาพตัวอย่าง */
#app.gxl .gx-dock{position:absolute;z-index:5;left:17%;right:17%;bottom:calc(var(--cw)*-.3);margin:0;padding:0;background:none;border:0}
#app.gxl .gx-dock .hand{display:flex;flex-wrap:nowrap;justify-content:safe center;overflow-x:auto;overflow-y:visible;padding:calc(var(--u)*4) calc(var(--u)*1) 0;min-height:0;scrollbar-width:none}
#app.gxl .gx-dock .hand::-webkit-scrollbar{display:none}
#app.gxl .gx-dock .hand .c{flex:0 0 var(--cw);width:var(--cw);height:calc(var(--cw)*1.42);margin-left:calc(var(--cw)*-.26);font-size:max(14px,calc(var(--cw)*.42));transform:none;border-radius:calc(var(--u)*1.2);box-shadow:0 2px 6px #0008}
#app.gxl .gx-dock .hand .c:first-child{margin-left:0}
#app.gxl .gx-dock .hand .c.s{transform:translateY(calc(var(--u)*-3.5));box-shadow:0 0 0 3px #ffd34d,0 6px 10px #000a}

/* ปุ่มเรียงไพ่ (ซ้าย) · ปุ่มกระทำ (ขวา) */
.gxl .gx-tools{position:absolute;z-index:6;left:calc(var(--u)*2);bottom:calc(var(--u)*26);display:flex;gap:calc(var(--u)*.7)}
.gxl .gx-tools button{padding:calc(var(--u)*.8) calc(var(--u)*1.6);border-radius:99px;border:2px solid #ffffff55;background:#1b2b12dd;color:#c9ff6b;font-weight:800;font-size:max(10px,calc(var(--u)*2.5));cursor:pointer;box-shadow:0 2px 0 #0007}
.gxl .gx-tools button:nth-child(2){background:linear-gradient(#86e84a,#3fae1e);color:#0f2a06;border-color:#e6ffb8}
#app.gxl .gx-acts{position:absolute;z-index:6;right:calc(var(--u)*2);bottom:calc(var(--u)*2.5);width:calc(var(--u)*26);display:flex;flex-direction:column;gap:calc(var(--u)*1);margin:0;padding:0}
#app.gxl .gx-acts button{flex:none;width:100%;padding:calc(var(--u)*1.3) 0;font-size:max(13px,calc(var(--u)*3.4));border-radius:calc(var(--u)*2)}

#app.gxl .gx-lobbypile{flex-direction:column;gap:calc(var(--u)*.6)}
#app.gxl .gx-lobbypile .lab{color:#fff;font-weight:700}
.gxl .gx-pre{margin:0 auto;max-width:96%;text-align:center;color:#e6e9ff;font-size:max(9px,calc(var(--u)*2.1));text-shadow:0 1px 2px #000}
.gxl .gx-me .gx-pts,.gxl .gx-seat .gx-pts{background:#000a;border-radius:99px;padding:0 calc(var(--u)*1.4)}
}

/* หน้าจอบอกให้หมุนเครื่อง (แนวตั้งบนมือถือ/แท็บเล็ต) */
#rotHint{display:none}
@media (orientation:portrait) and (max-width:900px){
#rotHint{position:fixed;inset:0;z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#120d33f2;color:#fff;text-align:center;font-family:Sarabun,sans-serif;padding:24px}
#rotHint .rh-ico{font-size:72px;animation:rhr 2s ease-in-out infinite}
#rotHint b{font-size:22px;color:#ffd978}#rotHint small{font-size:14px;color:#cfd3ff}
#rotHint button{margin-top:8px;padding:12px 26px;border:0;border-radius:99px;background:linear-gradient(#ffa13a,#f0640d);color:#fff;font:700 16px Sarabun,sans-serif;box-shadow:0 4px 0 #a9440a}
}
@keyframes rhr{0%,20%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}

/* ===== ระบบสกิล ===== */
.sk-modal{position:fixed;inset:0;z-index:99990;background:#000a;display:flex;align-items:center;justify-content:center;font-family:Sarabun,sans-serif}
.sk-box{position:relative;width:min(92vw,560px);max-height:88vh;overflow:auto;background:linear-gradient(#241a55,#150f38);border:3px solid #f2b84b;border-radius:18px;padding:14px 16px;color:#fff}
.sk-box h3{margin:0 0 6px;font-size:20px;color:#ffd978}.sk-box h4{margin:12px 0 4px;color:#9fe8ff;font-size:14px}
.sk-coin{float:right;font-size:15px}.sk-x{position:absolute;right:10px;top:8px;border:0;background:#0006;color:#fff;border-radius:50%;width:28px;height:28px;display:none}
.sk-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid #ffffff1f}
.sk-row small{display:block;color:#cfd3ff;font-size:12px}.sk-row em{font-style:normal;color:#ffd978;font-size:12px}.sk-v{color:#9fe8ff!important}
.sk-pips{display:flex;gap:3px;margin-top:4px}.sk-pips i{width:14px;height:6px;border-radius:3px;background:#ffffff2a}.sk-pips i.on{background:linear-gradient(#ffd978,#f0a020)}
.sk-up,.sk-tg{border:0;border-radius:99px;padding:8px 14px;font:700 14px Sarabun,sans-serif;color:#fff;background:linear-gradient(#4cd36f,#1f9c4a);box-shadow:0 3px 0 #14703a;white-space:nowrap}
.sk-up:disabled{background:#4a5886;box-shadow:none;opacity:.7}.sk-tg{display:block;width:100%;margin:6px 0;background:linear-gradient(#a487f0,#5b3cb3);box-shadow:0 3px 0 #3a2680}
.sk-tag{font-size:11px;color:#cfd3ff;white-space:nowrap}.sk-test{display:block;margin:12px 0 4px;font-size:13px;color:#ffd978}
.sk-bar{position:absolute;z-index:7;left:50%;transform:translateX(-50%);bottom:calc(var(--cw,46px)*1 + var(--u,6px)*14);display:flex;flex-direction:row;gap:6px}
.sk-b{display:flex;align-items:center;gap:6px;border:2px solid #cdbcff;border-radius:99px;padding:5px 10px;background:linear-gradient(#a487f0,#5b3cb3);color:#fff;font:700 12px Sarabun,sans-serif;box-shadow:0 2px 0 #0006}
.sk-b span{font-size:16px}.sk-b i{font-style:normal;background:#000a;border-radius:99px;padding:0 6px;color:#ffd978}.sk-b.off{opacity:.5}
.sk-count{position:absolute;z-index:7;left:50%;transform:translateX(-50%);top:calc(60% + var(--u,6px)*.3);background:#000b;border:2px solid #9fe8ff;border-radius:99px;padding:2px 12px;color:#fff;font:700 12px Sarabun,sans-serif;white-space:nowrap}
.sk-count b{color:#ffd978}
.sk-toast{position:fixed;left:50%;top:14%;transform:translateX(-50%);z-index:99995;background:#000d;border:2px solid #ffd978;color:#fff;padding:8px 18px;border-radius:99px;font:700 14px Sarabun,sans-serif}
.c.d.hk,.c.hk{box-shadow:0 0 0 3px #2ff3ff,0 0 14px #2ff3ff!important;animation:gxp 1s ease-in-out infinite}
body.sk-mist::after{content:"";position:fixed;inset:auto 0 0 0;height:45%;z-index:9000;pointer-events:none;background:linear-gradient(#fff0,#ffffffb0);backdrop-filter:blur(2px);animation:gxp 1.2s ease-in-out infinite}
.hud-sk,.gx-sk{border:2px solid #f2b84b;background:#0009;color:#ffd978;border-radius:99px;font-weight:700;padding:0 10px;cursor:pointer}

/* ===== ล็อบบี้ห้องเพื่อน: อีโมจิ + แอนิเมชันสับไพ่ ===== */
.gxl .gx-emotes{display:flex;justify-content:center;gap:calc(var(--u,6px)*.6);flex-wrap:wrap;margin-top:calc(var(--u,6px)*.3)}
.gxl .gx-emotes button{border:0;background:#ffffff1f;border-radius:99px;padding:0 calc(var(--u,6px)*1.2);font-size:max(14px,calc(var(--u,6px)*3));line-height:1.5;cursor:pointer}
.lb-emote{position:fixed;bottom:36%;z-index:9400;display:flex;flex-direction:column;align-items:center;pointer-events:none;animation:lbrise 2.2s ease-out forwards}
.lb-emote span{font-size:44px;filter:drop-shadow(0 3px 4px #0008)}.lb-emote small{background:#000a;color:#fff;border-radius:99px;padding:0 10px;font:700 12px Sarabun,sans-serif}
@keyframes lbrise{0%{transform:translateY(20px) scale(.6);opacity:0}15%{transform:translateY(0) scale(1.1);opacity:1}100%{transform:translateY(-120px) scale(1);opacity:0}}
#shfx{position:fixed;inset:0;z-index:9500;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:46px;background:#120a24d9;backdrop-filter:blur(3px);transition:opacity .25s}
#shfx.out{opacity:0}#shfx b{color:#ffd978;font:800 20px Sarabun,sans-serif;text-shadow:0 2px 0 #0008}
#shfx .deckbox{transform:scale(1.7)}#shfx .deckbox.go i{animation:riff .85s ease-in-out 2 both;animation-delay:calc(var(--i) * 25ms)}
@media (prefers-reduced-motion:reduce){#shfx{display:none}}

/* ===== ห้องล็อบบี้ (หน้าแยก แนวนอน) ===== */
@media (min-aspect-ratio:5/4){
#app.rmv{display:block;position:relative;width:100%;height:100vh;height:100dvh;max-width:none;margin:0;padding:0;overflow:hidden;--u:min(1vh,.62vw);color:#fff;font-family:Sarabun,system-ui,sans-serif;background:transparent}
@supports (height:1dvh){#app.rmv{--u:min(1dvh,.62vw)}}
.rmv::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,#0000 0,#0b0620aa 85%),linear-gradient(#0b062055,#0b0620b8);pointer-events:none}
.rmv .rm-stage{position:absolute;inset:0}
.rmv .rm-top{position:absolute;z-index:5;left:calc(var(--u)*2);right:calc(var(--u)*2);top:calc(var(--u)*1.6);display:flex;align-items:center;gap:calc(var(--u)*1.4)}
.rmv .rm-back{width:calc(var(--u)*8);height:calc(var(--u)*8);min-width:34px;min-height:34px;border-radius:50%;border:2px solid #f2b84b;background:#1a1236;color:#ffd978;font-size:calc(var(--u)*5);line-height:1;cursor:pointer;box-shadow:0 3px 0 #0006}
.rmv .rm-title{display:flex;flex-direction:column;margin-right:auto;text-shadow:0 2px 3px #000a}
.rmv .rm-title b{font-size:max(15px,calc(var(--u)*4));color:#ffd978}.rmv .rm-title small{font-size:max(11px,calc(var(--u)*2.4));color:#e6dcff}
.rmv .pill{font-size:max(11px,calc(var(--u)*2.5));padding:0 calc(var(--u)*1.8);background:#0009}
/* ช่องผู้เล่น */
.rmv .rm-slots{position:absolute;z-index:3;left:calc(var(--u)*2.5);top:calc(var(--u)*13);bottom:calc(var(--u)*13);width:calc(100% - var(--u)*2.5 - 33%);display:flex;gap:calc(var(--u)*1.6)}
.rmv .rm-slot{position:relative;flex:1 1 0;min-width:0;border-radius:calc(var(--u)*2.4);overflow:hidden;border:3px solid #ffffff3a;background:linear-gradient(#3b2a8688,#1b1240cc);box-shadow:0 6px 16px #0008;transition:transform .2s,box-shadow .2s;padding:0;color:#fff;font-family:inherit}
.rmv .rm-slot.me{border-color:#ffd978}.rmv .rm-slot.host{background:linear-gradient(#6b4a1aaa,#2a1a40e0)}
.rmv .rm-slot.on{border-color:#2ff3ff;box-shadow:0 0 0 1px #2ff3ff,0 0 18px #2ff3ffaa,0 6px 16px #0008}.rmv .rm-slot.on.me{border-color:#2ff3ff}
.rmv .rm-art{position:absolute;inset:0 0 calc(var(--u)*9) 0;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.rmv .rm-chr{display:block;width:100%;height:100%}.rmv .rm-chr img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 4px 6px #0009)}
.rmv .rm-emo{font-size:calc(var(--u)*24);line-height:1;align-self:center;filter:drop-shadow(0 4px 6px #0008)}
.rmv .rm-chip{position:absolute;top:calc(var(--u)*1.2);right:calc(var(--u)*1.2);font-style:normal;font-weight:800;font-size:max(10px,calc(var(--u)*2.2));padding:0 calc(var(--u)*1.4);border-radius:99px;background:#000b;border:2px solid #ffffff44}
.rmv .rm-slot.on .rm-chip{border-color:#2ff3ff;color:#bff9ff}.rmv .rm-slot.host .rm-chip{border-color:#f2b84b;color:#ffe49a}
.rmv .rm-plate{position:absolute;left:0;right:0;bottom:0;height:calc(var(--u)*9);display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(#0000,#0a0618ee 40%);text-shadow:0 1px 3px #000}
.rmv .rm-plate b{font-size:max(13px,calc(var(--u)*3.3));max-width:92%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rmv .rm-plate small{font-size:max(10px,calc(var(--u)*2.1));color:#cfd3ff}
.rmv .rm-slot.empty{border:3px dashed #ffffff55;background:#ffffff10;cursor:pointer}.rmv .rm-slot.empty:active{transform:scale(.98)}
.rmv .rm-plus{position:absolute;inset:0 0 calc(var(--u)*9) 0;display:flex;align-items:center;justify-content:center;font-size:calc(var(--u)*14);color:#ffffff66}
.rmv .rm-slot.bot{opacity:.9}
.rmv .rm-hint{position:absolute;z-index:4;left:calc(var(--u)*2.5);width:calc(100% - var(--u)*2.5 - 33%);bottom:calc(var(--u)*4);text-align:center;font-weight:700;font-size:max(12px,calc(var(--u)*2.9));color:#ffd978;text-shadow:0 2px 3px #000}
/* แผงข้อมูลห้อง */
.rmv .rm-panel{position:absolute;z-index:4;right:calc(var(--u)*2);top:calc(var(--u)*13);bottom:calc(var(--u)*3);width:calc(29% - var(--u)*2);display:flex;flex-direction:column;gap:calc(var(--u)*1.4)}
.rmv .rm-card{background:#120a2ae6;border:3px solid #f2b84b;border-radius:calc(var(--u)*2.2);padding:calc(var(--u)*1.4) calc(var(--u)*2);box-shadow:0 5px 14px #0008}
.rmv .rm-code{display:flex;align-items:center;gap:calc(var(--u)*1.2);padding-bottom:calc(var(--u)*1);margin-bottom:calc(var(--u)*.6);border-bottom:1px dashed #ffffff40}
.rmv .rm-code small{color:#cfd3ff;font-size:max(10px,calc(var(--u)*2.1))}.rmv .rm-code b{font-size:max(18px,calc(var(--u)*5));letter-spacing:3px;color:#ffd978;margin-right:auto}
.rmv .rm-code button{border:0;border-radius:99px;padding:calc(var(--u)*.6) calc(var(--u)*1.6);background:linear-gradient(#ffa13a,#f0640d);color:#fff;font:700 max(11px,calc(var(--u)*2.3)) Sarabun,sans-serif;cursor:pointer}
.rmv .rm-row{display:flex;justify-content:space-between;gap:8px;padding:calc(var(--u)*.5) 0;font-size:max(11px,calc(var(--u)*2.5))}.rmv .rm-row span{color:#cfd3ff}.rmv .rm-row b{color:#fff;text-align:right}
.rmv .rm-emotes{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*.8)}
.rmv .rm-emotes button{border:0;border-radius:calc(var(--u)*1.4);background:#ffffff1f;padding:calc(var(--u)*.4) 0;font-size:max(18px,calc(var(--u)*4));line-height:1.3;cursor:pointer}
.rmv .rm-acts{margin-top:auto;display:flex;flex-direction:column;gap:calc(var(--u)*1)}
.rmv .rm-acts button{width:100%;padding:calc(var(--u)*1.5) 0;font-size:max(14px,calc(var(--u)*3.6));border-radius:calc(var(--u)*2)}
.rmv .rm-acts button.gray{background:linear-gradient(#6b7bbf,#3d4a8a);box-shadow:0 3px 0 #252f66;color:#fff}
}

/* ===== หน้าสรุป: เล่นต่อ ===== */
.po{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.po-go{border:0;border-radius:99px;padding:10px 28px;font:800 clamp(15px,2.6vw,19px) Sarabun,sans-serif;color:#fff;background:linear-gradient(#4cd36f,#1f9c4a);box-shadow:0 4px 0 #14703a;cursor:pointer}
.po-go.done{background:#4a5886;box-shadow:none;opacity:.85;cursor:default}
.po-cd{opacity:.9;font-weight:700}.po-cd.hot{color:#ffe66b;animation:gxp .6s ease-in-out infinite}
.po-st{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.po-p{background:#0007;border:2px solid #ffffff33;border-radius:99px;padding:0 10px;font:700 12px Sarabun,sans-serif;color:#cfd3ff}.po-p.y{border-color:#2ff3ff;color:#bff9ff}

/* ===== Find Match ===== */
.mm-spin{display:block;width:calc(var(--u,6px)*9);height:calc(var(--u,6px)*9);border:5px solid #ffffff33;border-top-color:#2ff3ff;border-radius:50%;animation:mmr 1s linear infinite}
@keyframes mmr{to{transform:rotate(360deg)}}
.rmv .rm-slot.searching{cursor:default}
.mm-cd{position:fixed;inset:0;z-index:9300;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0b062099;pointer-events:none}
.mm-cd small{color:#ffd978;font:800 clamp(16px,3vw,24px) Sarabun,sans-serif}.mm-cd b{font:900 clamp(80px,22vw,170px)/1 Sarabun,sans-serif;color:#fff;text-shadow:0 0 30px #2ff3ff,0 6px 0 #0008;animation:gxp 1s ease-in-out infinite}
.mm-modal{position:fixed;inset:0;z-index:9350;display:flex;align-items:center;justify-content:center;background:#000a}
.mm-box{width:min(92vw,460px);background:linear-gradient(#241a55,#150f38);border:3px solid #f2b84b;border-radius:18px;padding:16px 18px;color:#fff;text-align:center;font-family:Sarabun,sans-serif}
.mm-box h3{margin:0 0 6px;color:#ffd978;font-size:20px}.mm-box p{margin:0 0 12px;color:#e6dcff}.mm-box small{display:block;margin-top:8px;color:#cfd3ff}
.mm-btns{display:flex;gap:10px;justify-content:center}.mm-btns button{flex:1;border:3px solid transparent;border-radius:14px;padding:12px 8px;font:800 15px Sarabun,sans-serif;color:#fff;background:linear-gradient(#a487f0,#5b3cb3);box-shadow:0 4px 0 #3a2680;cursor:pointer}
.mm-btns button.on{border-color:#2ff3ff;box-shadow:0 0 14px #2ff3ff}