:root{
  --gold:#e8c877; --gold-dim:#a8874a; --stone:#2b2723; --stone2:#3a342d;
  --parch:#d9c9a3; --ink:#1a1512;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#0b0d10;
  font-family:"Trebuchet MS",Verdana,sans-serif;color:#eee;user-select:none}
canvas#gl{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:default}
.hidden{display:none !important}

/* ---------- top bar ---------- */
#topbar{
  position:fixed;top:0;left:0;right:0;height:34px;display:flex;align-items:center;gap:14px;
  padding:0 12px;white-space:nowrap;
  background:linear-gradient(#463d31,#2a2520 60%,#1d1a16);
  border-bottom:2px solid #12100d;box-shadow:0 2px 8px #000a;font-size:14px;z-index:20
}
#topbar .res{display:flex;align-items:center;gap:5px;min-width:74px;
  text-shadow:0 1px 2px #000;font-weight:bold;color:var(--parch)}
#topbar .spacer{flex:1 1 0;min-width:6px}
#age-label{color:var(--gold);font-weight:bold;letter-spacing:1px;text-shadow:0 1px 2px #000;flex:0 0 auto}
#clock,#resign-btn,#net-status{flex:0 0 auto}
#clock{color:#bbb;font-variant-numeric:tabular-nums;min-width:52px;text-align:right}
.ico{width:16px;height:16px;display:inline-block;border-radius:3px;box-shadow:inset 0 0 0 1px #0006}
.ico.food{background:radial-gradient(circle at 35% 30%,#ff8f6b,#a3271b)}
.ico.wood{background:linear-gradient(#b0793c,#6a4520)}
.ico.gold{background:radial-gradient(circle at 35% 30%,#ffe37a,#b8860b)}
.ico.stone{background:linear-gradient(#c9c9c9,#6e6e6e)}
.ico.pop{background:linear-gradient(#8fd0ff,#2d6fa8)}
.ico.idle{background:linear-gradient(#f0d79a,#a07b3c)}
#topbar .res em{font-style:normal;font-size:11px;color:#9d937c;min-width:12px}
#topbar .res em.busy{color:#e8c877}
#idle-btn{display:flex;align-items:center;gap:5px;padding:2px 9px;font-size:13px;font-weight:bold;
  letter-spacing:0;border-radius:4px;border:1px solid #5c4a2c;background:linear-gradient(#453c30,#2a241d);
  color:#bdb29a;cursor:pointer}
#idle-btn:hover{border-color:var(--gold);color:#fff}
#idle-btn.has-idle{border-color:var(--gold);color:#ffe9b0;background:linear-gradient(#6d5a2f,#3d3320);
  animation:idlepulse 1.6s ease-in-out infinite}
@keyframes idlepulse{0%,100%{box-shadow:0 0 0 0 #e8c87700}50%{box-shadow:0 0 8px 1px #e8c87766}}
#net-status{font-size:12px;color:#9fd6ff;margin-right:10px}

/* ---------- bottom bar ---------- */
#bottombar{
  position:fixed;left:0;right:0;bottom:0;height:176px;display:flex;z-index:20;
  background:linear-gradient(#3b342b,#241f1a 40%,#171410);
  border-top:2px solid #12100d;box-shadow:0 -3px 12px #000a
}
#minimap-wrap{width:262px;padding:5px;border-right:2px solid #12100d;
  background:linear-gradient(#2a251f,#191612)}
#minimap{width:252px;height:164px;background:#0a0d0a;border:1px solid #0008;border-radius:2px;cursor:crosshair}

#selection{flex:1;padding:8px 12px;display:flex;flex-direction:column;gap:5px;min-width:0;
  overflow:hidden;border-right:2px solid #12100d}
#sel-main{display:flex;gap:10px;flex:none}
#sel-portrait{width:64px;height:64px;flex:none;border:2px solid #6b5a3c;border-radius:4px;
  background:radial-gradient(circle at 50% 30%,#5b5142,#241f19);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
#sel-portrait canvas,#sel-portrait img{image-rendering:auto}
#sel-info{flex:1;min-width:0;min-height:0;overflow:hidden}
#sel-name{font-weight:bold;color:var(--gold);font-size:16px;text-shadow:0 1px 2px #000}
#sel-stats{font-size:12px;color:#cfc4ad;margin-top:2px;line-height:1.5}
#sel-stats b{color:#fff}
#sel-bar{height:8px;background:#1c1815;border:1px solid #000;border-radius:2px;margin-top:5px;width:180px}
#sel-bar-fill{height:100%;background:linear-gradient(#7be07b,#2a8f2a);width:100%}
#sel-extra{font-size:12px;color:#9fd6ff;margin-top:4px;min-height:16px}
/* A wound, on the card: the figures it has cost, and what they used to be. */
#sel-extra.wounded{color:#e0705f}
#sel-stats .wounded{color:#e0705f}
#sel-stats .was{color:#8d8577;font-weight:normal;text-decoration:line-through}
/* what the blacksmith bought, called out rather than folded into the figure */
#sel-stats .bonus{color:#8fd18a;font-weight:bold}
/* the whole selection is listed; past a few rows the strip scrolls rather than
   quietly hiding the rest of your army */
/* flex:1 with min-height:0 is load bearing. A flex item defaults to
   min-height:auto, so it refuses to shrink below its content — the strip grew
   past the panel and the production queue, a later sibling, painted on top of
   it and swallowed every click on a portrait. */
#sel-group{display:flex;flex-wrap:wrap;gap:3px;flex:1 1 auto;min-height:28px;overflow-y:auto;
  align-content:flex-start;position:relative;z-index:1;
  scrollbar-width:thin;scrollbar-color:#5a4a32 transparent}
#sel-group::-webkit-scrollbar{width:6px}
#sel-group::-webkit-scrollbar-thumb{background:#5a4a32;border-radius:3px}
#sel-group::-webkit-scrollbar-track{background:transparent}
.mini-port{width:26px;height:26px;border:1px solid #6b5a3c;border-radius:3px;background:#241f19;
  overflow:hidden;cursor:pointer;position:relative}
.mini-port canvas,.mini-port img{width:100%;height:100%;object-fit:contain;image-rendering:auto}
/* The health strip on a portrait. A two-pixel sliver that was always green told
   you nothing: it could not show a man at a tenth of his health differently from
   one at full, which is the only question you ask of a row of portraits. It sits
   in a dark track now, it is tall enough to see, and it changes colour. */
.mini-port .hbt{position:absolute;left:1px;right:1px;bottom:1px;height:4px;
  background:#1a1512;border-radius:1px;overflow:hidden}
.mini-port .hb{height:100%;width:100%;background:#57b34a}
.mini-port{cursor:pointer}
#queue{display:flex;gap:3px;align-items:center;min-height:28px;flex:none}
.qslot{width:30px;height:30px;border:1px solid #6b5a3c;border-radius:3px;background:#241f19;
  position:relative;overflow:hidden;cursor:pointer}
.qslot canvas,.qslot img{width:100%;height:100%}
.qslot .prog{position:absolute;left:0;bottom:0;height:3px;background:var(--gold)}

#commands{width:264px;padding:8px;display:grid;grid-template-columns:repeat(5,1fr);
  grid-template-rows:repeat(3,1fr);gap:5px;align-content:start}
.cmd{position:relative;overflow:hidden;border:2px solid #6b5a3c;border-radius:4px;
  background:linear-gradient(#4a4034,#2a241d);
  cursor:pointer;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:0}
.cmd:hover{border-color:var(--gold);background:linear-gradient(#5e5140,#332c23)}
.cmd:active{transform:translateY(1px)}
.cmd.disabled{filter:grayscale(1) brightness(.55);cursor:not-allowed}
.cmd canvas,.cmd img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;pointer-events:none;z-index:1}
.cmd .key{position:absolute;top:1px;left:3px;z-index:2;font-size:10px;color:var(--gold);
  text-shadow:0 1px 2px #000,0 0 3px #000;
  text-shadow:0 1px 2px #000;pointer-events:none;font-weight:bold}
/* The icon is a replaced element filling the button; the caption and hotkey
   have to sit above it explicitly, with something solid behind them, or a pale
   icon swallows the text. */
.cmd .lbl{position:absolute;bottom:0;left:0;right:0;z-index:2;font-size:8px;letter-spacing:-.2px;
  text-align:center;background:rgba(0,0,0,.78);color:#f0e8d4;pointer-events:none;
  text-shadow:0 1px 2px #000,0 0 3px #000;padding:1px 0;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

#tooltip{position:fixed;z-index:40;max-width:280px;padding:8px 10px;pointer-events:none;
  background:linear-gradient(#efe3c4,#cdbe98);color:var(--ink);border:2px solid #5c4a2c;
  border-radius:4px;font-size:12px;box-shadow:0 4px 14px #000b;line-height:1.45}
#tooltip b{font-size:13px}
#tooltip .cost{margin-top:4px;color:#4a3a1e}

#alerts{position:fixed;left:50%;top:44px;transform:translateX(-50%);z-index:30;
  display:flex;flex-direction:column;gap:4px;align-items:center;pointer-events:none}
.alert{background:#000a;border:1px solid var(--gold-dim);color:var(--gold);
  padding:4px 12px;border-radius:3px;font-size:13px;animation:fade 2.6s forwards}
@keyframes fade{0%{opacity:0;transform:translateY(-6px)}12%{opacity:1;transform:none}
  75%{opacity:1}100%{opacity:0}}

/* ---------- menus ---------- */
#menu,#endscreen{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 35%,#2c2f38,#0a0b0e 70%)}
/* Nothing in a panel may be unreachable. The menu grew a lobby, and with it
   open the panel was taller than a laptop screen: the computer-player count and
   the host button were below the fold with no way to scroll to them. */
.panel{max-height:94vh;overflow-y:auto}
#helpbox{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;
  background:#0a0b0ecc}
#helpbox.hidden{display:none}
.help-panel{width:min(860px,94vw);text-align:left}
.help-panel .io-head{margin-bottom:10px}
.help-panel .help{border-top:none;padding-top:0;font-size:12.5px}

/* Wide rather than tall. There are five settings, four switches, four ways to
   start and a control reference: stacked in a 560px column that is far past the
   bottom of a laptop screen, so it is laid out in columns instead and nothing
   scrolls. */
.panel{width:min(940px,96vw);padding:20px 28px 18px;text-align:center;
  background:linear-gradient(#3a332a,#221d18);border:2px solid #6b5a3c;border-radius:8px;
  box-shadow:0 18px 60px #000c}
.panel h1{margin:0 0 2px;font-size:34px;letter-spacing:5px;color:var(--gold);
  text-shadow:0 3px 0 #000,0 0 24px #e8c87755}
.panel .sub{margin:0 0 12px;color:#a99b80;font-size:13px}
.opts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px 14px;
  margin:0 auto 14px;max-width:900px}
.opts label{font-size:11px;color:#c9bda4;display:flex;flex-direction:column;gap:3px;text-align:left}
.opts select{background:#191512;color:#e8dcc0;border:1px solid #6b5a3c;padding:4px 6px;
  border-radius:3px;font-size:12px;width:100%}
button{background:linear-gradient(#7a6231,#4a3a1c);color:#ffeab5;border:2px solid var(--gold-dim);
  padding:11px 30px;font-size:17px;letter-spacing:2px;border-radius:5px;cursor:pointer;font-weight:bold}
button:hover{background:linear-gradient(#95763a,#5c4823);border-color:var(--gold)}
.modes{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
button.alt{font-size:14px;padding:11px 18px;background:linear-gradient(#4a4436,#2b2720);color:#d9cca9}
button.alt:hover{background:linear-gradient(#5d5442,#38322a)}
#mp-box{margin-top:12px;padding:12px;border:1px solid #5c4a2c;border-radius:6px;background:#0006;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:14px;align-items:start;
  text-align:left}
#mp-box.hidden{display:none}
#mp-left{display:flex;flex-direction:column;gap:8px}
#mp-left button{width:100%}
#mp-msg{color:#e8dcc0;font-size:13px;min-height:18px;margin:8px 0}
#mp-msg code{color:var(--gold)}
#mp-bar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
#mp-name{width:160px;background:#191512;color:#e8dcc0;border:1px solid #6b5a3c;border-radius:3px;
  padding:8px 10px;font-size:14px}
#mp-bar button{padding:8px 16px;font-size:13px;letter-spacing:1px}
#mp-list-wrap{border:1px solid #4a4136;border-radius:4px;background:#0008;overflow:hidden}
#mp-list-head{display:flex;justify-content:space-between;padding:5px 10px;font-size:11px;
  letter-spacing:1px;text-transform:uppercase;color:#a99b80;background:#ffffff08}
#mp-list{max-height:172px;overflow-y:auto}
.mp-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border-top:1px solid #ffffff10;
  text-align:left}
.mp-row:hover{background:#ffffff0d}
.mp-who{color:#e8dcc0;font-weight:bold;font-size:13px;flex:none;min-width:120px}
.mp-meta{color:#9d9078;font-size:11px;flex:1}
.mp-row button{padding:5px 14px;font-size:12px;letter-spacing:1px}
.mp-empty{padding:16px 10px;color:#8d8270;font-size:12px}
.mp-hint{margin-top:10px;font-size:11px;color:#9d9078;line-height:1.5}
.mp-hint code{color:#e8c877}
.help{margin-top:14px;text-align:left;font-size:11.5px;color:#a99b80;
  border-top:1px solid #4a4136;padding-top:12px}
.help ul{margin:6px 0 0;padding-left:16px;line-height:1.55;
  columns:2;column-gap:26px}
.help li{break-inside:avoid;margin-bottom:2px}
.help b{color:#d8c79f}
#loading{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;
  background:#0b0d10;color:var(--gold);font-size:20px;letter-spacing:3px}

/* the stance the selection is currently set to */
.cmd.active {
  border-color: #d8b45c;
  box-shadow: inset 0 0 0 1px rgba(216,180,92,.55), 0 0 10px rgba(216,180,92,.28);
  background: linear-gradient(180deg, rgba(216,180,92,.20), rgba(216,180,92,.06));
}

.help .dim{color:#8d8577;font-size:.92em}

/* what a unit beats, what beats it, what to pair it with */
.matchup{margin-top:4px;font-size:11px;line-height:1.5;color:#a99b80}
.matchup.one-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.matchup .good{color:#8fd18a;font-weight:bold}
.matchup .bad{color:#e08b7b;font-weight:bold}
.matchup .pair{color:#d8b45c;font-weight:bold}

/* resign sits in the top bar and asks twice before it does anything */
#resign-btn{background:linear-gradient(#4a2a22,#2e1a15);border:1px solid #7a4a3a;
  color:#d8a496;font-size:11px;padding:2px 9px;border-radius:3px;cursor:pointer;
  letter-spacing:.5px;margin-right:10px}
#resign-btn:hover{background:linear-gradient(#63382c,#3d221b);color:#f0c6b8}
#resign-btn.armed{background:linear-gradient(#8f2a2a,#5a1717);border-color:#c85a4a;color:#ffd9cf}

.panel .hint{margin:8px 0 0;font-size:11px;color:#8d8577;line-height:1.45}
#sandbox-tag{position:fixed;left:50%;transform:translateX(-50%);top:44px;z-index:30;
  background:#000a;border:1px solid var(--gold-dim);color:var(--gold);font-size:11px;
  padding:2px 10px;border-radius:3px;letter-spacing:1px}

/* ---- the title frieze ---------------------------------------------------
   Two woven bands crawling in opposite directions, framing the panel top and
   bottom. One band centred behind the panel would simply be hidden by it. */
/* the middle is left mostly clear so the demonstration behind it shows through;
   the darkness gathers at the edges and under the panel */
#menu.woven{background:radial-gradient(ellipse at 50% 50%,
  rgba(12,6,4,.16),rgba(8,4,3,.70) 60%,rgba(6,3,2,.95) 92%)}
#menu.woven::before,#menu.woven::after{
  content:'';position:absolute;left:-6%;right:-6%;height:218px;z-index:0;pointer-events:none;
  background-image:var(--tapestry);background-repeat:repeat-x;background-size:auto 218px;
  opacity:.9;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
#menu.woven::before{top:0;animation:march 110s linear infinite}
#menu.woven::after{bottom:0;animation:march 143s linear infinite reverse}
@keyframes march{from{background-position:0 0}to{background-position:-2400px 0}}

#menu.woven .panel{position:relative;z-index:2;backdrop-filter:blur(2px);
  background:linear-gradient(rgba(30,16,12,.94),rgba(14,8,6,.96));
  border-color:#7a3a2c;box-shadow:0 18px 70px #000e,0 0 40px rgba(140,30,20,.25)}
#menu.woven .panel h1{color:#c8442e;
  text-shadow:0 3px 0 #1a0705,0 0 30px rgba(200,60,40,.6),0 0 8px rgba(255,140,110,.35)}
#menu.woven .panel .sub{color:#b09080}

/* ---- the research tree overlay ----------------------------------------- */
#tree{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  background:rgba(6,4,3,.93);padding:24px}
#tree.hidden{display:none}
.tree-inner{width:min(1180px,96vw);max-height:92vh;display:flex;flex-direction:column;
  background:linear-gradient(rgba(30,18,13,.96),rgba(14,9,7,.98));
  border:2px solid #7a3a2c;border-radius:8px;box-shadow:0 20px 70px #000e}
.tree-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;
  border-bottom:1px solid #4a2a20}
.tree-head h2{margin:0;font-size:20px;letter-spacing:4px;color:#c8442e;
  text-shadow:0 2px 0 #1a0705,0 0 20px rgba(200,60,40,.5)}
#tree-close{background:linear-gradient(#4a2a22,#2e1a15);border:1px solid #7a4a3a;color:#d8a496;
  font-size:11px;padding:4px 12px;border-radius:3px;cursor:pointer;letter-spacing:1px}
#tree-close:hover{color:#f0c6b8;background:linear-gradient(#63382c,#3d221b)}
#tree-body{overflow:auto;padding:8px 14px 18px}
.tree-row{display:grid;grid-template-columns:150px repeat(4,1fr);gap:8px;
  border-bottom:1px solid #2e1d16;padding:8px 0;align-items:start}
.tree-ages{border-bottom:2px solid #4a2a20;position:sticky;top:0;
  background:linear-gradient(rgba(30,18,13,.99),rgba(24,14,10,.97));z-index:1}
.tree-age{color:#c8a04a;font-size:12px;letter-spacing:2px;text-align:center;padding:4px 0}
.tree-label{font-size:12px;color:#d8c79f;padding-right:8px}
.tree-label b{display:block}
.tree-label span{color:#8d8577;font-size:10px}
.tree-cell{display:flex;flex-direction:column;gap:5px;min-width:0}
.tree-chip{border:1px solid #5a4a32;border-radius:4px;padding:4px 7px;background:#241d16;
  font-size:11px;line-height:1.35;color:#cfc4ad;min-width:0}
.tree-chip b{display:block;color:#e8d9b4}
.tree-chip span{color:#8d8577;font-size:10px}
.tree-chip i{display:block;color:#c8442e;font-size:10px;font-style:normal;margin-top:2px}
.tree-chip.unit{border-color:#4a5f7a;background:#1b232c}
.tree-chip.unit b{color:#a8c6e8}
.tree-chip.tech{border-color:#6b5a3c}
.tree-chip.chained{border-left:3px solid #c8442e}

.opts-toggles{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px 14px;margin:0 auto 14px;
  max-width:760px}
.tog{display:flex;align-items:center;gap:6px;font-size:12px;color:#b9ab90;cursor:pointer}
.tog input{accent-color:#c8442e;width:14px;height:14px;cursor:pointer}

/* ---- standings, above the command panel -------------------------------- */
#scores{position:fixed;right:8px;bottom:184px;z-index:25;pointer-events:none;
  background:rgba(10,7,5,.72);border:1px solid #4a3a2a;border-radius:4px;
  padding:5px 8px;font-size:11px;line-height:1.6;min-width:132px;
  box-shadow:0 4px 16px #0008}
#scores .row{display:flex;align-items:center;gap:6px;white-space:nowrap}
#scores .sw{width:9px;height:9px;border-radius:2px;border:1px solid #0008;flex:none}
#scores .nm{flex:1;color:#cfc4ad}
#scores .sc{color:#e8d9b4;font-variant-numeric:tabular-nums}
#scores .row.me .nm{color:var(--gold);font-weight:bold}
#scores .row.out .nm,#scores .row.out .sc{color:#6d655a;text-decoration:line-through}
#scores .row.out .sw{opacity:.35}

.mp-ai{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:12px;color:#b9ab90;margin:0}
.mp-ai select{background:#241f19;color:#e8d9b4;border:1px solid #6b5a3c;border-radius:3px;padding:2px 6px}

/* the lobby is the tallest thing in there, so its list gives ground first */
#mp-list{max-height:190px}


#mp-right{display:flex;flex-direction:column;gap:8px;min-width:0}
#mp-msg{font-size:11px;color:#c9bda4;min-height:14px}
#mp-name{width:100%;box-sizing:border-box}
.mp-ai select{flex:1;min-width:0}

#mp-teams{border:1px solid #4a4136;border-radius:4px;background:#0007;padding:6px 8px}
.mp-teams-head{font-size:11px;color:#c8a04a;letter-spacing:1px;margin-bottom:4px}
.mp-seat{display:flex;align-items:center;gap:6px;font-size:11px;color:#cfc4ad;margin:3px 0}
.mp-seat .sw{width:9px;height:9px;border-radius:2px;border:1px solid #0008;flex:none}
.mp-seat .who{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-seat select{background:#191512;color:#e8dcc0;border:1px solid #6b5a3c;border-radius:3px;
  font-size:11px;padding:1px 4px}

/* ---- options, from inside the game ------------------------------------- */
#io-open{position:fixed;right:8px;top:44px;z-index:26;width:26px;height:26px;padding:0;
  font-size:14px;line-height:1;background:linear-gradient(#4a4034,#2a241d);
  border:1px solid #6b5a3c;color:#e8d9b4;border-radius:4px;cursor:pointer}
#io-open:hover{border-color:var(--gold);color:#fff}
#ingame-opts{position:fixed;inset:0;z-index:70;display:flex;align-items:center;
  justify-content:center;background:rgba(6,4,3,.7)}
#ingame-opts.hidden{display:none}
.io-panel{min-width:260px;background:linear-gradient(rgba(30,18,13,.97),rgba(14,9,7,.98));
  border:2px solid #7a3a2c;border-radius:8px;padding:14px 18px;box-shadow:0 18px 60px #000d}
.io-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.io-head b{color:#c8442e;letter-spacing:3px;font-size:14px}
#io-close{background:linear-gradient(#4a2a22,#2e1a15);border:1px solid #7a4a3a;color:#d8a496;
  font-size:11px;padding:3px 10px;border-radius:3px;cursor:pointer}
.io-panel .tog{margin:6px 0}
.io-note{margin-top:10px;font-size:10px;color:#8d8577}

/* The formation strip: five shapes, drawn rather than named, because a picture
   of two ranks says what "Line" does faster than the word does. */
/* Its own row in the selection column, and it must not take space from the
   portrait strip below it: flex:none so it cannot grow, and #sel-group's
   min-height drops to one row so the column still fits the 176px bar. Without
   both, the strip pushed the portraits down and the queue painted over them. */
#formations{display:flex;gap:3px;flex:none;height:26px;position:relative;z-index:2}
#formations.hidden{display:none}
.form-btn{width:34px;height:26px;padding:0;border:1px solid #4b4438;background:#241f18;
  cursor:pointer;position:relative;border-radius:2px}
.form-btn:hover{border-color:#8d7a4e;background:#2f2820}
.form-btn.on{border-color:#d8b45a;background:#3a3020;box-shadow:0 0 5px rgba(216,180,90,.4)}
.form-btn canvas{display:block;image-rendering:pixelated}
.form-sync{width:auto;padding:0 7px;color:#c9bfa6;font:10px/24px system-ui,sans-serif;letter-spacing:.5px}
.form-sync.on{color:#f0dca0}

/* A research button and a production button are the same picture of the same
   soldier. The frame and the corner mark are what tells them apart at a glance,
   because reading the label is not a glance. */
.cmd.research{border-color:#5d7fa8;background:linear-gradient(#2b3444,#1b2029)}
.cmd.research:hover{border-color:#8fb6e0}
.cmd.research .uptag{position:absolute;top:2px;right:3px;font-size:9px;color:#9fd6ff;
  text-shadow:0 1px 2px #000;pointer-events:none}

/* ---------- options ---------- */
.io-tabs{display:flex;gap:4px;margin:6px 0 8px}
.io-tab{flex:1;padding:6px 4px;border:1px solid #4b4438;background:#241f18;color:#c9bfa6;
  font:11px/1.2 system-ui,sans-serif;letter-spacing:.5px;cursor:pointer;border-radius:2px}
.io-tab:hover{border-color:#8d7a4e}
.io-tab.on{border-color:#d8b45a;color:#f0dca0;background:#3a3020}
.io-body{max-height:52vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#5a4a32 transparent}
.io-body section{display:flex;flex-direction:column;gap:5px}
.sld{display:flex;align-items:center;gap:8px;font-size:12px;color:#c9bfa6}
.sld input{flex:1}
.io-btn{margin-top:8px;padding:5px 10px;border:1px solid #6b5a3c;background:#2a251d;
  color:#c9bfa6;font:11px system-ui,sans-serif;cursor:pointer;border-radius:2px}
.io-btn:hover{border-color:#d8b45a;color:#f0dca0}
/* the binding list: a group heading, then one row per action */
.kgroup{color:var(--gold);font-size:11px;letter-spacing:1px;margin:8px 0 3px;
  border-bottom:1px solid #3a3227;padding-bottom:2px}
.krow{display:flex;align-items:center;gap:8px;font-size:12px;color:#c9bfa6;padding:1px 0}
.krow span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kbtn{min-width:64px;padding:2px 6px;border:1px solid #4b4438;background:#241f18;
  color:#e6dcc4;font:11px monospace;cursor:pointer;border-radius:2px;text-align:center}
.kbtn:hover{border-color:#8d7a4e}
.kbtn.listening{border-color:#d8b45a;color:#f0dca0;background:#3a3020}
.kbtn.unbound{color:#6d6455}

/* The profile line under the name box: who you are, what you have played, and a
   way to throw it away. No password, because there is no account — the token
   that gets your seat back after a dropped line is the same one that remembers
   this, which is the whole design. */
#mp-profile{display:flex;align-items:center;gap:8px;margin:-2px 0 6px;font-size:11px;color:#9a917f}
#mp-forget{border:1px solid #4b4438;background:#241f18;color:#9a917f;font:10px system-ui,sans-serif;
  padding:2px 6px;border-radius:2px;cursor:pointer}
#mp-forget:hover{border-color:#8d7a4e;color:#c9bfa6}

/* The match log. The totals beside the name say how many were won; this says
   which ones, and it scrolls rather than pushing the lobby about — a profile
   with twenty-five matches in it must not be taller than one with none. */
#mp-log{max-height:104px;overflow-y:auto;margin:0 0 8px;border:1px solid #3a352b;
  border-radius:2px;background:#1c1813;font-size:10px;color:#8d8574}
#mp-log-empty,.mp-log-empty{padding:6px 7px;color:#6f695c;font-style:italic}
.mp-log-row{display:flex;gap:7px;align-items:baseline;padding:3px 7px;
  border-bottom:1px solid #262119;white-space:nowrap}
.mp-log-row:last-child{border-bottom:0}
.mp-log-row .won{color:#8db56a;font-weight:600;letter-spacing:.04em}
.mp-log-row .lost{color:#c2685c;font-weight:600;letter-spacing:.04em}
.mp-log-when{color:#7d7666;min-width:52px}
.mp-log-what{color:#6f695c;overflow:hidden;text-overflow:ellipsis}

/* Watching two machines fight, there is no "you" — so the top bar stops
   pretending seat zero is yours and lists every side instead. Clicking one
   follows it: the resource figures above belong to whoever is lit. */
/* Sixteen of these have to share the bar with everything else, so the row is
   allowed to shrink and scroll before anything to the right of it is pushed
   off the screen. */
#watch-seats{display:flex;gap:3px;align-items:center;margin-left:10px;
  flex:0 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
#watch-seats::-webkit-scrollbar{display:none}
#watch-seats.hidden{display:none}
.wseat{display:flex;align-items:center;gap:5px;padding:2px 7px;border:1px solid #4b4438;
  background:#241f18;border-radius:2px;cursor:pointer;font:11px system-ui,sans-serif;color:#c9bfa6}
.wseat:hover{border-color:#8d7a4e}
.wseat.on{border-color:#d8b45a;background:#3a3020;color:#f0dca0}
.wseat.dead{opacity:.4;text-decoration:line-through}
.wseat i{width:9px;height:9px;border-radius:2px;display:inline-block;border:1px solid #0006}
/* The "All" chip keeps its word whatever the crowd. */
.wseat.wall{padding:2px 8px;font-weight:bold}
/* Swatch-only chips, for a crowded game. */
.wseat:not(:has(span)){padding:3px 4px}
.wseat:not(:has(span)) i{width:11px;height:11px}

/* The watch button on a match-log row. A recording is the orders that were
   given, not a video, so this is a link back into the game rather than a file. */
.mp-log-play{margin-left:auto;border:1px solid #4b4438;background:#241f18;color:#9a917f;
  font:9px system-ui,sans-serif;letter-spacing:.05em;padding:1px 5px;border-radius:2px;cursor:pointer}
.mp-log-play:hover{border-color:#8d7a4e;color:#e8c877}

/* Which version you are playing. Two people have to agree about this before the
   relay will put them in a room, so it is stated rather than hidden in an About
   box — and it is a picker, because agreeing may mean going back to an older one. */
#mp-version{display:flex;align-items:center;gap:7px;margin:0 0 7px;font-size:11px;color:#9a917f}
#mp-version label{color:#7d7666}
#mp-version-pick{background:#241f18;color:#c9bfa6;border:1px solid #4b4438;border-radius:2px;
  font:11px system-ui,sans-serif;padding:1px 4px}
#mp-version-note{color:#6f695c;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}