#matchmaking-design{display:none}
#lobby.matchmaking-design-enabled{display:flex;align-items:center;justify-content:center;min-height:100dvh;padding:24px;background:#050a10;color:#f7f9fc;overflow:hidden}
#lobby.matchmaking-design-enabled #lobby-card,#lobby.matchmaking-design-enabled #lobby-design{display:none!important}
#lobby.matchmaking-design-enabled #matchmaking-design{display:flex;position:absolute;inset:0;align-items:center;justify-content:center;padding:24px;font-family:Inter,Segoe UI,Arial,sans-serif;isolation:isolate}
.mq-backdrop{position:absolute;inset:0;background:#060b12;overflow:hidden;z-index:-2}.mq-backdrop:after{content:"";position:absolute;inset:0;background:rgba(0,5,10,.79);backdrop-filter:blur(2px)}
.mq-backdrop-bar{height:82px;display:flex;align-items:center;gap:34px;padding:0 4vw;border-bottom:1px solid #26303a;color:#9da8b6;font-size:16px}.mq-backdrop-bar img{width:54px;height:54px;object-fit:contain}.mq-backdrop-bar b{color:#fff;font-size:25px;margin-right:20px}
.mq-backdrop-hero{height:320px;margin:28px 3vw;border:1px solid #34414e;border-radius:20px;background:url("../images/ludo-bg.jpg") center/cover no-repeat}
.mq-dialog{width:min(610px,calc(100vw - 36px));padding:26px 30px 22px;border:1px solid #ffd400;border-radius:22px;background:linear-gradient(145deg,rgba(8,22,32,.99),rgba(3,13,21,.99));box-shadow:0 28px 90px #000,0 0 38px rgba(255,212,0,.08);position:relative}
.mq-dialog header{display:grid;grid-template-columns:78px 1fr 48px;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid #22303b}.mq-dialog header>img{width:76px;height:76px;object-fit:contain}.mq-dialog h1{font-size:32px;line-height:1.05;margin:0 0 7px}.mq-dialog header p{margin:0;color:#b9c1cb;font-size:16px}.mq-close{width:46px;height:46px;border:2px solid #d9b600;border-radius:50%;background:transparent;color:white;font-size:34px;line-height:1;cursor:pointer}
.mq-details{display:grid;grid-template-columns:1fr 1px 1fr;align-items:center;margin:18px 0 15px;padding:18px;border:1px solid #334351;border-radius:14px;background:#0b1822}.mq-details>i{height:54px;background:#35424d}.mq-details>div{display:grid;grid-template-columns:48px 1fr;column-gap:10px;align-items:center}.mq-detail-icon{grid-row:1/3;color:#ffd400;font-size:35px;text-align:center}.mq-details small{color:#d6dbe1;font-size:15px}.mq-details strong{color:#ffd400;font-size:23px;margin-top:4px}
.mq-search{text-align:center}.mq-loader{width:126px;height:126px;margin:4px auto 8px;border-radius:50%;position:relative;display:grid;place-items:center;background:conic-gradient(#ffd400 0 28%,#263039 28% 51%,#ffd400 51% 74%,#263039 74%);animation:mq-spin 1.8s linear infinite}.mq-loader:before{content:"";position:absolute;inset:9px;border-radius:50%;background:#09131b}.mq-loader img{width:66px;height:66px;object-fit:contain;position:relative;filter:drop-shadow(0 0 12px rgba(255,212,0,.5));animation:mq-counter-spin 1.8s linear infinite}
.mq-search h2{font-size:25px;margin:8px 0 4px}.mq-search h2 em{font-style:normal;color:#ffd400}.mq-search p{margin:0;color:#bac3ce;font-size:15px}.mq-time{display:block;margin-top:5px;color:#778695}.mq-time b{color:#aab5c0}
.mq-players{display:flex;justify-content:center;gap:30px;margin:17px 0}.mq-players>div{width:100px;text-align:center}.mq-person{width:66px;height:66px;margin:auto;display:grid;place-items:center;border:2px dashed #657382;border-radius:50%;font-size:38px;color:#788591;background:#0b1720}.mq-players .found .mq-person{border-style:solid;border-color:var(--seat-color);color:var(--seat-color);box-shadow:0 0 18px color-mix(in srgb,var(--seat-color),transparent 55%)}.mq-players strong,.mq-players small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mq-players strong{font-size:13px;margin-top:7px}.mq-players small{font-size:11px;color:#8996a3;margin-top:2px}
.mq-continue,.mq-cancel{width:100%;height:49px;border-radius:10px;font-weight:800;font-size:16px;cursor:pointer}.mq-continue{border:0;background:linear-gradient(#ffe424,#ffd000);color:#111}.mq-cancel{margin-top:9px;border:1px solid #40515f;background:transparent;color:#f3f5f7}
.mq-continue:disabled,.mq-cancel:disabled,.mq-close:disabled{cursor:not-allowed;opacity:.5}
@keyframes mq-spin{to{transform:rotate(360deg)}}@keyframes mq-counter-spin{to{transform:rotate(-360deg)}}
@media(max-width:600px){#lobby.matchmaking-design-enabled #matchmaking-design{padding:12px}.mq-dialog{padding:18px 16px 16px;border-radius:18px}.mq-dialog header{grid-template-columns:56px 1fr 40px;padding-bottom:13px;gap:10px}.mq-dialog header>img{width:54px;height:54px}.mq-dialog h1{font-size:25px}.mq-dialog header p{font-size:13px}.mq-close{width:38px;height:38px;font-size:28px}.mq-details{margin:13px 0;padding:12px 8px}.mq-details>div{grid-template-columns:34px 1fr}.mq-detail-icon{font-size:27px}.mq-details small{font-size:12px}.mq-details strong{font-size:18px}.mq-loader{width:102px;height:102px}.mq-loader img{width:54px;height:54px}.mq-search h2{font-size:21px}.mq-players{gap:4px;margin:13px 0}.mq-players>div{width:76px}.mq-person{width:54px;height:54px;font-size:30px}.mq-continue,.mq-cancel{height:46px}.mq-backdrop-bar span{display:none}}
@media(max-height:720px){.mq-dialog{padding-top:14px;padding-bottom:12px}.mq-dialog header>img{width:50px;height:50px}.mq-dialog header{grid-template-columns:54px 1fr 40px;padding-bottom:9px}.mq-details{margin:9px 0;padding:9px}.mq-loader{width:84px;height:84px}.mq-loader img{width:44px;height:44px}.mq-players{margin:8px 0}.mq-person{width:48px;height:48px}.mq-continue,.mq-cancel{height:40px}}

/* Compact reference-size dialog. It scales as one unit with the 1280 x 598 canvas. */
@media (min-width:844px) {
  #lobby.matchmaking-design-enabled #matchmaking-design { padding:0; }
  .mq-dialog {
    width:450px;
    padding:14px 18px 15px;
    border-radius:16px;
    transform:scale(var(--lobby-ui-scale,1));
    transform-origin:center;
  }
  .mq-dialog header { grid-template-columns:50px 1fr 34px; gap:10px; padding-bottom:10px; }
  .mq-dialog header>img { width:48px; height:48px; }
  .mq-dialog h1 { margin-bottom:3px; font-size:25px; }
  .mq-dialog header p { font-size:12px; }
  .mq-close { width:34px; height:34px; font-size:25px; }
  .mq-details { margin:10px 0 9px; padding:9px 12px; border-radius:10px; }
  .mq-details>i { height:36px; }
  .mq-details>div { grid-template-columns:34px 1fr; column-gap:7px; }
  .mq-detail-icon { font-size:25px; }
  .mq-details small { font-size:11px; }
  .mq-details strong { margin-top:1px; font-size:18px; }
  .mq-loader { width:72px; height:72px; margin:2px auto 5px; }
  .mq-loader:before { inset:6px; }
  .mq-loader img { width:38px; height:38px; }
  .mq-search h2 { margin:4px 0 2px; font-size:19px; }
  .mq-search p,.mq-time { font-size:11px; }
  .mq-players { gap:16px; margin:8px 0; }
  .mq-players>div { width:78px; }
  .mq-person { width:43px; height:43px; font-size:25px; }
  .mq-players strong { margin-top:4px; font-size:10px; }
  .mq-players small { font-size:9px; }
  .mq-continue,.mq-cancel { height:36px; border-radius:8px; font-size:12px; }
  .mq-cancel { margin-top:6px; }
}