/* food_chain.css — energy pyramid drawn by viz/food_chain.js (pure DOM bars). */

.fc { display: flex; flex-direction: column; gap: 0.85rem; }
.fc-pyramid { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.6rem 0.2rem; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 0.8rem; background: linear-gradient(180deg, #0a0f1a, #06090f); }
.fc-row { display: flex; align-items: center; gap: 0.6rem; }
.fc-name { flex: 0 0 9.5rem; font-size: 0.78rem; font-weight: 600; color: #cbd5e1; text-align: right; }
.fc-bartrack { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 0.45rem; }
.fc-bar { height: 30px; border-radius: 0 7px 7px 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 0.5rem; transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1); min-width: 2.4rem; flex: 0 0 auto; overflow: hidden; }
.fc-eval { font-size: 0.72rem; font-weight: 800; color: #07121d; white-space: nowrap; }
/* value sits OUTSIDE narrow bars so it never clips */
.fc-eval-out { font-size: 0.72rem; font-weight: 800; color: #dbe4f0; white-space: nowrap; }
/* bottom (producers) widest & greenest, narrowing & warming to the top predator */
.fc-l0 { background: linear-gradient(90deg, #16a34a, #4ade80); }
.fc-l1 { background: linear-gradient(90deg, #65a30d, #a3e635); }
.fc-l2 { background: linear-gradient(90deg, #d97706, #fbbf24); }
.fc-l3 { background: linear-gradient(90deg, #dc2626, #fb7185); }
.fc-loss { font-size: 0.68rem; color: #8aa0b6; font-style: italic; text-align: center; margin: -0.05rem 0 0.05rem 9.5rem; }

@media (max-width: 540px) {
  .fc-name { flex-basis: 6.2rem; font-size: 0.7rem; }
  .fc-loss { margin-left: 6.2rem; font-size: 0.62rem; }
}