.page-header {
    background-image: url('/assets/images/slider/2025062583_aoujf.png');
    position: relative;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
    mask-image: linear-gradient(to bottom, rgb(0 0 0) 0%, rgb(255 255 255 / 0%) 80%);
    height: 500px;
}

.page-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 60% at 50% 30%, rgba(0, 0, 0, .25), rgb(0 0 0 / 32%));
    pointer-events: none;
}

.player-profile {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: -28rem;
    z-index: 1;
    position: relative;
}

.player-header {
    text-align: center;
}

.inventory-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* KO tooltip item */
.ko-tooltip-item {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}

.ko-tooltip-item .duration,
.ko-tooltip-item .count {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 11px;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
}

.equipment-grid {
    position: relative;
    width: 370px;
    height: 400px;
    margin: 0 auto;
    background: #0e1014;
    background-size: contain;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-image: url(../images/profile/tournament_chaos_2021_a01.png);
    background-position: -512px -273px;
}

.equip-slot {
    position: absolute;
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
}

/* 0 = Right Ear */
.slot-0 {
    top: 40px;
    right: 110px;
}

/* 1 = Head */
.slot-1 {
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
}

/* 2 = Left Ear */
.slot-2 {
    top: 40px;
    left: 110px;
}

/* 3 = Neck */
.slot-3 {
    top: 95px;
    left: 50%;
    transform: translateX(-50%);
}

/* 4 = Breast (Armor) */
.slot-4 {
    top: 150px;
    left: 50%;
    transform: translateX(-50%);
}

/* 5 = Shoulder (Cape) */
.slot-5 {
    top: 95px;
    right: 110px;
}

/* 6 = Right Hand (Weapon) */
.slot-6 {
    top: 150px;
    left: 110px;
}

/* 7 = Waist (Belt) */
.slot-7 {
    top: 205px;
    left: 50%;
    transform: translateX(-50%);
}

/* 8 = Left Hand (Shield) */
.slot-8 {
    top: 150px;
    right: 110px;
}

/* 9 = Right Ring */
.slot-9 {
    top: 260px;
    right: 110px;
}

/* 10 = Leg */
.slot-10 {
    top: 260px;
    left: 50%;
    transform: translateX(-50%);
}

/* 11 = Left Ring */
.slot-11 {
    top: 260px;
    left: 110px;
}

/* 12 = Gloves */
.slot-12 {
    top: 315px;
    left: 110px;
}

/* 13 = Foot (Boots) */
.slot-13 {
    top: 315px;
    left: 50%;
    transform: translateX(-50%);
}

.ko-tooltip-item {
    background-size: 54px 54px;
    background-position: top left;
}

.inventory-bag {
    display: grid;
    grid-template-columns: repeat(7, 45px);
    gap: 6px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.bag-slot {
    width: 45px;
    height: 45px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 3px;
}

.inventory-seperator {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.magic-bags {
    display: flex;
    align-items: self-end;
    gap: 1rem;
}

.magic-bags .bag-tab h5 {
    font-size: 16px;
    text-align: center;
}

.inventory-bag.magic-bag {
    grid-template-columns: repeat(3, 45px);
}

.user-profile-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: space-between;
}

.profile-details {
    background: rgba(0, 0, 0, 0.4);
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 1rem;
}

.user-stats {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.user-stats .user-stat {
    width: 100%;
    align-items: center;
    display: flex;
}

.user-stats .user-stat .stat-text {
    padding: 0.3rem 0.6rem;
    border-radius: 10px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background: linear-gradient(45deg, #26221a85, #473f2c8c);
    text-align: end;
    width: 140px;
}

.user-stats .user-stat .stat-value {
    padding: 0.3rem 0.8rem;
    border-radius: 10px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background: linear-gradient(45deg, #311b2085, #2c42478c);
    flex: 1 1;
    font-weight: 600;
}

.pus-items
{
    flex-shrink: 0;
}

.inventory-bag.pus-bag {
    grid-template-columns: repeat(3, 45px);
}

@media only screen and (max-width: 992px) {
    .magic-bags {
        flex-wrap: wrap;
    }
}