:root{
  --paper:#e9e0cc; --paper2:#f3ecdb; --plate:#ded2b8; --ink:#2e2519; --ink2:#5c4e39;
  --rule:#a89madd; --rule:#a8977a; --blue:#26456e; --blueW:#8fa6c4; --red:#8c2f2a; --redW:#c99a92;
  --gold:#8a6a2f; --green:#4a5d3a; --shade:rgba(46,37,25,.10);
  --face:Georgia,'Iowan Old Style','Times New Roman',serif;
  --data:'Consolas','SF Mono',Menlo,monospace;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--paper);color:var(--ink);font-family:var(--face);
  overflow:hidden;-webkit-text-size-adjust:100%;
  background-image:
    repeating-linear-gradient(0deg,rgba(46,37,25,.028) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(46,37,25,.02) 0 1px,transparent 1px 4px);
}
#app{display:flex;flex-direction:column;height:100%}

/* ---- head ---- */
#head{display:flex;align-items:baseline;gap:14px;padding:7px 14px;border-bottom:1.5px solid var(--ink);
  background:linear-gradient(#f3ecdb,#e4d9c1)}
#head h1{font-size:16px;margin:0;letter-spacing:.06em;font-weight:600;white-space:nowrap}
#head h1 small{font-weight:400;font-style:italic;color:var(--ink2);letter-spacing:0}
#state{margin-left:auto;display:flex;gap:12px;align-items:center;font-family:var(--data);font-size:11.5px}
.pip{display:inline-block;width:7px;height:7px;border:1px solid var(--ink);margin-right:2px;vertical-align:1px}
.pip.on.w{background:var(--blue)} .pip.on.e{background:var(--red)} .pip.off{background:transparent;opacity:.45}
.army{display:flex;align-items:center;gap:5px;padding:2px 7px;border:1px solid var(--rule);background:rgba(255,255,255,.35)}
.army.turn{border-color:var(--ink);box-shadow:inset 0 0 0 1px rgba(46,37,25,.25)}
.army b{font-family:var(--face);font-size:12px}
.army.w b{color:var(--blue)} .army.e b{color:var(--red)}

/* ---- body ---- */
#body{flex:1;display:flex;min-height:0}
#stage{flex:1;position:relative;min-width:0;background:var(--plate)}
canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
#side{width:314px;border-left:1.5px solid var(--ink);display:flex;flex-direction:column;
  background:linear-gradient(#f1e9d7,#e6dcc4);min-height:0}

/* zoom cluster */
#zoom{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;gap:5px}
#zoom button{width:34px;height:34px;font-size:16px;line-height:1;padding:0}

/* hover card */
#card{position:absolute;pointer-events:none;max-width:255px;padding:8px 10px;
  background:var(--paper2);border:1.2px solid var(--ink);box-shadow:3px 4px 0 rgba(46,37,25,.22);
  font-size:11.5px;line-height:1.42;display:none;z-index:5}
#card .nm{font-weight:600;letter-spacing:.03em;border-bottom:1px solid var(--rule);padding-bottom:3px;margin-bottom:4px}
#card .nm.w{color:var(--blue)} #card .nm.e{color:var(--red)}
#card table{width:100%;border-collapse:collapse;font-family:var(--data);font-size:10.5px}
#card td{padding:0}
#card td:last-child{text-align:right}
#card .chips{margin-top:5px}
.chip{display:inline-block;border:1px solid var(--ink2);padding:0 4px;margin:2px 3px 0 0;font-size:9.5px;
  font-family:var(--data);letter-spacing:.04em;text-transform:uppercase}
.chip.bad{border-color:var(--red);color:var(--red)}
.chip.good{border-color:var(--green);color:var(--green)}
#card .why{margin-top:5px;padding-top:4px;border-top:1px solid var(--rule);font-style:italic;color:var(--ink2)}

/* cost chip on the map */
#cost{position:absolute;pointer-events:none;display:none;padding:2px 7px;background:var(--paper2);
  border:1.2px solid var(--ink);font-family:var(--data);font-size:11px;z-index:4;white-space:nowrap}
#cost .risk{color:var(--red)}

/* ---- side panel ---- */
.sec{border-bottom:1px solid var(--rule);padding:9px 12px}
.sec h2{margin:0 0 6px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);font-weight:600}
#detail{min-height:96px}
#detail .empty{font-style:italic;color:var(--ink2);font-size:12px}
#acts{display:flex;flex-wrap:wrap;gap:5px}
button{font-family:var(--face);font-size:12px;padding:4px 10px;background:var(--paper2);
  border:1.2px solid var(--ink);color:var(--ink);cursor:pointer;letter-spacing:.02em}
button:hover:not(:disabled){background:#fff8e8}
button:active:not(:disabled){transform:translateY(1px)}
button:disabled{opacity:.4;cursor:default}
button.key{background:var(--ink);color:var(--paper2)}
button.key:hover:not(:disabled){background:#463823}

/* the ledger — signature element */
#ledger{flex:1;overflow:auto;padding:9px 12px;min-height:0}
.led{border:1.2px solid var(--ink);background:var(--paper2);padding:8px 9px;margin-bottom:9px;
  box-shadow:2px 3px 0 rgba(46,37,25,.16)}
.led .hd{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);
  border-bottom:1px solid var(--ink);padding-bottom:3px;margin-bottom:5px;display:flex;justify-content:space-between}
.led table{width:100%;border-collapse:collapse;font-family:var(--data);font-size:10.5px}
.led td{padding:.5px 0}
.led td:last-child{text-align:right;width:34px}
.led .who{font-family:var(--face);font-size:11px;font-weight:600;padding-top:3px}
.led .who.w{color:var(--blue)} .led .who.e{color:var(--red)}
.led .sum td{border-top:1px solid var(--ink);font-weight:700;padding-top:2px}
.led .verdict{margin-top:6px;padding-top:5px;border-top:2px double var(--ink);text-align:center;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.led .verdict.win{color:var(--green)} .led .verdict.lose{color:var(--red)} .led .verdict.even{color:var(--gold)}
.led .note{font-size:10.5px;font-style:italic;color:var(--ink2);text-align:center;margin-top:3px}

/* dispatch log */
#log{height:118px;overflow:auto;padding:7px 12px;font-family:var(--data);font-size:10.5px;line-height:1.5;
  background:rgba(255,255,255,.22);border-top:1px solid var(--rule)}
#log div{padding-left:12px;text-indent:-12px}
#log .w{color:var(--blue)} #log .e{color:var(--red)}
#log .t{color:var(--ink2)}

/* ---- sheets ---- */
.veil{position:fixed;inset:0;background:rgba(46,37,25,.55);display:flex;align-items:center;
  justify-content:center;padding:18px;z-index:20}
.veil[hidden]{display:none}
.sheet{background:var(--paper2);border:2px solid var(--ink);max-width:660px;width:100%;max-height:92vh;
  overflow:auto;padding:22px 26px;box-shadow:6px 8px 0 rgba(46,37,25,.35)}
.sheet h2{margin:0 0 2px;font-size:22px;letter-spacing:.04em}
.sheet .sub{font-style:italic;color:var(--ink2);margin-bottom:14px;font-size:13px}
.sheet h3{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);
  border-bottom:1px solid var(--rule);padding-bottom:3px;margin:16px 0 7px}
.sheet p{font-size:13px;line-height:1.6;margin:0 0 9px}
.sheet ul{font-size:13px;line-height:1.6;margin:0 0 9px;padding-left:18px}
.sheet table{width:100%;border-collapse:collapse;font-size:11.5px;font-family:var(--data);margin-bottom:9px}
.sheet th{text-align:left;border-bottom:1px solid var(--ink);padding:3px 5px;font-family:var(--face);
  font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.sheet td{padding:2px 5px;border-bottom:1px solid rgba(168,151,122,.4)}
.sheet td:not(:first-child){text-align:center}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;align-items:center}
.pickers{display:flex;gap:20px;flex-wrap:wrap;margin:6px 0 4px}
.pick{font-size:12.5px}
.pick label{display:block;margin-bottom:3px}
.legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:5px 12px;margin-bottom:9px}
.legend div{display:flex;align-items:center;gap:7px;font-size:11.5px}
.legend canvas{border:1px solid var(--rule);background:var(--paper)}
.win{text-align:center;padding:8px 0 4px}
.win .verd{font-size:26px;letter-spacing:.05em;margin-bottom:2px}
.win .verd.w{color:var(--blue)} .win .verd.e{color:var(--red)}
.win .why{font-style:italic;color:var(--ink2)}

@media (max-width:900px){
  #body{flex-direction:column}
  #side{width:auto;border-left:0;border-top:1.5px solid var(--ink);max-height:44%}
  #stage{flex:1;min-height:200px}
  #log{height:74px}
  #head h1 small{display:none}
  #state{font-size:10.5px;gap:7px}
  .sheet{padding:16px 15px}
}

/* layout classes lifted out of index.html so the markup carries no inline style */
.sec.grow{flex:1;display:flex;flex-direction:column;min-height:0;padding:0}
.sec h2.inset{padding:9px 12px 0;margin:0 0 4px}