/* The Gold Below wiki: the page (top bar, side menu, article, foot) in the game's own soot, bronze and gold, its
   pixel faces for names and labels and Barlow for reading. The frames are the game's fittings, stretched
   (wiki/img/ui, cut by src/build_wiki_assets.py); wiki/colors.css brings its colours. Parts: wiki-parts.css. */
@font-face { font-family: 'Gold Below Display'; src: url(/fonts/goldbelow-display.woff2) format('woff2'); font-display: block; }
@font-face { font-family: 'Gold Below Body'; src: url(/fonts/goldbelow-body.woff2) format('woff2'); font-display: block; }
@font-face { font-family: 'Barlow'; src: url(/fonts/barlow-regular.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url(/fonts/barlow-condensed-semibold.woff2) format('woff2'); font-weight: 600; font-display: swap; }
:root { --void: #0a0806; --slot: #100d0a; --slot-line: #54432f; --body: #1c1611; --panel: #2a2119; --panel-hi: #372c22; --line: #6e5638; --line-hi: #8f7350; --brass: #b8863a;
  --text: #e0d3bb; --dim: #c2b196; --off: #9a8a73; --hi: #fbf5ea; --gold: #f7b93e; --gold-hi: #ffd873; --ink: #1d1004;
  --pix: 'Gold Below Body', ui-monospace, monospace; --disp: 'Gold Below Display', 'Barlow Condensed', sans-serif; --cond: 'Barlow Condensed', 'Barlow', sans-serif; --bar: 60px; color-scheme: dark; }
* { box-sizing: border-box; }
html { background: var(--void); scroll-padding-top: calc(var(--bar) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; color: var(--text); font: 17px/1.6 Barlow, system-ui, sans-serif; overflow-wrap: break-word;
  background: linear-gradient(180deg, rgba(10, 8, 6, .86), var(--void) 460px), url(/img/bg-hoard.png) center -180px / 1296px auto no-repeat, var(--void); image-rendering: pixelated; }
img { image-rendering: pixelated; max-width: 100%; height: auto; }
/* the game's pixels are never squeezed: a picture keeps its whole-number size and its box makes room */
.sheet img, .banner img, .search-out img { max-width: none; flex: none; }
a { color: var(--gold-hi); text-decoration-color: rgba(255, 216, 115, .4); text-underline-offset: 3px; }
a:hover { color: var(--hi); text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 3px; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 30; padding: 10px 14px; background: var(--gold); color: var(--ink); font: 600 18px var(--cond); }
.skip:focus { left: 8px; }

/* ---- top bar: home, search, play, menu */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; min-height: var(--bar); padding: 8px max(16px, calc((100vw - 1280px) / 2 + 16px));
  background: #140e08; box-shadow: inset 0 -2px 0 var(--line), inset 0 -4px 0 #000, 0 6px 18px rgba(0, 0, 0, .5); }
.top-home { display: flex; align-items: center; gap: 10px; color: var(--gold-hi); text-decoration: none; font: 20px/1 var(--disp); text-shadow: 0 2px 0 #3a1f06; white-space: nowrap; }
.top-home b { font-weight: 400; color: var(--hi); }
.top-home img { width: 36px; height: 36px; border-radius: 8px; }
.search { position: relative; flex: 1 1 auto; max-width: 560px; margin-left: auto; }
.search input { width: 100%; height: 44px; padding: 0 14px; border: 2px solid var(--slot-line); border-radius: 0; background: var(--slot); color: var(--hi); font: 20px/1 var(--pix);
  box-shadow: inset 0 3px 0 #000; -webkit-appearance: none; appearance: none; }
.search input::placeholder { color: var(--off); }
.search input:focus { outline: none; border-color: var(--gold); }
.search-out { position: absolute; left: 0; right: 0; top: 50px; max-height: min(70vh, 520px); overflow: auto; background: var(--body); border: 2px solid var(--line); box-shadow: 0 18px 40px rgba(0, 0, 0, .7); }
.search-out a { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; min-height: 48px; padding: 4px 12px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--slot-line); }
.search-out a:hover, .search-out a.on { background: var(--panel-hi); color: var(--hi); }
.search-out img { max-width: 40px; max-height: 40px; width: auto; justify-self: center; object-fit: contain; }
.search-out b { font: 600 18px/1.15 var(--cond); display: block; }
.search-out small { font-size: 14px; color: var(--dim); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-out span { font: 600 14px var(--cond); color: var(--off); }
.search-out p { margin: 0; padding: 14px; color: var(--dim); }
.ingot, .btn { position: relative; z-index: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 4px 26px 12px; color: var(--ink); text-decoration: none; font: 20px/1 var(--pix); white-space: nowrap; }
.ingot::before { content: ''; position: absolute; inset: 0; z-index: -1; border-style: solid; border-width: 14px 32px 32px; border-image: url(/wiki/img/ui/ingot.png) 7 16 16 16 fill stretch; image-rendering: pixelated; }
.ingot:hover { color: var(--ink); filter: brightness(1.1); }
.ingot:active { transform: translateY(2px); }
.menu-box { position: absolute; opacity: 0; width: 1px; height: 1px; }
.menu-btn { display: none; }

/* ---- the frame: side menu and the article */
.frame { display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 28px; align-items: start; max-width: 1280px; margin: 0 auto; padding: 24px 16px 0; }
.side { position: sticky; top: calc(var(--bar) + 20px); display: grid; gap: 14px; max-height: calc(100vh - var(--bar) - 32px); overflow: auto; scrollbar-width: thin; }
.side-box { padding: 6px 12px 10px; border: 6px solid transparent; border-image: url(/wiki/img/ui/shelf.png) 3 fill / 6px stretch; }
.side-box h2 { margin: 0 0 6px; padding-bottom: 6px; font: 20px/1 var(--pix); color: var(--gold); border-bottom: 2px solid var(--line); box-shadow: 0 2px 0 var(--void); }
.side-box ul { list-style: none; margin: 0; padding: 0; }
.side-box a { display: block; padding: 5px 0; min-height: 32px; color: var(--dim); text-decoration: none; font-size: 16px; line-height: 1.35; }
.side-box a:hover { color: var(--gold-hi); }
.side-box a[aria-current] { color: var(--hi); box-shadow: inset 4px 0 0 var(--gold); margin-left: -12px; padding-left: 12px; }
.side-play p { margin: 0 0 8px; font-size: 15px; color: var(--dim); }
.stores { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.stores img { display: block; height: 40px; width: auto; image-rendering: auto; }
.sheet { min-width: 0; max-width: 960px; padding: 4px 14px 14px; border: 20px solid transparent; border-image: url(/wiki/img/ui/card.png) 10 11 11 10 fill / 20px 22px 22px 20px stretch; }
.sheet.wide { max-width: none; border: 0; padding: 0; }
.sheet::after { content: ''; display: block; clear: both; }

/* ---- reading */
h1, h2, h3, h4 { font-weight: 400; line-height: 1.2; margin: 0; }
h1 { font: 40px/1.1 var(--disp); color: var(--gold-hi); text-shadow: 0 3px 0 #3a1f06; margin: 2px 0 14px; }
h2 { font: 20px/1.3 var(--disp); color: var(--gold); text-shadow: 0 2px 0 #3a1f06; margin: 34px 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--line); box-shadow: 0 2px 0 var(--void); clear: left; }
h3 { font: 20px/1.3 var(--pix); color: var(--hi); margin: 24px 0 8px; }
h4 { font: 600 18px var(--cond); color: var(--dim); margin: 18px 0 6px; }
h2 a, h3 a { color: inherit; text-decoration: none; }
h2 a:hover, h3 a:hover { color: var(--hi); }
h2 small { font: 600 16px var(--cond); color: var(--off); text-shadow: none; }
p, ul, ol { margin: 0 0 14px; }
p, li { max-width: 74ch; }
ul, ol { padding-left: 22px; }
li { margin-bottom: 5px; }
li::marker { color: var(--line-hi); }
strong { color: var(--hi); font-weight: 400; text-shadow: .5px 0 0 currentColor; }
small { font-size: 14px; color: var(--dim); }
.lede { font-size: 20px; line-height: 1.45; color: var(--hi); max-width: 60ch; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 2px 6px; list-style: none; margin: 0 0 6px; padding: 0; font-size: 14px; color: var(--off); }
.crumbs li { margin: 0; display: flex; align-items: center; }
.crumbs li + li::before { content: '>'; margin-right: 6px; color: var(--line-hi); font-family: var(--pix); }
.crumbs a { color: var(--dim); text-decoration: none; padding: 6px 0; display: inline-block; }
.crumbs a:hover { color: var(--gold-hi); }
.toc { display: inline-block; min-width: 240px; margin: 4px 0 8px; padding: 10px 16px; background: var(--slot); border: 2px solid var(--slot-line); box-shadow: inset 0 3px 0 #000; }
.toc h2 { margin: 0 0 6px; padding: 0; border: 0; box-shadow: none; font: 20px/1.2 var(--pix); color: var(--dim); text-shadow: none; }
.toc ol { margin: 0; padding-left: 26px; }
.toc li { margin: 0; }
.toc a { display: inline-block; padding: 4px 0; text-decoration: none; }
.stamp { clear: both; margin: 40px 0 0; padding-top: 12px; border-top: 2px solid var(--slot-line); font-size: 14px; color: var(--off); max-width: none; }
.tip { padding: 10px 14px; background: var(--slot); box-shadow: inset 4px 0 0 var(--gold); }

.play-foot { clear: both; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 36px 0 0; padding: 14px 16px; background: var(--slot); box-shadow: inset 0 0 0 2px var(--slot-line), inset 4px 0 0 var(--gold); }
.play-foot p { margin: 0; flex: 1 1 240px; }
.play-foot strong { display: block; font: 20px/1.3 var(--pix); color: var(--gold-hi); text-shadow: none; }
.play-foot + .stamp { margin-top: 16px; }

/* ---- foot */
.foot { display: grid; justify-items: center; gap: 12px; padding: 56px 24px 40px; text-align: center; }
.foot img { width: 72px; opacity: .85; }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; }
.foot nav a { font: 20px/1.4 var(--pix); color: var(--dim); text-decoration: none; padding: 8px 0; }
.foot nav a:hover { color: var(--gold-hi); }
.foot p { font-size: 14px; color: var(--off); margin: 0; max-width: 70ch; }
.foot .marks { font-size: 12px; }

/* ---- phones and narrow windows: the menu folds behind its button, the search takes its own row */
@media (max-width: 899px) {
  :root { --bar: 60px; }
  body { font-size: 16.5px; background-size: 100% 460px, 864px auto, auto; background-position: 0 0, center -120px, 0 0; }
  .top { gap: 8px; padding: 8px 10px; }
  .top-home span { display: none; }
  .search { max-width: none; margin: 0; }
  .search input { padding: 0 10px; }
  .search-out { position: fixed; left: 8px; right: 8px; top: 58px; }
  .top .ingot { display: none; }
  .menu-btn { -webkit-tap-highlight-color: transparent; display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 0; min-height: 44px; min-width: 76px; padding: 0 16px; color: var(--hi); font: 20px/1 var(--pix); cursor: pointer; }
  .menu-btn::before { content: ''; position: absolute; inset: 0; z-index: -1; border-style: solid; border-width: 20px 20px 22px; border-image: url(/wiki/img/ui/plate.png) 10 10 11 10 fill stretch; image-rendering: pixelated; }
  .menu-box:focus-visible + .menu-btn { outline: 3px solid var(--gold-hi); outline-offset: 3px; }
  .menu-box:checked + .menu-btn::before { border-image-source: url(/wiki/img/ui/gilt.png); }
  .frame { display: block; padding: 12px 10px 0; }
  .side { display: none; position: static; max-height: none; margin-bottom: 14px; grid-template-columns: 1fr 1fr; }
  body:has(.menu-box:checked) .side { display: grid; }
  .side-play { grid-column: 1 / -1; }
  .side-box a { min-height: 40px; padding: 9px 0; }
  .sheet { padding: 0 2px 6px; border-width: 16px 12px 18px; border-image-width: 20px 22px 22px 20px; }
  .sheet.wide { padding: 0; }
  h1 { font-size: 40px; }
  .lede { font-size: 18px; }
  .toc { display: block; }
}
@media (max-width: 420px) { h1 { font-size: 30px; line-height: 1.2; } .k-hero h1, .k-set h1 { font-size: 40px; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media print { .top, .side, .foot, .stamp { display: none; } .frame { display: block; } body { background: #fff; color: #000; } }