/* Dialog motion is shared with gameplay in dialog-motion.css. */
.lobby-dialog { width: min(460px, calc(100% - 32px)); max-width: none; background: #06101f; border-color: #245cab; border-radius: 28px; }
.lobby-dialog .dialog-art { display: block; height: auto; aspect-ratio: 1.42; object-fit: cover; object-position: center; mask-image: linear-gradient(#000 76%, transparent 100%); }
.lobby-dialog .dialog-copy { position: relative; margin-top: -10px; padding: 0 18px 24px; }
.lobby-dialog .dialog-status { color: #a3c6f0; font-size: .7rem; letter-spacing: .32em; }
.lobby-dialog .dialog-copy h2 { margin: 6px 0 12px; font-size: clamp(1.9rem, 8.5vw, 2.65rem); font-weight: 750; line-height: 1.1; letter-spacing: -.04em; }
.lobby-dialog .dialog-copy h2::after { content: ''; display: block; width: 38px; height: 2px; background: #3d8ef3; margin: 13px auto 10px; border-radius: 2px; }
.lobby-dialog #dialog-description { font-size: 1rem; color: #afc9eb; line-height: 1.4; }
.lobby-modes { display: grid; gap: 9px; margin-top: 16px; }
.lobby-mode { display: flex; align-items: center; gap: 15px; width: 100%; min-height: 77px; padding: 9px 11px; text-align: left; border: 1px solid #315482; border-radius: 18px; background: linear-gradient(125deg, #132542, #08182e); box-shadow: inset 0 1px 0 #638cca24; color: #f2f6ff; opacity: 1; cursor: default; }
.mode-symbol { display: block; width: 58px; height: 58px; flex: none; border-radius: 15px; object-fit: cover; }
.lobby-mode strong { display: block; font-size: 1.04rem; font-weight: 650; letter-spacing: -.02em; }
.lobby-mode small { display: block; margin-top: 4px; color: #abc5e9; font-size: .82rem; line-height: 1.35; }
.lobby-dialog .primary-button { min-height: 54px; background: linear-gradient(160deg, #1460dc, #082b86); box-shadow: inset 0 0 0 1px #328aff, inset 0 1px 8px #00b8ff40; margin-top: 16px; border-radius: 17px; font-size: 1rem; font-weight: 600; }
.lobby-dialog .primary-button:hover { filter: brightness(1.12); }
.lobby-dialog .close-dialog.icon-button { border-radius: 50%; background: #10233de6; border-color: #3a6696; width: 38px; height: 38px; }
.icon-button,.primary-button,.setting-row,.auth-tabs button { transition: transform 140ms ease, background-color 160ms ease; }
.icon-button:active,.primary-button:active,.auth-tabs button:active { transform: scale(.96); }
.setting-row:active { background-color: #12283d; }
@media (max-width: 700px) {
  .lobby-dialog { width: calc(100% - 16px); max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 16px); margin: auto; border-radius: 27px; }
  .lobby-dialog .dialog-copy { padding: 0 14px 20px; }
}
@media (max-width: 350px), (max-height: 700px) {
  .lobby-dialog .dialog-art { max-height: 230px; }
  .lobby-dialog .dialog-copy h2 { font-size: 1.9rem; }
  .lobby-mode { min-height: 70px; gap: 11px; }
  .mode-symbol { width: 49px; height: 49px; border-radius: 13px; }
  .lobby-mode small { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  #game-dialog[data-motion],#game-dialog[data-motion]::backdrop { animation: none; }
  .icon-button,.primary-button,.setting-row,.auth-tabs button { transition: none; }
  .icon-button:active,.primary-button:active,.auth-tabs button:active { transform: none; }
}