:root {
  /* sunlit-parchment theme — tuned to match the warm daylight world */
  --ink: #2C2820;        /* dark earthy text (world ink) */
  --ink-soft: #5E5440;
  --ink-faint: #8C7E60;
  --gold: #B07E1C;       /* deep sun-gold, readable on light */
  --gold-deep: #876012;
  --green: #4E7E2A;      /* world grass accent */
  --panel: rgba(243, 235, 211, 0.92);        /* solid sunlit parchment block */
  --panel-strong: rgba(249, 243, 226, 0.96);
  --slot: rgba(228, 218, 193, 0.62);
  --border: rgba(74, 58, 30, 0.18);
  --border-strong: rgba(74, 58, 30, 0.36);
  --hair: rgba(74, 58, 30, 0.12);
  --shadow: 4px 4px 0 rgba(74, 58, 30, 0.3), 0 8px 18px -12px rgba(54, 40, 18, 0.35);  /* hard pixel drop shadow */
  /* Pixels brand kit — pixel-art typography (our warm colors kept) */
  --font: "Pixelify Sans", "Inter", system-ui, sans-serif;          /* body */
  --display: "Press Start 2P", "Pixelify Sans", system-ui, sans-serif; /* impactful headlines */
  --mono: "Silkscreen", "Pixelify Sans", ui-monospace, monospace;   /* numerals */
  --pixel-shadow: 2px 2px 0 rgba(90, 70, 30, 0.45);                 /* hard, straight-edged drop shadow */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font); color: var(--ink); overflow: hidden;
  background: #0d1a14; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  cursor: default;
}
body.pl { cursor: none; }
#scene { position: fixed; inset: 0; display: block; }

#atmos {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(140% 90% at 50% 4%, rgba(255, 250, 235, 0.12) 0%, rgba(0,0,0,0) 40%),
    radial-gradient(130% 120% at 50% 120%, rgba(20, 14, 6, 0.42) 0%, rgba(0,0,0,0) 60%);
  transition: background .8s ease;
}
body.underground #atmos {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255, 220, 150, 0.22) 0%, rgba(0,0,0,0) 45%),
    radial-gradient(130% 130% at 50% 60%, rgba(0,0,0,0) 30%, rgba(10, 6, 2, 0.6) 100%);
}

#hud { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
#hud > * { pointer-events: auto; }

.panel {
  background: var(--panel); backdrop-filter: blur(5px) saturate(1.05);
  -webkit-backdrop-filter: blur(5px) saturate(1.05);
  border: 2px solid var(--border-strong); border-radius: 5px; box-shadow: var(--shadow);
}

/* ---------- brand ---------- */
#brand { position: absolute; top: 22px; left: 24px; display: flex; align-items: center; gap: 13px; }
.mark {
  width: 44px; height: 44px; border-radius: 4px; background: var(--panel-strong);
  border: 1px solid var(--border-strong); display: grid; place-items: center; position: relative; overflow: hidden;
  box-shadow: var(--shadow);
}
.mark .hex { width: 18px; height: 18px; background: radial-gradient(circle at 35% 30%, #FFE39A, var(--gold) 60%, var(--gold-deep));
  clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); box-shadow: 0 0 14px rgba(232,194,74,.5); }
.brand-txt h1 { font-family: var(--display); font-size: 12px; font-weight: 400; letter-spacing: 0; line-height: 1.15; text-shadow: var(--pixel-shadow); }
.brand-txt p { font-size: 10px; color: var(--ink-faint); margin-top: 4px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; }

/* ---------- top stat HUD ---------- */
#stats { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); display: flex; padding: 7px 6px; gap: 2px; }
.stat { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 17px; min-width: 86px; position: relative; }
.stat + .stat::before { content: ''; position: absolute; left: 0; top: 18%; height: 64%; width: 1px; background: var(--hair); }
.stat .sk { font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.stat .sv { font-size: 16px; font-weight: 660; font-family: var(--mono); letter-spacing: -0.01em; }
.stat .sv b { color: var(--gold); }

/* ---------- backend run test ---------- */
#backend {
  position: absolute; top: 24px; right: 24px; width: min(360px, calc(100vw - 48px));
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  padding: 8px 10px 10px 12px;
}
.backend-copy { min-width: 0; }
.backend-k { font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint); font-weight: 650; }
.backend-s { margin-top: 2px; font-size: 11px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.backend-actions { display: flex; align-items: center; justify-content: flex-start; gap: 7px; flex: none; flex-wrap: wrap; }
.backend-btn {
  border: 1px solid var(--gold-deep); border-radius: 4px; background: var(--gold); color: #2a1d08;
  font: 700 11px var(--font); padding: 7px 9px; cursor: pointer; white-space: nowrap;
}
.backend-btn.secondary { background: var(--slot); color: var(--ink); border-color: var(--border-strong); }
.backend-btn:disabled { opacity: 0.58; cursor: wait; }
.forecast-select {
  height: 30px; min-width: 96px; border: 1px solid var(--border-strong); border-radius: 4px;
  background: var(--panel-strong); color: var(--ink); font: 700 11px var(--font);
  padding: 0 7px; cursor: pointer;
}
.forecast-game-select {
  height: 30px; width: 100%; border: 1px solid var(--border-strong); border-radius: 4px;
  background: var(--panel-strong); color: var(--ink); font: 700 11px var(--font);
  padding: 0 7px; cursor: pointer;
}
.forecast-select:disabled, .forecast-game-select:disabled { opacity: 0.58; cursor: wait; }

/* ---------- KG stream overlay — small left-side panel, dark amber to
     match the bottom log terminal aesthetic ---------- */
#kg-overlay {
  position: fixed; left: 14px; top: 14px; transform: none;
  width: 320px; max-height: 460px;
  z-index: 8; display: none; padding: 12px 14px; overflow: hidden;
  background: rgba(12, 8, 4, 0.86);
  border: 1px solid rgba(196, 142, 68, 0.35);
  border-radius: 10px;
  box-shadow: 0 6px 22px -10px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,200,130,0.06);
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  color: rgba(241, 216, 168, 0.82);
  font-family: var(--mono, ui-monospace), monospace;
  font-size: 11px;
}
/* KG overlay hidden by default. The 3D crystal is the metaphor for
   the knowledge graph in the demo; the SVG panel was a perf cost too
   high to justify. To re-enable for debugging, change the rule below
   back to `display: block`. */
#kg-overlay.show { display: block; transform: none; }
.kg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(196, 142, 68, 0.22); }
.kg-k { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(241,216,168,0.55); font-weight: 700; }
.kg-title { margin-top: 2px; font-size: 12px; font-weight: 700; color: rgba(241,216,168,0.95); }
.kg-close {
  width: 24px; height: 24px; border-radius: 6px;
  border: 1px solid rgba(196,142,68,0.25);
  background: rgba(50,30,14,0.5); color: rgba(241,216,168,0.7);
  font: 700 14px var(--font); cursor: pointer; line-height: 0;
}
.kg-close:hover { color: #FFD988; }
.kg-status { margin: 8px 0 6px; font-size: 10px; color: rgba(241,216,168,0.55); letter-spacing: 0.5px; }
.kg-legend { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 0 0 6px; }
.kg-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px;
  border: 1px solid rgba(196,142,68,0.2);
  background: rgba(196,142,68,0.06);
  border-radius: 999px; font-size: 9px; color: rgba(241,216,168,0.72);
}
.kg-chip i { width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 6px currentColor; }
.kg-chip b { font-family: var(--mono); color: #FFD988; font-weight: 700; }
#kg-svg {
  width: 100%; height: 230px;
  background: rgba(28,18,8,0.5);
  border: 1px solid rgba(196,142,68,0.18);
  border-radius: 6px;
}
/* No drop-shadow — that filter is GPU-rasterised every time innerHTML
   rebuilds the SVG (which happens repeatedly as the KG grows) and was
   the main source of lag when the box first appears. The stronger
   stroke alone reads as a halo. */
.kg-group circle { fill: color-mix(in srgb, var(--kg-color) 14%, transparent); stroke: color-mix(in srgb, var(--kg-color) 65%, transparent); stroke-width: 1.8; }
.kg-group text { fill: var(--ink-faint); font: 700 10px var(--font); text-anchor: middle; text-transform: uppercase; letter-spacing: 0.08em; }
.kg-band { fill: none; stroke: rgba(74,58,30,0.18); stroke-linecap: round; }
.kg-node { cursor: pointer; }
.kg-node circle { stroke: rgba(255, 220, 160, 0.65); stroke-width: 1.2; filter: drop-shadow(0 0 3px rgba(0,0,0,0.6)); }
.kg-node.fixture circle { stroke: #FFE9A0; stroke-width: 3; filter: drop-shadow(0 0 12px rgba(255, 233, 160, 0.55)); }
.kg-node.focused circle { stroke-width: 1.8; filter: drop-shadow(0 0 6px rgba(255, 217, 136, 0.45)); }
.kg-node.compact circle { stroke-width: 1.8; filter: drop-shadow(0 0 4px rgba(0,0,0,0.6)); }
.kg-node:hover circle { stroke: #FFE9A0; stroke-width: 2.4; }
.kg-node.dim { opacity: 0.25; }
.kg-node.selected circle { stroke: #FFE9A0; stroke-width: 3; filter: drop-shadow(0 0 10px rgba(255, 217, 136, 0.85)); }
/* New/updated pulse — no drop-shadow filter (cheap stroke change only)
   so the animation doesn't trigger composite-layer GPU work on every
   one of the ~150 nodes added during streaming. */
.kg-node.new circle { animation: kg-node-new 0.8s ease-out 0s 1; stroke: #6DD68A; stroke-width: 3; }
.kg-node.updated circle { animation: kg-node-updated 0.7s ease-out 0s 1; stroke: #66E0FF; stroke-width: 3; }
/* Cheap stroke-width/opacity pulse — no drop-shadow filter so the
   compositor doesn't rasterise each animating node on every frame. */
@keyframes kg-node-new {
  0%   { stroke-width: 3; stroke-opacity: 1; }
  45%  { stroke-width: 5; stroke-opacity: 1; }
  100% { stroke-width: 1.2; stroke-opacity: 0.65; }
}
@keyframes kg-node-updated {
  0%   { stroke-width: 3; stroke-opacity: 1; }
  45%  { stroke-width: 4.5; stroke-opacity: 1; }
  100% { stroke-width: 1.2; stroke-opacity: 0.65; }
}
.kg-node text { fill: rgba(241,216,168,0.85); font: 700 8px var(--mono, ui-monospace), monospace; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: rgba(12,8,4,0.85); stroke-width: 2.4px; }
.kg-node.fixture text { font-size: 12px; stroke-width: 3.2px; fill: #FFE9A0; }
.kg-node.focused text { font-size: 9px; stroke-width: 2.6px; }
.kg-node.compact text { font-size: 10px; stroke-width: 2.8px; }
.kg-empty-note { fill: rgba(241,216,168,0.55); font: 700 11px var(--mono); text-anchor: middle; letter-spacing: 0; }
.kg-group text { fill: rgba(241,216,168,0.5); font: 700 9px var(--mono); text-anchor: middle; text-transform: uppercase; letter-spacing: 0.08em; }
.kg-band { stroke: rgba(196,142,68,0.16); }
.kg-selected-edge { stroke: rgba(255,217,136,0.65); stroke-width: 2.2; stroke-linecap: round; }
.kg-detail {
  margin-top: 8px; padding: 8px; min-height: 60px; max-height: 130px;
  border: 1px solid rgba(196,142,68,0.18);
  background: rgba(28,18,8,0.5); border-radius: 6px;
  font-size: 10px; color: rgba(241,216,168,0.72); overflow: auto;
}
.kg-detail::-webkit-scrollbar { width: 0; }
.kg-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.kg-detail-head b { display: block; color: rgba(241,216,168,0.5); text-transform: uppercase; letter-spacing: 0.12em; font-size: 8px; }
.kg-detail-head strong { display: block; color: rgba(241,216,168,0.95); font-size: 11px; margin-top: 2px; font-weight: 700; }
.kg-url {
  color: #FFD988; font-family: var(--mono); font-size: 9px; text-decoration: none;
  max-width: 44%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kg-detail p { margin-top: 6px; line-height: 1.4; color: rgba(241,216,168,0.78); }
.kg-attrs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; margin-top: 8px; }
.kg-attrs div { min-width: 0; display: flex; justify-content: space-between; gap: 6px; }
.kg-attrs span { color: rgba(241,216,168,0.5); text-transform: uppercase; letter-spacing: 0.08em; font-size: 8px; }
.kg-attrs b { color: rgba(241,216,168,0.9); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.kg-subhead { margin-top: 8px; color: rgba(241,216,168,0.5); text-transform: uppercase; letter-spacing: 0.1em; font-size: 8px; font-weight: 700; }
.kg-links { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.kg-links a {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 6px;
  border: 1px solid rgba(196,142,68,0.2); border-radius: 4px; background: rgba(50,30,14,0.5);
  color: rgba(241,216,168,0.85); text-decoration: none; font-size: 9px;
}
.kg-links a:hover { border-color: rgba(255,217,136,0.55); background: rgba(196,142,68,0.18); color: #FFD988; }
.kg-links i { color: rgba(241,216,168,0.5); font-style: normal; text-transform: uppercase; letter-spacing: 0.06em; font-size: 7px; }
.kg-links span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.kg-links em { color: #FFD988; font-style: normal; font-family: var(--mono); font-size: 8px; }
.kg-more { color: rgba(241,216,168,0.5); font-size: 9px; padding: 4px 0; }

/* ---------- region selector ---------- */
#regions { display: none !important; }
.reg-title { font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint); font-weight: 650; padding: 3px 9px 7px; }
.reg { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 4px; cursor: pointer; transition: background .16s; }
.reg:hover { background: rgba(74,58,30,0.08); }
.reg.active { background: rgba(232,194,74,0.14); box-shadow: inset 0 0 0 1px rgba(232,194,74,0.35); }
.reg-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 9px currentColor; }
.reg-tx { min-width: 0; }
.reg-name { font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; }
.reg.active .reg-name { color: var(--gold); }
.reg-tag { font-size: 10px; color: var(--ink-faint); margin-top: 1px; }

/* ---------- inspector (right) ---------- */
#inspector { display: none; position: absolute; top: 276px; right: 24px; width: 300px; padding: 18px; max-height: calc(100vh - 414px); overflow-y: auto; flex-direction: column; }
#inspector.has-content { display: flex; }
#inspector::-webkit-scrollbar { width: 0; }
.insp-empty { color: var(--ink-faint); font-size: 12.5px; line-height: 1.65; }
.insp-empty b { color: var(--ink-soft); font-weight: 600; }
.insp-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
.insp-icon { width: 40px; height: 40px; border-radius: 4px; flex: none; display: grid; place-items: center; }
.insp-kicker { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); font-weight: 650; }
.insp-name { font-size: 19px; font-weight: 700; line-height: 1.12; margin-top: 3px; overflow-wrap: anywhere; }
.ant-card { margin: -2px 0 14px; }
.ant-card.is-dead .ant-portrait img { filter: grayscale(0.9) contrast(0.85); opacity: 0.68; }
.ant-card-head { margin-top: 11px; margin-bottom: 0; }
.ant-portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,0.72), transparent 42%),
    color-mix(in srgb, var(--ant-accent) 16%, var(--slot));
  border: 1px solid color-mix(in srgb, var(--ant-accent) 42%, var(--hair));
}
.ant-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ant-portrait-fallback { width: 34px; height: 34px; border-radius: 6px; }
.ant-status {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 5px 8px;
  border-radius: 4px;
  background: rgba(255, 251, 238, 0.86);
  border: 1px solid rgba(74, 58, 30, 0.16);
  color: var(--ink);
  font-size: 10px;
  font-family: var(--mono);
  text-transform: uppercase;
}
.ant-card.is-dead .ant-status { color: #D96E54; }
.ant-traits { color: var(--ink-faint); font-size: 11px; line-height: 1.35; margin-top: 5px; overflow-wrap: anywhere; }
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 16px 0; }
.metric { background: var(--slot); border: 1px solid var(--hair); border-radius: 4px; padding: 10px 12px; }
.metric .mk { font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.metric .mv { font-size: 19px; font-weight: 700; font-family: var(--mono); letter-spacing: -0.02em; margin-top: 4px; }
.metric .mv small { font-size: 11px; color: var(--ink-faint); font-weight: 500; }
.vital-bar { margin: 4px 0 0; }
.vital-bar .vlabel { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 5px; color: var(--ink-soft); }
.vital-bar .vlabel span:last-child { font-family: var(--mono); }
.bar { height: 5px; border-radius: 5px; background: rgba(74,58,30,0.12); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 5px; transition: width .5s ease; }
.section-label { font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint); font-weight: 650; margin: 15px 0 9px; }
.btn-primary {
  margin-top: 16px; width: 100%; padding: 12px; border-radius: 4px; border: 1px solid var(--gold-deep);
  background: linear-gradient(180deg, rgba(232,194,74,0.92), rgba(201,154,46,0.92)); color: #2a1d08;
  font-size: 13px; font-weight: 680; cursor: pointer; transition: transform .15s ease, filter .2s; letter-spacing: 0.01em;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn-primary:disabled { opacity: 0.58; cursor: wait; transform: none; }
.btn-primary svg { width: 16px; height: 16px; fill: #2a1d08; }
.ant-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 7px; margin-top: 16px; }
.ant-action { min-width: 0; margin-top: 0; padding: 10px 7px; font-size: 11px; line-height: 1; }
.ant-action span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ant-action.reproduce { background: rgba(95,184,74,0.16); color: var(--ink); border-color: rgba(95,184,74,0.5); }
.ant-action.danger { background: rgba(217,110,84,0.15); color: var(--ink); border-color: rgba(217,110,84,0.5); }
.ant-action.reproduce svg, .ant-action.danger svg { stroke: var(--ink); fill: none; }
.directives { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.dir-btn { border: 1px solid var(--hair); background: var(--slot); border-radius: 4px; padding: 9px 6px; cursor: pointer;
  text-align: center; font-size: 11px; font-weight: 600; color: var(--ink-soft); transition: all .18s; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.dir-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.dir-btn:hover { background: rgba(74,58,30,0.1); }
.dir-btn.active { background: var(--gold); color: #2a1d08; border-color: var(--gold); }
.roster { display: flex; flex-direction: column; gap: 5px; }
.roster-row { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 4px; cursor: pointer; transition: background .18s; }
.roster-row:hover { background: rgba(74,58,30,0.08); }
.roster-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.roster-name { font-size: 12px; font-weight: 550; flex: 1; }
.roster-caste { font-size: 10px; color: var(--ink-faint); font-family: var(--mono); }

/* ---------- bottom hotbar (Minecraft) ---------- */
#hotbar { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; padding: 9px; }
.slot { width: 60px; height: 60px; border-radius: 4px; background: var(--slot); border: 1px solid var(--hair);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; position: relative; transition: all .16s ease; }
.slot:hover { background: rgba(74,58,30,0.09); transform: translateY(-2px); }
.slot.active { background: rgba(232,194,74,0.16); border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(232,194,74,0.4), 0 0 18px -6px rgba(232,194,74,0.5); }
.slot svg { width: 21px; height: 21px; stroke: var(--ink-soft); fill: none; stroke-width: 1.6; }
.slot.active svg { stroke: var(--gold); }
.slot .sl-name { font-size: 8.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-faint); text-transform: uppercase; }
.slot.active .sl-name { color: var(--gold); }
.slot .sl-key { position: absolute; top: 4px; right: 6px; font-size: 8px; font-family: var(--mono); color: var(--ink-faint); }

/* ---------- left tool rail ---------- */
#tools { position: absolute; bottom: 22px; left: 24px; display: flex; flex-direction: column; gap: 7px; padding: 7px; }
.tool { width: 44px; height: 44px; border-radius: 4px; cursor: pointer; display: grid; place-items: center; position: relative; border: 1px solid transparent; transition: all .18s; }
.tool:hover { background: rgba(74,58,30,0.08); }
.tool.active { background: var(--gold); }
.tool svg { width: 19px; height: 19px; stroke: var(--ink-soft); fill: none; stroke-width: 1.6; }
.tool.active svg { stroke: #2a1d08; }
.tool .tip { position: absolute; left: 54px; top: 50%; transform: translateY(-50%); background: var(--panel-strong); border: 1px solid var(--border);
  color: var(--ink); font-size: 11px; font-weight: 500; padding: 6px 10px; border-radius: 9px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .16s; box-shadow: var(--shadow); }
.tool .tip b { font-family: var(--mono); color: var(--gold); }
.tool:hover .tip { opacity: 1; }

/* ---------- camera mode pill ---------- */
#cammode { position: absolute; bottom: 24px; right: 24px; display: flex; padding: 5px; gap: 3px; }
.cm { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); padding: 8px 14px; border-radius: 4px; cursor: pointer; transition: all .16s; display: flex; align-items: center; gap: 7px; }
.cm svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.cm.active { background: rgba(74,58,30,0.12); color: var(--ink); }

/* ---------- transport (above hotbar, compact) ---------- */
#transport { position: absolute; bottom: 96px; left: 50%; transform: translateX(-50%); width: min(560px, calc(100vw - 56px)); padding: 9px 14px; display: flex; align-items: center; gap: 13px; }
.play-btn { width: 34px; height: 34px; border-radius: 4px; flex: none; cursor: pointer; border: 1px solid var(--border); background: var(--slot); display: grid; place-items: center; transition: transform .15s; }
.play-btn:hover { transform: scale(1.06); }
.play-btn svg { width: 14px; height: 14px; fill: var(--ink); }
.timeline { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.tl-top { display: flex; justify-content: space-between; align-items: baseline; }
.tl-top .gen { font-size: 12px; font-weight: 650; }
.tl-top .clock { font-size: 11px; font-family: var(--mono); color: var(--ink-faint); }
.tl-track { height: 5px; border-radius: 5px; background: rgba(74,58,30,0.12); position: relative; cursor: pointer; }
.tl-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.tl-knob { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--gold); transform: translate(-50%,-50%); box-shadow: var(--shadow); }
.speeds { display: flex; gap: 2px; background: rgba(74,58,30,0.08); border-radius: 4px; padding: 3px; flex: none; }
.speed { font-size: 11px; font-weight: 600; font-family: var(--mono); color: var(--ink-soft); padding: 5px 9px; border-radius: 8px; cursor: pointer; transition: all .16s; }
.speed.active { background: var(--gold); color: #2a1d08; }

/* ---------- floating tooltip ---------- */
#tooltip { position: fixed; z-index: 4; pointer-events: none; padding: 11px 13px; min-width: 150px; opacity: 0; transform: translate(-50%, -116%) scale(0.96); transition: opacity .16s, transform .16s; }
#tooltip.show { opacity: 1; transform: translate(-50%, -116%) scale(1); }
#tooltip .tt-kicker { font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint); font-weight: 650; }
#tooltip .tt-name { font-size: 13.5px; font-weight: 650; margin-top: 2px; }
#tooltip .tt-rows { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
#tooltip .tt-row { display: flex; justify-content: space-between; gap: 18px; font-size: 11px; }
#tooltip .tt-row span:first-child { color: var(--ink-faint); }
#tooltip .tt-row span:last-child { font-family: var(--mono); font-weight: 600; }
#tooltip::after { content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background: var(--panel); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* ---------- thoughts ticker ---------- */
#thoughts { position: absolute; bottom: 146px; left: 50%; transform: translateX(-50%); width: min(560px, calc(100vw - 56px)); padding: 11px 16px; display: flex; align-items: center; gap: 12px; overflow: hidden; }
.think-orb { width: 22px; height: 22px; border-radius: 50%; flex: none; position: relative; background: radial-gradient(circle at 35% 30%, #FFE8A6, var(--gold) 70%); box-shadow: 0 0 14px rgba(232,194,74,.5); }
.think-orb::after { content:''; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid rgba(232,194,74,0.35); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{transform:scale(1);opacity:.7} 50%{transform:scale(1.25);opacity:0} }
#think-stream { flex: 1; min-width: 0; height: 19px; position: relative; overflow: hidden; }
.think-line { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; }
.think-line.show { opacity: 1; transform: translateY(0); }
.think-line .tag { font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; flex: none; }

/* ---------- crosshair + controls hint (explore) ---------- */
#crosshair { position: fixed; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%,-50%); z-index: 2; opacity: 0; transition: opacity .3s; pointer-events: none; }
#crosshair::before, #crosshair::after { content: ''; position: absolute; background: rgba(255,255,255,0.7); box-shadow: 0 0 3px rgba(0,0,0,0.4); }
#crosshair::before { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
#crosshair::after { top: 50%; left: 0; height: 2px; width: 100%; transform: translateY(-50%); }
body.explore-mode #crosshair { opacity: 0.8; }
#keys { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: none; gap: 8px; padding: 9px 14px; font-size: 11.5px; color: var(--ink-soft); align-items: center; }
body.explore-mode #keys { display: flex; }
body.explore-mode #hotbar, body.explore-mode #transport, body.explore-mode #thoughts { opacity: 0.25; pointer-events: none; transition: opacity .3s; }
#keys kbd { font-family: var(--mono); font-size: 10.5px; background: rgba(74,58,30,0.12); border: 1px solid var(--hair); padding: 2px 6px; border-radius: 5px; color: var(--ink); }

/* ---------- enter/exit colony banner ---------- */
#enterbanner { position: absolute; bottom: 200px; left: 50%; transform: translateX(-50%) translateY(8px); padding: 10px 18px; font-size: 13px; font-weight: 600; color: var(--ink); display: none; align-items: center; gap: 10px; border-radius: 100px; cursor: pointer; }
#enterbanner.show { display: flex; }
#enterbanner .ek { font-family: var(--mono); font-size: 11px; background: var(--gold); color: #2a1d08; padding: 3px 8px; border-radius: 6px; font-weight: 700; }
#exitbtn { position: absolute; top: 24px; right: 24px; padding: 11px 18px; font-size: 13px; font-weight: 650; color: var(--ink); display: none; align-items: center; gap: 9px; cursor: pointer; border-radius: 4px; }
#exitbtn.show { display: flex; }
#exitbtn svg { width: 15px; height: 15px; stroke: var(--ink); fill: none; stroke-width: 2; }
body.underground #stats, body.underground #hotbar, body.underground #tools, body.underground #transport, body.underground #thoughts, body.underground #cammode, body.underground #brand { opacity: 0; pointer-events: none; transition: opacity .4s; }

/* fade overlay for dive transition */
#fade { position: fixed; inset: 0; z-index: 8; background: #100a04; opacity: 0; pointer-events: none; transition: opacity .55s ease; }
#fade.show { opacity: 1; }

/* intro */
#intro { position: fixed; inset: 0; z-index: 10; background: radial-gradient(circle at 50% 40%, #1f3326, #0d1a14); display: grid; place-items: center; transition: opacity 1s ease; }
#intro.hide { opacity: 0; pointer-events: none; }
#intro .iwrap { text-align: center; }
#intro .iorb { width: 56px; height: 56px; margin: 0 auto 22px; clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background: radial-gradient(circle at 35% 30%, #FFE8A6, var(--gold) 60%, var(--gold-deep)); box-shadow: 0 0 44px rgba(232,194,74,.5); animation: breathe 2s ease-in-out infinite; }
@keyframes breathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }
#intro h1 { font-family: var(--display); font-size: 22px; font-weight: 400; letter-spacing: 0; line-height: 1.25; text-shadow: 3px 3px 0 rgba(0,0,0,0.4); }
#intro p { font-size: 13px; color: var(--ink-faint); margin-top: 8px; letter-spacing: 0.04em; }

@media (max-width: 1180px) {
  #backend { width: min(220px, calc(100vw - 48px)); }
  .backend-btn { font-size: 10px; padding: 7px 8px; }
  .forecast-select { min-width: 88px; font-size: 10px; }
  .forecast-game-select { font-size: 10px; }
  #inspector { top: 316px; width: 270px; max-height: calc(100vh - 454px); }
  .stat { min-width: 72px; padding: 5px 11px; }
}

@media (max-width: 900px) {
  #stats { display: none; }
  #backend { top: 84px; }
}