/* =========================================================
   SeuBairro — MOBILE (/mobile)
   Interface limpa de celular: esconde o chrome de PC e deixa
   só o essencial: jogo fullscreen + HUD de toque.
   Carregado DEPOIS de todos os outros CSS (vence por ordem).
   Tema: dourado #FFD700, sem verde.
   ========================================================= */

/* ---------- base mobile ---------- */
.mb-mobile { height: 100dvh; }
.mb-mobile body {
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  user-select: none;
  -webkit-user-select: none;
}
.mb-mobile * { -webkit-tap-highlight-color: transparent; }
.mb-mobile input, .mb-mobile textarea { user-select: text; -webkit-user-select: text; }

/* ---------- esconde interface de PC ---------- */
.mb-mobile .topbar,
.mb-mobile #sideBar,
.mb-mobile .game > .side,
.mb-mobile .chatbox,
.mb-mobile .hud .card,
.mb-mobile .clock-card,
.mb-mobile #staffPanelBtn,
.mb-mobile .map-key { display: none !important; }

/* stage ocupa tudo */
.mb-mobile .game { display: block !important; }
.mb-mobile #stage {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100dvh !important;
  z-index: 1 !important;
}
.mb-mobile #map { touch-action: none; }

/* =========================================================
   BARRA SUPERIOR SLIM (injetada pelo js/mobile.js)
   ========================================================= */
#mbTopbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: calc(6px + env(safe-area-inset-top)) 10px 6px;
  background: linear-gradient(180deg, rgba(7,18,28,.96), rgba(2,7,13,.88));
  border-bottom: 2px solid #FFD700;
  box-shadow: 0 4px 16px #000a;
  color: #F2F5F3;
  font-family: Oxanium, Rajdhani, system-ui, sans-serif;
}
#mbTopbar .mbt-bar-btn {
  flex: 0 0 46px;
  width: 46px; height: 46px;
  border-radius: 12px;
  border: 1px solid #8A5F1C;
  background: linear-gradient(180deg, #FFD700, #E8A93D);
  color: #1a1206;
  font-size: 22px;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
#mbTopbar .mbt-bar-btn:active { transform: scale(.94); }
#mbCoins {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  min-height: 46px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid #4d3d0b;
  background: linear-gradient(180deg, #102536, #07121C);
  color: #FFD43B;
  font-weight: 800;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
}
#mbOnline {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; color: #AEB8BD;
  padding: 0 6px;
}
#mbOnline .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #FFD700;
  box-shadow: 0 0 8px #FFD700;
}

/* ---------- gaveta lateral (menu) ---------- */
#mbDrawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 6000;
  width: min(280px, 84vw);
  padding: calc(14px + env(safe-area-inset-top)) 14px 14px;
  background: linear-gradient(180deg, #0B1B28, #02070D);
  border-right: 2px solid #FFD700;
  box-shadow: 8px 0 30px #000c;
  transform: translateX(-105%);
  transition: transform .22s ease;
  display: flex; flex-direction: column; gap: 10px;
}
#mbDrawer.open { transform: translateX(0); }
#mbDrawer h3 {
  margin: 0 0 4px;
  color: #FFE08A;
  font: 800 13px Oxanium, sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
}
#mbDrawer button.mb-drawer-item {
  min-height: 52px;
  border-radius: 12px;
  border: 1px solid #1A3548;
  background: #07121C;
  color: #F2F5F3;
  font-size: 16px; font-weight: 700;
  text-align: left;
  padding: 0 14px;
  cursor: pointer;
}
#mbDrawer button.mb-drawer-item:active { border-color: #FFD700; }
#mbDrawer button.mb-drawer-item.danger { color: #ff9a9a; border-color: #5a2323; }
#mbScrim {
  position: fixed; inset: 0; z-index: 5900;
  background: rgba(0,0,0,.55);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}
#mbScrim.open { opacity: 1; pointer-events: auto; }

/* =========================================================
   BARRA INFERIOR (menu do bairro) — botões grandes de toque
   ========================================================= */
.mb-mobile #bottomUI.bottom-ui {
  position: fixed !important;
  left: 0 !important; right: 0 !important;
  bottom: 0 !important; top: auto !important;
  z-index: 4000 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 6px 8px calc(8px + env(safe-area-inset-bottom)) !important;
  background: linear-gradient(180deg, rgba(7,18,28,.94), rgba(2,7,13,.97)) !important;
  border-top: 2px solid #FFD700 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.mb-mobile #bottomUI .bottom-menu {
  width: 100% !important;
  display: flex !important;
  gap: 6px !important;
  overflow-x: auto !important;
  padding: 2px !important;
  scrollbar-width: none !important;
}
.mb-mobile #bottomUI .bottom-menu::-webkit-scrollbar { display: none !important; }
.mb-mobile #bottomUI .bottom-item {
  flex: 1 0 62px !important;
  min-width: 62px !important;
  min-height: 60px !important;
  border-radius: 14px !important;
  border: 1px solid #1A3548 !important;
  background: #07121C !important;
  color: #F2F5F3 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 6px 2px !important;
}
.mb-mobile #bottomUI .bottom-item .bottom-icon { font-size: 24px !important; line-height: 1 !important; }
.mb-mobile #bottomUI .bottom-item.active {
  border-color: #FFD700 !important;
  background: #0B2A1A !important;
  color: #FFE08A !important;
  box-shadow: 0 0 12px rgba(255,209,102,.15) !important;
}

/* chat retrátil acima da barra inferior */
.mb-mobile #bottomUI #chatInputBar.chat-input-bar {
  right: max(10px, env(safe-area-inset-right)) !important;
  bottom: calc(100% + 8px) !important;
  position: absolute !important;
}
.mb-mobile #bottomUI #chatHistory {
  max-height: min(240px, 38dvh) !important;
}
.mb-mobile #bottomUI #chatInputBar #chatToggle,
.mb-mobile #bottomUI #chatInputBar #send,
.mb-mobile #bottomUI #chatInputBar #micBtn {
  min-width: 48px !important; min-height: 48px !important;
  width: 48px !important; height: 48px !important;
}
.mb-mobile #bottomUI #chatInputBar #chatInput {
  min-height: 48px !important;
  font-size: 16px !important; /* evita zoom automático no iOS */
}

/* =========================================================
   MINIMAPA — pequeno no canto, abaixo da barra superior
   ========================================================= */
.mb-mobile #mbMinimap {
  top: calc(64px + env(safe-area-inset-top)) !important;
  right: 8px !important;
  transform: scale(.82) !important;
  transform-origin: top right !important;
  z-index: 3000 !important;
}
.mb-mobile #mbMinimapOpen {
  top: calc(64px + env(safe-area-inset-top)) !important;
  right: 8px !important;
  z-index: 3000 !important;
}
.mb-mobile #mbMinimapBig {
  z-index: 7000 !important;
  max-width: 94vw !important;
}

/* =========================================================
   NECESSIDADES (fome/sede/energia) — compacto e dobrável
   (canto superior ESQUERDO no mobile, sem brigar com o minimapa)
   ========================================================= */
.mb-mobile #mbNeedsHud {
  top: calc(64px + env(safe-area-inset-top)) !important;
  left: 8px !important;
  right: auto !important;
  z-index: 3000 !important;
  min-width: 128px !important;
  padding: 6px 8px !important;
  font-size: 8px !important;
  transition: transform .2s ease, opacity .2s ease;
}
.mb-mobile #mbNeedsHud .mbn-row > span { width: 44px !important; }
.mb-mobile #mbNeedsHud.mbn-hidden {
  transform: translateX(-120%);
  opacity: 0;
  pointer-events: none;
}

/* =========================================================
   JOYSTICK / BOTÕES DE TOQUE — tema dourado
   ========================================================= */
.mb-mobile .mbt-joy { border-color: rgba(255,215,0,.55) !important; }
.mb-mobile .mbt-knob { border-color: rgba(255,215,0,.7) !important; }
.mb-mobile .mbt-btn {
  border-color: rgba(255,215,0,.5) !important;
  min-width: 58px; min-height: 58px;
}
.mb-mobile .mbt-btn.on { background: rgba(255,215,0,.55) !important; color: #1a1206 !important; }
.mb-mobile .mbt-act { border-color: #FFD700 !important; }
.mb-mobile #mbtMic.live { border-color: #FFD700 !important; color: #FFD700 !important; }

/* =========================================================
   MENUS / MODAIS / POPUPS — cabem na tela do celular
   ========================================================= */
.mb-mobile .interaction-menu,
.mb-mobile .profile-peek,
.mb-mobile #profilePeek {
  max-width: calc(100vw - 20px) !important;
  max-height: 62dvh !important;
  overflow: auto !important;
}
.mb-mobile .interaction-menu button,
.mb-mobile .profile-peek button,
.mb-mobile .social-profile-actions button,
.mb-mobile .social-friend-row button {
  min-height: 48px !important;
  font-size: 14px !important;
}
.mb-mobile .mb-modal-card,
.mb-mobile .modal-card,
.mb-mobile .mb-trade-card {
  width: calc(100vw - 20px) !important;
  max-width: 560px !important;
  max-height: 88dvh !important;
  overflow: auto !important;
}
.mb-mobile .mb-trade-panels { grid-template-columns: 1fr !important; }
.mb-mobile .bubble { font-size: 13px !important; max-width: 62vw; }

/* celular do jogo (apps) em tela cheia no mobile */
.mb-mobile #mbPhone, .mb-mobile .mb-phone {
  width: min(430px, 100vw) !important;
  height: min(92dvh, 900px) !important;
}

/* =========================================================
   LANDSCAPE baixinho — enxuga ainda mais
   ========================================================= */
@media (max-height: 500px) and (orientation: landscape) {
  #mbTopbar { min-height: 46px; }
  #mbTopbar .mbt-bar-btn { width: 42px; height: 42px; flex-basis: 42px; }
  #mbCoins { min-height: 42px; font-size: 14px; }
  .mb-mobile #bottomUI .bottom-item { min-height: 52px !important; flex-basis: 56px !important; }
  .mb-mobile #mbNeedsHud { display: none !important; }
  .mb-mobile .mbt-joy { width: 104px !important; height: 104px !important; bottom: 70px !important; }
  .mb-mobile .mbt-btns { bottom: 70px !important; }
}

/* telas bem estreitas */
@media (max-width: 360px) {
  .mb-mobile #bottomUI .bottom-item { flex-basis: 56px !important; min-width: 56px !important; font-size: 9px !important; }
  #mbCoins { font-size: 14px; }
}

/* Remove a barra slim do topo no mobile */
.mb-mobile-topbar { display: none !important; }

/* Chat retrátil e transparente no mobile */
.mb-mobile .chat-container, .mb-mobile #chat, .mb-mobile .chat-box {
  opacity: 0.7 !important;
  background: rgba(0,0,0,0.5) !important;
  max-height: 120px !important;
  transition: all 0.3s ease !important;
}
.mb-mobile .chat-container.minimized, .mb-mobile #chat.minimized {
  max-height: 40px !important;
  overflow: hidden !important;
}
.mb-mobile .chat-toggle-btn {
  position: fixed !important;
  bottom: 80px !important;
  right: 10px !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: rgba(255,215,0,0.8) !important;
  z-index: 9999 !important;
}