/* Shared mobile polish for map UIs (race / replay / community) */
html, body { -webkit-text-size-adjust: 100%; }
input, select, button, textarea { font-size: 16px; }

.topbar{
  max-height: 42vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.topbar .pill{ flex-shrink: 0; }

@media (max-width: 700px){
  .topbar{
    left: 8px !important;
    right: 8px !important;
    top: 8px !important;
    padding: 8px 10px !important;
    gap: 6px !important;
    border-radius: 14px !important;
    max-height: none;
  }
  .topbar .pill{
    padding: 6px 8px !important;
    font-size: .8rem !important;
    border-radius: 10px !important;
  }
  .topbar input{
    width: 96px !important;
    padding: 8px !important;
  }
  .topbar button{
    padding: 8px 10px !important;
    min-height: 40px;
  }
  .topbar .hide-sm{ display: none !important; }

  .board, .panel{
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    border-radius: 14px !important;
  }
}

@media (max-width: 420px){
  .topbar a.home:not(.keep-sm){ display:none !important; }
}