/* bungeemc.com: the written book, read on a lectern. One unit (--px) is one screen pixel of the game's GUI. */
@font-face { font-family: "Monocraft"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/monocraft.woff2) format("woff2"); }
@font-face { font-family: "Zilla Slab"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/zilla-slab-400.woff2) format("woff2"); }
@font-face { font-family: "Zilla Slab"; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/zilla-slab-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Zilla Slab"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/zilla-slab-600.woff2) format("woff2"); }
@font-face { font-family: "Zilla Slab"; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/zilla-slab-700.woff2) format("woff2"); }

:root {
  --px: 4px;
  --ground: #15161c; --grain: #1b1c24;
  --page: #e6d7b4; --edge: #c8b687; --rule: #cdbd93;
  --ink: #1e1a14; --ink-2: #5c4f36;
  --stone: #6f6f6f; --stone-hi: #dcdcdc; --stone-lo: #3a3a3a; --stone-hover: #5b6c9e; --label-hover: #ffffa0;
  --tip: #100010; --tip-a: #5000ff; --tip-b: #28007f;
  --sel: #3c7fff; --white: #fff; --mist: #a6a6ad;
  --pixel: "Monocraft", ui-monospace, monospace;
  --book: "Zilla Slab", Georgia, serif;
  color-scheme: dark;
}
@media (max-width: 760px) { :root { --px: 3px; } }

* { box-sizing: border-box; }
html { background: var(--ground); scrollbar-color: var(--stone) #0f1013; }
body {
  margin: 0; min-height: 100svh; color: var(--ink);
  font-family: var(--book); font-size: 17px; line-height: 1.55;
  background-color: var(--ground);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect x='1' y='2' width='1' height='1' fill='%231b1c24'/%3E%3Crect x='9' y='5' width='1' height='1' fill='%231a1b22'/%3E%3Crect x='13' y='11' width='1' height='1' fill='%231b1c24'/%3E%3Crect x='4' y='9' width='1' height='1' fill='%23111218'/%3E%3Crect x='6' y='14' width='1' height='1' fill='%231a1b22'/%3E%3Crect x='14' y='1' width='1' height='1' fill='%23111218'/%3E%3Crect x='11' y='7' width='1' height='1' fill='%23101117'/%3E%3C/svg%3E");
  background-size: calc(var(--px) * 16) calc(var(--px) * 16);
  image-rendering: pixelated;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--sel); color: var(--white); }
.pixel { font-family: var(--pixel); font-weight: 400; letter-spacing: 0; text-shadow: .125em .125em 0 rgba(0, 0, 0, .55); }
:focus-visible { outline: calc(var(--px) / 2) solid var(--white); outline-offset: calc(var(--px) / 2); }

/* masthead: the item in hand and the way to each page */
.head {
  width: min(700px, 100% - 20px); margin: 0 auto; padding: calc(var(--px) * 5) 0 calc(var(--px) * 4);
  display: flex; align-items: center; gap: calc(var(--px) * 3); flex-wrap: wrap; color: var(--white);
}
.head .brand { display: flex; align-items: center; gap: calc(var(--px) * 2); color: var(--white); text-decoration: none; font-size: 24px; }
.head .brand svg { width: calc(var(--px) * 8); height: calc(var(--px) * 8); image-rendering: pixelated; }
.head nav { margin-left: auto; display: flex; gap: calc(var(--px) * 4); font-size: 16px; }
.head nav a { color: var(--mist); text-decoration: none; }
.head nav a:hover { color: var(--label-hover); }

/* the book: one sheet per page, stacked down the lectern */
.book { width: min(700px, 100% - 20px); margin: 0 auto; display: grid; gap: calc(var(--px) * 6); padding-bottom: calc(var(--px) * 8); }
.page {
  position: relative; background: var(--page); border: var(--px) solid var(--edge); color: var(--ink);
  padding: calc(var(--px) * 7) calc(var(--px) * 10) calc(var(--px) * 15);
  clip-path: polygon(
    calc(var(--px) * 2) 0, calc(100% - var(--px) * 2) 0, calc(100% - var(--px) * 2) var(--px), calc(100% - var(--px)) var(--px),
    calc(100% - var(--px)) calc(var(--px) * 2), 100% calc(var(--px) * 2), 100% calc(100% - var(--px) * 2), calc(100% - var(--px)) calc(100% - var(--px) * 2),
    calc(100% - var(--px)) calc(100% - var(--px)), calc(100% - var(--px) * 2) calc(100% - var(--px)), calc(100% - var(--px) * 2) 100%, calc(var(--px) * 2) 100%,
    calc(var(--px) * 2) calc(100% - var(--px)), var(--px) calc(100% - var(--px)), var(--px) calc(100% - var(--px) * 2), 0 calc(100% - var(--px) * 2),
    0 calc(var(--px) * 2), var(--px) calc(var(--px) * 2), var(--px) var(--px), calc(var(--px) * 2) var(--px));
}
.page > * { max-width: 62ch; }
.count { position: absolute; top: calc(var(--px) * 4); right: calc(var(--px) * 6); font-family: var(--pixel); font-size: 16px; color: var(--ink-2); max-width: none; }
.page h2 { font-size: 28px; line-height: 1.15; font-weight: 700; margin: calc(var(--px) * 2) 0 calc(var(--px) * 4); letter-spacing: -.01em; }
.page p { margin: 0 0 1em; }
.page a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-2); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.page a:hover { text-decoration-color: var(--ink); }
.aside { color: var(--ink-2); }
.aside strong { color: var(--ink); font-weight: 600; }

/* title page */
.title { text-align: center; padding-top: calc(var(--px) * 12); }
.title > * { margin-left: auto; margin-right: auto; }
.title h1 { font-family: var(--pixel); font-weight: 400; font-size: 48px; line-height: 1; margin: 0 0 calc(var(--px) * 3); color: var(--ink); }
.title .by { font-family: var(--pixel); font-size: 16px; color: var(--ink-2); margin: 0 0 calc(var(--px) * 12); text-align: center; }
.title p { text-align: left; }
.title .intro { margin-top: calc(var(--px) * 13); }

/* the stone button, and the address as one */
.btn {
  font-family: var(--pixel); font-size: 16px; color: var(--white); text-shadow: .125em .125em 0 rgba(0, 0, 0, .55);
  background: var(--stone); border: 0; cursor: pointer; padding: calc(var(--px) * 2) calc(var(--px) * 5);
  box-shadow: inset calc(var(--px) / 2) calc(var(--px) / 2) 0 var(--stone-hi), inset calc(var(--px) / -2) calc(var(--px) / -2) 0 var(--stone-lo), 0 0 0 calc(var(--px) / 2) #000;
  line-height: 1.5; display: inline-block; text-decoration: none;
}
.btn:hover, .btn:focus-visible { background: var(--stone-hover); color: var(--label-hover); }
.btn:active { box-shadow: inset calc(var(--px) / 2) calc(var(--px) / 2) 0 var(--stone-lo), inset calc(var(--px) / -2) calc(var(--px) / -2) 0 var(--stone-hi), 0 0 0 calc(var(--px) / 2) #000; }
.address { position: relative; display: inline-block; margin: 0 auto; }
.address .btn { font-size: 32px; padding: calc(var(--px) * 3) calc(var(--px) * 7); }
.address .hint { display: block; font-family: var(--pixel); font-size: 16px; color: var(--ink-2); margin-top: calc(var(--px) * 3); text-align: center; }
/* the item tooltip, rising when the address is copied */
.tip {
  position: absolute; left: 50%; top: calc(100% + var(--px)); transform: translate(-50%, calc(var(--px) * 2));
  background: var(--tip); color: var(--white); font-family: var(--pixel); font-size: 16px; white-space: nowrap;
  padding: calc(var(--px) * 1.5) calc(var(--px) * 2.5);
  box-shadow: inset 0 0 0 calc(var(--px) / 2) var(--tip-a), inset 0 0 0 var(--px) var(--tip), 0 0 0 calc(var(--px) / 2) var(--tip);
  border: calc(var(--px) / 2) solid var(--tip-b);
  opacity: 0; visibility: hidden; transition: opacity .16s ease-out, transform .16s cubic-bezier(.2, .9, .3, 1), visibility 0s .16s; pointer-events: none;
}
.tip.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }

/* contents and page arrows */
.toc { list-style: none; padding: 0; margin: calc(var(--px) * 2) 0 0; text-align: left; }
.toc li { display: flex; align-items: baseline; gap: calc(var(--px) * 2); border-bottom: 2px dotted var(--rule); padding: calc(var(--px) * 1.5) 0; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.toc .n { margin-left: auto; font-family: var(--pixel); font-size: 16px; color: var(--ink-2); }
.turn { position: absolute; bottom: calc(var(--px) * 3); display: flex; align-items: center; gap: calc(var(--px) * 2); font-family: var(--pixel); font-size: 16px; color: var(--ink-2); text-decoration: none; padding: calc(var(--px) * 1) calc(var(--px) * 2); max-width: none; }
.turn.prev { left: calc(var(--px) * 4); }
.turn.next { right: calc(var(--px) * 4); }
.turn svg { width: calc(var(--px) * 9); height: calc(var(--px) * 5); image-rendering: pixelated; fill: var(--ink-2); }
.turn:hover { color: var(--ink); }
.turn:hover svg { fill: var(--ink); }

/* the address table: one size, rank carried by weight */
.addr { display: grid; grid-template-columns: max-content 1fr; gap: 0 calc(var(--px) * 6); margin: 0 0 calc(var(--px) * 5); border-top: 2px solid var(--rule); border-bottom: 2px solid var(--rule); }
.addr div { display: contents; }
.addr dt, .addr dd { margin: 0; padding: calc(var(--px) * 2) 0; }
.addr dt { color: var(--ink-2); }
.addr dd { font-weight: 700; }
.addr div + div dt, .addr div + div dd { border-top: 2px dotted var(--rule); }
.addr code { font-family: var(--pixel); font-size: 16px; font-weight: 400; }

/* steps */
.steps { list-style: none; padding: 0; margin: 0 0 1em; counter-reset: step; }
.steps li { position: relative; padding-left: calc(var(--px) * 9); margin: 0 0 calc(var(--px) * 2.5); counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: .1em; font-family: var(--pixel); font-size: 16px; color: var(--ink-2); }
.steps code, .page code { font-family: var(--pixel); font-size: .94em; }

/* the ground footer: who runs it, and the line Mojang asks for */
.foot { width: min(700px, 100% - 20px); margin: 0 auto; padding: calc(var(--px) * 2) 0 calc(var(--px) * 10); color: var(--mist); font-family: var(--pixel); font-size: 16px; line-height: 1.6; }
.foot p { margin: 0 0 .5em; }
.foot a { color: var(--mist); }
.foot a:hover { color: var(--label-hover); }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .page { padding: calc(var(--px) * 8) calc(var(--px) * 5) calc(var(--px) * 15); }
  .title { padding-top: calc(var(--px) * 16); }
  .page h2 { font-size: 24px; }
  .title h1 { font-size: 40px; }
  .address .btn { font-size: 24px; padding: calc(var(--px) * 3) calc(var(--px) * 5); }
  .count { right: calc(var(--px) * 5); }
  .head nav { margin-left: 0; width: 100%; gap: calc(var(--px) * 5); }
  .addr { grid-template-columns: 1fr; gap: 0; }
  .addr dt { padding-bottom: 0; }
  .addr dd { padding-top: calc(var(--px) * .5); }
  .addr div + div dd { border-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tip { transition: none; transform: translate(-50%, 0); }
}