* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: #0a0e0a; color: #cfe; font-family: ui-monospace, 'Cascadia Code', 'Fira Code', 'Roboto Mono', monospace; height: 100%; overflow: hidden; }

#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

#topbar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; background: #10171a; border-bottom: 1px solid #1f2e2c;
  font-size: 12px; flex-wrap: nowrap; flex: none; height: 40px;
}
#hint {
  flex: 1; color: #8fae9d; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#topbar button, .hudBtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  background: #16201f; color: #5DCAA5; border: 1px solid #2a3e3a;
  border-radius: 0; padding: 6px 10px; font-size: 12px; cursor: pointer;
}
#topbar button:active, .hudBtn:active { background: #1f2e2c; }
#topbar button svg, .hudBtn svg, .ordbtn svg { display: block; flex: none; }
.modal {
  position: fixed; inset: 0; background: rgba(10,14,14,0.75);
  display: flex; align-items: center; justify-content: center; z-index: 10;
}
.modal.hidden { display: none; }
.modalBox {
  background: #10171a; border: 1px solid #2a3e3a; padding: 16px;
  width: min(90vw, 360px); max-height: 90dvh; overflow-y: auto;
}
.modalTitle { color: #cfe; font-size: 14px; margin-bottom: 8px; text-align: center; }
.modalSubLabel { color: #8fae9d; font-size: 11px; margin: 8px 0 4px; text-transform: uppercase; letter-spacing: 0.05em; }
.modalButtons { display: flex; gap: 8px; margin-bottom: 0; }
.modalButtons + .modalButtons { margin-top: 8px; }
.diffBtn {
  flex: 1; background: #16201f; color: #5DCAA5; border: 1px solid #2a3e3a;
  border-radius: 0; padding: 12px 4px; font-size: 14px; cursor: pointer;
}
.diffBtn:active { background: #1f2e2c; }
.oppBtn.active { background: #1f3530; border-color: #5DCAA5; }
.cancelBtn { color: #8fae9d; font-size: 12px; padding: 8px 4px; }

#canvasWrap { flex: 1; position: relative; min-height: 0; }
#cv { width: 100%; height: 100%; display: block; touch-action: none; }

#orderBar {
  display: flex; gap: 6px; padding: 6px 8px; background: #10171a;
  border-top: 1px solid #1f2e2c; flex-wrap: wrap; align-items: center;
}
.seggroup {
  display: flex; border: 1px solid #2a3e3a; border-radius: 0; overflow: hidden;
}
.seggroup .ordbtn {
  border: none; border-right: 1px solid #2a3e3a; border-radius: 0;
}
.seggroup .ordbtn:last-child { border-right: none; }
.ordbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 6px 10px; font-size: 14px; line-height: 1.2;
  background: #16201f; color: #cfe; border: 1px solid #2a3e3a;
  border-radius: 0; cursor: pointer; text-align: center; min-width: 34px;
  /* Buttons must never shrink below their content -- a shrunk button's
     overflowing text/icons remain visually on top of it but fall outside
     its actual hit area, so taps on that text are silently swallowed by
     whatever sits behind it. */
  flex-shrink: 0;
}
.ordbtn.active { background: #1d3a2f; border-color: #5DCAA5; color: #5DCAA5; }
/* Inside a .seggroup, buttons only have a right-side divider (no top/left/
   bottom border) -- border-color above would then only ever tint that one
   edge, making the active state look like a stray line on the right instead
   of a highlighted button. An inset box-shadow frames the whole button
   without affecting layout or the dividers between its neighbours. */
.seggroup .ordbtn.active { box-shadow: inset 0 0 0 1px #5DCAA5; }
.ordbtn:disabled { opacity: 0.35; }
.ordbtn.insufficient { opacity: 0.6; border-color: #c0492a; color: #e08a5d; }
/* Fixed width (sized for up to 5 digits) so an extra digit in the stock
   count never nudges the row's total width past the wrap threshold -- on a
   narrow screen that would otherwise bump this onto its own line below the
   order buttons every time stock crossed 1000. */
#resourceHud { color: #FAC775; font-size: 12px; margin-left: auto; padding: 0 4px; min-width: 78px; }
#buildHud {
  display: flex; align-items: center; gap: 6px;
  padding: 0 6px; min-height: 29px; flex: 0 0 100%; order: 99;
}
.queueItem {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: #16201f; border: 1px solid #2a3e3a; border-radius: 0;
  padding: 4px 6px; cursor: pointer;
}
.queueItem:active { background: #1f2e2c; }
.qicon {
  color: #5DCAA5; font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  animation: qspin linear infinite;
}
.qicon--static { animation: none; }
.qicon svg { display: block; }
.qbar { width: 22px; height: 3px; background: #1f2e2c; }
.qbar-fill { height: 100%; background: #5DCAA5; }
.qmore { color: #5DCAA5; font-size: 12px; align-self: center; }
@keyframes qspin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.cost { color: #FAC775; }

/* Fixed widths for the level/cost labels on upgrade buttons -- their text
   changes (e.g. "60" -> "100" -> "max") whenever the queue or stock
   changes, which can resize the button mid-tap and make the browser miss
   the click/tap entirely, requiring repeated presses. */
.ordbtn .lvl { display: inline-block; min-width: 2.4ch; text-align: right; }
.ordbtn .cost { display: inline-block; min-width: 3ch; text-align: right; }

#scoreHud {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 2px 6px; background: #10171a;
  border-top: 1px solid #1f2e2c;
}

.aboutBox { text-align: center; }
#aboutArt { width: 100%; height: auto; display: block; margin-bottom: 8px; }
.aboutTitle { font-size: 28px; font-weight: bold; letter-spacing: 2px; margin-bottom: 2px; }
.aboutSubtitle { color: #8fae9d; font-size: 12px; margin-bottom: 12px; }
.aboutText { color: #cfe; font-size: 12px; text-align: left; margin: 0 0 8px; line-height: 1.5; }
.aboutText em { color: #8fae9d; font-style: italic; }
.aboutText strong { color: #5DCAA5; }
.aboutHow { border-top: 1px solid #1f2e2c; padding-top: 8px; margin-top: 4px; }
#aboutLegend { width: 100%; height: auto; display: block; margin: 4px 0 10px; }
.aboutCopyleft { color: #8fae9d; font-size: 11px; margin: 0 0 12px; }
.aboutCopyleft a { color: #5DCAA5; }

#updateBanner {
  position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  background: #10171a; border: 1px solid #2a3e3a; color: #cfe;
  padding: 8px 12px; font-size: 12px; z-index: 20; white-space: nowrap;
}
#updateBanner.hidden { display: none; }
#updateBanner button {
  background: #16201f; color: #5DCAA5; border: 1px solid #2a3e3a;
  border-radius: 0; padding: 6px 10px; font-size: 12px; cursor: pointer;
}
#updateBanner button:active { background: #1f2e2c; }