/* OnchainHarvest — site styling.
   One screen and nothing under it. The page is meant to read as the game
   world rather than as a web page: a timber nav, a nailed sign, and a game
   button. Palette comes from the tilesets so nothing clashes with the art.
   Styles for the sections that used to sit below the hero were removed with
   them; the old file is in the scratchpad. */

:root{
  --night:#131a14; --night2:#1a2419; --board:#8a6a3e; --board2:#6b5130;
  --parch:#f2e3c0; --parch2:#e2cfa4; --ink:#3a2e1c;
  --grass:#5d8f3e; --leaf:#7fa85a; --gold:#f7cd4a; --green:#7cc243;
  --green2:#5c9c2e; --red:#c4705a; --sky:#8fc7e8;
  --line:rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--night); color:var(--parch);
  font:16px/1.6 "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{display:block; image-rendering:pixelated}
h2{font-size:clamp(26px,4vw,42px); margin:0 0 6px; letter-spacing:.02em;
   text-shadow:0 3px 0 rgba(0,0,0,.45)}
h3{margin:0 0 6px; font-size:19px}
a{color:inherit}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; text-decoration:none; font-weight:700; letter-spacing:.06em;
  padding:11px 22px; border-radius:9px; border:3px solid rgba(0,0,0,.4);
  box-shadow:0 5px 0 rgba(0,0,0,.4); transition:transform .08s, box-shadow .08s;
  white-space:nowrap;
}
.btn:active{transform:translateY(4px); box-shadow:0 1px 0 rgba(0,0,0,.4)}
.btn.green{
  background:linear-gradient(#9ade5c,var(--green2)); color:#173007;
  border-color:#3f6b1c; text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.btn.green:hover{filter:brightness(1.07)}
.btn.big{font-size:20px; padding:15px 32px}

/* ---------- nav ----------
   A plank, not a web header. The old bar was the most generic thing on the
   page — flat dark strip, system sans, a gradient pill — sitting on top of
   hand-made pixel art. Same timber as the sign, pixel type, and a button
   with a hard edge and a lip you can press. */
#nav{
  position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center;
  gap:24px; padding:11px 18px;
  background:linear-gradient(#8a6a3e 0%, #7a5c34 55%, #63492a 100%);
  border-bottom:4px solid #46341d;
  box-shadow:0 3px 0 rgba(0,0,0,.35);
  font-family:"Silkscreen",ui-monospace,monospace;
}
/* nail heads, like the ones on the sign */
#nav::before,#nav::after{
  content:""; position:absolute; top:16px; width:7px; height:7px; border-radius:50%;
  background:#d8c9a4; box-shadow:inset 0 -2px 0 rgba(0,0,0,.4);
}
#nav::before{left:8px} #nav::after{right:8px}

/* The same avatar as the X profile, so the two read as one account. Square
   with a timber keyline rather than a circle — nothing else in this world is
   round. The two-line wordmark stays where it belongs: the big sign in the
   middle of the field. */
.brand{display:flex; align-items:center; text-decoration:none; flex:0 0 auto}
.brand img{
  width:40px; height:40px; display:block; border:3px solid #46341d;
  box-shadow:0 3px 0 rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.15);
}
.brand:hover img{border-color:#ffd24a}
.navright{display:flex; align-items:center; gap:16px; margin-left:auto}
/* Links out to the account, in the same square timber frame as the avatar
   — nothing in this world is round. */
.xlink{
  width:40px; height:40px; flex:0 0 auto; display:grid; place-items:center;
  background:#2b2013; border:3px solid #46341d;
  box-shadow:0 3px 0 rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.15);
}
.xlink svg{width:19px; height:19px; fill:#e8dbbd; display:block}
.xlink:hover{border-color:#ffd24a}
.xlink:hover svg{fill:#ffd24a}
#nav .btn{
  font:700 12px/1 "Silkscreen",monospace; letter-spacing:.06em;
  border-radius:0; padding:11px 18px; border-width:3px;
}

/* ---------- hero ---------- */
.hero{position:relative; height:100vh; min-height:560px; overflow:hidden}
#scene{position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated}
.heroui{
  /* Centred on the ROAD, not on the viewport. scene.js puts the walking line
     at 62% of the height, so the block is nudged down by the difference —
     centring on 50% left it floating above the farmer. */
  /* Shifted towards the road, but not all the way onto it: a full 12% put
     the button down into the quote bar. The bottom padding reserves the
     quote bar's own height so the two can never meet. */
  --road-at: 56%;
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  padding-bottom:76px;
  transform: translateY(calc(var(--road-at) - 50%));
}
.sign{
  background:linear-gradient(var(--board),var(--board2));
  border:5px solid #4a3722; border-radius:12px; padding:22px 40px 18px;
  box-shadow:0 10px 0 rgba(0,0,0,.42), inset 0 2px 0 rgba(255,255,255,.15);
  text-align:center; position:relative;
}
.sign::before,.sign::after{
  content:""; position:absolute; top:12px; width:11px; height:11px; border-radius:50%;
  background:#d8c9a4; box-shadow:inset 0 -2px 0 rgba(0,0,0,.35);
}
.sign::before{left:14px} .sign::after{right:14px}
.wordmark{width:min(420px,74vw); height:auto; margin:0 auto}
.tagline{margin-top:10px; color:#f0e2bd; font-size:15px; letter-spacing:.05em;
  text-shadow:0 2px 0 rgba(0,0,0,.4)}

/* The quote rotates between everyone who lives here, each with their own
   portrait, so it reads as the farm talking rather than one decorative line.
   Pinned to the foot of the hero so it never covers the pens. */
.quote{
  position:absolute; left:50%; transform:translateX(-50%); bottom:18px; z-index:3;
  margin:0; display:flex; align-items:center; gap:14px;
  width:min(640px,92vw); padding:11px 18px;
  background:rgba(15,21,16,.88); border:2px solid rgba(0,0,0,.5); border-radius:9px;
  transition:opacity .35s;
}
.quote.fade{opacity:0}
.quote img{width:42px; height:42px; object-fit:contain; flex:0 0 42px}
.quote figcaption{display:flex; flex-direction:column; gap:2px; min-width:0}
.quote b{font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); font-weight:600}
.quote span{font-size:14px; color:#dfe8d4; font-style:italic; line-height:1.45}
@media(max-width:620px){ .quote{display:none} }

/* ---------- whitelist ledger ----------
   A page of its own, deliberately not the home screen: no village, no canvas,
   no walking farmer. Tilled soil under a dark wash instead — the same farm,
   but plainly somewhere else. The form is a parchment ledger nailed to
   timber, which is what signing up at the Estate office would look like. */
body.claimpage{
  min-height:100vh; display:flex; flex-direction:column;
  background:
    linear-gradient(rgba(9,13,10,.74), rgba(9,13,10,.88)),
    url("assets/tiles/soil_fill.png") center/64px repeat;
}
.claim{
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:14px; padding:104px 18px 44px;
}
.where{
  margin:0; font:400 10px/1 "Silkscreen",monospace; letter-spacing:.22em;
  text-transform:uppercase; color:#9a8a63;
}
.ledger{
  width:min(560px,100%); position:relative;
  background:linear-gradient(var(--parch),var(--parch2)); color:var(--ink);
  border:5px solid #4a3722; border-radius:12px; padding:26px 30px 28px;
  box-shadow:0 12px 0 rgba(0,0,0,.42), inset 0 2px 0 rgba(255,255,255,.35);
}
/* the same nail heads as the sign in the field */
.ledger::before,.ledger::after{
  content:""; position:absolute; top:14px; width:11px; height:11px; border-radius:50%;
  background:#b79b62; box-shadow:inset 0 -2px 0 rgba(0,0,0,.35);
}
.ledger::before{left:16px} .ledger::after{right:16px}
.ledger h1{
  margin:0 0 6px; text-align:center; color:#4a3a1e;
  font:400 18px/1.5 "Silkscreen",monospace; letter-spacing:.02em;
}
.ledger .sub{margin:0 0 20px; text-align:center; font-size:14px; color:#6a5732}

.field{margin-bottom:15px}
.field label{
  display:block; margin-bottom:7px; color:#6a5732;
  font:400 10px/1 "Silkscreen",monospace; letter-spacing:.12em;
}
.field input{
  width:100%; font:inherit; font-size:15px; color:var(--ink);
  background:#f8eed6; border:3px solid #b79b62; border-radius:7px;
  padding:11px 13px; outline:none;
}
.field input::placeholder{color:#a89267}
.field input:focus{border-color:var(--green2); background:#fff8e6}
.field.bad input{border-color:#a63d28}
.field .err{margin:7px 0 0; font-size:13px; color:#a63d28}
.field .err:empty{display:none}

/* Honour system: confirming a follow needs a paid X API, so the box ticks
   when the link is actually opened and a human checks it before the mint. */
.tasks{margin:20px 0 22px; border-top:2px dashed #c7ab74; padding-top:14px}
.task{display:flex; align-items:center; gap:12px; padding:10px 0;
  border-bottom:1px dashed #d9c395}
.task:last-child{border-bottom:0}
.task .box{
  width:22px; height:22px; flex:0 0 22px; border:3px solid #b79b62; border-radius:5px;
  background:#f8eed6; position:relative;
}
.task.done .box{background:var(--green2); border-color:#3f6b1c}
.task.done .box::after{
  content:""; position:absolute; left:4px; top:0; width:6px; height:11px;
  border:solid #fff; border-width:0 3px 3px 0; transform:rotate(42deg);
}
.task span{flex:1; font-size:14.5px; color:#5a4a2c}
.task a{
  text-decoration:none; color:#6a5732; background:#e7d5ad;
  border:2px solid #b79b62; border-radius:6px; padding:8px 12px;
  font:400 10px/1 "Silkscreen",monospace; letter-spacing:.08em;
}
.task a:hover{border-color:var(--green2); color:#2f6b17}
.task.done a{opacity:.55}

.ledger .btn{display:block; width:100%; text-align:center; font-size:17px; padding:14px 20px}
.ledger .btn[disabled]{filter:grayscale(.72) brightness(.92); pointer-events:none}
.note{margin:14px 0 0; text-align:center; font-size:12.5px; color:#7a6844; line-height:1.5}
.note.bad{color:#a63d28}

.done-card{text-align:center}
.done-card img{width:84px; height:auto; margin:0 auto 14px}
.done-card p{margin:0 0 6px; font-size:15px; color:#5a4a2c}
.done-card b{color:#2f6b17}

@media(max-width:560px){
  .ledger{padding:22px 18px 24px}
  .task{flex-wrap:wrap}
  .task span{flex:1 1 100%; order:3}
}