Editing Template:Tierlist/mobile.css

/* my tierlist template styling */
.tier-list{
    display: flex;
    flex-direction: column;
    max-width: 100%;
    border: 3px solid #222;
    border-bottom: 0;
    border-radius: 5px;
}

.tier-row{
    display: flex;
    align-items: center;
    border-bottom: 3px solid #222;
    padding: 10px;
}

.tier-label{
    width: 50px;
    min-width: 50px;
    flex-shrink: 0;
    line-height: 55px;
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    color: white;
    text-shadow: rgb(34, 34, 34) 3px 0px 0px, rgb(34, 34, 34) 2.83487px 0.981584px 0px, rgb(34, 34, 34) 2.35766px 1.85511px 0px, rgb(34, 34, 34) 1.62091px 2.52441px 0px, rgb(34, 34, 34) 0.705713px 2.91581px 0px, rgb(34, 34, 34) -0.287171px 2.98622px 0px, rgb(34, 34, 34) -1.24844px 2.72789px 0px, rgb(34, 34, 34) -2.07227px 2.16926px 0px, rgb(34, 34, 34) -2.66798px 1.37182px 0px, rgb(34, 34, 34) -2.96998px 0.42336px 0px, rgb(34, 34, 34) -2.94502px -0.571704px 0px, rgb(34, 34, 34) -2.59586px -1.50383px 0px, rgb(34, 34, 34) -1.96093px -2.27041px 0px, rgb(34, 34, 34) -1.11013px -2.78704px 0px, rgb(34, 34, 34) -0.137119px -2.99686px 0px, rgb(34, 34, 34) 0.850987px -2.87677px 0px, rgb(34, 34, 34) 1.74541px -2.43999px 0px, rgb(34, 34, 34) 2.44769px -1.73459px 0px, rgb(34, 34, 34) 2.88051px -0.838247px 0px;
}

.tier-content{
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    gap: 10px;
    padding-left: 10px;
}

.tier-content img{
    width: 55px;
    height: 55px;
    object-fit: cover;
    border: 3px solid white;
    border-radius: 5px;
    background-color:  rgba(34, 34, 34, 0.85);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tier-content img:hover{
    transform: scale(1.15);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.4);
}

.tier-item.category-starter img:hover,.tier-item.category-common img:hover{
    border-color: #919191;
}
.tier-item.category-intermediate img:hover,.tier-item.category-uncommon img:hover{
    border-color: #25b71d;
}
.tier-item.category-advanced img:hover,.tier-item.category-rare img:hover{
    border-color: #2e89c9;
}
.tier-item.category-golden img:hover{
    border-color: #d1951f;
}
.tier-item.category-hardcore img:hover,.tier-item.category-legendary img:hover{
    border-color: #a37acc;
}
.tier-item.category-event img:hover{
    border-color: #b31515;
}
.tier-item.category-ultimate img:hover,.tier-item.category-exclusive img:hover{
    border-color: #e89cff;
}

/* my custm tooltip ig */
.tier-item{ 
    position: relative;
    display: inline-block;
}

.tier-item::after{
    content: attr(data-tooltip);
    position: absolute;
    bottom: 115%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(34, 34, 34, 0.85);
    color: #fff;
    padding: 4px 8px;
    border: 3.3px solid #fff;
    border-radius: 5px;
    white-space: nowrap;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1000;
}

.tier-item:hover::after{
    opacity: 1;
}

.category-starter::after,.category-common::after{
    border-color: #919191;
}

.category-intermediate::after,.category-uncommon::after{
    border-color: #2be324;
}

.category-advanced::after,.category-rare::after{
    border-color: #2e89c9;
}

.category-golden::after{
    border-color: #e3b622;
}

.category-hardcore::after,.category-legendary::after{
    border-color: #8a3eb3;
}

.category-event::after{
    border-color: #b31515;
}

.category-ultimate::after, .category-exclusive::after{
    border-color: #e89cff
}

/* tier colors */
.s-tier {background-color: #d33b3b;} /* red */
.a-tier {background-color: #d58639;} /* orang */
.b-tier {background-color: #d7c73f;} /* yellow */
.c-tier {background-color: #3ad54f;} /* green  */
.d-tier {background-color: #5197dd;} /* bluee */
.e-tier {background-color: #885dcb;} /* purpel */
.f-tier {background-color: #b55bb5;} /* pinky */