.mode-lobby { width: min(520px, 100%); text-align: left; }
.mode-lobby > .modal-emblem, .mode-lobby > h2, .lobby-intro { text-align: center; }
.lobby-intro { max-width: 390px; margin: 0 auto 17px; }
.game-mode { border: 1px solid var(--line); border-radius: 15px; padding: 15px; background: rgba(255, 255, 255, .025); }
.solo-mode { border-color: rgba(84, 214, 181, .25); background: linear-gradient(145deg, rgba(84, 214, 181, .08), rgba(125, 150, 255, .035)); box-shadow: inset 0 1px rgba(255, 255, 255, .035); }
.mode-heading { display: flex; align-items: center; gap: 10px; }
.mode-heading > div { min-width: 0; }
.mode-heading h3 { display: inline; margin: 0; font-size: 17px; letter-spacing: -.015em; }
.mode-heading span:not(.mode-icon):not(.mode-tag) { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.mode-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; border: 1px solid rgba(125, 150, 255, .24); border-radius: 10px; color: var(--accent); background: rgba(125, 150, 255, .07); }
.mode-tag { display: inline-flex; margin-left: 7px; border: 1px solid rgba(84, 214, 181, .3); border-radius: 999px; padding: 2px 6px; color: #91efd8; background: rgba(15, 43, 40, .72); font-size: 9px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; vertical-align: 2px; }
.game-mode > p { margin: 10px 0 13px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.role-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.role-actions button { min-width: 0; min-height: 58px; text-align: left; }
.role-actions strong, .role-actions small { display: block; }
.role-actions strong { font-size: 13px; }
.role-actions small { margin-top: 3px; color: inherit; opacity: .67; font-size: 10px; font-weight: 500; }
.compact-heading { margin-bottom: 12px; }
.create-room-button { margin-bottom: 11px; }
.friend-mode label { color: var(--muted); font-size: 10px; }
.mode-lobby > .divider { margin: 13px 0; }

body.single-player #roomBadge { display: none !important; }
body.single-player .connection-badge { color: var(--secondary); }

@media (max-width: 520px) {
  .mode-lobby { padding: 19px; }
  .lobby-intro { margin-bottom: 13px; font-size: 13px; }
  .game-mode { padding: 13px; }
  .role-actions { grid-template-columns: 1fr; }
  .role-actions button { min-height: 51px; }
  .mode-lobby > .divider { margin-block: 10px; }
}

@media (max-height: 720px) and (max-width: 520px) {
  .mode-lobby { padding-block: 15px; }
  .mode-lobby > .modal-emblem { display: none; }
  .mode-lobby > h2 { margin-bottom: 5px; font-size: 22px; }
  .game-mode > p { margin-block: 7px 9px; }
}