/* =============================================================================
   OVERDRIVE CITY - MOBILE HUD & APK RESPONSIVE ADAPTATIONS
   Active ONLY when body has the class 'is-mobile'.
   ZERO impact on PC / Desktop keyboard & mouse experience.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. AUTH & JOIN MODAL (SCREENSHOT 1 FIX: 100% VISIBLE, NO CUTOFFS IN LANDSCAPE)
   ----------------------------------------------------------------------------- */

/* When auth/join modal is visible, strictly hide in-game HUD */
body.is-mobile #join-modal:not(.hidden) ~ #hud-container,
body.is-mobile.auth-pending #hud-container,
#join-modal:not(.hidden) ~ #hud-container {
  display: none !important;
}

body.is-mobile #join-modal {
  padding: 6px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

body.is-mobile .auth-modal-box {
  width: 92vw !important;
  max-width: 460px !important;
  max-height: 94vh !important;
  padding: 8px 14px !important;
  gap: 4px !important;
  border-width: 2px !important;
  border-radius: 10px !important;
  box-shadow: 0 0 0 1px #00f0ff, 0 0 25px rgba(0, 240, 255, 0.35) !important;
  overflow-y: auto !important;
  margin: auto !important;
}

body.is-mobile .modal-header {
  padding-bottom: 4px !important;
  margin-bottom: 2px !important;
  border-bottom-width: 2px !important;
}

body.is-mobile .modal-header h1 {
  font-size: 11px !important;
  letter-spacing: 1px !important;
  margin-bottom: 2px !important;
}

body.is-mobile .modal-header p {
  font-size: 6px !important;
  line-height: 1.2 !important;
}

body.is-mobile .auth-tabs {
  margin-bottom: 3px !important;
  gap: 6px !important;
}

body.is-mobile .auth-tab-btn {
  font-size: 7px !important;
  padding: 4px 10px !important;
  letter-spacing: 0.5px !important;
}

body.is-mobile .auth-form-panel {
  gap: 4px !important;
}

body.is-mobile .input-group {
  margin-bottom: 3px !important;
}

body.is-mobile .input-group label {
  font-size: 6px !important;
  margin-bottom: 2px !important;
}

body.is-mobile .cyber-input {
  height: 24px !important;
  padding: 2px 6px !important;
  font-size: 7px !important;
}

body.is-mobile .color-picker-row {
  gap: 5px !important;
  padding: 1px 0 !important;
}

body.is-mobile .color-swatch {
  width: 18px !important;
  height: 18px !important;
  border-radius: 3px !important;
}

body.is-mobile .btn-primary {
  font-size: 7.5px !important;
  padding: 6px 10px !important;
  margin-top: 3px !important;
}

body.is-mobile .btn-guest-login {
  font-size: 6.5px !important;
  padding: 4px 8px !important;
  margin-top: 2px !important;
}

body.is-mobile .server-config-box {
  margin-top: 4px !important;
  padding: 3px 6px !important;
  font-size: 8px !important;
  gap: 6px !important;
}

body.is-mobile .server-config-box input {
  height: 20px !important;
  font-size: 8px !important;
  width: 120px !important;
  padding: 1px 4px !important;
}

/* -----------------------------------------------------------------------------
   2. IN-GAME HUD LAYOUT (SCREENSHOT 2 FIX: ZERO OVERLAPS)
   ----------------------------------------------------------------------------- */

/* A. RADAR MINIMAP: Move from bottom-left to TOP-LEFT */
body.is-mobile .hud-bottom-left {
  top: 8px !important;
  left: 8px !important;
  bottom: auto !important;
  transform: scale(0.65) !important;
  transform-origin: top left !important;
  z-index: 60 !important;
  pointer-events: none !important;
}

/* B. CLOCK & CASH: Position next to minimap at TOP-LEFT */
body.is-mobile .hud-top-left {
  top: 8px !important;
  left: 135px !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  z-index: 60 !important;
  pointer-events: none !important;
}

body.is-mobile #hud-clock-card .clock-digital {
  font-size: 13px !important;
}

body.is-mobile #hud-clock-card .clock-period-tag {
  font-size: 7.5px !important;
  padding: 1px 3px !important;
}

body.is-mobile #hud-player-money {
  font-size: 13px !important;
}

/* C. WEAPON HUD: Compact size in TOP-RIGHT corner */
body.is-mobile .hud-top-right {
  top: 8px !important;
  right: 8px !important;
  transform: scale(0.78) !important;
  transform-origin: top right !important;
  gap: 4px !important;
  z-index: 60 !important;
}

/* D. SPEEDOMETER & RADIO: Lift above pedals so no overlap occurs */
body.is-mobile .hud-bottom-right {
  bottom: 145px !important;
  right: 12px !important;
  transform: scale(0.62) !important;
  transform-origin: bottom right !important;
  z-index: 40 !important;
  gap: 4px !important;
  pointer-events: none !important;
}

/* Hide desktop keyboard hints on mobile ("WASD: Dirigir • ESPAÇO...") */
body.is-mobile #hud-controls-hint {
  display: none !important;
}

/* Hide large 1-DIN stereo deck box on mobile to save screen real estate */
body.is-mobile .hud-vehicle-radio {
  display: none !important;
}

/* E. CHAT BOX: Minimized and centered */
body.is-mobile .hud-bottom-center {
  bottom: 8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  max-width: 220px !important;
  z-index: 50 !important;
}

body.is-mobile .chat-panel.minimized {
  height: 26px !important;
  padding: 3px 10px !important;
  font-size: 8.5px !important;
  border-radius: 13px !important;
  background: rgba(7, 11, 18, 0.88) !important;
}

body.is-mobile .chat-panel.minimized .chat-header span {
  font-size: 8px !important;
}

/* F. CAMERA ORBIT BAR: Subtle and centered top */
body.is-mobile #touch-camera-orbit-bar {
  top: 8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  opacity: 0.92 !important;
  gap: 8px !important;
  z-index: 60 !important;
}

body.is-mobile .touch-orbit-btn {
  width: 42px !important;
  height: 36px !important;
  font-size: 15px !important;
  border-radius: 10px !important;
}

body.is-mobile .touch-settings-btn {
  color: #07111f !important;
  background: rgba(34, 211, 238, 0.92) !important;
  border-color: #a5f3fc !important;
  font-size: 17px !important;
}

/* Keep pause/settings reachable and scrollable on short APK screens. */
body.is-mobile #esc-pause-modal {
  box-sizing: border-box !important;
  padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) !important;
  align-items: center !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

body.is-mobile #esc-pause-modal .esc-pause-card {
  box-sizing: border-box !important;
  width: min(96vw, 520px) !important;
  max-height: calc(100vh - 16px) !important;
  max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  padding: 10px 12px !important;
  gap: 8px !important;
  overflow: hidden !important;
}

body.is-mobile #esc-pause-modal .esc-pause-body {
  min-height: 0 !important;
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

body.is-mobile #esc-pause-modal .esc-menu-btn {
  min-height: 48px !important;
  padding: 7px 9px !important;
  touch-action: manipulation !important;
}

body.is-mobile #esc-pause-modal .esc-btn-title {
  font-size: 7.5px !important;
}

body.is-mobile #esc-pause-modal .esc-btn-desc {
  font-size: 6px !important;
}

body.is-mobile #esc-pause-modal .esc-status-badge {
  font-size: 6.5px !important;
  padding: 3px 5px !important;
}

body.is-mobile #esc-pause-modal .esc-pause-footer {
  flex: 0 0 auto !important;
}

/* G. FLOATING JOYSTICK: Pristine, unobstructed bottom-left corner */
body.is-mobile #touch-joystick-zone {
  bottom: 16px !important;
  left: 16px !important;
  width: 155px !important;
  height: 155px !important;
  z-index: 100 !important;
}

/* H. ACTION & PEDALS CLUSTER: Bottom-right corner with tight ergonomic spacing */
body.is-mobile #touch-actions-cluster {
  bottom: 16px !important;
  right: 16px !important;
  z-index: 100 !important;
}

/* Touch action buttons compact adjustments */
body.is-mobile .touch-btn-gas,
body.is-mobile .touch-btn-brake {
  width: 58px !important;
  height: 85px !important;
}

body.is-mobile .touch-btn-handbrake {
  width: 46px !important;
  height: 46px !important;
}

body.is-mobile .touch-secondary-row {
  top: -46px !important;
  right: 0 !important;
  gap: 6px !important;
}

body.is-mobile .touch-btn-small {
  width: 36px !important;
  height: 36px !important;
  font-size: 15px !important;
}

/* I. INTERACTIVE SMARTPHONE (CYBERPHONE): PERFECTLY CENTERED ON MOBILE */
body.is-mobile #smartphone-device {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  bottom: auto !important;
  right: auto !important;
  width: min(320px, 86vw) !important;
  height: min(94vh, 520px) !important;
  transform: translate(-50%, 150%) !important;
  border-radius: 30px !important;
  z-index: 9999 !important;
  pointer-events: none !important;
  box-shadow: 0 0 0 3px #334155, 0 0 35px rgba(0, 240, 255, 0.45) !important;
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.15), opacity 0.22s ease !important;
}

body.is-mobile #smartphone-device.open {
  transform: translate(-50%, -50%) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}