/* density_float.css — the liquid tank + object for viz/density_float.js (pure DOM). */

.df { display: flex; flex-direction: column; gap: 0.85rem; }
.df-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 210px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 0.8rem; background: linear-gradient(180deg, #0c1424, #07090f); }
.df-liquid { position: absolute; left: 0; right: 0; top: 36%; bottom: 0; transition: background 0.2s; }
.df-line { position: absolute; left: 0; right: 0; top: 36%; height: 0; border-top: 1.5px solid rgba(125, 211, 252, 0.6); }
.df-obj { position: absolute; left: 50%; width: 60px; height: 18%; transform: translateX(-50%); z-index: 2; border-radius: 4px;
  background: linear-gradient(180deg, #fcd34d, #d97706); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4); transition: top 0.4s cubic-bezier(.4,1.3,.6,1), background 0.2s; }
.df-obj.df-sunk { background: linear-gradient(180deg, #94a3b8, #475569); }
.df-phase { position: absolute; left: 8px; top: 6px; font-size: 0.78rem; font-weight: 600; color: #aebdce; background: rgba(6, 10, 18, 0.6); padding: 2px 7px; border-radius: 5px; }
.df-liqs { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.df-llbl { font-size: 0.85rem; color: #9fb0c3; font-weight: 600; margin-right: 0.2rem; }
.df-liq { 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; }
.df-liq:hover { background: rgba(255, 255, 255, 0.09); }
.df-liq.df-on { color: #07121d; background: #38bdf8; border-color: #38bdf8; }