The Deadlock Wiki - User contributions [en]

Template:ItemBox/styles.css

2026-07-24T00:08:35Z

~2026-HexCooldownBooster745: the return of undo

/* The whole card scales off one knob: font-size on .itembox (1em = 10px base) */
.itembox,
.itembox * {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
.itembox {
--itembox-ink: #10130D;
--itembox-weapon: #EC981a;
--itembox-vitality: #7CBB1E;
--itembox-spirit: #CE91FF;
--itembox-imbue-fg: #E8C9FF;
--itembox-imbue-bg: #623585;
--itembox-font: 'Retail Demo', sans-serif;
position: relative;
display: inline-block;
font-size: 10px;
width: 8em;
height: 12.5em;
border-radius: 0.6em;
box-shadow: 0.2em 0.2em 1.2em #00000097;
overflow: hidden;
transition-duration: 0.1s;
transition-property: opacity, transform, filter;
/* Offscreen cards skip layout, paint and compositing entirely. The box is a
fixed 8em x 12.5em, so contain-intrinsic-size keeps the placeholder the
exact size of the real card and nothing reflows on scroll. */
content-visibility: auto;
contain-intrinsic-size: 8em 12.5em;
}
.itembox-background {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
pointer-events: none;
}
.itembox-card {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
background-size: cover;
/* Confines mix-blend-mode below to the card. Without it the blend group
reaches the page backdrop and the card cannot be cached as one layer. */
isolation: isolate;
}

.itembox-tier-1.itembox-weapon .itembox-card {
background-image: url('/images/3/3e/Weapon_Card_T1.png');
}
.itembox-tier-2.itembox-weapon .itembox-card {
background-image: url('/images/9/96/Weapon_Card_T2.png');
}
.itembox-tier-3.itembox-weapon .itembox-card {
background-image: url('/images/5/5d/Weapon_Card_T3.png');
}
.itembox-tier-4.itembox-weapon .itembox-card {
background-image: url('/images/a/a6/Weapon_Card_T4.png');
}
.itembox-tier-5.itembox-weapon .itembox-card {
background-image: url('/images/a/a6/Weapon_Card_T4.png');
}
.itembox-tier-1.itembox-vitality .itembox-card {
background-image: url('/images/7/75/Armor_Card_T1.png');
}
.itembox-tier-2.itembox-vitality .itembox-card {
background-image: url('/images/0/05/Armor_Card_T2.png');
}
.itembox-tier-3.itembox-vitality .itembox-card {
background-image: url('/images/7/7c/Armor_Card_T3.png');
}
.itembox-tier-4.itembox-vitality .itembox-card {
background-image: url('/images/1/18/Armor_Card_T4.png');
}
.itembox-tier-5.itembox-vitality .itembox-card {
background-image: url('/images/1/18/Armor_Card_T4.png');
}
.itembox-tier-1.itembox-spirit .itembox-card {
background-image: url('/images/a/af/Tech_Card_T1.png');
}
.itembox-tier-2.itembox-spirit .itembox-card {
background-image: url('/images/a/ac/Tech_Card_T2.png');
}
.itembox-tier-3.itembox-spirit .itembox-card {
background-image: url('/images/6/67/Tech_Card_T3.png');
}
.itembox-tier-4.itembox-spirit .itembox-card {
background-image: url('/images/f/f5/Tech_Card_T4.png');
}
.itembox-tier-5.itembox-spirit .itembox-card {
background-image: url('/images/f/f5/Tech_Card_T4.png');
}

.itembox-icon-area {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
aspect-ratio: 1 / 1;
}
.itembox-icon {
width: 100%;
height: 100%;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
mask-size: cover;
mask-repeat: no-repeat;
mask-mode: luminance;
}
.itembox-icon > span,
.itembox-icon > span > span,
.itembox-icon picture {
display: block;
width: 100%;
height: 100%;
}
.itembox-icon img {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: cover;
}

.itembox-icon-v1 .itembox-icon {
mask-image: url('/images/1/10/Icon_mask01.png');
}
.itembox-icon-v2 .itembox-icon {
mask-image: url('/images/6/6f/Icon_mask02.png');
}
.itembox-icon-v3 .itembox-icon {
mask-image: url('/images/9/96/Icon_mask03.png');
}

.itembox-tier-badge {
position: absolute;
top: 0;
right: 0;
width: 2.8em;
height: 2.8em;
transform: scale(1.4);
transform-origin: top right;
/* display:none rather than visibility:hidden so the badge and its
drop-shadow() cost nothing on the cards that never show it. */
display: none;
}
.itembox-show-tier .itembox-tier-badge {
display: block;
}
.itembox-tier-badge-fill {
width: 100%;
height: 100%;
mask-size: 2.2em;
mask-repeat: no-repeat;
mask-position: right 0;
mask-image: url('/images/6/61/Tier_corner_cap.svg');
}
.itembox-tier-badge-shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: 2.2em;
background-repeat: no-repeat;
background-position: right 0;
background-image: url('/images/6/61/Tier_corner_cap.svg');
filter: drop-shadow(-0.4em 0 0.6em #000000ff);
}

.itembox-weapon .itembox-tier-badge-fill {
background-color: var(--itembox-weapon);
}
.itembox-vitality .itembox-tier-badge-fill {
background-color: var(--itembox-vitality);
}
.itembox-spirit .itembox-tier-badge-fill {
background-color: var(--itembox-spirit);
}

.itembox-tier-badge-number {
position: absolute;
right: 0;
top: 0.3em;
height: 0.8em;
mask-size: 100% 100%;
background-color: var(--itembox-ink);
}
.itembox-tier-1 .itembox-tier-badge-number {
width: 0.5em;
right: 0.4em;
mask-image: url('/images/2/24/Tier_numbers_small_01.svg');
}
.itembox-tier-2 .itembox-tier-badge-number {
width: 0.7em;
right: 0.3em;
mask-image: url('/images/7/74/Tier_numbers_small_02.svg');
}
.itembox-tier-3 .itembox-tier-badge-number {
width: 0.9em;
right: 0.2em;
mask-image: url('/images/5/54/Tier_numbers_small_03.svg');
}
.itembox-tier-4 .itembox-tier-badge-number {
width: 1.1em;
mask-image: url('/images/c/c6/Tier_numbers_small_04.svg');
}
.itembox-tier-5 .itembox-tier-badge-number {
width: 1.1em;
right: 0.1em;
mask-image: url('/images/8/81/Tier_numbers_small_05.svg');
}

.itembox-imbue-tag {
position: absolute;
bottom: 0;
display: none;
flex-direction: column;
justify-content: center;
width: 100%;
height: fit-content;
font-size: 1.2em;
font-weight: bold;
font-family: var(--itembox-font);
line-height: normal;
letter-spacing: 0.1em;
white-space: nowrap;
text-align: center;
text-transform: uppercase;
border-radius: 0.2em;
padding: 0 0.3em;
color: var(--itembox-imbue-fg);
background-color: var(--itembox-imbue-bg);
}
.itembox-imbue .itembox-imbue-tag {
display: flex;
}
.itembox-active.itembox-imbue .itembox-imbue-tag {
justify-content: start;
height: 2.2em;
}

.itembox-name-area {
width: 100%;
height: 4.5em;
padding: 0.5em 0.4em;
}
.itembox-name {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
line-height: 1.2;
text-align: center;
font-size: 1.5em;
font-weight: bold;
font-family: var(--itembox-font);
color: var(--itembox-ink);
overflow-wrap: normal;
word-break: normal;
}

.itembox-tier-4.itembox-weapon .itembox-name,
.itembox-tier-5.itembox-weapon .itembox-name {
color: #e4c5a1;
}
.itembox-tier-4.itembox-vitality .itembox-name,
.itembox-tier-5.itembox-vitality .itembox-name {
color: #c2e7cd;
}
.itembox-tier-4.itembox-spirit .itembox-name,
.itembox-tier-5.itembox-spirit .itembox-name {
color: #e3d4f2;
}

.itembox-wear {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.7;
mask-size: 100% 100%;
background-color: white;
}
.itembox-wear-v1 .itembox-wear {
mask-image: url('/images/8/8f/Card_PaperWear_1.png');
}
.itembox-wear-v2 .itembox-wear {
mask-image: url('/images/1/11/Card_PaperWear_2.png');
}
.itembox-wear-v3 .itembox-wear {
mask-image: url('/images/8/89/Card_PaperWear_3.png');
}
.itembox-wear-v4 .itembox-wear {
mask-image: url('/images/5/52/Card_PaperWear_4.png');
}

.itembox-tier-1.itembox-vitality .itembox-wear {
opacity: 1;
background-color: #f4e2cd;
}
.itembox-tier-1.itembox-spirit .itembox-wear {
opacity: 1;
background-color: rgb(247, 232, 213);
}
.itembox-tier-2 .itembox-wear {
background-color: rgb(230, 209, 191);
}
.itembox-tier-3 .itembox-wear {
background-color: rgb(206, 173, 155);
}
.itembox-tier-4 .itembox-wear,
.itembox-tier-5 .itembox-wear {
background-color: rgb(105, 97, 92);
}

.itembox-texture {
position: absolute;
width: 100%;
height: 100%;
background-size: 100% 100%;
mix-blend-mode: multiply;
}
.itembox-texture-v1 .itembox-texture {
background-image: url('/images/9/97/Shopitem_papertexture01.png');
}
.itembox-texture-v2 .itembox-texture {
background-image: url('/images/b/bf/Shopitem_papertexture02.png');
}
.itembox-texture-v3 .itembox-texture {
background-image: url('/images/9/95/Shopitem_papertexture03.png');
}

/* Two hairlines at ~13% alpha: screen and normal blending land within ~2% of
each other here, so the blend mode is dropped and the layer stays cheap. */
.itembox-bevel {
position: absolute;
width: 100%;
height: 100%;
border-left: 0.1em solid #ffcc6622;
border-top: 0.1em solid #ffcc6622;
background-size: 100% 100%;
}

.itembox-active-tag {
position: absolute;
bottom: 3.5em;
display: none;
flex-direction: column;
justify-content: center;
align-self: center;
width: fit-content;
height: fit-content;
font-size: 1.1em;
font-weight: bold;
font-family: var(--itembox-font);
line-height: normal;
letter-spacing: 0;
white-space: nowrap;
text-align: center;
text-transform: uppercase;
border-radius: 0.2em;
padding: 0.1em 0.6em;
box-shadow: 0 0 1.5em #000000ff;
color: #ffefd7b3;
background-color: #171717;
}
.itembox-active .itembox-active-tag {
display: flex;
}

.itembox .item-link-wrapper,
.itembox .item-link-wrapper > a {
position: absolute;
display: block;
inset: 0;
}

Template:ItemBox/styles.css

2026-07-24T00:07:07Z

~2026-HexCooldownBooster745: undo-fication intensifies

/* The whole card scales off one knob: font-size on .itembox (1em = 10px base) */
.itembox,
.itembox * {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
.itembox {
--itembox-ink: #10130D;
--itembox-weapon: #EC981a;
--itembox-vitality: #7CBB1E;
--itembox-spirit: #CE91FF;
--itembox-imbue-fg: #E8C9FF;
--itembox-imbue-bg: #623585;
--itembox-font: 'Retail Demo', sans-serif;
position: relative;
display: inline-block;
font-size: 10px;
width: 8em;
height: 12.5em;
border-radius: 0.6em;
box-shadow: 0.2em 0.2em 1.2em #00000097;
overflow: hidden;
transition-duration: 0.1s;
transition-property: opacity, transform, filter;
}
.itembox-background {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
pointer-events: none;
}
.itembox-card {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
background-size: cover;
}

.itembox-tier-1.itembox-weapon .itembox-card {
background-image: url('/images/3/3e/Weapon_Card_T1.png');
}
.itembox-tier-2.itembox-weapon .itembox-card {
background-image: url('/images/9/96/Weapon_Card_T2.png');
}
.itembox-tier-3.itembox-weapon .itembox-card {
background-image: url('/images/5/5d/Weapon_Card_T3.png');
}
.itembox-tier-4.itembox-weapon .itembox-card {
background-image: url('/images/a/a6/Weapon_Card_T4.png');
}
.itembox-tier-5.itembox-weapon .itembox-card {
background-image: url('/images/a/a6/Weapon_Card_T4.png');
}
.itembox-tier-1.itembox-vitality .itembox-card {
background-image: url('/images/7/75/Armor_Card_T1.png');
}
.itembox-tier-2.itembox-vitality .itembox-card {
background-image: url('/images/0/05/Armor_Card_T2.png');
}
.itembox-tier-3.itembox-vitality .itembox-card {
background-image: url('/images/7/7c/Armor_Card_T3.png');
}
.itembox-tier-4.itembox-vitality .itembox-card {
background-image: url('/images/1/18/Armor_Card_T4.png');
}
.itembox-tier-5.itembox-vitality .itembox-card {
background-image: url('/images/1/18/Armor_Card_T4.png');
}
.itembox-tier-1.itembox-spirit .itembox-card {
background-image: url('/images/a/af/Tech_Card_T1.png');
}
.itembox-tier-2.itembox-spirit .itembox-card {
background-image: url('/images/a/ac/Tech_Card_T2.png');
}
.itembox-tier-3.itembox-spirit .itembox-card {
background-image: url('/images/6/67/Tech_Card_T3.png');
}
.itembox-tier-4.itembox-spirit .itembox-card {
background-image: url('/images/f/f5/Tech_Card_T4.png');
}
.itembox-tier-5.itembox-spirit .itembox-card {
background-image: url('/images/f/f5/Tech_Card_T4.png');
}

.itembox-icon-area {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
aspect-ratio: 1 / 1;
}
.itembox-icon {
width: 100%;
height: 100%;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
mask-size: cover;
mask-repeat: no-repeat;
mask-mode: luminance;
}
.itembox-icon > span,
.itembox-icon > span > span,
.itembox-icon picture {
display: block;
width: 100%;
height: 100%;
}
.itembox-icon img {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: cover;
}

.itembox-icon-v1 .itembox-icon {
mask-image: url('/images/1/10/Icon_mask01.png');
}
.itembox-icon-v2 .itembox-icon {
mask-image: url('/images/6/6f/Icon_mask02.png');
}
.itembox-icon-v3 .itembox-icon {
mask-image: url('/images/9/96/Icon_mask03.png');
}

.itembox-tier-badge {
position: absolute;
top: 0;
right: 0;
width: 2.8em;
height: 2.8em;
transform: scale(1.4);
transform-origin: top right;
visibility: hidden;
}
.itembox-show-tier .itembox-tier-badge {
visibility: visible;
}
.itembox-tier-badge-fill {
width: 100%;
height: 100%;
mask-size: 2.2em;
mask-repeat: no-repeat;
mask-position: right 0;
mask-image: url('/images/6/61/Tier_corner_cap.svg');
}
.itembox-tier-badge-shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: 2.2em;
background-repeat: no-repeat;
background-position: right 0;
background-image: url('/images/6/61/Tier_corner_cap.svg');
filter: drop-shadow(-0.4em 0 0.6em #000000ff);
}

.itembox-weapon .itembox-tier-badge-fill {
background-color: var(--itembox-weapon);
}
.itembox-vitality .itembox-tier-badge-fill {
background-color: var(--itembox-vitality);
}
.itembox-spirit .itembox-tier-badge-fill {
background-color: var(--itembox-spirit);
}

.itembox-tier-badge-number {
position: absolute;
right: 0;
top: 0.3em;
height: 0.8em;
mask-size: 100% 100%;
background-color: var(--itembox-ink);
}
.itembox-tier-1 .itembox-tier-badge-number {
width: 0.5em;
right: 0.4em;
mask-image: url('/images/2/24/Tier_numbers_small_01.svg');
}
.itembox-tier-2 .itembox-tier-badge-number {
width: 0.7em;
right: 0.3em;
mask-image: url('/images/7/74/Tier_numbers_small_02.svg');
}
.itembox-tier-3 .itembox-tier-badge-number {
width: 0.9em;
right: 0.2em;
mask-image: url('/images/5/54/Tier_numbers_small_03.svg');
}
.itembox-tier-4 .itembox-tier-badge-number {
width: 1.1em;
mask-image: url('/images/c/c6/Tier_numbers_small_04.svg');
}
.itembox-tier-5 .itembox-tier-badge-number {
width: 1.1em;
right: 0.1em;
mask-image: url('/images/8/81/Tier_numbers_small_05.svg');
}

.itembox-imbue-tag {
position: absolute;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: fit-content;
font-size: 1.2em;
font-weight: bold;
font-family: var(--itembox-font);
line-height: normal;
letter-spacing: 0.1em;
white-space: nowrap;
text-align: center;
text-transform: uppercase;
border-radius: 0.2em;
padding: 0 0.3em;
color: var(--itembox-imbue-fg);
background-color: var(--itembox-imbue-bg);
visibility: hidden;
}
.itembox-imbue .itembox-imbue-tag {
visibility: visible;
}
.itembox-active.itembox-imbue .itembox-imbue-tag {
justify-content: start;
height: 2.2em;
}

.itembox-name-area {
width: 100%;
height: 4.5em;
padding: 0.5em 0.4em;
}
.itembox-name {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
line-height: 1.2;
text-align: center;
font-size: 1.5em;
font-weight: bold;
font-family: var(--itembox-font);
color: var(--itembox-ink);
overflow-wrap: normal;
word-break: normal;
}

.itembox-tier-4.itembox-weapon .itembox-name,
.itembox-tier-5.itembox-weapon .itembox-name {
color: #e4c5a1;
}
.itembox-tier-4.itembox-vitality .itembox-name,
.itembox-tier-5.itembox-vitality .itembox-name {
color: #c2e7cd;
}
.itembox-tier-4.itembox-spirit .itembox-name,
.itembox-tier-5.itembox-spirit .itembox-name {
color: #e3d4f2;
}

.itembox-wear {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.7;
mask-size: 100% 100%;
background-color: white;
}
.itembox-wear-v1 .itembox-wear {
mask-image: url('/images/8/8f/Card_PaperWear_1.png');
}
.itembox-wear-v2 .itembox-wear {
mask-image: url('/images/1/11/Card_PaperWear_2.png');
}
.itembox-wear-v3 .itembox-wear {
mask-image: url('/images/8/89/Card_PaperWear_3.png');
}
.itembox-wear-v4 .itembox-wear {
mask-image: url('/images/5/52/Card_PaperWear_4.png');
}

.itembox-tier-1.itembox-vitality .itembox-wear {
opacity: 1;
background-color: #f4e2cd;
}
.itembox-tier-1.itembox-spirit .itembox-wear {
opacity: 1;
background-color: rgb(247, 232, 213);
}
.itembox-tier-2 .itembox-wear {
background-color: rgb(230, 209, 191);
}
.itembox-tier-3 .itembox-wear {
background-color: rgb(206, 173, 155);
}
.itembox-tier-4 .itembox-wear,
.itembox-tier-5 .itembox-wear {
background-color: rgb(105, 97, 92);
}

.itembox-texture {
position: absolute;
width: 100%;
height: 100%;
background-size: 100% 100%;
mix-blend-mode: multiply;
}
.itembox-texture-v1 .itembox-texture {
background-image: url('/images/9/97/Shopitem_papertexture01.png');
}
.itembox-texture-v2 .itembox-texture {
background-image: url('/images/b/bf/Shopitem_papertexture02.png');
}
.itembox-texture-v3 .itembox-texture {
background-image: url('/images/9/95/Shopitem_papertexture03.png');
}

.itembox-bevel {
position: absolute;
width: 100%;
height: 100%;
border-left: 0.1em solid #ffcc6622;
border-top: 0.1em solid #ffcc6622;
background-size: 100% 100%;
mix-blend-mode: screen;
}

.itembox-active-tag {
position: absolute;
bottom: 3.5em;
display: flex;
flex-direction: column;
justify-content: center;
align-self: center;
width: fit-content;
height: fit-content;
font-size: 1.1em;
font-weight: bold;
font-family: var(--itembox-font);
line-height: normal;
letter-spacing: 0;
white-space: nowrap;
text-align: center;
text-transform: uppercase;
border-radius: 0.2em;
padding: 0.1em 0.6em;
box-shadow: 0 0 3em #000000ff;
color: #ffefd7b3;
background-color: #171717;
visibility: hidden;
}
.itembox-active .itembox-active-tag {
visibility: visible;
}

.itembox .item-link-wrapper,
.itembox .item-link-wrapper > a {
position: absolute;
display: block;
inset: 0;
}

Template:ItemBox/styles.css

2026-07-23T23:24:43Z

~2026-HexCooldownBooster745: undo the undo, back to the good one

Template:ItemBox/styles.css

2026-07-23T23:23:39Z

~2026-HexCooldownBooster745: undo last, benchmarking

/* The whole card scales off one knob: font-size on .itembox (1em = 10px base) */
.itembox,
.itembox * {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
.itembox {
--itembox-ink: #10130D;
--itembox-weapon: #EC981a;
--itembox-vitality: #7CBB1E;
--itembox-spirit: #CE91FF;
--itembox-imbue-fg: #E8C9FF;
--itembox-imbue-bg: #623585;
--itembox-font: 'Retail Demo', sans-serif;
position: relative;
display: inline-block;
font-size: 10px;
width: 8em;
height: 12.5em;
border-radius: 0.6em;
box-shadow: 0.2em 0.2em 1.2em #00000097;
overflow: hidden;
transition-duration: 0.1s;
transition-property: opacity, transform, filter;
}
.itembox-background {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
pointer-events: none;
}
.itembox-card {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
background-size: cover;
}

.itembox-tier-1.itembox-weapon .itembox-card {
background-image: url('/images/3/3e/Weapon_Card_T1.png');
}
.itembox-tier-2.itembox-weapon .itembox-card {
background-image: url('/images/9/96/Weapon_Card_T2.png');
}
.itembox-tier-3.itembox-weapon .itembox-card {
background-image: url('/images/5/5d/Weapon_Card_T3.png');
}
.itembox-tier-4.itembox-weapon .itembox-card {
background-image: url('/images/a/a6/Weapon_Card_T4.png');
}
.itembox-tier-5.itembox-weapon .itembox-card {
background-image: url('/images/a/a6/Weapon_Card_T4.png');
}
.itembox-tier-1.itembox-vitality .itembox-card {
background-image: url('/images/7/75/Armor_Card_T1.png');
}
.itembox-tier-2.itembox-vitality .itembox-card {
background-image: url('/images/0/05/Armor_Card_T2.png');
}
.itembox-tier-3.itembox-vitality .itembox-card {
background-image: url('/images/7/7c/Armor_Card_T3.png');
}
.itembox-tier-4.itembox-vitality .itembox-card {
background-image: url('/images/1/18/Armor_Card_T4.png');
}
.itembox-tier-5.itembox-vitality .itembox-card {
background-image: url('/images/1/18/Armor_Card_T4.png');
}
.itembox-tier-1.itembox-spirit .itembox-card {
background-image: url('/images/a/af/Tech_Card_T1.png');
}
.itembox-tier-2.itembox-spirit .itembox-card {
background-image: url('/images/a/ac/Tech_Card_T2.png');
}
.itembox-tier-3.itembox-spirit .itembox-card {
background-image: url('/images/6/67/Tech_Card_T3.png');
}
.itembox-tier-4.itembox-spirit .itembox-card {
background-image: url('/images/f/f5/Tech_Card_T4.png');
}
.itembox-tier-5.itembox-spirit .itembox-card {
background-image: url('/images/f/f5/Tech_Card_T4.png');
}

.itembox-icon-area {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
aspect-ratio: 1 / 1;
}
.itembox-icon {
width: 100%;
height: 100%;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
mask-size: cover;
mask-repeat: no-repeat;
mask-mode: luminance;
}
.itembox-icon > span,
.itembox-icon > span > span,
.itembox-icon picture {
display: block;
width: 100%;
height: 100%;
}
.itembox-icon img {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: cover;
}

.itembox-icon-v1 .itembox-icon {
mask-image: url('/images/1/10/Icon_mask01.png');
}
.itembox-icon-v2 .itembox-icon {
mask-image: url('/images/6/6f/Icon_mask02.png');
}
.itembox-icon-v3 .itembox-icon {
mask-image: url('/images/9/96/Icon_mask03.png');
}

.itembox-tier-badge {
position: absolute;
top: 0;
right: 0;
width: 2.8em;
height: 2.8em;
transform: scale(1.4);
transform-origin: top right;
visibility: hidden;
}
.itembox-show-tier .itembox-tier-badge {
visibility: visible;
}
.itembox-tier-badge-fill {
width: 100%;
height: 100%;
mask-size: 2.2em;
mask-repeat: no-repeat;
mask-position: right 0;
mask-image: url('/images/6/61/Tier_corner_cap.svg');
}
.itembox-tier-badge-shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: 2.2em;
background-repeat: no-repeat;
background-position: right 0;
background-image: url('/images/6/61/Tier_corner_cap.svg');
filter: drop-shadow(-0.4em 0 0.6em #000000ff);
}

.itembox-weapon .itembox-tier-badge-fill {
background-color: var(--itembox-weapon);
}
.itembox-vitality .itembox-tier-badge-fill {
background-color: var(--itembox-vitality);
}
.itembox-spirit .itembox-tier-badge-fill {
background-color: var(--itembox-spirit);
}

.itembox-tier-badge-number {
position: absolute;
right: 0;
top: 0.3em;
height: 0.8em;
mask-size: 100% 100%;
background-color: var(--itembox-ink);
}
.itembox-tier-1 .itembox-tier-badge-number {
width: 0.5em;
right: 0.4em;
mask-image: url('/images/2/24/Tier_numbers_small_01.svg');
}
.itembox-tier-2 .itembox-tier-badge-number {
width: 0.7em;
right: 0.3em;
mask-image: url('/images/7/74/Tier_numbers_small_02.svg');
}
.itembox-tier-3 .itembox-tier-badge-number {
width: 0.9em;
right: 0.2em;
mask-image: url('/images/5/54/Tier_numbers_small_03.svg');
}
.itembox-tier-4 .itembox-tier-badge-number {
width: 1.1em;
mask-image: url('/images/c/c6/Tier_numbers_small_04.svg');
}
.itembox-tier-5 .itembox-tier-badge-number {
width: 1.1em;
right: 0.1em;
mask-image: url('/images/8/81/Tier_numbers_small_05.svg');
}

.itembox-imbue-tag {
position: absolute;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: fit-content;
font-size: 1.2em;
font-weight: bold;
font-family: var(--itembox-font);
line-height: normal;
letter-spacing: 0.1em;
white-space: nowrap;
text-align: center;
text-transform: uppercase;
border-radius: 0.2em;
padding: 0 0.3em;
color: var(--itembox-imbue-fg);
background-color: var(--itembox-imbue-bg);
visibility: hidden;
}
.itembox-imbue .itembox-imbue-tag {
visibility: visible;
}
.itembox-active.itembox-imbue .itembox-imbue-tag {
justify-content: start;
height: 2.2em;
}

.itembox-name-area {
width: 100%;
height: 4.5em;
padding: 0.5em 0.4em;
}
.itembox-name {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
line-height: 1.2;
text-align: center;
font-size: 1.5em;
font-weight: bold;
font-family: var(--itembox-font);
color: var(--itembox-ink);
overflow-wrap: normal;
word-break: normal;
}

.itembox-tier-4.itembox-weapon .itembox-name,
.itembox-tier-5.itembox-weapon .itembox-name {
color: #e4c5a1;
}
.itembox-tier-4.itembox-vitality .itembox-name,
.itembox-tier-5.itembox-vitality .itembox-name {
color: #c2e7cd;
}
.itembox-tier-4.itembox-spirit .itembox-name,
.itembox-tier-5.itembox-spirit .itembox-name {
color: #e3d4f2;
}

.itembox-wear {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.7;
mask-size: 100% 100%;
background-color: white;
}
.itembox-wear-v1 .itembox-wear {
mask-image: url('/images/8/8f/Card_PaperWear_1.png');
}
.itembox-wear-v2 .itembox-wear {
mask-image: url('/images/1/11/Card_PaperWear_2.png');
}
.itembox-wear-v3 .itembox-wear {
mask-image: url('/images/8/89/Card_PaperWear_3.png');
}
.itembox-wear-v4 .itembox-wear {
mask-image: url('/images/5/52/Card_PaperWear_4.png');
}

.itembox-tier-1.itembox-vitality .itembox-wear {
opacity: 1;
background-color: #f4e2cd;
}
.itembox-tier-1.itembox-spirit .itembox-wear {
opacity: 1;
background-color: rgb(247, 232, 213);
}
.itembox-tier-2 .itembox-wear {
background-color: rgb(230, 209, 191);
}
.itembox-tier-3 .itembox-wear {
background-color: rgb(206, 173, 155);
}
.itembox-tier-4 .itembox-wear,
.itembox-tier-5 .itembox-wear {
background-color: rgb(105, 97, 92);
}

.itembox-texture {
position: absolute;
width: 100%;
height: 100%;
background-size: 100% 100%;
mix-blend-mode: multiply;
}
.itembox-texture-v1 .itembox-texture {
background-image: url('/images/9/97/Shopitem_papertexture01.png');
}
.itembox-texture-v2 .itembox-texture {
background-image: url('/images/b/bf/Shopitem_papertexture02.png');
}
.itembox-texture-v3 .itembox-texture {
background-image: url('/images/9/95/Shopitem_papertexture03.png');
}

.itembox-bevel {
position: absolute;
width: 100%;
height: 100%;
border-left: 0.1em solid #ffcc6622;
border-top: 0.1em solid #ffcc6622;
background-size: 100% 100%;
mix-blend-mode: screen;
}

.itembox-active-tag {
position: absolute;
bottom: 3.5em;
display: flex;
flex-direction: column;
justify-content: center;
align-self: center;
width: fit-content;
height: fit-content;
font-size: 1.1em;
font-weight: bold;
font-family: var(--itembox-font);
line-height: normal;
letter-spacing: 0;
white-space: nowrap;
text-align: center;
text-transform: uppercase;
border-radius: 0.2em;
padding: 0.1em 0.6em;
box-shadow: 0 0 3em #000000ff;
color: #ffefd7b3;
background-color: #171717;
visibility: hidden;
}
.itembox-active .itembox-active-tag {
visibility: visible;
}

.itembox .item-link-wrapper,
.itembox .item-link-wrapper > a {
position: absolute;
display: block;
inset: 0;
}

User:Vergir

2026-07-23T20:51:00Z

~2026-HexCooldownBooster745:

= Holliday =
{{HeroStreetBrawlItems|Holliday|id=sb-items-holliday}}

= Vindicta (has counter items) =
{{HeroStreetBrawlItems|Vindicta|id=sb-items-vindicta}}

Items

2026-07-23T20:42:40Z

~2026-HexCooldownBooster745: restore Active Items table

{{Quotation|[[The Archmother]]'s herald|Only you know what will aid you the most.
}}

'''Items''' are in-game equipment that provide [[Heroes]] with bonus attributes and special abilities.
[[File:Weapon shop.png|thumb|229x229px|Weapon shop (as of May 2025)]]
== Overview ==
There are currently '''{{Items count}}''' items available for purchase from any [[The Curiosity Shop|Curiosity Shop]] on the [[Map|game map]], as well as '''{{Items count|Street Brawl}}''' Legendary items available only in the [[Street Brawl]] mode. Every item also has an "Enhanced" variant in Street Brawl (Enhanced stats can be found in each item's page).

Heroes start with nine item slots in their inventory which can hold an item of any type. Additionally, there are three [[Extra Slots]] that can be unlocked after completing certain map objectives.

Items are split into four tiers based on their price. All items within a tier have the same price. If an item has a [[Components|component]], the player gets a discount equal to the price of the component if they had purchased it first. If an item is a component to multiple items, the player only receives a discount on the first upgraded item.

Purchased items can be sold back to the shop, allowing the player to recoup half of the cost. The player can get the full value if they refund the item before closing the shop window.

==List of Items==
{{Item Navbox}}

==Item Types==
There are three types of items:

* '''[[File:Weapon Icon.png|25px|link=]] Weapon''': Focus on improving base weapons, damage, and bullet effects.
* '''[[File:Vitality Icon.png|25px|link=]] Vitality''': Focus on improving survivability, defense, and movement.
* '''[[File:Spirit icon.png|25px|link=]] Spirit''': Focus on improving abilities and spirit power.
Spending Souls on items of each type provides corresponding stats bonuses. The strength of the bonus is dependent on the total cost of the items of each type owned by the player, up to {{Souls|28,800}} Souls.

At {{Souls|4,800}}, the player gains a significant investment bonus.

{| class="wikitable"
|+ Item Type Bonuses by Souls
! rowspan="2" scope="col" | Souls
! scope="col" | [[File:Weapon Icon.png|20px]] Weapon
! scope="col" | [[File:Vitality Icon.png|20px]] Vitality
! scope="col" | [[File:Spirit icon.png|20px]] Spirit
|-
!{{Plink|Weapon Damage|pic=Damage}}
!{{Plink|Health|pic=Health}}
!{{Plink|Spirit Power|pic=Spirit damage}}
|-
| {{Souls|800}} || +9% || +9% || +7
|-
| {{Souls|1,600}} || +12% || +12% || +11
|-
| {{Souls|2,400}} || +15% || +15% || +15
|-
| {{Souls|3,200}} || +18% || +20% || +19
|-
| {{Souls|4,800}} [[File:Star.png|15px]] || '''+46%''' || '''+38%''' || '''+38'''
|-
| {{Souls|6,400}}|| +54% || +42% || +45
|-
| {{Souls|8,000}} || +62% || +46% || +52
|-
| {{Souls|11,200}} || +74% || +50% || +59
|-
| {{Souls|16,000}} || +86% || +54% || +66
|-
| {{Souls|22,400}} || +100% || +64% || +75
|-
| {{Souls|28,800}} || +115% || +70% || +100
|}

==Active Items==
'''Active items''' provide additional, temporary effects when activated by a key press. Upon being purchased, they must be bound to one of four individual keys for activation. As a result, a player cannot hold more than four active items at a time.

A player can change the assigned slot for an active item by holding "Tab" or "Alt" and then clicking and dragging the item between slots.
{{Active Items}}

== Cosmetic Items ==
'''Cosmetic items''' are a unique type of active item that are only available during [[Seasonal events]] and specific periods. These items are globally unlocked for all players, don't take an item slot or provide bonus stats, and use a unique active item slot ("E" key).

These items can be tested outside their events by using the "giveitem" [[Console commands|Console command]] in the [[Hideout]], Sandbox, or cheat-enabled custom games.
* {{ItemIcon|Snowball}} ''(cosmetic_item_snowball)''
* Hero Vote Posters ''(cosmetic_item_voting_poster)''

== Gallery ==
<gallery>
File:Weapon shop.png|Weapon shop as of 2025-05-08
File:Vitality shop.png|Vitality shop as of 2025-05-08
File:Spirit shop.png|Spirit shop as of 2025-05-08
File:Weapon shop leak.png|Leaked pre-release Weapon shop
File:Vitality shop leak.png|Leaked pre-release Vitality shop
File:Spirit shop leak.png|Leaked pre-release Spirit shop
File:Old shop.png|Old item shop UI before the [[Update:May 8, 2025|Shop Rework]]
File:Vitality Shop UI.png|Old Vitality shop
File:Neon Prime Mods.jpg|[[Neon Prime]] shop
</gallery>

== Trivia ==
* Some Heroes refer to the Items as '''Relics'''.<ref name="relics">
* {{VoiceLineCite|name=Ivy|file=Tengu t3 shop reminder 02.mp3|transcription=A tier 3 relic might change the tide!}}
* {{VoiceLineCite|name=Vyper|file=Viper t1 shop reminder 01.mp3|transcription=I should buy a relic.}}
* {{VoiceLineCite|name=Mo & Krill|file=Krill t3 shop reminder 01.mp3|transcription=I can afford a powerful relic!}}
* {{VoiceLineCite|name=Seven|file=Gigawatt t2 shop reminder 01.mp3|transcription=I need to buy a relic.}}
* {{VoiceLineCite|name=Holliday|file=Astro t2 shop reminder 01.mp3|transcription=Might wanna buy a relic.}}
</ref>

== References ==
<references />

[[Category:Items| ]]