:root {
  --sidebar-width: 260px;
  --content-max-width: 920px;
  --infobox-width: 300px;
  --gutter: 24px;
}
/* Reset, typography defaults and shared utilities. Colours and fonts come from the theme tokens. */

@font-face {
  font-family: "Soulrend MC";
  src: url("fonts/soulrend-mc.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Soulrend MC";
  src: url("fonts/soulrend-mc-bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Soulrend MC";
  src: url("fonts/soulrend-mc-italic.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Soulrend MC";
  src: url("fonts/soulrend-mc-bolditalic.woff2") format("woff2");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

:root {
  --header-height: 56px;
  scroll-padding-top: calc(var(--header-height) + 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  overflow-wrap: break-word;
}

a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
img, svg, video, canvas { max-width: 100%; }
img { height: auto; }
button, input, select { font: inherit; color: inherit; }
code, kbd, pre { font-family: var(--font-mono); }
kbd {
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: var(--radius-small);
  background: var(--surface);
  font-size: 12px;
  line-height: 1.4;
}
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

.pixelated { image-rendering: pixelated; }
html.no-js .needs-js { display: none !important; }

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 100;
  padding: 8px 14px;
  background: var(--accent);
  color: var(--accent-fg);
  border-radius: var(--radius);
}
.skip-link:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* Page frame: header, sidebar, article column, footer. `(max-width: 900px)` is replaced with the
   breakpoint from site.json at build time. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--header-height);
  padding: 0 var(--gutter);
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-ui);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--fg);
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.brand span { overflow: hidden; text-overflow: ellipsis; }
.brand-logo { width: 32px; height: 32px; image-rendering: pixelated; }

.search-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(360px, 38vw);
  margin-left: auto;
  padding: 7px 10px 7px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 15px;
  text-align: left;
  cursor: text;
}
.search-trigger:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.search-trigger kbd { margin-left: auto; }

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--fg);
  cursor: pointer;
}
.icon-button:hover, .icon-button[aria-expanded="true"] { background: var(--surface); border-color: var(--border); }
.nav-toggle { display: none; }

.prefs { position: relative; }
.prefs-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 240px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.25);
}
.prefs-panel fieldset { margin: 0; padding: 0; border: 0; }
.prefs-panel fieldset + fieldset { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.prefs-panel legend {
  margin-bottom: 6px;
  padding: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.prefs-panel label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: var(--radius-small);
  font-size: 15px;
  cursor: pointer;
}
.prefs-panel label:hover { background: var(--panel); }
.prefs-panel input { accent-color: var(--accent); margin: 0; }
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.segmented legend { grid-column: 1 / -1; }
.segmented label { justify-content: center; padding: 6px 4px; border: 1px solid var(--border); font-size: 14px; }
.segmented label:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: calc(100vh - var(--header-height));
}

.sidebar {
  position: sticky;
  top: var(--header-height);
  height: calc(100vh - var(--header-height));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 12px 48px;
  background: var(--panel);
  border-right: 1px solid var(--border);
  font-family: var(--font-ui);
  font-size: 15px;
}

.nav-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: var(--radius-small);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.nav-section summary::-webkit-details-marker { display: none; }
.nav-section summary::after { content: "›"; font-size: 16px; transition: transform 0.15s; }
.nav-section[open] > summary::after { transform: rotate(90deg); }
.nav-section summary:hover { color: var(--fg); }
.nav-section ul { margin: 2px 0 14px; padding: 0; list-style: none; }
.nav-section a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-small);
  color: var(--fg);
  line-height: 1.3;
  text-decoration: none;
}
.nav-section a:hover { background: var(--surface); }
.nav-section a[aria-current="page"] {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow: inset 3px 0 var(--accent);
  font-weight: 600;
}

.article {
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--content-max-width);
  margin: var(--gutter) auto;
  padding: 32px 40px 56px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.article::after { content: ""; display: block; clear: both; }

.article-header h1 {
  margin: 0 0 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 600;
  line-height: 1.2;
}
.article-category {
  margin: 0 0 6px;
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-footer {
  margin-left: var(--sidebar-width);
  padding: 8px var(--gutter) 40px;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 14px;
  text-align: center;
}
.site-footer p { margin: 0; }

@media (max-width: 900px) {
  :root { --gutter: 16px; }
  .site-header { gap: 6px; padding: 0 8px; }
  .nav-toggle { display: inline-grid; }
  .brand { font-size: 18px; }
  .search-trigger { width: auto; padding: 9px; border-color: transparent; background: none; color: var(--fg); }
  .search-trigger-label, .search-trigger kbd { display: none; }

  .shell { display: flex; flex-direction: column; }
  .sidebar { position: static; order: 2; height: auto; border-right: 0; border-top: 1px solid var(--border); }
  html.js .sidebar {
    position: fixed;
    z-index: 40;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(85vw, 320px);
    height: auto;
    border-top: 0;
    border-right: 1px solid var(--border);
    box-shadow: 8px 0 32px rgb(0 0 0 / 0.3);
    transform: translateX(-105%);
    transition: transform 0.2s ease;
  }
  html.js body.nav-open .sidebar { transform: none; }
  html.js body.nav-open { overflow: hidden; }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 35; background: rgb(0 0 0 / 0.5); }

  .article { width: 100%; margin: 0; padding: 20px 16px 48px; border: 0; border-radius: 0; }
  .article-header h1 { font-size: 28px; }
  .site-footer { margin-left: 0; }
}

/* Rendered Markdown: headings, lists, tables, code, callouts, figures. */

.prose > :first-child { margin-top: 0; }
/* Boxes and heading rules stop at the floated infobox instead of running underneath it. */
.prose :is(h2, h3, h4, blockquote), .callout, .embed-model, .recipe-group { display: flow-root; }
.prose p, .prose ul, .prose ol, .prose dl { margin: 0 0 1em; }
.prose li + li { margin-top: 0.25em; }
.prose ul ul, .prose ol ol, .prose ul ol, .prose ol ul { margin: 0.25em 0 0; }

.prose h2, .prose h3, .prose h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.25;
}
.prose h2 { margin: 1.8em 0 0.6em; padding-bottom: 6px; border-bottom: 1px solid var(--border); font-size: 26px; }
.prose h3 { margin: 1.6em 0 0.5em; font-size: 21px; }
.prose h4 { margin: 1.4em 0 0.4em; font-size: 18px; }
.heading-anchor {
  margin-left: 0.4em;
  color: var(--muted);
  font-family: var(--font-ui);
  font-weight: 400;
  text-decoration: none;
  opacity: 0;
}
:is(h2, h3, h4):hover .heading-anchor, .heading-anchor:focus-visible { opacity: 1; }

.prose blockquote { margin: 1.2em 0; padding: 0.2em 1em; border-left: 3px solid var(--border); color: var(--muted); }
.prose hr { margin: 2em 0; border: 0; border-top: 1px solid var(--border); }
.prose img { border-radius: var(--radius-small); }
.prose mark { background: var(--mark); color: inherit; }

.prose code {
  padding: 0.12em 0.35em;
  background: var(--code-bg);
  border-radius: var(--radius-small);
  font-size: 0.86em;
}
.prose pre {
  overflow-x: auto;
  margin: 0 0 1.2em;
  padding: 14px 16px;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.5;
}
.prose pre code { padding: 0; background: none; font-size: inherit; }

.table-wrap { overflow-x: auto; margin: 0 0 1.2em; }
.prose table { border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { padding: 8px 12px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.prose thead th { background: var(--panel); font-family: var(--font-ui); }

a.wikilink.broken { color: var(--link-broken); text-decoration-style: dashed; cursor: help; }
a.external::after { content: "↗"; margin-left: 0.15em; font-size: 0.75em; text-decoration: none; display: inline-block; }

.render-error {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--danger);
  border-radius: var(--radius-small);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
  font-family: var(--font-ui);
  font-size: 14px;
}

/* > [!NOTE] style callouts */
.callout {
  --c: var(--note);
  margin: 1.2em 0;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--c) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--c) 35%, var(--border));
  border-left: 4px solid var(--c);
  border-radius: var(--radius);
}
.callout-tip { --c: var(--tip); }
.callout-important { --c: var(--accent); }
.callout-warning { --c: var(--warning); }
.callout-caution { --c: var(--danger); }
.callout-title { margin: 0 0 4px !important; color: var(--c); font-family: var(--font-ui); font-weight: 700; }
.callout > :last-child { margin-bottom: 0; }
.callout-lore {
  padding: 4px 24px;
  background: none;
  border: 0;
  border-left: 2px solid var(--border);
  border-radius: 0;
  color: var(--muted);
  font-style: italic;
}
.callout-lore .callout-title { color: var(--muted); font-style: normal; }

/* {{image}} */
.embed-image { margin: 1.5em 0; text-align: center; }
.embed-image.align-left { float: left; max-width: 50%; margin: 0.3em 1.5em 1em 0; }
.embed-image.align-right { float: right; clear: right; max-width: 50%; margin: 0.3em 0 1em 1.5em; }
figcaption { margin-top: 6px; color: var(--muted); font-family: var(--font-ui); font-size: 14px; }

@media (max-width: 900px) {
  .prose h2 { font-size: 23px; }
  .embed-image.align-left, .embed-image.align-right { float: none; max-width: 100%; margin: 1.5em 0; }
}

/* Item icons, item references, infobox, tooltip, 3D model viewer. */

/* Atlas sprite. --x/--y are the grid cell (set inline by the build); --size is the drawn size. */
.mc-icon {
  --size: 16px;
  display: inline-block;
  flex: none;
  width: var(--size);
  height: var(--size);
  vertical-align: -0.15em;
  background-repeat: no-repeat;
  background-size: calc(var(--atlas-columns) * var(--size)) auto;
  background-position: calc(var(--x) * var(--size) * -1) calc(var(--y) * var(--size) * -1);
  image-rendering: pixelated;
}
.mc-icon.slot { --size: 32px; }
.mc-icon.xl { --size: 96px; }
/* Minecraft's own "missing texture" checkerboard */
.mc-icon.missing {
  background: repeating-conic-gradient(#f800f8 0 25%, #000 0 50%) 0 0 / 50% 50%;
  opacity: 0.8;
}

.item-ref {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  vertical-align: bottom;
}
span.item-ref { border-bottom: 1px dotted var(--muted); cursor: help; }
.item-ref .mc-icon { vertical-align: middle; }

.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px;
  margin: 0 0 1.2em !important;
  padding: 0;
  list-style: none;
  font-family: var(--font-ui);
  font-size: 15px;
}
.item-grid li { margin: 0 !important; padding: 6px 10px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-small); }

/* Infobox */
.infobox {
  float: right;
  clear: right;
  width: var(--infobox-width);
  margin: 0 0 20px 28px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: 14.5px;
  line-height: 1.45;
}
.infobox-title {
  padding: 10px 14px;
  background: var(--accent);
  color: var(--accent-fg);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}
.infobox-media {
  display: grid;
  place-items: center;
  padding: 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.infobox-media img { max-height: 260px; }
.infobox-caption { padding: 8px 14px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 13px; text-align: center; }
.infobox-rows { width: 100%; border-collapse: collapse; }
.infobox-rows th, .infobox-rows td { padding: 7px 14px; border-top: 1px solid var(--border); text-align: left; vertical-align: top; }
.infobox-rows tr:first-child > * { border-top: 0; }
.infobox-rows th { width: 40%; color: var(--muted); font-weight: 600; }
.infobox-rows code { font-size: 12px; word-break: break-all; }
.infobox-heading th {
  width: auto;
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
  color: var(--fg);
  text-align: center;
}

@media (max-width: 900px) {
  .infobox { float: none; width: auto; margin: 0 0 20px; }
}

/* Minecraft-style tooltip (always dark, like in game) */
.mc-tooltip {
  position: fixed;
  z-index: 100;
  max-width: min(360px, calc(100vw - 16px));
  padding: 4px 8px 6px;
  background: var(--tooltip-bg);
  border: 2px solid transparent;
  border-image: linear-gradient(var(--tooltip-border), var(--tooltip-border2)) 1;
  outline: 2px solid rgb(16 0 16 / 0.94);
  color: #fff;
  font-family: "Soulrend MC", var(--font-ui);
  font-size: 16px;
  line-height: 20px;
  text-shadow: 2px 2px 0 rgb(0 0 0 / 0.35);
  text-underline-position: from-font;
  pointer-events: none;
  -webkit-font-smoothing: none;
}
.mc-tooltip .tt-name { margin-bottom: 2px; }
.mc-tooltip .tt-line { color: #aaaaaa; }
.mc-tooltip .tt-mod { color: #5555ff; font-style: italic; }
.mc-tooltip .tt-tag { color: #ffaa00; }
.mc-tooltip .tt-hint { margin-top: 4px; color: #888; font-family: var(--font-ui); font-size: 12px; text-shadow: none; }
.mc-obfuscated { filter: blur(2px); }

/* Epic Fight moveset: a two-column table per style, then skill texts in tooltip boxes */
.moveset { margin: 0 0 1.2em; }
.moveset-facts { margin: 0 0 0.6em; }
.prose .moveset-table th { width: 9em; background: var(--panel); font-family: var(--font-ui); font-weight: 600; }
.prose .moveset-table tr.moveset-style th { width: auto; background: var(--surface); font-family: var(--font-heading); }
.moveset-style span { margin-left: 0.4em; color: var(--muted); font-family: var(--font-ui); font-size: 13px; font-weight: 400; }
.moveset-anim small { color: var(--muted); }
.moveset-skills { margin: 0; }
.moveset-skills dt { margin: 0.8em 0 0.3em; font-family: var(--font-ui); font-weight: 600; }
.moveset-skills dd {
  margin: 0;
  padding: 4px 8px 6px;
  background: var(--tooltip-bg);
  border: 2px solid transparent;
  border-image: linear-gradient(var(--tooltip-border), var(--tooltip-border2)) 1;
  color: #fff;
  font-family: "Soulrend MC", var(--font-ui);
  font-size: 16px;
  line-height: 24px;
  text-shadow: 2px 2px 0 rgb(0 0 0 / 0.35);
  -webkit-font-smoothing: none;
}

/* 3D model viewer */
.embed-model { margin: 1.5em 0; }
.model-stage {
  position: relative;
  display: grid;
  place-items: center;
  height: var(--model-height, 320px);
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent) 12%, var(--panel)), var(--panel) 70%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.model-stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; cursor: grab; }
.model-stage canvas:active { cursor: grabbing; }
.model-stage.touch-locked canvas { touch-action: pan-y; }
.model-poster { max-height: 90%; object-fit: contain; }
.model-placeholder {
  width: 64px;
  height: 64px;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
}
.model-status { position: absolute; right: 10px; bottom: 8px; color: var(--muted); font-family: var(--font-ui); font-size: 12px; }
.model-hint {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  padding: 4px 10px;
  background: rgb(0 0 0 / 0.55);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 12px;
  pointer-events: none;
}
.embed-model.compact { margin: 0; width: 100%; }
/* One button per model when a viewer holds several mobs. */
.model-picker { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.embed-model.compact .model-picker { padding: 6px 6px 0; }
.embed-model.compact .model-picker + .model-picker { margin-top: -6px; }
.embed-model.compact .model-pick { padding: 3px 6px; }
.model-axis { align-self: center; min-width: 3em; font-family: var(--font-ui); font-size: 12px; color: var(--muted); }
.model-pick {
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: inherit;
  font: inherit;
  font-family: var(--font-ui);
  font-size: 12px;
  cursor: pointer;
}
.model-pick:hover { border-color: var(--accent); }
.model-pick[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }

/* Skill tree maps (src/client/skilltree.js). Always dark, like the game's skill tree screen. */
.embed-skilltree { margin: 1.5em 0; }
.skilltree-stage {
  position: relative;
  height: var(--tree-height, 440px);
  overflow: hidden;
  background: #0d0a12;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.skilltree-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skilltree-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.skilltree-stage canvas:active { cursor: grabbing; }
.skilltree-fallback { margin: 0; padding: 16px; color: #bbb; font-family: var(--font-ui); font-size: 14px; }
.skilltree-status { position: absolute; left: 12px; bottom: 8px; color: #bbb; font-family: var(--font-ui); font-size: 12px; }
.skilltree-tools { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; }
.skilltree-tools button {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: var(--radius);
  background: rgb(0 0 0 / 0.6);
  color: #fff;
  font: 18px/1 var(--font-ui);
  cursor: pointer;
}
.skilltree-tools button:hover { background: rgb(0 0 0 / 0.85); }
.skilltree-hint {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  padding: 4px 10px;
  background: rgb(0 0 0 / 0.6);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  animation: skilltree-hint 0.5s 6s forwards;
}
@keyframes skilltree-hint { to { opacity: 0; } }

/* The mod's skill tooltip at GUI scale 2: a dark box, the node's frame texture as a header bar, the title
   centred in it and the lines below. Sizes follow ScreenHelper.renderSkillTooltip (see skilltree.js). */
.skill-tooltip {
  position: fixed;
  z-index: 100;
  padding: 42px 74px 8px 10px;
  color: #fff;
  font-family: "Soulrend MC", var(--font-ui);
  font-size: 16px;
  line-height: 22px;
  white-space: pre-wrap;
  text-underline-position: from-font;
  pointer-events: none;
  -webkit-font-smoothing: none;
}
.skill-tooltip, .skill-tooltip * { text-shadow: 2px 2px 0 color-mix(in srgb, currentColor 25%, #000); }
.skill-tooltip::before { content: ""; position: absolute; inset: 8px 2px 0; z-index: -1; background: rgb(0 0 0 / 0.867); }
.skill-tooltip-frame { position: absolute; left: -8px; top: -8px; height: 40px; }
.skill-tooltip-title { position: absolute; left: 0; right: 0; top: 4px; text-align: center; white-space: nowrap; }
.skill-tooltip-lines { position: relative; width: max-content; max-width: 100%; }
.embed-model.compact .model-stage { background: none; border: 0; border-radius: 0; }

/* Fullscreen model overlay (model-viewer.js). Bottom left keeps the button clear of the pickers above
   the stage and the status text at the bottom right. */
.model-expand {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel) 85%, transparent);
  color: var(--fg);
  cursor: pointer;
}
.model-expand:hover { border-color: var(--accent); color: var(--accent); }
.model-dialog {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 16px;
  border: 0;
  background: transparent;
  color: var(--fg);
}
.model-dialog[open] { display: flex; }
.model-dialog::backdrop { background: rgb(0 0 0 / 0.7); }
.model-dialog .embed-model {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 24px 64px rgb(0 0 0 / 0.45);
}
.model-dialog .model-stage { flex: 1; height: auto; min-height: 0; }
.model-dialog figcaption { margin-top: 8px; }
html:has(.model-dialog[open]) { overflow: hidden; }

/* Recipe diagrams. --u is one Minecraft GUI pixel; slots are 18u, item icons 16u (= the 32px export). */
.recipe-group { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin: 0 0 1.2em; }
.recipe {
  --u: 2px;
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 10px 12px 12px;
  background: var(--gui-bg);
  color: var(--gui-fg);
  border-radius: var(--radius-small);
  box-shadow: inset 2px 2px 0 var(--gui-light), inset -2px -2px 0 var(--gui-dark), 0 0 0 1px var(--border);
  font-family: var(--font-ui);
}
.recipe-head { display: flex; align-items: center; gap: 6px; margin: 0; color: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; }
.recipe-flag {
  margin-left: auto;
  padding: 1px 6px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 400;
  opacity: 0.75;
}
.recipe-gui { position: relative; width: calc(var(--gw) * var(--u)); height: calc(var(--gh) * var(--u)); }
.recipe-info { margin: 0 !important; font-size: 13px; opacity: 0.85; }
.recipe-none, .recipe-more { color: var(--muted); font-family: var(--font-ui); font-size: 14px; }

.recipe-slot {
  position: absolute;
  left: calc(var(--sx) * var(--u));
  top: calc(var(--sy) * var(--u));
  display: grid;
  place-items: center;
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  background: var(--slot-bg);
  box-shadow: inset var(--u) var(--u) 0 var(--slot-dark), inset calc(-1 * var(--u)) calc(-1 * var(--u)) 0 var(--slot-light);
  color: inherit;
  text-decoration: none;
}
.recipe-slot.large { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
.recipe-slot .mc-icon { --size: calc(16 * var(--u)); }
.recipe-slot .cycle-option { display: contents; }
.recipe-slot .cycle-option[hidden] { display: none !important; }
a.recipe-slot:hover::after, span.recipe-slot:not(.empty):hover::after {
  content: "";
  position: absolute;
  inset: var(--u);
  background: rgb(255 255 255 / 0.45);
}
.slot-count, .slot-chance {
  position: absolute;
  right: 0;
  bottom: -2px;
  color: #fff;
  font-family: "Soulrend MC", var(--font-ui);
  font-size: 16px;
  line-height: 1;
  text-shadow: 2px 2px 0 #3f3f3f;
  pointer-events: none;
  -webkit-font-smoothing: none;
}
.slot-chance { top: 0; bottom: auto; left: 2px; right: auto; color: #ffff55; font-size: 8px; }
.recipe-arrow, .recipe-flame, .recipe-plus {
  position: absolute;
  left: calc(var(--sx) * var(--u));
  top: calc(var(--sy) * var(--u));
  width: calc(var(--dw) * var(--u));
  height: calc(var(--dh) * var(--u));
  fill: var(--slot-bg);
}
.recipe-flame { fill: #e8792c; }

/* Mod font icons inside tooltips (sizes and sheet positions are generated from game-data/glyphs.json). */
.mc-glyph {
  display: inline-block;
  margin-right: 0.125em;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

/* Search dialog (opened with the header button, "/" or Ctrl/Cmd+K). Full-screen on phones. */

.search-dialog {
  width: min(640px, calc(100vw - 32px));
  max-height: min(72vh, 640px);
  margin: 10vh auto auto;
  padding: 0;
  overflow: hidden;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 24px 64px rgb(0 0 0 / 0.45);
  font-family: var(--font-ui);
}
.search-dialog[open] { display: flex; flex-direction: column; }
.search-dialog::backdrop { background: rgb(0 0 0 / 0.5); }

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
}
.search-box input {
  flex: 1;
  min-width: 0;
  padding: 4px 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--fg);
  font-size: 18px;
}
.search-box input::-webkit-search-cancel-button { display: none; }
.search-close {
  padding: 4px 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}

.search-results { flex: 1; margin: 0; padding: 6px; overflow-y: auto; list-style: none; }
.search-results a {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 2px 12px;
  padding: 10px;
  border-radius: var(--radius-small);
  color: var(--fg);
  text-decoration: none;
}
.search-results [aria-selected="true"] a { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.result-icon { grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; }
.result-icon.page { border: 1px solid var(--border); border-radius: var(--radius-small); color: var(--muted); font-size: 14px; }
.result-title { font-weight: 600; }
.result-title mark, .result-summary mark { background: none; color: var(--accent); }
.result-category { margin-left: 8px; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.result-summary { overflow: hidden; color: var(--muted); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.search-empty { padding: 28px 16px; color: var(--muted); text-align: center; }
.search-hint { margin: 0; padding: 8px 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; }

@media (max-width: 900px) {
  .search-dialog { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; }
  .search-hint { display: none; }
  .result-summary { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* ---- themes (generated from site/themes) ---- */
:root[data-style="soulrend"] {
  --font-body: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-heading: "Soulrend MC", ui-monospace, "SF Mono", Menlo, monospace;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --radius: 4px;
  --radius-small: 2px;
}
:root[data-style="soulrend"][data-mode="light"], :root[data-style="soulrend"][data-mode="system"] {
  color-scheme: light;
  --bg: #e8dfcb;
  --surface: #f7f1e3;
  --panel: #ddd2b7;
  --fg: #2a2118;
  --muted: #6b5c48;
  --border: #c8b791;
  --accent: #0f766e;
  --accent-fg: #f7f1e3;
  --link: #0b6a63;
  --link-broken: #a3261b;
  --code-bg: #ece3cf;
  --mark: #9de3da;
  --slot-bg: #8b8b8b;
  --slot-light: #ffffff;
  --slot-dark: #373737;
  --gui-bg: #c6c6c6;
  --gui-light: #ffffff;
  --gui-dark: #555555;
  --gui-fg: #3f3f3f;
  --tooltip-bg: rgba(16, 0, 16, 0.94);
  --tooltip-border: #5000ff;
  --tooltip-border2: #28007f;
  --note: #1d5fa8;
  --tip: #0f766e;
  --warning: #9a5b00;
  --danger: #a3261b;
}
:root[data-style="soulrend"][data-mode="dark"] {
  color-scheme: dark;
  --bg: #0c0a0f;
  --surface: #141118;
  --panel: #0f0c12;
  --fg: #e9e2d2;
  --muted: #a0968a;
  --border: #2c2531;
  --accent: #4fd1c5;
  --accent-fg: #04110f;
  --link: #6fe3d6;
  --link-broken: #ff7b72;
  --code-bg: #1d1923;
  --mark: #2f5e59;
  --slot-bg: #231e29;
  --slot-light: #3a3242;
  --slot-dark: #070608;
  --gui-bg: #1d1923;
  --gui-light: #3a3242;
  --gui-dark: #050406;
  --gui-fg: #e9e2d2;
  --tooltip-bg: rgba(16, 0, 16, 0.94);
  --tooltip-border: #5000ff;
  --tooltip-border2: #28007f;
  --note: #7cb4ff;
  --tip: #4fd1c5;
  --warning: #f0b44c;
  --danger: #ff7b72;
}
@media (prefers-color-scheme: dark) {
  :root[data-style="soulrend"][data-mode="system"] {
    color-scheme: dark;
    --bg: #0c0a0f;
    --surface: #141118;
    --panel: #0f0c12;
    --fg: #e9e2d2;
    --muted: #a0968a;
    --border: #2c2531;
    --accent: #4fd1c5;
    --accent-fg: #04110f;
    --link: #6fe3d6;
    --link-broken: #ff7b72;
    --code-bg: #1d1923;
    --mark: #2f5e59;
    --slot-bg: #231e29;
    --slot-light: #3a3242;
    --slot-dark: #070608;
    --gui-bg: #1d1923;
    --gui-light: #3a3242;
    --gui-dark: #050406;
    --gui-fg: #e9e2d2;
    --tooltip-bg: rgba(16, 0, 16, 0.94);
    --tooltip-border: #5000ff;
    --tooltip-border2: #28007f;
    --note: #7cb4ff;
    --tip: #4fd1c5;
    --warning: #f0b44c;
    --danger: #ff7b72;
  }
}
:root[data-style="soulrend"] {
/* Soulrend style: pixel-font headings over a book-like serif body.
   Nested under :root[data-style="soulrend"] by the build. Heading sizes are multiples of 8 for the pixel font. */

body { font-size: 18px; }

.brand { font-size: 16px; letter-spacing: 0.04em; }
.article-header h1 { font-size: 32px; font-weight: 400; line-height: 40px; letter-spacing: 0.02em; }
.prose h2 { font-size: 24px; font-weight: 400; line-height: 32px; }
.prose h3 { font-size: 16px; font-weight: 400; letter-spacing: 0.04em; }
.prose h4 { font-size: 16px; font-weight: 400; color: var(--muted); }
.infobox-title { font-size: 16px; font-weight: 400; letter-spacing: 0.04em; }

.article { position: relative; }
.article::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.prose hr {
  height: 12px;
  border: 0;
  background: radial-gradient(circle, var(--accent) 2px, transparent 3px) center / 12px 12px no-repeat,
    linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent) center / 100% 1px no-repeat;
}

}
:root[data-style="wiki"] {
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --radius: 8px;
  --radius-small: 4px;
}
:root[data-style="wiki"][data-mode="light"], :root[data-style="wiki"][data-mode="system"] {
  color-scheme: light;
  --bg: #f3f4f7;
  --surface: #ffffff;
  --panel: #eceef3;
  --fg: #1c1e24;
  --muted: #5d6472;
  --border: #d8dbe2;
  --accent: #6646d4;
  --accent-fg: #ffffff;
  --link: #5236c0;
  --link-broken: #c0392b;
  --code-bg: #eef0f5;
  --mark: #ffe48a;
  --slot-bg: #8b8b8b;
  --slot-light: #ffffff;
  --slot-dark: #373737;
  --gui-bg: #c6c6c6;
  --gui-light: #ffffff;
  --gui-dark: #555555;
  --gui-fg: #3f3f3f;
  --tooltip-bg: rgba(16, 0, 16, 0.94);
  --tooltip-border: #5000ff;
  --tooltip-border2: #28007f;
  --note: #2f6fdf;
  --tip: #15803d;
  --warning: #b45309;
  --danger: #c62828;
}
:root[data-style="wiki"][data-mode="dark"] {
  color-scheme: dark;
  --bg: #121318;
  --surface: #1a1c22;
  --panel: #15161b;
  --fg: #e3e5ea;
  --muted: #9aa1ad;
  --border: #2b2e37;
  --accent: #9d80ff;
  --accent-fg: #130c26;
  --link: #b3a0ff;
  --link-broken: #ff7b72;
  --code-bg: #23252d;
  --mark: #5e4f10;
  --slot-bg: #2b2d34;
  --slot-light: #40434d;
  --slot-dark: #0d0e11;
  --gui-bg: #3a3c44;
  --gui-light: #5a5d68;
  --gui-dark: #16171b;
  --gui-fg: #e3e5ea;
  --tooltip-bg: rgba(16, 0, 16, 0.94);
  --tooltip-border: #5000ff;
  --tooltip-border2: #28007f;
  --note: #6aa1ff;
  --tip: #4ade80;
  --warning: #fbbf24;
  --danger: #f87171;
}
@media (prefers-color-scheme: dark) {
  :root[data-style="wiki"][data-mode="system"] {
    color-scheme: dark;
    --bg: #121318;
    --surface: #1a1c22;
    --panel: #15161b;
    --fg: #e3e5ea;
    --muted: #9aa1ad;
    --border: #2b2e37;
    --accent: #9d80ff;
    --accent-fg: #130c26;
    --link: #b3a0ff;
    --link-broken: #ff7b72;
    --code-bg: #23252d;
    --mark: #5e4f10;
    --slot-bg: #2b2d34;
    --slot-light: #40434d;
    --slot-dark: #0d0e11;
    --gui-bg: #3a3c44;
    --gui-light: #5a5d68;
    --gui-dark: #16171b;
    --gui-fg: #e3e5ea;
    --tooltip-bg: rgba(16, 0, 16, 0.94);
    --tooltip-border: #5000ff;
    --tooltip-border2: #28007f;
    --note: #6aa1ff;
    --tip: #4ade80;
    --warning: #fbbf24;
    --danger: #f87171;
  }
}
:root[data-style="minecraft"] {
  --font-body: "Soulrend MC", ui-monospace, "SF Mono", Menlo, monospace;
  --font-heading: "Soulrend MC", ui-monospace, "SF Mono", Menlo, monospace;
  --font-ui: "Soulrend MC", ui-monospace, "SF Mono", Menlo, monospace;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --radius: 0;
  --radius-small: 0;
}
:root[data-style="minecraft"][data-mode="light"], :root[data-style="minecraft"][data-mode="system"] {
  color-scheme: light;
  --bg: #7d7d7d;
  --surface: #c6c6c6;
  --panel: #c6c6c6;
  --fg: #262626;
  --muted: #4a4a4a;
  --border: #000000;
  --accent: #3a7a2a;
  --accent-fg: #ffffff;
  --link: #1e2fa8;
  --link-broken: #aa0000;
  --code-bg: #b0b0b0;
  --mark: #ffff55;
  --slot-bg: #8b8b8b;
  --slot-light: #ffffff;
  --slot-dark: #373737;
  --gui-bg: #c6c6c6;
  --gui-light: #ffffff;
  --gui-dark: #555555;
  --gui-fg: #3f3f3f;
  --tooltip-bg: rgba(16, 0, 16, 0.94);
  --tooltip-border: #5000ff;
  --tooltip-border2: #28007f;
  --note: #0000aa;
  --tip: #00aa00;
  --warning: #aa5500;
  --danger: #aa0000;
}
:root[data-style="minecraft"][data-mode="dark"] {
  color-scheme: dark;
  --bg: #151515;
  --surface: #2d2d2d;
  --panel: #232323;
  --fg: #e8e8e8;
  --muted: #aaaaaa;
  --border: #000000;
  --accent: #55ff55;
  --accent-fg: #0a0a0a;
  --link: #55ffff;
  --link-broken: #ff5555;
  --code-bg: #1c1c1c;
  --mark: #5f5f00;
  --slot-bg: #1f1f1f;
  --slot-light: #4a4a4a;
  --slot-dark: #000000;
  --gui-bg: #3a3a3a;
  --gui-light: #5c5c5c;
  --gui-dark: #141414;
  --gui-fg: #e8e8e8;
  --tooltip-bg: rgba(16, 0, 16, 0.94);
  --tooltip-border: #5000ff;
  --tooltip-border2: #28007f;
  --note: #5555ff;
  --tip: #55ff55;
  --warning: #ffaa00;
  --danger: #ff5555;
}
@media (prefers-color-scheme: dark) {
  :root[data-style="minecraft"][data-mode="system"] {
    color-scheme: dark;
    --bg: #151515;
    --surface: #2d2d2d;
    --panel: #232323;
    --fg: #e8e8e8;
    --muted: #aaaaaa;
    --border: #000000;
    --accent: #55ff55;
    --accent-fg: #0a0a0a;
    --link: #55ffff;
    --link-broken: #ff5555;
    --code-bg: #1c1c1c;
    --mark: #5f5f00;
    --slot-bg: #1f1f1f;
    --slot-light: #4a4a4a;
    --slot-dark: #000000;
    --gui-bg: #3a3a3a;
    --gui-light: #5c5c5c;
    --gui-dark: #141414;
    --gui-fg: #e8e8e8;
    --tooltip-bg: rgba(16, 0, 16, 0.94);
    --tooltip-border: #5000ff;
    --tooltip-border2: #28007f;
    --note: #5555ff;
    --tip: #55ff55;
    --warning: #ffaa00;
    --danger: #ff5555;
  }
}
:root[data-style="minecraft"] {
/* Minecraft style: bevelled GUI panels and the pack's pixel font everywhere.
   Nested under :root[data-style="minecraft"] by the build, so plain selectors are safe here.
   The font is drawn on an 8px grid, so sizes stay on multiples of 8 to keep it crisp. */

body {
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: none;
}

.site-header, .sidebar, .article, .infobox, .prefs-panel, .search-trigger, .search-dialog,
.item-grid li, .prose pre, .callout, .model-stage, .recipe {
  border: 2px solid var(--border);
  border-radius: 0;
  box-shadow: inset 2px 2px 0 var(--gui-light), inset -2px -2px 0 var(--gui-dark);
}
.site-header { border-width: 0 0 2px; }
.sidebar { border-width: 0 2px 0 0; }

.brand { font-size: 16px; }
.article-header h1 { font-size: 32px; font-weight: 400; line-height: 40px; }
.prose h2 { font-size: 24px; font-weight: 400; line-height: 32px; }
.prose h3, .prose h4 { font-size: 16px; font-weight: 400; }
.prose h3 { text-decoration: underline; text-underline-offset: 4px; }
.infobox, .sidebar, .item-grid, .prose table, .callout-title { font-size: 16px; }
.infobox-title { font-size: 16px; font-weight: 400; }
.nav-section summary { font-size: 16px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.article-category { font-size: 16px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.prose code, .prose pre { font-family: var(--font-body); font-size: 16px; }
.nav-section a[aria-current="page"] { box-shadow: none; outline: 2px solid var(--fg); outline-offset: -2px; }

}

:root { --atlas-columns: 32; --icon-source: 32px; }
.mc-icon:not(.missing) { background-image: url("../atlas.ff67783697.png"); }
.mc-glyph.g-e001 { width: 200em; height: 25em; vertical-align: -15em; background-image: url("glyphs/souls_like_bosses/font/black_screen.png"); background-size: 200em 25em; background-position: 0em 0em; }
.mc-glyph.g-ea01 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: 0em 0em; }
.mc-glyph.g-ea02 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -1.375em 0em; }
.mc-glyph.g-ea03 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -2.75em 0em; }
.mc-glyph.g-ea04 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -4.125em 0em; }
.mc-glyph.g-ea05 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -5.5em 0em; }
.mc-glyph.g-ea06 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -6.875em 0em; }
.mc-glyph.g-ea07 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -8.25em 0em; }
.mc-glyph.g-ea08 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -9.625em 0em; }
.mc-glyph.g-ea09 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -11em 0em; }
.mc-glyph.g-ea0a { width: 1.2031em; height: 1.75em; vertical-align: 0em; background-image: url("glyphs/obscure_api/icons/stick.png"); background-size: 1.2031em 1.75em; background-position: 0em 0em; }
.mc-glyph.g-ea0b { width: 1.625em; height: 1.625em; vertical-align: -0.375em; background-image: url("glyphs/obscure_api/icons/durability.png"); background-size: 3.25em 3.25em; background-position: 0em 0em; }
.mc-glyph.g-ea0c { width: 1.625em; height: 1.625em; vertical-align: -0.375em; background-image: url("glyphs/obscure_api/icons/durability.png"); background-size: 3.25em 3.25em; background-position: -1.625em 0em; }
.mc-glyph.g-ea0d { width: 1.625em; height: 1.625em; vertical-align: -0.375em; background-image: url("glyphs/obscure_api/icons/durability.png"); background-size: 3.25em 3.25em; background-position: 0em -1.625em; }
.mc-glyph.g-ea0e { width: 1.625em; height: 1.625em; vertical-align: -0.375em; background-image: url("glyphs/obscure_api/icons/durability.png"); background-size: 3.25em 3.25em; background-position: -1.625em -1.625em; }
.mc-glyph.g-ea10 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -12.375em 0em; }
.mc-glyph.g-ea11 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: 0em -1.375em; }
.mc-glyph.g-ea12 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -1.375em -1.375em; }
.mc-glyph.g-ea13 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -2.75em -1.375em; }
.mc-glyph.g-ea14 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -4.125em -1.375em; }
.mc-glyph.g-ea15 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -5.5em -1.375em; }
.mc-glyph.g-ea16 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -6.875em -1.375em; }
.mc-glyph.g-ea17 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -8.25em -1.375em; }
.mc-glyph.g-ea18 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -9.625em -1.375em; }
.mc-glyph.g-ea19 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -11em -1.375em; }
.mc-glyph.g-ea20 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -12.375em -1.375em; }
.mc-glyph.g-ea21 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: 0em -2.75em; }
.mc-glyph.g-ea22 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -1.375em -2.75em; }
.mc-glyph.g-ea23 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -2.75em -2.75em; }
.mc-glyph.g-ea24 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -4.125em -2.75em; }
.mc-glyph.g-ea25 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -5.5em -2.75em; }
.mc-glyph.g-ea26 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -6.875em -2.75em; }
.mc-glyph.g-ea27 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -8.25em -2.75em; }
.mc-glyph.g-ea28 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -9.625em -2.75em; }
.mc-glyph.g-ea29 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -11em -2.75em; }
.mc-glyph.g-ea30 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -12.375em -2.75em; }
.mc-glyph.g-ea31 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: 0em -4.125em; }
.mc-glyph.g-ea32 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -1.375em -4.125em; }
.mc-glyph.g-ea33 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -2.75em -4.125em; }
.mc-glyph.g-ea34 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -4.125em -4.125em; }
.mc-glyph.g-ea35 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -5.5em -4.125em; }
.mc-glyph.g-ea36 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -6.875em -4.125em; }
.mc-glyph.g-ea37 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -8.25em -4.125em; }
.mc-glyph.g-ea38 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -9.625em -4.125em; }
.mc-glyph.g-ea39 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -11em -4.125em; }
.mc-glyph.g-ea40 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/generic.png"); background-size: 13.75em 5.5em; background-position: -12.375em -4.125em; }
.mc-glyph.g-ea76 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/attributes.png"); background-size: 11em 4.125em; background-position: 0em 0em; }
.mc-glyph.g-ea77 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/attributes.png"); background-size: 11em 4.125em; background-position: -1.375em 0em; }
.mc-glyph.g-ea78 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/attributes.png"); background-size: 11em 4.125em; background-position: -2.75em 0em; }
.mc-glyph.g-ea79 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/attributes.png"); background-size: 11em 4.125em; background-position: -4.125em 0em; }
.mc-glyph.g-ea80 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/attributes.png"); background-size: 11em 4.125em; background-position: -5.5em 0em; }
.mc-glyph.g-ea81 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/attributes.png"); background-size: 11em 4.125em; background-position: -6.875em 0em; }
.mc-glyph.g-ea82 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/attributes.png"); background-size: 11em 4.125em; background-position: -8.25em 0em; }
.mc-glyph.g-ea83 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/attributes.png"); background-size: 11em 4.125em; background-position: -9.625em 0em; }
.mc-glyph.g-ea84 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/attributes.png"); background-size: 11em 4.125em; background-position: 0em -1.375em; }
.mc-glyph.g-ea85 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/attributes.png"); background-size: 11em 4.125em; background-position: -1.375em -1.375em; }
.mc-glyph.g-ea86 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/attributes.png"); background-size: 11em 4.125em; background-position: -2.75em -1.375em; }
.mc-glyph.g-ea87 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/attributes.png"); background-size: 11em 4.125em; background-position: -4.125em -1.375em; }
.mc-glyph.g-ea88 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/attributes.png"); background-size: 11em 4.125em; background-position: -5.5em -1.375em; }
.mc-glyph.g-ea89 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/attributes.png"); background-size: 11em 4.125em; background-position: -6.875em -1.375em; }
.mc-glyph.g-ea90 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/attributes.png"); background-size: 11em 4.125em; background-position: -8.25em -1.375em; }
.mc-glyph.g-ea91 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/attributes.png"); background-size: 11em 4.125em; background-position: -9.625em -1.375em; }
.mc-glyph.g-ea92 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/attributes.png"); background-size: 11em 4.125em; background-position: 0em -2.75em; }
.mc-glyph.g-ea93 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/attributes.png"); background-size: 11em 4.125em; background-position: -1.375em -2.75em; }
.mc-glyph.g-ea94 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/attributes.png"); background-size: 11em 4.125em; background-position: -2.75em -2.75em; }
.mc-glyph.g-ea95 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/attributes.png"); background-size: 11em 4.125em; background-position: -4.125em -2.75em; }
.mc-glyph.g-ea96 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/attributes.png"); background-size: 11em 4.125em; background-position: -5.5em -2.75em; }
.mc-glyph.g-ea97 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/attributes.png"); background-size: 11em 4.125em; background-position: -6.875em -2.75em; }
.mc-glyph.g-ea98 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/attributes.png"); background-size: 11em 4.125em; background-position: -8.25em -2.75em; }
.mc-glyph.g-ea99 { width: 1.375em; height: 1.375em; vertical-align: -0.25em; background-image: url("glyphs/obscure_api/icons/attributes.png"); background-size: 11em 4.125em; background-position: -9.625em -2.75em; }