MediaWiki:Common.css: Difference between revisions

Latest revision as of 20:42, 2 July 2026

:root {
  --sanko-void: #120804;
  --sanko-void-2: #1e1608;
  --sanko-ink: #2a1200;
  --sanko-ink-soft: #5a3810;
  --sanko-paper: #f5e6c8;
  --sanko-paper-2: #e6d0a2;
  --sanko-paper-3: #c9b897;
  --sanko-border: #6d5a3d;
  --sanko-border-dark: #3a2e12;
  --sanko-menu: #2b2111;
  --sanko-menu-2: #171006;
  --sanko-menu-border: rgba(243, 211, 106, 0.34);
  --sanko-gold: #d6a83c;
  --sanko-gold-2: #f3d36a;
  --sanko-leaf: #4c7f52;
  --sanko-water: #3972c9;
  --sanko-water-soft: #c7f0fa;
  --sanko-danger: #9d2f25;
  --sanko-shadow: rgba(18, 8, 4, 0.42);
  --sanko-backdrop: url('https://sanko-pets-assets.s3.us-east-2.amazonaws.com/quest/meta1.webp');
  --sanko-logo: url('https://sigma.sankoquest.com/apple-icon.png');
}

html,
body.skin-vector,
body.skin-minerva,
body.skin-citizen {
  background:
    radial-gradient(circle at 14% 7%, rgba(243, 211, 106, 0.2) 0 1px, transparent 2px 100%),
    radial-gradient(circle at 77% 18%, rgba(199, 240, 250, 0.22) 0 1px, transparent 2px 100%),
    radial-gradient(circle at 47% 38%, rgba(243, 211, 106, 0.12) 0 1px, transparent 2px 100%),
    linear-gradient(180deg, rgba(18, 8, 4, 0.56), rgba(18, 8, 4, 0.78) 360px, rgba(28, 14, 6, 0.88)),
    var(--sanko-backdrop),
    repeating-linear-gradient(90deg, rgba(245, 230, 200, 0.04) 0 1px, transparent 1px 16px),
    var(--sanko-void);
  background-attachment: fixed, fixed, fixed, fixed, fixed, fixed, fixed;
  background-position: 0 0, 0 0, 0 0, center top, center top, 0 0, 0 0;
  background-repeat: repeat, repeat, repeat, no-repeat, no-repeat, repeat, repeat;
  background-size: 240px 180px, 300px 220px, 420px 320px, auto, min(1700px, 140vw) auto, auto, auto;
  color: var(--sanko-ink);
}

body,
.mw-body,
.vector-body,
.parsoid-body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.skin-vector .mw-page-container,
body.skin-vector .vector-header-container {
  background: transparent;
}

body.skin-vector .mw-page-container {
  max-width: 1500px;
  margin: 0 auto;
}

/* Vector's "limited width" caps the article column far narrower than the header,
   leaving a big empty gutter on the right. Let the content fill the container so it
   lines up with the header content width. */
body.skin-vector-2022 .mw-content-container {
  max-width: none;
}

body.skin-vector .vector-header-container {
  background:
    linear-gradient(180deg, rgba(30, 22, 8, 0.94), rgba(18, 8, 4, 0.96)),
    var(--sanko-void) !important;
  border-bottom: 2px solid var(--sanko-border-dark);
  box-shadow: 0 8px 24px rgba(18, 8, 4, 0.34);
}

body.skin-vector .vector-header-container .vector-header,
body.skin-vector .mw-header {
  background:
    linear-gradient(180deg, rgba(30, 22, 8, 0.94), rgba(18, 8, 4, 0.96)),
    var(--sanko-void) !important;
}

body.skin-vector .vector-header-container a,
body.skin-vector .vector-header-container .vector-dropdown-label-text,
body.skin-vector .mw-logo-wordmark {
  color: var(--sanko-paper) !important;
}

/* Vector icons are mask-images colored via background-color; the header/sticky bars are
   dark, so force every icon in them light (fixes the near-invisible logged-in user + star). */
body.skin-vector .vector-header-container .vector-icon,
body.skin-vector .vector-sticky-header .vector-icon,
body.skin-vector .vector-header-container .mw-ui-icon-element .vector-icon {
  background-color: var(--sanko-paper) !important;
}

body.skin-vector .vector-header-container .vector-header-start,
body.skin-vector .vector-header-container .vector-header-end {
  align-items: center;
  gap: 10px;
}

body.skin-vector .vector-main-menu-dropdown .vector-dropdown-label,
body.skin-vector .vector-user-menu .vector-dropdown-label,
body.skin-vector .vector-page-tools-dropdown .vector-dropdown-label {
  min-width: 36px;
  min-height: 36px;
  border: 1px solid rgba(243, 211, 106, 0.45);
  border-radius: 5px;
  background: rgba(18, 8, 4, 0.7);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.1), 0 3px 10px rgba(0, 0, 0, 0.22);
}

body.skin-vector .vector-main-menu-dropdown .vector-dropdown-label:hover,
body.skin-vector .vector-user-menu .vector-dropdown-label:hover,
body.skin-vector .vector-page-tools-dropdown .vector-dropdown-label:hover {
  border-color: var(--sanko-gold-2);
  background: rgba(61, 47, 26, 0.92);
}

body.skin-vector .mw-logo {
  gap: 10px;
  align-items: center;
  min-width: 0;
}

body.skin-vector .mw-logo-icon {
  display: none;
}

body.skin-vector .mw-logo:before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  background-color: rgba(18, 8, 4, 0.84);
  background-image: var(--sanko-logo);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 34px 34px;
  border: 1px solid rgba(243, 211, 106, 0.5);
  border-radius: 7px;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.16),
    inset -1px -1px 0 rgba(0, 0, 0, 0.48),
    0 4px 14px rgba(0, 0, 0, 0.24);
}

body.skin-vector .mw-logo-wordmark {
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: 0 1px 0 #000;
}

body.skin-vector .cdx-text-input__input,
body.skin-vector .searchButton {
  background-color: rgba(255, 247, 224, 0.94);
  border-color: var(--sanko-border);
  color: var(--sanko-ink);
}

body.skin-vector .vector-column-end,
body.skin-vector .vector-appearance-landmark,
body.skin-vector #p-dock-bottom {
  display: none !important;
}

body.skin-vector #ca-talk {
  display: none !important;
}

body.skin-vector .vector-toc,
body.skin-vector .sidebar-toc,
body.skin-vector #vector-toc {
  background:
    linear-gradient(180deg, rgba(43, 33, 17, 0.99), rgba(23, 16, 6, 0.99)),
    var(--sanko-menu-2) !important;
  border: 1px solid var(--sanko-menu-border);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.36);
  color: var(--sanko-paper) !important;
}

body.skin-vector .vector-dropdown-content,
body.skin-vector .vector-pinnable-element,
body.skin-vector #vector-main-menu,
body.skin-vector .vector-main-menu {
  background:
    linear-gradient(180deg, rgba(61, 47, 26, 0.98), rgba(30, 22, 8, 0.98)),
    var(--sanko-void) !important;
  border: 1px solid rgba(243, 211, 106, 0.34);
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.46);
  color: var(--sanko-paper) !important;
}

body.skin-vector .vector-dropdown-content {
  z-index: 1000;
  padding: 8px;
}

body.skin-vector .vector-page-tools-dropdown .vector-dropdown-content,
body.skin-vector .vector-page-tools-landmark .vector-dropdown-content,
body.skin-vector #vector-page-tools-pinned-container,
body.skin-vector #p-tb,
body.skin-vector #p-cactions {
  box-sizing: border-box;
  min-width: 230px;
  background:
    linear-gradient(180deg, rgba(61, 47, 26, 0.99), rgba(30, 22, 8, 0.99)),
    var(--sanko-void) !important;
  border: 1px solid rgba(243, 211, 106, 0.38);
  border-radius: 6px;
  color: var(--sanko-paper) !important;
  opacity: 1 !important;
}

body.skin-vector .vector-page-tools-dropdown .vector-dropdown-content {
  right: 0;
  padding: 8px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.52);
}

body.skin-vector .vector-page-tools-landmark .vector-menu,
body.skin-vector .vector-page-tools-landmark .vector-menu-content,
body.skin-vector .vector-page-tools-landmark .vector-menu-content-list {
  background: transparent !important;
  color: var(--sanko-paper) !important;
}

body.skin-vector .vector-page-tools-landmark .vector-menu-heading {
  display: block;
  margin: 8px 0 4px;
  padding: 5px 8px;
  border-top: 1px solid rgba(243, 211, 106, 0.2);
  color: var(--sanko-gold-2) !important;
  font-size: 0.86rem;
  line-height: 1.2;
}

body.skin-vector .vector-page-tools-landmark .vector-menu-content-list {
  margin: 0;
  padding: 0;
}

body.skin-vector .vector-page-tools-landmark .vector-menu-content-list li {
  margin: 1px 0;
}

body.skin-vector .vector-page-tools-landmark .vector-menu-content-list a,
body.skin-vector .vector-page-tools-landmark .vector-menu-content-list span {
  display: block;
  padding: 5px 8px;
  color: var(--sanko-paper) !important;
  line-height: 1.25;
  opacity: 1 !important;
}

body.skin-vector .vector-menu-heading,
body.skin-vector .vector-pinnable-header-label {
  color: var(--sanko-gold-2) !important;
  font-weight: 900;
}

body.skin-vector .vector-pinnable-header {
  min-height: 30px;
  padding: 4px 6px;
  border-bottom: 1px solid rgba(243, 211, 106, 0.18);
  background: rgba(18, 8, 4, 0.42);
}

body.skin-vector .vector-pinnable-header-toggle-button {
  display: none !important;
}

body.skin-vector .vector-menu-content-list a,
body.skin-vector .vector-dropdown-content a,
body.skin-vector .vector-page-tools a {
  color: var(--sanko-paper) !important;
  border-radius: 4px;
  text-decoration: none;
}

body.skin-vector .vector-menu-content-list a:hover,
body.skin-vector .vector-dropdown-content a:hover,
body.skin-vector .vector-page-tools a:hover {
  background: rgba(243, 211, 106, 0.14);
  color: #fff7d5 !important;
}

body.skin-vector .vector-menu-content-list .selected a,
body.skin-vector .vector-dropdown-content .selected a {
  color: var(--sanko-gold-2) !important;
  font-weight: 900;
}

body.skin-vector .vector-page-titlebar,
body.skin-vector .vector-sticky-header,
body.skin-vector .vector-header-container .vector-header-start,
body.skin-vector .vector-header-container .vector-header-end {
  color: var(--sanko-paper);
}

/* Sticky header on scroll: match the dark/gold theme and fade in instead of snapping. */
body.skin-vector .vector-sticky-header {
  background:
    linear-gradient(180deg, rgba(30, 22, 8, 0.98), rgba(18, 8, 4, 0.99)),
    var(--sanko-void) !important;
  border-bottom: 2px solid var(--sanko-border-dark);
  box-shadow: 0 10px 26px rgba(18, 8, 4, 0.4);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

body.skin-vector .vector-sticky-header a,
body.skin-vector .vector-sticky-header .vector-sticky-header-context-bar-primary,
body.skin-vector .vector-sticky-header .mw-page-title-main,
body.skin-vector .vector-sticky-header .mw-page-title-main *,
body.skin-vector .vector-sticky-header h1 {
  color: var(--sanko-paper) !important;
}

/* Sticky-header search should read like the main search field. */
body.skin-vector .vector-sticky-header .cdx-text-input__input,
body.skin-vector .vector-sticky-header .vector-search-box-input {
  background: rgba(255, 247, 224, 0.96);
  color: var(--sanko-ink);
  border-radius: 5px;
}

body.skin-vector #pt-createaccount,
body.skin-vector #pt-createaccount-2,
body.skin-vector #mw-createaccount-cta,
body.skin-vector .mw-userlogin-help {
  display: none !important;
}

body.skin-vector #vector-main-menu,
body.skin-vector #vector-page-tools,
body.skin-vector #vector-toc,
body.skin-vector .sidebar-toc,
body.skin-vector .vector-dropdown-content #vector-main-menu,
body.skin-vector .vector-dropdown-content #vector-page-tools,
body.skin-vector .vector-dropdown-content #vector-toc {
  background:
    linear-gradient(180deg, rgba(43, 33, 17, 0.99), rgba(23, 16, 6, 0.99)),
    var(--sanko-menu-2) !important;
  border: 1px solid var(--sanko-menu-border);
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.46);
  color: var(--sanko-paper) !important;
  opacity: 1 !important;
}

body.skin-vector #vector-main-menu .vector-menu,
body.skin-vector #vector-main-menu .vector-menu-content,
body.skin-vector #vector-main-menu .vector-menu-content-list,
body.skin-vector #vector-page-tools .vector-menu,
body.skin-vector #vector-page-tools .vector-menu-content,
body.skin-vector #vector-page-tools .vector-menu-content-list,
body.skin-vector #vector-toc .vector-toc-contents,
body.skin-vector #vector-toc .vector-toc-list,
body.skin-vector #vector-toc .vector-toc-list-item {
  background: transparent !important;
  border: 0;
  box-shadow: none;
}

body.skin-vector .vector-column-start,
body.skin-vector .vector-column-start .vector-pinned-container,
body.skin-vector .vector-column-start .vector-unpinned-container,
body.skin-vector .vector-sticky-pinned-container,
body.skin-vector #mw-panel,
body.skin-vector #mw-panel-toc,
body.skin-vector #vector-main-menu-pinned-container,
body.skin-vector #vector-main-menu-unpinned-container,
body.skin-vector #vector-toc-pinned-container,
body.skin-vector #vector-toc-unpinned-container,
body.skin-vector #vector-page-tools-pinned-container,
body.skin-vector #vector-page-tools-unpinned-container,
body.skin-vector .vector-menu-portal,
body.skin-vector .vector-dropdown-content > .vector-menu-portal {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.vector-toc-available body.skin-vector .vector-column-start {
  background: transparent !important;
  border-radius: 0;
}

body.skin-vector .vector-sticky-pinned-container {
  background: transparent !important;
  border-radius: 0;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  scrollbar-width: none;
}

body.skin-vector .vector-sticky-pinned-container::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

body.skin-vector .vector-main-menu-action,
body.skin-vector .vector-main-menu-action-content:has(a[href*="Special:Preferences"][href*="useskin=vector"]) {
  display: none !important;
}

body.skin-vector .vector-main-menu-dropdown .vector-dropdown-content,
body.skin-vector .vector-page-tools-dropdown .vector-dropdown-content {
  background:
    linear-gradient(180deg, rgba(43, 33, 17, 0.99), rgba(23, 16, 6, 0.99)),
    var(--sanko-menu-2) !important;
  border: 1px solid var(--sanko-menu-border) !important;
  border-radius: 8px !important;
  color: var(--sanko-paper) !important;
  opacity: 1 !important;
}

body.skin-vector .vector-main-menu-dropdown .vector-dropdown-content {
  min-width: 230px;
  padding: 8px !important;
}

body.skin-vector .vector-main-menu-dropdown .vector-dropdown-content #vector-main-menu {
  box-sizing: border-box;
  width: 100%;
  min-width: 210px;
}

body.skin-vector #vector-main-menu .vector-menu {
  margin: 0;
  padding: 6px 8px 10px;
}

body.skin-vector #vector-main-menu .vector-menu-heading,
body.skin-vector #vector-page-tools .vector-menu-heading,
body.skin-vector #vector-toc .vector-pinnable-header-label,
body.skin-vector #vector-toc .vector-toc-heading {
  margin: 9px 4px 5px;
  padding: 0 0 5px;
  border-bottom: 1px solid rgba(243, 211, 106, 0.22);
  color: var(--sanko-gold-2) !important;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

body.skin-vector #vector-main-menu .mw-list-item,
body.skin-vector #vector-page-tools .mw-list-item,
body.skin-vector #vector-toc .vector-toc-list-item {
  margin: 1px 0;
}

body.skin-vector #vector-main-menu .mw-list-item a,
body.skin-vector #vector-page-tools .mw-list-item a,
body.skin-vector #vector-main-menu .mw-list-item span,
body.skin-vector #vector-page-tools .mw-list-item span,
body.skin-vector #vector-toc a,
body.skin-vector #vector-toc .vector-toc-text {
  color: var(--sanko-paper) !important;
}

body.skin-vector #vector-main-menu .mw-list-item a,
body.skin-vector #vector-page-tools .mw-list-item a,
body.skin-vector #vector-toc a {
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 9px;
  border-radius: 5px;
  line-height: 1.25;
  text-decoration: none;
}

body.skin-vector #vector-main-menu .mw-list-item a:hover,
body.skin-vector #vector-page-tools .mw-list-item a:hover,
body.skin-vector #vector-toc a:hover {
  background: rgba(243, 211, 106, 0.14);
  color: #fff7d5 !important;
}

body.skin-vector #vector-main-menu .mw-list-item.active a,
body.skin-vector #vector-main-menu .mw-list-item.selected a,
body.skin-vector #vector-page-tools .mw-list-item.active a,
body.skin-vector #vector-page-tools .mw-list-item.selected a,
body.skin-vector #vector-toc .vector-toc-list-item-active > a {
  background: rgba(243, 211, 106, 0.2);
  color: var(--sanko-gold-2) !important;
  font-weight: 900;
}

body.skin-vector .vector-pinnable-header {
  border-radius: 7px 7px 0 0;
  background: rgba(18, 8, 4, 0.64) !important;
}

body.skin-vector #vector-toc .vector-pinnable-header {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  margin: 0 0 7px;
  padding: 10px 12px 9px;
  border-bottom: 1px solid rgba(243, 211, 106, 0.24);
}

body.skin-vector #vector-toc .vector-pinnable-header-label,
body.skin-vector #vector-toc .vector-toc-heading {
  margin: 0;
  padding: 0;
  border-bottom: 0;
}

body.skin-vector .vector-toc:before,
body.skin-vector .vector-toc:after,
body.skin-vector .sidebar-toc:before,
body.skin-vector .sidebar-toc:after,
body.skin-vector #vector-toc:before,
body.skin-vector #vector-toc:after,
body.skin-vector .vector-toc-contents:before,
body.skin-vector .vector-toc-contents:after,
body.skin-vector .vector-column-start:before,
body.skin-vector .vector-column-start:after,
body.skin-vector .vector-sticky-pinned-container:before,
body.skin-vector .vector-sticky-pinned-container:after,
body.skin-vector #mw-panel-toc:before,
body.skin-vector #mw-panel-toc:after,
body.skin-vector #vector-toc-pinned-container:before,
body.skin-vector #vector-toc-pinned-container:after,
body.skin-vector #vector-toc-unpinned-container:before,
body.skin-vector #vector-toc-unpinned-container:after {
  display: none !important;
  content: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.skin-vector .vector-page-toolbar {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 4px;
  border-bottom: 1px solid rgba(109, 90, 61, 0.42);
}

body.skin-vector .vector-page-toolbar .vector-menu-tabs .mw-list-item a,
body.skin-vector .vector-page-toolbar .vector-dropdown-label {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 34px;
  min-height: 0;
  padding: 0 14px;
  margin-bottom: -1px;
  background: rgba(255, 247, 224, 0.72) !important;
  border: 1px solid rgba(109, 90, 61, 0.42);
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  color: var(--sanko-ink) !important;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
}

/* Vector reserves a tall (34px) label span for optional icons; collapse it so the
   text is the tab's real height and centers instead of riding high with dead space. */
body.skin-vector .vector-page-toolbar .vector-menu-tabs .mw-list-item a > span,
body.skin-vector .vector-page-toolbar .vector-dropdown-label > span {
  min-height: 0;
  height: auto;
  line-height: 1;
}

body.skin-vector .vector-page-toolbar .vector-menu-tabs .selected a {
  background: #3d2f1a !important;
  border-color: #1d1508;
  color: var(--sanko-gold-2) !important;
}

body.skin-vector .vector-page-toolbar .vector-dropdown-label:hover,
body.skin-vector .vector-page-toolbar .vector-menu-tabs .mw-list-item a:hover {
  background: rgba(243, 211, 106, 0.22) !important;
  color: var(--sanko-ink) !important;
}

body.skin-vector #p-search {
  min-width: min(420px, 42vw);
}

body.skin-vector #searchform.cdx-search-input {
  align-items: stretch;
  border-radius: 5px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
}

body.skin-vector #p-search .cdx-text-input__input,
body.skin-vector #p-search .cdx-search-input__end-button {
  box-sizing: border-box;
  height: 40px;
  min-height: 36px;
  border-color: rgba(243, 211, 106, 0.42);
  box-shadow: none;
}

body.skin-vector #p-search .cdx-text-input,
body.skin-vector #p-search .cdx-search-input__input-wrapper {
  height: 40px;
}

body.skin-vector #p-search .cdx-text-input__input {
  background: rgba(255, 247, 224, 0.96);
  color: var(--sanko-ink);
  border-radius: 5px 0 0 5px;
}

body.skin-vector #p-search .cdx-text-input__input:focus {
  border-color: var(--sanko-gold-2);
  outline: 2px solid rgba(243, 211, 106, 0.35);
  outline-offset: 1px;
}

body.skin-vector #p-search .cdx-search-input__end-button {
  background: linear-gradient(180deg, var(--sanko-gold-2), var(--sanko-gold)) !important;
  border: 1px solid rgba(58, 46, 18, 0.72);
  border-left: 0;
  border-radius: 0 5px 5px 0;
  color: var(--sanko-ink) !important;
  font-weight: 900;
}

body.skin-vector .cdx-menu,
body.skin-vector .cdx-typeahead-search__menu,
body.skin-vector .cdx-menu__listbox {
  background: var(--sanko-paper) !important;
  border: 1px solid var(--sanko-border) !important;
  border-radius: 6px !important;
  box-shadow: 0 18px 42px rgba(18, 8, 4, 0.36) !important;
  color: var(--sanko-ink) !important;
}

body.skin-vector .cdx-menu-item,
body.skin-vector .cdx-menu-item__text,
body.skin-vector .cdx-menu-item__description,
body.skin-vector .cdx-typeahead-search__search-footer {
  color: var(--sanko-ink) !important;
}

body.skin-vector .cdx-menu-item__content {
  min-height: 34px;
}

body.skin-vector .cdx-menu-item__text {
  font-weight: 800;
}

body.skin-vector .cdx-typeahead-search__search-footer {
  border-top: 1px solid rgba(109, 90, 61, 0.34);
  background: rgba(243, 211, 106, 0.14);
  font-weight: 800;
}

body.skin-vector .cdx-menu-item--highlighted,
body.skin-vector .cdx-menu-item:hover {
  background: rgba(243, 211, 106, 0.24) !important;
}

/* Key these off the presence of our injected sprite child, NOT the
   .sanko-search-with-thumb class: Codex rewrites the menu item's class attribute
   on hover (to add --highlighted), which strips a JS-added class and broke the
   layout on hover. Vue preserves our sprite <span>, so :has() survives re-renders. */
body.skin-vector .cdx-menu-item:has(> .sanko-search-thumb) {
  display: flex;
  align-items: center;
  min-height: 46px;
  gap: 9px;
}

body.skin-vector .cdx-menu-item:has(> .sanko-search-thumb) .cdx-menu-item__thumbnail,
body.skin-vector .cdx-menu-item:has(> .sanko-search-thumb) .cdx-thumbnail {
  display: none !important;
}

body.skin-vector .cdx-menu-item:has(> .sanko-search-thumb) .cdx-menu-item__content {
  flex: 1 1 auto;
  min-width: 0;
}

body.skin-vector .cdx-menu-item:has(> .sanko-search-thumb) .cdx-menu-item__text,
body.skin-vector .cdx-menu-item:has(> .sanko-search-thumb) .cdx-menu-item__description {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.skin-vector .cdx-menu-item .sanko-search-thumb {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: 2px;
  background: #1b140a;
  border: 1px solid rgba(243, 211, 106, 0.24);
  border-radius: 5px;
}

body.skin-vector .cdx-menu-item .sanko-search-thumb img {
  display: block;
  width: 27px;
  height: 27px;
  object-fit: contain;
  image-rendering: pixelated;
}

body.skin-vector .search-toggle {
  color: var(--sanko-paper) !important;
}

body.skin-vector .mw-search-form-wrapper,
body.skin-vector .searchresults,
body.skin-vector #userloginForm form {
  max-width: 920px;
  margin: 12px auto 20px;
  padding: 16px;
  background: rgba(255, 247, 224, 0.82);
  border: 2px solid var(--sanko-border);
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.16);
}

body.skin-vector .mw-search-form-wrapper {
  background: rgba(255, 247, 224, 0.9);
}

body.skin-vector .mw-search-form-wrapper #searchText {
  min-height: 34px;
  border: 1px solid var(--sanko-border);
  border-radius: 5px 0 0 5px;
  color: var(--sanko-ink);
}

body.skin-vector .mw-search-form-wrapper .cdx-button,
body.skin-vector .mw-search-form-wrapper .oo-ui-buttonElement-button,
body.skin-vector .mw-search-form-wrapper input[type="submit"] {
  border-color: rgba(58, 46, 18, 0.72) !important;
  border-radius: 5px !important;
  font-weight: 900;
}

body.skin-vector #userloginForm form {
  max-width: 480px;
}

body.skin-vector #mw-input-pluggableauthlogin0,
body.skin-vector .mw-htmlform-submit,
body.skin-vector .oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
  background: linear-gradient(180deg, var(--sanko-gold-2), var(--sanko-gold)) !important;
  border: 2px solid #2d2010 !important;
  border-radius: 5px !important;
  color: var(--sanko-ink) !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

body.skin-vector .mw-search-profile-tabs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
  padding: 0;
}

body.skin-vector .mw-search-profile-tabs li {
  list-style: none;
}

body.skin-vector .mw-search-profile-tabs li a {
  display: block;
  padding: 7px 10px;
  background: rgba(255, 247, 224, 0.76);
  border: 1px solid var(--sanko-border);
  border-radius: 5px;
  color: var(--sanko-ink);
  font-weight: 800;
  text-decoration: none;
}

body.skin-vector .mw-search-profile-tabs li a:hover {
  background: rgba(243, 211, 106, 0.24);
}

body.skin-vector .mw-search-profile-tabs li.current a {
  background: #3d2f1a;
  border-color: #1d1508;
  color: var(--sanko-gold-2);
}

body.skin-vector #mw-searchoptions {
  margin: 12px 0 0;
  padding: 12px;
  border: 1px solid rgba(109, 90, 61, 0.42);
  border-radius: 6px;
  background: rgba(255, 251, 235, 0.58);
}

body.skin-vector .mw-search-results {
  padding: 0;
}

body.skin-vector .mw-search-result {
  list-style: none;
  margin: 9px 0;
  padding: 11px 12px;
  background: rgba(255, 247, 224, 0.68);
  border: 1px solid rgba(109, 90, 61, 0.36);
  border-radius: 5px;
}

body.skin-vector .mw-search-result.sanko-search-with-thumb {
  position: relative;
  min-height: 58px;
  padding-left: 62px;
}

body.skin-vector .mw-search-result .sanko-search-thumb {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #1b140a;
  border: 1px solid rgba(109, 90, 61, 0.58);
  border-radius: 5px;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.12), 0 4px 10px rgba(42, 18, 0, 0.14);
}

body.skin-vector .mw-search-result .sanko-search-thumb img {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
  image-rendering: pixelated;
}

body.skin-vector .mw-search-result-heading a {
  color: #114f7c;
  font-weight: 900;
}

body.skin-vector .searchmatch {
  background: rgba(243, 211, 106, 0.45);
  color: var(--sanko-ink);
  font-weight: 900;
}

body.skin-vector .cdx-message {
  border-radius: 5px;
}

.mw-body,
.vector-body,
.parsoid-body,
.mw-parser-output {
  color: var(--sanko-ink);
}

.mw-body {
  background:
    linear-gradient(180deg, rgba(255, 251, 235, 0.99), rgba(242, 226, 188, 0.99)),
    var(--sanko-paper);
  box-sizing: border-box;
  max-width: none;
  margin: 24px auto 0;
  padding: 22px 30px 38px !important;
  border: 2px solid var(--sanko-border-dark);
  border-radius: 8px;
  box-shadow:
    0 22px 70px rgba(18, 8, 4, 0.62),
    inset 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.mw-page-title-main,
.firstHeading {
  color: var(--sanko-ink) !important;
  font-weight: 900;
  text-shadow: none;
}

body.skin-vector .mw-body-header {
  background: transparent;
  border-bottom: 0;
}

body.skin-vector .firstHeading {
  margin: 0 0 14px;
  line-height: 1.1;
}

body.page-Main_Page.skin-vector .firstHeading {
  margin-bottom: 6px;
  font-size: 1.85rem;
}

.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4 {
  clear: none;
  color: var(--sanko-ink);
  /* Match the serif of h1/h2 so h3/h4 don't fall back to the sans body font. */
  font-family: "Linux Libertine", "Hoefler Text", Georgia, "Times New Roman", serif;
  font-weight: 800;
}

.mw-parser-output h2 {
  margin: 24px 0 8px;
  padding-bottom: 4px;
  border-bottom: 2px solid rgba(109, 90, 61, 0.4);
  font-size: 1.35rem;
}

.mw-parser-output h3 {
  margin: 18px 0 6px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(109, 90, 61, 0.26);
  font-size: 1.08rem;
}

.mw-parser-output h4 {
  margin: 14px 0 5px;
  font-size: 0.98rem;
}

a {
  color: #125a93;
}

a:visited {
  color: #6b4aa0;
}

a.new,
a.new:visited {
  color: #9f4b22;
}

code {
  padding: 1px 4px;
  background: rgba(42, 18, 0, 0.08);
  border: 1px solid rgba(109, 90, 61, 0.32);
  border-radius: 3px;
  color: var(--sanko-ink);
}

.wikitable,
.cargoTable,
.sanko-table {
  width: 100%;
  margin: 12px 0 18px;
  background: rgba(255, 247, 224, 0.78);
  border: 1px solid var(--sanko-border);
  border-collapse: collapse;
  color: var(--sanko-ink);
}

.wikitable th,
.cargoTable th,
.sanko-table th {
  background: #3d2f1a;
  color: var(--sanko-paper);
  font-weight: 800;
}

.wikitable th,
.wikitable td,
.cargoTable th,
.cargoTable td,
.sanko-table th,
.sanko-table td {
  padding: 7px 9px;
  border: 1px solid rgba(109, 90, 61, 0.34);
  line-height: 1.35;
  overflow-wrap: anywhere;
  vertical-align: top;
}

.sanko-main {
  max-width: 1180px;
  margin: 0 auto;
}

.sanko-front {
  display: block;
}

.sanko-game-tabs {
  margin: 8px 0 16px;
}

.sanko-game-tabs > p {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.sanko-game-tabs a {
  display: block;
  padding: 10px 12px;
  background:
    linear-gradient(180deg, rgba(255, 247, 224, 0.92), rgba(209, 196, 169, 0.92));
  border: 2px solid var(--sanko-border);
  color: var(--sanko-ink);
  font-weight: 900;
  text-align: center;
  text-decoration: none;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.3), inset -2px -2px 0 rgba(42, 18, 0, 0.2);
}

.sanko-game-tabs a:first-child {
  background: linear-gradient(180deg, #4c7f52, #2d5d34);
  border-color: #1d3c22;
  color: #fff;
}

.sanko-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.75fr);
  gap: 14px;
  margin: 10px 0 16px;
}

.sanko-hero-card,
.sanko-card,
.sanko-infobox,
.sanko-recipe,
.sanko-bounty-prompt,
.sanko-account-card,
.sanko-feature-panel,
.sanko-link-panel,
.sanko-item-summary {
  border: 2px solid var(--sanko-border-dark);
  border-radius: 6px;
  box-shadow:
    0 8px 18px rgba(42, 18, 0, 0.16),
    inset 0 0 0 2px rgba(255, 255, 255, 0.18);
}

.sanko-hero-card {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  padding: 22px;
  background:
    linear-gradient(135deg, rgba(245, 230, 200, 0.96), rgba(214, 177, 103, 0.88)),
    var(--sanko-paper);
}

.sanko-hero-primary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px;
  background:
    linear-gradient(90deg, rgba(18, 8, 4, 0.92), rgba(42, 18, 0, 0.68) 48%, rgba(18, 8, 4, 0.3)),
    var(--sanko-backdrop);
  background-position: center;
  background-size: cover;
  color: var(--sanko-paper);
}

.sanko-hero-primary:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 18%, rgba(243, 211, 106, 0.7) 0 1px, transparent 2px 100%),
    radial-gradient(circle at 84% 22%, rgba(199, 240, 250, 0.55) 0 1px, transparent 2px 100%),
    linear-gradient(90deg, transparent, rgba(57, 114, 201, 0.08)),
    repeating-linear-gradient(0deg, rgba(255, 247, 224, 0.08) 0 1px, transparent 1px 18px);
}

.sanko-hero-content,
.sanko-hero-party {
  position: relative;
  z-index: 1;
}

.sanko-hero-party {
  display: grid;
  grid-template-columns: repeat(3, 56px);
  gap: 8px;
  align-content: center;
  padding: 12px;
  background: rgba(30, 22, 8, 0.92);
  border: 2px solid #000;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.12), inset -2px -2px 0 rgba(0, 0, 0, 0.45);
}

.sanko-hero-party .sanko-sprite {
  display: block;
}

.sanko-hero-party > p {
  display: contents;
}

.sanko-kicker,
.sanko-muted {
  color: var(--sanko-ink-soft);
  font-size: 0.9rem;
}

.sanko-kicker {
  font-weight: 800;
  text-transform: uppercase;
}

.sanko-hero-primary .sanko-kicker {
  color: var(--sanko-gold-2);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.8);
}

.sanko-title {
  margin: 8px 0;
  color: var(--sanko-ink);
  font-size: 2.15rem;
  font-weight: 900;
  line-height: 1.06;
}

.sanko-hero-primary .sanko-title,
.sanko-hero-primary p {
  color: var(--sanko-paper);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.82);
}

.sanko-hero-card .sanko-section-title {
  margin-top: 0;
}

.sanko-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 18px;
}

.sanko-stat {
  min-height: 72px;
  padding: 11px 12px;
  background: #2d2010;
  border: 2px solid #000;
  border-radius: 4px;
  color: var(--sanko-paper);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.12), inset -2px -2px 0 rgba(0, 0, 0, 0.45);
}

.sanko-stat strong {
  display: block;
  color: var(--sanko-gold-2);
  font-size: 1.35rem;
  line-height: 1;
}

.sanko-section-title {
  margin: 20px 0 10px;
  color: var(--sanko-ink);
  font-size: 1.25rem;
  font-weight: 900;
}

.sanko-card-grid,
.sanko-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 10px;
  margin: 12px 0 22px;
}

.sanko-card-grid > p,
.sanko-hub-grid > p {
  display: contents;
}

.sanko-card-grid a,
.sanko-hub-grid a {
  display: block;
  text-decoration: none;
}

.sanko-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 11px;
  background: rgba(255, 247, 224, 0.82);
  color: var(--sanko-ink);
  text-decoration: none;
}

a:hover .sanko-card,
.sanko-card:hover {
  border-color: var(--sanko-water);
  transform: translateY(-1px);
}

.sanko-card strong {
  display: block;
}

.sanko-card small {
  display: block;
  color: var(--sanko-ink-soft);
  line-height: 1.25;
}

.sanko-feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin: 10px 0 18px;
}

.sanko-feature-panel,
.sanko-link-panel {
  padding: 16px;
  background: rgba(255, 247, 224, 0.78);
}

.sanko-feature-panel .sanko-section-title,
.sanko-link-panel .sanko-section-title {
  margin-top: 0;
}

.sanko-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 12px 0 20px;
}

.sanko-action-grid > p {
  display: contents;
}

.sanko-action-grid a {
  display: block;
  text-decoration: none;
}

.sanko-action-card {
  display: block;
  min-height: 96px;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255, 247, 224, 0.92), rgba(236, 217, 176, 0.92));
  border: 2px solid var(--sanko-border-dark);
  border-radius: 6px;
  color: var(--sanko-ink);
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(42, 18, 0, 0.16), inset 0 0 0 2px rgba(255, 255, 255, 0.18);
}

.sanko-action-card strong {
  display: block;
  margin-bottom: 6px;
  color: var(--sanko-ink);
  font-size: 1.05rem;
}

.sanko-action-card small {
  color: var(--sanko-ink-soft);
  line-height: 1.35;
}

a:hover .sanko-action-card,
.sanko-action-card:hover {
  border-color: var(--sanko-leaf);
  transform: translateY(-1px);
}

.sanko-link-panel ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.sanko-link-panel li {
  margin: 4px 0;
  line-height: 1.35;
}

.sanko-open-bounties {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 14px 0 24px;
}

.sanko-bounty-card {
  min-height: 70px;
  padding: 14px;
  background: #2d2010;
  border: 2px solid #000;
  border-radius: 4px;
  color: var(--sanko-paper);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.1), inset -2px -2px 0 rgba(0, 0, 0, 0.45);
}

.sanko-bounty-title {
  color: var(--sanko-gold-2);
  font-weight: 800;
}

.sanko-bounty-claim {
  margin-top: 10px;
}

.sanko-bounty-card .sanko-pill {
  background: rgba(255, 247, 224, 0.12);
  border-color: rgba(243, 211, 106, 0.42);
  color: var(--sanko-paper);
}

.sanko-account-panel {
  margin: 10px 0 22px;
}

.sanko-account-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  background: rgba(255, 247, 224, 0.82);
}

.sanko-account-title {
  color: var(--sanko-ink);
  font-size: 1.15rem;
  font-weight: 800;
}

.sanko-account-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.sanko-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.sanko-button {
  min-height: 36px;
  padding: 7px 12px;
  background: #2d2010;
  border: 2px solid #000;
  border-radius: 4px;
  color: var(--sanko-paper);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.16), inset -1px -1px 0 rgba(0, 0, 0, 0.42);
}

.sanko-button:hover {
  background: #3d2f1a;
}

.sanko-button:disabled {
  color: var(--sanko-paper-3);
  cursor: wait;
}

.sanko-infobox {
  box-sizing: border-box;
  float: right;
  width: 296px;
  margin: 0 0 18px 22px;
  overflow: hidden;
  background: var(--sanko-paper);
}

.sanko-infobox-side {
  display: flow-root;
  margin: 0 0 14px;
}

.mw-parser-output .sanko-infobox ~ h2,
.mw-parser-output .sanko-infobox ~ h3,
.mw-parser-output .sanko-infobox ~ .mw-heading {
  display: flow-root;
}

.mw-parser-output .sanko-infobox ~ .sanko-page-skeleton,
.mw-parser-output .sanko-infobox ~ .sanko-auto-section,
.mw-parser-output .sanko-infobox ~ .sanko-missing-data,
.mw-parser-output .sanko-infobox ~ .sanko-bounty-prompt,
.mw-parser-output .sanko-infobox ~ .sanko-requirement-list,
.mw-parser-output .sanko-infobox ~ .sanko-row {
  display: flow-root;
}

.sanko-catalog-summary {
  display: grid;
  grid-template-columns: minmax(180px, 0.35fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  margin: 12px 0 20px;
}

.sanko-catalog-count {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 120px;
  padding: 16px;
  background: #2d2010;
  border: 2px solid #000;
  border-radius: 4px;
  color: var(--sanko-paper);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.12), inset -2px -2px 0 rgba(0, 0, 0, 0.45);
}

.sanko-catalog-count strong {
  display: block;
  color: var(--sanko-gold-2);
  font-size: 2.2rem;
  line-height: 1;
}

.sanko-infobox-title {
  padding: 12px;
  background: #2d2010;
  color: var(--sanko-gold-2);
  font-weight: 900;
  text-align: center;
  text-shadow: 0 1px 0 #000;
}

.sanko-item-icon {
  display: flex;
  justify-content: center;
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(18, 8, 4, 0.92), rgba(45, 32, 16, 0.94)),
    #2d2010;
}

.sanko-item-icon-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 116px;
  height: 116px;
  background: #1b140a;
  border: 2px solid #000;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.1), inset -2px -2px 0 rgba(0, 0, 0, 0.52);
}

.sanko-item-icon-frame .sanko-sprite-missing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.sanko-model-render {
  display: flex;
  justify-content: center;
  padding: 14px;
  background:
    radial-gradient(circle at 50% 42%, rgba(243, 211, 106, 0.12), transparent 58%),
    linear-gradient(180deg, rgba(18, 8, 4, 0.94), rgba(45, 32, 16, 0.96)),
    #2d2010;
}

.sanko-model-render img {
  display: block;
  width: min(220px, 100%);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.42));
}

.sanko-examine {
  padding: 10px 14px 14px;
  color: var(--sanko-ink-soft);
  font-style: italic;
}

.sanko-infobox-table {
  width: 100%;
  border-collapse: collapse;
}

.sanko-infobox-table th,
.sanko-infobox-table td {
  padding: 7px 10px;
  border-top: 1px solid rgba(109, 90, 61, 0.34);
  line-height: 1.35;
  overflow-wrap: anywhere;
  vertical-align: top;
}

.sanko-infobox-table th {
  width: 42%;
  color: var(--sanko-ink-soft);
  text-align: left;
}

.sanko-item-summary {
  max-width: none;
  margin: 8px 0 18px;
  padding: 13px;
  background: rgba(255, 247, 224, 0.78);
}

.sanko-item-flow {
  margin: 0;
}

.sanko-infobox-clear,
.sanko-item-clear {
  clear: both;
}

.sanko-item-summary-title {
  margin: 2px 0 8px;
  color: var(--sanko-ink);
  font-size: 1.35rem;
  font-weight: 900;
}

.sanko-item-summary-grid,
.sanko-recipe-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sanko-sprite,
.sanko-inventory-slot {
  display: inline-block;
  image-rendering: pixelated;
  vertical-align: middle;
}

.sanko-sprite {
  width: 32px;
  height: 32px;
  background-image: url('/w/sanko-assets/Sanko_item_atlas.svg');
  background-repeat: no-repeat;
  background-size: 128px 1056px;
}

.sanko-sprite-link a {
  display: inline-flex;
}

.sanko-sprite-missing {
  background: rgba(45, 32, 16, 0.55);
  border: 1px solid rgba(109, 90, 61, 0.5);
  color: var(--sanko-paper-3);
  line-height: 30px;
  text-align: center;
}

.sanko-recipe {
  box-sizing: border-box;
  clear: both;
  width: 100%;
  max-width: 620px;
  margin: 14px 0;
  padding: 12px;
  background: rgba(255, 247, 224, 0.84);
}

.sanko-pill,
.sanko-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  background: #2d2010;
  border: 1px solid #000;
  border-radius: 999px;
  color: var(--sanko-paper);
  font-size: 0.82rem;
  font-weight: 800;
}

.sanko-recipe-body {
  display: grid;
  grid-template-columns: minmax(132px, 1fr) 36px minmax(0, 180px);
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.sanko-recipe-inputs {
  display: grid;
  grid-template-columns: repeat(3, 44px);
  gap: 6px;
}

.sanko-inventory-slot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 5px;
  background: #17110a;
  border: 2px solid #000;
  box-shadow: inset 2px 2px 0 #3d2f1a, inset -2px -2px 0 #050301;
}

/* Icon frames center their sprite on both axes; line-height:0 removes the inline
   line-box gap that otherwise pushes inline-block sprites a few px high. */
.sanko-inventory-slot,
.sanko-item-icon-frame,
.sanko-row-image {
  line-height: 0;
}

.sanko-inventory-slot .sanko-sprite,
.sanko-item-icon-frame .sanko-sprite,
.sanko-row-image .sanko-sprite {
  vertical-align: middle;
}

.sanko-inventory-qty {
  position: absolute;
  right: 3px;
  bottom: 1px;
  color: #fff6cf;
  font-size: 11px;
  font-weight: 900;
  text-shadow: 1px 1px #000;
}

.sanko-recipe-arrow {
  color: var(--sanko-water);
  font-size: 28px;
  font-weight: 900;
  text-align: center;
}

.sanko-recipe-output {
  min-width: 0;
  width: 100%;
  max-width: 180px;
  justify-self: end;
}

.sanko-spell-output {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 8px 9px;
  background: #17110a;
  border: 2px solid #000;
  box-shadow: inset 2px 2px 0 #3d2f1a, inset -2px -2px 0 #050301;
  color: #fff6cf;
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.12;
  overflow-wrap: anywhere;
  text-align: center;
}

@media (max-width: 520px) {
  .sanko-recipe-body {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }

  .sanko-recipe-output {
    max-width: none;
    justify-self: stretch;
  }
}

.sanko-bounty-prompt {
  margin: 14px 0;
  padding: 12px;
  background: rgba(255, 247, 224, 0.78);
  color: var(--sanko-ink-soft);
}

.sanko-task-lanes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin: 12px 0 22px;
}

.sanko-task-lane {
  padding: 13px;
  background: rgba(255, 247, 224, 0.78);
  border: 1px solid rgba(109, 90, 61, 0.42);
  border-radius: 5px;
}

.sanko-task-lane h3 {
  margin-top: 0;
}

.sanko-task-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 7px;
}

.sanko-inline-fact {
  margin: 7px 0;
  padding: 8px 10px;
  background: rgba(255, 247, 224, 0.72);
  border: 1px solid rgba(109, 90, 61, 0.36);
  border-radius: 5px;
}

.sanko-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 0;
  padding: 2px 9px;
  background: rgba(109, 90, 61, 0.1);
  border: 1px solid rgba(109, 90, 61, 0.3);
  border-radius: 999px;
  color: var(--sanko-ink-soft);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.sanko-status-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}

.sanko-status-verified {
  background: rgba(76, 127, 82, 0.16);
  border-color: rgba(76, 127, 82, 0.5);
  color: #3c6b42;
}

.sanko-status-unverified {
  background: rgba(214, 168, 60, 0.18);
  border-color: rgba(214, 168, 60, 0.55);
  color: #8a6a1c;
}

.sanko-edit-login-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  padding: 14px 16px;
  background: rgba(255, 247, 224, 0.7);
  border: 1px solid rgba(109, 90, 61, 0.4);
  border-left: 3px solid var(--sanko-gold);
  border-radius: 6px;
}

.sanko-edit-login-cta strong {
  font-size: 1.02rem;
}

.sanko-edit-login-cta p {
  margin: 3px 0 0;
}

.sanko-edit-login-cta .sanko-button {
  flex: 0 0 auto;
}

.sanko-missing-data {
  margin: 10px 0;
  padding: 9px 12px;
  background: rgba(255, 247, 224, 0.5);
  border: 1px solid rgba(109, 90, 61, 0.36);
  border-left: 3px solid var(--sanko-gold);
  border-radius: 5px;
  color: var(--sanko-ink-soft);
}

.sanko-missing-data strong,
.sanko-missing-data span {
  display: block;
}

.sanko-missing-actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.sanko-missing-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 7px;
  background: rgba(255, 247, 224, 0.62);
  border: 1px solid rgba(109, 90, 61, 0.48);
  border-radius: 4px;
  color: var(--sanko-ink) !important;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
}

.sanko-missing-actions a:hover {
  background: rgba(243, 211, 106, 0.22);
  border-color: var(--sanko-leaf);
}

.sanko-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 7px 0;
  padding: 8px;
  background: rgba(255, 247, 224, 0.74);
  border: 1px solid rgba(109, 90, 61, 0.36);
  border-radius: 5px;
}

.sanko-row-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #17110a;
  border: 1px solid #000;
}

.sanko-row-render img {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.sanko-row-render {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
}

.sanko-row-placeholder {
  color: var(--sanko-paper-2);
  font-weight: 900;
}

/* Title + meta flow on one line and wrap only when they must, so short catalog
   rows stay single-line instead of always stacking. */
.sanko-row-body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 10px;
}

.sanko-row-title {
  font-weight: 900;
  line-height: 1.3;
}

.sanko-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  color: var(--sanko-ink-soft);
  font-size: 0.84rem;
}

/* MediaWiki wraps the meta spans in a <p>; unwrap it for layout so the flex gap
   and separators apply to the spans directly. */
.sanko-row-meta > p {
  margin: 0;
  display: contents;
}

/* Separate adjacent text metas (Qty · Station · Skill · Level) so they don't read
   as one run-on line; the status pill is excluded so it keeps its own spacing. */
.sanko-row-meta span:not(.sanko-status-badge) + span:not(.sanko-status-badge)::before {
  content: "·";
  margin-right: 8px;
  color: rgba(90, 56, 16, 0.5);
  font-weight: 700;
}

/* RuneScape-style recipe usage/product tables (Used In / Created By). */
.sanko-recipe-table {
  width: 100%;
  margin: 12px 0 18px;
}

.sanko-recipe-table th {
  font-size: 0.82rem;
  white-space: nowrap;
}

.sanko-recipe-table td {
  vertical-align: middle;
}

.sanko-rt-primary {
  font-weight: 700;
}

.sanko-rt-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-right: 7px;
}

/* Many products (spells, etc.) have no item sprite; drop the "?" placeholder
   entirely rather than showing a broken icon. */
.sanko-recipe-table .sanko-rt-icon:has(.sanko-sprite-missing) {
  display: none;
}

.sanko-rt-num {
  text-align: center;
  white-space: nowrap;
}

/* Materials cell in the "Created By" table: a wrapping list of qty + icon + item. */
.sanko-rt-materials {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  align-items: center;
}

.sanko-rt-mat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.sanko-rt-mat-qty {
  font-weight: 800;
  color: var(--sanko-ink-soft);
}

.sanko-source-list {
  margin: 8px 0 16px;
}

.sanko-requirement-list,
.sanko-family-nav,
.sanko-page-skeleton {
  margin: 12px 0;
}

.sanko-family-nav {
  padding: 9px 11px;
  background: rgba(45, 32, 16, 0.92);
  border: 1px solid #000;
  border-radius: 5px;
  color: var(--sanko-paper);
}

.sanko-family-nav a {
  color: var(--sanko-gold-2);
  font-weight: 800;
}

.sanko-family-nav-label {
  margin-right: 8px;
  color: var(--sanko-paper-2);
  font-weight: 900;
}

.sanko-page-lead {
  max-width: 76ch;
  margin: 8px 0 18px;
  font-size: 1.02rem;
  line-height: 1.55;
}

.sanko-minetip {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  padding: 6px 8px;
  background: #100f18;
  border: 1px solid #6f62b8;
  color: #fff;
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

body.skin-vector .mw-footer li,
body.skin-vector .mw-footer a {
  color: var(--sanko-paper-3);
}

.sanko-page-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.5fr);
  gap: 14px;
}

.sanko-breadcrumbs {
  margin: 0 0 10px;
  color: var(--sanko-ink-soft);
  font-size: 0.88rem;
}

/* Tighten the header→content transition: the empty subtitle and blank paragraphs
   MediaWiki inserts above/below the breadcrumb were creating large dead bands. */
body.skin-vector .mw-body-content {
  margin-top: 10px;
}

body.skin-vector #contentSub:empty,
body.skin-vector #siteSub:empty,
body.skin-vector #contentSub2:empty {
  display: none;
}

body.skin-vector .mw-parser-output p:empty,
body.skin-vector .mw-parser-output p:has(> br:only-child) {
  display: none;
}

body.skin-vector .mw-parser-output > .sanko-breadcrumbs:first-child {
  margin-top: 0;
}

@media (max-width: 820px) {
  .mw-body {
    margin: 12px 8px 0;
    padding: 0 12px 24px !important;
  }

  .sanko-hero,
  .sanko-feature-grid,
  .sanko-page-columns,
  .sanko-stats,
  .sanko-catalog-summary {
    grid-template-columns: 1fr;
  }

  .sanko-game-tabs > p {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sanko-hero-primary {
    grid-template-columns: 1fr;
  }

  .sanko-hero-party {
    grid-template-columns: repeat(6, 44px);
  }

  .sanko-account-card {
    grid-template-columns: 1fr;
  }

  .sanko-infobox {
    float: none;
    width: auto;
    margin: 0 0 16px;
  }

  /* Wide data tables scroll within their own box instead of overflowing the page. */
  .mw-parser-output .wikitable,
  .mw-parser-output .cargoTable,
  .mw-parser-output .sanko-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Search must not force horizontal scroll on small screens. */
  body.skin-vector #p-search {
    min-width: 0;
  }
}

/* Keel sponsor — light, theme-inherited badge (header) + dofollow credit (footer).
   The mark is an inline SVG drawn with currentColor, so it recolors with the link. */
.sanko-sponsor {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--sanko-paper) !important;
  text-decoration: none;
  font-weight: 800;
  white-space: nowrap;
}

.sanko-sponsor:hover {
  color: var(--sanko-gold-2) !important;
}

.sanko-sponsor-mark {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--sanko-gold-2);
}

.sanko-sponsor:hover .sanko-sponsor-mark {
  color: var(--sanko-paper);
}

.sanko-sponsor-label {
  color: var(--sanko-paper-3);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}

/* Keep the "Sponsored by" label muted even on hover — only the brand lifts to gold. */
.sanko-sponsor:hover .sanko-sponsor-label {
  color: var(--sanko-paper-3);
}

.sanko-sponsor-word {
  font-weight: 900;
  letter-spacing: 0.02em;
}

.sanko-sponsor-tagline {
  color: var(--sanko-paper-3);
  font-weight: 600;
  font-size: 0.85em;
}

/* Header badge: compact pill in the top-right; the tagline appears only when there's room. */
body.skin-vector .vector-header-end .sanko-sponsor-header {
  padding: 4px 10px;
  border: 1px solid var(--sanko-menu-border);
  border-radius: 999px;
  background: rgba(30, 22, 8, 0.55);
  font-size: 0.86rem;
}

.sanko-sponsor-header .sanko-sponsor-tagline {
  display: none;
}

@media (min-width: 1200px) {
  .sanko-sponsor-header .sanko-sponsor-tagline {
    display: inline;
    margin-left: 2px;
    padding-left: 6px;
    border-left: 1px solid var(--sanko-menu-border);
  }
}

/* Footer credit: mark + wordmark + full tagline on one tasteful line. */
body.skin-vector .mw-footer .sanko-sponsor-footer {
  gap: 8px;
  color: var(--sanko-paper-3) !important;
  font-size: 0.9rem;
}

body.skin-vector .mw-footer .sanko-sponsor-footer:hover {
  color: var(--sanko-gold-2) !important;
}

.sanko-sponsor-footer .sanko-sponsor-tagline {
  font-weight: 500;
}

@media (max-width: 520px) {
  .sanko-sponsor-footer .sanko-sponsor-tagline {
    display: none;
  }
}

/* Trim the header search a little so the sponsor badge + Log in button have room on the right. */
body.skin-vector .vector-header-end .vector-search-box {
  max-width: 20rem;
}

/* Compact "Log in" pill in the header, matching the sponsor badge chrome. */
body.skin-vector .vector-header-end #pt-login a,
body.skin-vector .vector-header-end #pt-login-2 a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 14px;
  border: 1px solid var(--sanko-menu-border);
  border-radius: 999px;
  background: rgba(30, 22, 8, 0.55);
  color: var(--sanko-paper) !important;
  font-weight: 800;
}

body.skin-vector .vector-header-end #pt-login a:hover,
body.skin-vector .vector-header-end #pt-login-2 a:hover {
  color: var(--sanko-gold-2) !important;
  background: rgba(30, 22, 8, 0.85);
}