#startDialog {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: clamp(20px, 5vw, 72px);
  background: #063c36 url("assets/jubmoo-lobby-background.png") center / cover no-repeat;
  box-shadow: none;
}

#startDialog[open] { display: grid; place-items: center; }
#startDialog::backdrop { background: #080919; }
html:has(#startDialog[open]), body:has(#startDialog[open]) { overflow: hidden; }

#startDialog .lobby-nav {
  position: absolute;
  top: clamp(14px, 2vw, 28px);
  right: clamp(14px, 3vw, 44px);
  z-index: 2;
}

#startDialog .lobby-card {
  width: min(92vw, 510px);
  padding: clamp(24px, 4vw, 46px);
  border: 2px solid #f7d27b;
  border-radius: 18px;
  background: linear-gradient(145deg, #102b32ef, #073d38e8);
  box-shadow: 0 14px 42px #020c0ad9, 0 0 0 6px #9f612850;
  backdrop-filter: blur(4px);
  text-align: center;
}

#startDialog h2 {
  margin: 10px 0 8px;
  color: #ffe8a9;
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1;
  text-shadow: 3px 3px 0 #74332c;
}

#startDialog p { margin: 0; color: #fff6d7; font-size: clamp(13px, 2vw, 16px); }
#startDialog .panel-title { color: #ffe19a; font-weight: 700; font-size: 12px; letter-spacing: 3px; }

#startDialog .close-action {
  margin-top: 24px;
  padding: 14px;
  border-radius: 9px;
  background: linear-gradient(#ff7567, #d3424f);
  box-shadow: 0 4px 0 #7b2336, 0 0 20px #ffb25066;
  font-size: 13px;
}

@media (max-width: 540px) {
  #startDialog { padding: 16px; }
  #startDialog .lobby-card { padding: 24px 20px; }
  #startDialog .lobby-nav { top: 9px; right: 9px; left: 9px; justify-content: center; overflow-x: auto; }
}