/* Styling follows the running client.
 *
 * The client is a Flash stage of 1000x700 scaled up to fill the window, so its
 * whole interface grows with the browser rather than staying at a fixed pixel
 * size. That is why the original reads as large and generous. Everything here is
 * sized off --s, a scale factor main.js keeps in step with the viewport, so the
 * HUD scales the same way instead of sitting tiny in a corner.
 */

:root {
  --s: 1;                     /* stage scale, set from JS */
  --bg: #05090f;
  --panel: #060d16;
  --panel-2: #0b1622;
  --line: #1b4a63;
  --edge: #2c7ea8;
  --glow: rgba(60, 190, 240, 0.4);
  /* The client's own palette, counted across all 502 text fields in the 63
     screens: #dddddd body (38%), #ffffff emphasis (31%), #00ccff headings (7%),
     #cccccc secondary (6%), then #ff9900 / #cc0000 / #ffcc00 / #00cc00 as the
     status colours. Noticeably less blue-tinted than a hand-picked palette. */
  --text: #dddddd;
  --bright: #ffffff;
  --dim: #cccccc;
  --accent: #00ccff;
  --gold: #ffcc00;
  --good: #00cc00;
  --bad: #cc0000;
  --warn: #ff9900;
  --bar-bg: linear-gradient(#0e1c2a, #060d16 55%, #0b1724);
}

* { box-sizing: border-box; }
/* `hidden` must win over any class that sets display (grid, flex). */
[hidden] { display: none !important; }

/* The client is Arial throughout -- ArialMT on 318 of ~500 text fields, Arial
   Narrow Bold on 121, Arial Bold on 61 -- and 12px on 400 of them, with
   lineSpacing 2.0, so leading is 14/12 ≈ 1.17.
   The extracted TTFs are Monotype Arial and are deliberately not embedded;
   it is a system font, and the stack below resolves to the same faces. */
html, body {
  margin: 0; height: 100%;
  background: var(--bg);
  color: var(--text);
  font: calc(var(--s) * 12px)/1.17 Arial, "Helvetica Neue", Helvetica, sans-serif;
  overflow: hidden;
  user-select: none;
}

h1, h2, h3, .ruler-name, .panel-title, .place-step {
  font-family: "Arial Narrow", Arial, sans-serif;
  font-weight: bold;
  letter-spacing: .03em;
}

/* Every button in the client is the same skinned component: fl.controls.Button
   wearing Button_upSkin, a bevelled teal plate. Applied as a 9-slice so one
   piece of art covers every button size, the way the original's scaling grid
   did. Hover and press are brightness shifts rather than a different gradient,
   because the skin carries the shading. */
button {
  font: inherit;
  color: var(--text);
  background: none;
  border-style: solid;
  border-width: calc(var(--s) * 8px) calc(var(--s) * 10px);
  border-image: url('../assets/client/Button_upSkin.png') 8 10 fill stretch;
  border-radius: 0;
  padding: calc(var(--s) * 1px) calc(var(--s) * 4px);
  cursor: pointer;
}
button:hover:not(:disabled) { filter: brightness(1.3); }
button:active:not(:disabled) { filter: brightness(0.85); }
button:disabled { opacity: .35; cursor: default; }
button.small { padding: calc(var(--s) * 3px) calc(var(--s) * 7px); font-size: calc(var(--s) * 12px); }
button.wide { display: block; width: 100%; margin-top: calc(var(--s) * 5px); text-align: left; }
button.primary { background: linear-gradient(#12557d, #0c3a57); border-color: var(--edge); }
button.primary:hover:not(:disabled) { background: linear-gradient(#1a6f9f, #10496d); }
button.danger { background: linear-gradient(#5a2020, #3a1414); border-color: #8a3636; }
button.danger:hover:not(:disabled) { background: linear-gradient(#742a2a, #4c1a1a); }
button.chip {
  padding: calc(var(--s) * 3px) calc(var(--s) * 8px);
  font-size: calc(var(--s) * 12px); border-radius: 2px;
  display: inline-flex; align-items: center;
}
button.chip.on { background: linear-gradient(#1a6f9f, #12557d); border-color: var(--accent); color: #eaf9ff; }

/* the round buttons at the ends of the client's top bar */
button.round {
  width: calc(var(--s) * 30px); height: calc(var(--s) * 30px);
  padding: 0; border-radius: 50%;
  display: grid; place-items: center;
  font-size: calc(var(--s) * 13px); font-weight: bold;
  background: radial-gradient(circle at 35% 30%, #1a4d6d, #081420);
  border: 1px solid var(--edge);
  color: var(--accent);
  box-shadow: inset 0 0 calc(var(--s) * 8px) rgba(40,150,200,.3);
}
button.round:hover:not(:disabled) { box-shadow: 0 0 calc(var(--s) * 10px) var(--glow); color: #fff; }
button.round.danger { border-color: #a34040; color: #ff8a7d; background: radial-gradient(circle at 35% 30%, #6a2626, #200a0a); }
button.small-round { width: calc(var(--s) * 22px); height: calc(var(--s) * 22px); font-size: calc(var(--s) * 12px); }

button.gold-btn {
  background: linear-gradient(#43a047, #1b5e20);
  border: 1px solid #66bb6a; color: #eaffec;
  font-weight: bold; font-size: calc(var(--s) * 14px);
  padding: calc(var(--s) * 6px) calc(var(--s) * 18px);
  border-radius: calc(var(--s) * 4px);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 calc(var(--s) * 8px) rgba(80,220,110,.25);
}
button.gold-btn:hover:not(:disabled) { background: linear-gradient(#55b95a, #227528); }

/* TextInput_upSkin is a black field with a #404040 edge; ComboBox_upSkin is
   #08475b with a #274952 edge. Both sampled from the extracted skins. */
input[type=number], input[type=text], textarea {
  font: inherit; color: var(--text);
  background: #000000; border: 1px solid #404040; border-radius: 0;
  padding: calc(var(--s) * 3px) calc(var(--s) * 6px);
}
select {
  font: inherit; color: var(--text);
  background: #08475b; border: 1px solid #274952; border-radius: 0;
  padding: calc(var(--s) * 2px) calc(var(--s) * 5px);
}
input[type=number] { width: calc(var(--s) * 62px); }

/* --- boot ---------------------------------------------------------------- */
#boot {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at center, #0d2033, #04080e 70%);
  transition: opacity .5s;
}
#boot.gone { opacity: 0; pointer-events: none; }
.boot-inner { text-align: center; }
.boot-inner h1 {
  margin: 0 0 10px; font-size: calc(var(--s) * 32px); letter-spacing: .18em;
  text-transform: uppercase; font-weight: normal; color: var(--gold);
}
#boot-msg { color: var(--dim); }

/* --- map fills everything; the client's screens sit on top --------------- */
#app { position: relative; width: 100%; height: 100%; overflow: hidden; }
#map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }

/* Sampled from the client's own panel art (ScreenChat, Symbol 1120): the
   interior is black at 70% and the edge is #00346c. No glow, no inset shading,
   no rounding -- the original's on-map panels are deliberately plain so the map
   reads through them. */
.screen {
  position: absolute;
  background: rgba(0, 0, 0, .70);
  border: 1px solid #00346c;
  border-radius: 0;
  box-shadow: none;
}

/* --- the top bar --------------------------------------------------------- */
/* The original bar (ScreenTopTopCenter, Symbol 167) is 2448x82: a hexagonal
   honeycomb strip running the full width with a raised, brass-edged readout
   panel set into the middle where the four resources sit. Split into a
   repeatable tile and the panel so it rebuilds at any viewport width without
   stretching the bevel or repeating the panel. */
#topbar {
  position: absolute; top: 0; left: 0; right: 0;
  height: calc(var(--s) * 41px);
  display: flex; align-items: center;
  gap: calc(var(--s) * 14px); padding: 0 calc(var(--s) * 10px);
  background: url('../assets/client/topbar_tile.png') 0 0 / auto 100% repeat-x;
  border: 0;
  box-shadow: 0 2px calc(var(--s) * 14px) rgba(0,0,0,.85);
  z-index: 40;
}
.bar-group { display: flex; align-items: center; gap: calc(var(--s) * 9px); flex: 0 0 auto; }
/* The readout between them is absolutely positioned, so the right-hand group
   needs to be pushed to the edge itself rather than relying on it to fill. */
#bar-right { margin-left: auto; }
/* ScreenTopTopLeft, Symbol 163 at the stage's top left. */
#tokens {
  position: absolute; left: 0; top: 0;
  width: calc(var(--s) * 253px); height: calc(var(--s) * 36px);
}
#tokens > * { position: absolute; }
/* mcMyTokensTooltip: Symbol 42 at 1.245 x 0.657, 163 x 35.5 -- the click
   area over both balances that opens the Tokens tab. */
#tok-hit { left: 0; top: 0; width: calc(var(--s) * 163px); height: calc(var(--s) * 35.5px); cursor: pointer; z-index: 1; }
/* mcATokenPlaceHolder / mcBTokenPlaceHolder: 25 x 25 at (4.4, 3.5) / (82.4, 3.5). */
#tok-a-icon, #tok-b-icon { top: calc(var(--s) * 3.5px); width: calc(var(--s) * 25px); height: calc(var(--s) * 25px); }
#tok-a-icon { left: calc(var(--s) * 4.4px); }
#tok-b-icon { left: calc(var(--s) * 82.4px); }
/* txtATokens (33.3, 6.9) / txtBTokens (111, 6.9): Arial Bold 14 #ff9900 with
   a black glow. */
#tok-a, #tok-b {
  top: calc(var(--s) * 6.9px);
  font: bold calc(var(--s) * 14px)/1.2 Arial, sans-serif; color: #ff9900;
  text-shadow: 0 0 calc(var(--s) * 3px) #000, 0 0 calc(var(--s) * 3px) #000;
  white-space: nowrap; font-variant-numeric: normal;
}
#tok-a { left: calc(var(--s) * 33.3px); width: calc(var(--s) * 52.15px); }
#tok-b { left: calc(var(--s) * 111px); width: calc(var(--s) * 54.55px); }
/* btnBuyTokens: a BDButton (180 x 50) at (163, 3.75), scaled 0.497, with
   the darkGreen background and txtRegularBlack -- Arial Bold 25 there, 12.4
   here. */
#tokens button#btn-get-tokens {
  left: calc(var(--s) * 163px); top: calc(var(--s) * 3.75px);
  width: calc(var(--s) * 89.45px); height: calc(var(--s) * 24.85px);
  background-image: url('../assets/client/bdbutton_darkGreen.png');
  background-size: 100% 100%;
  display: flex; align-items: center; justify-content: center;
}
#btn-get-tokens .bd-button-text { font-size: calc(var(--s) * 12.4px); }

/* The readout sits inside the bar's raised centre panel. In the original the
   four values are pitched ~103px apart (metal 848.8, oil 951.8, energy 1053.8,
   workers 1158.3 across the 2448-wide bar). */
/* The readout must be a fixed box that the panel art fills exactly, otherwise
   the art draws at its own aspect while the values spread across the flex
   space and the two can never line up. Four values at the client's 103px pitch
   = 412; the art is stretched to that box, so they stay registered at every
   viewport size. `margin: auto` keeps the whole assembly centred in the bar. */
/* Absolutely centred on the bar rather than centred in the leftover flex space:
   the token group on the left and the tick group on the right are different
   widths, so `margin: auto` lands it off-centre by however much they differ.
   ScreenTopTopCenter is repositioned to the stage centre at runtime by
   StageManager.repositionMainInterfaceScreens, so centre is the correct anchor. */
#res-bar {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 0; bottom: 0;
  display: flex; gap: 0; align-items: center;
  width: calc(var(--s) * 412px);
  background: url('../assets/client/topbar_panel.png') 0 0 / 100% 100% no-repeat;
}
.res {
  display: flex; align-items: center; justify-content: center;
  gap: calc(var(--s) * 5px);
  width: calc(var(--s) * 103px); padding: 0;
}
.res-icon { width: calc(var(--s) * 22px); height: calc(var(--s) * 22px); object-fit: contain; flex: 0 0 auto; }
/* txtMetal / txtOil / txtEnergy / txtWorkers are #ff9900 at size 16 in the
   client -- orange, not white. */
.res-value {
  font-size: calc(var(--s) * 16px); font-weight: bold;
  font-variant-numeric: tabular-nums; color: #ff9900;
}
/* metalMaxed and friends: _textColorWarning, 0xcc0000 (ScreenTopTopCenter.as:192-209). */
.res.full .res-value { color: #cc0000; }
.res { position: relative; }
/* mcMovingText_* (Symbol 176): txtAmount, Arial Bold 18, at +2,+2 in its clip;
   _textColorGreen 0x00cc00 for a gain, _textColorWarning 0xcc0000 for a loss. */
.res-float {
  position: absolute; margin: calc(var(--s) * 2px) 0 0 calc(var(--s) * 2px);
  font: bold calc(var(--s) * 18px) Arial, sans-serif; line-height: 1;
  color: #cc0000; white-space: nowrap; pointer-events: none; z-index: 5;
}
.res-float.up { color: #00cc00; }

#tick-box { display: flex; align-items: center; gap: calc(var(--s) * 7px); }
#tick-icon { width: calc(var(--s) * 20px); height: calc(var(--s) * 20px); object-fit: contain; }
/* mcTicksPaused: sprite 144's pause sign at 0.2126 -- 21 x 23 over txtTimeLeft. */
#tick-paused { width: calc(var(--s) * 20.8px); height: calc(var(--s) * 22.9px); object-fit: contain; }
#tick-paused[hidden] { display: none; }
/* ScreenTopTopRight's btn_refreshClient / btn_fullScreenMode / btn_windowMode /
   btn_logout: 30 x 30 on the ButtonMainUIRound skins, a 16px icon each, 32.5
   apart (173.5 / 206 / 238.6). */
.ttr-btn { width: calc(var(--s) * 30px); height: calc(var(--s) * 30px); padding: 0; border: 0;
  margin-left: calc(var(--s) * 2.5px); display: grid; place-items: center; cursor: pointer;
  background: url('../assets/client/ButtonMainUIRound_upSkin.png') 0 0 / 100% 100% no-repeat; }
.ttr-btn:hover { background-image: url('../assets/client/ButtonMainUIRound_overSkin.png'); }
.ttr-btn:active { background-image: url('../assets/client/ButtonMainUIRound_downSkin.png'); }
.ttr-btn[hidden] { display: none; }
.ttr-btn img { width: calc(var(--s) * 16px); height: calc(var(--s) * 16px); pointer-events: none; }
#dev-clock[hidden] { display: none; }
#tick-value { font-size: calc(var(--s) * 17px); font-weight: bold; font-variant-numeric: tabular-nums; color: #eaf6ff; }
#tick-meter {
  width: calc(var(--s) * 58px); height: calc(var(--s) * 5px);
  background: #040b12; border-radius: 3px; overflow: hidden; border: 1px solid var(--line);
}
#tickbar { height: 100%; width: 0; background: linear-gradient(90deg, #1a6f9f, var(--accent)); }
#speed { font-size: calc(var(--s) * 12px); color: var(--dim); width: calc(var(--s) * 24px); text-align: right; }

/* --- interface buttons, top left ----------------------------------------
   ScreenTopLeft puts six screens in a three-wide block at x 7/68/128 over rows
   y 45 and 106, with a narrower column at x 190: jump to location, sat scan and
   build outpost. The side column's buttons are smaller, as they are there. */
/* In the original these buttons float straight over the map -- ScreenTopLeft's
   mcBackground (Symbol 137) is a plain rectangle used as a hit area, not
   artwork, so there is no panel behind them. */
#button-block {
  /* btn_screenMessages, the block's first button, is at (6.8, 44.8); the side
     column at x 190.3 is 5.9 clear of the grid's right edge (6.8 + 177.6). */
  top: calc(var(--s) * 44.8px); left: calc(var(--s) * 6.8px);
  padding: 0;
  display: flex; align-items: flex-start; gap: calc(var(--s) * 5.9px);
  background: none; border: 0; box-shadow: none; border-radius: 0;
}
/* Geometry taken from the original ScreenTopLeft timeline (char 229):
   the six screen buttons sit at x 6.8 / 67.6 / 128.4 over rows y 44.8 and
   105.9 at 56x56, so the pitch is 60.8 and the gap is 4.8. The side column is
   at x 190.3, 36x36, rows 44.8 / 85.4 / 126.4 -- pitch 40.6, gap 4.6. */
#button-grid {
  display: grid;
  grid-template-columns: repeat(3, calc(var(--s) * 56px));
  /* columns pitch 60.8 (gap 4.8), rows 44.8 -> 105.9 (gap 5.1) */
  column-gap: calc(var(--s) * 4.8px); row-gap: calc(var(--s) * 5.1px);
}
#button-side {
  display: grid;
  grid-template-columns: calc(var(--s) * 36px);
  gap: calc(var(--s) * 4.6px);
}
#button-side .iface-btn {
  width: calc(var(--s) * 36px); height: calc(var(--s) * 36px);
  padding: calc(var(--s) * 7px);             /* a 22px icon (:236-250) */
}
/* ScreenTopLeft's admin column: 50x50 at x 411.8, each at its own y. */
#button-admin {
  top: 0; left: calc(var(--s) * 411.8px); width: calc(var(--s) * 50px); height: 0;
  padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible;
}
#button-admin .iface-btn {
  position: absolute; left: 0;
  width: calc(var(--s) * 50px); height: calc(var(--s) * 50px);
  padding: calc(var(--s) * 8px);             /* a 34px icon (:273) */
}
.iface-btn {
  width: calc(var(--s) * 56px); height: calc(var(--s) * 56px);
  padding: calc(var(--s) * 11px);            /* a 34px icon in 56 (:190-229) */
  display: grid; place-items: center;
  /* ScreenTopLeft skins these ButtonMainUI (:152-156): the dark square with the
     blue bevel. Button_upSkin, the teal slab this used, is the stock component
     skin the client replaces on every one of them. */
  background: url('../assets/client/ButtonMainUI_upSkin.png') 0 0 / 100% 100% no-repeat;
  border: 0; border-radius: calc(var(--s) * 3px);
  cursor: pointer;
  box-shadow: none;
}
.iface-btn:hover { background-image: url('../assets/client/ButtonMainUI_overSkin.png'); }
.iface-btn:active { background-image: url('../assets/client/ButtonMainUI_downSkin.png'); }
.iface-btn img { width: 100%; height: 100%; object-fit: contain; }

/* markButton("radar_myIncoming") / ("radar_myAllianceIncoming") -- an
   addAnimatedGlowEffect on btn_screenRadar alone (ScreenTopLeft.as:664-704).
   Both filters are INNER glows at alpha 0.3, blur 35, so they pool inside the
   button's edge rather than haloing it:
     _glow_innerRed    0xFF0000, strength 7   something is coming for me
     _glow_innerOrange 0xFF7800, strength 9   only for my alliance
   The animation is a slow pulse (addAnimatedGlowEffect's 0.01 step). */
@keyframes iface-glow { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.iface-btn.alert-me, .iface-btn.alert-alliance { position: relative; }
.iface-btn.alert-me::after, .iface-btn.alert-alliance::after {
  content: ''; position: absolute; inset: 0;
  border-radius: calc(var(--s) * 3px);
  pointer-events: none;
  animation: iface-glow 1.6s ease-in-out infinite;
}
.iface-btn.alert-me::after {
  box-shadow: inset 0 0 calc(var(--s) * 12px) calc(var(--s) * 4px) rgba(255, 0, 0, 0.75);
}
.iface-btn.alert-alliance::after {
  box-shadow: inset 0 0 calc(var(--s) * 12px) calc(var(--s) * 4px) rgba(255, 120, 0, 0.75);
}

/* --- ScreenTopLeft: panel, avatar, rank and boost ----------------------- */
/* Symbol 229 at the stage's top left. Its art is the hex panel and brass plate
   of Symbol 210 at (0, 38.15), with Symbol 212 over it: the avatar plate
   (Bitmap 206, 243.65 / 39.9) and the green Boost slab (Bitmap 211 drawn
   243.35..362.9 x 126..187.8). Those are flattened into topleft_bg.png at
   stage coordinates. Everything below is placed at its XFL position. */
#screen-topleft {
  position: absolute; left: 0; top: 0;
  width: calc(var(--s) * 441px); height: calc(var(--s) * 236px);
  pointer-events: none;
}
#screen-topleft > * { position: absolute; display: block; }
#screen-topleft > [hidden] { display: none; }
#tl-bg { left: 0; top: 0; width: calc(var(--s) * 441px); height: calc(var(--s) * 199px); }
/* mcDiscountBackground: Symbol 204 at (120.8, 185.2), its art from x 105. */
#tl-discount-bg {
  left: calc(var(--s) * 225.8px); top: calc(var(--s) * 185.2px);
  width: calc(var(--s) * 150px); height: calc(var(--s) * 49px);
}
/* mcAvatarHolder at (257.6, 54.3), 60x60; clicking it toggles the profile. */
.avatar { width: calc(var(--s) * 60px); height: calc(var(--s) * 60px); }
#screen-topleft #avatar {
  left: calc(var(--s) * 257.6px); top: calc(var(--s) * 54.3px);
  pointer-events: auto; cursor: pointer; overflow: hidden; line-height: 0;
}
/* mcAvatarFrame: Symbol 215 at (254.8, 51.65), shown only for nAvatarSkin 1
   or an admin (DataManager.refreshAvatarFrame). */
#tl-avatar-frame {
  left: calc(var(--s) * 254.8px); top: calc(var(--s) * 51.65px);
  width: calc(var(--s) * 66px); height: calc(var(--s) * 65px);
  background: url('../assets/client/sprite_215.png') 0 0 / 100% 100% no-repeat;
}
/* txtSetAvatar: (260, 70) 54.25 x 30, ArialMT 9.8 white, centred. */
#tl-set-avatar {
  left: calc(var(--s) * 260px); top: calc(var(--s) * 70px);
  width: calc(var(--s) * 54.25px); height: calc(var(--s) * 30px);
  font: calc(var(--s) * 9.8px)/1.2 Arial, sans-serif; color: #ffffff; text-align: center;
}
/* The rank icon fills mcRankHolder, (331.15, 66.85) 34.7 square; the tooltip
   area mcRankToolTip is (328.6, 64.3) 39.9 square. */
#rank-icon {
  left: calc(var(--s) * 331.15px); top: calc(var(--s) * 66.85px);
  width: calc(var(--s) * 34.7px); height: calc(var(--s) * 34.7px); object-fit: fill;
}
#tl-rank-tip {
  left: calc(var(--s) * 328.6px); top: calc(var(--s) * 64.3px);
  width: calc(var(--s) * 39.9px); height: calc(var(--s) * 39.9px); pointer-events: auto;
}
/* Symbol 54: the black strip behind the bar, (369.9, 51.5) 12 x 114. */
#tl-bar-back {
  left: calc(var(--s) * 369.9px); top: calc(var(--s) * 51.5px);
  width: calc(var(--s) * 12px); height: calc(var(--s) * 114px); background: #000000;
}
/* mcBoostBar: a BDBar turned upright over the same strip, a #333333 frame
   on black, filled from the bottom with "gold" to SERVER_GLOBAL_BOOST_RATIO. */
#boost-bar {
  left: calc(var(--s) * 369.9px); top: calc(var(--s) * 51.5px);
  width: calc(var(--s) * 12px); height: calc(var(--s) * 114px);
  box-sizing: border-box; border: 1px solid #333333; background: #000000;
  display: flex; align-items: flex-end; pointer-events: auto;
}
/* _glow_innerTutorial on mcBoostBar: an INNER glow, 0xE2FB04, blur 35 and
   strength 7 -- on a 12px bar it floods the whole bar -- at the alpha
   activateBoostBarGlow animates (--glow-a). */
#boost-bar.glow::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 calc(var(--s) * 6px) calc(var(--s) * 3px) rgba(226, 251, 4, var(--glow-a, 0));
}
#boost-fill {
  width: 100%; height: 0;
  background: linear-gradient(90deg, #bd7f02, #f1bc00 20%, #fffd00 50%, #eeb800 80%, #b77802);
}
/* The Boost button: txtRegisterBoost (256.05, 148) 91.7 wide, Arial Bold 16
   white with a black glow; under it the down / disabled / over overlays
   (Symbols 222, 224) and on top the hit area (254.45, 135.7) 96.8 x 41.1. */
#tl-boost-text {
  left: calc(var(--s) * 256.05px); top: calc(var(--s) * 148px);
  width: calc(var(--s) * 91.7px); height: calc(var(--s) * 18.25px);
  font: bold calc(var(--s) * 16px)/1.1 Arial, sans-serif; color: #ffffff; text-align: center;
  text-shadow: 0 0 calc(var(--s) * 4px) #000, 0 0 calc(var(--s) * 4px) #000;
}
#tl-boost-over {
  left: calc(var(--s) * 254.95px); top: calc(var(--s) * 136.25px);
  width: calc(var(--s) * 96.4px); height: calc(var(--s) * 41.3px);
}
#tl-boost-over.down {
  left: calc(var(--s) * 254.75px); top: calc(var(--s) * 135.55px);
  width: calc(var(--s) * 96.55px); height: calc(var(--s) * 42.05px);
}
#tl-boost-disabled {
  left: calc(var(--s) * 253.85px); top: calc(var(--s) * 135.5px);
  width: calc(var(--s) * 97.8px); height: calc(var(--s) * 42.05px);
}
#btn-boost {
  left: calc(var(--s) * 254.45px); top: calc(var(--s) * 135.7px);
  width: calc(var(--s) * 96.8px); height: calc(var(--s) * 41.1px);
  pointer-events: auto; cursor: pointer;
}
#btn-boost.off { pointer-events: none; cursor: default; }
/* txtDiscount: (244, 203.35) 115.5 x 16, Arial Bold 13 white, centred, with
   a green glow. */
#tl-discount {
  left: calc(var(--s) * 244px); top: calc(var(--s) * 203.35px);
  width: calc(var(--s) * 115.5px); height: calc(var(--s) * 16px);
  font: bold calc(var(--s) * 13px)/1.15 Arial, sans-serif; color: #ffffff; text-align: center;
  text-shadow: 0 0 calc(var(--s) * 5px) #00ff00, 0 0 calc(var(--s) * 5px) #00ff00,
    0 0 calc(var(--s) * 3px) #00ff00;
}

/* --- ScreenTopRight: minimap ------------------------------------------- */
/* ScreenTopRight is a single piece of chrome (Symbol 180, 332x181): brass
   bevel, cable run at the top left, the map screen inset on the right, and a
   hex strip along the bottom that the button row sits on. The zoom column
   (btnPlus 46.7,43.4 / btnMinus 46.7,133.6, slider between) lives in the brass
   gutter; the eight 30.5px buttons run along y 181.2 pitched 32.2 apart. */
#screen-minimap {
  /* ScreenTopRight is right/top aligned by its 320.2-wide mcBackground
     (Symbol 137 at 1.601), and the frame art is placed at (-9.05, 38.7) inside
     it -- so the 332px frame starts 329.25 from the right edge, runs 2.75 past
     it, and sits 38.7 down. */
  top: calc(var(--s) * 38.7px); right: calc(var(--s) * -2.75px);
  width: calc(var(--s) * 332px); height: calc(var(--s) * 215px);
  padding: 0;
  background: url('../assets/client/sprite_180.png') 0 0 / calc(var(--s) * 332px) calc(var(--s) * 181px) no-repeat;
  border: 0; box-shadow: none; border-radius: 0;
}
.mini-wrap { position: relative; height: calc(var(--s) * 181px); }
/* The frame art is placed at screen x -9.1, y 38.7, so a control the client puts
   at screen (46.7, 43.4) lands at (55.8, 4.7) inside this container. btnPlus and
   btnMinus are 26.9 square at y 43.4 and 133.6, so the column runs 4.7 -> 121.8. */
/* btnPlus (46.7, 43.4) and btnMinus (46.7, 133.6) are 26.9 x 26.9 round
   ButtonMainUIRound buttons with a 12px Grp_plus / Grp_minus; mapSlider is a
   Slider turned upright (b 0.584, c -0.898), 46.7 long, from y 78.75 to 125.4
   with its right edge at x 61.95. All less (-9.05, 38.7) for the frame. */
.zoom-col { position: absolute; inset: 0; pointer-events: none; }
.zoom-col > * { pointer-events: auto; }
#zoom-in, #zoom-out {
  position: absolute; left: calc(var(--s) * 55.75px);
  width: calc(var(--s) * 26.9px); height: calc(var(--s) * 26.9px);
  padding: 0; border: 0; border-radius: 50%; font-size: 0; color: transparent;
  background: url('../assets/client/ButtonMainUIRound_upSkin.png') center / 100% 100% no-repeat;
  box-shadow: none;
}
#zoom-in { top: calc(var(--s) * 4.7px); }
#zoom-out { top: calc(var(--s) * 94.9px); }
#zoom-in::after, #zoom-out::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: calc(var(--s) * 12px); height: calc(var(--s) * 12px);
  transform: translate(-50%, -50%);
  background: url('../assets/ui/plus.png') center / contain no-repeat;
}
#zoom-out::after { background-image: url('../assets/ui/minus.png'); }
#zoom-in:hover, #zoom-out:hover { background-image: url('../assets/client/ButtonMainUIRound_overSkin.png'); }
#zoom-slider {
  position: absolute; margin: 0;
  left: calc(var(--s) * 60.2px); top: calc(var(--s) * 40.05px);
  width: calc(var(--s) * 10.8px); height: calc(var(--s) * 46.65px);
  writing-mode: vertical-lr; direction: ltr;   /* value 0 (all the way in) at the top */
  accent-color: var(--accent); cursor: pointer;
}
/* The screen inset, measured off the art rather than eyeballed: scanning
   sprite_180 the brass gutter ends and black begins at x 86, and the black runs
   to the right edge at 331 and down to y 135 where the hex strip starts. */
/* mcMiniMapSizer: Symbol 42 (Symbol 41, 50x50, at 2.617 x 1.08) placed at
   1.794 x 2.173 -> 234.75 x 117.36 at (85.5, 41.05), which is (94.55, 2.35)
   inside the frame. The old 245 x 133 at x 86 ran over the brass gutter. */
#minimap {
  position: absolute; left: calc(var(--s) * 94.55px); top: calc(var(--s) * 2.35px);
  display: block; width: calc(var(--s) * 234.75px); height: calc(var(--s) * 117.36px);
  border: 0; background: #04121a; cursor: crosshair;
}
/* The frame art starts at screen x -9.1, so a button at screen x 62.1 lands at
   71.2 inside this container. Single-row by construction: auto-flow column
   means adding a button can never wrap it off the hex strip. */
/* Each of the eight slots is placed at its own x by buildButtonRow; the row
   itself is just the strip at y 181.2 - 38.7 = 142.5. */
#button-row { position: absolute; left: 0; top: calc(var(--s) * 142.5px); width: 100%; height: 0; }
#button-row .iface-btn {
  position: absolute; top: 0;
  width: calc(var(--s) * 30.5px); height: calc(var(--s) * 30.4px);
  padding: calc(var(--s) * 7.2px);          /* a 16px icon (:118-169) */
  background-image: url('../assets/client/ButtonMainUI2_upSkin.png');
}
#button-row .iface-btn:hover { background-image: url('../assets/client/ButtonMainUI2_overSkin.png'); }
#button-row .iface-btn:active { background-image: url('../assets/client/ButtonMainUI2_downSkin.png'); }

/* --- the message feed, bottom left -------------------------------------- */
/* ScreenBottomLeft.
   One line over a background, both hidden until there is something to say. It
   sits directly above the broadcast bar and stretches to the stage width
   (StageManager.as:188-190), holds for 10s and fades. The glow is
   addAnimatedGlowEffect -- red for an error, green for a confirmation. */
#status-output {
  position: absolute;
  left: calc(var(--s) * 10px); right: calc(var(--s) * 10px);
  bottom: calc(var(--s) * 74px);
  padding: calc(var(--s) * 5px) calc(var(--s) * 11px);
  font-size: calc(var(--s) * 12px); color: var(--text);
  background: rgba(0, 0, 0, .70); border: 1px solid #00346c;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .33s linear;   /* FRAMES_TO_ALPHA_OUT at 30fps */
}
#status-output.on { opacity: 1; visibility: visible; }
#status-output.warn  { color: #ff6a5a; text-shadow: 0 0 calc(var(--s) * 6px) #cc0000; }
#status-output.important { color: #7fe07f; text-shadow: 0 0 calc(var(--s) * 6px) #009900; }
#status-output.important { color: var(--text); }
#status-output.warn { color: var(--warn); }

/* --- ScreenMapObjectInterface: the radial menu ---------------------------
   The client's buttons sit at fixed offsets around the object, all at radius
   ~76, so the host is a zero-size point centred on the target and each button
   is translated out to its slot. */
#objectpanel {
  width: 0; height: 0; padding: 0; border: 0; background: none; box-shadow: none;
  display: none; z-index: 60; pointer-events: none;
}
#objectpanel.on { display: block; }
.radial-btn {
  position: absolute; pointer-events: auto;
  width: calc(var(--s) * 54px); height: calc(var(--s) * 54px);
  margin: calc(var(--s) * -27px) 0 0 calc(var(--s) * -27px);
  left: calc(var(--dx) * var(--s) * 1px);
  top: calc(var(--dy) * var(--s) * 1px);
  padding: calc(var(--s) * 7px);
  display: grid; place-items: center;
  border-radius: 50%;
  /* changeButtonSkins(button, "ButtonRound") -- every map-object ring button
     is skinned with the client's own gold bezel (ScreenMapObjectInterface
     .as:749), in four states. This used to be a flat blue gradient with a 1px
     border, which is why the ring read as generic UI rather than as the game's.
     The art is 100x100 and drawn to fit. */
  background: url('../assets/ui/buttonRound_up.png') 0 0 / 100% 100% no-repeat;
  border: 0;
  box-shadow: 0 0 calc(var(--s) * 10px) rgba(0,0,0,.8);
  transition: transform .08s, box-shadow .12s;
}
.radial-btn img { width: 100%; height: 100%; object-fit: contain; }
/* The admin trio: Symbol 35 at 0.3 x 1.36, a 30x30 button, at the ring's 54/60 scale. */
.radial-btn.small { width: calc(var(--s) * 27px); height: calc(var(--s) * 27px);
  margin: calc(var(--s) * -13.5px) 0 0 calc(var(--s) * -13.5px); padding: calc(var(--s) * 2px); }
/* The other three states of the same skin. */
.radial-btn:hover:not(:disabled) {
  transform: scale(1.14);
  background-image: url('../assets/ui/buttonRound_over.png');
  box-shadow: 0 0 calc(var(--s) * 14px) var(--glow);
}
.radial-btn:active:not(:disabled) {
  transform: scale(1.05);
  background-image: url('../assets/ui/buttonRound_down.png');
}
.radial-btn:disabled {
  background-image: url('../assets/ui/buttonRound_disabled.png');
  cursor: default;
}
/* Raze, downgrade, disarm, ion and the like wear the same ButtonRound bezel as
   the rest of the ring -- initializeButton skins every one alike (:749). The
   generic button.danger fill must not reach them. */
button.radial-btn.danger { border: 0; background: url('../assets/ui/buttonRound_up.png') 0 0 / 100% 100% no-repeat; }
button.radial-btn.danger:hover:not(:disabled) { background-image: url('../assets/ui/buttonRound_over.png'); }
button.radial-btn.danger:active:not(:disabled) { background-image: url('../assets/ui/buttonRound_down.png'); }

.radial-label {
  position: absolute; pointer-events: none;
  left: 50%; top: calc(var(--s) * -104px);
  transform: translateX(-50%);
  white-space: nowrap;
  padding: calc(var(--s) * 4px) calc(var(--s) * 10px);
  font-family: "Arial Narrow", Arial, sans-serif; font-weight: bold;
  font-size: calc(var(--s) * 13px); color: #eaf8ff;
  background: rgba(6, 13, 22, .92);
  border: 1px solid var(--edge); border-radius: calc(var(--s) * 3px);
  box-shadow: 0 0 calc(var(--s) * 10px) rgba(0,0,0,.8);
}
.radial-close {
  position: absolute; pointer-events: auto;
  left: 0; top: 0;
  width: calc(var(--s) * 22px); height: calc(var(--s) * 22px);
  margin: calc(var(--s) * -11px) 0 0 calc(var(--s) * -11px);
  padding: 0; border-radius: 50%; line-height: 1;
  font-size: calc(var(--s) * 13px);
  background: radial-gradient(circle at 38% 30%, #23384f, #060d16);
  border: 1px solid var(--line); color: var(--dim);
}
.radial-close:hover { color: #fff; border-color: var(--accent); }

.place-step { font-size: calc(var(--s) * 16px); color: var(--accent); margin-bottom: calc(var(--s) * 5px); }
.place .dim { line-height: 1.5; }
.place .row { margin-top: calc(var(--s) * 9px); }
.name-input { width: calc(var(--s) * 140px); }

/* --- shared panel content ------------------------------------------------ */
.section { margin-bottom: 11px; }
.section:last-child { margin-bottom: 0; }
.section h3 {
  margin: 0 0 calc(var(--s) * 6px); font-size: calc(var(--s) * 11px); text-transform: uppercase;
  letter-spacing: .09em; color: var(--dim);
}

.row { display: flex; align-items: center; gap: 7px; padding: 3px 0; border-bottom: 1px solid #13202e; }
.row:last-child { border-bottom: 0; }
.row.click { cursor: pointer; }
.row.click:hover { background: #0f1c29; }
.grow { flex: 1 1 auto; min-width: 0; }
.dim { color: var(--dim); font-size: calc(var(--s) * 12px); }

.tag {
  display: inline-block; padding: 2px 6px; border-radius: 2px; margin: 0 4px 4px 0;
  font-size: 10px; background: #16283a; border: 1px solid var(--line);
}
.tag.good { background: #13301e; border-color: #2a5c39; color: var(--good); }
.tag.bad { background: #371616; border-color: #6b2a2a; color: var(--bad); }

.building { display: flex; align-items: center; gap: 7px; padding: 5px 7px; background: #122233; border-radius: 2px; margin-bottom: 5px; }

.struct button { font-size: 10px; padding: 2px 3px; text-align: center; width: 100%; margin-top: 3px; }

.pick { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; flex-wrap: wrap; }
.pick-label { color: var(--dim); font-size: 10px; width: 50px; flex: 0 0 auto; text-transform: uppercase; letter-spacing: .05em; }
.chip-icon { width: calc(var(--s) * 15px); height: calc(var(--s) * 15px); object-fit: contain; margin-right: 4px; }

.unit-preview { display: flex; gap: 8px; margin: 7px 0; }
.unit-preview img { width: calc(var(--s) * 68px); height: calc(var(--s) * 68px); border-radius: 2px; border: 1px solid var(--line); }
.unit-info { flex: 1 1 auto; min-width: 0; }
.unit-name { font-weight: bold; }
.unit-code { color: var(--dim); font-size: 10px; letter-spacing: .12em; }
.unit-stats { display: flex; gap: 8px; font-size: 10px; color: var(--accent); margin: 2px 0; }

.recruit-ctrl { display: flex; gap: 4px; align-items: center; }
.recruit-ctrl .grow { text-align: center; }

.unit-list { margin: 5px 0; }
.unit-row { display: flex; gap: 7px; align-items: center; padding: 2px 0; }
.unit-row img { width: calc(var(--s) * 36px); height: calc(var(--s) * 36px); border-radius: 2px; border: 1px solid var(--line); }

.relic-box { display: flex; gap: 8px; align-items: flex-start; background: #0f2531; border: 1px solid #1d4a5e; border-radius: 2px; padding: 6px; margin: 5px 0; }
.relic-box img { width: 46px; height: 46px; border-radius: 2px; }
.relic-name { font-weight: bold; color: #7fe3ff; }

.queue { margin-top: 5px; padding-top: 4px; border-top: 1px solid #13202e; }

/* --- modal windows (ScreenColony, reports, standings, help) -------------- */
/* Every screen floats: no backdrop, and the map stays live around the windows
   (ScreenBase -- each screen is its own draggable window, none modal). */
#modal { position: fixed; inset: 0; background: none; pointer-events: none;
         display: none; place-items: center; z-index: 120; }
#modal .modal-box { pointer-events: auto; }
/* Dragged by its title bar: from then on it stays exactly where it was put. */
#modal .modal-box.dragged { position: fixed !important; transform: none !important;
                            margin: 0 !important; right: auto !important; bottom: auto !important; }
#modal.on { display: grid; }
#modal.anchor-right { place-items: center end; }

/* A GROUP of windows. The client has no single modal: screensM keeps each
   screen as its own window and StageManager anchors it (:120-175), so
   btn_recruitUnitInColony can put screenOrders (left), screenRecruit (centre)
   and screenMilitaryManagement (right) on the stage together. They are
   vertically centred and may overlap on a narrow stage, exactly as they do in
   the original -- the one opened last lies on top. */
/* --- ScreenColony, management frame -------------------------------------- */
/* Four panels in a 2x2, where ScreenColony's own instances put them:
   Production per tick | Production Boosts
   Resource Converter  | Pop. Growth
   Each panel is a titled box -- the client draws a header bar over a darker
   interior, which is the same chrome its other inner panels wear. */
.mgmt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--s) * 7px);
  align-items: start;
}
.mgmt-panel {
  border: 1px solid #1d4468;
  background: rgba(4, 12, 22, .55);
  border-radius: calc(var(--s) * 2px);
  overflow: hidden;
}
.mgmt-head {
  background: linear-gradient(#1b3e5e, #12293f);
  border-bottom: 1px solid #1d4468;
  padding: calc(var(--s) * 4px) calc(var(--s) * 8px);
  font: bold calc(var(--s) * 12px)/1.3 Arial, sans-serif;
  color: #cfe8ff;
  text-align: center;
}
.mgmt-body { padding: calc(var(--s) * 5px) calc(var(--s) * 7px); }
.mgmt-body .row { margin: calc(var(--s) * 3px) 0; }

/* The production table: icon columns, and the total drawn first. */
.prod-table { width: 100%; border-collapse: collapse; }
.prod-table th, .prod-table td {
  padding: calc(var(--s) * 2px) calc(var(--s) * 4px);
  text-align: right;
  font: calc(var(--s) * 12px)/1.35 Arial, sans-serif;
}
.prod-table th:first-child, .prod-table td.rp-label { text-align: left; }
.prod-table td.rp-label { color: #cfe8ff; font-weight: bold; }
.prod-icon { width: calc(var(--s) * 13px); height: calc(var(--s) * 13px); vertical-align: middle; }
/* txtRP_5 is green; UI_COL_MANAGEMENT_MAXED and a negative total take the
   warning colour. */
.prod-table td.rp-total { color: #5fd35f; font-weight: bold; }
.prod-table td.rp-maxed { color: #ff5a4a; }
.prod-table tr.total td { border-bottom: 1px solid #1d4468; }

/* The two boost lines. An orange glow while one runs (addStaticGlowEffect,
   _glow_outerOrange). */
.boost-line { padding: calc(var(--s) * 4px) 0; color: #9fb4c7; font-size: calc(var(--s) * 12px); }
.boost-line.on { color: #ffbe3c; text-shadow: 0 0 calc(var(--s) * 8px) rgba(255, 150, 0, .9); }

/* Pop. Growth: a header carrying the amount and the countdown, then one line
   per contribution -- every one of them, zero or not. */
.pg-head {
  display: flex; align-items: center; gap: calc(var(--s) * 5px);
  border-bottom: 1px solid #1d4468;
  padding-bottom: calc(var(--s) * 4px);
  margin-bottom: calc(var(--s) * 4px);
}
.pg-total { font: bold calc(var(--s) * 15px)/1 Arial, sans-serif; color: #5fd35f; }
.pg-ticks { font: calc(var(--s) * 12px)/1 Arial, sans-serif; color: #cfe8ff; }
.pg-icon { width: calc(var(--s) * 14px); height: calc(var(--s) * 14px); }
.pg-line {
  display: flex; align-items: baseline; gap: calc(var(--s) * 6px);
  font: calc(var(--s) * 11px)/1.18 Arial, sans-serif;
  color: #9fb4c7;
}
.pg-pos { color: #cfe8ff; }
.pg-neg { color: #ff5a4a; }
.pg-warn { color: #ffbe3c; display: block; }

/* ScreenColony, tokens frame. Two balances with Grp_tokenA / Grp_tokenB, the
   explainer, and tlBoosts underneath spanning both columns. */
.tokens-grid .mgmt-panel:nth-child(3) { grid-column: 1 / -1; }
.tok-bal {
  display: flex; align-items: center; gap: calc(var(--s) * 6px);
  padding: calc(var(--s) * 3px) 0;
  font: calc(var(--s) * 12px)/1.4 Arial, sans-serif; color: #cfe8ff;
}
.tok-icon { width: calc(var(--s) * 16px); height: calc(var(--s) * 16px); }
.tok-amount { font-weight: bold; color: #ffd257; }
/* btnBuyToken is dark green with a golden frame; btnGetFreeTokens is blue. */
.tok-buy, .tok-free {
  width: 100%; margin-top: calc(var(--s) * 5px);
  border: 1px solid #c9a227; border-radius: calc(var(--s) * 2px);
  color: #fff; cursor: pointer;
  font: bold calc(var(--s) * 11px)/1.4 Arial, sans-serif;
  padding: calc(var(--s) * 4px);
}
.tok-buy { background: #1d6b32; }
.tok-free { background: #1b4b7a; }
/* Symbol 162, the client's BDButton, placed absolutely: setBackgroundColor
   "gray" / "darkGreen", activateGoldenFrame, disableMe greying it. */
.bd-btn { position: absolute; margin: 0; padding: 0; border: 1px solid #555555; border-radius: calc(var(--s) * 2px);
  color: #ffffff; cursor: pointer; font: bold calc(var(--s) * 12px) Arial, sans-serif; }
.bd-btn.gray { background: linear-gradient(#6a6a6a, #3c3c3c); }
.bd-btn.darkGreen { background: #1d6b32; }
.bd-btn.golden { border: calc(var(--s) * 2px) solid #c9a227; }
.bd-btn:disabled { opacity: .45; cursor: default; }
.mis-done .tok-buy { margin: 0; }

.boost-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--s) * 6px); }
.boost-tile {
  border: 1px solid #1d4468; background: rgba(4, 12, 22, .6);
  border-radius: calc(var(--s) * 2px);
  padding: calc(var(--s) * 6px);
  display: flex; flex-direction: column; gap: calc(var(--s) * 3px);
}
/* status 4 and 5: running. 3: cooling down. 2: cannot afford it. */
.boost-tile.s4, .boost-tile.s5 { border-color: #3e8f4e; }
.boost-tile.s3 { opacity: .75; }
.boost-tile.s2 { opacity: .55; }
.boost-name { font: bold calc(var(--s) * 12px)/1.3 Arial, sans-serif; color: #cfe8ff; }
.boost-desc { font: calc(var(--s) * 11px)/1.3 Arial, sans-serif; color: #9fb4c7; flex: 1; }
.boost-foot { display: flex; align-items: center; gap: calc(var(--s) * 6px); }
.boost-price { display: flex; align-items: center; gap: calc(var(--s) * 4px); color: #ffd257; font-weight: bold; font-size: calc(var(--s) * 11px); }
.boost-state { font-size: calc(var(--s) * 11px); color: #9fb4c7; }
.boost-state.on { color: #5fd35f; }
.boost-go { margin-left: auto; }

/* ScreenColony, statistics frame: the Army panel. txtArmy_details on the
   left, tlArmy on the right -- columnCount 9, rowCount 3, columnWidth 50. */
.army-body { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--s) * 10px); }
.army-details { font: calc(var(--s) * 12px)/1.45 Arial, sans-serif; color: #cfe8ff; }
.army-line { white-space: nowrap; }
.army-grid {
  display: grid; grid-template-columns: repeat(9, 1fr);
  gap: calc(var(--s) * 1px);
  align-content: start;
}
.army-slot {
  position: relative; aspect-ratio: 1;
  background: #23262b; border: 1px solid #14181d;
  overflow: hidden;
}
.army-slot img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .30; }
/* slotType unitSummary_active: you hold some of these, so it is not dimmed. */
.army-slot.on img { opacity: 1; }
.army-count {
  position: absolute; right: 0; bottom: 0;
  background: rgba(0, 0, 0, .72);
  color: #fff; font: bold calc(var(--s) * 10px)/1.25 Arial, sans-serif;
  padding: 0 calc(var(--s) * 3px);
}
.army-calc { margin-top: calc(var(--s) * 8px); }

/* The converter's two columns: Convert / Into / Ratio on the left, Amount /
   You will receive / the button on the right. */
.rc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--s) * 8px); }
.rc-row {
  display: flex; align-items: center; gap: calc(var(--s) * 5px);
  min-height: calc(var(--s) * 22px);
  font: calc(var(--s) * 11px)/1.3 Arial, sans-serif;
  color: #9fb4c7;
}
.rc-label { flex: 0 0 auto; }
.rc-chips { display: flex; gap: calc(var(--s) * 3px); }
.rc-val { margin-left: auto; color: #cfe8ff; font-weight: bold; }
.rc-num {
  margin-left: auto; width: calc(var(--s) * 56px);
  background: #08121d; color: #cfe8ff;
  border: 1px solid #1d4468; border-radius: calc(var(--s) * 2px);
  font: calc(var(--s) * 11px)/1.3 Arial, sans-serif;
  padding: calc(var(--s) * 2px) calc(var(--s) * 4px);
}
.rc-res {
  padding: calc(var(--s) * 2px); border: 1px solid #1d4468;
  border-radius: calc(var(--s) * 2px); background: #0d2033;
  display: grid; place-items: center; cursor: pointer;
}
.rc-res.on { border-color: #4aa3e0; background: #17405e; }
.rc-res-icon { width: calc(var(--s) * 15px); height: calc(var(--s) * 15px); display: block; }
.rc-go { width: 100%; margin-top: calc(var(--s) * 3px); }
.rc-warn { margin-top: calc(var(--s) * 3px); }

/* ScreenButtons (symbol1129): the icon strip the client floats at the pointer
   for whatever the current selection can do. It is not a window -- no title,
   no close button, and it goes when the pointer leaves it. Geometry is the
   class's own: 27px icons from x 10, y 6, pitched 32, on a box 39 tall. */
.screen-buttons {
  position: fixed;
  z-index: 140;
  background: url('../assets/client/sprite_132.png') 0 0 / 100% 100% no-repeat,
              linear-gradient(#123049, #0b1f31);
  border: 1px solid #2b6c9e;
  border-radius: calc(var(--s) * 3px);
  box-shadow: 0 6px calc(var(--s) * 18px) rgba(0, 0, 0, .7);
}
.screen-buttons .sb-icon {
  position: absolute;
  padding: 0; margin: 0; border: 0; border-radius: calc(var(--s) * 2px);
  background: none;
  display: grid; place-items: center;
  cursor: pointer;
}
.screen-buttons .sb-icon img { width: 100%; height: 100%; object-fit: contain; }
/* addAnimatedGlowEffect on roll-over, and a brighter one on mouse-down. */
.screen-buttons .sb-icon:hover { filter: drop-shadow(0 0 calc(var(--s) * 5px) #7fd4ff); }
.screen-buttons .sb-icon:active { filter: drop-shadow(0 0 calc(var(--s) * 7px) #bfe9ff); }
.screen-buttons .sb-icon.is-off { opacity: .35; cursor: default; }

#modal.multi { place-items: stretch; }
#modal.multi .modal-box {
  position: absolute;
  top: 50%;
  width: auto;
  max-width: none;
  margin: 0;
}
#modal.multi .modal-box.at-left { left: calc(var(--s) * 6px); transform: translateY(-50%); }
#modal.multi .modal-box.at-right { right: calc(var(--s) * 6px); transform: translateY(-50%); }
#modal.multi .modal-box.at-center { left: 50%; transform: translate(-50%, -50%); }
/* On a stage too narrow to hold all three side by side, let them sit over one
   another rather than running off the edge. */
@media (max-width: 1200px) {
  #modal.multi .modal-box.at-left { left: calc(var(--s) * 2px); }
  #modal.multi .modal-box.at-right { right: calc(var(--s) * 2px); }
}
.terr-list { position: absolute; overflow: hidden; font: bold calc(var(--s) * 12px)/1.25 Arial, sans-serif; }
.terr-line { white-space: nowrap; }
/* Every window in the client is the same piece of chrome -- ScreenColony's
   mcBackground (Symbol 1015, 822x422): navy textured interior, brass bevel,
   ribbed side panels, notched top-right corner and a blue accent line under the
   title. Applied as a 9-slice so the one frame serves every window size.
   Slices are top 40 / sides 18 / bottom 20, which is where the bevel ends. */
.modal-box {
  position: relative;
  background: none;
  border-style: solid;
  border-width: calc(var(--s) * 40px) calc(var(--s) * 18px) calc(var(--s) * 20px);
  border-image: url('../assets/client/sprite_1015.png') 40 18 20 fill stretch;
  border-radius: 0;
  max-width: calc(var(--s) * 760px); width: calc(100vw - 40px); max-height: 84vh;
  display: flex; flex-direction: column;
  filter: drop-shadow(0 10px 40px rgba(0, 0, 0, .7));
}
/* The title sits on the frame's own title bar, which is border area rather
   than content, so the head is lifted up into it. */
/* txtTitle sits at y 26 from the window's outer edge on 31 of the 40 screens
   that have one, at size 16. The border-top is 40, so the head is lifted 14
   above the content box to land there. */
/* txtTitle: placed per window by showModal from its own symbol, always centred
   in its field, Arial Bold 16 #00ccff. One line; a long title is cut rather
   than wrapped down over the controls. */
.modal-title {
  position: absolute; margin: 0; z-index: 2; pointer-events: none;
  font: bold calc(var(--s) * 16px)/1.15 Arial, sans-serif; color: #00ccff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* btnX: ButtonMainUIRound skin with Grp_x on it, sitting in the frame's
   top-right corner plate. */
button.btn-x {
  position: absolute; z-index: 3; padding: 0; margin: 0; border: 0; border-radius: 50%;
  width: calc(var(--s) * 27.45px); height: calc(var(--s) * 27.98px);
  background: url('../assets/client/ButtonMainUIRound_upSkin.png') center / 100% 100% no-repeat;
  box-shadow: none; min-width: 0; cursor: pointer;
}
button.btn-x::after {
  content: ''; position: absolute; inset: 22%;
  background: url('../assets/client/x.png') center / contain no-repeat;
}
button.btn-x:hover { background-image: url('../assets/client/ButtonMainUIRound_overSkin.png'); }
button.btn-x:active { background-image: url('../assets/client/ButtonMainUIRound_downSkin.png'); }
.modal-body { padding: calc(var(--s) * 4px) 0 0; overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; min-height: 0; }
/* A screen on its own frame art: no shared border, the art is the background,
   and nothing may paint outside it. */
.modal-box.art {
  border: 0; border-image: none; background-repeat: no-repeat; overflow: visible;
}
.modal-box.art .modal-body { padding: 0; }
/* The plain chrome: Symbol 132, sliced where its title bar and sides end. */
.modal-box.plain {
  border-width: calc(var(--s) * 19.5px) calc(var(--s) * 5px) calc(var(--s) * 5px);
  border-image: url('../assets/client/sprite_132.png') 20 5 5 fill stretch;
  filter: none;
}
.modal-box.plain .modal-body { padding: calc(var(--s) * 5px) calc(var(--s) * 6px) calc(var(--s) * 4px); }
/* A framed window's controls start at x ~35-45 and y ~62-70 from its outer
   corner (the measured range over its screens), clear of the bevel and the
   title bar. The frame's border is 18 / 40, so the body is inset the rest. */
.modal-box.framed .modal-body {
  padding: calc(var(--s) * 22px) calc(var(--s) * 17px) calc(var(--s) * 6px);
}

.help h3 { font-size: 12px; margin: 12px 0 4px; }
.help p, .help li { color: var(--dim); }
.help b { color: var(--text); }
.help table td { padding: 2px 12px 2px 0; color: var(--dim); }
.help table td:first-child { color: var(--text); font-family: ui-monospace, monospace; }

.report { border: 1px solid var(--line); border-radius: 2px; padding: 7px 9px; margin-bottom: 7px; background: var(--panel-2); }
.report-head { font-weight: bold; margin-bottom: 3px; }
.rounds { margin-top: 4px; padding-top: 4px; border-top: 1px solid #13202e; }

.standings table { width: 100%; border-collapse: collapse; }
.standings th { text-align: left; color: var(--dim); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px 3px 0; }
.standings td { padding: 3px 8px 3px 0; border-top: 1px solid #13202e; font-variant-numeric: tabular-nums; }
.standings tr.me td { color: var(--accent); font-weight: bold; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 1px; }

.split .unit-row input { margin-left: auto; }
.gameover h3 { margin: 0 0 6px; font-size: 19px; }

/* --- event log, shown as a modal rather than a permanent panel ----------- */
.log-line { display: flex; gap: calc(var(--s) * 8px); padding: 1px 0; color: var(--dim); font-size: calc(var(--s) * 12px); }
.log-line.important { color: var(--text); }
.log-line.warn { color: var(--warn); }
.log-tick { color: #46617c; font-variant-numeric: tabular-nums; flex: 0 0 auto; }

/* --- tutorial ------------------------------------------------------------ */
/* ScreenTutorial: 600x205, anchored left / bottom (StageManager.as:147). Its
   pieces are placed absolutely by tutorial.js from the screen's own timeline;
   the frame is the same bevelled chrome every window uses. */
#tutorial {
  position: fixed; left: 0; bottom: 0; z-index: 110;
  width: calc(var(--s) * 600px); height: calc(var(--s) * 205px);
  font: calc(var(--s) * 12px)/1.3 Arial, sans-serif; color: #ffffff;
  /* Symbol 40, the tutorial's own frame (626x242), placed at (-25, 0): it runs
     25px off the left edge and past the bottom, as it does on the stage. */
  background: url('../assets/client/bg_40.png') calc(var(--s) * -25px) 0 / calc(var(--s) * 626px) calc(var(--s) * 242px) no-repeat;
}
/* Raised over the windows (#modal, 120) by a new phase or a click on it;
   a window opened or clicked after that lies over it again (tutorial.js
   toFront). Still under the toast (130) and the button strip (140). */
#tutorial.front { z-index: 125; }
#tutorial > * { position: absolute; }
.tut-box { border: 1px solid #2a5f8f; border-radius: calc(var(--s) * 2.8px); pointer-events: none; }
.tut-avatar { overflow: hidden; background: #000; }
.tut-text { white-space: nowrap; overflow: hidden; }
.tut-center { text-align: center; }
/* mcBlockReward: Symbol 54's black block, left over the reward box. */
.tut-block { background: rgba(0, 0, 0, .72); pointer-events: none; }
/* txtReward1-3: ArialMT 12 white, beside its 20px resource icon. */
.tut-reward-icon { object-fit: contain; pointer-events: none; }
.tut-reward { font: calc(var(--s) * 12px)/1.1 Arial, sans-serif; color: #ffffff; }
.tut-desc { white-space: pre-wrap; overflow-y: auto; padding-right: calc(var(--s) * 4px); }
.tut-shot { object-fit: cover; display: block; border: 0; }
button.tut-btn {
  padding: 0; min-width: 0; font-size: calc(var(--s) * 12px); text-align: center;
  display: grid; place-items: center;
}
button.tut-btn img { width: calc(var(--s) * 18px); height: calc(var(--s) * 18px); }
/* --- toast --------------------------------------------------------------- */
#toast {
  position: fixed; left: 50%; bottom: 44px; transform: translateX(-50%) translateY(10px);
  background: #16283a; border: 1px solid #375a7d; border-radius: 3px;
  padding: 7px 13px; opacity: 0; transition: opacity .18s, transform .18s;
  pointer-events: none; z-index: 130; font-size: 12px;
}
#toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #09121c; }
::-webkit-scrollbar-thumb { background: #23384f; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #2f4a63; }

/* Narrow windows. --s already shrinks the whole HUD, so these only handle what
   scaling alone cannot: at some point there is simply no room for the minimap
   beside the top-left cluster, and the ruler card has to drop under the grid. */
@media (max-width: 700px) {
  /* The grid is two 46px rows plus gap and padding, so it ends at 50 + 112. */
  #placepanel { top: calc(var(--s) * 262px); }
  .res { min-width: calc(var(--s) * 92px); }
  #res-bar { justify-content: flex-end; }
}
@media (max-width: 520px) {
  /* The bar stays docked flush at every width -- it is anchored to the stage
     edge in the client, not inset. */
  #placepanel { width: calc(100% - var(--s) * 20px); }
}

/* --- secondary screens (screens.js) -------------------------------------- */
.tabs { display: flex; gap: 3px; margin-bottom: 9px; border-bottom: 1px solid var(--line); }
button.tab {
  border-radius: 3px 3px 0 0; border-bottom: 0; padding: calc(var(--s) * 5px) calc(var(--s) * 14px);
  background: linear-gradient(#101c2a, #0b1420); color: var(--dim);
}
button.tab.on { background: linear-gradient(#1d334a, #14283c); color: var(--text); }

.meter { margin: 6px 0; }
/* The client's capacity bar is mcCapacityBar2 (Symbol 660), 148x15, and its
   fill is green rather than blue -- sampled #009900 through the middle with
   #007000 / #007a00 shading top and bottom. */
.meter-bar {
  height: calc(var(--s) * 15px); background: #07111b; border: 1px solid var(--line);
  border-radius: 0; overflow: hidden;
}
.meter-fill {
  height: 100%;
  background: linear-gradient(#007000, #009900 50%, #007a00);
}
.meter-fill.over { background: linear-gradient(#700000, #cc0000 50%, #7a0000); }
.meter-label { font-size: 10px; color: var(--dim); margin-top: 3px; }

.row.check { cursor: pointer; gap: 8px; }
.row.check input { accent-color: var(--accent); }

/* ScreenBattleCalculator (bdBattleCalculator.swf in mcHolder at 31, 60):
   attackers on a red ground, defenders on a blue one, a black band between,
   the controls in three dark panels down the left. */
.bcalc-ground.red  { background: linear-gradient(#8a0000, #8a0000 45%, #2a0000 85%, #000); }
.bcalc-ground.blue { background: linear-gradient(#000, #000 18%, #0a1a40 40%, #0a3a9a 80%, #0a3aa6); }
.bcalc-panel { background: linear-gradient(#1b2028, #11151b); box-sizing: border-box;
  border: calc(var(--s) * 3px) solid #2c323b; box-shadow: inset 0 0 0 1px #4a525d; }
.bcalc-title { text-align: center; color: #fff; font: bold calc(var(--s) * 14px) Arial, sans-serif;
  border-bottom: 1px solid #4a525d; }
.bcalc-status { text-align: center; font: calc(var(--s) * 13px) Arial, sans-serif; }
.bcalc-btn { font: calc(var(--s) * 11px) Arial, sans-serif; color: #fff; padding: 0;
  background: linear-gradient(#1a7f9e, #0a4f66); border: 1px solid #06303f; border-radius: 2px; }
.bcalc-btn:disabled { background: linear-gradient(#123a48, #0b2833); color: #c8d4da; }
.bcalc-btn.big { font-size: calc(var(--s) * 12px); }
.bcalc-round { text-align: center; color: #ffcc00; font: calc(var(--s) * 13px) Arial, sans-serif; }
/* One mcSide<s>Unit<n>: a dark slot holding the picture, txtInput under it
   (the count stays there after a report) and txtOutput under that (the
   losses, in red). */
.bcalc-cell { position: absolute; box-sizing: border-box; padding: calc(var(--s) * 1px);
  background: rgba(8, 8, 12, 0.88); border: 1px solid #2a2d33; }
.bcalc-cell img { display: block; width: calc(var(--s) * 40px); height: calc(var(--s) * 40px);
  object-fit: cover; margin: 0 auto; }
.bcalc .bcalc-in, .bcalc-out { display: block; width: calc(var(--s) * 40px); height: calc(var(--s) * 13px);
  margin: calc(var(--s) * 2px) auto 0; box-sizing: border-box; padding: 0; border: 1px solid #333;
  background: #fff; text-align: center; font: calc(var(--s) * 10px)/calc(var(--s) * 11px) Arial, sans-serif; }
.bcalc .bcalc-in { color: #000; }
.bcalc-out { color: #cc0000; }
/* mcKIA: a red block over the picture with KIA on it. */
.bcalc-kia {
  position: absolute; left: calc(var(--s) * 1px); top: calc(var(--s) * 1px);
  width: calc(var(--s) * 40px); height: calc(var(--s) * 40px);
  background: rgba(225, 85, 85, 0.88); color: #fff; text-align: center;
  font: bold calc(var(--s) * 15px)/calc(var(--s) * 40px) Arial, sans-serif;
}
/* mcBlack: a slot that brought nothing -- dimmed, not blotted out. */
.bcalc-cell.black img { filter: brightness(0.45); }
.standings tr.click { cursor: pointer; }
.standings tr.click:hover td { background: #0f1c29; }

/* ScreenBuildColony: anchored LEFT and vertically CENTRED (StageManager.as:154)
   on its 252 x 227 mcBackground (Symbol 1131), with the map live behind it
   because you click the map to choose a spot. It sat at the top left, on top of
   the interface buttons. Title (2, 26, 224) centred; btnX at (189, 24.4). */
#placepanel {
  display: none; left: 0; top: 50%; transform: translateY(-50%);
  width: calc(var(--s) * 252px); min-height: calc(var(--s) * 227px); z-index: 90;
  padding: 0; box-shadow: none; border-radius: 0; background: none;
  border-style: solid;
  border-width: calc(var(--s) * 40px) calc(var(--s) * 18px) calc(var(--s) * 20px);
  border-image: url('../assets/client/sprite_1015.png') 40 18 20 fill stretch;
}
#placepanel.on { display: block; }
#placepanel .modal-title { left: calc(var(--s) * -16px); top: calc(var(--s) * -14px); width: calc(var(--s) * 224px); text-align: center; }
#placepanel .btn-x { left: calc(var(--s) * 171px); top: calc(var(--s) * -15.6px); width: calc(var(--s) * 25px); height: calc(var(--s) * 25px); }
/* Controls start at x 12-13 and y 62-68 from the outer corner. */
#placepanel .place { padding: calc(var(--s) * 24px) 0 calc(var(--s) * 4px) 0; margin: 0 calc(var(--s) * -5px); }
.place-step {
  font-family: "Arial Narrow", Arial, sans-serif; font-weight: bold;
  font-size: 14px; color: var(--accent); margin-bottom: 4px;
}
.place .dim { line-height: 1.5; }
.place .row { margin-top: 8px; }
.name-input {
  width: 120px; font: inherit; color: var(--text);
  background: #07111b; border: 1px solid var(--line);
  border-radius: 2px; padding: 3px 6px;
}

/* --- ScreenMapFocus: a 298x66 banner naming what the map is centred on --- */
#mapfocus {
  left: 50%; top: calc(var(--s) * 52px);
  transform: translateX(-50%);
  min-width: calc(var(--s) * 298px); max-width: 60%;
  padding: calc(var(--s) * 9px) calc(var(--s) * 16px);
  text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
  z-index: 55;
}
#mapfocus.on { opacity: 1; }
#mapfocus-title {
  font-family: "Arial Narrow", Arial, sans-serif; font-weight: bold;
  font-size: calc(var(--s) * 16px); color: #eaf8ff;
  text-shadow: 0 0 calc(var(--s) * 10px) rgba(60,190,240,.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}

/* --- ScreenProfileView --------------------------------------------------- */
.profile-head { display: flex; gap: calc(var(--s) * 12px); align-items: center; margin-bottom: calc(var(--s) * 10px); }
/* ScreenProfileView has no mcAvatarFrame: the gilt surround (Symbol 215) is
   drawn only where DataManager.refreshAvatarFrame runs -- the HUD, the
   broadcast, message read, Community and the tooltips -- and only for
   nAvatarSkin 1 (the Golden Avatar boost) or an admin. */
.profile-avatar {
  position: relative; flex: 0 0 auto;
  width: calc(var(--s) * 66px); height: calc(var(--s) * 65px);
  background-size: calc(var(--s) * 60px) calc(var(--s) * 60px);
  background-position: center; background-repeat: no-repeat;
  border: 0; border-radius: 0; box-shadow: none;
}
.profile-name {
  font-family: "Arial Narrow", Arial, sans-serif; font-weight: bold;
  font-size: calc(var(--s) * 18px); color: #eaf8ff;
}
.rank-badge { width: calc(var(--s) * 18px); height: calc(var(--s) * 18px); object-fit: contain; }
.bio-input {
  width: 100%; min-height: calc(var(--s) * 90px); resize: vertical;
  font: inherit; color: var(--text); background: #040b12;
  border: 1px solid var(--line); border-radius: 2px; padding: calc(var(--s) * 6px);
}
.bio-text { white-space: pre-wrap; line-height: 1.5; }

/* tlAchievements: one column 430 wide, rows of 70, six visible (rowCount 6). */
.ach-list {
  width: calc(var(--s) * 430px); max-width: 100%;
  max-height: calc(var(--s) * 420px); overflow-y: auto;
}
.ach-row {
  display: flex; gap: calc(var(--s) * 8px); align-items: center;
  height: calc(var(--s) * 70px); box-sizing: border-box;
  background: var(--panel-2); border-bottom: 1px solid var(--line);
  padding: calc(var(--s) * 4px);
}
.ach-row.locked { opacity: .35; filter: grayscale(1); }
.ach-pic {
  flex: 0 0 auto; width: calc(var(--s) * 60px); height: calc(var(--s) * 60px);
  background: center / contain no-repeat;
}
.ach-text { min-width: 0; }
.ach-name { font-size: calc(var(--s) * 12px); color: var(--text); font-weight: bold; }
.ach-desc { font-size: calc(var(--s) * 11px); color: #cccccc; line-height: 1.25; }

/* --- Alliance windows -----------------------------------------------------
   ScreenCommunity's alliance frames, ScreenInspectAlliance, ScreenAllianceOrder
   and ScreenSendResources. */
.strong { font-weight: bold; color: var(--text); }
.note {
  color: var(--dim); font-size: calc(var(--s) * 12px); line-height: 1.45;
  background: #0c1826; border: 1px solid var(--line); border-radius: 2px;
  padding: calc(var(--s) * 6px) calc(var(--s) * 8px);
  margin: calc(var(--s) * 4px) 0;
}
.top-alliance {
  background: linear-gradient(#152943, #101d2c);
  border: 1px solid var(--line); border-radius: 2px;
  padding: calc(var(--s) * 7px) calc(var(--s) * 9px);
  margin-bottom: calc(var(--s) * 8px);
}
.top-alliance .strong { color: var(--accent); }
.role-badge {
  width: calc(var(--s) * 14px); height: calc(var(--s) * 14px);
  object-fit: contain; vertical-align: -2px; margin-right: calc(var(--s) * 4px);
}
.order-icon {
  width: calc(var(--s) * 18px); height: calc(var(--s) * 18px);
  object-fit: contain; flex: 0 0 auto;
}
button.mini {
  padding: 1px calc(var(--s) * 6px); font-size: calc(var(--s) * 10px);
  margin-left: calc(var(--s) * 3px);
}
input.num {
  width: calc(var(--s) * 66px); text-align: right;
  font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.res-label {
  width: calc(var(--s) * 54px); flex: 0 0 auto;
  color: var(--dim); font-size: calc(var(--s) * 12px);
}
button.icon-btn {
  width: calc(var(--s) * 28px); height: calc(var(--s) * 28px);
  padding: 0; display: inline-flex; align-items: center; justify-content: center;
}
button.icon-btn img {
  width: calc(var(--s) * 18px); height: calc(var(--s) * 18px); object-fit: contain;
}
button.icon-btn.on {
  background: linear-gradient(#1d334a, #14283c);
  border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset;
}
.prio {
  font-size: calc(var(--s) * 10px); text-transform: uppercase; letter-spacing: .06em;
  padding: 0 calc(var(--s) * 5px); border-radius: 2px; flex: 0 0 auto;
}
.prio-high { background: #4a1a16; color: #ff8a7c; }
.prio-medium { background: #4a3a13; color: #ffc247; }
.prio-low { background: #14303f; color: #7fd0ff; }
.section select {
  background: #0c1826; color: var(--text); border: 1px solid var(--line);
  font-size: calc(var(--s) * 11px); padding: 1px 2px;
}

/* --- ScreenColony ---------------------------------------------------------
   The client's window is 830x530 with a tab column at x 35-155 and the frame
   content from x 158. The structures frame puts a five-wide level grid at
   x 163 against a detail panel at x 585-800. */
.modal-box.wide { max-width: calc(var(--s) * 860px); }

.colony-window { display: flex; gap: calc(var(--s) * 10px); align-items: flex-start; }
.colony-tabs {
  flex: 0 0 auto; width: calc(var(--s) * 118px);
  display: flex; flex-direction: column; gap: 1px;
  background: #0b1622; border: 1px solid var(--line); border-radius: 2px;
  padding: calc(var(--s) * 3px);
}
button.colony-tab {
  text-align: left; width: 100%; border: 0; background: transparent;
  padding: calc(var(--s) * 4px) calc(var(--s) * 7px);
  font-size: calc(var(--s) * 12px); color: var(--dim); border-radius: 1px;
}
button.colony-tab:hover { background: #10202f; color: var(--text); }
button.colony-tab.on { background: linear-gradient(#1d334a, #14283c); color: var(--text); }
button.colony-tab.gold { color: #f0c94a; }
button.colony-tab.gold.on { color: #ffe07a; }
.colony-pane { flex: 1 1 0; min-width: 0; }

/* structures frame: tlStructures on the left, the detail panel on the right */
.col-structures { display: flex; gap: calc(var(--s) * 10px); align-items: flex-start; }
/* Grid geometry straight from the client (ScreenColony.as:1119-1126): the
   tutorial pointer indexes cells as `id % 5` across and `floor(id / 5)` down at
   a pitch of 80, over 9 rows, with a 320px viewport onto 720px of content. So
   the grid is 9 structure types x 5 levels, 80px cells, scrolling. */
.struct-matrix {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
  gap: 0; max-height: calc(var(--s) * 320px); overflow-y: auto;
  padding-right: calc(var(--s) * 4px);
}
.struct-row { display: flex; align-items: center; gap: 0; height: calc(var(--s) * 80px); }
.struct-row-label {
  flex: 0 0 auto; width: calc(var(--s) * 52px);
  font-size: calc(var(--s) * 11px); color: var(--dim);
  text-transform: uppercase; letter-spacing: .04em;
}
/* 80px pitch, per ScreenColony.as:1119. The cell art fills it; the 1px border
   is inside the pitch rather than added to it. */
button.struct-cell {
  position: relative; flex: 0 0 auto; padding: 0; border-radius: 1px;
  width: calc(var(--s) * 80px); height: calc(var(--s) * 80px);
  border: 1px solid #2a4159; background: #0d1a27; overflow: hidden;
  box-sizing: border-box;
}
button.struct-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
button.struct-cell.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
/* TileListSlotDisplay backgrounds (ScreenColony.as:1020-1062):
   locked -> darkGray and NO picture, available -> white,
   notEnoughResources -> red, built and underConstruction -> blue. */
button.struct-cell.is-locked { background: #0b1622; border-color: #16283a; }
button.struct-cell.is-available { border-color: #b9d4ea; }
button.struct-cell.is-notEnoughResources { border-color: #c0392b; }
button.struct-cell.is-notEnoughResources img { filter: saturate(.5) brightness(.8); }
button.struct-cell.is-built,
button.struct-cell.is-underConstruction { border-color: #2f6ea8; }
.struct-tick {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: fill; pointer-events: none;
}
.struct-lock {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: calc(var(--s) * 20px); height: calc(var(--s) * 20px); pointer-events: none;
}
.struct-tick-fallback {
  position: absolute; right: 2px; bottom: 1px; font-size: calc(var(--s) * 14px);
  color: #7fd0ff; text-shadow: 0 0 3px #000;
}

.struct-detail {
  flex: 0 0 auto; width: calc(var(--s) * 218px);
  background: #0b1622; border: 1px solid var(--line); border-radius: 2px;
  padding: calc(var(--s) * 8px);
}
/* txtSelectStructure is #ffcc00 in the client, not a dim grey. */
.struct-detail-empty { color: #ffcc00; font-size: calc(var(--s) * 12px); padding: calc(var(--s) * 16px) 0; }
.struct-detail-head { display: flex; gap: calc(var(--s) * 8px); align-items: flex-start; }
.struct-shot {
  position: relative; flex: 0 0 auto;
  width: calc(var(--s) * 80px); height: calc(var(--s) * 80px);
  border: 1px solid #2a4159; border-radius: 1px; overflow: hidden; background: #0d1a27;
}
.struct-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.struct-lock-big {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: calc(var(--s) * 28px); height: calc(var(--s) * 28px);
}
.struct-status { font-size: calc(var(--s) * 12px); padding-top: calc(var(--s) * 2px); }
.struct-status.is-built { color: var(--good); }
.struct-status.is-available { color: #7fd0ff; }
.struct-status.is-underConstruction { color: #ffc247; }
.struct-status.is-notEnoughResources { color: #ff6a5a; }
.struct-status.is-locked { color: var(--dim); }
.struct-title {
  margin: calc(var(--s) * 8px) 0 calc(var(--s) * 4px);
  /* txtStructureName is plain 12px #dddddd -- no highlighted bar behind it. */
  background: none; border: 0; border-radius: 0; padding: 0;
  font-size: calc(var(--s) * 12px); font-weight: normal; color: #dddddd;
}
.struct-desc { font-size: calc(var(--s) * 11px); color: var(--dim); line-height: 1.45; }
.struct-desc > div { margin-bottom: calc(var(--s) * 4px); }
.struct-effect { color: var(--good); }
.struct-cost {
  margin-top: calc(var(--s) * 8px); padding-top: calc(var(--s) * 6px);
  border-top: 1px solid var(--line);
}
.cost-label {
  font-size: calc(var(--s) * 10px); color: var(--dim);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px;
}
.struct-warn {
  color: var(--bad); font-size: calc(var(--s) * 11px);
  margin: calc(var(--s) * 4px) 0;
}
.short { color: var(--bad); font-size: calc(var(--s) * 12px); }
.good { color: var(--good); font-size: calc(var(--s) * 12px); }

/* viewColony frame */
.colony-view {
  display: flex; flex-wrap: wrap; gap: calc(var(--s) * 5px);
  background: #0a1a24 url('/assets/colony-bkg.jpg') center/cover;
  border: 1px solid var(--line); border-radius: 2px;
  padding: calc(var(--s) * 8px); margin-bottom: calc(var(--s) * 8px);
}
.colony-view-item { position: relative; }
.colony-view-item img {
  width: calc(var(--s) * 66px); height: calc(var(--s) * 66px);
  object-fit: cover; display: block; border: 1px solid #2a4159; border-radius: 1px;
}
.colony-view-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(3, 8, 14, .78); color: #cfe3f2;
  font-size: calc(var(--s) * 10px); text-align: center;
}

/* management frame: the txtRP_* production table */
.prod-table { width: 100%; }
.prod-table td { font-variant-numeric: tabular-nums; }
.prod-table td:not(:first-child), .prod-table th:not(:first-child) { text-align: right; }
.prod-table tr.total td { font-weight: bold; color: var(--text); border-top: 1px solid #2f4b6b; }
.boost-lamp {
  width: calc(var(--s) * 9px); height: calc(var(--s) * 9px); border-radius: 50%;
  background: #33424f; flex: 0 0 auto;
}
.boost-lamp.on { background: var(--good); box-shadow: 0 0 6px var(--good); }
.unit-thumb {
  width: calc(var(--s) * 26px); height: calc(var(--s) * 26px);
  object-fit: cover; display: block; border: 1px solid #2a4159; border-radius: 1px;
}

/* --- ScreenOrders ---------------------------------------------------------
   dgTabs @39,68 over the sub-menu at @36,175, with dgOrders filling from
   x 142. The sub-menu slot carries the sort buttons, the conquers total, or
   btnNewAllianceOrder depending on the tab. */
.orders-window { display: flex; gap: calc(var(--s) * 10px); align-items: flex-start; }
.ord-left { flex: 0 0 auto; width: calc(var(--s) * 112px); }
.ord-tabs {
  display: flex; flex-direction: column; gap: 1px;
  background: #0b1622; border: 1px solid var(--line); border-radius: 2px;
  padding: calc(var(--s) * 3px);
}
/* dgTabs: _textFormatBold, white; the selected row is the client's tan
   selection bar. */
button.ord-tab {
  text-align: left; width: 100%; border: 0; background: transparent;
  padding: calc(var(--s) * 3px) calc(var(--s) * 7px);
  font-size: calc(var(--s) * 12px); font-weight: bold; color: #fff; border-radius: 1px;
}
button.ord-tab:hover { background: #10202f; }
button.ord-tab.on { background: linear-gradient(#9a8358, #6e5b3a); color: #fff; }

.ord-submenu { margin-top: calc(var(--s) * 8px); }
.ord-sub {
  background: #0b1622; border: 1px solid var(--line); border-radius: 2px;
  padding: calc(var(--s) * 6px);
}
.ord-sub-title {
  font-size: calc(var(--s) * 10px); color: var(--dim);
  text-transform: uppercase; letter-spacing: .06em;
  padding-bottom: calc(var(--s) * 3px);
  border-bottom: 1px solid var(--line); margin-bottom: calc(var(--s) * 5px);
}
.ord-sub-value {
  font-size: calc(var(--s) * 18px); color: var(--accent);
  font-variant-numeric: tabular-nums; text-align: center;
  margin-bottom: calc(var(--s) * 4px);
}
/* mcSquadsSubMenu: "Sort:" centred over three teal buttons; the active one
   carries addStaticGlowEffect(_glow_innerOrange) (ScreenOrders.as:562-581). */
.ord-sort-title {
  font-size: calc(var(--s) * 12px); color: #fff; text-align: center;
  margin-bottom: calc(var(--s) * 5px);
}
button.ord-sort {
  display: block; width: 100%; text-align: center;
  margin-bottom: calc(var(--s) * 4px);
  font-size: calc(var(--s) * 12px); color: #fff;
  padding: calc(var(--s) * 3px) calc(var(--s) * 5px);
  background: linear-gradient(#0f6a86, #0a4a62); border: 1px solid #06303f;
}
button.ord-sort.on {
  background: linear-gradient(#6d7a52, #4b5634);
  box-shadow: inset 0 0 calc(var(--s) * 6px) #f0a020;
}

.ord-pane { flex: 1 1 0; min-width: 0; }
.ord-grid { max-height: calc(var(--s) * 340px); overflow-y: auto; }
.ord-empty {
  color: var(--dim); font-size: calc(var(--s) * 12px);
  text-align: center; padding: calc(var(--s) * 48px) 0;
}

/* --- ScreenRecruit / ScreenMilitaryManagement -----------------------------
   The picker is a 3x3 grid at x 43-215 with the stats panel from x 240 and the
   description across the bottom at y 357. */
/* The whole window is the canvas: .modal-abs covers the frame from its outer
   corner, and recruit-ui.js places every piece at its timeline position. */
.modal-abs { position: absolute; z-index: 1; }
.abs-screen { position: absolute; inset: 0; font: calc(var(--s) * 12px)/1.15 Arial, sans-serif; color: #dddddd; }
.abs-screen .iface-btn { padding: calc(var(--s) * 3px); }
/* fl.controls.DataGrid as the client skins it: 20px rows, a bold header, and
   the row text colours its data providers name (red, darkRed, darkGray). */
.dg, .dg-tabs { overflow-y: auto; overflow-x: hidden; }
/* ScreenActions tile lists: one slot per action, name over description,
   alternating darkGray / gray rows (refreshTileList :335-352). */
.act-list { overflow-y: auto; overflow-x: hidden; }
.rc-white.act-head { text-transform: none; }   /* "Actions" / "Covert Ops", as written */
/* TileListSlotDisplay "action": 60x60 picture in a grey frame on the left,
   txtName orange over txtDescription white; every row the same dark grey, the
   selected one the list's tan selection. */
.act-row {
  display: flex; align-items: flex-start; gap: calc(var(--s) * 8px);
  padding: calc(var(--s) * 4px); cursor: pointer;
  background: #333436; border-bottom: 1px solid #1c1d1f;
}
.act-row:hover { background: #3d3f42; }
.act-row.on { background: linear-gradient(#9a8358, #6e5b3a); }
.act-pic {
  flex: 0 0 auto; width: calc(var(--s) * 64px); height: calc(var(--s) * 64px);
  border: calc(var(--s) * 2px) solid #8a8c8f; background: #1a1b1d; box-sizing: border-box;
}
.act-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.act-text { flex: 1 1 auto; min-width: 0; padding-top: calc(var(--s) * 2px); }
.act-name { font-weight: bold; color: #ff9900; font-size: calc(var(--s) * 12px); }
.act-desc { color: #ffffff; font-size: calc(var(--s) * 12px); line-height: 1.3; }
.act-nospy, .act-not { color: #990000; }
.dg-row { display: flex; align-items: center; height: calc(var(--s) * 20px); white-space: nowrap; }
.dg-head { font-weight: bold; color: #ffffff; }
.dg-cell { flex: 0 0 auto; overflow: hidden; text-overflow: ellipsis; padding: 0 calc(var(--s) * 3px); }
.dg-icon { width: calc(var(--s) * 16px); height: calc(var(--s) * 16px); vertical-align: middle; }
.dg-click, .dg-tab { cursor: pointer; }
.dg-click:hover { background: rgba(0, 153, 255, .15); }
/* A tab row is an fl CellRenderer with the client's own skins: up is clear
   (Symbol 315), over a white wash 35% -> 15% (Symbol 318), selected an orange
   one, #ff9900 at 30% -> #ffd699 at 50% (Symbol 327), and selected-over the
   same at 50% -> 70% (Symbol 323), all top to bottom. The label keeps its
   own colour when selected. */
.dg-tab { font-weight: bold; padding: 0 calc(var(--s) * 4px); }
.dg-tab:hover { background: linear-gradient(rgba(255, 255, 255, .353), rgba(255, 255, 255, .153)); }
.dg-tab.on { background: linear-gradient(rgba(255, 153, 0, .302), rgba(255, 214, 153, .502)); }
.dg-tab.on:hover { background: linear-gradient(rgba(255, 153, 0, .502), rgba(255, 214, 153, .702)); }
/* ScreenColony and ScreenAdminTools draw their tabs with AlternatingRowColors
   (ScreenColony.as:613, ScreenAdminTools.as:344): even rows on
   CellRenderer_upSkinGray, odd on _upSkinDarkGray (AlternatingRowColors.as:
   70-79), the over / selected skins replacing them. */
.col-tabs .dg-tab:nth-child(odd):not(:hover):not(.on),
.adm-screen .com-tabs .dg-tab:nth-child(odd):not(:hover):not(.on) {
  background: url('../assets/client/CellRenderer_upSkinGray.png') 0 0 / 100% 100%; }
.col-tabs .dg-tab:nth-child(even):not(:hover):not(.on),
.adm-screen .com-tabs .dg-tab:nth-child(even):not(:hover):not(.on) {
  background: url('../assets/client/CellRenderer_upSkinDarkGray.png') 0 0 / 100% 100%; }
/* The colony's tab rows ask for "deafult_bold" -- a typo the renderer's switch
   does not know -- so they come out plain #dddddd; Tokens is orange_bold
   (ScreenColony.as:575-611, AlternatingRowColors.as:100-149). */
.col-tabs .dg-tab { font-weight: normal; color: #dddddd; }
.dg-red { color: #ff3333; }
.dg-darkRed { color: #aa0000; }
.dg-darkGray { color: #888888; }
.recruit-window { position: absolute; inset: 0; font: calc(var(--s) * 12px)/1.15 Arial, sans-serif; color: #dddddd; }
.rc-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-narrow { font-family: "Arial Narrow", Arial, sans-serif; font-weight: bold; font-stretch: condensed; }
.rc-white { color: #ffffff; text-transform: uppercase; }
.rc-center { text-align: center; }
.rc-right { text-align: right; }
.rc-warn { color: #cc0000; }                 /* _textColorWarning 13369344 */
.rc-hp { color: #00cc00; }
.rc-damage { color: #ff9900; }
.rc-range { color: #0099ff; }
.rc-desc { white-space: normal; line-height: 1.3; overflow: hidden; }
.rc-desc div { margin-bottom: calc(var(--s) * 2px); }
/* Symbols 419 / 44 / 417 / 342: outlined boxes, the picker's one filled dark
   with a header strip, the description's with a rule under its title. */
.rc-panel { border: 1px solid #2a5f8f; border-radius: calc(var(--s) * 3px); pointer-events: none; }
.rc-panel-dark {
  background: linear-gradient(#1d2f40 0, #1d2f40 var(--head), #000 var(--head));
}
.rc-panel-head {
  background: linear-gradient(transparent var(--head), #2a5f8f var(--head),
                              #2a5f8f calc(var(--head) + 1px), transparent calc(var(--head) + 1px));
}
.rc-rule { background: #2a5f8f; pointer-events: none; }
button.rc-cell {
  padding: 0; margin: 0; min-width: 0; display: grid; place-items: center;
  border: 0; border-image: none; background: url('../assets/client/Button_upSkin.png') 0 0 / 100% 100% no-repeat;
}
button.rc-cell img { width: calc(var(--s) * 50px); height: calc(var(--s) * 50px); object-fit: contain; }
button.rc-cell.is-locked img { filter: grayscale(1) brightness(.6); }
.rc-locked, .rc-marker { pointer-events: none; }
.rc-shot { object-fit: cover; }
.rc-icon { object-fit: contain; pointer-events: none; }
input.rc-amount {
  margin: 0; padding: 0 calc(var(--s) * 3px); border: 1px solid #2a5f8f; border-radius: 0;
  background: #000; color: #dddddd; font: calc(var(--s) * 12px) Arial, sans-serif; text-align: center;
}
input.rc-slider { margin: 0; accent-color: var(--accent); }
button.rc-btn { padding: 0; margin: 0; min-width: 0; font-size: calc(var(--s) * 12px); text-align: center; }
/* fl.controls.LabelButton lays its label and icon out over the WHOLE face
   (LabelButton.drawLayout, textPadding 5), the skin's scale-9 grid being art
   only. A real 8 / 10px CSS border would leave a 1 x 6px content box on the
   client's 21 x 22 arrow buttons and push icon and label down and right, so
   the skin is drawn as border-image over a zero-width border instead and the
   face is centred as a flex box. */
button.rc-btn { border-width: 0; border-image-width: calc(var(--s) * 8px) calc(var(--s) * 10px);
  display: inline-flex; align-items: center; justify-content: center;
  gap: calc(var(--s) * 5px); line-height: 1.15; }
button.rc-btn > img { flex: 0 0 auto; }
/* A disabled fl.controls.Button keeps its icon as it is and swaps only the
   skin (Button_disabledSkin) and the label colour -- it does not fade. The
   original's converter shows it: the Into buttons sit dark with their icons
   bright until a resource is picked. */
button.rc-btn:disabled { opacity: 1; color: #999999;
  border-image-source: url('../assets/client/Button_disabledSkin.png'); }
.rc-block {
  display: grid; place-items: center; padding: calc(var(--s) * 4px); text-align: center;
  background: rgba(0, 0, 0, .85); border: 1px solid #cc0000; color: #ff8a7d; white-space: normal;
}
/* --- ScreenAdminTools ----------------------------------------------------
   dgTabs down the left at x 10, frame content from x 138. Reuses the colony
   window's tab column. */
.admin-op {
  background: #0b1622; border: 1px solid var(--line); border-radius: 2px;
  padding: calc(var(--s) * 7px); margin-bottom: calc(var(--s) * 7px);
}
.admin-op .cost-label { margin-bottom: calc(var(--s) * 4px); }
.admin-op input.num { width: calc(var(--s) * 84px); }
.admin-op input.grow { width: 100%; text-align: left; }
.iface-btn.on {
  border-color: var(--good);
  box-shadow: 0 0 calc(var(--s) * 10px) var(--good),
              inset 0 0 calc(var(--s) * 12px) rgba(80, 220, 130, .35);
}

/* --- ScreenAdvisor -------------------------------------------------------
   Three columns side by side, each an avatar over a subtitle and a body. */
.advisor { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--s) * 12px); }
.advisor-col {
  background: #0b1622; border: 1px solid var(--line); border-radius: 3px;
  padding: calc(var(--s) * 10px); display: flex; flex-direction: column;
  gap: calc(var(--s) * 6px);
}
.advisor-head { display: flex; align-items: center; gap: calc(var(--s) * 7px); }
.advisor-avatar {
  width: calc(var(--s) * 26px); height: calc(var(--s) * 26px); object-fit: contain;
}
.advisor-name {
  font-size: calc(var(--s) * 11px); color: var(--dim);
  text-transform: uppercase; letter-spacing: .07em;
}
.advisor-title { font-weight: bold; color: var(--text); font-size: calc(var(--s) * 13px); }
.advisor-body { color: var(--dim); font-size: calc(var(--s) * 12px); line-height: 1.5; flex: 1 1 auto; }
@media (max-width: 760px) { .advisor { grid-template-columns: 1fr; } }

/* --- ScreenBattleReport --------------------------------------------------- */
.report-cols { display: flex; gap: calc(var(--s) * 12px); align-items: flex-start; }
.report-sides { flex: 1 1 0; min-width: 0; }
.report-log {
  flex: 0 0 auto; width: calc(var(--s) * 300px);
  background: #0b1622; border: 1px solid var(--line); border-radius: 3px;
  padding: calc(var(--s) * 8px);
}
.report-lines { max-height: calc(var(--s) * 300px); overflow-y: auto; margin-bottom: calc(var(--s) * 6px); }
@media (max-width: 860px) { .report-cols { flex-direction: column; } .report-log { width: 100%; } }

/* --- ScreenMissionCompleted ----------------------------------------------- */
.mission-done { text-align: left; }
.mission-done-title {
  font-size: calc(var(--s) * 16px); font-weight: bold; color: var(--accent);
  margin-bottom: calc(var(--s) * 8px);
}
.mission-icon { width: calc(var(--s) * 32px); height: calc(var(--s) * 32px); object-fit: contain; }
.mission-rewards { display: flex; gap: calc(var(--s) * 10px); margin: calc(var(--s) * 6px) 0 calc(var(--s) * 10px); }
.reward-slot {
  display: flex; align-items: center; gap: calc(var(--s) * 4px);
  background: #0c1826; border: 1px solid var(--line); border-radius: 2px;
  padding: calc(var(--s) * 4px) calc(var(--s) * 8px);
  font-variant-numeric: tabular-nums;
}
.reward-slot img { width: calc(var(--s) * 16px); height: calc(var(--s) * 16px); object-fit: contain; }

/* --- ScreenColonyStructures ----------------------------------------------
   The client stacks one full-stage layer per built structure over bkg.swf, all
   at 0,0, so the layers simply overlay one another at the stage's aspect. */
.colony-stage {
  position: relative; width: 100%; overflow: hidden;
  border: 1px solid var(--line); border-radius: 2px; background: #0a1a24;
  margin-bottom: calc(var(--s) * 8px);
}
.colony-layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block;
}

/* ScreenConfirmation's two text frames: txtInputSmall for a one-line
   question, txtInputBig for one that has to explain what is being given up. */
.confirm { position: absolute; inset: 0; }
.confirm-text {
  display: grid; place-items: center; text-align: center; overflow-y: auto; white-space: pre-line;
  font: calc(var(--s) * 12px)/1.35 Arial, sans-serif; color: #cccccc;
}
.confirm-icon { object-fit: contain; pointer-events: none; }
button.confirm-btn { padding: 0; margin: 0; min-width: 0; font-size: calc(var(--s) * 12px); text-align: center; }
.confirm-small { font-size: calc(var(--s) * 13px); line-height: 1.45; }
.confirm-big {
  font-size: calc(var(--s) * 12px);
  line-height: 1.6;
  color: #c8d6e4;
}

/* --- component skins from the client ------------------------------------- */
/* These are fl.controls skins extracted from client.swf and sampled for their
   real dimensions and colours, rather than approximated:
     CheckBox_upIcon / RadioButton_upIcon   14x14
     ScrollTrack_skin  15 wide, #002142
     ScrollThumb_upSkin 13 wide, #003366                                     */

input[type=checkbox], input[type=radio] {
  appearance: none; -webkit-appearance: none;
  width: calc(var(--s) * 14px); height: calc(var(--s) * 14px);
  margin: 0; padding: 0; border: 0; background: none;
  background-size: 100% 100%; background-repeat: no-repeat;
  cursor: pointer; vertical-align: middle;
}
input[type=checkbox] { background-image: url('../assets/client/CheckBox_upIcon.png'); }
input[type=checkbox]:checked { background-image: url('../assets/client/CheckBox_selectedUpIcon.png'); }
input[type=radio] { background-image: url('../assets/client/RadioButton_upIcon.png'); }
input[type=radio]:checked { background-image: url('../assets/client/RadioButton_selectedUpIcon.png'); }

* { scrollbar-width: thin; scrollbar-color: #003366 #002142; }
::-webkit-scrollbar { width: calc(var(--s) * 15px); height: calc(var(--s) * 15px); }
::-webkit-scrollbar-track { background: #002142; }
::-webkit-scrollbar-thumb { background: #003366; border: 1px solid #002142; }
::-webkit-scrollbar-thumb:hover { background: #00468c; }
::-webkit-scrollbar-corner { background: #002142; }

/* --- messages: ScreenMessages / MessageCompose / MessageRead ------------- */
/* Geometry from the client, in stage units. ScreenMessages puts dgTabs at
   x 37 and dgMessages at x 134, so the category column is ~90 wide; the action
   stack sits beneath it (btnCompose 87x39, the filters 87x26).               */
.msg-window { display: flex; gap: calc(var(--s) * 7px); align-items: flex-start; }
.msg-tabs { flex: 0 0 auto; width: calc(var(--s) * 90px); display: flex; flex-direction: column; gap: calc(var(--s) * 4px); }
.msg-tab { width: 100%; text-align: left; }
.msg-tab.on { filter: brightness(1.35); color: var(--accent); }
.msg-compose { width: calc(var(--s) * 87px); height: calc(var(--s) * 39px); margin-top: calc(var(--s) * 8px); }
.msg-filter {
  width: calc(var(--s) * 87px); height: calc(var(--s) * 26px);
  padding: 0; font-size: calc(var(--s) * 11px);
  white-space: nowrap; overflow: hidden;
}
.msg-unread { margin-top: calc(var(--s) * 6px); font-size: calc(var(--s) * 12px); color: var(--text); }

.msg-list { flex: 1 1 auto; min-width: 0; max-height: calc(var(--s) * 372px); overflow-y: auto; }
.msg-row {
  display: flex; gap: calc(var(--s) * 8px); align-items: baseline;
  padding: calc(var(--s) * 3px) calc(var(--s) * 5px);
  border-bottom: 1px solid #00346c; cursor: pointer;
}
.msg-row:hover { background: rgba(0, 52, 108, .35); }
.msg-row.unread .msg-subject, .msg-row.unread .msg-from { color: #ffffff; font-weight: bold; }
.msg-from { flex: 0 0 calc(var(--s) * 110px); color: var(--text); }
.msg-subject { flex: 1 1 auto; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-tick { flex: 0 0 calc(var(--s) * 52px); text-align: right; color: var(--dim); font-size: calc(var(--s) * 11px); }
/* txtNoContent is #cc0000 in the client. */
.msg-empty { color: #cc0000; padding: calc(var(--s) * 10px) calc(var(--s) * 6px); }

/* Compose: labels at x 39, inputs at x 103.8 running 212 wide, body 278x275. */
.msgc-window { display: flex; flex-direction: column; gap: calc(var(--s) * 7px); }
.msgc-row { display: flex; align-items: center; gap: calc(var(--s) * 6px); }
.msgc-label { flex: 0 0 calc(var(--s) * 59px); color: var(--text); }
.msgc-input { flex: 1 1 auto; width: 100%; }
.msgc-body { width: 100%; height: calc(var(--s) * 275px); resize: none; }
.msgc-foot { display: flex; align-items: center; justify-content: space-between; }
.msgc-chars { color: var(--text); font-size: calc(var(--s) * 12px); }
.msgc-send { width: calc(var(--s) * 91px); }

/* Read: an 85x22 action column at x 45.7 beside the reading pane at x 148. */
.msgr-window { display: flex; gap: calc(var(--s) * 12px); align-items: flex-start; }
.msgr-actions { flex: 0 0 auto; width: calc(var(--s) * 85px); display: flex; flex-direction: column; gap: calc(var(--s) * 2px); }
.msgr-act { width: calc(var(--s) * 85px); height: calc(var(--s) * 22px); padding: 0; font-size: calc(var(--s) * 11px); }
/* Pitched 24, with a 36 step before previous (296.6) and before parent (356.6). */
.msgr-act:nth-child(7), .msgr-act:nth-child(9) { margin-top: calc(var(--s) * 12px); }
.msgr-reply { width: calc(var(--s) * 91px); height: calc(var(--s) * 40px); margin-top: calc(var(--s) * 10px); }
/* btnFind: Grp_find at 20x20 beside the name. */
.msgr-find {
  width: calc(var(--s) * 20px); height: calc(var(--s) * 20px); padding: 0;
  margin-left: calc(var(--s) * 6px); vertical-align: middle;
  background: transparent center / contain no-repeat; border: 0; cursor: pointer;
}

/* ScreenJumpToLocation: every control placed absolutely from Symbol 868.
   txtInput*: Symbol 293, a black TextInput with a grey hairline. */
.abs-screen input.jtl-input {
  box-sizing: border-box; margin: 0; padding: 0 calc(var(--s) * 3px);
  font: calc(var(--s) * 12px) Arial, sans-serif; color: #ffffff;
  background: #000000; border: 1px solid #6f7f8f; border-radius: 0;
}
/* mcCoordsBackground: Symbol 226, a blue-edged black panel, scaled. */
.jtl-coords-bg { border-style: solid; border-width: calc(var(--s) * 5px);
  border-image: url('../assets/client/sprite_226.png') 5 fill stretch; }
/* btnCopyCoords / btnSaveCoords: Grp_copy / Grp_save at 20x20. */
.jtl-icon {
  width: calc(var(--s) * 22px); height: calc(var(--s) * 22px); padding: 0;
  background: transparent center / calc(var(--s) * 20px) no-repeat; border: 0; cursor: pointer;
}
/* dgCoords: Name 96, North 70, East 70. */
.jtl-coords { overflow-y: auto; }
.jtl-coord { display: flex; cursor: pointer; padding: calc(var(--s) * 2px) 0; }
.jtl-coord:nth-child(odd) { background: rgba(255, 255, 255, 0.05); }
.jtl-coord:hover { background: rgba(0, 204, 255, 0.15); }
.jtl-cname { width: calc(var(--s) * 96px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jtl-cnum { width: calc(var(--s) * 70px); color: #cccccc; }

/* ScreenMissions: left/top, tabs from y 194 pitched 64 (ScreenMissions.as:99-101).
   MissionTabMini 89x64 (Symbol 1390), MissionTab 274x64 (Symbol 1401): icon
   box mcIconSizer at (12.8, 13) ~39 square less 3 a side, txtMission at
   (63, 23.6) 194.55 wide, txtMission2Lines at (63, 15.55), txtTimer at
   (62, 32.9). */
#missions { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 6; pointer-events: none; }
.mis-slot { position: absolute; left: 0; pointer-events: auto; }
.mis-mini, .mis-tab {
  position: relative; height: calc(var(--s) * 64px); cursor: pointer;
  background: center / 100% 100% no-repeat;
}
.mis-mini { width: calc(var(--s) * 89px); background-image: url('../assets/ui/missions/mini_regular.png'); }
.mis-mini.waiting { background-image: url('../assets/ui/missions/mini_waiting.png'); }
.mis-mini.small { transform: scale(0.65); transform-origin: 0 0; }
.mis-mini.marked { box-shadow: 0 0 calc(var(--s) * 8px) #ffcc00; }
.mis-tab { width: calc(var(--s) * 274px); }
.mis-tab.mission, .mis-tab.disableMissions { background-image: url('../assets/ui/missions/tab_missionMouseOut.png'); }
.mis-tab.mission:hover, .mis-tab.disableMissions:hover { background-image: url('../assets/ui/missions/tab_missionMouseOver.png'); }
.mis-tab.waiting { background-image: url('../assets/ui/missions/tab_waitingMouseOut.png'); cursor: default; }
.mis-tab.waiting:hover { background-image: url('../assets/ui/missions/tab_waitingMouseOver.png'); }
.mis-tab.abort { background-image: url('../assets/ui/missions/tab_abortMouseOut.png'); }
.mis-tab.abort:hover { background-image: url('../assets/ui/missions/tab_abortMouseOver.png'); }
.mis-icon {
  position: absolute; left: calc(var(--s) * 15.8px); top: calc(var(--s) * 16px);
  width: calc(var(--s) * 33px); height: calc(var(--s) * 33px);
  background: center / contain no-repeat;
}
/* setTint(47359, 1): the icon flat-filled with #00B8FF. */
.mis-icon.tint {
  background: #00b8ff;
  -webkit-mask: var(--mis-icon) center / contain no-repeat;
  mask: var(--mis-icon) center / contain no-repeat;
}
.mis-text {
  position: absolute; left: calc(var(--s) * 63px); top: calc(var(--s) * 15.55px);
  width: calc(var(--s) * 194.55px); height: calc(var(--s) * 36.7px);
  display: flex; align-items: center;
  font-size: calc(var(--s) * 12px); color: #ffffff; line-height: 1.2;
}
.mis-tab.waiting .mis-text { top: calc(var(--s) * 5.55px); }
.mis-tab.abort .mis-text { left: calc(var(--s) * 20px); }
.mis-timer {
  position: absolute; left: calc(var(--s) * 62px); top: calc(var(--s) * 32.9px);
  width: calc(var(--s) * 195.55px); font-size: calc(var(--s) * 11px); color: #ffcc00;
}

/* ScreenMissionCompleted, absolute on Symbol 655. */
.mis-done .mis-done-title { font: bold calc(var(--s) * 16px) Arial, sans-serif; color: #ffcc00; }
.mis-done .mis-done-text { font: calc(var(--s) * 14px) Arial, sans-serif; color: #ffffff; }

/* ScreenOrders moving-units mode: every target row is RowColour "darkGreen"
   (ScreenOrders.as:644). */
.ord-moving td { background: #1b6a1b; color: #ffffff; }
.ord-moving:hover td { background: #238a23; }

/* ScreenButtons info_squad: Grp_info_squad is not in the earth theme, so the
   slot is empty and carries only its tooltip. */

/* ScreenColony bonusResources: tlVoteLinks is 3 x 100 wide, rows of 50, 4 rows. */
.bonus-votes {
  display: grid; grid-template-columns: repeat(3, calc(var(--s) * 100px));
  grid-auto-rows: calc(var(--s) * 50px); min-height: calc(var(--s) * 50px);
}

/* ScreenSendResources (absolute on its 328 x 507 frame). */
.sr-screen .sr-title { font-weight: bold; color: #ffffff; }
.sr-screen .sr-white { color: #ffffff; }
.sr-screen .sr-right { text-align: right; }
.sr-screen .sr-red { color: #cc0000; }
/* mcBackgroundExtra, Symbol 226 "mcWindow2": a #003399 rounded rim, black inside. */
.sr-screen .sr-extra { background: #000000; border: calc(var(--s) * 5px) solid #003399;
  border-radius: calc(var(--s) * 6px); box-sizing: border-box; }
/* mcBlockSendResources: Symbol 383's black over the resources half. */
.sr-screen .sr-block { background: #000000; z-index: 1; }
/* UIScrollBar (Symbol 104) as a slider, scrollbar.js: built upright -- arrow,
   track, thumb, arrow -- and turned about its corner by the symbol's matrix:
   (0, 1, c, 0) transposes it (ScreenSendResources), (0, -b, c, 0) rotates it
   a quarter turn back (ScreenMusicPlayer's sbVolume). Either way the up arrow
   is the left end. */
.ui-sb { transform-origin: 0 0; cursor: pointer; touch-action: none;
  background: url('../assets/client/ScrollTrack_skin.png') 0 0 / 100% 100% no-repeat; }
.ui-sb.ui-sb-transposed { transform: matrix(0, 1, 1, 0, 0, 0); }
.ui-sb.ui-sb-rotated { transform: matrix(0, -1, 1, 0, 0, 0); }
.ui-sb-up, .ui-sb-down { position: absolute; left: 0; width: 100%;
  height: calc(var(--s) * 14px); background: url('../assets/client/ScrollArrowUp_upSkin.png') 0 0 / 100% 100% no-repeat; }
.ui-sb-up { top: 0; }
.ui-sb-down { bottom: 0; background-image: url('../assets/client/ScrollArrowDown_upSkin.png'); }
.ui-sb-thumb { position: absolute; left: 7%; width: 86%;
  background: url('../assets/client/ScrollThumb_upSkin.png') 0 0 / 100% 100% no-repeat; }
/* ScreenProfileView btnSendTokens: Grp_tokenA at 40x40. */
.profile-tokens {
  width: calc(var(--s) * 44px); height: calc(var(--s) * 44px); padding: 0;
  background: transparent center / calc(var(--s) * 40px) no-repeat;
}
.profile-tokens:disabled { opacity: 0.4; }

/* ScreenConfirmation's txtInputSmall. */
.confirm-input { box-sizing: border-box; font-size: calc(var(--s) * 12px); }
.msgr-pane { flex: 1 1 auto; min-width: 0; }
.msgr-head { display: flex; gap: calc(var(--s) * 10px); align-items: flex-start; }
/* Same avatar convention as everywhere else: 66x65 frame over a 60x60 portrait. */
.msgr-avatar {
  position: relative; flex: 0 0 auto;
  width: calc(var(--s) * 66px); height: calc(var(--s) * 65px);
  background-size: calc(var(--s) * 60px) calc(var(--s) * 60px);
  background-position: center; background-repeat: no-repeat;
}
.msgr-avatar.gilt::after {
  content: ''; position: absolute; inset: 0;
  background: url('../assets/client/sprite_215.png') 0 0 / 100% 100% no-repeat;
}
.msgr-meta { flex: 1 1 auto; min-width: 0; }
.msgr-line { display: flex; gap: calc(var(--s) * 8px); }
.msgr-label { flex: 0 0 calc(var(--s) * 59px); color: var(--text); }
.msgr-value { flex: 1 1 auto; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.msgr-body {
  margin-top: calc(var(--s) * 12px); color: var(--text);
  white-space: pre-wrap; max-height: calc(var(--s) * 329px); overflow-y: auto;
}

/* --- broadcasts: the HUD ticker and its compose window ------------------- */
/* ScreenBroadcast is part of the persistent HUD, not a window: five 31x31
   controls at y 62.1 pitched 33.1, and txtBroadcast as a single line at size 14
   in #00cc00.                                                              */
/* ---------------------------------------------------------------------------
   ScreenBroadcast -- the whole bottom-left bar, at the client's own geometry:

     mcAvatarFrame  @11.5,22.8  66x65   over mcAvatarHolder 60x60
     btnGlobalChat  @96.4,19.2  121x32
     btnAllianceChat@222.8,19.3 127x32
     five 31x31 controls at y 62.1, pitched 33.1
     txtBroadcast   @268.4,69.9

   So the avatar is a column on the left and everything else stacks beside it:
   the two chat tabs on top, the controls and the message line beneath.
   --------------------------------------------------------------------------- */
/* StageManager.as:247-259 docks a screen to the stage edge outright --
   `param1.y = stage.stageHeight - param1.mcBackground.height` -- so the bar sits
   flush on the bottom, full width, with no gap around it. And mcBackground is
   OPAQUE: the map runs on behind it but nothing shows through, which is why the
   original reads as a clean strip under a clean map.

   This used to inherit .screen's rgba(0,0,0,.70) and float on a 10px inset, so
   the terrain and any map object underneath showed through it at 30%. */
#broadcast {
  left: 0; right: 0; bottom: 0;
  background: #050b12;
  border: 0;
  border-top: 1px solid #00346c;
  display: flex; align-items: flex-start; gap: calc(var(--s) * 6px);
  padding: calc(var(--s) * 5px) calc(var(--s) * 8px);
}
.bcast { display: flex; align-items: flex-start; gap: calc(var(--s) * 6px); width: 100%; }

/* mcAvatarFrame is Symbol 215 again -- a gilt surround with a transparent
   centre, drawn 66x65 over a 60x60 portrait. */
.bcast-avatar {
  width: calc(var(--s) * 66px); height: calc(var(--s) * 65px);
  flex: 0 0 auto; position: relative; background: #061019;
  display: grid; place-items: center; line-height: 0; cursor: pointer;
  overflow: hidden;
}
.bcast-avatar.gilt::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url('../assets/client/sprite_215.png') 0 0 / 100% 100% no-repeat;
}
.bcast-avatar.is-empty { background: linear-gradient(160deg, #16324a, #06101a); }
.bcast-avatar svg { display: block; }

.bcast-right { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
               gap: calc(var(--s) * 4px); }
.bcast-tabs { display: flex; gap: calc(var(--s) * 5px); flex: 0 0 auto; }
.bcast-tab {
  width: calc(var(--s) * 121px); height: calc(var(--s) * 26px);
  padding: 0; font-size: calc(var(--s) * 12px); position: relative;
}
.bcast-tab:last-child { width: calc(var(--s) * 127px); }
/* txtNewAllianceChatMessage, #ffcc00. */
.bcast-new {
  position: absolute; right: calc(var(--s) * 4px); top: 50%;
  transform: translateY(-50%);
  color: #ffcc00; font-size: calc(var(--s) * 9px); font-weight: bold;
}

.bcast-bottom { display: flex; align-items: center; gap: calc(var(--s) * 6px);
                min-width: 0; }
.bcast-controls { display: flex; gap: calc(var(--s) * 2.1px); flex: 0 0 auto; }
.bcast-btn {
  width: calc(var(--s) * 31px); height: calc(var(--s) * 31px);
  padding: 0; font-size: calc(var(--s) * 13px); font-weight: bold;
  display: grid; place-items: center;
}
.bcast-btn img {
  /* setStyle("icon", getGraphicIcon(..., 16, 16, ...)) -- the client sizes
     every one of these to 16x16. */
  width: calc(var(--s) * 16px); height: calc(var(--s) * 16px);
  object-fit: contain;
}
.bcast-tab { display: inline-flex; align-items: center; justify-content: center;
             gap: calc(var(--s) * 5px); }
.bcast-tab-icon { width: calc(var(--s) * 16px); height: calc(var(--s) * 16px);
                  object-fit: contain; }
.bcast-line {
  flex: 1 1 auto; min-width: 0;
  font-size: calc(var(--s) * 14px);
  white-space: nowrap; overflow: hidden;
}
/* refreshBroadcastText: a normal broadcast is "[tick] name: " in grey with the
   text in green; an admin's is the name in bold orange, and no tick. */
.bcast-who { color: #999999; }
.bcast-who.is-admin { color: #ff9900; font-weight: bold; }
.bcast-text { color: #00cc00; }
.bcast-line.empty { color: var(--dim); font-size: calc(var(--s) * 12px); }

/* ScreenChat (Symbol 1128): no chrome -- Symbol 1120's black at 70% inside a
   #01366b rule, the input's black box ruled #003399. */
.modal-box[data-screen="ScreenChat"], .modal-box[data-screen="AllianceChat"] { filter: none; }
.chat-screen .chat-panel { background: rgba(0, 0, 0, 0.70); border: 1px solid #01366b; box-sizing: border-box; }
.chat-screen .chat-inbox { background: #000000; border: 1px solid #003399; box-sizing: border-box; }
.chat-screen .chat-online { font: calc(var(--s) * 16px) Arial, sans-serif; color: #00ccff; }
.chat-screen .chat-log { overflow-y: scroll; font: calc(var(--s) * 12px)/calc(var(--s) * 17px) Arial, sans-serif; color: #dddddd; }
/* mcChatHighlight: the 17px row under the cursor. */
.chat-screen .chat-line { cursor: pointer; }
.chat-screen .chat-line:hover { background: rgba(255, 255, 255, 0.12); }
.chat-screen .chat-input { box-sizing: border-box; margin: 0; padding: 0 calc(var(--s) * 2px); border: 0;
  background: transparent; font: calc(var(--s) * 12px) Arial, sans-serif; color: #dddddd; }
.chat-screen .chat-cooldown { font: calc(var(--s) * 14px) Arial, sans-serif; color: #ffffff; }
/* chat.AllianceChat (BasicChat): ACBackgroundSkin -- #444444 rim on #0f101c --
   with its bevel and drop shadow, the title Arial 18 bold #ff9900. */
.ac-screen .ac-bg { border: calc(var(--s) * 5px) solid #444444; border-radius: calc(var(--s) * 4px);
  background: #0f101c; box-sizing: border-box; box-shadow: 0 calc(var(--s) * 1px) calc(var(--s) * 4px) rgba(0, 0, 0, .88); }
.ac-screen .ac-title { font: bold calc(var(--s) * 18px) Arial, sans-serif; color: #ff9900; text-align: center; }
.ac-screen button.ac-iconbtn { padding: 0; margin: 0; min-width: 0; border-radius: 0;
  background: #333333 center / 70% no-repeat; border: 1px solid #666666; cursor: pointer; }
.ac-screen button.ac-close { background-image: url('../assets/ui/chat/acClose.png'); }
.ac-screen button.ac-fill { background-image: url('../assets/ui/chat/acFillWindow.png'); }
/* ACTextBackgroundSkin: white at 10% inside a #cccccc rule. */
.ac-screen .ac-textbg { background: rgba(255, 255, 255, 0.10); border: 1px solid #cccccc;
  border-radius: calc(var(--s) * 3px); box-sizing: border-box; pointer-events: none; }
.ac-screen .ac-output { overflow-y: auto; padding: calc(var(--s) * 2px); box-sizing: border-box;
  font: calc(var(--s) * 12px) Arial, sans-serif; color: #dddddd; }
.ac-screen .ac-line { display: flex; gap: calc(var(--s) * 4px); margin-bottom: calc(var(--s) * 4px); }
.ac-screen .ac-nick { flex: 0 0 auto; max-width: calc(var(--s) * 128px); overflow: hidden; }
.ac-screen .ac-sep { font-weight: bold; }
.ac-screen .ac-input { resize: none; box-sizing: border-box; margin: 0; padding: calc(var(--s) * 3px);
  background: transparent; border: 0; font: calc(var(--s) * 12px) Arial, sans-serif; color: #dddddd; }
.ac-screen .ac-devider { background: url('../assets/ui/chat/acDevider.png') 0 0 / 100% 100%; opacity: .5; }
.ac-screen .ac-corner { background: url('../assets/ui/chat/acCornerGrab.png') 0 0 / 100% 100% no-repeat; }
.ac-screen .ac-channels { box-sizing: border-box; margin: 0; font: calc(var(--s) * 12px) Arial, sans-serif;
  color: #dddddd; background: url('../assets/client/ComboBox_upSkin.png') 0 0 / 100% 100% no-repeat; border: 0; }
.ac-screen .ac-channels option { background: #0b1c33; }
.ac-screen .ac-users { overflow-y: auto; font: calc(var(--s) * 12px) Arial, sans-serif; color: #dddddd;
  border: 1px solid #333333; box-sizing: border-box; }
.ac-screen .ac-user { display: flex; align-items: center; gap: calc(var(--s) * 3px); height: calc(var(--s) * 20px); }
.ac-screen .ac-user img { width: calc(var(--s) * 16px); height: calc(var(--s) * 16px); }

/* Compose: 361x456, rules at size 11, input 275x22, send 165x22. */
.bcastc .bcastc-rules { font: calc(var(--s) * 11px)/1.3 Arial, sans-serif; color: #dddddd; white-space: pre-wrap; overflow: hidden; }
.bcastc .bcastc-12 { font: calc(var(--s) * 12px) Arial, sans-serif; color: #dddddd; }
.bcastc .bcastc-right { text-align: right; }
.bcastc .bcastc-wrap { white-space: normal; }
.bcastc .bcastc-warn { font: bold calc(var(--s) * 12px) 'Arial Narrow', Arial, sans-serif; color: #cc0000; }
.bcastc [hidden] { display: none; }
/* ScreenNews. */
.news .news-title { font: bold calc(var(--s) * 16px) Arial, sans-serif; color: #ff9900; white-space: normal; }
.news .news-meta { font: calc(var(--s) * 12px) Arial, sans-serif; color: #ff9900; }
.news .news-body { font: calc(var(--s) * 12px)/1.3 Arial, sans-serif; color: #dddddd; white-space: pre-wrap; overflow-y: auto; }
.news .news-avatar { object-fit: cover; }

/* The structures detail panel's cost block, laid out as the client does:
   two columns -- txtCostText "cost:" at x 592 over txtCostMetal (616,318) and
   txtCostOil (616,341), each behind a resource icon; txtTimeToBuildText
   "time:" at x 694 over txtTimeToBuild (694,318). Not three stacked rows. */
.struct-costgrid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: calc(var(--s) * 4px) calc(var(--s) * 8px);
  margin-bottom: calc(var(--s) * 6px);
}
.struct-costcol { display: flex; flex-direction: column; gap: calc(var(--s) * 4px); }
.struct-colhead { color: var(--text); }
.struct-costrow { display: flex; align-items: center; gap: calc(var(--s) * 5px); color: var(--text); }
.struct-costicon {
  width: calc(var(--s) * 14px); height: calc(var(--s) * 14px);
  flex: 0 0 auto; background-size: contain; background-repeat: no-repeat; background-position: center;
}
.struct-costicon.is-metal { background-image: var(--icon-metal, url('../assets/ui/metal.png')); }
.struct-costicon.is-oil { background-image: var(--icon-oil, url('../assets/ui/oil.png')); }

/* The detail panel's three bordered sections. Symbol 44 (y 67.7, 288.7) and
   Symbol 342 (y 163.7) draw a ~#00264e border at about half opacity over a
   transparent interior, with a divider line under the section header. */
.struct-sec {
  border: 1px solid rgba(0, 38, 78, .55);
  padding: calc(var(--s) * 5px) calc(var(--s) * 6px);
  margin-bottom: calc(var(--s) * 6px);
}
.struct-sec .struct-title {
  border-bottom: 1px solid rgba(24, 58, 95, .55);
  padding-bottom: calc(var(--s) * 3px);
  margin: 0 0 calc(var(--s) * 5px);
}
.struct-sec:last-child { margin-bottom: 0; }
/* ScreenAdminVote: the RadioButton skin's 14px icon (input[type=radio] above). */
.vote-screen input.vote-rb { width: calc(var(--s) * 14px); height: calc(var(--s) * 14px); margin: 0; cursor: pointer; }
.vote-screen input.vote-rb:disabled { cursor: default; }

/* ScreenToolTip. The client's map tooltip is black arial on the pale panel
   background, with the ruler name bold and status lines coloured. */
#maptooltip {
  position: fixed; z-index: 60; display: none;
  max-width: calc(320px * var(--s));
  padding: calc(5px * var(--s)) calc(8px * var(--s));
  background: #f2e6cd; border: 1px solid #6b5a3e; border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  color: #000; font: calc(11px * var(--s))/1.35 Arial, Helvetica, sans-serif;
  pointer-events: none; white-space: pre;
}
#maptooltip.on { display: block; }
.tt-line { margin: 0; }
.tt-name { font-weight: bold; }
.tt-rank { padding-left: calc(12px * var(--s)); }   /* the client indents it */
.tt-red { color: #b40000; }
.tt-blue { color: #0b57a4; }
.tt-indent { padding-left: calc(10px * var(--s)); }
.tt-more { color: #6b5a3e; }

/* ScreenSquadOrders. Not modal: the client floats it at the edge of the stage
   while the map stays live, because the figures track the cursor. */
#modal.floating { background: none; pointer-events: none;
                  place-items: end end; padding: calc(16px * var(--s)); }
#modal.floating .modal-box { pointer-events: auto; }
/* A floating screen the stage aligns right and centre (StageManager setAlignment
   "right", "center"): ScreenToggleVisibility, ScreenTerritories, ScreenTicksRuler. */
#modal.floating.anchor-right { place-items: center end; }

/* Window 470 wide: dgSquads column ~172 (x 30.5 to 203), figures from x 203. */
.so-window { display: grid; grid-template-columns: 172fr 245fr;
             gap: calc(12px * var(--s)); align-items: start; }
.so-left { display: flex; flex-direction: column; gap: calc(6px * var(--s)); }
.so-list { border: 1px solid rgba(127, 200, 255, 0.25);
           background: rgba(4, 12, 20, 0.6); min-height: calc(118px * var(--s));
           max-height: calc(160px * var(--s)); overflow-y: auto; }
.so-row { display: flex; justify-content: space-between; cursor: pointer;
          padding: calc(3px * var(--s)) calc(6px * var(--s));
          font-size: calc(11px * var(--s)); color: #7f9cb4; }
.so-row.on { color: #ffd88a; background: rgba(120, 90, 30, 0.35); }
.so-head { cursor: default; color: #9fd0ff; font-weight: bold;
           background: rgba(20, 48, 74, 0.8); }
.so-head.on { background: rgba(20, 48, 74, 0.8); color: #9fd0ff; }
.so-units { opacity: 0.9; }
.so-selectall { width: 100%; font-size: calc(11px * var(--s)); }

.so-right { display: flex; flex-direction: column; gap: calc(5px * var(--s)); }
.so-figure { font-size: calc(12px * var(--s)); color: #d6ecff; }
.so-figure.warn, .so-figure .warn, .so-costval.warn { color: #ff6b5b; }
.so-cost { display: flex; gap: calc(8px * var(--s)); }
.so-costval { color: #ffd88a; font-weight: bold; }
.so-delayval { color: #ffb347; font-weight: bold; }
.so-delay { display: flex; align-items: center; gap: calc(8px * var(--s)); }
.so-stepper { width: calc(56px * var(--s)); background: rgba(4, 12, 20, 0.8);
              border: 1px solid rgba(127, 200, 255, 0.3); color: #d6ecff;
              font-size: calc(11px * var(--s)); padding: calc(2px * var(--s)); }
.so-arrive { color: #9fc4dd; font-size: calc(11px * var(--s)); }
.so-buttons { display: flex; gap: calc(8px * var(--s)); margin-top: calc(4px * var(--s)); }
.so-buttons .btn { flex: 1; }
.so-buttons .btn:disabled { opacity: 0.45; cursor: default; }
.so-hint { grid-column: 1 / -1; font-size: calc(10px * var(--s)); color: #7f9cb4; }

/* ScreenOrders squads list. The client colours the row's NAME, not the row:
   orange for the base garrisons, red for the missile and the spy. */
.ord-orange { color: #f0a020; }
.ord-red { color: #e04a3a; }
/* StatusIcon column, width 20; the art is $mc_0020_* -- 20px. */
.ord-statusicon { width: calc(20px * var(--s)); text-align: center; }
.ord-statusicon img { width: calc(20px * var(--s)); height: calc(20px * var(--s));
                      vertical-align: middle; }

/* CapacityBar: $bar_080_010_<pct>_<max>_<s>_<v>_<t> -- an 80x10 bar segmented
   by the squad's three chassis counts, so it shows what a squad is made of and
   not only how full it is. */
/* BDBar as a DataGrid icon: 80 x 10, mcBackground black inside the Symbol 118
   hairline (#333333), the "orange" fill (Symbol 116 frame "orange": a vertical
   #ff9900 -> #ffcc00 -> #ffcc00 -> #ff9900 gradient) to the percentage, and --
   with createUnitsSeparatorLines -- 0xD87701 rules after each tank and vehicle
   inside a 0xD7D7D7 border (BDBar.as:87-131). */
.ord-bar { position: relative; flex: 0 0 auto; box-sizing: border-box;
           width: calc(80px * var(--s)); height: calc(10px * var(--s));
           background: #000000; border: 1px solid #333333; overflow: hidden; }
.ord-bar.ruled { border-color: #d7d7d7; }
.ord-bar-fill { height: 100%;
  background: linear-gradient(#ff9900 0%, #ffcc00 29%, #ffcc00 71%, #ff9900 100%); }
.ord-bar-line { position: absolute; top: 0; bottom: 0; width: 1px; background: #d87701; }

/* ScreenMilitaryManagement (Symbol 668), absolute: txtName white, txtStatus,
   txtCapacity, mcCapacityBar2 148 x 15 with its orange fill, btnRecruit and
   btnLastRecruit 60 x 60 with mcPlus and txtLastRecruitAmount over the face. */
.mm-abs .mm-name-static { font: calc(var(--s) * 12px) Arial, sans-serif; color: #ffffff; }
.mm-abs .mm-status, .mm-abs .mm-cap { font: calc(var(--s) * 12px) Arial, sans-serif; color: #dddddd; }
.mm-abs .mm-bar { background: rgba(4, 12, 20, 0.85); border: 1px solid rgba(127, 200, 255, 0.3);
  overflow: hidden; box-sizing: border-box; }
.mm-abs .mm-bar-fill { height: 100%; background: repeating-linear-gradient(
  90deg, #f0a020 0 calc(4px * var(--s)), rgba(0,0,0,0.25) calc(4px * var(--s)) calc(6px * var(--s))); }
.mm-abs .mm-bar-fill.over { background: #ff6b5b; }
.mm-abs .mm-btn { padding: 0; display: grid; place-items: center; overflow: hidden; }
.mm-abs .mm-btn:disabled { opacity: 0.45; cursor: default; }
.mm-abs .mm-btn-icon { width: calc(40px * var(--s)); height: calc(40px * var(--s)); pointer-events: none; }
.mm-abs .mm-btn-face { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.mm-abs .mm-plus { pointer-events: none; }
.mm-abs .mm-lastamount { pointer-events: none; font: bold calc(var(--s) * 11px) Arial, sans-serif; color: #ffd88a;
  text-shadow: 0 0 3px #000, 0 0 3px #000; text-align: right; }
.mm-tiles { display: grid; grid-template-columns: repeat(3, calc(135px * var(--s)));
            grid-auto-rows: calc(85px * var(--s)); align-content: start;
            height: calc(425px * var(--s)); overflow-y: scroll;
            width: calc(405px * var(--s) + 16px); }

/* One TileListSlotDisplay (Symbol 1368), 135 x 85, every part at the symbol's
   own position. Backgrounds are mcTileListSlotBackground's "orange" (#ffcc00 at
   25%) for a unit in training and "darkGray" (white at 10%) otherwise; the
   thin blue edge on the top and left is Symbols 1332 / 1343. */
.mm-tile { position: relative; width: calc(135px * var(--s)); height: calc(85px * var(--s));
           background: rgba(255, 255, 255, 0.10); cursor: pointer;
           box-shadow: inset 1px 1px 0 rgba(0, 102, 204, 0.55); overflow: hidden; }
.mm-tile.training { background: rgba(255, 204, 0, 0.25); cursor: default; }
/* mcInnerGlow "glowOn" */
.mm-tile.on { box-shadow: inset 0 0 calc(10px * var(--s)) rgba(255, 220, 120, 0.95),
                          inset 1px 1px 0 rgba(0, 102, 204, 0.55); }
/* mcPicturePlaceHolder at 27.6, 16.15, about 52 x 53; the frame over it. */
.mm-tile-face { position: absolute; left: calc(27.6px * var(--s)); top: calc(16.15px * var(--s));
                width: calc(51.7px * var(--s)); height: calc(53.3px * var(--s)); object-fit: cover; }
.mm-tile-frame { position: absolute; left: calc(22px * var(--s)); top: calc(13px * var(--s));
                 width: calc(65px * var(--s)); height: calc(65px * var(--s)); pointer-events: none; }
/* mcHpBar2: BDBarSimple2 stood upright at x 5, rising from y 77 -- 3px
   segments with 2px gaps, empty ones blue, filled ones the fill colour. */
.mm-tile-hp { position: absolute; left: calc(6px * var(--s)); top: calc(9px * var(--s));
              width: calc(9px * var(--s)); height: calc(67px * var(--s));
              background: repeating-linear-gradient(to top, rgba(40, 110, 190, 0.85) 0 calc(3px * var(--s)),
                          transparent calc(3px * var(--s)) calc(5px * var(--s))); }
.mm-tile-hp-fill { position: absolute; left: 0; right: 0; bottom: 0;
                   background: repeating-linear-gradient(to top, #2fd02f 0 calc(3px * var(--s)),
                               transparent calc(3px * var(--s)) calc(5px * var(--s))); }
.mm-tile-hp-fill.orange { background: repeating-linear-gradient(to top, #ff9900 0 calc(3px * var(--s)),
                          transparent calc(3px * var(--s)) calc(5px * var(--s))); }
.mm-tile-hp-fill.red { background: repeating-linear-gradient(to top, #e02020 0 calc(3px * var(--s)),
                       transparent calc(3px * var(--s)) calc(5px * var(--s))); }
.mm-tile > .mm-t-icon { position: absolute; width: calc(20px * var(--s)); height: calc(20px * var(--s)); }
/* unit_training: txtTraining, Grp_tick, txtTicksLeft */
.mm-t-training { position: absolute; left: calc(86px * var(--s)); top: calc(9.75px * var(--s));
                 width: calc(45.5px * var(--s)); text-align: right;
                 font: bold calc(12px * var(--s)) Arial, sans-serif; color: #ff9900; }
.mm-t-tick { left: calc(89.6px * var(--s)); top: calc(55px * var(--s)); }
.mm-t-ticks { position: absolute; left: calc(113px * var(--s)); top: calc(57.25px * var(--s));
              width: calc(16.8px * var(--s)); text-align: center;
              font: bold calc(12px * var(--s)) "Arial Narrow", Arial, sans-serif; color: #fff; }
/* unit_active: Grp_hp / txtHP, weapon / txtDamage, Grp_range / txtRange */
.mm-t-staticon { left: calc(89.6px * var(--s)); }
.mm-t-stat { position: absolute; left: calc(112px * var(--s)); width: calc(18.5px * var(--s));
             text-align: center; font: bold calc(12px * var(--s)) "Arial Narrow", Arial, sans-serif; }
.mm-t-stat.hp { color: #cc0000; }
.mm-t-stat.dmg { color: #ff9900; }
.mm-t-stat.rng { color: #0099ff; }
.mm-t-xp { position: absolute; left: calc(23px * var(--s)); top: calc(63.75px * var(--s));
           font: calc(12px * var(--s)) Arial, sans-serif; color: #fff; }
.mm-t-rank { left: calc(59.35px * var(--s)); top: calc(48.95px * var(--s));
             background: rgba(0, 0, 0, 0.6); }

/* ScreenSquadOrders: the figure rows carry the client's own icons, and the
   gate block sits under the launch block behind mcGateBlock. */
.so-icon { width: calc(13px * var(--s)); height: calc(13px * var(--s));
           vertical-align: -2px; margin-left: calc(3px * var(--s)); }
.so-costlabel { min-width: calc(44px * var(--s)); display: inline-block; }
.so-costpair { display: inline-flex; align-items: center;
               margin-right: calc(10px * var(--s)); }
.so-warn { font-size: calc(10px * var(--s)); color: #ff6b5b; min-height: 1em; }
.so-reopen { width: 100%; font-size: calc(11px * var(--s));
             margin-top: calc(4px * var(--s)); }
.so-reopen.on { background: rgba(120, 90, 30, 0.5); color: #ffd88a; }

/* The gate section. mcGateBlock covers it rather than hiding it, so the
   controls stay visible but plainly unavailable. */
.so-gate { position: relative; margin-top: calc(8px * var(--s));
           padding: calc(6px * var(--s));
           border-top: 1px solid rgba(127, 200, 255, 0.22);
           display: flex; flex-direction: column; gap: calc(4px * var(--s)); }
.so-gatebtn { align-self: flex-end; min-width: calc(90px * var(--s)); }
.so-gatebtn:disabled { opacity: 0.45; cursor: default; }
.so-gateblock { position: absolute; inset: 0; background: rgba(4, 10, 18, 0.72);
                backdrop-filter: saturate(0.2); }

/* ScreenCommunity's relation flags. The button's colour is the colour it
   paints on the map, which is how the client makes the link obvious. */
.flagbtn { flex: 1; font-size: calc(11px * var(--s));
           border-left: calc(4px * var(--s)) solid transparent; }
.flagbtn.on { box-shadow: inset 0 0 0 1px currentColor; font-weight: bold; }
.f-red    { border-left-color: #f03232; }
.f-blue   { border-left-color: #84baac; }
.f-white  { border-left-color: #fefe32; }
.f-purple { border-left-color: #662244; }
.f-orange { border-left-color: #ff9900; }

/* ---------------------------------------------------------------------------
   The avatar tab (ScreenProfile) and AvatarCreator.

   Two previews side by side, mcAvatar120 and mcAvatar60; nine layer buttons,
   the selected one glowing orange the way AvatarCreator's GlowFilter does; and
   twelve colour swatches, of which only the ones the layer's palette reaches
   are shown.
   --------------------------------------------------------------------------- */
.avatar-stage {
  display: flex; align-items: flex-end; gap: calc(var(--s) * 10px);
  margin-bottom: calc(var(--s) * 8px);
}
.avatar-120, .avatar-60 {
  background: #000; border: 1px solid var(--line); line-height: 0;
}
.avatar-120 svg, .avatar-60 svg { display: block; }

.avatar-parts {
  display: flex; flex-wrap: wrap; gap: calc(var(--s) * 3px);
  margin-bottom: calc(var(--s) * 6px);
}
.avatar-parts button.mini { margin-left: 0; }
.avatar-parts button.sel {
  /* GlowFilter(16750848, ...) — 0xff9900. */
  box-shadow: 0 0 0 1px #ff9900, 0 0 calc(var(--s) * 6px) #ff9900;
  border-color: #ff9900;
}

.avatar-steps { align-items: center; gap: calc(var(--s) * 3px); }
.avatar-steps button.mini { margin-left: 0; }

.avatar-colors {
  display: flex; flex-wrap: wrap; gap: calc(var(--s) * 4px);
  margin: calc(var(--s) * 6px) 0;
}
.avatar-colors button.swatch {
  width: calc(var(--s) * 20px); height: calc(var(--s) * 20px);
  padding: 0; border: 1px solid var(--line); margin: 0;
}
.avatar-colors button.swatch.sel { outline: 2px solid #fff; outline-offset: 1px; }

.avatar-pads {
  display: flex; flex-wrap: wrap; gap: calc(var(--s) * 3px);
  margin-bottom: calc(var(--s) * 6px);
}
.avatar-pads button.mini { margin-left: 0; }

.avatar-actions { gap: calc(var(--s) * 4px); margin-top: calc(var(--s) * 4px); }

/* txtSetAvatar (ScreenTopLeft.as:332): the caption that shows in the holder
   while the avatar is empty, and hides the moment one is set. */
#avatar { position: relative; cursor: pointer; line-height: 0; overflow: hidden; }
#avatar .set-avatar {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: calc(var(--s) * 9px); color: #cfe4ff; text-align: center;
  text-shadow: 0 1px 2px #000; line-height: 1.1; padding: 0 2px;
}
#avatar svg, .profile-avatar svg { display: block; }
.profile-avatar { line-height: 0; overflow: hidden; }

/* A locked detail panel shows the lock, not a greyed photograph. */
.struct-shot.is-locked { display: grid; place-items: center; background: #0b1622; }

/* ---------------------------------------------------------------------------
   ScreenEvents.

   Three columns at the client's own widths -- Type 60, Description 380,
   Tick 70 -- with the icon centred in the first and the tick right-aligned in
   the last. AlternatingRowColors is the grid's cell renderer, and an unread
   row is the one the New tab is about.
   --------------------------------------------------------------------------- */
table.events-table { width: 100%; border-collapse: collapse; }
table.events-table th { text-align: left; }
table.events-table th:last-child, table.events-table td.evt-tick { text-align: right; }
table.events-table tr:nth-child(even) td { background: rgba(255,255,255,.02); }
td.evt-type {
  width: calc(var(--s) * 60px); text-align: center; padding: 4px 0;
}
img.evt-icon {
  width: calc(var(--s) * 26px); height: calc(var(--s) * 26px);
  object-fit: contain; vertical-align: middle;
}
td.evt-desc { width: calc(var(--s) * 380px); line-height: 1.3; padding: 4px 6px; }
td.evt-tick { width: calc(var(--s) * 70px); color: var(--dim); padding: 4px 6px; }
table.events-table tr.is-new td.evt-desc { color: #7fd0ff; }
table.events-table tr:hover td { background: rgba(90,160,220,.12); cursor: pointer; }

/* ---------------------------------------------------------------------------
   ScreenCommunity (Symbol 1010), absolute on its 850 x 486 frame -- see
   community-ui.js. The five row colours are the client's own, the same
   palette the community flag row paints with: flagRed hostile, flagBlue
   friendly, flagPurple the alliance mark, flagOrange the ruler mark.
   --------------------------------------------------------------------------- */
/* The pane is a whole-window layer over the tab list; only what is drawn on
   it takes the mouse, so the tabs underneath stay clickable. */
.com-screen .com-pane { position: absolute; inset: 0; pointer-events: none; }
.com-screen .com-pane > * { pointer-events: auto; }
/* dgTabs is Layer 11 of Symbol 1010, above mcBlockAlliances (Layer 21) and
   mcBlockRelicsGarrisons (Layer 36): the tabs stay usable under a block. */
.com-screen .com-tabs { overflow: hidden; z-index: 2; }
/* Symbol 946: the dark blue rounded strip behind each navigation line. */
.com-screen .com-strip { background: #01274e; border-radius: calc(var(--s) * 4px); pointer-events: none; }
/* Symbol 46 standing on end: the rule between the avatar and the details. */
.com-screen .com-rule { background: #01274e; pointer-events: none; }
.com-screen .com-label { font-weight: bold; color: #dddddd; }
.com-screen .com-title { font-weight: bold; color: #ffffff; }
.com-screen .com-dim { color: #999999; }
.com-screen .com-red { color: #cc0000; font-weight: bold; }
.com-screen .com-details { white-space: pre-line; line-height: calc(var(--s) * 15px); overflow: hidden; }
.com-screen .com-msg { white-space: pre-wrap; overflow-y: auto; }
.com-screen .com-avatar { overflow: hidden; line-height: 0; background: #000; }
.com-screen .com-frame { pointer-events: none;
  background: url('../assets/client/sprite_215.png') 0 0 / 100% 100% no-repeat; }
.com-screen .com-tiparea { cursor: help; }
.com-screen button.com-iconbtn { display: grid; place-items: center; padding: 0; }
.com-screen button.com-iconbtn img { pointer-events: none; }
.com-screen .com-input { box-sizing: border-box; margin: 0; padding: 0 calc(var(--s) * 3px);
  font: calc(var(--s) * 12px) Arial, sans-serif; color: #ffffff;
  background: #000000; border: 1px solid #6f7f8f; border-radius: 0; }
/* Symbol 54 / mcBlock*: the black cover and its red line. */
.com-screen .com-block { background: rgba(0, 0, 0, .85); }
.com-screen .com-block-text { color: #cc0000; font-weight: bold; }

/* fl.controls.DataGrid, AlternatingRowColors (mobiles/AlternatingRowColors.as:
   62-97): a bold white header on the Gray skin, 20px rows on Gray / DarkGray,
   a RowColour swapping the skin, a TextColour the text. */
.com-screen .com-grid { overflow-y: auto; overflow-x: hidden; }
.com-screen .com-grid.hscroll { overflow: scroll; }
.com-screen .com-ghead { display: flex; position: sticky; top: 0; z-index: 1;
  height: calc(var(--s) * 20px); width: max-content; min-width: 100%;
  font: bold calc(var(--s) * 12px)/calc(var(--s) * 20px) Arial, sans-serif; color: #ffffff;
  background: url('../assets/client/CellRenderer_upSkinGray.png') 0 0 / 100% 100% no-repeat; }
.com-screen .com-grow { display: flex; height: calc(var(--s) * 20px); cursor: pointer;
  width: max-content; min-width: 100%;
  font: calc(var(--s) * 12px)/calc(var(--s) * 20px) Arial, sans-serif; color: #dddddd;
  background: url('../assets/client/CellRenderer_upSkinGray.png') 0 0 / 100% 100% no-repeat; }
.com-screen .com-grow.alt { background-image: url('../assets/client/CellRenderer_upSkinDarkGray.png'); }
.com-screen .com-grow.rc-darkGreen { background-image: url('../assets/client/CellRenderer_upSkinDarkGreen.png'); }
.com-screen .com-grow.rc-darkRed   { background-image: url('../assets/client/CellRenderer_upSkinDarkRed.png'); }
.com-screen .com-grow.rc-blue      { background-image: url('../assets/client/CellRenderer_upSkinBlue.png'); }
.com-screen .com-grow.rc-orange    { background-image: url('../assets/client/CellRenderer_upSkinOrange.png'); }
.com-screen .com-grow.rc-purple    { background-image: url('../assets/client/CellRenderer_upSkinPurple.png'); }
.com-screen .com-grow:hover { box-shadow: inset 0 0 0 999px rgba(90, 160, 220, .10); }
.com-screen .com-grow.on { box-shadow: inset 0 0 0 999px rgba(154, 131, 88, .45); }
/* TextColour: yellow (16763904) a relic, green (52224) your hall-of-fame
   record; red / blue the alliance roles. */
.com-screen .com-grow.tc-yellow { color: #ffcc00; }
.com-screen .com-grow.tc-green { color: #00cc00; }
.com-screen .com-grow.tc-red { color: #ff0000; }
.com-screen .com-grow.tc-blue { color: #3399ff; }
/* AlternatingRowColors.drawLayout (:211-240) / HeaderRenderer: textPadding 5,
   and a TextField draws its glyphs 2px in from its own left edge, so text
   starts 7px into the cell. An icon ("$mc_0020_rank..", getGraphicIcon at
   20 x 20) sits at x = textPadding, centred on the row; a flag is a
   DataGridUrlPicture -- 16 x 11 at (8, 4.5) -- and hides the label. */
.com-screen .com-gcell { flex: 0 0 auto; padding: 0 calc(var(--s) * 5px) 0 calc(var(--s) * 7px);
  box-sizing: border-box;
  overflow: hidden; white-space: nowrap; text-overflow: clip; display: flex; align-items: center; }
.com-screen .com-rank { width: calc(var(--s) * 20px); height: calc(var(--s) * 20px); object-fit: contain;
  margin-left: calc(var(--s) * -2px); flex: 0 0 auto; }
.com-screen .com-flag { width: calc(var(--s) * 16px); height: calc(var(--s) * 11px); object-fit: fill;
  margin-left: calc(var(--s) * 1px); flex: 0 0 auto; }
/* verticalScrollPolicy "off": scrollable, but no bar drawn. */
.com-screen .com-grid.novbar { scrollbar-width: none; }
.com-screen .com-grid.novbar::-webkit-scrollbar { display: none; }
/* ScreenAdminTools / ScreenPlayerInfo / ScreenPlayerInfoNotepad: the client's
   own literals, ArialMT 12. */
.adm-screen .adm-right { text-align: right; }
.adm-screen .adm-wrap { white-space: pre-line; overflow: visible; }
.adm-screen .adm-small { font-size: calc(var(--s) * 11px); }
.adm-screen .adm-big { font-size: calc(var(--s) * 14px); }
.adm-screen .adm-notes { white-space: pre-line; overflow-y: scroll; line-height: 1.25; }
.adm-screen textarea.adm-pad { resize: none; padding: calc(var(--s) * 3px); line-height: 1.3; overflow-y: scroll; }
.adm-screen .com-grow.tc-orange { color: #ff9900; }
/* The 22px admin buttons: the skin keeps its 8 / 10px slices but is drawn over
   the whole button (border-image-width, no real border), so the label has the
   full height and width and sits centred, as fl.controls.Button centres it.
   Disabled is Button_disabledSkin with the label in #999999, not a fade. */
.adm-screen button.rc-btn { white-space: nowrap; overflow: hidden; border-width: 0;
  border-image-width: calc(var(--s) * 8px) calc(var(--s) * 10px);
  display: flex; align-items: center; justify-content: center; padding: 0 calc(var(--s) * 3px); }
.adm-screen button.rc-btn:disabled { opacity: 1; color: #999999;
  border-image-source: url('../assets/client/Button_disabledSkin.png'); }

.hof-line { background: #01274e; }
.hof-logo { object-fit: contain; }
/* "Hall of Fame": Trajan Pro Bold 27.7, white, centred under the logo. */
.hof-title { text-align: center; color: #ffffff; white-space: nowrap;
  font: bold calc(var(--s) * 27.7px)/1 'Trajan Pro', 'Cinzel', Georgia, serif; font-variant: small-caps; }
.hof-key { white-space: normal; text-align: center; }
/* 1st / 2nd / 3rd / 4-10th: Arial Narrow Bold 18 with the suffix at 11.7. */
.hof-place { white-space: nowrap; color: #dddddd;
  font: bold calc(var(--s) * 18px)/1 'Arial Narrow', Arial, sans-serif; }
.hof-place sup { font-size: calc(var(--s) * 11.7px); vertical-align: top; }
.hof-medal { object-fit: contain; }
/* cbHallOfFameWorlds / _Eras: the ComboBox skin, the world's tiny theme icon. */
select.hof-cb { box-sizing: border-box; margin: 0; padding: 0 calc(var(--s) * 4px);
  font: calc(var(--s) * 12px) Arial, sans-serif; color: #dddddd;
  background: url('../assets/client/ComboBox_upSkin.png') 0 0 / 100% 100% no-repeat;
  border: 0; border-radius: 0; }
select.hof-cb option { background: #0b1c33; color: #dddddd; }
select.hof-cb.hof-world { padding-left: calc(var(--s) * 26px);
  background: url('../assets/client/Grp_themeTinyWorld1.png') calc(var(--s) * 4px) center / calc(var(--s) * 18px) no-repeat,
              url('../assets/client/ComboBox_upSkin.png') 0 0 / 100% 100% no-repeat; }
select.hof-cb:disabled { opacity: .6; }


/* ScreenShield. txtStatus: INACTIVE in _textColorWarning (#cc0000), ACTIVE
   _textColorGreen (#00cc00), DEFENDING _textColorOrange (#ff9900)
   (ScreenShield.as:138-155, ScreenBase.as:153-157). */
.shield-screen .sh-white { color: #ffffff; }
.shield-screen .sh-right { text-align: right; }
.shield-screen .sh-warning { color: #cc0000; }
.shield-screen .sh-green { color: #00cc00; }
.shield-screen .sh-orange { color: #ff9900; }
.shield-screen .sh-title { color: #ffffff; font: bold calc(var(--s) * 12px) 'Arial Narrow', Arial, sans-serif; }
.shield-screen .sh-notenough { color: #990000; font: bold calc(var(--s) * 12px) 'Arial Narrow', Arial, sans-serif; }
.shield-screen .sh-full { color: #00cc00; }
/* ScreenToggleVisibility: fl.controls.CheckBox -- the 14px box, the label
   beside it in #dddddd. */
.tv-screen .tv-check { display: flex; align-items: center; gap: calc(var(--s) * 5px);
  font: calc(var(--s) * 12px) Arial, sans-serif; color: #dddddd; cursor: pointer; white-space: nowrap; }
.tv-screen .tv-check input { margin: 0; flex: 0 0 auto; }
/* ScreenMusicPlayer. */
.mp-screen .mp-white { color: #ffffff; }
.mp-screen .mp-right { text-align: right; }
.mp-screen .mp-status { width: calc(var(--s) * 20px); height: calc(var(--s) * 20px); }
/* btnRepeat while on: addStaticGlowEffect(_glow_innerOrange). */
.mp-screen button.glow { box-shadow: inset 0 0 calc(var(--s) * 6px) calc(var(--s) * 2px) #ff9900; }
/* ScreenTicksRuler: txtDistance and txtETA, white. */
.tr-screen .tr-text { color: #ffffff; }

/* AvatarCreator's controls carry the client's own 50x50 icons, drawn small. */
button.avatar-pad { padding: 2px; line-height: 0; }
button.avatar-pad img {
  width: calc(var(--s) * 17px); height: calc(var(--s) * 17px);
  object-fit: contain; display: block;
}

/* ScreenMusicPlayer: five transport buttons at the client's 18x18, then the
   song list with its enable/disable status column. */
.music-bar { display: flex; gap: calc(var(--s) * 5px); margin-bottom: calc(var(--s) * 8px); }
button.music-btn { width: calc(var(--s) * 30px); height: calc(var(--s) * 26px);
                   padding: 0; display: grid; place-items: center; }
button.music-btn img { width: calc(var(--s) * 18px); height: calc(var(--s) * 18px);
                       object-fit: contain; }
button.music-btn.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.music-list { max-height: calc(var(--s) * 220px); overflow-y: auto; }
.music-status { width: calc(var(--s) * 20px); flex: 0 0 auto; line-height: 0; }
.music-status img { width: calc(var(--s) * 14px); height: calc(var(--s) * 14px);
                    object-fit: contain; }

/* The tutorial progress bar -- UI_TUT_TT_PHASE_BAR. */
/* mcPhaseBar, setBarFillType("green") (:159). */
.tut-bar { background: #000; overflow: hidden; }
.tut-bar > div { height: 100%; background: linear-gradient(#5fd35f, #1f8f1f); transition: width .2s; }

/* mcTutorialMarker / mcTutorialPointer: the client rings the one control a
   phase is about and drives an arrow onto it.

   The marker is its own clip laid OVER the control, never the control itself:
   refreshTutorialPointer_generalButton (ScreenTopLeft.as:968-977) moves
   mcTutorialMarker_generalButton to the button's x / y / width / height, and
   every screen sets its markers mouseEnabled = false / mouseChildren = false
   so they take no clicks -- the target keeps its own place in the display
   list. Restacking the target instead is wrong here: #map is inset 0 over the
   whole viewport, so raising it buries #button-block and #button-admin for as
   long as the phase lasts. tutorial.js drives this box from the target's
   getBoundingClientRect, which is the DOM's answer to x / y / width / height.
   pointer-events: none is mouseEnabled = false. */
#tut-marker {
  position: fixed;
  pointer-events: none;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
  animation: tutPulse 1.1s ease-in-out infinite;
  /* A marker belongs to its own screen in the client. On the map and the HUD
     it is above everything it can point at -- #topbar (40), #mapfocus (55),
     #maptooltip (60), #placepanel (90) -- and below the tutorial screen (110)
     and the windows (#modal, 120); .in-window below lifts it for a window's
     own controls. */
  z-index: 100;
}
/* On a control inside a window: drawn with the window, over the window layer
   (#modal, 120), under a tutorial raised in front of it (125). */
#tut-marker.in-window { z-index: 121; }
/* mcTutorialPointer_specificStructureUp / _Down: the target is scrolled out
   of its list, so the ring sits on the list's edge and points the way. */
#tut-marker.scroll-down::after, #tut-marker.scroll-up::after {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font: bold 16px/1 Arial, sans-serif; color: var(--accent);
  text-shadow: 0 0 3px #000, 0 0 6px #000;
}
#tut-marker.scroll-down::after { content: '\25BC'; }
#tut-marker.scroll-up::after { content: '\25B2'; }
@keyframes tutPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 190, 60, .55); }
  50%      { box-shadow: 0 0 0 7px rgba(255, 190, 60, 0); }
}

/* ScreenSatScan (Symbol 395). txtZoomIn / txtSelectLocation: Arial 12,
   #dddddd, centred, wrapping; nsTicks a NumericStepper (Symbol 294). */
.abs-screen .ss-guide { white-space: normal; text-align: center; color: #dddddd; overflow: visible; }
.abs-screen .ss-warn { margin-top: 0; color: #990000; }
.abs-screen input.ss-ns {
  box-sizing: border-box; margin: 0; padding: 0 calc(var(--s) * 2px);
  font: calc(var(--s) * 12px) Arial, sans-serif; color: #ffffff; text-align: right;
  background: #000000; border: 1px solid #6f7f8f; border-radius: 0;
}

/* ScreenBuildColony's outpost frames sit on their own mcBackground (Symbol
   1143, 252 x 184), not on the shared chrome: no 9-slice, the art is the box. */
#placepanel.art {
  border: 0; border-image: none; padding: 0;
  background-repeat: no-repeat; background-size: 100% 100%; background-color: transparent;
}
#placepanel.art .modal-title { text-align: center; }
.abs-screen .bo-guide { white-space: normal; color: #dddddd; overflow: visible; }

/* headerTextFormat _textFormatBold: Arial 12 bold, as written -- no capitals,
   no letter spacing. */
table.com-table.com-fixed th { text-transform: none; letter-spacing: 0;
  font: bold calc(var(--s) * 12px) Arial, sans-serif; color: #ffffff; }

/* ScreenColony frame "tokens" (Symbol 1118 frame 9): absolute from (158.5, 65.7). */
.tok-frame { position: relative; width: calc(var(--s) * 637.3px); height: calc(var(--s) * 325px);
  font: calc(var(--s) * 12px)/1.2 Arial, sans-serif; color: #dddddd; }
/* Symbol 342: a blue-edged panel with a 20px title bar. */
.tok-panel { box-sizing: border-box; border: 1px solid #2a5f8f; border-radius: calc(var(--s) * 3px);
  background: linear-gradient(#16263a, #16263a) top / 100% calc(var(--s) * 20px) no-repeat; }
.tok-title { text-align: center; color: #dddddd; white-space: nowrap; }
.tok-what { white-space: normal; }
.tok-amount { color: #ffcc00; white-space: nowrap;
  font: bold calc(var(--s) * 16px)/1.1 'Arial Narrow', Arial, sans-serif; }
/* BDButton: the golden frame over the colour skin, txtSmallWhite (Arial Bold
   22, white, centred). */
button.bd-button { padding: 0; margin: 0; border: 0; border-radius: 0; cursor: pointer; min-width: 0;
  background-color: transparent; background-repeat: no-repeat;
  background-size: 100% 100%, calc(100% - var(--s) * 8px) calc(100% - var(--s) * 8px);
  background-position: 0 0, center; }
button.bd-button:hover { filter: brightness(1.15); }
button.bd-button:active { filter: brightness(.9); }
.bd-button-text { display: block; text-align: center; color: #ffffff;
  font: bold calc(var(--s) * 20px)/1 Arial, sans-serif;
  text-shadow: 0 0 2px #000, 0 0 2px #000, 1px 1px 1px #000; }
/* tlBoosts: one TileList, a 430 x 95 slot every 105. */
.tok-list { overflow-y: auto; overflow-x: hidden; }
.boost-slot { position: relative; width: calc(var(--s) * 430px); height: calc(var(--s) * 95px);
  margin-bottom: calc(var(--s) * 10px); cursor: pointer; box-sizing: border-box;
  border: 1px solid #3a3a3a; background: linear-gradient(#2b2b2b, #202020); }
.boost-slot:hover { border-color: #5a6b80; }
.boost-slot > * { position: absolute; }
.boost-pic-box { background: #000000; }
.boost-pic { object-fit: cover; }
.boost-sep { background: rgba(255, 255, 255, .06); }
/* txtName: Arial Bold 12 #ff9900; txtDescription / txtStatus: Arial 12 #dddddd. */
.boost-name { color: #ff9900; font-weight: bold; white-space: nowrap; overflow: hidden; }
.boost-desc { color: #dddddd; white-space: normal; overflow: hidden; }
.boost-status { text-align: center; white-space: normal; }
.boost-status.st-green { color: #00cc00; }
.boost-status.st-blue  { color: #0066ff; }
.boost-status.st-red   { color: #cc0000; }
.boost-status.st-gray  { color: #999999; }
.boost-cost-label { color: #dddddd; }
.boost-cost { color: #ffcc00; text-align: right; font: bold calc(var(--s) * 16px)/1.1 'Arial Narrow', Arial, sans-serif; }
.boost-token { object-fit: contain; }

/* Community's frameTopPlayer: Symbol 215 over the 60x60 portrait, shown by
   refreshAvatarFrame (ScreenCommunity.as:714). */
.com-topframe { position: relative; flex: 0 0 auto; width: calc(var(--s) * 60px); height: calc(var(--s) * 60px); }
.com-topframe.gilt::after {
  content: ''; position: absolute; pointer-events: none;
  left: calc(var(--s) * -3px); top: calc(var(--s) * -2.5px);
  width: calc(var(--s) * 66px); height: calc(var(--s) * 65px);
  background: url('../assets/client/sprite_215.png') 0 0 / 100% 100% no-repeat;
}

/* --- ScreenEvents (Symbol 911) ------------------------------------------- */
.evt-screen { font-family: Arial, sans-serif; }
/* dgTabs: rowHeight 20, no header, _textFormatBold; the selected row is the
   DataGrid's tan selection. */
.evt-tabs { display: flex; flex-direction: column; }
.evt-tab { height: calc(var(--s) * 20px); line-height: calc(var(--s) * 20px);
  padding: 0 calc(var(--s) * 5px); cursor: pointer; white-space: nowrap;
  font: bold calc(var(--s) * 12px)/calc(var(--s) * 20px) Arial, sans-serif; color: #ffffff; }
.evt-tab:hover { background: rgba(90, 160, 220, .14); }
.evt-tab.on { background: linear-gradient(#9a8358, #6e5b3a); }
/* btnMarkAsNotNew: a plain Button, 96 x 39. */
button.evt-mark { padding: 0; border: 0; border-radius: 0; cursor: pointer;
  background: url('../assets/client/Button_upSkin.png') 0 0 / 100% 100% no-repeat;
  font: bold calc(var(--s) * 12px)/1 Arial, sans-serif; color: #ffffff; }
button.evt-mark:hover { filter: brightness(1.15); }
.evt-empty { text-align: center; font: calc(var(--s) * 12px)/1.15 Arial, sans-serif; color: #dddddd; }
/* dgEvents: headerHeight 20 (headerTextFormat regular), rowHeight 70,
   AlternatingRowColors rows, vertical scroll bar only. */
.evt-grid { display: flex; flex-direction: column; overflow: hidden; }
.evt-head { display: flex; flex: 0 0 auto; height: calc(var(--s) * 20px);
  background: linear-gradient(#0d2a48, #071a2e); border-bottom: 1px solid #01274e; }
.evt-hcell { padding: 0 calc(var(--s) * 5px); box-sizing: border-box; white-space: nowrap;
  font: calc(var(--s) * 12px)/calc(var(--s) * 20px) Arial, sans-serif; color: #dddddd; }
.evt-rows { flex: 1 1 auto; overflow-y: scroll; overflow-x: hidden; }
.evt-row { display: flex; height: calc(var(--s) * 70px); cursor: pointer; color: #ffffff;
  background: url('../assets/client/CellRenderer_upSkinGray.png') 0 0 / 100% 100% no-repeat; }
.evt-row.alt { background-image: url('../assets/client/CellRenderer_upSkinDarkGray.png'); }
.evt-row:hover { box-shadow: inset 0 0 0 999px rgba(90, 160, 220, .10); }
.evt-row.on { box-shadow: inset 0 0 0 999px rgba(154, 131, 88, .35); }
.evt-cell { display: flex; align-items: center; box-sizing: border-box; overflow: hidden;
  padding: 0 calc(var(--s) * 5px);
  font: bold calc(var(--s) * 12px)/1.2 Arial, sans-serif; }
.evt-type { justify-content: center; }
.evt-icon { width: calc(var(--s) * 40px); height: calc(var(--s) * 40px); object-fit: contain; }
/* A "#" label: htmlText, wordWrap, multiline, centred in the row. */
.evt-desc { white-space: pre-line; }

/* btn_removeProtection (ScreenTopLeft, Layer 10): Symbol 35 at 0.5 x 2.27 --
   a 50 x 50 Button on its default skin (no changeButtonSkins), carrying
   Grp_interfaceRemoveProtection at 44 x 44. */
#screen-topleft #btn-remove-protection, #screen-topleft #btn-tutorial {
  left: calc(var(--s) * 411.8px); top: calc(var(--s) * 80.5px);
  width: calc(var(--s) * 50px); height: calc(var(--s) * 50px);
  padding: calc(var(--s) * 3px); border: 0; border-radius: 0; cursor: pointer;
  pointer-events: auto; display: grid; place-items: center;
  background: url('../assets/client/Button_upSkin.png') 0 0 / 100% 100% no-repeat;
}
#screen-topleft #btn-remove-protection[hidden], #screen-topleft #btn-tutorial[hidden] { display: none; }
#screen-topleft #btn-remove-protection:hover, #screen-topleft #btn-tutorial:hover { filter: brightness(1.15); }
#btn-remove-protection img, #btn-tutorial img { width: calc(var(--s) * 44px); height: calc(var(--s) * 44px); }

/* --- ScreenOrders, absolute (Symbol 624) --------------------------------- */
/* dgTabs: 20px rows, no frame of its own -- the Symbol 44 box is behind it. */
.orders-abs .ord-tabs { display: block; gap: 0; padding: 0; background: none; border: 0; border-radius: 0; }
.orders-abs button.ord-tab { display: block; height: calc(var(--s) * 20px); padding: 0 calc(var(--s) * 5px);
  font: bold calc(var(--s) * 12px)/calc(var(--s) * 20px) Arial, sans-serif; border-radius: 0; }
/* mcSquadsSubMenu (Symbol 614): its own Symbol 44 box 96 x 105.5, txtSort at
   (3, 5.5) centred 12px #dddddd, a rule at y 24, and the three Symbol 35
   buttons at (4.2, 29 / 54 / 79), 88 x 22. */
.orders-abs .ord-submenu { margin: 0; }
.orders-abs .ord-sub { position: relative; box-sizing: border-box; padding: 0;
  min-height: calc(var(--s) * 105.5px); background: none;
  border: 1px solid #2a5f8f; border-radius: calc(var(--s) * 3px); }
.orders-abs .ord-sort-title { height: calc(var(--s) * 24px); margin: 0; box-sizing: border-box;
  padding-top: calc(var(--s) * 5.5px); border-bottom: 1px solid #2a5f8f;
  font: calc(var(--s) * 12px)/1.1 Arial, sans-serif; color: #dddddd; }
.orders-abs button.ord-sort { width: calc(var(--s) * 88px); height: calc(var(--s) * 22px); padding: 0;
  margin: calc(var(--s) * 3px) 0 0 calc(var(--s) * 3.2px); border: 0; border-radius: 0;
  background: url('../assets/client/Button_upSkin.png') 0 0 / 100% 100% no-repeat;
  font: calc(var(--s) * 12px)/calc(var(--s) * 22px) Arial, sans-serif; color: #ffffff; }
.orders-abs button.ord-sort.on { box-shadow: inset 0 0 calc(var(--s) * 8px) calc(var(--s) * 2px) rgba(255, 120, 0, .75); }
/* dgOrders: header 20 bold, rows 20 on the AlternatingRowColors skins,
   #dddddd text, vertical scroll only. */
.orders-abs .ord-pane { overflow: hidden; }
.orders-abs .ord-grid { max-height: none; height: 100%; overflow-y: auto; overflow-x: hidden; }
.orders-abs .ord-grid table { width: 100%; border-collapse: collapse; }
.orders-abs .ord-grid th { position: sticky; top: 0; z-index: 1; height: calc(var(--s) * 20px);
  padding: 0 calc(var(--s) * 5px); text-transform: none; letter-spacing: 0; white-space: nowrap;
  font: bold calc(var(--s) * 12px)/calc(var(--s) * 20px) Arial, sans-serif; color: #ffffff;
  background: linear-gradient(#0d2a48, #071a2e); border-bottom: 1px solid #01274e; }
.orders-abs .ord-grid td { height: calc(var(--s) * 20px); padding: 0 calc(var(--s) * 5px); border-top: 0;
  font: calc(var(--s) * 12px)/calc(var(--s) * 20px) Arial, sans-serif; color: #dddddd; white-space: nowrap; }
.orders-abs .ord-grid tr:not(:first-of-type) {
  background: url('../assets/client/CellRenderer_upSkinGray.png') 0 0 / 100% 100% no-repeat; }
.orders-abs .ord-grid tr:nth-of-type(odd):not(:first-of-type) {
  background-image: url('../assets/client/CellRenderer_upSkinDarkGray.png'); }
.orders-abs .ord-grid tr.click:hover td { background: rgba(90, 160, 220, .14); }
.orders-abs .ord-grid td.ord-orange { color: #ff9900; }
.orders-abs .ord-grid td.ord-red { color: #ff0000; }
.orders-abs .ord-statusicon img { width: calc(var(--s) * 20px); height: calc(var(--s) * 20px); vertical-align: middle; }
.orders-abs .ord-empty { position: absolute; left: calc(var(--s) * 3.9px); right: 0;
  top: calc(var(--s) * 170px); padding: 0; color: #cc0000;
  font: bold calc(var(--s) * 12px) "Arial Narrow", Arial, sans-serif; font-stretch: condensed; }
/* A grid with the client's own column widths clips at each column edge. */
.orders-abs .ord-grid table.ord-fixed { table-layout: fixed; }
.orders-abs .ord-grid table.ord-fixed th,
.orders-abs .ord-grid table.ord-fixed td { overflow: hidden; text-overflow: clip; white-space: nowrap; }

/* --- ScreenSquadOrders, absolute (Symbol 338) ---------------------------- */
.so-abs { font: calc(var(--s) * 12px)/1.15 Arial, sans-serif; color: #ffffff; }
/* dgSquads: header 20, rows 20, Name / Units, the tan selection bar. */
.so-abs .so-list { border: 0; background: none; overflow-y: auto; overflow-x: hidden; padding: 0; }
.so-abs .so-row { height: calc(var(--s) * 20px); line-height: calc(var(--s) * 20px);
  padding: 0 calc(var(--s) * 5px); color: #dddddd; font-size: calc(var(--s) * 12px); }
.so-abs .so-row.on { color: #ffffff; background: linear-gradient(#9a8358, #6e5b3a); }
.so-abs .so-head, .so-abs .so-head.on { color: #ffffff; font-weight: bold;
  background: linear-gradient(#0d2a48, #071a2e); border-bottom: 1px solid #01274e; }
/* Symbol 35 buttons on their default Button skin, white 12px labels. */
.so-abs button.btn { padding: 0; margin: 0; border: 0; border-radius: 0; min-width: 0;
  background: url('../assets/client/Button_upSkin.png') 0 0 / 100% 100% no-repeat;
  font: calc(var(--s) * 12px)/1 Arial, sans-serif; color: #ffffff; box-shadow: none; }
.so-abs button.btn:hover:not(:disabled) { filter: brightness(1.15); }
.so-abs button.btn:disabled { opacity: 0.45; cursor: default; }
.so-abs .so-reopen.on { box-shadow: inset 0 0 calc(var(--s) * 8px) rgba(255, 120, 0, .75); }
/* The figures: left-aligned labels, right-aligned values ending in their
   20 x 20 mcGrpSizer icon. */
.so-abs .so-figure { font-size: calc(var(--s) * 12px); color: #ffffff; white-space: nowrap; }
.so-abs .so-eta, .so-abs .so-costpair { display: flex; justify-content: flex-end; align-items: center;
  gap: calc(var(--s) * 4px); }
.so-abs .so-costval { color: #ffffff; font-weight: normal; }
.so-abs .so-icon { width: calc(var(--s) * 20px); height: calc(var(--s) * 20px); }
.so-abs .so-delay, .so-abs .so-gate-row { display: flex; justify-content: space-between; align-items: center; }
.so-abs .so-cost { display: flex; justify-content: space-between; align-items: center; gap: 0; }
.so-abs .so-stepper { width: calc(var(--s) * 46px); height: calc(var(--s) * 20px); box-sizing: border-box; }
.so-abs .so-arrive { color: #ffffff; font-size: calc(var(--s) * 12px); }
.so-abs .so-warn { text-align: right; color: #990000; font-size: calc(var(--s) * 12px); min-height: 0; }
/* mcGateBlock: a dark cover over the gate block while gating is not on offer. */
.so-abs .so-gateblock { background: rgba(0, 0, 0, 0.7); inset: auto; }

/* --- ScreenProfile (profile-ui.js): your own profile, Symbol 534 ---------- */
.prof-screen .prof-title { color: #ffffff; }
.prof-screen .prof-head { background:
  linear-gradient(#262b35 0, #262b35 var(--head), #2a5f8f var(--head),
                  #2a5f8f calc(var(--head) + 1px), transparent calc(var(--head) + 1px)); }
.prof-screen .prof-stats div { margin-bottom: calc(var(--s) * 3px); }
.prof-screen .prof-bio { white-space: pre-wrap; overflow-y: auto; }
.prof-screen .prof-input {
  box-sizing: border-box; margin: 0; padding: calc(var(--s) * 3px); resize: none;
  font: calc(var(--s) * 12px)/1.3 Arial, sans-serif; color: #ffffff;
  background: #000000; border: 1px solid #6f7f8f; border-radius: 0;
}
.prof-screen button.prof-btn:disabled { opacity: .5; cursor: default; }
/* dgFlags: one Name column, rows of 20 on the AlternatingRowColors skins. */
.prof-screen .prof-flags { overflow-y: auto; overflow-x: hidden; }
.prof-flag-row { height: calc(var(--s) * 20px); padding: 0 calc(var(--s) * 4px); cursor: pointer;
  font: calc(var(--s) * 12px)/calc(var(--s) * 20px) Arial, sans-serif; color: #ffffff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: url('../assets/client/CellRenderer_upSkinGray.png') 0 0 / 100% 100% no-repeat; }
.prof-flag-row.dark { background-image: url('../assets/client/CellRenderer_upSkinDarkGray.png'); }
.prof-flag-row.on { background: linear-gradient(#9a8358, #6e5b3a); }
.prof-screen .prof-flag { object-fit: fill; }
.prof-screen .prof-check { display: flex; align-items: center; gap: calc(var(--s) * 4px);
  font: calc(var(--s) * 12px) Arial, sans-serif; color: #ffffff; cursor: pointer; }
.prof-screen .prof-check input:disabled + span { opacity: .5; }
.prof-screen .prof-avatar { line-height: 0; overflow: hidden; }
.prof-screen .prof-pointer { pointer-events: none; }
.prof-screen .prof-ach { max-height: none; width: auto; overflow-y: auto; }

/* AvatarCreator, Symbol 533. */
.avc { background: #000000; overflow: hidden; }
.avc-outline { box-sizing: border-box; border: 1px solid rgba(255, 255, 255, .5);
  border-radius: calc(var(--s) * 4px); pointer-events: none; }
.avc-rule { background: rgba(255, 255, 255, .5); pointer-events: none; }
.avc-btn { cursor: pointer; display: grid; place-items: center; user-select: none;
  background: url('../assets/ui/avatar-creator/up.png') 0 0 / 100% 100% no-repeat; }
.avc-btn:hover { background-image: url('../assets/ui/avatar-creator/over.png'); }
.avc-btn:active { background-image: url('../assets/ui/avatar-creator/down.png'); }
/* mcDisabled: a 50% black sheet over the whole button. */
.avc-btn.off { cursor: default; box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .5); }
.avc-btn.off:hover, .avc-btn.off:active { background-image: url('../assets/ui/avatar-creator/up.png'); }
/* The selected layer: _glow_innerOrange. */
.avc-btn.sel { box-shadow: inset 0 0 calc(var(--s) * 6px) calc(var(--s) * 2px) #ff9900; }
.avc-text span { font: bold calc(var(--s) * 10px) Arial, sans-serif; color: #ffffff; white-space: nowrap; }
.avc-icon img { width: calc(var(--s) * 26px); height: calc(var(--s) * 26px); object-fit: contain; pointer-events: none; }
.avc-color i { display: block; width: calc(var(--s) * 11px); height: calc(var(--s) * 11px); pointer-events: none; }
.avc-btn.avc-text { background-image: url('../assets/ui/avatar-creator/textbtn.png'); }
.avc-btn.avc-icon { background-image: url('../assets/ui/avatar-creator/iconbtn.png'); }
.avc-btn.avc-color { background-image: url('../assets/ui/avatar-creator/colorbtn.png'); }
.avc-btn.avc-text:hover, .avc-btn.avc-icon:hover, .avc-btn.avc-color:hover { background-image: url('../assets/ui/avatar-creator/over.png'); }
.avc-btn.avc-text:active, .avc-btn.avc-icon:active, .avc-btn.avc-color:active { background-image: url('../assets/ui/avatar-creator/down.png'); }
.avc-btn.off.avc-text { background-image: url('../assets/ui/avatar-creator/textbtn.png'); }
.avc-btn.off.avc-icon { background-image: url('../assets/ui/avatar-creator/iconbtn.png'); }
/* ScreenButtons' mcAvatar_framed: above the strip, its own 74 x 74. */
.screen-buttons .sb-avatar { position: absolute; left: 0; bottom: 100%;
  width: calc(var(--s) * 74px); height: calc(var(--s) * 74px); pointer-events: none; }
.screen-buttons .sb-avatar-pic { position: absolute; left: calc(var(--s) * 7px); top: calc(var(--s) * 6.5px);
  width: calc(var(--s) * 60px); height: calc(var(--s) * 60px); overflow: hidden; line-height: 0; background: #000; }
.screen-buttons .sb-avatar-frame { position: absolute; left: calc(var(--s) * 4px); top: calc(var(--s) * 4.8px);
  width: calc(var(--s) * 66px); height: calc(var(--s) * 65px);
  background: url('../assets/client/sprite_215.png') 0 0 / 100% 100% no-repeat; }
.screen-buttons .sb-icon.is-info { cursor: default; }

/* --- ScreenBattleReport (info-ui.js battleReport), Symbol 1194 ----------- */
/* Symbol 1186: black, a #01274e hairline. Symbol 419: #333333 header strip,
   black body, the same edge. */
.br-screen .br-box { background: #000000; border: 1px solid #01274e; pointer-events: none; }
.br-screen .br-logpanel { border: 1px solid #01274e; pointer-events: none;
  background: linear-gradient(#333333 0, #333333 var(--head), #000000 var(--head)); }
.br-screen .br-side { color: #ffffff; font-weight: bold; }
.br-screen .br-logtitle { color: #ffffff; }
.br-screen .br-status { color: #ffffff; }
.br-screen .br-missile { color: #dddddd; font-weight: bold; }
.br-screen .br-log { overflow-y: scroll; font: calc(var(--s) * 11px)/1.3 Arial, sans-serif; }
.br-screen .br-line.strong { font-weight: bold; }
.br-screen .br-gap { height: calc(var(--s) * 12px); }
/* dgAttackers / dgDefenders: header and rows of 20. */
.br-screen .br-grid { display: flex; flex-direction: column; overflow: hidden; }
.br-screen .br-ghead { display: flex; flex: 0 0 auto; height: calc(var(--s) * 20px);
  font: bold calc(var(--s) * 12px)/calc(var(--s) * 20px) Arial, sans-serif; color: #ffffff;
  background: url('../assets/client/CellRenderer_upSkinGray.png') 0 0 / 100% 100% no-repeat; }
.br-screen .br-grows { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; }
.br-screen .br-grow { display: flex; height: calc(var(--s) * 20px); cursor: pointer;
  font: calc(var(--s) * 12px)/calc(var(--s) * 20px) Arial, sans-serif; color: #ffffff;
  background: url('../assets/client/CellRenderer_upSkinGray.png') 0 0 / 100% 100% no-repeat; }
.br-screen .br-grow.alt { background-image: url('../assets/client/CellRenderer_upSkinDarkGray.png'); }
.br-screen .br-grow:hover { box-shadow: inset 0 0 0 999px rgba(90, 160, 220, .10); }
.br-screen .br-gcell { padding: 0 calc(var(--s) * 4px); box-sizing: border-box; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; }
/* tlAttackers / tlDefenders: nine 50 x 75 tiles to a row. */
.br-screen .br-tiles { display: grid; grid-template-columns: repeat(9, calc(var(--s) * 50px));
  grid-auto-rows: calc(var(--s) * 75px); }
.br-screen .br-tile { position: relative; width: calc(var(--s) * 50px); height: calc(var(--s) * 75px);
  background: url('../assets/ui/slot-darkGray.png') 0 0 / 100% 100% no-repeat; }
.br-screen .br-tile.inactive { opacity: .2; }
.br-screen .br-pic { position: absolute; left: 0; top: 0; width: calc(var(--s) * 50px);
  height: calc(var(--s) * 50px); object-fit: cover; }
.br-screen .br-amount, .br-screen .br-kia, .br-screen .br-only { position: absolute;
  width: calc(var(--s) * 36px); height: calc(var(--s) * 11.2px);
  font: calc(var(--s) * 10px)/calc(var(--s) * 11.2px) Arial, sans-serif; }
.br-screen .br-amount { left: calc(var(--s) * 4.5px); top: calc(var(--s) * 51px); color: #dddddd; text-align: left; }
.br-screen .br-kia { left: calc(var(--s) * 9.5px); top: calc(var(--s) * 61px); color: #cc0000; text-align: right; }
.br-screen .br-only { left: calc(var(--s) * 7px); top: calc(var(--s) * 57.25px); color: #dddddd; text-align: center; }
.br-screen .br-cover { position: absolute; inset: 0;
  background: url('../assets/ui/slot-kia.png') 0 0 / 100% 100% no-repeat; }
.br-screen button.rc-btn.glow { box-shadow: inset 0 0 calc(var(--s) * 6px) calc(var(--s) * 2px) #ff9900;
  animation: br-glow 1.2s ease-in-out infinite alternate; }
@keyframes br-glow { from { box-shadow: inset 0 0 0 0 #ff9900; } }
/* RowColour "darkGreen": the force-relocate outposts (ScreenOrders.as:959-962). */
.orders-abs .ord-grid tr.row-darkGreen:not(:first-of-type) {
  background-image: url('../assets/client/CellRenderer_upSkinDarkGreen.png'); }
/* ScreenToolTip "allianceOrder": the title bold, coloured by priority. */
.tt-ord { font-weight: bold; }
.tt-ord-low { color: #000000; }
.tt-ord-medium { color: #c04401; }
.tt-ord-high { color: #cc0000; }
.tt-ord-text { color: #000000; white-space: pre-wrap; }
.orders-abs .ord-grid td.ord-yellow { color: #ffcc00; }     /* TextColour yellow 16763904 */
/* btnNewAllianceOrder: Symbol 35 at (36.25, 175.2), 96 x 22. */
.orders-abs button.ord-create { display: block; width: calc(var(--s) * 96px); height: calc(var(--s) * 22px);
  margin-top: calc(var(--s) * 0.7px); }
/* ScreenAllianceOrder. */
.ao-screen .ao-white { color: #ffffff; }
.ao-screen .ao-desc { color: #dddddd; white-space: pre-wrap; overflow-y: auto; }
.ao-screen .ao-input { box-sizing: border-box; margin: 0; padding: 0 calc(var(--s) * 3px);
  font: calc(var(--s) * 12px) Arial, sans-serif; color: #ffffff; background: #000000;
  border: 1px solid #6f7f8f; border-radius: 0; }
.ao-screen textarea.ao-area { padding: calc(var(--s) * 3px); resize: none; line-height: 1.3; }
/* Its Buttons -- btnIcon1-5 at 26 x 26 with a 20px icon, the priorities, Delete
   and Confirm -- have the skin's 8 / 10px
   slices drawn over the whole face, so icon and label keep their full size. */
.ao-screen button.rc-btn { display: grid; place-items: center; padding: 0; border-width: 0;
  border-image-width: calc(var(--s) * 8px) calc(var(--s) * 10px); }
.ao-screen button.ao-icon img { width: calc(var(--s) * 20px); height: calc(var(--s) * 20px); pointer-events: none; }
/* addStaticGlowEffect(_glow_innerOrange): GlowFilter 0xFF9900, alpha 0.3,
   blur 35, strength 9, inner -- on a 26 or 60 px button it fills the face. */
/* The face is the skin's filled border image, which paints over any inset
   shadow, so the glow is a layer of its own above it. */
.ao-screen button.glow::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: rgba(255, 153, 0, .3); }

/* --- ScreenMessages / ScreenMessageRead / ScreenMessageCompose ----------- */
.msgs-screen .msg-empty { padding: 0; color: #cc0000; }
.msgs-screen .msg-grid { display: flex; flex-direction: column; overflow: hidden; }
.msgs-screen .msg-ghead { display: flex; flex: 0 0 auto; height: calc(var(--s) * 20px);
  font: bold calc(var(--s) * 12px)/calc(var(--s) * 20px) Arial, sans-serif; color: #ffffff;
  background: url('../assets/client/CellRenderer_upSkinGray.png') 0 0 / 100% 100% no-repeat; }
.msgs-screen .msg-grows { flex: 1 1 auto; overflow-y: scroll; overflow-x: hidden; }
.msgs-screen .msg-grow { display: flex; height: calc(var(--s) * 20px); cursor: pointer;
  font: calc(var(--s) * 12px)/calc(var(--s) * 20px) Arial, sans-serif; color: #dddddd;
  background: url('../assets/client/CellRenderer_upSkinGray.png') 0 0 / 100% 100% no-repeat; }
.msgs-screen .msg-grow.alt { background-image: url('../assets/client/CellRenderer_upSkinDarkGray.png'); }
.msgs-screen .msg-grow:hover { box-shadow: inset 0 0 0 999px rgba(90, 160, 220, .10); }
.msgs-screen .msg-grow.on { box-shadow: inset 0 0 0 999px rgba(154, 131, 88, .45); }
.msgs-screen .msg-grow.tc-orange { color: #ff9900; }
.msgs-screen .msg-grow.tc-red { color: #ff0000; }
.msgs-screen .msg-grow.tc-red_bold { color: #ff0000; font-weight: bold; }
.msgs-screen .msg-gcell { padding: 0 calc(var(--s) * 4px); box-sizing: border-box; overflow: hidden;
  white-space: nowrap; text-overflow: clip; display: flex; align-items: center; }
.msgs-screen .msg-status { width: calc(var(--s) * 20px); height: calc(var(--s) * 20px); }
.msgs-screen .msg-input, .msgc-screen .msg-input { box-sizing: border-box; margin: 0;
  padding: 0 calc(var(--s) * 3px); font: calc(var(--s) * 12px) Arial, sans-serif; color: #ffffff;
  background: #000000; border: 1px solid #6f7f8f; border-radius: 0; }
.msgc-screen .msg-input:disabled { color: #999999; }
.msgc-screen textarea.msg-area { padding: calc(var(--s) * 3px); resize: none; line-height: 1.3; }
.msgr-screen .msgr-avatar { overflow: hidden; line-height: 0; background: #000; }
.msgr-screen .msgr-frame { pointer-events: none;
  background: url('../assets/client/sprite_215.png') 0 0 / 100% 100% no-repeat; }
.msgr-screen .msgr-text { overflow-y: scroll; white-space: pre-wrap; color: #dddddd;
  font: calc(var(--s) * 12px)/1.3 Arial, sans-serif; }
.msgr-screen .msgr-coord { color: #00ffff; cursor: pointer; text-decoration: underline; }
.msgr-screen button.msgr-find { display: grid; place-items: center; padding: 0; }
.msgr-screen button.msgr-find img { width: calc(var(--s) * 20px); height: calc(var(--s) * 20px); pointer-events: none; }

/* --- ScreenSquadGroupInfo (screens.js squadGroupInfo), Symbol 349 -------- */
.sgi-screen .sgi-title { color: #ffffff; }
.sgi-screen .sgi-details { color: #dddddd; }
.sgi-screen .sgi-tiles { overflow-y: auto; overflow-x: hidden; }
.sgi-screen .sgi-tile { position: relative; width: calc(var(--s) * 237px); height: calc(var(--s) * 70px);
  cursor: pointer; background: url('../assets/client/CellRenderer_upSkinGray.png') 0 0 / 100% 100% no-repeat; }
.sgi-screen .sgi-tile:nth-child(odd) { background-image: url('../assets/client/CellRenderer_upSkinDarkGray.png'); }
.sgi-screen .sgi-tile.on { box-shadow: inset 0 0 calc(var(--s) * 6px) calc(var(--s) * 2px) #ff9900; }
.sgi-screen .sgi-avatar { position: absolute; left: calc(var(--s) * 5.5px); top: calc(var(--s) * 5.5px);
  width: calc(var(--s) * 60px); height: calc(var(--s) * 60px); overflow: hidden; line-height: 0; background: #000; }
.sgi-screen .sgi-name, .sgi-screen .sgi-squads, .sgi-screen .sgi-eta { position: absolute; left: calc(var(--s) * 75px);
  width: calc(var(--s) * 146px); font: calc(var(--s) * 12px)/1.15 Arial, sans-serif; color: #dddddd;
  white-space: nowrap; overflow: hidden; }
.sgi-screen .sgi-name { top: calc(var(--s) * 7.5px); color: #ffffff; font-weight: bold; }
.sgi-screen .sgi-squads { top: calc(var(--s) * 31.5px); }
.sgi-screen .sgi-eta { top: calc(var(--s) * 51.5px); }
.sgi-screen .sgi-grid { display: flex; flex-direction: column; overflow: hidden; }
.sgi-screen .sgi-ghead { display: flex; flex: 0 0 auto; height: calc(var(--s) * 20px);
  font: bold calc(var(--s) * 12px)/calc(var(--s) * 20px) Arial, sans-serif; color: #ffffff;
  background: url('../assets/client/CellRenderer_upSkinGray.png') 0 0 / 100% 100% no-repeat; }
.sgi-screen .sgi-grows { flex: 1 1 auto; overflow-y: scroll; overflow-x: hidden; }
.sgi-screen .sgi-grow { display: flex; height: calc(var(--s) * 20px);
  font: calc(var(--s) * 12px)/calc(var(--s) * 20px) Arial, sans-serif; color: #dddddd;
  background: url('../assets/client/CellRenderer_upSkinGray.png') 0 0 / 100% 100% no-repeat; }
.sgi-screen .sgi-grow.alt { background-image: url('../assets/client/CellRenderer_upSkinDarkGray.png'); }
.sgi-screen .sgi-grow.click { cursor: pointer; }
.sgi-screen .sgi-gcell { padding: 0 calc(var(--s) * 4px); box-sizing: border-box; overflow: hidden; white-space: nowrap; }
/* ScreenAdvisor. */
.adv-screen .adv-sub { color: #ffffff; font-weight: bold; }
.adv-screen .adv-avatar { overflow: hidden; line-height: 0; background: #000000; }
.adv-screen .adv-text { color: #dddddd; }
/* ScreenProfileView: the icon buttons (Symbol 35 at 0.6 x 2.73), txtDetails bold. */
.prof-screen button.prof-iconbtn { display: grid; place-items: center; padding: 0; }
.prof-screen button.prof-iconbtn img { pointer-events: none; object-fit: contain; }
.prof-screen .prof-details { color: #ffffff; font-weight: bold; }
.confirm textarea.confirm-input-big { resize: none; padding: calc(var(--s) * 3px); font: calc(var(--s) * 12px)/1.3 Arial, sans-serif; color: #ffffff; background: #000000; border: 1px solid #6f7f8f; }

/* ScreenColony, absolute on Symbol 1118 (colony-ui.js). */
/* A whole-window layer over the tab list: only what a frame draws on it takes
   the mouse, so the tabs underneath stay clickable. */
.colony-abs .colony-pane-abs { position: absolute; inset: 0; pointer-events: none; }
.colony-abs .colony-pane-abs > * { pointer-events: auto; }
.colony-abs .col-tabs { overflow: hidden; }
.colony-abs .col-tabs .col-tab-tokens { color: #ff9900; font-weight: bold; }
.colony-abs .col-rule { background: #01274e; pointer-events: none; }
.colony-abs .col-t { font: calc(var(--s) * 12px) Arial, sans-serif; color: #dddddd; }
.colony-abs .col-narrow { font-family: 'Arial Narrow', Arial, sans-serif; font-weight: bold; }
.colony-abs .col-14 { font-size: calc(var(--s) * 14px); }
.colony-abs .col-wrap { white-space: pre-line; overflow: hidden; }
.colony-abs .col-warning { color: #cc0000; }
.colony-abs .col-green { color: #00cc00; }
.colony-abs .col-white { color: #ffffff; }
.colony-abs .col-yellow { color: #ffcc00; }
.colony-abs .col-red { color: #ff0000; }
.colony-abs .col-select { color: #ffcc00; white-space: normal; text-align: center;
  font-family: 'Arial Narrow', Arial, sans-serif; font-weight: bold; }
/* txtReinforcements_details: ArialMT 12, lineSpacing 2 -- a line every 17px
   on the original's own screen (lines at 206, 223 ... 359). */
.colony-abs .col-lines { white-space: normal; overflow: hidden; line-height: calc(var(--s) * 17px); }
/* Symbols 1034 / 1036 / 1038: a #01274e rule round white at 10%, the bar on top. */
.colony-abs .col-panel { border: 1px solid #01274e; border-radius: calc(var(--s) * 3px);
  box-sizing: border-box; pointer-events: none; }
.colony-abs .col-panel-bar { background: rgba(255, 255, 255, 0.10); border-bottom: 1px solid #01274e;
  box-sizing: border-box; border-radius: calc(var(--s) * 3px) calc(var(--s) * 3px) 0 0; pointer-events: none; }
/* Symbol 54: the black cover the mcBlock* clips are. */
.colony-abs .col-block { background: #000000; }
.colony-abs .col-structpic { object-fit: cover; }
/* tlStructures: five columns of 80, 80-high rows, scrollbar always on. */
.colony-abs .struct-tiles { display: grid; grid-template-columns: repeat(5, calc(var(--s) * 80px));
  grid-auto-rows: calc(var(--s) * 80px); overflow-y: scroll; overflow-x: hidden; align-content: start; }
.colony-abs .struct-timer { position: absolute; left: 0; right: 0; top: calc(var(--s) * 15px);
  white-space: pre-line; text-align: center; pointer-events: none;
  font: bold calc(var(--s) * 11px) Arial, sans-serif; color: #ffffff;
  text-shadow: 0 0 calc(var(--s) * 3px) #0099ff, 0 0 calc(var(--s) * 3px) #0099ff; }
.colony-abs .col-view { overflow: hidden; }
.colony-abs .col-view .colony-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.colony-abs .col-tiparea { cursor: help; }
/* tlArmy: nine of 50 to a row. */
.colony-abs .col-army { display: grid; grid-template-columns: repeat(9, calc(var(--s) * 50px));
  grid-auto-rows: calc(var(--s) * 50px); overflow-y: auto; align-content: start; }
.colony-abs .col-army .army-slot { aspect-ratio: auto; }
.colony-abs button.com-iconbtn { display: grid; place-items: center; padding: 0; }
.colony-abs button.com-iconbtn img { pointer-events: none; }
.colony-abs button.glow { box-shadow: inset 0 0 calc(var(--s) * 6px) calc(var(--s) * 2px) #ff9900; }
.colony-abs .bd-btn { font-size: calc(var(--s) * 13px); }
/* COChatLine: links and the emote sprites, 14 x 14 in a 16px gap. CHATlaughIMG
   is twelve frames at the stage's 40 fps. */
.ac-screen .ac-nick, .ac-screen .ac-user { cursor: pointer; }
.ac-screen .ac-link { cursor: pointer; color: inherit; }
.ac-screen .ac-text { min-width: 0; overflow-wrap: anywhere; }
.ac-screen .ac-img { max-width: 100%; vertical-align: middle; }
.ac-emote { display: inline-block; vertical-align: -0.15em; margin: 0 calc(var(--s) * 1px);
  width: calc(var(--s) * 14px); height: calc(var(--s) * 14px);
  background: url('../assets/ui/chat/emoteSmile.png') 0 0 / 100% 100% no-repeat; }
.ac-emote-frown { background-image: url('../assets/ui/chat/emoteFrown.png'); }
.ac-emote-laugh { animation: ac-laugh 0.3s step-end infinite; }
@keyframes ac-laugh {
  0%, 16.66% { background-image: url('../assets/ui/chat/emoteSmile.png'); }
  16.67% { background-image: url('../assets/ui/chat/emoteLaugh3.png'); }
  25% { background-image: url('../assets/ui/chat/emoteLaugh4.png'); }
  33.33% { background-image: url('../assets/ui/chat/emoteSmile.png'); }
  50% { background-image: url('../assets/ui/chat/emoteLaugh4.png'); }
  66.67% { background-image: url('../assets/ui/chat/emoteSmile.png'); }
  83.33% { background-image: url('../assets/ui/chat/emoteLaugh4.png'); }
  91.67% { background-image: url('../assets/ui/chat/emoteLaugh12.png'); }
}

/* --- ScreenLogin's world selection (world-select.js) ----------------------
   An 800 x 600 stage scaled to the window, black round it. --s is the page's
   own stage scale, so the shared DataGrid rules (.com-grid / .com-grow) size
   to it. */
.ws-root { position: fixed; inset: 0; z-index: 1000; background: #000000;
  display: grid; place-items: center; overflow: hidden;
  font-family: Arial, sans-serif; color: #dddddd; user-select: none; }
.ws-stage { position: relative; overflow: hidden; background: #000000;
  width: calc(var(--s) * 800px); height: calc(var(--s) * 600px); }
.ws-abs { position: absolute; margin: 0; box-sizing: border-box; }
img.ws-abs { display: block; pointer-events: none; }
/* ThemeSelection: toBack 0.9 / brightness -0.35, the hover 0.93 / -0.15,
   toFront 1 / 0, each tweened over 0.5 s easeInOutQuint. */
.ws-theme { transform: scale(0.9); filter: brightness(0.65);
  transition: transform .5s cubic-bezier(.86, 0, .07, 1), filter .5s cubic-bezier(.86, 0, .07, 1); }
.ws-theme.over { transform: scale(0.93); filter: brightness(0.85); }
.ws-theme.front { transform: scale(1); filter: none; }
/* mcMinimapHolder's txtTitle: Arial 12 #dddddd, centred (Symbol 754). */
.ws-minititle { font: calc(var(--s) * 12px)/calc(var(--s) * 15px) Arial, sans-serif; color: #dddddd;
  text-align: center; white-space: nowrap; }
.ws-namebox { border: calc(var(--s) * 2px) solid #ffcc00; background: rgba(40, 24, 0, .75);
  box-shadow: inset 0 0 0 calc(var(--s) * 1px) #a08001; }
.ws-name { font: calc(var(--s) * 14px)/1.1 Arial, sans-serif; color: #ffcc00; text-align: center;
  white-space: nowrap; pointer-events: none; }
.ws-hit { background: transparent; }
.ws-title { font: bold calc(var(--s) * 16px)/1.1 Arial, sans-serif; color: #ffcc00; text-align: center; }
.ws-list { transition: top .6s cubic-bezier(.22, .9, .3, 1); }
.ws-grid { background: #000000; }
.ws-root .ws-icon { width: calc(var(--s) * 16px); height: calc(var(--s) * 16px); object-fit: contain; }
/* BDButton: the coloured mcBackground frame, Arial Bold white; disableMe puts
   the background at 0.15 and leaves the text. */
.ws-bd { padding: 0; border: 0; border-radius: 0; cursor: pointer; color: #ffffff; z-index: 0;
  font-family: Arial, sans-serif; font-weight: bold; white-space: nowrap; background: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .6); }
.ws-bd::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--bg) center / 100% 100% no-repeat; }
.ws-bd:hover:not(:disabled) { filter: brightness(1.25); }
.ws-bd:active:not(:disabled) { filter: brightness(0.85); }
.ws-bd:disabled { cursor: default; }
.ws-bd:disabled::before { opacity: .15; }
.ws-logged { font: calc(var(--s) * 12px)/calc(var(--s) * 20px) Arial, sans-serif; color: #ffcc00;
  text-align: center; border: 1px solid #3a4a5a; background: #000000; }
.ws-dim { background: rgba(0, 0, 0, .6); }
.ws-dialog { background: linear-gradient(#0f2033, #08121e); border: calc(var(--s) * 2px) solid #2f6f9f;
  box-shadow: 0 0 calc(var(--s) * 18px) rgba(0, 0, 0, .8); }
.ws-dtitle { font: bold calc(var(--s) * 16px)/calc(var(--s) * 30px) Arial, sans-serif; color: #ffcc00;
  text-align: center; border-bottom: 1px solid #2f6f9f; }
.ws-dbody { padding: calc(var(--s) * 12px) calc(var(--s) * 20px); }
.ws-drow { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: calc(var(--s) * 10px); font-size: calc(var(--s) * 13px); }
.ws-drow input, .ws-drow select { width: calc(var(--s) * 200px); font-size: calc(var(--s) * 13px);
  background: #000000; color: #dddddd; border: 1px solid #2f6f9f; padding: calc(var(--s) * 3px); }
.ws-dtext { font-size: calc(var(--s) * 13px); line-height: 1.4; text-align: center; }
/* The server-settings dialog's Start / Stop server (SERVER_TICKS_ENABLED). */
.ws-dbtn { width: calc(var(--s) * 110px); font: bold calc(var(--s) * 12px) Arial, sans-serif;
  color: #ffffff; background: #1d3f5c; border: 1px solid #2f6f9f; padding: calc(var(--s) * 4px); cursor: pointer; }
.ws-dbtn:disabled { opacity: 0.4; cursor: default; }
.ws-tickstate { width: calc(var(--s) * 84px); text-align: right; font-size: calc(var(--s) * 12px); }
/* btnAdminPlantSpy: a 30 x 30 Button carrying the 20px Grp_notification icon. */
.act-admin-plant { display: flex; align-items: center; justify-content: center; padding: 0; }
.act-admin-plant img { width: calc(var(--s) * 20px); height: calc(var(--s) * 20px); pointer-events: none; }

/* AvatarPicture.showEmptyAvatar: mcEmptyAvatar (themeGfx.swf Symbol 950 /
   DefineShape3 949) -- a black bust on #333333 -- wherever an AvatarPicture
   holds an "empty" avatar. */
.avatar-empty { background: #333333 url('../assets/client/mcEmptyAvatar.svg') 0 0 / 100% 100% no-repeat !important; }

/* =========================================================================
   Phones, tablets, touch. NOT IN THE ORIGINAL -- a fixed 1000 x 700 Flash
   stage -- so everything below is the replica's own, and additive: with no
   safe-area insets, a fine pointer and no html[data-hud] (main.js sets it
   only under 720 x 504) none of it changes the desktop.
   ========================================================================= */
html, body { overscroll-behavior: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* The notch / home bar (viewport-fit=cover): the stage keeps clear of them. */
#app {
  position: absolute; width: auto; height: auto;
  top: env(safe-area-inset-top, 0px); right: env(safe-area-inset-right, 0px);
  bottom: env(safe-area-inset-bottom, 0px); left: env(safe-area-inset-left, 0px);
}
#modal {
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
           env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
/* The map takes every finger itself: one pans, two pinch-zoom (render.js). */
#map, #minimap { touch-action: none; }
#map { -webkit-touch-callout: none; -webkit-user-select: none; }
/* A window too big for a phone is scaled down whole by ui.fitWindow; should
   one still overflow, the layer scrolls rather than cutting it off. */
#modal.on { overflow: auto; place-items: safe center; }
#modal.on.anchor-right { place-items: safe center end; }
/* ...but a floating screen keeps its own corner: ScreenSquadOrders is
   anchored right / bottom (StageManager.as:153), clear of the map it is
   aimed at. */
#modal.on.floating { place-items: safe end end; }
#modal.on.floating.anchor-right { place-items: safe center end; }

/* --- portrait phone: the top bar on two rows, the minimap at the bottom --- */
html[data-hud="portrait"] #topbar {
  height: calc(var(--s) * 82px); align-items: flex-start;
  background-size: auto calc(var(--s) * 41px); background-repeat: repeat;
}
html[data-hud="portrait"] #bar-right { height: calc(var(--s) * 41px); }
html[data-hud="portrait"] #tick-meter { display: none; }
html[data-hud="portrait"] #res-bar {
  top: calc(var(--s) * 41px); bottom: auto; height: calc(var(--s) * 41px);
  left: 0; transform: none;
}
html[data-hud="portrait"] #dev-clock {
  position: absolute; right: calc(var(--s) * 10px); top: calc(var(--s) * 41px);
  height: calc(var(--s) * 41px);
}
html[data-hud="portrait"] #screen-topleft,
html[data-hud="portrait"] #button-block,
html[data-hud="portrait"] #button-admin,
html[data-hud="portrait"] #missions { translate: 0 calc(var(--s) * 41px); }
/* ScreenTopRight below the map instead of beside ScreenTopLeft: there is no
   room for both across a phone. It sits on the broadcast bar (75 tall). */
html[data-hud="portrait"] #screen-minimap { top: auto; bottom: calc(var(--s) * 76px); }
html[data-hud="portrait"] #status-output { bottom: calc(var(--s) * 292px); }

/* --- touch: bigger hit areas where the HUD has room around a control ----- */
@media (pointer: coarse) {
  #button-side .iface-btn, button.round { position: relative; }
  #button-side .iface-btn::before, button.round::before, #button-row .iface-btn::before,
  #zoom-in::before, #zoom-out::before, button.btn-x::before {
    content: ''; position: absolute; background: transparent;
  }
  #button-side .iface-btn::before { inset: calc(var(--s) * -2.3px) calc(var(--s) * -10px) calc(var(--s) * -2.3px) calc(var(--s) * -2.9px); }
  button.round::before { inset: calc(var(--s) * -6px) calc(var(--s) * -4.5px); }
  #button-row .iface-btn::before { inset: calc(var(--s) * -4px) calc(var(--s) * -0.85px) calc(var(--s) * -10px); }
  #zoom-in::before, #zoom-out::before { inset: calc(var(--s) * -6px) calc(var(--s) * -10px); }
  #zoom-in::before { bottom: 0; }
  #zoom-out::before { top: 0; }
  button.btn-x::before { inset: calc(var(--s) * -8px); }
  /* No hover on glass: the hover-only brighten would stick after a tap. */
  button:hover:not(:disabled) { filter: none; }
}

/* The long-press tooltip (touch.js) reuses ScreenToolTip's box. */
#maptooltip.touch-tip { pointer-events: none; }

/* The right-hand group carries the replica's own offline controls (the tick
   meter, pause / speed, ? i X) beside ScreenTopTopRight's tick read-out, and
   is ~336 stage px against the original's ~150, so on a stage narrower than
   about 1080 it ran under the centred resource panel and hid txtTimeLeft.
   The meter (not in the client) goes first, then the panel gives way to the
   left just as far as it must -- it stays centred wherever there is room. */
@media (max-width: 1100px) { #tick-meter { display: none; } }
#res-bar { left: min(50%, 100% - var(--s) * 508px); }

/* Admin tools > World (an admin addition): section headings, the selected
   speed, and the rewind slider. */
.adm-screen .adm-head { font-weight: bold; font-size: calc(var(--s) * 14px); }
.adm-screen .rc-btn.on { filter: brightness(1.35) saturate(1.4); outline: calc(var(--s) * 1px) solid #ffcc00; }
.adm-screen .adm-slider { accent-color: #ffcc00; cursor: pointer; margin: 0; }