/* natural_selection.css — moths on bark + history strip for viz/natural_selection.js (pure DOM). */

.ns { display: flex; flex-direction: column; gap: 0.8rem; }
.ns-stage { position: relative; width: 100%; aspect-ratio: 16 / 8; min-height: 200px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 0.8rem; }
.ns-bark { position: absolute; inset: 0; --bark: 0.22;
  background-color: rgb(calc((1 - var(--bark)) * 150 + 55), calc((1 - var(--bark)) * 130 + 45), calc((1 - var(--bark)) * 100 + 35));
  background-image: repeating-linear-gradient(92deg, rgba(0,0,0,0.12) 0 3px, transparent 3px 11px), repeating-linear-gradient(88deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 16px); transition: background-color 0.3s; }
.ns-moths { position: absolute; inset: 0; pointer-events: none; }
.ns-moth { position: absolute; width: 16px; height: 11px; border-radius: 50% 50% 48% 48%; transform: translate(-50%, -50%); box-shadow: 0 1px 2px rgba(0,0,0,0.4); transition: background 0.4s, left 0.4s, top 0.4s, opacity 0.3s; }
.ns-moth::before, .ns-moth::after { content: ""; position: absolute; top: 50%; width: 7px; height: 9px; background: inherit; border-radius: 50%; transform: translateY(-50%); }
.ns-moth::before { left: -3px; } .ns-moth::after { right: -3px; }
.ns-eaten { opacity: 0.12; }
.ns-phase { position: absolute; left: 8px; bottom: 6px; font-size: 0.78rem; font-weight: 600; color: #f1f5f9; background: rgba(6, 10, 18, 0.55); padding: 2px 7px; border-radius: 5px; }

.ns-hist-wrap { display: flex; flex-direction: column; gap: 2px; }
.ns-hlbl { font-size: 0.72rem; color: #8aa0b6; }
.ns-hist { display: flex; align-items: flex-end; gap: 3px; height: 36px; padding: 0 2px; border-radius: 6px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
.ns-bar { flex: 1; min-width: 4px; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, #475569, #1e293b); }

.ns-envs { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.ns-elbl { font-size: 0.85rem; color: #9fb0c3; font-weight: 600; margin-right: 0.2rem; }
.ns-env { cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 600; color: #cbd5e1; padding: 0.28rem 0.7rem; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.14); transition: all 0.12s ease; }
.ns-env:hover { background: rgba(255, 255, 255, 0.09); }
.ns-env.ns-on { color: #07121d; background: #34d399; border-color: #34d399; }