The wiki is currently a work in progress. If you'd like to help out, please check the Community Portal and our getting started guide. Also, check out our sister project on poewiki.net.

MediaWiki:Common.css: Difference between revisions

From Path of Exile 2 Wiki
Jump to navigation Jump to search
(It's called CASCADING style sheets because the order rules appear matters)
No edit summary
(One intermediate revision by the same user not shown)
Line 216: Line 216:
}
}


/* ===== Hoverbox ([[Template:Hoverbox]], [[Template:Item link]]) ===== */
/* ===== Hoverbox ([[Template:Hoverbox]], [[Template:Item link]], [[Template:Skill link]]) ===== */
.hoverbox {
.hoverbox {
     display: inline-block;
     display: inline-block;
Line 1,264: Line 1,264:


/* ===== Item hoverbox ([[Template:Item link]]) ===== */
/* ===== Item hoverbox ([[Template:Item link]]) ===== */
.c-item-hoverbox {
.c-item-hoverbox__display > .item-icon {
    display: inline-block;
}
.c-item-hoverbox__display {
    display: block;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    padding: 8px;
    transition: opacity 0.25s;
}
.c-item-hoverbox__display.is-visible {
    visibility: visible;
    opacity: 1;
}
.c-item-hoverbox__display > .item-box + img {
     position: absolute;
     position: absolute;
     top: 0;
     top: 8px;
     left: 100%;
     left: 100%;
}
}
.c-item-hoverbox__display.is-left-of-activator > .item-box + img,
.c-item-hoverbox__display.is-left-of-activator > .item-icon,
.c-item-hoverbox__display.is-above-activator.is-right-side-of-viewport > .item-box + img,
.c-item-hoverbox__display.is-above-activator.is-right-side-of-viewport > .item-icon,
.c-item-hoverbox__display.is-below-activator.is-right-side-of-viewport > .item-box + img {
.c-item-hoverbox__display.is-below-activator.is-right-side-of-viewport > .item-icon {
     left: auto;
     left: auto;
     right: 100%;
     right: 100%;
Line 1,295: Line 1,280:
}
}
.c-item-hoverbox--large .c-item-hoverbox__activator {
.c-item-hoverbox--large .c-item-hoverbox__activator {
    flex-direction: column;
    align-items: stretch;
}
/* ===== Skill hoverbox ([[Template:Skill link]]) ===== */
.c-skill-hoverbox--large .c-skill-hoverbox__activator {
     flex-direction: column;
     flex-direction: column;
     align-items: stretch;
     align-items: stretch;

Revision as of 15:49, 16 April 2025

/*
 * This stylesheet is always loaded, regardless of which theme is selected.
 *
 * Theme styles should go in [[MediaWiki:Vector.css]].
 */

/*
 * Colors exported from Metadata/UI/UISettings.xml wherein 3-digit colors are in RGB format. 4-digit colors
 * are not in any known format and have therefore been approximated.
 */
:root {
    --poe-color-default: rgb(127 127 127);
    --poe-color-valuedefault: rgb(255 255 255);
    --poe-color-fire: rgb(150 0 0);
    --poe-color-cold: rgb(54 100 146);
    --poe-color-lightning: rgb(255 215 0);
    --poe-color-chaos: rgb(208 32 144);
    --poe-color-augmented: rgb(136 136 255);
    --poe-color-crafted: rgb(184 218 242);
    --poe-color-fractured: rgb(162 145 98);
    --poe-color-enchanted: rgb(184 218 242);
    --poe-color-hellscaped: rgb(255 110 37);
    --poe-color-allocatedcruciblemod: rgb(255 115 57);
    --poe-color-unmet: rgb(210 0 0);
    --poe-color-uniqueitem: rgb(175 96 37);
    --poe-color-unique: rgb(175 96 37);
    --poe-color-rareitem: rgb(255 255 119);
    --poe-color-rare: rgb(255 255 119);
    --poe-color-magicitem: rgb(136 136 255);
    --poe-color-magic: rgb(136 136 255);
    --poe-color-whiteitem: rgb(200 200 200);
    --poe-color-normal: rgb(200 200 200);
    --poe-color-gemitem: rgb(27 162 155);
    --poe-color-gem: rgb(27 162 155);
    --poe-color-gemdesc: rgb(186 173 133);
    --poe-color-gemproperty: rgb(110 154 151);
    --poe-color-currencyitem: rgb(170 158 130);
    --poe-color-currency: rgb(170 158 130);
    --poe-color-questitem: rgb(74 230 58);
    --poe-color-quest: rgb(74 230 58);
    --poe-color-nemesismod: rgb(255 200 0);
    --poe-color-nemesismodoutline: rgb(219 34 0); /* 220,255,40,0 */
    --poe-color-talismanmod: rgb(141 241 79);
    --poe-color-talismanmodoutline: rgb(0 0 0); /* 220,0,0,0 */
    --poe-color-title: rgb(231 180 120);
    --poe-color-corrupted: rgb(210 0 0);
    --poe-color-favour: rgb(170 158 130);
    --poe-color-supporterpacknewitem: rgb(180 96 0);
    --poe-color-supporterpackitem: rgb(163 141 109);
    --poe-color-supporterpackincludes: rgb(242 162 47);
    --poe-color-bloodlinemod: rgb(210 0 220);
    --poe-color-bloodlinemodoutline: rgb(58 0 125); /* 200,74,0,160 */
    --poe-color-tormentmod: rgb(50 230 100);
    --poe-color-tormentmodoutline: rgb(0 78 117); /* 200,0,100,150 */
    --poe-color-canttradeormodify: rgb(210 0 0);
    --poe-color-lockedtoaccount: rgb(136 136 255);
    --poe-color-divination: rgb(14 186 255);
    --poe-color-prophecy: rgb(181 75 255);
    --poe-color-essencemod: rgb(164 210 255);
    --poe-color-essencemodoutline: rgb(0 41 82); /* 210,0,50,100 */
    --poe-color-premiumchat: rgb(253 242 126);
    --poe-color-premiumchatoutline: rgb(209 46 46);
    --poe-color-uniquefoil: rgb(130 173 106);
    --poe-color-legacy: rgb(212 145 63);
    --poe-color-bestiarymod: rgb(255 255 255);
    --poe-color-bestiarymodoutline: rgb(219 34 0); /* 220,255,40,0 */
    --poe-color-blightmod: rgb(255 255 255);
    --poe-color-blightmodoutline: rgb(215 0 0); /* 255,215,0,0 */
    --poe-color-afflictionmod: rgb(22 25 28);
    --poe-color-afflictionmodoutline: rgb(151 164 181); /* 200,193,210,232 */
    --poe-color-necropolisupside: rgb(255 204 27);
    --poe-color-necropolisdownside: rgb(175 181 203);
    --poe-color-necropolisoutline: rgb(0 0 0);
    --poe-color-necropoliscraftbook: rgb(33 32 31);
    --poe-color-stackitemlevel: rgb(255 255 255);
    --poe-color-harvestprimary: rgb(100 111 73);
    --poe-color-harvestsecondary: rgb(83 130 161);
    --poe-color-craftingcaster: rgb(179 248 254);
    --poe-color-craftingphysical: rgb(199 157 147);
    --poe-color-craftingfire: rgb(255 154 119);
    --poe-color-craftingcold: rgb(147 216 255);
    --poe-color-craftinglightning: rgb(248 203 118);
    --poe-color-craftingchaos: rgb(216 167 211);
    --poe-color-craftingspeed: rgb(207 238 165);
    --poe-color-craftingcrit: rgb(178 167 214);
    --poe-color-craftingred: rgb(200 103 110);
    --poe-color-craftingblue: rgb(162 207 251);
    --poe-color-craftinggreen: rgb(134 189 163);
    --poe-color-craftinglife: rgb(201 110 110);
    --poe-color-craftingdefences: rgb(168 143 103);
    --poe-color-craftingattack: rgb(218 129 77);
    --poe-color-heist: rgb(25 30 25);
    --poe-color-heiststolenitem: rgb(210 0 0);
    --poe-color-atlasmaven: rgb(182 12 169);
    --poe-color-ultimatumnumber: rgb(254 92 81);
    --poe-color-incursionunreachable: rgb(90 90 90);
    --poe-color-lockedinplaceitem: rgb(127 127 127);
    --poe-color-craftaffectremove: rgb(254 153 0);
    --poe-color-craftaffectwarning: rgb(235 200 80);
    --poe-color-craftaffectreroll: rgb(254 153 0);
    --poe-color-skillpopuptitle: rgb(249 230 202);
    --poe-color-disabledstats: rgb(150 150 167);
    --poe-color-skillextrainfo: rgb(255 192 119);
    --poe-color-fakeitemcount: rgb(200 200 200);
}

/* ===== Flex grid ===== */
.o-flex-grid {
    display: flex;
    flex-wrap: wrap;
    clear: both;
    margin-left: -16px;
}

.o-flex-grid__item {
    display: flex;
    box-sizing: border-box;
    overflow: hidden;
    flex: 0 0 auto;
    margin-bottom: 16px;
    padding-left: 16px;
    width: 100%;
}

.o-flex-grid__inner {
    flex: 0 1 100%;
    margin: 0 !important;
}

@media screen and (width >= 45em) {
    .o-flex-grid--c2\@sm > .o-flex-grid__item {
        width: 50%;
    }
}

@media screen and (width >= 60em) {
    .o-flex-grid--c2\@md > .o-flex-grid__item {
        width: 50%;
    }

    .o-flex-grid--c3\@md > .o-flex-grid__item {
        width: 33.3%;
    }

    .o-flex-grid--c4\@md > .o-flex-grid__item {
        width: 25%;
    }
}

@media screen and (width >= 80em) {
    .o-flex-grid--c3\@lg > .o-flex-grid__item {
        width: 33.3%;
    }
}

@media screen and (width >= 100em) {
    .o-flex-grid--c2\@lg > .o-flex-grid__item {
        width: 50%;
    }

    .o-flex-grid--c4\@lg > .o-flex-grid__item {
        width: 25%;
    }
}

/* ===== Content blocks ===== */
.c-cblock {
    overflow: hidden;
    margin: 6px 0;
    border: 1px solid #2c2b2b;
    border-radius: 4px;
    padding: 8px 16px;
    background-color: #141414;
}

.c-cblock--violet {
    border-color: #585477;
    background-color: #151517;
}

.c-cblock--gold {
    border-color: #75693c;
    background-color: #1c1b19;
}

.c-cblock > *:first-child {
    margin-top: 0 !important;
}

.c-cblock hr {
    clear: both;
    margin: 16px 0;
    background-color: #2c2b2b !important;
}

.c-cblock--violet hr {
    background-color: #585477 !important;
}

.c-cblock--gold hr {
    background-color: #75693c !important;
}

.c-cblock h2,
.c-cblock h3,
.c-cblock h4,
.c-cblock h5,
.c-cblock h6 {
    border: none;
}

/* ===== Basic tooltips ([[Template:Tooltip]]) ===== */
.tooltip {
    border-bottom: 1px dotted;
    cursor: help;
}

/* ===== Hoverbox ([[Template:Hoverbox]], [[Template:Item link]], [[Template:Skill link]]) ===== */
.hoverbox {
    display: inline-block;
}
.hoverbox__display {
    display: block;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    padding: 8px;
    transition: opacity 0.25s;
}
.hoverbox__display.is-visible {
    visibility: visible;
    opacity: 1;
}
.hoverbox__activator {
    display: inline;
}
.hoverbox__icon {
    vertical-align: -0.125em;
}
.hoverbox-display-container {
    position: fixed;
    z-index: 9999;
    width: 100%;
}

/* ===== Tooltip hoverbox ([[Template:Hoverbox]]) ===== */
.c-tooltip__activator {
    position: relative;
    border-bottom: 1px dotted;
    cursor: help;
}
.c-tooltip__display {
    box-sizing: border-box;
    border: 1px solid #7f7f7f;
    padding: 0.5em 1.5em;
    text-align: unset;
    max-width: 32em;
    font-size: 12px;
    line-height: 1.5;
    font-weight: normal;
    color: #7f7f7f;
    background-color: #000;
}

/* ===== Succession box (used by [[Template:Version]]) ===== */
table.successionbox {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* ===== Hatnote ([[Template:Hatnote]]) ===== */
.hatnote {
    display: flex;
    margin-bottom: 0.4em;
}

.hatnote__icon {
    flex-shrink: 0;
    padding-right: 0.4em;
    width: 1.6em;
}

.hatnote__icon img {
    width: 100%;
    height: auto;
}

.hatnote__text {
    font-style: italic;
}

.hatnote__text i {
    font-style: normal;
}

/* ===== Message box ([[Template:Message box]]) ===== */
.c-mbox {
    display: flex;
    align-items: center;
    column-gap: 1em;
    margin: 6px 0;
    border: 1px solid var(--mbox-default-border-color, #383736);
    border-top-width: 4px;
    padding: 0.4em 1em;
    min-width: min-content;
    background-color: var(--mbox-default-background-color, #1c1b19);
}

@media screen and (width >= 45em) {
    .c-mbox {
        margin-left: 20%;
        margin-right: 20%;
    }
}

.c-mbox--warning {
    border-color: var(--mbox-warning-border-color, #781c1c);
    background-color: var(--mbox-warning-background-color, #241515);
}

.c-mbox--action {
    border-color: var(--mbox-action-border-color, #693a1e);
    background-color: var(--mbox-action-background-color, #26211f);
}

.c-mbox--content {
    border-color: var(--mbox-content-border-color, #664c1e);
    background-color: var(--mbox-content-background-color, #26231f);
}

.c-mbox--style {
    border-color: var(--mbox-style-border-color, #75693c);
    background-color: var(--mbox-style-background-color, #24231f);
}

.c-mbox--info {
    border-color: var(--mbox-info-border-color, #4b5e6a);
    background-color: var(--mbox-info-background-color, #191b1c);
}

.c-mbox--legal {
    border-color: var(--mbox-legal-border-color, #403b2d);
    background-color: var(--mbox-legal-background-color, #21201c);
}

.c-mbox--proposal {
    border-color: var(--mbox-proposal-border-color, #585477);
    background-color: var(--mbox-proposal-background-color, #19191c);
}

.c-mbox--lock {
    border-color: var(--mbox-lock-border-color, #59534e);
    background-color: var(--mbox-lock-background-color, #211f1d);
}

.c-mbox__main {
    flex-grow: 1;
}

.c-mbox__title {
    font-weight: bold;
}

.c-mbox__text {
    font-size: 0.86em;
}

.c-mbox--full {
    clear: both;
    margin: 10px 0;
    border-top-width: 6px;
    padding-left: 2em;
    padding-right: 2em;
}

.c-mbox--full .c-mbox__title {
    font-size: 1.2em;
}

.c-mbox--full .c-mbox__text {
    font-size: 1em;
}

/* ===== Simple sidebar ([[Template:Lua]], [[Template:Template shortcut]]) ==== */
.c-sidebar {
    box-sizing: border-box;
    clear: right;
    float: right;
    margin: 6px 0;
    border: 1px solid #59534e;
    padding: 0.4em 1em;
    min-width: 100%;
    max-width: auto;
    overflow-wrap: anywhere;
    font-size: 0.86em;
    background-color: #211f1d;
}

@media screen and (width >= 45em) {
    .c-sidebar {
        margin-left: 14px;
        min-width: min-content;
        max-width: 220px;
        overflow-wrap: break-word;
    }
}

/* ===== Infocard ([[Template:Infocard]]) ==== */
.info-card {
    float: right;
    clear: right;
    margin-left: 14px;
    margin-bottom: 14px;
    text-align: center;
}

.info-card__card {
    border-style: solid;
    border-width: 2px 1px;
    border-color: #474233 #403b2e #1a1812;
    border-radius: 6px;
    padding: 2px 3px;
    width: 292px;
    background-color: #332f24;
}

.info-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.info-card__header .heading {
    font-size: 20px;
    line-height: 1.5;
    color: #dfcf99;
}

.info-card__header .subheading {
    padding-bottom: 4px;
    font-size: 14px;
    line-height: 1;
    font-weight: bold;
}

.info-card__body {
    margin: 0;
    border-style: solid;
    border-width: 2px 1px;
    border-color: #1a1812 #1f1c15 #474233;
    border-radius: 6px;
    background-color: #26231b;
}

.info-card__body .block {
    margin: 0;
    padding: 0.5em 1em;
    list-style: none;
}

.info-card__body .block:first-child {
    padding-top: 1em;
}

.info-card__body .block:last-child {
    padding-bottom: 1em;
}

/* ===== Status Infocard (Template:Status) ===== */
.status-icon {
    height: 96px;
}

.status-icon .image,
.status-icon .frame {
    height: 100%;
}

.status-icon .image img {
    margin-top: 16px;
    width: 64px;
    height: 64px;
}

.status-icon .frame {
    margin-top: -96px;
}

.status-icon .frame img {
    width: 98px;
    height: 96px;
}

/* ===== Disambiguation ([[Template:Disambiguation]]) ===== */
.dmbox {
    display: flex;
    align-items: center;
    clear: both;
    margin: 1em;
    border-width: 1px 0;
    border-style: solid;
    border-color: #474233;
    padding: 0.4em;
}

.dmbox-image {
    margin-right: 0.4em;
}

/* ===== Discussion closed ([[Template:Discussion top]], [[Template:Discussion bottom]]) ===== */
.c-dcbox {
    margin: 6px 0;
    border: 1px solid #2c2b2b;
    border-radius: 4px;
    padding: 6px 1em;
    background-color: #141414;
}

.c-dcbox--resolved {
    border-color: #678236;
    background-color: #1b1c19;
}

.c-dcbox--moved {
    border-color: #585477;
    background-color: #151517;
}

.c-dcbox__header {
    margin-bottom: 12px;
    border-bottom: 1px solid #383736;
    padding-bottom: 4px;
}

.c-dcbox__status {
    font-size: 1.1em;
    font-weight: bold;
    text-transform: uppercase;
}

.c-dcbox__reminder {
    font-size: 0.9em;
    font-style: italic;
    color: #5e4f45;
}

/* ===== Blockquote ([[Template:Blockquote top]]) ===== */
.bqbox {
    margin: 6px 1em;
    border: 1px solid #293137;
    border-radius: 4px;
    padding: 6px 1em;
    background-color: #141517;
}

/* ===== Documentation ([[Template:Documentation]]) ===== */
.template-documentation {
    clear: both;
    margin: 14px 0 0;
    border: 1px solid var(--documentation-border-color, #383736);
    padding: 1em;
    background-color: var(--documentation-background-color, #1c1b19);
}

.template-documentation__start {
    margin-bottom: 0.9em;
    border-bottom: 1px solid var(--documentation-border-color, #383736);
    padding-bottom: 3px;
}

.template-documentation__heading {
    font-size: 1.5em;
    font-weight: bold;
}

.template-documentation__end {
    margin: 7px 0;
    border: 1px solid var(--documentation-border-color, #383736);
    padding: 1em;
    font-style: italic;
    background-color: var(--documentation-background-color, #1c1b19);
}

.template-documentation__toolbar {
    font-size: 0.8em;
    font-style: normal;
}

/* ===== Semantic text formatting, aka "text colors" ([[Template:C]]) ===== */
.tc {
    font-style: normal;
}

em.tc {
    font-style: normal;
}

em.tc.-i {
    font-style: italic;
}

.tc a {
    color: inherit !important;
}

.tc abbr {
    color: inherit;
}

.tc.-mod {
    font-family: FontinSmallCaps, Verdana, Arial, Helvetica, sans-serif;
    font-variant-ligatures: none;
    color: var(--poe-color-augmented);
}

.tc.-default,
.tc.-stat {
    color: var(--poe-color-default);
}

.tc.-valuedefault,
.tc.-value {
    color: var(--poe-color-valuedefault);
}

.tc.-fire {
    color: var(--poe-color-fire);
}

.tc.-cold {
    color: var(--poe-color-cold);
}

.tc.-lightning {
    color: var(--poe-color-lightning);
}

.tc.-chaos {
    color: var(--poe-color-chaos);
}

.tc.-augmented {
    color: var(--poe-color-augmented);
}

.tc.-crafted,
.tc.-craft {
    color: var(--poe-color-crafted);
}

.tc.-fractured {
    color: var(--poe-color-fractured);
}

.tc.-enchanted {
    color: var(--poe-color-enchanted);
}

.tc.-unmet {
    color: var(--poe-color-unmet);
}

.tc.-uniqueitem {
    color: var(--poe-color-uniqueitem);
}

.tc.-unique {
    color: var(--poe-color-unique);
}

.tc.-rareitem {
    color: var(--poe-color-rareitem);
}

.tc.-rare {
    color: var(--poe-color-rare);
}

.tc.-magicitem {
    color: var(--poe-color-magicitem);
}

.tc.-magic {
    color: var(--poe-color-magic);
}

.tc.-whiteitem,
.tc.-white {
    color: var(--poe-color-whiteitem);
}

.tc.-normal {
    color: var(--poe-color-normal);
}

.tc.-gemitem {
    color: var(--poe-color-gemitem);
}

.tc.-gem {
    color: var(--poe-color-gem);
}

.tc.-gemdesc {
    color: var(--poe-color-gemdesc);
}

.tc.-gemproperty {
    color: var(--poe-color-gemproperty);
}

.tc.-currencyitem {
    color: var(--poe-color-currencyitem);
}

.tc.-currency,
.tc.-cosmetic {
    color: var(--poe-color-currency);
}

.tc.-questitem {
    color: var(--poe-color-questitem);
}

.tc.-quest {
    color: var(--poe-color-quest);
}

.tc.-nemesismod,
.tc.-nemesis {
    font-weight: bold;
    color: var(--poe-color-nemesismod);
    text-shadow: -1px -1px 0 var(--poe-color-nemesismodoutline),
    1px -1px 0 var(--poe-color-nemesismodoutline),
    -1px 1px 0 var(--poe-color-nemesismodoutline),
    1px 1px 0 var(--poe-color-nemesismodoutline);
}

.tc.-talismanmod {
    font-weight: bold;
    color: var(--poe-color-talismanmod);
    text-shadow: -1px -1px 0 var(--poe-color-talismanmodoutline),
    1px -1px 0 var(--poe-color-talismanmodoutline),
    -1px 1px 0 var(--poe-color-talismanmodoutline),
    1px 1px 0 var(--poe-color-talismanmodoutline);
}

.tc.-title {
    color: var(--poe-color-title);
}

.tc.-corrupted {
    color: var(--poe-color-corrupted);
}

.tc.-favour {
    color: var(--poe-color-favour);
}

.tc.-supporterpacknewitem {
    color: var(--poe-color-supporterpacknewitem);
}

.tc.-supporterpackitem {
    color: var(--poe-color-supporterpackitem);
}

.tc.-bloodlinemod,
.tc.-bloodline {
    font-weight: bold;
    color: var(--poe-color-bloodlinemod);
    text-shadow: -1px -1px 0 var(--poe-color-bloodlinemodoutline),
    1px -1px 0 var(--poe-color-bloodlinemodoutline),
    -1px 1px 0 var(--poe-color-bloodlinemodoutline),
    1px 1px 0 var(--poe-color-bloodlinemodoutline);
}

.tc.-tormentmod,
.tc.-torment {
    font-weight: bold;
    color: var(--poe-color-tormentmod);
    text-shadow: -1px -1px 0 var(--poe-color-tormentmodoutline),
    1px -1px 0 var(--poe-color-tormentmodoutline),
    -1px 1px 0 var(--poe-color-tormentmodoutline),
    1px 1px 0 var(--poe-color-tormentmodoutline);
}

.tc.-canttradeormodify {
    color: var(--poe-color-canttradeormodify);
}

.tc.-lockedtoaccount {
    color: var(--poe-color-lockedtoaccount);
}

.tc.-divination,
.tc.-card {
    color: var(--poe-color-divination);
}

.tc.-prophecy {
    color: var(--poe-color-prophecy);
}

.tc.-essencemod,
.tc.-essence {
    font-weight: bold;
    color: var(--poe-color-essencemod);
    text-shadow: -1px -1px 0 var(--poe-color-essencemodoutline),
    1px -1px 0 var(--poe-color-essencemodoutline),
    -1px 1px 0 var(--poe-color-essencemodoutline),
    1px 1px 0 var(--poe-color-essencemodoutline);
}

.tc.-uniquefoil,
.tc.-foil {
    color: var(--poe-color-uniquefoil);
}

.tc.-legacy {
    color: var(--poe-color-legacy);
}

.tc.-bestiarymod,
.tc.-bestiary {
    font-weight: bold;
    color: var(--poe-color-bestiarymod);
    text-shadow: -1px -1px 0 var(--poe-color-bestiarymodoutline),
    1px -1px 0 var(--poe-color-bestiarymodoutline),
    -1px 1px 0 var(--poe-color-bestiarymodoutline),
    1px 1px 0 var(--poe-color-bestiarymodoutline);
}

.tc.-blightmod,
.tc.-blight {
    font-weight: bold;
    color: var(--poe-color-blightmod);
    text-shadow: -1px -1px 0 var(--poe-color-blightmodoutline),
    1px -1px 0 var(--poe-color-blightmodoutline),
    -1px 1px 0 var(--poe-color-blightmodoutline),
    1px 1px 0 var(--poe-color-blightmodoutline);
}

.tc.-afflictionmod,
.tc.-deliriummod,
.tc.-delirium {
    font-weight: bold;
    color: var(--poe-color-afflictionmod);
    text-shadow: -1px -1px 0 var(--poe-color-afflictionmodoutline),
    1px -1px 0 var(--poe-color-afflictionmodoutline),
    -1px 1px 0 var(--poe-color-afflictionmodoutline),
    1px 1px 0 var(--poe-color-afflictionmodoutline);
}

.tc.-stackitemlevel {
    color: var(--poe-color-stackitemlevel);
}

.tc.-harvestprimary {
    color: var(--poe-color-harvestprimary);
}

.tc.-harvestsecondary {
    color: var(--poe-color-harvestsecondary);
}

.tc.-craftingcaster {
    color: var(--poe-color-craftingcaster);
}

.tc.-craftingphysical {
    color: var(--poe-color-craftingphysical);
}

.tc.-craftingfire {
    color: var(--poe-color-craftingfire);
}

.tc.-craftingcold {
    color: var(--poe-color-craftingcold);
}

.tc.-craftinglightning {
    color: var(--poe-color-craftinglightning);
}

.tc.-craftingchaos {
    color: var(--poe-color-craftingchaos);
}

.tc.-craftingspeed {
    color: var(--poe-color-craftingspeed);
}

.tc.-craftingcrit {
    color: var(--poe-color-craftingcrit);
}

.tc.-craftingred {
    color: var(--poe-color-craftingred);
}

.tc.-craftingblue {
    color: var(--poe-color-craftingblue);
}

.tc.-craftinggreen {
    color: var(--poe-color-craftinggreen);
}

.tc.-craftinglife {
    color: var(--poe-color-craftinglife);
}

.tc.-craftingdefences {
    color: var(--poe-color-craftingdefences);
}

.tc.-craftingattack {
    color: var(--poe-color-craftingattack);
}

.tc.-help {
    font-style: italic;
    color: var(--poe-color-default);
}

.tc.-flavour {
    font-style: italic;
    color: var(--poe-color-unique);
}

.tc.-hellscaped .tc.-scourge {
    color: var(--poe-color-hellscaped);
}

.tc.-primal {
    color: cyan;
}

.tc.-vivid {
    color: yellow;
}

.tc.-wild {
    color: magenta;
}

/* Used in legacy variant tables. */
.tc.-not {
    text-decoration: line-through;
    color: var(--poe-color-default);
}

/* ===== Item box ([[Template:Item]]) ===== */
.item-box {
    display: inline-block;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    padding: 1px;
    min-width: 220px;
    max-width: 440px;
    text-align: center;
    font-family: var(--stylized-smallcaps-font);
    font-size: 16px;
    line-height: 20px;
    font-weight: normal;
    font-style: normal;
    font-variant-ligatures: none;
    color: var(--poe-color-default);
    background-color: #000;
}

.item-box a,
.item-box a:visited,
.item-box a:active {
    color: unset;
}

.item-box.-normal {
    border-color: var(--poe-color-normal);
}

.item-box.-magic {
    border-color: var(--poe-color-magic);
}

.item-box.-rare {
    border-color: var(--poe-color-rare);
}

.item-box.-unique {
    border-color: var(--poe-color-unique);
}

.item-box.-currency {
    border-color: var(--poe-color-currency);
}

.item-box.-gem {
    border-color: var(--poe-color-gem);
}

.item-box.-quest {
    border-color: var(--poe-color-quest);
}

.item-box > .header {
    display: block;
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 21px;
    background-position: top left, top right, top center;
    background-repeat: no-repeat, no-repeat, repeat-x;
    background-size: contain;
}

.item-box > .header > .symbol {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    background-position: center;
    background-repeat: no-repeat;
}

.item-box > .header > .symbol:first-child {
    left: 0;
}

.item-box > .header > .symbol:last-child {
    right: 0;
}

.item-box.-normal > .header {
    color: var(--poe-color-normal);
}

.item-box.-magic > .header {
    color: var(--poe-color-magic);
}

.item-box.-rare > .header {
    color: var(--poe-color-rare);
}

.item-box.-unique > .header {
    color: var(--poe-color-unique);
}

.item-box.-currency > .header {
    color: var(--poe-color-currency);
}

.item-box.-gem > .header {
    color: var(--poe-color-gem);
}

.item-box.-quest > .header {
    color: var(--poe-color-quest);
}

.item-box > .header.-single {
    padding: 5px 30px;
    height: 28px;
    line-height: 26px;
}

.item-box > .header.-single > .symbol {
    width: 30px;
    height: 38px;
}

.item-box.-normal > .header.-single {
    /* [[File:Item UI header normal left.png]], [[File:Item UI header normal right.png]], [[File:Item UI header normal middle.png]] */
    background-image: url("/w/images/3/3a/Item_UI_header_normal_left.png"),
    url("/w/images/5/54/Item_UI_header_normal_right.png"),
    url("/w/images/8/8e/Item_UI_header_normal_middle.png");
}

.item-box.-magic > .header.-single {
    /* [[File:Item UI header magic left.png]], [[File:Item UI header magic right.png]], [[File:Item UI header magic middle.png]] */
    background-image: url("/w/images/4/4c/Item_UI_header_magic_left.png"),
    url("/w/images/5/55/Item_UI_header_magic_right.png"),
    url("/w/images/a/a3/Item_UI_header_magic_middle.png");
}

.item-box.-currency > .header.-single {
    /* [[File:Item UI header currency left.png]], [[File:Item UI header currency right.png]], [[File:Item UI header currency middle.png]] */
    background-image: url("/w/images/5/51/Item_UI_header_currency_left.png"),
    url("/w/images/e/e0/Item_UI_header_currency_right.png"),
    url("/w/images/7/77/Item_UI_header_currency_middle.png");
}

.item-box.-quest > .header.-single {
    /* [[File:Item UI header quest left.png]], [[File:Item UI header quest right.png]], [[File:Item UI header quest middle.png]] */
    background-image: url("/w/images/c/c2/Item_UI_header_quest_left.png"),
    url("/w/images/2/29/Item_UI_header_quest_right.png"),
    url("/w/images/7/74/Item_UI_header_quest_middle.png");
}

span.item-box.-gem {
    padding-bottom: 0.5rem;

    & > .header.-single { /* [[File:Item UI header gem.png]] */
        background-image: url("/w/images/0/00/Item_UI_header_gem.png");
        height: 2.5rem;
        display: flex;
        align-items: center;
        padding-left: 2rem;
    }

    .group:first-child {
        text-align: left;
        color: var(--poe-color-gemproperty);

        a {
            color: gray;
            text-decoration: underline;
            text-underline-offset: 2px;
            font-family: var(--stylized-font)
        }
    }

    .tc.-gemdesc {
        text-align: left;
        font-family: var(--stylized-font);

        a {
            text-decoration: underline;
            text-underline-offset: 2px;
        }
    }
}

.item-box > .header.-double {
    padding: 6px 45px;
    height: 51px;
    line-height: 24px;
}

.item-box > .header.-double > .symbol {
    width: 30px;
    height: 63px;
}

.item-box.-rare > .header.-double {
    /* [[File:Item UI header double rare left.png]], [[File:Item UI header double rare right.png]], [[File:Item UI header double rare middle.png]] */
    background-image: url("/w/images/0/07/Item_UI_header_double_rare_left.png"),
    url("/w/images/f/f9/Item_UI_header_double_rare_right.png"),
    url("/w/images/f/fd/Item_UI_header_double_rare_middle.png");
}

.item-box.-unique > .header.-double {
    /* [[File:Item UI header double unique left.png]], [[File:Item UI header double unique right.png]], [[File:Item UI header double unique middle.png]] */
    background-image: url("/w/images/b/b7/Item_UI_header_double_unique_left.png"),
    url("/w/images/c/c2/Item_UI_header_double_unique_right.png"),
    url("/w/images/e/e1/Item_UI_header_double_unique_middle.png");
}

.item-stats {
    display: block;
    padding: 0.5rem 1rem;
}

.item-stats.-nopad {
    padding: 0;
}

.item-stats > .group {
    display: block;
    margin: 0 auto;
}

.item-stats > .group:nth-last-child(n + 2)::after,
.item-stat-separator::before {
    content: "";
    display: block;
    margin: 0 auto;
    width: auto;
    height: 11px;
    background-position: center center;
    background-repeat: no-repeat;

    /* [[File:Item UI separator normal.png]] */
    background-image: url("/w/images/b/bd/Item_UI_separator_normal.png");
}

.item-box.-normal > .item-stats > .group::after,
.item-stat-separator.-normal::before {
    /* [[File:Item UI separator normal.png]] */
    background-image: url("/w/images/b/bd/Item_UI_separator_normal.png");
}

.item-box.-magic > .item-stats > .group::after,
.item-stat-separator.-magic::before {
    /* [[File:Item UI separator magic.png]] */
    background-image: url("/w/images/8/86/Item_UI_separator_magic.png");
}

.item-box.-rare > .item-stats > .group::after,
.item-stat-separator.-rare::before {
    /* [[File:Item UI separator rare.png]] */
    background-image: url("/w/images/6/67/Item_UI_separator_rare.png");
}

.item-box.-unique > .item-stats > .group::after,
.item-stat-separator.-unique::before {
    /* [[File:Item UI separator unique.png]] */
    background-image: url("/w/images/8/8a/Item_UI_separator_unique.png");
}

.item-box.-currency > .item-stats > .group::after,
.item-stat-separator.-currency::before {
    /* [[File:Item UI separator currency.png]] */
    background-image: url("/w/images/7/71/Item_UI_separator_currency.png");
}

.item-box.-gem > .item-stats > .group::after,
.item-stat-separator.-gem::before {
    /* [[File:Item UI separator gem.png]] */
    background-image: url("/w/images/a/a5/Item_UI_separator_gem.png");
}

.item-box.-quest > .item-stats > .group::after,
.item-stat-separator.-quest::before {
    /* [[File:Item UI separator quest.png]] */
    background-image: url("/w/images/3/3f/Item_UI_separator_quest.png");
}

/* ===== Item page ([[Template:Item]]) ===== */
.infobox-page-container {
    display: flex;
    flex-direction: column;
    float: right;
    clear: right;
    margin-left: 14px;
}
.item-infobox__navbar {
    display: inline-block;
    margin: 0;
    text-align: right;
    line-height: unset;
}
.infobox-page-container > .item-box {
    margin-bottom: 1em;
}
.infobox-page-container em.header {
    font-size: 1.3em;
    font-style: normal;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 0.5em;
}
.infobox-disabled-drop {
    color: red;
    font-weight: bold;
}

/* ===== Item hoverbox ([[Template:Item link]]) ===== */
.c-item-hoverbox__display > .item-icon {
    position: absolute;
    top: 8px;
    left: 100%;
}
.c-item-hoverbox__display.is-left-of-activator > .item-icon,
.c-item-hoverbox__display.is-above-activator.is-right-side-of-viewport > .item-icon,
.c-item-hoverbox__display.is-below-activator.is-right-side-of-viewport > .item-icon {
    left: auto;
    right: 100%;
}
.c-item-hoverbox__activator {
    display: flex;
    align-items: baseline;
}
.c-item-hoverbox--large .c-item-hoverbox__activator {
    flex-direction: column;
    align-items: stretch;
}

/* ===== Skill hoverbox ([[Template:Skill link]]) ===== */
.c-skill-hoverbox--large .c-skill-hoverbox__activator {
    flex-direction: column;
    align-items: stretch;
}

/* ===== Legacy variant tables ([[Template:Legacy variant table row]]) ===== */
.legacy-stats {
    font-family: var(--stylized-smallcaps-font);
    font-size: 0.857em;
    font-variant-ligatures: none;
    color: #55548c;
}

.legacy-stats .tc {
    font-size: 1.167em;
}

/* ===== Math block ([[Template:Math]]) ===== */
.c-math-block {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.c-math-block__formula {
    flex: 1 0 auto;
}

.c-math-block__formula .mwe-math-fallback-image-display {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.c-math-block__ref {
    flex: 0 1 auto;
    font-weight: bold;
}

/* ===== Keyboard key ([[Template:Key press]]) ===== */
.keyboard-key {
    display: inline-block;
    position: relative;
    top: -3px;
    border-radius: 4px;
    padding: 0 5px;
    font-family: inherit;
    font-size: 0.86em;
    line-height: 1.25;
    font-weight: normal;
    color: #fff;
    white-space: nowrap;
    background-color: #4f4d4a;
    box-shadow: 0 3px #2f2e2c;
    transform: perspective(42px) rotateX(10deg);
}

/* ===== Table cell templates ([[Template:Yes]], [[Template:No]], [[Template:N/a]]) ===== */
table.wikitable .table-yes,
table.wikitable .table-no,
table.wikitable .table-na {
    vertical-align: middle;
    text-align: center;
}

@media screen {
    table.wikitable .table-na {
        color: var(--subdued-text-color);
    }
}

/* ===== Horizontal lists ([[Template:Flatlist]]) ===== */
.hlist dl,
.hlist ol,
.hlist ul {
    margin: 0;
    padding: 0;
}

.hlist dd,
.hlist dt,
.hlist li {
    margin: 0;
    display: inline;
}

.hlist dl dl,
.hlist dl ol,
.hlist dl ul,
.hlist ol dl,
.hlist ol ol,
.hlist ol ul,
.hlist ul dl,
.hlist ul ol,
.hlist ul ul {
    display: inline;
}

.hlist .mw-empty-li {
    display: none;
}

.hlist dt::after {
    content: ": ";
}

.hlist dd::after,
.hlist li::after {
    content: " · ";
    font-weight: bold;
}

.hlist dd:last-child::after,
.hlist dt:last-child::after,
.hlist li:last-child::after {
    content: none;
}

.hlist dd dd:first-child::before,
.hlist dd dt:first-child::before,
.hlist dd li:first-child::before,
.hlist dt dd:first-child::before,
.hlist dt dt:first-child::before,
.hlist dt li:first-child::before,
.hlist li dd:first-child::before,
.hlist li dt:first-child::before,
.hlist li li:first-child::before {
    content: " (";
    font-weight: normal;
}

.hlist dd dd:last-child::after,
.hlist dd dt:last-child::after,
.hlist dd li:last-child::after,
.hlist dt dd:last-child::after,
.hlist dt dt:last-child::after,
.hlist dt li:last-child::after,
.hlist li dd:last-child::after,
.hlist li dt:last-child::after,
.hlist li li:last-child::after {
    content: ")";
    font-weight: normal;
}

.hlist ol {
    counter-reset: listitem;
}

.hlist ol > li {
    counter-increment: listitem;
}

.hlist ol > li::before {
    content: " " counter(listitem) "\a0";
}

.hlist dd ol > li:first-child::before,
.hlist dt ol > li:first-child::before,
.hlist li ol > li:first-child::before {
    content: " (" counter(listitem) "\a0";
}

/* ===== Plain list ([[Template:Plainlist]]) ===== */
.plainlist ol,
.plainlist ul {
    margin: 0;
    padding: 0;
    line-height: inherit;
    list-style: none;
}

.plainlist ol li,
.plainlist ul li {
    margin-bottom: 0;
}

/* ===== Main page ===== */
.page-Path_of_Exile_2_Wiki.action-view .firstHeading,
.page-Path_of_Exile_2_Wiki.action-submit .firstHeading {
    display: none;
}

.mainpage-header {
    margin-bottom: 32px;
    text-align: center;
}

.mainpage-header h1 {
    margin-bottom: 20px;
    border: none;
    line-height: 1.1 !important;
    color: #ffaf46 !important;
    text-shadow: 0 0 10px rgb(209 28 0 / 100%);
}

.mainpage-header .h1-1,
.mainpage-header .h1-2 {
    background: radial-gradient(
            ellipse at center,
            rgb(154 2 0 / 90%) 0%,
            rgb(154 2 0 / 0%) 65%,
            rgb(154 2 0 / 0%) 100%
    );
}

.mainpage-header .h1-1 {
    font-size: 26px;
    letter-spacing: 0.07em;
}

.mainpage-header .h1-2 {
    padding: 0 0.2em;
    font-size: 38px;
    font-weight: bold;
    letter-spacing: 0.01em;
}

.mainpage-version {
    display: table;
    border-collapse: collapse;
    width: 100%;
}

.mainpage-version > div {
    display: table-cell;
    vertical-align: middle;
}

.mainpage-version > div:first-child {
    width: 100%;
}

.mainpage-version > div:last-child {
    text-align: center;
}

.mainpage-news {
    margin: -12px -0.7em;
}

.mainpage-news > div {
    display: table;
    border-collapse: separate;
    border-spacing: 12px 0.7em;
}

.mainpage-news > div > div {
    display: table-row;
}

.mainpage-news .date,
.mainpage-news .title {
    display: table-cell;
    vertical-align: middle;
}

.mainpage-news .date > div {
    border-radius: 6px;
    width: 40px;
    height: 40px;
    text-align: center;
    font-size: 122%;
    line-height: 1.1;
    background-color: #332f24;
}

.mainpage-skills {
    width: 100%;
    text-align: center;
}

.mainpage-skills tr + tr td {
    padding-top: 12px;
}

.mainpage-equipment {
    width: 100%;
    text-align: center;
}

.mainpage-equipment tr + tr td {
    padding-top: 12px;
}

.mainpage-acts {
    width: 100%;
}

.mainpage-acts td {
    vertical-align: top;
}

.mainpage-mechanics {
    width: 100%;
}

.mainpage-mechanics td {
    vertical-align: top;
}

/* ===== Helpers ===== */

/* Clearfix */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* ===== Monster category icons ([[Template:Monster category icon]]) ===== */
.mon-cat {
    display: inline-block;
    margin-right: 0.15em;
    width: 1.265em;
    height: 1.265em;
    vertical-align: middle;

    /* [[File:Monster category icons.png]] */
    background: url("/w/images/c/c3/Monster_category_icons.png") no-repeat;
    background-size: auto 1.265em;
}

.mon-cat.-demon {
    background-position-x: calc(-1.265em * 0);
}

.mon-cat.-humanoid {
    background-position-x: calc(-1.265em * 1);
}

.mon-cat.-eldritch {
    background-position-x: calc(-1.265em * 2);
}

.mon-cat.-beast {
    background-position-x: calc(-1.265em * 3);
}

.mon-cat.-construct {
    background-position-x: calc(-1.265em * 4);
}

.mon-cat.-undead {
    background-position-x: calc(-1.265em * 5);
}

/* ===== Tip ([[Template:Tip]]) ===== */
.tip {
    background-color: oklab(16% 0 0.01 / 100%);
    padding: 0.75rem 1rem;
    border-inline-start: solid 0.2rem oklab(70% -0.1 0.08);
    margin-block: 1rem;
    box-sizing: border-box;

    p {
        color: #bbad98;
        margin: 0;
    }

    p:first-child {
        color: oklab(80% -0.1 0.08);
        font-weight: 600;
        font-family: var(--stylized-smallcaps-font);
        margin-block-end: -0.125rem;
    }
}

/* ===== Tip ([[Template:Quest]]) ===== */
.quest-table {
    --table-bg-color: oklab(18% 0 0.01);
    --border-color: var(--horizontal-rule-color);
    --header-bg-color: color-mix(in oklab, var(--table-bg-color), white 10%);
    --quest-title-color: color-mix(in oklab, var(--text-color), var(--poe-color-quest));

    float: right;
    border-collapse: collapse;
    margin-inline-start: 1rem;
    background: var(--table-bg-color);
    width: 400px;

    .quest-table-iconbox {
        text-align: center;
        font-size: 1.5rem;
        font-family: var(--stylized-smallcaps-font);
        color: var(--quest-title-color);
        padding-block: 1rem;
    }

    td, th {
        border: 1px solid var(--border-color);
        padding: 0.5rem 0.75rem;
    }

    th {
        text-align: start;
        background: var(--header-bg-color);

        /* fits width to content size */
        width: 0;
    }
}

/* ===== Module:Passive skill ===== */
.passive-line {
    display: block;
}

.passive-hover {
    display: none;
    position: relative;
}

:is(.passive-line, .passive-hover):hover, .passive-hover {
    display: inline;
}

.passive-icon-container {
    position: relative;
    margin: 0 auto;

    a {
        position: absolute;
        z-index: 0;
    }
}

.passive-icon-frame {
    position: absolute;
    z-index: 10;
    pointer-events: none;
}

/* sizes of icons have been adjusted to look similar to ingame placement */
.passive-icon-type__basic {
    width: 60px;
    height: 60px;

    .passive-icon-frame {
        width: 60px;
        height: 60px;
        background-image: url("/w/images/a/a1/Basic_passive_frame.png");
        background-repeat: round;
    }

    :is(a, img) {
        left: 10px;
        top: 10px;
        width: 40px;
        height: 40px;
    }
}

.passive-icon-type__notable {
    width: 100px;
    height: 100px;

    .passive-icon-frame {
        width: 100px;
        height: 100px;
        background-image: url("/w/images/5/50/Notable_passive_frame.png");
        background-repeat: round;
    }

    :is(a, img) {
        left: 14px;
        top: 14px;
        width: 72px;
        height: 72px;
    }
}

.passive-icon-type__keystone {
    width: 175px;
    height: 175px;

    .passive-icon-frame {
        width: 175px;
        height: 175px;
        background-image: url("/w/images/5/5a/Keystone_passive_frame.png");
        background-repeat: round;
    }

    :is(a, img) {
        left: 36px;
        top: 36px;
        height: 100px;
        width: 100px;
    }
}

.passive-icon-type__ascendancy_basic {
    width: 60px;
    height: 60px;

    .passive-icon-frame {
        width: 60px;
        height: 60px;
        background-image: url("/w/images/f/fa/Ascendancy_basic_passive_frame.png");
        background-repeat: round;
    }

    :is(a, img) {
        left: 10px;
        top: 10px;
        width: 39px;
        height: 40px;
    }
}

.passive-icon-type__ascendancy_notable {
    width: 100px;
    height: 100px;

    .passive-icon-frame {
        width: 100px;
        height: 100px;
        background-image: url("/w/images/2/26/Ascendancy_notable_passive_frame.png");
        background-repeat: round;
    }

    :is(a, img) {
        left: 16px;
        top: 16px;
        width: 68px;
        height: 68px;
    }
}

.passive-icon-type__mastery {
    width: 100px;
    height: 100px;

    .passive-icon-frame {
        width: 100px;
        height: 100px;
        background-image: url("/w/images/1/16/PassiveMasteryConnectedButton.png");
        background-repeat: round;
    }

    :is(a, img) {
        left: 0;
        top: 0;
        width: 100px;
        height: 100px;
        z-index: 11;
    }
}

.mastery_infocard {
    width: auto;

    table {
        text-align: left;
    }
}

/* ===== Navboxes ===== */
.navbox {
    border: 1px solid var(--horizontal-rule-color);

    table {
        border-collapse: collapse;
        margin: auto;
    }

    .navbox-list {
        border-inline: 0 !important;
    }

    .navbox-group {
        padding-inline: 1rem;
        border-inline: 0 !important;
        text-align: right;
    }

    .navbox-subgroup .navbox-group {
        background: oklab(20% 0 0.01 / 100%)
    }
}

/* ===== Resistance icons ([[Template:Resistance icon]]) ===== */
.res-cat {
    --size: 1.7rem;

    display: inline-block;
    margin-right: 0.15em;
    width: var(--size);
    height: var(--size);
    vertical-align: middle;
    background-size: auto var(--size);
    filter: brightness(1.1)
}

.res-cat.-chaos {
    /* [[File:Chaos resistance monster icon.png]] */
    background-image: url("/w/images/a/ab/Chaos_resistance_monster_icon.png");
}

.res-cat.-chaos-weak {
    /* [[File:Chaos resistance weak monster icon.png]] */
    background-image: url("/w/images/3/35/Chaos_resistance_weak_monster_icon.png");
}

.res-cat.-chaos-strong {
    /* [[File:Chaos resistance strong monster icon.png]] */
    background-image: url("/w/images/0/0a/Chaos_resistance_strong_monster_icon.png");
}

.res-cat.-cold {
    /* [[File:Cold resistance monster icon.png]] */
    background-image: url("/w/images/b/be/Cold_resistance_monster_icon.png");
}

.res-cat.-cold-weak {
    /* [[File:Cold resistance weak monster icon.png]] */
    background-image: url("/w/images/f/f3/Cold_resistance_weak_monster_icon.png");
}

.res-cat.-cold-strong {
    /* [[File:Cold resistance strong monster icon.png]] */
    background-image: url("/w/images/2/2c/Cold_resistance_strong_monster_icon.png");
}

.res-cat.-fire {
    /* [[File:Fire resistance monster icon.png]] */
    background-image: url("/w/images/9/94/Fire_resistance_monster_icon.png");
}

.res-cat.-fire-weak {
    /* [[File:Fire resistance weak monster icon.png]] */
    background-image: url("/w/images/1/10/Fire_resistance_weak_monster_icon.png");
}

.res-cat.-fire-strong {
    /* [[File:Fire resistance strong monster icon.png]] */
    background-image: url("/w/images/3/30/Fire_resistance_strong_monster_icon.png");
}

.res-cat.-light {
    /* [[File:Lightning resistance monster icon.png]] */
    background-image: url("/w/images/a/a2/Lightning_resistance_monster_icon.png");
}

.res-cat.-light-weak {
    /* [[File:Lightning resistance weak monster icon.png]] */
    background-image: url("/w/images/8/8e/Lightning_resistance_weak_monster_icon.png");
}

.res-cat.-light-strong {
    /* [[File:Lightning resistance strong monster icon.png]] */
    background-image: url("/w/images/b/b4/Lightning_resistance_strong_monster_icon.png");
}

.res-cat.-phys {
    /* [[File:Physical resistance monster icon.png]] */
    background-image: url("/w/images/8/80/Physical_resistance_monster_icon.png");
}

.res-cat.-phys-weak {
    /* [[File:Physical resistance weak monster icon.png]] */
    background-image: url("/w/images/d/d6/Physical_resistance_weak_monster_icon.png");
}

.res-cat.-phys-strong {
    /* [[File:Physical resistance strong monster icon.png]] */
    background-image: url("/w/images/0/00/Physical_resistance_strong_monster_icon.png");
}

/* ===== References ([[Template:Reflist]]) ===== */
ol.references,
div.reflist,
div.refbegin {
    margin-bottom: 0.5em;
}

div.refbegin-100 {
    font-size: 100%;
}

div.reflist ol.references {
    font-size: 100%;
    list-style-type: inherit;
}

ol.references li:target,
sup.reference:target,
span.citation:target {
    background-color: rgb(0 182 255 / 10%);
    border: 1px dotted #00b6ff;
    border-radius: 4px;
}

ol.references li:target,
span.citation:target {
    padding: 0.25rem 0.5rem;
}

sup.reference {
    font-style: normal;
    font-weight: normal;
}

span.brokenref {
    display: none;
}

.citation {
    overflow-wrap: break-word;
}

.citation .printonly {
    display: none;
}