<?xml version="1.0"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
	<id>https://deadlock.wiki/api.php?action=feedcontributions&amp;feedformat=atom&amp;user=~2026-ReachMidbossStamina753</id>
	<title>The Deadlock Wiki - User contributions [en]</title>
	<link rel="self" type="application/atom+xml" href="https://deadlock.wiki/api.php?action=feedcontributions&amp;feedformat=atom&amp;user=~2026-ReachMidbossStamina753"/>
	<link rel="alternate" type="text/html" href="https://deadlock.wiki/Special:Contributions/~2026-ReachMidbossStamina753"/>
	<updated>2026-09-11T04:42:27Z</updated>
	<subtitle>User contributions</subtitle>
	<generator>MediaWiki 1.46.0</generator>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox/doc?diff=100021</id>
		<title>Template:ItemBox/doc</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox/doc?diff=100021"/>
		<updated>2026-07-25T00:08:57Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Document the lowGraphics parameter, now a real production setting for the card navboxes (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;{{TS}}&lt;br /&gt;
== Usage ==&lt;br /&gt;
&lt;br /&gt;
{{tl|ItemBox}} renders a Deadlock shop item as a card: icon, tier art, and the item name auto-sized to fit. Pass an item name and everything else — tier, slot, tags, image — is pulled from [[Module:ItemData]].&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
{{ItemBox|Extended Magazine}}&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
{{ItemBox|Extended Magazine}}&lt;br /&gt;
&lt;br /&gt;
== Parameters ==&lt;br /&gt;
&lt;br /&gt;
&amp;lt;templatedata&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
	&amp;quot;description&amp;quot;: &amp;quot;&amp;quot;,&lt;br /&gt;
	&amp;quot;params&amp;quot;: {&lt;br /&gt;
		&amp;quot;itemName&amp;quot;: {&lt;br /&gt;
			&amp;quot;description&amp;quot;: &amp;quot;Item name; keys into Module:ItemData. Positional.&amp;quot;,&lt;br /&gt;
			&amp;quot;type&amp;quot;: &amp;quot;string&amp;quot;,&lt;br /&gt;
			&amp;quot;required&amp;quot;: true,&lt;br /&gt;
			&amp;quot;aliases&amp;quot;: [&amp;quot;1&amp;quot;],&lt;br /&gt;
			&amp;quot;example&amp;quot;: &amp;quot;Extended Magazine&amp;quot;&lt;br /&gt;
		},&lt;br /&gt;
		&amp;quot;size&amp;quot;: {&lt;br /&gt;
			&amp;quot;description&amp;quot;: &amp;quot;Scales the whole card. 1 = default (80px wide), 1.5 = 150%, 0.75 = 75%.&amp;quot;,&lt;br /&gt;
			&amp;quot;type&amp;quot;: &amp;quot;number&amp;quot;,&lt;br /&gt;
			&amp;quot;default&amp;quot;: &amp;quot;1&amp;quot;,&lt;br /&gt;
			&amp;quot;example&amp;quot;: &amp;quot;1.5&amp;quot;&lt;br /&gt;
		},&lt;br /&gt;
		&amp;quot;showTierTag&amp;quot;: {&lt;br /&gt;
			&amp;quot;description&amp;quot;: &amp;quot;Set to true to show the tier corner badge.&amp;quot;,&lt;br /&gt;
			&amp;quot;type&amp;quot;: &amp;quot;boolean&amp;quot;,&lt;br /&gt;
			&amp;quot;suggestedvalues&amp;quot;: [&amp;quot;true&amp;quot;, &amp;quot;false&amp;quot;]&lt;br /&gt;
		},&lt;br /&gt;
		&amp;quot;lowGraphics&amp;quot;: {&lt;br /&gt;
			&amp;quot;description&amp;quot;: &amp;quot;Set to true for pages that place many cards at once (the card navboxes). Swaps the paper texture to a cacheable overlay so scrolling stays smooth; the look is nearly identical.&amp;quot;,&lt;br /&gt;
			&amp;quot;type&amp;quot;: &amp;quot;boolean&amp;quot;,&lt;br /&gt;
			&amp;quot;suggestedvalues&amp;quot;: [&amp;quot;true&amp;quot;, &amp;quot;false&amp;quot;]&lt;br /&gt;
		},&lt;br /&gt;
		&amp;quot;overrideDisplayName&amp;quot;: {&lt;br /&gt;
			&amp;quot;description&amp;quot;: &amp;quot;Replaces the name shown on the card.&amp;quot;,&lt;br /&gt;
			&amp;quot;type&amp;quot;: &amp;quot;string&amp;quot;,&lt;br /&gt;
			&amp;quot;example&amp;quot;: &amp;quot;Test Name&amp;quot;&lt;br /&gt;
		},&lt;br /&gt;
		&amp;quot;overrideTier&amp;quot;: {&lt;br /&gt;
			&amp;quot;description&amp;quot;: &amp;quot;Replaces the card&#039;s tier.&amp;quot;,&lt;br /&gt;
			&amp;quot;type&amp;quot;: &amp;quot;number&amp;quot;,&lt;br /&gt;
			&amp;quot;suggestedvalues&amp;quot;: [&amp;quot;1&amp;quot;, &amp;quot;2&amp;quot;, &amp;quot;3&amp;quot;, &amp;quot;4&amp;quot;, &amp;quot;5&amp;quot;]&lt;br /&gt;
		},&lt;br /&gt;
		&amp;quot;overrideSlot&amp;quot;: {&lt;br /&gt;
			&amp;quot;description&amp;quot;: &amp;quot;Replaces the card&#039;s background (type).&amp;quot;,&lt;br /&gt;
			&amp;quot;type&amp;quot;: &amp;quot;string&amp;quot;,&lt;br /&gt;
			&amp;quot;suggestedvalues&amp;quot;: [&amp;quot;Weapon&amp;quot;, &amp;quot;Vitality&amp;quot;, &amp;quot;Spirit&amp;quot;]&lt;br /&gt;
		},&lt;br /&gt;
		&amp;quot;overrideIsActive&amp;quot;: {&lt;br /&gt;
			&amp;quot;description&amp;quot;: &amp;quot;Forces the ACTIVE tag on or off.&amp;quot;,&lt;br /&gt;
			&amp;quot;type&amp;quot;: &amp;quot;boolean&amp;quot;,&lt;br /&gt;
			&amp;quot;suggestedvalues&amp;quot;: [&amp;quot;true&amp;quot;, &amp;quot;false&amp;quot;]&lt;br /&gt;
		},&lt;br /&gt;
		&amp;quot;overrideIsImbue&amp;quot;: {&lt;br /&gt;
			&amp;quot;description&amp;quot;: &amp;quot;Forces the IMBUE tag on or off.&amp;quot;,&lt;br /&gt;
			&amp;quot;type&amp;quot;: &amp;quot;boolean&amp;quot;,&lt;br /&gt;
			&amp;quot;suggestedvalues&amp;quot;: [&amp;quot;true&amp;quot;, &amp;quot;false&amp;quot;]&lt;br /&gt;
		},&lt;br /&gt;
		&amp;quot;overrideLinkTooltip&amp;quot;: {&lt;br /&gt;
			&amp;quot;description&amp;quot;: &amp;quot;Page the hover tooltip reads its info from.&amp;quot;,&lt;br /&gt;
			&amp;quot;type&amp;quot;: &amp;quot;string&amp;quot;,&lt;br /&gt;
			&amp;quot;example&amp;quot;: &amp;quot;Extended Magazine&amp;quot;&lt;br /&gt;
		},&lt;br /&gt;
		&amp;quot;overrideLinkImage&amp;quot;: {&lt;br /&gt;
			&amp;quot;description&amp;quot;: &amp;quot;Page/file the icon image comes from.&amp;quot;,&lt;br /&gt;
			&amp;quot;type&amp;quot;: &amp;quot;string&amp;quot;,&lt;br /&gt;
			&amp;quot;example&amp;quot;: &amp;quot;Extended Magazine&amp;quot;&lt;br /&gt;
		},&lt;br /&gt;
		&amp;quot;overrideLinkClick&amp;quot;: {&lt;br /&gt;
			&amp;quot;description&amp;quot;: &amp;quot;Page the card links to when clicked.&amp;quot;,&lt;br /&gt;
			&amp;quot;type&amp;quot;: &amp;quot;string&amp;quot;,&lt;br /&gt;
			&amp;quot;example&amp;quot;: &amp;quot;Bullet Lifesteal (item)&amp;quot;&lt;br /&gt;
		}&lt;br /&gt;
	},&lt;br /&gt;
	&amp;quot;paramOrder&amp;quot;: [&lt;br /&gt;
		&amp;quot;itemName&amp;quot;, &amp;quot;size&amp;quot;, &amp;quot;showTierTag&amp;quot;, &amp;quot;lowGraphics&amp;quot;,&lt;br /&gt;
		&amp;quot;overrideDisplayName&amp;quot;, &amp;quot;overrideTier&amp;quot;, &amp;quot;overrideSlot&amp;quot;,&lt;br /&gt;
		&amp;quot;overrideIsActive&amp;quot;, &amp;quot;overrideIsImbue&amp;quot;,&lt;br /&gt;
		&amp;quot;overrideLinkTooltip&amp;quot;, &amp;quot;overrideLinkImage&amp;quot;, &amp;quot;overrideLinkClick&amp;quot;&lt;br /&gt;
	],&lt;br /&gt;
	&amp;quot;format&amp;quot;: &amp;quot;inline&amp;quot;&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/templatedata&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Examples ==&lt;br /&gt;
&lt;br /&gt;
=== Basic ===&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
{{ItemBox|Close Quarters}}&lt;br /&gt;
{{ItemBox|Spirit Shredder Bullets}}&lt;br /&gt;
{{ItemBox|Silencer}}&lt;br /&gt;
{{ItemBox|Extra Health}}&lt;br /&gt;
{{ItemBox|Echo Shard}}&lt;br /&gt;
{{ItemBox|Celestial Blessing}}&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
{{ItemBox|Close Quarters}}&lt;br /&gt;
{{ItemBox|Spirit Shredder Bullets}}&lt;br /&gt;
{{ItemBox|Silencer}}&lt;br /&gt;
{{ItemBox|Extra Health}}&lt;br /&gt;
{{ItemBox|Echo Shard}}&lt;br /&gt;
{{ItemBox|Celestial Blessing}}&lt;br /&gt;
&lt;br /&gt;
=== Tier tag ===&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
{{ItemBox|Extended Magazine|showTierTag = true}}&lt;br /&gt;
{{ItemBox|Berserker|showTierTag = true}}&lt;br /&gt;
{{ItemBox|Echo Shard|showTierTag = true}}&lt;br /&gt;
{{ItemBox|Celestial Blessing|showTierTag = true}}&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
{{ItemBox|Extended Magazine|showTierTag = true}}&lt;br /&gt;
{{ItemBox|Berserker|showTierTag = true}}&lt;br /&gt;
{{ItemBox|Echo Shard|showTierTag = true}}&lt;br /&gt;
{{ItemBox|Celestial Blessing|showTierTag = true}}&lt;br /&gt;
&lt;br /&gt;
=== Size ===&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
{{ItemBox|Extended Magazine|size = 0.75}}&lt;br /&gt;
{{ItemBox|Extended Magazine}}&lt;br /&gt;
{{ItemBox|Extended Magazine|size = 1.5}}&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
{{ItemBox|Extended Magazine|size = 0.75}}&lt;br /&gt;
{{ItemBox|Extended Magazine}}&lt;br /&gt;
{{ItemBox|Extended Magazine|size = 1.5}}&lt;br /&gt;
&lt;br /&gt;
=== Overrides ===&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
{{ItemBox|High-Velocity Rounds|overrideDisplayName = Test Name}}&lt;br /&gt;
{{ItemBox|Intensifying Magazine|overrideTier = 4}}&lt;br /&gt;
{{ItemBox|Weakening Headshot|overrideSlot = Spirit}}&lt;br /&gt;
{{ItemBox|Recharging Rush|overrideIsActive = true}}&lt;br /&gt;
{{ItemBox|Alchemical Fire|overrideIsImbue = true}}&lt;br /&gt;
{{ItemBox|Bullet Lifesteal|overrideLinkClick = Heroes}}&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
{{ItemBox|High-Velocity Rounds|overrideDisplayName = Test Name}}&lt;br /&gt;
{{ItemBox|Intensifying Magazine|overrideTier = 4}}&lt;br /&gt;
{{ItemBox|Weakening Headshot|overrideSlot = Spirit}}&lt;br /&gt;
{{ItemBox|Recharging Rush|overrideIsActive = true}}&lt;br /&gt;
{{ItemBox|Alchemical Fire|overrideIsImbue = true}}&lt;br /&gt;
{{ItemBox|Bullet Lifesteal|overrideLinkClick = Heroes}}&lt;br /&gt;
&lt;br /&gt;
== References ==&lt;br /&gt;
&lt;br /&gt;
* Item data — [[Data:ItemData.json]], read by [[Module:ItemData]]&lt;br /&gt;
* Name sizing and texture variety — [[Module:ItemBox]]&lt;br /&gt;
* Card styling — [[Template:ItemBox/styles.css]]&lt;br /&gt;
&lt;br /&gt;
&amp;lt;noinclude&amp;gt;[[Category:Template documentation]]&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Module:ItemData/nav?diff=100015</id>
		<title>Module:ItemData/nav</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Module:ItemData/nav?diff=100015"/>
		<updated>2026-07-25T00:03:05Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Update stale LOW_GRAPHICS comment to describe the current cacheable-overlay behavior (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
&lt;br /&gt;
local p = {}&lt;br /&gt;
local items_data = mw.loadJsonData(&amp;quot;Data:ItemData.json&amp;quot;)&lt;br /&gt;
local lang_module = require(&#039;Module:Lang&#039;)&lt;br /&gt;
local generic_module = require(&#039;Module:GenericData&#039;)&lt;br /&gt;
local util_module = require(&#039;Module:Utilities&#039;)&lt;br /&gt;
&lt;br /&gt;
-- Exceptions if the link is different from the item name&lt;br /&gt;
local linkOverrides = {&lt;br /&gt;
    [&amp;quot;Bullet Lifesteal&amp;quot;] = &amp;quot;Bullet Lifesteal (item)&amp;quot;,&lt;br /&gt;
    [&amp;quot;Spirit Lifesteal&amp;quot;] = &amp;quot;Spirit Lifesteal (item)&amp;quot;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
-- The card navboxes put every item on a single page, so their cards opt into&lt;br /&gt;
-- the cheaper ItemBox rendering via lowGraphics. This swaps the paper texture&lt;br /&gt;
-- from the normal-mode multiply (which blends two images and is re-rasterised&lt;br /&gt;
-- every scrolled frame) to a transparent-paper overlay that is a single&lt;br /&gt;
-- cacheable image, the one change that carried the navbox scroll cost. The wear&lt;br /&gt;
-- and icon masks stay at full detail, since a single-image mask caches fine.&lt;br /&gt;
-- See [[Template:ItemBox]]. Only the ItemBox branch of write_wrapped_item_list&lt;br /&gt;
-- uses this; the ItemIcon lists are unaffected.&lt;br /&gt;
local LOW_GRAPHICS = &amp;quot;|lowGraphics=true&amp;quot;&lt;br /&gt;
&lt;br /&gt;
-- Cached items grouped by slot to prevent redundant full-table evaluations&lt;br /&gt;
local cached_slots = nil&lt;br /&gt;
local function get_items_by_slot(slot)&lt;br /&gt;
    if not cached_slots then&lt;br /&gt;
        cached_slots = { table = {}, Weapon = {}, Armor = {}, Tech = {} }&lt;br /&gt;
        for item_key, item_data in pairs(items_data) do&lt;br /&gt;
            local this_slot = item_data[&amp;quot;Slot&amp;quot;]&lt;br /&gt;
            if this_slot and cached_slots[this_slot] then&lt;br /&gt;
                table.insert(cached_slots[this_slot], { key = item_key, data = item_data })&lt;br /&gt;
            end&lt;br /&gt;
        end&lt;br /&gt;
    end&lt;br /&gt;
    return cached_slots[slot] or {}&lt;br /&gt;
end&lt;br /&gt;
&lt;br /&gt;
-- With debug_mode on, it outputs unprocessed wikitext&lt;br /&gt;
local function process_debug_mode(wikitext, debug_mode)&lt;br /&gt;
    if debug_mode == &#039;true&#039; then&lt;br /&gt;
        return wikitext&lt;br /&gt;
    elseif debug_mode == &#039;false&#039; or debug_mode == nil then&lt;br /&gt;
        return mw.getCurrentFrame():preprocess(wikitext)&lt;br /&gt;
    else&lt;br /&gt;
        return &amp;quot;debug_mode must be &#039;true&#039; or &#039;false&#039;&amp;quot;&lt;br /&gt;
    end&lt;br /&gt;
end&lt;br /&gt;
&lt;br /&gt;
-- Writes list of items of a certain slot within the min and max soul bounds&lt;br /&gt;
local function write_wrapped_item_list(slot, min_souls, max_souls, template, sep, filter_mode)&lt;br /&gt;
    if slot ~= &#039;Weapon&#039; and slot ~= &#039;Armor&#039; and slot ~= &#039;Tech&#039; then&lt;br /&gt;
        return &#039;slot must be Weapon, Armor (Vitality), or Tech (Spirit)&#039;&lt;br /&gt;
    end&lt;br /&gt;
    &lt;br /&gt;
    local min_souls = tonumber(min_souls)&lt;br /&gt;
    local max_souls = tonumber(max_souls)&lt;br /&gt;
    if min_souls == nil or max_souls == nil then return &#039;Min/Max souls must be numerical&#039; end&lt;br /&gt;
    &lt;br /&gt;
    filter_mode = filter_mode or &amp;quot;all&amp;quot;&lt;br /&gt;
    &lt;br /&gt;
    -- Lifted out of the loop: Language code doesn&#039;t change per item&lt;br /&gt;
    local lang_code = lang_module.get_lang_code() &lt;br /&gt;
    &lt;br /&gt;
    local items = {}&lt;br /&gt;
    local slot_items = get_items_by_slot(slot) -- Drastically reduces search pool size&lt;br /&gt;
    &lt;br /&gt;
    for _, item_entry in ipairs(slot_items) do&lt;br /&gt;
        local item_key = item_entry.key&lt;br /&gt;
        local item_data = item_entry.data&lt;br /&gt;
        &lt;br /&gt;
        local this_cost = tonumber(item_data[&amp;quot;Cost&amp;quot;])&lt;br /&gt;
        local is_street_brawl = item_data[&amp;quot;StreetBrawl&amp;quot;] == true&lt;br /&gt;
        local should_include = true&lt;br /&gt;
        &lt;br /&gt;
        -- Filter logic for Street Brawl items&lt;br /&gt;
        if filter_mode == &amp;quot;street_brawl_only&amp;quot; and not is_street_brawl then&lt;br /&gt;
            should_include = false&lt;br /&gt;
        elseif filter_mode == &amp;quot;exclude_street_brawl&amp;quot; and is_street_brawl then&lt;br /&gt;
            should_include = false&lt;br /&gt;
        end&lt;br /&gt;
        &lt;br /&gt;
        if should_include and item_data[&amp;quot;Name&amp;quot;] ~= nil and item_data[&amp;quot;IsDisabled&amp;quot;] == false and this_cost ~= nil then&lt;br /&gt;
            if this_cost &amp;gt;= min_souls and this_cost &amp;lt; max_souls then&lt;br /&gt;
                local item_name_english = lang_module.get_string(item_key, &amp;quot;en&amp;quot;)&lt;br /&gt;
                local item_link = linkOverrides[item_name_english] or item_name_english&lt;br /&gt;
                local item_name_local = lang_module.get_string(item_key, lang_code)&lt;br /&gt;
                &lt;br /&gt;
                local item_template&lt;br /&gt;
                if template == &amp;quot;ItemIcon&amp;quot; then&lt;br /&gt;
                    if lang_code == &amp;quot;en&amp;quot; then&lt;br /&gt;
                        item_template = &amp;quot;{{ItemIcon|&amp;quot; .. item_name_english .. &amp;quot;|size=26px}}&amp;quot;&lt;br /&gt;
                    else&lt;br /&gt;
                        item_template = &amp;quot;{{ItemIcon|&amp;quot; .. item_name_english .. &amp;quot;|lang=&amp;quot; .. lang_code .. &amp;quot;|l1=&amp;quot; .. item_name_local .. &amp;quot;|size=26px}}&amp;quot;&lt;br /&gt;
                    end&lt;br /&gt;
                    &lt;br /&gt;
                    local search_data = item_name_english&lt;br /&gt;
                    if lang_code ~= &amp;quot;en&amp;quot; and item_name_local then&lt;br /&gt;
                        search_data = search_data .. &amp;quot; &amp;quot; .. item_name_local&lt;br /&gt;
                    end&lt;br /&gt;
                    &lt;br /&gt;
                    item_template = &#039;&amp;lt;span class=&amp;quot;item-nav-search-wrapper&amp;quot;&amp;gt;&amp;lt;span class=&amp;quot;item-nav-search-item&amp;quot; data-item-name=&amp;quot;&#039; .. search_data .. &#039;&amp;quot;&amp;gt;&#039; .. item_template .. &#039;&amp;lt;/span&amp;gt;&#039;&lt;br /&gt;
                elseif template == &amp;quot;ItemBox&amp;quot; then&lt;br /&gt;
                    if lang_code == &amp;quot;en&amp;quot; then&lt;br /&gt;
                        if is_street_brawl then&lt;br /&gt;
                            item_template = &amp;quot;{{ItemBox|itemName=&amp;quot; .. item_name_english .. &amp;quot;|overrideLinkClick=&amp;quot; .. item_link .. &amp;quot;|overrideTier=5&amp;quot; .. LOW_GRAPHICS .. &amp;quot;}}&amp;quot;&lt;br /&gt;
                        else&lt;br /&gt;
                            item_template = &amp;quot;{{ItemBox|itemName=&amp;quot; .. item_name_english .. &amp;quot;|overrideLinkClick=&amp;quot; .. item_link .. LOW_GRAPHICS .. &amp;quot;}}&amp;quot;&lt;br /&gt;
                        end&lt;br /&gt;
                    else&lt;br /&gt;
                        local link_local = item_link .. &amp;quot;/&amp;quot; .. lang_code&lt;br /&gt;
                        if is_street_brawl then&lt;br /&gt;
                            item_template = &amp;quot;{{ItemBox|itemName=&amp;quot; .. item_name_english .. &amp;quot;|overrideLinkClick=&amp;quot; .. link_local .. &amp;quot;|item_price={{#invoke:Lang|get_string|Citadel_ItemDraft_Legendary}}&amp;quot; .. LOW_GRAPHICS .. &amp;quot;}}&amp;quot;&lt;br /&gt;
                        else&lt;br /&gt;
                            item_template = &amp;quot;{{ItemBox|itemName=&amp;quot; .. item_name_english .. &amp;quot;|overrideLinkClick=&amp;quot; .. link_local .. LOW_GRAPHICS .. &amp;quot;}}&amp;quot;&lt;br /&gt;
                        end&lt;br /&gt;
                    end&lt;br /&gt;
                else&lt;br /&gt;
                    return &amp;quot;Invalid template type&amp;quot;&lt;br /&gt;
                end&lt;br /&gt;
                table.insert(items, item_template)&lt;br /&gt;
            end&lt;br /&gt;
        end&lt;br /&gt;
    end&lt;br /&gt;
    &lt;br /&gt;
    -- Order list alphabetically&lt;br /&gt;
    table.sort(items)&lt;br /&gt;
    &lt;br /&gt;
    -- Append closing tags and bullets&lt;br /&gt;
    if template == &amp;quot;ItemIcon&amp;quot; then&lt;br /&gt;
        local total_items = #items&lt;br /&gt;
        for i = 1, total_items do&lt;br /&gt;
            if i == total_items then&lt;br /&gt;
                items[i] = items[i] .. &#039;&amp;lt;/span&amp;gt;&#039;&lt;br /&gt;
            else&lt;br /&gt;
                items[i] = items[i] .. &#039;&amp;lt;span class=&amp;quot;item-nav-search-sep&amp;quot;&amp;gt; &amp;amp;bull; &amp;lt;/span&amp;gt;&amp;lt;/span&amp;gt;&#039;&lt;br /&gt;
            end&lt;br /&gt;
        end&lt;br /&gt;
    end&lt;br /&gt;
    &lt;br /&gt;
    return table.concat(items, sep)&lt;br /&gt;
end&lt;br /&gt;
&lt;br /&gt;
-- for [[Template:Item Navbox]]&lt;br /&gt;
function p.get_item_nav_bulletpoints(slot, min_souls, max_souls, debug_mode, filter_mode)&lt;br /&gt;
    if type(slot) == &amp;quot;table&amp;quot; and slot.args then&lt;br /&gt;
        local frame = slot&lt;br /&gt;
        slot = frame.args[1]&lt;br /&gt;
        min_souls = frame.args[2]&lt;br /&gt;
        max_souls = frame.args[3]&lt;br /&gt;
        debug_mode = frame.args[&amp;quot;debug_mode&amp;quot;]&lt;br /&gt;
        filter_mode = frame.args[&amp;quot;filter&amp;quot;]&lt;br /&gt;
    end&lt;br /&gt;
    &lt;br /&gt;
    local item_list = write_wrapped_item_list(slot, min_souls, max_souls, &amp;quot;ItemIcon&amp;quot;, &#039;&#039;, filter_mode)&lt;br /&gt;
    return process_debug_mode(item_list, debug_mode)&lt;br /&gt;
end&lt;br /&gt;
&lt;br /&gt;
-- for [[Template:Infobox ShopItems]]&lt;br /&gt;
function p.get_item_nav_cards(slot, min_souls, max_souls, debug_mode, filter_mode)&lt;br /&gt;
    if type(slot) == &amp;quot;table&amp;quot; and slot.args then&lt;br /&gt;
        local frame = slot&lt;br /&gt;
        slot = frame.args[1]&lt;br /&gt;
        min_souls = frame.args[2]&lt;br /&gt;
        max_souls = frame.args[3]&lt;br /&gt;
        debug_mode = frame.args[&amp;quot;debug_mode&amp;quot;]&lt;br /&gt;
        filter_mode = frame.args[&amp;quot;filter&amp;quot;]&lt;br /&gt;
    end&lt;br /&gt;
    &lt;br /&gt;
    local item_list = write_wrapped_item_list(slot, min_souls, max_souls, &amp;quot;ItemBox&amp;quot;, &#039; &#039;, filter_mode)&lt;br /&gt;
    return process_debug_mode(item_list, debug_mode)&lt;br /&gt;
end&lt;br /&gt;
&lt;br /&gt;
-- for [[Template:Item Navbox]] subgroup rows&lt;br /&gt;
function p.write_item_slot_subgroup(frame)&lt;br /&gt;
    local slot = frame.args[1]&lt;br /&gt;
    local type_func = frame.args[2]&lt;br /&gt;
    local debug_mode = frame.args[&#039;debug_mode&#039;]&lt;br /&gt;
    local street_brawl_label = frame.args[&#039;street_brawl_label&#039;] or &#039;{{Legendary|{{#invoke:Lang|get_string|Citadel_ItemDraft_Legendary}}}}&#039;&lt;br /&gt;
    &lt;br /&gt;
    if slot == nil then return &amp;quot;&#039;slot&#039; parameter is required&amp;quot; end&lt;br /&gt;
    &lt;br /&gt;
    local template_args = {&lt;br /&gt;
        [&amp;quot;groupstyle&amp;quot;] = &amp;quot;background-color:&amp;quot; .. util_module.get_slot_color(slot) .. &amp;quot;;width:10%;min-width:70px;border-radius: 8px 0 0 8px&amp;quot;,&lt;br /&gt;
        [&amp;quot;grouppadding&amp;quot;] = &amp;quot;5px&amp;quot;,&lt;br /&gt;
        [&amp;quot;listpadding&amp;quot;] = &amp;quot;0 0.25rem&amp;quot;,&lt;br /&gt;
    }&lt;br /&gt;
    &lt;br /&gt;
    local soul_style = &amp;quot;font-size: 12px; text-shadow: 1px 1px rgba(0, 0, 0, 0.3);&amp;quot;&lt;br /&gt;
    local prices = generic_module.get_item_price_per_tier()&lt;br /&gt;
    local group_index = 1&lt;br /&gt;
    &lt;br /&gt;
    for i, souls in ipairs(prices) do&lt;br /&gt;
        local min_souls = souls&lt;br /&gt;
        &lt;br /&gt;
        if min_souls ~= 0 then &lt;br /&gt;
            local max_souls = prices[i+1] or (min_souls * 10)&lt;br /&gt;
            &lt;br /&gt;
            local list&lt;br /&gt;
            if type_func == &#039;get_item_nav_cards&#039; then&lt;br /&gt;
                list = p.get_item_nav_cards(slot, min_souls, max_souls, debug_mode, &amp;quot;exclude_street_brawl&amp;quot;)&lt;br /&gt;
            elseif type_func == &#039;get_item_nav_bulletpoints&#039; then&lt;br /&gt;
                list = p.get_item_nav_bulletpoints(slot, min_souls, max_souls, debug_mode, &amp;quot;exclude_street_brawl&amp;quot;)&lt;br /&gt;
            else&lt;br /&gt;
                return &amp;quot;&#039;type&#039; should be get_item_nav_cards or get_item_nav_bulletpoints&amp;quot;&lt;br /&gt;
            end&lt;br /&gt;
            &lt;br /&gt;
            if list and list ~= &amp;quot;&amp;quot; then&lt;br /&gt;
                template_args[&amp;quot;group&amp;quot; .. group_index] = frame:expandTemplate{title=&amp;quot;Souls&amp;quot;, args={[1] = min_souls, [&amp;quot;Shadow&amp;quot;] = soul_style}}&lt;br /&gt;
                template_args[&amp;quot;list&amp;quot; .. group_index] = list&lt;br /&gt;
                group_index = group_index + 1&lt;br /&gt;
            end&lt;br /&gt;
        end&lt;br /&gt;
    end&lt;br /&gt;
    &lt;br /&gt;
    local sb_list&lt;br /&gt;
    if type_func == &#039;get_item_nav_cards&#039; then&lt;br /&gt;
        sb_list = p.get_item_nav_cards(slot, 0, 999999, debug_mode, &amp;quot;street_brawl_only&amp;quot;)&lt;br /&gt;
    elseif type_func == &#039;get_item_nav_bulletpoints&#039; then&lt;br /&gt;
        sb_list = p.get_item_nav_bulletpoints(slot, 0, 999999, debug_mode, &amp;quot;street_brawl_only&amp;quot;)&lt;br /&gt;
    end&lt;br /&gt;
    &lt;br /&gt;
    if sb_list and sb_list ~= &amp;quot;&amp;quot; then&lt;br /&gt;
        local sb_style = &amp;quot;color:#98ffde; font-family:&#039;Retail Demo&#039;, sans-serif; text-wrap: nowrap; text-shadow: 0px 0px 2px #2c312e, 1.3px 1.3px rgba(0, 0, 0, 0.2);padding:5px;&amp;quot;&lt;br /&gt;
        local sb_link_text = &amp;quot;[[Street Brawl{{if_lang}}|&amp;lt;span style=\&amp;quot;&amp;quot; .. sb_style .. &amp;quot;\&amp;quot;&amp;gt;&amp;lt;b&amp;gt;&amp;quot; .. street_brawl_label .. &amp;quot;&amp;lt;/b&amp;gt;&amp;lt;/span&amp;gt;]]&amp;quot;&lt;br /&gt;
        template_args[&amp;quot;group&amp;quot; .. group_index] = frame:preprocess(sb_link_text)&lt;br /&gt;
        template_args[&amp;quot;list&amp;quot; .. group_index] = sb_list&lt;br /&gt;
    end&lt;br /&gt;
    &lt;br /&gt;
    return frame:expandTemplate{title=&amp;quot;Navbox subgroup&amp;quot;, args=template_args}&lt;br /&gt;
end&lt;br /&gt;
&lt;br /&gt;
-- for [[Template:Active Items]]&lt;br /&gt;
&lt;br /&gt;
-- Displayed when a stat does not apply to an item&lt;br /&gt;
local NO_VALUE = &amp;quot;—&amp;quot;&lt;br /&gt;
&lt;br /&gt;
-- One expanded inline attribute as produced by [[Module:Lang]]:&lt;br /&gt;
-- wrapper span &amp;gt; icon span &amp;gt; spacer span &amp;gt; wikilink&lt;br /&gt;
local INLINE_ATTRIBUTE_PATTERN =&lt;br /&gt;
    &#039;&amp;lt;span class=&amp;quot;no%-blue%-link&amp;quot; style=&amp;quot;text%-wrap:nowrap; font%-weight:bold; color:[^;&amp;quot;]*;&amp;quot;&amp;gt;&#039; ..&lt;br /&gt;
    &#039;&amp;lt;span style=&amp;quot;[^&amp;quot;]*&amp;quot;&amp;gt;%[%[File:[^%]]*%]%]&amp;lt;/span&amp;gt;&#039; ..&lt;br /&gt;
    &#039;&amp;lt;span style=&amp;quot;color: inherit;&amp;quot;&amp;gt; &amp;lt;/span&amp;gt; &#039; ..&lt;br /&gt;
    &#039;%[%[([^|%]]+)|([^%]]*)%]%]&amp;lt;/span&amp;gt;&#039;&lt;br /&gt;
&lt;br /&gt;
-- Range is taken from the first of these the item has a usable value for&lt;br /&gt;
local RANGE_PROPERTIES = { &amp;quot;AbilityCastRange&amp;quot;, &amp;quot;Radius&amp;quot;, &amp;quot;EndRadius&amp;quot; }&lt;br /&gt;
&lt;br /&gt;
-- Rewrites the description markup [[Module:Lang]] produces&lt;br /&gt;
local function restyle_description(text)&lt;br /&gt;
    text = text:gsub(INLINE_ATTRIBUTE_PATTERN, &#039;[[%1|%2]]&#039;)&lt;br /&gt;
    -- Attributes with an icon but no link keep their span; follow the site text color&lt;br /&gt;
    text = text:gsub(&#039;color:#ffefd7;&#039;, &#039;color:var(--color-base);&#039;)&lt;br /&gt;
    -- Diminished notes (&amp;quot;Cannot be used while Stunned...&amp;quot;)&lt;br /&gt;
    return (text:gsub(&#039;color:#C0C0C0&#039;, &#039;color:var(--color-subtle)&#039;))&lt;br /&gt;
end&lt;br /&gt;
&lt;br /&gt;
-- Numeric value of a stat, used for sorting&lt;br /&gt;
local function stat_sort_value(value)&lt;br /&gt;
    if type(value) == &amp;quot;table&amp;quot; then value = value[&amp;quot;Value&amp;quot;] end&lt;br /&gt;
    if value == nil then return -1 end&lt;br /&gt;
    return tonumber(tostring(value):match(&amp;quot;[-%d%.]+&amp;quot;)) or -1&lt;br /&gt;
end&lt;br /&gt;
&lt;br /&gt;
-- First range property the item has a usable value for&lt;br /&gt;
local function get_range_property(item_data)&lt;br /&gt;
    for _, property in ipairs(RANGE_PROPERTIES) do&lt;br /&gt;
        local value = item_data[property]&lt;br /&gt;
        if value ~= nil and stat_sort_value(value) &amp;gt; 0 then&lt;br /&gt;
            return property, value&lt;br /&gt;
        end&lt;br /&gt;
    end&lt;br /&gt;
    return nil, nil&lt;br /&gt;
end&lt;br /&gt;
&lt;br /&gt;
-- Builds a stat cell, falling back to an em dash when the stat does not apply&lt;br /&gt;
local function stat_cell(raw_value, item_name, property, postfix)&lt;br /&gt;
    if raw_value == nil or property == nil then&lt;br /&gt;
        return &#039;| data-sort-value=&amp;quot;-1&amp;quot; style=&amp;quot;text-align:center;font-size:16px&amp;quot; | &#039; .. NO_VALUE&lt;br /&gt;
    end&lt;br /&gt;
    return string.format(&lt;br /&gt;
        &#039;| data-sort-value=&amp;quot;%s&amp;quot; style=&amp;quot;text-align:center;font-size:16px&amp;quot; | {{#invoke:ItemData|get_prop|%s|%s}}%s&#039;,&lt;br /&gt;
        stat_sort_value(raw_value), item_name, property, postfix or &amp;quot;&amp;quot;)&lt;br /&gt;
end&lt;br /&gt;
&lt;br /&gt;
function p.generate_active_items_table(frame)&lt;br /&gt;
    local active_items = {}&lt;br /&gt;
    &lt;br /&gt;
    for item_key, item_data in pairs(items_data) do&lt;br /&gt;
        local cost = tonumber(item_data[&amp;quot;Cost&amp;quot;])&lt;br /&gt;
        if item_data[&amp;quot;Name&amp;quot;] and &lt;br /&gt;
           item_data[&amp;quot;IsDisabled&amp;quot;] == false and &lt;br /&gt;
           cost ~= nil and cost &amp;gt; 0 and &lt;br /&gt;
           item_data[&amp;quot;Activation&amp;quot;] and &lt;br /&gt;
           item_data[&amp;quot;Activation&amp;quot;] ~= &amp;quot;Passive&amp;quot; then&lt;br /&gt;
            &lt;br /&gt;
            local range_property, range_value = get_range_property(item_data)&lt;br /&gt;
            &lt;br /&gt;
            table.insert(active_items, {&lt;br /&gt;
                name = item_data[&amp;quot;Name&amp;quot;],&lt;br /&gt;
                key = item_key,&lt;br /&gt;
                cost = cost,&lt;br /&gt;
                slot = item_data[&amp;quot;Slot&amp;quot;] or &amp;quot;Weapon&amp;quot;,&lt;br /&gt;
                has_active_desc = item_data[&amp;quot;ActiveDescription&amp;quot;] ~= nil,&lt;br /&gt;
                cooldown = item_data[&amp;quot;AbilityCooldown&amp;quot;],&lt;br /&gt;
                duration = item_data[&amp;quot;AbilityDuration&amp;quot;],&lt;br /&gt;
                range_property = range_property,&lt;br /&gt;
                range_value = range_value&lt;br /&gt;
            })&lt;br /&gt;
        end&lt;br /&gt;
    end&lt;br /&gt;
    &lt;br /&gt;
    table.sort(active_items, function(a, b) return a.name &amp;lt; b.name end)&lt;br /&gt;
    &lt;br /&gt;
    -- Optimized string compilation using a structural buffer table&lt;br /&gt;
    local rows = {}&lt;br /&gt;
    table.insert(rows, [=[{| class=&amp;quot;wikitable mw-collapsible sortable&amp;quot; style=&amp;quot;width:100%&amp;quot; &lt;br /&gt;
|+{{#invoke:Dictionary|translate|Active Items}}&lt;br /&gt;
! colspan=&amp;quot;2&amp;quot; | {{#invoke:Lang|get_string|Citadel_HeroBuilds_CategoryNameLabel}}&lt;br /&gt;
! {{#invoke:Lang|get_string|Citadel_UserFeedback_TypeLabel}}&lt;br /&gt;
! {{Souls|{{#invoke:Dictionary|translate|Cost}}}}&lt;br /&gt;
! {{#invoke:Lang|get_string|Citadel_Mod_Tooltip_Active}}&lt;br /&gt;
! {{#invoke:Lang|get_string|AbilityCooldown_label}}&lt;br /&gt;
! {{#invoke:Lang|get_string|AbilityDuration_label}}&lt;br /&gt;
! {{#invoke:Lang|get_string|AbilityCastRange_label}}]=])&lt;br /&gt;
    &lt;br /&gt;
    for _, item in ipairs(active_items) do&lt;br /&gt;
        local bg_color = util_module.get_slot_color(item.slot)&lt;br /&gt;
&lt;br /&gt;
		local item_type&lt;br /&gt;
		if item.slot == &amp;quot;Armor&amp;quot; then&lt;br /&gt;
		    item_type = &amp;quot;Armor&amp;quot;&lt;br /&gt;
		elseif item.slot == &amp;quot;Tech&amp;quot; then&lt;br /&gt;
		    item_type = &amp;quot;Tech&amp;quot;&lt;br /&gt;
		else&lt;br /&gt;
		    item_type = &amp;quot;Weapon&amp;quot;&lt;br /&gt;
		end&lt;br /&gt;
        &lt;br /&gt;
        local row = string.format([=[&lt;br /&gt;
|-&lt;br /&gt;
! style=&amp;quot;background-color:%s&amp;quot; | [[File:%s.png|64x64px]]&lt;br /&gt;
! [[%s{{If_lang}}|{{#invoke:Lang|get_string|%s}}]]&lt;br /&gt;
| style=&amp;quot;text-align:center;font-weight:bold&amp;quot; | {{ItemType|%s|{{#invoke:Lang|get_string|CitadelCategory%s}}}}&lt;br /&gt;
| data-sort-value=&amp;quot;%d&amp;quot; style=&amp;quot;text-align:center;font-size:15px&amp;quot; | {{Souls|%d}}&lt;br /&gt;
| {{#invoke:Utilities|process_variables|%s_active_desc|%s}}{{#invoke:Utilities|process_variables|%s_desc|%s}}{{#invoke:Utilities|process_variables|%s_active|%s}}&lt;br /&gt;
%s&lt;br /&gt;
%s&lt;br /&gt;
%s]=],&lt;br /&gt;
            bg_color, &lt;br /&gt;
            item.name, &lt;br /&gt;
            item.name, item.key,&lt;br /&gt;
            item_type, item_type,&lt;br /&gt;
            item.cost, item.cost,&lt;br /&gt;
            item.key, item.name, item.key, item.name, item.key, item.name,&lt;br /&gt;
            stat_cell(item.cooldown, item.name, &amp;quot;AbilityCooldown&amp;quot;, &amp;quot;s&amp;quot;),&lt;br /&gt;
            stat_cell(item.duration, item.name, &amp;quot;AbilityDuration&amp;quot;, &amp;quot;s&amp;quot;),&lt;br /&gt;
            stat_cell(item.range_value, item.name, item.range_property))&lt;br /&gt;
            &lt;br /&gt;
        table.insert(rows, row)&lt;br /&gt;
    end&lt;br /&gt;
    &lt;br /&gt;
    table.insert(rows, &amp;quot;\n|}&amp;quot;)&lt;br /&gt;
    return restyle_description(frame:preprocess(table.concat(rows, &amp;quot;\n&amp;quot;)))&lt;br /&gt;
end&lt;br /&gt;
&lt;br /&gt;
return p&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox?diff=100014</id>
		<title>Template:ItemBox</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox?diff=100014"/>
		<updated>2026-07-25T00:01:37Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Wire lowGraphics to the per-item overlay (itembox-lowgfx) and remove the texture/wearMask/iconMask testing switch now that the texture approach is settled (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;templatestyles src=&amp;quot;Template:ItemBox/styles.css&amp;quot; /&amp;gt;&amp;lt;includeonly&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{#vardefine:itemName|{{{itemName|{{{1}}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Display name: Lang string for the codename, else the raw name, then override.&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#invoke:Lang|get_string|{{#invoke:ItemData|get_codename|{{#var:itemName}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#if:{{#var:displayName}}|{{#var:displayName}}|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Measured name size (em) and stable per-item texture variety.&lt;br /&gt;
--&amp;gt;{{#vardefine:fontSize|{{#invoke:ItemBox|getFontSize|{{#var:displayName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Modifier classes: slot (Weapon/Armor/Tech from data, or Weapon/Vitality/Spirit override -&amp;gt; weapon/vitality/spirit), tier, tags.&lt;br /&gt;
--&amp;gt;{{#vardefine:slot|{{#switch:{{{overrideSlot|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Slot}}}}}|Weapon=itembox-weapon|Armor|Vitality=itembox-vitality|Tech|Spirit=itembox-spirit}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:tier|itembox-tier-{{{overrideTier|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Tier}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:showTierTag|{{#ifeq:{{{showTierTag|}}}|true|itembox-show-tier}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{{overrideIsActive|{{#invoke:ItemData|is_active|{{#var:itemName}}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{#ifeq:{{#var:isActive}}|true|itembox-active}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{{overrideIsImbue|{{#invoke:ItemData|get_prop|{{#var:itemName}}|IsImbue}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     lowGraphics=true is for callers that place dozens of cards on one page (the&lt;br /&gt;
     card navboxes). It swaps the paper texture from the normal-mode multiply,&lt;br /&gt;
     which blends two images and so is re-rasterised every scrolled frame, to a&lt;br /&gt;
     transparent-paper overlay that is a single cacheable image. On the profiled&lt;br /&gt;
     navbox this took the render thread&#039;s OpenGL work from ~230 ms/s to ~10 and&lt;br /&gt;
     roughly doubled the frame rate. The wear and icon masks are clips of a&lt;br /&gt;
     single image, not blends, so they cache once rasterised and stay at full&lt;br /&gt;
     detail. The overlay itself is defined in [[Template:ItemBox/styles.css]] and&lt;br /&gt;
     keyed off the same per-item texture-vN class, so a card keeps its paper&lt;br /&gt;
     across both modes.&lt;br /&gt;
--&amp;gt;{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-lowgfx}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Links.&lt;br /&gt;
--&amp;gt;{{#vardefine:linkTooltip|{{{overrideLinkTooltip|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkImage|{{{overrideLinkImage|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
--&amp;gt;&amp;lt;div class=&amp;quot;itembox {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}} {{#var:variants}} {{#var:lowGraphics}}&amp;quot; style=&amp;quot;font-size:{{#expr: 10 * {{#if:{{{size|}}}|{{{size}}}|1}} }}px;&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;itembox-background&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;div class=&amp;quot;itembox-card&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-icon-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-icon&amp;quot;&amp;gt;[[File:{{#var:linkImage}}.png|160px|link=]]&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-tier-badge&amp;quot;&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-shadow&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-fill&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-number&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-imbue-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_imbue}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-name-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;p class=&amp;quot;itembox-name&amp;quot; style=&amp;quot;font-size:{{#var:fontSize}}em;text-wrap:balance;&amp;quot;&amp;gt;{{#var:displayName}}&amp;lt;/p&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-wear&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-texture&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-bevel&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-active-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_active}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-outline&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
		&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;item-link-wrapper&amp;quot; data-item-name=&amp;quot;{{#var:linkTooltip}}&amp;quot;&amp;gt;[[{{#var:linkClick}}|&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;]]&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&amp;lt;/includeonly&amp;gt;&amp;lt;noinclude&amp;gt;{{Documentation}}&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox/styles.css?diff=100013</id>
		<title>Template:ItemBox/styles.css</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox/styles.css?diff=100013"/>
		<updated>2026-07-25T00:00:10Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Consolidate ItemBox textures: keep normal-mode per-item multiply, wire lowGraphics to a per-item transparent overlay (alpha papers, brightness 0.25 / opacity 0.10, cacheable), and remove all dead-end scaffolding (force-tex, background-blend, mask variants, the overlay tuning grid, and the wear/icon simplifications) (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
&lt;br /&gt;
/* The whole card scales off one knob: font-size on .itembox (1em = 10px base) */&lt;br /&gt;
.itembox,&lt;br /&gt;
.itembox * {&lt;br /&gt;
    margin: 0;&lt;br /&gt;
    padding: 0;&lt;br /&gt;
    border: 0;&lt;br /&gt;
    box-sizing: border-box;&lt;br /&gt;
}&lt;br /&gt;
.itembox {&lt;br /&gt;
    --itembox-ink: #10130D;&lt;br /&gt;
    --itembox-weapon: #EC981a;&lt;br /&gt;
    --itembox-vitality: #7CBB1E;&lt;br /&gt;
    --itembox-spirit: #CE91FF;&lt;br /&gt;
    --itembox-imbue-fg: #E8C9FF;&lt;br /&gt;
    --itembox-imbue-bg: #623585;&lt;br /&gt;
    --itembox-card-image: none;&lt;br /&gt;
    --itembox-font: &#039;Retail Demo&#039;, sans-serif;&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: inline-block;&lt;br /&gt;
    font-size: 10px;&lt;br /&gt;
    width: 8em;&lt;br /&gt;
    height: 12.5em;&lt;br /&gt;
    border-radius: 0.6em;&lt;br /&gt;
    box-shadow: 0.2em 0.2em 1.2em #00000097;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
    transition-duration: 0.1s;&lt;br /&gt;
    transition-property: opacity, transform, filter;&lt;br /&gt;
}&lt;br /&gt;
.itembox-background {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    pointer-events: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-card {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-image: var(--itembox-card-image);&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    /* Confines the texture&#039;s mix-blend-mode (normal mode) to the card. Without&lt;br /&gt;
       it the blend group reaches the page backdrop and the card cannot be&lt;br /&gt;
       cached as one layer. */&lt;br /&gt;
    isolation: isolate;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Card art per tier and slot, held in a variable so one .itembox-card rule can&lt;br /&gt;
   paint it. The pairs collapse: T5 reuses the T4 image. */&lt;br /&gt;
.itembox-tier-1.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/3/3e/Weapon_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/9/96/Weapon_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/5/5d/Weapon_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-weapon,&lt;br /&gt;
.itembox-tier-5.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/a6/Weapon_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/7/75/Armor_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/0/05/Armor_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/7/7c/Armor_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-vitality,&lt;br /&gt;
.itembox-tier-5.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/1/18/Armor_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/af/Tech_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/ac/Tech_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/6/67/Tech_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-spirit,&lt;br /&gt;
.itembox-tier-5.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/f/f5/Tech_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-icon-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    align-items: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    aspect-ratio: 1 / 1;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    background-repeat: no-repeat;&lt;br /&gt;
    mask-size: cover;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon &amp;gt; span,&lt;br /&gt;
.itembox-icon &amp;gt; span &amp;gt; span,&lt;br /&gt;
.itembox-icon picture {&lt;br /&gt;
    display: block;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon img {&lt;br /&gt;
    display: block;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    max-width: 100%;&lt;br /&gt;
    max-height: 100%;&lt;br /&gt;
    object-fit: cover;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-icon-v1 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/1/10/Icon_mask01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon-v2 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/6/6f/Icon_mask02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon-v3 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/9/96/Icon_mask03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-badge {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0;&lt;br /&gt;
    right: 0;&lt;br /&gt;
    width: 2.8em;&lt;br /&gt;
    height: 2.8em;&lt;br /&gt;
    transform: scale(1.4);&lt;br /&gt;
    transform-origin: top right;&lt;br /&gt;
    /* display:none rather than visibility:hidden so the badge and its&lt;br /&gt;
       drop-shadow() cost nothing on the cards that never show it. */&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-show-tier .itembox-tier-badge {&lt;br /&gt;
    display: block;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-badge-fill {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    mask-size: 2.2em;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-position: right 0;&lt;br /&gt;
    mask-image: url(&#039;/images/6/61/Tier_corner_cap.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-badge-shadow {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0;&lt;br /&gt;
    left: 0;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-size: 2.2em;&lt;br /&gt;
    background-repeat: no-repeat;&lt;br /&gt;
    background-position: right 0;&lt;br /&gt;
    background-image: url(&#039;/images/6/61/Tier_corner_cap.svg&#039;);&lt;br /&gt;
    filter: drop-shadow(-0.4em 0 0.6em #000000ff);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-weapon .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-weapon);&lt;br /&gt;
}&lt;br /&gt;
.itembox-vitality .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-vitality);&lt;br /&gt;
}&lt;br /&gt;
.itembox-spirit .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-spirit);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-badge-number {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    right: 0;&lt;br /&gt;
    top: 0.3em;&lt;br /&gt;
    height: 0.8em;&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.5em;&lt;br /&gt;
    right: 0.4em;&lt;br /&gt;
    mask-image: url(&#039;/images/2/24/Tier_numbers_small_01.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.7em;&lt;br /&gt;
    right: 0.3em;&lt;br /&gt;
    mask-image: url(&#039;/images/7/74/Tier_numbers_small_02.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.9em;&lt;br /&gt;
    right: 0.2em;&lt;br /&gt;
    mask-image: url(&#039;/images/5/54/Tier_numbers_small_03.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4 .itembox-tier-badge-number {&lt;br /&gt;
    width: 1.1em;&lt;br /&gt;
    mask-image: url(&#039;/images/c/c6/Tier_numbers_small_04.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-5 .itembox-tier-badge-number {&lt;br /&gt;
    width: 1.1em;&lt;br /&gt;
    right: 0.1em;&lt;br /&gt;
    mask-image: url(&#039;/images/8/81/Tier_numbers_small_05.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-imbue-tag {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    bottom: 0;&lt;br /&gt;
    display: none;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: fit-content;&lt;br /&gt;
    font-size: 1.2em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    line-height: normal;&lt;br /&gt;
    letter-spacing: 0.1em;&lt;br /&gt;
    white-space: nowrap;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    text-transform: uppercase;&lt;br /&gt;
    border-radius: 0.2em;&lt;br /&gt;
    padding: 0 0.3em;&lt;br /&gt;
    color: var(--itembox-imbue-fg);&lt;br /&gt;
    background-color: var(--itembox-imbue-bg);&lt;br /&gt;
}&lt;br /&gt;
.itembox-imbue .itembox-imbue-tag {&lt;br /&gt;
    display: flex;&lt;br /&gt;
}&lt;br /&gt;
.itembox-active.itembox-imbue .itembox-imbue-tag {&lt;br /&gt;
    justify-content: start;&lt;br /&gt;
    height: 2.2em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-name-area {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 4.5em;&lt;br /&gt;
    padding: 0.5em 0.4em;&lt;br /&gt;
}&lt;br /&gt;
.itembox-name {&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    line-height: 1.2;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    font-size: 1.5em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    color: var(--itembox-ink);&lt;br /&gt;
    overflow-wrap: normal;&lt;br /&gt;
    word-break: normal;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-4.itembox-weapon .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-weapon .itembox-name {&lt;br /&gt;
    color: #e4c5a1;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-vitality .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-vitality .itembox-name {&lt;br /&gt;
    color: #c2e7cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-spirit .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-spirit .itembox-name {&lt;br /&gt;
    color: #e3d4f2;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-wear {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    opacity: 0.7;&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    background-color: white;&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v1 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/8/8f/Card_PaperWear_1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v2 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/1/11/Card_PaperWear_2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v3 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/8/89/Card_PaperWear_3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v4 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/5/52/Card_PaperWear_4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-1.itembox-vitality .itembox-wear {&lt;br /&gt;
    opacity: 1;&lt;br /&gt;
    background-color: #f4e2cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit .itembox-wear {&lt;br /&gt;
    opacity: 1;&lt;br /&gt;
    background-color: rgb(247, 232, 213);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 .itembox-wear {&lt;br /&gt;
    background-color: rgb(230, 209, 191);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 .itembox-wear {&lt;br /&gt;
    background-color: rgb(206, 173, 155);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4 .itembox-wear,&lt;br /&gt;
.itembox-tier-5 .itembox-wear {&lt;br /&gt;
    background-color: rgb(105, 97, 92);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* ---- Paper texture ------------------------------------------------------&lt;br /&gt;
   Two rendering paths share the .itembox-texture div and the per-item&lt;br /&gt;
   texture-vN class (hashed from the item name in [[Module:ItemBox]], so a card&lt;br /&gt;
   keeps the same paper across both paths).&lt;br /&gt;
&lt;br /&gt;
   Normal mode multiplies the paper over the card. multiply reads the backdrop,&lt;br /&gt;
   so WebRender re-rasterises it on every scrolled frame and cannot cache the&lt;br /&gt;
   card as a static tile. That is fine for the handful of cards on an item page.&lt;br /&gt;
&lt;br /&gt;
   Low-graphics mode (itembox-lowgfx, set by lowGraphics=true for the card&lt;br /&gt;
   navboxes that place dozens at once) swaps to a transparent-paper overlay: the&lt;br /&gt;
   same three papers redrawn as dark grain on a transparent field, dropped on as&lt;br /&gt;
   a plain image. No blend, no mask — a single image alpha-composited over the&lt;br /&gt;
   whole card — so WebRender caches it and scrolling stays smooth. brightness()&lt;br /&gt;
   darkens the grain so it deepens the card rather than lightening the dark ones;&lt;br /&gt;
   both brightness and opacity read only this layer, so both keep caching. */&lt;br /&gt;
.itembox-texture {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-size: 100% 100%;&lt;br /&gt;
    mix-blend-mode: multiply;&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v1 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v2 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v3 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox.itembox-lowgfx .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    filter: brightness(0.25);&lt;br /&gt;
    opacity: 0.1;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-lowgfx.itembox-texture-v1 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/c/c7/Shopitem_papertexture_alpha_01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-lowgfx.itembox-texture-v2 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/2/2a/Shopitem_papertexture_alpha_02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-lowgfx.itembox-texture-v3 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/7/76/Shopitem_papertexture_alpha_03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Two hairlines at ~13% alpha: screen and normal blending land within ~2% of&lt;br /&gt;
   each other here, so the blend mode is dropped and the layer stays cheap. */&lt;br /&gt;
.itembox-bevel {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    border-left: 0.1em solid #ffcc6622;&lt;br /&gt;
    border-top: 0.1em solid #ffcc6622;&lt;br /&gt;
    background-size: 100% 100%;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-active-tag {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    bottom: 3.5em;&lt;br /&gt;
    display: none;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    align-self: center;&lt;br /&gt;
    width: fit-content;&lt;br /&gt;
    height: fit-content;&lt;br /&gt;
    font-size: 1.1em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    line-height: normal;&lt;br /&gt;
    letter-spacing: 0;&lt;br /&gt;
    white-space: nowrap;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    text-transform: uppercase;&lt;br /&gt;
    border-radius: 0.2em;&lt;br /&gt;
    padding: 0.1em 0.6em;&lt;br /&gt;
    box-shadow: 0 0 1.5em #000000ff;&lt;br /&gt;
    color: #ffefd7b3;&lt;br /&gt;
    background-color: #171717;&lt;br /&gt;
}&lt;br /&gt;
.itembox-active .itembox-active-tag {&lt;br /&gt;
    display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox .item-link-wrapper,&lt;br /&gt;
.itembox .item-link-wrapper &amp;gt; a {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    display: block;&lt;br /&gt;
    inset: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Skipping offscreen cards only pays for itself when many are on screen at&lt;br /&gt;
   once. On narrow viewports about ten fit, so the saving is small while cards&lt;br /&gt;
   crossing the boundary force constant display list rebuilds — measured at&lt;br /&gt;
   roughly half the frame rate on Android with this enabled. Desktop viewports&lt;br /&gt;
   fit far more per screen and take the win, so it is gated to wide screens. */&lt;br /&gt;
@media (min-width: 900px) {&lt;br /&gt;
    .itembox {&lt;br /&gt;
        content-visibility: auto;&lt;br /&gt;
        contain-intrinsic-size: 8em 12.5em;&lt;br /&gt;
    }&lt;br /&gt;
}&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/User:Vergir?diff=99999</id>
		<title>User:Vergir</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/User:Vergir?diff=99999"/>
		<updated>2026-07-24T23:38:03Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Add file 3 section at b0.25/o0.1 alongside files 1 and 2 (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
&lt;br /&gt;
= Holliday =&lt;br /&gt;
{{HeroStreetBrawlItems|Holliday|id=sb-items-holliday}}&lt;br /&gt;
&lt;br /&gt;
= Vindicta (has counter items) =&lt;br /&gt;
{{HeroStreetBrawlItems|Vindicta|id=sb-items-vindicta}}&lt;br /&gt;
&lt;br /&gt;
= ItemBox overlay: file 1 vs 2 vs 3 =&lt;br /&gt;
&lt;br /&gt;
All at brightness 0.25, opacity 0.10. Only the alpha paper file differs, so this isolates which export reads best before we consolidate.&lt;br /&gt;
&lt;br /&gt;
== File 1 (alpha 01) ==&lt;br /&gt;
{{ItemBox|itemName=Active Reload|texture=overlay-b25-o10}} {{ItemBox|itemName=Alchemical Fire|texture=overlay-b25-o10}} {{ItemBox|itemName=Arctic Blast|texture=overlay-b25-o10}} {{ItemBox|itemName=Berserker|texture=overlay-b25-o10}} {{ItemBox|itemName=Bullet Armor|texture=overlay-b25-o10}} {{ItemBox|itemName=Cheat Death|texture=overlay-b25-o10}} {{ItemBox|itemName=Colossus|texture=overlay-b25-o10}} {{ItemBox|itemName=Crippling Headshot|texture=overlay-b25-o10}} {{ItemBox|itemName=Divine Barrier|texture=overlay-b25-o10}} {{ItemBox|itemName=Echo Shard|texture=overlay-b25-o10}}&lt;br /&gt;
&lt;br /&gt;
== File 2 (alpha 02) ==&lt;br /&gt;
{{ItemBox|itemName=Active Reload|texture=overlay2-b25-o10}} {{ItemBox|itemName=Alchemical Fire|texture=overlay2-b25-o10}} {{ItemBox|itemName=Arctic Blast|texture=overlay2-b25-o10}} {{ItemBox|itemName=Berserker|texture=overlay2-b25-o10}} {{ItemBox|itemName=Bullet Armor|texture=overlay2-b25-o10}} {{ItemBox|itemName=Cheat Death|texture=overlay2-b25-o10}} {{ItemBox|itemName=Colossus|texture=overlay2-b25-o10}} {{ItemBox|itemName=Crippling Headshot|texture=overlay2-b25-o10}} {{ItemBox|itemName=Divine Barrier|texture=overlay2-b25-o10}} {{ItemBox|itemName=Echo Shard|texture=overlay2-b25-o10}}&lt;br /&gt;
&lt;br /&gt;
== File 3 (alpha 03) ==&lt;br /&gt;
{{ItemBox|itemName=Active Reload|texture=overlay3-b25-o10}} {{ItemBox|itemName=Alchemical Fire|texture=overlay3-b25-o10}} {{ItemBox|itemName=Arctic Blast|texture=overlay3-b25-o10}} {{ItemBox|itemName=Berserker|texture=overlay3-b25-o10}} {{ItemBox|itemName=Bullet Armor|texture=overlay3-b25-o10}} {{ItemBox|itemName=Cheat Death|texture=overlay3-b25-o10}} {{ItemBox|itemName=Colossus|texture=overlay3-b25-o10}} {{ItemBox|itemName=Crippling Headshot|texture=overlay3-b25-o10}} {{ItemBox|itemName=Divine Barrier|texture=overlay3-b25-o10}} {{ItemBox|itemName=Echo Shard|texture=overlay3-b25-o10}}&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox?diff=99998</id>
		<title>Template:ItemBox</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox?diff=99998"/>
		<updated>2026-07-24T23:36:53Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Add overlay3-b25-o10 (file 3) switch value for comparison (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;templatestyles src=&amp;quot;Template:ItemBox/styles.css&amp;quot; /&amp;gt;&amp;lt;includeonly&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{#vardefine:itemName|{{{itemName|{{{1}}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Display name: Lang string for the codename, else the raw name, then override.&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#invoke:Lang|get_string|{{#invoke:ItemData|get_codename|{{#var:itemName}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#if:{{#var:displayName}}|{{#var:displayName}}|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Measured name size (em) and stable per-item texture variety.&lt;br /&gt;
--&amp;gt;{{#vardefine:fontSize|{{#invoke:ItemBox|getFontSize|{{#var:displayName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Modifier classes: slot (Weapon/Armor/Tech from data, or Weapon/Vitality/Spirit override -&amp;gt; weapon/vitality/spirit), tier, tags.&lt;br /&gt;
--&amp;gt;{{#vardefine:slot|{{#switch:{{{overrideSlot|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Slot}}}}}|Weapon=itembox-weapon|Armor|Vitality=itembox-vitality|Tech|Spirit=itembox-spirit}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:tier|itembox-tier-{{{overrideTier|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Tier}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:showTierTag|{{#ifeq:{{{showTierTag|}}}|true|itembox-show-tier}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{{overrideIsActive|{{#invoke:ItemData|is_active|{{#var:itemName}}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{#ifeq:{{#var:isActive}}|true|itembox-active}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{{overrideIsImbue|{{#invoke:ItemData|get_prop|{{#var:itemName}}|IsImbue}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     lowGraphics=true is the setting for callers that place dozens of cards on&lt;br /&gt;
     one page. It drops the paper texture, because every way of drawing it as a&lt;br /&gt;
     multiply blends two images together, and WebRender re-rasterises any such&lt;br /&gt;
     blend on every scrolled frame instead of caching it as a static tile. On the&lt;br /&gt;
     profiled navbox that blend was the whole cost: dropping it took the render&lt;br /&gt;
     thread&#039;s OpenGL work from ~230 ms/s to ~10 and roughly doubled the frame&lt;br /&gt;
     rate. The wear and icon masks are clips of a single image, not blends of&lt;br /&gt;
     two, so they cache once rasterised and are kept at full detail here. A&lt;br /&gt;
     transparent-paper overlay (texture=overlay) may replace the dropped texture&lt;br /&gt;
     once its scroll profile is confirmed.&lt;br /&gt;
--&amp;gt;{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-no-texture}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     The same layers individually, for testing combinations or overriding the&lt;br /&gt;
     bundle above. wearMask drops the mask from the wear tint three ways:&lt;br /&gt;
     no   - tint moves behind the artwork, so only the card stock is coloured&lt;br /&gt;
     ramp - tint stays on top, fading in from the card&#039;s edges&lt;br /&gt;
     soft - tint stays on top, uniform and lighter, with the name lifted clear&lt;br /&gt;
     texture handles the paper grain:&lt;br /&gt;
     no    - drop it entirely&lt;br /&gt;
     1/2/3 - one shared paper via the mix-blend overlay (does not cache)&lt;br /&gt;
     blend / blend1..3 - paper multiplied into the card art (does not cache)&lt;br /&gt;
     overlay - transparent-background paper dropped on top as a plain image;&lt;br /&gt;
             caches, covers the whole card, closest to the original. Strength&lt;br /&gt;
             presets: overlay-soft (0.6), overlay-o30, overlay-o20, overlay-o10,&lt;br /&gt;
             overlay-o05. Darkened-grain grid overlay-bBB-oOO (brightness .BB,&lt;br /&gt;
             opacity .OO) so the grain deepens dark cards rather than lightening.&lt;br /&gt;
             Append the second/third alpha file with overlay2-/overlay3-.&lt;br /&gt;
     mask / mask-soft / mask-crisp / mask-crisp-soft - dead ends kept for&lt;br /&gt;
             reference; they fake the paper from the opaque PNGs and look wrong&lt;br /&gt;
--&amp;gt;{{#vardefine:lite|{{#switch:{{{wearMask|}}}|no=itembox-flat-wear|ramp=itembox-ramp-wear|soft=itembox-soft-wear}} {{#ifeq:{{{iconMask|}}}|no|itembox-flat-icon}} {{#switch:{{{texture|}}}|no=itembox-no-texture|1=itembox-force-tex-1|2=itembox-force-tex-2|3=itembox-force-tex-3|blend=itembox-blend-texture|blend1=itembox-blend-texture itembox-blend-tex-1|blend2=itembox-blend-texture itembox-blend-tex-2|blend3=itembox-blend-texture itembox-blend-tex-3|overlay=itembox-over-texture|overlay-soft=itembox-over-texture itembox-over-soft|overlay-o30=itembox-over-texture itembox-over-o30|overlay-o20=itembox-over-texture itembox-over-o20|overlay-o10=itembox-over-texture itembox-over-o10|overlay-o05=itembox-over-texture itembox-over-o05|overlay-b20-o40=itembox-over-texture itembox-over-b20-o40|overlay-b20-o60=itembox-over-texture itembox-over-b20-o60|overlay-b20-o80=itembox-over-texture itembox-over-b20-o80|overlay-b25-o10=itembox-over-texture itembox-over-b25-o10|overlay2-b25-o10=itembox-over-texture itembox-over-b25-o10 itembox-over-file2|overlay3-b25-o10=itembox-over-texture itembox-over-b25-o10 itembox-over-file3|overlay-b35-o40=itembox-over-texture itembox-over-b35-o40|overlay-b35-o60=itembox-over-texture itembox-over-b35-o60|overlay-b35-o80=itembox-over-texture itembox-over-b35-o80|overlay-b35-o100=itembox-over-texture itembox-over-b35-o100|overlay-b50-o60=itembox-over-texture itembox-over-b50-o60|overlay-b50-o80=itembox-over-texture itembox-over-b50-o80|overlay-b50-o100=itembox-over-texture itembox-over-b50-o100|mask=itembox-mask-texture itembox-mask-any-texture|mask-soft=itembox-mask-soft-texture itembox-mask-any-texture|mask-crisp=itembox-mask-crisp-texture itembox-mask-any-texture|mask-crisp-soft=itembox-mask-crisp-soft-texture itembox-mask-any-texture}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Links.&lt;br /&gt;
--&amp;gt;{{#vardefine:linkTooltip|{{{overrideLinkTooltip|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkImage|{{{overrideLinkImage|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
--&amp;gt;&amp;lt;div class=&amp;quot;itembox {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}} {{#var:variants}} {{#var:lowGraphics}} {{#var:lite}}&amp;quot; style=&amp;quot;font-size:{{#expr: 10 * {{#if:{{{size|}}}|{{{size}}}|1}} }}px;&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;itembox-background&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;div class=&amp;quot;itembox-card&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-icon-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-icon&amp;quot;&amp;gt;[[File:{{#var:linkImage}}.png|160px|link=]]&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-tier-badge&amp;quot;&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-shadow&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-fill&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-number&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-imbue-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_imbue}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-name-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;p class=&amp;quot;itembox-name&amp;quot; style=&amp;quot;font-size:{{#var:fontSize}}em;text-wrap:balance;&amp;quot;&amp;gt;{{#var:displayName}}&amp;lt;/p&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-wear&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-texture&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-bevel&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-active-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_active}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-outline&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
		&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;item-link-wrapper&amp;quot; data-item-name=&amp;quot;{{#var:linkTooltip}}&amp;quot;&amp;gt;[[{{#var:linkClick}}|&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;]]&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&amp;lt;/includeonly&amp;gt;&amp;lt;noinclude&amp;gt;{{Documentation}}&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox/styles.css?diff=99997</id>
		<title>Template:ItemBox/styles.css</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox/styles.css?diff=99997"/>
		<updated>2026-07-24T23:35:55Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Add over-file3 helper pointing at the third alpha upload for comparison (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
&lt;br /&gt;
/* The whole card scales off one knob: font-size on .itembox (1em = 10px base) */&lt;br /&gt;
.itembox,&lt;br /&gt;
.itembox * {&lt;br /&gt;
    margin: 0;&lt;br /&gt;
    padding: 0;&lt;br /&gt;
    border: 0;&lt;br /&gt;
    box-sizing: border-box;&lt;br /&gt;
}&lt;br /&gt;
.itembox {&lt;br /&gt;
    --itembox-ink: #10130D;&lt;br /&gt;
    --itembox-weapon: #EC981a;&lt;br /&gt;
    --itembox-vitality: #7CBB1E;&lt;br /&gt;
    --itembox-spirit: #CE91FF;&lt;br /&gt;
    --itembox-imbue-fg: #E8C9FF;&lt;br /&gt;
    --itembox-imbue-bg: #623585;&lt;br /&gt;
    --itembox-wear-tint: #ffffff;&lt;br /&gt;
    --itembox-wear-ramp: 75%;&lt;br /&gt;
    --itembox-card-image: none;&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
    --itembox-paper-alpha: url(&#039;/images/c/c7/Shopitem_papertexture_alpha_01.png&#039;);&lt;br /&gt;
    --itembox-tex-mask-opacity: 0.55;&lt;br /&gt;
    --itembox-tex-overlay-opacity: 1;&lt;br /&gt;
    --itembox-font: &#039;Retail Demo&#039;, sans-serif;&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: inline-block;&lt;br /&gt;
    font-size: 10px;&lt;br /&gt;
    width: 8em;&lt;br /&gt;
    height: 12.5em;&lt;br /&gt;
    border-radius: 0.6em;&lt;br /&gt;
    box-shadow: 0.2em 0.2em 1.2em #00000097;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
    transition-duration: 0.1s;&lt;br /&gt;
    transition-property: opacity, transform, filter;&lt;br /&gt;
}&lt;br /&gt;
.itembox-background {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    pointer-events: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-card {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-image: var(--itembox-card-image);&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    /* Confines mix-blend-mode below to the card. Without it the blend group&lt;br /&gt;
       reaches the page backdrop and the card cannot be cached as one layer. */&lt;br /&gt;
    isolation: isolate;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Card art is held in a variable so the blend mode below can compose paper&lt;br /&gt;
   against it on the same element. The pairs collapse: T5 reuses the T4 image. */&lt;br /&gt;
.itembox-tier-1.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/3/3e/Weapon_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/9/96/Weapon_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/5/5d/Weapon_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-weapon,&lt;br /&gt;
.itembox-tier-5.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/a6/Weapon_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/7/75/Armor_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/0/05/Armor_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/7/7c/Armor_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-vitality,&lt;br /&gt;
.itembox-tier-5.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/1/18/Armor_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/af/Tech_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/ac/Tech_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/6/67/Tech_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-spirit,&lt;br /&gt;
.itembox-tier-5.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/f/f5/Tech_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-icon-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    align-items: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    aspect-ratio: 1 / 1;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    background-repeat: no-repeat;&lt;br /&gt;
    mask-size: cover;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon &amp;gt; span,&lt;br /&gt;
.itembox-icon &amp;gt; span &amp;gt; span,&lt;br /&gt;
.itembox-icon picture {&lt;br /&gt;
    display: block;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon img {&lt;br /&gt;
    display: block;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    max-width: 100%;&lt;br /&gt;
    max-height: 100%;&lt;br /&gt;
    object-fit: cover;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-icon-v1 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/1/10/Icon_mask01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon-v2 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/6/6f/Icon_mask02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon-v3 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/9/96/Icon_mask03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-badge {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0;&lt;br /&gt;
    right: 0;&lt;br /&gt;
    width: 2.8em;&lt;br /&gt;
    height: 2.8em;&lt;br /&gt;
    transform: scale(1.4);&lt;br /&gt;
    transform-origin: top right;&lt;br /&gt;
    /* display:none rather than visibility:hidden so the badge and its&lt;br /&gt;
       drop-shadow() cost nothing on the cards that never show it. */&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-show-tier .itembox-tier-badge {&lt;br /&gt;
    display: block;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-badge-fill {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    mask-size: 2.2em;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-position: right 0;&lt;br /&gt;
    mask-image: url(&#039;/images/6/61/Tier_corner_cap.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-badge-shadow {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0;&lt;br /&gt;
    left: 0;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-size: 2.2em;&lt;br /&gt;
    background-repeat: no-repeat;&lt;br /&gt;
    background-position: right 0;&lt;br /&gt;
    background-image: url(&#039;/images/6/61/Tier_corner_cap.svg&#039;);&lt;br /&gt;
    filter: drop-shadow(-0.4em 0 0.6em #000000ff);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-weapon .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-weapon);&lt;br /&gt;
}&lt;br /&gt;
.itembox-vitality .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-vitality);&lt;br /&gt;
}&lt;br /&gt;
.itembox-spirit .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-spirit);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-badge-number {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    right: 0;&lt;br /&gt;
    top: 0.3em;&lt;br /&gt;
    height: 0.8em;&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.5em;&lt;br /&gt;
    right: 0.4em;&lt;br /&gt;
    mask-image: url(&#039;/images/2/24/Tier_numbers_small_01.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.7em;&lt;br /&gt;
    right: 0.3em;&lt;br /&gt;
    mask-image: url(&#039;/images/7/74/Tier_numbers_small_02.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.9em;&lt;br /&gt;
    right: 0.2em;&lt;br /&gt;
    mask-image: url(&#039;/images/5/54/Tier_numbers_small_03.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4 .itembox-tier-badge-number {&lt;br /&gt;
    width: 1.1em;&lt;br /&gt;
    mask-image: url(&#039;/images/c/c6/Tier_numbers_small_04.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-5 .itembox-tier-badge-number {&lt;br /&gt;
    width: 1.1em;&lt;br /&gt;
    right: 0.1em;&lt;br /&gt;
    mask-image: url(&#039;/images/8/81/Tier_numbers_small_05.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-imbue-tag {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    bottom: 0;&lt;br /&gt;
    display: none;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: fit-content;&lt;br /&gt;
    font-size: 1.2em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    line-height: normal;&lt;br /&gt;
    letter-spacing: 0.1em;&lt;br /&gt;
    white-space: nowrap;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    text-transform: uppercase;&lt;br /&gt;
    border-radius: 0.2em;&lt;br /&gt;
    padding: 0 0.3em;&lt;br /&gt;
    color: var(--itembox-imbue-fg);&lt;br /&gt;
    background-color: var(--itembox-imbue-bg);&lt;br /&gt;
}&lt;br /&gt;
.itembox-imbue .itembox-imbue-tag {&lt;br /&gt;
    display: flex;&lt;br /&gt;
}&lt;br /&gt;
.itembox-active.itembox-imbue .itembox-imbue-tag {&lt;br /&gt;
    justify-content: start;&lt;br /&gt;
    height: 2.2em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-name-area {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 4.5em;&lt;br /&gt;
    padding: 0.5em 0.4em;&lt;br /&gt;
}&lt;br /&gt;
.itembox-name {&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    line-height: 1.2;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    font-size: 1.5em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    color: var(--itembox-ink);&lt;br /&gt;
    overflow-wrap: normal;&lt;br /&gt;
    word-break: normal;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-4.itembox-weapon .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-weapon .itembox-name {&lt;br /&gt;
    color: #e4c5a1;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-vitality .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-vitality .itembox-name {&lt;br /&gt;
    color: #c2e7cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-spirit .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-spirit .itembox-name {&lt;br /&gt;
    color: #e3d4f2;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-wear {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    opacity: 0.7;&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    background-color: white;&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v1 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/8/8f/Card_PaperWear_1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v2 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/1/11/Card_PaperWear_2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v3 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/8/89/Card_PaperWear_3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v4 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/5/52/Card_PaperWear_4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-1.itembox-vitality .itembox-wear {&lt;br /&gt;
    opacity: 1;&lt;br /&gt;
    background-color: #f4e2cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit .itembox-wear {&lt;br /&gt;
    opacity: 1;&lt;br /&gt;
    background-color: rgb(247, 232, 213);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 .itembox-wear {&lt;br /&gt;
    background-color: rgb(230, 209, 191);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 .itembox-wear {&lt;br /&gt;
    background-color: rgb(206, 173, 155);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4 .itembox-wear,&lt;br /&gt;
.itembox-tier-5 .itembox-wear {&lt;br /&gt;
    background-color: rgb(105, 97, 92);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Same tier colours again as a custom property. A gradient cannot read&lt;br /&gt;
   background-color, so the ramp variant below needs them in this form. */&lt;br /&gt;
.itembox-tier-1.itembox-vitality {&lt;br /&gt;
    --itembox-wear-tint: #f4e2cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit {&lt;br /&gt;
    --itembox-wear-tint: rgb(247, 232, 213);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 {&lt;br /&gt;
    --itembox-wear-tint: rgb(230, 209, 191);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 {&lt;br /&gt;
    --itembox-wear-tint: rgb(206, 173, 155);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4,&lt;br /&gt;
.itembox-tier-5 {&lt;br /&gt;
    --itembox-wear-tint: rgb(105, 97, 92);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-texture {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-size: 100% 100%;&lt;br /&gt;
    mix-blend-mode: multiply;&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v1 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v2 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v3 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Overrides the per-item texture so every card shares one image, which keeps a&lt;br /&gt;
   single paper texture resident in the GPU cache instead of three. Higher&lt;br /&gt;
   specificity than the hashed classes above, so it wins regardless of which&lt;br /&gt;
   variant the item&#039;s name landed on. */&lt;br /&gt;
.itembox.itembox-force-tex-1 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-force-tex-2 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-force-tex-3 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Two hairlines at ~13% alpha: screen and normal blending land within ~2% of&lt;br /&gt;
   each other here, so the blend mode is dropped and the layer stays cheap. */&lt;br /&gt;
.itembox-bevel {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    border-left: 0.1em solid #ffcc6622;&lt;br /&gt;
    border-top: 0.1em solid #ffcc6622;&lt;br /&gt;
    background-size: 100% 100%;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-active-tag {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    bottom: 3.5em;&lt;br /&gt;
    display: none;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    align-self: center;&lt;br /&gt;
    width: fit-content;&lt;br /&gt;
    height: fit-content;&lt;br /&gt;
    font-size: 1.1em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    line-height: normal;&lt;br /&gt;
    letter-spacing: 0;&lt;br /&gt;
    white-space: nowrap;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    text-transform: uppercase;&lt;br /&gt;
    border-radius: 0.2em;&lt;br /&gt;
    padding: 0.1em 0.6em;&lt;br /&gt;
    box-shadow: 0 0 1.5em #000000ff;&lt;br /&gt;
    color: #ffefd7b3;&lt;br /&gt;
    background-color: #171717;&lt;br /&gt;
}&lt;br /&gt;
.itembox-active .itembox-active-tag {&lt;br /&gt;
    display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox .item-link-wrapper,&lt;br /&gt;
.itembox .item-link-wrapper &amp;gt; a {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    display: block;&lt;br /&gt;
    inset: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* ---------------------------------------------------------------------------&lt;br /&gt;
   Opt-in simplifications, set through the parameters on [[Template:ItemBox]].&lt;br /&gt;
   Each removes work the GPU repeats for every card on screen: a masked element&lt;br /&gt;
   costs an extra render pass, and mix-blend-mode costs a backdrop read. Callers&lt;br /&gt;
   that place dozens of cards at once can trade the paper detail for the frames.&lt;br /&gt;
   --------------------------------------------------------------------------- */&lt;br /&gt;
&lt;br /&gt;
/* The wear patterns are concentrated at the card&#039;s edges and largely clear in&lt;br /&gt;
   the middle, so a gradient can stand in for the mask: transparent through the&lt;br /&gt;
   centre, tint gathering at the border. --itembox-wear-ramp is where the&lt;br /&gt;
   falloff starts and is the one value worth tuning. The name is lifted clear so&lt;br /&gt;
   no amount of tint ever lands on the glyphs; the paper behind them still&lt;br /&gt;
   takes it, since the name area has no background of its own. Gradients are a&lt;br /&gt;
   native primitive, so this costs no extra render pass.  */&lt;br /&gt;
.itembox.itembox-ramp-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    background-color: transparent;&lt;br /&gt;
    background-image: radial-gradient(ellipse at 50% 45%, transparent var(--itembox-wear-ramp), var(--itembox-wear-tint) 100%);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-ramp-wear .itembox-name-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    z-index: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Kept for comparison against the ramp; drop whichever loses.&lt;br /&gt;
   flat - tint moves behind the artwork, colouring only the card stock&lt;br /&gt;
   soft - tint stays on top, uniform and lighter, name lifted clear */&lt;br /&gt;
.itembox.itembox-flat-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    z-index: -1;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-soft-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    opacity: 0.35;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-soft-wear .itembox-name-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    z-index: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-flat-icon .itembox-icon {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-no-texture .itembox-texture {&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* ---- Transparent-paper overlay (the good one) --------------------------&lt;br /&gt;
   The paper redrawn as dark grain on a TRANSPARENT field, dropped straight on&lt;br /&gt;
   top of the card as a plain image. No blend, no mask: the grain pixels show,&lt;br /&gt;
   the gaps show nothing, and because it is a single image being alpha-&lt;br /&gt;
   composited (not two colours combined) WebRender caches the card as a static&lt;br /&gt;
   tile and scrolling stays smooth. It reaches the whole card including the icon&lt;br /&gt;
   and text area.&lt;br /&gt;
&lt;br /&gt;
   Two levers, both single-image so both keep caching: opacity (how much grain&lt;br /&gt;
   shows) and brightness (how dark the grain&#039;s pixels are; below 1 it deepens&lt;br /&gt;
   the card the way the old multiply did). TemplateStyles rejects a variable&lt;br /&gt;
   inside filter(), so the brightness/opacity pairs below are fixed presets&lt;br /&gt;
   named -bBB-oOO (brightness .BB, opacity .OO). --itembox-paper-alpha is the&lt;br /&gt;
   image; the -file2 / -file3 helpers point it at the other uploads for A/B. */&lt;br /&gt;
.itembox.itembox-over-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: var(--itembox-paper-alpha);&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    opacity: var(--itembox-tex-overlay-opacity);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-over-file2 {&lt;br /&gt;
    --itembox-paper-alpha: url(&#039;/images/2/2a/Shopitem_papertexture_alpha_02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-over-file3 {&lt;br /&gt;
    --itembox-paper-alpha: url(&#039;/images/7/76/Shopitem_papertexture_alpha_03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-over-soft { --itembox-tex-overlay-opacity: 0.6; }&lt;br /&gt;
.itembox.itembox-over-o30 { --itembox-tex-overlay-opacity: 0.3; }&lt;br /&gt;
.itembox.itembox-over-o20 { --itembox-tex-overlay-opacity: 0.2; }&lt;br /&gt;
.itembox.itembox-over-o10 { --itembox-tex-overlay-opacity: 0.1; }&lt;br /&gt;
.itembox.itembox-over-o05 { --itembox-tex-overlay-opacity: 0.05; }&lt;br /&gt;
&lt;br /&gt;
/* Brightness x opacity presets. */&lt;br /&gt;
.itembox.itembox-over-b20-o40 .itembox-texture { filter: brightness(0.2); opacity: 0.4; }&lt;br /&gt;
.itembox.itembox-over-b20-o60 .itembox-texture { filter: brightness(0.2); opacity: 0.6; }&lt;br /&gt;
.itembox.itembox-over-b20-o80 .itembox-texture { filter: brightness(0.2); opacity: 0.8; }&lt;br /&gt;
.itembox.itembox-over-b25-o10 .itembox-texture { filter: brightness(0.25); opacity: 0.1; }&lt;br /&gt;
.itembox.itembox-over-b35-o40 .itembox-texture { filter: brightness(0.35); opacity: 0.4; }&lt;br /&gt;
.itembox.itembox-over-b35-o60 .itembox-texture { filter: brightness(0.35); opacity: 0.6; }&lt;br /&gt;
.itembox.itembox-over-b35-o80 .itembox-texture { filter: brightness(0.35); opacity: 0.8; }&lt;br /&gt;
.itembox.itembox-over-b35-o100 .itembox-texture { filter: brightness(0.35); opacity: 1; }&lt;br /&gt;
.itembox.itembox-over-b50-o60 .itembox-texture { filter: brightness(0.5); opacity: 0.6; }&lt;br /&gt;
.itembox.itembox-over-b50-o80 .itembox-texture { filter: brightness(0.5); opacity: 0.8; }&lt;br /&gt;
.itembox.itembox-over-b50-o100 .itembox-texture { filter: brightness(0.5); opacity: 1; }&lt;br /&gt;
&lt;br /&gt;
/* Paper multiplied against the card art on the SAME element. Unlike&lt;br /&gt;
   mix-blend-mode (which reads the page backdrop and so cannot be cached),&lt;br /&gt;
   background-blend-mode blends the element&#039;s own layers, which WebRender keeps&lt;br /&gt;
   as a static tile — the whole point of the exercise. The separate .itembox-&lt;br /&gt;
   texture div is switched off since the paper now lives in the card layer.&lt;br /&gt;
   Caveat: this only reaches the card art, not the icon or the name, which are&lt;br /&gt;
   real content above the background rather than layers of it. --itembox-paper&lt;br /&gt;
   selects which of the three papers to use. */&lt;br /&gt;
.itembox.itembox-blend-texture .itembox-card {&lt;br /&gt;
    background-image: var(--itembox-paper), var(--itembox-card-image);&lt;br /&gt;
    background-size: cover, cover;&lt;br /&gt;
    background-blend-mode: multiply, normal;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture .itembox-texture {&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Per-item blend: read the paper from the item&#039;s own hashed texture-vN class,&lt;br /&gt;
   so blended cards keep the same variety the overlay had. The forced classes&lt;br /&gt;
   below outrank these when a single shared paper is wanted instead. */&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Forced single paper for the blend, e.g. from lowGraphics. */&lt;br /&gt;
.itembox.itembox-blend-tex-1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-tex-2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-tex-3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* ---- Masked paper (dead ends, kept for reference) -----------------------&lt;br /&gt;
   Attempts to fake the multiply from the opaque dark-on-white PNGs by masking a&lt;br /&gt;
   dark tint. The plain luminance mask keeps the white and floods the card; the&lt;br /&gt;
   inverted -crisp version keeps the whole field bright and washes it out. Both&lt;br /&gt;
   were rejected on looks. The transparent overlay above replaced them. */&lt;br /&gt;
.itembox.itembox-mask-crisp-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: none;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
    opacity: var(--itembox-tex-mask-opacity);&lt;br /&gt;
    mask-image: var(--itembox-paper);&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
    filter: invert(1);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-crisp-soft-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: none;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
    opacity: 0.75;&lt;br /&gt;
    mask-image: var(--itembox-paper);&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
    filter: invert(1);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: none;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
    opacity: var(--itembox-tex-mask-opacity);&lt;br /&gt;
    mask-image: var(--itembox-paper);&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-soft-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: none;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
    opacity: 0.3;&lt;br /&gt;
    mask-image: var(--itembox-paper);&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
}&lt;br /&gt;
/* Per-item paper for the masked variants, read from the hashed class. */&lt;br /&gt;
.itembox.itembox-mask-any-texture.itembox-texture-v1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-any-texture.itembox-texture-v2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-any-texture.itembox-texture-v3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Skipping offscreen cards only pays for itself when many are on screen at&lt;br /&gt;
   once. On narrow viewports about ten fit, so the saving is small while cards&lt;br /&gt;
   crossing the boundary force constant display list rebuilds — measured at&lt;br /&gt;
   roughly half the frame rate on Android with this enabled. */&lt;br /&gt;
@media (min-width: 900px) {&lt;br /&gt;
    .itembox {&lt;br /&gt;
        content-visibility: auto;&lt;br /&gt;
        contain-intrinsic-size: 8em 12.5em;&lt;br /&gt;
    }&lt;br /&gt;
}&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/User:Vergir?diff=99992</id>
		<title>User:Vergir</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/User:Vergir?diff=99992"/>
		<updated>2026-07-24T23:25:56Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Trim to two overlay sections, file 1 vs file 2 at b0.25/o0.1, for finetuning (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
&lt;br /&gt;
= Holliday =&lt;br /&gt;
{{HeroStreetBrawlItems|Holliday|id=sb-items-holliday}}&lt;br /&gt;
&lt;br /&gt;
= Vindicta (has counter items) =&lt;br /&gt;
{{HeroStreetBrawlItems|Vindicta|id=sb-items-vindicta}}&lt;br /&gt;
&lt;br /&gt;
= ItemBox overlay: file 1 vs file 2 =&lt;br /&gt;
&lt;br /&gt;
Both at brightness 0.25, opacity 0.10. Only the alpha paper file differs, so this isolates which export reads better before pinning the final numbers.&lt;br /&gt;
&lt;br /&gt;
== File 1 (alpha 01) ==&lt;br /&gt;
{{ItemBox|itemName=Active Reload|texture=overlay-b25-o10}} {{ItemBox|itemName=Alchemical Fire|texture=overlay-b25-o10}} {{ItemBox|itemName=Arctic Blast|texture=overlay-b25-o10}} {{ItemBox|itemName=Berserker|texture=overlay-b25-o10}} {{ItemBox|itemName=Bullet Armor|texture=overlay-b25-o10}} {{ItemBox|itemName=Cheat Death|texture=overlay-b25-o10}} {{ItemBox|itemName=Colossus|texture=overlay-b25-o10}} {{ItemBox|itemName=Crippling Headshot|texture=overlay-b25-o10}} {{ItemBox|itemName=Divine Barrier|texture=overlay-b25-o10}} {{ItemBox|itemName=Echo Shard|texture=overlay-b25-o10}}&lt;br /&gt;
&lt;br /&gt;
== File 2 (alpha 02) ==&lt;br /&gt;
{{ItemBox|itemName=Active Reload|texture=overlay2-b25-o10}} {{ItemBox|itemName=Alchemical Fire|texture=overlay2-b25-o10}} {{ItemBox|itemName=Arctic Blast|texture=overlay2-b25-o10}} {{ItemBox|itemName=Berserker|texture=overlay2-b25-o10}} {{ItemBox|itemName=Bullet Armor|texture=overlay2-b25-o10}} {{ItemBox|itemName=Cheat Death|texture=overlay2-b25-o10}} {{ItemBox|itemName=Colossus|texture=overlay2-b25-o10}} {{ItemBox|itemName=Crippling Headshot|texture=overlay2-b25-o10}} {{ItemBox|itemName=Divine Barrier|texture=overlay2-b25-o10}} {{ItemBox|itemName=Echo Shard|texture=overlay2-b25-o10}}&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox?diff=99990</id>
		<title>Template:ItemBox</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox?diff=99990"/>
		<updated>2026-07-24T23:24:58Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Add overlay-b25-o10 and overlay2-b25-o10 (file 2) switch values for finetuning (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;templatestyles src=&amp;quot;Template:ItemBox/styles.css&amp;quot; /&amp;gt;&amp;lt;includeonly&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{#vardefine:itemName|{{{itemName|{{{1}}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Display name: Lang string for the codename, else the raw name, then override.&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#invoke:Lang|get_string|{{#invoke:ItemData|get_codename|{{#var:itemName}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#if:{{#var:displayName}}|{{#var:displayName}}|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Measured name size (em) and stable per-item texture variety.&lt;br /&gt;
--&amp;gt;{{#vardefine:fontSize|{{#invoke:ItemBox|getFontSize|{{#var:displayName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Modifier classes: slot (Weapon/Armor/Tech from data, or Weapon/Vitality/Spirit override -&amp;gt; weapon/vitality/spirit), tier, tags.&lt;br /&gt;
--&amp;gt;{{#vardefine:slot|{{#switch:{{{overrideSlot|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Slot}}}}}|Weapon=itembox-weapon|Armor|Vitality=itembox-vitality|Tech|Spirit=itembox-spirit}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:tier|itembox-tier-{{{overrideTier|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Tier}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:showTierTag|{{#ifeq:{{{showTierTag|}}}|true|itembox-show-tier}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{{overrideIsActive|{{#invoke:ItemData|is_active|{{#var:itemName}}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{#ifeq:{{#var:isActive}}|true|itembox-active}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{{overrideIsImbue|{{#invoke:ItemData|get_prop|{{#var:itemName}}|IsImbue}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     lowGraphics=true is the setting for callers that place dozens of cards on&lt;br /&gt;
     one page. It drops the paper texture, because every way of drawing it as a&lt;br /&gt;
     multiply blends two images together, and WebRender re-rasterises any such&lt;br /&gt;
     blend on every scrolled frame instead of caching it as a static tile. On the&lt;br /&gt;
     profiled navbox that blend was the whole cost: dropping it took the render&lt;br /&gt;
     thread&#039;s OpenGL work from ~230 ms/s to ~10 and roughly doubled the frame&lt;br /&gt;
     rate. The wear and icon masks are clips of a single image, not blends of&lt;br /&gt;
     two, so they cache once rasterised and are kept at full detail here. A&lt;br /&gt;
     transparent-paper overlay (texture=overlay) may replace the dropped texture&lt;br /&gt;
     once its scroll profile is confirmed.&lt;br /&gt;
--&amp;gt;{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-no-texture}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     The same layers individually, for testing combinations or overriding the&lt;br /&gt;
     bundle above. wearMask drops the mask from the wear tint three ways:&lt;br /&gt;
     no   - tint moves behind the artwork, so only the card stock is coloured&lt;br /&gt;
     ramp - tint stays on top, fading in from the card&#039;s edges&lt;br /&gt;
     soft - tint stays on top, uniform and lighter, with the name lifted clear&lt;br /&gt;
     texture handles the paper grain:&lt;br /&gt;
     no    - drop it entirely&lt;br /&gt;
     1/2/3 - one shared paper via the mix-blend overlay (does not cache)&lt;br /&gt;
     blend / blend1..3 - paper multiplied into the card art (does not cache)&lt;br /&gt;
     overlay - transparent-background paper dropped on top as a plain image;&lt;br /&gt;
             caches, covers the whole card, closest to the original. Strength&lt;br /&gt;
             presets: overlay-soft (0.6), overlay-o30, overlay-o20, overlay-o10,&lt;br /&gt;
             overlay-o05. Darkened-grain grid overlay-bBB-oOO (brightness .BB,&lt;br /&gt;
             opacity .OO) so the grain deepens dark cards rather than lightening.&lt;br /&gt;
             Append the second alpha file with overlay2-b25-o10.&lt;br /&gt;
     mask / mask-soft / mask-crisp / mask-crisp-soft - dead ends kept for&lt;br /&gt;
             reference; they fake the paper from the opaque PNGs and look wrong&lt;br /&gt;
--&amp;gt;{{#vardefine:lite|{{#switch:{{{wearMask|}}}|no=itembox-flat-wear|ramp=itembox-ramp-wear|soft=itembox-soft-wear}} {{#ifeq:{{{iconMask|}}}|no|itembox-flat-icon}} {{#switch:{{{texture|}}}|no=itembox-no-texture|1=itembox-force-tex-1|2=itembox-force-tex-2|3=itembox-force-tex-3|blend=itembox-blend-texture|blend1=itembox-blend-texture itembox-blend-tex-1|blend2=itembox-blend-texture itembox-blend-tex-2|blend3=itembox-blend-texture itembox-blend-tex-3|overlay=itembox-over-texture|overlay-soft=itembox-over-texture itembox-over-soft|overlay-o30=itembox-over-texture itembox-over-o30|overlay-o20=itembox-over-texture itembox-over-o20|overlay-o10=itembox-over-texture itembox-over-o10|overlay-o05=itembox-over-texture itembox-over-o05|overlay-b20-o40=itembox-over-texture itembox-over-b20-o40|overlay-b20-o60=itembox-over-texture itembox-over-b20-o60|overlay-b20-o80=itembox-over-texture itembox-over-b20-o80|overlay-b25-o10=itembox-over-texture itembox-over-b25-o10|overlay2-b25-o10=itembox-over-texture itembox-over-b25-o10 itembox-over-file2|overlay-b35-o40=itembox-over-texture itembox-over-b35-o40|overlay-b35-o60=itembox-over-texture itembox-over-b35-o60|overlay-b35-o80=itembox-over-texture itembox-over-b35-o80|overlay-b35-o100=itembox-over-texture itembox-over-b35-o100|overlay-b50-o60=itembox-over-texture itembox-over-b50-o60|overlay-b50-o80=itembox-over-texture itembox-over-b50-o80|overlay-b50-o100=itembox-over-texture itembox-over-b50-o100|mask=itembox-mask-texture itembox-mask-any-texture|mask-soft=itembox-mask-soft-texture itembox-mask-any-texture|mask-crisp=itembox-mask-crisp-texture itembox-mask-any-texture|mask-crisp-soft=itembox-mask-crisp-soft-texture itembox-mask-any-texture}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Links.&lt;br /&gt;
--&amp;gt;{{#vardefine:linkTooltip|{{{overrideLinkTooltip|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkImage|{{{overrideLinkImage|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
--&amp;gt;&amp;lt;div class=&amp;quot;itembox {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}} {{#var:variants}} {{#var:lowGraphics}} {{#var:lite}}&amp;quot; style=&amp;quot;font-size:{{#expr: 10 * {{#if:{{{size|}}}|{{{size}}}|1}} }}px;&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;itembox-background&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;div class=&amp;quot;itembox-card&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-icon-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-icon&amp;quot;&amp;gt;[[File:{{#var:linkImage}}.png|160px|link=]]&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-tier-badge&amp;quot;&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-shadow&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-fill&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-number&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-imbue-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_imbue}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-name-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;p class=&amp;quot;itembox-name&amp;quot; style=&amp;quot;font-size:{{#var:fontSize}}em;text-wrap:balance;&amp;quot;&amp;gt;{{#var:displayName}}&amp;lt;/p&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-wear&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-texture&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-bevel&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-active-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_active}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-outline&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
		&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;item-link-wrapper&amp;quot; data-item-name=&amp;quot;{{#var:linkTooltip}}&amp;quot;&amp;gt;[[{{#var:linkClick}}|&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;]]&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&amp;lt;/includeonly&amp;gt;&amp;lt;noinclude&amp;gt;{{Documentation}}&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox/styles.css?diff=99989</id>
		<title>Template:ItemBox/styles.css</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox/styles.css?diff=99989"/>
		<updated>2026-07-24T23:24:09Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Add overlay b25-o10 preset and a file2 helper to switch the alpha paper source (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
&lt;br /&gt;
/* The whole card scales off one knob: font-size on .itembox (1em = 10px base) */&lt;br /&gt;
.itembox,&lt;br /&gt;
.itembox * {&lt;br /&gt;
    margin: 0;&lt;br /&gt;
    padding: 0;&lt;br /&gt;
    border: 0;&lt;br /&gt;
    box-sizing: border-box;&lt;br /&gt;
}&lt;br /&gt;
.itembox {&lt;br /&gt;
    --itembox-ink: #10130D;&lt;br /&gt;
    --itembox-weapon: #EC981a;&lt;br /&gt;
    --itembox-vitality: #7CBB1E;&lt;br /&gt;
    --itembox-spirit: #CE91FF;&lt;br /&gt;
    --itembox-imbue-fg: #E8C9FF;&lt;br /&gt;
    --itembox-imbue-bg: #623585;&lt;br /&gt;
    --itembox-wear-tint: #ffffff;&lt;br /&gt;
    --itembox-wear-ramp: 75%;&lt;br /&gt;
    --itembox-card-image: none;&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
    --itembox-paper-alpha: url(&#039;/images/c/c7/Shopitem_papertexture_alpha_01.png&#039;);&lt;br /&gt;
    --itembox-tex-mask-opacity: 0.55;&lt;br /&gt;
    --itembox-tex-overlay-opacity: 1;&lt;br /&gt;
    --itembox-font: &#039;Retail Demo&#039;, sans-serif;&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: inline-block;&lt;br /&gt;
    font-size: 10px;&lt;br /&gt;
    width: 8em;&lt;br /&gt;
    height: 12.5em;&lt;br /&gt;
    border-radius: 0.6em;&lt;br /&gt;
    box-shadow: 0.2em 0.2em 1.2em #00000097;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
    transition-duration: 0.1s;&lt;br /&gt;
    transition-property: opacity, transform, filter;&lt;br /&gt;
}&lt;br /&gt;
.itembox-background {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    pointer-events: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-card {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-image: var(--itembox-card-image);&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    /* Confines mix-blend-mode below to the card. Without it the blend group&lt;br /&gt;
       reaches the page backdrop and the card cannot be cached as one layer. */&lt;br /&gt;
    isolation: isolate;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Card art is held in a variable so the blend mode below can compose paper&lt;br /&gt;
   against it on the same element. The pairs collapse: T5 reuses the T4 image. */&lt;br /&gt;
.itembox-tier-1.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/3/3e/Weapon_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/9/96/Weapon_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/5/5d/Weapon_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-weapon,&lt;br /&gt;
.itembox-tier-5.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/a6/Weapon_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/7/75/Armor_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/0/05/Armor_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/7/7c/Armor_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-vitality,&lt;br /&gt;
.itembox-tier-5.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/1/18/Armor_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/af/Tech_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/ac/Tech_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/6/67/Tech_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-spirit,&lt;br /&gt;
.itembox-tier-5.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/f/f5/Tech_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-icon-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    align-items: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    aspect-ratio: 1 / 1;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    background-repeat: no-repeat;&lt;br /&gt;
    mask-size: cover;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon &amp;gt; span,&lt;br /&gt;
.itembox-icon &amp;gt; span &amp;gt; span,&lt;br /&gt;
.itembox-icon picture {&lt;br /&gt;
    display: block;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon img {&lt;br /&gt;
    display: block;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    max-width: 100%;&lt;br /&gt;
    max-height: 100%;&lt;br /&gt;
    object-fit: cover;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-icon-v1 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/1/10/Icon_mask01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon-v2 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/6/6f/Icon_mask02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon-v3 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/9/96/Icon_mask03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-badge {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0;&lt;br /&gt;
    right: 0;&lt;br /&gt;
    width: 2.8em;&lt;br /&gt;
    height: 2.8em;&lt;br /&gt;
    transform: scale(1.4);&lt;br /&gt;
    transform-origin: top right;&lt;br /&gt;
    /* display:none rather than visibility:hidden so the badge and its&lt;br /&gt;
       drop-shadow() cost nothing on the cards that never show it. */&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-show-tier .itembox-tier-badge {&lt;br /&gt;
    display: block;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-badge-fill {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    mask-size: 2.2em;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-position: right 0;&lt;br /&gt;
    mask-image: url(&#039;/images/6/61/Tier_corner_cap.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-badge-shadow {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0;&lt;br /&gt;
    left: 0;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-size: 2.2em;&lt;br /&gt;
    background-repeat: no-repeat;&lt;br /&gt;
    background-position: right 0;&lt;br /&gt;
    background-image: url(&#039;/images/6/61/Tier_corner_cap.svg&#039;);&lt;br /&gt;
    filter: drop-shadow(-0.4em 0 0.6em #000000ff);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-weapon .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-weapon);&lt;br /&gt;
}&lt;br /&gt;
.itembox-vitality .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-vitality);&lt;br /&gt;
}&lt;br /&gt;
.itembox-spirit .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-spirit);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-badge-number {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    right: 0;&lt;br /&gt;
    top: 0.3em;&lt;br /&gt;
    height: 0.8em;&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.5em;&lt;br /&gt;
    right: 0.4em;&lt;br /&gt;
    mask-image: url(&#039;/images/2/24/Tier_numbers_small_01.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.7em;&lt;br /&gt;
    right: 0.3em;&lt;br /&gt;
    mask-image: url(&#039;/images/7/74/Tier_numbers_small_02.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.9em;&lt;br /&gt;
    right: 0.2em;&lt;br /&gt;
    mask-image: url(&#039;/images/5/54/Tier_numbers_small_03.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4 .itembox-tier-badge-number {&lt;br /&gt;
    width: 1.1em;&lt;br /&gt;
    mask-image: url(&#039;/images/c/c6/Tier_numbers_small_04.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-5 .itembox-tier-badge-number {&lt;br /&gt;
    width: 1.1em;&lt;br /&gt;
    right: 0.1em;&lt;br /&gt;
    mask-image: url(&#039;/images/8/81/Tier_numbers_small_05.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-imbue-tag {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    bottom: 0;&lt;br /&gt;
    display: none;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: fit-content;&lt;br /&gt;
    font-size: 1.2em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    line-height: normal;&lt;br /&gt;
    letter-spacing: 0.1em;&lt;br /&gt;
    white-space: nowrap;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    text-transform: uppercase;&lt;br /&gt;
    border-radius: 0.2em;&lt;br /&gt;
    padding: 0 0.3em;&lt;br /&gt;
    color: var(--itembox-imbue-fg);&lt;br /&gt;
    background-color: var(--itembox-imbue-bg);&lt;br /&gt;
}&lt;br /&gt;
.itembox-imbue .itembox-imbue-tag {&lt;br /&gt;
    display: flex;&lt;br /&gt;
}&lt;br /&gt;
.itembox-active.itembox-imbue .itembox-imbue-tag {&lt;br /&gt;
    justify-content: start;&lt;br /&gt;
    height: 2.2em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-name-area {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 4.5em;&lt;br /&gt;
    padding: 0.5em 0.4em;&lt;br /&gt;
}&lt;br /&gt;
.itembox-name {&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    line-height: 1.2;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    font-size: 1.5em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    color: var(--itembox-ink);&lt;br /&gt;
    overflow-wrap: normal;&lt;br /&gt;
    word-break: normal;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-4.itembox-weapon .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-weapon .itembox-name {&lt;br /&gt;
    color: #e4c5a1;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-vitality .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-vitality .itembox-name {&lt;br /&gt;
    color: #c2e7cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-spirit .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-spirit .itembox-name {&lt;br /&gt;
    color: #e3d4f2;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-wear {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    opacity: 0.7;&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    background-color: white;&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v1 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/8/8f/Card_PaperWear_1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v2 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/1/11/Card_PaperWear_2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v3 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/8/89/Card_PaperWear_3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v4 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/5/52/Card_PaperWear_4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-1.itembox-vitality .itembox-wear {&lt;br /&gt;
    opacity: 1;&lt;br /&gt;
    background-color: #f4e2cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit .itembox-wear {&lt;br /&gt;
    opacity: 1;&lt;br /&gt;
    background-color: rgb(247, 232, 213);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 .itembox-wear {&lt;br /&gt;
    background-color: rgb(230, 209, 191);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 .itembox-wear {&lt;br /&gt;
    background-color: rgb(206, 173, 155);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4 .itembox-wear,&lt;br /&gt;
.itembox-tier-5 .itembox-wear {&lt;br /&gt;
    background-color: rgb(105, 97, 92);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Same tier colours again as a custom property. A gradient cannot read&lt;br /&gt;
   background-color, so the ramp variant below needs them in this form. */&lt;br /&gt;
.itembox-tier-1.itembox-vitality {&lt;br /&gt;
    --itembox-wear-tint: #f4e2cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit {&lt;br /&gt;
    --itembox-wear-tint: rgb(247, 232, 213);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 {&lt;br /&gt;
    --itembox-wear-tint: rgb(230, 209, 191);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 {&lt;br /&gt;
    --itembox-wear-tint: rgb(206, 173, 155);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4,&lt;br /&gt;
.itembox-tier-5 {&lt;br /&gt;
    --itembox-wear-tint: rgb(105, 97, 92);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-texture {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-size: 100% 100%;&lt;br /&gt;
    mix-blend-mode: multiply;&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v1 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v2 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v3 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Overrides the per-item texture so every card shares one image, which keeps a&lt;br /&gt;
   single paper texture resident in the GPU cache instead of three. Higher&lt;br /&gt;
   specificity than the hashed classes above, so it wins regardless of which&lt;br /&gt;
   variant the item&#039;s name landed on. */&lt;br /&gt;
.itembox.itembox-force-tex-1 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-force-tex-2 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-force-tex-3 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Two hairlines at ~13% alpha: screen and normal blending land within ~2% of&lt;br /&gt;
   each other here, so the blend mode is dropped and the layer stays cheap. */&lt;br /&gt;
.itembox-bevel {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    border-left: 0.1em solid #ffcc6622;&lt;br /&gt;
    border-top: 0.1em solid #ffcc6622;&lt;br /&gt;
    background-size: 100% 100%;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-active-tag {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    bottom: 3.5em;&lt;br /&gt;
    display: none;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    align-self: center;&lt;br /&gt;
    width: fit-content;&lt;br /&gt;
    height: fit-content;&lt;br /&gt;
    font-size: 1.1em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    line-height: normal;&lt;br /&gt;
    letter-spacing: 0;&lt;br /&gt;
    white-space: nowrap;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    text-transform: uppercase;&lt;br /&gt;
    border-radius: 0.2em;&lt;br /&gt;
    padding: 0.1em 0.6em;&lt;br /&gt;
    box-shadow: 0 0 1.5em #000000ff;&lt;br /&gt;
    color: #ffefd7b3;&lt;br /&gt;
    background-color: #171717;&lt;br /&gt;
}&lt;br /&gt;
.itembox-active .itembox-active-tag {&lt;br /&gt;
    display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox .item-link-wrapper,&lt;br /&gt;
.itembox .item-link-wrapper &amp;gt; a {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    display: block;&lt;br /&gt;
    inset: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* ---------------------------------------------------------------------------&lt;br /&gt;
   Opt-in simplifications, set through the parameters on [[Template:ItemBox]].&lt;br /&gt;
   Each removes work the GPU repeats for every card on screen: a masked element&lt;br /&gt;
   costs an extra render pass, and mix-blend-mode costs a backdrop read. Callers&lt;br /&gt;
   that place dozens of cards at once can trade the paper detail for the frames.&lt;br /&gt;
   --------------------------------------------------------------------------- */&lt;br /&gt;
&lt;br /&gt;
/* The wear patterns are concentrated at the card&#039;s edges and largely clear in&lt;br /&gt;
   the middle, so a gradient can stand in for the mask: transparent through the&lt;br /&gt;
   centre, tint gathering at the border. --itembox-wear-ramp is where the&lt;br /&gt;
   falloff starts and is the one value worth tuning. The name is lifted clear so&lt;br /&gt;
   no amount of tint ever lands on the glyphs; the paper behind them still&lt;br /&gt;
   takes it, since the name area has no background of its own. Gradients are a&lt;br /&gt;
   native primitive, so this costs no extra render pass.  */&lt;br /&gt;
.itembox.itembox-ramp-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    background-color: transparent;&lt;br /&gt;
    background-image: radial-gradient(ellipse at 50% 45%, transparent var(--itembox-wear-ramp), var(--itembox-wear-tint) 100%);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-ramp-wear .itembox-name-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    z-index: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Kept for comparison against the ramp; drop whichever loses.&lt;br /&gt;
   flat - tint moves behind the artwork, colouring only the card stock&lt;br /&gt;
   soft - tint stays on top, uniform and lighter, name lifted clear */&lt;br /&gt;
.itembox.itembox-flat-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    z-index: -1;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-soft-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    opacity: 0.35;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-soft-wear .itembox-name-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    z-index: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-flat-icon .itembox-icon {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-no-texture .itembox-texture {&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* ---- Transparent-paper overlay (the good one) --------------------------&lt;br /&gt;
   The paper redrawn as dark grain on a TRANSPARENT field, dropped straight on&lt;br /&gt;
   top of the card as a plain image. No blend, no mask: the grain pixels show,&lt;br /&gt;
   the gaps show nothing, and because it is a single image being alpha-&lt;br /&gt;
   composited (not two colours combined) WebRender caches the card as a static&lt;br /&gt;
   tile and scrolling stays smooth. It reaches the whole card including the icon&lt;br /&gt;
   and text area.&lt;br /&gt;
&lt;br /&gt;
   Two levers, both single-image so both keep caching: opacity (how much grain&lt;br /&gt;
   shows) and brightness (how dark the grain&#039;s pixels are; below 1 it deepens&lt;br /&gt;
   the card the way the old multiply did). TemplateStyles rejects a variable&lt;br /&gt;
   inside filter(), so the brightness/opacity pairs below are fixed presets&lt;br /&gt;
   named -bBB-oOO (brightness .BB, opacity .OO). --itembox-paper-alpha is the&lt;br /&gt;
   image; the -file2 helper points it at the second upload for A/B tuning. */&lt;br /&gt;
.itembox.itembox-over-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: var(--itembox-paper-alpha);&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    opacity: var(--itembox-tex-overlay-opacity);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-over-file2 {&lt;br /&gt;
    --itembox-paper-alpha: url(&#039;/images/2/2a/Shopitem_papertexture_alpha_02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-over-soft { --itembox-tex-overlay-opacity: 0.6; }&lt;br /&gt;
.itembox.itembox-over-o30 { --itembox-tex-overlay-opacity: 0.3; }&lt;br /&gt;
.itembox.itembox-over-o20 { --itembox-tex-overlay-opacity: 0.2; }&lt;br /&gt;
.itembox.itembox-over-o10 { --itembox-tex-overlay-opacity: 0.1; }&lt;br /&gt;
.itembox.itembox-over-o05 { --itembox-tex-overlay-opacity: 0.05; }&lt;br /&gt;
&lt;br /&gt;
/* Brightness x opacity presets. */&lt;br /&gt;
.itembox.itembox-over-b20-o40 .itembox-texture { filter: brightness(0.2); opacity: 0.4; }&lt;br /&gt;
.itembox.itembox-over-b20-o60 .itembox-texture { filter: brightness(0.2); opacity: 0.6; }&lt;br /&gt;
.itembox.itembox-over-b20-o80 .itembox-texture { filter: brightness(0.2); opacity: 0.8; }&lt;br /&gt;
.itembox.itembox-over-b25-o10 .itembox-texture { filter: brightness(0.25); opacity: 0.1; }&lt;br /&gt;
.itembox.itembox-over-b35-o40 .itembox-texture { filter: brightness(0.35); opacity: 0.4; }&lt;br /&gt;
.itembox.itembox-over-b35-o60 .itembox-texture { filter: brightness(0.35); opacity: 0.6; }&lt;br /&gt;
.itembox.itembox-over-b35-o80 .itembox-texture { filter: brightness(0.35); opacity: 0.8; }&lt;br /&gt;
.itembox.itembox-over-b35-o100 .itembox-texture { filter: brightness(0.35); opacity: 1; }&lt;br /&gt;
.itembox.itembox-over-b50-o60 .itembox-texture { filter: brightness(0.5); opacity: 0.6; }&lt;br /&gt;
.itembox.itembox-over-b50-o80 .itembox-texture { filter: brightness(0.5); opacity: 0.8; }&lt;br /&gt;
.itembox.itembox-over-b50-o100 .itembox-texture { filter: brightness(0.5); opacity: 1; }&lt;br /&gt;
&lt;br /&gt;
/* Paper multiplied against the card art on the SAME element. Unlike&lt;br /&gt;
   mix-blend-mode (which reads the page backdrop and so cannot be cached),&lt;br /&gt;
   background-blend-mode blends the element&#039;s own layers, which WebRender keeps&lt;br /&gt;
   as a static tile — the whole point of the exercise. The separate .itembox-&lt;br /&gt;
   texture div is switched off since the paper now lives in the card layer.&lt;br /&gt;
   Caveat: this only reaches the card art, not the icon or the name, which are&lt;br /&gt;
   real content above the background rather than layers of it. --itembox-paper&lt;br /&gt;
   selects which of the three papers to use. */&lt;br /&gt;
.itembox.itembox-blend-texture .itembox-card {&lt;br /&gt;
    background-image: var(--itembox-paper), var(--itembox-card-image);&lt;br /&gt;
    background-size: cover, cover;&lt;br /&gt;
    background-blend-mode: multiply, normal;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture .itembox-texture {&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Per-item blend: read the paper from the item&#039;s own hashed texture-vN class,&lt;br /&gt;
   so blended cards keep the same variety the overlay had. The forced classes&lt;br /&gt;
   below outrank these when a single shared paper is wanted instead. */&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Forced single paper for the blend, e.g. from lowGraphics. */&lt;br /&gt;
.itembox.itembox-blend-tex-1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-tex-2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-tex-3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* ---- Masked paper (dead ends, kept for reference) -----------------------&lt;br /&gt;
   Attempts to fake the multiply from the opaque dark-on-white PNGs by masking a&lt;br /&gt;
   dark tint. The plain luminance mask keeps the white and floods the card; the&lt;br /&gt;
   inverted -crisp version keeps the whole field bright and washes it out. Both&lt;br /&gt;
   were rejected on looks. The transparent overlay above replaced them. */&lt;br /&gt;
.itembox.itembox-mask-crisp-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: none;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
    opacity: var(--itembox-tex-mask-opacity);&lt;br /&gt;
    mask-image: var(--itembox-paper);&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
    filter: invert(1);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-crisp-soft-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: none;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
    opacity: 0.75;&lt;br /&gt;
    mask-image: var(--itembox-paper);&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
    filter: invert(1);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: none;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
    opacity: var(--itembox-tex-mask-opacity);&lt;br /&gt;
    mask-image: var(--itembox-paper);&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-soft-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: none;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
    opacity: 0.3;&lt;br /&gt;
    mask-image: var(--itembox-paper);&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
}&lt;br /&gt;
/* Per-item paper for the masked variants, read from the hashed class. */&lt;br /&gt;
.itembox.itembox-mask-any-texture.itembox-texture-v1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-any-texture.itembox-texture-v2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-any-texture.itembox-texture-v3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Skipping offscreen cards only pays for itself when many are on screen at&lt;br /&gt;
   once. On narrow viewports about ten fit, so the saving is small while cards&lt;br /&gt;
   crossing the boundary force constant display list rebuilds — measured at&lt;br /&gt;
   roughly half the frame rate on Android with this enabled. */&lt;br /&gt;
@media (min-width: 900px) {&lt;br /&gt;
    .itembox {&lt;br /&gt;
        content-visibility: auto;&lt;br /&gt;
        contain-intrinsic-size: 8em 12.5em;&lt;br /&gt;
    }&lt;br /&gt;
}&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/User:Vergir?diff=99982</id>
		<title>User:Vergir</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/User:Vergir?diff=99982"/>
		<updated>2026-07-24T23:00:42Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Show the 10-cell overlay brightness x opacity grid against baseline for tuning (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
&lt;br /&gt;
= Holliday =&lt;br /&gt;
{{HeroStreetBrawlItems|Holliday|id=sb-items-holliday}}&lt;br /&gt;
&lt;br /&gt;
= Vindicta (has counter items) =&lt;br /&gt;
{{HeroStreetBrawlItems|Vindicta|id=sb-items-vindicta}}&lt;br /&gt;
&lt;br /&gt;
= ItemBox overlay grid =&lt;br /&gt;
&lt;br /&gt;
Darkened-grain transparent overlay, ten combinations of grain brightness (lower = darker grain, deepens the card more) and opacity (how much shows). Baseline first for reference. Pick the cell that best matches baseline&#039;s feel; tell me the b/o label and I will wire it into lowGraphics and profile it.&lt;br /&gt;
&lt;br /&gt;
== Baseline ==&lt;br /&gt;
{{ItemBox|itemName=Active Reload}} {{ItemBox|itemName=Alchemical Fire}} {{ItemBox|itemName=Arctic Blast}} {{ItemBox|itemName=Berserker}} {{ItemBox|itemName=Bullet Armor}} {{ItemBox|itemName=Cheat Death}} {{ItemBox|itemName=Colossus}} {{ItemBox|itemName=Crippling Headshot}} {{ItemBox|itemName=Divine Barrier}} {{ItemBox|itemName=Echo Shard}}&lt;br /&gt;
&lt;br /&gt;
== b0.20 / o0.40 ==&lt;br /&gt;
{{ItemBox|itemName=Active Reload|texture=overlay-b20-o40}} {{ItemBox|itemName=Alchemical Fire|texture=overlay-b20-o40}} {{ItemBox|itemName=Arctic Blast|texture=overlay-b20-o40}} {{ItemBox|itemName=Berserker|texture=overlay-b20-o40}} {{ItemBox|itemName=Bullet Armor|texture=overlay-b20-o40}} {{ItemBox|itemName=Cheat Death|texture=overlay-b20-o40}} {{ItemBox|itemName=Colossus|texture=overlay-b20-o40}} {{ItemBox|itemName=Crippling Headshot|texture=overlay-b20-o40}} {{ItemBox|itemName=Divine Barrier|texture=overlay-b20-o40}} {{ItemBox|itemName=Echo Shard|texture=overlay-b20-o40}}&lt;br /&gt;
&lt;br /&gt;
== b0.20 / o0.60 ==&lt;br /&gt;
{{ItemBox|itemName=Active Reload|texture=overlay-b20-o60}} {{ItemBox|itemName=Alchemical Fire|texture=overlay-b20-o60}} {{ItemBox|itemName=Arctic Blast|texture=overlay-b20-o60}} {{ItemBox|itemName=Berserker|texture=overlay-b20-o60}} {{ItemBox|itemName=Bullet Armor|texture=overlay-b20-o60}} {{ItemBox|itemName=Cheat Death|texture=overlay-b20-o60}} {{ItemBox|itemName=Colossus|texture=overlay-b20-o60}} {{ItemBox|itemName=Crippling Headshot|texture=overlay-b20-o60}} {{ItemBox|itemName=Divine Barrier|texture=overlay-b20-o60}} {{ItemBox|itemName=Echo Shard|texture=overlay-b20-o60}}&lt;br /&gt;
&lt;br /&gt;
== b0.20 / o0.80 ==&lt;br /&gt;
{{ItemBox|itemName=Active Reload|texture=overlay-b20-o80}} {{ItemBox|itemName=Alchemical Fire|texture=overlay-b20-o80}} {{ItemBox|itemName=Arctic Blast|texture=overlay-b20-o80}} {{ItemBox|itemName=Berserker|texture=overlay-b20-o80}} {{ItemBox|itemName=Bullet Armor|texture=overlay-b20-o80}} {{ItemBox|itemName=Cheat Death|texture=overlay-b20-o80}} {{ItemBox|itemName=Colossus|texture=overlay-b20-o80}} {{ItemBox|itemName=Crippling Headshot|texture=overlay-b20-o80}} {{ItemBox|itemName=Divine Barrier|texture=overlay-b20-o80}} {{ItemBox|itemName=Echo Shard|texture=overlay-b20-o80}}&lt;br /&gt;
&lt;br /&gt;
== b0.35 / o0.40 ==&lt;br /&gt;
{{ItemBox|itemName=Active Reload|texture=overlay-b35-o40}} {{ItemBox|itemName=Alchemical Fire|texture=overlay-b35-o40}} {{ItemBox|itemName=Arctic Blast|texture=overlay-b35-o40}} {{ItemBox|itemName=Berserker|texture=overlay-b35-o40}} {{ItemBox|itemName=Bullet Armor|texture=overlay-b35-o40}} {{ItemBox|itemName=Cheat Death|texture=overlay-b35-o40}} {{ItemBox|itemName=Colossus|texture=overlay-b35-o40}} {{ItemBox|itemName=Crippling Headshot|texture=overlay-b35-o40}} {{ItemBox|itemName=Divine Barrier|texture=overlay-b35-o40}} {{ItemBox|itemName=Echo Shard|texture=overlay-b35-o40}}&lt;br /&gt;
&lt;br /&gt;
== b0.35 / o0.60 (was section 2) ==&lt;br /&gt;
{{ItemBox|itemName=Active Reload|texture=overlay-b35-o60}} {{ItemBox|itemName=Alchemical Fire|texture=overlay-b35-o60}} {{ItemBox|itemName=Arctic Blast|texture=overlay-b35-o60}} {{ItemBox|itemName=Berserker|texture=overlay-b35-o60}} {{ItemBox|itemName=Bullet Armor|texture=overlay-b35-o60}} {{ItemBox|itemName=Cheat Death|texture=overlay-b35-o60}} {{ItemBox|itemName=Colossus|texture=overlay-b35-o60}} {{ItemBox|itemName=Crippling Headshot|texture=overlay-b35-o60}} {{ItemBox|itemName=Divine Barrier|texture=overlay-b35-o60}} {{ItemBox|itemName=Echo Shard|texture=overlay-b35-o60}}&lt;br /&gt;
&lt;br /&gt;
== b0.35 / o0.80 ==&lt;br /&gt;
{{ItemBox|itemName=Active Reload|texture=overlay-b35-o80}} {{ItemBox|itemName=Alchemical Fire|texture=overlay-b35-o80}} {{ItemBox|itemName=Arctic Blast|texture=overlay-b35-o80}} {{ItemBox|itemName=Berserker|texture=overlay-b35-o80}} {{ItemBox|itemName=Bullet Armor|texture=overlay-b35-o80}} {{ItemBox|itemName=Cheat Death|texture=overlay-b35-o80}} {{ItemBox|itemName=Colossus|texture=overlay-b35-o80}} {{ItemBox|itemName=Crippling Headshot|texture=overlay-b35-o80}} {{ItemBox|itemName=Divine Barrier|texture=overlay-b35-o80}} {{ItemBox|itemName=Echo Shard|texture=overlay-b35-o80}}&lt;br /&gt;
&lt;br /&gt;
== b0.35 / o1.00 ==&lt;br /&gt;
{{ItemBox|itemName=Active Reload|texture=overlay-b35-o100}} {{ItemBox|itemName=Alchemical Fire|texture=overlay-b35-o100}} {{ItemBox|itemName=Arctic Blast|texture=overlay-b35-o100}} {{ItemBox|itemName=Berserker|texture=overlay-b35-o100}} {{ItemBox|itemName=Bullet Armor|texture=overlay-b35-o100}} {{ItemBox|itemName=Cheat Death|texture=overlay-b35-o100}} {{ItemBox|itemName=Colossus|texture=overlay-b35-o100}} {{ItemBox|itemName=Crippling Headshot|texture=overlay-b35-o100}} {{ItemBox|itemName=Divine Barrier|texture=overlay-b35-o100}} {{ItemBox|itemName=Echo Shard|texture=overlay-b35-o100}}&lt;br /&gt;
&lt;br /&gt;
== b0.50 / o0.60 ==&lt;br /&gt;
{{ItemBox|itemName=Active Reload|texture=overlay-b50-o60}} {{ItemBox|itemName=Alchemical Fire|texture=overlay-b50-o60}} {{ItemBox|itemName=Arctic Blast|texture=overlay-b50-o60}} {{ItemBox|itemName=Berserker|texture=overlay-b50-o60}} {{ItemBox|itemName=Bullet Armor|texture=overlay-b50-o60}} {{ItemBox|itemName=Cheat Death|texture=overlay-b50-o60}} {{ItemBox|itemName=Colossus|texture=overlay-b50-o60}} {{ItemBox|itemName=Crippling Headshot|texture=overlay-b50-o60}} {{ItemBox|itemName=Divine Barrier|texture=overlay-b50-o60}} {{ItemBox|itemName=Echo Shard|texture=overlay-b50-o60}}&lt;br /&gt;
&lt;br /&gt;
== b0.50 / o0.80 ==&lt;br /&gt;
{{ItemBox|itemName=Active Reload|texture=overlay-b50-o80}} {{ItemBox|itemName=Alchemical Fire|texture=overlay-b50-o80}} {{ItemBox|itemName=Arctic Blast|texture=overlay-b50-o80}} {{ItemBox|itemName=Berserker|texture=overlay-b50-o80}} {{ItemBox|itemName=Bullet Armor|texture=overlay-b50-o80}} {{ItemBox|itemName=Cheat Death|texture=overlay-b50-o80}} {{ItemBox|itemName=Colossus|texture=overlay-b50-o80}} {{ItemBox|itemName=Crippling Headshot|texture=overlay-b50-o80}} {{ItemBox|itemName=Divine Barrier|texture=overlay-b50-o80}} {{ItemBox|itemName=Echo Shard|texture=overlay-b50-o80}}&lt;br /&gt;
&lt;br /&gt;
== b0.50 / o1.00 ==&lt;br /&gt;
{{ItemBox|itemName=Active Reload|texture=overlay-b50-o100}} {{ItemBox|itemName=Alchemical Fire|texture=overlay-b50-o100}} {{ItemBox|itemName=Arctic Blast|texture=overlay-b50-o100}} {{ItemBox|itemName=Berserker|texture=overlay-b50-o100}} {{ItemBox|itemName=Bullet Armor|texture=overlay-b50-o100}} {{ItemBox|itemName=Cheat Death|texture=overlay-b50-o100}} {{ItemBox|itemName=Colossus|texture=overlay-b50-o100}} {{ItemBox|itemName=Crippling Headshot|texture=overlay-b50-o100}} {{ItemBox|itemName=Divine Barrier|texture=overlay-b50-o100}} {{ItemBox|itemName=Echo Shard|texture=overlay-b50-o100}}&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox?diff=99981</id>
		<title>Template:ItemBox</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox?diff=99981"/>
		<updated>2026-07-24T23:00:00Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Add the 10 overlay brightness x opacity grid switch values (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;templatestyles src=&amp;quot;Template:ItemBox/styles.css&amp;quot; /&amp;gt;&amp;lt;includeonly&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{#vardefine:itemName|{{{itemName|{{{1}}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Display name: Lang string for the codename, else the raw name, then override.&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#invoke:Lang|get_string|{{#invoke:ItemData|get_codename|{{#var:itemName}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#if:{{#var:displayName}}|{{#var:displayName}}|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Measured name size (em) and stable per-item texture variety.&lt;br /&gt;
--&amp;gt;{{#vardefine:fontSize|{{#invoke:ItemBox|getFontSize|{{#var:displayName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Modifier classes: slot (Weapon/Armor/Tech from data, or Weapon/Vitality/Spirit override -&amp;gt; weapon/vitality/spirit), tier, tags.&lt;br /&gt;
--&amp;gt;{{#vardefine:slot|{{#switch:{{{overrideSlot|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Slot}}}}}|Weapon=itembox-weapon|Armor|Vitality=itembox-vitality|Tech|Spirit=itembox-spirit}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:tier|itembox-tier-{{{overrideTier|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Tier}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:showTierTag|{{#ifeq:{{{showTierTag|}}}|true|itembox-show-tier}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{{overrideIsActive|{{#invoke:ItemData|is_active|{{#var:itemName}}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{#ifeq:{{#var:isActive}}|true|itembox-active}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{{overrideIsImbue|{{#invoke:ItemData|get_prop|{{#var:itemName}}|IsImbue}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     lowGraphics=true is the setting for callers that place dozens of cards on&lt;br /&gt;
     one page. It drops the paper texture, because every way of drawing it as a&lt;br /&gt;
     multiply blends two images together, and WebRender re-rasterises any such&lt;br /&gt;
     blend on every scrolled frame instead of caching it as a static tile. On the&lt;br /&gt;
     profiled navbox that blend was the whole cost: dropping it took the render&lt;br /&gt;
     thread&#039;s OpenGL work from ~230 ms/s to ~10 and roughly doubled the frame&lt;br /&gt;
     rate. The wear and icon masks are clips of a single image, not blends of&lt;br /&gt;
     two, so they cache once rasterised and are kept at full detail here. A&lt;br /&gt;
     transparent-paper overlay (texture=overlay) may replace the dropped texture&lt;br /&gt;
     once its scroll profile is confirmed.&lt;br /&gt;
--&amp;gt;{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-no-texture}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     The same layers individually, for testing combinations or overriding the&lt;br /&gt;
     bundle above. wearMask drops the mask from the wear tint three ways:&lt;br /&gt;
     no   - tint moves behind the artwork, so only the card stock is coloured&lt;br /&gt;
     ramp - tint stays on top, fading in from the card&#039;s edges&lt;br /&gt;
     soft - tint stays on top, uniform and lighter, with the name lifted clear&lt;br /&gt;
     texture handles the paper grain:&lt;br /&gt;
     no    - drop it entirely&lt;br /&gt;
     1/2/3 - one shared paper via the mix-blend overlay (does not cache)&lt;br /&gt;
     blend / blend1..3 - paper multiplied into the card art (does not cache)&lt;br /&gt;
     overlay - transparent-background paper dropped on top as a plain image;&lt;br /&gt;
             caches, covers the whole card, closest to the original. Strength&lt;br /&gt;
             presets: overlay-soft (0.6), overlay-o30, overlay-o20, overlay-o10,&lt;br /&gt;
             overlay-o05. Darkened-grain grid overlay-bBB-oOO (brightness .BB,&lt;br /&gt;
             opacity .OO) so the grain deepens dark cards rather than lightening.&lt;br /&gt;
     mask / mask-soft / mask-crisp / mask-crisp-soft - dead ends kept for&lt;br /&gt;
             reference; they fake the paper from the opaque PNGs and look wrong&lt;br /&gt;
--&amp;gt;{{#vardefine:lite|{{#switch:{{{wearMask|}}}|no=itembox-flat-wear|ramp=itembox-ramp-wear|soft=itembox-soft-wear}} {{#ifeq:{{{iconMask|}}}|no|itembox-flat-icon}} {{#switch:{{{texture|}}}|no=itembox-no-texture|1=itembox-force-tex-1|2=itembox-force-tex-2|3=itembox-force-tex-3|blend=itembox-blend-texture|blend1=itembox-blend-texture itembox-blend-tex-1|blend2=itembox-blend-texture itembox-blend-tex-2|blend3=itembox-blend-texture itembox-blend-tex-3|overlay=itembox-over-texture|overlay-soft=itembox-over-texture itembox-over-soft|overlay-o30=itembox-over-texture itembox-over-o30|overlay-o20=itembox-over-texture itembox-over-o20|overlay-o10=itembox-over-texture itembox-over-o10|overlay-o05=itembox-over-texture itembox-over-o05|overlay-b20-o40=itembox-over-texture itembox-over-b20-o40|overlay-b20-o60=itembox-over-texture itembox-over-b20-o60|overlay-b20-o80=itembox-over-texture itembox-over-b20-o80|overlay-b35-o40=itembox-over-texture itembox-over-b35-o40|overlay-b35-o60=itembox-over-texture itembox-over-b35-o60|overlay-b35-o80=itembox-over-texture itembox-over-b35-o80|overlay-b35-o100=itembox-over-texture itembox-over-b35-o100|overlay-b50-o60=itembox-over-texture itembox-over-b50-o60|overlay-b50-o80=itembox-over-texture itembox-over-b50-o80|overlay-b50-o100=itembox-over-texture itembox-over-b50-o100|mask=itembox-mask-texture itembox-mask-any-texture|mask-soft=itembox-mask-soft-texture itembox-mask-any-texture|mask-crisp=itembox-mask-crisp-texture itembox-mask-any-texture|mask-crisp-soft=itembox-mask-crisp-soft-texture itembox-mask-any-texture}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Links.&lt;br /&gt;
--&amp;gt;{{#vardefine:linkTooltip|{{{overrideLinkTooltip|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkImage|{{{overrideLinkImage|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
--&amp;gt;&amp;lt;div class=&amp;quot;itembox {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}} {{#var:variants}} {{#var:lowGraphics}} {{#var:lite}}&amp;quot; style=&amp;quot;font-size:{{#expr: 10 * {{#if:{{{size|}}}|{{{size}}}|1}} }}px;&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;itembox-background&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;div class=&amp;quot;itembox-card&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-icon-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-icon&amp;quot;&amp;gt;[[File:{{#var:linkImage}}.png|160px|link=]]&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-tier-badge&amp;quot;&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-shadow&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-fill&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-number&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-imbue-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_imbue}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-name-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;p class=&amp;quot;itembox-name&amp;quot; style=&amp;quot;font-size:{{#var:fontSize}}em;text-wrap:balance;&amp;quot;&amp;gt;{{#var:displayName}}&amp;lt;/p&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-wear&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-texture&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-bevel&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-active-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_active}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-outline&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
		&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;item-link-wrapper&amp;quot; data-item-name=&amp;quot;{{#var:linkTooltip}}&amp;quot;&amp;gt;[[{{#var:linkClick}}|&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;]]&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&amp;lt;/includeonly&amp;gt;&amp;lt;noinclude&amp;gt;{{Documentation}}&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox/styles.css?diff=99980</id>
		<title>Template:ItemBox/styles.css</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox/styles.css?diff=99980"/>
		<updated>2026-07-24T22:59:21Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Replace the single overlay-dark preset with a 10-cell grid of brightness x opacity combinations for tuning (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
&lt;br /&gt;
/* The whole card scales off one knob: font-size on .itembox (1em = 10px base) */&lt;br /&gt;
.itembox,&lt;br /&gt;
.itembox * {&lt;br /&gt;
    margin: 0;&lt;br /&gt;
    padding: 0;&lt;br /&gt;
    border: 0;&lt;br /&gt;
    box-sizing: border-box;&lt;br /&gt;
}&lt;br /&gt;
.itembox {&lt;br /&gt;
    --itembox-ink: #10130D;&lt;br /&gt;
    --itembox-weapon: #EC981a;&lt;br /&gt;
    --itembox-vitality: #7CBB1E;&lt;br /&gt;
    --itembox-spirit: #CE91FF;&lt;br /&gt;
    --itembox-imbue-fg: #E8C9FF;&lt;br /&gt;
    --itembox-imbue-bg: #623585;&lt;br /&gt;
    --itembox-wear-tint: #ffffff;&lt;br /&gt;
    --itembox-wear-ramp: 75%;&lt;br /&gt;
    --itembox-card-image: none;&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
    --itembox-paper-alpha: url(&#039;/images/c/c7/Shopitem_papertexture_alpha_01.png&#039;);&lt;br /&gt;
    --itembox-tex-mask-opacity: 0.55;&lt;br /&gt;
    --itembox-tex-overlay-opacity: 1;&lt;br /&gt;
    --itembox-font: &#039;Retail Demo&#039;, sans-serif;&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: inline-block;&lt;br /&gt;
    font-size: 10px;&lt;br /&gt;
    width: 8em;&lt;br /&gt;
    height: 12.5em;&lt;br /&gt;
    border-radius: 0.6em;&lt;br /&gt;
    box-shadow: 0.2em 0.2em 1.2em #00000097;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
    transition-duration: 0.1s;&lt;br /&gt;
    transition-property: opacity, transform, filter;&lt;br /&gt;
}&lt;br /&gt;
.itembox-background {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    pointer-events: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-card {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-image: var(--itembox-card-image);&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    /* Confines mix-blend-mode below to the card. Without it the blend group&lt;br /&gt;
       reaches the page backdrop and the card cannot be cached as one layer. */&lt;br /&gt;
    isolation: isolate;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Card art is held in a variable so the blend mode below can compose paper&lt;br /&gt;
   against it on the same element. The pairs collapse: T5 reuses the T4 image. */&lt;br /&gt;
.itembox-tier-1.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/3/3e/Weapon_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/9/96/Weapon_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/5/5d/Weapon_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-weapon,&lt;br /&gt;
.itembox-tier-5.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/a6/Weapon_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/7/75/Armor_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/0/05/Armor_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/7/7c/Armor_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-vitality,&lt;br /&gt;
.itembox-tier-5.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/1/18/Armor_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/af/Tech_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/ac/Tech_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/6/67/Tech_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-spirit,&lt;br /&gt;
.itembox-tier-5.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/f/f5/Tech_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-icon-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    align-items: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    aspect-ratio: 1 / 1;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    background-repeat: no-repeat;&lt;br /&gt;
    mask-size: cover;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon &amp;gt; span,&lt;br /&gt;
.itembox-icon &amp;gt; span &amp;gt; span,&lt;br /&gt;
.itembox-icon picture {&lt;br /&gt;
    display: block;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon img {&lt;br /&gt;
    display: block;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    max-width: 100%;&lt;br /&gt;
    max-height: 100%;&lt;br /&gt;
    object-fit: cover;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-icon-v1 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/1/10/Icon_mask01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon-v2 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/6/6f/Icon_mask02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon-v3 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/9/96/Icon_mask03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-badge {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0;&lt;br /&gt;
    right: 0;&lt;br /&gt;
    width: 2.8em;&lt;br /&gt;
    height: 2.8em;&lt;br /&gt;
    transform: scale(1.4);&lt;br /&gt;
    transform-origin: top right;&lt;br /&gt;
    /* display:none rather than visibility:hidden so the badge and its&lt;br /&gt;
       drop-shadow() cost nothing on the cards that never show it. */&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-show-tier .itembox-tier-badge {&lt;br /&gt;
    display: block;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-badge-fill {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    mask-size: 2.2em;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-position: right 0;&lt;br /&gt;
    mask-image: url(&#039;/images/6/61/Tier_corner_cap.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-badge-shadow {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0;&lt;br /&gt;
    left: 0;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-size: 2.2em;&lt;br /&gt;
    background-repeat: no-repeat;&lt;br /&gt;
    background-position: right 0;&lt;br /&gt;
    background-image: url(&#039;/images/6/61/Tier_corner_cap.svg&#039;);&lt;br /&gt;
    filter: drop-shadow(-0.4em 0 0.6em #000000ff);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-weapon .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-weapon);&lt;br /&gt;
}&lt;br /&gt;
.itembox-vitality .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-vitality);&lt;br /&gt;
}&lt;br /&gt;
.itembox-spirit .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-spirit);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-badge-number {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    right: 0;&lt;br /&gt;
    top: 0.3em;&lt;br /&gt;
    height: 0.8em;&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.5em;&lt;br /&gt;
    right: 0.4em;&lt;br /&gt;
    mask-image: url(&#039;/images/2/24/Tier_numbers_small_01.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.7em;&lt;br /&gt;
    right: 0.3em;&lt;br /&gt;
    mask-image: url(&#039;/images/7/74/Tier_numbers_small_02.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.9em;&lt;br /&gt;
    right: 0.2em;&lt;br /&gt;
    mask-image: url(&#039;/images/5/54/Tier_numbers_small_03.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4 .itembox-tier-badge-number {&lt;br /&gt;
    width: 1.1em;&lt;br /&gt;
    mask-image: url(&#039;/images/c/c6/Tier_numbers_small_04.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-5 .itembox-tier-badge-number {&lt;br /&gt;
    width: 1.1em;&lt;br /&gt;
    right: 0.1em;&lt;br /&gt;
    mask-image: url(&#039;/images/8/81/Tier_numbers_small_05.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-imbue-tag {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    bottom: 0;&lt;br /&gt;
    display: none;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: fit-content;&lt;br /&gt;
    font-size: 1.2em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    line-height: normal;&lt;br /&gt;
    letter-spacing: 0.1em;&lt;br /&gt;
    white-space: nowrap;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    text-transform: uppercase;&lt;br /&gt;
    border-radius: 0.2em;&lt;br /&gt;
    padding: 0 0.3em;&lt;br /&gt;
    color: var(--itembox-imbue-fg);&lt;br /&gt;
    background-color: var(--itembox-imbue-bg);&lt;br /&gt;
}&lt;br /&gt;
.itembox-imbue .itembox-imbue-tag {&lt;br /&gt;
    display: flex;&lt;br /&gt;
}&lt;br /&gt;
.itembox-active.itembox-imbue .itembox-imbue-tag {&lt;br /&gt;
    justify-content: start;&lt;br /&gt;
    height: 2.2em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-name-area {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 4.5em;&lt;br /&gt;
    padding: 0.5em 0.4em;&lt;br /&gt;
}&lt;br /&gt;
.itembox-name {&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    line-height: 1.2;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    font-size: 1.5em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    color: var(--itembox-ink);&lt;br /&gt;
    overflow-wrap: normal;&lt;br /&gt;
    word-break: normal;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-4.itembox-weapon .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-weapon .itembox-name {&lt;br /&gt;
    color: #e4c5a1;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-vitality .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-vitality .itembox-name {&lt;br /&gt;
    color: #c2e7cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-spirit .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-spirit .itembox-name {&lt;br /&gt;
    color: #e3d4f2;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-wear {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    opacity: 0.7;&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    background-color: white;&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v1 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/8/8f/Card_PaperWear_1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v2 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/1/11/Card_PaperWear_2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v3 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/8/89/Card_PaperWear_3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v4 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/5/52/Card_PaperWear_4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-1.itembox-vitality .itembox-wear {&lt;br /&gt;
    opacity: 1;&lt;br /&gt;
    background-color: #f4e2cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit .itembox-wear {&lt;br /&gt;
    opacity: 1;&lt;br /&gt;
    background-color: rgb(247, 232, 213);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 .itembox-wear {&lt;br /&gt;
    background-color: rgb(230, 209, 191);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 .itembox-wear {&lt;br /&gt;
    background-color: rgb(206, 173, 155);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4 .itembox-wear,&lt;br /&gt;
.itembox-tier-5 .itembox-wear {&lt;br /&gt;
    background-color: rgb(105, 97, 92);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Same tier colours again as a custom property. A gradient cannot read&lt;br /&gt;
   background-color, so the ramp variant below needs them in this form. */&lt;br /&gt;
.itembox-tier-1.itembox-vitality {&lt;br /&gt;
    --itembox-wear-tint: #f4e2cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit {&lt;br /&gt;
    --itembox-wear-tint: rgb(247, 232, 213);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 {&lt;br /&gt;
    --itembox-wear-tint: rgb(230, 209, 191);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 {&lt;br /&gt;
    --itembox-wear-tint: rgb(206, 173, 155);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4,&lt;br /&gt;
.itembox-tier-5 {&lt;br /&gt;
    --itembox-wear-tint: rgb(105, 97, 92);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-texture {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-size: 100% 100%;&lt;br /&gt;
    mix-blend-mode: multiply;&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v1 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v2 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v3 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Overrides the per-item texture so every card shares one image, which keeps a&lt;br /&gt;
   single paper texture resident in the GPU cache instead of three. Higher&lt;br /&gt;
   specificity than the hashed classes above, so it wins regardless of which&lt;br /&gt;
   variant the item&#039;s name landed on. */&lt;br /&gt;
.itembox.itembox-force-tex-1 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-force-tex-2 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-force-tex-3 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Two hairlines at ~13% alpha: screen and normal blending land within ~2% of&lt;br /&gt;
   each other here, so the blend mode is dropped and the layer stays cheap. */&lt;br /&gt;
.itembox-bevel {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    border-left: 0.1em solid #ffcc6622;&lt;br /&gt;
    border-top: 0.1em solid #ffcc6622;&lt;br /&gt;
    background-size: 100% 100%;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-active-tag {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    bottom: 3.5em;&lt;br /&gt;
    display: none;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    align-self: center;&lt;br /&gt;
    width: fit-content;&lt;br /&gt;
    height: fit-content;&lt;br /&gt;
    font-size: 1.1em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    line-height: normal;&lt;br /&gt;
    letter-spacing: 0;&lt;br /&gt;
    white-space: nowrap;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    text-transform: uppercase;&lt;br /&gt;
    border-radius: 0.2em;&lt;br /&gt;
    padding: 0.1em 0.6em;&lt;br /&gt;
    box-shadow: 0 0 1.5em #000000ff;&lt;br /&gt;
    color: #ffefd7b3;&lt;br /&gt;
    background-color: #171717;&lt;br /&gt;
}&lt;br /&gt;
.itembox-active .itembox-active-tag {&lt;br /&gt;
    display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox .item-link-wrapper,&lt;br /&gt;
.itembox .item-link-wrapper &amp;gt; a {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    display: block;&lt;br /&gt;
    inset: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* ---------------------------------------------------------------------------&lt;br /&gt;
   Opt-in simplifications, set through the parameters on [[Template:ItemBox]].&lt;br /&gt;
   Each removes work the GPU repeats for every card on screen: a masked element&lt;br /&gt;
   costs an extra render pass, and mix-blend-mode costs a backdrop read. Callers&lt;br /&gt;
   that place dozens of cards at once can trade the paper detail for the frames.&lt;br /&gt;
   --------------------------------------------------------------------------- */&lt;br /&gt;
&lt;br /&gt;
/* The wear patterns are concentrated at the card&#039;s edges and largely clear in&lt;br /&gt;
   the middle, so a gradient can stand in for the mask: transparent through the&lt;br /&gt;
   centre, tint gathering at the border. --itembox-wear-ramp is where the&lt;br /&gt;
   falloff starts and is the one value worth tuning. The name is lifted clear so&lt;br /&gt;
   no amount of tint ever lands on the glyphs; the paper behind them still&lt;br /&gt;
   takes it, since the name area has no background of its own. Gradients are a&lt;br /&gt;
   native primitive, so this costs no extra render pass.  */&lt;br /&gt;
.itembox.itembox-ramp-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    background-color: transparent;&lt;br /&gt;
    background-image: radial-gradient(ellipse at 50% 45%, transparent var(--itembox-wear-ramp), var(--itembox-wear-tint) 100%);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-ramp-wear .itembox-name-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    z-index: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Kept for comparison against the ramp; drop whichever loses.&lt;br /&gt;
   flat - tint moves behind the artwork, colouring only the card stock&lt;br /&gt;
   soft - tint stays on top, uniform and lighter, name lifted clear */&lt;br /&gt;
.itembox.itembox-flat-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    z-index: -1;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-soft-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    opacity: 0.35;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-soft-wear .itembox-name-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    z-index: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-flat-icon .itembox-icon {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-no-texture .itembox-texture {&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* ---- Transparent-paper overlay (the good one) --------------------------&lt;br /&gt;
   The paper redrawn as dark grain on a TRANSPARENT field, dropped straight on&lt;br /&gt;
   top of the card as a plain image. No blend, no mask: the grain pixels show,&lt;br /&gt;
   the gaps show nothing, and because it is a single image being alpha-&lt;br /&gt;
   composited (not two colours combined) WebRender caches the card as a static&lt;br /&gt;
   tile and scrolling stays smooth. It reaches the whole card including the icon&lt;br /&gt;
   and text area.&lt;br /&gt;
&lt;br /&gt;
   Two levers, both single-image so both keep caching: opacity (how much grain&lt;br /&gt;
   shows) and brightness (how dark the grain&#039;s pixels are; below 1 it deepens&lt;br /&gt;
   the card the way the old multiply did). TemplateStyles rejects a variable&lt;br /&gt;
   inside filter(), so the brightness/opacity pairs below are fixed presets&lt;br /&gt;
   named -bBB-oOO (brightness .BB, opacity .OO), a grid for tuning. */&lt;br /&gt;
.itembox.itembox-over-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: var(--itembox-paper-alpha);&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    opacity: var(--itembox-tex-overlay-opacity);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-over-soft { --itembox-tex-overlay-opacity: 0.6; }&lt;br /&gt;
.itembox.itembox-over-o30 { --itembox-tex-overlay-opacity: 0.3; }&lt;br /&gt;
.itembox.itembox-over-o20 { --itembox-tex-overlay-opacity: 0.2; }&lt;br /&gt;
.itembox.itembox-over-o10 { --itembox-tex-overlay-opacity: 0.1; }&lt;br /&gt;
.itembox.itembox-over-o05 { --itembox-tex-overlay-opacity: 0.05; }&lt;br /&gt;
&lt;br /&gt;
/* Brightness x opacity grid. brightness 0.2 / 0.35 / 0.5, opacity 0.4-1.0. */&lt;br /&gt;
.itembox.itembox-over-b20-o40 .itembox-texture { filter: brightness(0.2); opacity: 0.4; }&lt;br /&gt;
.itembox.itembox-over-b20-o60 .itembox-texture { filter: brightness(0.2); opacity: 0.6; }&lt;br /&gt;
.itembox.itembox-over-b20-o80 .itembox-texture { filter: brightness(0.2); opacity: 0.8; }&lt;br /&gt;
.itembox.itembox-over-b35-o40 .itembox-texture { filter: brightness(0.35); opacity: 0.4; }&lt;br /&gt;
.itembox.itembox-over-b35-o60 .itembox-texture { filter: brightness(0.35); opacity: 0.6; }&lt;br /&gt;
.itembox.itembox-over-b35-o80 .itembox-texture { filter: brightness(0.35); opacity: 0.8; }&lt;br /&gt;
.itembox.itembox-over-b35-o100 .itembox-texture { filter: brightness(0.35); opacity: 1; }&lt;br /&gt;
.itembox.itembox-over-b50-o60 .itembox-texture { filter: brightness(0.5); opacity: 0.6; }&lt;br /&gt;
.itembox.itembox-over-b50-o80 .itembox-texture { filter: brightness(0.5); opacity: 0.8; }&lt;br /&gt;
.itembox.itembox-over-b50-o100 .itembox-texture { filter: brightness(0.5); opacity: 1; }&lt;br /&gt;
&lt;br /&gt;
/* Paper multiplied against the card art on the SAME element. Unlike&lt;br /&gt;
   mix-blend-mode (which reads the page backdrop and so cannot be cached),&lt;br /&gt;
   background-blend-mode blends the element&#039;s own layers, which WebRender keeps&lt;br /&gt;
   as a static tile — the whole point of the exercise. The separate .itembox-&lt;br /&gt;
   texture div is switched off since the paper now lives in the card layer.&lt;br /&gt;
   Caveat: this only reaches the card art, not the icon or the name, which are&lt;br /&gt;
   real content above the background rather than layers of it. --itembox-paper&lt;br /&gt;
   selects which of the three papers to use. */&lt;br /&gt;
.itembox.itembox-blend-texture .itembox-card {&lt;br /&gt;
    background-image: var(--itembox-paper), var(--itembox-card-image);&lt;br /&gt;
    background-size: cover, cover;&lt;br /&gt;
    background-blend-mode: multiply, normal;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture .itembox-texture {&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Per-item blend: read the paper from the item&#039;s own hashed texture-vN class,&lt;br /&gt;
   so blended cards keep the same variety the overlay had. The forced classes&lt;br /&gt;
   below outrank these when a single shared paper is wanted instead. */&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Forced single paper for the blend, e.g. from lowGraphics. */&lt;br /&gt;
.itembox.itembox-blend-tex-1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-tex-2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-tex-3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* ---- Masked paper (dead ends, kept for reference) -----------------------&lt;br /&gt;
   Attempts to fake the multiply from the opaque dark-on-white PNGs by masking a&lt;br /&gt;
   dark tint. The plain luminance mask keeps the white and floods the card; the&lt;br /&gt;
   inverted -crisp version keeps the whole field bright and washes it out. Both&lt;br /&gt;
   were rejected on looks. The transparent overlay above replaced them. */&lt;br /&gt;
.itembox.itembox-mask-crisp-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: none;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
    opacity: var(--itembox-tex-mask-opacity);&lt;br /&gt;
    mask-image: var(--itembox-paper);&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
    filter: invert(1);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-crisp-soft-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: none;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
    opacity: 0.75;&lt;br /&gt;
    mask-image: var(--itembox-paper);&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
    filter: invert(1);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: none;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
    opacity: var(--itembox-tex-mask-opacity);&lt;br /&gt;
    mask-image: var(--itembox-paper);&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-soft-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: none;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
    opacity: 0.3;&lt;br /&gt;
    mask-image: var(--itembox-paper);&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
}&lt;br /&gt;
/* Per-item paper for the masked variants, read from the hashed class. */&lt;br /&gt;
.itembox.itembox-mask-any-texture.itembox-texture-v1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-any-texture.itembox-texture-v2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-any-texture.itembox-texture-v3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Skipping offscreen cards only pays for itself when many are on screen at&lt;br /&gt;
   once. On narrow viewports about ten fit, so the saving is small while cards&lt;br /&gt;
   crossing the boundary force constant display list rebuilds — measured at&lt;br /&gt;
   roughly half the frame rate on Android with this enabled. */&lt;br /&gt;
@media (min-width: 900px) {&lt;br /&gt;
    .itembox {&lt;br /&gt;
        content-visibility: auto;&lt;br /&gt;
        contain-intrinsic-size: 8em 12.5em;&lt;br /&gt;
    }&lt;br /&gt;
}&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/User:Vergir?diff=99977</id>
		<title>User:Vergir</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/User:Vergir?diff=99977"/>
		<updated>2026-07-24T22:40:21Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Compare baseline against overlay-dark and the overlay opacity ladder to pin the strength (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
&lt;br /&gt;
= Holliday =&lt;br /&gt;
{{HeroStreetBrawlItems|Holliday|id=sb-items-holliday}}&lt;br /&gt;
&lt;br /&gt;
= Vindicta (has counter items) =&lt;br /&gt;
{{HeroStreetBrawlItems|Vindicta|id=sb-items-vindicta}}&lt;br /&gt;
&lt;br /&gt;
= ItemBox overlay tuning =&lt;br /&gt;
&lt;br /&gt;
Transparent-paper overlay (the good one). Section 2 darkens the grain so it deepens dark cards instead of lightening them. Sections 3-6 are the opacity ladder to pin the strength; you said the sweet spot is between 0.05 and 0.3. This uses the re-uploaded higher-fuzz file.&lt;br /&gt;
&lt;br /&gt;
== 1. Baseline ==&lt;br /&gt;
The real look everywhere else.&lt;br /&gt;
&lt;br /&gt;
{{ItemBox|itemName=Active Reload}} {{ItemBox|itemName=Alchemical Fire}} {{ItemBox|itemName=Arctic Blast}} {{ItemBox|itemName=Berserker}} {{ItemBox|itemName=Bullet Armor}} {{ItemBox|itemName=Cheat Death}} {{ItemBox|itemName=Colossus}} {{ItemBox|itemName=Crippling Headshot}} {{ItemBox|itemName=Divine Barrier}} {{ItemBox|itemName=Echo Shard}}&lt;br /&gt;
&lt;br /&gt;
== 2. Overlay, darkened grain ==&lt;br /&gt;
Grain brightness pulled down so it always deepens, at 0.5 opacity.&lt;br /&gt;
&lt;br /&gt;
{{ItemBox|itemName=Active Reload|texture=overlay-dark}} {{ItemBox|itemName=Alchemical Fire|texture=overlay-dark}} {{ItemBox|itemName=Arctic Blast|texture=overlay-dark}} {{ItemBox|itemName=Berserker|texture=overlay-dark}} {{ItemBox|itemName=Bullet Armor|texture=overlay-dark}} {{ItemBox|itemName=Cheat Death|texture=overlay-dark}} {{ItemBox|itemName=Colossus|texture=overlay-dark}} {{ItemBox|itemName=Crippling Headshot|texture=overlay-dark}} {{ItemBox|itemName=Divine Barrier|texture=overlay-dark}} {{ItemBox|itemName=Echo Shard|texture=overlay-dark}}&lt;br /&gt;
&lt;br /&gt;
== 3. Overlay 0.30 ==&lt;br /&gt;
{{ItemBox|itemName=Active Reload|texture=overlay-o30}} {{ItemBox|itemName=Alchemical Fire|texture=overlay-o30}} {{ItemBox|itemName=Arctic Blast|texture=overlay-o30}} {{ItemBox|itemName=Berserker|texture=overlay-o30}} {{ItemBox|itemName=Bullet Armor|texture=overlay-o30}} {{ItemBox|itemName=Cheat Death|texture=overlay-o30}} {{ItemBox|itemName=Colossus|texture=overlay-o30}} {{ItemBox|itemName=Crippling Headshot|texture=overlay-o30}} {{ItemBox|itemName=Divine Barrier|texture=overlay-o30}} {{ItemBox|itemName=Echo Shard|texture=overlay-o30}}&lt;br /&gt;
&lt;br /&gt;
== 4. Overlay 0.20 ==&lt;br /&gt;
{{ItemBox|itemName=Active Reload|texture=overlay-o20}} {{ItemBox|itemName=Alchemical Fire|texture=overlay-o20}} {{ItemBox|itemName=Arctic Blast|texture=overlay-o20}} {{ItemBox|itemName=Berserker|texture=overlay-o20}} {{ItemBox|itemName=Bullet Armor|texture=overlay-o20}} {{ItemBox|itemName=Cheat Death|texture=overlay-o20}} {{ItemBox|itemName=Colossus|texture=overlay-o20}} {{ItemBox|itemName=Crippling Headshot|texture=overlay-o20}} {{ItemBox|itemName=Divine Barrier|texture=overlay-o20}} {{ItemBox|itemName=Echo Shard|texture=overlay-o20}}&lt;br /&gt;
&lt;br /&gt;
== 5. Overlay 0.10 ==&lt;br /&gt;
{{ItemBox|itemName=Active Reload|texture=overlay-o10}} {{ItemBox|itemName=Alchemical Fire|texture=overlay-o10}} {{ItemBox|itemName=Arctic Blast|texture=overlay-o10}} {{ItemBox|itemName=Berserker|texture=overlay-o10}} {{ItemBox|itemName=Bullet Armor|texture=overlay-o10}} {{ItemBox|itemName=Cheat Death|texture=overlay-o10}} {{ItemBox|itemName=Colossus|texture=overlay-o10}} {{ItemBox|itemName=Crippling Headshot|texture=overlay-o10}} {{ItemBox|itemName=Divine Barrier|texture=overlay-o10}} {{ItemBox|itemName=Echo Shard|texture=overlay-o10}}&lt;br /&gt;
&lt;br /&gt;
== 6. Overlay 0.05 ==&lt;br /&gt;
{{ItemBox|itemName=Active Reload|texture=overlay-o05}} {{ItemBox|itemName=Alchemical Fire|texture=overlay-o05}} {{ItemBox|itemName=Arctic Blast|texture=overlay-o05}} {{ItemBox|itemName=Berserker|texture=overlay-o05}} {{ItemBox|itemName=Bullet Armor|texture=overlay-o05}} {{ItemBox|itemName=Cheat Death|texture=overlay-o05}} {{ItemBox|itemName=Colossus|texture=overlay-o05}} {{ItemBox|itemName=Crippling Headshot|texture=overlay-o05}} {{ItemBox|itemName=Divine Barrier|texture=overlay-o05}} {{ItemBox|itemName=Echo Shard|texture=overlay-o05}}&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox?diff=99976</id>
		<title>Template:ItemBox</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox?diff=99976"/>
		<updated>2026-07-24T22:39:49Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Add overlay opacity-ladder and overlay-dark switch values (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;templatestyles src=&amp;quot;Template:ItemBox/styles.css&amp;quot; /&amp;gt;&amp;lt;includeonly&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{#vardefine:itemName|{{{itemName|{{{1}}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Display name: Lang string for the codename, else the raw name, then override.&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#invoke:Lang|get_string|{{#invoke:ItemData|get_codename|{{#var:itemName}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#if:{{#var:displayName}}|{{#var:displayName}}|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Measured name size (em) and stable per-item texture variety.&lt;br /&gt;
--&amp;gt;{{#vardefine:fontSize|{{#invoke:ItemBox|getFontSize|{{#var:displayName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Modifier classes: slot (Weapon/Armor/Tech from data, or Weapon/Vitality/Spirit override -&amp;gt; weapon/vitality/spirit), tier, tags.&lt;br /&gt;
--&amp;gt;{{#vardefine:slot|{{#switch:{{{overrideSlot|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Slot}}}}}|Weapon=itembox-weapon|Armor|Vitality=itembox-vitality|Tech|Spirit=itembox-spirit}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:tier|itembox-tier-{{{overrideTier|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Tier}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:showTierTag|{{#ifeq:{{{showTierTag|}}}|true|itembox-show-tier}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{{overrideIsActive|{{#invoke:ItemData|is_active|{{#var:itemName}}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{#ifeq:{{#var:isActive}}|true|itembox-active}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{{overrideIsImbue|{{#invoke:ItemData|get_prop|{{#var:itemName}}|IsImbue}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     lowGraphics=true is the setting for callers that place dozens of cards on&lt;br /&gt;
     one page. It drops the paper texture, because every way of drawing it as a&lt;br /&gt;
     multiply blends two images together, and WebRender re-rasterises any such&lt;br /&gt;
     blend on every scrolled frame instead of caching it as a static tile. On the&lt;br /&gt;
     profiled navbox that blend was the whole cost: dropping it took the render&lt;br /&gt;
     thread&#039;s OpenGL work from ~230 ms/s to ~10 and roughly doubled the frame&lt;br /&gt;
     rate. The wear and icon masks are clips of a single image, not blends of&lt;br /&gt;
     two, so they cache once rasterised and are kept at full detail here. A&lt;br /&gt;
     transparent-paper overlay (texture=overlay) may replace the dropped texture&lt;br /&gt;
     once its scroll profile is confirmed.&lt;br /&gt;
--&amp;gt;{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-no-texture}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     The same layers individually, for testing combinations or overriding the&lt;br /&gt;
     bundle above. wearMask drops the mask from the wear tint three ways:&lt;br /&gt;
     no   - tint moves behind the artwork, so only the card stock is coloured&lt;br /&gt;
     ramp - tint stays on top, fading in from the card&#039;s edges&lt;br /&gt;
     soft - tint stays on top, uniform and lighter, with the name lifted clear&lt;br /&gt;
     texture handles the paper grain:&lt;br /&gt;
     no    - drop it entirely&lt;br /&gt;
     1/2/3 - one shared paper via the mix-blend overlay (does not cache)&lt;br /&gt;
     blend / blend1..3 - paper multiplied into the card art (does not cache)&lt;br /&gt;
     overlay - transparent-background paper dropped on top as a plain image;&lt;br /&gt;
             caches, covers the whole card, closest to the original. Strength&lt;br /&gt;
             presets: overlay-soft (0.6), overlay-o30, overlay-o20, overlay-o10,&lt;br /&gt;
             overlay-o05. overlay-dark darkens the grain so it deepens dark cards&lt;br /&gt;
             rather than lightening them.&lt;br /&gt;
     mask / mask-soft / mask-crisp / mask-crisp-soft - dead ends kept for&lt;br /&gt;
             reference; they fake the paper from the opaque PNGs and look wrong&lt;br /&gt;
--&amp;gt;{{#vardefine:lite|{{#switch:{{{wearMask|}}}|no=itembox-flat-wear|ramp=itembox-ramp-wear|soft=itembox-soft-wear}} {{#ifeq:{{{iconMask|}}}|no|itembox-flat-icon}} {{#switch:{{{texture|}}}|no=itembox-no-texture|1=itembox-force-tex-1|2=itembox-force-tex-2|3=itembox-force-tex-3|blend=itembox-blend-texture|blend1=itembox-blend-texture itembox-blend-tex-1|blend2=itembox-blend-texture itembox-blend-tex-2|blend3=itembox-blend-texture itembox-blend-tex-3|overlay=itembox-over-texture|overlay-soft=itembox-over-texture itembox-over-soft|overlay-o30=itembox-over-texture itembox-over-o30|overlay-o20=itembox-over-texture itembox-over-o20|overlay-o10=itembox-over-texture itembox-over-o10|overlay-o05=itembox-over-texture itembox-over-o05|overlay-dark=itembox-over-texture itembox-over-dark|mask=itembox-mask-texture itembox-mask-any-texture|mask-soft=itembox-mask-soft-texture itembox-mask-any-texture|mask-crisp=itembox-mask-crisp-texture itembox-mask-any-texture|mask-crisp-soft=itembox-mask-crisp-soft-texture itembox-mask-any-texture}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Links.&lt;br /&gt;
--&amp;gt;{{#vardefine:linkTooltip|{{{overrideLinkTooltip|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkImage|{{{overrideLinkImage|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
--&amp;gt;&amp;lt;div class=&amp;quot;itembox {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}} {{#var:variants}} {{#var:lowGraphics}} {{#var:lite}}&amp;quot; style=&amp;quot;font-size:{{#expr: 10 * {{#if:{{{size|}}}|{{{size}}}|1}} }}px;&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;itembox-background&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;div class=&amp;quot;itembox-card&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-icon-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-icon&amp;quot;&amp;gt;[[File:{{#var:linkImage}}.png|160px|link=]]&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-tier-badge&amp;quot;&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-shadow&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-fill&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-number&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-imbue-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_imbue}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-name-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;p class=&amp;quot;itembox-name&amp;quot; style=&amp;quot;font-size:{{#var:fontSize}}em;text-wrap:balance;&amp;quot;&amp;gt;{{#var:displayName}}&amp;lt;/p&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-wear&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-texture&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-bevel&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-active-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_active}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-outline&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
		&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;item-link-wrapper&amp;quot; data-item-name=&amp;quot;{{#var:linkTooltip}}&amp;quot;&amp;gt;[[{{#var:linkClick}}|&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;]]&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&amp;lt;/includeonly&amp;gt;&amp;lt;noinclude&amp;gt;{{Documentation}}&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox/styles.css?diff=99975</id>
		<title>Template:ItemBox/styles.css</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox/styles.css?diff=99975"/>
		<updated>2026-07-24T22:38:49Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Give the transparent overlay an opacity ladder and a dark preset that darkens the grain via a literal brightness filter, so it deepens dark cards instead of lightening them (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
&lt;br /&gt;
/* The whole card scales off one knob: font-size on .itembox (1em = 10px base) */&lt;br /&gt;
.itembox,&lt;br /&gt;
.itembox * {&lt;br /&gt;
    margin: 0;&lt;br /&gt;
    padding: 0;&lt;br /&gt;
    border: 0;&lt;br /&gt;
    box-sizing: border-box;&lt;br /&gt;
}&lt;br /&gt;
.itembox {&lt;br /&gt;
    --itembox-ink: #10130D;&lt;br /&gt;
    --itembox-weapon: #EC981a;&lt;br /&gt;
    --itembox-vitality: #7CBB1E;&lt;br /&gt;
    --itembox-spirit: #CE91FF;&lt;br /&gt;
    --itembox-imbue-fg: #E8C9FF;&lt;br /&gt;
    --itembox-imbue-bg: #623585;&lt;br /&gt;
    --itembox-wear-tint: #ffffff;&lt;br /&gt;
    --itembox-wear-ramp: 75%;&lt;br /&gt;
    --itembox-card-image: none;&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
    --itembox-paper-alpha: url(&#039;/images/c/c7/Shopitem_papertexture_alpha_01.png&#039;);&lt;br /&gt;
    --itembox-tex-mask-opacity: 0.55;&lt;br /&gt;
    --itembox-tex-overlay-opacity: 1;&lt;br /&gt;
    --itembox-font: &#039;Retail Demo&#039;, sans-serif;&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: inline-block;&lt;br /&gt;
    font-size: 10px;&lt;br /&gt;
    width: 8em;&lt;br /&gt;
    height: 12.5em;&lt;br /&gt;
    border-radius: 0.6em;&lt;br /&gt;
    box-shadow: 0.2em 0.2em 1.2em #00000097;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
    transition-duration: 0.1s;&lt;br /&gt;
    transition-property: opacity, transform, filter;&lt;br /&gt;
}&lt;br /&gt;
.itembox-background {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    pointer-events: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-card {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-image: var(--itembox-card-image);&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    /* Confines mix-blend-mode below to the card. Without it the blend group&lt;br /&gt;
       reaches the page backdrop and the card cannot be cached as one layer. */&lt;br /&gt;
    isolation: isolate;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Card art is held in a variable so the blend mode below can compose paper&lt;br /&gt;
   against it on the same element. The pairs collapse: T5 reuses the T4 image. */&lt;br /&gt;
.itembox-tier-1.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/3/3e/Weapon_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/9/96/Weapon_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/5/5d/Weapon_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-weapon,&lt;br /&gt;
.itembox-tier-5.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/a6/Weapon_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/7/75/Armor_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/0/05/Armor_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/7/7c/Armor_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-vitality,&lt;br /&gt;
.itembox-tier-5.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/1/18/Armor_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/af/Tech_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/ac/Tech_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/6/67/Tech_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-spirit,&lt;br /&gt;
.itembox-tier-5.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/f/f5/Tech_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-icon-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    align-items: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    aspect-ratio: 1 / 1;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    background-repeat: no-repeat;&lt;br /&gt;
    mask-size: cover;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon &amp;gt; span,&lt;br /&gt;
.itembox-icon &amp;gt; span &amp;gt; span,&lt;br /&gt;
.itembox-icon picture {&lt;br /&gt;
    display: block;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon img {&lt;br /&gt;
    display: block;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    max-width: 100%;&lt;br /&gt;
    max-height: 100%;&lt;br /&gt;
    object-fit: cover;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-icon-v1 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/1/10/Icon_mask01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon-v2 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/6/6f/Icon_mask02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon-v3 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/9/96/Icon_mask03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-badge {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0;&lt;br /&gt;
    right: 0;&lt;br /&gt;
    width: 2.8em;&lt;br /&gt;
    height: 2.8em;&lt;br /&gt;
    transform: scale(1.4);&lt;br /&gt;
    transform-origin: top right;&lt;br /&gt;
    /* display:none rather than visibility:hidden so the badge and its&lt;br /&gt;
       drop-shadow() cost nothing on the cards that never show it. */&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-show-tier .itembox-tier-badge {&lt;br /&gt;
    display: block;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-badge-fill {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    mask-size: 2.2em;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-position: right 0;&lt;br /&gt;
    mask-image: url(&#039;/images/6/61/Tier_corner_cap.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-badge-shadow {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0;&lt;br /&gt;
    left: 0;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-size: 2.2em;&lt;br /&gt;
    background-repeat: no-repeat;&lt;br /&gt;
    background-position: right 0;&lt;br /&gt;
    background-image: url(&#039;/images/6/61/Tier_corner_cap.svg&#039;);&lt;br /&gt;
    filter: drop-shadow(-0.4em 0 0.6em #000000ff);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-weapon .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-weapon);&lt;br /&gt;
}&lt;br /&gt;
.itembox-vitality .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-vitality);&lt;br /&gt;
}&lt;br /&gt;
.itembox-spirit .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-spirit);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-badge-number {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    right: 0;&lt;br /&gt;
    top: 0.3em;&lt;br /&gt;
    height: 0.8em;&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.5em;&lt;br /&gt;
    right: 0.4em;&lt;br /&gt;
    mask-image: url(&#039;/images/2/24/Tier_numbers_small_01.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.7em;&lt;br /&gt;
    right: 0.3em;&lt;br /&gt;
    mask-image: url(&#039;/images/7/74/Tier_numbers_small_02.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.9em;&lt;br /&gt;
    right: 0.2em;&lt;br /&gt;
    mask-image: url(&#039;/images/5/54/Tier_numbers_small_03.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4 .itembox-tier-badge-number {&lt;br /&gt;
    width: 1.1em;&lt;br /&gt;
    mask-image: url(&#039;/images/c/c6/Tier_numbers_small_04.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-5 .itembox-tier-badge-number {&lt;br /&gt;
    width: 1.1em;&lt;br /&gt;
    right: 0.1em;&lt;br /&gt;
    mask-image: url(&#039;/images/8/81/Tier_numbers_small_05.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-imbue-tag {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    bottom: 0;&lt;br /&gt;
    display: none;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: fit-content;&lt;br /&gt;
    font-size: 1.2em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    line-height: normal;&lt;br /&gt;
    letter-spacing: 0.1em;&lt;br /&gt;
    white-space: nowrap;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    text-transform: uppercase;&lt;br /&gt;
    border-radius: 0.2em;&lt;br /&gt;
    padding: 0 0.3em;&lt;br /&gt;
    color: var(--itembox-imbue-fg);&lt;br /&gt;
    background-color: var(--itembox-imbue-bg);&lt;br /&gt;
}&lt;br /&gt;
.itembox-imbue .itembox-imbue-tag {&lt;br /&gt;
    display: flex;&lt;br /&gt;
}&lt;br /&gt;
.itembox-active.itembox-imbue .itembox-imbue-tag {&lt;br /&gt;
    justify-content: start;&lt;br /&gt;
    height: 2.2em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-name-area {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 4.5em;&lt;br /&gt;
    padding: 0.5em 0.4em;&lt;br /&gt;
}&lt;br /&gt;
.itembox-name {&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    line-height: 1.2;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    font-size: 1.5em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    color: var(--itembox-ink);&lt;br /&gt;
    overflow-wrap: normal;&lt;br /&gt;
    word-break: normal;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-4.itembox-weapon .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-weapon .itembox-name {&lt;br /&gt;
    color: #e4c5a1;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-vitality .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-vitality .itembox-name {&lt;br /&gt;
    color: #c2e7cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-spirit .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-spirit .itembox-name {&lt;br /&gt;
    color: #e3d4f2;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-wear {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    opacity: 0.7;&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    background-color: white;&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v1 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/8/8f/Card_PaperWear_1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v2 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/1/11/Card_PaperWear_2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v3 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/8/89/Card_PaperWear_3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v4 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/5/52/Card_PaperWear_4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-1.itembox-vitality .itembox-wear {&lt;br /&gt;
    opacity: 1;&lt;br /&gt;
    background-color: #f4e2cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit .itembox-wear {&lt;br /&gt;
    opacity: 1;&lt;br /&gt;
    background-color: rgb(247, 232, 213);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 .itembox-wear {&lt;br /&gt;
    background-color: rgb(230, 209, 191);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 .itembox-wear {&lt;br /&gt;
    background-color: rgb(206, 173, 155);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4 .itembox-wear,&lt;br /&gt;
.itembox-tier-5 .itembox-wear {&lt;br /&gt;
    background-color: rgb(105, 97, 92);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Same tier colours again as a custom property. A gradient cannot read&lt;br /&gt;
   background-color, so the ramp variant below needs them in this form. */&lt;br /&gt;
.itembox-tier-1.itembox-vitality {&lt;br /&gt;
    --itembox-wear-tint: #f4e2cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit {&lt;br /&gt;
    --itembox-wear-tint: rgb(247, 232, 213);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 {&lt;br /&gt;
    --itembox-wear-tint: rgb(230, 209, 191);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 {&lt;br /&gt;
    --itembox-wear-tint: rgb(206, 173, 155);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4,&lt;br /&gt;
.itembox-tier-5 {&lt;br /&gt;
    --itembox-wear-tint: rgb(105, 97, 92);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-texture {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-size: 100% 100%;&lt;br /&gt;
    mix-blend-mode: multiply;&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v1 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v2 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v3 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Overrides the per-item texture so every card shares one image, which keeps a&lt;br /&gt;
   single paper texture resident in the GPU cache instead of three. Higher&lt;br /&gt;
   specificity than the hashed classes above, so it wins regardless of which&lt;br /&gt;
   variant the item&#039;s name landed on. */&lt;br /&gt;
.itembox.itembox-force-tex-1 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-force-tex-2 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-force-tex-3 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Two hairlines at ~13% alpha: screen and normal blending land within ~2% of&lt;br /&gt;
   each other here, so the blend mode is dropped and the layer stays cheap. */&lt;br /&gt;
.itembox-bevel {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    border-left: 0.1em solid #ffcc6622;&lt;br /&gt;
    border-top: 0.1em solid #ffcc6622;&lt;br /&gt;
    background-size: 100% 100%;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-active-tag {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    bottom: 3.5em;&lt;br /&gt;
    display: none;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    align-self: center;&lt;br /&gt;
    width: fit-content;&lt;br /&gt;
    height: fit-content;&lt;br /&gt;
    font-size: 1.1em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    line-height: normal;&lt;br /&gt;
    letter-spacing: 0;&lt;br /&gt;
    white-space: nowrap;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    text-transform: uppercase;&lt;br /&gt;
    border-radius: 0.2em;&lt;br /&gt;
    padding: 0.1em 0.6em;&lt;br /&gt;
    box-shadow: 0 0 1.5em #000000ff;&lt;br /&gt;
    color: #ffefd7b3;&lt;br /&gt;
    background-color: #171717;&lt;br /&gt;
}&lt;br /&gt;
.itembox-active .itembox-active-tag {&lt;br /&gt;
    display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox .item-link-wrapper,&lt;br /&gt;
.itembox .item-link-wrapper &amp;gt; a {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    display: block;&lt;br /&gt;
    inset: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* ---------------------------------------------------------------------------&lt;br /&gt;
   Opt-in simplifications, set through the parameters on [[Template:ItemBox]].&lt;br /&gt;
   Each removes work the GPU repeats for every card on screen: a masked element&lt;br /&gt;
   costs an extra render pass, and mix-blend-mode costs a backdrop read. Callers&lt;br /&gt;
   that place dozens of cards at once can trade the paper detail for the frames.&lt;br /&gt;
   --------------------------------------------------------------------------- */&lt;br /&gt;
&lt;br /&gt;
/* The wear patterns are concentrated at the card&#039;s edges and largely clear in&lt;br /&gt;
   the middle, so a gradient can stand in for the mask: transparent through the&lt;br /&gt;
   centre, tint gathering at the border. --itembox-wear-ramp is where the&lt;br /&gt;
   falloff starts and is the one value worth tuning. The name is lifted clear so&lt;br /&gt;
   no amount of tint ever lands on the glyphs; the paper behind them still&lt;br /&gt;
   takes it, since the name area has no background of its own. Gradients are a&lt;br /&gt;
   native primitive, so this costs no extra render pass.  */&lt;br /&gt;
.itembox.itembox-ramp-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    background-color: transparent;&lt;br /&gt;
    background-image: radial-gradient(ellipse at 50% 45%, transparent var(--itembox-wear-ramp), var(--itembox-wear-tint) 100%);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-ramp-wear .itembox-name-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    z-index: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Kept for comparison against the ramp; drop whichever loses.&lt;br /&gt;
   flat - tint moves behind the artwork, colouring only the card stock&lt;br /&gt;
   soft - tint stays on top, uniform and lighter, name lifted clear */&lt;br /&gt;
.itembox.itembox-flat-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    z-index: -1;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-soft-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    opacity: 0.35;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-soft-wear .itembox-name-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    z-index: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-flat-icon .itembox-icon {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-no-texture .itembox-texture {&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* ---- Transparent-paper overlay (the good one) --------------------------&lt;br /&gt;
   The paper redrawn as dark grain on a TRANSPARENT field, dropped straight on&lt;br /&gt;
   top of the card as a plain image. No blend, no mask: the grain pixels show,&lt;br /&gt;
   the gaps show nothing, and because it is a single image being alpha-&lt;br /&gt;
   composited (not two colours combined) WebRender caches the card as a static&lt;br /&gt;
   tile and scrolling stays smooth. It reaches the whole card including the icon&lt;br /&gt;
   and text area.&lt;br /&gt;
&lt;br /&gt;
   --itembox-tex-overlay-opacity sets how much of the grain shows. The opacity&lt;br /&gt;
   presets below pin the strength without editing the file. The -dark preset&lt;br /&gt;
   additionally darkens the grain&#039;s own pixels with brightness(), so painting it&lt;br /&gt;
   over even a dark card deepens rather than lightens, the way the old multiply&lt;br /&gt;
   did; brightness() reads only this layer so it still caches. TemplateStyles&lt;br /&gt;
   rejects a variable inside filter(), so -dark uses a literal value and is a&lt;br /&gt;
   fixed preset rather than a knob. */&lt;br /&gt;
.itembox.itembox-over-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: var(--itembox-paper-alpha);&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    opacity: var(--itembox-tex-overlay-opacity);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-over-soft { --itembox-tex-overlay-opacity: 0.6; }&lt;br /&gt;
.itembox.itembox-over-o30 { --itembox-tex-overlay-opacity: 0.3; }&lt;br /&gt;
.itembox.itembox-over-o20 { --itembox-tex-overlay-opacity: 0.2; }&lt;br /&gt;
.itembox.itembox-over-o10 { --itembox-tex-overlay-opacity: 0.1; }&lt;br /&gt;
.itembox.itembox-over-o05 { --itembox-tex-overlay-opacity: 0.05; }&lt;br /&gt;
.itembox.itembox-over-dark .itembox-texture {&lt;br /&gt;
    filter: brightness(0.35);&lt;br /&gt;
    opacity: 0.5;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Paper multiplied against the card art on the SAME element. Unlike&lt;br /&gt;
   mix-blend-mode (which reads the page backdrop and so cannot be cached),&lt;br /&gt;
   background-blend-mode blends the element&#039;s own layers, which WebRender keeps&lt;br /&gt;
   as a static tile — the whole point of the exercise. The separate .itembox-&lt;br /&gt;
   texture div is switched off since the paper now lives in the card layer.&lt;br /&gt;
   Caveat: this only reaches the card art, not the icon or the name, which are&lt;br /&gt;
   real content above the background rather than layers of it. --itembox-paper&lt;br /&gt;
   selects which of the three papers to use. */&lt;br /&gt;
.itembox.itembox-blend-texture .itembox-card {&lt;br /&gt;
    background-image: var(--itembox-paper), var(--itembox-card-image);&lt;br /&gt;
    background-size: cover, cover;&lt;br /&gt;
    background-blend-mode: multiply, normal;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture .itembox-texture {&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Per-item blend: read the paper from the item&#039;s own hashed texture-vN class,&lt;br /&gt;
   so blended cards keep the same variety the overlay had. The forced classes&lt;br /&gt;
   below outrank these when a single shared paper is wanted instead. */&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Forced single paper for the blend, e.g. from lowGraphics. */&lt;br /&gt;
.itembox.itembox-blend-tex-1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-tex-2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-tex-3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* ---- Masked paper (dead ends, kept for reference) -----------------------&lt;br /&gt;
   Attempts to fake the multiply from the opaque dark-on-white PNGs by masking a&lt;br /&gt;
   dark tint. The plain luminance mask keeps the white and floods the card; the&lt;br /&gt;
   inverted -crisp version keeps the whole field bright and washes it out. Both&lt;br /&gt;
   were rejected on looks. The transparent overlay above replaced them. */&lt;br /&gt;
.itembox.itembox-mask-crisp-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: none;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
    opacity: var(--itembox-tex-mask-opacity);&lt;br /&gt;
    mask-image: var(--itembox-paper);&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
    filter: invert(1);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-crisp-soft-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: none;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
    opacity: 0.75;&lt;br /&gt;
    mask-image: var(--itembox-paper);&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
    filter: invert(1);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: none;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
    opacity: var(--itembox-tex-mask-opacity);&lt;br /&gt;
    mask-image: var(--itembox-paper);&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-soft-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: none;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
    opacity: 0.3;&lt;br /&gt;
    mask-image: var(--itembox-paper);&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
}&lt;br /&gt;
/* Per-item paper for the masked variants, read from the hashed class. */&lt;br /&gt;
.itembox.itembox-mask-any-texture.itembox-texture-v1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-any-texture.itembox-texture-v2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-any-texture.itembox-texture-v3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Skipping offscreen cards only pays for itself when many are on screen at&lt;br /&gt;
   once. On narrow viewports about ten fit, so the saving is small while cards&lt;br /&gt;
   crossing the boundary force constant display list rebuilds — measured at&lt;br /&gt;
   roughly half the frame rate on Android with this enabled. */&lt;br /&gt;
@media (min-width: 900px) {&lt;br /&gt;
    .itembox {&lt;br /&gt;
        content-visibility: auto;&lt;br /&gt;
        contain-intrinsic-size: 8em 12.5em;&lt;br /&gt;
    }&lt;br /&gt;
}&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/User:Vergir?diff=99973</id>
		<title>User:Vergir</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/User:Vergir?diff=99973"/>
		<updated>2026-07-24T22:27:06Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Compare baseline against the transparent-paper overlay at full and soft opacity (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
&lt;br /&gt;
= Holliday =&lt;br /&gt;
{{HeroStreetBrawlItems|Holliday|id=sb-items-holliday}}&lt;br /&gt;
&lt;br /&gt;
= Vindicta (has counter items) =&lt;br /&gt;
{{HeroStreetBrawlItems|Vindicta|id=sb-items-vindicta}}&lt;br /&gt;
&lt;br /&gt;
= ItemBox transparent overlay comparison =&lt;br /&gt;
&lt;br /&gt;
The paper redrawn as dark grain on a transparent field, dropped on top of the card as a plain image. No blend, no mask: the grain shows, the gaps show nothing. It is a single image being composited, so it should cache and scroll smoothly, and it covers the whole card including the icon and text. This is the fuzz=5% export; the fuzz value and the opacity are both tunable.&lt;br /&gt;
&lt;br /&gt;
== 1. Baseline ==&lt;br /&gt;
The real look everywhere else: paper multiplied over the whole card.&lt;br /&gt;
&lt;br /&gt;
{{ItemBox|itemName=Active Reload}} {{ItemBox|itemName=Alchemical Fire}} {{ItemBox|itemName=Arctic Blast}} {{ItemBox|itemName=Berserker}} {{ItemBox|itemName=Bullet Armor}} {{ItemBox|itemName=Cheat Death}} {{ItemBox|itemName=Colossus}} {{ItemBox|itemName=Crippling Headshot}} {{ItemBox|itemName=Divine Barrier}} {{ItemBox|itemName=Echo Shard}}&lt;br /&gt;
&lt;br /&gt;
== 2. Transparent overlay, full ==&lt;br /&gt;
The alpha PNG at full strength.&lt;br /&gt;
&lt;br /&gt;
{{ItemBox|itemName=Active Reload|texture=overlay}} {{ItemBox|itemName=Alchemical Fire|texture=overlay}} {{ItemBox|itemName=Arctic Blast|texture=overlay}} {{ItemBox|itemName=Berserker|texture=overlay}} {{ItemBox|itemName=Bullet Armor|texture=overlay}} {{ItemBox|itemName=Cheat Death|texture=overlay}} {{ItemBox|itemName=Colossus|texture=overlay}} {{ItemBox|itemName=Crippling Headshot|texture=overlay}} {{ItemBox|itemName=Divine Barrier|texture=overlay}} {{ItemBox|itemName=Echo Shard|texture=overlay}}&lt;br /&gt;
&lt;br /&gt;
== 3. Transparent overlay, soft (0.6) ==&lt;br /&gt;
The same overlay at 60% opacity, for a lighter grain.&lt;br /&gt;
&lt;br /&gt;
{{ItemBox|itemName=Active Reload|texture=overlay-soft}} {{ItemBox|itemName=Alchemical Fire|texture=overlay-soft}} {{ItemBox|itemName=Arctic Blast|texture=overlay-soft}} {{ItemBox|itemName=Berserker|texture=overlay-soft}} {{ItemBox|itemName=Bullet Armor|texture=overlay-soft}} {{ItemBox|itemName=Cheat Death|texture=overlay-soft}} {{ItemBox|itemName=Colossus|texture=overlay-soft}} {{ItemBox|itemName=Crippling Headshot|texture=overlay-soft}} {{ItemBox|itemName=Divine Barrier|texture=overlay-soft}} {{ItemBox|itemName=Echo Shard|texture=overlay-soft}}&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox/styles.css?diff=99972</id>
		<title>Template:ItemBox/styles.css</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox/styles.css?diff=99972"/>
		<updated>2026-07-24T22:26:25Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Add the over-soft opacity preset for the overlay (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
&lt;br /&gt;
/* The whole card scales off one knob: font-size on .itembox (1em = 10px base) */&lt;br /&gt;
.itembox,&lt;br /&gt;
.itembox * {&lt;br /&gt;
    margin: 0;&lt;br /&gt;
    padding: 0;&lt;br /&gt;
    border: 0;&lt;br /&gt;
    box-sizing: border-box;&lt;br /&gt;
}&lt;br /&gt;
.itembox {&lt;br /&gt;
    --itembox-ink: #10130D;&lt;br /&gt;
    --itembox-weapon: #EC981a;&lt;br /&gt;
    --itembox-vitality: #7CBB1E;&lt;br /&gt;
    --itembox-spirit: #CE91FF;&lt;br /&gt;
    --itembox-imbue-fg: #E8C9FF;&lt;br /&gt;
    --itembox-imbue-bg: #623585;&lt;br /&gt;
    --itembox-wear-tint: #ffffff;&lt;br /&gt;
    --itembox-wear-ramp: 75%;&lt;br /&gt;
    --itembox-card-image: none;&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
    --itembox-paper-alpha: url(&#039;/images/c/c7/Shopitem_papertexture_alpha_01.png&#039;);&lt;br /&gt;
    --itembox-tex-mask-opacity: 0.55;&lt;br /&gt;
    --itembox-tex-overlay-opacity: 1;&lt;br /&gt;
    --itembox-font: &#039;Retail Demo&#039;, sans-serif;&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: inline-block;&lt;br /&gt;
    font-size: 10px;&lt;br /&gt;
    width: 8em;&lt;br /&gt;
    height: 12.5em;&lt;br /&gt;
    border-radius: 0.6em;&lt;br /&gt;
    box-shadow: 0.2em 0.2em 1.2em #00000097;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
    transition-duration: 0.1s;&lt;br /&gt;
    transition-property: opacity, transform, filter;&lt;br /&gt;
}&lt;br /&gt;
.itembox-background {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    pointer-events: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-card {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-image: var(--itembox-card-image);&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    /* Confines mix-blend-mode below to the card. Without it the blend group&lt;br /&gt;
       reaches the page backdrop and the card cannot be cached as one layer. */&lt;br /&gt;
    isolation: isolate;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Card art is held in a variable so the blend mode below can compose paper&lt;br /&gt;
   against it on the same element. The pairs collapse: T5 reuses the T4 image. */&lt;br /&gt;
.itembox-tier-1.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/3/3e/Weapon_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/9/96/Weapon_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/5/5d/Weapon_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-weapon,&lt;br /&gt;
.itembox-tier-5.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/a6/Weapon_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/7/75/Armor_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/0/05/Armor_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/7/7c/Armor_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-vitality,&lt;br /&gt;
.itembox-tier-5.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/1/18/Armor_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/af/Tech_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/ac/Tech_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/6/67/Tech_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-spirit,&lt;br /&gt;
.itembox-tier-5.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/f/f5/Tech_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-icon-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    align-items: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    aspect-ratio: 1 / 1;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    background-repeat: no-repeat;&lt;br /&gt;
    mask-size: cover;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon &amp;gt; span,&lt;br /&gt;
.itembox-icon &amp;gt; span &amp;gt; span,&lt;br /&gt;
.itembox-icon picture {&lt;br /&gt;
    display: block;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon img {&lt;br /&gt;
    display: block;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    max-width: 100%;&lt;br /&gt;
    max-height: 100%;&lt;br /&gt;
    object-fit: cover;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-icon-v1 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/1/10/Icon_mask01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon-v2 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/6/6f/Icon_mask02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon-v3 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/9/96/Icon_mask03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-badge {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0;&lt;br /&gt;
    right: 0;&lt;br /&gt;
    width: 2.8em;&lt;br /&gt;
    height: 2.8em;&lt;br /&gt;
    transform: scale(1.4);&lt;br /&gt;
    transform-origin: top right;&lt;br /&gt;
    /* display:none rather than visibility:hidden so the badge and its&lt;br /&gt;
       drop-shadow() cost nothing on the cards that never show it. */&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-show-tier .itembox-tier-badge {&lt;br /&gt;
    display: block;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-badge-fill {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    mask-size: 2.2em;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-position: right 0;&lt;br /&gt;
    mask-image: url(&#039;/images/6/61/Tier_corner_cap.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-badge-shadow {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0;&lt;br /&gt;
    left: 0;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-size: 2.2em;&lt;br /&gt;
    background-repeat: no-repeat;&lt;br /&gt;
    background-position: right 0;&lt;br /&gt;
    background-image: url(&#039;/images/6/61/Tier_corner_cap.svg&#039;);&lt;br /&gt;
    filter: drop-shadow(-0.4em 0 0.6em #000000ff);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-weapon .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-weapon);&lt;br /&gt;
}&lt;br /&gt;
.itembox-vitality .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-vitality);&lt;br /&gt;
}&lt;br /&gt;
.itembox-spirit .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-spirit);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-badge-number {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    right: 0;&lt;br /&gt;
    top: 0.3em;&lt;br /&gt;
    height: 0.8em;&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.5em;&lt;br /&gt;
    right: 0.4em;&lt;br /&gt;
    mask-image: url(&#039;/images/2/24/Tier_numbers_small_01.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.7em;&lt;br /&gt;
    right: 0.3em;&lt;br /&gt;
    mask-image: url(&#039;/images/7/74/Tier_numbers_small_02.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.9em;&lt;br /&gt;
    right: 0.2em;&lt;br /&gt;
    mask-image: url(&#039;/images/5/54/Tier_numbers_small_03.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4 .itembox-tier-badge-number {&lt;br /&gt;
    width: 1.1em;&lt;br /&gt;
    mask-image: url(&#039;/images/c/c6/Tier_numbers_small_04.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-5 .itembox-tier-badge-number {&lt;br /&gt;
    width: 1.1em;&lt;br /&gt;
    right: 0.1em;&lt;br /&gt;
    mask-image: url(&#039;/images/8/81/Tier_numbers_small_05.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-imbue-tag {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    bottom: 0;&lt;br /&gt;
    display: none;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: fit-content;&lt;br /&gt;
    font-size: 1.2em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    line-height: normal;&lt;br /&gt;
    letter-spacing: 0.1em;&lt;br /&gt;
    white-space: nowrap;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    text-transform: uppercase;&lt;br /&gt;
    border-radius: 0.2em;&lt;br /&gt;
    padding: 0 0.3em;&lt;br /&gt;
    color: var(--itembox-imbue-fg);&lt;br /&gt;
    background-color: var(--itembox-imbue-bg);&lt;br /&gt;
}&lt;br /&gt;
.itembox-imbue .itembox-imbue-tag {&lt;br /&gt;
    display: flex;&lt;br /&gt;
}&lt;br /&gt;
.itembox-active.itembox-imbue .itembox-imbue-tag {&lt;br /&gt;
    justify-content: start;&lt;br /&gt;
    height: 2.2em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-name-area {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 4.5em;&lt;br /&gt;
    padding: 0.5em 0.4em;&lt;br /&gt;
}&lt;br /&gt;
.itembox-name {&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    line-height: 1.2;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    font-size: 1.5em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    color: var(--itembox-ink);&lt;br /&gt;
    overflow-wrap: normal;&lt;br /&gt;
    word-break: normal;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-4.itembox-weapon .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-weapon .itembox-name {&lt;br /&gt;
    color: #e4c5a1;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-vitality .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-vitality .itembox-name {&lt;br /&gt;
    color: #c2e7cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-spirit .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-spirit .itembox-name {&lt;br /&gt;
    color: #e3d4f2;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-wear {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    opacity: 0.7;&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    background-color: white;&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v1 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/8/8f/Card_PaperWear_1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v2 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/1/11/Card_PaperWear_2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v3 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/8/89/Card_PaperWear_3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v4 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/5/52/Card_PaperWear_4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-1.itembox-vitality .itembox-wear {&lt;br /&gt;
    opacity: 1;&lt;br /&gt;
    background-color: #f4e2cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit .itembox-wear {&lt;br /&gt;
    opacity: 1;&lt;br /&gt;
    background-color: rgb(247, 232, 213);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 .itembox-wear {&lt;br /&gt;
    background-color: rgb(230, 209, 191);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 .itembox-wear {&lt;br /&gt;
    background-color: rgb(206, 173, 155);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4 .itembox-wear,&lt;br /&gt;
.itembox-tier-5 .itembox-wear {&lt;br /&gt;
    background-color: rgb(105, 97, 92);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Same tier colours again as a custom property. A gradient cannot read&lt;br /&gt;
   background-color, so the ramp variant below needs them in this form. */&lt;br /&gt;
.itembox-tier-1.itembox-vitality {&lt;br /&gt;
    --itembox-wear-tint: #f4e2cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit {&lt;br /&gt;
    --itembox-wear-tint: rgb(247, 232, 213);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 {&lt;br /&gt;
    --itembox-wear-tint: rgb(230, 209, 191);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 {&lt;br /&gt;
    --itembox-wear-tint: rgb(206, 173, 155);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4,&lt;br /&gt;
.itembox-tier-5 {&lt;br /&gt;
    --itembox-wear-tint: rgb(105, 97, 92);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-texture {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-size: 100% 100%;&lt;br /&gt;
    mix-blend-mode: multiply;&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v1 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v2 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v3 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Overrides the per-item texture so every card shares one image, which keeps a&lt;br /&gt;
   single paper texture resident in the GPU cache instead of three. Higher&lt;br /&gt;
   specificity than the hashed classes above, so it wins regardless of which&lt;br /&gt;
   variant the item&#039;s name landed on. */&lt;br /&gt;
.itembox.itembox-force-tex-1 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-force-tex-2 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-force-tex-3 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Two hairlines at ~13% alpha: screen and normal blending land within ~2% of&lt;br /&gt;
   each other here, so the blend mode is dropped and the layer stays cheap. */&lt;br /&gt;
.itembox-bevel {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    border-left: 0.1em solid #ffcc6622;&lt;br /&gt;
    border-top: 0.1em solid #ffcc6622;&lt;br /&gt;
    background-size: 100% 100%;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-active-tag {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    bottom: 3.5em;&lt;br /&gt;
    display: none;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    align-self: center;&lt;br /&gt;
    width: fit-content;&lt;br /&gt;
    height: fit-content;&lt;br /&gt;
    font-size: 1.1em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    line-height: normal;&lt;br /&gt;
    letter-spacing: 0;&lt;br /&gt;
    white-space: nowrap;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    text-transform: uppercase;&lt;br /&gt;
    border-radius: 0.2em;&lt;br /&gt;
    padding: 0.1em 0.6em;&lt;br /&gt;
    box-shadow: 0 0 1.5em #000000ff;&lt;br /&gt;
    color: #ffefd7b3;&lt;br /&gt;
    background-color: #171717;&lt;br /&gt;
}&lt;br /&gt;
.itembox-active .itembox-active-tag {&lt;br /&gt;
    display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox .item-link-wrapper,&lt;br /&gt;
.itembox .item-link-wrapper &amp;gt; a {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    display: block;&lt;br /&gt;
    inset: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* ---------------------------------------------------------------------------&lt;br /&gt;
   Opt-in simplifications, set through the parameters on [[Template:ItemBox]].&lt;br /&gt;
   Each removes work the GPU repeats for every card on screen: a masked element&lt;br /&gt;
   costs an extra render pass, and mix-blend-mode costs a backdrop read. Callers&lt;br /&gt;
   that place dozens of cards at once can trade the paper detail for the frames.&lt;br /&gt;
   --------------------------------------------------------------------------- */&lt;br /&gt;
&lt;br /&gt;
/* The wear patterns are concentrated at the card&#039;s edges and largely clear in&lt;br /&gt;
   the middle, so a gradient can stand in for the mask: transparent through the&lt;br /&gt;
   centre, tint gathering at the border. --itembox-wear-ramp is where the&lt;br /&gt;
   falloff starts and is the one value worth tuning. The name is lifted clear so&lt;br /&gt;
   no amount of tint ever lands on the glyphs; the paper behind them still&lt;br /&gt;
   takes it, since the name area has no background of its own. Gradients are a&lt;br /&gt;
   native primitive, so this costs no extra render pass.  */&lt;br /&gt;
.itembox.itembox-ramp-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    background-color: transparent;&lt;br /&gt;
    background-image: radial-gradient(ellipse at 50% 45%, transparent var(--itembox-wear-ramp), var(--itembox-wear-tint) 100%);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-ramp-wear .itembox-name-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    z-index: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Kept for comparison against the ramp; drop whichever loses.&lt;br /&gt;
   flat - tint moves behind the artwork, colouring only the card stock&lt;br /&gt;
   soft - tint stays on top, uniform and lighter, name lifted clear */&lt;br /&gt;
.itembox.itembox-flat-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    z-index: -1;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-soft-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    opacity: 0.35;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-soft-wear .itembox-name-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    z-index: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-flat-icon .itembox-icon {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-no-texture .itembox-texture {&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* ---- Transparent-paper overlay (the good one) --------------------------&lt;br /&gt;
   The paper redrawn as dark grain on a TRANSPARENT field, dropped straight on&lt;br /&gt;
   top of the card as a plain image. No blend, no mask, no filter: the grain&lt;br /&gt;
   pixels show, the gaps show nothing, and because it is a single image being&lt;br /&gt;
   alpha-composited (not two colours combined) WebRender caches the card as a&lt;br /&gt;
   static tile and scrolling stays smooth. This reaches the whole card including&lt;br /&gt;
   the icon and text area, and darkens toward the grain&#039;s own tone rather than a&lt;br /&gt;
   flat tint, so it is the closest cacheable match to the original multiply.&lt;br /&gt;
   --itembox-paper-alpha is the transparent file; --itembox-tex-overlay-opacity&lt;br /&gt;
   tunes how strong it reads without re-exporting the image. */&lt;br /&gt;
.itembox.itembox-over-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: var(--itembox-paper-alpha);&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    opacity: var(--itembox-tex-overlay-opacity);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-over-soft {&lt;br /&gt;
    --itembox-tex-overlay-opacity: 0.6;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Paper multiplied against the card art on the SAME element. Unlike&lt;br /&gt;
   mix-blend-mode (which reads the page backdrop and so cannot be cached),&lt;br /&gt;
   background-blend-mode blends the element&#039;s own layers, which WebRender keeps&lt;br /&gt;
   as a static tile — the whole point of the exercise. The separate .itembox-&lt;br /&gt;
   texture div is switched off since the paper now lives in the card layer.&lt;br /&gt;
   Caveat: this only reaches the card art, not the icon or the name, which are&lt;br /&gt;
   real content above the background rather than layers of it. --itembox-paper&lt;br /&gt;
   selects which of the three papers to use. */&lt;br /&gt;
.itembox.itembox-blend-texture .itembox-card {&lt;br /&gt;
    background-image: var(--itembox-paper), var(--itembox-card-image);&lt;br /&gt;
    background-size: cover, cover;&lt;br /&gt;
    background-blend-mode: multiply, normal;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture .itembox-texture {&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Per-item blend: read the paper from the item&#039;s own hashed texture-vN class,&lt;br /&gt;
   so blended cards keep the same variety the overlay had. The forced classes&lt;br /&gt;
   below outrank these when a single shared paper is wanted instead. */&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Forced single paper for the blend, e.g. from lowGraphics. */&lt;br /&gt;
.itembox.itembox-blend-tex-1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-tex-2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-tex-3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* ---- Masked paper (dead ends, kept for reference) -----------------------&lt;br /&gt;
   Attempts to fake the multiply from the opaque dark-on-white PNGs by masking a&lt;br /&gt;
   dark tint. The plain luminance mask keeps the white and floods the card; the&lt;br /&gt;
   inverted -crisp version keeps the whole field bright and washes it out. Both&lt;br /&gt;
   were rejected on looks. The transparent overlay above replaced them. */&lt;br /&gt;
.itembox.itembox-mask-crisp-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: none;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
    opacity: var(--itembox-tex-mask-opacity);&lt;br /&gt;
    mask-image: var(--itembox-paper);&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
    filter: invert(1);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-crisp-soft-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: none;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
    opacity: 0.75;&lt;br /&gt;
    mask-image: var(--itembox-paper);&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
    filter: invert(1);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: none;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
    opacity: var(--itembox-tex-mask-opacity);&lt;br /&gt;
    mask-image: var(--itembox-paper);&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-soft-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: none;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
    opacity: 0.3;&lt;br /&gt;
    mask-image: var(--itembox-paper);&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
}&lt;br /&gt;
/* Per-item paper for the masked variants, read from the hashed class. */&lt;br /&gt;
.itembox.itembox-mask-any-texture.itembox-texture-v1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-any-texture.itembox-texture-v2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-any-texture.itembox-texture-v3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Skipping offscreen cards only pays for itself when many are on screen at&lt;br /&gt;
   once. On narrow viewports about ten fit, so the saving is small while cards&lt;br /&gt;
   crossing the boundary force constant display list rebuilds — measured at&lt;br /&gt;
   roughly half the frame rate on Android with this enabled. */&lt;br /&gt;
@media (min-width: 900px) {&lt;br /&gt;
    .itembox {&lt;br /&gt;
        content-visibility: auto;&lt;br /&gt;
        contain-intrinsic-size: 8em 12.5em;&lt;br /&gt;
    }&lt;br /&gt;
}&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox?diff=99971</id>
		<title>Template:ItemBox</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox?diff=99971"/>
		<updated>2026-07-24T22:25:04Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Add texture=overlay and overlay-soft for the transparent-paper overlay (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;templatestyles src=&amp;quot;Template:ItemBox/styles.css&amp;quot; /&amp;gt;&amp;lt;includeonly&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{#vardefine:itemName|{{{itemName|{{{1}}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Display name: Lang string for the codename, else the raw name, then override.&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#invoke:Lang|get_string|{{#invoke:ItemData|get_codename|{{#var:itemName}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#if:{{#var:displayName}}|{{#var:displayName}}|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Measured name size (em) and stable per-item texture variety.&lt;br /&gt;
--&amp;gt;{{#vardefine:fontSize|{{#invoke:ItemBox|getFontSize|{{#var:displayName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Modifier classes: slot (Weapon/Armor/Tech from data, or Weapon/Vitality/Spirit override -&amp;gt; weapon/vitality/spirit), tier, tags.&lt;br /&gt;
--&amp;gt;{{#vardefine:slot|{{#switch:{{{overrideSlot|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Slot}}}}}|Weapon=itembox-weapon|Armor|Vitality=itembox-vitality|Tech|Spirit=itembox-spirit}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:tier|itembox-tier-{{{overrideTier|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Tier}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:showTierTag|{{#ifeq:{{{showTierTag|}}}|true|itembox-show-tier}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{{overrideIsActive|{{#invoke:ItemData|is_active|{{#var:itemName}}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{#ifeq:{{#var:isActive}}|true|itembox-active}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{{overrideIsImbue|{{#invoke:ItemData|get_prop|{{#var:itemName}}|IsImbue}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     lowGraphics=true is the setting for callers that place dozens of cards on&lt;br /&gt;
     one page. It drops the paper texture, because every way of drawing it as a&lt;br /&gt;
     multiply blends two images together, and WebRender re-rasterises any such&lt;br /&gt;
     blend on every scrolled frame instead of caching it as a static tile. On the&lt;br /&gt;
     profiled navbox that blend was the whole cost: dropping it took the render&lt;br /&gt;
     thread&#039;s OpenGL work from ~230 ms/s to ~10 and roughly doubled the frame&lt;br /&gt;
     rate. The wear and icon masks are clips of a single image, not blends of&lt;br /&gt;
     two, so they cache once rasterised and are kept at full detail here. A&lt;br /&gt;
     transparent-paper overlay (texture=overlay) may replace the dropped texture&lt;br /&gt;
     once its scroll profile is confirmed.&lt;br /&gt;
--&amp;gt;{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-no-texture}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     The same layers individually, for testing combinations or overriding the&lt;br /&gt;
     bundle above. wearMask drops the mask from the wear tint three ways:&lt;br /&gt;
     no   - tint moves behind the artwork, so only the card stock is coloured&lt;br /&gt;
     ramp - tint stays on top, fading in from the card&#039;s edges&lt;br /&gt;
     soft - tint stays on top, uniform and lighter, with the name lifted clear&lt;br /&gt;
     texture handles the paper grain:&lt;br /&gt;
     no    - drop it entirely&lt;br /&gt;
     1/2/3 - one shared paper via the mix-blend overlay (does not cache)&lt;br /&gt;
     blend / blend1..3 - paper multiplied into the card art (does not cache)&lt;br /&gt;
     overlay / overlay-soft - transparent-background paper dropped on top as a&lt;br /&gt;
             plain image; caches, covers the whole card, closest to the original&lt;br /&gt;
     mask / mask-soft / mask-crisp / mask-crisp-soft - dead ends kept for&lt;br /&gt;
             reference; they fake the paper from the opaque PNGs and look wrong&lt;br /&gt;
--&amp;gt;{{#vardefine:lite|{{#switch:{{{wearMask|}}}|no=itembox-flat-wear|ramp=itembox-ramp-wear|soft=itembox-soft-wear}} {{#ifeq:{{{iconMask|}}}|no|itembox-flat-icon}} {{#switch:{{{texture|}}}|no=itembox-no-texture|1=itembox-force-tex-1|2=itembox-force-tex-2|3=itembox-force-tex-3|blend=itembox-blend-texture|blend1=itembox-blend-texture itembox-blend-tex-1|blend2=itembox-blend-texture itembox-blend-tex-2|blend3=itembox-blend-texture itembox-blend-tex-3|overlay=itembox-over-texture|overlay-soft=itembox-over-texture itembox-over-soft|mask=itembox-mask-texture itembox-mask-any-texture|mask-soft=itembox-mask-soft-texture itembox-mask-any-texture|mask-crisp=itembox-mask-crisp-texture itembox-mask-any-texture|mask-crisp-soft=itembox-mask-crisp-soft-texture itembox-mask-any-texture}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Links.&lt;br /&gt;
--&amp;gt;{{#vardefine:linkTooltip|{{{overrideLinkTooltip|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkImage|{{{overrideLinkImage|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
--&amp;gt;&amp;lt;div class=&amp;quot;itembox {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}} {{#var:variants}} {{#var:lowGraphics}} {{#var:lite}}&amp;quot; style=&amp;quot;font-size:{{#expr: 10 * {{#if:{{{size|}}}|{{{size}}}|1}} }}px;&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;itembox-background&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;div class=&amp;quot;itembox-card&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-icon-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-icon&amp;quot;&amp;gt;[[File:{{#var:linkImage}}.png|160px|link=]]&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-tier-badge&amp;quot;&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-shadow&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-fill&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-number&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-imbue-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_imbue}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-name-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;p class=&amp;quot;itembox-name&amp;quot; style=&amp;quot;font-size:{{#var:fontSize}}em;text-wrap:balance;&amp;quot;&amp;gt;{{#var:displayName}}&amp;lt;/p&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-wear&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-texture&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-bevel&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-active-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_active}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-outline&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
		&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;item-link-wrapper&amp;quot; data-item-name=&amp;quot;{{#var:linkTooltip}}&amp;quot;&amp;gt;[[{{#var:linkClick}}|&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;]]&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&amp;lt;/includeonly&amp;gt;&amp;lt;noinclude&amp;gt;{{Documentation}}&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox/styles.css?diff=99970</id>
		<title>Template:ItemBox/styles.css</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox/styles.css?diff=99970"/>
		<updated>2026-07-24T22:24:31Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Add texture=overlay: transparent-background paper PNG as a plain alpha overlay over the whole card, no blend or mask, so the grain shows and the gaps are clear, and it caches as a single image (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
&lt;br /&gt;
/* The whole card scales off one knob: font-size on .itembox (1em = 10px base) */&lt;br /&gt;
.itembox,&lt;br /&gt;
.itembox * {&lt;br /&gt;
    margin: 0;&lt;br /&gt;
    padding: 0;&lt;br /&gt;
    border: 0;&lt;br /&gt;
    box-sizing: border-box;&lt;br /&gt;
}&lt;br /&gt;
.itembox {&lt;br /&gt;
    --itembox-ink: #10130D;&lt;br /&gt;
    --itembox-weapon: #EC981a;&lt;br /&gt;
    --itembox-vitality: #7CBB1E;&lt;br /&gt;
    --itembox-spirit: #CE91FF;&lt;br /&gt;
    --itembox-imbue-fg: #E8C9FF;&lt;br /&gt;
    --itembox-imbue-bg: #623585;&lt;br /&gt;
    --itembox-wear-tint: #ffffff;&lt;br /&gt;
    --itembox-wear-ramp: 75%;&lt;br /&gt;
    --itembox-card-image: none;&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
    --itembox-paper-alpha: url(&#039;/images/c/c7/Shopitem_papertexture_alpha_01.png&#039;);&lt;br /&gt;
    --itembox-tex-mask-opacity: 0.55;&lt;br /&gt;
    --itembox-tex-overlay-opacity: 1;&lt;br /&gt;
    --itembox-font: &#039;Retail Demo&#039;, sans-serif;&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: inline-block;&lt;br /&gt;
    font-size: 10px;&lt;br /&gt;
    width: 8em;&lt;br /&gt;
    height: 12.5em;&lt;br /&gt;
    border-radius: 0.6em;&lt;br /&gt;
    box-shadow: 0.2em 0.2em 1.2em #00000097;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
    transition-duration: 0.1s;&lt;br /&gt;
    transition-property: opacity, transform, filter;&lt;br /&gt;
}&lt;br /&gt;
.itembox-background {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    pointer-events: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-card {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-image: var(--itembox-card-image);&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    /* Confines mix-blend-mode below to the card. Without it the blend group&lt;br /&gt;
       reaches the page backdrop and the card cannot be cached as one layer. */&lt;br /&gt;
    isolation: isolate;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Card art is held in a variable so the blend mode below can compose paper&lt;br /&gt;
   against it on the same element. The pairs collapse: T5 reuses the T4 image. */&lt;br /&gt;
.itembox-tier-1.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/3/3e/Weapon_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/9/96/Weapon_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/5/5d/Weapon_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-weapon,&lt;br /&gt;
.itembox-tier-5.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/a6/Weapon_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/7/75/Armor_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/0/05/Armor_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/7/7c/Armor_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-vitality,&lt;br /&gt;
.itembox-tier-5.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/1/18/Armor_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/af/Tech_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/ac/Tech_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/6/67/Tech_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-spirit,&lt;br /&gt;
.itembox-tier-5.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/f/f5/Tech_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-icon-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    align-items: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    aspect-ratio: 1 / 1;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    background-repeat: no-repeat;&lt;br /&gt;
    mask-size: cover;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon &amp;gt; span,&lt;br /&gt;
.itembox-icon &amp;gt; span &amp;gt; span,&lt;br /&gt;
.itembox-icon picture {&lt;br /&gt;
    display: block;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon img {&lt;br /&gt;
    display: block;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    max-width: 100%;&lt;br /&gt;
    max-height: 100%;&lt;br /&gt;
    object-fit: cover;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-icon-v1 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/1/10/Icon_mask01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon-v2 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/6/6f/Icon_mask02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon-v3 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/9/96/Icon_mask03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-badge {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0;&lt;br /&gt;
    right: 0;&lt;br /&gt;
    width: 2.8em;&lt;br /&gt;
    height: 2.8em;&lt;br /&gt;
    transform: scale(1.4);&lt;br /&gt;
    transform-origin: top right;&lt;br /&gt;
    /* display:none rather than visibility:hidden so the badge and its&lt;br /&gt;
       drop-shadow() cost nothing on the cards that never show it. */&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-show-tier .itembox-tier-badge {&lt;br /&gt;
    display: block;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-badge-fill {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    mask-size: 2.2em;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-position: right 0;&lt;br /&gt;
    mask-image: url(&#039;/images/6/61/Tier_corner_cap.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-badge-shadow {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0;&lt;br /&gt;
    left: 0;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-size: 2.2em;&lt;br /&gt;
    background-repeat: no-repeat;&lt;br /&gt;
    background-position: right 0;&lt;br /&gt;
    background-image: url(&#039;/images/6/61/Tier_corner_cap.svg&#039;);&lt;br /&gt;
    filter: drop-shadow(-0.4em 0 0.6em #000000ff);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-weapon .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-weapon);&lt;br /&gt;
}&lt;br /&gt;
.itembox-vitality .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-vitality);&lt;br /&gt;
}&lt;br /&gt;
.itembox-spirit .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-spirit);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-badge-number {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    right: 0;&lt;br /&gt;
    top: 0.3em;&lt;br /&gt;
    height: 0.8em;&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.5em;&lt;br /&gt;
    right: 0.4em;&lt;br /&gt;
    mask-image: url(&#039;/images/2/24/Tier_numbers_small_01.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.7em;&lt;br /&gt;
    right: 0.3em;&lt;br /&gt;
    mask-image: url(&#039;/images/7/74/Tier_numbers_small_02.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.9em;&lt;br /&gt;
    right: 0.2em;&lt;br /&gt;
    mask-image: url(&#039;/images/5/54/Tier_numbers_small_03.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4 .itembox-tier-badge-number {&lt;br /&gt;
    width: 1.1em;&lt;br /&gt;
    mask-image: url(&#039;/images/c/c6/Tier_numbers_small_04.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-5 .itembox-tier-badge-number {&lt;br /&gt;
    width: 1.1em;&lt;br /&gt;
    right: 0.1em;&lt;br /&gt;
    mask-image: url(&#039;/images/8/81/Tier_numbers_small_05.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-imbue-tag {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    bottom: 0;&lt;br /&gt;
    display: none;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: fit-content;&lt;br /&gt;
    font-size: 1.2em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    line-height: normal;&lt;br /&gt;
    letter-spacing: 0.1em;&lt;br /&gt;
    white-space: nowrap;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    text-transform: uppercase;&lt;br /&gt;
    border-radius: 0.2em;&lt;br /&gt;
    padding: 0 0.3em;&lt;br /&gt;
    color: var(--itembox-imbue-fg);&lt;br /&gt;
    background-color: var(--itembox-imbue-bg);&lt;br /&gt;
}&lt;br /&gt;
.itembox-imbue .itembox-imbue-tag {&lt;br /&gt;
    display: flex;&lt;br /&gt;
}&lt;br /&gt;
.itembox-active.itembox-imbue .itembox-imbue-tag {&lt;br /&gt;
    justify-content: start;&lt;br /&gt;
    height: 2.2em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-name-area {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 4.5em;&lt;br /&gt;
    padding: 0.5em 0.4em;&lt;br /&gt;
}&lt;br /&gt;
.itembox-name {&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    line-height: 1.2;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    font-size: 1.5em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    color: var(--itembox-ink);&lt;br /&gt;
    overflow-wrap: normal;&lt;br /&gt;
    word-break: normal;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-4.itembox-weapon .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-weapon .itembox-name {&lt;br /&gt;
    color: #e4c5a1;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-vitality .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-vitality .itembox-name {&lt;br /&gt;
    color: #c2e7cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-spirit .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-spirit .itembox-name {&lt;br /&gt;
    color: #e3d4f2;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-wear {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    opacity: 0.7;&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    background-color: white;&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v1 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/8/8f/Card_PaperWear_1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v2 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/1/11/Card_PaperWear_2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v3 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/8/89/Card_PaperWear_3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v4 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/5/52/Card_PaperWear_4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-1.itembox-vitality .itembox-wear {&lt;br /&gt;
    opacity: 1;&lt;br /&gt;
    background-color: #f4e2cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit .itembox-wear {&lt;br /&gt;
    opacity: 1;&lt;br /&gt;
    background-color: rgb(247, 232, 213);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 .itembox-wear {&lt;br /&gt;
    background-color: rgb(230, 209, 191);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 .itembox-wear {&lt;br /&gt;
    background-color: rgb(206, 173, 155);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4 .itembox-wear,&lt;br /&gt;
.itembox-tier-5 .itembox-wear {&lt;br /&gt;
    background-color: rgb(105, 97, 92);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Same tier colours again as a custom property. A gradient cannot read&lt;br /&gt;
   background-color, so the ramp variant below needs them in this form. */&lt;br /&gt;
.itembox-tier-1.itembox-vitality {&lt;br /&gt;
    --itembox-wear-tint: #f4e2cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit {&lt;br /&gt;
    --itembox-wear-tint: rgb(247, 232, 213);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 {&lt;br /&gt;
    --itembox-wear-tint: rgb(230, 209, 191);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 {&lt;br /&gt;
    --itembox-wear-tint: rgb(206, 173, 155);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4,&lt;br /&gt;
.itembox-tier-5 {&lt;br /&gt;
    --itembox-wear-tint: rgb(105, 97, 92);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-texture {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-size: 100% 100%;&lt;br /&gt;
    mix-blend-mode: multiply;&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v1 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v2 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v3 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Overrides the per-item texture so every card shares one image, which keeps a&lt;br /&gt;
   single paper texture resident in the GPU cache instead of three. Higher&lt;br /&gt;
   specificity than the hashed classes above, so it wins regardless of which&lt;br /&gt;
   variant the item&#039;s name landed on. */&lt;br /&gt;
.itembox.itembox-force-tex-1 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-force-tex-2 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-force-tex-3 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Two hairlines at ~13% alpha: screen and normal blending land within ~2% of&lt;br /&gt;
   each other here, so the blend mode is dropped and the layer stays cheap. */&lt;br /&gt;
.itembox-bevel {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    border-left: 0.1em solid #ffcc6622;&lt;br /&gt;
    border-top: 0.1em solid #ffcc6622;&lt;br /&gt;
    background-size: 100% 100%;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-active-tag {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    bottom: 3.5em;&lt;br /&gt;
    display: none;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    align-self: center;&lt;br /&gt;
    width: fit-content;&lt;br /&gt;
    height: fit-content;&lt;br /&gt;
    font-size: 1.1em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    line-height: normal;&lt;br /&gt;
    letter-spacing: 0;&lt;br /&gt;
    white-space: nowrap;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    text-transform: uppercase;&lt;br /&gt;
    border-radius: 0.2em;&lt;br /&gt;
    padding: 0.1em 0.6em;&lt;br /&gt;
    box-shadow: 0 0 1.5em #000000ff;&lt;br /&gt;
    color: #ffefd7b3;&lt;br /&gt;
    background-color: #171717;&lt;br /&gt;
}&lt;br /&gt;
.itembox-active .itembox-active-tag {&lt;br /&gt;
    display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox .item-link-wrapper,&lt;br /&gt;
.itembox .item-link-wrapper &amp;gt; a {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    display: block;&lt;br /&gt;
    inset: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* ---------------------------------------------------------------------------&lt;br /&gt;
   Opt-in simplifications, set through the parameters on [[Template:ItemBox]].&lt;br /&gt;
   Each removes work the GPU repeats for every card on screen: a masked element&lt;br /&gt;
   costs an extra render pass, and mix-blend-mode costs a backdrop read. Callers&lt;br /&gt;
   that place dozens of cards at once can trade the paper detail for the frames.&lt;br /&gt;
   --------------------------------------------------------------------------- */&lt;br /&gt;
&lt;br /&gt;
/* The wear patterns are concentrated at the card&#039;s edges and largely clear in&lt;br /&gt;
   the middle, so a gradient can stand in for the mask: transparent through the&lt;br /&gt;
   centre, tint gathering at the border. --itembox-wear-ramp is where the&lt;br /&gt;
   falloff starts and is the one value worth tuning. The name is lifted clear so&lt;br /&gt;
   no amount of tint ever lands on the glyphs; the paper behind them still&lt;br /&gt;
   takes it, since the name area has no background of its own. Gradients are a&lt;br /&gt;
   native primitive, so this costs no extra render pass.  */&lt;br /&gt;
.itembox.itembox-ramp-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    background-color: transparent;&lt;br /&gt;
    background-image: radial-gradient(ellipse at 50% 45%, transparent var(--itembox-wear-ramp), var(--itembox-wear-tint) 100%);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-ramp-wear .itembox-name-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    z-index: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Kept for comparison against the ramp; drop whichever loses.&lt;br /&gt;
   flat - tint moves behind the artwork, colouring only the card stock&lt;br /&gt;
   soft - tint stays on top, uniform and lighter, name lifted clear */&lt;br /&gt;
.itembox.itembox-flat-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    z-index: -1;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-soft-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    opacity: 0.35;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-soft-wear .itembox-name-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    z-index: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-flat-icon .itembox-icon {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-no-texture .itembox-texture {&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* ---- Transparent-paper overlay (the good one) --------------------------&lt;br /&gt;
   The paper redrawn as dark grain on a TRANSPARENT field, dropped straight on&lt;br /&gt;
   top of the card as a plain image. No blend, no mask, no filter: the grain&lt;br /&gt;
   pixels show, the gaps show nothing, and because it is a single image being&lt;br /&gt;
   alpha-composited (not two colours combined) WebRender caches the card as a&lt;br /&gt;
   static tile and scrolling stays smooth. This reaches the whole card including&lt;br /&gt;
   the icon and text area, and darkens toward the grain&#039;s own tone rather than a&lt;br /&gt;
   flat tint, so it is the closest cacheable match to the original multiply.&lt;br /&gt;
   --itembox-paper-alpha is the transparent file; --itembox-tex-overlay-opacity&lt;br /&gt;
   tunes how strong it reads without re-exporting the image. */&lt;br /&gt;
.itembox.itembox-over-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: var(--itembox-paper-alpha);&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    opacity: var(--itembox-tex-overlay-opacity);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Paper multiplied against the card art on the SAME element. Unlike&lt;br /&gt;
   mix-blend-mode (which reads the page backdrop and so cannot be cached),&lt;br /&gt;
   background-blend-mode blends the element&#039;s own layers, which WebRender keeps&lt;br /&gt;
   as a static tile — the whole point of the exercise. The separate .itembox-&lt;br /&gt;
   texture div is switched off since the paper now lives in the card layer.&lt;br /&gt;
   Caveat: this only reaches the card art, not the icon or the name, which are&lt;br /&gt;
   real content above the background rather than layers of it. --itembox-paper&lt;br /&gt;
   selects which of the three papers to use. */&lt;br /&gt;
.itembox.itembox-blend-texture .itembox-card {&lt;br /&gt;
    background-image: var(--itembox-paper), var(--itembox-card-image);&lt;br /&gt;
    background-size: cover, cover;&lt;br /&gt;
    background-blend-mode: multiply, normal;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture .itembox-texture {&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Per-item blend: read the paper from the item&#039;s own hashed texture-vN class,&lt;br /&gt;
   so blended cards keep the same variety the overlay had. The forced classes&lt;br /&gt;
   below outrank these when a single shared paper is wanted instead. */&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Forced single paper for the blend, e.g. from lowGraphics. */&lt;br /&gt;
.itembox.itembox-blend-tex-1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-tex-2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-tex-3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* ---- Masked paper (dead ends, kept for reference) -----------------------&lt;br /&gt;
   Attempts to fake the multiply from the opaque dark-on-white PNGs by masking a&lt;br /&gt;
   dark tint. The plain luminance mask keeps the white and floods the card; the&lt;br /&gt;
   inverted -crisp version keeps the whole field bright and washes it out. Both&lt;br /&gt;
   were rejected on looks. The transparent overlay above replaced them. */&lt;br /&gt;
.itembox.itembox-mask-crisp-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: none;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
    opacity: var(--itembox-tex-mask-opacity);&lt;br /&gt;
    mask-image: var(--itembox-paper);&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
    filter: invert(1);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-crisp-soft-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: none;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
    opacity: 0.75;&lt;br /&gt;
    mask-image: var(--itembox-paper);&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
    filter: invert(1);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: none;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
    opacity: var(--itembox-tex-mask-opacity);&lt;br /&gt;
    mask-image: var(--itembox-paper);&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-soft-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: none;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
    opacity: 0.3;&lt;br /&gt;
    mask-image: var(--itembox-paper);&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
}&lt;br /&gt;
/* Per-item paper for the masked variants, read from the hashed class. */&lt;br /&gt;
.itembox.itembox-mask-any-texture.itembox-texture-v1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-any-texture.itembox-texture-v2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-any-texture.itembox-texture-v3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Skipping offscreen cards only pays for itself when many are on screen at&lt;br /&gt;
   once. On narrow viewports about ten fit, so the saving is small while cards&lt;br /&gt;
   crossing the boundary force constant display list rebuilds — measured at&lt;br /&gt;
   roughly half the frame rate on Android with this enabled. */&lt;br /&gt;
@media (min-width: 900px) {&lt;br /&gt;
    .itembox {&lt;br /&gt;
        content-visibility: auto;&lt;br /&gt;
        contain-intrinsic-size: 8em 12.5em;&lt;br /&gt;
    }&lt;br /&gt;
}&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/User:Vergir?diff=99968</id>
		<title>User:Vergir</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/User:Vergir?diff=99968"/>
		<updated>2026-07-24T22:13:11Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Compare baseline against the inverted crisp mask at two weights, plus the old flooding mask for contrast (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
&lt;br /&gt;
= Holliday =&lt;br /&gt;
{{HeroStreetBrawlItems|Holliday|id=sb-items-holliday}}&lt;br /&gt;
&lt;br /&gt;
= Vindicta (has counter items) =&lt;br /&gt;
{{HeroStreetBrawlItems|Vindicta|id=sb-items-vindicta}}&lt;br /&gt;
&lt;br /&gt;
= ItemBox crisp mask comparison =&lt;br /&gt;
&lt;br /&gt;
The paper PNGs are dark grain on a white field. The earlier masks kept the white and flooded the card dark. These &amp;quot;crisp&amp;quot; variants invert the paper first, so the dark tint lands only on the grain lines over an otherwise clear card. Both the invert and the mask are single-image clips, so this should cache and stay smooth while scrolling. Icon mask and real wear are kept; only the paper method changes.&lt;br /&gt;
&lt;br /&gt;
== 1. Baseline ==&lt;br /&gt;
The real look everywhere else: paper multiplied over the whole card.&lt;br /&gt;
&lt;br /&gt;
{{ItemBox|itemName=Active Reload}} {{ItemBox|itemName=Alchemical Fire}} {{ItemBox|itemName=Arctic Blast}} {{ItemBox|itemName=Berserker}} {{ItemBox|itemName=Bullet Armor}} {{ItemBox|itemName=Cheat Death}} {{ItemBox|itemName=Colossus}} {{ItemBox|itemName=Crippling Headshot}} {{ItemBox|itemName=Divine Barrier}} {{ItemBox|itemName=Echo Shard}}&lt;br /&gt;
&lt;br /&gt;
== 2. Crisp mask, 0.55 ==&lt;br /&gt;
Grain lines only, moderate weight.&lt;br /&gt;
&lt;br /&gt;
{{ItemBox|itemName=Active Reload|texture=mask-crisp}} {{ItemBox|itemName=Alchemical Fire|texture=mask-crisp}} {{ItemBox|itemName=Arctic Blast|texture=mask-crisp}} {{ItemBox|itemName=Berserker|texture=mask-crisp}} {{ItemBox|itemName=Bullet Armor|texture=mask-crisp}} {{ItemBox|itemName=Cheat Death|texture=mask-crisp}} {{ItemBox|itemName=Colossus|texture=mask-crisp}} {{ItemBox|itemName=Crippling Headshot|texture=mask-crisp}} {{ItemBox|itemName=Divine Barrier|texture=mask-crisp}} {{ItemBox|itemName=Echo Shard|texture=mask-crisp}}&lt;br /&gt;
&lt;br /&gt;
== 3. Crisp mask, 0.75 (heavier) ==&lt;br /&gt;
Same but the grain reads stronger.&lt;br /&gt;
&lt;br /&gt;
{{ItemBox|itemName=Active Reload|texture=mask-crisp-soft}} {{ItemBox|itemName=Alchemical Fire|texture=mask-crisp-soft}} {{ItemBox|itemName=Arctic Blast|texture=mask-crisp-soft}} {{ItemBox|itemName=Berserker|texture=mask-crisp-soft}} {{ItemBox|itemName=Bullet Armor|texture=mask-crisp-soft}} {{ItemBox|itemName=Cheat Death|texture=mask-crisp-soft}} {{ItemBox|itemName=Colossus|texture=mask-crisp-soft}} {{ItemBox|itemName=Crippling Headshot|texture=mask-crisp-soft}} {{ItemBox|itemName=Divine Barrier|texture=mask-crisp-soft}} {{ItemBox|itemName=Echo Shard|texture=mask-crisp-soft}}&lt;br /&gt;
&lt;br /&gt;
== 4. Old flooding mask (for contrast) ==&lt;br /&gt;
The non-inverted version, which keeps the white and washes the card dark. This is the wrong one; here only to show the difference.&lt;br /&gt;
&lt;br /&gt;
{{ItemBox|itemName=Active Reload|texture=mask}} {{ItemBox|itemName=Alchemical Fire|texture=mask}} {{ItemBox|itemName=Arctic Blast|texture=mask}} {{ItemBox|itemName=Berserker|texture=mask}} {{ItemBox|itemName=Bullet Armor|texture=mask}} {{ItemBox|itemName=Cheat Death|texture=mask}} {{ItemBox|itemName=Colossus|texture=mask}} {{ItemBox|itemName=Crippling Headshot|texture=mask}} {{ItemBox|itemName=Divine Barrier|texture=mask}} {{ItemBox|itemName=Echo Shard|texture=mask}}&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox?diff=99967</id>
		<title>Template:ItemBox</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox?diff=99967"/>
		<updated>2026-07-24T22:09:03Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Add texture=mask-crisp and mask-crisp-soft switch values (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;templatestyles src=&amp;quot;Template:ItemBox/styles.css&amp;quot; /&amp;gt;&amp;lt;includeonly&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{#vardefine:itemName|{{{itemName|{{{1}}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Display name: Lang string for the codename, else the raw name, then override.&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#invoke:Lang|get_string|{{#invoke:ItemData|get_codename|{{#var:itemName}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#if:{{#var:displayName}}|{{#var:displayName}}|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Measured name size (em) and stable per-item texture variety.&lt;br /&gt;
--&amp;gt;{{#vardefine:fontSize|{{#invoke:ItemBox|getFontSize|{{#var:displayName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Modifier classes: slot (Weapon/Armor/Tech from data, or Weapon/Vitality/Spirit override -&amp;gt; weapon/vitality/spirit), tier, tags.&lt;br /&gt;
--&amp;gt;{{#vardefine:slot|{{#switch:{{{overrideSlot|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Slot}}}}}|Weapon=itembox-weapon|Armor|Vitality=itembox-vitality|Tech|Spirit=itembox-spirit}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:tier|itembox-tier-{{{overrideTier|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Tier}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:showTierTag|{{#ifeq:{{{showTierTag|}}}|true|itembox-show-tier}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{{overrideIsActive|{{#invoke:ItemData|is_active|{{#var:itemName}}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{#ifeq:{{#var:isActive}}|true|itembox-active}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{{overrideIsImbue|{{#invoke:ItemData|get_prop|{{#var:itemName}}|IsImbue}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     lowGraphics=true is the setting for callers that place dozens of cards on&lt;br /&gt;
     one page. It drops the paper texture, because every way of drawing it as a&lt;br /&gt;
     multiply blends two images together, and WebRender re-rasterises any such&lt;br /&gt;
     blend on every scrolled frame instead of caching it as a static tile. On the&lt;br /&gt;
     profiled navbox that blend was the whole cost: dropping it took the render&lt;br /&gt;
     thread&#039;s OpenGL work from ~230 ms/s to ~10 and roughly doubled the frame&lt;br /&gt;
     rate. The wear and icon masks are clips of a single image, not blends of&lt;br /&gt;
     two, so they cache once rasterised and are kept at full detail here.&lt;br /&gt;
--&amp;gt;{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-no-texture}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     The same layers individually, for testing combinations or overriding the&lt;br /&gt;
     bundle above. wearMask drops the mask from the wear tint three ways:&lt;br /&gt;
     no   - tint moves behind the artwork, so only the card stock is coloured&lt;br /&gt;
     ramp - tint stays on top, fading in from the card&#039;s edges&lt;br /&gt;
     soft - tint stays on top, uniform and lighter, with the name lifted clear&lt;br /&gt;
     texture handles the paper grain:&lt;br /&gt;
     no    - drop it entirely&lt;br /&gt;
     1/2/3 - one shared paper via the mix-blend overlay (does not cache)&lt;br /&gt;
     blend / blend1..3 - paper multiplied into the card art (does not cache)&lt;br /&gt;
     mask / mask-soft - paper as a luminance mask over a dark tint; the paper is&lt;br /&gt;
             dark-on-white so these flood dark and are kept only for reference&lt;br /&gt;
     mask-crisp / mask-crisp-soft - the paper inverted first, so the tint lands&lt;br /&gt;
             only on the grain lines. A clip, so it caches while scrolling.&lt;br /&gt;
--&amp;gt;{{#vardefine:lite|{{#switch:{{{wearMask|}}}|no=itembox-flat-wear|ramp=itembox-ramp-wear|soft=itembox-soft-wear}} {{#ifeq:{{{iconMask|}}}|no|itembox-flat-icon}} {{#switch:{{{texture|}}}|no=itembox-no-texture|1=itembox-force-tex-1|2=itembox-force-tex-2|3=itembox-force-tex-3|blend=itembox-blend-texture|blend1=itembox-blend-texture itembox-blend-tex-1|blend2=itembox-blend-texture itembox-blend-tex-2|blend3=itembox-blend-texture itembox-blend-tex-3|mask=itembox-mask-texture itembox-mask-any-texture|mask-soft=itembox-mask-soft-texture itembox-mask-any-texture|mask-crisp=itembox-mask-crisp-texture itembox-mask-any-texture|mask-crisp-soft=itembox-mask-crisp-soft-texture itembox-mask-any-texture}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Links.&lt;br /&gt;
--&amp;gt;{{#vardefine:linkTooltip|{{{overrideLinkTooltip|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkImage|{{{overrideLinkImage|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
--&amp;gt;&amp;lt;div class=&amp;quot;itembox {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}} {{#var:variants}} {{#var:lowGraphics}} {{#var:lite}}&amp;quot; style=&amp;quot;font-size:{{#expr: 10 * {{#if:{{{size|}}}|{{{size}}}|1}} }}px;&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;itembox-background&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;div class=&amp;quot;itembox-card&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-icon-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-icon&amp;quot;&amp;gt;[[File:{{#var:linkImage}}.png|160px|link=]]&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-tier-badge&amp;quot;&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-shadow&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-fill&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-number&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-imbue-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_imbue}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-name-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;p class=&amp;quot;itembox-name&amp;quot; style=&amp;quot;font-size:{{#var:fontSize}}em;text-wrap:balance;&amp;quot;&amp;gt;{{#var:displayName}}&amp;lt;/p&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-wear&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-texture&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-bevel&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-active-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_active}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-outline&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
		&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;item-link-wrapper&amp;quot; data-item-name=&amp;quot;{{#var:linkTooltip}}&amp;quot;&amp;gt;[[{{#var:linkClick}}|&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;]]&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&amp;lt;/includeonly&amp;gt;&amp;lt;noinclude&amp;gt;{{Documentation}}&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox/styles.css?diff=99966</id>
		<title>Template:ItemBox/styles.css</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox/styles.css?diff=99966"/>
		<updated>2026-07-24T22:08:31Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Add mask-crisp variants: invert the dark-grain-on-white paper via filter so the luminance mask keeps only the grain lines, giving grain-coloured tint on a clear card instead of a dark wash (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
&lt;br /&gt;
/* The whole card scales off one knob: font-size on .itembox (1em = 10px base) */&lt;br /&gt;
.itembox,&lt;br /&gt;
.itembox * {&lt;br /&gt;
    margin: 0;&lt;br /&gt;
    padding: 0;&lt;br /&gt;
    border: 0;&lt;br /&gt;
    box-sizing: border-box;&lt;br /&gt;
}&lt;br /&gt;
.itembox {&lt;br /&gt;
    --itembox-ink: #10130D;&lt;br /&gt;
    --itembox-weapon: #EC981a;&lt;br /&gt;
    --itembox-vitality: #7CBB1E;&lt;br /&gt;
    --itembox-spirit: #CE91FF;&lt;br /&gt;
    --itembox-imbue-fg: #E8C9FF;&lt;br /&gt;
    --itembox-imbue-bg: #623585;&lt;br /&gt;
    --itembox-wear-tint: #ffffff;&lt;br /&gt;
    --itembox-wear-ramp: 75%;&lt;br /&gt;
    --itembox-card-image: none;&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
    --itembox-tex-mask-opacity: 0.55;&lt;br /&gt;
    --itembox-font: &#039;Retail Demo&#039;, sans-serif;&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: inline-block;&lt;br /&gt;
    font-size: 10px;&lt;br /&gt;
    width: 8em;&lt;br /&gt;
    height: 12.5em;&lt;br /&gt;
    border-radius: 0.6em;&lt;br /&gt;
    box-shadow: 0.2em 0.2em 1.2em #00000097;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
    transition-duration: 0.1s;&lt;br /&gt;
    transition-property: opacity, transform, filter;&lt;br /&gt;
}&lt;br /&gt;
.itembox-background {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    pointer-events: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-card {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-image: var(--itembox-card-image);&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    /* Confines mix-blend-mode below to the card. Without it the blend group&lt;br /&gt;
       reaches the page backdrop and the card cannot be cached as one layer. */&lt;br /&gt;
    isolation: isolate;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Card art is held in a variable so the blend mode below can compose paper&lt;br /&gt;
   against it on the same element. The pairs collapse: T5 reuses the T4 image. */&lt;br /&gt;
.itembox-tier-1.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/3/3e/Weapon_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/9/96/Weapon_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/5/5d/Weapon_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-weapon,&lt;br /&gt;
.itembox-tier-5.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/a6/Weapon_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/7/75/Armor_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/0/05/Armor_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/7/7c/Armor_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-vitality,&lt;br /&gt;
.itembox-tier-5.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/1/18/Armor_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/af/Tech_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/ac/Tech_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/6/67/Tech_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-spirit,&lt;br /&gt;
.itembox-tier-5.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/f/f5/Tech_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-icon-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    align-items: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    aspect-ratio: 1 / 1;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    background-repeat: no-repeat;&lt;br /&gt;
    mask-size: cover;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon &amp;gt; span,&lt;br /&gt;
.itembox-icon &amp;gt; span &amp;gt; span,&lt;br /&gt;
.itembox-icon picture {&lt;br /&gt;
    display: block;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon img {&lt;br /&gt;
    display: block;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    max-width: 100%;&lt;br /&gt;
    max-height: 100%;&lt;br /&gt;
    object-fit: cover;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-icon-v1 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/1/10/Icon_mask01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon-v2 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/6/6f/Icon_mask02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon-v3 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/9/96/Icon_mask03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-badge {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0;&lt;br /&gt;
    right: 0;&lt;br /&gt;
    width: 2.8em;&lt;br /&gt;
    height: 2.8em;&lt;br /&gt;
    transform: scale(1.4);&lt;br /&gt;
    transform-origin: top right;&lt;br /&gt;
    /* display:none rather than visibility:hidden so the badge and its&lt;br /&gt;
       drop-shadow() cost nothing on the cards that never show it. */&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-show-tier .itembox-tier-badge {&lt;br /&gt;
    display: block;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-badge-fill {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    mask-size: 2.2em;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-position: right 0;&lt;br /&gt;
    mask-image: url(&#039;/images/6/61/Tier_corner_cap.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-badge-shadow {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0;&lt;br /&gt;
    left: 0;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-size: 2.2em;&lt;br /&gt;
    background-repeat: no-repeat;&lt;br /&gt;
    background-position: right 0;&lt;br /&gt;
    background-image: url(&#039;/images/6/61/Tier_corner_cap.svg&#039;);&lt;br /&gt;
    filter: drop-shadow(-0.4em 0 0.6em #000000ff);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-weapon .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-weapon);&lt;br /&gt;
}&lt;br /&gt;
.itembox-vitality .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-vitality);&lt;br /&gt;
}&lt;br /&gt;
.itembox-spirit .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-spirit);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-badge-number {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    right: 0;&lt;br /&gt;
    top: 0.3em;&lt;br /&gt;
    height: 0.8em;&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.5em;&lt;br /&gt;
    right: 0.4em;&lt;br /&gt;
    mask-image: url(&#039;/images/2/24/Tier_numbers_small_01.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.7em;&lt;br /&gt;
    right: 0.3em;&lt;br /&gt;
    mask-image: url(&#039;/images/7/74/Tier_numbers_small_02.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.9em;&lt;br /&gt;
    right: 0.2em;&lt;br /&gt;
    mask-image: url(&#039;/images/5/54/Tier_numbers_small_03.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4 .itembox-tier-badge-number {&lt;br /&gt;
    width: 1.1em;&lt;br /&gt;
    mask-image: url(&#039;/images/c/c6/Tier_numbers_small_04.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-5 .itembox-tier-badge-number {&lt;br /&gt;
    width: 1.1em;&lt;br /&gt;
    right: 0.1em;&lt;br /&gt;
    mask-image: url(&#039;/images/8/81/Tier_numbers_small_05.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-imbue-tag {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    bottom: 0;&lt;br /&gt;
    display: none;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: fit-content;&lt;br /&gt;
    font-size: 1.2em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    line-height: normal;&lt;br /&gt;
    letter-spacing: 0.1em;&lt;br /&gt;
    white-space: nowrap;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    text-transform: uppercase;&lt;br /&gt;
    border-radius: 0.2em;&lt;br /&gt;
    padding: 0 0.3em;&lt;br /&gt;
    color: var(--itembox-imbue-fg);&lt;br /&gt;
    background-color: var(--itembox-imbue-bg);&lt;br /&gt;
}&lt;br /&gt;
.itembox-imbue .itembox-imbue-tag {&lt;br /&gt;
    display: flex;&lt;br /&gt;
}&lt;br /&gt;
.itembox-active.itembox-imbue .itembox-imbue-tag {&lt;br /&gt;
    justify-content: start;&lt;br /&gt;
    height: 2.2em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-name-area {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 4.5em;&lt;br /&gt;
    padding: 0.5em 0.4em;&lt;br /&gt;
}&lt;br /&gt;
.itembox-name {&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    line-height: 1.2;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    font-size: 1.5em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    color: var(--itembox-ink);&lt;br /&gt;
    overflow-wrap: normal;&lt;br /&gt;
    word-break: normal;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-4.itembox-weapon .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-weapon .itembox-name {&lt;br /&gt;
    color: #e4c5a1;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-vitality .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-vitality .itembox-name {&lt;br /&gt;
    color: #c2e7cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-spirit .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-spirit .itembox-name {&lt;br /&gt;
    color: #e3d4f2;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-wear {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    opacity: 0.7;&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    background-color: white;&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v1 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/8/8f/Card_PaperWear_1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v2 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/1/11/Card_PaperWear_2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v3 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/8/89/Card_PaperWear_3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v4 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/5/52/Card_PaperWear_4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-1.itembox-vitality .itembox-wear {&lt;br /&gt;
    opacity: 1;&lt;br /&gt;
    background-color: #f4e2cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit .itembox-wear {&lt;br /&gt;
    opacity: 1;&lt;br /&gt;
    background-color: rgb(247, 232, 213);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 .itembox-wear {&lt;br /&gt;
    background-color: rgb(230, 209, 191);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 .itembox-wear {&lt;br /&gt;
    background-color: rgb(206, 173, 155);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4 .itembox-wear,&lt;br /&gt;
.itembox-tier-5 .itembox-wear {&lt;br /&gt;
    background-color: rgb(105, 97, 92);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Same tier colours again as a custom property. A gradient cannot read&lt;br /&gt;
   background-color, so the ramp variant below needs them in this form. */&lt;br /&gt;
.itembox-tier-1.itembox-vitality {&lt;br /&gt;
    --itembox-wear-tint: #f4e2cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit {&lt;br /&gt;
    --itembox-wear-tint: rgb(247, 232, 213);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 {&lt;br /&gt;
    --itembox-wear-tint: rgb(230, 209, 191);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 {&lt;br /&gt;
    --itembox-wear-tint: rgb(206, 173, 155);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4,&lt;br /&gt;
.itembox-tier-5 {&lt;br /&gt;
    --itembox-wear-tint: rgb(105, 97, 92);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-texture {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-size: 100% 100%;&lt;br /&gt;
    mix-blend-mode: multiply;&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v1 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v2 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v3 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Overrides the per-item texture so every card shares one image, which keeps a&lt;br /&gt;
   single paper texture resident in the GPU cache instead of three. Higher&lt;br /&gt;
   specificity than the hashed classes above, so it wins regardless of which&lt;br /&gt;
   variant the item&#039;s name landed on. */&lt;br /&gt;
.itembox.itembox-force-tex-1 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-force-tex-2 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-force-tex-3 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Two hairlines at ~13% alpha: screen and normal blending land within ~2% of&lt;br /&gt;
   each other here, so the blend mode is dropped and the layer stays cheap. */&lt;br /&gt;
.itembox-bevel {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    border-left: 0.1em solid #ffcc6622;&lt;br /&gt;
    border-top: 0.1em solid #ffcc6622;&lt;br /&gt;
    background-size: 100% 100%;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-active-tag {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    bottom: 3.5em;&lt;br /&gt;
    display: none;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    align-self: center;&lt;br /&gt;
    width: fit-content;&lt;br /&gt;
    height: fit-content;&lt;br /&gt;
    font-size: 1.1em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    line-height: normal;&lt;br /&gt;
    letter-spacing: 0;&lt;br /&gt;
    white-space: nowrap;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    text-transform: uppercase;&lt;br /&gt;
    border-radius: 0.2em;&lt;br /&gt;
    padding: 0.1em 0.6em;&lt;br /&gt;
    box-shadow: 0 0 1.5em #000000ff;&lt;br /&gt;
    color: #ffefd7b3;&lt;br /&gt;
    background-color: #171717;&lt;br /&gt;
}&lt;br /&gt;
.itembox-active .itembox-active-tag {&lt;br /&gt;
    display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox .item-link-wrapper,&lt;br /&gt;
.itembox .item-link-wrapper &amp;gt; a {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    display: block;&lt;br /&gt;
    inset: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* ---------------------------------------------------------------------------&lt;br /&gt;
   Opt-in simplifications, set through the parameters on [[Template:ItemBox]].&lt;br /&gt;
   Each removes work the GPU repeats for every card on screen: a masked element&lt;br /&gt;
   costs an extra render pass, and mix-blend-mode costs a backdrop read. Callers&lt;br /&gt;
   that place dozens of cards at once can trade the paper detail for the frames.&lt;br /&gt;
   --------------------------------------------------------------------------- */&lt;br /&gt;
&lt;br /&gt;
/* The wear patterns are concentrated at the card&#039;s edges and largely clear in&lt;br /&gt;
   the middle, so a gradient can stand in for the mask: transparent through the&lt;br /&gt;
   centre, tint gathering at the border. --itembox-wear-ramp is where the&lt;br /&gt;
   falloff starts and is the one value worth tuning. The name is lifted clear so&lt;br /&gt;
   no amount of tint ever lands on the glyphs; the paper behind them still&lt;br /&gt;
   takes it, since the name area has no background of its own. Gradients are a&lt;br /&gt;
   native primitive, so this costs no extra render pass.  */&lt;br /&gt;
.itembox.itembox-ramp-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    background-color: transparent;&lt;br /&gt;
    background-image: radial-gradient(ellipse at 50% 45%, transparent var(--itembox-wear-ramp), var(--itembox-wear-tint) 100%);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-ramp-wear .itembox-name-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    z-index: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Kept for comparison against the ramp; drop whichever loses.&lt;br /&gt;
   flat - tint moves behind the artwork, colouring only the card stock&lt;br /&gt;
   soft - tint stays on top, uniform and lighter, name lifted clear */&lt;br /&gt;
.itembox.itembox-flat-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    z-index: -1;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-soft-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    opacity: 0.35;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-soft-wear .itembox-name-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    z-index: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-flat-icon .itembox-icon {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-no-texture .itembox-texture {&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Paper multiplied against the card art on the SAME element. Unlike&lt;br /&gt;
   mix-blend-mode (which reads the page backdrop and so cannot be cached),&lt;br /&gt;
   background-blend-mode blends the element&#039;s own layers, which WebRender keeps&lt;br /&gt;
   as a static tile — the whole point of the exercise. The separate .itembox-&lt;br /&gt;
   texture div is switched off since the paper now lives in the card layer.&lt;br /&gt;
   Caveat: this only reaches the card art, not the icon or the name, which are&lt;br /&gt;
   real content above the background rather than layers of it. --itembox-paper&lt;br /&gt;
   selects which of the three papers to use. */&lt;br /&gt;
.itembox.itembox-blend-texture .itembox-card {&lt;br /&gt;
    background-image: var(--itembox-paper), var(--itembox-card-image);&lt;br /&gt;
    background-size: cover, cover;&lt;br /&gt;
    background-blend-mode: multiply, normal;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture .itembox-texture {&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Per-item blend: read the paper from the item&#039;s own hashed texture-vN class,&lt;br /&gt;
   so blended cards keep the same variety the overlay had. The forced classes&lt;br /&gt;
   below outrank these when a single shared paper is wanted instead. */&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Forced single paper for the blend, e.g. from lowGraphics. */&lt;br /&gt;
.itembox.itembox-blend-tex-1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-tex-2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-tex-3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* ---- Masked paper -------------------------------------------------------&lt;br /&gt;
   The cacheable way to get grain onto the whole card. A mask reads one channel&lt;br /&gt;
   of one image to set alpha on one target; it never combines two colours, so&lt;br /&gt;
   WebRender caches the result as a static tile the way the wear layer already&lt;br /&gt;
   does. Here the .itembox-texture div becomes a solid dark tint that the paper&lt;br /&gt;
   PNG masks into a grain pattern, standing in for the multiply.&lt;br /&gt;
&lt;br /&gt;
   The paper PNGs are dark grain on a white field. A plain luminance mask keeps&lt;br /&gt;
   the WHITE, so the tint floods the card and drops out only along the grain,&lt;br /&gt;
   which reads as a heavy dark wash (the -mask/-mask-soft variants below, kept&lt;br /&gt;
   for reference). The -crisp variants first invert the paper with a filter, so&lt;br /&gt;
   the grain becomes the bright part the luminance mask keeps: tint lands only&lt;br /&gt;
   on the grain lines over an otherwise clear card. filter and mask are both&lt;br /&gt;
   single-image clips, so this still caches. --itembox-tex-mask-opacity sets the&lt;br /&gt;
   weight. */&lt;br /&gt;
.itembox.itembox-mask-crisp-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: none;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
    opacity: var(--itembox-tex-mask-opacity);&lt;br /&gt;
    mask-image: var(--itembox-paper);&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
    filter: invert(1);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-crisp-soft-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: none;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
    opacity: 0.75;&lt;br /&gt;
    mask-image: var(--itembox-paper);&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
    filter: invert(1);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Reference: the non-inverted masks that flood too dark. Kept so the contrast&lt;br /&gt;
   with the crisp variants is visible on the test page. */&lt;br /&gt;
.itembox.itembox-mask-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: none;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
    opacity: var(--itembox-tex-mask-opacity);&lt;br /&gt;
    mask-image: var(--itembox-paper);&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-soft-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: none;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
    opacity: 0.3;&lt;br /&gt;
    mask-image: var(--itembox-paper);&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
}&lt;br /&gt;
/* Per-item paper for the masked variants, read from the hashed class. */&lt;br /&gt;
.itembox.itembox-mask-any-texture.itembox-texture-v1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-any-texture.itembox-texture-v2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-any-texture.itembox-texture-v3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Skipping offscreen cards only pays for itself when many are on screen at&lt;br /&gt;
   once. On narrow viewports about ten fit, so the saving is small while cards&lt;br /&gt;
   crossing the boundary force constant display list rebuilds — measured at&lt;br /&gt;
   roughly half the frame rate on Android with this enabled. */&lt;br /&gt;
@media (min-width: 900px) {&lt;br /&gt;
    .itembox {&lt;br /&gt;
        content-visibility: auto;&lt;br /&gt;
        contain-intrinsic-size: 8em 12.5em;&lt;br /&gt;
    }&lt;br /&gt;
}&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/User:Vergir?diff=99965</id>
		<title>User:Vergir</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/User:Vergir?diff=99965"/>
		<updated>2026-07-24T21:44:46Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Compare baseline against the three mask-texture variants (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
&lt;br /&gt;
= Holliday =&lt;br /&gt;
{{HeroStreetBrawlItems|Holliday|id=sb-items-holliday}}&lt;br /&gt;
&lt;br /&gt;
= Vindicta (has counter items) =&lt;br /&gt;
{{HeroStreetBrawlItems|Vindicta|id=sb-items-vindicta}}&lt;br /&gt;
&lt;br /&gt;
= ItemBox mask-texture comparison =&lt;br /&gt;
&lt;br /&gt;
Instead of multiplying paper over the card (which does not cache), the paper PNG is used as a mask over a solid dark tint. A mask is a clip of one image, so it caches like the wear layer and should stay smooth while scrolling. The trade is that it darkens toward one flat colour rather than the paper&#039;s own tones, so it reads as monochrome grain. Three takes below; the icon mask and real wear are kept, only the paper method changes.&lt;br /&gt;
&lt;br /&gt;
== 1. Baseline ==&lt;br /&gt;
The real look everywhere else: paper multiplied over the whole card.&lt;br /&gt;
&lt;br /&gt;
{{ItemBox|itemName=Active Reload}} {{ItemBox|itemName=Alchemical Fire}} {{ItemBox|itemName=Arctic Blast}} {{ItemBox|itemName=Berserker}} {{ItemBox|itemName=Bullet Armor}} {{ItemBox|itemName=Cheat Death}} {{ItemBox|itemName=Colossus}} {{ItemBox|itemName=Crippling Headshot}} {{ItemBox|itemName=Divine Barrier}} {{ItemBox|itemName=Echo Shard}}&lt;br /&gt;
&lt;br /&gt;
== 2. Mask, luminance (default 0.55) ==&lt;br /&gt;
Paper&#039;s brightness sets where the dark tint shows.&lt;br /&gt;
&lt;br /&gt;
{{ItemBox|itemName=Active Reload|texture=mask}} {{ItemBox|itemName=Alchemical Fire|texture=mask}} {{ItemBox|itemName=Arctic Blast|texture=mask}} {{ItemBox|itemName=Berserker|texture=mask}} {{ItemBox|itemName=Bullet Armor|texture=mask}} {{ItemBox|itemName=Cheat Death|texture=mask}} {{ItemBox|itemName=Colossus|texture=mask}} {{ItemBox|itemName=Crippling Headshot|texture=mask}} {{ItemBox|itemName=Divine Barrier|texture=mask}} {{ItemBox|itemName=Echo Shard|texture=mask}}&lt;br /&gt;
&lt;br /&gt;
== 3. Mask, alpha (in case luminance reads inverted) ==&lt;br /&gt;
Uses the paper&#039;s own transparency rather than its brightness.&lt;br /&gt;
&lt;br /&gt;
{{ItemBox|itemName=Active Reload|texture=mask-inv}} {{ItemBox|itemName=Alchemical Fire|texture=mask-inv}} {{ItemBox|itemName=Arctic Blast|texture=mask-inv}} {{ItemBox|itemName=Berserker|texture=mask-inv}} {{ItemBox|itemName=Bullet Armor|texture=mask-inv}} {{ItemBox|itemName=Cheat Death|texture=mask-inv}} {{ItemBox|itemName=Colossus|texture=mask-inv}} {{ItemBox|itemName=Crippling Headshot|texture=mask-inv}} {{ItemBox|itemName=Divine Barrier|texture=mask-inv}} {{ItemBox|itemName=Echo Shard|texture=mask-inv}}&lt;br /&gt;
&lt;br /&gt;
== 4. Mask, soft (luminance, lighter) ==&lt;br /&gt;
Same as section 2 but at a lower opacity for subtle grain.&lt;br /&gt;
&lt;br /&gt;
{{ItemBox|itemName=Active Reload|texture=mask-soft}} {{ItemBox|itemName=Alchemical Fire|texture=mask-soft}} {{ItemBox|itemName=Arctic Blast|texture=mask-soft}} {{ItemBox|itemName=Berserker|texture=mask-soft}} {{ItemBox|itemName=Bullet Armor|texture=mask-soft}} {{ItemBox|itemName=Cheat Death|texture=mask-soft}} {{ItemBox|itemName=Colossus|texture=mask-soft}} {{ItemBox|itemName=Crippling Headshot|texture=mask-soft}} {{ItemBox|itemName=Divine Barrier|texture=mask-soft}} {{ItemBox|itemName=Echo Shard|texture=mask-soft}}&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox?diff=99964</id>
		<title>Template:ItemBox</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox?diff=99964"/>
		<updated>2026-07-24T21:44:27Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Add texture=mask, mask-inv and mask-soft switch values (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;templatestyles src=&amp;quot;Template:ItemBox/styles.css&amp;quot; /&amp;gt;&amp;lt;includeonly&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{#vardefine:itemName|{{{itemName|{{{1}}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Display name: Lang string for the codename, else the raw name, then override.&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#invoke:Lang|get_string|{{#invoke:ItemData|get_codename|{{#var:itemName}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#if:{{#var:displayName}}|{{#var:displayName}}|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Measured name size (em) and stable per-item texture variety.&lt;br /&gt;
--&amp;gt;{{#vardefine:fontSize|{{#invoke:ItemBox|getFontSize|{{#var:displayName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Modifier classes: slot (Weapon/Armor/Tech from data, or Weapon/Vitality/Spirit override -&amp;gt; weapon/vitality/spirit), tier, tags.&lt;br /&gt;
--&amp;gt;{{#vardefine:slot|{{#switch:{{{overrideSlot|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Slot}}}}}|Weapon=itembox-weapon|Armor|Vitality=itembox-vitality|Tech|Spirit=itembox-spirit}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:tier|itembox-tier-{{{overrideTier|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Tier}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:showTierTag|{{#ifeq:{{{showTierTag|}}}|true|itembox-show-tier}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{{overrideIsActive|{{#invoke:ItemData|is_active|{{#var:itemName}}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{#ifeq:{{#var:isActive}}|true|itembox-active}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{{overrideIsImbue|{{#invoke:ItemData|get_prop|{{#var:itemName}}|IsImbue}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     lowGraphics=true is the setting for callers that place dozens of cards on&lt;br /&gt;
     one page. It drops the paper texture, because every way of drawing it as a&lt;br /&gt;
     multiply blends two images together, and WebRender re-rasterises any such&lt;br /&gt;
     blend on every scrolled frame instead of caching it as a static tile. On the&lt;br /&gt;
     profiled navbox that blend was the whole cost: dropping it took the render&lt;br /&gt;
     thread&#039;s OpenGL work from ~230 ms/s to ~10 and roughly doubled the frame&lt;br /&gt;
     rate. The wear and icon masks are clips of a single image, not blends of&lt;br /&gt;
     two, so they cache once rasterised and are kept at full detail here.&lt;br /&gt;
--&amp;gt;{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-no-texture}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     The same layers individually, for testing combinations or overriding the&lt;br /&gt;
     bundle above. wearMask drops the mask from the wear tint three ways:&lt;br /&gt;
     no   - tint moves behind the artwork, so only the card stock is coloured&lt;br /&gt;
     ramp - tint stays on top, fading in from the card&#039;s edges&lt;br /&gt;
     soft - tint stays on top, uniform and lighter, with the name lifted clear&lt;br /&gt;
     texture handles the paper grain:&lt;br /&gt;
     no    - drop it entirely&lt;br /&gt;
     1/2/3 - one shared paper via the mix-blend overlay (does not cache)&lt;br /&gt;
     blend / blend1..3 - paper multiplied into the card art (does not cache)&lt;br /&gt;
     mask / mask-inv / mask-soft - paper used as a mask over a dark tint, a clip&lt;br /&gt;
             rather than a blend, so it caches while scrolling. mask and mask-inv&lt;br /&gt;
             differ in whether the grain reads from the paper&#039;s brightness or its&lt;br /&gt;
             alpha; mask-soft is a lighter luminance version.&lt;br /&gt;
--&amp;gt;{{#vardefine:lite|{{#switch:{{{wearMask|}}}|no=itembox-flat-wear|ramp=itembox-ramp-wear|soft=itembox-soft-wear}} {{#ifeq:{{{iconMask|}}}|no|itembox-flat-icon}} {{#switch:{{{texture|}}}|no=itembox-no-texture|1=itembox-force-tex-1|2=itembox-force-tex-2|3=itembox-force-tex-3|blend=itembox-blend-texture|blend1=itembox-blend-texture itembox-blend-tex-1|blend2=itembox-blend-texture itembox-blend-tex-2|blend3=itembox-blend-texture itembox-blend-tex-3|mask=itembox-mask-texture itembox-mask-any-texture|mask-inv=itembox-mask-inv-texture itembox-mask-any-texture|mask-soft=itembox-mask-soft-texture itembox-mask-any-texture}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Links.&lt;br /&gt;
--&amp;gt;{{#vardefine:linkTooltip|{{{overrideLinkTooltip|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkImage|{{{overrideLinkImage|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
--&amp;gt;&amp;lt;div class=&amp;quot;itembox {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}} {{#var:variants}} {{#var:lowGraphics}} {{#var:lite}}&amp;quot; style=&amp;quot;font-size:{{#expr: 10 * {{#if:{{{size|}}}|{{{size}}}|1}} }}px;&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;itembox-background&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;div class=&amp;quot;itembox-card&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-icon-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-icon&amp;quot;&amp;gt;[[File:{{#var:linkImage}}.png|160px|link=]]&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-tier-badge&amp;quot;&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-shadow&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-fill&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-number&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-imbue-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_imbue}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-name-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;p class=&amp;quot;itembox-name&amp;quot; style=&amp;quot;font-size:{{#var:fontSize}}em;text-wrap:balance;&amp;quot;&amp;gt;{{#var:displayName}}&amp;lt;/p&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-wear&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-texture&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-bevel&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-active-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_active}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-outline&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
		&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;item-link-wrapper&amp;quot; data-item-name=&amp;quot;{{#var:linkTooltip}}&amp;quot;&amp;gt;[[{{#var:linkClick}}|&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;]]&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&amp;lt;/includeonly&amp;gt;&amp;lt;noinclude&amp;gt;{{Documentation}}&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox/styles.css?diff=99963</id>
		<title>Template:ItemBox/styles.css</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox/styles.css?diff=99963"/>
		<updated>2026-07-24T21:43:54Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Add mask-based texture variants: paper PNGs used as masks over a dark tint instead of a blend, so the grain is a clip (which caches) rather than a multiply (which does not) (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
&lt;br /&gt;
/* The whole card scales off one knob: font-size on .itembox (1em = 10px base) */&lt;br /&gt;
.itembox,&lt;br /&gt;
.itembox * {&lt;br /&gt;
    margin: 0;&lt;br /&gt;
    padding: 0;&lt;br /&gt;
    border: 0;&lt;br /&gt;
    box-sizing: border-box;&lt;br /&gt;
}&lt;br /&gt;
.itembox {&lt;br /&gt;
    --itembox-ink: #10130D;&lt;br /&gt;
    --itembox-weapon: #EC981a;&lt;br /&gt;
    --itembox-vitality: #7CBB1E;&lt;br /&gt;
    --itembox-spirit: #CE91FF;&lt;br /&gt;
    --itembox-imbue-fg: #E8C9FF;&lt;br /&gt;
    --itembox-imbue-bg: #623585;&lt;br /&gt;
    --itembox-wear-tint: #ffffff;&lt;br /&gt;
    --itembox-wear-ramp: 75%;&lt;br /&gt;
    --itembox-card-image: none;&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
    --itembox-tex-mask-opacity: 0.55;&lt;br /&gt;
    --itembox-font: &#039;Retail Demo&#039;, sans-serif;&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: inline-block;&lt;br /&gt;
    font-size: 10px;&lt;br /&gt;
    width: 8em;&lt;br /&gt;
    height: 12.5em;&lt;br /&gt;
    border-radius: 0.6em;&lt;br /&gt;
    box-shadow: 0.2em 0.2em 1.2em #00000097;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
    transition-duration: 0.1s;&lt;br /&gt;
    transition-property: opacity, transform, filter;&lt;br /&gt;
}&lt;br /&gt;
.itembox-background {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    pointer-events: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-card {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-image: var(--itembox-card-image);&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    /* Confines mix-blend-mode below to the card. Without it the blend group&lt;br /&gt;
       reaches the page backdrop and the card cannot be cached as one layer. */&lt;br /&gt;
    isolation: isolate;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Card art is held in a variable so the blend mode below can compose paper&lt;br /&gt;
   against it on the same element. The pairs collapse: T5 reuses the T4 image. */&lt;br /&gt;
.itembox-tier-1.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/3/3e/Weapon_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/9/96/Weapon_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/5/5d/Weapon_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-weapon,&lt;br /&gt;
.itembox-tier-5.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/a6/Weapon_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/7/75/Armor_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/0/05/Armor_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/7/7c/Armor_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-vitality,&lt;br /&gt;
.itembox-tier-5.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/1/18/Armor_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/af/Tech_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/ac/Tech_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/6/67/Tech_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-spirit,&lt;br /&gt;
.itembox-tier-5.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/f/f5/Tech_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-icon-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    align-items: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    aspect-ratio: 1 / 1;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    background-repeat: no-repeat;&lt;br /&gt;
    mask-size: cover;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon &amp;gt; span,&lt;br /&gt;
.itembox-icon &amp;gt; span &amp;gt; span,&lt;br /&gt;
.itembox-icon picture {&lt;br /&gt;
    display: block;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon img {&lt;br /&gt;
    display: block;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    max-width: 100%;&lt;br /&gt;
    max-height: 100%;&lt;br /&gt;
    object-fit: cover;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-icon-v1 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/1/10/Icon_mask01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon-v2 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/6/6f/Icon_mask02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon-v3 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/9/96/Icon_mask03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-badge {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0;&lt;br /&gt;
    right: 0;&lt;br /&gt;
    width: 2.8em;&lt;br /&gt;
    height: 2.8em;&lt;br /&gt;
    transform: scale(1.4);&lt;br /&gt;
    transform-origin: top right;&lt;br /&gt;
    /* display:none rather than visibility:hidden so the badge and its&lt;br /&gt;
       drop-shadow() cost nothing on the cards that never show it. */&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-show-tier .itembox-tier-badge {&lt;br /&gt;
    display: block;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-badge-fill {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    mask-size: 2.2em;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-position: right 0;&lt;br /&gt;
    mask-image: url(&#039;/images/6/61/Tier_corner_cap.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-badge-shadow {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0;&lt;br /&gt;
    left: 0;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-size: 2.2em;&lt;br /&gt;
    background-repeat: no-repeat;&lt;br /&gt;
    background-position: right 0;&lt;br /&gt;
    background-image: url(&#039;/images/6/61/Tier_corner_cap.svg&#039;);&lt;br /&gt;
    filter: drop-shadow(-0.4em 0 0.6em #000000ff);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-weapon .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-weapon);&lt;br /&gt;
}&lt;br /&gt;
.itembox-vitality .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-vitality);&lt;br /&gt;
}&lt;br /&gt;
.itembox-spirit .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-spirit);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-badge-number {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    right: 0;&lt;br /&gt;
    top: 0.3em;&lt;br /&gt;
    height: 0.8em;&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.5em;&lt;br /&gt;
    right: 0.4em;&lt;br /&gt;
    mask-image: url(&#039;/images/2/24/Tier_numbers_small_01.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.7em;&lt;br /&gt;
    right: 0.3em;&lt;br /&gt;
    mask-image: url(&#039;/images/7/74/Tier_numbers_small_02.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.9em;&lt;br /&gt;
    right: 0.2em;&lt;br /&gt;
    mask-image: url(&#039;/images/5/54/Tier_numbers_small_03.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4 .itembox-tier-badge-number {&lt;br /&gt;
    width: 1.1em;&lt;br /&gt;
    mask-image: url(&#039;/images/c/c6/Tier_numbers_small_04.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-5 .itembox-tier-badge-number {&lt;br /&gt;
    width: 1.1em;&lt;br /&gt;
    right: 0.1em;&lt;br /&gt;
    mask-image: url(&#039;/images/8/81/Tier_numbers_small_05.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-imbue-tag {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    bottom: 0;&lt;br /&gt;
    display: none;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: fit-content;&lt;br /&gt;
    font-size: 1.2em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    line-height: normal;&lt;br /&gt;
    letter-spacing: 0.1em;&lt;br /&gt;
    white-space: nowrap;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    text-transform: uppercase;&lt;br /&gt;
    border-radius: 0.2em;&lt;br /&gt;
    padding: 0 0.3em;&lt;br /&gt;
    color: var(--itembox-imbue-fg);&lt;br /&gt;
    background-color: var(--itembox-imbue-bg);&lt;br /&gt;
}&lt;br /&gt;
.itembox-imbue .itembox-imbue-tag {&lt;br /&gt;
    display: flex;&lt;br /&gt;
}&lt;br /&gt;
.itembox-active.itembox-imbue .itembox-imbue-tag {&lt;br /&gt;
    justify-content: start;&lt;br /&gt;
    height: 2.2em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-name-area {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 4.5em;&lt;br /&gt;
    padding: 0.5em 0.4em;&lt;br /&gt;
}&lt;br /&gt;
.itembox-name {&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    line-height: 1.2;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    font-size: 1.5em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    color: var(--itembox-ink);&lt;br /&gt;
    overflow-wrap: normal;&lt;br /&gt;
    word-break: normal;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-4.itembox-weapon .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-weapon .itembox-name {&lt;br /&gt;
    color: #e4c5a1;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-vitality .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-vitality .itembox-name {&lt;br /&gt;
    color: #c2e7cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-spirit .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-spirit .itembox-name {&lt;br /&gt;
    color: #e3d4f2;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-wear {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    opacity: 0.7;&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    background-color: white;&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v1 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/8/8f/Card_PaperWear_1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v2 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/1/11/Card_PaperWear_2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v3 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/8/89/Card_PaperWear_3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v4 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/5/52/Card_PaperWear_4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-1.itembox-vitality .itembox-wear {&lt;br /&gt;
    opacity: 1;&lt;br /&gt;
    background-color: #f4e2cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit .itembox-wear {&lt;br /&gt;
    opacity: 1;&lt;br /&gt;
    background-color: rgb(247, 232, 213);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 .itembox-wear {&lt;br /&gt;
    background-color: rgb(230, 209, 191);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 .itembox-wear {&lt;br /&gt;
    background-color: rgb(206, 173, 155);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4 .itembox-wear,&lt;br /&gt;
.itembox-tier-5 .itembox-wear {&lt;br /&gt;
    background-color: rgb(105, 97, 92);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Same tier colours again as a custom property. A gradient cannot read&lt;br /&gt;
   background-color, so the ramp variant below needs them in this form. */&lt;br /&gt;
.itembox-tier-1.itembox-vitality {&lt;br /&gt;
    --itembox-wear-tint: #f4e2cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit {&lt;br /&gt;
    --itembox-wear-tint: rgb(247, 232, 213);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 {&lt;br /&gt;
    --itembox-wear-tint: rgb(230, 209, 191);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 {&lt;br /&gt;
    --itembox-wear-tint: rgb(206, 173, 155);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4,&lt;br /&gt;
.itembox-tier-5 {&lt;br /&gt;
    --itembox-wear-tint: rgb(105, 97, 92);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-texture {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-size: 100% 100%;&lt;br /&gt;
    mix-blend-mode: multiply;&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v1 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v2 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v3 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Overrides the per-item texture so every card shares one image, which keeps a&lt;br /&gt;
   single paper texture resident in the GPU cache instead of three. Higher&lt;br /&gt;
   specificity than the hashed classes above, so it wins regardless of which&lt;br /&gt;
   variant the item&#039;s name landed on. */&lt;br /&gt;
.itembox.itembox-force-tex-1 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-force-tex-2 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-force-tex-3 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Two hairlines at ~13% alpha: screen and normal blending land within ~2% of&lt;br /&gt;
   each other here, so the blend mode is dropped and the layer stays cheap. */&lt;br /&gt;
.itembox-bevel {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    border-left: 0.1em solid #ffcc6622;&lt;br /&gt;
    border-top: 0.1em solid #ffcc6622;&lt;br /&gt;
    background-size: 100% 100%;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-active-tag {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    bottom: 3.5em;&lt;br /&gt;
    display: none;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    align-self: center;&lt;br /&gt;
    width: fit-content;&lt;br /&gt;
    height: fit-content;&lt;br /&gt;
    font-size: 1.1em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    line-height: normal;&lt;br /&gt;
    letter-spacing: 0;&lt;br /&gt;
    white-space: nowrap;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    text-transform: uppercase;&lt;br /&gt;
    border-radius: 0.2em;&lt;br /&gt;
    padding: 0.1em 0.6em;&lt;br /&gt;
    box-shadow: 0 0 1.5em #000000ff;&lt;br /&gt;
    color: #ffefd7b3;&lt;br /&gt;
    background-color: #171717;&lt;br /&gt;
}&lt;br /&gt;
.itembox-active .itembox-active-tag {&lt;br /&gt;
    display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox .item-link-wrapper,&lt;br /&gt;
.itembox .item-link-wrapper &amp;gt; a {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    display: block;&lt;br /&gt;
    inset: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* ---------------------------------------------------------------------------&lt;br /&gt;
   Opt-in simplifications, set through the parameters on [[Template:ItemBox]].&lt;br /&gt;
   Each removes work the GPU repeats for every card on screen: a masked element&lt;br /&gt;
   costs an extra render pass, and mix-blend-mode costs a backdrop read. Callers&lt;br /&gt;
   that place dozens of cards at once can trade the paper detail for the frames.&lt;br /&gt;
   --------------------------------------------------------------------------- */&lt;br /&gt;
&lt;br /&gt;
/* The wear patterns are concentrated at the card&#039;s edges and largely clear in&lt;br /&gt;
   the middle, so a gradient can stand in for the mask: transparent through the&lt;br /&gt;
   centre, tint gathering at the border. --itembox-wear-ramp is where the&lt;br /&gt;
   falloff starts and is the one value worth tuning. The name is lifted clear so&lt;br /&gt;
   no amount of tint ever lands on the glyphs; the paper behind them still&lt;br /&gt;
   takes it, since the name area has no background of its own. Gradients are a&lt;br /&gt;
   native primitive, so this costs no extra render pass.  */&lt;br /&gt;
.itembox.itembox-ramp-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    background-color: transparent;&lt;br /&gt;
    background-image: radial-gradient(ellipse at 50% 45%, transparent var(--itembox-wear-ramp), var(--itembox-wear-tint) 100%);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-ramp-wear .itembox-name-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    z-index: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Kept for comparison against the ramp; drop whichever loses.&lt;br /&gt;
   flat - tint moves behind the artwork, colouring only the card stock&lt;br /&gt;
   soft - tint stays on top, uniform and lighter, name lifted clear */&lt;br /&gt;
.itembox.itembox-flat-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    z-index: -1;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-soft-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    opacity: 0.35;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-soft-wear .itembox-name-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    z-index: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-flat-icon .itembox-icon {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-no-texture .itembox-texture {&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Paper multiplied against the card art on the SAME element. Unlike&lt;br /&gt;
   mix-blend-mode (which reads the page backdrop and so cannot be cached),&lt;br /&gt;
   background-blend-mode blends the element&#039;s own layers, which WebRender keeps&lt;br /&gt;
   as a static tile — the whole point of the exercise. The separate .itembox-&lt;br /&gt;
   texture div is switched off since the paper now lives in the card layer.&lt;br /&gt;
   Caveat: this only reaches the card art, not the icon or the name, which are&lt;br /&gt;
   real content above the background rather than layers of it. --itembox-paper&lt;br /&gt;
   selects which of the three papers to use. */&lt;br /&gt;
.itembox.itembox-blend-texture .itembox-card {&lt;br /&gt;
    background-image: var(--itembox-paper), var(--itembox-card-image);&lt;br /&gt;
    background-size: cover, cover;&lt;br /&gt;
    background-blend-mode: multiply, normal;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture .itembox-texture {&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Per-item blend: read the paper from the item&#039;s own hashed texture-vN class,&lt;br /&gt;
   so blended cards keep the same variety the overlay had. The forced classes&lt;br /&gt;
   below outrank these when a single shared paper is wanted instead. */&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Forced single paper for the blend, e.g. from lowGraphics. */&lt;br /&gt;
.itembox.itembox-blend-tex-1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-tex-2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-tex-3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* ---- Masked paper -------------------------------------------------------&lt;br /&gt;
   The cacheable way to get grain onto the whole card. A mask reads one channel&lt;br /&gt;
   of one image to set alpha on one target; it never combines two colours, so&lt;br /&gt;
   WebRender caches the result as a static tile the way the wear layer already&lt;br /&gt;
   does. Here the .itembox-texture div becomes a solid dark tint that the paper&lt;br /&gt;
   PNG masks into a grain pattern, standing in for the multiply.&lt;br /&gt;
&lt;br /&gt;
   Because it is a clip and not a blend it darkens toward one flat colour rather&lt;br /&gt;
   than the paper&#039;s own tones, so it reads as monochrome grain. --itembox-tex-&lt;br /&gt;
   mask-opacity sets how heavy it is. Three takes below:&lt;br /&gt;
     mask      - luminance mask, paper&#039;s dark areas carry the tint&lt;br /&gt;
     mask-inv  - alpha mask, in case the grain reads inverted&lt;br /&gt;
     mask-soft - luminance, lighter, for subtle grain&lt;br /&gt;
   All reuse the paper PNGs already loaded for the overlay, so no new files. */&lt;br /&gt;
.itembox.itembox-mask-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: none;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
    opacity: var(--itembox-tex-mask-opacity);&lt;br /&gt;
    mask-image: var(--itembox-paper);&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-inv-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: none;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
    opacity: var(--itembox-tex-mask-opacity);&lt;br /&gt;
    mask-image: var(--itembox-paper);&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: alpha;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-soft-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    background-image: none;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
    opacity: 0.3;&lt;br /&gt;
    mask-image: var(--itembox-paper);&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
}&lt;br /&gt;
/* Per-item paper for the masked variants, read from the hashed class. */&lt;br /&gt;
.itembox.itembox-mask-any-texture.itembox-texture-v1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-any-texture.itembox-texture-v2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-mask-any-texture.itembox-texture-v3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Skipping offscreen cards only pays for itself when many are on screen at&lt;br /&gt;
   once. On narrow viewports about ten fit, so the saving is small while cards&lt;br /&gt;
   crossing the boundary force constant display list rebuilds — measured at&lt;br /&gt;
   roughly half the frame rate on Android with this enabled. */&lt;br /&gt;
@media (min-width: 900px) {&lt;br /&gt;
    .itembox {&lt;br /&gt;
        content-visibility: auto;&lt;br /&gt;
        contain-intrinsic-size: 8em 12.5em;&lt;br /&gt;
    }&lt;br /&gt;
}&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox?diff=99962</id>
		<title>Template:ItemBox</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox?diff=99962"/>
		<updated>2026-07-24T21:07:09Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Restore the icon mask and real masked wear on the lowGraphics path, keeping only texture off, to measure whether the masks affect scroll caching (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;templatestyles src=&amp;quot;Template:ItemBox/styles.css&amp;quot; /&amp;gt;&amp;lt;includeonly&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{#vardefine:itemName|{{{itemName|{{{1}}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Display name: Lang string for the codename, else the raw name, then override.&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#invoke:Lang|get_string|{{#invoke:ItemData|get_codename|{{#var:itemName}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#if:{{#var:displayName}}|{{#var:displayName}}|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Measured name size (em) and stable per-item texture variety.&lt;br /&gt;
--&amp;gt;{{#vardefine:fontSize|{{#invoke:ItemBox|getFontSize|{{#var:displayName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Modifier classes: slot (Weapon/Armor/Tech from data, or Weapon/Vitality/Spirit override -&amp;gt; weapon/vitality/spirit), tier, tags.&lt;br /&gt;
--&amp;gt;{{#vardefine:slot|{{#switch:{{{overrideSlot|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Slot}}}}}|Weapon=itembox-weapon|Armor|Vitality=itembox-vitality|Tech|Spirit=itembox-spirit}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:tier|itembox-tier-{{{overrideTier|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Tier}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:showTierTag|{{#ifeq:{{{showTierTag|}}}|true|itembox-show-tier}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{{overrideIsActive|{{#invoke:ItemData|is_active|{{#var:itemName}}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{#ifeq:{{#var:isActive}}|true|itembox-active}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{{overrideIsImbue|{{#invoke:ItemData|get_prop|{{#var:itemName}}|IsImbue}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     lowGraphics=true is the setting for callers that place dozens of cards on&lt;br /&gt;
     one page. It drops the paper texture, because every way of drawing it&lt;br /&gt;
     multiplies two images together, and WebRender re-rasterises and re-uploads&lt;br /&gt;
     any such blend on every scrolled frame instead of caching it as a static&lt;br /&gt;
     tile. On the profiled navbox that blend was the whole cost: dropping it took&lt;br /&gt;
     the render thread&#039;s OpenGL work from ~230 ms/s to ~10 and roughly doubled&lt;br /&gt;
     the frame rate. The wear and icon masks are clips of a single image, not&lt;br /&gt;
     blends of two, so they cache once rasterised and are kept at full detail&lt;br /&gt;
     here; only the texture is dropped.&lt;br /&gt;
--&amp;gt;{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-no-texture}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     The same layers individually, for testing combinations or overriding the&lt;br /&gt;
     bundle above. wearMask drops the mask from the wear tint three ways:&lt;br /&gt;
     no   - tint moves behind the artwork, so only the card stock is coloured&lt;br /&gt;
     ramp - tint stays on top, fading in from the card&#039;s edges&lt;br /&gt;
     soft - tint stays on top, uniform and lighter, with the name lifted clear&lt;br /&gt;
     texture handles the paper grain:&lt;br /&gt;
     no    - drop it entirely (the only option that caches while scrolling)&lt;br /&gt;
     1/2/3 - one shared paper via the mix-blend overlay&lt;br /&gt;
     blend / blend1..3 - paper multiplied into the card art. Both of these&lt;br /&gt;
             multiply two images and so are re-rasterised every scrolled frame;&lt;br /&gt;
             they are fine for a handful of cards but not for a full page.&lt;br /&gt;
--&amp;gt;{{#vardefine:lite|{{#switch:{{{wearMask|}}}|no=itembox-flat-wear|ramp=itembox-ramp-wear|soft=itembox-soft-wear}} {{#ifeq:{{{iconMask|}}}|no|itembox-flat-icon}} {{#switch:{{{texture|}}}|no=itembox-no-texture|1=itembox-force-tex-1|2=itembox-force-tex-2|3=itembox-force-tex-3|blend=itembox-blend-texture|blend1=itembox-blend-texture itembox-blend-tex-1|blend2=itembox-blend-texture itembox-blend-tex-2|blend3=itembox-blend-texture itembox-blend-tex-3}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Links.&lt;br /&gt;
--&amp;gt;{{#vardefine:linkTooltip|{{{overrideLinkTooltip|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkImage|{{{overrideLinkImage|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
--&amp;gt;&amp;lt;div class=&amp;quot;itembox {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}} {{#var:variants}} {{#var:lowGraphics}} {{#var:lite}}&amp;quot; style=&amp;quot;font-size:{{#expr: 10 * {{#if:{{{size|}}}|{{{size}}}|1}} }}px;&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;itembox-background&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;div class=&amp;quot;itembox-card&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-icon-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-icon&amp;quot;&amp;gt;[[File:{{#var:linkImage}}.png|160px|link=]]&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-tier-badge&amp;quot;&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-shadow&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-fill&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-number&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-imbue-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_imbue}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-name-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;p class=&amp;quot;itembox-name&amp;quot; style=&amp;quot;font-size:{{#var:fontSize}}em;text-wrap:balance;&amp;quot;&amp;gt;{{#var:displayName}}&amp;lt;/p&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-wear&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-texture&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-bevel&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-active-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_active}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-outline&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
		&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;item-link-wrapper&amp;quot; data-item-name=&amp;quot;{{#var:linkTooltip}}&amp;quot;&amp;gt;[[{{#var:linkClick}}|&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;]]&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&amp;lt;/includeonly&amp;gt;&amp;lt;noinclude&amp;gt;{{Documentation}}&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox?diff=99961</id>
		<title>Template:ItemBox</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox?diff=99961"/>
		<updated>2026-07-24T21:04:48Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Ship texture=no in lowGraphics: every paper approach reintroduces an image blend that WebRender re-rasterises each frame, so no texture is the only fast option (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;templatestyles src=&amp;quot;Template:ItemBox/styles.css&amp;quot; /&amp;gt;&amp;lt;includeonly&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{#vardefine:itemName|{{{itemName|{{{1}}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Display name: Lang string for the codename, else the raw name, then override.&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#invoke:Lang|get_string|{{#invoke:ItemData|get_codename|{{#var:itemName}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#if:{{#var:displayName}}|{{#var:displayName}}|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Measured name size (em) and stable per-item texture variety.&lt;br /&gt;
--&amp;gt;{{#vardefine:fontSize|{{#invoke:ItemBox|getFontSize|{{#var:displayName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Modifier classes: slot (Weapon/Armor/Tech from data, or Weapon/Vitality/Spirit override -&amp;gt; weapon/vitality/spirit), tier, tags.&lt;br /&gt;
--&amp;gt;{{#vardefine:slot|{{#switch:{{{overrideSlot|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Slot}}}}}|Weapon=itembox-weapon|Armor|Vitality=itembox-vitality|Tech|Spirit=itembox-spirit}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:tier|itembox-tier-{{{overrideTier|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Tier}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:showTierTag|{{#ifeq:{{{showTierTag|}}}|true|itembox-show-tier}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{{overrideIsActive|{{#invoke:ItemData|is_active|{{#var:itemName}}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{#ifeq:{{#var:isActive}}|true|itembox-active}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{{overrideIsImbue|{{#invoke:ItemData|get_prop|{{#var:itemName}}|IsImbue}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     lowGraphics=true is the setting for callers that place dozens of cards on&lt;br /&gt;
     one page. It drops the paper texture entirely, because every way of drawing&lt;br /&gt;
     it multiplies two images together, and WebRender re-rasterises and re-uploads&lt;br /&gt;
     any such blend on every scrolled frame instead of caching it as a static&lt;br /&gt;
     tile. On the profiled navbox that blend was the whole cost: dropping it took&lt;br /&gt;
     the render thread&#039;s OpenGL work from ~230 ms/s to ~10 and roughly doubled&lt;br /&gt;
     the frame rate. The wear tint also becomes a gradient and the icon mask is&lt;br /&gt;
     dropped, both cheaper per card, though the texture is the change that matters.&lt;br /&gt;
--&amp;gt;{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-ramp-wear itembox-flat-icon itembox-no-texture}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     The same layers individually, for testing combinations or overriding the&lt;br /&gt;
     bundle above. wearMask drops the mask from the wear tint three ways:&lt;br /&gt;
     no   - tint moves behind the artwork, so only the card stock is coloured&lt;br /&gt;
     ramp - tint stays on top, fading in from the card&#039;s edges&lt;br /&gt;
     soft - tint stays on top, uniform and lighter, with the name lifted clear&lt;br /&gt;
     texture handles the paper grain:&lt;br /&gt;
     no    - drop it entirely (the only option that caches while scrolling)&lt;br /&gt;
     1/2/3 - one shared paper via the mix-blend overlay&lt;br /&gt;
     blend / blend1..3 - paper multiplied into the card art. Both of these&lt;br /&gt;
             multiply two images and so are re-rasterised every scrolled frame;&lt;br /&gt;
             they are fine for a handful of cards but not for a full page.&lt;br /&gt;
--&amp;gt;{{#vardefine:lite|{{#switch:{{{wearMask|}}}|no=itembox-flat-wear|ramp=itembox-ramp-wear|soft=itembox-soft-wear}} {{#ifeq:{{{iconMask|}}}|no|itembox-flat-icon}} {{#switch:{{{texture|}}}|no=itembox-no-texture|1=itembox-force-tex-1|2=itembox-force-tex-2|3=itembox-force-tex-3|blend=itembox-blend-texture|blend1=itembox-blend-texture itembox-blend-tex-1|blend2=itembox-blend-texture itembox-blend-tex-2|blend3=itembox-blend-texture itembox-blend-tex-3}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Links.&lt;br /&gt;
--&amp;gt;{{#vardefine:linkTooltip|{{{overrideLinkTooltip|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkImage|{{{overrideLinkImage|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
--&amp;gt;&amp;lt;div class=&amp;quot;itembox {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}} {{#var:variants}} {{#var:lowGraphics}} {{#var:lite}}&amp;quot; style=&amp;quot;font-size:{{#expr: 10 * {{#if:{{{size|}}}|{{{size}}}|1}} }}px;&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;itembox-background&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;div class=&amp;quot;itembox-card&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-icon-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-icon&amp;quot;&amp;gt;[[File:{{#var:linkImage}}.png|160px|link=]]&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-tier-badge&amp;quot;&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-shadow&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-fill&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-number&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-imbue-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_imbue}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-name-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;p class=&amp;quot;itembox-name&amp;quot; style=&amp;quot;font-size:{{#var:fontSize}}em;text-wrap:balance;&amp;quot;&amp;gt;{{#var:displayName}}&amp;lt;/p&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-wear&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-texture&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-bevel&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-active-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_active}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-outline&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
		&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;item-link-wrapper&amp;quot; data-item-name=&amp;quot;{{#var:linkTooltip}}&amp;quot;&amp;gt;[[{{#var:linkClick}}|&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;]]&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&amp;lt;/includeonly&amp;gt;&amp;lt;noinclude&amp;gt;{{Documentation}}&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox?diff=99960</id>
		<title>Template:ItemBox</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox?diff=99960"/>
		<updated>2026-07-24T20:59:59Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Use per-item paper for the lowGraphics blend rather than forcing one, now that the blend caches regardless of variety (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;templatestyles src=&amp;quot;Template:ItemBox/styles.css&amp;quot; /&amp;gt;&amp;lt;includeonly&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{#vardefine:itemName|{{{itemName|{{{1}}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Display name: Lang string for the codename, else the raw name, then override.&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#invoke:Lang|get_string|{{#invoke:ItemData|get_codename|{{#var:itemName}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#if:{{#var:displayName}}|{{#var:displayName}}|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Measured name size (em) and stable per-item texture variety.&lt;br /&gt;
--&amp;gt;{{#vardefine:fontSize|{{#invoke:ItemBox|getFontSize|{{#var:displayName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Modifier classes: slot (Weapon/Armor/Tech from data, or Weapon/Vitality/Spirit override -&amp;gt; weapon/vitality/spirit), tier, tags.&lt;br /&gt;
--&amp;gt;{{#vardefine:slot|{{#switch:{{{overrideSlot|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Slot}}}}}|Weapon=itembox-weapon|Armor|Vitality=itembox-vitality|Tech|Spirit=itembox-spirit}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:tier|itembox-tier-{{{overrideTier|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Tier}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:showTierTag|{{#ifeq:{{{showTierTag|}}}|true|itembox-show-tier}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{{overrideIsActive|{{#invoke:ItemData|is_active|{{#var:itemName}}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{#ifeq:{{#var:isActive}}|true|itembox-active}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{{overrideIsImbue|{{#invoke:ItemData|get_prop|{{#var:itemName}}|IsImbue}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     lowGraphics=true is the setting for callers that place dozens of cards on&lt;br /&gt;
     one page. The wear tint becomes a gradient, the icon mask is dropped, and&lt;br /&gt;
     the paper texture is composited into the card art with background-blend-mode&lt;br /&gt;
     instead of the separate mix-blend-mode overlay. That last part is the change&lt;br /&gt;
     that matters: mix-blend-mode reads the page backdrop so WebRender&lt;br /&gt;
     re-rasterises those regions every scrolled frame, while a same-element blend&lt;br /&gt;
     stays a static tile. Removing the overlay blend cut the render thread&#039;s&lt;br /&gt;
     OpenGL work on the profiled navbox by around 90%. The blend reaches the card&lt;br /&gt;
     art but not the icon or the name, which sit above it as content. Paper is&lt;br /&gt;
     still chosen per item, since the blend caches regardless of which one.&lt;br /&gt;
--&amp;gt;{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-ramp-wear itembox-flat-icon itembox-blend-texture}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     The same layers individually, for testing combinations or overriding the&lt;br /&gt;
     bundle above. wearMask drops the mask from the wear tint three ways:&lt;br /&gt;
     no   - tint moves behind the artwork, so only the card stock is coloured&lt;br /&gt;
     ramp - tint stays on top, fading in from the card&#039;s edges&lt;br /&gt;
     soft - tint stays on top, uniform and lighter, with the name lifted clear&lt;br /&gt;
     texture handles the paper grain:&lt;br /&gt;
     no    - drop it entirely&lt;br /&gt;
     1/2/3 - one shared paper via the mix-blend overlay (does not cache)&lt;br /&gt;
     blend / blend1..3 - paper multiplied into the card art, cacheable; reaches&lt;br /&gt;
             the card art but not the icon or name&lt;br /&gt;
--&amp;gt;{{#vardefine:lite|{{#switch:{{{wearMask|}}}|no=itembox-flat-wear|ramp=itembox-ramp-wear|soft=itembox-soft-wear}} {{#ifeq:{{{iconMask|}}}|no|itembox-flat-icon}} {{#switch:{{{texture|}}}|no=itembox-no-texture|1=itembox-force-tex-1|2=itembox-force-tex-2|3=itembox-force-tex-3|blend=itembox-blend-texture|blend1=itembox-blend-texture itembox-blend-tex-1|blend2=itembox-blend-texture itembox-blend-tex-2|blend3=itembox-blend-texture itembox-blend-tex-3}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Links.&lt;br /&gt;
--&amp;gt;{{#vardefine:linkTooltip|{{{overrideLinkTooltip|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkImage|{{{overrideLinkImage|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
--&amp;gt;&amp;lt;div class=&amp;quot;itembox {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}} {{#var:variants}} {{#var:lowGraphics}} {{#var:lite}}&amp;quot; style=&amp;quot;font-size:{{#expr: 10 * {{#if:{{{size|}}}|{{{size}}}|1}} }}px;&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;itembox-background&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;div class=&amp;quot;itembox-card&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-icon-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-icon&amp;quot;&amp;gt;[[File:{{#var:linkImage}}.png|160px|link=]]&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-tier-badge&amp;quot;&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-shadow&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-fill&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-number&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-imbue-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_imbue}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-name-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;p class=&amp;quot;itembox-name&amp;quot; style=&amp;quot;font-size:{{#var:fontSize}}em;text-wrap:balance;&amp;quot;&amp;gt;{{#var:displayName}}&amp;lt;/p&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-wear&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-texture&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-bevel&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-active-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_active}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-outline&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
		&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;item-link-wrapper&amp;quot; data-item-name=&amp;quot;{{#var:linkTooltip}}&amp;quot;&amp;gt;[[{{#var:linkClick}}|&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;]]&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&amp;lt;/includeonly&amp;gt;&amp;lt;noinclude&amp;gt;{{Documentation}}&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/User:Vergir?diff=99959</id>
		<title>User:Vergir</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/User:Vergir?diff=99959"/>
		<updated>2026-07-24T20:48:06Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Compare baseline against the card-only blend texture now that split is retired (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
&lt;br /&gt;
= Holliday =&lt;br /&gt;
{{HeroStreetBrawlItems|Holliday|id=sb-items-holliday}}&lt;br /&gt;
&lt;br /&gt;
= Vindicta (has counter items) =&lt;br /&gt;
{{HeroStreetBrawlItems|Vindicta|id=sb-items-vindicta}}&lt;br /&gt;
&lt;br /&gt;
= ItemBox texture comparison =&lt;br /&gt;
&lt;br /&gt;
The paper is multiplied into the card art on the card element itself (background-blend-mode, which caches). This reaches the card stock but not the icon art or the name text, which sit above it as content. The question is whether that is close enough to baseline to ship.&lt;br /&gt;
&lt;br /&gt;
== 1. Baseline ==&lt;br /&gt;
The current look everywhere else: masked wear, icon mask, paper multiplied over the whole card via the overlay.&lt;br /&gt;
&lt;br /&gt;
{{ItemBox|itemName=Active Reload}} {{ItemBox|itemName=Alchemical Fire}} {{ItemBox|itemName=Arctic Blast}} {{ItemBox|itemName=Berserker}} {{ItemBox|itemName=Bullet Armor}} {{ItemBox|itemName=Cheat Death}} {{ItemBox|itemName=Colossus}} {{ItemBox|itemName=Crippling Headshot}} {{ItemBox|itemName=Divine Barrier}} {{ItemBox|itemName=Echo Shard}}&lt;br /&gt;
&lt;br /&gt;
== 2. Card-only blend, per item ==&lt;br /&gt;
Low graphics (ramped wear, no icon mask) with paper multiplied into the card art, paper chosen per item.&lt;br /&gt;
&lt;br /&gt;
{{ItemBox|itemName=Active Reload|wearMask=ramp|iconMask=no|texture=blend}} {{ItemBox|itemName=Alchemical Fire|wearMask=ramp|iconMask=no|texture=blend}} {{ItemBox|itemName=Arctic Blast|wearMask=ramp|iconMask=no|texture=blend}} {{ItemBox|itemName=Berserker|wearMask=ramp|iconMask=no|texture=blend}} {{ItemBox|itemName=Bullet Armor|wearMask=ramp|iconMask=no|texture=blend}} {{ItemBox|itemName=Cheat Death|wearMask=ramp|iconMask=no|texture=blend}} {{ItemBox|itemName=Colossus|wearMask=ramp|iconMask=no|texture=blend}} {{ItemBox|itemName=Crippling Headshot|wearMask=ramp|iconMask=no|texture=blend}} {{ItemBox|itemName=Divine Barrier|wearMask=ramp|iconMask=no|texture=blend}} {{ItemBox|itemName=Echo Shard|wearMask=ramp|iconMask=no|texture=blend}}&lt;br /&gt;
&lt;br /&gt;
== 3. lowGraphics=true (the full bundle) ==&lt;br /&gt;
The actual shipping flag: card-only blend with forced paper 3.&lt;br /&gt;
&lt;br /&gt;
{{ItemBox|itemName=Active Reload|lowGraphics=true}} {{ItemBox|itemName=Alchemical Fire|lowGraphics=true}} {{ItemBox|itemName=Arctic Blast|lowGraphics=true}} {{ItemBox|itemName=Berserker|lowGraphics=true}} {{ItemBox|itemName=Bullet Armor|lowGraphics=true}} {{ItemBox|itemName=Cheat Death|lowGraphics=true}} {{ItemBox|itemName=Colossus|lowGraphics=true}} {{ItemBox|itemName=Crippling Headshot|lowGraphics=true}} {{ItemBox|itemName=Divine Barrier|lowGraphics=true}} {{ItemBox|itemName=Echo Shard|lowGraphics=true}}&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox?diff=99958</id>
		<title>Template:ItemBox</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox?diff=99958"/>
		<updated>2026-07-24T20:46:59Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Revert lowGraphics to the working card-only blend and remove the broken split option (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;templatestyles src=&amp;quot;Template:ItemBox/styles.css&amp;quot; /&amp;gt;&amp;lt;includeonly&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{#vardefine:itemName|{{{itemName|{{{1}}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Display name: Lang string for the codename, else the raw name, then override.&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#invoke:Lang|get_string|{{#invoke:ItemData|get_codename|{{#var:itemName}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#if:{{#var:displayName}}|{{#var:displayName}}|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Measured name size (em) and stable per-item texture variety.&lt;br /&gt;
--&amp;gt;{{#vardefine:fontSize|{{#invoke:ItemBox|getFontSize|{{#var:displayName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Modifier classes: slot (Weapon/Armor/Tech from data, or Weapon/Vitality/Spirit override -&amp;gt; weapon/vitality/spirit), tier, tags.&lt;br /&gt;
--&amp;gt;{{#vardefine:slot|{{#switch:{{{overrideSlot|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Slot}}}}}|Weapon=itembox-weapon|Armor|Vitality=itembox-vitality|Tech|Spirit=itembox-spirit}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:tier|itembox-tier-{{{overrideTier|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Tier}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:showTierTag|{{#ifeq:{{{showTierTag|}}}|true|itembox-show-tier}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{{overrideIsActive|{{#invoke:ItemData|is_active|{{#var:itemName}}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{#ifeq:{{#var:isActive}}|true|itembox-active}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{{overrideIsImbue|{{#invoke:ItemData|get_prop|{{#var:itemName}}|IsImbue}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     lowGraphics=true is the setting for callers that place dozens of cards on&lt;br /&gt;
     one page. The wear tint becomes a gradient, the icon mask is dropped, and&lt;br /&gt;
     the paper texture is composited into the card art with background-blend-mode&lt;br /&gt;
     instead of the separate mix-blend-mode overlay. That last part is the change&lt;br /&gt;
     that matters: mix-blend-mode reads the page backdrop so WebRender&lt;br /&gt;
     re-rasterises those regions every scrolled frame, while a same-element blend&lt;br /&gt;
     stays a static tile. Removing the overlay blend cut the render thread&#039;s&lt;br /&gt;
     OpenGL work on the profiled navbox by around 90%. The blend reaches the card&lt;br /&gt;
     art but not the icon or the name, which sit above it as content.&lt;br /&gt;
--&amp;gt;{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-ramp-wear itembox-flat-icon itembox-blend-texture itembox-blend-tex-3}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     The same layers individually, for testing combinations or overriding the&lt;br /&gt;
     bundle above. wearMask drops the mask from the wear tint three ways:&lt;br /&gt;
     no   - tint moves behind the artwork, so only the card stock is coloured&lt;br /&gt;
     ramp - tint stays on top, fading in from the card&#039;s edges&lt;br /&gt;
     soft - tint stays on top, uniform and lighter, with the name lifted clear&lt;br /&gt;
     texture handles the paper grain:&lt;br /&gt;
     no    - drop it entirely&lt;br /&gt;
     1/2/3 - one shared paper via the mix-blend overlay (does not cache)&lt;br /&gt;
     blend / blend1..3 - paper multiplied into the card art, cacheable; reaches&lt;br /&gt;
             the card art but not the icon or name&lt;br /&gt;
--&amp;gt;{{#vardefine:lite|{{#switch:{{{wearMask|}}}|no=itembox-flat-wear|ramp=itembox-ramp-wear|soft=itembox-soft-wear}} {{#ifeq:{{{iconMask|}}}|no|itembox-flat-icon}} {{#switch:{{{texture|}}}|no=itembox-no-texture|1=itembox-force-tex-1|2=itembox-force-tex-2|3=itembox-force-tex-3|blend=itembox-blend-texture|blend1=itembox-blend-texture itembox-blend-tex-1|blend2=itembox-blend-texture itembox-blend-tex-2|blend3=itembox-blend-texture itembox-blend-tex-3}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Links.&lt;br /&gt;
--&amp;gt;{{#vardefine:linkTooltip|{{{overrideLinkTooltip|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkImage|{{{overrideLinkImage|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
--&amp;gt;&amp;lt;div class=&amp;quot;itembox {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}} {{#var:variants}} {{#var:lowGraphics}} {{#var:lite}}&amp;quot; style=&amp;quot;font-size:{{#expr: 10 * {{#if:{{{size|}}}|{{{size}}}|1}} }}px;&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;itembox-background&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;div class=&amp;quot;itembox-card&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-icon-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-icon&amp;quot;&amp;gt;[[File:{{#var:linkImage}}.png|160px|link=]]&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-tier-badge&amp;quot;&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-shadow&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-fill&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-number&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-imbue-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_imbue}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-name-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;p class=&amp;quot;itembox-name&amp;quot; style=&amp;quot;font-size:{{#var:fontSize}}em;text-wrap:balance;&amp;quot;&amp;gt;{{#var:displayName}}&amp;lt;/p&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-wear&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-texture&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-bevel&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-active-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_active}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-outline&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
		&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;item-link-wrapper&amp;quot; data-item-name=&amp;quot;{{#var:linkTooltip}}&amp;quot;&amp;gt;[[{{#var:linkClick}}|&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;]]&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&amp;lt;/includeonly&amp;gt;&amp;lt;noinclude&amp;gt;{{Documentation}}&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox/styles.css?diff=99957</id>
		<title>Template:ItemBox/styles.css</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox/styles.css?diff=99957"/>
		<updated>2026-07-24T20:46:29Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Remove the broken split-texture rules; blending onto the transparent icon and name elements shows raw paper instead of multiplying against stock (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
&lt;br /&gt;
/* The whole card scales off one knob: font-size on .itembox (1em = 10px base) */&lt;br /&gt;
.itembox,&lt;br /&gt;
.itembox * {&lt;br /&gt;
    margin: 0;&lt;br /&gt;
    padding: 0;&lt;br /&gt;
    border: 0;&lt;br /&gt;
    box-sizing: border-box;&lt;br /&gt;
}&lt;br /&gt;
.itembox {&lt;br /&gt;
    --itembox-ink: #10130D;&lt;br /&gt;
    --itembox-weapon: #EC981a;&lt;br /&gt;
    --itembox-vitality: #7CBB1E;&lt;br /&gt;
    --itembox-spirit: #CE91FF;&lt;br /&gt;
    --itembox-imbue-fg: #E8C9FF;&lt;br /&gt;
    --itembox-imbue-bg: #623585;&lt;br /&gt;
    --itembox-wear-tint: #ffffff;&lt;br /&gt;
    --itembox-wear-ramp: 75%;&lt;br /&gt;
    --itembox-card-image: none;&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
    --itembox-font: &#039;Retail Demo&#039;, sans-serif;&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: inline-block;&lt;br /&gt;
    font-size: 10px;&lt;br /&gt;
    width: 8em;&lt;br /&gt;
    height: 12.5em;&lt;br /&gt;
    border-radius: 0.6em;&lt;br /&gt;
    box-shadow: 0.2em 0.2em 1.2em #00000097;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
    transition-duration: 0.1s;&lt;br /&gt;
    transition-property: opacity, transform, filter;&lt;br /&gt;
}&lt;br /&gt;
.itembox-background {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    pointer-events: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-card {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-image: var(--itembox-card-image);&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    /* Confines mix-blend-mode below to the card. Without it the blend group&lt;br /&gt;
       reaches the page backdrop and the card cannot be cached as one layer. */&lt;br /&gt;
    isolation: isolate;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Card art is held in a variable so the blend mode below can compose paper&lt;br /&gt;
   against it on the same element. The pairs collapse: T5 reuses the T4 image. */&lt;br /&gt;
.itembox-tier-1.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/3/3e/Weapon_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/9/96/Weapon_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/5/5d/Weapon_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-weapon,&lt;br /&gt;
.itembox-tier-5.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/a6/Weapon_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/7/75/Armor_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/0/05/Armor_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/7/7c/Armor_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-vitality,&lt;br /&gt;
.itembox-tier-5.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/1/18/Armor_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/af/Tech_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/ac/Tech_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/6/67/Tech_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-spirit,&lt;br /&gt;
.itembox-tier-5.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/f/f5/Tech_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-icon-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    align-items: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    aspect-ratio: 1 / 1;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    background-repeat: no-repeat;&lt;br /&gt;
    mask-size: cover;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon &amp;gt; span,&lt;br /&gt;
.itembox-icon &amp;gt; span &amp;gt; span,&lt;br /&gt;
.itembox-icon picture {&lt;br /&gt;
    display: block;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon img {&lt;br /&gt;
    display: block;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    max-width: 100%;&lt;br /&gt;
    max-height: 100%;&lt;br /&gt;
    object-fit: cover;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-icon-v1 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/1/10/Icon_mask01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon-v2 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/6/6f/Icon_mask02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon-v3 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/9/96/Icon_mask03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-badge {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0;&lt;br /&gt;
    right: 0;&lt;br /&gt;
    width: 2.8em;&lt;br /&gt;
    height: 2.8em;&lt;br /&gt;
    transform: scale(1.4);&lt;br /&gt;
    transform-origin: top right;&lt;br /&gt;
    /* display:none rather than visibility:hidden so the badge and its&lt;br /&gt;
       drop-shadow() cost nothing on the cards that never show it. */&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-show-tier .itembox-tier-badge {&lt;br /&gt;
    display: block;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-badge-fill {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    mask-size: 2.2em;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-position: right 0;&lt;br /&gt;
    mask-image: url(&#039;/images/6/61/Tier_corner_cap.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-badge-shadow {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0;&lt;br /&gt;
    left: 0;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-size: 2.2em;&lt;br /&gt;
    background-repeat: no-repeat;&lt;br /&gt;
    background-position: right 0;&lt;br /&gt;
    background-image: url(&#039;/images/6/61/Tier_corner_cap.svg&#039;);&lt;br /&gt;
    filter: drop-shadow(-0.4em 0 0.6em #000000ff);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-weapon .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-weapon);&lt;br /&gt;
}&lt;br /&gt;
.itembox-vitality .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-vitality);&lt;br /&gt;
}&lt;br /&gt;
.itembox-spirit .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-spirit);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-badge-number {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    right: 0;&lt;br /&gt;
    top: 0.3em;&lt;br /&gt;
    height: 0.8em;&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.5em;&lt;br /&gt;
    right: 0.4em;&lt;br /&gt;
    mask-image: url(&#039;/images/2/24/Tier_numbers_small_01.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.7em;&lt;br /&gt;
    right: 0.3em;&lt;br /&gt;
    mask-image: url(&#039;/images/7/74/Tier_numbers_small_02.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.9em;&lt;br /&gt;
    right: 0.2em;&lt;br /&gt;
    mask-image: url(&#039;/images/5/54/Tier_numbers_small_03.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4 .itembox-tier-badge-number {&lt;br /&gt;
    width: 1.1em;&lt;br /&gt;
    mask-image: url(&#039;/images/c/c6/Tier_numbers_small_04.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-5 .itembox-tier-badge-number {&lt;br /&gt;
    width: 1.1em;&lt;br /&gt;
    right: 0.1em;&lt;br /&gt;
    mask-image: url(&#039;/images/8/81/Tier_numbers_small_05.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-imbue-tag {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    bottom: 0;&lt;br /&gt;
    display: none;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: fit-content;&lt;br /&gt;
    font-size: 1.2em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    line-height: normal;&lt;br /&gt;
    letter-spacing: 0.1em;&lt;br /&gt;
    white-space: nowrap;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    text-transform: uppercase;&lt;br /&gt;
    border-radius: 0.2em;&lt;br /&gt;
    padding: 0 0.3em;&lt;br /&gt;
    color: var(--itembox-imbue-fg);&lt;br /&gt;
    background-color: var(--itembox-imbue-bg);&lt;br /&gt;
}&lt;br /&gt;
.itembox-imbue .itembox-imbue-tag {&lt;br /&gt;
    display: flex;&lt;br /&gt;
}&lt;br /&gt;
.itembox-active.itembox-imbue .itembox-imbue-tag {&lt;br /&gt;
    justify-content: start;&lt;br /&gt;
    height: 2.2em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-name-area {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 4.5em;&lt;br /&gt;
    padding: 0.5em 0.4em;&lt;br /&gt;
}&lt;br /&gt;
.itembox-name {&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    line-height: 1.2;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    font-size: 1.5em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    color: var(--itembox-ink);&lt;br /&gt;
    overflow-wrap: normal;&lt;br /&gt;
    word-break: normal;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-4.itembox-weapon .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-weapon .itembox-name {&lt;br /&gt;
    color: #e4c5a1;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-vitality .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-vitality .itembox-name {&lt;br /&gt;
    color: #c2e7cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-spirit .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-spirit .itembox-name {&lt;br /&gt;
    color: #e3d4f2;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-wear {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    opacity: 0.7;&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    background-color: white;&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v1 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/8/8f/Card_PaperWear_1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v2 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/1/11/Card_PaperWear_2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v3 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/8/89/Card_PaperWear_3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v4 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/5/52/Card_PaperWear_4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-1.itembox-vitality .itembox-wear {&lt;br /&gt;
    opacity: 1;&lt;br /&gt;
    background-color: #f4e2cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit .itembox-wear {&lt;br /&gt;
    opacity: 1;&lt;br /&gt;
    background-color: rgb(247, 232, 213);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 .itembox-wear {&lt;br /&gt;
    background-color: rgb(230, 209, 191);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 .itembox-wear {&lt;br /&gt;
    background-color: rgb(206, 173, 155);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4 .itembox-wear,&lt;br /&gt;
.itembox-tier-5 .itembox-wear {&lt;br /&gt;
    background-color: rgb(105, 97, 92);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Same tier colours again as a custom property. A gradient cannot read&lt;br /&gt;
   background-color, so the ramp variant below needs them in this form. */&lt;br /&gt;
.itembox-tier-1.itembox-vitality {&lt;br /&gt;
    --itembox-wear-tint: #f4e2cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit {&lt;br /&gt;
    --itembox-wear-tint: rgb(247, 232, 213);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 {&lt;br /&gt;
    --itembox-wear-tint: rgb(230, 209, 191);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 {&lt;br /&gt;
    --itembox-wear-tint: rgb(206, 173, 155);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4,&lt;br /&gt;
.itembox-tier-5 {&lt;br /&gt;
    --itembox-wear-tint: rgb(105, 97, 92);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-texture {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-size: 100% 100%;&lt;br /&gt;
    mix-blend-mode: multiply;&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v1 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v2 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v3 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Overrides the per-item texture so every card shares one image, which keeps a&lt;br /&gt;
   single paper texture resident in the GPU cache instead of three. Higher&lt;br /&gt;
   specificity than the hashed classes above, so it wins regardless of which&lt;br /&gt;
   variant the item&#039;s name landed on. */&lt;br /&gt;
.itembox.itembox-force-tex-1 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-force-tex-2 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-force-tex-3 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Two hairlines at ~13% alpha: screen and normal blending land within ~2% of&lt;br /&gt;
   each other here, so the blend mode is dropped and the layer stays cheap. */&lt;br /&gt;
.itembox-bevel {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    border-left: 0.1em solid #ffcc6622;&lt;br /&gt;
    border-top: 0.1em solid #ffcc6622;&lt;br /&gt;
    background-size: 100% 100%;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-active-tag {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    bottom: 3.5em;&lt;br /&gt;
    display: none;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    align-self: center;&lt;br /&gt;
    width: fit-content;&lt;br /&gt;
    height: fit-content;&lt;br /&gt;
    font-size: 1.1em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    line-height: normal;&lt;br /&gt;
    letter-spacing: 0;&lt;br /&gt;
    white-space: nowrap;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    text-transform: uppercase;&lt;br /&gt;
    border-radius: 0.2em;&lt;br /&gt;
    padding: 0.1em 0.6em;&lt;br /&gt;
    box-shadow: 0 0 1.5em #000000ff;&lt;br /&gt;
    color: #ffefd7b3;&lt;br /&gt;
    background-color: #171717;&lt;br /&gt;
}&lt;br /&gt;
.itembox-active .itembox-active-tag {&lt;br /&gt;
    display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox .item-link-wrapper,&lt;br /&gt;
.itembox .item-link-wrapper &amp;gt; a {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    display: block;&lt;br /&gt;
    inset: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* ---------------------------------------------------------------------------&lt;br /&gt;
   Opt-in simplifications, set through the parameters on [[Template:ItemBox]].&lt;br /&gt;
   Each removes work the GPU repeats for every card on screen: a masked element&lt;br /&gt;
   costs an extra render pass, and mix-blend-mode costs a backdrop read. Callers&lt;br /&gt;
   that place dozens of cards at once can trade the paper detail for the frames.&lt;br /&gt;
   --------------------------------------------------------------------------- */&lt;br /&gt;
&lt;br /&gt;
/* The wear patterns are concentrated at the card&#039;s edges and largely clear in&lt;br /&gt;
   the middle, so a gradient can stand in for the mask: transparent through the&lt;br /&gt;
   centre, tint gathering at the border. --itembox-wear-ramp is where the&lt;br /&gt;
   falloff starts and is the one value worth tuning. The name is lifted clear so&lt;br /&gt;
   no amount of tint ever lands on the glyphs; the paper behind them still&lt;br /&gt;
   takes it, since the name area has no background of its own. Gradients are a&lt;br /&gt;
   native primitive, so this costs no extra render pass.  */&lt;br /&gt;
.itembox.itembox-ramp-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    background-color: transparent;&lt;br /&gt;
    background-image: radial-gradient(ellipse at 50% 45%, transparent var(--itembox-wear-ramp), var(--itembox-wear-tint) 100%);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-ramp-wear .itembox-name-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    z-index: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Kept for comparison against the ramp; drop whichever loses.&lt;br /&gt;
   flat - tint moves behind the artwork, colouring only the card stock&lt;br /&gt;
   soft - tint stays on top, uniform and lighter, name lifted clear */&lt;br /&gt;
.itembox.itembox-flat-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    z-index: -1;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-soft-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    opacity: 0.35;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-soft-wear .itembox-name-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    z-index: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-flat-icon .itembox-icon {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-no-texture .itembox-texture {&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Paper multiplied against the card art on the SAME element. Unlike&lt;br /&gt;
   mix-blend-mode (which reads the page backdrop and so cannot be cached),&lt;br /&gt;
   background-blend-mode blends the element&#039;s own layers, which WebRender keeps&lt;br /&gt;
   as a static tile — the whole point of the exercise. The separate .itembox-&lt;br /&gt;
   texture div is switched off since the paper now lives in the card layer.&lt;br /&gt;
   Caveat: this only reaches the card art, not the icon or the name, which are&lt;br /&gt;
   real content above the background rather than layers of it. --itembox-paper&lt;br /&gt;
   selects which of the three papers to use. */&lt;br /&gt;
.itembox.itembox-blend-texture .itembox-card {&lt;br /&gt;
    background-image: var(--itembox-paper), var(--itembox-card-image);&lt;br /&gt;
    background-size: cover, cover;&lt;br /&gt;
    background-blend-mode: multiply, normal;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture .itembox-texture {&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Per-item blend: read the paper from the item&#039;s own hashed texture-vN class,&lt;br /&gt;
   so blended cards keep the same variety the overlay had. The forced classes&lt;br /&gt;
   below outrank these when a single shared paper is wanted instead. */&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Forced single paper for the blend, e.g. from lowGraphics. */&lt;br /&gt;
.itembox.itembox-blend-tex-1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-tex-2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-tex-3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Skipping offscreen cards only pays for itself when many are on screen at&lt;br /&gt;
   once. On narrow viewports about ten fit, so the saving is small while cards&lt;br /&gt;
   crossing the boundary force constant display list rebuilds — measured at&lt;br /&gt;
   roughly half the frame rate on Android with this enabled. */&lt;br /&gt;
@media (min-width: 900px) {&lt;br /&gt;
    .itembox {&lt;br /&gt;
        content-visibility: auto;&lt;br /&gt;
        contain-intrinsic-size: 8em 12.5em;&lt;br /&gt;
    }&lt;br /&gt;
}&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/User:Vergir?diff=99956</id>
		<title>User:Vergir</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/User:Vergir?diff=99956"/>
		<updated>2026-07-24T20:42:19Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Compare baseline against the split blend texture (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
&lt;br /&gt;
= Holliday =&lt;br /&gt;
{{HeroStreetBrawlItems|Holliday|id=sb-items-holliday}}&lt;br /&gt;
&lt;br /&gt;
= Vindicta (has counter items) =&lt;br /&gt;
{{HeroStreetBrawlItems|Vindicta|id=sb-items-vindicta}}&lt;br /&gt;
&lt;br /&gt;
= ItemBox split texture comparison =&lt;br /&gt;
&lt;br /&gt;
The paper is multiplied onto the icon and the name area on their own elements (background-blend-mode, which caches), positioned so the grain runs continuously across the seam between them. The text glyphs sit above the blend and stay clean. Watch the join between icon and name for any visible restart of the grain.&lt;br /&gt;
&lt;br /&gt;
== 1. Baseline ==&lt;br /&gt;
The current look everywhere else: masked wear, icon mask, paper multiplied over the whole card via the overlay.&lt;br /&gt;
&lt;br /&gt;
{{ItemBox|itemName=Active Reload}} {{ItemBox|itemName=Alchemical Fire}} {{ItemBox|itemName=Arctic Blast}} {{ItemBox|itemName=Berserker}} {{ItemBox|itemName=Bullet Armor}} {{ItemBox|itemName=Cheat Death}} {{ItemBox|itemName=Colossus}} {{ItemBox|itemName=Crippling Headshot}} {{ItemBox|itemName=Divine Barrier}} {{ItemBox|itemName=Echo Shard}}&lt;br /&gt;
&lt;br /&gt;
== 2. Split texture, per item ==&lt;br /&gt;
Low graphics (ramped wear, no icon mask) with the paper split across icon and name area, paper chosen per item.&lt;br /&gt;
&lt;br /&gt;
{{ItemBox|itemName=Active Reload|wearMask=ramp|iconMask=no|texture=split}} {{ItemBox|itemName=Alchemical Fire|wearMask=ramp|iconMask=no|texture=split}} {{ItemBox|itemName=Arctic Blast|wearMask=ramp|iconMask=no|texture=split}} {{ItemBox|itemName=Berserker|wearMask=ramp|iconMask=no|texture=split}} {{ItemBox|itemName=Bullet Armor|wearMask=ramp|iconMask=no|texture=split}} {{ItemBox|itemName=Cheat Death|wearMask=ramp|iconMask=no|texture=split}} {{ItemBox|itemName=Colossus|wearMask=ramp|iconMask=no|texture=split}} {{ItemBox|itemName=Crippling Headshot|wearMask=ramp|iconMask=no|texture=split}} {{ItemBox|itemName=Divine Barrier|wearMask=ramp|iconMask=no|texture=split}} {{ItemBox|itemName=Echo Shard|wearMask=ramp|iconMask=no|texture=split}}&lt;br /&gt;
&lt;br /&gt;
== 3. Split texture, forced paper 3 (the lowGraphics default) ==&lt;br /&gt;
Same but every card uses paper 3, which is what lowGraphics=true ships.&lt;br /&gt;
&lt;br /&gt;
{{ItemBox|itemName=Active Reload|wearMask=ramp|iconMask=no|texture=split3}} {{ItemBox|itemName=Alchemical Fire|wearMask=ramp|iconMask=no|texture=split3}} {{ItemBox|itemName=Arctic Blast|wearMask=ramp|iconMask=no|texture=split3}} {{ItemBox|itemName=Berserker|wearMask=ramp|iconMask=no|texture=split3}} {{ItemBox|itemName=Bullet Armor|wearMask=ramp|iconMask=no|texture=split3}} {{ItemBox|itemName=Cheat Death|wearMask=ramp|iconMask=no|texture=split3}} {{ItemBox|itemName=Colossus|wearMask=ramp|iconMask=no|texture=split3}} {{ItemBox|itemName=Crippling Headshot|wearMask=ramp|iconMask=no|texture=split3}} {{ItemBox|itemName=Divine Barrier|wearMask=ramp|iconMask=no|texture=split3}} {{ItemBox|itemName=Echo Shard|wearMask=ramp|iconMask=no|texture=split3}}&lt;br /&gt;
&lt;br /&gt;
== 4. lowGraphics=true (the full bundle) ==&lt;br /&gt;
The actual shipping flag, so this should match section 3 exactly.&lt;br /&gt;
&lt;br /&gt;
{{ItemBox|itemName=Active Reload|lowGraphics=true}} {{ItemBox|itemName=Alchemical Fire|lowGraphics=true}} {{ItemBox|itemName=Arctic Blast|lowGraphics=true}} {{ItemBox|itemName=Berserker|lowGraphics=true}} {{ItemBox|itemName=Bullet Armor|lowGraphics=true}} {{ItemBox|itemName=Cheat Death|lowGraphics=true}} {{ItemBox|itemName=Colossus|lowGraphics=true}} {{ItemBox|itemName=Crippling Headshot|lowGraphics=true}} {{ItemBox|itemName=Divine Barrier|lowGraphics=true}} {{ItemBox|itemName=Echo Shard|lowGraphics=true}}&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox?diff=99955</id>
		<title>Template:ItemBox</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox?diff=99955"/>
		<updated>2026-07-24T20:41:56Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Add texture=split and split1/2/3: paper blended onto icon and name area separately, continuous across the seam (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;templatestyles src=&amp;quot;Template:ItemBox/styles.css&amp;quot; /&amp;gt;&amp;lt;includeonly&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{#vardefine:itemName|{{{itemName|{{{1}}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Display name: Lang string for the codename, else the raw name, then override.&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#invoke:Lang|get_string|{{#invoke:ItemData|get_codename|{{#var:itemName}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#if:{{#var:displayName}}|{{#var:displayName}}|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Measured name size (em) and stable per-item texture variety.&lt;br /&gt;
--&amp;gt;{{#vardefine:fontSize|{{#invoke:ItemBox|getFontSize|{{#var:displayName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Modifier classes: slot (Weapon/Armor/Tech from data, or Weapon/Vitality/Spirit override -&amp;gt; weapon/vitality/spirit), tier, tags.&lt;br /&gt;
--&amp;gt;{{#vardefine:slot|{{#switch:{{{overrideSlot|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Slot}}}}}|Weapon=itembox-weapon|Armor|Vitality=itembox-vitality|Tech|Spirit=itembox-spirit}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:tier|itembox-tier-{{{overrideTier|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Tier}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:showTierTag|{{#ifeq:{{{showTierTag|}}}|true|itembox-show-tier}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{{overrideIsActive|{{#invoke:ItemData|is_active|{{#var:itemName}}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{#ifeq:{{#var:isActive}}|true|itembox-active}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{{overrideIsImbue|{{#invoke:ItemData|get_prop|{{#var:itemName}}|IsImbue}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     lowGraphics=true is the setting for callers that place dozens of cards on&lt;br /&gt;
     one page. The wear tint becomes a gradient and the icon mask is dropped,&lt;br /&gt;
     and the paper texture is composited into the icon and name area with&lt;br /&gt;
     background-blend-mode instead of the separate mix-blend-mode overlay. That&lt;br /&gt;
     is the change that matters: mix-blend-mode reads the page backdrop so&lt;br /&gt;
     WebRender re-rasterises those regions every scrolled frame, while a&lt;br /&gt;
     same-element blend stays a static tile. Removing the overlay blend cut the&lt;br /&gt;
     render thread&#039;s OpenGL work on the profiled navbox by around 90%.&lt;br /&gt;
--&amp;gt;{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-ramp-wear itembox-flat-icon itembox-split-texture itembox-blend-tex-3}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     The same layers individually, for testing combinations or overriding the&lt;br /&gt;
     bundle above. wearMask drops the mask from the wear tint three ways:&lt;br /&gt;
     no   - tint moves behind the artwork, so only the card stock is coloured&lt;br /&gt;
     ramp - tint stays on top, fading in from the card&#039;s edges&lt;br /&gt;
     soft - tint stays on top, uniform and lighter, with the name lifted clear&lt;br /&gt;
     texture handles the paper grain:&lt;br /&gt;
     no    - drop it entirely&lt;br /&gt;
     1/2/3 - one shared paper via the mix-blend overlay (does not cache)&lt;br /&gt;
     blend / blend1..3 - paper multiplied into the card art only, cacheable&lt;br /&gt;
     split / split1..3 - paper multiplied onto the icon and name area, so it&lt;br /&gt;
             reaches the whole card, cacheable, grain continuous across the seam&lt;br /&gt;
--&amp;gt;{{#vardefine:lite|{{#switch:{{{wearMask|}}}|no=itembox-flat-wear|ramp=itembox-ramp-wear|soft=itembox-soft-wear}} {{#ifeq:{{{iconMask|}}}|no|itembox-flat-icon}} {{#switch:{{{texture|}}}|no=itembox-no-texture|1=itembox-force-tex-1|2=itembox-force-tex-2|3=itembox-force-tex-3|blend=itembox-blend-texture|blend1=itembox-blend-texture itembox-blend-tex-1|blend2=itembox-blend-texture itembox-blend-tex-2|blend3=itembox-blend-texture itembox-blend-tex-3|split=itembox-split-texture|split1=itembox-split-texture itembox-blend-tex-1|split2=itembox-split-texture itembox-blend-tex-2|split3=itembox-split-texture itembox-blend-tex-3}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Links.&lt;br /&gt;
--&amp;gt;{{#vardefine:linkTooltip|{{{overrideLinkTooltip|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkImage|{{{overrideLinkImage|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
--&amp;gt;&amp;lt;div class=&amp;quot;itembox {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}} {{#var:variants}} {{#var:lowGraphics}} {{#var:lite}}&amp;quot; style=&amp;quot;font-size:{{#expr: 10 * {{#if:{{{size|}}}|{{{size}}}|1}} }}px;&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;itembox-background&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;div class=&amp;quot;itembox-card&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-icon-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-icon&amp;quot;&amp;gt;[[File:{{#var:linkImage}}.png|160px|link=]]&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-tier-badge&amp;quot;&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-shadow&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-fill&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-number&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-imbue-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_imbue}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-name-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;p class=&amp;quot;itembox-name&amp;quot; style=&amp;quot;font-size:{{#var:fontSize}}em;text-wrap:balance;&amp;quot;&amp;gt;{{#var:displayName}}&amp;lt;/p&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-wear&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-texture&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-bevel&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-active-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_active}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-outline&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
		&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;item-link-wrapper&amp;quot; data-item-name=&amp;quot;{{#var:linkTooltip}}&amp;quot;&amp;gt;[[{{#var:linkClick}}|&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;]]&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&amp;lt;/includeonly&amp;gt;&amp;lt;noinclude&amp;gt;{{Documentation}}&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox/styles.css?diff=99954</id>
		<title>Template:ItemBox/styles.css</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox/styles.css?diff=99954"/>
		<updated>2026-07-24T20:41:27Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Add texture=split: paper multiplied onto the icon and the name area separately via background-blend-mode, positioned so the grain runs continuously across the seam. Retires the washed-out plain overlay approach (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
&lt;br /&gt;
/* The whole card scales off one knob: font-size on .itembox (1em = 10px base) */&lt;br /&gt;
.itembox,&lt;br /&gt;
.itembox * {&lt;br /&gt;
    margin: 0;&lt;br /&gt;
    padding: 0;&lt;br /&gt;
    border: 0;&lt;br /&gt;
    box-sizing: border-box;&lt;br /&gt;
}&lt;br /&gt;
.itembox {&lt;br /&gt;
    --itembox-ink: #10130D;&lt;br /&gt;
    --itembox-weapon: #EC981a;&lt;br /&gt;
    --itembox-vitality: #7CBB1E;&lt;br /&gt;
    --itembox-spirit: #CE91FF;&lt;br /&gt;
    --itembox-imbue-fg: #E8C9FF;&lt;br /&gt;
    --itembox-imbue-bg: #623585;&lt;br /&gt;
    --itembox-wear-tint: #ffffff;&lt;br /&gt;
    --itembox-wear-ramp: 75%;&lt;br /&gt;
    --itembox-card-image: none;&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
    --itembox-font: &#039;Retail Demo&#039;, sans-serif;&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: inline-block;&lt;br /&gt;
    font-size: 10px;&lt;br /&gt;
    width: 8em;&lt;br /&gt;
    height: 12.5em;&lt;br /&gt;
    border-radius: 0.6em;&lt;br /&gt;
    box-shadow: 0.2em 0.2em 1.2em #00000097;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
    transition-duration: 0.1s;&lt;br /&gt;
    transition-property: opacity, transform, filter;&lt;br /&gt;
}&lt;br /&gt;
.itembox-background {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    pointer-events: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-card {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-image: var(--itembox-card-image);&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    /* Confines mix-blend-mode below to the card. Without it the blend group&lt;br /&gt;
       reaches the page backdrop and the card cannot be cached as one layer. */&lt;br /&gt;
    isolation: isolate;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Card art is held in a variable so the blend mode below can compose paper&lt;br /&gt;
   against it on the same element. The pairs collapse: T5 reuses the T4 image. */&lt;br /&gt;
.itembox-tier-1.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/3/3e/Weapon_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/9/96/Weapon_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/5/5d/Weapon_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-weapon,&lt;br /&gt;
.itembox-tier-5.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/a6/Weapon_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/7/75/Armor_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/0/05/Armor_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/7/7c/Armor_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-vitality,&lt;br /&gt;
.itembox-tier-5.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/1/18/Armor_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/af/Tech_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/ac/Tech_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/6/67/Tech_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-spirit,&lt;br /&gt;
.itembox-tier-5.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/f/f5/Tech_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-icon-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    align-items: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    aspect-ratio: 1 / 1;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    background-repeat: no-repeat;&lt;br /&gt;
    mask-size: cover;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon &amp;gt; span,&lt;br /&gt;
.itembox-icon &amp;gt; span &amp;gt; span,&lt;br /&gt;
.itembox-icon picture {&lt;br /&gt;
    display: block;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon img {&lt;br /&gt;
    display: block;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    max-width: 100%;&lt;br /&gt;
    max-height: 100%;&lt;br /&gt;
    object-fit: cover;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-icon-v1 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/1/10/Icon_mask01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon-v2 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/6/6f/Icon_mask02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon-v3 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/9/96/Icon_mask03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-badge {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0;&lt;br /&gt;
    right: 0;&lt;br /&gt;
    width: 2.8em;&lt;br /&gt;
    height: 2.8em;&lt;br /&gt;
    transform: scale(1.4);&lt;br /&gt;
    transform-origin: top right;&lt;br /&gt;
    /* display:none rather than visibility:hidden so the badge and its&lt;br /&gt;
       drop-shadow() cost nothing on the cards that never show it. */&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-show-tier .itembox-tier-badge {&lt;br /&gt;
    display: block;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-badge-fill {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    mask-size: 2.2em;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-position: right 0;&lt;br /&gt;
    mask-image: url(&#039;/images/6/61/Tier_corner_cap.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-badge-shadow {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0;&lt;br /&gt;
    left: 0;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-size: 2.2em;&lt;br /&gt;
    background-repeat: no-repeat;&lt;br /&gt;
    background-position: right 0;&lt;br /&gt;
    background-image: url(&#039;/images/6/61/Tier_corner_cap.svg&#039;);&lt;br /&gt;
    filter: drop-shadow(-0.4em 0 0.6em #000000ff);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-weapon .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-weapon);&lt;br /&gt;
}&lt;br /&gt;
.itembox-vitality .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-vitality);&lt;br /&gt;
}&lt;br /&gt;
.itembox-spirit .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-spirit);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-badge-number {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    right: 0;&lt;br /&gt;
    top: 0.3em;&lt;br /&gt;
    height: 0.8em;&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.5em;&lt;br /&gt;
    right: 0.4em;&lt;br /&gt;
    mask-image: url(&#039;/images/2/24/Tier_numbers_small_01.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.7em;&lt;br /&gt;
    right: 0.3em;&lt;br /&gt;
    mask-image: url(&#039;/images/7/74/Tier_numbers_small_02.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.9em;&lt;br /&gt;
    right: 0.2em;&lt;br /&gt;
    mask-image: url(&#039;/images/5/54/Tier_numbers_small_03.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4 .itembox-tier-badge-number {&lt;br /&gt;
    width: 1.1em;&lt;br /&gt;
    mask-image: url(&#039;/images/c/c6/Tier_numbers_small_04.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-5 .itembox-tier-badge-number {&lt;br /&gt;
    width: 1.1em;&lt;br /&gt;
    right: 0.1em;&lt;br /&gt;
    mask-image: url(&#039;/images/8/81/Tier_numbers_small_05.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-imbue-tag {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    bottom: 0;&lt;br /&gt;
    display: none;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: fit-content;&lt;br /&gt;
    font-size: 1.2em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    line-height: normal;&lt;br /&gt;
    letter-spacing: 0.1em;&lt;br /&gt;
    white-space: nowrap;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    text-transform: uppercase;&lt;br /&gt;
    border-radius: 0.2em;&lt;br /&gt;
    padding: 0 0.3em;&lt;br /&gt;
    color: var(--itembox-imbue-fg);&lt;br /&gt;
    background-color: var(--itembox-imbue-bg);&lt;br /&gt;
}&lt;br /&gt;
.itembox-imbue .itembox-imbue-tag {&lt;br /&gt;
    display: flex;&lt;br /&gt;
}&lt;br /&gt;
.itembox-active.itembox-imbue .itembox-imbue-tag {&lt;br /&gt;
    justify-content: start;&lt;br /&gt;
    height: 2.2em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-name-area {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 4.5em;&lt;br /&gt;
    padding: 0.5em 0.4em;&lt;br /&gt;
}&lt;br /&gt;
.itembox-name {&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    line-height: 1.2;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    font-size: 1.5em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    color: var(--itembox-ink);&lt;br /&gt;
    overflow-wrap: normal;&lt;br /&gt;
    word-break: normal;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-4.itembox-weapon .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-weapon .itembox-name {&lt;br /&gt;
    color: #e4c5a1;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-vitality .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-vitality .itembox-name {&lt;br /&gt;
    color: #c2e7cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-spirit .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-spirit .itembox-name {&lt;br /&gt;
    color: #e3d4f2;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-wear {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    opacity: 0.7;&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    background-color: white;&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v1 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/8/8f/Card_PaperWear_1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v2 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/1/11/Card_PaperWear_2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v3 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/8/89/Card_PaperWear_3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v4 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/5/52/Card_PaperWear_4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-1.itembox-vitality .itembox-wear {&lt;br /&gt;
    opacity: 1;&lt;br /&gt;
    background-color: #f4e2cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit .itembox-wear {&lt;br /&gt;
    opacity: 1;&lt;br /&gt;
    background-color: rgb(247, 232, 213);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 .itembox-wear {&lt;br /&gt;
    background-color: rgb(230, 209, 191);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 .itembox-wear {&lt;br /&gt;
    background-color: rgb(206, 173, 155);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4 .itembox-wear,&lt;br /&gt;
.itembox-tier-5 .itembox-wear {&lt;br /&gt;
    background-color: rgb(105, 97, 92);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Same tier colours again as a custom property. A gradient cannot read&lt;br /&gt;
   background-color, so the ramp variant below needs them in this form. */&lt;br /&gt;
.itembox-tier-1.itembox-vitality {&lt;br /&gt;
    --itembox-wear-tint: #f4e2cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit {&lt;br /&gt;
    --itembox-wear-tint: rgb(247, 232, 213);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 {&lt;br /&gt;
    --itembox-wear-tint: rgb(230, 209, 191);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 {&lt;br /&gt;
    --itembox-wear-tint: rgb(206, 173, 155);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4,&lt;br /&gt;
.itembox-tier-5 {&lt;br /&gt;
    --itembox-wear-tint: rgb(105, 97, 92);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-texture {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-size: 100% 100%;&lt;br /&gt;
    mix-blend-mode: multiply;&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v1 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v2 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v3 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Overrides the per-item texture so every card shares one image, which keeps a&lt;br /&gt;
   single paper texture resident in the GPU cache instead of three. Higher&lt;br /&gt;
   specificity than the hashed classes above, so it wins regardless of which&lt;br /&gt;
   variant the item&#039;s name landed on. */&lt;br /&gt;
.itembox.itembox-force-tex-1 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-force-tex-2 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-force-tex-3 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Two hairlines at ~13% alpha: screen and normal blending land within ~2% of&lt;br /&gt;
   each other here, so the blend mode is dropped and the layer stays cheap. */&lt;br /&gt;
.itembox-bevel {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    border-left: 0.1em solid #ffcc6622;&lt;br /&gt;
    border-top: 0.1em solid #ffcc6622;&lt;br /&gt;
    background-size: 100% 100%;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-active-tag {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    bottom: 3.5em;&lt;br /&gt;
    display: none;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    align-self: center;&lt;br /&gt;
    width: fit-content;&lt;br /&gt;
    height: fit-content;&lt;br /&gt;
    font-size: 1.1em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    line-height: normal;&lt;br /&gt;
    letter-spacing: 0;&lt;br /&gt;
    white-space: nowrap;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    text-transform: uppercase;&lt;br /&gt;
    border-radius: 0.2em;&lt;br /&gt;
    padding: 0.1em 0.6em;&lt;br /&gt;
    box-shadow: 0 0 1.5em #000000ff;&lt;br /&gt;
    color: #ffefd7b3;&lt;br /&gt;
    background-color: #171717;&lt;br /&gt;
}&lt;br /&gt;
.itembox-active .itembox-active-tag {&lt;br /&gt;
    display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox .item-link-wrapper,&lt;br /&gt;
.itembox .item-link-wrapper &amp;gt; a {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    display: block;&lt;br /&gt;
    inset: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* ---------------------------------------------------------------------------&lt;br /&gt;
   Opt-in simplifications, set through the parameters on [[Template:ItemBox]].&lt;br /&gt;
   Each removes work the GPU repeats for every card on screen: a masked element&lt;br /&gt;
   costs an extra render pass, and mix-blend-mode costs a backdrop read. Callers&lt;br /&gt;
   that place dozens of cards at once can trade the paper detail for the frames.&lt;br /&gt;
   --------------------------------------------------------------------------- */&lt;br /&gt;
&lt;br /&gt;
/* The wear patterns are concentrated at the card&#039;s edges and largely clear in&lt;br /&gt;
   the middle, so a gradient can stand in for the mask: transparent through the&lt;br /&gt;
   centre, tint gathering at the border. --itembox-wear-ramp is where the&lt;br /&gt;
   falloff starts and is the one value worth tuning. The name is lifted clear so&lt;br /&gt;
   no amount of tint ever lands on the glyphs; the paper behind them still&lt;br /&gt;
   takes it, since the name area has no background of its own. Gradients are a&lt;br /&gt;
   native primitive, so this costs no extra render pass.  */&lt;br /&gt;
.itembox.itembox-ramp-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    background-color: transparent;&lt;br /&gt;
    background-image: radial-gradient(ellipse at 50% 45%, transparent var(--itembox-wear-ramp), var(--itembox-wear-tint) 100%);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-ramp-wear .itembox-name-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    z-index: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Kept for comparison against the ramp; drop whichever loses.&lt;br /&gt;
   flat - tint moves behind the artwork, colouring only the card stock&lt;br /&gt;
   soft - tint stays on top, uniform and lighter, name lifted clear */&lt;br /&gt;
.itembox.itembox-flat-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    z-index: -1;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-soft-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    opacity: 0.35;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-soft-wear .itembox-name-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    z-index: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-flat-icon .itembox-icon {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-no-texture .itembox-texture {&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Paper multiplied against the card art on the SAME element. Unlike&lt;br /&gt;
   mix-blend-mode (which reads the page backdrop and so cannot be cached),&lt;br /&gt;
   background-blend-mode blends the element&#039;s own layers, which WebRender keeps&lt;br /&gt;
   as a static tile — the whole point of the exercise. The separate .itembox-&lt;br /&gt;
   texture div is switched off since the paper now lives in the card layer.&lt;br /&gt;
   Caveat: this only reaches the card art, not the icon or the name, which are&lt;br /&gt;
   real content above the background rather than layers of it. --itembox-paper&lt;br /&gt;
   selects which of the three papers to use. */&lt;br /&gt;
.itembox.itembox-blend-texture .itembox-card {&lt;br /&gt;
    background-image: var(--itembox-paper), var(--itembox-card-image);&lt;br /&gt;
    background-size: cover, cover;&lt;br /&gt;
    background-blend-mode: multiply, normal;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture .itembox-texture {&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Per-item blend: read the paper from the item&#039;s own hashed texture-vN class,&lt;br /&gt;
   so blended cards keep the same variety the overlay had. The forced classes&lt;br /&gt;
   below outrank these when a single shared paper is wanted instead. */&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Forced single paper for the blend, e.g. from lowGraphics. */&lt;br /&gt;
.itembox.itembox-blend-tex-1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-tex-2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-tex-3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Split blend: paper multiplied onto the icon and onto the name area on their&lt;br /&gt;
   OWN elements, so it reaches the icon art and the card stock behind the name&lt;br /&gt;
   (the glyphs sit above and stay clean). This is the whole-card version of the&lt;br /&gt;
   card-only blend above, and caches the same way.&lt;br /&gt;
&lt;br /&gt;
   Both elements size the paper to the full card (8em wide, 12.5em tall) and&lt;br /&gt;
   the name area shifts its copy up by the icon&#039;s height (8em), so the grain is&lt;br /&gt;
   one continuous sheet across the seam rather than restarting. The icon keeps&lt;br /&gt;
   background-size:cover for its art, so the paper is listed first with an&lt;br /&gt;
   explicit size and the art second with cover. */&lt;br /&gt;
.itembox.itembox-split-texture .itembox-icon {&lt;br /&gt;
    background-image: var(--itembox-paper);&lt;br /&gt;
    background-size: 8em 12.5em;&lt;br /&gt;
    background-position: 0 0;&lt;br /&gt;
    background-blend-mode: multiply;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-split-texture .itembox-name-area {&lt;br /&gt;
    background-image: var(--itembox-paper);&lt;br /&gt;
    background-size: 8em 12.5em;&lt;br /&gt;
    background-position: 0 -8em;&lt;br /&gt;
    background-blend-mode: multiply;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-split-texture .itembox-texture {&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
/* Per-item paper for the split, read from the hashed variant. */&lt;br /&gt;
.itembox.itembox-split-texture.itembox-texture-v1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-split-texture.itembox-texture-v2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-split-texture.itembox-texture-v3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Skipping offscreen cards only pays for itself when many are on screen at&lt;br /&gt;
   once. On narrow viewports about ten fit, so the saving is small while cards&lt;br /&gt;
   crossing the boundary force constant display list rebuilds — measured at&lt;br /&gt;
   roughly half the frame rate on Android with this enabled. */&lt;br /&gt;
@media (min-width: 900px) {&lt;br /&gt;
    .itembox {&lt;br /&gt;
        content-visibility: auto;&lt;br /&gt;
        contain-intrinsic-size: 8em 12.5em;&lt;br /&gt;
    }&lt;br /&gt;
}&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/User:Vergir?diff=99953</id>
		<title>User:Vergir</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/User:Vergir?diff=99953"/>
		<updated>2026-07-24T20:33:27Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Use the over-light preset for section 4 instead of the ignored inline style (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
&lt;br /&gt;
= Holliday =&lt;br /&gt;
{{HeroStreetBrawlItems|Holliday|id=sb-items-holliday}}&lt;br /&gt;
&lt;br /&gt;
= Vindicta (has counter items) =&lt;br /&gt;
{{HeroStreetBrawlItems|Vindicta|id=sb-items-vindicta}}&lt;br /&gt;
&lt;br /&gt;
= ItemBox texture comparison =&lt;br /&gt;
&lt;br /&gt;
Same ten items across each section. The question is whether a plain alpha paper overlay (which caches, unlike the mix-blend original) looks acceptable, and at what opacity. The overlay lightens toward the paper rather than multiplying, so shadows lift instead of darkening.&lt;br /&gt;
&lt;br /&gt;
== 1. Baseline ==&lt;br /&gt;
The current look everywhere else: masked wear, icon mask, per-item paper multiplied over the whole card.&lt;br /&gt;
&lt;br /&gt;
{{ItemBox|itemName=Active Reload}} {{ItemBox|itemName=Alchemical Fire}} {{ItemBox|itemName=Arctic Blast}} {{ItemBox|itemName=Berserker}} {{ItemBox|itemName=Bullet Armor}} {{ItemBox|itemName=Cheat Death}} {{ItemBox|itemName=Colossus}} {{ItemBox|itemName=Crippling Headshot}} {{ItemBox|itemName=Divine Barrier}} {{ItemBox|itemName=Echo Shard}}&lt;br /&gt;
&lt;br /&gt;
== 2. Low graphics, no texture ==&lt;br /&gt;
Ramped wear, no icon mask, no paper at all. This is what currently ships to the navbox before the overlay.&lt;br /&gt;
&lt;br /&gt;
{{ItemBox|itemName=Active Reload|wearMask=ramp|iconMask=no|texture=no}} {{ItemBox|itemName=Alchemical Fire|wearMask=ramp|iconMask=no|texture=no}} {{ItemBox|itemName=Arctic Blast|wearMask=ramp|iconMask=no|texture=no}} {{ItemBox|itemName=Berserker|wearMask=ramp|iconMask=no|texture=no}} {{ItemBox|itemName=Bullet Armor|wearMask=ramp|iconMask=no|texture=no}} {{ItemBox|itemName=Cheat Death|wearMask=ramp|iconMask=no|texture=no}} {{ItemBox|itemName=Colossus|wearMask=ramp|iconMask=no|texture=no}} {{ItemBox|itemName=Crippling Headshot|wearMask=ramp|iconMask=no|texture=no}} {{ItemBox|itemName=Divine Barrier|wearMask=ramp|iconMask=no|texture=no}} {{ItemBox|itemName=Echo Shard|wearMask=ramp|iconMask=no|texture=no}}&lt;br /&gt;
&lt;br /&gt;
== 3. Low graphics + paper overlay, 0.35 ==&lt;br /&gt;
Same as section 2 but with paper 3 as a plain overlay over the whole card at the default 0.35 opacity.&lt;br /&gt;
&lt;br /&gt;
{{ItemBox|itemName=Active Reload|wearMask=ramp|iconMask=no|texture=over3}} {{ItemBox|itemName=Alchemical Fire|wearMask=ramp|iconMask=no|texture=over3}} {{ItemBox|itemName=Arctic Blast|wearMask=ramp|iconMask=no|texture=over3}} {{ItemBox|itemName=Berserker|wearMask=ramp|iconMask=no|texture=over3}} {{ItemBox|itemName=Bullet Armor|wearMask=ramp|iconMask=no|texture=over3}} {{ItemBox|itemName=Cheat Death|wearMask=ramp|iconMask=no|texture=over3}} {{ItemBox|itemName=Colossus|wearMask=ramp|iconMask=no|texture=over3}} {{ItemBox|itemName=Crippling Headshot|wearMask=ramp|iconMask=no|texture=over3}} {{ItemBox|itemName=Divine Barrier|wearMask=ramp|iconMask=no|texture=over3}} {{ItemBox|itemName=Echo Shard|wearMask=ramp|iconMask=no|texture=over3}}&lt;br /&gt;
&lt;br /&gt;
== 4. Low graphics + paper overlay, 0.2 (lighter) ==&lt;br /&gt;
The same overlay dialled down via the over-light preset, in case 0.35 is too strong.&lt;br /&gt;
&lt;br /&gt;
{{ItemBox|itemName=Active Reload|wearMask=ramp|iconMask=no|texture=over-light}} {{ItemBox|itemName=Alchemical Fire|wearMask=ramp|iconMask=no|texture=over-light}} {{ItemBox|itemName=Arctic Blast|wearMask=ramp|iconMask=no|texture=over-light}} {{ItemBox|itemName=Berserker|wearMask=ramp|iconMask=no|texture=over-light}} {{ItemBox|itemName=Bullet Armor|wearMask=ramp|iconMask=no|texture=over-light}} {{ItemBox|itemName=Cheat Death|wearMask=ramp|iconMask=no|texture=over-light}} {{ItemBox|itemName=Colossus|wearMask=ramp|iconMask=no|texture=over-light}} {{ItemBox|itemName=Crippling Headshot|wearMask=ramp|iconMask=no|texture=over-light}} {{ItemBox|itemName=Divine Barrier|wearMask=ramp|iconMask=no|texture=over-light}} {{ItemBox|itemName=Echo Shard|wearMask=ramp|iconMask=no|texture=over-light}}&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox?diff=99952</id>
		<title>Template:ItemBox</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox?diff=99952"/>
		<updated>2026-07-24T20:32:24Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Add texture=over-light preset so the lighter overlay can be set without inline style (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;templatestyles src=&amp;quot;Template:ItemBox/styles.css&amp;quot; /&amp;gt;&amp;lt;includeonly&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{#vardefine:itemName|{{{itemName|{{{1}}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Display name: Lang string for the codename, else the raw name, then override.&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#invoke:Lang|get_string|{{#invoke:ItemData|get_codename|{{#var:itemName}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#if:{{#var:displayName}}|{{#var:displayName}}|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Measured name size (em) and stable per-item texture variety.&lt;br /&gt;
--&amp;gt;{{#vardefine:fontSize|{{#invoke:ItemBox|getFontSize|{{#var:displayName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Modifier classes: slot (Weapon/Armor/Tech from data, or Weapon/Vitality/Spirit override -&amp;gt; weapon/vitality/spirit), tier, tags.&lt;br /&gt;
--&amp;gt;{{#vardefine:slot|{{#switch:{{{overrideSlot|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Slot}}}}}|Weapon=itembox-weapon|Armor|Vitality=itembox-vitality|Tech|Spirit=itembox-spirit}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:tier|itembox-tier-{{{overrideTier|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Tier}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:showTierTag|{{#ifeq:{{{showTierTag|}}}|true|itembox-show-tier}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{{overrideIsActive|{{#invoke:ItemData|is_active|{{#var:itemName}}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{#ifeq:{{#var:isActive}}|true|itembox-active}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{{overrideIsImbue|{{#invoke:ItemData|get_prop|{{#var:itemName}}|IsImbue}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     lowGraphics=true is the setting for callers that place dozens of cards on&lt;br /&gt;
     one page. The wear tint becomes a gradient and the icon mask is dropped,&lt;br /&gt;
     and the paper texture is composited into the card layer with&lt;br /&gt;
     background-blend-mode instead of the separate mix-blend-mode overlay. That&lt;br /&gt;
     is the change that matters: mix-blend-mode reads the page backdrop so&lt;br /&gt;
     WebRender re-rasterises those regions every scrolled frame, while a&lt;br /&gt;
     same-element blend stays a static tile. Removing the overlay blend cut the&lt;br /&gt;
     render thread&#039;s OpenGL work on the profiled navbox by around 90%.&lt;br /&gt;
--&amp;gt;{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-ramp-wear itembox-flat-icon itembox-blend-texture itembox-blend-tex-3}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     The same layers individually, for testing combinations or overriding the&lt;br /&gt;
     bundle above. wearMask drops the mask from the wear tint three ways:&lt;br /&gt;
     no   - tint moves behind the artwork, so only the card stock is coloured&lt;br /&gt;
     ramp - tint stays on top, fading in from the card&#039;s edges&lt;br /&gt;
     soft - tint stays on top, uniform and lighter, with the name lifted clear&lt;br /&gt;
     texture handles the paper grain:&lt;br /&gt;
     no    - drop it entirely&lt;br /&gt;
     1/2/3 - one shared paper via the mix-blend overlay (does not cache)&lt;br /&gt;
     blend / blend1..3 - paper multiplied into the card art, cacheable, but&lt;br /&gt;
             reaches only the card art, not the icon or name&lt;br /&gt;
     over / over1..3 - paper as a plain alpha overlay over the whole card,&lt;br /&gt;
             cacheable; lightens instead of multiplying&lt;br /&gt;
     over-light - the plain overlay (paper 3) at a lighter opacity&lt;br /&gt;
--&amp;gt;{{#vardefine:lite|{{#switch:{{{wearMask|}}}|no=itembox-flat-wear|ramp=itembox-ramp-wear|soft=itembox-soft-wear}} {{#ifeq:{{{iconMask|}}}|no|itembox-flat-icon}} {{#switch:{{{texture|}}}|no=itembox-no-texture|1=itembox-force-tex-1|2=itembox-force-tex-2|3=itembox-force-tex-3|blend=itembox-blend-texture|blend1=itembox-blend-texture itembox-blend-tex-1|blend2=itembox-blend-texture itembox-blend-tex-2|blend3=itembox-blend-texture itembox-blend-tex-3|over=itembox-over-texture|over1=itembox-over-texture itembox-blend-tex-1|over2=itembox-over-texture itembox-blend-tex-2|over3=itembox-over-texture itembox-blend-tex-3|over-light=itembox-over-texture itembox-blend-tex-3 itembox-over-light}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Links.&lt;br /&gt;
--&amp;gt;{{#vardefine:linkTooltip|{{{overrideLinkTooltip|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkImage|{{{overrideLinkImage|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
--&amp;gt;&amp;lt;div class=&amp;quot;itembox {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}} {{#var:variants}} {{#var:lowGraphics}} {{#var:lite}}&amp;quot; style=&amp;quot;font-size:{{#expr: 10 * {{#if:{{{size|}}}|{{{size}}}|1}} }}px;&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;itembox-background&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;div class=&amp;quot;itembox-card&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-icon-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-icon&amp;quot;&amp;gt;[[File:{{#var:linkImage}}.png|160px|link=]]&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-tier-badge&amp;quot;&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-shadow&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-fill&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-number&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-imbue-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_imbue}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-name-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;p class=&amp;quot;itembox-name&amp;quot; style=&amp;quot;font-size:{{#var:fontSize}}em;text-wrap:balance;&amp;quot;&amp;gt;{{#var:displayName}}&amp;lt;/p&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-wear&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-texture&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-bevel&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-active-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_active}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-outline&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
		&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;item-link-wrapper&amp;quot; data-item-name=&amp;quot;{{#var:linkTooltip}}&amp;quot;&amp;gt;[[{{#var:linkClick}}|&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;]]&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&amp;lt;/includeonly&amp;gt;&amp;lt;noinclude&amp;gt;{{Documentation}}&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox/styles.css?diff=99951</id>
		<title>Template:ItemBox/styles.css</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox/styles.css?diff=99951"/>
		<updated>2026-07-24T20:31:51Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Add a lighter overlay opacity preset for comparison (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
&lt;br /&gt;
/* The whole card scales off one knob: font-size on .itembox (1em = 10px base) */&lt;br /&gt;
.itembox,&lt;br /&gt;
.itembox * {&lt;br /&gt;
    margin: 0;&lt;br /&gt;
    padding: 0;&lt;br /&gt;
    border: 0;&lt;br /&gt;
    box-sizing: border-box;&lt;br /&gt;
}&lt;br /&gt;
.itembox {&lt;br /&gt;
    --itembox-ink: #10130D;&lt;br /&gt;
    --itembox-weapon: #EC981a;&lt;br /&gt;
    --itembox-vitality: #7CBB1E;&lt;br /&gt;
    --itembox-spirit: #CE91FF;&lt;br /&gt;
    --itembox-imbue-fg: #E8C9FF;&lt;br /&gt;
    --itembox-imbue-bg: #623585;&lt;br /&gt;
    --itembox-wear-tint: #ffffff;&lt;br /&gt;
    --itembox-wear-ramp: 75%;&lt;br /&gt;
    --itembox-card-image: none;&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
    --itembox-overlay-opacity: 0.35;&lt;br /&gt;
    --itembox-font: &#039;Retail Demo&#039;, sans-serif;&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: inline-block;&lt;br /&gt;
    font-size: 10px;&lt;br /&gt;
    width: 8em;&lt;br /&gt;
    height: 12.5em;&lt;br /&gt;
    border-radius: 0.6em;&lt;br /&gt;
    box-shadow: 0.2em 0.2em 1.2em #00000097;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
    transition-duration: 0.1s;&lt;br /&gt;
    transition-property: opacity, transform, filter;&lt;br /&gt;
}&lt;br /&gt;
.itembox-background {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    pointer-events: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-card {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-image: var(--itembox-card-image);&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    /* Confines mix-blend-mode below to the card. Without it the blend group&lt;br /&gt;
       reaches the page backdrop and the card cannot be cached as one layer. */&lt;br /&gt;
    isolation: isolate;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Card art is held in a variable so the blend mode below can compose paper&lt;br /&gt;
   against it on the same element. The pairs collapse: T5 reuses the T4 image. */&lt;br /&gt;
.itembox-tier-1.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/3/3e/Weapon_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/9/96/Weapon_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/5/5d/Weapon_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-weapon,&lt;br /&gt;
.itembox-tier-5.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/a6/Weapon_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/7/75/Armor_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/0/05/Armor_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/7/7c/Armor_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-vitality,&lt;br /&gt;
.itembox-tier-5.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/1/18/Armor_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/af/Tech_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/ac/Tech_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/6/67/Tech_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-spirit,&lt;br /&gt;
.itembox-tier-5.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/f/f5/Tech_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-icon-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    align-items: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    aspect-ratio: 1 / 1;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    background-repeat: no-repeat;&lt;br /&gt;
    mask-size: cover;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon &amp;gt; span,&lt;br /&gt;
.itembox-icon &amp;gt; span &amp;gt; span,&lt;br /&gt;
.itembox-icon picture {&lt;br /&gt;
    display: block;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon img {&lt;br /&gt;
    display: block;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    max-width: 100%;&lt;br /&gt;
    max-height: 100%;&lt;br /&gt;
    object-fit: cover;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-icon-v1 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/1/10/Icon_mask01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon-v2 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/6/6f/Icon_mask02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon-v3 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/9/96/Icon_mask03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-badge {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0;&lt;br /&gt;
    right: 0;&lt;br /&gt;
    width: 2.8em;&lt;br /&gt;
    height: 2.8em;&lt;br /&gt;
    transform: scale(1.4);&lt;br /&gt;
    transform-origin: top right;&lt;br /&gt;
    /* display:none rather than visibility:hidden so the badge and its&lt;br /&gt;
       drop-shadow() cost nothing on the cards that never show it. */&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-show-tier .itembox-tier-badge {&lt;br /&gt;
    display: block;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-badge-fill {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    mask-size: 2.2em;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-position: right 0;&lt;br /&gt;
    mask-image: url(&#039;/images/6/61/Tier_corner_cap.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-badge-shadow {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0;&lt;br /&gt;
    left: 0;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-size: 2.2em;&lt;br /&gt;
    background-repeat: no-repeat;&lt;br /&gt;
    background-position: right 0;&lt;br /&gt;
    background-image: url(&#039;/images/6/61/Tier_corner_cap.svg&#039;);&lt;br /&gt;
    filter: drop-shadow(-0.4em 0 0.6em #000000ff);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-weapon .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-weapon);&lt;br /&gt;
}&lt;br /&gt;
.itembox-vitality .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-vitality);&lt;br /&gt;
}&lt;br /&gt;
.itembox-spirit .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-spirit);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-badge-number {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    right: 0;&lt;br /&gt;
    top: 0.3em;&lt;br /&gt;
    height: 0.8em;&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.5em;&lt;br /&gt;
    right: 0.4em;&lt;br /&gt;
    mask-image: url(&#039;/images/2/24/Tier_numbers_small_01.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.7em;&lt;br /&gt;
    right: 0.3em;&lt;br /&gt;
    mask-image: url(&#039;/images/7/74/Tier_numbers_small_02.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.9em;&lt;br /&gt;
    right: 0.2em;&lt;br /&gt;
    mask-image: url(&#039;/images/5/54/Tier_numbers_small_03.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4 .itembox-tier-badge-number {&lt;br /&gt;
    width: 1.1em;&lt;br /&gt;
    mask-image: url(&#039;/images/c/c6/Tier_numbers_small_04.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-5 .itembox-tier-badge-number {&lt;br /&gt;
    width: 1.1em;&lt;br /&gt;
    right: 0.1em;&lt;br /&gt;
    mask-image: url(&#039;/images/8/81/Tier_numbers_small_05.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-imbue-tag {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    bottom: 0;&lt;br /&gt;
    display: none;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: fit-content;&lt;br /&gt;
    font-size: 1.2em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    line-height: normal;&lt;br /&gt;
    letter-spacing: 0.1em;&lt;br /&gt;
    white-space: nowrap;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    text-transform: uppercase;&lt;br /&gt;
    border-radius: 0.2em;&lt;br /&gt;
    padding: 0 0.3em;&lt;br /&gt;
    color: var(--itembox-imbue-fg);&lt;br /&gt;
    background-color: var(--itembox-imbue-bg);&lt;br /&gt;
}&lt;br /&gt;
.itembox-imbue .itembox-imbue-tag {&lt;br /&gt;
    display: flex;&lt;br /&gt;
}&lt;br /&gt;
.itembox-active.itembox-imbue .itembox-imbue-tag {&lt;br /&gt;
    justify-content: start;&lt;br /&gt;
    height: 2.2em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-name-area {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 4.5em;&lt;br /&gt;
    padding: 0.5em 0.4em;&lt;br /&gt;
}&lt;br /&gt;
.itembox-name {&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    line-height: 1.2;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    font-size: 1.5em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    color: var(--itembox-ink);&lt;br /&gt;
    overflow-wrap: normal;&lt;br /&gt;
    word-break: normal;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-4.itembox-weapon .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-weapon .itembox-name {&lt;br /&gt;
    color: #e4c5a1;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-vitality .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-vitality .itembox-name {&lt;br /&gt;
    color: #c2e7cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-spirit .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-spirit .itembox-name {&lt;br /&gt;
    color: #e3d4f2;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-wear {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    opacity: 0.7;&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    background-color: white;&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v1 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/8/8f/Card_PaperWear_1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v2 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/1/11/Card_PaperWear_2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v3 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/8/89/Card_PaperWear_3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v4 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/5/52/Card_PaperWear_4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-1.itembox-vitality .itembox-wear {&lt;br /&gt;
    opacity: 1;&lt;br /&gt;
    background-color: #f4e2cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit .itembox-wear {&lt;br /&gt;
    opacity: 1;&lt;br /&gt;
    background-color: rgb(247, 232, 213);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 .itembox-wear {&lt;br /&gt;
    background-color: rgb(230, 209, 191);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 .itembox-wear {&lt;br /&gt;
    background-color: rgb(206, 173, 155);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4 .itembox-wear,&lt;br /&gt;
.itembox-tier-5 .itembox-wear {&lt;br /&gt;
    background-color: rgb(105, 97, 92);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Same tier colours again as a custom property. A gradient cannot read&lt;br /&gt;
   background-color, so the ramp variant below needs them in this form. */&lt;br /&gt;
.itembox-tier-1.itembox-vitality {&lt;br /&gt;
    --itembox-wear-tint: #f4e2cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit {&lt;br /&gt;
    --itembox-wear-tint: rgb(247, 232, 213);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 {&lt;br /&gt;
    --itembox-wear-tint: rgb(230, 209, 191);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 {&lt;br /&gt;
    --itembox-wear-tint: rgb(206, 173, 155);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4,&lt;br /&gt;
.itembox-tier-5 {&lt;br /&gt;
    --itembox-wear-tint: rgb(105, 97, 92);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-texture {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-size: 100% 100%;&lt;br /&gt;
    mix-blend-mode: multiply;&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v1 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v2 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v3 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Overrides the per-item texture so every card shares one image, which keeps a&lt;br /&gt;
   single paper texture resident in the GPU cache instead of three. Higher&lt;br /&gt;
   specificity than the hashed classes above, so it wins regardless of which&lt;br /&gt;
   variant the item&#039;s name landed on. */&lt;br /&gt;
.itembox.itembox-force-tex-1 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-force-tex-2 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-force-tex-3 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Two hairlines at ~13% alpha: screen and normal blending land within ~2% of&lt;br /&gt;
   each other here, so the blend mode is dropped and the layer stays cheap. */&lt;br /&gt;
.itembox-bevel {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    border-left: 0.1em solid #ffcc6622;&lt;br /&gt;
    border-top: 0.1em solid #ffcc6622;&lt;br /&gt;
    background-size: 100% 100%;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-active-tag {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    bottom: 3.5em;&lt;br /&gt;
    display: none;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    align-self: center;&lt;br /&gt;
    width: fit-content;&lt;br /&gt;
    height: fit-content;&lt;br /&gt;
    font-size: 1.1em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    line-height: normal;&lt;br /&gt;
    letter-spacing: 0;&lt;br /&gt;
    white-space: nowrap;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    text-transform: uppercase;&lt;br /&gt;
    border-radius: 0.2em;&lt;br /&gt;
    padding: 0.1em 0.6em;&lt;br /&gt;
    box-shadow: 0 0 1.5em #000000ff;&lt;br /&gt;
    color: #ffefd7b3;&lt;br /&gt;
    background-color: #171717;&lt;br /&gt;
}&lt;br /&gt;
.itembox-active .itembox-active-tag {&lt;br /&gt;
    display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox .item-link-wrapper,&lt;br /&gt;
.itembox .item-link-wrapper &amp;gt; a {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    display: block;&lt;br /&gt;
    inset: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* ---------------------------------------------------------------------------&lt;br /&gt;
   Opt-in simplifications, set through the parameters on [[Template:ItemBox]].&lt;br /&gt;
   Each removes work the GPU repeats for every card on screen: a masked element&lt;br /&gt;
   costs an extra render pass, and mix-blend-mode costs a backdrop read. Callers&lt;br /&gt;
   that place dozens of cards at once can trade the paper detail for the frames.&lt;br /&gt;
   --------------------------------------------------------------------------- */&lt;br /&gt;
&lt;br /&gt;
/* The wear patterns are concentrated at the card&#039;s edges and largely clear in&lt;br /&gt;
   the middle, so a gradient can stand in for the mask: transparent through the&lt;br /&gt;
   centre, tint gathering at the border. --itembox-wear-ramp is where the&lt;br /&gt;
   falloff starts and is the one value worth tuning. The name is lifted clear so&lt;br /&gt;
   no amount of tint ever lands on the glyphs; the paper behind them still&lt;br /&gt;
   takes it, since the name area has no background of its own. Gradients are a&lt;br /&gt;
   native primitive, so this costs no extra render pass.  */&lt;br /&gt;
.itembox.itembox-ramp-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    background-color: transparent;&lt;br /&gt;
    background-image: radial-gradient(ellipse at 50% 45%, transparent var(--itembox-wear-ramp), var(--itembox-wear-tint) 100%);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-ramp-wear .itembox-name-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    z-index: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Kept for comparison against the ramp; drop whichever loses.&lt;br /&gt;
   flat - tint moves behind the artwork, colouring only the card stock&lt;br /&gt;
   soft - tint stays on top, uniform and lighter, name lifted clear */&lt;br /&gt;
.itembox.itembox-flat-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    z-index: -1;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-soft-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    opacity: 0.35;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-soft-wear .itembox-name-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    z-index: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-flat-icon .itembox-icon {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-no-texture .itembox-texture {&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Paper multiplied against the card art on the SAME element. Unlike&lt;br /&gt;
   mix-blend-mode (which reads the page backdrop and so cannot be cached),&lt;br /&gt;
   background-blend-mode blends the element&#039;s own layers, which WebRender keeps&lt;br /&gt;
   as a static tile — the whole point of the exercise. The separate .itembox-&lt;br /&gt;
   texture div is switched off since the paper now lives in the card layer.&lt;br /&gt;
   Caveat: this only reaches the card art, not the icon or the name, which are&lt;br /&gt;
   real content above the background rather than layers of it. --itembox-paper&lt;br /&gt;
   selects which of the three papers to use. */&lt;br /&gt;
.itembox.itembox-blend-texture .itembox-card {&lt;br /&gt;
    background-image: var(--itembox-paper), var(--itembox-card-image);&lt;br /&gt;
    background-size: cover, cover;&lt;br /&gt;
    background-blend-mode: multiply, normal;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture .itembox-texture {&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Per-item blend: read the paper from the item&#039;s own hashed texture-vN class,&lt;br /&gt;
   so blended cards keep the same variety the overlay had. The forced classes&lt;br /&gt;
   below outrank these when a single shared paper is wanted instead. */&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Forced single paper for the blend, e.g. from lowGraphics. */&lt;br /&gt;
.itembox.itembox-blend-tex-1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-tex-2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-tex-3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Plain overlay: paper stays on top of the icon and the name (like the original&lt;br /&gt;
   mix-blend layer) so it covers the whole card, but with NO blend mode. Normal&lt;br /&gt;
   alpha compositing caches fine; the trade is that it lightens toward the paper&lt;br /&gt;
   instead of multiplying, so shadows lift rather than darken. --itembox-overlay-&lt;br /&gt;
   opacity controls how strong it reads and is the value to tune. Reuses the&lt;br /&gt;
   existing .itembox-texture div, just swapping the blend for opacity. */&lt;br /&gt;
.itembox.itembox-over-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    opacity: var(--itembox-overlay-opacity);&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    background-image: var(--itembox-paper);&lt;br /&gt;
}&lt;br /&gt;
/* Preset overlay strengths, since the template does not pass inline style. */&lt;br /&gt;
.itembox.itembox-over-light {&lt;br /&gt;
    --itembox-overlay-opacity: 0.2;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Skipping offscreen cards only pays for itself when many are on screen at&lt;br /&gt;
   once. On narrow viewports about ten fit, so the saving is small while cards&lt;br /&gt;
   crossing the boundary force constant display list rebuilds — measured at&lt;br /&gt;
   roughly half the frame rate on Android with this enabled. */&lt;br /&gt;
@media (min-width: 900px) {&lt;br /&gt;
    .itembox {&lt;br /&gt;
        content-visibility: auto;&lt;br /&gt;
        contain-intrinsic-size: 8em 12.5em;&lt;br /&gt;
    }&lt;br /&gt;
}&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/User:Vergir?diff=99950</id>
		<title>User:Vergir</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/User:Vergir?diff=99950"/>
		<updated>2026-07-24T20:30:21Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Replace texture profiling sections with an overlay-texture visual comparison: baseline vs low-graphics no-texture vs low-graphics with paper overlay (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
&lt;br /&gt;
= Holliday =&lt;br /&gt;
{{HeroStreetBrawlItems|Holliday|id=sb-items-holliday}}&lt;br /&gt;
&lt;br /&gt;
= Vindicta (has counter items) =&lt;br /&gt;
{{HeroStreetBrawlItems|Vindicta|id=sb-items-vindicta}}&lt;br /&gt;
&lt;br /&gt;
= ItemBox texture comparison =&lt;br /&gt;
&lt;br /&gt;
Same ten items across each section. The question is whether a plain alpha paper overlay (which caches, unlike the mix-blend original) looks acceptable, and at what opacity. The overlay lightens toward the paper rather than multiplying, so shadows lift instead of darkening.&lt;br /&gt;
&lt;br /&gt;
== 1. Baseline ==&lt;br /&gt;
The current look everywhere else: masked wear, icon mask, per-item paper multiplied over the whole card.&lt;br /&gt;
&lt;br /&gt;
{{ItemBox|itemName=Active Reload}} {{ItemBox|itemName=Alchemical Fire}} {{ItemBox|itemName=Arctic Blast}} {{ItemBox|itemName=Berserker}} {{ItemBox|itemName=Bullet Armor}} {{ItemBox|itemName=Cheat Death}} {{ItemBox|itemName=Colossus}} {{ItemBox|itemName=Crippling Headshot}} {{ItemBox|itemName=Divine Barrier}} {{ItemBox|itemName=Echo Shard}}&lt;br /&gt;
&lt;br /&gt;
== 2. Low graphics, no texture ==&lt;br /&gt;
Ramped wear, no icon mask, no paper at all. This is what currently ships to the navbox before the overlay.&lt;br /&gt;
&lt;br /&gt;
{{ItemBox|itemName=Active Reload|wearMask=ramp|iconMask=no|texture=no}} {{ItemBox|itemName=Alchemical Fire|wearMask=ramp|iconMask=no|texture=no}} {{ItemBox|itemName=Arctic Blast|wearMask=ramp|iconMask=no|texture=no}} {{ItemBox|itemName=Berserker|wearMask=ramp|iconMask=no|texture=no}} {{ItemBox|itemName=Bullet Armor|wearMask=ramp|iconMask=no|texture=no}} {{ItemBox|itemName=Cheat Death|wearMask=ramp|iconMask=no|texture=no}} {{ItemBox|itemName=Colossus|wearMask=ramp|iconMask=no|texture=no}} {{ItemBox|itemName=Crippling Headshot|wearMask=ramp|iconMask=no|texture=no}} {{ItemBox|itemName=Divine Barrier|wearMask=ramp|iconMask=no|texture=no}} {{ItemBox|itemName=Echo Shard|wearMask=ramp|iconMask=no|texture=no}}&lt;br /&gt;
&lt;br /&gt;
== 3. Low graphics + paper overlay, 0.35 ==&lt;br /&gt;
Same as section 2 but with paper 3 as a plain overlay over the whole card at the default 0.35 opacity.&lt;br /&gt;
&lt;br /&gt;
{{ItemBox|itemName=Active Reload|wearMask=ramp|iconMask=no|texture=over3}} {{ItemBox|itemName=Alchemical Fire|wearMask=ramp|iconMask=no|texture=over3}} {{ItemBox|itemName=Arctic Blast|wearMask=ramp|iconMask=no|texture=over3}} {{ItemBox|itemName=Berserker|wearMask=ramp|iconMask=no|texture=over3}} {{ItemBox|itemName=Bullet Armor|wearMask=ramp|iconMask=no|texture=over3}} {{ItemBox|itemName=Cheat Death|wearMask=ramp|iconMask=no|texture=over3}} {{ItemBox|itemName=Colossus|wearMask=ramp|iconMask=no|texture=over3}} {{ItemBox|itemName=Crippling Headshot|wearMask=ramp|iconMask=no|texture=over3}} {{ItemBox|itemName=Divine Barrier|wearMask=ramp|iconMask=no|texture=over3}} {{ItemBox|itemName=Echo Shard|wearMask=ramp|iconMask=no|texture=over3}}&lt;br /&gt;
&lt;br /&gt;
== 4. Low graphics + paper overlay, 0.2 (lighter) ==&lt;br /&gt;
The same overlay dialled down, in case 0.35 is too strong. Opacity set inline per card.&lt;br /&gt;
&lt;br /&gt;
{{ItemBox|itemName=Active Reload|wearMask=ramp|iconMask=no|texture=over3|style=--itembox-overlay-opacity:0.2}} {{ItemBox|itemName=Alchemical Fire|wearMask=ramp|iconMask=no|texture=over3|style=--itembox-overlay-opacity:0.2}} {{ItemBox|itemName=Arctic Blast|wearMask=ramp|iconMask=no|texture=over3|style=--itembox-overlay-opacity:0.2}} {{ItemBox|itemName=Berserker|wearMask=ramp|iconMask=no|texture=over3|style=--itembox-overlay-opacity:0.2}} {{ItemBox|itemName=Bullet Armor|wearMask=ramp|iconMask=no|texture=over3|style=--itembox-overlay-opacity:0.2}} {{ItemBox|itemName=Cheat Death|wearMask=ramp|iconMask=no|texture=over3|style=--itembox-overlay-opacity:0.2}} {{ItemBox|itemName=Colossus|wearMask=ramp|iconMask=no|texture=over3|style=--itembox-overlay-opacity:0.2}} {{ItemBox|itemName=Crippling Headshot|wearMask=ramp|iconMask=no|texture=over3|style=--itembox-overlay-opacity:0.2}} {{ItemBox|itemName=Divine Barrier|wearMask=ramp|iconMask=no|texture=over3|style=--itembox-overlay-opacity:0.2}} {{ItemBox|itemName=Echo Shard|wearMask=ramp|iconMask=no|texture=over3|style=--itembox-overlay-opacity:0.2}}&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox?diff=99949</id>
		<title>Template:ItemBox</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox?diff=99949"/>
		<updated>2026-07-24T20:29:54Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Add texture=over and over1/2/3 for the plain-overlay paper variant (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;templatestyles src=&amp;quot;Template:ItemBox/styles.css&amp;quot; /&amp;gt;&amp;lt;includeonly&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{#vardefine:itemName|{{{itemName|{{{1}}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Display name: Lang string for the codename, else the raw name, then override.&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#invoke:Lang|get_string|{{#invoke:ItemData|get_codename|{{#var:itemName}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#if:{{#var:displayName}}|{{#var:displayName}}|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Measured name size (em) and stable per-item texture variety.&lt;br /&gt;
--&amp;gt;{{#vardefine:fontSize|{{#invoke:ItemBox|getFontSize|{{#var:displayName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Modifier classes: slot (Weapon/Armor/Tech from data, or Weapon/Vitality/Spirit override -&amp;gt; weapon/vitality/spirit), tier, tags.&lt;br /&gt;
--&amp;gt;{{#vardefine:slot|{{#switch:{{{overrideSlot|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Slot}}}}}|Weapon=itembox-weapon|Armor|Vitality=itembox-vitality|Tech|Spirit=itembox-spirit}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:tier|itembox-tier-{{{overrideTier|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Tier}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:showTierTag|{{#ifeq:{{{showTierTag|}}}|true|itembox-show-tier}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{{overrideIsActive|{{#invoke:ItemData|is_active|{{#var:itemName}}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{#ifeq:{{#var:isActive}}|true|itembox-active}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{{overrideIsImbue|{{#invoke:ItemData|get_prop|{{#var:itemName}}|IsImbue}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     lowGraphics=true is the setting for callers that place dozens of cards on&lt;br /&gt;
     one page. The wear tint becomes a gradient and the icon mask is dropped,&lt;br /&gt;
     and the paper texture is composited into the card layer with&lt;br /&gt;
     background-blend-mode instead of the separate mix-blend-mode overlay. That&lt;br /&gt;
     is the change that matters: mix-blend-mode reads the page backdrop so&lt;br /&gt;
     WebRender re-rasterises those regions every scrolled frame, while a&lt;br /&gt;
     same-element blend stays a static tile. Removing the overlay blend cut the&lt;br /&gt;
     render thread&#039;s OpenGL work on the profiled navbox by around 90%.&lt;br /&gt;
--&amp;gt;{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-ramp-wear itembox-flat-icon itembox-blend-texture itembox-blend-tex-3}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     The same layers individually, for testing combinations or overriding the&lt;br /&gt;
     bundle above. wearMask drops the mask from the wear tint three ways:&lt;br /&gt;
     no   - tint moves behind the artwork, so only the card stock is coloured&lt;br /&gt;
     ramp - tint stays on top, fading in from the card&#039;s edges&lt;br /&gt;
     soft - tint stays on top, uniform and lighter, with the name lifted clear&lt;br /&gt;
     texture handles the paper grain:&lt;br /&gt;
     no    - drop it entirely&lt;br /&gt;
     1/2/3 - one shared paper via the mix-blend overlay (does not cache)&lt;br /&gt;
     blend / blend1..3 - paper multiplied into the card art, cacheable, but&lt;br /&gt;
             reaches only the card art, not the icon or name&lt;br /&gt;
     over / over1..3 - paper as a plain alpha overlay over the whole card,&lt;br /&gt;
             cacheable; lightens instead of multiplying&lt;br /&gt;
--&amp;gt;{{#vardefine:lite|{{#switch:{{{wearMask|}}}|no=itembox-flat-wear|ramp=itembox-ramp-wear|soft=itembox-soft-wear}} {{#ifeq:{{{iconMask|}}}|no|itembox-flat-icon}} {{#switch:{{{texture|}}}|no=itembox-no-texture|1=itembox-force-tex-1|2=itembox-force-tex-2|3=itembox-force-tex-3|blend=itembox-blend-texture|blend1=itembox-blend-texture itembox-blend-tex-1|blend2=itembox-blend-texture itembox-blend-tex-2|blend3=itembox-blend-texture itembox-blend-tex-3|over=itembox-over-texture|over1=itembox-over-texture itembox-blend-tex-1|over2=itembox-over-texture itembox-blend-tex-2|over3=itembox-over-texture itembox-blend-tex-3}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Links.&lt;br /&gt;
--&amp;gt;{{#vardefine:linkTooltip|{{{overrideLinkTooltip|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkImage|{{{overrideLinkImage|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
--&amp;gt;&amp;lt;div class=&amp;quot;itembox {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}} {{#var:variants}} {{#var:lowGraphics}} {{#var:lite}}&amp;quot; style=&amp;quot;font-size:{{#expr: 10 * {{#if:{{{size|}}}|{{{size}}}|1}} }}px;&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;itembox-background&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;div class=&amp;quot;itembox-card&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-icon-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-icon&amp;quot;&amp;gt;[[File:{{#var:linkImage}}.png|160px|link=]]&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-tier-badge&amp;quot;&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-shadow&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-fill&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-number&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-imbue-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_imbue}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-name-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;p class=&amp;quot;itembox-name&amp;quot; style=&amp;quot;font-size:{{#var:fontSize}}em;text-wrap:balance;&amp;quot;&amp;gt;{{#var:displayName}}&amp;lt;/p&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-wear&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-texture&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-bevel&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-active-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_active}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-outline&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
		&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;item-link-wrapper&amp;quot; data-item-name=&amp;quot;{{#var:linkTooltip}}&amp;quot;&amp;gt;[[{{#var:linkClick}}|&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;]]&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&amp;lt;/includeonly&amp;gt;&amp;lt;noinclude&amp;gt;{{Documentation}}&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox/styles.css?diff=99948</id>
		<title>Template:ItemBox/styles.css</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox/styles.css?diff=99948"/>
		<updated>2026-07-24T20:29:22Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Add texture=over: paper as a plain alpha overlay above icon and name, no blend mode, so it covers the whole card and still caches (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
&lt;br /&gt;
/* The whole card scales off one knob: font-size on .itembox (1em = 10px base) */&lt;br /&gt;
.itembox,&lt;br /&gt;
.itembox * {&lt;br /&gt;
    margin: 0;&lt;br /&gt;
    padding: 0;&lt;br /&gt;
    border: 0;&lt;br /&gt;
    box-sizing: border-box;&lt;br /&gt;
}&lt;br /&gt;
.itembox {&lt;br /&gt;
    --itembox-ink: #10130D;&lt;br /&gt;
    --itembox-weapon: #EC981a;&lt;br /&gt;
    --itembox-vitality: #7CBB1E;&lt;br /&gt;
    --itembox-spirit: #CE91FF;&lt;br /&gt;
    --itembox-imbue-fg: #E8C9FF;&lt;br /&gt;
    --itembox-imbue-bg: #623585;&lt;br /&gt;
    --itembox-wear-tint: #ffffff;&lt;br /&gt;
    --itembox-wear-ramp: 75%;&lt;br /&gt;
    --itembox-card-image: none;&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
    --itembox-overlay-opacity: 0.35;&lt;br /&gt;
    --itembox-font: &#039;Retail Demo&#039;, sans-serif;&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: inline-block;&lt;br /&gt;
    font-size: 10px;&lt;br /&gt;
    width: 8em;&lt;br /&gt;
    height: 12.5em;&lt;br /&gt;
    border-radius: 0.6em;&lt;br /&gt;
    box-shadow: 0.2em 0.2em 1.2em #00000097;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
    transition-duration: 0.1s;&lt;br /&gt;
    transition-property: opacity, transform, filter;&lt;br /&gt;
}&lt;br /&gt;
.itembox-background {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    pointer-events: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-card {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-image: var(--itembox-card-image);&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    /* Confines mix-blend-mode below to the card. Without it the blend group&lt;br /&gt;
       reaches the page backdrop and the card cannot be cached as one layer. */&lt;br /&gt;
    isolation: isolate;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Card art is held in a variable so the blend mode below can compose paper&lt;br /&gt;
   against it on the same element. The pairs collapse: T5 reuses the T4 image. */&lt;br /&gt;
.itembox-tier-1.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/3/3e/Weapon_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/9/96/Weapon_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/5/5d/Weapon_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-weapon,&lt;br /&gt;
.itembox-tier-5.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/a6/Weapon_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/7/75/Armor_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/0/05/Armor_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/7/7c/Armor_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-vitality,&lt;br /&gt;
.itembox-tier-5.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/1/18/Armor_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/af/Tech_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/ac/Tech_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/6/67/Tech_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-spirit,&lt;br /&gt;
.itembox-tier-5.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/f/f5/Tech_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-icon-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    align-items: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    aspect-ratio: 1 / 1;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    background-repeat: no-repeat;&lt;br /&gt;
    mask-size: cover;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon &amp;gt; span,&lt;br /&gt;
.itembox-icon &amp;gt; span &amp;gt; span,&lt;br /&gt;
.itembox-icon picture {&lt;br /&gt;
    display: block;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon img {&lt;br /&gt;
    display: block;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    max-width: 100%;&lt;br /&gt;
    max-height: 100%;&lt;br /&gt;
    object-fit: cover;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-icon-v1 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/1/10/Icon_mask01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon-v2 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/6/6f/Icon_mask02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon-v3 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/9/96/Icon_mask03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-badge {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0;&lt;br /&gt;
    right: 0;&lt;br /&gt;
    width: 2.8em;&lt;br /&gt;
    height: 2.8em;&lt;br /&gt;
    transform: scale(1.4);&lt;br /&gt;
    transform-origin: top right;&lt;br /&gt;
    /* display:none rather than visibility:hidden so the badge and its&lt;br /&gt;
       drop-shadow() cost nothing on the cards that never show it. */&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-show-tier .itembox-tier-badge {&lt;br /&gt;
    display: block;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-badge-fill {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    mask-size: 2.2em;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-position: right 0;&lt;br /&gt;
    mask-image: url(&#039;/images/6/61/Tier_corner_cap.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-badge-shadow {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0;&lt;br /&gt;
    left: 0;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-size: 2.2em;&lt;br /&gt;
    background-repeat: no-repeat;&lt;br /&gt;
    background-position: right 0;&lt;br /&gt;
    background-image: url(&#039;/images/6/61/Tier_corner_cap.svg&#039;);&lt;br /&gt;
    filter: drop-shadow(-0.4em 0 0.6em #000000ff);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-weapon .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-weapon);&lt;br /&gt;
}&lt;br /&gt;
.itembox-vitality .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-vitality);&lt;br /&gt;
}&lt;br /&gt;
.itembox-spirit .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-spirit);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-badge-number {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    right: 0;&lt;br /&gt;
    top: 0.3em;&lt;br /&gt;
    height: 0.8em;&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.5em;&lt;br /&gt;
    right: 0.4em;&lt;br /&gt;
    mask-image: url(&#039;/images/2/24/Tier_numbers_small_01.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.7em;&lt;br /&gt;
    right: 0.3em;&lt;br /&gt;
    mask-image: url(&#039;/images/7/74/Tier_numbers_small_02.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.9em;&lt;br /&gt;
    right: 0.2em;&lt;br /&gt;
    mask-image: url(&#039;/images/5/54/Tier_numbers_small_03.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4 .itembox-tier-badge-number {&lt;br /&gt;
    width: 1.1em;&lt;br /&gt;
    mask-image: url(&#039;/images/c/c6/Tier_numbers_small_04.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-5 .itembox-tier-badge-number {&lt;br /&gt;
    width: 1.1em;&lt;br /&gt;
    right: 0.1em;&lt;br /&gt;
    mask-image: url(&#039;/images/8/81/Tier_numbers_small_05.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-imbue-tag {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    bottom: 0;&lt;br /&gt;
    display: none;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: fit-content;&lt;br /&gt;
    font-size: 1.2em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    line-height: normal;&lt;br /&gt;
    letter-spacing: 0.1em;&lt;br /&gt;
    white-space: nowrap;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    text-transform: uppercase;&lt;br /&gt;
    border-radius: 0.2em;&lt;br /&gt;
    padding: 0 0.3em;&lt;br /&gt;
    color: var(--itembox-imbue-fg);&lt;br /&gt;
    background-color: var(--itembox-imbue-bg);&lt;br /&gt;
}&lt;br /&gt;
.itembox-imbue .itembox-imbue-tag {&lt;br /&gt;
    display: flex;&lt;br /&gt;
}&lt;br /&gt;
.itembox-active.itembox-imbue .itembox-imbue-tag {&lt;br /&gt;
    justify-content: start;&lt;br /&gt;
    height: 2.2em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-name-area {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 4.5em;&lt;br /&gt;
    padding: 0.5em 0.4em;&lt;br /&gt;
}&lt;br /&gt;
.itembox-name {&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    line-height: 1.2;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    font-size: 1.5em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    color: var(--itembox-ink);&lt;br /&gt;
    overflow-wrap: normal;&lt;br /&gt;
    word-break: normal;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-4.itembox-weapon .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-weapon .itembox-name {&lt;br /&gt;
    color: #e4c5a1;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-vitality .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-vitality .itembox-name {&lt;br /&gt;
    color: #c2e7cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-spirit .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-spirit .itembox-name {&lt;br /&gt;
    color: #e3d4f2;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-wear {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    opacity: 0.7;&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    background-color: white;&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v1 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/8/8f/Card_PaperWear_1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v2 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/1/11/Card_PaperWear_2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v3 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/8/89/Card_PaperWear_3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v4 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/5/52/Card_PaperWear_4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-1.itembox-vitality .itembox-wear {&lt;br /&gt;
    opacity: 1;&lt;br /&gt;
    background-color: #f4e2cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit .itembox-wear {&lt;br /&gt;
    opacity: 1;&lt;br /&gt;
    background-color: rgb(247, 232, 213);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 .itembox-wear {&lt;br /&gt;
    background-color: rgb(230, 209, 191);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 .itembox-wear {&lt;br /&gt;
    background-color: rgb(206, 173, 155);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4 .itembox-wear,&lt;br /&gt;
.itembox-tier-5 .itembox-wear {&lt;br /&gt;
    background-color: rgb(105, 97, 92);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Same tier colours again as a custom property. A gradient cannot read&lt;br /&gt;
   background-color, so the ramp variant below needs them in this form. */&lt;br /&gt;
.itembox-tier-1.itembox-vitality {&lt;br /&gt;
    --itembox-wear-tint: #f4e2cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit {&lt;br /&gt;
    --itembox-wear-tint: rgb(247, 232, 213);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 {&lt;br /&gt;
    --itembox-wear-tint: rgb(230, 209, 191);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 {&lt;br /&gt;
    --itembox-wear-tint: rgb(206, 173, 155);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4,&lt;br /&gt;
.itembox-tier-5 {&lt;br /&gt;
    --itembox-wear-tint: rgb(105, 97, 92);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-texture {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-size: 100% 100%;&lt;br /&gt;
    mix-blend-mode: multiply;&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v1 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v2 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v3 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Overrides the per-item texture so every card shares one image, which keeps a&lt;br /&gt;
   single paper texture resident in the GPU cache instead of three. Higher&lt;br /&gt;
   specificity than the hashed classes above, so it wins regardless of which&lt;br /&gt;
   variant the item&#039;s name landed on. */&lt;br /&gt;
.itembox.itembox-force-tex-1 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-force-tex-2 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-force-tex-3 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Two hairlines at ~13% alpha: screen and normal blending land within ~2% of&lt;br /&gt;
   each other here, so the blend mode is dropped and the layer stays cheap. */&lt;br /&gt;
.itembox-bevel {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    border-left: 0.1em solid #ffcc6622;&lt;br /&gt;
    border-top: 0.1em solid #ffcc6622;&lt;br /&gt;
    background-size: 100% 100%;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-active-tag {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    bottom: 3.5em;&lt;br /&gt;
    display: none;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    align-self: center;&lt;br /&gt;
    width: fit-content;&lt;br /&gt;
    height: fit-content;&lt;br /&gt;
    font-size: 1.1em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    line-height: normal;&lt;br /&gt;
    letter-spacing: 0;&lt;br /&gt;
    white-space: nowrap;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    text-transform: uppercase;&lt;br /&gt;
    border-radius: 0.2em;&lt;br /&gt;
    padding: 0.1em 0.6em;&lt;br /&gt;
    box-shadow: 0 0 1.5em #000000ff;&lt;br /&gt;
    color: #ffefd7b3;&lt;br /&gt;
    background-color: #171717;&lt;br /&gt;
}&lt;br /&gt;
.itembox-active .itembox-active-tag {&lt;br /&gt;
    display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox .item-link-wrapper,&lt;br /&gt;
.itembox .item-link-wrapper &amp;gt; a {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    display: block;&lt;br /&gt;
    inset: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* ---------------------------------------------------------------------------&lt;br /&gt;
   Opt-in simplifications, set through the parameters on [[Template:ItemBox]].&lt;br /&gt;
   Each removes work the GPU repeats for every card on screen: a masked element&lt;br /&gt;
   costs an extra render pass, and mix-blend-mode costs a backdrop read. Callers&lt;br /&gt;
   that place dozens of cards at once can trade the paper detail for the frames.&lt;br /&gt;
   --------------------------------------------------------------------------- */&lt;br /&gt;
&lt;br /&gt;
/* The wear patterns are concentrated at the card&#039;s edges and largely clear in&lt;br /&gt;
   the middle, so a gradient can stand in for the mask: transparent through the&lt;br /&gt;
   centre, tint gathering at the border. --itembox-wear-ramp is where the&lt;br /&gt;
   falloff starts and is the one value worth tuning. The name is lifted clear so&lt;br /&gt;
   no amount of tint ever lands on the glyphs; the paper behind them still&lt;br /&gt;
   takes it, since the name area has no background of its own. Gradients are a&lt;br /&gt;
   native primitive, so this costs no extra render pass.  */&lt;br /&gt;
.itembox.itembox-ramp-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    background-color: transparent;&lt;br /&gt;
    background-image: radial-gradient(ellipse at 50% 45%, transparent var(--itembox-wear-ramp), var(--itembox-wear-tint) 100%);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-ramp-wear .itembox-name-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    z-index: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Kept for comparison against the ramp; drop whichever loses.&lt;br /&gt;
   flat - tint moves behind the artwork, colouring only the card stock&lt;br /&gt;
   soft - tint stays on top, uniform and lighter, name lifted clear */&lt;br /&gt;
.itembox.itembox-flat-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    z-index: -1;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-soft-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    opacity: 0.35;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-soft-wear .itembox-name-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    z-index: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-flat-icon .itembox-icon {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-no-texture .itembox-texture {&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Paper multiplied against the card art on the SAME element. Unlike&lt;br /&gt;
   mix-blend-mode (which reads the page backdrop and so cannot be cached),&lt;br /&gt;
   background-blend-mode blends the element&#039;s own layers, which WebRender keeps&lt;br /&gt;
   as a static tile — the whole point of the exercise. The separate .itembox-&lt;br /&gt;
   texture div is switched off since the paper now lives in the card layer.&lt;br /&gt;
   Caveat: this only reaches the card art, not the icon or the name, which are&lt;br /&gt;
   real content above the background rather than layers of it. --itembox-paper&lt;br /&gt;
   selects which of the three papers to use. */&lt;br /&gt;
.itembox.itembox-blend-texture .itembox-card {&lt;br /&gt;
    background-image: var(--itembox-paper), var(--itembox-card-image);&lt;br /&gt;
    background-size: cover, cover;&lt;br /&gt;
    background-blend-mode: multiply, normal;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture .itembox-texture {&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Per-item blend: read the paper from the item&#039;s own hashed texture-vN class,&lt;br /&gt;
   so blended cards keep the same variety the overlay had. The forced classes&lt;br /&gt;
   below outrank these when a single shared paper is wanted instead. */&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Forced single paper for the blend, e.g. from lowGraphics. */&lt;br /&gt;
.itembox.itembox-blend-tex-1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-tex-2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-tex-3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Plain overlay: paper stays on top of the icon and the name (like the original&lt;br /&gt;
   mix-blend layer) so it covers the whole card, but with NO blend mode. Normal&lt;br /&gt;
   alpha compositing caches fine; the trade is that it lightens toward the paper&lt;br /&gt;
   instead of multiplying, so shadows lift rather than darken. --itembox-overlay-&lt;br /&gt;
   opacity controls how strong it reads and is the value to tune. Reuses the&lt;br /&gt;
   existing .itembox-texture div, just swapping the blend for opacity. */&lt;br /&gt;
.itembox.itembox-over-texture .itembox-texture {&lt;br /&gt;
    mix-blend-mode: normal;&lt;br /&gt;
    opacity: var(--itembox-overlay-opacity);&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    background-image: var(--itembox-paper);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Skipping offscreen cards only pays for itself when many are on screen at&lt;br /&gt;
   once. On narrow viewports about ten fit, so the saving is small while cards&lt;br /&gt;
   crossing the boundary force constant display list rebuilds — measured at&lt;br /&gt;
   roughly half the frame rate on Android with this enabled. */&lt;br /&gt;
@media (min-width: 900px) {&lt;br /&gt;
    .itembox {&lt;br /&gt;
        content-visibility: auto;&lt;br /&gt;
        contain-intrinsic-size: 8em 12.5em;&lt;br /&gt;
    }&lt;br /&gt;
}&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox/styles.css?diff=99947</id>
		<title>Template:ItemBox/styles.css</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox/styles.css?diff=99947"/>
		<updated>2026-07-24T20:18:05Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Let texture=blend pick its paper from the item&amp;#039;s hashed texture-vN class, so blended paper keeps per-item variety (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
&lt;br /&gt;
/* The whole card scales off one knob: font-size on .itembox (1em = 10px base) */&lt;br /&gt;
.itembox,&lt;br /&gt;
.itembox * {&lt;br /&gt;
    margin: 0;&lt;br /&gt;
    padding: 0;&lt;br /&gt;
    border: 0;&lt;br /&gt;
    box-sizing: border-box;&lt;br /&gt;
}&lt;br /&gt;
.itembox {&lt;br /&gt;
    --itembox-ink: #10130D;&lt;br /&gt;
    --itembox-weapon: #EC981a;&lt;br /&gt;
    --itembox-vitality: #7CBB1E;&lt;br /&gt;
    --itembox-spirit: #CE91FF;&lt;br /&gt;
    --itembox-imbue-fg: #E8C9FF;&lt;br /&gt;
    --itembox-imbue-bg: #623585;&lt;br /&gt;
    --itembox-wear-tint: #ffffff;&lt;br /&gt;
    --itembox-wear-ramp: 75%;&lt;br /&gt;
    --itembox-card-image: none;&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
    --itembox-font: &#039;Retail Demo&#039;, sans-serif;&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: inline-block;&lt;br /&gt;
    font-size: 10px;&lt;br /&gt;
    width: 8em;&lt;br /&gt;
    height: 12.5em;&lt;br /&gt;
    border-radius: 0.6em;&lt;br /&gt;
    box-shadow: 0.2em 0.2em 1.2em #00000097;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
    transition-duration: 0.1s;&lt;br /&gt;
    transition-property: opacity, transform, filter;&lt;br /&gt;
}&lt;br /&gt;
.itembox-background {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    pointer-events: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-card {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-image: var(--itembox-card-image);&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    /* Confines mix-blend-mode below to the card. Without it the blend group&lt;br /&gt;
       reaches the page backdrop and the card cannot be cached as one layer. */&lt;br /&gt;
    isolation: isolate;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Card art is held in a variable so the blend mode below can compose paper&lt;br /&gt;
   against it on the same element. The pairs collapse: T5 reuses the T4 image. */&lt;br /&gt;
.itembox-tier-1.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/3/3e/Weapon_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/9/96/Weapon_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/5/5d/Weapon_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-weapon,&lt;br /&gt;
.itembox-tier-5.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/a6/Weapon_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/7/75/Armor_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/0/05/Armor_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/7/7c/Armor_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-vitality,&lt;br /&gt;
.itembox-tier-5.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/1/18/Armor_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/af/Tech_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/ac/Tech_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/6/67/Tech_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-spirit,&lt;br /&gt;
.itembox-tier-5.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/f/f5/Tech_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-icon-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    align-items: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    aspect-ratio: 1 / 1;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    background-repeat: no-repeat;&lt;br /&gt;
    mask-size: cover;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon &amp;gt; span,&lt;br /&gt;
.itembox-icon &amp;gt; span &amp;gt; span,&lt;br /&gt;
.itembox-icon picture {&lt;br /&gt;
    display: block;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon img {&lt;br /&gt;
    display: block;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    max-width: 100%;&lt;br /&gt;
    max-height: 100%;&lt;br /&gt;
    object-fit: cover;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-icon-v1 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/1/10/Icon_mask01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon-v2 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/6/6f/Icon_mask02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon-v3 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/9/96/Icon_mask03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-badge {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0;&lt;br /&gt;
    right: 0;&lt;br /&gt;
    width: 2.8em;&lt;br /&gt;
    height: 2.8em;&lt;br /&gt;
    transform: scale(1.4);&lt;br /&gt;
    transform-origin: top right;&lt;br /&gt;
    /* display:none rather than visibility:hidden so the badge and its&lt;br /&gt;
       drop-shadow() cost nothing on the cards that never show it. */&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-show-tier .itembox-tier-badge {&lt;br /&gt;
    display: block;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-badge-fill {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    mask-size: 2.2em;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-position: right 0;&lt;br /&gt;
    mask-image: url(&#039;/images/6/61/Tier_corner_cap.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-badge-shadow {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0;&lt;br /&gt;
    left: 0;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-size: 2.2em;&lt;br /&gt;
    background-repeat: no-repeat;&lt;br /&gt;
    background-position: right 0;&lt;br /&gt;
    background-image: url(&#039;/images/6/61/Tier_corner_cap.svg&#039;);&lt;br /&gt;
    filter: drop-shadow(-0.4em 0 0.6em #000000ff);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-weapon .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-weapon);&lt;br /&gt;
}&lt;br /&gt;
.itembox-vitality .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-vitality);&lt;br /&gt;
}&lt;br /&gt;
.itembox-spirit .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-spirit);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-badge-number {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    right: 0;&lt;br /&gt;
    top: 0.3em;&lt;br /&gt;
    height: 0.8em;&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.5em;&lt;br /&gt;
    right: 0.4em;&lt;br /&gt;
    mask-image: url(&#039;/images/2/24/Tier_numbers_small_01.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.7em;&lt;br /&gt;
    right: 0.3em;&lt;br /&gt;
    mask-image: url(&#039;/images/7/74/Tier_numbers_small_02.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.9em;&lt;br /&gt;
    right: 0.2em;&lt;br /&gt;
    mask-image: url(&#039;/images/5/54/Tier_numbers_small_03.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4 .itembox-tier-badge-number {&lt;br /&gt;
    width: 1.1em;&lt;br /&gt;
    mask-image: url(&#039;/images/c/c6/Tier_numbers_small_04.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-5 .itembox-tier-badge-number {&lt;br /&gt;
    width: 1.1em;&lt;br /&gt;
    right: 0.1em;&lt;br /&gt;
    mask-image: url(&#039;/images/8/81/Tier_numbers_small_05.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-imbue-tag {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    bottom: 0;&lt;br /&gt;
    display: none;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: fit-content;&lt;br /&gt;
    font-size: 1.2em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    line-height: normal;&lt;br /&gt;
    letter-spacing: 0.1em;&lt;br /&gt;
    white-space: nowrap;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    text-transform: uppercase;&lt;br /&gt;
    border-radius: 0.2em;&lt;br /&gt;
    padding: 0 0.3em;&lt;br /&gt;
    color: var(--itembox-imbue-fg);&lt;br /&gt;
    background-color: var(--itembox-imbue-bg);&lt;br /&gt;
}&lt;br /&gt;
.itembox-imbue .itembox-imbue-tag {&lt;br /&gt;
    display: flex;&lt;br /&gt;
}&lt;br /&gt;
.itembox-active.itembox-imbue .itembox-imbue-tag {&lt;br /&gt;
    justify-content: start;&lt;br /&gt;
    height: 2.2em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-name-area {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 4.5em;&lt;br /&gt;
    padding: 0.5em 0.4em;&lt;br /&gt;
}&lt;br /&gt;
.itembox-name {&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    line-height: 1.2;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    font-size: 1.5em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    color: var(--itembox-ink);&lt;br /&gt;
    overflow-wrap: normal;&lt;br /&gt;
    word-break: normal;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-4.itembox-weapon .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-weapon .itembox-name {&lt;br /&gt;
    color: #e4c5a1;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-vitality .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-vitality .itembox-name {&lt;br /&gt;
    color: #c2e7cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-spirit .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-spirit .itembox-name {&lt;br /&gt;
    color: #e3d4f2;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-wear {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    opacity: 0.7;&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    background-color: white;&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v1 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/8/8f/Card_PaperWear_1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v2 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/1/11/Card_PaperWear_2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v3 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/8/89/Card_PaperWear_3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v4 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/5/52/Card_PaperWear_4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-1.itembox-vitality .itembox-wear {&lt;br /&gt;
    opacity: 1;&lt;br /&gt;
    background-color: #f4e2cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit .itembox-wear {&lt;br /&gt;
    opacity: 1;&lt;br /&gt;
    background-color: rgb(247, 232, 213);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 .itembox-wear {&lt;br /&gt;
    background-color: rgb(230, 209, 191);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 .itembox-wear {&lt;br /&gt;
    background-color: rgb(206, 173, 155);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4 .itembox-wear,&lt;br /&gt;
.itembox-tier-5 .itembox-wear {&lt;br /&gt;
    background-color: rgb(105, 97, 92);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Same tier colours again as a custom property. A gradient cannot read&lt;br /&gt;
   background-color, so the ramp variant below needs them in this form. */&lt;br /&gt;
.itembox-tier-1.itembox-vitality {&lt;br /&gt;
    --itembox-wear-tint: #f4e2cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit {&lt;br /&gt;
    --itembox-wear-tint: rgb(247, 232, 213);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 {&lt;br /&gt;
    --itembox-wear-tint: rgb(230, 209, 191);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 {&lt;br /&gt;
    --itembox-wear-tint: rgb(206, 173, 155);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4,&lt;br /&gt;
.itembox-tier-5 {&lt;br /&gt;
    --itembox-wear-tint: rgb(105, 97, 92);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-texture {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-size: 100% 100%;&lt;br /&gt;
    mix-blend-mode: multiply;&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v1 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v2 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v3 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Overrides the per-item texture so every card shares one image, which keeps a&lt;br /&gt;
   single paper texture resident in the GPU cache instead of three. Higher&lt;br /&gt;
   specificity than the hashed classes above, so it wins regardless of which&lt;br /&gt;
   variant the item&#039;s name landed on. */&lt;br /&gt;
.itembox.itembox-force-tex-1 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-force-tex-2 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-force-tex-3 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Two hairlines at ~13% alpha: screen and normal blending land within ~2% of&lt;br /&gt;
   each other here, so the blend mode is dropped and the layer stays cheap. */&lt;br /&gt;
.itembox-bevel {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    border-left: 0.1em solid #ffcc6622;&lt;br /&gt;
    border-top: 0.1em solid #ffcc6622;&lt;br /&gt;
    background-size: 100% 100%;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-active-tag {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    bottom: 3.5em;&lt;br /&gt;
    display: none;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    align-self: center;&lt;br /&gt;
    width: fit-content;&lt;br /&gt;
    height: fit-content;&lt;br /&gt;
    font-size: 1.1em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    line-height: normal;&lt;br /&gt;
    letter-spacing: 0;&lt;br /&gt;
    white-space: nowrap;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    text-transform: uppercase;&lt;br /&gt;
    border-radius: 0.2em;&lt;br /&gt;
    padding: 0.1em 0.6em;&lt;br /&gt;
    box-shadow: 0 0 1.5em #000000ff;&lt;br /&gt;
    color: #ffefd7b3;&lt;br /&gt;
    background-color: #171717;&lt;br /&gt;
}&lt;br /&gt;
.itembox-active .itembox-active-tag {&lt;br /&gt;
    display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox .item-link-wrapper,&lt;br /&gt;
.itembox .item-link-wrapper &amp;gt; a {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    display: block;&lt;br /&gt;
    inset: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* ---------------------------------------------------------------------------&lt;br /&gt;
   Opt-in simplifications, set through the parameters on [[Template:ItemBox]].&lt;br /&gt;
   Each removes work the GPU repeats for every card on screen: a masked element&lt;br /&gt;
   costs an extra render pass, and mix-blend-mode costs a backdrop read. Callers&lt;br /&gt;
   that place dozens of cards at once can trade the paper detail for the frames.&lt;br /&gt;
   --------------------------------------------------------------------------- */&lt;br /&gt;
&lt;br /&gt;
/* The wear patterns are concentrated at the card&#039;s edges and largely clear in&lt;br /&gt;
   the middle, so a gradient can stand in for the mask: transparent through the&lt;br /&gt;
   centre, tint gathering at the border. --itembox-wear-ramp is where the&lt;br /&gt;
   falloff starts and is the one value worth tuning. The name is lifted clear so&lt;br /&gt;
   no amount of tint ever lands on the glyphs; the paper behind them still&lt;br /&gt;
   takes it, since the name area has no background of its own. Gradients are a&lt;br /&gt;
   native primitive, so this costs no extra render pass.  */&lt;br /&gt;
.itembox.itembox-ramp-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    background-color: transparent;&lt;br /&gt;
    background-image: radial-gradient(ellipse at 50% 45%, transparent var(--itembox-wear-ramp), var(--itembox-wear-tint) 100%);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-ramp-wear .itembox-name-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    z-index: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Kept for comparison against the ramp; drop whichever loses.&lt;br /&gt;
   flat - tint moves behind the artwork, colouring only the card stock&lt;br /&gt;
   soft - tint stays on top, uniform and lighter, name lifted clear */&lt;br /&gt;
.itembox.itembox-flat-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    z-index: -1;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-soft-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    opacity: 0.35;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-soft-wear .itembox-name-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    z-index: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-flat-icon .itembox-icon {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-no-texture .itembox-texture {&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Paper multiplied against the card art on the SAME element. Unlike&lt;br /&gt;
   mix-blend-mode (which reads the page backdrop and so cannot be cached),&lt;br /&gt;
   background-blend-mode blends the element&#039;s own layers, which WebRender keeps&lt;br /&gt;
   as a static tile — the whole point of the exercise. The separate .itembox-&lt;br /&gt;
   texture div is switched off since the paper now lives in the card layer.&lt;br /&gt;
   Caveat: this only reaches the card art, not the icon or the name, which are&lt;br /&gt;
   real content above the background rather than layers of it. --itembox-paper&lt;br /&gt;
   selects which of the three papers to use. */&lt;br /&gt;
.itembox.itembox-blend-texture .itembox-card {&lt;br /&gt;
    background-image: var(--itembox-paper), var(--itembox-card-image);&lt;br /&gt;
    background-size: cover, cover;&lt;br /&gt;
    background-blend-mode: multiply, normal;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture .itembox-texture {&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Per-item blend: read the paper from the item&#039;s own hashed texture-vN class,&lt;br /&gt;
   so blended cards keep the same variety the overlay had. The forced classes&lt;br /&gt;
   below outrank these when a single shared paper is wanted instead. */&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture.itembox-texture-v3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Forced single paper for the blend, e.g. from lowGraphics. */&lt;br /&gt;
.itembox.itembox-blend-tex-1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-tex-2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-tex-3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Skipping offscreen cards only pays for itself when many are on screen at&lt;br /&gt;
   once. On narrow viewports about ten fit, so the saving is small while cards&lt;br /&gt;
   crossing the boundary force constant display list rebuilds — measured at&lt;br /&gt;
   roughly half the frame rate on Android with this enabled. */&lt;br /&gt;
@media (min-width: 900px) {&lt;br /&gt;
    .itembox {&lt;br /&gt;
        content-visibility: auto;&lt;br /&gt;
        contain-intrinsic-size: 8em 12.5em;&lt;br /&gt;
    }&lt;br /&gt;
}&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox?diff=99946</id>
		<title>Template:ItemBox</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox?diff=99946"/>
		<updated>2026-07-24T20:16:49Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Fix texture=blend: use the item&amp;#039;s hashed texture variant rather than an undefined variable (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;templatestyles src=&amp;quot;Template:ItemBox/styles.css&amp;quot; /&amp;gt;&amp;lt;includeonly&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{#vardefine:itemName|{{{itemName|{{{1}}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Display name: Lang string for the codename, else the raw name, then override.&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#invoke:Lang|get_string|{{#invoke:ItemData|get_codename|{{#var:itemName}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#if:{{#var:displayName}}|{{#var:displayName}}|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Measured name size (em) and stable per-item texture variety.&lt;br /&gt;
--&amp;gt;{{#vardefine:fontSize|{{#invoke:ItemBox|getFontSize|{{#var:displayName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Modifier classes: slot (Weapon/Armor/Tech from data, or Weapon/Vitality/Spirit override -&amp;gt; weapon/vitality/spirit), tier, tags.&lt;br /&gt;
--&amp;gt;{{#vardefine:slot|{{#switch:{{{overrideSlot|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Slot}}}}}|Weapon=itembox-weapon|Armor|Vitality=itembox-vitality|Tech|Spirit=itembox-spirit}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:tier|itembox-tier-{{{overrideTier|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Tier}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:showTierTag|{{#ifeq:{{{showTierTag|}}}|true|itembox-show-tier}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{{overrideIsActive|{{#invoke:ItemData|is_active|{{#var:itemName}}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{#ifeq:{{#var:isActive}}|true|itembox-active}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{{overrideIsImbue|{{#invoke:ItemData|get_prop|{{#var:itemName}}|IsImbue}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     lowGraphics=true is the setting for callers that place dozens of cards on&lt;br /&gt;
     one page. The wear tint becomes a gradient and the icon mask is dropped,&lt;br /&gt;
     and the paper texture is composited into the card layer with&lt;br /&gt;
     background-blend-mode instead of the separate mix-blend-mode overlay. That&lt;br /&gt;
     is the change that matters: mix-blend-mode reads the page backdrop so&lt;br /&gt;
     WebRender re-rasterises those regions every scrolled frame, while a&lt;br /&gt;
     same-element blend stays a static tile. Removing the overlay blend cut the&lt;br /&gt;
     render thread&#039;s OpenGL work on the profiled navbox by around 90%.&lt;br /&gt;
--&amp;gt;{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-ramp-wear itembox-flat-icon itembox-blend-texture itembox-blend-tex-3}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     The same layers individually, for testing combinations or overriding the&lt;br /&gt;
     bundle above. wearMask drops the mask from the wear tint three ways:&lt;br /&gt;
     no   - tint moves behind the artwork, so only the card stock is coloured&lt;br /&gt;
     ramp - tint stays on top, fading in from the card&#039;s edges&lt;br /&gt;
     soft - tint stays on top, uniform and lighter, with the name lifted clear&lt;br /&gt;
     texture handles the paper grain:&lt;br /&gt;
     no    - drop it entirely&lt;br /&gt;
     1/2/3 - one shared paper via the mix-blend overlay (does not cache)&lt;br /&gt;
     blend - paper multiplied into the card art, per item, cacheable. The paper&lt;br /&gt;
             image is picked up from the item&#039;s texture-vN variant class.&lt;br /&gt;
     blend1/blend2/blend3 - the cacheable blend forced to one shared paper&lt;br /&gt;
--&amp;gt;{{#vardefine:lite|{{#switch:{{{wearMask|}}}|no=itembox-flat-wear|ramp=itembox-ramp-wear|soft=itembox-soft-wear}} {{#ifeq:{{{iconMask|}}}|no|itembox-flat-icon}} {{#switch:{{{texture|}}}|no=itembox-no-texture|1=itembox-force-tex-1|2=itembox-force-tex-2|3=itembox-force-tex-3|blend=itembox-blend-texture|blend1=itembox-blend-texture itembox-blend-tex-1|blend2=itembox-blend-texture itembox-blend-tex-2|blend3=itembox-blend-texture itembox-blend-tex-3}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Links.&lt;br /&gt;
--&amp;gt;{{#vardefine:linkTooltip|{{{overrideLinkTooltip|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkImage|{{{overrideLinkImage|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
--&amp;gt;&amp;lt;div class=&amp;quot;itembox {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}} {{#var:variants}} {{#var:lowGraphics}} {{#var:lite}}&amp;quot; style=&amp;quot;font-size:{{#expr: 10 * {{#if:{{{size|}}}|{{{size}}}|1}} }}px;&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;itembox-background&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;div class=&amp;quot;itembox-card&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-icon-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-icon&amp;quot;&amp;gt;[[File:{{#var:linkImage}}.png|160px|link=]]&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-tier-badge&amp;quot;&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-shadow&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-fill&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-number&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-imbue-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_imbue}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-name-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;p class=&amp;quot;itembox-name&amp;quot; style=&amp;quot;font-size:{{#var:fontSize}}em;text-wrap:balance;&amp;quot;&amp;gt;{{#var:displayName}}&amp;lt;/p&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-wear&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-texture&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-bevel&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-active-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_active}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-outline&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
		&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;item-link-wrapper&amp;quot; data-item-name=&amp;quot;{{#var:linkTooltip}}&amp;quot;&amp;gt;[[{{#var:linkClick}}|&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;]]&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&amp;lt;/includeonly&amp;gt;&amp;lt;noinclude&amp;gt;{{Documentation}}&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox?diff=99945</id>
		<title>Template:ItemBox</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox?diff=99945"/>
		<updated>2026-07-24T20:16:01Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Add texture=blend and blend1/2/3 modes, and give lowGraphics the cacheable blended paper instead of no texture (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;templatestyles src=&amp;quot;Template:ItemBox/styles.css&amp;quot; /&amp;gt;&amp;lt;includeonly&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{#vardefine:itemName|{{{itemName|{{{1}}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Display name: Lang string for the codename, else the raw name, then override.&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#invoke:Lang|get_string|{{#invoke:ItemData|get_codename|{{#var:itemName}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#if:{{#var:displayName}}|{{#var:displayName}}|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Measured name size (em) and stable per-item texture variety.&lt;br /&gt;
--&amp;gt;{{#vardefine:fontSize|{{#invoke:ItemBox|getFontSize|{{#var:displayName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Modifier classes: slot (Weapon/Armor/Tech from data, or Weapon/Vitality/Spirit override -&amp;gt; weapon/vitality/spirit), tier, tags.&lt;br /&gt;
--&amp;gt;{{#vardefine:slot|{{#switch:{{{overrideSlot|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Slot}}}}}|Weapon=itembox-weapon|Armor|Vitality=itembox-vitality|Tech|Spirit=itembox-spirit}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:tier|itembox-tier-{{{overrideTier|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Tier}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:showTierTag|{{#ifeq:{{{showTierTag|}}}|true|itembox-show-tier}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{{overrideIsActive|{{#invoke:ItemData|is_active|{{#var:itemName}}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{#ifeq:{{#var:isActive}}|true|itembox-active}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{{overrideIsImbue|{{#invoke:ItemData|get_prop|{{#var:itemName}}|IsImbue}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     lowGraphics=true is the setting for callers that place dozens of cards on&lt;br /&gt;
     one page. The wear tint becomes a gradient and the icon mask is dropped,&lt;br /&gt;
     and the paper texture is composited into the card layer with&lt;br /&gt;
     background-blend-mode instead of the separate mix-blend-mode overlay. That&lt;br /&gt;
     is the change that matters: mix-blend-mode reads the page backdrop so&lt;br /&gt;
     WebRender re-rasterises those regions every scrolled frame, while a&lt;br /&gt;
     same-element blend stays a static tile. Removing the overlay blend cut the&lt;br /&gt;
     render thread&#039;s OpenGL work on the profiled navbox by around 90%.&lt;br /&gt;
--&amp;gt;{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-ramp-wear itembox-flat-icon itembox-blend-texture itembox-blend-tex-3}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     The same layers individually, for testing combinations or overriding the&lt;br /&gt;
     bundle above. wearMask drops the mask from the wear tint three ways:&lt;br /&gt;
     no   - tint moves behind the artwork, so only the card stock is coloured&lt;br /&gt;
     ramp - tint stays on top, fading in from the card&#039;s edges&lt;br /&gt;
     soft - tint stays on top, uniform and lighter, with the name lifted clear&lt;br /&gt;
     texture handles the paper grain:&lt;br /&gt;
     no    - drop it entirely&lt;br /&gt;
     1/2/3 - one shared paper via the mix-blend overlay (does not cache)&lt;br /&gt;
     blend - paper multiplied into the card art, per item, cacheable&lt;br /&gt;
     blend1/blend2/blend3 - the cacheable blend with one shared paper&lt;br /&gt;
--&amp;gt;{{#vardefine:lite|{{#switch:{{{wearMask|}}}|no=itembox-flat-wear|ramp=itembox-ramp-wear|soft=itembox-soft-wear}} {{#ifeq:{{{iconMask|}}}|no|itembox-flat-icon}} {{#switch:{{{texture|}}}|no=itembox-no-texture|1=itembox-force-tex-1|2=itembox-force-tex-2|3=itembox-force-tex-3|blend=itembox-blend-texture {{#var:variants-blend}}|blend1=itembox-blend-texture itembox-blend-tex-1|blend2=itembox-blend-texture itembox-blend-tex-2|blend3=itembox-blend-texture itembox-blend-tex-3}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Links.&lt;br /&gt;
--&amp;gt;{{#vardefine:linkTooltip|{{{overrideLinkTooltip|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkImage|{{{overrideLinkImage|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
--&amp;gt;&amp;lt;div class=&amp;quot;itembox {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}} {{#var:variants}} {{#var:lowGraphics}} {{#var:lite}}&amp;quot; style=&amp;quot;font-size:{{#expr: 10 * {{#if:{{{size|}}}|{{{size}}}|1}} }}px;&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;itembox-background&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;div class=&amp;quot;itembox-card&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-icon-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-icon&amp;quot;&amp;gt;[[File:{{#var:linkImage}}.png|160px|link=]]&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-tier-badge&amp;quot;&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-shadow&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-fill&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-number&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-imbue-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_imbue}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-name-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;p class=&amp;quot;itembox-name&amp;quot; style=&amp;quot;font-size:{{#var:fontSize}}em;text-wrap:balance;&amp;quot;&amp;gt;{{#var:displayName}}&amp;lt;/p&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-wear&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-texture&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-bevel&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-active-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_active}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-outline&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
		&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;item-link-wrapper&amp;quot; data-item-name=&amp;quot;{{#var:linkTooltip}}&amp;quot;&amp;gt;[[{{#var:linkClick}}|&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;]]&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&amp;lt;/includeonly&amp;gt;&amp;lt;noinclude&amp;gt;{{Documentation}}&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox/styles.css?diff=99944</id>
		<title>Template:ItemBox/styles.css</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox/styles.css?diff=99944"/>
		<updated>2026-07-24T20:15:29Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Add texture=blend: paper multiplied against the card art via background-blend-mode, which WebRender can cache unlike mix-blend-mode. Restores all three papers on the card stock (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
&lt;br /&gt;
/* The whole card scales off one knob: font-size on .itembox (1em = 10px base) */&lt;br /&gt;
.itembox,&lt;br /&gt;
.itembox * {&lt;br /&gt;
    margin: 0;&lt;br /&gt;
    padding: 0;&lt;br /&gt;
    border: 0;&lt;br /&gt;
    box-sizing: border-box;&lt;br /&gt;
}&lt;br /&gt;
.itembox {&lt;br /&gt;
    --itembox-ink: #10130D;&lt;br /&gt;
    --itembox-weapon: #EC981a;&lt;br /&gt;
    --itembox-vitality: #7CBB1E;&lt;br /&gt;
    --itembox-spirit: #CE91FF;&lt;br /&gt;
    --itembox-imbue-fg: #E8C9FF;&lt;br /&gt;
    --itembox-imbue-bg: #623585;&lt;br /&gt;
    --itembox-wear-tint: #ffffff;&lt;br /&gt;
    --itembox-wear-ramp: 75%;&lt;br /&gt;
    --itembox-card-image: none;&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
    --itembox-font: &#039;Retail Demo&#039;, sans-serif;&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: inline-block;&lt;br /&gt;
    font-size: 10px;&lt;br /&gt;
    width: 8em;&lt;br /&gt;
    height: 12.5em;&lt;br /&gt;
    border-radius: 0.6em;&lt;br /&gt;
    box-shadow: 0.2em 0.2em 1.2em #00000097;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
    transition-duration: 0.1s;&lt;br /&gt;
    transition-property: opacity, transform, filter;&lt;br /&gt;
}&lt;br /&gt;
.itembox-background {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    pointer-events: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-card {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-image: var(--itembox-card-image);&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    /* Confines mix-blend-mode below to the card. Without it the blend group&lt;br /&gt;
       reaches the page backdrop and the card cannot be cached as one layer. */&lt;br /&gt;
    isolation: isolate;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Card art is held in a variable so the blend mode below can compose paper&lt;br /&gt;
   against it on the same element. The pairs collapse: T5 reuses the T4 image. */&lt;br /&gt;
.itembox-tier-1.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/3/3e/Weapon_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/9/96/Weapon_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/5/5d/Weapon_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-weapon,&lt;br /&gt;
.itembox-tier-5.itembox-weapon {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/a6/Weapon_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/7/75/Armor_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/0/05/Armor_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/7/7c/Armor_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-vitality,&lt;br /&gt;
.itembox-tier-5.itembox-vitality {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/1/18/Armor_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/af/Tech_Card_T1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/a/ac/Tech_Card_T2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/6/67/Tech_Card_T3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-spirit,&lt;br /&gt;
.itembox-tier-5.itembox-spirit {&lt;br /&gt;
    --itembox-card-image: url(&#039;/images/f/f5/Tech_Card_T4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-icon-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    align-items: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    aspect-ratio: 1 / 1;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    overflow: hidden;&lt;br /&gt;
    background-size: cover;&lt;br /&gt;
    background-repeat: no-repeat;&lt;br /&gt;
    mask-size: cover;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-mode: luminance;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon &amp;gt; span,&lt;br /&gt;
.itembox-icon &amp;gt; span &amp;gt; span,&lt;br /&gt;
.itembox-icon picture {&lt;br /&gt;
    display: block;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon img {&lt;br /&gt;
    display: block;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    max-width: 100%;&lt;br /&gt;
    max-height: 100%;&lt;br /&gt;
    object-fit: cover;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-icon-v1 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/1/10/Icon_mask01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon-v2 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/6/6f/Icon_mask02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-icon-v3 .itembox-icon {&lt;br /&gt;
    mask-image: url(&#039;/images/9/96/Icon_mask03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-badge {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0;&lt;br /&gt;
    right: 0;&lt;br /&gt;
    width: 2.8em;&lt;br /&gt;
    height: 2.8em;&lt;br /&gt;
    transform: scale(1.4);&lt;br /&gt;
    transform-origin: top right;&lt;br /&gt;
    /* display:none rather than visibility:hidden so the badge and its&lt;br /&gt;
       drop-shadow() cost nothing on the cards that never show it. */&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-show-tier .itembox-tier-badge {&lt;br /&gt;
    display: block;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-badge-fill {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    mask-size: 2.2em;&lt;br /&gt;
    mask-repeat: no-repeat;&lt;br /&gt;
    mask-position: right 0;&lt;br /&gt;
    mask-image: url(&#039;/images/6/61/Tier_corner_cap.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-badge-shadow {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    top: 0;&lt;br /&gt;
    left: 0;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-size: 2.2em;&lt;br /&gt;
    background-repeat: no-repeat;&lt;br /&gt;
    background-position: right 0;&lt;br /&gt;
    background-image: url(&#039;/images/6/61/Tier_corner_cap.svg&#039;);&lt;br /&gt;
    filter: drop-shadow(-0.4em 0 0.6em #000000ff);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-weapon .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-weapon);&lt;br /&gt;
}&lt;br /&gt;
.itembox-vitality .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-vitality);&lt;br /&gt;
}&lt;br /&gt;
.itembox-spirit .itembox-tier-badge-fill {&lt;br /&gt;
    background-color: var(--itembox-spirit);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-badge-number {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    right: 0;&lt;br /&gt;
    top: 0.3em;&lt;br /&gt;
    height: 0.8em;&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    background-color: var(--itembox-ink);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.5em;&lt;br /&gt;
    right: 0.4em;&lt;br /&gt;
    mask-image: url(&#039;/images/2/24/Tier_numbers_small_01.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.7em;&lt;br /&gt;
    right: 0.3em;&lt;br /&gt;
    mask-image: url(&#039;/images/7/74/Tier_numbers_small_02.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 .itembox-tier-badge-number {&lt;br /&gt;
    width: 0.9em;&lt;br /&gt;
    right: 0.2em;&lt;br /&gt;
    mask-image: url(&#039;/images/5/54/Tier_numbers_small_03.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4 .itembox-tier-badge-number {&lt;br /&gt;
    width: 1.1em;&lt;br /&gt;
    mask-image: url(&#039;/images/c/c6/Tier_numbers_small_04.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-5 .itembox-tier-badge-number {&lt;br /&gt;
    width: 1.1em;&lt;br /&gt;
    right: 0.1em;&lt;br /&gt;
    mask-image: url(&#039;/images/8/81/Tier_numbers_small_05.svg&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-imbue-tag {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    bottom: 0;&lt;br /&gt;
    display: none;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: fit-content;&lt;br /&gt;
    font-size: 1.2em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    line-height: normal;&lt;br /&gt;
    letter-spacing: 0.1em;&lt;br /&gt;
    white-space: nowrap;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    text-transform: uppercase;&lt;br /&gt;
    border-radius: 0.2em;&lt;br /&gt;
    padding: 0 0.3em;&lt;br /&gt;
    color: var(--itembox-imbue-fg);&lt;br /&gt;
    background-color: var(--itembox-imbue-bg);&lt;br /&gt;
}&lt;br /&gt;
.itembox-imbue .itembox-imbue-tag {&lt;br /&gt;
    display: flex;&lt;br /&gt;
}&lt;br /&gt;
.itembox-active.itembox-imbue .itembox-imbue-tag {&lt;br /&gt;
    justify-content: start;&lt;br /&gt;
    height: 2.2em;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-name-area {&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 4.5em;&lt;br /&gt;
    padding: 0.5em 0.4em;&lt;br /&gt;
}&lt;br /&gt;
.itembox-name {&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    line-height: 1.2;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    font-size: 1.5em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    color: var(--itembox-ink);&lt;br /&gt;
    overflow-wrap: normal;&lt;br /&gt;
    word-break: normal;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-4.itembox-weapon .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-weapon .itembox-name {&lt;br /&gt;
    color: #e4c5a1;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-vitality .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-vitality .itembox-name {&lt;br /&gt;
    color: #c2e7cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4.itembox-spirit .itembox-name,&lt;br /&gt;
.itembox-tier-5.itembox-spirit .itembox-name {&lt;br /&gt;
    color: #e3d4f2;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-wear {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    opacity: 0.7;&lt;br /&gt;
    mask-size: 100% 100%;&lt;br /&gt;
    background-color: white;&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v1 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/8/8f/Card_PaperWear_1.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v2 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/1/11/Card_PaperWear_2.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v3 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/8/89/Card_PaperWear_3.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-wear-v4 .itembox-wear {&lt;br /&gt;
    mask-image: url(&#039;/images/5/52/Card_PaperWear_4.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-tier-1.itembox-vitality .itembox-wear {&lt;br /&gt;
    opacity: 1;&lt;br /&gt;
    background-color: #f4e2cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit .itembox-wear {&lt;br /&gt;
    opacity: 1;&lt;br /&gt;
    background-color: rgb(247, 232, 213);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 .itembox-wear {&lt;br /&gt;
    background-color: rgb(230, 209, 191);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 .itembox-wear {&lt;br /&gt;
    background-color: rgb(206, 173, 155);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4 .itembox-wear,&lt;br /&gt;
.itembox-tier-5 .itembox-wear {&lt;br /&gt;
    background-color: rgb(105, 97, 92);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Same tier colours again as a custom property. A gradient cannot read&lt;br /&gt;
   background-color, so the ramp variant below needs them in this form. */&lt;br /&gt;
.itembox-tier-1.itembox-vitality {&lt;br /&gt;
    --itembox-wear-tint: #f4e2cd;&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-1.itembox-spirit {&lt;br /&gt;
    --itembox-wear-tint: rgb(247, 232, 213);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-2 {&lt;br /&gt;
    --itembox-wear-tint: rgb(230, 209, 191);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-3 {&lt;br /&gt;
    --itembox-wear-tint: rgb(206, 173, 155);&lt;br /&gt;
}&lt;br /&gt;
.itembox-tier-4,&lt;br /&gt;
.itembox-tier-5 {&lt;br /&gt;
    --itembox-wear-tint: rgb(105, 97, 92);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-texture {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    background-size: 100% 100%;&lt;br /&gt;
    mix-blend-mode: multiply;&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v1 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v2 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox-texture-v3 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Overrides the per-item texture so every card shares one image, which keeps a&lt;br /&gt;
   single paper texture resident in the GPU cache instead of three. Higher&lt;br /&gt;
   specificity than the hashed classes above, so it wins regardless of which&lt;br /&gt;
   variant the item&#039;s name landed on. */&lt;br /&gt;
.itembox.itembox-force-tex-1 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-force-tex-2 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-force-tex-3 .itembox-texture {&lt;br /&gt;
    background-image: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Two hairlines at ~13% alpha: screen and normal blending land within ~2% of&lt;br /&gt;
   each other here, so the blend mode is dropped and the layer stays cheap. */&lt;br /&gt;
.itembox-bevel {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    width: 100%;&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    border-left: 0.1em solid #ffcc6622;&lt;br /&gt;
    border-top: 0.1em solid #ffcc6622;&lt;br /&gt;
    background-size: 100% 100%;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-active-tag {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    bottom: 3.5em;&lt;br /&gt;
    display: none;&lt;br /&gt;
    flex-direction: column;&lt;br /&gt;
    justify-content: center;&lt;br /&gt;
    align-self: center;&lt;br /&gt;
    width: fit-content;&lt;br /&gt;
    height: fit-content;&lt;br /&gt;
    font-size: 1.1em;&lt;br /&gt;
    font-weight: bold;&lt;br /&gt;
    font-family: var(--itembox-font);&lt;br /&gt;
    line-height: normal;&lt;br /&gt;
    letter-spacing: 0;&lt;br /&gt;
    white-space: nowrap;&lt;br /&gt;
    text-align: center;&lt;br /&gt;
    text-transform: uppercase;&lt;br /&gt;
    border-radius: 0.2em;&lt;br /&gt;
    padding: 0.1em 0.6em;&lt;br /&gt;
    box-shadow: 0 0 1.5em #000000ff;&lt;br /&gt;
    color: #ffefd7b3;&lt;br /&gt;
    background-color: #171717;&lt;br /&gt;
}&lt;br /&gt;
.itembox-active .itembox-active-tag {&lt;br /&gt;
    display: flex;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox .item-link-wrapper,&lt;br /&gt;
.itembox .item-link-wrapper &amp;gt; a {&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    display: block;&lt;br /&gt;
    inset: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* ---------------------------------------------------------------------------&lt;br /&gt;
   Opt-in simplifications, set through the parameters on [[Template:ItemBox]].&lt;br /&gt;
   Each removes work the GPU repeats for every card on screen: a masked element&lt;br /&gt;
   costs an extra render pass, and mix-blend-mode costs a backdrop read. Callers&lt;br /&gt;
   that place dozens of cards at once can trade the paper detail for the frames.&lt;br /&gt;
   --------------------------------------------------------------------------- */&lt;br /&gt;
&lt;br /&gt;
/* The wear patterns are concentrated at the card&#039;s edges and largely clear in&lt;br /&gt;
   the middle, so a gradient can stand in for the mask: transparent through the&lt;br /&gt;
   centre, tint gathering at the border. --itembox-wear-ramp is where the&lt;br /&gt;
   falloff starts and is the one value worth tuning. The name is lifted clear so&lt;br /&gt;
   no amount of tint ever lands on the glyphs; the paper behind them still&lt;br /&gt;
   takes it, since the name area has no background of its own. Gradients are a&lt;br /&gt;
   native primitive, so this costs no extra render pass.  */&lt;br /&gt;
.itembox.itembox-ramp-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    background-color: transparent;&lt;br /&gt;
    background-image: radial-gradient(ellipse at 50% 45%, transparent var(--itembox-wear-ramp), var(--itembox-wear-tint) 100%);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-ramp-wear .itembox-name-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    z-index: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Kept for comparison against the ramp; drop whichever loses.&lt;br /&gt;
   flat - tint moves behind the artwork, colouring only the card stock&lt;br /&gt;
   soft - tint stays on top, uniform and lighter, name lifted clear */&lt;br /&gt;
.itembox.itembox-flat-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    z-index: -1;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-soft-wear .itembox-wear {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
    opacity: 0.35;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-soft-wear .itembox-name-area {&lt;br /&gt;
    position: relative;&lt;br /&gt;
    z-index: 1;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.itembox-flat-icon .itembox-icon {&lt;br /&gt;
    mask-image: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox-no-texture .itembox-texture {&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Paper multiplied against the card art on the SAME element. Unlike&lt;br /&gt;
   mix-blend-mode (which reads the page backdrop and so cannot be cached),&lt;br /&gt;
   background-blend-mode blends the element&#039;s own layers, which WebRender keeps&lt;br /&gt;
   as a static tile — the whole point of the exercise. The separate .itembox-&lt;br /&gt;
   texture div is switched off since the paper now lives in the card layer.&lt;br /&gt;
   Caveat: this only reaches the card art, not the icon or the name, which are&lt;br /&gt;
   real content above the background rather than layers of it. --itembox-paper&lt;br /&gt;
   selects which of the three papers to use. */&lt;br /&gt;
.itembox.itembox-blend-texture .itembox-card {&lt;br /&gt;
    background-image: var(--itembox-paper), var(--itembox-card-image);&lt;br /&gt;
    background-size: cover, cover;&lt;br /&gt;
    background-blend-mode: multiply, normal;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-texture .itembox-texture {&lt;br /&gt;
    display: none;&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-tex-1 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/97/Shopitem_papertexture01.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-tex-2 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/b/bf/Shopitem_papertexture02.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
.itembox.itembox-blend-tex-3 {&lt;br /&gt;
    --itembox-paper: url(&#039;/images/9/95/Shopitem_papertexture03.png&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Skipping offscreen cards only pays for itself when many are on screen at&lt;br /&gt;
   once. On narrow viewports about ten fit, so the saving is small while cards&lt;br /&gt;
   crossing the boundary force constant display list rebuilds — measured at&lt;br /&gt;
   roughly half the frame rate on Android with this enabled. */&lt;br /&gt;
@media (min-width: 900px) {&lt;br /&gt;
    .itembox {&lt;br /&gt;
        content-visibility: auto;&lt;br /&gt;
        contain-intrinsic-size: 8em 12.5em;&lt;br /&gt;
    }&lt;br /&gt;
}&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox?diff=99943</id>
		<title>Template:ItemBox</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox?diff=99943"/>
		<updated>2026-07-24T19:45:28Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Revert the lowGraphics icon downscale to isolate its effect; the paper blend removal was the real win. Icons back to 160px (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;templatestyles src=&amp;quot;Template:ItemBox/styles.css&amp;quot; /&amp;gt;&amp;lt;includeonly&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{#vardefine:itemName|{{{itemName|{{{1}}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Display name: Lang string for the codename, else the raw name, then override.&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#invoke:Lang|get_string|{{#invoke:ItemData|get_codename|{{#var:itemName}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#if:{{#var:displayName}}|{{#var:displayName}}|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Measured name size (em) and stable per-item texture variety.&lt;br /&gt;
--&amp;gt;{{#vardefine:fontSize|{{#invoke:ItemBox|getFontSize|{{#var:displayName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Modifier classes: slot (Weapon/Armor/Tech from data, or Weapon/Vitality/Spirit override -&amp;gt; weapon/vitality/spirit), tier, tags.&lt;br /&gt;
--&amp;gt;{{#vardefine:slot|{{#switch:{{{overrideSlot|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Slot}}}}}|Weapon=itembox-weapon|Armor|Vitality=itembox-vitality|Tech|Spirit=itembox-spirit}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:tier|itembox-tier-{{{overrideTier|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Tier}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:showTierTag|{{#ifeq:{{{showTierTag|}}}|true|itembox-show-tier}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{{overrideIsActive|{{#invoke:ItemData|is_active|{{#var:itemName}}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{#ifeq:{{#var:isActive}}|true|itembox-active}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{{overrideIsImbue|{{#invoke:ItemData|get_prop|{{#var:itemName}}|IsImbue}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     lowGraphics=true is the setting for callers that place dozens of cards on&lt;br /&gt;
     one page. It drops the paper blend, which is the change that matters:&lt;br /&gt;
     mix-blend-mode stops WebRender caching those regions as static tiles, so&lt;br /&gt;
     every scrolled frame re-rasterises and re-uploads them. Removing it cut the&lt;br /&gt;
     render thread&#039;s OpenGL work on the profiled navbox by around 90%. It also&lt;br /&gt;
     swaps the masked wear tint for a gradient and drops the icon mask.&lt;br /&gt;
--&amp;gt;{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-ramp-wear itembox-flat-icon itembox-no-texture}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     The same layers individually, for testing combinations or overriding the&lt;br /&gt;
     bundle above. wearMask drops the mask from the wear tint three ways:&lt;br /&gt;
     no   - tint moves behind the artwork, so only the card stock is coloured&lt;br /&gt;
     ramp - tint stays on top, fading in from the card&#039;s edges&lt;br /&gt;
     soft - tint stays on top, uniform and lighter, with the name lifted clear&lt;br /&gt;
     texture accepts no to drop the paper blend entirely, or 1, 2 or 3 to give&lt;br /&gt;
     every card the same paper instead of one picked from the item&#039;s name.&lt;br /&gt;
--&amp;gt;{{#vardefine:lite|{{#switch:{{{wearMask|}}}|no=itembox-flat-wear|ramp=itembox-ramp-wear|soft=itembox-soft-wear}} {{#ifeq:{{{iconMask|}}}|no|itembox-flat-icon}} {{#switch:{{{texture|}}}|no=itembox-no-texture|1=itembox-force-tex-1|2=itembox-force-tex-2|3=itembox-force-tex-3}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Links.&lt;br /&gt;
--&amp;gt;{{#vardefine:linkTooltip|{{{overrideLinkTooltip|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkImage|{{{overrideLinkImage|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
--&amp;gt;&amp;lt;div class=&amp;quot;itembox {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}} {{#var:variants}} {{#var:lowGraphics}} {{#var:lite}}&amp;quot; style=&amp;quot;font-size:{{#expr: 10 * {{#if:{{{size|}}}|{{{size}}}|1}} }}px;&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;itembox-background&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;div class=&amp;quot;itembox-card&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-icon-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-icon&amp;quot;&amp;gt;[[File:{{#var:linkImage}}.png|160px|link=]]&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-tier-badge&amp;quot;&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-shadow&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-fill&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-number&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-imbue-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_imbue}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-name-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;p class=&amp;quot;itembox-name&amp;quot; style=&amp;quot;font-size:{{#var:fontSize}}em;text-wrap:balance;&amp;quot;&amp;gt;{{#var:displayName}}&amp;lt;/p&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-wear&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-texture&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-bevel&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-active-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_active}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-outline&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
		&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;item-link-wrapper&amp;quot; data-item-name=&amp;quot;{{#var:linkTooltip}}&amp;quot;&amp;gt;[[{{#var:linkClick}}|&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;]]&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&amp;lt;/includeonly&amp;gt;&amp;lt;noinclude&amp;gt;{{Documentation}}&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox?diff=99337</id>
		<title>Template:ItemBox</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox?diff=99337"/>
		<updated>2026-07-24T15:19:38Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Test whether the paper blend is what keeps picture cache tiles invalid: drop it from lowGraphics (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;templatestyles src=&amp;quot;Template:ItemBox/styles.css&amp;quot; /&amp;gt;&amp;lt;includeonly&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{#vardefine:itemName|{{{itemName|{{{1}}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Display name: Lang string for the codename, else the raw name, then override.&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#invoke:Lang|get_string|{{#invoke:ItemData|get_codename|{{#var:itemName}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#if:{{#var:displayName}}|{{#var:displayName}}|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Measured name size (em) and stable per-item texture variety.&lt;br /&gt;
--&amp;gt;{{#vardefine:fontSize|{{#invoke:ItemBox|getFontSize|{{#var:displayName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Modifier classes: slot (Weapon/Armor/Tech from data, or Weapon/Vitality/Spirit override -&amp;gt; weapon/vitality/spirit), tier, tags.&lt;br /&gt;
--&amp;gt;{{#vardefine:slot|{{#switch:{{{overrideSlot|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Slot}}}}}|Weapon=itembox-weapon|Armor|Vitality=itembox-vitality|Tech|Spirit=itembox-spirit}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:tier|itembox-tier-{{{overrideTier|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Tier}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:showTierTag|{{#ifeq:{{{showTierTag|}}}|true|itembox-show-tier}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{{overrideIsActive|{{#invoke:ItemData|is_active|{{#var:itemName}}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{#ifeq:{{#var:isActive}}|true|itembox-active}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{{overrideIsImbue|{{#invoke:ItemData|get_prop|{{#var:itemName}}|IsImbue}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     lowGraphics=true is the setting for callers that place dozens of cards on&lt;br /&gt;
     one page. It bundles the cheap variants below and drops the icon request to&lt;br /&gt;
     1:1 with the card. The paper blend is dropped too: mix-blend-mode stops&lt;br /&gt;
     WebRender caching those regions as static tiles, so every scrolled frame&lt;br /&gt;
     re-rasterises and re-uploads them. That is measured as ~93 ms/s of memcpy&lt;br /&gt;
     inside the render thread and ~76 picture cache invalidations per second.&lt;br /&gt;
--&amp;gt;{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-ramp-wear itembox-flat-icon itembox-no-texture}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:iconPx|{{#ifeq:{{{lowGraphics|}}}|true|{{#expr: 80 * {{#if:{{{size|}}}|{{{size}}}|1}} }}|160}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     The same layers individually, for testing combinations or overriding the&lt;br /&gt;
     bundle above. wearMask drops the mask from the wear tint three ways:&lt;br /&gt;
     no   - tint moves behind the artwork, so only the card stock is coloured&lt;br /&gt;
     ramp - tint stays on top, fading in from the card&#039;s edges&lt;br /&gt;
     soft - tint stays on top, uniform and lighter, with the name lifted clear&lt;br /&gt;
     texture accepts no to drop the paper blend entirely, or 1, 2 or 3 to give&lt;br /&gt;
     every card the same paper instead of one picked from the item&#039;s name.&lt;br /&gt;
--&amp;gt;{{#vardefine:lite|{{#switch:{{{wearMask|}}}|no=itembox-flat-wear|ramp=itembox-ramp-wear|soft=itembox-soft-wear}} {{#ifeq:{{{iconMask|}}}|no|itembox-flat-icon}} {{#switch:{{{texture|}}}|no=itembox-no-texture|1=itembox-force-tex-1|2=itembox-force-tex-2|3=itembox-force-tex-3}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Links.&lt;br /&gt;
--&amp;gt;{{#vardefine:linkTooltip|{{{overrideLinkTooltip|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkImage|{{{overrideLinkImage|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
--&amp;gt;&amp;lt;div class=&amp;quot;itembox {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}} {{#var:variants}} {{#var:lowGraphics}} {{#var:lite}}&amp;quot; style=&amp;quot;font-size:{{#expr: 10 * {{#if:{{{size|}}}|{{{size}}}|1}} }}px;&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;itembox-background&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;div class=&amp;quot;itembox-card&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-icon-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-icon&amp;quot;&amp;gt;[[File:{{#var:linkImage}}.png|{{#var:iconPx}}px|link=]]&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-tier-badge&amp;quot;&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-shadow&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-fill&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-number&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-imbue-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_imbue}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-name-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;p class=&amp;quot;itembox-name&amp;quot; style=&amp;quot;font-size:{{#var:fontSize}}em;text-wrap:balance;&amp;quot;&amp;gt;{{#var:displayName}}&amp;lt;/p&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-wear&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-texture&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-bevel&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-active-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_active}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-outline&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
		&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;item-link-wrapper&amp;quot; data-item-name=&amp;quot;{{#var:linkTooltip}}&amp;quot;&amp;gt;[[{{#var:linkClick}}|&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;]]&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&amp;lt;/includeonly&amp;gt;&amp;lt;noinclude&amp;gt;{{Documentation}}&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Module:ItemData/nav?diff=99336</id>
		<title>Module:ItemData/nav</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Module:ItemData/nav?diff=99336"/>
		<updated>2026-07-24T15:07:03Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Use the single lowGraphics flag for navbox cards now that ItemBox bundles the cheap layers and the 1x icon request (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;br /&gt;
&lt;br /&gt;
local p = {}&lt;br /&gt;
local items_data = mw.loadJsonData(&amp;quot;Data:ItemData.json&amp;quot;)&lt;br /&gt;
local lang_module = require(&#039;Module:Lang&#039;)&lt;br /&gt;
local generic_module = require(&#039;Module:GenericData&#039;)&lt;br /&gt;
local util_module = require(&#039;Module:Utilities&#039;)&lt;br /&gt;
&lt;br /&gt;
-- Exceptions if the link is different from the item name&lt;br /&gt;
local linkOverrides = {&lt;br /&gt;
    [&amp;quot;Bullet Lifesteal&amp;quot;] = &amp;quot;Bullet Lifesteal (item)&amp;quot;,&lt;br /&gt;
    [&amp;quot;Spirit Lifesteal&amp;quot;] = &amp;quot;Spirit Lifesteal (item)&amp;quot;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
-- The card navboxes put every item on a single page, so their cards opt into&lt;br /&gt;
-- the cheaper ItemBox rendering: a gradient instead of the masked wear tint, no&lt;br /&gt;
-- icon mask, one shared paper, and an icon requested at the size it is actually&lt;br /&gt;
-- drawn. Each of those is a render pass, a backdrop read or a texture upload the&lt;br /&gt;
-- GPU would otherwise repeat for every card on screen. See [[Template:ItemBox]].&lt;br /&gt;
-- Only the ItemBox branch of write_wrapped_item_list uses this; the ItemIcon&lt;br /&gt;
-- lists are unaffected.&lt;br /&gt;
local LOW_GRAPHICS = &amp;quot;|lowGraphics=true&amp;quot;&lt;br /&gt;
&lt;br /&gt;
-- Cached items grouped by slot to prevent redundant full-table evaluations&lt;br /&gt;
local cached_slots = nil&lt;br /&gt;
local function get_items_by_slot(slot)&lt;br /&gt;
    if not cached_slots then&lt;br /&gt;
        cached_slots = { table = {}, Weapon = {}, Armor = {}, Tech = {} }&lt;br /&gt;
        for item_key, item_data in pairs(items_data) do&lt;br /&gt;
            local this_slot = item_data[&amp;quot;Slot&amp;quot;]&lt;br /&gt;
            if this_slot and cached_slots[this_slot] then&lt;br /&gt;
                table.insert(cached_slots[this_slot], { key = item_key, data = item_data })&lt;br /&gt;
            end&lt;br /&gt;
        end&lt;br /&gt;
    end&lt;br /&gt;
    return cached_slots[slot] or {}&lt;br /&gt;
end&lt;br /&gt;
&lt;br /&gt;
-- With debug_mode on, it outputs unprocessed wikitext&lt;br /&gt;
local function process_debug_mode(wikitext, debug_mode)&lt;br /&gt;
    if debug_mode == &#039;true&#039; then&lt;br /&gt;
        return wikitext&lt;br /&gt;
    elseif debug_mode == &#039;false&#039; or debug_mode == nil then&lt;br /&gt;
        return mw.getCurrentFrame():preprocess(wikitext)&lt;br /&gt;
    else&lt;br /&gt;
        return &amp;quot;debug_mode must be &#039;true&#039; or &#039;false&#039;&amp;quot;&lt;br /&gt;
    end&lt;br /&gt;
end&lt;br /&gt;
&lt;br /&gt;
-- Writes list of items of a certain slot within the min and max soul bounds&lt;br /&gt;
local function write_wrapped_item_list(slot, min_souls, max_souls, template, sep, filter_mode)&lt;br /&gt;
    if slot ~= &#039;Weapon&#039; and slot ~= &#039;Armor&#039; and slot ~= &#039;Tech&#039; then&lt;br /&gt;
        return &#039;slot must be Weapon, Armor (Vitality), or Tech (Spirit)&#039;&lt;br /&gt;
    end&lt;br /&gt;
    &lt;br /&gt;
    local min_souls = tonumber(min_souls)&lt;br /&gt;
    local max_souls = tonumber(max_souls)&lt;br /&gt;
    if min_souls == nil or max_souls == nil then return &#039;Min/Max souls must be numerical&#039; end&lt;br /&gt;
    &lt;br /&gt;
    filter_mode = filter_mode or &amp;quot;all&amp;quot;&lt;br /&gt;
    &lt;br /&gt;
    -- Lifted out of the loop: Language code doesn&#039;t change per item&lt;br /&gt;
    local lang_code = lang_module.get_lang_code() &lt;br /&gt;
    &lt;br /&gt;
    local items = {}&lt;br /&gt;
    local slot_items = get_items_by_slot(slot) -- Drastically reduces search pool size&lt;br /&gt;
    &lt;br /&gt;
    for _, item_entry in ipairs(slot_items) do&lt;br /&gt;
        local item_key = item_entry.key&lt;br /&gt;
        local item_data = item_entry.data&lt;br /&gt;
        &lt;br /&gt;
        local this_cost = tonumber(item_data[&amp;quot;Cost&amp;quot;])&lt;br /&gt;
        local is_street_brawl = item_data[&amp;quot;StreetBrawl&amp;quot;] == true&lt;br /&gt;
        local should_include = true&lt;br /&gt;
        &lt;br /&gt;
        -- Filter logic for Street Brawl items&lt;br /&gt;
        if filter_mode == &amp;quot;street_brawl_only&amp;quot; and not is_street_brawl then&lt;br /&gt;
            should_include = false&lt;br /&gt;
        elseif filter_mode == &amp;quot;exclude_street_brawl&amp;quot; and is_street_brawl then&lt;br /&gt;
            should_include = false&lt;br /&gt;
        end&lt;br /&gt;
        &lt;br /&gt;
        if should_include and item_data[&amp;quot;Name&amp;quot;] ~= nil and item_data[&amp;quot;IsDisabled&amp;quot;] == false and this_cost ~= nil then&lt;br /&gt;
            if this_cost &amp;gt;= min_souls and this_cost &amp;lt; max_souls then&lt;br /&gt;
                local item_name_english = lang_module.get_string(item_key, &amp;quot;en&amp;quot;)&lt;br /&gt;
                local item_link = linkOverrides[item_name_english] or item_name_english&lt;br /&gt;
                local item_name_local = lang_module.get_string(item_key, lang_code)&lt;br /&gt;
                &lt;br /&gt;
                local item_template&lt;br /&gt;
                if template == &amp;quot;ItemIcon&amp;quot; then&lt;br /&gt;
                    if lang_code == &amp;quot;en&amp;quot; then&lt;br /&gt;
                        item_template = &amp;quot;{{ItemIcon|&amp;quot; .. item_name_english .. &amp;quot;|size=26px}}&amp;quot;&lt;br /&gt;
                    else&lt;br /&gt;
                        item_template = &amp;quot;{{ItemIcon|&amp;quot; .. item_name_english .. &amp;quot;|lang=&amp;quot; .. lang_code .. &amp;quot;|l1=&amp;quot; .. item_name_local .. &amp;quot;|size=26px}}&amp;quot;&lt;br /&gt;
                    end&lt;br /&gt;
                    &lt;br /&gt;
                    local search_data = item_name_english&lt;br /&gt;
                    if lang_code ~= &amp;quot;en&amp;quot; and item_name_local then&lt;br /&gt;
                        search_data = search_data .. &amp;quot; &amp;quot; .. item_name_local&lt;br /&gt;
                    end&lt;br /&gt;
                    &lt;br /&gt;
                    item_template = &#039;&amp;lt;span class=&amp;quot;item-nav-search-wrapper&amp;quot;&amp;gt;&amp;lt;span class=&amp;quot;item-nav-search-item&amp;quot; data-item-name=&amp;quot;&#039; .. search_data .. &#039;&amp;quot;&amp;gt;&#039; .. item_template .. &#039;&amp;lt;/span&amp;gt;&#039;&lt;br /&gt;
                elseif template == &amp;quot;ItemBox&amp;quot; then&lt;br /&gt;
                    if lang_code == &amp;quot;en&amp;quot; then&lt;br /&gt;
                        if is_street_brawl then&lt;br /&gt;
                            item_template = &amp;quot;{{ItemBox|itemName=&amp;quot; .. item_name_english .. &amp;quot;|overrideLinkClick=&amp;quot; .. item_link .. &amp;quot;|overrideTier=5&amp;quot; .. LOW_GRAPHICS .. &amp;quot;}}&amp;quot;&lt;br /&gt;
                        else&lt;br /&gt;
                            item_template = &amp;quot;{{ItemBox|itemName=&amp;quot; .. item_name_english .. &amp;quot;|overrideLinkClick=&amp;quot; .. item_link .. LOW_GRAPHICS .. &amp;quot;}}&amp;quot;&lt;br /&gt;
                        end&lt;br /&gt;
                    else&lt;br /&gt;
                        local link_local = item_link .. &amp;quot;/&amp;quot; .. lang_code&lt;br /&gt;
                        if is_street_brawl then&lt;br /&gt;
                            item_template = &amp;quot;{{ItemBox|itemName=&amp;quot; .. item_name_english .. &amp;quot;|overrideLinkClick=&amp;quot; .. link_local .. &amp;quot;|item_price={{#invoke:Lang|get_string|Citadel_ItemDraft_Legendary}}&amp;quot; .. LOW_GRAPHICS .. &amp;quot;}}&amp;quot;&lt;br /&gt;
                        else&lt;br /&gt;
                            item_template = &amp;quot;{{ItemBox|itemName=&amp;quot; .. item_name_english .. &amp;quot;|overrideLinkClick=&amp;quot; .. link_local .. LOW_GRAPHICS .. &amp;quot;}}&amp;quot;&lt;br /&gt;
                        end&lt;br /&gt;
                    end&lt;br /&gt;
                else&lt;br /&gt;
                    return &amp;quot;Invalid template type&amp;quot;&lt;br /&gt;
                end&lt;br /&gt;
                table.insert(items, item_template)&lt;br /&gt;
            end&lt;br /&gt;
        end&lt;br /&gt;
    end&lt;br /&gt;
    &lt;br /&gt;
    -- Order list alphabetically&lt;br /&gt;
    table.sort(items)&lt;br /&gt;
    &lt;br /&gt;
    -- Append closing tags and bullets&lt;br /&gt;
    if template == &amp;quot;ItemIcon&amp;quot; then&lt;br /&gt;
        local total_items = #items&lt;br /&gt;
        for i = 1, total_items do&lt;br /&gt;
            if i == total_items then&lt;br /&gt;
                items[i] = items[i] .. &#039;&amp;lt;/span&amp;gt;&#039;&lt;br /&gt;
            else&lt;br /&gt;
                items[i] = items[i] .. &#039;&amp;lt;span class=&amp;quot;item-nav-search-sep&amp;quot;&amp;gt; &amp;amp;bull; &amp;lt;/span&amp;gt;&amp;lt;/span&amp;gt;&#039;&lt;br /&gt;
            end&lt;br /&gt;
        end&lt;br /&gt;
    end&lt;br /&gt;
    &lt;br /&gt;
    return table.concat(items, sep)&lt;br /&gt;
end&lt;br /&gt;
&lt;br /&gt;
-- for [[Template:Item Navbox]]&lt;br /&gt;
function p.get_item_nav_bulletpoints(slot, min_souls, max_souls, debug_mode, filter_mode)&lt;br /&gt;
    if type(slot) == &amp;quot;table&amp;quot; and slot.args then&lt;br /&gt;
        local frame = slot&lt;br /&gt;
        slot = frame.args[1]&lt;br /&gt;
        min_souls = frame.args[2]&lt;br /&gt;
        max_souls = frame.args[3]&lt;br /&gt;
        debug_mode = frame.args[&amp;quot;debug_mode&amp;quot;]&lt;br /&gt;
        filter_mode = frame.args[&amp;quot;filter&amp;quot;]&lt;br /&gt;
    end&lt;br /&gt;
    &lt;br /&gt;
    local item_list = write_wrapped_item_list(slot, min_souls, max_souls, &amp;quot;ItemIcon&amp;quot;, &#039;&#039;, filter_mode)&lt;br /&gt;
    return process_debug_mode(item_list, debug_mode)&lt;br /&gt;
end&lt;br /&gt;
&lt;br /&gt;
-- for [[Template:Infobox ShopItems]]&lt;br /&gt;
function p.get_item_nav_cards(slot, min_souls, max_souls, debug_mode, filter_mode)&lt;br /&gt;
    if type(slot) == &amp;quot;table&amp;quot; and slot.args then&lt;br /&gt;
        local frame = slot&lt;br /&gt;
        slot = frame.args[1]&lt;br /&gt;
        min_souls = frame.args[2]&lt;br /&gt;
        max_souls = frame.args[3]&lt;br /&gt;
        debug_mode = frame.args[&amp;quot;debug_mode&amp;quot;]&lt;br /&gt;
        filter_mode = frame.args[&amp;quot;filter&amp;quot;]&lt;br /&gt;
    end&lt;br /&gt;
    &lt;br /&gt;
    local item_list = write_wrapped_item_list(slot, min_souls, max_souls, &amp;quot;ItemBox&amp;quot;, &#039; &#039;, filter_mode)&lt;br /&gt;
    return process_debug_mode(item_list, debug_mode)&lt;br /&gt;
end&lt;br /&gt;
&lt;br /&gt;
-- for [[Template:Item Navbox]] subgroup rows&lt;br /&gt;
function p.write_item_slot_subgroup(frame)&lt;br /&gt;
    local slot = frame.args[1]&lt;br /&gt;
    local type_func = frame.args[2]&lt;br /&gt;
    local debug_mode = frame.args[&#039;debug_mode&#039;]&lt;br /&gt;
    local street_brawl_label = frame.args[&#039;street_brawl_label&#039;] or &#039;{{Legendary|{{#invoke:Lang|get_string|Citadel_ItemDraft_Legendary}}}}&#039;&lt;br /&gt;
    &lt;br /&gt;
    if slot == nil then return &amp;quot;&#039;slot&#039; parameter is required&amp;quot; end&lt;br /&gt;
    &lt;br /&gt;
    local template_args = {&lt;br /&gt;
        [&amp;quot;groupstyle&amp;quot;] = &amp;quot;background-color:&amp;quot; .. util_module.get_slot_color(slot) .. &amp;quot;;width:10%;min-width:70px;border-radius: 8px 0 0 8px&amp;quot;,&lt;br /&gt;
        [&amp;quot;grouppadding&amp;quot;] = &amp;quot;5px&amp;quot;,&lt;br /&gt;
        [&amp;quot;listpadding&amp;quot;] = &amp;quot;0 0.25rem&amp;quot;,&lt;br /&gt;
    }&lt;br /&gt;
    &lt;br /&gt;
    local soul_style = &amp;quot;font-size: 12px; text-shadow: 1px 1px rgba(0, 0, 0, 0.3);&amp;quot;&lt;br /&gt;
    local prices = generic_module.get_item_price_per_tier()&lt;br /&gt;
    local group_index = 1&lt;br /&gt;
    &lt;br /&gt;
    for i, souls in ipairs(prices) do&lt;br /&gt;
        local min_souls = souls&lt;br /&gt;
        &lt;br /&gt;
        if min_souls ~= 0 then &lt;br /&gt;
            local max_souls = prices[i+1] or (min_souls * 10)&lt;br /&gt;
            &lt;br /&gt;
            local list&lt;br /&gt;
            if type_func == &#039;get_item_nav_cards&#039; then&lt;br /&gt;
                list = p.get_item_nav_cards(slot, min_souls, max_souls, debug_mode, &amp;quot;exclude_street_brawl&amp;quot;)&lt;br /&gt;
            elseif type_func == &#039;get_item_nav_bulletpoints&#039; then&lt;br /&gt;
                list = p.get_item_nav_bulletpoints(slot, min_souls, max_souls, debug_mode, &amp;quot;exclude_street_brawl&amp;quot;)&lt;br /&gt;
            else&lt;br /&gt;
                return &amp;quot;&#039;type&#039; should be get_item_nav_cards or get_item_nav_bulletpoints&amp;quot;&lt;br /&gt;
            end&lt;br /&gt;
            &lt;br /&gt;
            if list and list ~= &amp;quot;&amp;quot; then&lt;br /&gt;
                template_args[&amp;quot;group&amp;quot; .. group_index] = frame:expandTemplate{title=&amp;quot;Souls&amp;quot;, args={[1] = min_souls, [&amp;quot;Shadow&amp;quot;] = soul_style}}&lt;br /&gt;
                template_args[&amp;quot;list&amp;quot; .. group_index] = list&lt;br /&gt;
                group_index = group_index + 1&lt;br /&gt;
            end&lt;br /&gt;
        end&lt;br /&gt;
    end&lt;br /&gt;
    &lt;br /&gt;
    local sb_list&lt;br /&gt;
    if type_func == &#039;get_item_nav_cards&#039; then&lt;br /&gt;
        sb_list = p.get_item_nav_cards(slot, 0, 999999, debug_mode, &amp;quot;street_brawl_only&amp;quot;)&lt;br /&gt;
    elseif type_func == &#039;get_item_nav_bulletpoints&#039; then&lt;br /&gt;
        sb_list = p.get_item_nav_bulletpoints(slot, 0, 999999, debug_mode, &amp;quot;street_brawl_only&amp;quot;)&lt;br /&gt;
    end&lt;br /&gt;
    &lt;br /&gt;
    if sb_list and sb_list ~= &amp;quot;&amp;quot; then&lt;br /&gt;
        local sb_style = &amp;quot;color:#98ffde; font-family:&#039;Retail Demo&#039;, sans-serif; text-wrap: nowrap; text-shadow: 0px 0px 2px #2c312e, 1.3px 1.3px rgba(0, 0, 0, 0.2);padding:5px;&amp;quot;&lt;br /&gt;
        local sb_link_text = &amp;quot;[[Street Brawl{{if_lang}}|&amp;lt;span style=\&amp;quot;&amp;quot; .. sb_style .. &amp;quot;\&amp;quot;&amp;gt;&amp;lt;b&amp;gt;&amp;quot; .. street_brawl_label .. &amp;quot;&amp;lt;/b&amp;gt;&amp;lt;/span&amp;gt;]]&amp;quot;&lt;br /&gt;
        template_args[&amp;quot;group&amp;quot; .. group_index] = frame:preprocess(sb_link_text)&lt;br /&gt;
        template_args[&amp;quot;list&amp;quot; .. group_index] = sb_list&lt;br /&gt;
    end&lt;br /&gt;
    &lt;br /&gt;
    return frame:expandTemplate{title=&amp;quot;Navbox subgroup&amp;quot;, args=template_args}&lt;br /&gt;
end&lt;br /&gt;
&lt;br /&gt;
-- for [[Template:Active Items]]&lt;br /&gt;
&lt;br /&gt;
-- Displayed when a stat does not apply to an item&lt;br /&gt;
local NO_VALUE = &amp;quot;—&amp;quot;&lt;br /&gt;
&lt;br /&gt;
-- One expanded inline attribute as produced by [[Module:Lang]]:&lt;br /&gt;
-- wrapper span &amp;gt; icon span &amp;gt; spacer span &amp;gt; wikilink&lt;br /&gt;
local INLINE_ATTRIBUTE_PATTERN =&lt;br /&gt;
    &#039;&amp;lt;span class=&amp;quot;no%-blue%-link&amp;quot; style=&amp;quot;text%-wrap:nowrap; font%-weight:bold; color:[^;&amp;quot;]*;&amp;quot;&amp;gt;&#039; ..&lt;br /&gt;
    &#039;&amp;lt;span style=&amp;quot;[^&amp;quot;]*&amp;quot;&amp;gt;%[%[File:[^%]]*%]%]&amp;lt;/span&amp;gt;&#039; ..&lt;br /&gt;
    &#039;&amp;lt;span style=&amp;quot;color: inherit;&amp;quot;&amp;gt; &amp;lt;/span&amp;gt; &#039; ..&lt;br /&gt;
    &#039;%[%[([^|%]]+)|([^%]]*)%]%]&amp;lt;/span&amp;gt;&#039;&lt;br /&gt;
&lt;br /&gt;
-- Range is taken from the first of these the item has a usable value for&lt;br /&gt;
local RANGE_PROPERTIES = { &amp;quot;AbilityCastRange&amp;quot;, &amp;quot;Radius&amp;quot;, &amp;quot;EndRadius&amp;quot; }&lt;br /&gt;
&lt;br /&gt;
-- Rewrites the description markup [[Module:Lang]] produces&lt;br /&gt;
local function restyle_description(text)&lt;br /&gt;
    text = text:gsub(INLINE_ATTRIBUTE_PATTERN, &#039;[[%1|%2]]&#039;)&lt;br /&gt;
    -- Attributes with an icon but no link keep their span; follow the site text color&lt;br /&gt;
    text = text:gsub(&#039;color:#ffefd7;&#039;, &#039;color:var(--color-base);&#039;)&lt;br /&gt;
    -- Diminished notes (&amp;quot;Cannot be used while Stunned...&amp;quot;)&lt;br /&gt;
    return (text:gsub(&#039;color:#C0C0C0&#039;, &#039;color:var(--color-subtle)&#039;))&lt;br /&gt;
end&lt;br /&gt;
&lt;br /&gt;
-- Numeric value of a stat, used for sorting&lt;br /&gt;
local function stat_sort_value(value)&lt;br /&gt;
    if type(value) == &amp;quot;table&amp;quot; then value = value[&amp;quot;Value&amp;quot;] end&lt;br /&gt;
    if value == nil then return -1 end&lt;br /&gt;
    return tonumber(tostring(value):match(&amp;quot;[-%d%.]+&amp;quot;)) or -1&lt;br /&gt;
end&lt;br /&gt;
&lt;br /&gt;
-- First range property the item has a usable value for&lt;br /&gt;
local function get_range_property(item_data)&lt;br /&gt;
    for _, property in ipairs(RANGE_PROPERTIES) do&lt;br /&gt;
        local value = item_data[property]&lt;br /&gt;
        if value ~= nil and stat_sort_value(value) &amp;gt; 0 then&lt;br /&gt;
            return property, value&lt;br /&gt;
        end&lt;br /&gt;
    end&lt;br /&gt;
    return nil, nil&lt;br /&gt;
end&lt;br /&gt;
&lt;br /&gt;
-- Builds a stat cell, falling back to an em dash when the stat does not apply&lt;br /&gt;
local function stat_cell(raw_value, item_name, property, postfix)&lt;br /&gt;
    if raw_value == nil or property == nil then&lt;br /&gt;
        return &#039;| data-sort-value=&amp;quot;-1&amp;quot; style=&amp;quot;text-align:center;font-size:16px&amp;quot; | &#039; .. NO_VALUE&lt;br /&gt;
    end&lt;br /&gt;
    return string.format(&lt;br /&gt;
        &#039;| data-sort-value=&amp;quot;%s&amp;quot; style=&amp;quot;text-align:center;font-size:16px&amp;quot; | {{#invoke:ItemData|get_prop|%s|%s}}%s&#039;,&lt;br /&gt;
        stat_sort_value(raw_value), item_name, property, postfix or &amp;quot;&amp;quot;)&lt;br /&gt;
end&lt;br /&gt;
&lt;br /&gt;
function p.generate_active_items_table(frame)&lt;br /&gt;
    local active_items = {}&lt;br /&gt;
    &lt;br /&gt;
    for item_key, item_data in pairs(items_data) do&lt;br /&gt;
        local cost = tonumber(item_data[&amp;quot;Cost&amp;quot;])&lt;br /&gt;
        if item_data[&amp;quot;Name&amp;quot;] and &lt;br /&gt;
           item_data[&amp;quot;IsDisabled&amp;quot;] == false and &lt;br /&gt;
           cost ~= nil and cost &amp;gt; 0 and &lt;br /&gt;
           item_data[&amp;quot;Activation&amp;quot;] and &lt;br /&gt;
           item_data[&amp;quot;Activation&amp;quot;] ~= &amp;quot;Passive&amp;quot; then&lt;br /&gt;
            &lt;br /&gt;
            local range_property, range_value = get_range_property(item_data)&lt;br /&gt;
            &lt;br /&gt;
            table.insert(active_items, {&lt;br /&gt;
                name = item_data[&amp;quot;Name&amp;quot;],&lt;br /&gt;
                key = item_key,&lt;br /&gt;
                cost = cost,&lt;br /&gt;
                slot = item_data[&amp;quot;Slot&amp;quot;] or &amp;quot;Weapon&amp;quot;,&lt;br /&gt;
                has_active_desc = item_data[&amp;quot;ActiveDescription&amp;quot;] ~= nil,&lt;br /&gt;
                cooldown = item_data[&amp;quot;AbilityCooldown&amp;quot;],&lt;br /&gt;
                duration = item_data[&amp;quot;AbilityDuration&amp;quot;],&lt;br /&gt;
                range_property = range_property,&lt;br /&gt;
                range_value = range_value&lt;br /&gt;
            })&lt;br /&gt;
        end&lt;br /&gt;
    end&lt;br /&gt;
    &lt;br /&gt;
    table.sort(active_items, function(a, b) return a.name &amp;lt; b.name end)&lt;br /&gt;
    &lt;br /&gt;
    -- Optimized string compilation using a structural buffer table&lt;br /&gt;
    local rows = {}&lt;br /&gt;
    table.insert(rows, [=[{| class=&amp;quot;wikitable mw-collapsible sortable&amp;quot; style=&amp;quot;width:100%&amp;quot; &lt;br /&gt;
|+{{#invoke:Dictionary|translate|Active Items}}&lt;br /&gt;
! colspan=&amp;quot;2&amp;quot; | {{#invoke:Lang|get_string|Citadel_HeroBuilds_CategoryNameLabel}}&lt;br /&gt;
! {{#invoke:Lang|get_string|Citadel_UserFeedback_TypeLabel}}&lt;br /&gt;
! {{Souls|{{#invoke:Dictionary|translate|Cost}}}}&lt;br /&gt;
! {{#invoke:Lang|get_string|Citadel_Mod_Tooltip_Active}}&lt;br /&gt;
! {{#invoke:Lang|get_string|AbilityCooldown_label}}&lt;br /&gt;
! {{#invoke:Lang|get_string|AbilityDuration_label}}&lt;br /&gt;
! {{#invoke:Lang|get_string|AbilityCastRange_label}}]=])&lt;br /&gt;
    &lt;br /&gt;
    for _, item in ipairs(active_items) do&lt;br /&gt;
        local bg_color = util_module.get_slot_color(item.slot)&lt;br /&gt;
&lt;br /&gt;
		local item_type&lt;br /&gt;
		if item.slot == &amp;quot;Armor&amp;quot; then&lt;br /&gt;
		    item_type = &amp;quot;Armor&amp;quot;&lt;br /&gt;
		elseif item.slot == &amp;quot;Tech&amp;quot; then&lt;br /&gt;
		    item_type = &amp;quot;Tech&amp;quot;&lt;br /&gt;
		else&lt;br /&gt;
		    item_type = &amp;quot;Weapon&amp;quot;&lt;br /&gt;
		end&lt;br /&gt;
        &lt;br /&gt;
        local row = string.format([=[&lt;br /&gt;
|-&lt;br /&gt;
! style=&amp;quot;background-color:%s&amp;quot; | [[File:%s.png|64x64px]]&lt;br /&gt;
! [[%s{{If_lang}}|{{#invoke:Lang|get_string|%s}}]]&lt;br /&gt;
| style=&amp;quot;text-align:center;font-weight:bold&amp;quot; | {{ItemType|%s|{{#invoke:Lang|get_string|CitadelCategory%s}}}}&lt;br /&gt;
| data-sort-value=&amp;quot;%d&amp;quot; style=&amp;quot;text-align:center;font-size:15px&amp;quot; | {{Souls|%d}}&lt;br /&gt;
| {{#invoke:Utilities|process_variables|%s_active_desc|%s}}{{#invoke:Utilities|process_variables|%s_desc|%s}}{{#invoke:Utilities|process_variables|%s_active|%s}}&lt;br /&gt;
%s&lt;br /&gt;
%s&lt;br /&gt;
%s]=],&lt;br /&gt;
            bg_color, &lt;br /&gt;
            item.name, &lt;br /&gt;
            item.name, item.key,&lt;br /&gt;
            item_type, item_type,&lt;br /&gt;
            item.cost, item.cost,&lt;br /&gt;
            item.key, item.name, item.key, item.name, item.key, item.name,&lt;br /&gt;
            stat_cell(item.cooldown, item.name, &amp;quot;AbilityCooldown&amp;quot;, &amp;quot;s&amp;quot;),&lt;br /&gt;
            stat_cell(item.duration, item.name, &amp;quot;AbilityDuration&amp;quot;, &amp;quot;s&amp;quot;),&lt;br /&gt;
            stat_cell(item.range_value, item.name, item.range_property))&lt;br /&gt;
            &lt;br /&gt;
        table.insert(rows, row)&lt;br /&gt;
    end&lt;br /&gt;
    &lt;br /&gt;
    table.insert(rows, &amp;quot;\n|}&amp;quot;)&lt;br /&gt;
    return restyle_description(frame:preprocess(table.concat(rows, &amp;quot;\n&amp;quot;)))&lt;br /&gt;
end&lt;br /&gt;
&lt;br /&gt;
return p&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
	<entry>
		<id>https://deadlock.wiki/Template:ItemBox?diff=99335</id>
		<title>Template:ItemBox</title>
		<link rel="alternate" type="text/html" href="https://deadlock.wiki/Template:ItemBox?diff=99335"/>
		<updated>2026-07-24T15:05:52Z</updated>

		<summary type="html">&lt;p&gt;~2026-ReachMidbossStamina753: Add lowGraphics flag bundling the cheap layers and a 1x icon request, so callers rendering many cards set one parameter (with help from vergir-bot LLM)&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;templatestyles src=&amp;quot;Template:ItemBox/styles.css&amp;quot; /&amp;gt;&amp;lt;includeonly&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{#vardefine:itemName|{{{itemName|{{{1}}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Display name: Lang string for the codename, else the raw name, then override.&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#invoke:Lang|get_string|{{#invoke:ItemData|get_codename|{{#var:itemName}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{#if:{{#var:displayName}}|{{#var:displayName}}|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Measured name size (em) and stable per-item texture variety.&lt;br /&gt;
--&amp;gt;{{#vardefine:fontSize|{{#invoke:ItemBox|getFontSize|{{#var:displayName}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:variants|{{#invoke:ItemBox|variants|{{#var:itemName}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Modifier classes: slot (Weapon/Armor/Tech from data, or Weapon/Vitality/Spirit override -&amp;gt; weapon/vitality/spirit), tier, tags.&lt;br /&gt;
--&amp;gt;{{#vardefine:slot|{{#switch:{{{overrideSlot|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Slot}}}}}|Weapon=itembox-weapon|Armor|Vitality=itembox-vitality|Tech|Spirit=itembox-spirit}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:tier|itembox-tier-{{{overrideTier|{{#invoke:ItemData|get_prop|{{#var:itemName}}|Tier}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:showTierTag|{{#ifeq:{{{showTierTag|}}}|true|itembox-show-tier}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{{overrideIsActive|{{#invoke:ItemData|is_active|{{#var:itemName}}}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isActive|{{#ifeq:{{#var:isActive}}|true|itembox-active}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{{overrideIsImbue|{{#invoke:ItemData|get_prop|{{#var:itemName}}|IsImbue}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:isImbue|{{#ifeq:{{#var:isImbue}}|true|itembox-imbue}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     lowGraphics=true is the setting for callers that place dozens of cards on&lt;br /&gt;
     one page. It bundles the cheap variants below and drops the icon request to&lt;br /&gt;
     1:1 with the card, which is the single largest saving: at the default 160px&lt;br /&gt;
     the browser&#039;s 2x pick exceeds the source image and it decodes the original&lt;br /&gt;
     PNG rather than a thumbnail. Each piece is a render pass, a backdrop read or&lt;br /&gt;
     a texture upload the GPU would otherwise repeat for every card on screen.&lt;br /&gt;
--&amp;gt;{{#vardefine:lowGraphics|{{#ifeq:{{{lowGraphics|}}}|true|itembox-ramp-wear itembox-flat-icon itembox-force-tex-3}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:iconPx|{{#ifeq:{{{lowGraphics|}}}|true|{{#expr: 80 * {{#if:{{{size|}}}|{{{size}}}|1}} }}|160}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     The same layers individually, for testing combinations or overriding the&lt;br /&gt;
     bundle above. wearMask drops the mask from the wear tint three ways:&lt;br /&gt;
     no   - tint moves behind the artwork, so only the card stock is coloured&lt;br /&gt;
     ramp - tint stays on top, fading in from the card&#039;s edges&lt;br /&gt;
     soft - tint stays on top, uniform and lighter, with the name lifted clear&lt;br /&gt;
     texture accepts no to drop the paper blend entirely, or 1, 2 or 3 to give&lt;br /&gt;
     every card the same paper instead of one picked from the item&#039;s name.&lt;br /&gt;
--&amp;gt;{{#vardefine:lite|{{#switch:{{{wearMask|}}}|no=itembox-flat-wear|ramp=itembox-ramp-wear|soft=itembox-soft-wear}} {{#ifeq:{{{iconMask|}}}|no|itembox-flat-icon}} {{#switch:{{{texture|}}}|no=itembox-no-texture|1=itembox-force-tex-1|2=itembox-force-tex-2|3=itembox-force-tex-3}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
     Links.&lt;br /&gt;
--&amp;gt;{{#vardefine:linkTooltip|{{{overrideLinkTooltip|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkImage|{{{overrideLinkImage|{{#var:itemName}}}}}}}&amp;lt;!--&lt;br /&gt;
--&amp;gt;{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:itemName}}{{If lang}}}}}}}&amp;lt;!--&lt;br /&gt;
&lt;br /&gt;
--&amp;gt;&amp;lt;div class=&amp;quot;itembox {{#var:showTierTag}} {{#var:tier}} {{#var:slot}} {{#var:isActive}} {{#var:isImbue}} {{#var:variants}} {{#var:lowGraphics}} {{#var:lite}}&amp;quot; style=&amp;quot;font-size:{{#expr: 10 * {{#if:{{{size|}}}|{{{size}}}|1}} }}px;&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;itembox-background&amp;quot;&amp;gt;&lt;br /&gt;
		&amp;lt;div class=&amp;quot;itembox-card&amp;quot;&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-icon-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-icon&amp;quot;&amp;gt;[[File:{{#var:linkImage}}.png|{{#var:iconPx}}px|link=]]&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-tier-badge&amp;quot;&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-shadow&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-fill&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
					&amp;lt;div class=&amp;quot;itembox-tier-badge-number&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;/div&amp;gt;&lt;br /&gt;
				&amp;lt;div class=&amp;quot;itembox-imbue-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_imbue}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-name-area&amp;quot;&amp;gt;&lt;br /&gt;
				&amp;lt;p class=&amp;quot;itembox-name&amp;quot; style=&amp;quot;font-size:{{#var:fontSize}}em;text-wrap:balance;&amp;quot;&amp;gt;{{#var:displayName}}&amp;lt;/p&amp;gt;&lt;br /&gt;
			&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-wear&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-texture&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-bevel&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-active-tag&amp;quot;&amp;gt;{{#invoke:Lang|get_string|item_info_active}}&amp;lt;/div&amp;gt;&lt;br /&gt;
			&amp;lt;div class=&amp;quot;itembox-outline&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;br /&gt;
		&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;/div&amp;gt;&lt;br /&gt;
	&amp;lt;div class=&amp;quot;item-link-wrapper&amp;quot; data-item-name=&amp;quot;{{#var:linkTooltip}}&amp;quot;&amp;gt;[[{{#var:linkClick}}|&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;]]&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&amp;lt;/includeonly&amp;gt;&amp;lt;noinclude&amp;gt;{{Documentation}}&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>~2026-ReachMidbossStamina753</name></author>
	</entry>
</feed>