:root{
  --ink:#1f1c17; --cream:#f4efe3; --card:#fffdf8; --frame:#2b2b2b;
  --teal:#0b7285; --terra:#b5462b; --amber:#f0a500;
  --line:#e0d7c4; --muted:#8a7f68;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; color:var(--ink); background:#e9e4d8;
  font-family:"Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  padding-bottom:48px; line-height:1.5;
}

/* ---- header ------------------------------------------------------------- */
header{
  position:sticky; top:0; z-index:20; background:var(--frame); color:#fff;
  padding:calc(10px + env(safe-area-inset-top)) 14px 0;
}
.header-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
header h1{ font-size:16px; margin:0 0 8px; font-weight:700; }
.leader-badge{ font-size:11px; background:var(--amber); color:#3a2c00; font-weight:700;
  padding:3px 8px; border-radius:20px; white-space:nowrap; }
.leader-badge button{ background:none; border:none; color:#3a2c00; font-weight:700;
  text-decoration:underline; cursor:pointer; font-size:11px; padding:0 0 0 4px; }
.prog{ font-size:12.5px; color:#e9dcc4; }
.bar{ height:6px; background:#4a463d; border-radius:4px; overflow:hidden; margin:6px 0 0; }
.bar > i{ display:block; height:100%; width:0; background:var(--amber); transition:width .3s; }
.header-tools{ margin-top:8px; }
.geo-btn{ background:#3a3a3a; color:#e9dcc4; border:1px solid #55514a; border-radius:20px;
  font-size:12.5px; font-weight:600; padding:6px 12px; cursor:pointer; }
.geo-btn.on{ background:var(--teal); color:#fff; border-color:var(--teal); }
.geo-nudge{ background:#0b7285; color:#fff; font-size:13px; font-weight:600;
  border-radius:8px; padding:8px 10px; margin:8px 0 0; }
nav{ display:flex; margin-top:8px; }
nav button{ flex:1; background:none; border:none; color:#cfc7b6; font-size:14px;
  font-weight:600; padding:12px 4px; border-bottom:3px solid transparent; cursor:pointer; }
nav button.on{ color:#fff; border-color:var(--amber); }

/* ---- layout ------------------------------------------------------------- */
main{ max-width:640px; margin:0 auto; padding:14px; }
.view{ display:none; } .view.on{ display:block; }
.lead{ font-size:14.5px; color:#5a5040; margin:6px 2px 16px; }
.section-h{ font-size:16px; margin:22px 2px 10px; color:var(--terra); }
.foot{ text-align:center; font-size:12px; color:var(--muted); margin:18px 4px 0; }

/* ---- cards / seeds ------------------------------------------------------ */
.cards{ display:block; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:14px; margin:0 0 14px; box-shadow:0 1px 4px rgba(0,0,0,.06); }
.card.done{ border-color:#8bc7a0; box-shadow:0 0 0 2px #cdeed8 inset; }
.card-head{ display:flex; align-items:center; gap:8px; }
.cnum{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:50%; background:var(--terra); color:#fff; font-weight:700; font-size:14px; flex:0 0 auto; }
.cnum.teal{ background:var(--teal); } .cnum.terra{ background:var(--terra); }
.card.done .cnum{ background:#3a9d63; }
.ctitle{ font-weight:700; font-size:15px; }
.seedwrap{ background:#fff; border:3px solid var(--frame); border-radius:8px;
  margin:10px 0; padding:6px; position:relative; }
.seedwrap::after{ content:"seed"; position:absolute; top:6px; right:9px; font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; color:#bcb3a2; }
.seedwrap img{ width:100%; display:block; border-radius:5px; }
.row{ display:flex; gap:8px; align-items:stretch; margin-top:4px; }
.btn{ border:none; border-radius:9px; font-size:14px; font-weight:600; padding:12px;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.btn-photo{ background:#eef4f5; color:var(--teal); border:1.5px solid #cfe4e8; flex:1; }
.btn-found{ background:#eef4f5; color:#3a9d63; border:1.5px solid #cfe8d6; min-width:96px; }
.card.done .btn-found{ background:#3a9d63; color:#fff; border-color:#3a9d63; }
.thumb{ margin-top:10px; }
.thumb img{ width:100%; max-height:240px; object-fit:cover; border-radius:9px; border:1px solid #ddd; }
.btn-reset{ background:none; border:1px solid #c9bfa8; color:var(--muted);
  border-radius:8px; padding:8px 12px; font-size:12.5px; cursor:pointer; }

/* leader notes inside cards */
.leader-note{ margin-top:10px; background:#fff7e6; border:1px dashed var(--amber);
  border-radius:8px; padding:8px 10px; font-size:13px; }
.leader-tag{ display:inline-block; background:var(--amber); color:#3a2c00; font-weight:700;
  font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:2px 6px;
  border-radius:4px; margin-right:6px; }
.leader-note .sym{ color:var(--teal); font-weight:600; }

/* ---- walk / trail ------------------------------------------------------- */
.trail{ padding:6px 14px; }
.stop{ display:flex; gap:8px; align-items:flex-start; font-size:13.5px; color:#4a4335;
  padding:9px 2px; border-bottom:1px dashed #ddd2bd; }
.stop b{ color:var(--ink); }
.stop-body{ padding-top:2px; }

/* ---- number crunch ------------------------------------------------------ */
.q{ background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; margin:0 0 12px; }
.q label{ display:block; font-size:14px; font-weight:600; margin-bottom:8px; }
.q-letter{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
  border-radius:6px; background:var(--teal); color:#fff; font-size:12.5px; margin-right:4px; }
.q .hint{ font-weight:400; color:var(--muted); font-size:12.5px; }
.q input[type=text]{ width:100%; font-size:16px; padding:10px; border:1.5px solid #d8cfbb;
  border-radius:8px; background:#fff; }
.calc{ background:#fff7e6; border:1px solid var(--amber); border-radius:12px; padding:14px; margin:6px 0 4px; }
.calc h3{ margin:0 0 6px; font-size:15px; }
.calc-formula{ font-size:13px; color:#7a6a3a; margin:0 0 6px; }
.result{ font-size:34px; font-weight:800; color:var(--terra); margin:6px 0 0; }
.calc-note{ font-size:12px; color:var(--muted); margin-top:2px; }

/* ---- finish ------------------------------------------------------------- */
.finish-hero{ text-align:center; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:22px 16px; margin-bottom:14px; }
.finish-badge{ display:inline-flex; align-items:baseline; justify-content:center;
  background:var(--terra); color:#fff; font-weight:800; font-size:42px;
  width:118px; height:118px; border-radius:50%; margin:0 auto 6px; line-height:1;
  align-items:center; }
.finish-badge span{ font-size:18px; font-weight:700; opacity:.85; }
.finish-hero h2{ margin:6px 0; font-size:19px; }
.finish-number{ margin-top:14px; padding-top:14px; border-top:1px dashed #ddd2bd; }
.finish-number-label{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.finish-actions{ display:flex; gap:8px; margin-bottom:12px; }
.btn-primary{ background:var(--teal); color:#fff; flex:1; }
.btn-secondary{ background:#fff; color:var(--teal); border:1.5px solid #cfe4e8; flex:1; text-decoration:none; }
.collage-wrap img{ width:100%; border-radius:12px; border:1px solid var(--line); display:block; }