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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0b1622;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: #e8eef5;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}

#game {
  position: fixed;
  inset: 0;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  cursor: crosshair;
}

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}

.brand {
  font-weight: 800;
  letter-spacing: 3px;
  font-size: 18px;
  color: #ffd98a;
  text-shadow: 0 2px 0 #5a3d12, 0 0 18px rgba(255, 200, 100, 0.25);
}
.brand span { color: #7fd4b0; font-size: 12px; letter-spacing: 2px; }

.pill {
  pointer-events: none;
  background: rgba(10, 22, 34, 0.72);
  border: 1px solid rgba(120, 170, 210, 0.28);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  color: #bcd3e6;
  backdrop-filter: blur(4px);
}
#status.ok { color: #9fe6b6; border-color: rgba(90, 200, 130, 0.4); }
#status.err { color: #ff9c9c; border-color: rgba(220, 100, 100, 0.5); }

/* --- stat bar (population on top, resources below), beside the logo ------ */
#statsbar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: auto;
  padding: 6px 8px;
  background: rgba(10, 22, 34, 0.80);
  border: 1px solid rgba(120, 170, 210, 0.28);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
}
.statrow { display: flex; gap: 5px; }
.statrow + .statrow { padding-top: 4px; border-top: 1px solid rgba(120, 170, 210, 0.14); }
.res {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 5px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
}
.res .rv { font-size: 13px; font-weight: 700; color: #eaf1f8; font-variant-numeric: tabular-nums; min-width: 12px; }
.res .pic { width: 16px; height: 16px; display: inline-flex; align-items: center; }
.res .pic canvas { display: block; image-rendering: pixelated; }

/* world + hover info, stacked at the top of the map controls */
#worldinfo { display: flex; flex-direction: column; gap: 5px; width: 100%; }
#worldinfo .pill { pointer-events: none; text-align: center; font-size: 11px; padding: 4px 10px; }

/* --- map controls (top-right): compass + zoom + coords ------------------- */
#mapctl {
  position: fixed;
  top: 12px;
  right: 14px;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: rgba(10, 22, 34, 0.82);
  border: 1px solid rgba(120, 170, 210, 0.28);
  border-radius: 14px;
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  z-index: 6;
}
#compass {
  display: grid;
  grid-template-columns: repeat(3, 30px);
  grid-template-rows: repeat(3, 30px);
  gap: 3px;
}
.cbtn {
  border: 1px solid rgba(120, 170, 210, 0.22);
  background: linear-gradient(180deg, #1b2c3e, #12202e);
  color: #bcd7ee;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.06s ease, border-color 0.1s ease, background 0.1s ease;
}
.cbtn:hover { border-color: rgba(150, 200, 240, 0.65); background: linear-gradient(180deg, #23384c, #16273a); }
.cbtn:active { transform: scale(0.92); }
.cbtn.n { grid-column: 2; grid-row: 1; }
.cbtn.w { grid-column: 1; grid-row: 2; }
.cbtn.c { grid-column: 2; grid-row: 2; color: #ffd98a; font-size: 15px; }
.cbtn.e { grid-column: 3; grid-row: 2; }
.cbtn.s { grid-column: 2; grid-row: 3; }
#zoomctl {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
}
.zbtn {
  flex: 1;
  height: 26px;
  border: 1px solid rgba(120, 170, 210, 0.22);
  background: linear-gradient(180deg, #1b2c3e, #12202e);
  color: #cfe0ee;
  border-radius: 8px;
  font-size: 17px; font-weight: 700; line-height: 1;
  cursor: pointer;
  transition: transform 0.06s ease, border-color 0.1s ease, background 0.1s ease;
}
.zbtn:hover { border-color: rgba(150, 200, 240, 0.65); background: linear-gradient(180deg, #23384c, #16273a); }
.zbtn:active { transform: scale(0.94); }
#zlevel { font-size: 12px; color: #bcd3e6; min-width: 30px; text-align: center; font-variant-numeric: tabular-nums; }
#coords {
  font-size: 12px; color: #9fb6cb; font-variant-numeric: tabular-nums;
  padding-top: 2px; letter-spacing: 0.5px;
}
#resetbtn {
  width: 100%;
  margin-top: 4px;
  padding: 5px 0;
  border: 1px solid rgba(210, 120, 110, 0.4);
  background: linear-gradient(180deg, #3a2028, #2a171c);
  color: #f0b8b0;
  border-radius: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.4px;
  cursor: pointer;
  transition: transform 0.06s ease, border-color 0.1s ease, background 0.1s ease;
}
#resetbtn:hover { border-color: rgba(240, 150, 140, 0.75); background: linear-gradient(180deg, #4a262f, #331a20); }
#resetbtn:active { transform: scale(0.96); }
.devtoggle {
  width: 100%;
  padding: 5px 0;
  border: 1px solid rgba(120, 170, 210, 0.28);
  background: linear-gradient(180deg, #1b2c3e, #12202e);
  color: #bcd7ee;
  border-radius: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
  cursor: pointer;
  transition: transform 0.06s ease, border-color 0.1s ease, background 0.1s ease;
}
.devtoggle:hover { border-color: rgba(150, 200, 240, 0.65); background: linear-gradient(180deg, #23384c, #16273a); }
.devtoggle:active { transform: scale(0.96); }
.devtoggle.on { border-color: rgba(120, 210, 150, 0.7); background: linear-gradient(180deg, #1e3a2a, #14261b); color: #a8e6bc; }
/* simulation-speed picker, under Reset — same shape as the dev toggles */
#tickms {
  width: 100%;
  margin-top: 4px;
  padding: 5px 4px;
  border: 1px solid rgba(120, 170, 210, 0.28);
  background: linear-gradient(180deg, #1b2c3e, #12202e);
  color: #bcd7ee;
  border-radius: 8px;
  font-family: inherit;
  font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
  cursor: pointer;
  appearance: none; text-align: center; text-align-last: center;
  transition: border-color 0.1s ease, background 0.1s ease;
}
#tickms:hover { border-color: rgba(150, 200, 240, 0.65); background: linear-gradient(180deg, #23384c, #16273a); }
#tickms option { background: #12202e; color: #bcd7ee; }

#toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px;
}

/* One cohesive toolbar card: a tab strip over the active category's palette. */
.toolpanel {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: linear-gradient(180deg, rgba(14, 28, 42, 0.9), rgba(9, 18, 28, 0.9));
  border: 1px solid rgba(120, 170, 210, 0.3);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  max-width: 96vw;
  overflow: hidden;
}

/* tab strip inside the card: Pan · categories · Demolish */
.tool-cats {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(120, 170, 210, 0.18);
  background: rgba(0, 0, 0, 0.16);
}
/* thin separators setting the Pan/Demolish utilities apart from the categories */
.cat-sep {
  width: 1px;
  align-self: stretch;
  margin: 4px 3px;
  background: rgba(150, 190, 225, 0.22);
}

/* the palette (active category's tools) — no card of its own; the panel is it */
.tool-group {
  display: flex;
  gap: 6px;
  padding: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* category tabs match the Pan/Demolish utility buttons so the row aligns:
   an icon over a label, same height and text size */
.cat-tab {
  pointer-events: auto;
  width: 68px;
  height: 46px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.04);
  color: #b7cadb;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  padding-bottom: 5px;
  transition: transform 0.06s ease, border-color 0.1s ease, background 0.1s ease, color 0.1s ease;
}
.cat-tab canvas { image-rendering: pixelated; margin-top: 3px; opacity: 0.85; }
.cat-tab:hover { background: rgba(150, 200, 240, 0.12); color: #dce8f2; transform: translateY(-1px); }
.cat-tab.active {
  border-color: #ffd98a;
  background: linear-gradient(180deg, #2c4126, #1b2b15);
  color: #ffe6ad;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
}
.cat-tab.active canvas { opacity: 1; }
/* Pan / Demolish utility buttons sit inline with the tabs, same height + text */
.tool.util {
  width: 56px;
  height: 46px;
  font-size: 10px;
  padding-bottom: 4px;
  gap: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border-color: transparent;
}
/* size the shared 48x44 tool canvas down so it fits inside the short util button
   (a CSS transform wouldn't shrink the layout box, so the icon spilled out) */
.tool.util canvas { width: 27px; height: 24px; margin-top: 2px; }
.tool.util span { line-height: 1; }
.tool.util:hover { background: rgba(150, 200, 240, 0.12); }

.tool {
  pointer-events: auto;
  width: 66px;
  height: 72px;
  border-radius: 10px;
  border: 1px solid rgba(120, 170, 210, 0.22);
  background: linear-gradient(180deg, #1b2c3e, #12202e);
  color: #cfe0ee;
  font-size: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  padding: 4px 3px 6px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.06s ease, border-color 0.1s ease, background 0.1s ease;
  position: relative;
}
.tool canvas { image-rendering: pixelated; width: 40px; height: 34px; margin-top: 2px; flex: none; }
/* labels stay inside the button: up to two short lines, centred */
.tool span { line-height: 1.05; text-align: center; max-width: 100%; }
.tool:hover { transform: translateY(-2px); border-color: rgba(150, 200, 240, 0.6); }
.tool.active {
  border-color: #ffd98a;
  background: linear-gradient(180deg, #2a3d24, #1c2c16);
  box-shadow: 0 0 0 1px #ffd98a, 0 6px 18px rgba(0, 0, 0, 0.5);
}
/* Not yet researched. Still legible and still hoverable — the tooltip names the
   technology you're waiting on, so a dimmed tool is a signpost, not a dead end. */
.tool.locked {
  opacity: 0.34;
  cursor: not-allowed;
  filter: grayscale(0.85);
}
.tool.locked:hover { transform: none; border-color: rgba(120, 140, 160, 0.35); }
#tooltip .needtech { color: #ffd98a; font-weight: 700; }

.hint {
  font-size: 11px;
  color: #7c93a8;
  background: rgba(10, 22, 34, 0.5);
  padding: 4px 10px;
  border-radius: 8px;
}
.hint kbd {
  background: #23384c;
  border-radius: 4px;
  padding: 0 5px;
  border: 1px solid #35516b;
}

#hoverinfo {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  pointer-events: none;
  white-space: nowrap;
  text-align: center;
  background: rgba(10, 22, 34, 0.86);
  border: 1px solid rgba(120, 170, 210, 0.28);
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: #dce8f2;
  backdrop-filter: blur(4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  z-index: 5;
}
#hoverinfo div:first-child { color: #ffd98a; font-weight: 600; }
/* inline pixel-art resource icons in tooltips + cost lists */
.ricon { width: 11px; height: 11px; image-rendering: pixelated; vertical-align: -2px; margin-right: 2px; }
#tooltip .ricon { vertical-align: -2px; }

#tooltip {
  position: fixed;
  display: none;
  transform: translate(-50%, -100%);
  pointer-events: none;
  white-space: nowrap;
  background: rgba(10, 22, 34, 0.92);
  border: 1px solid rgba(120, 170, 210, 0.3);
  border-radius: 8px;
  padding: 4px 9px;
  font-size: 11.5px;
  color: #ffd98a;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  z-index: 20;
}

/* Event log: readable plain text over the map, bottom-left above the toolbar.
   No panel by default; a soft tinted backing fades in on hover for legibility. */
#eventlog {
  position: fixed;
  left: 16px;
  bottom: 210px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: auto;
  padding: 6px 8px;
  border-radius: 8px;
  background: transparent;
  transition: background 0.15s ease;
  z-index: 30;
}
#eventlog:hover { background: rgba(10, 18, 28, 0.55); }
/* the chat line: hidden until Enter, sits just below the event log */
#chatinput {
  position: fixed;
  left: 16px;
  bottom: 182px;
  width: 340px;
  box-sizing: border-box;
  display: none;
  padding: 6px 9px;
  border: 1px solid rgba(140, 200, 255, 0.55);
  border-radius: 8px;
  background: rgba(10, 18, 28, 0.85);
  color: #eaf1f8;
  font: 13px system-ui, -apple-system, sans-serif;
  outline: none;
  z-index: 31;
}
#chatinput.show { display: block; }
#chatinput::placeholder { color: rgba(190, 205, 220, 0.5); }
#eventlog .logline {
  font: 13px/1.35 system-ui, -apple-system, sans-serif;
  color: #eaf1f8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 3px rgba(0, 0, 0, 0.7);
  transition: opacity 0.6s ease;
}
/* News about the world rather than about your own colony — set apart so a
   neighbour arriving doesn't read like one of your own citizens dying. */
/* these must out-specify the base `#eventlog .logline` colour rule (id+class),
   so scope them under #eventlog too — otherwise the tint never shows */
#eventlog .logline.global { color: #bcd3e6; }
#eventlog .logline.global b { font-weight: 700; }
/* a rejected/failed command — bright red so problems are unmistakable */
#eventlog .logline.error { color: #ff5b5b; font-weight: 700; }
#eventlog .logline.fade { opacity: 0; }

/* --- technology: the beaker button, sized to the full stats bar ----------- */
#techbtn {
  align-self: stretch;               /* match the stats bar's full height */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative;
  padding: 4px 12px;
  background: rgba(10, 22, 34, 0.80);
  border: 1px solid rgba(120, 170, 210, 0.28);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
  cursor: pointer; pointer-events: auto;
  transition: transform 0.06s ease, border-color 0.12s ease, background 0.12s ease;
}
#techbtn:hover { border-color: rgba(150, 200, 240, 0.7); background: rgba(18, 36, 52, 0.88); }
#techbtn:active { transform: scale(0.97); }
/* something is unlockable: a steady green rim and a soft pulse, so it reads
   from the corner of the eye without nagging */
#techbtn.has-ready { border-color: rgba(120, 226, 160, 0.85); animation: techpulse 2.4s ease-in-out infinite; }
@keyframes techpulse {
  0%, 100% { box-shadow: 0 6px 22px rgba(0,0,0,0.4), 0 0 0 0 rgba(96, 220, 150, 0.0); }
  50%      { box-shadow: 0 6px 22px rgba(0,0,0,0.4), 0 0 16px 3px rgba(96, 220, 150, 0.45); }
}
.techbadge {
  display: none; position: absolute; top: 3px; right: 3px;
  min-width: 16px; height: 16px; padding: 0 3px;
  align-items: center; justify-content: center;
  background: #3fbf7a; color: #05230f;
  border-radius: 999px; font-size: 11px; font-weight: 800;
  box-shadow: 0 0 8px rgba(63, 191, 122, 0.7);
}

/* --- the full-screen tree ------------------------------------------------- */
#techpanel {
  position: fixed; inset: 0; z-index: 60; display: none;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(30, 62, 90, 0.55), transparent 60%),
    rgba(7, 15, 24, 0.975);
  backdrop-filter: blur(3px);
}
#techpanel.show { display: flex; }
.techhead {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(120, 170, 210, 0.18);
}
.techtitle {
  font-weight: 800; letter-spacing: 4px; font-size: 17px; color: #ffd98a;
  text-shadow: 0 2px 0 #5a3d12, 0 0 18px rgba(255, 200, 100, 0.25);
}
.techlegend { display: flex; gap: 14px; font-size: 11px; color: #9fb6cc; }
.techlegend .lg { display: flex; align-items: center; gap: 5px; }
.techlegend .lg::before { content: ""; width: 9px; height: 9px; border-radius: 3px; border: 1px solid; }
.lg.unlocked::before { background: #2f7d55; border-color: #58d493; }
.lg.ready::before    { background: #1d4a6b; border-color: #7fd0ff; }
.lg.pending::before  { background: #2a3444; border-color: #6f8296; }
.lg.locked::before   { background: #1a2029; border-color: #3d4652; }
.techclose {
  margin-left: auto;   /* the note used to push this right; it's gone now */
  width: 30px; height: 30px; line-height: 1;
  background: rgba(20, 34, 48, 0.9); color: #cfe1f2;
  border: 1px solid rgba(120, 170, 210, 0.3); border-radius: 8px;
  font-size: 18px; cursor: pointer;
}
.techclose:hover { border-color: rgba(240, 150, 140, 0.7); color: #ffb4aa; }
.techscroll { flex: 1; overflow: auto; }
.techcanvas { position: relative; }
.techlines { position: absolute; inset: 0; pointer-events: none; }
.techline { fill: none; stroke: rgba(126, 176, 216, 0.32); stroke-width: 2; transition: stroke 0.15s ease; }
/* Tracing one technology's connections. The base thicket fades right back so
   the two highlighted strands read cleanly through it: amber for what this one
   WAITS ON, green for what waits on IT. */
.techcanvas.tracing .techline { stroke: rgba(126, 176, 216, 0.10); }
/* These must out-specify the dimming rule above — `.techcanvas.tracing
   .techline` is three classes deep, so a bare `.techline.need` loses to it and
   the highlighted strands come out dimmed-blue like everything else. */
.techcanvas.tracing .techline.need  { stroke: #ffc45a; stroke-width: 3; filter: drop-shadow(0 0 4px rgba(255, 196, 90, 0.55)); }
.techcanvas.tracing .techline.feeds { stroke: #6fd39a; stroke-width: 3; filter: drop-shadow(0 0 4px rgba(111, 211, 154, 0.5)); }
/* the cards at the far end of a highlighted strand, and the one under the cursor */
.techcanvas.tracing .techcard { opacity: 0.42; transition: opacity 0.15s ease, box-shadow 0.15s ease; }
.techcanvas.tracing .techcard.lit,
.techcanvas.tracing .techcard.focus { opacity: 1; }
.techcard.focus { box-shadow: 0 0 0 2px rgba(255, 217, 138, 0.75), 0 8px 26px rgba(0, 0, 0, 0.5); }
.techcard.lit { box-shadow: 0 0 0 1.5px rgba(140, 200, 240, 0.6); }
.techera {
  position: absolute; top: 16px; text-align: center;
  font-size: 10px; letter-spacing: 3px; font-weight: 700;
  color: rgba(160, 190, 216, 0.5);
  border-bottom: 1px solid rgba(120, 170, 210, 0.14); padding-bottom: 6px;
}

/* --- one technology ------------------------------------------------------- */
.techcard {
  position: absolute; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 5px;
  padding: 9px 10px;
  overflow: hidden;                 /* nothing spills past the card's rounding */
  background: linear-gradient(180deg, rgba(22, 36, 50, 0.96), rgba(13, 24, 35, 0.96));
  border: 1px solid rgba(120, 170, 210, 0.26);
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  transition: border-color 0.12s ease, transform 0.08s ease;
}
.techcard.unlocked { border-color: rgba(88, 212, 147, 0.65); background: linear-gradient(180deg, rgba(22, 52, 38, 0.96), rgba(12, 30, 22, 0.96)); }
.techcard.ready    { border-color: rgba(127, 208, 255, 0.8); box-shadow: 0 8px 22px rgba(0,0,0,0.45), 0 0 20px rgba(90, 180, 255, 0.22); }
.techcard.locked   { opacity: 0.5; }
.tcname { font-size: 13px; font-weight: 700; color: #ecf4fb; letter-spacing: 0.3px; }
.techcard.locked .tcname { color: #93a5b6; }
.tcicons { display: flex; align-items: center; gap: 3px; height: 33px; }
.tcicon canvas { display: block; image-rendering: pixelated; }
.techcard.locked .tcicon canvas { filter: grayscale(1) brightness(0.7); }
.tcmore { font-size: 10px; color: #8fa8bd; font-weight: 700; }
/* the comma list of what this unlocks — two lines' worth, so the tallest card
   (Cultivation: farm, two crops and a granary) still fits */
.tcgives {
  font-size: 10px; line-height: 1.3; color: #8fb4d2;
  height: 26px; overflow: hidden; flex: none;
}
/* One rounded BLOCK of requirements: only the outer corners round, so a stack
   of two reads as a single panel rather than two floating pills. `overflow:
   hidden` is what clips the rows' fills to the block's corners. */
.tcreqs {
  display: flex; flex-direction: column; margin-top: auto; flex: none;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px; overflow: hidden;
}
.tcreq {
  position: relative; display: flex; align-items: center; gap: 6px;
  padding: 3px 6px; font-size: 10px; color: #a8bccf;
}
.tcreq + .tcreq { border-top: 1px solid rgba(0, 0, 0, 0.28); }
.tcfill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(90, 170, 235, 0.26); }
.tcreq.met .tcfill { background: rgba(90, 220, 150, 0.22); }
.tcreq span, .tcreq b { position: relative; z-index: 1; }
.tcreq b { margin-left: auto; font-weight: 700; color: #cfe0ee; }
.tcreq.met { color: #7fd6a3; } .tcreq.met b { color: #7fd6a3; }
/* the button sits directly under the requirement block and matches its width */
.tcfoot { height: 24px; margin-top: 5px; display: flex; align-items: center; }
.tcunlock {
  width: 100%; padding: 4px 0;
  background: linear-gradient(180deg, #2f7fc0, #1d5a8c);
  color: #eaf6ff; border: 1px solid rgba(150, 210, 255, 0.7); border-radius: 7px;
  font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; cursor: pointer;
}
.tcunlock:hover { background: linear-gradient(180deg, #3c96de, #24689e); }
.tcdone { font-size: 11px; font-weight: 700; color: #6fd79f; }
.tcneed { font-size: 10px; color: #8794a3; }
.tcwait { font-size: 10px; color: #7d8b9a; }
.techzoomctl { display: flex; gap: 4px; }
.techzoomctl button {
  min-width: 28px; height: 24px; padding: 0 8px;
  background: rgba(20, 34, 48, 0.9); color: #cfe1f2;
  border: 1px solid rgba(120, 170, 210, 0.3); border-radius: 7px;
  font-family: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
}
.techzoomctl button:hover { border-color: rgba(150, 200, 240, 0.7); }
.techpad { position: relative; }
.techcanvas { position: absolute; top: 0; left: 0; transform-origin: 0 0; }

/* --- founding a colony ---------------------------------------------------
   Shown only while a new player is choosing where to settle. It sits low and
   centred, out of the way of the map they are being asked to look at. */
#founding {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 20px);
  width: min(520px, calc(100vw - 32px));
  padding: 14px 18px 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(16, 30, 44, 0.96), rgba(10, 20, 31, 0.96));
  border: 1px solid rgba(255, 217, 138, 0.45);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  color: #d8e6f2;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 60;
}
#founding.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#founding .fhead {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffd98a;
  margin-bottom: 6px;
}
#founding .fbody { font-size: 12px; line-height: 1.5; color: #a9c0d2; }
#founding .fbody b { color: #d8e6f2; font-weight: 600; }
#founding .fbtn {
  margin-top: 12px;
  padding: 7px 16px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #12200f;
  background: linear-gradient(180deg, #ffe6a6, #e8bf68);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
#founding .fbtn:hover { background: linear-gradient(180deg, #fff0c4, #f0cd7e); }

/* --- building menu controls ----------------------------------------------
   One shared look for every on/off control in the menu: the ACTIVE STATE is
   the signal. No "ON"/"OFF" words — a lit control is on. */
.bmtoggle {
  display: flex; align-items: center; gap: 8px;
  width: 100%; margin: 3px 0; padding: 6px 9px;
  border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: inherit; cursor: pointer; font: inherit; text-align: left;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.bmtoggle:hover { border-color: rgba(150, 200, 240, 0.5); }
.bmtoggle.on { border-color: #ffd98a; background: rgba(96, 186, 126, 0.24); }
.bmtoggle .bmlabel { flex: 1; }
.bmtoggle .bmicon { display: inline-flex; width: 15px; height: 15px; flex: none; }
.bmtoggle .bmicon img { width: 15px; height: 15px; image-rendering: pixelated; }
.bmglyph { flex: none; width: 13px; font-size: 10px; line-height: 1; color: #9fe6b6; letter-spacing: 1px; }
.bmglyph.paused { color: #ffc04a; }

/* worker row: click the third figure to staff three */
.bmrowlabel { margin: 7px 0 3px; opacity: 0.75; font-size: 11.5px; }
.bmrowlabel b { opacity: 1; font-weight: 600; }
.bmworkers { display: flex; gap: 3px; flex-wrap: wrap; }
.bmworker {
  width: 26px; height: 26px; padding: 4px;
  border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.bmworker svg { width: 100%; height: 100%; fill: rgba(220, 232, 244, 0.35); }
.bmworker:hover { border-color: rgba(150, 200, 240, 0.5); }
.bmworker.on { border-color: #ffd98a; background: rgba(96, 186, 126, 0.24); }
.bmworker.on svg { fill: #eaf1f8; }

/* --- the stats window: the colony's books ---------------------------------
   Same full-screen treatment as the tech tree, so the two read as siblings. */
#statswin {
  position: fixed; inset: 0; z-index: 60; display: none;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(30, 62, 90, 0.55), transparent 60%),
    rgba(7, 15, 24, 0.975);
  backdrop-filter: blur(3px);
}
#statswin.show { display: flex; }
.swhead {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px; border-bottom: 1px solid rgba(120, 170, 210, 0.18);
}
.swtitle {
  font-weight: 800; letter-spacing: 4px; font-size: 17px; color: #ffd98a;
  text-shadow: 0 2px 0 #5a3d12, 0 0 18px rgba(255, 200, 100, 0.25);
}
.swclose {
  margin-left: auto; width: 30px; height: 30px; line-height: 1;
  background: rgba(18, 36, 52, 0.9); color: #cfe2f2; font-size: 19px;
  border: 1px solid rgba(120, 170, 210, 0.35); border-radius: 8px; cursor: pointer;
}
.swclose:hover { border-color: rgba(150, 200, 240, 0.75); }
.swbody { flex: 1; display: flex; min-height: 0; }
.swlist {
  width: 330px; overflow-y: auto; padding: 10px 8px 24px;
  border-right: 1px solid rgba(120, 170, 210, 0.14);
}
.swgroup {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 14px 4px 4px; padding: 5px 8px; border-radius: 6px; cursor: pointer;
  font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  color: #9fb6cc; border: 1px solid transparent;
}
.swgroup span { font-size: 12px; letter-spacing: 0; color: #cfe2f2; }
.swgroup:hover { background: rgba(30, 62, 90, 0.5); }
.swgroup.on { background: rgba(30, 74, 107, 0.75); border-color: #7fd0ff; color: #dff0ff; }
.swrow {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 3px 8px; border-radius: 5px; font-size: 13px; color: #c3d5e6;
  border: 1px solid transparent;
}
.swrow:hover { background: rgba(30, 62, 90, 0.5); }
.swrow.on { background: rgba(30, 74, 107, 0.75); border-color: #7fd0ff; }
.swname { flex: 1; text-transform: capitalize; }
.swval { font-variant-numeric: tabular-nums; color: #eaf3fb; }
.swpop { display: flex; gap: 10px; padding: 4px 8px 2px; flex-wrap: wrap; }
.swpop div { display: flex; flex-direction: column; }
.swpop b { font-size: 19px; color: #eaf3fb; font-variant-numeric: tabular-nums; }
.swpop span { font-size: 10px; color: #8ea6ba; letter-spacing: 1px; }
.swgraph { flex: 1; display: flex; flex-direction: column; padding: 16px 22px; min-width: 0; }
.swglabel {
  font-size: 15px; font-weight: 700; color: #ffd98a; text-transform: capitalize;
  margin-bottom: 8px;
}
.swcanvas { width: 100%; max-height: 60vh; flex: 1; min-height: 0; }
.swlegend { display: flex; gap: 16px; margin-top: 10px; }
.swkey { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #b6cade; }
.swkey i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.swnote { margin-top: 6px; font-size: 11px; color: #6d8296; }
#statsbar { cursor: pointer; }

/* --- auth: sign-in gate + admin-only dev controls -------------------------- */
/* the three dev controls (minerals overlay, reset, tick speed) + admin link
   are hidden for everyone; JS removes .admin-only for admin accounts. */
.admin-only { display: none !important; }
#adminlink { text-decoration: none; color: #cfe0f2; background: rgba(60,80,110,0.5); border: 1px solid rgba(120,150,190,0.4); border-radius: 6px; padding: 4px 8px; font-size: 12px; text-align: center; }
#adminlink:hover { background: rgba(80,110,150,0.6); }

#logingate {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 50% 20%, #16283a 0%, #0b131d 70%);
}
/* the author `display:flex` above would otherwise beat the UA `[hidden]` rule,
   leaving the gate covering the game after a successful sign-in */
#logingate[hidden] { display: none; }
#loginform {
  display: flex; flex-direction: column; gap: 12px; width: 300px;
  padding: 30px 28px; background: rgba(14,22,34,0.9);
  border: 1px solid #24384f; border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
#loginform .brand { font-size: 22px; font-weight: 800; letter-spacing: 1px; color: #eaf1f8; text-align: center; }
#loginform .brand span { color: #7fa8d8; font-weight: 600; margin: 0 3px; }
#loginform .sub { margin: -4px 0 8px; text-align: center; color: #8ea3bd; font-size: 13px; }
#loginform input {
  font: 15px system-ui, sans-serif; padding: 10px 12px; border-radius: 8px;
  border: 1px solid #2c3d55; background: #0c1420; color: #eaf1f8;
}
#loginform input:focus { outline: none; border-color: #3f6ff0; }
#loginform button {
  font: 600 15px system-ui, sans-serif; padding: 10px; border: 0; border-radius: 8px;
  background: #2f6df0; color: #fff; cursor: pointer;
}
#loginform button:hover { background: #3a78ff; }
#loginmsg { min-height: 16px; font-size: 13px; color: #ff6b6b; text-align: center; }