/* Shared by guide.noblesmp.net and status.noblesmp.net. Same tokens, fonts and Minecraft
   controls as the landing page (server-config/host/website/index.html). Bricolage Grotesque for
   the wordmark and headings, Albert Sans for the rest; pixel type only in server-list rows. */
@font-face { font-family: "Bricolage Grotesque"; src: url(fonts/bricolage-grotesque.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url(fonts/albert-sans.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url(fonts/pixelify-sans.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
:root {
  --sky: #7CA8FF; --sky-low: #B7D0FF; --sea: #3F76E4;
  --azure: #1B2F6E; --azure-deep: #121F4B; --ink: #141B33; --ink-soft: #4A556F;
  --or: #F5B82E; --or-deep: #A86A00; --or-pale: #FFE08A;
  --ground: #EFF4FB; --ground-2: #E1EAF6; --rule: #C5D2E6; --white: #FFFFFF;
  --slate: #10141F;
  --mc-green: #55FF55; --mc-red: #FF5555; --mc-yellow: #FFFF55; --mc-grey: #AAAAAA;
  --display: "Bricolage Grotesque", "Albert Sans", "Segoe UI", system-ui, sans-serif;
  --body: "Albert Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --pixel: "Pixelify Sans", ui-monospace, "Cascadia Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 18px/1.6 var(--body); -webkit-text-size-adjust: 100%; }
a { color: inherit; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; }
.wrap { max-width: 1120px; margin-inline: auto; padding-inline: 24px; }

/* ---------- skip link, touch ---------- */
html { touch-action: manipulation; -webkit-tap-highlight-color: rgba(27,47,110,.15); }
.skip { position: absolute; z-index: 20; left: 16px; top: -60px; padding: 10px 16px; background: var(--azure-deep); color: var(--white); font-weight: 700; text-decoration: none; border-radius: 4px; }
.skip:focus { top: 12px; }

/* ---------- top bar: small wordmark and the four places you can go ---------- */
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 28px; padding-block: 18px; }
.wm { display: inline-flex; align-items: center; min-height: 44px; font: 800 32px/1 var(--display); letter-spacing: -.03em; color: var(--or); text-decoration: none; -webkit-text-stroke: .1em var(--azure-deep); paint-order: stroke fill; padding: 0 .08em; }
.bar nav { display: flex; flex-wrap: wrap; gap: 0 22px; font: 600 16px/1.6 var(--body); }
.bar nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--azure-deep); }
.bar nav a:hover, .bar nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* ---------- Minecraft controls ---------- */
.mcbtn { min-height: 44px; padding: 0 18px; border: 2px solid #000; background: #717171; color: var(--white); font: 600 17px/1 var(--body); text-shadow: 1px 1px 0 #3A3A3A; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: inset 2px 2px 0 #ABABAB, inset -2px -3px 0 #4C4C4C; }
.mcbtn:hover { background: #7C86BE; box-shadow: inset 2px 2px 0 #BEC7FF, inset -2px -3px 0 #535C93; color: #FFFFA0; }
.mcbtn:active { box-shadow: inset 2px 3px 0 #4C4C4C; }
.mcbtn.gold { background: #8C6208; color: #FFF8D6; text-shadow: 1px 1px 0 #4A3200; box-shadow: inset 2px 2px 0 #D9B04A, inset -2px -3px 0 #5C3F00; }
.mcbtn.gold:hover { background: #9A6C08; box-shadow: inset 2px 2px 0 #F5D36B, inset -2px -3px 0 #5C3F00; color: #FFFFFF; }
.mcbtn:disabled { color: #A0A0A0; background: #2E2E2E; box-shadow: none; cursor: default; }
kbd { font: 600 .9em/1 ui-monospace, "Cascadia Mono", Consolas, monospace; background: var(--slate); color: var(--white); padding: 3px 7px; border-radius: 3px; white-space: nowrap; }

/* ---------- footer ---------- */
footer { position: relative; margin-top: 18px; background: var(--ink); color: #B9C2D8; padding-block: 36px 44px; font-size: 16px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 40px; justify-content: space-between; align-items: baseline; }
footer nav { display: flex; flex-wrap: wrap; gap: 0 26px; font: 600 16px/1 var(--body); color: var(--white); }
footer nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
footer nav a:hover { color: var(--or); }

@media (max-width: 520px) {
  body { font-size: 17px; }
  .wrap { padding-inline: 18px; }
  .wm { font-size: 28px; }
  .bar nav { font-size: 17px; gap: 0 18px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }