:root{
  --bg:#1c1f1d; --panel:#262a27; --panel2:#2f3430; --ink:#e9e4d4; --muted:#a8a693; --line:#3d433e;
  --accent:#d6a744; --accent2:#f0c96a; --danger:#b8432f; --g:#9aa7b0; --s:#c4704f; --ok:#7fa36a;
  --font:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:14px/1.35 var(--font)}
body{overflow:hidden}
button,select,input{font:inherit}
#app{display:grid;grid-template-columns:290px minmax(0,1fr) 232px;grid-template-areas:"info board ctrl";height:100vh;height:100dvh}
#info{grid-area:info;border-right:1px solid var(--line)}
#ctrl{grid-area:ctrl;border-left:1px solid var(--line)}
#info,#ctrl{background:var(--panel);overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:10px;min-height:0}
#board{grid-area:board;position:relative;min-width:0;min-height:0;background:#4b5146;overflow:hidden}
#map{display:block;width:100%;height:100%;touch-action:none;cursor:grab;outline:none}
#map:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
#map.dragging{cursor:grabbing}
.brand h1{font-size:19px;margin:0;letter-spacing:.3px;line-height:1.15}
.brand .ver{font:12px var(--mono);color:var(--accent);vertical-align:middle;margin-left:4px;border:1px solid #6b5a2c;border-radius:3px;padding:0 4px}
.brand .sub{color:var(--muted);font-size:12.5px;font-style:italic;margin-top:2px}
.panel{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:8px 9px}
.panel.grow{flex:1 1 auto;min-height:150px;display:flex;flex-direction:column}
.panel h2{font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent);margin:0 0 6px;font-family:var(--mono);font-weight:600}
.hint{color:var(--muted);text-transform:none;letter-spacing:0;font-weight:400}
.row{display:flex;align-items:baseline;gap:8px}
.k{color:var(--muted);font-size:12px}
.v{font-family:var(--mono)}
.big{font-size:20px;color:var(--accent2)}
.small{font-size:12.5px}
.muted{color:var(--muted)}
.track{display:grid;grid-template-columns:repeat(12,1fr);gap:2px;margin:6px 0}
.track div{height:42px;border:1px solid var(--line);border-radius:3px;font:10px/1 var(--mono);color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:3px 0;background:#232724}
.track div.now{border-color:var(--accent);color:var(--ink);background:#3a3524}
.track div.past{opacity:.55}
.track b{font-weight:600;font-size:9.5px;line-height:1}.track .rg{color:var(--g)} .track .rs{color:var(--s)}
.phase-line{display:flex;gap:6px;align-items:center;font-size:13.5px}
.side-chip{font:11px var(--mono);padding:1px 6px;border-radius:3px;color:#111}
.side-chip.G{background:var(--g)} .side-chip.S{background:var(--s)}
.vpgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px}
.vpgrid div{display:flex;justify-content:space-between;align-items:baseline}
.vpbar{position:relative;height:10px;margin-top:6px;border-radius:5px;background:linear-gradient(90deg,#8e3b2a 0 32%,#b6694c 32% 48%,#77756a 48% 65%,#8899a3 65% 83%,#a9b9c4 83%)}
.vpbar i{position:absolute;top:-3px;width:3px;height:16px;background:var(--accent2);border-radius:2px;box-shadow:0 0 0 1px #000}
.ulist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.ulist li{display:flex;gap:7px;align-items:center;padding:3px 4px;border-radius:4px;background:#23272400;border:1px solid transparent}
.ulist li.on{border-color:#6b5a2c;background:#332f22}
.ulist li canvas{flex:none;border-radius:3px}
.ulist .nm{font-weight:600}
.ulist .meta{font-size:11.5px;color:var(--muted)}
.ulist input{accent-color:var(--accent)}
.est{margin-top:6px;font-family:var(--mono);font-size:12.5px}
.est b{color:var(--accent2)}
.log{list-style:none;margin:0;padding:0 2px 0 0;overflow-y:auto;flex:1 1 auto;min-height:80px;font-size:12.5px}
.log li{padding:3px 0;border-bottom:1px dotted #3a3f3a}
.log li .t{font:10.5px var(--mono);color:var(--muted);margin-right:4px}
.log li.gcap,.log li.gatt{color:#c9d3d9} .log li.scap,.log li.satt{color:#e5b29b}
.log li.turn{color:var(--accent2);font-weight:600} .log li.oos{color:#e08c70}
button{background:#363c37;color:var(--ink);border:1px solid #4a514b;border-radius:5px;padding:7px 9px;cursor:pointer;min-height:34px}
button:hover:not(:disabled){background:#414841}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
button:disabled{opacity:.42;cursor:default}
button.primary{background:#6b5520;border-color:#9a7b2e;color:#fff6dc;font-weight:600}
button.primary:hover:not(:disabled){background:#7d6426}
button.danger{background:#7b2a1e;border-color:#a6412f;color:#fff;font-weight:600}
#btnEnd{width:100%;font-size:15px;padding:9px}
.btnrow{display:flex;gap:6px;margin-top:6px}
.btnrow > *{flex:1}
.btnrow.end{justify-content:flex-end}
.btnrow.end > *{flex:0 0 auto;min-width:110px}
.btnrow.three > *{flex:1}
.wide{width:100%;margin-top:6px}
.wide[hidden]{display:none}
#btnPause[aria-pressed=true]{background:#2f3b52;border-color:#7d9bc9;color:#fff;font-weight:700}
#btnEnd.confirm{background:#8a3b14;border-color:#d27a3c}
.sel input[type=range]{accent-color:var(--accent);width:100%}
.sw.ovr{background:#0000;border:2px dashed #e07b1a}
.wx{font:12px var(--mono);padding:1px 6px;border-radius:3px;margin-left:auto}
.wx.clear{background:#3b4a35;color:#cfe3c2}.wx.storm{background:#2f3b52;color:#cfdcff}
.oob{width:100%;border-collapse:collapse;font:12.5px var(--mono)}
.oob th{text-align:left;border-bottom:2px solid #b5a57a;padding:3px 4px;font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.oob td{border-bottom:1px dotted #c9b98c;padding:3px 4px}
.oob tr.click{cursor:pointer}.oob tr.click:hover{background:#fff6dc}
.oob .bad{color:#9b2c16;font-weight:700}.oob .warn{color:#7a5a17;font-weight:700}
.oobtabs{display:flex;gap:6px;margin-bottom:8px}.oobtabs button[aria-pressed=true]{background:#7a5a17}
.assets{margin-top:6px;font:12px/1.4 var(--mono);color:var(--muted)}
.assets b{color:var(--accent2);font-weight:600}
.refit{width:100%;margin-top:6px;background:#3d4a3b;border-color:#5f7a5a}
.refit[hidden]{display:none}
.airsel{display:flex;gap:4px;align-items:center}
.airsel span{font:12px var(--mono);color:var(--muted);flex:1}
.airsel button{min-width:38px;flex:0 0 auto;padding:5px 0}
.airsel button[aria-pressed=true]{background:#3c4c66;border-color:#7d9bc9;color:#fff;font-weight:700}
.sw.trench{background:repeating-linear-gradient(90deg,#2a2a2a 0 3px,#0000 3px 6px);border:0;height:5px}
.replay{margin-top:10px}
.replay canvas{width:100%;height:auto;border:1px solid #b5a57a;border-radius:4px;background:#c9bf98;display:block}
.replay .ctl{display:flex;gap:8px;align-items:center;margin-top:6px;font:13px var(--mono)}
.replay input[type=range]{flex:1;accent-color:#7a5a17}
.combatctl,.advctl{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.combatctl[hidden],.advctl[hidden]{display:none}
.chk{display:flex;gap:7px;align-items:center;font-size:13px;margin-top:5px;cursor:pointer}
.chk input{accent-color:var(--accent)}
.sel{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--muted)}
.sel select{background:#363c37;color:var(--ink);border:1px solid #4a514b;border-radius:4px;padding:5px}
.legend .lg{display:flex;align-items:center;gap:7px;font-size:12.5px;margin-top:3px}
.sw{display:inline-block;width:18px;height:12px;border-radius:2px;border:1px solid #0004}
.sw.clear{background:#d9cfa6}.sw.forest{background:#8fa56b}.sw.swamp{background:#9fb8a8}
.sw.river{background:linear-gradient(#0000 40%,#3a6ea5 40% 70%,#0000 70%);border:0}
.sw.road{background:linear-gradient(#0000 42%,#8a3f22 42% 60%,#0000 60%);border:0}
.sw.city{background:#3b3631}
.mtitle{display:none;position:absolute;left:8px;bottom:8px;background:#1d201ed9;color:var(--ink);font-size:13px;padding:3px 8px;border-radius:4px;pointer-events:none}
.mtitle .ver{font:11px var(--mono);color:var(--accent)}
.banner{position:absolute;top:10px;left:50%;transform:translateX(-50%);background:#1d201ee6;border:1px solid var(--accent);color:var(--ink);padding:6px 14px;border-radius:20px;font-size:13.5px;pointer-events:none;white-space:nowrap}
.tip{position:absolute;pointer-events:none;background:#171a18ee;border:1px solid #555;color:var(--ink);font-size:12px;padding:4px 7px;border-radius:4px;max-width:240px}
.toasts{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;gap:6px;align-items:flex-end;pointer-events:none;max-width:min(420px,90%)}
.toast{background:#1b1e1cf0;border:1px solid #555;border-left:4px solid var(--accent);padding:6px 10px;border-radius:5px;font-size:12.5px;animation:tin .25s ease}
.toast.G{border-left-color:var(--g)} .toast.S{border-left-color:var(--s)}
@keyframes tin{from{opacity:0;transform:translateY(8px)}}
.modal{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:20;padding:12px}
.modal[hidden]{display:none}
.sheet{background:#efe8d4;color:#231f18;border-radius:8px;max-width:760px;width:100%;max-height:calc(100dvh - 24px);overflow:auto;padding:18px 20px;box-shadow:0 10px 50px #000a;border:1px solid #b5a57a}
.sheet h2{margin:0 0 10px;font-size:20px;letter-spacing:.3px}
.sheet h3{margin:12px 0 4px;font-size:14px;text-transform:uppercase;letter-spacing:1px;font-family:var(--mono);color:#6b4f12}
.sheet p,.sheet li{font-size:14px}
.sheet button{background:#3f3a2c;color:#fff7e0;border-color:#2a261d}
.sheet button.primary{background:#7a5a17}
.sheet .choice{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:6px 0 10px}
.sheet .choice label{border:1px solid #b5a57a;border-radius:6px;padding:8px;cursor:pointer;background:#f7f1e0;display:flex;gap:8px;align-items:flex-start}
.sheet .choice label:has(input:checked){border-color:#7a5a17;background:#fff6dc;box-shadow:0 0 0 2px #c69a35 inset}
.sheet .choice b{display:block}
.sheet .choice span{font-size:12.5px;color:#5a5240}
.sheet .note{font-size:12.5px;color:#5a5240}
/* combat slip */
.slip{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-family:var(--mono);font-size:13px}
.slip .col h4{margin:0 0 4px;font-size:12px;letter-spacing:1px;text-transform:uppercase}
.slip .ln{display:flex;justify-content:space-between;border-bottom:1px dotted #b5a57a;padding:2px 0}
.chits{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chit{width:62px;height:62px;perspective:400px}
.chit .in{position:relative;width:100%;height:100%;transition:transform .7s cubic-bezier(.3,.7,.3,1.2);transform-style:preserve-3d}
.chit.flip .in{transform:rotateY(180deg)}
.chit .f,.chit .b{position:absolute;inset:0;backface-visibility:hidden;border-radius:5px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #6d3a24;font-weight:700}
.chit .f{background:repeating-linear-gradient(135deg,#c4704f 0 6px,#b4613f 6px 12px);color:#fff3;font-size:24px}
.chit .b{background:#c4704f;color:#1d120c;transform:rotateY(180deg);font-size:16px}
.chit .b small{font-size:9.5px;font-weight:400}
.crtstrip{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;margin:12px 0 6px}
.crtstrip div{text-align:center;border:1px solid #b5a57a;border-radius:3px;padding:4px 0;font-family:var(--mono);font-size:12px;background:#f7f1e0}
.crtstrip div.base{border-style:dashed;border-color:#7a5a17}
.crtstrip div.fin{background:#7a5a17;color:#fff;font-weight:700}
.crtstrip div.hit{outline:3px solid #b8432f}
.res{display:flex;align-items:center;gap:14px;margin-top:8px}
.diebox{width:48px;height:48px;border-radius:8px;background:#fff;border:2px solid #231f18;display:flex;align-items:center;justify-content:center;font:700 24px var(--mono)}
.diebox.roll{animation:roll .6s steps(6)}
@keyframes roll{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.restext{font-size:18px;font-weight:700}
.events{font-size:13px;margin:6px 0 0;padding-left:18px}
.advpick{margin-top:8px;padding:8px;border:1px dashed #7a5a17;border-radius:6px}
.advpick label{display:inline-flex;gap:5px;margin-right:12px;font-family:var(--mono);font-size:13px}
.report-chart{width:100%;height:120px;background:#f7f1e0;border:1px solid #b5a57a;border-radius:4px}
.hc .chit .b{border-width:3px}
body.hc{--muted:#e6e2cf;--line:#a9a48c;--ink:#ffffff;--panel:#141614;--panel2:#1d201d;--bg:#0c0d0c}
body.hc button{border-color:#bdb59a;color:#fff}
body.hc .panel h2{color:#ffd76a}
body.hc .log li{border-bottom-color:#666}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.overview{flex:none}
#minimap{display:block;width:100%;height:auto;background:#171d18;border:1px solid #857b60;border-radius:4px;cursor:crosshair;touch-action:manipulation}
.overview .small{font-size:11px;margin-top:4px}
.overview details{margin-top:8px}
.overview summary{cursor:pointer;font:12px var(--mono);color:var(--accent2);padding:4px 0}
#objectiveCount{color:var(--muted);font-size:10px}
.objectives{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:7px}
.objective{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:6px;min-width:0;min-height:44px;font-size:12px;border-left:3px solid var(--s)}
.objective.G{border-left-color:var(--g)}
.objective span{font:10px var(--mono);color:var(--muted)}
.objective[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:-2px}
.command-brief{font-size:12px;line-height:1.5;margin-top:8px;padding:7px 8px;background:#20261f;border-left:3px solid var(--accent)}
.command-brief strong{color:var(--accent2)}
.command-brief p{margin:4px 0 0;color:var(--ink)}
.command-brief .supply-alert{color:#ffd5a9}
.sheet.title-sheet{max-width:1180px;background:#1c211e;color:var(--ink);border-color:#746544;padding:20px}
.title-sheet h2{font-size:18px;color:var(--accent2);margin-bottom:14px}
.title-layout{display:grid;grid-template-columns:minmax(260px,.88fr) minmax(350px,1.12fr);gap:24px;align-items:start}
.title-art{margin:0;position:sticky;top:0;background:#101611;border:1px solid #5d553e;border-radius:6px;overflow:hidden}
.title-art img{display:block;width:100%;height:auto;max-height:calc(100dvh - 168px);object-fit:contain}
.title-setup>p:first-child{margin-top:0;line-height:1.5;color:#d7d3c3}
.title-sheet h3{color:var(--accent2);font-size:12px;margin-top:14px}
.title-sheet .choice{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.title-sheet .choice label{background:#2b332c;color:#eee8d7;border-color:#5d6659;min-width:0;padding:8px}
.title-sheet .choice span{color:#c2c6b6;font-size:12px}
.title-sheet .choice label:has(input:checked){background:#3c3b28;color:#fff8e0;border-color:#d6a744;box-shadow:inset 0 0 0 1px #d6a744}
.title-sheet input{accent-color:var(--accent)}
.title-sheet .note{color:#bbbdae}
.title-sheet #modalBtns{position:sticky;bottom:-20px;padding:12px 0;background:#1c211e;border-top:1px solid #514d3a;flex-wrap:wrap;margin-top:16px}
.title-sheet button.primary{background:#a47924;color:#fff;border-color:#d6a744}
#app[inert]{pointer-events:none}
@media(max-width:760px){
  .sheet.title-sheet{padding:14px}
  .title-layout{grid-template-columns:1fr;gap:16px}
  .title-art{position:static;width:min(100%,300px);justify-self:center}
  .title-art img{max-height:55dvh}
  .title-sheet #modalBtns{bottom:-14px;display:grid;grid-template-columns:1fr 1fr}
  .title-sheet #modalBtns>*{min-width:0}
  .overview{max-width:430px;width:100%}
}
@media (prefers-reduced-motion: reduce){
  .chit .in,.diebox.roll,.toast{transition:none!important;animation:none!important}
}
@media (max-width: 900px){
  body{overflow:auto}
  #app{grid-template-columns:1fr;grid-template-rows:62vh auto auto;grid-template-areas:"board" "ctrl" "info";height:auto}
  #info,#ctrl{border:0;overflow:visible}
  #ctrl{display:grid;grid-template-columns:1fr 1fr;align-items:start}
  #ctrl .panel:first-child{grid-column:1 / -1}
  .panel.grow{min-height:220px;max-height:340px}
  .brand h1{font-size:17px}
  .mtitle{display:block}
}
@media (max-width: 480px){
  #ctrl{grid-template-columns:1fr}
  .slip{grid-template-columns:1fr}
}