:root {
  color-scheme: dark;
  --ink:      #cfe2ff;
  --ink-dim:  #6f86ad;
  --ink-hot:  #eaf2ff;
  --accent:   #49d0ff;
  --warn:     #ffd27a;
  --cred:     #8cffb0;
  --panel-bg: #0a1120e6;
  --line:     #1c2840;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #04060c;
  font: 13px/1.45 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--ink);
}
canvas { display: block; }

/* ---------------------------------------------------------------- boot --- */
#boot {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; gap: 10px;
  align-items: center; justify-content: center;
  text-align: center; padding: 24px;
  background: #04060c; color: var(--ink-dim);
}
#boot .hint { color: #3d4b63; font-size: 12px; max-width: 46ch; }
#boot.error { color: #ff8f8f; }

/* ----------------------------------------------------------------- hud --- */
#hud {
  position: fixed; top: 0; left: 0;
  padding: 14px 18px; max-width: 380px;
  pointer-events: none;
  text-shadow: 0 1px 3px #000a;
}
#hud h1 {
  margin: 0 0 2px; font-size: 15px; letter-spacing: 2px; color: #fff; font-weight: 600;
}
#hud h1 .dim { color: var(--accent); }
#hud .sub { color: var(--ink-dim); margin-bottom: 10px; font-size: 12px; }
#hud .sub b { color: #9fb3d6; font-weight: 500; }
#hud .row { margin: 2px 0; }
#hud .k { color: var(--ink-dim); display: inline-block; width: 9ch; }
#hud .v { color: var(--ink-hot); }
#hud .note {
  margin-top: 8px; color: var(--warn); font-size: 12px; min-height: 1.4em;
}
#hud .v.cr { color: var(--cred); }
#hud .v.cr .rate { color: var(--ink-dim); margin-left: 6px; font-size: 11px; }

/* --------------------------------------------------------- command bar --- */
/*
 * The StarCraft shape: one strip along the bottom, three regions — the command
 * card for whatever is selected, the outpost's build queue, and a readout of
 * the selection. It replaced a floating panel whose Queue section sat *below*
 * its Build section, so every hull you queued grew the queue and shoved the
 * build buttons you were aiming at somewhere else. Fixed regions in a fixed
 * strip cannot do that: the slots are always in the same eight places.
 */
#cmdbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  /*
   * Four tracks for three regions: card, queue, SLACK, info. Neither the card
   * nor the readout wants to be wider than its contents, and a greedy queue on a
   * wide monitor is 400px of empty box space. The slack sits between them, so
   * the readout is pinned to the right edge and nothing moves when the queue
   * fills up — which is the whole complaint that started this.
   */
  display: grid; grid-template-columns: max-content minmax(190px, 366px) 1fr 340px;
  gap: 8px; padding: 8px 12px 10px;
  background: linear-gradient(to top, #04060cf2 68%, #04060c00);
}
#cmdbar .region:last-child { grid-column: 4; }
#cmdbar .region {
  min-width: 0;                        /* so the queue may shrink, not overflow */
  padding: 5px 7px 6px;
  background: var(--panel-bg); border: 1px solid var(--line); border-radius: 8px;
}
#cmdbar .region.card { padding: 6px; }
#cmdbar .cap {
  color: #3d4b63; font-size: 9px; text-transform: uppercase; letter-spacing: 1.4px;
  margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- the card: four columns, two rows, always drawn ----------------------- */
/*
 * Empty slots are drawn rather than hidden. A card that reflows as its verbs
 * come and go is the same bug the old panel had, one level down: the point of
 * a hotkey grid is that R is always in the top-left corner.
 */
/* 84px is set by the longest label the game has — "Interceptor" at 10px. A slot
   that ellipsises its own verb is a slot you have to hover to read. */
#cmdCard { display: grid; grid-template-columns: repeat(4, 84px); grid-auto-rows: 44px; gap: 4px; }
.slot {
  position: relative; overflow: hidden;
  padding: 3px 5px; text-align: left;
  background: #0d1626; color: var(--ink);
  border: 1px solid #223150; border-radius: 6px;
  cursor: pointer; font: 11px/1.25 ui-monospace, monospace;
}
.slot:hover:not(:disabled):not(.empty) { background: #16243c; border-color: #3a567f; }
.slot:disabled { cursor: default; opacity: .38; }
.slot.empty { background: #080e19; border-style: dashed; border-color: #16203a; cursor: default; }
.slot.empty .key { opacity: .45; }
.slot.on { border-color: #3f6f57; background: #10201a; }
.slot .nm { display: block; color: var(--ink-hot); font-size: 10px; letter-spacing: .2px; }
.slot.empty .nm { color: transparent; }
.slot .tag { display: block; margin-top: 1px; font-size: 10px; }
.slot .tag b { color: var(--cred); font-weight: 400; }
.slot .tag i { color: var(--ink-dim); font-style: normal; margin-left: 5px; }
.slot .key {
  position: absolute; right: 3px; bottom: 2px;
  color: var(--accent); font-size: 10px; opacity: .8;
}

/* --- the queue ------------------------------------------------------------ */
#cmdQueue[data-idle]::after {
  content: "idle"; align-self: center; color: #3d4b63; font-size: 11px; padding-left: 2px;
}
/* Eight boxes to a row, two rows: sixteen places for a queue that shows at most
   thirteen, so it wraps exactly once and never grows the region it sits in. */
#cmdQueue {
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px;
  height: 78px; overflow: hidden;
}
.qbox {
  position: relative; overflow: hidden;
  width: 40px; height: 37px; padding: 0;
  background: #0d1626; color: var(--ink);
  border: 1px solid #223150; border-radius: 5px;
  cursor: pointer; font: 10px/1.2 ui-monospace, monospace;
}
.qbox:hover { border-color: #7a4a4a; background: #241318; }
.qbox:hover .n::after { content: "\00d7"; position: absolute; inset: 0; display: grid; place-items: center;
  background: #241318d0; color: #ff9c9c; font-size: 14px; }
/* Progress rises from the bottom in the same amber as the in-world bar, so the
   head of the queue is legible as a box that is filling rather than as text. */
.qbox i { position: absolute; inset: auto 0 0 0; background: #ffc7663d; }
.qbox .n { position: absolute; inset: 0; display: grid; place-items: center; }
.qbox .n b { font-weight: 400; color: var(--ink-hot); }
.qbox.more { border-style: dashed; cursor: default; color: var(--ink-dim); }
.qbox.more:hover { border-color: #223150; background: #0d1626; }
.qbox.more:hover .n::after { content: none; }

/* --- selected-thing info -------------------------------------------------- */
#cmdInfo { font-size: 12px; }
#cmdInfo .nm { color: var(--ink-hot); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cmdInfo .nm.struct { color: #bdffd8; }
/* A body's name in the selection cyan, matching the ring drawn around it — the
   readout and the thing in the world it describes are the same colour. */
#cmdInfo .nm.body { color: var(--accent); }
#cmdInfo .meta { color: var(--ink-dim); font-size: 11px; }
#cmdInfo .ord { color: var(--warn); font-size: 11px; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cmdInfo .rally {
  margin-top: 4px; padding: 2px 6px; border-radius: 5px; font-size: 11px;
  background: #0f2419; border: 1px solid #2c5040; color: #bdffd8;
}
#cmdInfo .rally .t { color: var(--ink-dim); }
#cmdInfo .rally .clear {
  float: right; padding: 0 4px; margin: -1px -4px 0 0;
  background: none; border: 0; color: #7fb99a; cursor: pointer;
  font: 11px ui-monospace, monospace;
}
#cmdInfo .rally .clear:hover { color: #d8fff0; }

/* --------------------------------------------------------------- panel --- */
#panel {
  position: fixed; top: 0; right: 0;
  padding: 14px 16px; text-align: right;
  /* Stops above the command bar rather than scrolling behind it. */
  max-height: calc(100vh - 150px); overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #243450 transparent;
}
#panel .lbl {
  color: var(--ink-dim); font-size: 10px; text-transform: uppercase;
  letter-spacing: 1.4px; margin: 10px 0 4px;
}
#panel button {
  display: block; margin: 3px 0 3px auto; padding: 4px 10px; min-width: 148px;
  background: #0d1626; color: var(--ink); border: 1px solid #223150; border-radius: 6px;
  cursor: pointer; font: 12px ui-monospace, monospace; text-align: right;
}
#panel button:hover { background: #16243c; border-color: #3a567f; }
#panel button .tag { color: var(--ink-dim); font-size: 10px; margin-left: 8px; }
#panel button.moon   { min-width: 128px; font-size: 11px; opacity: .85; }
#panel button.star   { border-color: #6e5a2a; }
#panel button.fleet  { border-color: #2a5a6e; color: #bfe9ff; }
#panel button.action { border-color: #3a2a5a; color: #d8c8ff; margin-top: 10px; }

/* -------------------------------------------------------- context menu --- */
#ctxmenu {
  position: fixed; top: 0; left: 0; z-index: 20;
  min-width: 172px; padding: 8px;
  background: var(--panel-bg); border: 1px solid #2b3f63; border-radius: 8px;
  box-shadow: 0 10px 26px #000a;
}
#ctxmenu .hdr {
  padding: 1px 6px 7px; margin-bottom: 6px; border-bottom: 1px solid var(--line);
}
#ctxmenu .hdr .name { color: var(--ink-hot); }
#ctxmenu .hdr .meta {
  color: var(--ink-dim); font-size: 10px;
  text-transform: uppercase; letter-spacing: 1.2px;
}
#ctxmenu button {
  display: block; width: 100%; margin: 3px 0; padding: 5px 8px;
  background: #0d1626; color: var(--ink); border: 1px solid #223150; border-radius: 6px;
  cursor: pointer; font: 12px ui-monospace, monospace; text-align: left;
}
#ctxmenu button:hover { background: #16243c; border-color: #3a567f; }
#ctxmenu button .tag { float: right; color: var(--ink-dim); font-size: 10px; }
/* The menu and the command card share one verb list, so they share its markup:
   <i> means "dim qualifier" in both, and is italic in neither. */
#ctxmenu button .tag i { font-style: normal; }

/* ---------------------------------------------------------------- help --- */
#help {
  position: fixed; bottom: 118px; left: 0; right: 0;
  padding: 8px 18px 10px;
  color: var(--ink-dim); font-size: 12px;
  pointer-events: none;
  background: linear-gradient(to top, #04060cb0, transparent);
}
#help b { color: #9fb3d6; font-weight: 500; }
#help .sep { color: #253449; margin: 0 6px; }

/* ------------------------------------------------------- selection box --- */
#selbox {
  position: fixed; pointer-events: none;
  border: 1px solid var(--accent);
  background: #49d0ff1a;
  box-shadow: 0 0 0 1px #04060c80 inset;
}

/* --------------------------------------------------------------- toast --- */
#toast {
  position: fixed; left: 50%; bottom: 158px; transform: translateX(-50%);
  padding: 6px 14px; border-radius: 6px;
  background: var(--panel-bg); border: 1px solid var(--line);
  color: var(--ink-hot); font-size: 12px;
  opacity: 0; transition: opacity .18s ease;
  pointer-events: none; white-space: nowrap;
}
#toast.show { opacity: 1; }