/* ——— The Frontier Gazette · atlas of the five states ——— */
:root{
  --ink:#2b1c10;
  --ink-soft:#4a3520;
  --parch:#d9c493;
  --parch-hi:#ecdcb0;
  --parch-lo:#c3a877;
  --gold:#c9973b;
  --gold-hi:#e8c877;
  --gold-dim:#8a6f42;
  --blood:#8b2f22;
  --blood-hi:#a33326;
  --olive:#6b6b3f;
  --water:#5c6e64;
  --leather:#1d1309;
  --leather-hi:#2a1c0e;
  --night:#171008;
  --serif:"IM Fell English",Georgia,"Times New Roman",serif;
  --western:"Rye","IM Fell English",Georgia,serif;
  --type:"Special Elite","Courier New",monospace;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--night)}
body{font-family:var(--serif);color:var(--ink);overscroll-behavior:none}
::selection{background:var(--gold);color:var(--night)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}

#app{height:100vh;height:var(--app-h,100dvh);display:flex;flex-direction:column;overflow:hidden}

/* ——— masthead ——— */
#masthead{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 14px 10px;position:relative;z-index:30;
  background:linear-gradient(180deg,#261808,#1a1006 70%,#150d05);
  border-bottom:1px solid #3c2a12;
  box-shadow:0 1px 0 rgba(201,151,59,.28),0 6px 18px rgba(0,0,0,.6);
}
.mast-kicker{font-family:var(--type);font-size:8px;letter-spacing:2.4px;color:var(--gold-dim)}
#masthead h1{
  font-family:var(--western);font-weight:400;font-size:clamp(17px,4.8vw,27px);
  line-height:1.08;color:var(--gold-hi);letter-spacing:.5px;
  text-shadow:0 1px 0 #000,0 0 18px rgba(201,151,59,.25);
}
.mast-sub{font-family:var(--type);font-size:8.5px;letter-spacing:2px;color:#a3814c;margin-top:2px}
.mast-right{display:flex;align-items:center;gap:12px;flex:0 0 auto}
#ledger{text-align:center;line-height:1;color:var(--gold-hi);font-family:var(--western)}
#ledger #count{font-size:20px}
#ledger .of{font-size:11px;color:var(--gold-dim)}
#ledger em{display:block;font-style:normal;font-family:var(--type);font-size:7px;letter-spacing:2.2px;color:var(--gold-dim);margin-top:3px}
.iconbtn{
  width:38px;height:38px;border:1px solid #6e5426;border-radius:6px;color:var(--gold-hi);
  background:linear-gradient(180deg,#2c1d0c,#20140a);
  box-shadow:inset 0 1px 0 rgba(232,200,119,.15),0 2px 5px rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;transition:transform .15s,border-color .2s;
}
.iconbtn:active{transform:scale(.93)}
.iconbtn:hover{border-color:var(--gold)}
.iconbtn .ic{width:21px;height:21px}
.iconbtn .ic-off{display:none}
body.muted .iconbtn .ic-on{display:none}
body.muted .iconbtn .ic-off{display:block}
body.muted #soundBtn{color:var(--gold-dim)}

/* ——— stage & viewport ——— */
#stage{flex:1 1 auto;position:relative;min-height:0}
#viewport{
  position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab;
  background:radial-gradient(1100px 700px at 50% 38%,var(--leather-hi),#150d05 78%);
  user-select:none;-webkit-user-select:none;
}
#viewport.dragging{cursor:grabbing}
#map{position:absolute;inset:0;width:100%;height:100%;display:block}
#world{will-change:transform}
#grain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.55;mix-blend-mode:multiply}
#lantern{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(560px circle at var(--lx,50%) var(--ly,42%),
    rgba(255,176,84,.15),rgba(255,140,50,.05) 42%,transparent 64%);
  animation:flicker 6.5s ease-in-out infinite;
}
@keyframes flicker{0%,100%{opacity:1}38%{opacity:.86}52%{opacity:.97}70%{opacity:.9}}
#vignette{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(118% 92% at 50% 42%,transparent 44%,rgba(26,15,5,.36) 72%,rgba(12,7,2,.8) 100%);
  box-shadow:inset 0 0 130px 24px rgba(18,9,2,.6);
}

/* ——— map ink ——— */
#map text{user-select:none;pointer-events:none}
.t-state{font-family:var(--western);fill:var(--ink);opacity:.42;letter-spacing:8px}
.t-water{font-family:var(--serif);font-style:italic;fill:#43554b;opacity:.85;letter-spacing:3px}
.t-small{font-family:var(--type);fill:var(--ink-soft);opacity:.66;letter-spacing:1.5px}
.t-cartouche{font-family:var(--western);fill:var(--ink)}
.t-cart-sub{font-family:var(--type);fill:var(--ink-soft);letter-spacing:2.5px}

.marker{cursor:pointer}
.marker .hit{fill:transparent}
.marker .seal-bg{fill:var(--parch-hi);stroke:var(--ink);stroke-width:1.6;transition:fill .25s}
.marker .seal-ring{fill:none;stroke:var(--ink);stroke-width:.8;opacity:.65}
.marker .seal-ic{color:var(--ink);transition:color .25s}
.marker .m-label{
  font-family:var(--western);font-size:15px;fill:var(--ink);text-anchor:middle;
  paint-order:stroke;stroke:#d9c493;stroke-width:3.5px;stroke-linejoin:round;letter-spacing:1px;
}
.marker .m-sub{
  font-family:var(--type);font-size:8.5px;fill:var(--ink-soft);text-anchor:middle;letter-spacing:2px;
  paint-order:stroke;stroke:#d9c493;stroke-width:2.5px;opacity:.8;
}
.marker .halo{fill:none;stroke:var(--gold);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.marker .check{opacity:0;transition:opacity .4s}
.marker.visited .seal-bg{fill:var(--gold)}
.marker.visited .check{opacity:1}
.marker:hover .seal-bg{fill:var(--gold-hi)}
.marker.selected .seal-bg{fill:var(--blood-hi);stroke:#1c0f08}
.marker.selected .seal-ic{color:#f0e2bd}
.marker.selected .seal-ring{stroke:#f0e2bd;opacity:.8}
.marker.selected .halo{animation:halo 1.9s ease-out infinite}
@keyframes halo{0%{transform:scale(.55);opacity:.75}80%{transform:scale(1.65);opacity:0}100%{opacity:0}}
#routeline{fill:none;stroke:var(--blood-hi);stroke-dasharray:11 9;stroke-linecap:round;
  animation:march 1.1s linear infinite;opacity:.9;pointer-events:none}
@keyframes march{to{stroke-dashoffset:-20}}

/* ——— zoom controls ——— */
#zoomctl{position:absolute;right:12px;bottom:14px;display:flex;flex-direction:column;gap:8px;z-index:20;transition:opacity .3s}
#zoomctl button{
  width:42px;height:42px;border-radius:7px;border:1px solid #6e5426;color:var(--gold-hi);
  background:linear-gradient(180deg,#2c1d0cf2,#20140af2);
  box-shadow:inset 0 1px 0 rgba(232,200,119,.16),0 3px 8px rgba(0,0,0,.55);
  font-family:var(--western);font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:transform .12s,border-color .2s;
}
#zoomctl button:hover{border-color:var(--gold)}
#zoomctl button:active{transform:scale(.92)}
#zoomctl svg{width:19px;height:19px}
#app.panel-open #zoomctl{opacity:0;pointer-events:none}

#hint{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:15;pointer-events:none;
  font-family:var(--type);font-size:9px;letter-spacing:2px;color:#caa96a;white-space:nowrap;
  background:rgba(21,13,5,.82);border:1px solid #4a3418;border-radius:20px;padding:7px 14px;
  transition:opacity .8s;
}
#hint.hide{opacity:0}

#toast{
  position:absolute;left:50%;top:12px;transform:translate(-50%,-8px);z-index:60;pointer-events:none;
  font-family:var(--type);font-size:10.5px;letter-spacing:1.5px;color:var(--ink);
  background:linear-gradient(180deg,var(--parch-hi),var(--parch));border:1px solid var(--ink-soft);
  box-shadow:0 4px 14px rgba(0,0,0,.5),inset 0 0 0 3px rgba(43,28,16,.12);
  padding:8px 16px;border-radius:3px;opacity:0;transition:opacity .3s,transform .3s;max-width:88%;text-align:center;
}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ——— journal poster panel ——— */
#panel{
  position:absolute;top:16px;right:16px;bottom:16px;width:min(350px,90vw);z-index:40;
  transform:translateX(calc(100% + 30px)) rotate(1.5deg);opacity:0;
  transition:transform .5s cubic-bezier(.2,.9,.25,1),opacity .4s;
  pointer-events:none;
}
#panel.open{transform:translateX(0) rotate(0);opacity:1;pointer-events:auto}
.poster{
  position:relative;height:100%;overflow-y:auto;overscroll-behavior:contain;
  padding:26px 22px 20px;transform:rotate(-.4deg);
  color:var(--ink);
  background:
    radial-gradient(240px 160px at 82% 12%,rgba(122,84,40,.16),transparent 70%),
    radial-gradient(300px 220px at 12% 88%,rgba(104,70,32,.18),transparent 70%),
    radial-gradient(140px 90px at 30% 30%,rgba(140,100,50,.1),transparent 70%),
    repeating-linear-gradient(93deg,rgba(90,60,25,.03) 0 2px,transparent 2px 5px),
    linear-gradient(168deg,#ecdcb0,#dcc696 55%,#cdb381);
  border:1px solid #3a2a16;
  box-shadow:inset 0 0 0 4px rgba(236,220,176,.9),inset 0 0 0 5px rgba(58,42,22,.75),
    inset 0 0 60px rgba(90,58,22,.35),0 18px 44px rgba(0,0,0,.65);
}
.poster::after{ /* folded corner */
  content:"";position:absolute;right:0;bottom:0;width:26px;height:26px;
  background:linear-gradient(315deg,var(--leather) 48%,#b99e6e 50%,#e6d3a3 76%);
  box-shadow:-2px -2px 5px rgba(60,40,15,.3);
}
.nail{position:absolute;top:9px;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#7a6a4a,#241a0c 70%);
  box-shadow:0 1px 2px rgba(0,0,0,.6)}
.nail.n1{left:12px}.nail.n2{right:12px}
.poster-kicker{font-family:var(--type);font-size:9px;letter-spacing:3.5px;text-align:center;color:var(--blood);margin-bottom:8px}
.poster h2{
  font-family:var(--western);font-weight:400;font-size:clamp(22px,6vw,29px);text-align:center;
  line-height:1.05;letter-spacing:1px;text-transform:uppercase;
}
.poster-region{font-family:var(--serif);font-style:italic;font-size:14px;text-align:center;color:var(--ink-soft);margin-top:5px}
.rule{display:flex;align-items:center;gap:8px;margin:13px 0}
.rule span{flex:1;height:0;border-top:1px solid var(--ink-soft);border-bottom:1px solid rgba(74,53,32,.35);padding-top:2px}
.rule i{width:7px;height:7px;flex:0 0 auto;background:var(--blood);transform:rotate(45deg)}
.poster-meta{display:flex;gap:10px;margin:2px 0 12px}
.poster-meta>div{flex:1;border:1px solid rgba(58,42,22,.55);padding:7px 9px;background:rgba(236,220,176,.35)}
.poster-meta em{display:block;font-style:normal;font-family:var(--type);font-size:7.5px;letter-spacing:2px;color:var(--ink-soft)}
.poster-meta b{font-family:var(--serif);font-weight:400;font-size:14px}
#p-desc{font-size:15.5px;line-height:1.55;text-align:justify;hyphens:auto}
#p-desc::first-letter{font-family:var(--western);font-size:30px;line-height:.9;float:left;padding:3px 6px 0 0;color:var(--blood)}
.poster-stamp{
  align-self:center;width:max-content;margin:4px auto 14px;transform:rotate(-7deg);
  font-family:var(--western);font-size:15px;letter-spacing:4px;color:var(--blood);
  border:3px double var(--blood);border-radius:4px;padding:4px 13px 3px;opacity:.82;mix-blend-mode:multiply;
}
.poster-stamp.off{display:none}
.poster-stamp.show{animation:stamp .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes stamp{0%{transform:rotate(-7deg) scale(1.9);opacity:0}60%{opacity:.9}100%{transform:rotate(-7deg) scale(1);opacity:.82}}
.poster-actions{display:flex;gap:10px}
.btn{
  flex:1;font-family:var(--type);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
  padding:11px 8px;border:1.5px solid var(--ink);color:var(--ink);
  background:rgba(236,220,176,.5);box-shadow:2.5px 2.5px 0 rgba(43,28,16,.55);
  transition:transform .1s,box-shadow .1s,background .2s;
}
.btn:hover{background:rgba(236,220,176,.95)}
.btn:active{transform:translate(2px,2px);box-shadow:0 0 0 rgba(0,0,0,0)}
.btn.primary{background:var(--blood);border-color:#4a1710;color:#f0e2bd}
.btn.primary:hover{background:var(--blood-hi)}
.btn[disabled]{opacity:.55;pointer-events:none}
#p-close{
  position:absolute;top:12px;right:28px;width:30px;height:30px;font-size:22px;line-height:1;
  color:var(--ink-soft);border:1px solid transparent;border-radius:50%;
}
#p-close:hover{color:var(--blood);border-color:rgba(139,47,34,.5)}

/* poster scrollbar, in the atlas's own ink */
.poster{scrollbar-width:thin;scrollbar-color:#8a6f42 #cdb381}
.poster::-webkit-scrollbar{width:10px}
.poster::-webkit-scrollbar-track{background:#cdb381;border-left:1px solid rgba(58,42,22,.4)}
.poster::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#8a6f42,#6e5426);border:2px solid #cdb381;border-radius:8px}
.poster::-webkit-scrollbar-thumb:hover{background:var(--gold)}

/* ——— mobile: bottom sheet ——— */
@media (max-width:700px){
  #panel{top:auto;left:10px;right:10px;bottom:10px;width:auto;max-height:none;height:auto;
    transform:translateY(112%);display:flex}
  #panel.open{transform:translateY(0)}
  .poster{padding:22px 18px 16px;height:auto;max-height:56vh;max-height:56dvh}
  #masthead{padding:8px 12px 9px}
  .mast-kicker{display:none}
  #hint{font-size:8px;padding:6px 11px;bottom:14px;left:12px;right:64px;transform:none;
    max-width:none;white-space:normal;text-align:center}
  #zoomctl{bottom:12px;right:10px}
  #zoomctl button{width:40px;height:40px}
}
@media (max-height:480px){
  #panel{top:10px;bottom:10px;max-height:none;height:auto}
  .poster{max-height:calc(100vh - 20px)}
}
body.day #vignette{opacity:.88}
body.day #lantern{opacity:.8}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}