:root {
  --bg: #06090d;
  --panel: rgba(13, 18, 25, 0.82);
  --ink: #d3dde4;
  --muted: #79899a;
  --line: rgba(255, 255, 255, 0.08);
  --teal: #36e0b0;
  --teal-dim: rgba(54, 224, 176, 0.16);
  --amber: #ffc454;
  --red: #ff5a6e;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

#app { display: flex; height: 100vh; width: 100vw; }

/* ---------- stage ---------- */
#stage {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(40, 90, 80, 0.20), transparent 60%),
    radial-gradient(120% 120% at 50% 120%, rgba(20, 30, 60, 0.25), transparent 55%),
    #04060a;
  cursor: grab;
}
#stage.dragging { cursor: grabbing; }
#world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* 2D overlay for boundary + selection when the WebGL backend is active; transparent + click-through */
#overlay { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

/* multi-world islands grid (?islands=2..4) */
#stage.islands { display: grid; gap: 2px; background: #05070b; }
.island-cell { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,0.06); }
.island-cell.active { border-color: rgba(54,224,176,0.55); }
.island-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.island-ov { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.island-label { position: absolute; top: 6px; left: 8px; font-size: 10px; color: var(--muted); letter-spacing: 0.05em; pointer-events: none; }
.island-cell.active .island-label { color: var(--teal); }

#hint, #legend {
  position: absolute;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
  pointer-events: none;
  user-select: none;
}
#hint { left: 14px; bottom: 12px; }
#legend { left: 14px; top: 12px; display: flex; gap: 14px; }
#legend span { display: inline-flex; align-items: center; gap: 5px; }
.dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.dot.food { background: var(--amber); border-radius: 50%; }
.dot.toxic { background: rgb(190, 110, 235); }
.dot.carrion { background: rgb(150, 92, 70); border-radius: 2px; }
.dot.lineage { background: linear-gradient(90deg, hsl(160,70%,55%), hsl(265,70%,62%), hsl(330,70%,60%)); }
.dot.carn { background: var(--red); }

#toast {
  position: absolute;
  top: 16px; left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: rgba(8, 12, 16, 0.9);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- panel ---------- */
#panel {
  width: 372px;
  flex-shrink: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 20px 18px 28px;
  background: var(--panel);
  backdrop-filter: blur(14px);
  border-left: 1px solid var(--line);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
#panel::-webkit-scrollbar { width: 8px; }
#panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 8px; }

.brand h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.22em;
  background: linear-gradient(90deg, var(--teal), #8fe9ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand .tagline { margin: 4px 0 0; font-size: 11.5px; color: var(--muted); letter-spacing: 0.03em; }

section { margin-top: 18px; }

/* stat grid */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.stat {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
}
.stat .val {
  font-family: var(--mono);
  font-size: 23px;
  font-weight: 600;
  color: var(--teal);
  text-shadow: 0 0 18px rgba(54, 224, 176, 0.35);
  line-height: 1.1;
}
.stat .lbl { font-size: 10.5px; color: var(--muted); margin-top: 3px; letter-spacing: 0.04em; text-transform: uppercase; }

/* controls */
.btn-row { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 9px; }
.btn {
  flex: 1;
  min-width: max-content;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  font-family: var(--sans);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
  white-space: nowrap;
}
.btn:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255,255,255,0.18); }
.btn:active { transform: translateY(1px); }
.btn.small { flex: 0 0 auto; padding: 6px 9px; font-size: 11.5px; }
.btn.primary { background: var(--teal-dim); border-color: rgba(54, 224, 176, 0.4); color: #aef5dd; }
.btn.primary:hover { background: rgba(54, 224, 176, 0.26); }
.btn.danger:hover { background: rgba(255, 90, 110, 0.18); border-color: rgba(255, 90, 110, 0.45); color: #ffb4bd; }

.ctrl { margin-bottom: 11px; }
.ctrl label { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 6px; letter-spacing: 0.02em; }
.ctrl.seed { display: flex; align-items: center; gap: 8px; }
.ctrl.seed label { margin: 0; }
.ctrl.seed input[type=text] {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 7px;
  padding: 6px 9px;
  font-size: 12.5px;
}
.mono { font-family: var(--mono); color: var(--ink); }

input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 4px;
  background: rgba(255,255,255,0.12); outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--teal); cursor: pointer;
  box-shadow: 0 0 10px rgba(54,224,176,0.6);
}
input[type=range]::-moz-range-thumb {
  width: 15px; height: 15px; border: none; border-radius: 50%;
  background: var(--teal); cursor: pointer;
}

/* charts */
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chart { background: rgba(255,255,255,0.015); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.chart canvas { width: 100%; height: 56px; display: block; }

/* phylogeny / muller */
.sec-label { font-size: 10px; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 6px; }
.sec-row { display: flex; align-items: center; justify-content: space-between; }
.sec-row .btn.small { text-transform: none; letter-spacing: 0; padding: 3px 8px; font-size: 10.5px; }
.phylo { background: rgba(255,255,255,0.015); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.phylo canvas { width: 100%; height: 138px; display: block; }
.scrub-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.scrub-row input[type=range] { flex: 1; }
.scrub-row .btn.small { padding: 2px 9px; }

/* inspector */
.inspector {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px;
  background: rgba(255,255,255,0.015);
}
.insp-head { display: flex; align-items: center; justify-content: space-between; }
.insp-head h2 { margin: 0; font-size: 13.5px; font-weight: 600; letter-spacing: 0.03em; }
.insp-hint { font-size: 11.5px; color: var(--muted); margin: 8px 0 0; }
.net { width: 100%; height: 172px; display: block; margin: 10px 0 4px; }

.specimen-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px;
  margin-top: 8px; font-size: 11.5px;
}
.specimen-stats .row { display: flex; justify-content: space-between; border-bottom: 1px dotted rgba(255,255,255,0.06); padding: 2px 0; }
.specimen-stats .k { color: var(--muted); }
.specimen-stats .v { font-family: var(--mono); color: var(--ink); }

.genome { margin-top: 11px; display: grid; gap: 4px; }
.gene { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 8px; font-size: 10.5px; }
.gene .gk { color: var(--muted); text-align: right; }
.gene .bar { height: 7px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; }
.gene .bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), #8fe9ff); border-radius: 4px; }

/* footer */
.foot { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.foot .sep { opacity: 0.5; }

@media (max-width: 820px) {
  #app { flex-direction: column; }
  #panel { width: 100%; height: 46vh; border-left: none; border-top: 1px solid var(--line); }
  #stage { height: 54vh; }
  .charts { grid-template-columns: 1fr 1fr; }
}

/* Private observatory edition. Every asset and font is served locally. */
:root { --bg:#080e12; --panel:#0d171c; --ink:#dbe8e4; --muted:#819b99; --line:rgba(169,203,193,.13); --teal:#7cdbb7; --amber:#ffc454; }
[hidden] { display:none !important; }
button, select, input { outline-offset:4px; }
button:focus-visible, select:focus-visible, input:focus-visible { outline:2px solid var(--teal); }
#stage { background:radial-gradient(ellipse at 45% 46%, #11262a 0, #0a171e 48%, #060c12 90%); }
#world, #overlay { top:124px; bottom:162px; height:calc(100% - 286px); }
.stage-head { position:absolute;top:0;left:0;right:0;height:78px;display:flex;justify-content:space-between;align-items:center;padding:16px 27px;border-bottom:1px solid var(--line);z-index:3; }
.eyebrow { font:9px var(--mono);letter-spacing:.14em;color:var(--muted);margin:0; }
.stage-head h1 { font-size:27px;font-weight:500;letter-spacing:.21em;margin:5px 0 0;color:#dff8ed; }
.title-orbit { color:var(--teal);margin-left:12px;font-size:26px; }
.stage-status { display:flex;align-items:center;gap:8px;font:9px var(--mono);color:var(--muted); }
.live-indicator { width:5px;height:5px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px #7cdbb780; }
.badge { border:1px solid var(--line);padding:5px 7px;border-radius:4px;font:8px var(--mono);letter-spacing:.06em;color:var(--muted); }
.checkpoint-bar {position:absolute;top:78px;left:0;right:0;height:46px;display:flex;align-items:center;gap:13px;padding:0 27px;border-bottom:1px solid var(--line);z-index:3;background:#0a1419cc;}
.checkpoint-bar select { width:195px; }
#checkpointStatus { font-size:9px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
select, .lab-inputs input { min-width:0;background:#14232a;border:1px solid var(--line);border-radius:5px;padding:8px;color:var(--ink);font:11px var(--sans); }
.text-btn { padding:3px 0;border:none;background:none;color:var(--teal);font:10px var(--sans);cursor:pointer;white-space:nowrap; }
.text-btn:hover { color:#e2fff5; }
#legend {top:140px;left:27px;font-size:9px;gap:11px;z-index:2;}
.dot {width:6px;height:6px;}.dot.toxic {background:#8a5fb0;}.dot.lineage {background:hsl(168,62%,50%);}.dot.scav {background:hsl(34,48%,50%);}.dot.carn {background:hsl(352,92%,60%);}.dot.carrion {background:transparent;border:1px solid #985d45;}
#hint {bottom:177px;left:27px;font-size:9px;}
#panel { width:354px;padding:23px 22px 30px;background:linear-gradient(150deg,#102026,#0b1419);backdrop-filter:none; }
.brand h2 {font-size:22px;font-weight:400;letter-spacing:-.025em;line-height:1.3;margin:15px 0 6px;}
.brand .tagline {font-size:10.5px;line-height:1.6;}
.stat-grid {grid-template-columns:repeat(3,1fr);gap:0;padding:11px 0 13px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.stat {padding:9px 6px;border:0;border-radius:0;background:none;}.stat .val {font-size:20px;font-weight:400;color:#d6eee5;text-shadow:none;}.stat .lbl {font-size:8px;letter-spacing:.04em;}
.ecology-lab {border:1px solid #7cdbb732;background:linear-gradient(135deg,#19302e80,#0c181d);border-radius:8px;padding:15px;margin-top:18px;}
.ecology-lab h2 {font-size:22px;font-weight:400;letter-spacing:-.03em;margin:9px 0;}.lab-mark {font-size:20px;color:var(--teal);}.lab-intro {font-size:11px;color:#9eb5ad;line-height:1.7;margin:0 0 14px;}.ecology-lab label {display:block;font-size:9px;color:var(--muted);margin:9px 0 6px;}.ecology-lab select {width:100%;font-size:10px;}
.lab-inputs {display:grid;grid-template-columns:1.65fr 1fr;gap:8px;}.lab-inputs input {width:100%;font:12px var(--mono);padding:10px 8px;}.lab-inputs input::placeholder {font:9px var(--sans);color:#6c8580;}
#labRun {width:100%;font-size:10px;margin-top:13px;padding:11px 6px;background:#7cdbb7;color:#0b2520;border:0;font-weight:600;}
#labRun:disabled {opacity:.6;cursor:progress;} .small-copy {font-size:9px;line-height:1.5;color:var(--muted);margin:10px 0 0;}
#labProgress {margin-top:13px;font-size:9px;color:var(--muted);}progress {width:100%;height:4px;accent-color:var(--teal);margin-top:9px;}#labChart {width:100%;height:94px;display:block;margin-top:8px;}
.lab-result-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:15px;}.lab-result-grid span {display:block;color:var(--muted);font-size:8px;}.lab-result-grid strong {display:block;font:18px var(--mono);margin-top:5px;font-weight:400;color:var(--teal);}#labError,#labEffect {font-size:10px;line-height:1.6;color:var(--ink);}.lab-result-grid>div:nth-child(2) strong {color:#91a5b8;}.lab-result-grid>div:nth-child(3) strong {color:var(--amber);}
.controls-details {margin-top:20px;}.controls-details summary,.limitations summary {font:9px var(--mono);letter-spacing:.07em;color:var(--muted);cursor:pointer;padding:6px 0;}.transport {margin-top:9px;}.btn {font-size:10px;padding:7px 8px;border-radius:5px;}.btn.small {font-size:9px;padding:5px 7px;}.ctrl label {font-size:10px;}.ctrl {margin-bottom:12px;}.ctrl.seed input[type=text] {font-size:11px;}
.history-ribbon {position:absolute;bottom:0;left:0;right:0;height:162px;padding:13px 27px 11px;background:#081217e8;border-top:1px solid var(--line);z-index:4;margin:0;}.history-ribbon .sec-row {height:18px;gap:10px;}#cladeLabel {font-size:9px;color:var(--muted);margin-left:auto;}#mullerRibbon {width:100%;height:99px;display:block;cursor:crosshair;}.ribbon-foot {display:flex;justify-content:space-between;font:8px var(--mono);color:#68807d;letter-spacing:.05em;}
.tour {position:absolute;left:27px;bottom:211px;width:295px;z-index:5;margin:0;padding:17px 18px;background:#0c1b21ed;border:1px solid #79baaa35;border-radius:8px;box-shadow:0 12px 45px #0003;}.tour h2 {font-size:22px;font-weight:400;letter-spacing:-.02em;line-height:1.25;margin:12px 0 9px;}.tour p {font-size:11px;line-height:1.8;color:#98b1ad;margin:0;}.tour-foot {display:flex;gap:18px;margin-top:15px;}.take-control {margin-left:auto;font:9px var(--mono);}
.loading-state {position:absolute;top:124px;left:0;right:0;bottom:162px;z-index:6;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;background:#081218f2;font:11px var(--mono);color:var(--muted);}.loading-orbit {width:40px;height:40px;border:1px solid #7cdbb733;border-top-color:var(--teal);border-radius:50%;animation:orbit 1s linear infinite;}@keyframes orbit {to{transform:rotate(360deg);}}
#toast {z-index:12;top:130px;font-size:11px;}.limitations {border-top:1px solid var(--line);margin:20px 0 12px;padding-top:10px;}.limitations p {font-size:10px;line-height:1.6;color:var(--muted);}.foot {font-size:9px;line-height:1.5;}.inspector {padding:10px;}.insp-head h2 {font-size:11px;}.insp-hint {font-size:10px;line-height:1.5;}.sec-label {font-size:9px;}.islands .stage-head,.islands .checkpoint-bar {grid-column:1/-1;}.islands .island-cell {margin-top:124px;margin-bottom:162px;}.island-cell .island-gl,.island-cell .island-ov {top:0;height:100%;bottom:0;}
@media (min-width:1500px) {#panel {width:390px;padding:27px;} .ecology-lab {padding:19px;}.brand h2 {font-size:25px;}}
@media (max-width:1100px) {.checkpoint-bar .eyebrow {display:none;}#checkpointStatus {display:none;}#transportBadge {max-width:90px;overflow:hidden;text-overflow:ellipsis;}#legend {gap:7px;flex-wrap:wrap;right:20px;}#cladeLabel {max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}}
@media (max-width:820px) {html,body {overflow:auto;}#app {height:auto;min-height:100vh;}#stage {min-height:700px;height:73vh;flex:none;}#panel {height:auto;overflow:visible;width:100%;padding:24px;}.stage-head {padding:15px 20px;}.checkpoint-bar {padding:0 20px;}.tour {width:260px;left:20px;bottom:207px;}.history-ribbon {padding-left:20px;padding-right:20px;}.ecology-lab {max-width:560px;}.stage-status {font-size:8px;}#transportBadge {display:none;}}
@media (prefers-reduced-motion:reduce) {.loading-orbit {animation:none;}* {scroll-behavior:auto!important;}}
#stage.islands { padding-top:124px; padding-bottom:162px; }
.islands .island-cell { margin:0; }