@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Special+Elite&family=Archivo+Black&family=Space+Mono:wght@400;700&display=swap');

:root{
  --paper:#171310; --paper2:#1f1913; --ink:#e8dcc0; --dim:#a89474;
  --blood:#c0392b; --blood2:#e74c3c; --gold:#d9a441; --moss:#7a8b4f;
  --sea:#20322e; --fog:#9aa39b; --tape:#c9b458;
  --max:1060px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Special Elite','Courier New',monospace; font-size:16px; line-height:1.55;
  background-image:
    radial-gradient(ellipse 80% 30% at 20% 0%, rgba(217,164,65,.07), transparent 60%),
    radial-gradient(ellipse 70% 40% at 90% 100%, rgba(192,57,43,.08), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 2px, transparent 2px 4px);
  overflow-x:hidden;
}
/* film grain */
.grain{position:fixed; inset:0; pointer-events:none; z-index:60; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");}
/* drifting scroll-fog parallax layers */
.fog-layer{position:fixed; left:-20%; width:140%; height:180px; pointer-events:none; z-index:55; opacity:.16;
  background:radial-gradient(ellipse 220px 60px at 10% 50%, #cfd4cc 0%, transparent 70%),
             radial-gradient(ellipse 300px 70px at 40% 30%, #cfd4cc 0%, transparent 70%),
             radial-gradient(ellipse 260px 80px at 70% 60%, #cfd4cc 0%, transparent 70%),
             radial-gradient(ellipse 200px 50px at 90% 40%, #cfd4cc 0%, transparent 70%);
  filter:blur(6px);}
.fog-a{top:8%}.fog-b{top:64%; opacity:.12; transform:scaleX(-1)}

.masthead{border-bottom:3px double #4a3d28; background:linear-gradient(180deg,#211a13,#171310);
  transform:rotate(-.4deg); box-shadow:0 6px 0 rgba(0,0,0,.35);}
.mast-inner{max-width:var(--max); margin:0 auto; padding:26px 20px 18px; display:flex; gap:18px; align-items:center;}
.stamp{flex:0 0 auto; width:86px; height:86px; border:3px solid var(--blood2); color:var(--blood2);
  display:grid; place-items:center; text-align:center; font-family:'Archivo Black',sans-serif; font-size:13px; line-height:1.1;
  transform:rotate(-8deg); border-radius:6px; text-shadow:0 0 12px rgba(231,76,60,.4);
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='86' height='86'%3E%3Cfilter id='r'%3E%3CfeTurbulence baseFrequency='0.5'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0.1'/%3E%3C/filter%3E%3Crect width='86' height='86' filter='url(%23r)'/%3E%3C/svg%3E");}
.kicker{margin:0; color:var(--dim); letter-spacing:.14em; font-size:12px; text-transform:uppercase; font-family:'Space Mono',monospace;}
h1{font-family:'Archivo Black',sans-serif; font-size:clamp(30px,6vw,58px); margin:2px 0 4px; letter-spacing:.01em;
  color:var(--ink); text-shadow:3px 3px 0 var(--blood), -1px -1px 0 rgba(0,0,0,.8);}
h1 .amp{color:var(--gold); text-shadow:3px 3px 0 #5c3f10, -1px -1px 0 #000;}
.sub{margin:0; color:var(--dim); font-size:15px;}
.compass{margin-left:auto; width:74px; height:74px; border-radius:50%; cursor:pointer; flex:0 0 auto;
  background:radial-gradient(circle at 35% 30%, #3a2f22, #14100b 70%); border:2px solid var(--tape); color:var(--tape);
  font-size:26px; position:relative; transition:transform .25s;}
.compass span{position:absolute; bottom:6px; left:0; right:0; font-size:11px; font-family:'Space Mono',monospace;}
.compass:hover{transform:rotate(20deg) scale(1.06);}
.compass.spin{animation:spin .7s ease;}
@keyframes spin{to{transform:rotate(360deg)}}
.tape-strip{height:14px; opacity:.7;
  background:repeating-linear-gradient(-45deg, rgba(201,180,88,.55) 0 18px, rgba(0,0,0,.35) 18px 36px);}

#app{max-width:var(--max); margin:0 auto; padding:22px 16px 60px;}
.hud{display:grid; grid-template-columns:290px 1fr; gap:14px; margin-bottom:14px;}
.seed-card,.meters,.chart-wrap,.ledger,.logbook{background:var(--paper2); border:1px solid #4a3d28; border-radius:4px;
  padding:14px 14px 12px; position:relative;
  box-shadow:4px 4px 0 rgba(0,0,0,.5), inset 0 0 60px rgba(0,0,0,.35);}
.seed-card::before,.ledger::before,.logbook::before{content:""; position:absolute; top:-11px; left:40px; width:90px; height:20px;
  background:rgba(201,180,88,.5); transform:rotate(-3deg); border-left:1px dashed rgba(0,0,0,.3); border-right:1px dashed rgba(0,0,0,.3);}
.seed-card label{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.18em; color:var(--dim);}
.seed-row{display:flex; gap:8px; margin:6px 0 8px;}
#seedInput{flex:1; min-width:0; background:#0e0b08; border:1px solid #4a3d28; color:var(--gold); border-radius:3px;
  padding:9px 10px; font-family:'Space Mono',monospace; font-size:14px; text-transform:uppercase;}
.btn{background:var(--blood); color:#f7e9d0; border:1px solid #7c2318; border-radius:3px; cursor:pointer;
  font-family:'Archivo Black',sans-serif; font-size:13px; letter-spacing:.05em; padding:9px 12px;
  box-shadow:2px 2px 0 #000; transition:transform .12s, box-shadow .12s, background .12s;}
.btn:hover{background:var(--blood2); transform:translate(-1px,-1px); box-shadow:3px 3px 0 #000;}
.btn:active{transform:translate(1px,1px); box-shadow:1px 1px 0 #000;}
.btn.ghost{background:transparent; border:1px dashed #6b5a3e; color:var(--dim); box-shadow:none; font-family:'Space Mono',monospace;}
.btn.ghost:hover{color:var(--ink); border-color:var(--gold); background:rgba(217,164,65,.08);}
.btn.full{width:100%; margin-top:8px;}
.btn.sm{font-size:11px; padding:7px 9px;}
.seed-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.seed-badge{font-family:'Space Mono',monospace; font-size:11px; background:#0e0b08; border:1px solid #4a3d28;
  padding:3px 8px; border-radius:20px; color:var(--gold);}
.linklike{background:none; border:none; color:var(--dim); text-decoration:underline dotted; cursor:pointer; font:inherit; font-size:13px; padding:0;}
.linklike:hover{color:var(--gold);}
.share-msg{min-height:1.2em; font-size:12px; color:var(--moss); margin:6px 0 0; font-family:'Space Mono',monospace;}

.meters{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-content:start;}
.meter-top{display:flex; justify-content:space-between; font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.12em; color:var(--dim);}
.meter-top b{color:var(--ink); font-size:18px;}
.bar{height:12px; background:#0e0b08; border:1px solid #4a3d28; border-radius:6px; overflow:hidden; margin-top:6px;}
.bar i{display:block; height:100%; width:0%; background:repeating-linear-gradient(-45deg,var(--blood2) 0 8px,#8e2a20 8px 16px); transition:width .3s;}
.bar.gold i{background:repeating-linear-gradient(-45deg,var(--gold) 0 8px,#8a6420 8px 16px);}
.modes{grid-column:1/-1; display:flex; gap:10px; flex-wrap:wrap;}
.btn.mode{flex:1; min-width:130px; background:#0e0b08; border:1px solid #4a3d28; color:var(--dim);}
.btn.mode small{font-family:'Space Mono',monospace; font-weight:400; opacity:.7; margin-left:6px;}
.btn.mode.active{background:var(--blood); color:#f7e9d0; border-color:#7c2318;}
.hint{grid-column:1/-1; margin:0; font-size:13.5px; color:var(--dim);}
.hint b{color:var(--gold);}

.chart-wrap{padding:12px;}
.chart-head{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-family:'Space Mono',monospace;
  font-size:12px; letter-spacing:.1em; color:var(--dim); margin-bottom:8px; text-transform:uppercase;}
#mapTitle{color:var(--gold);}
#tideGauge b{color:#7fb3c9;}
#chart{width:100%; height:auto; display:block; background:#0c1210; border:2px solid #060807; border-radius:2px;
  cursor:crosshair; touch-action:none; box-shadow:inset 0 0 80px rgba(0,0,0,.6);}
.chart-foot{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:12px; color:var(--dim);
  font-family:'Space Mono',monospace; margin-top:8px;}
#routeReadout{color:var(--gold);}

.ledger-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px;}
.ledger h2,.logbook h2{font-family:'Archivo Black',sans-serif; font-size:17px; margin:0 0 10px; letter-spacing:.04em;}
.count{background:var(--blood); border-radius:12px; font-size:12px; padding:1px 9px; vertical-align:middle; font-family:'Space Mono',monospace;}
#routeList{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; max-height:340px; overflow:auto;}
#routeList li{background:#0e0b08; border:1px solid #4a3d28; border-left:4px solid var(--gold); padding:8px 10px; font-size:13px;
  transform:rotate(-.3deg);}
#routeList li:nth-child(even){transform:rotate(.35deg);}
#routeList li.empty{border-left-color:#4a3d28; color:var(--dim);}
#routeList .pts{color:var(--gold); font-family:'Space Mono',monospace; font-weight:700;}
#routeList button{background:none; border:none; color:var(--blood2); cursor:pointer; float:right; font-size:14px;}
.ledger-actions{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}

.logbook .scroll-note{font-family:'Space Mono',monospace; font-size:10px; color:#7fb3c9; letter-spacing:.1em;}
.log{border-top:1px dashed #4a3d28; padding:12px 2px; opacity:.25; transform:translateY(14px) rotate(-.3deg); transition:opacity .5s, transform .5s;}
.log.lit{opacity:1; transform:none;}
.log h3{font-family:'Permanent Marker',cursive; font-size:19px; color:var(--gold); margin:0 0 4px;}
.log p{margin:0; font-size:14px; color:var(--ink);}
.log b{color:var(--gold);} .log i{color:#c98a8a;}
.redact{background:#000; color:transparent; border-radius:2px; padding:0 4px; user-select:none;}
.redact:hover{color:var(--blood2);}
.spacer{padding:60px 0 120px; text-align:center; color:var(--dim); font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.2em;}

footer{margin-top:18px; text-align:center; color:var(--dim); font-size:12px; font-family:'Space Mono',monospace;}
footer code{background:#0e0b08; padding:1px 6px; border:1px solid #4a3d28; border-radius:3px;}

.kraken{position:fixed; inset:0; z-index:100; display:grid; place-items:center; align-content:center; gap:6px;
  background:rgba(8,4,4,.88); opacity:0; pointer-events:none; transition:opacity .4s; text-align:center;}
.kraken.show{opacity:1; pointer-events:auto;}
.kraken .tent{font-size:110px; animation:wob 1s ease-in-out infinite alternate;}
@keyframes wob{from{transform:rotate(-10deg) scale(1)}to{transform:rotate(10deg) scale(1.12)}}
.kraken p{font-family:'Permanent Marker',cursive; font-size:clamp(22px,5vw,44px); color:var(--blood2); text-shadow:3px 3px 0 #000; margin:0; padding:0 16px;}

.toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(20px); z-index:120;
  background:#0e0b08; border:1px solid var(--gold); color:var(--gold); font-family:'Space Mono',monospace; font-size:13px;
  padding:9px 16px; border-radius:3px; opacity:0; transition:all .3s; pointer-events:none; max-width:92vw;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

h2 .marker{font-family:'Permanent Marker',cursive;}
button:focus-visible,input:focus-visible,#chart:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}

@media (max-width:820px){
  .hud{grid-template-columns:1fr;}
  .ledger-row{grid-template-columns:1fr;}
  .mast-inner{padding:20px 14px 14px;}
  .stamp{width:64px; height:64px; font-size:10px;}
  .compass{width:58px; height:58px;}
}
@media (max-width:375px){
  body{font-size:15px;}
  .meters{grid-template-columns:1fr 1fr 1fr; gap:8px;}
  .btn.mode{min-width:0; font-size:11px; padding:8px 6px;}
}