/* Phone layout fixes on top of the original build CSS (loaded after it from index.html). */

/* The build writes `font: 700 13px inherit`, which is invalid, so these buttons fell back to 16px and grew
   tall enough to run into the CORRER button. */
.game-activities .race-button, .game-activities .debate-global { font-family: inherit; font-weight: 700; font-size: 13px; line-height: 1.25; }

/* Team counts never wrap under the logo. */
.topbar .live { white-space: nowrap; }

@media (max-width: 760px), (pointer: coarse) {
  .game-activities .race-button { font-size: 12px; }
  .game-activities .debate-global { font-size: 11px; min-height: 36px; padding: 8px 10px; }
}

/* Narrow phones: smaller logo and counts so the top bar fits on one line. */
@media (max-width: 420px) {
  .topbar .brand { font-size: 15px; }
  .topbar .live { font-size: 10px; }
  .team-count { gap: 3px; }
  .team-count + .team-count { margin-left: 5px; }
  .team-count:before { width: 7px; height: 7px; }
  .topbar .premium-top, .topbar .passes-top { padding: 6px 9px; min-height: 34px; }
  body.mobile-hud.playing .top-actions { gap: 6px; }
  body.mobile-hud.playing .account-top, body.mobile-hud.playing .top-actions .icon-btn { width: 38px; height: 38px; }
  /* Lobby: the team cards already show who is online, so the header drops the counts. */
  body:not(.playing) .topbar .live { display: none; }
  body:not(.playing) .topbar .top-actions { gap: 6px; }
  body:not(.playing) .topbar .top-actions .icon-btn { width: 38px; height: 38px; }
  /* In the avenue only the logo mark stays, so Premium, the counts and both buttons fit. */
  .playing .topbar .brand > span:not(.brand-symbol) { display: none; }
}
@media (max-width: 360px) {
  .topbar .brand-light { display: none; }
  body:not(.playing) .topbar .brand { font-size: 14px; gap: 5px; }
  .topbar { padding: 0 10px; }
}

/* Landscape phones: a compact activity column that stays above the driving buttons. */
@media (orientation: landscape) and (max-height: 500px) {
  .game-activities { width: 150px; }
  .game-activities .race-button { min-height: 34px; padding: 5px 9px; font-size: 11px; }
  .game-activities .race-button:before { font-size: 16px; }
  .game-activities .debate-global { min-height: 34px; padding: 6px 9px; }
  .game-activities .mission-current { padding: 5px 9px; }
  body.mobile-hud.playing .hud-tools { max-height: calc(100dvh - var(--mobile-bottom) - 80px); overflow: hidden; }
  body.mobile-hud.playing .mobile-nav-button { flex-direction: row; gap: 6px; min-height: 44px; }
  body.mobile-hud.playing .mobile-nav-button svg { width: 20px; height: 20px; }
}