MediaWiki:Common.css: Difference between revisions

Revision as of 10:18, 14 July 2026

/* ============================================================================
 * Primal Idle Wiki — dark theme (Vector 2022)
 * Palette lifted from the game (src/app.css + icon palette) so the wiki reads
 * as the same product: near-black slate background, amber accent, soft panels.
 *
 * This is the SOURCE. The file to paste into MediaWiki:Common.css is the
 * GENERATED theme/Common.css (this base + the game icon classes appended by
 * theme/build-theme.mjs). See theme/README.md.
 *
 * theme v0.4.0
 * ==========================================================================*/

:root {
  --pi-bg: #0e1117;
  --pi-panel: #161b24;
  --pi-panel-raised: #1c2330;
  --pi-border: #2a3242;
  --pi-text: #e7ebf3;
  --pi-muted: #94a0b8;
  --pi-accent: #f0a53c;      /* amber */
  --pi-accent-dark: #c27a18;
  --pi-accent-soft: rgba(240, 165, 60, 0.15);
  --pi-green: #5ec26a;
  --pi-danger: #e05b5b;
  --pi-link: #f0b968;
  --pi-link-visited: #cf9bd6;
  --pi-radius: 10px;
  --pi-display: 'Alfa Slab One', 'Roboto Slab', Rockwell, 'Segoe UI', Georgia, serif;
}

/* --- page canvas ---------------------------------------------------------- */
html,
body,
.mw-page-container,
.mw-page-container-inner,
.vector-feature-limited-width-clientpref-1 .mw-page-container {
  background: var(--pi-bg) !important;
  color: var(--pi-text);
}

body {
  color: var(--pi-text);
}

/* content column sits on a slightly raised panel */
.vector-body,
.mw-body,
#content,
.mw-body-content {
  background: var(--pi-panel) !important;
  color: var(--pi-text) !important;
  border-color: var(--pi-border) !important;
  border-radius: var(--pi-radius);
}

.mw-body p,
.mw-body li,
.mw-body dd,
.mw-body td,
.mw-body th {
  color: var(--pi-text);
}

/* --- headings ------------------------------------------------------------- */
#firstHeading,
.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body h4 {
  color: var(--pi-text);
  border-color: var(--pi-border) !important;
}

#firstHeading,
.mw-body h1,
.mw-body h2 {
  font-family: var(--pi-display);
  font-weight: 400;
  letter-spacing: 0.3px;
}

#firstHeading {
  color: var(--pi-accent);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

.mw-body h2 {
  border-bottom: 2px solid var(--pi-accent-dark) !important;
  padding-bottom: 0.2em;
}

/* --- links ---------------------------------------------------------------- */
.mw-body a,
.mw-body a.external,
a {
  color: var(--pi-link);
}

.mw-body a:visited {
  color: var(--pi-link-visited);
}

.mw-body a.new,
a.new {
  color: var(--pi-danger) !important;
}

.mw-body a:hover {
  color: var(--pi-accent);
}

/* --- chrome: header, sidebar, toc, search, footer ------------------------- */
.vector-header-container,
.vector-header,
.mw-header,
.vector-sticky-header {
  background: var(--pi-bg) !important;
  color: var(--pi-text);
  border-color: var(--pi-border) !important;
}

.vector-main-menu-container,
.vector-main-menu,
.vector-pinnable-element,
.vector-menu-content,
.vector-toc,
#mw-panel,
.vector-page-toolbar {
  background: transparent !important;
  color: var(--pi-text);
}

.vector-toc,
.vector-menu-content-list li a,
.vector-toc a {
  color: var(--pi-muted);
}

.vector-toc a:hover {
  color: var(--pi-accent);
}

.vector-toc .vector-toc-list-item-active > a,
.vector-toc-list-item-active > a .vector-toc-text {
  color: var(--pi-accent) !important;
  border-color: var(--pi-accent) !important;
}

/* search box */
.cdx-text-input__input,
.vector-search-box input,
#searchInput {
  background: var(--pi-panel-raised) !important;
  color: var(--pi-text) !important;
  border: 1px solid var(--pi-border) !important;
  border-radius: 6px;
}

/* buttons / tabs */
.vector-menu-tabs a,
.mw-list-item a,
.cdx-button {
  color: var(--pi-muted);
}

.mw-footer,
.vector-footer {
  background: var(--pi-bg) !important;
  color: var(--pi-muted);
  border-top: 1px solid var(--pi-border);
}

/* --- tables --------------------------------------------------------------- */
.wikitable {
  background: var(--pi-panel-raised) !important;
  color: var(--pi-text) !important;
  border: 1px solid var(--pi-border) !important;
  border-collapse: collapse;
}

.wikitable > tr > th,
.wikitable > * > tr > th {
  background: #202838 !important;
  color: var(--pi-accent) !important;
  border: 1px solid var(--pi-border) !important;
}

.wikitable > tr > td,
.wikitable > * > tr > td {
  border: 1px solid var(--pi-border) !important;
}

.wikitable > * > tr:nth-child(even) > td {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* --- code / pre ----------------------------------------------------------- */
.mw-body pre,
.mw-body code,
.mw-body .mw-code {
  background: #0b0e14 !important;
  color: #cbd5e8 !important;
  border: 1px solid var(--pi-border) !important;
  border-radius: 6px;
}

/* --- message / note boxes ------------------------------------------------- */
.mw-message-box,
.cdx-message,
div.mw-references-wrap {
  background: var(--pi-panel-raised) !important;
  color: var(--pi-text) !important;
  border-color: var(--pi-border) !important;
}

/* --- Primal Idle custom components (used by pages/templates) --------------- */

/* icon glyph — see the generated block below for per-id background images */
.pi-icon {
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  vertical-align: -0.28em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

/* hero banner for the Main Page */
.pi-hero {
  background: linear-gradient(135deg, #121826 0%, #0e1117 60%);
  border: 1px solid var(--pi-border);
  border-radius: var(--pi-radius);
  padding: 1.4em 1.6em;
  margin-bottom: 1.2em;
  box-shadow: inset 0 0 0 1px rgba(240, 165, 60, 0.08);
}

.pi-hero-title {
  font-family: var(--pi-display);
  font-size: 2.1em;
  color: var(--pi-accent);
  line-height: 1.1;
  margin: 0 0 0.2em;
}

.pi-hero-tagline {
  color: var(--pi-muted);
  font-size: 1.05em;
  margin: 0;
}

/* card grid for hub / portal pages */
.pi-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em;
  margin: 1em 0;
}

.pi-card {
  flex: 1 1 220px;
  background: var(--pi-panel-raised);
  border: 1px solid var(--pi-border);
  border-radius: var(--pi-radius);
  padding: 0.9em 1em;
}

.pi-card:hover {
  border-color: var(--pi-accent-dark);
}

.pi-card-title {
  font-weight: 600;
  color: var(--pi-accent);
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-bottom: 0.25em;
}

/* an amber pill/chip */
.pi-chip {
  display: inline-block;
  background: var(--pi-accent-soft);
  color: var(--pi-accent);
  border: 1px solid var(--pi-accent-dark);
  border-radius: 999px;
  padding: 0.05em 0.6em;
  font-size: 0.85em;
}

/* ======================================================================== */
/* GAME ICONS — generated below by theme/build-theme.mjs. Do not edit here.  */
/* ======================================================================== */

/* 37 game icons (generated from icons.json). Use via {{Icon|<id>}}. */
.pi-foraging{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M16%2026c0-8%203-14%2011-17-1%209-4%2015-11%2017z%22%20fill%3D%22%2357b060%22%2F%3E%20%3Cpath%20d%3D%22M16%2026c0-8-3-14-11-17%201%209%204%2015%2011%2017z%22%20fill%3D%22%233a7f45%22%2F%3E%20%3Crect%20x%3D%2215%22%20y%3D%2217%22%20width%3D%222.4%22%20height%3D%2211%22%20rx%3D%221.2%22%20fill%3D%22%237c5228%22%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%223%22%20fill%3D%22%23d64550%22%2F%3E%20%3Ccircle%20cx%3D%2211%22%20cy%3D%227%22%20r%3D%221%22%20fill%3D%22%239e2f38%22%20opacity%3D%220.5%22%2F%3E%3C%2Fsvg%3E")}
.pi-logging{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Crect%20x%3D%2214.5%22%20y%3D%228%22%20width%3D%224%22%20height%3D%2220%22%20rx%3D%221.6%22%20fill%3D%22%23a9743c%22%20transform%3D%22rotate(35%2016.5%2018)%22%2F%3E%20%3Cpath%20d%3D%22M8%204l10%205-2.5%205.5L5%209.5C5.5%206.5%206.5%205%208%204z%22%20fill%3D%22%239aa3ae%22%2F%3E%20%3Cpath%20d%3D%22M8%204l10%205-1.2%202.6L6%207C6.6%205.6%207.2%204.6%208%204z%22%20fill%3D%22%23c2c9d2%22%2F%3E%3C%2Fsvg%3E")}
.pi-mining{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Crect%20x%3D%2214.8%22%20y%3D%227%22%20width%3D%223%22%20height%3D%2221%22%20rx%3D%221.5%22%20fill%3D%22%23a9743c%22%2F%3E%20%3Cpath%20d%3D%22M4%2012C8%206%2013%203.5%2020%204l-1%204c-5-.4-9%201.4-12%206l-3-2z%22%20fill%3D%22%237e8794%22%2F%3E%20%3Cpath%20d%3D%22M28%2012c-1.5-3.5-4-6.4-8-8l-1%204c2.8%201.2%204.7%203%206%206l3-2z%22%20fill%3D%22%23565e6b%22%2F%3E%3C%2Fsvg%3E")}
.pi-fishing{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M20%204v12a5%205%200%200%201-10%200h3a2%202%200%200%200%204%200V4h3z%22%20fill%3D%22%23c2c9d2%22%2F%3E%20%3Cellipse%20cx%3D%2217%22%20cy%3D%2224%22%20rx%3D%227%22%20ry%3D%224.5%22%20fill%3D%22%234f9fd8%22%2F%3E%20%3Cpath%20d%3D%22M24%2024l5-3.5v7L24%2024z%22%20fill%3D%22%2333719f%22%2F%3E%20%3Ccircle%20cx%3D%2213.5%22%20cy%3D%2223%22%20r%3D%221.1%22%20fill%3D%22%232a2f3a%22%2F%3E%3C%2Fsvg%3E")}
.pi-cooking{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M5%2014h22v4a11%208.5%200%200%201-22%200v-4z%22%20fill%3D%22%23565e6b%22%2F%3E%20%3Crect%20x%3D%224%22%20y%3D%2213%22%20width%3D%2224%22%20height%3D%223.4%22%20rx%3D%221.7%22%20fill%3D%22%237e8794%22%2F%3E%20%3Cpath%20d%3D%22M11%204c-1.6%202.6.9%203.6-.7%206.2M17%204c-1.6%202.6.9%203.6-.7%206.2M23%204c-1.6%202.6.9%203.6-.7%206.2%22%20stroke%3D%22%23c2c9d2%22%20stroke-width%3D%221.8%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E")}
.pi-crafting{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2218%22%20r%3D%229%22%20fill%3D%22%23d64550%22%2F%3E%20%3Cpath%20d%3D%22M6.3%2014a9%209%200%200%201%2015.4%200M6.3%2022a9%209%200%200%200%2015.4%200%22%20stroke%3D%22%239e2f38%22%20stroke-width%3D%221.8%22%20fill%3D%22none%22%2F%3E%20%3Cpath%20d%3D%22M22%206l6%204-9%2013-4%201%201-4%206-14z%22%20fill%3D%22%23c2c9d2%22%2F%3E%20%3Cpath%20d%3D%22M22%206l6%204-1.6%202.3-6-4L22%206z%22%20fill%3D%22%237e8794%22%2F%3E%3C%2Fsvg%3E")}
.pi-smithing{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M6%2012h20l-3%205h-4v5h4l2%204H7l2-4h4v-5h-4l-3-5z%22%20fill%3D%22%23565e6b%22%2F%3E%20%3Crect%20x%3D%224%22%20y%3D%229%22%20width%3D%2224%22%20height%3D%224.5%22%20rx%3D%222%22%20fill%3D%22%237e8794%22%2F%3E%20%3Crect%20x%3D%2220%22%20y%3D%222%22%20width%3D%228%22%20height%3D%225%22%20rx%3D%221.5%22%20fill%3D%22%236c7480%22%20transform%3D%22rotate(20%2024%204)%22%2F%3E%3C%2Fsvg%3E")}
.pi-alchemy{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M13%204h6v7l6%2012a4%204%200%200%201-3.6%205.8H10.6A4%204%200%200%201%207%2023L13%2011V4z%22%20fill%3D%22%23c2c9d2%22%20opacity%3D%220.65%22%2F%3E%20%3Cpath%20d%3D%22M10%2017h12l4%206a4%204%200%200%201-3.6%205.8H10.6A4%204%200%200%201%207%2023l3-6z%22%20fill%3D%22%238f7ff0%22%2F%3E%20%3Ccircle%20cx%3D%2214%22%20cy%3D%2223%22%20r%3D%221.4%22%20fill%3D%22%23ffe08a%22%2F%3E%20%3Crect%20x%3D%2212%22%20y%3D%222.5%22%20width%3D%228%22%20height%3D%223%22%20rx%3D%221.5%22%20fill%3D%22%237c5228%22%2F%3E%3C%2Fsvg%3E")}
.pi-hunting{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M9%204a14%2014%200%200%201%200%2024l-2.4-1.6a11%2011%200%200%200%200-20.8L9%204z%22%20fill%3D%22%23a9743c%22%2F%3E%20%3Cpath%20d%3D%22M7%2015.4h16v1.6H7z%22%20fill%3D%22%23c2c9d2%22%2F%3E%20%3Cpath%20d%3D%22M23%2012l7%204-7%204v-8z%22%20fill%3D%22%237e8794%22%2F%3E%20%3Cpath%20d%3D%22M4%2015l4-1.5v5L4%2017v-2z%22%20fill%3D%22%23b98bd0%22%2F%3E%3C%2Fsvg%3E")}
.pi-taming{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cellipse%20cx%3D%2216%22%20cy%3D%2221.5%22%20rx%3D%226.5%22%20ry%3D%225.5%22%20fill%3D%22%23a5683f%22%2F%3E%20%3Cellipse%20cx%3D%227.5%22%20cy%3D%2214%22%20rx%3D%223%22%20ry%3D%224%22%20fill%3D%22%2377492a%22%2F%3E%20%3Cellipse%20cx%3D%2224.5%22%20cy%3D%2214%22%20rx%3D%223%22%20ry%3D%224%22%20fill%3D%22%2377492a%22%2F%3E%20%3Cellipse%20cx%3D%2212.5%22%20cy%3D%227.5%22%20rx%3D%222.8%22%20ry%3D%223.6%22%20fill%3D%22%2377492a%22%2F%3E%20%3Cellipse%20cx%3D%2219.5%22%20cy%3D%227.5%22%20rx%3D%222.8%22%20ry%3D%223.6%22%20fill%3D%22%2377492a%22%2F%3E%3C%2Fsvg%3E")}
.pi-expeditions{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M4%207l8-3%208%203%208-3v21l-8%203-8-3-8%203V7z%22%20fill%3D%22%23f2e3c0%22%2F%3E%20%3Cpath%20d%3D%22M12%204l8%203v21l-8-3V4z%22%20fill%3D%22%23d9c393%22%2F%3E%20%3Cpath%20d%3D%22M8%2014c3%200%204%203%207%203s5-4%209-3%22%20stroke%3D%22%23d64545%22%20stroke-width%3D%221.8%22%20fill%3D%22none%22%20stroke-dasharray%3D%223%202%22%2F%3E%20%3Ccircle%20cx%3D%2224%22%20cy%3D%2214%22%20r%3D%222%22%20fill%3D%22%23d64545%22%2F%3E%3C%2Fsvg%3E")}
.pi-delving{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M3%2029C3%2015%208.5%205.5%2016%205.5S29%2015%2029%2029H3z%22%20fill%3D%22%236c7480%22%2F%3E%20%3Cpath%20d%3D%22M8%2029c0-9%203.4-16%208-16s8%207%208%2016H8z%22%20fill%3D%22%232a2f3a%22%2F%3E%20%3Crect%20x%3D%2214.9%22%20y%3D%2216.5%22%20width%3D%222.2%22%20height%3D%228%22%20rx%3D%221.1%22%20fill%3D%22%23a9743c%22%2F%3E%20%3Cpath%20d%3D%22M13.6%2012.5c0-2%20.9-3.2%202.4-4.5%201.5%201.3%202.4%202.5%202.4%204.5s-1.1%203.4-2.4%203.4-2.4-1.4-2.4-3.4z%22%20fill%3D%22%23f0a53c%22%2F%3E%20%3Cpath%20d%3D%22M15%2012.8c0-1.1.4-1.8%201-2.6.6.8%201%201.5%201%202.6%200%201.2-.5%201.9-1%201.9s-1-.7-1-1.9z%22%20fill%3D%22%23ffe08a%22%2F%3E%3C%2Fsvg%3E")}
.pi-farming{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M4%2027c8-3%2016-3%2024%200v3H4v-3z%22%20fill%3D%22%238a7a5c%22%2F%3E%20%3Cpath%20d%3D%22M4%2027c8-3%2016-3%2024%200%22%20stroke%3D%22%235f5340%22%20stroke-width%3D%221.6%22%20fill%3D%22none%22%2F%3E%20%3Cpath%20d%3D%22M16%2025V13%22%20stroke%3D%22%233a7f45%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M16%2015c-4.5-.5-7-3.2-7.5-8%204.8.4%207.4%203%207.5%208z%22%20fill%3D%22%2357b060%22%2F%3E%20%3Cpath%20d%3D%22M16%2013c.1-5%202.7-7.6%207.5-8-.5%204.8-3%207.5-7.5%208z%22%20fill%3D%22%238dd694%22%2F%3E%20%3Ccircle%20cx%3D%229%22%20cy%3D%2224%22%20r%3D%221.4%22%20fill%3D%22%237c5228%22%2F%3E%20%3Ccircle%20cx%3D%2223%22%20cy%3D%2224%22%20r%3D%221.4%22%20fill%3D%22%237c5228%22%2F%3E%3C%2Fsvg%3E")}
.pi-grasslands{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2223%22%20cy%3D%229%22%20r%3D%224.5%22%20fill%3D%22%23ffe08a%22%2F%3E%20%3Cpath%20d%3D%22M2%2024c5-6%2011-6%2015-2%204-5%209-5%2013-1v7H2v-4z%22%20fill%3D%22%2357b060%22%2F%3E%20%3Cpath%20d%3D%22M17%2022c4-5%209-5%2013-1v7H14c0-2.5%201-4.5%203-6z%22%20fill%3D%22%233a7f45%22%2F%3E%3C%2Fsvg%3E")}
.pi-redwood-wilds{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Crect%20x%3D%228%22%20y%3D%2220%22%20width%3D%223.4%22%20height%3D%229%22%20fill%3D%22%237c5228%22%2F%3E%20%3Crect%20x%3D%2220.5%22%20y%3D%2218%22%20width%3D%223.6%22%20height%3D%2211%22%20fill%3D%22%237c5228%22%2F%3E%20%3Cpath%20d%3D%22M9.7%203L16%2020H3.5L9.7%203z%22%20fill%3D%22%233a7f45%22%2F%3E%20%3Cpath%20d%3D%22M22.3%205L29%2021H15.5L22.3%205z%22%20fill%3D%22%2357b060%22%2F%3E%3C%2Fsvg%3E")}
.pi-cavern-depths{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M3%2029V14C3%207%209%203%2016%203s13%204%2013%2011v15h-8v-8a5%205%200%200%200-10%200v8H3z%22%20fill%3D%22%236c7480%22%2F%3E%20%3Cpath%20d%3D%22M11%2029v-8a5%205%200%200%201%2010%200v8h-10z%22%20fill%3D%22%232a2f3a%22%2F%3E%20%3Cpath%20d%3D%22M9%208l1.6%204L9%2014l-1.6-2L9%208z%22%20fill%3D%22%238f7ff0%22%2F%3E%20%3Cpath%20d%3D%22M23%207l1.6%204-1.6%202-1.6-2L23%207z%22%20fill%3D%22%238f7ff0%22%2F%3E%3C%2Fsvg%3E")}
.pi-frozen-wastes{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M2%2027L11%208l6%2011%204-6%209%2014H2z%22%20fill%3D%22%23bfe4f5%22%2F%3E%20%3Cpath%20d%3D%22M11%208l3.4%206.4L12%2017l-4-2%203-7z%22%20fill%3D%22%23ffffff%22%2F%3E%20%3Cpath%20d%3D%22M17%2019l4-6%209%2014H14l3-8z%22%20fill%3D%22%238ec4dd%22%2F%3E%20%3Cpath%20d%3D%22M25%204v6M22%207h6M23%204.5l4%205M27%204.5l-4%205%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E")}
.pi-sundered-vale{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M3%2028L12%209h8l9%2019H3z%22%20fill%3D%22%232a2f3a%22%2F%3E%20%3Cpath%20d%3D%22M16%2028l-3-10%202-9h5l-1%209%203%2010h-6z%22%20fill%3D%22%23d64545%22%2F%3E%20%3Cpath%20d%3D%22M13%209c1-2.5%205-2.5%206%200l-1.6%202h-2.8L13%209z%22%20fill%3D%22%23f0913c%22%2F%3E%3C%2Fsvg%3E")}
.pi-coral-shallows{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M2%2020h28v9H2z%22%20fill%3D%22%234f9fd8%22%2F%3E%20%3Cpath%20d%3D%22M2%2019c4-2.4%208-2.4%2012%200s8%202.4%2012%200%22%20stroke%3D%22%238cc6ea%22%20stroke-width%3D%222%22%20fill%3D%22none%22%2F%3E%20%3Cpath%20d%3D%22M9%2028v-5c-2.4-.4-3.8-2-4.2-4.6%202.8.2%204.6%201.4%205.4%203.4.4-3%201.8-5.2%204.4-6.4.4%203.4-.6%206-3%207.6V28H9z%22%20fill%3D%22%23d64550%22%2F%3E%20%3Cpath%20d%3D%22M22%2028v-4c-2-.6-3.2-2-3.6-4.2%202.6.4%204.2%201.6%204.8%203.6.6-2%201.9-3.3%204-4-.3%202.8-1.5%204.6-3.6%205.6V28H22z%22%20fill%3D%22%23f0913c%22%2F%3E%3C%2Fsvg%3E")}
.pi-murkwater-swamp{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cellipse%20cx%3D%2216%22%20cy%3D%2224%22%20rx%3D%2213%22%20ry%3D%224.5%22%20fill%3D%22%2333719f%22%2F%3E%20%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%223%22%20height%3D%2214%22%20fill%3D%22%237c5228%22%2F%3E%20%3Cpath%20d%3D%22M9.5%203C5.5%204.5%203.5%207.5%203.5%2011.5c4-.5%206.5-3%206-8.5zM9.5%203c4%201.5%206%204.5%206%208.5-4-.5-6.5-3-6-8.5z%22%20fill%3D%22%233a7f45%22%2F%3E%20%3Cpath%20d%3D%22M8%2022c2.5%202%205.5%202%208%200%22%20stroke%3D%22%233a7f45%22%20stroke-width%3D%221.6%22%20fill%3D%22none%22%2F%3E%20%3Ccircle%20cx%3D%2222%22%20cy%3D%2221.5%22%20r%3D%221.2%22%20fill%3D%22%23ffe08a%22%2F%3E%20%3Ccircle%20cx%3D%2226%22%20cy%3D%2223%22%20r%3D%221.2%22%20fill%3D%22%23ffe08a%22%2F%3E%3C%2Fsvg%3E")}
.pi-scorched-badlands{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2225%22%20cy%3D%227%22%20r%3D%224%22%20fill%3D%22%23d64545%22%2F%3E%20%3Cpath%20d%3D%22M2%2028v-6l5-9%204%206%203-4%205%208%203-5%208%2010H2z%22%20fill%3D%22%23c77b4a%22%2F%3E%20%3Cpath%20d%3D%22M17%2023l3-5%208%2010H14l3-5z%22%20fill%3D%22%2396552c%22%2F%3E%20%3Cpath%20d%3D%22M6%2027l2-3M12%2027l1.6-2.6%22%20stroke%3D%22%2396552c%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E")}
.pi-ashen-peaks{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M2%2028L11%208l5%208%204-5%2010%2017H2z%22%20fill%3D%22%232a2f3a%22%2F%3E%20%3Cpath%20d%3D%22M11%208l3.2%205.6L12%2016l-3.5-2L11%208z%22%20fill%3D%22%23d64545%22%2F%3E%20%3Cpath%20d%3D%22M20%2011l2.6%204-2.6%201.6-2.4-1.8L20%2011z%22%20fill%3D%22%23d64545%22%2F%3E%20%3Ccircle%20cx%3D%229%22%20cy%3D%225%22%20r%3D%221.4%22%20fill%3D%22%236c7480%22%2F%3E%20%3Ccircle%20cx%3D%2214%22%20cy%3D%223.5%22%20r%3D%221.8%22%20fill%3D%22%236c7480%22%2F%3E%20%3Ccircle%20cx%3D%2219.5%22%20cy%3D%225.5%22%20r%3D%221.3%22%20fill%3D%22%236c7480%22%2F%3E%3C%2Fsvg%3E")}
.pi-skyreach-plateau{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M6%2028V14h20v14%22%20fill%3D%22%239aa3ae%22%2F%3E%20%3Cpath%20d%3D%22M6%2014l3-5h14l3%205H6z%22%20fill%3D%22%2357b060%22%2F%3E%20%3Cpath%20d%3D%22M16%2028V14h10v14%22%20fill%3D%22%236c7480%22%2F%3E%20%3Cellipse%20cx%3D%227%22%20cy%3D%2220%22%20rx%3D%225%22%20ry%3D%222.2%22%20fill%3D%22%23ffffff%22%20opacity%3D%220.85%22%2F%3E%20%3Cellipse%20cx%3D%2225.5%22%20cy%3D%2223%22%20rx%3D%225.5%22%20ry%3D%222.4%22%20fill%3D%22%23ffffff%22%20opacity%3D%220.7%22%2F%3E%3C%2Fsvg%3E")}
.pi-ui-amber{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M16%203l9%206v14l-9%206-9-6V9l9-6z%22%20fill%3D%22%23f0a53c%22%2F%3E%20%3Cpath%20d%3D%22M16%203l9%206-9%206-9-6%209-6z%22%20fill%3D%22%23ffe08a%22%2F%3E%20%3Cpath%20d%3D%22M16%2015v14l-9-6V9l9%206z%22%20fill%3D%22%23c27a18%22%2F%3E%3C%2Fsvg%3E")}
.pi-fang-mark{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M14%204.5h4l-1%203.5h-2l-1-3.5z%22%20fill%3D%22%2377492a%22%2F%3E%20%3Ccircle%20cx%3D%2216%22%20cy%3D%2218%22%20r%3D%2210.5%22%20fill%3D%22%23e9e2cf%22%2F%3E%20%3Ccircle%20cx%3D%2216%22%20cy%3D%2218%22%20r%3D%2210.5%22%20fill%3D%22none%22%20stroke%3D%22%23c2b898%22%20stroke-width%3D%221.8%22%2F%3E%20%3Ccircle%20cx%3D%2216%22%20cy%3D%2218%22%20r%3D%227.6%22%20fill%3D%22none%22%20stroke%3D%22%23c2b898%22%20stroke-width%3D%221.2%22%2F%3E%20%3Cpath%20d%3D%22M16%2011.5c2.4%203.2%203.2%206.9%202.5%2011l-3.4.4c-1-4.2-.7-8%20.9-11.4z%22%20fill%3D%22%2377492a%22%2F%3E%20%3Ccircle%20cx%3D%2216%22%20cy%3D%2214%22%20r%3D%220.9%22%20fill%3D%22%23d64545%22%2F%3E%3C%2Fsvg%3E")}
.pi-amber-resin{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M16%202.5C21.5%209.5%2025.5%2014.8%2025.5%2020.5a9.5%209.5%200%200%201-19%200C6.5%2014.8%2010.5%209.5%2016%202.5z%22%20fill%3D%22%23f0a53c%22%2F%3E%20%3Cpath%20d%3D%22M16%202.5c5.5%207%209.5%2012.3%209.5%2018A9.5%209.5%200%200%201%2016%2030V2.5z%22%20fill%3D%22%23c27a18%22%2F%3E%20%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2217%22%20r%3D%221.4%22%20fill%3D%22%237c5228%22%2F%3E%20%3Ccircle%20cx%3D%2211.8%22%20cy%3D%2220%22%20r%3D%222.6%22%20fill%3D%22%23ffe08a%22%2F%3E%3C%2Fsvg%3E")}
.pi-stone{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M5%2020.5L9.5%2010l8.5-5.5%209%207-1%209.5-6.5%206H10L5%2020.5z%22%20fill%3D%22%239aa3ae%22%2F%3E%20%3Cpath%20d%3D%22M18%204.5l9%207-1%209.5-6.5%206h-4l2.5-22.5z%22%20fill%3D%22%236c7480%22%2F%3E%20%3Cpath%20d%3D%22M9.5%2010l8.5-5.5%201.5%204-7.5%204.5-2.5-3z%22%20fill%3D%22%23c2c9d2%22%2F%3E%3C%2Fsvg%3E")}
.pi-flint{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M13.5%203L24.5%207.5%2021%2019l-7.5%2010L7%2016.5%2013.5%203z%22%20fill%3D%22%232a2f3a%22%2F%3E%20%3Cpath%20d%3D%22M24.5%207.5L21%2019l-7.5%2010%203.5-12.5%207.5-9z%22%20fill%3D%22%236c7480%22%2F%3E%20%3Cpath%20d%3D%22M13.5%203l5%202-3.8%207.5-3.7-1L13.5%203z%22%20fill%3D%22%23c2c9d2%22%20opacity%3D%220.4%22%2F%3E%3C%2Fsvg%3E")}
.pi-crystal{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M6.5%2013l3.5%205.5L7.5%2027%203.5%2018l3-5z%22%20fill%3D%22%238f7ff0%22%2F%3E%20%3Cpath%20d%3D%22M25.5%2013l3%205-4%209-2.5-8.5%203.5-5.5z%22%20fill%3D%22%236355c2%22%2F%3E%20%3Cpath%20d%3D%22M16%202.5l5.5%209.5L16%2029.5l-5.5-17.5L16%202.5z%22%20fill%3D%22%238f7ff0%22%2F%3E%20%3Cpath%20d%3D%22M16%202.5l5.5%209.5L16%2029.5V2.5z%22%20fill%3D%22%236355c2%22%2F%3E%20%3Cpath%20d%3D%22M14.2%206.5L16%203.4l1.7%203-1.7%204-1.8-3.9z%22%20fill%3D%22%23ffffff%22%20opacity%3D%220.55%22%2F%3E%3C%2Fsvg%3E")}
.pi-raw-meat{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M10%205.5C18%202%2027%206.5%2028%2014c1%207-4.5%2013.5-12%2013.5-6.5%200-11.5-4.5-12.5-11L10%205.5z%22%20fill%3D%22%23d64550%22%2F%3E%20%3Cpath%20d%3D%22M28%2014c1%207-4.5%2013.5-12%2013.5-3%200-5.7-1-7.8-2.6%209.5%201.6%2015.6-3.4%2015.1-12.4L28%2014z%22%20fill%3D%22%239e2f38%22%2F%3E%20%3Cpath%20d%3D%22M12.5%209.5c3.5-1.7%207.5-1%209.8%201.8-2.9-.8-5.8-.4-8%201.4-1.6%201.3-2.5%203.2-2.6%205.3-1.9-2.8-1.6-6.6.8-8.5z%22%20fill%3D%22%23f2e3c0%22%2F%3E%3C%2Fsvg%3E")}
.pi-crimson-berry{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M13%2011c2%201.5%203.5%203%204.5%205M14%2010c3%20.5%206%203%207.5%206%22%20stroke%3D%22%233a7f45%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22%2F%3E%20%3Ccircle%20cx%3D%2211.5%22%20cy%3D%2217.5%22%20r%3D%227.5%22%20fill%3D%22%23d64550%22%2F%3E%20%3Ccircle%20cx%3D%2221.5%22%20cy%3D%2220%22%20r%3D%226.5%22%20fill%3D%22%239e2f38%22%2F%3E%20%3Cpath%20d%3D%22M13%2010.5c-.6-3.6%201-6.4%204-8%20.9%203.4-.5%206.3-4%208z%22%20fill%3D%22%2357b060%22%2F%3E%20%3Ccircle%20cx%3D%228.8%22%20cy%3D%2215%22%20r%3D%221.8%22%20fill%3D%22%23ffffff%22%20opacity%3D%220.45%22%2F%3E%3C%2Fsvg%3E")}
.pi-redwood-log{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2212.5%22%20fill%3D%22%2377492a%22%2F%3E%20%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2210.6%22%20fill%3D%22%23a5683f%22%2F%3E%20%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%228.7%22%20fill%3D%22%23f2e3c0%22%2F%3E%20%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%225.6%22%20fill%3D%22none%22%20stroke%3D%22%23d9c393%22%20stroke-width%3D%221.8%22%2F%3E%20%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%222.3%22%20fill%3D%22%23d9c393%22%2F%3E%3C%2Fsvg%3E")}
.pi-iron-ingot{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M12%204h8l3%204.5H9L12%204z%22%20fill%3D%22%237e8794%22%2F%3E%20%3Cpath%20d%3D%22M9%208.5h14v4.5H9z%22%20fill%3D%22%23565e6b%22%2F%3E%20%3Cpath%20d%3D%22M8%2015h16l4.5%206H3.5L8%2015z%22%20fill%3D%22%237e8794%22%2F%3E%20%3Cpath%20d%3D%22M3.5%2021h25v5.5a1.8%201.8%200%200%201-1.8%201.8H5.3A1.8%201.8%200%200%201%203.5%2026.5V21z%22%20fill%3D%22%23565e6b%22%2F%3E%20%3Cpath%20d%3D%22M9%2016.5h14l1%201.4H8l1-1.4z%22%20fill%3D%22%23c2c9d2%22%2F%3E%3C%2Fsvg%3E")}
.pi-bronze-ingot{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M9%209h14l5%207H4l5-7z%22%20fill%3D%22%23cd8f3f%22%2F%3E%20%3Cpath%20d%3D%22M4%2016h24v7a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2v-7z%22%20fill%3D%22%239c6522%22%2F%3E%20%3Cpath%20d%3D%22M10%2010.5h12l1.3%201.8H8.7l1.3-1.8z%22%20fill%3D%22%23ffe08a%22%2F%3E%3C%2Fsvg%3E")}
.pi-plains-fiber{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M8.5%204.5C10.5%2012%2010.5%2020%208%2027.5M18.5%204c-1%208-1%2016%20.5%2024%22%20stroke%3D%22%23d9c393%22%20stroke-width%3D%222.6%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M13.5%204c1%208%201%2016-.5%2024M23.5%204.5C21.5%2012%2021.5%2020%2024%2027.5%22%20stroke%3D%22%23f2e3c0%22%20stroke-width%3D%222.6%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Crect%20x%3D%228%22%20y%3D%2213%22%20width%3D%2216%22%20height%3D%225.5%22%20rx%3D%222.75%22%20fill%3D%22%233a7f45%22%2F%3E%3C%2Fsvg%3E")}
.pi-wild-seeds{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cellipse%20cx%3D%2210%22%20cy%3D%2211.5%22%20rx%3D%224.6%22%20ry%3D%226.2%22%20fill%3D%22%23a9743c%22%20transform%3D%22rotate(-18%2010%2011.5)%22%2F%3E%20%3Cellipse%20cx%3D%2222%22%20cy%3D%2211.5%22%20rx%3D%224.6%22%20ry%3D%226.2%22%20fill%3D%22%237c5228%22%20transform%3D%22rotate(18%2022%2011.5)%22%2F%3E%20%3Cellipse%20cx%3D%2216%22%20cy%3D%2222%22%20rx%3D%225%22%20ry%3D%226.4%22%20fill%3D%22%23c99a62%22%2F%3E%20%3Cpath%20d%3D%22M16%2016.5v11%22%20stroke%3D%22%23a9743c%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E")}
.pi-amber{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M16%203l9%206v14l-9%206-9-6V9l9-6z%22%20fill%3D%22%23f0a53c%22%2F%3E%20%3Cpath%20d%3D%22M16%203l9%206-9%206-9-6%209-6z%22%20fill%3D%22%23ffe08a%22%2F%3E%20%3Cpath%20d%3D%22M16%2015v14l-9-6V9l9%206z%22%20fill%3D%22%23c27a18%22%2F%3E%3C%2Fsvg%3E")}