/* ============================================================================
   FarmTown — shared public-page brand stylesheet.
   Single source of brand truth for the standalone landing pages
   (/leaderboard, /guide, /news, /f/<slug>). Mirrors client/public/status.html
   exactly: FarmTown UI pixel font, green->navy backdrop, cream/brown/gold cards
   and buttons, 10px radii, hard pixel shadows. status.html stays self-contained;
   this file is for the new pages.

   Brand chrome (logo, titles, tabs, buttons, table headers, badges) uses the
   pixel font. Long-form prose and dense data cells use a clean readable stack so
   the guide is comfortable to browse — the look stays unmistakably FarmTown.
   ============================================================================ */

@font-face {
  font-family: "FarmTown UI";
  src: url(/fonts/PressStart2P.ttf) format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --font-ui: "FarmTown UI", system-ui, sans-serif;
  --font-read: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --ok: #3f9e4d;
  --warn: #e2a233;
  --down: #d2493f;
  --ink: #2b1b0c;
  --brown: #6f4516;
  --brown-soft: rgba(111, 69, 22, 0.22);
  --gold: #ffd65f;
  --gold-hover: #ffdc7e;
  --gold-shadow: #9f6a1c;
  --cream-1: #fff8cf;
  --cream-2: #f7d373;
  --text: #f4f7ec;
  --text-muted: rgba(245, 249, 239, 0.72);
  --text-faint: rgba(245, 249, 239, 0.55);

  /* Pixel-art stepped corner frame, used as a border-image so every framed
     surface (cards, buttons, nav, tabs) gets an 8-bit staircase corner instead
     of a smooth radius. Brown (#6f4516 == --brown) baked in since border-image
     can't read CSS vars; straight edges are a solid bar, only the corners step.
     border-image-slice 6 matches the 6px corner art; the edges stretch. Falls
     back to a plain solid border (set alongside) if border-image is unsupported. */
  --pixel-frame: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' shape-rendering='crispEdges'><path fill='%236f4516' fill-rule='evenodd' d='M0,6L3,6L3,3L6,3L6,0L24,0L24,3L27,3L27,6L30,6L30,24L27,24L27,27L24,27L24,30L6,30L6,27L3,27L3,24L0,24ZM6,6L24,6L24,24L6,24Z'/></svg>");
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  padding: clamp(18px, 4vw, 48px) 16px clamp(40px, 8vw, 72px);
  font-family: var(--font-ui);
  color: var(--text);
  background:
    radial-gradient(circle at 50% 12%, rgba(127, 191, 106, 0.32), transparent 46%),
    linear-gradient(180deg, #2f4a33, #18271c 70%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

.shell {
  width: min(960px, 100%);
  margin: 0 auto;
  display: grid;
  gap: clamp(16px, 3vw, 24px);
}
.shell.narrow { width: min(640px, 100%); }

/* ── Header / logo ────────────────────────────────────────────────────── */
.head {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}
.head img {
  width: min(260px, 64%);
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.25));
}
.head a.logo-link { display: inline-block; line-height: 0; }
.head .tagline {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

h1, h2, h3 { font-family: var(--font-ui); color: #fff8d1; line-height: 1.5; }
h1 { font-size: clamp(14px, 3.4vw, 20px); margin: 0; }
h2 { font-size: clamp(12px, 2.6vw, 15px); margin: 0 0 4px; }
h3 { font-size: 12px; margin: 0 0 4px; }

a { color: var(--gold); }
a:hover { color: var(--gold-hover); }

/* ── Top nav (shared across pages) ────────────────────────────────────── */
.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.nav a {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(180deg, #fff8cf, #f6d784);
  border: 3px solid var(--brown);
  border-image: var(--pixel-frame) 6 stretch;
  border-radius: 0;
  padding: 8px 11px;
  text-decoration: none;
  box-shadow: 0 3px 0 var(--gold-shadow);
}
.nav a:hover { background: var(--gold-hover); }
.nav a[aria-current="page"] {
  background: var(--gold);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.18);
}

/* ── Cards ────────────────────────────────────────────────────────────── */
.card {
  border: 6px solid var(--brown);
  border-image: var(--pixel-frame) 6 stretch;
  border-radius: 0;
  background: linear-gradient(180deg, var(--cream-1), var(--cream-2));
  box-shadow: 8px 8px 0 rgba(47, 30, 8, 0.36);
  color: var(--ink);
  overflow: hidden;
}
.card-pad { padding: clamp(16px, 3vw, 22px); }
.card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: rgba(111, 69, 22, 0.12);
  border-bottom: 2px solid rgba(111, 69, 22, 0.2);
}
.card-title h2 { color: var(--brown); }
.card-title .count {
  margin-left: auto;
  font-size: 9px;
  color: rgba(43, 27, 12, 0.6);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  font-family: var(--font-ui);
  font-size: 10px;
  color: #1d1207;
  background: var(--gold);
  border: 3px solid var(--brown);
  border-image: var(--pixel-frame) 6 stretch;
  border-radius: 0;
  padding: 9px 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 3px 0 var(--gold-shadow);
}
.btn:hover { background: var(--gold-hover); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--gold-shadow); }

/* ── Tabs ─────────────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
}
.tab {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(180deg, #fff8cf, #f6d784);
  border: 3px solid var(--brown);
  border-image: var(--pixel-frame) 6 stretch;
  border-radius: 0;
  padding: 9px 12px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--gold-shadow);
}
.tab:hover { background: var(--gold-hover); }
.tab.active {
  background: var(--gold);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.2);
  transform: translateY(1px);
}

/* ── Prose (readable) ─────────────────────────────────────────────────── */
.prose { font-family: var(--font-read); color: var(--ink); line-height: 1.65; }
.prose p { margin: 0 0 12px; font-size: 15px; }
.prose ul, .prose ol { margin: 0 0 12px; padding-left: 22px; }
.prose li { font-size: 15px; margin: 0 0 6px; }
.prose strong { color: #6a3d0a; }
.prose .lead { font-size: 16px; }
.prose h3 {
  font-family: var(--font-ui);
  color: var(--brown);
  font-size: 12px;
  margin: 18px 0 10px;
}
.prose h3:first-child { margin-top: 0; }
.prose code {
  font-family: var(--font-read);
  background: rgba(111, 69, 22, 0.16);
  padding: 1px 6px;
  border-radius: 0;
  font-weight: 600;
}

/* ── Tables (data) ────────────────────────────────────────────────────── */
.table-wrap { width: 100%; overflow-x: auto; }
table.data {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-read);
  color: var(--ink);
  font-size: 14px;
  min-width: 460px;
}
table.data thead th {
  font-family: var(--font-ui);
  font-size: 8px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brown);
  text-align: left;
  padding: 11px 12px;
  background: rgba(111, 69, 22, 0.14);
  border-bottom: 2px solid rgba(111, 69, 22, 0.28);
  white-space: nowrap;
  position: sticky;
  top: 0;
}
table.data tbody td {
  padding: 9px 12px;
  border-top: 1px solid rgba(111, 69, 22, 0.16);
  vertical-align: middle;
}
table.data tbody tr:nth-child(even) td { background: rgba(111, 69, 22, 0.05); }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data td.name { font-weight: 600; color: #4a2c0a; white-space: nowrap; }
.pill {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 7px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--brown);
  padding: 4px 7px;
  border-radius: 0;
  white-space: nowrap;
}
.pill.stars { background: #b8860b; }
.pill.quick { background: var(--ok); }
.pill.session { background: var(--warn); }
.pill.long { background: var(--down); }

/* ── Footer ───────────────────────────────────────────────────────────── */
.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  font-size: 9px;
  color: var(--text-faint);
  padding: 6px 4px 0;
  text-align: center;
}
.foot a { color: var(--text-muted); text-decoration: none; }
.foot a:hover { color: var(--gold-hover); text-decoration: underline; }

/* ── States ───────────────────────────────────────────────────────────── */
.note {
  font-family: var(--font-read);
  font-size: 13px;
  color: rgba(43, 27, 12, 0.7);
  padding: 22px;
  text-align: center;
}
.note.on-dark { color: var(--text-muted); }
.hidden { display: none !important; }