:root{
  --btn-size: 80px;
  --btn-radius: 15px;
  --btn-stroke: 3px;

  --bg-apagado-section: #0E1822;
  --bd-apagado-section: #192539;

  --bg-hover: #173815;
  --bd-hover: #2C5C23;

  --bg-apagado-home: #040A10;
  --bd-apagado-home: #10192A;
}

.menu-btn{
  width: var(--btn-size);
  height: var(--btn-size);
  border-radius: var(--btn-radius);
  display: grid;
  place-items: center;

  /* agora com traçado/borda de 3px */
  border: var(--btn-stroke) solid var(--bd-apagado-section);
  background: var(--bg-apagado-section);

  cursor: pointer;
  user-select: none;
  transition: background .18s ease, border-color .18s ease;
}

.menu-btn img{
  width: 56%;
  height: 56%;
  object-fit: contain;
  pointer-events: none;
}

/* hover ativo para qualquer modo */
.menu-btn:hover{
  background: var(--bg-hover);
  border-color: var(--bd-hover);
}

/* estado “home” apagado (antes do hover) */
.menu-btn[data-mode="home"]{
  background: var(--bg-apagado-home);
  border-color: var(--bd-apagado-home);
}

/* agora o hover do estado home também responde */
.menu-btn[data-mode="home"]:hover{
  background: var(--bg-hover);
  border-color: var(--bd-hover);
}

.menu-btn:active {
  transform: scale(0.96);
  transition: transform 0.08s ease;
}
.menu-btn {
  transition: background .18s ease, border-color .18s ease, transform .18s cubic-bezier(.22,.61,.36,1);
}


.menu-btn[data-tip],
.logo[data-tip]{
  position: relative;
}





/* tooltip estilizado */
.menu-btn[data-tip]::after,
.logo[data-tip]::after{
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  
  background: rgba(0,0,0,0.85);
  color: white;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;

  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  transform: translate(-50%, -4px);

  z-index: 999;
}

.menu-btn[data-tip]:hover::after,
.logo[data-tip]:hover::after{
  opacity: 1;
  transform: translate(-50%, -8px);
}