/* $GRIND site styles. Builds on wiki-tokens.css (RuneScape Wiki theme variables) and
   wiki-fonts.css (RuneScape / PT Serif / IBM Plex Sans as hosted by the wiki). */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* Page (light = parchment daylight) */
  --page: #e8dab8;
  --page-2: #dccaa0;
  --ink: #2b1f12;
  --ink-soft: #5b4a31;
  --card: #f3e8cc;
  --card-border: #b39a6c;
  --title: var(--droptable-rare-text-color, #7a3f08);
  --title-shadow: none;
  --link: #8a4b0b;
  --focus: #c26a00;

  /* In-game interface chrome: identical in both themes, like the game client */
  --panel: #3e3529;
  --panel-dark: #2b241b;
  --panel-deep: #1d1812;
  --panel-edge: #0f0c08;
  --panel-hi: #5d513e;
  --rs-orange: #ff981f;
  --rs-yellow: #ffff00;
  --rs-green: #00ff00;
  --rs-cyan: #00ffff;
  --rs-red: #ff3030;
  --rs-white: #ffffff;
  --rs-body: #e2d6bd;

  /* Drop-table rarities straight from the wiki palette */
  --rar-common: var(--droptable-common-background);
  --rar-uncommon: var(--droptable-uncommon-background);
  --rar-rare: var(--droptable-rare-background);
  --rar-veryrare: var(--droptable-veryrare-background);
  --rar-always: var(--droptable-always-background);
  --rar-text: var(--droptable-text-color, #000);

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --font-rs: "RuneScape", "RuneScape Small", ui-monospace, monospace;
  --font-serif: "PT Serif", Palatino, Georgia, serif;
  --font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --radius: 4px;
  --wrap: 1160px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #110d09;
    --page-2: #19130d;
    --ink: #eadfc6;
    --ink-soft: #b3a282;
    --card: #1f1811;
    --card-border: #4b3c29;
    --title: var(--rs-orange);
    --title-shadow: 2px 2px 0 #000;
    --link: #ffb152;
    --focus: #ffb152;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #110d09;
  --page-2: #19130d;
  --ink: #eadfc6;
  --ink-soft: #b3a282;
  --card: #1f1811;
  --card-border: #4b3c29;
  --title: var(--rs-orange);
  --title-shadow: 2px 2px 0 #000;
  --link: #ffb152;
  --focus: #ffb152;
  color-scheme: dark;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; background: var(--page); }
body {
  margin: 0;
  background: var(--page);
  background-image: var(--noise), radial-gradient(ellipse 120% 1600px at 50% 0, var(--page-2), var(--page) 70%);
  background-repeat: repeat, no-repeat;
  color: var(--ink);
  font: 16px/1.6 var(--font-sans);
  overflow-x: hidden;
  min-height: 100vh;
}
img { max-width: 100%; height: auto; image-rendering: auto; }
a { color: var(--link); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--panel); color: var(--rs-orange); padding: 8px 12px; }
.skip:focus { left: 8px; }
b, strong { font-weight: 700; }

.rs-text { font-family: var(--font-rs); text-shadow: 1px 1px 0 #000; }
.rs-title {
  font-family: var(--font-rs);
  font-weight: 700;
  color: var(--title);
  text-shadow: var(--title-shadow);
  letter-spacing: .01em;
  line-height: 1.05;
  margin: 0;
}
.rs-title--sm { font-size: 22px; }

/* ── In-game panel chrome ───────────────────────────────────────────────── */
.rs-panel {
  position: relative;
  background: var(--panel);
  background-image: var(--noise), linear-gradient(180deg, #463c2e, var(--panel) 40%, #372e23);
  border: 2px solid var(--panel-edge);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--panel-hi), inset 0 0 0 3px var(--panel-dark), 0 10px 30px rgba(0, 0, 0, .35);
  color: var(--rs-body);
}
.rs-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 3px 3px 0;
  background: linear-gradient(180deg, var(--panel-dark), var(--panel-deep));
  border-bottom: 1px solid var(--panel-edge);
  font: 700 17px var(--font-rs);
  color: var(--rs-orange);
  text-shadow: 1px 1px 0 #000;
}

.rs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 20px;
  font: 700 18px var(--font-rs);
  color: var(--rs-orange);
  text-shadow: 1px 1px 0 #000;
  text-decoration: none;
  background: linear-gradient(180deg, #6a5b45, #4a3f30 45%, #3a3125);
  border: 1px solid var(--panel-edge);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 230, 180, .25), inset 0 -2px 0 rgba(0, 0, 0, .35), 0 2px 0 rgba(0, 0, 0, .4);
  cursor: pointer;
  transition: color .12s, transform .08s, filter .12s;
}
.rs-btn[hidden] { display: none; }
.rs-btn:hover { color: var(--rs-yellow); filter: brightness(1.1); }
.rs-btn:active { transform: translateY(1px); }
.rs-btn--small { min-height: 34px; padding: 4px 12px; font-size: 16px; }
.rs-btn--ghost { background: rgba(20, 15, 10, .55); color: var(--rs-body); }

.card {
  background: var(--card);
  background-image: var(--noise);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 6px 18px rgba(40, 25, 5, .12);
}

/* ── Top bar ────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px max(16px, calc((100vw - var(--wrap)) / 2));
  background: linear-gradient(180deg, rgba(29, 24, 18, .97), rgba(20, 16, 11, .97));
  border-bottom: 2px solid var(--panel-edge);
  box-shadow: inset 0 -1px 0 var(--panel-hi), 0 4px 16px rgba(0, 0, 0, .3);
  backdrop-filter: blur(6px);
}
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.brand .rs-title { font-size: 26px; color: var(--rs-orange); text-shadow: 2px 2px 0 #000; }
.nav { display: flex; gap: 4px; margin-left: 8px; }
.nav a {
  padding: 6px 10px;
  font: 16px var(--font-rs);
  color: var(--rs-body);
  text-decoration: none;
  text-shadow: 1px 1px 0 #000;
  border-radius: 3px;
}
.nav a:hover, .nav-trigger:hover { color: var(--rs-yellow); background: rgba(255, 255, 255, .05); }
.nav a[aria-current="page"] { color: var(--rs-orange); }

/* Sub-menus: an in-game right-click menu look */
.nav-group { position: relative; }
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font: 16px var(--font-rs);
  color: var(--rs-body);
  text-shadow: 1px 1px 0 #000;
  background: none;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}
.nav-group.is-open .nav-trigger { color: var(--rs-yellow); background: rgba(255, 255, 255, .06); }
.caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform .15s; }
.nav-group.is-open .caret { transform: rotate(180deg); }
.nav-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  display: none;
  min-width: 290px;
  padding: 4px;
  background: #5d5447;
  background-image: linear-gradient(180deg, #4a4032, #3a3125);
  border: 2px solid var(--panel-edge);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #7a6a52, 0 12px 30px rgba(0, 0, 0, .5);
}
.nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } /* hover bridge */
.nav-group.is-open .nav-menu { display: grid; gap: 2px; animation: fade .12s ease-out; }
.nav-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 2px;
}
.nav-menu a:hover, .nav-menu a:focus-visible { background: rgba(0, 0, 0, .35); }
.nav-menu img { width: 22px; height: 22px; object-fit: contain; flex: none; filter: drop-shadow(1px 1px 0 #000); }
.nav-menu b { display: block; font: 16px var(--font-rs); color: var(--rs-orange); font-weight: 400; }
.nav-menu small { display: block; font: 13px var(--font-sans); color: #cbbd9f; text-shadow: none; }
.icon-btn.menu-btn { display: none; }
.topbar-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--rs-orange);
  background: var(--panel-dark);
  border: 1px solid var(--panel-edge);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--panel-hi);
  cursor: pointer;
}
.icon-btn .moon { display: none; }
:root[data-theme="dark"] .icon-btn .sun { display: none; }
:root[data-theme="dark"] .icon-btn .moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-btn .sun { display: none; }
  :root:not([data-theme="light"]) .icon-btn .moon { display: block; }
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { position: relative; isolation: isolate; color: #f2e6cc; padding: 56px 16px 0; overflow: hidden; }
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 70% 45%, rgba(255, 170, 60, .18), transparent 55%),
    linear-gradient(180deg, rgba(10, 7, 4, .55), rgba(10, 7, 4, .8) 70%, var(--page)),
    url("../assets/wiki/hero-bg.png") center 35% / cover no-repeat;
}
.hero-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items: center;
}
.eyebrow { margin: 0 0 12px; color: var(--rs-yellow); font-size: 18px; }
.hero-title { margin: 0 0 20px; font-size: clamp(56px, 9vw, 112px); line-height: .92; }
.hero-title .rs-title { display: inline; color: #f5e9cf; text-shadow: 4px 4px 0 #000; }
.hero-title .gold {
  background: linear-gradient(180deg, #fff27a 0%, #ffcc33 40%, #d98a0b 75%, #a65c00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(4px 4px 0 #000);
}
.hero-title .eq { font-family: var(--font-rs); color: var(--rs-orange); text-shadow: 4px 4px 0 #000; }
.lede { font-size: 18px; max-width: 34em; color: #e9dcc0; margin: 0 0 24px; }
.lede b { color: #fff; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }

.ca {
  display: flex;
  align-items: stretch;
  max-width: 100%;
  width: fit-content;
  background: rgba(10, 8, 5, .7);
  border: 1px solid var(--panel-edge);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--panel-hi);
  overflow: hidden;
}
.ca-label { display: grid; place-items: center; padding: 0 10px; font: 700 15px var(--font-rs); color: var(--rs-orange); background: var(--panel-dark); }
.ca-value { padding: 10px 12px; font: 14px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--rs-yellow); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ca-copy { border: 0; border-left: 1px solid var(--panel-edge); background: var(--panel); color: var(--rs-body); font: 15px var(--font-rs); padding: 0 14px; cursor: pointer; }
.ca-copy:hover { color: var(--rs-yellow); }

/* ── Mining game ────────────────────────────────────────────────────────── */
.game { overflow: hidden; }
.game-level { margin-left: auto; color: var(--rs-body); }
.game-modes { display: inline-flex; margin-left: 10px; border: 1px solid var(--panel-edge); border-radius: 3px; overflow: hidden; }
.game-modes button { padding: 2px 9px; font: 14px var(--font-rs); color: var(--rs-body); text-shadow: 1px 1px 0 #000; background: var(--panel-dark); border: 0; cursor: pointer; }
.game-modes button + button { border-left: 1px solid var(--panel-edge); }
.game-modes button:hover { color: var(--rs-yellow); }
.game-modes button.is-active { color: var(--rs-yellow); background: #4d4233; }
/* Wallet mode: the rock shows how full StonkFun's loot pot is */
.game.is-wallet .rock-full { filter: saturate(var(--ore, 1)) brightness(calc(.55 + .45 * var(--ore, 1))); }
.game-pot { position: absolute; top: 10px; left: 0; right: 0; text-align: center; font-size: 15px; color: var(--rs-yellow); pointer-events: none; }
.game-pot[hidden] { display: none; }
.game.is-wallet .game-hint { animation: none; color: var(--rs-body); }
.game-level b { color: var(--rs-yellow); }
.game-main { display: grid; grid-template-columns: 1fr auto; margin: 0 3px; background: linear-gradient(180deg, #2a2118, #1b150e); }
.game-stage {
  position: relative;
  height: 300px;
  min-width: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 50% 80%, rgba(0, 0, 0, .55), transparent 70%), linear-gradient(180deg, #2a2118, #1b150e);
}
.rock {
  position: relative;
  width: min(300px, 80%);
  aspect-ratio: 480 / 421;
  padding: 0;
  border: 0;
  background: none;
  cursor: url("../assets/wiki/pick-dragon.png") 6 6, pointer;
  -webkit-tap-highlight-color: transparent;
}
.rock img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .25s, transform .25s; pointer-events: none; }
.rock .rock-empty { opacity: 0; transform: scale(.9) translateY(12%); }
.rock.is-depleted .rock-full { opacity: 0; transform: scale(.94); }
.rock.is-depleted .rock-empty { opacity: 1; }
.rock.is-hit .rock-full { animation: hit .16s ease-out; }
@keyframes hit { 30% { transform: translate(-3px, 2px) rotate(-1.5deg); } 60% { transform: translate(2px, -1px) rotate(1deg); } }
.game-hint { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; color: var(--rs-cyan); font-size: 16px; pointer-events: none; animation: bob 1.6s ease-in-out infinite; }
.game.is-started:not(.is-wallet) .game-hint { display: none; }
@keyframes bob { 50% { transform: translateY(-4px); } }

.xp-drops { position: absolute; inset: 0; pointer-events: none; }
.xp-drop {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 4px;
  font: 700 18px var(--font-rs);
  color: var(--rs-white);
  text-shadow: 1px 1px 0 #000;
  animation: rise 1.3s ease-out forwards;
}
.xp-drop img { width: 18px; height: 18px; object-fit: contain; }
.xp-drop { white-space: nowrap; }
@keyframes rise { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-70px); } }

.game-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px 6px; }
.xpbar {
  position: relative;
  flex: 1;
  height: 22px;
  background: #0b0906;
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px #4c4232;
  overflow: hidden;
}
.xpbar-fill {
  position: absolute;
  inset: 1px auto 1px 1px;
  width: 0;
  background: url("../assets/wiki/progbar-green.svg") repeat-x left center / auto 100%, linear-gradient(180deg, #5bd13d, #2b8a14);
  transition: width .3s ease-out;
}
.xpbar-text { position: absolute; inset: 0; display: grid; place-items: center; font: 14px var(--font-rs); color: var(--rs-white); text-shadow: 1px 1px 0 #000; }
.game-pick { width: 30px; height: auto; filter: drop-shadow(1px 1px 0 #000); }

/* RuneScape-style backpack: 4 columns x 7 rows */
.inventory {
  display: grid;
  grid-template-columns: repeat(4, 34px);
  grid-auto-rows: 34px;
  gap: 4px;
  align-content: center;
  padding: 10px;
  background: var(--panel-deep);
  background-image: var(--noise);
  border-left: 2px solid var(--panel-edge);
  box-shadow: inset 1px 0 0 #3a3125;
}
.inv-slot { display: grid; place-items: center; border-radius: 2px; background: rgba(255, 255, 255, .025); }
.inv-slot img { width: 80%; height: auto; filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .8)); animation: pop .2s ease-out; }
@keyframes pop { from { transform: scale(.4); } }
.game-foot { display: flex; align-items: center; gap: 10px; padding: 8px 12px 12px; }
.game-log { flex: 1; margin: 0; font-size: 15px; color: var(--rs-body); min-height: 1.5em; }

.levelup {
  position: absolute;
  inset: 34px 3px 3px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 190, 80, .25), rgba(10, 8, 5, .88) 65%);
  z-index: 5;
  animation: fade .25s ease-out;
}
.levelup[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }
.levelup-card { position: relative; animation: pop .35s cubic-bezier(.2, 1.6, .5, 1); }
/* The wiki image has a level baked into its medallion; cover it with ours (centre 220,64 of 425x233). */
.levelup-num {
  position: absolute;
  left: 51.76%;
  top: 27.5%;
  width: 14.2%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, #3a1e0c 0%, #140a05 70%, #070403 100%);
  font: 700 clamp(22px, 5vw, 30px) var(--font-rs);
  color: #f2c75c;
  text-shadow: 2px 2px 0 #000, 0 0 10px rgba(255, 150, 40, .6);
}
.levelup-card img { width: min(340px, 86vw); display: block; }
.levelup-msg { margin: 0; text-align: center; color: var(--rs-body); font-size: 17px; padding: 0 16px; }
.levelup-msg b { color: var(--rs-yellow); }

/* ── Ticker ─────────────────────────────────────────────────────────────── */
.ticker {
  max-width: var(--wrap);
  margin: 48px auto 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  background: linear-gradient(180deg, var(--panel-dark), var(--panel-deep));
  border: 2px solid var(--panel-edge);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--panel-hi);
}
.ticker > div { padding: 12px 16px; border-right: 1px solid rgba(0, 0, 0, .6); box-shadow: 1px 0 0 rgba(255, 220, 160, .06); min-width: 0; }
.ticker > div:last-child { border-right: 0; }
.ticker dt { font: 14px var(--font-rs); color: var(--rs-orange); text-shadow: 1px 1px 0 #000; }
.ticker dd { margin: 2px 0 0; font: 700 20px var(--font-rs); color: var(--rs-yellow); text-shadow: 1px 1px 0 #000; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Sections ───────────────────────────────────────────────────────────── */
.section { max-width: var(--wrap); margin: 0 auto; padding: 80px 16px 0; }
.section-head { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.section-head > img { flex: none; width: auto; max-height: 44px; filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, .5)); }
.section-head h2 { font-size: clamp(30px, 4vw, 40px); }
.section-head p { margin: 6px 0 0; color: var(--ink-soft); max-width: 60ch; }
.empty { text-align: center; color: #a8987a; padding: 28px 12px !important; font-family: var(--font-rs); }

/* Lore scroll */
.lore { padding-top: 96px; }
.scroll { position: relative; max-width: 760px; margin: 0 auto; padding: 22px 0; filter: drop-shadow(0 16px 24px rgba(40, 20, 0, .3)); }
.scroll::before, .scroll::after {
  content: "";
  position: absolute;
  left: -18px;
  right: -18px;
  height: 30px;
  border-radius: 15px;
  background: linear-gradient(180deg, #c9a567, #f2dcaa 35%, #b88c46 70%, #7c5724);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .25);
}
.scroll::before { top: 0; }
.scroll::after { bottom: 0; }
.scroll-body {
  padding: 44px clamp(24px, 6vw, 72px) 40px;
  background: var(--noise), radial-gradient(ellipse at 50% 50%, #f7e8c1 30%, #e8cf98 85%, #d4b274);
  color: #3a2812;
  font: 18px/1.75 var(--font-serif);
}
.scroll-title { margin: 0 0 16px; font: 700 30px/1.2 var(--font-serif); color: #5a2d06; text-align: center; }
.scroll-body p { margin: 0 0 14px; }
.scroll-body p:first-of-type::first-letter { float: left; font: 700 58px/0.9 var(--font-serif); color: #7a1f0e; padding: 6px 8px 0 0; }
.scroll-sign { text-align: right; font-style: italic; color: #6d4f2a; }

/* Rules */
.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.rule { padding: 20px; }
.rule img { height: 40px; width: auto; object-fit: contain; filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, .4)); }
.rule h3 { margin: 12px 0 6px; font: 700 21px var(--font-rs); color: var(--title); text-shadow: var(--title-shadow); }
.rule p { margin: 0; color: var(--ink-soft); font-size: 15px; }

.calc { margin-top: 16px; padding: 20px; display: grid; grid-template-columns: auto 1fr; gap: 12px 28px; align-items: center; }
.calc h3 { grid-column: 1 / -1; }
.calc-input { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--font-rs); font-size: 18px; }
.calc-input input, .lookup input {
  font: 16px ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--rs-yellow);
  background: #0f0c08;
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px #4c4232;
  border-radius: 3px;
  padding: 10px 12px;
  min-height: 44px;
}
.calc-input input { width: 15ch; }
.calc-out { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.calc-out div { padding: 10px 12px; border-left: 3px solid var(--card-border); }
.calc-out span { display: block; font-size: 13px; color: var(--ink-soft); }
.calc-out b { font: 700 20px var(--font-rs); color: var(--title); }

/* Ladder */
.ladder { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.rung {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--panel);
  background-image: var(--noise);
  border: 1px solid var(--panel-edge);
  box-shadow: inset 0 0 0 1px var(--panel-hi);
  border-radius: 3px;
  color: var(--rs-body);
}
.rung img { width: 26px; height: 26px; object-fit: contain; }
.rung b { display: block; font: 700 15px var(--font-rs); color: var(--rs-yellow); text-shadow: 1px 1px 0 #000; }
.rung span { font: 15px var(--font-rs); color: var(--rs-orange); text-shadow: 1px 1px 0 #000; }

/* Lookup / player card */
.lookup { display: flex; gap: 10px; max-width: 720px; }
.lookup input { flex: 1; min-width: 0; }
.player { margin-top: 18px; max-width: 720px; padding: 0 0 16px; }
.player-body { display: grid; grid-template-columns: auto 1fr; gap: 16px 20px; padding: 16px 16px 0; align-items: center; }
.player-level { position: relative; width: 96px; height: 96px; display: grid; place-items: center; background: radial-gradient(circle, #3b3226, #15110c); border: 2px solid #000; border-radius: 50%; box-shadow: inset 0 0 0 2px #7a6545, 0 0 0 1px var(--panel-hi); }
.player-level img { position: absolute; width: 40px; top: 10px; opacity: .35; }
.player-level b { position: relative; font: 700 40px var(--font-rs); color: var(--rs-yellow); text-shadow: 2px 2px 0 #000; }
.player-name { font: 15px ui-monospace, Menlo, monospace; color: var(--rs-body); word-break: break-all; }
.player-title { font: 700 22px var(--font-rs); color: var(--rs-orange); text-shadow: 1px 1px 0 #000; }
.player .xpbar { grid-column: 1 / -1; }
.player-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--panel-edge); border: 1px solid var(--panel-edge); }
.player-stats div { padding: 10px 12px; background: var(--panel-dark); }
.player-stats span { display: block; font: 13px var(--font-rs); color: var(--rs-orange); }
.player-stats b { font: 700 18px var(--font-rs); color: var(--rs-white); font-variant-numeric: tabular-nums; }
.player-note { grid-column: 1 / -1; margin: 0; font-size: 14px; color: #bfb194; }

/* Tables (hiscores / drops) */
.table-wrap { overflow: hidden; padding: 3px; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { text-align: left; font: 15px var(--font-rs); color: var(--rs-orange); text-shadow: 1px 1px 0 #000; padding: 10px 12px; background: linear-gradient(180deg, var(--panel-dark), var(--panel-deep)); border-bottom: 1px solid var(--panel-edge); }
td { padding: 9px 12px; border-bottom: 1px solid rgba(0, 0, 0, .45); box-shadow: 0 1px 0 rgba(255, 220, 160, .04); font-size: 15px; }
tbody tr:nth-child(even) { background: rgba(0, 0, 0, .12); }
tbody tr:hover { background: rgba(255, 200, 100, .06); }
.num { text-align: right; }
.rank { font-family: var(--font-rs); color: var(--rs-yellow); text-shadow: 1px 1px 0 #000; }
.wallet { font: 14px ui-monospace, Menlo, monospace; color: var(--rs-body); text-decoration: none; }
.wallet:hover { color: var(--rs-yellow); }
.lvl { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-rs); font-size: 17px; color: var(--rs-white); text-shadow: 1px 1px 0 #000; }
.lvl img { width: 16px; height: 16px; }
.title-cell { font-family: var(--font-rs); color: var(--rs-orange); text-shadow: 1px 1px 0 #000; }
.more { display: flex; margin: 10px auto; }

.hiscores-grid { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
.dist { display: grid; gap: 6px; padding: 14px; }
.dist-row { display: grid; grid-template-columns: 52px 1fr 40px; gap: 8px; align-items: center; font: 14px var(--font-rs); color: var(--rs-body); text-shadow: 1px 1px 0 #000; }
.dist-bar { height: 14px; background: #0b0906; border: 1px solid #000; }
.dist-bar span { display: block; height: 100%; background: linear-gradient(180deg, #ffd24a, #c47d0a); }
.dist-row .n { text-align: right; color: var(--rs-yellow); }

/* Drops */
.drops-grid { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; }
.drop-total { display: grid; justify-items: center; text-align: center; padding: 24px; gap: 12px; }
.drop-total img { width: 150px; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); }
.drop-total-label { display: block; font-size: 14px; color: var(--ink-soft); }
.drop-total-value { display: block; font: 700 34px var(--font-rs); color: var(--title); text-shadow: var(--title-shadow); }
.drop-total-sub { display: block; font-size: 14px; color: var(--ink-soft); }
.rarity { display: inline-block; padding: 2px 8px; border-radius: 3px; font: 14px var(--font-rs); color: var(--rar-text); }
.rarity--common { background: var(--rar-common); }
.rarity--uncommon { background: var(--rar-uncommon); }
.rarity--rare { background: var(--rar-rare); }
.rarity--veryrare { background: var(--rar-veryrare); }
.drop-amt { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; font-family: var(--font-rs); font-size: 16px; color: var(--rs-yellow); text-shadow: 1px 1px 0 #000; }
.drop-amt img { width: 22px; height: auto; }
.when { color: #bfb194; font-size: 14px; }

.drop-side { display: grid; gap: 16px; }
.pot-body { padding: 14px; display: grid; gap: 12px; }
.pot .xpbar-fill { background: linear-gradient(180deg, #ffe066, #d99a0b 60%, #a86a00); }
.pot-stats { margin: 0; display: grid; gap: 1px; background: var(--panel-edge); border: 1px solid var(--panel-edge); }
.pot-stats div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; background: var(--panel-dark); }
.pot-stats dt { font: 14px var(--font-rs); color: var(--rs-orange); text-shadow: 1px 1px 0 #000; }
.pot-stats dd { margin: 0; font: 15px var(--font-rs); color: var(--rs-yellow); text-shadow: 1px 1px 0 #000; text-align: right; font-variant-numeric: tabular-nums; }
.rounds { border-top: 1px solid var(--panel-edge); }
.rounds .rs-panel-title { margin: 0; }
.rounds ul { list-style: none; margin: 0; padding: 6px 12px 12px; display: grid; gap: 4px; font: 15px var(--font-rs); text-shadow: 1px 1px 0 #000; }
.rounds li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 4px 0; border-bottom: 1px solid rgba(0, 0, 0, .4); }
.rounds li b { color: var(--rs-yellow); font-weight: 400; }
.rounds li span { color: #bfb194; }

.drop-rules { margin-top: 16px; padding: 20px 24px; }
.drop-rules-intro, .drop-rules-note { margin: 6px 0 0; color: var(--ink-soft); font-size: 15px; }
.drop-rules-note { font-size: 13px; }
.drop-steps { margin: 14px 0 0; padding-left: 22px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 32px; }
.drop-steps li { font-size: 15px; color: var(--ink); }
.drop-steps li::marker { font: 700 16px var(--font-rs); color: var(--title); }
.drop-steps b { color: var(--title); }
.drop-rules-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* Bank */
.bank { max-width: 760px; }
.bank-tab { margin-left: auto; font-size: 14px; color: var(--rs-body); }
.bank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; padding: 14px; }
.slot {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(0, 0, 0, .5);
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  font: inherit;
  color: inherit;
}
.slot:hover, .slot.is-active { background: rgba(255, 220, 140, .08); box-shadow: inset 0 0 0 1px rgba(255, 220, 140, .35); }
.slot img { width: 44%; height: auto; max-height: 56%; object-fit: contain; filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .8)); }
.slot-qty { position: absolute; top: 4px; left: 6px; font: 14px var(--font-rs); text-shadow: 1px 1px 0 #000; color: var(--rs-yellow); }
.slot-qty.is-m { color: var(--rs-green); }
.slot-qty.is-k { color: var(--rs-white); }
.slot-name { position: absolute; bottom: 4px; left: 4px; right: 4px; text-align: center; font: 12px var(--font-rs); color: var(--rs-orange); text-shadow: 1px 1px 0 #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.examine { margin: 0 3px 3px; padding: 10px 14px; min-height: 3.2em; background: var(--panel-deep); border-top: 1px solid var(--panel-edge); color: var(--rs-body); font-size: 16px; }
.examine b { color: var(--rs-orange); }

/* Quest journal */
.quest-grid { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
.journal {
  margin: 0;
  padding: 28px 28px 28px 56px;
  background: var(--noise), linear-gradient(180deg, #f3e3b8, #e6cd95);
  border: 1px solid #a8864f;
  border-radius: var(--radius);
  color: #3a2812;
  font: 17px/1.65 var(--font-serif);
  box-shadow: 0 10px 24px rgba(40, 20, 0, .18);
}
.journal li { margin-bottom: 14px; padding-left: 6px; }
.journal li::marker { font: 700 18px var(--font-rs); color: #7a1f0e; }
.journal b { color: #0b3a82; }
.journal a { color: #7a1f0e; }
.quest-reward {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
  background: var(--panel);
  background-image: var(--noise), radial-gradient(ellipse at 50% 30%, #5a4a33, var(--panel) 70%);
  border: 2px solid var(--panel-edge);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--panel-hi);
  color: var(--rs-body);
}
.quest-reward .rs-title { color: var(--rs-yellow); text-shadow: 2px 2px 0 #000; }
.quest-reward img { width: 140px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
.quest-reward ul { list-style: none; margin: 0; padding: 0; font: 16px var(--font-rs); text-shadow: 1px 1px 0 #000; }
.quest-reward li { padding: 2px 0; }
.ca--compact { width: 100%; }
.ca--compact .ca-value { flex: 1; }

/* World chat */
.chatbox { max-width: 860px; }
.chat-tabs { display: flex; gap: 2px; padding: 6px 6px 0; }
.chat-tabs { align-items: flex-end; }
.chat-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font: 15px var(--font-rs);
  color: var(--rs-body);
  text-shadow: 1px 1px 0 #000;
  background: var(--panel-dark);
  border: 1px solid var(--panel-edge);
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  cursor: pointer;
}
.chat-tab img { width: 14px; height: 14px; object-fit: contain; }
.chat-tab:hover { color: var(--rs-yellow); }
.chat-tab.is-active { color: var(--rs-orange); background: #4d4233; }
/* Locked rooms carry a small padlock until the wallet qualifies */
.chat-tab.is-locked::after {
  content: "";
  width: 9px;
  height: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 11'%3E%3Cpath d='M2 5V3.5a2.5 2.5 0 0 1 5 0V5' fill='none' stroke='%23c8b58a' stroke-width='1.4'/%3E%3Crect x='0.5' y='5' width='8' height='5.5' rx='1' fill='%23c8b58a'/%3E%3C/svg%3E") no-repeat center / contain;
}
.chat-unread:empty { display: none; }
.chat-unread { min-width: 18px; padding: 0 5px; font: 12px var(--font-rs); line-height: 16px; text-align: center; color: #000; text-shadow: none; background: var(--rs-yellow); border-radius: 8px; }
.chat-online { margin-left: auto; padding: 0 6px 6px; font: 14px var(--font-rs); color: var(--rs-green); text-shadow: 1px 1px 0 #000; }

.chat-line .lvl-tag { font-size: 13px; color: var(--rs-yellow); }
.chat-line .dev-tag { padding: 0 5px; font-size: 12px; color: #000; text-shadow: none; background: var(--rs-orange); border-radius: 2px; }
.chat-line--user.is-dev .msg { color: var(--rs-orange); }
.chat-line a.who { color: var(--rs-white); text-decoration: none; }
.chat-line a.who:hover { text-decoration: underline; }
.chat-line--user .msg { color: var(--rs-cyan); overflow-wrap: anywhere; }
.chat-line--user.is-me .msg { color: var(--rs-green); }
.chat-line--user img { width: 18px; height: 18px; object-fit: contain; object-position: center; border-radius: 0; }
.mod-tools { margin-left: auto; display: none; gap: 4px; }
.chat-line:hover .mod-tools { display: inline-flex; }
.mod-tools button { font: 12px var(--font-rs); color: var(--rs-body); background: var(--panel-dark); border: 1px solid var(--panel-edge); border-radius: 2px; cursor: pointer; padding: 0 5px; }
.mod-tools button:hover { color: var(--rs-red); }

.chat-gate {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 6px 6px 0;
  padding: 12px 14px;
  background: var(--panel-deep);
  border: 1px solid var(--panel-edge);
  color: var(--rs-body);
  font-size: 15px;
}
.chat-gate[hidden] { display: none; }
.chat-gate img { width: 28px; height: 28px; object-fit: contain; }
.chat-gate p { flex: 1 1 260px; margin: 0; }
.chat-gate b { color: var(--rs-yellow); }
.chat-gate-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-form { display: flex; align-items: center; gap: 8px; padding: 10px 12px 12px; }
.chat-form[hidden] { display: none; }
.chat-prefix { font-size: 15px; color: var(--rs-body); white-space: nowrap; }
.chat-form input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  font: 16px var(--font-rs);
  color: var(--rs-cyan);
  background: #0f0c08;
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px #4c4232;
  border-radius: 3px;
}
.chat-input[hidden] { display: none; }

/* Wallet button + dialog */
.wallet-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  font: 16px var(--font-rs);
  color: var(--rs-yellow);
  text-shadow: 1px 1px 0 #000;
  background: var(--panel-dark);
  border: 1px solid var(--panel-edge);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--panel-hi);
  cursor: pointer;
}
.wallet-btn img { width: 18px; height: 18px; }
.wallet-btn:hover { color: #fff; }
.wallet-btn.is-connected { color: var(--rs-green); }
.wallet-dialog {
  width: min(440px, calc(100vw - 32px));
  padding: 0;
  color: var(--rs-body);
}
.wallet-dialog::backdrop { background: rgba(8, 6, 3, .7); backdrop-filter: blur(2px); }
.wallet-dialog .rs-panel-title { margin: 3px 3px 0; }
.wallet-close { margin-left: auto; font: 16px var(--font-rs); color: var(--rs-body); background: none; border: 0; cursor: pointer; }
.wallet-close:hover { color: var(--rs-red); }
.wallet-body { padding: 14px 16px 16px; display: grid; gap: 12px; }
.wallet-note { margin: 0; font-size: 14px; color: #d4c7a8; }
.wallet-warn { padding: 8px 10px; color: var(--rs-orange); background: rgba(0, 0, 0, .3); border-left: 3px solid var(--rs-orange); }
.wallet-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wallet-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  font: 18px var(--font-rs);
  color: var(--rs-orange);
  text-shadow: 1px 1px 0 #000;
  background: var(--panel-dark);
  border: 1px solid var(--panel-edge);
  border-radius: 3px;
  cursor: pointer;
}
.wallet-option:hover:not(:disabled) { background: #4d4233; color: var(--rs-yellow); }
.wallet-option:disabled { opacity: .55; cursor: wait; }
.wallet-option img, .wallet-icon-fallback { width: 28px; height: 28px; border-radius: 6px; flex: none; }
.wallet-icon-fallback { display: grid; place-items: center; background: #0f0c08; color: var(--rs-yellow); }
.wallet-links { display: flex; flex-wrap: wrap; gap: 8px 14px; font: 15px var(--font-rs); }
.wallet-links a { color: var(--rs-yellow); text-shadow: 1px 1px 0 #000; }
.wallet-status { margin: 0; min-height: 1.4em; font-size: 15px; color: var(--rs-cyan); }
.wallet-status[data-kind="error"] { color: #ff6b5b; }
.wallet-address { margin: 0; font: 14px ui-monospace, Menlo, monospace; color: var(--rs-yellow); word-break: break-all; }
.wallet-level { margin: 0; font: 16px var(--font-rs); color: var(--rs-orange); text-shadow: 1px 1px 0 #000; }
.wallet-rooms { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--panel-edge); border: 1px solid var(--panel-edge); }
.wallet-rooms li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; background: var(--panel-dark); font: 15px var(--font-rs); text-shadow: 1px 1px 0 #000; }
.wallet-rooms li.is-ok b { color: var(--rs-green); font-weight: 400; }
.wallet-rooms li.is-locked b { color: #c8b58a; font-weight: 400; }
.wallet-rooms span { color: var(--rs-body); text-align: right; }
.wallet-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-lines {
  list-style: none;
  margin: 0 6px;
  padding: 10px 12px;
  height: 260px;
  overflow-y: auto;
  background: rgba(15, 12, 8, .85);
  border: 1px solid var(--panel-edge);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font: 16px var(--font-rs);
  text-shadow: 1px 1px 0 #000;
}
.chat-lines[hidden] { display: none; }
.chat-line { display: flex; gap: 8px; align-items: flex-start; animation: fade .3s ease-out; }
.chat-line img { width: 24px; height: 24px; object-fit: cover; object-position: top; border-radius: 2px; flex: none; }
.chat-line .who { color: var(--rs-white); }
.chat-line .msg { color: var(--rs-cyan); }
.chat-line--news .msg { color: var(--rs-orange); }
.chat-line--death .msg { color: var(--rs-red); }
.chat-line--spawn .msg { color: var(--rs-green); }
.chat-input { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding: 10px 12px 12px; font: 16px var(--font-rs); }
.chat-input a { color: var(--rs-yellow); text-shadow: 1px 1px 0 #000; }

/* Footer, toast */
.footer { max-width: var(--wrap); margin: 96px auto 0; padding: 28px 16px 48px; border-top: 1px solid var(--card-border); color: var(--ink-soft); font-size: 13px; }
.footer p { margin: 0 0 10px; max-width: 90ch; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; padding: 10px 16px; background: var(--panel-deep); border: 1px solid var(--panel-edge); box-shadow: inset 0 0 0 1px var(--panel-hi); color: var(--rs-yellow); border-radius: 3px; }

/* ── XP drops ───────────────────────────────────────────────────────────── */
.xp-loop { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; counter-reset: none; }
.xp-loop li { display: grid; gap: 6px; padding: 16px; align-content: start; }
.xp-loop img { height: 28px; width: auto; object-fit: contain; filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, .4)); }
.xp-loop b { font: 700 19px var(--font-rs); color: var(--title); text-shadow: var(--title-shadow); }
.xp-loop span { font-size: 14px; color: var(--ink-soft); }
.xp-grid { display: grid; grid-template-columns: 360px 1fr; gap: 16px; align-items: start; }
.xp-mult-note { margin-left: auto; font: 13px var(--font-rs); color: var(--rs-body); }
.xp-mult-body { display: grid; gap: 6px; padding: 14px 14px 6px; }
.xp-mult-row { display: grid; grid-template-columns: 22px 46px 1fr 52px; gap: 8px; align-items: center; font: 14px var(--font-rs); color: var(--rs-body); text-shadow: 1px 1px 0 #000; }
.xp-mult-row img { width: 20px; height: 20px; object-fit: contain; }
.xp-mult-row b { text-align: right; color: var(--rs-yellow); font-weight: 400; }
.xp-mult-foot { margin: 0; padding: 8px 14px 14px; font-size: 13px; color: #cbbd9f; }
.xp-mult-foot b { color: var(--rs-yellow); }
.xp-stats { margin: 12px 12px 0; }
.xp-stats dd a { color: var(--rs-yellow); }
.xp-stats-panel .table-wrap { margin-top: 10px; }
.xp-note { margin: 12px 0 0; font-size: 13px; color: var(--ink-soft); max-width: 90ch; }
.xp-mult-cell { font-family: var(--font-rs); color: var(--rs-yellow); text-shadow: 1px 1px 0 #000; }

/* ── Explainer page (drops.html) ─────────────────────────────────────────── */
.doc-hero {
  position: relative;
  isolation: isolate;
  padding: 44px 16px 36px;
  color: #f2e6cc;
  overflow: hidden;
}
.doc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 80% 30%, rgba(255, 170, 60, .16), transparent 55%),
    linear-gradient(180deg, rgba(10, 7, 4, .72), rgba(10, 7, 4, .9) 75%, var(--page)),
    url("../assets/wiki/hero-bg.png") center 40% / cover no-repeat;
}
.doc-hero-inner { max-width: var(--wrap); margin: 0 auto; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font: 15px var(--font-rs); text-shadow: 1px 1px 0 #000; color: #bfb194; }
.crumbs a { color: var(--rs-yellow); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.doc-title { margin: 14px 0 12px; font-size: clamp(40px, 6vw, 64px); color: #f5e9cf; text-shadow: 3px 3px 0 #000; }
.doc-lede { max-width: 62ch; margin: 0; font-size: 18px; color: #e9dcc0; }
.doc-lede b { color: #fff; }

.glance {
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  background: linear-gradient(180deg, var(--panel-dark), var(--panel-deep));
  border: 2px solid var(--panel-edge);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--panel-hi);
}
.glance > div { padding: 12px 14px; border-right: 1px solid rgba(0, 0, 0, .6); min-width: 0; }
.glance > div:last-child { border-right: 0; }
.glance dt { font: 14px var(--font-rs); color: var(--rs-orange); text-shadow: 1px 1px 0 #000; }
.glance dd { margin: 2px 0; font: 700 22px var(--font-rs); color: var(--rs-yellow); text-shadow: 1px 1px 0 #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.glance span { display: block; font-size: 12px; color: #bfb194; }

.doc-layout {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 40px 16px 0;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.toc { position: sticky; top: 80px; display: grid; gap: 16px; }
.toc-title { margin: 0; font: 700 18px var(--font-rs); color: var(--title); text-shadow: var(--title-shadow); }
.toc ol { margin: 0; padding: 0 0 0 22px; display: grid; gap: 6px; }
.toc li::marker { font: 15px var(--font-rs); color: var(--title); }
.toc a { color: var(--ink); text-decoration: none; font-size: 15px; }
.toc a:hover, .toc a.is-active { color: var(--link); text-decoration: underline; }
.toc-pot-body { padding: 12px; display: grid; gap: 8px; }
.toc-pot .xpbar-fill { background: linear-gradient(180deg, #ffe066, #d99a0b 60%, #a86a00); }
.toc-pot p { margin: 0; font-size: 13px; color: #cbbd9f; }

.doc-section { padding-bottom: 56px; scroll-margin-top: 80px; }
.doc-section > h2 { font-size: clamp(28px, 3.4vw, 36px); margin-bottom: 10px; }
.doc-section > p { max-width: 68ch; color: var(--ink-soft); margin: 0 0 16px; }
.doc-section a:not(.rs-btn) { color: var(--link); }
.doc-note { font-size: 14px; }
code { font: 14px ui-monospace, SFMono-Regular, Menlo, monospace; padding: 1px 5px; background: rgba(0, 0, 0, .08); border-radius: 3px; }

/* The loop: a vertical quest chain */
.flow { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 14px; }
.flow::before { content: ""; position: absolute; left: 31px; top: 30px; bottom: 30px; width: 4px; background: repeating-linear-gradient(180deg, var(--card-border) 0 10px, transparent 10px 16px); }
.flow-step {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  align-items: start;
  padding: 16px 18px 16px 0;
  background: var(--card);
  background-image: var(--noise);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
}
.flow-step > img {
  justify-self: center;
  width: 44px;
  height: 44px;
  padding: 6px;
  object-fit: contain;
  background: var(--panel-dark);
  border: 2px solid var(--panel-edge);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--panel-hi);
  margin-left: 10px;
}
.flow-step h3 { margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 700 20px var(--font-rs); color: var(--title); text-shadow: var(--title-shadow); }
.flow-step p { margin: 0; font-size: 15px; color: var(--ink); }
.badge { display: inline-block; padding: 2px 8px; font: 14px var(--font-rs); color: var(--rs-yellow); text-shadow: 1px 1px 0 #000; background: var(--panel-dark); border: 1px solid var(--panel-edge); border-radius: 3px; }

/* Formula on parchment */
.formula {
  margin: 0 0 16px;
  padding: 24px clamp(18px, 4vw, 36px);
  background: var(--noise), radial-gradient(ellipse at 50% 50%, #f7e8c1 30%, #e8cf98 85%, #d4b274);
  border: 1px solid #a8864f;
  border-radius: var(--radius);
  color: #3a2812;
  font: 19px/1.6 var(--font-serif);
  box-shadow: 0 10px 24px rgba(40, 20, 0, .15);
  overflow-x: auto;
}
.formula p { margin: 6px 0; }
.f-var { font-style: italic; color: #0b3a82; }
.f-num { font-weight: 700; color: #7a1f0e; }
.f-main { font-size: 23px; padding: 8px 0; }
.f-frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin: 0 4px; }
.f-frac > span:first-child { border-bottom: 2px solid #3a2812; padding: 0 6px 2px; }
.f-frac > span:last-child { padding: 2px 6px 0; }
.doc-list { margin: 0 0 16px; padding-left: 22px; max-width: 72ch; display: grid; gap: 10px; color: var(--ink); }
.pseudo { max-width: 100%; }
.pseudo summary { cursor: pointer; font: 16px var(--font-rs); color: var(--link); }
.pseudo pre {
  margin: 10px 0 0;
  padding: 16px 18px;
  overflow-x: auto;
  background: #0f0c08;
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px #4c4232;
  border-radius: 3px;
}
.pseudo code { padding: 0; background: none; color: var(--rs-green); font-size: 14px; line-height: 1.6; }

/* Worked example */
.example-table th[scope="row"] { font: 15px var(--font-sans); color: var(--rs-body); text-shadow: none; background: transparent; border-bottom: 1px solid rgba(0, 0, 0, .45); }
.ex-n { width: 36px; font-family: var(--font-rs); color: var(--rs-orange); text-shadow: 1px 1px 0 #000; }
.ex-v { font-family: var(--font-rs); font-size: 17px; color: var(--rs-yellow); text-shadow: 1px 1px 0 #000; white-space: nowrap; }
.ex-note { font-size: 13px; color: #bfb194; }
.example-table tr:nth-last-child(2) .ex-v { color: var(--rs-green); font-size: 19px; }

/* Simulator */
.sim-reset { margin-left: auto; font: 14px var(--font-rs); color: var(--rs-yellow); background: none; border: 1px solid var(--panel-edge); border-radius: 3px; padding: 3px 8px; cursor: pointer; }
.sim-reset:hover { background: rgba(255, 255, 255, .06); }
.sim-form { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 16px; }
.sim-form label { display: grid; gap: 6px; font: 14px var(--font-rs); color: var(--rs-orange); text-shadow: 1px 1px 0 #000; }
.sim-form input {
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  font: 16px ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--rs-yellow);
  background: #0f0c08;
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px #4c4232;
  border-radius: 3px;
}
.sim-result { padding: 0 16px 16px; display: grid; gap: 12px; }
.sim-verdict { margin: 0; padding: 12px 14px; font: 18px var(--font-rs); text-shadow: 1px 1px 0 #000; background: #0f0c08; border: 1px solid #000; border-left-width: 4px; border-radius: 3px; }
.sim-verdict.is-good { color: var(--rs-green); border-left-color: var(--rs-green); }
.sim-verdict.is-warn { color: var(--rs-orange); border-left-color: var(--rs-orange); }
.sim-verdict.is-bad { color: #ff6b5b; border-left-color: #ff6b5b; }
.sim-verdict.is-muted { color: var(--rs-body); }
.sim-slice { height: 16px; background: #0b0906; border: 1px solid #000; box-shadow: inset 0 0 0 1px #3a3125; }
.sim-slice span { display: block; height: 100%; max-width: 100%; background: linear-gradient(180deg, #ffe066, #c47d0a); }
.sim-stats { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--panel-edge); border: 1px solid var(--panel-edge); }
.sim-stats div { padding: 10px 12px; background: var(--panel-dark); }
.sim-stats dt { font: 13px var(--font-rs); color: var(--rs-orange); }
.sim-stats dd { margin: 2px 0 0; font: 700 18px var(--font-rs); color: var(--rs-white); text-shadow: 1px 1px 0 #000; }
.sim-note { margin: 0; font-size: 13px; color: #bfb194; }

/* FAQ */
.faq { display: grid; gap: 8px; }
.faq details { background: var(--card); background-image: var(--noise); border: 1px solid var(--card-border); border-radius: var(--radius); }
.faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  font: 18px var(--font-rs);
  color: var(--title);
  text-shadow: var(--title-shadow);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; flex: none; display: grid; place-items: center; width: 22px; height: 22px; font: 700 16px var(--font-rs); color: var(--rs-yellow); background: var(--panel-dark); border: 1px solid var(--panel-edge); border-radius: 3px; text-shadow: 1px 1px 0 #000; }
.faq details[open] summary::before { content: "−"; }
.faq details p { margin: 0; padding: 0 16px 16px 50px; color: var(--ink); font-size: 15px; }

/* Levels vs drops */
.compare th[scope="row"] { font: 15px var(--font-rs); color: var(--rs-orange); background: transparent; border-bottom: 1px solid rgba(0, 0, 0, .45); white-space: nowrap; }
.compare td { color: var(--rs-body); }

/* Evidence */
.evidence { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.evidence .card { padding: 16px; display: grid; gap: 6px; align-content: start; }
.evidence b { font: 700 28px var(--font-rs); color: var(--title); text-shadow: var(--title-shadow); }
.evidence span { font-size: 14px; color: var(--ink-soft); }

/* ── 404 page ───────────────────────────────────────────────────────────── */
.nf { position: relative; isolation: isolate; min-height: calc(100vh - 220px); display: grid; place-items: center; padding: 56px 16px; }
.nf-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(255, 170, 60, .14), transparent 60%),
    linear-gradient(180deg, rgba(10, 7, 4, .7), rgba(10, 7, 4, .88) 75%, var(--page)),
    url("/assets/wiki/hero-bg.png") center 40% / cover no-repeat;
}
.nf-card { width: min(560px, 100%); }
.nf-body { display: grid; justify-items: center; gap: 10px; padding: 20px 22px 24px; text-align: center; }
.nf-stage { position: relative; width: min(320px, 80%); }
.nf-rock { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .6)); }
.nf-menu { position: absolute; right: -18%; top: 4%; background: #5d5447; border: 2px solid #000; box-shadow: 0 6px 14px rgba(0, 0, 0, .5); font: 17px var(--font-rs); text-align: left; }
.nf-menu > div { padding: 2px 10px; color: #fff; text-shadow: 1px 1px 0 #000; white-space: nowrap; }
.nf-menu .head { background: #000; color: #b8a78a; text-shadow: none; }
.nf-menu .hover { background: rgba(0, 0, 0, .25); }
.nf-menu .y { color: var(--rs-yellow); }
.nf-code { font-size: clamp(72px, 16vw, 120px); color: #f5e9cf; text-shadow: 5px 5px 0 #000; }
.nf-msg { margin: 0; font-size: 26px; color: var(--rs-yellow); }
.nf-sub { margin: 0; max-width: 40ch; color: var(--rs-body); }
.nf-chat { list-style: none; width: 100%; margin: 6px 0 4px; padding: 10px 12px; text-align: left; background: rgba(15, 12, 8, .88); border: 1px solid var(--panel-edge); font: 16px var(--font-rs); text-shadow: 1px 1px 0 #000; display: grid; gap: 4px; overflow-wrap: anywhere; }
.nf-chat .w { color: var(--rs-white); } .nf-chat .c { color: var(--rs-cyan); } .nf-chat .y { color: var(--rs-yellow); }
.nf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
@media (max-width: 600px) { .nf-menu { right: -6%; font-size: 15px; } }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .icon-btn.menu-btn { display: grid; }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    flex-direction: column;
    gap: 2px;
    padding: 8px 16px 14px;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    background: linear-gradient(180deg, #1d1812, #15110c);
    border-bottom: 2px solid var(--panel-edge);
    box-shadow: 0 16px 30px rgba(0, 0, 0, .45);
  }
  .topbar.is-menu-open .nav { display: flex; }
  .nav > a, .nav-trigger { width: 100%; padding: 10px 8px; font-size: 18px; justify-content: space-between; }
  .nav-menu { position: static; min-width: 0; margin: 2px 0 6px; box-shadow: inset 0 0 0 1px #7a6a52; }
  .nav-menu::before { display: none; }
  .hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .game { max-width: 460px; width: 100%; justify-self: center; }
  .ticker { grid-template-columns: repeat(3, 1fr); }
  .ticker > div:nth-child(3) { border-right: 0; }
  .ticker > div:nth-child(-n + 3) { border-bottom: 1px solid rgba(0, 0, 0, .6); }
  .rules { grid-template-columns: repeat(2, 1fr); }
  .hiscores-grid, .drops-grid, .quest-grid, .xp-grid { grid-template-columns: 1fr; }
  .xp-loop { grid-template-columns: repeat(2, 1fr); }
  .calc { grid-template-columns: 1fr; }
  .calc-out { grid-template-columns: repeat(2, 1fr); }
  .drop-steps { grid-template-columns: 1fr; }
  .doc-layout { grid-template-columns: 1fr; gap: 24px; }
  .toc { position: static; }
  .glance { grid-template-columns: repeat(3, 1fr); }
  .glance > div:nth-child(3) { border-right: 0; }
  .glance > div:nth-child(-n + 3) { border-bottom: 1px solid rgba(0, 0, 0, .6); }
  .sim-form { grid-template-columns: repeat(2, 1fr); }
  .evidence { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .hero { padding-top: 32px; }
  .brand .rs-title { font-size: 22px; }
  .topbar-actions .rs-btn { padding: 4px 10px; }
  .topbar-actions > .rs-btn { display: none; } /* Buy lives in the hero on phones; keep room for Connect */
  .wallet-btn { padding: 0 10px; }
  .wallet-btn .wallet-btn-label { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-prefix { display: none; }
  .ticker { grid-template-columns: repeat(2, 1fr); margin-top: 32px; }
  .ticker > div { border-right: 0 !important; border-bottom: 1px solid rgba(0, 0, 0, .6); }
  .ticker > div:nth-child(odd) { border-right: 1px solid rgba(0, 0, 0, .6) !important; }
  .rules { grid-template-columns: 1fr; }
  .section { padding-top: 64px; }
  .section-head { align-items: flex-start; }
  .hide-sm { display: none; }
  td, th { padding: 8px; }
  .lookup { flex-direction: column; }
  .player-stats { grid-template-columns: repeat(2, 1fr); }
  .scroll::before, .scroll::after { left: -6px; right: -6px; }
  .journal { padding: 22px 18px 22px 40px; }
  .game-stage { height: 260px; }
  .glance { grid-template-columns: repeat(2, 1fr); }
  .glance > div { border-right: 0 !important; border-bottom: 1px solid rgba(0, 0, 0, .6); }
  .glance > div:nth-child(odd) { border-right: 1px solid rgba(0, 0, 0, .6) !important; }
  .sim-form, .sim-stats { grid-template-columns: 1fr; }
  .evidence { grid-template-columns: 1fr; }
  .flow::before { left: 25px; }
  .flow-step { grid-template-columns: 52px 1fr; gap: 10px; padding-right: 12px; }
  .flow-step > img { width: 38px; height: 38px; margin-left: 6px; }
  .faq details p { padding-left: 16px; }
  .formula { font-size: 17px; }
  .f-main { font-size: 19px; }
  .inventory { grid-template-columns: repeat(4, 30px); grid-auto-rows: 30px; gap: 3px; padding: 8px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}