/* ══════════════════════════════════════════════════════════════
   Crypto Fauna — Field Survey Division
   Original system: field-notebook / naturalist survey, NOT the dark
   neon-terminal look used on the other projects. Paper-warm ground,
   ink line-work, Robinhood lime as the specimen accent only.
   ══════════════════════════════════════════════════════════════ */

:root{
  --lime:#CCFF00;          /* the collection's brand field */
  --lime-d:#A8D400;
  --ink:#1C180D;           /* measured from the art */
  --ink-2:#3A3527;
  --paper:#F4F1E4;         /* notebook stock */
  --paper-2:#E9E4D2;
  --paper-3:#DCD5BE;
  --rule:#C8C0A4;          /* ruled lines */
  --red:#C0392B;           /* correction pen */
  --blue:#2C4B7C;          /* field-pen blue */
  --ok:#2E7D4F;
  --shadow:0 2px 0 var(--ink);
  --mono:'Silkscreen',monospace;
  --disp:'VT323',monospace;
  --body:'Inter',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  /* ruled-paper ground: horizontal rules + faint margin line */
  background-image:
    repeating-linear-gradient(to bottom,transparent 0 31px,rgba(200,192,164,.42) 31px 32px),
    linear-gradient(to right,transparent 0 46px,rgba(192,57,43,.16) 46px 48px,transparent 48px);
}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.tag-line{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;
  color:var(--ink-2);opacity:.8;margin-bottom:14px;
}
.h2{
  font-family:var(--disp);font-size:clamp(2rem,4.4vw,3.1rem);
  line-height:1;letter-spacing:-.01em;margin-bottom:28px;
}

/* ── instrument bar ───────────────────────────────────────── */
.instrument{background:var(--ink);color:var(--paper);border-bottom:2px solid var(--ink)}
.inst-wrap{
  max-width:1180px;margin:0 auto;padding:7px 24px;
  display:flex;gap:26px;align-items:center;flex-wrap:wrap;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;
}
.inst-cell{display:flex;align-items:center;gap:7px;opacity:.82}
.inst-cell b{color:var(--lime);opacity:1;font-weight:400}
.dot{width:7px;height:7px;background:var(--red);display:inline-block;border-radius:50%}
.dot.live{background:var(--lime);box-shadow:0 0 0 3px rgba(204,255,0,.22)}

/* ── masthead ─────────────────────────────────────────────── */
.masthead{
  position:sticky;top:0;z-index:60;
  background:var(--paper);border-bottom:2px solid var(--ink);
}
.mast-wrap{
  max-width:1180px;margin:0 auto;padding:12px 24px;
  display:flex;align-items:center;gap:24px;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand-chip{
  width:44px;height:44px;image-rendering:pixelated;
  border:2px solid var(--ink);background:var(--lime);box-shadow:var(--shadow);
}
.brand-txt{display:flex;flex-direction:column;line-height:1.12}
.brand-txt b{font-family:var(--mono);font-size:.9rem;letter-spacing:.05em}
.brand-txt i{
  font-family:var(--mono);font-style:normal;font-size:.54rem;
  letter-spacing:.16em;color:var(--ink-2);opacity:.75;
}
.nav{display:flex;gap:22px;margin-left:auto}
.nav a{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;
  color:var(--ink-2);text-decoration:none;padding:5px 0;
  border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--ink);border-bottom-color:var(--lime-d)}

.wbtn{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  padding:11px 18px;border:2px solid var(--ink);background:var(--lime);
  color:var(--ink);cursor:pointer;box-shadow:var(--shadow);
}
.wbtn:hover{background:var(--ink);color:var(--lime);}
.wbtn:active{transform:translateY(2px);box-shadow:none}
.wbtn.on{background:var(--paper-2)}

/* ── expedition ───────────────────────────────────────────── */
.expo{padding:56px 0 44px}
.expo-grid{
  max-width:1180px;margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:minmax(300px,.82fr) minmax(340px,1.18fr);
  gap:46px;align-items:start;
}
.brief h1{
  font-family:var(--disp);font-size:clamp(2.6rem,6vw,4.4rem);
  line-height:.94;letter-spacing:-.02em;margin:6px 0 18px;
}
.brief h1 span{
  background:var(--lime);padding:0 .18em;
  box-shadow:4px 4px 0 var(--ink);display:inline-block;
}
.lede{font-size:.95rem;color:var(--ink-2);margin-bottom:14px;max-width:46ch}

.permit-strip{
  border:2px solid var(--ink);background:var(--paper-2);
  box-shadow:var(--shadow);margin:22px 0 16px;
}
.ps-row{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 15px;border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:.63rem;letter-spacing:.09em;
}
.ps-row:last-child{border-bottom:0}
.ps-row b{font-weight:400;color:var(--ink)}
.ps-row b.free{background:var(--lime);padding:2px 8px;border:1px solid var(--ink)}
.brief-note{
  font-size:.78rem;color:var(--ink-2);opacity:.85;
  border-left:3px solid var(--lime-d);padding-left:12px;
}

/* ── habitat (survey field) ───────────────────────────────── */
.hab-head{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:2px solid var(--ink);border-bottom:0;background:var(--ink);
}
.hh-cell{padding:9px 12px;border-right:1px solid rgba(244,241,228,.2)}
.hh-cell:last-child{border-right:0}
.hh-cell i{
  display:block;font-family:var(--mono);font-style:normal;font-size:.52rem;
  letter-spacing:.15em;color:rgba(244,241,228,.6);
}
.hh-cell b{font-family:var(--disp);font-size:1.6rem;color:var(--lime);font-weight:400}

.hab-frame{position:relative;border:2px solid var(--ink);box-shadow:var(--shadow);background:var(--lime)}
/* The canvas id is #fieldCanvas. A rule left on the old #habitat id matches
   nothing, so the 720px attribute width escapes its column and pushes the
   whole page into horizontal scroll. */
#fieldCanvas{display:block;width:100%;height:auto;image-rendering:pixelated;cursor:crosshair;touch-action:manipulation}
.hab-veil{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(28,24,13,.9);padding:22px;
}
.hab-veil[hidden]{display:none}
.veil-inner{max-width:400px;text-align:center;color:var(--paper)}
.veil-title{font-family:var(--mono);font-size:.82rem;letter-spacing:.14em;color:var(--lime);margin-bottom:12px}
.veil-copy{font-size:.85rem;color:rgba(244,241,228,.86);margin-bottom:18px}
.veil-kb{font-family:var(--mono);font-size:.54rem;letter-spacing:.1em;color:rgba(244,241,228,.55);margin-top:14px}
kbd{
  background:var(--paper);color:var(--ink);border:1px solid var(--ink);
  padding:1px 5px;font-family:var(--mono);font-size:.54rem;
}
.hab-load{
  position:absolute;left:0;right:0;bottom:0;padding:7px 12px;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;
  background:var(--ink);color:var(--lime);
}
.hab-load[hidden]{display:none}

.gbtn{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  padding:13px 26px;border:2px solid var(--ink);background:var(--lime);
  color:var(--ink);cursor:pointer;box-shadow:var(--shadow);
}
.gbtn:hover{background:var(--paper);}
.gbtn:active{transform:translateY(2px);box-shadow:none}
.gbtn.ghost{background:var(--paper-2)}
.hab-foot{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border:2px solid var(--ink);border-top:0;padding:12px 14px;background:var(--paper-2);
}
.hab-hint{font-family:var(--mono);font-size:.56rem;letter-spacing:.09em;color:var(--ink-2)}

/* ── field log ────────────────────────────────────────────── */
.logsec{padding:44px 0;border-top:2px solid var(--ink);background:var(--paper-2)}
.log-grid{display:grid;grid-template-columns:1.32fr .68fr;gap:34px;align-items:start}
.log-strip{
  border:2px solid var(--ink);background:var(--paper);box-shadow:var(--shadow);
  min-height:132px;padding:12px;
  display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;
}
.log-empty{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.09em;
  color:var(--ink-2);opacity:.7;align-self:center;margin:auto;
}
.chip{
  width:52px;height:52px;border:2px solid var(--ink);background:var(--lime);
  image-rendering:pixelated;position:relative;
}
.chip.free::after{
  content:'FREE';position:absolute;left:-2px;right:-2px;bottom:-2px;
  background:var(--lime);color:var(--ink);border:2px solid var(--ink);
  font-family:var(--mono);font-size:.42rem;text-align:center;letter-spacing:.06em;
}

.stepper{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border:2px solid var(--ink);border-top:0;padding:12px 14px;background:var(--paper-3);
}
.step{
  width:40px;height:40px;border:2px solid var(--ink);background:var(--paper);
  font-family:var(--disp);font-size:1.5rem;cursor:pointer;box-shadow:var(--shadow);
}
.step:hover{background:var(--lime)}
.step:active{transform:translateY(2px);box-shadow:none}
.step-val{text-align:center;min-width:96px}
.step-val b{display:block;font-family:var(--disp);font-size:2rem;line-height:1;font-weight:400}
.step-val i{font-family:var(--mono);font-style:normal;font-size:.5rem;letter-spacing:.14em;color:var(--ink-2)}
.quick{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.quick button{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;
  padding:8px 11px;border:2px solid var(--ink);background:var(--paper);
  cursor:pointer;box-shadow:var(--shadow);
}
.quick button:hover{background:var(--lime)}
.quick button:active{transform:translateY(2px);box-shadow:none}

.claim{border:2px solid var(--ink);background:var(--paper);box-shadow:var(--shadow);padding:18px}
.claim-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;
  padding:7px 0;color:var(--ink-2);
}
.claim-row b{color:var(--ink);font-weight:400}
.claim-rule{height:2px;background:var(--ink);margin:8px 0}
.claim-row.big{font-size:.72rem}
.claim-row.big b{font-family:var(--disp);font-size:1.7rem}
.claim-usd{
  font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;
  color:var(--ink-2);text-align:right;margin-bottom:14px;
}
.mintbtn{
  width:100%;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  padding:16px;border:2px solid var(--ink);background:var(--lime);
  color:var(--ink);cursor:pointer;box-shadow:var(--shadow);
}
.mintbtn:hover:not(:disabled){background:var(--ink);color:var(--lime)}
.mintbtn:active:not(:disabled){transform:translateY(2px);box-shadow:none}
.mintbtn:disabled{background:var(--paper-3);color:var(--ink-2);cursor:not-allowed;opacity:.75}
.claim-note{font-size:.72rem;color:var(--ink-2);margin-top:12px;opacity:.9}

/* ── archive ──────────────────────────────────────────────── */
.arch{padding:48px 0;border-top:2px solid var(--ink)}
.arch-filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:20px}
.arch-filters button{
  font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;
  padding:8px 12px;border:2px solid var(--ink);background:var(--paper);
  cursor:pointer;box-shadow:var(--shadow);
}
.arch-filters button:hover{background:var(--paper-2)}
.arch-filters button[aria-pressed=true]{background:var(--lime)}
.arch-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:8px}
.plate{
  position:relative;border:2px solid var(--ink);background:var(--lime);
  aspect-ratio:1;image-rendering:pixelated;cursor:pointer;
}
.plate:hover{outline:3px solid var(--ink);outline-offset:2px;z-index:2}
.plate-cap{
  position:absolute;left:-2px;right:-2px;bottom:-2px;
  background:var(--ink);color:var(--lime);
  font-family:var(--mono);font-size:.42rem;letter-spacing:.04em;
  padding:2px 3px;text-align:center;opacity:0;transition:opacity .12s;
}
.plate:hover .plate-cap{opacity:1}
.arch-foot{
  font-family:var(--mono);font-size:.56rem;letter-spacing:.09em;
  color:var(--ink-2);margin-top:18px;opacity:.8;
}

/* ── permit terms ─────────────────────────────────────────── */
.permitsec{padding:48px 0;border-top:2px solid var(--ink);background:var(--paper-2)}
.terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:18px}
.term{border:2px solid var(--ink);background:var(--paper);box-shadow:var(--shadow);padding:18px}
.term b{
  font-family:var(--disp);font-size:1.9rem;color:var(--lime-d);
  display:block;line-height:1;margin-bottom:8px;font-weight:400;
}
.term h3{font-family:var(--mono);font-size:.68rem;letter-spacing:.07em;margin-bottom:8px}
.term p{font-size:.82rem;color:var(--ink-2)}

/* ── footer ───────────────────────────────────────────────── */
.foot{background:var(--ink);color:var(--paper);padding:26px 0;border-top:2px solid var(--ink)}
.foot-wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.foot-chip{
  width:46px;height:46px;image-rendering:pixelated;
  border:2px solid var(--lime);background:var(--lime);
}
.foot-txt b{display:block;font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:var(--lime)}
.foot-txt span{font-size:.76rem;color:rgba(244,241,228,.7)}
.foot-meta{
  margin-left:auto;font-family:var(--mono);font-size:.54rem;
  letter-spacing:.1em;color:rgba(244,241,228,.6);
}

/* ── modal + toast ────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:rgba(28,24,13,.86);padding:22px}
.modal[hidden]{display:none}
.modal-card{width:100%;max-width:400px;background:var(--paper);border:2px solid var(--ink);box-shadow:6px 6px 0 rgba(0,0,0,.3)}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 15px;border-bottom:2px solid var(--ink);background:var(--lime);
}
.modal-head b{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em}
.x{background:none;border:0;font-size:1.5rem;cursor:pointer;line-height:1;color:var(--ink)}
.wlist{padding:12px;display:flex;flex-direction:column;gap:8px}
.wrow{
  display:flex;align-items:center;gap:11px;padding:12px;
  border:2px solid var(--ink);background:var(--paper-2);cursor:pointer;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;text-align:left;
}
.wrow:hover{background:var(--lime)}
.wrow img{width:24px;height:24px}
.modal-note{padding:0 15px 14px;font-size:.72rem;color:var(--ink-2)}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:300;max-width:min(92vw,520px);
  background:var(--ink);color:var(--paper);border:2px solid var(--lime);
  padding:13px 17px;font-family:var(--mono);font-size:.6rem;letter-spacing:.07em;
  box-shadow:0 4px 0 rgba(0,0,0,.35);
}
.toast[hidden]{display:none}
.toast a{color:var(--lime)}

/* ── responsive ───────────────────────────────────────────── */
@media(max-width:1000px){
  .expo-grid{grid-template-columns:1fr;gap:34px}
  .log-grid{grid-template-columns:1fr;gap:24px}
  .arch-grid{grid-template-columns:repeat(6,1fr)}
}
@media(max-width:720px){
  .nav{display:none}
  .hide-sm{display:none}
  .mast-wrap{gap:12px}
  .arch-grid{grid-template-columns:repeat(4,1fr)}
  .hh-cell b{font-size:1.3rem}
  .quick{margin-left:0;width:100%}
  .inst-wrap{gap:14px;font-size:.54rem}
}
@media(max-width:420px){
  .arch-grid{grid-template-columns:repeat(3,1fr)}
  .chip{width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

/* ══════════════════════════════════════════════════════════
   CATCH MECHANIC ADDITIONS
   Written against the same :root tokens as the rest of the sheet, so the
   new panels sit in the notebook palette rather than looking bolted on.
   ══════════════════════════════════════════════════════════ */

/* ── caught specimen cards ────────────────────────────────── */
.spec{
  display:flex;align-items:center;gap:10px;
  border:2px solid var(--ink);background:var(--paper);
  box-shadow:var(--shadow);padding:8px;min-width:0;
}
.spec-img{
  width:52px;height:52px;flex:0 0 auto;
  image-rendering:pixelated;border:2px solid var(--ink);
}
.spec-lab{
  display:flex;flex-direction:column;gap:2px;min-width:0;
  font-family:var(--mono);letter-spacing:.06em;
}
.spec-lab b{font-size:.66rem;color:var(--ink);font-weight:400}
.spec-lab i{font-size:.52rem;color:var(--ink-2);font-style:normal}
.spec-lab .badge{
  font-size:.46rem;letter-spacing:.08em;font-style:normal;
  align-self:flex-start;margin-top:2px;padding:2px 5px;
  background:var(--ok);color:var(--paper);
}
.spec-lab .badge.paid{background:var(--blue)}

/* ── skip the hunt ────────────────────────────────────────── */
.buysec{padding:48px 0;border-top:2px solid var(--ink);background:var(--paper)}
.buy-lede{
  font-size:.92rem;color:var(--ink-2);max-width:62ch;
  margin:0 0 22px;line-height:1.6;
}
.buy-grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:start;
}
.buy-stepper{
  border:2px solid var(--ink);background:var(--paper-2);
  box-shadow:var(--shadow);padding:18px;
}
.buy-total{
  border:2px solid var(--ink);background:var(--paper);
  box-shadow:var(--shadow);padding:18px;
}
.bt-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  color:var(--ink-2);padding-bottom:4px;
}
.bt-row b{font-family:var(--disp);font-size:1.7rem;color:var(--ink);font-weight:400}
.bt-usd{
  font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;
  color:var(--ink-2);text-align:right;margin-bottom:14px;
}

/* ── archive plate captions ───────────────────────────────────
   The archive builds a <figcaption>, so style that element directly:
   a rule keyed only to .plate-cap would leave every caption unstyled. */
.plate figcaption{
  position:absolute;left:-2px;right:-2px;bottom:-2px;
  background:var(--ink);color:var(--lime);
  font-family:var(--mono);font-size:.42rem;letter-spacing:.03em;
  padding:3px 3px;text-align:center;line-height:1.45;
  opacity:0;transition:opacity .12s;
  display:flex;flex-direction:column;gap:1px;
}
.plate:hover figcaption,.plate:focus-within figcaption{opacity:1}
.plate figcaption b{font-weight:400}
.plate figcaption .pl-sub{opacity:.72}
.plate canvas{width:100%;height:100%;display:block;image-rendering:pixelated}

/* ── wallet picker rows ───────────────────────────────────── */
.wdot{
  width:22px;height:22px;flex:0 0 auto;
  background:var(--lime);border:2px solid var(--ink);
}

/* ── responsive: these rules live after the sheet's own media
   queries, so they need their own breakpoints to take effect. ── */
@media(max-width:1000px){
  .buy-grid{grid-template-columns:1fr;gap:18px}
}
@media(max-width:720px){
  .spec-img{width:44px;height:44px}
  .buy-lede{font-size:.86rem}
}