MediaWiki:Common.css
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* ============================================================
* NOPOTIONS Wiki theme: imported to MediaWiki:Common.css on deploy.
* A full reskin of the legacy Vector skin in the NOPOTIONS brand fonts and a
* warm dark palette. Single dark theme defined on :root.
*
* Self-complete: tables, infobox, notices etc. set their own borders/padding so
* the look does not depend on MediaWiki core defaults. Selectors target stable
* Vector IDs (#mw-head, #mw-panel, #content, #footer, #p-personal, #p-search,
* #p-logo, #p-namespaces, #p-views). Hot-editable from MediaWiki:Common.css.
* ============================================================ */
/* ---- Brand fonts (self-hosted woff2; baked by the Dockerfile) ---- */
@font-face {
font-family: 'NPDisplay';
src: url('/resources/assets/nopotions/fonts/AurianFont.woff2') format('woff2');
font-display: swap;
}
@font-face {
font-family: 'NPHoneyfolk';
src: url('/resources/assets/nopotions/fonts/HoneyfolkFont.woff2')
format('woff2');
font-display: swap;
}
@font-face {
font-family: 'NPKefa';
src: url('/resources/assets/nopotions/fonts/KefaFont.woff2') format('woff2');
font-display: swap;
}
/* ---- Palette: warm dark theme. ---- */
:root {
--np-gold: #d8a33f; /* brand gold: heading rules / accents */
--np-gold-soft: #e7c473;
--np-bone: #dbc49a; /* brand bone/tan: the wordmark tint */
--np-bone-soft: #eadcbc;
--np-secondary-fg: hsl(
24,
45%,
65%
); /* the game UI's secondary foreground (apps/web --secondary-foreground): tint for subtle glyphs/icons */
--np-green: #6b9b5c;
--bg: #1b1612; /* page / sidebar / footer background */
--content: #28221d; /* the content column surface */
--ink: #e8e1d4; /* foreground text (warm beige) */
--ink-soft: var(
--np-secondary-fg
); /* subtle / muted text — the warm secondary foreground, never a neutral gray */
--rule: #736559; /* border / divider tone */
--header: #312a25; /* headers, tabs, mid surface */
--header-ink: #e8e1d4;
--tab: #28221d;
--tab-line: #554a41; /* tab / input borders */
--accent: var(--np-gold);
--link: #b79d7e; /* link colour */
--link-hover: #d0b896; /* lighter tint of the link tan for hover feedback */
--link-red: #f26d60; /* redlink colour */
--box-head: #1d150e; /* table header / infobox title / box header (dark brown) */
--box-head-ink: #e8e1d4;
--box-alt: #372e27; /* table alternating-row tint (darker band) */
--box-alt-2: #231c16; /* table alternating-row tint (darker band; a deep brown, distinct from the --content page bg so rows never blend) */
--box-bg: #14100c; /* dark card/surface tone: darker than --content so borderless cards still read on the content column (single source for all cards/tables/infobox/panels) */
--sidebar: #736559;
}
/* ---- Accent recolour: brand gold, never the Codex default blue. ----
Every blue accent MediaWiki/Minerva/Codex draws (focus rings/outlines, active
borders, the mobile nav-drawer focus bar, progressive links + buttons) resolves
through these `--*-progressive*` design tokens, which fall back to #36c. Redefining
them here recolours ALL of it to gold in one place: check any new blue against this
list first. Set on :root + html + the skin/mode wrappers so we win wherever Codex
defines them. */
:root,
html,
.skin-minerva,
.skin-vector,
.mw-body,
.cdx-mode-light,
.cdx-mode-dark {
--color-progressive: var(--np-gold);
--color-progressive--hover: var(--np-gold-soft);
--color-progressive--active: var(--accent);
--color-progressive--focus: var(--np-gold);
--border-color-progressive: var(--np-gold);
--border-color-progressive--hover: var(--np-gold-soft);
--border-color-progressive--active: var(--np-gold);
--border-color-progressive--focus: var(--np-gold);
--box-shadow-color-progressive: var(--np-gold);
--box-shadow-color-progressive--hover: var(--np-gold-soft);
--box-shadow-color-progressive--active: var(--accent);
--box-shadow-color-progressive--focus: var(--np-gold);
--outline-color-progressive--focus: var(--np-gold);
--box-shadow-color-progressive-selected: var(--np-gold);
--background-color-progressive: var(--np-gold);
--background-color-progressive--hover: var(--np-gold-soft);
--background-color-progressive--active: var(--accent);
--background-color-progressive--focus: var(--np-gold);
--background-color-input-binary--checked: var(
--np-gold
); /* checked checkbox/radio fill */
/* Codex uses the same blue for the FOCUS state of destructive (red) controls; keep the
base destructive red but make its focus ring/border/text gold like every other focus. */
--background-color-destructive--focus: var(--np-gold);
--border-color-destructive--focus: var(--np-gold);
--box-shadow-color-destructive--focus: var(--np-gold);
--color-destructive--focus: var(--np-gold);
--background-color-progressive-subtle: color-mix(
in srgb,
var(--np-gold) 12%,
transparent
);
--background-color-progressive-subtle--hover: color-mix(
in srgb,
var(--np-gold) 18%,
transparent
);
accent-color: var(--np-gold); /* native checkboxes/radios/progress bars */
/* Minerva/Codex tint every "subtle" glyph (page-action icons, TOC toggle,
section chevrons) and muted text through --color-subtle, which falls back
to a cold grey (#54595d). That grey is banned on this theme: resolve the
token to the game's secondary foreground so no surface can draw it. */
--color-subtle: var(--np-secondary-fg);
/* Same treatment for the neutral surface/border/text tokens: they fall back
to Codex's light-mode palette (white cards, #eaecf0 panels, #dadde3 rules,
near-black text), which is where every "blinding white" surface (search
overlay results, section-heading underlines, list dividers, thumb columns)
comes from. Resolve them all to the house palette so no skin/extension
module can draw a light-mode surface. */
--background-color-base: var(--bg);
--background-color-neutral: var(--box-alt);
--background-color-interactive: var(--box-alt);
--background-color-interactive-subtle: var(--box-bg);
--border-color-base: var(--rule);
--border-color-muted: var(--rule);
--border-color-subtle: var(--rule);
--color-base: var(--ink);
--color-emphasized: var(--ink);
}
/* Solid "progressive" (primary) buttons now have a gold fill, so their inverted white
label would wash out: force dark ink on gold for both Codex and legacy OOUI. */
.cdx-button--action-progressive.cdx-button--weight-primary,
.mw-ui-button.mw-ui-progressive,
.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-framed
> .oo-ui-buttonElement-button {
color: #1c1509 !important;
}
/* Text selection, inverted: the page's own ink as the fill with the page tone
as the text. A translucent gold wash over a dark page turned olive and left
pale text on a mid tone, which read as muddy at any opacity; swapping the
two keeps it warm and puts real contrast under the cursor. */
::selection {
background: var(--ink);
color: var(--bg);
}
::-moz-selection {
background: var(--ink);
color: var(--bg);
}
/* Single dark theme. */
/* ---- Base ---- */
html,
body {
background: var(--bg);
color: var(--ink);
}
body {
font-family: 'NPDisplay', Georgia, 'Times New Roman', serif;
font-size: 15px;
line-height: 1.6; /* vertical rhythm for content + sidebar */
}
/* ---- Header banner: the landscape art behind the header + sidebar top,
dissolving into the page background (var(--bg) keeps it right in both themes) */
#mw-page-base {
height: 9.4em; /* taller banner so the tab row caps the content */
background: var(--bg);
border: 0;
}
#mw-page-base::before {
/* the art is taller than the base, so it bleeds down the sidebar */
content: '';
position: absolute;
pointer-events: none; /* decorative — never intercept clicks on the logo/nav beneath */
top: 0;
left: 0;
right: 0;
height: 24em;
background: url('/resources/assets/nopotions/banner.jpg') center 38% / cover
no-repeat;
filter: saturate(0.85) brightness(0.62) sepia(0.18); /* keep the landscape clear/visible, lightly warmed */
}
#mw-page-base::after {
content: '';
position: absolute;
pointer-events: none; /* decorative gradient — never intercept clicks beneath */
top: 0;
left: 0;
right: 0;
height: 24em;
background:
linear-gradient(
to bottom,
transparent 34%,
color-mix(in srgb, var(--bg) 65%, transparent) 49%,
var(--bg) 62%
),
linear-gradient(
to right,
transparent 8%,
color-mix(in srgb, var(--bg) 45%, transparent) 26%,
var(--bg) 44%
);
}
#mw-head-base {
display: none;
}
#mw-head {
background: transparent;
}
/* drop the tab row to the bottom of the banner so it caps the content */
#left-navigation,
#right-navigation {
margin-top: 7.3em;
}
/* Desktop (legacy Vector) sidebar width: a wider nav column than Vector's ~11em
default. Scoped to .skin-vector so it never reaches the
mobile (Minerva) skin, which shares #content but has no sidebar. */
.skin-vector #content,
.skin-vector .mw-body {
margin-left: 15em; /* content starts after the wider sidebar */
}
.skin-vector #left-navigation {
margin-left: 15em; /* namespace tabs line up with the content edge */
}
.skin-vector #mw-panel {
width: 14em;
}
#p-personal li a {
color: var(--link);
}
#p-personal li a:hover {
color: var(--link-hover);
}
/* ---- Namespace tabs (Main Page / Discussion): boxed parchment tabs ----
Legacy Vector paints a blue tab sprite + break-divider images on the tab
container/li; reset the whole container (as #p-views does) so only our boxed
<a> shows. Otherwise the sprite bleeds a cyan left edge and light slivers at
the links' rounded corners. */
#p-namespaces,
#p-namespaces .vector-menu-content,
#p-namespaces .vector-menu-content-list,
#p-namespaces li {
background: none;
border: none;
box-shadow: none;
}
#p-namespaces li a {
display: inline-block;
padding: 7px 16px 6px;
color: var(--ink);
background: var(
--header
); /* mid surface (#312a25); the selected tab drops to the content colour */
border: none;
border-radius: 6px 6px 0 0;
font-size: 15px;
}
#p-namespaces li.selected a {
background: var(--content);
color: var(--ink);
font-weight: bold;
}
#p-namespaces li a:hover {
color: var(--link-hover);
text-decoration: none;
}
/* View actions (Read / View source / History / More): understated plain links.
Reset the whole #p-views tab container so Vector's default blue tab
background/sprite/border does not show behind the transparent links. */
#p-views,
#p-views .vector-menu-content,
#p-views .vector-menu-content-list,
#p-views li,
#p-cactions,
#p-cactions ul,
#p-cactions li {
background: none;
border: none;
box-shadow: none;
}
#p-views li a,
#p-views li.selected a,
#p-cactions a {
display: inline-block;
padding: 7px 6px 6px;
color: var(--ink);
font-size: 15px;
background: none;
border: none;
border-radius: 0;
}
#p-views li.selected a {
font-weight: bold;
}
#p-views li a:hover,
#p-cactions a:hover {
color: var(--link-hover);
text-decoration: none;
}
/* ---- Search ---- */
/* Lift the box up so it centres on the Read / View-source links instead of sitting
low, while keeping its bottom above the content edge (no clipped bottom border). */
#simpleSearch,
.vector-search-box-inner {
margin-top: -7px;
}
#p-search input,
#searchInput {
box-sizing: border-box;
height: 26px; /* taller box; the -7px lift keeps its bottom above the content edge */
/* single seamless box: the magnifier is the input's own right-aligned background
(the submit buttons become invisible click overlays below) */
background: var(--box-bg)
url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2020'%20fill='none'%20stroke='%23b79d7e'%20stroke-width='2'%3E%3Ccircle%20cx='8.5'%20cy='8.5'%20r='5.5'/%3E%3Cpath%20d='M13%2013l4.5%204.5'/%3E%3C/svg%3E")
no-repeat right 9px center;
background-size: 15px;
color: var(--ink);
border: none;
border-radius: 4px;
width: 300px;
max-width: 34vw;
padding: 0 30px 0 10px;
font-size: 14px;
}
#p-search input::placeholder,
#searchInput::placeholder {
color: #a4a1a1;
}
/* Custom focus ring in the main font colour (replaces the browser's blue default). */
:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 2px;
}
/* The Codex search widget draws its OWN blue box-shadow ring on top of ours and
suppresses the input's outline. Force our ring back and kill only the blue
box-shadow so a single clean ring shows (no blue overlap). */
#p-search input:focus,
#p-search .cdx-text-input__input:focus {
outline: 2px solid var(--ink) !important;
outline-offset: 1px;
box-shadow: none !important;
}
#p-search .cdx-text-input:focus-within {
box-shadow: none !important;
}
/* The two stacked submit buttons become an invisible click target over the icon
(the visible magnifier is the input's background), so there is no seam or notch. */
#searchButton,
#mw-searchButton,
#p-search button,
#p-search .searchButton,
#searchform button,
.vector-search-box-inner button {
-webkit-appearance: none !important;
appearance: none !important;
box-sizing: border-box;
height: 26px;
width: 30px;
text-indent: -9999px;
overflow: hidden;
color: transparent !important;
border: none !important;
border-radius: 0 4px 4px 0;
box-shadow: none;
background: transparent !important;
cursor: pointer;
}
/* ---- Sidebar ---- */
/* Sidebar transparent so the banner bleeds down past the logo + Discord button,
then the page background shows behind the nav links. */
#mw-panel {
background: transparent;
border-right: 0;
}
/* Logo: the transparent potion mark, with the wordmark below it, top-left. */
#p-logo {
top: 24px;
left: 16px;
width: 192px; /* centre the mark in the wider (14em) sidebar column */
height: 200px; /* logo band; the Discord button flows right after it */
}
#p-logo a {
position: relative;
z-index: 2; /* above the banner art so the whole mark stays clickable */
display: block;
width: 192px;
height: 200px; /* cover BOTH the potion and the wordmark (::after) as one click target — no dead gap between them */
background-size: 130px 130px; /* larger potion mark */
background-position: calc(50% + 7px) 14px; /* centre over sidebar + clear the cork from the top edge */
background-repeat: no-repeat;
}
#p-logo a::after {
content: '';
position: absolute;
left: 0;
top: 164px; /* wordmark sits below the potion with breathing room */
width: 192px;
height: 34px;
/* tint the (near-black) wordmark art to the brand bone by masking a solid fill */
background-color: var(--np-bone);
-webkit-mask-image: url('/resources/assets/nopotions/wordmark.webp');
mask-image: url('/resources/assets/nopotions/wordmark.webp');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: calc(50% + 7px) center;
mask-position: calc(50% + 7px) center;
-webkit-mask-size: 150px auto;
mask-size: 150px auto;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7));
}
/* Section rhythm: the real Vector portals are .mw-portlet (NOT .portal), and the
headings are .vector-menu-heading. Reset Vector's default spacing. */
#mw-panel .mw-portlet {
margin: 0 0 22px; /* generous gap between sidebar sections */
padding: 0;
}
/* Scoped under #mw-panel so these outrank the generic portlet margin above
(an unscoped #p-x rule silently loses to it and never applies) */
#mw-panel #p-discord {
margin-bottom: 22px; /* gap from the Discord button to Navigation */
}
#mw-panel #p-play {
margin-bottom: 0; /* the anchor's own margin sets the gap to Discord */
}
/* Vector puts vertical padding and margins on every sidebar list item, and
between the two CTAs those stack on top of the Play anchor's own gap. Drop
them on the facing edges only, so the pair tightens without the Play button
riding up into the logo band. */
#mw-panel #p-play li {
margin-bottom: 0;
padding-bottom: 0;
}
#mw-panel #p-discord li {
margin-top: 0;
padding-top: 0;
}
#p-play h3 {
display: none;
}
/* Play Now button: the game CTA above the Discord button, in the footer
CTA's gold dress so the funnel button reads the same everywhere */
#mw-panel #p-play a,
#mw-panel #p-play a:visited {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
margin: 0 12px 6px 0; /* balance the 12px content indent; tight gap to Discord */
padding: 8px 8px;
background: linear-gradient(
180deg,
var(--np-gold-soft) 0%,
var(--np-gold) 100%
);
color: #1c1509 !important;
border-radius: 6px;
font-size: 14px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 245, 220, 0.35);
text-decoration: none;
}
#mw-panel #p-play a::before {
content: ''; /* play triangle (pure CSS, no asset) */
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 9px;
border-color: transparent transparent transparent #1c1509;
}
#mw-panel #p-play a:hover {
filter: brightness(1.05);
text-decoration: none;
}
#mw-panel .vector-menu-heading {
font-family: 'NPDisplay', Georgia, serif;
text-transform: none;
font-size: 16px;
font-weight: bold;
letter-spacing: 0.2px;
line-height: 1.2; /* trim leading so headings do not float low in their box */
margin: 0 0 6px; /* no top margin so it stops stacking with the portlet's bottom margin */
padding: 0 0 4px 12px; /* indent from the sidebar edge; a little room under the text for the rule */
color: var(--ink);
/* replace legacy Vector's cool-grey (#c8ccd1) fade separator with a warm border-tone
fade (border tone #736559) that reads on the dark bg */
background-image: linear-gradient(
to right,
rgba(115, 101, 89, 0) 0,
rgba(115, 101, 89, 0.7) 10%,
rgba(115, 101, 89, 0.7) 90%,
rgba(115, 101, 89, 0) 100%
);
background-position: center bottom;
background-repeat: no-repeat;
background-size: 100% 1px;
}
#mw-panel .vector-menu-content {
margin: 0;
padding: 0 0 0 12px; /* indent nav links from the sidebar edge */
}
#mw-panel .vector-menu-content-list {
margin: 0;
padding: 0;
list-style: none;
}
#mw-panel .mw-list-item {
margin: 6px 0; /* more air between nav links */
}
#mw-panel .vector-menu-content a,
#mw-panel .vector-menu-content a:visited {
color: var(--link);
font-size: 16px;
}
#mw-panel .vector-menu-content a:hover {
color: var(--link-hover);
}
/* Chat-on-Discord button: any discord link in the sidebar renders as a button */
#mw-panel a[href*='discord'] {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0 12px 4px 0; /* balance the 12px content indent so the button sits centred */
padding: 7px 8px;
background: #5865f2;
color: #fff !important;
border-radius: 6px;
font-family: 'Segoe UI', Arial, sans-serif;
font-size: 13.5px;
font-weight: normal;
letter-spacing: 0.01em;
white-space: nowrap; /* keep "Join our Discord" on one line */
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
text-decoration: none; /* no underline on hover */
}
/* Discord glyph before the label (the sidebar link is plain text) */
#mw-panel a[href*='discord']::before {
content: '';
flex: 0 0 auto;
width: 18px;
height: 18px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M20.317%204.37a19.79%2019.79%200%200%200-4.885-1.515.074.074%200%200%200-.079.037c-.21.375-.444.864-.608%201.25a18.27%2018.27%200%200%200-5.487%200%2012.64%2012.64%200%200%200-.617-1.25.077.077%200%200%200-.079-.037A19.74%2019.74%200%200%200%203.677%204.37a.07.07%200%200%200-.032.027C.533%209.046-.32%2013.58.099%2018.057a.082.082%200%200%200%20.031.057%2019.9%2019.9%200%200%200%205.993%203.03.078.078%200%200%200%20.084-.028c.462-.63.874-1.295%201.226-1.994a.076.076%200%200%200-.041-.106%2013.1%2013.1%200%200%201-1.872-.892.077.077%200%200%201-.008-.128c.126-.094.252-.192.372-.291a.074.074%200%200%201%20.077-.01c3.928%201.793%208.18%201.793%2012.062%200a.074.074%200%200%201%20.078.009c.12.099.246.198.373.292a.077.077%200%200%201-.006.127%2012.3%2012.3%200%200%201-1.873.892.077.077%200%200%200-.041.106c.36.698.772%201.362%201.225%201.993a.076.076%200%200%200%20.084.028%2019.84%2019.84%200%200%200%206.002-3.03.077.077%200%200%200%20.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061%200%200%200-.031-.03zM8.02%2015.33c-1.182%200-2.157-1.085-2.157-2.419%200-1.333.956-2.418%202.157-2.418%201.21%200%202.176%201.096%202.157%202.418%200%201.334-.956%202.42-2.157%202.42zm7.975%200c-1.183%200-2.157-1.085-2.157-2.419%200-1.333.955-2.418%202.157-2.418%201.21%200%202.176%201.096%202.157%202.418%200%201.334-.946%202.42-2.157%202.42z'/%3E%3C/svg%3E")
center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M20.317%204.37a19.79%2019.79%200%200%200-4.885-1.515.074.074%200%200%200-.079.037c-.21.375-.444.864-.608%201.25a18.27%2018.27%200%200%200-5.487%200%2012.64%2012.64%200%200%200-.617-1.25.077.077%200%200%200-.079-.037A19.74%2019.74%200%200%200%203.677%204.37a.07.07%200%200%200-.032.027C.533%209.046-.32%2013.58.099%2018.057a.082.082%200%200%200%20.031.057%2019.9%2019.9%200%200%200%205.993%203.03.078.078%200%200%200%20.084-.028c.462-.63.874-1.295%201.226-1.994a.076.076%200%200%200-.041-.106%2013.1%2013.1%200%200%201-1.872-.892.077.077%200%200%201-.008-.128c.126-.094.252-.192.372-.291a.074.074%200%200%201%20.077-.01c3.928%201.793%208.18%201.793%2012.062%200a.074.074%200%200%201%20.078.009c.12.099.246.198.373.292a.077.077%200%200%201-.006.127%2012.3%2012.3%200%200%201-1.873.892.077.077%200%200%200-.041.106c.36.698.772%201.362%201.225%201.993a.076.076%200%200%200%20.084.028%2019.84%2019.84%200%200%200%206.002-3.03.077.077%200%200%200%20.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061%200%200%200-.031-.03zM8.02%2015.33c-1.182%200-2.157-1.085-2.157-2.419%200-1.333.956-2.418%202.157-2.418%201.21%200%202.176%201.096%202.157%202.418%200%201.334-.956%202.42-2.157%202.42zm7.975%200c-1.183%200-2.157-1.085-2.157-2.419%200-1.333.955-2.418%202.157-2.418%201.21%200%202.176%201.096%202.157%202.418%200%201.334-.946%202.42-2.157%202.42z'/%3E%3C/svg%3E")
center / contain no-repeat;
}
#mw-panel a[href*='discord']:hover {
background: #4853d6;
text-decoration: none;
}
#p-discord h3 {
display: none;
}
/* Tools portlet is not part of the sidebar design */
#p-tb {
display: none;
}
/* ---- Content ---- */
/* Vector-legacy shrinks #bodyContent to 0.875em; force the 15px base */
.mw-body-content,
.mw-parser-output {
font-size: 15px;
}
#content,
.mw-body {
position: relative;
z-index: 1; /* lift the parchment above the banner art so it is not tinted tan */
background: var(--content);
color: var(--ink);
border: 0;
padding: 22px 40px 50px; /* content gutters */
box-shadow: 0 1px 8px rgba(40, 30, 15, 0.16);
}
.mw-body a,
.mw-body a:visited {
color: var(--link);
}
.mw-body a:hover {
color: var(--link-hover);
}
/* Nudge underlines down so they don't crowd the text (hover states + inline links). */
a {
text-underline-offset: 3px;
}
.mw-body a.new,
.mw-body a.new:visited {
color: var(--link-red);
}
/* External links: theme the text + recolour the default-blue ↗ arrow to the link tan
Main-page cards keep their own styling via .mp-wrap a.external. */
.mw-body a.external,
.mw-body a.external:visited,
.mw-parser-output a.external {
color: var(--link);
}
.mw-body a.external {
/* self-complete placement: don't rely on MW core, whose
`.plainlinks a.external{background:none!important}` reset otherwise leaves our
forced image tiling (background-repeat reverts to `repeat`) across the link */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23b79d7e' d='M6 1h5v5L8.86 3.85 4.7 8 4 7.3l4.15-4.16L6 1Z M2 3h2v1H2v6h6V8h1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E") !important;
background-position: right center !important;
background-repeat: no-repeat !important;
background-size: 11px !important;
padding-right: 15px;
}
/* .plainlinks explicitly opts out of the external-link icon (MW intent; used by
the noarticletext "search the related logs" link) */
.mw-body .plainlinks a.external,
.mw-parser-output .plainlinks a.external {
background-image: none !important;
padding-right: 0 !important;
}
#siteSub,
.np-fromwiki {
color: var(--ink-soft);
font-style: italic;
font-size: 12px;
}
.np-breadcrumb {
color: var(--ink-soft);
font-size: 12px;
margin-bottom: 4px;
}
/* Headings: brand display face + rule ---- */
.mw-body h1,
.mw-body .firstHeading {
font-family: 'NPDisplay', Georgia, 'Times New Roman', serif;
font-weight: 700;
font-size: 34px;
color: var(--ink);
border-bottom: 2px solid var(--link);
padding-bottom: 6px;
}
.mw-body h2 {
font-family: 'NPDisplay', Georgia, 'Times New Roman', serif;
font-weight: 600;
font-size: 21px;
color: var(--ink);
border-bottom: 1px solid var(--rule);
padding-bottom: 4px;
}
/* Prose fills the content column and wraps around the floated infobox; an
explicit none (not just an absent rule) so it also wins over
the earlier narrow-measure clamp. That clamp left wide pages looking cut off
with empty space on the right. */
.mw-body p {
max-width: none;
}
/* ---- Content prose bullets. Core/Vector renders list markers invisibly on
this dark theme, so `* ` items read as plain indented rows. Draw an explicit
gold bullet. Scoped to top-level article lists (child combinator) so it never
touches the TOC, hlists, or galleries, which sit nested in their own
containers. ---- */
.mw-parser-output > ul:not(.gallery):not(.hlist):not(.plainlist),
.mw-parser-output > ul:not(.gallery):not(.hlist):not(.plainlist) ul,
.np-pn-text > ul:not(.gallery):not(.hlist):not(.plainlist),
.np-pn-text > ul:not(.gallery):not(.hlist):not(.plainlist) ul {
list-style: none;
}
.mw-parser-output > ul:not(.gallery):not(.hlist):not(.plainlist),
.np-pn-text > ul:not(.gallery):not(.hlist):not(.plainlist) {
margin: 0.4em 0 1em;
padding-left: 1.55em;
}
.mw-parser-output > ul:not(.gallery):not(.hlist):not(.plainlist) ul,
.np-pn-text > ul:not(.gallery):not(.hlist):not(.plainlist) ul {
margin: 0.25em 0;
padding-left: 1.45em;
}
.mw-parser-output > ul:not(.gallery):not(.hlist):not(.plainlist) li,
.np-pn-text > ul:not(.gallery):not(.hlist):not(.plainlist) li {
position: relative;
margin: 0.32em 0;
}
.mw-parser-output > ul:not(.gallery):not(.hlist):not(.plainlist) li::before,
.np-pn-text > ul:not(.gallery):not(.hlist):not(.plainlist) li::before {
content: '';
position: absolute;
left: -1.05em;
top: 0.62em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
}
/* nested bullets read as a hollow ring so sub-items stay distinct */
.mw-parser-output > ul:not(.gallery):not(.hlist):not(.plainlist) ul li::before,
.np-pn-text > ul:not(.gallery):not(.hlist):not(.plainlist) ul li::before {
width: 5px;
height: 5px;
top: 0.64em;
background: transparent;
border: 1.5px solid var(--accent);
}
/* Hatnote + synced-notice (note boxes; used by seed pages) ---- */
.hatnote {
font-size: 12.5px;
font-style: italic;
color: var(--ink-soft);
/* The page tone rather than a tint of the accent: mixing gold into the
content surface lightened the box until the muted text on it went muddy,
so recess it below the column instead and let the gold edge carry it. */
background: var(--bg);
border-left: 3px solid var(--accent);
padding: 6px 10px;
margin: 0 0 14px;
}
.np-notice {
position: relative; /* anchors the ::before icon so inline text flows normally */
font-size: 13px;
color: var(--ink);
background: color-mix(in srgb, var(--accent) 9%, var(--content));
border-radius: 4px;
padding: 11px 16px 11px 46px; /* left gutter for the icon */
margin: 0 0 16px;
}
/* tinted note glyph on the left.
Absolutely positioned so it does NOT become a flex/inline item and fragment
the message text. */
.np-notice::before {
content: '';
position: absolute;
left: 15px;
top: 12px;
width: 21px;
height: 21px;
background: var(--accent);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E")
center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E")
center / contain no-repeat;
}
/* ---- Tables (self-complete: borders/padding don't rely on MW core) ---- */
.wikitable {
border-collapse: collapse;
/* content-sized by default (MediaWiki behaviour); not forced to 100% nor
capped at 640px. Tables that want full width set it per-table. */
width: auto;
max-width: none;
margin: 0 0 16px;
font-size: 13px;
background: var(--box-alt-2);
color: var(--ink);
}
.wikitable th,
.wikitable td {
border: 0;
padding: 6px 9px;
text-align: left;
vertical-align: top;
}
.wikitable th {
background: var(--box-head);
font-weight: 700;
}
.wikitable tr:nth-child(even) td {
background: var(--box-alt);
}
/* ---- Table of contents (self-complete dark box) ----
MediaWiki core defaults .toc to a light box (#f8f9fa / #a2a9b1); the theme owns
it here so it matches the wikitable/infobox surfaces instead of glaring white. */
.toc,
.toccolours {
display: table; /* shrink-to-fit like MW's default TOC */
background: var(--box-bg);
border: 0; /* MW core defaults .toc to a light #a2a9b1 border; drop it */
border-radius: 4px;
padding: 0;
margin: 4px 0 18px;
font-size: 13.5px;
color: var(--ink);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.toc .toctitle {
background: var(--box-head);
border: 0; /* no divider between the Contents title and the list */
text-align: center;
padding: 6px 30px;
}
/* the "Contents" heading inherits .mw-body h2's rule + size otherwise: reset it */
.toc .toctitle h2 {
display: inline;
font-family: 'NPDisplay', Georgia, serif;
font-size: 15px;
font-weight: 700;
color: var(--box-head-ink);
border: none;
padding: 0;
margin: 0;
}
/* the "[hide]/[show]" toggle (label or JS link) */
.toc .toctogglelabel,
.toc .toctitle a,
.toc .togglelink {
color: var(--link);
font-size: 12px;
font-weight: normal;
}
.toc .toctogglelabel:hover,
.toc .toctitle a:hover,
.toc .togglelink:hover {
color: var(--link-hover);
}
.toc ul {
list-style: none;
margin: 0;
padding: 10px 26px 12px 16px;
}
.toc ul ul {
padding: 4px 0 0 20px; /* nested sub-sections indent under their parent */
}
.toc li {
margin: 3px 0;
}
.toc a,
.toc a:visited {
color: var(--link);
}
.toc a:hover {
color: var(--link-hover);
}
.toc .tocnumber {
color: var(--ink-soft);
margin-right: 5px;
}
/* ---- Rarity / yes-no pills (infobox + table values) ---- */
.np-tag {
display: inline-block;
font-size: 11px;
font-weight: 700;
padding: 1px 7px;
border-radius: 10px;
white-space: nowrap;
}
/* Rarity names (rendered by Template:Rarity from the lowercased rarity).
Plain coloured text, no chip. Colors mirror the text colors of
itemRarityColors in apps/web/src/lib/item-details.ts; apps/web is the
source of truth. */
.np-rarity {
font-weight: 700;
white-space: nowrap;
}
.np-rarity.worthless {
color: #8a8a8a;
}
.np-rarity.common {
color: #e9e2d0;
}
.np-rarity.uncommon {
color: #4ade80;
}
.np-rarity.rare {
color: #93c5fd;
}
.np-rarity.epic {
color: #c084fc;
}
.np-rarity.legendary {
color: #f97316;
}
.np-rarity.mythic {
color: #ef4444;
}
/* ---- Base-item list tables (slot pages): poewiki-style centered rows ---- */
table.wikitable.np-base-table > * > tr > td {
vertical-align: middle;
text-align: center;
}
.np-base-table td:first-child a {
font-weight: 600;
}
.np-base-table td:first-child img {
display: block;
margin: 4px auto 0;
width: 64px;
height: 64px;
object-fit: cover;
border-radius: 6px;
}
/* ---- Reference tables: centered headers, subtle column dividers ---- */
table.wikitable.np-base-table > * > tr > th,
table.wikitable.np-modifier-table > * > tr > th {
text-align: center;
}
table.wikitable.np-base-table > * > tr > td:not(:first-child),
table.wikitable.np-base-table > * > tr > th:not(:first-child),
table.wikitable.np-modifier-table > * > tr > td:not(:first-child),
table.wikitable.np-modifier-table > * > tr > th:not(:first-child) {
border-left: 1px solid color-mix(in srgb, var(--ink) 11%, transparent);
}
/* ---- Group accordions (affix families, base-item groups): card panels.
Open by default (the generator omits mw-collapsed); the header bar is the
whole clickable line, with a count badge on its right edge. ---- */
.np-modgroup {
padding: 8px 0 12px;
}
.np-modgroup-header {
font-size: 12px;
color: var(--ink-soft);
margin-bottom: 6px;
}
.np-mod {
margin: 10px 0;
border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
border-radius: 8px;
background: color-mix(in srgb, var(--box-head) 40%, transparent);
overflow: hidden;
}
.np-mod > .np-mod-toggle {
/* core makeCollapsible floats toggles right; ours is the whole line */
float: none;
display: flex;
align-items: baseline;
gap: 10px;
cursor: pointer;
font-weight: 700;
padding: 9px 14px;
background: var(--header);
transition: background 0.12s ease;
}
.np-mod > .np-mod-toggle:hover {
background: color-mix(in srgb, var(--np-gold) 9%, var(--header));
}
.np-mod:not(.mw-collapsed) > .np-mod-toggle {
border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.np-mod > .mw-collapsible-content {
padding: 4px 14px 12px;
overflow-x: auto;
}
.np-mod-count {
margin-left: auto;
font-weight: 400;
font-size: 12px;
color: var(--ink-soft);
}
.np-mod-toggle::before {
content: '▸';
display: inline-block;
margin-right: 8px;
color: var(--np-gold);
transition: transform 0.12s ease;
}
.np-mod > .np-mod-toggle::before {
margin-right: 0; /* the flex gap spaces the header bar's chevron */
align-self: center;
}
/* A slot glyph in the header bar (Equipment page) rides the flex row */
.np-mod > .np-mod-toggle img {
align-self: center;
}
.np-mod:not(.mw-collapsed) > .np-mod-toggle::before {
transform: rotate(90deg);
}
.np-mod-hand {
margin: 8px 0 8px 2px;
padding-left: 10px;
border-left: 2px solid color-mix(in srgb, var(--np-gold) 35%, transparent);
}
.np-mod-hand > .np-mod-hand-toggle {
float: none;
display: block;
cursor: pointer;
font-weight: 600;
font-size: 13px;
color: var(--ink-soft);
}
.np-mod-hand > .np-mod-hand-toggle::before {
content: '▸';
display: inline-block;
margin-right: 7px;
color: var(--np-gold);
transition: transform 0.12s ease;
}
.np-mod-hand:not(.mw-collapsed) > .np-mod-hand-toggle::before {
transform: rotate(90deg);
}
.np-mod-members {
font-size: 12.5px;
color: var(--ink-soft);
margin: 4px 0 2px;
}
.np-mod .wikitable {
margin: 8px 0 4px;
min-width: 30em;
}
.np-mod-controls {
float: right;
font-size: 12px;
}
.np-mod-controls a {
cursor: pointer;
}
.np-base-controls {
text-align: right;
font-size: 12px;
margin: 2px 0 8px;
}
.np-base-controls a {
cursor: pointer;
}
.np-tag.yes {
background: rgba(22, 163, 74, 0.4);
border: 1px solid rgba(34, 197, 94, 0.3);
color: #4ade80;
}
.np-tag.no {
background: rgba(75, 85, 99, 0.4);
border: 1px solid rgba(107, 114, 128, 0.3);
color: #b9b1a0;
}
/* ---- Update-page section media (Alpha X pages) ----
Each section body is a flex row: the notes fill the left column and the
screenshot rides the right rail, top-aligned with the text. On a narrow
viewport the row unstacks and the shot renders full width at the bottom of
its section, which is also where it sits in the wikitext. */
.np-pn-row {
display: flex;
gap: 26px;
align-items: flex-start;
}
.np-pn-text {
flex: 1 1 0;
min-width: 0;
}
.np-pn-shot {
flex: 0 0 auto;
width: 600px;
max-width: 46%;
margin-top: 6px;
}
/* Portrait (phone-frame) shots ride a narrower rail so they stay in scale. */
.np-pn-shot.np-pn-tall {
width: 360px;
max-width: 38%;
}
.np-pn-shot img {
display: block;
width: 100%;
height: auto;
border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
border-radius: 8px;
}
/* ---- Dice skin cards (Cosmetics page): transparent renders on card panels ---- */
.np-dice-lead {
float: right;
margin: 4px 0 10px 22px;
}
.np-dice-lead img {
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
}
@media (max-width: 850px) {
.np-dice-lead {
float: none;
text-align: center;
margin: 4px 0 10px;
}
}
.np-dice-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 14px;
margin: 12px 0 18px;
}
.np-dice-card {
border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
border-radius: 10px;
background: color-mix(in srgb, var(--box-head) 40%, transparent);
padding: 16px 12px 14px;
text-align: center;
}
.np-dice-card img {
width: 100%;
max-width: 150px;
height: auto;
filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45));
}
.np-dice-name {
font-weight: 700;
margin-top: 10px;
}
.np-dice-line {
font-size: 12px;
font-style: italic;
color: var(--ink-soft);
margin-top: 2px;
}
.np-dice-flag {
display: inline-block;
margin-top: 7px;
padding: 1px 9px;
font-size: 11px;
border: 1px solid color-mix(in srgb, var(--np-gold) 45%, transparent);
border-radius: 999px;
color: var(--np-gold-soft);
}
/* ---- Forge tree (Crafting section on a material's page) ----
The material sits at the root and the pieces it forges into hang beneath it.
Connectors are drawn with pseudo-elements because the parser escapes raw
<svg>, so a drawn diagram is not available here. The branch bar is built from
per-branch segments: every branch draws a full-width bar and a drop line, and
the first and last branch trim their bar back to the card centre so the run
starts and ends on a card rather than in mid-air. */
.np-forge {
margin: 16px 0 20px;
text-align: center;
overflow-x: auto;
padding-bottom: 2px;
}
.np-forge-root {
display: inline-block;
position: relative;
padding-bottom: 26px;
}
.np-forge-root::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 2px;
height: 26px;
margin-left: -1px;
background: var(--rule);
}
.np-forge-branches {
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: nowrap;
}
.np-forge-branch {
position: relative;
padding: 26px 10px 0;
flex: 0 0 auto;
}
.np-forge-branch::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: var(--rule);
}
.np-forge-branch:first-child::before {
left: 50%;
}
.np-forge-branch:last-child::before {
right: 50%;
}
.np-forge-branch:only-child::before {
display: none;
}
.np-forge-branch::after {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 2px;
height: 26px;
margin-left: -1px;
background: var(--rule);
}
/* Same frame the wikitables wear, so a card reads as part of the same set. */
.np-forge-card {
width: 150px;
margin: 0 auto;
background: var(--box-alt-2);
border: 2px solid var(--box-head);
border-radius: 10px;
padding: 10px 8px 9px;
transition:
border-color 0.15s ease,
transform 0.15s ease;
}
/* The root is the page you are already on, so it takes the header-band tone
the tables give their heading row rather than a border colour of its own. */
.np-forge-root .np-forge-card {
background: var(--box-head);
}
.np-forge-branch .np-forge-card:hover {
border-color: var(--np-gold);
transform: translateY(-2px);
}
.np-forge-art {
line-height: 0;
margin-bottom: 7px;
}
/* Item art is authored 16:9, so the box keeps that ratio rather than cropping
the piece into a square the way the denser slot tables do. */
.np-forge-art img {
display: block;
margin: 0 auto;
width: 128px;
height: 72px;
object-fit: cover;
border-radius: 8px;
}
.np-forge-name {
font-size: 13px;
line-height: 1.25;
}
.np-forge-name a,
.np-forge-name a:visited {
color: inherit;
}
.np-forge-name a:hover {
color: var(--np-gold-soft);
}
.np-forge-meta {
margin-top: 3px;
font-size: 11.5px;
color: var(--ink-soft);
}
/* Narrow screens stack the branches into a single chain, so the horizontal
bar has nothing to span and each card hangs off the one above it. */
@media (max-width: 700px) {
.np-forge-branches {
flex-direction: column;
align-items: center;
}
.np-forge-branch {
padding: 22px 0 0;
}
.np-forge-branch::before {
display: none;
}
.np-forge-branch::after {
height: 22px;
}
}
/* ---- Generated-page footer (rendered by Template:Generated) ---- */
.np-generated {
clear: both;
margin-top: 26px;
padding-top: 8px;
border-top: 1px solid var(--rule);
font-size: 12px;
color: var(--ink-soft);
}
/* ---- Hub cards (Items hub; mirrors the Main Page nav-card treatment) ---- */
.hub-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 12px;
margin: 4px 0 18px;
}
.hub-card {
background: var(--box-bg);
border-radius: 6px;
padding: 12px 14px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.hub-card .t {
font-weight: 700;
font-size: 15px;
margin-bottom: 2px;
}
.hub-card .d {
font-size: 12.5px;
color: var(--ink-soft);
line-height: 1.45;
}
.hub-card .sub {
font-size: 12px;
margin-top: 7px;
padding-top: 6px;
border-top: 1px solid var(--box-alt);
}
/* ---- Infobox (right-rail; rendered by the inline templates) ---- */
.infobox,
.np-infobox {
float: right;
clear: right;
width: 262px;
margin: 4px 0 14px 20px;
background: var(--box-bg);
/* 2px outer frame in the header-band tone, matching the content tables */
border: 2px solid var(--box-head);
border-radius: 4px;
overflow: hidden;
font-size: 12.5px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.np-infobox .infobox-title {
background: var(--box-head);
color: var(--box-head-ink);
text-align: center;
font-family: 'NPDisplay', Georgia, serif;
font-weight: 700;
font-size: 15px;
letter-spacing: 0.3px;
padding: 7px 8px;
}
.np-infobox .infobox-art {
min-height: 150px; /* grow to a tall banner's height instead of overflowing the box */
display: flex;
align-items: center;
justify-content: center;
position: relative;
color: #cdd6e0;
font-size: 60px;
background:
repeating-linear-gradient(
45deg,
rgba(0, 0, 0, 0.06) 0 8px,
transparent 8px 16px
),
radial-gradient(circle at 50% 40%, #4a3b29, #16100a);
}
/* Banner image: fill the width and let the art area grow to the image's height
rather than overflowing the fixed banner and covering the title/rows. When a
real image is present, drop the flex-centred placeholder box (which centres,
and so overflows: a tall image) for a plain block that sizes to the image. */
.np-infobox .infobox-art:has(img) {
display: block;
min-height: 0;
height: auto;
}
.np-infobox .infobox-art > span,
.np-infobox .infobox-art a,
.np-infobox .infobox-art img {
display: block;
width: 100%;
height: auto;
}
.np-infobox .infobox-art .caption {
position: absolute;
bottom: 6px;
right: 8px;
font-size: 10.5px;
opacity: 0.7;
}
/* Real art (uploaded file): full-length image, no crop */
.np-infobox .infobox-image {
line-height: 0;
}
.np-infobox .infobox-image img {
width: 100%;
height: auto;
display: block;
}
.np-infobox table {
width: 100%;
border-collapse: collapse;
margin: 0;
}
.np-infobox th,
.np-infobox td {
padding: 5px 9px;
text-align: left;
vertical-align: top;
}
.np-infobox th {
font-weight: 700;
width: 42%;
color: var(--ink);
}
.np-infobox tr:nth-child(odd) th,
.np-infobox tr:nth-child(odd) td {
background: var(--box-alt-2);
}
.np-infobox tr:nth-child(even) th,
.np-infobox tr:nth-child(even) td {
background: var(--box-alt);
}
.np-infobox .infobox-section {
background: var(--box-head);
color: var(--box-head-ink);
text-align: center;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 11.5px;
padding: 4px;
}
.np-infobox .infobox-missing {
padding: 10px;
color: var(--ink-soft);
text-align: center;
}
/* ---- Bosses hub: one card per boss, art beside the facts ---- */
.np-boss {
display: flex;
gap: 20px;
align-items: flex-start;
margin: 0 0 26px;
}
.np-boss-art {
flex: 0 0 360px;
max-width: 360px;
line-height: 0;
}
.np-boss-art img {
width: 100%;
height: auto;
display: block;
border: 2px solid var(--box-head);
border-radius: 4px;
}
.np-boss-info {
flex: 1 1 auto;
/* Without this a long drop list forces the flex item wider than the row. */
min-width: 0;
}
.np-boss-epithet {
font-family: 'NPDisplay', Georgia, serif;
font-size: 17px;
font-style: italic;
color: var(--ink-soft);
margin: 0 0 12px;
}
.np-boss-row {
display: flex;
gap: 12px;
padding: 7px 10px;
border-radius: 3px;
}
.np-boss-row:nth-child(odd) {
background: var(--box-alt-2);
}
.np-boss-row:nth-child(even) {
background: var(--box-alt);
}
.np-boss-label {
flex: 0 0 140px;
font-weight: 700;
color: var(--ink);
}
.np-boss-value {
flex: 1 1 auto;
min-width: 0;
}
/* Stack the card on a narrow viewport so the art keeps its full width. */
@media (max-width: 850px) {
.np-boss {
display: block;
}
.np-boss-art {
max-width: 100%;
margin: 0 0 12px;
}
.np-boss-label {
flex-basis: 110px;
}
}
/* Boss infobox: the epithet under the name, before the detail rows. */
.np-infobox .infobox-subtitle {
text-align: center;
font-style: italic;
color: var(--ink-soft);
padding: 6px 10px 8px;
background: var(--box-alt);
}
/* Every infobox runs wider on desktop so the art reads as art rather than a
thumbnail. The image is width:100% of the box, so widening the box is what
enlarges it; type sizes are untouched and the mobile auto/430px cap in the
max-width:850px block still wins on phones. The templates request a 420px
thumbnail to match, so the art is never upscaled. */
@media (min-width: 851px) {
.infobox,
.np-infobox {
width: 420px;
}
}
/* ---- Content tables (wikitable): OSRS wiki table structure mapped onto the
house palette. Core ships a light default (white header cells) that clashes
with the dark theme, so every piece is restated: surface, header band,
borders, zebra rows, caption. ---- */
table.wikitable {
background: var(--box-alt-2);
color: var(--ink);
/* 2px outer frame in the header-band tone; cells stay borderless so only the
table's 4 outer sides show it (border-collapse) */
border: 2px solid var(--box-head);
border-collapse: collapse;
box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.35);
}
table.wikitable > tr > th,
table.wikitable > tr > td,
table.wikitable > * > tr > th,
table.wikitable > * > tr > td {
border: 0;
padding: 6px 10px;
vertical-align: top;
}
table.wikitable > tr > th,
table.wikitable > * > tr > th {
background: var(--box-head);
color: var(--box-head-ink);
text-align: left;
}
table.wikitable > * > tr:nth-child(even) > td {
background: var(--box-alt);
}
table.wikitable > caption {
color: var(--ink);
font-weight: 700;
padding: 4px 8px;
}
/* Sortable header affordance on the dark band */
table.wikitable.jquery-tablesorter th.headerSort {
background-color: var(--box-head);
}
table.wikitable.jquery-tablesorter th.headerSort:hover {
background-color: color-mix(in srgb, var(--box-head) 80%, var(--np-gold));
}
/* Feat/item thumbnails inside table cells sit on the text baseline */
table.wikitable td img {
vertical-align: middle;
}
/* ---- Lore inscription blockquote (brand display face) ---- */
.np-inscription {
font-family: 'NPHoneyfolk', Georgia, serif;
font-size: 23px;
line-height: 1.45;
color: var(--ink);
border-left: 3px solid var(--accent);
padding: 10px 16px;
margin: 0 0 14px;
max-width: 640px;
background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.np-inscription small {
display: block;
font-family: 'Segoe UI', Arial, sans-serif;
font-size: 11.5px;
color: var(--ink-soft);
font-style: italic;
margin-top: 6px;
}
/* ---- Page-preview hover cards (Popups extension) ----
The extension lazy-loads its light-theme styles AFTER this sheet, so every
selector here is body-prefixed to out-rank them regardless of load order.
In clip-path browsers the pointer is cut from .mwe-popups-container, so the
container background IS the pointer fill; the ::before/::after triangles are
the extension's fallback for browsers without clip-path. */
body .mwe-popups {
background: var(--box-bg);
box-shadow:
0 30px 90px -20px rgba(0, 0, 0, 0.65),
0 0 0 1px var(--tab-line);
}
body .mwe-popups .mwe-popups-container {
color: var(--ink);
background: var(--box-bg);
}
body .mwe-popups .mwe-popups-extract {
color: var(--ink);
}
body .mwe-popups footer a {
color: var(--link);
}
/* the truncation fade dissolves into the card tone, not white */
body .mwe-popups .mwe-popups-extract[dir='ltr']::after {
background-image: linear-gradient(to right, transparent, var(--box-bg) 50%);
}
body .mwe-popups .mwe-popups-extract[dir='rtl']::after {
background-image: linear-gradient(to left, transparent, var(--box-bg) 50%);
}
/* fallback pointer triangles: repaint the white fill + grey edge */
body .mwe-popups.mwe-popups-no-image-pointer::before,
body .mwe-popups.mwe-popups-image-pointer::before,
body .mwe-popups.mwe-popups-image-pointer.flipped-x::before,
body .mwe-popups.flipped-x.mwe-popups-is-tall::before {
border-bottom-color: var(--tab-line);
}
body .mwe-popups.flipped-y::before,
body .mwe-popups.flipped-x-y::before,
body .mwe-popups.flipped-x-y.mwe-popups-is-tall::before {
border-top-color: var(--tab-line);
}
body .mwe-popups.mwe-popups-no-image-pointer::after,
body .mwe-popups.mwe-popups-image-pointer::after,
body .mwe-popups.mwe-popups-image-pointer.flipped-x::after {
border-bottom-color: var(--box-bg);
}
body .mwe-popups.flipped-y::after,
body .mwe-popups.flipped-x-y::after,
body .mwe-popups.flipped-x-y.mwe-popups-is-tall::after {
border-top-color: var(--box-bg);
}
/* the gear / close glyphs are masked SVGs tinted by background-color; the
footer glyph is a plain background-image, so it must stay untinted */
@supports (mask-image: none) or (-webkit-mask-image: none) {
body .mwe-popups .popups-icon:not(.popups-icon--footer),
body .mwe-popups-overlay .popups-icon:not(.popups-icon--footer),
body #mwe-popups-settings .popups-icon:not(.popups-icon--footer) {
background-color: var(--ink-soft);
}
}
/* the Codex buttons/radios inside the popup + settings dialog read their
colours from these variables (falling back to light defaults otherwise) */
body .mwe-popups,
body .mwe-popups-overlay,
body #mwe-popups-settings {
--color-base: var(--ink);
--color-base--hover: var(--ink);
--color-emphasized: var(--ink);
--background-color-base: var(--box-bg);
--background-color-interactive: var(--box-alt);
--background-color-interactive-subtle: var(--header);
--border-color-base: var(--tab-line);
--border-color-interactive: var(--rule);
}
/* preview-settings dialog (opened from the gear): dark panel, not stock white */
body .mwe-popups-overlay {
background-color: rgba(20, 14, 9, 0.8);
}
body #mwe-popups-settings {
background-color: var(--box-bg);
border-color: var(--tab-line);
color: var(--ink);
}
body #mwe-popups-settings header {
border-bottom-color: var(--rule);
}
body #mwe-popups-settings main#mwe-popups-settings-form p {
color: var(--ink-soft);
}
body #mwe-popups-settings main#mwe-popups-settings-form form label > span {
color: var(--ink);
}
/* ---- Category bar ---- */
.catlinks,
#catlinks {
clear: both;
margin-top: 26px;
background: transparent;
border: none;
border-top: 1px solid var(--rule);
padding-top: 10px;
font-size: 12.5px;
color: var(--ink-soft);
}
/* ============================================================
* Footer: the wiki→game funnel. "Play NOPOTIONS" is promoted from a buried plain
* link into a gold CTA button (hero, own row); the legal/meta links sit under it as
* small dot-separated text, then the copyright. #footer-* IDs are shared by Vector
* (desktop, #footer) and Minerva (mobile, .minerva-footer) so the button/link/copyright
* rules below style BOTH skins; only the container layout is per-skin.
* ============================================================ */
#footer {
background: var(--bg);
color: var(--ink-soft);
border-top: none; /* the gold ornament rule (::before) is the divider now */
margin-left: 0; /* kill Vector's default 10em margin */
padding: 32px 24px 36px; /* a centered closing band across the full width */
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
/* Homepage-style ornament rule: a gold hairline broken by a centered ✦ glyph.
The top background layer paints a bg-coloured swatch that punches a gap in the
hairline (bottom layer) so the glyph sits cleanly in the break. */
#footer::before,
.skin-minerva .minerva-footer .footer-content::before {
content: '\2726';
align-self: center;
box-sizing: border-box;
width: 100%;
max-width: 560px;
height: 16px;
line-height: 16px;
margin-bottom: 4px;
text-align: center;
font-size: 13px;
color: color-mix(in srgb, var(--np-gold) 80%, transparent);
text-shadow: 0 0 10px color-mix(in srgb, var(--np-gold) 45%, transparent);
background:
linear-gradient(var(--bg), var(--bg)) center / 36px 16px no-repeat,
linear-gradient(
90deg,
transparent,
color-mix(in srgb, var(--np-gold) 38%, transparent) 22%,
color-mix(in srgb, var(--np-gold) 38%, transparent) 78%,
transparent
)
center / 100% 1px no-repeat;
}
/* CTA + meta links first, copyright last (beats Vector-legacy's grey/small li rule) */
#footer,
#footer li,
#footer #footer-info li,
#footer #footer-places li {
color: var(--ink-soft);
font-size: 13px;
}
#footer #footer-places {
order: 1;
}
#footer #footer-info {
order: 2;
}
#footer-icons {
display: none;
}
/* ---- shared: the meta-link row (both skins) ---- */
#footer-places {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
width: 100%; /* bound to the footer width so links wrap + centre per row instead of running off the edge as one max-content line */
gap: 7px 0;
padding: 0;
margin: 0;
}
#footer-places li {
list-style: none;
}
/* ---- shared: the game CTA button (both skins) ---- */
#footer-places-playnopotions {
order: -1;
flex-basis: 100%; /* its own row, above the meta links */
display: flex;
justify-content: center;
margin-bottom: 5px;
}
#footer-places-playnopotions a,
#footer-places-playnopotions a:visited {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 10px 20px;
background: linear-gradient(
180deg,
var(--np-gold-soft) 0%,
var(--np-gold) 100%
);
color: #1c1509 !important; /* dark ink on gold */
font-weight: 700;
font-size: 14.5px;
line-height: 1;
border-radius: 999px;
box-shadow:
0 2px 9px rgba(0, 0, 0, 0.32),
inset 0 1px 0 rgba(255, 245, 220, 0.35);
transition:
transform 0.12s ease,
box-shadow 0.12s ease,
filter 0.12s ease;
}
#footer-places-playnopotions a::before {
content: ''; /* play triangle (pure CSS, no asset) */
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 10px;
border-color: transparent transparent transparent #1c1509;
}
#footer-places-playnopotions a:hover {
color: #1c1509 !important;
filter: brightness(1.05);
transform: translateY(-1px);
box-shadow:
0 5px 14px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 245, 220, 0.45);
}
/* ---- shared: meta / legal links: small, muted, dot-separated (both skins) ---- */
#footer-places li:not(#footer-places-playnopotions) a,
#footer-places li:not(#footer-places-playnopotions) a:visited {
color: var(--ink-soft);
font-size: 12.5px;
}
#footer-places li:not(#footer-places-playnopotions) a:hover {
color: var(--link);
}
/* Drop MediaWiki's own .hlist separators (the Minerva footer adds them with their own
colour, incl. a stray one after the CTA button); !important + the #id specificity beat
the .hlist-separated rule. We then re-add our own dots between the meta links only. */
#footer-places > li::after {
content: none !important;
}
#footer-places
> li:not(#footer-places-playnopotions):not(#footer-places-mobileview):not(
#footer-places-desktop-toggle
):not(:last-child):not(.np-rowend)::after {
content: '\00B7' !important;
margin: 0 9px;
color: color-mix(in srgb, var(--ink-soft) 50%, transparent);
}
/* .np-rowend is added by MediaWiki:Common.js to whichever link ends each visual
row, so a wrapped meta row never leaves a dangling separator on its right edge. */
/* Reading order of the meta links, which the skins emit in an order of their own:
About first, then the two legal links side by side the way the game's own footer
pairs them, and the view toggle last. The CTA keeps its own row above via order -1. */
#footer-places-about {
order: 1;
}
#footer-places-terms {
order: 2;
}
#footer-places-privacy {
order: 3;
}
#footer-places-mobileview,
#footer-places-desktop-toggle {
order: 4;
}
/* ---- shared: copyright (both skins) ---- */
#footer-info {
width: 100%;
margin: 0;
padding: 0;
text-align: center;
}
/* Gradient hairline framing the copyright, echoing the homepage divider. */
#footer-info::before {
content: '';
display: block;
width: 100%;
max-width: 420px;
height: 1px;
margin: 2px auto 13px;
background: linear-gradient(
90deg,
transparent,
color-mix(in srgb, var(--np-gold) 30%, transparent),
transparent
);
}
#footer-info li {
list-style: none;
margin: 0;
font-size: 12px;
letter-spacing: 0.02em;
color: color-mix(in srgb, var(--ink-soft) 88%, transparent);
}
#footer-info-lastmod {
display: none; /* drop the "last edited on…" clutter from the CTA footer */
}
/* ============================================================
* Mobile (MinervaNeue). MediaWiki:Common.css loads on EVERY skin, so the
* desktop-Vector chrome above leaks into the mobile skin: the content padding
* (content-box) overflowed the viewport, and our forced search width/padding
* fought Minerva's native search field. The parchment palette + brand fonts are
* fine to share; only neutralise the geometry that breaks the narrow layout.
* ============================================================ */
.skin-minerva #content,
.skin-minerva .mw-body {
box-sizing: border-box;
padding: 14px 16px 36px;
box-shadow: none;
}
/* ---- Mobile header: banner art on the left FADING TO THE RIGHT into
the parchment; potion mark + wordmark on the dark left, white search bar. ---- */
.skin-minerva .header-container.header-chrome {
position: relative;
background:
linear-gradient(
to right,
rgba(12, 8, 4, 0.72) 0%,
rgba(12, 8, 4, 0.55) 30%,
color-mix(in srgb, var(--bg) 42%, transparent) 46%,
var(--bg) 64%
),
url('/resources/assets/nopotions/banner.jpg') left 30% / cover no-repeat;
border-bottom: 0;
padding: 0 12px;
}
.skin-minerva .minerva-header,
.skin-minerva #mw-mf-page-center .minerva-header {
background: transparent;
align-items: center;
min-height: 54px;
}
/* Branding: the potion mark (kept in colour) then the wordmark, on the dark left. */
.skin-minerva .branding-box {
flex: 0 0 auto; /* don't let the logo grow and starve the search bar */
position: relative;
padding-left: 48px; /* room for the potion mark */
}
.skin-minerva .branding-box::before {
content: '';
position: absolute;
left: 1px;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background: url('/resources/assets/nopotions/logo.png') center / contain
no-repeat;
/* the potion is a dark navy bottle: on the dark header-left it loses its body and
reads as a dim ring, so lift the amber and rim it with a soft warm glow */
filter: brightness(1.06) saturate(1.08)
drop-shadow(0 0 3px rgba(255, 236, 205, 0.3))
drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}
/* Wordmark hidden on mobile: the potion mark (::before) carries the brand and the
freed width goes to the search bar so its placeholder is no longer clipped.
The link itself stays: stretched invisibly over the potion mark so tapping
the logo still goes Home. */
.skin-minerva .branding-box a {
display: block;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 44px; /* real hit area over the potion mark — the branding-box collapses to 0 height (its only child is out of flow + the wordmark span is hidden), so top/bottom:0 gave a zero-height, untappable link */
z-index: 2;
}
.skin-minerva .branding-box a > span {
display: none;
}
/* The hamburger sits over the dark-left banner. It's a mask glyph, so fill it with
brand bone (matching the desktop accents) rather than a glaring pure white. */
.skin-minerva .header-container .minerva-icon--menu {
background-color: var(--np-bone);
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}
/* ---- Page title area (Minerva): the page-actions row (language/watch/edit)
boxes itself in muted rules above and below, which stack under the gold
heading rule as a clutter of lines; the gold rule alone carries the
separation. ---- */
.skin-minerva .page-actions-menu {
border-top: 0;
border-bottom: 0;
}
/* The language/watch/history/edit glyphs are mask icons that otherwise keep
Minerva's default neutral grey; fill them with the warm secondary foreground. */
.skin-minerva .page-actions-menu .minerva-icon {
background-color: var(--np-secondary-fg) !important;
}
/* ---- Contents box (Minerva): the section list is collapsed behind a toggle
(visibility:hidden on the ul) so the box rendered empty; show the sections
like desktop and drop the now-redundant toggle. Minerva's 44px list/heading
indents (made for its own icon layout) go too: our box pads itself. ---- */
.skin-minerva .toc .toctogglecheckbox ~ ul {
visibility: visible !important;
height: auto !important;
}
.skin-minerva .toc .toctogglespan,
.skin-minerva .toc .toc-title-state-icon {
display: none; /* the always-open list makes the toggle + its chevron dead controls */
}
.skin-minerva .toc > ul {
margin: 0;
padding: 10px 26px 12px 16px; /* Minerva zeroes the core list padding it laid out for its own 44px icon gutter */
}
.skin-minerva .toc .toctitle h2 {
margin: 0;
}
/* Minerva turns every content table into a scrollable block, which leaves the
infobox's rows at natural width with a dead band to their right; the infobox
table is small and must simply fill its card. */
.skin-minerva .infobox table,
.skin-minerva .np-infobox table {
display: table;
width: 100%;
}
/* ---- Mobile nav drawer (Minerva main menu). Default is a blinding white panel with
grey rows/gaps and dark-grey icons; repaint the whole thing in the dark theme:
solid dark panel, bone mask-icons, warm low-alpha dividers, tan links. ---- */
.skin-minerva #mw-mf-page-left,
.skin-minerva .navigation-drawer,
.skin-minerva #mw-mf-page-left .toggle-list__list,
.skin-minerva #mw-mf-page-left .toggle-list-item,
.skin-minerva #mw-mf-page-left .toggle-list-item__anchor,
.skin-minerva #mw-mf-page-left .menu__item--about,
.skin-minerva #mw-mf-page-left .menu__item--disclaimers {
background: transparent;
}
.skin-minerva #mw-mf-page-left {
background: var(--bg);
color: var(--ink);
}
/* Default Minerva pads each menu group with a tall (22px) bottom band, which reads as
big awkward gaps in the dark theme. Collapse the groups into one continuous list and
let a single subtle divider per row carry the separation instead. */
.skin-minerva #mw-mf-page-left .toggle-list__list,
.skin-minerva #mw-mf-page-left ul {
margin: 0;
padding-top: 0;
padding-bottom: 0;
border-color: color-mix(in srgb, var(--rule) 30%, transparent);
}
/* The skin draws each row's divider as a border-TOP reading the muted border token,
and the palette maps that token to the rule colour at full strength, so every row
was separated by a solid tan line. Recolour the token inside the drawer rather than
restyling each border, and let that single hairline be the only line a row has: our
own border-bottom used to stack a second line under the skin's. */
.skin-minerva #mw-mf-page-left {
--border-color-muted: color-mix(in srgb, var(--rule) 24%, transparent);
}
/* No hairline between links at all. The skin rules one under every row except a
first child, which is why one boundary in the drawer always looked right and the
rest looked hard; matching that clean boundary everywhere reads better than any
divider does, and the section labels below carry the grouping on their own. */
.skin-minerva #mw-mf-page-left .toggle-list-item {
border-top: 0;
border-bottom: 0;
}
/* Section labels on the groups Common.js rebuilds in the drawer: small, warm, letter
spaced, with the room above them doing the separating. A label is not a row, so no
line is drawn above it or under it, and its left edge lines up with the link text
above (the skin pads the anchor, not the item, hence the matching pixel value). */
.skin-minerva #mw-mf-page-left .np-drawer-heading,
.skin-minerva #mw-mf-page-left .np-drawer-heading + .toggle-list-item {
border-top: 0;
border-bottom: 0;
}
.skin-minerva #mw-mf-page-left .np-drawer-heading {
color: var(--ink-soft);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
padding: 26px 14px 8px;
text-transform: uppercase;
}
/* Rows lose the 1px the skin's overlap trick assumed, so give the links their own
breathing room and a warm press state in place of the divider. */
.skin-minerva #mw-mf-page-left .toggle-list-item__anchor {
padding-bottom: 0.62em;
padding-top: 0.62em;
}
.skin-minerva #mw-mf-page-left .toggle-list-item__anchor:active {
background: color-mix(in srgb, var(--np-bone) 13%, transparent);
}
/* footer links (About / Disclaimers) are an inline list: give them breathing room from
the list above and drop the per-item divider (a partial underline reads as a stray rule) */
.skin-minerva #mw-mf-page-left ul.hlist {
padding-top: 8px;
}
.skin-minerva #mw-mf-page-left ul.hlist .toggle-list-item {
border-bottom: 0;
}
.skin-minerva #mw-mf-page-left .toggle-list-item__anchor,
.skin-minerva #mw-mf-page-left .toggle-list-item__label {
color: var(--ink);
}
.skin-minerva #mw-mf-page-left .toggle-list-item__anchor:hover,
.skin-minerva #mw-mf-page-left .toggle-list-item__anchor:focus {
background: color-mix(in srgb, var(--np-bone) 9%, transparent);
color: var(--ink);
}
/* mask-glyph icons (home/die/recentChanges/…): fill with brand bone like the hamburger */
.skin-minerva #mw-mf-page-left .minerva-icon {
background-color: var(--np-bone);
}
/* footer links (About NOPOTIONS Wiki, Disclaimers, …): brand tan links */
.skin-minerva #mw-mf-page-left .hlist a,
.skin-minerva #mw-mf-page-left .menu__item--about,
.skin-minerva #mw-mf-page-left .menu__item--disclaimers {
color: var(--link);
}
.skin-minerva #mw-mf-page-left .hlist a:hover,
.skin-minerva #mw-mf-page-left .menu__item--about:hover,
.skin-minerva #mw-mf-page-left .menu__item--disclaimers:hover {
color: var(--link-hover);
}
/* ---- User-menu dropdown (tap the avatar → "Log in"/account). Same default white card
as the drawer but a separate element, so theme it too: dark floating panel, bone
mask-icons, tan text. `!important` beats Codex's --background-color-base white. ---- */
.skin-minerva .minerva-user-menu-list {
background: var(--box-bg) !important;
border: 1px solid var(--rule);
border-radius: 6px;
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
color: var(--ink);
overflow: hidden;
}
.skin-minerva .minerva-user-menu-list .toggle-list-item {
background: transparent;
border-bottom: 1px solid color-mix(in srgb, var(--rule) 22%, transparent);
}
.skin-minerva .minerva-user-menu-list .toggle-list-item:last-child {
border-bottom: 0;
}
.skin-minerva .minerva-user-menu-list .toggle-list-item__anchor,
.skin-minerva .minerva-user-menu-list .toggle-list-item__label {
background: transparent;
color: var(--ink);
}
.skin-minerva .minerva-user-menu-list .toggle-list-item__anchor:hover,
.skin-minerva .minerva-user-menu-list .toggle-list-item__anchor:focus {
background: color-mix(in srgb, var(--np-bone) 9%, transparent);
color: var(--ink);
}
.skin-minerva .minerva-user-menu-list .minerva-icon {
background-color: var(--np-bone);
}
/* the avatar toggle in the header (currently a dim grey glyph) → brand bone like the hamburger */
.skin-minerva .header-container .minerva-icon--userAvatarOutline,
.skin-minerva .minerva-user-menu .minerva-icon--userAvatarOutline {
background-color: var(--np-bone);
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}
/* Force the full search bar visible at every width (Minerva hides the form with
`.minerva-header .minerva-search-form{display:none!important}` below ~720px and
shows a trigger icon); override it, flex the chain so the input fills, drop the
redundant trigger. */
.skin-minerva .header-container .minerva-header .minerva-search-form {
display: flex !important;
flex: 1 1 auto;
min-width: 0;
margin: 0 4px 0 10px;
align-items: center;
}
.skin-minerva .header-container button.skin-minerva-search-trigger {
display: none !important;
}
.skin-minerva .minerva-search-form .search-box {
position: relative;
flex: 1 1 auto;
width: auto;
min-width: 0;
display: block;
}
.skin-minerva #searchInput,
.skin-minerva input.search {
display: block !important;
box-sizing: border-box;
width: 100% !important;
max-width: none;
height: 34px;
/* match the desktop search field: near-black box, no border, 4px radius, and the
bone magnifier as the input's own right-aligned background (no shadow) */
padding: 0 32px 0 12px;
border: none;
border-radius: 4px;
background: var(--box-bg)
url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2020'%20fill='none'%20stroke='%23b79d7e'%20stroke-width='2'%3E%3Ccircle%20cx='8.5'%20cy='8.5'%20r='5.5'/%3E%3Cpath%20d='M13%2013l4.5%204.5'/%3E%3C/svg%3E")
no-repeat right 10px center;
background-size: 15px;
color: var(--ink);
}
.skin-minerva #searchInput::placeholder {
color: #a4a1a1;
}
/* The magnifier now lives inside the input (right-aligned, like desktop), so hide
Minerva's separate left-side search icon overlay. */
.skin-minerva .search-box-icon-overlay {
display: none;
}
/* ---- Mobile search overlay (MobileFrontend): tapping the header search opens a
full-screen overlay that defaults to a blinding white panel. Bring it onto the
dark theme so it matches the desktop search. Uses !important because MF injects
the overlay's own stylesheet at runtime. ---- */
.skin-minerva .search-overlay {
background: var(--bg) !important;
color: var(--ink);
}
/* The overlay header reuses the page-header classes (header-container
header-chrome), so it inherits that rule's 12px side padding while MF sizes
it width:100% content-box: 24px of overflow that pushed the Close X off the
right edge. border-box restores the fit. The input is its own bordered box,
so the container's bottom rule adds nothing but a stray line: drop it. */
.skin-minerva .search-overlay .overlay-header-container {
box-sizing: border-box;
background: var(--bg) !important;
border-bottom: 0;
box-shadow: none;
}
/* MF indents the search field 15px past the container padding (room for its
own left magnifier, which we hide): flush left so the field and the Close X
sit symmetric in the header. */
.skin-minerva .search-overlay .overlay-title {
padding-left: 0;
}
.skin-minerva .search-overlay .overlay-content,
.skin-minerva .search-overlay .search-results-view,
.skin-minerva .search-overlay .search-content {
background: transparent !important;
color: var(--ink);
}
/* the overlay's input reuses the dark header-input styling; drop the browser's
blue focus ring for a themed gold one */
.skin-minerva .search-overlay input.search:focus {
outline: none;
border-color: var(--np-gold);
box-shadow: 0 0 0 2px rgba(216, 163, 63, 0.28);
}
/* MF draws its own magnifier on the left of the overlay search-box (a mask ::before);
hide it since our right-aligned magnifier (matching desktop) is on the input */
.skin-minerva .search-overlay .search-box::before {
display: none !important;
}
/* back / clear / result icons are mask glyphs: fill them with theme ink */
.skin-minerva .search-overlay .mf-icon {
background-color: var(--ink) !important;
}
.skin-minerva .search-overlay .mf-icon-articlesSearch {
background-color: var(--ink-soft) !important;
}
.skin-minerva .search-overlay .caption,
.skin-minerva .search-overlay .without-results,
.skin-minerva .search-overlay .with-results {
color: var(--ink-soft) !important;
}
.skin-minerva .search-overlay .search-content a,
.skin-minerva .search-overlay .page-summary .title {
color: var(--link) !important;
}
.skin-minerva .search-overlay .page-summary,
.skin-minerva .search-overlay li,
.skin-minerva .search-overlay .page-list li {
border-color: var(--rule) !important;
}
/* Result rows: MF paints the list on --background-color-base (white before the
token override) with a grey drop shadow, a light thumb column, and grey
titles. Keep it all on the dark theme even if MF injects its stylesheet
after ours. */
.skin-minerva .search-overlay .results,
.skin-minerva .search-overlay .search-feedback {
background-color: var(--bg) !important;
box-shadow: none !important;
}
.skin-minerva .search-overlay .results .page-summary h2,
.skin-minerva .search-overlay .results .page-summary h3 {
color: var(--ink) !important;
}
.skin-minerva .search-overlay .list-thumb {
background-color: var(--box-alt) !important;
}
/* The desktop footer indents under its sidebar column; reset it on mobile. */
.skin-minerva #footer {
padding-left: 16px;
}
/* ---- Mobile footer (Minerva): defaults to a grey panel with blue links;
bring it onto the parchment theme. ---- */
/* Minerva's page wrapper is grey (#eaecf0) and min-height:100%, so it shows
below the footer/content; put it on the page tan. */
.skin-minerva #mw-mf-page-center {
background: var(--bg);
}
.skin-minerva .minerva-footer {
background: var(--bg);
color: var(--ink-soft);
border-top: none; /* ornament rule (::before) is the divider, matching desktop */
}
/* The bar starts grey, then Minerva's JS flips it to a blue "recent edit"
highlight at runtime (inline/JS style, not in the stylesheet); force our tan +
dark text/icons over every state with !important. */
.skin-minerva a.last-modified-bar {
background: var(--box-alt) !important;
color: var(--ink) !important;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.skin-minerva a.last-modified-bar span,
.skin-minerva a.last-modified-bar b,
.skin-minerva a.last-modified-bar .last-modified-bar__text,
.skin-minerva a.last-modified-bar .last-modified-bar__text * {
color: var(--ink) !important;
}
.skin-minerva a.last-modified-bar .minerva-icon {
background-color: var(--ink) !important;
}
/* Mobile footer body: stack CTA → meta links → copyright (same order as desktop). The
footer-* IDs above carry the button/link/copyright design; this just lays them out. */
.skin-minerva .minerva-footer .footer-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 13px;
padding: 26px 16px 28px;
}
.skin-minerva .minerva-footer #footer-places {
order: 1;
}
.skin-minerva .minerva-footer #footer-info {
order: 2;
}
/* Minerva's JS hides most footer-places links on mobile (default mobile footer is just
Privacy + Desktop): force back exactly the game CTA + meta links we want (not the
stray "Edit preview settings" Minerva also tucks in there). */
.skin-minerva .minerva-footer #footer-places-playnopotions,
.skin-minerva .minerva-footer #footer-places-about,
.skin-minerva .minerva-footer #footer-places-privacy,
.skin-minerva .minerva-footer #footer-places-terms,
.skin-minerva .minerva-footer #footer-places-mobileview,
.skin-minerva .minerva-footer #footer-places-desktop-toggle {
display: block !important;
}
.skin-minerva .minerva-footer a:hover {
color: var(--link-hover);
}
/* Redundant now the CTA carries the brand; drop it and the empty Languages block. */
.skin-minerva .minerva-footer-logo,
.skin-minerva .minerva-footer #p-lang {
display: none;
}
/* ============================================================
* Main Page (landing). Centered on the tan page background with
* update cards, nav cards, popular pages and community panels. Thumbnails are
* baked assets; social icons are data-URI SVGs. Cards are wikilink-wrapped divs.
* ============================================================ */
.page-Main_Page #firstHeading {
display: none;
}
.page-Main_Page #content {
background: var(
--content
); /* the content column parchment (was page-bg, which made cards dissolve into the background) */
box-shadow: none;
padding: 22px 24px 55px;
}
.page-Main_Page #content > .mw-parser-output > p:empty,
.page-Main_Page .mw-empty-elt {
display: none;
}
.mp-wrap {
max-width: 1180px;
margin: 0 auto;
}
.mp-head {
position: relative;
}
.mp-welcome {
font-family: 'NPDisplay', Georgia, serif;
font-size: 34px;
font-weight: 700;
color: var(--ink);
border: none;
margin: 0 0 10px;
padding: 0;
}
.mp-head .intro {
font-size: 16px;
/* fill the wrap like the cards below it (the stats block sits up at the heading
level, so the intro has no reason to clamp narrower than the rest of the page) */
max-width: none;
margin: 0;
}
.mp-stats {
position: absolute;
top: 3px;
right: 0;
margin: 0;
padding: 0;
list-style: none;
display: flex;
gap: 9px;
}
.mp-stats li {
display: inline-flex;
align-items: center;
/* No flex `gap`: the content is three flex items (icon, <b>number</b>, word), so a
uniform gap would space number↔word as widely as icon↔number. Space the icon and
the number explicitly instead, leaving a natural text gap before the word. */
margin: 0;
padding: 6px 12px; /* symmetric: leading icon already anchors the left, so equal L/R reads balanced */
background: var(--box-bg);
border-radius: 999px;
font-size: 13px;
color: var(--ink-soft);
white-space: nowrap;
}
.mp-stats b {
color: var(--link);
font-weight: 700;
font-size: 14px;
margin-right: 0.3em; /* number↔word */
}
.mp-stats li::before {
content: '';
flex: 0 0 auto;
width: 17px;
height: 17px;
margin-right: 7px; /* icon↔number */
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.mp-stats li:first-child::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23b79d7e' d='M103.432 17.844a87 87 0 0 0-3.348.08q-3.822.163-7.604.678c-20.167 2.747-39.158 13.667-52.324 33.67c-24.613 37.4 2.194 98.025 56.625 98.025c.536 0 1.058-.012 1.583-.022v.704h60.565c-10.758 31.994-30.298 66.596-52.448 101.43a283 283 0 0 0-6.29 10.406l34.878 35.733l-56.263 9.423c-32.728 85.966-27.42 182.074 48.277 182.074v-.002l9.31.066c23.83-.57 46.732-4.298 61.325-12.887c4.174-2.458 7.63-5.237 10.467-8.42h-32.446c-20.33 5.95-40.8-6.94-47.396-25.922c-8.956-25.77 7.52-52.36 31.867-60.452a55.6 55.6 0 0 1 17.565-2.834v-.406h178.33c-.57-44.403 16.35-90.125 49.184-126c23.955-26.176 42.03-60.624 51.3-94.846l-41.225-24.932l38.272-6.906l-43.37-25.807h-.005l.002-.002l.002.002l52.127-8.85c-5.232-39.134-28.84-68.113-77.37-68.113C341.14 32.26 222.11 35.29 149.34 28.496c-14.888-6.763-30.547-10.723-45.908-10.652m.464 18.703c13.137.043 27.407 3.804 41.247 10.63l.033-.07c4.667 4.735 8.542 9.737 11.68 14.985H82.92l10.574 14.78c10.608 14.83 19.803 31.99 21.09 42.024c.643 5.017-.11 7.167-1.814 8.836c-1.705 1.67-6.228 3.875-15.99 3.875c-40.587 0-56.878-44.952-41.012-69.06C66.238 46.64 79.582 39.22 95.002 37.12a64 64 0 0 1 8.894-.573M118.5 80.78h46.28c4.275 15.734 3.656 33.07-.544 51.51H131.52c1.9-5.027 2.268-10.574 1.6-15.77c-1.527-11.913-7.405-24.065-14.62-35.74m101.553 317.095c6.44 6.84 11.192 15.31 13.37 24.914c3.797 16.736 3.092 31.208-1.767 43.204c-4.526 11.175-12.576 19.79-22.29 26h237.19c14.448 0 24.887-5.678 32.2-14.318c7.312-8.64 11.2-20.514 10.705-32.352a47.7 47.7 0 0 0-2.407-13.18l-69.91-8.205l42.017-20.528c-8.32-3.442-18.64-5.537-31.375-5.537H220.053zm-42.668.506a37 37 0 0 0-3.457.153a34.8 34.8 0 0 0-7.824 1.63c-15.11 5.02-25.338 21.54-20.11 36.583c3.673 10.57 15.347 17.71 25.654 13.938l1.555-.57h43.354c.946-6.36.754-13.882-1.358-23.192c-3.71-16.358-20.543-28.483-37.815-28.54z'/%3E%3C/svg%3E");
}
.mp-stats li:last-child::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23b79d7e' d='m256 29.816l-231 154v106.368l231-154l231 154V183.816zm0 128.043L105 259.783v90.283l151-101.925l151 101.925v-90.283zm0 112l-87 58.725v67.6l87-58l87 58v-67.6zm0 89.957l-87 58v64.368l87-58l87 58v-64.368z'/%3E%3C/svg%3E");
}
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin: 22px 0;
clear: both;
}
.nav-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 14px;
margin: 22px 0 8px;
}
.np-card,
.nav-card {
display: block;
background: var(--box-bg); /* consistent dark card surface, no border */
border-radius: 6px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(40, 30, 15, 0.12);
}
/* Equal-height update cards: stretch the wikilink to the grid row, let the card
fill it and the body absorb the slack so varied description lengths still align */
.card-grid > a {
display: flex;
}
.np-card {
display: flex;
flex-direction: column;
width: 100%;
}
.np-card .thumb {
flex-shrink: 0;
}
.np-card .body {
flex: 1 1 auto;
}
.np-card a,
.nav-card a {
display: block;
text-decoration: none;
color: inherit;
}
.np-card:hover,
.nav-card:hover {
box-shadow: 0 2px 9px rgba(40, 30, 15, 0.24);
}
.np-card .thumb {
display: block;
height: 150px;
background-color: #312a25;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.nav-card .thumb {
display: block;
height: 118px;
background-color: #312a25;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.np-card .body {
display: block;
padding: 12px 14px 16px;
}
.np-card .date {
display: block;
color: var(--link);
font-size: 13px;
}
.np-card .date b {
color: var(--link);
}
.np-card .card-title {
display: block;
font-family: 'NPDisplay', Georgia, serif;
font-size: 19px;
margin: 4px 0 8px;
color: var(--ink);
}
.np-card .desc {
display: block;
font-size: 14px;
color: var(--ink);
}
.np-card:hover .card-title {
color: var(--link);
}
/* Card hover: underline only the title + description, leave the date/type line clean. */
.card-grid > a:hover {
text-decoration: none;
}
.card-grid > a:hover .card-title,
.card-grid > a:hover .desc {
text-decoration: underline;
}
.nav-card .label {
display: block;
text-align: center;
padding: 11px 6px 12px;
font-family: 'NPDisplay', Georgia, serif;
font-size: 20px;
font-weight: bold;
color: var(--ink);
}
.nav-card:hover .label {
color: var(--link);
}
.thumb-u30a {
background-image: url('https://wiki-media.nopotions.com/Alpha-0.0.30a-quickstart.jpg');
}
.thumb-u30 {
background-image: url('https://wiki-media.nopotions.com/Alpha-0.0.30-1.webp');
}
.thumb-u29a {
background-image: url('https://wiki-media.nopotions.com/Alpha-0.0.29a-1.webp');
}
.thumb-u29 {
background-image: url('https://wiki-media.nopotions.com/Alpha-0.0.29-1.webp');
}
.thumb-u28 {
background-image: url('/resources/assets/nopotions/updates/alpha-0.0.28-1.webp');
}
.thumb-u27 {
background-image: url('/resources/assets/nopotions/updates/alpha-0.0.27-partB.webp');
}
.thumb-u26 {
background-image: url('/resources/assets/nopotions/updates/alpha-0.0.26.webp');
}
.thumb-classes {
background-image: url('/resources/assets/nopotions/nav/classes.webp');
}
.thumb-skills {
background-image: url('/resources/assets/nopotions/nav/skills.webp');
}
.thumb-characters {
background-image: url('/resources/assets/nopotions/nav/characters.webp');
background-position: center 30%;
}
.thumb-locations {
background-image: url('/resources/assets/nopotions/nav/locations.webp');
}
.thumb-religion {
background-image: url('/resources/assets/nopotions/nav/religion.webp');
background-position: center 25%;
}
.mp-lower {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 18px;
margin: 26px 0 8px;
align-items: start;
}
.np-panel {
background: var(--box-bg);
border-radius: 6px;
padding: 16px 18px 18px;
box-shadow: 0 1px 3px rgba(40, 30, 15, 0.12);
}
.panel-title {
font-family: 'NPDisplay', Georgia, serif;
font-size: 22px;
font-weight: bold;
color: var(--ink);
margin: 0 0 13px;
}
.pop-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.pop-grid a {
display: block;
text-align: center;
padding: 11px 8px;
border-radius: 4px;
background: var(--np-bone);
color: var(--box-bg) !important;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}
.pop-grid a:hover {
background: var(--np-bone-soft);
text-decoration: none;
}
.mp-side {
display: flex;
flex-direction: column;
gap: 14px;
}
.mp-discord {
display: flex;
flex-direction: column;
background: #5865f2;
border-radius: 6px;
overflow: hidden;
color: #fff !important;
text-decoration: none;
box-shadow: 0 1px 3px rgba(40, 30, 15, 0.16);
}
.mp-discord:hover {
background: #4853d6;
text-decoration: none;
}
/* Play-the-game card: same anatomy as the Discord card (shares the dc-*
structural rules below), brand bone with dark ink */
.mp-play {
display: flex;
flex-direction: column;
background: var(--np-bone);
border-radius: 6px;
overflow: hidden;
color: #1b1612 !important;
text-decoration: none;
box-shadow: 0 1px 3px rgba(40, 30, 15, 0.16);
}
.mp-play:hover {
background: var(--np-bone-soft);
text-decoration: none;
}
.mp-play .ic {
width: 42px;
height: 42px;
flex: 0 0 auto;
/* the potion logo (baked skin asset), not a play glyph */
background: url('/resources/assets/nopotions/logo.png') center/contain
no-repeat;
}
.mp-play .dc-chev {
flex: 0 0 auto;
width: 11px;
height: 22px;
opacity: 0.85;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1612' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E")
center/contain no-repeat;
}
/* The wrapping external link (the only direct <a> child of .mp-side) underlines the
whole card on hover by default: the text-decoration lives on the <a>, not the span. */
.mp-side > a.external,
.mp-side > a.external:hover {
text-decoration: none !important;
}
/* Top row: big glyph, title + subtitle, chevron pinned right (shared with .mp-play) */
.mp-discord .dc-top,
.mp-play .dc-top {
display: flex;
align-items: center;
gap: 14px;
padding: 15px 16px;
}
.mp-discord .ic {
width: 42px;
height: 42px;
flex: 0 0 auto;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M20.317 4.37a19.79 19.79 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.74 19.74 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.1 13.1 0 0 1-1.872-.892.077.077 0 0 1-.008-.128c.126-.094.252-.192.372-.291a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.009c.12.099.246.198.373.292a.077.077 0 0 1-.006.127 12.3 12.3 0 0 1-1.873.892.077.077 0 0 0-.041.106c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.84 19.84 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.182 0-2.157-1.085-2.157-2.419 0-1.333.956-2.418 2.157-2.418 1.21 0 2.176 1.096 2.157 2.418 0 1.334-.956 2.42-2.157 2.42zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.418 2.157-2.418 1.21 0 2.176 1.096 2.157 2.418 0 1.334-.946 2.42-2.157 2.42z'/%3E%3C/svg%3E")
center/contain no-repeat;
}
.mp-discord .dc-txt,
.mp-play .dc-txt {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-width: 0;
}
.mp-discord .t,
.mp-play .t {
font-family: 'NPDisplay', Georgia, serif;
font-size: 20px;
font-weight: bold;
line-height: 1.1;
}
.mp-discord .s,
.mp-play .s {
font-size: 13px;
opacity: 0.9;
margin-top: 3px;
}
.mp-discord .dc-chev {
flex: 0 0 auto;
width: 11px;
height: 22px;
opacity: 0.85;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E")
center/contain no-repeat;
}
/* Bottom banner: darker bar ("OFFICIAL DISCORD" / "NOPOTIONS.COM"), shared */
.mp-discord .dc-bar,
.mp-play .dc-bar {
background: rgba(0, 0, 0, 0.17);
text-align: center;
font-family: 'Segoe UI', Arial, sans-serif;
font-weight: bold;
font-size: 12px;
letter-spacing: 0.09em;
text-transform: uppercase;
padding: 9px 8px;
}
.mp-wrap a.external {
background: none !important;
padding-right: 0 !important;
}
.social-row {
display: flex;
gap: 10px;
}
.social-row a {
display: flex;
flex: 1 1 0; /* every icon grows equally so the row fills the column, no dead space */
text-decoration: none;
}
.social-row a > span {
display: block;
width: 100%;
height: 44px;
border-radius: 9px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background-color: var(--box-bg);
background-repeat: no-repeat;
background-position: center;
background-size: 22px;
}
.social-row a:hover > span {
background-color: var(--content);
}
.s-x {
background-color: #15181c;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23dbc49a'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}
.s-reddit {
background-color: #ff4500;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23dbc49a'%3E%3Cpath d='M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286C.775 23.225 1.097 24 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0Zm4.388 3.199c1.104 0 1.999.895 1.999 1.999 0 1.105-.895 2-1.999 2-.946 0-1.739-.657-1.947-1.539v.002c-1.147.162-2.032 1.15-2.032 2.341v.007c1.776.067 3.4.567 4.686 1.363.473-.363 1.064-.58 1.707-.58 1.547 0 2.802 1.254 2.802 2.802 0 1.117-.655 2.081-1.601 2.531-.088 3.256-3.637 5.876-7.997 5.876-4.361 0-7.905-2.617-7.998-5.87-.954-.447-1.614-1.415-1.614-2.538 0-1.548 1.255-2.802 2.803-2.802.645 0 1.239.218 1.712.585 1.275-.79 2.881-1.291 4.64-1.365v-.01c0-1.663 1.263-3.034 2.88-3.207.188-.911.993-1.595 1.959-1.595Zm-8.085 8.376c-.784 0-1.459.78-1.506 1.797-.047 1.016.64 1.429 1.426 1.429.786 0 1.371-.369 1.418-1.385.047-1.017-.553-1.841-1.338-1.841Zm7.406 0c-.786 0-1.385.824-1.338 1.841.047 1.017.634 1.385 1.418 1.385.785 0 1.473-.413 1.426-1.429-.046-1.017-.721-1.797-1.506-1.797Zm-3.703 4.013c-.974 0-1.907.048-2.77.135-.147.015-.241.168-.183.305.483 1.154 1.622 1.964 2.953 1.964 1.33 0 2.47-.81 2.953-1.964.057-.137-.037-.29-.184-.305-.863-.087-1.795-.135-2.769-.135Z'/%3E%3C/svg%3E");
}
.s-youtube {
background-color: #ff0000;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23dbc49a'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}
.s-instagram {
background-color: #c13584;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23dbc49a'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z'/%3E%3C/svg%3E");
}
.s-tiktok {
background-color: #010101;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23dbc49a'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E");
}
.s-facebook {
background-color: #1877f2;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23dbc49a'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E");
}
.side-help {
background: var(
--box-bg
); /* dark card surface, matching the update/nav cards */
border-radius: 6px;
padding: 16px 18px 12px;
box-shadow: 0 1px 3px rgba(40, 30, 15, 0.12);
}
.side-help .panel-title {
color: var(--ink);
font-size: 20px;
margin: 0 0 8px;
}
.side-help p {
font-size: 13px;
margin: 0 0 12px;
color: var(--ink);
}
.side-help ul {
list-style: none;
margin: 0;
padding: 8px 0 0;
border-top: 1px solid var(--rule);
}
.side-help li {
padding: 4px 0;
}
.side-help li a {
color: var(--link) !important;
font-size: 13px;
}
.side-help li a:hover {
color: var(--link-hover);
}
@media (max-width: 850px) {
.card-grid,
.nav-grid,
.mp-lower,
.pop-grid {
grid-template-columns: 1fr;
}
/* Update-page section rows unstack: notes first, shot full width beneath. */
.np-pn-row {
display: block;
}
.np-pn-shot {
width: 100%;
max-width: 560px;
margin: 14px auto 0;
}
/* The right-rail infobox has no rail to sit in on a narrow viewport: floated,
it squeezes the prose into a skinny wrapped column and overflows the right
edge. Un-float it and let it fill the content column (capped so it stays a
card, centered, on the wider end of the range). */
.infobox,
.np-infobox {
float: none;
clear: both;
width: auto;
max-width: 430px;
margin: 6px auto 18px;
}
/* stack the stats at the top-left, aligned to the content edge (Minerva's list
padding would otherwise indent the ul past the heading) and sized down a touch */
.skin-minerva .mp-stats {
position: static;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
margin: 8px 0 14px;
padding: 0;
gap: 8px;
}
.mp-stats {
position: static;
text-align: left;
margin: 8px 0 14px;
}
/* identical fixed-height pills: pin the height, centre the content, and keep L/R
padding symmetric so the pill doesn't read lopsided (the leading icon anchors
the left already). */
.mp-stats li {
font-size: 12px;
height: 30px;
padding: 0 12px;
box-sizing: border-box;
align-items: center;
}
.mp-stats li::before {
width: 15px;
height: 15px;
margin-right: 6px;
background-size: 15px 15px;
}
.mp-stats b {
font-size: 13px;
}
/* Minerva puts a stray margin-bottom on the last list item; in the centered flex
row that offsets one pill from the other by ~7px. Force both flush so they align. */
.skin-minerva .mp-stats li {
margin: 0 !important;
}
/* Trim the excessive mobile main-page top gap: the main-page #content still uses the
desktop padding (22px top / 24px sides) and Minerva reserves an empty ~20px
pre-content block above the body: together they push the pills way down. */
.page-Main_Page #content {
padding: 12px 16px 36px;
}
.page-Main_Page .pre-content {
padding-top: 0;
}
}
/* ---- Damage type icons (Template:Dmg): the in-game mono glyphs, masked
and tinted with the damage-type text palette from apps/web
src/styles/damage-styles.ts. apps/web is the source of truth. ---- */
.np-dmg {
display: inline-block;
width: 15px;
height: 15px;
vertical-align: -2px;
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
}
.np-dmg.slash {
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB4PSIwIiB5PSIwIiB2aWV3Qm94PSIwIDAgNjgyLjY2NyA2ODIuNjY3IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48ZGVmcz48Y2xpcFBhdGggaWQ9ImEiIGNsaXBQYXRoVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNMCA1MTJoNTEyVjBIMFoiIGZpbGw9IiMwMDAwMDAiIG9wYWNpdHk9IjEiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiPjwvcGF0aD48L2NsaXBQYXRoPjwvZGVmcz48cGF0aCBkPSJtMCAwIDg4LjY3MSA4OC42NzEiIHN0eWxlPSJzdHJva2Utd2lkdGg6MTU7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiB0cmFuc2Zvcm09Im1hdHJpeCgxLjMzMzMzIDAgMCAtMS4zMzMzMyA0NC41NjggNTA2LjgzMikiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIxNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9Im5vbmUiIHN0cm9rZS1vcGFjaXR5PSIiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiPjwvcGF0aD48cGF0aCBkPSJtMCAwLTg4LjM0OS04OC4zNDkiIHN0eWxlPSJzdHJva2Utd2lkdGg6MTU7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiB0cmFuc2Zvcm09Im1hdHJpeCgxLjMzMzMzIDAgMCAtMS4zMzMzMyAyMDYuODU2IDQzMy45NTMpIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMTUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtZGFzaGFycmF5PSJub25lIiBzdHJva2Utb3BhY2l0eT0iIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIj48L3BhdGg+PHBhdGggZD0ibTAgMCAxNi4zMzUtMzkuOTU1IiBzdHlsZT0ic3Ryb2tlLXdpZHRoOjE1O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgdHJhbnNmb3JtPSJtYXRyaXgoMS4zMzMzMyAwIDAgLTEuMzMzMzMgMTM1LjY0MyA0MjIuOTM1KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjE1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLWRhc2hhcnJheT0ibm9uZSIgc3Ryb2tlLW9wYWNpdHk9IiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCI+PC9wYXRoPjxwYXRoIGQ9Im0wIDAgMTYuMzM2LTM5Ljk1NiIgc3R5bGU9InN0cm9rZS13aWR0aDoxNTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMgMCAwIC0xLjMzMzMzIDkxLjg1NyA0NjYuNzIpIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMTUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtZGFzaGFycmF5PSJub25lIiBzdHJva2Utb3BhY2l0eT0iIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIj48L3BhdGg+PGcgY2xpcC1wYXRoPSJ1cmwoI2EpIiB0cmFuc2Zvcm09Im1hdHJpeCgxLjMzMzMzIDAgMCAtMS4zMzMzMyAwIDY4Mi42NjcpIj48cGF0aCBkPSJtMCAwLTMxLjE3OCAzMS4xNzhjLTUuOTUyIDUuOTUyLTUuOTUyIDE1LjYwMiAwIDIxLjU1NWwuMjczLjI3MmM1Ljk1MiA1Ljk1MyAxNS42MDIgNS45NTMgMjEuNTU0IDBsMzEuMTc4LTMxLjE3N2M1Ljk1My01Ljk1MyA1Ljk1My0xNS42MDMgMC0yMS41NTZMMjEuNTU1IDBDMTUuNjAzLTUuOTUyIDUuOTUyLTUuOTUyIDAgMFoiIHN0eWxlPSJzdHJva2Utd2lkdGg6MTU7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0My4xNDIgNzYuODg2KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjE1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLWRhc2hhcnJheT0ibm9uZSIgc3Ryb2tlLW9wYWNpdHk9IiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCI+PC9wYXRoPjxwYXRoIGQ9Im0wIDAtNDQuOTE3LTQ0LjkxNyIgc3R5bGU9InN0cm9rZS13aWR0aDoxNTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI2Ni42MzggMzc4LjY2MykiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIxNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9Im5vbmUiIHN0cm9rZS1vcGFjaXR5PSIiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiPjwvcGF0aD48cGF0aCBkPSJtMCAwIDUuNjcxIDI5LjY1N0M2LjM2OCAzMy4zIDMuMTcgMzYuNDk4LS40NzMgMzUuOGwtMzQuNzk3LTYuNjU5IiBzdHlsZT0ic3Ryb2tlLXdpZHRoOjE1O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDI2LjE2MiA0NjAuOTYpIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMTUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtZGFzaGFycmF5PSJub25lIiBzdHJva2Utb3BhY2l0eT0iIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIj48L3BhdGg+PHBhdGggZD0ibTAgMCAxMjYuMjAxIDEyNi4yMDEiIHN0eWxlPSJzdHJva2Utd2lkdGg6MTU7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOTAuNDQgMjA4LjI1OCkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIxNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9Im5vbmUiIHN0cm9rZS1vcGFjaXR5PSIiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiPjwvcGF0aD48cGF0aCBkPSJtMCAwLTU1LjIxLTU1LjIxIiBzdHlsZT0ic3Ryb2tlLXdpZHRoOjE1O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTk4LjYyNyAzMTAuNjUyKSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjE1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLWRhc2hhcnJheT0ibm9uZSIgc3Ryb2tlLW9wYWNpdHk9IiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCI+PC9wYXRoPjxwYXRoIGQ9Ik0wIDBjLTExLjU2OCAzLjYwOC0yNC4xNTQgOS45MTYtMzYuNzc0IDE4LjU3NGE1LjI3NyA1LjI3NyAwIDAgMC0yLjEzNSA1LjY4MWwxMy42OTcgNTIuMzU4YzEuMDE2IDMuODg0LTIuNTI1IDcuNDI2LTYuNDA5IDYuNDA5bC01Mi4zNTgtMTMuNjk2YTUuMjc2IDUuMjc2IDAgMCAwLTUuNjgxIDIuMTMzYy04LjYzNCAxMi41ODUtMTQuOTMgMjUuMTM2LTE4LjU0NCAzNi42NzciIHN0eWxlPSJzdHJva2Utd2lkdGg6MTU7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMjguODMgMTg1LjUxNykiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIxNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9Im5vbmUiIHN0cm9rZS1vcGFjaXR5PSIiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiPjwvcGF0aD48cGF0aCBkPSJNMCAwYy0xLjk4LTIzLjkyNSAxNS4yNDItNTkuMzk4IDQ2LjAwMy05MC4xNiAzMC43NjctMzAuNzY2IDY2LjI0Ni00Ny45ODggOTAuMTcxLTQ2LjAwMiIgc3R5bGU9InN0cm9rZS13aWR0aDoxNTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDkyLjY0MyAyOTMuNzI3KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjE1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLWRhc2hhcnJheT0ibm9uZSIgc3Ryb2tlLW9wYWNpdHk9IiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCI+PC9wYXRoPjxwYXRoIGQ9Ik0wIDBjLTkuMzE1LTkuMzE2LTI0LjQxOS05LjMxNi0zMy43MzUgMC05LjMxNiA5LjMxNS05LjMxNiAyNC40MTkgMCAzMy43MzUgOS4zMTYgOS4zMTYgMjQuNDIgOS4zMTYgMzMuNzM1IDBDOS4zMTYgMjQuNDE5IDkuMzE2IDkuMzE1IDAgMFoiIHN0eWxlPSJzdHJva2Utd2lkdGg6MTU7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjMuNjA2IDI5Ny4zMSkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIxNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9Im5vbmUiIHN0cm9rZS1vcGFjaXR5PSIiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiPjwvcGF0aD48cGF0aCBkPSJNMCAwYy05LjMxNS05LjMxNi0yNC40MTktOS4zMTYtMzMuNzM1IDAtOS4zMTYgOS4zMTUtOS4zMTYgMjQuNDE5IDAgMzMuNzM1IDkuMzE2IDkuMzE2IDI0LjQyIDkuMzE2IDMzLjczNSAwQzkuMzE2IDI0LjQxOSA5LjMxNiA5LjMxNSAwIDBaIiBzdHlsZT0ic3Ryb2tlLXdpZHRoOjE1O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjY2LjEyMyAxNTQuNzkyKSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjE1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLWRhc2hhcnJheT0ibm9uZSIgc3Ryb2tlLW9wYWNpdHk9IiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCI+PC9wYXRoPjxwYXRoIGQ9Im0wIDAgLjE5Mi4yMSIgc3R5bGU9InN0cm9rZS13aWR0aDoxNTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE2My45NzcgMjI4Ljg4NikiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIxNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9Im5vbmUiIHN0cm9rZS1vcGFjaXR5PSIiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiPjwvcGF0aD48cGF0aCBkPSJNMCAwYy0yNi4yNDcgODAuNzk1LTcwLjMzMyAxMTcuODA2LTk1LjEgMTMyLjk3My05Ljk3OSA2LjExMS0yMi44NDQgNC41NTYtMzEuMDE3LTMuODJMLTIxMy42MDQgMzkuNWMtNi43NTEtNi45MTktNS4yNzYtMTguMjk0IDIuOTg1LTIzLjMxNyAyNy4zNy0xNi42NDQgNzkuODA1LTU4Ljg3MyA5Ny4yMS0xNDUuMTI0IDExLjk1NC01OS4yMzQtMjcuNTIzLTkzLjk4Ny02Ni4yNjctMTA4LjEyNy04LjY4Mi0zLjE2OS03LjE1OC0xNS45NjQgMi4wMjQtMTcuMDEzIDM4Ljc3OS00LjQyOCA5NC44MjYuOTU2IDEyNi40NDUgNTguMDAzIDAgMC0yLjg5My04OS43MzMtMTU2LjY4My05OC4wOC0xMC41MDYtLjU3MS0xMS4zOTMtMTUuNzU5LTEuMDE1LTE3LjQ5OCA5MS4yNDYtMTUuMjk4IDIzMC4yNjQtMTAuNjYgMjMwLjI2NCAxNTkuNjM1IDAgNDcuMTI5LTQuODI4IDg2Ljk0LTEyLjY0NiAxMjAuNTM5IiBzdHlsZT0ic3Ryb2tlLXdpZHRoOjE1O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDgzLjE0IDM1OC4wMzgpIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMTUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtZGFzaGFycmF5PSJub25lIiBzdHJva2Utb3BhY2l0eT0iIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIj48L3BhdGg+PHBhdGggZD0ibTAgMCAxNzYuNyAxNzYuNyIgc3R5bGU9InN0cm9rZS13aWR0aDoxNTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwNC4wODYgMjY5LjAwNSkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIxNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9Im5vbmUiIHN0cm9rZS1vcGFjaXR5PSIiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiPjwvcGF0aD48cGF0aCBkPSJtMCAwIDEzLjI0NSAxMy4yNDVhMjAuOTMgMjAuOTMgMCAwIDEgNS43OCAxMC45MWwyLjU0IDEzLjI5IiBzdHlsZT0ic3Ryb2tlLXdpZHRoOjE1O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDA0LjMzNSA0MjIuMTU2KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjE1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLWRhc2hhcnJheT0ibm9uZSIgc3Ryb2tlLW9wYWNpdHk9IiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCI+PC9wYXRoPjxwYXRoIGQ9Im0wIDAgNjIuNzQ3IDYyLjc0NyIgc3R5bGU9InN0cm9rZS13aWR0aDoxNTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMxOC4wNCAzMzUuODYxKSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjE1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLWRhc2hhcnJheT0ibm9uZSIgc3Ryb2tlLW9wYWNpdHk9IiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCI+PC9wYXRoPjxwYXRoIGQ9Ik0wIDBzNDMuMzE5LTcyLjQzNCAyMC4xMjUtMTYxLjA2NSIgc3R5bGU9InN0cm9rZS13aWR0aDoxNTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQyMi45IDM2Mi43NjUpIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMTUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtZGFzaGFycmF5PSJub25lIiBzdHJva2Utb3BhY2l0eT0iIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIj48L3BhdGg+PHBhdGggZD0iTTAgMHM1MC42My00NS42NjQgNTAuNjMtMTE2LjEzMSIgc3R5bGU9InN0cm9rZS13aWR0aDoxNTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM1OC40ODggMzczLjI5MykiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIxNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9Im5vbmUiIHN0cm9rZS1vcGFjaXR5PSIiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiPjwvcGF0aD48cGF0aCBkPSJNMCAwczI5LjUxLTM3LjU3OCAyMi4zMjctODYuMDYzIiBzdHlsZT0ic3Ryb2tlLXdpZHRoOjE1O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzE4LjA0IDI4NC43NjMpIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMTUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtZGFzaGFycmF5PSJub25lIiBzdHJva2Utb3BhY2l0eT0iIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIj48L3BhdGg+PHBhdGggZD0iTTAgMHMtMzYuNDA5LTQ4LjU2My0xMDAuNDczLTU0LjM2MiIgc3R5bGU9InN0cm9rZS13aWR0aDoxNTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ5Ny4wOTEgNjkuNSkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIxNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9Im5vbmUiIHN0cm9rZS1vcGFjaXR5PSIiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiPjwvcGF0aD48cGF0aCBkPSJNMCAwczkuMDA5LTEwLjI3NyAxOC44NzYtMjUuNzUyIiBzdHlsZT0ic3Ryb2tlLXdpZHRoOjE1O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDYxLjk2MiA0NTkuODEzKSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjE1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLWRhc2hhcnJheT0ibm9uZSIgc3Ryb2tlLW9wYWNpdHk9IiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCI+PC9wYXRoPjxwYXRoIGQ9Ik0wIDBzMi4wNzktNS43NzUgMy44ODUtMTMuNzAxIiBzdHlsZT0ic3Ryb2tlLXdpZHRoOjE1O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzA5LjE2IDI0NS4xMjcpIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMTUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtZGFzaGFycmF5PSJub25lIiBzdHJva2Utb3BhY2l0eT0iIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIj48L3BhdGg+PC9nPjwvZz48L3N2Zz4=');
background-color: #fdba74;
}
.np-dmg.blunt {
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB4PSIwIiB5PSIwIiB2aWV3Qm94PSIwIDAgNTAgNTAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSJob3ZlcmVkLXBhdGhzIj48Zz48cGF0aCBkPSJNMjUgNDljMTMuNCAwIDI0LTEwLjkgMjQtMjRDNDkgMTEuNyAzOC4xIDEgMjUgMSAxMS44IDEgMSAxMS44IDEgMjVjMCAxMy4zIDEwLjggMjQgMjQgMjR6bS00LjctMi41IDEuMS0zLjQgMy4zLTIuNmMuNC0uMy41LTEgLjEtMS40LS4zLS40LTEtLjUtMS40LS4xbC0zLjUgMi44Yy0uMi4xLS4zLjMtLjMuNUwxOC40IDQ2Yy00LjctMS41LTguNy00LjUtMTEuNC04LjRsMi4yLTMuOSA0LjQtMi45IDQuNiA0LjYtMi40IDEuOWMtLjQuMy0uNSAxLS4yIDEuNHMxIC41IDEuNC4ybDYtNC44IDUuNiA0LjdjLjEuNC0uMy0uNSA0LjMgNi43LTIuNSAxLTUuMSAxLjUtNy45IDEuNS0xLjYgMC0zLjItLjItNC43LS41ek00Ni42IDI5bC01LjQtMS0uNy00LjYgNS02LjVjMSAyLjUgMS42IDUuMyAxLjYgOC4xLS4xIDEuNC0uMiAyLjctLjUgNHpNMjUuOSAzbC00LjcgOC42Yy0uMi40LS4xLjkuMiAxLjJsNC4yIDQuMWMuNC40IDEgLjQgMS40IDBzLjQtMSAwLTEuNGwtMy42LTMuNkwyOCAzLjJjMS4yLjIgMi41LjQgMy42LjhsMy4yIDQuNGMwIC4xLjEuMS4yLjJsMS43IDEuNHY1LjJsLTEuNCAxLjRjLS4yLjItLjMuNS0uMy45LjEuMy4zLjYuNS43bC43LjQtMS4zIDJjLS4zLjUtLjEgMS4xLjMgMS40LjUuMyAxLjEuMSAxLjQtLjNsMS45LTNjLjEtLjIuMi0uNS4xLS44cy0uMy0uNS0uNS0uNmwtLjQtLjMuNy0uN2MuMi0uMi4zLS40LjMtLjdWOS41YzAtLjMtLjEtLjYtLjQtLjhsLTEuOS0xLjYtMS4yLTEuNmMzLjkgMi4xIDcuMiA1LjMgOS4yIDkuM2wtNS45IDcuN2MtLjIuMi0uMi41LS4yLjhsLjkgNS43Yy4xLjQuNC43LjguOGw2IDEuMWMtMS43IDYtNS45IDExLTExLjQgMTMuOGwtNC02LjIgNC4xLTEuN2g1LjZjLjYgMCAxLS40IDEtMXMtLjQtMS0xLTFoLTQuN2wtMS0yLjUgMy40LTQuMWMuNC0uNC4zLTEuMS0uMS0xLjQtLjQtLjQtMS4xLS4zLTEuNC4xbC0zLjggNC41Yy0uMi4zLS4zLjctLjIgMWwxLjEgMi42LTQuMiAxLjctNC44LTQuMSAxLS44Yy4yLS4yLjQtLjUuNC0uOHMtLjItLjYtLjQtLjhsLTMuNC0yLjUgMS01LjcgMy43LjdjLjQuMS43LS4xIDEtLjRMMzIgMTdjLjItLjMuMy0uNy4xLTFsLS40LS44LjktMS40Yy4zLS41LjItMS4xLS4zLTEuNHMtMS4xLS4yLTEuNC4zbC0xLjIgMS44Yy0uMi4zLS4yLjYtLjEuOWwuMy44LTMuNCA0LjQtNC4xLS43Yy0uMyAwLS41IDAtLjguMnMtLjQuNC0uNC42TDE5LjkgMjhjLS4xLjQuMS43LjQgMWwyLjkgMi4xLTMuNiAyLjktNS4zLTUuM2MtLjMtLjMtLjktLjQtMS4zLS4xbC01LjMgMy41LS4zLjMtMS43IDMuMWMtMS0xLjktMS44LTMuOS0yLjMtNi4xbDYuMi0yLjljLjUtLjIuNy0uOC41LTEuMmwtMS4zLTMuNiAzLjgtNy4yIDQuNSA1Yy40LjQgMSAuNCAxLjQuMS40LS40LjQtMSAuMS0xLjRsLTUtNS41LjUtLjljLjItLjMuMi0uNiAwLS45TDEyLjMgN2MzLjYtMi41IDgtNCAxMi43LTR6TTEwLjcgOC4zbDEuNSAzLjFMNyAyMS4zYy0uMS4yLS4yLjUtLjEuOEw4IDI1LjJsLTQuOSAyLjNjMC0uOC0uMS0xLjctLjEtMi41IDAtNi43IDMtMTIuNyA3LjctMTYuN3oiIGZpbGw9IiMwMDAwMDAiIG9wYWNpdHk9IjEiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSJob3ZlcmVkLXBhdGgiPjwvcGF0aD48L2c+PC9zdmc+');
background-color: #ffffff;
}
.np-dmg.pierce {
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB4PSIwIiB5PSIwIiB2aWV3Qm94PSIwIDAgMjAwIDIwMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGcgdHJhbnNmb3JtPSJtYXRyaXgoLTEuMzQ5OTk5OTk5OTk5OTk5NCwwLDAsLTEuMzQ5OTk5OTk5OTk5OTk5NCwyMzUuMDI1MTU0NDk1MjM5NDYsMjM0Ljk0NTA5NjY4MzUwMTkzKSI+PHBhdGggZD0iTTE0NC42MyA3MS4yMWEyLjUyIDIuNTIgMCAwIDAtMS42LTIuNTlsLTIxLjE0LTcuODlhMi41MyAyLjUzIDAgMCAwLTMgMSA3IDcgMCAwIDEtNiAzLjM4Yy03LjA2IDAtOS43MS05LjQxLTMuNjgtMTMuMDdhMi40NyAyLjQ3IDAgMCAwIDEuMDYtMS4zNSAyLjQzIDIuNDMgMCAwIDAgMC0xLjY0bC03Ljg5LTIxLjE1YTIuNTEgMi41MSAwIDAgMC00LjY4IDBsLTcuOTMgMjEuMTdhMi40MyAyLjQzIDAgMCAwLS4xNC43NSAyLjQ2IDIuNDYgMCAwIDAgMS4xNyAyLjI1IDcgNyAwIDAgMSAzLjM4IDZjMCA3LjA3LTkuNDEgOS43MS0xMy4wNiAzLjY4YTIuNTMgMi41MyAwIDAgMC0zLTFMNTcgNjguNjJhMi41IDIuNSAwIDAgMCAwIDQuNjhsMjEuMTQgNy44OWMuMTYgMCAuMzEuMDkuNDcuMTJhMi41MyAyLjUzIDAgMCAwIDIuNTQtMS4xNiA3IDcgMCAwIDEgNi0zLjM3YzEwLjEuNTEgOC44OSAxNS4xNC0xLjE0IDE0YTIuNTIgMi41MiAwIDAgMC0zIDMgMi41NiAyLjU2IDAgMCAwIDIuMjMgMS45MSA3IDcgMCAwIDEgNS44MiA2Ljk0djQ1LjUyYTIuNTcgMi41NyAwIDAgMCAuMDkuNjdsNi40MyAyM2EyLjUgMi41IDAgMCAwIDQuODIgMGw2LjQzLTIzYTIuNTcgMi41NyAwIDAgMCAuMDktLjY3di00NS40OGE3IDcgMCAwIDEgNS43OS02Ljk0IDIuODUgMi44NSAwIDAgMCAxLjE3LS4zOSAyLjUxIDIuNTEgMCAwIDAtMS4yMy00LjYxIDcuMTcgNy4xNyAwIDAgMS04Ljg0LTYuOWMwLTcuMDYgOS40MS05LjcxIDEzLjA3LTMuNjhhMi41MiAyLjUyIDAgMCAwIDMgMUwxNDMgNzMuM2EyLjUxIDIuNTEgMCAwIDAgMS42My0yLjA5em0tMzEuNzYuNTdjLTEyLjU5LjE1LTE2LjU4IDE2Ljc0LTUuNjkgMjIuNjdhMTIgMTIgMCAwIDAtMy4yNSA4LjIydjQ1LjE3bC0zLjkzIDE0LTMuOTMtMTR2LTQ1LjE3YTEyIDEyIDAgMCAwLTMuMjUtOC4yMiAxMi4wNyAxMi4wNyAwIDAgMCA2LjM2LTEwLjYyYzAtMTEtMTMuODMtMTYuMjYtMjEuMDYtOEw2NSA3MWwxMy4xMi00LjljNy4xOCA4LjMgMjEuMTMgMyAyMS4wNi04YTExLjkyIDExLjkyIDAgMCAwLTQuMDgtOUwxMDAgMzZsNC45IDEzLjEyYy04LjI5IDcuMTgtMyAyMS4xMiA4IDIxLjA2YTExLjkyIDExLjkyIDAgMCAwIDktNC4wOEwxMzUgNzFsLTEzLjEzIDQuOWExMS45MiAxMS45MiAwIDAgMC05LTQuMTJ6IiBmaWxsPSIjMDAwMDAwIiBvcGFjaXR5PSIxIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIj48L3BhdGg+PHBhdGggZD0iTTEwMCA2Ny42NGEzLjMyIDMuMzIgMCAwIDAgMCA2LjY0IDMuMzIgMy4zMiAwIDAgMCAwLTYuNjR6IiBmaWxsPSIjMDAwMDAwIiBvcGFjaXR5PSIxIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIj48L3BhdGg+PC9nPjwvc3ZnPg==');
background-color: #86efac;
}
.np-dmg.fire {
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB4PSIwIiB5PSIwIiB2aWV3Qm94PSIwIDAgMzQwIDM0MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgY2xhc3M9IiI+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMS4xMzk5OTk5OTk5OTk5OTkyLDAsMCwxLjEzOTk5OTk5OTk5OTk5OTIsLTIzLjgwMDg0ODg4NDU4MjQyLC0yMy44MDAxNTk2ODMyMjc0MDYpIj48cGF0aCBkPSJNMTgwLjUyNyAxMDkuMTJhMy4xMDkgMy4xMDkgMCAwIDAtMy43NzUgMy42MzhjMi40NTYgMTIuMTQzIDEuNDYyIDIwLjEyLTIuOCAyMi40NThhNS43IDUuNyAwIDAgMS01Ljg4My0uNDM4QzEzMi44MDUgMTEwLjcyMiA2NS4yMzMgNDguMjU2IDQ1LjM2MyAyOS42ODVjLTMuNjE2LTMuMzgtOS4zMTItMy45MzMtMTMuMTQ5LS44LTYuMTc2IDUuMDQxLTMuNzQ3IDEyLjY1OC0xLjkzOSAxNC44ODJsOTEuOTkzIDExMy4yNzFjNC4wNTYgNC43MyA2LjgwNiA5LjE5NCA4LjE3NiAxMy4yNjhhMTAuNzU2IDEwLjc1NiAwIDAgMS0zLjUwNiAxMS45MDkgOS43MzIgOS43MzIgMCAwIDEtMTEuNTEuNzc4IDEwLjA5MyAxMC4wOTMgMCAwIDEtNC4wNDItNC40NDMgMy4xMDkgMy4xMDkgMCAwIDAtNS45OTQuNTg0Yy0xLjk0NCAxMi40NjQtLjE0NCAyMi4xMjEgNS4zNDggMjguNyA2LjM1IDcuNjExIDE1LjkyIDguOTY2IDIxLjA1OCA5LjFhNDQuMDY3IDQ0LjA2NyAwIDAgMCA3LjMxMS0xLjEyOGM4LjQ5My0yLjQ1NCAxNS4xODIgMi4zIDE4LjA0NCA4LjEgMi42IDUuMjcyIDMgMTMuMzg1LTQuNDU3IDE4Ljg5NS03LjM1NCA1LjQzNi0xNy4xNDYgNS43MzgtMTcuMTc0IDUuNzRhNjYuOSA2Ni45IDAgMCAxLTEzLjAwNy0xLjE5NCAzLjEwOSAzLjEwOSAwIDEgMC0xLjIxNiA2LjEgNzMuMjUyIDczLjI1MiAwIDAgMCAxNC4yNzcgMS4zMTNoLjAxMWMuNDc5LS4wMDkgMTEuODI3LS4zMiAyMC44MDUtNi45NTcgOS44NjYtNy4yOTIgMTAuMjkyLTE4LjYzOCA2LjMzNy0yNi42NDctNC4wMDktOC4xMi0xMy40LTE0Ljc3LTI1LjM0Ny0xMS4zMjJhMzQuNjczIDM0LjY3MyAwIDAgMS01LjQyNS44ODRjLTQuMDg5LS4xLTExLjY2MS0xLjEzMy0xNi40NDMtNi44NjQtMy4yNDYtMy44OS00LjgtOS40MDUtNC42NTYtMTYuNDQ5LjQxOC4zMS44NjUuNjE0IDEuMzQ0LjlhMTUuOTM0IDE1LjkzNCAwIDAgMCAxOC42MjEtMS4yMzggMTYuODkxIDE2Ljg5MSAwIDAgMCA1LjUxNS0xOC43NDVjLTEuNjI2LTQuODM2LTQuNzcxLTkuOTk0LTkuMy0xNS4yN0wzNS4xIDM5Ljg0NmMtLjcyLS44ODctMS42MzctNC41MjIuNzc0LTUuOTM2YTQuMzQyIDQuMzQyIDAgMCAxIDUuMjQyLjMxN2MxOS45NTIgMTguNjQ4IDg3LjgxOSA4MS4zODMgMTIzLjQ1IDEwNS42ODhhMTEuOTU4IDExLjk1OCAwIDAgMCAxMi4zNzkuNzUyYzYuMTcxLTMuMzg4IDguNDU5LTExLjMzIDYuODI5LTIzLjY0NyA0LjkxNCAyLjUyNyAxMS44OTEgOC4wNDggMTEuODkxIDE5LjAxOCAwIDEyLjYzNCA0LjMyNyAyMS41MTQgMTIuODU5IDI2LjM5YTIzLjkzOCAyMy45MzggMCAwIDAgNy4zNjMgMi43MjMgMy4xMDkgMy4xMDkgMCAxIDAgMS4xNzgtNi4xMDUgMTcuNyAxNy43IDAgMCAxLTUuNDU0LTIuMDE2Yy02LjQ1NS0zLjY4OS05LjcyOC0xMC43NTItOS43MjgtMjAuOTkyLjAwMS0xNy4yMjYtMTMuOTY5LTI1LjEzOC0yMS4zNTYtMjYuOTE4eiIgZmlsbD0iIzAwMDAwMCIgb3BhY2l0eT0iMSIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9IiI+PC9wYXRoPjxwYXRoIGQ9Ik0yODAuMDcxIDQ0LjIxMWE3My4wMzQgNzMuMDM0IDAgMCAwLTUuMDQ0LTUuNjU0QzI2OS4xMTEgMzIuNDkyIDI2OSAyOCAyNjkgMjhhMy4xMDggMy4xMDggMCAwIDAtNC45NjktMi42MTVjLTcuNTcyIDUuNjY5LTkuMjgxIDEzLjg5MS04LjkyOCAyMC4yMTYtMjAuNjc0LTktMzguNDktNy41NDEtNTAuMTctNC41MDYtMTMuODE3IDMuNTkxLTIyLjEzIDEwLTIyLjQ3OCAxMC4yNjVhMy4xMDkgMy4xMDkgMCAwIDAgMS42NTEgNS41NDljNTAuOTEyIDQuMyA2MiAyNy44MDkgNjQuMDcyIDQxLjQzNmE2LjQxMyA2LjQxMyAwIDAgMS0yLjI5IDUuOTUyIDUuOSA1LjkgMCAwIDEtNS44NDQgMS4wNjkgNy44MjEgNy44MjEgMCAwIDEtNC4wNzItMy4wODkgMy4xMDkgMy4xMDkgMCAwIDAtNS44NjggMS40MzQgMzEuNTM0IDMxLjUzNCAwIDAgMCA1LjE5MyAxNy4xODEgMjkuOTEyIDI5LjkxMiAwIDAgMSA0LjgzMyAxMy4xNjdjLjU1MyA1LjQ0LS4xMTMgMTAuMTcxLTEuOTgxIDE0LjA2MmEzLjEwOSAzLjEwOSAwIDAgMCA1LjYwNiAyLjY5MWMyLjM3LTQuOTM4IDMuMjMyLTEwLjc4NSAyLjU2MS0xNy4zODJhMzYuMTQ1IDM2LjE0NSAwIDAgMC01LjgxLTE1LjkzNCAyNi4yNjEgMjYuMjYxIDAgMCAxLTMuMDU4LTYuNDYzYy4xNjcuMDY2IDYuOTYzIDIuOCAxMi40LTEuOTQxYTEyLjg0MyAxMi44NDMgMCAwIDAgNC40NzktMTEuNjgzYy0yLjIxMy0xNC41MjctMTMuMTI5LTM4LjkzNC02MC4zNzEtNDUuNjQ3IDExLjU3NC01LjYxMiAzNS4yMDgtMTIuNzgyIDYzLjgzNyAyYTMuMTEyIDMuMTEyIDAgMCAwIDQuMzczLTMuNzUzYy0uMTQzLS40My0yLjkyNy05LjEgMi4xLTE2LjEwOGEzMC42NjkgMzAuNjY5IDAgMCAwIDYuMzE1IDkgNjcuMTA2IDY3LjEwNiAwIDAgMSA0LjYyMiA1LjE3NGMxNC4xNDIgMTcuODUzIDU3LjQ5MyA4My42NzQgMjEuNTgzIDE4MS4wNjlhMTE2Ljg2NiAxMTYuODY2IDAgMCAxLTc5LjA4NiA3Mi40MTNjLTMzLjc5IDkuMDkyLTczLjgxMSA5Ljg4MS0xMTguOTQ5IDIuMzQ4LTM5LjMyNC02LjU2NC02OC40ODMtNDEuNzExLTY3LjgyNy04MS43NTUuMDEyLS43Ni42NTgtMTAuNDM5LS4xMDUtMTcuNDIxQTEzLjM1OSAxMy4zNTkgMCAwIDEgMzMuNzkzIDIxMGEzLjEwOSAzLjEwOSAwIDAgMCA2LjA5NC0uOTA1YzAtLjI1Ni0uMDcxLTIxLjQ3NiAxMS4zODItMzkuMjgyYTgxLjczNiA4MS43MzYgMCAwIDAtMS4yNTkgMTUuOTI3Yy4zMzcgMTUuMjk0IDUuNzIyIDM2LjQ5NSAyOS40NTEgNTAuNjU3YTMuMTE1IDMuMTE1IDAgMCAwIDQuNTgyLTMuNTI4IDE2LjExOSAxNi4xMTkgMCAwIDEgMi40NDgtMTIuNzg1IDQyLjk3NCA0Mi45NzQgMCAwIDAgOS4wNjQgMTkuMDA2IDMuMTA5IDMuMTA5IDAgMCAwIDQuNzUxLTQuMDExIDM3LjY1OCAzNy42NTggMCAwIDEtOC40MDYtMjEuNzMzIDMuMTA5IDMuMTA5IDAgMCAwLTQuOTc1LTIuNDg3IDIyLjM4MSAyMi4zODEgMCAwIDAtOS40NDkgMTYuNzcxYy0xMy42NTUtMTAuMDQtMjAuNzk1LTI0LjA4Mi0yMS4yNC00MS44MjRhNzcuNDU2IDc3LjQ1NiAwIDAgMSA0LjUxNS0yNy41MjMgMy4xMDkgMy4xMDkgMCAwIDAtNC45ODctMy40NTJjLTE1LjAxOCAxMy43ODgtMTkuODMzIDMzLjE1NS0yMS4zNzIgNDQuNjdhMjEuNzA5IDIxLjcwOSAwIDAgMC03LjEzLTQuNTUyIDMuMTA5IDMuMTA5IDAgMCAwLTMuOTQzIDRjMi41NDMgNi45OTIgMS40MSAyMi4yODIgMS40IDIzLjFhODcuODc1IDg3Ljg3NSAwIDAgMCA3My4wMiA4Ny45ODkgMzU5LjgxMSAzNTkuODExIDAgMCAwIDU5LjA4NyA1LjJjMjIuNTkgMCA0My40ODctMi41NjEgNjIuNS03LjY3N2ExMjMuMDkyIDEyMy4wOTIgMCAwIDAgODMuMjk1LTc2LjI2OWMxNS45MDYtNDMuMTQyIDE4LjUyLTg1LjI1MSA3Ljc2OC0xMjUuMTU4LTguNzI1LTMyLjM1OC0yNC4xMDktNTQuMDg0LTMwLjMxOC02MS45MjN6IiBmaWxsPSIjMDAwMDAwIiBvcGFjaXR5PSIxIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBjbGFzcz0iIj48L3BhdGg+PHBhdGggZD0iTTczLjg1MSAxOTUuN2M1LjYxNCA2Ljk0NyAxNS43MTggNC4xMjIgMTcuNDEzLS40IDEuNjUzLTQuNDExIDMuOC03Ljg4OSAzLjk2Ni0xMS41MjUuNzIxLTE2LjAzMS0xMi44MTItMjQuMS0yMC4wNjgtMjYuMTMyYTMuMTIxIDMuMTIxIDAgMCAwLTMuMzg2IDEuMTggMy4wODIgMy4wODIgMCAwIDAtLjAyMiAzLjU2M2MuMDkxLjEzNyA0Ljg5MyA4LjQuMDg4IDE1Ljk4Ni0xLjk1NCAzLjA4LTIuODM1IDEwLjE3IDIuMDA5IDE3LjMyOHptMy43ODMtMTUuMDY0YTIwLjI2OSAyMC4yNjkgMCAwIDAgMS44MzItMTQuMjQ1YzQuNTUgMi44MjIgOS45NTcgOC4wOTQgOS41NTIgMTcuMTA2YTE3LjA4NSAxNy4wODUgMCAwIDEtMy4wNSA4LjU0NWMtMi40NzggMy43NTUtNi4xOCAxLjMzNi02Ljk2OS4xNzItMy4yNDktNC44MDUtMi41NDMtOS40NTYtMS4zNjUtMTEuNTgzek0xNTguMiAxMDAuMTUzYTIwLjM3NCAyMC4zNzQgMCAwIDEgMTEuNzkgMi42MTkgMi44MzIgMi44MzIgMCAwIDAgMi42MjguMjg3IDMuNTA2IDMuNTA2IDAgMCAwIDEuOS0xLjgzOGMxLjg5NC01IDIuNDA3LTE1LjY3My05LjIxMS0yMC4zMjJhMjMuMjM5IDIzLjIzOSAwIDAgMC04LjA4Ny0xLjU2NGMtNS4xNDItLjEyMi05LjI1MS0xLjA3LTEwLjk5Mi0yLjUzNWEzLjEwOCAzLjEwOCAwIDAgMC00Ljk2MyAxLjQyOSAxOC43MjIgMTguNzIyIDAgMCAwLS43MjggNC40ODkgMTYuNzEgMTYuNzEgMCAwIDAgMTcuNjYzIDE3LjQzNXptLTExLjQ1Ny0xNi4xNzhhMzUuODcyIDM1Ljg3MiAwIDAgMCAxMC4zMjYgMS41NzcgMTcuMDUxIDE3LjA1MSAwIDAgMSA1LjkyNSAxLjEyMWM1LjQzMyAyLjE3MyA2LjQ2NSA2LjAyOSA2LjM2NyA4LjlhMjcuMjgyIDI3LjI4MiAwIDAgMC05LjYzNy0xLjY4OGMtLjY3NCAwLTEuMzEzLjAyMi0xLjkwOS4wNTlhMTAuNSAxMC41IDAgMCAxLTExLjA3Mi05Ljk3MnpNMjE5LjQxMyA3NC45MzdjLTQuNzQ3LTMuNTc0LTExLjAzNi00LjMxNy0xOC42OTQtMi4yMTRhMy4xMDkgMy4xMDkgMCAwIDAtMi4yNzIgMi43IDE5LjAyNyAxOS4wMjcgMCAwIDAgNC45NiAxMy45MTFjNC4xOCA0LjQgMTAuNTI4IDYuNjIxIDE4Ljg5NCA2LjYyMXExLjEgMCAyLjI1LS4wNTJhMy4xMDkgMy4xMDkgMCAwIDAgMi45Ny0zLjE0NWMtLjAwNi0uNDgyLS4yMzktMTEuOTAxLTguMTA4LTE3LjgyMXptLTExLjQ0NCAxMC4xNzFhMTIuMzI5IDEyLjMyOSAwIDAgMS0zLjIyMy02Ljk0M2M0LjU3MS0uODU1IDguMjMtLjI3OCAxMC45MDYgMS43MjMgMy4zNyAyLjUyMSA0LjczMyA2Ljg3MSA1LjI4MiA5LjgyNy01Ljg1NS0uMjAxLTEwLjIwOC0xLjc0Ni0xMi45NjUtNC42MDd6TTIzOS4zNCAyMTYuMDQ5YTEwLjU1IDEwLjU1IDAgMCAxLTguMDIyLTQuMjU1Yy0xNS4yMzQtMjAuNDgxLTM1LjMwNy0yNC4xNDUtMzcuNjU0LTI0LjUxLTEyLjQyMi0zLjIyNy0xNi4wNDEtMTEuNTA3LTE2LjE4MS0xMS44MzhhMy4xMDkgMy4xMDkgMCAwIDAtNS45NDIuNmMtMy41MjkgMTkuMzI3IDExLjM4MSAzMC41MTcgMTMuMTUzIDMxLjc3IDIyLjE2NyAxOC42NjEgMjIuMzQ2IDM2LjAzMiAyMC40NzYgNDQuNzM0YTE0Ljg2OSAxNC44NjkgMCAwIDEtMTMuNTIgMTEuODE4Yy04LjY5LjUwNy0xNy43MTMtNC4xNTEtMTcuOC00LjJhMy4xMDcgMy4xMDcgMCAwIDAtMy41OTMuNTA2IDIuOTM3IDIuOTM3IDAgMCAwLS42NjcgMy41NjdjMjIuMzUxIDM2LjUzNiA2MS44MjkgMjEuNTQ1IDY5Ljg4MSAxNy43NDdhMy4xMDkgMy4xMDkgMCAxIDAtMi42NTMtNS42MjMgNjUuNDMzIDY1LjQzMyAwIDAgMS0yNC45OSA1Ljg0OWMtLjkzNC4wNjEtMjAuMDg1IDEuMTI4LTMxLjg4Mi0xMy4xMTNhMzcuODg4IDM3Ljg4OCAwIDAgMCAxMi4wNjUgMS40NzIgMjEuMSAyMS4xIDAgMCAwIDE5LjIzOC0xNi43MmMyLjE2Ny0xMC4wODIgMi4xMDUtMzAuMS0yMi42NjQtNTAuODkyYTMuMTU2IDMuMTU2IDAgMCAwLS4yNDUtLjE4NmMtLjQ1MS0uMzEtOS4wOTQtNi4zODgtMTAuODE0LTE3LjIwN2EzMy41MTEgMzMuNTExIDAgMCAwIDE0Ljc1MiA3Ljc3MiAyLjk0NiAyLjk0NiAwIDAgMCAuMzQ5LjA2OGMuMTkxLjAyNiAxOS4zODYgMi44NDMgMzMuNyAyMi4wODlhMTYuNzUzIDE2Ljc1MyAwIDAgMCAxMi43MjggNi43NTYgMTYuMDgyIDE2LjA4MiAwIDAgMCAxMi43NS01LjI5NWM0Ljc1Mi01LjMgNi45NzEtMTMuMjg4IDYuNjI2LTIzLjhhNDMuMTMzIDQzLjEzMyAwIDAgMSA5Ljc1IDE1LjY4M2M0LjE2OCAxMS41MTYgMy40MzMgMjQuMzUzLTIuMDczIDM2LjE0OGE4My4yNTYgODMuMjU2IDAgMCAxLTUuMzMzIDkuNzc3IDMuMTA5IDMuMTA5IDAgMSAwIDUuMjM2IDMuMzU0IDg5LjQ2NSA4OS40NjUgMCAwIDAgNS43MzItMTAuNWM2LjIwNi0xMy4zIDcuMDE4LTI3LjgyIDIuMjg1LTQwLjg5NC01LjktMTYuMzA5LTE3LjI2Mi0yMy4wMTgtMTcuNzQ0LTIzLjNhMy4xMDkgMy4xMDkgMCAwIDAtNC42MzggMy4wODljMS41ODggMTIuMzYuMDg0IDIxLjIwNS00LjQ3MiAyNi4yODdhOS44MTggOS44MTggMCAwIDEtNy44MzQgMy4yNDd6TTE0OC40NjMgMTQyLjA4MWMtNC41LTEuNTkxLTkuMTUxLTMuMjM4LTEyLjk4Mi02LjJhMy4xMDkgMy4xMDkgMCAwIDAtNC41NjIgNC4wN2MuMDkzLjE1NCA5LjA5NCAxNS41MjIgMTMuMzA3IDIzLjk1OSA2Ljc2NyAxMy41NSAxOS44NjggNyAyMi43LjAwNyAxLjYyNC00LjAwOC40LTkuODE4LTIuNTY4LTEzLjAwNy00LjM3My00LjcwMy0xMC4yMTItNi44MTctMTUuODk1LTguODI5em0xMi43ODUgMTkuM2E1LjQ4NSA1LjQ4NSAwIDAgMS00LjYxMiAzLjE1OGMtNC41NzcuMjg5LTYuMDU3LTEuNzIxLTYuNzcyLTMuMjU5LTIuMDExLTQuMzItNS4yMS0xMC4xMTctOC0xNSAxLjUxMy41ODkgMy4wMjkgMS4xMjYgNC41MjkgMS42NTcgNS4xOTMgMS44MzcgMTAuMSAzLjU3MyAxMy4zODcgNy4xNjIuMjczLjMxMSAyLjc5NSAzLjYyOSAxLjQ2OCA2LjI4NHpNMTQ2LjkzNCAyNzUuODMzYTI1LjYwNSAyNS42MDUgMCAwIDAtMTguMjE5IDIuMzUzIDMuMTA5IDMuMTA5IDAgMCAwLTEuMzE0IDMuODIxYzMuNzYgOS41MjEgOS4xMzUgMTUuMjc3IDE1Ljk3NSAxNy4xMDlhMTguMTY5IDE4LjE2OSAwIDAgMCA0LjcxLjYxYzguMTE1IDAgMTQuNjgyLTUuMTMyIDE1LjAwOC01LjM5MWEzLjExIDMuMTEgMCAwIDAgLjc3LTMuOTY4Yy00LjQzNy03LjgyNS0xMC4xMzMtMTIuNzE2LTE2LjkzLTE0LjUzNHptLTEuOTUgMTcuMjc1Yy00LjIyMS0xLjEyOS03Ljc4Mi00LjcwNi0xMC42MTMtMTAuNjQ4YTE4Ljc3OSAxOC43NzkgMCAwIDEgMTEuMDI1LS42YzQuMzg2IDEuMTk1IDguMjUgNC4yNDYgMTEuNTE2IDkuMDgyLTIuNjgzIDEuNDgzLTcuMzI5IDMuNDAxLTExLjkyOCAyLjE2NnpNMjg1Ljg2OSAxODkuNTQxYTMuMTEgMy4xMSAwIDAgMCA0LjE4LS42Yy4zNjYtLjQ1MyA4Ljk0Ny0xMS4yMiA2LjUxNy0yMi43NTQtMS4zOS02LjYwNy02LjAwNy0xMS45NjgtMTMuNzE4LTE1LjkzNmEzLjEwOCAzLjEwOCAwIDAgMC00LjEzIDEuMjM2Yy00LjY1OSA4LjI0Ny05LjE1OSAyNi44MjEgNy4xNTEgMzguMDU0em0tMy4wNjEtMzIuMTQxYzQuMjY3IDIuNzg1IDYuODQyIDYuMTUyIDcuNjY5IDEwLjAzNyAxLjI0IDUuODMxLTEuNTcyIDExLjc4LTMuNTQ0IDE1LjA0Ny05LjIyNi04LjMyNy02LjI0LTE5Ljc5NC00LjEyNS0yNS4wODR6TTEwNy4zNCAyNDEuMzc2YTMuNTExIDMuNTExIDAgMSAwIDMuNTEgMy41MTEgMy41MTEgMy41MTEgMCAwIDAtMy41MS0zLjUxMXpNMjMwLjk4MiAxNTYuMzExYTMuNTExIDMuNTExIDAgMSAwIDMuNTEgMy41MTEgMy41MTEgMy41MTEgMCAwIDAtMy41MS0zLjUxMXoiIGZpbGw9IiMwMDAwMDAiIG9wYWNpdHk9IjEiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSIiPjwvcGF0aD48Y2lyY2xlIGN4PSIyNTIuODEyIiBjeT0iMjY5LjA5OSIgcj0iMy41MSIgZmlsbD0iIzAwMDAwMCIgb3BhY2l0eT0iMSIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9IiI+PC9jaXJjbGU+PC9nPjwvc3ZnPg==');
background-color: #f87171;
}
.np-dmg.frost {
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB4PSIwIiB5PSIwIiB2aWV3Qm94PSIwIDAgNjQgNjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGQ9Im0zOC45NTQgOC44NjMtNi4yNzItNi41NTRhMS4wMyAxLjAzIDAgMCAwLTEuNDQ2IDBsLTYuMjcyIDYuNTU0YTEgMSAwIDAgMC0uMTg0IDEuMTE0bDYuMjcyIDEzLjQ4MWExIDEgMCAwIDAgMS44MTQgMGw2LjI3Mi0xMy40ODFhMSAxIDAgMCAwLS4xODQtMS4xMTR6bS03IDExLjhMMjYuODgyIDkuNzUybDUuMDc3LTUuMzA2IDUuMDc4IDUuMzA2ek01My4yNzcgMjAuNTU4bC4yLTkuMDcxYTEgMSAwIDAgMC0xLjAyMi0xLjAyMmwtOS4wNy4yYTEgMSAwIDAgMC0uOTE4LjY1N0wzNy4zNyAyNS4yOWExIDEgMCAwIDAgMS4yODIgMS4yODJsMTMuOTY4LTUuMWExIDEgMCAwIDAgLjY1Ny0uOTE0em0tMS45ODUtLjcyOC0xMS4zMDcgNC4xMjcgNC4xMjctMTEuMzA4IDcuMzQyLS4xNjJ6TTU1LjEzNiAyNC45NjRhMSAxIDAgMCAwLTEuMTEzLS4xODRsLTEzLjQ4MSA2LjI3M2ExIDEgMCAwIDAgMCAxLjgxMmwxMy40ODEgNi4yNzNhMSAxIDAgMCAwIDEuMTEzLS4xODRsNi41NTUtNi4yNzJhMSAxIDAgMCAwIDAtMS40NDZ6bS0uODg5IDEyLjA3Mi0xMC45MTMtNS4wNzcgMTAuOTEzLTUuMDc3IDUuMzA3IDUuMDc3ek00My40NDMgNTMuMjc3bDkuMDcuMmguMDIyYTEgMSAwIDAgMCAxLTEuMDIzbC0uMi05LjA3YTEgMSAwIDAgMC0uNjU3LS45MTdMMzguNzEgMzcuMzdhMSAxIDAgMCAwLTEuMjgyIDEuMjgybDUuMSAxMy45NjhhMSAxIDAgMCAwIC45MTUuNjU3em03LjkwNy05LjE2NS4xNjIgNy4zNDMtNy4zNDItLjE2Mi00LjEyNy0xMS4zMDd6TTMxLjMxOCA2MS42OTFhMSAxIDAgMCAwIDEuNDQ2IDBsNi4yNzItNi41NTRhMSAxIDAgMCAwIC4xODQtMS4xMTRsLTYuMjcyLTEzLjQ4MWExIDEgMCAwIDAtMS44MTQgMGwtNi4yNzIgMTMuNDgxYTEgMSAwIDAgMCAuMTg0IDEuMTE0em0uNzIzLTE4LjM1NiA1LjA3NyAxMC45MTMtNS4wNzcgNS4zMDYtNS4wNzgtNS4zMDZ6TTEwLjcyMyA0My40NDJsLS4yIDkuMDcxYTEgMSAwIDAgMCAxIDEuMDIyaC4wMjJsOS4wNy0uMmExIDEgMCAwIDAgLjkxOC0uNjU3bDUuMS0xMy45NjhhMSAxIDAgMCAwLTEuMjgyLTEuMjgybC0xMy45NjggNS4xYTEgMSAwIDAgMC0uNjYuOTE0em0xLjk4NS43MjggMTEuMzA3LTQuMTI3LTQuMTI3IDExLjMwOC03LjM0Mi4xNjJ6TTkuOTc3IDM5LjIybDEzLjQ4MS02LjI3M2ExIDEgMCAwIDAgMC0xLjgxMkw5Ljk3NyAyNC44NjJhMSAxIDAgMCAwLTEuMTEzLjE4NGwtNi41NTUgNi4yNzJhMSAxIDAgMCAwIDAgMS40NDZsNi41NTUgNi4yNzJhMSAxIDAgMCAwIDEuMTEzLjE4NHptLTUuNTMxLTcuMTc5IDUuMzA3LTUuMDc3IDEwLjkxMyA1LjA3Ny0xMC45MTMgNS4wNzd6TTIwLjU1NyAxMC43MjNsLTkuMDctLjJhLjk4My45ODMgMCAwIDAtLjcyOS4yOTMgMSAxIDAgMCAwLS4yOTMuNzNsLjIgOS4wN2ExIDEgMCAwIDAgLjY1Ny45MTdsMTMuOTY4IDUuMWExIDEgMCAwIDAgMS4yODItMS4yODJsLTUuMS0xMy45NjhhMSAxIDAgMCAwLS45MTUtLjY2em0tNy45MDcgOS4xNjUtLjE2Mi03LjM0MyA3LjM0Mi4xNjIgNC4xMjcgMTEuMzA3ek0yNi4xIDMyYTUuOSA1LjkgMCAxIDAgNS45LTUuOSA1LjkwOSA1LjkwOSAwIDAgMC01LjkgNS45em05LjggMGEzLjkgMy45IDAgMSAxLTMuOS0zLjkgMy45MDcgMy45MDcgMCAwIDEgMy45IDMuOXoiIGZpbGw9IiMwMDAwMDAiIG9wYWNpdHk9IjEiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiPjwvcGF0aD48L2c+PC9zdmc+');
background-color: #60a5fa;
}
.np-dmg.storm {
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB4PSIwIiB5PSIwIiB2aWV3Qm94PSIwIDAgNTEyLjcwMyA1MTIuNzAzIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCBkPSJNMjM1LjM0IDcuODUyaC0yNC43MjRhOC41MTUgOC41MTUgMCAwIDAtOC4yMzkgNi4zODVMMTQ3LjM0IDIyNi42NzVjLTEuMzk2IDUuMzkgMS42NDggMTAuOTM1IDYuOTQgMTIuNjM5bDg0LjcyNSAyNy4yODFhNS40OSA1LjQ5IDAgMCAxIDMuNTkgNi43MzRsLTY0LjQ4NyAyMjUuODA5Yy0xLjMyIDQuNjIyIDQuNTg2IDcuNzggNy42ODQgNC4xMDdsMjQxLjAyLTI4NS43ODZjNC4zMTMtNS4xMTQgMS45NjEtMTIuOTgyLTQuNDQ3LTE0Ljg3OUwzMjAuMjQgMTcyLjM0NWMtNC44MjMtMS40MjgtNi45NDktNy4wNzktNC4yNjUtMTEuMzQxTDQwNC4xNjggMjAuOTNjMy41NzUtNS42NzktLjQ5OC0xMy4wNzgtNy4xOTktMTMuMDc4SDI3Mi42NzNNNDIwLjY5IDQ1Ny4wMjJsMjguMjM1LTYuNzMyYzIuNzItLjY0OCAzLjk4LTMuNzkzIDIuNDYxLTYuMTRsLTI1LjUyLTM5LjQzYTQuNSA0LjUgMCAwIDEgLjc3Ny01Ljc5OGw3Ny44NzYtNjkuNjY0YzEuNjA0LTEuNDM1LjE1My00LjA1LTEuOTE0LTMuNDQ4bC0xNzEuMTg0IDQ5LjkwNmE0LjA1IDQuMDUgMCAwIDAtMi40NDIgNS43OWwxNy45NjIgMzMuNzY5YTQuNSA0LjUgMCAwIDEtMS41NyA1LjkxN2wtMTI2LjU4MiA3OS45MmMtMS45MzIgMS4yMi0uNjc0IDQuMjA2IDEuNTQ4IDMuNjc2bDE2Ny4wNDYtMzkuODI2TTcuNTIzIDE5OC4xMDhsMjUuNDcgMTc2LjQ4MmE0LjA1IDQuMDUgMCAwIDAgNS4zOTEgMy4yMjhsMzUuOTUtMTMuMDYyYTQuNSA0LjUgMCAwIDEgNS42NCAyLjM4M2w2MS40MjggMTM2LjUxNmMuOTM4IDIuMDg0IDQuMDcgMS4yNTYgMy44NTctMS4wMTlsLTIxLjk4OC0yMzMuOTY0Yy0uMjYyLTIuNzg0LTMuMTk5LTQuNDcxLTUuNzM1LTMuMjk1bC00Mi42MTIgMTkuNzU0YTQuNDk5IDQuNDk5IDAgMCAxLTUuNjMyLTEuNTgxbC01OC4wODYtODYuODU1Yy0xLjE5OC0xLjc4OS0zLjk5LS43MTgtMy42ODMgMS40MTN6IiBzdHlsZT0ic3Ryb2tlLXdpZHRoOjE1O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDsiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIxNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiPjwvcGF0aD48L2c+PC9zdmc+');
background-color: #818cf8;
}
.np-dmg.holy {
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB4PSIwIiB5PSIwIiB2aWV3Qm94PSIwIDAgNjgyLjY2NyA2ODIuNjY3IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIiBjbGFzcz0iIj48Zz48ZGVmcyBzdHJva2Utd2lkdGg9IjI1IiBzdHlsZT0ic3Ryb2tlLXdpZHRoOiAyNTsiPjxjbGlwUGF0aCBpZD0iYSIgY2xpcFBhdGhVbml0cz0idXNlclNwYWNlT25Vc2UiIHN0cm9rZS13aWR0aD0iMjUiIHN0eWxlPSJzdHJva2Utd2lkdGg6IDI1OyI+PHBhdGggZD0iTTAgNTEyaDUxMlYwSDBaIiBmaWxsPSIjMDAwMDAwIiBvcGFjaXR5PSIxIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjI1IiBzdHlsZT0ic3Ryb2tlLXdpZHRoOiAyNTsiPjwvcGF0aD48L2NsaXBQYXRoPjwvZGVmcz48cGF0aCBkPSJtMCAwLTkzLjI2MSA5My4yNjEiIHN0eWxlPSJzdHJva2Utd2lkdGg6IDI1OyBzdHJva2UtbGluZWNhcDogcm91bmQ7IHN0cm9rZS1saW5lam9pbjogcm91bmQ7IHN0cm9rZS1taXRlcmxpbWl0OiAxMDsgc3Ryb2tlLWRhc2hhcnJheTogbm9uZTsgc3Ryb2tlLW9wYWNpdHk6IDE7IiB0cmFuc2Zvcm09Im1hdHJpeCgxLjMzMzMzIDAgMCAtMS4zMzMzMyAzMDUuMDE1IDMwNS4wMTUpIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtZGFzaGFycmF5PSJub25lIiBzdHJva2Utb3BhY2l0eT0iIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBjbGFzcz0iIj48L3BhdGg+PHBhdGggZD0ibTAgMC05MC4zNzUtOTAuMzc1IiBzdHlsZT0ic3Ryb2tlLXdpZHRoOiAyNTsgc3Ryb2tlLWxpbmVjYXA6IHJvdW5kOyBzdHJva2UtbGluZWpvaW46IHJvdW5kOyBzdHJva2UtbWl0ZXJsaW1pdDogMTA7IHN0cm9rZS1kYXNoYXJyYXk6IG5vbmU7IHN0cm9rZS1vcGFjaXR5OiAxOyIgdHJhbnNmb3JtPSJtYXRyaXgoMS4zMzMzMyAwIDAgLTEuMzMzMzMgMzAxLjE2NyAzODEuNSkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9Im5vbmUiIHN0cm9rZS1vcGFjaXR5PSIiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSIiPjwvcGF0aD48cGF0aCBkPSJtMCAwIDkwLjA0Ny05MC4wNDciIHN0eWxlPSJzdHJva2Utd2lkdGg6IDI1OyBzdHJva2UtbGluZWNhcDogcm91bmQ7IHN0cm9rZS1saW5lam9pbjogcm91bmQ7IHN0cm9rZS1taXRlcmxpbWl0OiAxMDsgc3Ryb2tlLWRhc2hhcnJheTogbm9uZTsgc3Ryb2tlLW9wYWNpdHk6IDE7IiB0cmFuc2Zvcm09Im1hdHJpeCgxLjMzMzMzIDAgMCAtMS4zMzMzMyAzODEuOTM3IDM4MS45MzcpIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtZGFzaGFycmF5PSJub25lIiBzdHJva2Utb3BhY2l0eT0iIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBjbGFzcz0iIj48L3BhdGg+PHBhdGggZD0ibTAgMCA5My4yNjEgOTMuMjYxIiBzdHlsZT0ic3Ryb2tlLXdpZHRoOiAyNTsgc3Ryb2tlLWxpbmVjYXA6IHJvdW5kOyBzdHJva2UtbGluZWpvaW46IHJvdW5kOyBzdHJva2UtbWl0ZXJsaW1pdDogMTA7IHN0cm9rZS1kYXNoYXJyYXk6IG5vbmU7IHN0cm9rZS1vcGFjaXR5OiAxOyIgdHJhbnNmb3JtPSJtYXRyaXgoMS4zMzMzMyAwIDAgLTEuMzMzMzMgMzc3LjY1MiAzMDUuMDE1KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLWRhc2hhcnJheT0ibm9uZSIgc3Ryb2tlLW9wYWNpdHk9IiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9IiI+PC9wYXRoPjxnIGNsaXAtcGF0aD0idXJsKCNhKSIgdHJhbnNmb3JtPSJtYXRyaXgoMS4zMzMzMyAwIDAgLTEuMzMzMzMgMCA2ODIuNjY3KSIgc3Ryb2tlLXdpZHRoPSIyNSIgc3R5bGU9InN0cm9rZS13aWR0aDogMjU7Ij48cGF0aCBkPSJNMCAwdi0xNDhjMC01MS4zNjItNDEuNjM4LTkzLTkzLTkzaC0xNDggMTQ4YzUxLjM2MiAwIDkzLTQxLjYzOCA5My05M3YtMTQ4IDE0OGMwIDUxLjM2MiA0MS42MzggOTMgOTMgOTNoMTQ4SDkzYy01MS4zNjIgMC05MyA0MS42MzgtOTMgOTN6IiBzdHlsZT0ic3Ryb2tlLXdpZHRoOiAyNTsgc3Ryb2tlLWxpbmVjYXA6IHJvdW5kOyBzdHJva2UtbGluZWpvaW46IHJvdW5kOyBzdHJva2UtbWl0ZXJsaW1pdDogMTA7IHN0cm9rZS1kYXNoYXJyYXk6IG5vbmU7IHN0cm9rZS1vcGFjaXR5OiAxOyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjU2IDQ5NykiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9Im5vbmUiIHN0cm9rZS1vcGFjaXR5PSIiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSIiPjwvcGF0aD48cGF0aCBkPSJNMCAwYzcuODQ2IDAgMTUuMzYzIDYuODk5IDE1IDE1LS4zNjQgOC4xMjctNi41OTEgMTUtMTUgMTUtNy44NDYgMC0xNS4zNjMtNi44OTktMTUtMTUgLjM2NC04LjEyNyA2LjU5MS0xNSAxNS0xNSIgc3R5bGU9ImZpbGwtb3BhY2l0eTogMTsgZmlsbC1ydWxlOiBub256ZXJvOyBzdHJva2U6IG5vbmU7IHN0cm9rZS13aWR0aDogMjU7IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOTUuNzUgNDAwLjY2NykiIGZpbGw9IiMwMDAwMDAiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMjUiPjwvcGF0aD48cGF0aCBkPSJNMCAwYzcuODQ2IDAgMTUuMzYzIDYuODk5IDE1IDE1LS4zNjQgOC4xMjctNi41OTEgMTUtMTUgMTUtNy44NDYgMC0xNS4zNjMtNi44OTktMTUtMTUgLjM2NC04LjEyNyA2LjU5MS0xNSAxNS0xNSIgc3R5bGU9ImZpbGwtb3BhY2l0eTogMTsgZmlsbC1ydWxlOiBub256ZXJvOyBzdHJva2U6IG5vbmU7IHN0cm9rZS13aWR0aDogMjU7IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxODUuNjI1IDYwLjI1KSIgZmlsbD0iIzAwMDAwMCIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyNSI+PC9wYXRoPjxwYXRoIGQ9Ik0wIDBjNy44NDYgMCAxNS4zNjMgNi44OTkgMTUgMTUtLjM2NCA4LjEyNy02LjU5MSAxNS0xNSAxNS03Ljg0NiAwLTE1LjM2My02Ljg5OS0xNS0xNSAuMzY0LTguMTI3IDYuNTkxLTE1IDE1LTE1IiBzdHlsZT0iZmlsbC1vcGFjaXR5OiAxOyBmaWxsLXJ1bGU6IG5vbnplcm87IHN0cm9rZTogbm9uZTsgc3Ryb2tlLXdpZHRoOiAyNTsiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMzNi4zNzUgNDMxLjc1KSIgZmlsbD0iIzAwMDAwMCIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyNSI+PC9wYXRoPjxwYXRoIGQ9Ik0wIDBjNy44NDYgMCAxNS4zNjMgNi44OTkgMTUgMTUtLjM2NCA4LjEyNy02LjU5MSAxNS0xNSAxNS03Ljg0NiAwLTE1LjM2My02Ljg5OS0xNS0xNSAuMzY0LTguMTI3IDYuNTkxLTE1IDE1LTE1IiBzdHlsZT0iZmlsbC1vcGFjaXR5OiAxOyBmaWxsLXJ1bGU6IG5vbnplcm87IHN0cm9rZTogbm9uZTsgc3Ryb2tlLXdpZHRoOiAyNTsiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQwIDE3MCkiIGZpbGw9IiMwMDAwMDAiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMjUiPjwvcGF0aD48cGF0aCBkPSJNMCAwYzcuODQ2IDAgMTUuMzYzIDYuODk5IDE1IDE1LS4zNjQgOC4xMjctNi41OTEgMTUtMTUgMTUtNy44NDYgMC0xNS4zNjMtNi44OTktMTUtMTUgLjM2NC04LjEyNyA2LjU5MS0xNSAxNS0xNSIgc3R5bGU9ImZpbGwtb3BhY2l0eTogMTsgZmlsbC1ydWxlOiBub256ZXJvOyBzdHJva2U6IG5vbmU7IHN0cm9rZS13aWR0aDogMjU7IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMDggMTA0KSIgZmlsbD0iIzAwMDAwMCIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyNSI+PC9wYXRoPjwvZz48L2c+PC9zdmc+');
background-color: #facc15;
}
.np-dmg.dark {
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB4PSIwIiB5PSIwIiB2aWV3Qm94PSIwIDAgNTEyLjA1NiA1MTIuMDU2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIiBjbGFzcz0iIj48Zz48cGF0aCBkPSJtMjk1LjY3MiA0MTQuMjU2LTI1LjM2NCA3NS43MzZjLTQuNTg5IDEzLjcwMS0yMy45NyAxMy43MDEtMjguNTU5IDBsLTI1LjM2NC03NS43MzZjLTUxLjQ1OS0xMS4wNDEtOTUuODM5LTQzLjMtMTIyLjQ3MS04OC4zMzFsLTc4Ljk2Mi0uNzExYy0xNC40NS0uMTMtMjAuNDM5LTE4LjU2Mi04LjgyNS0yNy4xNjFsNjIuODYtNDYuNTQxYTE5MC4wMjEgMTkwLjAyMSAwIDAgMS0xLjE5NC0yMS4zMDVjMC00Ny4wNTEgMTcuMzU5LTkxLjM5MiA0OC4wMTUtMTI1LjU4NUw5Mi43NTUgMzEuNDM3Yy00LjM0MS0xMy43ODIgMTEuMzM4LTI1LjE3NCAyMy4xMDUtMTYuNzg2bDYyLjA2MyA0NC4yNDRjMjQuMjgxLTExLjA4OSA1MC43ODctMTYuOTIzIDc4LjEwNS0xNi45MjMgMjcuMzE4IDAgNTMuODI0IDUuODM0IDc4LjEwNSAxNi45MjNsNjIuMDYzLTQ0LjI0NGMxMS43NjctOC4zODggMjcuNDQ2IDMuMDA0IDIzLjEwNSAxNi43ODZsLTIzLjA1MyA3My4xODVjMzAuNjU2IDM0LjE5MyA0OC4wMTUgNzguNTM1IDQ4LjAxNSAxMjUuNTg1IDAgNy4xNTctLjQgMTQuMjY3LTEuMTk0IDIxLjMwNWw2Mi44NiA0Ni41NDFjMTEuNjEzIDguNTk4IDUuNjI1IDI3LjAzLTguODI1IDI3LjE2MWwtNzguOTYyLjcxMWMtMjYuNjMyIDQ1LjAzMS03MS4wMTIgNzcuMjg5LTEyMi40NyA4OC4zMzF6bS04Ni43NzgtMTE3LjUxM2g5NC4yNjhsMjkuMTMtODkuNjU0LTc2LjI2NC01NS40MS03Ni4yNjQgNTUuNDEgMjkuMTMgODkuNjU0em0tMzEuNzI5LS4xODctMjIuOTYtNzAuNjY1LTk0LjAyIDY5LjYxMSAxMTYuOTggMS4wNTR6bTExNi4wMTQgMzAuMzA1aC03NC4zMDFsMzcuMTUxIDExMC45MjkgMzcuMTUtMTEwLjkyOXptNjQuNjcyLTEwMC45Ny0yMi45NiA3MC42NjUgMTE2Ljk4LTEuMDUzLTk0LjAyLTY5LjYxMnptLTc2LjA0NC05Mi43MDkgNjAuMTExIDQzLjY3MyAzNS4xNDctMTExLjU4LTk1LjI1OCA2Ny45MDd6bS0xMTEuNjY5IDQzLjY3MyA2MC4xMTEtNDMuNjczLTk1LjI1OC02Ny45MDcgMzUuMTQ3IDExMS41OHptMTYuOTQ1IDE0OS45MDgtNTYuNjc2LS41MWMxOC45NSAyNC43NTQgNDQuODcgNDMuNDkxIDc0LjQ1OSA1My42MDlsLTE3Ljc4My01My4wOTl6TTk3LjkxIDIzMC4wOTdsNDYuNTYyLTM0LjQ3NC0xNy43NzMtNTYuNDIyYy0xOC41MDggMjYuMjQtMjguNzY2IDU3Ljc0NS0yOC43ODkgOTAuODk2em0xNTguMTE4LTExNS41MjQgNDguODI2LTM0LjgwN2MtMTUuNTg4LTUuMDU1LTMyLjAxMi03LjY3Ny00OC44MjYtNy42NzdzLTMzLjIzOCAyLjYyMi00OC44MjYgNy42NzdsNDguODI2IDM0LjgwN3ptMTExLjU1NSA4MS4wNSA0Ni41NjIgMzQuNDc0Yy0uMDIzLTMzLjE1MS0xMC4yODEtNjQuNjU2LTI4Ljc5LTkwLjg5NmwtMTcuNzcyIDU2LjQyMnptMTQuMDY2IDEzMC42My01Ni42NzYuNTEtMTcuNzgzIDUzLjA5OWMyOS41ODktMTAuMTE4IDU1LjUwOS0yOC44NTUgNzQuNDU5LTUzLjYwOXoiIGZpbGw9IiMwMDAwMDAiIG9wYWNpdHk9IjEiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSIiPjwvcGF0aD48L2c+PC9zdmc+');
background-color: #9ca3af;
}
.np-dmg.acid,
.np-dmg.poison {
mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB4PSIwIiB5PSIwIiB2aWV3Qm94PSIwIDAgNDgwLjAwMiA0ODAuMDAyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIiBjbGFzcz0iIj48Zz48cGF0aCBkPSJNNDc5Ljk4NyAyOTEuNDkzYy0uOTYyIDI0Ljg3NC01MS41MTkgMzUuNTQ5LTUwLjgwMSA1NS45LjMyMSA5LjA5MiAxNC4xNjIgMTQuNTQ4IDE1LjYzNCAzMS41ODggMi4xMzUgMjQuNzM1LTIzLjc5NSA0NS42NDQtNDMuNzg1IDU5Ljg0LTEwMS42ODIgNzIuMjA4LTIzNS4zNDMuMjkyLTI5MS4xOTkgMjkuNzU1LTE1Ljg1MyA4LjM2Mi0zMy42NzIgMTIuNjYtNDguNDkgMi40MjYtMTAuNjE0LTcuMzMyLTE0LjM2OC0xNS45OTMtMTUuNjQ4LTIxLjk2Ny03LjA1Ny0zMi45MjMgNDEuNzY0LTU1LjUxNSA0MS4xNTMtODEuNDQyLS4zMTgtMTMuNTI4LTE0LjY2MS0yMy43NjktMzYuMS0zNC45ODFhOCA4IDAgMCAxIDcuNDE2LTE0LjE3OGMyMS4zMjMgMTEuMTUzIDQ0LjEyIDI1LjA0MSA0NC42OCA0OC43ODIuNzkgMzMuNTQyLTQ2LjE3MiA1Ni42ODgtNDEuNTA1IDc4LjQ2NS42NzQgMy4xNDUgMi43OTkgNy44MDUgOS4wOTYgMTIuMTU1IDkuODE2IDYuNzc5IDIyLjQyMiAxLjU2MiAzMi43ODQtMy44NiA2Mi42MTctMzIuNzY2IDE5MS45ODYgNDAuMzczIDI4OC41MzctMjguMTkyIDEzLjc4MS05Ljc4NiAzOC41NzUtMjguNTgxIDM3LjEyLTQ1LjQyNy0uOTI3LTEwLjc2My0xNS4xMDItMTUuOTcxLTE1LjY4My0zMi40MDEtLjY2Ny0xOC45MjEgMTcuMzc5LTMwLjcyOSAzMS44NzktNDAuMjE3IDguMzUyLTUuNDY1IDE4Ljc0Ni0xMi4yNjcgMTguOTI0LTE2Ljg2NC4zOTktMTAuMzE5LTMzLjkzNS0zNC40MDItOTcuNTgtNTAuODgtMTc5LjczMS00Ni41MzItMzUwLjkyNiAyMC45OTItMzUwLjQxNyA0OS4yNDdhOC4wMDIgOC4wMDIgMCAwIDEtNy44NTQgOC4xNDNjLTQuMzgyLjA4Ni04LjA2My0zLjQwOC04LjE0NC03Ljg1NC0uNDE2LTIzLjExMiAzNS4xMzItNDEuMjcyIDY1LjAyNi01Mi40MzcgODQuNjUxLTMxLjYxNyAyMDAuMzE5LTM5Ljc5IDMwNS4zOTktMTIuNTg2IDMyLjAxNiA4LjI4NyAxMTAuODE1IDM0LjQwNiAxMDkuNTU4IDY2Ljk4NXptLTMyNy40NzYtMzQuODVjMjYuMDEyLTcuMjc2IDUxLjI2NyAyMC43NzggNDguMjMyIDM3LjQwNi0yLjg1MiAxNS42MjktMjcuNjQ3IDIwLjQ3MS00My41MzcgMjAuNDcxLTU4LjczOSAwLTMyLjg0Ni01MC4wMDMtNC42OTUtNTcuODc3em0tMTQuNzQzIDM3LjIxYy4xIDAgMi4xMDEgMy43MDUgMTQuOTUyIDQuNTQzIDE2LjQ1MiAxLjA3NyAzMC42NzctNC4wNTIgMzIuMjg4LTcuMjg2LjI5OC01Ljc0Ni0xMy43OTQtMjMuMDg2LTI4LjE4OC0xOS4wNTgtMTEuNDgxIDMuMjExLTIwLjIyOSAxNy44NjctMTkuMDUyIDIxLjgwMXptMTQxLjU4NCAxNS42NzZjLTMuODQzLTEyLjgzOSAxMC4yNzMtMzAuNTggMjQuNDc3LTM0LjU1MyAyMS4zODMtNS45NzkgNDIuMTE3IDE2Ljc4MyAzOS41MyAzMC45NjctMi40MDUgMTMuMTczLTIyLjI0NiAxNy4zMi0zNS44MjYgMTcuMzItMTUuMTYxLjAwMS0yNS41Ny01LjAwNy0yOC4xODEtMTMuNzM0em0xNS4zNjItNC44MDZjNS4yOTkgNC4xMTYgMjYuODMgMi45OTggMzIuNzY0LTEuOTU3LTEuNzExLTYuMTk1LTExLjI4NS0xNC42MzMtMTkuMzQtMTIuMzgxLTcuMzE4IDIuMDQ3LTEzLjIzNCAxMC45NzgtMTMuNDI0IDE0LjMzOHptLTg4LjM2MiA5NS4zMTljLTMuODQyLTEyLjgzOSAxMC4yNzMtMzAuNTgxIDI0LjQ3Ny0zNC41NTMgMjEuNDI5LTUuOTg5IDQyLjEwOCAxNi44MzUgMzkuNTMgMzAuOTY4LTIuNDE3IDEzLjI0MS0yMi40MTQgMTcuMzItMzUuODI2IDE3LjMyLTE1LjE2MSAwLTI1LjU3LTUuMDA4LTI4LjE4MS0xMy43MzV6bTE1LjM2Mi00LjgwNmM1LjMwNyA0LjEyMSAyNi44MzUgMi45OTUgMzIuNzY0LTEuOTU3LTEuNjY4LTYuMDM5LTExLjE2LTE0LjY2OC0xOS4zNC0xMi4zODEtNy4zMTggMi4wNDYtMTMuMjM0IDEwLjk3OC0xMy40MjQgMTQuMzM4em02Ny4yODctMjYxLjcxOGMwLTE2LjI2NiAxMy4yMzMtMjkuNSAyOS41LTI5LjVzMjkuNSAxMy4yMzQgMjkuNSAyOS41LTEzLjIzMyAyOS41LTI5LjUgMjkuNS0yOS41LTEzLjIzMy0yOS41LTI5LjV6bTE2IDBjMCA3LjQ0NCA2LjA1NiAxMy41IDEzLjUgMTMuNXMxMy41LTYuMDU2IDEzLjUtMTMuNS02LjA1Ni0xMy41LTEzLjUtMTMuNS0xMy41IDYuMDU3LTEzLjUgMTMuNXptOTkuNzg3LTM2LjY2MWE4IDggMCAxIDAtNi40NjctMTQuNjM1Yy0yMS41OTIgOS41NDEtNDYuMzItNi4yNTgtNDYuMzItMzAuMjA0IDAtMTguMTk2IDE0LjgwNC0zMyAzMy0zM3MzMyAxNC44MDQgMzMgMzNhOCA4IDAgMCAwIDE2IDBjMC0yNy4wMTktMjEuOTgxLTQ5LTQ5LTQ5cy00OSAyMS45ODEtNDkgNDljMCAzNS40NSAzNi42IDU5LjA2MSA2OC43ODcgNDQuODM5em0tMjQuNzg3IDYyLjE2MWM3LjE2OCAwIDEzIDUuODMyIDEzIDEzcy01LjgzMiAxMy0xMyAxMy0xMy01LjgzMi0xMy0xMyA1LjgzMi0xMyAxMy0xM3oiIGZpbGw9IiMwMDAwMDAiIG9wYWNpdHk9IjEiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSIiPjwvcGF0aD48L2c+PC9zdmc+');
background-color: #34d399;
}
/* ---- Equipment slot panel ([[Equipment]]): the in-game paper doll, laid out
from the same grid and slot glyphs the panel uses in apps/web
(equipment-constants.ts). The two top corners stay empty because the game
spends them on the offence and defence readouts. ---- */
.np-slot-panel {
float: right;
clear: right;
width: 236px;
margin: 4px 0 14px 20px;
padding: 12px;
border: 1px solid var(--rule);
border-radius: 4px;
background: rgba(0, 0, 0, 0.22);
}
.np-slot-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.np-slot-belt {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
margin-top: 6px;
padding-top: 10px;
border-top: 1px solid var(--rule);
}
.np-slot-cell {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1;
border: 1px solid var(--rule);
border-radius: 3px;
background: rgba(0, 0, 0, 0.28);
}
/* MediaWiki wraps each image in its own mw:File span (and an anchor when the
cell links). Those wrappers shrink to the image's natural size, so a
percentage on the image would resolve against the wrapper rather than the
cell, and the image would sit against the wrapper's left edge. Stretch both
wrappers to the cell so the centring and the sizing below share its box. */
.np-slot-cell > span,
.np-slot-cell > span > a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.np-slot-cell img {
display: block;
width: 64%;
height: auto;
max-width: none;
}
/* Free cells read as part of the grid without inviting a click. */
.np-slot-empty {
border-style: dashed;
opacity: 0.4;
}
.np-slot-caption {
margin-top: 9px;
color: var(--ink-soft);
font-size: 0.85em;
text-align: center;
}
/* One rule per subsection, so a run of short sections reads as separate
entries rather than one block of text. Matches the h2 rule, a step lighter.
The h4 below it carries no rule of its own: two stacked rules would fight,
so it separates on weight and colour instead. */
.mw-body h3 {
border-bottom: 1px solid color-mix(in srgb, var(--rule) 70%, transparent);
padding-bottom: 3px;
}
.mw-body h4 {
color: var(--np-bone);
margin-top: 14px;
}
/* Per-slot section glyphs on [[Equipment]], sized to sit beside the prose.
An image with no caption still emits an empty figcaption that would
otherwise pad the float. */
.page-Equipment figure.mw-halign-left {
margin: 1px 11px 2px 0;
}
.page-Equipment figure.mw-halign-left figcaption:empty {
display: none;
}
@media (max-width: 850px) {
.np-slot-panel {
float: none;
width: 200px;
margin: 4px auto 16px;
}
}
/* ---- Desktop search suggestions. jquery.suggestions paints the dropdown
white with a #2a4b8d selected row, and those are hardcoded hex values
rather than Codex tokens, so the palette override cannot reach them: they
need naming here. Mirrors the Minerva search overlay above so both skins
read the same. ---- */
.suggestions-results,
.suggestions-special {
background-color: var(--bg) !important;
border: 1px solid var(--rule) !important;
}
.suggestions-result,
.suggestions a.mw-searchSuggest-link,
.suggestions a.mw-searchSuggest-link:hover,
.suggestions a.mw-searchSuggest-link:active,
.suggestions a.mw-searchSuggest-link:focus {
color: var(--ink) !important;
}
.suggestions-special .special-label {
color: var(--ink-soft) !important;
}
.suggestions-special .special-query {
color: var(--link) !important;
}
/* Selected / hovered row: the brand gold over the panel tone, rather than the
stock blue-on-white. */
.suggestions-result-current,
.suggestions-special .special-hover {
background-color: color-mix(
in srgb,
var(--np-gold) 20%,
var(--bg)
) !important;
}
.suggestions-result-current,
.suggestions-result-current .special-label,
.suggestions-result-current .special-query,
.suggestions-result-current a.mw-searchSuggest-link,
.suggestions-result-current a.mw-searchSuggest-link:hover,
.suggestions-result-current a.mw-searchSuggest-link:active,
.suggestions-result-current a.mw-searchSuggest-link:focus {
color: var(--ink) !important;
}
/* The bolded matching substring in a suggestion. */
.suggestions .highlight {
color: var(--np-gold-soft) !important;
}
/* ---- Code and preformatted text. Core ships these on a near-white
#f8f9fa panel with a light border, which leaves our pale ink almost
invisible on a light box. Put them on the dark banding tone instead. ---- */
code,
pre,
kbd,
samp,
.mw-code {
background-color: var(--box-alt);
color: var(--ink);
border: 1px solid var(--rule);
border-radius: 3px;
}
code {
padding: 1px 5px;
}
pre,
.mw-code {
padding: 10px 12px;
overflow-x: auto;
}
/* A code span inside a link keeps the link colour so it still reads as one. */
a code {
color: var(--link);
}
/* ---- Grouped base tables (slot pages). Sizing to content left a one-row
table a third the width of the one under it, so the column of tables read
as ragged; hold them to a common width and let the cells share it. ---- */
.np-base-table {
width: 100%;
max-width: 780px;
margin-bottom: 4px;
}
/* Core floats the collapse toggle into the last header cell, where it lands on
top of the sort arrow. Park it on the right of the caption row instead and
dress it as a quiet control rather than a link. */
.np-base-table > * > tr > th .mw-collapsible-toggle {
float: right;
font-weight: 400;
font-size: 11px;
text-transform: lowercase;
color: var(--ink-soft);
}
.np-base-table .mw-collapsible-toggle a {
color: var(--ink-soft);
}
.np-base-table .mw-collapsible-toggle a:hover {
color: var(--np-gold);
}
/* ------------------------------------------------------------
* 1. Authentication pages — Special:UserLogin / Special:CreateAccount.
*
* The palette, fonts, links, body chrome and the gold progressive-button rule
* further up this file all apply on their own once site CSS is allowed on these
* pages; the SSO button is already a gold primary button through the existing
* .oo-ui-flaggedElement-progressive rule. What is left is the OOUI form chrome,
* which ships light-theme defaults of its own.
* ------------------------------------------------------------ */
.mw-special-Userlogin #mw-content-text,
.mw-special-CreateAccount #mw-content-text {
color: var(--ink);
}
/* Keep the single-button SSO form from stretching across the content column. */
.mw-special-Userlogin .mw-htmlform,
.mw-special-CreateAccount .mw-htmlform {
max-width: 26rem;
}
.mw-special-Userlogin .oo-ui-fieldsetLayout-header,
.mw-special-Userlogin .oo-ui-labelElement-label,
.mw-special-Userlogin .oo-ui-fieldLayout-header label,
.mw-special-CreateAccount .oo-ui-fieldsetLayout-header,
.mw-special-CreateAccount .oo-ui-labelElement-label,
.mw-special-CreateAccount .oo-ui-fieldLayout-header label {
color: var(--ink);
}
.mw-special-Userlogin .oo-ui-fieldLayout-help,
.mw-special-Userlogin .oo-ui-inline-help,
.mw-special-CreateAccount .oo-ui-fieldLayout-help,
.mw-special-CreateAccount .oo-ui-inline-help {
color: var(--ink-soft);
}
/* No password is typed on this domain today (SSO only), so there are no inputs
on the form as it stands. These cover any field a future provider adds. */
.mw-special-Userlogin .oo-ui-inputWidget-input,
.mw-special-Userlogin .cdx-text-input__input,
.mw-special-CreateAccount .oo-ui-inputWidget-input,
.mw-special-CreateAccount .cdx-text-input__input {
background: var(--box-bg);
color: var(--ink);
border: 1px solid var(--tab-line);
}
.mw-special-Userlogin .oo-ui-inputWidget-input::placeholder,
.mw-special-CreateAccount .oo-ui-inputWidget-input::placeholder {
color: var(--ink-soft);
}
/* Error / notice boxes (wrong provider, cancelled SSO round trip, etc.). */
.mw-special-Userlogin .oo-ui-messageWidget,
.mw-special-Userlogin .cdx-message,
.mw-special-Userlogin .mw-message-box,
.mw-special-CreateAccount .oo-ui-messageWidget,
.mw-special-CreateAccount .cdx-message,
.mw-special-CreateAccount .mw-message-box {
background: var(--box-bg);
color: var(--ink);
border: 1px solid var(--rule);
}
/* ------------------------------------------------------------
* 2. Login gate leftovers — mobile only.
*
* On desktop the "Log in" / "Create account" links are removed server side by
* the SkinTemplateNavigation::Universal handler in LocalSettings.php. Minerva
* builds its own auth entry for the hamburger menu and does not go through that
* hook, so it is hidden here. The href match is the durable part; the class is
* belt and braces.
*
* DELETE THIS BLOCK when the login gate is reopened.
* ------------------------------------------------------------ */
.skin-minerva .menu__item--login,
.skin-minerva a[href*='Special:UserLogin'],
.skin-minerva a[href*='Special:CreateAccount'] {
display: none;
}
/* ------------------------------------------------------------
* 3. History gate leftovers.
*
* Minerva's mobile "Last edited on <date>" bar is the mobile counterpart of the
* desktop footer line, so it stays — but the whole bar is an <a> pointing at the
* now-disabled history action. Neutralise the click; the bar keeps reading as
* plain text.
*
* The desktop "View history" tab and the sidebar / toolbox links are removed
* server side; #ca-history here only covers a stale cached skin render.
*
* DELETE THIS BLOCK when public history is restored.
* ------------------------------------------------------------ */
.skin-minerva a.last-modified-bar {
pointer-events: none;
cursor: default;
}
.skin-minerva a.last-modified-bar .minerva-icon--expand,
.skin-minerva a.last-modified-bar .mw-ui-icon-wikimedia-expand {
display: none;
}
#ca-history {
display: none;
}