:root{
  --paper:#efe2c2; --paper-2:#e4d1a4; --paper-3:#d8bf88;
  --ink:#3a2a16; --ink-2:#6b5333; --rule:#8d7048;
  --union:#26437f; --confed:#b12a27; --alert:#9b2a12;
  --table:#3a2d1e; --shadow:rgba(40,25,10,.35);
  --display:"IM Fell English", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --display-sc:"IM Fell English SC", "IM Fell English", Georgia, serif;
  --text:"Old Standard TT", "Iowan Old Style", Georgia, "Times New Roman", serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#2b2319; --paper-2:#342a1e; --paper-3:#47392a;
    --ink:#f0e3c4; --ink-2:#c9b58e; --rule:#866c47;
    --union:#8fa8e6; --confed:#ec7b6e; --alert:#f08a6a;
    --table:#17120c; --shadow:rgba(0,0,0,.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --paper:#2b2319; --paper-2:#342a1e; --paper-3:#47392a;
  --ink:#f0e3c4; --ink-2:#c9b58e; --rule:#866c47;
  --union:#8fa8e6; --confed:#ec7b6e; --alert:#f08a6a;
  --table:#17120c; --shadow:rgba(0,0,0,.55);
  color-scheme: dark;
}
:root{ box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); }
*,*::before,*::after{ box-sizing:inherit; }
html{ scroll-padding-top:env(safe-area-inset-top,0px); height:100%; }
html,body{ margin:0; height:100%; overflow:hidden; background:var(--table); color:var(--ink); font-family:var(--text); font-size:15px; line-height:1.4; }
body::before{ content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--table); }
#c{ position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; outline:none; }
button,select,input{ font:inherit; color:inherit; }
button{ cursor:pointer; }
:focus-visible{ outline:2px solid var(--alert); outline-offset:2px; }

/* map-borne labels */
#labels{ position:fixed; inset:0; pointer-events:none; overflow:hidden; }
.lbl{ position:absolute; transform:translate(-50%,-140%); white-space:nowrap; font-family:var(--display); font-style:italic; font-size:12px; color:#3a2a16; text-shadow:0 0 3px #f1e2bd,0 0 2px #f1e2bd; pointer-events:auto; cursor:pointer; }
.lbl.u{ color:#1f3a73; } .lbl.c{ color:#9e211e; }
.lbl.sel{ font-weight:bold; font-style:normal; text-decoration:underline; }
.lbl.intel{ font-size:11px; opacity:.9; pointer-events:none; }
.lbl.intel.stale{ opacity:.55; }
.lbl.obj{ font-style:normal; font-family:var(--display-sc); font-size:12px; letter-spacing:.04em; pointer-events:none; transform:translate(-50%,40%); }
.lbl.courier{ font-size:10px; pointer-events:none; opacity:.8; }

/* panels */
.panel{ position:fixed; background:var(--paper); color:var(--ink); border:1px solid var(--rule); box-shadow:0 0 0 3px var(--paper), 0 0 0 4px var(--rule), 0 8px 24px var(--shadow); }
.panel h2{ font-family:var(--display); font-weight:normal; font-size:19px; margin:0; padding:10px 14px 6px; border-bottom:1px solid var(--rule); display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.panel h2 small{ font-family:var(--text); font-size:12px; color:var(--ink-2); }
#cartouche{ top:calc(env(safe-area-inset-top,0px) + 14px); left:50%; transform:translateX(-50%); padding:8px 18px 10px; text-align:center; min-width:340px; }
#cartouche .t1{ font-family:var(--display-sc); font-size:12px; letter-spacing:.12em; color:var(--ink-2); }
#cartouche h1{ font-family:var(--display); font-weight:normal; font-size:26px; margin:0; line-height:1.1; letter-spacing:.02em; }
#cartouche .t2{ font-style:italic; font-size:13px; color:var(--ink-2); }
#clockrow{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:6px; }
#clock{ font-family:var(--display); font-size:22px; min-width:118px; }
.speeds{ display:flex; border:1px solid var(--rule); }
.speeds button{ background:transparent; border:0; border-right:1px solid var(--rule); padding:3px 9px; font-size:13px; }
.speeds button:last-child{ border-right:0; }
.speeds button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }
#army{ left:16px; top:calc(env(safe-area-inset-top,0px) + 16px); bottom:calc(env(safe-area-inset-bottom,0px) + 16px); width:300px; display:flex; flex-direction:column; }
#oob{ overflow:auto; padding:6px 0 12px; flex:1; }
.corps > .ch{ font-family:var(--display); font-size:16px; padding:8px 14px 2px; }
.div > .dh{ font-style:italic; font-size:13px; color:var(--ink-2); padding:4px 14px 2px 24px; cursor:pointer; }
.fmh{ cursor:pointer; }
.fmh:hover,.bde:hover{ background:var(--paper-2); }
.bde{ display:grid; grid-template-columns:1fr auto; gap:2px 8px; padding:4px 14px 4px 34px; cursor:pointer; font-size:13.5px; border-left:3px solid transparent; }
.bde.sel,.fmh.sel{ background:var(--paper-2); border-left-color:var(--alert); }
.bde .st{ font-size:12px; color:var(--ink-2); grid-column:1 / 3; font-style:italic; }
.bde .chip{ font-size:11px; padding:0 5px; border:1px solid var(--rule); align-self:start; }
.bde .chip.warn{ color:var(--alert); border-color:var(--alert); }
.bde.inactive{ opacity:.5; }
#right{ right:16px; top:calc(env(safe-area-inset-top,0px) + 16px); bottom:calc(env(safe-area-inset-bottom,0px) + 16px); width:350px; display:flex; flex-direction:column; }
#orderbox{ border-bottom:1px solid var(--rule); max-height:58%; overflow:auto; }
#orderbox .empty{ padding:12px 14px; font-style:italic; color:var(--ink-2); }
.who{ padding:8px 14px 4px; }
.who .nm{ font-family:var(--display); font-size:17px; }
.who .cm{ font-size:13px; }
.who .tr{ font-size:12px; color:var(--ink-2); font-style:italic; }
.who .rep{ font-size:13px; margin-top:4px; }
.fld{ padding:4px 14px; }
.fld label{ display:block; font-size:12px; color:var(--ink-2); margin-bottom:2px; }
.ogrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.ogrid button{ background:var(--paper); border:1px solid var(--rule); padding:4px 2px; font-size:12.5px; }
.ogrid button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
select{ width:100%; background:var(--paper); border:1px solid var(--rule); padding:4px; font-size:13px; }
.row2{ display:flex; gap:6px; }
.row2 > *{ flex:1; }
.btn{ background:var(--paper); border:1px solid var(--rule); padding:5px 10px; font-size:13px; }
.btn.main{ background:var(--ink); color:var(--paper); border-color:var(--ink); font-family:var(--display); font-size:16px; padding:6px 12px; }
.btn.pick[aria-pressed="true"]{ background:var(--alert); color:#fff; border-color:var(--alert); }
.mgmt{ display:flex; flex-wrap:wrap; gap:4px; padding:4px 14px 12px; }
.mgmt .btn{ font-size:12px; padding:3px 7px; }
.ostat{ font-size:12.5px; padding:2px 14px 6px; font-style:italic; color:var(--ink-2); }
#dispatches{ flex:1; display:flex; flex-direction:column; min-height:0; }
#dfilter{ display:flex; gap:0; padding:6px 14px; }
#dfilter button{ background:transparent; border:1px solid var(--rule); border-right:0; padding:2px 8px; font-size:12px; }
#dfilter button:last-child{ border-right:1px solid var(--rule); }
#dfilter button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }
#dlist{ overflow:auto; flex:1; padding:0 0 10px; }
.msg{ padding:7px 14px 8px; border-top:1px solid var(--paper-3); cursor:default; }
.msg[data-x]{ cursor:pointer; }
.msg .mh{ font-size:11.5px; color:var(--ink-2); display:flex; justify-content:space-between; gap:6px; }
.msg .mt{ font-size:14px; }
.msg.urgent .mt{ color:var(--alert); }
.msg.stale{ opacity:.62; }
.msg.k-order .mt{ font-style:italic; }
.msg.k-sound .mt{ font-family:var(--display); font-style:italic; }
#compass{ right:382px; bottom:calc(env(safe-area-inset-bottom,0px) + 16px); width:150px; padding:6px 6px 8px; text-align:center; }
#compass .cap{ font-size:11.5px; color:var(--ink-2); font-style:italic; min-height:30px; }
#legend{ left:332px; bottom:calc(env(safe-area-inset-bottom,0px) + 16px); padding:6px 10px; font-size:12px; max-width:250px; }
#legend .k{ display:flex; align-items:center; gap:6px; margin:2px 0; }
#legend i{ display:inline-block; width:28px; height:5px; background:repeating-linear-gradient(90deg,currentColor 0 7px,transparent 7px 9px); }
#tools{ display:flex; gap:4px; flex-wrap:wrap; padding:8px 12px 10px; border-top:1px solid var(--rule); }
#tools .btn{ font-size:12px; padding:3px 7px; }
#tabs{ display:none; }
#orderInner .info{ padding:2px 14px 6px; }
#orderInner .kv{ display:grid; grid-template-columns:96px 1fr; gap:8px; padding:4px 0; border-top:1px solid var(--paper-3); font-size:13.5px; }
#orderInner .kv > span:first-child{ color:var(--ink-2); font-style:italic; }
#orderInner .hint{ padding:6px 14px 12px; font-size:12.5px; font-style:italic; color:var(--ink-2); }
.ftab{ width:100%; border-collapse:collapse; font-size:12.5px; }
.ftab th{ text-align:left; font-weight:normal; font-style:italic; color:var(--ink-2); padding:3px 4px; border-bottom:1px solid var(--rule); }
.ftab td{ padding:3px 4px; border-bottom:1px solid var(--paper-3); }
.ack{ display:inline-block; min-width:1.2em; text-align:center; font-style:normal; }
.ack.ok{ color:#2e6b2e; } .ack.go{ color:var(--ink-2); } .ack.bad{ color:var(--alert); }
#ctxmenu .cf{ display:flex; gap:6px; padding:6px 12px; border-top:1px solid var(--paper-3); }
#ctxmenu .cf label{ display:flex; flex-direction:column; font-size:11px; color:var(--ink-2); flex:1; }
#ctxmenu .cf select{ font-size:12px; padding:2px; margin-top:2px; }
#modal.menu{ background-size:cover; background-position:center; }
#modal.menu .sheet{ max-width:620px; background:color-mix(in srgb, var(--paper) 92%, transparent); }
.mm{ text-align:center; }
.mm .gt{ font-size:56px; letter-spacing:.02em; }
.battles{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:6px 0 4px; }
.battle{ border:1px solid var(--rule); background:var(--paper); padding:12px; text-align:left; }
.battle b{ display:block; font-family:var(--display); font-weight:normal; font-size:22px; }
.battle span{ font-size:13px; color:var(--ink-2); }
.battle:hover:not(:disabled){ background:var(--paper-2); }
.battle.soon{ opacity:.55; cursor:default; }
.mm .go{ justify-content:space-between; }
.mm .ver{ font-size:12px; color:var(--ink-2); font-style:italic; }
#trainInfo{ font-size:12px; font-style:italic; color:var(--ink-2); padding:6px 14px; border-bottom:1px solid var(--paper-3); }
#ctxmenu{ z-index:16; min-width:190px; padding:4px 0; display:flex; flex-direction:column; }
#ctxmenu[hidden], #callout[hidden], #hqprompt[hidden]{ display:none; }
#ctxmenu .ct{ font-family:var(--display); font-size:15px; padding:4px 12px 0; }
#ctxmenu .cs{ font-size:12px; font-style:italic; color:var(--ink-2); padding:0 12px 4px; border-bottom:1px solid var(--rule); }
#ctxmenu button{ background:transparent; border:0; text-align:left; padding:7px 12px; font-size:14px; }
#ctxmenu button:hover, #ctxmenu button:focus-visible{ background:var(--paper-2); }
#ctxmenu .cx{ color:var(--ink-2); border-top:1px solid var(--paper-3); }
#callout{ position:fixed; z-index:6; max-width:300px; padding:8px 26px 8px 10px; font-size:13.5px; transform:translate(-50%,-110%); }
#callout .ch{ font-size:11.5px; color:var(--ink-2); margin-bottom:3px; }
#callout .cx{ position:absolute; right:4px; top:2px; background:transparent; border:0; font-size:18px; color:var(--ink-2); }
#hqprompt{ left:50%; transform:translateX(-50%); top:calc(env(safe-area-inset-top,0px) + 150px); z-index:14; max-width:min(520px, calc(100% - 24px)); padding:10px 14px; text-align:center; }
#hqprompt p{ margin:0 0 8px; }
#camctl button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }
#measureLbl{ font-style:normal; font-family:var(--text); font-size:13px; background:var(--paper); color:var(--ink); padding:3px 8px; border:1px solid var(--alert); text-shadow:none; transform:translate(-50%,-120%); white-space:normal; max-width:280px; text-align:center; z-index:4; position:fixed; }
#herald{ left:50%; top:50%; transform:translate(-50%,-50%); width:min(560px, calc(100% - 24px)); display:flex; gap:0; z-index:15; flex-wrap:wrap; }
#herald[hidden]{ display:none; }
#herald img{ width:200px; height:auto; aspect-ratio:36/26; object-fit:cover; flex:0 0 200px; border-right:1px solid var(--rule); background:var(--paper-2); }
#herald .hb{ flex:1; min-width:240px; padding:12px 14px; }
#herald .hh{ display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--ink-2); }
#herald #heraldFrom{ font-family:var(--display); font-size:16px; color:var(--ink); }
#herald p{ margin:8px 0 12px; font-size:15px; line-height:1.45; }
#herald .hbtn{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
#modal.aar{ background-size:cover; background-position:center; }
.saved{ display:flex; justify-content:space-between; align-items:center; gap:10px; border:1px dashed var(--rule); padding:8px 12px; margin-top:12px; font-size:14px; }
.choices{ grid-template-columns:repeat(4,1fr); }
.choices.sides{ grid-template-columns:1fr 1fr; }
#camctl{ left:332px; top:calc(env(safe-area-inset-top,0px) + 16px); display:grid; grid-template-columns:repeat(2,40px); gap:0; padding:0; }
#camctl button{ width:40px; height:38px; background:var(--paper); border:0; border-bottom:1px solid var(--paper-3); border-right:1px solid var(--paper-3); font-size:19px; line-height:1; color:var(--ink); touch-action:manipulation; }
#camctl button:active{ background:var(--paper-3); }
.lbl.seen{ font-style:normal; opacity:.9; }
.sheet .coffee{ text-align:center; margin-top:14px; font-size:13px; }
.sheet .coffee a{ color:var(--ink-2); }
#toast{ position:fixed; left:50%; top:calc(env(safe-area-inset-top,0px) + 130px); transform:translateX(-50%); background:var(--ink); color:var(--paper); padding:6px 14px; font-size:14px; opacity:0; transition:opacity .25s; pointer-events:none; max-width:80vw; text-align:center; }
#toast.on{ opacity:1; }

/* modal */
#modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(25,18,10,.55); z-index:20; padding:16px; }
#modal[hidden]{ display:none; }
.sheet{ background:var(--paper); color:var(--ink); max-width:780px; width:100%; max-height:100%; overflow:auto; border:1px solid var(--rule); box-shadow:0 0 0 4px var(--paper), 0 0 0 5px var(--rule), 0 20px 50px rgba(0,0,0,.5); padding:26px 32px 24px; }
.sheet .t1{ text-align:center; font-family:var(--display-sc); letter-spacing:.14em; font-size:13px; color:var(--ink-2); }
.sheet h1{ text-align:center; font-family:var(--display); font-weight:normal; font-size:40px; line-height:1.05; margin:4px 0 2px; }
.sheet .t2{ text-align:center; font-style:italic; color:var(--ink-2); margin-bottom:18px; }
.sheet h3{ font-family:var(--display); font-weight:normal; font-size:20px; margin:18px 0 6px; }
.sheet p{ max-width:68ch; margin:6px 0; line-height:1.5; }
.choices{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.choice{ border:1px solid var(--rule); background:var(--paper); padding:10px 12px; text-align:left; }
.choice b{ display:block; font-family:var(--display); font-weight:normal; font-size:18px; }
.choice span{ font-size:13px; color:var(--ink-2); }
.choice[aria-pressed="true"]{ outline:2px solid var(--ink); background:var(--paper-2); }
.sides{ grid-template-columns:1fr 1fr; }
.sides .choice b{ color:var(--union); } .sides .choice.c b{ color:var(--confed); }
.brief{ border-left:3px solid var(--rule); padding:4px 12px; margin:12px 0; font-size:14.5px; }
.go{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:16px; flex-wrap:wrap; }
details{ margin-top:12px; font-size:14px; }
details summary{ cursor:pointer; font-family:var(--display); font-size:17px; }
details li{ margin:3px 0; }
table.aar{ border-collapse:collapse; width:100%; font-size:14px; margin:6px 0; }
table.aar td,table.aar th{ border-bottom:1px solid var(--paper-3); padding:4px 6px; text-align:left; }
table.aar th{ font-weight:normal; font-style:italic; color:var(--ink-2); }
.verdict{ text-align:center; font-family:var(--display); font-size:30px; margin:8px 0; }
ul.ev{ padding-left:18px; font-size:14px; max-height:240px; overflow:auto; }

@media (max-width: 1100px){
  #legend{ display:none; }
  #compass{ right:382px; }
}
@media (max-width: 860px){
  #cartouche{ min-width:0; width:calc(100% - 24px); padding:6px 10px 8px; top:calc(env(safe-area-inset-top,0px) + 8px); }
  #cartouche h1{ font-size:19px; }
  #cartouche .t1,#cartouche .t2{ display:none; }
  #clock{ font-size:18px; min-width:96px; }
  #army,#right{ left:8px; right:8px; width:auto; top:auto; bottom:calc(env(safe-area-inset-bottom,0px) + 62px); height:52vh; display:none; }
  #army.open,#right.open{ display:flex; }
  #right.open.mode-orders #dispatches{ display:none; }
  #right.open.mode-orders #orderbox{ max-height:none; flex:1; border-bottom:0; }
  #right.open.mode-disp #orderbox{ display:none; }
  #compass{ right:8px; bottom:calc(env(safe-area-inset-bottom,0px) + 62px); width:104px; }
  #camctl{ left:8px; top:auto; bottom:calc(env(safe-area-inset-bottom,0px) + 62px); grid-template-columns:repeat(4,44px); }
  #camctl button{ width:44px; height:42px; }
  body.sheet-open #camctl{ display:none; }
  #compass .cap{ display:none; }
  #tabs{ display:flex; position:fixed; left:0; right:0; bottom:0; padding-bottom:env(safe-area-inset-bottom,0px); background:var(--paper); border-top:1px solid var(--rule); z-index:5; }
  #tabs button{ flex:1; background:transparent; border:0; border-right:1px solid var(--paper-3); padding:12px 4px; font-family:var(--display); font-size:16px; }
  #tabs button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }
  body.sheet-open #compass{ display:none; }
  .choices{ grid-template-columns:1fr 1fr; }
  .battles{ grid-template-columns:1fr; }
  .mm .gt{ font-size:40px; }
  #herald img{ flex-basis:100%; width:100%; border-right:0; border-bottom:1px solid var(--rule); max-height:150px; }
  .sheet{ padding:18px 16px; }
  .sheet h1{ font-size:30px; }
}
body.prestart .panel:not(#cartouche){ display:none !important; }
body.prestart #tabs{ display:none !important; }
@media (prefers-reduced-motion: reduce){ #toast{ transition:none; } }