:root {
    --clr-bp-background: #2A2725;
    --clr-bp-item-background: #3C352E;
    --clr-bp-item-background-active: #C8BBA2;
    --clr-bp-item-border: #847668;

    --grd-bp-tooltip-background: transparent;

    --clr-bp-text: #ECE3CB;
    --clr-bp-text-blue: #9ACDFF;
    --clr-bp-text-red: #FF3E3E;
    --clr-bp-text-yellow: #FFD800;
    --clr-bp-text-lime: #D9F40B;
    --clr-bp-text-gray: #8C8A8A;

    --sz-bp-item-width: 100px;
    --sz-bp-item-height: 78px;

    --sz-bp-item-spacing: 7px;

    --sz-bp-item-radius: 10px;
    --sz-bp-item-border: 5px;

    /* Right panel width (item info) */
    --sz-right-panel-width: clamp(360px, 32vw, 555px);
}

body {
    font-family: "TF2 Secondary";

    background-color: var(--clr-bp-background);

    height: 100vh;
    max-height: 100vh;
    width: 100vw;
    max-width: 100vw;
}

.container {
    display: grid;
    grid-template-columns: 1fr var(--sz-right-panel-width);
    gap: calc(var(--sz-bp-item-spacing) * 4);

    padding: calc(var(--sz-bp-item-spacing) * 4);

    height: inherit;
    max-height: inherit;
    width: inherit;
    max-width: inherit;
}

.backpack {
    position: relative;

    padding: var(--sz-bp-item-spacing);

    max-height: 100%;

    display: flex;
    flex-wrap: wrap;

    height: fit-content;

    overflow-y: scroll;

    gap: var(--sz-bp-item-spacing);
}

.backpack,
.item-info {
    scrollbar-width: none;
}

.backpack::-webkit-scrollbar,
.item-info::-webkit-scrollbar {
    display: none;
}

.backpack .item {
    width: var(--sz-bp-item-width);
    height: var(--sz-bp-item-height);

    background-color: var(--clr-bp-item-background);

    border-radius: var(--sz-bp-item-radius);

    display: flex;
    align-items: center;
    justify-content: center;

    user-select: none;

    position: relative;
}

.backpack .item:hover {
    outline: var(--sz-bp-item-border) solid var(--clr-bp-item-border);
    outline-offset: calc(var(--sz-bp-item-border) * -1);
}

.backpack .item.active {
    background-color: var(--clr-bp-item-background-active);
}

.backpack .item.active:hover {
    outline: none;
}

.backpack .item img {
    height: 100%;
}

.backpack .item:after {
    position: absolute;
    content: "";

    width: 20px;
    height: 20px;

    background-image: none;
    background-size: contain;
    background-position: center;

    right: 4px;
    top: 4px;

    z-index: 99;
}

.item.removed:after {
    background-image: url("./img/status_removed.png");
}

.item.neutral:after {
    background-image: url("./img/status_neutral.png");
}

.item.nerf:after {
    background-image: url("./img/status_nerf.png");
}

.item.buff:after {
    background-image: url("./img/status_buff.png");
}

.item.addition:after {
    background-image: url("./img/status_addition.png");
}

.item-info {
    text-align: center;

    padding-inline: 75px;
    padding-block: 25px;

    width: 100%;
    max-width: none;
    
    display: flex;
    flex-direction: column;
    gap: 3px;

    height: 100%;

    align-self: stretch;
    overflow-y: auto;
    color: var(--clr-bp-text);
    background-color: var(--grd-bp-tooltip-background);

    text-shadow: 0 0 3px rgba(0, 0, 0, .25);

    border: 2px solid #63594C;

    border-radius: var(--sz-bp-item-radius);
}

.item-info .spacer {
    height: 8px;
}

.item-info .big {
    font-family: "TF2 Build";
    font-size: 2rem;
}

.item-info .blue {
    color: var(--clr-bp-text-blue);
}

.item-info .red {
    color: var(--clr-bp-text-red);
}

.item-info .yellow {
    color: var(--clr-bp-text-yellow);
}

.item-info .lime {
    color: var(--clr-bp-text-lime);
}

.item-info .gray {
    color: var(--clr-bp-text-gray);
}

.back-button {
    position: absolute;
    left: 25px;
    bottom: 25px;

    color: white;
}