/* Desktop lobby only. The approved phone/tablet layout and gameplay are intact. */
@media screen and (min-width: 1024px) {
  #app:has(#menu.compact-lobby:not([hidden])) {
    max-width: 1248px;
    min-height: 100dvh;
    padding: 0 24px 28px;
    margin-inline: auto;
  }

  #app:has(#menu.compact-lobby:not([hidden])) > header {
    height: 76px;
    gap: 12px;
    margin-bottom: 24px;
  }
  #app:has(#menu.compact-lobby:not([hidden])) > header .brand {
    text-align: left;
    font-size: 27px;
    letter-spacing: .7px;
  }
  #app:has(#menu.compact-lobby:not([hidden])) > header .brand small {
    font-size: 10px;
    letter-spacing: 2.4px;
    margin-top: 3px;
  }
  #app:has(#menu.compact-lobby:not([hidden])) > header .language-switch button {
    font-size: 13px;
  }

  #menu.compact-lobby {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-top: 0;
    font-size: 16px;
  }
  #menu.compact-lobby .lobby-opening {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-rows: 76px auto auto;
    gap: 14px 40px;
    align-items: start;
  }
  #menu.compact-lobby .lobby-intro {
    grid-column: 1;
    grid-row: 1 / 3;
  }
  /* Keep the original controls and their DOM order/handlers at every width. */
  #menu.compact-lobby .lobby-play { display: contents; }
  #menu.compact-lobby #free {
    grid-column: 2;
    grid-row: 1;
    min-height: 76px;
    height: 100%;
    padding: 18px 24px;
    font-size: 26px;
    border-radius: 16px;
  }
  #menu.compact-lobby .lobby-intro > .eyebrow {
    font-size: 12px;
    margin: 0 0 10px;
  }
  #menu.compact-lobby .lobby-intro > h1 {
    max-width: 20ch;
    font-size: clamp(36px, 3.2vw, 46px);
    line-height: 1.08;
    letter-spacing: -1.4px;
    margin: 0 0 12px;
  }
  #menu.compact-lobby .lobby-intro > .hero {
    max-width: none;
    height: 204px;
  }
  #menu.compact-lobby .hero-heckler {
    width: 210px;
    height: 210px;
    top: 0;
    right: 6px;
  }
  #menu.compact-lobby .menu-speech {
    width: 61%;
    max-width: 330px;
    top: 0;
    padding: 12px 15px;
  }
  #menu.compact-lobby .menu-speech small { font-size: 10px; }
  #menu.compact-lobby .menu-speech p { font-size: 21px; line-height: 1.2; }
  #menu.compact-lobby .mini-stack { width: 176px; left: 10px; bottom: 0; }
  #menu.compact-lobby .mini-stack span { height: 22px; font-size: 10px; }

  #menu.compact-lobby .tower-next-goal {
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
    align-content: center;
    margin: 0;
    padding: 18px 20px;
    gap: 10px 14px;
  }
  #menu.compact-lobby .tower-next-goal > small { font-size: 12px; }
  #menu.compact-lobby .tower-next-goal > strong { font-size: 22px; line-height: 1.25; }
  #menu.compact-lobby .tower-next-goal > span { font-size: 14px; max-width: 180px; }
  #menu.compact-lobby .tower-next-goal > button { font-size: 14px; min-height: 48px; padding: 12px 14px; }

  #menu.compact-lobby .lobby-destinations {
    grid-column: 1 / -1;
    grid-row: 3;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 6px;
  }
  #menu.compact-lobby .lobby-destinations > button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 84px;
    height: auto;
    padding: 14px;
    font-size: 14px;
    line-height: 1.25;
  }
  #menu.compact-lobby .lobby-destinations > button::before { width: 30px; height: 30px; }
  #menu.compact-lobby .lobby-destinations > button:not(#lobby-gifts)::after { display: none; }
  #menu.compact-lobby #lobby-gifts {
    display: grid;
    grid-template-columns: 42px auto;
    grid-template-rows: auto auto;
    justify-content: center;
    column-gap: 10px;
    row-gap: 2px;
  }
  #menu.compact-lobby #lobby-gifts .gift-package {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 42px;
    height: 48px;
  }
  #menu.compact-lobby #lobby-gifts b { height: auto; justify-content: start; font-size: 14px; }
  #menu.compact-lobby #lobby-gifts small { height: auto; font-size: 12px; line-height: 1.3; }
  #menu.compact-lobby .lobby-play > .ranked-checkpoint {
    grid-column: 1 / -1;
    grid-row: 4;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid #5b929055;
    border-radius: 12px;
    background: #1c39391a;
  }
  #menu.compact-lobby .ranked-checkpoint strong { font-size: 14px; }
  #menu.compact-lobby .ranked-checkpoint p:not([hidden]),
  #menu.compact-lobby .ranked-checkpoint button { font-size: 13px; }

  #menu.compact-lobby .lobby-extras {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 20px;
    margin: 20px 0 16px;
  }
  #menu.compact-lobby #vault-spotlight,
  #menu.compact-lobby #ego-preview {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 20px;
  }
  #menu.compact-lobby .vault-spotlight h2,
  #menu.compact-lobby #ego-preview h3 { font-size: 22px; }
  #menu.compact-lobby .vault-menu-balance { font-size: 26px; }
  #menu.compact-lobby .vault-benefits { font-size: 14px; margin: 10px 0 12px; }
  #menu.compact-lobby .start-goal > strong { font-size: 12px; }
  #menu.compact-lobby .start-goal .vault-goal-line { font-size: 15px; }
  #menu.compact-lobby .start-goal button { font-size: 13px!important; min-height: 44px; }
  #menu.compact-lobby .vault-spotlight-actions { gap: 10px; margin-top: auto; padding-top: 12px; }
  #menu.compact-lobby .vault-spotlight-actions button { font-size: 13px; padding: 12px 8px; min-height: 48px; }
  #menu.compact-lobby #ego-preview > p { font-size: 14px; margin: 12px 0; }
  #menu.compact-lobby #ego-preview .ego-row { font-size: 16px; padding: 7px 0; grid-template-columns: 32px minmax(0, 1fr); }
  #menu.compact-lobby #ego-preview > button { margin-top: auto; font-size: 13px; min-height: 48px; padding: 12px 4px; }

  #menu.compact-lobby .menu-goals { margin: 16px 0; }
  #menu.compact-lobby .menu-goals > button { min-height: 76px; padding: 12px; }
  #menu.compact-lobby .menu-goals b { font-size: 30px; }
  #menu.compact-lobby .menu-goals small { font-size: 12px; margin-top: 6px; }
  #menu.compact-lobby .lobby-records-details > summary { font-size: 15px; padding: 16px; }
  #menu.compact-lobby .lobby-board h3 { font-size: 15px; }
  #menu.compact-lobby .lobby-board li { font-size: 14px; }
  #menu.compact-lobby .lobby-board .board-note,
  #menu.compact-lobby .lobby-board .board-state,
  #menu.compact-lobby .lobby-board button { font-size: 13px; }
  #menu.compact-lobby .lobby-utility > button,
  #menu.compact-lobby .lobby-instructions > summary { font-size: 13px; }
}