/* platcrypto.com, the PLAT Wiki.
   Colours and measurements copied from the Old School RuneScape Wiki's own
   stylesheets (MediaWiki:Common.css, MediaWiki:Vector.css, the wgl.theme
   modules). Light = the wiki's default parchment. Dark = the wiki's
   "Browntown" theme. The live-stat panels imitate the in-game interface. */

:root {
  --ground: #c0a886;
  --main: #e2dbc8;
  --light: #d8ccb4;
  --mid: #d0bd97;
  --dark: #b8a282;
  --border: #94866d;
  --sidebar: #cfc08d;
  --text: #000;
  --byline: #4c4c4c;
  --subtle: #777;
  --bg-text: #444;
  --bg-link: #52351e;
  --link: #936039;
  --redlink: #ba0000;
  --search: #efeee6;
  --button: #605443;
  --button-border: #3c352a;
  --button-text: #fff;
  --code: #ddd4bb;
  --alt: #d1c6a6;
  --tile: #f9f3eb;
  --tile-border: #cabe9b;
  --tab-bg: transparent;
  --tab-hover: #d0bd97;
  --shadow-raised: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
  --font-body: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-head: 'PT Serif', Palatino, Georgia, serif;
  --font-pixel: 'Pixelify Sans', 'Silkscreen', 'Courier New', monospace;
  /* in-game interface colours */
  --rs-panel: #1c1712;
  --rs-panel-edge: #3a2f24;
  --rs-panel-inner: #4a3d2f;
  --rs-tile: #2b2620;
  --rs-tile-gap: #110e0b;
  --rs-yellow: #ffff00;
  --rs-orange: #ff981f;
  --rs-white: #ffffff;
  --rs-green: #00ff80;
  --rs-red: #ff3b3b;
  --rs-label: #cdc4b2;
  --rs-muted: #9e9484;
  --rs-dim: #6f6659;
  --chart-bg: #e2dbc8;
  --chart-line: #2e8b3d;
  --chart-grid: #b8a282;
  --chart-text: #5a3a22;
  color-scheme: light;
}

html.theme-dark {
  --ground: #1b1612;
  --main: #28221d;
  --light: #3e362f;
  --mid: #312a25;
  --dark: #312a25;
  --border: #736559;
  --sidebar: #736559;
  --text: #f4eaea;
  --byline: #a4a1a1;
  --subtle: #a4a1a1;
  --bg-text: #d9cfc4;
  --bg-link: #e0c9ad;
  --link: #b79d7e;
  --redlink: #f26d60;
  --search: #3e362f;
  --button: #7c6658;
  --button-border: #3a2f24;
  --code: #312a25;
  --alt: #332b25;
  --tile: #3e362f;
  --tile-border: #736559;
  --tab-bg: #312a25;
  --tab-hover: #3d342e;
  color-scheme: dark;
}

/* ---------- page frame (Vector legacy) ---------- */
* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0) 375px) no-repeat, var(--ground);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
#page {
  display: grid;
  grid-template-columns: 11em minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
#mw-panel { grid-column: 1; grid-row: 1 / span 3; padding: 2.5em 0 1em 0.5em; }
#mw-head { grid-column: 2; grid-row: 1; }
#content { grid-column: 2; grid-row: 2; }
#footer { grid-column: 2; grid-row: 3; }

/* logo box */
#p-logo { width: 10em; height: 160px; margin: -1.5em 0 1em; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.25)); }
#p-logo a { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-decoration: none; color: var(--bg-link); }
#p-logo img { width: 118px; height: auto; }
.logo-word { font-family: var(--font-pixel); font-size: 30px; line-height: 1; color: var(--rs-yellow); text-shadow: 2px 2px 0 #000; letter-spacing: 1px; margin-top: 4px; }
.logo-word small { font-size: 15px; color: var(--rs-orange); margin-left: 3px; text-shadow: 1px 1px 0 #000; }

/* portals */
.portal { margin: 0 0.6em 0 0.7em; padding: 0.25em 0; }
.portal h3 { font-size: 0.75em; color: var(--bg-text); font-weight: normal; margin: 0.5em 0 0 0.66em; padding: 0.25em 0; cursor: default; border: 0; text-transform: none; }
.portal ul { list-style: none; margin: 0 0 0 1.25em; padding: 0.3em 0 0; border-top: 1px solid var(--dark); }
.portal li { line-height: 1.125em; margin: 0; padding: 0.25em 0; font-size: 0.75em; }
.portal li a { color: var(--bg-link); text-decoration: none; }
.portal li a:hover { text-decoration: underline; }
.portal li.muted { color: var(--subtle); }

/* head: tabs + search */
#mw-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 0.5em 1em; padding: 2.5em 1.5em 0 0; min-height: 5em; }
.tabs { display: flex; list-style: none; margin: 0; padding: 0; }
.tabs li { margin: 0; padding: 0; background: var(--tab-bg); }
.tabs li a { display: block; padding: 1.15em 0.75em 0.5em; font-size: 0.8125em; color: var(--bg-link); text-decoration: none; border-right: 1px solid rgba(0, 0, 0, 0.12); }
.tabs li a:hover { background: var(--tab-hover); }
.tabs li.selected a { background: var(--main); color: var(--text); }
.tabs li.theme a { color: var(--bg-link); }
#right-navigation { display: flex; align-items: flex-end; gap: 1em; }
#searchform { display: flex; margin: 0 0 0.35em; }
#searchform input { width: 20em; max-width: 60vw; height: 40px; padding: 0 0.6em; border: 1px solid var(--border); border-right: 0; background: var(--search); color: var(--text); font: 0.85em var(--font-body); box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.08); }
#searchform button { height: 40px; padding: 0 0.9em; border: 1px solid var(--button-border); background: var(--button); color: var(--button-text); font: 600 0.8em var(--font-body); cursor: pointer; }

/* content box */
#content {
  background: var(--main);
  padding: 1.25em 1.5em 1.5em;
  font-size: 0.9em;
  line-height: 1.6;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.15);
  min-width: 0;
}
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--text); }
h1.firstHeading { font-size: 1.8em; font-weight: bold; margin: 0 0 0.25em; padding-bottom: 0.15em; border-bottom: 1px solid var(--sidebar); line-height: 1.3; }
#siteSub { font-size: 0.92em; color: var(--byline); margin-bottom: 1em; }
h2 { font-size: 1.5em; font-weight: normal; margin: 1.2em 0 0.4em; padding-bottom: 0.17em; border-bottom: 1px solid var(--sidebar); clear: both; }
h3 { font-size: 1.2em; font-weight: bold; margin: 1em 0 0.3em; }
p { margin: 0.5em 0; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
b { font-weight: 700; }
.hatnote { font-style: italic; padding-left: 1.6em; margin-bottom: 0.5em; color: var(--byline); }
code.mint { font-family: 'Courier New', monospace; font-size: 0.92em; background: var(--code); border: 1px solid var(--border); border-radius: 2px; padding: 1px 4px; word-break: break-all; }
sup.reference { font-size: 0.75em; line-height: 1; vertical-align: super; }
sup.reference a { color: var(--link); }
hr { border: 0; border-top: 1px solid var(--sidebar); }

/* infobox */
.infobox { float: right; clear: right; width: 300px; max-width: 100%; margin: 0 0 1em 1em; background: var(--light); border: 1px solid var(--border); border-collapse: collapse; font-size: 0.85em; line-height: 1.4; box-shadow: var(--shadow-raised); }
.infobox caption { background: var(--dark); font-weight: bold; font-size: 1.15em; padding: 0.35em 0.5em; border: 1px solid var(--border); border-bottom: 0; }
.infobox th { background: var(--dark); text-align: left; padding: 0.3em 0.5em; width: 38%; vertical-align: top; border-top: 1px solid var(--main); }
.infobox td { padding: 0.3em 0.5em; vertical-align: top; border-top: 1px solid var(--main); }
.infobox-image { text-align: center; padding: 0.6em 0.5em 0.4em; }
.infobox-image img { max-width: 220px; height: auto; }
.infobox-caption { font-size: 0.92em; color: var(--byline); margin-top: 0.3em; }
.ca-cell code.mint { display: inline-block; margin-top: 0.15em; }

/* toc */
.toc { display: inline-block; background: var(--light); border: 1px solid var(--border); padding: 0.5em 1.2em 0.5em 0.6em; margin: 1em 0; font-size: 0.95em; box-shadow: var(--shadow-raised); }
.toctitle { text-align: center; font-weight: bold; margin-bottom: 0.25em; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0.15em 0; }
.toc li a { color: var(--link); }
.tocnumber { color: var(--text); padding-right: 0.3em; }

/* wikitable */
.wikitable { background: var(--light); color: var(--text); border: 1px solid var(--border); border-collapse: collapse; margin: 1em 0; box-shadow: var(--shadow-raised); max-width: 100%; }
.wikitable th { background: var(--dark); border: 1px solid var(--border); padding: 0.35em 0.6em; text-align: center; vertical-align: middle; }
.wikitable td { border: 1px solid var(--border); padding: 0.35em 0.6em; vertical-align: top; }
.wikitable.mechanics th:first-child { text-align: left; width: 12%; }
.wikitable.mechanics td { width: 44%; }
.wikitable.conversion td:first-child, .wikitable.conversion td:nth-child(2) { font-family: var(--font-pixel); font-size: 1.15em; white-space: nowrap; }
.wikitable.history td:first-child { white-space: nowrap; font-weight: 600; }
.wikitable.history tr.history-plat td { background: var(--tile); }
.wikitable.prices td:nth-child(3), .wikitable.prices td:nth-child(4) { text-align: right; white-space: nowrap; font-family: var(--font-pixel); font-size: 1.1em; }
.wikitable.prices tr.max td { background: var(--alt); }
.wikitable.prices .pinned { font-size: 0.9em; color: var(--byline); }
.wikitable.prices .ge-loading td { text-align: center; color: var(--byline); }
.wikitable-wrap { overflow-x: auto; }
.ge-source { font-size: 0.85em; color: var(--byline); }

/* messagebox */
.messagebox { margin: 1em 0; padding: 0.7em 1em; border-left: 15px solid var(--button); background: var(--light); box-shadow: var(--shadow-raised); }
.messagebox.warning { border-left-color: var(--redlink); }
.ca-title { font-weight: 700; font-family: var(--font-head); font-size: 1.1em; margin-bottom: 0.3em; }
.ca-row { margin: 0.4em 0; }
.ca-label { display: block; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.04em; color: var(--byline); margin-bottom: 0.2em; }
.ca-row code.mint { font-size: 1em; }
.ca-buttons { margin: 0.5em 0 0.3em; }
.ca-warn { font-size: 0.9em; color: var(--byline); margin: 0.4em 0 0; }
.rs-button { display: inline-block; background: var(--button); color: var(--button-text); border: 1px solid var(--button-border); padding: 0.45em 0.9em; font: 600 0.95em var(--font-body); border-radius: 2px; text-decoration: none; margin: 0.25em 0.4em 0.25em 0; cursor: pointer; }
.rs-button:hover { text-decoration: none; filter: brightness(1.12); }

/* steps, trivia, references */
ol.steps li, ul.trivia li { margin: 0.45em 0; }
.references { font-size: 0.85em; column-count: 2; column-gap: 2em; }
.references li { margin: 0.25em 0; break-inside: avoid; }
.references a { word-break: break-all; }
.licence { font-size: 0.82em; color: var(--byline); margin-top: 2em; border-top: 1px solid var(--sidebar); padding-top: 0.8em; }

/* footer */
#footer { font-size: 0.75em; color: var(--bg-text); padding: 1em 1.5em 1.5em; }
#footer ul { list-style: none; margin: 0; padding: 0; }
#footer li { margin: 0.2em 0; }

/* ---------- in-game chat line and dialogue ---------- */
.rs-chat { font-family: var(--font-pixel); font-size: 22px; line-height: 1.25; color: var(--rs-yellow); text-shadow: 1px 1px 0 #000; background: #4a3f33; border: 2px solid #2a231b; box-shadow: inset 0 0 0 1px #5c4f40; padding: 10px 14px; margin: 0.8em 0; clear: none; }
.rs-chat .rs-name { color: var(--rs-white); margin-right: 6px; }
.rs-inline { font-family: var(--font-pixel); font-size: 1.05em; background: #e2dbc8; color: #000; border: 2px solid #3a2f24; padding: 1px 8px; white-space: nowrap; }

/* ---------- in-game interface panels ---------- */
.rs-panel { background: var(--rs-panel); border: 2px solid var(--rs-panel-edge); box-shadow: inset 0 0 0 1px var(--rs-panel-inner), 0 3px 8px rgba(0, 0, 0, 0.35); border-radius: 3px; padding: 12px; margin: 1em 0; color: var(--rs-yellow); clear: both; }
.rs-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding: 2px 4px 10px; }
.rs-panel-title { font-family: var(--font-pixel); font-size: 22px; color: var(--rs-orange); text-shadow: 1px 1px 0 #000; }
.rs-panel-note { font: 13px/1.4 var(--font-body); color: var(--rs-muted); }
.rs-hero { background: var(--rs-tile); border: 1px solid var(--rs-tile-gap); padding: 18px 22px 20px; margin-bottom: 3px; }
.rs-hero-label { font-family: var(--font-pixel); font-size: 22px; color: var(--rs-orange); text-shadow: 1px 1px 0 #000; }
.rs-hero-value { font-family: var(--font-pixel); font-size: 58px; line-height: 1.05; color: var(--rs-yellow); text-shadow: 3px 3px 0 #000; margin: 8px 0 6px; word-break: break-all; }
.rs-hero-value .rs-unit { font-size: 24px; text-shadow: 2px 2px 0 #000; margin-left: 6px; }
.rs-hero-sub { font: 15px/1.5 var(--font-body); color: var(--rs-label); }
.rs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 3px; background: var(--rs-tile-gap); border: 1px solid var(--rs-tile-gap); }
.rs-tile { background: var(--rs-tile); padding: 14px 16px 12px; min-height: 96px; }
.rs-k { font-family: var(--font-pixel); font-size: 16px; color: var(--rs-label); text-shadow: 1px 1px 0 #000; margin-bottom: 8px; }
.rs-v { font-family: var(--font-pixel); font-size: 31px; line-height: 1.1; color: var(--rs-yellow); text-shadow: 2px 2px 0 #000; word-break: break-word; }
.rs-v.long { font-size: 23px; }
.rs-delta { font-family: var(--font-pixel); font-size: 15px; margin-top: 6px; text-shadow: 1px 1px 0 #000; min-height: 1em; }
.rs-delta.up { color: var(--rs-green); }
.rs-delta.down { color: var(--rs-red); }
.rs-delta.flat { color: var(--rs-label); }
.rs-chart-wrap { background: var(--chart-bg); border: 2px solid var(--rs-panel-edge); margin-top: 10px; padding: 4px; }
.rs-chart-wrap[data-empty] { min-height: 90px; position: relative; }
.rs-chart-wrap[data-empty]::after { content: "Chart appears once there is trading history."; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 14px var(--font-body); color: var(--chart-text); }
.rs-chart-wrap[data-empty] canvas { visibility: hidden; }
.rs-chart { display: block; width: 100%; height: auto; }
.rs-source { font: 13px/1.5 var(--font-body); color: var(--rs-muted); margin-top: 10px; padding: 0 4px; }
/* states */
.rs-panel[data-state="pending"] .rs-hero-value, .rs-panel[data-state="pending"] .rs-v, .rs-panel[data-state="pending"] .rs-kv dd { color: var(--rs-dim); text-shadow: 1px 1px 0 #000; }
.rs-panel[data-state="pending"] .rs-panel-note { color: var(--rs-orange); font-family: var(--font-pixel); font-size: 16px; text-shadow: 1px 1px 0 #000; }
.rs-panel[data-state="error"] .rs-panel-note { color: var(--rs-red); }
.rs-panel[data-state="loading"] .rs-panel-note { color: var(--rs-label); }

/* holders panels */
.rs-holders-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 1em 0; }
.rs-holders-row .rs-panel { margin: 0; }
.rs-kv { display: grid; grid-template-columns: 1fr auto; gap: 9px 14px; align-items: center; margin: 0; padding: 6px 10px 4px; }
.rs-kv dt { font-family: var(--font-pixel); font-size: 18px; color: var(--rs-yellow); text-shadow: 1px 1px 0 #000; }
.rs-kv dd { margin: 0; font-family: var(--font-pixel); font-size: 18px; color: var(--rs-yellow); text-shadow: 1px 1px 0 #000; text-align: right; white-space: nowrap; }
.rs-kv dd[data-f="hHolders"], .rs-kv dd[data-f="hChange"] { color: var(--rs-green); }
.rs-panel[data-state="pending"] .rs-kv dd[data-f="hHolders"], .rs-panel[data-state="pending"] .rs-kv dd[data-f="hChange"] { color: var(--rs-dim); }
.rs-kv dd.rs-bar { grid-column: 1 / -1; height: 16px; background: #b7281e; border: 1px solid #000; box-shadow: inset 0 0 0 1px #3a1b16; margin: -2px 0 4px; padding: 0; }
.rs-kv dd.rs-bar.empty { background: var(--rs-dim); }
.rs-bar-buy { height: 100%; width: 0; background: #2fb34a; box-shadow: inset 0 0 0 1px #1a5f2a; transition: width 0.4s ease; }

/* stack colour demo */
.rs-stacks { display: flex; flex-wrap: wrap; gap: 10px; background: var(--rs-panel); border: 2px solid var(--rs-panel-edge); padding: 12px; margin: 0.8em 0; }
.rs-stack { position: relative; width: 132px; height: 92px; background: #3e3529; border: 2px solid #2a231b; box-shadow: inset 0 0 0 1px #4d4235; }
.rs-qty { position: absolute; top: 4px; left: 6px; font-family: var(--font-pixel); font-size: 20px; text-shadow: 1px 1px 0 #000; }
.rs-yellow { color: var(--rs-yellow); }
.rs-white { color: var(--rs-white); }
.rs-green { color: var(--rs-green); }
.rs-stack-cap { position: absolute; bottom: 4px; left: 6px; right: 6px; font: 12px/1.3 var(--font-body); color: var(--rs-label); }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  #page { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; }
  #mw-panel { grid-column: 1; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 0 1em; padding: 0.75em 1em 0.25em; }
  #p-logo { width: auto; height: auto; margin: 0 0.5em 0 0; filter: none; }
  #p-logo a { flex-direction: row; gap: 10px; }
  #p-logo img { width: 56px; }
  .logo-word { font-size: 24px; }
  .portal { margin: 0; }
  .portal h3 { display: none; }
  .portal ul { display: flex; flex-wrap: wrap; gap: 0.2em 0.9em; border: 0; margin: 0; padding: 0.3em 0; }
  .portal li { font-size: 0.8em; }
  #p-tools, #p-social { display: none; }
  #mw-head { grid-column: 1; grid-row: 2; padding: 0.5em 1em 0; min-height: 0; }
  #content { grid-column: 1; grid-row: 3; padding: 1em; }
  #footer { grid-column: 1; grid-row: 4; }
  #searchform input { width: 14em; }
}
@media (max-width: 700px) {
  .infobox { float: none; width: 100%; margin: 0 0 1em; }
  .wikitable { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
  .wikitable.conversion td:first-child, .wikitable.conversion td:nth-child(2) { font-size: 1em; }
  .rs-holders-row { grid-template-columns: 1fr; }
  .rs-hero-value { font-size: 42px; }
  .rs-grid { grid-template-columns: 1fr 1fr; }
  .rs-tile { padding: 12px; min-height: 84px; }
  .rs-v { font-size: 24px; }
  .rs-v.long { font-size: 19px; }
  .references { column-count: 1; }
  .tabs li a { padding: 0.8em 0.6em 0.5em; }
  #right-navigation { flex-wrap: wrap; }
  #searchform { width: 100%; }
  #searchform input { width: 100%; max-width: none; }
  .rs-chat { font-size: 18px; }
  .wikitable.mechanics th:first-child { width: auto; }
  .wikitable.mechanics td { width: auto; }
}