/* css/core-minimap-mobile.css — minimapa circular, dano flutuante, controles móveis (joystick, botões de ação).
 * v0.74: dividido de core.css SEM mudar a ordem das regras (a cascata depende dela). Ordem de carga: ver index.html. */
/* ── Minimapa circular (HUD) ─────────────────────────────────────── */
  #minimap-hud {
    position: fixed;
    /* v0.48: fica ABAIXO das barras de vida/mana/stamina (3 barras = 69px a partir do topo) */
    top: calc(max(10px, env(safe-area-inset-top)) + 80px);
    left: max(10px, env(safe-area-inset-left));
    z-index: 22;
    width: 88px; height: 88px;
    border-radius: 50%;
    overflow: visible;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: none;
  }
  #minimap-hud.on {
    display: block;
    pointer-events: auto;
    opacity: 1;
    transform: none;
    cursor: pointer;
  }
  #minimap-hud-canvas {
    display: block;
    width: 88px; height: 88px;
    border-radius: 50%;
    background: #0a0d11;
    box-shadow: 0 0 0 2px rgba(110, 231, 200, 0.35), 0 4px 16px rgba(0,0,0,0.55);
  }
  #minimap-hud .mm-ring {
    position: absolute; inset: -3px;
    border-radius: 50%;
    border: 2px solid rgba(200, 180, 120, 0.55);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4);
    pointer-events: none;
  }
  #minimap-hud .mm-compass {
    position: absolute;
    top: -2px; left: 50%;
    transform: translate(-50%, -55%);
    font: 800 11px/1 system-ui, sans-serif;
    color: #f0e6d0;
    text-shadow: 0 1px 3px #000, 0 0 6px rgba(0,0,0,0.8);
    pointer-events: none;
    letter-spacing: 0.5px;
  }
  @media (min-width: 900px) {
    #minimap-hud { width: 104px; height: 104px; }
    #minimap-hud-canvas { width: 104px; height: 104px; }
  }

  #toggle-map {
    position: fixed; top: 94px; left: 124px; z-index: 13; padding: 8px 12px;
    background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25);
    border-radius: 8px; color: #fff; font-weight: 700; cursor: pointer; font-size: 12px;
  }
  /* no celular o botão some — o HUD circular basta */
  @media (pointer: coarse), (max-width: 720px) {
    #toggle-map { display: none !important; }
  }

  /* mapa grande (overlay) */
  #minimap-panel {
    position: fixed; inset: 0; z-index: 120;
    display: none;
    align-items: center; justify-content: center;
    background: rgba(0,0,0,0.58);
    padding: 18px;
    pointer-events: auto;
  }
  #minimap-panel[style*="block"], #minimap-panel.open {
    display: flex !important;
  }
  #minimap-panel .minimap-card {
    background: rgba(12,16,20,0.96);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 14px;
    padding: 12px 14px 14px;
    width: min(560px, 94vw); max-width: min(560px, 94vw);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  }
  #minimap-panel .minimap-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
  }
  #minimap-panel .minimap-head h2 {
    margin: 0; font: 700 15px/1.2 system-ui, sans-serif; color: #f0e6d0;
  }
  #minimap-floors { align-items: center; gap: 6px; font: 600 12px/1 system-ui, sans-serif; color: #d8cdb4; }
  #minimap-floors button {
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #f0e6d0;
    border-radius: 8px; width: 30px; height: 28px; cursor: pointer; font-size: 12px;
  }
  #minimap-floors button:disabled { opacity: 0.3; cursor: default; }
  #minimap-close {
    background: transparent; border: none; color: #9aa4af;
    font-size: 18px; cursor: pointer; padding: 4px 8px; line-height: 1;
  }
  #minimap-panel .minimap-stage { position: relative; }
  #minimap-canvas {
    border-radius: 10px; display: block; width: 100%; height: auto;
    max-width: 540px; background: #0a0d11; touch-action: none; cursor: grab;
  }
  #minimap-recenter {
    position: absolute; right: 8px; bottom: 8px; width: 40px; height: 40px;
    border-radius: 50%; border: 1px solid rgba(255,255,255,0.3);
    background: rgba(10,13,17,0.8); font-size: 20px; line-height: 1; cursor: pointer;
  }
  #minimap-label {
    color: #9aa4af; font-size: 11px; text-align: center; margin-top: 8px;
  }

  /* Flash de dano (vermelho na tela) */
  #damage-flash {
    position: fixed; inset: 0; z-index: 15; pointer-events: none;
    background: radial-gradient(circle, rgba(224,82,63,0) 0%, rgba(224,82,63,0.45) 100%);
    opacity: 0; transition: opacity 0.15s ease-out;
  }

  /* ===== HUD mobile limpa (sem sobreposição) ===== */
  #skill-btn { pointer-events:auto; }
  @media (pointer: coarse), (max-width: 899px) { #skill-btn { display:none !important; pointer-events:none !important; } }

  #mobile-ui {
    display: none; position: absolute; inset: 0; pointer-events: none; z-index: 20; touch-action: none;
  }
  .mobile-btn {
    pointer-events: auto;
    border: none; border-radius: 50%;
    display: flex; justify-content: center; align-items: center; font-weight: 700;
    user-select: none; touch-action: manipulation; font-size: 12px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.45);
  }
  .mobile-btn:active { transform: scale(0.94); opacity: 0.9; }

  /* Camadas fixas:
     TOPO: barras | Menu+Pets
     BAIXO: chat → XP → joystick/ações
  */
  #joystick-zone {
    position: absolute;
    bottom: max(56px, calc(env(safe-area-inset-bottom) + 48px));
    left: max(14px, env(safe-area-inset-left));
    width: 118px; height: 118px;
    background: rgba(255,255,255,0.08);
    border: 2px solid rgba(255,255,255,0.16);
    border-radius: 50%; pointer-events: auto; z-index: 22;
  }
  #joystick-knob, #joystick-stick {
    position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
    background: rgba(255,255,255,0.4);
    border-radius: 50%; pointer-events: none;
  }

  #mobile-actions {
    position: absolute;
    bottom: max(52px, calc(env(safe-area-inset-bottom) + 44px));
    right: max(12px, env(safe-area-inset-right));
    width: 120px; height: 150px; pointer-events: none; z-index: 26;
  }
  /* Skill removido da HUD — já está no hotbar slot 1 */
  #btn-mobile-ability { display: none !important; }
  #btn-mobile-attack {
    position: absolute; bottom: 0; right: 0; width: 88px; height: 88px;
    background: radial-gradient(circle at 35% 30%, #c45a52, #5a1c18);
    color: #f5e0d8; font-size: 15px; font-weight: 800;
    font-family: var(--font-display);
    pointer-events: auto;
    border: 2.5px solid #c58b70;
    border-radius: 50%;
    letter-spacing: 0.04em;
    box-shadow: 0 6px 20px rgba(0,0,0,0.45);
  }
  #target-plate, #daily-hud, #dungeon-hud, #mp-quest-hud {
    font-family: var(--font-ui);
  }
  #target-name, #dungeon-hud b, .daily-title {
    font-family: var(--font-display);
  }
  #btn-mobile-interact {
    position: absolute; bottom: 96px; right: 10px; width: 58px; height: 58px;
    background: radial-gradient(circle at 35% 30%, #3aaa62, #143828);
    color: #e8ffe8; font-size: 12px; font-weight: 800;
    pointer-events: auto;
    box-shadow: 0 4px 16px rgba(40,160,80,0.35);
    z-index: 27;
    border-radius: 50%;
  }
  #mobile-actions {
    width: 140px !important;
    height: 170px !important;
  }

  #mobile-top-right {
    position: absolute; top: max(10px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    display: flex; gap: 6px; pointer-events: auto; z-index: 24;
  }
  .eid-top-btn {
    pointer-events: auto;
    min-width: 58px; height: 36px; padding: 0 10px;
    border-radius: 9px; border: 1px solid rgba(255,255,255,0.14);
    background: rgba(16,20,28,0.92); color: #e8eef5;
    font-size: 12px; font-weight: 700; cursor: pointer;
  }
  #btn-party { display: none !important; } /* Pets só pelo Menu hub */
  /* Effects vira item do Menu — escondido na HUD principal */
  #btn-effects { display: none !important; }
  /* Evita botões flutuantes sobrepostos na HUD */
  #btn-stats-toggle, #tame-action-btn { display: none !important; }
  @media (pointer: coarse), (max-width: 900px) {
    #status, #score-wrap, #best-wrap, #hunt-objective, #desktop-hint,
    #killstreak, #enemy-banner { display: none !important; }
    #mobile-top-right { top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); }
    #mobile-top-right .eid-top-btn { min-width: 64px; padding: 10px 12px; font-size: 13px; }
  }