/* BlockCraft World sub-site: reuses the Recess Arcade layout (site.css) and swaps the
   palette and display face for the game's own: dark soil, moss, glowstone gold. */
:root {
  --board: #0d120e;
  --board-2: #161d17;
  --board-3: #222c22;
  --chalk: #eef1e6;
  --chalk-dim: #a9b2a0;
  --line: rgba(238, 241, 230, 0.13);
  --bus: #f0b54a;
  --bus-ink: #1b1406;
  --moss: #7fae4e;
  --display: "Pixelify Sans", "Courier New", monospace;
  --body: "Chivo", "Helvetica Neue", Arial, sans-serif;
}
body {
  background-color: var(--board);
  background-image: linear-gradient(180deg, rgba(127, 174, 78, 0.08), transparent 380px);
}
h1 { font-weight: 700; letter-spacing: 0.01em; }
h2 { font-weight: 700; }
.vv-logo { font: 700 26px/1 var(--display); color: var(--chalk); text-decoration: none; letter-spacing: 0.04em; }
.vv-logo span { color: var(--bus); }
.vv-parent { font-size: 13px; color: var(--chalk-dim); }
.vv-parent a { color: var(--chalk-dim); }
.site-header { background: rgba(10, 14, 11, 0.78); }
.feature-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.feature-list li { background: var(--board-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.feature-list b { display: block; font: 700 18px/1.2 var(--display); color: var(--moss); margin-bottom: 4px; }
.feature-list span { color: var(--chalk-dim); font-size: 15px; }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.steps li { counter-increment: step; position: relative; padding-left: 44px; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; display: grid; place-items: center; background: var(--moss); color: #0d120e; font: 700 16px/1 var(--display); border-radius: 6px; }