/* Keep the desktop lobby inside the viewport: setup and secondary actions sit
   side by side, rather than growing a single form through the footer.
   Small/zoomed viewports retain natural scrolling instead of clipping controls. */
@media (min-width: 760px) and (min-height: 600px) {
  :root { --header-height: calc(64px + var(--safe-top)); }
  .topbar { padding-block: var(--safe-top) 0; }
  .brand img { width: 40px; height: 44px; }
  .lobby {
    display: grid;
    grid-template-columns: minmax(580px, 660px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 48px;
    gap: 12px 20px;
    padding: 12px 24px calc(var(--safe-bottom) + var(--banner-inset));
    overflow: visible;
  }
  .lobby .lobby-copy {
    min-width: 0;
    min-height: 0;
    padding: 0;
    gap: 12px;
    justify-content: center;
    align-items: stretch;
  }
  .lobby-intro {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 16px;
    align-items: end;
  }
  .lobby-intro .eyebrow { grid-column: 1 / -1; margin-bottom: 4px; font-size: 11px; }
  .lobby h1 { font-size: clamp(36px, 3.4vw, 48px); white-space: nowrap; line-height: 1; }
  .lobby h1 br { display: none; }
  .lobby h1 span { margin-left: .15em; }
  .lobby .tagline { margin: 0; font-size: 12px; line-height: 1.4; }
  .lobby .play-panel {
    width: 100%;
    padding: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px 16px;
  }
  .lobby .panel-heading { margin: 0; gap: 8px; }
  .panel-heading h2 { font-size: 15px; }
  .panel-heading > span { font-size: 10px; white-space: nowrap; }
  .lobby .profile-bar { margin: 0; padding: 0; border: 0; }
  #preview-save-note { grid-column: 1 / -1; margin: 0; }
  .racer-setup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start; }
  .name-field { grid-column: 1; grid-row: 1; }
  .course-field { grid-column: 2; grid-row: 1; }
  .racer-setup label { font-size: 11px; margin-bottom: 4px; }
  .racer-setup input, .racer-setup select { padding-inline: 8px; font-size: 14px; min-width: 0; }
  .lobby .colors { grid-column: 1 / -1; margin: 0; gap: 4px; }
  .colors legend { font-size: 11px; margin-right: 4px; }
  #color-name { font-size: 11px; }
  .lobby .course-tip { grid-column: 1 / -1; margin: 0; padding: 8px; font-size: 12px; line-height: 1.4; }
  .racer-setup #start-btn { grid-column: 1 / -1; margin: 0; font-size: 13px; }
  .racer-setup .micro { grid-column: 1 / -1; margin: 0; font-size: 11px; line-height: 1.4; }
  .lobby-extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; align-content: start; }
  .lobby-extras button { font-size: 12px; padding: 6px 8px; }
  .lobby-extras #signin-btn, .lobby-extras #online-btn { margin: 0; width: 100%; }
  #signin-btn { grid-column: 1; grid-row: 1; }
  #online-btn { grid-column: 2; grid-row: 1; }
  #online-note { grid-column: 1 / -1; grid-row: 2; }
  .lobby .party-actions { grid-column: 1 / -1; grid-row: 3; margin: 0; gap: 6px; }
  #join-form { grid-column: 1 / -1; grid-row: 4; }
  #menu-error { grid-column: 1 / -1; grid-row: 5; }
  #menu-error:empty { display: none; }
  .lobby-extras #store-btn { grid-column: 1; grid-row: 6; margin: 0; }
  #global-btn { grid-column: 2; grid-row: 6; }
  #ad-free-status { grid-column: 1 / -1; grid-row: 7; }
  .lobby-extras .micro { margin: 0; font-size: 11px; line-height: 1.4; }
  .lobby-extras #browse-btn { grid-column: 1 / -1; grid-row: 8; margin: 0; }
  .lobby .hero-side { min-height: 0; }
  .lobby .character-plinth { top: 50%; bottom: auto; left: 0; right: auto; width: 210px; min-width: 0; transform: translateY(-50%) rotate(-2deg); }
  .lobby #racer-preview { height: clamp(160px, 27dvh, 240px); }
  .lobby .course-caption { top: 12px; bottom: auto; left: 0; right: 0; padding: 12px; }
  .lobby .hero-sticker { display: none; }
  .lobby::before { inset: 0 0 60px 30%; }
  .lobby::after { inset: 0 50% 60px 20%; }
  .lobby .lobby-footer { min-width: 0; height: 48px; padding: 0; font-size: 10px; }
  .lobby-footer button { width: auto; }
}
@media (min-width: 760px) and (max-width: 1000px) and (min-height: 600px) {
  .lobby { grid-template-columns: minmax(0, 1fr); }
  .lobby-copy { width: min(100%, 720px); margin-inline: auto; }
  .lobby .hero-side { display: none; }
  .lobby::before { left: 0; opacity: .18; }
}

.privacy-link{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
@media(max-width:600px){.lobby .lobby-footer{height:auto;flex-wrap:wrap;gap:8px 16px}.lobby-footer .privacy-link{font-size:12px}}