/* 多人联机大厅遮罩层 —— 所有规则限定在 #mp-lobby 内，避免影响原游戏页面样式 */
#mp-lobby{
  --mp-bg:#05060b;--mp-panel:#101324;--mp-panel2:#0b0e1c;--mp-line:#252b45;--mp-line2:#333a5c;
  --mp-txt:#eef1ff;--mp-muted:#9aa2c6;--mp-dim:#6d769b;--mp-acc:#7b61ff;
  position:fixed;inset:0;z-index:200;display:none;
  background:radial-gradient(1100px 620px at 50% -8%,rgba(25,16,54,.92) 0%,rgba(5,6,11,.96) 62%);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:var(--mp-txt);
  font-family:'PingFang SC','Microsoft YaHei',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-y:auto;overscroll-behavior:contain;
}
#mp-lobby.on{display:block}
#mp-lobby *{box-sizing:border-box}

#mp-lobby .mp-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 20px;border-bottom:1px solid var(--mp-line);position:sticky;top:0;z-index:5;
  background:rgba(5,6,11,.72)}
#mp-lobby .mp-back{color:var(--mp-muted);text-decoration:none;font-size:14px;letter-spacing:1px}
#mp-lobby .mp-back:hover{color:#fff}
#mp-lobby .mp-title{font-size:13px;letter-spacing:4px;color:#b9c0dd}
#mp-lobby .mp-conn{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--mp-dim);letter-spacing:1px}
#mp-lobby .mp-conn i{width:7px;height:7px;border-radius:50%;background:#5b6486;display:block}
#mp-lobby .mp-conn.on i{background:#c8ff62;box-shadow:0 0 10px rgba(200,255,98,.8)}
#mp-lobby .mp-conn.on{color:#a8b39a}

#mp-lobby .mp-main{max-width:720px;margin:0 auto;padding:26px 20px 46px}
#mp-lobby .mp-view h1{margin:6px 0 8px;font-size:clamp(25px,5.2vw,34px);letter-spacing:3px;font-weight:800}
#mp-lobby .mp-sub{margin:0 0 24px;color:var(--mp-muted);font-size:14px}

#mp-lobby .mp-field{display:block;margin-bottom:20px}
#mp-lobby .mp-field>span{display:block;font-size:13px;color:#c4cbe6;letter-spacing:1px;margin-bottom:9px}
#mp-lobby .mp-field .mp-hint{font-style:normal;color:var(--mp-dim);font-size:12px;letter-spacing:0}
#mp-lobby input{width:100%;padding:14px 15px;border-radius:10px;border:1px solid var(--mp-line);
  background:var(--mp-panel2);color:var(--mp-txt);font-size:16px;font-family:inherit;outline:none;
  transition:border-color .15s}
#mp-lobby input::placeholder{color:#5a6285}
#mp-lobby input:focus{border-color:var(--mp-acc)}
#mp-lobby #mp-joincode{text-transform:uppercase;letter-spacing:6px;font-weight:600}

#mp-lobby .mp-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
#mp-lobby .mp-btn{appearance:none;border:1px solid var(--mp-line2);background:var(--mp-panel);color:var(--mp-txt);
  font:inherit;font-size:15px;font-weight:600;letter-spacing:1px;padding:14px 18px;border-radius:10px;
  cursor:pointer;transition:.15s}
#mp-lobby .mp-btn:hover:not(:disabled){background:#1a1f38;border-color:#454e7a}
#mp-lobby .mp-btn:disabled{opacity:.4;cursor:not-allowed}
#mp-lobby .mp-btn.primary{background:linear-gradient(135deg,#7b61ff,#5a44d8);border-color:transparent}
#mp-lobby .mp-btn.primary:hover:not(:disabled){filter:brightness(1.12)}
#mp-lobby .mp-btn.ready[aria-pressed="true"]{background:linear-gradient(135deg,#8ee04f,#5fbf28);
  border-color:transparent;color:#0b1503}

#mp-lobby .mp-joinbox{margin-top:20px;padding:18px;border:1px dashed var(--mp-line2);border-radius:12px;
  background:rgba(11,14,28,.6)}
#mp-lobby .mp-codebox{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-radius:12px;cursor:pointer;font:inherit;border:1px dashed var(--mp-line2);
  background:rgba(123,97,255,.08);color:var(--mp-txt);transition:.15s}
#mp-lobby .mp-codebox:hover{border-color:var(--mp-acc);background:rgba(123,97,255,.16)}
#mp-lobby .mp-codebox b{font-size:24px;letter-spacing:8px;font-weight:800}
#mp-lobby .mp-codebox small{color:var(--mp-muted);font-size:12px}

#mp-lobby .mp-segs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
#mp-lobby .mp-segs button{padding:16px 0;font:inherit;font-size:18px;font-weight:700;cursor:pointer;
  border-radius:10px;border:1px solid var(--mp-line2);background:var(--mp-panel2);color:#c9d0ea;transition:.15s}
#mp-lobby .mp-segs button:hover{border-color:#4b5480}
#mp-lobby .mp-segs button.on{background:linear-gradient(135deg,#7b61ff,#5a44d8);border-color:transparent;color:#fff}

#mp-lobby .mp-meta{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}
#mp-lobby .mp-tag{font-size:12px;letter-spacing:1px;color:var(--mp-muted);border:1px solid var(--mp-line);
  border-radius:999px;padding:6px 14px;background:rgba(16,19,36,.7)}
#mp-lobby .mp-tag b{color:#fff;letter-spacing:3px;margin-left:4px}

#mp-lobby .mp-players{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}
@media(max-width:520px){#mp-lobby .mp-players{grid-template-columns:1fr}}
#mp-lobby .mp-pcard{border:1px solid var(--mp-line);border-radius:12px;padding:14px 16px;background:var(--mp-panel2);
  display:flex;flex-direction:column;gap:7px;position:relative;overflow:hidden}
#mp-lobby .mp-pcard.me{border-color:var(--mp-acc);background:rgba(123,97,255,.1)}
#mp-lobby .mp-pcard.ok::after{content:'';position:absolute;right:0;top:0;border:14px solid transparent;
  border-top-color:#7bd83f;border-right-color:#7bd83f}
#mp-lobby .mp-pcard .pn{font-size:17px;font-weight:700;letter-spacing:1px}
#mp-lobby .mp-pcard .pn i{font-style:normal;font-size:11px;color:var(--mp-acc);border:1px solid var(--mp-acc);
  border-radius:4px;padding:1px 5px;margin-left:8px;vertical-align:middle}
#mp-lobby .mp-pcard .pn em{font-style:normal;font-size:11px;color:#ffd36b;margin-left:8px}
#mp-lobby .mp-pcard .pt{font-size:13px;color:var(--mp-muted)}
#mp-lobby .mp-pcard .pt b{font-weight:700;letter-spacing:1px}
#mp-lobby .mp-pcard .pt .none{color:#5a6285}
#mp-lobby .mp-pcard .pr{font-size:12px;color:var(--mp-dim)}
#mp-lobby .mp-pcard.ok .pr{color:#8ee04f}

#mp-lobby .mp-picker{border:1px solid var(--mp-line);border-radius:14px;padding:18px;background:rgba(16,19,36,.6)}
#mp-lobby .mp-picker-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:14px}
#mp-lobby .mp-picker-head b{font-size:15px;letter-spacing:1px}
#mp-lobby .mp-picker-head span{font-size:12px;color:var(--mp-dim)}
#mp-lobby .mp-tops{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:520px){#mp-lobby .mp-tops{grid-template-columns:repeat(2,1fr)}}
#mp-lobby .mp-topbtn{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 6px 10px;border-radius:12px;cursor:pointer;font:inherit;transition:.15s;
  border:1px solid var(--mp-line2);background:var(--mp-panel2);color:var(--mp-txt)}
#mp-lobby .mp-topbtn:hover:not(:disabled){border-color:var(--c);transform:translateY(-2px)}
#mp-lobby .mp-topbtn .disc{width:30px;height:30px;border-radius:50%;background:var(--c);
  box-shadow:inset 0 0 0 6px rgba(0,0,0,.35),0 0 14px -2px var(--c)}
#mp-lobby .mp-topbtn b{font-size:14px;letter-spacing:1px}
#mp-lobby .mp-topbtn small{font-size:11px;color:var(--mp-dim)}
#mp-lobby .mp-topbtn.mine{border-color:var(--c);background:rgba(255,255,255,.05)}
#mp-lobby .mp-topbtn.mine small{color:var(--c)}
#mp-lobby .mp-topbtn.taken{opacity:.42;cursor:not-allowed}

#mp-lobby .mp-note{margin:14px 0 0;font-size:12px;color:var(--mp-dim);text-align:center;letter-spacing:1px}
#mp-lobby .mp-err{margin:14px 0 0;font-size:13px;color:#ff7a8f;min-height:18px;letter-spacing:.5px}

#mp-lobby .mp-notice{position:fixed;inset:0;z-index:9;display:none;place-items:center;
  background:rgba(5,6,11,.88)}
#mp-lobby .mp-notice.on{display:grid}
#mp-lobby .mp-notice .box{max-width:420px;text-align:center;padding:32px 28px;border:1px solid var(--mp-line);
  border-radius:16px;background:var(--mp-panel)}
#mp-lobby .mp-notice .box p{margin:0 0 20px;color:var(--mp-muted);line-height:1.8}
#mp-lobby .mp-notice .box .mp-btn{width:100%}

/* ============ 右下角：退出按钮 + 玩家排行 ============ */
#mp-br{
  position:fixed;right:14px;bottom:14px;z-index:199;display:none;
  flex-direction:column;align-items:flex-end;gap:8px;
  font-family:'PingFang SC','Microsoft YaHei',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
#mp-br *{box-sizing:border-box}
#mp-br .mp-quit{
  appearance:none;cursor:pointer;padding:9px 14px;font-size:13px;font-family:inherit;
  border:1px solid #333a5c;border-radius:10px;background:rgba(11,14,28,.82);color:#c9d0ea;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .15s,border-color .15s,color .15s;
}
#mp-br .mp-quit:hover{background:#1a1f38;border-color:#454e7a;color:#fff}

#mp-rank{
  min-width:190px;max-width:min(300px,48vw);padding:10px 12px 8px;
  border:1px solid #2a3152;border-radius:12px;color:#eef1ff;
  background:rgba(11,14,28,.82);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 14px 34px -16px rgba(0,0,0,.95);
}
#mp-rank .rk-hd{
  font-size:12px;letter-spacing:3px;color:#8f97bb;
  padding:0 2px 8px;margin-bottom:6px;border-bottom:1px solid #232a45;
}
#mp-rank .rk-list{list-style:none;margin:0;padding:0}
#mp-rank .rk-list li{display:flex;align-items:center;gap:8px;padding:5px 4px;font-size:13px;border-radius:8px}
#mp-rank .rk-list li.me{background:rgba(123,97,255,.16)}
#mp-rank .no{font-style:normal;flex:none;width:16px;text-align:center;font-size:11px;font-weight:700;color:#7d86ad}
#mp-rank .rk-list li:first-child .no{color:#ffd23f}
#mp-rank .dot{flex:none;width:9px;height:9px;border-radius:50%}
#mp-rank .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mp-rank .tm{flex:none;font-size:11px;color:#7d86ad;letter-spacing:.5px}
#mp-rank .sc{flex:none;min-width:20px;text-align:right;font-weight:800;color:#c8ff62}

@media(max-width:520px){
  #mp-rank{min-width:150px;padding:8px 10px 7px}
  #mp-rank .rk-list li{font-size:12px;padding:4px 3px}
  #mp-rank .tm{display:none}
}