Telos Realms Wiki - User contributions [en]

MediaWiki:Minerva.css

2026-07-08T09:57:54Z

Willow: idk why i did that

:root {
--color-base: #c9e1e6;
--color-base-fixed: #c9e1e6;
--color-base--hover: #d1eaef;
--color-emphasized: #d1eaef;
--color-subtle: #a7bfca;
--color-placeholder: #a7bfca;
--color-disabled: #a2a9b1;
--color-disabled-emphasized: #a2a9b1;
--color-inverted: #fff;
--color-inverted-fixed: #fff;
--color-progressive: #42a2f1;
--color-progressive--hover: #4c57b5;
--color-progressive--active: #4c57b5;
--color-progressive--focus: #4c57b5;
--color-destructive: #ce0000;
--color-destructive--hover: #900000;
--color-destructive--active: #900000;
--color-destructive--focus: #900000;
--color-visited: #2f3fcf;
--color-visited--hover: color-mix(in srgb, #2f3fcf 80%, #fff);
--color-visited--active: color-mix(in srgb, #2f3fcf 60%, #000);
--color-destructive--visited: #8e0000;
--color-destructive--visited--hover: color-mix(in srgb, #8e0000 85%, #fff);
--color-destructive--visited--active: color-mix(in srgb, #8e0000 70%, #000);
--color-error: #ce0000;
--color-error--hover: color-mix(in srgb, #ce0000 85%, #fff);
--color-error--active: color-mix(in srgb, #ce0000 70%, #000);
--color-warning: #f57b50;
--color-success: #177860;
--color-notice: #f57b50;
--color-icon-error: #ce0000;
--color-icon-warning: #f57b50;
--color-icon-success: #449c1c;
--color-icon-notice: #f57b50;
--color-content-added: #177860;
--color-content-removed: #ce0000;
--filter-invert-icon: 0;
--filter-invert-primary-button-icon: 1;
--box-shadow-color-base: #a2a9b1;
--box-shadow-color-progressive--active: #233566;
--box-shadow-color-progressive--focus: #36c;
--box-shadow-color-progressive-selected: #36c;
--box-shadow-color-progressive-selected--hover: #3056a9;
--box-shadow-color-progressive-selected--active: #233566;
--box-shadow-color-destructive--focus: #36c;
--box-shadow-color-inverted: #fff;
--box-shadow-color-alpha-base: rgba(0, 0, 0, 0.06);
--box-shadow-color-transparent: transparent;
--mix-blend-mode-base: normal;
--mix-blend-mode-blend: lighten;
--background-color-base: #1a1a22;
--background-color-base-fixed: #1a1a22;
--background-color-neutral: #1a1a22;
--background-color-neutral-subtle: color-mix(in srgb, #1a1a22 95%, #fff);
--background-color-interactive: #1a1a22;
--background-color-interactive--hover: #2d2d50;
--background-color-interactive--active: color-mix(in srgb, #2d2d50 85%, #fff);
--background-color-interactive-subtle: color-mix(in srgb, #2d2d50 50%, transparent);
--background-color-interactive-subtle--hover: color-mix(in srgb, #2d2d50 70%, transparent);
--background-color-interactive-subtle--active: color-mix(in srgb, #2d2d50 85%, transparent);
--background-color-disabled: color-mix(in srgb, #1a1a22 70%, #808080);
--background-color-disabled-subtle: color-mix(in srgb, #1a1a22 85%, #808080);
--background-color-inverted: #fff;
--background-color-progressive: color-mix(in srgb, #1a1a22 90%, #42a2f1);
--background-color-progressive--hover: color-mix(in srgb, #1a1a22 80%, #42a2f1);
--background-color-progressive--active: color-mix(in srgb, #1a1a22 70%, #42a2f1);
--background-color-progressive--focus: color-mix(in srgb, #1a1a22 85%, #42a2f1);
--background-color-progressive-subtle: color-mix(in srgb, #1a1a22 95%, #42a2f1);
--background-color-progressive-subtle--hover: color-mix(in srgb, #1a1a22 90%, #42a2f1);
--background-color-progressive-subtle--active: color-mix(in srgb, #1a1a22 85%, #42a2f1);
--background-color-destructive: color-mix(in srgb, #1a1a22 90%, #ce0000);
--background-color-destructive--hover: color-mix(in srgb, #1a1a22 80%, #ce0000);
--background-color-destructive--active: color-mix(in srgb, #1a1a22 70%, #ce0000);
--background-color-destructive--focus: color-mix(in srgb, #1a1a22 85%, #ce0000);
--background-color-destructive-subtle: color-mix(in srgb, #1a1a22 95%, #ce0000);
--background-color-destructive-subtle--hover: color-mix(in srgb, #1a1a22 90%, #ce0000);
--background-color-destructive-subtle--active: color-mix(in srgb, #1a1a22 85%, #ce0000);
--background-color-error: color-mix(in srgb, #1a1a22 90%, #ce0000);
--background-color-error--hover: color-mix(in srgb, #1a1a22 80%, #ce0000);
--background-color-error--active: color-mix(in srgb, #1a1a22 70%, #ce0000);
--background-color-error-subtle: color-mix(in srgb, #1a1a22 95%, #ce0000);
--background-color-error-subtle--hover: color-mix(in srgb, #1a1a22 90%, #ce0000);
--background-color-error-subtle--active: color-mix(in srgb, #1a1a22 85%, #ce0000);
--background-color-warning-subtle: color-mix(in srgb, #1a1a22 95%, #f57b50);
--background-color-success-subtle: color-mix(in srgb, #1a1a22 95%, #177860);
--background-color-notice-subtle: color-mix(in srgb, #1a1a22 95%, #f57b50);
--background-color-content-added: color-mix(in srgb, #1a1a22 90%, #177860);
--background-color-content-removed: color-mix(in srgb, #1a1a22 90%, #ce0000);
--background-color-transparent: #1a1a22F0;
--background-color-backdrop-light: rgba(255, 255, 255, 0.65);
--background-color-backdrop-dark: rgba(0, 0, 0, 0.65);
--background-color-button-quiet--hover: rgba(0, 24, 73, 0.027);
--background-color-button-quiet--active: rgba(0, 24, 73, 0.082);
--background-color-input-binary--checked: #36c;
--background-color-tab-list-item-framed--hover: rgba(255, 255, 255, 0.3);
--background-color-tab-list-item-framed--active: rgba(255, 255, 255, 0.65);
--opacity-icon-base: 0.87;
--opacity-icon-base--hover: 0.74;
--opacity-icon-base--selected: 1;
--opacity-icon-base--disabled: 0.51;
--opacity-icon-placeholder: 0.51;
--opacity-icon-subtle: 0.67;
--border-image-base: url('/wiki/Special:Redirect/file/Wiki-border-kurva.png');
--border-color-base: #2b5cc9;
--border-color-subtle: color-mix(in srgb, #2b5cc9 50%, transparent);
--border-color-muted: color-mix(in srgb, #2b5cc9 30%, transparent);
--border-color-interactive: #2b5cc9;
--border-color-interactive--hover: color-mix(in srgb, #2b5cc9 85%, #fff);
--border-color-interactive--active: color-mix(in srgb, #2b5cc9 70%, #000);
--border-color-disabled: color-mix(in srgb, #2b5cc9 40%, #808080);
--border-color-inverted: #fff;
--border-color-inverted-fixed: #fff;
--border-color-progressive: #2b5cc9;
--border-color-progressive--hover: color-mix(in srgb, #2b5cc9 90%, #fff);
--border-color-progressive--active: color-mix(in srgb, #2b5cc9 80%, #000);
--border-color-progressive--focus: color-mix(in srgb, #2b5cc9 95%, #fff);
--border-color-destructive: color-mix(in srgb, #2b5cc9 70%, #ce0000);
--border-color-destructive--hover: color-mix(in srgb, #2b5cc9 60%, #ce0000);
--border-color-destructive--active: color-mix(in srgb, #2b5cc9 50%, #ce0000);
--border-color-destructive--focus: color-mix(in srgb, #2b5cc9 65%, #ce0000);
--border-color-error: color-mix(in srgb, #2b5cc9 70%, #ce0000);
--border-color-error--hover: color-mix(in srgb, #2b5cc9 60%, #ce0000);
--border-color-error--active: color-mix(in srgb, #2b5cc9 50%, #ce0000);
--border-color-warning: color-mix(in srgb, #2b5cc9 60%, #f57b50);
--border-color-success: color-mix(in srgb, #2b5cc9 60%, #177860);
--border-color-notice: color-mix(in srgb, #2b5cc9 60%, #f57b50);
--border-color-content-added: color-mix(in srgb, #2b5cc9 60%, #177860);
--border-color-content-removed: color-mix(in srgb, #2b5cc9 60%, #ce0000);
--border-color-transparent: transparent;
--border-color-divider: #a2a9b1;
--outline-color-progressive--focus: #36c;
--color-link-red: var(--color-destructive);
--color-link-red--hover: var(--color-destructive--hover);
--color-link-red--active: var(--color-destructive--active);
--color-link-red--focus: var(--color-destructive--focus);
--color-link-red--visited: var(--color-destructive--visited);
--color-link-red--visited--hover: var(--color-destructive--visited--hover);
--color-link-red--visited--active: var(--color-destructive--visited--active);
--accent-color-base: #36c;
--border-color-input--hover: var(--border-color-interactive);
--border-color-input-binary: var(--border-color-interactive);
--border-color-input-binary--hover: var(--border-color-progressive--hover);
--border-color-input-binary--active: var(--border-color-progressive--active);
--border-color-input-binary--focus: var(--border-color-progressive--focus);
--border-color-input-binary--checked: var(--border-color-progressive);
--color-base--subtle: #54595d;
}

/* ---------- Style login button ---------- */
#daedalus-user-menu-checkbox:hover {
background: #365fb8;
}

.pre-content h1, .content .mw-heading1, .content h1, .content .mw-heading2, .content h2 {
font-family: 'Daedalus', 'Outfit', 'Times', 'Source Serif Pro', serif;
}

:root body {
background-image: url(images/f/ff/Site-background-image.jpg);
background-size: cover;
background-position: bottom left;
background-repeat: no-repeat;
background-attachment: fixed;
}
.last-modified-bar {
display: none !important;
}
.mw-highlight {
background-color: #1a1a22;
}
.mw-footer {
background-image: url(/wiki/Special:Redirect/file/Site-footer-image.jpg);
background-position: 25% 20%;
background-size: cover;
position: relative;
border-top: 2px solid rgba(66, 162, 241, 0.3);
box-shadow:
inset 0 0 60px 20px rgba(0, 0, 0, 0.8),
inset 0 2px 40px 10px rgba(66, 162, 241, 0.1),
0 -10px 40px rgba(66, 162, 241, 0.15);
}

.mw-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg,
transparent 0%,
rgba(66, 162, 241, 0.4) 10%,
rgba(66, 162, 241, 0.7) 30%,
rgba(66, 162, 241, 0.9) 50%,
rgba(66, 162, 241, 0.7) 70%,
rgba(66, 162, 241, 0.4) 90%,
transparent 100%);
box-shadow: 0 0 15px rgba(66, 162, 241, 0.8);
animation: footer-scan 4s linear infinite;
}

@keyframes footer-scan {
0% { opacity: 0.6; }
50% { opacity: 1; }
100% { opacity: 0.6; }
}
.mw-heading1, h1 {
font-size: 2em;
}
#filetoc {
background-color: var(--background-color-base);
}
.mw-content-ltr.mw-highlight-lines pre, .mw-content-ltr.content .mw-highlight-lines pre {
padding-left: 3.5em;
box-shadow: inset 2.75em 0 0 var(--background-color-base);
}
.cdx-message--error {
background-color: var(--background-color-base);
border-color: var(--border-color-error, #f54739);
}
.editOptions {
background-color: var(--background-color-base);
color: var(--color-base);
border: 1px solid var(--border-color-subtle, #c8ccd1);
border-top: 0;
padding: 1em 1em 1.5em 1em;
margin-bottom: 2em;
}
.ace-tm .ace_gutter {
background: var(--background-color-base);
color: var(--color-base);
}

.ace-tm {
background-color: #FFFFFF80;
}

.overlay-enabled, .mw-body {
background-color: transparent;
}

.header-container.header-chrome {
background-color: transparent;
border: 0;
box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.08);
}

.header-container {
border-bottom: none;
padding: 0 16px;
}

#mw-mf-page-center {
width: 100%;
min-height: 100%;
position: relative;
background-color: transparent;
overflow: hidden;
}

@media screen and (min-width: 993.3px) {
.banner-container, .daedalus-anon-talk-message, .daedalus-header, .page-header-bar, .overlay-header, .content, .overlay-content, .content-unstyled, .pre-content, .post-content, #mw-content-text > form {
margin-left: auto;
margin-right: auto;
width: 90%;
max-width: 1900px;
}
}

.search-box .search {
color: var(--color-base);
}

.content .mw-parser-output .mw-editsection .cdx-button {
font-size: 1rem;
display: none;
}

.wikitable > tr > th, .wikitable > * > tr > th {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.15) 0%, rgba(76, 87, 181, 0.1) 100%),
var(--background-color-transparent);
color: var(--color-base);
text-align: center;
font-weight: bold;
position: relative;
padding: 0.75em 0.5em;
border-bottom: 1px solid rgba(66, 162, 241, 0.3) !important;
text-shadow: 0 0 10px rgba(66, 162, 241, 0.5);
}

.wikitable > tr > th::after, .wikitable > * > tr > th::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.6) 50%, transparent);
box-shadow: 0 0 6px rgba(66, 162, 241, 0.4);
}

.mw-search-createlink {
display: block !important;
}

/* this is a comment to show how fast this thing is */

.wikitable {
background-color: var(--background-color-transparent);
color: var(--color-base, #202122);
margin: 1em 0;
border: 1px solid var(--border-color-base, #a2a9b1);
border-collapse: collapse;
}

.content .mw-parser-output h2 {
image-rendering: pixelated !important;
text-rendering: geometricPrecision !important;
text-shadow:
0 0.06em 0 color-mix(in srgb, currentColor 50%, black), 0 0.12em 0 color-mix(in srgb, currentColor 10%, black), 0 0 0.2em currentColor;
font-size: 3.3em;
font-weight: normal;
}

.content, .pre-content {
background: var(--background-color-transparent);
box-shadow: 0 0 30px #1a1a22;
padding: 0 5em;
}

.header-container {
background: #1a1a22D0 !important;
padding: 0 0.5em !important;
}

.content .mw-parser-output .mw-heading, .content .mw-parser-output .section-heading {
display: block;
min-width: fit-content;
}

.content .mw-parser-output h2 {
flex-grow: 0;
flex-basis: 0;
}

.footer-section > ul {
width: 30%;
columns: 2;
column-gap: 20px;
max-height: 200px;
overflow-y: auto;
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 50%, rgba(76, 87, 181, 0.08) 100%),
#1a1a22C0;
box-shadow:
0 0 30px rgba(0, 0, 0, 0.8),
inset 0 0 30px 5px rgba(66, 162, 241, 0.08),
0 0 0 1px rgba(66, 162, 241, 0.25);
padding: 0.75em;
border-radius: 8px;
display: inline-block;
margin-bottom: 2.5em;
position: relative;
backdrop-filter: blur(5px);
}

.footer-section > ul::before {
content: '';
position: absolute;
top: 0;
left: 10%;
right: 10%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.6), transparent);
box-shadow: 0 0 8px rgba(66, 162, 241, 0.5);
}

.footer-section > ul > li {
font-weight: bold;
text-shadow:
0 0 15px rgba(66, 162, 241, 0.6),
0 0 8px rgba(66, 162, 241, 0.4),
0 2px 4px rgba(0, 0, 0, 0.8);
transition: all 0.3s ease;
}

.footer-section > ul > li:hover {
text-shadow:
0 0 20px rgba(66, 162, 241, 0.9),
0 0 12px rgba(66, 162, 241, 0.6),
0 2px 4px rgba(0, 0, 0, 0.8);
transform: translateX(3px);
}

.mw-footer > .post-content > * {
text-align: center;
}

.toc {
display: none;
}

table.wikitable tr:nth-child(2n) {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.03) 0%, transparent 100%),
color-mix(in srgb, #1a1a22, #111111);
}

table.wikitable tr:nth-child(2n+1) {
background:
linear-gradient(135deg, rgba(76, 87, 181, 0.03) 0%, transparent 100%),
#1a1a22;
}

table.wikitable {
border-image-source: url("/wiki/Special:Redirect/file/Wiki-border-kurva.png");
border-image-slice: 6;
border-image-width: 6px;
border-image-repeat: repeat repeat;
border-collapse: separate;
padding: 0.5em;
box-shadow:
0 0 30px 5px rgba(0, 0, 0, 0.6),
inset 0 0 40px 8px rgba(66, 162, 241, 0.05),
0 0 0 1px rgba(66, 162, 241, 0.15);
position: relative;
}

table.wikitable::before {
content: '';
position: absolute;
top: 0;
left: 10%;
right: 10%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.5), transparent);
box-shadow: 0 0 8px rgba(66, 162, 241, 0.4);
z-index: 1;
}

table.wikitable > caption {
font-family: 'Daedalus';
font-size: 2em;
border-radius: 20px 20px 0 0;
padding-left: 0.5em;
}

table.wikitable > tbody > tr > td > a {
font-weight: bold;
}

span.mw-page-title-main {
font-size: 2em;
}

#bodyContent {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-border-nexus.png);
border-image-slice: 11;
border-image-width: 20px;
border-image-repeat: stretch stretch;
border-image-outset: 10px;
padding: 5em 3em 5em 3em;
box-shadow: inset 0 0 30px lightblue;
}

.search-box {
margin-left: auto;
margin-right: 1em;
}

.search-box .search {
border: 1px solid var(--color-visited);
border-radius: 10px;
}

input.search:hover {
background-color: color-mix(in srgb, #1a1a22 70%, #fff 10%);
}
.cdx-button:enabled.cdx-button--weight-quiet:hover, .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet:hover {
background-color: var(--background-color-interactive-subtle--hover, #eaecf0);
mix-blend-mode: var(--mix-blend-mode-blend, lighten);
}

.label[for="page-actions-overflow-checkbox"]:hover {
background-color: var(--background-color-interactive-subtle--hover, #eaecf0);
mix-blend-mode: var(--mix-blend-mode-blend, lighten);
}

.page-actions-menu__list-item:last-child {
margin-right: 0 !important;
}

.toggle-list__checkbox {
position: absolute;
z-index: 1;
opacity: 0;
top: 0;
left: 0;
height: 100%;
width: 100% !important;
margin: 0;
}

.cdx-button .daedalus-icon + span:not(:empty) {
margin-left: 0;
}

div.post-content > a[role='button'] {
display:none;
}

body {
font-family: 'Outfit';
}

.footer-content > ul > li > a {
font-size: 1.5em;
text-shadow:
0 0 10px rgba(66, 162, 241, 0.5),
0 2px 4px rgba(0, 0, 0, 0.8);
transition: all 0.3s ease;
}

.footer-content > ul > li > a:hover {
text-shadow:
0 0 18px rgba(66, 162, 241, 0.8),
0 0 10px rgba(66, 162, 241, 0.6),
0 2px 4px rgba(0, 0, 0, 0.8);
transform: translateY(-2px);
}

div.footer-content::before {
background-image: url(/wiki/Special:Redirect/file/Site-logo.png);
filter: drop-shadow(0 0 20px rgba(66, 162, 241, 0.6));
}

.footer-content > ul.footer-places {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.1) 0%, transparent 50%, rgba(76, 87, 181, 0.1) 100%),
var(--background-color-transparent);
box-shadow:
inset 0 0 30px 8px rgba(66, 162, 241, 0.12),
0 0 25px 8px rgba(66, 162, 241, 0.2),
0 0 0 1px rgba(66, 162, 241, 0.3);
margin: 1em 1em;
border-radius: 8px;
padding: 0.75em;
position: relative;
font-weight: bold;
margin-left: auto;
margin-right: auto;
}

.footer-places {
width: fit-content;
}

.footer-content > ul.footer-places::before {
content: '';
position: absolute;
top: 0;
left: 5%;
right: 5%;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.5) 20%,
rgba(66, 162, 241, 0.8) 50%,
rgba(66, 162, 241, 0.5) 80%,
transparent);
box-shadow: 0 0 10px rgba(66, 162, 241, 0.6);
}

.item-infobox > div.druid-section-container > div.druid-row-Unholy {
display: none;
}
.item-infobox > div.druid-section-container > div.druid-row-Voidbound {
display: none;
}
.item-infobox > div.druid-section-container > div.druid-row-Bloodshot {
display: none;
}
.item-infobox > div.druid-section-container > div.druid-row-Royal {
display: none;
}
.item-infobox > div.druid-section-container > div.druid-row-Gilded {
display: none;
}
.item-infobox > div.druid-section-container > div.druid-row-Irradiated {
display: none;
}
.item-infobox > div.druid-section-container > div.druid-row-Halloween {
display: none;
}
.item-infobox > div.druid-section-container > div.druid-row-Christmas {
display: none;
}
.item-infobox > div.druid-section-container > div.druid-row-Valentine {
display: none;
}

/* UNHOLY Template Specific Colors & Border Image. */
.item-infobox:has(.druid-row-Unholy .druid-toggleable-data.focused:not(.druid-toggleable-data-empty)) {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemUnholyBorder.png);
.druid-title, .druid-main-images-label {
color: #8d9f97;
}
div.druid-data-Desc, div.druid-row-Desc > .druid-data {
color: #d0e8e4;
}
}
/* VOIDBOUND Template Specific Colors & Border Image. */
.item-infobox:has(.druid-row-Voidbound .druid-toggleable-data.focused:not(.druid-toggleable-data-empty)) {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemVoidboundBorder.png);
.druid-title, .druid-main-images-label {
color: #fc7cf1;
}
div.druid-data-Desc, div.druid-row-Desc > .druid-data {
color: #e955fc;
}
}
/* BLOODSHOT Template Specific Colors & Border Image. */
.item-infobox:has(.druid-row-Bloodshot .druid-toggleable-data.focused:not(.druid-toggleable-data-empty)) {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemBloodshotBorder.png);
.druid-title, .druid-main-images-label {
color: #c20f0f;
}
div.druid-data-Desc, div.druid-row-Desc > .druid-data {
color: #fa8686;
}
}
/* ROYAL Template Specific Colors & Border Image. */
.item-infobox:has(.druid-row-Royal .druid-toggleable-data.focused:not(.druid-toggleable-data-empty)) {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemRoyalBorder.png);
.druid-title, .druid-main-images-label {
color: #cd08cd;
}
div.druid-data-Desc, div.druid-row-Desc > .druid-data {
color: #fcb7fc;
}
}
/* GILDED Template Specific Colors & Border Image. */
.item-infobox:has(.druid-row-Gilded .druid-toggleable-data.focused:not(.druid-toggleable-data-empty)) {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemGildedBorder.png);
.druid-title, .druid-main-images-label {
color: #db7400;
}
div.druid-data-Desc, div.druid-row-Desc > .druid-data {
color: #eac278;
}
}
/* IRRADIATED Template Specific Colors & Border Image. */
.item-infobox:has(.druid-row-Irradiated .druid-toggleable-data.focused:not(.druid-toggleable-data-empty)) {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemIrradiatedBorder.png);
.druid-title, .druid-main-images-label {
color: #15cb15;
}
div.druid-data-Desc, div.druid-row-Desc > .druid-data {
color: #cef46a;
}
}
/* HALLOWEEN Template Specific Colors & Border Image. */
.item-infobox:has(.druid-row-Halloween .druid-toggleable-data.focused:not(.druid-toggleable-data-empty)) {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemHalloweenBorder.png);
.druid-title, .druid-main-images-label {
color: #d18d07;
}
div.druid-data-Desc, div.druid-row-Desc > .druid-data {
color: #f4ad21;
}
}
/* CHRISTMAS Template Specific Colors & Border Image. */
.item-infobox:has(.druid-row-Christmas .druid-toggleable-data.focused:not(.druid-toggleable-data-empty)) {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemChristmasBorder.png);
.druid-title, .druid-main-images-label {
color: #91efd6;
}
div.druid-data-Desc, div.druid-row-Desc > .druid-data {
color: #c9f4f5;
}
}
/* VALENTINE Template Specific Colors & Border Image. */
.item-infobox:has(.druid-row-Valentine .druid-toggleable-data.focused:not(.druid-toggleable-data-empty)) {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemValentineBorder.png);
.druid-title, .druid-main-images-label {
color: #f16593;
}
div.druid-data-Desc, div.druid-row-Desc > .druid-data {
color: #fcb5cd;
}
}

/* Template Specific Colors & Border Image.
.item-infobox:has(> div.druid-section-container > div.druid-row-) {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemBorder.png);
.druid-title {
color: #;
}
.druid-label {
color: #;
}
div.druid-data-Desc {
color: #;
}
}
*/

/* Lots of color mixing here, meant to apply to ANY item infobox */
.item-infobox {
border-style: solid;
border-image-slice: 9 63;
border-image-width: 25em 154em;
border-image-outset: 0;
border-image-repeat: stretch;
.druid-main-images-label.focused {
background: color-mix(in srgb, currentColor 25%, transparent);
box-shadow: 0 0 5px currentColor;
}
.druid-main-images-label {
background: color-mix(in srgb, currentColor 10%, transparent);
font-size: 2em;

font-weight: bold;
font-family: "Daedalus", sans-serif;
text-shadow: 0 2px color-mix(in srgb, currentColor 50%, black),
0 4px color-mix(in srgb, currentColor 30%, black),
0 6px color-mix(in srgb, currentColor 10%, black);
line-height: 1em;
padding-bottom: 0.15em;
}
.druid-main-images-label {
outline: 1px solid currentColor;
}
.druid-label {
text-align: left;
width: auto;
max-width: 40%;
color: #fcfc54;
}
/* the single-rarity selectors above match .druid-toggleable-data.focused:not(.druid-toggleable-data-empty),
so both the tabbed (image,tab) and single-image (no comma) cases get the rarity border. */
div.druid-data-Desc, div.druid-row-Desc > .druid-data {
background-color: color-mix(in srgb, currentColor 43.62%, transparent);
text-shadow: 2px 2px color-mix(in srgb, currentColor 30%, black);
font-style: italic;
margin-left: 0;
margin-right: 0;
padding: 0.6em;
font-weight: bold;
width: 100%;
box-sizing: border-box; /* keep padding inside 100% so the panel never bleeds over the border */
}
.druid-label-Damage + .druid-data {
color: #fc5454;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Shots + .druid-data {
color: #54fc54;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Cooldown + .druid-data {
color: #fc54fc;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Pierce + .druid-data {
color: #00a800;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Range + .druid-data {
color: #54fc54;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Velocity + .druid-data {
color: #00a8a8;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Attack + .druid-data {
color: #fc5454;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Defense + .druid-data {
color: #5496fc;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Speed + .druid-data {
color: #fcfc54;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Vitality + .druid-data {
color: #54fc9c;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Health + .druid-data {
color: #fc54a8;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Evasion + .druid-data {
color: #54d4fc;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Healing + .druid-data {
color: #a8fca8;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Slashes + .druid-data {
color: #fca854;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Beams + .druid-data {
color: #54fcfc;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Critical.Chance + .druid-data,
.druid-label-Critical + .druid-data {
color: #fc9c54;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-row-Ability > .druid-data {
color: #54fc54;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}
.druid-row {
background-color: rgba(0, 0, 0, 0.4362);
border-radius: 4px;
}
.druid-row-Desc {
background: none;
}
.druid-title {
text-shadow: 0 3px color-mix(in srgb, currentColor 50%, black),
0 6px color-mix(in srgb, currentColor 30%, black),
0 9px color-mix(in srgb, currentColor 10%, black);
}
}

.post-content {
display: flow-root;
margin-left: auto;
margin-right: auto;
width: 100%;
}

/* ============================================================
SHINY animated banner.
============================================================ */
.shiny-frame .item-infobox,
.item-infobox:has(.druid-toggleable-data[data-druid-tab-key="Shiny"].focused) {
position: relative;
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemShinyBorder.gif) !important;
--shiny-band-inset: 0px; /* horizontal inset so the bands clear the corner art */
--shiny-d: 0s; /* per-item start offset, set by :nth-of-type below */

/* ---- Static shiny title + description (frame stays animated) ---- */
div.druid-data-Desc, div.druid-row-Desc > .druid-data {
background:
linear-gradient(135deg, rgba(126,232,250,.14), rgba(238,192,255,.10), rgba(255,217,122,.14)),
rgba(0,0,0,.5) !important;
color: #e7f2ff !important;
}

.druid-title, .druid-main-images-label {
background: linear-gradient(135deg, #7ee8fa 0%, #eec0ff 40%, #ffd97a 75%, #7ee8fa 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
text-shadow: none !important;
filter: drop-shadow(0 2px rgba(0, 0, 0, .6));
}

}
.shiny-frame .item-infobox::before,
.shiny-frame .item-infobox::after,
.item-infobox:has(.druid-toggleable-data[data-druid-tab-key="Shiny"].focused)::before,
.item-infobox:has(.druid-toggleable-data[data-druid-tab-key="Shiny"].focused)::after {
content: "";
position: absolute;
left: var(--shiny-band-inset);
right: var(--shiny-band-inset);
height: min(340px, 50%); /* one sprite frame tall; never reaches past mid-box */
background-repeat: repeat-x; /* image set per-item by .shiny-band-N below */
background-position: left top;
background-size: auto; /* native px → true 1:1, tiles on X only */
image-rendering: pixelated;
pointer-events: none;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
z-index: 5;
animation: shiny-band-steps 2.2s steps(12) infinite;
}
.shiny-frame .item-infobox::before,
.item-infobox:has(.druid-toggleable-data[data-druid-tab-key="Shiny"].focused)::before {
top: 0;
animation-delay: var(--shiny-d);
}
.shiny-frame .item-infobox::after,
.item-infobox:has(.druid-toggleable-data[data-druid-tab-key="Shiny"].focused)::after {
content: none; /* bottom band off — the box's bottom is text (Stats/Info), no open space for stars */
}
@keyframes shiny-band-steps {
to { background-position-y: -4080px; } /* 12 frames × 340px */
}
/* one of 10 star-band layouts per item; the module hashes the item name to a class */
.item-infobox.shiny-band-1::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemShinyBand1.png); }
.item-infobox.shiny-band-2::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemShinyBand2.png); }
.item-infobox.shiny-band-3::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemShinyBand3.png); }
.item-infobox.shiny-band-4::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemShinyBand4.png); }
.item-infobox.shiny-band-5::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemShinyBand5.png); }
.item-infobox.shiny-band-6::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemShinyBand6.png); }
.item-infobox.shiny-band-7::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemShinyBand7.png); }
.item-infobox.shiny-band-8::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemShinyBand8.png); }
.item-infobox.shiny-band-9::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemShinyBand9.png); }
.item-infobox.shiny-band-10::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemShinyBand10.png); }
/* stagger the start frame per item so no two bands look alike */
.shiny-frame .item-infobox:nth-of-type(2n) { --shiny-d: -0.2s; }
.shiny-frame .item-infobox:nth-of-type(3n) { --shiny-d: -0.5s; }
.shiny-frame .item-infobox:nth-of-type(4n) { --shiny-d: -0.8s; }
.shiny-frame .item-infobox:nth-of-type(5n) { --shiny-d: -1.0s; }
.shiny-frame .item-infobox:nth-of-type(7n) { --shiny-d: -0.35s; }

/* ============================================================
RESKIN catalog theming (theme tabs on the Reskins page).
Module:Reskins wraps each reskin's infobox in
<div class="reskin-skin reskin-<theme> [cherub-band-N]">.
============================================================ */
.reskin-skin { display: contents; } /* wrapper adds classes only; no layout box */

/* Each seasonal reskin theme uses its own border frame. */
.reskin-halloween .item-infobox {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemHalloweenBorder.png) !important;
}
.reskin-valentines .item-infobox {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemValentineBorder.png) !important;
}
.reskin-christmas .item-infobox {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemChristmasBorder.png) !important;
}

/* Cherub: gold frame + white gold-falling-line band overlay (one of 5 layouts). */
.reskin-cherub .item-infobox {
position: relative;
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemCherubBorder.png) !important;
}
.reskin-cherub .item-infobox::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: min(340px, 55%);
background-repeat: repeat; /* tiles X and Y so the fall loops seamlessly */
background-position: left top;
background-size: auto;
pointer-events: none;
z-index: 5;
-webkit-mask-image:
linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent),
linear-gradient(180deg, #000 55%, transparent);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent),
linear-gradient(180deg, #000 55%, transparent);
mask-composite: intersect;
animation: cherub-fall 3s linear infinite;
}
@keyframes cherub-fall {
to { background-position-y: 340px; } /* one tile down → seamless loop */
}
.reskin-cherub.cherub-band-1 .item-infobox::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemCherubBand1.png); }
.reskin-cherub.cherub-band-2 .item-infobox::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemCherubBand2.png); animation-delay: -0.6s; }
.reskin-cherub.cherub-band-3 .item-infobox::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemCherubBand3.png); animation-delay: -1.2s; }
.reskin-cherub.cherub-band-4 .item-infobox::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemCherubBand4.png); animation-delay: -1.8s; }
.reskin-cherub.cherub-band-5 .item-infobox::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemCherubBand5.png); animation-delay: -2.4s; }

/* ============================================================
MOBILE LAYOUT FIXES
The base content paddings (.content: 0 5em; #bodyContent: 5em 3em)
are desktop-scale. On a phone they nest and leave only a sliver of
reading width. Scale them down below the wide-layout breakpoint
(the 993.3px rule above is the only other width control here).
============================================================ */
@media screen and (max-width: 992px) {
.content,
.pre-content {
padding-left: 1.5em;
padding-right: 1.5em;
}
#bodyContent {
padding: 2.5em 1.25em;
border-image-outset: 4px;
}
}

@media screen and (max-width: 720px) {
.content,
.pre-content {
padding-left: 0.4em;
padding-right: 0.4em;
box-shadow: none;
}
/* #bodyContent frame + padding are flattened in
MediaWiki:Common.css → "MOBILE — FLATTEN DECORATION" block */
}

MediaWiki:Common.js

2026-07-07T13:19:19Z

Willow: harr harr harr

/* Any JavaScript here will be loaded for all users on every page load. */

/* DRUID */
$(function () {
$(".druid-main-images-label").off("click");
$(".druid-main-images-label").click(function () {
var $parent = $(this).closest(".druid-container");
$parent.find(".druid-toggleable").removeClass("focused");
var i = $(this).attr("data-druid");
$parent.find(".druid-toggleable[data-druid=" + i + "]").addClass("focused");
});

$(".druid-collapsible").off("click");
$(".druid-collapsible").click(function () {
var kind = $(this).attr("data-druid-section");
$(this).toggleClass("druid-collapsible-collapsed");
$(this)
.closest(".druid-container")
.find("[data-druid-section-row=" + kind + "]")
.toggleClass("druid-collapsed");
});

$(".druid-container").on("click", ".worn-toggle-button", function (e) {
e.preventDefault();
e.stopPropagation();

var $btn = $(this);
var $container = $btn.closest('.has-worn-variant');
var $base = $container.find('.image-base');
var $worn = $container.find('.image-worn');

if ($container.hasClass('is-worn-active')) {
$container.removeClass('is-worn-active');
$worn.hide();
$base.show();
$btn.text('Show Worn');
} else {
$container.addClass('is-worn-active');
$base.hide();
$worn.show();
$btn.text('Show Normal');
}

console.log("Toggle state: " + ($container.hasClass('is-worn-active') ? "Worn" : "Normal"));
});
});
/* End DRUID */

/* Sound */
(function () {
let currentAudio = null;
let currentBtn = null;

$(document).on('click', '.sound-button', function () {
const $btn = $(this);
const soundUrl = $btn.data('sound-file');

if (!soundUrl) return;

if (currentAudio && currentBtn && currentBtn[0] === $btn[0]) {
if (!currentAudio.paused) {
currentAudio.pause();
currentAudio.currentTime = 0;
$btn.removeClass('playing');
return; // Stop here
}
}

if (currentAudio) {
currentAudio.pause();
currentAudio.currentTime = 0;
$('.sound-button').removeClass('playing');
}

const audio = new Audio(soundUrl);
currentAudio = audio;
currentBtn = $btn;

$btn.addClass('playing');
audio.play().catch(function(error) {
console.error("Playback failed:", error);
$btn.removeClass('playing');
});

audio.onended = function() {
$btn.removeClass('playing');
currentAudio = null;
currentBtn = null;
};
});
})();
/* End Sound */

/* [[Template:Spoiler]] */
$(function () {
$('.spoiler-content')
.off('click') // in case this code is loaded twice
.on('click', function(e){
$(this).toggleClass('show');
}).find('a').on('click', function(e){
e.stopPropagation();
});

});
/* End Template:Spoiler */

/* Link to imported modules from Lua code */
$(function() {
var config = mw.config.get([
'wgCanonicalNamespace',
'wgFormattedNamespaces'
]);
if (config.wgCanonicalNamespace !== 'Module') {
return;
}
var localizedNamespace = config.wgFormattedNamespaces[828];
$('.s1, .s2, .s').each(function() {
var $this = $(this);
var html = $this.html();
var quote = html[0];
var isLongStringQuote = quote === '[';
var quoteRE = new RegExp('^\\' + quote + '|\\' + quote + '$', 'g');
if (isLongStringQuote) {
quoteRE = /^\[\[|\]\]$/g;
}
var name = html.replace(quoteRE, '');
var isEnglishPrefix = name.startsWith('Module:');
var isLocalizedPrefix = name.startsWith(localizedNamespace + ':');
var isDevPrefix = name.startsWith('Dev:');
if (isEnglishPrefix || isLocalizedPrefix || isDevPrefix) {
var attrs = {
href: mw.util.getUrl(name)
};
if (isDevPrefix) {
attrs.href = 'https://commons.wiki.gg/wiki/Module:' + mw.util.wikiUrlencode(name.replace('Dev:', ''));
attrs.target = '_blank';
attrs.rel = 'noopener';
}
var link = mw.html.element('a', attrs, name);
var str = quote + link + quote;
if (isLongStringQuote) {
str = '[[' + link + ']]';
}
$this.html(str);
}
});
});

/* dynamic gif displayer ONLY TOUCH IF YOU KNOW WHAT YOU ARE DOING */

(function() {
'use strict';

console.log('Dynamic GIF Displayer: Script loading...');

// Configuration
const CONFIG = {
containerClass: 'dynamic-gif-container',
displayClass: 'gif-display-area',
autoExpand: true,
expandDelay: 200,
collapseDelay: 1000
};

let expandTimer = null;
let collapseTimer = null;
let currentGif = null;

function safeCreateError(message) {
const div = document.createElement('div');
div.className = 'gif-error';
div.textContent = message;
return div;
}

function safeCreatePlaceholder(message) {
const div = document.createElement('div');
div.className = 'gif-placeholder';
div.textContent = message;
return div;
}

function init() {
console.log('Dynamic GIF Displayer: Initializing...');

const containers = document.querySelectorAll('.' + CONFIG.containerClass);
console.log('Dynamic GIF Displayer: Found', containers.length, 'containers');

containers.forEach(container => {
console.log('Dynamic GIF Displayer: Setting up container', container.id);
setupContainer(container);
attachTooltipListeners(container);
});
}

function setupContainer(container) {
const displayArea = container.querySelector('.' + CONFIG.displayClass);
if (!displayArea) {
console.error('Dynamic GIF Displayer: No display area found');
return;
}

displayArea.addEventListener('mouseenter', () => {
clearTimeout(collapseTimer);
});

displayArea.addEventListener('mouseleave', () => {
scheduleCollapse(container);
});
}

function attachTooltipListeners(container) {
console.log('Dynamic GIF Displayer: Attaching tooltip listeners...');

const gifMap = buildGifMap(container);
console.log('Dynamic GIF Displayer: GIF map', gifMap);

const tooltips = document.querySelectorAll('.advanced-tooltip');
console.log('Dynamic GIF Displayer: Found', tooltips.length, 'tooltips');

tooltips.forEach((tooltip) => {
const skillTitle = tooltip.querySelector('.skill-title');
if (!skillTitle) return;

const skillName = skillTitle.textContent.trim();
const gifUrl = gifMap[skillName];

console.log('Dynamic GIF Displayer: Processing tooltip:', skillName, 'GIF:', gifUrl);

if (gifUrl) {
// Remove old listeners if they exist
if (tooltip._gifHoverHandler) {
tooltip.removeEventListener('mouseenter', tooltip._gifHoverHandler);
}
if (tooltip._gifLeaveHandler) {
tooltip.removeEventListener('mouseleave', tooltip._gifLeaveHandler);
}

tooltip._gifHoverHandler = () => handleTooltipHover(container, gifUrl, skillName);
tooltip._gifLeaveHandler = () => scheduleCollapse(container);

tooltip.addEventListener('mouseenter', tooltip._gifHoverHandler);
tooltip.addEventListener('mouseleave', tooltip._gifLeaveHandler);

console.log('Dynamic GIF Displayer: Attached listeners to', skillName);
}
});
}

function buildGifMap(container) {
const gifMap = {};
const listData = container.getAttribute('data-gif-list');

if (!listData) {
console.error('Dynamic GIF Displayer: No data-gif-list attribute found');
return gifMap;
}

console.log('Dynamic GIF Displayer: Raw list data:', listData);

const entries = listData.split(';').filter(e => e.trim());
console.log('Dynamic GIF Displayer: Found', entries.length, 'entries');

entries.forEach(entry => {
const parts = entry.split(':');
if (parts.length >= 2) {
const skillName = parts[0].trim();
const gifFile = parts.slice(1).join(':').trim();

if (skillName && gifFile) {
let gifUrl;
if (typeof mw !== 'undefined' && mw.config) {
const scriptPath = mw.config.get('wgScriptPath') || '';
gifUrl = scriptPath + '/index.php?title=Special:Redirect/file/' + encodeURIComponent(gifFile);
} else {
gifUrl = '/index.php?title=Special:Redirect/file/' + encodeURIComponent(gifFile);
}

gifMap[skillName] = gifUrl;
console.log('Dynamic GIF Displayer: Mapped "' + skillName + '" to', gifUrl);
}
}
});

return gifMap;
}

function handleTooltipHover(container, gifUrl, skillName) {
console.log('Dynamic GIF Displayer: Hovering', skillName);
clearTimeout(collapseTimer);
clearTimeout(expandTimer);

// Show GIF after delay (allows checking if different from current)
expandTimer = setTimeout(() => {
showGif(container, gifUrl, skillName);
}, CONFIG.expandDelay);
}

function showGif(container, gifUrl, skillName) {
console.log('Dynamic GIF Displayer: Showing GIF for', skillName, gifUrl);

const displayArea = container.querySelector('.' + CONFIG.displayClass);
if (!displayArea) return;

if (!container.classList.contains('expanded')) {
container.classList.add('expanded');
console.log('Dynamic GIF Displayer: Expanded container');
}

const imgContainer = displayArea.querySelector('.gif-image-container');
const caption = displayArea.querySelector('.gif-caption');

// Update caption immediately
if (caption) {
caption.textContent = skillName;
caption.style.display = 'block';
}

// Only reload if different GIF
if (currentGif === gifUrl) {
console.log('Dynamic GIF Displayer: Already showing', skillName);
return;
}

// Set currentGif IMMEDIATELY to prevent race conditions
currentGif = gifUrl;

if (imgContainer) {
const placeholder = imgContainer.querySelector('.gif-placeholder');
if (placeholder) {
placeholder.remove();
}

// Don't set dynamic height - let CSS handle fixed sizing

const gifFilename = gifUrl.split('/').pop();
const decodedFilename = decodeURIComponent(gifFilename);

if (decodedFilename.toLowerCase() === 'blank' || decodedFilename.toLowerCase() === 'blank.gif') {
imgContainer.innerHTML = '';
imgContainer.appendChild(safeCreatePlaceholder('This node does not require a GIF due to its simplicity.'));
imgContainer.classList.remove('loading');
} else {
// Cancel any existing image loads
const existingImg = imgContainer.querySelector('img');
if (existingImg) {
existingImg.onload = null;
existingImg.onerror = null;
}

imgContainer.classList.add('loading');

const img = document.createElement('img');
img.src = gifUrl;
img.alt = skillName;
// CSS handles sizing via .gif-image-container img rules

// Store reference for validation
const targetGif = gifUrl;

img.onload = () => {
// Only update if this is still the current target GIF
if (currentGif === targetGif) {
imgContainer.innerHTML = '';
imgContainer.appendChild(img);
imgContainer.classList.remove('loading');
console.log('Dynamic GIF Displayer: GIF loaded successfully');
} else {
console.log('Dynamic GIF Displayer: Discarded outdated load for', skillName);
}
};

img.onerror = () => {
// Only update if this is still the current target GIF
if (currentGif === targetGif) {
imgContainer.innerHTML = '';
imgContainer.appendChild(safeCreateError('GIF not found: ' + decodedFilename));
imgContainer.classList.remove('loading');
console.error('Dynamic GIF Displayer: Failed to load GIF', gifUrl);
}
};
}
}
}

function scheduleCollapse(container) {
// Keep the most recent GIF displayed instead of clearing it
// GIF will only change when a different skill node is hovered
clearTimeout(collapseTimer);
console.log('Dynamic GIF Displayer: Keeping current GIF displayed');
}

window.toggleGifDisplay = function(containerId) {
console.log('Dynamic GIF Displayer: Toggle clicked for', containerId);
const container = document.getElementById(containerId);
if (!container) {
console.error('Dynamic GIF Displayer: Container not found', containerId);
return;
}

clearTimeout(collapseTimer);

if (container.style.display === 'none') {
container.style.display = 'block';
} else {
container.style.display = 'none';
}

// Only clear the GIF when manually toggling the display off
if (container.style.display === 'none') {
const displayArea = container.querySelector('.' + CONFIG.displayClass);
if (displayArea) {
const imgContainer = displayArea.querySelector('.gif-image-container');
const caption = displayArea.querySelector('.gif-caption');

if (imgContainer) {
imgContainer.innerHTML = '';
imgContainer.appendChild(safeCreatePlaceholder('Hover over a skill node to see its demonstration'));
imgContainer.style.height = '';
imgContainer.style.minHeight = '';
}

if (caption) {
caption.textContent = '';
caption.style.display = 'none';
}
}

container.classList.remove('expanded');
currentGif = null;
}
};

if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}

window.addEventListener('load', init);

if (typeof mw !== 'undefined' && mw.hook) {
mw.hook('wikipage.content').add(init);
}

const observer = new MutationObserver(function(mutations) {
let shouldReinit = false;
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
mutation.addedNodes.forEach(function(node) {
if (node.nodeType === 1 && (
node.classList && node.classList.contains('advanced-tooltip') ||
node.querySelector && node.querySelector('.advanced-tooltip')
)) {
shouldReinit = true;
}
});
}
});
if (shouldReinit) {
console.log('Dynamic GIF Displayer: Content changed, reinitializing...');
setTimeout(init, 100);
}
});

observer.observe(document.body, {
childList: true,
subtree: true
});

console.log('Dynamic GIF Displayer: Script loaded');
})();

/* Make mp-links clickable anywhere in the box */
(function() {
'use strict';

function initMpLinksClick() {
const mpLinkItems = document.querySelectorAll('.mp-links > ul > li');

mpLinkItems.forEach(item => {
// Remove any existing click handler
if (item._clickHandlerAttached) return;

item.addEventListener('click', function(e) {
// Find the first anchor tag in this li
const link = this.querySelector('a');
if (link && e.target !== link) {
// Trigger a click on the link
link.click();
}
});

item._clickHandlerAttached = true;
});
}

// Initialize on page load
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initMpLinksClick);
} else {
initMpLinksClick();
}

// Reinitialize when content changes
window.addEventListener('load', initMpLinksClick);

if (typeof mw !== 'undefined' && mw.hook) {
mw.hook('wikipage.content').add(initMpLinksClick);
}

// Watch for DOM changes
const observer = new MutationObserver(function(mutations) {
let shouldReinit = false;
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
mutation.addedNodes.forEach(function(node) {
if (node.nodeType === 1 && (
node.classList && node.classList.contains('mp-links') ||
node.querySelector && node.querySelector('.mp-links')
)) {
shouldReinit = true;
}
});
}
});
if (shouldReinit) {
setTimeout(initMpLinksClick, 100);
}
});

observer.observe(document.body, {
childList: true,
subtree: true
});
})();

(function() {
'use strict';

console.log('Tab GIF Display: Script loading...');

// Configuration
const CONFIG = {
containerClass: 'tab-gif-container',
displayClass: 'tab-gif-display-area',
tabsClass: 'tab-gif-tabs',
tabClass: 'tab-gif-tab',
activeTabClass: 'tab-gif-active'
};

let currentContainers = new Map();
let initAttempts = 0;
const MAX_INIT_ATTEMPTS = 5;

function safeCreateError(message) {
const div = document.createElement('div');
div.className = 'gif-error';
div.textContent = message;
return div;
}

function safeCreatePlaceholder(message) {
const div = document.createElement('div');
div.className = 'gif-placeholder';
div.textContent = message;
return div;
}

function init() {
initAttempts++;
console.log('Tab GIF Display: Initializing... (attempt ' + initAttempts + ')');

const containers = document.querySelectorAll('.' + CONFIG.containerClass);
console.log('Tab GIF Display: Found', containers.length, 'containers');

if (containers.length === 0 && initAttempts < MAX_INIT_ATTEMPTS) {
console.log('Tab GIF Display: No containers found yet, will retry...');
setTimeout(init, 500);
return;
}

let setupCount = 0;
containers.forEach(container => {
const containerId = container.id;
console.log('Tab GIF Display: Checking container', containerId);

if (!currentContainers.has(containerId)) {
console.log('Tab GIF Display: Setting up NEW container', containerId);
const success = setupContainer(container);
if (success) {
currentContainers.set(containerId, container);
setupCount++;
}
} else {
console.log('Tab GIF Display: Container already initialized', containerId);
}
});

console.log('Tab GIF Display: Successfully set up', setupCount, 'containers');
}

function setupContainer(container) {
console.log('Tab GIF Display: setupContainer called for', container.id);

const gifMap = buildGifMap(container);
console.log('Tab GIF Display: GIF map built', gifMap);

if (Object.keys(gifMap).length === 0) {
console.error('Tab GIF Display: No GIFs found for container', container.id);
const displayArea = container.querySelector('.' + CONFIG.displayClass);
if (displayArea) {
const imgContainer = displayArea.querySelector('.gif-image-container');
if (imgContainer) {
imgContainer.innerHTML = '';
imgContainer.appendChild(safeCreateError('No GIFs configured. Check your list parameter.'));
}
}
return false;
}

createTabs(container, gifMap);

// Display the first GIF by default
const firstTabName = Object.keys(gifMap)[0];
console.log('Tab GIF Display: Showing first tab:', firstTabName);
showGif(container, gifMap[firstTabName], firstTabName);

return true;
}

function buildGifMap(container) {
const gifMap = {};
const listData = container.getAttribute('data-gif-list');

console.log('Tab GIF Display: Building map for container', container.id);
console.log('Tab GIF Display: data-gif-list attribute:', listData);

if (!listData) {
console.error('Tab GIF Display: No data-gif-list attribute found on', container.id);
return gifMap;
}

if (listData.trim() === '') {
console.error('Tab GIF Display: data-gif-list is empty on', container.id);
return gifMap;
}

const entries = listData.split(';').filter(e => e.trim());
console.log('Tab GIF Display: Found', entries.length, 'entries in list');

entries.forEach((entry, index) => {
console.log('Tab GIF Display: Processing entry', index, ':', entry);
const parts = entry.split(':');

if (parts.length < 2) {
console.warn('Tab GIF Display: Invalid entry format (no colon):', entry);
return;
}

const tabName = parts[0].trim();
const gifFile = parts.slice(1).join(':').trim();

console.log('Tab GIF Display: Parsed - Tab:', tabName, 'File:', gifFile);

if (!tabName) {
console.warn('Tab GIF Display: Empty tab name in entry:', entry);
return;
}

if (!gifFile) {
console.warn('Tab GIF Display: Empty gif file in entry:', entry);
return;
}

let gifUrl;
if (typeof mw !== 'undefined' && mw.config) {
const scriptPath = mw.config.get('wgScriptPath') || '';
gifUrl = scriptPath + '/index.php?title=Special:Redirect/file/' + encodeURIComponent(gifFile);
} else {
gifUrl = '/index.php?title=Special:Redirect/file/' + encodeURIComponent(gifFile);
}

gifMap[tabName] = gifUrl;
console.log('Tab GIF Display: Mapped "' + tabName + '" to', gifUrl);
});

console.log('Tab GIF Display: Final map has', Object.keys(gifMap).length, 'entries');
return gifMap;
}

function createTabs(container, gifMap) {
const tabsContainer = container.querySelector('.' + CONFIG.tabsClass);
if (!tabsContainer) {
console.error('Tab GIF Display: No tabs container found in', container.id);
return;
}

console.log('Tab GIF Display: Creating tabs in', container.id);

tabsContainer.innerHTML = '';

let isFirst = true;
let tabCount = 0;

Object.keys(gifMap).forEach(tabName => {
const tab = document.createElement('button');
tab.className = CONFIG.tabClass;
tab.textContent = tabName;
tab.setAttribute('data-tab-name', tabName);
tab.type = 'button';

if (isFirst) {
tab.classList.add(CONFIG.activeTabClass);
isFirst = false;
}

tab.addEventListener('click', () => {
console.log('Tab GIF Display: Tab clicked:', tabName);
handleTabClick(container, gifMap, tabName);
});

tabsContainer.appendChild(tab);
tabCount++;
console.log('Tab GIF Display: Created tab button for', tabName);
});

console.log('Tab GIF Display: Created', tabCount, 'tabs total');
}

function handleTabClick(container, gifMap, tabName) {
console.log('Tab GIF Display: Handling tab click for', tabName);

const tabs = container.querySelectorAll('.' + CONFIG.tabClass);
tabs.forEach(tab => {
if (tab.getAttribute('data-tab-name') === tabName) {
tab.classList.add(CONFIG.activeTabClass);
} else {
tab.classList.remove(CONFIG.activeTabClass);
}
});

const gifUrl = gifMap[tabName];
showGif(container, gifUrl, tabName);
}

function showGif(container, gifUrl, tabName) {
console.log('Tab GIF Display: Showing GIF for', tabName, '-', gifUrl);

const displayArea = container.querySelector('.' + CONFIG.displayClass);
if (!displayArea) {
console.error('Tab GIF Display: No display area found');
return;
}

const rawSize = container.getAttribute('data-gif-size') || '400';
const gifSize = rawSize.replace(/[^0-9]/g, '') || '400';

const imgContainer = displayArea.querySelector('.gif-image-container');
const caption = displayArea.querySelector('.gif-caption');

if (imgContainer) {
const placeholder = imgContainer.querySelector('.gif-placeholder');
if (placeholder) {
placeholder.remove();
}

imgContainer.style.height = gifSize + 'px';
imgContainer.style.minHeight = gifSize + 'px';

const gifFilename = gifUrl.split('/').pop();
const decodedFilename = decodeURIComponent(gifFilename);

if (decodedFilename.toLowerCase() === 'blank' || decodedFilename.toLowerCase() === 'blank.gif') {
imgContainer.innerHTML = '';
imgContainer.appendChild(safeCreatePlaceholder('No GIF available for this tab.'));
imgContainer.classList.remove('loading');
} else {
const oldImg = imgContainer.querySelector('img');

const img = document.createElement('img');
img.src = gifUrl;
img.alt = tabName;
img.style.maxHeight = gifSize + 'px';
img.style.opacity = '0';
img.style.position = 'absolute';
img.style.transition = 'opacity 0.2s ease';

img.onload = () => {
if (oldImg) {
oldImg.style.transition = 'opacity 0.15s ease';
oldImg.style.opacity = '0';
setTimeout(() => {
imgContainer.innerHTML = '';
img.style.position = 'relative';
img.style.opacity = '1';
imgContainer.appendChild(img);
imgContainer.classList.remove('loading');
}, 150);
} else {
imgContainer.innerHTML = '';
img.style.position = 'relative';
img.style.opacity = '1';
imgContainer.appendChild(img);
imgContainer.classList.remove('loading');
}
console.log('Tab GIF Display: GIF loaded successfully');
};

img.onerror = () => {
imgContainer.innerHTML = '';
imgContainer.appendChild(safeCreateError('GIF not found: ' + decodedFilename));
imgContainer.classList.remove('loading');
console.error('Tab GIF Display: Failed to load GIF', gifUrl);
};

if (!oldImg) {
imgContainer.appendChild(img);
imgContainer.classList.add('loading');
}
}
}

if (caption) {
caption.textContent = tabName;
caption.style.display = 'block';
}
}

window.toggleTabGifDisplay = function(containerId) {
console.log('Tab GIF Display: Toggle clicked for', containerId);
const container = document.getElementById(containerId);
if (!container) {
console.error('Tab GIF Display: Container not found', containerId);
return;
}

if (container.style.display === 'none') {
container.style.display = 'block';
} else {
container.style.display = 'none';
}
};

if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}

window.addEventListener('load', init);

if (typeof mw !== 'undefined' && mw.hook) {
mw.hook('wikipage.content').add(init);
}

const observer = new MutationObserver(function(mutations) {
let shouldReinit = false;
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
mutation.addedNodes.forEach(function(node) {
if (node.nodeType === 1 && (
node.classList && node.classList.contains(CONFIG.containerClass) ||
node.querySelector && node.querySelector('.' + CONFIG.containerClass)
)) {
shouldReinit = true;
}
});
}
});
if (shouldReinit) {
console.log('Tab GIF Display: Content changed, reinitializing...');
setTimeout(init, 100);
}
});

observer.observe(document.body, {
childList: true,
subtree: true
});

console.log('Tab GIF Display: Script loaded and ready');
})();

(function () {
const images = [
'url(/wiki/Special:Redirect/file/Site-background-image.jpg)',
'url(/wiki/Special:Redirect/file/Site-background-image2.jpg)',
'url(/wiki/Special:Redirect/file/Site-background-image3.jpg)',
'url(/wiki/Special:Redirect/file/Site-background-image4.jpg)',
'url(/wiki/Special:Redirect/file/Site-background-image5.jpg)',
];
function seededRandom(seed) {
let x = Math.sin(seed * 9999) * 10000;
return x - Math.floor(x);
}
const day = new Date().getDate();
const pick1 = Math.floor(seededRandom(day) * images.length);
let pick2 = Math.floor(seededRandom(day + 1) * images.length);
if (pick2 === pick1) {
pick2 = (pick1 + 1) % images.length;
}
document.body.style.backgroundImage = images[pick1];
const footer = document.querySelector('.mw-footer');
if (footer) {
footer.style.backgroundImage = images[pick2];
}
})();

/* Archives main page: whole-card navigation.
Clicking anywhere on a record card or directive follows its title link;
clicks on actual links (sublinks, icons) are left alone. */
(function () {
'use strict';
document.addEventListener('click', function (e) {
var card = e.target.closest('.ar-card, .ar-directive');
if (!card || e.target.closest('a')) return;
var link = card.querySelector('.ar-card-titles a, .ar-directive-title a') || card.querySelector('a');
if (link) link.click();
});
})();

(function () {
'use strict';

function fullSizeUrl(img) {
var src = img.currentSrc || img.src;
var m = src.match(/^(.*)\/thumb\/(.+)\/[0-9]+px-[^\/]+$/);
return m ? (m[1] + '/' + m[2]) : src;
}

function captionFor(img) {
var thumb = img.closest('.thumb');
if (thumb) {
var tc = thumb.querySelector('.thumbcaption');
if (tc) return tc.textContent.trim();
}
var inl = img.closest('.inline-image-template');
if (inl) {
var ic = inl.querySelector('.inline-image-caption');
if (ic) return ic.textContent.trim();
}
return '';
}

function overlay() {
var el = document.querySelector('.nx-lightbox-overlay');
if (el) return el;
el = document.createElement('div');
el.className = 'nx-lightbox-overlay';
el.innerHTML = '<span class="nx-lightbox-close">×</span><img alt="">' +
'<div class="nx-lightbox-caption"></div>';
document.body.appendChild(el);
el.addEventListener('click', function (e) {
if (e.target === el || e.target.classList.contains('nx-lightbox-close')) {
close();
}
});
return el;
}

function close() {
var el = document.querySelector('.nx-lightbox-overlay');
if (el) el.classList.remove('active');
}

document.addEventListener('keydown', function (e) {
if (e.key === 'Escape') close();
});

document.addEventListener('click', function (e) {
var img = e.target.closest('.nexus-page .thumb img, .nexus-page .inline-image-image img');
if (!img) return;
e.preventDefault();
var el = overlay();
el.querySelector('img').src = fullSizeUrl(img);
el.querySelector('.nx-lightbox-caption').textContent = captionFor(img);
el.classList.add('active');
});
})();

File:Site-background-image5.jpg

2026-07-07T13:16:19Z

Willow:

MediaWiki:Common.js

2026-07-07T13:11:19Z

Willow: whats the chance this breaks everything?

/* Any JavaScript here will be loaded for all users on every page load. */

/* DRUID */
$(function () {
$(".druid-main-images-label").off("click");
$(".druid-main-images-label").click(function () {
var $parent = $(this).closest(".druid-container");
$parent.find(".druid-toggleable").removeClass("focused");
var i = $(this).attr("data-druid");
$parent.find(".druid-toggleable[data-druid=" + i + "]").addClass("focused");
});

$(".druid-collapsible").off("click");
$(".druid-collapsible").click(function () {
var kind = $(this).attr("data-druid-section");
$(this).toggleClass("druid-collapsible-collapsed");
$(this)
.closest(".druid-container")
.find("[data-druid-section-row=" + kind + "]")
.toggleClass("druid-collapsed");
});

$(".druid-container").on("click", ".worn-toggle-button", function (e) {
e.preventDefault();
e.stopPropagation();

var $btn = $(this);
var $container = $btn.closest('.has-worn-variant');
var $base = $container.find('.image-base');
var $worn = $container.find('.image-worn');

if ($container.hasClass('is-worn-active')) {
$container.removeClass('is-worn-active');
$worn.hide();
$base.show();
$btn.text('Show Worn');
} else {
$container.addClass('is-worn-active');
$base.hide();
$worn.show();
$btn.text('Show Normal');
}

console.log("Toggle state: " + ($container.hasClass('is-worn-active') ? "Worn" : "Normal"));
});
});
/* End DRUID */

/* Sound */
(function () {
let currentAudio = null;
let currentBtn = null;

$(document).on('click', '.sound-button', function () {
const $btn = $(this);
const soundUrl = $btn.data('sound-file');

if (!soundUrl) return;

if (currentAudio && currentBtn && currentBtn[0] === $btn[0]) {
if (!currentAudio.paused) {
currentAudio.pause();
currentAudio.currentTime = 0;
$btn.removeClass('playing');
return; // Stop here
}
}

if (currentAudio) {
currentAudio.pause();
currentAudio.currentTime = 0;
$('.sound-button').removeClass('playing');
}

const audio = new Audio(soundUrl);
currentAudio = audio;
currentBtn = $btn;

$btn.addClass('playing');
audio.play().catch(function(error) {
console.error("Playback failed:", error);
$btn.removeClass('playing');
});

audio.onended = function() {
$btn.removeClass('playing');
currentAudio = null;
currentBtn = null;
};
});
})();
/* End Sound */

/* [[Template:Spoiler]] */
$(function () {
$('.spoiler-content')
.off('click') // in case this code is loaded twice
.on('click', function(e){
$(this).toggleClass('show');
}).find('a').on('click', function(e){
e.stopPropagation();
});

});
/* End Template:Spoiler */

/* Link to imported modules from Lua code */
$(function() {
var config = mw.config.get([
'wgCanonicalNamespace',
'wgFormattedNamespaces'
]);
if (config.wgCanonicalNamespace !== 'Module') {
return;
}
var localizedNamespace = config.wgFormattedNamespaces[828];
$('.s1, .s2, .s').each(function() {
var $this = $(this);
var html = $this.html();
var quote = html[0];
var isLongStringQuote = quote === '[';
var quoteRE = new RegExp('^\\' + quote + '|\\' + quote + '$', 'g');
if (isLongStringQuote) {
quoteRE = /^\[\[|\]\]$/g;
}
var name = html.replace(quoteRE, '');
var isEnglishPrefix = name.startsWith('Module:');
var isLocalizedPrefix = name.startsWith(localizedNamespace + ':');
var isDevPrefix = name.startsWith('Dev:');
if (isEnglishPrefix || isLocalizedPrefix || isDevPrefix) {
var attrs = {
href: mw.util.getUrl(name)
};
if (isDevPrefix) {
attrs.href = 'https://commons.wiki.gg/wiki/Module:' + mw.util.wikiUrlencode(name.replace('Dev:', ''));
attrs.target = '_blank';
attrs.rel = 'noopener';
}
var link = mw.html.element('a', attrs, name);
var str = quote + link + quote;
if (isLongStringQuote) {
str = '[[' + link + ']]';
}
$this.html(str);
}
});
});

/* dynamic gif displayer ONLY TOUCH IF YOU KNOW WHAT YOU ARE DOING */

(function() {
'use strict';

console.log('Dynamic GIF Displayer: Script loading...');

// Configuration
const CONFIG = {
containerClass: 'dynamic-gif-container',
displayClass: 'gif-display-area',
autoExpand: true,
expandDelay: 200,
collapseDelay: 1000
};

let expandTimer = null;
let collapseTimer = null;
let currentGif = null;

function safeCreateError(message) {
const div = document.createElement('div');
div.className = 'gif-error';
div.textContent = message;
return div;
}

function safeCreatePlaceholder(message) {
const div = document.createElement('div');
div.className = 'gif-placeholder';
div.textContent = message;
return div;
}

function init() {
console.log('Dynamic GIF Displayer: Initializing...');

const containers = document.querySelectorAll('.' + CONFIG.containerClass);
console.log('Dynamic GIF Displayer: Found', containers.length, 'containers');

containers.forEach(container => {
console.log('Dynamic GIF Displayer: Setting up container', container.id);
setupContainer(container);
attachTooltipListeners(container);
});
}

function setupContainer(container) {
const displayArea = container.querySelector('.' + CONFIG.displayClass);
if (!displayArea) {
console.error('Dynamic GIF Displayer: No display area found');
return;
}

displayArea.addEventListener('mouseenter', () => {
clearTimeout(collapseTimer);
});

displayArea.addEventListener('mouseleave', () => {
scheduleCollapse(container);
});
}

function attachTooltipListeners(container) {
console.log('Dynamic GIF Displayer: Attaching tooltip listeners...');

const gifMap = buildGifMap(container);
console.log('Dynamic GIF Displayer: GIF map', gifMap);

const tooltips = document.querySelectorAll('.advanced-tooltip');
console.log('Dynamic GIF Displayer: Found', tooltips.length, 'tooltips');

tooltips.forEach((tooltip) => {
const skillTitle = tooltip.querySelector('.skill-title');
if (!skillTitle) return;

const skillName = skillTitle.textContent.trim();
const gifUrl = gifMap[skillName];

console.log('Dynamic GIF Displayer: Processing tooltip:', skillName, 'GIF:', gifUrl);

if (gifUrl) {
// Remove old listeners if they exist
if (tooltip._gifHoverHandler) {
tooltip.removeEventListener('mouseenter', tooltip._gifHoverHandler);
}
if (tooltip._gifLeaveHandler) {
tooltip.removeEventListener('mouseleave', tooltip._gifLeaveHandler);
}

tooltip._gifHoverHandler = () => handleTooltipHover(container, gifUrl, skillName);
tooltip._gifLeaveHandler = () => scheduleCollapse(container);

tooltip.addEventListener('mouseenter', tooltip._gifHoverHandler);
tooltip.addEventListener('mouseleave', tooltip._gifLeaveHandler);

console.log('Dynamic GIF Displayer: Attached listeners to', skillName);
}
});
}

function buildGifMap(container) {
const gifMap = {};
const listData = container.getAttribute('data-gif-list');

if (!listData) {
console.error('Dynamic GIF Displayer: No data-gif-list attribute found');
return gifMap;
}

console.log('Dynamic GIF Displayer: Raw list data:', listData);

const entries = listData.split(';').filter(e => e.trim());
console.log('Dynamic GIF Displayer: Found', entries.length, 'entries');

entries.forEach(entry => {
const parts = entry.split(':');
if (parts.length >= 2) {
const skillName = parts[0].trim();
const gifFile = parts.slice(1).join(':').trim();

if (skillName && gifFile) {
let gifUrl;
if (typeof mw !== 'undefined' && mw.config) {
const scriptPath = mw.config.get('wgScriptPath') || '';
gifUrl = scriptPath + '/index.php?title=Special:Redirect/file/' + encodeURIComponent(gifFile);
} else {
gifUrl = '/index.php?title=Special:Redirect/file/' + encodeURIComponent(gifFile);
}

gifMap[skillName] = gifUrl;
console.log('Dynamic GIF Displayer: Mapped "' + skillName + '" to', gifUrl);
}
}
});

return gifMap;
}

function handleTooltipHover(container, gifUrl, skillName) {
console.log('Dynamic GIF Displayer: Hovering', skillName);
clearTimeout(collapseTimer);
clearTimeout(expandTimer);

// Show GIF after delay (allows checking if different from current)
expandTimer = setTimeout(() => {
showGif(container, gifUrl, skillName);
}, CONFIG.expandDelay);
}

function showGif(container, gifUrl, skillName) {
console.log('Dynamic GIF Displayer: Showing GIF for', skillName, gifUrl);

const displayArea = container.querySelector('.' + CONFIG.displayClass);
if (!displayArea) return;

if (!container.classList.contains('expanded')) {
container.classList.add('expanded');
console.log('Dynamic GIF Displayer: Expanded container');
}

const imgContainer = displayArea.querySelector('.gif-image-container');
const caption = displayArea.querySelector('.gif-caption');

// Update caption immediately
if (caption) {
caption.textContent = skillName;
caption.style.display = 'block';
}

// Only reload if different GIF
if (currentGif === gifUrl) {
console.log('Dynamic GIF Displayer: Already showing', skillName);
return;
}

// Set currentGif IMMEDIATELY to prevent race conditions
currentGif = gifUrl;

if (imgContainer) {
const placeholder = imgContainer.querySelector('.gif-placeholder');
if (placeholder) {
placeholder.remove();
}

// Don't set dynamic height - let CSS handle fixed sizing

const gifFilename = gifUrl.split('/').pop();
const decodedFilename = decodeURIComponent(gifFilename);

if (decodedFilename.toLowerCase() === 'blank' || decodedFilename.toLowerCase() === 'blank.gif') {
imgContainer.innerHTML = '';
imgContainer.appendChild(safeCreatePlaceholder('This node does not require a GIF due to its simplicity.'));
imgContainer.classList.remove('loading');
} else {
// Cancel any existing image loads
const existingImg = imgContainer.querySelector('img');
if (existingImg) {
existingImg.onload = null;
existingImg.onerror = null;
}

imgContainer.classList.add('loading');

const img = document.createElement('img');
img.src = gifUrl;
img.alt = skillName;
// CSS handles sizing via .gif-image-container img rules

// Store reference for validation
const targetGif = gifUrl;

img.onload = () => {
// Only update if this is still the current target GIF
if (currentGif === targetGif) {
imgContainer.innerHTML = '';
imgContainer.appendChild(img);
imgContainer.classList.remove('loading');
console.log('Dynamic GIF Displayer: GIF loaded successfully');
} else {
console.log('Dynamic GIF Displayer: Discarded outdated load for', skillName);
}
};

img.onerror = () => {
// Only update if this is still the current target GIF
if (currentGif === targetGif) {
imgContainer.innerHTML = '';
imgContainer.appendChild(safeCreateError('GIF not found: ' + decodedFilename));
imgContainer.classList.remove('loading');
console.error('Dynamic GIF Displayer: Failed to load GIF', gifUrl);
}
};
}
}
}

function scheduleCollapse(container) {
// Keep the most recent GIF displayed instead of clearing it
// GIF will only change when a different skill node is hovered
clearTimeout(collapseTimer);
console.log('Dynamic GIF Displayer: Keeping current GIF displayed');
}

window.toggleGifDisplay = function(containerId) {
console.log('Dynamic GIF Displayer: Toggle clicked for', containerId);
const container = document.getElementById(containerId);
if (!container) {
console.error('Dynamic GIF Displayer: Container not found', containerId);
return;
}

clearTimeout(collapseTimer);

if (container.style.display === 'none') {
container.style.display = 'block';
} else {
container.style.display = 'none';
}

// Only clear the GIF when manually toggling the display off
if (container.style.display === 'none') {
const displayArea = container.querySelector('.' + CONFIG.displayClass);
if (displayArea) {
const imgContainer = displayArea.querySelector('.gif-image-container');
const caption = displayArea.querySelector('.gif-caption');

if (imgContainer) {
imgContainer.innerHTML = '';
imgContainer.appendChild(safeCreatePlaceholder('Hover over a skill node to see its demonstration'));
imgContainer.style.height = '';
imgContainer.style.minHeight = '';
}

if (caption) {
caption.textContent = '';
caption.style.display = 'none';
}
}

container.classList.remove('expanded');
currentGif = null;
}
};

if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}

window.addEventListener('load', init);

if (typeof mw !== 'undefined' && mw.hook) {
mw.hook('wikipage.content').add(init);
}

const observer = new MutationObserver(function(mutations) {
let shouldReinit = false;
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
mutation.addedNodes.forEach(function(node) {
if (node.nodeType === 1 && (
node.classList && node.classList.contains('advanced-tooltip') ||
node.querySelector && node.querySelector('.advanced-tooltip')
)) {
shouldReinit = true;
}
});
}
});
if (shouldReinit) {
console.log('Dynamic GIF Displayer: Content changed, reinitializing...');
setTimeout(init, 100);
}
});

observer.observe(document.body, {
childList: true,
subtree: true
});

console.log('Dynamic GIF Displayer: Script loaded');
})();

/* Make mp-links clickable anywhere in the box */
(function() {
'use strict';

function initMpLinksClick() {
const mpLinkItems = document.querySelectorAll('.mp-links > ul > li');

mpLinkItems.forEach(item => {
// Remove any existing click handler
if (item._clickHandlerAttached) return;

item.addEventListener('click', function(e) {
// Find the first anchor tag in this li
const link = this.querySelector('a');
if (link && e.target !== link) {
// Trigger a click on the link
link.click();
}
});

item._clickHandlerAttached = true;
});
}

// Initialize on page load
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initMpLinksClick);
} else {
initMpLinksClick();
}

// Reinitialize when content changes
window.addEventListener('load', initMpLinksClick);

if (typeof mw !== 'undefined' && mw.hook) {
mw.hook('wikipage.content').add(initMpLinksClick);
}

// Watch for DOM changes
const observer = new MutationObserver(function(mutations) {
let shouldReinit = false;
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
mutation.addedNodes.forEach(function(node) {
if (node.nodeType === 1 && (
node.classList && node.classList.contains('mp-links') ||
node.querySelector && node.querySelector('.mp-links')
)) {
shouldReinit = true;
}
});
}
});
if (shouldReinit) {
setTimeout(initMpLinksClick, 100);
}
});

observer.observe(document.body, {
childList: true,
subtree: true
});
})();

(function() {
'use strict';

console.log('Tab GIF Display: Script loading...');

// Configuration
const CONFIG = {
containerClass: 'tab-gif-container',
displayClass: 'tab-gif-display-area',
tabsClass: 'tab-gif-tabs',
tabClass: 'tab-gif-tab',
activeTabClass: 'tab-gif-active'
};

let currentContainers = new Map();
let initAttempts = 0;
const MAX_INIT_ATTEMPTS = 5;

function safeCreateError(message) {
const div = document.createElement('div');
div.className = 'gif-error';
div.textContent = message;
return div;
}

function safeCreatePlaceholder(message) {
const div = document.createElement('div');
div.className = 'gif-placeholder';
div.textContent = message;
return div;
}

function init() {
initAttempts++;
console.log('Tab GIF Display: Initializing... (attempt ' + initAttempts + ')');

const containers = document.querySelectorAll('.' + CONFIG.containerClass);
console.log('Tab GIF Display: Found', containers.length, 'containers');

if (containers.length === 0 && initAttempts < MAX_INIT_ATTEMPTS) {
console.log('Tab GIF Display: No containers found yet, will retry...');
setTimeout(init, 500);
return;
}

let setupCount = 0;
containers.forEach(container => {
const containerId = container.id;
console.log('Tab GIF Display: Checking container', containerId);

if (!currentContainers.has(containerId)) {
console.log('Tab GIF Display: Setting up NEW container', containerId);
const success = setupContainer(container);
if (success) {
currentContainers.set(containerId, container);
setupCount++;
}
} else {
console.log('Tab GIF Display: Container already initialized', containerId);
}
});

console.log('Tab GIF Display: Successfully set up', setupCount, 'containers');
}

function setupContainer(container) {
console.log('Tab GIF Display: setupContainer called for', container.id);

const gifMap = buildGifMap(container);
console.log('Tab GIF Display: GIF map built', gifMap);

if (Object.keys(gifMap).length === 0) {
console.error('Tab GIF Display: No GIFs found for container', container.id);
const displayArea = container.querySelector('.' + CONFIG.displayClass);
if (displayArea) {
const imgContainer = displayArea.querySelector('.gif-image-container');
if (imgContainer) {
imgContainer.innerHTML = '';
imgContainer.appendChild(safeCreateError('No GIFs configured. Check your list parameter.'));
}
}
return false;
}

createTabs(container, gifMap);

// Display the first GIF by default
const firstTabName = Object.keys(gifMap)[0];
console.log('Tab GIF Display: Showing first tab:', firstTabName);
showGif(container, gifMap[firstTabName], firstTabName);

return true;
}

function buildGifMap(container) {
const gifMap = {};
const listData = container.getAttribute('data-gif-list');

console.log('Tab GIF Display: Building map for container', container.id);
console.log('Tab GIF Display: data-gif-list attribute:', listData);

if (!listData) {
console.error('Tab GIF Display: No data-gif-list attribute found on', container.id);
return gifMap;
}

if (listData.trim() === '') {
console.error('Tab GIF Display: data-gif-list is empty on', container.id);
return gifMap;
}

const entries = listData.split(';').filter(e => e.trim());
console.log('Tab GIF Display: Found', entries.length, 'entries in list');

entries.forEach((entry, index) => {
console.log('Tab GIF Display: Processing entry', index, ':', entry);
const parts = entry.split(':');

if (parts.length < 2) {
console.warn('Tab GIF Display: Invalid entry format (no colon):', entry);
return;
}

const tabName = parts[0].trim();
const gifFile = parts.slice(1).join(':').trim();

console.log('Tab GIF Display: Parsed - Tab:', tabName, 'File:', gifFile);

if (!tabName) {
console.warn('Tab GIF Display: Empty tab name in entry:', entry);
return;
}

if (!gifFile) {
console.warn('Tab GIF Display: Empty gif file in entry:', entry);
return;
}

let gifUrl;
if (typeof mw !== 'undefined' && mw.config) {
const scriptPath = mw.config.get('wgScriptPath') || '';
gifUrl = scriptPath + '/index.php?title=Special:Redirect/file/' + encodeURIComponent(gifFile);
} else {
gifUrl = '/index.php?title=Special:Redirect/file/' + encodeURIComponent(gifFile);
}

gifMap[tabName] = gifUrl;
console.log('Tab GIF Display: Mapped "' + tabName + '" to', gifUrl);
});

console.log('Tab GIF Display: Final map has', Object.keys(gifMap).length, 'entries');
return gifMap;
}

function createTabs(container, gifMap) {
const tabsContainer = container.querySelector('.' + CONFIG.tabsClass);
if (!tabsContainer) {
console.error('Tab GIF Display: No tabs container found in', container.id);
return;
}

console.log('Tab GIF Display: Creating tabs in', container.id);

tabsContainer.innerHTML = '';

let isFirst = true;
let tabCount = 0;

Object.keys(gifMap).forEach(tabName => {
const tab = document.createElement('button');
tab.className = CONFIG.tabClass;
tab.textContent = tabName;
tab.setAttribute('data-tab-name', tabName);
tab.type = 'button';

if (isFirst) {
tab.classList.add(CONFIG.activeTabClass);
isFirst = false;
}

tab.addEventListener('click', () => {
console.log('Tab GIF Display: Tab clicked:', tabName);
handleTabClick(container, gifMap, tabName);
});

tabsContainer.appendChild(tab);
tabCount++;
console.log('Tab GIF Display: Created tab button for', tabName);
});

console.log('Tab GIF Display: Created', tabCount, 'tabs total');
}

function handleTabClick(container, gifMap, tabName) {
console.log('Tab GIF Display: Handling tab click for', tabName);

const tabs = container.querySelectorAll('.' + CONFIG.tabClass);
tabs.forEach(tab => {
if (tab.getAttribute('data-tab-name') === tabName) {
tab.classList.add(CONFIG.activeTabClass);
} else {
tab.classList.remove(CONFIG.activeTabClass);
}
});

const gifUrl = gifMap[tabName];
showGif(container, gifUrl, tabName);
}

function showGif(container, gifUrl, tabName) {
console.log('Tab GIF Display: Showing GIF for', tabName, '-', gifUrl);

const displayArea = container.querySelector('.' + CONFIG.displayClass);
if (!displayArea) {
console.error('Tab GIF Display: No display area found');
return;
}

const rawSize = container.getAttribute('data-gif-size') || '400';
const gifSize = rawSize.replace(/[^0-9]/g, '') || '400';

const imgContainer = displayArea.querySelector('.gif-image-container');
const caption = displayArea.querySelector('.gif-caption');

if (imgContainer) {
const placeholder = imgContainer.querySelector('.gif-placeholder');
if (placeholder) {
placeholder.remove();
}

imgContainer.style.height = gifSize + 'px';
imgContainer.style.minHeight = gifSize + 'px';

const gifFilename = gifUrl.split('/').pop();
const decodedFilename = decodeURIComponent(gifFilename);

if (decodedFilename.toLowerCase() === 'blank' || decodedFilename.toLowerCase() === 'blank.gif') {
imgContainer.innerHTML = '';
imgContainer.appendChild(safeCreatePlaceholder('No GIF available for this tab.'));
imgContainer.classList.remove('loading');
} else {
const oldImg = imgContainer.querySelector('img');

const img = document.createElement('img');
img.src = gifUrl;
img.alt = tabName;
img.style.maxHeight = gifSize + 'px';
img.style.opacity = '0';
img.style.position = 'absolute';
img.style.transition = 'opacity 0.2s ease';

img.onload = () => {
if (oldImg) {
oldImg.style.transition = 'opacity 0.15s ease';
oldImg.style.opacity = '0';
setTimeout(() => {
imgContainer.innerHTML = '';
img.style.position = 'relative';
img.style.opacity = '1';
imgContainer.appendChild(img);
imgContainer.classList.remove('loading');
}, 150);
} else {
imgContainer.innerHTML = '';
img.style.position = 'relative';
img.style.opacity = '1';
imgContainer.appendChild(img);
imgContainer.classList.remove('loading');
}
console.log('Tab GIF Display: GIF loaded successfully');
};

img.onerror = () => {
imgContainer.innerHTML = '';
imgContainer.appendChild(safeCreateError('GIF not found: ' + decodedFilename));
imgContainer.classList.remove('loading');
console.error('Tab GIF Display: Failed to load GIF', gifUrl);
};

if (!oldImg) {
imgContainer.appendChild(img);
imgContainer.classList.add('loading');
}
}
}

if (caption) {
caption.textContent = tabName;
caption.style.display = 'block';
}
}

window.toggleTabGifDisplay = function(containerId) {
console.log('Tab GIF Display: Toggle clicked for', containerId);
const container = document.getElementById(containerId);
if (!container) {
console.error('Tab GIF Display: Container not found', containerId);
return;
}

if (container.style.display === 'none') {
container.style.display = 'block';
} else {
container.style.display = 'none';
}
};

if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}

window.addEventListener('load', init);

if (typeof mw !== 'undefined' && mw.hook) {
mw.hook('wikipage.content').add(init);
}

const observer = new MutationObserver(function(mutations) {
let shouldReinit = false;
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
mutation.addedNodes.forEach(function(node) {
if (node.nodeType === 1 && (
node.classList && node.classList.contains(CONFIG.containerClass) ||
node.querySelector && node.querySelector('.' + CONFIG.containerClass)
)) {
shouldReinit = true;
}
});
}
});
if (shouldReinit) {
console.log('Tab GIF Display: Content changed, reinitializing...');
setTimeout(init, 100);
}
});

observer.observe(document.body, {
childList: true,
subtree: true
});

console.log('Tab GIF Display: Script loaded and ready');
})();

(function () {
const images = [
'url(/wiki/Special:Redirect/file/Site-background-image.jpg)',
'url(/wiki/Special:Redirect/file/Site-background-image2.jpg)',
'url(/wiki/Special:Redirect/file/Site-background-image3.jpg)',
'url(/wiki/Special:Redirect/file/Site-background-image4.jpg)',
];
function seededRandom(seed) {
let x = Math.sin(seed * 9999) * 10000;
return x - Math.floor(x);
}
const day = new Date().getDate();
const pick1 = Math.floor(seededRandom(day) * images.length);
let pick2 = Math.floor(seededRandom(day + 1) * images.length);
if (pick2 === pick1) {
pick2 = (pick1 + 1) % images.length;
}
document.body.style.backgroundImage = images[pick1];
const footer = document.querySelector('.mw-footer');
if (footer) {
footer.style.backgroundImage = images[pick2];
}
})();

/* Archives main page: whole-card navigation.
Clicking anywhere on a record card or directive follows its title link;
clicks on actual links (sublinks, icons) are left alone. */
(function () {
'use strict';
document.addEventListener('click', function (e) {
var card = e.target.closest('.ar-card, .ar-directive');
if (!card || e.target.closest('a')) return;
var link = card.querySelector('.ar-card-titles a, .ar-directive-title a') || card.querySelector('a');
if (link) link.click();
});
})();

(function () {
'use strict';

function fullSizeUrl(img) {
var src = img.currentSrc || img.src;
var m = src.match(/^(.*)\/thumb\/(.+)\/[0-9]+px-[^\/]+$/);
return m ? (m[1] + '/' + m[2]) : src;
}

function captionFor(img) {
var thumb = img.closest('.thumb');
if (thumb) {
var tc = thumb.querySelector('.thumbcaption');
if (tc) return tc.textContent.trim();
}
var inl = img.closest('.inline-image-template');
if (inl) {
var ic = inl.querySelector('.inline-image-caption');
if (ic) return ic.textContent.trim();
}
return '';
}

function overlay() {
var el = document.querySelector('.nx-lightbox-overlay');
if (el) return el;
el = document.createElement('div');
el.className = 'nx-lightbox-overlay';
el.innerHTML = '<span class="nx-lightbox-close">×</span><img alt="">' +
'<div class="nx-lightbox-caption"></div>';
document.body.appendChild(el);
el.addEventListener('click', function (e) {
if (e.target === el || e.target.classList.contains('nx-lightbox-close')) {
close();
}
});
return el;
}

function close() {
var el = document.querySelector('.nx-lightbox-overlay');
if (el) el.classList.remove('active');
}

document.addEventListener('keydown', function (e) {
if (e.key === 'Escape') close();
});

document.addEventListener('click', function (e) {
var img = e.target.closest('.nexus-page .thumb img, .nexus-page .inline-image-image img');
if (!img) return;
e.preventDefault();
var el = overlay();
el.querySelector('img').src = fullSizeUrl(img);
el.querySelector('.nx-lightbox-caption').textContent = captionFor(img);
el.classList.add('active');
});
})();

File:ShinyUt-LightningSabatons.png

2026-07-07T12:38:49Z

Willow:

== Licensing ==
{{License|game}}

File:ShinyUt-FeathersOfTheSeraph.png

2026-07-07T12:38:49Z

Willow:

== Licensing ==
{{License|game}}

File:ShinyUt-AsteroidStaff.png

2026-07-07T12:38:49Z

Willow:

== Licensing ==
{{License|game}}

Stats

2026-07-02T14:04:49Z

Willow:

<div class="hoverbox">
== Stats Data ==
Each character within Telos Realms has 10 stats which impact how they interact with the game in many aspects. These are split into 2 types; normal stats and unique stats.

'''Normal Stats''' are stats which can be altered through [[Transcendence]], [[Armours]], or joining [[Game_Mechanics#Guilds|Guilds]]. Some examples of these stats are Health, Vitality, & Attack. The rest are listed below. Each class can increase their base normal stats by [[Transcendence|transcending]].

'''Unique Stats''' are stats which are not altered through [[Armours]], but rather only from the final stages of [[Transcendence]] or by gathering all [[Pets]] or [[Mounts]]. Critical damage can never be altered.
</div>

<div class="hoverbox">
== Loot ==
Every piece of equipment in Telos Realms gives a unique pairing of stats which allows for different gameplay styles by prioritizing different stats.

Discover these pieces of equipment in the [[Loot]] page under the [[Armours]] tab.
</div>

<div class="hoverbox">
<div class="mp-box centered-content stats-table" id="mp-box-links">
== Normal Stats ==
{| class="wikitable tr-stats-table"
! Stat !! Effect !! Details
|-
| '''Attack''' || Increases total damage dealt. ||
Attack modifies the total damage dealt by the player from all sources (weapons, abilities, pets, other damaging effects). It has exponentially diminishing return, meaning it has less effect at higher values.
<br /><br />'''Formula:'''
<div style="font-size:150%;"><math>Attack\ Increase\ Percentage = \left(\frac{0.5 \times Attack}{50 + 0.2 \times Attack}\right) \times 100\%</math></div>
|-
| '''Health''' || Raises maximum HP. ||
Health sets the player's maximum health. Each point of Health adds +1 to max HP. At 0 Health stat, the player's HP is 20. At 5 Health stat, the player's HP would be 25.
<br /><br />'''Formula for Effective HP (no Evasion):'''
<div style="font-size:150%;"><math>Effective\ Health\ Points = \frac{Health + 20}{1 - \frac{Defence}{Defence + 100}}</math></div>
<br />'''Formula for Average Effective HP (with Evasion):'''
<div style="font-size:150%;"><math>Effective\ Health\ Points = \frac{\frac{Health + 20}{1 - \frac{Defence}{Defence + 100}}}{1 - \frac{Evasion}{Evasion + 75}}</math></div>
|-
| '''Vitality''' || Improves HP regeneration rate. ||
Vitality modifies the speed of natural healing. Each point of Vitality increases healing by +0.02 HP/s additively, and the player has 0.1 HP/s at 0 Vitality. For example, at 30 Vitality, natural region would be +0.7 HP/s (0.1 HP/s from natural regeneration, +0.6 HP/s from the 30 Vitality).

<br />'''Formula:'''
<div style="font-size:150%;"><math>Time\ to\ Regenerate\ all\ of\ HP\ = \frac{Health + 20}{\frac{Vitality + 5}{50}}</math></div>
|-
| '''Speed''' || Increases movement speed. ||
Speed modifies the total movement speed the player moves at. Each point of Speed increases the movement speed by +0.8% additively. For example: at 125 speed, the player will move at double speed; at 250 speed, the player will move at triple speed.
|-
| '''Evasion''' || Chance to fully dodge an attack. ||
Evasion gives a chance to negate incoming damage entirely (dodge). Evasion gives exponentially diminishing returns, meaning it has less effect at higher values.

<br />'''Formula:'''
<div style="font-size:150%;"><math>Evasion\ Chance\ Percentage = \left(\frac{Evasion}{Evasion + 75}\right) \times 100\%</math></div>
</div>
|-
| '''Defence''' || Reduces incoming damage. ||
Defence reduces damage taken from all sources and has exponentially diminishing returns, meaning it has less effect at higher values.

<br />'''Formula:'''
<div style="font-size:150%;"><math>Damage\ Reduction\ Percentage = \left(1 - \frac{100}{Defense + 100}\right) \times 100\%</math></div>
|-
| '''Critical Chance''' || Chance to deal critical (increased) damage. ||
Critical Chance modifes the probability to land a critical (increased damage) hit. It has exponentially diminishing return, meaning it has less effect at higher values.<br /><br />'''Formula:'''
<div style="font-size:150%;"><math>Critical\ Chance\ Percentage = \left(\frac{0.5 \times Crit}{50 + 0.2 \times Crit}\right) \times 100\%</math></div>
|}
</div>
</div>

<div class="mp-box centered-content stats-unique" id="mp-box-links">
==Unique Stats==
{| class="wikitable tr-stats-table"
! Stat !! Effect !! Details
|-
| '''Critical Damage''' || Boosts critical damage multiplier. || This stat modifies the critical damage multiplier that is applied to your attacks when you land a critical hit. It has exponentially diminishing returns, meaning it has less effect at higher values.
<br />'''Formula:'''
<div style="font-size:150%;"><math>Total\ Damage = Damage \times \left(1 + \frac{0.5 \times Critical\ Damage}{50 + 0.2 \times Critical\ Damage}\right)</math></div>
|-
| '''Loot Boost''' || Increases drop chances. || This stat modifies your chances for dropping items, and you can increase it by:
<ul>
<li>Through [[Transcendence|transcending]]. Transcendence gives you +1 Loot Boost at level 5 and 9, as well as +2 Loot Boost at level 10.</li>
<li>Unlocking all [[Pets|pets]], which will give +10 Loot Boost.</li>
<li>Completing the [[Dailies|daily]], which will give up to +10 Loot Boost (seasonal characters only) for a platinum completion.</li>
</ul>
The maximum amount of Loot Boost that can be obtained is +44% on Seasonal Characters.
<br/><br />'''Formula:'''
<div style="font-size:150%;"><math>Final\ Loot\ Chance = Loot\ Chance\ \times \frac{Loot\ Boost+100}{100}</math></div>
|-
| '''Fame Boost''' || Increases fame gain. ||
This stat modifies the amount of fame you gain from killing enemies, and you can increase it by:
<ul>
<li>Through [[Transcendence|transcending]] all classes. This will give you +20 Fame Boost.</li>
<li>Unlocking all [[Mounts|mounts]], which will give +20 Fame Boost.</li>
<li>Fame Day gives another +25 Fame Boost, however this is not shown.</li>
</ul>
<br />'''Formula:'''
<div style="font-size:150%;"><math>Total\ Fame = Fame\ \times \frac{Fame\ Boost+100}{100}</math></div>
|}
</div>
</div>

<div class="hoverbox">
<div class="mp-box centered-content" id="mp-box-basestats">
== Max Base Class Stats ==
{| class="wikitable tr-stats-table"
! Class !! Attack !! Health !! Vitality !! Speed !! Evasion !! Defence !! Critical Chance !! Critical Damage
|-
| '''[[Knight]]''' || 7.5 || 11 || 15 || 5 || 5 || 16 || 7.5 || 40%
|-
| '''[[Samurai]]''' || 8.5 || 10 || 10 || 25 || 7.5 || 12.5 || 10 || 50%
|-
| '''[[Assassin]]''' || 15 || 7.5 || 7.5 || 15 || 10 || 10 || 10 || 55%
|-
| '''[[Huntress]]''' || 10 || 7.5 || 7.5 || 15 || 10 || 7.5 || 12.5 || 50%
|-
| '''[[Necromancer]]''' || 12.5 || 7.5 || 7.5 || 10 || 5 || 7.5 || 10 || 40%
|-
| '''[[Arcanist]]''' || 12.5 || 7.5 || 10 || 10 || 7.5 || 10 || 7.5 || 65%
|}
</div>
</div>

Stats

2026-07-02T14:03:08Z

Willow: update

<div class="hoverbox">
== Stats Data ==
Each character within Telos Realms has 10 stats which impact how they interact with the game in many aspects. These are split into 2 types; normal stats and unique stats.

'''Normal Stats''' are stats which can be altered through [[Transcendence]], [[Armours]], [[Runes]], or joining [[Game_Mechanics#Guilds|Guilds]]. Some examples of these stats are Health, Vitality, & Attack. The rest are listed below. Each class can increase their base normal stats by [[Transcendence|transcending]].

'''Unique Stats''' are stats which are not altered through [[Armours]] or [[Runes]], but rather only from the final stages of [[Transcendence]] or by gathering all [[Pets]] or [[Mounts]]. Critical damage can never be altered.
</div>

<div class="hoverbox">
== Loot ==
Every piece of equipment in Telos Realms gives a unique pairing of stats which allows for different gameplay styles by prioritizing different stats.

Discover these pieces of equipment in the [[Loot]] page under the [[Armours]] or [[Runes]] tab.
</div>

<div class="hoverbox">
<div class="mp-box centered-content stats-table" id="mp-box-links">
== Normal Stats ==
{| class="wikitable tr-stats-table"
! Stat !! Effect !! Details
|-
| '''Attack''' || Increases total damage dealt. ||
Attack modifies the total damage dealt by the player from all sources (weapons, abilities, pets, other damaging effects). It has exponentially diminishing return, meaning it has less effect at higher values.
<br /><br />'''Formula:'''
<div style="font-size:150%;"><math>Attack\ Increase\ Percentage = \left(\frac{0.5 \times Attack}{50 + 0.2 \times Attack}\right) \times 100\%</math></div>
|-
| '''Health''' || Raises maximum HP. ||
Health sets the player's maximum health. Each point of Health adds +1 to max HP. At 0 Health stat, the player's HP is 20. At 5 Health stat, the player's HP would be 25.
<br /><br />'''Formula for Effective HP (no Evasion):'''
<div style="font-size:150%;"><math>Effective\ Health\ Points = \frac{Health + 20}{1 - \frac{Defence}{Defence + 100}}</math></div>
<br />'''Formula for Average Effective HP (with Evasion):'''
<div style="font-size:150%;"><math>Effective\ Health\ Points = \frac{\frac{Health + 20}{1 - \frac{Defence}{Defence + 100}}}{1 - \frac{Evasion}{Evasion + 75}}</math></div>
|-
| '''Vitality''' || Improves HP regeneration rate. ||
Vitality modifies the speed of natural healing. Each point of Vitality increases healing by +0.02 HP/s additively, and the player has 0.1 HP/s at 0 Vitality. For example, at 30 Vitality, natural region would be +0.7 HP/s (0.1 HP/s from natural regeneration, +0.6 HP/s from the 30 Vitality).

<br />'''Formula:'''
<div style="font-size:150%;"><math>Time\ to\ Regenerate\ all\ of\ HP\ = \frac{Health + 20}{\frac{Vitality + 5}{50}}</math></div>
|-
| '''Speed''' || Increases movement speed. ||
Speed modifies the total movement speed the player moves at. Each point of Speed increases the movement speed by +0.8% additively. For example: at 125 speed, the player will move at double speed; at 250 speed, the player will move at triple speed.
|-
| '''Evasion''' || Chance to fully dodge an attack. ||
Evasion gives a chance to negate incoming damage entirely (dodge). Evasion gives exponentially diminishing returns, meaning it has less effect at higher values.

<br />'''Formula:'''
<div style="font-size:150%;"><math>Evasion\ Chance\ Percentage = \left(\frac{Evasion}{Evasion + 75}\right) \times 100\%</math></div>
</div>
|-
| '''Defence''' || Reduces incoming damage. ||
Defence reduces damage taken from all sources and has exponentially diminishing returns, meaning it has less effect at higher values.

<br />'''Formula:'''
<div style="font-size:150%;"><math>Damage\ Reduction\ Percentage = \left(1 - \frac{100}{Defense + 100}\right) \times 100\%</math></div>
|-
| '''Critical Chance''' || Chance to deal critical (increased) damage. ||
Critical Chance modifes the probability to land a critical (increased damage) hit. It has exponentially diminishing return, meaning it has less effect at higher values.<br /><br />'''Formula:'''
<div style="font-size:150%;"><math>Critical\ Chance\ Percentage = \left(\frac{0.5 \times Crit}{50 + 0.2 \times Crit}\right) \times 100\%</math></div>
|}
</div>
</div>

<div class="mp-box centered-content stats-unique" id="mp-box-links">
==Unique Stats==
{| class="wikitable tr-stats-table"
! Stat !! Effect !! Details
|-
| '''Critical Damage''' || Boosts critical damage multiplier. || This stat modifies the critical damage multiplier that is applied to your attacks when you land a critical hit. It has exponentially diminishing returns, meaning it has less effect at higher values.
<br />'''Formula:'''
<div style="font-size:150%;"><math>Total\ Damage = Damage \times \left(1 + \frac{0.5 \times Critical\ Damage}{50 + 0.2 \times Critical\ Damage}\right)</math></div>
|-
| '''Loot Boost''' || Increases drop chances. || This stat modifies your chances for dropping items, and you can increase it by:
<ul>
<li>Through [[Transcendence|transcending]]. Transcendence gives you +1 Loot Boost at level 5 and 9, as well as +2 Loot Boost at level 10.</li>
<li>Unlocking all [[Pets|pets]], which will give +10 Loot Boost.</li>
<li>Completing the [[Dailies|daily]], which will give up to +10 Loot Boost (seasonal characters only) for a platinum completion.</li>
</ul>
The maximum amount of Loot Boost that can be obtained is +44% on Seasonal Characters.
<br/><br />'''Formula:'''
<div style="font-size:150%;"><math>Final\ Loot\ Chance = Loot\ Chance\ \times \frac{Loot\ Boost+100}{100}</math></div>
|-
| '''Fame Boost''' || Increases fame gain. ||
This stat modifies the amount of fame you gain from killing enemies, and you can increase it by:
<ul>
<li>Through [[Transcendence|transcending]] all classes. This will give you +20 Fame Boost.</li>
<li>Unlocking all [[Mounts|mounts]], which will give +20 Fame Boost.</li>
<li>Fame Day gives another +25 Fame Boost, however this is not shown.</li>
</ul>
<br />'''Formula:'''
<div style="font-size:150%;"><math>Total\ Fame = Fame\ \times \frac{Fame\ Boost+100}{100}</math></div>
|}
</div>
</div>

<div class="hoverbox">
<div class="mp-box centered-content" id="mp-box-basestats">
== Max Base Class Stats ==
{| class="wikitable tr-stats-table"
! Class !! Attack !! Health !! Vitality !! Speed !! Evasion !! Defence !! Critical Chance !! Critical Damage
|-
| '''[[Knight]]''' || 7.5 || 11 || 15 || 5 || 5 || 16 || 7.5 || 40%
|-
| '''[[Samurai]]''' || 8.5 || 10 || 10 || 25 || 7.5 || 12.5 || 10 || 50%
|-
| '''[[Assassin]]''' || 15 || 7.5 || 7.5 || 15 || 10 || 10 || 10 || 55%
|-
| '''[[Huntress]]''' || 10 || 7.5 || 7.5 || 15 || 10 || 7.5 || 12.5 || 50%
|-
| '''[[Necromancer]]''' || 12.5 || 7.5 || 7.5 || 10 || 5 || 7.5 || 10 || 40%
|-
| '''[[Arcanist]]''' || 12.5 || 7.5 || 10 || 10 || 7.5 || 10 || 7.5 || 65%
|}
</div>
</div>

MediaWiki:Minerva.css

2026-07-02T10:06:16Z

Willow: DEATH AND DESTRUCTION

/* CSS placed here will be applied to all skins */

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');
@font-face {
font-family: "Outfit";
src: url("/fonts/Outfit.ttf") format("truetype");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Daedalus";
src: url("/fonts/000webfont.ttf") format("truetype");
}
:root,
.view-dark {
--content-link-color: #ffc05f;
--content-border-color: #feffe5;
--heading-font-family: "Daedalus", sans-serif;
--body-font-family: "Outfit", sans-serif;
--accent-link-color: #22214d;
--content-link-label-color: #0b101b;
}

:root{
--is-top-logo: 1;
--logo-file-width: 160;
--logo-file-height: 160;
--logo-height: calc(var(--logo-file-height)*1px);
--logo-margin: 15px;
--is-navigation-inside-content: 0;
}

/*****************************
* Sound *
******************************/
.sound-button,.sound-button a,.sound-button a.image,.sound-button img {
background: none !important;
background-color: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
text-decoration: none !important;
padding: 0 !important;
margin: 0 !important
}

.sound-button img {
filter: invert(93%) sepia(5%) saturate(782%) hue-rotate(151deg) brightness(96%) contrast(89%);
transition: filter 0.2s ease-in-out;
display: inline-block !important;
vertical-align: middle;
margin: 0 !important;
}

.sound-button {
cursor: pointer;
display: inline-block !important;
vertical-align: middle;
margin: 0 2px !important;
line-height: 1;
white-space: nowrap;
}

.sound-button:hover img,.sound-button.playing img {
filter: invert(93%) sepia(5%) saturate(782%) hue-rotate(151deg) brightness(115%) contrast(100%) drop-shadow(0 0 2px rgba(201,225,230,0.7))
}

.sound-button a:hover,.sound-button a:focus {
background: none !important;
border: none !important
}
/*****************************
* End Sound *
******************************/

/*****************************
* PortableInfoboxes *
******************************/
:root {
image-rendering: pixelated !important;
--pi-background: var(--background-color-base);
--pi-secondary-background: var(--color-progressive);
--pi-secondary-background-label: var(--content-link-label-color);
--pi-border-color: color-mix(in srgb, var(--color-progressive) 50%, transparent);
}

.portable-infobox .pi-title,
.portable-infobox .pi-header {
text-align:center;
font-size:1.5em;
background: color-mix(in srgb, var(--color-progressive) 75%, transparent);
color:var(--pi-secondary-background-label);
}

.portable-infobox .pi-data {
background: color-mix(in srgb, var(--color-progressive) 18%, transparent);
font-size: 115%;
word-wrap: normal;
}

.miniboss-box .portable-infobox {
box-shadow: 3px 3px 6px var(--content-border-color);
}

.portable-infobox .pi-image {
padding: 8px;
}

.pi-image-thumbnail {
max-width:100%;
}

.pi-section-navigation .pi-section-tab.pi-section-active,
.pi-section-navigation .pi-section-tab.current,
.pi-media-collection .pi-tab-link.current {
background: var(--pi-secondary-background);
color: var(--pi-secondary-background-label);
}

.mw-body .portable-infobox h2,
.mw-body .portable-infobox h3 {
text-shadow: 0 0 5px var(--color-progressive);
border-bottom: 0;
font-family: var(--heading-font-family);
font-weight: 550;
margin: 0;
word-wrap: normal;
}

.mw-body .portable-infobox {
border-radius:5px;
border-image-source: var(--border-image-base);
border-image-slice: 15 16;
border-image-width: 15px;
border-image-repeat: stretch;
}

.mw-body .portable-infobox h3 {
font-size: 80%;
font-weight: 500;
}
/*****************************
* End PortableInfoboxes *
******************************/

/** as of Module:navbox version 1.2.2 **/

/*********************************************************************************************************************
* Semantically-correct horizontal lists (for Module:Navbox, and they're more machine-readable than {{*}}-formatting) *
**********************************************************************************************************************/
.hlist dl,
.hlist ol,
.hlist ul {
margin: 0;
padding: 0;
}

/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
/*
* don't trust the note that says margin doesn't work with inline
* removing margin: 0 makes dds have margins again
* We also want to reset margin-right in Minerva
*/
margin: 0;
display: inline;
}

/* Display requested top-level lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
/* Display nested lists 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;
}

/* Hide empty list items */
.hlist .mw-empty-li {
display: none;
}

/* TODO: :not() can maybe be used here to remove the later rule. naive test
* seems to work. more testing needed. like so: */
.hlist dt:not(:last-child)::after {
content: ":\20";
}
.hlist dd:not(:last-child)::after,
.hlist li:not(:last-child)::after {
/* "space, Middle Dot, space"
We use unicode numbers instead of the raw characters due to a Firefox encoding bug on unicode characters.
The space is also encoded because raw spaces combined with a unicode number strips the spaces under some conditions such as single-line lists */
/* content: "\20\00B7\20"; font-weight: bold; */
/* "space   •   space"
There may (and likely) be an extra whitespace between <li>s,
therefore we have to use a space character as last character of this sequence.
By this way, the last space and the next whitespce will collapse as a single space,
to make the whitespace on both sides of the middle dot the same width.
*/
content: "\20\A0\2022\A0\20";
font-weight: inherit;
}

/* Add parentheses around nested lists */
.hlist dd ol::before,
.hlist dd ul::before,
.hlist dd dl::before,
.hlist dt ol::before,
.hlist dt ul::before,
.hlist dt dl::before,
.hlist li ol::before,
.hlist li ul::before,
.hlist li dl::before {
content: "\20(";
font-weight: inherit;
}

.hlist dd ol::after,
.hlist dd ul::after,
.hlist dd dl::after,
.hlist dt ol::after,
.hlist dt ul::after,
.hlist dt dl::after,
.hlist li ol::after,
.hlist li ul::after,
.hlist li dl::after {
content: ")";
font-weight: inherit;
}

/* Put ordinals in front of ordered list items */
.hlist ol {
counter-reset: listitem;
}

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

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

/* Progressive enhancement:
* try to make the dot always follow the list item in same line
*/
.hlist :is(li,dt,dd):not(:has(:is(li,dt,dd))){
display: inline-block;
}

/********************************************
* End semantically-correct horizontal lists *
*********************************************/

/**********************************************************
* Template:Navbox (RANGER) (needs semantic horizontal lists above) *
***********************************************************/
.ranger-navbox{
--navbox-background: none;
--navbox-margin: 0.5em auto;
--navbox-padding: 4px;
--navbox-gap: 3px;
--navbox-outer-border-color: color-mix(in srgb, var(--color-progressive) 50%, transparent);
--navbox-outer-border-width: 1px;
--navbox-outer-border-style: solid;
--navbox-outer-border-radius: 0px;
--navbox-font-size: calc(1em - 2px);
--navbox-title-color: var(--content-link-label-color);
--navbox-title-font-size: calc(125%);
--navbox-title-background: var(--color-progressive);
--navbox-title-icon-color: var(--content-link-label-color);
--navbox-title-link-color: var(--navbox-title-color);
--navbox-title-link-color--visited: var(--navbox-title-link-color);
--navbox-title-link-color--hover: var(--accent-link-color);
--navbox-title-redlink-color: var(--navbox-title-link-color);
--navbox-title-link-decoration: underline solid;
--navbox-title-redlink-decoration: underline wavy;
--navbox-title-padding--y: 0.5em;
--navbox-above-background: color-mix(in srgb, var(--color-base) 15%, transparent);
--navbox-above-color: var(--color-base);
--navbox-above-padding: var(--navbox-list-padding);
--navbox-below-background: var(--navbox-above-background);
--navbox-below-color: var(--navbox-above-color);
--navbox-below-padding: var(--navbox-above-padding);
--navbox-header-color: var(--navbox-title-color);
--navbox-header-font-size: calc(110%);
--navbox-header-background: var(--navbox-title-background);
--navbox-header-icon-color: var(--navbox-title-icon-color);
--navbox-header-link-color: var(--navbox-title-link-color);
--navbox-header-link-color--visited: var(--navbox-title-link-color--visited);
--navbox-header-link-color--hover: var(--navbox-title-link-color--hover);
--navbox-header-redlink-color: var(--navbox-title-redlink-color);
--navbox-header-link-decoration: var(--navbox-title-link-decoration);
--navbox-header-redlink-decoration: var(--navbox-title-redlink-decoration);
--navbox-header-padding--y: 0.3em;
--navbox-subheader-font-size: calc(100%);
--navbox-subheader-padding--y: calc(var(--navbox-header-padding--y)/2);
--navbox-list-background: color-mix(in srgb, var(--color-base) 5%, transparent);
--navbox-list-background--striped: color-mix(in srgb, var(--color-base) 8%, transparent);
--navbox-list-color: var(--color-base);
--navbox-list-padding: 0.25em 0.5em;
--navbox-group-text-align: left;
--navbox-group-text-align--mobile: left;
--navbox-group-background: color-mix(in srgb, var(--color-progressive) 20%, transparent);
--navbox-group-color: var(--color-base);
--navbox-group-padding: var(--navbox-list-padding);
--navbox-tree-line-color: color-mix(in srgb, var(--color-progressive) 30%, transparent);
--navbox-tree-line-width: 2px;
--navbox-tree-indent: 1em;
--navbox-tree-line-indent: 0.5em;
--navbox-tree-line-spacing: var(--navbox-gap);
--icon-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-up' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M6 15l6 -6l6 6'%3E%3C/path%3E%3C/svg%3E");
--icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-down' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M6 9l6 6l6 -6'%3E%3C/path%3E%3C/svg%3E");
--icon-metalinks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-edit' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1'%3E%3C/path%3E%3Cpath d='M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z'%3E%3C/path%3E%3Cpath d='M16 5l3 3'%3E%3C/path%3E%3C/svg%3E");
--navbox-icon-offset--x: 0.5rem; /* should be an absolute length (rem-based or px-based) */
}
.ranger-navbox.pill,
.ranger-navbox.pill-mobile{
--navbox-pill-gap: 0.3em;
--navbox-pill-padding: 0.25em 0.75em;
--navbox-pill-border-radius: 3px;
--navbox-pill-box-shadow: none;
--navbox-pill-background: color-mix(in srgb, var(--color-base) 5%, transparent);
--navbox-pill-box-shadow--hover: inset 0 0 3px var(--navbox-list-color);
--navbox-pill-background--hover: var(--navbox-pill-background);
--navbox-list-background: none;
--navbox-list-background--striped: color-mix(in srgb, var(--color-base) 3%, transparent);
}
.ranger-navbox.no-underline-title-links{
--navbox-title-link-color: var(--accent-link-color);
--navbox-title-link-decoration: none;
--navbox-title-redlink-decoration: none;
}
.ranger-navbox.noborder,
.ranger-navbox.no-border{
--navbox-padding: 0px;
--navbox-outer-border-width: 0px;
}

/******************************
* Fallback for older browsers *
*******************************/
@supports not (color:color-mix(in srgb, #000, transparent)) {
.ranger-navbox {
--navbox-above-background: var(--background-color-neutral-subtle);
--navbox-list-background: transparent;
--navbox-list-background--striped: var(--background-color-neutral-subtle);
--navbox-group-background: var(--background-color-neutral-subtle);
--navbox-tree-line-color: var(--background-color-neutral-subtle);
}
.ranger-navbox.pill,
.ranger-navbox.pill-mobile {
--navbox-pill-background: var(--background-color-neutral-subtle);
--navbox-list-background--striped: transparent;
}
}
/***************
* End fallback *
****************/

.ranger-navbox{
border-color: var(--navbox-outer-border-color);
border-style: var(--navbox-outer-border-style);
border-width: var(--navbox-outer-border-width);
border-radius: var(--navbox-outer-border-radius);
padding: var(--navbox-padding);
font-size: var(--navbox-font-size);
margin: var(--navbox-margin);
background: var(--navbox-background);
line-height: 1.5;
clear:both;
}

.ranger-navbox * {
border: 0;
}
.ranger-navbox .center *{
margin-left: unset;
margin-right: unset;
}
.ranger-navbox,
.ranger-navbox .ranger-section,
.ranger-navbox .ranger-listbox{
display: flex;
flex-direction: column;
gap: var(--navbox-gap);
}
.ranger-navbox .ranger-title,
.ranger-navbox .ranger-header{
text-align: center;
min-height: 1.5em;
position: relative;
z-index: 0;
font-weight: bold;
}
.ranger-navbox .ranger-title{
color: var(--navbox-title-color);
background: var(--navbox-title-background);
font-size: var(--navbox-title-font-size);
padding: var(--navbox-title-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */
}
.ranger-navbox .ranger-title a,
.ranger-navbox .ranger-title a:visited,
.ranger-navbox .ranger-title a:hover,
.ranger-navbox .ranger-title a.external,
.ranger-navbox .ranger-title a.external:visited,
.ranger-navbox .ranger-title a.external:hover {
text-decoration: var(--navbox-title-link-decoration);
}
.ranger-navbox .ranger-title a.new,
.ranger-navbox .ranger-title a.new:visited {
text-decoration: var(--navbox-title-redlink-decoration);
}
.ranger-navbox .ranger-title a,
.ranger-navbox .ranger-title a.external,
.ranger-navbox .ranger-title a.external:visited {
color: var(--navbox-title-link-color);
}
.ranger-navbox .ranger-title a:visited{
color: var(--navbox-title-link-color--visited);
}
.ranger-navbox .ranger-title a.new,
.ranger-navbox .ranger-title a.new:visited{
color:var(--navbox-title-redlink-color);
}
.ranger-navbox .ranger-title a:hover,
.ranger-navbox .ranger-title a:visited:hover,
.ranger-navbox .ranger-title a.external:hover,
.ranger-navbox .ranger-title a.external:visited:hover {
color:var(--navbox-title-link-color--hover);
}
.ranger-navbox .ranger-header{
color: var(--navbox-header-color);
background: var(--navbox-header-background);
font-size: var(--navbox-header-font-size);
padding: var(--navbox-header-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */
}
.ranger-navbox .ranger-sublist .ranger-header{
font-size: var(--navbox-subheader-font-size);
padding: var(--navbox-subheader-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */
}
.ranger-navbox .ranger-header a,
.ranger-navbox .ranger-header a:visited,
.ranger-navbox .ranger-header a:hover,
.ranger-navbox .ranger-header a.external,
.ranger-navbox .ranger-header a.external:visited,
.ranger-navbox .ranger-header a.external:hover {
text-decoration: var(--navbox-header-link-decoration);
}
.ranger-navbox .ranger-header a.new,
.ranger-navbox .ranger-header a.new:visited {
text-decoration: var(--navbox-header-redlink-decoration);
}
.ranger-navbox .ranger-header a,
.ranger-navbox .ranger-header a.external,
.ranger-navbox .ranger-header a.external:visited {
color: var(--navbox-header-link-color);
}
.ranger-navbox .ranger-header a:visited{
color: var(--navbox-header-link-color--visited);
}
.ranger-navbox .ranger-header a.new,
.ranger-navbox .ranger-header a.new:visited{
color:var(--navbox-header-redlink-color);
}
.ranger-navbox .ranger-header a:hover,
.ranger-navbox .ranger-header a:visited:hover,
.ranger-navbox .ranger-header a.external:hover,
.ranger-navbox .ranger-header a.external:visited:hover {
color:var(--navbox-header-link-color--hover);
}
.ranger-navbox .ranger-meta{
font-size: var(--navbox-title-font-size);
position: absolute;
left: var(--navbox-icon-offset--x);
top: calc(var(--navbox-title-padding--y) + 0.08em); /* 0.08em: vertial offset tweak based on the icon graph */
display: block;
}
.ranger-navbox .ranger-meta .nv{
--mask: var(--icon-metalinks);
display: block;
width: 0.84em; /* based on the icon graph */
height: 0.84em;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center center;
mask-position: center center;
background-color: var(--navbox-title-icon-color);
}
.ranger-navbox .ranger-meta .nv > a{
display: block;
width: 100%;
height: 100%;
opacity: 0;
}
.ranger-navbox .ranger-meta .nv > a > span{
display: block;
width: 100%;
height: 100%;
overflow: hidden;
}
.ranger-navbox .ranger-meta:has(.mw-selflink){
display: none;
}
.ranger-navbox,
.ranger-navbox .ranger-section{
position: relative;
}
.ranger .mw-collapsible-toggle-placeholder{
display: none;
}
.ranger-navbox .ranger-title > .ranger-title-text,
.ranger-navbox .ranger-header > .ranger-header-text{
pointer-events: none;
}
.ranger-navbox .ranger-title > .ranger-title-text a,
.ranger-navbox .ranger-header > .ranger-header-text a{
pointer-events: auto;
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle,
.ranger-navbox .ranger-header > .mw-collapsible-toggle{
--mask: var(--icon-chevron-down);
position: absolute;
right: 0;
top: 0;
z-index: -1;
display: block;
width: 100%;
height: 100%;
overflow:hidden;
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle,
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle{
width: 1.5em;
height: 1.5em;
right: var(--navbox-icon-offset--x);
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle{
top: var(--navbox-title-padding--y);
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle{
top: var(--navbox-header-padding--y);
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-sublist .ranger-header > .mw-collapsible-toggle{
top: var(--navbox-subheader-padding--y);
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle::before,
.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
content: "";
display: block;
width: 1.5em;
height: 1.5em;
position: absolute;
right: var(--navbox-icon-offset--x);
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center center;
mask-position: center center;
background-color: var(--navbox-title-icon-color);
transform: scaleY(-1);
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle::before{
top: var(--navbox-title-padding--y);
}
.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
top: var(--navbox-header-padding--y);
}
.ranger-navbox .ranger-sublist .ranger-header > .mw-collapsible-toggle::before{
top: var(--navbox-subheader-padding--y);
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle::before,
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle::before{
top: 0;
right: 0;
}
.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
background-color: var(--navbox-header-icon-color);
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before,
.ranger-navbox .ranger-header > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before{
transform: none;
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle *,
.ranger-navbox .ranger-title > .mw-collapsible-toggle::after,
.ranger-navbox .ranger-header > .mw-collapsible-toggle *,
.ranger-navbox .ranger-header > .mw-collapsible-toggle::after{
display: none;
}
.ranger-navbox .ranger-list{
width: unset;
padding: var(--navbox-list-padding);
}
.ranger-navbox .ranger-above{
background: var(--navbox-above-background);
color: var(--navbox-above-color);
padding: var(--navbox-above-padding);
width: unset;
}
.ranger-navbox .ranger-below{
background: var(--navbox-below-background);
color: var(--navbox-below-color);
padding: var(--navbox-below-padding);
width: unset;
}
.ranger-navbox .ranger-sublist{
display: flex;
flex-direction: column;
gap: var(--navbox-gap);
}
.ranger-navbox .ranger-section-body{
display: grid;
gap: var(--navbox-gap);
grid-template-columns: auto minmax(0,1fr);
}
/* gap fix for collapsed content */
.ranger-navbox [class^="ranger-"][hidden="until-found"]{
margin-top: calc(0px - var(--navbox-gap)) !important;
}
.ranger-navbox .ranger-row{
display: contents;
}
.ranger-navbox .ranger-group,
.ranger-navbox .ranger-subgroup{
text-align: var(--navbox-group-text-align);
white-space: nowrap;
font-weight: bold;
background: var(--navbox-group-background);
color: var(--navbox-group-color);
padding: var(--navbox-group-padding);
width: unset;
}
/* for desktop view */
.ranger-navbox.group-align-left .ranger-group,
.ranger-navbox.group-align-left .ranger-subgroup{
--navbox-group-text-align: left;
}
.ranger-navbox.group-align-center .ranger-group,
.ranger-navbox.group-align-center .ranger-subgroup{
--navbox-group-text-align: center;
}
.ranger-navbox.group-align-right .ranger-group,
.ranger-navbox.group-align-right .ranger-subgroup{
--navbox-group-text-align: right;
}
/* for mobile view */
.ranger-navbox.mobile-group-align-left .ranger-group,
.ranger-navbox.mobile-group-align-left .ranger-subgroup{
--navbox-group-text-align--mobile: left;
}

.ranger-navbox.mobile-group-align-center .ranger-group,
.ranger-navbox.mobile-group-align-center .ranger-subgroup{
--navbox-group-text-align--mobile: center;
}

.ranger-navbox.mobile-group-align-right .ranger-group,
.ranger-navbox.mobile-group-align-right .ranger-subgroup{
--navbox-group-text-align--mobile: right;
}

.ranger-navbox .ranger-listbox > .ranger-wrap{
background: var(--navbox-list-background);
color: var(--navbox-list-color);
flex-grow: 1;
}
.ranger-navbox .ranger-sublist{
flex-grow: var(--count);
}
.ranger-navbox .ranger-listbox:first-child{ /* A list-n without group-n */
grid-column-end: span 2;
}
.ranger-navbox .ranger-group,
.ranger-navbox .ranger-subgroup,
.ranger-navbox .ranger-listbox > .ranger-wrap{
display: grid;
justify-items: stretch;
align-items: center;
}
.ranger-navbox.striped-even .ranger-even,
.ranger-navbox.striped-odd .ranger-odd{
background: var(--navbox-list-background--striped);
}
/* make links use full line height (larger click box)*/
.ranger-navbox .hlist a{
display: inline-block;
}

.ranger-navbox .align-left,
.ranger-navbox .alignleft{
text-align: left;
}
.ranger-navbox .align-center,
.ranger-navbox .aligncenter{
text-align: center;
}
.ranger-navbox .align-right,
.ranger-navbox .alignright{
text-align: right;
}

/* responsive */
@media screen and (max-width: 720px) {
.ranger-navbox .ranger-section-body,
.ranger-navbox .ranger-sublist {
display: flex;
flex-flow: column;
}
.ranger-navbox .ranger-row{
display: block;
}
.ranger-navbox .ranger-group + .ranger-listbox > .ranger-sublist:first-child,
.ranger-navbox .ranger-subgroup + .ranger-listbox > .ranger-sublist:first-child{
margin-top: var(--navbox-gap);
}
.ranger-navbox .ranger-listbox.empty{
display: none;
}
.ranger-navbox .ranger-group,
.ranger-navbox .ranger-subgroup{
text-align: var(--navbox-group-text-align--mobile);
white-space: normal;
}

.ranger-navbox .ranger-sublist {
padding-left: var(--navbox-tree-indent);
margin-left: var(--navbox-tree-line-indent);
}
.ranger-navbox .ranger-subgroup,
.ranger-navbox .ranger-listbox {
position:relative;
}
.ranger-navbox .ranger-group br,
.ranger-navbox .ranger-subgroup br{
display: none;
}
.ranger-navbox .ranger-sublist > .ranger-section > .ranger-header{
margin-left: calc( 0px - var(--navbox-tree-indent) - var(--navbox-tree-line-indent));
}
.ranger-navbox .ranger-sublist .ranger-row > ::before{
position: absolute;
left: calc(0px - var(--navbox-tree-indent));
top: 0;
width: var(--navbox-tree-line-width);
height: 100%;
content: '';
display: block;
background-color: var(--navbox-tree-line-color);
}
.ranger-navbox .ranger-sublist .ranger-row > .ranger-listbox::before,
.ranger-navbox .ranger-row.empty-list > .ranger-subgroup::before{
height: calc(100% + var(--navbox-gap));
}
.ranger-navbox .ranger-sublist .ranger-row:last-child > ::before {
display: none;
}
.ranger-navbox .ranger-sublist .ranger-row:last-child > :first-child::before {
display: block;
height: calc(50% + var(--navbox-tree-line-width)/2);
}
.ranger-navbox .ranger-subgroup::after,
.ranger-navbox .empty-group > .ranger-listbox > .ranger-wrap::after{
position: absolute;
left: calc(0px - var(--navbox-tree-indent) + var(--navbox-tree-line-width));
width: calc(var(--navbox-tree-indent) - var(--navbox-tree-line-spacing) - var(--navbox-tree-line-width));
height: var(--navbox-tree-line-width);
content: '';
background-color: var(--navbox-tree-line-color);
}
/* increase height for links */
.ranger-navbox .hlist{
line-height: 2;
}
}
/**** `.pill` class: the "pill" style ****/
/* remove middle dots betweem items */
.ranger-navbox.pill .hlist dd:not(:last-child)::after,
.ranger-navbox.pill .hlist li:not(:last-child)::after{
display: none;
}
/* remove parentheses around nested lists*/
.ranger-navbox.pill .hlist dd ol::before,
.ranger-navbox.pill .hlist dd ul::before,
.ranger-navbox.pill .hlist dd dl::before,
.ranger-navbox.pill .hlist dt ol::before,
.ranger-navbox.pill .hlist dt ul::before,
.ranger-navbox.pill .hlist dt dl::before,
.ranger-navbox.pill .hlist li ol::before,
.ranger-navbox.pill .hlist li ul::before,
.ranger-navbox.pill .hlist li dl::before,
.ranger-navbox.pill .hlist dd ol::after,
.ranger-navbox.pill .hlist dd ul::after,
.ranger-navbox.pill .hlist dd dl::after,
.ranger-navbox.pill .hlist dt ol::after,
.ranger-navbox.pill .hlist dt ul::after,
.ranger-navbox.pill .hlist dt dl::after,
.ranger-navbox.pill .hlist li ol::after,
.ranger-navbox.pill .hlist li ul::after,
.ranger-navbox.pill .hlist li dl::after {
display: none;
}
/* make lists inline-flex */
.ranger-navbox.pill .hlist ul,
.ranger-navbox.pill .hlist ol,
.ranger-navbox.pill .hlist dl{
display: inline-flex;
gap: var(--navbox-pill-gap);
flex-wrap: wrap;
}
/* "pill" style for items */
.ranger-navbox.pill .hlist li,
.ranger-navbox.pill .hlist dt,
.ranger-navbox.pill .hlist dd{
padding: var(--navbox-pill-padding);
border-radius: var(--navbox-pill-border-radius);
box-shadow: var(--navbox-pill-box-shadow);
background: var(--navbox-pill-background);
/* 100% height */
display: flex;
align-items: center;
/* for nested lists */
gap: var(--navbox-pill-gap);
flex-wrap: wrap;
}
/* Add a hover / focus feedback style */
.ranger-navbox.pill .hlist dd:hover,
.ranger-navbox.pill .hlist dd:focus,
.ranger-navbox.pill .hlist dt:hover,
.ranger-navbox.pill .hlist dt:focus,
.ranger-navbox.pill .hlist li:hover,
.ranger-navbox.pill .hlist li:focus {
box-shadow: var(--navbox-pill-box-shadow--hover);
background: var(--navbox-pill-background--hover);
}
/**** `.pill-mobile` class: only apply the "pill" style on mobile ****/
@media screen and (max-width: 720px) {
/* remove middle dots betweem items */
.ranger-navbox.pill-mobile .hlist dd:not(:last-child)::after,
.ranger-navbox.pill-mobile .hlist li:not(:last-child)::after{
display: none;
}
/* remove parentheses around nested lists*/
.ranger-navbox.pill-mobile .hlist dd ol::before,
.ranger-navbox.pill-mobile .hlist dd ul::before,
.ranger-navbox.pill-mobile .hlist dd dl::before,
.ranger-navbox.pill-mobile .hlist dt ol::before,
.ranger-navbox.pill-mobile .hlist dt ul::before,
.ranger-navbox.pill-mobile .hlist dt dl::before,
.ranger-navbox.pill-mobile .hlist li ol::before,
.ranger-navbox.pill-mobile .hlist li ul::before,
.ranger-navbox.pill-mobile .hlist li dl::before,
.ranger-navbox.pill-mobile .hlist dd ol::after,
.ranger-navbox.pill-mobile .hlist dd ul::after,
.ranger-navbox.pill-mobile .hlist dd dl::after,
.ranger-navbox.pill-mobile .hlist dt ol::after,
.ranger-navbox.pill-mobile .hlist dt ul::after,
.ranger-navbox.pill-mobile .hlist dt dl::after,
.ranger-navbox.pill-mobile .hlist li ol::after,
.ranger-navbox.pill-mobile .hlist li ul::after,
.ranger-navbox.pill-mobile .hlist li dl::after {
display: none;
}
/* make lists inline-flex */
.ranger-navbox.pill-mobile .hlist ul,
.ranger-navbox.pill-mobile .hlist ol,
.ranger-navbox.pill-mobile .hlist dl{
display: inline-flex;
gap: var(--navbox-pill-gap);
flex-wrap: wrap;
}
.ranger-navbox.pill-mobile .hlist li,
.ranger-navbox.pill-mobile .hlist dt,
.ranger-navbox.pill-mobile .hlist dd{
padding: var(--navbox-pill-padding);
border-radius: var(--navbox-pill-border-radius);
box-shadow: var(--navbox-pill-box-shadow);
background: var(--navbox-pill-background);
display: flex;
align-items: center;
gap: var(--navbox-pill-gap);
flex-wrap: wrap;
}
/* Add a hover / focus feedback style */
.ranger-navbox.pill-mobile .hlist dd:hover,
.ranger-navbox.pill-mobile .hlist dd:focus,
.ranger-navbox.pill-mobile .hlist dt:hover,
.ranger-navbox.pill-mobile .hlist dt:focus,
.ranger-navbox.pill-mobile .hlist li:hover,
.ranger-navbox.pill-mobile .hlist li:focus {
box-shadow: var(--navbox-pill-box-shadow--hover);
background: var(--navbox-pill-background--hover);
}
}
/*********************
* End Template:Navbox*
**********************/

.mp-box {
display:flex;
flex-flow:column nowrap;
width: calc(100% - 2px);
box-sizing: border-box;
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.12) 0%, transparent 35%, rgba(76, 87, 181, 0.1) 65%, rgba(66, 162, 241, 0.12) 100%),
radial-gradient(ellipse at top left, rgba(66, 162, 241, 0.15), transparent 50%),
radial-gradient(ellipse at bottom right, rgba(76, 87, 181, 0.12), transparent 50%),
var(--background-color-transparent);
padding:0;
box-shadow:
0 0 50px 10px rgba(66, 162, 241, 0.2),
0 0 80px 15px rgba(0, 0, 0, 0.8),
inset 0 0 80px 15px rgba(66, 162, 241, 0.08),
0 0 0 1px rgba(66, 162, 241, 0.3),
inset 0 0 0 1px rgba(66, 162, 241, 0.2);
margin-top: 1em;
border-radius: 6px;
position: relative;
overflow: hidden;
}

.mp-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.6) 15%,
rgba(66, 162, 241, 1) 50%,
rgba(66, 162, 241, 0.6) 85%,
transparent);
box-shadow:
0 0 15px rgba(66, 162, 241, 0.8),
0 0 25px rgba(66, 162, 241, 0.5);
}

.mp-box::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.4) 20%,
rgba(66, 162, 241, 0.7) 50%,
rgba(66, 162, 241, 0.4) 80%,
transparent);
box-shadow: 0 0 10px rgba(66, 162, 241, 0.6);
}

.mp-body {
height: 100%;
display: flex;
padding:0.5em;
flex-flow: column nowrap;
}

.mp-box.centered-content .mp-body {
height: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: space-evenly;
}

.mp-box.has-floating-image {
display:block;
}

.mp-box.has-floating-image .mp-body {
height:unset;
display:block;
}

.mp-box h2 {
text-align:center;
font-weight:bold;
font-family: "Daedalus";
overflow: initial;
font-size: 4em;
margin: 0.5em 0;
padding: 0.5em 0;
text-shadow:
0 0 30px rgba(66, 162, 241, 0.8),
0 0 15px rgba(66, 162, 241, 0.6),
0 2px 5px rgba(0, 0, 0, 0.8);
color:var(--content-border-color);
background:
linear-gradient(90deg, transparent 0%, rgba(66, 162, 241, 0.08) 50%, transparent 100%),
radial-gradient(ellipse at center, rgba(26, 26, 34, 0.6), transparent 70%);
border-radius: 8px;
position: relative;
}

.mp-box h2::after {
content: '';
position: absolute;
left: 10%;
right: 10%;
bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.3) 30%, rgba(66, 162, 241, 0.5) 50%, rgba(66, 162, 241, 0.3) 70%, transparent);
}

.mp-box .welcome-message {
font-size: 5.5em;
margin: 0;
padding: 0.4em 0;
color: #fff;
font-family: "Daedalus";
text-shadow:
0 0 50px rgba(66, 162, 241, 1),
0 0 35px rgba(66, 162, 241, 0.9),
0 0 20px rgba(66, 162, 241, 0.7),
0 0 10px rgba(255, 255, 255, 0.8),
0 6px 12px rgba(0, 0, 0, 1),
0 0 80px rgba(66, 162, 241, 0.6);
letter-spacing: 0.08em;
position: relative;
animation: welcome-pulse 4s ease-in-out infinite;
background:
linear-gradient(90deg,
transparent 0%,
rgba(66, 162, 241, 0.05) 30%,
rgba(66, 162, 241, 0.08) 50%,
rgba(66, 162, 241, 0.05) 70%,
transparent 100%);
padding: 0.5em 1em;
border-radius: 8px;
}

.mp-box .welcome-message::before {
content: '';
position: absolute;
top: 0;
left: 5%;
right: 5%;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.6) 20%,
rgba(255, 255, 255, 0.8) 50%,
rgba(66, 162, 241, 0.6) 80%,
transparent);
box-shadow:
0 0 15px rgba(66, 162, 241, 1),
0 0 25px rgba(66, 162, 241, 0.6);
}

.mp-box .welcome-message::after {
content: '';
position: absolute;
bottom: 0;
left: 5%;
right: 5%;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.5) 20%,
rgba(255, 255, 255, 0.6) 50%,
rgba(66, 162, 241, 0.5) 80%,
transparent);
box-shadow:
0 0 12px rgba(66, 162, 241, 0.8),
0 0 20px rgba(66, 162, 241, 0.5);
}

@keyframes welcome-pulse {
0%, 100% {
text-shadow:
0 0 50px rgba(66, 162, 241, 1),
0 0 35px rgba(66, 162, 241, 0.9),
0 0 20px rgba(66, 162, 241, 0.7),
0 0 10px rgba(255, 255, 255, 0.8),
0 6px 12px rgba(0, 0, 0, 1),
0 0 80px rgba(66, 162, 241, 0.6);
}
50% {
text-shadow:
0 0 65px rgba(66, 162, 241, 1),
0 0 45px rgba(66, 162, 241, 1),
0 0 30px rgba(66, 162, 241, 0.8),
0 0 15px rgba(255, 255, 255, 1),
0 6px 12px rgba(0, 0, 0, 1),
0 0 100px rgba(66, 162, 241, 0.8);
}
}

#mp-banner-container {
position: relative;
}

#mp-box-welcome {
text-align:center;
position:relative;
overflow:hidden;
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.15) 0%, transparent 30%, rgba(76, 87, 181, 0.12) 70%, rgba(66, 162, 241, 0.15) 100%),
radial-gradient(ellipse at center, rgba(66, 162, 241, 0.18), transparent 60%),
var(--background-color-transparent);
box-shadow:
0 0 60px 12px rgba(66, 162, 241, 0.25),
0 0 100px 20px rgba(0, 0, 0, 0.8),
inset 0 0 100px 20px rgba(66, 162, 241, 0.1),
0 0 0 1px rgba(66, 162, 241, 0.4),
inset 0 0 0 1px rgba(66, 162, 241, 0.3);
}

#mp-welcome {
display:flex;
flex-flow:column nowrap;
position: relative;
height: 100%;
font-family: var(--heading-font-family);
z-index: 2;
box-sizing: border-box;
padding: 1em;
}

#mp-welcome .welcome-subtitle {
height: 100%;
font-family: var(--body-font-family);
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.08), transparent 50%, rgba(76, 87, 181, 0.08)),
color-mix(in srgb, var(--background-color-base) 85%, transparent);
margin-left: 4px;
margin-right: 4px;
margin-bottom: 4px;
padding: 1em;
border-radius: 4px;
box-shadow:
inset 0 0 20px 3px rgba(66, 162, 241, 0.1),
0 2px 8px rgba(0, 0, 0, 0.4);
border: 1px solid rgba(66, 162, 241, 0.2);
}

#mp-banner {
position: absolute;
width: 100%;
height: 100%;
filter: blur(5px);
z-index: -1;
background: url(/images/e/e0/MP_banner.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
}

.view-dark #mp-banner {
filter: blur(5px) brightness(50%);
}

.view-light #mp-banner {
filter: blur(5px) contrast(50%);
}

/* [[Template:MP_link]] */
.mp-links {
--gap:10px;
font-size: 1.5em;
}

.mp-links > ul {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
margin: 2px;
gap:var(--gap);
}

.mp-main > .mp-links > ul {
display: grid;
grid-template-columns: repeat(3, minmax(5em, 1fr));
}

@media screen and (max-width: 720px) {
.mp-main > .mp-links > ul {
grid-template-columns: 1fr;
gap: 1em;
}

.mp-main > .mp-links > ul > li {
margin: 0 0.5em;
}
}

.mp-links > ul > li {
display:flex;
flex-flow:column nowrap;
align-items:stretch;
text-align: center;
box-sizing:border-box;
padding-top: 0.5em;
border-image-source: url("/wiki/Special:Redirect/file/Wiki-border-kurva.png");
border-image-slice: 6;
border-image-width: 6px;
border-image-repeat: repeat repeat;
}

.mp-main > .mp-links > ul > li {
background:
linear-gradient(135deg, #42a2f125 0%, transparent 50%, #4c57b525 100%),
linear-gradient(to bottom, #42a2f140, #4c57b550, #42a2f130);
margin: 0 3em;
box-shadow:
inset 0 0 15px 3px #42a2f160,
inset 0 -2px 8px 0 #4c57b540,
0 2px 12px 0 rgba(66, 162, 241, 0.2),
inset 2px 0 2px -1px rgba(255, 255, 255, 0.15),
inset -2px 0 2px -1px rgba(255, 255, 255, 0.15);
border: 1px solid rgba(66, 162, 241, 0.3);
border-radius: 4px;
padding-top: 1em;
padding-bottom: 0.5em;
position: relative;
overflow: hidden;
}

.mp-main > .mp-links > ul > li::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
animation: tech-shimmer 3s infinite;
}

@keyframes tech-shimmer {
0% { left: -100%; }
100% { left: 100%; }
}

.mp-main > .mp-links > ul > li:hover {
background:
linear-gradient(135deg, #42a2f140 0%, transparent 50%, #4c57b540 100%),
linear-gradient(to bottom, #42a2f155, #4c57b565, #42a2f145);
box-shadow:
inset 0 0 20px 5px #42a2f180,
inset 0 -2px 10px 0 #4c57b560,
0 4px 20px 2px rgba(66, 162, 241, 0.35),
inset 2px 0 4px -1px rgba(255, 255, 255, 0.25),
inset -2px 0 4px -1px rgba(255, 255, 255, 0.25);
border-color: rgba(66, 162, 241, 0.5);
}

.mp-links > ul > li::before {
transition: opacity 0.5s ease-in-out;
z-index: 0;
pointer-events: none;
}
.mp-links > ul > li:hover::before {
opacity: 0.2;
}
.mp-links > ul > li:hover {
background-color: #42a2f180;
}

.mp-links.columns-1 > ul > li {flex: max(calc(100% - var(--gap)), 5em) 1 1;}
.mp-links.columns-2 > ul > li {flex: max(calc(50% - var(--gap)), 5em) 1 1;}
.mp-links.columns-3 > ul > li {flex: max(calc((100% / 3) - var(--gap)), 5em) 1 1;}
.mp-links.columns-4 > ul > li {flex: max(calc(25% - var(--gap)), 5em) 1 1;}
.mp-links.columns-5 > ul > li {flex: max(calc(20% - var(--gap)), 5em) 1 1;}
.mp-links.columns-6 > ul > li {flex: max(calc((100% / 6) - var(--gap)), 5em) 1 1;}
.mp-links.columns-7 > ul > li {flex: max(calc((100% / 7) - var(--gap)), 5em) 1 1;}

.mp-links > ul > li {
cursor: pointer;
}

.mp-links > ul > li > a {
display: flex;
align-items: center;
justify-content: center;
height:100%;
flex:1 1 auto;
box-sizing:border-box;
padding:5px;
pointer-events: auto;
}

.mp-links > ul > li > a:first-child {
height:100%;
}

.mp-links > ul > li > a:last-child:not(:first-child) {
height:unset;
}

.mp-links.stretch,
.mp-links.stretch > ul {
height:100%;
}

.mp-links.side-image li {
flex-flow:row nowrap;
}

/* MP icon lists */
.mp-iconlists {
display: flex;
flex-flow: wrap;
gap: 5px 20px;
}

.mp-iconlists > .mp-iconlist {
flex: 1;
min-width: fit-content;
}

.mp-iconlist {
font-size: 4em;
}

.mp-iconlist > h3 {
padding: 0;
margin: 0;
}

.mp-iconlist > ul {
list-style: none;
margin: 0;
}

/* MP gallery */
.mp-box ul.gallery {
display: flex;
flex-flow: wrap;
gap: 5px 10px;
align-items: flex-end;
justify-content: space-evenly;
margin: 0;
}

.mp-box ul.gallery .gallerytext {
margin-top: 1em;
padding: 0;
background-color: var(--background-color-neutral-subtle);
}

.mp-box .gallerybox:hover .gallerytext {
background-color: color-mix(in srgb, var(--content-link-color) 20%, transparent);
}

.mp-box ul.gallery .gallerytext > p {
margin: 0;
}

.mp-box ul.gallery .gallerytext a {
display: block;
padding: .5em 0;
}

/***********************
* End main page layout *
************************/

/***********************
* Start DRUID infoboxes *
************************/

.druid-container {
--druid-background-color: var(--background-color-base);
--druid-secondary-background-color: var(--color-progressive);
--druid-secondary-background-label-color: var(--content-link-label-color);
--druid-tertiary-background-color: var(--background-color-neutral-subtle);
--druid-border-color: var(--content-border-color);
--druid-link-color: var(--content-link-color);
--druid-link-label-color: var(--content-link-label-color);
}

.npc-infobox {
border-radius:5px;
border-image-source: url("/wiki/Special:Redirect/file/Wiki-border-kurva.png");
border-image-slice: 6;
border-image-width: 6px;
border-image-repeat: repeat;
position: relative;
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.05) 0%, transparent 40%, rgba(76, 87, 181, 0.05) 100%),
radial-gradient(ellipse at top, rgba(66, 162, 241, 0.08), transparent 60%),
var(--druid-background-color);
box-shadow:
0 0 40px 8px rgba(66, 162, 241, 0.15),
inset 0 0 60px 10px rgba(66, 162, 241, 0.05),
0 0 0 1px rgba(66, 162, 241, 0.2);
overflow: hidden;
}

.npc-infobox::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.4) 20%,
rgba(66, 162, 241, 0.8) 50%,
rgba(66, 162, 241, 0.4) 80%,
transparent);
box-shadow: 0 0 15px rgba(66, 162, 241, 0.8);
animation: data-scan 3s linear infinite;
}

@keyframes data-scan {
0% { opacity: 0.5; }
50% { opacity: 1; }
100% { opacity: 0.5; }
}

.npc-infobox::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.3) 30%,
rgba(66, 162, 241, 0.6) 50%,
rgba(66, 162, 241, 0.3) 70%,
transparent);
}

.druid-container {
background: var(--druid-background-color);
float: right;
clear: right;
margin: 0 0 1em 1em;
padding: 0.5em;
width:100%;
max-width:26em;
box-sizing: border-box;
border-collapse: separate;
}

@media screen and (max-width: 720px) {
.druid-container {
float: none;
margin: 0.5rem auto;
}
}

.druid-main-images-file,
.druid-main-image {
text-align:center;
}

.druid-infobox .druid-title,
.druid-infobox .druid-section {
text-align:center;
padding:1px;
border-radius: 0.1em;
}

.npc-infobox .druid-title {
background:
linear-gradient(135deg,
rgba(66, 162, 241, 0.25) 0%,
rgba(76, 87, 181, 0.2) 40%,
rgba(66, 162, 241, 0.15) 80%,
rgba(66, 162, 241, 0.25) 100%),
radial-gradient(ellipse at center, rgba(66, 162, 241, 0.2), transparent 70%),
linear-gradient(90deg,
color-mix(in srgb, var(--druid-secondary-background-color) 80%, transparent) 0%,
color-mix(in srgb, var(--druid-secondary-background-color) 70%, transparent) 100%);
color: var(--druid-secondary-background-label-color);
text-shadow:
0 0 20px rgba(66, 162, 241, 1),
0 0 15px rgba(66, 162, 241, 0.8),
0 0 8px rgba(66, 162, 241, 0.6),
0 2px 4px rgba(0, 0, 0, 0.9);
font-size: 1.3em;
letter-spacing: 0.08em;
line-height: 1;
position: relative;
box-shadow:
inset 0 0 30px 5px rgba(66, 162, 241, 0.15),
0 4px 12px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(66, 162, 241, 0.4);
border-radius: 2px;
padding: 0.5em 0.8em;
}

.npc-infobox .druid-title::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.6) 20%,
rgba(66, 162, 241, 1) 50%,
rgba(66, 162, 241, 0.6) 80%,
transparent);
box-shadow: 0 0 10px rgba(66, 162, 241, 0.8);
}

.npc-infobox .druid-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.4) 30%,
rgba(66, 162, 241, 0.8) 50%,
rgba(66, 162, 241, 0.4) 70%,
transparent);
box-shadow: 0 0 8px rgba(66, 162, 241, 0.6);
}

.npc-infobox .druid-section {
background:
linear-gradient(90deg,
color-mix(in srgb, var(--druid-secondary-background-color) 80%, transparent) 0%,
color-mix(in srgb, var(--druid-secondary-background-color) 60%, transparent) 100%),
linear-gradient(135deg, rgba(66, 162, 241, 0.1), transparent 50%);
color:var(--druid-secondary-background-label-color);
text-shadow:
0 0 15px rgba(66, 162, 241, 0.8),
0 0 8px rgba(66, 162, 241, 0.5),
0 2px 4px rgba(0, 0, 0, 0.8);
position: relative;
box-shadow:
inset 0 0 20px 3px rgba(66, 162, 241, 0.1),
0 2px 8px rgba(0, 0, 0, 0.5);
}

.npc-infobox .druid-section::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.6) 50%, transparent);
box-shadow: 0 0 6px rgba(66, 162, 241, 0.4);
}

.druid-infobox .druid-section {
font-size: 1.25em;
font-weight: 500;
}

.druid-label {
font-weight:bold;
text-align: right;
box-sizing: border-box;
}

.druid-row > .druid-label {
width: 40%;
flex-shrink: 0;
}

.druid-row > .druid-label,
.druid-row > .druid-data {
padding-inline: 0.3em;
}

.druid-main-image,
.druid-main-images {
padding:5px;
}

.druid-main-image img,
.druid-main-images img {
max-width:100%;
height:auto;
}

.druid-main-images-labels {
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content: space-evenly;
margin:0.25em;
gap:0.25em;
}

.druid-main-images-label {
cursor:pointer;
flex:1 1 auto;
text-align:center;
transition:.1s ease-in;
outline:1px solid var(--druid-link-color);
}

.druid-main-images-label.focused {
background:var(--druid-link-color);
color:var(--druid-link-label-color);
}

.druid-main-images-label:not(.focused):hover {
background:rgba(var(--druid-link-color--rgb), 0.25);
}

.druid-toggleable-data:not(.focused),
.druid-main-images-file:not(.focused),
.druid-toggleable-heading:not(.focused) {
display:none;
}

.druid-row:not(:has(.druid-grid)):has(.druid-toggleable-data-empty.focused) {
display:none;
}

.druid-section:has(.druid-toggleable-heading-empty.focused) {
display:none;
}

.druid-grid {
display:grid;
gap: 0.3em;
padding: 0.35em;
}

.druid-grid-item {
background:var(--druid-tertiary-background-color);
padding:0.25em;
border:1px solid rgba(var(--druid-border-color--rgb), 0.5);
border-radius: 2px;
}

.druid-grid-item > .druid-label,
.druid-grid-item > .druid-data {
text-align: center;
}

.druid-section-container > .druid-collapsible {
display: flex;
justify-content: space-between;
align-items: center;
}

.druid-collapsed {
display:none!important;
}

.druid-collapsible {
cursor:pointer;
position:relative;
}

.druid-collapsible::after {
content:'\2013';
display:block;
position:absolute;
right:10px;
font-size:20px;
font-weight:bold;
color:var(--druid-secondary-background-label-color);
}

.druid-collapsible-collapsed::after {
content:'+';
}

.druid-section-container:has(.druid-toggleable-data-empty.focused):not(:has(.druid-toggleable-data-nonempty.focused)):not(:has(.druid-data-nonempty)) {
display: none;
}

body .has-worn-variant .image-base {
display: block !important;
}

body .has-worn-variant .image-worn {
display: none !important;
}

body .has-worn-variant.is-worn-active .image-base {
display: none !important;
}

body .has-worn-variant.is-worn-active .image-worn {
display: block !important;
}

.image-base img, .image-worn img {
display: block !important;
margin: 0 auto !important;
max-width: 100%;
height: auto;
}

.worn-toggle-button {
display: inline-block !important;
margin-top: 10px;
padding: 5px 15px;
background: #333 !important;
color: #fff !important;
border: 1px solid #666 !important;
border-radius: 4px;
cursor: pointer;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}
.is-worn-active .worn-toggle-button {
background: #833 !important;
}

/*****************************************
Div support
*****************************************/

div.druid-row {
display:flex;
margin-block: 1px;
}

div.druid-row + div.druid-row {
margin-top: 0;
}

.npc-infobox div.druid-row {
background: linear-gradient(90deg, rgba(66, 162, 241, 0.02), transparent 60%);
}

.npc-infobox div.druid-row > .druid-label {
background:
linear-gradient(90deg,
color-mix(in srgb, var(--druid-tertiary-background-color) 80%, #42a2f1) 0%,
var(--druid-tertiary-background-color) 100%);
text-shadow: 0 0 8px rgba(66, 162, 241, 0.4);
border-right: 1px solid rgba(66, 162, 241, 0.2);
}

.npc-infobox div.druid-row > .druid-data {
text-shadow: 0 0 6px rgba(66, 162, 241, 0.3);
}

.druid-infobox #toc {
display:none;
}

/***********************
* End DRUID infoboxes *
************************/

/*** Miscellaneous ***/
.responsive-image {
max-width:100%;
height:auto;
}

.view-dark .invert-on-dark,
.view-light .invert-on-light {
filter:invert(100%);
}

@media screen and (min-width:720px) {
.mobileonly {
display:none;
}
}
@media screen and (max-width:720px) {
.nomobile {
display:none;
}
}

/**************************
* Start Modular Templates *
**************************/

/********* [[Template:Ambox]] *********/
.ambox {
border: 1px solid var(--content-border-color);
border-left: 10px solid var(--ambox-color);
border-radius: 2px;
display: flex;
align-items: center;
gap: .6em;
margin: 1em 0;
padding: 3px .6em;
background-color: var(--background-color-neutral-subtle);
box-shadow: 2px 2px 5px 0px #0002;
}

@media (min-width: 720px) {
.ambox {
margin-inline: 10%;
}
}

.ambox.tiny {
padding: .04rem .5em;
margin-inline: 0;
width: fit-content;
}

.ambox + .ambox {
margin-top: -.6em;
}

.ambox-content p {
margin: .15em 0;
}

.ambox-title {
font-weight: bold;
}

/********* [[Template:Hatnote]] *********/
.hatnote {
padding: 1px 0 1px 1.6em;
margin-bottom: 0.5em;
font-style: italic;
border-top: 1px solid var(--border-color-subtle);
border-bottom: 1px solid var(--border-color-subtle);
}

.hatnote.icon {
padding-left: 0;
}

/********* [[Template:Spoiler]] *********/
.spoiler-content {
background-color: rgb(127, 127, 127);
transition: all 0.3s;
cursor: pointer;
}

.spoiler-content > span {
opacity: 0;
transition: all 0.3s;
}

.spoiler-content > * {
pointer-events:none;
}

.spoiler-content.show > * {
pointer-events:unset;
}

.spoiler-content.show {
background-color: rgba(127, 127, 127, 0);
}

.spoiler-content.show > span {
opacity: 1;
}

/********* [[Template:Link icon]] *********/
.link-icon {
display: inline-flex;
align-items: center;
height: var(--link-icon-line-height);
vertical-align: bottom;
}

.link-icon .regular {
align-self: center;
}

.link-icon .regular a {
display: flex;
}

.link-icon .regular img {
height: var(--link-icon-size);
max-width: var(--link-icon-size);
}

.link-icon .fallback {
outline: 1px solid var(--color-base);
border-radius: 50%;
text-align: center;
width: var(--link-icon-size);
line-height: var(--link-icon-size);
}

.link-icon.notext .fallback {
display: inline-block;
}

.link-icon.notext {
display: inline;
}

/********* [[Template:Quote]] *********/
.quote {
background: var(--background-color-neutral-subtle);
border-radius: 5px;
border: 2px solid var(--content-border-color);
margin: .5em 0;
padding: .5em;
}

.quote .block {
display: block;
}

.quote .title {
font-size: large;
font-weight: bold;
}

.quote .content {
font-style: italic;
}

.quote .author {
font-weight: bold;
text-align: end;
}

.quote .marks-wrapper {
display: flex;
gap: 5px;
}

.quote .marks-wrapper::before,
.quote .marks-wrapper::after {
font-size: 100px;
line-height: 0px;
}

.quote .marks-wrapper::before {
content: "\201C";
margin-top: 40px;
}

.quote .marks-wrapper::after {
content: "\201D";
align-self: end;
margin-bottom: -10px;
}

/************************
* End Modular Templates *
*************************/

.button-expand-header {
margin-top: 0.5em;
width: 100%;
padding: 14px 18px;
padding-right: 60px;
background: var(--background-color-base);
color: var(--color-progressive);
border: 2px solid var(--color-progressive);
cursor: pointer;
font-family: 'Courier New', monospace;
font-size: 16px;
font-weight: 700;
position: relative;
transition: all 0.2s ease;
box-shadow: inset 0 0 0 2px #0f0f0f,
inset 0 0 20px #42a2f180;
}

.button-expand-header:hover {
background: var(--background-color-transparent);
box-shadow: inset 0 0 0 2px #0f0f0f,
inset 0 0 30px #4c57b580,
0 0 10px #4c57b5a0;
}

.button-expand-header:active {
border-radius: 20px;
transition: 0.2s;
}

.button-expand-header::before {
content: '[ + ]';
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
}

.button-expand-header:has(+ .mw-collapsible:not(.mw-collapsed))::before {
content: '[ - ]';
}

.button-expand-header > span:not([typeof]) {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.2s;
}

@media screen and (max-width:720px) {
h2.mw-customtoggle > span:not([typeof])::after {
display: none;
}
}

a.tabber__tab {
margin-top: 0.7em;
font-size: 2em;
margin-left: 0.6em;
margin-bottom: 0.7em;
}

header.tabber__header {
margin-bottom: 0.5em;
margin-top: 0.5em;
}

a.tabber__tab[aria-selected="true"]{
background: var(--background-color-transparent);
color: var(--color-progressive);
border: 2px solid var(--color-progressive);
box-shadow: inset 0 0 0 2px #0f0f0f,
inset 0 0 20px #42a2f180;
}

@media (hover: hover) {
.tabber__tab:hover {
box-shadow: inset 0 0 0 2px #0f0f0f,
inset 0 0 30px #4c57b580,
0 0 10px #4c57b5a0;
background-color: var(--background-color-base);
}
}

.tabber__panel > div.mw-heading.mw-heading2 > h2 {
border-bottom: 1px solid var(--color-progressive) !important;
padding-bottom: 0.5em;
text-shadow: 0 0 20px black;
}

.tabber__panel > div > h2 > span {
text-shadow: 0 0 10px black;
color: var(--content-link-color);
margin-left: 0.1em;
padding: 0 0.5em 0;
}

header.tabber__header {
box-shadow: none;
}

.tabber__header__prev,
.tabber__header__next {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.15) 0%, rgba(76, 87, 181, 0.12) 100%),
rgba(26, 26, 34, 0.8);
border: 1px solid rgba(66, 162, 241, 0.5);
color: var(--color-base);
padding: 0.6em 1em;
cursor: pointer;
transition: all 0.3s ease;
box-shadow:
inset 0 0 20px 3px rgba(66, 162, 241, 0.1),
0 2px 10px rgba(66, 162, 241, 0.2);
border-radius: 4px;
position: relative;
backdrop-filter: blur(3px);
}

.tabber__header__prev::before,
.tabber__header__next::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.6) 30%,
rgba(66, 162, 241, 0.9) 50%,
rgba(66, 162, 241, 0.6) 70%,
transparent);
box-shadow: 0 0 8px rgba(66, 162, 241, 0.6);
}

.tabber__header__prev:hover,
.tabber__header__next:hover {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.25) 0%, rgba(76, 87, 181, 0.2) 100%),
rgba(26, 26, 34, 0.9);
border-color: rgba(66, 162, 241, 0.7);
box-shadow:
inset 0 0 30px 5px rgba(66, 162, 241, 0.15),
0 4px 15px rgba(66, 162, 241, 0.3),
0 0 25px rgba(66, 162, 241, 0.2);
transform: scale(1.05);
text-shadow:
0 0 10px rgba(66, 162, 241, 0.8),
0 0 5px rgba(66, 162, 241, 0.5);
}

.tabber__header .tabber__header__prev::after, .tabber__header .tabber__header__next::after {
display: block;
width: inherit;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: 1em;
filter: drop-shadow(0 0 4px rgba(66, 162, 241, 0.6));
}
@media screen and (max-width: 720px) {
.button-expand-header {
background-color: #8dbec280;
box-shadow: 0 0 40px var(--color-progressive);
}
.button-expand-header > span:after {
position: relative;
font-size: 1em;
opacity: 1;
left: 0;
bottom: 0;
text-align: inherit;
}
}

.button-expand-header > img {
padding: 0 1em 0;
}

.button-expand-header:hover > span:after{
opacity: 1;
font-size: 0.75em;
}

.class-box {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.06) 0%, transparent 50%, rgba(76, 87, 181, 0.06) 100%),
linear-gradient(to bottom, rgba(26, 26, 34, 0.95), rgba(26, 26, 34, 0.98));
box-shadow:
0 0 30px 5px rgba(0, 0, 0, 0.8),
inset 0 0 40px 5px rgba(66, 162, 241, 0.08),
0 0 0 1px rgba(66, 162, 241, 0.25);
padding: 0 0.5em 0;
border-radius: 6px;
position: relative;
overflow: hidden;
}

.class-box::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.4) 30%,
rgba(66, 162, 241, 0.6) 50%,
rgba(66, 162, 241, 0.4) 70%,
transparent);
}

/* ===============================
MP elements
=============================== */

.main-page-links {
font-weight: bold;
text-shadow: 0 0 6px #000000;
margin: 1em;
}

.mp-box pre {
font-family: var(--body-font-family);
color: var(--color-progressive);
border-radius:5px;
border-image-source: var(--border-image-base);
border-image-slice: 6;
border-image-width: 6px;
border-image-repeat: repeat repeat;
text-align: center;
}

/* ===============================
DRUID Boss Infoboxes
=============================== */
/* UNHOLY */
.druid-data-Unholy a, .druid-data-Unholy a:visited {
color: black;
text-shadow:
0 0 5px white, 0 0 10px white, 0 0 15px white;
}
/* VOIDBOUND */
.druid-data-Voidbound a, .druid-data-Voidbound a:visited {
color: #e48cff;
text-shadow: 0 0 4px #e48cff, 0 0 8px #b94dff, 0 0 12px #7a1d9a;
}
/* BLOODSHOT */
.druid-data-Bloodshot a, .druid-data-Bloodshot a:visited {
color: #d23c3c;
text-shadow: 0 0 4px #d23c3c, 0 0 8px #8b0000, 0 0 12px #ff4d4d;
}
/* ROYAL */
.druid-data-Royal a, .druid-data-Royal a:visited {
color: #a86dff;
text-shadow: 0 0 4px #a86dff, 0 0 8px #6a00ff, 0 0 12px #330066;
}
/* GILDED */
.druid-data-Gilded a, .druid-data-Gilded a:visited {
color: #ffb84d;
text-shadow: 0 0 4px #ffb84d, 0 0 8px #ff8000, 0 0 12px #cc6600;
}
/* IRRADIATED */
.druid-data-Irradiated a, .druid-data-Irradiated a:visited {
color: #4dff4d;
text-shadow: 0 0 4px #4dff4d, 0 0 8px #00cc00, 0 0 12px #006600;
}
/* COMPANION */
.druid-data-Companion a, .druid-data-Companion a:visited {
color: #ffd700;
text-shadow: 0 0 4px #ffd700, 0 0 8px #ffaa00, 0 0 12px #cc8400;
}
/* RUNES */
.druid-data-Rune a, .druid-data-Rune a:visited {
color: #bfbfbf;
text-shadow: 0 0 4px #bfbfbf, 0 0 8px #666, 0 0 12px #333;
}

.druid-row[data-druid-section-row="Loot"] div {
padding-top: 0.75em;
padding-bottom: 0.5em;
flex-wrap: nowrap;
flex-direction: row;
display: block;
justify-content: space-between;
align-items: center;
text-align: left;
width: 100%;
}

div[data-druid-section="Loot"] + div[data-druid-section-row="Loot"] div {
border-top: none;
}

.druid-data .image {
margin-left: 0%;
}

.loot-category-header {
display: flex;
align-items: center;
gap: 0.5em;
padding: 0.5em 0.75em;
margin: 0.75em 0 0.3em 0;
background:
linear-gradient(90deg, rgba(66, 162, 241, 0.12) 0%, transparent 100%),
rgba(26, 26, 34, 0.4);
border-left: 2px solid rgba(66, 162, 241, 0.5);
border-radius: 3px;
box-shadow:
inset 0 0 15px 2px rgba(66, 162, 241, 0.05),
0 1px 4px rgba(0, 0, 0, 0.4);
}

.loot-category-title {
font-weight: 600;
font-size: 0.95em;
color: var(--color-base);
text-shadow:
0 0 6px rgba(66, 162, 241, 0.4),
0 1px 2px rgba(0, 0, 0, 0.8);
letter-spacing: 0.02em;
}

.loot-item-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.3em 0.75em;
margin: 0.15em 0;
background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.02) 50%, transparent);
border-radius: 2px;
transition: all 0.2s ease;
}

.loot-item-row:hover {
background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.06) 50%, transparent);
padding-left: 1em;
}

.boss-percent {
color: var(--content-border-color);
text-shadow:
0 0 8px rgba(66, 162, 241, 0.5),
0 0 4px rgba(66, 162, 241, 0.3),
0 2px 4px rgba(0, 0, 0, 0.8);
font-weight: bold;
font-size: 1.05em;
}

.loot-data-infobox {
display: flex;
align-items: center;
gap: 0.5em;
}

.item-infobox div[data-druid-section] > .druid-section {
font-weight: bolder;
text-shadow: 0px 2px black;
}

.druid-infobox .druid-title {
display: flex;
align-items: center;
justify-content: center;
color: var(--content-border-color);
font-family: "Daedalus", sans-serif;
line-height: 1em;
font-weight: 1000;
font-size: 3em;
min-height: 2.2em;
flex-wrap: wrap;
text-shadow: 0 0 20px black;
}

.boss-infobox-subtitle {
font-weight: 500;
font-size: 0.75em;
display: inline-block;
white-space: normal;
word-break: break-word;
width: 100%;
position: relative;
color: rgba(255, 255, 255, 0.95);
text-shadow:
0 0 10px rgba(66, 162, 241, 0.6),
0 0 5px rgba(66, 162, 241, 0.4),
0 2px 4px rgba(0, 0, 0, 0.8);
animation: subtitle-pulse 4s ease-in-out infinite;
background: linear-gradient(90deg,
rgba(66, 162, 241, 0.05) 0%,
rgba(66, 162, 241, 0.08) 50%,
rgba(66, 162, 241, 0.05) 100%);
background-size: 200% 100%;
animation: subtitle-scan 6s linear infinite, subtitle-pulse 4s ease-in-out infinite;
padding: 0.3em 0.5em;
border-radius: 2px;
letter-spacing: 0.03em;
}

.boss-infobox-subtitle::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 60%;
background: linear-gradient(180deg,
transparent,
rgba(66, 162, 241, 0.8) 50%,
transparent);
box-shadow: 0 0 6px rgba(66, 162, 241, 0.8);
animation: subtitle-indicator 2s ease-in-out infinite;
}

@keyframes subtitle-pulse {
0%, 100% {
text-shadow:
0 0 10px rgba(66, 162, 241, 0.6),
0 0 5px rgba(66, 162, 241, 0.4),
0 2px 4px rgba(0, 0, 0, 0.8);
}
50% {
text-shadow:
0 0 15px rgba(66, 162, 241, 0.9),
0 0 8px rgba(66, 162, 241, 0.6),
0 0 4px rgba(255, 255, 255, 0.4),
0 2px 4px rgba(0, 0, 0, 0.8);
}
}

@keyframes subtitle-scan {
0% {
background-position: 0% 0%;
}
100% {
background-position: 200% 0%;
}
}

@keyframes subtitle-indicator {
0%, 100% {
opacity: 0.4;
box-shadow: 0 0 6px rgba(66, 162, 241, 0.6);
}
50% {
opacity: 1;
box-shadow: 0 0 10px rgba(66, 162, 241, 1);
}
}
/* ===============================
Dungeon Page CSS
=============================== */

.dungeon-page-box {
background-color: transparent;
box-shadow: none;
transition: 0.5s;
padding: 1em;
position: relative;
padding: 0 1em;
border-radius: 0px;
}

.dungeon-page-smaller-box li {
display: inline-block;
width: 18%;
margin: 0 1% 1% 0;
vertical-align: top;
text-align: center;
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 60%),
linear-gradient(to bottom, rgba(26, 26, 34, 0.9), rgba(26, 26, 34, 0.95));
border-radius: 4px;
border: 1px solid rgba(66, 162, 241, 0.2);
box-shadow:
inset 0 0 20px 3px rgba(66, 162, 241, 0.05),
0 2px 10px rgba(0, 0, 0, 0.5);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.dungeon-page-smaller-box li::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.4), transparent);
}

.dungeon-page-smaller-box a {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0.5em;
}

.dungeon-page-smaller-box li:hover,
.mp-links.dungeon-page-smaller-box > ul > li:hover {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.15) 0%, transparent 60%),
linear-gradient(to bottom, rgba(26, 26, 34, 0.95), rgba(26, 26, 34, 1));
border-color: rgba(66, 162, 241, 0.4);
box-shadow:
inset 0 0 25px 5px rgba(66, 162, 241, 0.1),
0 4px 15px rgba(66, 162, 241, 0.3),
0 0 20px rgba(66, 162, 241, 0.2);
transform: translateY(-2px);
}

.pre-dungeon {
max-width: 100%;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
display: block;
}

.dungeon-enemies {
display: flex;
flex-wrap: wrap;
max-width: 100%;
justify-content: center;
}

.dungeon-enemies .druid-container {
margin: 2%;
}

.tipstricks {
display: flex;
max-width: 100%;
}

.pre-dungeon p {
margin: 1em 0;
padding: 0.9em 1.2em 0.9em 1.5em;
border-radius: 3px 12px 8px 3px;
box-shadow:
-2px 0 0 0 rgba(66, 162, 241, 0.4),
0 4px 15px rgba(0, 0, 0, 0.6),
inset 0 0 20px rgba(66, 162, 241, 0.03);
display: block;
width: auto;
background:
linear-gradient(90deg,
rgba(66, 162, 241, 0.06) 0%,
rgba(26, 26, 34, 0.8) 15%,
rgba(26, 26, 34, 0.6) 85%,
transparent 100%);
border-left: 2px solid rgba(66, 162, 241, 0.5);
color: var(--color-base);
line-height: 1.6;
position: relative;
backdrop-filter: blur(2px);
}

.pre-dungeon p::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg,
rgba(66, 162, 241, 0.8) 0%,
rgba(66, 162, 241, 0.3) 50%,
rgba(66, 162, 241, 0.8) 100%);
opacity: 0.6;
}

.dlog {
margin-bottom: 2%;
background:
linear-gradient(to right, rgba(31, 35, 77, 0.95) 0%, rgba(31, 35, 77, 0.9) 70%, rgba(31, 35, 77, 0) 100%),
linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 50%);
padding: 0.75em;
border: 3px solid;
border-image: linear-gradient(to right,
rgba(66, 162, 241, 0.8) 0%,
rgba(71, 75, 117, 1) 30%,
rgba(71, 75, 117, 0.8) 70%,
rgba(71, 75, 117, 0) 100%) 1 stretch;
border-right: none;
border-top: none;
border-bottom: none;
min-width: 20%;
max-width: 70%;
width: fit-content;
text-wrap: balance;
font-size: 2em;
position: relative;
box-shadow:
-3px 0 15px rgba(66, 162, 241, 0.3),
inset 2px 0 20px rgba(66, 162, 241, 0.1),
0 4px 12px rgba(0, 0, 0, 0.5);
border-radius: 0 4px 4px 0;
backdrop-filter: blur(3px);
}

.dlog::before {
content: url("/wiki/Special:Redirect/file/DNexus.png") " " url("/wiki/Special:Redirect/file/Dlog-text.png");
display: inline-block;
background:
linear-gradient(to right,
rgba(66, 162, 241, 0.25) 0%,
rgba(66, 162, 241, 0.15) 50%,
transparent 100%),
linear-gradient(135deg, rgba(76, 87, 181, 0.2), transparent 60%);
padding: 0.5em 0.8em;
border-radius: 3px 0 0 3px;
margin-right: 12px;
box-shadow:
inset -2px 0 10px rgba(66, 162, 241, 0.3),
2px 0 8px rgba(66, 162, 241, 0.2);
border-right: 1px solid rgba(66, 162, 241, 0.4);
position: relative;
}

.dlog::after {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(180deg,
rgba(66, 162, 241, 0.8) 0%,
rgba(66, 162, 241, 1) 50%,
rgba(66, 162, 241, 0.8) 100%);
box-shadow:
0 0 8px rgba(66, 162, 241, 0.8),
0 0 15px rgba(66, 162, 241, 0.5);
animation: dlog-pulse 3s ease-in-out infinite;
}

@keyframes dlog-pulse {
0%, 100% {
opacity: 0.7;
box-shadow:
0 0 8px rgba(66, 162, 241, 0.8),
0 0 15px rgba(66, 162, 241, 0.5);
}
50% {
opacity: 1;
box-shadow:
0 0 12px rgba(66, 162, 241, 1),
0 0 20px rgba(66, 162, 241, 0.7);
}
}

.dlog p {
position: relative;
color: #f1f1f1;
font-family: "Daedalus", Sans-Serif;
font-size: 1em;
line-height: 1.3;
text-shadow:
0 0 8px rgba(66, 162, 241, 0.8),
0 0 4px rgba(66, 162, 241, 0.6),
0 2px 4px rgba(0, 0, 0, 0.9);
word-wrap: break-word;
padding: 0.8em;
padding-top: 0.5em;
background: linear-gradient(90deg, rgba(66, 162, 241, 0.03), transparent 80%);
border-radius: 2px;
}

@media only screen and (max-width: 768px) {
.daedalus-log {
display: none;
}
}

/* ===============================
Skill Tree
=============================== */
/**
* ==============================
* Tooltips Gadget (Base Styles)
* ==============================
*/
.main-tooltip {
border-radius:5px;
border-image-source: url("/wiki/Special:Redirect/file/Wiki-border-kurva.png");
border-image-slice: 6;
border-image-width: 6px;
border-image-repeat: repeat repeat;
box-shadow: 0 0 10px black;
margin-bottom: 5px;
padding: 1em 1em;
background-color: #312b38;
}

#tooltip-wrapper {
padding: 0.3em;
}

.has-redlinks,
.tooltip-loading,
.advanced-tooltip .tooltip-contents {
display: none;
}

.tooltips-init-complete {
cursor: help;
}

.main-tooltip img {
vertical-align: middle;
}

.advanced-tooltip img {
box-shadow: 0 0 10px #000000;
}

.advanced-tooltip .imhoveringit {
position: relative;
display: inline-block;
}

.advanced-tooltip .tooltip-base-image,
.advanced-tooltip .tooltip-hover-image {
transition: opacity 0.2s ease;
}

.advanced-tooltip .tooltip-hover-image {
position: absolute;
top: 0;
left: 0;
opacity: 0;
pointer-events: none;
}

.advanced-tooltip .tooltip-base-image {
opacity: 1;
}

.advanced-tooltip:hover .tooltip-base-image {
opacity: 0;
}

.advanced-tooltip:hover .tooltip-hover-image {
opacity: 1;
pointer-events: auto;
}

.tabber__panel {
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}

.tabber__panel::-webkit-scrollbar {
display: none;
}
/**
* ==============================
* Skill Tree Layout
* ==============================
*/
.skill-tree {
display: flex;
flex-direction: column;
align-items: center;
row-gap: 15px; /* vertical spacing between rows */
}

/* Rows */
.skill-tree .row {
display: flex;
justify-content: center;
}
.skill-tree .row-1 { gap: 0; }
.skill-tree .row-2 { gap: 40px; }
.skill-tree .row-3 { gap: 20px; }
.skill-tree .wide-gap { gap: 80px; } /* For Trap tree rows */

/* Nodes */
.node {
display: inline-block;
width: 80px; /* keeps nodes aligned */
text-align: center;
}

/* Node Title Style */
.skill-title {
font-weight: bold;
color: #fca801;
text-shadow: 2px 2px 8px black;
border-bottom: 1px solid #fca801;
padding-bottom: 0.5em;
}
.main-tooltip p {
color: #54fc55;
}
.main-tooltip span {
color: #54fcfc;
text-shadow: 0 0 2px #54fcfc;
}

/* item pages */

.display-items {
display: flex;
flex-wrap: wrap;
}

a.tabber__tab {
font-size: 2em;
text-shadow: 1px 1px 12px black;
}
.druid-main-images-label {
font-size: 1.2em;
}
.druid-main-images-label.focused {
box-shadow: 0 0 20px var(--druid-link-color);
}

.hoverbox:hover {
background-color: #1a1a22E0;
box-shadow: 0 0 30px 30px var(--background-color-base);
border-radius: 0 0 15px 15px;
border-top: 0.1em solid var(--color-progressive--hover);
transition: 0.4s;
}

.hoverbox {
background-color: transparent;
box-shadow: none;
transition: 0.5s;
padding: 0 1em 1em;
margin: 1em 0 1em -0.5em;
position: relative;
z-index: 0;
border-top: 0.1em solid var(--color-progressive);
display: flow-root;
}

.hoverbox > div > h3 > a {
border-bottom: 2px solid currentColor;
background: no-repeat cover;
}

.hoverbox > div {
overflow: visible;
}

.dungeon-clear {
max-width: 100%;
overflow: visible;
}

.lore {
max-width: 100%;
overflow: visible;
}

.mp-main {
background-size: 100% 100%;
background-repeat: no-repeat;
aspect-ratio: 16 / 9;
padding-top: 1em;
padding-bottom: 1em;
}

.class-rarities {
display:flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
}

.class-rarities > div {
margin: 1em 0 1em;
padding: 1em 1.5em;
border-radius: 8px;
position: relative;
background:
linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, transparent 50%),
linear-gradient(to right, transparent, rgba(255, 255, 255, 0.03), transparent);
backdrop-filter: blur(2px);
border: 1px solid rgba(255, 255, 255, 0.1);
}

.class-rarities > div::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 2px;
background: linear-gradient(90deg, transparent, currentColor 50%, transparent);
opacity: 0.3;
filter: blur(1px);
}

.class-rarities > div > p > img {
margin: 0 2em 0 0;
border-radius: 100px;
background: #1a1a2280;
box-shadow: 0 0 10px black;
}

.class-rarities > div > p > span > img {
text-shadow: 0 0 10px black;
}

.class-rarities > div > p > a {
text-shadow: 0 0 10px black;
}

.class-irradiated {
box-shadow: 0 0 20px #4dff4d;
background-color: #4dff4d80;
}

.class-gilded {
box-shadow: 0 0 20px #ffb84d;
background-color: #ffb84d80;
}

.class-royal{
box-shadow: 0 0 20px #a86dff;
background-color: #a86dff80;
}

.class-bloodshot {
box-shadow: 0 0 20px #d23c3c;
background-color: #d23c3c80;
}

.class-voidbound{
box-shadow: 0 0 20px #e48cff;
background-color: #e48cff80;
}

.class-unholy {
box-shadow: 0 0 20px black;
background-color: #00000080;
}

div.class-rarities > div > p > a {
font-weight: bold;
}
/* TABLES */

.wikitable td,
.wikitable th {
border: none !important;
}

.wikitable {
margin: 0;
}

td > div.mw-collapsible > button {
margin: 1.5em;
padding: 1.2em;
background-color: #8dbec280;
box-shadow: 0 0 20px #8dbec2FF;
border-radius: 30px;
}

.wikitable td,
.wikitable th {
font-size: 1.1em;
}

td > div.mw-collapsible > button > span.mw-collapsible-text {
text-shadow: 0 0 4px black;
}

td > div.mw-collapsible > button > span.mw-collapsible-text:hover {
text-decoration: none;
}

td > div.mw-collapsible > button.mw-collapsible-toggle-default::after {
content: '';
}

td > div.mw-collapsible > button.mw-collapsible-toggle-default::before {
content: '';
}

/* Inline Image Template */

.inline-image-image {
position: relative;
display: inline-block;
}

.inline-image-image > p > span > span > img {
box-shadow:
0 0 30px 5px rgba(66, 162, 241, 0.3),
0 4px 20px rgba(0, 0, 0, 0.8),
inset 0 0 40px 5px rgba(66, 162, 241, 0.05);
border-radius: 8px;
border: 2px solid rgba(66, 162, 241, 0.5);
background: linear-gradient(135deg, rgba(66, 162, 241, 0.02), transparent 50%);
padding: 4px;
transition: all 0.3s ease;
}

.inline-image-image > p > span > span > img:hover {
box-shadow:
0 0 40px 8px rgba(66, 162, 241, 0.5),
0 6px 25px rgba(0, 0, 0, 0.9),
inset 0 0 50px 8px rgba(66, 162, 241, 0.08);
border-color: rgba(66, 162, 241, 0.7);
transform: translateY(-2px);
}

.inline-image-caption {
margin-top: 0.5em;
position: relative;
}

.inline-image-caption > p {
background:
linear-gradient(90deg,
rgba(66, 162, 241, 0.12) 0%,
rgba(26, 26, 34, 0.8) 15%,
rgba(26, 26, 34, 0.6) 85%,
transparent 100%);
border-left: 3px solid rgba(66, 162, 241, 0.6);
border-radius: 3px;
padding: 0.6em 1em;
margin: 0;
box-shadow:
inset 0 0 20px 2px rgba(66, 162, 241, 0.05),
0 2px 8px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(2px);
}

.inline-image-caption > p > span {
font-weight: 600;
font-size: 0.95em;
color: var(--color-base);
text-shadow:
0 0 8px rgba(66, 162, 241, 0.6),
0 2px 4px rgba(0, 0, 0, 0.8);
letter-spacing: 0.02em;
}

.inline-image-caption > p > span::before {
content: '❖ ';
color: rgba(66, 162, 241, 0.8);
text-shadow:
0 0 10px rgba(66, 162, 241, 0.9),
0 0 5px rgba(66, 162, 241, 0.6);
margin-right: 0.3em;
}

.inline-image-caption > p::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg,
rgba(66, 162, 241, 0.8) 0%,
rgba(66, 162, 241, 0.4) 50%,
rgba(66, 162, 241, 0.8) 100%);
opacity: 0.7;
}

/* dynamic gif display css ONLY TOUCH IF YOU KNOW WHAT YOU ARE DOING */
.dynamic-gif-container {
padding-top: 8em;
width: fit-content;
max-width: 100%;
margin-right: 1em;
margin-bottom: 1em;
margin-left: 1em;
z-index: 100;
transition: all 0.3s ease;
display: block !important;
visibility: visible !important;
clear: both;
}

/* Override for flexbox container */
.gif-tabber-display-container .dynamic-gif-container {
padding-top: 0;
margin: 0;
clear: none;
}

.dynamic-gif-container.expanded .gif-display-area {
max-height: none;
height: auto;
opacity: 1;
padding: 15px;
overflow: visible;
}

.gif-display-area {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 40%, rgba(76, 87, 181, 0.08) 100%),
radial-gradient(ellipse at center, rgba(66, 162, 241, 0.12), transparent 60%),
rgba(26, 26, 34, 0.95);
border-radius: 6px;
overflow: visible;
height: auto;
min-height: auto;
opacity: 1;
padding: 12px;
transition: all 0.3s ease;
box-shadow:
0 0 30px 5px rgba(66, 162, 241, 0.2),
inset 0 0 40px 8px rgba(66, 162, 241, 0.05),
0 4px 20px rgba(0, 0, 0, 0.6);
border: 1px solid rgba(66, 162, 241, 0.4);
display: block !important;
visibility: visible !important;
position: relative;
backdrop-filter: blur(4px);
width: fit-content;
}

.gif-display-area::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.6) 20%,
rgba(66, 162, 241, 0.9) 50%,
rgba(66, 162, 241, 0.6) 80%,
transparent);
box-shadow: 0 0 10px rgba(66, 162, 241, 0.8);
}

.gif-header {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid var(--color-progressive);
}

.gif-title {
font-size: 2em;
font-weight: bold;
font-family: var(--heading-font-family);
color: var(--color-progressive);
margin: 0;
}

.gif-toggle-btn {
background: none;
border: 1px solid #4a4a4a;
color: #e0e0e0;
padding: 4px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 1em;
transition: all 0.2s ease;
}

.gif-toggle-btn:hover {
background: #2a2a2a;
border-color: #5a5a5a;
}

.gif-image-container {
width: 100%;
height: 400px;
min-height: 400px;
max-height: 400px;
display: flex;
align-items: center;
justify-content: center;
background: var(--background-color-base);
border-radius: 4px;
position: relative;
margin-bottom: 10px;
overflow: hidden;
}

.gif-image-container img {
max-width: 100%;
max-height: 100%;
height: auto;
width: auto;
display: block;
border-radius: 4px;
object-fit: contain;
}

.gif-image-container.loading::after {
content: '';
position: absolute;
width: 40px;
height: 40px;
border: 4px solid var(--color-progressive--hover);
border-top-color: #e0e0e0;
border-radius: 50%;
animation: spin 1s linear infinite;
}

@keyframes spin {
to { transform: rotate(360deg); }
}

.gif-error {
color: var(--color-destructive);
font-size: 1em;
text-align: center;
padding: 20px;
}

.gif-caption {
text-align: center;
color: var(--color-base);
font-size: 1em;
font-style: italic;
padding: 5px;
background: var(--color-progressive--hover);
border-radius: 4px;
text-shadow: 0 0 5px var(--content-border-color);
display: none;
}

.gif-placeholder {
color: var(--color-progressive--hover);
font-size: 1em;
text-align: center;
padding: 60px 20px;
height: 500px;
}

@media (max-width: 768px) {
.dynamic-gif-container {
position: relative;
float: none;
width: 100%;
margin: 0 0 20px 0;
}

.dynamic-gif-container.expanded .gif-display-area {
max-height: none;
}
}

.skill-tree-section::after {
content: "";
display: table;
clear: both;
}

.tabber .tabbertab {
clear: both;
overflow: auto;
}

.gif-tabber-display-container {
display: flex;
flex-direction: row;
gap: 1.5em;
align-items: flex-start;
}

.gif-tabber-display-container > div:first-child {
flex: 1 1 auto;
min-width: 0;
}

.gif-tabber-display-container > .dynamic-gif-container {
flex: 0 0 auto;
position: sticky;
top: 1em;
align-self: flex-start;
padding-top: 0;
margin: 0;
min-width: 500px;
max-width: 600px;
}

@media screen and (max-width: 1200px) {
.gif-tabber-display-container {
flex-direction: column;
width: 100%;
max-width: 100%;
overflow: hidden;
}

.gif-tabber-display-container > .dynamic-gif-container {
position: static;
width: 100%;
max-width: 100%;
min-width: 0;
order: 2; /* Move gif display below tabber */
margin-top: 1em;
}

.gif-tabber-display-container > div:first-child {
order: 1; /* Keep tabber on top */
width: 100%;
max-width: 100%;
min-width: 0;
overflow-x: auto;
}

/* Ensure tabber content doesn't overflow */
.gif-tabber-display-container #List\ of\ Skill\ Trees,
.gif-tabber-display-container .tabber,
.gif-tabber-display-container .tabbertab {
max-width: 100%;
overflow-x: auto;
box-sizing: border-box;
}

/* Hide gif display by default on mobile, show when expanded */
.gif-tabber-display-container > .dynamic-gif-container:not(.expanded) {
display: none;
}

/* When expanded on mobile, make it compact */
.gif-tabber-display-container > .dynamic-gif-container.expanded {
display: block;
}

.gif-tabber-display-container > .dynamic-gif-container .gif-display-area {
max-width: 100%;
}
}

.decor-page {
border-image: url(/wiki/Special:Redirect/file/Wiki-border-book.png);
border-image-slice: 65 122 65 122;
border-image-width: 100% 100% 100% 100%;
border-image-repeat: stretch stretch;
border-image-outset: 0;
border-style: solid;
color: var(--background-color-base);
width: 492px;
height: 262px;
}

.decor-page > p{
padding: 3.5em;
font-family: var(--heading-font-family);
}
.swap-silverling {
position: relative;
display: inline-block;
width: 7em;
text-align: left;
text-shadow: 0 0 10px currentColor;
font-weight: bold;
}
.swap-silverling::before,
.swap-silverling::after {
position: absolute;
left: 0;
bottom: -0.45em;
width: 140%;
text-align: inherit;
animation: fadeSwap 5s infinite ease-in-out;
}
.swap-silverling::before {
content: "Silverlings.";
opacity: 1;
}
.swap-silverling::after {
content: "Players.";
opacity: 0;
animation-delay: 2.5s;
}
@keyframes fadeSwap {
0%, 40% { opacity: 1; }
50%, 90% { opacity: 0; }
100% { opacity: 1; }
}
.main-welcome {
text-shadow: 0 0 2px black;
font-weight: bold;
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 0.5em;
padding: 14px 18px;
padding-right: 60px;
background: var(--background-color-base);
color: var(--color-progressive);
border: 2px solid var(--color-progressive);
font-family: var(--body-font-family);
font-size: 16px;
font-weight: 700;
transition: all 0.2s ease;
box-shadow: inset 0 0 0 2px #0f0f0f,
inset 0 0 20px #42a2f180;
padding: 1em;
}

.welcome-text {
flex: 2;
min-width: 300px;
border-left: 2px solid var(--color-progressive);
padding: 1em;
font-size: 2em;
}

div.main-welcome > .mp-links {
flex: 1;
min-width: 250px;
margin: 1em;
}

div.main-welcome > .mp-links > ul > li {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 50%, rgba(76, 87, 181, 0.08) 100%),
linear-gradient(to bottom, rgba(66, 162, 241, 0.15), rgba(76, 87, 181, 0.2), rgba(66, 162, 241, 0.15));
box-shadow:
inset 0 0 20px 4px rgba(66, 162, 241, 0.12),
0 4px 15px rgba(66, 162, 241, 0.2),
0 0 30px rgba(66, 162, 241, 0.15);
border: 1px solid rgba(66, 162, 241, 0.4);
border-radius: 4px;
padding: 1em 0.8em;
position: relative;
transition: all 0.3s ease;
backdrop-filter: blur(2px);
}

div.main-welcome > .mp-links > ul > li::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.6) 30%,
rgba(66, 162, 241, 0.9) 50%,
rgba(66, 162, 241, 0.6) 70%,
transparent);
box-shadow: 0 0 8px rgba(66, 162, 241, 0.8);
}

div.main-welcome > .mp-links > ul > li::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.4) 30%,
rgba(66, 162, 241, 0.6) 50%,
rgba(66, 162, 241, 0.4) 70%,
transparent);
}

div.main-welcome > .mp-links > ul > li:hover {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.15) 0%, transparent 50%, rgba(76, 87, 181, 0.15) 100%),
linear-gradient(to bottom, rgba(66, 162, 241, 0.25), rgba(76, 87, 181, 0.3), rgba(66, 162, 241, 0.25));
box-shadow:
inset 0 0 30px 6px rgba(66, 162, 241, 0.2),
0 6px 20px rgba(66, 162, 241, 0.3),
0 0 40px rgba(66, 162, 241, 0.25);
border-color: rgba(66, 162, 241, 0.6);
transform: translateY(-2px);
}

div.main-welcome > .mp-links > ul > li > a {
color: var(--color-base);
text-shadow:
0 0 8px rgba(66, 162, 241, 0.6),
0 2px 4px rgba(0, 0, 0, 0.8);
transition: all 0.2s ease;
}

div.main-welcome > .mp-links > ul > li:hover > a {
text-shadow:
0 0 12px rgba(66, 162, 241, 0.9),
0 0 6px rgba(66, 162, 241, 0.6),
0 2px 4px rgba(0, 0, 0, 0.8);
}

.mw-collapsible {
padding-top: 2em;
display: flow-root;
}

.tab-gif-container {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 40%, rgba(76, 87, 181, 0.08) 100%),
radial-gradient(ellipse at top left, rgba(66, 162, 241, 0.12), transparent 60%),
rgba(26, 26, 34, 0.95);
border: 1px solid rgba(66, 162, 241, 0.4);
border-radius: 6px;
padding: 12px;
margin: 1em 0;
box-shadow:
0 0 30px 5px rgba(66, 162, 241, 0.2),
inset 0 0 40px 8px rgba(66, 162, 241, 0.05),
0 4px 20px rgba(0, 0, 0, 0.6);
display: inline-block;
width: fit-content;
max-width: 100%;
position: relative;
backdrop-filter: blur(4px);
}

.tab-gif-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.6) 20%,
rgba(66, 162, 241, 0.9) 50%,
rgba(66, 162, 241, 0.6) 80%,
transparent);
box-shadow: 0 0 10px rgba(66, 162, 241, 0.8);
}

.tab-gif-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding-bottom: 10px;
font-size: 2em;
border-bottom: 1px solid var(--color-progressive);
}

.tab-gif-title {
font-size: 1.5em;
font-weight: bold;
font-family: var(--heading-font-family);
color: var(--color-progressive);
margin: 0;
}

.tab-gif-toggle-btn {
background: none;
border: 1px solid #4a4a4a;
color: #e0e0e0;
padding: 4px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 0.9em;
transition: all 0.2s ease;
}

.tab-gif-toggle-btn:hover {
background: #2a2a2a;
border-color: #5a5a5a;
}

.tab-gif-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid var(--color-progressive);
}

.tab-gif-tab {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.08), transparent 60%),
rgba(26, 26, 34, 0.6);
color: var(--color-base);
border: 1px solid rgba(66, 162, 241, 0.4);
font-family: var(--body-font-family);
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
font-size: 1em;
font-weight: bold;
transition: all 0.2s ease;
white-space: nowrap;
text-shadow:
0 0 6px rgba(66, 162, 241, 0.5),
0 2px 4px rgba(0, 0, 0, 0.8);
box-shadow:
inset 0 0 15px 2px rgba(66, 162, 241, 0.08),
0 2px 8px rgba(0, 0, 0, 0.4);
position: relative;
}

.tab-gif-tab::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.5) 30%,
rgba(66, 162, 241, 0.7) 50%,
rgba(66, 162, 241, 0.5) 70%,
transparent);
}

.tab-gif-tab:hover {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.15), transparent 60%),
rgba(26, 26, 34, 0.8);
color: #ffffff;
border-color: rgba(66, 162, 241, 0.6);
box-shadow:
inset 0 0 20px 3px rgba(66, 162, 241, 0.15),
0 4px 12px rgba(66, 162, 241, 0.3),
0 0 20px rgba(66, 162, 241, 0.2);
text-shadow:
0 0 10px rgba(66, 162, 241, 0.8),
0 0 5px rgba(66, 162, 241, 0.6),
0 2px 4px rgba(0, 0, 0, 0.8);
}

.tab-gif-tab.tab-gif-active {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.3) 0%, rgba(76, 87, 181, 0.25) 100%),
rgba(66, 162, 241, 0.2);
color: #ffffff;
border-color: rgba(66, 162, 241, 0.8);
font-weight: bold;
box-shadow:
inset 0 0 25px 5px rgba(66, 162, 241, 0.2),
0 4px 15px rgba(66, 162, 241, 0.4),
0 0 30px rgba(66, 162, 241, 0.3);
text-shadow:
0 0 12px rgba(66, 162, 241, 1),
0 0 8px rgba(66, 162, 241, 0.8),
0 2px 4px rgba(0, 0, 0, 0.8);
}

.tab-gif-display-area {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.03) 0%, transparent 50%),
rgba(26, 26, 34, 0.4);
border-radius: 4px;
padding: 8px;
min-height: auto;
box-shadow: inset 0 0 20px 3px rgba(66, 162, 241, 0.08);
border: 1px solid rgba(66, 162, 241, 0.15);
}

.tab-gif-display-area .gif-image-container {
width: fit-content;
min-height: auto;
max-height: none;
display: inline-flex;
align-items: center;
justify-content: center;
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.05), transparent 60%),
rgba(0, 0, 0, 0.3);
border-radius: 3px;
position: relative;
margin-bottom: 8px;
overflow: hidden;
box-shadow:
0 0 20px 3px rgba(66, 162, 241, 0.15),
inset 0 0 15px 2px rgba(66, 162, 241, 0.05);
border: 1px solid rgba(66, 162, 241, 0.3);
padding: 4px;
}

.tab-gif-display-area .gif-image-container img {
max-width: 100%;
height: auto;
width: auto;
display: block;
border-radius: 2px;
object-fit: contain;
transition: opacity 0.2s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.tab-gif-display-area .gif-image-container.loading::after {
content: '';
position: absolute;
width: 40px;
height: 40px;
border: 4px solid var(--color-progressive--hover);
border-top-color: #e0e0e0;
border-radius: 50%;
animation: tab-gif-spin 1s linear infinite;
}

@keyframes tab-gif-spin {
to { transform: rotate(360deg); }
}

.tab-gif-display-area .gif-placeholder {
color: var(--color-progressive--hover);
font-size: 1em;
text-align: center;
padding: 60px 20px;
font-style: italic;
}

.tab-gif-display-area .gif-error {
color: var(--color-destructive);
font-size: 1em;
text-align: center;
padding: 20px;
background: rgba(255, 107, 107, 0.1);
border-radius: 4px;
}

.tab-gif-display-area .gif-caption {
text-align: center;
color: var(--color-base);
font-size: 1em;
font-style: italic;
padding: 6px 10px;
background:
linear-gradient(90deg,
rgba(66, 162, 241, 0.2) 0%,
rgba(66, 162, 241, 0.3) 50%,
rgba(66, 162, 241, 0.2) 100%),
rgba(26, 26, 34, 0.6);
border-radius: 3px;
text-shadow:
0 0 8px rgba(66, 162, 241, 0.8),
0 0 4px rgba(66, 162, 241, 0.6),
0 2px 4px rgba(0, 0, 0, 0.9);
margin-top: 6px;
border: 1px solid rgba(66, 162, 241, 0.4);
box-shadow:
inset 0 0 15px 2px rgba(66, 162, 241, 0.1),
0 2px 8px rgba(0, 0, 0, 0.4);
}

@media (max-width: 768px) {
.tab-gif-container {
display: block;
width: 100%;
min-width: auto;
margin: 1em 0;
}

.tab-gif-tabs {
flex-direction: column;
}

.tab-gif-tab {
width: 100%;
text-align: center;
}

.tab-gif-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}

.tab-gif-toggle-btn {
width: 100%;
}
}

.tab-gif-container.full-width {
display: block;
width: 100%;
}

.tab-gif-container.float-left {
float: left;
margin-right: 1em;
}

.tab-gif-container.float-right {
float: right;
margin-left: 1em;
}

/* ============================================================
MOBILE ADJUSTMENTS
============================================================ */

@media screen and (max-width: 720px) {
/* 1. BOX FIX */
*, *::before, *::after {
box-sizing: border-box !important;
}

.mp-main {
aspect-ratio: auto !important;
height: auto !important;
background-size: cover !important;
}

/* 2. HEIGHT & OVERFLOW */
.mp-box, .mp-body, .main-welcome, .mp-links, .welcome-text, #mp-box-welcome, #mp-welcome {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 6px !important;
padding-right: 6px !important;
float: none !important;
overflow: visible !important;
display: block !important;
}

/* 3. WELCOME BOX */
.main-welcome {
display: flex !important;
flex-direction: column !important;
padding: 10px !important;
align-items: stretch !important;
border-radius: 4px !important;
}

.welcome-text {
font-size: 1em !important;
border-left: none !important;
border-bottom: 2px solid var(--color-progressive);
margin-bottom: 15px;
padding: 8px 0 !important;
text-align: left;
}

/* 4. MASTER GRID */
.mp-main, .mp-links, .mp-links > ul {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding: 0 !important;
min-width: 0 !important;
box-sizing: border-box !important;
}

.mp-main {
margin-top: 20px !important;
}

.mp-links > ul {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
list-style: none !important;
}

/* 5. INDIVIDUAL BUTTON STYLING */
.mp-links > ul > li {
flex: none !important;
width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
margin: 0 !important;

display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
min-height: 110px !important;
padding: 10px 5px !important;

background: linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 50%, rgba(76, 87, 181, 0.08) 100%),
linear-gradient(to bottom, rgba(66, 162, 241, 0.15), rgba(76, 87, 181, 0.2), rgba(66, 162, 241, 0.15)) !important;
box-shadow: inset 0 0 15px rgba(66, 162, 241, 0.12), 0 2px 8px rgba(0,0,0,0.3) !important;
border: 1px solid rgba(66, 162, 241, 0.4) !important;
border-radius: 6px !important;
}

div.main-welcome > .mp-links > ul > li:nth-child(3) {
grid-column: span 2 !important;
width: 100% !important;
justify-self: center !important;
}

/* 7. ICON & TEXT GLOW */
.mp-links img {
max-width: 45px !important;
height: auto !important;
margin-bottom: 6px !important;
display: block !important;
}

.mp-links > ul > li > a {
font-size: 0.85em !important;
line-height: 1.1 !important;
white-space: normal !important;
text-align: center !important;
color: #fff !important;
text-shadow: 0 0 8px rgba(66, 162, 241, 0.8), 0 0 4px rgba(66, 162, 241, 0.5), 0 2px 4px rgba(0, 0, 0, 0.9) !important;
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}

.mp-box h2 { font-size: 1.5em !important; padding: 0.2em 0 !important; }
.mp-box .welcome-message { font-size: 1.3em !important; padding: 0.4em !important; }
.druid-infobox .druid-title { font-size: 1.3em !important; min-height: auto !important; }
a.tabber__tab { font-size: 1.1em !important; }
.node { width: 45px !important; }

/* 9. DUNGEON PAGE */
.dungeon-page-smaller-box ul {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}

.dungeon-page-smaller-box li {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 10px 0 !important;
padding: 1em !important;
flex: none !important;
border: 1px solid rgba(66, 162, 241, 0.3) !important;
box-shadow: inset 0 0 20px 3px rgba(66, 162, 241, 0.05), 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

.dungeon-page-smaller-box a {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
width: 100% !important;
}
.dungeon-page-box h2, .mp-box h2 {
text-align: center !important;
width: 100% !important;
}

/* 10. GENERAL PAGE */
.mw-parser-output h2 {
font-size: 1.6em !important;
margin-top: 0.1em !important;
margin-bottom: 0.05em !important;
padding: 0 !important;
border: none !important;
}
.mp-box h2::after { bottom: -2px !important; }
.mw-parser-output p, .mw-parser-output li {
font-size: 0.9em !important;
line-height: 1.5 !important;
margin-top: 0.2em !important;
}

/* 11. BUTTONS */
.button-expand-header {
background: var(--background-color-base) !important;
box-shadow: inset 0 0 0 2px #0f0f0f, inset 0 0 20px #42a2f180 !important;
padding-right: 65px !important;
font-size: 14px !important;
white-space: normal !important;
text-align: left !important;
display: flex !important;
align-items: center !important;
border-radius: 4px !important;
min-height: 60px !important;
}

.button-expand-header img {
flex-shrink: 0 !important;
width: 45px !important;
height: 45px !important;
object-fit: contain !important;
margin-right: 6px !important;
}

/* 12. MAIN PAGE TITLE */
h1#firstHeading,
.mw-body h1,
.section-heading h1 {
font-size: 1.5em !important;
width: 100% !important;
text-align: center !important;
display: block !important;
margin: 10px 0 !important;
letter-spacing: 0.05em !important;
}

/* 13. TABS */
.header-container,
.pre-content,
.page-header-bar {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 100% !important;
}

.minerva__tab-container {
display: flex !important;
width: 100% !important;
justify-content: stretch !important;
margin-bottom: 5px !important;
}
.minerva__tab-container .tab {
flex: 1 !important;
text-align: center !important;
}

.page-actions-menu {
width: 100% !important;
display: block !important;
}
.page-actions-menu__list {
display: flex !important;
width: 100% !important;
justify-content: space-around !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
.page-actions-menu__list li {
flex: 1 !important;
display: flex !important;
justify-content: center !important;
}

/* 14. TABLE STACK */
.mw-parser-output div[style*="display:flex"]:has(.wikitable) {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 100% !important;
gap: 20px !important;
}

.mw-parser-output .wikitable td,
.mw-parser-output .wikitable th {
white-space: nowrap !important;
word-break: normal !important;
padding: 10px 5px !important;
}

/* 15. DLOG STUFF */
.dlog {
font-size: 1em !important;
max-width: 100% !important;
padding: 0.5em !important; /* Optional: tightens the box for mobile */
}

.dlog::before {
zoom: 0.6;
margin-bottom: 5px;
display: block;
width: fit-content;
}

/* 16. INLINE IMAGE STUFF */
.inline-image-template {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
display: block !important;
margin: 1em 0 !important;
}

.inline-image-image {
display: block !important;
width: 100% !important;
text-align: center;
}

.inline-image-image img,
.inline-image-image > p > span > span > img {
max-width: 100% !important;
height: auto !important;
width: auto !important;
}

.inline-image-caption {
width: 100% !important;
box-sizing: border-box !important;
}

.inline-image-caption > p {
font-size: 0.7em !important;
white-space: normal !important;
}

/* 17. OTHER */
.pre-dungeon p {
font-size: 0.8em !important;
padding: 0.7em 1em !important;
}

/* fixed 492px decor/book pages overflow a phone and force zoom-out */
.decor-page {
width: 100% !important;
max-width: 492px !important;
height: auto !important;
box-sizing: border-box !important;
}

.decor-page > p {
padding: 1.5em !important;
}
}

/* ============================================================
THE ARCHIVES — MAIN PAGE v2
Scoped entirely to .archive-page ([[Telos Realms Wiki]]).
Built from the wiki's own vocabulary: kurva pixel frames,
embossed Daedalus, Courier ledger notes, Minecraft palette.
Shared classes (.mp-links, .mp-box, .dlog) untouched.
============================================================ */

.archive-page {
--ar-accent: #42a2f1;
--ar-accent-bright: #7cc2ff;
--ar-cream: #feffe5;
--ar-line: rgba(66, 162, 241, 0.18);
--ar-panel: rgba(10, 14, 24, 0.85);
--ar-panel-raised: rgba(15, 20, 33, 0.88);
--ar-text: #dde5f2;
--ar-text-dim: #93a0b8;
--ar-gold: #ffc05f;
--ar-ease: cubic-bezier(0.32, 0.72, 0, 1);
--ar-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
max-width: 1280px;
margin: 0 auto;
font-family: var(--body-font-family);
color: var(--ar-text);
}

/* --- one-time entry cascade (no looping motion) --- */
@keyframes ar-enter {
from { opacity: 0; transform: translateY(12px); filter: blur(4px); }
to { opacity: 1; transform: none; filter: none; }
}

.archive-page > * { animation: ar-enter 0.55s var(--ar-ease-out) both; }
.archive-page > *:nth-child(1) { animation-delay: 0.05s; }
.archive-page > *:nth-child(2) { animation-delay: 0.12s; }
.archive-page > *:nth-child(3) { animation-delay: 0.19s; }
.archive-page > *:nth-child(4) { animation-delay: 0.25s; }
.archive-page > *:nth-child(5) { animation-delay: 0.30s; }
.archive-page > *:nth-child(6) { animation-delay: 0.34s; }
.archive-page > *:nth-child(n+7) { animation-delay: 0.38s; }

/* --- hero: centered greeting panel --- */
.archive-hero {
text-align: center;
padding: 2.4em 2.4em 0;
background:
radial-gradient(ellipse at 50% -10%, rgba(66, 162, 241, 0.14), transparent 60%),
var(--ar-panel);
border-style: solid;
border-image-source: url("/wiki/Special:Redirect/file/Wiki-border-kurva.png");
border-image-slice: 6;
border-image-width: 6px;
border-image-repeat: repeat repeat;
}

.archive-hero p { margin: 0; }

.ar-hero-emblem img { filter: drop-shadow(0 0 18px rgba(66, 162, 241, 0.55)); }

.ar-hero-eyebrow {
margin-top: 0.9em;
font-style: italic;
font-size: 0.98em;
color: #8493ad;
}

.ar-hero-title {
font-family: var(--heading-font-family);
font-size: clamp(2.8em, 6.5vw, 4.6em);
line-height: 1.02;
margin-top: 0.12em;
color: var(--ar-cream);
text-rendering: geometricPrecision;
text-shadow:
0 0.06em 0 color-mix(in srgb, currentColor 50%, black),
0 0.12em 0 color-mix(in srgb, currentColor 10%, black),
0 0 0.2em currentColor;
}

.ar-hero-sub {
margin: 0.6em auto 0;
max-width: 38em;
color: var(--ar-text-dim);
font-size: 1.08em;
line-height: 1.6;
text-wrap: balance;
}

.archive-status {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.4em 2.4em;
margin: 1.8em -2.4em 0;
padding: 0.85em 1.5em 1em;
border-top: 1px solid var(--ar-line);
font-size: 0.92em;
color: #7d92b3;
}

.ar-stat b { color: var(--ar-cream); font-weight: 600; margin-right: 0.15em; font-variant-numeric: tabular-nums; }

.ar-stat-note {
color: #54fc54;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, black);
}

/* --- D's welcome ledger + the three starting records --- */
.archive-comm {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: 14px;
margin-top: 14px;
align-items: stretch;
}

.archive-transmission {
background: var(--ar-panel);
border-left: 3px solid var(--ar-accent);
padding: 1.2em 1.6em 1.1em;
box-shadow: inset 0 0 24px 4px rgba(66, 162, 241, 0.07);
}

.ar-comm-eyebrow {
font-family: 'Courier New', monospace;
font-weight: 700;
font-size: 0.88em;
color: #7d92b3;
}

.ar-comm-greeting {
font-family: var(--heading-font-family);
font-size: 2em;
margin-top: 0.3em;
color: var(--ar-cream);
text-rendering: geometricPrecision;
text-shadow:
0 0.08em 0 color-mix(in srgb, currentColor 35%, black),
0 0 0.2em color-mix(in srgb, currentColor 60%, transparent);
}
.ar-comm-greeting .swap-silverling { color: var(--ar-accent-bright); width: 6.5em; }

.archive-transmission p {
margin: 0.8em 0 0;
color: #bcc8dd;
line-height: 1.62;
}

.ar-sign {
margin-top: 0.45em;
text-align: right;
font-family: var(--heading-font-family);
font-size: 1.7em;
color: var(--ar-accent-bright);
text-shadow: 0 0 14px rgba(66, 162, 241, 0.6), 0 2px 0 rgba(0, 0, 0, 0.6);
}

.ar-d {
color: var(--ar-accent-bright);
font-weight: 700;
text-shadow: 0 0 12px rgba(66, 162, 241, 0.65);
}

.ar-silver {
color: #cfd6e2;
font-weight: 600;
text-shadow: 0 0 10px rgba(207, 214, 226, 0.4);
}

.archive-directives { display: flex; flex-direction: column; gap: 10px; }

.ar-directives-label {
font-family: 'Courier New', monospace;
font-weight: 700;
font-size: 0.88em;
color: #7d92b3;
padding-left: 2px;
}

.ar-directive {
display: flex;
align-items: center;
gap: 0.9em;
flex: 1;
padding: 0.6em 1em;
background: var(--ar-panel-raised);
border: 1px solid var(--ar-line);
cursor: pointer;
transition:
background-color 0.22s var(--ar-ease),
border-color 0.22s var(--ar-ease),
transform 0.22s var(--ar-ease),
box-shadow 0.22s var(--ar-ease);
}

.ar-directive:hover {
background: rgba(24, 33, 54, 0.92);
border-color: rgba(66, 162, 241, 0.5);
transform: translateY(-1px);
box-shadow:
inset 0 0 16px 2px rgba(66, 162, 241, 0.15),
0 4px 14px rgba(0, 0, 0, 0.45);
}

.ar-directive:active { transform: translateY(0) scale(0.99); }

.ar-directive p { margin: 0; }
.ar-directive > a,
.ar-directive > span[typeof] { flex-shrink: 0; }
.ar-directive img { display: block; }

.ar-directive-title a {
font-family: var(--heading-font-family);
font-size: 1.3em;
line-height: 1;
color: var(--ar-cream);
text-decoration: none;
text-shadow: 0 2px 0 color-mix(in srgb, currentColor 20%, black);
}
.ar-directive-title a:visited { color: var(--ar-cream); }

.ar-directive-sub { color: var(--ar-text-dim); font-size: 0.88em; margin-top: 2px; }

.ar-directive-go {
margin-left: auto;
font-size: 1.5em;
line-height: 1;
color: #5e7795;
transition: transform 0.22s var(--ar-ease), color 0.22s var(--ar-ease);
}
.ar-directive:hover .ar-directive-go { transform: translateX(3px); color: var(--ar-accent-bright); }

/* --- section headers: ❖ marker, embossed Daedalus, D's aside --- */
.ar-sect {
display: flex;
align-items: baseline;
gap: 0.6em;
margin: 2.2em 0 0.9em;
}

.ar-sect-mark {
color: var(--ar-accent-bright);
text-shadow: 0 0 10px rgba(124, 194, 255, 0.9), 0 0 5px rgba(124, 194, 255, 0.6);
}

.ar-sect-name {
font-family: var(--heading-font-family);
font-size: 2.1em;
line-height: 1;
color: var(--ar-cream);
text-rendering: geometricPrecision;
text-shadow:
0 0.06em 0 color-mix(in srgb, currentColor 50%, black),
0 0.12em 0 color-mix(in srgb, currentColor 10%, black),
0 0 0.2em currentColor;
}

.ar-sect-sub {
font-style: italic;
color: #7d8ba5;
font-size: 0.95em;
margin-left: 0.3em;
}

.ar-sect::after {
content: '';
flex: 1;
align-self: center;
height: 1px;
background: linear-gradient(90deg, rgba(66, 162, 241, 0.5), var(--ar-line) 40%, transparent);
}

/* --- record cards --- */
.archive-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 14px;
}

.ar-card {
display: flex;
align-items: flex-start;
gap: 1em;
grid-column: span 4;
padding: 1.05em 1.15em 1em;
background-color: var(--ar-panel);
border-style: solid;
border-image-source: url("/wiki/Special:Redirect/file/Wiki-border-kurva.png");
border-image-slice: 6;
border-image-width: 6px;
border-image-repeat: repeat repeat;
cursor: pointer;
transition:
background-color 0.22s var(--ar-ease),
transform 0.22s var(--ar-ease),
box-shadow 0.22s var(--ar-ease);
}

.ar-w6 { grid-column: span 6; }
.ar-w4 { grid-column: span 4; }
.ar-w3 { grid-column: span 3; }

.ar-card:hover {
background-color: rgba(20, 28, 46, 0.92);
transform: translateY(-2px);
box-shadow:
inset 0 0 20px 4px rgba(66, 162, 241, 0.16),
0 8px 22px rgba(0, 0, 0, 0.45),
0 0 22px -6px rgba(66, 162, 241, 0.45);
}

.ar-card:active { transform: translateY(0) scale(0.99); }

.ar-card > a,
.ar-card > span[typeof] { flex-shrink: 0; }

.ar-card img {
display: block;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
transition: transform 0.22s var(--ar-ease);
}
.ar-card:hover img { transform: translateY(-2px); }

.ar-card-body { flex: 1; min-width: 0; }

.ar-card-titles { display: flex; align-items: baseline; gap: 0.7em; flex-wrap: wrap; }
.ar-card-titles p { margin: 0; }

.ar-card-titles a {
font-family: var(--heading-font-family);
font-size: 1.5em;
line-height: 1.05;
color: var(--ar-cream);
text-decoration: none;
text-rendering: geometricPrecision;
text-shadow:
0 0.08em 0 color-mix(in srgb, currentColor 35%, black),
0 0 0.15em color-mix(in srgb, currentColor 40%, transparent);
transition: text-shadow 0.2s var(--ar-ease);
}
.ar-card-titles a:visited { color: var(--ar-cream); }
.ar-card:hover .ar-card-titles a {
text-shadow:
0 0.08em 0 color-mix(in srgb, currentColor 35%, black),
0 0 0.4em currentColor;
}

/* little colored annotations, same palette as the item infoboxes */
.ar-card-tag {
font-size: 0.8em;
font-weight: 600;
letter-spacing: 0.03em;
white-space: nowrap;
text-shadow: 1px 1px color-mix(in srgb, currentColor 20%, black);
}
.ar-mc-yellow { color: #fcfc54; }
.ar-mc-aqua { color: #54fcfc; }
.ar-mc-red { color: #fc5454; }
.ar-mc-green { color: #54fc54; }
.ar-mc-gold { color: #ffc05f; }

.ar-card-desc {
margin-top: 0.45em;
color: var(--ar-text-dim);
font-size: 0.93em;
line-height: 1.58;
}
.ar-card-desc p { margin: 0; }

.ar-card-links {
margin-top: 0.75em;
padding-top: 0.65em;
border-top: 1px solid rgba(66, 162, 241, 0.14);
font-size: 0.9em;
line-height: 1.9;
color: #51617c;
}
.ar-card-links p { margin: 0; }
.ar-see { font-style: italic; color: #5d6c85; margin-right: 0.3em; }
.ar-card-links a { color: var(--ar-gold); text-decoration: none; }
.ar-card-links a:visited { color: var(--ar-gold); }
.ar-card-links a:hover { color: #ffd28a; text-decoration: underline; }

/* --- footer --- */
.archive-footer {
margin-top: 2.4em;
padding: 1.5em 1em 0.5em;
border-top: 1px solid var(--ar-line);
text-align: center;
}

.ar-footer-quote {
font-style: italic;
font-size: 1.05em;
color: #aab6cc;
max-width: 42em;
margin: 0 auto 0.9em;
text-wrap: balance;
}
.ar-footer-quote .ar-d { font-style: normal; }

.ar-footer-line { color: #7e8ca6; font-size: 0.95em; }

.ar-footer-links { margin-top: 0.7em; font-size: 0.92em; color: #51617c; }
.ar-footer-links a { color: var(--ar-gold); text-decoration: none; }
.ar-footer-links a:hover { text-decoration: underline; }

/* --- keyboard focus --- */
.archive-page a:focus-visible {
outline: 2px solid var(--ar-accent-bright);
outline-offset: 2px;
}

/* --- responsive --- */
@media screen and (max-width: 1060px) {
.archive-comm { grid-template-columns: 1fr; }
.ar-w6 { grid-column: span 12; }
.ar-w4, .ar-w3 { grid-column: span 6; }
}

@media screen and (max-width: 720px) {
.archive-grid { display: flex; flex-direction: column; }
.archive-hero { padding: 1.6em 1.2em 0; }
.archive-status { margin-inline: -1.2em; padding-inline: 1.2em; gap: 0.4em 1.4em; }
.ar-sect { flex-wrap: wrap; margin-top: 1.8em; }
.ar-sect-name { font-size: 1.6em; }
.ar-sect-sub { flex-basis: 100%; margin-left: 1.5em; }
.ar-card { padding: 1em; }
.ar-comm-greeting { font-size: 1.6em; }
}

/* --- reduced motion: everything appears instantly --- */
@media (prefers-reduced-motion: reduce) {
.archive-page > *,
.archive-page .swap-silverling::before,
.archive-page .swap-silverling::after { animation: none !important; }
.archive-page *,
.archive-page *::before,
.archive-page *::after { transition-duration: 0.01ms !important; }
}

/* ============================================================
END THE ARCHIVES — MAIN PAGE v2
============================================================ */

/* ============================================================
DUNGEON PAGES v2
1) .dungeon-index / .dungeon-jump — the [[Dungeons]] list page,
danger-graded via --tier (green → void)
2) .npc-infobox — compact infobox chrome + single-line loot rows;
model renders keep their template sizes
3) .dungeon-page — wiki-article layout for dungeon pages
Heading selectors are written long to out-rank Minerva's
`.content .mw-parser-output .mw-heading { display:block }`.
============================================================ */

/* smooth anchor jumps (jump bar, TOC links) */
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}

/* --- 1) the dungeon index --- */

/* danger palette, shared by pills, markers, rules, tile glows */
.tier-g, .dj-g { --tier: #54fc54; }
.tier-o, .dj-o { --tier: #fca854; }
.tier-p, .dj-p { --tier: #cd08cd; }
.tier-r, .dj-r { --tier: #c20f0f; }
.tier-u, .dj-u { --tier: #8d9f97; }

/* jump bar: one tap to any tier bracket */
.dungeon-jump {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0.9em 0 0.3em;
}

.dungeon-jump .dj {
display: inline-block;
padding: 0.3em 0.85em;
background: rgba(15, 20, 33, 0.88);
border: 1px solid color-mix(in srgb, var(--tier, #42a2f1) 30%, transparent);
border-radius: 2px;
font-weight: 700;
font-size: 0.95em;
color: var(--tier, #dde5f2);
text-shadow: 1px 1px color-mix(in srgb, currentColor 20%, black);
transition:
border-color 0.18s cubic-bezier(0.32, 0.72, 0, 1),
background-color 0.18s cubic-bezier(0.32, 0.72, 0, 1),
transform 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}

.dungeon-jump .dj a { color: inherit; text-decoration: none; }

.dungeon-jump .dj:hover {
background: rgba(24, 33, 54, 0.92);
border-color: color-mix(in srgb, var(--tier, #42a2f1) 70%, transparent);
transform: translateY(-1px);
}

/* bracket headings — long selectors beat Minerva's .mw-heading{display:block} */
.dungeon-index .mw-heading3,
.content .mw-parser-output .dungeon-index .mw-heading3 {
display: flex;
align-items: center;
gap: 0.7em;
margin: 1.6em 0 0.8em;
border: none;
min-width: 0;
}

.dungeon-index .mw-heading3::before {
content: '❖';
font-size: 1.1em;
color: var(--tier, #7cc2ff);
text-shadow: 0 0 10px currentColor, 1px 1px color-mix(in srgb, currentColor 20%, black);
}

.dungeon-index .mw-heading3::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg,
color-mix(in srgb, var(--tier, #42a2f1) 50%, transparent),
color-mix(in srgb, var(--tier, #42a2f1) 15%, transparent) 45%,
transparent);
}

.dungeon-index h3,
.content .mw-parser-output .dungeon-index h3 {
flex: 0 0 auto;
margin: 0;
font-family: var(--heading-font-family);
font-size: 2em;
line-height: 1;
font-weight: normal;
color: #feffe5;
text-rendering: geometricPrecision;
text-shadow:
0 0.06em 0 color-mix(in srgb, currentColor 50%, black),
0 0.12em 0 color-mix(in srgb, currentColor 10%, black),
0 0 0.2em currentColor;
}

/* portal tiles: .mp-links supplies the kurva frame + whole-tile click JS */
.dungeon-grid { font-size: 1em; }

.dungeon-grid > ul {
justify-content: flex-start;
gap: 12px;
margin: 0;
}

.dungeon-grid > ul > li {
gap: 4px;
padding: 0.9em 1.1em 0.8em;
background-color: rgba(10, 14, 24, 0.85);
transition:
background-color 0.22s cubic-bezier(0.32, 0.72, 0, 1),
transform 0.22s cubic-bezier(0.32, 0.72, 0, 1),
box-shadow 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}

.dungeon-grid > ul > li:hover {
background-color: rgba(20, 28, 46, 0.92);
transform: translateY(-2px);
box-shadow:
inset 0 0 20px 4px color-mix(in srgb, var(--tier, #42a2f1) 15%, transparent),
0 8px 22px rgba(0, 0, 0, 0.45),
0 0 24px -6px var(--tier, #42a2f1);
}

/* --- 2) boss & enemy infoboxes --- */
.druid-container.npc-infobox {
max-width: 21.5em;
padding: 0.35em;
font-size: 0.94em;
}

.npc-infobox .druid-title {
font-size: 1.7em;
min-height: auto;
padding: 0.3em 0.5em;
}

.npc-infobox .druid-section {
font-size: 1.05em;
padding: 2px;
}

.npc-infobox div.druid-row > .druid-label,
.npc-infobox div.druid-row > .druid-data {
padding-block: 1px;
}

/* loot: one line per drop — name + icon left, % right.
The old `.druid-row[data-druid-section-row="Loot"] div` rule sets
display:block, width:100% and justify-content:space-between on every
div in here; width:100% + padding overflows the box (clipped %s),
so everything below resets to width:auto / border-box. */
.npc-infobox .druid-row[data-druid-section-row="Loot"] div {
padding: 0;
display: block;
width: auto;
box-sizing: border-box;
}

.npc-infobox .druid-row[data-druid-section-row="Loot"] > .druid-data {
flex: 1 1 auto;
min-width: 0;
width: 100%;
}

.npc-infobox .druid-row[data-druid-section-row="Loot"] .loot-category-header,
.npc-infobox .loot-category-header {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.45em;
padding: 0.25em 0.5em;
margin: 0.45em 0 0.15em;
}

.npc-infobox .loot-category-header img { width: 24px; height: auto; }

.npc-infobox .loot-category-title { font-size: 0.9em; }

.npc-infobox .druid-row[data-druid-section-row="Loot"] .loot-item-row,
.npc-infobox .loot-item-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.15em 0.6em;
padding: 0.12em 0.4em 0.12em 0.6em;
margin: 0;
font-size: 0.95em;
line-height: 1.35;
}

.npc-infobox .druid-row[data-druid-section-row="Loot"] .loot-data-infobox,
.npc-infobox .loot-data-infobox {
display: flex;
align-items: center;
gap: 0.45em;
min-width: 0;
}

.npc-infobox .loot-data-infobox img { max-height: 26px; width: auto; }

.npc-infobox .boss-percent { font-size: 1em; flex-shrink: 0; }

/* enemy boxes inside a dungeon page: compact cards */
.dungeon-enemies .druid-container.npc-infobox {
max-width: 18em;
font-size: 0.9em;
float: none;
margin: 0.4em;
}

.dungeon-enemies .npc-infobox .druid-title { font-size: 1.35em; }

/* --- 3) individual dungeon pages (.dungeon-page wrapper) --- */

/* flat sections: the heading rule does the separating, not boxes */
.dungeon-page .hoverbox,
.dungeon-page .hoverbox:hover {
background: none;
background-color: transparent;
border-top: 0;
border-radius: 0;
box-shadow: none;
padding: 0 0.2em 0.2em;
margin: 0.2em 0 0.6em;
}

/* wiki-style headings: ❖ marker + underline rule.
Long selectors beat Minerva's display:block / flex-basis:0. */
.dungeon-page .mw-heading2,
.content .mw-parser-output .dungeon-page .mw-heading2 {
display: flex;
align-items: center;
gap: 0.55em;
margin: 1em 0 0.45em;
padding-bottom: 0.22em;
border-bottom: 1px solid rgba(66, 162, 241, 0.3);
min-width: 0;
}

.dungeon-page .mw-heading2::before {
content: '❖';
color: #7cc2ff;
text-shadow: 0 0 10px rgba(124, 194, 255, 0.9);
}

.dungeon-page h2,
.content .mw-parser-output .dungeon-page h2 {
flex: 0 0 auto;
font-size: 1.9em;
margin: 0;
}

.dungeon-page > p,
.dungeon-page .hoverbox > p {
line-height: 1.65;
max-width: 72ch;
}

/* attack patterns: slim ledger rows */
.dungeon-page .pre-dungeon p {
margin: 0.4em 0;
padding: 0.45em 0.85em;
font-size: 0.97em;
border-radius: 2px;
border-left: 2px solid rgba(66, 162, 241, 0.45);
background: linear-gradient(90deg, rgba(66, 162, 241, 0.07), rgba(26, 26, 34, 0.6) 30%, transparent 96%);
box-shadow: none;
backdrop-filter: none;
}

.dungeon-page .pre-dungeon p::before { display: none; }

.dungeon-page .dlog {
font-size: 1.4em;
margin-bottom: 0.8em;
}

.dungeon-page .mw-collapsible { padding-top: 0.6em; }

.dungeon-page .button-expand-header {
font-size: 14px;
padding: 10px 50px 10px 14px;
}

/* dialogue tables must wrap, never force sideways scroll */
.dungeon-page .wikitable td,
.dungeon-page .wikitable th,
.mw-parser-output .dungeon-page .wikitable td,
.mw-parser-output .dungeon-page .wikitable th {
white-space: normal !important;
word-break: normal !important;
}

/* anchor jumps land clear of the (mobile-sticky) jump bar */
.dungeon-index .mw-heading3 { scroll-margin-top: 4.5em; }

/* --- mobile: the dungeon section must be readable one-handed --- */
@media screen and (max-width: 720px) {
/* jump bar pins to the top and scrolls sideways — one thumb-swipe
to reach any tier bracket from anywhere on the page */
.dungeon-jump {
position: sticky;
top: 0;
z-index: 5;
flex-wrap: nowrap;
overflow-x: auto;
gap: 6px;
padding: 0.5em 6px;
margin: 0.6em -6px 0.3em;
background: rgba(10, 13, 20, 0.96);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.dungeon-jump::-webkit-scrollbar { display: none; }
.dungeon-jump .dj {
flex-shrink: 0;
padding: 0.45em 0.8em;
font-size: 1em;
}

.dungeon-index .mw-heading3 { margin-top: 1.3em; }
.dungeon-index h3,
.content .mw-parser-output .dungeon-index h3 { font-size: 1.5em; }

/* two-up portal tiles, capped images (overrides the old 45px cap) */
.dungeon-grid > ul {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
}
.dungeon-grid > ul > li {
width: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0.7em 0.4em !important;
background: rgba(10, 14, 24, 0.85) !important;
}
.dungeon-grid > ul > li img {
max-width: 116px !important;
height: auto !important;
margin: 0 auto !important;
}

/* infoboxes go full width and stack */
.druid-container.npc-infobox { max-width: 100%; }
.dungeon-enemies { flex-direction: column; align-items: center; }
.dungeon-enemies .druid-container.npc-infobox { width: 100%; max-width: 24em; }

.dungeon-page .hoverbox,
.dungeon-page .hoverbox:hover { margin-inline: 0; padding-inline: 0; }

.dungeon-page .pre-dungeon p { font-size: 0.88em; padding: 0.45em 0.7em; }
.dungeon-page .dlog { font-size: 1.1em !important; }

/* keep dialogue tables inside the screen */
.dungeon-page .wikitable { width: 100%; }
}

/* ============================================================
END DUNGEON PAGES v2
============================================================ */

/* ============================================================
MOBILE READABILITY FIXES (added)
Keeps page content from rendering wider than the phone screen
(Minerva clips horizontal overflow, so over-wide content is lost
off the right edge) and shrinks boss/enemy infoboxes from
full-screen blocks back into readable cards.
============================================================ */
@media screen and (max-width: 720px) {
/* nothing should size itself wider than the viewport */
.mw-parser-output,
.dungeon-page,
.hoverbox,
.dungeon-clear,
.lore,
.pre-dungeon {
max-width: 100% !important;
box-sizing: border-box;
overflow-wrap: break-word;
}

/* .pre-dungeon is `width: fit-content`; a long non-wrapping heading
inside it stretches the whole section past the screen. Let it
fill the available width instead. */
.pre-dungeon {
width: auto !important;
}

/* ❖-marker headings are flex rows; the heading was `flex: 0 0 auto`
so it could neither shrink nor wrap and ran off the screen edge.
Allow the row to wrap and the heading to shrink + wrap its text. */
.dungeon-page .mw-heading2,
.content .mw-parser-output .dungeon-page .mw-heading2,
.dungeon-index .mw-heading3,
.content .mw-parser-output .dungeon-index .mw-heading3 {
/* keep the ❖ marker on the same flex line as the title and let
the TITLE wrap inside itself — don't wrap the flex items, or
the marker gets stranded on its own line */
flex-wrap: nowrap !important;
align-items: baseline !important;
min-width: 0 !important;
}
.dungeon-page h2,
.content .mw-parser-output .dungeon-page h2,
.dungeon-index h3,
.content .mw-parser-output .dungeon-index h3 {
flex: 0 1 auto !important;
min-width: 0 !important;
font-size: 1.35em !important;
overflow-wrap: anywhere;
word-break: break-word;
}

/* boss / enemy infoboxes: centered cards, not full-screen blocks
(the 3D render + bossbar were filling the whole width) */
.dungeon-page .druid-container.npc-infobox,
.dungeon-enemies .druid-container.npc-infobox {
max-width: 19em !important;
margin: 0.6em auto !important;
font-size: 0.82em;
}
}

/* ============================================================
MOBILE — FLATTEN DECORATION FOR ACCESSIBILITY (added)
On phones, trade the neon glow / frame chrome / motion for flat,
solid, high-contrast surfaces and clean text. Desktop is untouched.
============================================================ */
@media screen and (max-width: 720px) {

/* 1) blurry colored text-shadows wreck legibility — remove them
from body text entirely... */
.mw-parser-output p,
.mw-parser-output li,
.mw-parser-output dd,
.mw-parser-output dt,
.mw-parser-output td,
.mw-parser-output th,
.mw-parser-output a,
.druid-data, .druid-label,
.npc-infobox div.druid-row > .druid-label,
.npc-infobox div.druid-row > .druid-data,
.boss-percent, .loot-category-title,
.footer-content > ul > li > a,
.footer-section > ul > li,
.ar-card-titles a, .ar-directive-title a, .ar-card-desc {
text-shadow: none !important;
}
/* ...and reduce headings to a single clean dark shadow (kept for
legibility over the page's background image) */
.mw-parser-output h1, .mw-parser-output h2, .mw-parser-output h3,
.dungeon-page h2, .dungeon-index h3,
.druid-title, .druid-section, .druid-infobox .druid-title,
.npc-infobox .druid-title, .npc-infobox .druid-section,
.mp-box h2, .mp-box .welcome-message,
.ar-hero-title, .ar-sect-name {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
}

/* 2) the page frame (nexus border-image + blue inner glow) eats
width and contrast — drop it on phones */
#bodyContent {
border-image: none !important;
border: none !important;
box-shadow: none !important;
padding: 1em 0.7em !important;
}

/* 3) flatten neon box-shadow glows + backdrop blur on containers */
.npc-infobox, .druid-container,
.wikitable, table.wikitable,
.dlog, .pre-dungeon p, .hoverbox, .hoverbox:hover,
.mp-box, #mp-box-welcome, .class-box, .main-welcome,
.button-expand-header,
.tab-gif-container, .gif-display-area, .tab-gif-display-area,
.inline-image-image > p > span > span > img,
.ar-card, .ar-directive, .archive-hero, .archive-transmission {
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}

/* 4) replace the border-image frames (tables, portal tiles,
infoboxes, archive cards) with flat solid borders + bg */
.wikitable, table.wikitable,
.npc-infobox, .druid-container.npc-infobox,
.mp-links > ul > li,
.ar-card, .archive-hero {
border-image: none !important;
border: 1px solid rgba(66, 162, 241, 0.35) !important;
background: #15151c !important;
}

/* 5) hide purely-decorative glow bars / scan lines (NOT the ❖
heading markers, which are real content) */
.mp-box::before, .mp-box::after,
.mp-box h2::after,
.mp-box .welcome-message::before, .mp-box .welcome-message::after,
.npc-infobox::before, .npc-infobox::after,
.npc-infobox .druid-title::before, .npc-infobox .druid-title::after,
.npc-infobox .druid-section::after,
.mw-footer::before,
.tab-gif-container::before, .gif-display-area::before,
.dlog::after, .pre-dungeon p::before,
.inline-image-caption > p::before {
display: none !important;
}

/* 6) stop the looping pulse / scan / shimmer animations */
.npc-infobox::before, .mw-footer::before,
.boss-infobox-subtitle, .boss-infobox-subtitle::before,
.dlog::after, .mp-box .welcome-message,
.mp-main > .mp-links > ul > li::before,
.archive-page > * {
animation: none !important;
}
}

/* ============================================================
MOBILE — READABLE TABLES (added)
The forced `white-space: nowrap` made text-heavy cells refuse to
wrap, so tables ballooned far wider than the phone and Minerva
clipped them to a sliver. Let cells wrap so the table fits the
screen; shrink/contain wide bits; give genuinely wide all-number
tables a horizontal swipe instead. No `display` change on the
generic rule, so layout tables are unaffected.
============================================================ */
@media screen and (max-width: 720px) {
.mw-parser-output .wikitable,
.mw-parser-output table.wikitable {
width: 100% !important;
margin-inline: 0 !important;
}

/* the key fix: cells wrap instead of forcing the table off-screen */
.mw-parser-output .wikitable td,
.mw-parser-output .wikitable th {
white-space: normal !important;
word-break: normal !important;
overflow-wrap: anywhere;
font-size: 0.82em !important;
padding: 6px 5px !important;
vertical-align: top;
}

/* oversized in-cell icons (e.g. the 128px ruleset banners) */
.mw-parser-output .wikitable td img,
.mw-parser-output .wikitable th img {
max-width: 64px !important;
height: auto !important;
}

/* math formulas don't wrap; shrink them and let any that are still
too wide scroll inside their own box. overflow:auto also drops
their min-content width to 0 so they stop stretching the cell. */
.wikitable div[style*="font-size:150%"],
.wikitable div[style*="font-size: 150%"] {
font-size: 105% !important;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.wikitable .mwe-math-element,
.wikitable .mwe-math-fallback-image-inline,
.wikitable .mwe-math-fallback-image-display {
max-width: 100%;
height: auto;
}

/* the 8-column "Max Base Class Stats" table is all short numbers —
a clean left-to-right swipe reads far better than cramped wrap */
#mp-box-basestats .wikitable {
display: block;
width: -moz-max-content;
width: max-content;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
#mp-box-basestats .wikitable td,
#mp-box-basestats .wikitable th {
white-space: nowrap !important;
}
}

:root {
--color-base: #c9e1e6;
--color-base-fixed: #c9e1e6;
--color-base--hover: #d1eaef;
--color-emphasized: #d1eaef;
--color-subtle: #a7bfca;
--color-placeholder: #a7bfca;
--color-disabled: #a2a9b1;
--color-disabled-emphasized: #a2a9b1;
--color-inverted: #fff;
--color-inverted-fixed: #fff;
--color-progressive: #42a2f1;
--color-progressive--hover: #4c57b5;
--color-progressive--active: #4c57b5;
--color-progressive--focus: #4c57b5;
--color-destructive: #ce0000;
--color-destructive--hover: #900000;
--color-destructive--active: #900000;
--color-destructive--focus: #900000;
--color-visited: #2f3fcf;
--color-visited--hover: color-mix(in srgb, #2f3fcf 80%, #fff);
--color-visited--active: color-mix(in srgb, #2f3fcf 60%, #000);
--color-destructive--visited: #8e0000;
--color-destructive--visited--hover: color-mix(in srgb, #8e0000 85%, #fff);
--color-destructive--visited--active: color-mix(in srgb, #8e0000 70%, #000);
--color-error: #ce0000;
--color-error--hover: color-mix(in srgb, #ce0000 85%, #fff);
--color-error--active: color-mix(in srgb, #ce0000 70%, #000);
--color-warning: #f57b50;
--color-success: #177860;
--color-notice: #f57b50;
--color-icon-error: #ce0000;
--color-icon-warning: #f57b50;
--color-icon-success: #449c1c;
--color-icon-notice: #f57b50;
--color-content-added: #177860;
--color-content-removed: #ce0000;
--filter-invert-icon: 0;
--filter-invert-primary-button-icon: 1;
--box-shadow-color-base: #a2a9b1;
--box-shadow-color-progressive--active: #233566;
--box-shadow-color-progressive--focus: #36c;
--box-shadow-color-progressive-selected: #36c;
--box-shadow-color-progressive-selected--hover: #3056a9;
--box-shadow-color-progressive-selected--active: #233566;
--box-shadow-color-destructive--focus: #36c;
--box-shadow-color-inverted: #fff;
--box-shadow-color-alpha-base: rgba(0, 0, 0, 0.06);
--box-shadow-color-transparent: transparent;
--mix-blend-mode-base: normal;
--mix-blend-mode-blend: lighten;
--background-color-base: #1a1a22;
--background-color-base-fixed: #1a1a22;
--background-color-neutral: #1a1a22;
--background-color-neutral-subtle: color-mix(in srgb, #1a1a22 95%, #fff);
--background-color-interactive: #1a1a22;
--background-color-interactive--hover: #2d2d50;
--background-color-interactive--active: color-mix(in srgb, #2d2d50 85%, #fff);
--background-color-interactive-subtle: color-mix(in srgb, #2d2d50 50%, transparent);
--background-color-interactive-subtle--hover: color-mix(in srgb, #2d2d50 70%, transparent);
--background-color-interactive-subtle--active: color-mix(in srgb, #2d2d50 85%, transparent);
--background-color-disabled: color-mix(in srgb, #1a1a22 70%, #808080);
--background-color-disabled-subtle: color-mix(in srgb, #1a1a22 85%, #808080);
--background-color-inverted: #fff;
--background-color-progressive: color-mix(in srgb, #1a1a22 90%, #42a2f1);
--background-color-progressive--hover: color-mix(in srgb, #1a1a22 80%, #42a2f1);
--background-color-progressive--active: color-mix(in srgb, #1a1a22 70%, #42a2f1);
--background-color-progressive--focus: color-mix(in srgb, #1a1a22 85%, #42a2f1);
--background-color-progressive-subtle: color-mix(in srgb, #1a1a22 95%, #42a2f1);
--background-color-progressive-subtle--hover: color-mix(in srgb, #1a1a22 90%, #42a2f1);
--background-color-progressive-subtle--active: color-mix(in srgb, #1a1a22 85%, #42a2f1);
--background-color-destructive: color-mix(in srgb, #1a1a22 90%, #ce0000);
--background-color-destructive--hover: color-mix(in srgb, #1a1a22 80%, #ce0000);
--background-color-destructive--active: color-mix(in srgb, #1a1a22 70%, #ce0000);
--background-color-destructive--focus: color-mix(in srgb, #1a1a22 85%, #ce0000);
--background-color-destructive-subtle: color-mix(in srgb, #1a1a22 95%, #ce0000);
--background-color-destructive-subtle--hover: color-mix(in srgb, #1a1a22 90%, #ce0000);
--background-color-destructive-subtle--active: color-mix(in srgb, #1a1a22 85%, #ce0000);
--background-color-error: color-mix(in srgb, #1a1a22 90%, #ce0000);
--background-color-error--hover: color-mix(in srgb, #1a1a22 80%, #ce0000);
--background-color-error--active: color-mix(in srgb, #1a1a22 70%, #ce0000);
--background-color-error-subtle: color-mix(in srgb, #1a1a22 95%, #ce0000);
--background-color-error-subtle--hover: color-mix(in srgb, #1a1a22 90%, #ce0000);
--background-color-error-subtle--active: color-mix(in srgb, #1a1a22 85%, #ce0000);
--background-color-warning-subtle: color-mix(in srgb, #1a1a22 95%, #f57b50);
--background-color-success-subtle: color-mix(in srgb, #1a1a22 95%, #177860);
--background-color-notice-subtle: color-mix(in srgb, #1a1a22 95%, #f57b50);
--background-color-content-added: color-mix(in srgb, #1a1a22 90%, #177860);
--background-color-content-removed: color-mix(in srgb, #1a1a22 90%, #ce0000);
--background-color-transparent: #1a1a22F0;
--background-color-backdrop-light: rgba(255, 255, 255, 0.65);
--background-color-backdrop-dark: rgba(0, 0, 0, 0.65);
--background-color-button-quiet--hover: rgba(0, 24, 73, 0.027);
--background-color-button-quiet--active: rgba(0, 24, 73, 0.082);
--background-color-input-binary--checked: #36c;
--background-color-tab-list-item-framed--hover: rgba(255, 255, 255, 0.3);
--background-color-tab-list-item-framed--active: rgba(255, 255, 255, 0.65);
--opacity-icon-base: 0.87;
--opacity-icon-base--hover: 0.74;
--opacity-icon-base--selected: 1;
--opacity-icon-base--disabled: 0.51;
--opacity-icon-placeholder: 0.51;
--opacity-icon-subtle: 0.67;
--border-image-base: url('/wiki/Special:Redirect/file/Wiki-border-kurva.png');
--border-color-base: #2b5cc9;
--border-color-subtle: color-mix(in srgb, #2b5cc9 50%, transparent);
--border-color-muted: color-mix(in srgb, #2b5cc9 30%, transparent);
--border-color-interactive: #2b5cc9;
--border-color-interactive--hover: color-mix(in srgb, #2b5cc9 85%, #fff);
--border-color-interactive--active: color-mix(in srgb, #2b5cc9 70%, #000);
--border-color-disabled: color-mix(in srgb, #2b5cc9 40%, #808080);
--border-color-inverted: #fff;
--border-color-inverted-fixed: #fff;
--border-color-progressive: #2b5cc9;
--border-color-progressive--hover: color-mix(in srgb, #2b5cc9 90%, #fff);
--border-color-progressive--active: color-mix(in srgb, #2b5cc9 80%, #000);
--border-color-progressive--focus: color-mix(in srgb, #2b5cc9 95%, #fff);
--border-color-destructive: color-mix(in srgb, #2b5cc9 70%, #ce0000);
--border-color-destructive--hover: color-mix(in srgb, #2b5cc9 60%, #ce0000);
--border-color-destructive--active: color-mix(in srgb, #2b5cc9 50%, #ce0000);
--border-color-destructive--focus: color-mix(in srgb, #2b5cc9 65%, #ce0000);
--border-color-error: color-mix(in srgb, #2b5cc9 70%, #ce0000);
--border-color-error--hover: color-mix(in srgb, #2b5cc9 60%, #ce0000);
--border-color-error--active: color-mix(in srgb, #2b5cc9 50%, #ce0000);
--border-color-warning: color-mix(in srgb, #2b5cc9 60%, #f57b50);
--border-color-success: color-mix(in srgb, #2b5cc9 60%, #177860);
--border-color-notice: color-mix(in srgb, #2b5cc9 60%, #f57b50);
--border-color-content-added: color-mix(in srgb, #2b5cc9 60%, #177860);
--border-color-content-removed: color-mix(in srgb, #2b5cc9 60%, #ce0000);
--border-color-transparent: transparent;
--border-color-divider: #a2a9b1;
--outline-color-progressive--focus: #36c;
--color-link-red: var(--color-destructive);
--color-link-red--hover: var(--color-destructive--hover);
--color-link-red--active: var(--color-destructive--active);
--color-link-red--focus: var(--color-destructive--focus);
--color-link-red--visited: var(--color-destructive--visited);
--color-link-red--visited--hover: var(--color-destructive--visited--hover);
--color-link-red--visited--active: var(--color-destructive--visited--active);
--accent-color-base: #36c;
--border-color-input--hover: var(--border-color-interactive);
--border-color-input-binary: var(--border-color-interactive);
--border-color-input-binary--hover: var(--border-color-progressive--hover);
--border-color-input-binary--active: var(--border-color-progressive--active);
--border-color-input-binary--focus: var(--border-color-progressive--focus);
--border-color-input-binary--checked: var(--border-color-progressive);
--color-base--subtle: #54595d;
}

/* ---------- Style login button ---------- */
#daedalus-user-menu-checkbox:hover {
background: #365fb8;
}

.pre-content h1, .content .mw-heading1, .content h1, .content .mw-heading2, .content h2 {
font-family: 'Daedalus', 'Outfit', 'Times', 'Source Serif Pro', serif;
}

:root body {
background-image: url(images/f/ff/Site-background-image.jpg);
background-size: cover;
background-position: bottom left;
background-repeat: no-repeat;
background-attachment: fixed;
}
.last-modified-bar {
display: none !important;
}
.mw-highlight {
background-color: #1a1a22;
}
.mw-footer {
background-image: url(/wiki/Special:Redirect/file/Site-footer-image.jpg);
background-position: 25% 20%;
background-size: cover;
position: relative;
border-top: 2px solid rgba(66, 162, 241, 0.3);
box-shadow:
inset 0 0 60px 20px rgba(0, 0, 0, 0.8),
inset 0 2px 40px 10px rgba(66, 162, 241, 0.1),
0 -10px 40px rgba(66, 162, 241, 0.15);
}

.mw-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg,
transparent 0%,
rgba(66, 162, 241, 0.4) 10%,
rgba(66, 162, 241, 0.7) 30%,
rgba(66, 162, 241, 0.9) 50%,
rgba(66, 162, 241, 0.7) 70%,
rgba(66, 162, 241, 0.4) 90%,
transparent 100%);
box-shadow: 0 0 15px rgba(66, 162, 241, 0.8);
animation: footer-scan 4s linear infinite;
}

@keyframes footer-scan {
0% { opacity: 0.6; }
50% { opacity: 1; }
100% { opacity: 0.6; }
}
.mw-heading1, h1 {
font-size: 2em;
}
#filetoc {
background-color: var(--background-color-base);
}
.mw-content-ltr.mw-highlight-lines pre, .mw-content-ltr.content .mw-highlight-lines pre {
padding-left: 3.5em;
box-shadow: inset 2.75em 0 0 var(--background-color-base);
}
.cdx-message--error {
background-color: var(--background-color-base);
border-color: var(--border-color-error, #f54739);
}
.editOptions {
background-color: var(--background-color-base);
color: var(--color-base);
border: 1px solid var(--border-color-subtle, #c8ccd1);
border-top: 0;
padding: 1em 1em 1.5em 1em;
margin-bottom: 2em;
}
.ace-tm .ace_gutter {
background: var(--background-color-base);
color: var(--color-base);
}

.ace-tm {
background-color: #FFFFFF80;
}

.overlay-enabled, .mw-body {
background-color: transparent;
}

.header-container.header-chrome {
background-color: transparent;
border: 0;
box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.08);
}

.header-container {
border-bottom: none;
padding: 0 16px;
}

#mw-mf-page-center {
width: 100%;
min-height: 100%;
position: relative;
background-color: transparent;
overflow: hidden;
}

@media screen and (min-width: 993.3px) {
.banner-container, .daedalus-anon-talk-message, .daedalus-header, .page-header-bar, .overlay-header, .content, .overlay-content, .content-unstyled, .pre-content, .post-content, #mw-content-text > form {
margin-left: auto;
margin-right: auto;
width: 90%;
max-width: 1900px;
}
}

.search-box .search {
color: var(--color-base);
}

.content .mw-parser-output .mw-editsection .cdx-button {
font-size: 1rem;
display: none;
}

.wikitable > tr > th, .wikitable > * > tr > th {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.15) 0%, rgba(76, 87, 181, 0.1) 100%),
var(--background-color-transparent);
color: var(--color-base);
text-align: center;
font-weight: bold;
position: relative;
padding: 0.75em 0.5em;
border-bottom: 1px solid rgba(66, 162, 241, 0.3) !important;
text-shadow: 0 0 10px rgba(66, 162, 241, 0.5);
}

.wikitable > tr > th::after, .wikitable > * > tr > th::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.6) 50%, transparent);
box-shadow: 0 0 6px rgba(66, 162, 241, 0.4);
}

.mw-search-createlink {
display: block !important;
}

/* this is a comment to show how fast this thing is */

.wikitable {
background-color: var(--background-color-transparent);
color: var(--color-base, #202122);
margin: 1em 0;
border: 1px solid var(--border-color-base, #a2a9b1);
border-collapse: collapse;
}

.content .mw-parser-output h2 {
image-rendering: pixelated !important;
text-rendering: geometricPrecision !important;
text-shadow:
0 0.06em 0 color-mix(in srgb, currentColor 50%, black), 0 0.12em 0 color-mix(in srgb, currentColor 10%, black), 0 0 0.2em currentColor;
font-size: 3.3em;
font-weight: normal;
}

.content, .pre-content {
background: var(--background-color-transparent);
box-shadow: 0 0 30px #1a1a22;
padding: 0 5em;
}

.header-container {
background: #1a1a22D0 !important;
padding: 0 0.5em !important;
}

.content .mw-parser-output .mw-heading, .content .mw-parser-output .section-heading {
display: block;
min-width: fit-content;
}

.content .mw-parser-output h2 {
flex-grow: 0;
flex-basis: 0;
}

.footer-section > ul {
width: 30%;
columns: 2;
column-gap: 20px;
max-height: 200px;
overflow-y: auto;
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 50%, rgba(76, 87, 181, 0.08) 100%),
#1a1a22C0;
box-shadow:
0 0 30px rgba(0, 0, 0, 0.8),
inset 0 0 30px 5px rgba(66, 162, 241, 0.08),
0 0 0 1px rgba(66, 162, 241, 0.25);
padding: 0.75em;
border-radius: 8px;
display: inline-block;
margin-bottom: 2.5em;
position: relative;
backdrop-filter: blur(5px);
}

.footer-section > ul::before {
content: '';
position: absolute;
top: 0;
left: 10%;
right: 10%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.6), transparent);
box-shadow: 0 0 8px rgba(66, 162, 241, 0.5);
}

.footer-section > ul > li {
font-weight: bold;
text-shadow:
0 0 15px rgba(66, 162, 241, 0.6),
0 0 8px rgba(66, 162, 241, 0.4),
0 2px 4px rgba(0, 0, 0, 0.8);
transition: all 0.3s ease;
}

.footer-section > ul > li:hover {
text-shadow:
0 0 20px rgba(66, 162, 241, 0.9),
0 0 12px rgba(66, 162, 241, 0.6),
0 2px 4px rgba(0, 0, 0, 0.8);
transform: translateX(3px);
}

.mw-footer > .post-content > * {
text-align: center;
}

.toc {
display: none;
}

table.wikitable tr:nth-child(2n) {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.03) 0%, transparent 100%),
color-mix(in srgb, #1a1a22, #111111);
}

table.wikitable tr:nth-child(2n+1) {
background:
linear-gradient(135deg, rgba(76, 87, 181, 0.03) 0%, transparent 100%),
#1a1a22;
}

table.wikitable {
border-image-source: url("/wiki/Special:Redirect/file/Wiki-border-kurva.png");
border-image-slice: 6;
border-image-width: 6px;
border-image-repeat: repeat repeat;
border-collapse: separate;
padding: 0.5em;
box-shadow:
0 0 30px 5px rgba(0, 0, 0, 0.6),
inset 0 0 40px 8px rgba(66, 162, 241, 0.05),
0 0 0 1px rgba(66, 162, 241, 0.15);
position: relative;
}

table.wikitable::before {
content: '';
position: absolute;
top: 0;
left: 10%;
right: 10%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.5), transparent);
box-shadow: 0 0 8px rgba(66, 162, 241, 0.4);
z-index: 1;
}

table.wikitable > caption {
font-family: 'Daedalus';
font-size: 2em;
border-radius: 20px 20px 0 0;
padding-left: 0.5em;
}

table.wikitable > tbody > tr > td > a {
font-weight: bold;
}

span.mw-page-title-main {
font-size: 2em;
}

#bodyContent {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-border-nexus.png);
border-image-slice: 11;
border-image-width: 20px;
border-image-repeat: stretch stretch;
border-image-outset: 10px;
padding: 5em 3em 5em 3em;
box-shadow: inset 0 0 30px lightblue;
}

.search-box {
margin-left: auto;
margin-right: 1em;
}

.search-box .search {
border: 1px solid var(--color-visited);
border-radius: 10px;
}

input.search:hover {
background-color: color-mix(in srgb, #1a1a22 70%, #fff 10%);
}
.cdx-button:enabled.cdx-button--weight-quiet:hover, .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet:hover {
background-color: var(--background-color-interactive-subtle--hover, #eaecf0);
mix-blend-mode: var(--mix-blend-mode-blend, lighten);
}

.label[for="page-actions-overflow-checkbox"]:hover {
background-color: var(--background-color-interactive-subtle--hover, #eaecf0);
mix-blend-mode: var(--mix-blend-mode-blend, lighten);
}

.page-actions-menu__list-item:last-child {
margin-right: 0 !important;
}

.toggle-list__checkbox {
position: absolute;
z-index: 1;
opacity: 0;
top: 0;
left: 0;
height: 100%;
width: 100% !important;
margin: 0;
}

.cdx-button .daedalus-icon + span:not(:empty) {
margin-left: 0;
}

div.post-content > a[role='button'] {
display:none;
}

body {
font-family: 'Outfit';
}

.footer-content > ul > li > a {
font-size: 1.5em;
text-shadow:
0 0 10px rgba(66, 162, 241, 0.5),
0 2px 4px rgba(0, 0, 0, 0.8);
transition: all 0.3s ease;
}

.footer-content > ul > li > a:hover {
text-shadow:
0 0 18px rgba(66, 162, 241, 0.8),
0 0 10px rgba(66, 162, 241, 0.6),
0 2px 4px rgba(0, 0, 0, 0.8);
transform: translateY(-2px);
}

div.footer-content::before {
background-image: url(/wiki/Special:Redirect/file/Site-logo.png);
filter: drop-shadow(0 0 20px rgba(66, 162, 241, 0.6));
}

.footer-content > ul.footer-places {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.1) 0%, transparent 50%, rgba(76, 87, 181, 0.1) 100%),
var(--background-color-transparent);
box-shadow:
inset 0 0 30px 8px rgba(66, 162, 241, 0.12),
0 0 25px 8px rgba(66, 162, 241, 0.2),
0 0 0 1px rgba(66, 162, 241, 0.3);
margin: 1em 1em;
border-radius: 8px;
padding: 0.75em;
position: relative;
font-weight: bold;
margin-left: auto;
margin-right: auto;
}

.footer-places {
width: fit-content;
}

.footer-content > ul.footer-places::before {
content: '';
position: absolute;
top: 0;
left: 5%;
right: 5%;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.5) 20%,
rgba(66, 162, 241, 0.8) 50%,
rgba(66, 162, 241, 0.5) 80%,
transparent);
box-shadow: 0 0 10px rgba(66, 162, 241, 0.6);
}

.item-infobox > div.druid-section-container > div.druid-row-Unholy {
display: none;
}
.item-infobox > div.druid-section-container > div.druid-row-Voidbound {
display: none;
}
.item-infobox > div.druid-section-container > div.druid-row-Bloodshot {
display: none;
}
.item-infobox > div.druid-section-container > div.druid-row-Royal {
display: none;
}
.item-infobox > div.druid-section-container > div.druid-row-Gilded {
display: none;
}
.item-infobox > div.druid-section-container > div.druid-row-Irradiated {
display: none;
}
.item-infobox > div.druid-section-container > div.druid-row-Halloween {
display: none;
}
.item-infobox > div.druid-section-container > div.druid-row-Christmas {
display: none;
}
.item-infobox > div.druid-section-container > div.druid-row-Valentine {
display: none;
}

/* UNHOLY Template Specific Colors & Border Image. */
.item-infobox:has(.druid-row-Unholy .druid-toggleable-data.focused:not(.druid-toggleable-data-empty)) {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemUnholyBorder.png);
.druid-title, .druid-main-images-label {
color: #8d9f97;
}
div.druid-data-Desc, div.druid-row-Desc > .druid-data {
color: #d0e8e4;
}
}
/* VOIDBOUND Template Specific Colors & Border Image. */
.item-infobox:has(.druid-row-Voidbound .druid-toggleable-data.focused:not(.druid-toggleable-data-empty)) {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemVoidboundBorder.png);
.druid-title, .druid-main-images-label {
color: #fc7cf1;
}
div.druid-data-Desc, div.druid-row-Desc > .druid-data {
color: #e955fc;
}
}
/* BLOODSHOT Template Specific Colors & Border Image. */
.item-infobox:has(.druid-row-Bloodshot .druid-toggleable-data.focused:not(.druid-toggleable-data-empty)) {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemBloodshotBorder.png);
.druid-title, .druid-main-images-label {
color: #c20f0f;
}
div.druid-data-Desc, div.druid-row-Desc > .druid-data {
color: #fa8686;
}
}
/* ROYAL Template Specific Colors & Border Image. */
.item-infobox:has(.druid-row-Royal .druid-toggleable-data.focused:not(.druid-toggleable-data-empty)) {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemRoyalBorder.png);
.druid-title, .druid-main-images-label {
color: #cd08cd;
}
div.druid-data-Desc, div.druid-row-Desc > .druid-data {
color: #fcb7fc;
}
}
/* GILDED Template Specific Colors & Border Image. */
.item-infobox:has(.druid-row-Gilded .druid-toggleable-data.focused:not(.druid-toggleable-data-empty)) {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemGildedBorder.png);
.druid-title, .druid-main-images-label {
color: #db7400;
}
div.druid-data-Desc, div.druid-row-Desc > .druid-data {
color: #eac278;
}
}
/* IRRADIATED Template Specific Colors & Border Image. */
.item-infobox:has(.druid-row-Irradiated .druid-toggleable-data.focused:not(.druid-toggleable-data-empty)) {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemIrradiatedBorder.png);
.druid-title, .druid-main-images-label {
color: #15cb15;
}
div.druid-data-Desc, div.druid-row-Desc > .druid-data {
color: #cef46a;
}
}
/* HALLOWEEN Template Specific Colors & Border Image. */
.item-infobox:has(.druid-row-Halloween .druid-toggleable-data.focused:not(.druid-toggleable-data-empty)) {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemHalloweenBorder.png);
.druid-title, .druid-main-images-label {
color: #d18d07;
}
div.druid-data-Desc, div.druid-row-Desc > .druid-data {
color: #f4ad21;
}
}
/* CHRISTMAS Template Specific Colors & Border Image. */
.item-infobox:has(.druid-row-Christmas .druid-toggleable-data.focused:not(.druid-toggleable-data-empty)) {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemChristmasBorder.png);
.druid-title, .druid-main-images-label {
color: #91efd6;
}
div.druid-data-Desc, div.druid-row-Desc > .druid-data {
color: #c9f4f5;
}
}
/* VALENTINE Template Specific Colors & Border Image. */
.item-infobox:has(.druid-row-Valentine .druid-toggleable-data.focused:not(.druid-toggleable-data-empty)) {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemValentineBorder.png);
.druid-title, .druid-main-images-label {
color: #f16593;
}
div.druid-data-Desc, div.druid-row-Desc > .druid-data {
color: #fcb5cd;
}
}

/* Template Specific Colors & Border Image.
.item-infobox:has(> div.druid-section-container > div.druid-row-) {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemBorder.png);
.druid-title {
color: #;
}
.druid-label {
color: #;
}
div.druid-data-Desc {
color: #;
}
}
*/

/* Lots of color mixing here, meant to apply to ANY item infobox */
.item-infobox {
border-style: solid;
border-image-slice: 9 63;
border-image-width: 25em 154em;
border-image-outset: 0;
border-image-repeat: stretch;
.druid-main-images-label.focused {
background: color-mix(in srgb, currentColor 25%, transparent);
box-shadow: 0 0 5px currentColor;
}
.druid-main-images-label {
background: color-mix(in srgb, currentColor 10%, transparent);
font-size: 2em;

font-weight: bold;
font-family: "Daedalus", sans-serif;
text-shadow: 0 2px color-mix(in srgb, currentColor 50%, black),
0 4px color-mix(in srgb, currentColor 30%, black),
0 6px color-mix(in srgb, currentColor 10%, black);
line-height: 1em;
padding-bottom: 0.15em;
}
.druid-main-images-label {
outline: 1px solid currentColor;
}
.druid-label {
text-align: left;
width: auto;
max-width: 40%;
color: #fcfc54;
}
/* the single-rarity selectors above match .druid-toggleable-data.focused:not(.druid-toggleable-data-empty),
so both the tabbed (image,tab) and single-image (no comma) cases get the rarity border. */
div.druid-data-Desc, div.druid-row-Desc > .druid-data {
background-color: color-mix(in srgb, currentColor 43.62%, transparent);
text-shadow: 2px 2px color-mix(in srgb, currentColor 30%, black);
font-style: italic;
margin-left: 0;
margin-right: 0;
padding: 0.6em;
font-weight: bold;
width: 100%;
box-sizing: border-box; /* keep padding inside 100% so the panel never bleeds over the border */
}
.druid-label-Damage + .druid-data {
color: #fc5454;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Shots + .druid-data {
color: #54fc54;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Cooldown + .druid-data {
color: #fc54fc;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Pierce + .druid-data {
color: #00a800;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Range + .druid-data {
color: #54fc54;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Velocity + .druid-data {
color: #00a8a8;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Attack + .druid-data {
color: #fc5454;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Defense + .druid-data {
color: #5496fc;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Speed + .druid-data {
color: #fcfc54;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Vitality + .druid-data {
color: #54fc9c;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Health + .druid-data {
color: #fc54a8;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Evasion + .druid-data {
color: #54d4fc;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Healing + .druid-data {
color: #a8fca8;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Slashes + .druid-data {
color: #fca854;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Beams + .druid-data {
color: #54fcfc;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Critical.Chance + .druid-data,
.druid-label-Critical + .druid-data {
color: #fc9c54;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-row-Ability > .druid-data {
color: #54fc54;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}
.druid-row {
background-color: rgba(0, 0, 0, 0.4362);
border-radius: 4px;
}
.druid-row-Desc {
background: none;
}
.druid-title {
text-shadow: 0 3px color-mix(in srgb, currentColor 50%, black),
0 6px color-mix(in srgb, currentColor 30%, black),
0 9px color-mix(in srgb, currentColor 10%, black);
}
}

.post-content {
display: flow-root;
margin-left: auto;
margin-right: auto;
width: 100%;
}

/* ============================================================
SHINY animated banner.
============================================================ */
.shiny-frame .item-infobox,
.item-infobox:has(.druid-toggleable-data[data-druid-tab-key="Shiny"].focused) {
position: relative;
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemShinyBorder.gif) !important;
--shiny-band-inset: 0px; /* horizontal inset so the bands clear the corner art */
--shiny-d: 0s; /* per-item start offset, set by :nth-of-type below */

/* ---- Static shiny title + description (frame stays animated) ---- */
div.druid-data-Desc, div.druid-row-Desc > .druid-data {
background:
linear-gradient(135deg, rgba(126,232,250,.14), rgba(238,192,255,.10), rgba(255,217,122,.14)),
rgba(0,0,0,.5) !important;
color: #e7f2ff !important;
}

.druid-title, .druid-main-images-label {
background: linear-gradient(135deg, #7ee8fa 0%, #eec0ff 40%, #ffd97a 75%, #7ee8fa 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
text-shadow: none !important;
filter: drop-shadow(0 2px rgba(0, 0, 0, .6));
}

}
.shiny-frame .item-infobox::before,
.shiny-frame .item-infobox::after,
.item-infobox:has(.druid-toggleable-data[data-druid-tab-key="Shiny"].focused)::before,
.item-infobox:has(.druid-toggleable-data[data-druid-tab-key="Shiny"].focused)::after {
content: "";
position: absolute;
left: var(--shiny-band-inset);
right: var(--shiny-band-inset);
height: min(340px, 50%); /* one sprite frame tall; never reaches past mid-box */
background-repeat: repeat-x; /* image set per-item by .shiny-band-N below */
background-position: left top;
background-size: auto; /* native px → true 1:1, tiles on X only */
image-rendering: pixelated;
pointer-events: none;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
z-index: 5;
animation: shiny-band-steps 2.2s steps(12) infinite;
}
.shiny-frame .item-infobox::before,
.item-infobox:has(.druid-toggleable-data[data-druid-tab-key="Shiny"].focused)::before {
top: 0;
animation-delay: var(--shiny-d);
}
.shiny-frame .item-infobox::after,
.item-infobox:has(.druid-toggleable-data[data-druid-tab-key="Shiny"].focused)::after {
content: none; /* bottom band off — the box's bottom is text (Stats/Info), no open space for stars */
}
@keyframes shiny-band-steps {
to { background-position-y: -4080px; } /* 12 frames × 340px */
}
/* one of 10 star-band layouts per item; the module hashes the item name to a class */
.item-infobox.shiny-band-1::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemShinyBand1.png); }
.item-infobox.shiny-band-2::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemShinyBand2.png); }
.item-infobox.shiny-band-3::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemShinyBand3.png); }
.item-infobox.shiny-band-4::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemShinyBand4.png); }
.item-infobox.shiny-band-5::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemShinyBand5.png); }
.item-infobox.shiny-band-6::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemShinyBand6.png); }
.item-infobox.shiny-band-7::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemShinyBand7.png); }
.item-infobox.shiny-band-8::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemShinyBand8.png); }
.item-infobox.shiny-band-9::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemShinyBand9.png); }
.item-infobox.shiny-band-10::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemShinyBand10.png); }
/* stagger the start frame per item so no two bands look alike */
.shiny-frame .item-infobox:nth-of-type(2n) { --shiny-d: -0.2s; }
.shiny-frame .item-infobox:nth-of-type(3n) { --shiny-d: -0.5s; }
.shiny-frame .item-infobox:nth-of-type(4n) { --shiny-d: -0.8s; }
.shiny-frame .item-infobox:nth-of-type(5n) { --shiny-d: -1.0s; }
.shiny-frame .item-infobox:nth-of-type(7n) { --shiny-d: -0.35s; }

/* ============================================================
RESKIN catalog theming (theme tabs on the Reskins page).
Module:Reskins wraps each reskin's infobox in
<div class="reskin-skin reskin-<theme> [cherub-band-N]">.
============================================================ */
.reskin-skin { display: contents; } /* wrapper adds classes only; no layout box */

/* Each seasonal reskin theme uses its own border frame. */
.reskin-halloween .item-infobox {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemHalloweenBorder.png) !important;
}
.reskin-valentines .item-infobox {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemValentineBorder.png) !important;
}
.reskin-christmas .item-infobox {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemChristmasBorder.png) !important;
}

/* Cherub: gold frame + white gold-falling-line band overlay (one of 5 layouts). */
.reskin-cherub .item-infobox {
position: relative;
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemCherubBorder.png) !important;
}
.reskin-cherub .item-infobox::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: min(340px, 55%);
background-repeat: repeat; /* tiles X and Y so the fall loops seamlessly */
background-position: left top;
background-size: auto;
pointer-events: none;
z-index: 5;
-webkit-mask-image:
linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent),
linear-gradient(180deg, #000 55%, transparent);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent),
linear-gradient(180deg, #000 55%, transparent);
mask-composite: intersect;
animation: cherub-fall 3s linear infinite;
}
@keyframes cherub-fall {
to { background-position-y: 340px; } /* one tile down → seamless loop */
}
.reskin-cherub.cherub-band-1 .item-infobox::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemCherubBand1.png); }
.reskin-cherub.cherub-band-2 .item-infobox::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemCherubBand2.png); animation-delay: -0.6s; }
.reskin-cherub.cherub-band-3 .item-infobox::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemCherubBand3.png); animation-delay: -1.2s; }
.reskin-cherub.cherub-band-4 .item-infobox::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemCherubBand4.png); animation-delay: -1.8s; }
.reskin-cherub.cherub-band-5 .item-infobox::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemCherubBand5.png); animation-delay: -2.4s; }

/* ============================================================
MOBILE LAYOUT FIXES
The base content paddings (.content: 0 5em; #bodyContent: 5em 3em)
are desktop-scale. On a phone they nest and leave only a sliver of
reading width. Scale them down below the wide-layout breakpoint
(the 993.3px rule above is the only other width control here).
============================================================ */
@media screen and (max-width: 992px) {
.content,
.pre-content {
padding-left: 1.5em;
padding-right: 1.5em;
}
#bodyContent {
padding: 2.5em 1.25em;
border-image-outset: 4px;
}
}

@media screen and (max-width: 720px) {
.content,
.pre-content {
padding-left: 0.4em;
padding-right: 0.4em;
box-shadow: none;
}
/* #bodyContent frame + padding are flattened in
MediaWiki:Common.css → "MOBILE — FLATTEN DECORATION" block */
}

File:Wiki-ItemCherubBorder.png

2026-07-02T09:59:21Z

Willow:

== Licensing ==
{{License|game}}

File:Wiki-ItemCherubBand4.png

2026-07-02T09:59:10Z

Willow:

== Licensing ==
{{License|game}}

File:Wiki-ItemCherubBand3.png

2026-07-02T09:59:10Z

Willow:

== Licensing ==
{{License|game}}

File:Wiki-ItemCherubBand2.png

2026-07-02T09:59:10Z

Willow:

== Licensing ==
{{License|game}}

File:Wiki-ItemCherubBand1.png

2026-07-02T09:59:10Z

Willow:

== Licensing ==
{{License|game}}

File:Wiki-ItemCherubBand5.png

2026-07-02T09:59:09Z

Willow:

== Licensing ==
{{License|game}}

Module:Reskins

2026-07-02T09:55:47Z

Willow: automation

local p = {}

local reskins = {
-- Cherub
{ name = "Blade of False Eden", theme = 'Cherub', obtained = "Season 4 Crate", desc = "Forged for those permitted to witness judgement", types = { 'Sword' } },
{ name = "Echo of Eden", theme = 'Cherub', obtained = "Season 4 Crate", desc = "Every strike sounds like distant piano keys", types = { 'Katana' } },
{ name = "Witness Fang", theme = 'Cherub', obtained = "Season 4 Crate", desc = "Small enough to conceal. Sharp enough to remember", types = { 'Dagger' } },
{ name = "Choirbow", theme = 'Cherub', obtained = "Season 4 Crate", desc = "The string vibrates without being touched", types = { 'Bow' } },
{ name = "Halo Spire", theme = 'Cherub', obtained = "Season 4 Crate", desc = "Used during the earliest Neo-Eden rituals", types = { 'Staff' } },
{ name = "Cherub's Authority", theme = 'Cherub', obtained = "Season 4 Crate", desc = "Its glow resembles a watching eye", types = { 'Sceptre' } },
{ name = "Sanctum Hood", theme = 'Cherub', obtained = "Season 4 Crate", desc = "Its glow resembles a watching eye", types = { 'Magical Helmet' } },
{ name = "OXBlood Mask", theme = 'Cherub', obtained = "Season 4 Crate", desc = "The abyss stares back at you", types = { 'Heavy Helmet' } },
{ name = "Sanctified Crownlet", theme = 'Cherub', obtained = "Season 4 Crate", desc = "It remains perfectly clean despite age", types = { 'Light Helmet' } },
{ name = "Judgement Carapace", theme = 'Cherub', obtained = "Season 4 Crate", desc = "A defensive relic of the Third Choir", types = { 'Light Chestplate', 'Magical Chestplate', 'Heavy Chestplate' } },
{ name = "Garden Striders", theme = 'Cherub', obtained = "Season 4 Crate", desc = "Each stitch follows sacred geometry", types = { 'Light Leggings', 'Magical Leggings', 'Heavy Leggings' } },
{ name = "Eden Treads", theme = 'Cherub', obtained = "Season 4 Crate", desc = "The soles never fully touch the ground", types = { 'Light Boots', 'Magical Boots', 'Heavy Boots' } },
{ name = "Verdict Hands", theme = 'Cherub', obtained = "Season 4 Crate", desc = "Used during the earliest Neo-Eden rituals", types = { 'Shield', 'Poison', 'Skull', 'Kunai', 'Trap', 'Jewel' } },
{ name = "Neo Eden Binding", theme = 'Cherub', obtained = "Season 4 Crate", desc = "The bracelet vibrates with distant music, especially if it's OXBLOODXIX.", types = { 'Emblem', 'Cloak', 'Scripture', 'Star', 'Bomb', 'Orb' } },

-- Halloween
{ name = "Bramble Bow", theme = 'Halloween', obtained = "Halloween Event", desc = "Woven from cursed brambles that thirst for wandering souls.", types = { 'Bow' } },
{ name = "Dirk of Horrors", theme = 'Halloween', obtained = "Halloween Event", desc = "A jagged blade reflecting your deepest, darkest fears.", types = { 'Dagger' } },
{ name = "Sceptre of Soulbound Terror", theme = 'Halloween', obtained = "Halloween Event", desc = "A cursed sceptre bound to restless souls.", types = { 'Sceptre' } },
{ name = "Kunai of Cursed Souls", theme = 'Halloween', obtained = "Halloween Event", desc = "Throwing knives guided by the wails of the damned.", types = { 'Kunai' } },
{ name = "Eye of Confliction", theme = 'Halloween', obtained = "Halloween Event", desc = "A twitching, bloodshot eye that sees all timelines at once.", types = { 'Orb' } },
{ name = "Hollow's Harvest", theme = 'Halloween', obtained = "Halloween Event", desc = "An ancient tome bound in necrotic, autumn vines.", types = { 'Scripture' } },
{ name = "Solar Eclipse Staff", theme = 'Halloween', obtained = "Halloween Event", desc = "Channels the cosmic dread of a sun blotted from the sky.", types = { 'Staff' } },

-- Valentine's
{ name = "Dagger of Eternal Love", theme = 'Valentines', obtained = "Valentine's Event", desc = "Struck by this blade, one's heart is bound forever.", types = { 'Dagger' } },
{ name = "Lovebound Emblem", theme = 'Valentines', obtained = "Valentine's Event", desc = "A shimmering seal representing an unbreakable vow.", types = { 'Emblem' } },
{ name = "Cupid's Cap", theme = 'Valentines', obtained = "Valentine's Event", desc = "A feathery cap blessed by the deity of love.", types = { 'Light Helmet' } },
{ name = "Valentine's Chocolate Box", theme = 'Valentines', obtained = "Valentine's Event", desc = "Sweets to die for. Quite literally.", types = { 'Skull' } },

-- Christmas
{ name = "Evergreen Bow", theme = 'Christmas', obtained = "Christmas Event", desc = "Carved from the undying pines of the frozen north.", types = { 'Bow' } },
{ name = "Ice Encased Katana", theme = 'Christmas', obtained = "Christmas Event", desc = "A lethal edge preserved perfectly within glacial ice.", types = { 'Katana' } },
{ name = "Yuletide Wyrmskin", theme = 'Christmas', obtained = "Christmas Event", desc = "Warm, festive garments woven from the hide of a frost wyrm.", types = { 'Magical Chestplate' } },
{ name = "Giftwrap Venom", theme = 'Christmas', obtained = "Christmas Event", desc = "A volatile concoction wrapped neatly with a bow.", types = { 'Poison' } },
{ name = "Scripture of Snow", theme = 'Christmas', obtained = "Christmas Event", desc = "Contains incantations that summon the fiercest blizzards.", types = { 'Scripture' } },
{ name = "Star of Christmas", theme = 'Christmas', obtained = "Christmas Event", desc = "A brilliant ornament ripped straight from the top of the tree.", types = { 'Star' } },
{ name = "Sharpened Candy Cane", theme = 'Christmas', obtained = "Christmas Event", desc = "Sugary, minty, and ruthlessly sharp.", types = { 'Sword' } },
{ name = "Gingerbread Shield", theme = 'Christmas', obtained = "Christmas Event", desc = "Holiday spirit, same solid protection.", types = { 'Shield' } },

-- Custom
{ name = "Moongazer", theme = 'Custom', obtained = "Aphrow (100 TikToks Reward)", desc = "The signature headpiece of a social media wizard, bestowed for grand contributions to the realm.", types = { 'Heavy Helmet', 'Magical Helmet', 'Light Helmet' } },
{ name = "Miku's Wig", theme = 'Custom', obtained = "MikuPerino (2nd Place - Boss Rush)", desc = "The most desired synthetic headpiece for any true Hatsune Miku cosplayer.", types = { 'Heavy Helmet', 'Magical Helmet', 'Light Helmet' } },
{ name = "Crown of Ethereal Melons", theme = 'Custom', obtained = "xMelonGaming (1st Place - Boss Rush)", desc = "Forged from the auctioneer's produce section, this juicy crown acts as a refreshing snack in a pinch.", types = { 'Heavy Helmet', 'Magical Helmet', 'Light Helmet' } },
{ name = "Haori of the Water Hashira", theme = 'Custom', obtained = "yinlin_enjoyer (3rd Place - Boss Rush)", desc = "A haori woven in tribute to a beloved sister. It is a relic of remembrance not to be squandered.", types = { 'Heavy Chestplate', 'Magical Chestplate', 'Light Chestplate' } },
{ name = "Seraphic Bloom", theme = 'Custom', obtained = "qtRotem (First to reach Level 1000)", desc = "For a flower born of light will always rise from ash.", types = { 'Heavy Helmet', 'Magical Helmet', 'Light Helmet' } },
}

local THEME_PREFIX = { Cherub = 'CH', Halloween = 'H', Valentines = 'V', Christmas = 'C', Custom = 'Custom' }
local NO_APPLY = { Custom = true }

local TYPES = {
['Sword'] = { t1 = 'T1Sword.png', link = 'Weapons#Swords' },
['Katana'] = { t1 = 'T1Katana.png', link = 'Weapons#Katanas' },
['Bow'] = { t1 = 'T1Bow.png', link = 'Weapons#Bows' },
['Dagger'] = { t1 = 'T1Dagger.png', link = 'Weapons#Daggers' },
['Staff'] = { t1 = 'T1Staff.png', link = 'Weapons#Staves' },
['Sceptre'] = { t1 = 'T1Sceptre.png', link = 'Weapons#Sceptres' },
['Bomb'] = { t1 = 'T1Bomb.png', link = 'Abilities#Bombs' },
['Jewel'] = { t1 = 'T1Jewel.png', link = 'Abilities#Jewels' },
['Poison'] = { t1 = 'T1Poison.png', link = 'Abilities#Poisons' },
['Emblem'] = { t1 = 'T1Emblem.png', link = 'Abilities#Emblems' },
['Scripture'] = { t1 = 'T1Scripture.png', link = 'Abilities#Scriptures' },
['Orb'] = { t1 = 'T1Orb.png', link = 'Abilities#Orbs' },
['Star'] = { t1 = 'T1Star.png', link = 'Abilities#Stars' },
['Kunai'] = { t1 = 'T1Kunai.png', link = 'Abilities#Kunais' },
['Shield'] = { t1 = 'T1Shield.png', link = 'Abilities#Shields' },
['Cloak'] = { t1 = 'T1Cloak.png', link = 'Abilities#Cloaks' },
['Skull'] = { t1 = 'T1Skull.png', link = 'Abilities#Skulls' },
['Trap'] = { t1 = 'T1Trap.png', link = 'Abilities#Traps' },
['Heavy Helmet'] = { t1 = 'T1HeavyH.png', link = 'Armours' },
['Heavy Chestplate'] = { t1 = 'T1HeavyC.png', link = 'Armours' },
['Heavy Leggings'] = { t1 = 'T1HeavyL.png', link = 'Armours' },
['Heavy Boots'] = { t1 = 'T1HeavyB.png', link = 'Armours' },
['Light Helmet'] = { t1 = 'T1LightH.png', link = 'Armours' },
['Light Chestplate'] = { t1 = 'T1LightC.png', link = 'Armours' },
['Light Leggings'] = { t1 = 'T1LightL.png', link = 'Armours' },
['Light Boots'] = { t1 = 'T1LightB.png', link = 'Armours' },
['Magical Helmet'] = { t1 = 'T1MagicH.png', link = 'Armours' },
['Magical Chestplate'] = { t1 = 'T1MagicC.png', link = 'Armours' },
['Magical Leggings'] = { t1 = 'T1MagicL.png', link = 'Armours' },
['Magical Boots'] = { t1 = 'T1MagicB.png', link = 'Armours' },
}

local function spriteFile(r)
local s = r.name:gsub("(%a)([%w']*)", function(a, b) return a:upper() .. b end)
s = s:gsub("%s+", "")
return (THEME_PREFIX[r.theme] or '') .. 'Reskin-' .. s .. '.png'
end

local function typeLink(t)
local info = TYPES[t]
if not info then return t end
return string.format('[[File:%s|16x16px|link=%s]] [[%s|%s]]', info.t1, info.link, info.link, t)
end

function p.forType(frame)
local t = mw.text.trim(frame.args[1] or '')
if t == '' then return '' end
local out = {}
for _, r in ipairs(reskins) do
if not NO_APPLY[r.theme] then
for _, rt in ipairs(r.types) do
if rt == t then
out[#out + 1] = string.format(
'[[File:%s|16x16px|link=Reskins]] [[Reskins|%s]]', spriteFile(r), r.name .. ' Skin')
break
end
end
end
end
return table.concat(out, '<br>')
end

local function bandVariant(name, count)
local sum = 0
for i = 1, #name do sum = sum + name:byte(i) end
return (sum % count) + 1
end

function p.theme(frame)
local key = mw.text.trim(frame.args[1] or '')
local out = {}
for _, r in ipairs(reskins) do
if r.theme == key then
local applies = {}
for _, t in ipairs(r.types) do
applies[#applies + 1] = typeLink(t)
end
local box = frame:expandTemplate{ title = 'ItemInfobox', args = {
title = r.name,
images = spriteFile(r),
Desc = r.desc,
Ability = "'''Applies to:'''<br>" .. table.concat(applies, '<br>'),
Drop = r.obtained,
} }
-- wrap so CSS can theme the border/band per reskin theme (Cherub gets 1 of 5 bands)
local cls = 'reskin-skin reskin-' .. key:lower()
if key == 'Cherub' then
cls = cls .. ' cherub-band-' .. bandVariant(r.name, 5)
end
out[#out + 1] = '<div class="' .. cls .. '">' .. box .. '</div>'
end
end
if #out == 0 then return "''No reskins in this category yet.''" end
return table.concat(out, '\n')
end

return p

MediaWiki:Minerva.css

2026-07-01T21:14:25Z

Willow: DISAPPEAAR

/* CSS placed here will be applied to all skins */

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');
@font-face {
font-family: "Outfit";
src: url("/fonts/Outfit.ttf") format("truetype");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Daedalus";
src: url("/fonts/000webfont.ttf") format("truetype");
}
:root,
.view-dark {
--content-link-color: #ffc05f;
--content-border-color: #feffe5;
--heading-font-family: "Daedalus", sans-serif;
--body-font-family: "Outfit", sans-serif;
--accent-link-color: #22214d;
--content-link-label-color: #0b101b;
}

:root{
--is-top-logo: 1;
--logo-file-width: 160;
--logo-file-height: 160;
--logo-height: calc(var(--logo-file-height)*1px);
--logo-margin: 15px;
--is-navigation-inside-content: 0;
}

/*****************************
* Sound *
******************************/
.sound-button,.sound-button a,.sound-button a.image,.sound-button img {
background: none !important;
background-color: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
text-decoration: none !important;
padding: 0 !important;
margin: 0 !important
}

.sound-button img {
filter: invert(93%) sepia(5%) saturate(782%) hue-rotate(151deg) brightness(96%) contrast(89%);
transition: filter 0.2s ease-in-out;
display: inline-block !important;
vertical-align: middle;
margin: 0 !important;
}

.sound-button {
cursor: pointer;
display: inline-block !important;
vertical-align: middle;
margin: 0 2px !important;
line-height: 1;
white-space: nowrap;
}

.sound-button:hover img,.sound-button.playing img {
filter: invert(93%) sepia(5%) saturate(782%) hue-rotate(151deg) brightness(115%) contrast(100%) drop-shadow(0 0 2px rgba(201,225,230,0.7))
}

.sound-button a:hover,.sound-button a:focus {
background: none !important;
border: none !important
}
/*****************************
* End Sound *
******************************/

/*****************************
* PortableInfoboxes *
******************************/
:root {
image-rendering: pixelated !important;
--pi-background: var(--background-color-base);
--pi-secondary-background: var(--color-progressive);
--pi-secondary-background-label: var(--content-link-label-color);
--pi-border-color: color-mix(in srgb, var(--color-progressive) 50%, transparent);
}

.portable-infobox .pi-title,
.portable-infobox .pi-header {
text-align:center;
font-size:1.5em;
background: color-mix(in srgb, var(--color-progressive) 75%, transparent);
color:var(--pi-secondary-background-label);
}

.portable-infobox .pi-data {
background: color-mix(in srgb, var(--color-progressive) 18%, transparent);
font-size: 115%;
word-wrap: normal;
}

.miniboss-box .portable-infobox {
box-shadow: 3px 3px 6px var(--content-border-color);
}

.portable-infobox .pi-image {
padding: 8px;
}

.pi-image-thumbnail {
max-width:100%;
}

.pi-section-navigation .pi-section-tab.pi-section-active,
.pi-section-navigation .pi-section-tab.current,
.pi-media-collection .pi-tab-link.current {
background: var(--pi-secondary-background);
color: var(--pi-secondary-background-label);
}

.mw-body .portable-infobox h2,
.mw-body .portable-infobox h3 {
text-shadow: 0 0 5px var(--color-progressive);
border-bottom: 0;
font-family: var(--heading-font-family);
font-weight: 550;
margin: 0;
word-wrap: normal;
}

.mw-body .portable-infobox {
border-radius:5px;
border-image-source: var(--border-image-base);
border-image-slice: 15 16;
border-image-width: 15px;
border-image-repeat: stretch;
}

.mw-body .portable-infobox h3 {
font-size: 80%;
font-weight: 500;
}
/*****************************
* End PortableInfoboxes *
******************************/

/** as of Module:navbox version 1.2.2 **/

/*********************************************************************************************************************
* Semantically-correct horizontal lists (for Module:Navbox, and they're more machine-readable than {{*}}-formatting) *
**********************************************************************************************************************/
.hlist dl,
.hlist ol,
.hlist ul {
margin: 0;
padding: 0;
}

/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
/*
* don't trust the note that says margin doesn't work with inline
* removing margin: 0 makes dds have margins again
* We also want to reset margin-right in Minerva
*/
margin: 0;
display: inline;
}

/* Display requested top-level lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
/* Display nested lists 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;
}

/* Hide empty list items */
.hlist .mw-empty-li {
display: none;
}

/* TODO: :not() can maybe be used here to remove the later rule. naive test
* seems to work. more testing needed. like so: */
.hlist dt:not(:last-child)::after {
content: ":\20";
}
.hlist dd:not(:last-child)::after,
.hlist li:not(:last-child)::after {
/* "space, Middle Dot, space"
We use unicode numbers instead of the raw characters due to a Firefox encoding bug on unicode characters.
The space is also encoded because raw spaces combined with a unicode number strips the spaces under some conditions such as single-line lists */
/* content: "\20\00B7\20"; font-weight: bold; */
/* "space   •   space"
There may (and likely) be an extra whitespace between <li>s,
therefore we have to use a space character as last character of this sequence.
By this way, the last space and the next whitespce will collapse as a single space,
to make the whitespace on both sides of the middle dot the same width.
*/
content: "\20\A0\2022\A0\20";
font-weight: inherit;
}

/* Add parentheses around nested lists */
.hlist dd ol::before,
.hlist dd ul::before,
.hlist dd dl::before,
.hlist dt ol::before,
.hlist dt ul::before,
.hlist dt dl::before,
.hlist li ol::before,
.hlist li ul::before,
.hlist li dl::before {
content: "\20(";
font-weight: inherit;
}

.hlist dd ol::after,
.hlist dd ul::after,
.hlist dd dl::after,
.hlist dt ol::after,
.hlist dt ul::after,
.hlist dt dl::after,
.hlist li ol::after,
.hlist li ul::after,
.hlist li dl::after {
content: ")";
font-weight: inherit;
}

/* Put ordinals in front of ordered list items */
.hlist ol {
counter-reset: listitem;
}

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

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

/* Progressive enhancement:
* try to make the dot always follow the list item in same line
*/
.hlist :is(li,dt,dd):not(:has(:is(li,dt,dd))){
display: inline-block;
}

/********************************************
* End semantically-correct horizontal lists *
*********************************************/

/**********************************************************
* Template:Navbox (RANGER) (needs semantic horizontal lists above) *
***********************************************************/
.ranger-navbox{
--navbox-background: none;
--navbox-margin: 0.5em auto;
--navbox-padding: 4px;
--navbox-gap: 3px;
--navbox-outer-border-color: color-mix(in srgb, var(--color-progressive) 50%, transparent);
--navbox-outer-border-width: 1px;
--navbox-outer-border-style: solid;
--navbox-outer-border-radius: 0px;
--navbox-font-size: calc(1em - 2px);
--navbox-title-color: var(--content-link-label-color);
--navbox-title-font-size: calc(125%);
--navbox-title-background: var(--color-progressive);
--navbox-title-icon-color: var(--content-link-label-color);
--navbox-title-link-color: var(--navbox-title-color);
--navbox-title-link-color--visited: var(--navbox-title-link-color);
--navbox-title-link-color--hover: var(--accent-link-color);
--navbox-title-redlink-color: var(--navbox-title-link-color);
--navbox-title-link-decoration: underline solid;
--navbox-title-redlink-decoration: underline wavy;
--navbox-title-padding--y: 0.5em;
--navbox-above-background: color-mix(in srgb, var(--color-base) 15%, transparent);
--navbox-above-color: var(--color-base);
--navbox-above-padding: var(--navbox-list-padding);
--navbox-below-background: var(--navbox-above-background);
--navbox-below-color: var(--navbox-above-color);
--navbox-below-padding: var(--navbox-above-padding);
--navbox-header-color: var(--navbox-title-color);
--navbox-header-font-size: calc(110%);
--navbox-header-background: var(--navbox-title-background);
--navbox-header-icon-color: var(--navbox-title-icon-color);
--navbox-header-link-color: var(--navbox-title-link-color);
--navbox-header-link-color--visited: var(--navbox-title-link-color--visited);
--navbox-header-link-color--hover: var(--navbox-title-link-color--hover);
--navbox-header-redlink-color: var(--navbox-title-redlink-color);
--navbox-header-link-decoration: var(--navbox-title-link-decoration);
--navbox-header-redlink-decoration: var(--navbox-title-redlink-decoration);
--navbox-header-padding--y: 0.3em;
--navbox-subheader-font-size: calc(100%);
--navbox-subheader-padding--y: calc(var(--navbox-header-padding--y)/2);
--navbox-list-background: color-mix(in srgb, var(--color-base) 5%, transparent);
--navbox-list-background--striped: color-mix(in srgb, var(--color-base) 8%, transparent);
--navbox-list-color: var(--color-base);
--navbox-list-padding: 0.25em 0.5em;
--navbox-group-text-align: left;
--navbox-group-text-align--mobile: left;
--navbox-group-background: color-mix(in srgb, var(--color-progressive) 20%, transparent);
--navbox-group-color: var(--color-base);
--navbox-group-padding: var(--navbox-list-padding);
--navbox-tree-line-color: color-mix(in srgb, var(--color-progressive) 30%, transparent);
--navbox-tree-line-width: 2px;
--navbox-tree-indent: 1em;
--navbox-tree-line-indent: 0.5em;
--navbox-tree-line-spacing: var(--navbox-gap);
--icon-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-up' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M6 15l6 -6l6 6'%3E%3C/path%3E%3C/svg%3E");
--icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-down' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M6 9l6 6l6 -6'%3E%3C/path%3E%3C/svg%3E");
--icon-metalinks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-edit' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1'%3E%3C/path%3E%3Cpath d='M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z'%3E%3C/path%3E%3Cpath d='M16 5l3 3'%3E%3C/path%3E%3C/svg%3E");
--navbox-icon-offset--x: 0.5rem; /* should be an absolute length (rem-based or px-based) */
}
.ranger-navbox.pill,
.ranger-navbox.pill-mobile{
--navbox-pill-gap: 0.3em;
--navbox-pill-padding: 0.25em 0.75em;
--navbox-pill-border-radius: 3px;
--navbox-pill-box-shadow: none;
--navbox-pill-background: color-mix(in srgb, var(--color-base) 5%, transparent);
--navbox-pill-box-shadow--hover: inset 0 0 3px var(--navbox-list-color);
--navbox-pill-background--hover: var(--navbox-pill-background);
--navbox-list-background: none;
--navbox-list-background--striped: color-mix(in srgb, var(--color-base) 3%, transparent);
}
.ranger-navbox.no-underline-title-links{
--navbox-title-link-color: var(--accent-link-color);
--navbox-title-link-decoration: none;
--navbox-title-redlink-decoration: none;
}
.ranger-navbox.noborder,
.ranger-navbox.no-border{
--navbox-padding: 0px;
--navbox-outer-border-width: 0px;
}

/******************************
* Fallback for older browsers *
*******************************/
@supports not (color:color-mix(in srgb, #000, transparent)) {
.ranger-navbox {
--navbox-above-background: var(--background-color-neutral-subtle);
--navbox-list-background: transparent;
--navbox-list-background--striped: var(--background-color-neutral-subtle);
--navbox-group-background: var(--background-color-neutral-subtle);
--navbox-tree-line-color: var(--background-color-neutral-subtle);
}
.ranger-navbox.pill,
.ranger-navbox.pill-mobile {
--navbox-pill-background: var(--background-color-neutral-subtle);
--navbox-list-background--striped: transparent;
}
}
/***************
* End fallback *
****************/

.ranger-navbox{
border-color: var(--navbox-outer-border-color);
border-style: var(--navbox-outer-border-style);
border-width: var(--navbox-outer-border-width);
border-radius: var(--navbox-outer-border-radius);
padding: var(--navbox-padding);
font-size: var(--navbox-font-size);
margin: var(--navbox-margin);
background: var(--navbox-background);
line-height: 1.5;
clear:both;
}

.ranger-navbox * {
border: 0;
}
.ranger-navbox .center *{
margin-left: unset;
margin-right: unset;
}
.ranger-navbox,
.ranger-navbox .ranger-section,
.ranger-navbox .ranger-listbox{
display: flex;
flex-direction: column;
gap: var(--navbox-gap);
}
.ranger-navbox .ranger-title,
.ranger-navbox .ranger-header{
text-align: center;
min-height: 1.5em;
position: relative;
z-index: 0;
font-weight: bold;
}
.ranger-navbox .ranger-title{
color: var(--navbox-title-color);
background: var(--navbox-title-background);
font-size: var(--navbox-title-font-size);
padding: var(--navbox-title-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */
}
.ranger-navbox .ranger-title a,
.ranger-navbox .ranger-title a:visited,
.ranger-navbox .ranger-title a:hover,
.ranger-navbox .ranger-title a.external,
.ranger-navbox .ranger-title a.external:visited,
.ranger-navbox .ranger-title a.external:hover {
text-decoration: var(--navbox-title-link-decoration);
}
.ranger-navbox .ranger-title a.new,
.ranger-navbox .ranger-title a.new:visited {
text-decoration: var(--navbox-title-redlink-decoration);
}
.ranger-navbox .ranger-title a,
.ranger-navbox .ranger-title a.external,
.ranger-navbox .ranger-title a.external:visited {
color: var(--navbox-title-link-color);
}
.ranger-navbox .ranger-title a:visited{
color: var(--navbox-title-link-color--visited);
}
.ranger-navbox .ranger-title a.new,
.ranger-navbox .ranger-title a.new:visited{
color:var(--navbox-title-redlink-color);
}
.ranger-navbox .ranger-title a:hover,
.ranger-navbox .ranger-title a:visited:hover,
.ranger-navbox .ranger-title a.external:hover,
.ranger-navbox .ranger-title a.external:visited:hover {
color:var(--navbox-title-link-color--hover);
}
.ranger-navbox .ranger-header{
color: var(--navbox-header-color);
background: var(--navbox-header-background);
font-size: var(--navbox-header-font-size);
padding: var(--navbox-header-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */
}
.ranger-navbox .ranger-sublist .ranger-header{
font-size: var(--navbox-subheader-font-size);
padding: var(--navbox-subheader-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */
}
.ranger-navbox .ranger-header a,
.ranger-navbox .ranger-header a:visited,
.ranger-navbox .ranger-header a:hover,
.ranger-navbox .ranger-header a.external,
.ranger-navbox .ranger-header a.external:visited,
.ranger-navbox .ranger-header a.external:hover {
text-decoration: var(--navbox-header-link-decoration);
}
.ranger-navbox .ranger-header a.new,
.ranger-navbox .ranger-header a.new:visited {
text-decoration: var(--navbox-header-redlink-decoration);
}
.ranger-navbox .ranger-header a,
.ranger-navbox .ranger-header a.external,
.ranger-navbox .ranger-header a.external:visited {
color: var(--navbox-header-link-color);
}
.ranger-navbox .ranger-header a:visited{
color: var(--navbox-header-link-color--visited);
}
.ranger-navbox .ranger-header a.new,
.ranger-navbox .ranger-header a.new:visited{
color:var(--navbox-header-redlink-color);
}
.ranger-navbox .ranger-header a:hover,
.ranger-navbox .ranger-header a:visited:hover,
.ranger-navbox .ranger-header a.external:hover,
.ranger-navbox .ranger-header a.external:visited:hover {
color:var(--navbox-header-link-color--hover);
}
.ranger-navbox .ranger-meta{
font-size: var(--navbox-title-font-size);
position: absolute;
left: var(--navbox-icon-offset--x);
top: calc(var(--navbox-title-padding--y) + 0.08em); /* 0.08em: vertial offset tweak based on the icon graph */
display: block;
}
.ranger-navbox .ranger-meta .nv{
--mask: var(--icon-metalinks);
display: block;
width: 0.84em; /* based on the icon graph */
height: 0.84em;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center center;
mask-position: center center;
background-color: var(--navbox-title-icon-color);
}
.ranger-navbox .ranger-meta .nv > a{
display: block;
width: 100%;
height: 100%;
opacity: 0;
}
.ranger-navbox .ranger-meta .nv > a > span{
display: block;
width: 100%;
height: 100%;
overflow: hidden;
}
.ranger-navbox .ranger-meta:has(.mw-selflink){
display: none;
}
.ranger-navbox,
.ranger-navbox .ranger-section{
position: relative;
}
.ranger .mw-collapsible-toggle-placeholder{
display: none;
}
.ranger-navbox .ranger-title > .ranger-title-text,
.ranger-navbox .ranger-header > .ranger-header-text{
pointer-events: none;
}
.ranger-navbox .ranger-title > .ranger-title-text a,
.ranger-navbox .ranger-header > .ranger-header-text a{
pointer-events: auto;
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle,
.ranger-navbox .ranger-header > .mw-collapsible-toggle{
--mask: var(--icon-chevron-down);
position: absolute;
right: 0;
top: 0;
z-index: -1;
display: block;
width: 100%;
height: 100%;
overflow:hidden;
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle,
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle{
width: 1.5em;
height: 1.5em;
right: var(--navbox-icon-offset--x);
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle{
top: var(--navbox-title-padding--y);
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle{
top: var(--navbox-header-padding--y);
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-sublist .ranger-header > .mw-collapsible-toggle{
top: var(--navbox-subheader-padding--y);
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle::before,
.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
content: "";
display: block;
width: 1.5em;
height: 1.5em;
position: absolute;
right: var(--navbox-icon-offset--x);
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center center;
mask-position: center center;
background-color: var(--navbox-title-icon-color);
transform: scaleY(-1);
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle::before{
top: var(--navbox-title-padding--y);
}
.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
top: var(--navbox-header-padding--y);
}
.ranger-navbox .ranger-sublist .ranger-header > .mw-collapsible-toggle::before{
top: var(--navbox-subheader-padding--y);
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle::before,
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle::before{
top: 0;
right: 0;
}
.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
background-color: var(--navbox-header-icon-color);
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before,
.ranger-navbox .ranger-header > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before{
transform: none;
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle *,
.ranger-navbox .ranger-title > .mw-collapsible-toggle::after,
.ranger-navbox .ranger-header > .mw-collapsible-toggle *,
.ranger-navbox .ranger-header > .mw-collapsible-toggle::after{
display: none;
}
.ranger-navbox .ranger-list{
width: unset;
padding: var(--navbox-list-padding);
}
.ranger-navbox .ranger-above{
background: var(--navbox-above-background);
color: var(--navbox-above-color);
padding: var(--navbox-above-padding);
width: unset;
}
.ranger-navbox .ranger-below{
background: var(--navbox-below-background);
color: var(--navbox-below-color);
padding: var(--navbox-below-padding);
width: unset;
}
.ranger-navbox .ranger-sublist{
display: flex;
flex-direction: column;
gap: var(--navbox-gap);
}
.ranger-navbox .ranger-section-body{
display: grid;
gap: var(--navbox-gap);
grid-template-columns: auto minmax(0,1fr);
}
/* gap fix for collapsed content */
.ranger-navbox [class^="ranger-"][hidden="until-found"]{
margin-top: calc(0px - var(--navbox-gap)) !important;
}
.ranger-navbox .ranger-row{
display: contents;
}
.ranger-navbox .ranger-group,
.ranger-navbox .ranger-subgroup{
text-align: var(--navbox-group-text-align);
white-space: nowrap;
font-weight: bold;
background: var(--navbox-group-background);
color: var(--navbox-group-color);
padding: var(--navbox-group-padding);
width: unset;
}
/* for desktop view */
.ranger-navbox.group-align-left .ranger-group,
.ranger-navbox.group-align-left .ranger-subgroup{
--navbox-group-text-align: left;
}
.ranger-navbox.group-align-center .ranger-group,
.ranger-navbox.group-align-center .ranger-subgroup{
--navbox-group-text-align: center;
}
.ranger-navbox.group-align-right .ranger-group,
.ranger-navbox.group-align-right .ranger-subgroup{
--navbox-group-text-align: right;
}
/* for mobile view */
.ranger-navbox.mobile-group-align-left .ranger-group,
.ranger-navbox.mobile-group-align-left .ranger-subgroup{
--navbox-group-text-align--mobile: left;
}

.ranger-navbox.mobile-group-align-center .ranger-group,
.ranger-navbox.mobile-group-align-center .ranger-subgroup{
--navbox-group-text-align--mobile: center;
}

.ranger-navbox.mobile-group-align-right .ranger-group,
.ranger-navbox.mobile-group-align-right .ranger-subgroup{
--navbox-group-text-align--mobile: right;
}

.ranger-navbox .ranger-listbox > .ranger-wrap{
background: var(--navbox-list-background);
color: var(--navbox-list-color);
flex-grow: 1;
}
.ranger-navbox .ranger-sublist{
flex-grow: var(--count);
}
.ranger-navbox .ranger-listbox:first-child{ /* A list-n without group-n */
grid-column-end: span 2;
}
.ranger-navbox .ranger-group,
.ranger-navbox .ranger-subgroup,
.ranger-navbox .ranger-listbox > .ranger-wrap{
display: grid;
justify-items: stretch;
align-items: center;
}
.ranger-navbox.striped-even .ranger-even,
.ranger-navbox.striped-odd .ranger-odd{
background: var(--navbox-list-background--striped);
}
/* make links use full line height (larger click box)*/
.ranger-navbox .hlist a{
display: inline-block;
}

.ranger-navbox .align-left,
.ranger-navbox .alignleft{
text-align: left;
}
.ranger-navbox .align-center,
.ranger-navbox .aligncenter{
text-align: center;
}
.ranger-navbox .align-right,
.ranger-navbox .alignright{
text-align: right;
}

/* responsive */
@media screen and (max-width: 720px) {
.ranger-navbox .ranger-section-body,
.ranger-navbox .ranger-sublist {
display: flex;
flex-flow: column;
}
.ranger-navbox .ranger-row{
display: block;
}
.ranger-navbox .ranger-group + .ranger-listbox > .ranger-sublist:first-child,
.ranger-navbox .ranger-subgroup + .ranger-listbox > .ranger-sublist:first-child{
margin-top: var(--navbox-gap);
}
.ranger-navbox .ranger-listbox.empty{
display: none;
}
.ranger-navbox .ranger-group,
.ranger-navbox .ranger-subgroup{
text-align: var(--navbox-group-text-align--mobile);
white-space: normal;
}

.ranger-navbox .ranger-sublist {
padding-left: var(--navbox-tree-indent);
margin-left: var(--navbox-tree-line-indent);
}
.ranger-navbox .ranger-subgroup,
.ranger-navbox .ranger-listbox {
position:relative;
}
.ranger-navbox .ranger-group br,
.ranger-navbox .ranger-subgroup br{
display: none;
}
.ranger-navbox .ranger-sublist > .ranger-section > .ranger-header{
margin-left: calc( 0px - var(--navbox-tree-indent) - var(--navbox-tree-line-indent));
}
.ranger-navbox .ranger-sublist .ranger-row > ::before{
position: absolute;
left: calc(0px - var(--navbox-tree-indent));
top: 0;
width: var(--navbox-tree-line-width);
height: 100%;
content: '';
display: block;
background-color: var(--navbox-tree-line-color);
}
.ranger-navbox .ranger-sublist .ranger-row > .ranger-listbox::before,
.ranger-navbox .ranger-row.empty-list > .ranger-subgroup::before{
height: calc(100% + var(--navbox-gap));
}
.ranger-navbox .ranger-sublist .ranger-row:last-child > ::before {
display: none;
}
.ranger-navbox .ranger-sublist .ranger-row:last-child > :first-child::before {
display: block;
height: calc(50% + var(--navbox-tree-line-width)/2);
}
.ranger-navbox .ranger-subgroup::after,
.ranger-navbox .empty-group > .ranger-listbox > .ranger-wrap::after{
position: absolute;
left: calc(0px - var(--navbox-tree-indent) + var(--navbox-tree-line-width));
width: calc(var(--navbox-tree-indent) - var(--navbox-tree-line-spacing) - var(--navbox-tree-line-width));
height: var(--navbox-tree-line-width);
content: '';
background-color: var(--navbox-tree-line-color);
}
/* increase height for links */
.ranger-navbox .hlist{
line-height: 2;
}
}
/**** `.pill` class: the "pill" style ****/
/* remove middle dots betweem items */
.ranger-navbox.pill .hlist dd:not(:last-child)::after,
.ranger-navbox.pill .hlist li:not(:last-child)::after{
display: none;
}
/* remove parentheses around nested lists*/
.ranger-navbox.pill .hlist dd ol::before,
.ranger-navbox.pill .hlist dd ul::before,
.ranger-navbox.pill .hlist dd dl::before,
.ranger-navbox.pill .hlist dt ol::before,
.ranger-navbox.pill .hlist dt ul::before,
.ranger-navbox.pill .hlist dt dl::before,
.ranger-navbox.pill .hlist li ol::before,
.ranger-navbox.pill .hlist li ul::before,
.ranger-navbox.pill .hlist li dl::before,
.ranger-navbox.pill .hlist dd ol::after,
.ranger-navbox.pill .hlist dd ul::after,
.ranger-navbox.pill .hlist dd dl::after,
.ranger-navbox.pill .hlist dt ol::after,
.ranger-navbox.pill .hlist dt ul::after,
.ranger-navbox.pill .hlist dt dl::after,
.ranger-navbox.pill .hlist li ol::after,
.ranger-navbox.pill .hlist li ul::after,
.ranger-navbox.pill .hlist li dl::after {
display: none;
}
/* make lists inline-flex */
.ranger-navbox.pill .hlist ul,
.ranger-navbox.pill .hlist ol,
.ranger-navbox.pill .hlist dl{
display: inline-flex;
gap: var(--navbox-pill-gap);
flex-wrap: wrap;
}
/* "pill" style for items */
.ranger-navbox.pill .hlist li,
.ranger-navbox.pill .hlist dt,
.ranger-navbox.pill .hlist dd{
padding: var(--navbox-pill-padding);
border-radius: var(--navbox-pill-border-radius);
box-shadow: var(--navbox-pill-box-shadow);
background: var(--navbox-pill-background);
/* 100% height */
display: flex;
align-items: center;
/* for nested lists */
gap: var(--navbox-pill-gap);
flex-wrap: wrap;
}
/* Add a hover / focus feedback style */
.ranger-navbox.pill .hlist dd:hover,
.ranger-navbox.pill .hlist dd:focus,
.ranger-navbox.pill .hlist dt:hover,
.ranger-navbox.pill .hlist dt:focus,
.ranger-navbox.pill .hlist li:hover,
.ranger-navbox.pill .hlist li:focus {
box-shadow: var(--navbox-pill-box-shadow--hover);
background: var(--navbox-pill-background--hover);
}
/**** `.pill-mobile` class: only apply the "pill" style on mobile ****/
@media screen and (max-width: 720px) {
/* remove middle dots betweem items */
.ranger-navbox.pill-mobile .hlist dd:not(:last-child)::after,
.ranger-navbox.pill-mobile .hlist li:not(:last-child)::after{
display: none;
}
/* remove parentheses around nested lists*/
.ranger-navbox.pill-mobile .hlist dd ol::before,
.ranger-navbox.pill-mobile .hlist dd ul::before,
.ranger-navbox.pill-mobile .hlist dd dl::before,
.ranger-navbox.pill-mobile .hlist dt ol::before,
.ranger-navbox.pill-mobile .hlist dt ul::before,
.ranger-navbox.pill-mobile .hlist dt dl::before,
.ranger-navbox.pill-mobile .hlist li ol::before,
.ranger-navbox.pill-mobile .hlist li ul::before,
.ranger-navbox.pill-mobile .hlist li dl::before,
.ranger-navbox.pill-mobile .hlist dd ol::after,
.ranger-navbox.pill-mobile .hlist dd ul::after,
.ranger-navbox.pill-mobile .hlist dd dl::after,
.ranger-navbox.pill-mobile .hlist dt ol::after,
.ranger-navbox.pill-mobile .hlist dt ul::after,
.ranger-navbox.pill-mobile .hlist dt dl::after,
.ranger-navbox.pill-mobile .hlist li ol::after,
.ranger-navbox.pill-mobile .hlist li ul::after,
.ranger-navbox.pill-mobile .hlist li dl::after {
display: none;
}
/* make lists inline-flex */
.ranger-navbox.pill-mobile .hlist ul,
.ranger-navbox.pill-mobile .hlist ol,
.ranger-navbox.pill-mobile .hlist dl{
display: inline-flex;
gap: var(--navbox-pill-gap);
flex-wrap: wrap;
}
.ranger-navbox.pill-mobile .hlist li,
.ranger-navbox.pill-mobile .hlist dt,
.ranger-navbox.pill-mobile .hlist dd{
padding: var(--navbox-pill-padding);
border-radius: var(--navbox-pill-border-radius);
box-shadow: var(--navbox-pill-box-shadow);
background: var(--navbox-pill-background);
display: flex;
align-items: center;
gap: var(--navbox-pill-gap);
flex-wrap: wrap;
}
/* Add a hover / focus feedback style */
.ranger-navbox.pill-mobile .hlist dd:hover,
.ranger-navbox.pill-mobile .hlist dd:focus,
.ranger-navbox.pill-mobile .hlist dt:hover,
.ranger-navbox.pill-mobile .hlist dt:focus,
.ranger-navbox.pill-mobile .hlist li:hover,
.ranger-navbox.pill-mobile .hlist li:focus {
box-shadow: var(--navbox-pill-box-shadow--hover);
background: var(--navbox-pill-background--hover);
}
}
/*********************
* End Template:Navbox*
**********************/

.mp-box {
display:flex;
flex-flow:column nowrap;
width: calc(100% - 2px);
box-sizing: border-box;
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.12) 0%, transparent 35%, rgba(76, 87, 181, 0.1) 65%, rgba(66, 162, 241, 0.12) 100%),
radial-gradient(ellipse at top left, rgba(66, 162, 241, 0.15), transparent 50%),
radial-gradient(ellipse at bottom right, rgba(76, 87, 181, 0.12), transparent 50%),
var(--background-color-transparent);
padding:0;
box-shadow:
0 0 50px 10px rgba(66, 162, 241, 0.2),
0 0 80px 15px rgba(0, 0, 0, 0.8),
inset 0 0 80px 15px rgba(66, 162, 241, 0.08),
0 0 0 1px rgba(66, 162, 241, 0.3),
inset 0 0 0 1px rgba(66, 162, 241, 0.2);
margin-top: 1em;
border-radius: 6px;
position: relative;
overflow: hidden;
}

.mp-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.6) 15%,
rgba(66, 162, 241, 1) 50%,
rgba(66, 162, 241, 0.6) 85%,
transparent);
box-shadow:
0 0 15px rgba(66, 162, 241, 0.8),
0 0 25px rgba(66, 162, 241, 0.5);
}

.mp-box::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.4) 20%,
rgba(66, 162, 241, 0.7) 50%,
rgba(66, 162, 241, 0.4) 80%,
transparent);
box-shadow: 0 0 10px rgba(66, 162, 241, 0.6);
}

.mp-body {
height: 100%;
display: flex;
padding:0.5em;
flex-flow: column nowrap;
}

.mp-box.centered-content .mp-body {
height: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: space-evenly;
}

.mp-box.has-floating-image {
display:block;
}

.mp-box.has-floating-image .mp-body {
height:unset;
display:block;
}

.mp-box h2 {
text-align:center;
font-weight:bold;
font-family: "Daedalus";
overflow: initial;
font-size: 4em;
margin: 0.5em 0;
padding: 0.5em 0;
text-shadow:
0 0 30px rgba(66, 162, 241, 0.8),
0 0 15px rgba(66, 162, 241, 0.6),
0 2px 5px rgba(0, 0, 0, 0.8);
color:var(--content-border-color);
background:
linear-gradient(90deg, transparent 0%, rgba(66, 162, 241, 0.08) 50%, transparent 100%),
radial-gradient(ellipse at center, rgba(26, 26, 34, 0.6), transparent 70%);
border-radius: 8px;
position: relative;
}

.mp-box h2::after {
content: '';
position: absolute;
left: 10%;
right: 10%;
bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.3) 30%, rgba(66, 162, 241, 0.5) 50%, rgba(66, 162, 241, 0.3) 70%, transparent);
}

.mp-box .welcome-message {
font-size: 5.5em;
margin: 0;
padding: 0.4em 0;
color: #fff;
font-family: "Daedalus";
text-shadow:
0 0 50px rgba(66, 162, 241, 1),
0 0 35px rgba(66, 162, 241, 0.9),
0 0 20px rgba(66, 162, 241, 0.7),
0 0 10px rgba(255, 255, 255, 0.8),
0 6px 12px rgba(0, 0, 0, 1),
0 0 80px rgba(66, 162, 241, 0.6);
letter-spacing: 0.08em;
position: relative;
animation: welcome-pulse 4s ease-in-out infinite;
background:
linear-gradient(90deg,
transparent 0%,
rgba(66, 162, 241, 0.05) 30%,
rgba(66, 162, 241, 0.08) 50%,
rgba(66, 162, 241, 0.05) 70%,
transparent 100%);
padding: 0.5em 1em;
border-radius: 8px;
}

.mp-box .welcome-message::before {
content: '';
position: absolute;
top: 0;
left: 5%;
right: 5%;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.6) 20%,
rgba(255, 255, 255, 0.8) 50%,
rgba(66, 162, 241, 0.6) 80%,
transparent);
box-shadow:
0 0 15px rgba(66, 162, 241, 1),
0 0 25px rgba(66, 162, 241, 0.6);
}

.mp-box .welcome-message::after {
content: '';
position: absolute;
bottom: 0;
left: 5%;
right: 5%;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.5) 20%,
rgba(255, 255, 255, 0.6) 50%,
rgba(66, 162, 241, 0.5) 80%,
transparent);
box-shadow:
0 0 12px rgba(66, 162, 241, 0.8),
0 0 20px rgba(66, 162, 241, 0.5);
}

@keyframes welcome-pulse {
0%, 100% {
text-shadow:
0 0 50px rgba(66, 162, 241, 1),
0 0 35px rgba(66, 162, 241, 0.9),
0 0 20px rgba(66, 162, 241, 0.7),
0 0 10px rgba(255, 255, 255, 0.8),
0 6px 12px rgba(0, 0, 0, 1),
0 0 80px rgba(66, 162, 241, 0.6);
}
50% {
text-shadow:
0 0 65px rgba(66, 162, 241, 1),
0 0 45px rgba(66, 162, 241, 1),
0 0 30px rgba(66, 162, 241, 0.8),
0 0 15px rgba(255, 255, 255, 1),
0 6px 12px rgba(0, 0, 0, 1),
0 0 100px rgba(66, 162, 241, 0.8);
}
}

#mp-banner-container {
position: relative;
}

#mp-box-welcome {
text-align:center;
position:relative;
overflow:hidden;
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.15) 0%, transparent 30%, rgba(76, 87, 181, 0.12) 70%, rgba(66, 162, 241, 0.15) 100%),
radial-gradient(ellipse at center, rgba(66, 162, 241, 0.18), transparent 60%),
var(--background-color-transparent);
box-shadow:
0 0 60px 12px rgba(66, 162, 241, 0.25),
0 0 100px 20px rgba(0, 0, 0, 0.8),
inset 0 0 100px 20px rgba(66, 162, 241, 0.1),
0 0 0 1px rgba(66, 162, 241, 0.4),
inset 0 0 0 1px rgba(66, 162, 241, 0.3);
}

#mp-welcome {
display:flex;
flex-flow:column nowrap;
position: relative;
height: 100%;
font-family: var(--heading-font-family);
z-index: 2;
box-sizing: border-box;
padding: 1em;
}

#mp-welcome .welcome-subtitle {
height: 100%;
font-family: var(--body-font-family);
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.08), transparent 50%, rgba(76, 87, 181, 0.08)),
color-mix(in srgb, var(--background-color-base) 85%, transparent);
margin-left: 4px;
margin-right: 4px;
margin-bottom: 4px;
padding: 1em;
border-radius: 4px;
box-shadow:
inset 0 0 20px 3px rgba(66, 162, 241, 0.1),
0 2px 8px rgba(0, 0, 0, 0.4);
border: 1px solid rgba(66, 162, 241, 0.2);
}

#mp-banner {
position: absolute;
width: 100%;
height: 100%;
filter: blur(5px);
z-index: -1;
background: url(/images/e/e0/MP_banner.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
}

.view-dark #mp-banner {
filter: blur(5px) brightness(50%);
}

.view-light #mp-banner {
filter: blur(5px) contrast(50%);
}

/* [[Template:MP_link]] */
.mp-links {
--gap:10px;
font-size: 1.5em;
}

.mp-links > ul {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
margin: 2px;
gap:var(--gap);
}

.mp-main > .mp-links > ul {
display: grid;
grid-template-columns: repeat(3, minmax(5em, 1fr));
}

@media screen and (max-width: 720px) {
.mp-main > .mp-links > ul {
grid-template-columns: 1fr;
gap: 1em;
}

.mp-main > .mp-links > ul > li {
margin: 0 0.5em;
}
}

.mp-links > ul > li {
display:flex;
flex-flow:column nowrap;
align-items:stretch;
text-align: center;
box-sizing:border-box;
padding-top: 0.5em;
border-image-source: url("/wiki/Special:Redirect/file/Wiki-border-kurva.png");
border-image-slice: 6;
border-image-width: 6px;
border-image-repeat: repeat repeat;
}

.mp-main > .mp-links > ul > li {
background:
linear-gradient(135deg, #42a2f125 0%, transparent 50%, #4c57b525 100%),
linear-gradient(to bottom, #42a2f140, #4c57b550, #42a2f130);
margin: 0 3em;
box-shadow:
inset 0 0 15px 3px #42a2f160,
inset 0 -2px 8px 0 #4c57b540,
0 2px 12px 0 rgba(66, 162, 241, 0.2),
inset 2px 0 2px -1px rgba(255, 255, 255, 0.15),
inset -2px 0 2px -1px rgba(255, 255, 255, 0.15);
border: 1px solid rgba(66, 162, 241, 0.3);
border-radius: 4px;
padding-top: 1em;
padding-bottom: 0.5em;
position: relative;
overflow: hidden;
}

.mp-main > .mp-links > ul > li::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
animation: tech-shimmer 3s infinite;
}

@keyframes tech-shimmer {
0% { left: -100%; }
100% { left: 100%; }
}

.mp-main > .mp-links > ul > li:hover {
background:
linear-gradient(135deg, #42a2f140 0%, transparent 50%, #4c57b540 100%),
linear-gradient(to bottom, #42a2f155, #4c57b565, #42a2f145);
box-shadow:
inset 0 0 20px 5px #42a2f180,
inset 0 -2px 10px 0 #4c57b560,
0 4px 20px 2px rgba(66, 162, 241, 0.35),
inset 2px 0 4px -1px rgba(255, 255, 255, 0.25),
inset -2px 0 4px -1px rgba(255, 255, 255, 0.25);
border-color: rgba(66, 162, 241, 0.5);
}

.mp-links > ul > li::before {
transition: opacity 0.5s ease-in-out;
z-index: 0;
pointer-events: none;
}
.mp-links > ul > li:hover::before {
opacity: 0.2;
}
.mp-links > ul > li:hover {
background-color: #42a2f180;
}

.mp-links.columns-1 > ul > li {flex: max(calc(100% - var(--gap)), 5em) 1 1;}
.mp-links.columns-2 > ul > li {flex: max(calc(50% - var(--gap)), 5em) 1 1;}
.mp-links.columns-3 > ul > li {flex: max(calc((100% / 3) - var(--gap)), 5em) 1 1;}
.mp-links.columns-4 > ul > li {flex: max(calc(25% - var(--gap)), 5em) 1 1;}
.mp-links.columns-5 > ul > li {flex: max(calc(20% - var(--gap)), 5em) 1 1;}
.mp-links.columns-6 > ul > li {flex: max(calc((100% / 6) - var(--gap)), 5em) 1 1;}
.mp-links.columns-7 > ul > li {flex: max(calc((100% / 7) - var(--gap)), 5em) 1 1;}

.mp-links > ul > li {
cursor: pointer;
}

.mp-links > ul > li > a {
display: flex;
align-items: center;
justify-content: center;
height:100%;
flex:1 1 auto;
box-sizing:border-box;
padding:5px;
pointer-events: auto;
}

.mp-links > ul > li > a:first-child {
height:100%;
}

.mp-links > ul > li > a:last-child:not(:first-child) {
height:unset;
}

.mp-links.stretch,
.mp-links.stretch > ul {
height:100%;
}

.mp-links.side-image li {
flex-flow:row nowrap;
}

/* MP icon lists */
.mp-iconlists {
display: flex;
flex-flow: wrap;
gap: 5px 20px;
}

.mp-iconlists > .mp-iconlist {
flex: 1;
min-width: fit-content;
}

.mp-iconlist {
font-size: 4em;
}

.mp-iconlist > h3 {
padding: 0;
margin: 0;
}

.mp-iconlist > ul {
list-style: none;
margin: 0;
}

/* MP gallery */
.mp-box ul.gallery {
display: flex;
flex-flow: wrap;
gap: 5px 10px;
align-items: flex-end;
justify-content: space-evenly;
margin: 0;
}

.mp-box ul.gallery .gallerytext {
margin-top: 1em;
padding: 0;
background-color: var(--background-color-neutral-subtle);
}

.mp-box .gallerybox:hover .gallerytext {
background-color: color-mix(in srgb, var(--content-link-color) 20%, transparent);
}

.mp-box ul.gallery .gallerytext > p {
margin: 0;
}

.mp-box ul.gallery .gallerytext a {
display: block;
padding: .5em 0;
}

/***********************
* End main page layout *
************************/

/***********************
* Start DRUID infoboxes *
************************/

.druid-container {
--druid-background-color: var(--background-color-base);
--druid-secondary-background-color: var(--color-progressive);
--druid-secondary-background-label-color: var(--content-link-label-color);
--druid-tertiary-background-color: var(--background-color-neutral-subtle);
--druid-border-color: var(--content-border-color);
--druid-link-color: var(--content-link-color);
--druid-link-label-color: var(--content-link-label-color);
}

.npc-infobox {
border-radius:5px;
border-image-source: url("/wiki/Special:Redirect/file/Wiki-border-kurva.png");
border-image-slice: 6;
border-image-width: 6px;
border-image-repeat: repeat;
position: relative;
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.05) 0%, transparent 40%, rgba(76, 87, 181, 0.05) 100%),
radial-gradient(ellipse at top, rgba(66, 162, 241, 0.08), transparent 60%),
var(--druid-background-color);
box-shadow:
0 0 40px 8px rgba(66, 162, 241, 0.15),
inset 0 0 60px 10px rgba(66, 162, 241, 0.05),
0 0 0 1px rgba(66, 162, 241, 0.2);
overflow: hidden;
}

.npc-infobox::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.4) 20%,
rgba(66, 162, 241, 0.8) 50%,
rgba(66, 162, 241, 0.4) 80%,
transparent);
box-shadow: 0 0 15px rgba(66, 162, 241, 0.8);
animation: data-scan 3s linear infinite;
}

@keyframes data-scan {
0% { opacity: 0.5; }
50% { opacity: 1; }
100% { opacity: 0.5; }
}

.npc-infobox::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.3) 30%,
rgba(66, 162, 241, 0.6) 50%,
rgba(66, 162, 241, 0.3) 70%,
transparent);
}

.druid-container {
background: var(--druid-background-color);
float: right;
clear: right;
margin: 0 0 1em 1em;
padding: 0.5em;
width:100%;
max-width:26em;
box-sizing: border-box;
border-collapse: separate;
}

@media screen and (max-width: 720px) {
.druid-container {
float: none;
margin: 0.5rem auto;
}
}

.druid-main-images-file,
.druid-main-image {
text-align:center;
}

.druid-infobox .druid-title,
.druid-infobox .druid-section {
text-align:center;
padding:1px;
border-radius: 0.1em;
}

.npc-infobox .druid-title {
background:
linear-gradient(135deg,
rgba(66, 162, 241, 0.25) 0%,
rgba(76, 87, 181, 0.2) 40%,
rgba(66, 162, 241, 0.15) 80%,
rgba(66, 162, 241, 0.25) 100%),
radial-gradient(ellipse at center, rgba(66, 162, 241, 0.2), transparent 70%),
linear-gradient(90deg,
color-mix(in srgb, var(--druid-secondary-background-color) 80%, transparent) 0%,
color-mix(in srgb, var(--druid-secondary-background-color) 70%, transparent) 100%);
color: var(--druid-secondary-background-label-color);
text-shadow:
0 0 20px rgba(66, 162, 241, 1),
0 0 15px rgba(66, 162, 241, 0.8),
0 0 8px rgba(66, 162, 241, 0.6),
0 2px 4px rgba(0, 0, 0, 0.9);
font-size: 1.3em;
letter-spacing: 0.08em;
line-height: 1;
position: relative;
box-shadow:
inset 0 0 30px 5px rgba(66, 162, 241, 0.15),
0 4px 12px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(66, 162, 241, 0.4);
border-radius: 2px;
padding: 0.5em 0.8em;
}

.npc-infobox .druid-title::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.6) 20%,
rgba(66, 162, 241, 1) 50%,
rgba(66, 162, 241, 0.6) 80%,
transparent);
box-shadow: 0 0 10px rgba(66, 162, 241, 0.8);
}

.npc-infobox .druid-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.4) 30%,
rgba(66, 162, 241, 0.8) 50%,
rgba(66, 162, 241, 0.4) 70%,
transparent);
box-shadow: 0 0 8px rgba(66, 162, 241, 0.6);
}

.npc-infobox .druid-section {
background:
linear-gradient(90deg,
color-mix(in srgb, var(--druid-secondary-background-color) 80%, transparent) 0%,
color-mix(in srgb, var(--druid-secondary-background-color) 60%, transparent) 100%),
linear-gradient(135deg, rgba(66, 162, 241, 0.1), transparent 50%);
color:var(--druid-secondary-background-label-color);
text-shadow:
0 0 15px rgba(66, 162, 241, 0.8),
0 0 8px rgba(66, 162, 241, 0.5),
0 2px 4px rgba(0, 0, 0, 0.8);
position: relative;
box-shadow:
inset 0 0 20px 3px rgba(66, 162, 241, 0.1),
0 2px 8px rgba(0, 0, 0, 0.5);
}

.npc-infobox .druid-section::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.6) 50%, transparent);
box-shadow: 0 0 6px rgba(66, 162, 241, 0.4);
}

.druid-infobox .druid-section {
font-size: 1.25em;
font-weight: 500;
}

.druid-label {
font-weight:bold;
text-align: right;
box-sizing: border-box;
}

.druid-row > .druid-label {
width: 40%;
flex-shrink: 0;
}

.druid-row > .druid-label,
.druid-row > .druid-data {
padding-inline: 0.3em;
}

.druid-main-image,
.druid-main-images {
padding:5px;
}

.druid-main-image img,
.druid-main-images img {
max-width:100%;
height:auto;
}

.druid-main-images-labels {
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content: space-evenly;
margin:0.25em;
gap:0.25em;
}

.druid-main-images-label {
cursor:pointer;
flex:1 1 auto;
text-align:center;
transition:.1s ease-in;
outline:1px solid var(--druid-link-color);
}

.druid-main-images-label.focused {
background:var(--druid-link-color);
color:var(--druid-link-label-color);
}

.druid-main-images-label:not(.focused):hover {
background:rgba(var(--druid-link-color--rgb), 0.25);
}

.druid-toggleable-data:not(.focused),
.druid-main-images-file:not(.focused),
.druid-toggleable-heading:not(.focused) {
display:none;
}

.druid-row:not(:has(.druid-grid)):has(.druid-toggleable-data-empty.focused) {
display:none;
}

.druid-section:has(.druid-toggleable-heading-empty.focused) {
display:none;
}

.druid-grid {
display:grid;
gap: 0.3em;
padding: 0.35em;
}

.druid-grid-item {
background:var(--druid-tertiary-background-color);
padding:0.25em;
border:1px solid rgba(var(--druid-border-color--rgb), 0.5);
border-radius: 2px;
}

.druid-grid-item > .druid-label,
.druid-grid-item > .druid-data {
text-align: center;
}

.druid-section-container > .druid-collapsible {
display: flex;
justify-content: space-between;
align-items: center;
}

.druid-collapsed {
display:none!important;
}

.druid-collapsible {
cursor:pointer;
position:relative;
}

.druid-collapsible::after {
content:'\2013';
display:block;
position:absolute;
right:10px;
font-size:20px;
font-weight:bold;
color:var(--druid-secondary-background-label-color);
}

.druid-collapsible-collapsed::after {
content:'+';
}

.druid-section-container:has(.druid-toggleable-data-empty.focused):not(:has(.druid-toggleable-data-nonempty.focused)):not(:has(.druid-data-nonempty)) {
display: none;
}

body .has-worn-variant .image-base {
display: block !important;
}

body .has-worn-variant .image-worn {
display: none !important;
}

body .has-worn-variant.is-worn-active .image-base {
display: none !important;
}

body .has-worn-variant.is-worn-active .image-worn {
display: block !important;
}

.image-base img, .image-worn img {
display: block !important;
margin: 0 auto !important;
max-width: 100%;
height: auto;
}

.worn-toggle-button {
display: inline-block !important;
margin-top: 10px;
padding: 5px 15px;
background: #333 !important;
color: #fff !important;
border: 1px solid #666 !important;
border-radius: 4px;
cursor: pointer;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}
.is-worn-active .worn-toggle-button {
background: #833 !important;
}

/*****************************************
Div support
*****************************************/

div.druid-row {
display:flex;
margin-block: 1px;
}

div.druid-row + div.druid-row {
margin-top: 0;
}

.npc-infobox div.druid-row {
background: linear-gradient(90deg, rgba(66, 162, 241, 0.02), transparent 60%);
}

.npc-infobox div.druid-row > .druid-label {
background:
linear-gradient(90deg,
color-mix(in srgb, var(--druid-tertiary-background-color) 80%, #42a2f1) 0%,
var(--druid-tertiary-background-color) 100%);
text-shadow: 0 0 8px rgba(66, 162, 241, 0.4);
border-right: 1px solid rgba(66, 162, 241, 0.2);
}

.npc-infobox div.druid-row > .druid-data {
text-shadow: 0 0 6px rgba(66, 162, 241, 0.3);
}

.druid-infobox #toc {
display:none;
}

/***********************
* End DRUID infoboxes *
************************/

/*** Miscellaneous ***/
.responsive-image {
max-width:100%;
height:auto;
}

.view-dark .invert-on-dark,
.view-light .invert-on-light {
filter:invert(100%);
}

@media screen and (min-width:720px) {
.mobileonly {
display:none;
}
}
@media screen and (max-width:720px) {
.nomobile {
display:none;
}
}

/**************************
* Start Modular Templates *
**************************/

/********* [[Template:Ambox]] *********/
.ambox {
border: 1px solid var(--content-border-color);
border-left: 10px solid var(--ambox-color);
border-radius: 2px;
display: flex;
align-items: center;
gap: .6em;
margin: 1em 0;
padding: 3px .6em;
background-color: var(--background-color-neutral-subtle);
box-shadow: 2px 2px 5px 0px #0002;
}

@media (min-width: 720px) {
.ambox {
margin-inline: 10%;
}
}

.ambox.tiny {
padding: .04rem .5em;
margin-inline: 0;
width: fit-content;
}

.ambox + .ambox {
margin-top: -.6em;
}

.ambox-content p {
margin: .15em 0;
}

.ambox-title {
font-weight: bold;
}

/********* [[Template:Hatnote]] *********/
.hatnote {
padding: 1px 0 1px 1.6em;
margin-bottom: 0.5em;
font-style: italic;
border-top: 1px solid var(--border-color-subtle);
border-bottom: 1px solid var(--border-color-subtle);
}

.hatnote.icon {
padding-left: 0;
}

/********* [[Template:Spoiler]] *********/
.spoiler-content {
background-color: rgb(127, 127, 127);
transition: all 0.3s;
cursor: pointer;
}

.spoiler-content > span {
opacity: 0;
transition: all 0.3s;
}

.spoiler-content > * {
pointer-events:none;
}

.spoiler-content.show > * {
pointer-events:unset;
}

.spoiler-content.show {
background-color: rgba(127, 127, 127, 0);
}

.spoiler-content.show > span {
opacity: 1;
}

/********* [[Template:Link icon]] *********/
.link-icon {
display: inline-flex;
align-items: center;
height: var(--link-icon-line-height);
vertical-align: bottom;
}

.link-icon .regular {
align-self: center;
}

.link-icon .regular a {
display: flex;
}

.link-icon .regular img {
height: var(--link-icon-size);
max-width: var(--link-icon-size);
}

.link-icon .fallback {
outline: 1px solid var(--color-base);
border-radius: 50%;
text-align: center;
width: var(--link-icon-size);
line-height: var(--link-icon-size);
}

.link-icon.notext .fallback {
display: inline-block;
}

.link-icon.notext {
display: inline;
}

/********* [[Template:Quote]] *********/
.quote {
background: var(--background-color-neutral-subtle);
border-radius: 5px;
border: 2px solid var(--content-border-color);
margin: .5em 0;
padding: .5em;
}

.quote .block {
display: block;
}

.quote .title {
font-size: large;
font-weight: bold;
}

.quote .content {
font-style: italic;
}

.quote .author {
font-weight: bold;
text-align: end;
}

.quote .marks-wrapper {
display: flex;
gap: 5px;
}

.quote .marks-wrapper::before,
.quote .marks-wrapper::after {
font-size: 100px;
line-height: 0px;
}

.quote .marks-wrapper::before {
content: "\201C";
margin-top: 40px;
}

.quote .marks-wrapper::after {
content: "\201D";
align-self: end;
margin-bottom: -10px;
}

/************************
* End Modular Templates *
*************************/

.button-expand-header {
margin-top: 0.5em;
width: 100%;
padding: 14px 18px;
padding-right: 60px;
background: var(--background-color-base);
color: var(--color-progressive);
border: 2px solid var(--color-progressive);
cursor: pointer;
font-family: 'Courier New', monospace;
font-size: 16px;
font-weight: 700;
position: relative;
transition: all 0.2s ease;
box-shadow: inset 0 0 0 2px #0f0f0f,
inset 0 0 20px #42a2f180;
}

.button-expand-header:hover {
background: var(--background-color-transparent);
box-shadow: inset 0 0 0 2px #0f0f0f,
inset 0 0 30px #4c57b580,
0 0 10px #4c57b5a0;
}

.button-expand-header:active {
border-radius: 20px;
transition: 0.2s;
}

.button-expand-header::before {
content: '[ + ]';
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
}

.button-expand-header:has(+ .mw-collapsible:not(.mw-collapsed))::before {
content: '[ - ]';
}

.button-expand-header > span:not([typeof]) {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.2s;
}

@media screen and (max-width:720px) {
h2.mw-customtoggle > span:not([typeof])::after {
display: none;
}
}

a.tabber__tab {
margin-top: 0.7em;
font-size: 2em;
margin-left: 0.6em;
margin-bottom: 0.7em;
}

header.tabber__header {
margin-bottom: 0.5em;
margin-top: 0.5em;
}

a.tabber__tab[aria-selected="true"]{
background: var(--background-color-transparent);
color: var(--color-progressive);
border: 2px solid var(--color-progressive);
box-shadow: inset 0 0 0 2px #0f0f0f,
inset 0 0 20px #42a2f180;
}

@media (hover: hover) {
.tabber__tab:hover {
box-shadow: inset 0 0 0 2px #0f0f0f,
inset 0 0 30px #4c57b580,
0 0 10px #4c57b5a0;
background-color: var(--background-color-base);
}
}

.tabber__panel > div.mw-heading.mw-heading2 > h2 {
border-bottom: 1px solid var(--color-progressive) !important;
padding-bottom: 0.5em;
text-shadow: 0 0 20px black;
}

.tabber__panel > div > h2 > span {
text-shadow: 0 0 10px black;
color: var(--content-link-color);
margin-left: 0.1em;
padding: 0 0.5em 0;
}

header.tabber__header {
box-shadow: none;
}

.tabber__header__prev,
.tabber__header__next {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.15) 0%, rgba(76, 87, 181, 0.12) 100%),
rgba(26, 26, 34, 0.8);
border: 1px solid rgba(66, 162, 241, 0.5);
color: var(--color-base);
padding: 0.6em 1em;
cursor: pointer;
transition: all 0.3s ease;
box-shadow:
inset 0 0 20px 3px rgba(66, 162, 241, 0.1),
0 2px 10px rgba(66, 162, 241, 0.2);
border-radius: 4px;
position: relative;
backdrop-filter: blur(3px);
}

.tabber__header__prev::before,
.tabber__header__next::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.6) 30%,
rgba(66, 162, 241, 0.9) 50%,
rgba(66, 162, 241, 0.6) 70%,
transparent);
box-shadow: 0 0 8px rgba(66, 162, 241, 0.6);
}

.tabber__header__prev:hover,
.tabber__header__next:hover {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.25) 0%, rgba(76, 87, 181, 0.2) 100%),
rgba(26, 26, 34, 0.9);
border-color: rgba(66, 162, 241, 0.7);
box-shadow:
inset 0 0 30px 5px rgba(66, 162, 241, 0.15),
0 4px 15px rgba(66, 162, 241, 0.3),
0 0 25px rgba(66, 162, 241, 0.2);
transform: scale(1.05);
text-shadow:
0 0 10px rgba(66, 162, 241, 0.8),
0 0 5px rgba(66, 162, 241, 0.5);
}

.tabber__header .tabber__header__prev::after, .tabber__header .tabber__header__next::after {
display: block;
width: inherit;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: 1em;
filter: drop-shadow(0 0 4px rgba(66, 162, 241, 0.6));
}
@media screen and (max-width: 720px) {
.button-expand-header {
background-color: #8dbec280;
box-shadow: 0 0 40px var(--color-progressive);
}
.button-expand-header > span:after {
position: relative;
font-size: 1em;
opacity: 1;
left: 0;
bottom: 0;
text-align: inherit;
}
}

.button-expand-header > img {
padding: 0 1em 0;
}

.button-expand-header:hover > span:after{
opacity: 1;
font-size: 0.75em;
}

.class-box {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.06) 0%, transparent 50%, rgba(76, 87, 181, 0.06) 100%),
linear-gradient(to bottom, rgba(26, 26, 34, 0.95), rgba(26, 26, 34, 0.98));
box-shadow:
0 0 30px 5px rgba(0, 0, 0, 0.8),
inset 0 0 40px 5px rgba(66, 162, 241, 0.08),
0 0 0 1px rgba(66, 162, 241, 0.25);
padding: 0 0.5em 0;
border-radius: 6px;
position: relative;
overflow: hidden;
}

.class-box::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.4) 30%,
rgba(66, 162, 241, 0.6) 50%,
rgba(66, 162, 241, 0.4) 70%,
transparent);
}

/* ===============================
MP elements
=============================== */

.main-page-links {
font-weight: bold;
text-shadow: 0 0 6px #000000;
margin: 1em;
}

.mp-box pre {
font-family: var(--body-font-family);
color: var(--color-progressive);
border-radius:5px;
border-image-source: var(--border-image-base);
border-image-slice: 6;
border-image-width: 6px;
border-image-repeat: repeat repeat;
text-align: center;
}

/* ===============================
DRUID Boss Infoboxes
=============================== */
/* UNHOLY */
.druid-data-Unholy a, .druid-data-Unholy a:visited {
color: black;
text-shadow:
0 0 5px white, 0 0 10px white, 0 0 15px white;
}
/* VOIDBOUND */
.druid-data-Voidbound a, .druid-data-Voidbound a:visited {
color: #e48cff;
text-shadow: 0 0 4px #e48cff, 0 0 8px #b94dff, 0 0 12px #7a1d9a;
}
/* BLOODSHOT */
.druid-data-Bloodshot a, .druid-data-Bloodshot a:visited {
color: #d23c3c;
text-shadow: 0 0 4px #d23c3c, 0 0 8px #8b0000, 0 0 12px #ff4d4d;
}
/* ROYAL */
.druid-data-Royal a, .druid-data-Royal a:visited {
color: #a86dff;
text-shadow: 0 0 4px #a86dff, 0 0 8px #6a00ff, 0 0 12px #330066;
}
/* GILDED */
.druid-data-Gilded a, .druid-data-Gilded a:visited {
color: #ffb84d;
text-shadow: 0 0 4px #ffb84d, 0 0 8px #ff8000, 0 0 12px #cc6600;
}
/* IRRADIATED */
.druid-data-Irradiated a, .druid-data-Irradiated a:visited {
color: #4dff4d;
text-shadow: 0 0 4px #4dff4d, 0 0 8px #00cc00, 0 0 12px #006600;
}
/* COMPANION */
.druid-data-Companion a, .druid-data-Companion a:visited {
color: #ffd700;
text-shadow: 0 0 4px #ffd700, 0 0 8px #ffaa00, 0 0 12px #cc8400;
}
/* RUNES */
.druid-data-Rune a, .druid-data-Rune a:visited {
color: #bfbfbf;
text-shadow: 0 0 4px #bfbfbf, 0 0 8px #666, 0 0 12px #333;
}

.druid-row[data-druid-section-row="Loot"] div {
padding-top: 0.75em;
padding-bottom: 0.5em;
flex-wrap: nowrap;
flex-direction: row;
display: block;
justify-content: space-between;
align-items: center;
text-align: left;
width: 100%;
}

div[data-druid-section="Loot"] + div[data-druid-section-row="Loot"] div {
border-top: none;
}

.druid-data .image {
margin-left: 0%;
}

.loot-category-header {
display: flex;
align-items: center;
gap: 0.5em;
padding: 0.5em 0.75em;
margin: 0.75em 0 0.3em 0;
background:
linear-gradient(90deg, rgba(66, 162, 241, 0.12) 0%, transparent 100%),
rgba(26, 26, 34, 0.4);
border-left: 2px solid rgba(66, 162, 241, 0.5);
border-radius: 3px;
box-shadow:
inset 0 0 15px 2px rgba(66, 162, 241, 0.05),
0 1px 4px rgba(0, 0, 0, 0.4);
}

.loot-category-title {
font-weight: 600;
font-size: 0.95em;
color: var(--color-base);
text-shadow:
0 0 6px rgba(66, 162, 241, 0.4),
0 1px 2px rgba(0, 0, 0, 0.8);
letter-spacing: 0.02em;
}

.loot-item-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.3em 0.75em;
margin: 0.15em 0;
background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.02) 50%, transparent);
border-radius: 2px;
transition: all 0.2s ease;
}

.loot-item-row:hover {
background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.06) 50%, transparent);
padding-left: 1em;
}

.boss-percent {
color: var(--content-border-color);
text-shadow:
0 0 8px rgba(66, 162, 241, 0.5),
0 0 4px rgba(66, 162, 241, 0.3),
0 2px 4px rgba(0, 0, 0, 0.8);
font-weight: bold;
font-size: 1.05em;
}

.loot-data-infobox {
display: flex;
align-items: center;
gap: 0.5em;
}

.item-infobox div[data-druid-section] > .druid-section {
font-weight: bolder;
text-shadow: 0px 2px black;
}

.druid-infobox .druid-title {
display: flex;
align-items: center;
justify-content: center;
color: var(--content-border-color);
font-family: "Daedalus", sans-serif;
line-height: 1em;
font-weight: 1000;
font-size: 3em;
min-height: 2.2em;
flex-wrap: wrap;
text-shadow: 0 0 20px black;
}

.boss-infobox-subtitle {
font-weight: 500;
font-size: 0.75em;
display: inline-block;
white-space: normal;
word-break: break-word;
width: 100%;
position: relative;
color: rgba(255, 255, 255, 0.95);
text-shadow:
0 0 10px rgba(66, 162, 241, 0.6),
0 0 5px rgba(66, 162, 241, 0.4),
0 2px 4px rgba(0, 0, 0, 0.8);
animation: subtitle-pulse 4s ease-in-out infinite;
background: linear-gradient(90deg,
rgba(66, 162, 241, 0.05) 0%,
rgba(66, 162, 241, 0.08) 50%,
rgba(66, 162, 241, 0.05) 100%);
background-size: 200% 100%;
animation: subtitle-scan 6s linear infinite, subtitle-pulse 4s ease-in-out infinite;
padding: 0.3em 0.5em;
border-radius: 2px;
letter-spacing: 0.03em;
}

.boss-infobox-subtitle::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 60%;
background: linear-gradient(180deg,
transparent,
rgba(66, 162, 241, 0.8) 50%,
transparent);
box-shadow: 0 0 6px rgba(66, 162, 241, 0.8);
animation: subtitle-indicator 2s ease-in-out infinite;
}

@keyframes subtitle-pulse {
0%, 100% {
text-shadow:
0 0 10px rgba(66, 162, 241, 0.6),
0 0 5px rgba(66, 162, 241, 0.4),
0 2px 4px rgba(0, 0, 0, 0.8);
}
50% {
text-shadow:
0 0 15px rgba(66, 162, 241, 0.9),
0 0 8px rgba(66, 162, 241, 0.6),
0 0 4px rgba(255, 255, 255, 0.4),
0 2px 4px rgba(0, 0, 0, 0.8);
}
}

@keyframes subtitle-scan {
0% {
background-position: 0% 0%;
}
100% {
background-position: 200% 0%;
}
}

@keyframes subtitle-indicator {
0%, 100% {
opacity: 0.4;
box-shadow: 0 0 6px rgba(66, 162, 241, 0.6);
}
50% {
opacity: 1;
box-shadow: 0 0 10px rgba(66, 162, 241, 1);
}
}
/* ===============================
Dungeon Page CSS
=============================== */

.dungeon-page-box {
background-color: transparent;
box-shadow: none;
transition: 0.5s;
padding: 1em;
position: relative;
padding: 0 1em;
border-radius: 0px;
}

.dungeon-page-smaller-box li {
display: inline-block;
width: 18%;
margin: 0 1% 1% 0;
vertical-align: top;
text-align: center;
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 60%),
linear-gradient(to bottom, rgba(26, 26, 34, 0.9), rgba(26, 26, 34, 0.95));
border-radius: 4px;
border: 1px solid rgba(66, 162, 241, 0.2);
box-shadow:
inset 0 0 20px 3px rgba(66, 162, 241, 0.05),
0 2px 10px rgba(0, 0, 0, 0.5);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.dungeon-page-smaller-box li::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.4), transparent);
}

.dungeon-page-smaller-box a {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0.5em;
}

.dungeon-page-smaller-box li:hover,
.mp-links.dungeon-page-smaller-box > ul > li:hover {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.15) 0%, transparent 60%),
linear-gradient(to bottom, rgba(26, 26, 34, 0.95), rgba(26, 26, 34, 1));
border-color: rgba(66, 162, 241, 0.4);
box-shadow:
inset 0 0 25px 5px rgba(66, 162, 241, 0.1),
0 4px 15px rgba(66, 162, 241, 0.3),
0 0 20px rgba(66, 162, 241, 0.2);
transform: translateY(-2px);
}

.pre-dungeon {
max-width: 100%;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
display: block;
}

.dungeon-enemies {
display: flex;
flex-wrap: wrap;
max-width: 100%;
justify-content: center;
}

.dungeon-enemies .druid-container {
margin: 2%;
}

.tipstricks {
display: flex;
max-width: 100%;
}

.pre-dungeon p {
margin: 1em 0;
padding: 0.9em 1.2em 0.9em 1.5em;
border-radius: 3px 12px 8px 3px;
box-shadow:
-2px 0 0 0 rgba(66, 162, 241, 0.4),
0 4px 15px rgba(0, 0, 0, 0.6),
inset 0 0 20px rgba(66, 162, 241, 0.03);
display: block;
width: auto;
background:
linear-gradient(90deg,
rgba(66, 162, 241, 0.06) 0%,
rgba(26, 26, 34, 0.8) 15%,
rgba(26, 26, 34, 0.6) 85%,
transparent 100%);
border-left: 2px solid rgba(66, 162, 241, 0.5);
color: var(--color-base);
line-height: 1.6;
position: relative;
backdrop-filter: blur(2px);
}

.pre-dungeon p::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg,
rgba(66, 162, 241, 0.8) 0%,
rgba(66, 162, 241, 0.3) 50%,
rgba(66, 162, 241, 0.8) 100%);
opacity: 0.6;
}

.dlog {
margin-bottom: 2%;
background:
linear-gradient(to right, rgba(31, 35, 77, 0.95) 0%, rgba(31, 35, 77, 0.9) 70%, rgba(31, 35, 77, 0) 100%),
linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 50%);
padding: 0.75em;
border: 3px solid;
border-image: linear-gradient(to right,
rgba(66, 162, 241, 0.8) 0%,
rgba(71, 75, 117, 1) 30%,
rgba(71, 75, 117, 0.8) 70%,
rgba(71, 75, 117, 0) 100%) 1 stretch;
border-right: none;
border-top: none;
border-bottom: none;
min-width: 20%;
max-width: 70%;
width: fit-content;
text-wrap: balance;
font-size: 2em;
position: relative;
box-shadow:
-3px 0 15px rgba(66, 162, 241, 0.3),
inset 2px 0 20px rgba(66, 162, 241, 0.1),
0 4px 12px rgba(0, 0, 0, 0.5);
border-radius: 0 4px 4px 0;
backdrop-filter: blur(3px);
}

.dlog::before {
content: url("/wiki/Special:Redirect/file/DNexus.png") " " url("/wiki/Special:Redirect/file/Dlog-text.png");
display: inline-block;
background:
linear-gradient(to right,
rgba(66, 162, 241, 0.25) 0%,
rgba(66, 162, 241, 0.15) 50%,
transparent 100%),
linear-gradient(135deg, rgba(76, 87, 181, 0.2), transparent 60%);
padding: 0.5em 0.8em;
border-radius: 3px 0 0 3px;
margin-right: 12px;
box-shadow:
inset -2px 0 10px rgba(66, 162, 241, 0.3),
2px 0 8px rgba(66, 162, 241, 0.2);
border-right: 1px solid rgba(66, 162, 241, 0.4);
position: relative;
}

.dlog::after {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(180deg,
rgba(66, 162, 241, 0.8) 0%,
rgba(66, 162, 241, 1) 50%,
rgba(66, 162, 241, 0.8) 100%);
box-shadow:
0 0 8px rgba(66, 162, 241, 0.8),
0 0 15px rgba(66, 162, 241, 0.5);
animation: dlog-pulse 3s ease-in-out infinite;
}

@keyframes dlog-pulse {
0%, 100% {
opacity: 0.7;
box-shadow:
0 0 8px rgba(66, 162, 241, 0.8),
0 0 15px rgba(66, 162, 241, 0.5);
}
50% {
opacity: 1;
box-shadow:
0 0 12px rgba(66, 162, 241, 1),
0 0 20px rgba(66, 162, 241, 0.7);
}
}

.dlog p {
position: relative;
color: #f1f1f1;
font-family: "Daedalus", Sans-Serif;
font-size: 1em;
line-height: 1.3;
text-shadow:
0 0 8px rgba(66, 162, 241, 0.8),
0 0 4px rgba(66, 162, 241, 0.6),
0 2px 4px rgba(0, 0, 0, 0.9);
word-wrap: break-word;
padding: 0.8em;
padding-top: 0.5em;
background: linear-gradient(90deg, rgba(66, 162, 241, 0.03), transparent 80%);
border-radius: 2px;
}

@media only screen and (max-width: 768px) {
.daedalus-log {
display: none;
}
}

/* ===============================
Skill Tree
=============================== */
/**
* ==============================
* Tooltips Gadget (Base Styles)
* ==============================
*/
.main-tooltip {
border-radius:5px;
border-image-source: url("/wiki/Special:Redirect/file/Wiki-border-kurva.png");
border-image-slice: 6;
border-image-width: 6px;
border-image-repeat: repeat repeat;
box-shadow: 0 0 10px black;
margin-bottom: 5px;
padding: 1em 1em;
background-color: #312b38;
}

#tooltip-wrapper {
padding: 0.3em;
}

.has-redlinks,
.tooltip-loading,
.advanced-tooltip .tooltip-contents {
display: none;
}

.tooltips-init-complete {
cursor: help;
}

.main-tooltip img {
vertical-align: middle;
}

.advanced-tooltip img {
box-shadow: 0 0 10px #000000;
}

.advanced-tooltip .imhoveringit {
position: relative;
display: inline-block;
}

.advanced-tooltip .tooltip-base-image,
.advanced-tooltip .tooltip-hover-image {
transition: opacity 0.2s ease;
}

.advanced-tooltip .tooltip-hover-image {
position: absolute;
top: 0;
left: 0;
opacity: 0;
pointer-events: none;
}

.advanced-tooltip .tooltip-base-image {
opacity: 1;
}

.advanced-tooltip:hover .tooltip-base-image {
opacity: 0;
}

.advanced-tooltip:hover .tooltip-hover-image {
opacity: 1;
pointer-events: auto;
}

.tabber__panel {
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}

.tabber__panel::-webkit-scrollbar {
display: none;
}
/**
* ==============================
* Skill Tree Layout
* ==============================
*/
.skill-tree {
display: flex;
flex-direction: column;
align-items: center;
row-gap: 15px; /* vertical spacing between rows */
}

/* Rows */
.skill-tree .row {
display: flex;
justify-content: center;
}
.skill-tree .row-1 { gap: 0; }
.skill-tree .row-2 { gap: 40px; }
.skill-tree .row-3 { gap: 20px; }
.skill-tree .wide-gap { gap: 80px; } /* For Trap tree rows */

/* Nodes */
.node {
display: inline-block;
width: 80px; /* keeps nodes aligned */
text-align: center;
}

/* Node Title Style */
.skill-title {
font-weight: bold;
color: #fca801;
text-shadow: 2px 2px 8px black;
border-bottom: 1px solid #fca801;
padding-bottom: 0.5em;
}
.main-tooltip p {
color: #54fc55;
}
.main-tooltip span {
color: #54fcfc;
text-shadow: 0 0 2px #54fcfc;
}

/* item pages */

.display-items {
display: flex;
flex-wrap: wrap;
}

a.tabber__tab {
font-size: 2em;
text-shadow: 1px 1px 12px black;
}
.druid-main-images-label {
font-size: 1.2em;
}
.druid-main-images-label.focused {
box-shadow: 0 0 20px var(--druid-link-color);
}

.hoverbox:hover {
background-color: #1a1a22E0;
box-shadow: 0 0 30px 30px var(--background-color-base);
border-radius: 0 0 15px 15px;
border-top: 0.1em solid var(--color-progressive--hover);
transition: 0.4s;
}

.hoverbox {
background-color: transparent;
box-shadow: none;
transition: 0.5s;
padding: 0 1em 1em;
margin: 1em 0 1em -0.5em;
position: relative;
z-index: 0;
border-top: 0.1em solid var(--color-progressive);
display: flow-root;
}

.hoverbox > div > h3 > a {
border-bottom: 2px solid currentColor;
background: no-repeat cover;
}

.hoverbox > div {
overflow: visible;
}

.dungeon-clear {
max-width: 100%;
overflow: visible;
}

.lore {
max-width: 100%;
overflow: visible;
}

.mp-main {
background-size: 100% 100%;
background-repeat: no-repeat;
aspect-ratio: 16 / 9;
padding-top: 1em;
padding-bottom: 1em;
}

.class-rarities {
display:flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
}

.class-rarities > div {
margin: 1em 0 1em;
padding: 1em 1.5em;
border-radius: 8px;
position: relative;
background:
linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, transparent 50%),
linear-gradient(to right, transparent, rgba(255, 255, 255, 0.03), transparent);
backdrop-filter: blur(2px);
border: 1px solid rgba(255, 255, 255, 0.1);
}

.class-rarities > div::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 2px;
background: linear-gradient(90deg, transparent, currentColor 50%, transparent);
opacity: 0.3;
filter: blur(1px);
}

.class-rarities > div > p > img {
margin: 0 2em 0 0;
border-radius: 100px;
background: #1a1a2280;
box-shadow: 0 0 10px black;
}

.class-rarities > div > p > span > img {
text-shadow: 0 0 10px black;
}

.class-rarities > div > p > a {
text-shadow: 0 0 10px black;
}

.class-irradiated {
box-shadow: 0 0 20px #4dff4d;
background-color: #4dff4d80;
}

.class-gilded {
box-shadow: 0 0 20px #ffb84d;
background-color: #ffb84d80;
}

.class-royal{
box-shadow: 0 0 20px #a86dff;
background-color: #a86dff80;
}

.class-bloodshot {
box-shadow: 0 0 20px #d23c3c;
background-color: #d23c3c80;
}

.class-voidbound{
box-shadow: 0 0 20px #e48cff;
background-color: #e48cff80;
}

.class-unholy {
box-shadow: 0 0 20px black;
background-color: #00000080;
}

div.class-rarities > div > p > a {
font-weight: bold;
}
/* TABLES */

.wikitable td,
.wikitable th {
border: none !important;
}

.wikitable {
margin: 0;
}

td > div.mw-collapsible > button {
margin: 1.5em;
padding: 1.2em;
background-color: #8dbec280;
box-shadow: 0 0 20px #8dbec2FF;
border-radius: 30px;
}

.wikitable td,
.wikitable th {
font-size: 1.1em;
}

td > div.mw-collapsible > button > span.mw-collapsible-text {
text-shadow: 0 0 4px black;
}

td > div.mw-collapsible > button > span.mw-collapsible-text:hover {
text-decoration: none;
}

td > div.mw-collapsible > button.mw-collapsible-toggle-default::after {
content: '';
}

td > div.mw-collapsible > button.mw-collapsible-toggle-default::before {
content: '';
}

/* Inline Image Template */

.inline-image-image {
position: relative;
display: inline-block;
}

.inline-image-image > p > span > span > img {
box-shadow:
0 0 30px 5px rgba(66, 162, 241, 0.3),
0 4px 20px rgba(0, 0, 0, 0.8),
inset 0 0 40px 5px rgba(66, 162, 241, 0.05);
border-radius: 8px;
border: 2px solid rgba(66, 162, 241, 0.5);
background: linear-gradient(135deg, rgba(66, 162, 241, 0.02), transparent 50%);
padding: 4px;
transition: all 0.3s ease;
}

.inline-image-image > p > span > span > img:hover {
box-shadow:
0 0 40px 8px rgba(66, 162, 241, 0.5),
0 6px 25px rgba(0, 0, 0, 0.9),
inset 0 0 50px 8px rgba(66, 162, 241, 0.08);
border-color: rgba(66, 162, 241, 0.7);
transform: translateY(-2px);
}

.inline-image-caption {
margin-top: 0.5em;
position: relative;
}

.inline-image-caption > p {
background:
linear-gradient(90deg,
rgba(66, 162, 241, 0.12) 0%,
rgba(26, 26, 34, 0.8) 15%,
rgba(26, 26, 34, 0.6) 85%,
transparent 100%);
border-left: 3px solid rgba(66, 162, 241, 0.6);
border-radius: 3px;
padding: 0.6em 1em;
margin: 0;
box-shadow:
inset 0 0 20px 2px rgba(66, 162, 241, 0.05),
0 2px 8px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(2px);
}

.inline-image-caption > p > span {
font-weight: 600;
font-size: 0.95em;
color: var(--color-base);
text-shadow:
0 0 8px rgba(66, 162, 241, 0.6),
0 2px 4px rgba(0, 0, 0, 0.8);
letter-spacing: 0.02em;
}

.inline-image-caption > p > span::before {
content: '❖ ';
color: rgba(66, 162, 241, 0.8);
text-shadow:
0 0 10px rgba(66, 162, 241, 0.9),
0 0 5px rgba(66, 162, 241, 0.6);
margin-right: 0.3em;
}

.inline-image-caption > p::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg,
rgba(66, 162, 241, 0.8) 0%,
rgba(66, 162, 241, 0.4) 50%,
rgba(66, 162, 241, 0.8) 100%);
opacity: 0.7;
}

/* dynamic gif display css ONLY TOUCH IF YOU KNOW WHAT YOU ARE DOING */
.dynamic-gif-container {
padding-top: 8em;
width: fit-content;
max-width: 100%;
margin-right: 1em;
margin-bottom: 1em;
margin-left: 1em;
z-index: 100;
transition: all 0.3s ease;
display: block !important;
visibility: visible !important;
clear: both;
}

/* Override for flexbox container */
.gif-tabber-display-container .dynamic-gif-container {
padding-top: 0;
margin: 0;
clear: none;
}

.dynamic-gif-container.expanded .gif-display-area {
max-height: none;
height: auto;
opacity: 1;
padding: 15px;
overflow: visible;
}

.gif-display-area {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 40%, rgba(76, 87, 181, 0.08) 100%),
radial-gradient(ellipse at center, rgba(66, 162, 241, 0.12), transparent 60%),
rgba(26, 26, 34, 0.95);
border-radius: 6px;
overflow: visible;
height: auto;
min-height: auto;
opacity: 1;
padding: 12px;
transition: all 0.3s ease;
box-shadow:
0 0 30px 5px rgba(66, 162, 241, 0.2),
inset 0 0 40px 8px rgba(66, 162, 241, 0.05),
0 4px 20px rgba(0, 0, 0, 0.6);
border: 1px solid rgba(66, 162, 241, 0.4);
display: block !important;
visibility: visible !important;
position: relative;
backdrop-filter: blur(4px);
width: fit-content;
}

.gif-display-area::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.6) 20%,
rgba(66, 162, 241, 0.9) 50%,
rgba(66, 162, 241, 0.6) 80%,
transparent);
box-shadow: 0 0 10px rgba(66, 162, 241, 0.8);
}

.gif-header {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid var(--color-progressive);
}

.gif-title {
font-size: 2em;
font-weight: bold;
font-family: var(--heading-font-family);
color: var(--color-progressive);
margin: 0;
}

.gif-toggle-btn {
background: none;
border: 1px solid #4a4a4a;
color: #e0e0e0;
padding: 4px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 1em;
transition: all 0.2s ease;
}

.gif-toggle-btn:hover {
background: #2a2a2a;
border-color: #5a5a5a;
}

.gif-image-container {
width: 100%;
height: 400px;
min-height: 400px;
max-height: 400px;
display: flex;
align-items: center;
justify-content: center;
background: var(--background-color-base);
border-radius: 4px;
position: relative;
margin-bottom: 10px;
overflow: hidden;
}

.gif-image-container img {
max-width: 100%;
max-height: 100%;
height: auto;
width: auto;
display: block;
border-radius: 4px;
object-fit: contain;
}

.gif-image-container.loading::after {
content: '';
position: absolute;
width: 40px;
height: 40px;
border: 4px solid var(--color-progressive--hover);
border-top-color: #e0e0e0;
border-radius: 50%;
animation: spin 1s linear infinite;
}

@keyframes spin {
to { transform: rotate(360deg); }
}

.gif-error {
color: var(--color-destructive);
font-size: 1em;
text-align: center;
padding: 20px;
}

.gif-caption {
text-align: center;
color: var(--color-base);
font-size: 1em;
font-style: italic;
padding: 5px;
background: var(--color-progressive--hover);
border-radius: 4px;
text-shadow: 0 0 5px var(--content-border-color);
display: none;
}

.gif-placeholder {
color: var(--color-progressive--hover);
font-size: 1em;
text-align: center;
padding: 60px 20px;
height: 500px;
}

@media (max-width: 768px) {
.dynamic-gif-container {
position: relative;
float: none;
width: 100%;
margin: 0 0 20px 0;
}

.dynamic-gif-container.expanded .gif-display-area {
max-height: none;
}
}

.skill-tree-section::after {
content: "";
display: table;
clear: both;
}

.tabber .tabbertab {
clear: both;
overflow: auto;
}

.gif-tabber-display-container {
display: flex;
flex-direction: row;
gap: 1.5em;
align-items: flex-start;
}

.gif-tabber-display-container > div:first-child {
flex: 1 1 auto;
min-width: 0;
}

.gif-tabber-display-container > .dynamic-gif-container {
flex: 0 0 auto;
position: sticky;
top: 1em;
align-self: flex-start;
padding-top: 0;
margin: 0;
min-width: 500px;
max-width: 600px;
}

@media screen and (max-width: 1200px) {
.gif-tabber-display-container {
flex-direction: column;
width: 100%;
max-width: 100%;
overflow: hidden;
}

.gif-tabber-display-container > .dynamic-gif-container {
position: static;
width: 100%;
max-width: 100%;
min-width: 0;
order: 2; /* Move gif display below tabber */
margin-top: 1em;
}

.gif-tabber-display-container > div:first-child {
order: 1; /* Keep tabber on top */
width: 100%;
max-width: 100%;
min-width: 0;
overflow-x: auto;
}

/* Ensure tabber content doesn't overflow */
.gif-tabber-display-container #List\ of\ Skill\ Trees,
.gif-tabber-display-container .tabber,
.gif-tabber-display-container .tabbertab {
max-width: 100%;
overflow-x: auto;
box-sizing: border-box;
}

/* Hide gif display by default on mobile, show when expanded */
.gif-tabber-display-container > .dynamic-gif-container:not(.expanded) {
display: none;
}

/* When expanded on mobile, make it compact */
.gif-tabber-display-container > .dynamic-gif-container.expanded {
display: block;
}

.gif-tabber-display-container > .dynamic-gif-container .gif-display-area {
max-width: 100%;
}
}

.decor-page {
border-image: url(/wiki/Special:Redirect/file/Wiki-border-book.png);
border-image-slice: 65 122 65 122;
border-image-width: 100% 100% 100% 100%;
border-image-repeat: stretch stretch;
border-image-outset: 0;
border-style: solid;
color: var(--background-color-base);
width: 492px;
height: 262px;
}

.decor-page > p{
padding: 3.5em;
font-family: var(--heading-font-family);
}
.swap-silverling {
position: relative;
display: inline-block;
width: 7em;
text-align: left;
text-shadow: 0 0 10px currentColor;
font-weight: bold;
}
.swap-silverling::before,
.swap-silverling::after {
position: absolute;
left: 0;
bottom: -0.45em;
width: 140%;
text-align: inherit;
animation: fadeSwap 5s infinite ease-in-out;
}
.swap-silverling::before {
content: "Silverlings.";
opacity: 1;
}
.swap-silverling::after {
content: "Players.";
opacity: 0;
animation-delay: 2.5s;
}
@keyframes fadeSwap {
0%, 40% { opacity: 1; }
50%, 90% { opacity: 0; }
100% { opacity: 1; }
}
.main-welcome {
text-shadow: 0 0 2px black;
font-weight: bold;
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 0.5em;
padding: 14px 18px;
padding-right: 60px;
background: var(--background-color-base);
color: var(--color-progressive);
border: 2px solid var(--color-progressive);
font-family: var(--body-font-family);
font-size: 16px;
font-weight: 700;
transition: all 0.2s ease;
box-shadow: inset 0 0 0 2px #0f0f0f,
inset 0 0 20px #42a2f180;
padding: 1em;
}

.welcome-text {
flex: 2;
min-width: 300px;
border-left: 2px solid var(--color-progressive);
padding: 1em;
font-size: 2em;
}

div.main-welcome > .mp-links {
flex: 1;
min-width: 250px;
margin: 1em;
}

div.main-welcome > .mp-links > ul > li {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 50%, rgba(76, 87, 181, 0.08) 100%),
linear-gradient(to bottom, rgba(66, 162, 241, 0.15), rgba(76, 87, 181, 0.2), rgba(66, 162, 241, 0.15));
box-shadow:
inset 0 0 20px 4px rgba(66, 162, 241, 0.12),
0 4px 15px rgba(66, 162, 241, 0.2),
0 0 30px rgba(66, 162, 241, 0.15);
border: 1px solid rgba(66, 162, 241, 0.4);
border-radius: 4px;
padding: 1em 0.8em;
position: relative;
transition: all 0.3s ease;
backdrop-filter: blur(2px);
}

div.main-welcome > .mp-links > ul > li::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.6) 30%,
rgba(66, 162, 241, 0.9) 50%,
rgba(66, 162, 241, 0.6) 70%,
transparent);
box-shadow: 0 0 8px rgba(66, 162, 241, 0.8);
}

div.main-welcome > .mp-links > ul > li::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.4) 30%,
rgba(66, 162, 241, 0.6) 50%,
rgba(66, 162, 241, 0.4) 70%,
transparent);
}

div.main-welcome > .mp-links > ul > li:hover {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.15) 0%, transparent 50%, rgba(76, 87, 181, 0.15) 100%),
linear-gradient(to bottom, rgba(66, 162, 241, 0.25), rgba(76, 87, 181, 0.3), rgba(66, 162, 241, 0.25));
box-shadow:
inset 0 0 30px 6px rgba(66, 162, 241, 0.2),
0 6px 20px rgba(66, 162, 241, 0.3),
0 0 40px rgba(66, 162, 241, 0.25);
border-color: rgba(66, 162, 241, 0.6);
transform: translateY(-2px);
}

div.main-welcome > .mp-links > ul > li > a {
color: var(--color-base);
text-shadow:
0 0 8px rgba(66, 162, 241, 0.6),
0 2px 4px rgba(0, 0, 0, 0.8);
transition: all 0.2s ease;
}

div.main-welcome > .mp-links > ul > li:hover > a {
text-shadow:
0 0 12px rgba(66, 162, 241, 0.9),
0 0 6px rgba(66, 162, 241, 0.6),
0 2px 4px rgba(0, 0, 0, 0.8);
}

.mw-collapsible {
padding-top: 2em;
display: flow-root;
}

.tab-gif-container {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 40%, rgba(76, 87, 181, 0.08) 100%),
radial-gradient(ellipse at top left, rgba(66, 162, 241, 0.12), transparent 60%),
rgba(26, 26, 34, 0.95);
border: 1px solid rgba(66, 162, 241, 0.4);
border-radius: 6px;
padding: 12px;
margin: 1em 0;
box-shadow:
0 0 30px 5px rgba(66, 162, 241, 0.2),
inset 0 0 40px 8px rgba(66, 162, 241, 0.05),
0 4px 20px rgba(0, 0, 0, 0.6);
display: inline-block;
width: fit-content;
max-width: 100%;
position: relative;
backdrop-filter: blur(4px);
}

.tab-gif-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.6) 20%,
rgba(66, 162, 241, 0.9) 50%,
rgba(66, 162, 241, 0.6) 80%,
transparent);
box-shadow: 0 0 10px rgba(66, 162, 241, 0.8);
}

.tab-gif-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding-bottom: 10px;
font-size: 2em;
border-bottom: 1px solid var(--color-progressive);
}

.tab-gif-title {
font-size: 1.5em;
font-weight: bold;
font-family: var(--heading-font-family);
color: var(--color-progressive);
margin: 0;
}

.tab-gif-toggle-btn {
background: none;
border: 1px solid #4a4a4a;
color: #e0e0e0;
padding: 4px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 0.9em;
transition: all 0.2s ease;
}

.tab-gif-toggle-btn:hover {
background: #2a2a2a;
border-color: #5a5a5a;
}

.tab-gif-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid var(--color-progressive);
}

.tab-gif-tab {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.08), transparent 60%),
rgba(26, 26, 34, 0.6);
color: var(--color-base);
border: 1px solid rgba(66, 162, 241, 0.4);
font-family: var(--body-font-family);
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
font-size: 1em;
font-weight: bold;
transition: all 0.2s ease;
white-space: nowrap;
text-shadow:
0 0 6px rgba(66, 162, 241, 0.5),
0 2px 4px rgba(0, 0, 0, 0.8);
box-shadow:
inset 0 0 15px 2px rgba(66, 162, 241, 0.08),
0 2px 8px rgba(0, 0, 0, 0.4);
position: relative;
}

.tab-gif-tab::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.5) 30%,
rgba(66, 162, 241, 0.7) 50%,
rgba(66, 162, 241, 0.5) 70%,
transparent);
}

.tab-gif-tab:hover {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.15), transparent 60%),
rgba(26, 26, 34, 0.8);
color: #ffffff;
border-color: rgba(66, 162, 241, 0.6);
box-shadow:
inset 0 0 20px 3px rgba(66, 162, 241, 0.15),
0 4px 12px rgba(66, 162, 241, 0.3),
0 0 20px rgba(66, 162, 241, 0.2);
text-shadow:
0 0 10px rgba(66, 162, 241, 0.8),
0 0 5px rgba(66, 162, 241, 0.6),
0 2px 4px rgba(0, 0, 0, 0.8);
}

.tab-gif-tab.tab-gif-active {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.3) 0%, rgba(76, 87, 181, 0.25) 100%),
rgba(66, 162, 241, 0.2);
color: #ffffff;
border-color: rgba(66, 162, 241, 0.8);
font-weight: bold;
box-shadow:
inset 0 0 25px 5px rgba(66, 162, 241, 0.2),
0 4px 15px rgba(66, 162, 241, 0.4),
0 0 30px rgba(66, 162, 241, 0.3);
text-shadow:
0 0 12px rgba(66, 162, 241, 1),
0 0 8px rgba(66, 162, 241, 0.8),
0 2px 4px rgba(0, 0, 0, 0.8);
}

.tab-gif-display-area {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.03) 0%, transparent 50%),
rgba(26, 26, 34, 0.4);
border-radius: 4px;
padding: 8px;
min-height: auto;
box-shadow: inset 0 0 20px 3px rgba(66, 162, 241, 0.08);
border: 1px solid rgba(66, 162, 241, 0.15);
}

.tab-gif-display-area .gif-image-container {
width: fit-content;
min-height: auto;
max-height: none;
display: inline-flex;
align-items: center;
justify-content: center;
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.05), transparent 60%),
rgba(0, 0, 0, 0.3);
border-radius: 3px;
position: relative;
margin-bottom: 8px;
overflow: hidden;
box-shadow:
0 0 20px 3px rgba(66, 162, 241, 0.15),
inset 0 0 15px 2px rgba(66, 162, 241, 0.05);
border: 1px solid rgba(66, 162, 241, 0.3);
padding: 4px;
}

.tab-gif-display-area .gif-image-container img {
max-width: 100%;
height: auto;
width: auto;
display: block;
border-radius: 2px;
object-fit: contain;
transition: opacity 0.2s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.tab-gif-display-area .gif-image-container.loading::after {
content: '';
position: absolute;
width: 40px;
height: 40px;
border: 4px solid var(--color-progressive--hover);
border-top-color: #e0e0e0;
border-radius: 50%;
animation: tab-gif-spin 1s linear infinite;
}

@keyframes tab-gif-spin {
to { transform: rotate(360deg); }
}

.tab-gif-display-area .gif-placeholder {
color: var(--color-progressive--hover);
font-size: 1em;
text-align: center;
padding: 60px 20px;
font-style: italic;
}

.tab-gif-display-area .gif-error {
color: var(--color-destructive);
font-size: 1em;
text-align: center;
padding: 20px;
background: rgba(255, 107, 107, 0.1);
border-radius: 4px;
}

.tab-gif-display-area .gif-caption {
text-align: center;
color: var(--color-base);
font-size: 1em;
font-style: italic;
padding: 6px 10px;
background:
linear-gradient(90deg,
rgba(66, 162, 241, 0.2) 0%,
rgba(66, 162, 241, 0.3) 50%,
rgba(66, 162, 241, 0.2) 100%),
rgba(26, 26, 34, 0.6);
border-radius: 3px;
text-shadow:
0 0 8px rgba(66, 162, 241, 0.8),
0 0 4px rgba(66, 162, 241, 0.6),
0 2px 4px rgba(0, 0, 0, 0.9);
margin-top: 6px;
border: 1px solid rgba(66, 162, 241, 0.4);
box-shadow:
inset 0 0 15px 2px rgba(66, 162, 241, 0.1),
0 2px 8px rgba(0, 0, 0, 0.4);
}

@media (max-width: 768px) {
.tab-gif-container {
display: block;
width: 100%;
min-width: auto;
margin: 1em 0;
}

.tab-gif-tabs {
flex-direction: column;
}

.tab-gif-tab {
width: 100%;
text-align: center;
}

.tab-gif-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}

.tab-gif-toggle-btn {
width: 100%;
}
}

.tab-gif-container.full-width {
display: block;
width: 100%;
}

.tab-gif-container.float-left {
float: left;
margin-right: 1em;
}

.tab-gif-container.float-right {
float: right;
margin-left: 1em;
}

/* ============================================================
MOBILE ADJUSTMENTS
============================================================ */

@media screen and (max-width: 720px) {
/* 1. BOX FIX */
*, *::before, *::after {
box-sizing: border-box !important;
}

.mp-main {
aspect-ratio: auto !important;
height: auto !important;
background-size: cover !important;
}

/* 2. HEIGHT & OVERFLOW */
.mp-box, .mp-body, .main-welcome, .mp-links, .welcome-text, #mp-box-welcome, #mp-welcome {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 6px !important;
padding-right: 6px !important;
float: none !important;
overflow: visible !important;
display: block !important;
}

/* 3. WELCOME BOX */
.main-welcome {
display: flex !important;
flex-direction: column !important;
padding: 10px !important;
align-items: stretch !important;
border-radius: 4px !important;
}

.welcome-text {
font-size: 1em !important;
border-left: none !important;
border-bottom: 2px solid var(--color-progressive);
margin-bottom: 15px;
padding: 8px 0 !important;
text-align: left;
}

/* 4. MASTER GRID */
.mp-main, .mp-links, .mp-links > ul {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding: 0 !important;
min-width: 0 !important;
box-sizing: border-box !important;
}

.mp-main {
margin-top: 20px !important;
}

.mp-links > ul {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
list-style: none !important;
}

/* 5. INDIVIDUAL BUTTON STYLING */
.mp-links > ul > li {
flex: none !important;
width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
margin: 0 !important;

display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
min-height: 110px !important;
padding: 10px 5px !important;

background: linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 50%, rgba(76, 87, 181, 0.08) 100%),
linear-gradient(to bottom, rgba(66, 162, 241, 0.15), rgba(76, 87, 181, 0.2), rgba(66, 162, 241, 0.15)) !important;
box-shadow: inset 0 0 15px rgba(66, 162, 241, 0.12), 0 2px 8px rgba(0,0,0,0.3) !important;
border: 1px solid rgba(66, 162, 241, 0.4) !important;
border-radius: 6px !important;
}

div.main-welcome > .mp-links > ul > li:nth-child(3) {
grid-column: span 2 !important;
width: 100% !important;
justify-self: center !important;
}

/* 7. ICON & TEXT GLOW */
.mp-links img {
max-width: 45px !important;
height: auto !important;
margin-bottom: 6px !important;
display: block !important;
}

.mp-links > ul > li > a {
font-size: 0.85em !important;
line-height: 1.1 !important;
white-space: normal !important;
text-align: center !important;
color: #fff !important;
text-shadow: 0 0 8px rgba(66, 162, 241, 0.8), 0 0 4px rgba(66, 162, 241, 0.5), 0 2px 4px rgba(0, 0, 0, 0.9) !important;
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}

.mp-box h2 { font-size: 1.5em !important; padding: 0.2em 0 !important; }
.mp-box .welcome-message { font-size: 1.3em !important; padding: 0.4em !important; }
.druid-infobox .druid-title { font-size: 1.3em !important; min-height: auto !important; }
a.tabber__tab { font-size: 1.1em !important; }
.node { width: 45px !important; }

/* 9. DUNGEON PAGE */
.dungeon-page-smaller-box ul {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}

.dungeon-page-smaller-box li {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 10px 0 !important;
padding: 1em !important;
flex: none !important;
border: 1px solid rgba(66, 162, 241, 0.3) !important;
box-shadow: inset 0 0 20px 3px rgba(66, 162, 241, 0.05), 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

.dungeon-page-smaller-box a {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
width: 100% !important;
}
.dungeon-page-box h2, .mp-box h2 {
text-align: center !important;
width: 100% !important;
}

/* 10. GENERAL PAGE */
.mw-parser-output h2 {
font-size: 1.6em !important;
margin-top: 0.1em !important;
margin-bottom: 0.05em !important;
padding: 0 !important;
border: none !important;
}
.mp-box h2::after { bottom: -2px !important; }
.mw-parser-output p, .mw-parser-output li {
font-size: 0.9em !important;
line-height: 1.5 !important;
margin-top: 0.2em !important;
}

/* 11. BUTTONS */
.button-expand-header {
background: var(--background-color-base) !important;
box-shadow: inset 0 0 0 2px #0f0f0f, inset 0 0 20px #42a2f180 !important;
padding-right: 65px !important;
font-size: 14px !important;
white-space: normal !important;
text-align: left !important;
display: flex !important;
align-items: center !important;
border-radius: 4px !important;
min-height: 60px !important;
}

.button-expand-header img {
flex-shrink: 0 !important;
width: 45px !important;
height: 45px !important;
object-fit: contain !important;
margin-right: 6px !important;
}

/* 12. MAIN PAGE TITLE */
h1#firstHeading,
.mw-body h1,
.section-heading h1 {
font-size: 1.5em !important;
width: 100% !important;
text-align: center !important;
display: block !important;
margin: 10px 0 !important;
letter-spacing: 0.05em !important;
}

/* 13. TABS */
.header-container,
.pre-content,
.page-header-bar {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 100% !important;
}

.minerva__tab-container {
display: flex !important;
width: 100% !important;
justify-content: stretch !important;
margin-bottom: 5px !important;
}
.minerva__tab-container .tab {
flex: 1 !important;
text-align: center !important;
}

.page-actions-menu {
width: 100% !important;
display: block !important;
}
.page-actions-menu__list {
display: flex !important;
width: 100% !important;
justify-content: space-around !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
.page-actions-menu__list li {
flex: 1 !important;
display: flex !important;
justify-content: center !important;
}

/* 14. TABLE STACK */
.mw-parser-output div[style*="display:flex"]:has(.wikitable) {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 100% !important;
gap: 20px !important;
}

.mw-parser-output .wikitable td,
.mw-parser-output .wikitable th {
white-space: nowrap !important;
word-break: normal !important;
padding: 10px 5px !important;
}

/* 15. DLOG STUFF */
.dlog {
font-size: 1em !important;
max-width: 100% !important;
padding: 0.5em !important; /* Optional: tightens the box for mobile */
}

.dlog::before {
zoom: 0.6;
margin-bottom: 5px;
display: block;
width: fit-content;
}

/* 16. INLINE IMAGE STUFF */
.inline-image-template {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
display: block !important;
margin: 1em 0 !important;
}

.inline-image-image {
display: block !important;
width: 100% !important;
text-align: center;
}

.inline-image-image img,
.inline-image-image > p > span > span > img {
max-width: 100% !important;
height: auto !important;
width: auto !important;
}

.inline-image-caption {
width: 100% !important;
box-sizing: border-box !important;
}

.inline-image-caption > p {
font-size: 0.7em !important;
white-space: normal !important;
}

/* 17. OTHER */
.pre-dungeon p {
font-size: 0.8em !important;
padding: 0.7em 1em !important;
}

/* fixed 492px decor/book pages overflow a phone and force zoom-out */
.decor-page {
width: 100% !important;
max-width: 492px !important;
height: auto !important;
box-sizing: border-box !important;
}

.decor-page > p {
padding: 1.5em !important;
}
}

/* ============================================================
THE ARCHIVES — MAIN PAGE v2
Scoped entirely to .archive-page ([[Telos Realms Wiki]]).
Built from the wiki's own vocabulary: kurva pixel frames,
embossed Daedalus, Courier ledger notes, Minecraft palette.
Shared classes (.mp-links, .mp-box, .dlog) untouched.
============================================================ */

.archive-page {
--ar-accent: #42a2f1;
--ar-accent-bright: #7cc2ff;
--ar-cream: #feffe5;
--ar-line: rgba(66, 162, 241, 0.18);
--ar-panel: rgba(10, 14, 24, 0.85);
--ar-panel-raised: rgba(15, 20, 33, 0.88);
--ar-text: #dde5f2;
--ar-text-dim: #93a0b8;
--ar-gold: #ffc05f;
--ar-ease: cubic-bezier(0.32, 0.72, 0, 1);
--ar-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
max-width: 1280px;
margin: 0 auto;
font-family: var(--body-font-family);
color: var(--ar-text);
}

/* --- one-time entry cascade (no looping motion) --- */
@keyframes ar-enter {
from { opacity: 0; transform: translateY(12px); filter: blur(4px); }
to { opacity: 1; transform: none; filter: none; }
}

.archive-page > * { animation: ar-enter 0.55s var(--ar-ease-out) both; }
.archive-page > *:nth-child(1) { animation-delay: 0.05s; }
.archive-page > *:nth-child(2) { animation-delay: 0.12s; }
.archive-page > *:nth-child(3) { animation-delay: 0.19s; }
.archive-page > *:nth-child(4) { animation-delay: 0.25s; }
.archive-page > *:nth-child(5) { animation-delay: 0.30s; }
.archive-page > *:nth-child(6) { animation-delay: 0.34s; }
.archive-page > *:nth-child(n+7) { animation-delay: 0.38s; }

/* --- hero: centered greeting panel --- */
.archive-hero {
text-align: center;
padding: 2.4em 2.4em 0;
background:
radial-gradient(ellipse at 50% -10%, rgba(66, 162, 241, 0.14), transparent 60%),
var(--ar-panel);
border-style: solid;
border-image-source: url("/wiki/Special:Redirect/file/Wiki-border-kurva.png");
border-image-slice: 6;
border-image-width: 6px;
border-image-repeat: repeat repeat;
}

.archive-hero p { margin: 0; }

.ar-hero-emblem img { filter: drop-shadow(0 0 18px rgba(66, 162, 241, 0.55)); }

.ar-hero-eyebrow {
margin-top: 0.9em;
font-style: italic;
font-size: 0.98em;
color: #8493ad;
}

.ar-hero-title {
font-family: var(--heading-font-family);
font-size: clamp(2.8em, 6.5vw, 4.6em);
line-height: 1.02;
margin-top: 0.12em;
color: var(--ar-cream);
text-rendering: geometricPrecision;
text-shadow:
0 0.06em 0 color-mix(in srgb, currentColor 50%, black),
0 0.12em 0 color-mix(in srgb, currentColor 10%, black),
0 0 0.2em currentColor;
}

.ar-hero-sub {
margin: 0.6em auto 0;
max-width: 38em;
color: var(--ar-text-dim);
font-size: 1.08em;
line-height: 1.6;
text-wrap: balance;
}

.archive-status {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.4em 2.4em;
margin: 1.8em -2.4em 0;
padding: 0.85em 1.5em 1em;
border-top: 1px solid var(--ar-line);
font-size: 0.92em;
color: #7d92b3;
}

.ar-stat b { color: var(--ar-cream); font-weight: 600; margin-right: 0.15em; font-variant-numeric: tabular-nums; }

.ar-stat-note {
color: #54fc54;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, black);
}

/* --- D's welcome ledger + the three starting records --- */
.archive-comm {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: 14px;
margin-top: 14px;
align-items: stretch;
}

.archive-transmission {
background: var(--ar-panel);
border-left: 3px solid var(--ar-accent);
padding: 1.2em 1.6em 1.1em;
box-shadow: inset 0 0 24px 4px rgba(66, 162, 241, 0.07);
}

.ar-comm-eyebrow {
font-family: 'Courier New', monospace;
font-weight: 700;
font-size: 0.88em;
color: #7d92b3;
}

.ar-comm-greeting {
font-family: var(--heading-font-family);
font-size: 2em;
margin-top: 0.3em;
color: var(--ar-cream);
text-rendering: geometricPrecision;
text-shadow:
0 0.08em 0 color-mix(in srgb, currentColor 35%, black),
0 0 0.2em color-mix(in srgb, currentColor 60%, transparent);
}
.ar-comm-greeting .swap-silverling { color: var(--ar-accent-bright); width: 6.5em; }

.archive-transmission p {
margin: 0.8em 0 0;
color: #bcc8dd;
line-height: 1.62;
}

.ar-sign {
margin-top: 0.45em;
text-align: right;
font-family: var(--heading-font-family);
font-size: 1.7em;
color: var(--ar-accent-bright);
text-shadow: 0 0 14px rgba(66, 162, 241, 0.6), 0 2px 0 rgba(0, 0, 0, 0.6);
}

.ar-d {
color: var(--ar-accent-bright);
font-weight: 700;
text-shadow: 0 0 12px rgba(66, 162, 241, 0.65);
}

.ar-silver {
color: #cfd6e2;
font-weight: 600;
text-shadow: 0 0 10px rgba(207, 214, 226, 0.4);
}

.archive-directives { display: flex; flex-direction: column; gap: 10px; }

.ar-directives-label {
font-family: 'Courier New', monospace;
font-weight: 700;
font-size: 0.88em;
color: #7d92b3;
padding-left: 2px;
}

.ar-directive {
display: flex;
align-items: center;
gap: 0.9em;
flex: 1;
padding: 0.6em 1em;
background: var(--ar-panel-raised);
border: 1px solid var(--ar-line);
cursor: pointer;
transition:
background-color 0.22s var(--ar-ease),
border-color 0.22s var(--ar-ease),
transform 0.22s var(--ar-ease),
box-shadow 0.22s var(--ar-ease);
}

.ar-directive:hover {
background: rgba(24, 33, 54, 0.92);
border-color: rgba(66, 162, 241, 0.5);
transform: translateY(-1px);
box-shadow:
inset 0 0 16px 2px rgba(66, 162, 241, 0.15),
0 4px 14px rgba(0, 0, 0, 0.45);
}

.ar-directive:active { transform: translateY(0) scale(0.99); }

.ar-directive p { margin: 0; }
.ar-directive > a,
.ar-directive > span[typeof] { flex-shrink: 0; }
.ar-directive img { display: block; }

.ar-directive-title a {
font-family: var(--heading-font-family);
font-size: 1.3em;
line-height: 1;
color: var(--ar-cream);
text-decoration: none;
text-shadow: 0 2px 0 color-mix(in srgb, currentColor 20%, black);
}
.ar-directive-title a:visited { color: var(--ar-cream); }

.ar-directive-sub { color: var(--ar-text-dim); font-size: 0.88em; margin-top: 2px; }

.ar-directive-go {
margin-left: auto;
font-size: 1.5em;
line-height: 1;
color: #5e7795;
transition: transform 0.22s var(--ar-ease), color 0.22s var(--ar-ease);
}
.ar-directive:hover .ar-directive-go { transform: translateX(3px); color: var(--ar-accent-bright); }

/* --- section headers: ❖ marker, embossed Daedalus, D's aside --- */
.ar-sect {
display: flex;
align-items: baseline;
gap: 0.6em;
margin: 2.2em 0 0.9em;
}

.ar-sect-mark {
color: var(--ar-accent-bright);
text-shadow: 0 0 10px rgba(124, 194, 255, 0.9), 0 0 5px rgba(124, 194, 255, 0.6);
}

.ar-sect-name {
font-family: var(--heading-font-family);
font-size: 2.1em;
line-height: 1;
color: var(--ar-cream);
text-rendering: geometricPrecision;
text-shadow:
0 0.06em 0 color-mix(in srgb, currentColor 50%, black),
0 0.12em 0 color-mix(in srgb, currentColor 10%, black),
0 0 0.2em currentColor;
}

.ar-sect-sub {
font-style: italic;
color: #7d8ba5;
font-size: 0.95em;
margin-left: 0.3em;
}

.ar-sect::after {
content: '';
flex: 1;
align-self: center;
height: 1px;
background: linear-gradient(90deg, rgba(66, 162, 241, 0.5), var(--ar-line) 40%, transparent);
}

/* --- record cards --- */
.archive-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 14px;
}

.ar-card {
display: flex;
align-items: flex-start;
gap: 1em;
grid-column: span 4;
padding: 1.05em 1.15em 1em;
background-color: var(--ar-panel);
border-style: solid;
border-image-source: url("/wiki/Special:Redirect/file/Wiki-border-kurva.png");
border-image-slice: 6;
border-image-width: 6px;
border-image-repeat: repeat repeat;
cursor: pointer;
transition:
background-color 0.22s var(--ar-ease),
transform 0.22s var(--ar-ease),
box-shadow 0.22s var(--ar-ease);
}

.ar-w6 { grid-column: span 6; }
.ar-w4 { grid-column: span 4; }
.ar-w3 { grid-column: span 3; }

.ar-card:hover {
background-color: rgba(20, 28, 46, 0.92);
transform: translateY(-2px);
box-shadow:
inset 0 0 20px 4px rgba(66, 162, 241, 0.16),
0 8px 22px rgba(0, 0, 0, 0.45),
0 0 22px -6px rgba(66, 162, 241, 0.45);
}

.ar-card:active { transform: translateY(0) scale(0.99); }

.ar-card > a,
.ar-card > span[typeof] { flex-shrink: 0; }

.ar-card img {
display: block;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
transition: transform 0.22s var(--ar-ease);
}
.ar-card:hover img { transform: translateY(-2px); }

.ar-card-body { flex: 1; min-width: 0; }

.ar-card-titles { display: flex; align-items: baseline; gap: 0.7em; flex-wrap: wrap; }
.ar-card-titles p { margin: 0; }

.ar-card-titles a {
font-family: var(--heading-font-family);
font-size: 1.5em;
line-height: 1.05;
color: var(--ar-cream);
text-decoration: none;
text-rendering: geometricPrecision;
text-shadow:
0 0.08em 0 color-mix(in srgb, currentColor 35%, black),
0 0 0.15em color-mix(in srgb, currentColor 40%, transparent);
transition: text-shadow 0.2s var(--ar-ease);
}
.ar-card-titles a:visited { color: var(--ar-cream); }
.ar-card:hover .ar-card-titles a {
text-shadow:
0 0.08em 0 color-mix(in srgb, currentColor 35%, black),
0 0 0.4em currentColor;
}

/* little colored annotations, same palette as the item infoboxes */
.ar-card-tag {
font-size: 0.8em;
font-weight: 600;
letter-spacing: 0.03em;
white-space: nowrap;
text-shadow: 1px 1px color-mix(in srgb, currentColor 20%, black);
}
.ar-mc-yellow { color: #fcfc54; }
.ar-mc-aqua { color: #54fcfc; }
.ar-mc-red { color: #fc5454; }
.ar-mc-green { color: #54fc54; }
.ar-mc-gold { color: #ffc05f; }

.ar-card-desc {
margin-top: 0.45em;
color: var(--ar-text-dim);
font-size: 0.93em;
line-height: 1.58;
}
.ar-card-desc p { margin: 0; }

.ar-card-links {
margin-top: 0.75em;
padding-top: 0.65em;
border-top: 1px solid rgba(66, 162, 241, 0.14);
font-size: 0.9em;
line-height: 1.9;
color: #51617c;
}
.ar-card-links p { margin: 0; }
.ar-see { font-style: italic; color: #5d6c85; margin-right: 0.3em; }
.ar-card-links a { color: var(--ar-gold); text-decoration: none; }
.ar-card-links a:visited { color: var(--ar-gold); }
.ar-card-links a:hover { color: #ffd28a; text-decoration: underline; }

/* --- footer --- */
.archive-footer {
margin-top: 2.4em;
padding: 1.5em 1em 0.5em;
border-top: 1px solid var(--ar-line);
text-align: center;
}

.ar-footer-quote {
font-style: italic;
font-size: 1.05em;
color: #aab6cc;
max-width: 42em;
margin: 0 auto 0.9em;
text-wrap: balance;
}
.ar-footer-quote .ar-d { font-style: normal; }

.ar-footer-line { color: #7e8ca6; font-size: 0.95em; }

.ar-footer-links { margin-top: 0.7em; font-size: 0.92em; color: #51617c; }
.ar-footer-links a { color: var(--ar-gold); text-decoration: none; }
.ar-footer-links a:hover { text-decoration: underline; }

/* --- keyboard focus --- */
.archive-page a:focus-visible {
outline: 2px solid var(--ar-accent-bright);
outline-offset: 2px;
}

/* --- responsive --- */
@media screen and (max-width: 1060px) {
.archive-comm { grid-template-columns: 1fr; }
.ar-w6 { grid-column: span 12; }
.ar-w4, .ar-w3 { grid-column: span 6; }
}

@media screen and (max-width: 720px) {
.archive-grid { display: flex; flex-direction: column; }
.archive-hero { padding: 1.6em 1.2em 0; }
.archive-status { margin-inline: -1.2em; padding-inline: 1.2em; gap: 0.4em 1.4em; }
.ar-sect { flex-wrap: wrap; margin-top: 1.8em; }
.ar-sect-name { font-size: 1.6em; }
.ar-sect-sub { flex-basis: 100%; margin-left: 1.5em; }
.ar-card { padding: 1em; }
.ar-comm-greeting { font-size: 1.6em; }
}

/* --- reduced motion: everything appears instantly --- */
@media (prefers-reduced-motion: reduce) {
.archive-page > *,
.archive-page .swap-silverling::before,
.archive-page .swap-silverling::after { animation: none !important; }
.archive-page *,
.archive-page *::before,
.archive-page *::after { transition-duration: 0.01ms !important; }
}

/* ============================================================
END THE ARCHIVES — MAIN PAGE v2
============================================================ */

/* ============================================================
DUNGEON PAGES v2
1) .dungeon-index / .dungeon-jump — the [[Dungeons]] list page,
danger-graded via --tier (green → void)
2) .npc-infobox — compact infobox chrome + single-line loot rows;
model renders keep their template sizes
3) .dungeon-page — wiki-article layout for dungeon pages
Heading selectors are written long to out-rank Minerva's
`.content .mw-parser-output .mw-heading { display:block }`.
============================================================ */

/* smooth anchor jumps (jump bar, TOC links) */
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}

/* --- 1) the dungeon index --- */

/* danger palette, shared by pills, markers, rules, tile glows */
.tier-g, .dj-g { --tier: #54fc54; }
.tier-o, .dj-o { --tier: #fca854; }
.tier-p, .dj-p { --tier: #cd08cd; }
.tier-r, .dj-r { --tier: #c20f0f; }
.tier-u, .dj-u { --tier: #8d9f97; }

/* jump bar: one tap to any tier bracket */
.dungeon-jump {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0.9em 0 0.3em;
}

.dungeon-jump .dj {
display: inline-block;
padding: 0.3em 0.85em;
background: rgba(15, 20, 33, 0.88);
border: 1px solid color-mix(in srgb, var(--tier, #42a2f1) 30%, transparent);
border-radius: 2px;
font-weight: 700;
font-size: 0.95em;
color: var(--tier, #dde5f2);
text-shadow: 1px 1px color-mix(in srgb, currentColor 20%, black);
transition:
border-color 0.18s cubic-bezier(0.32, 0.72, 0, 1),
background-color 0.18s cubic-bezier(0.32, 0.72, 0, 1),
transform 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}

.dungeon-jump .dj a { color: inherit; text-decoration: none; }

.dungeon-jump .dj:hover {
background: rgba(24, 33, 54, 0.92);
border-color: color-mix(in srgb, var(--tier, #42a2f1) 70%, transparent);
transform: translateY(-1px);
}

/* bracket headings — long selectors beat Minerva's .mw-heading{display:block} */
.dungeon-index .mw-heading3,
.content .mw-parser-output .dungeon-index .mw-heading3 {
display: flex;
align-items: center;
gap: 0.7em;
margin: 1.6em 0 0.8em;
border: none;
min-width: 0;
}

.dungeon-index .mw-heading3::before {
content: '❖';
font-size: 1.1em;
color: var(--tier, #7cc2ff);
text-shadow: 0 0 10px currentColor, 1px 1px color-mix(in srgb, currentColor 20%, black);
}

.dungeon-index .mw-heading3::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg,
color-mix(in srgb, var(--tier, #42a2f1) 50%, transparent),
color-mix(in srgb, var(--tier, #42a2f1) 15%, transparent) 45%,
transparent);
}

.dungeon-index h3,
.content .mw-parser-output .dungeon-index h3 {
flex: 0 0 auto;
margin: 0;
font-family: var(--heading-font-family);
font-size: 2em;
line-height: 1;
font-weight: normal;
color: #feffe5;
text-rendering: geometricPrecision;
text-shadow:
0 0.06em 0 color-mix(in srgb, currentColor 50%, black),
0 0.12em 0 color-mix(in srgb, currentColor 10%, black),
0 0 0.2em currentColor;
}

/* portal tiles: .mp-links supplies the kurva frame + whole-tile click JS */
.dungeon-grid { font-size: 1em; }

.dungeon-grid > ul {
justify-content: flex-start;
gap: 12px;
margin: 0;
}

.dungeon-grid > ul > li {
gap: 4px;
padding: 0.9em 1.1em 0.8em;
background-color: rgba(10, 14, 24, 0.85);
transition:
background-color 0.22s cubic-bezier(0.32, 0.72, 0, 1),
transform 0.22s cubic-bezier(0.32, 0.72, 0, 1),
box-shadow 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}

.dungeon-grid > ul > li:hover {
background-color: rgba(20, 28, 46, 0.92);
transform: translateY(-2px);
box-shadow:
inset 0 0 20px 4px color-mix(in srgb, var(--tier, #42a2f1) 15%, transparent),
0 8px 22px rgba(0, 0, 0, 0.45),
0 0 24px -6px var(--tier, #42a2f1);
}

/* --- 2) boss & enemy infoboxes --- */
.druid-container.npc-infobox {
max-width: 21.5em;
padding: 0.35em;
font-size: 0.94em;
}

.npc-infobox .druid-title {
font-size: 1.7em;
min-height: auto;
padding: 0.3em 0.5em;
}

.npc-infobox .druid-section {
font-size: 1.05em;
padding: 2px;
}

.npc-infobox div.druid-row > .druid-label,
.npc-infobox div.druid-row > .druid-data {
padding-block: 1px;
}

/* loot: one line per drop — name + icon left, % right.
The old `.druid-row[data-druid-section-row="Loot"] div` rule sets
display:block, width:100% and justify-content:space-between on every
div in here; width:100% + padding overflows the box (clipped %s),
so everything below resets to width:auto / border-box. */
.npc-infobox .druid-row[data-druid-section-row="Loot"] div {
padding: 0;
display: block;
width: auto;
box-sizing: border-box;
}

.npc-infobox .druid-row[data-druid-section-row="Loot"] > .druid-data {
flex: 1 1 auto;
min-width: 0;
width: 100%;
}

.npc-infobox .druid-row[data-druid-section-row="Loot"] .loot-category-header,
.npc-infobox .loot-category-header {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.45em;
padding: 0.25em 0.5em;
margin: 0.45em 0 0.15em;
}

.npc-infobox .loot-category-header img { width: 24px; height: auto; }

.npc-infobox .loot-category-title { font-size: 0.9em; }

.npc-infobox .druid-row[data-druid-section-row="Loot"] .loot-item-row,
.npc-infobox .loot-item-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.15em 0.6em;
padding: 0.12em 0.4em 0.12em 0.6em;
margin: 0;
font-size: 0.95em;
line-height: 1.35;
}

.npc-infobox .druid-row[data-druid-section-row="Loot"] .loot-data-infobox,
.npc-infobox .loot-data-infobox {
display: flex;
align-items: center;
gap: 0.45em;
min-width: 0;
}

.npc-infobox .loot-data-infobox img { max-height: 26px; width: auto; }

.npc-infobox .boss-percent { font-size: 1em; flex-shrink: 0; }

/* enemy boxes inside a dungeon page: compact cards */
.dungeon-enemies .druid-container.npc-infobox {
max-width: 18em;
font-size: 0.9em;
float: none;
margin: 0.4em;
}

.dungeon-enemies .npc-infobox .druid-title { font-size: 1.35em; }

/* --- 3) individual dungeon pages (.dungeon-page wrapper) --- */

/* flat sections: the heading rule does the separating, not boxes */
.dungeon-page .hoverbox,
.dungeon-page .hoverbox:hover {
background: none;
background-color: transparent;
border-top: 0;
border-radius: 0;
box-shadow: none;
padding: 0 0.2em 0.2em;
margin: 0.2em 0 0.6em;
}

/* wiki-style headings: ❖ marker + underline rule.
Long selectors beat Minerva's display:block / flex-basis:0. */
.dungeon-page .mw-heading2,
.content .mw-parser-output .dungeon-page .mw-heading2 {
display: flex;
align-items: center;
gap: 0.55em;
margin: 1em 0 0.45em;
padding-bottom: 0.22em;
border-bottom: 1px solid rgba(66, 162, 241, 0.3);
min-width: 0;
}

.dungeon-page .mw-heading2::before {
content: '❖';
color: #7cc2ff;
text-shadow: 0 0 10px rgba(124, 194, 255, 0.9);
}

.dungeon-page h2,
.content .mw-parser-output .dungeon-page h2 {
flex: 0 0 auto;
font-size: 1.9em;
margin: 0;
}

.dungeon-page > p,
.dungeon-page .hoverbox > p {
line-height: 1.65;
max-width: 72ch;
}

/* attack patterns: slim ledger rows */
.dungeon-page .pre-dungeon p {
margin: 0.4em 0;
padding: 0.45em 0.85em;
font-size: 0.97em;
border-radius: 2px;
border-left: 2px solid rgba(66, 162, 241, 0.45);
background: linear-gradient(90deg, rgba(66, 162, 241, 0.07), rgba(26, 26, 34, 0.6) 30%, transparent 96%);
box-shadow: none;
backdrop-filter: none;
}

.dungeon-page .pre-dungeon p::before { display: none; }

.dungeon-page .dlog {
font-size: 1.4em;
margin-bottom: 0.8em;
}

.dungeon-page .mw-collapsible { padding-top: 0.6em; }

.dungeon-page .button-expand-header {
font-size: 14px;
padding: 10px 50px 10px 14px;
}

/* dialogue tables must wrap, never force sideways scroll */
.dungeon-page .wikitable td,
.dungeon-page .wikitable th,
.mw-parser-output .dungeon-page .wikitable td,
.mw-parser-output .dungeon-page .wikitable th {
white-space: normal !important;
word-break: normal !important;
}

/* anchor jumps land clear of the (mobile-sticky) jump bar */
.dungeon-index .mw-heading3 { scroll-margin-top: 4.5em; }

/* --- mobile: the dungeon section must be readable one-handed --- */
@media screen and (max-width: 720px) {
/* jump bar pins to the top and scrolls sideways — one thumb-swipe
to reach any tier bracket from anywhere on the page */
.dungeon-jump {
position: sticky;
top: 0;
z-index: 5;
flex-wrap: nowrap;
overflow-x: auto;
gap: 6px;
padding: 0.5em 6px;
margin: 0.6em -6px 0.3em;
background: rgba(10, 13, 20, 0.96);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.dungeon-jump::-webkit-scrollbar { display: none; }
.dungeon-jump .dj {
flex-shrink: 0;
padding: 0.45em 0.8em;
font-size: 1em;
}

.dungeon-index .mw-heading3 { margin-top: 1.3em; }
.dungeon-index h3,
.content .mw-parser-output .dungeon-index h3 { font-size: 1.5em; }

/* two-up portal tiles, capped images (overrides the old 45px cap) */
.dungeon-grid > ul {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
}
.dungeon-grid > ul > li {
width: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0.7em 0.4em !important;
background: rgba(10, 14, 24, 0.85) !important;
}
.dungeon-grid > ul > li img {
max-width: 116px !important;
height: auto !important;
margin: 0 auto !important;
}

/* infoboxes go full width and stack */
.druid-container.npc-infobox { max-width: 100%; }
.dungeon-enemies { flex-direction: column; align-items: center; }
.dungeon-enemies .druid-container.npc-infobox { width: 100%; max-width: 24em; }

.dungeon-page .hoverbox,
.dungeon-page .hoverbox:hover { margin-inline: 0; padding-inline: 0; }

.dungeon-page .pre-dungeon p { font-size: 0.88em; padding: 0.45em 0.7em; }
.dungeon-page .dlog { font-size: 1.1em !important; }

/* keep dialogue tables inside the screen */
.dungeon-page .wikitable { width: 100%; }
}

/* ============================================================
END DUNGEON PAGES v2
============================================================ */

/* ============================================================
MOBILE READABILITY FIXES (added)
Keeps page content from rendering wider than the phone screen
(Minerva clips horizontal overflow, so over-wide content is lost
off the right edge) and shrinks boss/enemy infoboxes from
full-screen blocks back into readable cards.
============================================================ */
@media screen and (max-width: 720px) {
/* nothing should size itself wider than the viewport */
.mw-parser-output,
.dungeon-page,
.hoverbox,
.dungeon-clear,
.lore,
.pre-dungeon {
max-width: 100% !important;
box-sizing: border-box;
overflow-wrap: break-word;
}

/* .pre-dungeon is `width: fit-content`; a long non-wrapping heading
inside it stretches the whole section past the screen. Let it
fill the available width instead. */
.pre-dungeon {
width: auto !important;
}

/* ❖-marker headings are flex rows; the heading was `flex: 0 0 auto`
so it could neither shrink nor wrap and ran off the screen edge.
Allow the row to wrap and the heading to shrink + wrap its text. */
.dungeon-page .mw-heading2,
.content .mw-parser-output .dungeon-page .mw-heading2,
.dungeon-index .mw-heading3,
.content .mw-parser-output .dungeon-index .mw-heading3 {
/* keep the ❖ marker on the same flex line as the title and let
the TITLE wrap inside itself — don't wrap the flex items, or
the marker gets stranded on its own line */
flex-wrap: nowrap !important;
align-items: baseline !important;
min-width: 0 !important;
}
.dungeon-page h2,
.content .mw-parser-output .dungeon-page h2,
.dungeon-index h3,
.content .mw-parser-output .dungeon-index h3 {
flex: 0 1 auto !important;
min-width: 0 !important;
font-size: 1.35em !important;
overflow-wrap: anywhere;
word-break: break-word;
}

/* boss / enemy infoboxes: centered cards, not full-screen blocks
(the 3D render + bossbar were filling the whole width) */
.dungeon-page .druid-container.npc-infobox,
.dungeon-enemies .druid-container.npc-infobox {
max-width: 19em !important;
margin: 0.6em auto !important;
font-size: 0.82em;
}
}

/* ============================================================
MOBILE — FLATTEN DECORATION FOR ACCESSIBILITY (added)
On phones, trade the neon glow / frame chrome / motion for flat,
solid, high-contrast surfaces and clean text. Desktop is untouched.
============================================================ */
@media screen and (max-width: 720px) {

/* 1) blurry colored text-shadows wreck legibility — remove them
from body text entirely... */
.mw-parser-output p,
.mw-parser-output li,
.mw-parser-output dd,
.mw-parser-output dt,
.mw-parser-output td,
.mw-parser-output th,
.mw-parser-output a,
.druid-data, .druid-label,
.npc-infobox div.druid-row > .druid-label,
.npc-infobox div.druid-row > .druid-data,
.boss-percent, .loot-category-title,
.footer-content > ul > li > a,
.footer-section > ul > li,
.ar-card-titles a, .ar-directive-title a, .ar-card-desc {
text-shadow: none !important;
}
/* ...and reduce headings to a single clean dark shadow (kept for
legibility over the page's background image) */
.mw-parser-output h1, .mw-parser-output h2, .mw-parser-output h3,
.dungeon-page h2, .dungeon-index h3,
.druid-title, .druid-section, .druid-infobox .druid-title,
.npc-infobox .druid-title, .npc-infobox .druid-section,
.mp-box h2, .mp-box .welcome-message,
.ar-hero-title, .ar-sect-name {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
}

/* 2) the page frame (nexus border-image + blue inner glow) eats
width and contrast — drop it on phones */
#bodyContent {
border-image: none !important;
border: none !important;
box-shadow: none !important;
padding: 1em 0.7em !important;
}

/* 3) flatten neon box-shadow glows + backdrop blur on containers */
.npc-infobox, .druid-container,
.wikitable, table.wikitable,
.dlog, .pre-dungeon p, .hoverbox, .hoverbox:hover,
.mp-box, #mp-box-welcome, .class-box, .main-welcome,
.button-expand-header,
.tab-gif-container, .gif-display-area, .tab-gif-display-area,
.inline-image-image > p > span > span > img,
.ar-card, .ar-directive, .archive-hero, .archive-transmission {
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}

/* 4) replace the border-image frames (tables, portal tiles,
infoboxes, archive cards) with flat solid borders + bg */
.wikitable, table.wikitable,
.npc-infobox, .druid-container.npc-infobox,
.mp-links > ul > li,
.ar-card, .archive-hero {
border-image: none !important;
border: 1px solid rgba(66, 162, 241, 0.35) !important;
background: #15151c !important;
}

/* 5) hide purely-decorative glow bars / scan lines (NOT the ❖
heading markers, which are real content) */
.mp-box::before, .mp-box::after,
.mp-box h2::after,
.mp-box .welcome-message::before, .mp-box .welcome-message::after,
.npc-infobox::before, .npc-infobox::after,
.npc-infobox .druid-title::before, .npc-infobox .druid-title::after,
.npc-infobox .druid-section::after,
.mw-footer::before,
.tab-gif-container::before, .gif-display-area::before,
.dlog::after, .pre-dungeon p::before,
.inline-image-caption > p::before {
display: none !important;
}

/* 6) stop the looping pulse / scan / shimmer animations */
.npc-infobox::before, .mw-footer::before,
.boss-infobox-subtitle, .boss-infobox-subtitle::before,
.dlog::after, .mp-box .welcome-message,
.mp-main > .mp-links > ul > li::before,
.archive-page > * {
animation: none !important;
}
}

/* ============================================================
MOBILE — READABLE TABLES (added)
The forced `white-space: nowrap` made text-heavy cells refuse to
wrap, so tables ballooned far wider than the phone and Minerva
clipped them to a sliver. Let cells wrap so the table fits the
screen; shrink/contain wide bits; give genuinely wide all-number
tables a horizontal swipe instead. No `display` change on the
generic rule, so layout tables are unaffected.
============================================================ */
@media screen and (max-width: 720px) {
.mw-parser-output .wikitable,
.mw-parser-output table.wikitable {
width: 100% !important;
margin-inline: 0 !important;
}

/* the key fix: cells wrap instead of forcing the table off-screen */
.mw-parser-output .wikitable td,
.mw-parser-output .wikitable th {
white-space: normal !important;
word-break: normal !important;
overflow-wrap: anywhere;
font-size: 0.82em !important;
padding: 6px 5px !important;
vertical-align: top;
}

/* oversized in-cell icons (e.g. the 128px ruleset banners) */
.mw-parser-output .wikitable td img,
.mw-parser-output .wikitable th img {
max-width: 64px !important;
height: auto !important;
}

/* math formulas don't wrap; shrink them and let any that are still
too wide scroll inside their own box. overflow:auto also drops
their min-content width to 0 so they stop stretching the cell. */
.wikitable div[style*="font-size:150%"],
.wikitable div[style*="font-size: 150%"] {
font-size: 105% !important;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.wikitable .mwe-math-element,
.wikitable .mwe-math-fallback-image-inline,
.wikitable .mwe-math-fallback-image-display {
max-width: 100%;
height: auto;
}

/* the 8-column "Max Base Class Stats" table is all short numbers —
a clean left-to-right swipe reads far better than cramped wrap */
#mp-box-basestats .wikitable {
display: block;
width: -moz-max-content;
width: max-content;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
#mp-box-basestats .wikitable td,
#mp-box-basestats .wikitable th {
white-space: nowrap !important;
}
}

:root {
--color-base: #c9e1e6;
--color-base-fixed: #c9e1e6;
--color-base--hover: #d1eaef;
--color-emphasized: #d1eaef;
--color-subtle: #a7bfca;
--color-placeholder: #a7bfca;
--color-disabled: #a2a9b1;
--color-disabled-emphasized: #a2a9b1;
--color-inverted: #fff;
--color-inverted-fixed: #fff;
--color-progressive: #42a2f1;
--color-progressive--hover: #4c57b5;
--color-progressive--active: #4c57b5;
--color-progressive--focus: #4c57b5;
--color-destructive: #ce0000;
--color-destructive--hover: #900000;
--color-destructive--active: #900000;
--color-destructive--focus: #900000;
--color-visited: #2f3fcf;
--color-visited--hover: color-mix(in srgb, #2f3fcf 80%, #fff);
--color-visited--active: color-mix(in srgb, #2f3fcf 60%, #000);
--color-destructive--visited: #8e0000;
--color-destructive--visited--hover: color-mix(in srgb, #8e0000 85%, #fff);
--color-destructive--visited--active: color-mix(in srgb, #8e0000 70%, #000);
--color-error: #ce0000;
--color-error--hover: color-mix(in srgb, #ce0000 85%, #fff);
--color-error--active: color-mix(in srgb, #ce0000 70%, #000);
--color-warning: #f57b50;
--color-success: #177860;
--color-notice: #f57b50;
--color-icon-error: #ce0000;
--color-icon-warning: #f57b50;
--color-icon-success: #449c1c;
--color-icon-notice: #f57b50;
--color-content-added: #177860;
--color-content-removed: #ce0000;
--filter-invert-icon: 0;
--filter-invert-primary-button-icon: 1;
--box-shadow-color-base: #a2a9b1;
--box-shadow-color-progressive--active: #233566;
--box-shadow-color-progressive--focus: #36c;
--box-shadow-color-progressive-selected: #36c;
--box-shadow-color-progressive-selected--hover: #3056a9;
--box-shadow-color-progressive-selected--active: #233566;
--box-shadow-color-destructive--focus: #36c;
--box-shadow-color-inverted: #fff;
--box-shadow-color-alpha-base: rgba(0, 0, 0, 0.06);
--box-shadow-color-transparent: transparent;
--mix-blend-mode-base: normal;
--mix-blend-mode-blend: lighten;
--background-color-base: #1a1a22;
--background-color-base-fixed: #1a1a22;
--background-color-neutral: #1a1a22;
--background-color-neutral-subtle: color-mix(in srgb, #1a1a22 95%, #fff);
--background-color-interactive: #1a1a22;
--background-color-interactive--hover: #2d2d50;
--background-color-interactive--active: color-mix(in srgb, #2d2d50 85%, #fff);
--background-color-interactive-subtle: color-mix(in srgb, #2d2d50 50%, transparent);
--background-color-interactive-subtle--hover: color-mix(in srgb, #2d2d50 70%, transparent);
--background-color-interactive-subtle--active: color-mix(in srgb, #2d2d50 85%, transparent);
--background-color-disabled: color-mix(in srgb, #1a1a22 70%, #808080);
--background-color-disabled-subtle: color-mix(in srgb, #1a1a22 85%, #808080);
--background-color-inverted: #fff;
--background-color-progressive: color-mix(in srgb, #1a1a22 90%, #42a2f1);
--background-color-progressive--hover: color-mix(in srgb, #1a1a22 80%, #42a2f1);
--background-color-progressive--active: color-mix(in srgb, #1a1a22 70%, #42a2f1);
--background-color-progressive--focus: color-mix(in srgb, #1a1a22 85%, #42a2f1);
--background-color-progressive-subtle: color-mix(in srgb, #1a1a22 95%, #42a2f1);
--background-color-progressive-subtle--hover: color-mix(in srgb, #1a1a22 90%, #42a2f1);
--background-color-progressive-subtle--active: color-mix(in srgb, #1a1a22 85%, #42a2f1);
--background-color-destructive: color-mix(in srgb, #1a1a22 90%, #ce0000);
--background-color-destructive--hover: color-mix(in srgb, #1a1a22 80%, #ce0000);
--background-color-destructive--active: color-mix(in srgb, #1a1a22 70%, #ce0000);
--background-color-destructive--focus: color-mix(in srgb, #1a1a22 85%, #ce0000);
--background-color-destructive-subtle: color-mix(in srgb, #1a1a22 95%, #ce0000);
--background-color-destructive-subtle--hover: color-mix(in srgb, #1a1a22 90%, #ce0000);
--background-color-destructive-subtle--active: color-mix(in srgb, #1a1a22 85%, #ce0000);
--background-color-error: color-mix(in srgb, #1a1a22 90%, #ce0000);
--background-color-error--hover: color-mix(in srgb, #1a1a22 80%, #ce0000);
--background-color-error--active: color-mix(in srgb, #1a1a22 70%, #ce0000);
--background-color-error-subtle: color-mix(in srgb, #1a1a22 95%, #ce0000);
--background-color-error-subtle--hover: color-mix(in srgb, #1a1a22 90%, #ce0000);
--background-color-error-subtle--active: color-mix(in srgb, #1a1a22 85%, #ce0000);
--background-color-warning-subtle: color-mix(in srgb, #1a1a22 95%, #f57b50);
--background-color-success-subtle: color-mix(in srgb, #1a1a22 95%, #177860);
--background-color-notice-subtle: color-mix(in srgb, #1a1a22 95%, #f57b50);
--background-color-content-added: color-mix(in srgb, #1a1a22 90%, #177860);
--background-color-content-removed: color-mix(in srgb, #1a1a22 90%, #ce0000);
--background-color-transparent: #1a1a22F0;
--background-color-backdrop-light: rgba(255, 255, 255, 0.65);
--background-color-backdrop-dark: rgba(0, 0, 0, 0.65);
--background-color-button-quiet--hover: rgba(0, 24, 73, 0.027);
--background-color-button-quiet--active: rgba(0, 24, 73, 0.082);
--background-color-input-binary--checked: #36c;
--background-color-tab-list-item-framed--hover: rgba(255, 255, 255, 0.3);
--background-color-tab-list-item-framed--active: rgba(255, 255, 255, 0.65);
--opacity-icon-base: 0.87;
--opacity-icon-base--hover: 0.74;
--opacity-icon-base--selected: 1;
--opacity-icon-base--disabled: 0.51;
--opacity-icon-placeholder: 0.51;
--opacity-icon-subtle: 0.67;
--border-image-base: url('/wiki/Special:Redirect/file/Wiki-border-kurva.png');
--border-color-base: #2b5cc9;
--border-color-subtle: color-mix(in srgb, #2b5cc9 50%, transparent);
--border-color-muted: color-mix(in srgb, #2b5cc9 30%, transparent);
--border-color-interactive: #2b5cc9;
--border-color-interactive--hover: color-mix(in srgb, #2b5cc9 85%, #fff);
--border-color-interactive--active: color-mix(in srgb, #2b5cc9 70%, #000);
--border-color-disabled: color-mix(in srgb, #2b5cc9 40%, #808080);
--border-color-inverted: #fff;
--border-color-inverted-fixed: #fff;
--border-color-progressive: #2b5cc9;
--border-color-progressive--hover: color-mix(in srgb, #2b5cc9 90%, #fff);
--border-color-progressive--active: color-mix(in srgb, #2b5cc9 80%, #000);
--border-color-progressive--focus: color-mix(in srgb, #2b5cc9 95%, #fff);
--border-color-destructive: color-mix(in srgb, #2b5cc9 70%, #ce0000);
--border-color-destructive--hover: color-mix(in srgb, #2b5cc9 60%, #ce0000);
--border-color-destructive--active: color-mix(in srgb, #2b5cc9 50%, #ce0000);
--border-color-destructive--focus: color-mix(in srgb, #2b5cc9 65%, #ce0000);
--border-color-error: color-mix(in srgb, #2b5cc9 70%, #ce0000);
--border-color-error--hover: color-mix(in srgb, #2b5cc9 60%, #ce0000);
--border-color-error--active: color-mix(in srgb, #2b5cc9 50%, #ce0000);
--border-color-warning: color-mix(in srgb, #2b5cc9 60%, #f57b50);
--border-color-success: color-mix(in srgb, #2b5cc9 60%, #177860);
--border-color-notice: color-mix(in srgb, #2b5cc9 60%, #f57b50);
--border-color-content-added: color-mix(in srgb, #2b5cc9 60%, #177860);
--border-color-content-removed: color-mix(in srgb, #2b5cc9 60%, #ce0000);
--border-color-transparent: transparent;
--border-color-divider: #a2a9b1;
--outline-color-progressive--focus: #36c;
--color-link-red: var(--color-destructive);
--color-link-red--hover: var(--color-destructive--hover);
--color-link-red--active: var(--color-destructive--active);
--color-link-red--focus: var(--color-destructive--focus);
--color-link-red--visited: var(--color-destructive--visited);
--color-link-red--visited--hover: var(--color-destructive--visited--hover);
--color-link-red--visited--active: var(--color-destructive--visited--active);
--accent-color-base: #36c;
--border-color-input--hover: var(--border-color-interactive);
--border-color-input-binary: var(--border-color-interactive);
--border-color-input-binary--hover: var(--border-color-progressive--hover);
--border-color-input-binary--active: var(--border-color-progressive--active);
--border-color-input-binary--focus: var(--border-color-progressive--focus);
--border-color-input-binary--checked: var(--border-color-progressive);
--color-base--subtle: #54595d;
}

/* ---------- Style login button ---------- */
#daedalus-user-menu-checkbox:hover {
background: #365fb8;
}

.pre-content h1, .content .mw-heading1, .content h1, .content .mw-heading2, .content h2 {
font-family: 'Daedalus', 'Outfit', 'Times', 'Source Serif Pro', serif;
}

:root body {
background-image: url(images/f/ff/Site-background-image.jpg);
background-size: cover;
background-position: bottom left;
background-repeat: no-repeat;
background-attachment: fixed;
}
.last-modified-bar {
display: none !important;
}
.mw-highlight {
background-color: #1a1a22;
}
.mw-footer {
background-image: url(/wiki/Special:Redirect/file/Site-footer-image.jpg);
background-position: 25% 20%;
background-size: cover;
position: relative;
border-top: 2px solid rgba(66, 162, 241, 0.3);
box-shadow:
inset 0 0 60px 20px rgba(0, 0, 0, 0.8),
inset 0 2px 40px 10px rgba(66, 162, 241, 0.1),
0 -10px 40px rgba(66, 162, 241, 0.15);
}

.mw-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg,
transparent 0%,
rgba(66, 162, 241, 0.4) 10%,
rgba(66, 162, 241, 0.7) 30%,
rgba(66, 162, 241, 0.9) 50%,
rgba(66, 162, 241, 0.7) 70%,
rgba(66, 162, 241, 0.4) 90%,
transparent 100%);
box-shadow: 0 0 15px rgba(66, 162, 241, 0.8);
animation: footer-scan 4s linear infinite;
}

@keyframes footer-scan {
0% { opacity: 0.6; }
50% { opacity: 1; }
100% { opacity: 0.6; }
}
.mw-heading1, h1 {
font-size: 2em;
}
#filetoc {
background-color: var(--background-color-base);
}
.mw-content-ltr.mw-highlight-lines pre, .mw-content-ltr.content .mw-highlight-lines pre {
padding-left: 3.5em;
box-shadow: inset 2.75em 0 0 var(--background-color-base);
}
.cdx-message--error {
background-color: var(--background-color-base);
border-color: var(--border-color-error, #f54739);
}
.editOptions {
background-color: var(--background-color-base);
color: var(--color-base);
border: 1px solid var(--border-color-subtle, #c8ccd1);
border-top: 0;
padding: 1em 1em 1.5em 1em;
margin-bottom: 2em;
}
.ace-tm .ace_gutter {
background: var(--background-color-base);
color: var(--color-base);
}

.ace-tm {
background-color: #FFFFFF80;
}

.overlay-enabled, .mw-body {
background-color: transparent;
}

.header-container.header-chrome {
background-color: transparent;
border: 0;
box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.08);
}

.header-container {
border-bottom: none;
padding: 0 16px;
}

#mw-mf-page-center {
width: 100%;
min-height: 100%;
position: relative;
background-color: transparent;
overflow: hidden;
}

@media screen and (min-width: 993.3px) {
.banner-container, .daedalus-anon-talk-message, .daedalus-header, .page-header-bar, .overlay-header, .content, .overlay-content, .content-unstyled, .pre-content, .post-content, #mw-content-text > form {
margin-left: auto;
margin-right: auto;
width: 90%;
max-width: 1900px;
}
}

.search-box .search {
color: var(--color-base);
}

.content .mw-parser-output .mw-editsection .cdx-button {
font-size: 1rem;
display: none;
}

.wikitable > tr > th, .wikitable > * > tr > th {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.15) 0%, rgba(76, 87, 181, 0.1) 100%),
var(--background-color-transparent);
color: var(--color-base);
text-align: center;
font-weight: bold;
position: relative;
padding: 0.75em 0.5em;
border-bottom: 1px solid rgba(66, 162, 241, 0.3) !important;
text-shadow: 0 0 10px rgba(66, 162, 241, 0.5);
}

.wikitable > tr > th::after, .wikitable > * > tr > th::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.6) 50%, transparent);
box-shadow: 0 0 6px rgba(66, 162, 241, 0.4);
}

.mw-search-createlink {
display: block !important;
}

/* this is a comment to show how fast this thing is */

.wikitable {
background-color: var(--background-color-transparent);
color: var(--color-base, #202122);
margin: 1em 0;
border: 1px solid var(--border-color-base, #a2a9b1);
border-collapse: collapse;
}

.content .mw-parser-output h2 {
image-rendering: pixelated !important;
text-rendering: geometricPrecision !important;
text-shadow:
0 0.06em 0 color-mix(in srgb, currentColor 50%, black), 0 0.12em 0 color-mix(in srgb, currentColor 10%, black), 0 0 0.2em currentColor;
font-size: 3.3em;
font-weight: normal;
}

.content, .pre-content {
background: var(--background-color-transparent);
box-shadow: 0 0 30px #1a1a22;
padding: 0 5em;
}

.header-container {
background: #1a1a22D0 !important;
padding: 0 0.5em !important;
}

.content .mw-parser-output .mw-heading, .content .mw-parser-output .section-heading {
display: block;
min-width: fit-content;
}

.content .mw-parser-output h2 {
flex-grow: 0;
flex-basis: 0;
}

.footer-section > ul {
width: 30%;
columns: 2;
column-gap: 20px;
max-height: 200px;
overflow-y: auto;
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.08) 0%, transparent 50%, rgba(76, 87, 181, 0.08) 100%),
#1a1a22C0;
box-shadow:
0 0 30px rgba(0, 0, 0, 0.8),
inset 0 0 30px 5px rgba(66, 162, 241, 0.08),
0 0 0 1px rgba(66, 162, 241, 0.25);
padding: 0.75em;
border-radius: 8px;
display: inline-block;
margin-bottom: 2.5em;
position: relative;
backdrop-filter: blur(5px);
}

.footer-section > ul::before {
content: '';
position: absolute;
top: 0;
left: 10%;
right: 10%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.6), transparent);
box-shadow: 0 0 8px rgba(66, 162, 241, 0.5);
}

.footer-section > ul > li {
font-weight: bold;
text-shadow:
0 0 15px rgba(66, 162, 241, 0.6),
0 0 8px rgba(66, 162, 241, 0.4),
0 2px 4px rgba(0, 0, 0, 0.8);
transition: all 0.3s ease;
}

.footer-section > ul > li:hover {
text-shadow:
0 0 20px rgba(66, 162, 241, 0.9),
0 0 12px rgba(66, 162, 241, 0.6),
0 2px 4px rgba(0, 0, 0, 0.8);
transform: translateX(3px);
}

.mw-footer > .post-content > * {
text-align: center;
}

.toc {
display: none;
}

table.wikitable tr:nth-child(2n) {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.03) 0%, transparent 100%),
color-mix(in srgb, #1a1a22, #111111);
}

table.wikitable tr:nth-child(2n+1) {
background:
linear-gradient(135deg, rgba(76, 87, 181, 0.03) 0%, transparent 100%),
#1a1a22;
}

table.wikitable {
border-image-source: url("/wiki/Special:Redirect/file/Wiki-border-kurva.png");
border-image-slice: 6;
border-image-width: 6px;
border-image-repeat: repeat repeat;
border-collapse: separate;
padding: 0.5em;
box-shadow:
0 0 30px 5px rgba(0, 0, 0, 0.6),
inset 0 0 40px 8px rgba(66, 162, 241, 0.05),
0 0 0 1px rgba(66, 162, 241, 0.15);
position: relative;
}

table.wikitable::before {
content: '';
position: absolute;
top: 0;
left: 10%;
right: 10%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(66, 162, 241, 0.5), transparent);
box-shadow: 0 0 8px rgba(66, 162, 241, 0.4);
z-index: 1;
}

table.wikitable > caption {
font-family: 'Daedalus';
font-size: 2em;
border-radius: 20px 20px 0 0;
padding-left: 0.5em;
}

table.wikitable > tbody > tr > td > a {
font-weight: bold;
}

span.mw-page-title-main {
font-size: 2em;
}

#bodyContent {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-border-nexus.png);
border-image-slice: 11;
border-image-width: 20px;
border-image-repeat: stretch stretch;
border-image-outset: 10px;
padding: 5em 3em 5em 3em;
box-shadow: inset 0 0 30px lightblue;
}

.search-box {
margin-left: auto;
margin-right: 1em;
}

.search-box .search {
border: 1px solid var(--color-visited);
border-radius: 10px;
}

input.search:hover {
background-color: color-mix(in srgb, #1a1a22 70%, #fff 10%);
}
.cdx-button:enabled.cdx-button--weight-quiet:hover, .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet:hover {
background-color: var(--background-color-interactive-subtle--hover, #eaecf0);
mix-blend-mode: var(--mix-blend-mode-blend, lighten);
}

.label[for="page-actions-overflow-checkbox"]:hover {
background-color: var(--background-color-interactive-subtle--hover, #eaecf0);
mix-blend-mode: var(--mix-blend-mode-blend, lighten);
}

.page-actions-menu__list-item:last-child {
margin-right: 0 !important;
}

.toggle-list__checkbox {
position: absolute;
z-index: 1;
opacity: 0;
top: 0;
left: 0;
height: 100%;
width: 100% !important;
margin: 0;
}

.cdx-button .daedalus-icon + span:not(:empty) {
margin-left: 0;
}

div.post-content > a[role='button'] {
display:none;
}

body {
font-family: 'Outfit';
}

.footer-content > ul > li > a {
font-size: 1.5em;
text-shadow:
0 0 10px rgba(66, 162, 241, 0.5),
0 2px 4px rgba(0, 0, 0, 0.8);
transition: all 0.3s ease;
}

.footer-content > ul > li > a:hover {
text-shadow:
0 0 18px rgba(66, 162, 241, 0.8),
0 0 10px rgba(66, 162, 241, 0.6),
0 2px 4px rgba(0, 0, 0, 0.8);
transform: translateY(-2px);
}

div.footer-content::before {
background-image: url(/wiki/Special:Redirect/file/Site-logo.png);
filter: drop-shadow(0 0 20px rgba(66, 162, 241, 0.6));
}

.footer-content > ul.footer-places {
background:
linear-gradient(135deg, rgba(66, 162, 241, 0.1) 0%, transparent 50%, rgba(76, 87, 181, 0.1) 100%),
var(--background-color-transparent);
box-shadow:
inset 0 0 30px 8px rgba(66, 162, 241, 0.12),
0 0 25px 8px rgba(66, 162, 241, 0.2),
0 0 0 1px rgba(66, 162, 241, 0.3);
margin: 1em 1em;
border-radius: 8px;
padding: 0.75em;
position: relative;
font-weight: bold;
margin-left: auto;
margin-right: auto;
}

.footer-places {
width: fit-content;
}

.footer-content > ul.footer-places::before {
content: '';
position: absolute;
top: 0;
left: 5%;
right: 5%;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(66, 162, 241, 0.5) 20%,
rgba(66, 162, 241, 0.8) 50%,
rgba(66, 162, 241, 0.5) 80%,
transparent);
box-shadow: 0 0 10px rgba(66, 162, 241, 0.6);
}

.item-infobox > div.druid-section-container > div.druid-row-Unholy {
display: none;
}
.item-infobox > div.druid-section-container > div.druid-row-Voidbound {
display: none;
}
.item-infobox > div.druid-section-container > div.druid-row-Bloodshot {
display: none;
}
.item-infobox > div.druid-section-container > div.druid-row-Royal {
display: none;
}
.item-infobox > div.druid-section-container > div.druid-row-Gilded {
display: none;
}
.item-infobox > div.druid-section-container > div.druid-row-Irradiated {
display: none;
}
.item-infobox > div.druid-section-container > div.druid-row-Halloween {
display: none;
}
.item-infobox > div.druid-section-container > div.druid-row-Christmas {
display: none;
}
.item-infobox > div.druid-section-container > div.druid-row-Valentine {
display: none;
}

/* UNHOLY Template Specific Colors & Border Image. */
.item-infobox:has(.druid-row-Unholy .druid-toggleable-data.focused:not(.druid-toggleable-data-empty)) {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemUnholyBorder.png);
.druid-title, .druid-main-images-label {
color: #8d9f97;
}
div.druid-data-Desc, div.druid-row-Desc > .druid-data {
color: #d0e8e4;
}
}
/* VOIDBOUND Template Specific Colors & Border Image. */
.item-infobox:has(.druid-row-Voidbound .druid-toggleable-data.focused:not(.druid-toggleable-data-empty)) {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemVoidboundBorder.png);
.druid-title, .druid-main-images-label {
color: #fc7cf1;
}
div.druid-data-Desc, div.druid-row-Desc > .druid-data {
color: #e955fc;
}
}
/* BLOODSHOT Template Specific Colors & Border Image. */
.item-infobox:has(.druid-row-Bloodshot .druid-toggleable-data.focused:not(.druid-toggleable-data-empty)) {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemBloodshotBorder.png);
.druid-title, .druid-main-images-label {
color: #c20f0f;
}
div.druid-data-Desc, div.druid-row-Desc > .druid-data {
color: #fa8686;
}
}
/* ROYAL Template Specific Colors & Border Image. */
.item-infobox:has(.druid-row-Royal .druid-toggleable-data.focused:not(.druid-toggleable-data-empty)) {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemRoyalBorder.png);
.druid-title, .druid-main-images-label {
color: #cd08cd;
}
div.druid-data-Desc, div.druid-row-Desc > .druid-data {
color: #fcb7fc;
}
}
/* GILDED Template Specific Colors & Border Image. */
.item-infobox:has(.druid-row-Gilded .druid-toggleable-data.focused:not(.druid-toggleable-data-empty)) {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemGildedBorder.png);
.druid-title, .druid-main-images-label {
color: #db7400;
}
div.druid-data-Desc, div.druid-row-Desc > .druid-data {
color: #eac278;
}
}
/* IRRADIATED Template Specific Colors & Border Image. */
.item-infobox:has(.druid-row-Irradiated .druid-toggleable-data.focused:not(.druid-toggleable-data-empty)) {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemIrradiatedBorder.png);
.druid-title, .druid-main-images-label {
color: #15cb15;
}
div.druid-data-Desc, div.druid-row-Desc > .druid-data {
color: #cef46a;
}
}
/* HALLOWEEN Template Specific Colors & Border Image. */
.item-infobox:has(.druid-row-Halloween .druid-toggleable-data.focused:not(.druid-toggleable-data-empty)) {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemHalloweenBorder.png);
.druid-title, .druid-main-images-label {
color: #d18d07;
}
div.druid-data-Desc, div.druid-row-Desc > .druid-data {
color: #f4ad21;
}
}
/* CHRISTMAS Template Specific Colors & Border Image. */
.item-infobox:has(.druid-row-Christmas .druid-toggleable-data.focused:not(.druid-toggleable-data-empty)) {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemChristmasBorder.png);
.druid-title, .druid-main-images-label {
color: #91efd6;
}
div.druid-data-Desc, div.druid-row-Desc > .druid-data {
color: #c9f4f5;
}
}
/* VALENTINE Template Specific Colors & Border Image. */
.item-infobox:has(.druid-row-Valentine .druid-toggleable-data.focused:not(.druid-toggleable-data-empty)) {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemValentineBorder.png);
.druid-title, .druid-main-images-label {
color: #f16593;
}
div.druid-data-Desc, div.druid-row-Desc > .druid-data {
color: #fcb5cd;
}
}

/* Template Specific Colors & Border Image.
.item-infobox:has(> div.druid-section-container > div.druid-row-) {
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemBorder.png);
.druid-title {
color: #;
}
.druid-label {
color: #;
}
div.druid-data-Desc {
color: #;
}
}
*/

/* Lots of color mixing here, meant to apply to ANY item infobox */
.item-infobox {
border-style: solid;
border-image-slice: 9 63;
border-image-width: 25em 154em;
border-image-outset: 0;
border-image-repeat: stretch;
.druid-main-images-label.focused {
background: color-mix(in srgb, currentColor 25%, transparent);
box-shadow: 0 0 5px currentColor;
}
.druid-main-images-label {
background: color-mix(in srgb, currentColor 10%, transparent);
font-size: 2em;

font-weight: bold;
font-family: "Daedalus", sans-serif;
text-shadow: 0 2px color-mix(in srgb, currentColor 50%, black),
0 4px color-mix(in srgb, currentColor 30%, black),
0 6px color-mix(in srgb, currentColor 10%, black);
line-height: 1em;
padding-bottom: 0.15em;
}
.druid-main-images-label {
outline: 1px solid currentColor;
}
.druid-label {
text-align: left;
width: auto;
max-width: 40%;
color: #fcfc54;
}
/* the single-rarity selectors above match .druid-toggleable-data.focused:not(.druid-toggleable-data-empty),
so both the tabbed (image,tab) and single-image (no comma) cases get the rarity border. */
div.druid-data-Desc, div.druid-row-Desc > .druid-data {
background-color: color-mix(in srgb, currentColor 43.62%, transparent);
text-shadow: 2px 2px color-mix(in srgb, currentColor 30%, black);
font-style: italic;
margin-left: 0;
margin-right: 0;
padding: 0.6em;
font-weight: bold;
width: 100%;
box-sizing: border-box; /* keep padding inside 100% so the panel never bleeds over the border */
}
.druid-label-Damage + .druid-data {
color: #fc5454;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Shots + .druid-data {
color: #54fc54;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Cooldown + .druid-data {
color: #fc54fc;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Pierce + .druid-data {
color: #00a800;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Range + .druid-data {
color: #54fc54;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Velocity + .druid-data {
color: #00a8a8;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Attack + .druid-data {
color: #fc5454;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Defense + .druid-data {
color: #5496fc;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Speed + .druid-data {
color: #fcfc54;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Vitality + .druid-data {
color: #54fc9c;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Health + .druid-data {
color: #fc54a8;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Evasion + .druid-data {
color: #54d4fc;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Healing + .druid-data {
color: #a8fca8;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Slashes + .druid-data {
color: #fca854;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Beams + .druid-data {
color: #54fcfc;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-label-Critical.Chance + .druid-data,
.druid-label-Critical + .druid-data {
color: #fc9c54;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}

.druid-row-Ability > .druid-data {
color: #54fc54;
text-shadow: 1px 1px color-mix(in srgb, currentColor 30%, transparent);
}
.druid-row {
background-color: rgba(0, 0, 0, 0.4362);
border-radius: 4px;
}
.druid-row-Desc {
background: none;
}
.druid-title {
text-shadow: 0 3px color-mix(in srgb, currentColor 50%, black),
0 6px color-mix(in srgb, currentColor 30%, black),
0 9px color-mix(in srgb, currentColor 10%, black);
}
}

.post-content {
display: flow-root;
margin-left: auto;
margin-right: auto;
width: 100%;
}

/* ============================================================
SHINY animated banner.
============================================================ */
.shiny-frame .item-infobox,
.item-infobox:has(.druid-toggleable-data[data-druid-tab-key="Shiny"].focused) {
position: relative;
border-image-source: url(/wiki/Special:Redirect/file/Wiki-ItemShinyBorder.gif) !important;
--shiny-band-inset: 0px; /* horizontal inset so the bands clear the corner art */
--shiny-d: 0s; /* per-item start offset, set by :nth-of-type below */

/* ---- Static shiny title + description (frame stays animated) ---- */
div.druid-data-Desc, div.druid-row-Desc > .druid-data {
background:
linear-gradient(135deg, rgba(126,232,250,.14), rgba(238,192,255,.10), rgba(255,217,122,.14)),
rgba(0,0,0,.5) !important;
color: #e7f2ff !important;
}

.druid-title, .druid-main-images-label {
background: linear-gradient(135deg, #7ee8fa 0%, #eec0ff 40%, #ffd97a 75%, #7ee8fa 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
text-shadow: none !important;
filter: drop-shadow(0 2px rgba(0, 0, 0, .6));
}

}
.shiny-frame .item-infobox::before,
.shiny-frame .item-infobox::after,
.item-infobox:has(.druid-toggleable-data[data-druid-tab-key="Shiny"].focused)::before,
.item-infobox:has(.druid-toggleable-data[data-druid-tab-key="Shiny"].focused)::after {
content: "";
position: absolute;
left: var(--shiny-band-inset);
right: var(--shiny-band-inset);
height: min(340px, 50%); /* one sprite frame tall; never reaches past mid-box */
background-repeat: repeat-x; /* image set per-item by .shiny-band-N below */
background-position: left top;
background-size: auto; /* native px → true 1:1, tiles on X only */
image-rendering: pixelated;
pointer-events: none;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
z-index: 5;
animation: shiny-band-steps 2.2s steps(12) infinite;
}
.shiny-frame .item-infobox::before,
.item-infobox:has(.druid-toggleable-data[data-druid-tab-key="Shiny"].focused)::before {
top: 0;
animation-delay: var(--shiny-d);
}
.shiny-frame .item-infobox::after,
.item-infobox:has(.druid-toggleable-data[data-druid-tab-key="Shiny"].focused)::after {
content: none; /* bottom band off — the box's bottom is text (Stats/Info), no open space for stars */
}
@keyframes shiny-band-steps {
to { background-position-y: -4080px; } /* 12 frames × 340px */
}
/* one of 10 star-band layouts per item; the module hashes the item name to a class */
.item-infobox.shiny-band-1::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemShinyBand1.png); }
.item-infobox.shiny-band-2::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemShinyBand2.png); }
.item-infobox.shiny-band-3::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemShinyBand3.png); }
.item-infobox.shiny-band-4::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemShinyBand4.png); }
.item-infobox.shiny-band-5::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemShinyBand5.png); }
.item-infobox.shiny-band-6::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemShinyBand6.png); }
.item-infobox.shiny-band-7::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemShinyBand7.png); }
.item-infobox.shiny-band-8::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemShinyBand8.png); }
.item-infobox.shiny-band-9::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemShinyBand9.png); }
.item-infobox.shiny-band-10::before { background-image: url(/wiki/Special:Redirect/file/Wiki-ItemShinyBand10.png); }
/* stagger the start frame per item so no two bands look alike */
.shiny-frame .item-infobox:nth-of-type(2n) { --shiny-d: -0.2s; }
.shiny-frame .item-infobox:nth-of-type(3n) { --shiny-d: -0.5s; }
.shiny-frame .item-infobox:nth-of-type(4n) { --shiny-d: -0.8s; }
.shiny-frame .item-infobox:nth-of-type(5n) { --shiny-d: -1.0s; }
.shiny-frame .item-infobox:nth-of-type(7n) { --shiny-d: -0.35s; }

/* ============================================================
MOBILE LAYOUT FIXES
The base content paddings (.content: 0 5em; #bodyContent: 5em 3em)
are desktop-scale. On a phone they nest and leave only a sliver of
reading width. Scale them down below the wide-layout breakpoint
(the 993.3px rule above is the only other width control here).
============================================================ */
@media screen and (max-width: 992px) {
.content,
.pre-content {
padding-left: 1.5em;
padding-right: 1.5em;
}
#bodyContent {
padding: 2.5em 1.25em;
border-image-outset: 4px;
}
}

@media screen and (max-width: 720px) {
.content,
.pre-content {
padding-left: 0.4em;
padding-right: 0.4em;
box-shadow: none;
}
/* #bodyContent frame + padding are flattened in
MediaWiki:Common.css → "MOBILE — FLATTEN DECORATION" block */
}

File:Wiki-ItemShinyBand9.png

2026-07-01T21:09:02Z

Willow:

== Licensing ==
{{License|game}}

File:Wiki-ItemShinyBand8.png

2026-07-01T21:09:02Z

Willow:

== Licensing ==
{{License|game}}

File:Wiki-ItemShinyBand7.png

2026-07-01T21:09:02Z

Willow:

== Licensing ==
{{License|game}}

File:Wiki-ItemShinyBand6.png

2026-07-01T21:09:02Z

Willow:

== Licensing ==
{{License|game}}

File:Wiki-ItemShinyBand5.png

2026-07-01T21:09:01Z

Willow:

== Licensing ==
{{License|game}}

File:Wiki-ItemShinyBand4.png

2026-07-01T21:09:01Z

Willow:

== Licensing ==
{{License|game}}

File:Wiki-ItemShinyBand3.png

2026-07-01T21:09:01Z

Willow:

== Licensing ==
{{License|game}}

File:Wiki-ItemShinyBand2.png

2026-07-01T21:09:01Z

Willow:

== Licensing ==
{{License|game}}

File:Wiki-ItemShinyBand1.png

2026-07-01T21:09:01Z

Willow:

== Licensing ==
{{License|game}}

File:Wiki-ItemShinyBand10.png

2026-07-01T21:09:00Z

Willow:

== Licensing ==
{{License|game}}

Module:Infobox

2026-07-01T21:04:37Z

Willow: automation

-- version 0.1.7

--------------------------------------
-- User settings, you can modify these
--------------------------------------

-- if you want to not always use divs in your wiki (as opposed to tables), you can change this default
-- just remember to change it back each time you update from the main "branch" on the support wiki!
-- you can also control it per infobox with `|useDivs=yes` or `|useDivs=no`
local USE_DIVS = true -- `false` or `true`

-- default value to show if a param is missing in some but not all tabs.
-- set to `nil` (not in quotes) to remove such rows altogether in the tabs where they're missing
local TABBED_NONEXIST = nil -- `''` or `nil` or `'N/A'` etc. Don't put nil in quotes.

---------------------------------------------------------------------------
-- Do not modify anything below this line unless you know what you're doing
---------------------------------------------------------------------------

local h = {}
local p = {}
local hooks = {}

function p.arraymap(frame)
-- a lua implementation of Page Forms' arraymap
local args = h.overwrite()
local items = h.split(args[1], args[2] or ',')
for i, item in ipairs(items) do
items[i] = args[4]:gsub(args[3], item)
end
return table.concat(items, args[5] or ',')
end

function p.preprocess(frame)
return frame:preprocess(frame.args[1] or frame:getParent().args[1])
end

function p.main(frame)
h.registerHooks()
h.increment()
local args = h.overwrite()
local sep = args.sep or ','
h.castArgs(args, sep)
if h.castBool(args.setmainimage or 'yes') then
h.setMainImage(args.images[1])
end
-- suggest to use HIDDENCAT here; will be used for maintenance & gadget imports
return h.makeInfobox(args, sep), '[[Category:Pages with DRUID infoboxes]]'
end

function h.registerHooks()
if not mw.title.new('Module:Infobox/Hooks').exists then return end
hooks = require('Module:Infobox/Hooks')
end

function h.runHook(key, ...)
if hooks[key] then
hooks[key](...)
end
end

function h.increment()
-- optional use of VariablesLua for better compatibility
local VariablesLua = mw.ext.VariablesLua
if VariablesLua == nil then
local res
-- try to fall back to normal Variables
res, h.counter = pcall(
function()
return mw.getCurrentFrame():callParserFunction('#var', {'DRUID_INFOBOX_ID', 0}) + 1
end
)
if res then
mw.getCurrentFrame():callParserFunction('#vardefine', {'DRUID_INFOBOX_ID', h.counter})
else
-- else use a random number so at least there's some unique id
h.counter = math.random(100000000000000000) -- random integer
end
else
h.counter = VariablesLua.var('DRUID_INFOBOX_ID', 0) + 1
VariablesLua.vardefine('DRUID_INFOBOX_ID', h.counter)
end
end

function h.castArgs(args, sep)
h.runHook('onCastArgsStart', args, sep, args.kind)
args.tabs = h.split(args.tabs or args.image_labels, sep)
args.images = h.getImages(args, sep)
h.addShinyTab(args)
args.sections = h.split(args.sections, sep)
for _, section in ipairs(args.sections) do
if h.castBool(args[section .. '_isdata']) then
args[section .. 'Data'] = args[section]
args[section] = section .. 'Data'
args[section .. 'Data_nolabel'] = 'true' -- will be cast later
end
args[section] = h.split(args[section], sep)
args[section .. '_tabs'] = h.split(args[section .. '_tabs'], sep)
if #args.tabs > 0 and #args[section .. '_tabs'] > 0 then
error(('You cannot specify |tabs= and |%s= at the same time, please pick one'):format(section .. '_tabs'))
end
end
if args.useDivs then
USE_DIVS = h.castBool(args.useDivs)
end
-- this would be in the outer scope, but we're hiding it
h.entityType = USE_DIVS and 'div' or 'table' -- key of h.htmlEntities
h.runHook('onCastArgsEnd', args, sep, args.kind)
end

function h.getImages(args, sep)
if args.image and not args.images then
args.images = args.image
end
if args.images then
return h.split(args.images, sep)
end
if not args.tabs then return {} end
local ret = {}
for _, key in ipairs(args.tabs) do
if args[key .. '_image'] then
ret[#ret+1] = args[key .. '_image']
end
end
return ret
end

function h.setMainImage(file)
if h.counter > 1 then return end
if not file then return end
local fileText = file:gsub('.-:', '')
fileText = fileText:gsub('^([^|%]]+).*', '%1')
-- setmainimage is guaranteed to exist on wiki.gg but may not exist on other wikis
-- it's not a crucial piece of functionality so we'll fail silently if it doesn't exist
pcall(function() mw.getCurrentFrame():callParserFunction{
name = '#setmainimage',
args = { fileText },
} end)
end

function h.makeInfobox(args, sep)
local out = mw.html.create(h.getTag('container'))
:addClass('druid-infobox')
:addClass('druid-container')
:addClass('noexcerpt')
:addClass(args.class) -- warning: class can be nil, don't concat anything
:attr('id', args.id or ('druid-container-' .. h.counter))
local bandVariant = h.shinyBandVariant(args)
if bandVariant then out:addClass('shiny-band-' .. bandVariant) end
h.runHook('onMakeOutputStart', out, args)
if args.kind then out:addClass('druid-container-' .. h.escape(args.kind)) end
h.printTitle(out, args)
h.printImages(out, args.images, args)
for _, section in ipairs(args.sections) do
-- cannot begin tagging here because we don't know if any applicable args are present
local cols = args[section .. '_columns']
local makeSection = cols and h.makeGridSection or h.makeSection
out:node(makeSection(section, args[section], args, tonumber(cols)))
end
h.runHook('onMakeOutputEnd', out, args)
-- category for gadget loading
return out, '[[Category:Pages with DRUID infoboxes]]'
end

function h.printTitle(out, args)
local tabs = args.tabs
if not tabs or #tabs == 0 then
h.printSimpleTitle(out, args)
return
end
if not h.hasComplexData('title', tabs, args) then
h.printSimpleTitle(out, args)
return
end
local node = h.printTitleWrapper(out)
h.printTabbedDataItem(node, 'title', tabs, args)
end

function h.printSimpleTitle(out, args)
if args.title then
local node = h.printTitleWrapper(out)
node:wikitext(args.title)
end
end

function h.printTitleWrapper(out)
return out:tag(h.getTag('titleOuter'))
:tag(h.getTag('titleInner'))
:addClass('druid-title')
:attr('colspan', 2)
end

function h.printTabbedDataItem(node, item, tabs, args)
-- hasData isn't used in the title case but we will need to track this
-- when we're printing section data later on
-- so we'll just track it always
local hasData = false
for i, label in ipairs(tabs) do
local div = node:tag('div')
:addClass('druid-toggleable-data')
:addClass('druid-toggleable')
:attr('data-druid', h.counter .. '-' .. i)
:attr('data-druid-tab-key', label)
if h.getTabbedContent(args, label, item) then
hasData = true
div:wikitext('\n\n' .. h.getTabbedContent(args, label, item))
div:addClass('druid-toggleable-data-nonempty')
else
div:addClass('druid-toggleable-data-empty')
end

if i == 1 then div:addClass('focused') end
end
return hasData
end

function h.getShinyImage(imageStr)
local fileName = imageStr:match("File:([^|%]]+)")
if not fileName then return nil end
if not fileName:match("^Ut%-") then return nil end
local shinyTitle = mw.title.new('File:Shiny' .. fileName)
if shinyTitle and shinyTitle.exists then
return imageStr:gsub('File:', 'File:Shiny', 1)
end
return nil
end

function h.shinyBandVariant(args)
-- pick one of 10 star-band variants, keyed to the untiered image name so it's
-- stable per item (same on the item page and in the Shinies catalog)
local img = args.images and args.images[1]
if not img then return nil end
local name = img:match("File:([^|%]]+)") or img
name = name:gsub("^Shiny", "") -- catalog uses ShinyUt-…; key off the base Ut- name
if not name:match("^Ut%-") then return nil end
local sum = 0
for i = 1, #name do sum = sum + name:byte(i) end
return (sum % 10) + 1
end

function h.addShinyTab(args)
if #args.images ~= 1 or #args.tabs ~= 0 then return end
local shiny = h.getShinyImage(args.images[1])
if not shiny then return end
args.images[2] = shiny
args.tabs = { 'Untiered', 'Shiny' }
end

function h.getWornImage(imageStr)
local fileName = imageStr:match("File:([^|%]]+)")
if not fileName then return nil end

local name, ext = fileName:match("^(.-)%.([^%.]+)$")
if not name then return nil end

local wornFileName = name .. "Worn." .. ext
local wornTitle = mw.title.new('File:' .. wornFileName)

if wornTitle and wornTitle.exists then
return imageStr:gsub(fileName, wornFileName)
end
return nil
end

function h.printImages(out, images, args)
if #images == 0 and #args.tabs == 0 then return end

local td = out:tag(h.getTag('section'))
:addClass('druid-section-container')
:tag(h.getTag('cell'))
:attr('colspan', 2)

local tabs = args.tabs
local tabTexts = h.getImageTabTexts(tabs, images, args)
h.printTabs(td, tabs, tabTexts, false, args)

if #images == 0 then return end

td:addClass('druid-main-images')
local imagesContainer = td:tag('div')
:addClass('druid-main-images-files')

for i, image in ipairs(images) do
local container = imagesContainer:tag('div')
:addClass('druid-main-images-file')
:addClass('druid-toggleable')
:attr('data-druid', h.counter .. '-' .. i)

local wornImage = h.getWornImage(image)
if wornImage then
container:addClass('has-worn-variant')
container:tag('div'):addClass('image-base'):wikitext(image)
container:tag('div'):addClass('image-worn'):wikitext(wornImage)
container:tag('div'):addClass('worn-toggle-button'):wikitext('Show Worn')
else
container:wikitext(image)
end

if i == 1 then container:addClass('focused') end
end
end

function h.getImageTabTexts(tabs, images, args)
if #tabs == 0 and #images <= 1 then return {} end
local texts = {}
local i = 1
while images[i] or tabs[i] do
if tabs[i] then
texts[i] = args[tabs[i] .. '_label'] or tabs[i]
else
texts[i] = '[[Category:Infoboxes missing image labels]]Image ' .. i
end
i = i + 1
end
return texts
end

function h.printTabs(td, tabs, texts, isSection, args)
if #texts == 0 then return end
local container = td:tag('div')
:addClass('druid-main-images-labels')
:addClass('druid-tabs')
if isSection then
container:addClass('druid-section-tabs')
end
for i, item in ipairs(tabs) do
local label = container:tag('div')
:addClass('druid-main-images-label')
:addClass('druid-tab')
:addClass('druid-toggleable')
:attr('data-druid', h.counter .. '-' .. i)
:wikitext(texts[i])
:attr('data-druid-tab-key', item)
if isSection then
label:addClass('druid-section-tab')
else
label:addClass('druid-title-tab')
end
if i == 1 then
label:addClass('focused')
end
-- this can be null, don't concat anything here
label:addClass(args[item .. '_class'])
end
end

function h.makeGridSection(section, sectionFields, args, numCols)
local numItems = h.countItems(sectionFields, section, args)
if numItems == 0 then return end
local node = mw.html.create(h.getTag('section'))
:addClass('druid-section-container')
h.printSectionHeader(node, section, args)
h.printSectionTabs(node, section, args)
local tr = node:tag(h.getTag('row'))
:attr('data-druid-section-row', h.escape(section))
if args[section .. '_collapsed'] then
tr:addClass('druid-collapsed')
end
local grid = tr:tag(h.getTag('cell'))
:attr('colspan', 2)
:addClass('druid-grid-section')
:addClass('druid-grid-section-' .. h.escape(section))
:addClass(args[section .. '_class']) -- warning: class can be nil, don't concat anything
:tag('div')
:addClass('druid-grid')
local row, col, i = 1, 1, 1
local sizeOfLastRow = numItems % numCols
local lcm = h.getNumGridCols(numItems, sizeOfLastRow, numCols)
grid:css('grid-template-columns', ('repeat(%s, 1fr)'):format(lcm))
local size = lcm / numCols
for _, item in ipairs(sectionFields) do
local node = mw.html.create('div')
local shouldPrint = h.printData(node, item, section, args)
if shouldPrint then
if i == numItems - sizeOfLastRow + 1 then
size = lcm / sizeOfLastRow
end
i = i + 1
local gStart = (col - 1) * size + 1
local gEnd = (col) * size + 1
local itemContainer = grid:tag('div')
:addClass('druid-grid-item')
:addClass('druid-grid-item-' .. h.escape(item))
:addClass(args[item .. '_class']) -- warning: class can be nil, don't concat anything
:css('grid-column', ('%s / %s'):format(gStart, gEnd))
:css('grid-row', row)
if not h.castBool(args[item .. '_nolabel']) then
h.printLabel(itemContainer:tag('div'), item, args)
end
itemContainer:node(node)
if col == numCols then
row = row + 1
col = 1
else
col = col + 1
end
end
end
return node
end

function h.makeSection(section, sectionFields, args)
if section == '' then return end -- bruteforce fix for trailing commas
local shouldPrint = false
local container = mw.html.create(h.getTag('section'))
:addClass('druid-section-container')
:addClass(args[section .. '_class']) -- warning: class can be nil, don't concat anything
h.printSectionHeader(container, section, args)
h.printSectionTabs(container, section, args)
for _, item in ipairs(sectionFields) do
local node = mw.html.create(h.getTag('cell'))
local shouldPrintItem = h.printData(node, item, section, args)
if shouldPrintItem then
shouldPrint = true
local tr = container:tag(h.getTag('row'))
:addClass('druid-row')
:addClass('druid-row-' .. h.escape(item))
:addClass(args[item .. '_class']) -- warning: class can be nil, don't concat anything
:attr('data-druid-section-row', h.escape(section))
if args[section .. '_collapsed'] then
tr:addClass('druid-collapsed')
end
if h.castBool(args[item .. '_wide']) or h.castBool(args[item .. '_nolabel']) then
node
:attr('colspan', 2)
:addClass('druid-data-wide')
else
h.printLabel(tr:tag(h.getTag('label')), item, args)
end
tr:node(node)
end
end
if not shouldPrint then return nil end
return container
end

function h.countItems(sectionFields, section, args)
local numItems = 0
for _, v in ipairs(sectionFields) do
-- we aren't actually printing here, but we're finding out if we should print anything
-- because we need the count of columns before we print anything in grid data
if h.printData(mw.html.create(), v, section, args) then
numItems = numItems + 1
end
end
return numItems
end

function h.getNumGridCols(numItems, sizeOfLastRow, numCols)
if not numCols then return numItems, 1 end
if numItems < numCols then return numItems, 1 end
if sizeOfLastRow == 0 then
return numCols, 1
end
local a, b = sizeOfLastRow, numCols
while b ~= 0 do
a, b = b, a % b
end
local lcm = sizeOfLastRow * numCols / a
return lcm
end

function h.printLabel(node, item, args)
return node
:addClass('druid-label')
:addClass('druid-label-' .. h.escape(item))
:wikitext(args[item .. '_display'] or args[item .. '_label'] or item)
end

function h.printData(node, item, section, args)
local hasData = false
local sectionTabs = args[section .. '_tabs']
local tabs = args.tabs
if sectionTabs and #sectionTabs > 0 then
tabs = sectionTabs
end

if not tabs or #tabs == 0 then
return h.printSimpleData(node, item, args)
end

if h.hasComplexData(item, tabs, args) or args[item] then
hasData = h.printTabbedDataItem(node, item, tabs, args)
end

if hasData then
node:addClass('druid-data')
end
return hasData
end

function h.getTabbedContent(args, label, item)
return args[label .. '_' .. item] or args[item] or TABBED_NONEXIST
end

function h.printSimpleData(node, item, args)
if args[item] and type(args[item]) ~= 'string' then
error(("Invalid use of field %s as both a section and a data value"):format(item))
end
if not args[item] then return false end

node:addClass('druid-data')
:addClass('druid-data-' .. h.escape(item))
:addClass('druid-data-nonempty')
:addClass('druid-toggleable-data')
:addClass('focused')
:wikitext('\n\n' .. args[item])
return true
end

function h.hasComplexData(item, tabs, args)
for _, v in ipairs(tabs) do
if args[v .. '_' .. item] then return true end
end
return false
end

function h.printSectionHeader(node, section, args)
if h.castBool(args[section .. '_nolabel']) then return end
local tr = node:tag(h.getTag('row'))
:attr('data-druid-section', h.escape(section))
local th = tr:tag(h.getTag('sectionTitle'))
:attr('colspan', 2)
:addClass('druid-section')
:addClass('druid-section-' .. h.escape(section))
if args[section .. '_collapsible'] or args[section .. '_collapsed'] then
tr:addClass('druid-collapsible')
if args[section .. '_collapsed'] then
tr:addClass('druid-collapsible-collapsed')
end
end
local emptySections = {}
for _, label in ipairs(args.tabs) do
local hasLabel = false
for _, item in ipairs(args[section] or {}) do
if h.getTabbedContent(args, label, item) then
hasLabel = true
end
end
if not hasLabel then emptySections[label] = true end
end
if not next(emptySections) then
th:wikitext(args[section .. '_label'] or section)
return
end
for i, label in ipairs(args.tabs) do
local div = th:tag('div')
:addClass('druid-toggleable-heading')
:addClass('druid-toggleable')
:attr('data-druid', h.counter .. '-' .. i)
:wikitext(args[section .. '_label'] or section)
-- we are going to print the section content even in empty nodes
-- for compatibility with browsers without :has, where hiding empty rows won't happen
if emptySections[label] then
div:addClass('druid-toggleable-heading-empty')
end
if i == 1 then
div:addClass('focused')
end
end
end

function h.printSectionTabs(node, section, args)
local tabs = args[section .. '_tabs']
if not tabs or #tabs == 0 then return end
local tr = node:tag(h.getTag('sectionTabsOuter'))
:attr('data-druid-section', h.escape(section))
local th = tr:tag(h.getTag('sectionTabs'))
:attr('colspan', 2)
:addClass('druid-section-tabs')
:addClass('druid-section-tabs-' .. h.escape(section))
local texts = {}
for i, item in ipairs(tabs) do
texts[i] = args[item .. '_label'] or item
end
h.printTabs(th, tabs, texts, true, args)
end

----------------------------
-- general utility functions
----------------------------

function h.overwrite()
-- this is a generic utility function that collects args from the invoke call & the parent template.
-- normally, you merge args with parent template overwriting the invoke call, but
-- since we'll be putting markup/formatting into our invoke call,
-- we actually want to overwrite what the user sent.
local f = mw.getCurrentFrame()
local origArgs = f.args
local parentArgs = f:getParent().args

local args = {}

for k, v in pairs(parentArgs) do
v = mw.text.trim(v)
if v ~= '' then
args[k] = v
end
end

for k, v in pairs(origArgs) do
v = mw.text.trim(tostring(v))
if v ~= '' then
args[k] = v
end
end

return args
end

-- generic utility functions
-- these would normally be provided by other modules, but to make installation easy
-- I'm including everything here

function h.split(text, pattern, plain)
if not text then
return {}
end
local ret = {}
for m in h.gsplit(text, pattern, plain) do
ret[#ret+1] = m
end
return ret
end

function h.gsplit( text, pattern, plain )
if not pattern then pattern = ',' end
if not plain then
pattern = '%s*' .. pattern .. '%s*'
end
local s, l = 1, text:len()
return function ()
if s then
local e, n = text:find( pattern, s, plain )
local ret
if not e then
ret = text:sub( s )
s = nil
elseif n < e then
-- Empty separator!
ret = text:sub( s, e )
if e < l then
s = e + 1
else
s = nil
end
else
ret = e > s and text:sub( s, e - 1 ) or ''
s = n + 1
end
return ret
end
end, nil, nil
end

function h.escape(s)
s = s:gsub(' ', '')
:gsub('"', '')
:gsub("'", '')
:gsub("%?", '')
:gsub("%%", '')
:gsub("%[", '')
:gsub("%]", '')
:gsub("{", '')
:gsub("}", '')
:gsub("!", '')
return s
end

-- normally I would make these constants at the top of the file
-- but I don't want to mistake them with user-set constants
h.boolFalse = { ['false'] = true, ['no'] = true, [''] = true, ['0'] = true, ['nil'] = true }

function h.castBool(x)
if not x then return false end
return not h.boolFalse[tostring(x):lower()]
end

h.htmlEntities = {
table = {
container = 'table',
titleOuter = 'tr',
titleInner = 'th',
section = '',
sectionTitle = 'th',
sectionTabsOuter = 'tr',
sectionTabs = 'td',
row = 'tr',
label = 'th',
cell = 'td',
},
div = {
container = 'div',
titleOuter = 'div',
titleInner = 'div',
section = 'div',
sectionTitle = 'div',
sectionTabsOuter = 'div',
sectionTabs = 'div',
row = 'div',
label = 'div',
cell = 'div',
}
}

function h.getTag(key)
-- try not to totally fail here
return h.htmlEntities[h.entityType or 'div'][key]
end

return p

File:Wiki-ItemShinyBorder.gif

2026-07-01T20:57:47Z

Willow: Willow uploaded a new version of File:Wiki-ItemShinyBorder.gif

File:Wiki-ItemShinyBand.png

2026-07-01T10:15:03Z

Willow: Willow uploaded a new version of File:Wiki-ItemShinyBand.png

File:Wiki-ItemShinyBand.png

2026-07-01T10:11:21Z

Willow:

File:Wiki-ItemShinyBand.gif

2026-07-01T09:26:56Z

Willow: Willow uploaded a new version of File:Wiki-ItemShinyBand.gif

File:Wiki-ItemShinyBand.gif

2026-07-01T09:12:16Z

Willow:

File:Wiki-ItemShinyBorder.gif

2026-07-01T09:09:22Z

Willow: Willow moved page File:ShinyFrame.gif to File:Wiki-ItemShinyBorder.gif without leaving a redirect

File:Wiki-ItemShinyBorder.gif

2026-07-01T08:41:39Z

Willow:

File:ShinyUt-Baphomet'sBomb.png

2026-06-27T23:24:18Z

Willow:

== Licensing ==
{{License|game}}

File:ShinyUt-SpringSeasonedScripture.png

2026-06-27T23:24:18Z

Willow:

== Licensing ==
{{License|game}}

File:ShinyUt-LizardskinSpellcoat.png

2026-06-27T23:24:18Z

Willow:

== Licensing ==
{{License|game}}

File:ShinyUt-ChronosSabatons.png

2026-06-27T23:23:45Z

Willow: Willow moved page File:ShinyUt-ChronosBoots.png to File:ShinyUt-ChronosSabatons.png without leaving a redirect

The great uploading

== Licensing ==
{{License|game}}

File:Boss-3DOphanim.png

2026-06-23T09:16:53Z

Willow: Willow uploaded a new version of File:Boss-3DOphanim.png

== Licensing ==
{{License|game}}

File:Mob-3DRustbornTemplar.png

2026-06-23T09:16:53Z

Willow: Willow uploaded a new version of File:Mob-3DRustbornTemplar.png

== Licensing ==
{{License|game}}

File:Mob-3DRustbornParagon.png

2026-06-23T09:16:52Z

Willow: Willow uploaded a new version of File:Mob-3DRustbornParagon.png

== Licensing ==
{{License|game}}

File:Mob-3DRustbornPaladin.png

2026-06-23T09:16:51Z

Willow: Willow uploaded a new version of File:Mob-3DRustbornPaladin.png

== Licensing ==
{{License|game}}

File:Mob-3DRustbornNorseman.png

2026-06-23T09:16:51Z

Willow: Willow uploaded a new version of File:Mob-3DRustbornNorseman.png

== Licensing ==
{{License|game}}

File:Mob-3DRustbornKensei.png

2026-06-23T09:16:50Z

Willow: Willow uploaded a new version of File:Mob-3DRustbornKensei.png

== Licensing ==
{{License|game}}

File:Mob-3DRustbornGladiator.png

2026-06-23T09:16:49Z

Willow: Willow uploaded a new version of File:Mob-3DRustbornGladiator.png

== Licensing ==
{{License|game}}

File:Mob-3DMithrion.png

2026-06-23T09:16:49Z

Willow:

== Licensing ==
{{License|game}}

File:Mob-3DEnlightenedTemplar.png

2026-06-23T09:16:48Z

Willow: Willow uploaded a new version of File:Mob-3DEnlightenedTemplar.png

john loidza

== Licensing ==
{{License|game}}

File:Mob-3DEnlightenedParagon.png

2026-06-23T09:16:48Z

Willow: Willow uploaded a new version of File:Mob-3DEnlightenedParagon.png

john loidza

== Licensing ==
{{License|game}}