/* =========================================================
   RPG 2D PRO - BOTÕES / SKILL HUD FINAL LIMPO
   Passo 2: css/buttons.css organizado

   Mantém:
   - Menu e Inventário no topo direito
   - Botões antigos #attack e #magic escondidos
   - Skill HUD só dentro do jogo
   - 3 slots iniciais; JS libera os outros por level
   - Slot 1/ATK maior; demais menores
   - Cadeado no canto esquerdo inferior
   - Slots movíveis apenas com cadeado aberto
   - Slot híbrido: skill OU item do inventário
   - X de remover item só aparece com cadeado aberto
   ========================================================= */

button{
  font-family: inherit;
}

/* ===== BOTÕES ANTIGOS DESATIVADOS ===== */
#attack,
#magic,
#btnHealGame{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* ===== MENU / INVENTÁRIO PADRÃO ===== */
#openMenu,
#inv{
  position:fixed !important;
  left:auto !important;
  right:max(10px, env(safe-area-inset-right)) !important;
  width:42px !important;
  height:42px !important;
  border-radius:10px !important;
  border:1px solid rgba(191,156,87,.62) !important;
  color:#f6e6b2 !important;
  background:linear-gradient(to bottom, rgba(80,60,25,.88), rgba(25,18,8,.92)) !important;
  box-shadow:0 0 6px rgba(0,0,0,.55), inset 0 0 4px rgba(255,215,0,.15) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  touch-action:manipulation !important;
  opacity:.9 !important;
  padding:0 !important;
  margin:0 !important;
}

#openMenu{
  top:max(10px, env(safe-area-inset-top)) !important;
  z-index:10050 !important;
  font-size:18px !important;
}

#inv{
  top:max(60px, calc(env(safe-area-inset-top) + 60px)) !important;
  z-index:10049 !important;
  font-size:18px !important;
}

#openMenu:active,
#inv:active{
  transform:scale(.94) !important;
}

@media (orientation:landscape){
  #openMenu{
    top:max(8px, env(safe-area-inset-top)) !important;
  }
  #inv{
    top:max(56px, calc(env(safe-area-inset-top) + 56px)) !important;
  }
}

/* ===== SKILL HUD: escondido por padrão ===== */
#skillBar,
#skillMoveLock,
.skillMoveLock,
.skillHudHidden,
#skillBar.skillHudHidden,
#skillMoveLock.skillHudHidden,
.skillMoveLock.skillHudHidden{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* ===== CONTAINER DOS SLOTS ===== */
#skillBar.skillHudV11:not(.skillHudHidden),
#skillBar.skillBarSeparateFinal.skillHudV11:not(.skillHudHidden){
  position:fixed !important;
  left:0 !important;
  top:0 !important;
  right:auto !important;
  bottom:auto !important;
  width:0 !important;
  height:0 !important;
  min-width:0 !important;
  max-width:none !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  transform:none !important;
  overflow:visible !important;
  pointer-events:none !important;
  display:block !important;
  visibility:visible !important;
  z-index:10060 !important;
}

/* ===== BOTÕES DE SKILL / ITEM ===== */
#skillBar.skillHudV11:not(.skillHudHidden) .skillBtn.skillSeparateSlot{
  position:fixed !important;
  display:flex !important;
  visibility:visible !important;
  pointer-events:auto !important;
  align-items:center !important;
  justify-content:center !important;
  flex-direction:column !important;
  gap:0 !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:50% !important;
  border:2px solid rgba(245,210,118,.72) !important;
  color:#ffeec2 !important;
  background:radial-gradient(circle at 30% 22%, rgba(92,66,32,.98), rgba(18,12,8,.98)) !important;
  box-shadow:0 5px 16px rgba(0,0,0,.66), inset 0 0 8px rgba(255,220,120,.13) !important;
  touch-action:none !important;
  user-select:none !important;
  -webkit-user-select:none !important;
  z-index:10061 !important;
  overflow:hidden !important;
  animation:none !important;
}

#skillBar.skillHudV11:not(.skillHudHidden) .skillBtn.skillAttackMain{
  width:76px !important;
  min-width:76px !important;
  height:76px !important;
  border-color:rgba(255,110,80,.92) !important;
  background:radial-gradient(circle at 30% 22%, #ff6b5a, #7b1008 62%, #270503) !important;
  box-shadow:0 7px 24px rgba(0,0,0,.78), 0 0 16px rgba(255,70,35,.35), inset 0 0 14px rgba(255,230,180,.18) !important;
}

#skillBar.skillHudV11:not(.skillHudHidden) .skillBtn.skillSmallRound{
  width:44px !important;
  min-width:44px !important;
  height:44px !important;
  border-color:rgba(110,190,255,.74) !important;
  background:radial-gradient(circle at 30% 22%, rgba(58,84,126,.98), rgba(8,14,28,.98)) !important;
}

#skillBar.skillHudV11 .skillBtn.hasItem{
  border-color:rgba(105,255,180,.86) !important;
  background:radial-gradient(circle at 30% 22%, rgba(55,108,70,.98), rgba(8,26,17,.98)) !important;
}

#skillBar.skillHudV11 .skillBtn.missingItem{
  filter:grayscale(.8) brightness(.72) !important;
  opacity:.72 !important;
}

#skillBar.skillHudV11 .skillBtn.empty{
  opacity:.48 !important;
  border-style:dashed !important;
  filter:grayscale(.55) !important;
}

#skillBar.skillHudV11 .skillBtn.disabled{
  filter:grayscale(.7) brightness(.8) !important;
  opacity:.62 !important;
}

#skillBar.skillHudV11 .skillBtn.cooldown{
  opacity:.78 !important;
}

#skillBar.skillHudV11 .skillBtn.skillDropHover{
  outline:3px solid rgba(120,255,210,.95) !important;
  box-shadow:0 0 18px rgba(90,255,220,.75), inset 0 0 12px rgba(255,255,255,.18) !important;
}

#skillBar.skillHudV11 .skillBtn.layoutUnlocked{
  outline:2px dashed rgba(130,235,255,.9) !important;
  cursor:grab !important;
}

#skillBar.skillHudV11 .skillBtn.draggingSkillSlot{
  cursor:grabbing !important;
  transform:scale(1.08) !important;
  opacity:.92 !important;
  z-index:10085 !important;
  box-shadow:0 0 20px rgba(110,220,255,.8), inset 0 0 10px rgba(255,255,255,.18) !important;
}

#skillBar.skillHudV11 .skillBtn:active{
  transform:scale(.94) !important;
}

#skillBar.skillHudV11 .skillBtn.layoutUnlocked:active,
#skillBar.skillHudV11 .skillBtn.draggingSkillSlot:active{
  transform:scale(1.08) !important;
}

/* ===== TEXTO / ÍCONES DOS SLOTS ===== */
#skillBar.skillHudV11 .skillSlotNum{
  position:absolute !important;
  top:2px !important;
  left:5px !important;
  font-size:10px !important;
  opacity:.82 !important;
  font-weight:900 !important;
  z-index:3 !important;
  pointer-events:none !important;
}

#skillBar.skillHudV11 .skillIcon{
  display:block !important;
  font-size:18px !important;
  line-height:1 !important;
  max-width:90% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  z-index:2 !important;
  pointer-events:none !important;
}

#skillBar.skillHudV11 .skillAttackMain .skillIcon{
  font-size:26px !important;
}

#skillBar.skillHudV11 .skillName{
  max-width:92% !important;
  font-size:8px !important;
  line-height:1.05 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  font-weight:900 !important;
  text-align:center !important;
  text-shadow:0 1px 2px #000 !important;
  z-index:2 !important;
  pointer-events:none !important;
}

#skillBar.skillHudV11 .skillAttackMain .skillName{
  font-size:10px !important;
  letter-spacing:.4px !important;
}

#skillBar.skillHudV11 .skillMana{
  font-size:7px !important;
  line-height:1 !important;
  opacity:.9 !important;
  margin-top:1px !important;
  z-index:2 !important;
  pointer-events:none !important;
}

#skillBar.skillHudV11 .skillCooldownMask{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  height:0%;
  background:rgba(0,0,0,.68) !important;
  z-index:1 !important;
  pointer-events:none !important;
  transition:height .08s linear !important;
}

/* ===== REMOVER ITEM: só com cadeado aberto ===== */
#skillBar.skillHudV11 .skillItemRemove{
  position:absolute !important;
  right:0 !important;
  top:0 !important;
  width:17px !important;
  height:17px !important;
  border-radius:50% !important;
  border:1px solid rgba(255,210,210,.8) !important;
  background:rgba(70,0,0,.84) !important;
  color:#fff !important;
  font-size:12px !important;
  line-height:14px !important;
  padding:0 !important;
  z-index:4 !important;
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

body.skill-layout-unlocked #skillBar.skillHudV11 .skillItemRemove{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  align-items:center !important;
  justify-content:center !important;
}

/* ===== CADEADO ===== */
#skillMoveLock:not(.skillHudHidden),
.skillMoveLock:not(.skillHudHidden){
  position:fixed !important;
  left:max(8px, calc(env(safe-area-inset-left) + 8px)) !important;
  bottom:max(8px, calc(env(safe-area-inset-bottom) + 8px)) !important;
  right:auto !important;
  top:auto !important;
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  border-radius:50% !important;
  border:1px solid rgba(245,210,118,.78) !important;
  background:radial-gradient(circle at 30% 25%, rgba(80,60,25,.98), rgba(12,9,7,.98)) !important;
  color:#ffeec2 !important;
  z-index:10090 !important;
  display:flex !important;
  visibility:visible !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:17px !important;
  box-shadow:0 4px 14px rgba(0,0,0,.65), inset 0 0 8px rgba(255,220,120,.12) !important;
  touch-action:manipulation !important;
  pointer-events:auto !important;
  padding:0 !important;
  margin:0 !important;
}

body.skill-layout-unlocked #skillMoveLock,
body.skill-layout-unlocked .skillMoveLock{
  border-color:rgba(110,235,255,.95) !important;
  box-shadow:0 0 18px rgba(110,220,255,.55), inset 0 0 8px rgba(255,255,255,.12) !important;
}

/* ===== INVENTÁRIO -> SLOT DE SKILL ===== */
.skillBindableItem{
  cursor:grab !important;
}

.skillBindableItem:active{
  cursor:grabbing !important;
}

.skillItemPendingBind{
  outline:2px solid rgba(105,255,210,.95) !important;
  box-shadow:0 0 14px rgba(105,255,210,.55) !important;
}

/* ===== MOBILE / HORIZONTAL ===== */
@media (orientation:landscape){
  #skillBar.skillHudV11:not(.skillHudHidden) .skillBtn.skillAttackMain{
    width:72px !important;
    min-width:72px !important;
    height:72px !important;
  }

  #skillBar.skillHudV11:not(.skillHudHidden) .skillBtn.skillSmallRound{
    width:43px !important;
    min-width:43px !important;
    height:43px !important;
  }

  #skillMoveLock:not(.skillHudHidden),
  .skillMoveLock:not(.skillHudHidden){
    width:31px !important;
    height:31px !important;
    min-width:31px !important;
    font-size:15px !important;
  }

  #skillBar.skillHudV11 .skillName{
    display:none !important;
  }
}