@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Titan+One&family=Bowlby+One+SC&display=swap');

@font-face {
  font-family: 'Vesper Mono';
  src: url('/assets/vesper-mono-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Oakwild Network palette */
  --oak-green: #03743b;
  --oak-green-dark: #133f0f;
  --oak-green-deep: #092c1d;
  --oak-green-bright: #1df94e;
  --oak-brown-dark: #573b1f;
  --oak-tan: #997b54;
  --oak-charcoal: #2b2a2b;
  --oak-white: #f6f6f6;
  --oak-black: #191818;
  /* sampled average pixel color of dark_oak_planks.png */
  --oak-dark-wood: #2d2018;
  /* brand color, not palette-derived — stays constant across themes */
  --discord-blurple: #5865f2;
  /* fallback; docs.js overwrites this with the header's real measured height */
  --header-h: 279px;
}

:root, :root[data-theme="light"] {
  --bg: var(--oak-white);
  --fg: var(--oak-black);
  /* darkened vs raw --oak-tan for AA contrast on light backgrounds (~6.4:1 vs ~3.7:1) */
  --fg-muted: color-mix(in srgb, var(--oak-tan) 70%, var(--oak-black) 30%);
  --border: color-mix(in srgb, var(--oak-green-dark) 16%, var(--oak-white));
  --sidebar-bg: color-mix(in srgb, var(--oak-green) 6%, var(--oak-white));
  /* neutral tan tint for hover/active fill — green is reserved for the active-state marker line */
  --active-bg: color-mix(in srgb, var(--oak-tan) 18%, var(--oak-white));
  --accent: var(--oak-green);
  /* matte, not neon — muted well below the raw --oak-green-bright swatch */
  --accent-bright: color-mix(in srgb, var(--oak-green-bright) 40%, var(--oak-green-dark) 60%);
  --code-bg: color-mix(in srgb, var(--oak-green) 8%, var(--oak-white));
  --link: var(--oak-green);
  --plank-texture: url('/assets/oak_planks.png');
  --log-texture: url('/assets/oak_log.png');
  --plank-seam: color-mix(in srgb, var(--oak-brown-dark) 55%, black);
  --plank-fg: var(--oak-white);
  --content-texture: none, url('/assets/stripped_pale_oak_log.png');
  --section-title-texture: url('/assets/red_concrete.png');
  --active-section-texture: url('/assets/green_wool.png');
  /* sampled average pixel color of green_wool.png, used to derive a matching bevel */
  --active-section-color: #417222;
  --scrollbar-thumb: var(--oak-tan);
}

@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
  :root:not([data-theme="light"]) {
    --bg: color-mix(in srgb, var(--oak-green-deep) 22%, var(--oak-black));
    --fg: var(--oak-white);
    --fg-muted: var(--oak-tan);
    --border: color-mix(in srgb, var(--oak-green-dark) 45%, var(--oak-black));
    --sidebar-bg: color-mix(in srgb, var(--oak-green-deep) 65%, var(--oak-black));
    /* neutral tan/charcoal tint for hover/active fill — green stays reserved for the marker line */
    --active-bg: color-mix(in srgb, var(--oak-tan) 22%, var(--oak-charcoal));
    /* matte — muted down from the raw neon swatch, not full-saturation */
    --accent: color-mix(in srgb, var(--oak-green-bright) 55%, var(--oak-green-dark) 45%);
    --accent-bright: color-mix(in srgb, var(--oak-green-bright) 55%, var(--oak-green-dark) 45%);
    --code-bg: color-mix(in srgb, var(--oak-green-deep) 55%, var(--oak-black));
    --link: color-mix(in srgb, var(--oak-green-bright) 65%, var(--oak-green-dark) 35%);
    --plank-texture: url('/assets/dark_oak_planks.png');
    --log-texture: url('/assets/dark_oak_log.png');
    --plank-seam: color-mix(in srgb, var(--oak-black) 70%, black);
    --plank-fg: var(--oak-white);
    --content-texture: none, url('/assets/brown_concrete_powder.png');
    --section-title-texture: url('/assets/red_concrete.png');
    --active-section-texture: url('/assets/green_wool.png');
    /* sampled average pixel color of green_wool.png, used to derive a matching bevel */
    --active-section-color: #417222;
    --scrollbar-thumb: var(--oak-dark-wood);
  }
}

:root[data-theme="dark"] {
  --bg: color-mix(in srgb, var(--oak-green-deep) 22%, var(--oak-black));
  --fg: var(--oak-white);
  --fg-muted: var(--oak-tan);
  --border: color-mix(in srgb, var(--oak-green-dark) 45%, var(--oak-black));
  --sidebar-bg: color-mix(in srgb, var(--oak-green-deep) 65%, var(--oak-black));
  --active-bg: color-mix(in srgb, var(--oak-tan) 22%, var(--oak-charcoal));
  --accent: color-mix(in srgb, var(--oak-green-bright) 55%, var(--oak-green-dark) 45%);
  --accent-bright: color-mix(in srgb, var(--oak-green-bright) 55%, var(--oak-green-dark) 45%);
  --code-bg: color-mix(in srgb, var(--oak-green-deep) 55%, var(--oak-black));
  --link: color-mix(in srgb, var(--oak-green-bright) 65%, var(--oak-green-dark) 35%);
  --plank-texture: url('/assets/dark_oak_planks.png');
  --log-texture: url('/assets/dark_oak_log.png');
  --plank-seam: color-mix(in srgb, var(--oak-black) 70%, black);
  --plank-fg: var(--oak-white);
  --content-texture: none, url('/assets/brown_concrete_powder.png');
    --section-title-texture: url('/assets/red_concrete.png');
  --active-section-texture: url('/assets/green_wool.png');
  /* sampled average pixel color of green_wool.png, used to derive a matching bevel */
  --active-section-color: #417222;
  --scrollbar-thumb: var(--oak-dark-wood);
}

* { box-sizing: border-box; }

html {
  scrollbar-color: var(--scrollbar-thumb) transparent;
  /* clip, not hidden — hidden turns body into a scroll container and breaks
     position: sticky on the header */
  overflow-x: clip;
}

body {
  margin: 0;
  overflow-x: clip;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 900px 600px at 8% -5%, color-mix(in srgb, var(--oak-green) 16%, transparent), transparent),
    radial-gradient(ellipse 700px 500px at 100% 15%, color-mix(in srgb, var(--oak-tan) 14%, transparent), transparent),
    radial-gradient(ellipse 800px 700px at 15% 100%, color-mix(in srgb, var(--oak-green-deep) 20%, transparent), transparent);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--fg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
}

/* Firefox/standards scrollbar coloring is set on html above via scrollbar-color;
   WebKit/Blink (Chrome, Safari) need the pseudo-element API instead. */
::-webkit-scrollbar {
  width: 14px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 8px;
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, black 20%, var(--scrollbar-thumb));
}

/* Scattered icon watermark behind the content — three layers at different tile
   sizes/offsets so the icons interleave instead of forming a single visible grid. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image: url('/assets/icon-pattern.svg');
  background-size: 640px 640px;
  background-repeat: repeat;
  image-rendering: pixelated;
}

/* icons are black silhouettes — invert to white so they're visible on dark backgrounds */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body::before { filter: invert(1); }
}
:root[data-theme="dark"] body::before { filter: invert(1); }

.layout { position: relative; z-index: 1; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Site header: logo row / server-info row / nav row, stacked */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-image: var(--plank-texture);
  background-size: 128px 128px;
  background-repeat: repeat;
  image-rendering: pixelated;
  /* forces the sticky header onto its own compositing layer — without this,
     iOS Safari has a known bug where the rotated/transformed background of
     .header-nav-row::before can visually detach and lag behind the sticky
     header during scroll instead of moving with it as one unit */
  transform: translateZ(0);
}

.header-logo-row {
  display: flex;
  justify-content: center;
  padding: 1.1rem 4% 0.1rem;
}

.topbar-brand {
  display: flex;
  align-items: center;
}

.brand-logo {
  display: block;
  height: 150px;
  width: auto;
}

.header-info-row {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.4rem 4%;
  font-size: 0.85rem;
  color: var(--plank-fg);
}

.info-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-radius: 10px;
  padding: 0.5rem 1.1rem;
  box-shadow: 0 3px 0 color-mix(in srgb, black 45%, transparent);
}
/* background on a separate pseudo-element so its opacity doesn't also fade the text */
.info-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: black;
  background-image: url('/assets/gray_wool.png');
  background-size: 48px 48px;
  background-repeat: repeat;
  image-rendering: pixelated;
  opacity: 0.6;
  z-index: 0;
}
.info-pill > * {
  position: relative;
  z-index: 1;
}

/* Shared flat button: solid color, rounded corners, single soft drop-shadow.
   :active flattens the shadow and nudges down 2px to read as pressed. */
.topbar-links a,
.theme-toggle,
.sidebar-toggle,
.search-toggle {
  position: relative;
  top: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 2px;
  border-top-color: color-mix(in srgb, white 30%, color-mix(in srgb, var(--oak-charcoal) 70%, black));
  border-left-color: color-mix(in srgb, white 22%, color-mix(in srgb, var(--oak-charcoal) 70%, black));
  border-right-color: color-mix(in srgb, white 10%, color-mix(in srgb, var(--oak-charcoal) 70%, black));
  border-bottom-color: color-mix(in srgb, black 20%, color-mix(in srgb, var(--oak-charcoal) 70%, black));
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--oak-charcoal) 70%, black);
  background-image:
    linear-gradient(color-mix(in srgb, black 0%, transparent), color-mix(in srgb, black 0%, transparent)),
    url('/assets/gray_wool.png');
  background-size: cover, 48px 48px;
  background-repeat: no-repeat, repeat;
  image-rendering: pixelated;
  color: var(--plank-fg);
  font-family: 'Titan One', 'Inter', sans-serif;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 0 color-mix(in srgb, black 55%, transparent);
  text-shadow: 0 2px 2px color-mix(in srgb, black 45%, transparent);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background-image 0.15s ease;
}
.topbar-links a:hover,
.theme-toggle:hover,
.sidebar-toggle:hover,
.search-toggle:hover {
  background-image:
    linear-gradient(color-mix(in srgb, black 25%, transparent), color-mix(in srgb, black 25%, transparent)),
    url('/assets/gray_wool.png');
}
.topbar-links a:active,
.theme-toggle:active,
.sidebar-toggle:active,
.search-toggle:active {
  top: 3px;
  box-shadow: 0 1px 0 color-mix(in srgb, black 55%, transparent);
}

.server-address {
  background: transparent;
  border: none;
  color: var(--plank-fg);
  font-family: 'Titan One', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.8rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  padding: 0.15rem 0.3rem;
  text-shadow: 0 2px 2px color-mix(in srgb, black 55%, transparent);
}
.server-address:hover { text-decoration: underline; }

.info-separator { opacity: 0.5; }

.player-count {
  color: var(--accent-bright);
  font-family: 'Titan One', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.8rem;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 2px color-mix(in srgb, black 55%, transparent);
}

.header-nav-row {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 1.5rem;
  padding: 0.5rem 4%;
  position: relative;
  background-color: var(--oak-black);
  overflow: hidden;
  isolation: isolate;
}
/* log texture rotated 90deg via pseudo-element so only the background turns sideways, not the nav content.
   Square + vmax-sized so the 90deg rotation can't shrink its footprint below the (short, wide) bar. */
.header-nav-row::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  /* vw-based, not vmax — vmax explodes to 8000px+ on tall narrow phone
     screens (300% of the ~2800px viewport height), which appears to exceed
     Safari's compositing layer size limit and silently fails to paint at
     all once the sticky header is forced onto its own GPU layer. This only
     needs to cover the row's own width/height, both far below 100vw. */
  width: 250vw;
  height: 250vw;
  margin-top: -125vw;
  margin-left: -125vw;
  z-index: -1;
  background-image: var(--log-texture);
  background-size: 128px 128px;
  background-repeat: repeat;
  image-rendering: pixelated;
  transform: rotate(90deg);
}

.topbar-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.topbar-links a {
  text-transform: uppercase;
  height: 2.3rem;
  padding: 0 1.15rem;
  display: inline-flex;
  align-items: center;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.topbar-links a.active {
  background-color: var(--accent-bright);
  background-image: none;
  border-top-color: color-mix(in srgb, white 40%, var(--accent-bright));
  border-left-color: color-mix(in srgb, white 30%, var(--accent-bright));
  border-right-color: color-mix(in srgb, white 15%, var(--accent-bright));
  border-bottom-color: color-mix(in srgb, black 20%, var(--accent-bright));
  color: var(--oak-black);
  text-shadow: none;
}

.topbar-links a.topbar-link-highlight {
  background-color: var(--discord-blurple);
  background-image: none;
  border-top-color: color-mix(in srgb, white 40%, var(--discord-blurple));
  border-left-color: color-mix(in srgb, white 30%, var(--discord-blurple));
  border-right-color: color-mix(in srgb, white 15%, var(--discord-blurple));
  border-bottom-color: color-mix(in srgb, black 20%, var(--discord-blurple));
}
.topbar-links a.topbar-link-highlight:hover {
  background-color: color-mix(in srgb, var(--discord-blurple) 85%, white);
}

/* icon buttons: identical fixed square size, content centered — deliberately
   NOT tied to Store/Discord's padding-driven size, and not left to flex
   stretch (which kept fighting itself across nested containers). */
.theme-toggle,
.sidebar-toggle,
.search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
}
.theme-toggle-icon {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
  display: block;
}

.search-toggle-icon {
  width: 1.1rem;
  height: 1.1rem;
  object-fit: contain;
  display: block;
}

.sidebar-toggle {
  display: none;
}
/* three thick bars drawn with box-shadow instead of a thin ☰ glyph, so
   thickness/spacing is controllable and consistent across fonts/devices */
.sidebar-toggle-bars,
.sidebar-toggle-bars::before,
.sidebar-toggle-bars::after {
  display: block;
  width: 17px;
  height: 2px;
  border-radius: 2px;
  background: var(--plank-fg);
}
.sidebar-toggle-bars {
  position: relative;
}
.sidebar-toggle-bars::before,
.sidebar-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.sidebar-toggle-bars::before { top: -6px; }
.sidebar-toggle-bars::after { top: 6px; }

/* Layout */
.layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 0;
}

.sidebar {
  /* pull up 1px to swallow the hairline sub-pixel rendering gap between the
     header and sidebar boxes — invisible in dark mode (page bg is dark too)
     but a visible pale line in light mode without this */
  margin-top: -1px;
  padding: calc(1.5rem + 1px) 8% 1.5rem;
  align-self: start;
  position: sticky;
  top: calc(var(--header-h) - 1px);
  height: calc(100vh - var(--header-h) + 1px);
  overflow-y: auto;
  background-color: var(--oak-black);
  background-image: url('/assets/black_wool.png');
  background-size: 128px 128px;
  background-repeat: repeat;
  image-rendering: pixelated;
}

.sidebar-group { margin-bottom: 1rem; }
.sidebar-group-title {
  font-family: 'Bowlby One SC', 'Titan One', 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--plank-fg);
  opacity: 0.85;
  padding: 0.35rem 0.75rem;
  margin-bottom: 0.1rem;
  border-radius: 6px;
  background-color: #8b2e2e;
  background-image: var(--section-title-texture);
  background-size: 40px 40px;
  background-repeat: repeat;
  image-rendering: pixelated;
  text-shadow: 0 2px 2px color-mix(in srgb, black 45%, transparent);
}
.sidebar-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.sidebar-group a {
  position: relative;
  top: 0;
  display: block;
  padding: 0.4rem 0.75rem;
  border-style: solid;
  border-width: 2px;
  border-top-color: color-mix(in srgb, white 30%, color-mix(in srgb, var(--oak-charcoal) 70%, black));
  border-left-color: color-mix(in srgb, white 22%, color-mix(in srgb, var(--oak-charcoal) 70%, black));
  border-right-color: color-mix(in srgb, white 10%, color-mix(in srgb, var(--oak-charcoal) 70%, black));
  border-bottom-color: color-mix(in srgb, black 20%, color-mix(in srgb, var(--oak-charcoal) 70%, black));
  border-radius: 8px;
  background-color: color-mix(in srgb, var(--oak-charcoal) 70%, black);
  background-image:
    linear-gradient(color-mix(in srgb, black 0%, transparent), color-mix(in srgb, black 0%, transparent)),
    url('/assets/gray_wool.png');
  background-size: cover, 40px 40px;
  background-repeat: no-repeat, repeat;
  image-rendering: pixelated;
  color: var(--plank-fg);
  opacity: 0.92;
  font-family: 'Bowlby One SC', 'Titan One', 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.3;
  text-align: center;
  box-shadow: 0 3px 0 color-mix(in srgb, black 55%, transparent);
  text-shadow: 0 2px 2px color-mix(in srgb, black 45%, transparent);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background-image 0.15s ease;
}
.sidebar-group a:hover {
  opacity: 1;
  background-image:
    linear-gradient(color-mix(in srgb, black 25%, transparent), color-mix(in srgb, black 25%, transparent)),
    url('/assets/gray_wool.png');
  text-decoration: none;
}
.sidebar-group a:active {
  top: 2px;
  box-shadow: 0 1px 0 color-mix(in srgb, black 55%, transparent);
}
.sidebar-group a.active {
  opacity: 1;
  background-color: var(--accent-bright);
  background-image: var(--active-section-texture);
  background-size: 40px 40px;
  background-repeat: repeat;
  image-rendering: pixelated;
  border-top-color: color-mix(in srgb, white 35%, var(--active-section-color));
  border-left-color: color-mix(in srgb, white 20%, var(--active-section-color));
  border-right-color: color-mix(in srgb, black 20%, var(--active-section-color));
  border-bottom-color: color-mix(in srgb, black 40%, var(--active-section-color));
  color: var(--oak-black);
  text-shadow: none;
}

/* On-page headings for the current page, nested under its own sidebar link */
.sidebar-group ul.sidebar-subnav {
  list-style: none;
  margin: 0.25rem 0 0.5rem;
  padding: 0 0.8rem;
  display: none;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.6s ease, max-height 0.6s ease, display 0.6s ease allow-discrete;
}

.sidebar-group ul.sidebar-subnav[style*="display: block"] {
  display: block;
  opacity: 1;
  max-height: 1000px;
}
.sidebar-subnav a {
  position: relative;
  top: 0;
  display: block;
  padding: 0.4rem 0.75rem;
  border-style: solid;
  border-width: 2px;
  border-top-color: color-mix(in srgb, white 30%, color-mix(in srgb, var(--oak-charcoal) 70%, black));
  border-left-color: color-mix(in srgb, white 22%, color-mix(in srgb, var(--oak-charcoal) 70%, black));
  border-right-color: color-mix(in srgb, white 10%, color-mix(in srgb, var(--oak-charcoal) 70%, black));
  border-bottom-color: color-mix(in srgb, black 20%, color-mix(in srgb, var(--oak-charcoal) 70%, black));
  border-radius: 8px;
  background-color: color-mix(in srgb, var(--oak-charcoal) 70%, black);
  background-image:
    linear-gradient(color-mix(in srgb, black 0%, transparent), color-mix(in srgb, black 0%, transparent)),
    url('/assets/gray_wool.png');
  background-size: cover, 40px 40px;
  background-repeat: no-repeat, repeat;
  image-rendering: pixelated;
  color: var(--plank-fg);
  opacity: 0.92;
  font-family: 'Bowlby One SC', 'Titan One', 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.3;
  text-align: center;
  box-shadow: 0 3px 0 color-mix(in srgb, black 55%, transparent);
  text-shadow: 0 2px 2px color-mix(in srgb, black 45%, transparent);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background-image 0.15s ease;
}
.sidebar-subnav a:hover {
  opacity: 1;
  background-image:
    linear-gradient(color-mix(in srgb, black 25%, transparent), color-mix(in srgb, black 25%, transparent)),
    url('/assets/gray_wool.png');
  text-decoration: none;
}
.sidebar-subnav a:active {
  top: 2px;
  box-shadow: 0 1px 0 color-mix(in srgb, black 55%, transparent);
}

.content {
  position: relative;
  padding: 1.5rem 3rem 2.5rem;
  min-width: 0;
  min-height: calc(100vh - var(--header-h));
  font-family: 'Vesper Mono', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.content::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--content-texture);
  background-size: 96px 96px, 64px 64px;
  background-repeat: repeat, repeat;
  image-rendering: pixelated;
  opacity: 0.4;
  z-index: 0;
  pointer-events: none;
}
.content > * {
  position: relative;
  z-index: 1;
}

.site-footer {
  position: relative;
  z-index: 1;
  padding: 0.5rem 4%;
  text-align: center;
  background-color: var(--oak-black);
  background-image: url('/assets/bedrock.png');
  background-size: 128px 128px;
  background-repeat: repeat;
  image-rendering: pixelated;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: black;
  opacity: 0.55;
  z-index: -1;
}
.footer-copyright,
.footer-disclaimer,
.footer-meta {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.72rem;
  line-height: 1.2;
}
.footer-copyright {
  margin: 0;
  color: color-mix(in srgb, var(--plank-fg) 80%, transparent);
  font-weight: 600;
}
.footer-disclaimer {
  margin: 0;
  color: color-mix(in srgb, var(--plank-fg) 50%, transparent);
}
.footer-meta {
  margin: 0.2rem 0 0;
  color: color-mix(in srgb, var(--plank-fg) 40%, transparent);
}
.footer-meta a {
  color: color-mix(in srgb, var(--plank-fg) 55%, transparent);
  text-decoration: underline;
}
.footer-meta a:hover {
  color: var(--plank-fg);
}
.content h1,
.content h2,
.content h3 {
  font-family: 'Bowlby One SC', 'Titan One', 'Inter', sans-serif;
  font-weight: 400;
  line-height: 1.2;
}
.content h1 { font-size: 2.25rem; margin: 0 0 0.5rem; }
.content .subtitle { color: var(--fg-muted); font-size: 1.05rem; margin-bottom: 2rem; }

.content h2 { font-size: 1.5rem; margin-top: 2.5rem; padding-top: 0.5rem; border-top: 1px solid var(--border); }
.doc-section > h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.content h3 { font-size: 1.15rem; margin-top: 1.75rem; }
.content pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  overflow-x: auto;
}
.content code {
  background: var(--code-bg);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.9em;
}
.content pre code { background: none; padding: 0; }

.search-toggle-container {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}
.search-input-header {
  align-self: center;
}

.search-input-header {
  display: none;
  width: 0;
  padding: 0.4rem 0.75rem;
  font-size: 0.9rem;
  border: 2px solid var(--plank-seam);
  border-radius: 8px;
  background-color: color-mix(in srgb, var(--oak-charcoal) 70%, black);
  color: var(--plank-fg);
  font-family: 'Inter', sans-serif;
  transition: width 0.2s ease;
}

.search-input-header::placeholder {
  color: color-mix(in srgb, var(--plank-fg) 60%, transparent);
}

.search-input-header:focus {
  outline: none;
}

.search-toggle-container.open .search-input-header {
  display: block;
  width: 200px;
}

.doc-section {
  display: none;
  scroll-margin-top: var(--header-h);
}

.content h3[id] {
  scroll-margin-top: var(--header-h);
}

.doc-section.visible {
  display: block;
}

.doc-section.hidden-by-search {
  display: none !important;
}

.search-highlight {
  background-color: color-mix(in srgb, var(--accent-bright) 40%, transparent);
  padding: 0.1em 0.2em;
  border-radius: 3px;
}


@media (max-width: 780px) {
  /* background-attachment: fixed on body is unreliable on mobile Safari —
     it frequently just fails to paint, leaving the ambient glow gradients
     invisible. Mobile doesn't need the parallax-fixed effect anyway. */
  body {
    background-attachment: scroll;
  }
  .sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* was absolutely positioned (desktop has room to spare); on mobile it needs
       to sit in normal flex flow or it overlaps the Store/Discord buttons */
    position: static;
    order: -1;
  }
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    left: 0;
    top: var(--header-h);
    width: 260px;
    max-width: 80vw;
    /* dvh, not vh — vh is Safari's largest-possible viewport (toolbar
       collapsed), so a fixed drawer sized with it falls short of the real
       visible area whenever the toolbar is expanded, exposing the footer
       underneath. dvh tracks the actual current visible viewport. */
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    z-index: 20;
  }
  .sidebar.open { transform: translateX(0); }
  .content { padding: 0 1.5rem 1.5rem; }

  .header-nav-row {
    flex-wrap: wrap;
    row-gap: 0.5rem;
    gap: 0.6rem;
  }
  .topbar-links {
    gap: 0.6rem;
  }
  .topbar-links a {
    padding: 0 0.85rem;
    font-size: 0.78rem;
  }

  /* search grows on its own full-width row instead of forcing the whole
     header row wider than the viewport */
  .search-toggle-container.open {
    flex-basis: 100%;
    justify-content: center;
  }
  .search-toggle-container.open .search-input-header {
    width: min(80vw, 320px);
    /* iOS Safari auto-zooms the page on focusing any input with a computed
       font-size under 16px — keep it at/above that floor to prevent it */
    font-size: 16px;
  }

  .info-pill {
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
  }
  .server-address {
    font-size: 0.68rem;
  }
  .player-count {
    font-size: 0.68rem;
    white-space: nowrap;
  }
}