.skill-section{

width:100%;
height:600px;

position:relative;

overflow:visible;

}

/* FILTER BUTTONS */

.skill-filters{

display:flex;
justify-content:center;
gap:12px;
flex-wrap:wrap;

margin-bottom:25px;

}

.skill-btn{

padding:6px 18px;

border:1px solid var(--border-color);
background:var(--bg-card);
color:var(--text-color);

border-radius:6px;

cursor:pointer;

transition:.25s;

font-size:14px;

}

.skill-btn:hover{
border-color:var(--accent);
}

.skill-btn.active{
background:var(--accent);
color:#111;
}

/* CANVAS */

#network{

display:block;
width:100%;
height:100%;

}

/* Skill modal */

.skill-modal{

position:absolute;

background:var(--bg-card);
border:1px solid var(--border-color);

padding:18px 22px;

border-radius:10px;

min-width:200px;

pointer-events:none;

z-index:10;

transform:translate(-50%,-110%) scale(.8);

opacity:0;

transition:.25s;

box-shadow:0 10px 30px rgba(0,0,0,.6);

text-align:center;

backdrop-filter:blur(8px);

}

.skill-modal.show{

opacity:1;

transform:translate(-50%,-110%) scale(1);

}

.skill-title{

font-weight:600;
font-size:16px;

margin-bottom:10px;

color:var(--accent);

}

.skill-bar{

width:100%;
height:8px;

background:#222;

border-radius:10px;

overflow:hidden;

}

.skill-bar span{

display:block;
height:100%;

background:linear-gradient(90deg,#f7c873,#ff9f1c);

width:0%;

transition:width .6s ease;

}

.skill-percent{

font-size:12px;
margin-top:6px;

color:var(--text-muted);

}

/* MOBILE */

@media(max-width:768px){

.skill-section{
height:420px;
}

}