:root {
  --topbar-h: 58px;
  --bg: #f8f2dc;
  --bg2: #e9f8ff;
  --panel: #fffdf2;
  --panel2: #fff3cf;
  --panel3: #e6fbff;
  --ink: #26323d;
  --muted: #637081;
  --faint: #8d98a6;
  --line: #b9d1d8;
  --line2: #6f8fa0;
  --red: #e76655;
  --red2: #b8403a;
  --gold: #f1a729;
  --gold2: #ffd86c;
  --green: #4fbf75;
  --blue: #4b91dd;
  --violet: #a15fe5;
  --shadow: rgba(82, 75, 56, 0.24);
  --pixel: "Trebuchet MS", "Courier New", monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  color: var(--ink);
  background: var(--bg);
  font-family: var(--sans);
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.46) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(rgba(255, 255, 255, 0.46) 1px, transparent 1px) 0 0 / 26px 26px,
    radial-gradient(circle at 16% 12%, #fff7c5 0 14%, transparent 36%),
    radial-gradient(circle at 90% 8%, #c7f4ff 0 12%, transparent 36%),
    linear-gradient(135deg, #fff7dc 0%, #f7fbff 45%, #fff0ca 100%);
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: 260px;
  height: 260px;
  image-rendering: pixelated;
  opacity: 0.52;
}

body::before {
  left: 20px;
  bottom: 38px;
  background:
    linear-gradient(#74c0ff 0 0) 78px 120px / 78px 34px no-repeat,
    linear-gradient(#4d8dcc 0 0) 92px 86px / 48px 48px no-repeat,
    linear-gradient(#26323d 0 0) 104px 74px / 24px 22px no-repeat,
    linear-gradient(#ffcf74 0 0) 68px 154px / 96px 22px no-repeat,
    linear-gradient(#6f8fa0 0 0) 54px 176px / 128px 16px no-repeat;
}

body::after {
  right: 16px;
  bottom: 68px;
  background:
    linear-gradient(#8fd890 0 0) 80px 120px / 96px 40px no-repeat,
    linear-gradient(#58b869 0 0) 96px 82px / 64px 48px no-repeat,
    linear-gradient(#35513d 0 0) 112px 72px / 34px 22px no-repeat,
    linear-gradient(#f5d76f 0 0) 78px 160px / 100px 18px no-repeat,
    linear-gradient(#78a9bc 0 0) 56px 178px / 144px 14px no-repeat;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.site-topbar {
  position: sticky;
  top: 0;
  z-index: 90;
  height: var(--topbar-h);
  background: linear-gradient(#ffe58e, #ffc853 58%, #f0a337);
  border-bottom: 3px solid #9d6923;
  box-shadow: 0 4px 0 rgba(102, 77, 32, 0.32);
}

.site-topbar-shell {
  width: min(100vw - 28px, 1280px);
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-menu {
  display: none;
  width: 40px;
  height: 38px;
  padding: 8px;
  background: #fff7dc;
  border: 2px solid #8d6637;
  box-shadow: inset 0 0 0 2px #ffd987, 0 2px 0 #90622b;
}

.topbar-menu span {
  display: block;
  height: 3px;
  margin: 4px 0;
  background: #74492b;
}

.brand-lockup {
  min-width: 238px;
  height: 42px;
  padding: 4px 10px 4px 5px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff8df;
  border: 2px solid #8e6934;
  box-shadow: inset 0 0 0 2px #ffdb8b, 0 2px 0 #9b6b2c;
}

.brand-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: #ffefb5;
  border: 2px solid #a46c2e;
  box-shadow: inset 0 0 0 2px #fff;
}

.brand-text {
  font-family: var(--pixel);
  font-size: 22px;
  font-weight: 900;
  line-height: 0.95;
  color: #843a30;
  text-shadow: 1px 1px #fff2bd;
}

.brand-text small {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: #5f7180;
  text-shadow: none;
  font-weight: 800;
}

.topbar-search {
  flex: 0 1 460px;
  min-width: 260px;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: #fffdf2;
  border: 2px solid #8e6934;
  box-shadow: inset 0 0 0 2px #e2f5ff, 0 2px 0 rgba(107, 79, 38, 0.32);
}

.topbar-search:focus-within {
  border-color: #4c97c5;
  box-shadow: inset 0 0 0 2px #c9f1ff, 0 0 0 3px rgba(76, 151, 197, 0.2);
}

.search-icon {
  font-family: var(--pixel);
  font-size: 20px;
  color: #4c97c5;
}

.topbar-search input {
  min-width: 0;
  flex: 1;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: none;
}

.topbar-search input::placeholder {
  color: #8697a6;
}

.topbar-hotkey {
  min-width: 24px;
  text-align: center;
  font-family: var(--pixel);
  font-size: 12px;
  color: #789;
  border: 1px solid #abc6d4;
  background: #eefaff;
}

.discord-link {
  width: 34px;
  height: 34px;
  margin-left: auto;
  display: grid;
  place-items: center;
  color: #fff;
  background: #5f74f0;
  border: 2px solid #3546a6;
  box-shadow: 0 2px 0 #283784;
  font-size: 11px;
  font-weight: 900;
}

.support-link,
.language-button {
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  color: #71411e;
  background: #fff8dc;
  border: 2px solid #8e6934;
  box-shadow: 0 2px 0 #a36e27;
  font-size: 12px;
  font-weight: 900;
}

.support-link:hover,
.discord-link:hover,
.language-button:hover {
  transform: translateY(-1px);
}

.topbar-lang {
  position: relative;
}

.language-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 290px;
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  background: #fffdf2;
  border: 2px solid #7f9caf;
  box-shadow: 0 5px 0 rgba(83, 97, 108, 0.24);
}

.language-menu[hidden] {
  display: none;
}

.language-menu button {
  text-align: left;
  padding: 9px 10px;
  color: #596a78;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #dcecf2;
}

.language-menu button:hover {
  color: #9d4a32;
  background: #fff5cf;
}

.language-menu span {
  display: inline-block;
  width: 27px;
  font-family: var(--pixel);
  color: #db8a1f;
}

.mobile-backdrop {
  position: fixed;
  inset: var(--topbar-h) 0 0;
  z-index: 65;
  background: rgba(40, 55, 66, 0.42);
}

.mobile-backdrop[hidden] {
  display: none;
}

.app-shell {
  width: min(100vw - 28px, 1280px);
  height: calc(100vh - var(--topbar-h));
  min-height: 680px;
  margin: 0 auto;
  padding: 22px 0 30px;
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
}

.app-frame {
  min-height: 0;
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  gap: 16px;
}

.app-gutter {
  position: fixed;
  inset-block: var(--topbar-h) 0;
  width: calc((100vw - min(100vw - 28px, 1280px)) / 2);
  pointer-events: none;
}

.app-gutter-left {
  left: 0;
}

.gutter-hero {
  position: absolute;
  left: max(18px, calc(100% - 170px));
  bottom: 96px;
  width: 132px;
  height: 188px;
  image-rendering: pixelated;
  background:
    linear-gradient(#86b7ff 0 0) 36px 72px / 70px 64px no-repeat,
    linear-gradient(#365b91 0 0) 45px 42px / 52px 46px no-repeat,
    linear-gradient(#f6c35a 0 0) 28px 130px / 88px 22px no-repeat,
    linear-gradient(#5d768b 0 0) 12px 153px / 112px 14px no-repeat;
}

.gutter-map {
  position: absolute;
  left: max(18px, calc(100% - 188px));
  bottom: 42px;
  width: 156px;
  height: 68px;
  background: #fff4c8;
  border: 3px solid #a97933;
  box-shadow: inset 0 0 0 3px #d7eef3, 0 4px 0 var(--shadow);
}

.gutter-map span {
  position: absolute;
  width: 16px;
  height: 16px;
  background: #74c072;
  border: 2px solid #3d8650;
}

.gutter-map span:nth-child(1) { left: 20px; top: 18px; }
.gutter-map span:nth-child(2) { left: 58px; top: 36px; background: #60a8da; border-color: #3b789e; }
.gutter-map span:nth-child(3) { left: 94px; top: 16px; background: #f1a729; border-color: #bc7425; }
.gutter-map span:nth-child(4) { left: 124px; top: 38px; background: #e76655; border-color: #9c3b34; }

.wiki-sidebar {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  background: linear-gradient(#fff5ca, #fffdf2 90px);
  border: 3px solid #83613a;
  box-shadow: inset 0 0 0 2px #ffffff, 0 4px 0 rgba(94, 77, 48, 0.28);
}

.wiki-sidebar-head {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 48px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(#ff8f73, #e65d4c 62%, #c94b40);
  border-bottom: 3px solid #8d4639;
  box-shadow: 0 2px 0 rgba(103, 62, 42, 0.28);
}

.sidebar-cog {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
  background:
    linear-gradient(#fff6c9 0 0) 10px 0 / 8px 28px no-repeat,
    linear-gradient(#fff6c9 0 0) 0 10px / 28px 8px no-repeat,
    linear-gradient(#8d5142 0 0) 8px 8px / 12px 12px no-repeat,
    linear-gradient(#fff6c9 0 0) 4px 4px / 20px 20px no-repeat;
}

.wiki-sidebar-head strong {
  display: block;
  font-family: var(--pixel);
  font-size: 19px;
  color: #fff9d9;
  line-height: 1;
  text-shadow: 1px 1px #884035;
}

.wiki-sidebar-head span {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 900;
  color: #ffe9a7;
}

.nav-group {
  margin: 12px 8px 17px;
}

.nav-group-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 7px;
  font-family: var(--pixel);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  color: #b65631;
}

.nav-group-title::before {
  content: "";
  width: 13px;
  height: 13px;
  background: #ffd15c;
  border: 2px solid #cf8430;
  box-shadow: inset 0 0 0 2px #fff0a7;
}

.nav-link {
  position: relative;
  min-height: 40px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px 5px 5px;
  color: #566879;
  border: 2px solid transparent;
}

.nav-link:hover {
  color: #273847;
  background: linear-gradient(90deg, rgba(255, 218, 103, 0.56), rgba(255, 255, 255, 0.26));
  border-color: #f3b64b;
}

.nav-link span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 900;
}

.nav-link b {
  font-family: var(--pixel);
  font-size: 10px;
  color: #8796a4;
}

.nav-link em {
  padding: 1px 5px;
  font-family: var(--pixel);
  font-size: 9px;
  font-style: normal;
  color: #b64b2f;
  border: 1px solid #e16c51;
  background: #fff0c4;
}

.nav-link-icon,
.category-card-icon,
.mini-slot,
.wiki-slot,
.brand-icon {
  image-rendering: pixelated;
}

.nav-link-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: #f5fbff;
  border: 2px solid #8aa9b6;
  box-shadow: inset 0 0 0 2px #fff1b8;
}

.wiki-main {
  min-width: 0;
  min-height: 0;
}

.wiki-main-frame {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: #fffef5;
  border: 3px solid #83613a;
  box-shadow: inset 0 0 0 2px #ffffff, 0 4px 0 rgba(94, 77, 48, 0.26);
}

.wiki-main-titlebar {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: linear-gradient(#b9ecff, #77d2ec 58%, #54b7d4);
  border-bottom: 3px solid #438fa8;
}

.wiki-title-ornament {
  width: 24px;
  height: 14px;
  background: linear-gradient(90deg, #fff 0 18%, #f2b543 18% 45%, #e76655 45% 70%, #5bb6dd 70%);
  border: 2px solid #547b8a;
}

.wiki-main-titlebar h1 {
  margin: 0;
  font-family: var(--pixel);
  font-size: 18px;
  color: #29424d;
}

.wiki-page-scroll {
  min-height: 0;
  overflow-y: auto;
}

.wiki-main-content {
  padding: 24px;
}

.home-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  align-items: stretch;
  gap: clamp(18px, 3vw, 34px);
  margin-bottom: 32px;
  background:
    linear-gradient(135deg, rgba(255, 214, 104, 0.72), transparent 42%),
    linear-gradient(90deg, rgba(116, 202, 231, 0.62), transparent 56%),
    #fff8de;
  border: 3px solid #b07a37;
  box-shadow: inset 0 0 0 2px #fff, 0 5px 0 rgba(111, 83, 42, 0.24);
}

.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0 49%, rgba(255, 255, 255, 0.46) 49% 51%, transparent 51%);
  opacity: 0.38;
}

.home-hero-copy,
.home-hero-visual {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.home-hero-copy {
  min-height: 380px;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 38px);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--pixel);
  font-size: 12px;
  font-weight: 900;
  color: #c05b35;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 18px;
  height: 14px;
  background: #ffd867;
  border: 2px solid #d58b30;
  box-shadow: inset 0 0 0 2px #fff4ba;
}

.home-hero-title {
  margin: 10px 0 0;
  font-family: var(--pixel);
  font-size: clamp(40px, 4.6vw, 62px);
  line-height: 0.9;
  color: #8c3c2f;
  text-shadow: 2px 2px #fff3b8;
}

.home-hero-title span {
  display: block;
  color: #e99722;
}

.home-hero-text {
  max-width: 590px;
  margin: 14px 0 0;
  color: #526474;
  font-size: 15px;
  line-height: 1.56;
}

.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 19px;
}

.game-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  font-family: var(--pixel);
  font-size: 13px;
  font-weight: 900;
  color: #fff8d8;
  background: linear-gradient(#ff9d72, #df5c45);
  border: 2px solid #984239;
  box-shadow: inset 0 0 0 2px rgba(255, 244, 185, 0.46), 0 3px 0 #9c4434;
}

.game-button.secondary {
  color: #354c5b;
  background: linear-gradient(#d9f8ff, #89d7ef);
  border-color: #568da3;
  box-shadow: inset 0 0 0 2px #fff, 0 3px 0 #5d91a3;
}

.game-button:hover,
.category-card:hover,
.hero-card:hover {
  transform: translateY(-2px);
}

.button-pixel {
  width: 18px;
  height: 18px;
}

.hero-stat-strip {
  width: min(100%, 430px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: auto;
  padding-top: 22px;
}

.hero-stat {
  min-width: 0;
  padding: 10px;
  background: rgba(255, 255, 255, 0.72);
  border: 2px solid #b6d3dc;
  box-shadow: inset 0 0 0 2px #fff9d6;
}

.hero-stat b {
  display: block;
  font-family: var(--pixel);
  font-size: 14px;
  color: #be5a34;
}

.hero-stat span {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #687a88;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-hero-visual {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 24px 26px 24px 0;
}

.game-window {
  width: min(100%, 400px);
  max-width: 400px;
  margin-left: auto;
  background: linear-gradient(#fff8d7, #f4fbff);
  border: 3px solid #7b6040;
  box-shadow: inset 0 0 0 2px #fff, 0 6px 0 rgba(92, 76, 47, 0.27);
}

.game-window-title {
  height: 38px;
  display: grid;
  place-items: center;
  font-family: var(--pixel);
  font-size: 24px;
  font-weight: 900;
  color: #fff9de;
  text-shadow: 1px 1px #9b402f;
  background: linear-gradient(#ff9672, #d95543);
  border-bottom: 3px solid #97453c;
}

.game-window-body {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
}

.hero-loadout {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 8px;
}

.portrait-frame {
  width: 94px;
  height: 94px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(45deg, transparent 0 12px, rgba(255, 216, 98, 0.64) 12px 22px, transparent 22px),
    radial-gradient(circle, #fff4be, #ccefff 70%);
  border: 3px solid #9b743c;
  box-shadow: inset 0 0 0 2px #fff;
}

.mini-slots {
  display: grid;
  grid-template-columns: repeat(3, 30px);
  gap: 5px;
}

.mini-slot,
.wiki-slot {
  display: grid;
  place-items: center;
  background: #fff7d6;
  border: 2px solid #8aa9b6;
  box-shadow: inset 0 0 0 2px #ffffff, 0 2px 0 rgba(95, 112, 123, 0.24);
}

.mini-slot {
  width: 30px;
  height: 30px;
}

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.inventory-grid .wiki-slot {
  aspect-ratio: 1;
}

.slot-art,
.button-pixel,
.pixel-emblem,
.pixel-lang,
.category-card-icon::before,
.nav-link-icon::before {
  display: block;
  image-rendering: pixelated;
}

.pixel-emblem {
  width: 22px;
  height: 22px;
}

.slot-art,
.nav-link-icon::before,
.category-card-icon::before {
  content: "";
  width: 22px;
  height: 22px;
}

.wiki-slot .slot-art {
  width: 28px;
  height: 28px;
}

.pixel-emblem.sword,
.blade::before,
.slot-art.blade,
.button-pixel.blade {
  background:
    linear-gradient(#f7fcff 0 0) 12px 1px / 5px 15px no-repeat,
    linear-gradient(#7ba9c2 0 0) 9px 13px / 11px 4px no-repeat,
    linear-gradient(#bb6b3d 0 0) 10px 17px / 8px 4px no-repeat,
    linear-gradient(#ffe179 0 0) 8px 20px / 12px 2px no-repeat;
}

.armor::before,
.slot-art.armor {
  background:
    linear-gradient(#5ea7df 0 0) 6px 3px / 16px 18px no-repeat,
    linear-gradient(#d8f5ff 0 0) 9px 5px / 10px 7px no-repeat,
    linear-gradient(#365d82 0 0) 5px 16px / 18px 5px no-repeat;
}

.ingot::before,
.gold::before,
.slot-art.gold,
.slot-art.coin,
.button-pixel.coin {
  background:
    linear-gradient(#ffe78b 0 0) 4px 7px / 18px 12px no-repeat,
    linear-gradient(#f3ad32 0 0) 7px 10px / 14px 7px no-repeat,
    linear-gradient(#fff3b8 0 0) 7px 5px / 11px 4px no-repeat;
}

.spark::before,
.slot-art.rune,
.rune::before {
  background:
    linear-gradient(#a35de7 0 0) 9px 1px / 8px 22px no-repeat,
    linear-gradient(#a35de7 0 0) 1px 9px / 22px 8px no-repeat,
    linear-gradient(#fff3ff 0 0) 9px 9px / 8px 8px no-repeat;
}

.chest::before,
.slot-art.chest {
  background:
    linear-gradient(#c36b36 0 0) 3px 8px / 20px 13px no-repeat,
    linear-gradient(#ffce68 0 0) 4px 4px / 18px 8px no-repeat,
    linear-gradient(#7f4a2e 0 0) 3px 13px / 20px 3px no-repeat,
    linear-gradient(#fff2a0 0 0) 11px 11px / 5px 7px no-repeat;
}

.knight::before,
.slot-art.soul {
  background:
    linear-gradient(#ffd08f 0 0) 8px 3px / 10px 10px no-repeat,
    linear-gradient(#4e83c2 0 0) 6px 12px / 14px 12px no-repeat,
    linear-gradient(#26323d 0 0) 9px 6px / 3px 3px no-repeat,
    linear-gradient(#26323d 0 0) 14px 6px / 3px 3px no-repeat;
}

.slime::before,
.slot-art.pet,
.pet::before {
  background:
    linear-gradient(#77cd7a 0 0) 5px 9px / 18px 12px no-repeat,
    linear-gradient(#99e694 0 0) 8px 5px / 12px 8px no-repeat,
    linear-gradient(#315f3b 0 0) 9px 11px / 3px 3px no-repeat,
    linear-gradient(#315f3b 0 0) 16px 11px / 3px 3px no-repeat;
}

.skill::before,
.slot-art.skill,
.slot-art.fire {
  background:
    linear-gradient(#ffdf73 0 0) 8px 4px / 8px 18px no-repeat,
    linear-gradient(#ef6751 0 0) 5px 9px / 14px 12px no-repeat,
    linear-gradient(#fff4a8 0 0) 10px 9px / 5px 8px no-repeat;
}

.aura::before,
.buff::before,
.drop::before,
.portal::before,
.button-pixel.portal {
  background:
    linear-gradient(#69c6e7 0 0) 5px 4px / 16px 18px no-repeat,
    linear-gradient(#fff 0 0) 8px 7px / 10px 12px no-repeat,
    linear-gradient(#5586d8 0 0) 10px 9px / 6px 8px no-repeat;
}

.coin::before,
.grade::before,
.notice::before,
.trophy::before,
.gears::before,
.data::before {
  background:
    linear-gradient(#ffe27c 0 0) 5px 5px / 16px 16px no-repeat,
    linear-gradient(#e99c2c 0 0) 8px 8px / 10px 10px no-repeat,
    linear-gradient(#fff4b8 0 0) 10px 4px / 6px 3px no-repeat;
}

.pixel-lang {
  width: 15px;
  height: 15px;
  background:
    linear-gradient(#6dbfe2 0 0) 0 2px / 15px 11px no-repeat,
    linear-gradient(#fff 0 0) 2px 5px / 11px 2px no-repeat,
    linear-gradient(#fff 0 0) 7px 2px / 2px 11px no-repeat;
}

.home-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin: 34px 0 16px;
}

.home-section-head.compact {
  margin-top: 0;
}

.home-section-head h2 {
  margin: 4px 0 0;
  font-size: 24px;
  font-weight: 950;
  color: #334b5d;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
  gap: 12px;
}

.category-card {
  position: relative;
  min-height: 88px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: linear-gradient(90deg, rgba(255, 216, 100, 0.5), transparent 58%), #fffdf2;
  border: 2px solid #9bc0cf;
  box-shadow: inset 0 0 0 2px #fff, 0 3px 0 rgba(93, 119, 130, 0.18);
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.category-card:hover {
  border-color: #e7a83d;
}

.category-card.is-hidden {
  display: none;
}

.category-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: #e76855;
}

.category-card-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  background: #f0fbff;
  border: 2px solid #8aa9b6;
  box-shadow: inset 0 0 0 2px #fff3bf;
}

.category-card-icon::before {
  width: 32px;
  height: 32px;
  transform: scale(1.3);
}

.category-card h3 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  color: #314556;
  font-size: 15px;
  font-weight: 950;
}

.category-card h3 span {
  font-family: var(--pixel);
  font-size: 11px;
  font-weight: 900;
  color: #c35b35;
}

.category-card p {
  margin: 4px 0 0;
  color: #6e7e8b;
  font-size: 12px;
}

.hero-roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.hero-card {
  position: relative;
  min-height: 188px;
  overflow: hidden;
  display: grid;
  justify-items: center;
  align-content: center;
  padding: 17px 12px 12px;
  text-align: center;
  background:
    linear-gradient(rgba(255, 217, 103, 0.42), transparent 76px),
    linear-gradient(135deg, rgba(119, 210, 236, 0.35), transparent 55%),
    #fffdf2;
  border: 2px solid #9bc0cf;
  box-shadow: inset 0 0 0 2px #fff, 0 3px 0 rgba(93, 119, 130, 0.18);
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.hero-card:hover {
  border-color: #e7a83d;
}

.pixel-hero {
  display: block;
  width: 76px;
  height: 76px;
  image-rendering: pixelated;
  background:
    linear-gradient(#ffd08f 0 0) 28px 8px / 22px 20px no-repeat,
    linear-gradient(#26323d 0 0) 34px 14px / 4px 4px no-repeat,
    linear-gradient(#26323d 0 0) 44px 14px / 4px 4px no-repeat,
    linear-gradient(var(--hero-color, #5d93d8) 0 0) 22px 28px / 34px 34px no-repeat,
    linear-gradient(#34495e 0 0) 16px 60px / 46px 8px no-repeat,
    linear-gradient(#ffe27c 0 0) 12px 40px / 12px 26px no-repeat,
    linear-gradient(#ffe27c 0 0) 54px 40px / 12px 26px no-repeat;
  filter: drop-shadow(0 5px 0 rgba(74, 81, 86, 0.22));
}

.pixel-hero.big {
  --hero-color: #5b9be0;
  width: 84px;
  height: 84px;
  transform: scale(1.02);
}

.archer-hero { --hero-color: #4fbf75; }
.mage-hero { --hero-color: #a35de7; }
.rogue-hero { --hero-color: #677589; }
.paladin-hero { --hero-color: #e0ae3f; }
.slayer-hero { --hero-color: #dc5f4d; }

.hero-card strong {
  display: block;
  margin-top: 12px;
  color: #314556;
  font-size: 14px;
  font-weight: 950;
}

.hero-card span:last-child {
  display: block;
  margin-top: 4px;
  font-family: var(--pixel);
  font-size: 11px;
  font-weight: 900;
  color: #bd5a34;
}

.info-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 16px;
  margin-top: 34px;
}

.rarity-ladder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
  background: #fffdf2;
  border: 2px solid #9bc0cf;
  box-shadow: inset 0 0 0 2px #fff, 0 3px 0 rgba(93, 119, 130, 0.18);
}

.rarity-cell {
  min-height: 72px;
  padding: 9px;
  border-right: 1px solid #d4e8ef;
}

.rarity-cell:last-child {
  border-right: 0;
}

.rarity-cell span {
  display: block;
  height: 7px;
  margin-bottom: 9px;
  background: var(--rarity, #b7c2cc);
  box-shadow: 0 0 10px var(--rarity, #b7c2cc);
}

.rarity-cell b {
  display: block;
  font-family: var(--pixel);
  font-size: 11px;
  color: #324656;
}

.rarity-cell small {
  display: block;
  margin-top: 4px;
  color: #738493;
  font-size: 11px;
}

.common { --rarity: #aeb7bf; }
.uncommon { --rarity: #54c871; }
.rare { --rarity: #4b91dd; }
.legendary { --rarity: #f69d34; }
.immortal { --rarity: #e84f45; }
.arcana { --rarity: #a35de7; }
.divine { --rarity: #f4d95d; }

.notice-panel {
  display: grid;
  background: #fffdf2;
  border: 2px solid #9bc0cf;
  box-shadow: inset 0 0 0 2px #fff, 0 3px 0 rgba(93, 119, 130, 0.18);
}

.notice-panel a {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid #d4e8ef;
}

.notice-panel a:last-child {
  border-bottom: 0;
}

.notice-panel a:hover {
  background: #fff6d6;
}

.notice-dot {
  width: 14px;
  height: 14px;
  margin-top: 2px;
  background: #f1a729;
  border: 2px solid #bb7430;
  box-shadow: inset 0 0 0 2px #fff2a9;
}

.notice-panel strong {
  display: block;
  color: #314556;
  font-size: 14px;
}

.notice-panel small {
  display: block;
  margin-top: 3px;
  color: #738493;
  font-size: 12px;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px;
  color: #6d7d8a;
  border-top: 2px solid #d9e8ec;
}

.site-footer p {
  margin: 0;
  font-size: 12px;
}

.site-footer div {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  font-weight: 900;
}

.site-footer a:hover {
  color: #be5a34;
}

@media (max-width: 1180px) {
  .app-shell {
    width: min(100vw - 22px, 1060px);
  }

  .site-topbar-shell {
    width: min(100vw - 22px, 1060px);
  }

  .topbar-menu {
    display: block;
  }

  .app-gutter {
    display: none;
  }

  .app-frame {
    display: block;
  }

  .wiki-sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    z-index: 75;
    width: min(82vw, 300px);
    max-height: calc(100vh - var(--topbar-h));
    transition: transform 0.16s ease;
  }

  .wiki-sidebar:not(.is-open) {
    transform: translateX(-110%);
  }
}

@media (max-width: 860px) {
  body::before,
  body::after {
    display: none;
  }

  .app-shell {
    width: 100%;
    min-height: calc(100vh - var(--topbar-h));
    padding: 0;
  }

  .wiki-main-frame {
    border-left: 0;
    border-right: 0;
    box-shadow: none;
  }

  .wiki-main-titlebar {
    display: none;
  }

  .wiki-main-content {
    padding: 18px 14px 24px;
  }

  .site-topbar-shell {
    width: calc(100vw - 14px);
    gap: 8px;
  }

  .brand-lockup {
    width: 148px;
    min-width: 0;
    padding-right: 7px;
  }

  .brand-text {
    font-size: 19px;
  }

  .brand-text small {
    font-size: 9px;
  }

  .topbar-search,
  .support-link {
    display: none;
  }

  .language-menu {
    right: -4px;
    min-width: min(300px, 100vw - 16px);
  }

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

  .home-hero-visual {
    justify-content: center;
    padding: 0 0 22px;
  }

  .game-window {
    width: min(100%, 100vw - 44px);
    max-width: calc(100vw - 44px);
    margin: 0 auto;
  }

  .info-columns {
    grid-template-columns: 1fr;
  }

  .site-footer {
    display: block;
    padding: 24px 14px 32px;
  }

  .site-footer div {
    margin-top: 12px;
  }
}

@media (max-width: 560px) {
  .home-hero-copy {
    min-height: 0;
    padding: 22px 16px;
  }

  .home-hero-title {
    font-size: 42px;
  }

  .home-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .home-hero-actions .game-button {
    width: min(100%, 292px);
  }

  .hero-stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-window {
    width: min(100%, 330px);
    max-width: calc(100% - 16px);
  }

  .game-window-body {
    grid-template-columns: 1fr;
  }

  .hero-loadout {
    grid-template-columns: 92px 1fr;
    justify-items: start;
  }

  .inventory-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .category-grid,
  .hero-roster {
    grid-template-columns: 1fr;
  }
}