/* Meridian v2 interface: printed mid-century atlas. Paper cards with a 1.5px
   ink rule and a hard 2px ink shadow, small-caps labels, Archivo for the
   interface and Newsreader for headings and verdicts. Everything is scoped
   under #ui so it cannot collide with the renderer's page. */

#ui.ui-root{
  --ink:#211f1a; --ink-2:#5a5345; --ink-3:#8a8170;
  --paper:#efe6d0; --paper-2:#e4d8bb; --card:#f7f1e3; --rule:#cbbd9c; --tint:#efe0c9;
  --sea:#9db7bd; --good:#3d7a58; --bad:#b2362a; --focus:#e8c35a; --me:#c3442b;
  --ui:'Archivo',system-ui,sans-serif; --serif:'Newsreader',Georgia,serif;
  position:fixed; inset:0; z-index:10; pointer-events:none;
  font-family:var(--ui); font-size:13px; color:var(--ink); line-height:1.3;
  -webkit-font-smoothing:antialiased;
}
#ui *{box-sizing:border-box}
#ui p,#ui h1,#ui h2,#ui h3,#ui ol,#ui ul{margin:0;padding:0}
#ui [hidden]{display:none!important}
#ui .ui-screen{position:absolute; inset:0; pointer-events:none}
#ui .n{font-variant-numeric:tabular-nums; font-stretch:78%; font-weight:700}
#ui .sc{font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-2); font-stretch:90%}
#ui .sc svg{width:12px; height:12px; vertical-align:-2px; margin-right:4px}

/* ---------- Paper cards ---------- */
#ui .panel{position:relative; pointer-events:auto; background:var(--card); border:1.5px solid var(--ink); border-radius:3px; box-shadow:0 2px 0 var(--ink)}
#ui .panel .hd{display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:8px 12px 7px; border-bottom:1px solid var(--rule)}
#ui .panel h2{font-family:var(--serif); font-weight:600; font-size:20px; line-height:1.05; display:flex; align-items:baseline; gap:6px; min-width:0}
#ui .panel h2 small{font-family:var(--ui); font-size:12px; font-weight:500; color:var(--ink-2); white-space:nowrap}
#ui .ui-pad{padding:6px 12px}
#ui .ui-muted{color:var(--ink-2); font-weight:500}
#ui .ui-warn{color:var(--bad); font-weight:700}
#ui .ui-why{color:var(--bad); font-weight:600; font-size:11.5px}
#ui .ui-row{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
#ui .sw{display:inline-block; width:14px; height:10px; border:1.2px solid var(--ink); flex:none}
#ui .ui-x{font:inherit; font-size:17px; line-height:1; font-weight:700; width:24px; height:24px; border:0; background:none; color:var(--ink-2); cursor:pointer; border-radius:2px}
#ui .ui-x:hover{color:var(--ink); background:var(--tint)}

/* ---------- Buttons ---------- */
#ui .b{font:inherit; font-weight:700; font-size:12.5px; padding:6px 10px; border:1.5px solid var(--ink); border-radius:2px; background:var(--card); color:var(--ink); box-shadow:0 2px 0 var(--ink); display:inline-flex; gap:6px; align-items:center; cursor:pointer; white-space:nowrap}
#ui .b:hover{background:var(--tint)}
#ui .b:active{transform:translateY(1px); box-shadow:0 1px 0 var(--ink)}
#ui .b kbd{font:inherit; font-size:10.5px; color:var(--ink-3); font-weight:700}
#ui .b.pri{background:var(--ink); color:var(--card)}
#ui .b.pri:hover{background:#3a362d}
#ui .b.pri kbd{color:#b9ad93}
#ui .b.on{background:var(--tint); outline:2px solid var(--focus); outline-offset:-3px}
#ui .b.bad{color:var(--bad)}
#ui .b.danger{background:var(--bad); color:#fff; border-color:var(--ink)}
#ui .b.danger:hover{background:#962b21}
#ui .b.sm{font-size:11.5px; padding:3px 7px; box-shadow:0 1.5px 0 var(--ink)}
#ui .b[disabled]{opacity:.45; box-shadow:none; cursor:not-allowed; transform:none}
#ui button:focus-visible,#ui input:focus-visible,#ui canvas:focus-visible{outline:2.5px solid var(--focus); outline-offset:2px}

/* Relation chips */
#ui .st{font-size:10px; font-weight:700; padding:1px 5px 2px; border:1.2px solid currentColor; border-radius:2px; font-stretch:88%; letter-spacing:.02em; white-space:nowrap}
#ui .st.war{color:var(--bad)} #ui .st.peace{color:var(--ink-3)} #ui .st.ally{color:var(--good)}
#ui .st.traitor{color:var(--card); background:var(--ink); border-color:var(--ink)}
#ui .st.me{color:var(--ink)} #ui .st.out{color:var(--ink-3); border-style:dashed}

/* Bars */
#ui .bar{height:4px; background:var(--rule); overflow:hidden}
#ui .bar i{display:block; height:100%; width:0; background:var(--ink)}

/* ---------- Home and lobby ---------- */
#ui .ui-home{position:absolute; inset:0; background:linear-gradient(90deg,var(--paper) 0,var(--paper) 44%,rgba(239,230,208,0) 74%); pointer-events:none}
#ui .ui-home-col{position:absolute; left:6.5vw; top:50%; transform:translateY(-50%); width:600px; max-width:calc(100vw - 32px); max-height:100vh; overflow:auto; padding:16px 4px; pointer-events:auto}
#ui .ui-mast{border-top:3px solid var(--ink); border-bottom:1px solid var(--ink); padding:6px 0 7px; display:flex; justify-content:space-between; gap:12px}
#ui .ui-logo{font-size:84px; font-weight:900; font-stretch:62%; line-height:.86; letter-spacing:-.01em; margin:14px 0 6px}
#ui .ui-logo-sm{font-size:56px}
#ui .ui-tag{font-family:var(--serif); font-style:italic; font-size:20px; color:var(--ink-2); margin-bottom:16px; max-width:540px}
#ui .ui-home-row{display:grid; grid-template-columns:1fr 1.25fr; gap:14px; margin-bottom:12px}
#ui .ui-field{display:flex; flex-direction:column; gap:5px}
#ui .ui-input{font:inherit; font-size:15px; font-weight:600; padding:8px 10px; border:1.5px solid var(--ink); border-radius:2px; background:var(--card); color:var(--ink); width:100%}
#ui .ui-input::placeholder{color:var(--ink-3); font-weight:500}
#ui .ui-home-msg{color:var(--bad); font-weight:700; font-size:12px; min-height:15px}
#ui .ui-seg{display:grid; grid-template-columns:1fr 1fr; gap:6px}
#ui .ui-seg-b{font:inherit; text-align:left; padding:6px 9px; border:1.5px solid var(--ink); border-radius:2px; background:var(--card); color:var(--ink); cursor:pointer}
#ui .ui-seg-b b{display:block; font-family:var(--serif); font-size:16px}
#ui .ui-seg-b span{font-size:11px; color:var(--ink-2); font-weight:500}
#ui .ui-seg-b[aria-pressed="true"],#ui .ui-doc[aria-pressed="true"]{background:var(--ink); color:var(--card)}
#ui .ui-seg-b[aria-pressed="true"] span{color:#cfc4ab}
#ui .ui-home-lbl{margin-bottom:6px}
#ui .ui-docs{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px}
#ui .ui-doc{font:inherit; text-align:left; border:1.5px solid var(--ink); border-radius:2px; background:var(--card); color:var(--ink); padding:9px 9px 8px; cursor:pointer; display:flex; flex-direction:column; gap:3px}
#ui .ui-doc:hover{background:var(--tint)}
#ui .ui-doc[aria-pressed="true"]:hover{background:#3a362d}
#ui .ui-dart{width:30px; height:30px}
#ui .ui-doc b{font-family:var(--serif); font-size:16px; line-height:1.05}
#ui .ui-doc-short{font-size:11px; color:var(--ink-2); font-weight:600; line-height:1.25}
#ui .ui-doc-pas{font-size:10.5px; line-height:1.25; font-weight:500; color:var(--ink-2); border-top:1px solid var(--rule); padding-top:4px; margin-top:2px}
#ui .ui-doc-pas em{font-style:normal; font-weight:700; color:inherit}
#ui .ui-doc-abs{list-style:none; font-size:11px; font-weight:600; display:flex; flex-direction:column; gap:1px}
#ui .ui-doc-abs i{font-style:normal; display:inline-block; width:18px; font-weight:800; font-size:10px; opacity:.7}
#ui .ui-doc[aria-pressed="true"] .ui-doc-short,#ui .ui-doc[aria-pressed="true"] .ui-doc-pas{color:#cfc4ab; border-color:#5a5345}
#ui .ui-play{font:inherit; width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 20px; background:var(--me); color:#fff; border:1.5px solid var(--ink); box-shadow:0 3px 0 var(--ink); border-radius:2px; cursor:pointer}
#ui .ui-play:hover{filter:brightness(1.06)}
#ui .ui-play:active{transform:translateY(1px); box-shadow:0 2px 0 var(--ink)}
#ui .ui-play b{font-size:28px; font-weight:900; font-stretch:70%; letter-spacing:.01em}
#ui .ui-play span{font-weight:600; font-size:13px; text-align:right}
#ui .ui-home-alt{display:flex; gap:8px; margin-top:10px}
#ui .ui-home-alt .b{flex:1; justify-content:center; padding:9px}
#ui .ui-home-busy{margin-top:10px; font-weight:700; color:var(--ink-2); min-height:17px}

#ui .ui-lobby{margin-top:14px; max-width:520px}
#ui .ui-lobby .hd h2{font-size:22px}
#ui .ui-lobby-clock{padding:12px 12px 8px; display:flex; align-items:baseline; justify-content:space-between; border-bottom:1px solid var(--rule)}
#ui .ui-lobby-count{font-size:40px; line-height:1}
#ui .ui-lobby-seats-hd{display:flex; justify-content:space-between; align-items:baseline; padding:9px 12px 3px}
#ui .ui-lobby-seats{list-style:none; padding:0 12px 8px}
#ui .ui-lobby-seats li{display:flex; gap:10px; align-items:baseline; padding:5px 0; border-bottom:1px dotted var(--rule)}
#ui .ui-lobby-seats li b{font-size:14px}
#ui .ui-lobby-seats li span{color:var(--ink-2); font-weight:500}
#ui .ui-lobby-seats li em{margin-left:auto; font-style:normal; font-size:11px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em}
#ui .ui-lobby-seats li.ui-lobby-bots{border-bottom:0; color:var(--ink-2)}
#ui .ui-lobby-invite{padding:0 12px}
#ui .ui-lobby-invite:not(:empty){padding:8px 12px; border-top:1px solid var(--rule); display:flex; flex-direction:column; gap:5px}
#ui .ui-lobby-link{display:flex; gap:6px}
#ui .ui-lobby-link .ui-input{font-size:12.5px; padding:6px 8px}
#ui .ui-lobby-acts{display:flex; gap:8px; align-items:center; padding:10px 12px; border-top:1px solid var(--rule)}
#ui .ui-lobby-acts .b:last-child{margin-left:auto}
#ui .ui-lobby-wait{color:var(--ink-2); font-weight:500}

/* ---------- Pre-match table (ui/lobby.js) ---------- */
#ui .ui-mesa-pins{position:absolute; inset:0; pointer-events:none; overflow:hidden}
#ui .ui-pin{position:absolute; left:0; top:0; width:0; height:0; pointer-events:auto; padding:0; border:0; background:none; font:inherit; color:var(--ink); cursor:pointer; will-change:transform}
#ui .ui-pin-dot{position:absolute; left:-8px; top:-8px; width:16px; height:16px; border-radius:50%; border:2px solid var(--ink); box-shadow:0 0 0 2px var(--card); flex:none}
#ui .ui-pin-lbl{position:absolute; left:0; top:0; display:flex; flex-direction:column; background:var(--card); border:1.3px solid var(--ink); border-radius:2px; padding:2px 6px 3px; box-shadow:0 1.5px 0 var(--ink); text-align:left; line-height:1.1}
#ui .ui-pin-lbl b{font-size:12px; white-space:nowrap}
#ui .ui-pin-lbl small{font-size:10.5px; font-weight:600; color:var(--ink-2); white-space:nowrap}
#ui .ui-pin.free .ui-pin-lbl{border-style:dashed; box-shadow:none; background:rgba(247,241,227,.9)}
#ui .ui-pin:hover .ui-pin-lbl{background:var(--tint)}
#ui .ui-pin.yours .ui-pin-lbl{background:var(--ink); color:var(--card); border-style:solid}
#ui .ui-pin.yours .ui-pin-lbl small{color:#cfc4ab}
#ui .ui-pin.yours .ui-pin-dot{box-shadow:0 0 0 2px var(--card), 0 0 0 5px var(--focus)}
#ui .ui-pin.ready:not(.yours) .ui-pin-lbl small{color:var(--good)}

#ui .ui-mesa{position:absolute; top:16px; right:16px; bottom:16px; width:408px; display:flex; flex-direction:column; overflow:auto; overscroll-behavior:contain}
#ui .ui-mesa .hd h2{font-size:22px}
#ui .ui-mesa-status{padding:8px 12px; font-weight:600; border-bottom:1px solid var(--rule); background:var(--tint)}
#ui .ui-mesa-step{padding:10px 12px 4px}
#ui .ui-mesa-mine{padding:0 12px}
#ui .ui-mesa-empty{color:var(--ink-2); font-weight:500; padding:6px 0 2px}
#ui .ui-mesa-nation{border-left:6px solid var(--ink); padding:2px 0 2px 10px; display:flex; flex-direction:column; gap:5px}
#ui .ui-mesa-nh b{display:block; font-family:var(--serif); font-size:21px; line-height:1.05}
#ui .ui-mesa-nh span{font-size:11.5px; color:var(--ink-2); font-weight:600}
#ui .ui-mesa-tags{display:flex; flex-wrap:wrap; gap:4px}
#ui .ui-mesa-tags .st{color:var(--ink)}
#ui .ui-mesa-nation p{font-weight:500; line-height:1.35}
#ui .ui-mesa-fit{font-weight:700!important}
#ui .ui-mesa-docs{padding:0 12px; display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
#ui .ui-mesa-doc{position:relative; font:inherit; border:1.5px solid var(--ink); border-radius:2px; background:var(--card); color:var(--ink); padding:6px 4px 5px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center}
#ui .ui-mesa-doc:hover{background:var(--tint)}
#ui .ui-mesa-doc[aria-pressed="true"]{background:var(--ink); color:var(--card)}
#ui .ui-mesa-doc[disabled]{cursor:not-allowed; opacity:.55}
#ui .ui-mesa-doc[aria-pressed="true"][disabled]{opacity:1}
#ui .ui-mesa-doc b{font-size:11px; line-height:1.1}
#ui .ui-mesa-doc-art{width:34px; height:24px; display:block}
#ui .ui-mesa-doc-art svg{width:100%; height:100%}
#ui .ui-mesa-doc-fit{position:absolute; top:-7px; right:-4px; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; background:var(--focus); color:var(--ink); border:1.2px solid var(--ink); border-radius:2px; padding:0 3px}
#ui .ui-mesa-doc-note{grid-column:1/-1; font-size:11.5px; color:var(--ink-2); font-weight:500; line-height:1.3}
#ui .ui-mesa-cta{padding:12px}
#ui .ui-mesa-ready{width:100%; justify-content:center; font-size:15px; padding:10px}
#ui .ui-mesa-hd{display:flex; justify-content:space-between; align-items:baseline; padding:8px 12px 3px; border-top:1px solid var(--rule)}
#ui .ui-mesa-list{list-style:none; padding:0 8px 8px}
#ui .ui-mesa-row{width:100%; font:inherit; color:var(--ink); background:none; border:0; border-bottom:1px dotted var(--rule); display:grid; grid-template-columns:auto auto 1fr auto; gap:8px; align-items:baseline; padding:6px 4px; text-align:left; cursor:pointer}
#ui .ui-mesa-row:hover{background:var(--tint)}
#ui .ui-mesa-row.yours{background:var(--tint); box-shadow:inset 3px 0 0 var(--ink)}
#ui .ui-mesa-row b{font-size:13px; white-space:nowrap}
#ui .ui-mesa-who{color:var(--ink-2); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#ui .ui-mesa-row.free .ui-mesa-who{color:var(--ink-3)}
#ui .ui-mesa-ok{font-size:11px; font-weight:800; color:var(--good); text-transform:uppercase; letter-spacing:.04em}
#ui .ui-mesa .ui-lobby-acts{margin-top:auto}
@media (max-width:700px){
  #ui .ui-mesa{top:auto; left:8px; right:8px; bottom:8px; width:auto; height:52vh}
  #ui .ui-pin-lbl small{display:none}
  #ui .ui-war-docs{gap:4px}
}
#ui .ui-lobby-note{padding:0 12px 10px; font-weight:600; color:var(--good); min-height:0}
#ui .ui-lobby-note:empty{display:none}

/* ---------- HUD: top-left resources + feed ---------- */
#ui .ui-tl{position:absolute; top:14px; left:14px; display:flex; flex-direction:column; gap:8px; align-items:flex-start; max-width:calc(50vw - 110px)}
#ui .ui-res-row{display:flex}
#ui .ui-res .r{padding:6px 12px 7px; border-left:1px solid var(--rule); min-width:86px}
#ui .ui-rv{display:flex; align-items:baseline; gap:5px; white-space:nowrap}
#ui .ui-res .v{font-size:21px; line-height:1.05}
#ui .ui-res .d{font-size:11.5px; font-weight:700; color:var(--good); font-stretch:85%}
#ui .ui-res .d.neg{color:var(--bad)}
#ui .ui-res .d:empty{display:none}
#ui .ui-res-flag{display:flex; align-items:center; gap:9px; padding:6px 12px 6px 8px; min-width:0}
#ui .ui-res-flag b{font-size:15px; display:block; line-height:1.1; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#ui .ui-res-flag span{font-size:11.5px; color:var(--ink-2); white-space:nowrap}
#ui .ui-flag{display:block; flex:none; width:30px; height:21px; background:var(--me); border:1.5px solid var(--ink); position:relative}
#ui .ui-flag:after{content:''; position:absolute; inset:0 16px 0 0; background:var(--card); opacity:.9; clip-path:polygon(0 0,100% 50%,0 100%)}
#ui .ui-res-auto{display:flex; align-items:center; gap:7px; border-top:1px solid var(--rule); padding:5px 12px}
#ui .ui-res-auto-n{font-weight:600; color:var(--ink-2); white-space:nowrap}
#ui .ui-res-auto-n b{color:var(--ink); font-size:14px}
#ui .ui-res-auto.partial .ui-res-auto-n b{color:var(--bad)}
#ui .ui-res-auto-n{margin-right:3px}
#ui .ui-res-hint{border-top:1px solid var(--rule); padding:5px 12px; font-weight:700; color:var(--bad); font-size:12px}

#ui .ui-feed{display:flex; flex-direction:column; gap:6px; width:300px; max-width:100%}
#ui .al{font:inherit; text-align:left; pointer-events:auto; display:block; width:100%; background:var(--card); color:var(--ink); border:1.5px solid var(--ink); border-left:5px solid var(--ink); border-radius:2px; padding:5px 10px 6px; font-weight:600; box-shadow:0 2px 0 var(--ink); transition:opacity .4s}
#ui button.al{cursor:pointer}
#ui button.al:hover{background:var(--tint)}
#ui .al small{display:block; font-weight:500; color:var(--ink-2); font-size:11px; margin-top:1px}
#ui .al.war,#ui .al.traitor,#ui .al.siege{border-left-color:var(--bad)}
#ui .al.capital{border-left-color:var(--bad); background:#f5e6d9}
#ui .al.victory{border-left-color:var(--focus)}
#ui .al.ok{border-left-color:var(--good)}
#ui .al.old{opacity:.45!important}

/* ---------- HUD: top-centre clock, threat, hints, war confirm ---------- */
#ui .ui-top-center{position:absolute; top:14px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; width:max-content; max-width:min(560px, 40vw)}
#ui .ui-clock{padding:5px 18px 6px; text-align:center}
#ui .ui-clock .t{font-size:24px; line-height:1}
#ui .ui-clock .sc{margin-top:2px}
#ui .ui-threat{padding:6px 14px; font-weight:800; font-size:13.5px; text-align:center; border-left-width:5px}
#ui .ui-threat.bad{border-left-color:var(--bad); color:var(--bad)}
#ui .ui-threat.good{border-left-color:var(--good); color:var(--good)}
#ui .ui-hint{display:flex; align-items:center; gap:10px; padding:5px 6px 5px 12px; font-weight:700; background:#fbf3d9; border-color:var(--ink)}
#ui .ui-war{padding:10px 12px; display:flex; flex-direction:column; gap:7px; max-width:400px; border-left:5px solid var(--bad)}
#ui .ui-war p{font-weight:600}
#ui .ui-war .ui-why:empty{display:none}

/* ---------- HUD: commanders table, offers, diplomacy ---------- */
#ui .ui-right{position:absolute; top:14px; right:14px; width:300px; display:flex; flex-direction:column; gap:8px; max-height:calc(100% - 196px); overflow-y:auto; overflow-x:hidden; padding:0 1px 4px 0; scrollbar-width:thin; pointer-events:none}
#ui .ui-right > *{flex:none}
#ui .ui-table .hd{padding:6px 12px 5px}
#ui .ui-cmds{display:flex; flex-direction:column}
#ui .cmd{font:inherit; color:inherit; text-align:left; background:none; border:0; border-bottom:1px solid var(--rule); width:100%; display:grid; grid-template-columns:14px minmax(0,1fr) 14px auto auto; gap:7px; align-items:center; padding:5px 12px; font-weight:600; cursor:pointer}
#ui .cmd:last-child{border-bottom:0}
#ui .cmd:hover{background:#f0e7d4}
#ui .cmd .nm{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#ui .cmd .dg{display:grid; place-items:center; color:var(--ink-2)}
#ui .ui-dg{width:12px; height:12px}
#ui .cmd .chips{display:flex; gap:3px}
#ui .cmd .pc{display:flex; gap:7px; justify-content:flex-end; font-size:13px; min-width:48px}
#ui .cap{display:inline-flex; align-items:center; gap:2px}
#ui .ui-star{width:11px; height:11px; color:var(--ink)}
#ui .cmd .cit{color:var(--ink-2); min-width:14px; text-align:right}
#ui .cmd.me{background:var(--tint)}
#ui .cmd.sel{outline:2px solid var(--focus); outline-offset:-2px}
#ui .cmd.dead{opacity:.45}
#ui .ui-table.world .cmd{padding:3px 12px; font-size:12.5px}
#ui .ui-table-foot{display:flex; gap:6px; align-items:center; justify-content:flex-end; padding:6px 10px; border-top:1px solid var(--rule); flex-wrap:wrap}
#ui .ui-table-foot .b:first-child{margin-right:auto}
#ui .ui-foot-q{font-weight:700; font-size:11.5px; color:var(--bad); flex-basis:100%}

#ui .ui-offers{display:flex; flex-direction:column; gap:8px}
#ui .ui-offers:empty{display:none}
#ui .ui-offer{padding:7px 10px 8px; border-left:5px solid var(--focus); background:#fbf6ea; display:flex; flex-direction:column; gap:5px}
#ui .ui-offer-hd{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
#ui .ui-offer-left{font-size:13px}
#ui .ui-offer-what{font-family:var(--serif); font-size:15.5px; line-height:1.2}
#ui .ui-offer-what b{font-weight:700}
#ui .ui-offer-terms{font-weight:500; font-size:12px}
#ui .ui-offer-terms b{font-weight:700}
#ui .ui-offer-bar{height:3px}
#ui .ui-offer-acts{display:grid; grid-template-columns:1fr 1fr; gap:6px}
#ui .ui-offer-acts .b{justify-content:center; padding:4px 8px}

#ui .ui-diplo .hd{align-items:center}
#ui .ui-diplo h2 .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#ui .ui-diplo h2 .sw{align-self:center}
#ui .ui-diplo-hd-r{display:flex; align-items:center; gap:6px}
#ui .ui-disp{padding:6px 12px 7px; border-bottom:1px solid var(--rule)}
#ui .ui-disp b{font-family:var(--serif); font-size:18px; font-weight:600}
#ui .ui-disp p{color:var(--ink-2); font-weight:500; margin-top:1px}
#ui .ui-acts{display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:9px 12px}
#ui .ui-acts .b{justify-content:center; padding:5px 6px; white-space:normal; text-align:center; line-height:1.15}
#ui .ui-acts .b[aria-expanded="true"]{background:var(--tint); outline:2px solid var(--focus); outline-offset:-3px}
#ui .ui-acts > p{grid-column:1 / -1}
#ui .ui-builder{margin:0 12px 10px; border:1.2px dashed var(--ink); padding:6px 8px; border-radius:2px; display:flex; flex-direction:column; gap:3px}
#ui .ui-builder-cols{display:grid; grid-template-columns:1fr 1fr; gap:10px}
#ui .ui-builder-cols > div{display:flex; flex-direction:column; gap:4px}
#ui .ui-step{display:grid; grid-template-columns:1fr auto 34px auto; gap:3px; align-items:center; font-weight:600; font-size:11.5px}
#ui .ui-step .n{text-align:center; font-size:14px}
#ui .ui-step .b{padding:0 5px; min-width:20px; line-height:16px; justify-content:center}
#ui .ui-builder-go{display:flex; gap:8px; align-items:center; margin-top:4px}
#ui .ui-confirm{margin:0 12px 10px; border:1.5px solid var(--bad); border-radius:2px; padding:8px 10px; display:flex; flex-direction:column; gap:6px; background:#fbeee6}
#ui .ui-confirm p{font-weight:600}
#ui .ui-result{padding:7px 12px 9px; border-top:1px solid var(--rule); font-weight:700; color:var(--good)}
#ui .ui-result.bad{color:var(--bad)}
#ui .ui-diplo > .ui-muted{padding:6px 12px 0; font-size:12px}

/* ---------- HUD: bottom-left cards ---------- */
#ui .ui-bl{position:absolute; left:14px; bottom:14px; display:flex; flex-direction:column; gap:8px; align-items:flex-start; max-height:calc(100% - 250px); pointer-events:none}
#ui .ui-city{width:500px; max-height:100%; overflow-y:auto; overflow-x:hidden; flex:0 1 auto; scrollbar-width:thin}
#ui .ui-hd-r{display:flex; align-items:center; gap:6px}
#ui .ui-integ{white-space:nowrap}
#ui .ui-integ-bar{height:5px; background:var(--paper-2)}
#ui .ui-integ-bar i{background:var(--good)}
#ui .ui-city.foreign .ui-integ-bar i{background:var(--ink-2)}
#ui .ui-city.siege .ui-integ-bar i{background:var(--bad)}
#ui .ui-city.siege .ui-integ{color:var(--bad)}
#ui .ui-stats{display:flex; border-bottom:1px solid var(--rule)}
#ui .ui-stats > div{flex:1; padding:6px 12px; border-right:1px solid var(--rule); min-width:0}
#ui .ui-stats > div:last-child{border-right:0; flex:1.4}
#ui .ui-stats .n{font-size:17px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#ui .ui-stats .ui-rally{font-size:14px; font-stretch:90%}
#ui .slots{display:grid; gap:7px; padding:9px 12px}
#ui .slot{font:inherit; color:inherit; text-align:left; border:1.2px solid var(--ink); border-radius:2px; background:var(--paper); padding:7px 8px; min-height:74px; position:relative; display:flex; flex-direction:column; gap:1px}
#ui .slot b{font-size:13px; line-height:1.15}
#ui .slot .lv{position:absolute; right:7px; top:6px; font-size:11px; font-weight:800}
#ui .slot p{font-size:11px; color:var(--ink-2); line-height:1.25; font-weight:500}
#ui .ui-slot-ic svg,#ui .ui-opt-ic svg{width:20px; height:20px; display:block}
#ui .ui-slot-foot{margin-top:auto; padding-top:4px; display:flex; flex-direction:column; gap:3px; font-size:11px; font-weight:600}
#ui .ui-slot-foot .b{justify-content:space-between}
#ui .ui-slot-bar{height:5px; margin-top:3px}
#ui .slot.building{border-style:dashed}
#ui .slot.building .ui-slot-bar{margin-top:auto}
#ui .slot.empty{border-style:dashed; background:transparent; align-items:center; justify-content:center; text-align:center; cursor:pointer; gap:2px}
#ui .slot.empty span{font-size:11px; color:var(--ink-2); font-weight:500}
#ui .slot.empty:hover{background:var(--tint)}
#ui .slot.empty[aria-expanded="true"]{outline:2px solid var(--focus); outline-offset:1px}
#ui .ui-menu{border-top:1px solid var(--rule); padding:4px 12px 8px; display:flex; flex-direction:column}
#ui .opt{font:inherit; color:inherit; background:none; border:0; border-bottom:1px dotted var(--rule); text-align:left; display:grid; grid-template-columns:22px 1fr auto; gap:9px; padding:6px 2px; align-items:center; cursor:pointer}
#ui .opt:last-child{border-bottom:0}
#ui .opt:hover:not([disabled]){background:var(--tint)}
#ui .opt b{font-size:13px}
#ui .opt .ui-opt-txt span{color:var(--ink-2); font-size:11.5px; font-weight:500}
#ui .opt.no{cursor:not-allowed}
#ui .opt.no b,#ui .opt.no .ui-opt-ic{opacity:.55}
#ui .opt .why{color:var(--bad)!important; font-weight:600!important}
#ui .opt .cost{display:flex; gap:10px; align-items:center; font-size:12px}
#ui .ui-cost{display:inline-flex; gap:7px; align-items:center}
#ui .ui-cost .n{display:inline-flex; align-items:center; gap:2px; font-size:12px}
#ui .ui-cost .n.short{color:var(--bad)}
#ui .ui-ric{width:11px; height:11px; flex:none}
#ui .ui-sec{display:flex; justify-content:space-between; align-items:baseline; padding:7px 12px 0; border-top:1px solid var(--rule)}
#ui .ui-sec-hint{font-size:11px; color:var(--ink-3); font-weight:600}
#ui .ui-recruit{display:flex; flex-wrap:wrap; gap:6px; padding:6px 12px 10px}
#ui .ui-rtile{font:inherit; color:inherit; width:108px; border:1.2px solid var(--ink); border-radius:2px; background:var(--paper); padding:0 0 5px; display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer; box-shadow:0 1.5px 0 var(--ink)}
#ui .ui-rtile:hover:not([disabled]){background:var(--tint)}
#ui .ui-rtile[disabled]{cursor:not-allowed; box-shadow:none}
#ui .ui-rtile[disabled] .ico{opacity:.5}
#ui .ui-rtile .ico,#ui .ui-qtile .ico,#ui .u .ico{align-self:stretch; height:28px; background:var(--me); display:grid; place-items:center; border-bottom:1.2px solid var(--ink); color:#fff}
#ui .ui-unit-ic{width:24px; height:19px}
#ui .ui-rtile b{font-size:11.5px; font-stretch:88%}
#ui .ui-rt-time{font-size:10.5px; font-weight:700; color:var(--ink-2)}
#ui .ui-rtile[disabled] .ui-rt-time{color:var(--bad)}
#ui .ui-queue{display:grid; grid-template-columns:auto 1fr; gap:6px 10px; align-items:center; padding:8px 12px 10px; border-top:1px solid var(--rule)}
#ui .ui-qtiles{display:flex; gap:5px; flex-wrap:wrap; align-items:center; min-height:34px}
#ui .ui-qtile{width:48px; border:1.2px solid var(--ink); border-radius:2px; background:var(--paper); position:relative; display:flex; flex-direction:column}
#ui .ui-qtile .ico{height:22px}
#ui .ui-qtile .ui-unit-ic{width:19px; height:15px}
#ui .ui-qtile .bar{height:4px; margin:3px 4px 4px}
#ui .ui-q-wait{font-size:9.5px; text-align:center; color:var(--ink-3); font-weight:700; padding:1px 0 2px}
#ui .ui-qtile .ui-x{position:absolute; top:-8px; right:-8px; width:17px; height:17px; font-size:13px; background:var(--card); border:1.2px solid var(--ink); border-radius:50%; display:grid; place-items:center; padding:0}
#ui .ui-q-acts{grid-column:1 / -1; display:flex; gap:6px; flex-wrap:wrap}
#ui .ui-relocate{margin:0 12px 10px; padding:8px 10px; border:1.5px solid var(--bad); border-radius:2px; background:#fbeee6; display:flex; gap:10px; align-items:center; justify-content:space-between}
#ui .ui-relocate p{font-weight:600}
#ui .ui-flags{display:flex; gap:10px; font-size:11.5px; font-weight:700; color:var(--ink-2); border-top:1px solid var(--rule)}
#ui .ui-flags .bad{color:var(--bad)}
#ui .ui-owner{display:flex; gap:8px; align-items:center; padding:8px 12px 2px; font-size:14px}
#ui .ui-attack{border-top:1px solid var(--rule); padding:8px 12px 10px; display:flex; flex-direction:column; gap:6px; align-items:flex-start}
#ui .ui-fc-line{font-weight:500}
#ui .ui-fc-line.good b{color:var(--good)} #ui .ui-fc-line.bad b{color:var(--bad)}

#ui .ui-sel{width:430px}
#ui .ui-sel .hd .sc{white-space:nowrap}
#ui .ui-sel-main{display:flex; gap:12px; padding:9px 12px; align-items:flex-start}
#ui .units{display:flex; gap:6px; flex-wrap:wrap; flex:none; max-width:210px}
#ui .u{width:62px; border:1.2px solid var(--ink); border-radius:2px; background:var(--paper)}
#ui .u.pick{cursor:pointer} #ui .u.pick:hover{background:var(--paper-2)} #ui .u.pick:focus-visible{outline:2px solid var(--focus, #e8c35a); outline-offset:1px}
#ui .u .ico{height:30px}
#ui .u .nm{font-size:10.5px; font-weight:700; text-align:center; padding:3px 2px 0; font-stretch:85%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#ui .u .ct{font-size:16px; text-align:center; line-height:1.1}
#ui .u .hp{height:3px; margin:3px 6px 5px}
#ui .ui-counters{display:flex; flex-direction:column; gap:3px; color:var(--ink-2); font-weight:500; line-height:1.35; font-size:12px; flex:1; min-width:0}
#ui .orders{display:flex; gap:6px; padding:0 12px 10px; flex-wrap:wrap; align-items:center}
#ui .ui-order-hint{color:var(--ink-3); font-weight:600; font-size:11.5px; margin-left:4px}
#ui .ui-mission{display:flex; flex-direction:column; gap:6px; padding:0 12px 10px}
#ui .ui-mission:empty{display:none}
#ui .ui-mission-bar{display:flex; gap:5px; flex-wrap:wrap; align-items:center; padding-top:8px; border-top:1px solid var(--rule)}
#ui .ui-mission-bar .sc{margin-right:3px}
#ui .ui-mission-part{display:flex; gap:8px; align-items:center; color:var(--ink-2); font-weight:600; font-size:12px}
#ui .ui-template{display:flex; gap:8px; align-items:center; justify-content:space-between; flex-wrap:wrap}
#ui .ui-template .ui-row{gap:5px}
#ui .ui-tpl{display:inline-flex; align-items:center; gap:1px; border:1.2px solid var(--ink); border-radius:2px; background:var(--paper); padding:0 2px 0 4px; height:26px}
#ui .ui-tpl .ico{width:22px; height:18px; display:inline-flex}
#ui .ui-tpl .ico svg{width:100%; height:100%}
#ui .ui-tpl .n{font-size:13px; margin:0 3px}
#ui .ui-tpl .ui-x{width:18px; height:20px; font-size:15px}
#ui .ui-sel .foot{display:flex; flex-direction:column; gap:1px; padding:6px 12px; border-top:1px solid var(--rule); color:var(--ink-2); font-weight:600; font-size:12px}
#ui .ui-sel.compact .ui-sel-main,#ui .ui-sel.compact .foot{display:none}
#ui .ui-sel.compact .hd{border-bottom:0; padding-bottom:4px}
#ui .ui-sel.compact .panel h2,#ui .ui-sel.compact h2{font-size:16px}

/* ---------- HUD: abilities dock ---------- */
#ui .ui-dock{position:absolute; bottom:14px; left:max(calc(50% - 250px), 528px); display:flex; align-items:stretch}
#ui .ui-mando{display:flex; flex-direction:column; justify-content:center; gap:1px; padding:6px 12px; border-right:1px solid var(--rule); min-width:96px}
#ui .ui-mando-v{font-size:22px; line-height:1}
#ui .ui-mando-next{font-size:11px; font-weight:600; color:var(--ink-2); white-space:nowrap}
#ui .ui-mando-bar{height:3px; margin-top:3px}
#ui .ui-abs{display:flex}
#ui .ui-ab{font:inherit; color:inherit; background:none; border:0; border-right:1px solid var(--rule); width:132px; padding:6px 10px 7px; text-align:left; display:flex; flex-direction:column; gap:2px; cursor:pointer}
#ui .ui-ab:last-child{border-right:0}
#ui .ui-ab-hd{display:flex; gap:6px; align-items:baseline; white-space:nowrap; overflow:hidden}
#ui .ui-ab-hd i{font-style:normal; font-size:10px; font-weight:800; color:var(--ink-3)}
#ui .ui-ab-hd b{font-family:var(--serif); font-size:15px; font-weight:600; overflow:hidden; text-overflow:ellipsis}
#ui .ui-ab-state{font-size:11px; font-weight:700; color:var(--ink-2); white-space:nowrap}
#ui .ui-ab-bar{height:3px; margin-top:auto}
#ui .ui-ab.locked{cursor:not-allowed}
#ui .ui-ab.locked .ui-ab-hd{opacity:.6}
#ui .ui-ab.locked .ui-ab-bar i{background:var(--ink-3)}
#ui .ui-ab.cooldown{cursor:not-allowed}
#ui .ui-ab.cooldown .ui-ab-bar i{background:var(--ink-2)}
#ui .ui-ab.passive{cursor:default}
#ui .ui-ab.passive .ui-ab-state{color:var(--good)}
#ui .ui-ab.passive .ui-ab-bar i,#ui .ui-ab.active .ui-ab-bar i{background:var(--good)}
#ui .ui-ab.active .ui-ab-state{color:var(--good)}
#ui .ui-ab.ready{background:var(--ink); color:var(--card)}
#ui .ui-ab.ready:hover{background:#3a362d}
#ui .ui-ab.ready .ui-ab-hd i,#ui .ui-ab.ready .ui-ab-state{color:#cfc4ab}
#ui .ui-ab.ready .ui-ab-bar{background:#5a5345}
#ui .ui-ab.ready .ui-ab-bar i{background:var(--focus)}
#ui .ui-ab[disabled]{opacity:1}
#ui .ui-ab.targeting{outline:2.5px solid var(--focus); outline-offset:-3px}

/* ---------- HUD: minimap, toasts, forecast ---------- */
#ui .ui-mini{position:absolute; right:14px; bottom:14px; overflow:hidden; line-height:0}
#ui .ui-mini canvas{display:block; cursor:crosshair; touch-action:none}
#ui .ui-toasts{position:absolute; left:50%; bottom:92px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none}
#ui .ui-toast{background:var(--card); border:1.5px solid var(--ink); border-radius:2px; box-shadow:0 2px 0 var(--ink); padding:6px 12px; font-weight:700; max-width:460px; text-align:center}
#ui .ui-toast.error{color:var(--bad); border-left:5px solid var(--bad)}
#ui .ui-fc{position:fixed; left:0; top:0; width:292px; pointer-events:none; z-index:5}
#ui .ui-fc-hd{display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:8px 12px 2px}
#ui .ui-fc-label{font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#ui .ui-fc-pct{font-size:20px}
#ui .ui-fc-sides{display:flex; justify-content:space-between; padding:0 12px 4px; font-weight:600; color:var(--ink-2); font-size:12px}
#ui .ui-fc-sides b{color:var(--ink)}
#ui .bar2{display:flex; height:9px; margin:0 12px; border:1.2px solid var(--ink)}
#ui .bar2 i{display:block; height:100%}
#ui .ui-fc .verdict{font-family:var(--serif); font-size:18px; font-weight:600; padding:7px 12px 2px}
#ui .ui-fc .verdict.good{color:var(--good)} #ui .ui-fc .verdict.bad{color:var(--bad)}
#ui .ui-fc ul{list-style:none; padding:3px 12px 8px}
#ui .ui-fc li{display:flex; gap:7px; padding:2px 0; font-weight:500}
#ui .ui-fc li b{font-size:10px; width:11px; flex:none; padding-top:2px}
#ui .ui-fc li.up b{color:var(--good)} #ui .ui-fc li.dn b{color:var(--bad)}
#ui .ui-fc .foot{border-top:1px solid var(--rule); padding:6px 12px; color:var(--ink-2); font-weight:600}
#ui .ui-fc .foot.bad{color:var(--bad)}

/* ---------- End overlay (the only dimmed layer) ---------- */
#ui .ui-end{position:fixed; inset:0; background:rgba(33,31,26,.42); display:grid; place-items:center; pointer-events:auto; z-index:20; padding:16px}
#ui .ui-end-card{width:min(880px, 100%); max-height:calc(100vh - 32px); overflow:auto}
#ui .ui-end-hd{padding:18px 22px 14px; border-bottom:1.5px solid var(--ink); border-top:6px solid var(--ink)}
#ui .ui-end-hd.won{border-top-color:var(--good)}
#ui .ui-end-hd.lost{border-top-color:var(--bad)}
#ui .ui-end-hd h1{font-size:64px; font-weight:900; font-stretch:62%; line-height:.9; letter-spacing:.005em}
#ui .ui-end-hd.won h1{color:var(--good)}
#ui .ui-end-hd.lost h1{color:var(--bad)}
#ui .ui-end-how{font-family:var(--serif); font-size:20px; font-style:italic; color:var(--ink-2); margin:6px 0 4px}
#ui .ui-end-table{padding:6px 14px}
#ui .ui-end table{border-collapse:collapse; width:100%}
#ui .ui-end th{font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2); text-align:left; padding:7px 6px 5px; border-bottom:1.5px solid var(--ink); white-space:nowrap}
#ui .ui-end th.n{text-align:right; font-stretch:90%}
#ui .ui-end td{padding:5px 6px; border-bottom:1px solid var(--rule); font-weight:600}
#ui .ui-end td.n{text-align:right; font-size:14px}
#ui .ui-end tr.me td{background:var(--tint)}
#ui .ui-end tr.dead td{color:var(--ink-3)}
#ui .ui-end-who{display:flex; align-items:center; gap:7px}
#ui .ui-end-who .dg{color:var(--ink-2); display:grid}
#ui .ui-end-who em{font-style:normal; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--good)}
#ui .ui-end-who em.out{color:var(--ink-3)}
#ui .ui-end-acts{display:flex; gap:8px; padding:12px 22px 16px; justify-content:flex-end}
#ui .ui-end-acts .b{padding:9px 16px; font-size:14px}

/* ---------- Smaller screens ---------- */
@media (max-height:820px){
  #ui .ui-feed .al:nth-last-child(n+3){display:none}
  #ui .ui-bl{max-height:calc(100% - 200px)}
  #ui .ui-logo{font-size:64px; margin-top:10px}
  #ui .ui-tag{font-size:17px; margin-bottom:10px}
  #ui .ui-play{padding:10px 18px}
}
@media (max-width:1360px){
  #ui .ui-res .r{min-width:0; padding:6px 9px 7px}
  #ui .ui-res .v{font-size:19px}
  #ui .ui-res-flag b{max-width:96px}
  #ui .ui-city{width:470px}
  #ui .ui-dock{left:max(calc(50% - 240px), 496px)}
  #ui .ui-ab{width:118px}
}
@media (max-width:900px){
  #ui .ui-home-col{left:16px; right:16px; width:auto}
  #ui .ui-docs{grid-template-columns:repeat(2,1fr)}
  #ui .ui-home-row{grid-template-columns:1fr}
  #ui .ui-tl{max-width:calc(100vw - 32px)}
  #ui .ui-res-flag,#ui .ui-feed .al:nth-child(-n+2){display:none}
  #ui .ui-top-center{left:auto; right:14px; transform:none; width:270px; max-width:270px; align-items:stretch}
  #ui .ui-right{top:124px; width:270px; max-height:calc(100% - 140px)}
  #ui .ui-game-screen:has(.ui-bl.has-city) .ui-right,#ui .ui-game-screen:has(.ui-bl.has-sel) .ui-right{max-height:max(120px, calc(40% - 132px))}
  #ui .ui-cmds .cmd:nth-child(n+6){display:none}
  #ui .ui-bl{left:0; right:0; bottom:0; align-items:stretch; max-height:60%}
  #ui .ui-city,#ui .ui-sel{width:auto; border-radius:0}
  #ui .ui-dock{left:8px; right:8px; bottom:8px; overflow-x:auto}
  #ui .ui-game-screen:has(.ui-bl.has-city) .ui-dock,#ui .ui-game-screen:has(.ui-bl.has-sel) .ui-dock,
  #ui .ui-game-screen:has(.ui-bl.has-city) .ui-mini,#ui .ui-game-screen:has(.ui-bl.has-sel) .ui-mini{display:none}
  #ui .ui-mini{bottom:84px}
}
@media (max-width:600px){
  #ui .ui-res{left:8px; right:8px; top:8px; display:flex}
  #ui .ui-res .r{flex:1; min-width:0; padding:4px 6px 5px}
  #ui .ui-res .v{font-size:15px}
  #ui .ui-res .sc{font-size:8.5px; letter-spacing:.04em}
  #ui .ui-res .d{font-size:10px}
  #ui .ui-res{flex-direction:column}
  #ui .ui-res-auto{padding:3px 6px; gap:6px}
  #ui .ui-res-auto .sc{font-size:8.5px}
  #ui .ui-top-center{top:66px; right:8px; left:auto; width:auto; max-width:34vw}
  #ui .ui-clock{padding:3px 10px 4px}
  #ui .ui-clock .sc{display:none}
  #ui .ui-clock .t{font-size:18px}
  #ui .ui-right{top:66px; left:8px; right:auto; width:min(210px, calc(64vw - 16px)); max-height:40%}
  #ui .ui-cmds .cmd:nth-child(n+4){display:none}
  #ui .ui-cmds .cmd{padding:3px 8px; font-size:12px}
  #ui .ui-feed{display:none}
  #ui .ui-mini{display:none}
}
@media (prefers-reduced-motion:reduce){
  #ui .al{transition:none}
}

/* Automatic production note (city card) */
#ui .ui-auto-note{grid-column:1/-1; font-size:11.5px; color:var(--ink-2); font-weight:500; margin-top:2px}
#ui .ui-auto-note b{color:var(--ink)}

/* ---------- General staff (Estado Mayor) ---------- */
#ui .ui-staff-slot{display:flex; align-items:center; padding:0 10px; border-left:1px solid var(--rule)}
#ui .ui-staff-btn .n{font-size:12px; min-width:0}
#ui .ui-staff{width:360px; max-width:100%}
#ui .ui-staff .hd{align-items:center}
#ui .ui-staff .hd h2{font-size:17px}
#ui .ui-staff .hd .sc{font-size:9.5px; text-transform:none; letter-spacing:.01em; color:var(--ink-3)}
#ui .ui-staff-body{display:flex; flex-direction:column; gap:6px; padding:8px 12px 10px; max-height:min(52vh, 460px); overflow:auto}
#ui .ui-staff-sec{display:flex; flex-direction:column; gap:6px; padding-bottom:6px}
#ui .ui-staff-line{display:flex; gap:6px; align-items:center; justify-content:space-between; flex-wrap:wrap; font-weight:600}
#ui .ui-staff-line > span{flex:1; min-width:120px}
#ui .ui-seg{display:inline-flex; gap:4px}
#ui .ui-armies{display:flex; flex-direction:column; gap:4px}
#ui .ui-army{font:inherit; display:grid; grid-template-columns:26px 1fr auto; gap:8px; align-items:center; text-align:left; width:100%;
  border:1.2px solid var(--ink); border-radius:2px; background:var(--paper); padding:4px 8px 4px 5px; cursor:pointer; color:var(--ink)}
#ui .ui-army:hover{background:var(--paper-2)}
#ui .ui-army.hot{border-left:5px solid var(--bad)}
#ui .ui-army-glyph{width:24px; height:24px; border-radius:50%; background:var(--card); border:1.5px solid var(--ink); display:inline-flex; align-items:center; justify-content:center}
#ui .ui-mis-ic{width:15px; height:15px}
#ui .ui-army-name{min-width:0}
#ui .ui-army-name b{display:block; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#ui .ui-army-name small{display:block; color:var(--ink-2); font-weight:500; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#ui .ui-army-size{font-size:14px}
@media (max-width:600px){
  #ui .ui-staff-slot{padding:0 4px}
  #ui .ui-staff-btn kbd{display:none}
  #ui .ui-staff{position:fixed; left:8px; right:8px; top:66px; width:auto}
}