/* Harvest County public pages: the same zen-garden world as the game, set for
   reading rather than playing. One committed visual direction, no light mode:
   the game is a dark garden at dusk and the site should feel like the game. */
:root{
  --bg1:#10201f; --bg2:#173029; --card:#1b2f2a; --card2:#223a33;
  --ink:#eef4ee; --muted:#9fb4a8; --gold:#f2c14e; --green:#7ac76f;
  --down:#e8837b; --soil:#9a6a48; --line:#2c463c;
  --measure:66ch;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{min-height:100vh; color:var(--ink);
  background:radial-gradient(120% 80% at 50% 0%, var(--bg2), var(--bg1) 70%) fixed;
  font-family:"Nunito","Segoe UI",system-ui,sans-serif; line-height:1.62;
  font-size:16px; -webkit-text-size-adjust:100%}
.wrap{max-width:760px; margin:0 auto; padding:0 20px 90px}
.num{font-variant-numeric:tabular-nums}

/* ---------- masthead ---------- */
nav{display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:16px 0 8px; font-size:13.5px}
nav .brand{font-weight:800; color:var(--gold); font-size:16px; margin-right:auto;
  letter-spacing:.3px; text-decoration:none}
nav a{color:var(--muted); text-decoration:none; padding:5px 10px; border-radius:999px}
nav a:hover,nav a:focus-visible{background:#ffffff12; color:var(--ink)}
nav a[aria-current="page"]{color:var(--ink); background:#ffffff10}

/* ---------- type ---------- */
h1{font-size:clamp(28px,6vw,42px); line-height:1.12; letter-spacing:-.4px;
  text-wrap:balance; margin:22px 0 10px}
h2{font-size:13px; text-transform:uppercase; letter-spacing:.15em; color:var(--gold);
  font-weight:800; margin:46px 0 14px}
h3{font-size:19px; margin:26px 0 6px; text-wrap:balance}
p,li{max-width:var(--measure)}
p{margin:0 0 14px}
.lede{font-size:18px; color:var(--muted); max-width:var(--measure)}
.muted{color:var(--muted)}
strong{color:var(--gold); font-weight:800}
a{color:var(--green)}
ul,ol{margin:0 0 16px 22px}
li{margin-bottom:7px}
code{font-family:ui-monospace,"Cascadia Code",Consolas,monospace; font-size:.88em;
  background:#00000038; padding:2px 6px; border-radius:6px; color:#dbe9db}

/* ---------- blocks ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:18px 20px; margin:16px 0}
.card h3{margin-top:0}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grid .card{margin:0}
.rule{display:flex; gap:12px; align-items:flex-start; padding:13px 0;
  border-top:1px solid var(--line)}
.rule:first-of-type{border-top:none}
.rule .k{flex:0 0 34px; font-size:24px; line-height:1.2; text-align:center}
.rule .t{flex:1; min-width:0}
.rule .t b{display:block; margin-bottom:2px}
.rule .t span{color:var(--muted); font-size:14.5px}

/* ---------- tables ----------
   Cells WRAP rather than scroll. Tables used to carry `min-width:440px` and
   `white-space:nowrap`, which meant any table wider than the phone became a
   sideways scroller: a reader had to drag a bar to finish a sentence, and on a
   dark page the default track was a bright bar across the layout.
   Now the text reflows and the table always fits its column.
   Numbers keep `nowrap`, because "1,494" broken across two lines is worse than
   a narrow column, and they are short enough never to force an overflow.
   `.scroll` keeps `overflow-x:auto` as a safety net for anything genuinely
   unwrappable; it should now never trigger. */
.scroll{overflow-x:auto; margin:16px 0; border:1px solid var(--line); border-radius:14px}
table{border-collapse:collapse; width:100%; font-size:14.5px; table-layout:auto}
th,td{padding:9px 12px; text-align:right; overflow-wrap:break-word;
  border-bottom:1px solid var(--line)}
td.num,th.num{white-space:nowrap}
/* `break-word` rather than `anywhere`: `anywhere` also lets the browser shrink
   a column below its longest word, which fitted the table and printed "Comm
   on" and "Legen dary" down the rarity column. This breaks a word only when
   the word itself cannot fit. */
@media (max-width:520px){
  th,td{padding:8px 9px; font-size:13.5px}
}
/* On a phone, a six-column table is mostly padding: the crops table spends
   108px of a 333px column on gutters alone. Tightening them is what lets it
   wrap instead of scroll. */
@media (max-width:420px){
  th,td{padding:7px 6px; font-size:13px}
}
/* `overflow-wrap:anywhere` was tried here and reverted. It made every table fit
   a 375px screen, at the price of breaking words mid-syllable in all of them
   ("Uncomm on", "Legendar y"). One dense four-column table in the whitepaper
   still overflows by about 40px on the narrowest phones, and its `.scroll`
   container handles that quietly; that is a better trade than damaging the
   typography of every table on the site. */
th:first-child,td:first-child{text-align:left}
thead th{background:#ffffff0a; color:var(--gold); font-size:12px;
  text-transform:uppercase; letter-spacing:.08em}
tbody tr:last-child td{border-bottom:none}

/* ---------- calls to action ---------- */
.cta{display:inline-flex; align-items:center; gap:8px; background:var(--gold);
  color:#33260a; font-weight:800; text-decoration:none; padding:12px 22px;
  border-radius:14px; font-size:15.5px; transition:filter .15s}
.cta:hover,.cta:focus-visible{filter:brightness(1.08)}
.cta.ghost{background:#ffffff14; color:var(--ink)}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:18px 0}
.badge{display:inline-flex; align-items:center; gap:7px; background:#ffffff10;
  border:1px solid var(--line); border-radius:999px; padding:5px 14px;
  font-size:13px; color:var(--muted)}
.badge.live{border-color:var(--gold); color:var(--gold); background:#f2c14e14}
footer{border-top:1px solid var(--line); margin-top:52px; padding-top:18px;
  color:var(--muted); font-size:13px}
footer a{color:var(--muted)}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
}

/* ---------- quiet scrollbars everywhere ----------
   The game client has carried these since the round-4 polish pass; the public
   pages never got them, so every table that overflows (the crop table, the
   quirk table) drew a bright default track across a dark page. Same rules, so
   the two surfaces match. */
*{scrollbar-width:thin; scrollbar-color:#ffffff24 transparent}
::-webkit-scrollbar{width:7px; height:7px; background:transparent}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#ffffff22; border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#ffffff36}
::-webkit-scrollbar-button{display:none; width:0; height:0}
::-webkit-scrollbar-corner{background:transparent}