/* the battleground's own screen (js/moba.js "the battleground's own screen", 2026-10-24): the user's design 3 of 5,
   a MOBA lobby laid out at 1280 x 720 and scaled to the window. Heaven (blue) left, inferno (red) right, a gold seam. */
#mzui{position:fixed;inset:0;z-index:60;background:#120814;overflow:hidden;font-family:Prompt,Mali,sans-serif;color:#eef;user-select:none}
#mzui[hidden]{display:none}
#mzui button{font-family:inherit;white-space:nowrap;cursor:pointer}
#mzui button:disabled{cursor:default}
#mzui img{display:block}
.mz-stage{position:absolute;left:0;top:0;width:1280px;height:720px;transform-origin:0 0;overflow:hidden}
.mz-bg{position:absolute;inset:0;overflow:hidden}
.mz-bg .half{position:absolute;top:0;bottom:0;width:60%}
.mz-bg .half.l{left:0;background:url(../assets/moba/gd/floor_heaven.png) center/340px;clip-path:polygon(0 0,100% 0,72% 100%,0 100%)}
.mz-bg .half.r{right:0;background:url(../assets/moba/gd/floor_inferno.png) center/340px;clip-path:polygon(28% 0,100% 0,100% 100%,0 100%)}
.mz-bg .half.l::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#071a3cf5 0,#0b2a5ccc 60%,#1a4a8a99)}
.mz-bg .half.r::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,#2a0612f5 0,#5a1228cc 60%,#8a1f3a99)}
.mz-bg .seam{position:absolute;left:50%;top:-30px;bottom:-30px;width:6px;background:linear-gradient(#fff0,#fff 20%,#ffd36a 50%,#fff 80%,#fff0);transform:translateX(-50%) skewX(-12deg);box-shadow:0 0 26px 4px #ffd36a99;animation:mzSeam 3s ease-in-out infinite}
@keyframes mzSeam{50%{box-shadow:0 0 40px 8px #ffd36acc}}
.mz-bg .spark{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff6c0;box-shadow:0 0 8px #ffd36a;animation:mzUp 6s linear infinite;opacity:0}
@keyframes mzUp{0%{opacity:0;transform:translateY(0)}15%{opacity:.9}100%{opacity:0;transform:translateY(-420px)}}
.mz-lay{position:absolute;inset:0}

/* the top bar */
.mz-hd{position:absolute;left:0;right:0;top:0;height:66px;display:flex;align-items:center;gap:12px;padding:0 20px;background:linear-gradient(#000a,#0000)}
.mz-hd .lg{width:46px;height:46px;filter:drop-shadow(0 0 8px #ffd36a88)}
.mz-hd h2{margin:0;font:900 30px Prompt;color:#fff;letter-spacing:1px;text-shadow:0 3px 0 #0009}
.mz-hd .sp{margin-left:auto}
.mz-chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:20px;background:#0009;border:1px solid #fff3;color:#fff;font:600 16px Prompt}
.mz-chip b{color:#ffd36a}
.mz-chip img{width:26px;height:26px}
.mz-gift{height:42px;padding:0 16px;border-radius:21px;border:2px solid #ffd36a;background:linear-gradient(#5a4210,#2a1a04);color:#ffe08a;font:800 16px Prompt;box-shadow:0 0 14px #ffd36a55}
.mz-gift.on,.mz-gift:hover{background:linear-gradient(#ffe48a,#e8a92a);color:#3a2200}
.mz-x{width:46px;height:46px;border-radius:12px;background:#0009;border:2px solid #fff4;color:#fff;font:700 22px Prompt}

/* the tab rail */
.mz-rail{position:absolute;right:14px;top:76px;bottom:14px;width:78px;display:flex;flex-direction:column;gap:6px}
.mz-tb{flex:1;max-height:80px;border-radius:14px;background:#000a;border:2px solid #fff2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font:600 12px Prompt;color:#d8dcef;position:relative}
.mz-tb span{font-size:23px;line-height:1.1}
.mz-tb.on{border-color:#ffd36a;color:#ffd36a;background:linear-gradient(#5a4210cc,#000c);box-shadow:0 0 16px #ffd36a55}
.mz-tb .dot{position:absolute;top:6px;right:8px;width:10px;height:10px;border-radius:50%;background:#ff4a4a;box-shadow:0 0 6px #f44}

/* the left: rank + me */
.mz-hero{position:absolute;left:24px;top:72px;width:350px;bottom:14px;text-align:center}
.mz-hero .fig{position:relative;height:190px}
.mz-hero .pad{position:absolute;left:50%;bottom:4px;width:220px;height:48px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(#9fd4ffcc,#5fb4ff55 45%,#0000 70%);box-shadow:0 0 40px #5fb4ff88;animation:mzSeam 3s ease-in-out infinite}
.mz-hero .emb{position:absolute;left:50%;bottom:22px;width:176px;height:176px;margin-left:-88px;filter:drop-shadow(0 0 26px #ffd36a99) drop-shadow(0 10px 10px #000a);animation:mzBob 4s ease-in-out infinite}
@keyframes mzBob{50%{translate:0 -6px}}
.mz-hero .rn{font:900 28px Prompt;text-shadow:0 2px 0 #0008;margin-top:-4px}
.mz-hero .pb{width:250px;height:12px;margin:6px auto 2px;border-radius:8px;background:#0009;border:1px solid #ffd36a66;overflow:hidden}
.mz-hero .pb i{display:block;height:100%;background:linear-gradient(90deg,#ffb030,#fff0a0)}
.mz-hero .pt{font:600 13px Prompt;color:#cfe0ff}
.mz-hero .who{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px}
.mz-hero .who > img{width:44px;height:44px;border-radius:12px;background:#0008;border:2px solid #5fb4ff88;padding:3px}
.mz-hero .who b{display:block;font:800 21px Prompt;color:#fff;text-align:left}
.mz-hero .who small{display:block;color:#bcd3f5;font-size:14px;text-align:left}
.mz-hero .ttl{display:inline-block;margin-top:6px;padding:3px 14px;border-radius:20px;background:#ffd36a22;border:1px solid #ffd36a88;color:#ffe8a8;font:600 14px Prompt}
.mz-hero .kda{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}
.mz-hero .kda div{background:#0009;border:1px solid #5fb4ff55;border-radius:12px;padding:6px 4px}
.mz-hero .kda b{display:block;font:700 19px Fredoka;color:#fff}
.mz-hero .kda b.g{color:#8fffb0}.mz-hero .kda b.y{color:#ffd36a}
.mz-hero .kda small{color:#9fc4ee;font-size:12px}
.mz-hero .mrk{display:flex;gap:7px;margin-top:8px}
.mz-hero .mrk div{flex:1;display:flex;align-items:center;gap:3px;justify-content:center;background:#0007;border-radius:10px;padding:3px;color:#dde;font:600 12px Prompt;border:1px solid #fff1}
.mz-hero .mrk img{width:30px;height:30px}
.mz-hero .cards{display:flex;gap:8px;justify-content:center;margin-top:8px}
.mz-hero .cards span{display:flex;align-items:center;gap:4px;padding:2px 10px 2px 3px;border-radius:16px;background:#0009;border:1px solid #ffd36a66;color:#ffe8a8;font:700 13px Prompt}
.mz-hero .cards img{width:28px;height:28px}

/* the mode cards */
.mz-car{position:absolute;left:400px;right:112px;top:92px;height:470px;display:flex;gap:18px;align-items:center}
.mz-mc{flex:1;height:440px;border-radius:16px;overflow:hidden;position:relative;background:#000b;border:2px solid #fff3;transform:skewX(-6deg);transition:height .2s;cursor:pointer}
.mz-mc > *{transform:skewX(6deg)}
.mz-mc:hover{border-color:#fff8}
.mz-mc.sel{border:3px solid #ffd36a;box-shadow:0 0 34px #ffd36a77;height:470px}
.mz-mc .ban{width:135%;margin-left:-17%;height:180px;object-fit:cover}
.mz-mc .num{position:absolute;top:10px;left:22px;font:900 40px Prompt;color:#fff;text-shadow:0 3px 0 #0009,0 0 14px #000}
.mz-mc .t{padding:8px 20px 0}
.mz-mc .t b{display:block;font:800 22px Prompt;color:#fff}
.mz-mc .tags{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.mz-mc .tags span{padding:3px 9px;border-radius:12px;background:#ffffff18;color:#eef;font:600 13px Prompt}
.mz-mc .rk{display:flex;align-items:center;gap:8px;margin:8px 20px 0;color:#ffd36a;font:700 16px Prompt;text-align:left}
.mz-mc .rk img{width:48px;height:48px}
.mz-mc .rk small{display:block;color:#cdb;font:500 12px Prompt}
.mz-mc .bt{position:absolute;left:20px;right:20px;bottom:16px;display:flex;flex-direction:column;gap:8px}
.mz-bigp{height:56px;border-radius:12px;border:2px solid #fff0b0;background:linear-gradient(#ffd85a,#ff9a30);color:#3a1500;font:800 21px Prompt;box-shadow:0 4px 0 #a04a00}
.mz-bigp:disabled{filter:grayscale(.6) brightness(.8)}
.mz-mc .row2{display:flex;gap:8px}
.mz-mc .row2 button{flex:1;height:42px;border-radius:10px;border:1px solid #fff5;background:#000a;color:#fff;font:600 15px Prompt}

/* the bottom strip, the queue */
.mz-ft{position:absolute;left:400px;right:112px;bottom:16px;height:52px;display:flex;gap:8px;align-items:center}
.mz-ft .sep{flex:1}
.mz-pill{display:inline-flex;align-items:center;gap:6px;height:44px;background:#000a;border-radius:24px;padding:0 14px 0 5px;color:#fff;font:600 14px Prompt;border:1px solid #fff3;white-space:nowrap}
.mz-pill img{width:34px;height:34px}
.mz-pill.ic{padding:0 14px}
.mz-pill.sm{height:32px;padding:0 10px 0 4px}
.mz-pill.sm img{width:24px;height:24px}
.mz-q{position:absolute;left:640px;bottom:14px;transform:translateX(-30%);height:76px;display:flex;align-items:center;gap:16px;padding:0 12px 0 10px;border-radius:40px;background:linear-gradient(90deg,#0b2a5cf0,#5a1228f0);border:2px solid #ffd36a;box-shadow:0 0 30px #ffd36a55;z-index:4}
.mz-q .ring{width:58px;height:58px;border-radius:50%;border:4px solid #ffffff22;border-top-color:#ffd36a;animation:mzSpin 1s linear infinite}
@keyframes mzSpin{to{transform:rotate(360deg)}}
.mz-q .tm{position:absolute;left:10px;width:58px;text-align:center;font:700 16px Fredoka;color:#fff}
.mz-q b{font:800 20px Prompt;color:#fff;display:block}
.mz-q small{color:#e0e6ff;font-size:14px}
.mz-q .ppl{display:flex;gap:4px;flex-wrap:wrap;max-width:120px}
.mz-q .ppl i{width:18px;height:18px;border-radius:50%;background:#ffffff22;border:2px solid #fff5}
.mz-q .ppl i.in{background:#8fffb0;border-color:#fff}
.mz-q button{height:50px;padding:0 20px;border-radius:26px;border:2px solid #fff6;background:#000a;color:#fff;font:700 16px Prompt}

/* a tab's page */
.mz-pn{position:absolute;left:396px;right:112px;top:76px;bottom:14px;border-radius:18px;background:linear-gradient(135deg,#071a3ce8,#1a0a24e8 55%,#3a0c1ce8);border:2px solid #ffffff2a;box-shadow:0 10px 40px #000a;padding:16px 20px;overflow:hidden;display:flex;flex-direction:column}
.mz-pn h3{margin:0 0 10px;font:800 24px Prompt;color:#fff;display:flex;align-items:center;gap:10px;flex:none}
.mz-pn h3 .sub{margin-left:auto;display:flex;gap:6px}
.mz-seg{padding:6px 14px;border-radius:18px;border:1px solid #fff4;background:#0008;color:#dde;font:700 14px Prompt}
.mz-seg.on{background:#ffd36a;color:#2a1a00;border-color:#fff0c0}
.mz-hint{color:#aab3d0;font:500 13px Mali;margin:6px 0}
.mz-sbtn{height:38px;padding:0 16px;border-radius:10px;border:2px solid #fff0b0;background:linear-gradient(#ffd85a,#ff9a30);color:#3a1500;font:800 14px Prompt}
.mz-sbtn.g{background:#0009;border:1px solid #fff4;color:#aab}
.mz-list{display:flex;flex-direction:column;gap:6px;overflow:auto;min-height:0}
.mz-list .lr{display:flex;align-items:center;gap:12px;min-height:54px;padding:4px 14px;border-radius:12px;background:#0008;border:1px solid #fff1;flex:none}
.mz-list .lr .no{width:30px;font:800 20px Fredoka;color:#ffd36a;text-align:center}
.mz-list .lr img.mb{width:66px;height:42px;border-radius:8px;object-fit:cover}
.mz-list .lr b{font:700 16px Prompt;color:#fff}
.mz-list .lr small{color:#aab3d0;font-size:13px}
.mz-list .lr small.y{color:#ffd36a}
.mz-list .lr .res{width:66px;font:800 16px Prompt}
.mz-list .lr.w .res{color:#8fffb0}.mz-list .lr.l .res{color:#ff8a7a}
.mz-list .lr .r{margin-left:auto;display:flex;align-items:center;gap:10px;color:#dde;font:600 14px Prompt}
.mz-list .lr .r b.g{color:#8fffb0}.mz-list .lr .r b.rd{color:#ff8a7a}
.mz-list .lr.me{border-color:#ffd36a;background:#ffd36a1c}
.mz-list .lr.w{border-left:6px solid #5fd66a}.mz-list .lr.l{border-left:6px solid #e8574a}
.mz-code4{display:flex;gap:8px;margin-bottom:10px}
.mz-code4 input{flex:1;height:48px;border-radius:12px;background:#000a;border:2px solid #fff3;padding:0 16px;color:#fff;font:600 18px Prompt;letter-spacing:3px;outline:none}
.mz-code4 input:focus{border-color:#ffd36a}
.mz-code4 .mz-sbtn{height:48px}

/* the ladder: thrones for the top 3 */
.mz-pod{display:flex;justify-content:center;align-items:flex-end;gap:6px;height:300px;flex:none;position:relative;margin-bottom:12px}
.mz-pod::before{content:"";position:absolute;left:10%;right:10%;bottom:30px;height:120px;background:radial-gradient(ellipse at 50% 100%,#ffd36a44,#0000 70%)}
.mz-pod .th{position:relative;width:250px;text-align:center}
.mz-pod .th .tr{display:block;margin:0 auto;filter:drop-shadow(0 8px 10px #000a)}
.mz-pod .th1 .tr{height:258px}.mz-pod .th2 .tr{height:212px}.mz-pod .th3 .tr{height:188px}
.mz-pod .th .mz-pf{position:absolute;left:50%;transform:translateX(-50%);filter:drop-shadow(0 6px 8px #000c)}
.mz-pod .th1 .mz-pf{bottom:96px}.mz-pod .th2 .mz-pf{bottom:76px}.mz-pod .th3 .mz-pf{bottom:68px}
.mz-pod .np{position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:3px 12px 3px 4px;border-radius:20px;background:#000c;border:1px solid #ffd36a88;white-space:nowrap}
.mz-pod .np img{width:32px;height:32px}
.mz-pod .np b{color:#fff;font:700 14px Prompt}
.mz-pod .np small{color:#ffe8a8;font:600 13px Fredoka}
.mz-pn .mz-list.scroll{flex:1}

/* a portrait in a PvP frame, with the frame's light (grander by fx) */
.mz-pf{position:relative;display:inline-block;flex:none}
.mz-pf .fc{position:absolute;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 35%,#fff6d0,#f2c46a 55%,#b0702a)}
.mz-pf .fc img{position:absolute;left:50%;top:50%;width:112%;height:112%;object-fit:contain;transform:translate(-50%,-50%)}
.mz-pf .fc img.cl{width:72%;height:72%}
.mz-pf .rg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 4px var(--c))}
.mz-pf .aura{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(circle,transparent 38%,var(--c) 52%,transparent 70%);opacity:.55;animation:mzAur 2.4s ease-in-out infinite}
@keyframes mzAur{50%{opacity:.95;transform:scale(1.08)}}
.mz-pf .rays{position:absolute;inset:-14%;border-radius:50%;display:none;background:repeating-conic-gradient(from 0deg,transparent 0 10deg,var(--c) 12deg,transparent 14deg 30deg);-webkit-mask:radial-gradient(circle,transparent 34%,#000 44%,transparent 70%);mask:radial-gradient(circle,transparent 34%,#000 44%,transparent 70%);opacity:.55;animation:mzSpin 12s linear infinite}
.mz-pf.fx2 .rays,.mz-pf.fx3 .rays,.mz-pf.fx4 .rays{display:block}
.mz-pf.fx3 .rays{opacity:.7;animation-duration:9s}
.mz-pf.fx4 .rays{inset:-24%;opacity:.85;animation-duration:7s}
.mz-pf.fx4 .aura{inset:-6%;opacity:.75}
.mz-pf .orb{position:absolute;inset:-4%;animation:mzSpin 5s linear infinite}
.mz-pf.fx4 .orb{animation-duration:3.5s}
.mz-pf .orb b{position:absolute;width:7%;height:7%;border-radius:50%;background:#fff;box-shadow:0 0 6px 2px var(--c),0 0 12px 4px var(--c)}
.mz-pf .orb b:nth-child(1){left:46%;top:0}.mz-pf .orb b:nth-child(2){left:93%;top:46%}.mz-pf .orb b:nth-child(3){left:46%;top:93%}.mz-pf .orb b:nth-child(4){left:0;top:46%}
.mz-pf .lv{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);padding:0 9px;border-radius:10px;background:#1a1410;border:2px solid #e8b84a;color:#fff;font:700 13px Fredoka;white-space:nowrap}
.mz-pf .nm{position:absolute;left:50%;top:calc(100% - 2px);transform:translateX(-50%);padding:2px 12px;border-radius:12px;background:#000c;color:#fff;font:800 15px Prompt;white-space:nowrap}
.mz-pod .th1 .mz-pf .nm{color:#ffe08a;font-size:17px}

/* the rewards */
.mz-gh{margin:2px 0 8px;font:800 17px Prompt;color:#fff;display:flex;align-items:baseline;gap:10px}
.mz-gh small{font:500 12px Prompt;color:#b8bfdc}
.mz-gifts{display:flex;gap:10px;justify-content:center}
.mz-gifts.g7{margin-top:14px;gap:6px}
.mz-gifts .gf{flex:1;min-width:0;border-radius:14px;background:#0008;border:1px solid #fff2;padding:8px 4px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;position:relative}
.mz-gifts .gf.top{flex:0 0 220px;background:linear-gradient(#ffd36a26,#0009);border-color:#ffd36a88}
.mz-gifts .gm{font:800 15px Prompt;color:#ffe08a}
.mz-gifts .gf b{display:flex;align-items:center;gap:3px;color:#fff;font:700 14px Prompt;white-space:nowrap}
.mz-gifts .gf b img{width:24px;height:24px}
.mz-gifts .gf small{display:flex;align-items:center;gap:3px;color:#ffd36a;font:700 13px Fredoka;white-space:nowrap}
.mz-gifts .gf small img{width:16px;height:16px}
.mz-gifts .gf .mz-sbtn{height:28px;padding:0 10px;font-size:12px}
.mz-gifts .gf.now{border:2px solid #ffd36a;box-shadow:0 0 14px #ffd36a66}
.mz-gifts .nowt{position:absolute;top:-10px;left:50%;transform:translateX(-50%);font:700 11px Prompt;background:#ffd36a;color:#2a1a00;border-radius:8px;padding:0 6px;white-space:nowrap;z-index:2}

/* the shop */
.mz-cats{display:flex;gap:5px;align-items:center;margin-bottom:10px;flex:none}
.mz-cats .only{margin-left:auto;font:600 13px Prompt;color:#ffd0a0;background:#5a1a2a88;border:1px solid #ff8a5a66;border-radius:14px;padding:4px 10px}
.mz-shop{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;overflow:auto;padding-right:4px;min-height:0}
.mz-shop .it{min-width:0;border-radius:14px;background:linear-gradient(#ffffff12,#0009);border:1px solid #fff2;padding:8px 6px;text-align:center;position:relative;cursor:pointer}
.mz-shop .it:hover{border-color:#ffd36a99}
.mz-shop .ii{width:72px;height:72px;margin:0 auto;filter:drop-shadow(0 4px 6px #000a)}
.mz-shop .it b{display:block;font:700 13px Prompt;color:#fff;line-height:1.3;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mz-shop .it small{display:block;color:#aab3d0;font:500 11px Prompt;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mz-shop .pr{display:flex;align-items:center;justify-content:center;gap:4px;color:#ffd36a;font:700 15px Fredoka;margin:3px 0 5px}
.mz-shop .pr img{width:18px;height:18px}
.mz-shop .it .mz-sbtn{width:100%;height:32px;font-size:13px;padding:0 4px}
.mz-shop .lim{position:absolute;left:6px;top:6px;font:700 10px Prompt;color:#fff;background:#c0392b;border-radius:8px;padding:1px 6px}
.mz-shop .need{position:absolute;right:4px;top:4px}
.mz-shop .need img{width:30px;height:30px}
.mz-shop .it.lock .ii{filter:grayscale(.7) brightness(.6)}

/* achievements */
.mz-ach{display:grid;grid-template-columns:1fr 1fr;gap:8px;overflow:auto;min-height:0}
.mz-ach .ac{display:flex;align-items:center;gap:12px;padding:9px 14px;border-radius:12px;background:#0008;border:1px solid #fff1}
.mz-ach .ck{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;background:#fff1;flex:none}
.mz-ach .ac.got{border-color:#5fd66a88}.mz-ach .ac.got .ck{background:#2a6a3a}
.mz-ach .bx{flex:1;min-width:0}
.mz-ach b{font:700 15px Prompt;color:#fff}
.mz-ach .bar{height:8px;border-radius:5px;background:#fff1;margin:5px 0 3px;overflow:hidden}
.mz-ach .bar i{display:block;height:100%;background:linear-gradient(90deg,#5fb4ff,#ffd36a)}
.mz-ach small{color:#aab3d0;font-size:12px}

/* an item's card / the weapon pick */
.mz-dim{position:absolute;inset:0;z-index:8;background:#0009;display:flex;align-items:center;justify-content:center}
.mz-card{width:520px;border-radius:20px;background:linear-gradient(160deg,#0b2a5c,#1a0a24 55%,#5a1228);border:2px solid #ffd36a;box-shadow:0 0 40px #ffd36a44;padding:20px;position:relative}
.mz-card.wide{width:900px}
.mz-card h4{margin:0;font:800 24px Prompt;color:#fff}
.mz-card .hd2{display:flex;gap:16px;align-items:center}
.mz-card .hd2 .ii{width:120px;height:120px;filter:drop-shadow(0 6px 10px #000a)}
.mz-card .tg{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.mz-card .tg span{display:flex;align-items:center;gap:4px;padding:3px 10px;border-radius:12px;background:#0008;color:#ffe8a8;font:600 13px Prompt}
.mz-card .tg img{width:20px;height:20px}
.mz-card ul{list-style:none;margin:14px 0;padding:0;display:flex;flex-direction:column;gap:6px}
.mz-card li{display:flex;gap:10px;align-items:center;padding:8px 12px;border-radius:10px;background:#0007;color:#eef;font:500 15px Prompt}
.mz-card li span{font-size:20px;width:26px;text-align:center}
.mz-card .ft2{display:flex;gap:10px;align-items:center}
.mz-card .ft2 .pr{display:flex;align-items:center;gap:6px;color:#ffd36a;font:800 24px Fredoka}
.mz-card .ft2 .pr img{width:30px;height:30px}
.mz-card .ft2 small{color:#aab3d0}
.mz-card .ft2 .mz-sbtn{margin-left:auto;height:50px;padding:0 34px;font-size:18px}
.mz-card .xx{position:absolute;right:12px;top:12px;width:38px;height:38px;border-radius:10px;border:1px solid #fff4;background:#0008;color:#fff;font:700 18px Prompt}
.mz-wpns{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:14px;max-height:460px;overflow:auto}
.mz-wpns button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:12px;border:1px solid #fff3;background:#0008;color:#fff}
.mz-wpns button:hover{border-color:#ffd36a}
.mz-wpns img{width:56px;height:56px}
.mz-wpns b{font:700 13px Prompt}
.mz-wpns small{font:500 11px Prompt;color:#aab3d0}

/* in a room */
.mz-rtop{position:absolute;left:50%;top:64px;transform:translateX(-50%);text-align:center;z-index:3}
.mz-rtop .mn{display:flex;align-items:center;gap:10px;justify-content:center;color:#fff;font:700 18px Prompt}
.mz-rtop .mn img{width:70px;height:44px;border-radius:8px;object-fit:cover}
.mz-rtop .cd{display:inline-flex;align-items:center;gap:8px;margin-top:6px}
.mz-rtop .c{font:800 30px Fredoka;letter-spacing:7px;color:#ffd36a;background:#000b;border:2px dashed #ffd36a;border-radius:12px;padding:0 10px 0 16px;height:48px}
.mz-rtop .lk{height:40px;padding:0 12px;border-radius:20px;border:1px solid #fff4;background:#000a;color:#fff;font:600 14px Prompt}
.mz-rtop .lk.on{border-color:#ffd36a;color:#ffd36a}
.mz-playing{position:absolute;left:50%;top:170px;transform:translateX(-50%);z-index:4;padding:10px 22px;border-radius:24px;background:#000c;border:2px solid #ff8a5a;color:#ffd0b0;font:700 17px Prompt}
.mz-side{position:absolute;top:92px;width:500px;display:flex;flex-direction:column;gap:12px;z-index:2}
.mz-side.a{left:28px}.mz-side.b{right:28px}
.mz-side h4{margin:0;font:900 28px Prompt;color:#fff;text-shadow:0 2px 0 #0009;display:flex;align-items:center;gap:10px}
.mz-side h4 small{font:700 18px Fredoka;color:#fffa;padding:2px 10px;border-radius:12px;background:#0007}
.mz-side.b h4{flex-direction:row-reverse}
.mz-side .card{height:112px;border-radius:14px;display:flex;align-items:center;gap:16px;padding:0 18px 0 22px;background:#000a;border:2px solid #5fb4ff77;transform:skewX(-8deg);position:relative;flex:none}
.mz-side.b .card{flex-direction:row-reverse;border-color:#ff5a7a77;transform:skewX(8deg);text-align:right;padding:0 22px 0 18px}
.mz-side .card > *{transform:skewX(8deg)}.mz-side.b .card > *{transform:skewX(-8deg)}
.mz-side .card.ok{border-color:#8fffb0;box-shadow:0 0 18px #8fffb055}
.mz-side .card.me{background:linear-gradient(90deg,#ffd36a22,#000a)}
.mz-side.b .card.me{background:linear-gradient(270deg,#ffd36a22,#000a)}
.mz-side .av{position:relative;width:88px;height:88px;border-radius:14px;overflow:hidden;border:2px solid #fff3;flex:none}
.mz-side.a .av{background:radial-gradient(circle at 50% 70%,#5fb4ff66,#0009 70%)}
.mz-side.b .av{background:radial-gradient(circle at 50% 70%,#ff5a7a66,#0009 70%)}
.mz-side .av img{position:absolute;left:8%;top:8%;width:84%;height:84%;object-fit:contain}
.mz-side .av .cb{left:auto;top:auto;right:2px;bottom:2px;width:28px;height:28px;filter:drop-shadow(0 0 3px #000)}
.mz-side .card b{font:700 20px Prompt;color:#fff;display:block}
.mz-side .card small{color:#cde;font-size:14px}
.mz-side .card .st{margin-left:auto;font:700 15px Prompt;padding:6px 12px;border-radius:10px;background:#0008}
.mz-side.b .card .st{margin-left:0;margin-right:auto}
.mz-side .st.own{color:#ffd36a}.mz-side .st.ok{color:#8fffb0}.mz-side .st.no{color:#e8c890}
.mz-side .kick{width:36px;height:36px;border-radius:50%;border:1px solid #ff8a9a;background:#5a1a2a;color:#fff;font:700 15px Prompt}
.mz-side .card.free{border-style:dashed;justify-content:center;background:#0006;border-color:#fff4}
.mz-side .card.free button{height:50px;padding:0 24px;border-radius:12px;border:2px solid #fff6;background:#fff1;color:#fff;font:700 17px Prompt}
.mz-side .card.free small{display:block;margin-top:4px;text-align:center}
.mz-vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:900 104px Prompt;color:#fff;z-index:3;text-shadow:0 0 34px #ffd36a,0 6px 0 #7a4a00;animation:mzPulse 2s ease-in-out infinite;pointer-events:none}
@keyframes mzPulse{50%{transform:translate(-50%,-50%) scale(1.06)}}
.mz-rlog{position:absolute;left:28px;bottom:94px;z-index:3;color:#c8cde6;font:500 13px Mali;line-height:1.6;background:#0007;border-radius:10px;padding:6px 12px}
.mz-rwait{position:absolute;right:28px;bottom:94px;z-index:3;color:#ffe8a8;font:600 14px Prompt;background:#0008;border-radius:10px;padding:6px 12px;border:1px solid #ffd36a55}
.mz-rbar{position:absolute;left:28px;right:28px;bottom:16px;height:66px;display:flex;gap:10px;align-items:center;z-index:3}
.mz-rbar .sep{flex:1}
.mz-rbar .inv{flex:1;height:58px;border-radius:14px;background:#000b;border:2px solid #fff3;display:flex;align-items:center;padding:0 8px 0 6px;gap:8px}
.mz-rbar .inv input{flex:1;height:44px;background:transparent;border:0;outline:none;color:#fff;font:500 17px Mali;padding:0 10px}
.mz-rbar .inv button{height:44px;padding:0 18px;border-radius:10px;border:2px solid #ffd36a;background:#000;color:#ffd36a;font:700 16px Prompt}
.mz-rbar .pals{display:flex;gap:6px}
.mz-rbar .pals button{height:44px;padding:0 12px;border-radius:22px;border:1px solid #8fffb088;background:#103a20cc;color:#bfffd0;font:600 14px Prompt}
.mz-rbar .mz-bigp{width:250px;height:62px;font-size:24px}
.mz-rbar .lv{height:58px;padding:0 20px;border-radius:14px;border:2px solid #ff8a9a88;background:#5a1a2acc;color:#ffd0d8;font:700 17px Prompt}