:root{
  --primary:#2f4b3c;
  --secondary:#b5754b;
  --accent:#e88d2a;
  --amber:#ffb35c;
  --stone:#8b8f96;
  --stone-flat:#757a80;
  --ink:#3a2f23;
  --paper:#f5ead2;
  --smoke:linear-gradient(180deg,rgba(214,206,188,.95),rgba(177,169,150,.85));
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:
    radial-gradient(circle at 20% 12%, rgba(232,141,42,.18), transparent 38%),
    radial-gradient(circle at 85% 20%, rgba(75,130,90,.25), transparent 40%),
    linear-gradient(180deg,#3f664d 0%, #2f4b3c 40%, #233a2d 100%);
  color:var(--ink);
  display:flex;
  flex-direction:column;
  min-height:100vh;
  padding:calc(env(safe-area-inset-top) + 12px) 14px calc(env(safe-area-inset-bottom) + 104px);
}

.view{display:none}
.view.active{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ============ SUMMIT / SIGNBOARD ============ */
.signboard{
  position:relative;
  margin:8px auto 0;
  width:min(100%,420px);
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.35));
}
.board{
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.04) 0 2px,transparent 2px 6px),
    linear-gradient(180deg,#a9804f,#8a6438);
  border:6px solid #6e4e2a;
  border-radius:8px;
  padding:14px 16px;
  position:relative;
  z-index:1;
}
.board::before{
  content:"";position:absolute;inset:0;border-radius:6px;
  box-shadow:inset 0 0 22px rgba(0,0,0,.35);
  pointer-events:none;
}
.board-head{text-align:center;margin-bottom:12px}
.board-head h1{
  margin:0;font-size:26px;letter-spacing:2px;
  color:var(--paper);text-shadow:0 2px 0 rgba(0,0,0,.45);
  font-weight:800;
}
.tagline{
  margin:2px 0 0;font-size:11px;letter-spacing:1px;color:#e9d9b4;
  text-transform:uppercase;opacity:.85;
}
.counters{display:flex;align-items:center;justify-content:center;gap:6px}
.divider{width:4px;height:74px;background:#6e4e2a;border-radius:2px}
.arrow{
  position:relative;
  width:120px;height:74px;background:linear-gradient(180deg,#9c7444,#77542d);
  border:4px solid #5f4523;border-radius:6px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:inset 0 0 12px rgba(0,0,0,.35);
}
.arrow::after{
  content:"";position:absolute;top:-6px;
  width:0;height:0;border-style:solid;
}
.arrow.left::after{left:-12px;border-width:6px 14px 6px 0;border-color:transparent #5f4523 transparent transparent}
.arrow.right::after{right:-12px;border-width:6px 0 6px 14px;border-color:transparent transparent transparent #5f4523}
.arrow .num{
  font-size:30px;font-weight:800;line-height:1;
  color:#1d130a;
  text-shadow:
    0 0 2px #e8b77a,
    0 1px 0 #6b4a24;
}
.arrow .lbl{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#e9d9b4;margin-top:3px}
.post{
  position:absolute;bottom:-22px;width:16px;top:100%;height:40px;
  background:linear-gradient(90deg,#5f4523,#7a5c32);
  border-radius:3px;
}
.left-post{left:22px}
.right-post{right:22px}

.flag-clip{
  margin:36px auto 0;width:min(100%,260px);text-align:center;position:relative;
}
.flag{
  display:inline-flex;flex-direction:column;align-items:center;gap:2px;
  background:linear-gradient(180deg,#e88d2a,#c96f14);
  clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%);
  padding:10px 22px 16px;
  color:var(--paper);min-width:180px;
  box-shadow:0 6px 12px rgba(0,0,0,.3);
}
.flag::before{
  content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  width:30px;height:10px;background:#6e4e2a;border-radius:4px;
  box-shadow:0 2px 3px rgba(0,0,0,.3);
}
.flag-name{font-weight:700;font-size:15px;text-shadow:0 1px 0 rgba(0,0,0,.3);text-align:center}
.flag-date{font-size:11px;opacity:.9}

.empty-sign{margin:40px auto 0;width:min(100%,240px)}
.lonely-sign{
  position:relative;
  background:linear-gradient(180deg,#a9804f,#8a6438);
  border:4px solid #6e4e2a;border-radius:6px;
  padding:18px 16px;text-align:center;
  color:var(--paper);font-size:14px;
  box-shadow:0 8px 14px rgba(0,0,0,.3);
}
.lonely-sign::after{
  content:"";position:absolute;bottom:-34px;left:50%;transform:translateX(-50%);
  width:14px;height:40px;background:#5f4523;border-radius:3px;
}
.lonely-sign span{font-family:"Courier New",monospace;font-style:italic}

/* ============ RECORD / LOG PAGE ============ */
.log-page{
  position:relative;
  background:
    repeating-linear-gradient(0deg,transparent 0 22px,rgba(120,90,50,.10) 22px 23px),
    linear-gradient(180deg,#faf2dd,#efe0c0);
  border-radius:6px;
  padding:20px;
  max-width:420px;margin:10px auto 0;
  box-shadow:
    0 14px 22px rgba(0,0,0,.4),
    inset 0 0 0 1px rgba(160,120,60,.3);
  transform:rotate(-.4deg);
}
.log-head{text-align:center;margin-bottom:16px}
.pen-icon{
  display:inline-block;width:26px;height:26px;margin-bottom:6px;
  background:linear-gradient(135deg,#b5754b 0 60%,#3a2f23 60% 100%);
  clip-path:polygon(50% 0,100% 100%,50% 78%,0 100%);
}
.log-head h2{margin:0;font-size:22px;color:var(--primary)}
.log-head p{margin:2px 0 0;font-size:12px;color:#7a6a52;font-style:italic}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.field span{font-size:13px;font-weight:600;color:var(--primary)}
.field em{font-style:italic;font-weight:400;color:#8a7a62}
.field input,.field textarea{
  font-family:inherit;font-size:16px;
  background:rgba(255,255,255,.55);
  border:2px solid #cfb98a;border-radius:5px;
  padding:10px 11px;color:var(--ink);
}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);background:#fff;
}
.form-error{
  background:#e85d4a;color:#fff;padding:8px 10px;border-radius:5px;
  font-size:13px;text-align:center;
}
.form-actions{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.btn-primary{
  font-family:inherit;font-size:16px;font-weight:700;
  background:linear-gradient(180deg,#e88d2a,#c96f14);
  color:var(--paper);border:none;border-radius:8px;padding:13px;
  box-shadow:0 4px 0 #8f4f0d;
}
.btn-primary:active{transform:translateY(2px);box-shadow:0 2px 0 #8f4f0d}
.btn-ghost{
  font-family:inherit;font-size:14px;
  background:transparent;color:#7a6a52;
  border:1px solid #cfb98a;border-radius:8px;padding:11px;
}
.btn-danger{
  font-family:inherit;font-size:15px;font-weight:700;
  background:linear-gradient(180deg,#e85d4a,#c53f2c);
  color:#fff;border:none;border-radius:8px;padding:12px;
  box-shadow:0 4px 0 #8f2d1c;
}
.btn-danger:active{transform:translateY(2px);box-shadow:0 2px 0 #8f2d1c}

/* ============ TRAILS / PLAQUES ============ */
.trails-head{max-width:440px;margin:0 auto 8px;text-align:center}
.trails-head h2{
  margin:0 0 8px;font-size:20px;color:var(--paper);letter-spacing:1px;text-shadow:0 2px 0 rgba(0,0,0,.3);
}
.search input{
  width:100%;font-family:inherit;font-size:15px;
  border:2px solid #7a5c32;border-radius:20px;padding:10px 16px;
  background:#f5ead2;color:var(--ink);
}
.search input:focus{outline:none;border-color:var(--accent)}
.log-post{
  max-width:440px;margin:6px auto 0;
  background:linear-gradient(90deg,#6e4e2a,#8a6438,#6e4e2a);
  border-radius:6px;padding:16px 12px;
  box-shadow:0 10px 16px rgba(0,0,0,.35);
}
.plaques{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.plaque{
  position:relative;display:flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,#d9c29a,#c2a878);
  border:3px solid #9a7c4f;border-radius:6px;
  padding:10px 12px;
  box-shadow:inset 0 0 10px rgba(0,0,0,.2);
  cursor:pointer;
  touch-action:manipulation;
}
.plaque.completed{
  background:var(--smoke);
  border-color:#9aa095;
}
.plaque::before{
  content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  width:2px;height:10px;background:#6b6b6b;border-radius:2px;
}
.plaque::after{
  content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  width:22px;height:6px;background:#8d8d8d;border-radius:50%;
}
.plaque-info{flex:1;min-width:0}
.plaque-name{
  font-size:16px;font-weight:800;color:#4a3315;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 0 rgba(255,255,255,.3);
}
.plaque-dist{
  font-size:13px;font-style:italic;color:#6e4e2a;font-weight:600;
}
.plaque-date{font-size:11px;color:#8a7a62}
.seal{
  width:34px;height:34px;flex-shrink:0;border-radius:50%;
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.35),0 2px 3px rgba(0,0,0,.2);
  position:relative;
}
.seal::after{
  content:"";position:absolute;inset:6px;border-radius:50%;
  border:2px dashed rgba(255,255,255,.55);
}
.seal.easy{background:radial-gradient(circle at 35% 30%,#7ac27a,#3f9142)}
.seal.moderate{background:radial-gradient(circle at 35% 30%,#f2c05a,#c9921b)}
.seal.hard{background:radial-gradient(circle at 35% 30%,#ef7f4a,#d1542a)}
.plaque-delete{
  width:26px;height:26px;flex-shrink:0;border:none;border-radius:50%;
  background:rgba(0,0,0,.18);color:#6b2a1a;font-size:15px;line-height:1;cursor:pointer;
}
.plaque-delete:active{background:rgba(0,0,0,.3)}
.empty-nail{position:relative;padding:24px 0;text-align:center}
.nail{
  width:6px;height:26px;margin:0 auto;background:#b0b0b0;border-radius:3px;
  box-shadow:0 2px 3px rgba(0,0,0,.3);
}
.tag{
  display:inline-block;margin-top:6px;
  background:#efe6d2;color:#7a6a52;border:1px solid #c2a878;
  padding:8px 14px;border-radius:4px;font-size:13px;font-style:italic;
}
.hidden{display:none!important}

/* ============ PASSPORT ============ */
.book{
  max-width:420px;margin:12px auto 0;
  display:flex;position:relative;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.4));
}
.book-spine{
  position:absolute;left:50%;top:0;bottom:0;width:6px;transform:translateX(-50%);
  background:linear-gradient(180deg,#5a3d20,#7a5630,#5a3d20);
  z-index:2;
}
.page{
  flex:1;background:linear-gradient(180deg,#e9d7b0,#dcc28f);
  min-height:320px;padding:18px 14px;
  position:relative;
}
.page.left{border-radius:8px 2px 2px 8px;box-shadow:inset -6px 0 12px rgba(0,0,0,.15)}
.page.right{border-radius:2px 8px 8px 2px;box-shadow:inset 6px 0 12px rgba(0,0,0,.12)}
.page-title{
  font-size:16px;font-weight:800;color:#5a3d20;text-align:center;
  letter-spacing:1px;border-bottom:2px solid #a88655;padding-bottom:6px;margin-bottom:10px;
}
.stamps{display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start}
.stamp{
  width:52px;height:52px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#fff;font-weight:700;position:relative;
  box-shadow:inset 0 -4px 7px rgba(0,0,0,.35),0 2px 4px rgba(0,0,0,.2);
}
.stamp::after{
  content:"";position:absolute;inset:5px;border-radius:50%;
  border:2px dashed rgba(255,255,255,.5);
}
.stamp .s-name{
  font-size:6px;text-transform:uppercase;letter-spacing:.5px;text-align:center;
  max-width:44px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  position:relative;z-index:1;text-shadow:0 1px 1px rgba(0,0,0,.4);
}
.stamp .s-date{font-size:7px;opacity:.9;position:relative;z-index:1}
.stamp.easy{background:radial-gradient(circle at 32% 28%,#84cd84,#3f9142)}
.stamp.moderate{background:radial-gradient(circle at 32% 28%,#f4c768,#c9921b)}
.stamp.hard{background:radial-gradient(circle at 32% 28%,#f28a55,#d1542a)}
.empty-passport{text-align:center;margin:26px auto 0;color:var(--paper)}
.uninked-seal{
  width:74px;height:74px;margin:0 auto 10px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#c9bfae,#a99e8b);
  box-shadow:inset 0 -4px 8px rgba(0,0,0,.25);
}
.empty-passport p{font-style:italic;font-size:15px}

/* ============ BOTTOM TAB BAR ============ */
#tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;justify-content:space-around;align-items:flex-end;
  padding:10px 6px calc(env(safe-area-inset-bottom) + 10px);
  background:linear-gradient(180deg,#5a4226,#3e2f1c);
  border-top:4px solid #2f2414;
  box-shadow:0 -6px 14px rgba(0,0,0,.4);
}
.tab{
  background:none;border:none;cursor:pointer;padding:0;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  flex:1;font-family:inherit;
}
.stone{
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#9a9ea5,#6e727a);
  box-shadow:0 4px 5px rgba(0,0,0,.4),inset 0 2px 4px rgba(255,255,255,.3);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  position:relative;
}
.tab.active .stone{
  transform:translateY(-6px);
  background:radial-gradient(circle at 35% 30%,#ffd28a,#d9983f);
  box-shadow:
    0 8px 14px rgba(232,141,42,.55),
    0 0 18px rgba(255,179,92,.7),
    inset 0 2px 4px rgba(255,255,255,.4);
}
.etch{display:block;width:24px;height:24px}
.etch-summit{
  background:linear-gradient(135deg,#4c4a3f 0 46%,transparent 46%),
    linear-gradient(225deg,#4c4a3f 0 46%,transparent 46%),
    linear-gradient(#3f3a30 0 5%,transparent 5%);
  width:22px;height:22px;opacity:.9;
  border:2px solid #4c4a3f;border-bottom:none;
}
.etch-record{
  width:22px;height:22px;border:2px solid #4c4a3f;border-radius:3px;
  background:repeating-linear-gradient(0deg,transparent 0 4px,#4c4a3f 4px 6px);
}
.etch-trails{
  width:4px;height:24px;background:#4c4a3f;border-radius:2px;position:relative;
}
.etch-trails::before,.etch-trails::after{
  content:"";position:absolute;width:14px;height:6px;background:#4c4a3f;border-radius:3px;
}
.etch-trails::before{top:4px;left:5px;transform:rotate(-20deg)}
.etch-trails::after{top:12px;left:2px;transform:rotate(20deg)}
.etch-passport{
  width:22px;height:22px;border:2px solid #4c4a3f;border-radius:3px;position:relative;
  background:repeating-linear-gradient(45deg,transparent 0 5px,#4c4a3f 5px 7px);
}
.tab.active .etch{filter:brightness(1.25)}
.tab-label{
  font-size:10px;color:#c9bfa8;letter-spacing:.5px;text-transform:uppercase;
}
.tab.active .tab-label{color:var(--amber);font-weight:700}

/* ============ SHEET / CONFIRM ============ */
.sheet-overlay,.confirm-overlay{
  position:fixed;inset:0;z-index:60;background:rgba(20,25,18,.5);
  display:flex;align-items:flex-end;justify-content:center;
}
.sheet-overlay[hidden],.confirm-overlay[hidden]{display:none}
.sheet{
  width:100%;max-width:460px;background:#f5ead2;
  border-radius:18px 18px 0 0;padding:12px 18px calc(env(safe-area-inset-bottom) + 18px);
  box-shadow:0 -10px 24px rgba(0,0,0,.4);
  animation:slide .22s ease;
}
@keyframes slide{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sheet-handle{width:44px;height:5px;background:#cfb98a;border-radius:3px;margin:0 auto 14px}
.sheet-title{
  font-size:18px;font-weight:800;color:var(--primary);text-align:center;margin-bottom:16px;
  word-break:break-word;
}
.sheet-actions{display:flex;flex-direction:column;gap:9px}
.confirm-overlay{align-items:center}
.confirm{
  background:#f5ead2;border-radius:14px;padding:20px;width:min(86%,320px);
  text-align:center;box-shadow:0 12px 24px rgba(0,0,0,.4);
}
.confirm p{margin:0 0 16px;font-size:16px;font-weight:600;color:var(--ink)}
.confirm-actions{display:flex;gap:10px}
.confirm-actions button{flex:1}

@media (min-width:480px){
  body{max-width:520px;margin:0 auto}
}