/* VJ Mobile UI (VJ_44)
   - HUD oculto en móvil
   - Tabs enormes (Perfil/Chat/Mapa) con taps confiables
   - Joystick + FIRE/JUMP reducidos (sin solaparse)
*/

@media (max-width: 820px), (pointer: coarse) {
  #hud { display: none !important; }
  canvas { touch-action: none; }

  /* Tabs container: no intercepta taps; solo botones */
  #mobileTabs {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 0 !important;
    z-index: 250000 !important;
    pointer-events: none !important;
  }

  #mobProfileBtn, #mobChatBtn, #mobMapBtn {
    position: fixed !important;
    width: 112px !important;
    height: 112px !important;
    border-radius: 26px !important;
    font-size: 44px !important;
    line-height: 1 !important;
    background: rgba(255,255,255,0.96) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.38) !important;
    border: 1px solid rgba(0,0,0,0.14) !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    z-index: 250001 !important;
  }

  #mobProfileBtn { top: 16px !important; left: 16px !important; }
  #mobChatBtn    { top: 16px !important; right: 16px !important; }
  #mobMapBtn     { top: 148px !important; right: 16px !important; }

  /* Panels: pequeñas cards */
  .vjMobilePanel {
    position: fixed !important;
    top: 148px !important;
    left: 12px !important;
    width: min(88vw, 520px) !important;
    max-height: 46vh !important;
    overflow: auto !important;
    z-index: 240000 !important;
    background: rgba(255,255,255,0.96) !important;
    border-radius: 18px !important;
    padding: 10px !important;
    box-shadow: 0 14px 32px rgba(0,0,0,0.35) !important;
  }

  /* Toast grande */
  #chatToast {
    position: fixed !important;
    top: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: min(94vw, 720px) !important;
    font-size: 20px !important;
    padding: 16px 18px !important;
    border-radius: 18px !important;
    z-index: 260000 !important;
  }

  /* Controles: reducir aprox 30% y evitar solapes */
  #stick {
    width: 160px !important;
    height: 160px !important;
    left: 14px !important;
    bottom: 14px !important;
    z-index: 200000 !important;
  }
  #knob {
    width: 64px !important;
    height: 64px !important;
  }

  #fireBtn, #jumpBtn {
    width: 140px !important;
    height: 78px !important;
    border-radius: 18px !important;
    font-size: 18px !important;
    right: 14px !important;
    z-index: 200000 !important;
  }
  #fireBtn { bottom: 104px !important; }
  #jumpBtn { bottom: 14px !important; }

  /* Si existe el botón de bandera propia, mantenerlo usable */
  #btnOwnFlagToggle, #flagToggleBtn {
    width: 140px !important;
    height: 60px !important;
    border-radius: 16px !important;
    font-size: 16px !important;
    right: 14px !important;
    z-index: 200000 !important;
  }

  /* VJ_59: botón de bandera afuera, justo arriba de FIRE */
  #btnOwnFlagToggle{ bottom: 190px !important; }
}


/* VJ_46: robust panel show */

@media (max-width: 820px), (pointer: coarse) {
  #chatBox.vjMobOpen, #miniMapWrap.vjMobOpen, #panelLogin.vjMobOpen {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  #chatBox.vjMobOpen, #miniMapWrap.vjMobOpen, #panelLogin.vjMobOpen {
    position: fixed !important;
    top: 120px !important;
    left: 12px !important;
    width: min(88vw, 520px) !important;
    max-height: 46vh !important;
    overflow: auto !important;
    z-index: 10040 !important;
    background: rgba(255,255,255,.96) !important;
    border-radius: 18px !important;
    padding: 10px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.35) !important;
  }
  #miniMapWrap.vjMobOpen { top: 140px !important; }

  #miniMapModal.vjMobOpen {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 10080 !important;
  }
}


/* VJ_47 panels */

@media (max-width: 820px), (pointer: coarse) {
  #vjMobPanelChat, #vjMobPanelMap, #vjMobPanelProfile {
    position: fixed !important;
    left: 10px !important;
    top: 110px !important;
    width: calc(100vw - 20px) !important;
    max-width: 560px !important;
    max-height: 52vh !important;
    overflow: hidden !important;
    z-index: 20050 !important;
    display: none;
    background: rgba(255,255,255,.96) !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.40) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: auto !important;
  }
  #vjMobPanelMap { top: 130px !important; }
  .vjMobPanelHeader{
    display:flex; align-items:center; justify-content:space-between;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    font-weight: 800;
    font-size: 18px;
  }
  .vjMobPanelClose{
    width: 56px; height: 56px;
    border: 0; border-radius: 16px;
    background: rgba(0,0,0,.10);
    font-size: 26px;
    touch-action: manipulation;
  }
  .vjMobPanelBody{
    padding: 10px 12px;
    overflow: auto;
    max-height: calc(52vh - 72px);
  }
}


/* VJ_49 fixed actions */

@media (max-width: 820px), (pointer: coarse) {
  #vjFixedActions{
    position: fixed !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 99998 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    pointer-events: auto !important;
  }
  #vjFixedProfile{
    position: fixed !important;
    top: 14px !important;
    left: 14px !important;
    z-index: 99998 !important;
    pointer-events: auto !important;
  }
  .vjActBtn{
    width: 84px !important;
    height: 84px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(0,0,0,.18) !important;
    background: rgba(255,255,255,.95) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.35) !important;
    font-size: 34px !important;
    line-height: 1 !important;
    touch-action: manipulation !important;
    pointer-events: auto !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }
  .vjActBtn:active{ transform: scale(0.96); }
}


/* VJ_50 fixes */

@media (max-width: 820px), (pointer: coarse) {
  /* Hide older floating tab buttons (duplicates) */
  #mobileTabs{ display:none !important; }
  #mobProfileBtn, #mobChatBtn, #mobMapBtn{ display:none !important; }

  /* Mobile overlay panels (independent of existing HUD CSS) */
  #vjMobPanelChat, #vjMobPanelMap, #vjMobPanelProfile {
    position: fixed !important;
    left: 10px !important;
    top: 110px !important;
    width: calc(100vw - 20px) !important;
    max-width: 560px !important;
    max-height: 56vh !important;
    overflow: hidden !important;
    z-index: 2147483646 !important;
    display: none;
    background: rgba(255,255,255,.96) !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.40) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: auto !important;
  }
  .vjMobPanelHeader{
    display:flex; align-items:center; justify-content:space-between;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    font-weight: 800;
    font-size: 18px;
  }
  .vjMobPanelClose{
    width: 56px; height: 56px;
    border: 0; border-radius: 16px;
    background: rgba(0,0,0,.10);
    font-size: 26px;
    touch-action: manipulation;
  }
  .vjMobPanelBody{
    padding: 10px 12px;
    overflow: auto;
    max-height: calc(56vh - 72px);
  }

  /* Make sure miniMapModal is above everything when used */
  #miniMapModal{ z-index: 2147483646 !important; }
}


/* VJ_52 panel tweaks */

@media (max-width: 820px), (pointer: coarse) {
  #vjMobPanelChat .vjMobPanelBody,
  #vjMobPanelMap .vjMobPanelBody,
  #vjMobPanelProfile .vjMobPanelBody{
    min-height: 160px;
  }
  #miniMapModal{
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483646 !important;
  }
}


/* VJ_54 z-index fix */
@media (max-width: 820px), (pointer: coarse) {
  #vjFixedProfile, #vjFixedActions{ z-index: 2147483647 !important; }
  #vjMobPanelChat, #vjMobPanelMap, #vjMobPanelProfile{ z-index: 2147483646 !important; }
}


/* Ensure intro roster never shows during gameplay */
#introRoster{display:none !important;}
body.intro-open #introRoster{display:block !important;}