* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  background: #07080b;
  color: #cfccc4;
  font-family: "Consolas", "Cascadia Mono", monospace;
  font-size: 13px;
}

#game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

#overlay3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 7px;
  padding: 6px 10px;
  background: rgba(10, 11, 15, 0.92);
  border-bottom: 1px solid #23252c;
  user-select: none;
}
#playerChip { font-weight: bold; letter-spacing: 1px; }
.res {
  color: #b8b4aa;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #23252c;
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 12px;
  /* The bar must not RESIZE as the numbers tick. Figures are drawn on a
     fixed advance and each chip keeps a floor width, so a rising gold
     count cannot push the row over the edge and wrap the whole topbar
     onto two lines — which moved the minimap and the feed with it. */
  font-variant-numeric: tabular-nums;
  flex: 0 1 auto;
  min-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The colony line says the most and changes the most: give it room for
   its longest reading so it never grows into a wrap. */
#resPop { min-width: 190px; }
#resPay { min-width: 200px; }
#depthBtns { margin-left: auto; }
.teamRow {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 1px 0;
}
.teamRow .name { font-weight: bold; letter-spacing: 1px; min-width: 70px; }
.teamRow .takeBtn { margin-left: auto; padding: 1px 8px; font-size: 11px; }

#tooltip {
  position: fixed;
  z-index: 20;
  width: 270px;
  background: #101218;
  border: 1px solid #4a4f5c;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
  pointer-events: none;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
}
#tooltip.hidden { display: none; }
#tooltip .tipname { font-weight: bold; margin-bottom: 3px; }
#tooltip .tipbody { color: #a8a49a; }

button {
  background: #1a1c22;
  color: #cfccc4;
  border: 1px solid #33363f;
  border-radius: 3px;
  padding: 4px 10px;
  font: inherit;
  cursor: pointer;
  transition: background 0.08s, border-color 0.08s;
}
button:hover { background: #262a33; border-color: #4a4f5c; }
button.active { background: #3a3f4d; border-color: #7a86a0; color: #fff; }
button .cost { color: #d4af37; font-size: 11px; }

#tabs button {
  border-radius: 0;
  border-right-width: 0;
  padding: 4px 14px;
}
#tabs button:first-child { border-radius: 3px 0 0 3px; }
#tabs button:last-child { border-radius: 0 3px 3px 0; border-right-width: 1px; }
#tabs { gap: 0; }

#messages {
  position: absolute;
  top: 108px; left: 12px;
  pointer-events: none;
  max-width: 380px;
}
.msg {
  background: rgba(12, 13, 18, 0.85);
  border-left: 3px solid #6a7186;
  padding: 4px 8px;
  margin-bottom: 4px;
  transition: opacity 0.9s;
}
.msg.urgent { border-left-color: #d04a38; color: #ffb0a0; }
.msg.fade { opacity: 0; }
.msg.jump { pointer-events: auto; cursor: pointer; }
.msg.jump:hover { background: rgba(30, 33, 44, 0.95); }

#toolbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(10, 11, 15, 0.92);
  border-top: 1px solid #23252c;
  padding: 6px 12px;
  user-select: none;
}
#tabs { display: flex; gap: 6px; margin-bottom: 6px; }
#tools { display: flex; gap: 6px; flex-wrap: wrap; }
/* The readout under the toolbar is a FIXED slab: it fills with whatever
   is under the cursor, and the bar above it never moves. */
#infoline {
  margin-top: 6px;
  color: #8f8c84;
  height: 74px;
  line-height: 1.4;
  overflow: hidden;
  font-size: 12px;
}
#infoline .hl { color: #cfccc4; }

#minimap {
  position: absolute;
  top: 42px; right: 12px;
  width: 192px;
  height: 192px;
  border: 1px solid #33363f;
  image-rendering: pixelated;
  background: #000;
  cursor: pointer;
}

/* Scrollbars: part of the dungeon, not the browser chrome */
* {
  scrollbar-width: thin;
  scrollbar-color: #3d4250 transparent;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #3d4250;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: #4e5568; }
::-webkit-scrollbar-corner { background: transparent; }

#creatureList {
  position: absolute;
  left: 12px;
  bottom: 118px;
  width: 280px;
  max-height: 46vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(12, 13, 18, 0.88);
  border: 1px solid #33363f;
  font-size: 12px;
  user-select: none;
}
#creatureList .head {
  padding: 4px 8px;
  font-weight: bold;
  letter-spacing: 1px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  position: sticky;
  top: 0;
}
#creatureList .row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  cursor: pointer;
  white-space: nowrap;
}
#creatureList .row:hover { background: #262a33; }
#creatureList .row.sel { background: #3a3f4d; }
#creatureList .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: none;
}
/* Names and states give way before the hp bar and Grab button do */
#creatureList .cname { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#creatureList .cstate { color: #8f8c84; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#creatureList .hp {
  flex: none;
  width: 34px; height: 4px;
  background: rgba(0, 0, 0, 0.7);
}
#creatureList .hp i {
  display: block;
  height: 100%;
  background: #6fae52;
}
#creatureList .hp i.low { background: #e05050; }
/* Every imp's own mood, beside its health: the crew average hides the one
   that is about to down tools, and that one is the whole story. Hover it
   for the terms that made the number. */
#creatureList .cmood {
  flex: none;
  width: 32px;
  text-align: right;
  color: #8fae72;
  font-variant-numeric: tabular-nums;
  cursor: help;
}
#creatureList .cmood.mid { color: #c8b06a; }
#creatureList .cmood.low { color: #e08a50; }
#creatureList .cmood.sulk { color: #e05050; font-weight: bold; }

#inspect {
  position: absolute;
  right: 12px;
  top: 244px;
  width: 192px;
  background: rgba(12, 13, 18, 0.9);
  border: 1px solid #33363f;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
  pointer-events: none;
}
#inspect.hidden { display: none; }
#inspect .name { font-weight: bold; letter-spacing: 1px; }
#inspect .bad { color: #ff9a8a; }
#inspect .dim { color: #8f8c84; }

#handView {
  position: absolute;
  right: 12px;
  top: 244px;
  max-width: 220px;
  color: #d8c85a;
  text-align: right;
  pointer-events: none;
}
#inspect:not(.hidden) ~ #handView { top: 420px; }

#overlay {
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 8, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
#overlay.hidden { display: none; }
#overlay .panel {
  background: #101218;
  border: 1px solid #33363f;
  padding: 28px 36px;
  text-align: center;
  max-width: 560px;
}
#overlay h1 { letter-spacing: 3px; margin-bottom: 12px; }
#overlay p { margin-bottom: 10px; line-height: 1.5; }
#overlay .dim { color: #6f6c64; font-size: 12px; }
#overlay button { margin: 8px 6px 0; }
#overlay select {
  margin: 8px 6px 0;
  background: #1a1d26;
  color: #d8d4cb;
  border: 1px solid #33363f;
  padding: 6px 8px;
  font: inherit;
}
#overlay input[type="file"] { color: #6f6c64; font-size: 12px; max-width: 220px; }
#topbar input[type="range"] { width: 46px; vertical-align: middle; accent-color: #7a86a0; }
#tabs button.locked { opacity: 0.4; }
/* Cannot pay for it yet: the button still selects, the price reads red */
#tools button.poor .cost { color: #e08a7a; }
#tools button.poor { opacity: 0.75; }
#creatureList .grabBtn {
  flex: none;
  margin-left: 4px;
  padding: 1px 6px;
  font-size: 10px;
  background: #232733;
  border: 1px solid #3a3f4f;
  color: #c8ccd8;
  cursor: pointer;
}
#creatureList .grabBtn:hover { background: #2e3444; }
#overlay input:not([type="file"]) {
  margin: 8px 6px 0;
  background: #1a1d26;
  color: #d8d4cb;
  border: 1px solid #33363f;
  padding: 6px 8px;
  font: inherit;
  width: 12em;
}
#overlay table { margin: 10px auto; text-align: left; border-spacing: 12px 3px; }
#overlay td:first-child { color: #d4af37; white-space: nowrap; }