@font-face {
  font-family: "Bahast Caudex";
  src: url("assets/game/ui/fonts/Caudex-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Bahast Caudex";
  src: url("assets/game/ui/fonts/Caudex-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Bahast Caudex";
  src: url("assets/game/ui/fonts/Caudex-Italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Bahast Alegreya Sans";
  src: url("assets/game/ui/fonts/AlegreyaSans-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Bahast Alegreya Sans";
  src: url("assets/game/ui/fonts/AlegreyaSans-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Bahast Alegreya Sans";
  src: url("assets/game/ui/fonts/AlegreyaSans-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Bahast Alegreya Sans";
  src: url("assets/game/ui/fonts/AlegreyaSans-ExtraBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "Bahast Alegreya Sans";
  src: url("assets/game/ui/fonts/AlegreyaSans-Black.ttf") format("truetype");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: "Bahast Spectral";
  src: url("assets/game/ui/fonts/Spectral-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Bahast Spectral";
  src: url("assets/game/ui/fonts/Spectral-Italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Bahast Spectral";
  src: url("assets/game/ui/fonts/Spectral-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Bahast Spectral";
  src: url("assets/game/ui/fonts/Spectral-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --font-display: "Bahast Caudex", Caudex, Georgia, "Times New Roman", serif;
  --font-ui: "Bahast Alegreya Sans", "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --font-lore: "Bahast Spectral", Spectral, Georgia, "Times New Roman", serif;
  --font-numeric: "Bahast Alegreya Sans", "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --page: #f4ead3;
  --paper: #fbf7ec;
  --paper-2: #f7eedb;
  --ink: #2a2115;
  --muted: #6b604f;
  --line: #c9b992;
  --line-dark: #9d8558;
  --gold: #c99b35;
  --blue: #2f6388;
  --green: #486f4b;
  --red: #874642;
  --shadow: rgba(65, 45, 22, 0.14);
  --page-overlay-start: rgba(255, 252, 244, 0.92);
  --page-overlay-end: rgba(244, 234, 211, 0.96);
  --link: #255c86;
  --link-hover: #143f62;
  --loading-bg: rgba(244, 234, 211, 0.92);
  --topbar-border: #111;
  --topbar-bg: linear-gradient(180deg, #362b1e, #21180f);
  --topbar-ink: #f9edcf;
  --topbar-link: #f1dfb7;
  --brand-ink: #fff2d0;
  --topbar-shadow: rgba(24, 17, 9, 0.2);
  --input-border: #6f5a34;
  --input-bg: #fffaf0;
  --button-border: #96733c;
  --button-bg: linear-gradient(180deg, #f7d27a, #c58e2c);
  --button-ink: #201309;
  --layout-bg: rgba(251, 247, 236, 0.94);
  --sidebar-bg: linear-gradient(180deg, rgba(245, 232, 199, 0.95), rgba(239, 224, 189, 0.95));
  --sidebar-fallback: #efe0bd;
  --sidebar-heading: #4c3b20;
  --sidebar-link: #234e70;
  --nav-hover-bg: rgba(255, 255, 255, 0.55);
  --content-overlay-start: rgba(255, 255, 255, 0.72);
  --content-overlay-end: rgba(255, 255, 255, 0.45);
  --tab-bg: #ead9af;
  --tab-ink: #3b2b16;
  --heading: #2c2114;
  --subheading: #332816;
  --eyebrow: #8b5619;
  --landing-bg: linear-gradient(90deg, rgba(255, 249, 231, 0.94), rgba(232, 205, 140, 0.72));
  --landing-fallback: #f3dfad;
  --button-secondary-bg: #fff8e8;
  --button-secondary-ink: #241504;
  --art-border: #c4aa6d;
  --art-bg: radial-gradient(circle at 50% 34%, rgba(255, 247, 215, 0.95), rgba(255, 247, 215, 0));
  --art-fallback: #dec98e;
  --icon-border: #ad8d4d;
  --icon-bg: rgba(255, 248, 225, 0.88);
  --panel-bg: #fffdf7;
  --panel-heading: #3f2f18;
  --notice-border: #b7a170;
  --notice-bg: #fff8e8;
  --notice-ink: #5a4930;
  --map-card-bg: #241a10;
  --map-card-ink: #fff0d0;
  --map-card-hover: #fff6dd;
  --map-card-border: #9b7a43;
  --map-card-shadow: rgba(255, 236, 178, 0.12);
  --map-card-gradient: linear-gradient(180deg, rgba(24, 17, 9, 0), rgba(24, 17, 9, 0.88));
  --map-card-meta: #f0c879;
  --card-bg: linear-gradient(180deg, #fffdf6, #f7edd6);
  --pill-border: #c6b483;
  --pill-bg: #f7edcf;
  --pill-ink: #574327;
  --infobox-bg: #f0e0b8;
  --infobox-title-bg: linear-gradient(180deg, #73552a, #4d3619);
  --infobox-title-ink: #fff1cf;
  --infobox-art-bg: radial-gradient(circle at 50% 35%, rgba(255, 246, 214, 0.78), rgba(255, 246, 214, 0));
  --infobox-art-fallback: #e4ce9a;
  --infobox-image-shadow: rgba(54, 38, 18, 0.28);
  --infobox-row-border: rgba(157, 133, 88, 0.45);
  --infobox-label-bg: rgba(255, 255, 255, 0.3);
  --infobox-label-ink: #413119;
  --table-bg: #fffdf7;
  --table-row-border: #e3d4ad;
  --table-head-bg: #e8d5a8;
  --table-head-ink: #342715;
  --sort-marker: #7c6338;
  --table-row-hover: #fff8e7;
  --tool-bg: #fff8e8;
  --tool-border: #d2bd86;
  --control-border: #b79c66;
  --small-muted: #735f3e;
  --helper-muted: #5d4a2c;
  --group-summary-bg: #ead9af;
  --group-summary-ink: #372815;
  --group-summary-meta: #6e5730;
  --secondary-muted: #6b5736;
  --list-border: #dfcea3;
  --source-border: #c7b385;
  --source-bg: #f8efd8;
  --source-ink: #5b4a30;
  --source-heading: #3b2a16;
  --gallery-border: #d8c698;
  --gallery-bg: linear-gradient(180deg, rgba(255, 253, 247, 0.92), rgba(245, 234, 209, 0.92));
  --gallery-fallback: #f5ead1;
  --gallery-caption: #5f4b2b;
  --footer-ink: #6d5a3d;
  font-family: var(--font-ui);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #10151a;
  --paper: #171f24;
  --paper-2: #202a30;
  --ink: #f3ead8;
  --muted: #c8bda9;
  --line: #5b4f3b;
  --line-dark: #8d7446;
  --gold: #d4a84a;
  --blue: #7eb4d6;
  --green: #8eb785;
  --red: #c47873;
  --shadow: rgba(0, 0, 0, 0.42);
  --page-overlay-start: rgba(10, 15, 19, 0.92);
  --page-overlay-end: rgba(17, 22, 25, 0.97);
  --link: #8fc6ec;
  --link-hover: #b7dcf4;
  --loading-bg: rgba(15, 20, 24, 0.94);
  --topbar-border: #000;
  --topbar-bg: linear-gradient(180deg, #2b2117, #11171b);
  --topbar-ink: #f4e2b8;
  --topbar-link: #dfc98f;
  --brand-ink: #ffe9ae;
  --topbar-shadow: rgba(0, 0, 0, 0.55);
  --input-border: #7e6740;
  --input-bg: #11191e;
  --button-border: #b68a3a;
  --button-bg: linear-gradient(180deg, #d3a84b, #9e681e);
  --button-ink: #160f08;
  --layout-bg: rgba(22, 29, 33, 0.96);
  --sidebar-bg: linear-gradient(180deg, rgba(32, 39, 42, 0.97), rgba(24, 29, 31, 0.97));
  --sidebar-fallback: #1b2225;
  --sidebar-heading: #f0d899;
  --sidebar-link: #9ed0ef;
  --nav-hover-bg: rgba(228, 194, 119, 0.14);
  --content-overlay-start: rgba(255, 255, 255, 0.035);
  --content-overlay-end: rgba(255, 255, 255, 0.015);
  --tab-bg: #2d261b;
  --tab-ink: #f1dfb7;
  --heading: #f8ead3;
  --subheading: #ecd6ad;
  --eyebrow: #e2b961;
  --landing-bg: linear-gradient(90deg, rgba(48, 40, 28, 0.96), rgba(32, 43, 49, 0.88));
  --landing-fallback: #262a26;
  --button-secondary-bg: #202a30;
  --button-secondary-ink: #e8d5a8;
  --art-border: #76623d;
  --art-bg: radial-gradient(circle at 50% 34%, rgba(210, 165, 73, 0.3), rgba(210, 165, 73, 0));
  --art-fallback: #20272b;
  --icon-border: #8f7444;
  --icon-bg: rgba(42, 34, 23, 0.88);
  --panel-bg: #1d2529;
  --panel-heading: #f2ddb0;
  --notice-border: #8d7446;
  --notice-bg: #231f18;
  --notice-ink: #dacbad;
  --map-card-bg: #11171b;
  --map-card-ink: #fff0d0;
  --map-card-hover: #fff6dd;
  --map-card-border: #8d7446;
  --map-card-shadow: rgba(255, 225, 146, 0.12);
  --map-card-gradient: linear-gradient(180deg, rgba(8, 11, 13, 0), rgba(8, 11, 13, 0.9));
  --map-card-meta: #f1c66f;
  --card-bg: linear-gradient(180deg, #20292e, #192125);
  --pill-border: #76623d;
  --pill-bg: #2c281e;
  --pill-ink: #e8d5a8;
  --infobox-bg: #1d2427;
  --infobox-title-bg: linear-gradient(180deg, #5f4524, #2b2117);
  --infobox-title-ink: #fff1cf;
  --infobox-art-bg: radial-gradient(circle at 50% 35%, rgba(210, 165, 73, 0.28), rgba(210, 165, 73, 0));
  --infobox-art-fallback: #1b2225;
  --infobox-image-shadow: rgba(0, 0, 0, 0.55);
  --infobox-row-border: rgba(141, 116, 70, 0.5);
  --infobox-label-bg: rgba(255, 255, 255, 0.06);
  --infobox-label-ink: #ecd6ad;
  --table-bg: #192125;
  --table-row-border: #33302a;
  --table-head-bg: #2f271b;
  --table-head-ink: #f0d899;
  --sort-marker: #d5bd83;
  --table-row-hover: #232d32;
  --tool-bg: #211f1a;
  --tool-border: #6d5d3c;
  --control-border: #806a42;
  --small-muted: #c8b894;
  --helper-muted: #d6c4a2;
  --group-summary-bg: #2d261b;
  --group-summary-ink: #f0d899;
  --group-summary-meta: #ceb173;
  --secondary-muted: #cdbd9f;
  --list-border: #4f4737;
  --source-border: #6d5d3c;
  --source-bg: #202820;
  --source-ink: #d8c7a6;
  --source-heading: #f0d899;
  --gallery-border: #574b35;
  --gallery-bg: linear-gradient(180deg, rgba(34, 43, 48, 0.92), rgba(24, 31, 35, 0.92));
  --gallery-fallback: #1b2225;
  --gallery-caption: #d9c79f;
  --footer-ink: #bda983;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    linear-gradient(180deg, var(--page-overlay-start), var(--page-overlay-end)),
    url("../assets/bahast-town-background.png") center top / cover fixed;
  color: var(--ink);
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  color: var(--link-hover);
  text-decoration: underline;
}

.loading-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
  align-content: center;
  gap: 1rem;
  background: var(--loading-bg);
}

.loading-shell img {
  width: min(16rem, 72vw);
}

.wiki-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto minmax(16rem, 34rem) auto;
  gap: 1rem;
  align-items: center;
  padding: 0.65rem clamp(0.85rem, 2vw, 1.5rem);
  border-bottom: 1px solid var(--topbar-border);
  background: var(--topbar-bg);
  color: var(--topbar-ink);
  box-shadow: 0 0.5rem 1.2rem var(--topbar-shadow);
}

.wiki-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--brand-ink);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
}

.wiki-brand img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

.wiki-search {
  position: relative;
  display: flex;
  min-width: 0;
}

.wiki-search input {
  width: 100%;
  min-height: 2.45rem;
  padding: 0 0.75rem;
  border: 1px solid var(--input-border);
  border-right: 0;
  border-radius: 3px 0 0 3px;
  background: var(--input-bg);
  color: var(--ink);
  font: inherit;
}

.wiki-search button,
.source-button {
  min-height: 2.45rem;
  padding: 0 0.85rem;
  border: 1px solid var(--button-border);
  border-radius: 0 3px 3px 0;
  background: var(--button-bg);
  color: var(--button-ink);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
}

.search-suggestions {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  left: 0;
  z-index: 40;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  background: var(--panel-bg);
  box-shadow: 0 1rem 2rem var(--shadow);
}

.search-suggestion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  width: 100%;
  min-height: 2.7rem;
  padding: 0.45rem 0.65rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.search-suggestion:last-child {
  border-bottom: 0;
}

.search-suggestion:hover,
.search-suggestion[aria-selected="true"] {
  background: var(--nav-hover-bg);
}

.search-suggestion strong,
.search-suggestion small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-suggestion strong {
  color: var(--heading);
  font-size: 0.94rem;
}

.search-suggestion small {
  margin-top: 0.08rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.search-suggestion em {
  color: var(--eyebrow);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

.search-suggestion-submit {
  color: var(--link);
  font-weight: 800;
}

.search-suggestion-empty {
  display: block;
  color: var(--muted);
  cursor: default;
}

.top-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 0.8rem;
  align-items: center;
  color: var(--topbar-link);
  font-size: 0.8rem;
  font-weight: 700;
}

.top-links a {
  color: inherit;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding-left: 0.1rem;
}

.theme-button {
  display: inline-grid;
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: var(--topbar-link);
  cursor: pointer;
}

.theme-button:hover,
.theme-button:focus-visible,
.theme-button[aria-pressed="true"] {
  border-color: var(--input-border);
  background: var(--nav-hover-bg);
  color: var(--brand-ink);
}

.theme-button svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.wiki-layout {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  width: min(104rem, calc(100% - 1.5rem));
  margin: 0.85rem auto 2rem;
  border: 1px solid var(--line-dark);
  background: var(--layout-bg);
  box-shadow: 0 1.2rem 3rem var(--shadow);
}

.wiki-sidebar {
  padding: 1rem 0.8rem;
  border-right: 1px solid var(--line);
  background:
    var(--sidebar-bg),
    var(--sidebar-fallback);
}

.sidebar-title {
  margin: 0.8rem 0 0.35rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--line);
  color: var(--sidebar-heading);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
}

.wiki-sidebar a {
  display: block;
  padding: 0.34rem 0.3rem;
  border-radius: 2px;
  color: var(--sidebar-link);
  font-size: 0.9rem;
}

.wiki-sidebar a[aria-current="page"],
.wiki-sidebar a:hover {
  background: var(--nav-hover-bg);
}

.content-wrap {
  min-width: 0;
  background:
    linear-gradient(90deg, var(--content-overlay-start), var(--content-overlay-end)),
    var(--paper);
}

.article-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem 0;
  border-bottom: 1px solid var(--line);
  background: var(--tab-bg);
  font-size: 0.82rem;
}

.article-tabs span {
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  background: var(--paper);
  color: var(--tab-ink);
}

.article {
  padding: clamp(1rem, 2vw, 1.5rem);
}

.article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
  gap: 1.25rem;
  align-items: start;
}

.article-grid > section,
.article-grid > aside {
  min-width: 0;
}

.article-grid-full {
  grid-template-columns: minmax(0, 1fr);
}

.article h1 {
  margin: 0 0 0.35rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--line);
  color: var(--heading);
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  letter-spacing: 0;
}

.article h2 {
  margin: 1.5rem 0 0.6rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--line);
  color: var(--subheading);
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 400;
}

.article p {
  max-width: 74ch;
  color: var(--muted);
  font-family: var(--font-lore);
  line-height: 1.55;
}

.eyebrow {
  margin: 0 0 0.5rem;
  color: var(--eyebrow);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wiki-landing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem);
  gap: 1.25rem;
  align-items: center;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--line-dark);
  background:
    var(--landing-bg),
    var(--landing-fallback);
}

.wiki-landing h1 {
  max-width: 42rem;
  border-bottom: 0;
  font-size: clamp(2.2rem, 4.2vw, 3.9rem);
  line-height: 1.02;
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1rem;
}

.button-link {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--button-border);
  border-radius: 3px;
  background: var(--button-bg);
  color: var(--button-ink);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.button-link.secondary {
  background: var(--button-secondary-bg);
  color: var(--button-secondary-ink);
}

.landing-art {
  position: relative;
  display: grid;
  min-height: 18rem;
  place-items: center;
  border: 1px solid var(--art-border);
  background:
    var(--art-bg),
    var(--art-fallback);
  overflow: hidden;
}

.landing-character {
  max-width: 100%;
  max-height: 21rem;
  object-fit: contain;
}

.landing-mini {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  gap: 0.45rem;
}

.landing-icon {
  width: 4rem;
  height: 4rem;
  padding: 0.25rem;
  border: 1px solid var(--icon-border);
  background: var(--icon-bg);
  object-fit: contain;
}

.update-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.update-grid div {
  padding: 0.75rem;
  border: 1px solid var(--line);
  background: var(--panel-bg);
}

.update-grid strong,
.update-grid span {
  display: block;
}

.update-grid strong {
  margin-bottom: 0.25rem;
  color: var(--panel-heading);
}

.notice {
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--notice-border);
  border-left: 4px solid var(--gold);
  background: var(--notice-bg);
  color: var(--notice-ink);
  font-size: 0.92rem;
}

.portal-grid,
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.75rem;
}

.region-atlas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 1.2rem;
}

.region-atlas-card {
  position: relative;
  display: grid;
  min-height: 9.4rem;
  overflow: hidden;
  border: 1px solid var(--map-card-border);
  background: var(--map-card-bg);
  color: var(--map-card-ink);
  box-shadow: inset 0 0 0 1px var(--map-card-shadow);
}

.region-atlas-card:hover,
.region-atlas-card:focus-visible {
  color: var(--map-card-hover);
  text-decoration: none;
}

.region-atlas-image {
  width: 100%;
  height: 100%;
  min-height: 9.4rem;
  object-fit: cover;
  filter: saturate(0.95) contrast(1.04);
}

.region-atlas-card span {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 2.4rem 0.75rem 0.65rem;
  background: var(--map-card-gradient);
}

.region-atlas-card strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.1;
}

.region-atlas-card small {
  flex: 0 0 auto;
  color: var(--map-card-meta);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.portal-card,
.wiki-card {
  min-height: 8rem;
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--card-bg);
}

.portal-card h3,
.wiki-card h3 {
  margin: 0 0 0.35rem;
  color: var(--panel-heading);
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.portal-card p,
.wiki-card p {
  margin: 0;
  font-size: 0.9rem;
}

.count-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.7rem 0 0;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--pill-border);
  border-radius: 2px;
  background: var(--pill-bg);
  color: var(--pill-ink);
  font-size: 0.76rem;
  font-weight: 700;
}

.infobox {
  border: 1px solid var(--line-dark);
  background: var(--infobox-bg);
  font-size: 0.88rem;
}

.infobox-title {
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid var(--line-dark);
  background: var(--infobox-title-bg);
  color: var(--infobox-title-ink);
  font-family: var(--font-display);
  font-size: 1.1rem;
  text-align: center;
}

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

.infobox-art {
  display: grid;
  min-height: 9rem;
  padding: 0.7rem;
  place-items: center;
  border-bottom: 1px solid var(--line-dark);
  background:
    var(--infobox-art-bg),
    var(--infobox-art-fallback);
}

.infobox-image {
  display: block;
  max-width: min(100%, 16rem);
  max-height: 18rem;
  object-fit: contain;
  filter: drop-shadow(0 0.4rem 0.75rem var(--infobox-image-shadow));
}

.infobox th,
.infobox td {
  padding: 0.45rem 0.55rem;
  border-top: 1px solid var(--infobox-row-border);
  vertical-align: top;
}

.infobox th {
  width: 42%;
  background: var(--infobox-label-bg);
  color: var(--infobox-label-ink);
  text-align: left;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--table-bg);
  font-size: 0.9rem;
}

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
}

.data-table th,
.data-table td {
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid var(--table-row-border);
  text-align: left;
  vertical-align: top;
}

.data-table th {
  background: var(--table-head-bg);
  color: var(--table-head-ink);
  font-size: 0.76rem;
  text-transform: uppercase;
}

.sort-button {
  display: inline-flex;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 900;
  text-align: left;
  text-transform: inherit;
  cursor: pointer;
}

.sort-button::after {
  margin-left: auto;
  color: var(--sort-marker);
  content: "<>";
}

th[data-sort-direction="asc"] .sort-button::after {
  content: "^";
}

th[data-sort-direction="desc"] .sort-button::after {
  content: "v";
}

.data-table tr:hover td {
  background: var(--table-row-hover);
}

.table-thumb {
  width: 2rem;
  height: 2rem;
  margin-right: 0.45rem;
  object-fit: contain;
  vertical-align: middle;
}

.crafting-section {
  margin-top: 1.2rem;
}

.crafting-currency-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: 0.75rem;
}

.crafting-currency-card {
  display: grid;
  gap: 0.65rem;
  min-height: 100%;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--card-bg);
  color: var(--ink);
}

.currency-head {
  display: grid;
  grid-template-columns: 3.3rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
}

.currency-name,
.currency-head small {
  display: block;
}

.currency-name {
  color: var(--panel-heading);
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 900;
  line-height: 1.15;
}

.currency-name:hover,
.currency-name:focus-visible {
  color: var(--panel-heading);
}

.currency-head small {
  margin-top: 0.15rem;
  color: var(--small-muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.currency-icon {
  width: 3.3rem;
  height: 3.3rem;
  padding: 0.25rem;
  border: 1px solid var(--icon-border);
  background: var(--icon-bg);
  object-fit: contain;
}

.currency-description {
  margin: 0;
  max-width: none;
  color: var(--muted);
  font-size: 0.9rem;
}

.currency-facts {
  display: grid;
  gap: 0.4rem;
  margin: 0;
}

.currency-facts div {
  display: grid;
  grid-template-columns: 5.4rem minmax(0, 1fr);
  gap: 0.55rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--table-row-border);
}

.currency-facts dt,
.currency-facts dd {
  margin: 0;
}

.currency-facts dt {
  color: var(--panel-heading);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.currency-facts dd {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

.table-tools,
.chance-tool {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  justify-content: flex-end;
  margin: 0 0 0.75rem;
  padding: 0.65rem;
  border: 1px solid var(--tool-border);
  background: var(--tool-bg);
}

.table-tools input,
.chance-tool input:not([type="checkbox"]),
.chance-tool select {
  min-height: 2.2rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--control-border);
  background: var(--table-bg);
  color: var(--ink);
  font: inherit;
}

.table-tools button {
  min-height: 2.2rem;
  border: 1px solid var(--button-border);
  background: var(--button-bg);
  color: var(--button-ink);
  font-weight: 800;
  cursor: pointer;
}

.chance-tool label {
  font-weight: 800;
}

.chance-tool-toggle {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  margin-right: auto;
}

.chance-tool-toggle input {
  accent-color: var(--gold);
}

.chance-tool > span {
  color: var(--helper-muted);
  font-size: 0.88rem;
}

.mod-groups {
  display: grid;
  gap: 0.6rem;
}

.mod-group {
  border: 1px solid var(--line);
  background: var(--panel-bg);
}

.mod-group summary {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem;
  background: var(--group-summary-bg);
  color: var(--group-summary-ink);
  cursor: pointer;
  font-weight: 800;
}

.mod-group summary small {
  margin-left: auto;
  color: var(--group-summary-meta);
  font-weight: 700;
}

.progression-table td {
  width: 25%;
}

.progression-table td strong,
.progression-table td span {
  display: block;
}

.progression-table td span {
  color: var(--secondary-muted);
  font-size: 0.86rem;
}

.stat-list,
.link-list {
  display: grid;
  gap: 0.35rem;
  margin: 0.5rem 0 1rem;
  padding: 0;
  list-style: none;
}

.stat-list li,
.link-list li {
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--list-border);
  background: var(--panel-bg);
}

.source-box {
  margin-top: 1rem;
  padding: 0.65rem;
  border: 1px solid var(--source-border);
  background: var(--source-bg);
  color: var(--source-ink);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.source-box strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--source-heading);
}

.art-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.75rem;
  margin: 0.5rem 0 1rem;
}

.art-gallery figure {
  display: grid;
  min-height: 11rem;
  margin: 0;
  padding: 0.65rem;
  place-items: center;
  border: 1px solid var(--gallery-border);
  background:
    var(--gallery-bg),
    var(--gallery-fallback);
}

.gallery-image {
  max-width: 100%;
  max-height: 15rem;
  object-fit: contain;
}

.art-gallery figcaption {
  width: 100%;
  margin-top: 0.45rem;
  color: var(--gallery-caption);
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
}

.image-list li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.inline-icon {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  flex: 0 0 auto;
}

.empty-state {
  padding: 1rem;
  border: 1px solid var(--line);
  background: var(--notice-bg);
  color: var(--muted);
}

.small-note {
  color: var(--small-muted);
  font-size: 0.84rem;
}

.footer-row {
  margin-top: 2rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  color: var(--footer-ink);
  font-size: 0.82rem;
}

@media (max-width: 900px) {
  .wiki-topbar,
  .wiki-layout,
  .article-grid,
  .wiki-landing {
    grid-template-columns: 1fr;
  }

  .top-links {
    justify-content: start;
  }

  .wiki-layout {
    width: 100%;
    margin-top: 0;
    border-right: 0;
    border-left: 0;
  }

  .wiki-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .wiki-sidebar nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.2rem 0.7rem;
  }
}

@media (max-width: 560px) {
  .wiki-sidebar nav,
  .portal-grid,
  .card-grid,
  .update-grid,
  .crafting-currency-grid {
    grid-template-columns: 1fr;
  }

  .currency-head,
  .currency-facts div {
    grid-template-columns: 1fr;
  }

  .table-tools,
  .chance-tool {
    align-items: stretch;
    justify-content: start;
  }

  .table-tools input,
  .table-tools button,
  .chance-tool input:not([type="checkbox"]),
  .chance-tool select {
    width: 100%;
  }

  .chance-tool-toggle {
    width: 100%;
  }
}