/* Blockville main site - "dusk over the village". Same blocky, hard-edged Minecraft-UI language as the wiki (no rounded corners, no glass, hard
   shadows), but at night: a banded pixel sky, a square moon and a stepped skyline instead of a gradient blob. */
:root {
    --night: #120d2b; --night-2: #1d1633; --night-3: #281d46; --night-4: #34265a; --line: #4a3a78;
    --text: #efe9ff; --text-dim: #b7abd6; --ink: #1a1030;
    --gold: #ffd34d; --gold-d: #d99a1c; --grass: #5da13a; --grass-d: #3f7a27; --grass-l: #7cc254;
    --plank: #b98a4b; --plank-d: #8c6531; --plank-l: #d6ab68; --stone: #8a8a8a; --black: #0b0716;
    --red: #e23b3b; --green: #4ce08a;
    --font: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --display: "Arial Black", "Segoe UI Black", "Trebuchet MS", system-ui, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
    --bevel: inset 3px 3px 0 rgba(255,255,255,.22), inset -3px -3px 0 rgba(0,0,0,.4);
    --head: 66px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--font); font-size: 16px; line-height: 1.7; color: var(--text); background: var(--night); }
main { flex: 1; }
a { color: var(--gold); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: #fff; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 22px; }
.wrap.narrow { max-width: 860px; }
.center { text-align: center; }
.px { width: 44px; height: 44px; image-rendering: pixelated; shape-rendering: crispEdges; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 50; height: var(--head); display: flex; align-items: center; background: #160f2e; border-bottom: 6px solid var(--grass); box-shadow: 0 4px 0 var(--grass-d), 0 8px 0 rgba(0,0,0,.4); }
.top-in { display: flex; align-items: center; gap: 18px; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; font-family: var(--display); font-size: 21px; text-decoration: none; text-shadow: 2px 2px 0 #000; white-space: nowrap; }
.brand b { color: var(--gold); }
.brand img { height: 40px; width: auto; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { padding: 8px 14px; color: #e9e1ff; text-decoration: none; font-weight: 700; font-size: 15px; border: 3px solid transparent; }
.nav a:hover { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
.nav a.on { color: var(--gold); border-bottom-color: var(--gold); }
.nav .ext { font-size: 12px; opacity: .7; }
.nav .nav-cta { margin-left: 8px; color: #1a1030; background: var(--gold); border: 3px solid #000; box-shadow: inset 3px 3px 0 rgba(255,255,255,.55), inset -3px -3px 0 rgba(0,0,0,.28), 3px 3px 0 #000; }
.nav .nav-cta:hover { background: #ffe388; color: #1a1030; }
.menu-btn { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; background: #2a1f4e; border: 3px solid #000; box-shadow: var(--bevel); cursor: pointer; }
.menu-btn span { display: block; height: 3px; background: #fff; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--night); }
.hero-sky { position: absolute; inset: 0; background: linear-gradient(#120d2b 0 16%, #1a1242 16% 30%, #271a58 30% 43%, #3b2372 43% 54%, #5f2f80 54% 63%, #94407b 63% 71%, #c85a6e 71% 78%, #ee8a5c 78% 85%, #ffb866 85% 92%, #ffd98a 92% 100%); }
.stars { position: absolute; inset: 0; }
.stars .tw { animation: twinkle 3.2s steps(2, end) infinite; }
@keyframes twinkle { 50% { opacity: .15; } }
.moon { position: absolute; top: 56px; right: 11%; width: 96px; height: 96px; filter: drop-shadow(0 0 28px rgba(244,241,216,.45)); }
.moon-px { width: 100%; height: 100%; image-rendering: pixelated; shape-rendering: crispEdges; }
.skyline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 250px; }
.hero-in { position: relative; z-index: 2; text-align: center; padding: 64px 22px 200px; }
.hero-title { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(54px, 11vw, 120px); line-height: 1; letter-spacing: 1px; color: #fff; text-shadow: none; }
.hero-title span { color: #ffe27a; text-shadow: -4px 0 #000, 4px 0 #000, 0 -4px #000, 0 4px #000, -4px -4px 0 #000, 4px -4px 0 #000, -4px 4px 0 #000, 4px 4px 0 #000, 0 10px 0 #000, 4px 12px 0 rgba(0,0,0,.4); }
.hero-tag { margin: 18px auto 6px; font-family: var(--display); font-size: clamp(18px, 3.2vw, 28px); color: #fff; text-shadow: 3px 3px 0 #000; }
.hero-intro { max-width: 640px; margin: 0 auto 26px; font-size: 17px; color: #fff; text-shadow: 2px 2px 0 rgba(0,0,0,.8); }
.plate { display: inline-flex; align-items: stretch; max-width: 100%; border: 4px solid #000; background: var(--plank); box-shadow: inset 4px 4px 0 var(--plank-l), inset -4px -4px 0 var(--plank-d), 6px 6px 0 rgba(0,0,0,.5); }
.plate-ip { padding: 14px 22px; font: 800 clamp(20px, 4.4vw, 34px) var(--mono); color: #2e1c08; background: rgba(255,255,255,.12); text-shadow: 1px 1px 0 rgba(255,255,255,.3); word-break: break-all; }
.copy { cursor: pointer; padding: 0 20px; border: 0; border-left: 4px solid #000; background: var(--grass); color: #fff; font: 800 15px var(--font); text-shadow: 2px 2px 0 rgba(0,0,0,.5); box-shadow: inset 3px 3px 0 rgba(255,255,255,.35), inset -3px -3px 0 rgba(0,0,0,.35); }
.copy:hover { background: var(--grass-l); }
.copy.done { background: var(--gold-d); }
.plate-note { margin: 12px 0 14px; font-size: 14px; color: #fff; text-shadow: 2px 2px 0 rgba(0,0,0,.8); }
.status { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; margin-bottom: 22px; border: 3px solid #000; background: rgba(11,7,22,.82); font-weight: 700; font-size: 15px; box-shadow: 4px 4px 0 rgba(0,0,0,.4); }
.status i { width: 12px; height: 12px; background: #888; flex: none; }
.status[data-state="up"] i { background: var(--green); box-shadow: 0 0 10px var(--green); animation: blink 2s steps(2, end) infinite; }
.status[data-state="down"] i { background: var(--red); }
@keyframes blink { 50% { opacity: .45; } }
.hero-btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

.btn { display: inline-block; padding: 12px 24px; color: #fff; text-decoration: none; font: 800 16px var(--font); background: #5a5a6a; border: 4px solid #000; box-shadow: inset 4px 4px 0 rgba(255,255,255,.3), inset -4px -4px 0 rgba(0,0,0,.35), 4px 4px 0 rgba(0,0,0,.45); text-shadow: 2px 2px 0 rgba(0,0,0,.55); }
.btn:hover { background: #7a7a8c; color: #fff; transform: translate(-1px, -1px); }
.btn.go { background: var(--grass); }
.btn.go:hover { background: var(--grass-l); }

/* ---------- sections ---------- */
.band { padding: 70px 0; background: var(--night-2); border-top: 4px solid #000; }
.band.alt { background: var(--night-3); }
.band.cta { background: var(--night); }
.h2 { margin: 0 0 34px; text-align: center; font-family: var(--display); font-size: clamp(26px, 4vw, 38px); color: #fff; text-shadow: 3px 3px 0 #000; }
.h2::after { content: ''; display: block; width: 84px; height: 8px; margin: 14px auto 0; background: repeating-linear-gradient(90deg, var(--grass) 0 12px, var(--grass-d) 12px 24px); border: 2px solid #000; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
.card { padding: 22px 22px 20px; background: var(--night-4); border: 4px solid #000; box-shadow: var(--bevel), 6px 6px 0 rgba(0,0,0,.4); }
.card-ic { width: 60px; height: 60px; margin-bottom: 14px; display: grid; place-items: center; background: #1a1230; border: 3px solid #000; box-shadow: inset 3px 3px 0 rgba(0,0,0,.5); }
.card-ic .px { width: 38px; height: 38px; }
.card h3 { margin: 0 0 6px; font-family: var(--display); font-size: 19px; color: var(--gold); }
.card p { margin: 0; color: var(--text); font-size: 15.5px; }

.steps { list-style: none; margin: 0 0 34px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; counter-reset: s; }
.steps li { display: flex; gap: 16px; padding: 20px; background: var(--night-2); border: 4px solid #000; box-shadow: var(--bevel), 6px 6px 0 rgba(0,0,0,.4); }
.num { flex: none; width: 46px; height: 46px; display: grid; place-items: center; font: 900 24px var(--display); color: #2e1c08; background: var(--gold); border: 3px solid #000; box-shadow: inset 3px 3px 0 rgba(255,255,255,.55), inset -3px -3px 0 rgba(0,0,0,.28); }
.steps h3 { margin: 0 0 4px; font-family: var(--display); font-size: 18px; color: #fff; }
.steps p { margin: 0; font-size: 15.5px; color: var(--text); }

.posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-bottom: 30px; }
.posts.wide { grid-template-columns: 1fr; margin-top: 30px; }
.post { display: block; padding: 20px 22px; color: var(--text); text-decoration: none; background: var(--night-4); border: 4px solid #000; box-shadow: var(--bevel), 6px 6px 0 rgba(0,0,0,.4); }
.post:hover { background: #3d2d68; color: var(--text); transform: translate(-2px, -2px); }
.post time { font: 700 12.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--grass-l); }
.post h3 { margin: 6px 0 6px; font-family: var(--display); font-size: 20px; color: #fff; }
.post p { margin: 0 0 8px; font-size: 15px; color: var(--text-dim); }
.post .more { font-weight: 800; font-size: 14px; color: var(--gold); }

.cta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.cta-card { display: block; padding: 24px; text-decoration: none; color: var(--text); background: var(--night-4); border: 4px solid #000; border-top: 8px solid var(--gold); box-shadow: var(--bevel), 6px 6px 0 rgba(0,0,0,.4); }
.cta-card:hover { background: #3d2d68; color: #fff; transform: translate(-2px, -2px); }
.cta-card b { display: block; margin-bottom: 4px; font-family: var(--display); font-size: 21px; color: var(--gold); }
.cta-card span { color: var(--text-dim); font-size: 15.5px; }

/* ---------- document pages ---------- */
.doc { padding: 54px 0 80px; }
.doc-title { margin: 0 0 10px; font-family: var(--display); font-size: clamp(32px, 5vw, 48px); line-height: 1.15; color: #fff; text-shadow: 3px 3px 0 #000; }
.lead { margin: 0 0 28px; font-size: 19px; color: var(--text-dim); }
.date { margin: 0 0 26px; font: 700 13px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--grass-l); }
.crumb { margin: 0 0 18px; font-weight: 700; }
.prose { padding: 28px 30px; background: var(--night-3); border: 4px solid #000; box-shadow: var(--bevel), 8px 8px 0 rgba(0,0,0,.4); }
.prose > :first-child { margin-top: 0; } .prose > :last-child { margin-bottom: 0; }
.prose h2 { margin: 34px 0 10px; font-family: var(--display); font-size: 25px; color: var(--gold); text-shadow: 2px 2px 0 #000; }
.prose h3 { margin: 24px 0 8px; font-family: var(--display); font-size: 19px; color: #fff; }
.prose p, .prose li { font-size: 16.5px; }
.prose ul, .prose ol { padding-left: 24px; }
.prose li { margin: 4px 0; }
.prose code { padding: 1px 7px; font: 600 14.5px var(--mono); color: var(--gold); background: rgba(0,0,0,.45); border: 2px solid #000; }
.prose table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 15.5px; }
.prose th, .prose td { padding: 10px 14px; text-align: left; border: 3px solid #000; }
.prose th { background: var(--night-4); font-family: var(--display); font-size: 14px; color: var(--gold); }
.prose td { background: rgba(0,0,0,.2); }
.prose blockquote { margin: 16px 0; padding: 12px 18px; border-left: 8px solid var(--gold); background: rgba(0,0,0,.25); }

/* ---------- footer ---------- */
.foot { padding: 40px 0 30px; background: #0d0920; border-top: 6px solid var(--grass); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 30px; }
.foot-h { display: block; margin-bottom: 8px; font-family: var(--display); font-size: 15px; color: var(--gold); }
.foot a { display: block; margin: 3px 0; color: var(--text-dim); text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot p { margin: 0; color: var(--text-dim); font-size: 15px; }
.foot code { font: 600 14px var(--mono); color: var(--gold); }
.legal { margin-top: 28px !important; padding-top: 18px; border-top: 2px solid #261b47; font-size: 12.5px !important; color: #7d72a0 !important; }

/* ---------- small screens ---------- */
@media (max-width: 820px) {
    .menu-btn { display: flex; }
    .nav { display: none; position: absolute; top: var(--head); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 14px 16px; background: #160f2e; border-bottom: 6px solid var(--grass); }
    .nav.open { display: flex; }
    .nav a { padding: 12px 10px; }
    .nav .nav-cta { margin: 8px 0 0; text-align: center; }
    .foot-grid { grid-template-columns: 1fr; }
    .moon { right: 6%; top: 36px; width: 64px; height: 64px; }
    .hero-in { padding: 48px 18px 180px; }
    .plate { flex-direction: column; }
    .copy { border-left: 0; border-top: 4px solid #000; padding: 12px; }
    .prose { padding: 20px 18px; }
    .skyline { height: 190px; }
}
@media (prefers-reduced-motion: reduce) { .stars .tw, .status[data-state="up"] i { animation: none; } html { scroll-behavior: auto; } }

/* ---------- signed-in menu in the header (filled in by site.js from /forum/api/me) ---------- */
.nav a { white-space: nowrap; padding: 8px 11px; }
.user-nav { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; padding-left: 10px; border-left: 3px solid rgba(255,255,255,.14); }
.user-nav a { position: relative; padding: 6px 8px; font-size: 13.5px; }
.user-nav .me { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: #fff; }
.user-nav .me img { width: 26px; height: 26px; image-rendering: pixelated; border: 2px solid #000; }
.user-nav .pill { position: absolute; top: -4px; right: -2px; min-width: 18px; padding: 0 5px; font: 800 11px/16px var(--font); text-align: center; color: #fff; background: #e23b3b; border: 2px solid #000; }
.user-nav:empty { display: none; }
@media (max-width: 820px) { .user-nav { margin: 8px 0 0; padding: 8px 0 0; border-left: 0; border-top: 3px solid rgba(255,255,255,.14); flex-wrap: wrap; } }