/* AVEN — a Solana farmstead. All original artwork + copy. */
:root{
  --ink:#0b1012;
  --ink-2:#111a1c;
  --cream:#efe8d6;
  --dim:#d5ddca;
  --faint:#adb9a6;
  --gold:#f2a541;
  --gold-d:#a86c1d;
  --leaf:#6fae4e;
  --leaf-d:#3d6b34;
  --water:#4b7ea8;
  --line:rgba(242,165,65,.26);
  --panel:rgba(22,30,28,.82);
  --panel-2:rgba(14,20,20,.9);
  --shadow:0 18px 40px -22px rgba(0,0,0,.95);
  --pixel:'Pixelify Sans','Trebuchet MS',sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font:400 15px/1.6 var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{image-rendering:pixelated}
a{color:inherit;text-decoration:none}

/* ---------- backdrop ---------- */
.sky{
  position:fixed;inset:0;z-index:-2;
  background:#0b1012 url('/assets/valley.png') center/cover no-repeat;
}
.sky::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(62% 46% at 50% 34%, rgba(6,10,12,.72) 0%, rgba(6,10,12,.3) 62%, rgba(6,10,12,0) 100%),
    linear-gradient(180deg, rgba(6,10,12,.3) 0%, rgba(6,10,12,.5) 40%, rgba(6,10,12,.88) 100%);
}

/* ---------- preloader ---------- */
.boot{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  background:#0b1012;transition:opacity .55s ease, visibility .55s}
.boot.is-done{opacity:0;visibility:hidden}
.boot__inner{text-align:center}
.boot__art{width:96px;height:96px;animation:sway 2.2s ease-in-out infinite}
@keyframes sway{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.boot__name{font:700 30px/1 var(--pixel);letter-spacing:.16em;margin:14px 0 0}
.boot__line{color:var(--dim);font-size:13px;margin:8px 0 0}
.boot__bar{width:200px;height:6px;margin:14px auto 0;background:#233024;overflow:hidden}
.boot__bar span{display:block;height:100%;width:0;background:var(--gold);transition:width .25s linear}
.boot__pct{font:400 11px/1 var(--body);color:var(--faint);margin:8px 0 0;letter-spacing:.1em}

/* ---------- ticker ---------- */
.ticker{overflow:hidden;background:rgba(12,17,16,.94);border-bottom:1px solid var(--line);position:relative;z-index:5;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.ticker__track{display:flex;width:max-content;animation:slide 34s linear infinite;padding:7px 0}
.ticker__track span{font:400 11px/1 var(--pixel);letter-spacing:.2em;color:#dbc793;white-space:nowrap;padding:0 16px}
.ticker__track i{color:var(--gold-d);font-style:normal}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none}}

/* ---------- nav ---------- */
.nav{
  position:relative;z-index:5;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  max-width:1180px;margin:20px auto 0;padding:12px 18px;
  background:linear-gradient(180deg,rgba(46,38,26,.94),rgba(30,26,20,.94));
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
}
.nav__brand{display:flex;align-items:center;gap:11px}
.nav__brand img{width:36px;height:36px}
.nav__words{display:flex;flex-direction:column;line-height:1}
.nav__name{font:700 24px/1 var(--pixel);letter-spacing:.14em}
.nav__sub{font:600 10px/1.5 var(--body);letter-spacing:.18em;color:var(--faint);font-style:normal}
.nav__links{display:flex;gap:22px;margin-left:auto;font:400 12px/1 var(--pixel);letter-spacing:.18em}
.nav__links a{color:#e8ddc2;opacity:.82;padding:6px 0;border-bottom:1px solid transparent}
.nav__links a:hover{opacity:1;border-bottom-color:var(--gold)}
.nav__right{display:flex;gap:9px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:8px 15px;
  font:400 11px/1 var(--pixel);letter-spacing:.16em;border:1px solid var(--line);cursor:pointer;
  background:rgba(10,14,14,.5);color:#eadfc4;white-space:nowrap}
.pill--cta{background:var(--gold);color:#2a1c08;border-color:transparent}
.pill--cta:hover{background:#ffbb5c}
.dot{width:7px;height:7px;border-radius:50%;background:#7fd87f;box-shadow:0 0 8px #7fd87f}

/* ---------- hero ---------- */
main{position:relative;z-index:4;max-width:1180px;margin:0 auto;padding:0 18px 60px}
.hero{text-align:center;padding:54px 0 22px}
.chip{display:inline-flex;align-items:center;gap:12px;padding:7px 8px 7px 15px;
  background:rgba(10,14,14,.72);border:1px solid var(--line);border-radius:10px;max-width:100%}
.chip__label{font:400 10px/1 var(--pixel);letter-spacing:.2em;color:var(--gold)}
.chip__ca{font:400 11px/1 var(--body);color:#cfc6ad;letter-spacing:.03em;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;max-width:min(46vw,340px)}
.chip__copy{display:inline-flex;align-items:center;gap:6px;background:rgba(242,165,65,.14);
  color:var(--gold);border:1px solid var(--line);border-radius:7px;padding:6px 10px;
  font:400 10px/1 var(--pixel);letter-spacing:.14em;cursor:pointer}
.chip__copy:hover:not(:disabled){background:rgba(242,165,65,.24)}
.chip__copy:disabled{opacity:.4;cursor:default;color:#9a8f76}

.hero__title{font:700 clamp(30px,6.4vw,60px)/1.06 var(--pixel);letter-spacing:.05em;margin:26px 0 0;
  text-shadow:0 4px 0 rgba(0,0,0,.55)}
.hero__title span{display:block}
.hero__title span:last-child{color:var(--gold)}
.hero__lede{max-width:640px;margin:18px auto 0;color:#dde4d2;font-size:16px;text-shadow:0 2px 6px rgba(0,0,0,.7)}

.keys{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin:26px 0 0;
  font:400 11px/1 var(--pixel);letter-spacing:.18em;color:#d9cfb4}
.key-group{display:inline-flex;align-items:center;gap:8px}
.keys__caps{display:inline-flex;gap:4px}
kbd{display:inline-block;min-width:24px;padding:4px 6px;background:#d8cfb4;color:#2b2418;
  border-radius:5px;border-bottom:2px solid #a89c80;font:400 11px/1 var(--pixel);text-align:center}

.crops{margin:30px 0 0}
.crops__label{display:flex;align-items:center;gap:14px;justify-content:center;
  font:400 12px/1 var(--pixel);letter-spacing:.2em;color:#c9bfa4}
.crops__label i{display:block;height:1px;width:clamp(24px,12vw,110px);background:linear-gradient(90deg,transparent,var(--line))}
.crops__label i:last-child{background:linear-gradient(90deg,var(--line),transparent)}
.crops__row{display:flex;justify-content:center;gap:clamp(14px,4vw,40px);list-style:none;margin:18px 0 0;padding:0}
.crops__row li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px}
.crops__row li::after{content:'';position:absolute;top:32px;left:calc(50% + 28px);width:clamp(18px,7vw,74px);
  height:2px;background:linear-gradient(90deg,rgba(242,165,65,.45),rgba(242,165,65,.18))}
.crops__row li:last-child::after{display:none}
.crops__row img{width:44px;height:44px}
.crops__row small{font:400 11px/1 var(--pixel);letter-spacing:.14em;color:var(--dim)}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:18px;align-items:start;margin-top:44px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;
  box-shadow:var(--shadow);backdrop-filter:blur(3px)}
.card--wide{background:rgba(20,28,26,.9)}
.card__kicker{display:flex;align-items:center;gap:8px;margin:0 0 8px;
  font:400 10px/1 var(--pixel);letter-spacing:.2em;color:var(--gold)}
.card__title{font:700 22px/1.15 var(--pixel);letter-spacing:.05em;margin:0}
.card__lede{color:#d3dbca;font-size:14px;margin:8px 0 16px}
.badge{background:rgba(127,216,127,.16);color:#9ce69c;border-radius:999px;padding:3px 8px;
  font:400 9px/1 var(--pixel);letter-spacing:.14em}
.mini{margin-left:auto;display:inline-flex;align-items:center;gap:5px;background:rgba(242,165,65,.12);
  border:1px solid var(--line);color:var(--gold);border-radius:999px;padding:4px 9px;cursor:pointer;
  font:400 9px/1 var(--pixel);letter-spacing:.14em}
.mini:hover{background:rgba(242,165,65,.24)}

/* ledger */
.ledger{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ledger li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:13px}
.ledger b{font-weight:600;color:#e7dfc8}
.ledger em{font-style:normal;color:var(--faint);font-size:12px}
.ledger .bar{grid-column:1/-1;height:5px;background:#26302a;border-radius:3px;overflow:hidden}
.ledger .bar span{display:block;height:100%;background:linear-gradient(90deg,var(--leaf-d),var(--leaf))}
.ledger__total{display:flex;justify-content:space-between;align-items:baseline;margin:16px 0 0;
  padding-top:12px;border-top:1px solid rgba(242,165,65,.18);
  font:400 11px/1 var(--pixel);letter-spacing:.18em;color:var(--faint)}
.ledger__total b{font:700 20px/1 var(--pixel);color:var(--gold);letter-spacing:.08em}

/* form */
.form{display:grid;gap:7px}
.form__label{font:400 10px/1 var(--pixel);letter-spacing:.18em;color:#c2b99f}
.form__label span{opacity:.6;letter-spacing:.1em}
.form__row{display:flex;gap:8px}
.form input{flex:1;min-width:0;background:rgba(8,12,12,.78);border:1px solid rgba(242,165,65,.22);
  border-radius:9px;padding:11px 12px;color:var(--cream);font:400 13px/1.2 var(--body)}
.form input::placeholder{color:#6e7a6c}
.form input:focus{outline:none;border-color:rgba(242,165,65,.7);background:rgba(8,12,12,.95)}
.form input.is-bad{border-color:#d4694f}
.form input.is-good{border-color:#6fbf5e}
.form__check{width:44px;flex:0 0 44px;border-radius:9px;border:1px solid var(--line);
  background:rgba(242,165,65,.14);color:var(--gold);cursor:pointer;display:grid;place-items:center}
.form__check:hover{background:rgba(242,165,65,.26)}
.form__hint{font-size:12.5px;color:var(--dim);margin:0 0 10px}
.form__hint.is-bad{color:#e08a6f}
.form__hint.is-good{color:#95dd86}
.form__plate{display:flex;align-items:center;gap:8px;margin:6px 0 12px;padding:9px 11px;
  background:rgba(8,12,12,.6);border:1px dashed rgba(242,165,65,.24);border-radius:9px;
  font:400 11px/1 var(--pixel);letter-spacing:.12em;color:#ded3b6}
.form__plate img{width:20px;height:20px}
.form__plate span{margin-left:auto;color:var(--faint);letter-spacing:.08em}
.form__submit{width:100%;padding:13px;border:none;border-radius:10px;cursor:pointer;
  background:var(--gold);color:#2a1c08;font:700 13px/1 var(--pixel);letter-spacing:.16em}
.form__submit:hover{background:#ffbb5c}
.form__note{text-align:center;font:400 10.5px/1 var(--pixel);letter-spacing:.2em;color:var(--faint);margin:10px 0 0}

/* leaderboard */
.board{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:b}
.board li{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:10px;
  padding:9px 11px;background:rgba(9,13,13,.55);border:1px solid rgba(242,165,65,.14);border-radius:9px}
.board li::before{counter-increment:b;content:counter(b);font:400 10px/1 var(--pixel);color:var(--faint)}
.board li:first-child{border-color:rgba(242,165,65,.6);border-left:3px solid var(--gold);
  background:rgba(242,165,65,.12)}
.board li:first-child .who{color:#fff5df;font-weight:600}
.board .who{font-size:13px;color:#e9e1ca}
.board .who small{display:block;font:400 11px/1.5 var(--pixel);letter-spacing:.12em;color:var(--faint)}
.board .amt{font:700 13px/1 var(--pixel);color:var(--gold)}
.board__note{font-size:12.5px;color:var(--dim);margin:14px 0 0}

/* footer */
.foot{position:relative;z-index:4;text-align:center;padding:30px 18px 46px;border-top:1px solid rgba(242,165,65,.14)}
.foot img{margin-bottom:8px}
.foot p{color:var(--dim);font-size:13px;margin:0}
.foot__sep{color:var(--gold-d)}
.foot__x{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 14px;
  border:1px solid var(--line);border-radius:999px;color:var(--gold);
  font-size:12px;letter-spacing:.04em;text-decoration:none;transition:.22s}
.foot__x svg{opacity:.9}
.foot__x:hover{background:rgba(242,165,65,.12);border-color:var(--gold);color:var(--cream)}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:80;
  background:rgba(18,26,22,.96);border:1px solid var(--line);color:var(--cream);
  padding:11px 18px;border-radius:10px;font-size:13px;opacity:0;pointer-events:none;transition:.28s}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

@media (max-width:900px){
  .cards{grid-template-columns:1fr}
  .nav{gap:12px}
  .nav__links{order:3;width:100%;justify-content:space-around;margin:0}
  .nav__links a{padding:12px 10px}
  .nav__right{order:2;margin-left:auto}
}
@media (max-width:400px){
  .crops__row{gap:10px}
  .crops__row img{width:36px;height:36px}
  .crops__row li::after{left:calc(50% + 22px);width:22px;top:26px}
  .crops__row small{font-size:10px;letter-spacing:.1em}
  .keys{gap:10px;font-size:10px}
}
@media (max-width:520px){
  .hero{padding:34px 0 12px}
  .keys{gap:14px}
  .chip__ca{max-width:38vw}
}