/* Attrition interface — "the plate, the margin and the pencil"
   (docs/design/ui-proposal-2026-10). The map is the plate and is never boxed;
   the HUD is its printed margin (collars: flat paper behind a double neatline);
   your orders and selection are vermilion pencil; one context sheet at a time
   (the dossier) is the only thing with a hard ink shadow. One colour, one job:
   ink for text, paper for land and margin, pencil for your hand, signal for
   attention, moss for gain, oxblood for loss and war (always with a mark).
   Seven type sizes. Everything is scoped under #ui. */

@font-face{font-family:'Archivo';src:url('/assets/cefb32bf84408fd752dd/fonts/archivo.woff2') format('woff2');font-weight:400 900;font-stretch:62% 100%;font-display:swap}
@font-face{font-family:'Newsreader';src:url('/assets/cefb32bf84408fd752dd/fonts/newsreader.woff2') format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'Newsreader';src:url('/assets/cefb32bf84408fd752dd/fonts/newsreader-italic.woff2') format('woff2');font-weight:400 700;font-style:italic;font-display:swap}

#ui.ui-root{
  --ink:#211f1a; --ink-2:#5a5345; --ink-3:#736a59;
  --paper:#efe6d0; --paper-2:#e4d8bb; --sheet:#f7f1e3; --card:#f7f1e3; --rule:#cbbd9c; --tint:#e9dfc6;
  --sea:#9db7bd;
  --pencil:#c3442b; --signal:#a87a1f; --moss:#3d7a58; --oxblood:#8e2a1f;
  --good:var(--moss); --bad:var(--oxblood); --focus:var(--signal);
  --me:#35549a;
  --ui:'Archivo',system-ui,sans-serif; --serif:'Newsreader',Georgia,serif;
  /* type scale: 11 caption · 13 body · 15 strong · 20 figure · 24 title · 32 display · 64 hero */
  --t-cap:11px; --t-body:13px; --t-strong:15px; --t-fig:20px; --t-title:24px; --t-display:32px; --t-hero:64px;
  --collar-top:56px; --collar-bottom:60px; --neat:6px; --gut:16px;
  position:fixed; inset:0; z-index:10; pointer-events:none;
  font-family:var(--ui); font-size:var(--t-body); color:var(--ink); line-height:1.35;
  -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:75%; font-weight:750}
/* Captions: the only place uppercase tracking is allowed (collars, table heads, section labels). */
#ui .sc{font-size:var(--t-cap); font-weight:650; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); font-stretch:90%}
#ui .sc svg{width:11px; height:11px; vertical-align:-1px; margin-right:4px}
#ui kbd{font:700 10.5px var(--ui); font-stretch:85%; color:var(--ink-3); border:1px solid var(--rule); border-radius:2px; padding:0 3px; line-height:14px}

/* ---------- Materials ---------- */
/* A slip: paper on the map (offers, hints, menu, table, staff, forecast). 1 px ink, 2 px shadow. */
#ui .panel{position:relative; pointer-events:auto; background:var(--sheet); border:1px solid var(--ink); border-radius:0; box-shadow:2px 2px 0 var(--ink)}
#ui .panel .hd{display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:10px 14px 8px; border-bottom:1px solid var(--rule)}
#ui .panel h2{font-family:var(--serif); font-weight:550; font-size:var(--t-title); line-height:1.05; display:flex; align-items:baseline; gap:8px; min-width:0}
#ui .panel h2 small{font-family:var(--ui); font-size:var(--t-cap); font-weight:600; color:var(--ink-2); white-space:nowrap; letter-spacing:0}
#ui .ui-pad{padding:6px 14px}
#ui .ui-muted{color:var(--ink-2); font-weight:500}
#ui .ui-warn{color:var(--oxblood); font-weight:650}
#ui .ui-why{color:var(--oxblood); font-weight:600; font-size:12px}
#ui .ui-row{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
#ui .sw{display:inline-block; width:14px; height:10px; border:1px solid var(--ink); flex:none}
#ui .ui-x{font:inherit; font-size:18px; line-height:1; font-weight:600; width:24px; height:24px; border:0; background:none; color:var(--ink-3); cursor:pointer; border-radius:2px; flex:none}
#ui .ui-x:hover{color:var(--ink); background:var(--tint)}

/* ---------- Buttons: three kinds ---------- */
/* Command: ink outline, flat, key hint inside. */
#ui .b{font:inherit; font-weight:650; font-size:12.5px; line-height:1; padding:8px 11px; border:1px solid var(--ink); border-radius:2px; background:var(--sheet); color:var(--ink); display:inline-flex; gap:7px; align-items:center; cursor:pointer; white-space:nowrap; pointer-events:auto}
#ui .b:hover{background:var(--tint)}
#ui .b:active{background:var(--paper-2)}
#ui .b.sm{font-size:12px; padding:6px 9px}
/* Pressed state of a command (current mission, open panel): ink. */
#ui .b.on{background:var(--ink); color:var(--sheet)}
#ui .b.on kbd{color:#b9ad93; border-color:#5a5345}
/* Primary: the one pencil-coloured action of a view, and the only button with a shadow. */
#ui .b.pri{background:var(--pencil); border-color:var(--pencil); color:#fff; box-shadow:0 2px 0 var(--ink)}
#ui .b.pri:hover{background:#ad3b25}
#ui .b.pri:active{transform:translateY(1px); box-shadow:0 1px 0 var(--ink)}
#ui .b.pri kbd{color:#f7d9cf; border-color:#e48a76}
/* Hostile: a command in oxblood, never filled until confirmed. */
#ui .b.bad,#ui .b.hostile{color:var(--oxblood); border-color:var(--oxblood)}
#ui .b.danger{background:var(--oxblood); border-color:var(--oxblood); color:#fff}
#ui .b.danger:hover{background:#74221a}
#ui .b[disabled]{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none}
#ui button:focus-visible,#ui input:focus-visible,#ui canvas:focus-visible,#ui summary:focus-visible,#ui [tabindex]:focus-visible{outline:2px solid var(--signal); outline-offset:2px}
#ui .ui-seg{display:inline-flex; gap:0}
#ui .ui-seg>.b{border-radius:0; margin-left:-1px}
#ui .ui-seg>.b:first-child{border-radius:2px 0 0 2px; margin-left:0}
#ui .ui-seg>.b:last-child{border-radius:0 2px 2px 0}

/* Relation chips: words in a hairline frame. */
#ui .st{font-size:10px; font-weight:700; padding:1px 5px 2px; border:1px solid currentColor; border-radius:2px; font-stretch:88%; letter-spacing:.03em; white-space:nowrap}
#ui .st.war{color:var(--oxblood); background:repeating-linear-gradient(-45deg,rgba(142,42,31,.12) 0 2px,transparent 2px 4px)}
#ui .st.peace{color:var(--ink-3)} #ui .st.ally{color:var(--moss)}
#ui .st.traitor{color:var(--sheet); background:var(--ink); border-color:var(--ink)}
#ui .st.me{color:var(--ink)} #ui .st.out{color:var(--ink-3); border-style:dashed}

/* Tracks: printed meters with ticks, never smooth glowing bars. */
#ui .bar{position:relative; height:5px; background:var(--rule); overflow:hidden; --gap:var(--sheet)}
#ui .bar i{display:block; height:100%; width:0; background:var(--ink)}
#ui .bar::after{content:''; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 7px,var(--gap) 7px 9px); pointer-events:none}
#ui .bar2{display:flex; height:9px; border:1px solid var(--ink); margin:0 14px}
#ui .bar2 i{display:block; height:100%; background:var(--pencil)}
#ui .bar2 i+i{background:var(--rule)}

/* ---------- Home: the cover of the atlas ---------- */
#ui .ui-home{position:absolute; inset:0; overflow:hidden; pointer-events:none}
#ui .ui-home-sheet{position:absolute; left:0; top:0; bottom:0; width:min(560px,100%); overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; background:var(--paper); box-shadow:1px 0 0 var(--ink),4px 0 0 var(--paper),6px 0 0 var(--ink); pointer-events:auto; scrollbar-width:thin}
#ui .ui-home-col{position:relative; width:calc(100% - 96px); max-width:464px; margin:0 auto; padding:28px 0 24px; pointer-events:auto}
#ui .ui-mast{display:flex; justify-content:space-between; align-items:center; gap:12px; border-bottom:3px solid var(--ink); padding:0 0 8px; flex-wrap:wrap}
#ui .ui-mast>span{white-space:nowrap}
#ui .ui-mast>span:first-child{flex:1}
#ui .ui-version{font-variant-numeric:tabular-nums; opacity:.7}
#ui .ui-home-hero{padding:22px 0 0}
#ui .ui-logo{margin:0}
#ui .ui-logo img{display:block; width:100%; max-width:420px; height:auto; margin-left:-3px}
#ui .ui-tag{font-family:var(--serif); font-style:italic; font-size:20px; line-height:1.35; color:var(--ink-2); margin:12px 0 18px; max-width:420px}
#ui .ui-home-profile{display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:end; padding:12px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
#ui .ui-field{display:flex; flex-direction:column; gap:4px}
#ui .ui-input{font:inherit; font-size:var(--t-strong); font-weight:650; padding:7px 10px; border:1px solid var(--ink); border-radius:2px; background:var(--sheet); color:var(--ink); width:100%}
#ui .ui-input::placeholder{color:var(--ink-3); font-weight:500}
#ui .ui-home-profile .ui-input{background:transparent; border:0; border-bottom:1.5px solid var(--ink); border-radius:0; padding:4px 0 5px; font-size:18px}
#ui .ui-home-msg{color:var(--oxblood); font-weight:650; font-size:12px; min-height:15px}
#ui .ui-home-msg:empty,#ui .ui-home-busy:empty{display:none}
#ui .ui-profile-emblem{display:flex; align-items:center; gap:10px; padding:0; font:inherit; color:var(--ink); background:none; border:0; cursor:pointer; text-align:left}
#ui .ui-profile-emblem .sc{display:none}
#ui .ui-profile-emblem b{display:none}
#ui .ui-profile-emblem>.ui-emblem{width:40px; height:40px}
#ui .ui-emblem-change{font-size:11px; font-weight:650; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--rule); color:var(--ink-2)}
#ui .ui-home-matches{padding-top:22px}
#ui .ui-public{margin:0}
#ui .ui-public-heading{font:var(--t-cap)/1.2 var(--ui); font-weight:650; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); margin-bottom:8px}
#ui .ui-public-heading:focus{outline:none}
/* The next departure: the cover's one decision. */
#ui .ui-next .ui-public-card{display:grid; grid-template-columns:120px minmax(0,1fr) auto; grid-template-areas:"atlas name when" "atlas who who" "go go go"; gap:6px 14px; align-items:center}
#ui .ui-public-atlas{grid-area:atlas; position:relative; display:block; background:var(--sea); border:1px solid var(--ink); aspect-ratio:2/1; overflow:hidden}
#ui .ui-public-map{display:block; width:100%; height:100%; object-fit:cover; pointer-events:none}
#ui .ui-public-caption{grid-area:name; display:flex; flex-direction:column; gap:2px; min-width:0}
#ui .ui-public-caption b{font:550 32px/1 var(--serif)}
#ui .ui-public-state{font-size:var(--t-cap); font-weight:650; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2)}
#ui .ui-public-card.selected .ui-public-state{color:var(--moss)}
#ui .ui-public-when{grid-area:when; display:flex; flex-direction:column; align-items:flex-end; gap:2px}
#ui .ui-public-count{font-size:28px; line-height:1}
#ui .ui-public-time{font-size:var(--t-cap); color:var(--ink-2); font-weight:600}
#ui .ui-public-who{grid-area:who; display:flex; justify-content:space-between; align-items:center; gap:10px}
#ui .ui-public-seats{display:flex; flex-wrap:wrap; gap:3px; align-items:center}
#ui .ui-seat-fig svg{display:block; width:11px; height:16px; fill:none; stroke:var(--ink); stroke-width:1.3}
#ui .ui-seat-fig.taken svg{fill:var(--ink)}
#ui .ui-seat-wait{font-size:11px; font-weight:650; color:var(--ink-2); margin-left:4px}
#ui .ui-public-tally{font-size:12px; color:var(--ink-2)}
#ui .ui-next .ui-public-tally{display:none}
#ui .ui-public-go{grid-area:go}
#ui .ui-play{font:inherit; width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 18px; margin-top:8px; background:var(--pencil); color:#fff; border:0; box-shadow:0 2px 0 var(--ink); border-radius:2px; cursor:pointer}
#ui .ui-play:hover{background:#ad3b25}
#ui .ui-play:active{transform:translateY(1px); box-shadow:0 1px 0 var(--ink)}
#ui .ui-play b{font-size:20px; font-weight:800; font-stretch:75%; letter-spacing:.01em}
#ui .ui-play span{font-size:20px}
#ui .ui-play[aria-pressed="true"]{background:var(--ink)}
#ui .ui-play[disabled]{opacity:.5; cursor:default}
/* Later departures: a timetable. */
#ui .ui-later-hd{margin-top:22px; padding-bottom:6px; border-bottom:1.5px solid var(--ink)}
#ui .ui-later-hd:has(+ .ui-public-cards:empty){display:none}
#ui .ui-public-cards{display:flex; flex-direction:column}
#ui .ui-public-cards .ui-public-card{display:grid; grid-template-columns:minmax(0,1fr) auto 62px auto; grid-template-areas:"name who when go"; gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid var(--rule)}
#ui .ui-public-cards .ui-public-atlas{display:none}
#ui .ui-public-cards .ui-public-caption b{font-size:18px}
#ui .ui-public-cards .ui-public-state{display:none}
#ui .ui-public-cards .ui-public-seats{display:none}
#ui .ui-public-cards .ui-public-time{display:none}
#ui .ui-public-cards .ui-public-count{font-size:16px}
#ui .ui-public-cards .ui-public-card.selected{background:var(--tint); box-shadow:inset 3px 0 0 var(--moss); padding-left:10px}
#ui .ui-public-note{font-size:12px; color:var(--ink-2); padding-top:10px}
#ui .ui-home-play{margin-top:4px}
#ui .ui-home-alt{display:flex; flex-wrap:wrap; gap:4px 18px; margin-top:16px}
#ui .ui-home-alt .b{border-color:transparent; background:none; padding:6px 0; text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--rule); font-size:var(--t-body)}
#ui .ui-home-alt .b:hover{text-decoration-color:var(--ink)}
#ui .ui-home-busy{margin-top:10px; font-weight:650; color:var(--ink-2); min-height:17px}
#ui .ui-home-scenarios,#ui .ui-home-rules{margin-top:16px; border-top:1px solid var(--rule); padding-top:10px; font-size:12.5px; color:var(--ink-2); line-height:1.5}
#ui .ui-home-scenarios summary,#ui .ui-home-rules summary{cursor:pointer; color:var(--ink); font-weight:650}
#ui .ui-home-rules p{margin-top:8px}
#ui .ui-home .ui-seg{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:8px}
#ui .ui-seg-b{font:inherit; text-align:left; padding:7px 10px; border:1px solid var(--ink); border-radius:2px; background:var(--sheet); color:var(--ink); cursor:pointer; min-width:0}
#ui .ui-seg-b b{display:block; font-family:var(--serif); font-size:16px; font-weight:550}
#ui .ui-seg-b span{font-size:11px; color:var(--ink-2); font-weight:500}
#ui .ui-seg-b[aria-pressed="true"]{background:var(--ink); color:var(--sheet)}
#ui .ui-seg-b[aria-pressed="true"] span{color:#cfc4ab}
#ui .ui-language{display:flex; gap:0}
#ui .ui-language .b{border-color:transparent; background:none; padding:3px 5px; font-size:11px; color:var(--ink-2); text-decoration:none}
#ui .ui-language .b[aria-current]{color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px}
#ui .ui-site-links{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:22px; font-size:var(--t-body); font-weight:650}
#ui .ui-site-links a{color:var(--ink); text-underline-offset:4px; text-decoration-color:var(--rule)}
#ui .ui-site-links a:hover{text-decoration-color:var(--ink)}
#ui .ui-public.loading .ui-next{min-height:140px}
#ui .ui-public.loading .ui-public-cards{min-height:90px}
#ui .ui-public.loading .ui-later-hd{display:block}
/* The cartouche on the live plate. */
#ui .ui-cartouche{position:absolute; right:28px; bottom:28px; background:var(--paper); border:1px solid var(--ink); box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--ink); padding:10px 14px; min-width:240px; display:flex; flex-direction:column; gap:2px}
#ui .ui-cartouche b{font:550 20px/1.1 var(--serif)}
#ui .ui-cartouche>span:last-child{font-size:12px; color:var(--ink-2)}
#ui .ui-legal-links{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 24px; margin-top:28px; padding-top:12px; border-top:1px solid var(--rule); font-size:12px; line-height:1.5; color:var(--ink-2); pointer-events:auto}
#ui .ui-legal-links nav{display:flex; flex-wrap:wrap; gap:8px 18px}
#ui .ui-legal-links a{color:inherit; text-decoration:none}
#ui .ui-legal-links a:hover{text-decoration:underline; text-underline-offset:3px}

/* Emblem picker. */
#ui .ui-emblem{display:inline-block; flex:none; vertical-align:middle}
#ui .ui-brand-symbol{display:inline-block; flex:none; vertical-align:middle; align-self:center; object-fit:contain}
#ui .ui-emblem-dialog{pointer-events:auto; width:min(740px,calc(100vw - 24px)); max-height:calc(100dvh - 32px); overflow:hidden; margin:auto; padding:22px; border:1.5px solid var(--ink); background:var(--paper); color:var(--ink); box-shadow:3px 3px 0 var(--ink)}
#ui .ui-emblem-dialog[open]{display:flex; flex-direction:column; gap:10px}
#ui .ui-emblem-dialog::backdrop{background:rgba(33,31,26,.42)}
#ui .ui-emblem-heading{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px}
#ui .ui-emblem-heading h2{font:550 var(--t-display) var(--serif)}
#ui .ui-emblem-tabs{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
#ui .ui-emblem-tabs [aria-pressed="true"]{background:var(--ink); color:var(--sheet)}
#ui .ui-emblem-results{overflow-y:auto; min-height:0; overscroll-behavior:contain; scrollbar-color:var(--ink-3) var(--paper); padding:0 5px 3px 0}
#ui .ui-emblem-note{font-size:11px; border-top:1px solid var(--rule); padding-top:8px}
#ui .ui-emblem-flag{object-fit:contain; filter:saturate(.8) sepia(.12)}
#ui .ui-emblem-family{margin-top:18px}
#ui .ui-emblem-family:first-child{margin-top:0}
#ui .ui-emblem-options{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:6px}
#ui .ui-emblem-choice{display:flex; flex-direction:column; align-items:center; gap:8px; padding:10px 5px; min-width:0; font:600 13px var(--ui); color:var(--ink); background:var(--sheet); border:1px solid var(--rule); cursor:pointer}
#ui .ui-emblem-choice:hover{border-color:var(--ink); background:var(--tint)}
#ui .ui-emblem-choice[aria-pressed="true"]{background:var(--ink); color:var(--sheet); border-color:var(--ink)}
#ui .ui-emblem-choice small{font-weight:400; color:var(--ink-2); font-size:10.5px; line-height:1.3}
#ui .ui-emblem-choice[aria-pressed="true"] small{color:var(--paper-2)}
#ui .ui-emblem-choice .ui-emblem{background:var(--paper); padding:3px}
#ui .ui-commander-mark{display:inline-flex; flex-direction:column; align-items:center; gap:3px; flex:none}
#ui .ui-commander-mark .sw{height:4px; width:22px; border-width:1px}

/* ---------- Command table (pre-match) ---------- */
#ui .ui-mesa-pins{position:absolute; inset:0; pointer-events:none; overflow:hidden}
#ui .ui-mesa-doc-short{display:none}   /* shown by the phone layout (ui/phone/phone.css) */
#ui .ui-pin{position:absolute; left:0; top:0; width:32px; height:32px; margin:-16px; pointer-events:auto; padding:0; border:0; background:none; font:inherit; color:var(--ink); cursor:pointer; will-change:transform}
#ui .ui-pin:hover{z-index:1}
#ui .ui-pin-dot{position:absolute; left:10px; top:10px; width:12px; height:12px; border:1.5px solid var(--ink); box-shadow:0 0 0 2px var(--paper)}
#ui .ui-pin.free .ui-pin-dot{background:var(--paper)!important}
#ui .ui-pin:hover .ui-pin-dot{transform:scale(1.25)}
#ui .ui-pin-lbl{position:absolute; left:16px; top:16px; display:flex; flex-direction:column; text-align:left; line-height:1.1; text-shadow:0 0 2px var(--paper),0 0 2px var(--paper),0 0 3px var(--paper)}
#ui .ui-pin-lbl b{font-size:12px; font-weight:700; 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:not(:hover) .ui-pin-lbl{visibility:hidden; pointer-events:none}
/* Your pick: a pencil star in printer's corner marks. */
#ui .ui-pin.yours .ui-pin-dot{border-radius:50%; width:18px; height:18px; left:7px; top:7px; background:var(--sheet)!important; border:2px solid var(--pencil); box-shadow:0 0 0 2px var(--paper)}
#ui .ui-pin.yours .ui-pin-dot::after{content:'★'; position:absolute; inset:0; display:grid; place-items:center; font-size:11px; line-height:1; color:var(--pencil)}
#ui .ui-pin.yours::before{content:''; position:absolute; inset:0; background:
  linear-gradient(var(--pencil),var(--pencil)) 0 0/8px 2px no-repeat, linear-gradient(var(--pencil),var(--pencil)) 0 0/2px 8px no-repeat,
  linear-gradient(var(--pencil),var(--pencil)) 100% 0/8px 2px no-repeat, linear-gradient(var(--pencil),var(--pencil)) 100% 0/2px 8px no-repeat,
  linear-gradient(var(--pencil),var(--pencil)) 0 100%/8px 2px no-repeat, linear-gradient(var(--pencil),var(--pencil)) 0 100%/2px 8px no-repeat,
  linear-gradient(var(--pencil),var(--pencil)) 100% 100%/8px 2px no-repeat, linear-gradient(var(--pencil),var(--pencil)) 100% 100%/2px 8px no-repeat}
#ui .ui-pin.yours .ui-pin-lbl b{color:var(--pencil); text-transform:uppercase; letter-spacing:.04em}
#ui .ui-pin.ready:not(.yours) .ui-pin-lbl small{color:var(--moss)}

#ui .ui-mesa{position:absolute; top:var(--gut); right:var(--gut); bottom:var(--gut); width:420px; display:flex; flex-direction:column; overflow:auto; overscroll-behavior:contain; border-width:1.5px; box-shadow:3px 3px 0 var(--ink); scrollbar-width:thin}
#ui .ui-mesa .hd h2{font-size:var(--t-title); gap:10px}
#ui .ui-mesa-status{padding:9px 14px; font-weight:600; border-bottom:1px solid var(--rule); background:var(--tint)}
#ui .ui-mesa-step{padding:12px 14px 6px}
#ui .ui-mesa-mine{padding:0 14px}
#ui .ui-mesa-empty{color:var(--ink-2); font-weight:500}
#ui .ui-mesa-nation{padding:2px 0; display:flex; flex-direction:column; gap:5px}
#ui .ui-mesa-nh b{display:block; font:550 22px/1.05 var(--serif); color:var(--pencil)}
#ui .ui-mesa-nh span{font-size:11.5px; color:var(--ink-2); font-weight:600}
#ui .ui-mesa-docs{margin:0 14px; display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--ink)}
#ui .ui-mesa-doc{position:relative; font:inherit; border:0; border-left:1px solid var(--ink); background:var(--sheet); color:var(--ink); padding:10px 6px 9px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center}
#ui .ui-mesa-doc:first-child{border-left:0}
#ui .ui-mesa-doc:hover{background:var(--tint)}
#ui .ui-mesa-doc[aria-pressed="true"]{background:var(--ink); color:var(--sheet)}
#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:550 13px/1.1 var(--serif)}
#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-note{grid-column:1/-1; font-size:12px; color:var(--ink-2); font-weight:500; line-height:1.35; padding:8px 10px; border-top:1px solid var(--ink); background:var(--sheet)}
#ui .ui-mesa-cta{padding:14px}
#ui .ui-mesa-ready{width:100%; justify-content:center; font-size:var(--t-strong); padding:12px}
#ui .ui-mesa-hd{display:flex; justify-content:space-between; align-items:baseline; padding:10px 14px 6px; border-top:1px solid var(--rule)}
#ui .ui-mesa-list{list-style:none; padding:0 14px 8px; counter-reset:seat; border-top:1.5px solid var(--ink); margin:0 14px; padding:0}
#ui .ui-mesa-list>li{counter-increment:seat}
#ui .ui-mesa-row{width:100%; font:inherit; color:var(--ink); background:none; border:0; border-bottom:1px solid var(--rule); display:grid; grid-template-columns:18px auto 1fr auto; gap:8px; align-items:center; padding:7px 0; text-align:left}
#ui .ui-mesa-row::before,#ui .ui-mesa-bot::before{content:counter(seat); font:750 12px var(--ui); font-stretch:75%; color:var(--ink-3)}
#ui .ui-mesa-row.yours{background:var(--tint); box-shadow:-14px 0 0 var(--tint),14px 0 0 var(--tint)}
#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-ok{font-size:11px; font-weight:750; color:var(--moss); text-transform:uppercase; letter-spacing:.04em}
#ui .ui-mesa-bot{list-style:none; display:grid; grid-template-columns:18px auto minmax(70px,1fr) auto auto; gap:6px; align-items:center; padding:6px 0; border-bottom:1px solid var(--rule)}
#ui .ui-mesa-bot-name{min-width:0; display:flex; align-items:baseline; gap:6px}
#ui .ui-mesa-bot-name b{font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#ui .ui-mesa-bot-name span{font-size:10px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em}
#ui .ui-mesa-bot-select .b{padding:4px 4px; font-size:10px; font-stretch:85%}
#ui .ui-mesa-bot-level{font-size:11.5px; font-weight:600; color:var(--ink-2)}
#ui .ui-mesa-bot-remove[disabled]{opacity:.35; cursor:not-allowed}
#ui .ui-mesa-bots-empty{list-style:none; padding:7px 0; color:var(--ink-2); font-size:12px}
#ui .ui-mesa-bot-add{list-style:none; display:flex; justify-content:center; padding:8px 0}
#ui .ui-mesa .ui-lobby-acts{margin-top:auto}
#ui .ui-selection-progress{display:block; width:100%; height:5px; border:0; border-radius:0; accent-color:var(--pencil); background:var(--rule)}
#ui .ui-selection-progress::-webkit-progress-bar{background:var(--rule)}
#ui .ui-selection-progress::-webkit-progress-value{background:var(--pencil)}
#ui .ui-selection-progress::-moz-progress-bar{background:var(--pencil)}
#ui .ui-lobby-invite{padding:0 14px}
#ui .ui-lobby-invite:not(:empty){padding:10px 14px; border-top:1px solid var(--rule); display:flex; flex-direction:column; gap:6px}
#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:12px 14px; border-top:1px solid var(--rule)}
#ui .ui-lobby-acts .b:last-child{margin-left:auto}
#ui .ui-lobby-note{padding:0 14px 10px; font-weight:600; color:var(--moss)}
#ui .ui-lobby-note:empty{display:none}

/* ---------- HUD: the collars ---------- */
#ui .ui-collar{position:absolute; left:0; right:0; z-index:3; display:flex; align-items:stretch; background:var(--paper); pointer-events:auto; --gap:var(--paper)}
/* Double neatline: thin ink, paper gap, thick ink — as on a topographic sheet. */
#ui .ui-collar.top{top:0; height:var(--collar-top); box-shadow:0 1px 0 var(--ink),0 4px 0 var(--paper),0 6px 0 var(--ink)}
#ui .ui-collar.bottom{bottom:0; height:var(--collar-bottom); box-shadow:0 -1px 0 var(--ink),0 -4px 0 var(--paper),0 -6px 0 var(--ink)}
#ui .ui-cz{display:flex; align-items:center; gap:14px; padding:0 16px; border-right:1px solid var(--rule); min-width:0}
#ui .ui-cz:last-child{border-right:0}
#ui .ui-who{gap:10px; flex:none}
#ui .ui-who b{display:block; font:650 var(--t-strong)/1.1 var(--ui); max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#ui .ui-who span{display:block; font-size:11.5px; color:var(--ink-2); white-space:nowrap; max-width:170px; overflow:hidden; text-overflow:ellipsis}
#ui .ui-ledger{gap:20px; flex:none}
#ui .ui-ledger .r{display:flex; flex-direction:column; gap:3px; min-width:0}
#ui .ui-ledger .sc{white-space:nowrap}
#ui .ui-rv{display:flex; align-items:baseline; gap:4px; white-space:nowrap}
#ui .ui-ledger .v{font-size:var(--t-fig); line-height:1}
#ui .ui-ledger .v.neg{color:var(--oxblood)}
#ui .ui-ledger .d{font-size:11px; font-weight:650; color:var(--moss); font-stretch:85%; font-variant-numeric:tabular-nums}
#ui .ui-ledger .d.neg{color:var(--oxblood)}
#ui .ui-ledger .d:empty{display:none}
#ui .ui-upkeep .v{font-size:16px}
#ui .ui-upkeep .d{color:var(--ink-3)}
#ui .ui-staff-slot{display:flex; align-items:center}
#ui .ui-staff-btn .n{font-size:12px; min-width:0}
#ui .ui-staff-btn .n:empty{display:none}
#ui .ui-clockz{margin:0 auto; gap:18px; border-left:1px solid var(--rule); padding:0 20px; flex:none}
#ui .ui-clock{display:flex; flex-direction:column; align-items:center; gap:2px}
#ui .ui-clock .t{font:800 var(--t-display)/1 var(--ui); font-stretch:62%; font-variant-numeric:tabular-nums; letter-spacing:.01em}
#ui .ui-clock .sc{font-size:10px}
#ui .ui-clockz[data-stage="overtime"] .t{color:var(--signal)}
#ui .ui-clockz[data-stage="sudden-death"] .t{color:var(--oxblood)}
#ui .ui-clockz[data-stage="freeplay"] .t{color:var(--moss)}
#ui .ui-wp,#ui .ui-leader{display:flex; flex-direction:column; gap:3px; white-space:nowrap}
#ui .ui-wp b{font-size:var(--t-strong); line-height:1}
#ui .ui-leader b{font:650 13px/1 var(--ui); color:var(--ink-2); max-width:150px; overflow:hidden; text-overflow:ellipsis}
/* The seat rail: one emblem per commander, ranked. */
#ui .ui-rail-slot{gap:8px; flex:0 1 auto; padding-right:10px}
#ui .ui-rail{display:flex; gap:1px; align-items:stretch; min-width:0; overflow-x:auto; scrollbar-width:none; height:100%}
#ui .ui-rail::-webkit-scrollbar{display:none}
#ui .ui-seat{position:relative; font:inherit; color:var(--ink); background:none; border:0; width:36px; padding:6px 0 4px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; cursor:pointer; flex:none}
#ui .ui-seat:hover{background:var(--tint)}
#ui .ui-seat .ui-emblem{width:24px; height:24px}
#ui .ui-seat-bar{display:block; width:24px; height:4px; border:1px solid var(--ink)}
#ui .ui-seat-wp{font-size:11.5px; line-height:1}
#ui .ui-seat.me{background:var(--tint); box-shadow:inset 0 -2px 0 var(--ink)}
#ui .ui-seat.sel{box-shadow:inset 0 0 0 2px var(--pencil)}
/* War: hatched oxblood under the emblem plus a cross; ally: a moss rule. */
#ui .ui-seat.war::after{content:''; position:absolute; top:3px; right:2px; width:9px; height:9px; background:
  linear-gradient(45deg,transparent 40%,var(--oxblood) 40% 60%,transparent 60%),linear-gradient(-45deg,transparent 40%,var(--oxblood) 40% 60%,transparent 60%)}
#ui .ui-seat.war .ui-seat-wp{color:var(--oxblood)}
#ui .ui-seat.war .ui-seat-bar{outline:1.5px solid var(--oxblood); outline-offset:1px}
#ui .ui-seat.ally .ui-seat-bar{outline:1.5px solid var(--moss); outline-offset:1px}
#ui .ui-seat.traitor .ui-seat-wp{text-decoration:line-through}
#ui .ui-seat.dead{opacity:.35}
#ui .ui-table-btn{flex:none}
#ui .ui-menu-slot{flex:none; padding:0 14px}
/* Selection summary, doctrine track and production in the bottom collar. */
#ui .ui-selsum-slot{flex:1 1 0; min-width:0}
#ui .ui-selsum{display:flex; align-items:baseline; gap:10px; min-width:0; white-space:nowrap}
#ui .ui-selsum b{font-size:var(--t-strong); overflow:hidden; text-overflow:ellipsis}
#ui .ui-selsum .ui-muted{font-size:12px; overflow:hidden; text-overflow:ellipsis}
#ui .ui-dock-slot{padding:0; flex:none}
#ui .ui-dock{display:flex; align-items:stretch; height:100%; pointer-events:auto}
#ui .ui-mando{display:flex; flex-direction:column; justify-content:center; gap:3px; padding:0 16px; border-right:1px solid var(--rule); width:150px}
#ui .ui-mando>.sc{display:flex; justify-content:space-between}
#ui .ui-mando-v{font-size:18px; 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:6px}
#ui .ui-abs{display:flex}
#ui .ui-ab{font:inherit; color:inherit; background:none; border:0; border-right:1px solid var(--rule); width:150px; padding:8px 14px; text-align:left; display:flex; flex-direction:column; justify-content:center; gap:3px; 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:var(--t-strong); font-weight:550; overflow:hidden; text-overflow:ellipsis}
#ui .ui-ab-state{font-size:11px; font-weight:650; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#ui .ui-ab-bar{height:4px}
#ui .ui-ab.locked{cursor:not-allowed}
#ui .ui-ab.locked .ui-ab-hd{opacity:.55}
#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,#ui .ui-ab.active .ui-ab-state{color:var(--moss)}
#ui .ui-ab.passive .ui-ab-bar i,#ui .ui-ab.active .ui-ab-bar i{background:var(--moss)}
#ui .ui-ab.ready{background:var(--ink); color:var(--sheet); --gap:var(--ink)}
#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(--pencil)}
#ui .ui-ab[disabled]{opacity:1}
#ui .ui-ab.targeting{box-shadow:inset 0 0 0 2px var(--pencil)}
#ui .ui-res-auto{gap:10px; flex:none}
#ui .ui-res-auto-n b{font-size:var(--t-strong)}
#ui .ui-res-auto.partial .ui-res-auto-n b{color:var(--signal)}

/* ---------- HUD: under the top collar ---------- */
/* Left column: the dispatch (annotation on the map, no cards), warnings, staff panel, log. */
#ui .ui-tl{position:absolute; top:calc(var(--collar-top) + var(--neat) + 10px); left:var(--gut); width:min(380px,calc(50vw - 300px)); display:flex; flex-direction:column; gap:8px; align-items:flex-start; pointer-events:none; z-index:2}
/* Only the written lines take the pointer: the empty space beside them is still the map. */
#ui .ui-ticker{display:flex; flex-direction:column; align-items:flex-start; gap:2px; pointer-events:none; max-width:100%}
#ui .ui-ticker .al,#ui .ui-ticker-log{pointer-events:auto}
#ui .ui-ticker-lines{list-style:none; display:flex; flex-direction:column; align-items:flex-start; gap:1px}
#ui .ui-ticker .al,#ui .ui-log .al{font:inherit; color:var(--ink); background:none; border:0; padding:1px 0; text-align:left; display:flex; gap:8px; align-items:baseline; cursor:default; font-weight:600; font-size:12.5px; line-height:1.3;
  text-shadow:0 0 2px var(--paper),0 0 2px var(--paper),0 0 4px var(--paper),0 0 6px var(--paper)}
#ui .ui-ticker button.al,#ui .ui-log button.al{cursor:pointer}
#ui .ui-ticker button.al:hover .ui-al-t,#ui .ui-log button.al:hover .ui-al-t{text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--ink-3)}
#ui .ui-al-time{font-size:11px; color:var(--ink-3); flex:none; min-width:30px}
#ui .ui-ticker li.loud .ui-al-t,#ui .ui-log li.loud .ui-al-t{color:var(--oxblood)}
#ui .ui-ticker li.loud .ui-al-time::before,#ui .ui-log li.loud .ui-al-time::before{content:'■ '; color:var(--oxblood)}
#ui .ui-ticker li.ok .ui-al-time::before,#ui .ui-log li.ok .ui-al-time::before{content:'■ '; color:var(--moss)}
#ui .ui-ticker li.old .al{opacity:.62}
#ui .ui-ticker li:nth-child(n+2) .al{font-weight:500}
#ui .ui-ticker-log{font:650 11px var(--ui); color:var(--ink-2); background:none; border:0; padding:2px 0; display:flex; gap:5px; align-items:center; cursor:pointer; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--rule); text-shadow:0 0 3px var(--paper),0 0 3px var(--paper)}
#ui .ui-log{width:100%; max-height:46vh; overflow:auto; scrollbar-width:thin}
#ui .ui-log-list{list-style:none; padding:6px 14px 10px}
#ui .ui-log-list li{border-bottom:1px solid var(--rule)}
#ui .ui-log .al{text-shadow:none; padding:5px 0}
#ui .ui-res-hint{pointer-events:auto; width:fit-content; font-weight:650; font-size:12.5px; color:var(--oxblood); padding-left:12px; position:relative;
  text-shadow:0 0 2px var(--paper),0 0 2px var(--paper),0 0 4px var(--paper)}
#ui .ui-res-hint::before{content:''; position:absolute; left:0; top:4px; width:7px; height:7px; background:var(--oxblood)}
/* Centre column: threat, rules, coach, offers, hints, war confirm. */
#ui .ui-top-center{position:absolute; top:calc(var(--collar-top) + var(--neat) + 10px); left:50%; transform:translateX(-50%); width:min(520px,calc(100vw - 2 * var(--gut))); display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; z-index:2}
#ui .ui-top-center>*{pointer-events:auto; max-width:100%}
#ui .ui-threat{background:var(--sheet); border:1px solid var(--ink); box-shadow:2px 2px 0 var(--ink); padding:7px 14px; font-weight:750; font-size:13.5px; text-align:center}
#ui .ui-threat.bad{color:var(--oxblood); background:repeating-linear-gradient(-45deg,rgba(142,42,31,.07) 0 2px,var(--sheet) 2px 6px)}
#ui .ui-threat.good{color:var(--moss)}
#ui .ui-threat.freeplay{color:var(--ink)}
#ui .ui-point-rules{font-size:11px; color:var(--ink-2); text-shadow:0 0 3px var(--paper),0 0 3px var(--paper)}
#ui .ui-point-rules summary{cursor:pointer; font-weight:650; list-style:none; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--rule)}
#ui .ui-point-rules summary::-webkit-details-marker{display:none}
#ui .ui-point-rules[open]{background:var(--sheet); border:1px solid var(--ink); box-shadow:2px 2px 0 var(--ink); padding:8px 12px; text-shadow:none}
#ui .ui-point-rules p{max-width:420px; padding-top:6px; font-size:12px; line-height:1.45}
#ui .coach{background:var(--sheet)!important; color:var(--ink)!important; border:1px solid var(--ink); box-shadow:2px 2px 0 var(--ink)!important; border-radius:0!important; font:600 13px/1.4 var(--ui)!important; padding:8px 8px 8px 14px!important; max-width:100%!important}
#ui .coach button{color:var(--ink-3)!important}
#ui .ui-hint{display:flex; align-items:center; gap:10px; padding:6px 6px 6px 14px; font-weight:650}
#ui .ui-war{padding:12px 14px; display:flex; flex-direction:column; gap:8px; max-width:420px; border-width:1.5px; box-shadow:3px 3px 0 var(--ink); background:repeating-linear-gradient(-45deg,rgba(142,42,31,.06) 0 2px,var(--sheet) 2px 7px)}
#ui .ui-war p{font-weight:600}
#ui .ui-war .ui-why:empty{display:none}
#ui .ui-offers{display:flex; flex-direction:column; gap:8px; width:min(420px,100%)}
#ui .ui-offers:empty{display:none}
#ui .ui-offer{padding:10px 12px; display:flex; flex-direction:column; gap:7px; border-width:1.5px; box-shadow:3px 3px 0 var(--ink)}
#ui .ui-offer-hd{display:flex; justify-content:space-between; align-items:center; gap:10px}
#ui .ui-offer-hd>.ui-emblem{align-self:center}
#ui .ui-offer-hd>.ui-offer-what{flex:1; min-width:0}
#ui .ui-offer-left{font-size:var(--t-strong)}
#ui .ui-offer-what{font-family:var(--serif); font-size:16px; line-height:1.25}
#ui .ui-offer-what b{font-weight:700}
#ui .ui-offer-terms{font-weight:500; font-size:12.5px}
#ui .ui-offer-terms b{font-weight:700}
#ui .ui-offer-bar{height:4px}
#ui .ui-offer-bar i{background:var(--signal)}
#ui .ui-offer-acts{display:grid; grid-template-columns:1fr 1fr; gap:6px}
#ui .ui-offer-acts .b{justify-content:center}
/* Slips under the top collar on the right: the full table and the menu. */
#ui .ui-table{position:absolute; top:calc(var(--collar-top) + var(--neat) + 8px); right:calc(var(--gut) + 72px); width:340px; z-index:4}
#ui .ui-table .hd{padding:8px 12px 6px; align-items:center}
#ui .ui-cmds{display:flex; flex-direction:column; max-height:60vh; overflow-y:auto; scrollbar-width:thin; pointer-events:auto}
#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:24px minmax(0,1fr) 14px auto auto; gap:8px; align-items:center; padding:6px 12px; font-weight:600; cursor:pointer}
#ui .cmd:last-child{border-bottom:0}
#ui .cmd:hover{background:var(--tint)}
#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:10px; justify-content:flex-end; font-size:13px; min-width:52px}
#ui .cmd .wp{min-width:18px; text-align:right}
#ui .cmd .cit{color:var(--ink-2); min-width:14px; text-align:right}
#ui .cmd.me{background:var(--tint)}
#ui .cmd.sel{box-shadow:inset 3px 0 0 var(--pencil)}
#ui .cmd.dead{opacity:.45}
#ui .ui-menu-pop{position:absolute; top:calc(var(--collar-top) + var(--neat) + 8px); right:var(--gut); width:220px; z-index:4}
#ui .ui-menu-body{display:flex; flex-direction:column; gap:6px; padding:10px}
#ui .ui-menu-body .b{justify-content:flex-start; width:100%}
#ui .ui-foot-q{font-weight:650; font-size:12.5px; color:var(--oxblood)}

/* ---------- HUD: the dossier (one context sheet, right) ---------- */
#ui .ui-bl{position:absolute; top:calc(var(--collar-top) + var(--neat) + 10px); right:var(--gut); bottom:calc(var(--collar-bottom) + var(--neat) + 10px); width:384px; display:flex; flex-direction:column; gap:10px; align-items:stretch; pointer-events:none; z-index:2}
#ui .ui-bl>.panel{border-width:1.5px; box-shadow:3px 3px 0 var(--ink); pointer-events:auto; flex:0 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; animation:ui-sheet .16s ease-out}
@keyframes ui-sheet{from{transform:translateX(10px); opacity:0}to{transform:none; opacity:1}}
#ui .ui-bl>.panel>.hd{position:sticky; top:0; background:var(--sheet); z-index:1}
#ui .ui-city{flex-shrink:1}
/* A commander's dossier keeps its natural height; an army sheet under it gives way. */
#ui .ui-bl>.ui-diplo{flex:none; max-height:62%}
#ui .ui-city .ui-owner>.ui-emblem{width:24px; height:24px}
#ui .ui-hd-r{display:flex; align-items:center; gap:6px}
#ui .ui-integ{white-space:nowrap; font-size:10px}
#ui .ui-integ-bar{height:6px; margin:0 14px; background:var(--paper-2)}
#ui .ui-integ-bar i{background:var(--moss)}
#ui .ui-city.foreign .ui-integ-bar i{background:var(--ink-2)}
#ui .ui-city.siege .ui-integ-bar i{background:var(--oxblood)}
#ui .ui-city.siege .ui-integ{color:var(--oxblood)}
#ui .ui-stats{display:flex; gap:18px; padding:10px 14px 10px; border-bottom:1px solid var(--rule)}
#ui .ui-stats>div{display:flex; flex-direction:column; gap:3px; min-width:0}
#ui .ui-stats .n{font-size:17px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#ui .ui-stats .ui-rally{font-size:13px; font-stretch:90%; font-weight:650}
/* The site plan: plots drawn edge to edge. */
#ui .slots{display:grid; gap:0; margin:12px 14px; border:1px solid var(--ink)}
#ui .slot{font:inherit; color:inherit; text-align:left; border:0; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); border-radius:0; background:var(--sheet); padding:9px 10px; min-height:86px; position:relative; display:flex; flex-direction:column; gap:2px}
#ui .slot:nth-child(2n){border-right:0}
#ui .slot:nth-last-child(-n+2):nth-child(odd),#ui .slot:last-child{border-bottom:0}
#ui .slot b{font-size:13px; line-height:1.15}
#ui .slot .lv{position:absolute; right:9px; top:8px; font-size:11px; font-weight:800; font-stretch:75%; color:var(--ink-2)}
#ui .slot p{font-size:11.5px; color:var(--ink-2); line-height:1.3; font-weight:500}
#ui .slot>small{display:block; font-size:11px; color:var(--ink-2)}
#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:5px; 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{background:repeating-linear-gradient(-45deg,rgba(33,31,26,.07) 0 1px,var(--sheet) 1px 6px)}
#ui .slot.building .ui-slot-bar{margin-top:auto}
#ui .slot.empty{background:var(--paper); justify-content:center; cursor:pointer; gap:2px; color:var(--ink-2)}
#ui .slot.empty b{font-weight:650; color:var(--ink)}
#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"]{box-shadow:inset 0 0 0 2px var(--pencil)}
#ui .slot>.b{margin-top:6px; max-width:100%}
#ui .ui-menu{border-top:1px solid var(--rule); padding:4px 14px 8px; display:flex; flex-direction:column}
#ui .opt{font:inherit; color:inherit; background:none; border:0; border-bottom:1px solid var(--rule); text-align:left; display:grid; grid-template-columns:22px 1fr auto; gap:9px; padding:7px 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(--oxblood)!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(--oxblood)}
#ui .ui-ric{width:11px; height:11px; flex:none}
#ui .ui-sec{display:flex; justify-content:space-between; align-items:baseline; padding:10px 14px 0; border-top:1px solid var(--rule)}
#ui .ui-sec-hint{font-size:11px; color:var(--ink-3); font-weight:600}
/* Recruit: counters to click. */
#ui .ui-recruit{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:4px 12px; padding:8px 14px 12px}
#ui .ui-rtile{font:inherit; color:inherit; border:0; background:none; padding:4px; display:grid; grid-template-columns:38px 1fr; grid-template-rows:auto auto; column-gap:9px; align-items:center; text-align:left; cursor:pointer; border-radius:2px}
#ui .ui-rtile:hover:not([disabled]){background:var(--tint)}
#ui .ui-rtile[disabled]{cursor:not-allowed}
#ui .ui-rtile[disabled] .ico{opacity:.45}
#ui .ui-rtile .ico{grid-row:span 3}
#ui .ui-rtile b{font-size:12.5px}
#ui .ui-rtile .ui-cost .n{font-size:11px}
#ui .ui-rt-time{font-size:11px; font-weight:650; color:var(--ink-2)}
#ui .ui-rtile[disabled] .ui-rt-time{color:var(--oxblood)}
#ui .ui-rtile .ico,#ui .ui-qtile .ico,#ui .u .ico,#ui .ui-tpl .ico{display:grid; place-items:center; background:var(--me); color:var(--sheet); border:1.5px solid var(--ink)}
#ui .ui-rtile .ico{width:38px; height:26px}
#ui .ui-unit-ic{width:22px; height:17px}
/* Queue: counters on a track. */
#ui .ui-queue{display:grid; grid-template-columns:auto 1fr; gap:8px 10px; align-items:center; padding:10px 14px 12px; border-top:1px solid var(--rule)}
#ui .ui-qtiles{display:flex; gap:6px; flex-wrap:wrap; align-items:center; min-height:30px}
#ui .ui-qtile{width:40px; position:relative; display:flex; flex-direction:column; gap:2px}
#ui .ui-qtile .ico{height:24px}
#ui .ui-qtile .ui-unit-ic{width:18px; height:14px}
#ui .ui-qtile .bar{height:3px}
#ui .ui-q-wait{font-size:9.5px; text-align:center; color:var(--ink-3); font-weight:700}
#ui .ui-qtile .ui-x{position:absolute; top:-7px; right:-7px; width:16px; height:16px; font-size:12px; background:var(--sheet); border:1px 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-auto-note{grid-column:1/-1; font-size:12px; color:var(--ink-2); font-weight:500}
#ui .ui-auto-note b{color:var(--ink)}
#ui .ui-relocate{margin:0 14px 12px; padding:9px 11px; border:1px solid var(--oxblood); display:flex; gap:10px; align-items:center; justify-content:space-between}
#ui .ui-relocate p{font-weight:600}
#ui .ui-flags{display:flex; flex-wrap:wrap; gap:4px 12px; font-size:11.5px; font-weight:650; color:var(--ink-2); border-top:1px solid var(--rule); padding:8px 14px}
#ui .ui-flags .bad{color:var(--oxblood)}
#ui .ui-owner{display:flex; gap:8px; align-items:center; padding:10px 14px 4px; font-size:14px}
#ui .ui-attack{border-top:1px solid var(--rule); padding:10px 14px 12px; display:flex; flex-direction:column; gap:8px; align-items:flex-start}
#ui .ui-fc-line{font-weight:500}
#ui .ui-fc-line.good b{color:var(--moss)} #ui .ui-fc-line.bad b{color:var(--oxblood)}
#ui .ui-demolish-confirm{display:grid; gap:5px; margin-top:5px}
#ui .ui-demolish-confirm p{font-size:11px; line-height:1.3}
#ui .ui-missile-controls{padding:10px 14px; border-top:1px solid var(--rule); display:grid; gap:6px}
#ui .ui-missile-buttons{display:flex; gap:6px; flex-wrap:wrap}

/* Army dossier: order of battle as counters. */
#ui .ui-sel .hd .sc{white-space:nowrap}
#ui .ui-selection-owner{display:flex; gap:7px; align-items:center; padding:6px 14px; border-bottom:1px solid var(--rule)}
#ui .ui-sel-main{display:flex; flex-wrap:wrap; gap:8px 12px; padding:10px 14px 12px; align-items:flex-end}
#ui .ui-sel-main>.sc{flex-basis:100%}
#ui .units{display:flex; gap:12px; flex-wrap:wrap}
#ui .u{width:auto; display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto; column-gap:0; align-items:end}
#ui .u .ico{width:40px; height:28px; grid-row:1; grid-column:1}
#ui .u.dom-air .ico{border-radius:13px 13px 0 0}
#ui .u.dom-sea .ico{border-radius:0 0 13px 13px}
#ui .u .ct{grid-row:1; grid-column:2; align-self:center; background:var(--sheet); border:1.5px solid var(--ink); border-left:0; font-size:13px; line-height:1; padding:4px 5px; min-width:20px; text-align:center}
#ui .u .nm{grid-row:2; grid-column:1 / -1; font-size:11px; font-weight:650; color:var(--ink-2); padding-top:3px; white-space:nowrap}
#ui .u .hp{grid-row:3; grid-column:1 / -1; height:3px; margin-top:3px}
#ui .u.pick{cursor:pointer} #ui .u.pick:hover .ico{filter:brightness(1.12)}
#ui .ui-counters{display:none}
#ui .orders{display:flex; gap:6px; padding:0 14px 12px; flex-wrap:wrap; align-items:center}
#ui .ui-disband{display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 10px; align-items:center}
#ui .ui-disband:empty{display:none}
#ui .ui-disband p{flex-basis:100%; font-size:12px; line-height:1.35}
#ui .ui-disband>.b:only-child{border-color:transparent; background:none; text-decoration:underline; text-underline-offset:3px; color:var(--oxblood); padding:4px 0}
#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:8px; padding:0 14px 12px}
#ui .ui-mission:empty{display:none}
#ui .ui-mission-bar{display:flex; gap:0; flex-wrap:wrap; align-items:center; padding-top:10px; border-top:1px solid var(--rule)}
#ui .ui-mission-bar .sc{margin-right:10px; flex-basis:100%; margin-bottom:6px}
#ui .ui-mission-bar .b{border-radius:0; margin-left:-1px}
#ui .ui-mission-bar .sc+.b{margin-left:0; border-radius:2px 0 0 2px}
#ui .ui-mission-bar .b:last-child{border-radius:0 2px 2px 0}
#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:6px}
#ui .ui-tpl{display:inline-flex; align-items:center; gap:2px; border:1px solid var(--ink); background:var(--sheet); padding:0 2px 0 0; height:28px}
#ui .ui-tpl .ico{width:30px; height:100%; border:0; border-right:1px solid var(--ink)}
#ui .ui-tpl .ico svg{width:18px; height:14px}
#ui .ui-tpl .n{font-size:13px; margin:0 4px}
#ui .ui-tpl .ui-x{width:20px; height:22px; font-size:15px}
#ui .ui-sel .foot{display:flex; flex-direction:column; gap:2px; padding:8px 14px; 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:6px}
#ui .ui-sel.compact h2{font-size:18px}

/* Commander dossier: disposition on a scale; treaties and hostilities apart. */
#ui .ui-diplo .hd{align-items:center; gap:12px}
#ui .ui-diplo .hd>.ui-emblem{flex:none}
#ui .ui-diplo-id{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
#ui .ui-diplo h2 .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#ui .ui-diplo h2 .sw{align-self:center}
#ui .ui-diplo-id small{font-size:11.5px; color:var(--ink-2); font-weight:500}
#ui .ui-diplo-hd-r{display:flex; align-items:center; gap:6px; align-self:flex-start}
#ui .ui-disp{padding:10px 14px 12px; border-bottom:1px solid var(--rule); display:flex; flex-direction:column; gap:3px}
#ui .ui-disp b{font-family:var(--serif); font-size:22px; font-weight:550; line-height:1.1}
#ui .ui-disp p{color:var(--ink-2); font:italic 400 14px/1.4 var(--serif); margin-top:6px}
#ui .ui-scale{position:relative; height:24px; margin-top:6px}
#ui .ui-scale-bar{position:absolute; left:0; right:0; top:10px; height:6px; background:linear-gradient(90deg,var(--oxblood),#c9a99a 30%,var(--rule) 50%,#a9c2ad 70%,var(--moss))}
#ui .ui-scale-mark{position:absolute; top:3px; width:2px; height:20px; margin-left:-1px; background:var(--ink)}
#ui .ui-scale-mark::after{content:''; position:absolute; left:-5px; top:-5px; border:6px solid transparent; border-top-color:var(--ink)}
#ui .ui-scale-l{display:flex; justify-content:space-between; font-size:10.5px; font-weight:650; color:var(--ink-3)}
#ui .ui-acts{display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:10px 14px 12px}
#ui .ui-acts>.sc{grid-column:1 / -1}
#ui .ui-acts .b{justify-content:center; padding:8px 6px; white-space:normal; text-align:center; line-height:1.15}
#ui .ui-acts .b[aria-expanded="true"]{background:var(--ink); color:var(--sheet)}
#ui .ui-acts>p{grid-column:1 / -1}
#ui .ui-hostile{display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:10px 14px 12px; border-top:1px solid var(--rule); background:repeating-linear-gradient(-45deg,rgba(142,42,31,.05) 0 1px,var(--sheet) 1px 7px)}
#ui .ui-hostile .ui-muted{font-size:11.5px}
#ui .ui-builder{margin:0 14px 12px; border:1px dashed var(--ink); padding:8px 10px; display:flex; flex-direction:column; gap:4px}
#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:2px 6px; min-width:22px; justify-content:center}
#ui .ui-builder-go{display:flex; gap:8px; align-items:center; margin-top:4px}
#ui .ui-confirm{border:1px solid var(--oxblood); padding:9px 11px; display:flex; flex-direction:column; gap:6px; background:var(--sheet); width:100%}
#ui .ui-confirm p{font-weight:600}
#ui .ui-result{padding:8px 14px 10px; border-top:1px solid var(--rule); font-weight:650; color:var(--moss)}
#ui .ui-result.bad{color:var(--oxblood)}
#ui .ui-diplo>.ui-muted{padding:8px 14px 0; font-size:12px}

/* General staff: a slip under the ledger. */
#ui .ui-staff{width:360px; max-width:100%; pointer-events:auto}
#ui .ui-staff .hd{align-items:center}
#ui .ui-staff .hd h2{font-size:18px}
#ui .ui-staff .hd .sc{font-size:10px; text-transform:none; letter-spacing:0; color:var(--ink-3)}
#ui .ui-staff-body{display:flex; flex-direction:column; gap:8px; padding:10px 14px 12px; max-height:min(52vh, 460px); overflow:auto}
#ui .ui-staff-sec{display:flex; flex-direction:column; gap:6px; padding-bottom:6px}
#ui .ui-staff-reserve{display:flex}
#ui .ui-staff-reserve .b{min-width:0; font-size:12px; padding:7px 9px; border-radius:0; margin-left:-1px}
#ui .ui-staff-reserve .b:first-child{margin-left:0}
#ui .ui-staff-custom{display:flex; align-items:center; gap:6px}
#ui .ui-staff-custom .ui-input{flex:1; min-width:0; width:0; font-size:14px; padding:6px 8px}
#ui .ui-staff-custom .b{font-size:12px; padding:7px 10px; flex-shrink:0}
#ui .ui-staff-armies{display:flex; flex-direction:column; gap: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-armies{display:flex; flex-direction:column; border-top:1px solid var(--rule)}
#ui .ui-army{font:inherit; display:grid; grid-template-columns:26px 1fr auto; gap:9px; align-items:center; text-align:left; width:100%; border:0; border-bottom:1px solid var(--rule); background:none; padding:6px 2px; cursor:pointer; color:var(--ink)}
#ui .ui-army:hover{background:var(--tint)}
#ui .ui-army.hot .ui-army-name small{color:var(--oxblood); font-weight:650}
#ui .ui-army-glyph{width:24px; height:24px; border-radius:50%; background:var(--sheet); border:1.5px solid var(--ink); display:inline-flex; align-items:center; justify-content:center}
#ui .ui-army.hot .ui-army-glyph{border-color:var(--oxblood); color:var(--oxblood)}
#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}

/* ---------- HUD: inset map, toasts, forecast slip ---------- */
#ui .ui-mini{position:absolute; left:var(--gut); bottom:calc(var(--collar-bottom) + var(--neat) + 14px); line-height:0; pointer-events:auto; border:1.5px solid var(--ink); box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--ink); background:var(--sea); z-index:2}
#ui .ui-mini canvas{display:block; cursor:crosshair; touch-action:none}
#ui .ui-mini-cap{position:absolute; left:4px; top:4px; background:var(--paper); padding:2px 5px; font:650 10px/1.2 var(--ui); letter-spacing:.04em; text-transform:uppercase; color:var(--ink); pointer-events:none}
#ui .ui-toasts{position:absolute; left:50%; bottom:calc(var(--collar-bottom) + var(--neat) + 16px); transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none; z-index:3}
#ui .ui-toast{background:var(--sheet); border:1px solid var(--ink); box-shadow:2px 2px 0 var(--ink); padding:7px 14px; font-weight:650; max-width:460px; text-align:center; animation:ui-stamp .12s ease-out}
#ui .ui-toast.error{color:var(--oxblood); border-color:var(--oxblood); box-shadow:2px 2px 0 var(--oxblood)}
@keyframes ui-stamp{from{transform:scale(1.03); opacity:0}to{transform:none; opacity:1}}
#ui .ui-fc{position:fixed; left:0; top:0; width:300px; pointer-events:none; z-index:5}
#ui .ui-fc-hd{display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:10px 14px 0}
#ui .ui-fc-label{font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#ui .ui-fc .verdict{font-family:var(--serif); font-size:20px; font-weight:550; padding:4px 14px 8px}
#ui .ui-fc .verdict.good{color:var(--moss)} #ui .ui-fc .verdict.bad{color:var(--oxblood)}
#ui .ui-fc-sides{display:flex; justify-content:space-between; padding:3px 14px 4px; font-weight:600; color:var(--ink-2); font-size:11.5px}
#ui .ui-fc-sides b{color:var(--ink)}
#ui .ui-fc ul{list-style:none; padding:4px 14px 9px}
#ui .ui-fc li{display:flex; gap:7px; padding:2px 0; font-weight:500; font-size:12.5px}
#ui .ui-fc li b{font-size:13px; width:11px; flex:none; font-weight:800}
#ui .ui-fc li.up b{color:var(--moss)} #ui .ui-fc li.dn b{color:var(--oxblood)}
#ui .ui-fc .foot{border-top:1px solid var(--rule); padding:7px 14px; color:var(--ink-2); font-weight:600; font-size:12px}
#ui .ui-fc .foot.bad{color:var(--oxblood)}

/* ---------- The ledger (end of match): 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{position:absolute; left:50%; top:50%; width:min(1180px, calc(100% - 24px)); transform:translate(-50%, -50%) scale(var(--end-scale, 1)); transform-origin:center; overflow:visible; background:var(--paper); border-width:1.5px; box-shadow:3px 3px 0 var(--ink); padding:22px 28px 18px}
#ui .ui-end-hd{position:relative; border-top:6px solid var(--ink); padding:10px 40px 14px 0; border-bottom:1px solid var(--ink)}
#ui .ui-end-hd>.ui-brand-symbol{position:absolute; right:0; top:12px; width:26px; height:26px; margin:0}
#ui .ui-end-hd h1{font:850 clamp(44px, 6vw, var(--t-hero))/.9 var(--ui); font-stretch:62%; letter-spacing:.005em; margin-top:8px}
#ui .ui-end-hd.won h1{color:var(--moss)}
#ui .ui-end-how{font-family:var(--serif); font-size:clamp(15px, 1.6vw, 19px); font-style:italic; color:var(--ink-2); margin:8px 0 2px}
#ui .ui-end-body{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:28px; padding-top:16px}
#ui .ui-end-left{display:flex; flex-direction:column; gap:12px; min-width:0}
#ui .ui-end-map{margin:0; border:1px solid var(--ink); background:var(--sea); line-height:0; position:relative}
#ui .ui-end-map canvas{display:block; width:100%; height:auto}
#ui .ui-end-map figcaption{position:absolute; left:6px; top:6px; background:var(--paper); padding:2px 6px; font:650 10px/1.2 var(--ui); letter-spacing:.04em; text-transform:uppercase}
#ui .ui-end-moments{list-style:none; border-top:1.5px solid var(--ink)}
#ui .ui-end-moments li{display:grid; grid-template-columns:42px 1fr; gap:8px; padding:7px 0; border-bottom:1px solid var(--rule); font-size:12.5px}
#ui .ui-end-moments li .n{color:var(--pencil); font-size:12px}
#ui .ui-end-right{display:flex; flex-direction:column; gap:12px; min-width:0}
#ui .ui-end-chart{margin:0}
#ui .ui-chart-legend{display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; color:var(--ink-2); margin:6px 0 4px}
#ui .ui-chart-legend span{display:inline-flex; align-items:center; gap:5px}
#ui .ui-chart-legend i{display:inline-block; width:14px; height:2px}
#ui .ui-chart{position:relative}
#ui .ui-chart svg{display:block; width:100%; height:auto; overflow:visible}
#ui .ui-chart-axis{font:500 11px var(--ui); fill:var(--ink-2)}
#ui .ui-chart-label{font:650 12px var(--ui); fill:var(--ink)}
#ui .ui-chart-tip{position:absolute; top:6px; background:var(--sheet); border:1px solid var(--ink); box-shadow:2px 2px 0 var(--ink); padding:6px 9px; font-size:12px; white-space:nowrap; line-height:1.35; pointer-events:none}
#ui .ui-end-table{padding:0}
#ui .ui-end table{border-collapse:collapse; table-layout:fixed; width:100%}
#ui .ui-end th{font-size:10.5px; font-weight:650; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); text-align:left; padding:6px 6px; border-bottom:1.5px solid var(--ink); white-space:normal; overflow-wrap:anywhere}
#ui .ui-end th:first-child{width:28px}
#ui .ui-end th:nth-child(2){width:42%}
#ui .ui-end th.n{text-align:right; font-stretch:90%}
#ui .ui-end td{padding:6px 6px; border-bottom:1px solid var(--rule); font-weight:600; overflow-wrap:anywhere}
#ui .ui-end td.n{text-align:right; font-size:13px}
#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; flex-wrap:wrap; align-items:center; gap:4px 6px; font-size:13px}
#ui .ui-end-who>b{min-width:0; overflow-wrap:anywhere}
#ui .ui-end-who>.ui-emblem{width:22px; height:22px; flex:none}
#ui .ui-end-who>.sw{flex:none}
#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:.04em; color:var(--moss)}
#ui .ui-end-who em.out{color:var(--ink-3)}
#ui .ui-end-details{display:none; width:100%; font-size:11px}
#ui .ui-end-details summary{cursor:pointer; color:var(--ink-2)}
#ui .ui-end-full summary{cursor:pointer; font-size:12px; font-weight:650; color:var(--ink-2); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--rule)}
#ui .ui-end-full[open] summary{margin-bottom:8px}
#ui .ui-end-full td,#ui .ui-end-full th{font-size:11px; padding:4px}
#ui .ui-end-full th:nth-child(2){width:18%}
#ui .ui-end-acts{display:flex; flex-wrap:wrap; gap:8px; padding-top:16px; justify-content:flex-end; border-top:1px solid var(--rule); margin-top:14px}
#ui .ui-end-acts .b{padding:10px 16px; font-size:14px}
/* Free play: the choice counts down in large figures above the buttons. */
#ui .ui-end-count{display:flex; align-items:center; gap:18px; margin:14px 0 4px; padding:12px 16px; background:var(--sheet); border:1.5px solid var(--ink); box-shadow:3px 3px 0 var(--ink)}
#ui .ui-end-count-n{flex:none; min-width:2ch; text-align:center; font:850 64px/1 var(--ui); font-stretch:62%; font-variant-numeric:tabular-nums; color:var(--ink)}
#ui .ui-end-count-txt{display:flex; flex-direction:column; gap:4px; flex:1; min-width:0}
#ui .ui-end-count-txt b{font:800 20px/1.1 var(--ui); font-stretch:85%}
#ui .ui-end-count-txt span{font-size:13px; color:var(--ink-2)}
#ui .ui-end-count-bar{display:block; height:6px; margin-top:4px; background:var(--rule)}
#ui .ui-end-count-bar i{display:block; height:100%; background:var(--ink)}
#ui .ui-end-count.urgent{border-color:var(--pencil); box-shadow:3px 3px 0 var(--pencil)}
#ui .ui-end-count.urgent .ui-end-count-n{color:var(--pencil); animation:ui-count-pulse 1s ease-in-out infinite}
#ui .ui-end-count.urgent .ui-end-count-bar i{background:var(--pencil)}
#ui .ui-end-left{font-weight:650; color:var(--oxblood); margin:6px 0 0}
@keyframes ui-count-pulse{50%{transform:scale(1.12)}}

/* ---------- Tutorial ---------- */
#ui .ui-tutorial{width:100%; padding:10px 14px 12px; border-width:1.5px; box-shadow:3px 3px 0 var(--ink); text-align:left; max-height:32vh; overflow:auto; scrollbar-width:thin}
#ui .ui-tutorial h2{margin:4px 0; font-size:20px}
#ui .ui-tutorial p{font-size:12.5px; line-height:1.45}
#ui .ui-tutorial-actions{display:flex; flex-wrap:wrap; gap:5px; margin-top:8px}
#ui .ui-tutorial-feedback{color:var(--oxblood); padding-top:6px}
#ui .tutorial-highlight{outline:3px solid var(--signal)!important; outline-offset:3px}
#ui .ui-tutorial-arrow{position:fixed; left:0; top:0; color:var(--signal); font-size:19px; line-height:1; z-index:25; pointer-events:none; text-shadow:0 1px var(--ink)}
#ui .ui-tutorial-marker{position:absolute; left:0; top:0; pointer-events:none; z-index:2}
#ui .ui-tutorial-marker:before{content:''; position:absolute; left:-18px; top:-18px; width:36px; height:36px; border:3px solid var(--signal); border-radius:50%; box-shadow:0 0 0 1px var(--ink),inset 0 0 0 1px var(--ink)}

/* ---------- Narrower desktops ---------- */
@media (max-width:1440px){
  #ui .ui-leader{display:none}
  #ui .ui-who span{max-width:120px}
  #ui .ui-ledger{gap:14px}
  #ui .ui-ab{width:132px; padding:8px 12px}
  #ui .ui-mando{width:132px}
}
@media (max-width:1280px){
  #ui .ui-who>div{display:none}
  #ui .ui-clockz{gap:12px; padding:0 14px}
  #ui .ui-rail{max-width:calc(100vw - 920px)}
  #ui .ui-selsum .ui-muted{display:none}
}
@media(max-width:1200px){
  #ui .ui-tl{width:min(340px,calc(100vw - 420px))}
  #ui .ui-top-center{left:auto; right:calc(var(--gut) + 400px); transform:none; width:min(420px,calc(100vw - 800px)); min-width:300px}
  #ui .ui-game-screen:has(.ui-bl.has-city) .ui-top-center,#ui .ui-game-screen:has(.ui-bl.has-sel) .ui-top-center,#ui .ui-game-screen:has(.ui-diplo:not([hidden])) .ui-top-center{right:calc(var(--gut) + 400px)}
  #ui .ui-abs .ui-ab-state{display:none}
  #ui .ui-ab{width:112px}
  #ui .ui-tutorial{max-height:24vh}
  #ui.tutorial-active[data-tutorial-goal="minimap"] .ui-mini{display:block!important}
}

/* ---------- Tablets and phones ---------- */
/* Phones in portrait, tablets in portrait and narrow windows (short landscape screens below). */
@media (max-width:900px) and (min-height:501px){
  #ui.ui-root{--collar-top:calc(98px + env(safe-area-inset-top, 0px)); --collar-bottom:calc(54px + env(safe-area-inset-bottom, 0px)); --gut:8px}
  #ui .ui-collar.top{flex-wrap:wrap; align-content:stretch; padding-top:env(safe-area-inset-top, 0px)}
  #ui .ui-collar.bottom{padding-bottom:env(safe-area-inset-bottom, 0px)}
  #ui .ui-collar.top>.ui-cz{height:49px; border-bottom:1px solid var(--rule)}
  /* Row one: the seat rail (you are in it), the clock, the menu. Row two: the ledger. */
  #ui .ui-who{display:none}
  #ui .ui-rail-slot{order:1; flex:1 1 0; padding:0 4px 0 6px; gap:4px}
  #ui .ui-rail{max-width:none}
  #ui .ui-clockz{order:2; margin:0; border-left:1px solid var(--rule); padding:0 10px; gap:10px}
  #ui .ui-clock .sc{display:none}
  #ui .ui-wp{display:flex}
  #ui .ui-wp .sc{font-size:9px}
  #ui .ui-wp b{font-size:13px}
  #ui .ui-leader{display:none}
  #ui .ui-menu-slot{order:3; padding:0 8px}
  #ui .ui-ledger{order:4; flex:1 1 100%; justify-content:space-between; gap:8px; padding:0 10px; border-right:0}
  #ui .ui-ledger .v{font-size:16px}
  #ui .ui-ledger .d{display:none}
  #ui .ui-collar.bottom{overflow-x:auto; scrollbar-width:none}
  #ui .ui-selsum-slot{display:none}
  #ui .ui-ab-state{display:none}
  #ui .ui-ab{width:104px; padding:6px 10px}
  #ui .ui-mando{width:104px; padding:0 10px}
  #ui .ui-res-auto .sc{display:none}
  #ui.ui-touch .ui-res-auto{display:none}
  #ui .ui-tl{width:calc(100vw - 2 * var(--gut))}
  #ui .ui-top-center,#ui .ui-game-screen:has(.ui-bl.has-city) .ui-top-center,#ui .ui-game-screen:has(.ui-bl.has-sel) .ui-top-center,#ui .ui-game-screen:has(.ui-diplo:not([hidden])) .ui-top-center{top:calc(var(--collar-top) + var(--neat) + 64px); left:var(--gut); right:var(--gut); transform:none; width:auto; min-width:0}
  #ui:not(.tutorial-active) .ui-point-rules{display:none}
  /* The dossier becomes a bottom sheet over the bottom collar; on touch it has a handle and
     stays low for troops (the map must stay visible to tap a destination). */
  #ui .ui-bl{left:0; right:0; top:auto; bottom:0; width:auto; max-height:56vh; z-index:6; gap:0}
  #ui.ui-touch .ui-bl{max-height:40vh; padding-bottom:env(safe-area-inset-bottom, 0px); background:var(--sheet)}
  #ui.ui-touch .ui-bl:not(.has-sel):not(.has-city):not(:has(.ui-diplo:not([hidden]))){background:none; padding:0}
  #ui.ui-touch .ui-bl.expanded{max-height:78vh}
  #ui .ui-bl>.panel{border-left:0; border-right:0; box-shadow:0 -3px 0 var(--ink); animation:none}
  #ui .ui-game-screen:has(.ui-bl.has-city) .ui-mini,#ui .ui-game-screen:has(.ui-bl.has-sel) .ui-mini,#ui .ui-game-screen:has(.ui-diplo:not([hidden])) .ui-mini{display:none}
  #ui .ui-mini canvas{width:160px!important; height:auto!important}
  #ui .ui-table{right:var(--gut); left:var(--gut); width:auto}
  #ui .ui-home-sheet{width:100%; box-shadow:none; background:rgba(239,230,208,.96)}
  #ui .ui-cartouche{display:none}
  #ui .ui-mesa{top:auto; left:var(--gut); right:var(--gut); bottom:var(--gut); width:auto; height:52vh}
  #ui .ui-pin-lbl small{display:none}
  #ui .ui-end-body{grid-template-columns:1fr}
  /* Right edge, below the notes: the left edge carries the dispatch. */
  #ui.ui-root .ui-touchbar{left:auto; right:var(--gut); top:calc(var(--collar-top) + var(--neat) + 150px)}
}
/* Phones in landscape: one-row collars, the dossier as a right panel, no inset map. */
@media (max-height:500px) and (orientation:landscape){
  #ui.ui-root{--collar-top:calc(46px + env(safe-area-inset-top, 0px)); --collar-bottom:calc(46px + env(safe-area-inset-bottom, 0px)); --neat:4px; --gut:8px;
    --safe-l:env(safe-area-inset-left, 0px); --safe-r:env(safe-area-inset-right, 0px)}
  #ui .ui-collar.top{padding:env(safe-area-inset-top, 0px) var(--safe-r) 0 var(--safe-l); box-shadow:0 1px 0 var(--ink),0 3px 0 var(--paper),0 4px 0 var(--ink)}
  #ui .ui-collar.bottom{padding:0 var(--safe-r) env(safe-area-inset-bottom, 0px) var(--safe-l); box-shadow:0 -1px 0 var(--ink),0 -3px 0 var(--paper),0 -4px 0 var(--ink); overflow-x:auto; scrollbar-width:none}
  #ui .ui-cz{padding:0 10px; gap:10px}
  #ui .ui-who{display:none}
  #ui .ui-ledger{gap:12px}
  #ui .ui-ledger .sc{font-size:9px; letter-spacing:.02em}
  #ui .ui-ledger .v{font-size:16px}
  #ui .ui-ledger .d{display:none}
  #ui .ui-upkeep{display:none!important}
  #ui .ui-clockz{padding:0 10px; gap:10px}
  #ui .ui-clock .t{font-size:24px}
  #ui .ui-clock .sc,#ui .ui-leader{display:none}
  #ui .ui-wp .sc{font-size:9px}
  #ui .ui-wp b{font-size:13px}
  #ui .ui-rail-slot{flex:1 1 0; padding:0 4px 0 6px; gap:4px}
  #ui .ui-rail{max-width:none}
  #ui .ui-seat{padding:3px 0 2px}
  #ui .ui-seat .ui-emblem{width:20px; height:20px}
  #ui .ui-menu-slot{padding:0 8px}
  #ui .ui-selsum-slot{display:none}
  #ui .ui-mando{width:96px; padding:0 10px}
  #ui .ui-mando-next{display:none}
  #ui .ui-ab{width:112px; padding:4px 10px}
  #ui .ui-ab-state{display:none}
  #ui.ui-touch .ui-res-auto{display:none}
  #ui .ui-tl{left:calc(var(--gut) + var(--safe-l)); top:calc(var(--collar-top) + var(--neat) + 6px); width:min(340px,calc(100vw - 420px))}
  #ui .ui-ticker-lines li:nth-child(n+2){display:none}
  #ui:not(.tutorial-active) .ui-point-rules{display:none}
  #ui .ui-top-center,#ui .ui-game-screen:has(.ui-bl.has-city) .ui-top-center,#ui .ui-game-screen:has(.ui-bl.has-sel) .ui-top-center,#ui .ui-game-screen:has(.ui-diplo:not([hidden])) .ui-top-center{top:calc(var(--collar-top) + var(--neat) + 40px); left:calc(var(--gut) + var(--safe-l) + 56px); right:auto; transform:none; width:min(400px,calc(100vw - 420px)); min-width:240px}
  #ui .ui-bl{top:calc(var(--collar-top) + var(--neat) + 6px); bottom:calc(var(--collar-bottom) + var(--neat) + 6px); right:calc(var(--gut) + var(--safe-r)); left:auto; width:min(330px,46vw); gap:6px}
  #ui .ui-bl>.panel{animation:none}
  #ui .ui-mini{display:none}
  #ui .ui-table,#ui .ui-menu-pop{max-height:calc(100dvh - var(--collar-top) - 20px); overflow:auto}
  /* A row above the bottom collar: a column does not fit between the collars. */
  #ui.ui-root .ui-touchbar{left:calc(var(--gut) + var(--safe-l)); right:auto; top:auto; bottom:calc(var(--collar-bottom) + var(--neat) + 8px); flex-direction:row}
  #ui.ui-root .ui-touchbar .ui-tool{width:44px; height:40px}
  #ui .ui-touchbar .ui-tool-l{display:none}
  #ui .ui-toasts{bottom:calc(var(--collar-bottom) + var(--neat) + 8px)}
  #ui .ui-tutorial{max-height:42vh}
  #ui .coach{font-size:12px!important; padding:4px 4px 4px 12px!important}
  #ui .ui-cartouche{display:none}
  #ui .ui-mesa{top:var(--gut); bottom:var(--gut); right:calc(var(--gut) + var(--safe-r)); width:min(360px,48vw); height:auto}
  #ui .ui-mesa-pins .ui-pin-lbl small{display:none}
  #ui .ui-end-card{position:relative; left:auto; top:auto; transform:none; max-height:calc(100dvh - 16px); overflow-y:auto; width:100%; padding:14px}
  #ui .ui-end-hd h1{font-size:40px}
  #ui .ui-end-count{position:sticky; top:-14px; z-index:1}
  #ui .ui-end-count-n{font-size:52px}
  #ui .ui-end{padding:8px; place-items:start center}
}
@media (max-width:600px){
  #ui .ui-home-col{width:calc(100% - 32px); padding-top:16px}
  #ui .ui-logo img{max-width:300px}
  #ui .ui-tag{font-size:17px}
  #ui .ui-next .ui-public-card{grid-template-columns:84px minmax(0,1fr) auto}
  #ui .ui-public-caption b{font-size:26px}
  #ui .ui-ledger .sc{font-size:9px; letter-spacing:.02em}
  #ui .ui-clock .t{font-size:26px}
  #ui .ui-wp b{font-size:13px}
  #ui .ui-staff{position:fixed; left:8px; right:8px; top:calc(var(--collar-top) + 14px); width:auto}
  #ui .ui-staff-btn kbd{display:none}
  #ui .ui-mini{display:none}
  #ui .ui-ticker-lines li:nth-child(n+2){display:none}
  #ui .ui-emblem-dialog{padding:14px}
  #ui .ui-emblem-choice{font-size:12px}
  #ui .ui-emblem-choice .ui-emblem{width:52px; height:52px}
  #ui .ui-end-card{position:relative; left:auto; top:auto; transform:none; max-height:calc(100dvh - 32px); overflow-y:auto; width:100%; padding:14px}
  #ui .ui-end th:nth-child(5),#ui .ui-end td:nth-child(5),#ui .ui-end th:nth-child(6),#ui .ui-end td:nth-child(6){display:none}
  #ui .ui-end-details{display:block}
  #ui .ui-end-hd h1{font-size:38px}
}
@media (max-height:820px){
  #ui .ui-ticker-lines li:nth-child(n+3){display:none}
}
/* ---------- Touch screens (root .ui-touch, set by ui/touch.js on coarse pointers) ---------- */
#ui.ui-touch{touch-action:pan-x pan-y}
#ui.ui-touch button,#ui.ui-touch summary,#ui.ui-touch [role=button]{touch-action:manipulation}
#ui.ui-touch kbd,#ui.ui-touch .ui-sec-hint{display:none}
#ui.ui-touch .b{min-height:40px; padding:9px 12px}
#ui.ui-touch .b.sm{min-height:36px; padding:7px 10px}
#ui.ui-touch .ui-x{width:36px; height:36px}
#ui.ui-touch .ui-seat{width:40px}
#ui.ui-touch .opt{padding:11px 2px}
#ui.ui-touch .ui-rtile{padding:8px 4px}
#ui.ui-touch .ui-ticker .al{padding:4px 0}
#ui.ui-touch .ui-ticker-log{padding:6px 0}
#ui.ui-touch .ui-input{font-size:16px}
#ui.ui-touch .ui-step .b{min-width:34px}
#ui.ui-touch .ui-tpl{height:36px}
#ui.ui-touch .ui-tpl .ui-x{width:30px; height:34px}
#ui.ui-touch .ui-mesa-bot-select .b{min-height:32px; padding:4px 5px}
#ui.ui-touch .ui-army{padding:10px 2px}
#ui.ui-touch .ui-fc{width:min(300px,calc(100vw - 16px))}
/* Pinned clear of the target and the sheet (ui/forecast.js), so the target stays tappable. */
#ui.ui-touch .ui-fc.pinned{pointer-events:auto; border-width:1.5px; box-shadow:3px 3px 0 var(--ink); z-index:8}
#ui .ui-fc-acts{display:flex; gap:6px; padding:0 14px 12px}
#ui .ui-fc-acts .b{flex:1; justify-content:center}
#ui .ui-five{margin-left:auto}
#ui.ui-touch .coach button{min-width:40px; min-height:40px}
#ui.ui-touch .ui-ticker-log{min-height:32px}
#ui.ui-touch summary{min-height:36px; display:flex; align-items:center; gap:6px}
#ui.ui-touch summary::-webkit-details-marker{display:none}
#ui.ui-touch summary::before{content:'▸'; font-size:11px; color:var(--ink-3)}
#ui.ui-touch details[open]>summary::before{content:'▾'}
/* The map toolbar. */
#ui .ui-touchbar{position:absolute; left:var(--gut); top:calc(var(--collar-top) + var(--neat) + 110px); z-index:3; display:flex; flex-direction:column; gap:4px; width:max-content; pointer-events:none}
#ui .ui-touchbar>*{pointer-events:auto}
#ui .ui-tool{font:inherit; width:52px; height:48px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; background:var(--sheet); color:var(--ink); border:1px solid var(--ink); box-shadow:2px 2px 0 var(--ink); border-radius:0; cursor:pointer; padding:0}
#ui .ui-tool-ic svg{display:block; width:20px; height:20px}
#ui .ui-tool-l{font:650 9px/1 var(--ui); letter-spacing:.02em}
#ui .ui-tool.on{background:var(--pencil); color:#fff; border-color:var(--pencil)}
#ui .ui-tool:active{transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ink)}
#ui .ui-game-screen:has(.ui-bl.expanded.has-city) .ui-touchbar,#ui .ui-game-screen:has(.ui-end:not([hidden])) .ui-touchbar{display:none}
/* The bottom sheet handle (portrait only). */
#ui .ui-sheet-handle{display:none}
@media (max-width:900px) and (min-height:501px){
  #ui.ui-touch .ui-bl:is(.has-sel,.has-city,:has(.ui-diplo:not([hidden]))) .ui-sheet-handle{display:flex; justify-content:center; align-items:center; flex:none; height:32px; width:100%; border:0; border-top:1.5px solid var(--ink); background:var(--sheet); pointer-events:auto; cursor:pointer}
  #ui .ui-sheet-handle i{display:block; width:44px; height:4px; border-radius:2px; background:var(--rule)}
  #ui.ui-touch .ui-bl>.panel{box-shadow:none; border-top:1px solid var(--rule)}
  #ui.ui-touch .ui-bl>.panel:first-of-type{border-top:0}
}
/* Help on long press. */
#ui .ui-tip{position:fixed; z-index:40; max-width:min(320px,calc(100vw - 16px)); padding:8px 12px; font-size:12.5px; line-height:1.4; white-space:pre-line; pointer-events:none}
@media (prefers-reduced-motion:reduce){
  #ui *{animation:none!important; transition:none!important}
}