/* Highcrest client. Layout: one-screen lantern-lit field journal. Header (place, vitals, clock, threat), an ink plate of the location, scrolling story feed, dock pinned to the thumb. Single dark theme by design. */
:root{
  --night:#11151a; --panel:#1a2028; --panel2:#222a34; --rule:#2c3541;
  --ink:#e8e2d4; --muted:#929ba6;
  --brass:#e0aa48; --brass-dim:rgba(224,170,72,.16);
  --verdigris:#72c2b0; --verd-dim:rgba(114,194,176,.14);
  --blood:#d75a43; --blood-dim:rgba(215,90,67,.16);
  --ok:#8fc77a;
  --paper:#d8ccb4; --sepia:#1e1913;
  --f-display:"Pirata One",Georgia,serif;
  --f-tale:"Alegreya",Georgia,"Times New Roman",serif;
  --f-ui:"Alegreya Sans",system-ui,-apple-system,sans-serif;
  --f-sc:"Alegreya Sans SC","Alegreya Sans",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--night);color:var(--ink);font-family:var(--f-ui);font-size:15px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
#app{height:100%;display:flex;flex-direction:column;max-width:680px;margin:0 auto}

/* header */
header{padding-block:10px 8px;display:flex;flex-direction:column;gap:6px}
.toprow{display:flex;align-items:center;gap:10px}
.place{flex:1;min-width:0}
.place small{display:block;font-family:var(--f-sc);letter-spacing:.08em;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.place h1{margin:0;font-family:var(--f-display);font-weight:400;font-size:26px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbtn{background:var(--panel);border:1px solid var(--rule);border-radius:8px;padding:6px 10px;font-family:var(--f-sc);font-size:13px;letter-spacing:.04em}
.hbtn b{color:var(--brass);font-weight:700}
.vitals{display:flex;align-items:center;gap:12px;font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted)}
.bar{flex:1;height:8px;background:var(--panel2);border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--blood);transition:width .4s}
.vitals .hp{color:var(--ink)}
.vitals .silver{color:var(--brass)}
.clock{display:flex;justify-content:space-between;align-items:center;gap:10px;white-space:nowrap;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.clock > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.clock b{color:var(--ink);font-weight:500}
.clock .dawn{white-space:nowrap}
.clock .dawn.late{color:var(--brass)}
#threat{display:flex;align-items:center;gap:10px;border:1px solid rgba(215,90,67,.45);background:var(--blood-dim);border-radius:8px;padding:5px 10px;font-size:13px}
#threat .t{flex:1;min-width:0;color:var(--ink)}
#threat .n{font-family:var(--f-sc);letter-spacing:.06em;color:var(--blood);font-weight:700;white-space:nowrap}
#threat.due{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{border-color:var(--blood)}}
.tension{display:flex;gap:3px;align-items:center}
.tension i{width:6px;height:6px;border-radius:50%;background:var(--panel2)}
.tension i.on{background:var(--brass)}
.tension i.hot{background:var(--blood)}

/* scene */
#scene{padding-block:6px 8px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:8px}
.plate{position:relative;border-radius:6px;overflow:hidden;background:var(--paper);box-shadow:0 0 0 1px #000 inset}
.plate canvas{display:block;width:100%;height:auto;aspect-ratio:3/1;max-width:100%}
.plate .cap{position:absolute;left:8px;bottom:6px;font-family:var(--f-display);font-size:15px;color:var(--sepia);background:rgba(216,204,180,.75);padding:0 6px;border-radius:3px}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border-radius:999px;padding:4px 11px;font-size:12.5px;border:1px solid transparent;background:none;white-space:nowrap}
.chip.feat{background:var(--verd-dim);color:var(--verdigris)}
.chip.npc{background:var(--verd-dim);color:var(--verdigris);border-color:rgba(114,194,176,.35)}
.chip.exit{border-color:var(--rule);color:var(--ink)}
.chip.exit::before{content:"→ ";color:var(--muted)}
.scenebar{display:flex;justify-content:flex-end}
#sceneToggle{background:none;border:0;color:var(--muted);font-size:12px;padding:0;font-family:var(--f-sc);letter-spacing:.06em}

/* enemy */
#enemy{padding:8px 10px;border:1px solid rgba(215,90,67,.45);background:var(--blood-dim);border-radius:10px}
#enemy .row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
#enemy h3{margin:0;font-family:var(--f-display);font-weight:400;font-size:20px;color:var(--blood)}
#enemy .stat{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
#enemy p{margin:4px 0 6px;font-size:13px;color:var(--muted);font-family:var(--f-tale)}

/* feed */
#feed{flex:1;overflow-y:auto;padding-block:14px;display:flex;flex-direction:column;gap:12px;min-height:0;overscroll-behavior:contain}
.narr{font-family:var(--f-tale);font-size:17px;line-height:1.5;margin:0;max-width:62ch}
.narr.open::first-letter{font-family:var(--f-display);font-size:2.6em;float:left;line-height:.9;padding:4px 6px 0 0;color:var(--brass)}
.you{align-self:flex-end;max-width:85%;background:var(--panel);border:1px solid var(--rule);border-radius:12px 12px 2px 12px;padding:7px 11px;font-size:14px}
.you::before{content:"You — ";font-family:var(--f-sc);color:var(--muted);font-size:12px;letter-spacing:.05em}
.sys{font-size:13.5px;color:var(--muted);font-style:italic;font-family:var(--f-tale)}
.sys.move{font-style:normal;font-family:var(--f-display);font-size:20px;color:var(--verdigris);padding-top:8px;border-top:1px dashed var(--rule)}
.sys.warn{font-style:normal;font-family:var(--f-ui);color:var(--blood);font-weight:500}
.sys.time{font-style:normal;font-family:var(--f-sc);letter-spacing:.06em;font-size:12px}
.roll{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--muted);
  border-left:3px solid var(--rule);padding:4px 0 4px 10px}
.roll .lbl{font-family:var(--f-sc);letter-spacing:.06em;color:var(--ink)}
.roll .die{display:inline-grid;place-items:center;width:28px;height:28px;border:1.5px solid var(--muted);border-radius:6px;transform:rotate(45deg);font-weight:700;color:var(--ink)}
.roll .die span{transform:rotate(-45deg)}
.roll.ok{border-left-color:var(--ok)} .roll.ok .verdict{color:var(--ok)}
.roll.bad{border-left-color:var(--blood)} .roll.bad .verdict{color:var(--blood)}
.roll .verdict{font-family:var(--f-sc);font-weight:700;letter-spacing:.08em}
.roll .why{flex-basis:100%;font-style:italic}
.gain{font-size:13px;color:var(--brass)}
.gain.lose{color:var(--muted)}
.gain.hurt{color:var(--blood)}
.gain.heal{color:var(--ok)}
mark.it{background:var(--brass-dim);color:var(--brass);border-radius:4px;padding:0 3px}
mark.pl{background:none;color:var(--verdigris)}
.thinking{font-family:var(--f-tale);font-style:italic;color:var(--muted)}
.thinking::after{content:"";animation:dots 1.4s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

/* dock */
#dock{border-top:1px solid var(--rule);padding-block:10px max(10px,env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px;background:var(--night)}
#choices{display:flex;flex-wrap:wrap;gap:6px}
#choices button{background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:7px 11px;font-size:13.5px;text-align:left}
#choices button:active{background:var(--panel2)}
.composer{display:flex;gap:8px;align-items:flex-end}
#act{flex:1;min-width:0;resize:none;background:var(--panel);border:1px solid var(--rule);border-radius:12px;color:var(--ink);font:16px/1.35 var(--f-ui);padding:10px 12px;max-height:120px}
#act::placeholder{color:var(--muted)}
#send{background:var(--brass);color:#1a1408;border:0;border-radius:12px;padding:10px 16px;font-family:var(--f-sc);font-weight:700;letter-spacing:.05em}
#send:disabled{opacity:.45;cursor:default}
#send.stop{background:var(--panel2);color:var(--ink);border:1px solid var(--rule)}
#recog{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;color:var(--muted)}
#recog:empty{display:none}
#recog .it{background:var(--brass-dim);color:var(--brass);border-radius:6px;padding:2px 8px;font-weight:500}
#recog .it::before{content:"✓ "}
#recog .pl{background:var(--verd-dim);color:var(--verdigris);border-radius:6px;padding:2px 8px}
#recog .miss{background:var(--blood-dim);color:var(--blood);border-radius:6px;padding:2px 8px}
#status{font-size:12px;color:var(--muted)}
#status:empty{display:none}
#status.err{color:var(--blood)}

/* sheets */
.sheet-bg{position:fixed;inset:0;background:rgba(5,7,10,.6);z-index:20;display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:680px;max-height:82%;overflow-y:auto;background:var(--panel);border-top:1px solid var(--rule);border-radius:16px 16px 0 0;
  padding-block:14px max(18px,env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.sheet h2{font-family:var(--f-display);font-weight:400;font-size:28px;margin:0 0 4px;display:flex;justify-content:space-between;align-items:center}
.sheet h2 button{background:none;border:1px solid var(--rule);border-radius:8px;font-family:var(--f-sc);font-size:13px;padding:4px 10px}
.sheet .sub{color:var(--muted);font-size:13px;margin:0 0 12px}
.item{border-top:1px solid var(--rule);padding-block:10px;display:grid;grid-template-columns:1fr auto;gap:4px 10px}
.item .nm{font-weight:700;color:var(--brass)}
.item .nm small{color:var(--muted);font-weight:400}
.item .ds{grid-column:1/-1;font-family:var(--f-tale);font-size:14px;color:var(--muted);margin:0}
.item .tags{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px}
.item .tags span{font-size:11px;font-family:var(--f-sc);letter-spacing:.05em;color:var(--muted);border:1px solid var(--rule);border-radius:4px;padding:0 5px}
.item .acts{display:flex;gap:6px;align-items:start}
.item .acts button{background:var(--panel2);border:1px solid var(--rule);border-radius:8px;padding:4px 10px;font-size:13px}
.item .acts button.on{border-color:var(--brass);color:var(--brass)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.stats div{background:var(--panel2);border-radius:10px;padding:8px;text-align:center}
.stats b{display:block;font-size:22px;font-variant-numeric:tabular-nums}
.stats span{font-family:var(--f-sc);font-size:11px;letter-spacing:.08em;color:var(--muted)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px;margin:0 0 14px}
.kv dt{color:var(--muted);font-family:var(--f-sc);letter-spacing:.05em}
.kv dd{margin:0}
.chron{margin:0;padding-left:18px;font-family:var(--f-tale);font-size:14px;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.you .tier{display:inline-block;margin-left:8px;font-family:var(--f-sc);font-size:10.5px;letter-spacing:.08em;color:var(--muted);border:1px solid var(--rule);border-radius:4px;padding:0 5px;vertical-align:1px}
.seg{display:flex;gap:0;border:1px solid var(--rule);border-radius:10px;overflow:hidden;width:max-content}
.seg button{background:none;border:0;padding:7px 16px;font-family:var(--f-sc);font-size:13px;letter-spacing:.05em;color:var(--muted)}
.seg button+button{border-left:1px solid var(--rule)}
.seg button.on{background:var(--brass-dim);color:var(--brass)}
.chip.feat.fresh{position:relative;padding-right:18px}
.chip.feat.fresh::after{content:"";position:absolute;right:8px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--brass)}
.tagrow{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px}
.tagrow span{font-size:11px;font-family:var(--f-sc);letter-spacing:.05em;color:var(--muted);border:1px solid var(--rule);border-radius:4px;padding:0 5px}
.actlist{display:flex;flex-direction:column;gap:8px}
.actlist button{background:var(--panel2);border:1px solid var(--rule);border-radius:10px;padding:10px 12px;text-align:left;font-size:15px}
.actlist button:active{border-color:var(--brass)}
.att{font-size:14px;color:var(--muted);margin:-4px 0 12px}
.att b{color:var(--ink)}
.mapwrap{border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px #000 inset;background:var(--paper)}
.mapwrap canvas{display:block;width:100%;height:auto;aspect-ratio:1;max-width:100%}
.pinfo{padding-block:12px 4px}
.pinfo h3{margin:0;font-family:var(--f-display);font-weight:400;font-size:24px}
.pinfo .pmeta{font-family:var(--f-sc);font-size:12px;letter-spacing:.06em;color:var(--muted);margin-bottom:6px}
.pinfo p{margin:0 0 8px;font-family:var(--f-tale);font-size:15px;line-height:1.45}
.pinfo .route{color:var(--verdigris);font-family:var(--f-ui);font-size:14px}
.pinfo .here{color:var(--blood);font-family:var(--f-ui);font-size:14px}
.travel{background:var(--brass);color:#1a1408;border:0;border-radius:10px;padding:9px 14px;font-family:var(--f-sc);font-weight:700;letter-spacing:.04em}
.gain.map{color:var(--verdigris)}
.toprow .hbtn{padding:6px 8px}
.danger{background:none;border:1px solid rgba(215,90,67,.5);color:var(--blood);border-radius:8px;padding:6px 12px;margin-top:16px}
#death{position:fixed;inset:0;z-index:30;background:rgba(10,4,4,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px}
#death h2{font-family:var(--f-display);font-weight:400;font-size:44px;color:var(--blood);margin:0}
#death p{font-family:var(--f-tale);max-width:34ch;color:var(--ink);margin:0}
#death button{background:var(--brass);color:#1a1408;border:0;border-radius:12px;padding:10px 18px;font-family:var(--f-sc);font-weight:700}
@media (prefers-reduced-motion:reduce){.thinking::after{animation:none;content:"..."}.bar i{transition:none}#threat.due{animation:none}}

/* ---------- app shell: sign-in, campaigns, wallet ---------- */
.screen{height:100%;display:flex;flex-direction:column;max-width:680px;margin:0 auto;overflow-y:auto;padding-block:24px}
.brand{font-family:var(--f-display);font-size:44px;line-height:1;margin:24px 0 4px;color:var(--brass);text-wrap:balance}
.tagline{font-family:var(--f-tale);color:var(--muted);font-size:16px;margin:0 0 24px;max-width:40ch}
.form{display:flex;flex-direction:column;gap:12px;max-width:420px}
.form label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);font-family:var(--f-sc);letter-spacing:.05em}
.form input{background:var(--panel);border:1px solid var(--rule);border-radius:10px;color:var(--ink);font:16px var(--f-ui);padding:10px 12px}
.primary{background:var(--brass);color:#1a1408;border:0;border-radius:12px;padding:11px 16px;font-family:var(--f-sc);font-weight:700;letter-spacing:.05em}
.primary:disabled{opacity:.5}
.linkish{background:none;border:0;color:var(--verdigris);padding:0;text-align:left;font-size:14px}
.formerr{color:var(--blood);font-size:14px;min-height:1em;margin:0}
.ai-note{font-size:12px;color:var(--muted);margin-top:18px;max-width:46ch}
.camps{display:flex;flex-direction:column;gap:10px;margin-block:12px 20px}
.camp{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--rule);border-radius:12px;padding:12px 14px;text-align:left}
.camp b{font-family:var(--f-display);font-weight:400;font-size:22px;display:block}
.camp span{color:var(--muted);font-size:13px}
.wallet{color:var(--brass);font-variant-numeric:tabular-nums}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.narr.live{opacity:.92}
.narr.live::after{content:"▍";color:var(--brass);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.backbtn{background:none;border:0;color:var(--muted);font-family:var(--f-sc);font-size:12px;letter-spacing:.06em;padding:0}
@media (prefers-reduced-motion:reduce){.narr.live::after{animation:none}}

/* ---------- Update A: body, items, steps, journey, desktop layout ---------- */
.layout{height:100%;display:flex;justify-content:center;gap:20px}
.layout #app{flex:1;min-width:0}
.side{display:none}
@media (min-width:1100px){
  .side{display:block;width:300px;flex:none;overflow-y:auto;padding-block:14px;scrollbar-width:thin}
  #packBtn,#heroBtn{display:none}
}
.sidetitle{font-family:var(--f-display);font-weight:400;font-size:24px;margin:8px 0 4px}
.vitals .st{color:var(--verdigris)}
.bar.st i{background:var(--verdigris)}
.pills{display:flex;flex-wrap:wrap;gap:4px}
.pills:empty{display:none}
.pill{font-size:11.5px;font-family:var(--f-sc);letter-spacing:.05em;border:1px solid var(--rule);border-radius:999px;padding:1px 8px;color:var(--muted)}
.pill.bad{border-color:rgba(215,90,67,.5);color:var(--blood)}
.pill.good{border-color:rgba(143,199,122,.5);color:var(--ok)}
#journey{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--verdigris)}
#journey .t{white-space:nowrap}
#journey .bar i{background:var(--verdigris)}
.chip.loot{border-color:rgba(224,170,72,.4);color:var(--brass);background:none}
.chip.loot.owned{border-style:dashed}
.steps{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:12.5px;color:var(--muted);border-left:3px solid var(--rule);padding:3px 0 3px 10px}
.steps span.done{color:var(--ink)}
.steps span.lost{text-decoration:line-through;opacity:.6}
.steps small{color:var(--muted);font-variant-numeric:tabular-nums}
.steps i{font-style:normal;color:var(--muted)}
.steps em{flex-basis:100%;color:var(--blood);font-style:normal;font-family:var(--f-sc);letter-spacing:.05em}
.steps.cut{border-left-color:var(--blood)}
#choices button.lead{border-color:rgba(114,194,176,.5);color:var(--verdigris)}
.meter{display:grid;grid-template-columns:62px 1fr 30px;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin-bottom:5px;font-variant-numeric:tabular-nums}
.meter b{color:var(--ink);font-weight:500;text-align:right}
.meter.hp .bar i{background:var(--blood)}
.meter.st .bar i{background:var(--verdigris)}
.meter.food .bar i{background:#c08a4a}
.meter.water .bar i{background:#5f8fbf}
.meter.rest .bar i{background:#8a7fb8}
.conds{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.cond{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13.5px;border:1px solid var(--rule);border-radius:8px;padding:6px 8px}
.cond.bad{border-color:rgba(215,90,67,.45)}
.cond small{display:block;color:var(--muted);font-size:12px}
.cond button{background:var(--panel2);border:1px solid var(--rule);border-radius:6px;padding:3px 10px;font-size:12.5px}
.warnline{color:var(--blood)}
.packlist{display:flex;flex-direction:column}
.prow{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-block:6px;border-top:1px solid var(--rule);font-size:14px}
.prow small{color:var(--muted)}
.prow small.eq{color:var(--brass)}
.pacts{display:flex;gap:4px}
.pacts button{background:var(--panel2);border:1px solid var(--rule);border-radius:6px;padding:2px 8px;font-size:12px}
#miniMap{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:8px;cursor:pointer;margin-top:6px}
.check{flex-direction:row!important;align-items:center;gap:8px!important;font-family:var(--f-ui)!important;letter-spacing:0!important;font-size:14px!important;color:var(--ink)!important}
.check input{width:18px;height:18px}

/* ---------- outcome tiers and traits ---------- */
.roll.t-flourish{border-left-color:var(--brass)} .roll.t-flourish .verdict{color:var(--brass)}
.roll.t-clean{border-left-color:var(--ok)} .roll.t-clean .verdict{color:var(--ok)}
.roll.t-costly{border-left-color:#c9a24a} .roll.t-costly .verdict{color:#d6b25c}
.roll.t-fail{border-left-color:var(--blood)} .roll.t-fail .verdict{color:var(--blood)}
.roll.t-spill{border-left-color:#8b1e12} .roll.t-spill .verdict{color:#ff6b52}
.roll .die.nat20{border-color:var(--brass);color:var(--brass)}
.roll .die.nat1{border-color:var(--blood);color:var(--blood)}
.roll .parts{flex-basis:100%;display:flex;flex-wrap:wrap;gap:4px}
.roll .part{font-size:11.5px;border-radius:4px;padding:0 6px;border:1px solid var(--rule)}
.roll .part.plus{color:var(--ok);border-color:rgba(143,199,122,.35)}
.roll .part.minus{color:var(--blood);border-color:rgba(215,90,67,.35)}
.tr{font-size:11px;font-family:var(--f-sc);letter-spacing:.04em;border-radius:4px;padding:0 6px;border:1px solid var(--rule);color:var(--muted)}
.tr.function{color:var(--verdigris);border-color:rgba(114,194,176,.35)}
.tr.good{color:var(--brass);border-color:rgba(224,170,72,.4)}
.tr.bad{color:var(--blood);border-color:rgba(215,90,67,.4)}
.tr.quality.good{color:var(--brass)}
.tr.material,.tr.property,.tr.flavor{color:var(--muted)}
.pconds{display:inline-flex;gap:3px;margin-left:6px;vertical-align:1px}
.tagrow .tr{font-size:11.5px}